更新

src/views/music/list/index.tsx

@@ -214,82 +214,83 @@ export default defineComponent({
       return (
         <>
           {!hideSearch && (
-            <Sticky class={styles.sticky}>
-              <ColHeader
-                background="transparent"
-                isFixed={false}
-                border={false}
-                backIconColor="white"
-                color="#fff"
-                v-slots={{
-                  right: () => (
-                    <span
-                      class={styles.fleg}
-                      onClick={() => {
-                        exquisiteFlag.value != exquisiteFlag.value
-                        data.value = null
-                        params.page = 1
-                        FetchList()
-                      }}
-                    >
-                      <span>精品</span>
-                      <Switch v-model={exquisiteFlag.value} size="20px" />
-                    </span>
-                  )
-                }}
-              />
-              <Search
-                onSearch={onSearch}
-                background="transparent"
-                inputBackground="transparent"
-                leftIcon={iconSearch}
-                v-slots={{
-                  left: () => (
-                    <div
-                      class={styles.label}
-                      onClick={() => (subject.show = true)}
-                    >
-                      {subject.name}
-                      <Icon
-                        classPrefix="iconfont"
-                        name="down"
-                        size={12}
-                        color="#fff"
-                      />
-                    </div>
-                  )
-                }}
-              />
-              <Tabs
-                shrink
-                class={styles.tagTabs}
-                lineHeight={0}
-                onClick-tab={(obj: any) => {
-                  params.albumTagIds = obj.name
-                  data.value = null
-                  params.page = 1
-                  FetchList()
-                }}
-              >
-                <Tab title="全部" name=""></Tab>
-                {tagList.map((tag: any) => (
-                  <Tab title={tag.name} name={tag.id}></Tab>
-                ))}
-              </Tabs>
-            </Sticky>
+            <>
+              {' '}
+              <Sticky class={styles.sticky}>
+                <ColHeader
+                  background="transparent"
+                  isFixed={false}
+                  border={false}
+                  backIconColor="white"
+                  color="#fff"
+                  v-slots={{
+                    right: () => (
+                      <span
+                        class={styles.fleg}
+                        onClick={() => {
+                          exquisiteFlag.value != exquisiteFlag.value
+                          data.value = null
+                          params.page = 1
+                          FetchList()
+                        }}
+                      >
+                        <span>精品</span>
+                        <Switch v-model={exquisiteFlag.value} size="20px" />
+                      </span>
+                    )
+                  }}
+                />
+                <Search
+                  onSearch={onSearch}
+                  background="transparent"
+                  inputBackground="transparent"
+                  leftIcon={iconSearch}
+                  v-slots={{
+                    left: () => (
+                      <div
+                        class={styles.label}
+                        onClick={() => (subject.show = true)}
+                      >
+                        {subject.name}
+                        <Icon
+                          classPrefix="iconfont"
+                          name="down"
+                          size={12}
+                          color="#fff"
+                        />
+                      </div>
+                    )
+                  }}
+                />
+                <Tabs
+                  shrink
+                  class={styles.tagTabs}
+                  lineHeight={0}
+                  onClick-tab={(obj: any) => {
+                    params.musicTagIds = obj.name
+                    data.value = null
+                    params.page = 1
+                    FetchList()
+                  }}
+                >
+                  <Tab title="全部" name=""></Tab>
+                  {tagList.map((tag: any) => (
+                    <Tab title={tag.name} name={tag.id}></Tab>
+                  ))}
+                </Tabs>
+              </Sticky>
+              <img class={styles.bgImg} src={bgImg} />
+            </>
           )}
-          <img class={styles.bgImg} src={bgImg} />
-          <List
-            loading={loading.value}
-            finished={finished.value}
-            finished-text={
-              data.value && data.value.rows.length ? '没有更多了' : ''
-            }
-            onLoad={FetchList}
-            error={isError.value}
-          >
-            {data.value && data.value.rows.length ? (
-              <div class={styles.alumnList}>
+          <div class={styles.alumnList}>
+            <List
+              loading={loading.value}
+              finished={finished.value}
+              finished-text={data.value && data.value.rows.length ? '' : ''}
+              onLoad={FetchList}
+              error={isError.value}
+            >
+              {data.value && data.value.rows.length ? (
                 <Song
                   list={data.value.rows}
                   onDetail={(item: any) => {
@@ -300,17 +301,17 @@ export default defineComponent({
                     }
                   }}
                 />
-              </div>
-            ) : (
-              !loading.value && (
-                <ColResult
-                  tips="暂无曲目"
-                  classImgSize="SMALL"
-                  btnStatus={false}
-                />
-              )
-            )}
-          </List>
+              ) : (
+                !loading.value && (
+                  <ColResult
+                    tips="暂无曲目"
+                    classImgSize="SMALL"
+                    btnStatus={false}
+                  />
+                )
+              )}
+            </List>
+          </div>
           <Popup
             show={tagVisibility.value}
             round

src/views/music/music-detail/index.module.less

@@ -86,6 +86,76 @@
   }
 }
 
+.collectCell {
+  margin: 10px 16px 0;
+  background: #ffffff;
+  border-radius: 10px;
+  box-shadow: 0px 0px 6px 0px rgba(229, 229, 229, 0.7);
+}
+.videoOperation {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 5px;
+  z-index: 1;
+}
+.audition {
+  display: flex;
+  align-items: center;
+  margin: 10px 16px 0;
+  background: linear-gradient(180deg, #fff0d9 0%, #ffdfb8 100%);
+  border-radius: 16px;
+  padding: 7px 12px;
+  font-size: 12px;
+  font-weight: 600;
+  color: #ff731d;
+  height: 18px;
+  img {
+    margin-top: -2px;
+    width: 21px;
+    height: 15px;
+    margin-right: 11px;
+  }
+}
+.collect {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 11px;
+  font-size: 14px;
+  color: #666666;
+  .userInfo {
+    display: flex;
+    align-items: center;
+    padding: 3px 6px;
+    background: #d5f3ee;
+    border-radius: 16px;
+    img {
+      width: 26px;
+      height: 26px;
+      border-radius: 50%;
+    }
+    span {
+      padding-left: 8px;
+      max-width: 120px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      color: #2dc7aa;
+    }
+  }
+  .collectSection {
+    display: flex;
+    align-items: center;
+    img {
+      margin-top: -2px;
+      margin-left: 11px;
+      width: 18px;
+      height: 18px;
+    }
+  }
+}
+
 .bg {
   position: relative;
   height: 100%;

src/views/music/music-detail/index.tsx

@@ -27,6 +27,7 @@ import AstronautJSON from './animate/bigLoad.json'
 import ColShare from '@/components/col-share'
 import iconCollect from './images/icon_collect.png'
 import iconCollectActive from './images/icon_collect_active.png'
+import iconListen from './images/icon_listen.png'
 
 export const getAssetsHomeFile = (fileName: string) => {
   const path = `../component/images/${fileName}`
@@ -326,20 +327,28 @@ export default defineComponent({
               )}
 
               <div class={styles.videoOperation}>
+                <div class={[styles.audition]}>
+                  <img src={iconListen} />
+                  <span>每首曲目可试听30%</span>
+                </div>
+
                 <div class={[styles.collect, styles.collectCell]}>
-                  <div class={styles.userInfo}>
+                  <div class={[styles.userInfo]}>
                     <img src="" />
                     <span>用户名</span>
                   </div>
 
-                  <div class={styles.collectSection}>
+                  <div class={[styles.collectSection]}>
                     <span>326人收藏</span>
                     <img src={iconCollect} />
                   </div>
                 </div>
               </div>
+            </div>
 
-              <div class={styles.lookAlbum}></div>
+            <div class={[styles.lookAlbum, styles.collectCell]}>
+              <div class="">进入曲目所在专辑列表</div>
+              <Icon name="arrow" />
             </div>
           </div>
 

src/views/music/search/header.tsx

@@ -127,11 +127,11 @@ export default defineComponent({
           <Sticky class={styles.sticky}>
             <Search
               modelValue={keyword.value}
-              showAction
+              // showAction
               ref={searchInputRef}
               onSearch={onSearch}
-              onFilter={() => (tagVisibility.value = true)}
-              filterDot={!!tagids.value}
+              // onFilter={() => (tagVisibility.value = true)}
+              // filterDot={!!tagids.value}
               onClick={() => {
                 if (route.path === '/music-songbook') {
                   router.push({