|
|
@@ -1,11 +1,14 @@
|
|
|
<template>
|
|
|
<popup v-if="ifShow">
|
|
|
<div class="preview-wrapper" ref="preview-wrapper">
|
|
|
- <div class="title">
|
|
|
+ <div v-if="!isFullscreen" class="title">
|
|
|
<i class="iconfont icon-material_panoramic_picture title-icon"/>
|
|
|
{{imageTitleList[currentIndex]}}
|
|
|
</div>
|
|
|
- <img class="close-btn" :src="require('@/assets/images/icons/material_preview_close@2x.png')" @click=onClickClose />
|
|
|
+ <img v-if="!isFullscreen" class="close-btn" :src="require('@/assets/images/icons/material_preview_close@2x.png')" @click=onClickClose />
|
|
|
+ <div v-if="isFullscreen" class="close-btn--full-screen" @click=onClickClose>
|
|
|
+ <i class="iconfont icon-pop-ups_shut-down close-btn--full-screen__icon"/>
|
|
|
+ </div>
|
|
|
<iframe
|
|
|
ref="iframe"
|
|
|
class="iframe"
|
|
|
@@ -38,7 +41,7 @@
|
|
|
</i>
|
|
|
<i v-if="isFullscreen" class="iconfont icon-material_preview_drop_out hover-tips" @click="onClickCancelFullScreen()">
|
|
|
<div>
|
|
|
- <div class="remark">取消全屏</div>
|
|
|
+ <div class="remark">退出全屏</div>
|
|
|
</div>
|
|
|
</i>
|
|
|
</div>
|
|
|
@@ -190,6 +193,24 @@ export default {
|
|
|
z-index: 2;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
+ .close-btn--full-screen {
|
|
|
+ position: absolute;
|
|
|
+ top: -40px;
|
|
|
+ right: -40px;
|
|
|
+ width: 80px;
|
|
|
+ height: 80px;
|
|
|
+ border-radius: 50%;
|
|
|
+ z-index: 2;
|
|
|
+ cursor: pointer;
|
|
|
+ background: rgba(0, 0, 0, 0.3);
|
|
|
+ .close-btn--full-screen__icon {
|
|
|
+ position: absolute;
|
|
|
+ left: 19px;
|
|
|
+ bottom: 19px;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
.toolbar {
|
|
|
position: absolute;
|
|
|
bottom: 110px;
|