修改专辑页面样式

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

@@ -48,14 +48,26 @@
   }
 
   &.col-tenant-search {
+    --van-cell-line-height: 34px;
+
     &.default {
       :global {
         .van-search__content {
           background: #f5f6f8;
+          border: 1px solid #fff;
+
+        }
+
+        .van-search__field {
+          padding: 0 3px 0 0 !important
         }
 
         .van-field__control {
-          color: #aaa;
+          color: #333 !important;
+        }
+
+        input::placeholder {
+          color: rgba(0, 0, 0, 0.4);
         }
       }
     }
@@ -101,8 +113,6 @@
     &.searchTenantBtn {
       background: linear-gradient(270deg, #FF3C81 0%, #FF76A6 100%);
       border: none;
-
-
     }
   }
 }

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

@@ -31,6 +31,26 @@
       .van-field__clear {
         color: rgba(0, 0, 0, 0.4) !important;
       }
+
+    }
+
+    .van-dropdown-menu__bar {
+      background-color: transparent;
+      box-shadow: none;
+      padding-right: 15px;
+    }
+
+    .van-dropdown-menu__title {
+      padding-left: 0
+    }
+
+    .van-dropdown-menu__title:after {
+      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;
+
     }
   }
 }

src/tenant/music/album/index.tsx

@@ -1,5 +1,15 @@
 import { defineComponent, reactive, ref } from 'vue'
-import { Sticky, List, Popup, Icon, Tabs, Tab, Image } from 'vant'
+import {
+  Sticky,
+  List,
+  Popup,
+  Icon,
+  Tabs,
+  Tab,
+  Image,
+  DropdownMenu,
+  DropdownItem
+} from 'vant'
 import Search from '@/components/col-search'
 import request from '@/helpers/request'
 import Item from './item'
@@ -172,10 +182,12 @@ export default defineComponent({
       tagVisibility.value = false
     }
 
+    const searchRef = ref()
     const onComfirmSubject = item => {
       params.page = 1
       params.subjectIds = item.id
 
+      searchRef.value.toggle()
       data.value = null
       if (baseState.platformType === 'TEACHER') {
         teacherDetaultSubject.value = {
@@ -217,11 +229,9 @@ export default defineComponent({
       return (
         <div>
           <List
-            loading={loading.value}
+            // loading={loading.value}
             finished={finished.value}
-            finished-text={
-              data.value && data.value.rows.length ? '没有更多了' : ''
-            }
+            finished-text={data.value && data.value.rows.length ? ' ' : ''}
             onLoad={FetchList}
             error={isError.value}
           >
@@ -245,20 +255,44 @@ export default defineComponent({
                             background="transparent"
                             v-slots={{
                               left: () => (
-                                <div
-                                  class={styles.label}
-                                  onClick={() => (subject.show = true)}
-                                >
-                                  {baseState.platformType === 'TEACHER'
-                                    ? teacherDetaultSubject.value.name
-                                    : subject.name}
-                                  <Icon
-                                    classPrefix="iconfont"
-                                    name="down"
-                                    size={12}
-                                    color="#333"
-                                  />
-                                </div>
+                                // <div
+                                //   class={styles.label}
+                                //   onClick={() => (subject.show = true)}
+                                // >
+                                //   {baseState.platformType === 'TEACHER'
+                                //     ? teacherDetaultSubject.value.name
+                                //     : subject.name}
+                                //   <Icon
+                                //     classPrefix="iconfont"
+                                //     name="down"
+                                //     size={12}
+                                //     color="#333"
+                                //   />
+                                // </div>
+                                <DropdownMenu>
+                                  <DropdownItem
+                                    titleClass={
+                                      params.subjectId ||
+                                      params.type ||
+                                      params.level
+                                        ? styles.titleActive
+                                        : ''
+                                    }
+                                    title="筛选"
+                                    ref={searchRef}
+                                  >
+                                    <SelectSubject
+                                      type="ALBUM"
+                                      isReset
+                                      searchParams={
+                                        baseState.platformType === 'TEACHER'
+                                          ? teacherDetaultSubject.value
+                                          : subject
+                                      }
+                                      onComfirm={onComfirmSubject}
+                                    />
+                                  </DropdownItem>
+                                </DropdownMenu>
                               )
                             }}
                           />
@@ -356,40 +390,6 @@ export default defineComponent({
               )
             )}
           </List>
-          {/* <Popup
-            show={tagVisibility.value}
-            round
-            closeable
-            position="bottom"
-            style={{ height: '60%' }}
-            teleport="body"
-            onUpdate:show={val => (tagVisibility.value = val)}
-          >
-            <SelectTag
-              defaultValue={route.query.tagids as string}
-              onConfirm={onComfirm}
-              onCancel={() => {}}
-            />
-          </Popup> */}
-          <Popup
-            show={subject.show}
-            position="bottom"
-            round
-            closeable
-            safe-area-inset-bottom
-            onClose={() => (subject.show = false)}
-            onClosed={() => (subject.show = false)}
-          >
-            <SelectSubject
-              type="ALBUM"
-              searchParams={
-                baseState.platformType === 'TEACHER'
-                  ? teacherDetaultSubject.value
-                  : subject
-              }
-              onComfirm={onComfirmSubject}
-            />
-          </Popup>
         </div>
       )
     }

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

@@ -47,11 +47,13 @@
       position: absolute;
       left: 0;
       top: 0;
-      background: linear-gradient(180deg, #ff8900 0%, #ff5100 100%);
-      box-shadow: 0px 1px 2px 0px rgba(150, 13, 0, 0.11);
+      // background: linear-gradient(180deg, #ff8900 0%, #ff5100 100%);
+      background: linear-gradient(to right, #FF3760 0%, #FF7857 100%);
+      ;
+      // box-shadow: 0px 1px 2px 0px rgba(150, 13, 0, 0.11);
       border-radius: 10px 0px 10px 0px;
       font-size: 12px;
-      padding: 0 6px;
+      padding: 1px 6px 0;
       line-height: 20px;
       color: #ffffff;
       z-index: 9;

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

@@ -7,22 +7,35 @@
   padding: 20px 0;
 }
 
+.btnGroup {
+  padding: 18px 13px;
+  border: 1px solid #F2F2F2;
+
+  :global {
+    .van-button {
+      font-size: 16px;
+      line-height: 22px;
+    }
+  }
+}
+
 .searchResult {
-  padding: 0 16px;
+  padding: 15px 16px 0;
   overflow: hidden;
-  margin-bottom: 20px;
+  // margin-bottom: 20px;
 
   .searchTitle {
-    font-size: 16px;
     color: #333333;
     line-height: 22px;
+    font-size: 15px;
+    font-weight: 600;
   }
 }
 
 .radio-group {
   display: flex;
-  margin-top: 10px;
-  margin-bottom: 20px;
+  margin-top: 12px;
+  margin-bottom: 15px;
   flex-wrap: wrap;
 
   .radio:first-child {
@@ -55,12 +68,17 @@
     }
 
     .van-tag--default {
-      color: var(--van-tag-text-default-color);
+      // color: var(--van-tag-text-default-color);
+      color: #333333;
     }
 
     .van-tag--primary {
       background-color: #fff;
     }
+
+    .van-tag--primary.van-tag--plain {
+      background: #FFF3F5;
+    }
   }
 }
 
@@ -68,6 +86,7 @@
   :global {
     .van-tag--large {
       width: auto;
+      min-width: 80px;
       padding: 0 12px;
       margin-bottom: 8px;
       margin-right: 8px;

src/tenant/music/search/select-subject.tsx

@@ -60,7 +60,7 @@ export default defineComponent({
   render() {
     return (
       <>
-        <div class={styles.filterTitle}>全部声部</div>
+        {/* <div class={styles.filterTitle}>全部声部</div> */}
         <div
           class={styles.searchResult}
           style={{ maxHeight: '45vh', overflowY: 'auto' }}
@@ -101,7 +101,7 @@ export default defineComponent({
           )}
         </div>
         <Sticky position="bottom" offsetBottom={0}>
-          <div class={['btnGroup', this.isReset ? 'btnMore' : '']}>
+          <div class={[styles.btnGroup, this.isReset ? 'btnMore' : '']}>
             {this.isReset && (
               <Button
                 type="primary"

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

@@ -327,27 +327,6 @@ export default defineComponent({
               )}
             </List>
           </div>
-
-          {/* 声部弹框 */}
-          {/* <Popup
-            show={subject.show}
-            position="bottom"
-            round
-            closeable
-            safe-area-inset-bottom
-            onClose={() => (subject.show = false)}
-            onClosed={() => (subject.show = false)}
-          >
-            <SelectSubject
-              type="MUSIC"
-              searchParams={
-                baseState.platformType === 'TEACHER'
-                  ? teacherDetaultSubject.value
-                  : subject
-              }
-              onComfirm={onComfirmSubject}
-            />
-          </Popup> */}
         </>
       )
     }