844 lines
21 KiB
Vue
844 lines
21 KiB
Vue
<template>
|
||
<div class="right-panel">
|
||
<SectionHeader title="防范应对" />
|
||
<!-- 防范应对 -->
|
||
<div class="prevention-section">
|
||
<!-- 第一行：队伍、人员、装备、物资 -->
|
||
<div class="resource-grid">
|
||
<div v-for="(item, index) in resourceData" :key="index" class="resource-item">
|
||
<!-- <div class="resource-icon" :class="item.iconClass"></div> -->
|
||
<img class="resource-icon" :src="item.img" alt="" />
|
||
<div class="resource-info">
|
||
<div class="resource-label">{{ item.label }}</div>
|
||
<div class="resource-value">
|
||
{{ item.value }}<span class="unit">{{ item.unit }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 管控路段数 -->
|
||
<div class="control-section">
|
||
<div class="control-title">管控路段数 <span class="control-num">2</span></div>
|
||
<div class="control-grid">
|
||
<div
|
||
v-for="(item, index) in controlData"
|
||
:key="index"
|
||
class="control-item"
|
||
:class="{ clickable: item.label === '全幅封闭数' || item.label === '关闭驻地数' }"
|
||
@click="handleControlClick(item)"
|
||
>
|
||
<div class="control-value">{{ item.value }}</div>
|
||
<div class="control-label">{{ item.label }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 巡查公路里程 -->
|
||
<div class="patrol-section">
|
||
<div class="patrol-header">
|
||
<span class="patrol-title">巡查公路里程</span>
|
||
<span class="patrol-mileage">234882km</span>
|
||
</div>
|
||
<div class="patrol-grid">
|
||
<div v-for="(item, index) in patrolData" :key="index" class="patrol-item">
|
||
<div class="patrol-value">{{ item.value }}</div>
|
||
<div class="patrol-label">{{ item.label }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 抢险投入情况 -->
|
||
<div class="rescue-section">
|
||
<div class="rescue-title">抢险投入情况</div>
|
||
<div class="rescue-grid">
|
||
<div v-for="(item, index) in rescueData" :key="index" class="rescue-item">
|
||
<!-- <div class="rescue-icon" :class="item.iconClass"></div> -->
|
||
<img class="rescue-icon" :src="item.img" alt="" />
|
||
<div class="rescue-info">
|
||
<div class="rescue-value">
|
||
{{ item.value }}<span class="unit">{{ item.unit }}</span>
|
||
</div>
|
||
<div class="rescue-label">{{ item.label }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 受灾情况 -->
|
||
<div class="disaster-section">
|
||
<SectionHeader title="受灾情况">
|
||
<template #right>
|
||
<div class="header-filters">
|
||
<span class="filter-item active">本轮</span>
|
||
<div class="date-range-wrapper">
|
||
<el-date-picker
|
||
v-model="dateRange"
|
||
type="daterange"
|
||
range-separator="-"
|
||
start-placeholder="开始时间"
|
||
end-placeholder="结束时间"
|
||
size="small"
|
||
popper-class="dark-date-picker"
|
||
:prefix-icon="Calendar"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</SectionHeader>
|
||
|
||
<!-- 阻断情况 -->
|
||
<div class="block-section clickable" @click="handleBlockClick">
|
||
<div class="block-title">阻断情况(已抢通/阻断数)</div>
|
||
<div class="block-grid">
|
||
<div class="block-item">
|
||
<div class="block-num">
|
||
<span class="current">{{ blockData[0].current }}</span>
|
||
<span class="separator">/</span>
|
||
<span class="total">{{ blockData[0].total }}</span>
|
||
</div>
|
||
<div class="block-label">{{ blockData[0].label }}</div>
|
||
</div>
|
||
<div class="divider-line"></div>
|
||
|
||
<div class="block-item">
|
||
<div class="block-num">
|
||
<span class="current">{{ blockData[1].current }}</span>
|
||
<span class="separator">/</span>
|
||
<span class="total">{{ blockData[1].total }}</span>
|
||
</div>
|
||
<div class="block-label">{{ blockData[1].label }}</div>
|
||
</div>
|
||
|
||
<div class="divider-line"></div>
|
||
|
||
<div class="block-item death-item">
|
||
<div class="death-num">{{ deathData.value }}</div>
|
||
<div class="death-label">{{ deathData.label }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 灾害情况 -->
|
||
<div class="damage-section">
|
||
<div class="damage-title">灾害情况</div>
|
||
<div class="damage-grid">
|
||
<div
|
||
v-for="(item, index) in damageData"
|
||
:key="index"
|
||
class="damage-item"
|
||
:class="item.class"
|
||
>
|
||
<div class="damage-value">
|
||
{{ item.value }}<span class="unit">{{ item.unit }}</span>
|
||
</div>
|
||
<div class="damage-label">{{ item.label }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 重大事件 -->
|
||
<div class="event-section">
|
||
<span class="event-title">重大事件：</span>
|
||
<span class="event-num">{{ majorEvent }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, computed } from "vue";
|
||
|
||
import SectionHeader from "./component/sectionHeader.vue";
|
||
import { Calendar } from "@element-plus/icons-vue";
|
||
|
||
const emit = defineEmits(["openClearanceSituation", "openControlSituation"]);
|
||
|
||
// 点击管控项
|
||
const handleControlClick = (item) => {
|
||
if (item.label === "全幅封闭数") {
|
||
emit("openClearanceSituation");
|
||
} else if (item.label === "关闭驻地数") {
|
||
emit("openControlSituation");
|
||
}
|
||
};
|
||
|
||
// 点击阻断情况
|
||
const handleBlockClick = () => {
|
||
emit("openClearanceSituation");
|
||
};
|
||
|
||
import icon1 from "../../assets/RiskWarning_img/icon1@2x.png";
|
||
import icon2 from "../../assets/RiskWarning_img/icon2@2x.png";
|
||
import icon3 from "../../assets/RiskWarning_img/icon3@2x.png";
|
||
import icon4 from "../../assets/RiskWarning_img/icon4@2x.png";
|
||
|
||
import icon11 from "../../assets/RiskWarning_img/icon-1@2x.png";
|
||
import icon12 from "../../assets/RiskWarning_img/icon-1@2x.png";
|
||
import icon13 from "../../assets/RiskWarning_img/icon-1@2x.png";
|
||
|
||
import icon51 from "../../assets/RiskWarning_img/编组5@2x.png";
|
||
import icon52 from "../../assets/RiskWarning_img/编组22@2x.png";
|
||
import icon55 from "../../assets/RiskWarning_img/路径55@2x.png";
|
||
|
||
import icon62 from "../../assets/RiskWarning_img/路径62@2x.png";
|
||
import icon621 from "../../assets/RiskWarning_img/路径62@2x (1).png";
|
||
import icon622 from "../../assets/RiskWarning_img/路径62@2x (2).png";
|
||
|
||
// 日期范围选择器
|
||
const dateRange = ref([]);
|
||
|
||
// 资源数据（队伍、人员、装备、物资）
|
||
const resourceData = [
|
||
{
|
||
label: "全市普通公路抢险队伍",
|
||
value: "39",
|
||
unit: "支",
|
||
iconClass: "icon-team",
|
||
img: icon1,
|
||
},
|
||
{ label: "人员", value: "1612", unit: "人", iconClass: "icon-person", img: icon2 },
|
||
{ label: "储备装备", value: "1157", unit: "台", iconClass: "icon-equip", img: icon3 },
|
||
{ label: "物资", value: "41.5", unit: "万件", iconClass: "icon-material", img: icon4 },
|
||
];
|
||
|
||
// 管控路段数据
|
||
const controlData = [
|
||
{ label: "全幅封闭数", value: "40" },
|
||
{ label: "半幅通行数", value: "40" },
|
||
{ label: "限速(限车型)数", value: "30" },
|
||
{ label: "告警阻拦处数", value: "42" },
|
||
{ label: "停工项目数", value: "24" },
|
||
{ label: "关闭驻地数", value: "32" },
|
||
{ label: "转移撤离人员数", value: "58" },
|
||
];
|
||
|
||
// 巡查数据
|
||
const patrolData = [
|
||
{ label: "巡查路段数", value: "2" },
|
||
{ label: "巡查桥梁数", value: "1" },
|
||
{ label: "巡查边坡数", value: "6" },
|
||
{ label: "巡查隧道数", value: "10" },
|
||
{ label: "巡查项目数", value: "6" },
|
||
];
|
||
|
||
// 抢险投入数据
|
||
const rescueData = [
|
||
{
|
||
label: "本轮出动人次",
|
||
value: "22341",
|
||
unit: "人次",
|
||
iconClass: "icon-rescue-person",
|
||
img: icon11,
|
||
},
|
||
{
|
||
label: "本轮出动设备",
|
||
value: "341",
|
||
unit: "台次",
|
||
iconClass: "icon-rescue-equip",
|
||
img: icon12,
|
||
},
|
||
{
|
||
label: "清理塌方",
|
||
value: "1367",
|
||
unit: "万立方米",
|
||
iconClass: "icon-rescue-clear",
|
||
img: icon13,
|
||
},
|
||
];
|
||
|
||
// 受灾情况 - 阻断数据
|
||
const blockData = [
|
||
{ label: "今日新增阻断数", current: "19", total: "23" },
|
||
{ label: "本轮累计阻断数", current: "10", total: "23" },
|
||
];
|
||
|
||
// 死亡人数
|
||
const deathData = { label: "本轮因灾死亡人数", value: "5" };
|
||
|
||
// 灾害情况数据
|
||
const damageData = [
|
||
{ label: "本轮塌方量", value: "23", unit: "万立方米", class: "blue" },
|
||
{ label: "汛期塌方量", value: "23", unit: "万立方米", class: "blue" },
|
||
{ label: "当年塌方量", value: "23", unit: "万立方米", class: "blue" },
|
||
{ label: "本轮已损失", value: "80", unit: "万元", class: "red" },
|
||
{ label: "汛期已损失", value: "18", unit: "万元", class: "red" },
|
||
{ label: "当年已损失", value: "350", unit: "万元", class: "red" },
|
||
];
|
||
|
||
// 重大事件数
|
||
const majorEvent = "0";
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
// 视频屏幕自适应 - 基于视口宽度动态调整
|
||
// 基准宽度 1920px，使用 vw 单位实现自适应
|
||
@function vw($px) {
|
||
@return calc($px / 1920 * 100vw);
|
||
}
|
||
|
||
.right-panel {
|
||
width: 100%;
|
||
height: 100%;
|
||
padding: vw(20);
|
||
box-sizing: border-box;
|
||
overflow-y: auto;
|
||
scrollbar-width: none;
|
||
-ms-overflow-style: none;
|
||
|
||
&::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
|
||
// 小屏幕适配
|
||
@media (max-width: 1366px) {
|
||
padding: 12px;
|
||
}
|
||
|
||
@media (max-width: 1024px) {
|
||
padding: 8px;
|
||
}
|
||
}
|
||
|
||
.prevention-section {
|
||
// background: linear-gradient(
|
||
// 180deg,
|
||
// rgba(21, 41, 59, 0.95) 0%,
|
||
// rgba(13, 28, 42, 0.95) 100%
|
||
// );
|
||
// border: 1px solid rgba(64, 169, 255, 0.3);
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.section-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
background-image: url("../../assets/RiskWarning_img/标题bg@2x.png");
|
||
align-items: center;
|
||
margin-bottom: vw(15);
|
||
|
||
.header-left {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: vw(8);
|
||
|
||
.icon-back {
|
||
width: vw(20);
|
||
height: vw(20);
|
||
min-width: 16px;
|
||
min-height: 16px;
|
||
background: linear-gradient(135deg, #40a9ff 0%, #1890ff 100%);
|
||
border-radius: 4px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
&::before {
|
||
content: "←";
|
||
color: #fff;
|
||
font-size: vw(12);
|
||
}
|
||
}
|
||
|
||
.title {
|
||
font-size: vw(16);
|
||
font-weight: bold;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 资源网格（队伍、人员、装备、物资）
|
||
.resource-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: vw(10);
|
||
margin-bottom: vw(10);
|
||
|
||
.resource-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: vw(10);
|
||
padding: vw(8) vw(12);
|
||
background: linear-gradient(270deg, rgba(18, 84, 97, 0) 0%, #204a55 100%);
|
||
border: 2px solid transparent;
|
||
border-image: linear-gradient(270deg, rgba(80, 201, 191, 0), rgba(39, 135, 153, 1)) 2
|
||
2;
|
||
border-radius: 6px;
|
||
border-right: 0px;
|
||
|
||
.resource-icon {
|
||
width: vw(32);
|
||
height: vw(32);
|
||
min-width: 20px;
|
||
min-height: 20px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: vw(20);
|
||
|
||
&.icon-team::before {
|
||
content: "👷";
|
||
}
|
||
&.icon-person::before {
|
||
content: "👤";
|
||
}
|
||
&.icon-equip::before {
|
||
content: "🚛";
|
||
}
|
||
&.icon-material::before {
|
||
content: "📦";
|
||
}
|
||
}
|
||
|
||
.resource-info {
|
||
flex: 1;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
.resource-label {
|
||
width: 48%;
|
||
font-size: vw(12);
|
||
color: rgba(255, 255, 255, 0.7);
|
||
margin-bottom: vw(4);
|
||
}
|
||
|
||
.resource-value {
|
||
font-size: vw(18);
|
||
font-weight: bold;
|
||
color: #40a9ff;
|
||
|
||
.unit {
|
||
font-size: vw(12);
|
||
color: rgba(255, 255, 255, 0.7);
|
||
font-weight: normal;
|
||
margin-left: 2px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 管控路段
|
||
.control-section {
|
||
margin-bottom: vw(10);
|
||
|
||
.control-title {
|
||
font-size: vw(14);
|
||
color: rgba(255, 255, 255, 0.9);
|
||
margin-bottom: vw(10);
|
||
|
||
.control-num {
|
||
font-size: vw(16);
|
||
|
||
color: #40a9ff;
|
||
font-weight: bold;
|
||
margin-left: vw(5);
|
||
}
|
||
}
|
||
|
||
.control-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
background: rgba(64, 169, 255, 0.1);
|
||
box-shadow: inset 0px 0px 8px 0px #379bff;
|
||
gap: vw(8);
|
||
|
||
.control-item {
|
||
text-align: center;
|
||
padding: vw(6) vw(5);
|
||
// background: rgba(64, 169, 255, 0.1);
|
||
border-radius: 4px;
|
||
|
||
&.clickable {
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
|
||
&:hover {
|
||
background-color: rgba(64, 169, 255, 0.15);
|
||
|
||
.control-value {
|
||
color: #69c0ff;
|
||
text-shadow: 0 0 8px rgba(105, 192, 255, 0.6);
|
||
}
|
||
}
|
||
}
|
||
|
||
.control-value {
|
||
font-size: vw(18);
|
||
font-weight: bold;
|
||
color: #40a9ff;
|
||
margin-bottom: vw(4);
|
||
}
|
||
|
||
.control-label {
|
||
font-size: vw(12);
|
||
color: rgba(255, 255, 255, 0.7);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 巡查公路里程
|
||
.patrol-section {
|
||
margin-bottom: vw(10);
|
||
|
||
.patrol-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: vw(10);
|
||
margin-bottom: vw(10);
|
||
|
||
.patrol-title {
|
||
font-size: vw(14);
|
||
color: rgba(255, 255, 255, 0.9);
|
||
}
|
||
|
||
.patrol-mileage {
|
||
font-size: vw(16);
|
||
font-weight: bold;
|
||
color: #40a9ff;
|
||
}
|
||
}
|
||
|
||
.patrol-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(5, 1fr);
|
||
gap: vw(8);
|
||
|
||
.patrol-item {
|
||
text-align: center;
|
||
padding: vw(6) vw(5);
|
||
// background: rgba(64, 169, 255, 0.1);
|
||
// border-radius: 4px;
|
||
background-image: url("../../assets/RiskWarning_img/路径62@2x (1).png");
|
||
background-size: 100% 100%;
|
||
background-position: right;
|
||
|
||
.patrol-value {
|
||
font-size: vw(18);
|
||
font-weight: bold;
|
||
color: #40a9ff;
|
||
margin-bottom: vw(4);
|
||
text-align: left;
|
||
margin-left: vw(5);
|
||
}
|
||
|
||
.patrol-label {
|
||
font-size: vw(12);
|
||
color: rgba(255, 255, 255, 0.7);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 抢险投入情况
|
||
.rescue-section {
|
||
.rescue-title {
|
||
font-size: vw(14);
|
||
color: rgba(255, 255, 255, 0.9);
|
||
margin-bottom: vw(10);
|
||
}
|
||
|
||
.rescue-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: vw(10);
|
||
|
||
.rescue-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: vw(4);
|
||
padding: vw(8) 0;
|
||
// background: rgba(64, 169, 255, 0.1);
|
||
// border: 1px solid rgba(64, 169, 255, 0.2);
|
||
// border-radius: 6px;
|
||
background-image: url("../../assets/RiskWarning_img/路径62@2x (1).png");
|
||
background-size: 100% 100%;
|
||
background-position: right;
|
||
|
||
.rescue-icon {
|
||
width: vw(36);
|
||
height: vw(36);
|
||
min-width: 24px;
|
||
min-height: 24px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: vw(22);
|
||
margin-left: vw(5);
|
||
|
||
&.icon-rescue-person::before {
|
||
content: "👷";
|
||
}
|
||
&.icon-rescue-equip::before {
|
||
content: "🚜";
|
||
}
|
||
&.icon-rescue-clear::before {
|
||
content: "🏔️";
|
||
}
|
||
}
|
||
|
||
.rescue-info {
|
||
.rescue-value {
|
||
font-size: vw(18);
|
||
font-weight: bold;
|
||
color: #40a9ff;
|
||
margin-bottom: vw(4);
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.unit {
|
||
font-size: vw(10);
|
||
color: rgba(255, 255, 255, 0.7);
|
||
font-weight: normal;
|
||
margin-left: 2px;
|
||
}
|
||
}
|
||
|
||
.rescue-label {
|
||
font-size: vw(12);
|
||
color: rgba(255, 255, 255, 0.7);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 受灾情况样式
|
||
.disaster-section {
|
||
margin-top: vw(15);
|
||
|
||
.block-section {
|
||
margin-bottom: vw(10);
|
||
|
||
&.clickable {
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
|
||
&:hover {
|
||
opacity: 0.9;
|
||
|
||
.block-title {
|
||
color: #69c0ff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.block-title {
|
||
font-size: vw(14);
|
||
color: rgba(255, 255, 255, 0.8);
|
||
margin-bottom: vw(10);
|
||
}
|
||
|
||
.block-grid {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
height: 100%;
|
||
padding: 0 vw(20);
|
||
// display: grid;
|
||
// grid-template-columns: repeat(5, 1fr);
|
||
// gap: 10px;
|
||
background-image: url("../../assets/RiskWarning_img/编组22@2x.png");
|
||
background-size: 100% 100%;
|
||
background-position: center;
|
||
|
||
.divider-line {
|
||
width: 2px;
|
||
height: vw(40);
|
||
margin: auto 0;
|
||
background: linear-gradient(
|
||
180deg,
|
||
transparent 0%,
|
||
#40a9ff 50%,
|
||
transparent 100%
|
||
);
|
||
// margin: 0 auto;
|
||
}
|
||
|
||
.block-item {
|
||
text-align: center;
|
||
padding: vw(8);
|
||
// background: rgba(64, 169, 255, 0.1);
|
||
// border-radius: 6px;
|
||
// background-image: url("../../assets/RiskWarning_img/路径62@2x (1).png");
|
||
// background-size: 100% 100%;
|
||
// background-position: left;
|
||
|
||
.block-num {
|
||
font-size: vw(18);
|
||
font-weight: bold;
|
||
margin-bottom: vw(6);
|
||
|
||
.current {
|
||
color: #40a9ff;
|
||
}
|
||
|
||
.separator {
|
||
color: rgba(255, 255, 255, 0.5);
|
||
margin: 0 2px;
|
||
}
|
||
|
||
.total {
|
||
color: #ff4d4f;
|
||
}
|
||
}
|
||
|
||
.block-label {
|
||
font-size: vw(12);
|
||
color: rgba(255, 255, 255, 0.7);
|
||
}
|
||
|
||
&.death-item {
|
||
.death-num {
|
||
font-size: vw(18);
|
||
font-weight: bold;
|
||
color: #40a9ff;
|
||
margin-bottom: vw(6);
|
||
}
|
||
|
||
.death-label {
|
||
font-size: vw(10);
|
||
color: rgba(255, 255, 255, 0.7);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.damage-section {
|
||
margin-bottom: vw(10);
|
||
|
||
.damage-title {
|
||
font-size: vw(14);
|
||
color: rgba(255, 255, 255, 0.8);
|
||
margin-bottom: vw(10);
|
||
}
|
||
|
||
.damage-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: vw(10);
|
||
|
||
.damage-item {
|
||
text-align: center;
|
||
padding: vw(8);
|
||
// background: rgba(64, 169, 255, 0.1);
|
||
// border-radius: 6px;
|
||
background-image: url("../../assets/RiskWarning_img/路径62@2x.png");
|
||
background-size: 100% 100%;
|
||
background-position: left;
|
||
|
||
.damage-value {
|
||
font-size: vw(18);
|
||
font-weight: bold;
|
||
margin-bottom: vw(6);
|
||
|
||
.unit {
|
||
font-size: vw(12);
|
||
font-weight: normal;
|
||
margin-left: 2px;
|
||
}
|
||
}
|
||
|
||
.damage-label {
|
||
font-size: vw(12);
|
||
color: rgba(255, 255, 255, 0.7);
|
||
}
|
||
|
||
&.blue .damage-value {
|
||
color: #40a9ff;
|
||
.unit {
|
||
color: rgba(255, 255, 255, 0.7);
|
||
}
|
||
}
|
||
|
||
&.red .damage-value {
|
||
color: #ff4d4f;
|
||
.unit {
|
||
color: rgba(255, 255, 255, 0.7);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.event-section {
|
||
text-align: center;
|
||
padding: vw(12);
|
||
// background: rgba(64, 169, 255, 0.1);
|
||
// border-radius: 6px;
|
||
background-image: url("../../assets/RiskWarning_img/编组5@2x.png");
|
||
background-size: 100% 100%;
|
||
background-position: left;
|
||
|
||
.event-title {
|
||
font-size: vw(12);
|
||
color: rgba(255, 255, 255, 0.9);
|
||
}
|
||
|
||
.event-num {
|
||
font-size: vw(18);
|
||
font-weight: bold;
|
||
color: #ff4d4f;
|
||
}
|
||
}
|
||
}
|
||
.header-filters {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: vw(6);
|
||
font-size: vw(10);
|
||
|
||
.filter-item {
|
||
color: rgba(255, 255, 255, 0.6);
|
||
padding: vw(3) vw(8);
|
||
border: 1px solid rgba(64, 169, 255, 0.3);
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
|
||
&.active {
|
||
background: rgba(64, 169, 255, 0.2);
|
||
color: #40a9ff;
|
||
border-color: rgba(64, 169, 255, 0.5);
|
||
}
|
||
}
|
||
|
||
.filter-separator {
|
||
color: rgba(255, 255, 255, 0.4);
|
||
}
|
||
}
|
||
.date-range-wrapper {
|
||
:deep(.el-date-editor) {
|
||
width: 200px;
|
||
background: transparent;
|
||
border: 1px solid rgba(64, 169, 255, 0.3);
|
||
border-radius: 4px;
|
||
background: #183c67;
|
||
box-shadow: inset 0px 0px 8px 0px #4fecff;
|
||
|
||
.el-range-input {
|
||
background: transparent;
|
||
color: rgba(255, 255, 255, 0.8);
|
||
|
||
&::placeholder {
|
||
color: rgba(255, 255, 255, 0.5);
|
||
}
|
||
}
|
||
|
||
.el-range-separator {
|
||
color: rgba(255, 255, 255, 0.4);
|
||
}
|
||
|
||
.el-icon {
|
||
color: rgba(255, 255, 255, 0.5);
|
||
}
|
||
|
||
// &:hover {
|
||
// border-color: rgba(64, 169, 255, 0.5);
|
||
// }
|
||
}
|
||
}
|
||
</style>
|