Skip to content

J
jz_Travel
Commit 43c063c7 authored by 罗超's avatar 罗超
Browse files
Options

修改商品页

parent 954a0c03
Show whitespace changes
Inline Side-by-side
Showing with 147 additions and 121 deletions
components/goods/style5.vue
View file @ 43c063c7
<template> <template>
<view <view style="background-repeat: no-repeat;background-size: 100% auto;" :style="{
class="her-scoller" 'background-image': `url(${goodsInfo.bgImg})`,
:style="{ 'background-color':`${goodsInfo.backgroundColor}`,
'background-color': goodsInfo.backgroundColor,
'background-image': goodsInfo.backgroundPicUrl,
'border-color': goodsInfo.goodsStyle == 2 ? 'rgb(226, 226, 226)' : '', '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 <view
class="good-five" class="good-five"
@click="openGood(item)" @click="openGood(item)"
...@@ -19,11 +23,21 @@ ...@@ -19,11 +23,21 @@
}" }"
> >
<view class="tips" v-if="goodsInfo.showGoodsTag" <view class="tips" v-if="goodsInfo.showGoodsTag"
><image >
<image
:src="goodsInfo.goodsTagPicUrl" :src="goodsInfo.goodsTagPicUrl"
mode="widthFix" mode="widthFix"
style="width: 100%" style="width: 100%" v-if="goodsInfo.goodsTagPicUrl.indexOf('goods-tag-xp.png')==-1"/>
/></view> <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"> <view class="img-box-style5">
<image <image
style="width: 100%; height: 100%; border-radius: 10rpx 10rpx 0 0" style="width: 100%; height: 100%; border-radius: 10rpx 10rpx 0 0"
...@@ -35,20 +49,24 @@ ...@@ -35,20 +49,24 @@
<view class="good-name" v-if="goodsInfo.showGoodsName">{{ <view class="good-name" v-if="goodsInfo.showGoodsName">{{
item.name item.name
}}</view> }}</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> <template v-if="item.subname">{{ item.subname }}</template>
</view> </view> -->
<view class="good-price-info"> <view class="good-price-info">
<view class="price"> <view class="price" style="display: flex; align-items: center;">
<view class="good-sub-name" style="flex: 1">{{ <!-- <view class="good-sub-name" style="flex: 1">{{
item.thirdname item.thirdname
}}</view> }}</view> -->
<span> <span style="width: 1px; flex:1">
{{ goodsInfo.showGoodsPrice ? getPrice(item.OriginalPrice) : "" }} <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>
<!-- <span style='text-decoration: line-through;font-size: 10px;color: gray;font-family: aa;'>原价:{{goodsInfo.showGoodsPrice ? getPrice(item.OriginalPrice) : ''}}</span> --> <!-- <span style='text-decoration: line-through;font-size: 10px;color: gray;font-family: aa;'>原价:{{goodsInfo.showGoodsPrice ? getPrice(item.OriginalPrice) : ''}}</span> -->
</view> </view>
<view <!-- <view
class="buy" class="buy"
v-if="goodsInfo.showBuyBtn" v-if="goodsInfo.showBuyBtn"
@click.stop="showSkuHandler(item)" @click.stop="showSkuHandler(item)"
...@@ -85,7 +103,7 @@ ...@@ -85,7 +103,7 @@
> >
{{ goodsInfo.buyBtnText }} {{ goodsInfo.buyBtnText }}
</u-button> </u-button>
</view> </view> -->
</view> </view>
</view> </view>
</view> </view>
...@@ -102,6 +120,7 @@ ...@@ -102,6 +120,7 @@
@gbAuth="gbAuth" @gbAuth="gbAuth"
></auth> ></auth>
</view> </view>
</view>
</template> </template>
<script> <script>
import goodSku from "../goods/goodsku"; import goodSku from "../goods/goodsku";
...@@ -124,6 +143,7 @@ export default { ...@@ -124,6 +143,7 @@ export default {
}, },
created() { created() {
this.mainColor = this.$uiConfig.mainColor; this.mainColor = this.$uiConfig.mainColor;
console.log(this.goodsInfo)
}, },
methods: { methods: {
openGood(item) { openGood(item) {
...@@ -199,39 +219,44 @@ export default { ...@@ -199,39 +219,44 @@ export default {
position: relative; position: relative;
margin-right: 30rpx; margin-right: 30rpx;
display: inline-block; display: inline-block;
width: 560rpx; width: 265rpx;
box-shadow: 0px 10px 30px 0px rgba(36, 36, 36, 0.2); /* box-shadow: 0px 10px 30px 0px rgba(36, 36, 36, 0.2); */
border-radius: 20rpx; border-radius: 12rpx;
overflow: hidden;
} }
.her-scoller .good-five .tips { .her-scoller .good-five .tips {
width: 64rpx; width: 64rpx;
height: 64rpx; height: 64rpx;
position: absolute; position: absolute;
top: 0; top: 8rpx;
left: 0; left: 10rpx;
z-index: 4; z-index: 4;
} }
.her-scoller .good-five .img-box-style5 { .her-scoller .good-five .img-box-style5 {
/* width: 100%; */ /* width: 100%; */
height: 224rpx; height: 168rpx;
border-radius: 20rpx; border-top-right-radius: 12rpx;
border-top-left-radius: 12rpx;
overflow: hidden; overflow: hidden;
} }
.her-scoller .good-five .good-info { .her-scoller .good-five .good-info {
padding: 30rpx; padding: 18rpx;
background-color: #FFF;
} }
.her-scoller .good-five .good-info .good-name { .her-scoller .good-five .good-info .good-name {
overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
display: block; display: -webkit-box;
/* -webkit-line-clamp: 2; -webkit-line-clamp: 2;
-webkit-box-orient: vertical; */ -webkit-box-orient: vertical;
white-space: nowrap; overflow: hidden;
margin-bottom: 10rpx; width: 221rpx;
font-size: 26rpx; white-space: break-spaces;
width: 100%; font-weight: bold;
font-weight: 600; font-size: 22rpx;
color: #080A09;
line-height: 30rpx;
} }
.her-scoller .good-five .good-info .good-sub-name { .her-scoller .good-five .good-info .good-sub-name {
overflow: hidden; overflow: hidden;
...@@ -248,14 +273,15 @@ export default { ...@@ -248,14 +273,15 @@ export default {
align-items: center; align-items: center;
} }
.her-scoller .good-five .good-info .good-price-info .price { .her-scoller .good-five .good-info .good-price-info .price {
color: #ff4544;
flex: 1; flex: 1;
font-size: 14px;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
display: flex; display: flex;
/* flex-direction: column; */ /* flex-direction: column; */
font-weight: 800;
font-size: 34rpx;
color: #FF3166;
} }
.her-scoller .good-five .good-info .good-price-info .buy { .her-scoller .good-five .good-info .good-price-info .buy {
width: 24px; 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