样式修改

src/router/routes-tenant.ts

@@ -178,7 +178,7 @@ export default [
         path: '/train-tool',
         component: () => import('@/tenant/music/train-tool'),
         meta: {
-          title: '训练工具'
+          title: '训练教程'
         }
       },
       {

src/tenant/music/train-list/index.module.less

@@ -32,30 +32,28 @@
     }
 
     .van-dropdown-menu__title {
-      padding-left: 0
+      padding-left: 0;
     }
 
     .van-dropdown-menu__title:after {
-      border-color: transparent transparent rgba(0, 0, 0, 0.4) rgba(0, 0, 0, 0.4);
+      border-color: transparent transparent rgba(0, 0, 0, 0.4)
+        rgba(0, 0, 0, 0.4);
     }
 
     .van-dropdown-item__content {
       border-radius: 0px 0px 20px 20px;
-
     }
 
     .van-haptics-feedback:active {
       opacity: 1 !important;
     }
-
   }
 
   .titleActive {
-    color: #FE2451;
+    color: #fe2451;
   }
 }
 
-
 .albumSearchSection {
   :global {
     .van-dropdown-menu__bar {
@@ -65,19 +63,19 @@
 }
 
 .albumSearchTitle {
-  color: #F41E4B !important;
+  color: #f41e4b !important;
   font-size: 14px !important;
   background-color: #fff !important;
   padding: 2px 21px 0 8px !important;
   border-radius: 30px !important;
 
-  &>div {
+  & > div {
     max-width: 70px;
   }
 
   &::after {
     right: 8px !important;
-    border-color: transparent transparent #F41E4B #F41E4B !important;
+    border-color: transparent transparent #f41e4b #f41e4b !important;
   }
 }
 
@@ -116,7 +114,7 @@
 
   &.albumSearchCellActive {
     border-radius: 10px;
-    background: #FFEAF3;
+    background: #ffeaf3;
 
     .iconSelect {
       background: url('./icons/icon-select.png') no-repeat center;
@@ -160,7 +158,6 @@
   color: #131415;
 
   :global {
-
     .van-list__loading,
     .van-list__finished-text,
     .van-list__error-text {
@@ -217,9 +214,9 @@
     }
 
     .van-tab--active {
-      background: #FF699E;
+      background: #ff699e;
 
-      color: #FFFFFF;
+      color: #ffffff;
 
       .van-tab__text {
         z-index: 1;
@@ -244,7 +241,7 @@
   }
 
   .iconFreeDisable {
-    opacity: .5;
+    opacity: 0.5;
   }
 
   span {
@@ -256,10 +253,12 @@
   padding: 16px 16px 12px;
   overflow: hidden;
   margin-bottom: 20px;
+  border-bottom: 1px solid #f2f2f2;
 
   .searchTitle {
     font-size: 16px;
     color: #333333;
+    font-weight: 600;
     line-height: 22px;
   }
 }
@@ -301,11 +300,12 @@
     }
 
     .van-tag--default {
-      color: var(--van-tag-text-default-color);
+      color: #333333;
+      background: #f6f6f6;
     }
 
     .van-tag--primary {
-      background-color: #fff;
+      background: #fff3f5;
     }
   }
 }
@@ -320,4 +320,16 @@
       font-size: 14px;
     }
   }
-}
+}
+.resetting {
+  border-color: #dbdbdb !important;
+  color: #333333 !important;
+}
+.confirm,
+.resetting {
+  :global {
+    .van-button__text {
+      font-size: 16px;
+    }
+  }
+}

src/tenant/music/train-list/index.tsx

@@ -422,6 +422,7 @@ export default defineComponent({
 
                         <div class={['btnGroup', 'btnMore']}>
                           <Button
+                            class={styles.resetting}
                             type="primary"
                             plain
                             round
@@ -435,7 +436,9 @@ export default defineComponent({
                           </Button>
 
                           <Button
+                            class={styles.confirm}
                             type="primary"
+                            color="linear-gradient( 270deg, #FF204B 0%, #FE5B71 100%)"
                             round
                             block
                             onClick={() => {