You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
177 lines
3.6 KiB
177 lines
3.6 KiB
<template>
|
|
<view class="body">
|
|
<view class="search">
|
|
<navigator url="/pages/index/search">
|
|
<view class="navigation_seach">
|
|
<img src="/static/img/seach.png" alt="">
|
|
<text>search</text>
|
|
</view>
|
|
</navigator>
|
|
<view class="navigation_title_right">
|
|
<img src="/static/img/like.png" alt="">
|
|
<uni-badge :text="5" type="error" absolute="rightTop">
|
|
<img src="/static/img/shop_cart.png" alt="">
|
|
</uni-badge>
|
|
</view>
|
|
</view>
|
|
<view class="category">
|
|
<view class="category_left">
|
|
<view class="category_left_item" :class="categoryIndex==index?'categoryActive':''" v-for="(item,index) in categoryList" :key="index"
|
|
@click="changeCategory(index)">
|
|
{{item}}
|
|
</view>
|
|
</view>
|
|
|
|
<view class="good_body">
|
|
<view class="good_title">PICKS FOR YOU</view>
|
|
<view class="good_content">
|
|
<view class="good_item" v-for="(item,index) in 5" :key="index">
|
|
<view class="good_item_img"></view>
|
|
<text>Women Drese</text>
|
|
</view>
|
|
</view>
|
|
<view class="good_title">YOU MAY ALSO LIKE</view>
|
|
<view class="good_content">
|
|
<view class="good_item" v-for="(item,index) in 5" :key="index">
|
|
<view class="good_item_img"></view>
|
|
<text>Women Drese</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
categoryIndex:0,
|
|
categoryList:['CHOICE','WOMEN','MEN','KIDS','PETS','SWIMWEAR','LINGERUE&LOUNGEAR','DENIM&JEANS','ACTIVEWEAR','BEAUTY','SHOES']
|
|
}
|
|
},
|
|
methods:{
|
|
changeCategory(i){
|
|
this.categoryIndex=i
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
page{
|
|
padding-top: 130rpx;
|
|
height: 100%;
|
|
}
|
|
.body{
|
|
height: 100%;
|
|
}
|
|
.search{
|
|
width: 100%;
|
|
background-color: white;
|
|
box-sizing: border-box;
|
|
padding: 33.33rpx 26.67rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
position: fixed;
|
|
top: 0;
|
|
z-index: 99;
|
|
border-bottom: 1px solid #F5F6FA;
|
|
|
|
.navigation_seach{
|
|
width: 546.67rpx;
|
|
background-color: #F5F6FA;
|
|
border-radius: 6.67rpx;
|
|
height: 66.67rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
color: #8F9094;
|
|
font-size: 26.67rpx;
|
|
padding-left: 22rpx;
|
|
box-sizing: border-box;
|
|
|
|
img{
|
|
width: 29.33rpx;
|
|
height: 29.33rpx;
|
|
margin-right: 22rpx;
|
|
}
|
|
}
|
|
.navigation_title_right{
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
img{
|
|
width: 44rpx;
|
|
height: 44rpx;
|
|
}
|
|
>img:first-child{
|
|
margin-right: 32.67rpx;
|
|
}
|
|
}
|
|
}
|
|
.category{
|
|
height: 100%;
|
|
display: flex;
|
|
|
|
.category_left{
|
|
height: 100%;
|
|
background-color: #F5F6FA;
|
|
width: 197.33rpx;
|
|
.category_left_item{
|
|
width: 100%;
|
|
padding: 0 18rpx;
|
|
height: 96rpx;
|
|
font-size: 26.67rpx;
|
|
font-weight: 600;
|
|
box-sizing: border-box;
|
|
font-family: PingFang SC;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
word-wrap: break-word;
|
|
word-break: break-all;
|
|
}
|
|
.categoryActive{
|
|
background-color: black;
|
|
color: white;
|
|
}
|
|
}
|
|
.good_body{
|
|
margin-left: 36rpx;
|
|
width: 552.67rpx;
|
|
// padding-top: 39.33rpx;
|
|
|
|
.good_title{
|
|
height: 96rpx;
|
|
line-height: 96rpx;
|
|
font-size: 28rpx;
|
|
font-weight: 600;
|
|
}
|
|
.good_content{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
|
|
.good_item{
|
|
font-size: 22.67rpx;
|
|
text-align: center;
|
|
margin-right: 25.33rpx;
|
|
margin-bottom: 51.33rpx;
|
|
|
|
.good_item_img{
|
|
display: block;
|
|
background-color: #999999;
|
|
width: 146.67rpx;
|
|
height: 146.67rpx;
|
|
margin-bottom: 22rpx;
|
|
|
|
}
|
|
}
|
|
.good_item:nth-child(3n+3){
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|