Merge remote-tracking branch 'refs/remotes/origin/6.8' into 6.8

src/views/components/skill/crossLibrary.vue

@@ -4,24 +4,30 @@
       <!-- 标签 -->
       <el-collapse-transition>
         <div v-if="groupList.length > 0" class="tagList columnFlex">
-            <div v-for="(item, index) in groupList" :key="index" class="tagItem columnCenter" :draggable="false" :class="groupActive == item.value ? 'tagItemActiveText' : ''" @dragstart="handleDragStart($event, item, index)" @dragover.prevent="handleDragOver($event, item)" @dragenter="handleDragEnter($event, item, 'group')" @dragend="handleDragEnd($event, item, 'group')">
+          <div v-for="(item, index) in groupList" :key="index" class="tagItem columnCenter" :draggable="false"
+            :class="groupActive == item.value ? 'tagItemActiveText' : ''"
+            @dragstart="handleDragStart($event, item, index)" @dragover.prevent="handleDragOver($event, item)"
+            @dragenter="handleDragEnter($event, item, 'group')" @dragend="handleDragEnd($event, item, 'group')">
             <div class="rowFlex columnCenter spaceBetween tagItemGroup" @click="groupFilter(item, index)">
               <div class="rowFlex columnCenter">
-                  <i class="el-icon-rank icon" style="cursor: move"></i>
+                <el-tooltip effect="dark" placement="top" :content="item.name" v-if="item.name.length >= 6">
                   <p class="text hidden">{{ item.name }}</p>
+                </el-tooltip>
+                <p v-else class="text hidden">{{ item.name }}</p>
               </div>
               <i class="el-icon-caret-right rotageIcon" :class="groupActive == item.value ? 'rotage' : ''"></i>
             </div>
             <!-- 二级分组 -->
             <div v-if="item.child.length > 0 && groupActive == item.value" class="childGroup">
-                <div v-for="child in item.child" :key="child._id" class="childGroupText" :class="[groupActiveChild == child._id ? 'tagItemActive' : '']" @click.stop="groupFilterChild(child)">
+              <div v-for="child in item.child" :key="child._id" class="childGroupText"
+                :class="[groupActiveChild == child._id ? 'tagItemActive' : '']" @click.stop="groupFilterChild(child)">
                 <p class="text hidden">{{ child.name }}</p>
               </div>
             </div>
           </div>
         </div>
         <div v-else class="noContent rowFlex allCenter">
-            <noContent/>
+          <noContent />
         </div>
       </el-collapse-transition>
       <!-- 话术 -->
@@ -34,7 +40,8 @@
         <div ref="skillLibrary" v-loading="skillLoading" @scroll="paperScroll" class="scrollList">
           <div v-for="(items, indexs) in groupDataList" :key="indexs" class="answerContent">
             <div class="question"><span class="title">Q:</span>{{ items.question }}</div>
-              <div v-for="(answer, answerIndex) in items.answer" :key="answerIndex" class="answerItem" style="width: 100%">
+            <div v-for="(answer, answerIndex) in items.answer" :key="answerIndex" class="answerItem"
+              style="width: 100%">
               <!-- <span class="question">{{ answerIndex + 1 }}: {{ answer }}</span> -->
               <div v-if="answer.msgtype == 'text'" class="answerText rowFlex spaceBetween">
                 <span class="title rowFlex">A{{ answerIndex + 1 }}:</span>
@@ -45,7 +52,8 @@
               </div>
               <div v-else-if="answer.msgtype == 'image'" class="answerText rowFlex">
                 <span class="title rowFlex">A{{ answerIndex + 1 }}:</span>
-                  <el-image style="max-width: 200px" :src="answer.image.picurl" @click="sendMessageImage(answer, items._id)" :preview-src-list="[answer.image.picurl]" > </el-image>
+                <el-image style="max-width: 200px" :src="answer.image.picurl"
+                  @click="sendMessageImage(answer, items._id)" :preview-src-list="[answer.image.picurl]"> </el-image>
               </div>
             </div>
           </div>
@@ -53,15 +61,15 @@
       </div>
     </div>
   </div>
-  </template>
-  
-  <script>
-  //  procedure_group, procedureList, procedureSort, procedureGroupSort, skillQuote,
-  import { cross_corp_robot_knowledge_group_index, cross_corp_robot_knowledge_group_getList} from '@/api/skill'
-  import { mapState, mapMutations, mapActions } from 'vuex'
-  import { throttle, debounce, copyToClipboard,sendChatMessage } from '@/utils/index'
-  import noContent from '@/components/noContent.vue'
-  export default {
+</template>
+
+<script>
+//  procedure_group, procedureList, procedureSort, procedureGroupSort, skillQuote,
+import { cross_corp_robot_knowledge_group_index, cross_corp_robot_knowledge_group_getList } from '@/api/skill'
+import { mapState, mapMutations, mapActions } from 'vuex'
+import { throttle, debounce, copyToClipboard, sendChatMessage } from '@/utils/index'
+import noContent from '@/components/noContent.vue'
+export default {
   name: 'skillLibrary',
   components: {
     noContent
@@ -110,7 +118,7 @@
     }
   },
   computed: {
-      ...mapState('game', ['accountSelect','chatUserInfo']),
+    ...mapState('game', ['accountSelect', 'chatUserInfo']),
   },
   watch: {
     accountSelect(newVal, oldVal) {
@@ -133,7 +141,7 @@
     this.requestLibraryData()
   },
   methods: {
-      sendMessage: throttle(function(item, id) {
+    sendMessage: throttle(function (item, id) {
       console.log(item, id)
       // this.skillQuote(id, item.length)
     }, 500),
@@ -141,14 +149,14 @@
       this.sortID._id = item._id
       this.dragging = item
     },
-      paperScroll:debounce(function(){
+    paperScroll: debounce(function () {
       const el = this.$refs.skillLibrary
       if (el.offsetHeight + el.scrollTop + 10 >= el.scrollHeight) {
         console.log('下一页')
         this.pageInfo.page++
         this.searchTable()
       }
-      },500),
+    }, 500),
     skillQuote(id, num) {
       const data = {
         type: this.activeName,
@@ -186,7 +194,7 @@
       this.sendChatMessage(item.text.content || '', 'text')
 
     },
-      sendMessageImage(item){
+    sendMessageImage(item) {
       console.log(item, 'item')
       this.sendChatMessage(item.image.picurl || '', 'image')
     },
@@ -256,7 +264,7 @@
         this.groupLastDataList = this.groupDataList
       })
     },
-      handleChange() {},
+    handleChange() { },
     // 重置select
     resizeSelect() {
       this.groupActive = '0'
@@ -268,21 +276,23 @@
         this.isResize = false
       }, 2000)
     },
-      sendChatMessage(content, type){
+    sendChatMessage(content, type) {
       sendChatMessage(content, type)
     },
   }
-  }
-  </script>
-  <style lang="scss" scoped>
-  .skillLibrary {
+}
+</script>
+<style lang="scss" scoped>
+.skillLibrary {
   width: 100%;
   height: 100%;
   overflow-y: auto;
   overflow-x: hidden;
+
   .noContent {
     font-size: 200px;
   }
+
   .contentItemTitle {
     position: absolute;
     left: 10px;
@@ -293,9 +303,11 @@
     text-overflow: ellipsis;
     display: -webkit-box;
     -webkit-box-orient: vertical;
-      -webkit-line-clamp: 2; /* 这里是超出几行省略 */
+    -webkit-line-clamp: 2;
+    /* 这里是超出几行省略 */
     overflow: hidden;
   }
+
   .titleFixed {
     position: absolute;
     right: 0px;
@@ -303,6 +315,7 @@
     margin-left: 15px;
     margin-right: 25px;
     z-index: 10;
+
     .num {
       width: auto;
       font-size: 14px;
@@ -311,6 +324,7 @@
       color: #409EFF;
       margin-right: 10px;
     }
+
     .button {
       width: 50px;
       height: 24px;
@@ -334,6 +348,7 @@
       height: auto;
       margin: 20px 0;
       padding-left: 10px;
+
       .text {
         font-size: 14px;
         font-family: PingFangSC-Regular, PingFang SC;
@@ -343,6 +358,7 @@
         word-wrap: break-word;
         line-height: 18px;
       }
+
       .sendButton {
         width: 50px;
         height: 24px;
@@ -354,12 +370,14 @@
         color: #333333;
         padding: 0;
       }
+
       .image {
         max-width: 25%;
         border-radius: 5px;
       }
     }
   }
+
   .item {
     width: 100%;
     height: auto;
@@ -371,33 +389,40 @@
     position: relative;
     padding-left: 10px;
     cursor: move;
+
     .tableImage {
       width: 40px;
       height: 40px;
       border-radius: 6px;
       margin-right: 10px;
     }
+
     .label {
       color: #999999;
     }
+
     .text {
       color: #333333;
       margin-left: 10px;
       word-break: break-all;
       max-width: 80%;
     }
+
     .icon {
       display: none;
       position: absolute;
       right: 0;
       top: 12px;
     }
+
     .tags {
       width: 300px;
       margin-left: 10px;
+
       .tagsItem {
         width: 300px;
       }
+
       .tag {
         height: 22px;
         line-height: 22px;
@@ -414,31 +439,38 @@
       }
     }
   }
+
   .item:hover .icon {
     display: block;
   }
-  }
-  ::v-deep .el-tabs--border-card .is-active {
+}
+
+::v-deep .el-tabs--border-card .is-active {
   border: none !important;
-  }
-  ::v-deep .is-active {
+}
+
+::v-deep .is-active {
   border: none;
-  }
-  /* 已移除局部 el-collapse 样式，使用全局样式 */
-  .inputContent {
+}
+
+/* 已移除局部 el-collapse 样式，使用全局样式 */
+.inputContent {
   width: 100%;
   margin-bottom: 20px;
   margin-left: 20px;
+
   ::v-deep .el-input {
     width: 90%;
   }
-  }
-  .skillBox {
+}
+
+.skillBox {
   width: 100%;
   height: calc(100% - 20px);
 
-  }
-  .tagList {
+}
+
+.tagList {
   width: 200px;
   height: 100%;
   position: relative;
@@ -455,15 +487,18 @@
     color: #333333;
     margin-bottom: 6px;
     cursor: pointer;
+
     .text {
       max-width: 90px;
       margin-left: 5px;
     }
+
     .tagItemGroup {
       height: 36px;
       padding-right: 10px;
     }
   }
+
   .iconFont {
     font-size: 20px;
     color: #999999;
@@ -471,47 +506,57 @@
     right: 0;
     top: 20px;
     cursor: pointer;
+
     .upIcon {
       transform: rotate(90deg);
     }
   }
+
   .tagItemActive {
     color: #409EFF !important;
     font-family: PingFangSC-Regular, PingFang SC;
     font-weight: 400;
     background: #e4fff1;
   }
+
   .tagItemActiveText {
     color: #409EFF;
   }
-  }
-  .libraryListContent{
+}
+
+.libraryListContent {
   width: 100%;
   height: 100%;
-  }
-  .rotageIcon {
+}
+
+.rotageIcon {
   cursor: pointer;
   transition: all 0.5s;
   transform: rotate(0deg);
   font-size: 12px;
-  }
-  .rotage {
+}
+
+.rotage {
   transform: rotate(90deg);
-  }
-  .childGroup {
+}
+
+.childGroup {
   p {
     margin-left: 15px !important;
   }
+
   .childGroupText {
     height: 36px;
     line-height: 36px;
     color: #333333;
   }
-  }
-  .scrollList {
+}
+
+.scrollList {
   width: 100%;
   height: 100%;
   padding-left: 20px;
+
   .answerContent {
     width: 100%;
     background: #f7f8fa;
@@ -519,15 +564,18 @@
     border: 1px solid #e5e6eb;
     padding: 10px;
     margin-bottom: 20px;
+
     .title {
       width: 30px;
       font-size: 14px;
       font-weight: 500;
       margin-right: 10px;
     }
+
     .answerItem {
       margin-bottom: 10px;
     }
+
     .question {
       font-weight: 500;
       font-size: 14px;
@@ -536,6 +584,7 @@
       text-align: left;
       margin-bottom: 10px;
     }
+
     .answerText {
       width: 100%;
       font-family: PingFangSC, PingFang SC;
@@ -544,15 +593,18 @@
       color: #333333;
       text-align: justify;
       font-style: normal;
+
       .answerTextTitle {
         width: 30px;
         font-size: 16px;
         font-weight: 500;
       }
+
       .textAnswer {
         word-wrap: break-word;
         font-size: 13px;
       }
+
       .copyIcon {
         width: 20px;
         color: #409EFF;
@@ -564,55 +616,70 @@
       }
     }
   }
-  }
-  .scrollList::-webkit-scrollbar {display:none}
-  .container {
+}
+
+.scrollList::-webkit-scrollbar {
+  display: none
+}
+
+.container {
   // margin-top: -20px;
-  }
-  ::v-deep .el-tabs,
-  .el-tabs__content,
-  .el-tab-pane {
+}
+
+::v-deep .el-tabs,
+.el-tabs__content,
+.el-tab-pane {
   width: 100%;
   height: 100%;
-  }
-  ::v-deep .el-tabs__content {
+}
+
+::v-deep .el-tabs__content {
   width: 100%;
   height: calc(100% - 50px);
-  }
-  ::v-deep .el-tab-pane {
+}
+
+::v-deep .el-tab-pane {
   width: 100%;
   height: 100%;
-  }
-  .scrollList {
+}
+
+.scrollList {
   width: 100%;
   height: calc(100% - 40px);
   overflow: auto;
-  }
-  .draggable {
+}
+
+.draggable {
   position: relative;
   transition: all 0.3s;
+
   .icon {
     position: absolute;
     left: 10px;
     top: 15px;
     z-index: 10;
   }
-  }
-  .textAnswer {
+}
+
+.textAnswer {
   word-wrap: break-word;
   display: inline;
-  }
-  .img_drop {
+}
+
+.img_drop {
   width: 200px;
   height: 200px;
   background: rgba(0, 0, 0, 0.36);
   position: absolute;
   left: 0;
   top: 0;
-  }
-  .skillLibrary::-webkit-scrollbar {display:none}
-  ::v-deep .el-icon-circle-close {
-    color: #fff;
-  }
-  </style>
+}
 
+.skillLibrary::-webkit-scrollbar {
+  display: none
+}
+
+::v-deep .el-icon-circle-close {
+  color: #fff;
+}
+</style>
\ No newline at end of file

src/views/components/skill/skillCompany.vue

@@ -9,9 +9,15 @@
       <!-- 标签 -->
       <el-collapse-transition>
         <div v-if="groupList.length > 0" class="tagList columnFlex">
-          <div v-for="(item, index) in groupList" :key="index" class="tagItem rowFlex columnCenter" :draggable="activeName == 'personal' ? true : false" :class="groupActive == item.value ? 'tagItemActive' : ''" @dragstart="handleDragStart($event, item, index)" @dragover.prevent="handleDragOver($event, item)" @dragenter="handleDragEnter($event, item, 'group')" @dragend="handleDragEnd($event, item, 'group')">
-            <i class="el-icon-rank icon" style="cursor: move"></i>
+          <div v-for="(item, index) in groupList" :key="index" class="tagItem rowFlex columnCenter"
+            :draggable="activeName == 'personal' ? true : false"
+            :class="groupActive == item.value ? 'tagItemActive' : ''" @dragstart="handleDragStart($event, item, index)"
+            @dragover.prevent="handleDragOver($event, item)" @dragenter="handleDragEnter($event, item, 'group')"
+            @dragend="handleDragEnd($event, item, 'group')">
+            <el-tooltip effect="dark" placement="top" :content="item.group_name" v-if="item.group_name.length >= 6">
               <p class="text hidden" @click="groupFilter(item, index)">{{ item.group_name }}</p>
+            </el-tooltip>
+            <p v-else class="text hidden" @click="groupFilter(item, index)">{{ item.group_name }}</p>
           </div>
         </div>
         <div v-else>暂无话术内容</div>
@@ -20,14 +26,19 @@
       <div v-loading="skillLoading" class="scrollList">
         <el-collapse v-model="collapseActive" @change="handleChange">
           <transition-group v-if="groupDataList.length > 0" tag="div" class="container">
-            <div v-for="(items, indexs) in groupDataList" :key="indexs" :draggable="activeName == 'personal' ? true : false" class="draggable" @dragstart="handleDragStart($event, items, indexs)" @dragover.prevent="handleDragOver($event, items)" @dragenter="handleDragEnter($event, items, 'item')" @dragend="handleDragEnd($event, items, 'item')">
+            <div v-for="(items, indexs) in groupDataList" :key="indexs"
+              :draggable="activeName == 'personal' ? true : false" class="draggable"
+              @dragstart="handleDragStart($event, items, indexs)" @dragover.prevent="handleDragOver($event, items)"
+              @dragenter="handleDragEnter($event, items, 'item')" @dragend="handleDragEnd($event, items, 'item')">
               <el-popover placement="top" width="300" trigger="hover">
                 <p>{{ items.title }}</p>
-                <div slot="reference" class="contentItemTitle allCenter" :style="{ top: items.title.length > 8 ? '5px' : '13px' }">{{ items.title }}</div>
+                <div slot="reference" class="contentItemTitle allCenter"
+                  :style="{ top: items.title.length > 8 ? '5px' : '13px' }">{{ items.title }}</div>
               </el-popover>
 
               <div class="rowFlex titleFixed columnCenter">
-                <div class="num">{{items.message &&  items.message.attachments && items.message.attachments.length > 1 ? `+${items.message.attachments.length - 1}条` : '' }}</div>
+                <div class="num">{{ items.message && items.message.attachments && items.message.attachments.length > 1 ?
+                  `+${items.message.attachments.length - 1}条` : '' }}</div>
 
               </div>
               <el-collapse-item title="" :name="items._id" class="contentItem">
@@ -35,11 +46,14 @@
                   <div>
                     <div v-if="i.msgtype == 'text'" class="contentItemDetails rowFlex spaceBetween columnCenter">
                       <div class="text">{{ i.text.content }}</div>
-                      <el-button class="sendButton rowFlex allCenter" @click.stop="sendMessageEdit(i, items._id)">发送</el-button>
+                      <el-button class="sendButton rowFlex allCenter"
+                        @click.stop="sendMessageEdit(i, items._id)">发送</el-button>
                     </div>
                     <div v-if="i.msgtype == 'image'" class="contentItemDetails rowFlex spaceBetween columnCenter">
-                      <el-image class="image" :src="i.image.picurl" :preview-src-list="[i.image.picurl]" fit="contain"></el-image>
-                      <el-button class="sendButton rowFlex allCenter" @click.stop="sendMessageEdit(i, items._id)">发送</el-button>
+                      <el-image class="image" :src="i.image.picurl" :preview-src-list="[i.image.picurl]"
+                        fit="contain"></el-image>
+                      <el-button class="sendButton rowFlex allCenter"
+                        @click.stop="sendMessageEdit(i, items._id)">发送</el-button>
                     </div>
                   </div>
                 </div>
@@ -56,7 +70,7 @@
 import { procedure_group, procedureList, procedureSort, procedureGroupSort, skillQuote } from '@/api/skill'
 import { mapState, mapMutations, mapActions } from 'vuex'
 import { throttle, copyToClipboard } from '@/utils/index'
-import {getMediaId} from '@/api/works'
+import { getMediaId } from '@/api/works'
 export default {
   name: 'skillCompany',
   components: {},
@@ -215,7 +229,7 @@ export default {
     // 发送语音的时候 先编辑再发送
     sendMessageEdit(item, id) {
       // 复制内容到粘贴板
-      if(item.msgtype == 'text'){
+      if (item.msgtype == 'text') {
         if (item && item.text && item.text.content) {
           // copyToClipboard(
           //   item.text.content,
@@ -224,15 +238,15 @@ export default {
           // )
           this.sendChatMessage(item.text.content)
         }
-      }else if(item.msgtype == 'image' && item.image.picurl){
+      } else if (item.msgtype == 'image' && item.image.picurl) {
         this.sendMessageImage(item)
       }
     },
-    async sendMessageImage(item, id){
+    async sendMessageImage(item, id) {
       // 发送图片作为链接消息
       if (item.image && item.image.picurl) {
-        const res = await getMediaId({url: item.image.picurl})
-        if(res.status_code == 1){
+        const res = await getMediaId({ url: item.image.picurl })
+        if (res.status_code == 1) {
           this.sendImageAsMedia(res.data.media_id)
         }
       } else {
@@ -260,7 +274,7 @@ export default {
     },
 
     // 发送文本消息
-    sendChatMessage(text){
+    sendChatMessage(text) {
       this.$ww.sendChatMessage({
         msgtype: 'text',
         text: {
@@ -335,7 +349,7 @@ export default {
         this.groupLastDataList = this.groupDataList
       })
     },
-    handleChange() {},
+    handleChange() { },
     // 重置select
     resizeSelect() {
       this.groupActive = '0'
@@ -360,6 +374,7 @@ export default {
   width: 100%;
   height: 100%;
   background: #fff;
+
   .detailsTitle {
     width: 100%;
     padding: 0 10px;
@@ -370,15 +385,18 @@ export default {
     color: #333333;
     border-bottom: 1px solid #ebeef5;
     border-left: 1px solid #ebeef5;
+
     p {
       color: #333333;
     }
   }
+
   .content {
     width: 100%;
     padding: 10px;
     height: 100%;
     background: red;
+
     .contentItemTitle {
       position: absolute;
       left: 10px;
@@ -389,9 +407,11 @@ export default {
       text-overflow: ellipsis;
       display: -webkit-box;
       -webkit-box-orient: vertical;
-      -webkit-line-clamp: 2; /* 这里是超出几行省略 */
+      -webkit-line-clamp: 2;
+      /* 这里是超出几行省略 */
       overflow: hidden;
     }
+
     .titleFixed {
       position: absolute;
       right: 0px;
@@ -399,6 +419,7 @@ export default {
       margin-left: 15px;
       margin-right: 25px;
       z-index: 10;
+
       .num {
         width: auto;
         font-size: 14px;
@@ -407,6 +428,7 @@ export default {
         color: #409EFF;
         margin-right: 10px;
       }
+
       .button {
         width: 50px;
         height: 24px;
@@ -430,6 +452,7 @@ export default {
         height: auto;
         margin: 20px 0;
         padding-left: 10px;
+
         .text {
           font-size: 14px;
           font-family: PingFangSC-Regular, PingFang SC;
@@ -439,6 +462,7 @@ export default {
           line-height: 18px;
           max-width: calc(100% - 60px);
         }
+
         .sendButton {
           width: 50px;
           height: 24px;
@@ -450,12 +474,14 @@ export default {
           color: #333333;
           padding: 0;
         }
+
         .image {
           max-width: 25%;
           border-radius: 5px;
         }
       }
     }
+
     .item {
       width: 100%;
       height: auto;
@@ -467,33 +493,40 @@ export default {
       position: relative;
       padding-left: 10px;
       cursor: move;
+
       .tableImage {
         width: 40px;
         height: 40px;
         border-radius: 6px;
         margin-right: 10px;
       }
+
       .label {
         color: #999999;
       }
+
       .text {
         color: #333333;
         margin-left: 10px;
         word-break: break-all;
         max-width: 80%;
       }
+
       .icon {
         display: none;
         position: absolute;
         right: 0;
         top: 12px;
       }
+
       .tags {
-        width:250px;
+        width: 250px;
         margin-left: 10px;
+
         .tagsItem {
           width: 250px;
         }
+
         .tag {
           height: 22px;
           line-height: 22px;
@@ -510,34 +543,42 @@ export default {
         }
       }
     }
+
     .item:hover .icon {
       display: block;
     }
   }
+
   ::v-deep .el-tabs--border-card .is-active {
     border: none !important;
   }
+
   ::v-deep .is-active {
     border: none;
   }
+
   /* 已移除局部 el-collapse 样式，使用全局样式 */
   .inputContent {
     width: 100%;
+
     ::v-deep .el-input {
       width: 80%;
     }
   }
+
   .skillBox {
     width: 100%;
     height: 100%;
     overflow: auto;
     margin-top: 20px;
   }
+
   .tagList {
     width: 150px;
     height: 100%;
     position: relative;
     border-right: 1px solid #e0e0e0;
+
     .tagItem {
       width: 100px;
       height: 36px;
@@ -550,11 +591,12 @@ export default {
       padding-left: 10px;
       margin-bottom: 6px;
       cursor: pointer;
+
       .text {
         max-width: 100px;
-        margin-left: 10px;
       }
     }
+
     .iconFont {
       font-size: 20px;
       color: #999999;
@@ -562,10 +604,12 @@ export default {
       right: 0;
       top: 20px;
       cursor: pointer;
+
       .upIcon {
         transform: rotate(90deg);
       }
     }
+
     .tagItemActive {
       color: #409EFF;
       font-family: PingFangSC-Regular, PingFang SC;
@@ -573,35 +617,43 @@ export default {
       background: #e4fff1;
     }
   }
+
   .scrollList {
     width: 100%;
     height: 100%;
   }
+
   .container {
     // margin-top: -20px;
   }
+
   ::v-deep .el-tabs,
   .el-tabs__content,
   .el-tab-pane {
     width: 100%;
     height: 100%;
   }
+
   ::v-deep .el-tabs__content {
     width: 100%;
     height: calc(100% - 50px);
   }
+
   ::v-deep .el-tab-pane {
     width: 100%;
     height: 100%;
   }
+
   .scrollList {
     width: 100%;
     height: calc(100% - 40px);
     overflow: auto;
   }
+
   .draggable {
     position: relative;
     transition: all 0.3s;
+
     .icon {
       position: absolute;
       left: 10px;
@@ -609,10 +661,12 @@ export default {
       z-index: 10;
     }
   }
+
   ::v-deep .el-icon-circle-close {
     color: #fff;
   }
 }
+
 .skillTab {
   width: 100%;
   height: calc(100% - 60px);

src/views/components/skill/skillLibrary.vue

@@ -4,24 +4,30 @@
       <!-- 标签 -->
       <el-collapse-transition>
         <div v-if="groupList.length > 0" class="tagList columnFlex">
-          <div v-for="(item, index) in groupList" :key="index" class="tagItem columnCenter" :draggable="false" :class="groupActive == item.value ? 'tagItemActiveText' : ''" @dragstart="handleDragStart($event, item, index)" @dragover.prevent="handleDragOver($event, item)" @dragenter="handleDragEnter($event, item, 'group')" @dragend="handleDragEnd($event, item, 'group')">
+          <div v-for="(item, index) in groupList" :key="index" class="tagItem columnCenter" :draggable="false"
+            :class="groupActive == item.value ? 'tagItemActiveText' : ''"
+            @dragstart="handleDragStart($event, item, index)" @dragover.prevent="handleDragOver($event, item)"
+            @dragenter="handleDragEnter($event, item, 'group')" @dragend="handleDragEnd($event, item, 'group')">
             <div class="rowFlex columnCenter spaceBetween tagItemGroup" @click="groupFilter(item, index)">
               <div class="rowFlex columnCenter">
-                <i class="el-icon-rank icon" style="cursor: move"></i>
-                <p class="text hidden">{{ item.name }}</p>
+                <el-tooltip effect="dark" placement="top" :content="item.name" v-if="item.name.length >= 6">
+                  <p class="text hidden" @click="groupFilter(item, index)">{{ item.name }}</p>
+                </el-tooltip>
+                <p v-else class="text hidden" @click="groupFilter(item, index)">{{ item.name }}</p>
               </div>
               <i class="el-icon-caret-right rotageIcon" :class="groupActive == item.value ? 'rotage' : ''"></i>
             </div>
             <!-- 二级分组 -->
             <div v-if="item.child.length > 0 && groupActive == item.value" class="childGroup">
-              <div v-for="child in item.child" :key="child._id" class="childGroupText" :class="[groupActiveChild == child._id ? 'tagItemActive' : '']" @click.stop="groupFilterChild(child)">
+              <div v-for="child in item.child" :key="child._id" class="childGroupText"
+                :class="[groupActiveChild == child._id ? 'tagItemActive' : '']" @click.stop="groupFilterChild(child)">
                 <p class="text hidden">{{ child.name }}</p>
               </div>
             </div>
           </div>
         </div>
         <div v-else class="noContent rowFlex allCenter">
-          <noContent/>
+          <noContent />
         </div>
       </el-collapse-transition>
       <!-- 话术 -->
@@ -34,7 +40,8 @@
         <div ref="skillLibrary" v-loading="skillLoading" @scroll="paperScroll" class="scrollList">
           <div v-for="(items, indexs) in groupDataList" :key="indexs" class="answerContent">
             <div class="question"><span class="title">Q:</span>{{ items.name }}</div>
-            <div v-for="(answer, answerIndex) in items.answer" :key="answerIndex" class="answerItem" style="width: 100%">
+            <div v-for="(answer, answerIndex) in items.answer" :key="answerIndex" class="answerItem"
+              style="width: 100%">
               <!-- <span class="question">{{ answerIndex + 1 }}: {{ answer }}</span> -->
               <div v-if="answer.msgtype == 'text'" class="answerText rowFlex spaceBetween">
                 <span class="title rowFlex">A{{ answerIndex + 1 }}:</span>
@@ -45,7 +52,8 @@
               </div>
               <div v-else-if="answer.msgtype == 'image'" class="answerText rowFlex">
                 <span class="title rowFlex">A{{ answerIndex + 1 }}:</span>
-                <el-image style="max-width: 200px" :src="answer.image.picurl" @click="sendMessageImage(answer, items._id)" :preview-src-list="[answer.image.picurl]" > </el-image>
+                <el-image style="max-width: 200px" :src="answer.image.picurl"
+                  @click="sendMessageImage(answer, items._id)" :preview-src-list="[answer.image.picurl]"> </el-image>
               </div>
             </div>
           </div>
@@ -59,7 +67,7 @@
 //  procedure_group, procedureList, procedureSort, procedureGroupSort, skillQuote,
 import { groupList, libraryIndex, logClickTime } from '@/api/skill'
 import { mapState, mapMutations, mapActions } from 'vuex'
-import { throttle, debounce, copyToClipboard,sendChatMessage } from '@/utils/index'
+import { throttle, debounce, copyToClipboard, sendChatMessage } from '@/utils/index'
 import noContent from '@/components/noContent.vue'
 export default {
   name: 'skillLibrary',
@@ -110,7 +118,7 @@ export default {
     }
   },
   computed: {
-    ...mapState('game', ['accountSelect','chatUserInfo']),
+    ...mapState('game', ['accountSelect', 'chatUserInfo']),
   },
   watch: {
     accountSelect(newVal, oldVal) {
@@ -133,7 +141,7 @@ export default {
     this.requestLibraryData()
   },
   methods: {
-    sendMessage: throttle(function(item, id) {
+    sendMessage: throttle(function (item, id) {
       console.log(item, id)
       // this.skillQuote(id, item.length)
     }, 500),
@@ -141,14 +149,14 @@ export default {
       this.sortID._id = item._id
       this.dragging = item
     },
-    paperScroll:debounce(function(){
+    paperScroll: debounce(function () {
       const el = this.$refs.skillLibrary
       if (el.offsetHeight + el.scrollTop + 10 >= el.scrollHeight) {
         console.log('下一页')
         this.pageInfo.page++
         this.searchTable()
       }
-    },500),
+    }, 500),
     skillQuote(id, num) {
       const data = {
         type: this.activeName,
@@ -186,7 +194,7 @@ export default {
       this.sendChatMessage(item.text.content || '', 'text')
 
     },
-    sendMessageImage(item){
+    sendMessageImage(item) {
       console.log(item, 'item')
       this.sendChatMessage(item.image.picurl || '', 'image')
     },
@@ -256,7 +264,7 @@ export default {
         this.groupLastDataList = this.groupDataList
       })
     },
-    handleChange() {},
+    handleChange() { },
     // 重置select
     resizeSelect() {
       this.groupActive = '0'
@@ -268,7 +276,7 @@ export default {
         this.isResize = false
       }, 2000)
     },
-    sendChatMessage(content, type){
+    sendChatMessage(content, type) {
       sendChatMessage(content, type)
     },
   }
@@ -280,9 +288,11 @@ export default {
   height: 100%;
   overflow-y: auto;
   overflow-x: hidden;
+
   .noContent {
     font-size: 200px;
   }
+
   .contentItemTitle {
     position: absolute;
     left: 10px;
@@ -293,9 +303,11 @@ export default {
     text-overflow: ellipsis;
     display: -webkit-box;
     -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2; /* 这里是超出几行省略 */
+    -webkit-line-clamp: 2;
+    /* 这里是超出几行省略 */
     overflow: hidden;
   }
+
   .titleFixed {
     position: absolute;
     right: 0px;
@@ -303,6 +315,7 @@ export default {
     margin-left: 15px;
     margin-right: 25px;
     z-index: 10;
+
     .num {
       width: auto;
       font-size: 14px;
@@ -311,6 +324,7 @@ export default {
       color: #409EFF;
       margin-right: 10px;
     }
+
     .button {
       width: 50px;
       height: 24px;
@@ -334,6 +348,7 @@ export default {
       height: auto;
       margin: 20px 0;
       padding-left: 10px;
+
       .text {
         font-size: 14px;
         font-family: PingFangSC-Regular, PingFang SC;
@@ -343,6 +358,7 @@ export default {
         word-wrap: break-word;
         line-height: 18px;
       }
+
       .sendButton {
         width: 50px;
         height: 24px;
@@ -354,12 +370,14 @@ export default {
         color: #333333;
         padding: 0;
       }
+
       .image {
         max-width: 25%;
         border-radius: 5px;
       }
     }
   }
+
   .item {
     width: 100%;
     height: auto;
@@ -371,33 +389,40 @@ export default {
     position: relative;
     padding-left: 10px;
     cursor: move;
+
     .tableImage {
       width: 40px;
       height: 40px;
       border-radius: 6px;
       margin-right: 10px;
     }
+
     .label {
       color: #999999;
     }
+
     .text {
       color: #333333;
       margin-left: 10px;
       word-break: break-all;
       max-width: 80%;
     }
+
     .icon {
       display: none;
       position: absolute;
       right: 0;
       top: 12px;
     }
+
     .tags {
       width: 300px;
       margin-left: 10px;
+
       .tagsItem {
         width: 300px;
       }
+
       .tag {
         height: 22px;
         line-height: 22px;
@@ -414,30 +439,37 @@ export default {
       }
     }
   }
+
   .item:hover .icon {
     display: block;
   }
 }
+
 ::v-deep .el-tabs--border-card .is-active {
   border: none !important;
 }
+
 ::v-deep .is-active {
   border: none;
 }
+
 /* 已移除局部 el-collapse 样式，使用全局样式 */
 .inputContent {
   width: 100%;
   margin-bottom: 20px;
   margin-left: 20px;
+
   ::v-deep .el-input {
     width: 90%;
   }
 }
+
 .skillBox {
   width: 100%;
   height: calc(100% - 20px);
 
 }
+
 .tagList {
   width: 200px;
   height: 100%;
@@ -455,15 +487,18 @@ export default {
     color: #333333;
     margin-bottom: 6px;
     cursor: pointer;
+
     .text {
       max-width: 90px;
       margin-left: 5px;
     }
+
     .tagItemGroup {
       height: 36px;
       padding-right: 10px;
     }
   }
+
   .iconFont {
     font-size: 20px;
     color: #999999;
@@ -471,47 +506,57 @@ export default {
     right: 0;
     top: 20px;
     cursor: pointer;
+
     .upIcon {
       transform: rotate(90deg);
     }
   }
+
   .tagItemActive {
     color: #409EFF !important;
     font-family: PingFangSC-Regular, PingFang SC;
     font-weight: 400;
     background: #e4fff1;
   }
+
   .tagItemActiveText {
     color: #409EFF;
   }
 }
-.libraryListContent{
+
+.libraryListContent {
   width: 100%;
   height: 100%;
 }
+
 .rotageIcon {
   cursor: pointer;
   transition: all 0.5s;
   transform: rotate(0deg);
   font-size: 12px;
 }
+
 .rotage {
   transform: rotate(90deg);
 }
+
 .childGroup {
   p {
     margin-left: 15px !important;
   }
+
   .childGroupText {
     height: 36px;
     line-height: 36px;
     color: #333333;
   }
 }
+
 .scrollList {
   width: 100%;
   height: 100%;
   padding-left: 20px;
+
   .answerContent {
     width: 100%;
     background: #f7f8fa;
@@ -519,15 +564,18 @@ export default {
     border: 1px solid #e5e6eb;
     padding: 10px;
     margin-bottom: 20px;
+
     .title {
       width: 30px;
       font-size: 14px;
       font-weight: 500;
       margin-right: 10px;
     }
+
     .answerItem {
       margin-bottom: 10px;
     }
+
     .question {
       font-weight: 500;
       font-size: 14px;
@@ -536,6 +584,7 @@ export default {
       text-align: left;
       margin-bottom: 10px;
     }
+
     .answerText {
       width: 100%;
       font-family: PingFangSC, PingFang SC;
@@ -544,15 +593,18 @@ export default {
       color: #333333;
       text-align: justify;
       font-style: normal;
+
       .answerTextTitle {
         width: 30px;
         font-size: 16px;
         font-weight: 500;
       }
+
       .textAnswer {
         word-wrap: break-word;
         font-size: 13px;
       }
+
       .copyIcon {
         width: 20px;
         color: #409EFF;
@@ -565,32 +617,42 @@ export default {
     }
   }
 }
-.scrollList::-webkit-scrollbar {display:none}
+
+.scrollList::-webkit-scrollbar {
+  display: none
+}
+
 .container {
   // margin-top: -20px;
 }
+
 ::v-deep .el-tabs,
 .el-tabs__content,
 .el-tab-pane {
   width: 100%;
   height: 100%;
 }
+
 ::v-deep .el-tabs__content {
   width: 100%;
   height: calc(100% - 50px);
 }
+
 ::v-deep .el-tab-pane {
   width: 100%;
   height: 100%;
 }
+
 .scrollList {
   width: 100%;
   height: calc(100% - 40px);
   overflow: auto;
 }
+
 .draggable {
   position: relative;
   transition: all 0.3s;
+
   .icon {
     position: absolute;
     left: 10px;
@@ -598,10 +660,12 @@ export default {
     z-index: 10;
   }
 }
+
 .textAnswer {
   word-wrap: break-word;
   display: inline;
 }
+
 .img_drop {
   width: 200px;
   height: 200px;
@@ -610,7 +674,11 @@ export default {
   left: 0;
   top: 0;
 }
-.skillLibrary::-webkit-scrollbar {display:none}
+
+.skillLibrary::-webkit-scrollbar {
+  display: none
+}
+
 ::v-deep .el-icon-circle-close {
   color: #fff;
 }

src/views/components/skill/skillPersonal.vue

@@ -9,9 +9,15 @@
       <!-- 标签 -->
       <el-collapse-transition>
         <div v-if="groupList.length > 0" class="tagList columnFlex">
-          <div v-for="(item, index) in groupList" :key="index" class="tagItem rowFlex columnCenter" :draggable="activeName == 'personal' ? true : false" :class="groupActive == item.value ? 'tagItemActive' : ''" @dragstart="handleDragStart($event, item, index)" @dragover.prevent="handleDragOver($event, item)" @dragenter="handleDragEnter($event, item, 'group')" @dragend="handleDragEnd($event, item, 'group')">
-            <i class="el-icon-rank icon" v-if="activeName == 'personal'" style="cursor: move"></i>
+          <div v-for="(item, index) in groupList" :key="index" class="tagItem rowFlex columnCenter"
+            :draggable="activeName == 'personal' ? true : false"
+            :class="groupActive == item.value ? 'tagItemActive' : ''" @dragstart="handleDragStart($event, item, index)"
+            @dragover.prevent="handleDragOver($event, item)" @dragenter="handleDragEnter($event, item, 'group')"
+            @dragend="handleDragEnd($event, item, 'group')">
+            <el-tooltip effect="dark" placement="top" :content="item.group_name" v-if="item.group_name.length >= 6">
               <p class="text hidden" @click="groupFilter(item, index)">{{ item.group_name }}</p>
+            </el-tooltip>
+            <p v-else class="text hidden" @click="groupFilter(item, index)">{{ item.group_name }}</p>
           </div>
         </div>
         <div v-else>暂无话术内容</div>
@@ -20,14 +26,19 @@
       <div v-loading="skillLoading" class="scrollList">
         <el-collapse v-model="collapseActive" @change="handleChange">
           <transition-group v-if="groupDataList.length > 0" tag="div" class="container">
-            <div v-for="(items, indexs) in groupDataList" :key="indexs" :draggable="activeName == 'personal' ? true : false" class="draggable" @dragstart="handleDragStart($event, items, indexs)" @dragover.prevent="handleDragOver($event, items)" @dragenter="handleDragEnter($event, items, 'item')" @dragend="handleDragEnd($event, items, 'item')">
+            <div v-for="(items, indexs) in groupDataList" :key="indexs"
+              :draggable="activeName == 'personal' ? true : false" class="draggable"
+              @dragstart="handleDragStart($event, items, indexs)" @dragover.prevent="handleDragOver($event, items)"
+              @dragenter="handleDragEnter($event, items, 'item')" @dragend="handleDragEnd($event, items, 'item')">
               <el-popover placement="top" width="300" trigger="hover">
                 <p>{{ items.title }}</p>
-                <div slot="reference" class="contentItemTitle allCenter" :style="{ top: items.title.length > 8 ? '5px' : '13px' }">{{ items.title }}</div>
+                <div slot="reference" class="contentItemTitle allCenter"
+                  :style="{ top: items.title.length > 8 ? '5px' : '13px' }">{{ items.title }}</div>
               </el-popover>
 
               <div class="rowFlex titleFixed columnCenter">
-                <div class="num">{{ items.message.attachments.length > 1 ? `+${items.message.attachments.length - 1}条` : '' }}</div>
+                <div class="num">{{ items.message.attachments.length > 1 ? `+${items.message.attachments.length - 1}条` :
+                  '' }}</div>
                 <!-- <el-button class="button rowFlex allCenter"  @click.stop="sendMessage(items.message.attachments, items._id)">发送</el-button> -->
               </div>
               <el-collapse-item title="" :name="items._id" class="contentItem">
@@ -35,11 +46,14 @@
                   <div>
                     <div v-if="i.msgtype == 'text'" class="contentItemDetails rowFlex spaceBetween columnCenter">
                       <div class="text">{{ i.text.content }}</div>
-                      <el-button class="sendButton rowFlex allCenter"  @click.stop="sendMessageEdit(i, items._id)">发送</el-button>
+                      <el-button class="sendButton rowFlex allCenter"
+                        @click.stop="sendMessageEdit(i, items._id)">发送</el-button>
                     </div>
                     <div v-if="i.msgtype == 'image'" class="contentItemDetails rowFlex spaceBetween columnCenter">
-                      <el-image class="image" :src="i.image.picurl" :preview-src-list="[i.image.picurl]" fit="contain"></el-image>
-                      <el-button class="sendButton rowFlex allCenter"  @click.stop="sendMessageEdit(i, items._id)">发送</el-button>
+                      <el-image class="image" :src="i.image.picurl" :preview-src-list="[i.image.picurl]"
+                        fit="contain"></el-image>
+                      <el-button class="sendButton rowFlex allCenter"
+                        @click.stop="sendMessageEdit(i, items._id)">发送</el-button>
                     </div>
                   </div>
                 </div>
@@ -54,7 +68,7 @@
 </template>
 <script>
 import { procedure_group, procedureList, procedureSort, procedureGroupSort } from '@/api/skill'
-import {getMediaId} from '@/api/works'
+import { getMediaId } from '@/api/works'
 import { mapState, mapMutations, mapActions } from 'vuex'
 import { debounce, copyToClipboard } from '@/utils/index'
 export default {
@@ -103,7 +117,7 @@ export default {
   },
   computed: {
     ...mapState('game', ['accountSelect']),
-    ...mapState('user', ['userid','external_userid']),
+    ...mapState('user', ['userid', 'external_userid']),
   },
   watch: {
     accountSelect(newVal, oldVal) {
@@ -127,14 +141,14 @@ export default {
   },
   methods: {
     // ...mapMutations('common', ['set_sendSkillMessage', 'set_isEditSkill']),
-    sendMessage: debounce(function(item, id) {
+    sendMessage: debounce(function (item, id) {
       console.log(item, id, 'sendMessage')
     }, 500),
     // 发送语音的时候 先编辑再发送
     sendMessageEdit(item, id) {
       console.log(item)
       // 复制内容到粘贴板
-      if(item.msgtype == 'text'){
+      if (item.msgtype == 'text') {
         if (item && item.text && item.text.content) {
           // copyToClipboard(
           //   item.text.content,
@@ -143,15 +157,15 @@ export default {
           // )
           this.sendChatMessage(item.text.content)
         }
-      }else if(item.msgtype == 'image' && item.image.picurl){
+      } else if (item.msgtype == 'image' && item.image.picurl) {
         this.sendMessageImage(item)
       }
     },
-    async sendMessageImage(item, id){
+    async sendMessageImage(item, id) {
       // 发送图片作为链接消息
       if (item.image && item.image.picurl) {
-        const res = await getMediaId({url: item.image.picurl})
-        if(res.status_code == 1){
+        const res = await getMediaId({ url: item.image.picurl })
+        if (res.status_code == 1) {
           this.sendImageAsMedia(res.data.media_id)
         }
       } else {
@@ -178,7 +192,7 @@ export default {
     },
 
     // 发送文本消息
-    sendChatMessage(text){
+    sendChatMessage(text) {
       this.$ww.sendChatMessage({
         msgtype: 'text',
         text: {
@@ -332,7 +346,7 @@ export default {
         this.groupLastDataList = this.groupDataList
       })
     },
-    handleChange() {},
+    handleChange() { },
     // 重置select
     resizeSelect() {
       this.groupActive = '0'
@@ -357,6 +371,7 @@ export default {
   width: 100%;
   height: 100%;
   background: #fff;
+
   .detailsTitle {
     width: 100%;
     padding: 0 10px;
@@ -367,15 +382,18 @@ export default {
     color: #333333;
     border-bottom: 1px solid #ebeef5;
     border-left: 1px solid #ebeef5;
+
     p {
       color: #333333;
     }
   }
+
   .content {
     width: 100%;
     padding: 10px;
     height: 100%;
     background: red;
+
     .contentItemTitle {
       position: absolute;
       left: 10px;
@@ -386,9 +404,11 @@ export default {
       text-overflow: ellipsis;
       display: -webkit-box;
       -webkit-box-orient: vertical;
-      -webkit-line-clamp: 2; /* 这里是超出几行省略 */
+      -webkit-line-clamp: 2;
+      /* 这里是超出几行省略 */
       overflow: hidden;
     }
+
     .titleFixed {
       position: absolute;
       right: 0px;
@@ -396,6 +416,7 @@ export default {
       margin-left: 15px;
       margin-right: 25px;
       z-index: 10;
+
       .num {
         width: auto;
         font-size: 14px;
@@ -404,6 +425,7 @@ export default {
         color: #409EFF;
         margin-right: 10px;
       }
+
       .button {
         width: 50px;
         height: 24px;
@@ -427,6 +449,7 @@ export default {
         height: auto;
         margin: 20px 0;
         padding-left: 10px;
+
         .text {
           font-size: 14px;
           font-family: PingFangSC-Regular, PingFang SC;
@@ -436,6 +459,7 @@ export default {
           line-height: 18px;
           max-width: calc(100% - 60px);
         }
+
         .sendButton {
           width: 50px;
           height: 24px;
@@ -447,12 +471,14 @@ export default {
           color: #333333;
           padding: 0;
         }
+
         .image {
           max-width: 25%;
           border-radius: 5px;
         }
       }
     }
+
     .item {
       width: 100%;
       height: auto;
@@ -464,33 +490,40 @@ export default {
       position: relative;
       padding-left: 10px;
       cursor: move;
+
       .tableImage {
         width: 40px;
         height: 40px;
         border-radius: 6px;
         margin-right: 10px;
       }
+
       .label {
         color: #999999;
       }
+
       .text {
         color: #333333;
         margin-left: 10px;
         word-break: break-all;
         max-width: 80%;
       }
+
       .icon {
         display: none;
         position: absolute;
         right: 0;
         top: 12px;
       }
+
       .tags {
-        width:260px;
+        width: 260px;
         margin-left: 10px;
+
         .tagsItem {
           width: 260px;
         }
+
         .tag {
           height: 22px;
           line-height: 22px;
@@ -507,34 +540,42 @@ export default {
         }
       }
     }
+
     .item:hover .icon {
       display: block;
     }
   }
+
   ::v-deep .el-tabs--border-card .is-active {
     border: none !important;
   }
+
   ::v-deep .is-active {
     border: none;
   }
+
   /* 已移除局部 el-collapse 样式，使用全局样式 */
   .inputContent {
     width: 100%;
+
     ::v-deep .el-input {
       width: 80%;
     }
   }
+
   .skillBox {
     width: 100%;
     height: 100%;
     overflow: auto;
     margin-top: 20px;
   }
+
   .tagList {
     width: 140px;
     height: 100%;
     position: relative;
     border-right: 1px solid #e0e0e0;
+
     .tagItem {
       width: 100px;
       height: 36px;
@@ -547,11 +588,12 @@ export default {
       padding-left: 10px;
       margin-bottom: 6px;
       cursor: pointer;
+
       .text {
         max-width: 90px;
-        margin-left: 10px;
       }
     }
+
     .iconFont {
       font-size: 20px;
       color: #999999;
@@ -559,10 +601,12 @@ export default {
       right: 0;
       top: 20px;
       cursor: pointer;
+
       .upIcon {
         transform: rotate(90deg);
       }
     }
+
     .tagItemActive {
       color: #409EFF;
       font-family: PingFangSC-Regular, PingFang SC;
@@ -570,35 +614,43 @@ export default {
       background: #e4fff1;
     }
   }
+
   .scrollList {
     width: 100%;
     height: 100%;
   }
+
   .container {
     // margin-top: -20px;
   }
+
   ::v-deep .el-tabs,
   .el-tabs__content,
   .el-tab-pane {
     width: 100%;
     height: 100%;
   }
+
   ::v-deep .el-tabs__content {
     width: 100%;
     height: calc(100% - 50px);
   }
+
   ::v-deep .el-tab-pane {
     width: 100%;
     height: 100%;
   }
+
   .scrollList {
     width: 100%;
     height: calc(100% - 40px);
     overflow: auto;
   }
+
   .draggable {
     position: relative;
     transition: all 0.3s;
+
     .icon {
       position: absolute;
       left: 10px;
@@ -606,10 +658,12 @@ export default {
       z-index: 10;
     }
   }
+
   ::v-deep .el-icon-circle-close {
     color: #fff;
   }
 }
+
 .skillTab {
   width: 100%;
   height: calc(100% - 60px);
@@ -640,6 +694,7 @@ export default {
 .tagList {
   .tagItem {
     transition: all 0.3s ease;
+
     &:hover {
       background-color: #f5f7fa;
     }