修改商品页

components/goods/style5.vue

 <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;