安全管理-2
This commit is contained in:
熊丽君
Binary file not shown.
|
Before Width: | Height: | Size: 215 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 137 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 61 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 432 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1010 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 19 KiB After Width: | Height: | Size: 16 KiB |
@ -1,104 +1,100 @@
|
|||||||
|
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="container3">
|
<div class="container3">
|
||||||
<div class="tit">
|
<div class="tit">
|
||||||
<rocketTit>{{title}}</rocketTit>
|
<rocketTit>{{ title }}</rocketTit>
|
||||||
<!-- <div class="datePicker">
|
<!-- <div class="datePicker">
|
||||||
<slot name="datePicker"></slot>
|
<slot name="datePicker"></slot>
|
||||||
</div> -->
|
</div> -->
|
||||||
</div>
|
</div>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<div class="snap">
|
<div class="snap">
|
||||||
<slot name="snap"></slot>
|
<slot name="snap"></slot>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<slot />
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import rocketTit from "../../../components/rocketTit/index.vue";
|
import rocketTit from '../../../components/rocketTit/index.vue'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'container3',
|
name: 'container3',
|
||||||
components: {
|
components: {
|
||||||
rocketTit,
|
rocketTit,
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
title: {
|
title: {
|
||||||
type: String,
|
type: String,
|
||||||
default: '',
|
default: '',
|
||||||
},
|
},
|
||||||
selected: {
|
selected: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false,
|
default: false,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
data () {
|
data() {
|
||||||
return {
|
return {}
|
||||||
|
},
|
||||||
}
|
|
||||||
},
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.container3 {
|
.container3 {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
width: 673px;
|
width: 927px;
|
||||||
height: 359px;
|
height: 360px;
|
||||||
background-image: url(./bg.png);
|
background-image: url(./bg.png);
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-family: PingFangSC-Semibold, PingFang SC;
|
font-family: PingFangSC-Semibold, PingFang SC;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
|
||||||
.tit {
|
.tit {
|
||||||
padding: 16px 16px 16px 24px;
|
padding: 16px 16px 16px 24px;
|
||||||
position: relative;
|
position: relative;
|
||||||
.datePicker {
|
.datePicker {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 16px;
|
right: 16px;
|
||||||
top: 12px;
|
top: 12px;
|
||||||
|
|
||||||
::v-deep .el-date-editor {
|
::v-deep .el-date-editor {
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
box-shadow: none !important;
|
box-shadow: none !important;
|
||||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
.el-range-input,
|
.el-range-input,
|
||||||
.el-range-separator {
|
.el-range-separator {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
.el-range-editor.is-active {
|
.el-range-editor.is-active {
|
||||||
border-color: #fff !important;
|
border-color: #fff !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
input {
|
input {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
padding: 2px 2px 2px 22px;
|
padding: 2px 2px 2px 22px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
position: relative;
|
position: relative;
|
||||||
.snap {
|
.snap {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 20px;
|
top: 20px;
|
||||||
left: 25px;
|
left: 25px;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 14 KiB |
@ -1,145 +1,133 @@
|
|||||||
|
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="container4">
|
<div class="container4">
|
||||||
<div class="tit">
|
<div class="tit">
|
||||||
<div>{{title}}</div>
|
<div>{{ title }}</div>
|
||||||
<!-- <rocketTit>{{title}}</rocketTit> -->
|
<!-- <rocketTit>{{title}}</rocketTit> -->
|
||||||
<!-- <div class="datePicker">
|
<!-- <div class="datePicker">
|
||||||
<slot name="datePicker"></slot>
|
<slot name="datePicker"></slot>
|
||||||
</div> -->
|
</div> -->
|
||||||
</div>
|
</div>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<div class="snap">
|
<div class="snap">
|
||||||
<slot name="snap"></slot>
|
<slot name="snap"></slot>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<slot />
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import rocketTit from "../../../components/rocketTit/index.vue";
|
import rocketTit from '../../../components/rocketTit/index.vue'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'container4',
|
name: 'container4',
|
||||||
components: {
|
components: {
|
||||||
rocketTit,
|
rocketTit,
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
title: {
|
title: {
|
||||||
type: String,
|
type: String,
|
||||||
default: '',
|
default: '',
|
||||||
},
|
},
|
||||||
selected: {
|
selected: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false,
|
default: false,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
data () {
|
data() {
|
||||||
return {
|
return {}
|
||||||
|
},
|
||||||
}
|
|
||||||
},
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.container4 {
|
.container4 {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
width: 501px;
|
width: 536px;
|
||||||
height: 359px;
|
height: 360px;
|
||||||
background-image: url(./bg.png);
|
background-image: url(./bg.png);
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-family: PingFangSC-Semibold, PingFang SC;
|
font-family: PingFangSC-Semibold, PingFang SC;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
|
||||||
.tit {
|
.tit {
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: 16px 16px 16px 24px;
|
padding: 16px 16px 16px 24px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
position: relative;
|
position: relative;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
|
||||||
::before {
|
::before {
|
||||||
content: "";
|
content: '';
|
||||||
display: block;
|
display: block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
||||||
left: -75px;
|
left: -75px;
|
||||||
top: 25px;
|
top: 25px;
|
||||||
width: 82px;
|
width: 82px;
|
||||||
height: 3px;
|
height: 3px;
|
||||||
background: linear-gradient(
|
background: linear-gradient(90deg, rgba(145, 213, 254, 0) 0%, #91d5fe 100%);
|
||||||
90deg,
|
border-radius: 2px;
|
||||||
rgba(145, 213, 254, 0) 0%,
|
}
|
||||||
#91d5fe 100%
|
::after {
|
||||||
);
|
content: '';
|
||||||
border-radius: 2px;
|
display: block;
|
||||||
}
|
position: absolute;
|
||||||
::after {
|
|
||||||
content: "";
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
|
|
||||||
right: -75px;
|
right: -75px;
|
||||||
top: 25px;
|
top: 25px;
|
||||||
width: 82px;
|
width: 82px;
|
||||||
height: 3px;
|
height: 3px;
|
||||||
background: linear-gradient(
|
background: linear-gradient(90deg, #91d5fe 0%, rgba(145, 213, 254, 0) 100%);
|
||||||
90deg,
|
border-radius: 2px;
|
||||||
#91d5fe 0%,
|
}
|
||||||
rgba(145, 213, 254, 0) 100%
|
|
||||||
);
|
|
||||||
border-radius: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.datePicker {
|
.datePicker {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 16px;
|
right: 16px;
|
||||||
top: 12px;
|
top: 12px;
|
||||||
|
|
||||||
::v-deep .el-date-editor {
|
::v-deep .el-date-editor {
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
box-shadow: none !important;
|
box-shadow: none !important;
|
||||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
.el-range-input,
|
.el-range-input,
|
||||||
.el-range-separator {
|
.el-range-separator {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
.el-range-editor.is-active {
|
.el-range-editor.is-active {
|
||||||
border-color: #fff !important;
|
border-color: #fff !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
input {
|
input {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
padding: 2px;
|
padding: 2px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
position: relative;
|
position: relative;
|
||||||
.snap {
|
.snap {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 20px;
|
top: 20px;
|
||||||
left: 25px;
|
left: 25px;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
BIN
src/views/bigScreen/securityManage/components/container5/bg.png
Normal file
BIN
src/views/bigScreen/securityManage/components/container5/bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
@ -0,0 +1,101 @@
|
|||||||
|
<template>
|
||||||
|
<div class="container5">
|
||||||
|
<div class="tit">
|
||||||
|
<rocketTit>{{ title }}</rocketTit>
|
||||||
|
<!-- <div class="datePicker">
|
||||||
|
<slot name="datePicker"></slot>
|
||||||
|
</div> -->
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<div class="snap">
|
||||||
|
<slot name="snap"></slot>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import rocketTit from '../../../components/rocketTit/index.vue'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'container5',
|
||||||
|
components: {
|
||||||
|
rocketTit,
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
selected: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.container5 {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 381px;
|
||||||
|
height: 360px;
|
||||||
|
background-image: url(./bg.png);
|
||||||
|
background-size: cover;
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 16px;
|
||||||
|
font-family: PingFangSC-Semibold, PingFang SC;
|
||||||
|
font-weight: 600;
|
||||||
|
|
||||||
|
.tit {
|
||||||
|
position: relative;
|
||||||
|
padding: 16px 16px 16px 24px;
|
||||||
|
|
||||||
|
.datePicker {
|
||||||
|
position: absolute;
|
||||||
|
right: 16px;
|
||||||
|
top: 12px;
|
||||||
|
|
||||||
|
::v-deep .el-date-editor {
|
||||||
|
border-radius: 0;
|
||||||
|
box-shadow: none !important;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||||
|
vertical-align: middle;
|
||||||
|
color: #fff;
|
||||||
|
background-color: transparent;
|
||||||
|
.el-range-input,
|
||||||
|
.el-range-separator {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.el-range-editor.is-active {
|
||||||
|
border-color: #fff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
flex: 1;
|
||||||
|
padding: 2px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
.snap {
|
||||||
|
position: absolute;
|
||||||
|
top: 20px;
|
||||||
|
left: 25px;
|
||||||
|
font-weight: 300;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -91,7 +91,7 @@ export default {
|
|||||||
.center2 {
|
.center2 {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 605px;
|
top: 605px;
|
||||||
left: 710px;
|
left: 968px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.right1 {
|
.right1 {
|
||||||
|
|||||||
@ -1,252 +1,248 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<container3 title="利润概况">
|
<container3 title="安全隐患整改情况">
|
||||||
<el-date-picker slot="datePicker" v-model="dateRange" size="small" style="width: 240px" value-format="yyyy-MM-dd" type="daterange"
|
<div class="wrap">
|
||||||
range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
|
<el-row class="content1" style="height: 100%">
|
||||||
<div style="height:100%;width:100%;" ref="chart"></div>
|
<el-col :span="18" style="height: 100%">
|
||||||
</container3>
|
<div style="height: 100%; width: 100%" ref="chart"></div>
|
||||||
</div>
|
</el-col>
|
||||||
|
<el-col :span="6">
|
||||||
|
<!-- <div style="height: 100%; width: 100%" ref="chart"></div> -->
|
||||||
|
12
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
</container3>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import scalseBox from '../components/scaleBox.vue'
|
import scalseBox from '../components/scaleBox.vue'
|
||||||
import bigScreenHead from "../components/bigScreenHead/index.vue";
|
import bigScreenHead from '../components/bigScreenHead/index.vue'
|
||||||
import rocketTit from "../components/rocketTit/index.vue";
|
import rocketTit from '../components/rocketTit/index.vue'
|
||||||
import container3 from "./components/container3/index.vue";
|
import container3 from './components/container3/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: 'left2',
|
name: 'left2',
|
||||||
components: {
|
components: {
|
||||||
scalseBox,
|
scalseBox,
|
||||||
bigScreenHead,
|
bigScreenHead,
|
||||||
rocketTit,
|
rocketTit,
|
||||||
container3,
|
container3,
|
||||||
},
|
},
|
||||||
data () {
|
data() {
|
||||||
return {
|
return {
|
||||||
dateRange: [],
|
dateRange: [],
|
||||||
chart: null,
|
chart: null,
|
||||||
option: {
|
option: {
|
||||||
legend: {
|
legend: {
|
||||||
data: ['利润', '利润预测', '利润目标完成率'],
|
data: ['利润', '利润预测', '利润目标完成率'],
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: '#fff'
|
color: '#fff',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
grid: {
|
grid: {
|
||||||
left: '3%',
|
left: '3%',
|
||||||
right: '6%',
|
right: '6%',
|
||||||
bottom: '3%',
|
bottom: '3%',
|
||||||
containLabel: true
|
containLabel: true,
|
||||||
},
|
},
|
||||||
xAxis: [
|
xAxis: [
|
||||||
{
|
{
|
||||||
type: 'category',
|
type: 'category',
|
||||||
data: [
|
data: [
|
||||||
'2021-01',
|
'2021-01',
|
||||||
'2021-02',
|
'2021-02',
|
||||||
'2021-03',
|
'2021-03',
|
||||||
'2021-04',
|
'2021-04',
|
||||||
'2021-05',
|
'2021-05',
|
||||||
'2021-06',
|
'2021-06',
|
||||||
'2021-07',
|
'2021-07',
|
||||||
'2021-08',
|
'2021-08',
|
||||||
'2021-09',
|
'2021-09',
|
||||||
'2021-10',
|
'2021-10',
|
||||||
'2021-11',
|
'2021-11',
|
||||||
'2021-12',
|
'2021-12',
|
||||||
],
|
],
|
||||||
axisPointer: {
|
axisPointer: {
|
||||||
type: 'shadow'
|
type: 'shadow',
|
||||||
},
|
},
|
||||||
axisLine: {
|
axisLine: {
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
color: 'rgb(255, 255, 255)'
|
color: 'rgb(255, 255, 255)',
|
||||||
},
|
},
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
],
|
],
|
||||||
yAxis: [
|
yAxis: [
|
||||||
{
|
{
|
||||||
type: 'value',
|
type: 'value',
|
||||||
name: '万元',
|
name: '万元',
|
||||||
min: 0,
|
min: 0,
|
||||||
max: 250,
|
max: 250,
|
||||||
interval: 50,
|
interval: 50,
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
formatter: '{value}'
|
formatter: '{value}',
|
||||||
},
|
},
|
||||||
splitLine: {
|
splitLine: {
|
||||||
show: false//不显示网格线
|
show: false, //不显示网格线
|
||||||
},
|
},
|
||||||
splitArea: {
|
splitArea: {
|
||||||
show: false//不显示网格区域
|
show: false, //不显示网格区域
|
||||||
},
|
},
|
||||||
axisLine: {
|
axisLine: {
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
color: 'rgb(255, 255, 255)'
|
color: 'rgb(255, 255, 255)',
|
||||||
},
|
},
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'value',
|
type: 'value',
|
||||||
min: 0,
|
min: 0,
|
||||||
max: 25,
|
max: 25,
|
||||||
interval: 5,
|
interval: 5,
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
formatter: '{value} %'
|
formatter: '{value} %',
|
||||||
},
|
},
|
||||||
splitLine: {
|
splitLine: {
|
||||||
show: false//不显示网格线
|
show: false, //不显示网格线
|
||||||
},
|
},
|
||||||
splitArea: {
|
splitArea: {
|
||||||
show: false//不显示网格区域
|
show: false, //不显示网格区域
|
||||||
},
|
},
|
||||||
axisLine: {
|
axisLine: {
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
color: 'rgb(255, 255, 255)'
|
color: 'rgb(255, 255, 255)',
|
||||||
},
|
},
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
],
|
],
|
||||||
grid: {
|
grid: {
|
||||||
containLabel: true,
|
containLabel: true,
|
||||||
width: "99%",
|
width: '99%',
|
||||||
left: 0,
|
left: 0,
|
||||||
top: 50,
|
top: 50,
|
||||||
bottom: 50,
|
bottom: 50,
|
||||||
},
|
},
|
||||||
dataZoom: {},
|
dataZoom: {},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
name: '利润',
|
name: '利润',
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
barWidth: 20,
|
barWidth: 20,
|
||||||
data: [
|
data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
|
||||||
2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
|
itemStyle: {
|
||||||
],
|
color: 'rgb(118,196,166)',
|
||||||
itemStyle: {
|
},
|
||||||
color: 'rgb(118,196,166)'
|
barGap: '0',
|
||||||
},
|
},
|
||||||
barGap: '0'
|
{
|
||||||
},
|
name: '利润预测',
|
||||||
{
|
type: 'bar',
|
||||||
name: '利润预测',
|
barWidth: 20,
|
||||||
type: 'bar',
|
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
|
||||||
barWidth: 20,
|
itemStyle: {
|
||||||
data: [
|
color: {
|
||||||
2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
|
type: 'linear', // 线性渐变
|
||||||
],
|
x: 0,
|
||||||
itemStyle: {
|
y: 0,
|
||||||
color: {
|
x2: 0,
|
||||||
type: 'linear', // 线性渐变
|
y2: 1,
|
||||||
x: 0,
|
colorStops: [
|
||||||
y: 0,
|
{
|
||||||
x2: 0,
|
offset: 0,
|
||||||
y2: 1,
|
color: '#B5D3FE', // 0%处的颜色为红色
|
||||||
colorStops: [{
|
},
|
||||||
offset: 0,
|
{
|
||||||
color: '#B5D3FE' // 0%处的颜色为红色
|
offset: 1,
|
||||||
}, {
|
color: '#7EA7FC', // 100%处的颜色为蓝
|
||||||
offset: 1,
|
},
|
||||||
color: '#7EA7FC' // 100%处的颜色为蓝
|
],
|
||||||
}]
|
},
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
},
|
{
|
||||||
{
|
name: '利润目标完成率',
|
||||||
name: '利润目标完成率',
|
type: 'line',
|
||||||
type: 'line',
|
yAxisIndex: 1,
|
||||||
yAxisIndex: 1,
|
smooth: false,
|
||||||
smooth: false,
|
data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
|
||||||
data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
|
itemStyle: {
|
||||||
itemStyle: {
|
color: '#55C5A2',
|
||||||
color: '#55C5A2'
|
},
|
||||||
},
|
symbol: 'none',
|
||||||
symbol: 'none'
|
},
|
||||||
}
|
],
|
||||||
],
|
// yAxis: {
|
||||||
// yAxis: {
|
// type: 'value',
|
||||||
// type: 'value',
|
// splitLine: {
|
||||||
// splitLine: {
|
// show: false//不显示网格线
|
||||||
// show: false//不显示网格线
|
// },
|
||||||
// },
|
// splitArea: {
|
||||||
// splitArea: {
|
// show: false//不显示网格区域
|
||||||
// show: false//不显示网格区域
|
// },
|
||||||
// },
|
// axisLine: {
|
||||||
// axisLine: {
|
// lineStyle: {
|
||||||
// lineStyle: {
|
// color: 'rgb(255, 255, 255)'
|
||||||
// color: 'rgb(255, 255, 255)'
|
// },
|
||||||
// },
|
// }
|
||||||
// }
|
// },
|
||||||
// },
|
// series: [
|
||||||
// series: [
|
// {
|
||||||
// {
|
// name: '利润',
|
||||||
// name: '利润',
|
// type: 'bar',
|
||||||
// type: 'bar',
|
// data: [
|
||||||
// data: [
|
// 2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
|
||||||
// 2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
|
// ]
|
||||||
// ]
|
// },
|
||||||
// },
|
// {
|
||||||
// {
|
// name: '利润预测',
|
||||||
// name: '利润预测',
|
// type: 'bar',
|
||||||
// type: 'bar',
|
// data: [
|
||||||
// data: [
|
// 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
|
||||||
// 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
|
// ]
|
||||||
// ]
|
// },
|
||||||
// },
|
// {
|
||||||
// {
|
// name: '利润目标完成率',
|
||||||
// name: '利润目标完成率',
|
// type: 'line',
|
||||||
// type: 'line',
|
// yAxisIndex: 1,
|
||||||
// yAxisIndex: 1,
|
// data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
|
||||||
// data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
|
// }
|
||||||
// }
|
|
||||||
|
|
||||||
// ]
|
// ]
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted () {
|
mounted() {
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.initChart()
|
this.initChart()
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
beforeDestroy () {
|
beforeDestroy() {
|
||||||
if (!this.chart) {
|
if (!this.chart) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
this.chart.dispose()
|
this.chart.dispose()
|
||||||
this.chart = null
|
this.chart = null
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
initChart () {
|
initChart() {
|
||||||
this.chart = echarts.init(this.$refs.chart);
|
this.chart = echarts.init(this.$refs.chart)
|
||||||
this.chart.setOption(this.option);
|
this.chart.setOption(this.option)
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.num {
|
.wrap {
|
||||||
font-size: 30px;
|
display: flex;
|
||||||
font-family: Roboto-Black, Roboto;
|
flex-direction: column;
|
||||||
font-weight: 900;
|
height: 100%;
|
||||||
color: #f6d97e;
|
width: 100%;
|
||||||
line-height: 35px;
|
|
||||||
// margin-right: 3px;
|
|
||||||
}
|
}
|
||||||
.num2 {
|
</style>
|
||||||
font-size: 30px;
|
|
||||||
font-family: Roboto-Black, Roboto;
|
|
||||||
font-weight: 900;
|
|
||||||
color: rgba(16, 152, 255, 1);
|
|
||||||
line-height: 35px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB |
BIN
src/views/bigScreen/securityManage/right2-1.png
Normal file
BIN
src/views/bigScreen/securityManage/right2-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.7 KiB |
BIN
src/views/bigScreen/securityManage/right2-2.png
Normal file
BIN
src/views/bigScreen/securityManage/right2-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.6 KiB |
@ -1,253 +1,282 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<container3 title="装药量概况">
|
<container5 title="危险作业厂所压减情况">
|
||||||
<el-date-picker slot="datePicker" v-model="dateRange" size="small" style="width: 240px" value-format="yyyy-MM-dd" type="daterange"
|
<el-row style="height: 80%; display: flex; align-items: center">
|
||||||
range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
|
<el-col :span="12">
|
||||||
<div style="height:100%;width:100%;" ref="chart"></div>
|
<div class="right1_bg right1_bg1">
|
||||||
</container3>
|
<div><span class="num">4 / 6</span></div>
|
||||||
</div>
|
<div style="font-size: 14px">现有/原有</div>
|
||||||
|
<div class="txt">三人以上危险作业场所</div>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<div class="right1_bg right1_bg2">
|
||||||
|
<div><span class="num">2 / 7</span></div>
|
||||||
|
<div style="font-size: 14px">现有/原有</div>
|
||||||
|
<div class="txt">十人以上危险作业场所</div>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</container5>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import scalseBox from '../components/scaleBox.vue'
|
import scalseBox from '../components/scaleBox.vue'
|
||||||
import bigScreenHead from "../components/bigScreenHead/index.vue";
|
import bigScreenHead from '../components/bigScreenHead/index.vue'
|
||||||
import rocketTit from "../components/rocketTit/index.vue";
|
import rocketTit from '../components/rocketTit/index.vue'
|
||||||
import container3 from "./components/container3/index.vue";
|
import container5 from './components/container5/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: 'right2',
|
name: 'right2',
|
||||||
components: {
|
components: {
|
||||||
scalseBox,
|
scalseBox,
|
||||||
bigScreenHead,
|
bigScreenHead,
|
||||||
rocketTit,
|
rocketTit,
|
||||||
container3,
|
container5,
|
||||||
},
|
},
|
||||||
data () {
|
data() {
|
||||||
return {
|
return {
|
||||||
dateRange: [],
|
dateRange: [],
|
||||||
chart: null,
|
chart: null,
|
||||||
option: {
|
option: {
|
||||||
legend: {
|
legend: {
|
||||||
data: ['利润', '利润预测', '利润目标完成率'],
|
data: ['利润', '利润预测', '利润目标完成率'],
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: '#fff'
|
color: '#fff',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
grid: {
|
grid: {
|
||||||
left: '3%',
|
left: '3%',
|
||||||
right: '6%',
|
right: '6%',
|
||||||
bottom: '3%',
|
bottom: '3%',
|
||||||
containLabel: true
|
containLabel: true,
|
||||||
},
|
},
|
||||||
xAxis: [
|
xAxis: [
|
||||||
{
|
{
|
||||||
type: 'category',
|
type: 'category',
|
||||||
data: [
|
data: [
|
||||||
'2021-01',
|
'2021-01',
|
||||||
'2021-02',
|
'2021-02',
|
||||||
'2021-03',
|
'2021-03',
|
||||||
'2021-04',
|
'2021-04',
|
||||||
'2021-05',
|
'2021-05',
|
||||||
'2021-06',
|
'2021-06',
|
||||||
'2021-07',
|
'2021-07',
|
||||||
'2021-08',
|
'2021-08',
|
||||||
'2021-09',
|
'2021-09',
|
||||||
'2021-10',
|
'2021-10',
|
||||||
'2021-11',
|
'2021-11',
|
||||||
'2021-12',
|
'2021-12',
|
||||||
],
|
],
|
||||||
axisPointer: {
|
axisPointer: {
|
||||||
type: 'shadow'
|
type: 'shadow',
|
||||||
},
|
},
|
||||||
axisLine: {
|
axisLine: {
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
color: 'rgb(255, 255, 255)'
|
color: 'rgb(255, 255, 255)',
|
||||||
},
|
},
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
],
|
],
|
||||||
yAxis: [
|
yAxis: [
|
||||||
{
|
{
|
||||||
type: 'value',
|
type: 'value',
|
||||||
name: '万元',
|
name: '万元',
|
||||||
min: 0,
|
min: 0,
|
||||||
max: 250,
|
max: 250,
|
||||||
interval: 50,
|
interval: 50,
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
formatter: '{value}'
|
formatter: '{value}',
|
||||||
},
|
},
|
||||||
splitLine: {
|
splitLine: {
|
||||||
show: false//不显示网格线
|
show: false, //不显示网格线
|
||||||
},
|
},
|
||||||
splitArea: {
|
splitArea: {
|
||||||
show: false//不显示网格区域
|
show: false, //不显示网格区域
|
||||||
},
|
},
|
||||||
axisLine: {
|
axisLine: {
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
color: 'rgb(255, 255, 255)'
|
color: 'rgb(255, 255, 255)',
|
||||||
},
|
},
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'value',
|
type: 'value',
|
||||||
min: 0,
|
min: 0,
|
||||||
max: 25,
|
max: 25,
|
||||||
interval: 5,
|
interval: 5,
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
formatter: '{value} %'
|
formatter: '{value} %',
|
||||||
},
|
},
|
||||||
splitLine: {
|
splitLine: {
|
||||||
show: false//不显示网格线
|
show: false, //不显示网格线
|
||||||
},
|
},
|
||||||
splitArea: {
|
splitArea: {
|
||||||
show: false//不显示网格区域
|
show: false, //不显示网格区域
|
||||||
},
|
},
|
||||||
axisLine: {
|
axisLine: {
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
color: 'rgb(255, 255, 255)'
|
color: 'rgb(255, 255, 255)',
|
||||||
},
|
},
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
],
|
],
|
||||||
grid: {
|
grid: {
|
||||||
containLabel: true,
|
containLabel: true,
|
||||||
width: "99%",
|
width: '99%',
|
||||||
left: 0,
|
left: 0,
|
||||||
top: 50,
|
top: 50,
|
||||||
bottom: 50,
|
bottom: 50,
|
||||||
},
|
},
|
||||||
dataZoom: {},
|
dataZoom: {},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
name: '利润',
|
name: '利润',
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
barWidth: 20,
|
barWidth: 20,
|
||||||
data: [
|
data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
|
||||||
2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
|
itemStyle: {
|
||||||
],
|
color: 'rgb(118,196,166)',
|
||||||
itemStyle: {
|
},
|
||||||
color: 'rgb(118,196,166)'
|
},
|
||||||
}
|
{
|
||||||
},
|
name: '利润预测',
|
||||||
{
|
type: 'bar',
|
||||||
name: '利润预测',
|
barWidth: 20,
|
||||||
type: 'bar',
|
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
|
||||||
barWidth: 20,
|
itemStyle: {
|
||||||
data: [
|
color: {
|
||||||
2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
|
type: 'linear', // 线性渐变
|
||||||
],
|
x: 0,
|
||||||
itemStyle: {
|
y: 0,
|
||||||
color: {
|
x2: 0,
|
||||||
type: 'linear', // 线性渐变
|
y2: 1,
|
||||||
x: 0,
|
colorStops: [
|
||||||
y: 0,
|
{
|
||||||
x2: 0,
|
offset: 0,
|
||||||
y2: 1,
|
color: '#B5D3FE', // 0%处的颜色为红色
|
||||||
colorStops: [{
|
},
|
||||||
offset: 0,
|
{
|
||||||
color: '#B5D3FE' // 0%处的颜色为红色
|
offset: 1,
|
||||||
}, {
|
color: '#7EA7FC', // 100%处的颜色为蓝
|
||||||
offset: 1,
|
},
|
||||||
color: '#7EA7FC' // 100%处的颜色为蓝
|
],
|
||||||
}]
|
},
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
},
|
{
|
||||||
{
|
name: '利润目标完成率',
|
||||||
name: '利润目标完成率',
|
type: 'line',
|
||||||
type: 'line',
|
yAxisIndex: 1,
|
||||||
yAxisIndex: 1,
|
smooth: false,
|
||||||
smooth: false,
|
data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
|
||||||
data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
|
itemStyle: {
|
||||||
itemStyle: {
|
normal: {
|
||||||
normal: {
|
color: '#F6D97E',
|
||||||
color: '#F6D97E'
|
},
|
||||||
}
|
},
|
||||||
},
|
symbol: 'none',
|
||||||
symbol: 'none'
|
},
|
||||||
}
|
],
|
||||||
],
|
// yAxis: {
|
||||||
// yAxis: {
|
// type: 'value',
|
||||||
// type: 'value',
|
// splitLine: {
|
||||||
// splitLine: {
|
// show: false//不显示网格线
|
||||||
// show: false//不显示网格线
|
// },
|
||||||
// },
|
// splitArea: {
|
||||||
// splitArea: {
|
// show: false//不显示网格区域
|
||||||
// show: false//不显示网格区域
|
// },
|
||||||
// },
|
// axisLine: {
|
||||||
// axisLine: {
|
// lineStyle: {
|
||||||
// lineStyle: {
|
// color: 'rgb(255, 255, 255)'
|
||||||
// color: 'rgb(255, 255, 255)'
|
// },
|
||||||
// },
|
// }
|
||||||
// }
|
// },
|
||||||
// },
|
// series: [
|
||||||
// series: [
|
// {
|
||||||
// {
|
// name: '利润',
|
||||||
// name: '利润',
|
// type: 'bar',
|
||||||
// type: 'bar',
|
// data: [
|
||||||
// data: [
|
// 2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
|
||||||
// 2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
|
// ]
|
||||||
// ]
|
// },
|
||||||
// },
|
// {
|
||||||
// {
|
// name: '利润预测',
|
||||||
// name: '利润预测',
|
// type: 'bar',
|
||||||
// type: 'bar',
|
// data: [
|
||||||
// data: [
|
// 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
|
||||||
// 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
|
// ]
|
||||||
// ]
|
// },
|
||||||
// },
|
// {
|
||||||
// {
|
// name: '利润目标完成率',
|
||||||
// name: '利润目标完成率',
|
// type: 'line',
|
||||||
// type: 'line',
|
// yAxisIndex: 1,
|
||||||
// yAxisIndex: 1,
|
// data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
|
||||||
// data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
|
// }
|
||||||
// }
|
|
||||||
|
|
||||||
// ]
|
// ]
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted () {
|
mounted() {
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.initChart()
|
// this.initChart()
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
beforeDestroy () {
|
beforeDestroy() {
|
||||||
if (!this.chart) {
|
if (!this.chart) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
this.chart.dispose()
|
this.chart.dispose()
|
||||||
this.chart = null
|
this.chart = null
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
initChart () {
|
initChart() {
|
||||||
this.chart = echarts.init(this.$refs.chart);
|
this.chart = echarts.init(this.$refs.chart)
|
||||||
this.chart.setOption(this.option);
|
this.chart.setOption(this.option)
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.num {
|
.right1_bg {
|
||||||
font-size: 30px;
|
position: relative;
|
||||||
font-family: Roboto-Black, Roboto;
|
width: 147px;
|
||||||
font-weight: 900;
|
height: 113px;
|
||||||
color: #f6d97e;
|
background-size: cover;
|
||||||
line-height: 35px;
|
text-align: center;
|
||||||
// margin-right: 3px;
|
padding: 0 0 10px 0;
|
||||||
|
margin: 20px auto 0 auto;
|
||||||
|
font-size: 14px;
|
||||||
|
.num {
|
||||||
|
font-size: 35px;
|
||||||
|
font-family: Roboto-Black, Roboto;
|
||||||
|
font-weight: 900;
|
||||||
|
line-height: 35px;
|
||||||
|
margin-right: 3px;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
.txt {
|
||||||
|
position: absolute;
|
||||||
|
bottom: -30px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.num2 {
|
.right1_bg1 {
|
||||||
font-size: 30px;
|
background-image: url(./right2-1.png);
|
||||||
font-family: Roboto-Black, Roboto;
|
.num {
|
||||||
font-weight: 900;
|
color: #1098ff;
|
||||||
color: rgba(16, 152, 255, 1);
|
}
|
||||||
line-height: 35px;
|
|
||||||
}
|
}
|
||||||
</style>
|
.right1_bg2 {
|
||||||
|
background-image: url(./right2-2.png);
|
||||||
|
.num {
|
||||||
|
color: #f6d97e;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user