w-front-end / select_good · Commits

Commit 4f09ccf9065f556f3567552638507c9ef14e59eb

Authored by 王强
1 parent 9e1a57a8

购好物 

1、倒计时组件模板增加sty=6，红色样式
2、倒计时组件分、秒默认两位，小于10秒时前边补0
Inline Side-by-side
Showing 4 changed files with 42 additions and 3 deletions
src/components/countDownCom/countDownCom.less
  View file @4f09ccf
@@ -115,5 +115,42 @@ @@ -115,5 +115,42 @@
115 } 115 }
116 } 116 }
117 } 117 }
  118 + &.style-6 {
  119 + background-color: rgba(252, 21, 65, 0.06);
  120 + padding: 0 7px 0 0;
  121 + height: 32px;
  122 + border: 1px solid #FC1515;
  123 + border-radius: 18px;
  124 + overflow: hidden;
  125 + .tips {
  126 + background-color: #FC1515;
  127 + padding: 0 10px 0 7px;
  128 + color: #FCF7F1;
  129 + font-size: 18px;
  130 + font-weight: bold;
  131 + line-height: 32px;
  132 + border-radius: 18px;
  133 + }
  134 + .container {
  135 + .block {
  136 + background-color: transparent;
  137 + width: unset;
  138 + height: unset;
  139 + color: #FC1541;
  140 + font-size: 20px;
  141 + font-weight: 500;
  142 + &.big-block {
  143 + width: unset;
  144 + }
  145 + }
  146 + .colon {
  147 + margin-left: unset;
  148 + margin-right: -10px;
  149 + color: #FC1541;
  150 + font-size: 24px;
  151 + font-weight: 300;
  152 + }
  153 + }
  154 + }
118 } 155 }
119 } 156 }
120 \ No newline at end of file 157 \ No newline at end of file
src/components/countDownCom/countDownCom.vue
  View file @4f09ccf
@@ -6,15 +6,16 @@ @@ -6,15 +6,16 @@
6 <span class="block transparent">{{ timeData.days }}</span> 6 <span class="block transparent">{{ timeData.days }}</span>
7 <span class="colon">天</span> 7 <span class="colon">天</span>
8 </div> 8 </div>
  9 + <div class="tips" v-if="sty == '6'">限时</div>
9 <div class="container"> 10 <div class="container">
10 <span class="block" :class="{'big-block': ((timeData.days * 24) + timeData.hours) >= 100}" v-if="type == 'h'">{{ (timeData.days * 24) + timeData.hours }}</span> 11 <span class="block" :class="{'big-block': ((timeData.days * 24) + timeData.hours) >= 100}" v-if="type == 'h'">{{ (timeData.days * 24) + timeData.hours }}</span>
11 <span class="block" v-else>{{ timeData.hours }}</span> 12 <span class="block" v-else>{{ timeData.hours }}</span>
12 <span class="colon" v-if="sty == '2' || sty == '5'">时</span> 13 <span class="colon" v-if="sty == '2' || sty == '5'">时</span>
13 <span class="colon" v-else>:</span> 14 <span class="colon" v-else>:</span>
14 - <span class="block">{{ timeData.minutes }}</span> 15 + <span class="block">{{ timeData.minutes >= 10 ? timeData.minutes : '0' + timeData.minutes }}</span>
15 <span class="colon" v-if="sty == '2' || sty == '5'">分</span> 16 <span class="colon" v-if="sty == '2' || sty == '5'">分</span>
16 <span class="colon" v-else>:</span> 17 <span class="colon" v-else>:</span>
17 - <span class="block">{{ timeData.seconds }}</span> 18 + <span class="block">{{ timeData.seconds >= 10 ? timeData.seconds : '0' + timeData.seconds }}</span>
18 <span class="colon" v-if="sty == '2' || sty == '5'">秒</span> 19 <span class="colon" v-if="sty == '2' || sty == '5'">秒</span>
19 </div> 20 </div>
20 </template> 21 </template>
src/components/textBgTitleCom/textBgTitleCom.less
  View file @4f09ccf
@@ -30,6 +30,7 @@ @@ -30,6 +30,7 @@
30 display: flex; 30 display: flex;
31 justify-content: flex-start; 31 justify-content: flex-start;
32 align-items: center; 32 align-items: center;
  33 + flex: 1;
33 .title { 34 .title {
34 color: #4A4A4A; 35 color: #4A4A4A;
35 font-size: 34px; 36 font-size: 34px;
src/pages/optimization2/optimization2.vue
  View file @4f09ccf
@@ -56,7 +56,7 @@ @@ -56,7 +56,7 @@
56 <!-- 倒计时组件 --> 56 <!-- 倒计时组件 -->
57 <count-down-com slot="extend" v-if="discountTime && discountTime > 0 && discountType == '1'" 57 <count-down-com slot="extend" v-if="discountTime && discountTime > 0 && discountType == '1'"
58 :time="parseInt(discountTime) * 1000" 58 :time="parseInt(discountTime) * 1000"
59 - sty="4" 59 + sty="6"
60 type='h'> 60 type='h'>
61 </count-down-com> 61 </count-down-com>
62 </text-bg-title-com> 62 </text-bg-title-com>