🎈 perf(优化了搜索框与banner图):

This commit is contained in:
czm 2022-11-22 11:33:42 +08:00
parent 46b80f0700
commit cddb3b93e6
6 changed files with 115 additions and 115 deletions

View File

@ -1,13 +1,12 @@
.swiper_con { .swiper_con {
padding: 0 20px; padding: 0 20px;
height: 178px; height: 270px;
.xswiper { .xswiper {
height: 100% !important; height: 100% !important;
border-radius: 20px; border-radius: 20px;
.image_item { .image_item {
width: 100%; width: 100%;
height: 100%; height: 100%;
image { image {
width: 100%; width: 100%;
height: 100%; height: 100%;

View File

@ -5,7 +5,7 @@
width: 100%; width: 100%;
z-index: 0; z-index: 0;
.icon_a_sousuo1_self { .icon_a_sousuo1_self {
font-size: 37px; font-size: 40px;
color: $color_font_two; color: $color_font_two;
} }
.search_con { .search_con {
@ -17,22 +17,25 @@
font-size: 27px; font-size: 27px;
background: #eee; background: #eee;
width: 100%; width: 100%;
height: 60px; height: 72px;
border-radius: 50px; border-radius: 50px;
padding: 0 60px; padding: 0 60px 0 80px;
box-sizing: border-box; box-sizing: border-box;
z-index: 0; z-index: 0;
&::-webkit-input-placeholder { /* WebKit browsers */ &::-webkit-input-placeholder {
/* WebKit browsers */
color: #999; color: #999;
font-size: 16px; font-size: 16px;
} }
&::-moz-placeholder { /* Mozilla Firefox 19+ */ &::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: #999; color: #999;
font-size: 16px; font-size: 16px;
} }
&::-ms-input-placeholder { /* Internet Explorer 10+ */ &::-ms-input-placeholder {
/* Internet Explorer 10+ */
color: #999; color: #999;
font-size: 16px; font-size: 16px;
} }
@ -41,7 +44,6 @@
position: absolute; position: absolute;
right: 10px; right: 10px;
} }
} }
.btn { .btn {
width: 100px; width: 100px;
@ -50,12 +52,11 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.icon_inner { .icon_inner {
margin-right: 20px; margin-right: 20px;
position: absolute; position: absolute;
left: 10px; left: 24px;
margin-right: 0; margin-right: 0;
z-index: 10; z-index: 10;
} }
@ -65,5 +66,4 @@
.input_out { .input_out {
padding-left: 20px !important; padding-left: 20px !important;
} }
} }

View File

@ -18,6 +18,7 @@ type Params = {
btnTitle?: string btnTitle?: string
debounceTime?: number //防抖时间,不设默认为零 debounceTime?: number //防抖时间,不设默认为零
defaultValue?: string defaultValue?: string
borderRadius?: string
} }
export default memo( export default memo(
@ -35,6 +36,7 @@ export default memo(
btnTitle = '搜索', //搜索文字 btnTitle = '搜索', //搜索文字
debounceTime = 0, //防抖时间,不设默认为零 debounceTime = 0, //防抖时间,不设默认为零
defaultValue = '', //默认值 defaultValue = '', //默认值
borderRadius = '50rpx',
}: Params, }: Params,
ref, ref,
) => { ) => {
@ -85,6 +87,7 @@ export default memo(
)}></View> )}></View>
)} )}
<Input <Input
style={{ borderRadius }}
alwaysEmbed={true} alwaysEmbed={true}
cursorSpacing={150} cursorSpacing={150}
placeholderStyle='color:#ABABAB; font-size:26rpx' placeholderStyle='color:#ABABAB; font-size:26rpx'

View File

@ -7,13 +7,13 @@
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: 20px 20px 30px 20px; padding: 20px;
box-sizing: border-box; box-sizing: border-box;
align-items: center; align-items: center;
.search_collect { .search_collect {
font-size: 26px; font-size: 26px;
border: 2px solid #007AFF; border: 2px solid #007aff;
color: #007AFF; color: #007aff;
border-radius: 50px; border-radius: 50px;
width: 132px; width: 132px;
height: 44px; height: 44px;
@ -22,12 +22,12 @@
} }
.search_input { .search_input {
flex: 1; flex: 1;
margin-left: 20px; // margin-left: 20px;
} }
} }
.products { .products {
flex: 1; flex: 1;
height: 0; height: 0;
margin-top: 20px;
} }
} }

View File

@ -84,15 +84,13 @@ export default () => {
return ( return (
<MoveBtn onClick={() => setShowShopCart(!showShopCart)}> <MoveBtn onClick={() => setShowShopCart(!showShopCart)}>
<View className={styles.main}> <View className={styles.main}>
<Banner />
<View className={styles.search}> <View className={styles.search}>
<View className={styles.search_collect} onClick={() => goLink('/pages/collection/index')}>
</View>
<View className={styles.search_input} onClick={() => goLink('/pages/searchList/search')}> <View className={styles.search_input} onClick={() => goLink('/pages/searchList/search')}>
<Search disabled={true} style={{ width: '263rpx' }} /> <Search disabled={true} style={{ width: '263rpx' }} borderRadius='16rpx' placeholder='请输入搜索布料' />
</View> </View>
</View> </View>
<Banner />
<View className={styles.products}> <View className={styles.products}>
<SideBar <SideBar
list={kindData.list} list={kindData.list}