168 lines
3.0 KiB
Vue
168 lines
3.0 KiB
Vue
<template>
|
|
<view class="root u-flex">
|
|
<view class="left">
|
|
<view>
|
|
<u-image src="/static/statistics/sy_icon_ljyh.png"
|
|
width="356rpx"
|
|
height="320rpx"
|
|
/>
|
|
</view>
|
|
<text class="text1">累计用户</text>
|
|
<text class="num1">{{ statNum.all_user_num }}</text>
|
|
<view class="border border1"></view>
|
|
<text class="num11">昨日新增{{ statNum.yesterday_user_num }}位</text>
|
|
|
|
</view>
|
|
<view class="right">
|
|
<view class="right1">
|
|
<view>
|
|
<u-image src="/static/statistics/sy_icon_ljzd1.png"
|
|
width="340rpx"
|
|
height="150rpx"
|
|
/>
|
|
</view>
|
|
<text class="text2">累计转店</text>
|
|
<text class="num2">{{ statNum.all_trans_num }}</text>
|
|
<view class="border border2"></view>
|
|
<text class="num21">昨日新增{{ statNum.yesterday_trans_num }}位</text>
|
|
|
|
</view>
|
|
<view class="right2">
|
|
<view>
|
|
<u-image src="/static/statistics/sy_icon_ljzd0.png"
|
|
width="340rpx"
|
|
height="150rpx"
|
|
/>
|
|
</view>
|
|
<text class="text3">累计找店</text>
|
|
<text class="num3">{{ statNum.all_find_num }}</text>
|
|
<view class="border border3"></view>
|
|
<text class="num22">昨日新增{{ statNum.yesterday_find_num }}位</text>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
export default {
|
|
props:{
|
|
statNum :{
|
|
type:Object,
|
|
default(){
|
|
return {
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.root {
|
|
position: relative;
|
|
margin: 10px 0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-weight: 800;
|
|
text {
|
|
font-size: 26rpx;
|
|
font-weight: 800;
|
|
}
|
|
.border {
|
|
width: 229rpx;
|
|
height: 49rpx;
|
|
background: #FFFFFF;
|
|
box-shadow: 0px 1px 2px 0px rgba(178,247,214,0.42);
|
|
border-radius: 0px 24px 24px 0px;
|
|
opacity: 0.7;
|
|
}
|
|
.left {
|
|
color: #06562E;
|
|
position: relative;
|
|
.text1 {
|
|
position: absolute;
|
|
top: 39rpx;
|
|
left: 33rpx;
|
|
}
|
|
.num1 {
|
|
position: absolute;
|
|
top: 76rpx;
|
|
left: 33rpx;
|
|
font-size: 34rpx;
|
|
}
|
|
.num11 {
|
|
position: absolute;
|
|
top: 150rpx;
|
|
left: 51rpx;
|
|
line-height: 37rpx;
|
|
z-index: 1;
|
|
}
|
|
.border1 {
|
|
position: absolute;
|
|
top: 144rpx;
|
|
left: 33rpx;
|
|
}
|
|
}
|
|
.right {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
.right1 {
|
|
position: relative;
|
|
color: #7C441C;
|
|
.border2 {
|
|
position: absolute;
|
|
top: 60rpx;
|
|
left: 20rpx;
|
|
}
|
|
.text2 {
|
|
position: absolute;
|
|
top: 14rpx;
|
|
left: 20rpx;
|
|
}
|
|
.num2 {
|
|
position: absolute;
|
|
top: 9rpx;
|
|
left: 144rpx;
|
|
font-size: 34rpx;
|
|
}
|
|
.num21 {
|
|
position: absolute;
|
|
left: 38rpx;
|
|
top: 66rpx;
|
|
}
|
|
}
|
|
.right2 {
|
|
position: relative;
|
|
color: #912C2C;
|
|
.border3 {
|
|
position: absolute;
|
|
top: 71rpx;
|
|
left: 20rpx;
|
|
}
|
|
.text3 {
|
|
position: absolute;
|
|
left: 20rpx;
|
|
top: 25rpx;
|
|
}
|
|
.num3 {
|
|
position: absolute;
|
|
top: 20rpx;
|
|
left: 144rpx;
|
|
font-size: 34rpx;
|
|
}
|
|
.num22 {
|
|
position: absolute;
|
|
left: 38rpx;
|
|
top: 77rpx;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
</style> |