编辑器-热点-新增热点：设置text热点效果功能 样式更新

(cherry picked from commit 94b631d387ef87f380d8f63e479098e1a788b7ad)

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

@@ -1,145 +1,134 @@
 <template>
-    <div class="com-combox ui-input" :class="{show:showPopup}" @click="show" v-clickoutside="hide">
-        <div class="input">
-            <p v-if="current">{{current.name}}</p>
-        </div>
-        <ul class="ui-input">
-            <li
-                v-for="(item,key) in data"
-                :key="key"
-                @click="onClick(item)"
-                :class="{active:selectedId == item.id}"
-            >
-                <slot :item="item">
-                    <template>
-                        <span>{{item.name}}</span>
-                    </template>
-                </slot>
-            </li>
-        </ul>
-        <a class="iconfont icon_pulldown"></a>
+  <div class="com-combox" :class="{show:showPopup}" @click="show" v-clickoutside="hide">
+    <div class="input">
+      <p v-if="current">{{current.name}}</p>
     </div>
+    <a class="iconfont icon-material_preview_upload_collect"></a>
+    <ul>
+      <li
+        v-for="(item,key) in data"
+        :key="key"
+        @click="onClick(item)"
+        :class="{active:selectedId == item.id}"
+      >
+        <slot :item="item">
+          <template>
+            <span>{{item.name}}</span>
+          </template>
+        </slot>
+      </li>
+    </ul>
+  </div>
 </template>
 <script>
 export default {
-    props: {
-        data: Array,
-        type: {
-            type: String,
-            default: "object"
-        },
-        selectedId: {
-            type: String,
-            default:''
-        }
+  props: {
+    data: Array,
+    type: {
+      type: String,
+      default: "object"
     },
-    data() {
-        return {
-            showPopup: false,
-        };
+    selectedId: {
+      type: String,
+      default:''
+    }
+  },
+  data() {
+    return {
+      showPopup: false,
+    };
+  },
+  computed: {
+    current() {
+      let tmp = this.data.find(item=>{
+         return this.selectedId == item.id
+      })
+      return tmp
+    }
+  },
+  methods: {
+    show() {
+      if (this.showPopup === true) {
+        this.showPopup = false;
+        return;
+      }
+      this.showPopup = true;
     },
-    computed: {
-        current() {
-            let tmp = this.data.find(item=>{
-               return this.selectedId == item.id
-            })
-            return tmp
-        }
+    hide() {
+      this.showPopup = false;
     },
-    methods: {
-        show() {
-            if (this.showPopup === true) {
-                this.showPopup = false;
-                return;
-            }
-            this.showPopup = true;
-        },
-        hide() {
-            this.showPopup = false;
-        },
-        onClick(item) {
-            if (this.selectedId == item.id) {
-                return this.$emit("click", item);
-            }
-            this.$emit("change", item);
-        }
+    onClick(item) {
+      if (this.selectedId == item.id) {
+        return this.$emit("click", item);
+      }
+      this.$emit("change", item);
     }
+  }
 };
 </script>
 <style lang="less" scoped>
 .com-combox {
-    cursor: pointer;
-    position: relative;
-    padding: 5px;
-    &.show {
-        ul {
-            display: block;
-        }
-
-        a {
-            transform: translateY(-50%) rotate(180deg);
-        }
-    }
-    > div {
-        height: 100%;
-        display: flex;
-        align-items: center;
-    }
-    .input p {
-        width: 100%;
-        padding-right: 50px;
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        text-align: left;
-    }
+  position: relative;
+  border: 1px solid rgba(151, 151, 151, 0.2);
+  padding: 0 16px;
+  background: #1A1B1D;;
+  border-radius: 2px;
+  height: 36px;
+  cursor: pointer;
+  z-index: 100;
+  &.show {
     ul {
-        display: none;
-        padding: 0;
-        position: absolute;
-        left: -1px;
-        right: -1px;
-        top: 100%;
-        width: auto;
-        height: auto;
-        border-top-left-radius: 0;
-        border-top-right-radius: 0;
-        overflow-x: hidden;
-        overflow-y: auto;
-        max-height: 130px;
-        background: #000;
-        box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3);
-        z-index: 10000;
-
-        li {
-            padding: 5px;
-            display: flex;
-            height: 30px;
-            align-items: center;
-            &.active,
-            &:hover {
-                background: #272729;
-                color: @color;
-            }
-        }
-    }
-    i {
-        font-size: 22px;
-        margin-top: 2px;
-        margin-right: 5px;
-        &.icon_logo {
-            font-size: 17px;
-            margin-top: 0;
-            margin-left: 3px;
-            margin-right: 7px;
-        }
+      display: block;
     }
     a {
-        position: absolute;
-        right: 5px;
-        top: 50%;
-        font-size: 16px;
-        transform: translateY(-50%);
+      transform: translateY(-50%) rotate(180deg);
+    }
+  }
+  > .input {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    .p {
+      width: 100%;
+      padding-right: 50px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      text-align: left;
+    }
+  }
+  
+  ul {
+    display: none;
+    padding: 0;
+    position: absolute;
+    left: -1px;
+    right: -1px;
+    top: 100%;
+    background: #1A1B1D;
+    border-radius: 0px 0px 2px 2px;
+    border: 1px solid #404040;
+    overflow-x: hidden;
+    overflow-y: auto;
+    max-height: 130px;
+    li {
+      height: 36px;
+      padding: 0 16px;
+      display: flex;
+      align-items: center;
+      &.active,
+      &:hover {
+        background: #252526;
+        color: @color;
+      }
     }
+  }
+  a {
+    position: absolute;
+    right: 16px;
+    top: 50%;
+    font-size: 12px;
+    transform: translateY(-50%);
+  }
 }
 </style>

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

@@ -11,73 +11,75 @@
         <i class="iconfont icon_close" @click="confirmCancel"></i>
       </div>
       <div class="content">
-            <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
-                      :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" />
-              </div>
+        <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
+                  :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 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 class="title-input-wrapper">
-                <input
-                  v-model.trim="hotspot.hotspotTitle"
-                  type="text"
-                  maxlength="15"
-                  placeholder="请输入标题，限15字"
-                />
-                <span class="count">{{hotspot.hotspotTitle.length}}/15</span>
-              </div>
-            </div>
-            <div class="effect-setting">
-              <div class="effect-setting-title">效果设置</div>
-              <combox
-                class="combox"
-                :data="hotSpotTypeList"
-                :selected-id="hotspot.hotspotType"
-                @change="onhotSpotTypeChange"
-              ></combox>
-              <component 
-              @sceneSelect="handleSceneSelect" 
-              :scene="hotspot.secne"
+          </div>
+          <div class="bars">
+            <RangeItem :value="rang" @input="onRangeChange" />
+          </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 class="title-input-wrapper">
+            <input
+              v-model.trim="hotspot.hotspotTitle"
+              type="text"
+              maxlength="15"
+              placeholder="请输入标题，限15字"
+            />
+            <span class="count">{{hotspot.hotspotTitle.length}}/15</span>
+          </div>
+        </div>
+        <div class="effect-setting">
+          <div class="effect-setting-title">效果设置</div>
+          <combox
+            class="combox"
+            :data="hotSpotTypeList"
+            :selected-id="hotspot.hotspotType"
+            @change="onhotSpotTypeChange"
+          ></combox>
+          <component
+            class="effect-setting-component"
+          
+            @sceneSelect="handleSceneSelect" 
+            :scene="hotspot.secne"
 
-              @imageChange="data=>{hotspot.image=data}" 
-              :image="hotspot.image"
+            @imageChange="data=>{hotspot.image=data}" 
+            :image="hotspot.image"
 
-              @linkChange="data=>{hotspot.hyperlink=data}" 
-              :link="hotspot.hyperlink"
+            @linkChange="data=>{hotspot.hyperlink=data}" 
+            :link="hotspot.hyperlink"
 
-              @textChange="data=>{hotspot.textarea=data}" 
-              :textarea="hotspot.textarea"
+            @textChange="data=>{hotspot.textarea=data}" 
+            :textarea="hotspot.textarea"
 
-              @audioChange="data=>{hotspot.audio=data}" 
-              :audio="hotspot.audio"
+            @audioChange="data=>{hotspot.audio=data}" 
+            :audio="hotspot.audio"
 
-               @videoChange="data=>{hotspot.video=data}" 
-              :video="hotspot.video"
-              
-              :is="component"
-              ></component>
-            </div>
+            @videoChange="data=>{hotspot.video=data}" 
+            :video="hotspot.video"
+            
+            :is="effectSettingComponent"
+          />
+        </div>
       </div>
       <div class="ui-between footer" app-border dir-top>
         <button class="ui-button submit"  :class="{disable: false}" @click="save">完成</button>
@@ -172,20 +174,6 @@ export default {
           name:'视频'
         }
       ],
-      fontSizeList:[
-          {
-              name: "12",
-              icon: "iconphotoview",
-          },
-          {
-              name: "14",
-              icon: "iconvideo_view",
-          },
-          {
-              name: "16",
-              icon: "iconsoundview",
-          }
-      ],
       hotStyle,
       rang: {
         label: '图标大小',
@@ -257,7 +245,7 @@ export default {
       hotspot:'hotspot',
       backupHotSpot:'backupHotSpot'
     }),
-    component(){
+    effectSettingComponent(){
       let tmp = this.hotspot.hotspotType
       return () => import(`./hotspotType/${tmp}.vue`);
     },
@@ -399,6 +387,7 @@ export default {
     display: flex;
     font-size: 18px;
     color: #fff;
+    flex: 0 0 auto;
     .icon_close {
       color: rgba(255, 255, 255, 0.6);
       cursor: pointer;
@@ -407,8 +396,8 @@ export default {
   .content {
     padding: 20px 20px 14px 20px;
     background: #252526;
-    flex: 1;
-    overflow: hidden;
+    flex: 1 0 1px;
+    overflow: auto;
     .icon-setting {
       .icon-setting-title {
         font-size: 18px;
@@ -417,6 +406,7 @@ export default {
       .remark {
         margin-top: 16px;
         font-size: 14px;
+        color: #ababab;
       }
       .icon-list {
         margin-top: 16px;
@@ -432,12 +422,12 @@ export default {
             display: flex;
             align-items: center;
             flex-wrap: wrap;
-            margin-right: -20px;
-            margin-bottom: -20px;
+            margin-right: -17px;
+            margin-bottom: -17px;
             li {
               cursor: pointer;
-              margin-right: 20px;
-              margin-bottom: 20px;
+              margin-right: 17px;
+              margin-bottom: 17px;
               width: 38px;
               height: 38px;
               border: solid 2px transparent;
@@ -476,7 +466,7 @@ export default {
         position: relative;
         border: 1px solid rgba(151, 151, 151, 0.2);
         padding: 0 16px;
-        background: #252526;
+        background: #1A1B1D;
         border-radius: 2px;
         height: 36px;
         width: 100%;
@@ -514,16 +504,13 @@ export default {
       .combox {
         margin-top: 16px;
       }
-    }
-    .remark {
-      color: #ababab;
-      line-height: 1.5;
-      letter-spacing: 0.1px;
-      white-space: pre-wrap;
-      font-size: 12px;
+      .effect-setting-component {
+        margin-top: 16px;
+      }
     }
   }
   .footer {
+    flex: 0 0 auto;
     padding: 15px;
     .ui-button {
       width: 100%;

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

@@ -1,33 +1,61 @@
 <template>
   <div>
-    <textarea
-      style="height:172px;"
-      maxlength="200"
-      placeholder="请输入文字内容，限200字"
-      type="text"
-      class="ui-input ui-textarea"
-      v-model="text"
-    />
+    <div class="textarea-wrapper">
+      <textarea
+        v-model.trim="text"
+        maxlength="200"
+        placeholder="请输入文字内容，限200字"
+        type="text"
+      />
+      <span class="count">{{text.length}}/200</span>
+    </div>
   </div>
 </template>
 <script>
 export default {
-  props:['textarea'],
-  data(){
+  props: ['textarea'],
+  data() {
     return {
-      text:this.textarea
+      text: this.textarea
     }
   },
-  watch:{
-    text(newVal){
-      this.$emit('textChange',newVal)
+  watch: {
+    text(newVal) {
+      this.$emit('textChange', newVal)
     }
   }
 }
 </script>
 
-<style lang="less" src="./style.less"></style>
-
 <style lang="less" scoped>
-
+.textarea-wrapper {
+  position: relative;
+  border: 1px solid rgba(151, 151, 151, 0.2);
+  background: #1A1B1D;
+  border-radius: 2px;
+  height: 119px;
+  width: 100%;
+  &:focus-within {
+    border-color: #0076F6;
+  }
+  > textarea {
+    padding: 9px 16px 30px 16px;
+    resize: none;
+    border: none;
+    background: transparent;
+    outline: none;
+    width: 100%;
+    height: calc(100% - 30px);
+    color: #fff;
+    letter-spacing: 1px;
+    font-size: 14px;
+  }
+  > .count {
+    position: absolute;
+    right: 16px;
+    bottom: 9px;
+    font-size: 14px;
+    color: rgba(255, 255, 255, 0.2);
+  }
+}
 </style>