update

packages/qjkankan-editor/src/views/material/popup/panoImagePreviewer.vue

@@ -2,48 +2,102 @@
   <popup v-if="ifShow">
     <div class="preview-wrapper" @keydown="onKeypress" ref="preview-wrapper">
       <div v-if="!isFullscreen" class="title">
-        <i class="iconfont icon-material_panoramic_picture title-icon"/>
-        {{imageTitleList[currentIndex]}}
+        <i class="iconfont icon-material_panoramic_picture title-icon" />
+        {{ imageTitleList[currentIndex] }}
       </div>
-      <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"/>
+      <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"
         allowfullscreen="true"
-        :src="'./vr.html?hideScale=true&vr='+ sceneCodeList[currentIndex] +'&lang='+$lang"
+        :src="
+          './vr.html?hideScale=true&vr=' +
+          sceneCodeList[currentIndex] +
+          '&lang=' +
+          $lang
+        "
         frameborder="0"
-        :style="{width: imageWidth, height: imageHeight}"
+        :style="{ width: imageWidth, height: imageHeight }"
       />
       <div class="toolbar">
-        <i
-          class="iconfont icon-material_preview_previous hover-tips" :class="{disabled: currentIndex === 0 || !sceneCodeList[currentIndex - 1]}" @click="onClickPrevious()">
-          <div>
-            <div class="remark">{{$i18n.t(`material.components.prev`)}}</div>
-          </div>
-        </i>
-        <i class="iconfont icon-material_preview_next1 hover-tips append-splitter" :class="{disabled: currentIndex === sceneCodeList.length - 1 || !sceneCodeList[currentIndex + 1]}" @click="onClickNext()">
-          <div>
-            <div class="remark">{{$i18n.t(`material.components.next`)}}</div>
-          </div>
-        </i>
-        <i class="iconfont icon-material_preview_next hover-tips-warn" @click="onClickDelete()">
-          <div>
-            <div class="remark">{{$i18n.t(`material.components.delete`)}}</div>
-          </div>
-        </i>
-        <i v-if="!isFullscreen" class="iconfont icon-material_preview_full_screen hover-tips" @click="onClickFullScreen()">
-          <div>
-            <div class="remark">{{$i18n.t(`material.components.fullscreen`)}}</div>
-          </div>
-        </i>
-        <i v-if="isFullscreen" class="iconfont icon-material_preview_drop_out hover-tips" @click="onClickCancelFullScreen()">
-          <div>
-            <div class="remark">{{$i18n.t(`material.components.cancel_fullscreen`)}}</div>
-          </div>
-        </i>
+        <div class="left">
+          <i
+            class="iconfont icon-material_preview_previous hover-tips"
+            :class="{
+              disabled: currentIndex === 0 || !sceneCodeList[currentIndex - 1],
+            }"
+            @click="onClickPrevious()"
+          >
+            <div>
+              <div class="remark">
+                {{ $i18n.t(`material.components.prev`) }}
+              </div>
+            </div>
+          </i>
+          <i
+            class="iconfont icon-material_preview_next1 hover-tips append-splitter"
+            :class="{
+              disabled:
+                currentIndex === sceneCodeList.length - 1 ||
+                !sceneCodeList[currentIndex + 1],
+            }"
+            @click="onClickNext()"
+          >
+            <div>
+              <div class="remark">
+                {{ $i18n.t(`material.components.next`) }}
+              </div>
+            </div>
+          </i>
+        </div>
+        <div class="right">
+          <i
+            class="iconfont icon-material_preview_next hover-tips-warn"
+            @click="onClickDelete()"
+          >
+            <div>
+              <div class="remark">
+                {{ $i18n.t(`material.components.delete`) }}
+              </div>
+            </div>
+          </i>
+          <i
+            v-if="!isFullscreen"
+            class="iconfont icon-material_preview_full_screen hover-tips"
+            @click="onClickFullScreen()"
+          >
+            <div>
+              <div class="remark">
+                {{ $i18n.t(`material.components.fullscreen`) }}
+              </div>
+            </div>
+          </i>
+          <i
+            v-if="isFullscreen"
+            class="iconfont icon-material_preview_drop_out hover-tips"
+            @click="onClickCancelFullScreen()"
+          >
+            <div>
+              <div class="remark">
+                {{ $i18n.t(`material.components.cancel_fullscreen`) }}
+              </div>
+            </div>
+          </i>
+        </div>
       </div>
     </div>
   </popup>
@@ -60,8 +114,8 @@ export default {
         return [
           // 'aaa',
           // 'bbb'
-        ]
-      }
+        ];
+      },
     },
     sceneCodeList: {
       type: Array,
@@ -69,67 +123,67 @@ export default {
         return [
           // 'fd720_jWlTO6FIr',
           // 'fd720_egHPArS4K',
-        ]
-      }
+        ];
+      },
     },
     canFullScreen: {
       type: Boolean,
-      default: true
+      default: true,
     },
   },
-  components:{
-    Popup
+  components: {
+    Popup,
   },
-  data(){
+  data() {
     return {
       ifShow: false,
       currentIndex: 0,
       isFullscreen: false,
-    }
+    };
   },
   computed: {
     imageWidth() {
-      return this.isFullscreen ? '100%' : '960px'
+      return this.isFullscreen ? "100%" : "960px";
     },
     imageHeight() {
-      return this.isFullscreen ? '100%': '540px'
-    }
+      return this.isFullscreen ? "100%" : "540px";
+    },
   },
   watch: {
     sceneCodeList: {
       handler: function (newList) {
         if (newList.length - 1 < this.currentIndex) {
-          this.currentIndex = newList.length - 1
+          this.currentIndex = newList.length - 1;
         }
-      }
-    }
+      },
+    },
   },
-  methods:{
-    onKeypress(e){
-      console.log(e,'1111');
+  methods: {
+    onKeypress(e) {
+      console.log(e, "1111");
     },
     show(index) {
-      Number.isSafeInteger(index) && (this.currentIndex = index)
-      this.ifShow = true
+      Number.isSafeInteger(index) && (this.currentIndex = index);
+      this.ifShow = true;
     },
     onClickPrevious() {
       if (this.currentIndex > 0) {
-        this.currentIndex--
+        this.currentIndex--;
       }
     },
     onClickNext() {
       if (this.currentIndex < this.sceneCodeList.length - 1) {
-        this.currentIndex++
+        this.currentIndex++;
       }
     },
     onClickDelete() {
       if (this.isFullscreen) {
-        this.onClickCancelFullScreen()
+        this.onClickCancelFullScreen();
       }
-      this.$emit('click-delete', this.currentIndex)
+      this.$emit("click-delete", this.currentIndex);
     },
     onClickFullScreen() {
-      const element = this.$refs['preview-wrapper']
+      const element = this.$refs["preview-wrapper"];
       if (element.requestFullscreen) {
         element.requestFullscreen();
       } else if (element.webkitRequestFullScreen) {
@@ -139,7 +193,7 @@ export default {
       } else if (element.msRequestFullscreen) {
         element.msRequestFullscreen();
       }
-      this.isFullscreen = true
+      this.isFullscreen = true;
     },
     onClickCancelFullScreen() {
       if (document.exitFullscreen) {
@@ -151,19 +205,19 @@ export default {
       } else if (document.msExitFullscreen) {
         document.msExitFullscreen();
       }
-      this.isFullscreen = false
+      this.isFullscreen = false;
     },
     onClickClose() {
-      this.ifShow = false
-      this.isFullscreen = false
-    }
+      this.ifShow = false;
+      this.isFullscreen = false;
+    },
   },
   mounted() {
-    this.$bus.on('clickEsc',()=>{
-      this.onClickClose()
-    })
+    this.$bus.on("clickEsc", () => {
+      this.onClickClose();
+    });
   },
-}
+};
 </script>
 
 <style scoped lang="less">
@@ -180,7 +234,7 @@ export default {
     z-index: 2;
     height: 36px;
     font-size: 14px;
-    color: #FFFFFF;
+    color: #ffffff;
     background: rgba(0, 0, 0, 0.6);
     border-radius: 18px;
     display: flex;
@@ -221,16 +275,19 @@ export default {
   }
   .toolbar {
     position: absolute;
-    bottom:60px;
+    bottom: 60px;
     left: 50%;
     transform: translateX(-50%);
     height: 60px;
     display: flex;
     justify-content: center;
     align-items: center;
-    padding: 0 43px;
+    // padding: 0 43px;
     background: rgba(0, 0, 0, 0.6);
     border-radius: 8px;
+    width: 242px;
+    display: flex;
+    flex-direction: row;
     z-index: 2;
     .iconfont {
       cursor: pointer;
@@ -245,17 +302,32 @@ export default {
         margin-right: 0;
       }
     }
-    .append-splitter {
-      &::after {
+    .left {
+      width: 45%;
+      flex: 1 1 45%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      position: relative;
+      &::before{
         pointer-events: none;
-        content: "|";
+        content: "";
         position: absolute;
-        right: -18px;
-        top: -4px;
-        font-size: 20px;
-        color: rgba(255, 255, 255, 0.5);
+        height: 20px;
+        width: 2px;
+        top: 50%;
+        right:-1px;
+        transform: translateY(-50%);
+        background-color: rgba(255, 255, 255, 0.5);
       }
     }
+    .right {
+      width: 55%;
+      flex: 1 1 55%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
   }
   .iframe {
     position: absolute;
@@ -266,7 +338,8 @@ export default {
   }
 }
 
-.hover-tips, .hover-tips-warn {
+.hover-tips,
+.hover-tips-warn {
   position: relative;
   font-size: 18px;
 
@@ -315,4 +388,4 @@ export default {
     }
   }
 }
-</style>
+</style>