购好物，首页和折扣专区列表页，运营需求修改倒计时样式~

王强
1 parent 3bd07a61
Showing 6 changed files with 38 additions and 13 deletions
src/components/countDownCom/countDownCom.less
src/components/countDownCom/countDownCom.vue
src/pages/discountList/discountList.less
src/pages/discountList/discountList.vue
src/pages/optimization2/optimization2.vue
static/img/icon_discount.png
@@ -116,20 +116,34 @@
 			}
 		}
 		&.style-6 {
+			position: relative;
 			background-color: rgba(252, 21, 65, 0.06);
-			padding: 0 7px 0 0;
+			padding: 0 10px 0 46px;
 			height: 32px;
 			border: 1px solid #FC1515;
 			border-radius: 18px;
 			overflow: hidden;
 			.tips {
-				background-color: #FC1515;
-				padding: 0 10px 0 7px;
-				color: #FCF7F1;
-				font-size: 18px;
-				font-weight: bold;
-				line-height: 32px;
-				border-radius: 18px;
+				position: absolute;
+				top: -1px;
+				left: -2px;
+				z-index: 1;
+				height: 100%;
+				.text {
+					background-color: #FC1515;
+					padding: 0 10px 0 7px;
+					color: #FCF7F1;
+					font-size: 18px;
+					font-weight: bold;
+					height: 100%;
+					line-height: 32px;
+					border-radius: 18px;
+				}
+				.prefix-img {
+					display: block;
+					width: 52px;
+					height: 34px;
+				}
 			}
 			.container {
 				.block {
@@ -2,11 +2,14 @@
     <div class="count-down-com" v-if="time">
         <van-count-down class="count-down" :class="'style-' + sty" :time="time" @finish="finish">
             <template v-slot="timeData">
+                <div class="tips" v-if="sty == '6' && (prefix || prefixImg)">
+                    <div class="text" v-if="prefix">{{prefix}}</div>
+                    <img :src="prefixImg" class="prefix-img" v-if="prefixImg" />
+                </div>
                 <div class="container" v-if="timeData.days > 0 && type != 'h'">
                     <span class="block transparent">{{ timeData.days }}</span>
                     <span class="colon">天</span>
                 </div>
-                <div class="tips" v-if="sty == '6' && prefix">{{prefix}}</div>
                 <div class="container">
                     <span class="block" :class="{'big-block': ((timeData.days * 24) + timeData.hours) >= 100}" v-if="type == 'h'">{{ (timeData.days * 24) + timeData.hours }}</span>
                     <span class="block" v-else>{{ timeData.hours }}</span>
@@ -38,7 +41,7 @@
             }
         },
-        props: ["time", "sty", 'type', 'prefix'],
+        props: ["time", "sty", 'type', 'prefix', 'prefixImg'],
         methods: {
             /**
@@ -62,6 +62,7 @@
             margin: 0 auto;
             width: 630px;
             height: auto;
+            line-height: 36px;
             .state {
                 display: flex;
                 justify-content: flex-start;
@@ -79,10 +80,16 @@
                     font-size: 24px;
                     font-weight: 400;
                 }
+                & + .count-down-com {
+                    margin-left: 10px;
+                }
             }
             & + .section {
                 margin-top: 40px;
             }
+            & + .column-list-container {
+                margin-top: 20px;
+            }
         }
         .column-list-container {
             .section {
@@ -51,9 +51,10 @@
                 </div>
                 <!-- 倒计时组件 -->
-                <count-down-com slot="extend" v-if="tabs.list[tabs.active].discountTime && tabs.list[tabs.active].discountTime > 0 && (tabs.list[tabs.active].discountType == '0' || tabs.list[tabs.active].discountType == '1')"
+                <count-down-com v-if="tabs.list[tabs.active].discountTime && tabs.list[tabs.active].discountTime > 0 && (tabs.list[tabs.active].discountType == '0' || tabs.list[tabs.active].discountType == '1')"
                     :time="parseInt(tabs.list[tabs.active].discountTime) * 1000"
-                    sty="5">
+                    sty="6"
+                    prefixImg='static/img/icon_discount.png'>
                 </count-down-com>
             </div>
@@ -58,7 +58,7 @@
                             :time="parseInt(discountTime) * 1000"
                             sty="6"
                             type='h'
-                            prefix='限时'>
+                            prefixImg='static/img/icon_discount.png'>
                         </count-down-com>
                     </text-bg-title-com>