diff --git a/src/components/filter/index.module.scss b/src/components/filter/index.module.scss
new file mode 100644
index 0000000..599cdd0
--- /dev/null
+++ b/src/components/filter/index.module.scss
@@ -0,0 +1,126 @@
+.popup_main{
+    width: 608px;
+    height: 100vh;
+    padding: 20px;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    .popup_title{
+        font-size: $font_size;
+        font-weight: 700;
+        text-align: center;
+        padding: 20px 0;
+    }
+    .scroll{
+        flex:1;
+        height: 0;
+    }
+    .popup_filter{
+        padding-bottom: 100px;
+    }
+    .popup_filter_item{
+        margin-bottom: 20px;
+        .title{
+            font-size: $font_size;
+            color: $color_font_one;
+            font-weight: 700;
+            padding: 20px 0;
+        }
+        .btn_list{
+            display: grid;
+            grid-template-columns: repeat(3, 165.75px);
+            justify-content: space-between;
+            .btn_item{
+                width: 165.75px;
+                height: 69.2px;
+                background: #f0f0f0;
+                border-radius: 34px;
+                text-align: center;
+                line-height: 69.2px;
+                font-size: $font_size_medium;
+                color: $color_font_one;
+                margin-bottom: 20px;
+            }
+            .select_btn_item{
+                color: $color_main;
+                background: #ecf5ff;
+                border: 2px solid #007aff;
+                width: 161.75px;
+                height: 65.2px;
+            }
+        }
+        .btn_list_input{
+            display: flex;
+            // justify-content: space-between;
+            align-items: center;
+            .btn_width {
+                width: 220px;
+                height: 70px;
+                background: #f0f0f0;
+                border-radius: 50px;
+                padding: 10px 20px;
+                box-sizing: border-box;
+                input{
+                    width: 100%;
+                    height: 100%;
+                    font-size: $font_size_medium;
+                }
+            }
+            .unit{
+                color: $color_font_one;
+                font-size: $font_size;
+                margin-left: 20px;
+            }
+            text{
+                color: #ccc;
+                padding: 0 20px;
+            }
+            .width_main{
+
+            }
+        }
+        .btn_list_element{
+            background-color: #F0F0F0;
+            border-radius: 30px;
+            padding: 20px;
+            box-sizing: border-box;
+            textarea{
+                width: 100%;
+                height: 126px;
+                font-size: $font_size_medium;
+            }
+        }
+    }
+    .btns_con{
+        width: 100%;
+        position: fixed;
+        bottom:0;
+        padding-bottom: constant(safe-area-inset-bottom); 
+        padding-bottom: env(safe-area-inset-bottom);
+        .btns_two{
+            display: flex;
+            width: 552px;
+            height: 82px;
+            border: 2px solid #cde5ff;
+            font-size: $font_size_big;
+            border-radius: 40px;
+            margin-bottom: 20px;
+            .rest_btn{
+                flex:1;
+                border-radius: 0px 40px 40px 0px;
+                text-align: center;
+                line-height: 82px;
+                color: $color_main;
+                
+            }
+            .verify_btn{
+                flex:1;
+                border-radius: 0px 40px 40px 0px;
+                background: #007aff;
+                text-align: center;
+                line-height: 82px;
+                color: #fff;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/components/filter/index.tsx b/src/components/filter/index.tsx
new file mode 100644
index 0000000..d64ab87
--- /dev/null
+++ b/src/components/filter/index.tsx
@@ -0,0 +1,115 @@
+import Popup, {Params as PopuParams} from "@/components/popup"
+import { Input, ScrollView, Text, Textarea, View } from "@tarojs/components"
+import classnames from "classnames";
+import { useEffect, useState } from "react";
+import styles  from './index.module.scss'
+
+type params = {
+    onFiltr?: (val:object) => void
+} & PopuParams
+export default ({onClose, onFiltr, show = false}:params) => {
+    const [filterObj, setFilterObj] = useState({
+        series: '',
+        minWidth: '',
+        maxWidth: '',
+        minWeight: '',
+        maxWeight: '',
+        element: ''
+
+    })
+    const onCloseEven = () => {
+       onClose?.()
+    }
+    const onRest = () => {
+        console.log('12123')
+        setFilterObj({
+            series: '',
+            minWidth: '',
+            maxWidth: '',
+            minWeight: '',
+            maxWeight: '',
+            element: ''
+        })
+    }
+    useEffect(() => {
+        console.log(filterObj)
+    }, [filterObj])
+
+    const onVerify = () => {
+        console.log(filterObj)
+        onFiltr?.(filterObj)
+    }
+
+    const setNumber = (e, field) => {
+        console.log(e)
+        let num = parseFloat(e.detail.value)
+        if(isNaN(num)) {
+            filterObj[field] = null
+        } else {
+            filterObj[field] = parseFloat(num.toFixed(2))
+        }
+        setFilterObj({...filterObj})
+    }
+
+    const setElement = (e) => {
+        let res = e.detail.value
+        setFilterObj({...filterObj, element:res})
+    }
+    return (
+        
+        <Popup position="right" show={show} showTitle={false} onClose={() => onCloseEven()} showIconButton={true}>
+            <View className={styles.popup_main}>
+                <View className={styles.popup_title}>全部筛选</View>
+                
+                <ScrollView scrollY className={styles.scroll}>
+                    <View className={styles.popup_filter}>
+                        <View className={styles.popup_filter_item}>
+                            <View className={styles.title}>系列</View>
+                            <View className={styles.btn_list}>
+                                <View className={classnames(styles.btn_item, styles.select_btn_item)}>不限</View>
+                                <View className={styles.btn_item}>不限</View>
+                                <View className={styles.btn_item}>不限</View>
+                                <View className={styles.btn_item}>不限</View>
+                                <View className={styles.btn_item}>不限</View>
+                                <View className={styles.btn_item}>不限</View>
+                            </View>
+                        </View>
+                        <View className={styles.popup_filter_item}>
+                            <View className={styles.title}>幅宽</View>
+                            <View className={styles.btn_list_input}>
+                                <View className={styles.btn_width}><Input value={filterObj.minWidth} type="digit" onBlur={(e) => setNumber(e,'minWidth')} placeholder="自定义最低值" placeholderStyle="font-size: 26rpx"/></View>
+                                <Text>—</Text>
+                                <View className={styles.btn_width}><Input value={filterObj.maxWidth} type="digit" onBlur={(e) => setNumber(e,'maxWidth')}  placeholder="自定义最高值" placeholderStyle="font-size: 26rpx"/></View>
+                                <View className={styles.unit}>cm</View>
+                            </View>
+                        </View>
+                        <View className={styles.popup_filter_item}>
+                            <View className={styles.title}>克重</View>
+                            <View className={styles.btn_list_input}>
+                                <View className={styles.btn_width}><Input type="digit" value={filterObj.minWeight} onBlur={(e) => setNumber(e,'minWeight')}  placeholder="自定义最低值" placeholderStyle="font-size: 26rpx"/></View>
+                                <Text>—</Text>
+                                <View className={styles.btn_width}><Input type="digit" value={filterObj.maxWeight} onBlur={(e) => setNumber(e,'maxWeight')}  placeholder="自定义最高值" placeholderStyle="font-size: 26rpx"/></View>
+                                <View className={styles.unit}>g</View>
+                            </View>
+                        </View>
+                        <View className={styles.popup_filter_item}>
+                            <View className={styles.title}>成分</View>
+                            <View className={styles.btn_list_element}>
+                                <Textarea placeholder="请输入" cursorSpacing={60} value={filterObj.element} onInput={(e) => setElement(e)}/>
+                            </View>
+                        </View>
+                        
+                        <View className="common_safe_area_y"></View>
+                    </View>
+                </ScrollView>
+                <View className={styles.btns_con}>
+                    <View className={styles.btns_two}>
+                        <View className={styles.rest_btn} onClick={() => onRest()}>重置</View>
+                        <View className={styles.verify_btn } onClick={() => onVerify()}>确认</View>
+                    </View>
+                </View>
+            </View>
+        </Popup>
+
+    )
+}
\ No newline at end of file
diff --git a/src/components/sortBtn/index.module.scss b/src/components/sortBtn/index.module.scss
new file mode 100644
index 0000000..e734cf9
--- /dev/null
+++ b/src/components/sortBtn/index.module.scss
@@ -0,0 +1,36 @@
+.click {
+    height: 40px;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    position: relative;
+  }
+
+  .bottom {
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 0 10px 10px;
+    border-color: transparent transparent #999999;
+    transform: rotate(180deg);
+  }
+  .top:hover {
+    cursor: pointer;
+    border-color: transparent transparent #333333;
+  }
+
+  .top {
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 0 10px 10px;
+    border-color: transparent transparent #999999;
+    margin-bottom: 5px;
+  }
+  .bottom:hover {
+    cursor: pointer;
+    border-color: transparent transparent #333333;
+  }
+  .selected{
+    border-color: transparent transparent $color_main;
+  }
\ No newline at end of file
diff --git a/src/components/sortBtn/index.tsx b/src/components/sortBtn/index.tsx
new file mode 100644
index 0000000..68d6642
--- /dev/null
+++ b/src/components/sortBtn/index.tsx
@@ -0,0 +1,17 @@
+import { View } from "@tarojs/components"
+import classnames from "classnames";
+import styles  from './index.module.scss'
+
+type params = {
+    status?: 'top'|'bottom'|'none'
+}
+export default ({status = 'none'}: params) => {
+    return (
+        <>
+            <View className={styles.click}>
+                <View className={classnames(styles.top, status == 'top'&&styles.selected)} ></View>
+                <View className={classnames(styles.bottom, status == 'bottom'&&styles.selected)}></View>
+            </View>
+        </>
+    )
+}
\ No newline at end of file
diff --git a/src/components/tabs/index.module.scss b/src/components/tabs/index.module.scss
new file mode 100644
index 0000000..c04b80f
--- /dev/null
+++ b/src/components/tabs/index.module.scss
@@ -0,0 +1,41 @@
+.tabs_main{
+    display: flex;
+    .tabs_scroll{
+        width: 100%;
+        display: flex;
+        white-space: nowrap;
+        border-bottom: 1px solid $color_font_two;
+        border-top: 1px solid $color_font_two;
+        height: 102px;
+        
+        .tabs_item{
+            flex:1;
+            display: inline-block;
+            padding: 10px 20px;
+            height: 100%;
+            box-sizing: border-box;
+            position: relative;
+            .tabs_item_con{
+                height: 100%;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                font-size: $font_size_medium;
+            }
+            .tabs_index{
+                height: 5px;
+                width: 100%;
+                background-color:$color_main;
+                position:absolute;
+                bottom: 0;
+                left:0;
+                border-radius: 50px;
+            }
+            .tabs_item_select{
+                color: $color_main;
+            }
+        }
+        
+        
+    }
+}
\ No newline at end of file
diff --git a/src/components/tabs/index.tsx b/src/components/tabs/index.tsx
new file mode 100644
index 0000000..71a1bc5
--- /dev/null
+++ b/src/components/tabs/index.tsx
@@ -0,0 +1,60 @@
+import { ScrollView, View } from "@tarojs/components";
+import { memo, useState, ReactNode, useEffect } from "react";
+import classnames from "classnames";
+import styles from './index.module.scss'
+
+
+type ListProps = {
+    title: string,
+    value: number
+}
+
+type Params = {
+    list?: ListProps[],
+    defaultValue?: number|string,
+    children?: ReactNode,
+    tabsOnClick?: (ListProps) => void
+}
+
+export default memo(({list = [], defaultValue = 0, tabsOnClick}: Params) => {
+    
+    const [selected, setSelected] = useState(defaultValue)
+    const [tabId, setTabId] = useState('')
+
+    useEffect(() => {
+        const index = list?.findIndex(item => {
+            return item.value == defaultValue 
+        })
+        if(index !== -1) {
+            const num = index > 0?( index - 1) : 0
+            setTabId(list[num].value.toString())
+        }
+    }, [])
+
+    const clickEvent = ({item, index}: {item:ListProps, index:number}) => {
+        setSelected(item.value)
+        tabsOnClick?.(item)
+        const num = index > 0?( index - 1) : 0
+        setTabId(list[num].value.toString())
+    }
+    return (
+        <>
+            <View className={styles.tabs_main} id="tabs_main_ref">
+                <ScrollView className={styles.tabs_scroll} scrollX scrollWithAnimation={true} scrollIntoView={`tabs_${tabId}`}>
+                    <View className={styles.tabs_scroll}>
+                        {
+                            list.map((item, index) => {
+                                return (
+                                    <View key={item.value} id={`tabs_${item.value}`} className={styles.tabs_item} onClick={() => clickEvent({item,index})}>
+                                        <View className={classnames(styles.tabs_item_con, {[styles.tabs_item_select]:selected == item.value})}>{item.title}</View>
+                                        {(selected == item.value) && <View className={styles.tabs_index}></View>}
+                                    </View>
+                                )
+                            })
+                        }
+                    </View>
+                </ScrollView>
+            </View>
+        </>
+    )
+})
\ No newline at end of file
diff --git a/src/pages/searchList/index.module.scss b/src/pages/searchList/index.module.scss
index 84455fd..bfd5e54 100644
--- a/src/pages/searchList/index.module.scss
+++ b/src/pages/searchList/index.module.scss
@@ -6,8 +6,163 @@
     .search{
         padding: 20px;
     }
+    .filter{
+        .filter_all {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 20px 50px;
+            font-size: $font_size_medium;
+            color: $color_font_three;
+            .text_zh, .text_sc{
+                color: $color_main;
+                display: flex;
+                align-items: center;
+                .sortIcon{
+                    display: flex;
+                    flex-direction: column;
+                    position: relative;
+                    .icon_one{
+                        font-size: $font_size_medium;
+                        position: absolute;
+                        margin:auto;
+                        top:0;
+                    }
+                }
+            }
+            .text_ss{
+                position: relative;
+                .miconfont{
+                    font-size: 20px;
+                    margin-left: 5px;
+                }
+                &::before{
+                    content: '';
+                    width: 2px;
+                    height: 32px;
+                    background-color: #C2C2C2;
+                    position: absolute;
+                    top: 0;
+                    left: -30px;
+                }
+            }
+        }
+        .filter_btn_con{
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            height: 86px;
+            
+        }
+        .filter_scroll{
+            flex:1;
+            width: 0;
+        }
+        .filter_btn{
+            display: flex;
+            justify-content: space-between;
+            padding: 20px;
+            flex:1;
+            view{
+                font-size: $font_size_medium;
+                background-color: #F0F0F0;
+                border-radius: 24px;
+                min-width: 126px;
+                height: 46.93px;
+                text-align: center;
+                line-height: 46.93px;
+                color: $color_font_three;
+                &:nth-last-child(n+2) {
+                    margin-right: 10px;
+                }
+            }
+            .selected{
+                background-color: #ecf5ff;
+                border: 2px solid #cde5ff;
+                color: $color_main;
+                width: 122px;
+                height: 42.93px;
+            }
+        }
+        .filter_more{
+            font-size: $font_size_medium;
+            color: $color_font_three;
+            padding: 0 30px 0 20px;
+            position: relative;
+            height: 100%;
+            line-height: 86px;
+            &::before{
+                content: '';
+                opacity: 1;
+                width: 60px;
+                height: 100%;
+                position: absolute;
+                left: -15px;
+                background-color: red;
+                background: linear-gradient(270deg, #fff 30%, rgba(255,255,255, 0.3) );
+                // z-index: 99;
+            }
+            .miconfont{
+                font-size: 27px;
+            }
+        }
+    }
     .list{
         flex:1;
-        height: 0;
+        display: flex;
+        flex-direction: column;
+        .list_num {
+            font-size: $font_size_min;
+            color:$color_font_two;
+            padding: 10px 38px;
+        }
+        .scroll{
+            flex:1;
+            height:0;
+        }
+        .product_list{
+            padding: 38px;
+            display: grid;
+            grid-template-columns: 321px 321px;
+            justify-content: space-between;
+            .product_item{
+                width: 321px;
+                background-color: #fff;
+                border-radius: 20px;
+                margin-bottom: 20px;
+                .product_img{
+                    width: 100%;
+                    height: 224px;
+                    background: #e5ad3a;
+                    border-radius: 20px 20px 0px 0px;
+                }
+            }
+            .product_info{
+                padding: 20px;
+                .title{
+                    font-size: $font_size;
+                    color: $color_font_three;
+                }
+                .tag_list{
+                    display: flex;
+                    margin-top: 16px;
+                    .tag{
+                        padding: 3px 10px;
+                        background-color: #CDE5FF;
+                        font-size: $font_size_min;
+                        border-radius: 5px;
+                        color: $color_main;
+                        &:nth-child(2) {
+                            margin-left: 10px;
+                        }
+                    }
+                }
+                .introduce{
+                    font-size: $font_size_medium;
+                    color: $color_font_two;
+                    margin-top: 16px;
+                }
+            }
+        }
     }
 }
\ No newline at end of file
diff --git a/src/pages/searchList/index.tsx b/src/pages/searchList/index.tsx
index 63fe4d7..9fbd651 100644
--- a/src/pages/searchList/index.tsx
+++ b/src/pages/searchList/index.tsx
@@ -1,21 +1,87 @@
-import { View } from "@tarojs/components"
+import { ScrollView, Text, View } from "@tarojs/components"
 import classnames from "classnames";
 import Search from '@/components/search'
-import Product from '@/components/product'
+import Filter from "@/components/filter";
 import InfiniteScroll from '@/components/infiniteScroll'
+import SortBtn from "@/components/sortBtn";
+import Tabs from "@/components/tabs";
 import styles  from './index.module.scss'
+import { useState } from "react";
 
 export default () => {
+    const [showFilter, setShowFilter] = useState(false)
+    const [selectList, setSelectList] = useState([
+        {title: '系列', value:1},
+        {title: '系列', value:2},
+        {title: '系列', value:3},
+        {title: '系列', value:4},
+        {title: '系列', value:5},
+        {title: '系列', value:5},
+        {title: '系列', value:5},
+        {title: '系列', value:5},
+        {title: '系列', value:5},
+    ])
     return (
         <View className={styles.main}>
             <View className={styles.search}>
-                <Search placeIcon="out" showBtn={true} btnStyle={{color: '#007AFF'}}/>
+                <Search placeIcon="out"  btnStyle={{color: '#007AFF'}}/>
+            </View>
+            <View className={styles.filter}>
+                <View className={styles.filter_all}>
+                    <View className={styles.text_zh}>
+                        <Text>综合</Text>
+                        <SortBtn status="top"/>
+                    </View>
+                    <View className={styles.text_sc} >
+                        <Text>收藏</Text>
+                        <SortBtn status="top"/>
+                    </View>
+                    <View className={styles.text_ss} >
+                        <Text>高级搜索</Text>
+                        <Text className={classnames('iconfont icon-sousuo', styles.miconfont)}></Text>
+                    </View>
+                </View>
+                <View className={styles.filter_btn_con}>
+                    <ScrollView scrollX className={styles.filter_scroll}>
+                        <View className={styles.filter_btn}>
+                                <View>系列</View>
+                                <View>幅宽</View>
+                                <View>克重</View>
+                                <View>克重</View>
+                                <View>克重</View>
+                                <View className={styles.selected}>成分</View>
+                        </View>
+                    </ScrollView>
+                    <View className={styles.filter_more} onClick={() => setShowFilter(true)}>
+                        <Text>筛选</Text>
+                        <Text className={classnames('iconfont icon-shaixuan', styles.miconfont)}></Text>
+                    </View>
+                </View>
+
             </View>
             <View className={styles.list}>
-                <InfiniteScroll selfonScrollToLower={() => console.log('123123')}>
-                    <Product desStatus={false}/>
-                </InfiniteScroll>
+                <View className={styles.list_num}>搜索结果 (2条记录)</View>
+                <View className={styles.scroll}>
+                    <InfiniteScroll selfonScrollToLower={() => console.log('123123')}>
+                        <View className={styles.product_list}>
+                            {new Array(9).fill(' ').map(item => {
+                                return <View className={styles.product_item}>
+                                    <View className={styles.product_img}></View>
+                                    <View className={styles.product_info}>
+                                        <View className={styles.title}>0770#21S精棉平纹</View>
+                                        <View className={styles.tag_list}>
+                                            <View className={styles.tag}>160cm</View>
+                                            <View className={styles.tag}>110g</View>
+                                        </View>
+                                        <View className={styles.introduce}>67.6%棉24%涤纶6.4%氨纶</View>
+                                    </View>
+                                </View>
+                            })}
+                        </View>
+                    </InfiniteScroll>
+                </View>
             </View>
+            <Filter show={showFilter} onClose={() => setShowFilter(false)}/>
         </View>
     )
 }
\ No newline at end of file
diff --git a/src/styles/iconfont.scss b/src/styles/iconfont.scss
index 3fc43f6..14c7f83 100644
--- a/src/styles/iconfont.scss
+++ b/src/styles/iconfont.scss
@@ -1,7 +1,7 @@
 @font-face {
   font-family: "iconfont"; /* Project id 2987621 */
   src: 
-       url('iconfont.ttf?t=1649906813989') format('truetype');
+       url('iconfont.ttf?t=1650013104232') format('truetype');
 }
 
 .iconfont {
@@ -12,6 +12,18 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-shaixuan:before {
+  content: "\e689";
+}
+
+.icon-sort-up-full:before {
+  content: "\ea4c";
+}
+
+.icon-sort-down-full:before {
+  content: "\ea4d";
+}
+
 .icon-shoucang:before {
   content: "\e63e";
 }
@@ -44,6 +56,14 @@
   content: "\e633";
 }
 
+.icon-wode-copy:before {
+  content: "\e6cb";
+}
+
+.icon-fenlei-copy:before {
+  content: "\e6ca";
+}
+
 .icon-tick_gou:before {
   content: "\e62e";
 }
diff --git a/src/styles/iconfont.ttf b/src/styles/iconfont.ttf
index 08f4649..01f5b13 100644
Binary files a/src/styles/iconfont.ttf and b/src/styles/iconfont.ttf differ