<template>
|
<div class="box">
|
<div class="box_shua">
|
<el-button icon="el-icon-refresh" type="primary">刷新数据</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">
|
<div class="box_head_list_item">
|
<div class="box_head_list_item_top">
|
<span>保险公司数</span>
|
<span>本月 +3</span>
|
</div>
|
<div class="box_head_list_item_bottom">32</div>
|
</div>
|
<div class="box_head_list_item">
|
<div class="box_head_list_item_top">
|
<span>保单数</span>
|
<span>本月 +12</span>
|
</div>
|
<div class="box_head_list_item_bottom">88</div>
|
</div>
|
<div class="box_head_list_item">
|
<div class="box_head_list_item_top">
|
<span>在保人数</span>
|
<span>本月 +300</span>
|
</div>
|
<div class="box_head_list_item_bottom">2,000</div>
|
</div>
|
<div class="box_head_list_item">
|
<div class="box_head_list_item_top">
|
<span>已收费用合计</span>
|
<span>本月 +813,789.00</span>
|
</div>
|
<div class="box_head_list_item_bottom">¥6,345,654.00</div>
|
</div>
|
</div>
|
</div>
|
<div class="box_chart">
|
<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">¥2,345,654.00</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">1,234</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">10.5天</div>
|
<div class="box_chart_item_tu" style="height: 132px" id="tu3"></div>
|
</div>
|
</div>
|
<div class="box_shuju">
|
<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">95.3%</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">12.8%</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">88.9%</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">
|
8.3%
|
</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'
|
export default {
|
name: 'dataBoard',
|
data () {
|
return {
|
dateType:0,
|
list: [
|
{
|
title: '多次出险',
|
num: 0,
|
color: '#EF4444',
|
backgroundColor: '#FEF2F2'
|
},
|
{
|
title: '重复报案',
|
num: 0,
|
color: '#d6f7e5',
|
backgroundColor: '#FFF7ED'
|
},
|
{
|
title: '索赔过多',
|
num: 0,
|
color: '#CA8A04',
|
backgroundColor: '#FEFCE8'
|
},
|
{
|
title: '新员工出险',
|
num: 0,
|
color: '#3ea570',
|
backgroundColor: '#d6f7e5'
|
},
|
{
|
title: '敏感词',
|
num: 0,
|
color: '#2563EB',
|
backgroundColor: '#EFF6FF'
|
},
|
{
|
title: '延迟报案',
|
num: 0,
|
color: '#4F46E5',
|
backgroundColor: '#EEF2FF'
|
},
|
{
|
title: '新员工保障条款',
|
num: 0,
|
color: '#9333EA',
|
backgroundColor: '#FAF5FF'
|
},
|
{
|
title: '',
|
num: 0,
|
color: '#9333EA',
|
backgroundColor: '#FAF5FF'
|
}
|
]
|
}
|
},
|
created () {
|
this.$nextTick(() => {
|
this.setChart1()
|
this.setChart2()
|
this.setChart3()
|
this.setChartLipeijine()
|
this.setChartDiqu()
|
this.setChartAnjianleixing()
|
this.setChartShiguleixing()
|
this.setChartJieanlv()
|
this.setChartGonghzong()
|
this.setChartNianlin()
|
this.setChartWord()
|
})
|
},
|
methods: {
|
changeDataType(type){
|
this.dateType = type
|
},
|
setChartLipeijine () {
|
const chartDom = document.getElementById('tuLipeijine')
|
const myChart = echarts.init(chartDom)
|
const option = this.getBarOption(['2024-05', '2024-06', '2024-07', '2024-08', '2024-09', '2024-10', '2024-11', '2024-12', '2025-01', '2025-02', '2025-03', '2025-04'],
|
[1320, 1322, 1031, 1344, 950, 2360, 210,1320, 1322, 1031, 1344, 950],'#5470c5')
|
option && myChart.setOption(option)
|
window.addEventListener('resize', function () {//执行
|
myChart.resize()
|
})
|
},
|
setChartDiqu () {
|
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 () {
|
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: [{ value: 1048, name: 'Search Engine' },
|
{ value: 735, name: 'Direct' },
|
{ value: 580, name: 'Email' },
|
{ value: 484, name: 'Union Ads' },
|
{ value: 300, name: 'Video Ads' }],
|
type: 'pie',
|
areaStyle: {},
|
smooth: true
|
}
|
]
|
}
|
|
option && myChart.setOption(option)
|
window.addEventListener('resize', function () {//执行
|
myChart.resize()
|
})
|
},
|
setChartShiguleixing () {
|
var chartDom = document.getElementById('tuShiguleixing');
|
var myChart = echarts.init(chartDom);
|
var option = {
|
// legend: {
|
// data: ['Allocated Budget', 'Actual Spending']
|
// },
|
radar: {
|
// shape: 'circle',
|
indicator: [
|
{name: '交通事故', max: 16500},
|
{name: '工地受伤', max: 16000},
|
{name: '意外受伤', max: 30000},
|
{name: '其他事故', max: 38000},
|
{name: '医疗事故', max: 52000},
|
{name: '自然灾害', max: 25000}
|
]
|
},
|
tooltip: {
|
trigger: 'item'
|
},
|
series: [
|
{
|
name: '事故类型分布',
|
type: 'radar',
|
data: [
|
{
|
value: [4200, 3000, 20000, 35000, 50000, 18000],
|
name: ''
|
}
|
]
|
}
|
]
|
}
|
option && myChart.setOption(option);
|
window.addEventListener('resize', function () {//执行
|
myChart.resize()
|
})
|
},
|
setChartJieanlv () {
|
const chartDom = document.getElementById('tuJieanlv')
|
const myChart = echarts.init(chartDom)
|
const option = this.getLineOption(['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], [120, 132, 101, 134, 90, 230, 210],'rgba(207,58,24,0.83)')
|
option && myChart.setOption(option)
|
window.addEventListener('resize', function () {//执行
|
myChart.resize()
|
})
|
},
|
setChartGonghzong () {
|
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: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']
|
},
|
series: [
|
{
|
name: '2025',
|
type: 'bar',
|
itemStyle: {
|
color: '#f6d68d'
|
},
|
data: [18203, 23489, 29034, 104970, 131744, 630230]
|
}
|
]
|
}
|
option && myChart.setOption(option);
|
window.addEventListener('resize', function () {//执行
|
myChart.resize()
|
})
|
},
|
setChartNianlin () {
|
const chartDom = document.getElementById('tuNianlin')
|
const myChart = echarts.init(chartDom)
|
const option = this.getBarOption(['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], [120, 132, 101, 134, 90, 230, 210],'#80d3ff')
|
option && myChart.setOption(option)
|
window.addEventListener('resize', function () {//执行
|
myChart.resize()
|
})
|
},
|
setChartWord () {
|
// 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: [{
|
name: '红色',
|
value: 200
|
},
|
{
|
name: '蓝色',
|
value: 300
|
},
|
{
|
name: '测试',
|
value: 600
|
},
|
{
|
name: '重大事故',
|
value: 500
|
}
|
]
|
}
|
]
|
|
}
|
myChart.setOption(option)
|
},
|
setChart1 () {
|
const chartDom = document.getElementById('tu1')
|
const myChart = echarts.init(chartDom)
|
var ydata = [2, 7, 3, 12, 16, 9, 6]
|
var xdata = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
const option = this.getLineOption(xdata,ydata,'#50A850')
|
option && myChart.setOption(option)
|
window.addEventListener('resize', function () {//执行
|
myChart.resize()
|
})
|
},
|
setChart2 () {
|
const chartDom = document.getElementById('tu2')
|
const myChart = echarts.init(chartDom)
|
var ydata = [2, 7, 3, 12, 16, 9, 6]
|
var xdata = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
const option = this.getLineOption(xdata,ydata,'#f07e6f')
|
option && myChart.setOption(option)
|
window.addEventListener('resize', function () {//执行
|
myChart.resize()
|
})
|
},
|
setChart3 () {
|
const chartDom = document.getElementById('tu3')
|
const myChart = echarts.init(chartDom)
|
var ydata = [2, 7, 3, 12, 16, 9, 6]
|
var xdata = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
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>
|
