style(css): 优化播放按钮和标签的样式设计

简化播放按钮的样式实现，移除冗余的伪元素，改用box-shadow实现边框效果
统一标签的圆角半径和背景色，移除注释掉的代码
调整播放按钮点击逻辑，当playurl不存在时自动获取播放链接

index.html

@@ -152,7 +152,7 @@
                                 <div class="operate flexcenter">
                                     <img class="speed left" @click="fastForward('slow')" src="./static/img/speed-left.png" />
                                     <img v-if="item.state" class="play" @click="closeAll()" src="./static/img/pause-black-icon.svg" />
-                                    <img v-else class="play" @click="manageAudio(item.playurl, 'custom')" src="./static/img/play-black-icon.svg" />
+                                    <img v-else class="play" @click="item.playurl ? manageAudio(item.playurl, 'custom') : getPlayUrl(index, 'custom')" src="./static/img/play-black-icon.svg" />
                                     <img class="speed right" @click="fastForward('fast')" src="./static/img/speed-right.png" />
                                 </div>
                             </div>

static/css/song-request-station.css

@@ -295,22 +295,11 @@
 .container .container-box .list-box .list-fill .fill-item {
   width: 33px;
   height: 23px;
-  border-radius: 8px;
+  border-radius: 100px;
-  background-color: rgba(255, 255, 255, 0.223529);
   position: absolute;
   cursor: pointer;
-}
+  box-shadow: 0px 0 0 3px rgba(255, 255, 255, 0.223529);
-.container .container-box .list-box .list-fill .fill-item::after {
-  content: "";
-  width: calc(100% - 6px);
-  height: calc(100% - 6px);
   background: rgba(255, 255, 255, 0.5);
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  border-radius: 8px;
-  z-index: -1;
 }
 .container .container-box .list-box .list-fill .fill-item.item2 {
   width: 48px;

static/css/song-request-station.less

@@ -342,23 +342,25 @@
                 .fill-item {
                     width: 33px;
                     height: 23px;
-                    border-radius: 8px;
+                    border-radius: 100px;
-                    background-color: rgba(255, 255, 255, 0.223529);
+                    // background-color: rgba(255, 255, 255, 0.223529);
                     position: absolute;
                     cursor: pointer;
-
+                    box-shadow: 0px 0 0 3px rgba(255, 255, 255, 0.223529);
-                    &::after {
-                        content: "";
-                        width: calc(100% - 6px);
-                        height: calc(100% - 6px);
                     background: rgba(255, 255, 255, 0.5);
-                        position: absolute;
+
-                        top: 50%;
+                    // &::after {
-                        left: 50%;
+                    //     content: "";
-                        transform: translate(-50%, -50%);
+                    //     width: calc(100% - 6px);
-                        border-radius: 8px;
+                    //     height: calc(100% - 6px);
-                        z-index: -1;
+                    //     background: rgba(255, 255, 255, 0.5);
-                    }
+                    //     position: absolute;
+                    //     top: 50%;
+                    //     left: 50%;
+                    //     transform: translate(-50%, -50%);
+                    //     border-radius: 100px;
+                    //     z-index: -1;
+                    // }
 
                     &.item2 {
                         width: 48px;
@@ -409,112 +411,55 @@
 .tag-item {
     height: 60px;
     line-height: 60px;
-    // border-radius: 8px;
     border-radius: 30px;
-    // background-color: rgba(255, 255, 255, 0.223529);
     background: #d5e7f7;
-
     position: absolute;
     font-size: 20px !important;
     color: #1c3e5e;
-
     padding: 0 25px;
     width: fit-content;
     cursor: pointer;
-    // transition: all 0.3s;
     box-shadow: 0px 0 0 3px rgba(255, 255, 255, 0.223529);
     opacity: 1 !important;
+
     &:hover {
         font-weight: 650;
         color: rgb(88, 58, 5) !important;
         background-color: rgba(241, 154, 4, 1) !important;
-
-        // &::after {
-        //     background-color: rgba(241, 154, 4, 1) !important;
-        // }
     }
 
-    // &.item2 {
-    //     height: 60px;
-    //     line-height: 60px;
-    //     border-radius: 30px;
-
-    //     color: #1c3e5e;
-    //     font-size: 20px !important;
-
-    //     // &::after {
-    //     //     background: #d5e7f7;
-    //     // }
-    // }
-
     &.item2 {
         height: 50px;
         line-height: 50px;
         border-radius: 25px;
-
         color: #1c3e5e;
         padding: 0 20px;
         font-size: 18px !important;
         background: #d5e7f7;
-        // &::after {
-        //     background: #d5e7f7;
-        //     border-radius: 250px;
-        // }
     }
 
     &.item3 {
         height: 47px;
         line-height: 47px;
         border-radius: 25px;
-
         color: #1c3e5e;
         padding: 0 16px;
         font-size: 16px !important;
         background: #d5e7f7;
-
-        // &::after {
-        //     background: #d5e7f7;
-        //     border-radius: 25px;
-        // }
     }
 
     &.item4 {
         height: 30px;
         line-height: 30px;
         border-radius: 30px;
-
         color: #1c3e5e;
         padding: 0 10px;
         font-size: 14px !important;
         background: #d5e7f7;
-
-        // &::after {
-        //     background: #d5e7f7;
-        //     border-radius: 30px;
-        // }
     }
 
-    // &::after {
-    //     content: "";
-    //     width: calc(100% - 6px);
-    //     height: calc(100% - 6px);
-    //     // background: linear-gradient(180deg, #ff8eba 0%, #f4458c 100%);
-    //     background: #d5e7f7;
-    //     position: absolute;
-    //     top: 50%;
-    //     left: 50%;
-    //     transform: translate(-50%, -50%);
-    //     // border-radius: 8px;
-    //     border-radius: 30px;
-    //     z-index: -1;
-    // }
-
     &.red {
         color: #62263c !important;
         background: linear-gradient(180deg, #ff8eba 0%, #f4458c 100%);
-
-        &::after {
-            // background: linear-gradient(180deg, #ff8eba 0%, #f4458c 100%);
-        }
     }
 }

static/js/index.js

@@ -489,6 +489,11 @@ const search = createApp({
                 id = item.id;
             }
 
+            if (area == "custom") {
+                const item = customList.value[index];
+                id = item.id;
+            }
+
             ajax("https://pujianchaoyin.com/api/getMusicDetail", {
                 id,
             }).then((res) => {
@@ -497,7 +502,11 @@ const search = createApp({
                 if (area == "student") {
                     zeroOrderStudents.value = { ...data, ...zeroOrderStudents.value };
                     manageAudio(data.playurl, area);
-                    console.log(zeroOrderStudents.value, "zeroOrderStudents");
+                }
+
+                if (area == "custom") {
+                    customList.value[index] = { ...data, ...customList.value[index] };
+                    manageAudio(data.playurl, area);
                 }
             });
         };