[]...
This commit is contained in:
@@ -47,7 +47,7 @@
|
||||
<image class="cover" :src="item.cover" mode="aspectFill"></image>
|
||||
<view class="title">{{item.name}}</view>
|
||||
<view style='font-size: 26rpx;color: #999;font-weight: normal;' v-if='item.price.pv>0'>
|
||||
贡献值:<span>{{item.price.pv}}</span><image style="width: 20rpx;" src="/static/icons/crystal-icon.png" mode="widthFix" />
|
||||
贡献值:<span>{{item.price.pv}}</span><image style="width: 28rpx;" src="/static/icons/crystal-icon.png" mode="widthFix" />
|
||||
</view>
|
||||
<view class="price"><text>¥</text>{{item.original_price}}</view>
|
||||
</view>
|
||||
@@ -93,7 +93,16 @@
|
||||
</view>
|
||||
</view>
|
||||
<!-- 优选商品 -->
|
||||
<goods-list :list="goods" priceType="CNY" @on-goods="onGoods" />
|
||||
<goods-list :list="goods" priceType="CNY" @on-goods="onGoods">
|
||||
<template #statistics="good">
|
||||
<view class="goods-pv">
|
||||
<block v-if="good.value.price.pv > 0">
|
||||
+ {{good.value.price.pv}}
|
||||
<image class="goods-pv-icon" src="/static/icons/crystal-icon.png" mode="widthFix" />
|
||||
</block>
|
||||
</view>
|
||||
</template>
|
||||
</goods-list>
|
||||
<!-- 分页 -->
|
||||
<uni-load-more :status="pageStatus" :iconSize="16"></uni-load-more>
|
||||
</view>
|
||||
@@ -480,369 +489,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
// 热易商家
|
||||
.hot-swiper {
|
||||
margin: 0 $margin $margin $margin;
|
||||
height: 240rpx;
|
||||
|
||||
.hot-box {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border-radius: ($radius/2);
|
||||
background: white;
|
||||
padding: $padding;
|
||||
box-sizing: border-box;
|
||||
|
||||
.hot-vip {
|
||||
position: absolute;
|
||||
top: $padding;
|
||||
left: $padding;
|
||||
background-color: #191919;
|
||||
color: #f3c8a8;
|
||||
font-size: 24rpx;
|
||||
line-height: 32rpx;
|
||||
padding: 0 8rpx;
|
||||
border-radius: 6rpx 6rpx 6rpx 0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.hot-tool {
|
||||
position: absolute;
|
||||
top: 30rpx;
|
||||
right: $padding;
|
||||
;
|
||||
|
||||
.hot-deal {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
text-align: center;
|
||||
box-shadow: 0 0 14rpx rgba(260, 60, 80, .9);
|
||||
background: linear-gradient(to bottom, #e1293f, #f85d31);
|
||||
color: #FFFFFF;
|
||||
font-size: 26rpx;
|
||||
border-radius: 50%;
|
||||
padding-top: 25rpx;
|
||||
box-sizing: border-box;
|
||||
font-size: 24rpx;
|
||||
|
||||
.hot-deal-number {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cover {
|
||||
position: absolute;
|
||||
left: $padding;
|
||||
top: $padding;
|
||||
width: calc(198rpx - #{$padding * 2});
|
||||
height: calc(198rpx - #{$padding * 2});
|
||||
}
|
||||
|
||||
.hot-content {
|
||||
padding-left: calc(198rpx - #{$padding});
|
||||
|
||||
.hot-title {
|
||||
font-weight: bold;
|
||||
font-size: $title-size-lg;
|
||||
line-height: 40rpx;
|
||||
height: 40rpx;
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
.hot-credit {
|
||||
font-size: 24rpx;
|
||||
display: inline-block;
|
||||
font-weight: normal;
|
||||
color: #ec652f;
|
||||
border: 2rpx solid #ec652f;
|
||||
line-height: 36rpx;
|
||||
border-radius: 6rpx;
|
||||
padding: 0 6rpx;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.hot-trade,
|
||||
.hot-warrant {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
padding-top: 10rpx;
|
||||
}
|
||||
|
||||
.hot-trade {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
.hot-warrant {
|
||||
display: flex;
|
||||
|
||||
.hot-warrant-text {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.hot-bar {
|
||||
display: flex;
|
||||
width: 50%;
|
||||
margin-top: 4rpx;
|
||||
|
||||
.hot-bar-color {
|
||||
background: #ebebeb;
|
||||
border-left: 2rpx solid transparent;
|
||||
border-right: 2rpx solid transparent;
|
||||
width: calc(100% - 50rpx);
|
||||
border-radius: 60rpx;
|
||||
margin: 6rpx 10rpx 0 0;
|
||||
height: 18rpx;
|
||||
|
||||
.hot-bar-strip {
|
||||
background-color: #ff8562;
|
||||
border: 1px solid #ff8562;
|
||||
border-radius: 10px;
|
||||
box-shadow: 1vw 3vh 10vh rgba(168, 7, 7, 0.8);
|
||||
background-size: 3em 3em;
|
||||
background-image: linear-gradient(-45deg, transparent 0em, transparent 0.8em, #ec3950 0.9em, #ec3950 2.1em, transparent 2.1em, transparent 2.9em, #ec3950 3.1em);
|
||||
height: 14rpx;
|
||||
border-radius: 60rpx;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
height: 100%;
|
||||
background-image: linear-gradient(to bottom, #db152e, rgba(168, 7, 7, 0.6) 15%, transparent 60%, #db152e);
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hot-bar-per {
|
||||
font-size: 20rpx;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
transform: scale(.8);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.credibility {
|
||||
height: calc(108rpx - #{$padding * 2});
|
||||
font-size: $title-size-m;
|
||||
color: $text-gray;
|
||||
}
|
||||
|
||||
.trading {
|
||||
line-height: 40rpx;
|
||||
font-size: $title-size-sm;
|
||||
color: $text-gray;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: $padding;
|
||||
font-size: $title-size-m;
|
||||
background-color: $text-price;
|
||||
color: white;
|
||||
line-height: 50rpx;
|
||||
width: 100rpx;
|
||||
text-align: center;
|
||||
margin-top: -25rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 推荐商家
|
||||
.recommended {
|
||||
white-space: nowrap;
|
||||
|
||||
.item-box {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
background: white;
|
||||
width: 370rpx;
|
||||
margin-left: $margin;
|
||||
border-radius: ($radius/2);
|
||||
padding: ($padding + $padding/2) $padding - 10;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
|
||||
&:last-child {
|
||||
margin-right: $margin;
|
||||
}
|
||||
|
||||
.item-cover {
|
||||
background: #eee;
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
vertical-align: top;
|
||||
border-radius: $radius / 2;
|
||||
}
|
||||
|
||||
.item-vip {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
;
|
||||
top: 20rpx;
|
||||
background-color: #f3ceb3;
|
||||
font-size: 24rpx;
|
||||
line-height: 38rpx;
|
||||
border-radius: 0 6rpx 6rpx 0;
|
||||
display: flex;
|
||||
|
||||
.item-vip-text {
|
||||
background-color: #191919;
|
||||
color: #f3c8a8;
|
||||
padding: 0 6rpx;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.item-vip-tips {
|
||||
padding: 0 6rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.item-title {
|
||||
margin: 20rpx 0 10rpx;
|
||||
}
|
||||
|
||||
.item-trade {
|
||||
font-size: 28rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.item-bar {
|
||||
display: flex;
|
||||
margin: 10rpx 0 20rpx;
|
||||
|
||||
.item-bar-color {
|
||||
background: #ebebeb;
|
||||
border-left: 2rpx solid transparent;
|
||||
border-right: 2rpx solid transparent;
|
||||
width: calc(100% - 50rpx);
|
||||
border-radius: 60rpx;
|
||||
margin: 4rpx 10rpx 0 0;
|
||||
|
||||
.item-bar-strip {
|
||||
background-color: #f3c8a8;
|
||||
border: 2rpx solid #f3c8a8;
|
||||
border-radius: 20rpx;
|
||||
box-shadow: 1vw 3vh 10vh rgba(168, 7, 7, 0.8);
|
||||
background-size: 3em 3em;
|
||||
background-image: linear-gradient(-45deg, transparent 0em, transparent 0.8em, #ee883d 0.9em, #ee883d 2.1em, transparent 2.1em, transparent 2.9em, #ee883d 3.1em);
|
||||
animation: warning-animation 1.4s infinite linear;
|
||||
height: 14rpx;
|
||||
border-radius: 60rpx;
|
||||
position: relative;
|
||||
|
||||
.item-bar-per {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: -6rpx;
|
||||
height: 100%;
|
||||
font-size: 20rpx;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
text-shadow: 0 1px rgba(255, 255, 255, 0.4);
|
||||
transform: scale(.8);
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
height: 100%;
|
||||
background-image: linear-gradient(to bottom, #ee883d, rgba(168, 7, 7, 0.6) 15%, transparent 60%, #ee883d);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
@keyframes warning-animation {
|
||||
0% {
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: 3em 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-bar-strip-img {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
animation: bounce-up 1.5s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes bounce-up {
|
||||
25% {
|
||||
transform: translateY(2rpx);
|
||||
}
|
||||
|
||||
50%,
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: translateY(-2rpx);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-url {
|
||||
background: linear-gradient(to right, #e1293f, #f85d31);
|
||||
color: #FFFFFF;
|
||||
border-radius: 10rpx;
|
||||
display: flex;
|
||||
line-height: 52rpx;
|
||||
padding: 10rpx;
|
||||
box-sizing: border-box;
|
||||
font-size: 28rpx;
|
||||
|
||||
.item-credit {
|
||||
font-size: 24rpx;
|
||||
border-radius: 6rpx;
|
||||
background-color: #FFFFFF;
|
||||
color: #e1293f;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
text-align: left;
|
||||
padding: 0 10rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.item-credit-img {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
margin: 12rpx 8rpx 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.item-btn {
|
||||
padding-left: 20rpx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
|
||||
image {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
margin-top: 12rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 模块标题
|
||||
.block-title {
|
||||
padding: $padding;
|
||||
@@ -866,4 +512,13 @@
|
||||
color: $text-gray;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
// 加水晶
|
||||
.goods-pv{
|
||||
.goods-pv-icon{
|
||||
width: 28rpx;
|
||||
vertical-align: middle;
|
||||
margin-left: 5rpx;
|
||||
margin-bottom: 5rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -27,7 +27,16 @@
|
||||
</view>
|
||||
<view class="lists">
|
||||
<!-- 优选商品 -->
|
||||
<goods-list :list="searchArr" priceType="CNY" @on-goods="onGoods" />
|
||||
<goods-list :list="searchArr" priceType="CNY" @on-goods="onGoods">
|
||||
<template #statistics="good">
|
||||
<view class="goods-pv">
|
||||
<block v-if="good.value.price.pv > 0">
|
||||
+ {{good.value.price.pv}}
|
||||
<image class="goods-pv-icon" src="/static/icons/crystal-icon.png" mode="widthFix" />
|
||||
</block>
|
||||
</view>
|
||||
</template>
|
||||
</goods-list>
|
||||
</view>
|
||||
<!-- 分页 -->
|
||||
<uni-load-more :status="pageStatus" :iconSize="16" v-if="searchArr.length > 0" />
|
||||
@@ -300,4 +309,13 @@
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
// 加水晶
|
||||
.goods-pv{
|
||||
.goods-pv-icon{
|
||||
width: 28rpx;
|
||||
vertical-align: middle;
|
||||
margin-left: 5rpx;
|
||||
margin-bottom: 5rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user