预警信号

src/views/globalMap/RightMenu/WarningInfo.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="menu-content">
     <div class="warning-info">
-      <div class="gradient-text title">预警信号</div>
+      <div class="gradient-text common-dialog-title">预警信号</div>
 
       <!-- 当前时间显示 -->
       <div class="current-time" :style="{ backgroundImage: `url(${dateTimeBg})` }">日期 {{ formattedTime }}</div>
@@ -32,7 +32,7 @@
       <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" />
+          <img src="@/assets/images/map/warningInfo/ic_发布数量统计.png" alt="发布数量统计" class="count-icon" style="height: 70px" />
           <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" />
@@ -295,19 +295,14 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .menu-content {
-  width: 1579px;
-  height: 1394px;
+  width: 574px;
+  height: 581px;
   background: url('@/assets/images/map/rightMenu/content.png') no-repeat;
-  padding: 130px 20px 20px 20px;
-  font-size: 36px;
+  background-size: 100% 100%;
+  padding: 60px 10px 10px 15px;
+  font-size: 14px;
   position: relative;
-  color: #000000;
-}
-.title {
-  font-size: 60px;
-  position: absolute;
-  top: 30px;
-  left: 160px;
+  color: #ffffff;
 }
 
 .warning-info {
@@ -317,17 +312,18 @@ export default defineComponent({
 }
 
 .current-time {
-  width: 800px; /* 根据背景图的宽度调整 */
-  height: 150px; /* 根据背景图的高度调整 */
-  background-size: cover; /* 背景图覆盖整个盒子 */
+  width: 254px; /* 根据背景图的宽度调整 */
+  height: 65px; /* 根据背景图的高度调整 */
+  background-size: 100% 100%; /* 背景图覆盖整个盒子 */
   background-repeat: no-repeat; /* 禁止背景图重复 */
   background-position: center; /* 背景图居中 */
   color: #fff;
-  font-size: 38px; /* 根据需要调整字体大小 */
+  font-size: 14px; /* 根据需要调整字体大小 */
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-bottom: 20px; /* 与下方内容的间距 */
+  padding-left: 45px;
+  padding-bottom: 9px;
 }
 
 .alert-boxes {
@@ -336,19 +332,18 @@ export default defineComponent({
 }
 
 .section-title {
-  width: 370px;
-  height: 35px;
+  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;
-  padding-left: 50px;
+  font-size: 16px;
+  color: #fff;
+  padding-left: 20px;
   display: flex;
   align-items: center;
-  margin-bottom: 30px;
-  color: #fefefe;
-  font-size: 44px;
-  font-weight: bold;
-  padding-bottom: 25px;
+  margin-bottom: 10px;
 }
 
 .level-white {
@@ -360,62 +355,54 @@ export default defineComponent({
   justify-content: space-between; /* 水平排列 */
   align-items: flex-start; /* 图标与格子对齐顶部 */
   flex-wrap: wrap; /* 如果内容超出宽度，则换行 */
-  margin-top: 20px;
 }
 
 .data-box1,
 .data-box2,
 .data-box3,
 .data-box4 {
-  width: 350px; /* 每个盒子的宽度 */
-  height: 260px; /* 每个盒子的高度 */
+  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:
-    contain,
-    40px 40px; /* 第一个背景自适应，第二个为40x40像素 */
+    100% 100%,
+    12px 12px; /* 第一个背景自适应，第二个为40x40像素 */
   background-position:
     center,
-    calc(100% - 20px) calc(100% - 20px); /* 第一个背景居中，第二个背景向左下偏移10px */
+    calc(100% - 15px) calc(100% - 15px); /* 第一个背景居中，第二个背景向左下偏移10px */
 
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: flex-start; /* 图标与文字对齐顶部 */
+  justify-content: center; /* 图标与文字对齐顶部 */
   margin-right: 10px; /* 添加间距 */
   position: relative; /* 为内部定位做准备 */
 }
 
 .alert-icon {
-  // 向左偏移 50% 的宽度，使图标居中
-  margin-left: -50px;
-  margin-top: 30px; /* 根据需要调整位置 */
+  height: 42px;
 }
 
 .box-text1 {
   color: #fff;
-  font-size: 36px;
-  // 向左偏移 50% 的宽度，使文字居中
-  margin-left: -50px;
-  margin-top: auto; /* 将文字推到图片下方 */
-  margin-bottom: 50px; /* 根据需要调整文字与底部的间距 */
+  font-size: 14px;
 }
 
 .alert-count {
-  margin-top: 20px;
 }
 
 .alert-count-items {
-  width: 1492px;
-  height: 200px;
+  width: 552px;
+  height: 80px;
   background: url('@/assets/images/map/warningInfo/bg_底座.png') no-repeat;
-  background-size: 1492px 123px;
+  background-size: 552px 45px;
   background-position: bottom center;
   gap: 0; /* 可选：添加间距 */
-  padding: 20px; /* 根据需要调整内边距 */
+  padding: 7px; /* 根据需要调整内边距 */
   display: flex; /* 水平排列发布数量统计 */
   position: relative; /* 用于设置子元素的位置 */
 }
@@ -429,28 +416,27 @@ export default defineComponent({
 }
 
 .count-icon {
-  width: 218px;
-  height: 131px;
+  height: 52px;
   margin: 0; /* 移除外边距 */
   padding: 0; /* 移除内边距 */
   display: block; /* 确保图片以块级元素显示，避免因行内元素的空白字符产生间隔 */
 }
 
 .count-num {
-  font-size: 40px; /* 根据需要调整字体大小 */
+  font-size: 16px; /* 根据需要调整字体大小 */
   color: #fdfcfc;
   position: absolute; /* 相对于父元素定位 */
 }
 
 .count-level {
-  font-size: 26px; /* 根据需要调整字体大小 */
-  top: 100px; /* 根据需要调整位置 */
+  font-size: 14px; /* 根据需要调整字体大小 */
+  bottom: 24px; /* 根据需要调整位置 */
   color: #fdfcfc;
   position: absolute;
 }
 
 .alert-details {
-  margin-top: 20px;
+  margin-top: 10px;
   position: relative; /* 为了下拉菜单的绝对定位 */
 }
 
@@ -461,19 +447,20 @@ export default defineComponent({
 
 .alert-table th {
   color: #fff; /* 确保表头文字颜色 */
+  height: 32px;
   background: url('@/assets/images/map/warningInfo/bg_表头.png') no-repeat center center; /* 表头背景图 */
-  background-size: cover; /* 背景图覆盖整行 */
-  padding: 16px; /* 根据需要调整内边距 */
+  background-size: 100% 100%; /* 背景图覆盖整行 */
+  padding: 0; /* 根据需要调整内边距 */
   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; /* 添加过渡效果 */

src/views/globalMap/RightMenu/index.vue

@@ -363,13 +363,15 @@ defineExpose({ handleMenu, clickContractMenu, updateMenu, getMenuState });
   background: url('@/assets/images/map/rightMenu/icon8_checked.png') no-repeat;
 }
 .icon9 {
-  width: 89px;
-  height: 87px;
+  width: 29.5px;
+  height: 28.5px;
   background: url('@/assets/images/map/rightMenu/icon9.png') no-repeat;
+  background-size: 100% 100%;
   cursor: pointer;
 }
 .icon9_checked {
   background: url('@/assets/images/map/rightMenu/icon9_checked.png') no-repeat;
+  background-size: 100% 100%;
 }
 .icon10 {
   width: 28.5px;