高级搜索

src/pages/classList/index.module.scss

@@ -15,6 +15,8 @@
             color: $color_font_three;
             .text_one{
                 color: $color_main;
+                display: flex;
+                align-items: center;
             }
             .text_two{
                 position: relative;
@@ -33,20 +35,11 @@
                 }
             }
         }
-        .filter_btn{
+        .filter_btns{
             display: flex;
             justify-content: space-between;
             padding: 20px;
-            view{
-                font-size: $font_size_medium;
-                background-color: #F0F0F0;
-                border-radius: 24px;
-                width: 126px;
-                height: 46.93px;
-                text-align: center;
-                line-height: 46.93px;
-                color: $color_font_three;
-            }
+            
             .selected{
                 background-color: #ecf5ff;
                 border: 2px solid #cde5ff;

src/pages/classList/index.tsx

@@ -7,9 +7,22 @@ import Popup from "@/components/popup";
 import styles  from './index.module.scss'
 import { useState } from "react";
 import Filter from "./components/filter";
+import Tabs from "@/components/tabs";
+import SortBtn from "@/components/sortBtn";
 
 export default () => {
     const [showPopup, setShowPopup] = useState(false)
+    const [selectList, setSelectList] = useState([
+        {title: '系列', value:1},
+        {title: '系列', value:2},
+        {title: '系列', value:3},
+        {title: '系列', value:4},
+        {title: '系列', value:6},
+        {title: '系列', value:7},
+        {title: '系列', value:8},
+        {title: '系列', value:9},
+        {title: '系列', value:10},
+    ])
     return (
         <View className={styles.main}>
             <View className={styles.search}>
@@ -17,17 +30,17 @@ export default () => {
             </View>
             <View className={styles.filter}>
                 <View className={styles.filter_all}>
-                    <View className={styles.text_one}>综合</View>
+                    <View className={styles.text_one}>
+                        <Text>综合</Text>
+                        <SortBtn status="top"/>
+                    </View>
                     <View className={styles.text_two} onClick={() => setShowPopup(true)}>
                         <Text>筛选</Text>
                         <Text className={classnames('iconfont icon-bianji_bianji', styles.miconfont)}></Text>
                     </View>
                 </View>
-                <View className={styles.filter_btn}>
-                    <View>系列</View>
-                    <View>幅宽</View>
-                    <View>克重</View>
-                    <View className={styles.selected}>成分</View>
+                <View className={styles.filter_btns}>
+                    <Tabs list={selectList} style={{}}/>
                 </View>
             </View>
             <View className={styles.list}>