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.
845 lines
21 KiB
845 lines
21 KiB
<template>
|
|
<page-meta :page-style="themeColor"></page-meta>
|
|
|
|
<div class="index">
|
|
<!-- <u-navbar bgColor="rgba(82, 191, 251,0)" title="" :autoBack="true" leftIconSize="0" placeholder> -->
|
|
<!-- <u-icon name="list" slot="right" color="#333333" size="24" @click="$refs.selectPopup.start()"></u-icon> -->
|
|
<!-- </u-navbar> -->
|
|
<u-navbar bgColor="rgb(55,178,247)" title="" :autoBack="true" leftIconSize="0" placeholder>
|
|
<!-- <u-icon name="list" slot="right" color="#333333" size="24" @click="$refs.selectPopup.start()"></u-icon> -->
|
|
</u-navbar>
|
|
<u-navbar title=" " :autoBack="false" bgColor="transparent" placeholder leftIconSize="0">
|
|
</u-navbar>
|
|
|
|
<z-paging ref="paging" v-model="statisticsList" @query="gethomeStat">
|
|
<!-- <view class="booooo">
|
|
|
|
</view> -->
|
|
<div class="user" @click="userClick">
|
|
|
|
<view class="" v-if="headimg.length > 0">
|
|
<image style="margin-right: 18rpx;" :src="$util.img(headimg)" mode="aspectFill"></image>
|
|
</view>
|
|
<view class="tumin" v-else>
|
|
|
|
</view>
|
|
{{ nickname }}
|
|
</div>
|
|
|
|
<div class="statistics-list">
|
|
<u-row gutter="30" style="flex-wrap: wrap;">
|
|
<u-col span="4" v-for="(item, index) in statisticsList" :key="index"
|
|
@click="toCol(item.url, item.page_param, item.value)" class="line_Bottom">
|
|
<view class="statistics-item">
|
|
<div class="value">{{ item.value | filterCo }}</div>
|
|
<div style="text-align: center;">{{ item.label }}</div>
|
|
</view>
|
|
</u-col>
|
|
</u-row>
|
|
<div class="line"></div>
|
|
<div class="line1"></div>
|
|
</div>
|
|
<!-- 工作台 -->
|
|
|
|
<div class="workbench" :class="ationList.length == 0 ? 'zhanwei' : ''">
|
|
<div class="title">
|
|
<div>工作台</div>
|
|
<div class="df">
|
|
<!-- <div v-if="ationList.length==0" class="edit" style="margin-right: 24rpx;">请编辑自己的权限</div> -->
|
|
<div class="edit" @click="workbenchEdit">编辑</div>
|
|
</div>
|
|
</div>
|
|
<div class="operation">
|
|
<u-row style="flex-wrap: wrap;" gutter="38">
|
|
<u-col span="3" v-for="(item, index) in box ? operationList : ationList" :key="index"
|
|
@click="toPage(item.url)">
|
|
<div class="operation-item" @click="btn(index)">
|
|
<div class="badge" v-if="item.con">{{ item.con | filterCount }}</div>
|
|
<image :src="$util.img(item.img)"></image>
|
|
<div>{{ item.name }}</div>
|
|
</div>
|
|
|
|
</u-col>
|
|
</u-row>
|
|
</div>
|
|
</div>
|
|
|
|
<u-gap height="12" bgColor="#F7F7F7"></u-gap>
|
|
|
|
<!-- 营收简报 -->
|
|
<!-- <div class="revenue">
|
|
<div class="title">
|
|
<div>营收简报</div>
|
|
<uni-datetime-picker v-model="revenueRange" type="daterange">
|
|
<div class="daterange">
|
|
<div>{{revenueRange[0]}} ~ {{revenueRange[1]}}</div>
|
|
<u-icon size="14" name="arrow-down" color="#c7c7c7" style="margin-left: 8rpx;"></u-icon>
|
|
</div>
|
|
</uni-datetime-picker>
|
|
</div>
|
|
<div class="data_show">
|
|
<div class="item">
|
|
<div class="top">订单量</div>
|
|
<div class="middle">1345.34</div>
|
|
<div class="bottom" style="color: #F33B50">比上周期上升12%</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="top">订单金额(元)</div>
|
|
<div class="middle">3455.34</div>
|
|
<div class="bottom" style="color: #30C197">比上周期下降8%</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="top">收款金额(元)</div>
|
|
<div class="middle">1238.77</div>
|
|
<div class="bottom" style="color: #F33B50">比上周期上升66%</div>
|
|
</div>
|
|
</div>
|
|
<div class="subsection">
|
|
<u-subsection style="height: 64rpx;" activeColor="#21BBF3" inactiveColor="#21BBF3" :list="list"
|
|
mode="subsection" :current="sbValue" @change="sbChange"></u-subsection>
|
|
</div>
|
|
|
|
<lineChart ref="lineChart" style="margin-top: 50rpx;"></lineChart>
|
|
</div>
|
|
|
|
<u-gap height="12" bgColor="#F7F7F7"></u-gap>
|
|
<! 我的客户 -->
|
|
<!-- <div class="client">
|
|
<div class="title">
|
|
<div>我的客户</div>
|
|
<uni-datetime-picker v-model="revenueRange" type="daterange">
|
|
<div class="daterange">
|
|
<div>{{revenueRange[0]}} ~ {{revenueRange[1]}}</div>
|
|
<u-icon size="14" name="arrow-down" color="#c7c7c7" style="margin-left: 8rpx;"></u-icon>
|
|
</div>
|
|
</uni-datetime-picker>
|
|
</div>
|
|
<u-row gutter="15" class="client_box" style="flex-wrap: wrap;">
|
|
<u-col :span="6">
|
|
<div class="item">
|
|
<div class="client_desc">本期活跃客户</div>
|
|
<div class="client_number">668</div>
|
|
</div>
|
|
</u-col>
|
|
<u-col :span="6">
|
|
<div class="item">
|
|
<div class="client_desc">本期下单客户</div>
|
|
<div class="client_number">5321</div>
|
|
</div>
|
|
</u-col>
|
|
<u-col :span="6">
|
|
<div class="item">
|
|
<div class="client_desc">本期拉新客户</div>
|
|
<div class="client_number">5321</div>
|
|
</div>
|
|
</u-col>
|
|
<u-col :span="6">
|
|
<div class="item">
|
|
<div class="client_desc">本期拉新佣金</div>
|
|
<div class="client_number"><span class="rmb">￥</span>5326.35</div>
|
|
</div>
|
|
</u-col>
|
|
</u-row>
|
|
</div>
|
|
|
|
<u-gap height="12" bgColor="#F7F7F7"></u-gap>
|
|
<! 我的回款 -->
|
|
<!-- <div class="client">
|
|
<div class="title">
|
|
<div>我的回款</div>
|
|
<uni-datetime-picker v-model="revenueRange" type="daterange">
|
|
<div class="daterange">
|
|
<div>{{revenueRange[0]}} ~ {{revenueRange[1]}}</div>
|
|
<u-icon size="14" name="arrow-down" color="#c7c7c7" style="margin-left: 8rpx;"></u-icon>
|
|
</div>
|
|
</uni-datetime-picker>
|
|
</div>
|
|
<u-row gutter="15" class="client_box" style="flex-wrap: wrap;">
|
|
<u-col :span="6">
|
|
<div class="item">
|
|
<div class="client_desc">当前额度</div>
|
|
<div class="client_number"><span class="rmb">￥</span>100000.00</div>
|
|
</div>
|
|
</u-col>
|
|
<u-col :span="6">
|
|
<div class="item">
|
|
<div class="client_desc">待回款金额</div>
|
|
<div class="client_number"><span class="rmb">￥</span>5326.35</div>
|
|
</div>
|
|
</u-col>
|
|
</u-row>
|
|
</div>
|
|
-->
|
|
</z-paging>
|
|
<userPopup ref="userPopup"></userPopup>
|
|
|
|
<tabbar></tabbar>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import lineChart from "../components/lineChart/lineChart.vue"
|
|
import tabbar from "@/components/pageSalesman/tabbar/tabbar.vue"
|
|
import userPopup from "./components/userPopup.vue"
|
|
import APPUpdate from '@/config/appUpdate.js';
|
|
import uniDatetimePicker from "../components/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue"
|
|
export default {
|
|
components: {
|
|
lineChart,
|
|
tabbar,
|
|
userPopup,
|
|
uniDatetimePicker
|
|
},
|
|
data() {
|
|
return {
|
|
dataList: [{}, {}, {}],
|
|
sbValue: 0,
|
|
list: ['订单量', '订单金额', '收款金额'],
|
|
revenueRange: ['2023-01-20', '2023-02-01'],
|
|
operationList: [],
|
|
ationList: [],
|
|
headimg: '',
|
|
box: false,
|
|
uid: '',
|
|
nickname: '',
|
|
statisticsList: []
|
|
}
|
|
},
|
|
onReady() {},
|
|
onLoad() {
|
|
// #ifdef APP-PLUS
|
|
|
|
// #endif
|
|
APPUpdate(true, true);
|
|
},
|
|
onShow() {
|
|
let _this = this
|
|
|
|
uni.removeStorage({
|
|
key: 'salasman',
|
|
success: function(res) {
|
|
console.log(res, '移除成功');
|
|
}
|
|
});
|
|
// this.gethomeStat();
|
|
this.getInfo();
|
|
},
|
|
// onPullDownRefresh() {
|
|
// this.gethomeStat();
|
|
// },
|
|
methods: {
|
|
gethomeStat() {
|
|
this.$api.sendRequest({
|
|
url: '/api/salasmanorder/homeStat',
|
|
data: {},
|
|
success: res => {
|
|
console.log(res, '统计数字');
|
|
// uni.stopPullDownRefresh()
|
|
let statisticsList = []
|
|
for (let key in res.data) {
|
|
if (res.data.hasOwnProperty(key)) { // 确保属性是对象自身的属性，而不是继承自原型链的
|
|
let item = res.data[key];
|
|
let url = '';
|
|
let page_param = '';
|
|
|
|
// 将每个内部对象转换为具有新属性的新对象
|
|
statisticsList.push({
|
|
type: key,
|
|
label: item.name,
|
|
value: item.num.toString(), // 将数字转换为字符串
|
|
url,
|
|
page_param
|
|
});
|
|
statisticsList.forEach(item => {
|
|
switch (item.type) {
|
|
case 'adjust_money':
|
|
item.url = '';
|
|
item.page_param = '';
|
|
break;
|
|
case 'coupon_money':
|
|
item.url = '';
|
|
item.page_param = '';
|
|
break;
|
|
case 'sales_money':
|
|
item.url = '';
|
|
item.page_param = '';
|
|
break;
|
|
case 'today_member_hy_num':
|
|
item.url =
|
|
'/page_salesman_index/index/top_info/revenue_overview';
|
|
item.page_param = 'active'
|
|
break;
|
|
case 'today_member_new_num':
|
|
item.url =
|
|
'/page_salesman_index/index/top_info/revenue_overview';
|
|
item.page_param = 'new'
|
|
break;
|
|
case 'today_order_get_money':
|
|
item.url =
|
|
'/page_salesman_index/index/top_info/revenue_overview';
|
|
item.page_param = 'get'
|
|
break;
|
|
case 'today_order_money':
|
|
item.url =
|
|
'/page_salesman_index/index/top_info/order_count';
|
|
item.page_param = 'money_count'
|
|
break;
|
|
case 'today_order_num':
|
|
item.url =
|
|
'/page_salesman_index/index/top_info/order_count';
|
|
item.page_param = 'quantity_count'
|
|
break;
|
|
case 'today_order_refund_money':
|
|
item.url =
|
|
'/page_salesman_index/index/top_info/revenue_overview';
|
|
item.page_param = 'lose'
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
})
|
|
this.$refs.paging.complete(statisticsList);
|
|
// console.log(this.statisticsList);
|
|
}
|
|
}
|
|
|
|
}
|
|
})
|
|
},
|
|
getInfo() {
|
|
let _this = this
|
|
this.$api.sendRequest({
|
|
url: '/api/salasman/info',
|
|
data: {},
|
|
success: res => {
|
|
this.uid = res.data.uid
|
|
const authList = uni.getStorageSync("auth" + String(res.data.uid))
|
|
this.headimg = res.data.headimg
|
|
this.nickname = res.data.realname
|
|
|
|
if (!authList || authList.length <= 0) {
|
|
//权限设置
|
|
this.box = true
|
|
this.$api.sendRequest({
|
|
url: '/api/salasman/myauthlists',
|
|
data: {},
|
|
success: res => {
|
|
console.log(res, '权限');
|
|
let q = []
|
|
this.$api.sendRequest({
|
|
url: '/api/salasmanorder/homeRedtotal',
|
|
data: {},
|
|
success: restwo => {
|
|
console.log(restwo.data, '红点');
|
|
q = restwo.data
|
|
let a = []
|
|
res.data.forEach((item, i) => {
|
|
const id2conFiled = {
|
|
15: 'order_pay_no',
|
|
1: 'order_sales_status_no',
|
|
2: 'order_delivery_no',
|
|
16: 'order_comment_no',
|
|
14: 'order_delivery_recive_no',
|
|
4: 'order_wait_no',
|
|
3: 'order_refund_no',
|
|
13: 'message_no',
|
|
23: (item) => {
|
|
item
|
|
.sort =
|
|
16;
|
|
return item
|
|
}
|
|
}
|
|
const getField =
|
|
id2conFiled[
|
|
item.id]
|
|
if (getField) {
|
|
if (typeof getField ===
|
|
'function') {
|
|
item =
|
|
getField(
|
|
item)
|
|
} else {
|
|
item.con = q[
|
|
getField
|
|
]
|
|
}
|
|
}
|
|
a.push(item)
|
|
|
|
})
|
|
_this.operationList = a
|
|
uni.setStorageSync('operationList',
|
|
res
|
|
.data);
|
|
_this.quanxiashez()
|
|
}
|
|
})
|
|
|
|
}
|
|
})
|
|
return
|
|
}
|
|
|
|
//红点设置
|
|
let q = []
|
|
this.$api.sendRequest({
|
|
url: '/api/salasmanorder/homeRedtotal',
|
|
data: {},
|
|
success: restwo => {
|
|
console.log(restwo.data, '红点');
|
|
q = restwo.data
|
|
let a = []
|
|
// console.log(q,'红点11');
|
|
authList.forEach((
|
|
item,
|
|
i) => {
|
|
// console.log(item,'itemitem');
|
|
// "order_sales_status_no": 49,// 待审核1
|
|
// "order_pay_no": 0,// 待付款1
|
|
// "order_delivery_no": 113,// 待发货1
|
|
// "order_delivery_recive_no": 15,// 待收货1
|
|
// "order_comment_no": 27,// 待评价
|
|
// "order_wait_no": 16,// 待确认收款 1
|
|
// "order_wait_yes": 2, // 已确认收款
|
|
// "order_refund_no": 2, // 退款售后
|
|
// "message_no": 2, // 消息通知
|
|
const id2conFiled = {
|
|
15: 'order_pay_no',
|
|
1: 'order_sales_status_no',
|
|
2: 'order_delivery_no',
|
|
16: 'order_comment_no',
|
|
14: 'order_delivery_recive_no',
|
|
4: 'order_wait_no',
|
|
3: 'order_refund_no',
|
|
13: 'message_no',
|
|
23: (item) => {
|
|
item.sort =
|
|
16;
|
|
return item
|
|
}
|
|
}
|
|
const getField = id2conFiled[item.id]
|
|
if (getField) {
|
|
if (typeof getField === 'function') {
|
|
item = getField(item)
|
|
} else {
|
|
item.con = q[getField]
|
|
}
|
|
}
|
|
a.push(item)
|
|
|
|
})
|
|
_this.ationList = a
|
|
}
|
|
})
|
|
|
|
}
|
|
})
|
|
},
|
|
queryList(pageNo, pageSize) {
|
|
this.getInfo()
|
|
this.$api.sendRequest({
|
|
url: '/api/salasmanorder/homeStat',
|
|
data: {},
|
|
success: res => {
|
|
console.log(res, '统计数字');
|
|
this.statisticsList[5].value = res.data.today_member_hy_num.num
|
|
this.statisticsList[4].value = res.data.today_order_money.num
|
|
this.statisticsList[3].value = res.data.today_order_refund_money.num
|
|
this.statisticsList[2].value = res.data.today_member_new_num.num
|
|
this.statisticsList[1].value = res.data.today_order_num.num
|
|
this.statisticsList[0].value = res.data.today_order_get_money.num
|
|
// this.statisticsList[5].label=res.data.today_member_hy_num.name
|
|
}
|
|
})
|
|
this.$refs.paging.complete(this.statisticsList);
|
|
},
|
|
btn(index) {
|
|
console.log(index);
|
|
// uni.navigateTo({
|
|
// url: this.operationList[index].url
|
|
// })
|
|
},
|
|
userClick() {
|
|
this.$refs.userPopup.start()
|
|
},
|
|
workbenchEdit() {
|
|
uni.navigateTo({
|
|
url: `/page_salesman_index/index/edit_workbench/edit_workbench?id=${this.uid}`
|
|
})
|
|
},
|
|
sbChange(item) {
|
|
this.sbValue = item
|
|
},
|
|
toPage(url, page_type = '', value = '') {
|
|
console.log(url)
|
|
setTimeout(() => {
|
|
uni.$emit('val', value)
|
|
}, 500)
|
|
uni.$u.route({
|
|
url,
|
|
params: {
|
|
page_type
|
|
}
|
|
})
|
|
},
|
|
toCol(url, page_type = '', value = '') {
|
|
console.log(url, page_type, value);
|
|
// if (value) {
|
|
console.log(url)
|
|
setTimeout(() => {
|
|
uni.$emit('val', value)
|
|
}, 500)
|
|
uni.$u.route({
|
|
url,
|
|
params: {
|
|
page_type
|
|
}
|
|
})
|
|
// }
|
|
},
|
|
quanxiashez() {
|
|
this.ationList = uni.getStorageSync('auth' + String(this.uid))
|
|
// uni.getStorage({
|
|
// key: String(_this.uid),
|
|
// success: (res) => {
|
|
// console.log(res, 'res444444444444444444444444');
|
|
// // console.log(JSON.parse(res.data), '编辑自己的权限6666666666666');
|
|
// this.ationList = JSON.parse(res.data)
|
|
// },
|
|
|
|
// });
|
|
}
|
|
|
|
|
|
},
|
|
filters: {
|
|
filterCount(num) {
|
|
return num > 100 ? 99 : num
|
|
},
|
|
filterCo(num) {
|
|
// let num;
|
|
// if (num >= 10000) {
|
|
// return (Math.round(num / 100) / 100).toFixed(2) + 'w';
|
|
// } else if (num >= 1) {
|
|
// return num.toFixed(0);
|
|
// } else if (num > 0) {
|
|
// return num.toFixed(2);
|
|
// } else {
|
|
// return '0';
|
|
// }
|
|
|
|
return num
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.zhanwei {
|
|
height: 280rpx;
|
|
}
|
|
|
|
.booooo {
|
|
width: 750rpx;
|
|
height: 330rpx;
|
|
}
|
|
|
|
::v-deep {
|
|
.zp-paging-container-content {
|
|
margin-top: 50rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
}
|
|
|
|
.zp-l-text {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.tumin {
|
|
width: 70rpx;
|
|
height: 70rpx;
|
|
border: 2rpx solid #ccc;
|
|
}
|
|
|
|
.index {
|
|
// -margin-top: 200rpx;
|
|
min-height: 900rpx;
|
|
background: rgb(92, 195, 252);
|
|
// margin-top: 40rpx;
|
|
position: relative;
|
|
display: flex;
|
|
|
|
::v-deep {
|
|
.u-row {
|
|
flex-wrap: wrap;
|
|
|
|
}
|
|
}
|
|
|
|
.title {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: 32rpx;
|
|
font-family: PingFangSC-Semibold, PingFang SC;
|
|
font-weight: 600;
|
|
color: #222222;
|
|
margin-bottom: 40rpx;
|
|
|
|
.edit {
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
}
|
|
|
|
.daterange {
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #666666;
|
|
display: flex;
|
|
align-items: center;
|
|
background: #F6F6F6;
|
|
border-radius: 8rpx;
|
|
height: 44rpx;
|
|
width: 340rpx;
|
|
padding: 0 14rpx 0 20rpx;
|
|
}
|
|
|
|
::v-deep {
|
|
.uni-date {
|
|
flex: 0;
|
|
}
|
|
|
|
.uni-calendar-item__weeks-box .uni-calendar-item--checked,
|
|
.uni-datetime-picker--btn,
|
|
.uni-calendar-item--multiple .uni-calendar-item--before-checked[data-v-39ec3f8e],
|
|
.uni-calendar-item--multiple .uni-calendar-item--after-checked {
|
|
background-color: #21BBF3;
|
|
}
|
|
}
|
|
}
|
|
|
|
.revenue {
|
|
background-color: #fff;
|
|
padding: 48rpx 40rpx;
|
|
|
|
.data_show {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.item {
|
|
width: 28%;
|
|
height: 180rpx;
|
|
padding: 10rpx;
|
|
background: #F7F7F7;
|
|
border-radius: 16rpx;
|
|
display: flex;
|
|
justify-content: space-evenly;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
.top {
|
|
height: 28rpx;
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
}
|
|
|
|
.middle {
|
|
height: 52rpx;
|
|
font-size: 44rpx;
|
|
font-family: DINAlternate-Bold, DINAlternate;
|
|
font-weight: bold;
|
|
color: #222222;
|
|
}
|
|
|
|
.bottom {
|
|
font-size: 20rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.client {
|
|
background: #fff;
|
|
padding: 48rpx 40rpx;
|
|
|
|
.client_box {
|
|
.item {
|
|
box-sizing: border-box;
|
|
padding: 24rpx 40rpx;
|
|
width: 328rpx;
|
|
background: #F7F7F7;
|
|
border-radius: 16rpx;
|
|
margin-bottom: 32rpx;
|
|
|
|
.client_desc {
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
}
|
|
|
|
.client_number {
|
|
font-size: 44rpx;
|
|
font-family: DINAlternate-Bold, DINAlternate;
|
|
font-weight: bold;
|
|
color: #222222;
|
|
|
|
.rmb {
|
|
font-size: 28rpx;
|
|
font-family: DINAlternate-Bold, DINAlternate;
|
|
font-weight: bold;
|
|
color: #222222;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.subsection {
|
|
margin-top: 40rpx;
|
|
|
|
::v-deep {
|
|
.u-subsection__item__text {
|
|
height: 40rpx;
|
|
font-size: 28rpx !important;
|
|
font-weight: 400 !important;
|
|
color: #FFFFFF;
|
|
line-heigsht: 40rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.workbench {
|
|
// height: 940rpx;
|
|
background-color: #fff;
|
|
border-radius: 24rpx 24rpx 0px 0px;
|
|
padding: 32rpx 40rpx 0 40rpx;
|
|
box-sizing: border-box;
|
|
flex: 1;
|
|
margin-bottom: 60rpx;
|
|
box-sizing: border-box;
|
|
|
|
// margin-top: 660rpx;
|
|
.operation {
|
|
::v-deep {
|
|
.u-col-3 {
|
|
padding: 0 !important;
|
|
}
|
|
}
|
|
|
|
.operation-item {
|
|
position: relative;
|
|
text-align: center;
|
|
|
|
|
|
image {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
|
|
margin-bottom: 48rpx;
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC-Regular,
|
|
PingFang SC;
|
|
font-weight: 400;
|
|
color: #222222;
|
|
|
|
.badge {
|
|
z-index: 1;
|
|
border-radius: 50%;
|
|
font-size: 24rpx;
|
|
position: absolute;
|
|
color: #fff;
|
|
text-align: center;
|
|
line-height: 40rpx;
|
|
right: 20rpx;
|
|
top: -14rpx;
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
background: #F33B50;
|
|
border: 2rpx solid #FFFFFF;
|
|
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.statistics-list {
|
|
position: relative;
|
|
margin-bottom: 12rpx;
|
|
padding: 0 32rpx;
|
|
// height: 60rpx;
|
|
background-color: rgb(92, 195, 252);
|
|
|
|
.line ,.line1{
|
|
position: absolute;
|
|
width: 90%;
|
|
height: 1px;
|
|
background-color: #fff;
|
|
top: 30%;
|
|
opacity: 0.3;
|
|
left: 50%;
|
|
transform: translate(-50%, -0);
|
|
}
|
|
.line1{
|
|
top: 70%;
|
|
}
|
|
|
|
|
|
.statistics-item {
|
|
padding-left: 32rpx;
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #FFFFFF;
|
|
line-height: 34rpx;
|
|
margin: 32rpx 0;
|
|
|
|
.value {
|
|
font-size: 44rpx;
|
|
font-family: DINAlternate-Bold, DINAlternate;
|
|
font-weight: bold;
|
|
color: #FFFFFF;
|
|
margin-bottom: 14rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
|
|
.user {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 32rpx;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #FFFFFF;
|
|
margin-bottom: 32rpx;
|
|
padding: 0 32rpx;
|
|
margin-top: 160rpx;
|
|
|
|
image {
|
|
width: 70rpx;
|
|
height: 70rpx;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
}
|
|
</style>
|