Browse Source

feat(market): 新增新客签到进度条统计功能

- 在页面中添加新客签到进度条,显示签到进度- 新增 progress 和 box_2_show 数据属性,用于控制进度条显示
- 优化页面布局,为新功能预留空间
- 添加进度条样式,包括进度条容器、进度条、进度点和进度文本
master
liutong 1 year ago
parent
commit
5bf3ba7118
  1. 70
      pages/market/data/index.vue

70
pages/market/data/index.vue

@ -25,7 +25,8 @@
</view>
<view class="title">完成金额</view>
<view class="content">
<text class="strong">100000</text> <text>较上月</text>
<text class="strong">100000</text>
<text>较上月</text>
</view>
<view class="legeng">
@ -37,10 +38,24 @@
<view class="piece" style="background-color:#02a7f0;"></view>
<view class="lable">续费</view>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="title_box" v-show="box_2_show">新客签到</view>
<view class="box_2" v-show="box_2_show">
<view class="progress-container">
<view :style="{ width: progress + '%' }" class="progress-bar">
</view>
<view class="dian" :style="{ left: (progress - 2) + '%' }"></view>
</view>
<view class="progress-text">
<text>0</text>
<text>50</text>
<text>100</text>
</view>
</view>
</view>
@ -129,7 +144,11 @@ export default {
borderColor: "#fff" //
}
}
}
},
//
progress: 50, // 50%
box_2_show: false,//|true=,false=
}
},
onLoad() {
@ -242,6 +261,7 @@ export default {
//
.count_section{
padding: 20rpx 46rpx;
padding-bottom: 60rpx;
background-color: #434544;
color: #fff;
.title_box{
@ -295,6 +315,50 @@ export default {
}
}
//
.box_2 {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 20rpx;
.progress-container {
position: relative;
width: 80%;
height: 4rpx;
background-color: #ccc;
border-radius: 2rpx;
//overflow: hidden;
margin-bottom: 10rpx;
.progress-bar {
height: 100%;
background-color: #45c59f;
border-radius: 2rpx;
}
.dian{
position: absolute;
top: -9rpx;
left: 0rpx;
width: 18rpx;
height: 18rpx;
border-radius: 50%;
background-color: #fff;
}
}
.progress-text {
margin-left: 5%;
width: 85%;
display: flex;
justify-content: space-between;
text {
font-size: 26rpx;
color: #fff;
}
}
}
}
.main_section{

Loading…
Cancel
Save