|
|
@ -1,149 +1,167 @@ |
|
|
<template> |
|
|
<template> |
|
|
<div class='congestion'> |
|
|
<div class="congestion"> |
|
|
<WgtTitle :title="'气象预警信息'"></WgtTitle> |
|
|
<WgtTitle :title="'气象预警信息'"></WgtTitle> |
|
|
<div class="board"> |
|
|
<div class="board"> |
|
|
<div class="weaterMain"> |
|
|
<div class="weaterMain"> |
|
|
<div class="weaterTitle"> |
|
|
<div class="weaterTitle"> |
|
|
<span class="text">当前气象预警信息数：</span> |
|
|
<span class="text">当前气象预警信息数：</span> |
|
|
<span class="num">113</span> |
|
|
<span class="num">{{ warningData.length }}</span> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<div> |
|
|
<el-select v-model="colorSelect" size="mini" class="selectRoad" placeholder="请选择"> |
|
|
<el-select |
|
|
<el-option v-for="item in colors" :key="item.value" :label="item.label" :value="item.value"> |
|
|
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-option> |
|
|
</el-select> |
|
|
</el-select> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="warningList"> |
|
|
<div class="warningList" v-if="warningList.length > 0"> |
|
|
<div class="itemWarning" v-for="(item, i) in warnings"> |
|
|
<div class="itemWarning" v-for="item in warningList"> |
|
|
<div class="left-w"> |
|
|
<div class="left-w"> |
|
|
<div class="left-row"> |
|
|
<div class="left-row"> |
|
|
<div class="label"> |
|
|
<div class="label">预警类型：</div> |
|
|
预警类型： |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="value"> |
|
|
<div class="value"> |
|
|
{{ item.class }} |
|
|
{{ item.typeName }} |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="left-row"> |
|
|
<div class="left-row"> |
|
|
<div class="label"> |
|
|
<div class="label">预警等级：</div> |
|
|
预警等级： |
|
|
<div :class="item.severityColor"> |
|
|
</div> |
|
|
{{ item.severityColor }} |
|
|
<div :class="'value ' + item.type"> |
|
|
{{ |
|
|
{{ item.lay }} |
|
|
item.severity == "Cancel" |
|
|
|
|
|
? "取消" |
|
|
|
|
|
: item.severity == "None" |
|
|
|
|
|
? "无" |
|
|
|
|
|
: item.severity == "Unknown" |
|
|
|
|
|
? "未知" |
|
|
|
|
|
: item.severity == "Standard" |
|
|
|
|
|
? "标准" |
|
|
|
|
|
: item.severity == "Minor" |
|
|
|
|
|
? "次要" |
|
|
|
|
|
: item.severity == "Moderate" |
|
|
|
|
|
? "温和" |
|
|
|
|
|
: item.severity == "Major" |
|
|
|
|
|
? "主要" |
|
|
|
|
|
: item.severity == "Severe" |
|
|
|
|
|
? "严峻" |
|
|
|
|
|
: item.severity == "Extreme" |
|
|
|
|
|
? "极端" |
|
|
|
|
|
: "" |
|
|
|
|
|
}} |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="left-row"> |
|
|
<!-- <div class="left-row"> |
|
|
<div class="label"> |
|
|
<div class="label">预警范围：</div> |
|
|
预警范围： |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="value"> |
|
|
<div class="value"> |
|
|
{{ item.scope }} |
|
|
{{ item.scope }} |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> --> |
|
|
<div class="left-row"> |
|
|
<div class="left-row"> |
|
|
<div class="label"> |
|
|
<div class="label">预警发布时间：</div> |
|
|
预警发布时间： |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="value"> |
|
|
<div class="value"> |
|
|
{{ item.dateTime }} |
|
|
{{ item.pubTime }} |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="right-w"> |
|
|
<div class="right-w"> |
|
|
<div class="right-row"> |
|
|
<div class="right-row">预警内容:</div> |
|
|
预警内容: |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="right-text"> |
|
|
<div class="right-text"> |
|
|
{{ item.text }} |
|
|
{{ item.text }} |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<Empty v-else text="暂无数据..."></Empty> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</template> |
|
|
</template> |
|
|
|
|
|
|
|
|
<script> |
|
|
<script> |
|
|
import { color } from 'echarts'; |
|
|
import { color } from "echarts"; |
|
|
import WgtTitle from '../../../../../widgets/title' |
|
|
import WgtTitle from "../../../../../widgets/title"; |
|
|
|
|
|
import { getMeteorologicalEarlyWarning } from "@/api/perception/meteorologyCheck"; |
|
|
|
|
|
|
|
|
export default { |
|
|
export default { |
|
|
name: 'infoWarning', |
|
|
name: "infoWarning", |
|
|
components: { |
|
|
components: { |
|
|
WgtTitle |
|
|
WgtTitle, |
|
|
}, |
|
|
}, |
|
|
data() { |
|
|
data() { |
|
|
return { |
|
|
return { |
|
|
colorSelect: "org", |
|
|
warningList: [], |
|
|
|
|
|
warningData: [ |
|
|
|
|
|
// { typeName: "warning", severityColor: "Red", severity: "Severe" }, |
|
|
|
|
|
// { typeName: "warning", severityColor: "White", severity: "白色" }, |
|
|
|
|
|
// { typeName: "warning", severityColor: "Blue", severity: "蓝色" }, |
|
|
|
|
|
], |
|
|
|
|
|
colorSelect: "all", |
|
|
colors: [ |
|
|
colors: [ |
|
|
{ label: '全部', value: "all" }, |
|
|
{ label: "全部", value: "all" }, |
|
|
{ label: '橙色', value: "org" }, |
|
|
{ label: "白色", value: "White" }, |
|
|
{ label: '红色', value: "red" }, |
|
|
{ label: "蓝色", value: "Blue" }, |
|
|
{ label: '蓝色', value: "bule" }, |
|
|
{ label: "绿色", value: "Green" }, |
|
|
|
|
|
{ label: "黄色", value: "Yellow" }, |
|
|
|
|
|
{ label: "橙色", value: "Orange" }, |
|
|
|
|
|
{ label: "红色", value: "Red" }, |
|
|
|
|
|
{ label: "黑色", value: "Black" }, |
|
|
], |
|
|
], |
|
|
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分将道路结冰黄色预警信号升级为道路结冰橙色预警信号：受降雪和低温影响，我区全部乡镇和街道仍有对交通有较大影响的道路结冰和积雪。请注意防范道路结冰对交通运输、室外作业、农业生产等带来的不利影响。" |
|
|
|
|
|
}, |
|
|
}, |
|
|
{ |
|
|
watch: { |
|
|
type: "org", |
|
|
colorSelect(val) { |
|
|
class: "道路结冰", |
|
|
if (val !== "all") { |
|
|
lay: "橙色", |
|
|
const data = this.warningData.filter( |
|
|
scope: "K100+000", |
|
|
(item) => item.severityColor === val |
|
|
dateTime: "2023-12-31 13:00:00", |
|
|
); |
|
|
text: "威海市文登区气象台2023年12月21日7时30分将道路结冰黄色预警信号升级为道路结冰橙色预警信号：受降雪和低温影响，我区全部乡镇和街道仍有对交通有较大影响的道路结冰和积雪。请注意防范道路结冰对交通运输、室外作业、农业生产等带来的不利影响。" |
|
|
this.warningList = data; |
|
|
|
|
|
this.warningList = data; |
|
|
|
|
|
} else { |
|
|
|
|
|
this.warningList = this.warningData; |
|
|
} |
|
|
} |
|
|
] |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
created() { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// this.changeValue(val); |
|
|
}, |
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
created() {}, |
|
|
methods: { |
|
|
methods: { |
|
|
selectItem(index) { |
|
|
getWarningData() { |
|
|
this.selectIndex = index; |
|
|
getMeteorologicalEarlyWarning().then((res) => { |
|
|
|
|
|
console.log("气象预警", res.data); |
|
|
|
|
|
let data = []; |
|
|
|
|
|
for (let key in res.data) { |
|
|
|
|
|
if (res.data[key].length > 0) { |
|
|
|
|
|
res.data[key].forEach((value) => { |
|
|
|
|
|
data.push(value); |
|
|
|
|
|
}); |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
this.warningData = data; |
|
|
|
|
|
this.warningList = this.warningData; |
|
|
|
|
|
}); |
|
|
}, |
|
|
}, |
|
|
}, |
|
|
}, |
|
|
mounted() { |
|
|
mounted() { |
|
|
|
|
|
this.getWarningData(); |
|
|
setTimeout(() => { |
|
|
|
|
|
this.$nextTick(() => { |
|
|
|
|
|
|
|
|
|
|
|
}); |
|
|
|
|
|
}); |
|
|
|
|
|
}, |
|
|
}, |
|
|
} |
|
|
}; |
|
|
</script> |
|
|
</script> |
|
|
|
|
|
|
|
|
<style lang='scss' scoped> |
|
|
<style lang="scss" scoped> |
|
|
.selectRoad { |
|
|
.selectRoad { |
|
|
width: 89px; |
|
|
width: 89px; |
|
|
margin-top: 5px; |
|
|
margin-top: 5px; |
|
|
margin-left: 20px; |
|
|
margin-left: 20px; |
|
|
border: 1px solid #00B3CC; |
|
|
border: 1px solid #00b3cc; |
|
|
|
|
|
|
|
|
::v-deep { |
|
|
::v-deep { |
|
|
.el-input__inner { |
|
|
.el-input__inner { |
|
|
@ -179,7 +197,7 @@ export default { |
|
|
width: 100%; |
|
|
width: 100%; |
|
|
height: calc(100% - 40px); |
|
|
height: calc(100% - 40px); |
|
|
|
|
|
|
|
|
>div::after { |
|
|
> div::after { |
|
|
content: ""; |
|
|
content: ""; |
|
|
top: 0; |
|
|
top: 0; |
|
|
left: -3px; |
|
|
left: -3px; |
|
|
@ -192,7 +210,7 @@ export default { |
|
|
transform: rotate(-45deg); |
|
|
transform: rotate(-45deg); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
>div::before { |
|
|
> div::before { |
|
|
content: ""; |
|
|
content: ""; |
|
|
bottom: 0; |
|
|
bottom: 0; |
|
|
right: -3px; |
|
|
right: -3px; |
|
|
@ -205,7 +223,7 @@ export default { |
|
|
transform: rotate(135deg); |
|
|
transform: rotate(135deg); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
>div { |
|
|
> div { |
|
|
position: relative; |
|
|
position: relative; |
|
|
display: inline-flex; |
|
|
display: inline-flex; |
|
|
width: 100%; |
|
|
width: 100%; |
|
|
@ -214,15 +232,20 @@ export default { |
|
|
border-radius: 2px 2px 2px 2px; |
|
|
border-radius: 2px 2px 2px 2px; |
|
|
opacity: 1; |
|
|
opacity: 1; |
|
|
border: 1px solid; |
|
|
border: 1px solid; |
|
|
border-image: linear-gradient(360deg, rgba(55, 231, 255, 0.2), rgba(55, 231, 255, 0)) 1 1; |
|
|
border-image: linear-gradient( |
|
|
|
|
|
360deg, |
|
|
|
|
|
rgba(55, 231, 255, 0.2), |
|
|
|
|
|
rgba(55, 231, 255, 0) |
|
|
|
|
|
) |
|
|
|
|
|
1 1; |
|
|
margin-top: 20px; |
|
|
margin-top: 20px; |
|
|
padding: 23px 29px; |
|
|
padding: 23px 29px; |
|
|
font-size: 14px; |
|
|
font-size: 14px; |
|
|
font-family: PingFang SC, PingFang SC; |
|
|
font-family: PingFang SC, PingFang SC; |
|
|
font-weight: 400; |
|
|
font-weight: 400; |
|
|
color: #37E7FF; |
|
|
color: #37e7ff; |
|
|
|
|
|
|
|
|
>.left-w { |
|
|
> .left-w { |
|
|
display: inline-flex; |
|
|
display: inline-flex; |
|
|
width: 40%; |
|
|
width: 40%; |
|
|
height: 100%; |
|
|
height: 100%; |
|
|
@ -235,7 +258,7 @@ export default { |
|
|
height: 30px; |
|
|
height: 30px; |
|
|
flex-direction: row; |
|
|
flex-direction: row; |
|
|
|
|
|
|
|
|
>.value { |
|
|
> .value { |
|
|
color: #fff; |
|
|
color: #fff; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
@ -244,13 +267,33 @@ export default { |
|
|
margin-top: 2px; |
|
|
margin-top: 2px; |
|
|
font-family: PangMenZhengDao; |
|
|
font-family: PangMenZhengDao; |
|
|
font-weight: 400; |
|
|
font-weight: 400; |
|
|
color: #F4A125 |
|
|
color: #f4a125; |
|
|
|
|
|
} |
|
|
|
|
|
.White { |
|
|
|
|
|
color: #fff; |
|
|
|
|
|
} |
|
|
|
|
|
.Blue { |
|
|
|
|
|
color: blue; |
|
|
|
|
|
} |
|
|
|
|
|
.Green { |
|
|
|
|
|
color: green; |
|
|
|
|
|
} |
|
|
|
|
|
.Yellow { |
|
|
|
|
|
color: yellow; |
|
|
|
|
|
} |
|
|
|
|
|
.Orange { |
|
|
|
|
|
color: orange; |
|
|
|
|
|
} |
|
|
|
|
|
.Red { |
|
|
|
|
|
color: red; |
|
|
|
|
|
} |
|
|
|
|
|
.Black { |
|
|
|
|
|
color: #000; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
>.right-w { |
|
|
> .right-w { |
|
|
margin-left: 30px; |
|
|
margin-left: 30px; |
|
|
display: inline-flex; |
|
|
display: inline-flex; |
|
|
width: 100%; |
|
|
width: 100%; |
|
|
@ -265,7 +308,6 @@ export default { |
|
|
color: #fff; |
|
|
color: #fff; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
@ -275,13 +317,12 @@ export default { |
|
|
width: 100%; |
|
|
width: 100%; |
|
|
height: 40px; |
|
|
height: 40px; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.buttons { |
|
|
.buttons { |
|
|
width: 100%; |
|
|
width: 100%; |
|
|
height: 38px; |
|
|
height: 38px; |
|
|
margin-left: 20px; |
|
|
margin-left: 20px; |
|
|
|
|
|
|
|
|
>div { |
|
|
> div { |
|
|
display: inline-flex; |
|
|
display: inline-flex; |
|
|
width: 10%; |
|
|
width: 10%; |
|
|
height: 35px; |
|
|
height: 35px; |
|
|
@ -290,17 +331,21 @@ export default { |
|
|
font-size: 12px; |
|
|
font-size: 12px; |
|
|
font-family: PangMenZhengDao; |
|
|
font-family: PangMenZhengDao; |
|
|
font-weight: 800; |
|
|
font-weight: 800; |
|
|
color: #FFFFFF; |
|
|
color: #ffffff; |
|
|
z-index: 9; |
|
|
z-index: 9; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
>div::after { |
|
|
> div::after { |
|
|
content: ""; |
|
|
content: ""; |
|
|
position: absolute; |
|
|
position: absolute; |
|
|
display: inline-flex; |
|
|
display: inline-flex; |
|
|
width: 55px; |
|
|
width: 55px; |
|
|
height: 36px; |
|
|
height: 36px; |
|
|
background: linear-gradient(180deg, #6557D7 0%, rgba(101, 87, 216, 0) 100%); |
|
|
background: linear-gradient( |
|
|
|
|
|
180deg, |
|
|
|
|
|
#6557d7 0%, |
|
|
|
|
|
rgba(101, 87, 216, 0) 100% |
|
|
|
|
|
); |
|
|
border-radius: 50%; |
|
|
border-radius: 50%; |
|
|
opacity: 1; |
|
|
opacity: 1; |
|
|
z-index: -1; |
|
|
z-index: -1; |
|
|
@ -308,19 +353,35 @@ export default { |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.redSel::after { |
|
|
.redSel::after { |
|
|
background: linear-gradient(180deg, #E73A14 0%, rgba(240, 92, 9, 0) 100%); |
|
|
background: linear-gradient( |
|
|
|
|
|
180deg, |
|
|
|
|
|
#e73a14 0%, |
|
|
|
|
|
rgba(240, 92, 9, 0) 100% |
|
|
|
|
|
); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.yelSel::after { |
|
|
.yelSel::after { |
|
|
background: linear-gradient(180deg, #FFFA79 0%, rgba(255, 208, 137, 0) 100%); |
|
|
background: linear-gradient( |
|
|
|
|
|
180deg, |
|
|
|
|
|
#fffa79 0%, |
|
|
|
|
|
rgba(255, 208, 137, 0) 100% |
|
|
|
|
|
); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.bluSel::after { |
|
|
.bluSel::after { |
|
|
background: linear-gradient(180deg, #121ADE 0%, rgba(40, 18, 228, 0) 100%); |
|
|
background: linear-gradient( |
|
|
|
|
|
180deg, |
|
|
|
|
|
#121ade 0%, |
|
|
|
|
|
rgba(40, 18, 228, 0) 100% |
|
|
|
|
|
); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.orgSel::after { |
|
|
.orgSel::after { |
|
|
background: linear-gradient(180deg, #FFA623 0%, rgba(255, 173, 53, 0) 100%); |
|
|
background: linear-gradient( |
|
|
|
|
|
180deg, |
|
|
|
|
|
#ffa623 0%, |
|
|
|
|
|
rgba(255, 173, 53, 0) 100% |
|
|
|
|
|
); |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
@ -331,7 +392,12 @@ export default { |
|
|
left: 0px; |
|
|
left: 0px; |
|
|
width: 100%; |
|
|
width: 100%; |
|
|
height: 2px; |
|
|
height: 2px; |
|
|
background: linear-gradient(90deg, rgba(189, 255, 246, 0) 0%, #BDFFF6 52%, rgba(189, 255, 246, 0) 100%); |
|
|
background: linear-gradient( |
|
|
|
|
|
90deg, |
|
|
|
|
|
rgba(189, 255, 246, 0) 0%, |
|
|
|
|
|
#bdfff6 52%, |
|
|
|
|
|
rgba(189, 255, 246, 0) 100% |
|
|
|
|
|
); |
|
|
border-radius: 0px 0px 0px 0px; |
|
|
border-radius: 0px 0px 0px 0px; |
|
|
opacity: 1; |
|
|
opacity: 1; |
|
|
} |
|
|
} |
|
|
@ -343,7 +409,12 @@ export default { |
|
|
left: 0px; |
|
|
left: 0px; |
|
|
width: 100%; |
|
|
width: 100%; |
|
|
height: 2px; |
|
|
height: 2px; |
|
|
background: linear-gradient(90deg, rgba(189, 255, 246, 0) 0%, #BDFFF6 52%, rgba(189, 255, 246, 0) 100%); |
|
|
background: linear-gradient( |
|
|
|
|
|
90deg, |
|
|
|
|
|
rgba(189, 255, 246, 0) 0%, |
|
|
|
|
|
#bdfff6 52%, |
|
|
|
|
|
rgba(189, 255, 246, 0) 100% |
|
|
|
|
|
); |
|
|
border-radius: 0px 0px 0px 0px; |
|
|
border-radius: 0px 0px 0px 0px; |
|
|
opacity: 1; |
|
|
opacity: 1; |
|
|
} |
|
|
} |
|
|
@ -353,23 +424,25 @@ export default { |
|
|
display: inline-flex; |
|
|
display: inline-flex; |
|
|
width: 287px; |
|
|
width: 287px; |
|
|
height: 38px; |
|
|
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%); |
|
|
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; |
|
|
border-radius: 0px 0px 0px 0px; |
|
|
opacity: 1; |
|
|
opacity: 1; |
|
|
justify-content: center; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
align-items: center; |
|
|
margin-left: 30px; |
|
|
margin-left: 30px; |
|
|
; |
|
|
> span.text { |
|
|
|
|
|
|
|
|
>span.text { |
|
|
|
|
|
display: inline-flex; |
|
|
display: inline-flex; |
|
|
font-size: 16px; |
|
|
font-size: 16px; |
|
|
font-family: PingFang SC, PingFang SC; |
|
|
font-family: PingFang SC, PingFang SC; |
|
|
font-weight: 400; |
|
|
font-weight: 400; |
|
|
color: #FFFFFF; |
|
|
color: #ffffff; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.num { |
|
|
.num { |
|
|
display: inline-flex; |
|
|
display: inline-flex; |
|
|
justify-content: center; |
|
|
justify-content: center; |
|
|
@ -377,11 +450,10 @@ export default { |
|
|
font-size: 20px; |
|
|
font-size: 20px; |
|
|
font-family: PangMenZhengDao; |
|
|
font-family: PangMenZhengDao; |
|
|
font-weight: 400; |
|
|
font-weight: 400; |
|
|
color: #D9001B; |
|
|
color: #d9001b; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
@ -390,4 +462,3 @@ export default { |
|
|
width: 100%; |
|
|
width: 100%; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</style> |
|
|
|
|
|
|
zhangzhang
12 months ago