zhangzhang
1 year ago
10 changed files with 1580 additions and 1463 deletions
@ -1,262 +1,270 @@ |
|||
import * as echarts from "echarts"; |
|||
|
|||
var xData = ['梁山东', '安城', '梁山', '孝里', '平阴北', '长青','东平','平阴南','嘉祥西'] |
|||
let eventWarning = [55, 50, 46, 46, 55, 45,33,62,30] |
|||
let eventHandling = [2000, 1700, 1600, 1450, 2100, 1500, 1200,1200,1900] |
|||
let legend = ['通行量', '收费金额'] |
|||
var xData = [ |
|||
"梁山东", |
|||
"安城", |
|||
"梁山", |
|||
"孝里", |
|||
"平阴北", |
|||
"长青", |
|||
"东平", |
|||
"平阴南", |
|||
"嘉祥西", |
|||
]; |
|||
let eventWarning = [55, 50, 46, 46, 55, 45, 33, 62, 30]; |
|||
let eventHandling = [2000, 1700, 1600, 1450, 2100, 1500, 1200, 1200, 1900]; |
|||
let legend = ["通行量", "收费金额"]; |
|||
let options = { |
|||
color: ['#2CF1FF', '#3456FF'], |
|||
timeline: { |
|||
color: ["#2CF1FF", "#3456FF"], |
|||
timeline: { |
|||
show: false, |
|||
}, |
|||
tooltip: { |
|||
trigger: "axis", |
|||
// axisPointer: {
|
|||
// type: "shadow",
|
|||
// },
|
|||
// backgroundColor: "rgba(255,255,255,0.75)",
|
|||
// extraCssText: "box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.3);",
|
|||
// textStyle: {
|
|||
// fontSize: 14,
|
|||
// color: "#000",
|
|||
// },
|
|||
// formatter: "{a}<br/>{b} :\n\n{c} ",
|
|||
}, |
|||
legend: { |
|||
top: 10, |
|||
right: "center", |
|||
itemWidth: 10, |
|||
itemHeight: 6, |
|||
itemGap: 20, |
|||
icon: "roundRect", |
|||
orient: "horizontal", |
|||
itemStyle: { |
|||
borderRadius: 18, |
|||
}, |
|||
textStyle: { |
|||
color: "#ffffff", |
|||
fontSize: 13, |
|||
}, |
|||
data: legend, |
|||
}, |
|||
grid: [ |
|||
// 左边
|
|||
{ |
|||
show: false, |
|||
}, |
|||
tooltip: { |
|||
trigger: "axis", |
|||
axisPointer: { |
|||
type: "shadow", |
|||
left: "5%", |
|||
top: "15%", |
|||
bottom: "10%", |
|||
containLabel: true, |
|||
width: "40%", |
|||
}, |
|||
// 中间
|
|||
{ |
|||
show: false, |
|||
left: "51%", |
|||
top: "15%", |
|||
bottom: "15%", |
|||
width: "0%", |
|||
}, |
|||
// 右边
|
|||
{ |
|||
show: false, |
|||
right: "5%", |
|||
top: "15%", |
|||
bottom: "10%", |
|||
containLabel: true, |
|||
width: "40%", |
|||
}, |
|||
], |
|||
xAxis: [ |
|||
{ |
|||
type: "value", |
|||
inverse: true, |
|||
axisTick: { |
|||
show: false, |
|||
}, |
|||
backgroundColor: "rgba(255,255,255,0.75)", |
|||
extraCssText: "box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.3);", |
|||
textStyle: { |
|||
fontSize: 14, |
|||
color: "#000", |
|||
axisLabel: { |
|||
show: false, |
|||
}, |
|||
formatter: "{a}<br/>{b} :\n\n{c} ", |
|||
}, |
|||
legend: { |
|||
top: 10, |
|||
right: "center", |
|||
itemWidth: 10, |
|||
itemHeight: 6, |
|||
itemGap: 20, |
|||
icon:"roundRect", |
|||
orient: "horizontal", |
|||
itemStyle:{ |
|||
borderRadius:18, |
|||
axisLabel: { |
|||
show: true, |
|||
verticalAlign: "middle", |
|||
textStyle: { |
|||
color: "rgba(255, 255, 255, 0.7)", |
|||
fontSize: 12, |
|||
}, |
|||
}, |
|||
textStyle: { |
|||
color: "#ffffff", |
|||
fontSize: 16, |
|||
splitLine: { |
|||
show: false, |
|||
}, |
|||
}, |
|||
{ |
|||
gridIndex: 1, |
|||
show: false, |
|||
}, |
|||
{ |
|||
gridIndex: 2, |
|||
axisLine: { |
|||
show: false, |
|||
}, |
|||
data: legend, |
|||
}, |
|||
grid: [ |
|||
// 左边
|
|||
{ |
|||
show: false, |
|||
left: "5%", |
|||
top: "15%", |
|||
bottom: "10%", |
|||
containLabel: true, |
|||
width: "40%", |
|||
axisTick: { |
|||
show: false, |
|||
}, |
|||
// 中间
|
|||
{ |
|||
show: false, |
|||
left: "51%", |
|||
top: "15%", |
|||
bottom: "15%", |
|||
width: "0%", |
|||
axisLabel: { |
|||
show: true, |
|||
verticalAlign: "middle", |
|||
textStyle: { |
|||
color: "rgba(255, 255, 255, 0.7)", |
|||
fontSize: 12, |
|||
}, |
|||
}, |
|||
// 右边
|
|||
{ |
|||
show: false, |
|||
right: "5%", |
|||
top: "15%", |
|||
bottom: "10%", |
|||
containLabel: true, |
|||
width: "40%", |
|||
splitLine: { |
|||
show: false, |
|||
}, |
|||
], |
|||
xAxis: [ |
|||
{ |
|||
type: "value", |
|||
inverse: true, |
|||
axisTick: { |
|||
show: false, |
|||
}, |
|||
axisLabel: { |
|||
show: false, |
|||
}, |
|||
axisLabel: { |
|||
show: true, |
|||
verticalAlign: 'middle', |
|||
textStyle: { |
|||
color: 'rgba(255, 255, 255, 0.7)', |
|||
fontSize: 12, |
|||
}, |
|||
}, |
|||
splitLine: { |
|||
show: false, |
|||
}, |
|||
}, |
|||
], |
|||
yAxis: [ |
|||
{ |
|||
type: "category", |
|||
inverse: true, |
|||
position: "right", |
|||
axisLine: { |
|||
show: false, |
|||
}, |
|||
{ |
|||
gridIndex: 1, |
|||
show: false, |
|||
axisTick: { |
|||
show: false, |
|||
}, |
|||
{ |
|||
gridIndex: 2, |
|||
axisLine: { |
|||
show: false, |
|||
}, |
|||
axisTick: { |
|||
show: false, |
|||
}, |
|||
axisLabel: { |
|||
show: true, |
|||
verticalAlign: 'middle', |
|||
textStyle: { |
|||
color: 'rgba(255, 255, 255, 0.7)', |
|||
fontSize: 12, |
|||
}, |
|||
}, |
|||
splitLine: { |
|||
show: false, |
|||
}, |
|||
axisLabel: { |
|||
show: false, |
|||
}, |
|||
], |
|||
yAxis: [ |
|||
{ |
|||
type: "category", |
|||
inverse: true, |
|||
position: "right", |
|||
axisLine: { |
|||
show: false |
|||
}, |
|||
axisTick: { |
|||
show: false, |
|||
}, |
|||
axisLabel: { |
|||
show: false, |
|||
}, |
|||
data: xData, |
|||
data: xData, |
|||
}, |
|||
{ |
|||
gridIndex: 1, |
|||
type: "category", |
|||
inverse: true, |
|||
position: "left", |
|||
axisLine: { |
|||
show: false, |
|||
}, |
|||
{ |
|||
gridIndex: 1, |
|||
type: "category", |
|||
inverse: true, |
|||
position: "left", |
|||
axisLine: { |
|||
show: false, |
|||
}, |
|||
axisTick: { |
|||
show: false, |
|||
}, |
|||
axisLabel: { |
|||
show: true, |
|||
color: "rgba(255, 255, 255, 1)", |
|||
fontSize: 12, |
|||
axisTick: { |
|||
show: false, |
|||
}, |
|||
axisLabel: { |
|||
show: true, |
|||
color: "rgba(255, 255, 255, 1)", |
|||
fontSize: 12, |
|||
align: "center", |
|||
}, |
|||
data: xData.map(function (value) { |
|||
return { |
|||
value: value, |
|||
textStyle: { |
|||
align: "center", |
|||
}, |
|||
data: xData.map(function (value) { |
|||
return { |
|||
value: value, |
|||
textStyle: { |
|||
align: "center", |
|||
}, |
|||
}; |
|||
}), |
|||
}, |
|||
}; |
|||
}), |
|||
}, |
|||
{ |
|||
gridIndex: 2, |
|||
type: "category", |
|||
inverse: true, |
|||
position: "left", |
|||
axisLine: { |
|||
show: false, |
|||
}, |
|||
{ |
|||
gridIndex: 2, |
|||
type: "category", |
|||
inverse: true, |
|||
position: "left", |
|||
axisLine: { |
|||
show: false |
|||
}, |
|||
axisTick: { |
|||
show: false, |
|||
}, |
|||
axisLabel: { |
|||
show: false, |
|||
}, |
|||
data: xData, |
|||
axisTick: { |
|||
show: false, |
|||
}, |
|||
], |
|||
series: [ |
|||
{ |
|||
name: legend[0], |
|||
type: "bar", |
|||
barWidth: 10, |
|||
stack: "1", |
|||
label: { |
|||
normal: { |
|||
show: true, |
|||
position: "left", |
|||
z:"100", |
|||
valueAnimation: true, |
|||
textStyle: { |
|||
color: "#F5F5F5", |
|||
fontSize: 10, |
|||
}, |
|||
formatter: '{c}' |
|||
}, |
|||
}, |
|||
itemStyle: { |
|||
borderRadius:9, |
|||
//Y轴数字显示部分
|
|||
|
|||
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ |
|||
{ |
|||
offset: 0, |
|||
color: "#167145", |
|||
}, |
|||
{ |
|||
offset: 1, |
|||
color: "#01EAC1", |
|||
}, |
|||
]), |
|||
}, |
|||
data: eventWarning, |
|||
animationEasing: "elasticOut", |
|||
showBackground: true, |
|||
backgroundStyle: { |
|||
color: 'rgba(180, 180, 180, 0.2)' |
|||
} |
|||
axisLabel: { |
|||
show: false, |
|||
}, |
|||
{ |
|||
name: legend[1], |
|||
type: "bar", |
|||
stack: "2", |
|||
barWidth: 10, |
|||
xAxisIndex: 2, |
|||
yAxisIndex: 2, |
|||
label: { |
|||
normal: { |
|||
show: true, |
|||
position: "right", |
|||
z:"100", |
|||
valueAnimation: true, |
|||
textStyle: { |
|||
color: "#F5F5F5", |
|||
fontSize: 10, |
|||
}, |
|||
formatter: '{c}' |
|||
}, |
|||
}, |
|||
itemStyle: { |
|||
borderRadius:9, |
|||
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ |
|||
{ |
|||
offset: 0, |
|||
color: "#F89336", |
|||
}, |
|||
{ |
|||
offset: 1, |
|||
color: "#D2BCA7", |
|||
}, |
|||
]), |
|||
}, |
|||
data: eventHandling, |
|||
animationEasing: "elasticOut", |
|||
showBackground: true, |
|||
backgroundStyle: { |
|||
color: 'rgba(180, 180, 180, 0.2)' |
|||
} |
|||
data: xData, |
|||
}, |
|||
], |
|||
series: [ |
|||
{ |
|||
name: legend[0], |
|||
type: "bar", |
|||
barWidth: 10, |
|||
stack: "1", |
|||
label: { |
|||
normal: { |
|||
show: true, |
|||
position: "left", |
|||
z: "100", |
|||
valueAnimation: true, |
|||
textStyle: { |
|||
color: "#F5F5F5", |
|||
fontSize: 10, |
|||
}, |
|||
formatter: "{c}", |
|||
}, |
|||
}, |
|||
], |
|||
}; |
|||
|
|||
itemStyle: { |
|||
borderRadius: 9, |
|||
//Y轴数字显示部分
|
|||
|
|||
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ |
|||
{ |
|||
offset: 0, |
|||
color: "#167145", |
|||
}, |
|||
{ |
|||
offset: 1, |
|||
color: "#01EAC1", |
|||
}, |
|||
]), |
|||
}, |
|||
data: eventWarning, |
|||
animationEasing: "elasticOut", |
|||
showBackground: true, |
|||
backgroundStyle: { |
|||
color: "rgba(180, 180, 180, 0.2)", |
|||
}, |
|||
}, |
|||
{ |
|||
name: legend[1], |
|||
type: "bar", |
|||
stack: "2", |
|||
barWidth: 10, |
|||
xAxisIndex: 2, |
|||
yAxisIndex: 2, |
|||
label: { |
|||
normal: { |
|||
show: true, |
|||
position: "right", |
|||
z: "100", |
|||
valueAnimation: true, |
|||
textStyle: { |
|||
color: "#F5F5F5", |
|||
fontSize: 10, |
|||
}, |
|||
formatter: "{c}", |
|||
}, |
|||
}, |
|||
itemStyle: { |
|||
borderRadius: 9, |
|||
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ |
|||
{ |
|||
offset: 0, |
|||
color: "#F89336", |
|||
}, |
|||
{ |
|||
offset: 1, |
|||
color: "#D2BCA7", |
|||
}, |
|||
]), |
|||
}, |
|||
data: eventHandling, |
|||
animationEasing: "elasticOut", |
|||
showBackground: true, |
|||
backgroundStyle: { |
|||
color: "rgba(180, 180, 180, 0.2)", |
|||
}, |
|||
}, |
|||
], |
|||
}; |
|||
|
|||
export default options |
|||
export default options; |
|||
|
|||
@ -1,394 +1,393 @@ |
|||
<template> |
|||
<div class='congestion'> |
|||
<WgtTitle :title="'气象预警信息'"></WgtTitle> |
|||
<div class="board"> |
|||
<div class="weaterMain" > |
|||
<div class="weaterTitle" > |
|||
<span class="text">当前气象预警信息数：</span> |
|||
<span class="num" >113</span> |
|||
<div class="board"> |
|||
<div class="weaterMain"> |
|||
<div class="weaterTitle"> |
|||
<span class="text">当前气象预警信息数：</span> |
|||
<span class="num">113</span> |
|||
</div> |
|||
<div> |
|||
<el-select v-model="colorSelect" size="mini" class="selectRoad" placeholder="请选择"> |
|||
<el-option v-for="item in colors" :key="item.value" :label="item.label" :value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
</div> |
|||
</div> |
|||
<div > |
|||
<el-select v-model="colorSelect" size="mini" class="selectRoad" placeholder="请选择"> |
|||
<el-option |
|||
v-for="item in colors" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
</div> |
|||
</div> |
|||
<div class="warningList" > |
|||
<div class="itemWarning" v-for="(item,i) in warnings"> |
|||
<div class="left-w" > |
|||
<div class="left-row" > |
|||
<div class="label" > |
|||
预警类型： |
|||
<div class="warningList"> |
|||
<div class="itemWarning" v-for="(item, i) in warnings"> |
|||
<div class="left-w"> |
|||
<div class="left-row"> |
|||
<div class="label"> |
|||
预警类型： |
|||
</div> |
|||
<div class="value"> |
|||
{{ item.class }} |
|||
</div> |
|||
</div> |
|||
<div class="value" > |
|||
{{ item.class }} |
|||
<div class="left-row"> |
|||
<div class="label"> |
|||
预警等级： |
|||
</div> |
|||
<div :class="'value ' + item.type"> |
|||
{{ item.lay }} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="left-row" > |
|||
<div class="label" > |
|||
预警等级： |
|||
<div class="left-row"> |
|||
<div class="label"> |
|||
预警范围： |
|||
</div> |
|||
<div class="value"> |
|||
{{ item.scope }} |
|||
</div> |
|||
</div> |
|||
<div :class="'value '+item.type" > |
|||
{{ item.lay }} |
|||
<div class="left-row"> |
|||
<div class="label"> |
|||
预警发布时间： |
|||
</div> |
|||
<div class="value"> |
|||
{{ item.dateTime }} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="left-row" > |
|||
<div class="label" > |
|||
预警范围： |
|||
<div class="right-w"> |
|||
<div class="right-row"> |
|||
预警内容: |
|||
</div> |
|||
<div class="value" > |
|||
{{ item.scope }} |
|||
<div class="right-text"> |
|||
{{ item.text }} |
|||
</div> |
|||
</div> |
|||
<div class="left-row" > |
|||
<div class="label" > |
|||
预警发布时间： |
|||
</div> |
|||
<div class="value" > |
|||
{{ item.dateTime }} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="right-w" > |
|||
<div class="right-row" > |
|||
预警内容: |
|||
</div> |
|||
<div class="right-text" > |
|||
{{ item.text }} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
</template> |
|||
|
|||
<script> |
|||
import { color } from 'echarts'; |
|||
<script> |
|||
import { color } from 'echarts'; |
|||
import WgtTitle from '../../../../../widgets/title' |
|||
|
|||
export default { |
|||
export default { |
|||
name: 'infoWarning', |
|||
components: { |
|||
WgtTitle |
|||
}, |
|||
data() { |
|||
return { |
|||
colorSelect:"org", |
|||
colors:[ |
|||
{label:'全部',value:"all"}, |
|||
{label:'橙色',value:"org"}, |
|||
{label:'红色',value:"red"}, |
|||
{label:'蓝色',value:"bule"}, |
|||
return { |
|||
colorSelect: "org", |
|||
colors: [ |
|||
{ label: '全部', value: "all" }, |
|||
{ label: '橙色', value: "org" }, |
|||
{ label: '红色', value: "red" }, |
|||
{ label: '蓝色', value: "bule" }, |
|||
], |
|||
warnings:[ |
|||
{ |
|||
type:"org", |
|||
class:"道路结冰", |
|||
lay:"橙色", |
|||
scope:"K100+000", |
|||
dateTime:"2023-12-31 13:00:00", |
|||
text:"威海市文登区气象台2023年12月21日7时30分将道路结冰黄色预警信号升级为道路结冰橙色预警信号：受降雪和低温影响，我区全部乡镇和街道仍有对交通有较大影响的道路结冰和积雪。请注意防范道路结冰对交通运输、室外作业、农业生产等带来的不利影响。" |
|||
}, |
|||
{ |
|||
type:"org", |
|||
class:"道路结冰", |
|||
lay:"橙色", |
|||
scope:"K100+000", |
|||
dateTime:"2023-12-31 13:00:00", |
|||
text:"威海市文登区气象台2023年12月21日7时30分将道路结冰黄色预警信号升级为道路结冰橙色预警信号：受降雪和低温影响，我区全部乡镇和街道仍有对交通有较大影响的道路结冰和积雪。请注意防范道路结冰对交通运输、室外作业、农业生产等带来的不利影响。" |
|||
}, |
|||
{ |
|||
type:"org", |
|||
class:"道路结冰", |
|||
lay:"橙色", |
|||
scope:"K100+000", |
|||
dateTime:"2023-12-31 13:00:00", |
|||
text:"威海市文登区气象台2023年12月21日7时30分将道路结冰黄色预警信号升级为道路结冰橙色预警信号：受降雪和低温影响，我区全部乡镇和街道仍有对交通有较大影响的道路结冰和积雪。请注意防范道路结冰对交通运输、室外作业、农业生产等带来的不利影响。" |
|||
}, |
|||
{ |
|||
type:"org", |
|||
class:"道路结冰", |
|||
lay:"橙色", |
|||
scope:"K100+000", |
|||
dateTime:"2023-12-31 13:00:00", |
|||
text:"威海市文登区气象台2023年12月21日7时30分将道路结冰黄色预警信号升级为道路结冰橙色预警信号：受降雪和低温影响，我区全部乡镇和街道仍有对交通有较大影响的道路结冰和积雪。请注意防范道路结冰对交通运输、室外作业、农业生产等带来的不利影响。" |
|||
} |
|||
] |
|||
} |
|||
warnings: [ |
|||
{ |
|||
type: "org", |
|||
class: "道路结冰", |
|||
lay: "橙色", |
|||
scope: "K100+000", |
|||
dateTime: "2023-12-31 13:00:00", |
|||
text: "威海市文登区气象台2023年12月21日7时30分将道路结冰黄色预警信号升级为道路结冰橙色预警信号：受降雪和低温影响，我区全部乡镇和街道仍有对交通有较大影响的道路结冰和积雪。请注意防范道路结冰对交通运输、室外作业、农业生产等带来的不利影响。" |
|||
}, |
|||
{ |
|||
type: "org", |
|||
class: "道路结冰", |
|||
lay: "橙色", |
|||
scope: "K100+000", |
|||
dateTime: "2023-12-31 13:00:00", |
|||
text: "威海市文登区气象台2023年12月21日7时30分将道路结冰黄色预警信号升级为道路结冰橙色预警信号：受降雪和低温影响，我区全部乡镇和街道仍有对交通有较大影响的道路结冰和积雪。请注意防范道路结冰对交通运输、室外作业、农业生产等带来的不利影响。" |
|||
}, |
|||
{ |
|||
type: "org", |
|||
class: "道路结冰", |
|||
lay: "橙色", |
|||
scope: "K100+000", |
|||
dateTime: "2023-12-31 13:00:00", |
|||
text: "威海市文登区气象台2023年12月21日7时30分将道路结冰黄色预警信号升级为道路结冰橙色预警信号：受降雪和低温影响，我区全部乡镇和街道仍有对交通有较大影响的道路结冰和积雪。请注意防范道路结冰对交通运输、室外作业、农业生产等带来的不利影响。" |
|||
}, |
|||
{ |
|||
type: "org", |
|||
class: "道路结冰", |
|||
lay: "橙色", |
|||
scope: "K100+000", |
|||
dateTime: "2023-12-31 13:00:00", |
|||
text: "威海市文登区气象台2023年12月21日7时30分将道路结冰黄色预警信号升级为道路结冰橙色预警信号：受降雪和低温影响，我区全部乡镇和街道仍有对交通有较大影响的道路结冰和积雪。请注意防范道路结冰对交通运输、室外作业、农业生产等带来的不利影响。" |
|||
} |
|||
] |
|||
} |
|||
}, |
|||
|
|||
|
|||
created() { |
|||
|
|||
|
|||
}, |
|||
methods: { |
|||
selectItem(index){ |
|||
this.selectIndex = index; |
|||
}, |
|||
selectItem(index) { |
|||
this.selectIndex = index; |
|||
}, |
|||
}, |
|||
mounted() { |
|||
|
|||
setTimeout(() => { |
|||
this.$nextTick(() => { |
|||
|
|||
|
|||
setTimeout(() => { |
|||
this.$nextTick(() => { |
|||
|
|||
}); |
|||
}); |
|||
}); |
|||
}, |
|||
} |
|||
</script> |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
|
|||
.selectRoad{ |
|||
width:89px; |
|||
margin-top:5px; |
|||
margin-left:20px; |
|||
border:1px solid #00B3CC; |
|||
::v-deep{ |
|||
.el-input__inner{ |
|||
background-color: #064258 !important; |
|||
border-width: 0px !important; |
|||
<style lang='scss' scoped> |
|||
.selectRoad { |
|||
width: 89px; |
|||
margin-top: 5px; |
|||
margin-left: 20px; |
|||
border: 1px solid #00B3CC; |
|||
|
|||
::v-deep { |
|||
.el-input__inner { |
|||
background-color: #064258 !important; |
|||
border-width: 0px !important; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.congestion { |
|||
.congestion { |
|||
display: inline-flex; |
|||
width: 100%; |
|||
height: 600px; |
|||
flex-direction: column; |
|||
width: 100%; |
|||
height:100%; |
|||
|
|||
.board{ |
|||
height: 690px; |
|||
width: 100%; |
|||
padding: 0px 0px; |
|||
border-radius: 5px 5px 5px 5px; |
|||
opacity: 1; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
flex-direction: column; |
|||
margin-top:20px; |
|||
|
|||
.warningList { |
|||
display: inline-flex; |
|||
flex-direction: column; |
|||
width:100%; |
|||
height:calc(100% - 40px); |
|||
|
|||
>div::after { |
|||
content: ""; |
|||
top:0; |
|||
left:-3px; |
|||
position: absolute; |
|||
width:0; |
|||
height:0; |
|||
border-right:6px solid transparent; |
|||
border-left: 6px solid transparent; |
|||
border-bottom:6px solid rgba(55, 231, 255, 1); |
|||
transform: rotate(-45deg); |
|||
} |
|||
height: 100%; |
|||
|
|||
>div::before { |
|||
content: ""; |
|||
bottom:0; |
|||
right:-3px; |
|||
position: absolute; |
|||
width:0; |
|||
height:0; |
|||
border-right:6px solid transparent; |
|||
border-left:6px solid transparent; |
|||
border-bottom:6px solid rgba(55, 231, 255, 1); |
|||
transform: rotate(135deg); |
|||
} |
|||
.board { |
|||
height: 690px; |
|||
width: 100%; |
|||
padding: 0px 0px; |
|||
border-radius: 5px 5px 5px 5px; |
|||
opacity: 1; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
flex-direction: column; |
|||
margin-top: 20px; |
|||
|
|||
>div { |
|||
position: relative; |
|||
.warningList { |
|||
display: inline-flex; |
|||
width:100%; |
|||
height:138px; |
|||
background: #133242; |
|||
border-radius: 2px 2px 2px 2px; |
|||
opacity: 1; |
|||
border: 1px solid; |
|||
border-image: linear-gradient(360deg, rgba(55, 231, 255, 0.2), rgba(55, 231, 255, 0)) 1 1; |
|||
margin-top:20px; |
|||
padding:23px 29px; |
|||
font-size: 14px; |
|||
font-family: PingFang SC, PingFang SC; |
|||
font-weight: 400; |
|||
color: #37E7FF; |
|||
|
|||
>.left-w { |
|||
flex-direction: column; |
|||
width: 100%; |
|||
height: calc(100% - 40px); |
|||
|
|||
>div::after { |
|||
content: ""; |
|||
top: 0; |
|||
left: -3px; |
|||
position: absolute; |
|||
width: 0; |
|||
height: 0; |
|||
border-right: 6px solid transparent; |
|||
border-left: 6px solid transparent; |
|||
border-bottom: 6px solid rgba(55, 231, 255, 1); |
|||
transform: rotate(-45deg); |
|||
} |
|||
|
|||
>div::before { |
|||
content: ""; |
|||
bottom: 0; |
|||
right: -3px; |
|||
position: absolute; |
|||
width: 0; |
|||
height: 0; |
|||
border-right: 6px solid transparent; |
|||
border-left: 6px solid transparent; |
|||
border-bottom: 6px solid rgba(55, 231, 255, 1); |
|||
transform: rotate(135deg); |
|||
} |
|||
|
|||
>div { |
|||
position: relative; |
|||
display: inline-flex; |
|||
width:40%; |
|||
height:100%; |
|||
flex-direction: column; |
|||
width: 100%; |
|||
height: 138px; |
|||
background: #133242; |
|||
border-radius: 2px 2px 2px 2px; |
|||
opacity: 1; |
|||
border: 1px solid; |
|||
border-image: linear-gradient(360deg, rgba(55, 231, 255, 0.2), rgba(55, 231, 255, 0)) 1 1; |
|||
margin-top: 20px; |
|||
padding: 23px 29px; |
|||
font-size: 14px; |
|||
font-family: PingFang SC, PingFang SC; |
|||
font-weight: 400; |
|||
color: #37E7FF; |
|||
|
|||
.left-row { |
|||
margin:2px; |
|||
>.left-w { |
|||
display: inline-flex; |
|||
width:100%; |
|||
height:30px; |
|||
flex-direction: row; |
|||
width: 40%; |
|||
height: 100%; |
|||
flex-direction: column; |
|||
|
|||
>.value { |
|||
color:#fff; |
|||
} |
|||
.left-row { |
|||
margin: 2px; |
|||
display: inline-flex; |
|||
width: 100%; |
|||
height: 30px; |
|||
flex-direction: row; |
|||
|
|||
>.value { |
|||
color: #fff; |
|||
} |
|||
|
|||
.org { |
|||
font-size: 12px !important; |
|||
.org { |
|||
font-size: 14px !important; |
|||
margin-top: 2px; |
|||
font-family: PangMenZhengDao; |
|||
font-weight: 400; |
|||
color: #F4A125 |
|||
} |
|||
|
|||
} |
|||
} |
|||
} |
|||
|
|||
>.right-w { |
|||
margin-left:30px; |
|||
display: inline-flex; |
|||
width:100%; |
|||
height:100%; |
|||
flex-direction: column; |
|||
>.right-w { |
|||
margin-left: 30px; |
|||
display: inline-flex; |
|||
width: 100%; |
|||
height: 100%; |
|||
flex-direction: column; |
|||
|
|||
.right-row { |
|||
margin-bottom: 10px; |
|||
} |
|||
|
|||
.right-text { |
|||
color:#fff; |
|||
.right-row { |
|||
margin-bottom: 10px; |
|||
} |
|||
|
|||
.right-text { |
|||
color: #fff; |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
} |
|||
} |
|||
|
|||
.weaterMain { |
|||
display: inline-flex; |
|||
flex-direction: row; |
|||
width:100%; |
|||
height: 40px; |
|||
.weaterMain { |
|||
display: inline-flex; |
|||
flex-direction: row; |
|||
width: 100%; |
|||
height: 40px; |
|||
|
|||
|
|||
.buttons { |
|||
width:100%; |
|||
height:38px; |
|||
margin-left:20px; |
|||
|
|||
>div { |
|||
display: inline-flex; |
|||
width:10%; |
|||
height:35px; |
|||
justify-content: center; |
|||
align-items: center; |
|||
font-size: 12px; |
|||
font-family: PangMenZhengDao; |
|||
font-weight: 800; |
|||
color: #FFFFFF; |
|||
z-index: 9; |
|||
} |
|||
.buttons { |
|||
width: 100%; |
|||
height: 38px; |
|||
margin-left: 20px; |
|||
|
|||
>div::after { |
|||
content: ""; |
|||
position: absolute; |
|||
display: inline-flex; |
|||
width: 55px; |
|||
height: 36px; |
|||
background: linear-gradient(180deg, #6557D7 0%, rgba(101,87,216,0) 100%); |
|||
border-radius: 50%; |
|||
opacity: 1; |
|||
z-index:-1; |
|||
cursor: pointer; |
|||
} |
|||
>div { |
|||
display: inline-flex; |
|||
width: 10%; |
|||
height: 35px; |
|||
justify-content: center; |
|||
align-items: center; |
|||
font-size: 12px; |
|||
font-family: PangMenZhengDao; |
|||
font-weight: 800; |
|||
color: #FFFFFF; |
|||
z-index: 9; |
|||
} |
|||
|
|||
.redSel::after { |
|||
background: linear-gradient(180deg, #E73A14 0%, rgba(240,92,9,0) 100%); |
|||
} |
|||
>div::after { |
|||
content: ""; |
|||
position: absolute; |
|||
display: inline-flex; |
|||
width: 55px; |
|||
height: 36px; |
|||
background: linear-gradient(180deg, #6557D7 0%, rgba(101, 87, 216, 0) 100%); |
|||
border-radius: 50%; |
|||
opacity: 1; |
|||
z-index: -1; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.yelSel::after { |
|||
background: linear-gradient(180deg, #FFFA79 0%, rgba(255,208,137,0) 100%); |
|||
} |
|||
.redSel::after { |
|||
background: linear-gradient(180deg, #E73A14 0%, rgba(240, 92, 9, 0) 100%); |
|||
} |
|||
|
|||
.bluSel::after { |
|||
background: linear-gradient(180deg, #121ADE 0%, rgba(40,18,228,0) 100%); |
|||
} |
|||
.yelSel::after { |
|||
background: linear-gradient(180deg, #FFFA79 0%, rgba(255, 208, 137, 0) 100%); |
|||
} |
|||
|
|||
.bluSel::after { |
|||
background: linear-gradient(180deg, #121ADE 0%, rgba(40, 18, 228, 0) 100%); |
|||
} |
|||
|
|||
.orgSel::after{ |
|||
background: linear-gradient(180deg, #FFA623 0%, rgba(255,173,53,0) 100%); |
|||
.orgSel::after { |
|||
background: linear-gradient(180deg, #FFA623 0%, rgba(255, 173, 53, 0) 100%); |
|||
} |
|||
} |
|||
} |
|||
|
|||
.weaterTitle::after { |
|||
content: ""; |
|||
position: absolute; |
|||
top:0px; |
|||
left:0px; |
|||
width:100%; |
|||
height:2px; |
|||
background: linear-gradient(90deg, rgba(189,255,246,0) 0%, #BDFFF6 52%, rgba(189,255,246,0) 100%); |
|||
border-radius: 0px 0px 0px 0px; |
|||
opacity: 1; |
|||
} |
|||
.weaterTitle::before { |
|||
content: ""; |
|||
position: absolute; |
|||
top:38px; |
|||
left:0px; |
|||
width:100%; |
|||
height:2px; |
|||
background: linear-gradient(90deg, rgba(189,255,246,0) 0%, #BDFFF6 52%, rgba(189,255,246,0) 100%); |
|||
border-radius: 0px 0px 0px 0px; |
|||
opacity: 1; |
|||
} |
|||
.weaterTitle::after { |
|||
content: ""; |
|||
position: absolute; |
|||
top: 0px; |
|||
left: 0px; |
|||
width: 100%; |
|||
height: 2px; |
|||
background: linear-gradient(90deg, rgba(189, 255, 246, 0) 0%, #BDFFF6 52%, rgba(189, 255, 246, 0) 100%); |
|||
border-radius: 0px 0px 0px 0px; |
|||
opacity: 1; |
|||
} |
|||
|
|||
.weaterTitle { |
|||
position: relative; |
|||
display: inline-flex; |
|||
width: 287px; |
|||
height: 38px; |
|||
background: linear-gradient(269deg, rgba(55,231,255,0) 6%, rgba(55,231,255,0.6) 50%, rgba(55,231,255,0) 92%); |
|||
border-radius: 0px 0px 0px 0px; |
|||
opacity: 1; |
|||
justify-content: center; |
|||
align-items: center; |
|||
margin-left:30px; |
|||
; |
|||
>span.text { |
|||
display: inline-flex; |
|||
font-size: 16px; |
|||
font-family: PingFang SC, PingFang SC; |
|||
font-weight: 400; |
|||
color: #FFFFFF; |
|||
.weaterTitle::before { |
|||
content: ""; |
|||
position: absolute; |
|||
top: 38px; |
|||
left: 0px; |
|||
width: 100%; |
|||
height: 2px; |
|||
background: linear-gradient(90deg, rgba(189, 255, 246, 0) 0%, #BDFFF6 52%, rgba(189, 255, 246, 0) 100%); |
|||
border-radius: 0px 0px 0px 0px; |
|||
opacity: 1; |
|||
} |
|||
|
|||
|
|||
.num { |
|||
.weaterTitle { |
|||
position: relative; |
|||
display: inline-flex; |
|||
width: 287px; |
|||
height: 38px; |
|||
background: linear-gradient(269deg, rgba(55, 231, 255, 0) 6%, rgba(55, 231, 255, 0.6) 50%, rgba(55, 231, 255, 0) 92%); |
|||
border-radius: 0px 0px 0px 0px; |
|||
opacity: 1; |
|||
justify-content: center; |
|||
align-items: center; |
|||
font-size: 20px; |
|||
font-family: PangMenZhengDao; |
|||
font-weight: 400; |
|||
color: #D9001B; |
|||
align-items: center; |
|||
margin-left: 30px; |
|||
; |
|||
|
|||
>span.text { |
|||
display: inline-flex; |
|||
font-size: 16px; |
|||
font-family: PingFang SC, PingFang SC; |
|||
font-weight: 400; |
|||
color: #FFFFFF; |
|||
} |
|||
|
|||
|
|||
.num { |
|||
display: inline-flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
font-size: 20px; |
|||
font-family: PangMenZhengDao; |
|||
font-weight: 400; |
|||
color: #D9001B; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
} |
|||
.charts { |
|||
height:180px; |
|||
width: 100%; |
|||
} |
|||
|
|||
</style> |
|||
} |
|||
|
|||
.charts { |
|||
height: 180px; |
|||
width: 100%; |
|||
} |
|||
</style> |
|||
|
|||
@ -1,382 +1,366 @@ |
|||
<template> |
|||
<div class='congestion'> |
|||
<WgtTitle :title="'能见度异常信息'"></WgtTitle> |
|||
<div class="board"> |
|||
<div class="weaterMain" > |
|||
<el-table |
|||
:border="false" |
|||
:data="tableData" |
|||
height="670" |
|||
style="width: 100%"> |
|||
<el-table-column |
|||
prop="nem" |
|||
label="" |
|||
width="30"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="address" |
|||
label="桩号范围" |
|||
width="230"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="name" |
|||
label="能见度" |
|||
class-name="showClass" |
|||
width="250"> |
|||
<template slot-scope="scope"> |
|||
<span class="showClass">{{scope.row.name}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="date" |
|||
label="发生时间" |
|||
width="230" |
|||
> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
</div> |
|||
<div class='congestion'> |
|||
<WgtTitle :title="'能见度异常信息'"></WgtTitle> |
|||
<div class="board"> |
|||
<div class="weaterMain"> |
|||
<el-table :border="false" :data="tableData" height="670" style="width: 100%"> |
|||
<el-table-column prop="nem" label="" width="30"> |
|||
</el-table-column> |
|||
<el-table-column prop="address" label="桩号范围" width="230"> |
|||
</el-table-column> |
|||
<el-table-column prop="name" label="能见度" class-name="showClass" width="250"> |
|||
<template slot-scope="scope"> |
|||
<span class="showClass">{{ scope.row.name }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="date" label="发生时间" width="230"> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import Card from "@screen/components/Card1/index.vue" |
|||
import WgtTitle from '../../../../../widgets/title' |
|||
|
|||
export default { |
|||
name: 'infoWarning', |
|||
components: { |
|||
WgtTitle |
|||
}, |
|||
data() { |
|||
return { |
|||
tableData: [{ |
|||
date: '2023-12-31 13:00:00', |
|||
name: '2640.78m', |
|||
address: 'K100+000-K110+000' |
|||
},{ |
|||
date: '2023-12-31 13:00:00', |
|||
name: '2640.78m', |
|||
address: 'K100+000-K110+000' |
|||
},{ |
|||
date: '2023-12-31 13:00:00', |
|||
name: '2640.78m', |
|||
address: 'K100+000-K110+000' |
|||
},{ |
|||
date: '2023-12-31 13:00:00', |
|||
name: '2640.78m', |
|||
address: 'K100+000-K110+000' |
|||
},{ |
|||
date: '2023-12-31 13:00:00', |
|||
name: '2640.78m', |
|||
address: 'K100+000-K110+000' |
|||
},{ |
|||
date: '2023-12-31 13:00:00', |
|||
name: '2640.78m', |
|||
address: 'K100+000-K110+000' |
|||
},{ |
|||
date: '2023-12-31 13:00:00', |
|||
name: '2640.78m', |
|||
address: 'K100+000-K110+000' |
|||
},{ |
|||
date: '2023-12-31 13:00:00', |
|||
name: '2640.78m', |
|||
address: 'K100+000-K110+000' |
|||
},{ |
|||
date: '2023-12-31 13:00:00', |
|||
name: '2640.78m', |
|||
address: 'K100+000-K110+000' |
|||
},{ |
|||
date: '2023-12-31 13:00:00', |
|||
name: '2640.78m', |
|||
address: 'K100+000-K110+000' |
|||
},{ |
|||
date: '2023-12-31 13:00:00', |
|||
name: '2640.78m', |
|||
address: 'K100+000-K110+000' |
|||
},{ |
|||
date: '2023-12-31 13:00:00', |
|||
name: '2640.78m', |
|||
address: 'K100+000-K110+000' |
|||
},{ |
|||
date: '2023-12-31 13:00:00', |
|||
name: '2640.78m', |
|||
address: 'K100+000-K110+000' |
|||
}, |
|||
] |
|||
} |
|||
}, |
|||
|
|||
created() { |
|||
|
|||
}, |
|||
methods: { |
|||
selectItem(index){ |
|||
this.selectIndex = index; |
|||
<script> |
|||
import Card from "@screen/components/Card1/index.vue" |
|||
import WgtTitle from '../../../../../widgets/title' |
|||
|
|||
export default { |
|||
name: 'infoWarning', |
|||
components: { |
|||
WgtTitle |
|||
}, |
|||
data() { |
|||
return { |
|||
tableData: [{ |
|||
date: '2023-12-31 13:00:00', |
|||
name: '2640.78m', |
|||
address: 'K100+000-K110+000' |
|||
}, { |
|||
date: '2023-12-31 13:00:00', |
|||
name: '2640.78m', |
|||
address: 'K100+000-K110+000' |
|||
}, { |
|||
date: '2023-12-31 13:00:00', |
|||
name: '2640.78m', |
|||
address: 'K100+000-K110+000' |
|||
}, { |
|||
date: '2023-12-31 13:00:00', |
|||
name: '2640.78m', |
|||
address: 'K100+000-K110+000' |
|||
}, { |
|||
date: '2023-12-31 13:00:00', |
|||
name: '2640.78m', |
|||
address: 'K100+000-K110+000' |
|||
}, { |
|||
date: '2023-12-31 13:00:00', |
|||
name: '2640.78m', |
|||
address: 'K100+000-K110+000' |
|||
}, { |
|||
date: '2023-12-31 13:00:00', |
|||
name: '2640.78m', |
|||
address: 'K100+000-K110+000' |
|||
}, { |
|||
date: '2023-12-31 13:00:00', |
|||
name: '2640.78m', |
|||
address: 'K100+000-K110+000' |
|||
}, { |
|||
date: '2023-12-31 13:00:00', |
|||
name: '2640.78m', |
|||
address: 'K100+000-K110+000' |
|||
}, { |
|||
date: '2023-12-31 13:00:00', |
|||
name: '2640.78m', |
|||
address: 'K100+000-K110+000' |
|||
}, { |
|||
date: '2023-12-31 13:00:00', |
|||
name: '2640.78m', |
|||
address: 'K100+000-K110+000' |
|||
}, { |
|||
date: '2023-12-31 13:00:00', |
|||
name: '2640.78m', |
|||
address: 'K100+000-K110+000' |
|||
}, { |
|||
date: '2023-12-31 13:00:00', |
|||
name: '2640.78m', |
|||
address: 'K100+000-K110+000' |
|||
}, |
|||
}, |
|||
mounted() { |
|||
|
|||
setTimeout(() => { |
|||
this.$nextTick(() => { |
|||
|
|||
}); |
|||
}); |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
|
|||
.showClass { |
|||
color:#00EBC1; |
|||
] |
|||
} |
|||
}, |
|||
|
|||
::v-deep .el-table .cell { |
|||
padding-left:0px !important; |
|||
} |
|||
|
|||
::v-deep .el-table .el-table__header-wrapper th { |
|||
background-color: #064258 !important; |
|||
color:#00D1FF; |
|||
border-color: #064258 !important; |
|||
border:0px !important; |
|||
font-size:12px !important; |
|||
} |
|||
|
|||
::v-deep .el-table { |
|||
border:0px !important; |
|||
background-color: transparent; |
|||
font-size:12px !important; |
|||
} |
|||
|
|||
::v-deep .el-table__body-wrapper { |
|||
background-color: #064258; |
|||
color: #fff; |
|||
} |
|||
|
|||
::v-deep .el-table tr:hover td { |
|||
background: #1b2528 !important; |
|||
color:#00D1FF; |
|||
} |
|||
created() { |
|||
|
|||
::v-deep .el-table tr:nth-child(odd) td{ |
|||
background-color: #13272F ; |
|||
border:0px !important; |
|||
} |
|||
::v-deep .el-table tr:nth-child(even) td{ |
|||
border:0px !important; |
|||
} |
|||
}, |
|||
methods: { |
|||
selectItem(index) { |
|||
this.selectIndex = index; |
|||
}, |
|||
}, |
|||
mounted() { |
|||
|
|||
::v-deep .el-table tr { |
|||
background-color: #133242 !important; |
|||
border-collapse:0; |
|||
border:0px !important; |
|||
background-color: transparent !important; |
|||
} |
|||
setTimeout(() => { |
|||
this.$nextTick(() => { |
|||
|
|||
.congestion { |
|||
display: inline-flex; |
|||
}); |
|||
}); |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
.showClass { |
|||
color: #00EBC1; |
|||
} |
|||
|
|||
::v-deep .el-table .cell { |
|||
padding-left: 0px !important; |
|||
} |
|||
|
|||
::v-deep .el-table .el-table__header-wrapper th { |
|||
background-color: #064258 !important; |
|||
color: #00D1FF; |
|||
border-color: #064258 !important; |
|||
border: 0px !important; |
|||
font-size: 12px !important; |
|||
} |
|||
|
|||
::v-deep .el-table { |
|||
border: 0px !important; |
|||
background-color: transparent; |
|||
font-size: 14px !important; |
|||
} |
|||
|
|||
::v-deep .el-table__body-wrapper { |
|||
background-color: #064258; |
|||
color: #fff; |
|||
} |
|||
|
|||
::v-deep .el-table tr:hover td { |
|||
background: #1b2528 !important; |
|||
color: #00D1FF; |
|||
} |
|||
|
|||
::v-deep .el-table tr:nth-child(odd) td { |
|||
background-color: #13272F; |
|||
border: 0px !important; |
|||
} |
|||
|
|||
::v-deep .el-table tr:nth-child(even) td { |
|||
border: 0px !important; |
|||
} |
|||
|
|||
::v-deep .el-table tr { |
|||
background-color: #133242 !important; |
|||
border-collapse: 0; |
|||
border: 0px !important; |
|||
background-color: transparent !important; |
|||
} |
|||
|
|||
.congestion { |
|||
display: inline-flex; |
|||
width: 100%; |
|||
height: 600px; |
|||
flex-direction: column; |
|||
|
|||
.board { |
|||
height: 670px; |
|||
width: 100%; |
|||
height: 600px; |
|||
padding: 0px 0px; |
|||
border-radius: 5px 5px 5px 5px; |
|||
opacity: 1; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
flex-direction: column; |
|||
margin-top: 20px; |
|||
|
|||
.board{ |
|||
height: 670px; |
|||
width: 100%; |
|||
padding: 0px 0px; |
|||
border-radius: 5px 5px 5px 5px; |
|||
opacity: 1; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
flex-direction: column; |
|||
margin-top:20px; |
|||
|
|||
|
|||
|
|||
.warningList { |
|||
display: inline-flex; |
|||
flex-direction: column; |
|||
width:100%; |
|||
height:calc(100% - 40px); |
|||
.warningList { |
|||
display: inline-flex; |
|||
flex-direction: column; |
|||
width: 100%; |
|||
height: calc(100% - 40px); |
|||
|
|||
>div { |
|||
>div { |
|||
display: inline-flex; |
|||
width: 100%; |
|||
height: 138px; |
|||
background: #133242; |
|||
border-radius: 2px 2px 2px 2px; |
|||
opacity: 1; |
|||
border: 1px solid; |
|||
border-image: linear-gradient(360deg, rgba(55, 231, 255, 1), rgba(55, 231, 255, 0)) 1 1; |
|||
overflow: hidden; |
|||
margin-top: 20px; |
|||
padding: 23px 29px; |
|||
font-size: 14px; |
|||
font-family: PingFang SC, PingFang SC; |
|||
font-weight: 400; |
|||
color: #37E7FF; |
|||
|
|||
>.left-w { |
|||
display: inline-flex; |
|||
width: 40%; |
|||
height: 100%; |
|||
flex-direction: column; |
|||
|
|||
.left-row { |
|||
margin: 2px; |
|||
display: inline-flex; |
|||
width:100%; |
|||
height:138px; |
|||
background: #133242; |
|||
border-radius: 2px 2px 2px 2px; |
|||
opacity: 1; |
|||
border: 1px solid; |
|||
border-image: linear-gradient(360deg, rgba(55, 231, 255, 1), rgba(55, 231, 255, 0)) 1 1; |
|||
overflow: hidden; |
|||
margin-top:20px; |
|||
padding:23px 29px; |
|||
font-size: 14px; |
|||
font-family: PingFang SC, PingFang SC; |
|||
font-weight: 400; |
|||
color: #37E7FF; |
|||
|
|||
>.left-w { |
|||
display: inline-flex; |
|||
width:40%; |
|||
height:100%; |
|||
flex-direction: column; |
|||
|
|||
.left-row { |
|||
margin:2px; |
|||
display: inline-flex; |
|||
width:100%; |
|||
height:30px; |
|||
flex-direction: row; |
|||
|
|||
>.value { |
|||
color:#fff; |
|||
} |
|||
|
|||
.org { |
|||
font-size: 14px; |
|||
font-family: PangMenZhengDao; |
|||
font-weight: 400; |
|||
color: #F4A125 |
|||
} |
|||
|
|||
} |
|||
width: 100%; |
|||
height: 30px; |
|||
flex-direction: row; |
|||
|
|||
>.value { |
|||
color: #fff; |
|||
} |
|||
|
|||
>.right-w { |
|||
margin-left:30px; |
|||
display: inline-flex; |
|||
width:100%; |
|||
height:100%; |
|||
flex-direction: column; |
|||
|
|||
.right-row { |
|||
margin-bottom: 10px; |
|||
} |
|||
|
|||
.right-text { |
|||
color:#fff; |
|||
} |
|||
.org { |
|||
font-size: 14px; |
|||
font-family: PangMenZhengDao; |
|||
font-weight: 400; |
|||
color: #F4A125 |
|||
} |
|||
|
|||
} |
|||
} |
|||
} |
|||
|
|||
.weaterMain { |
|||
display: inline-flex; |
|||
flex-direction: row; |
|||
width:100%; |
|||
height: 40px; |
|||
|
|||
|
|||
.buttons { |
|||
width:100%; |
|||
height:38px; |
|||
>div { |
|||
display: inline-flex; |
|||
width:10%; |
|||
height:35px; |
|||
justify-content: center; |
|||
align-items: center; |
|||
font-size: 12px; |
|||
font-family: PangMenZhengDao; |
|||
font-weight: 800; |
|||
color: #FFFFFF; |
|||
z-index: 9; |
|||
} |
|||
>.right-w { |
|||
margin-left: 30px; |
|||
display: inline-flex; |
|||
width: 100%; |
|||
height: 100%; |
|||
flex-direction: column; |
|||
|
|||
>div::after { |
|||
content: ""; |
|||
position: absolute; |
|||
display: inline-flex; |
|||
width: 55px; |
|||
height: 36px; |
|||
background: linear-gradient(180deg, #6557D7 0%, rgba(101,87,216,0) 100%); |
|||
border-radius: 50%; |
|||
opacity: 1; |
|||
z-index:-1; |
|||
} |
|||
.right-row { |
|||
margin-bottom: 10px; |
|||
} |
|||
|
|||
.redSel::after { |
|||
background: linear-gradient(180deg, #E73A14 0%, rgba(240,92,9,0) 100%); |
|||
} |
|||
.right-text { |
|||
color: #fff; |
|||
} |
|||
} |
|||
|
|||
.yelSel::after { |
|||
background: linear-gradient(180deg, #FFFA79 0%, rgba(255,208,137,0) 100%); |
|||
} |
|||
} |
|||
} |
|||
|
|||
.bluSel::after { |
|||
background: linear-gradient(180deg, #121ADE 0%, rgba(40,18,228,0) 100%); |
|||
} |
|||
.weaterMain { |
|||
display: inline-flex; |
|||
flex-direction: row; |
|||
width: 100%; |
|||
height: 40px; |
|||
|
|||
.orgSel::after{ |
|||
background: linear-gradient(180deg, #FFA623 0%, rgba(255,173,53,0) 100%); |
|||
} |
|||
|
|||
.buttons { |
|||
width: 100%; |
|||
height: 38px; |
|||
|
|||
>div { |
|||
display: inline-flex; |
|||
width: 10%; |
|||
height: 35px; |
|||
justify-content: center; |
|||
align-items: center; |
|||
font-size: 12px; |
|||
font-family: PangMenZhengDao; |
|||
font-weight: 800; |
|||
color: #FFFFFF; |
|||
z-index: 9; |
|||
} |
|||
|
|||
.weaterTitle::after { |
|||
content: ""; |
|||
position: absolute; |
|||
top:0px; |
|||
left:0px; |
|||
width:100%; |
|||
height:2px; |
|||
background: linear-gradient(90deg, rgba(189,255,246,0) 0%, #BDFFF6 52%, rgba(189,255,246,0) 100%); |
|||
border-radius: 0px 0px 0px 0px; |
|||
opacity: 1; |
|||
>div::after { |
|||
content: ""; |
|||
position: absolute; |
|||
display: inline-flex; |
|||
width: 55px; |
|||
height: 36px; |
|||
background: linear-gradient(180deg, #6557D7 0%, rgba(101, 87, 216, 0) 100%); |
|||
border-radius: 50%; |
|||
opacity: 1; |
|||
z-index: -1; |
|||
} |
|||
.weaterTitle::before { |
|||
content: ""; |
|||
position: absolute; |
|||
top:38px; |
|||
left:0px; |
|||
width:100%; |
|||
height:2px; |
|||
background: linear-gradient(90deg, rgba(189,255,246,0) 0%, #BDFFF6 52%, rgba(189,255,246,0) 100%); |
|||
border-radius: 0px 0px 0px 0px; |
|||
opacity: 1; |
|||
|
|||
.redSel::after { |
|||
background: linear-gradient(180deg, #E73A14 0%, rgba(240, 92, 9, 0) 100%); |
|||
} |
|||
|
|||
.weaterTitle { |
|||
position: relative; |
|||
display: inline-flex; |
|||
width: 277px; |
|||
height: 38px; |
|||
background: linear-gradient(269deg, rgba(55,231,255,0) 6%, rgba(55,231,255,0.6) 50%, rgba(55,231,255,0) 92%); |
|||
border-radius: 0px 0px 0px 0px; |
|||
opacity: 1; |
|||
justify-content: center; |
|||
align-items: center; |
|||
|
|||
>span.text { |
|||
display: inline-flex; |
|||
font-size: 16px; |
|||
font-family: PangMenZhengDao; |
|||
font-weight: 400; |
|||
color: #FFFFFF; |
|||
} |
|||
.yelSel::after { |
|||
background: linear-gradient(180deg, #FFFA79 0%, rgba(255, 208, 137, 0) 100%); |
|||
} |
|||
|
|||
|
|||
.num { |
|||
display: inline-flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
font-size: 22px; |
|||
font-family: PangMenZhengDao; |
|||
font-weight: 400; |
|||
color: #D9001B; |
|||
} |
|||
.bluSel::after { |
|||
background: linear-gradient(180deg, #121ADE 0%, rgba(40, 18, 228, 0) 100%); |
|||
} |
|||
|
|||
.orgSel::after { |
|||
background: linear-gradient(180deg, #FFA623 0%, rgba(255, 173, 53, 0) 100%); |
|||
} |
|||
} |
|||
|
|||
} |
|||
} |
|||
.charts { |
|||
height:180px; |
|||
.weaterTitle::after { |
|||
content: ""; |
|||
position: absolute; |
|||
top: 0px; |
|||
left: 0px; |
|||
width: 100%; |
|||
height: 2px; |
|||
background: linear-gradient(90deg, rgba(189, 255, 246, 0) 0%, #BDFFF6 52%, rgba(189, 255, 246, 0) 100%); |
|||
border-radius: 0px 0px 0px 0px; |
|||
opacity: 1; |
|||
} |
|||
|
|||
</style> |
|||
|
|||
.weaterTitle::before { |
|||
content: ""; |
|||
position: absolute; |
|||
top: 38px; |
|||
left: 0px; |
|||
width: 100%; |
|||
height: 2px; |
|||
background: linear-gradient(90deg, rgba(189, 255, 246, 0) 0%, #BDFFF6 52%, rgba(189, 255, 246, 0) 100%); |
|||
border-radius: 0px 0px 0px 0px; |
|||
opacity: 1; |
|||
} |
|||
|
|||
.weaterTitle { |
|||
position: relative; |
|||
display: inline-flex; |
|||
width: 277px; |
|||
height: 38px; |
|||
background: linear-gradient(269deg, rgba(55, 231, 255, 0) 6%, rgba(55, 231, 255, 0.6) 50%, rgba(55, 231, 255, 0) 92%); |
|||
border-radius: 0px 0px 0px 0px; |
|||
opacity: 1; |
|||
justify-content: center; |
|||
align-items: center; |
|||
|
|||
>span.text { |
|||
display: inline-flex; |
|||
font-size: 16px; |
|||
font-family: PangMenZhengDao; |
|||
font-weight: 400; |
|||
color: #FFFFFF; |
|||
} |
|||
|
|||
|
|||
.num { |
|||
display: inline-flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
font-size: 22px; |
|||
font-family: PangMenZhengDao; |
|||
font-weight: 400; |
|||
color: #D9001B; |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
} |
|||
|
|||
.charts { |
|||
height: 180px; |
|||
width: 100%; |
|||
} |
|||
</style> |
|||
|
|||
Loading…
Reference in new issue