0000
This commit is contained in:
@@ -0,0 +1,7 @@
|
||||
Component({
|
||||
properties: {
|
||||
list: Array
|
||||
},
|
||||
data: {},
|
||||
methods: {}
|
||||
});
|
||||
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {}
|
||||
}
|
||||
53
pages/mall/popularRecommendation/popularRecommendation.wxml
Normal file
53
pages/mall/popularRecommendation/popularRecommendation.wxml
Normal file
@@ -0,0 +1,53 @@
|
||||
<view class="module-wrap">
|
||||
<view class="m-title">
|
||||
<view class="hd">
|
||||
<view class="hd_name">爆款推荐</view>
|
||||
</view>
|
||||
<view class="bd"></view>
|
||||
<view class="fd"></view>
|
||||
</view>
|
||||
<view class="big-list">
|
||||
<view class="item" wx:for="{{list}}" wx:key="index">
|
||||
<navigator class="big-item" hoverClass="hover" url="/pages/goodsDetails/goodsDetails?id={{item.id}}">
|
||||
<view class="hd">
|
||||
<view class="image-box __56">
|
||||
<image lazy="loaded" src="{{item.image}}"></image>
|
||||
</view>
|
||||
<view class="issaled" wx:if="{{item.stock==0}}">
|
||||
<image src="/img/issaled.png"></image>
|
||||
</view>
|
||||
<view class="hd_sale">已售 {{item.num_buy}}</view>
|
||||
</view>
|
||||
<view class="bd">
|
||||
<view style="overflow: hidden;">
|
||||
<view class="title __normal" style="-webkit-line-clamp: 2;">{{item.name}}</view>
|
||||
</view>
|
||||
<view class="__flex">
|
||||
<view class="bd_price">
|
||||
<view class="now-price __large">
|
||||
<view class="symbol">¥</view>
|
||||
<view class="buck">{{item.price_buck}}.</view>
|
||||
<view class="cent">{{item.price_cent}}</view>
|
||||
<view class="qi"></view>
|
||||
</view>
|
||||
<view class="old-price" style="margin: 0px 0px 0px 8px;" wx:if="{{item.marketprice}}">¥{{item.marketprice}}</view>
|
||||
<view style="margin: 0px 0px 0px 10px;" wx:if="{{item.discount}}">
|
||||
<view class="list-discount">
|
||||
<view class="hd">
|
||||
<view class="tri"></view>
|
||||
</view>
|
||||
<view class="bd">
|
||||
<view class="num">{{item.discount}}</view>折 </view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<button class="button __large" wx:if="{{item.stock>0}}">立即购买</button>
|
||||
<button class="button __large issele" wx:if="{{item.stock==0}}">已售罄</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</navigator>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
306
pages/mall/popularRecommendation/popularRecommendation.wxss
Normal file
306
pages/mall/popularRecommendation/popularRecommendation.wxss
Normal file
@@ -0,0 +1,306 @@
|
||||
.module-wrap {
|
||||
border-color: #f4f4f4;
|
||||
margin: 0 0 2.667vw;
|
||||
padding: 5.333vw 0 0;
|
||||
}
|
||||
|
||||
.m-title {
|
||||
-webkit-box-align: end;
|
||||
-ms-flex-align: end;
|
||||
align-items: flex-end;
|
||||
color: #2a2a2a;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
font-size: 3.2vw;
|
||||
line-height: 1;
|
||||
padding: 0 4vw 5.333vw;
|
||||
}
|
||||
|
||||
.m-title .hd_name {
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 1;
|
||||
display: -webkit-box;
|
||||
font-size: 5.333vw;
|
||||
font-weight: 500;
|
||||
height: 1.2em;
|
||||
line-height: 1.2em;
|
||||
margin: -.1em 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.m-title .bd {
|
||||
-webkit-box-flex: 1;
|
||||
flex: 1;
|
||||
padding: 0 2.667vw;
|
||||
}
|
||||
|
||||
.m-title .fd {
|
||||
-ms-flex-negative: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.m-title .fd_more {
|
||||
color: #aaa;
|
||||
margin: -2.667vw 0;
|
||||
padding: 2.667vw 0;
|
||||
}
|
||||
|
||||
.big-list {
|
||||
padding: 0 4vw;
|
||||
}
|
||||
|
||||
.big-list .item:not(:last-child) {
|
||||
margin: 0 0 4.8vw;
|
||||
}
|
||||
|
||||
.big-item {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.big-item .hd {
|
||||
border-radius: 1.333vw;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.image-box.__56 {
|
||||
padding-top: 56.25%;
|
||||
}
|
||||
|
||||
.image-box {
|
||||
background-color: #ebebeb;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.image-box image {
|
||||
height: 100%;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.big-item .hd_sale {
|
||||
background-color: rgba(0,0,0,.5);
|
||||
border-radius: 0 3.2vw 0 0;
|
||||
bottom: 0;
|
||||
color: #fff;
|
||||
font-size: 3.2vw;
|
||||
height: 5.867vw;
|
||||
left: 0;
|
||||
line-height: 5.867vw;
|
||||
padding: 0 2.133vw;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.big-item .bd {
|
||||
padding: 2.133vw 0 0;
|
||||
}
|
||||
|
||||
.big-item .bd_shop {
|
||||
color: #9b9b9b;
|
||||
font-size: 3.2vw;
|
||||
line-height: 4.533vw;
|
||||
margin: 0 0 1.6vw;
|
||||
}
|
||||
|
||||
.title.__normal {
|
||||
font-size: 4vw;
|
||||
}
|
||||
|
||||
.title {
|
||||
-webkit-box-orient: vertical;
|
||||
color: #222;
|
||||
display: -webkit-box;
|
||||
line-height: 1.4em;
|
||||
margin: 0 0 .2em;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.big-item .bd .__flex,.big-item .bd_shop {
|
||||
-webkit-box-pack: justify;
|
||||
-ms-flex-pack: justify;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.big-item .bd .__flex {
|
||||
-webkit-box-align: end;
|
||||
-ms-flex-align: end;
|
||||
align-items: flex-end;
|
||||
line-height: 1;
|
||||
margin: .8vw 0 0;
|
||||
}
|
||||
|
||||
.vip-price-wrap {
|
||||
height: 3.467vw;
|
||||
}
|
||||
|
||||
.vip-price {
|
||||
align-items: center;
|
||||
background-color: #d7bc9f;
|
||||
border-radius: 3.467vw;
|
||||
color: #3d342d;
|
||||
display: flex;
|
||||
font-size: 2.667vw;
|
||||
height: inherit;
|
||||
line-height: 3.467vw;
|
||||
overflow: hidden;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.vip-price .hd {
|
||||
background-color: #40322f;
|
||||
border-radius: 0;
|
||||
color: #d7bc9f;
|
||||
display: inline-block;
|
||||
padding: 0 .8vw;
|
||||
}
|
||||
|
||||
.vip-price .bd {
|
||||
display: inline-block;
|
||||
padding: 0 1.867vw;
|
||||
}
|
||||
|
||||
.big-item .bd_price {
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.now-price.__large {
|
||||
display: inline;
|
||||
font-size: 3.467vw;
|
||||
}
|
||||
|
||||
.now-price {
|
||||
color: #eb5252;
|
||||
font-family: DIN;
|
||||
font-size: 3.2vw;
|
||||
line-height: 1.75em;
|
||||
}
|
||||
|
||||
.now-price>view {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.now-price.__large .buck {
|
||||
font-size: 5.333vw;
|
||||
}
|
||||
|
||||
.old-price {
|
||||
color: #9b9b9b;
|
||||
display: inline;
|
||||
font-family: DIN;
|
||||
font-size: 3.2vw;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.list-discount {
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
display: -webkit-inline-box;
|
||||
display: -ms-inline-flexbox;
|
||||
display: -webkit-inline-flex;
|
||||
display: inline-flex;
|
||||
font-size: 2.667vw;
|
||||
height: 4.267vw;
|
||||
line-height: 4.267vw;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.list-discount .hd {
|
||||
border-radius: 0;
|
||||
height: 4.267vw;
|
||||
width: 2.4vw;
|
||||
}
|
||||
|
||||
.list-discount .tri {
|
||||
background-color: #06acb3;
|
||||
height: 4.267vw;
|
||||
transform: translateY(50%) rotate(-45deg);
|
||||
transform-origin: 0 0;
|
||||
width: 4.267vw;
|
||||
}
|
||||
|
||||
.list-discount .bd {
|
||||
background-color: #06acb3;
|
||||
border-radius: 0 .533vw .533vw 0;
|
||||
color: #fff;
|
||||
padding: 0 .533vw 0 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.list-discount .num {
|
||||
display: inline;
|
||||
font-family: DIN;
|
||||
font-size: 2.933vw;
|
||||
}
|
||||
|
||||
.button.__large {
|
||||
height: 7.467vw;
|
||||
min-width: 18.667vw;
|
||||
}
|
||||
|
||||
.button {
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
background-color: #06acb3;
|
||||
border-radius: 6.667vw;
|
||||
box-sizing: border-box;
|
||||
color: #fff;
|
||||
display: -webkit-inline-box;
|
||||
display: -ms-inline-flexbox;
|
||||
display: -webkit-inline-flex;
|
||||
display: inline-flex;
|
||||
font-size: 3.2vw;
|
||||
padding: 0 1.6vw;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.button,.issaled {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.issaled {
|
||||
background: rgba(0,0,0,.4);
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.issaled image {
|
||||
height: 120px;
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.issele {
|
||||
background: #9b9b9b;
|
||||
}
|
||||
|
||||
.hover {
|
||||
background: transparent;
|
||||
}
|
||||
Reference in New Issue
Block a user