Merge branch 'feature-hetong' into 'dev'

style: 修改灾害防范历史温度位置及样式

See merge request product-group-fe/sfy-safety-group/sfy-safety!285

src/views/disaster/overview/components/WeatherCard.vue

@@ -2,6 +2,7 @@
   <div class="weather-card">
     <div class="cloud-bg">
       <div class="basic-info">
+
         <div class="location">
           <span>上海市</span>
           <div class="date-time">
@@ -10,22 +11,20 @@
             <span>{{ currentTime }}</span>
           </div>
         </div>
-        <div class="high-stable-weather">
-          <img :src="fireIcon" alt="empty" class="icon-fire">
-          <span>本年度高温天气: {{ countHighTemperatureDays }}天</span>
-        </div>
+
+
         <div class="weather-info">
 
           <div class="temperature">{{ curTemperature || '--' }}℃</div>
 
           <div class="wind">
             <div>
-              风力:
-              <span class="wind-value">{{ windSpeedLevel || '--' }}级</span>
+
+              <span class="wind-value"> 风力: {{ windSpeedLevel || '--' }}级</span>
             </div>
             <div>
-              风速:
-              <span class="wind-value">{{ curWindVelocity || '--' }} km/h</span>
+
+              <span class="wind-value">风速: {{ curWindVelocity || '--' }} km/h</span>
             </div>
 
           </div>
@@ -42,9 +41,12 @@
           <el-loading v-if="isLoading" target=".dialog-content" text="正在加载数据...">
             <div class="dialog-content" style="min-height: 300px;"></div>
           </el-loading>
-
           <!-- 表格 -->
-          <div v-else class="dialog-content">
+          <div v-else>
+            <div class="highTemperatureWrapper">
+              <img :src="fireIcon" alt="empty" class="icon-fire">
+              <span>本年度高温天气:  {{ countHighTemperatureDays }}天</span>
+            </div>
             <el-table :data="historyTemperatureList" border stripe max-height="calc(80vh - 120px)">
               <el-table-column label="日期" align="center" width="170">
                 <template #default="scope">
@@ -281,75 +283,63 @@ onUnmounted(() => {
   justify-content: space-between;
 
   .location {
-    gap: 6px;
-    font-weight: 400;
+    gap: 20px;
+    font-weight: 600;
     font-size: 16px;
     color: #062B5D;
     line-height: 22px;
     text-align: left;
     font-style: normal;
     display: flex;
+    text-shadow: 1px 1px 1px rgba(15, 61, 125, 0.2);
   }
 
   .date-time {
-    margin-left: 12px;
     gap: 6px;
-    font-weight: 500;
-    font-size: 16px;
-    color: #062B5D;
-    line-height: 22px;
     text-align: left;
     font-style: normal;
     display: flex;
   }
 
-  .high-stable-weather {
-    font-weight: 600;
-    font-size: 16px;
-    color: #FF4D4F;
-    line-height: 22px;
-    text-align: left;
-    font-style: normal;
+  .weather-info {
     display: flex;
-    gap: 6px;
-    margin-top: 40px;
+    align-items: flex-start;
+    justify-content: space-between;
+    padding: 0;
+    margin-top: 80px;
   }
 
-  .icon-fire {
-    width: 20px;
-    height: 20px;
+  .temperature {
+    font-family: Helvetica, Helvetica;
+    font-weight: bold;
+    font-size: 64px;
+    color: #0f3d7d;
+    text-align: left;
+    font-style: normal;
+    line-height: 1;
+    margin: 0;
+    padding: 0;
   }
 
-  .weather-info {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-top: 15px;
-
-    .temperature {
-      font-family: Helvetica, Helvetica;
-      font-weight: bold;
-      font-size: 63px;
-      color: #0f3d7d;
-      line-height: 77px;
-      text-align: left;
-      font-style: normal;
-    }
+  .wind-value {
+    font-weight: 500;
+  }
 
-    .wind {
-      display: flex;
-      flex-direction: column;
-      gap: 7px;
-      font-weight: 400;
-      font-size: 16px;
-      color: #0f3d7d;
-    }
 
-    .wind-value {
-      font-weight: 500;
-    }
+  .wind {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    font-weight: 400;
+    font-size: 16px;
+    color: #0f3d7d;
+    padding-top: 0;
+    margin: 0;
+    text-align: left;
+    line-height: 1;
   }
 
+
   .history-temperature {
     width: 108px;
     height: 32px;
@@ -359,7 +349,7 @@ onUnmounted(() => {
     display: flex;
     align-items: center;
     justify-content: center;
-    margin-top: 15px;
+    margin-top: 15px
   }
 
   .icon-history-temperature {
@@ -386,31 +376,52 @@ onUnmounted(() => {
   background-position: center;
   border-radius: 8px;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
-  
+
+  .highTemperatureWrapper {
+    background: rgba(255, 77, 77, 0.12);
+    border-radius: 4px;
+    backdrop-filter: blur(5.42253521126761px);
+    height: 40px;
+    margin: 10px 0;
+    font-weight: 800;
+    font-size: 16px;
+    color: #FF4D4F;
+    text-align: left;
+    font-style: normal;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+
+  }
+
+  .icon-fire {
+    width: 20px;
+    height: 20px;
+  }
+
   .el-dialog__header {
-    padding-left: 0px;
-    padding-top: 0px;
+    padding:5px 0;
     border: none;
     display: flex;
     position: relative;
     align-items: center;
     justify-content: flex-start;
-    width: 100%;
   }
 
   .el-dialog__headerbtn {
     width: 16px;
     height: 16px;
     right: 0px;
-    top:5px;
+    top: 5px;
   }
 
   .el-dialog__title {
     font-family: PingFangSC, PingFang SC;
-    font-weight: bold;
+    font-weight: 800;
     font-size: 16px;
     color: rgba(0, 0, 0, 0.88);
-    line-height: 24px;
+    line-height:24px;
     text-align: left;
     font-style: normal;
   }
@@ -421,6 +432,8 @@ onUnmounted(() => {
 }
 
 :deep(.el-table) {
+  border-radius: 8px;
+
   .el-table__header {
     .el-table__cell {
       font-family: 'PingFang SC';