852 lines
20 KiB
Vue
852 lines
20 KiB
Vue
<template>
|
|
<view class="content">
|
|
<headersVue :titles="titles">
|
|
<u-icon name="arrow-left" color="#fff" size="18"></u-icon>
|
|
</headersVue>
|
|
<view class="container">
|
|
<view class="title_">检测数量统计</view>
|
|
<view class="box_">
|
|
<uni-datetime-picker v-model="ranges" type="daterange" @maskClick="maskClick"/>
|
|
<view class="d_b"
|
|
style="border-top: 1px solid #F5F5F5; margin-top: 30rpx;box-sizing: border-box;padding-top: 30rpx;">
|
|
<view class="three_" @click="goOrderList">
|
|
<view class="text_">订单数量</view>
|
|
<view class="">{{ data2.allNum || 0 }}</view>
|
|
</view>
|
|
<view class="three_">
|
|
<view class="text_">完成数量</view>
|
|
<view class="">{{ data2.ywcNum || 0 }}</view>
|
|
</view>
|
|
<view class="three_">
|
|
<view class="text_">检测中数量</view>
|
|
<view class="">{{ data2.jxzNum || 0 }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="title_">营业额统计</view>
|
|
<view class="box_">
|
|
<uni-datetime-picker v-model="range" type="daterange" @maskClick="maskClick"/>
|
|
<view class="d_b"
|
|
style="border-top: 1px solid #F5F5F5; margin-top: 30rpx;box-sizing: border-box;padding-top: 30rpx;">
|
|
<view class="four_">
|
|
<view class="text_">公示价格</view>
|
|
<view class="">{{ data1.gsAmount || 0 }}</view>
|
|
</view>
|
|
<view class="four_">
|
|
<view class="text_">应收款</view>
|
|
<view class="">{{ data1.ysAmount || 0 }}</view>
|
|
</view>
|
|
<view class="four_">
|
|
<view class="text_">已收款</view>
|
|
<view class="">{{ data1.yjsAmount || 0 }}</view>
|
|
</view>
|
|
<view class="four_">
|
|
<view class="text_">待收款</view>
|
|
<view class="">{{ data1.ysAmount - data1.yjsAmount || 0 }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="title_">客户来源统计</view>
|
|
<view class="box_" v-if="data3.length > 0">
|
|
<view class="box_top">
|
|
<view class="l_">客户来源</view>
|
|
<view class="n_">数量</view>
|
|
<view class="r_">公示金额</view>
|
|
</view>
|
|
<view class="box_cont" v-for="(item,index) in data3">
|
|
<view class="hang_">
|
|
<view class="l_">
|
|
<view :class="'jt_' + (index % 4)">{{ item.remark || '' }}</view>
|
|
</view>
|
|
<view class="n_">{{ item.theNum || '' }}</view>
|
|
<view class="r_">{{ item.theAmount || '' }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="box_" v-else>
|
|
暂无数据…
|
|
</view>
|
|
<view class="title_d">检测车型统计
|
|
<view class="sm_" @click="goxiangqing(2)">更多 ></view>
|
|
</view>
|
|
<view class="box_">
|
|
<view class="d_b" v-if="data4.length > 0">
|
|
<view class="four_t" v-for="(item,index) in data4">
|
|
<view class="text_">{{ item.goodsTitle || '' }}</view>
|
|
<view class="">{{ item.theNum || '' }}</view>
|
|
</view>
|
|
</view>
|
|
<view class="d_b" v-else>
|
|
暂无数据…
|
|
</view>
|
|
</view>
|
|
<view class="title_d">检测类型统计
|
|
<view class="sm_" @click="goxiangqing(4)">更多 ></view>
|
|
</view>
|
|
<view class="box_">
|
|
<view class="d_b" style="display: flex; flex-wrap: wrap;" v-if="skuList.length > 0">
|
|
<view class="three_" v-for="(skuData) in skuList">
|
|
<view class="text_">{{ skuData.skuName }}</view>
|
|
<view class=""> {{ skuData.orderCount || 0 }}</view>
|
|
</view>
|
|
</view>
|
|
<view class="d_b" v-else>
|
|
暂无数据…
|
|
</view>
|
|
</view>
|
|
<view class="title_d">代收款
|
|
<view class="sm_" @click="goxiangqing(3)">更多 ></view>
|
|
</view>
|
|
<view class="box_" v-if="data5.length == 0">暂无数据…</view>
|
|
<view class="sys" v-for="(item) in data5" v-else>
|
|
<view class="t-title">{{ item.theName || '' }}</view>
|
|
<view class="t-num">{{ item.theAmount || '' }}</view>
|
|
</view>
|
|
<view class="title_">成交金额（已收款）</view>
|
|
<view class="box_">
|
|
<qiun-data-charts type="area" :opts="opts" :ontouch='true' :chartData="chartData"/>
|
|
</view>
|
|
<view class="title_">检测数量</view>
|
|
<view class="box_">
|
|
<qiun-data-charts type="area" :opts="opts2" :chartData="chartData1"/>
|
|
</view>
|
|
<view class="title_">已收款金额</view>
|
|
<view class="lan-you">
|
|
<view class="yi" :class="{'er' : qhindex2 == index}" v-for="(item,index) in zilist" :key="index"
|
|
@click="gbindex2(index,item.unit)"> {{ item.text }}
|
|
</view>
|
|
</view>
|
|
<view class="box_">
|
|
<qiun-data-charts type="line" :opts="opts1" :chartData="chartData2"/>
|
|
</view>
|
|
|
|
</view>
|
|
<u-datetime-picker :show="show" v-model="value1" mode="date"></u-datetime-picker>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import headersVue from '../../components/header/headers.vue';
|
|
import request from "@/utils/request";
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
data1: '',
|
|
data2: '',
|
|
data3: [],
|
|
data4: '',
|
|
data5: '',
|
|
range: ['2023-9-28', '2023-10-7'],
|
|
ranges: ['2023-9-28', '2023-10-7'],
|
|
//检测类型统计
|
|
skuList: [],
|
|
unit: 'week',
|
|
unit1: 'week',
|
|
unit2: 'week',
|
|
qhindex2: 0,
|
|
zilist: [
|
|
{text: '日', unit: 'day'},
|
|
{text: '周', unit: 'week'},
|
|
{text: '月', unit: 'month'},
|
|
{text: '年', unit: 'year'},
|
|
|
|
],
|
|
|
|
titles: "业务统计",
|
|
value1: Number(new Date()),
|
|
List: [],
|
|
show: false,
|
|
status: 'loading',
|
|
chartData: {},
|
|
chartData1: {},
|
|
chartData2: {},
|
|
//您可以通过修改 config-ucharts.js 文件中下标为 ['area'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
|
|
opts: {
|
|
color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
|
|
"#ea7ccc"
|
|
],
|
|
padding: [15, 15, 0, 15],
|
|
enableScroll: false,
|
|
legend: {},
|
|
xAxis: {
|
|
disableGrid: true,
|
|
labelCount: 4, //默认显示个数
|
|
},
|
|
yAxis: {
|
|
gridType: "dash",
|
|
dashLength: 2
|
|
},
|
|
extra: {
|
|
area: {
|
|
type: "curve",
|
|
opacity: 0.2,
|
|
addLine: true,
|
|
width: 2,
|
|
gradient: true,
|
|
activeType: "hollow"
|
|
}
|
|
}
|
|
},
|
|
opts1: {
|
|
color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
|
|
"#ea7ccc"
|
|
],
|
|
padding: [15, 10, 0, 15],
|
|
enableScroll: false,
|
|
legend: {},
|
|
xAxis: {
|
|
disableGrid: true,
|
|
labelCount: 3, //默认显示个数
|
|
},
|
|
yAxis: {
|
|
gridType: "dash",
|
|
dashLength: 2
|
|
},
|
|
extra: {
|
|
line: {
|
|
type: "straight",
|
|
width: 2,
|
|
activeType: "hollow"
|
|
}
|
|
}
|
|
},
|
|
opts2: {
|
|
color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
|
|
"#ea7ccc"
|
|
],
|
|
padding: [15, 15, 0, 15],
|
|
enableScroll: false,
|
|
legend: {},
|
|
xAxis: {
|
|
disableGrid: true,
|
|
labelCount: 1, //默认显示个数
|
|
},
|
|
yAxis: {
|
|
gridType: "dash",
|
|
dashLength: 4
|
|
},
|
|
extra: {
|
|
area: {
|
|
type: "curve",
|
|
opacity: 0.2,
|
|
addLine: true,
|
|
width: 2,
|
|
gradient: true,
|
|
activeType: "hollow"
|
|
}
|
|
}
|
|
},
|
|
}
|
|
},
|
|
components: {
|
|
headersVue
|
|
},
|
|
mounted() {
|
|
// this.getServerData();
|
|
},
|
|
watch: {
|
|
range(newval) {
|
|
this.getfive()
|
|
},
|
|
ranges(newval) {
|
|
this.getfive()
|
|
},
|
|
},
|
|
onLoad() {
|
|
this.gettime()
|
|
this.partnerId = uni.getStorageSync('partnerId')
|
|
// this.getServerData();
|
|
this.getServerData1();
|
|
this.getServerData2();
|
|
this.getServerData3();
|
|
this.chartLineInspectionAmount()
|
|
this.chartLineInspectionNum()
|
|
this.getInspectionSku()
|
|
// this.sanxiang()
|
|
this.getfive()
|
|
},
|
|
methods: {
|
|
getServerData() {
|
|
//模拟从服务器获取数据时的延时
|
|
setTimeout(() => {
|
|
//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
|
|
let res = {
|
|
categories: ["2018", "2019", "2020", "2021", "2022", "2023"],
|
|
series: [{
|
|
name: "近7天",
|
|
data: [35, 8, 25, 37, 4, 20]
|
|
},
|
|
],
|
|
xAxis: {
|
|
disableGrid: true, // 不绘制纵向网格(即默认绘制网格)
|
|
scrollShow: true, // 不显示滚动条
|
|
scrollColor: '#08B66D',
|
|
itemCount: 6, // x轴显示数据个数
|
|
fontColor: '#8C8C8C',
|
|
axisLineColor: "#828282",
|
|
gridColor: "#828282",
|
|
// x轴文字倾斜
|
|
rotateLabel: true
|
|
},
|
|
};
|
|
let res1 = {
|
|
categories: ["2018", "2019", "2020", "2021", "2022", "2023"],
|
|
series: [{
|
|
name: "总数量",
|
|
data: [35, 8, 25, 37, 4, 20]
|
|
},
|
|
{
|
|
name: "合格数",
|
|
data: [100, 80, 95, 150, 112, 132]
|
|
}
|
|
|
|
]
|
|
};
|
|
let res2 = {
|
|
categories: ["2018", "2019", "2020", "2021", "2022", "2023"],
|
|
series: [{
|
|
name: "小型汽车",
|
|
data: [35, 8, 25, 37, 4, 20]
|
|
},
|
|
{
|
|
name: "中型汽车",
|
|
data: [70, 40, 65, 100, 44, 68]
|
|
},
|
|
{
|
|
name: "大型汽车",
|
|
data: [100, 80, 95, 150, 112, 132]
|
|
}
|
|
]
|
|
};
|
|
// this.chartData = JSON.parse(JSON.stringify(res));
|
|
// this.chartData1 = JSON.parse(JSON.stringify(res1));
|
|
// this.chartData2 = JSON.parse(JSON.stringify(res2));
|
|
}, 500);
|
|
},
|
|
goCustomerDetail(remark) {
|
|
uni.navigateTo({
|
|
url: '/pages/statistics/statislist?id=1&remark=' + remark
|
|
})
|
|
},
|
|
gettime() {
|
|
// 获取当前时间
|
|
var now = new Date();
|
|
|
|
// 获取年份
|
|
var year = now.getFullYear();
|
|
|
|
// 获取月份
|
|
var month = now.getMonth() + 1; // 月份从 0 开始，需要加 1
|
|
if (month < 10) {
|
|
var month = "0" + month
|
|
}
|
|
|
|
// 获取日期
|
|
var date = now.getDate();
|
|
|
|
// 格式化时间
|
|
var currentTime = year + '-' + month + '-' + date
|
|
this.range[0] = currentTime
|
|
this.range[1] = currentTime
|
|
this.ranges[0] = currentTime
|
|
this.ranges[1] = currentTime
|
|
},
|
|
// 五条
|
|
async getfive() {
|
|
|
|
let data1 = {
|
|
startTime: this.range[0],
|
|
endTime: this.range[1]
|
|
}
|
|
let res1 = await request({
|
|
url: '/partnerOwn/partner/staticsTable1',
|
|
method: 'get',
|
|
params: data1
|
|
})
|
|
this.data1 = res1.data
|
|
// 2
|
|
let data2 = {
|
|
startTime: this.ranges[0],
|
|
endTime: this.ranges[1]
|
|
}
|
|
let res2 = await request({
|
|
url: '/partnerOwn/partner/staticsTable2',
|
|
method: 'get',
|
|
params: data2
|
|
})
|
|
this.data2 = res2.data
|
|
// 3
|
|
let data3 = {
|
|
startTime: '',
|
|
endTime: ''
|
|
}
|
|
let res3 = await request({
|
|
url: '/partnerOwn/partner/staticsTable3',
|
|
method: 'get',
|
|
params: data3
|
|
})
|
|
this.data3 = res3.data
|
|
// 4
|
|
let data4 = {
|
|
startTime: '',
|
|
endTime: ''
|
|
}
|
|
let res4 = await request({
|
|
url: '/partnerOwn/partner/staticsTable4',
|
|
method: 'get',
|
|
params: data4
|
|
})
|
|
this.data4 = res4.data
|
|
// 5
|
|
let data5 = {
|
|
startTime: '',
|
|
endTime: ''
|
|
}
|
|
let res5 = await request({
|
|
url: '/partnerOwn/partner/staticsTable5',
|
|
method: 'get',
|
|
params: data5
|
|
})
|
|
this.data5 = res5.data
|
|
|
|
},
|
|
//
|
|
goxiangqing(id) {
|
|
uni.navigateTo({
|
|
url: '/pages/statistics/statislist?id=' + id
|
|
})
|
|
},
|
|
goOrderList() {
|
|
uni.navigateTo({
|
|
url: '/pages/index/ordermanage'
|
|
})
|
|
},
|
|
// 检测类型统计
|
|
getInspectionSku() {
|
|
let data = {
|
|
startTime: this.partnerId,
|
|
unit: this.unit,
|
|
}
|
|
request({
|
|
url: '/partnerOwn/partner/queryInspectionSkuList',
|
|
method: 'get',
|
|
// params: data
|
|
}).then((res) => {
|
|
this.skuList = res.data
|
|
})
|
|
},
|
|
maskClick(e) {
|
|
},
|
|
// 折线图
|
|
async chartLineInspectionAmount() {
|
|
let data = {
|
|
partnerId: this.partnerId,
|
|
unit: this.unit,
|
|
}
|
|
let rex = await request({
|
|
url: '/partnerOwn/partner/chartLineInspectionAmount',
|
|
method: 'get',
|
|
params: data
|
|
})
|
|
let res = rex.data
|
|
|
|
this.chartData = JSON.parse(JSON.stringify(res));
|
|
this.opts.xAxis.itemCount = res.categories.length //x轴数据的长度
|
|
|
|
},
|
|
// 折线图
|
|
async chartLineInspectionNum() {
|
|
let data = {
|
|
partnerId: this.partnerId,
|
|
unit: this.unit,
|
|
}
|
|
let rex = await request({
|
|
url: '/partnerOwn/partner/chartLineInspectionNum',
|
|
method: 'get',
|
|
params: data
|
|
})
|
|
let res = rex.data
|
|
|
|
this.chartData1 = JSON.parse(JSON.stringify(res));
|
|
|
|
},
|
|
|
|
gbindex(index, unit) {
|
|
this.qhindex = index
|
|
this.unit = unit
|
|
this.getServerData1()
|
|
},
|
|
gbindex1(index, unit) {
|
|
this.qhindex1 = index
|
|
this.unit1 = unit
|
|
this.getServerData2()
|
|
},
|
|
gbindex2(index, unit) {
|
|
this.qhindex2 = index
|
|
this.unit = unit
|
|
this.getServerData1()
|
|
},
|
|
getback() {
|
|
uni.navigateBack()
|
|
},
|
|
xinxuanze(name) {
|
|
this.name = name
|
|
this.xling = false
|
|
this.getServerData1()
|
|
|
|
},
|
|
async sanxiang() {
|
|
let res = await request({
|
|
url: '/partnerOwn/partner/statisticsInfo?partnerId=' + this.partnerId,
|
|
method: 'get',
|
|
})
|
|
let nums = {
|
|
orderAmount: Math.trunc(res.data.orderAmount / 100),
|
|
orderNum: res.data.orderNum,
|
|
todayOrderAmount: res.data.todayOrderAmount / 100,
|
|
todayOrderNum: res.data.todayOrderNum,
|
|
workedNum: res.data.workedNum,
|
|
workingNum: res.data.workingNum
|
|
}
|
|
this.threenum = nums
|
|
},
|
|
async getstatisticsTop() {
|
|
let res = await request({
|
|
url: '/appInspection/order/statisticsTop',
|
|
method: 'get',
|
|
})
|
|
// this.chartData.series[0].data = res.data.list
|
|
},
|
|
async getstatisticsMid() {
|
|
let res = await request({
|
|
url: '/appInspection/order/statisticsMid',
|
|
method: 'get',
|
|
})
|
|
this.carlist = res.data
|
|
},
|
|
|
|
|
|
async getgetPartnerList() {
|
|
let data = {
|
|
partnerName: this.searchValue
|
|
}
|
|
let res = await request({
|
|
url: '/appInspection/order/getPartnerList',
|
|
method: 'get',
|
|
params: data
|
|
})
|
|
this.qubu = res.data
|
|
|
|
},
|
|
async getstatisticsZXT() {
|
|
let data = {
|
|
partnerId: this.partnerId,
|
|
type: this.value
|
|
}
|
|
let res = await request({
|
|
url: '/appInspection/order/statisticsZXT',
|
|
method: 'get',
|
|
params: data
|
|
})
|
|
|
|
},
|
|
async getstatisticsOrder() {
|
|
let res = await request({
|
|
url: '/appInspection/order/statisticsOrder',
|
|
method: 'get',
|
|
})
|
|
this.phb = res.data
|
|
|
|
},
|
|
// 123123
|
|
closexl(e) {
|
|
this.xling = false
|
|
|
|
},
|
|
openxl(e) {
|
|
},
|
|
|
|
// 金额
|
|
async getServerData1() {
|
|
let data = {
|
|
partnerId: this.partnerId,
|
|
unit: this.unit,
|
|
}
|
|
let rex = await request({
|
|
url: '/partnerOwn/partner/chartInfoAmount',
|
|
method: 'get',
|
|
params: data
|
|
})
|
|
let res = rex.data
|
|
|
|
this.chartData2 = JSON.parse(JSON.stringify(res));
|
|
this.opts1.xAxis.itemCount = res.categories.length
|
|
|
|
},
|
|
// 数量
|
|
async getServerData2() {
|
|
let data = {
|
|
partnerId: this.partnerId,
|
|
unit: this.unit1,
|
|
}
|
|
let rex = await request({
|
|
url: '/partnerOwn/partner/chartInfoNum',
|
|
method: 'get',
|
|
params: data
|
|
})
|
|
let res = rex.data
|
|
|
|
this.chartData2 = JSON.parse(JSON.stringify(res));
|
|
|
|
},
|
|
// 合格率
|
|
async getServerData3() {
|
|
let data = {
|
|
partnerId: this.partnerId,
|
|
unit: this.unit2,
|
|
}
|
|
let rex = await request({
|
|
url: '/partnerOwn/partner/chartInfoRatio',
|
|
method: 'get',
|
|
params: data
|
|
})
|
|
let res = rex.data
|
|
|
|
this.chartData3 = JSON.parse(JSON.stringify(res));
|
|
|
|
},
|
|
}
|
|
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.content {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding-top: 200rpx;
|
|
background: #f4f5f6;
|
|
height: 100vh;
|
|
}
|
|
|
|
.container {
|
|
box-sizing: border-box;
|
|
padding: 30rpx;
|
|
background: #f4f5f6;
|
|
}
|
|
|
|
.title_ {
|
|
font-size: 32rpx;
|
|
color: #101A3E;
|
|
margin: 30rpx 0px;
|
|
}
|
|
|
|
.title_d {
|
|
font-size: 32rpx;
|
|
color: #101A3E;
|
|
margin: 30rpx 0px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.box_ {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 10px;
|
|
background: #FFFFFF;
|
|
border-radius: 12rpx;
|
|
}
|
|
|
|
.box_cont {
|
|
box-sizing: border-box;
|
|
padding: 20rpx;
|
|
background: #F7F8FC;
|
|
border-radius: 0rpx 0rpx 12rpx 12rpx;
|
|
}
|
|
|
|
.sm_ {
|
|
font-size: 24rpx;
|
|
color: #8D90A6;
|
|
}
|
|
|
|
.hang_ {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
box-sizing: border-box;
|
|
padding: 15rpx 0px;
|
|
margin: 15rpx 0rpx;
|
|
border-bottom: 1px solid #E3ECFB;
|
|
font-size: 32rpx;
|
|
color: #101A3E;
|
|
}
|
|
|
|
.box_top {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
font-size: 24rpx;
|
|
color: #101A3E;
|
|
box-sizing: border-box;
|
|
padding: 20rpx;
|
|
background: #F7F8FC;
|
|
border-radius: 12rpx 12rpx 0rpx 0rpx;
|
|
|
|
}
|
|
|
|
.d_b {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.d_s {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.icon_ {
|
|
width: 38rpx;
|
|
height: 38rpx;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.three_ {
|
|
width: 196rpx;
|
|
height: 116rpx;
|
|
background: #F7F8FC;
|
|
text-align: center;
|
|
font-size: 24rpx;
|
|
color: #101A3E;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.three_k {
|
|
width: 196rpx;
|
|
height: 116rpx;
|
|
}
|
|
|
|
.four_ {
|
|
width: 142rpx;
|
|
height: 116rpx;
|
|
background: #F7F8FC;
|
|
text-align: center;
|
|
font-size: 24rpx;
|
|
color: #101A3E;
|
|
}
|
|
|
|
.four_t {
|
|
width: 142rpx;
|
|
height: 190rpx;
|
|
box-sizing: border-box;
|
|
padding: 15rpx;
|
|
background: #F7F8FC;
|
|
text-align: center;
|
|
font-size: 24rpx;
|
|
color: #101A3E;
|
|
}
|
|
|
|
.text_ {
|
|
margin-top: 20rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.l_ {
|
|
width: 33%;
|
|
}
|
|
|
|
.n_ {
|
|
width: 33%;
|
|
text-align: center;
|
|
}
|
|
|
|
.r_ {
|
|
width: 33%;
|
|
text-align: right;
|
|
}
|
|
|
|
.jt_0 {
|
|
width: 144rpx;
|
|
height: 48rpx;
|
|
background: #f6f0e5;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 24rpx;
|
|
color: #101A3E;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.jt_1 {
|
|
width: 144rpx;
|
|
height: 48rpx;
|
|
background: #e6e6f9;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 24rpx;
|
|
color: #101A3E;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.jt_2 {
|
|
width: 144rpx;
|
|
height: 48rpx;
|
|
background: #e2ebfb;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 24rpx;
|
|
color: #101A3E;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.jt_3 {
|
|
width: 144rpx;
|
|
height: 48rpx;
|
|
background: #e4eff1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 24rpx;
|
|
color: #101A3E;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.charts-box {
|
|
width: 100%;
|
|
height: 452rpx;
|
|
}
|
|
|
|
.yi {
|
|
font-size: 15px;
|
|
font-weight: 400;
|
|
color: #666666;
|
|
line-height: 15px;
|
|
padding: 5rpx;
|
|
border: 2rpx solid #327DFB;
|
|
}
|
|
|
|
.er {
|
|
//width: 25px;
|
|
//height: 25px;
|
|
background: #327DFB;
|
|
border-radius: 3px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white !important;
|
|
}
|
|
|
|
.lan-you {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
</style>
|