mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
docs(CountDown): update custom style demo
This commit is contained in:
parent
5b72e43393
commit
422a0f6402
@ -44,21 +44,27 @@ export default {
|
||||
```html
|
||||
<van-count-down :time="time">
|
||||
<template v-slot="timeData">
|
||||
<span class="item">{{ timeData.hours }}</span>
|
||||
<span class="item">{{ timeData.minutes }}</span>
|
||||
<span class="item">{{ timeData.seconds }}</span>
|
||||
<span class="block">{{ timeData.hours }}</span>
|
||||
<span class="colon">:</span>
|
||||
<span class="block">{{ timeData.minutes }}</span>
|
||||
<span class="colon">:</span>
|
||||
<span class="block">{{ timeData.seconds }}</span>
|
||||
</template>
|
||||
</van-count-down>
|
||||
|
||||
<style>
|
||||
.item {
|
||||
.colon {
|
||||
display: inline-block;
|
||||
margin: 0 4px;
|
||||
color: #ee0a24;
|
||||
}
|
||||
.block {
|
||||
display: inline-block;
|
||||
width: 22px;
|
||||
margin-right: 5px;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
background-color: #1989fa;
|
||||
background-color: #ee0a24;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
@ -52,21 +52,27 @@ export default {
|
||||
```html
|
||||
<van-count-down :time="time">
|
||||
<template v-slot="timeData">
|
||||
<span class="item">{{ timeData.hours }}</span>
|
||||
<span class="item">{{ timeData.minutes }}</span>
|
||||
<span class="item">{{ timeData.seconds }}</span>
|
||||
<span class="block">{{ timeData.hours }}</span>
|
||||
<span class="colon">:</span>
|
||||
<span class="block">{{ timeData.minutes }}</span>
|
||||
<span class="colon">:</span>
|
||||
<span class="block">{{ timeData.seconds }}</span>
|
||||
</template>
|
||||
</van-count-down>
|
||||
|
||||
<style>
|
||||
.colon {
|
||||
display: inline-block;
|
||||
margin: 0 4px;
|
||||
color: #ee0a24;
|
||||
}
|
||||
.item {
|
||||
display: inline-block;
|
||||
width: 22px;
|
||||
margin-right: 5px;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
background-color: #1989fa;
|
||||
background-color: #ee0a24;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
@ -15,9 +15,13 @@
|
||||
<demo-block :title="t('customStyle')">
|
||||
<van-count-down :time="time">
|
||||
<template v-slot="currentTime">
|
||||
<span class="item">{{ currentTime.hours }}</span>
|
||||
<span class="item">{{ currentTime.minutes }}</span>
|
||||
<span class="item">{{ currentTime.seconds }}</span>
|
||||
<div>
|
||||
<span class="block">{{ currentTime.hours }}</span>
|
||||
<span class="colon">:</span>
|
||||
<span class="block">{{ currentTime.minutes }}</span>
|
||||
<span class="colon">:</span>
|
||||
<span class="block">{{ currentTime.seconds }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</van-count-down>
|
||||
</demo-block>
|
||||
@ -103,15 +107,20 @@ export default {
|
||||
margin-left: @padding-md;
|
||||
}
|
||||
|
||||
.item {
|
||||
.colon {
|
||||
display: inline-block;
|
||||
margin: 0 4px;
|
||||
color: @red;
|
||||
}
|
||||
|
||||
.block {
|
||||
display: inline-block;
|
||||
width: 22px;
|
||||
margin-right: 5px;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
background-color: @blue;
|
||||
border-radius: 2px;
|
||||
background-color: @red;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.van-grid {
|
||||
|
@ -351,8 +351,8 @@ exports[`toggle method 1`] = `
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-dropdown-item van-dropdown-item--down" style="top: 0px;">
|
||||
<div class="van-overlay" style="z-index: 2015; animation-duration: 0s; position: absolute;" name="van-fade"></div>
|
||||
<div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0s; z-index: 2016;" name="van-popup-slide-top"></div>
|
||||
<div class="van-overlay" style="z-index: 2017; animation-duration: 0s; position: absolute;" name="van-fade"></div>
|
||||
<div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0s; z-index: 2018;" name="van-popup-slide-top"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -365,7 +365,7 @@ exports[`toggle method 2`] = `
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-dropdown-item van-dropdown-item--down" style="top: 0px;">
|
||||
<div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0s; z-index: 2016; display: none;" name="van-popup-slide-top"></div>
|
||||
<div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0s; z-index: 2018; display: none;" name="van-popup-slide-top"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
Loading…
x
Reference in New Issue
Block a user