You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
99 lines
2.1 KiB
99 lines
2.1 KiB
3 years ago
|
<template>
|
||
|
|
<view class="index">
|
||
|
|
<view class="tabs-box acea-row row-around row-middle">
|
||
|
|
<view class="tab-item" :class="active == 0 ? 'tab-item-active' : ''" @click="tabClick(0)">打卡中</view>
|
||
|
|
<view class="tab-item" :class="active == 1 ? 'tab-item-active' : ''" @click="tabClick(1)">已完成</view>
|
||
|
|
</view>
|
||
|
|
<view class="dabang-list-box">
|
||
|
|
<view class="dabang-item">
|
||
|
|
<view class="dabang-info">
|
||
|
|
<view class="bangdan-name line1">连续21天打卡站桩</view>
|
||
|
|
<view class="time">2021.5.28-2021.618</view>
|
||
|
|
<view class="time">30积分</view>
|
||
|
|
</view>
|
||
|
|
<view class="dabang-btm acea-row row-between-wrapper">
|
||
|
|
<view>+30积分</view>
|
||
|
|
<view>打榜成功</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="dabang-item">
|
||
|
|
<view class="dabang-info">
|
||
|
|
<view class="bangdan-name line1">连续21天打卡站桩</view>
|
||
|
|
<view class="time">2021.5.28-2021.618</view>
|
||
|
|
<view class="time">30积分</view>
|
||
|
|
</view>
|
||
|
|
<view class="dabang-btm colR acea-row row-between-wrapper">
|
||
|
|
<view>-30积分</view>
|
||
|
|
<view>打榜失败</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default{
|
||
|
|
data(){
|
||
|
|
return {
|
||
|
|
active : 0
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods:{
|
||
|
|
tabClick(idx){
|
||
|
|
this.active = idx
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="less" scoped>
|
||
|
|
.tabs-box{
|
||
|
|
width: 100%;
|
||
|
|
height:98rpx;
|
||
|
|
font-size: 32rpx;
|
||
|
|
color: #222;
|
||
|
|
background: #fff;
|
||
|
|
border-top: 1px solid #f2f2f2;
|
||
|
|
.tab-item{
|
||
|
|
height: 100%;
|
||
|
|
line-height: 98rpx;
|
||
|
|
}
|
||
|
|
.tab-item-active{
|
||
|
|
font-size: 40rpx;
|
||
|
|
font-size: 500;
|
||
|
|
border-bottom: 4rpx solid #EB5744;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.dabang-list-box{
|
||
|
|
width: 100%;
|
||
|
|
padding: 0 32rpx;
|
||
|
|
.dabang-item{
|
||
|
|
width: 100%;
|
||
|
|
background: #fff;
|
||
|
|
color: #fff;
|
||
|
|
margin-top: 28rpx;
|
||
|
|
font-size: 28rpx;
|
||
|
|
border-radius: 10rpx;
|
||
|
|
overflow: hidden;
|
||
|
|
.dabang-info{
|
||
|
|
height: 200rpx;
|
||
|
|
padding-left: 24rpx;
|
||
|
|
padding-top: 24rpx;
|
||
|
|
background: linear-gradient(148deg, #B4B6C4 0%, #C5CAD6 100%);
|
||
|
|
.bangdan-name{
|
||
|
|
font-size: 50rpx;
|
||
|
|
line-height: 80rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.dabang-btm{
|
||
|
|
padding: 0 56rpx 0 24rpx;
|
||
|
|
height: 80rpx;
|
||
|
|
color: #8FB85B;
|
||
|
|
}
|
||
|
|
.colR{
|
||
|
|
color:#EB5744;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|