搜索列表
This commit is contained in:
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user