编辑器-热点-添加或编辑热点-设置场景切换效果

(cherry picked from commit 24f0f0730fb0973e083841cef8df2af9eb569b90)

packages/qjkankan-editor/src/views/hotspot/EditPanel.vue

@@ -89,7 +89,6 @@
   </transition>
 </template>
 
-
 <script>
 import RangeItem from "@/components/rangeItem/index.vue";
 import Combox from "@/components/shared/Combox";
@@ -513,6 +512,7 @@ export default {
   .footer {
     flex: 0 0 auto;
     padding: 15px;
+    background: #252526;
     .deepcancel {
       margin-right: 10px;
     }

packages/qjkankan-editor/src/views/hotspot/hotspotType/scene.vue

@@ -1,31 +1,44 @@
 <template>
-  <div>
-    
-    <div class="medias">
-      <div class="btn-push">
-        <span v-if="!selected.icon">选择场景</span>
-        <div class="scene-con" v-else>
-          <i class="iconfont iconedit_type_3d" :class="{'iconedit_type_panorama':selected.type!=='4dkk'}"></i>
-          <img class="icon" :src="selected.icon||$thumb" alt="">
-          <span class="shenglve">{{selected.sceneTitle||'名字'}}</span>
-          <i @click="del" class="iconfont iconedit_case_delete"></i>
-        </div>
+  <div class="scene-effect-setting">
+    <div class="add-btn-wrap" v-if="!selected.icon">
+      <button @click="showScene = true">
+        <img src="@/assets/images/default/hotspot_scene_add.png" alt="">
+        <div>添加场景</div>
+      </button>
+    </div>
+    <div v-else class="scene-info">
+      <div class="image-wrap">
+        <i class="iconfont icon-scene-type" :class="selected.type === '4dkk' ? 'iconedit_type_3d' : 'iconedit_type_panorama'"></i>
+        <img class="thumb" :src=" selected.icon || $thumb" alt="">
+        <button class="delete-btn" @click="del">
+          <img class="normal" src="@/assets/images/icons/close01_normal@2x.png" alt="">
+          <img class="hover" src="@/assets/images/icons/close01_hover@2x.png" alt="">
+        </button>
+      </div>
+      <div class="right-wrap">
+        <button class="ui-button submit" @click="showScene = true">更换场景</button>
+        <div class="scene-title" v-title="selected.sceneTitle">{{selected.sceneTitle}}</div>
       </div>
     </div>
-    <button class="ui-button submit" @click="showScene = true">选择场景</button>
+    
     <div class="dialog" style="z-index: 2000" v-if="showScene">
-      <Select @cancle="showScene = false" :selected='selected' :title="'选择素材'" @submit="handleSelect">
-      </Select>
+      <Selector
+        :selected="selected"
+        @cancle="showScene = false"
+        @submit="handleSelect"
+      />
     </div>
   </div>
 </template>
 
 <script>
-import Select from "@/components/select";
+import Selector from "@/components/materialSelectorFromWorkForEditor.vue";
 
 export default {
   props:['scene'],
-  components:{Select},
+  components:{
+    Selector,
+  },
   data(){
     return {
       showScene:false,
@@ -34,8 +47,8 @@ export default {
   },
   methods:{
     handleSelect(data){
-      this.$emit('sceneSelect',data)
-      this.selected = data
+      this.$emit('sceneSelect',data[0])
+      this.selected = data[0]
       this.showScene =false
     },
     del(){
@@ -47,63 +60,100 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.medias {
-  height: 105px; 
-  width: 210px;
-  position: relative;
-  background: #161A1A;
-  border: 1px solid #555A5A;
-  overflow: hidden;
-  height: 122px;
-  cursor: auto;
-  .btn-push {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%,-50%);
-    text-align: center;
-    font-size: 12px;
-    width: 100%;
-    height: 100%;
-    >span {
-      position: absolute;
+.scene-effect-setting {
+  margin-top: 16px;
+  .add-btn-wrap {
+    height: 120px;
+    background: #1A1B1D;
+    border-radius: 2px;
+    border: 1px solid #404040;
+    position: relative;
+    button {
       top: 50%;
       left: 50%;
-      transform: translate(-50%,-50%);
+      transform: translate(-50%, -50%);
+      position: absolute;
+      background: none;
+      border: none;
+      color: @color;
+      cursor: pointer;
+      img {
+        width: 30px;
+      }
+      div {
+        margin-top: 6px;
+        font-size: 14px;
+      }
     }
-    .scene-con {
-      display: flex;
-      justify-content: space-between;
-      padding: 10px;
-      width: 100%;
-      height: 100%;
+  }
+  .scene-info {
+    display: flex;
+    .image-wrap {
       position: relative;
-      .iconfont{
+      width: 120px;
+      height: 120px;
+      flex: 0 0 auto;
+      .icon-scene-type {
         position: absolute;
-        left: 18px;
-        top: 18px;
-        color: #fff;
+        top: 10px;
+        left: 10px;
+        width: 32px;
+        height: 32px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
         background: rgba(0, 0, 0, 0.5);
         border-radius: 2px;
-        padding: 8px;
       }
-      .icon{
-        width: 102px;
-        height: 102px;
+      .delete-btn {
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 20px;
+        height: 20px;
+        background: none;
+        border: none;
+        padding: 0;
+        cursor: pointer;
+        &:hover {
+          .normal {
+            display: none;
+          }
+          .hover {
+            display: initial;
+          }
+        }
+        .normal {
+          display: initial;
+          width: 100%;
+          height: 100%;
+        }
+        .hover {
+          display: none;
+          width: 100%;
+          height: 100%;
+        }
       }
-      >span{
-        flex: 1;
-        text-align: left;
-        padding-left: 10px;
-        white-space: break-spaces;
+      .thumb {
+        width: 100%;
+        height: 100%;
+        background: #B0B0B0;
+        border-radius: 2px;
       }
-      .iconedit_case_delete{
-        left: auto;
-        top: auto;
-        right: 10px;
-        bottom: 10px;
-        border-radius: 50%;
-        cursor: pointer;
+    }
+    .right-wrap {
+      flex: 1 0 1px;
+      margin-left: 16px;
+      button {
+        width: 100%;
+        padding: 0;
+      }
+      .scene-title {
+        margin-top: 10px;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        overflow: hidden;
       }
     }
   }
@@ -118,10 +168,4 @@ export default {
   height: 100%;
   background-color: rgba(0, 0, 0, 0.5);
 }
-
-.ui-button{
-  width: 100%;
-  margin-top: 10px;
-}
-
 </style>