williamet/vis389
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

修改rem前

Browse Source
This commit is contained in:
熊丽君
2021-12-08 18:18:13 +08:00
parent ece8914427
commit 6f7b220452
10 changed files with 531 additions and 375 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/views/bigScreen/components/progress/index.vue Normal file
View File

@ -0,0 +1,26 @@
<template>
<div style="min-width: 100px">
<el-progress :show-text="false" :stroke-width="6" :percentage="percentage"></el-progress>
</div>
</template>
<script>
export default {
props: {
percentage: {
type: [Number, String],
require: true,
default: 0,
},
},
}
</script>
<style lang="scss" scoped>
.el-progress {
::v-deep .el-progress-bar__outer {
background-color: rgba(85, 197, 162, 0.29);
.el-progress-bar__inner {
background: linear-gradient(180deg, #91d5fe 0%, #53c19d 100%);
}
}
}
</style>

392
src/views/bigScreen/drivingCabin/center.vue
View File

@ -1,232 +1,202 @@
<template> <template>
<div> <div>
<container3> <container3>
<img class="img" src="./conter2.jpg" style="width: 100%;height:100%"> <img class="img" src="./conter.png" style="width: 100%; height: 100%" />
<rocketTit class="tit">今日动态</rocketTit> <rocketTit class="tit">全年目标</rocketTit>
<div class="data"> <div class="data">
<div class="data-item"> <div class="data-item">
<div>收入</div> <div><img src="./icon1.png" alt="" /><span>收入</span></div>
<div><span class="num">3380</span>万</div> <div class="box"><i>3380/</i><i class="num">12342</i><span class="num2">万</span></div>
</div> <div style="padding: 0 15px">
<div class="data-item"> <progressBar :percentage="70" />
<div>支出</div> </div>
<div><span class="num">3380</span>万</div> </div>
</div> <div class="data-item">
<div class="data-item"> <div><img src="./icon2.png" alt="" /><span>利润</span></div>
<div>合同</div> <div class="box"><i>380/</i><i class="num">12342</i><span class="num2">万</span></div>
<div><span class="num">3380</span>份</div> <div style="padding: 0 15px">
</div> <progressBar :percentage="70" />
<div class="data-item"> </div>
<div>装药任务</div> </div>
<div><span class="num">3380</span>件</div> <div class="data-item">
</div> <div><img src="./icon3.png" alt="" /><span>装药量</span></div>
<div class="data-item"> <div class="box"><i>999/</i><i class="num">12342</i><span class="num2">万件</span></div>
<div>职工出勤数</div> <div style="padding: 0 15px">
<div><span class="num">3380</span>人</div> <progressBar :percentage="70" />
</div> </div>
<div class="data-item"> </div>
<div>职工出勤数</div> <div class="data-item">
<div><span class="num">42<span style="font-size:22px">/80%</span></span>人</div> <div><img src="./icon4.png" alt="" /><span>交付数量</span></div>
</div> <div class="box"><i>999/</i><i class="num">12342</i><span class="num2">万件</span></div>
</div> <div style="padding: 0 15px">
<progressBar :percentage="70" />
<!-- <div class="con_right"> </div>
<div class="con_title"> </div>
<img src="./conter1-1.png" alt=""> </div>
<span style="margin-left:2px">正在工作</span> </container3>
</div> </div>
<div class="con_height"></div>
<div class="com_img"><img src="./conter1-2.png" alt=""></div>
</div>
<div class="con_right con_two">
<div class="con_title">
<img src="./conter1-1.png" alt="">
<span>正在工作</span>
</div>
<div class="con_height"></div>
<div class="com_img"><img src="./conter1-2.png" alt=""></div>
</div>
<div class="con_left">
<div class="con_left_title">
<img src="./conter2-1.png" alt="">
<div class="con_card">
<div>
<span>当日生产任务</span>
<span>2890</span>
</div>
<div style="margin:7px 0">
<span>正在执行中任务</span>
<span>542</span>
</div>
<div>
<span>已完成</span>
<span>2348</span>
</div>
</div>
</div>
<div class="con_h_two">
<div class="con_bottom">
<img src="./conter2-2.png" alt="">
</div>
</div>
</div> -->
</container3>
</div>
</template> </template>
<script> <script>
import container3 from "../components/container3/index.vue"; import container3 from '../components/container3/index.vue'
import rocketTit from "../components/rocketTit/index.vue"; import rocketTit from '../components/rocketTit/index.vue'
import progressBar from './../components/progress/index.vue'
import echarts from 'echarts' import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme require('echarts/theme/macarons') // echarts theme
import resize from '../../dashboard/mixins/resize' import resize from '../../dashboard/mixins/resize'
export default { export default {
mixins: [resize], mixins: [resize],
name: 'left1', name: 'left1',
components: { components: {
container3, container3,
rocketTit, rocketTit,
}, progressBar,
data () { },
return {} data() {
}, return {}
mounted () { },
mounted() {},
}, beforeDestroy() {},
beforeDestroy () { methods: {},
},
methods: {
}
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.tit { .tit {
padding: 16px 24px; padding: 16px 24px;
} }
.img { .img {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
z-index: -1; z-index: -1;
} }
.data { .data {
display: flex; display: flex;
margin: 0 15px; margin: 0 15px;
background: rgba(2, 18, 63, 0.4); background: rgba(2, 18, 63, 0.33);
color: #FFFFFF; color: #ffffff;
font-size: 18px; font-size: 18px;
.data-item { .data-item {
flex: 1; flex: 1;
>div { > div {
margin: 5px 0; margin: 5px 0;
text-align: center; text-align: center;
} img {
.num { // width: 10px;
font-size: 28px; // height: 10px;
font-family: Roboto-BlackItalic, Roboto; vertical-align: middle;
font-weight: 600; margin-right: 5px;
color: #55C5A2; }
vertical-align: sub; }
padding-right: 3px; .box {
} font-size: 26px;
} font-family: Roboto-BlackItalic, Roboto;
font-weight: 600;
color: #55c5a2;
}
.num {
font-size: 14px;
}
.num2 {
font-size: 16px;
margin-left: 5px;
color: #fff;
}
}
} }
.container3{ .container3 {
position: relative; position: relative;
.con_right{ .con_right {
width: 88px; width: 88px;
position: absolute; position: absolute;
top: 20%; top: 20%;
right: 20%; right: 20%;
color: #00FFFF; color: #00ffff;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
img{ img {
width: 100%; width: 100%;
} }
.con_title{ .con_title {
width: 100%; width: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
img{ img {
width: 25%; width: 25%;
} }
} }
.con_height{ .con_height {
width:2px; width: 2px;
height:20px; height: 20px;
background-color:#00FFFF; background-color: #00ffff;
} }
} }
.con_two{ .con_two {
top: 43%; top: 43%;
right: 12%; right: 12%;
} }
.con_left{ .con_left {
width: 186px; width: 186px;
position: absolute; position: absolute;
top: 60%; top: 60%;
left: 24%; left: 24%;
color: #fff; color: #fff;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-end; align-items: flex-end;
img{ img {
width: 100%; width: 100%;
display: block; display: block;
margin: 0 auto; margin: 0 auto;
} }
.con_left_title{ .con_left_title {
position: relative; position: relative;
.con_card{ .con_card {
width: 100%; width: 100%;
padding: 0 10px; padding: 0 10px;
position: absolute; position: absolute;
top: 22%; top: 22%;
div{ div {
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
span:nth-child(1){ span:nth-child(1) {
opacity: .9; opacity: 0.9;
} }
span:nth-child(2){ span:nth-child(2) {
font-weight: bold; font-weight: bold;
} }
} }
} }
} }
.con_h_two{ .con_h_two {
position: relative; position: relative;
width: 50%; width: 50%;
height: 47px; height: 47px;
border: 1px solid #FA8C16; border: 1px solid #fa8c16;
border-top-width: 0; border-top-width: 0;
border-right-width: 0; border-right-width: 0;
.con_bottom{ .con_bottom {
height: 24px; height: 24px;
line-height: 26px; line-height: 26px;
position: absolute; position: absolute;
right: -50%; right: -50%;
bottom: -50%; bottom: -50%;
text-align: right; text-align: right;
transform: translate(-50%,-50%); transform: translate(-50%, -50%);
img{ img {
width: 38%; width: 38%;
margin: 0; margin: 0;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
} }
} }
} }
} }
} }
</style> </style>

BIN
src/views/bigScreen/drivingCabin/conter.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.4 MiB

After

Width:  |  Height:  |  Size: 2.1 MiB

BIN
src/views/bigScreen/drivingCabin/conter2.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 432 KiB

BIN
src/views/bigScreen/drivingCabin/icon1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 654 B

BIN
src/views/bigScreen/drivingCabin/icon2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 635 B

BIN
src/views/bigScreen/drivingCabin/icon3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 375 B

BIN
src/views/bigScreen/drivingCabin/icon4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 413 B

184
src/views/bigScreen/drivingCabin/left1.vue
View File

@ -6,12 +6,14 @@
<el-col :span="24"> <el-col :span="24">
<div id="left1" ref="left1" class="chart1"></div> <div id="left1" ref="left1" class="chart1"></div>
</el-col> </el-col>
<!-- <el-col :span="12">
<div class="record">
<div>0进展指标 <span class="num">2</span>个</div>
</div>
</el-col> -->
</el-row> </el-row>
<div class="box">
<span style="font-size: 25px; margin-right: 3px">·</span>
<span>总完成任务/完成率</span>
<i class="num">55/80%</i>
<progressBar :percentage="70" />
<el-progress :show-text="false" :stroke-width="6" :percentage="70"></el-progress>
</div>
</div> </div>
</container2> </container2>
<container2 title="收入概况" style="margin-top: 10px"> <container2 title="收入概况" style="margin-top: 10px">
@ -30,6 +32,7 @@
import rocketTit from '../components/rocketTit/index.vue' import rocketTit from '../components/rocketTit/index.vue'
import container2 from './components/container2/index.vue' import container2 from './components/container2/index.vue'
import bigScreenTabs from '../components/bigScreenTabs/index.vue' import bigScreenTabs from '../components/bigScreenTabs/index.vue'
import progressBar from '@/views/bigScreen/components/progress/index.vue'
// import {Liquid} from '@antv/g2plot'; // import {Liquid} from '@antv/g2plot';
// import resize from '../../dashboard/mixins/resize' // import resize from '../../dashboard/mixins/resize'
export default { export default {
@ -39,74 +42,10 @@ export default {
rocketTit, rocketTit,
container2, container2,
bigScreenTabs, bigScreenTabs,
progressBar,
}, },
data() { data() {
return { return {}
index: 0,
data: [
{
year: '2021-01',
value: ~~(Math.random() * 100),
category: '部门一',
},
{
year: '2021-02',
value: ~~(Math.random() * 100),
category: '部门一',
},
{
year: '2021-03',
value: ~~(Math.random() * 100),
category: '部门一',
},
{
year: '2021-04',
value: ~~(Math.random() * 100),
category: '部门一',
},
{
year: '2021-05',
value: ~~(Math.random() * 100),
category: '部门一',
},
{
year: '2021-06',
value: ~~(Math.random() * 100),
category: '部门一',
},
{
year: '2021-01',
value: ~~(Math.random() * 100),
category: '部门二',
},
{
year: '2021-02',
value: ~~(Math.random() * 100),
category: '部门二',
},
{
year: '2021-03',
value: ~~(Math.random() * 100),
category: '部门二',
},
{
year: '2021-04',
value: ~~(Math.random() * 100),
category: '部门二',
},
{
year: '2021-05',
value: ~~(Math.random() * 100),
category: '部门二',
},
{
year: '2021-06',
value: ~~(Math.random() * 100),
category: '部门二',
},
],
}
}, },
mounted() { mounted() {
this.$nextTick(() => { this.$nextTick(() => {
@ -117,18 +56,18 @@ export default {
beforeDestroy() {}, beforeDestroy() {},
methods: { methods: {
initChart() { initChart() {
const { Liquid, Pie } = G2Plot const { Pie } = G2Plot
const data = [ const data = [
{ type: '类别一', value: 235 }, { type: '类别一', value: Math.round(Math.random() * 100) },
{ type: '类别二', value: 565 }, { type: '类别二', value: Math.round(Math.random() * 100) },
{ type: '类别三', value: 927 }, { type: '类别三', value: Math.round(Math.random() * 100) },
{ type: '类别四', value: 574 }, { type: '类别四', value: Math.round(Math.random() * 100) },
{ type: '类别五', value: 214 }, { type: '类别五', value: Math.round(Math.random() * 100) },
{ type: '类别六', value: 214 }, { type: '类别六', value: Math.round(Math.random() * 100) },
{ type: '类别七', value: 214 }, { type: '类别七', value: Math.round(Math.random() * 100) },
{ type: '类别八', value: 214 }, { type: '类别八', value: Math.round(Math.random() * 100) },
{ type: '类别九', value: 214 }, { type: '类别九', value: Math.round(Math.random() * 100) },
{ type: '类别十', value: 214 }, { type: '类别十', value: Math.round(Math.random() * 100) },
] ]
const calcAverageValue = (data, type) => { const calcAverageValue = (data, type) => {
const items = data.filter(d => d.type === type) const items = data.filter(d => d.type === type)
@ -217,40 +156,42 @@ export default {
lineWidth: 0, lineWidth: 0,
}, },
}) })
// const liquidPlot = new Liquid(this.$refs.left1, { liquidPlot.render()
// percent: 0.25,
// statistic: {
// content: {
// style: {
// color: 'rgb(255,255,255)',
// fontSize: 18,
// },
// customHtml: (container, view, { percent }) => {
// const text = `总体<br/>完成情况 ${(percent * 100).toFixed(0)}%`;
// return `<div>${text}</div>`;
// },
// }
// },
// outline: {
// border: 4,
// style: {
// stroke: 'l(0) 0:rgba(89, 184, 244, 1) 0.5:rgba(106, 232, 216, 1) 1:rgba(88, 151, 240, 1)'
// }
// },
// wave: {
// length: 128,
// },
// });
console.log(liquidPlot.render())
// liquidPlot.render();
}, },
initLine() { initLine() {
const { Line } = G2Plot const { Column } = G2Plot
let arr = this.data const column = new Column(this.$refs.left2, {
const line = new Line(this.$refs.left2, { data: [
// { 城市: '七台河', 销售额: 52827.32 },
{ 城市: '万县', 销售额: 16921.576 },
{ 城市: '三亚', 销售额: 22698.396 },
{ 城市: '三岔子', 销售额: 3262.98 },
{ 城市: '三明', 销售额: 1458.8 },
{ 城市: '上梅', 销售额: 11704.476 },
{ 城市: '上海', 销售额: 58245.567999 },
{ 城市: '上虞', 销售额: 10672.872 },
{ 城市: '东丰', 销售额: 1785.84 },
{ 城市: '东村', 销售额: 13692.14 },
{ 城市: '东海', 销售额: 4508.28 },
{ 城市: '东胜', 销售额: 12766.068 },
{ 城市: '东莞', 销售额: 10165.89 },
{ 城市: '东营', 销售额: 17153.92 },
{ 城市: '东台', 销售额: 2789.892 },
{ 城市: '东宁', 销售额: 2706.2 },
],
xField: '城市',
yField: '销售额',
xAxis: {
label: {
autoRotate: false,
},
},
slider: {
start: 0,
end: 0.5,
},
}) })
// line.render() column.render()
}, },
}, },
} }
@ -262,6 +203,16 @@ export default {
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
width: 100%; width: 100%;
.box {
padding: 0 0 5px 15px;
display: flex;
align-items: center;
.num {
font-size: 24px;
font-weight: 600;
margin: 0 10px;
}
}
} }
.content1 { .content1 {
@ -314,6 +265,13 @@ export default {
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%;
.chart2 {
margin: 0 auto;
width: 100%;
height: 192px;
background: transparent;
}
.titWrap { .titWrap {
height: 30px; height: 30px;

304
src/views/bigScreen/drivingCabin/right1.vue
View File

@ -1,15 +1,22 @@
<template> <template>
<div> <div>
<!-- <container2 title="经营责任书完成概况"> <container2 title="生产责任令完成概况">
<div class="wrap"> <div class="wrap">
<el-row class="content1"> <el-row class="content1">
<el-col :span="24"> <el-col :span="24">
<div id="left1" ref="left1" class="chart1"></div> <div id="left1" ref="left1" class="chart1"></div>
</el-col> </el-col>
</el-row> </el-row>
<div class="box">
<span style="font-size: 25px; margin-right: 3px">·</span>
<span>已完成任务/完成率</span>
<i class="num">55/80%</i>
<progressBar :percentage="70" />
<el-progress :show-text="false" :stroke-width="6" :percentage="70"></el-progress>
</div>
</div> </div>
</container2> </container2>
<container2 title="收入概况" style="margin-top: 10px"> <container2 title="交付产品完成概况" style="margin-top: 10px">
<div class="wrap"> <div class="wrap">
<el-row class="content2"> <el-row class="content2">
<el-col :span="24"> <el-col :span="24">
@ -17,77 +24,272 @@
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
</container2> --> </container2>
<!-- <rocketTit style="margin-bottom: 9px">生产动态</rocketTit>
<container4>
<el-row style="height: 100%">
<el-col :span="12" style="height: 100%">
<div class="right1_bg right1_bg1">
<div style="padding: 10px 0 20px 0"><span class="num">2890</span>件</div>
<div style="font-size: 18px">今日装药任务</div>
</div>
</el-col>
<el-col :span="12" style="height: 100%">
<div class="right1_bg right1_bg2">
<div style="padding: 10px 0 20px 0"><span class="num">824</span>人</div>
<div style="font-size: 18px">今日职工数</div>
</div>
</el-col>
</el-row>
</container4> -->
</div> </div>
</template> </template>
<script> <script>
import rocketTit from '../components/rocketTit/index.vue' import rocketTit from '../components/rocketTit/index.vue'
import container4 from '../components/container4/index.vue' import container2 from './components/container2/index.vue'
import resize from '../../dashboard/mixins/resize' import bigScreenTabs from '../components/bigScreenTabs/index.vue'
import progressBar from '@/views/bigScreen/components/progress/index.vue'
// import {Liquid} from '@antv/g2plot';
// import resize from '../../dashboard/mixins/resize'
export default { export default {
mixins: [resize], // mixins: [resize],
name: 'right1', name: 'right1',
components: { components: {
rocketTit, rocketTit,
container4, container2,
bigScreenTabs,
progressBar,
}, },
data() { data() {
return {} return {}
}, },
mounted() {}, mounted() {
this.$nextTick(() => {
this.initChart()
this.initLine()
})
},
beforeDestroy() {}, beforeDestroy() {},
methods: {}, methods: {
initChart() {
const { Pie } = G2Plot
const data = [
{ type: '类别一', value: Math.round(Math.random() * 100) },
{ type: '类别二', value: Math.round(Math.random() * 100) },
{ type: '类别三', value: Math.round(Math.random() * 100) },
{ type: '类别四', value: Math.round(Math.random() * 100) },
{ type: '类别五', value: Math.round(Math.random() * 100) },
{ type: '类别六', value: Math.round(Math.random() * 100) },
{ type: '类别七', value: Math.round(Math.random() * 100) },
{ type: '类别八', value: Math.round(Math.random() * 100) },
{ type: '类别九', value: Math.round(Math.random() * 100) },
{ type: '类别十', value: Math.round(Math.random() * 100) },
]
const calcAverageValue = (data, type) => {
const items = data.filter(d => d.type === type)
return items.length ? items.reduce((a, b) => a + b.value, 0) / items.length : '-'
}
const liquidPlot = new Pie(this.$refs.left1, {
data: data,
angleField: 'value',
colorField: 'type',
legend: {
itemHeight: 13,
pageNavigator: {
marker: {
style: {
// 非激活，不可点击态时的填充色设置
inactiveFill: '#fff',
inactiveOpacity: 0.45,
// 默认填充色设置
fill: '#fff',
opacity: 0.8,
size: 12,
},
},
text: {
style: {
fill: '#fff',
fontSize: 8,
},
},
},
offsetX: -30,
itemName: {
style: {
fill: '#fff',
},
},
itemValue: {
formatter: (text, item) => {
return calcAverageValue(data, item.value)
},
style: (item, index) => {
return {
fill: '#fff',
}
},
},
},
color: ['#4e7cde', '#4eba97', '#506186', '#d2a31d', '#c65a49'],
radius: 0.9,
label: {
type: 'inner',
offset: '-50%',
content: ({ percent }) => `${(percent * 100).toFixed(0)}%`,
style: {
fontSize: 14,
textAlign: 'center',
},
},
interactions: [{ type: 'element-active' }],
pieStyle: {
lineWidth: 0,
},
innerRadius: 0.5,
statistic: {
title: false,
content: {
style: {
whiteSpace: 'pre-wrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
},
content: '',
},
},
})
liquidPlot.render()
},
initLine() {
const { Column } = G2Plot
const column = new Column(this.$refs.left2, {
data: [
{ 城市: '七台河', 销售额: 52827.32 },
{ 城市: '万县', 销售额: 16921.576 },
{ 城市: '三亚', 销售额: 22698.396 },
{ 城市: '三岔子', 销售额: 3262.98 },
{ 城市: '三明', 销售额: 1458.8 },
{ 城市: '上梅', 销售额: 11704.476 },
{ 城市: '上海', 销售额: 58245.567999 },
{ 城市: '上虞', 销售额: 10672.872 },
{ 城市: '东丰', 销售额: 1785.84 },
{ 城市: '东村', 销售额: 13692.14 },
{ 城市: '东海', 销售额: 4508.28 },
{ 城市: '东胜', 销售额: 12766.068 },
{ 城市: '东莞', 销售额: 10165.89 },
{ 城市: '东营', 销售额: 17153.92 },
{ 城市: '东台', 销售额: 2789.892 },
{ 城市: '东宁', 销售额: 2706.2 },
],
xField: '城市',
yField: '销售额',
xAxis: {
label: {
autoRotate: false,
},
},
slider: {
start: 0,
end: 0.5,
},
})
column.render()
},
},
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.right1_bg { .wrap {
width: 211px; display: flex;
height: 132px; flex-direction: column;
background-size: cover; height: 100%;
text-align: center; width: 100%;
padding: 10px 0 10px 0; .box {
margin: 20px auto 0 auto; padding: 0 0 5px 15px;
display: flex;
align-items: center;
.num {
font-size: 24px;
font-weight: 600;
margin: 0 10px;
}
}
}
font-size: 14px; .content1 {
.num { // height: 200px;
font-size: 30px; height: 100%;
font-family: Roboto-Black, Roboto;
font-weight: 900; .chart1 {
line-height: 35px; margin: 0 auto;
margin-right: 3px; // width: 192px;
vertical-align: middle; width: 100%;
height: 192px;
background: transparent;
}
.record {
display: flex;
align-items: center;
height: 192px;
padding-left: 30px;
> div {
flex: 1;
position: relative;
::before {
content: '';
display: inline-block;
width: 9px;
height: 9px;
background: #ffffff;
border-radius: 50%;
position: absolute;
left: -18px;
top: 18px;
}
}
} }
} }
.right1_bg1 {
background-image: url(./right1-1.png); .num {
.num { font-size: 30px;
color: #f6d97e; font-family: Roboto-BlackItalic, Roboto;
} font-weight: normal;
color: #91d5fe;
vertical-align: sub;
// margin-right: 3px;
} }
.right1_bg2 {
background-image: url(./right1-2.png); .content2 {
.num { padding: 20px;
color: #1098ff; flex: 1;
box-sizing: border-box;
display: flex;
flex-direction: column;
height: 100%;
.chart2 {
margin: 0 auto;
width: 100%;
height: 192px;
background: transparent;
}
.titWrap {
height: 30px;
}
.tabContent {
flex: 1;
}
.tabContent > div {
width: 100%;
height: 100%;
}
.tit {
font-size: 16px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #ffffff;
line-height: 22px;
position: relative;
padding-left: 15px;
}
.tit::after {
content: '';
display: block;
position: absolute;
top: 3px;
left: 0px;
width: 4px;
height: 16px;
background: #00ffff;
} }
} }
</style> </style>