180 lines
3.2 KiB
Vue
180 lines
3.2 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">{{ sumUser.total }}</text>
|
|
<view class="border border1"></view>
|
|
<text class="num11">昨日新增{{ sumUser.yesterday }}位</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">{{ sumTrans.total }}</text>
|
|
<view class="border border2"></view>
|
|
<text class="num21">昨日新增{{ sumTrans.yesterday }}位</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">{{ sumSearch.total }}</text>
|
|
<view class="border border3"></view>
|
|
<text class="num22">昨日新增{{ sumSearch.yesterday }}位</text>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props:{
|
|
sumUser:{
|
|
type:Object,
|
|
default: {
|
|
"total": 231753,
|
|
"yesterday": 1345
|
|
}
|
|
},
|
|
sumTrans:{
|
|
type:Object,
|
|
default: {
|
|
"total": 231753,
|
|
"yesterday": 1345
|
|
}
|
|
},
|
|
sumSearch:{
|
|
type:Object,
|
|
default: {
|
|
"total": 231753,
|
|
"yesterday": 1345
|
|
}
|
|
}
|
|
},
|
|
}
|
|
</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> |