xuan/TestEShopDist
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

首页开发

Browse Source
This commit is contained in:
cheng
2022-04-06 18:42:14 +08:00
parent e983ba05ea
commit fc3e9885d3
18 changed files with 654 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/index/components/product/index.module.scss
+65
View File
@@ -0,0 +1,65 @@
.products_list{
padding: 0 20px 20px 20px;
box-sizing: border-box;
}
.products_item{
width: 100%;
background-color: #fff;
border-radius: 20px;
padding: 20px;
box-sizing: border-box;
display: flex;
justify-content: space-between;
&:nth-child(n+2){
margin-top: 16px;
}
.item_img{
width: 198px;
height: 198px;
image{
width: 100%;
height: 100%;
border-radius: 10px;
}
}
.item_con{
padding-left: 15px;
font-size: $font_size;
flex:1;
.title{
font-size: $font_size;
color: #707070;
text{
color: $color_font_one;
font-weight: bold;
}
}
.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;
}
.des{
font-size:$font_size_medium;
color: #707070;
margin-top: 16px;
@include common_ellipsis($params:2);
}
}
}
src/pages/index/components/product/index.tsx
+79
View File
@@ -0,0 +1,79 @@
import { Image, View } from "@tarojs/components"
import styles from './index.module.scss'
export default () => {
return (
<View className={styles.products_list}>
<View className={styles.products_item}>
<View className={styles.item_img}>
<Image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp01%2F1ZZQ214233446-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651827249&t=b2fc2a3672dc8ced9e0f37ce7e2ff901"/>
</View>
<View className={styles.item_con}>
<View className={styles.title}><text>0770#</text>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 className={styles.des}>产品描述产品描述产品描述产品描述产品描述</View>
</View>
</View>
<View className={styles.products_item}>
<View className={styles.item_img}>
<Image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp01%2F1ZZQ214233446-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651827249&t=b2fc2a3672dc8ced9e0f37ce7e2ff901"/>
</View>
<View className={styles.item_con}>
<View className={styles.title}><text>0770#</text>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 className={styles.des}>产品描述产品描述产品描述产品描述产品描述</View>
</View>
</View>
<View className={styles.products_item}>
<View className={styles.item_img}>
<Image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp01%2F1ZZQ214233446-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651827249&t=b2fc2a3672dc8ced9e0f37ce7e2ff901"/>
</View>
<View className={styles.item_con}>
<View className={styles.title}><text>0770#</text>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 className={styles.des}>产品描述产品描述产品描述产品描述产品描述</View>
</View>
</View>
<View className={styles.products_item}>
<View className={styles.item_img}>
<Image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp01%2F1ZZQ214233446-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651827249&t=b2fc2a3672dc8ced9e0f37ce7e2ff901"/>
</View>
<View className={styles.item_con}>
<View className={styles.title}><text>0770#</text>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 className={styles.des}>产品描述产品描述产品描述产品描述产品描述</View>
</View>
</View>
<View className={styles.products_item}>
<View className={styles.item_img}>
<Image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp01%2F1ZZQ214233446-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651827249&t=b2fc2a3672dc8ced9e0f37ce7e2ff901"/>
</View>
<View className={styles.item_con}>
<View className={styles.title}><text>0770#</text>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 className={styles.des}>产品描述产品描述产品描述产品描述产品描述</View>
</View>
</View>
</View>
)
}
src/pages/index/index.config.ts
+1 -1
View File
@@ -1,3 +1,3 @@
export default {
navigationBarTitleText: '首页'
navigationBarTitleText: '电子商城'
}
src/pages/index/index.module.scss
+28 -2
View File
@@ -1,3 +1,29 @@
.index{
color: $color;
.main{
background-color: $color_bg_one;
min-height: 100%;
display: flex;
flex-direction: column;
.search{
width: 100%;
display: flex;
justify-content: space-between;
padding: 20px 20px 30px 20px;
box-sizing: border-box;
align-items: center;
.search_collect{
font-size: 26px;
border: 2px solid #007AFF;
color: #007AFF;
border-radius: 50px;
width: 132px;
height: 44px;
text-align: center;
line-height: 44px;
}
}
.products{
flex:1;
height: 0;
}
}
src/pages/index/index.tsx
+38 -6
View File
@@ -1,13 +1,45 @@
import { View, Text } from '@tarojs/components'
import Test from '@/components/test'
import { Image, View} from '@tarojs/components'
import Swiper from '@/components/swiper'
import Search from '@/components/search'
import SideBar from '@/components/sideBar'
import Product from './components/product'
import styles from './index.module.scss'
export default () => {
const tabs_list = [
{title:'平纹系列', value: 1},
{title:'平纹系列', value: 2},
{title:'平纹系列', value: 3},
{title:'平纹系列', value: 4},
{title:'平纹系列', value: 5},
{title:'平纹系列', value: 6},
{title:'平纹系列', value: 7},
{title:'平纹系列', value: 8},
{title:'平纹系列', value: 9},
{title:'平纹系列', value: 10},
{title:'平纹系列', value: 11},
{title:'平纹系列', value: 12},
{title:'平纹系列', value: 13},
{title:'平纹系列', value: 14},
{title:'平纹系列', value: 15},
{title:'平纹系列', value: 16},
{title:'平纹系列', value: 17},
]
return (
<View className={styles.index}>
<Text>Hello world123!</Text>
<Test/>
<View className={styles.main}>
<Swiper/>
<View className={styles.search}>
<View className={styles.search_collect}>我的收藏</View>
<View className={styles.search_input}>
<Search disabled={true} style={{width: '263rpx'}}/>
</View>
</View>
<View className={styles.products}>
<SideBar list={tabs_list} height="100%" heightItem={150}>
<Product/>
</SideBar>
</View>
<View className='common_safe_area_y'></View>
</View>
)
}