修改样式

src/components/col-search/index.module.less

@@ -12,6 +12,11 @@
       padding: 0.13333rem var(--van-padding-xs) 0.13333rem 0 !important;
       background: transparent !important;
     }
+
+
+    .van-field__clear {
+      color: #C1BDC1 !important;
+    }
   }
 }
 

src/styles/index.less

@@ -118,6 +118,10 @@ body {
   margin-bottom: 12px !important;
 }
 
+.mt8 {
+  margin-top: 8px !important;
+}
+
 .btnGroup {
   padding: 0 28px;
   padding-bottom: 15px;
@@ -182,4 +186,4 @@ body {
   --music-list-item-free-color: #ff4700;
   --music-list-item-charge-bg: #e1f0ff;
   --music-list-item-charge-color: #0086ff;
-}
+}

src/styles/tenant.less

@@ -6,6 +6,12 @@
   --tag-color: #FE2451;
 }
 
+/* 以下是使用颜色关键字的代码 */
+progress::-webkit-progress-value {
+  background-color: #FE2451;
+}
+
+
 body {
   background-color: #fafafa;
   user-select: none;
@@ -16,12 +22,6 @@ body {
   justify-content: space-between !important;
 }
 
-
-/* 以下是使用颜色关键字的代码 */
-progress::-webkit-progress-value {
-  background-color: #FE2451;
-}
-
 input,
 textarea {
   caret-color: #FE2451;

src/tenant/music/album-detail/index.module.less

@@ -173,7 +173,7 @@
 .bg {
   position: relative;
   height: 100%;
-  padding: 5px 16px 12px;
+  padding: 5px 16px 18px;
   z-index: 11;
 }
 
@@ -201,7 +201,7 @@
     width: calc(100% - 129px);
 
     .des {
-      color: #999;
+      color: rgba(255, 255, 255, 0.5);
       line-height: 16px;
     }
   }
@@ -236,9 +236,9 @@
     justify-content: center;
     width: 32%;
     height: 36px;
-    font-size: 15px;
+    font-size: 14px;
     color: #fff;
-    background-color: rgba(255, 255, 255, 0.5);
+    background-color: rgba(255, 255, 255, 0.2);
     border-radius: 99px;
     font-weight: 600;
 
@@ -307,6 +307,7 @@
       font-size: 12px;
       color: #808593;
       padding-left: 3px;
+      font-weight: 400;
     }
   }
 }

src/tenant/music/album-detail/index.tsx

@@ -297,7 +297,10 @@ export default defineComponent({
                 class={styles.alumCollectItem}
                 onClick={() =>
                   router.push({
-                    path: '/music-album'
+                    path: '/look-album-list',
+                    query: {
+                      id: route.params.id
+                    }
                   })
                 }
               >

src/tenant/music/component/music-grid/index.module.less

@@ -19,8 +19,8 @@
     margin-bottom: 14px;
 
     .title {
-      font-size: 14px;
-      color: #333;
+      font-size: 13px;
+      color: #131415;
       line-height: 20px;
       overflow: hidden;
       text-overflow: ellipsis;
@@ -37,7 +37,7 @@
 
   .imgWrap {
     position: relative;
-    height: 104px;
+    height: 88px;
     // height: calc((100vw - 28px) / 3);
     border-radius: 10px;
     overflow: hidden;

src/tenant/music/component/song/index.module.less

@@ -52,7 +52,8 @@
     .top {
       display: flex;
       align-items: center;
-      margin-bottom: 10px;
+      margin-bottom: 4px;
+      padding-top: 1px;
     }
 
     .tag {
@@ -65,6 +66,10 @@
       margin-left: 6px;
     }
 
+    .tag:last-child {
+      margin-left: 6px;
+    }
+
     .user {
       display: flex;
       align-items: center;
@@ -73,8 +78,7 @@
         font-size: 13px;
         color: #999;
         line-height: 16px;
-        margin-left: 6px;
-        padding-top: 2px;
+        // padding-top: 2px;
         max-width: 120px;
         white-space: nowrap;
         overflow: hidden;
@@ -88,9 +92,11 @@
         color: #FE2451;
         padding: 2px 6px;
         transform: scale(0.9);
+        margin-right: 6px;
       }
 
       .tags {
+
         &>span {
           display: inline-block;
           background: #FFEAF2;

src/tenant/music/search/all-search.module.less

@@ -2,7 +2,7 @@
   background: url('../../images/album-bg.png') no-repeat top center #fff;
   background-size: contain;
   border-radius: 16px;
-  margin: 12px 13px;
+  margin: 8px 13px;
   padding: 12px 12px 0;
 
   .albumTitle {
@@ -11,6 +11,14 @@
     color: #131415;
     line-height: 22px;
     padding-bottom: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .iconArrow {
+    font-size: 12px;
+    color: #877C81;
   }
 }
 

src/tenant/music/search/all-search.tsx

@@ -4,6 +4,7 @@ import { useRoute, useRouter } from 'vue-router'
 import MusicGrid from '../component/music-grid'
 import request from '@/helpers/request'
 import MusicSwiper from './music-swiper'
+import { Icon } from 'vant'
 
 export default defineComponent({
   name: 'MusicSearch',
@@ -44,7 +45,19 @@ export default defineComponent({
     return () => (
       <div class={styles.allSearch}>
         <div class={styles.albumSection}>
-          <div class={styles.albumTitle}>热门专辑</div>
+          <div class={styles.albumTitle}>
+            <p>热门专辑</p>
+
+            <Icon
+              name="arrow"
+              class={styles.iconArrow}
+              onClick={() => {
+                router.push({
+                  path: '/music-album'
+                })
+              }}
+            />
+          </div>
           <div class={styles.musicGrid}>
             <MusicGrid
               list={state.albumList}

src/tenant/music/search/header.tsx

@@ -30,6 +30,7 @@ import { state } from '@/state'
 import TheSticky from '@/components/the-sticky'
 import bgImg from '../../images/bg-image-search.png'
 import iconSearch from './icon-search.png'
+import iconDelete from './icon-delete.png'
 import request from '@/helpers/request'
 import { browser } from '@/helpers/utils'
 import ColHeader from '@/components/col-header'
@@ -230,7 +231,7 @@ export default defineComponent({
             }
 
             if (!collapse.arrowStatus) {
-              if (collapse.line > 2) {
+              if (collapse.line > 1) {
                 //从第3行开始 隐藏标签
                 item.$el.style.display = 'none'
               } else {
@@ -286,25 +287,14 @@ export default defineComponent({
                 type="tenant"
                 v-slots={{
                   left: () => (
-                    // <div
-                    //   class={styles.label}
-                    //   onClick={() => (subject.show = true)}
-                    // >
-                    //   {subject.name}
-                    //   <Icon
-                    //     classPrefix="iconfont"
-                    //     name="down"
-                    //     size={12}
-                    //     color="#333"
-                    //   />
-                    // </div>
                     <DropdownMenu>
                       <DropdownItem
-                        titleClass={styles.titleActive}
-                        title="筛选"
+                        // titleClass={styles.titleActive}
+                        title={subject.name}
                         ref={searchRef}
                       >
                         <SelectSubject
+                          isReset
                           searchParams={subject}
                           onComfirm={onComfirmSubject}
                         />
@@ -352,7 +342,7 @@ export default defineComponent({
                 <span class={styles.t}>搜索历史</span>
                 <Icon
                   class={styles.remove}
-                  name="delete-o"
+                  name={iconDelete}
                   onClick={() => (words.value = [])}
                 />
               </div>
@@ -372,7 +362,7 @@ export default defineComponent({
                       {item}
                     </Tag>
                   ))}
-                  {collapse.line > 2 && (
+                  {collapse.line > 1 && (
                     <span
                       class={[styles.arrowMore]}
                       onClick={() => {

src/tenant/music/search/index.module.less

@@ -49,7 +49,10 @@
 
       .van-dropdown-item__content {
         border-radius: 0px 0px 20px 20px;
+      }
 
+      .van-dropdown-menu__title--active::after {
+        border-color: transparent transparent #FE2451 #FE2451;
       }
     }
 
@@ -153,7 +156,7 @@
   :global {
     .van-sticky {
       background: url('../../images/bg-image-search.png') no-repeat top center;
-      background-size: 100% 214px;
+      background-size: 100% 261px;
       box-shadow: none !important;
     }
 
@@ -169,7 +172,7 @@
       }
 
       .van-field__clear {
-        color: rgba(0, 0, 0, 0.4) !important;
+        color: #C1BDC1 !important;
       }
     }
 
@@ -181,7 +184,7 @@
   top: 0;
   left: 0;
   width: 100%;
-  height: 214px;
+  height: 261px;
   // object-fit: cover;
   z-index: -1;
 }
@@ -214,6 +217,23 @@
       bottom: 22px;
     }
 
+    .van-tabs__nav--line.van-tabs__nav--shrink,
+    .van-tabs__nav--line.van-tabs__nav--complete {
+      padding-left: 0;
+      padding-right: 0;
+    }
+
+    .van-tab--shrink {
+      padding: 0 15px 0 9px;
+    }
+  }
+}
+
+.alubmGroupSearch {
+  :global {
+    .van-list>div {
+      margin-top: 8px;
+    }
   }
 }
 
@@ -243,6 +263,7 @@
   .swipeChild {
     background: url('../../images/music-bg.png') no-repeat top center #fff;
     background-size: contain;
+    border-radius: 10px;
   }
 
   .swipeTitle {
@@ -332,7 +353,7 @@
   .searchItem {
     display: flex;
     align-items: center;
-    padding: 0 12px 20px;
+    padding: 0 12px 32px;
 
     .rName {
       width: 90%;

src/tenant/music/search/index.tsx

@@ -91,17 +91,19 @@ export default defineComponent({
             />
           )}
           {activeTab.value === 'album' && (
-            <AlbumList
-              hideSearch
-              ref={albumList}
-              defauleParams={{
-                albumTagIds: tagids.value,
-                subjectIds: subject.value
-              }}
-            />
+            <div class={styles.alubmGroupSearch}>
+              <AlbumList
+                hideSearch
+                ref={albumList}
+                defauleParams={{
+                  albumTagIds: tagids.value,
+                  subjectIds: subject.value
+                }}
+              />
+            </div>
           )}
           {activeTab.value === 'songe' && (
-            <div class={styles.musicGroup}>
+            <div class={[styles.musicGroup, 'mt8']}>
               <MusicSwiper
                 defauleParams={{
                   musicTagIds: tagids.value,

src/tenant/music/search/result-all-search.tsx

@@ -66,7 +66,7 @@ export default defineComponent({
         {state.albumList.length > 0 && (
           <div class={[styles.albumSection, styles.searchAllTitle]}>
             <div class={styles.albumTitle}>
-              <span>热门专辑</span>
+              <span>专辑</span>
 
               <span
                 class={styles.more}

src/tenant/music/search/search-result.tsx

@@ -91,20 +91,22 @@ export default defineComponent({
             />
           )}
           {activeTab.value === 'album' && (
-            <AlbumList
-              hideSearch
-              showLight
-              lightText={keyword.value as any}
-              ref={albumList}
-              defauleParams={{
-                search: keyword.value,
-                albumTagIds: tagids.value,
-                subjectIds: subject.value
-              }}
-            />
+            <div class="mt12">
+              <AlbumList
+                hideSearch
+                showLight
+                lightText={keyword.value as any}
+                ref={albumList}
+                defauleParams={{
+                  search: keyword.value,
+                  albumTagIds: tagids.value,
+                  subjectIds: subject.value
+                }}
+              />
+            </div>
           )}
           {activeTab.value === 'songe' && (
-            <div class={styles.musicGroup}>
+            <div class={[styles.musicGroup]}>
               <MusicList
                 hideSearch
                 showLight

src/tenant/music/search/select-subject.module.less

@@ -16,6 +16,7 @@
     .van-button {
       font-size: 16px;
       line-height: 22px;
+      font-weight: bold;
     }
   }
 }
@@ -29,7 +30,7 @@
     color: #333333;
     line-height: 22px;
     font-size: 15px;
-    font-weight: 600;
+    font-weight: 600 !important;
   }
 }
 

vite.config.ts

@@ -12,7 +12,7 @@ function resolve(dir: string) {
 // https://vitejs.dev/config/
 // https://github.com/vitejs/vite/issues/1930 .env
 // const proxyUrl = 'https://online.colexiu.com/';
-const proxyUrl = 'https://dev.colexiu.com/'
+const proxyUrl = 'https://test.colexiu.com/'
 // const proxyUrl = 'http://192.168.3.143:8000/'
 export default defineConfig({
   base: './',