|
|
@ -25,7 +25,8 @@ |
|
|
</view> |
|
|
</view> |
|
|
<view class="title">完成金额</view> |
|
|
<view class="title">完成金额</view> |
|
|
<view class="content"> |
|
|
<view class="content"> |
|
|
<text class="strong">¥100000</text> <text>较上月</text> |
|
|
<text class="strong">¥100000</text> |
|
|
|
|
|
<text>较上月</text> |
|
|
</view> |
|
|
</view> |
|
|
|
|
|
|
|
|
<view class="legeng"> |
|
|
<view class="legeng"> |
|
|
@ -37,10 +38,24 @@ |
|
|
<view class="piece" style="background-color:#02a7f0;"></view> |
|
|
<view class="piece" style="background-color:#02a7f0;"></view> |
|
|
<view class="lable">续费</view> |
|
|
<view class="lable">续费</view> |
|
|
</view> |
|
|
</view> |
|
|
|
|
|
</view> |
|
|
</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> |
|
|
</view> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@ -129,7 +144,11 @@ export default { |
|
|
borderColor: "#fff" // 边框颜色 |
|
|
borderColor: "#fff" // 边框颜色 |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
//新客签到进度条统计 |
|
|
|
|
|
progress: 50, // 初始进度为50% |
|
|
|
|
|
box_2_show: false,//新客签到进度条统计|true=显示,false=隐藏 |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
onLoad() { |
|
|
onLoad() { |
|
|
@ -242,6 +261,7 @@ export default { |
|
|
//统计信息 |
|
|
//统计信息 |
|
|
.count_section{ |
|
|
.count_section{ |
|
|
padding: 20rpx 46rpx; |
|
|
padding: 20rpx 46rpx; |
|
|
|
|
|
padding-bottom: 60rpx; |
|
|
background-color: #434544; |
|
|
background-color: #434544; |
|
|
color: #fff; |
|
|
color: #fff; |
|
|
.title_box{ |
|
|
.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{ |
|
|
.main_section{ |
|
|
|