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
22 KiB
845 lines
22 KiB
<!--数据-首页-->
|
|
<template>
|
|
<view class="main_box">
|
|
<!--自定义导航栏-->
|
|
<view class="navbar_section">
|
|
<view class="title">数据</view>
|
|
<view class="statistics-btn" @click="goToStatistics">
|
|
<text>统计表格</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 市场人员展示-->
|
|
<view v-if="infoData.role_type == 'market_type'">
|
|
<view class="count_section">
|
|
<view class="title_box">业绩统计</view>
|
|
<view class="box_1">
|
|
<view class="left">
|
|
<view class="charts-box">
|
|
<qiun-data-charts
|
|
type="ring"
|
|
:opts="opts"
|
|
:chartData="chartData"
|
|
/>
|
|
</view>
|
|
</view>
|
|
<view class="right">
|
|
<view class="title">本周已分配</view>
|
|
<view class="content">
|
|
<text class="strong">{{infoData.num_1}}人</text>
|
|
</view>
|
|
<view class="title">本周未分配</view>
|
|
<view class="content">
|
|
<text class="strong">{{infoData.num_2}}人</text>
|
|
<!-- <text>较上月</text>-->
|
|
</view>
|
|
|
|
<view class="legeng">
|
|
<view class="item">
|
|
<view class="piece" style="background-color: #45c59f;"></view>
|
|
<view class="lable">已分配</view>
|
|
|
|
<view class="item">
|
|
<view class="piece" style="background-color:#02a7f0;"></view>
|
|
<view class="lable">未分配</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 class="main_section">
|
|
<view class="tag_section">
|
|
<view :class="['left',tagType=='1'?'select':'']" @click="changeTag('1')">统计分析</view>
|
|
<view :class="['right',tagType=='2'?'select':'']" @click="changeTag('2')">统计排名</view>
|
|
</view>
|
|
|
|
<!-- 销售分析-->
|
|
<view class="section_box_1" v-if="tagType=='1'">
|
|
<view class="left">
|
|
<qiun-data-charts
|
|
type="funnel"
|
|
:opts="opts_2"
|
|
:chartData="chartData_2"
|
|
/>
|
|
</view>
|
|
<view class="right">
|
|
<view class="item">
|
|
<view class="title" style="color: #12E7E8;">
|
|
已分配<text>({{infoData.num_1_rate}}%)</text>
|
|
</view>
|
|
<view class="title" style="color: #12E7E8;">
|
|
{{infoData.num_1}}<text>人</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="item">
|
|
<view class="title" style="color: #4DA3FF;">
|
|
未分配<text>({{infoData.num_2_rate}}%)</text>
|
|
</view>
|
|
<view class="title" style="color: #4DA3FF;">
|
|
{{infoData.num_2}}<text>人</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="item">
|
|
<view class="title" style="color: #FFCB31;">
|
|
本周拉新<text>({{infoData.num_3_rate}}%)</text>
|
|
</view>
|
|
<view class="title" style="color: #FFCB31;">
|
|
{{infoData.total_1}}<text>人</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 销售排名-->
|
|
<view class="section_box_2" v-else>
|
|
<view class="itme" v-for="(v,k) in infoData.staff_list" :key="k">
|
|
<view class="title">{{k+1}} {{v.name}}</view>
|
|
<view class="money">{{v.goal}}人</view>
|
|
<view class="plan">
|
|
<fui-progress :percent="getPercent(v.wx_yj,v.goal)" height="15" radius="100" background="#e4e4e4" activeColor="#4bced0"></fui-progress>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 销售人员展示-->
|
|
<view v-else>
|
|
<view class="count_section">
|
|
<view class="title_box">业绩统计</view>
|
|
<view class="box_1">
|
|
<view class="left">
|
|
<view class="charts-box">
|
|
<qiun-data-charts
|
|
type="ring"
|
|
:opts="opts"
|
|
:chartData="chartData"
|
|
/>
|
|
</view>
|
|
</view>
|
|
<view class="right">
|
|
<view class="title">已成交</view>
|
|
<view class="content">
|
|
<text class="strong">{{infoData.num_1}}人</text>
|
|
</view>
|
|
<view class="title">未成交</view>
|
|
<view class="content">
|
|
<text class="strong">{{infoData.num_2}}人</text>
|
|
<!-- <text>较上月</text>-->
|
|
</view>
|
|
|
|
<view class="legeng">
|
|
<view class="item">
|
|
<view class="piece" style="background-color: #45c59f;"></view>
|
|
<view class="lable">已成交</view>
|
|
|
|
<view class="item">
|
|
<view class="piece" style="background-color:#02a7f0;"></view>
|
|
<view class="lable">未成交</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="main_section">
|
|
<view class="tag_section">
|
|
<view :class="['left',tagType=='1'?'select':'']" @click="changeTag('1')">统计分析</view>
|
|
<view :class="['right',tagType=='2'?'select':'']" @click="changeTag('2')">统计排名</view>
|
|
</view>
|
|
|
|
<!-- 销售分析-->
|
|
<view class="section_box_1" v-if="tagType=='1'">
|
|
<view class="left">
|
|
<qiun-data-charts
|
|
type="funnel"
|
|
:opts="opts_2"
|
|
:chartData="chartData_2"
|
|
/>
|
|
</view>
|
|
<view class="right">
|
|
<view class="item">
|
|
<view class="title" style="color: #12E7E8;">
|
|
已成交<text>({{infoData.num_1_rate}}%)</text>
|
|
</view>
|
|
<view class="title" style="color: #12E7E8;">
|
|
{{infoData.num_1}}<text>人</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="item">
|
|
<view class="title" style="color: #4DA3FF;">
|
|
未成交<text>({{infoData.num_2_rate}}%)</text>
|
|
</view>
|
|
<view class="title" style="color: #4DA3FF;">
|
|
{{infoData.num_2}}<text>人</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="item">
|
|
<view class="title" style="color: #FFCB31;">
|
|
本周分配<text>({{infoData.num_3_rate}}%)</text>
|
|
</view>
|
|
<view class="title" style="color: #FFCB31;">
|
|
{{infoData.total_1}}<text>人</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 销售排名-->
|
|
<view class="section_box_2" v-else>
|
|
<view class="itme" v-for="(v,k) in infoData.staff_list" :key="k">
|
|
<view class="title">{{k+1}} {{v.name}}</view>
|
|
<view class="money">{{v.goal}}人</view>
|
|
<view class="plan">
|
|
<fui-progress :percent="getPercent(v.wx_yj,v.goal)" height="15" radius="100" background="#e4e4e4" activeColor="#4bced0"></fui-progress>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<!-- 底部导航-->
|
|
<AQTabber/>
|
|
</view>
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
import apiRoute from '@/api/apiRoute.js';
|
|
// import marketApi from '@/api/market.js';
|
|
import AQTabber from "@/components/AQ/AQTabber.vue"
|
|
|
|
|
|
export default {
|
|
components: {
|
|
AQTabber,
|
|
},
|
|
data() {
|
|
return {
|
|
|
|
infoData:{
|
|
staff_list:[],//销售排行
|
|
},//详情数据
|
|
|
|
//统计图相关
|
|
chartData: {},
|
|
opts: {
|
|
rotate: false, // 是否旋转图表
|
|
rotateLock: false, // 是否锁定旋转
|
|
color: [
|
|
"#e9e9e9", // 颜色1：未完成
|
|
"#02a7f0", // 颜色2：续费
|
|
"#45c59f", // 颜色3：新签
|
|
],
|
|
padding: [0, 0, 0, 0], // 图表内边距 [上, 右, 下, 左]
|
|
dataLabel: true, // 是否显示数据标签
|
|
enableScroll: false, // 是否启用滚动
|
|
legend: {
|
|
show: false, // 是否显示图例
|
|
// position: "right", // 图例位置
|
|
// lineHeight: 25 // 图例行高
|
|
},
|
|
title: {
|
|
name: "本周分析", // 主标题文本
|
|
fontSize: 16, // 主标题字体大小
|
|
color: "#666666" // 主标题颜色
|
|
},
|
|
subtitle: {
|
|
name: "0%", // 副标题文本
|
|
fontSize: 18, // 副标题字体大小
|
|
color: "#7cb5ec" // 副标题颜色
|
|
},
|
|
extra: {
|
|
ring: {
|
|
ringWidth: 17, // 环形图宽度
|
|
activeOpacity: 0.5, // 激活状态透明度
|
|
activeRadius: 5, // 启用Tooltip点击时，突出部分的宽度（最大值不得超过labelWidth）
|
|
offsetAngle: 0, // 起始角度偏移
|
|
labelWidth: 1, // 标签宽度
|
|
border: true, // 是否显示边框
|
|
customRadius:68,//自定义半径（一般不需要传值，饼图会自动计算半径，自定义半径可能会导致显示图表显示不全）
|
|
borderWidth: 2, // 分割线的宽度
|
|
borderColor: "#fff" // 边框颜色
|
|
}
|
|
}
|
|
},
|
|
|
|
//新客签到进度条统计
|
|
progress: 50, // 初始进度为50%
|
|
box_2_show: false,//新客签到进度条统计|true=显示,false=隐藏
|
|
|
|
tagType:'1',//1=销售分析,2=销售排名
|
|
|
|
//销售分析统计图
|
|
chartData_2: {},
|
|
opts_2: {
|
|
// 颜色数组，用于图表的系列颜色
|
|
// color: ["#12E7E8","#4DA3FF","#FFCB31"],
|
|
// 内边距，顺序为上、右、下、左
|
|
padding: [0,0,0,0],
|
|
// 是否启用滚动，false 表示不启用
|
|
enableScroll: false,
|
|
legend:{
|
|
show:true// 是否显示图例标识
|
|
},
|
|
// 额外配置项
|
|
extra: {
|
|
// 漏斗图配置
|
|
funnel: {
|
|
// 激活状态下的透明度
|
|
activeOpacity: 0.3,
|
|
// 激活状态下的宽度
|
|
activeWidth: 10,
|
|
// 是否显示边框
|
|
border: true,
|
|
// 边框宽度
|
|
borderWidth: 2,
|
|
// 边框颜色
|
|
borderColor: "#FFFFFF",
|
|
// 填充透明度
|
|
fillOpacity: 1,
|
|
// 标签对齐方式，left 表示左对齐
|
|
labelAlign: "right",
|
|
// 漏斗图类型，pyramid 表示金字塔型
|
|
type: "pyramid"
|
|
}
|
|
}
|
|
},
|
|
|
|
userInfo: {},//当前登录的用户信息
|
|
}
|
|
},
|
|
onLoad() {},
|
|
onShow() {
|
|
this.init()
|
|
},
|
|
methods: {
|
|
// 跳转到统计页面
|
|
goToStatistics() {
|
|
uni.navigateTo({
|
|
url: '/pages/market/data/statistics'
|
|
});
|
|
},
|
|
|
|
async init(){
|
|
await this.getUserInfo()
|
|
await this.getPerformance()
|
|
},
|
|
|
|
//获取用户信息
|
|
async getUserInfo(){
|
|
let res = await apiRoute.getPersonnelInfo({})
|
|
if (res.code != 1) {
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
|
|
this.userInfo = res.data
|
|
},
|
|
|
|
//获取统计信息
|
|
async getPerformance(){
|
|
let role_key_arr = this.userInfo.role_key_arr.join(',')
|
|
let params = {
|
|
personnel_id:this.userInfo.id,//员工表id
|
|
role_key_arr: role_key_arr, // 角色key 转换数组为字符串，若为空则赋予空字符串
|
|
}
|
|
let res= await apiRoute.xs_statisticsMarketData(params)
|
|
if (res.code != 1) {
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none'
|
|
});
|
|
return
|
|
}
|
|
// console.log('xx',res)
|
|
this.infoData = res.data
|
|
|
|
if(this.infoData.role_type == 'market_type'){
|
|
//市场人员
|
|
//环形统计图相关
|
|
let chartData_1 = {
|
|
series: [
|
|
{
|
|
data: [
|
|
{
|
|
"name": "已分配",
|
|
"value": this.infoData.num_1_rate,
|
|
"labelShow": false
|
|
},
|
|
{
|
|
"name": "未分配",
|
|
"value": this.infoData.num_2_rate,
|
|
"labelShow": false
|
|
},
|
|
{
|
|
"name": "总人数",
|
|
"value": this.infoData.num_3_rate,
|
|
"labelShow": false
|
|
},
|
|
]
|
|
}
|
|
]
|
|
};
|
|
this.chartData = JSON.parse(JSON.stringify(chartData_1));
|
|
this.opts.subtitle = {
|
|
name: `${this.infoData.num_4_rate}%`, // 副标题文本
|
|
fontSize: 18, // 副标题字体大小
|
|
color: "#7cb5ec" // 副标题颜色
|
|
}
|
|
|
|
//销售分析统计图相关
|
|
let chartDataB = {
|
|
series: [
|
|
{
|
|
data: [
|
|
{
|
|
"name": "本周拉新", // 数据项的名称，表示当前数据的分类为“跟进中”
|
|
"centerText": this.infoData.total_1, // 中心显示的文本内容，这里为空字符串，表示不显示中心文本
|
|
"value": this.infoData.num_3_rate, // 数据项的值，表示“跟进中”的数量为50
|
|
// "labelText":'跟进中'
|
|
"labelShow":false,
|
|
"color": "#FFCB31", // 自定义颜色
|
|
},
|
|
{
|
|
"name": "未分配",
|
|
"centerText": this.infoData.num_2,
|
|
"value": this.infoData.num_2_rate,
|
|
// "labelText":"试听"
|
|
"labelShow":false,
|
|
"color": "#4DA3FF", // 自定义颜色
|
|
},
|
|
{
|
|
"name": "已分配",
|
|
"centerText": this.infoData.num_1,
|
|
"value": this.infoData.num_1_rate,
|
|
// "labelText":"已成交"
|
|
"labelShow":false,
|
|
"color": "#12E7E8", // 自定义颜色
|
|
}
|
|
]
|
|
}
|
|
]
|
|
};
|
|
this.chartData_2 = JSON.parse(JSON.stringify(chartDataB));
|
|
}else{
|
|
//环形统计图相关
|
|
let chartData_1 = {
|
|
series: [
|
|
{
|
|
data: [
|
|
{
|
|
"name": "已成交",
|
|
"value": this.infoData.num_1_rate,
|
|
"labelShow": false
|
|
},
|
|
{
|
|
"name": "未成交",
|
|
"value": this.infoData.num_2_rate,
|
|
"labelShow": false
|
|
},
|
|
{
|
|
"name": "总人数",
|
|
"value": this.infoData.num_3_rate,
|
|
"labelShow": false
|
|
},
|
|
]
|
|
}
|
|
]
|
|
};
|
|
this.chartData = JSON.parse(JSON.stringify(chartData_1));
|
|
this.opts.subtitle = {
|
|
name: `${this.infoData.num_4_rate}%`, // 副标题文本
|
|
fontSize: 18, // 副标题字体大小
|
|
color: "#7cb5ec" // 副标题颜色
|
|
}
|
|
|
|
//销售分析统计图相关
|
|
let chartDataB = {
|
|
series: [
|
|
{
|
|
data: [
|
|
{
|
|
"name": "本周成交", // 数据项的名称，表示当前数据的分类为“跟进中”
|
|
"centerText": this.infoData.total_1, // 中心显示的文本内容，这里为空字符串，表示不显示中心文本
|
|
"value": this.infoData.num_3_rate, // 数据项的值，表示“跟进中”的数量为50
|
|
// "labelText":'跟进中'
|
|
"labelShow":false,
|
|
"color": "#FFCB31", // 自定义颜色
|
|
},
|
|
{
|
|
"name": "未成交",
|
|
"centerText": this.infoData.num_2,
|
|
"value": this.infoData.num_2_rate,
|
|
// "labelText":"试听"
|
|
"labelShow":false,
|
|
"color": "#4DA3FF", // 自定义颜色
|
|
},
|
|
{
|
|
"name": "已成交",
|
|
"centerText": this.infoData.num_1,
|
|
"value": this.infoData.num_1_rate,
|
|
// "labelText":"已成交"
|
|
"labelShow":false,
|
|
"color": "#12E7E8", // 自定义颜色
|
|
}
|
|
]
|
|
}
|
|
]
|
|
};
|
|
this.chartData_2 = JSON.parse(JSON.stringify(chartDataB));
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
//计算百分比取整数
|
|
getPercent(num1,total){
|
|
// 计算百分比并取整数
|
|
if(!total){
|
|
return 0
|
|
}
|
|
|
|
let num_percent = (num1 / total) * 100;
|
|
if(num_percent <= 0){
|
|
num_percent = 0
|
|
}else{
|
|
num_percent = Math.ceil((num1 / total) * 100);
|
|
}
|
|
// console.log('qqq',[num_percent,num1,total])
|
|
return num_percent
|
|
},
|
|
|
|
|
|
|
|
//切换tag
|
|
changeTag(type){
|
|
this.tagType = type
|
|
},
|
|
|
|
//打开到课率统计
|
|
openViewArrivalStatistics(){
|
|
this.$navigateTo({
|
|
url: '/pages/market/my/arrival_statistics'
|
|
})
|
|
},
|
|
|
|
//打开即将到期
|
|
openViewDueSoon(){
|
|
this.$navigateTo({
|
|
url: '/pages/market/my/due_soon'
|
|
})
|
|
},
|
|
|
|
//打开授课统计
|
|
openViewSchoolingStatistics(){
|
|
this.$navigateTo({
|
|
url: '/pages/market/my/schooling_statistics'
|
|
})
|
|
},
|
|
|
|
//打开意见反馈
|
|
openViewFeedback(){
|
|
this.$navigateTo({
|
|
url: '/pages/common/feedback'
|
|
})
|
|
},
|
|
|
|
//打开个人资料
|
|
openViewMyInfo(){
|
|
this.$navigateTo({
|
|
url: '/pages/market/my/info'
|
|
})
|
|
},
|
|
|
|
//打开企业信息
|
|
openViewFirmInfo(){
|
|
this.$navigateTo({
|
|
url: '/pages/market/my/firm_info'
|
|
})
|
|
},
|
|
|
|
|
|
//打开设置
|
|
openViewSetUp(){
|
|
this.$navigateTo({
|
|
url: '/pages/market/my/set_up'
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
|
|
|
|
.main_box{
|
|
background: #292929;
|
|
min-height: 100%;
|
|
}
|
|
|
|
//自定义导航栏
|
|
.navbar_section{
|
|
border: 1px solid #292929;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background: #292929;
|
|
position: relative;
|
|
.title{
|
|
padding: 40rpx 0rpx;
|
|
|
|
/* 小程序端样式 */
|
|
// #ifdef MP-WEIXIN
|
|
padding: 80rpx 0rpx;
|
|
// #endif
|
|
|
|
font-size: 30rpx;
|
|
color: #fff;
|
|
}
|
|
|
|
.statistics-btn {
|
|
position: absolute;
|
|
right: 20rpx;
|
|
background-color: #29D3B4;
|
|
padding: 10rpx 20rpx;
|
|
border-radius: 30rpx;
|
|
font-size: 24rpx;
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
|
|
//统计信息
|
|
.count_section{
|
|
padding: 20rpx 46rpx;
|
|
padding-bottom: 60rpx;
|
|
background-color: #434544;
|
|
color: #fff;
|
|
.title_box{
|
|
font-size: 26rpx;
|
|
}
|
|
.box_1{
|
|
margin-top: 25rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 30rpx;
|
|
.left{
|
|
width: 280rpx; /* 设置宽度为 280rpx */
|
|
height: 280rpx; /* 设置高度为 280rpx */
|
|
.charts-box {
|
|
width: 280rpx; /* 设置宽度为 280rpx */
|
|
height: 280rpx; /* 设置高度为 280rpx */
|
|
}
|
|
}
|
|
.right{
|
|
font-size: 24rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20rpx;
|
|
.title{}
|
|
.content{
|
|
display: flex;
|
|
gap: 40rpx;
|
|
.strong{
|
|
font-size: 30rpx;
|
|
}
|
|
.text{
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
.legeng{
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 50rpx;
|
|
.item{
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20rpx;
|
|
.piece{
|
|
|
|
width: 20rpx;
|
|
height: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
// 其他样式省略
|
|
.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{
|
|
background: #292929 100%;
|
|
padding: 0 24rpx;
|
|
padding-top: 40rpx;
|
|
padding-bottom: 150rpx;
|
|
font-size: 24rpx;
|
|
color: #333333;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 22rpx;
|
|
|
|
.tag_section{
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
view{
|
|
border: 1px solid #969696;
|
|
width: 258rpx;
|
|
height: 72rpx;
|
|
line-height: 72rpx;
|
|
background-color: #292929;
|
|
text-align: center;
|
|
font-size: 26rpx;
|
|
color: #fff;
|
|
}
|
|
.left{
|
|
border-radius: 22rpx 0rpx 0rpx 22rpx;
|
|
}
|
|
.right{
|
|
border-radius: 0rpx 22rpx 22rpx 0rpx;
|
|
}
|
|
.select{
|
|
background-color: #fff;
|
|
color: #29D3B4;
|
|
}
|
|
}
|
|
|
|
.section_box_1{
|
|
margin-top: 38rpx;
|
|
padding: 66rpx 14rpx;
|
|
border-radius: 12rpx;
|
|
background-color: #434544FF;
|
|
color: #d9dada;
|
|
font-size: 26rpx;
|
|
text-align: center;
|
|
height: 600rpx;
|
|
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
.left{
|
|
width: 70%;
|
|
}
|
|
.right{
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20rpx;
|
|
.item{
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10rpx;
|
|
.title{
|
|
font-size: 26rpx;
|
|
text-align: left;
|
|
text{
|
|
margin-left: 5rpx;
|
|
color: #d9dada;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.section_box_2{
|
|
color: #fff;
|
|
margin-top: 38rpx;
|
|
padding: 20rpx 42rpx;
|
|
background-color: #434544;
|
|
border-radius: 12rpx;
|
|
font-size: 26rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20rpx;
|
|
.itme{
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 15rpx;
|
|
.money{
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|