style:样式切换

web/src/assets/css/suno.styl

@@ -1,7 +1,7 @@
 .page-suno {
   display flex
   height 100%
-  background-color #0E0808
+  // background-color #0E0808
   overflow auto
 
   .left-bar {
@@ -24,7 +24,7 @@
 
     .params {
       padding 20px 0
-      color rgb(250 247 245)
+      color: var(--text-theme-color);
       position relative
 
       .pure-music {
@@ -77,6 +77,7 @@
             opacity: 0.9;
           }
         }
+        
 
         .song {
           display flex
@@ -137,6 +138,8 @@
           bottom 10px
           font-size 12px
           padding 2px 5px
+          background-color var(--sm-btn-bg)
+    color: #fff
         }
       }
 
@@ -154,12 +157,16 @@
           .tag {
             margin-right 10px
             word-break keep-all
-            background-color #312C2C
-            color #e1e1e1
-            border-radius 5px
+            background: var(--card-bg);
+            color:var(--theme-text-color-primary);
+            opacity 0.7
+            border-radius 8px
             padding 3px 6px
             cursor pointer
             font-size 13px
+            &:hover{
+              color:var( --el-color-primary)
+            }
           }
         }
       }
@@ -169,6 +176,8 @@
     width 100%
     color rgb(250 247 245)
     overflow auto
+    background: var(--chat-bg)
+
 
     .list-box {
       padding 0 0 0 20px
@@ -180,7 +189,7 @@
         margin-bottom 10px
 
         &:hover {
-          background-color #2A2525
+         background: rgba(188,149,236,0.08)
         }
 
         .left {
@@ -247,18 +256,18 @@
             font-weight 700
 
             a {
-              color rgb(250 247 245)
+              color vae( --a-link-color)
               &:hover {
                 text-decoration underline
               }
             }
 
             .model {
-              color #E2E8F0
-              background-color #1C1616
-              border 1px solid #8f8f8f
+              color #8f8f8f
+              // background-color #1C1616
+              // border 1px solid #8f8f8f
               font-weight normal
-              font-size 14px
+              font-size 12px
               padding 1px 3px
               border-radius 5px
               margin-left 10px
@@ -271,7 +280,7 @@
 
           .tags {
             font-size 14px
-            color #d1d1d1
+            color var(--el-text-color-primary)
             padding 3px 0
           }
         }
@@ -303,8 +312,9 @@
               color #726E6C
 
               &:hover {
-                background #5f5958
-                color #e1e1e1
+                // background #5f5958
+                // color #e1e1e1
+                color:var(--el-color-primary)
               }
 
               .downloading {
@@ -372,14 +382,25 @@
 
   .btn {
     margin-right 10px
-    background-color #363030
+    color: #000
     border none
     border-radius 5px
     padding 5px 10px
     cursor pointer
+    
 
     &:hover {
-      background-color #5F5958
+      opacity :0.8
     }
   }
+}
+.submit-btn {
+  display flex
+  align-items: center
+  margin: 20px 0
+  justify-content: center;
+  .el-button {
+    width 200px
+  }
+
 }