feat：完善功能
This commit is contained in:
zjc
@@ -1,5 +1,4 @@
|
||||
import axios from 'axios'
|
||||
import qs from 'qs'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
|
||||
BIN
src/assets/images/arrow-down-1.png
Normal file
BIN
src/assets/images/arrow-down-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 474 B |
@@ -49,8 +49,7 @@
|
||||
<style lang="scss" scoped>
|
||||
.box-4-content {
|
||||
position: relative;
|
||||
margin-top: vh(10);
|
||||
margin-left: vw(10);
|
||||
margin: vh(10);
|
||||
width: vw(300);
|
||||
height: vh(1060);
|
||||
background-image: url('@/assets/images/bg-1.png');
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<li
|
||||
class="nav-left-item"
|
||||
:style="{
|
||||
backgroundImage: `url(${current == index && !isSkip ? title2Select : title2})`
|
||||
backgroundImage: `url(${current === index && !isSkip ? title2Select : title2})`
|
||||
}"
|
||||
v-for="(item, index) in navLeft"
|
||||
:key="index"
|
||||
@@ -12,6 +12,24 @@
|
||||
>
|
||||
{{ item.name }}
|
||||
</li>
|
||||
<el-dropdown v-if="navLeft.length > 3" trigger="click" @command="handleCommand">
|
||||
<li
|
||||
class="nav-left-item"
|
||||
:style="{
|
||||
backgroundImage: `url(${title2})`
|
||||
}"
|
||||
>
|
||||
{{ otherScenic || '其他景区' }}
|
||||
<img class="icon" src="@/assets/images/arrow-down-1.png" />
|
||||
</li>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item v-for="(item, index) in navLeft" :key="index" :command="item">
|
||||
<span class="label"> {{ item.name }}</span>
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</ul>
|
||||
<div class="title">
|
||||
<span>{{ title }}</span>
|
||||
@@ -44,8 +62,8 @@
|
||||
import { useRouter } from 'vue-router'
|
||||
import title2 from '@/assets/images/title-2.png'
|
||||
import title2Select from '@/assets/images/title-2-select.png'
|
||||
|
||||
import { getWeatherApi } from '@/api/home'
|
||||
import { getSpotApi } from '@/api/sentiment'
|
||||
|
||||
const emit = defineEmits(['change'])
|
||||
|
||||
@@ -59,6 +77,7 @@
|
||||
let isSkip = ref(true)
|
||||
let isBack = ref(false)
|
||||
let current = ref(0)
|
||||
let otherScenic = ref('')
|
||||
|
||||
// 补零
|
||||
const fillZero = (value) => {
|
||||
@@ -79,31 +98,37 @@
|
||||
minute
|
||||
)}:${fillZero(second)}`
|
||||
}
|
||||
|
||||
const handleCommand = (e) => {
|
||||
console.log(e, '=========')
|
||||
title.value = e.name
|
||||
otherScenic.value = e.name
|
||||
current.value = ''
|
||||
}
|
||||
// 返回上一页
|
||||
const handleBack = () => {
|
||||
router.go(-1)
|
||||
}
|
||||
|
||||
// 点击导航
|
||||
const handleNav = (item, index) => {
|
||||
if (isSkip.value) {
|
||||
router.push(item.path)
|
||||
} else {
|
||||
emit('on-change', index)
|
||||
if (current.value === index) return
|
||||
otherScenic.value = ''
|
||||
current.value = index
|
||||
title.value = item.name
|
||||
}
|
||||
}
|
||||
|
||||
// 获取天气数据
|
||||
const getWeather = async () => {
|
||||
let res = await getWeatherApi()
|
||||
weatherData.value = res.data
|
||||
}
|
||||
|
||||
// 设置当前路由导航栏
|
||||
const setNav = () => {
|
||||
const setNav = async () => {
|
||||
switch (router.currentRoute.value.path) {
|
||||
case '/home':
|
||||
isSkip.value = true
|
||||
title.value = '奉节县旅游指挥调度中心'
|
||||
navLeft.value = [
|
||||
{ name: '安全', path: '/monitor' },
|
||||
@@ -118,10 +143,17 @@
|
||||
]
|
||||
break
|
||||
case '/scenic':
|
||||
title.value = '景区'
|
||||
navLeft.value = []
|
||||
navRight.value = []
|
||||
isSkip.value = false
|
||||
isBack.value = true
|
||||
let res = await getSpotApi()
|
||||
navLeft.value = res.data.map((item) => {
|
||||
return {
|
||||
name: item.ssname,
|
||||
id: item.id
|
||||
}
|
||||
})
|
||||
title.value = navLeft.value[current.value].name
|
||||
navRight.value = []
|
||||
break
|
||||
case '/sentiment':
|
||||
title.value = '舆情检测'
|
||||
@@ -249,6 +281,7 @@
|
||||
font-size: vw(48);
|
||||
font-weight: 800;
|
||||
color: transparent;
|
||||
letter-spacing: vw(10);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
@@ -271,6 +304,10 @@
|
||||
text-align: center;
|
||||
color: rgba(208, 236, 255, 0.9);
|
||||
background-size: 100% 100%;
|
||||
.icon {
|
||||
width: vw(18);
|
||||
height: vw(18);
|
||||
}
|
||||
}
|
||||
}
|
||||
.nav-right {
|
||||
|
||||
@@ -97,7 +97,7 @@
|
||||
<countup class="value" :end-val="500" />
|
||||
</div>
|
||||
<div>
|
||||
<div class="label">车库总数</div>
|
||||
<div class="label">总车位数</div>
|
||||
<countup class="value" :end-val="500" />
|
||||
</div>
|
||||
<div>
|
||||
|
||||
@@ -344,7 +344,7 @@
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
right: vw(20);
|
||||
bottom: vh(20);
|
||||
bottom: vw(20);
|
||||
width: vw(50);
|
||||
z-index: 999;
|
||||
}
|
||||
@@ -375,7 +375,7 @@
|
||||
}
|
||||
.icon {
|
||||
width: vw(26);
|
||||
height: vh(28);
|
||||
height: vw(28);
|
||||
margin-right: vw(4);
|
||||
}
|
||||
.text {
|
||||
|
||||
@@ -2,28 +2,28 @@
|
||||
<div class="traffic-box-1">
|
||||
<div class="title-num">
|
||||
<div class="item-box">
|
||||
<div class="item-t flex">
|
||||
<img src="@/assets/images/t-icon-1.png" alt="">总路段
|
||||
<div class="item-t flex"> <img src="@/assets/images/t-icon-1.png" alt="" />总路段 </div>
|
||||
<div class="item-num"
|
||||
><span><countup endVal="88895" /> </span>
|
||||
</div>
|
||||
<div class="item-num"><span><countup endVal="88895" /></span> </div>
|
||||
</div>
|
||||
<div class="item-box">
|
||||
<div class="item-t flex">
|
||||
<img src="@/assets/images/t-icon-1.png" alt="">总路段
|
||||
<div class="item-t flex"> <img src="@/assets/images/t-icon-1.png" alt="" />总路段 </div>
|
||||
<div class="item-num"
|
||||
><span><countup endVal="88895" /> </span>
|
||||
</div>
|
||||
<div class="item-num"><span><countup endVal="88895" /></span></div>
|
||||
</div>
|
||||
<div class="item-box">
|
||||
<div class="item-t flex">
|
||||
<img src="@/assets/images/t-icon-1.png" alt="">总路段
|
||||
<div class="item-t flex"> <img src="@/assets/images/t-icon-1.png" alt="" />总路段 </div>
|
||||
<div class="item-num"
|
||||
><span><countup endVal="88895" /></span>
|
||||
</div>
|
||||
<div class="item-num"><span><countup endVal="88895" /></span></div>
|
||||
</div>
|
||||
<div class="item-box">
|
||||
<div class="item-t flex">
|
||||
<img src="@/assets/images/t-icon-1.png" alt="">总路段
|
||||
<div class="item-t flex"> <img src="@/assets/images/t-icon-1.png" alt="" />总路段 </div>
|
||||
<div class="item-num"
|
||||
><span><countup endVal="88895" /></span>
|
||||
</div>
|
||||
<div class="item-num"><span><countup endVal="88895" /></span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-item">
|
||||
@@ -33,7 +33,6 @@
|
||||
<v-chart class="chart" :option="option1" autoresize />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -43,12 +42,12 @@
|
||||
import * as echarts from 'echarts'
|
||||
import { fitChartSize } from '@/utils/dataUtil'
|
||||
import Map from '@/components/Map/marker.vue'
|
||||
import VChart, { THEME_KEY } from 'vue-echarts';
|
||||
import { ref, provide } from 'vue';
|
||||
import VChart, { THEME_KEY } from 'vue-echarts'
|
||||
import { ref, provide } from 'vue'
|
||||
|
||||
provide(THEME_KEY, 'dark');
|
||||
provide(THEME_KEY, 'dark')
|
||||
const option1 = ref({
|
||||
backgroundColor:'transparent',
|
||||
backgroundColor: 'transparent',
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
@@ -58,66 +57,65 @@
|
||||
right: fitChartSize(10),
|
||||
top: fitChartSize(70),
|
||||
bottom: fitChartSize(20),
|
||||
itemWidth:5,
|
||||
itemHeight:5,
|
||||
padding: [20,10,20,10],
|
||||
itemWidth: 5,
|
||||
itemHeight: 5,
|
||||
padding: [20, 10, 20, 10],
|
||||
// itemGap:15,
|
||||
show:true,
|
||||
lineStyle:{
|
||||
borderColor:'#fff',
|
||||
width:5,
|
||||
show: true,
|
||||
lineStyle: {
|
||||
borderColor: '#fff',
|
||||
width: 5
|
||||
},
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize:fitChartSize(16),
|
||||
fontSize: fitChartSize(16),
|
||||
lineHeight: 16,
|
||||
rich: {
|
||||
d: {
|
||||
width: '100%',
|
||||
borderWidth: 0.5,
|
||||
height:5,
|
||||
backgroundColor: '1',
|
||||
height: 5,
|
||||
backgroundColor: '1'
|
||||
},
|
||||
a: {
|
||||
width: fitChartSize(75),
|
||||
align: 'left',
|
||||
fontSize:fitChartSize(16),
|
||||
fontSize: fitChartSize(16)
|
||||
// backgroundColor:'1'
|
||||
// color:'1',
|
||||
// borderColor:'#eee',
|
||||
// borderWidth:2
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
formatter: (e) => {
|
||||
let ratio = 0
|
||||
let value = 0
|
||||
if (option1.value.series[0].data.length > 0) {
|
||||
option1.value.series[0].data.forEach(item => {
|
||||
option1.value.series[0].data.forEach((item) => {
|
||||
if (e == item.name) {
|
||||
ratio = (item.value*100/3799).toFixed(0)
|
||||
ratio = ((item.value * 100) / 3799).toFixed(0)
|
||||
value = item.value
|
||||
}
|
||||
});
|
||||
})
|
||||
}
|
||||
// return `${e} ${ratio}%
|
||||
let arr = ['{a|' + e + '}', '{b|' + ratio + '%}']
|
||||
return arr.join('')
|
||||
},
|
||||
itemStyle:{
|
||||
itemStyle: {
|
||||
// color:'#fff'
|
||||
|
||||
},
|
||||
backgroundColor:'rgba(0,77,136,0.6)'
|
||||
backgroundColor: 'rgba(0,77,136,0.6)'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Access From',
|
||||
type: 'pie',
|
||||
left:fitChartSize(-50),
|
||||
top:fitChartSize(40),
|
||||
width:fitChartSize(350),
|
||||
height:fitChartSize(350),
|
||||
left: fitChartSize(-50),
|
||||
top: fitChartSize(40),
|
||||
width: fitChartSize(350),
|
||||
height: fitChartSize(350),
|
||||
// width:200,
|
||||
// height:200,
|
||||
radius: ['40%', '50%'],
|
||||
@@ -129,7 +127,7 @@
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center',
|
||||
fontWeight: 'bold',
|
||||
fontWeight: 'bold'
|
||||
// formatter: function (o) {
|
||||
// let data = o.data.value
|
||||
// return `{value|${data}}` + '\n' + `{name|整改率}`
|
||||
@@ -153,7 +151,7 @@
|
||||
show: true,
|
||||
fontSize: fitChartSize(16),
|
||||
fontWeight: 'bold',
|
||||
color:'#fff',
|
||||
color: '#fff',
|
||||
fontWeight: 'bold',
|
||||
formatter: function (o) {
|
||||
let data = o.data.value
|
||||
@@ -183,37 +181,35 @@
|
||||
{ value: 135, name: '异常状况4' },
|
||||
{ value: 100, name: '异常状况5' },
|
||||
{ value: 777, name: '异常状况6' },
|
||||
{ value: 888, name: '其他' },
|
||||
{ value: 888, name: '其他' }
|
||||
]
|
||||
|
||||
},
|
||||
],
|
||||
});
|
||||
}
|
||||
]
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.traffic-box-1{
|
||||
width:vw(815);
|
||||
height:vh(975);
|
||||
background: linear-gradient( 321deg, #0B2F64 0%, #062B57 100%);
|
||||
.traffic-box-1 {
|
||||
width: vw(815);
|
||||
height: vh(975);
|
||||
background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
|
||||
border-radius: 0px 0px 0px 0px;
|
||||
margin-top:vh(100);
|
||||
margin-top: vh(100);
|
||||
position: relative;
|
||||
z-index: 9;
|
||||
.list-item{
|
||||
.list-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
padding:0 vw(10);
|
||||
.item-li{
|
||||
padding: 0 vw(10);
|
||||
.item-li {
|
||||
width: vw(388);
|
||||
height: vh(420);
|
||||
background: radial-gradient( 70% at 99% 50%, #0A4190 0%, rgba(0,77,136,0.6) 100%);
|
||||
border-radius: 0px 0px 0px 0px;
|
||||
border: 1px solid;
|
||||
border-image: linear-gradient(180deg, rgba(0, 150, 255, 1), rgba(0, 90, 153, 0)) 1 1;
|
||||
.title-3{
|
||||
margin-left:vw(10);
|
||||
background-image: url('@/assets/images/bg-3.png');
|
||||
background-size: 100% 100%;
|
||||
|
||||
.title-3 {
|
||||
margin-left: vw(10);
|
||||
position: relative;
|
||||
width: vw(344);
|
||||
height: vh(12);
|
||||
@@ -234,51 +230,50 @@
|
||||
color: transparent; /* 兼容其他浏览器 */
|
||||
}
|
||||
}
|
||||
.chart-box{
|
||||
width:100%;
|
||||
height:vh(370);
|
||||
.chart-box {
|
||||
width: 100%;
|
||||
height: vh(370);
|
||||
}
|
||||
}
|
||||
}
|
||||
.title-num{
|
||||
.title-num {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
padding:vw(40);
|
||||
.item-box{
|
||||
padding: vw(40);
|
||||
.item-box {
|
||||
flex: 1;
|
||||
.item-t{
|
||||
.item-t {
|
||||
display: flex;
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
color: rgba(255,255,255,0.8);
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
margin-bottom:vh(20);
|
||||
img{
|
||||
margin-right:vw(5);
|
||||
width:vw(8);
|
||||
height:vh(8);
|
||||
margin-bottom: vh(20);
|
||||
img {
|
||||
margin-right: vw(5);
|
||||
width: vw(8);
|
||||
height: vh(8);
|
||||
}
|
||||
|
||||
}
|
||||
.item-num{
|
||||
width:vw(134);
|
||||
height:vh(30);
|
||||
.item-num {
|
||||
width: vw(134);
|
||||
height: vh(30);
|
||||
background-image: url('@/assets/images/t-box-title-bg-1.png');
|
||||
background-size: 100% 100%;
|
||||
font-weight: bold;
|
||||
font-size: vw(24);
|
||||
color: #02F9FA;
|
||||
color: #02f9fa;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
padding-left:vw(15);
|
||||
padding-left: vw(15);
|
||||
position: relative;
|
||||
left:vw(-8);
|
||||
span{
|
||||
left: vw(-8);
|
||||
span {
|
||||
position: relative;
|
||||
top:vh(-5);
|
||||
top: vh(-5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<!-- 1 -->
|
||||
<div class="work-2-flex">
|
||||
<div class="header">
|
||||
<div class="title"> <span>最新工单</span> </div>
|
||||
<div class="title"> <span>今日工单</span> </div>
|
||||
</div>
|
||||
<div class="hd-list">
|
||||
<img class="h-icon" src="@/assets/images/work-icon-1.png" alt="" />
|
||||
@@ -30,7 +30,6 @@
|
||||
<div class="check-label">
|
||||
<span class="active">全部</span>
|
||||
<span>已完成总数</span>
|
||||
|
||||
</div>
|
||||
<v-chart class="line-chart" :option="optionLine" autoresize />
|
||||
</div>
|
||||
@@ -43,25 +42,34 @@
|
||||
<div class="p-item">
|
||||
<span>普通</span>
|
||||
<div class="box-1">
|
||||
<el-progress :percentage="50"
|
||||
<el-progress
|
||||
:percentage="50"
|
||||
stroke-linecap="square"
|
||||
:stroke-width="fitChartSize(15)" color="#2380FB"></el-progress>
|
||||
:stroke-width="fitChartSize(15)"
|
||||
color="#2380FB"
|
||||
></el-progress>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-item">
|
||||
<span>普通</span>
|
||||
<div class="box-1">
|
||||
<el-progress :percentage="50"
|
||||
<el-progress
|
||||
:percentage="50"
|
||||
stroke-linecap="square"
|
||||
:stroke-width="fitChartSize(15)" color="#D9011B"></el-progress>
|
||||
:stroke-width="fitChartSize(15)"
|
||||
color="#D9011B"
|
||||
></el-progress>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-item">
|
||||
<span>普通</span>
|
||||
<div class="box-1">
|
||||
<el-progress :percentage="50"
|
||||
<el-progress
|
||||
:percentage="50"
|
||||
stroke-linecap="square"
|
||||
:stroke-width="fitChartSize(15)" color="#FEAE00"></el-progress>
|
||||
:stroke-width="fitChartSize(15)"
|
||||
color="#FEAE00"
|
||||
></el-progress>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -70,7 +78,7 @@
|
||||
</div>
|
||||
<div class="work-2-flex">
|
||||
<div class="header">
|
||||
<div class="title"> <span>最新工单</span> </div>
|
||||
<div class="title"> <span>不同景区工单占比</span> </div>
|
||||
</div>
|
||||
<div class="chart-box flex">
|
||||
<div class="lt-chart">
|
||||
@@ -109,13 +117,13 @@
|
||||
import * as echarts from 'echarts'
|
||||
import { fitChartSize } from '@/utils/dataUtil'
|
||||
import Map from '@/components/Map/marker.vue'
|
||||
import VChart, { THEME_KEY } from 'vue-echarts';
|
||||
import { ref, provide } from 'vue';
|
||||
import VChart, { THEME_KEY } from 'vue-echarts'
|
||||
import { ref, provide } from 'vue'
|
||||
|
||||
provide(THEME_KEY, 'dark');
|
||||
const customColor = ref('#2380FB');
|
||||
provide(THEME_KEY, 'dark')
|
||||
const customColor = ref('#2380FB')
|
||||
const option1 = ref({
|
||||
backgroundColor:'transparent',
|
||||
backgroundColor: 'transparent',
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
@@ -125,66 +133,65 @@
|
||||
right: fitChartSize(10),
|
||||
top: fitChartSize(70),
|
||||
bottom: fitChartSize(20),
|
||||
itemWidth:5,
|
||||
itemHeight:5,
|
||||
padding: [20,10,20,10],
|
||||
itemWidth: 5,
|
||||
itemHeight: 5,
|
||||
padding: [20, 10, 20, 10],
|
||||
// itemGap:15,
|
||||
show:true,
|
||||
lineStyle:{
|
||||
borderColor:'#fff',
|
||||
width:5,
|
||||
show: true,
|
||||
lineStyle: {
|
||||
borderColor: '#fff',
|
||||
width: 5
|
||||
},
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize:fitChartSize(16),
|
||||
fontSize: fitChartSize(16),
|
||||
lineHeight: 16,
|
||||
rich: {
|
||||
d: {
|
||||
width: '100%',
|
||||
borderWidth: 0.5,
|
||||
height:5,
|
||||
backgroundColor: '1',
|
||||
height: 5,
|
||||
backgroundColor: '1'
|
||||
},
|
||||
a: {
|
||||
width: fitChartSize(200),
|
||||
align: 'left',
|
||||
fontSize:fitChartSize(16),
|
||||
fontSize: fitChartSize(16)
|
||||
// backgroundColor:'1'
|
||||
// color:'1',
|
||||
// borderColor:'#eee',
|
||||
// borderWidth:2
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
formatter: (e) => {
|
||||
let ratio = 0
|
||||
let value = 0
|
||||
if (option1.value.series[0].data.length > 0) {
|
||||
option1.value.series[0].data.forEach(item => {
|
||||
option1.value.series[0].data.forEach((item) => {
|
||||
if (e == item.name) {
|
||||
ratio = (item.value*100/3799).toFixed(0)
|
||||
ratio = ((item.value * 100) / 3799).toFixed(0)
|
||||
value = item.value
|
||||
}
|
||||
});
|
||||
})
|
||||
}
|
||||
// return `${e} ${ratio}%
|
||||
let arr = ['{a|' + e + '}', '{b|' + ratio + '%}']
|
||||
return arr.join('')
|
||||
},
|
||||
itemStyle:{
|
||||
itemStyle: {
|
||||
// color:'#fff'
|
||||
|
||||
},
|
||||
backgroundColor:'rgba(0,77,136,0.6)'
|
||||
backgroundColor: 'rgba(0,77,136,0.6)'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Access From',
|
||||
type: 'pie',
|
||||
left:0,
|
||||
top:40,
|
||||
width:fitChartSize(350),
|
||||
height:fitChartSize(350),
|
||||
left: 0,
|
||||
top: 40,
|
||||
width: fitChartSize(350),
|
||||
height: fitChartSize(350),
|
||||
// width:200,
|
||||
// height:200,
|
||||
radius: ['40%', '50%'],
|
||||
@@ -196,7 +203,7 @@
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center',
|
||||
fontWeight: 'bold',
|
||||
fontWeight: 'bold'
|
||||
// formatter: function (o) {
|
||||
// let data = o.data.value
|
||||
// return `{value|${data}}` + '\n' + `{name|整改率}`
|
||||
@@ -220,7 +227,7 @@
|
||||
show: true,
|
||||
fontSize: fitChartSize(16),
|
||||
fontWeight: 'bold',
|
||||
color:'#fff',
|
||||
color: '#fff',
|
||||
fontWeight: 'bold',
|
||||
formatter: function (o) {
|
||||
let data = o.data.value
|
||||
@@ -250,14 +257,13 @@
|
||||
{ value: 135, name: '异常状况4' },
|
||||
{ value: 100, name: '异常状况5' },
|
||||
{ value: 777, name: '异常状况6' },
|
||||
{ value: 888, name: '其他' },
|
||||
{ value: 888, name: '其他' }
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
},
|
||||
],
|
||||
})
|
||||
const option2 = ref({
|
||||
backgroundColor:'transparent',
|
||||
backgroundColor: 'transparent',
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
@@ -267,66 +273,65 @@
|
||||
right: fitChartSize(30),
|
||||
top: fitChartSize(70),
|
||||
bottom: fitChartSize(20),
|
||||
itemWidth:5,
|
||||
itemHeight:5,
|
||||
padding: [20,10,20,10],
|
||||
itemWidth: 5,
|
||||
itemHeight: 5,
|
||||
padding: [20, 10, 20, 10],
|
||||
// itemGap:15,
|
||||
show:true,
|
||||
lineStyle:{
|
||||
borderColor:'#fff',
|
||||
width:5,
|
||||
show: true,
|
||||
lineStyle: {
|
||||
borderColor: '#fff',
|
||||
width: 5
|
||||
},
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize:fitChartSize(16),
|
||||
fontSize: fitChartSize(16),
|
||||
lineHeight: 16,
|
||||
rich: {
|
||||
d: {
|
||||
width: '100%',
|
||||
borderWidth: 0.5,
|
||||
height:5,
|
||||
backgroundColor: '1',
|
||||
height: 5,
|
||||
backgroundColor: '1'
|
||||
},
|
||||
a: {
|
||||
width: fitChartSize(100),
|
||||
align: 'left',
|
||||
fontSize:fitChartSize(16),
|
||||
fontSize: fitChartSize(16)
|
||||
// backgroundColor:'1'
|
||||
// color:'1',
|
||||
// borderColor:'#eee',
|
||||
// borderWidth:2
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
formatter: (e) => {
|
||||
let ratio = 0
|
||||
let value = 0
|
||||
if (option1.value.series[0].data.length > 0) {
|
||||
option1.value.series[0].data.forEach(item => {
|
||||
option1.value.series[0].data.forEach((item) => {
|
||||
if (e == item.name) {
|
||||
ratio = (item.value*100/3799).toFixed(0)
|
||||
ratio = ((item.value * 100) / 3799).toFixed(0)
|
||||
value = item.value
|
||||
}
|
||||
});
|
||||
})
|
||||
}
|
||||
// return `${e} ${ratio}%
|
||||
let arr = ['{a|' + e + '}', '{b|' + ratio + '%}']
|
||||
return arr.join('')
|
||||
},
|
||||
itemStyle:{
|
||||
itemStyle: {
|
||||
// color:'#fff'
|
||||
|
||||
},
|
||||
backgroundColor:'rgba(0,77,136,0.6)'
|
||||
backgroundColor: 'rgba(0,77,136,0.6)'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Access From',
|
||||
type: 'pie',
|
||||
left:fitChartSize(-65),
|
||||
top:fitChartSize(40),
|
||||
width:fitChartSize(350),
|
||||
height:fitChartSize(350),
|
||||
left: fitChartSize(-65),
|
||||
top: fitChartSize(40),
|
||||
width: fitChartSize(350),
|
||||
height: fitChartSize(350),
|
||||
// width:200,
|
||||
// height:200,
|
||||
radius: ['40%', '50%'],
|
||||
@@ -338,7 +343,7 @@
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center',
|
||||
fontWeight: 'bold',
|
||||
fontWeight: 'bold'
|
||||
// formatter: function (o) {
|
||||
// let data = o.data.value
|
||||
// return `{value|${data}}` + '\n' + `{name|整改率}`
|
||||
@@ -362,7 +367,7 @@
|
||||
show: true,
|
||||
fontSize: fitChartSize(16),
|
||||
fontWeight: 'bold',
|
||||
color:'#fff',
|
||||
color: '#fff',
|
||||
fontWeight: 'bold',
|
||||
formatter: function (o) {
|
||||
let data = o.data.value
|
||||
@@ -392,38 +397,48 @@
|
||||
{ value: 135, name: '异常状况4' },
|
||||
{ value: 100, name: '异常状况5' },
|
||||
{ value: 777, name: '异常状况6' },
|
||||
{ value: 888, name: '其他' },
|
||||
{ value: 888, name: '其他' }
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
},
|
||||
],
|
||||
})
|
||||
const optionLine = ref({
|
||||
backgroundColor:'transparent',
|
||||
height:'90%',
|
||||
grid:{
|
||||
top:'20',
|
||||
bottom:'0',
|
||||
left:'4%',
|
||||
containLabel: true,
|
||||
backgroundColor: 'transparent',
|
||||
height: '90%',
|
||||
grid: {
|
||||
top: '20',
|
||||
bottom: '0',
|
||||
left: '4%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
nameLocation: 'middle',
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
axisLabel: {
|
||||
fontSize:10,
|
||||
fontSize: 10,
|
||||
interval: 0, // 显示所有标签
|
||||
rotate: 0, // 旋转标签45度
|
||||
rotate: 0 // 旋转标签45度
|
||||
},
|
||||
data: ['10:00', '10:00', '10:00', '10:00', '10:00', '10:00', '10:00', '10:00', '10:00', '10:00'],
|
||||
axisTisk:{
|
||||
data: [
|
||||
'10:00',
|
||||
'10:00',
|
||||
'10:00',
|
||||
'10:00',
|
||||
'10:00',
|
||||
'10:00',
|
||||
'10:00',
|
||||
'10:00',
|
||||
'10:00',
|
||||
'10:00'
|
||||
],
|
||||
axisTisk: {
|
||||
show: true,
|
||||
// 设置刻度长度
|
||||
length: 1,
|
||||
lineStyle: {
|
||||
type: 'dashed' ,// 设置为虚线
|
||||
width:0,
|
||||
type: 'dashed', // 设置为虚线
|
||||
width: 0
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
@@ -434,36 +449,36 @@
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
min:0,
|
||||
max:7000,
|
||||
interval:1000,
|
||||
min: 0,
|
||||
max: 7000,
|
||||
interval: 1000,
|
||||
axisLabel: {
|
||||
fontSize: fitChartSize(12) ,// 设置Y轴刻度字体大小
|
||||
color: '#eee',
|
||||
fontSize: fitChartSize(12), // 设置Y轴刻度字体大小
|
||||
color: '#eee'
|
||||
},
|
||||
splitLine:{
|
||||
show:true,
|
||||
lineStyle:{
|
||||
type:'dashed',
|
||||
color:'#00D0FF'
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
color: '#00D0FF'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
series: [
|
||||
{
|
||||
data: [0, 1000, 3000, 3500, 4200, 2000, 6000,800,6500,4500],
|
||||
data: [0, 1000, 3000, 3500, 4200, 2000, 6000, 800, 6500, 4500],
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
label:{
|
||||
show:false,//隐藏坐标点
|
||||
label: {
|
||||
show: false //隐藏坐标点
|
||||
},
|
||||
itemStyle:{
|
||||
color:'transparent'
|
||||
itemStyle: {
|
||||
color: 'transparent'
|
||||
},
|
||||
markLine:{
|
||||
symbol:['none','none'],
|
||||
label:{show:false}
|
||||
markLine: {
|
||||
symbol: ['none', 'none'],
|
||||
label: { show: false }
|
||||
},
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
@@ -491,142 +506,138 @@
|
||||
{
|
||||
offset: 1,
|
||||
color: '#009DFF'
|
||||
},
|
||||
}
|
||||
]),
|
||||
width:2,
|
||||
width: 2
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep(.el-progress-bar__outer){
|
||||
background: rgba(0,150,255,0.15);
|
||||
:deep(.el-progress-bar__outer) {
|
||||
background: rgba(0, 150, 255, 0.15);
|
||||
border-radius: 0;
|
||||
}
|
||||
:deep(.el-progress-bar__inner){
|
||||
:deep(.el-progress-bar__inner) {
|
||||
border-radius: 0;
|
||||
}
|
||||
:deep(.el-progress__text){
|
||||
font-size:vw(14) !important;
|
||||
color:#fff;
|
||||
:deep(.el-progress__text) {
|
||||
font-size: vw(14) !important;
|
||||
color: #fff;
|
||||
}
|
||||
.line-chart{
|
||||
.line-chart {
|
||||
// margin-top:vh(20);
|
||||
}
|
||||
.chart-p{
|
||||
position:relative;
|
||||
.check-label{
|
||||
position:absolute;
|
||||
right:vw(20);
|
||||
top:vh(-15);
|
||||
span{
|
||||
.chart-p {
|
||||
position: relative;
|
||||
.check-label {
|
||||
position: absolute;
|
||||
right: vw(20);
|
||||
top: vh(-15);
|
||||
span {
|
||||
min-width: vw(55);
|
||||
padding:vw(5);
|
||||
background: linear-gradient( 270deg, rgba(8,41,86,0.16) 0%, #0B61B4 100%);
|
||||
padding: vw(5);
|
||||
background: linear-gradient(270deg, rgba(8, 41, 86, 0.16) 0%, #0b61b4 100%);
|
||||
border-radius: vw(50);
|
||||
// border: 1px solid rgba(0,114,220,0.3);
|
||||
margin-left:vw(5);
|
||||
margin-left: vw(5);
|
||||
display: inline-block;
|
||||
font-weight: 400;
|
||||
font-size: vw(13);
|
||||
color: #0084FF;
|
||||
color: #0084ff;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
}
|
||||
.active{
|
||||
background: linear-gradient( 270deg, #37D8FC 0%, #0084FF 100%);
|
||||
.active {
|
||||
background: linear-gradient(270deg, #37d8fc 0%, #0084ff 100%);
|
||||
border-radius: vw(50);
|
||||
border: 1px solid rgba(0,114,220,0.3);
|
||||
color:#fff;
|
||||
border: 1px solid rgba(0, 114, 220, 0.3);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.work-box-2{
|
||||
width:vw(1522);
|
||||
height:vh(965);
|
||||
margin-top:vh(100);
|
||||
margin-left:vw(10);
|
||||
position:relative;
|
||||
.work-box-2 {
|
||||
width: vw(1522);
|
||||
height: vh(965);
|
||||
margin-top: vh(100);
|
||||
margin-left: vw(10);
|
||||
position: relative;
|
||||
z-index: 99;
|
||||
.work-2-flex{
|
||||
background: linear-gradient( 321deg, #0B2F64 0%, #062B57 100%);
|
||||
height:vh(490);
|
||||
overflow:hidden;
|
||||
.work-2-flex {
|
||||
background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
|
||||
height: vh(490);
|
||||
overflow: hidden;
|
||||
|
||||
.chart-box{
|
||||
.chart-box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding:vw(20) vw(15);
|
||||
padding: vw(20) vw(15);
|
||||
|
||||
.lt-chart{
|
||||
width:vw(740);
|
||||
.lt-chart {
|
||||
width: vw(740);
|
||||
min-height: vw(336);
|
||||
padding:vw(20);
|
||||
background: radial-gradient( 70% at 99% 50%, #0A4190 0%, rgba(0,77,136,0.6) 100%);
|
||||
border-radius: 0px 0px 0px 0px;
|
||||
border: 1px solid;
|
||||
border-image: linear-gradient(180deg, rgba(0, 150, 255, 1), rgba(0, 90, 153, 0)) 1 1;
|
||||
.box-press{
|
||||
padding:vw(30);
|
||||
padding: vw(20);
|
||||
background-image: url('@/assets/images/bg-3.png');
|
||||
background-size: 100% 100%;
|
||||
.box-press {
|
||||
padding: vw(30);
|
||||
padding-top: vh(40);
|
||||
.p-item{
|
||||
.p-item {
|
||||
display: flex;
|
||||
width:100%;
|
||||
margin-top:vh(40);
|
||||
width: 100%;
|
||||
margin-top: vh(40);
|
||||
align-items: center;
|
||||
span{
|
||||
span {
|
||||
font-weight: bold;
|
||||
font-size: vw(14);
|
||||
color: #FFFFFF;
|
||||
color: #ffffff;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
margin-right:vw(10);
|
||||
margin-right: vw(10);
|
||||
}
|
||||
.box-1{
|
||||
.box-1 {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.box{
|
||||
width:100%;
|
||||
height:vh(250);
|
||||
.box {
|
||||
width: 100%;
|
||||
height: vh(250);
|
||||
display: flex;
|
||||
margin-top:vh(30);
|
||||
.chart-1{
|
||||
margin-top: vh(30);
|
||||
.chart-1 {
|
||||
flex: 1;
|
||||
}
|
||||
.chart-des{
|
||||
width:vw(224);
|
||||
height:vh(312);
|
||||
background:#0A4190;
|
||||
.t-item:nth-child(odd){
|
||||
background: rgba(0,150,255,0.3);
|
||||
|
||||
.chart-des {
|
||||
width: vw(224);
|
||||
height: vh(312);
|
||||
background: #0a4190;
|
||||
.t-item:nth-child(odd) {
|
||||
background: rgba(0, 150, 255, 0.3);
|
||||
}
|
||||
.t-item:nth-child(even){
|
||||
.t-item:nth-child(even) {
|
||||
background-color: transparent;
|
||||
}
|
||||
.t-item{
|
||||
.t-item {
|
||||
display: flex;
|
||||
padding:vh(10) vw(10);
|
||||
span{
|
||||
width:vw(24);
|
||||
height:vh(16);
|
||||
padding: vh(10) vw(10);
|
||||
span {
|
||||
width: vw(24);
|
||||
height: vh(16);
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
margin-right:vw(10);
|
||||
color:#fff;
|
||||
margin-right: vw(10);
|
||||
color: #fff;
|
||||
border-radius: 2px 2px 2px 2px;
|
||||
}
|
||||
p{
|
||||
p {
|
||||
font-weight: 400;
|
||||
font-size: vw(15);
|
||||
color: #FFFFFF;
|
||||
color: #ffffff;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
@@ -638,33 +649,33 @@
|
||||
/*3. 文字用省略号替代超出的部分*/
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.bgColor1{
|
||||
background:#D9011B;
|
||||
.bgColor1 {
|
||||
background: #d9011b;
|
||||
}
|
||||
.bgColor2{
|
||||
background:#FEAE00;
|
||||
.bgColor2 {
|
||||
background: #feae00;
|
||||
}
|
||||
.bgColor3{
|
||||
background:#2380FB;
|
||||
.bgColor3 {
|
||||
background: #2380fb;
|
||||
}
|
||||
.bgColor4{
|
||||
background:#495C77;
|
||||
.bgColor4 {
|
||||
background: #495c77;
|
||||
}
|
||||
}
|
||||
.t-des{
|
||||
background: rgba(0,150,255,0.4);
|
||||
padding:vw(10);
|
||||
.t-des {
|
||||
background: rgba(0, 150, 255, 0.4);
|
||||
padding: vw(10);
|
||||
font-weight: 400;
|
||||
font-size: vw(13);
|
||||
color: #02F9FA;
|
||||
display:flex;
|
||||
color: #02f9fa;
|
||||
display: flex;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
img{
|
||||
width:vw(16);
|
||||
height:vh(12);
|
||||
margin-right:vw(5);
|
||||
img {
|
||||
width: vw(16);
|
||||
height: vh(12);
|
||||
margin-right: vw(5);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -692,58 +703,58 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.hd-list{
|
||||
.hd-list {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position:relative;
|
||||
.h-icon{
|
||||
position:absolute;
|
||||
left:vw(70);
|
||||
top:50%;
|
||||
position: relative;
|
||||
.h-icon {
|
||||
position: absolute;
|
||||
left: vw(70);
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width:vw(74);
|
||||
height:vh(74);
|
||||
width: vw(74);
|
||||
height: auto;
|
||||
}
|
||||
.item{
|
||||
display:flex;
|
||||
width:vw(210);
|
||||
height:vh(58);
|
||||
.item {
|
||||
display: flex;
|
||||
width: vw(210);
|
||||
height: vh(58);
|
||||
line-height: vh(58);
|
||||
padding-left:vw(10);
|
||||
padding-left: vw(10);
|
||||
text-align: center;
|
||||
margin:0 vw(15);
|
||||
margin: 0 vw(15);
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
color: rgba(255,255,255,0.9);
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
span{
|
||||
span {
|
||||
font-size: vw(24);
|
||||
position: relative;
|
||||
top:vh(2);
|
||||
margin-left:vw(5);
|
||||
top: vh(2);
|
||||
margin-left: vw(5);
|
||||
}
|
||||
.color1{
|
||||
color:#02F9FA;
|
||||
.color1 {
|
||||
color: #02f9fa;
|
||||
}
|
||||
}
|
||||
.item1{
|
||||
.item1 {
|
||||
background-image: url('@/assets/images/work-n-bg-1.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.item2{
|
||||
.item2 {
|
||||
background-image: url('@/assets/images/work-n-bg-2.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.item3{
|
||||
.item3 {
|
||||
background-image: url('@/assets/images/work-n-bg-3.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
.header {
|
||||
position: relative;
|
||||
margin:vh(20);
|
||||
margin: vh(20);
|
||||
|
||||
.title {
|
||||
margin: vh(5) auto;
|
||||
@@ -757,7 +768,7 @@
|
||||
justify-content: center;
|
||||
background-image: url('@/assets/images/title-4.png');
|
||||
background-size: 100% 100%;
|
||||
span{
|
||||
span {
|
||||
font-weight: 800;
|
||||
color: transparent;
|
||||
-webkit-background-clip: text;
|
||||
|
||||
@@ -35,7 +35,7 @@
|
||||
<div class="work-box-1">
|
||||
<!-- 最新工单 -->
|
||||
<div class="header">
|
||||
<div class="title"> <span>最新工单</span> </div>
|
||||
<div class="title"> <span>消息情况</span> </div>
|
||||
</div>
|
||||
<!-- 列表 -->
|
||||
<div class="list">
|
||||
@@ -54,11 +54,11 @@
|
||||
import * as echarts from 'echarts'
|
||||
import { fitChartSize } from '@/utils/dataUtil'
|
||||
import Map from '@/components/Map/marker.vue'
|
||||
import VChart, { THEME_KEY } from 'vue-echarts';
|
||||
import { ref, provide } from 'vue';
|
||||
provide(THEME_KEY, 'dark');
|
||||
import VChart, { THEME_KEY } from 'vue-echarts'
|
||||
import { ref, provide } from 'vue'
|
||||
provide(THEME_KEY, 'dark')
|
||||
const option = ref({
|
||||
backgroundColor:'transparent',
|
||||
backgroundColor: 'transparent',
|
||||
title: [
|
||||
{
|
||||
text: '45.5%',
|
||||
@@ -191,25 +191,25 @@
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.work-box-3{
|
||||
.work-box-3 {
|
||||
width: vw(813);
|
||||
height: vh(380);
|
||||
background: linear-gradient( 321deg, #0B2F64 0%, #062B57 100%);
|
||||
background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
|
||||
border-radius: 0px 0px 0px 0px;
|
||||
margin-top:vh(100);
|
||||
margin-left:vw(10);
|
||||
position:relative;
|
||||
margin-top: vh(100);
|
||||
margin-left: vw(10);
|
||||
position: relative;
|
||||
z-index: 99;
|
||||
.work-box-1{
|
||||
width:vw(815);
|
||||
height:vh(588);
|
||||
.work-box-1 {
|
||||
width: vw(815);
|
||||
height: vh(588);
|
||||
// margin-top:vh(100);
|
||||
background: linear-gradient( 321deg, #0B2F64 0%, #062B57 100%);
|
||||
background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
|
||||
border-radius: 0px 0px 0px 0px;
|
||||
position:relative;
|
||||
z-index:99;
|
||||
padding:0 vw(20);
|
||||
.list{
|
||||
position: relative;
|
||||
z-index: 99;
|
||||
padding: 0 vw(20);
|
||||
.list {
|
||||
/* 滚动条整体样式 */
|
||||
&::-webkit-scrollbar {
|
||||
width: vw(4); /* 滚动条的宽度 */
|
||||
@@ -223,54 +223,53 @@
|
||||
background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
|
||||
border-radius: 5px; /* 滑块的圆角 */
|
||||
}
|
||||
height:vh(510);
|
||||
height: vh(510);
|
||||
overflow: auto;
|
||||
.li:nth-child(odd){
|
||||
background: rgba(3,78,153,0.3);
|
||||
|
||||
.li:nth-child(odd) {
|
||||
background: rgba(3, 78, 153, 0.3);
|
||||
}
|
||||
.li:nth-child(even){
|
||||
.li:nth-child(even) {
|
||||
background-color: transparent;
|
||||
}
|
||||
.li{
|
||||
.li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
padding:vh(8) vh(10);
|
||||
.label{
|
||||
padding: vh(8) vh(10);
|
||||
.label {
|
||||
width: vw(60);
|
||||
height: vh(24);
|
||||
line-height:vh(24);
|
||||
color:#fff;
|
||||
line-height: vh(24);
|
||||
color: #fff;
|
||||
border-radius: 2px 2px 2px 2px;
|
||||
font-size: vw(14);
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
margin-right: vw(10);
|
||||
}
|
||||
.label1{
|
||||
background: #2380FB;
|
||||
.label1 {
|
||||
background: #2380fb;
|
||||
}
|
||||
.label2{
|
||||
background: #FEAE00;
|
||||
.label2 {
|
||||
background: #feae00;
|
||||
}
|
||||
.label3{
|
||||
background: #D9011B;
|
||||
.label3 {
|
||||
background: #d9011b;
|
||||
}
|
||||
.time{
|
||||
.time {
|
||||
font-weight: 400;
|
||||
font-size: vw(12);
|
||||
color: rgba(255,255,255,0.6);
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
line-height: 14px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
margin-left:vw(30);
|
||||
margin-left: vw(30);
|
||||
}
|
||||
p{
|
||||
p {
|
||||
font-weight: 400;
|
||||
font-size: vw(15);
|
||||
color: #FFFFFF;
|
||||
color: #ffffff;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
@@ -286,7 +285,7 @@
|
||||
}
|
||||
.header {
|
||||
position: relative;
|
||||
margin:vh(20);
|
||||
margin: vh(20);
|
||||
.title {
|
||||
margin: vh(5) auto;
|
||||
width: vw(468);
|
||||
@@ -299,7 +298,7 @@
|
||||
justify-content: center;
|
||||
background-image: url('@/assets/images/title-4.png');
|
||||
background-size: 100% 100%;
|
||||
span{
|
||||
span {
|
||||
font-weight: 800;
|
||||
color: transparent;
|
||||
-webkit-background-clip: text;
|
||||
@@ -310,23 +309,23 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.work-2-flex{
|
||||
background: linear-gradient( 321deg, #0B2F64 0%, #062B57 100%);
|
||||
height:vh(380);
|
||||
overflow:hidden;
|
||||
.chart-box{
|
||||
.work-2-flex {
|
||||
background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
|
||||
height: vh(380);
|
||||
overflow: hidden;
|
||||
.chart-box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding:vw(20) vw(15);
|
||||
height:vh(360);
|
||||
padding-top:vh(35);
|
||||
padding: vw(20) vw(15);
|
||||
height: vh(360);
|
||||
padding-top: vh(35);
|
||||
box-sizing: border-box;
|
||||
.box-item{
|
||||
flex:1;
|
||||
width:vw(140);
|
||||
height:vh(140);
|
||||
padding:vw(10);
|
||||
.line-chart{
|
||||
.box-item {
|
||||
flex: 1;
|
||||
width: vw(140);
|
||||
height: vh(140);
|
||||
padding: vw(10);
|
||||
.line-chart {
|
||||
// width:100%;
|
||||
// height:100%;
|
||||
}
|
||||
@@ -334,7 +333,7 @@
|
||||
}
|
||||
.header {
|
||||
position: relative;
|
||||
margin:vh(20);
|
||||
margin: vh(20);
|
||||
|
||||
.title {
|
||||
margin: vh(5) auto;
|
||||
@@ -348,7 +347,7 @@
|
||||
justify-content: center;
|
||||
background-image: url('@/assets/images/title-4.png');
|
||||
background-size: 100% 100%;
|
||||
span{
|
||||
span {
|
||||
font-weight: 800;
|
||||
color: transparent;
|
||||
-webkit-background-clip: text;
|
||||
@@ -358,52 +357,52 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.hd-list{
|
||||
.hd-list {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position:relative;
|
||||
position: relative;
|
||||
padding: 0 vw(20);
|
||||
.h-icon{
|
||||
position:absolute;
|
||||
left:vw(70);
|
||||
top:50%;
|
||||
.h-icon {
|
||||
position: absolute;
|
||||
left: vw(70);
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width:vw(74);
|
||||
height:vh(74);
|
||||
width: vw(74);
|
||||
height: vh(74);
|
||||
}
|
||||
.item{
|
||||
display:flex;
|
||||
width:vw(210);
|
||||
height:vh(58);
|
||||
.item {
|
||||
display: flex;
|
||||
width: vw(210);
|
||||
height: vh(58);
|
||||
line-height: vh(58);
|
||||
padding-left:vw(10);
|
||||
padding-left: vw(10);
|
||||
text-align: center;
|
||||
margin:0 vw(15);
|
||||
margin: 0 vw(15);
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
color: rgba(255,255,255,0.9);
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
span{
|
||||
span {
|
||||
font-size: vw(24);
|
||||
position: relative;
|
||||
top:vh(2);
|
||||
margin-left:vw(5);
|
||||
top: vh(2);
|
||||
margin-left: vw(5);
|
||||
}
|
||||
.color1{
|
||||
color:#02F9FA;
|
||||
.color1 {
|
||||
color: #02f9fa;
|
||||
}
|
||||
}
|
||||
.item1{
|
||||
.item1 {
|
||||
background-image: url('@/assets/images/work-n-bg-1.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.item2{
|
||||
.item2 {
|
||||
background-image: url('@/assets/images/work-n-bg-2.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.item3{
|
||||
.item3 {
|
||||
background-image: url('@/assets/images/work-n-bg-3.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user