效果
思路:
利用相对定位,在倒计时文字上面蒙上一层白色的半透明背景,背景底部添加文字色边框线,并调整细节
最终样式请用真机查看
wxml
<view class="countdown_box">
<view class="countdown">
<view class="countdown_item">
08
<view class="countdown_item_mask"></view>
<view class="countdown_item_text">DAYS</view>
</view>
<view class="countdown_item">
22
<view class="countdown_item_mask"></view>
<view class="countdown_item_text">HOURS</view>
</view>
<view class="countdown_item">
58
<view class="countdown_item_mask"></view>
<view class="countdown_item_text">MINUTES</view>
</view>
<view class="countdown_item">
02
<view class="countdown_item_mask"></view>
<view class="countdown_item_text">SECONDS</view>
</view>
</view>
</view>
css
.countdown_box{
text-align: center;
color: white;
margin: 8px 0 39px;
}
.countdown{
display: flex;
margin-top: 15px;
margin: 15px auto 0;
justify-content: center;
}
.countdown_item{
background-color: white;
width: 47px;
height: 48px;
border-radius: 5px;
line-height: 48px;
color: #28A9AC;
font-weight: 600;
font-size: 27px;
position: relative;
margin-right: 9px;
}
.countdown_item:nth-child(4) {
margin-right: 0;
}
.countdown_item_mask{
width: 100%;
height: 50%;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
background-color: rgba(255,255,255,.4);
border-bottom: 1px solid #28A9AC;
box-sizing: border-box;
position: absolute;
top: 0;
}
.countdown_item_text{
color: white;
font-size: 9px;
font-weight: normal;
height: 20px;
line-height: 20px;
}