样式修改

src/views/Editor/CanvasTool/index.vue

@@ -404,7 +404,7 @@ function handleResources(item: Record<string, any>) {
         })
         ElMessage({
           showClose: true,
-          message: "已添加到音频列表!",
+          message: "已添加到音频列表",
           type: "success"
         })
       }
@@ -412,7 +412,7 @@ function handleResources(item: Record<string, any>) {
       createEnjoyElement(item.id, item.name, item.content)
       ElMessage({
         showClose: true,
-        message: "已添加到音频列表!",
+        message: "已添加到音频列表",
         type: "success"
       })
     }

src/views/components/element/enjoyElement/enjoyPlayer.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="enjoyPlayer">
+  <div class="enjoyPlayer" v-click-outside="handleListOutside">
     <div v-if="!isBase" v-show="isShowEnjoyPlayerList" class="enjoyPlayerList">
       <div class="titNameCon">
         <div class="titName">
@@ -95,6 +95,12 @@ const props = withDefaults(
   }
 )
 
+function handleListOutside() {
+  if (!props.isBase && isShowEnjoyPlayerList.value) {
+    hanleEnjoyList()
+  }
+}
+
 const isShowEnjoyPlayerList = ref(false)
 
 function hanleEnjoyList() {
@@ -474,7 +480,7 @@ const handleMousedownPlayBar = () => {
     bottom: 51px;
     box-shadow: 0px 3px 22px 0px rgba(0, 0, 0, 0.12);
     border-radius: 20px 20px 0px 0px;
-    background-color: rgba(255, 255, 255, 0.9);
+    background-color: rgb(255, 255, 255);
     padding: 20px 0 61px 10px;
     .titNameCon {
       padding-left: 10px;
@@ -513,7 +519,7 @@ const handleMousedownPlayBar = () => {
         justify-content: space-between;
         align-items: center;
         &.active {
-          background: rgba(85, 176, 255, 0.15);
+          background: #e6f3ff;
           border-radius: 10px;
           .itemLeft {
             color: #198cfe;

src/views/components/element/enjoyElement/resourcesList/resourcesList.vue

@@ -30,7 +30,7 @@
             v-for="item in resourcesTypeOption"
             :key="item.value"
             @click="handleTypeChange(item.value)"
-            :class="['queryTip', queryData.type === item.value && 'tabActive']"
+            :class="['queryTip tabQueryTip', queryData.type === item.value && 'active']"
           >
             {{ item.text }}
           </div>
@@ -265,7 +265,6 @@ function clearQueryData() {
   queryData.total = 0
   queryData.sourceType = 5
   queryData.name = ""
-  queryData.type = "SONG"
   queryData.materialTagId = ""
   queryData.subject = {
     id: "",
@@ -478,9 +477,15 @@ const highlightedText = (text: string, query: string) => {
             background: #d2ecff;
             color: rgba(0, 0, 0, 1);
           }
-          &.tabActive {
-            background: #198cfe;
-            color: #ffffff;
+          &.tabQueryTip {
+            &:hover {
+              background: #e8e9ed;
+              color: #5d5d5e;
+            }
+            &.active {
+              background: #198cfe;
+              color: #ffffff;
+            }
           }
         }
       }
@@ -661,8 +666,8 @@ const highlightedText = (text: string, query: string) => {
                 }
                 .jxImg {
                   position: absolute;
-                  left: -1px;
-                  top: -1px;
+                  left: 0px;
+                  top: 0px;
                   width: 50px;
                   height: 27px;
                 }