Commit 43c063c7 authored by 罗超's avatar 罗超

修改商品页

parent 954a0c03
<template>
<view
class="her-scoller"
:style="{
'background-color': goodsInfo.backgroundColor,
'background-image': goodsInfo.backgroundPicUrl,
<view style="background-repeat: no-repeat;background-size: 100% auto;" :style="{
'background-image': `url(${goodsInfo.bgImg})`,
'background-color':`${goodsInfo.backgroundColor}`,
'border-color': goodsInfo.goodsStyle == 2 ? 'rgb(226, 226, 226)' : '',
}"
>
'paddingTop':`${goodsInfo.bgPaddingTop!=''?goodsInfo.bgPaddingTop:0}px`,
'paddingBottom':`${goodsInfo.bgPaddingBottom!=''?goodsInfo.bgPaddingBottom:0}px`,
'marginLeft':`${goodsInfo.bgPaddingLeft!=''?goodsInfo.bgPaddingLeft:0}px`,
'marginRight':`${goodsInfo.bgPaddingRight!=''?goodsInfo.bgPaddingRight:0}px`,
}">
<view
class="her-scoller">
<view
class="good-five"
@click="openGood(item)"
......@@ -19,11 +23,21 @@
}"
>
<view class="tips" v-if="goodsInfo.showGoodsTag"
><image
>
<image
:src="goodsInfo.goodsTagPicUrl"
mode="widthFix"
style="width: 100%"
/></view>
style="width: 100%" v-if="goodsInfo.goodsTagPicUrl.indexOf('goods-tag-xp.png')==-1"/>
<span style="background: #F7DFA4;border-radius: 4rpx;padding:4rpx 8rpx;font-size: 18rpx;color: #584825;">新品首发</span>
</view>
<view style="position: absolute; z-index: 2; top:135rpx;left:12rpx;right: 12rpx;display: flex;font-size: 18rpx;color:#FFF">
<view style="height: 24rpx;line-height: 24prx;padding: 0 8rpx;background-color: #18A86B;">
{{item.thirdname.split('·')[0]}}
</view>
<view style="width:1px;flex:1;height: 24rpx;line-height: 24prx;padding: 0 8rpx;background-color: rgba(0,0,0,.4);">
{{item.startDate?item.startDate:item.thirdname.split('·')[1]}}
</view>
</view>
<view class="img-box-style5">
<image
style="width: 100%; height: 100%; border-radius: 10rpx 10rpx 0 0"
......@@ -35,20 +49,24 @@
<view class="good-name" v-if="goodsInfo.showGoodsName">{{
item.name
}}</view>
<view class="good-sub-name" style="height: 35rpx">
<!-- <view class="good-sub-name" style="height: 35rpx">
<template v-if="item.subname">{{ item.subname }}</template>
</view>
</view> -->
<view class="good-price-info">
<view class="price">
<view class="good-sub-name" style="flex: 1">{{
<view class="price" style="display: flex; align-items: center;">
<!-- <view class="good-sub-name" style="flex: 1">{{
item.thirdname
}}</view>
<span>
{{ goodsInfo.showGoodsPrice ? getPrice(item.OriginalPrice) : "" }}
}}</view> -->
<span style="width: 1px; flex:1">
<text style="font-weight: bold;font-size: 22rpx;color: #080A09;margin-right: 5rpx;">¥</text>
{{ goodsInfo.showGoodsPrice ? item.price : "" }}
</span>
<span style="font-size: 18rpx;color: #B99846;">
{{item.startCity?item.startCity:''}}
</span>
<!-- <span style='text-decoration: line-through;font-size: 10px;color: gray;font-family: aa;'>原价:{{goodsInfo.showGoodsPrice ? getPrice(item.OriginalPrice) : ''}}</span> -->
</view>
<view
<!-- <view
class="buy"
v-if="goodsInfo.showBuyBtn"
@click.stop="showSkuHandler(item)"
......@@ -85,7 +103,7 @@
>
{{ goodsInfo.buyBtnText }}
</u-button>
</view>
</view> -->
</view>
</view>
</view>
......@@ -102,6 +120,7 @@
@gbAuth="gbAuth"
></auth>
</view>
</view>
</template>
<script>
import goodSku from "../goods/goodsku";
......@@ -124,6 +143,7 @@ export default {
},
created() {
this.mainColor = this.$uiConfig.mainColor;
console.log(this.goodsInfo)
},
methods: {
openGood(item) {
......@@ -199,39 +219,44 @@ export default {
position: relative;
margin-right: 30rpx;
display: inline-block;
width: 560rpx;
box-shadow: 0px 10px 30px 0px rgba(36, 36, 36, 0.2);
border-radius: 20rpx;
width: 265rpx;
/* box-shadow: 0px 10px 30px 0px rgba(36, 36, 36, 0.2); */
border-radius: 12rpx;
overflow: hidden;
}
.her-scoller .good-five .tips {
width: 64rpx;
height: 64rpx;
position: absolute;
top: 0;
left: 0;
top: 8rpx;
left: 10rpx;
z-index: 4;
}
.her-scoller .good-five .img-box-style5 {
/* width: 100%; */
height: 224rpx;
border-radius: 20rpx;
height: 168rpx;
border-top-right-radius: 12rpx;
border-top-left-radius: 12rpx;
overflow: hidden;
}
.her-scoller .good-five .good-info {
padding: 30rpx;
padding: 18rpx;
background-color: #FFF;
}
.her-scoller .good-five .good-info .good-name {
overflow: hidden;
text-overflow: ellipsis;
display: block;
/* -webkit-line-clamp: 2;
-webkit-box-orient: vertical; */
white-space: nowrap;
margin-bottom: 10rpx;
font-size: 26rpx;
width: 100%;
font-weight: 600;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
width: 221rpx;
white-space: break-spaces;
font-weight: bold;
font-size: 22rpx;
color: #080A09;
line-height: 30rpx;
}
.her-scoller .good-five .good-info .good-sub-name {
overflow: hidden;
......@@ -248,14 +273,15 @@ export default {
align-items: center;
}
.her-scoller .good-five .good-info .good-price-info .price {
color: #ff4544;
flex: 1;
font-size: 14px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: flex;
/* flex-direction: column; */
font-weight: 800;
font-size: 34rpx;
color: #FF3166;
}
.her-scoller .good-five .good-info .good-price-info .buy {
width: 24px;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment