<template>
|
<div class="box">
|
<div class="box_shua">
|
<el-button icon="el-icon-refresh" type="primary" @click="getChatData(),getData()">刷新数据</el-button>
|
</div>
|
<div class="box_head">
|
<div class="box_head_info">
|
<i class="el-icon-info"></i>
|
<span>展示当前系统合计总数，每天更新数据</span>
|
</div>
|
<div class="box_head_list" v-if="info">
|
<div class="box_head_list_item">
|
<div class="box_head_list_item_top">
|
<span>保险公司数</span>
|
<span>本月 +{{info.insuranceAddTotal}}</span>
|
</div>
|
<div class="box_head_list_item_bottom">{{info.insuranceTotal}}</div>
|
</div>
|
<div class="box_head_list_item">
|
<div class="box_head_list_item_top">
|
<span>保单数</span>
|
<span>本月 +{{info.insuranceApplyAddTotal}}</span>
|
</div>
|
<div class="box_head_list_item_bottom">{{info.insuranceApplyTotal}}</div>
|
</div>
|
<div class="box_head_list_item">
|
<div class="box_head_list_item_top">
|
<span>在保人数</span>
|
<span>本月 +{{info.insuranceUserAddTotal}}</span>
|
</div>
|
<div class="box_head_list_item_bottom">{{info.insuranceUserTotal}}</div>
|
</div>
|
<div class="box_head_list_item">
|
<div class="box_head_list_item_top">
|
<span>已收费用合计</span>
|
<span>本月 +{{info.totalAddFee}}</span>
|
</div>
|
<div class="box_head_list_item_bottom">¥{{info.totalFee}}</div>
|
</div>
|
</div>
|
</div>
|
<div class="box_chart" v-if="chatData">
|
<div class="box_chart_item">
|
<div class="box_chart_item_info">
|
<span>总理赔金额</span>
|
<i class="el-icon-info"></i>
|
</div>
|
<div class="box_chart_item_price">¥{{chatData.settleClaimsTotalFee || ''}}</div>
|
<div class="box_chart_item_tu" style="height: 132px" id="tu1"></div>
|
</div>
|
<div class="box_chart_item">
|
<div class="box_chart_item_info">
|
<span>总理赔案件数</span>
|
<i class="el-icon-info"></i>
|
</div>
|
<div class="box_chart_item_price">{{chatData.settleClaimsTotal || ''}}</div>
|
<div class="box_chart_item_tu" style="height: 132px" id="tu2"></div>
|
</div>
|
<div class="box_chart_item">
|
<div class="box_chart_item_info">
|
<span>平均理赔处理时长</span>
|
<i class="el-icon-info"></i>
|
</div>
|
<div class="box_chart_item_price">{{chatData.averageSettleClaimsTime || ''}}天</div>
|
<div class="box_chart_item_tu" style="height: 132px" id="tu3"></div>
|
</div>
|
</div>
|
<div class="box_shuju" v-if="chatData">
|
<div class="box_shuju_item">
|
<div class="box_shuju_item_top">
|
<span>受理率</span>
|
<i class="el-icon-info"></i>
|
</div>
|
<div class="box_shuju_item_bottom">{{chatData.acceptanceRata}}%</div>
|
</div>
|
<div class="box_shuju_item">
|
<div class="box_shuju_item_top">
|
<span>拒赔率</span>
|
<i class="el-icon-info"></i>
|
</div>
|
<div class="box_shuju_item_bottom">{{chatData.refuseRata}}%</div>
|
</div>
|
<div class="box_shuju_item">
|
<div class="box_shuju_item_top">
|
<span>结案率</span>
|
<i class="el-icon-info"></i>
|
</div>
|
<div class="box_shuju_item_bottom">{{chatData.closeCaseRata}}%</div>
|
</div>
|
</div>
|
<div class="box_content">
|
<div class="box_content_left">
|
<div class="box_content_left_title">风险案件监控</div>
|
<div class="box_content_left_list">
|
<div class="box_content_left_list_item" :style="{ backgroundColor: item.title!= ''? item.backgroundColor :'#fff'}" v-for="(item, index) in list" :key="index">
|
<div class="box_content_left_list_item_top" v-if="item.title != ''" >
|
<span>{{item.title}}</span>
|
<span :style="{ color: item.color }">{{item.num}}</span>
|
</div>
|
<div class="box_content_left_list_item_bottom" v-if="item.title!= ''">
|
<span>较上月</span>
|
<div class="box_content_left_list_item_bottom_lv">
|
{{item.percentage}}%
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="box_content_right">
|
<div class="box_content_right_title">风险案件敏感词</div>
|
<div class="box_chart_item_tu" id="wordchart"></div>
|
</div>
|
</div>
|
<div class="box_chart" style="height: 500px">
|
<div class="box_chart_item" style=" width:59%;height: 100%">
|
<div class="box_content_right_title" style="width: 100%;display: flex">
|
<div style="flex: 1">理赔金额趋势</div>
|
<!-- <div style="flex: 1; text-align: right">
|
<span :class="dateType == 0?'seldatetype':'datetype'" @click="changeDataType(0)">近一月</span>
|
<span :class="dateType == 1?'seldatetype':'datetype'" @click="changeDataType(1)">近一年</span>
|
</div>-->
|
</div>
|
<div class="box_chart_item_tu" id="tuLipeijine" style="width: 100%;height: 90%" ></div>
|
</div>
|
<div class="box_chart_item" style=" width: 40%;height: 100%" >
|
<div class="box_content_right_title" >
|
<span>地区分布</span>
|
</div>
|
<div class="box_chart_item_tu" style="width: 100%;height: 100%" id="tuDiqu"></div>
|
</div>
|
</div>
|
<div class="box_chart" >
|
<div class="box_chart_item" style="height: 400px">
|
<div class="box_content_right_title">
|
<span>各类型案件分布</span>
|
</div>
|
<div class="box_chart_item_tu" id="tuAnjianleixing"></div>
|
</div>
|
<div class="box_chart_item" style="height: 400px">
|
<div class="box_content_right_title">
|
<span>事故类型分布</span>
|
</div>
|
<div class="box_chart_item_tu" id="tuShiguleixing"></div>
|
</div>
|
<div class="box_chart_item" style="height: 400px">
|
<div class="box_content_right_title">
|
<span>结案率分析</span>
|
</div>
|
<div class="box_chart_item_tu" id="tuJieanlv"></div>
|
</div>
|
</div>
|
<div class="box_chart">
|
<div class="box_chart_item" style=" width: 49.5%;height: 400px;">
|
<div class="box_content_right_title" >
|
<span>工种出险TOP10</span>
|
</div>
|
<div class="box_chart_item_tu" id="tuGongzhong"></div>
|
</div>
|
<div class="box_chart_item" style=" width: 49.5%;height: 400px;">
|
<div class="box_content_right_title">
|
<span>出险人年龄分布</span>
|
</div>
|
<div class="box_chart_item_tu" id="tuNianlin"></div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import * as echarts from 'echarts'
|
import 'echarts-wordcloud'
|
import chinaJSON from '@/assets/china.json'
|
import { getInsuranceDataVO, getSettleClaimsDataVO } from '@/api/business/settleRisk'
|
export default {
|
name: 'dataBoard',
|
data () {
|
return {
|
dateType:0,
|
list: [
|
{
|
title: '多次出险',
|
num: 0,
|
percentage: 0,
|
color: '#EF4444',
|
backgroundColor: '#FEF2F2'
|
},
|
{
|
title: '重复报案',
|
num: 0,
|
percentage: 0,
|
color: '#d6f7e5',
|
backgroundColor: '#FFF7ED'
|
},
|
{
|
title: '索赔过多',
|
num: 0,
|
percentage: 0,
|
color: '#CA8A04',
|
backgroundColor: '#FEFCE8'
|
},
|
{
|
title: '新员工出险',
|
num: 0,
|
percentage: 0,
|
color: '#3ea570',
|
backgroundColor: '#d6f7e5'
|
},
|
{
|
title: '敏感词',
|
num: 0,
|
percentage: 0,
|
color: '#2563EB',
|
backgroundColor: '#EFF6FF'
|
},
|
{
|
title: '延迟报案',
|
num: 0,
|
percentage: 0,
|
color: '#4F46E5',
|
backgroundColor: '#EEF2FF'
|
},
|
{
|
title: '新员工保障条款',
|
num: 0,
|
percentage: 0,
|
color: '#9333EA',
|
backgroundColor: '#FAF5FF'
|
},
|
{
|
title: '',
|
num: 0,
|
color: '#9333EA',
|
backgroundColor: '#FAF5FF'
|
}
|
],
|
info: null,
|
chatData: null
|
}
|
},
|
created () {
|
this.getData()
|
this.getChatData()
|
},
|
methods: {
|
getChatData() {
|
getSettleClaimsDataVO()
|
.then(res => {
|
this.chatData = res
|
let arr1_x = res.settleClaimsTotalList.map(item => item.dataFirst)
|
let arr1_y = res.settleClaimsTotalList.map(item => item.dataSecond)
|
|
let arr2_x = res.settleClaimsFeeList.map(item => item.dataFirst)
|
let arr2_y = res.settleClaimsFeeList.map(item => item.dataSecond)
|
|
let arr3_x = res.averageSettleClaimsList.map(item => item.dataFirst)
|
let arr3_y = res.averageSettleClaimsList.map(item => item.dataSecond)
|
|
let arr4 = res.sensitiveDataList ? res.sensitiveDataList.map(item => {
|
return {
|
name: item.dataFirst,
|
value: item.dataSecond
|
}
|
}) : []
|
|
this.list[0].num = res.riskTimesCxTotal
|
this.list[0].percentage = res.riskTimesCxRata
|
|
this.list[1].num = res.riskRepeatTotal
|
this.list[1].percentage = res.riskRepeatRata
|
|
this.list[2].num = res.riskTimesSpTotal
|
this.list[2].percentage = res.riskTimesSpRata
|
|
this.list[3].num = res.riskNewUserTotal
|
this.list[3].percentage = res.riskNewUserRata
|
|
this.list[4].num = res.riskSensitiveTotal
|
this.list[4].percentage = res.riskSensitiveRata
|
|
this.list[5].num = res.riskDelayUnitTotal
|
this.list[5].percentage = res.riskDelayUnitRata
|
|
this.list[6].num = res.riskUnTakeEffectTotal
|
this.list[6].percentage = res.riskUnTakeEffectRata
|
|
let arr5_x = res.monthTotalMoneyDataList.map(item => item.dataFirst)
|
let arr5_y = res.monthTotalMoneyDataList.map(item => item.dataSecond)
|
|
let arr6 = res.caseTypeDataList ? res.caseTypeDataList.map(item => {
|
return {
|
name: item.dataFirst,
|
value: item.dataSecond
|
}
|
}) : []
|
|
let arr7_x = res.typeDataList ? res.typeDataList.map(item => {
|
return {
|
name: item.dataFirst
|
}
|
}) : []
|
let arr7_y = res.typeDataList ? res.typeDataList.map(item => Number(item.dataSecond)) : []
|
|
let arr8_x = res.closeRataDataList.map(item => item.dataFirst)
|
let arr8_y = res.closeRataDataList.map(item => Number(item.dataSecond))
|
|
let arr9_x = res.workTypeDataList.map(item => item.dataFirst)
|
let arr9_y = res.workTypeDataList.map(item => Number(item.dataSecond))
|
|
let arr10_x = res.memberAgeDataList.map(item => item.dataFirst)
|
let arr10_y = res.memberAgeDataList.map(item => Number(item.dataSecond))
|
|
let arr11_x = res.areaDataList ? res.areaDataList.map(item => {
|
return {
|
name: item.dataFirst,
|
code: item.dataThird,
|
value: item.dataThird
|
}
|
}) : []
|
|
this.$nextTick(() => {
|
this.setChart1(arr1_x, arr1_y)
|
this.setChart2(arr2_x, arr2_y)
|
this.setChart3(arr3_x, arr3_y)
|
this.setChartWord(arr4)
|
this.setChartLipeijine(arr5_x, arr5_y)
|
this.setChartAnjianleixing(arr6)
|
this.setChartShiguleixing(arr7_x, arr7_y)
|
this.setChartJieanlv(arr8_x, arr8_y)
|
this.setChartGonghzong(arr9_x, arr9_y)
|
this.setChartNianlin(arr10_x, arr10_y)
|
this.setChartDiqu(arr11_x)
|
})
|
})
|
},
|
getData() {
|
getInsuranceDataVO()
|
.then(res => {
|
this.info = res
|
})
|
},
|
changeDataType(type){
|
this.dateType = type
|
},
|
setChartLipeijine (xData, yData) {
|
const chartDom = document.getElementById('tuLipeijine')
|
const myChart = echarts.init(chartDom)
|
const option = this.getBarOption(xData, yData,'#5470c5')
|
option && myChart.setOption(option)
|
window.addEventListener('resize', function () {//执行
|
myChart.resize()
|
})
|
},
|
setChartDiqu (mapData) {
|
const chartDom = document.getElementById('tuDiqu')
|
const myChart = echarts.init(chartDom)
|
echarts.registerMap('china', chinaJSON)
|
// const mapData = [
|
// { name: '北京市', code: '110000', value: 100 },
|
// { name: '天津市', code: '120000', value: 200 },
|
// { name: '上海市', code: '310000', value: 300 },
|
// { name: '重庆市', code: '500000', value: 400 },
|
// { name: '河北省', code: '130000', value: 500 },
|
// { name: '河南省', code: '410000', value: 600 },
|
// { name: '云南省', code: '530000', value: 10 },
|
// { name: '辽宁省', code: '210000', value: 20 },
|
// { name: '黑龙江省', code: '230000', value: 30 },
|
// { name: '湖南省', code: '430000', value: 40 },
|
// { name: '安徽省', code: '340000', value: 60 },
|
// { name: '山东省', code: '370000', value: 50 },
|
// { name: '新疆维吾尔自治区', code: '650000', value: 70 },
|
// { name: '江苏省', code: '320000', value: 10 },
|
// { name: '浙江省', code: '330000', value: 20 },
|
// { name: '江西省', code: '360000', value: 30 },
|
// { name: '湖北省', code: '420000', value: 40 },
|
// { name: '广西壮族自治区', code: '450000', value: 0 },
|
// { name: '甘肃省', code: '620000', value: 0 },
|
// { name: '山西省', code: '140000', value: 0 },
|
// { name: '内蒙古自治区', code: '150000', value: 0 },
|
// { name: '陕西省', code: '610000', value: 0 },
|
// { name: '吉林省', code: '220000', value: 0 },
|
// { name: '福建省', code: '350000', value: 0 },
|
// { name: '贵州省', code: '520000', value: 0 },
|
// { name: '广东省', code: '440000', value: 0 },
|
// { name: '青海省', code: '630000', value: 0 },
|
// { name: '西藏自治区', code: '540000', value: 0 },
|
// { name: '宁夏回族自治区', code: '640000', value: 0 },
|
// { name: '四川省', code: '510000', value: 0 },
|
// { name: '宁夏省', code: '640000', value: 0 },
|
// { name: '海南省', code: '460000', value: 0 },
|
// { name: '台湾省', code: '710000', value: 0 },
|
// { name: '香港特别行政区', code: '810000', value: 0 },
|
// { name: '澳门特别行政区', code: '820003', value: 0 },
|
// { name: '南海诸岛', code: '', value: 0 }
|
// ]
|
const option = {
|
tooltip: {
|
trigger: 'item',
|
formatter: '{b}<br/>{c}'
|
},
|
// toolbox: {
|
// show: true,
|
// orient: 'vertical',
|
// left: 'right',
|
// top: 'center',
|
// feature: {
|
// dataView: { readOnly: false },
|
// restore: {},
|
// saveAsImage: {}
|
// }
|
// },
|
visualMap: {
|
top: 100,
|
left: 'right',
|
// min: 0,
|
// max: 50000,
|
// text: ['High', 'Low'],
|
// realtime: false,
|
calculable: true,
|
show: false,
|
inRange: {
|
color: ['lightskyblue', 'yellow', 'orangered']
|
}
|
},
|
series: [
|
{
|
name: '地区分布',
|
type: 'map',
|
map: 'china',
|
label: {
|
show: true
|
},
|
data: mapData
|
}
|
]
|
}
|
myChart.setOption(option)
|
window.addEventListener('resize', function () {//执行
|
myChart.resize()
|
})
|
},
|
setChartAnjianleixing (data) {
|
const chartDom = document.getElementById('tuAnjianleixing')
|
const myChart = echarts.init(chartDom)
|
const option = {
|
grid: {
|
left: '3%',
|
right: '3%',
|
top: '10%',
|
bottom: '0%',
|
containLabel: true
|
},
|
label: {
|
alignTo: 'edge',
|
formatter: '{name|{b}}\n{time|{c} }',
|
minMargin: 5,
|
edgeDistance: 10,
|
lineHeight: 15,
|
rich: {
|
time: {
|
fontSize: 10,
|
color: '#999'
|
}
|
}
|
},
|
tooltip: {
|
trigger: 'item'
|
},
|
legend: {
|
orient: 'vertical',
|
left: 'right'
|
},
|
series: [
|
{
|
data,
|
type: 'pie',
|
areaStyle: {},
|
smooth: true
|
}
|
]
|
}
|
|
option && myChart.setOption(option)
|
window.addEventListener('resize', function () {//执行
|
myChart.resize()
|
})
|
},
|
setChartShiguleixing (indicator, value) {
|
if (indicator.length === 0) return;
|
var chartDom = document.getElementById('tuShiguleixing');
|
var myChart = echarts.init(chartDom);
|
var option = {
|
radar: {
|
indicator
|
},
|
tooltip: {
|
trigger: 'item'
|
},
|
series: [
|
{
|
name: '事故类型分布',
|
type: 'radar',
|
data: [
|
{
|
value,
|
name: ''
|
}
|
]
|
}
|
]
|
}
|
option && myChart.setOption(option);
|
window.addEventListener('resize', function () {//执行
|
myChart.resize()
|
})
|
},
|
setChartJieanlv (xData, yData) {
|
const chartDom = document.getElementById('tuJieanlv')
|
const myChart = echarts.init(chartDom)
|
const option = this.getLineOption(xData, yData,'rgba(207,58,24,0.83)')
|
option && myChart.setOption(option)
|
window.addEventListener('resize', function () {//执行
|
myChart.resize()
|
})
|
},
|
setChartGonghzong (dataX, dataY) {
|
var chartDom = document.getElementById('tuGongzhong');
|
var myChart = echarts.init(chartDom);
|
var option = {
|
grid: {
|
left: '3%',
|
right: '4%',
|
bottom: '3%',
|
containLabel: true
|
},
|
xAxis: {
|
type: 'value'
|
// boundaryGap: [0, 0.01]
|
},
|
yAxis: {
|
type: 'category',
|
data: dataX
|
},
|
series: [
|
{
|
name: '2025',
|
type: 'bar',
|
itemStyle: {
|
color: '#f6d68d'
|
},
|
data: dataY
|
}
|
]
|
}
|
option && myChart.setOption(option);
|
window.addEventListener('resize', function () {//执行
|
myChart.resize()
|
})
|
},
|
setChartNianlin (dataX, dataY) {
|
const chartDom = document.getElementById('tuNianlin')
|
const myChart = echarts.init(chartDom)
|
const option = this.getBarOption(dataX, dataY,'#80d3ff')
|
option && myChart.setOption(option)
|
window.addEventListener('resize', function () {//执行
|
myChart.resize()
|
})
|
},
|
setChartWord (data) {
|
// const color = ['#1890FF', '#13C2C2', '#2FC25B', '#009DFF', '#8496FA']
|
const myChart = echarts.init(document.getElementById('wordchart'))
|
var option = {
|
backgroundColor: '#fff',
|
series: [
|
{
|
type: 'wordCloud',
|
sizeRange: [15, 70], // 用来调整字的大小范围
|
rotationRange: [0, 0], // 每个词旋转的角度范围和旋转的步进
|
rotationStep: 45,
|
gridSize: 10, // 用来调整词之间的距离
|
shape: 'pentagon', // shape这个属性虽然可配置，但是在词的数量不太多的时候，效果不明显，它会趋向于画一个椭圆
|
// 位置的配置
|
width: '100%',
|
height: '100%',
|
drawOutOfBound: false, // 允许词太大的时候，超出画布的范围
|
layoutAnimation: true, // 布局的时候是否有动画
|
textStyle: {
|
// 颜色可以用一个函数来返回字符串，这里是随机色
|
/* color: function (v) {
|
const index = Math.floor(Math.random() * color.length)
|
return color[index]
|
}, */
|
fontFamily: 'sans-serif',
|
fontWeight: 'bold',
|
// Color可以是一个回调函数或一个颜色字符串
|
color: function () {
|
// Random color
|
return 'rgb(' + [
|
Math.round(Math.random() * 160),
|
Math.round(Math.random() * 160),
|
Math.round(Math.random() * 160)
|
].join(',') + ')'
|
}
|
},
|
// 划过添加的阴影，因为我不需要，因此注释了
|
// emphasis: {
|
// focus: 'self',
|
// textStyle: {
|
// textShadowBlur: 10,
|
// textShadowColor: '#333'
|
// }
|
// },
|
// data格式是一个数组
|
data
|
}
|
]
|
}
|
myChart.setOption(option)
|
},
|
setChart1 (xdata, ydata) {
|
const chartDom = document.getElementById('tu1')
|
const myChart = echarts.init(chartDom)
|
const option = this.getLineOption(xdata, ydata,'#50A850')
|
option && myChart.setOption(option)
|
window.addEventListener('resize', function () {//执行
|
myChart.resize()
|
})
|
},
|
setChart2 (xdata, ydata) {
|
const chartDom = document.getElementById('tu2')
|
const myChart = echarts.init(chartDom)
|
const option = this.getLineOption(xdata,ydata,'#f07e6f')
|
option && myChart.setOption(option)
|
window.addEventListener('resize', function () {//执行
|
myChart.resize()
|
})
|
},
|
setChart3 (xdata, ydata) {
|
const chartDom = document.getElementById('tu3')
|
const myChart = echarts.init(chartDom)
|
const option = this.getLineOption(xdata,ydata,'#8951be')
|
option && myChart.setOption(option)
|
window.addEventListener('resize', function () {//执行
|
myChart.resize()
|
})
|
},
|
getBarOption(xd,yd,color){
|
const option = {
|
grid: {
|
left: '3%',
|
right: '3%',
|
top: '10%',
|
bottom: '0%',
|
containLabel: true
|
},
|
legend: {},
|
tooltip: {
|
trigger: 'axis',
|
axisPointer: {
|
type: 'shadow'
|
}
|
},
|
xAxis: {
|
type: 'category',
|
// boundaryGap: false,
|
data: xd,
|
axisLabel: {
|
interval: 1 //
|
}
|
},
|
yAxis: {
|
type: 'value'
|
},
|
series: [
|
{
|
emphasis: {
|
focus: 'series'
|
},
|
data: yd,
|
type: 'bar',
|
itemStyle: {
|
color: color || '#f07e6f'
|
},
|
smooth: true
|
}
|
]
|
}
|
return option
|
},
|
getLineOption(xd,yd,color){
|
const option = {
|
grid: {
|
left: '3%',
|
right: '3%',
|
top: '10%',
|
bottom: '0%',
|
containLabel: true
|
},
|
tooltip: {
|
trigger: 'axis',
|
axisPointer: {
|
type: 'shadow'
|
}
|
},
|
legend: {},
|
xAxis: {
|
type: 'category',
|
boundaryGap: false,
|
data: xd
|
},
|
yAxis: {
|
type: 'value'
|
},
|
series: [
|
{
|
data: yd,
|
type: 'line',
|
areaStyle: {
|
opacity: 0.5,
|
color: color || '#f07e6f'
|
},
|
lineStyle: {
|
color: color || '#f07e6f'
|
},
|
smooth: true
|
}
|
]
|
}
|
return option
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.box {
|
width: 100%;
|
padding: 0 10px 30px 10px;
|
|
box-sizing: border-box;
|
.box_shua {
|
width: 100%;
|
display: flex;
|
justify-content: end;
|
margin-bottom: 10px;
|
}
|
.box_head {
|
width: 100%;
|
padding: 0 15px 15px 15px;
|
box-sizing: border-box;
|
background-color: #ffffff;
|
border-radius: 20px;
|
display: flex;
|
flex-direction: column;
|
box-shadow: 0 2px 6px 0 rgba(206,206,206,0.21);
|
.box_head_info {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
margin: 8px 0;
|
span {
|
color: rgba(16,16,16,1);
|
font-size: 14px;
|
margin-left: 5px;
|
}
|
}
|
.box_head_list {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.box_head_list_item {
|
width: 24%;
|
height: 100px;
|
padding: 15px;
|
box-sizing: border-box;
|
background-color: rgba(239,246,255,1);
|
border-radius: 20px;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
.box_head_list_item_top {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
span {
|
&:nth-child(1) {
|
color: rgba(154,154,154,1);
|
font-size: 14px;
|
}
|
&:nth-child(2) {
|
color: rgba(255,58,48,1);
|
font-size: 14px;
|
}
|
}
|
}
|
.box_head_list_item_bottom {
|
color: rgba(16,16,16,1);
|
font-size: 22px;
|
font-weight: bold;
|
}
|
}
|
}
|
}
|
.box_chart {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
margin-top: 15px;
|
.datetype{
|
cursor: pointer;
|
color: #8c939d;
|
margin-right: 10px;
|
padding: 2px 10px;
|
font-size: 14px;
|
border: solid 1px #8c939d;
|
}
|
.seldatetype{
|
cursor: pointer;
|
color: #3170fe;
|
margin-right: 10px;
|
padding: 2px 10px;
|
font-size: 14px;
|
border: solid 1px #3170fe;
|
}
|
.box_chart_item {
|
width: 32.5%;
|
height: 225px;
|
padding: 15px;
|
box-sizing: border-box;
|
background-color: #ffffff;
|
border-radius: 20px;
|
box-shadow: 0 2px 6px 0 rgba(206,206,206,0.21);
|
.box_chart_item_info {
|
display: flex;
|
align-items: center;
|
span {
|
color: rgba(154,154,154,1);
|
font-size: 14px;
|
margin-right: 5px;
|
}
|
}
|
.box_content_right_title {
|
font-weight: bold;
|
font-size: 16px;
|
color: #101010;
|
margin-bottom: 15px;
|
}
|
.box_chart_item_price {
|
color: rgba(16,16,16,1);
|
font-size: 22px;
|
margin-top: 4px;
|
font-weight: bold;
|
}
|
.box_chart_item_tu {
|
width: 100%;
|
height: 90%;
|
}
|
}
|
}
|
.box_shuju {
|
width: 32.5%;
|
height: 93px;
|
border-radius: 20px;
|
margin-top: 15px;
|
margin-bottom: 15px;
|
padding: 15px;
|
box-sizing: border-box;
|
background-color: #ffffff;
|
box-shadow: 0 2px 6px 0 rgba(206,206,206,0.21);
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.box_shuju_item {
|
width: 33%;
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
align-items: center;
|
.box_shuju_item_top {
|
display: flex;
|
align-items: center;
|
span {
|
color: rgba(154,154,154,1);
|
font-size: 14px;
|
margin-right: 4px;
|
}
|
}
|
.box_shuju_item_bottom {
|
color: rgba(16,16,16,1);
|
font-size: 22px;
|
font-weight: bold;
|
}
|
}
|
}
|
.box_content {
|
width: 100%;
|
height: 270px;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.box_content_left {
|
width: 66%;
|
height: 100%;
|
background-color: #fff;
|
padding: 15px;
|
box-sizing: border-box;
|
.box_content_left_title {
|
font-weight: bold;
|
font-size: 16px;
|
color: #101010;
|
margin-bottom: 15px;
|
}
|
.box_content_left_list {
|
width: 100%;
|
display: flex;
|
flex-wrap: wrap;
|
align-items: center;
|
justify-content: space-between;
|
.box_content_left_list_item {
|
width: 24%;
|
height: 94px;
|
padding: 16px 20px;
|
box-sizing: border-box;
|
border-radius: 15px;
|
background-color: #FEF2F2;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
margin-bottom: 15px;
|
.box_content_left_list_item_top {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
span {
|
&:nth-child(1) {
|
color: rgba(75,85,99,1);
|
font-size: 18px;
|
}
|
&:nth-child(2) {
|
color: rgba(239,68,68,1);
|
font-size: 16px;
|
}
|
}
|
}
|
.box_content_left_list_item_bottom {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
span {
|
color: rgba(16,16,16,1);
|
font-size: 14px;
|
margin-right: 6px;
|
}
|
.box_content_left_list_item_bottom_lv {
|
color: rgba(239,68,68,1);
|
font-size: 14px;
|
}
|
}
|
}
|
}
|
}
|
.box_content_right {
|
width: 33%;
|
height: 100%;
|
padding: 15px;
|
box-sizing: border-box;
|
background-color: #fff;
|
.box_content_right_title {
|
font-weight: bold;
|
font-size: 16px;
|
color: #101010;
|
margin-bottom: 15px;
|
}
|
.box_chart_item_tu {
|
width: 100%;
|
height: 130px;
|
}
|
}
|
}
|
}
|
</style>
|
