Commit 1e8a9849929b4ed7f10ad34587f6dc93239586c6
1 parent
3bd07a61
购好物，首页和折扣专区列表页，运营需求修改倒计时样式~
Showing
6 changed files
with
38 additions
and
13 deletions
src/components/countDownCom/countDownCom.less
| ... | ... | @@ -116,20 +116,34 @@ |
| 116 | 116 | } |
| 117 | 117 | } |
| 118 | 118 | &.style-6 { |
| 119 | + position: relative; | |
| 119 | 120 | background-color: rgba(252, 21, 65, 0.06); |
| 120 | - padding: 0 7px 0 0; | |
| 121 | + padding: 0 10px 0 46px; | |
| 121 | 122 | height: 32px; |
| 122 | 123 | border: 1px solid #FC1515; |
| 123 | 124 | border-radius: 18px; |
| 124 | 125 | overflow: hidden; |
| 125 | 126 | .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; | |
| 127 | + position: absolute; | |
| 128 | + top: -1px; | |
| 129 | + left: -2px; | |
| 130 | + z-index: 1; | |
| 131 | + height: 100%; | |
| 132 | + .text { | |
| 133 | + background-color: #FC1515; | |
| 134 | + padding: 0 10px 0 7px; | |
| 135 | + color: #FCF7F1; | |
| 136 | + font-size: 18px; | |
| 137 | + font-weight: bold; | |
| 138 | + height: 100%; | |
| 139 | + line-height: 32px; | |
| 140 | + border-radius: 18px; | |
| 141 | + } | |
| 142 | + .prefix-img { | |
| 143 | + display: block; | |
| 144 | + width: 52px; | |
| 145 | + height: 34px; | |
| 146 | + } | |
| 133 | 147 | } |
| 134 | 148 | .container { |
| 135 | 149 | .block { | ... | ... |
src/components/countDownCom/countDownCom.vue
| ... | ... | @@ -2,11 +2,14 @@ |
| 2 | 2 | <div class="count-down-com" v-if="time"> |
| 3 | 3 | <van-count-down class="count-down" :class="'style-' + sty" :time="time" @finish="finish"> |
| 4 | 4 | <template v-slot="timeData"> |
| 5 | + <div class="tips" v-if="sty == '6' && (prefix || prefixImg)"> | |
| 6 | + <div class="text" v-if="prefix">{{prefix}}</div> | |
| 7 | + <img :src="prefixImg" class="prefix-img" v-if="prefixImg" /> | |
| 8 | + </div> | |
| 5 | 9 | <div class="container" v-if="timeData.days > 0 && type != 'h'"> |
| 6 | 10 | <span class="block transparent">{{ timeData.days }}</span> |
| 7 | 11 | <span class="colon">天</span> |
| 8 | 12 | </div> |
| 9 | - <div class="tips" v-if="sty == '6' && prefix">{{prefix}}</div> | |
| 10 | 13 | <div class="container"> |
| 11 | 14 | <span class="block" :class="{'big-block': ((timeData.days * 24) + timeData.hours) >= 100}" v-if="type == 'h'">{{ (timeData.days * 24) + timeData.hours }}</span> |
| 12 | 15 | <span class="block" v-else>{{ timeData.hours }}</span> |
| ... | ... | @@ -38,7 +41,7 @@ |
| 38 | 41 | |
| 39 | 42 | } |
| 40 | 43 | }, |
| 41 | - props: ["time", "sty", 'type', 'prefix'], | |
| 44 | + props: ["time", "sty", 'type', 'prefix', 'prefixImg'], | |
| 42 | 45 | methods: { |
| 43 | 46 | |
| 44 | 47 | /** | ... | ... |
src/pages/discountList/discountList.less
| ... | ... | @@ -62,6 +62,7 @@ |
| 62 | 62 | margin: 0 auto; |
| 63 | 63 | width: 630px; |
| 64 | 64 | height: auto; |
| 65 | + line-height: 36px; | |
| 65 | 66 | .state { |
| 66 | 67 | display: flex; |
| 67 | 68 | justify-content: flex-start; |
| ... | ... | @@ -79,10 +80,16 @@ |
| 79 | 80 | font-size: 24px; |
| 80 | 81 | font-weight: 400; |
| 81 | 82 | } |
| 83 | + & + .count-down-com { | |
| 84 | + margin-left: 10px; | |
| 85 | + } | |
| 82 | 86 | } |
| 83 | 87 | & + .section { |
| 84 | 88 | margin-top: 40px; |
| 85 | 89 | } |
| 90 | + & + .column-list-container { | |
| 91 | + margin-top: 20px; | |
| 92 | + } | |
| 86 | 93 | } |
| 87 | 94 | .column-list-container { |
| 88 | 95 | .section { | ... | ... |
src/pages/discountList/discountList.vue
| ... | ... | @@ -51,9 +51,10 @@ |
| 51 | 51 | </div> |
| 52 | 52 | |
| 53 | 53 | <!-- 倒计时组件 --> |
| 54 | - <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')" | |
| 54 | + <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')" | |
| 55 | 55 | :time="parseInt(tabs.list[tabs.active].discountTime) * 1000" |
| 56 | - sty="5"> | |
| 56 | + sty="6" | |
| 57 | + prefixImg='static/img/icon_discount.png'> | |
| 57 | 58 | </count-down-com> |
| 58 | 59 | </div> |
| 59 | 60 | ... | ... |
src/pages/optimization2/optimization2.vue
static/img/icon_discount.png
0 → 100644
1.23 KB