feat: 【我的素材】【全景图片】编辑封面弹窗样式更新

src/views/material/pano/index.vue

@@ -131,7 +131,7 @@
     <cover
       @panocover="handlePanoCover"
       :item="popupItem"
-      :show="showCover"
+      v-if="showCover"
       @close="showCover = false"
     />
   </div>

src/views/material/popup/cover.vue

@@ -1,27 +1,31 @@
 <template>
-    <popup v-if="show">
-      <div class="ui-message ui-message-confirm message-material" style="width: 430px">
+    <popup>
+      <div class="ui-message ui-message-confirm message-material">
         <div class="ui-message-header header-material">
-          <span>全景图封面设置</span>
-          <span @click="$emit('close')">
+          <div>全景图封面设置</div>
+          <div @click="$emit('close')">
             <i class="iconfont icon_close"></i>
-          </span>
+          </div>
         </div>
         <div class="ui-message-main re-name">
           <div>
-            <span class="remark">从全景截图作为封面</span>
             <iframe id="ifrcover" :src="'./vr.html?hideScale=1&vr='+item.sceneCode" frameborder="0"></iframe>
-            <button @click="onClick" class="ui-button ui-button-rect submit" >
-              截图
-            </button>
+            <div>
+              <span class="remark">拖动画面截取封面</span>
+              <div @click="onClick" :class="canPrintScreen ? 'print-screen-btn' : 'print-screen-btn--disabled'" >
+                <i class="iconfont icon-pop-ups_crop"></i>
+                截图
+              </div>
+            </div>
           </div>
           <div>
-            <span class="remark">封面预览</span>
             <img :src="img||$thumb" alt="" />
+            <div>
+              <div class="remark">封面预览</div>
+            </div>
           </div>
         </div>
-        <div class="ma-line"></div>
-        <div class="ui-message-footer footer-material">
+        <div class="ui-message-footer">
           <div class="btn">
             <button @click="$emit('close')" class="ui-button ui-button-rect cancel" >
               取消
@@ -39,13 +43,14 @@
 import Popup from "@/components/shared/popup";
 
 export default {
-  props:['show','item'],
+  props:['item'],
   components:{
     Popup
   },
   data(){
     return {
-      img: this.item.icon||''
+      img: this.item.icon || '',
+      canPrintScreen: false,
     }
   },
   watch:{
@@ -66,35 +71,62 @@ export default {
       if (!this.img) {
         return this.$alert({ content: "请点击“截图”按钮截取封面" });
       }
-      
       this.$emit('panocover',this.img)
     }
+  },
+  mounted() {
+    setTimeout(() => {
+      this.canPrintScreen = true
+    }, 2500);
   }
 }
 </script>
 
 <style lang="less" scoped>
 .ui-message-confirm{
+  width: 472px;
+  height: 421px;
+  overflow: visible;
+  
   .icon_close{
     color: #909090;
   }
 
-  .ui-message-main{
+  .ui-message-main {
     display: flex;
     margin: 40px 0;
     justify-content: space-between;
-    background: #fff;
-    >div{
-      width: calc(50% - 10px);
-      text-align: left;
-      >span{
-        display: inline-block;
+    > div{
+      > iframe,> img {
+        margin-bottom: 10px;
+        width: 200px;
+        height: 200px;
+        border-radius: 4px;
       }
-      >iframe,>img{
-        margin: 10px 0;
-        width: 175px;
-        border: 1px solid #000;
-        height: 175px;
+      > div {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .remark {
+          font-size: 14px;
+          color: #646566;
+        }
+        .print-screen-btn {
+          font-size: 14px;
+          color: #0076F6;
+          cursor: pointer;
+          .iconfont {
+            font-size: 12px;
+          }
+        }
+        .print-screen-btn--disabled {
+          font-size: 14px;
+          pointer-events: none;
+          color: #646566;
+          .iconfont {
+            font-size: 12px;
+          }
+        }
       }
     }
   }