预警信号

src/views/globalMap/RightMenu/OnlinePlotting/LayerDetail.vue

@@ -67,7 +67,7 @@
   </Dialog>
   <EditGroup v-if="showGroup" v-model="showGroup" :patternId="patternId" :groupId="groupId" @change="getList" />
   <Contact v-if="showCooperate" v-model="showCooperate" @close="handleClose3" @confirm="handleConfirm" />
-  <CollaborativeUser v-if="showUser" v-model="showUser" />
+  <CollaborativeUser v-if="showUser" v-model="showUser" :patternId="patternId" />
   <ImportLayer v-if="showImportLayer" v-model="showImportLayer" />
 </template>
 

src/views/globalMap/RightMenu/WarningInfo.vue

@@ -4,37 +4,39 @@
       <div class="gradient-text common-dialog-title2">预警信号</div>
 
       <!-- 当前时间显示 -->
-      <div class="current-time" :style="{ backgroundImage: `url(${dateTimeBg})` }">日期 {{ formattedTime }}</div>
+      <div class="current-time">
+        <div>日期</div>
+        <div class="line" />
+        <div class="gradient-text3 text1">{{ formattedTime.month }}</div>
+        <div>月</div>
+        <div class="gradient-text3 text1">{{ formattedTime.day }}</div>
+        <div>日</div>
+        <div class="gradient-text3 text2" style="margin-left: 12px">{{ formattedTime.hour }}</div>
+        <div class="gradient-text3 text2">:</div>
+        <div class="gradient-text3 text2">{{ formattedTime.minute }}</div>
+      </div>
       <!-- 生效预警列表 -->
       <div class="alert-boxes">
-        <div class="section-title">生效预警</div>
+        <div class="common-title-box">生效预警</div>
         <div class="alert-items">
-          <div v-if="activeAlerts.some((alert) => alert.type === '台风')" class="data-box1">
-            <img src="@/assets/images/map/warningInfo/by_1.png" alt="台风图标" class="alert-icon" />
-            <div class="box-text1">台风</div>
-          </div>
-          <div v-if="activeAlerts.some((alert) => alert.type === '暴雨预警')" class="data-box2">
-            <img src="@/assets/images/map/warningInfo/by_2.png" alt="暴雨图标" class="alert-icon" />
-            <div class="box-text1">暴雨</div>
-          </div>
-          <div v-if="activeAlerts.some((alert) => alert.type === '雷雨大风')" class="data-box3">
-            <img src="@/assets/images/map/warningInfo/by_3.png" alt="雷雨大风图标" class="alert-icon" />
-            <div class="box-text1">雷雨大风</div>
-          </div>
-          <div v-if="activeAlerts.some((alert) => alert.type === '高温')" class="data-box4">
-            <img src="@/assets/images/map/warningInfo/by_4.png" alt="高温图标" class="alert-icon" />
-            <div class="box-text1">高温</div>
+          <div v-for="(item, index) in activeAlerts" :key="index" class="data-box1" @click="handleSelect(item)">
+            <img v-if="item.type === '台风'" src="@/assets/images/map/warningInfo/by_1.png" class="alert-icon" />
+            <img v-else-if="item.type === '暴雨预警'" src="@/assets/images/map/warningInfo/by_2.png" class="alert-icon" />
+            <img v-else-if="item.type === '雷雨大风'" src="@/assets/images/map/warningInfo/by_3.png" class="alert-icon" />
+            <img v-else-if="item.type === '高温'" src="@/assets/images/map/warningInfo/by_4.png" class="alert-icon" />
+            <div class="box-text1">{{ item.type }}</div>
+            <div :class="item.type === selectedType ? 'checked1' : 'checked2'" />
           </div>
         </div>
       </div>
 
       <!-- 发布数量统计 -->
       <div class="alert-count">
-        <h3 class="section-title">发布数量统计</h3>
+        <h3 class="common-title-box">发布数量统计</h3>
         <div class="alert-count-items">
-          <img src="@/assets/images/map/warningInfo/ic_发布数量统计.png" alt="发布数量统计" class="count-icon" style="height: 70px" />
+          <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>
+            <span :class="getTextClass(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()}`]"
@@ -48,57 +50,55 @@
 
       <!-- 预警明细列表 -->
       <div class="alert-details">
-        <table class="alert-table">
-          <thead>
-            <tr>
-              <th class="dropdown-trigger">
-                <el-select
-                  v-model="selectedType"
-                  placeholder="类型"
-                  size="large"
-                  class="custom-select2"
-                  popper-class="custom-select-popper2"
-                  :teleported="false"
-                >
-                  <el-option label="全部" value="" />
-                  <el-option v-for="type in alertTypes" :key="type" :label="type" :value="type" />
-                </el-select>
-              </th>
-              <th>
-                <el-select
-                  v-model="selectedLevel"
-                  placeholder="等级"
-                  size="large"
-                  class="custom-select2"
-                  popper-class="custom-select-popper2"
-                  :teleported="false"
-                >
-                  <el-option label="全部" value="" />
-                  <el-option v-for="level in alertLevels" :key="level" :label="level" :value="level" />
-                </el-select>
-              </th>
-              <th>区域</th>
-              <th>发布时间</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr v-for="(alert, index) in alertDetails" :key="index" class="alert-row">
-              <td>{{ alert.type }}</td>
-              <td>
-                <div :class="['level-icon', alert.level.toLowerCase()]">{{ alert.level }}</div>
-              </td>
-              <td>{{ alert.area }}</td>
-              <td>{{ alert.release_time }}</td>
-            </tr>
-          </tbody>
-        </table>
+        <div class="common-table">
+          <div class="table-header">
+            <div class="td">
+              <el-select
+                v-model="selectedType"
+                placeholder="类型"
+                class="custom-select2"
+                popper-class="custom-select-popper2"
+                :teleported="false"
+                style="width: 100px"
+                @change="fetchAlertDetails"
+              >
+                <el-option label="全部" value="" />
+                <el-option v-for="(item, index) in activeAlerts" :key="index" :label="item.type" :value="item.type" />
+              </el-select>
+            </div>
+            <div class="td">
+              <el-select
+                v-model="selectedLevel"
+                placeholder="等级"
+                size="large"
+                class="custom-select2"
+                popper-class="custom-select-popper2"
+                :teleported="false"
+                style="width: 80px"
+                @change="fetchAlertDetails"
+              >
+                <el-option label="全部" value="" />
+                <el-option v-for="item in alertLevels" :key="item.value" :label="item.name" :value="item.value" />
+              </el-select>
+            </div>
+            <div class="td">区域</div>
+            <div class="td">发布时间</div>
+          </div>
+          <div v-for="(item, index) in alertDetails" :key="index">
+            <div class="tr">
+              <div class="td">{{ item.type }}</div>
+              <div :class="['level-icon', 'td', item.level.toLowerCase()]">{{ getLevelName(item.level) }}</div>
+              <div class="td">{{ item.area }}</div>
+              <div class="td">{{ item.release_time }}</div>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, ref, onMounted } from 'vue';
+<script lang="ts" setup name="WarningInfo">
 import { getWarningInfoList, getWarningInfoCount, getWarningInfoDetail } from '@/api/globalMap/warningInfo';
 
 import redWarningImg from '@/assets/images/map/warningInfo/bg_1预警.png';
@@ -106,190 +106,170 @@ import orangeWarningImg from '@/assets/images/map/warningInfo/bg_2预警.png';
 import yellowWarningImg from '@/assets/images/map/warningInfo/bg_3预警.png';
 import blueWarningImg from '@/assets/images/map/warningInfo/bg_4预警.png';
 import whiteWarningImg from '@/assets/images/map/warningInfo/bg_5预警.png';
-import dateTimeBg from '@/assets/images/map/warningInfo/bg_日期时间.png';
-
-export default defineComponent({
-  name: 'WarningInfo',
-  setup() {
-    const alertCounts = ref<any[]>([]);
-    const activeAlerts = ref<any[]>([]);
-    const alertDetails = ref<any[]>([]);
-    const alertTypes = ref(['台风', '暴雨预警', '雷雨大风', '高温']);
-    const alertLevels = ref(['红色', '橙色', '黄色', '蓝色', '白色']);
-
-    const selectedType = ref<string>(''); // 用户选择的预警类型
-    const selectedLevel = ref<string>(''); // 用户选择的预警等级
-    const showTypeDropdown = ref<boolean>(false); // 控制类型下拉菜单的显示
-    const showLevelDropdown = ref<boolean>(false); // 控制等级下拉菜单的显示
-
-    const loading = ref(false);
-    const errorMessage = ref('');
-
-    // 预警等级与图片的映射
-    const levelImages: { [key: string]: string } = {
-      '1': redWarningImg,
-      '2': orangeWarningImg,
-      '3': yellowWarningImg,
-      '4': blueWarningImg,
-      '5': whiteWarningImg
-    };
-
-    // 预警等级与中文名称的映射
-    const levelNames: { [key: string]: string } = {
-      '1': '红色',
-      '2': '橙色',
-      '3': '黄色',
-      '4': '蓝色',
-      '5': '白色'
-    };
-
-    const getLevelImage = (level: string) => {
-      return levelImages[level] || '';
-    };
-
-    // 获取预警等级的中文名称
-    const getLevelName = (level: string) => {
-      return levelNames[level] || '未知';
-    };
-
-    // 获取发布数量统计
-    const fetchAlertCounts = async () => {
-      try {
-        const response = await getWarningInfoCount();
-        alertCounts.value = response.rows || [];
-        console.log('alertCounts:', alertCounts.value);
-      } catch (error) {
-        console.error('获取发布数量统计失败:', error);
-        errorMessage.value = '获取发布数量统计失败';
-      }
-    };
-
-    // 获取生效预警列表
-    const fetchActiveAlerts = async () => {
-      try {
-        const response = await getWarningInfoList();
-        activeAlerts.value = response.rows || [];
-      } catch (error) {
-        console.error('获取生效预警列表失败:', error);
-        errorMessage.value = '获取生效预警列表失败';
-      }
-    };
-
-    // 获取预警明细列表
-    const fetchAlertDetails = async () => {
-      try {
-        const query = {
-          type: selectedType.value,
-          level: selectedLevel.value
-        };
-        const response = await getWarningInfoDetail({ query });
-        alertDetails.value = response.rows || [];
-      } catch (error) {
-        console.error('获取预警明细列表失败:', error);
-        errorMessage.value = '获取预警明细列表失败';
-      }
-    };
-
-    // 控制类型下拉菜单的显示
-    const toggleTypeDropdown = () => {
-      showTypeDropdown.value = !showTypeDropdown.value;
-      showLevelDropdown.value = false; // 关闭等级下拉菜单
-    };
-
-    // 控制等级下拉菜单的显示
-    const toggleLevelDropdown = () => {
-      showLevelDropdown.value = !showLevelDropdown.value;
-      showTypeDropdown.value = false; // 关闭类型下拉菜单
-    };
-
-    // 选择类型
-    const selectType = (type: string) => {
-      selectedType.value = type;
-      showTypeDropdown.value = false;
-      fetchAlertDetails();
-    };
-
-    // 选择等级
-    const selectLevel = (level: string) => {
-      selectedLevel.value = level;
-      showLevelDropdown.value = false;
-      fetchAlertDetails();
-    };
-
-    // 点击外部区域时关闭下拉菜单
-    const wrapper = ref<HTMLElement | null>(null);
-
-    onMounted(async () => {
-      loading.value = true;
-      await Promise.all([fetchAlertCounts(), fetchActiveAlerts(), fetchAlertDetails()]);
-      loading.value = false;
-    });
-
-    // 监听点击事件以关闭下拉菜单
-    const handleClickOutside = (event: MouseEvent) => {
-      const target = event.target as HTMLElement;
-      if (wrapper.value && !wrapper.value.contains(target)) {
-        showTypeDropdown.value = false;
-        showLevelDropdown.value = false;
-      }
-    };
-
-    window.addEventListener('click', handleClickOutside);
-
-    // 清理事件监听器
-    onUnmounted(() => {
-      window.removeEventListener('click', handleClickOutside);
-    });
-
-    // 当前时间相关逻辑
-    const currentTime = ref(new Date());
-
-    const formattedTime = computed(() => {
-      const date = currentTime.value;
-      const month = date.getMonth() + 1;
-      const day = date.getDate();
-      const hour = date.getHours();
-      const minute = date.getMinutes();
-      // 格式化为 "MM月DD日 HH时MM分"
-      return `${month}月${day}日 ${hour.toString().padStart(2, '0')}时${minute.toString().padStart(2, '0')}分`;
-    });
-
-    onMounted(() => {
-      // 每分钟更新一次时间
-      const interval = setInterval(() => {
-        currentTime.value = new Date();
-      }, 60000); // 60000 毫秒 = 1 分钟
-
-      // 清除定时器
-      onUnmounted(() => {
-        clearInterval(interval);
-      });
-    });
-
-    return {
-      alertCounts,
-      activeAlerts,
-      alertDetails,
-      alertTypes,
-      alertLevels,
-      selectedType,
-      selectedLevel,
-      loading,
-      errorMessage,
-      fetchAlertDetails,
-      getLevelImage,
-      getLevelName,
-      toggleTypeDropdown,
-      toggleLevelDropdown,
-      selectType,
-      selectLevel,
-      showTypeDropdown,
-      showLevelDropdown,
-      wrapper,
-      formattedTime,
-      dateTimeBg
-    };
+
+const alertCounts = ref<any[]>([]);
+const activeAlerts = ref<any[]>([]);
+const alertDetails = ref<any[]>([]);
+const alertLevels = ref([
+  { name: '红色', value: '5' },
+  { name: '橙色', value: '4' },
+  { name: '黄色', value: '3' },
+  { name: '蓝色', value: '2' },
+  { name: '白色', value: '1' },
+]);
+
+const selectedType = ref<string>(''); // 用户选择的预警类型
+const selectedLevel = ref<string>(''); // 用户选择的预警等级
+const showTypeDropdown = ref<boolean>(false); // 控制类型下拉菜单的显示
+const showLevelDropdown = ref<boolean>(false); // 控制等级下拉菜单的显示
+
+const loading = ref(false);
+const errorMessage = ref('');
+
+// 预警等级与图片的映射
+const levelImages: { [key: string]: string } = {
+  '5': redWarningImg,
+  '4': orangeWarningImg,
+  '3': yellowWarningImg,
+  '2': blueWarningImg,
+  '1': whiteWarningImg
+};
+
+// 预警等级与中文名称的映射
+const levelNames: { [key: string]: string } = {
+  '5': '红色',
+  '4': '橙色',
+  '3': '黄色',
+  '2': '蓝色',
+  '1': '白色'
+};
+const getTextClass = (value) => {
+  if (value === '5') {
+    return 'count-num text-red';
+  } else if (value === '4') {
+    return 'count-num text-orange';
+  } else if (value === '3') {
+    return 'count-num text-yellow';
+  } else if (value === '2') {
+    return 'count-num text-blue';
+  } else {
+    return 'count-num';
+  }
+};
+const getLevelImage = (level: string) => {
+  return levelImages[level] || '';
+};
+
+// 获取预警等级的中文名称
+const getLevelName = (level: string) => {
+  return levelNames[level] || '未知';
+};
+
+// 获取发布数量统计
+const fetchAlertCounts = async () => {
+  try {
+    const response = await getWarningInfoCount();
+    alertCounts.value = response.rows.reverse() || [];
+    console.log('alertCounts:', alertCounts.value);
+  } catch (error) {
+    console.error('获取发布数量统计失败:', error);
+    errorMessage.value = '获取发布数量统计失败';
   }
+};
+
+// 获取生效预警列表
+const fetchActiveAlerts = async () => {
+  getWarningInfoList().then((res) => {
+    activeAlerts.value = res.rows;
+  });
+};
+const handleSelect = (item) => {
+  if (selectedType.value == item.type) {
+    selectedType.value = '';
+  } else {
+    selectedType.value = item.type;
+  }
+};
+// 获取预警明细列表
+const fetchAlertDetails = async () => {
+  const query = {
+    type: selectedType.value,
+    level: selectedLevel.value
+  };
+  getWarningInfoDetail({ query }).then((response) => {
+    alertDetails.value = response.rows || [];
+  });
+};
+
+// 控制类型下拉菜单的显示
+const toggleTypeDropdown = () => {
+  showTypeDropdown.value = !showTypeDropdown.value;
+  showLevelDropdown.value = false; // 关闭等级下拉菜单
+};
+
+// 控制等级下拉菜单的显示
+const toggleLevelDropdown = () => {
+  showLevelDropdown.value = !showLevelDropdown.value;
+  showTypeDropdown.value = false; // 关闭类型下拉菜单
+};
+
+// 选择类型
+const selectType = (type: string) => {
+  selectedType.value = type;
+  showTypeDropdown.value = false;
+  fetchAlertDetails();
+};
+
+// 选择等级
+const selectLevel = (level: string) => {
+  selectedLevel.value = level;
+  showLevelDropdown.value = false;
+  fetchAlertDetails();
+};
+
+// 点击外部区域时关闭下拉菜单
+const wrapper = ref<HTMLElement | null>(null);
+
+onMounted(async () => {
+  loading.value = true;
+  await Promise.all([fetchAlertCounts(), fetchActiveAlerts(), fetchAlertDetails()]);
+  loading.value = false;
+});
+
+// 监听点击事件以关闭下拉菜单
+const handleClickOutside = (event: MouseEvent) => {
+  const target = event.target as HTMLElement;
+  if (wrapper.value && !wrapper.value.contains(target)) {
+    showTypeDropdown.value = false;
+    showLevelDropdown.value = false;
+  }
+};
+
+window.addEventListener('click', handleClickOutside);
+
+// 清理事件监听器
+onUnmounted(() => {
+  window.removeEventListener('click', handleClickOutside);
+});
+
+const formattedTime = ref({
+  month: '-',
+  day: '-',
+  hour: '-',
+  minute: '-'
+});
+const getFormattedTime = () => {
+  const date = new Date();
+  formattedTime.value = {
+    month: (date.getMonth() + 1).toString(),
+    day: date.getDate().toString(),
+    hour: date.getHours().toString().padStart(2, '0'),
+    minute: date.getMinutes().toString().padStart(2, '0'),
+  };
+};
+
+onMounted(() => {
+  getFormattedTime();
 });
 </script>
 
@@ -299,100 +279,105 @@ export default defineComponent({
   height: 581px;
   background: url('@/assets/images/map/rightMenu/content.png') no-repeat;
   background-size: 100% 100%;
-  padding: 60px 10px 10px 15px;
+  padding: 30px 10px 10px 15px;
   font-size: 14px;
   position: relative;
   color: #ffffff;
 }
 
 .warning-info {
-  padding: 20px;
+  padding: 20px 10px;
   display: flex;
-  flex-direction: column; /* 垂直排列标题和预警图标 */
+  flex-direction: column;
+  height: 540px;
+  overflow: auto;
 }
 
 .current-time {
-  width: 254px; /* 根据背景图的宽度调整 */
-  height: 65px; /* 根据背景图的高度调整 */
-  background-size: 100% 100%; /* 背景图覆盖整个盒子 */
-  background-repeat: no-repeat; /* 禁止背景图重复 */
-  background-position: center; /* 背景图居中 */
+  width: 254px;
+  height: 65px;
+  background: url('@/assets/images/map/warningInfo/timeBox.png') no-repeat;
+  background-size: 100% 100%;
   color: #fff;
-  font-size: 14px; /* 根据需要调整字体大小 */
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding-left: 45px;
-  padding-bottom: 9px;
-}
-
-.alert-boxes {
-  display: flex;
-  flex-direction: column; /* 纵向排列子元素 */
-}
-
-.section-title {
-  width: 137px;
-  height: 20px;
-  background-image: url('@/assets/images/map/rightMenu/rainMonitor/titleBox.png');
-  background-size: 137px 13px;
-  background-repeat: no-repeat;
-  background-position: bottom left;
   font-size: 16px;
-  color: #fff;
-  padding-left: 20px;
   display: flex;
   align-items: center;
-  margin-bottom: 10px;
+  padding-left: 75px;
+  padding-bottom: 9px;
+  margin-bottom: -10px;
+  margin-left: -10px;
+  flex-shrink: 0;
+  .line {
+    margin: 0 3px 0 6px;
+  }
+  .text1 {
+    font-weight: bold;
+    background-image: linear-gradient(to bottom, #ffffff 30%, #aec9f3 50%, #2b72d6 100%);
+    margin: 3px;
+  }
+  .text2 {
+    background-image: linear-gradient(to bottom, #ffffff 30%, #aec9f3 50%, #2b72d6 100%);
+  }
 }
 
 .level-white {
   color: blue;
 }
-
 .alert-items {
   display: flex;
-  justify-content: space-between; /* 水平排列 */
-  align-items: flex-start; /* 图标与格子对齐顶部 */
-  flex-wrap: wrap; /* 如果内容超出宽度，则换行 */
+  justify-content: space-between;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  margin-top: 11px;
+  cursor: pointer;
+  .checked1 {
+    background: url('@/assets/images/map/warningInfo/checked1.png') no-repeat;
+  }
+  .checked2 {
+    background: url('@/assets/images/map/warningInfo/checked2.png') no-repeat;
+  }
+  .checked1,
+  .checked2 {
+    width: 16px;
+    height: 16px;
+    background-size: 100% 100%;
+    position: absolute;
+    bottom: 15px;
+    right: 10px;
+  }
 }
 
-.data-box1,
-.data-box2,
-.data-box3,
-.data-box4 {
-  width: 122px; /* 每个盒子的宽度 */
-  height: 91px; /* 每个盒子的高度 */
-  background:
-    url('@/assets/images/map/warningInfo/bg_未选中.png') no-repeat,
-    url('@/assets/images/map/warningInfo/ic_未选中.png') no-repeat;
-
-  /* 第一个背景自适应，第二个背景设置为特定大小 */
-  background-size:
-    100% 100%,
-    12px 12px; /* 第一个背景自适应，第二个为40x40像素 */
-  background-position:
-    center,
-    calc(100% - 15px) calc(100% - 15px); /* 第一个背景居中，第二个背景向左下偏移10px */
-
+.data-box1 {
+  width: 122px;
+  height: 91px;
+  background: url('@/assets/images/map/warningInfo/bgBox.png') no-repeat;
+  background-size: 100% 100%;
+  padding-left: 40px;
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center; /* 图标与文字对齐顶部 */
-  margin-right: 10px; /* 添加间距 */
-  position: relative; /* 为内部定位做准备 */
+  position: relative;
+  cursor: pointer;
+  &:hover {
+    background: url('@/assets/images/map/warningInfo/bgBox2.png') no-repeat;
+    background-size: 100% 100%;
+  }
 }
 
 .alert-icon {
   height: 42px;
+  // 向左偏移 50% 的宽度，使图标居中
+  margin-left: -50px;
+  margin-top: 15px; /* 根据需要调整位置 */
 }
 
 .box-text1 {
   color: #fff;
   font-size: 14px;
-}
-
-.alert-count {
+  // 向左偏移 50% 的宽度，使文字居中
+  margin-left: -50px;
+  margin-top: auto; /* 将文字推到图片下方 */
+  margin-bottom: 50px; /* 根据需要调整文字与底部的间距 */
 }
 
 .alert-count-items {
@@ -411,8 +396,7 @@ export default defineComponent({
   display: flex;
   flex-direction: column;
   align-items: center;
-  margin: 0; /* 移除外边距 */
-  padding: 0; /* 移除内边距 */
+  margin-left: 10px;
 }
 
 .count-icon {
@@ -423,21 +407,39 @@ export default defineComponent({
 }
 
 .count-num {
-  font-size: 16px; /* 根据需要调整字体大小 */
-  color: #fdfcfc;
-  position: absolute; /* 相对于父元素定位 */
+  position: absolute;
+  font-size: 16px;
+  font-weight: bold;
+  color: transparent;
+  background-image: linear-gradient(to bottom, #ffffff 25%, #ffffff 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  display: inline-block;
+  top: 10px;
+  font-family: BEBAS-1;
+}
+.text-red {
+  background-image: linear-gradient(to bottom, #ffffff 25%, #ff2b34 100%);
+}
+.text-orange {
+  background-image: linear-gradient(to bottom, #ffffff 25%, #ff8400 100%);
+}
+.text-yellow {
+  background-image: linear-gradient(to bottom, #ffffff 25%, #ffda00 100%);
+}
+.text-blue {
+  background-image: linear-gradient(to bottom, #ffffff 25%, #2b72d6 100%);
 }
-
 .count-level {
-  font-size: 14px; /* 根据需要调整字体大小 */
-  bottom: 24px; /* 根据需要调整位置 */
+  font-size: 14px;
+  top: 38px;
   color: #fdfcfc;
   position: absolute;
 }
 
 .alert-details {
   margin-top: 10px;
-  position: relative; /* 为了下拉菜单的绝对定位 */
+  position: relative;
 }
 
 .alert-table {
@@ -447,20 +449,19 @@ export default defineComponent({
 
 .alert-table th {
   color: #fff; /* 确保表头文字颜色 */
-  height: 32px;
   background: url('@/assets/images/map/warningInfo/bg_表头.png') no-repeat center center; /* 表头背景图 */
-  background-size: 100% 100%; /* 背景图覆盖整行 */
-  padding: 0; /* 根据需要调整内边距 */
+  background-size: cover; /* 背景图覆盖整行 */
+  padding: 16px; /* 根据需要调整内边距 */
   position: relative; /* 为下拉菜单的绝对定位做准备 */
 }
 
 .alert-table th,
 .alert-table td {
+  padding: 8px;
   text-align: left;
 }
 
 .alert-table .alert-row {
-  height: 32px;
   background: url('@/assets/images/map/warningInfo/bg_列.png') no-repeat center center; /* 行的背景图 */
   background-size: cover; /* 背景图覆盖整行 */
   transition: background 0.3s ease; /* 添加过渡效果 */
@@ -509,38 +510,4 @@ export default defineComponent({
 .dropdown-item.selected {
   background-color: #f0f0f0;
 }
-
-@media (max-width: 768px) {
-  .alert-items {
-    flex-direction: column;
-  }
-
-  .data-box1,
-  .data-box2,
-  .data-box3,
-  .data-box4 {
-    flex: none;
-    width: 100%;
-    margin-bottom: 10px;
-  }
-
-  .title {
-    position: relative;
-    left: 0;
-    text-align: center;
-  }
-
-  .count-item {
-    width: 100%;
-  }
-
-  .alert-table th,
-  .alert-table td {
-    background: none; /* 移除背景图以适应移动设备 */
-  }
-
-  .alert-table td:hover {
-    background: none;
-  }
-}
 </style>