Commit 4f09ccf9065f556f3567552638507c9ef14e59eb
1 parent
9e1a57a8
购好物
1、倒计时组件模板增加sty=6，红色样式 2、倒计时组件分、秒默认两位，小于10秒时前边补0
Showing
4 changed files
with
42 additions
and
3 deletions
src/components/countDownCom/countDownCom.less
| ... | ... | @@ -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 | 157 | \ No newline at end of file | ... | ... |
src/components/countDownCom/countDownCom.vue
| ... | ... | @@ -6,15 +6,16 @@ |
| 6 | 6 | <span class="block transparent">{{ timeData.days }}</span> |
| 7 | 7 | <span class="colon">天</span> |
| 8 | 8 | </div> |
| 9 | + <div class="tips" v-if="sty == '6'">限时</div> | |
| 9 | 10 | <div class="container"> |
| 10 | 11 | <span class="block" :class="{'big-block': ((timeData.days * 24) + timeData.hours) >= 100}" v-if="type == 'h'">{{ (timeData.days * 24) + timeData.hours }}</span> |
| 11 | 12 | <span class="block" v-else>{{ timeData.hours }}</span> |
| 12 | 13 | <span class="colon" v-if="sty == '2' || sty == '5'">时</span> |
| 13 | 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 | 16 | <span class="colon" v-if="sty == '2' || sty == '5'">分</span> |
| 16 | 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 | 19 | <span class="colon" v-if="sty == '2' || sty == '5'">秒</span> |
| 19 | 20 | </div> |
| 20 | 21 | </template> | ... | ... |
src/components/textBgTitleCom/textBgTitleCom.less
src/pages/optimization2/optimization2.vue