Sfoglia il codice sorgente

fix: 全景图预览界面对齐UI稿

任一存 3 anni fa
parent
commit
4ee828162a
1 ha cambiato i file con 24 aggiunte e 3 eliminazioni
  1. 24 3
      src/views/material/popup/panoImagePreviewer.vue

+ 24 - 3
src/views/material/popup/panoImagePreviewer.vue

@@ -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;