|
@@ -1,49 +1,50 @@
|
|
|
<template>
|
|
|
- <div class="warning-info">
|
|
|
- <div class="gradient-text title">预警信号</div>
|
|
|
-
|
|
|
- <!-- 当前时间显示 -->
|
|
|
- <div class="current-time" :style="{ backgroundImage: `url(${dateTimeBg})` }">日期 {{ formattedTime }}</div>
|
|
|
- <!-- 生效预警列表 -->
|
|
|
- <div class="alert-boxes">
|
|
|
- <div class="section-title">生效预警</div>
|
|
|
- <div class="alert-items">
|
|
|
- <div class="data-box1">
|
|
|
- <img src="@/assets/images/map/warningInfo/ic_ty.png" alt="台风图标" class="alert-icon" />
|
|
|
- <div class="box-text1">台风</div>
|
|
|
- </div>
|
|
|
- <div class="data-box2">
|
|
|
- <img src="@/assets/images/map/warningInfo/ic_tr.png" alt="暴雨图标" class="alert-icon" />
|
|
|
- <div class="box-text1">暴雨</div>
|
|
|
- </div>
|
|
|
- <div class="data-box3">
|
|
|
- <img src="@/assets/images/map/warningInfo/ic_tstorm.png" alt="雷雨大风图标" class="alert-icon" />
|
|
|
- <div class="box-text1">雷雨大风</div>
|
|
|
- </div>
|
|
|
- <div class="data-box4">
|
|
|
- <img src="@/assets/images/map/warningInfo/ic_ht.png" alt="高温图标" class="alert-icon" />
|
|
|
- <div class="box-text1">高温</div>
|
|
|
+ <div class="menu-content">
|
|
|
+ <div class="warning-info">
|
|
|
+ <div class="gradient-text title">预警信号</div>
|
|
|
+
|
|
|
+ <!-- 当前时间显示 -->
|
|
|
+ <div class="current-time" :style="{ backgroundImage: `url(${dateTimeBg})` }">日期 {{ formattedTime }}</div>
|
|
|
+ <!-- 生效预警列表 -->
|
|
|
+ <div class="alert-boxes">
|
|
|
+ <div class="section-title">生效预警</div>
|
|
|
+ <div class="alert-items">
|
|
|
+ <div class="data-box1">
|
|
|
+ <img src="@/assets/images/map/warningInfo/ic_ty.png" alt="台风图标" class="alert-icon" />
|
|
|
+ <div class="box-text1">台风</div>
|
|
|
+ </div>
|
|
|
+ <div class="data-box2">
|
|
|
+ <img src="@/assets/images/map/warningInfo/ic_tr.png" alt="暴雨图标" class="alert-icon" />
|
|
|
+ <div class="box-text1">暴雨</div>
|
|
|
+ </div>
|
|
|
+ <div class="data-box3">
|
|
|
+ <img src="@/assets/images/map/warningInfo/ic_tstorm.png" alt="雷雨大风图标" class="alert-icon" />
|
|
|
+ <div class="box-text1">雷雨大风</div>
|
|
|
+ </div>
|
|
|
+ <div class="data-box4">
|
|
|
+ <img src="@/assets/images/map/warningInfo/ic_ht.png" alt="高温图标" class="alert-icon" />
|
|
|
+ <div class="box-text1">高温</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
|
- <!-- 发布数量统计 -->
|
|
|
- <div class="alert-count">
|
|
|
- <h3 class="section-title">发布数量统计</h3>
|
|
|
- <div class="alert-count-items">
|
|
|
- <img src="@/assets/images/map/warningInfo/ic_发布数量统计.png" alt="发布数量统计" class="count-icon" />
|
|
|
- <div v-for="(count, index) in alertCounts" :key="index" class="count-item">
|
|
|
- <span class="count-num">{{ count.num }}</span>
|
|
|
- <img :src="getLevelImage(count.level)" :alt="`${getLevelName(count.level)}预警图标`" class="count-icon" />
|
|
|
- <span :class="['count-level', `level-${getLevelName(count.level).toLowerCase()}`]">{{ getLevelName(count.level) }}预警</span>
|
|
|
+ <!-- 发布数量统计 -->
|
|
|
+ <div class="alert-count">
|
|
|
+ <h3 class="section-title">发布数量统计</h3>
|
|
|
+ <div class="alert-count-items">
|
|
|
+ <img src="@/assets/images/map/warningInfo/ic_发布数量统计.png" alt="发布数量统计" class="count-icon" />
|
|
|
+ <div v-for="(count, index) in alertCounts" :key="index" class="count-item">
|
|
|
+ <span class="count-num">{{ count.num }}</span>
|
|
|
+ <img :src="getLevelImage(count.level)" :alt="`${getLevelName(count.level)}预警图标`" class="count-icon" />
|
|
|
+ <span :class="['count-level', `level-${getLevelName(count.level).toLowerCase()}`]">{{ getLevelName(count.level) }}预警</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
|
- <!-- 预警明细列表 -->
|
|
|
- <div class="alert-details">
|
|
|
- <table class="alert-table">
|
|
|
- <thead>
|
|
|
+ <!-- 预警明细列表 -->
|
|
|
+ <div class="alert-details">
|
|
|
+ <table class="alert-table">
|
|
|
+ <thead>
|
|
|
<tr>
|
|
|
<th>
|
|
|
类型
|
|
@@ -84,8 +85,8 @@
|
|
|
<th>区域</th>
|
|
|
<th>发布时间</th>
|
|
|
</tr>
|
|
|
- </thead>
|
|
|
- <tbody>
|
|
|
+ </thead>
|
|
|
+ <tbody>
|
|
|
<tr v-for="(alert, index) in alertDetails" :key="index" class="alert-row">
|
|
|
<td>{{ alert.type }}</td>
|
|
|
<td>
|
|
@@ -94,8 +95,9 @@
|
|
|
<td>{{ alert.area }}</td>
|
|
|
<td>{{ alert.release_time }}</td>
|
|
|
</tr>
|
|
|
- </tbody>
|
|
|
- </table>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
@@ -297,11 +299,20 @@ export default defineComponent({
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
+.menu-content {
|
|
|
+ width: 1579px;
|
|
|
+ height: 1394px;
|
|
|
+ background: url('@/assets/images/map/rightMenu/content.png') no-repeat;
|
|
|
+ padding: 130px 20px 20px 20px;
|
|
|
+ font-size: 36px;
|
|
|
+ position: relative;
|
|
|
+ color: #000000;
|
|
|
+}
|
|
|
.title {
|
|
|
font-size: 60px;
|
|
|
position: absolute;
|
|
|
- top: 12px;
|
|
|
- left: 210px;
|
|
|
+ top: 20px;
|
|
|
+ left: 160px;
|
|
|
}
|
|
|
|
|
|
.warning-info {
|