Selaa lähdekoodia

云教练下拉菜单和箭头

skyblued 2 vuotta sitten
vanhempi
commit
d3ed3dd84b
2 muutettua tiedostoa jossa 23 lisäystä ja 33 poistoa
  1. 16 2
      src/views/accompany/index.module.less
  2. 7 31
      src/views/accompany/music-list.tsx

+ 16 - 2
src/views/accompany/index.module.less

@@ -53,9 +53,18 @@
       .van-dropdown-menu__bar {
         box-shadow: none;
       }
+      .van-dropdown-menu__title{
+        font-size: 14px;
+        font-weight: 400;
+        color: #333;
+        font-family: PingFangSC-Regular, PingFang SC;
+      }
       .van-dropdown-menu__title:after {
-        border: 0.11rem solid;
-        border-color: transparent transparent var(--van-gray-4) var(--van-gray-4);
+        top: 46%;
+        right: -8Px;
+        border-width: 5Px;
+        border-radius: 2.2Px;
+        --van-gray-4: #aaa;
       }
     }
   }
@@ -63,13 +72,18 @@
   .filter {
     display: flex;
     align-items: center;
+    justify-content: center;
     height: 60px;
     background-color: #f8f8f8;
     :global {
       .van-search {
         flex: 1;
         padding: 0 12px;
+        .van-search__content{
+          background: #fff !important;
+        }
       }
+      
       .van-search__field {
         background-color: #fff;
         border-radius: 20px 0 0 20px;

+ 7 - 31
src/views/accompany/music-list.tsx

@@ -23,6 +23,7 @@ import { useRoute, useRouter } from 'vue-router'
 import { getImage } from './images'
 import styles from './index.module.less'
 import OSticky from '@/components/o-sticky'
+import OSearch from '@/components/o-search'
 
 export default defineComponent({
   name: 'accompany-music-list',
@@ -170,7 +171,7 @@ export default defineComponent({
           }}
         >
           <div>
-            <DropdownMenu>
+            <DropdownMenu activeColor='var(--van-primary)'>
               <DropdownItem
                 v-model:modelValue={data.value1}
                 options={option1.value}
@@ -183,36 +184,11 @@ export default defineComponent({
               ></DropdownItem>
             </DropdownMenu>
             <div class={styles.filter}>
-              <Search
-                placeholder="请输入搜索关键词"
-                background="#F8F8F8"
-                shape="round"
-                showAction={true}
-                v-model:modelValue={data.keyword}
-              >
-                {{
-                  // label: () => (
-                  //   <Popover
-                  //     v-model:show={data.PopoverOpen}
-                  //     actions={actions}
-                  //     placement="bottom-start"
-                  //   >
-                  //     {{
-                  //       reference: () => (
-                  //         <div>
-                  //           长笛 <Icon name="arrow" />
-                  //         </div>
-                  //       )
-                  //     }}
-                  //   </Popover>
-                  // ),
-                  action: () => (
-                    <div class={styles.searchBtn} onClick={() => onSearch()}>
-                      搜索
-                    </div>
-                  )
-                }}
-              </Search>
+              <OSearch style={{width: '100%'}} background='transparent' onSearch={(keyword: string) => {
+                data.keyword = keyword
+                onSearch()
+              }} />
+              
             </div>
           </div>
         </OSticky>