编辑器-热点 进行中

packages/qjkankan-editor/src/components/shared/Combox.vue

@@ -90,11 +90,10 @@ export default {
   position: relative;
   border: 1px solid rgba(151, 151, 151, 0.2);
   padding: 0 16px;
-  background: #1A1B1D;;
+  background: #1A1B1D;
   border-radius: 2px;
   height: 36px;
   cursor: pointer;
-  z-index: 100;
   &.show {
     ul {
       display: block;
@@ -128,6 +127,7 @@ export default {
     border: 1px solid #404040;
     overflow-x: hidden;
     overflow-y: auto;
+    z-index: 100;
     li {
       height: 36px;
       padding: 0 16px;

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

@@ -38,7 +38,7 @@
             class="icon-setting-component"
             :is="iconSettingComponent"
             ref="icon-setting-component"
-            @addHotspot="addhotspot"
+            @addHotspot="addHotspot"
           />
           <div class="bars">
             <RangeItem :value="rang" @input="onRangeChange" />
@@ -290,7 +290,7 @@ export default {
 
     setTimeout(() => {
       if (this.editTitle != '编辑' && this.editTitle != this.$i18n.t('hotspot.edit')) {
-        this.addhotspot(this.$refs['icon-setting-component'].hotspotIconList[0])
+        this.addHotspot(this.$refs['icon-setting-component'].hotspotIconList[0])
         this.rang.value = window.g_hotspotCurrentScale
         this.onRangeChange({ value: window.g_hotspotCurrentScale })
       }
@@ -403,14 +403,16 @@ export default {
       this.$emit("close");
       this.$emit("save", this.hotspot);
     },
-    addhotspot(data) {
+    addHotspot(data) {
       if (this.isAdd && (this.editTitle != '编辑' && this.editTitle != this.$i18n.t('hotspot.edit'))) {
         this.isAdd = false
+        this.hotspot.hotspotIconType = data.type
         this.hotspot.img = data.img
         this.$bus.emit('addhotspot', this.hotspot)
         this.$getKrpano().set('layer[tooltip_' + this.hotspot.name + '].css', `text-align:center; color:#FFFFFF;
           font-family:STXihei;font-size:${this.hotspot.fontSize}px;`)
       } else {
+        this.hotspot.hotspotIconType = data.type
         this.hotspot.img = data.img
         this.$getKrpano().set(`hotspot[${this.hotspot.name}].url`, data.img)
         this.$getKrpano().set(`hotspot[${this.hotspot.name}].hotspottitle`, this.hotspot.hotspotTitle)

packages/qjkankan-editor/src/views/hotspot/hotspotIconType/system.vue

@@ -1,14 +1,16 @@
 <template>
-<div class="icon-list">
-    <div class="margin-handler-layer">
-      <ul>
-        <li
-          v-for="(item, i) in hotspotIconList"
-          @click="$emit('addHotspot', item)" :key="i"
-        >
-          <img :src="item.thumb" alt="">
-        </li>
-      </ul>
+  <div class="icon-list">
+    <div class="icon-list-inner">
+      <div class="margin-handler-layer">
+        <ul>
+          <li
+            v-for="(item, i) in hotspotIconList"
+            @click="$emit('addHotspot', item)" :key="i"
+          >
+            <img :src="item.thumb" alt="">
+          </li>
+        </ul>
+      </div>
     </div>
   </div>
 </template>
@@ -18,8 +20,9 @@ export default {
   data() {
     let cdn = this.$config.getStaticResource('/panoassets/images/hotspot/icon/')
     let hotspotIconList = []
-    for (let i = 0; i < 12; i++) {
+    for (let i = 0; i < 17; i++) {
       hotspotIconList[i] = {
+        type: 'system',
         id: 'icon' + (i + 1),
         img: cdn + `img_doticon_${String(i + 1).padStart(2, '0')}.svg`,
         thumb: cdn + `img_doticon_${String(i + 1).padStart(2, '0')}.svg`
@@ -40,48 +43,46 @@ export default {
   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: -17px;
-      margin-bottom: -17px;
-      li {
-        cursor: pointer;
-        margin-right: 17px;
-        margin-bottom: 17px;
-        width: 38px;
-        height: 38px;
-        border: solid 2px transparent;
-        border-radius: 4px;
+  padding: 4px 2px 4px 4px;
+  > .icon-list-inner {
+    overflow: auto;
+    width: 100%;
+    height: 100%;
+    >.margin-handler-layer {
+      overflow: hidden;
+      ul {
         display: flex;
         align-items: center;
-        justify-content: center;
-        position: relative;
-        z-index: 0;
-        &::after {
-          position: absolute;
-          content: '';
-          height: 100%;
-          width: 100%;
-          left: 0;
-          right: 0;
-          top: 0;
-          bottom: 0;
-          background-image: url(~@/assets/images/icons/gif@2x.png);
-          background-size: 100% auto;
-          z-index: 999;
-          pointer-events: none;
-        }
-        &:hover {
-          border-color: #0076f6;
+        flex-wrap: wrap;
+        margin-right: -17px;
+        margin-bottom: -17px;
+        li {
+          cursor: pointer;
+          margin-right: 17px;
+          margin-bottom: 17px;
+          width: 38px;
+          height: 38px;
+          border: solid 2px transparent;
+          border-radius: 4px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          &:hover {
+            border-color: #0076f6;
+          }
         }
       }
     }
   }
 }
+
+::-webkit-scrollbar { width: 3px; height: 0; } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
+::-webkit-scrollbar-thumb {
+  background: rgba(255,255,255,0.3);
+  border-radius: 1.5px;
+}
+::-webkit-scrollbar-button { background-color: transparent; height: 0; }
+::-webkit-scrollbar-track { background: transparent; border-radius: 1.5px; }
+::-webkit-scrollbar-corner { background: transparent; border-radius: 1.5px; }
+::-webkit-scrollbar-resizer { background: transparent;}
 </style>