编辑器-热点-新增热点：样式更新进行到了效果设置那一块

(cherry picked from commit 56469fdabafdefcf179cbb3341761bcbf3edea80)

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

@@ -6,81 +6,52 @@
     leave-active-class="animated slideOutRight speed"
   >
     <div class="hots-panel" v-show="show">
-      <div class="ui-between header" app-border dir-bottom>
+      <div class="ui-between header">
         <span>{{editTitle}}热点</span>
         <i class="iconfont icon_close" @click="confirmCancel"></i>
       </div>
       <div class="content">
-        <div>
-          <ul>
-            <li app-border dir-bottom>
-              <div class="ui-remark">请点击热点图标，将鼠标移至全景图进行标记。</div>
-              <div class="medias-list">
+            <div class="icon-setting">
+              <div class="icon-setting-title">热点图标</div>
+              <div class="remark">选择图标</div>
+              <div class="icon-list">
+                <div class="margin-handler-layer">
                   <ul>
-                      <li
-                          v-for="item in mediaList"
-                          :key="item.name"
-                          :class="{active:mediaType==item.name}"
-                      >
-                          <span></span>
-                          <div>{{item.name}}</div>
-                      </li>
+                    <li
+                      :class="{ active: item.id == hotspot.icontype }"
+                      v-for="(item,i) in hotStyle"
+                      @click="addhotspot(item)"
+                      :key="i"
+                    >
+                      <img :src="item.thumb" alt="">
+                    </li>
                   </ul>
-              </div>
-              <div style="margin-bottom: 0">
-                <ul class="styles">
-                  <li
-                    :class="{ active: item.id == hotspot.icontype }"
-                    v-for="(item,i) in hotStyle"
-                    @click="addhotspot(item)"
-                    :key="i"
-                  >
-                    <img :src="item.thumb" alt="">
-                  </li>
-                </ul>
+                </div>
               </div>
               <div class="bars">
-                  <RangeItem :value="rang" @input="onRangeChange" />
+                <RangeItem :value="rang" @input="onRangeChange" />
               </div>
-            </li>
-            <li app-border dir-bottom>
-              <div class="ui-between title">标题
-                  <div
-                    class="checkbox"
-                    @click="hotspot.visible=!hotspot.visible"
-                    :class="{checked:hotspot.visible}"
-                >
-                    <i class="iconfont icon_checkbox"></i>
-                    &nbsp;显示标题
-                </div>
+            </div>
+            <div class="title-setting">
+              <div class="title-setting-title">标题设置</div>
+              <div class="switch-wrapper">
+                <span class="label">是否显示标题</span>
+                <Switcher :value="hotspot.visible" @change="hotspot.visible = !hotspot.visible"></Switcher>
               </div>
-              <div>
+              <div class="title-input-wrapper">
                 <input
+                  v-model.trim="hotspot.hotspotTitle"
                   type="text"
-                  class="ui-input"
-                  placeholder="请填写标题限50字"
-                  :maxlength="50"
-                  v-model="hotspot.hotspotTitle"
+                  maxlength="15"
+                  placeholder="请输入标题，限15字"
                 />
+                <span class="count">{{hotspot.hotspotTitle.length}}/15</span>
               </div>
-              <div class="ui-between title">字号</div>
-              <div class="medias-list">
-                  <ul>
-                      <li
-                          v-for="item in fontSizeList"
-                          :key="item.name"
-                          @click="hotspot.fontSize = item.name"
-                          :class="{active:hotspot.fontSize==item.name}"
-                      >
-                          <span></span>
-                          <div>{{item.name}}</div>
-                      </li>
-                  </ul>
-              </div>
-            </li>
-            <li>
-              <div class="ui-between title">效果</div>
+            </div>
+            <div class="effect-setting">
+              <div class="effect-setting-title">效果设置</div>
               <combox
+                class="combox"
                 :data="hotSpotTypeList"
                 :selected-id="hotspot.hotspotType"
                 @change="onhotSpotTypeChange"
@@ -106,9 +77,7 @@
               
               :is="component"
               ></component>
-            </li>
-          </ul>
-        </div>
+            </div>
       </div>
       <div class="ui-between footer" app-border dir-top>
         <button class="ui-button submit"  :class="{disable: false}" @click="save">完成</button>
@@ -119,9 +88,10 @@
 
 
 <script>
-import RangeItem from "@/components/rangeItem";
+import RangeItem from "@/components/rangeItem/index.vue";
 import Combox from "@/components/shared/Combox";
 import { mapGetters } from "vuex";
+import Switcher from "@/components/shared/Switcher.vue";
 
 let HTMap = {
   scene:{
@@ -160,11 +130,9 @@ export default {
   props: ['show','data','editTitle'],
   components:{
     RangeItem,
-    Combox
+    Combox,
+    Switcher,
   },
-
-  
-
   data(){
     let cdn = this.$config.getStaticResource('/panoassets/images/hotspot/icon/')
     let hotStyle = []
@@ -176,8 +144,6 @@ export default {
         thumb:cdn+`img_doticon_${String(i+1).padStart(2, '0')}.svg`
       }
     }
-
-   
     return {
       canSave:false,
       hotSpotTypeList:[
@@ -206,12 +172,6 @@ export default {
           name:'视频'
         }
       ],
-      mediaList: [
-          {
-              name: "默认",
-              icon: "iconphotoview",
-          }
-      ],
       fontSizeList:[
           {
               name: "12",
@@ -226,7 +186,6 @@ export default {
               icon: "iconsoundview",
           }
       ],
-      mediaType:'默认',
       hotStyle,
       rang: {
         label: '图标大小',
@@ -234,7 +193,7 @@ export default {
         gradient: 0.5,
         value: 1,
         min: 0.5,
-        max: 2
+        max: 2,
       },
       selectItem:'',
       styIcon:'',
@@ -329,6 +288,25 @@ export default {
     onRangeChange(data) {
       this.rang = { ...this.rang, value: data.value }
       this.hotspot.size = data.value
+      switch (data.value) {
+        case 0.5:
+          console.log(0.5);
+          this.hotspot.fontSize = 12
+          break;
+        case 1:
+          console.log(1);
+          this.hotspot.fontSize = 14
+          break;
+        case 1.5:
+          this.hotspot.fontSize = 17
+          break;
+        case 2:
+          this.hotspot.fontSize = 20
+          break;
+        default:
+          console.error('unexpected range value: ', data.value);
+          break;
+      }
     },
     listerFn(data){
       this.selectItem = {
@@ -409,349 +387,133 @@ export default {
 };
 </script>
 <style lang="less" scoped>
-.icon_checkbox {
-    font-size: 14px;
-    &::before {
-        content: "\e667";
-    }
-}
-
-
-.checkbox {
-    cursor: pointer;
-    &.checked {
-        color: @color;
-        .icon_checkbox::before {
-            content: "\e671";
-        }
-    }
-}
-
 .hots-panel {
-  position: fixed;
-  right: 0;
-  top: 0;
-  height: 100%;
-  width: 236px;
-  background: rgba(38, 39, 41, 1);
-  box-shadow: 0px 0px 20px #090909;
+  background: #1A1B1D;
   z-index: 10;
+  
   display: flex;
   flex-direction: column;
+  
   .header {
-    height: 51px;
-    padding: 0 10px;
+    padding: 20px;
     display: flex;
+    font-size: 18px;
+    color: #fff;
     .icon_close {
+      color: rgba(255, 255, 255, 0.6);
       cursor: pointer;
     }
   }
-  .footer {
-    padding: 15px;
-    .ui-button {
-      width: 100%;
-    }
-  }
   .content {
-    display: flex;
+    padding: 20px 20px 14px 20px;
+    background: #252526;
     flex: 1;
     overflow: hidden;
-    > div {
-      width: 100%;
-      height: 100%;
-      overflow-y: auto;
-    }
-    ul {
-      width: 100%;
-      &.lock {
-        li {
-          pointer-events: none;
-          opacity: 0.5;
-        }
-        li.position {
-          pointer-events: auto;
-          opacity: 1;
-        }
+    .icon-setting {
+      .icon-setting-title {
+        font-size: 18px;
+        color: #FFFFFF;
       }
-    }
-    li {
-      padding: 10px;
-      > div {
-        margin-bottom: 15px;
-        &:last-child {
-          margin-bottom: 0;
-        }
-        &.title {
-          margin-bottom: 10px;
-        }
-        label {
-          color: #ababab;
-          font-size: 12px;
-        }
+      .remark {
+        margin-top: 16px;
+        font-size: 14px;
       }
-      &:last-child {
-        border: none;
-        &::after {
-          display: none;
-        }
-      }
-      .link-button {
-        display: flex;
-        justify-content: space-between;
-        button {
-          width: 45%;
-        }
-      }
-    }
-    .medias-list {
-            position: relative;
-            ul {
-                margin-bottom: 10px;
-                display: flex;
-                justify-content: space-between;
-            }
+      .icon-list {
+        margin-top: 16px;
+        height: 158px;
+        background: #1A1B1D;
+        border-radius: 2px;
+        border: 1px solid #404040;
+        overflow: auto;
+        padding: 4px;
+        > .margin-handler-layer {
+          overflow: hidden;
+          ul {
+            display: flex;
+            align-items: center;
+            flex-wrap: wrap;
+            margin-right: -20px;
+            margin-bottom: -20px;
             li {
-                position: relative;
-                // cursor: pointer;
-                padding: 0;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                span {
-                    width: 14px;
-                    height: 14px;
-                    background-color: #fff;
-                    border: solid 3px #fff;
-                    border-radius: 50%;
-                }
-                i {
-                    font-size: 23px;
-                    margin-left: 4px;
-                    color: rgba(255, 255, 255, 0.5);
-                }
-                em {
-                    display: none;
-                    position: absolute;
-                    top: -8px;
-                    left: 50%;
-                    width: 0;
-                    height: 0;
-                    border-style: solid;
-                    border-width: 8px;
-                    border-color: #000 transparent transparent;
-                }
-
-                div {
-                    padding: 5px;
-                    border-radius: 4px;
-                    font-size: 14px;
-                }
-
-                &.active {
-                    span {
-                        background-color: @color;
-                    }
-                    i {
-                        color: @color;
-                    }
-                }
-                &:hover {
-                    em,
-                    div {
-                        display: block;
-                    }
-                }
-            }
-        }
-    .medias {
-        height: 105px; 
-        width: 210px;
-        position: relative;
-        background: #161A1A;
-        cursor: pointer;
-        border: 1px solid #555A5A;
-        >img{
-          width: 100%;
-          height: 100%;
-        }
-        .btn-push{
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%,-50%);
-            text-align: center;
-            color: @color;
-            >i{
-                font-size: 20px;
-            }
-            >span{
-                display: block;
+              cursor: pointer;
+              margin-right: 20px;
+              margin-bottom: 20px;
+              width: 38px;
+              height: 38px;
+              border: solid 2px transparent;
+              border-radius: 4px;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              &.active {
+                border-color: #0076f6;
+              }
             }
+          }
         }
+      }
+      .bars{
+        margin-top: 16px;
+      }
     }
-    .styles {
-      display: flex;
-      align-items: center;
-      flex-wrap: wrap;
-      min-width: 216px;
-      li {
-        position: relative;
-        cursor: pointer;
-        padding: 0;
-        margin-left: 20px;
-        margin-top: 20px;
+    .title-setting {
+      margin-top: 24px;
+      .title-setting-title {
+        font-size: 18px;
+        color: #FFFFFF;
+      }
+      .switch-wrapper {
         display: flex;
-        width: 38px;
-        height: 38px;
-        border: solid 2px transparent;
         align-items: center;
-        justify-content: center;
-        &:first-child {
-          margin-left: 0;
+        justify-content: space-between;
+        margin-top: 18px;
+        .label {
+          color: rgba(255, 255, 255, 0.6);
+          font-size: 14px;
         }
-        &:nth-of-type(4n+1) {
-          margin-left: 0;
+      }
+      > .title-input-wrapper {
+        position: relative;
+        border: 1px solid rgba(151, 151, 151, 0.2);
+        padding: 0 16px;
+        background: #252526;
+        border-radius: 2px;
+        height: 36px;
+        width: 100%;
+        margin-top: 18px;
+        &:focus-within {
+          border-color: #0076F6;
         }
-
-        &:nth-of-type(-n+4) {
-          margin-top: 0;
+        > input {
+          border: none;
+          background: transparent;
+          outline: none;
+          height: 100%;
+          width: calc(100% - 50px);
+          padding: 0;
+          color: #fff;
+          letter-spacing: 1px;
+          font-size: 14px;
         }
-        
-        > span {
+        > .count {
           position: absolute;
-          left: 0;
-          right: 0;
-          bottom: -20px;
-          text-align: center;
-          font-size: 12px;
-        }
-        >i{
-            font-size: 32px;
-        }
-        >img{
-          width: 34px;
-          height: 34px;
-        }
-        &.active {
-          border-color: @color;
-          > span {
-            color: @color;
-          }
-        }
-        .hot-style {
-          margin: 0;
-          position: relative;
-          width: 28px;
-          height: 28px;
-          &.hot-style-image {
-            background-position: center center;
-            background-repeat: no-repeat;
-            background-size: contain;
-            background-repeat: no-repeat;
-            &:hover {
-              a {
-                display: block;
-              }
-            }
-            a {
-              display: none;
-              position: absolute;
-              right: 0;
-              top: 0;
-              width: 16px;
-              height: 16px;
-              line-height: 16px;
-              text-align: center;
-              background-color: #c77a7a;
-              border-radius: 50%;
-              transform: translate(50%, -50%);
-              &:hover {
-                background-color: #e85353;
-              }
-              i {
-                font-size: 12px;
-              }
-            }
-          }
-          &.hot-style-default {
-            border-radius: 50%;
-            border: solid 1px rgba(255, 255, 255, 0.1);
-            em {
-              position: absolute;
-              left: 50%;
-              top: 50%;
-              margin-left: -5px;
-              margin-top: -5px;
-              width: 10px;
-              height: 10px;
-              border: solid 0.5px #fff;
-              background-color: @color;
-              border-radius: 50%;
-            }
-            ul {
-              margin: 0;
-              cursor: default;
-              position: fixed;
-              right: 236px;
-              width: 254px;
-              padding-top: 14px;
-              z-index: 10000;
-              background: rgba(37, 40, 40, 1);
-              box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
-              border-radius: 5px;
-              white-space: normal;
-              li {
-                width: 26px;
-                height: 26px;
-                margin: 0;
-                margin-left: 14px;
-                display: inline-block;
-                border: solid 1px rgba(255, 255, 255, 0.5);
-                border-radius: 50%;
-                margin-bottom: 14px;
-                &.active {
-                  border: solid 2px #fff;
-                  padding: 2px;
-                }
-                div {
-                  width: 100%;
-                  height: 100%;
-                  border-radius: 50%;
-                }
-              }
-            }
-            > span {
-              position: absolute;
-              right: -6px;
-              top: -6px;
-              width: 16px;
-              height: 16px;
-              border-radius: 50%;
-              background-color: @color;
-              display: flex;
-              align-items: center;
-              justify-content: center;
-              i {
-                font-size: 12px;
-              }
-            }
-          }
-
-          &.hot-style-upload {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            border: solid 1px #555a5a;
-            i {
-              font-size: 20px;
-              color: @color;
-            }
-          }
+          top: 50%;
+          transform: translateY(-50%);
+          right: 16px;
+          font-size: 14px;
+          color: rgba(255, 255, 255, 0.2);
         }
       }
     }
-    .bars{
-      margin-top: 20px;
+    .effect-setting {
+      margin-top: 16px;
+      .effect-setting-title {
+        font-size: 18px;
+        color: #FFFFFF;
+      }
+      .combox {
+        margin-top: 16px;
+      }
     }
     .remark {
       color: #ababab;
@@ -761,5 +523,11 @@ export default {
       font-size: 12px;
     }
   }
+  .footer {
+    padding: 15px;
+    .ui-button {
+      width: 100%;
+    }
+  }
 }
 </style>

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

@@ -45,6 +45,7 @@
       </div>
     </div>
     <eidt-panel
+      class="adding-hotspot-panel"
       v-if="showPanel"
       :editTitle="editTitle"
       @save="save"
@@ -254,6 +255,7 @@ export default {
   display: flex;
   flex-direction: column;
   background: #252526;
+  position: relative;
   > .title {
     font-size: 18px;
     color: #fff;
@@ -387,5 +389,12 @@ export default {
   .ui-button {
     width: 100%;
   }
+  .adding-hotspot-panel {
+    position: absolute;
+    top: 0;
+    height: 100%;
+    right: 0;
+    width: 100%;
+  }
 }
 </style>