fix:样式

src/views/co-ai/index.module.less

@@ -46,7 +46,7 @@
     position: absolute;
     left: 0;
     top: 0;
-    width: 102px;
+    width: 95px;
     height: 100%;
     background: linear-gradient(48deg, #43B2FF 0%, #159AF7 100%);
     border: 2Px solid #fff;
@@ -67,8 +67,8 @@
 
 .types {
     position: relative;
-    top: 2px;
-    width: 102px;
+    top: 2Px;
+    width: 95px;
     height: calc(100% - 4Px);
     padding: 4px 0;
     overflow-x: hidden;
@@ -84,43 +84,22 @@
 
     .type {
         position: relative;
-        padding: 4px 14px;
+        padding: 4px 12px;
 
         &.typeActive {
             .typeImg {
-                border-color: #f4b482;
-                border-width: 3px;
-                box-shadow: 0px 0 4px 2px #fff;
+                border-color: #99FFD0;
                 animation: scaleBtn 1s ease-in-out;
             }
-
-            .typeIndex {
-                display: block;
-            }
         }
     }
 
-    .typeIndex {
-        position: absolute;
-        top: 45%;
-        right: -6px;
-        width: 12px;
-        height: 12px;
-        background: rgba(184, 219, 251, 1);
-        border: 2px solid #fff;
-        border-radius: 2px;
-        transform: rotate(45deg);
-        z-index: 2;
-        display: none;
-    }
-
     .typeImg {
-        background-color: #000;
-        border: 2px solid #fff;
-        border-radius: 18px;
-        height: 75px;
+        padding: 6px;
+        border: 2px solid transparent;
+        border-radius: 6px;
+        height: 95px;
         transition: .3s;
-        overflow: hidden;
 
         &:active {
             transform: scale(0.8);
@@ -132,22 +111,21 @@
         width: 100%;
         height: 100%;
         object-fit: cover;
+        box-shadow: 2px 1Px 1px rgba(255, 255, 255, 1);
+        filter: drop-shadow(1px 6px 6px rgba(0, 0, 0, 0.5));
     }
 }
 
 .center {
     flex: 1;
-    // width: calc(100% - 98px);
     position: relative;
+    padding-right: 12px;
     height: 100%;
 
     :global {
         .van-search {
-            position: absolute;
-            top: 0;
-            left: 0;
             padding: 6px 9px;
-            width: calc(100% - 12px);
+            width: 100%;
             z-index: 1;
         }
     }
@@ -155,11 +133,11 @@
 
 .musicContent {
     width: 100%;
-    height: calc(100% - var(--van-search-input-height) - 12px - 1Px);
-    margin-top: calc(var(--van-search-input-height) + 12px);
-    padding: 6px 24px 12px 12px;
+    height: calc(100% - var(--van-search-input-height) - 12px - 2Px);
+    padding: 6px 12px 12px 12px;
     overflow-x: hidden;
     overflow-y: auto;
+
     &::-webkit-scrollbar {
         width: 0;
         display: none;
@@ -174,18 +152,9 @@
     border-radius: 9px;
     margin-bottom: 6px;
     background-color: #fff;
-    padding: 5px;
+    padding: 4px;
     transition: all .3s;
 
-    // &::after {
-    //     content: '';
-    //     position: absolute;
-    //     right: -24px;
-    //     border: 10px solid transparent;
-    //     border-right-color: #fff;
-    //     opacity: 0;
-    // }
-
     &.disableNotic {
         :global {
             .van-notice-bar__content {
@@ -200,32 +169,25 @@
         background: linear-gradient(180deg, #FFFFFF 0%, #BFE1FF 100%);
         transform: scale(1.05);
         box-shadow: 0px 2px 4px 0px rgba(73, 159, 228, 1);
-
-        // &::after {
-        //     animation: displayIcon 0.1s forwards;
-        //     animation-delay: .2s;
-        // }
     }
 
     .musicAvtor {
         display: block;
-        width: 47px;
-        height: 47px;
-        border-radius: 18px;
+        width: 8.2vw;
+        height: 8.2vw;
+        border-radius: 8Px;
         object-fit: cover;
         flex-shrink: 0;
-        margin-right: 9px;
+        margin-right: 1vw;
     }
 
     .musicInfo {
         flex: 1;
 
         .musicName {
-            font-size: 15px;
             font-weight: 600;
             color: #333;
-            line-height: 20px;
-
+            margin-bottom: 3px;
         }
 
         .noticeBar {