个人中心
This commit is contained in:
唐明明
@@ -18,13 +18,14 @@
|
||||
</view>
|
||||
</view>
|
||||
<!-- 健康产品分类 -->
|
||||
<!-- <view class="">
|
||||
<view class="">（icon）10斤挑战</view>
|
||||
<view class="">（icon）控卡主食</view>
|
||||
<view class="">（icon）轻卡小食</view>
|
||||
<view class="">（icon）肠胃呵护</view>
|
||||
<view class="">（icon）燃力嗨吃</view>
|
||||
</view> -->
|
||||
<u-scroll-list class="classify-box" indicatorColor="#ddd" indicatorActiveColor="#34CE98">
|
||||
<view v-for="(item, index) in goodTabs" :key="index" class="classify-item">
|
||||
<view class="classify-item-nav">
|
||||
<image class="classify-item-cover" :src="item.cover"></image>
|
||||
<view class="classify-item-title">{{item.name}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-scroll-list>
|
||||
<!-- 每日上新 -->
|
||||
<view class="new-box">
|
||||
<view class="title">上新精选</view>
|
||||
@@ -38,17 +39,30 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 卡片区 -->
|
||||
<!-- <view class="">
|
||||
<view class="">（卡片）宝贝爱吃</view>
|
||||
<view class="">（卡片）轻卡小食</view>
|
||||
</view> -->
|
||||
<!-- 推荐品类 -->
|
||||
<view class="card-box">
|
||||
<view class="card-box-item">
|
||||
<view class="card-title">宝贝爱吃</view>
|
||||
<view class="card-subtitle">精选食谱 三餐美味</view>
|
||||
<image class="card-cover" src="@/static/store/store_icon_00.png" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="card-box-item">
|
||||
<view class="card-title">轻卡小食</view>
|
||||
<view class="card-subtitle">火热商品 一目了然</view>
|
||||
<image class="card-cover" src="@/static/store/store_icon_01.png" mode="aspectFill"></image>
|
||||
</view>
|
||||
</view>
|
||||
<!-- goods -->
|
||||
<oct-goods
|
||||
:lists="goodsArr"
|
||||
color="#e6576b"
|
||||
@onGoods="onGoods"
|
||||
/>
|
||||
<view class="goods-box">
|
||||
<!-- <u-divider text="猜你喜欢"></u-divider> -->
|
||||
<!-- <view class="title">猜你喜欢</view> -->
|
||||
<oct-goods
|
||||
:lists="goodsArr"
|
||||
color="#e6576b"
|
||||
@onGoods="onGoods"
|
||||
/>
|
||||
<u-loadmore status="loading" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -57,6 +71,15 @@
|
||||
data() {
|
||||
return {
|
||||
swiperCount: 0,
|
||||
goodTabs: [
|
||||
{ name: "减脂小白", cover: "https://yanxuan.nosdn.127.net/c6fd8835a6400b7da7a016ad85506b69.png"},
|
||||
{ name: "10斤挑战", cover: "https://yanxuan.nosdn.127.net/fede8b110c502ec5799702d5ec824792.png"},
|
||||
{ name: "控卡主食", cover: "https://yanxuan.nosdn.127.net/896a3beac514ae8f40aafe028e5fec56.png"},
|
||||
{ name: "轻卡小食", cover: "https://yanxuan.nosdn.127.net/37520d1204a0c55474021b43dac2a69e.png"},
|
||||
{ name: "肠胃呵护", cover: "https://yanxuan.nosdn.127.net/6c3bd9d885c818b1f73e497335a68b47.png"},
|
||||
{ name: "燃力嗨吃", cover: "https://yanxuan.nosdn.127.net/559d2a240ec20b096590a902217009ff.png"},
|
||||
{ name: "10斤挑战", cover: "https://yanxuan.nosdn.127.net/5c088559ebcc3f0ffcda663f04dfbeb2.png"},
|
||||
],
|
||||
newGood : [
|
||||
{
|
||||
cover : "https://yanxuan-item.nosdn.127.net/0aabfb9974965f4983fcc71344022dc7.png",
|
||||
@@ -156,8 +179,89 @@
|
||||
.content{
|
||||
background: $window-color;
|
||||
}
|
||||
// 商城列表
|
||||
.goods-box{
|
||||
padding-bottom: $padding;
|
||||
&>.title{
|
||||
padding: $padding $padding 0;
|
||||
font-size: $title-size-lg;
|
||||
color: $text-color;
|
||||
font-weight: bold;
|
||||
margin-bottom: -$margin/2;
|
||||
}
|
||||
}
|
||||
// 商城分类
|
||||
.classify-box{
|
||||
.classify-item{
|
||||
padding: 0 10rpx;
|
||||
&:last-child{
|
||||
padding-right: $padding;
|
||||
}
|
||||
&:first-child{
|
||||
padding-left: $padding;
|
||||
}
|
||||
&-nav{
|
||||
text-align: center;
|
||||
width: 138rpx;
|
||||
}
|
||||
&-cover{
|
||||
width: 86rpx;
|
||||
height: 86rpx;
|
||||
border-radius: 50%;
|
||||
vertical-align: top;
|
||||
margin-bottom: $margin/2;
|
||||
}
|
||||
&-title{
|
||||
line-height: 40rpx;
|
||||
font-size: $title-size-sm;
|
||||
color: $text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 卡片推荐
|
||||
.card-box{
|
||||
padding: $padding $padding - 10;
|
||||
padding-bottom: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
&-item{
|
||||
margin: 0 10rpx;
|
||||
width: calc(50% - 20rpx);
|
||||
padding: $padding;
|
||||
border-radius: $radius;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
.card-title{
|
||||
font-size: $title-size-lg;
|
||||
font-weight: bold;
|
||||
color: $text-color;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
.card-subtitle{
|
||||
font-size: 20rpx;
|
||||
color: $text-gray;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
.card-cover{
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
position: absolute;
|
||||
right: $margin;
|
||||
top: $margin;
|
||||
}
|
||||
}
|
||||
&-item:nth-child(1){
|
||||
background: #fef2ae;
|
||||
}
|
||||
&-item:nth-child(2){
|
||||
background: #c9ead9;
|
||||
}
|
||||
}
|
||||
// 上新精选
|
||||
.new-box{
|
||||
padding: 0 $padding;
|
||||
padding: 0 $margin;
|
||||
border-radius: $radius;
|
||||
// padding: $padding - 10;
|
||||
.title{
|
||||
font-size: $title-size-lg;
|
||||
color: $text-color;
|
||||
@@ -201,9 +305,6 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
//
|
||||
//
|
||||
//
|
||||
// swiper
|
||||
.swiper{
|
||||
background: linear-gradient(#FFF, #F3F6FB);
|
||||
|
||||
Reference in New Issue
Block a user