| | |
| | | } |
| | | |
| | | .page-frame { |
| | | position: absolute; |
| | | inset: 0; |
| | | width: 100%; |
| | | height: 100%; |
| | | border: 0; |
| | | display: block; |
| | | background: #fff; |
| | | opacity: 0; |
| | | visibility: hidden; |
| | | pointer-events: none; |
| | | z-index: 0; |
| | | } |
| | | |
| | | .page-frame.is-active { |
| | | opacity: 1; |
| | | visibility: visible; |
| | | pointer-events: auto; |
| | | z-index: 1; |
| | | } |
| | | |
| | | .page-loading { |
| | |
| | | |
| | | <el-main class="content-main"> |
| | | <div class="frame-wrapper"> |
| | | <div class="page-loading" v-if="pageLoading"> |
| | | <div key="page-loading" class="page-loading" v-show="pageLoading"> |
| | | <i class="el-icon-loading"></i> |
| | | <span>{{ loadingText }}</span> |
| | | </div> |
| | |
| | | <iframe |
| | | v-for="tab in tabs" |
| | | :key="'frame-' + tab.name" |
| | | class="page-frame" |
| | | :class="['page-frame', { 'is-active': activeTab === tab.name }]" |
| | | :data-tab-name="tab.name" |
| | | v-show="activeTab === tab.name" |
| | | :src="tab.currentSrc" |
| | | @load="handleFrameLoad(tab.name)"> |
| | | </iframe> |