公卫应急处置调整

src/assets/styles/index.scss

@@ -83,20 +83,20 @@ html {
   background-color: transparent !important;
 }
 
-.el-date-editor {
-  --el-input-text-color: #ffffff !important;
-  --el-input-border-color: #45d2ff !important;
-  --el-input-border-radius: 8px !important;
-  width: 240px !important;
-  // background: transparent !important;
-  background: linear-gradient(90deg, #2e5877 0%, #0a2446 100%) !important;
-  text-transform: none;
-  .el-range-separator {
-    padding: 0px !important;
-    color: #ffffff !important;
-  }
+// .el-date-editor {
+//   --el-input-text-color: #ffffff !important;
+//   --el-input-border-color: #45d2ff !important;
+//   // --el-input-border-radius: 8px !important;
+//   width: 240px !important;
+//   // background: transparent !important;
+//   background: linear-gradient(90deg, #2e5877 0%, #0a2446 100%) !important;
+//   text-transform: none;
+//   .el-range-separator {
+//     padding: 0px !important;
+//     color: #ffffff !important;
+//   }
 
-}
+// }
 
 
 

src/views/index.vue

@@ -3,10 +3,10 @@
     <Map />
     <!-- 头部 -->
     <div class="home_container_header">
-      <div class="home_container_header-left" :class="{ 'home_left_bg_max': commonStore.activeIndex === 1 }">
+      <div class="home_container_header-left" :class="{ home_left_bg_max: commonStore.activeIndex === 1 }">
         <div class="home_container_header-left_time">
-          <img class="time_icon" src="../assets/img/risk_info_icon-1.png" alt="" />
-          <div class="clock">{{ currentTime }}</div>
+          <!-- <img class="time_icon" src="../assets/img/risk_info_icon-1.png" alt="" />
+          <div class="clock">{{ currentTime }}</div> -->
         </div>
         <div class="home_container_header-left_tab">
           <div class="button-container">
@@ -18,7 +18,7 @@
           </div>
         </div>
       </div>
-      <div class="home_container_header-right" >
+      <div class="home_container_header-right">
         <div class="telephone-directory">
           <div class="icon-img"></div>
           <div class="text">通讯录</div>
@@ -32,7 +32,7 @@
     <div class="home_content_left" :class="{ home_left_bg_max: commonStore.activeIndex === 1 }">
       <LeftPage :activeIndex="activeIndex" class="left_page"></LeftPage>
     </div>
-    <div class="home_content_right"  :class="{ home_right_bg_max: commonStore.activeIndex === 1 &&(!rightPanelStore.emergencyVisible) }">
+    <div class="home_content_right" :class="{ home_right_bg_max: commonStore.activeIndex === 1 && !rightPanelStore.emergencyVisible }">
       <RightPage :activeIndex="activeIndex" class="right_page"></RightPage>
     </div>
     <!-- 底部片区图层按钮 -->
@@ -208,7 +208,10 @@ watch(
 
     .home_container_header-left_tab {
       z-index: 2;
-
+      position: absolute;
+      // left: 31px;
+      left: 447px;
+      top: 10px;
       .button-container {
         display: flex;
         justify-content: center;
@@ -283,7 +286,7 @@ watch(
   .home_container_header-right {
     position: absolute;
     right: 0px;
-    top:7px;
+    top: 7px;
     // width: 1124px;
     width: 1150px;
     height: 100px;
@@ -354,7 +357,7 @@ watch(
 .home_content_left {
   position: absolute;
   left: 0px;
-  top:90px;
+  top: 90px;
   width: 1250px;
   height: 988px;
   z-index: 0;
@@ -366,7 +369,7 @@ watch(
 
   .left_page {
     position: absolute;
-    left: 31px;
+    left: 20px;
     top: 10px;
     // top: 100px;
     width: 1124px;
@@ -375,8 +378,6 @@ watch(
   }
 }
 
-
-
 // 右侧
 .home_content_right {
   position: absolute;
@@ -389,9 +390,9 @@ watch(
   // background: url('../assets/img/right_bg (2).png') no-repeat;
   background: url('../assets/img/Frame 2136636887.png') no-repeat;
   // background: url('../assets/img/右背景_2.png') no-repeat;
-  background-size: 100% 100%;  
+  background-size: 100% 100%;
   // z-index: 0;
-  .right_page{
+  .right_page {
     position: absolute;
     right: 31px;
     top: 20px;
@@ -400,14 +401,13 @@ watch(
   }
 }
 
-.home_left_bg_max{
+.home_left_bg_max {
   // width: 1360px;
 }
-.home_right_bg_max{
+.home_right_bg_max {
   width: 630px !important;
 }
 
-
 .video_call_po {
   position: fixed;
   // left: 2100px;

src/views/left/dialog/PublicHealthRisksDialog.vue

@@ -348,7 +348,7 @@ function handleRowClick(row) {
 
 // 表格行间距
 :deep(.el-table__body) {
-  -webkit-border-vertical-spacing: 6px;
+  -webkit-border-vertical-spacing: 5px;
 }
 
 :deep(.el-table__inner-wrapper:before) {
@@ -389,11 +389,14 @@ function handleRowClick(row) {
   // color: #e6ebef;
 }
 :deep(.el-date-editor) {
-  background-color: #0c2b4a;
+  // background-color: #0c2b4a;
   border-radius: 3px;
-  border: 1px solid #1e90ff;
+  // border: 1px solid rgba(111, 229, 255,0.3);
+  --el-input-border-color: rgba(111, 229, 255,0.3) !important;
   color: white;
   width: 100%;
+  // background: linear-gradient(90deg, #052e57 0%, #0a2446 100%) !important;
+  background: transparent !important;
 }
 </style>
 <style lang="scss">

src/views/left/index.vue

@@ -15,7 +15,7 @@
           class="date-input"
           format="YYYY/MM/DD"
         />
-        <el-icon class="fixed-icon" ><Calendar /></el-icon>
+        <el-icon class="fixed-icon"><Calendar /></el-icon>
       </div>
       <div class="button-container">
         <div v-for="(item, index) in buttons" :key="item.id" class="parallelogram-button" :class="{ highlight: commonStore.tabActiveIndex === index }" @click="setActive(index)">
@@ -132,11 +132,12 @@ function changeRiskView() {
   height: 970px;
 
   .left_container_header-left_tab {
-    margin-bottom: 12px;
+    margin-bottom: 2px;
     // display: flex;
     // align-items: center;
     position: relative;
     margin-left: 8px;
+    height: 32px;
     .date_picker_box {
       position: absolute;
     }
@@ -201,17 +202,29 @@ function changeRiskView() {
 }
 
 :deep(.el-range-editor.el-input__wrapper) {
-    border-radius: 6px;
+  border-radius: 6px;
 }
 
-  :deep(.el-range-input) {
-    color: #ffffff; /* 输入的文字颜色 */
-  }
-  :deep(.el-range-input::placeholder) {
-    color: #ffffff !important; /* placeholder 颜色为白色 */
-    opacity: 1; /* 防止透明 */
+:deep(.el-range-input) {
+  color: #ffffff; /* 输入的文字颜色 */
+}
+:deep(.el-range-input::placeholder) {
+  color: #ffffff !important; /* placeholder 颜色为白色 */
+  opacity: 1; /* 防止透明 */
+}
+:deep(.el-date-editor) {
+  --el-input-text-color: #ffffff !important;
+  --el-input-border-color: #45d2ff !important;
+  // --el-input-border-radius: 8px !important;
+  width: 240px !important;
+  // background: transparent !important;
+  background: linear-gradient(90deg, #2e5877 0%, #0a2446 100%) !important;
+  text-transform: none;
+  .el-range-separator {
+    padding: 0px !important;
+    color: #ffffff !important;
   }
-
+}
 </style>
 <style scoped>
 .custom-date-picker {
@@ -244,6 +257,4 @@ function changeRiskView() {
   pointer-events: none;
   font-size: 16px;
 }
-
-
 </style>

src/views/left/modules/PublicHealthEmergency.vue

@@ -124,7 +124,7 @@
               <!-- <el-progress class="circle" type="circle" :percentage="52" /> -->
               <!-- <MyProgress :percentage="52" :gradientStart="'#83804f'" :gradientEnd="'#ffca0c'"></MyProgress> -->
 
-              <MyProgress :value="50" backgroundColor="#2d4c7f" gradient-start="#83804f" gradient-end="#ffca0c" text-color="#ffffff" :stroke-width="8" :size="48"></MyProgress>
+              <MyProgress :value="50" backgroundColor="#2d4c7f" gradient-start="#83804f" gradient-end="#ffca0c" text-color="#ffffff" :stroke-width="8" :size="54"></MyProgress>
               <span class="text">使用率</span>
             </div>
           </div>
@@ -162,7 +162,7 @@
               <div class="progress">
                 <!-- <el-progress class="circle" type="circle" :percentage="52" /> -->
                 <!-- <MyProgress :percentage="50" :gradientStart="'#9ee6f6'" :gradientEnd="'#62e3ff'"></MyProgress> -->
-                <MyProgress :value="50" backgroundColor="#2d4c7f" gradient-start="#9ee6f6" gradient-end="#62e3ff" text-color="#ffffff" :stroke-width="8" :size="48"></MyProgress>
+                <MyProgress :value="50" backgroundColor="#2d4c7f" gradient-start="#9ee6f6" gradient-end="#62e3ff" text-color="#ffffff" :stroke-width="8" :size="54"></MyProgress>
                 <span class="text">出动率</span>
               </div>
             </div>
@@ -191,7 +191,7 @@
             <div class="progress">
               <!-- <el-progress class="circle" type="circle" :percentage="78" /> -->
               <!-- <MyProgress :percentage="78" :gradientStart="'#ecc5af'" :gradientEnd="'#ff9a62'"></MyProgress> -->
-              <MyProgress :value="78" backgroundColor="#2d4c7f" gradient-start="#ecc5af" gradient-end="#ff9a62" text-color="#ffffff" :stroke-width="8" :size="48"></MyProgress>
+              <MyProgress :value="78" backgroundColor="#2d4c7f" gradient-start="#ecc5af" gradient-end="#ff9a62" text-color="#ffffff" :stroke-width="8" :size="54"></MyProgress>
               <span class="text">出动率</span>
             </div>
           </div>

src/views/left/modules/ReportDisposal.vue

@@ -3,18 +3,18 @@
     <!-- 1.============= -->
     <div class="content_one">
       <!-- 风险报告 -->
-      <div class="modules_bg_color modules_bg" :class="{ modules_bg_color_active: commonStore.activeModule === '风险报告' }">
+      <div class="modules_bg_color modules_bg fxbg_box" :class="{ modules_bg_color_active: commonStore.activeModule === '风险报告' }">
         <TitleHeadermini :title="'风险报告'" @setActiveModule="setActiveModule"></TitleHeadermini>
-        <div>
+        <div class="fxbg_box_content">
           <RiskReport :levelObj="riskReportObj"></RiskReport>
         </div>
       </div>
 
       <!-- 风险总览 -->
-      <div class="modules_bg_color modules_bg2" :class="{ modules_bg_color_active: commonStore.activeModule === '风险总览' }">
+      <div class="modules_bg_color modules_bg2 fxzl_box" :class="{ modules_bg_color_active: commonStore.activeModule === '风险总览' }">
         <TitleHeader :title="'风险总览'" :buttons="riskOverViewButtons" @setActiveModule="setActiveModule" @btnClick="btnClick"></TitleHeader>
-        <div class="modules_bg2_body">
-          <div>
+        <div class="modules_bg2_body fxzl_box_conetent">
+          <div class="fxzl_box_conetent_left">
             <RiskReport :levelObj="riskOverViewObj"></RiskReport>
           </div>
           <div class="modules_bg2_body_right">
@@ -65,129 +65,131 @@
         <div class="open_icon" @click="openRiskBigTable"><img src="@/assets/img/展开箭头.png" alt="" /></div>
       </div>
       <div class="content_four_body">
-        <!-- 派单情况 -->
-        <div class="modules_bg_color2 modules_bg_pdqk" :class="{ modules_bg_color_active: commonStore.activeModule === '派单情况' }">
-          <TowLevelTitle :title="'派单情况'" @setActiveModule="setActiveModule"></TowLevelTitle>
-          <div class="modules_bg_pdqk_body">
-            <div class="modules_bg_pdqk_body_item">
-              <img src="../../../assets//img/发出指令.png" alt="" />
-              <div>发出指令</div>
-              <span>25</span>
-            </div>
+        <div class="content_four_content">
+          <!-- 派单情况 -->
+          <div class="modules_bg_pdqk_color modules_bg_pdqk" :class="{ modules_bg_color_active: commonStore.activeModule === '派单情况' }">
+            <TowLevelTitle :title="'派单情况'" @setActiveModule="setActiveModule"></TowLevelTitle>
+            <div class="modules_bg_pdqk_body">
+              <div class="modules_bg_pdqk_body_item">
+                <img src="../../../assets//img/发出指令.png" alt="" />
+                <div>发出指令</div>
+                <span>25</span>
+              </div>
 
-            <div class="modules_bg_pdqk_body_item">
-              <img src="../../../assets//img/签收指令.png" alt="" />
-              <div>签收指令</div>
-              <span>22</span>
-            </div>
+              <div class="modules_bg_pdqk_body_item">
+                <img src="../../../assets//img/签收指令.png" alt="" />
+                <div>签收指令</div>
+                <span>22</span>
+              </div>
 
-            <div class="modules_bg_pdqk_body_item">
-              <img src="../../../assets//img/完成指令.png" alt="" />
-              <div>完成指令</div>
-              <span>17</span>
-            </div>
+              <div class="modules_bg_pdqk_body_item">
+                <img src="../../../assets//img/完成指令.png" alt="" />
+                <div>完成指令</div>
+                <span>17</span>
+              </div>
 
-            <!-- <div class="line">
+              <!-- <div class="line">
               <img src="../../../assets/img/连线方向箭头.png" alt="" class="line_img1" />
               <img src="../../../assets/img/连线方向箭头.png" alt="" class="line_img2" />
             </div> -->
-            <div class="imgbox img-first"><img src="../../../assets/img/连线方向箭头.png" alt="" class="line_img1" /></div>
-            <div class="imgbox img-second"><img src="../../../assets/img/连线方向箭头.png" alt="" class="line_img1" /></div>
+              <div class="imgbox img-first"><img src="../../../assets/img/连线方向箭头.png" alt="" class="line_img1" /></div>
+              <div class="imgbox img-second"><img src="../../../assets/img/连线方向箭头.png" alt="" class="line_img1" /></div>
+            </div>
           </div>
-        </div>
 
-        <!-- 检测设备 -->
-        <div class="modules_bg_color2 modules_bg_jcsb" :class="{ modules_bg_color_active: commonStore.activeModule === '检测设备' }">
-          <TowLevelTitle :title="'检测设备'" @setActiveModule="setActiveModule"></TowLevelTitle>
-          <div class="modules_bg_jcsb_body">
-            <!-- <RiskTwoView :levelObj="riskTwoViewObj"></RiskTwoView> -->
-            <div class="modules_bg_jcsb_body_left">
-              <div class="modules_bg_jcsb_body_left_content">
-                <div>
-                  <img src="../../../assets//img/装备总数.png" alt="" />
-                  <div>装备总数</div>
-                  <span>205</span>
+          <!-- 检测设备 -->
+          <div class="modules_bg__jcsb_color modules_bg_jcsb" :class="{ modules_bg_color_active: commonStore.activeModule === '检测设备' }">
+            <TowLevelTitle :title="'检测设备'" @setActiveModule="setActiveModule"></TowLevelTitle>
+            <div class="modules_bg_jcsb_body">
+              <!-- <RiskTwoView :levelObj="riskTwoViewObj"></RiskTwoView> -->
+              <div class="modules_bg_jcsb_content">
+                <div class="modules_bg_jcsb_body_left">
+                  <div class="modules_bg_jcsb_body_left_content">
+                    <div>
+                      <img src="../../../assets//img/装备总数.png" alt="" />
+                      <div>装备总数</div>
+                      <span>205</span>
+                    </div>
+                    <img src="../../../assets/img/方向箭头.png" alt="" />
+                    <div>
+                      <div>使用中</div>
+                      <span>108</span>
+                    </div>
+                  </div>
                 </div>
-                <img src="../../../assets/img/方向箭头.png" alt="" />
-                <div>
-                  <div>使用中</div>
-                  <span>108</span>
+                <div class="progress">
+                  <!-- <MyProgress :value="50" backgroundColor="#2d4c7f" gradient-start="#83804f" gradient-end="#ffca0c" text-color="#ffffff" :stroke-width="8" :size="48"></MyProgress> -->
+                  <MyProgress :value="52" backgroundColor="#2d4c7f" gradient-start="#83804f" gradient-end="#ffca0c" text-color="#ffffff" :stroke-width="8" :size="54"></MyProgress>
+                  <span class="text">使用率</span>
                 </div>
               </div>
             </div>
-            <div class="progress">
-              <!-- <el-progress class="circle" type="circle" :percentage="52" /> -->
-              <!-- <MyProgress :percentage="52" :gradientStart="'#83804f'" :gradientEnd="'#ffca0c'"></MyProgress> -->
-
-              <MyProgress :value="50" backgroundColor="#2d4c7f" gradient-start="#83804f" gradient-end="#ffca0c" text-color="#ffffff" :stroke-width="8" :size="48"></MyProgress>
-              <span class="text">使用率</span>
-            </div>
           </div>
-        </div>
 
-        <!-- 应急人员 -->
-        <div class="modules_bg_color2 modules_bg_yjry" :class="{ modules_bg_color_active: commonStore.activeModule === '应急人员' }">
-          <TowLevelTitle :title="'应急人员'" @setActiveModule="setActiveModule"></TowLevelTitle>
-          <div class="modules_bg_yjry_body">
-            <!-- <RiskTwoView :levelObj="riskTwoViewObj"></RiskTwoView> -->
-            <div class="modules_bg_yjry_body_zhz">
-              <img src="../../../assets//img/指挥长.png" alt="" />
-              <span>指挥长</span>
-              <div>
-                张三
-                <img src="../../../assets/img/视频电话.png" alt="" />
+          <!-- 应急人员 -->
+          <div class="modules_bg_color2 modules_bg_yjry" :class="{ modules_bg_color_active: commonStore.activeModule === '应急人员' }">
+            <TowLevelTitle :title="'应急人员'" @setActiveModule="setActiveModule"></TowLevelTitle>
+            <div class="modules_bg_yjry_body">
+              <!-- <RiskTwoView :levelObj="riskTwoViewObj"></RiskTwoView> -->
+              <div class="modules_bg_yjry_body_zhz">
+                <img src="../../../assets//img/指挥长.png" alt="" />
+                <span>指挥长</span>
+                <div>
+                  张三
+                  <img src="../../../assets/img/视频电话.png" alt="" />
+                </div>
+              </div>
+              <div class="line"></div>
+              <div class="modules_bg_yjry_left_content">
+                <div class="modules_bg_yjry_left">
+                  <div class="modules_bg_yjry_left_content">
+                    <div>
+                      <img src="../../../assets//img/备班人数.png" alt="" />
+                      <div>备班人数</div>
+                      <span>205</span>
+                    </div>
+                    <img src="../../../assets/img/方向箭头.png" alt="" />
+                    <div>
+                      <div>出动数</div>
+                      <span>108</span>
+                    </div>
+                  </div>
+                </div>
+                <div class="progress">
+                  <MyProgress :value="50" backgroundColor="#2d4c7f" gradient-start="#9ee6f6" gradient-end="#62e3ff" text-color="#ffffff" :stroke-width="8" :size="54"></MyProgress>
+                  <span class="text">出动率</span>
+                </div>
               </div>
             </div>
-            <div class="line"></div>
-            <div class="modules_bg_yjry_left_content">
-              <div class="modules_bg_yjry_left">
-                <div class="modules_bg_yjry_left_content">
+          </div>
+
+          <!-- 应急车辆 -->
+          <div class="modules_bg_color2 modules_bg_jcsb" :class="{ modules_bg_color_active: commonStore.activeModule === '应急车辆' }">
+            <TowLevelTitle :title="'应急车辆'" @setActiveModule="setActiveModule"></TowLevelTitle>
+            <div class="modules_bg_jcsb_body">
+              <!-- <RiskTwoView :levelObj="riskTwoViewObj"></RiskTwoView> -->
+            <div class="modules_bg_jcsb_content">
+                <div class="modules_bg_jcsb_body_left">
+                <div class="modules_bg_jcsb_body_left_content">
                   <div>
-                    <img src="../../../assets//img/备班人数.png" alt="" />
-                    <div>备班人数</div>
-                    <span>205</span>
+                    <img src="../../../assets//img/车辆.png" alt="" />
+                    <div>车辆</div>
+                    <span>115</span>
                   </div>
                   <img src="../../../assets/img/方向箭头.png" alt="" />
                   <div>
                     <div>出动数</div>
-                    <span>108</span>
+                    <span>90</span>
                   </div>
                 </div>
               </div>
               <div class="progress">
-                <!-- <el-progress class="circle" type="circle" :percentage="52" /> -->
-                <!-- <MyProgress :percentage="50" :gradientStart="'#9ee6f6'" :gradientEnd="'#62e3ff'"></MyProgress> -->
-                <MyProgress :value="50" backgroundColor="#2d4c7f" gradient-start="#9ee6f6" gradient-end="#62e3ff" text-color="#ffffff" :stroke-width="8" :size="48"></MyProgress>
+                <!-- <el-progress class="circle" type="circle" :percentage="78" /> -->
+                <!-- <MyProgress :percentage="78" :gradientStart="'#ecc5af'" :gradientEnd="'#ff9a62'"></MyProgress> -->
+                <MyProgress :value="78" backgroundColor="#2d4c7f" gradient-start="#ecc5af" gradient-end="#ff9a62" text-color="#ffffff" :stroke-width="8" :size="54"></MyProgress>
                 <span class="text">出动率</span>
               </div>
             </div>
-          </div>
-        </div>
-
-        <!-- 应急车辆 -->
-        <div class="modules_bg_color2 modules_bg_jcsb" :class="{ modules_bg_color_active: commonStore.activeModule === '应急车辆' }">
-          <TowLevelTitle :title="'应急车辆'" @setActiveModule="setActiveModule"></TowLevelTitle>
-          <div class="modules_bg_jcsb_body">
-            <!-- <RiskTwoView :levelObj="riskTwoViewObj"></RiskTwoView> -->
-            <div class="modules_bg_jcsb_body_left">
-              <div class="modules_bg_jcsb_body_left_content">
-                <div>
-                  <img src="../../../assets//img/车辆.png" alt="" />
-                  <div>车辆</div>
-                  <span>115</span>
-                </div>
-                <img src="../../../assets/img/方向箭头.png" alt="" />
-                <div>
-                  <div>出动数</div>
-                  <span>90</span>
-                </div>
-              </div>
-            </div>
-            <div class="progress">
-              <!-- <el-progress class="circle" type="circle" :percentage="78" /> -->
-              <!-- <MyProgress :percentage="78" :gradientStart="'#ecc5af'" :gradientEnd="'#ff9a62'"></MyProgress> -->
-              <MyProgress :value="78" backgroundColor="#2d4c7f" gradient-start="#ecc5af" gradient-end="#ff9a62" text-color="#ffffff" :stroke-width="8" :size="48"></MyProgress>
-              <span class="text">出动率</span>
             </div>
           </div>
         </div>
@@ -455,8 +457,41 @@ onMounted(() => {
 }
 
 .content_one {
+  width: 1124px;
+  height: 253px;
   display: flex;
   gap: 16px;
+  .fxbg_box {
+    width: 300px;
+    height: 253px;
+    display: flex;
+    flex-direction: column;
+    .fxbg_box_content {
+      display: flex;
+      justify-content: center;
+      margin-top: 10px;
+      width: 300px;
+      height: 117px;
+    }
+  }
+
+  .fxzl_box {
+    width: 808px;
+    height: 253px;
+    display: flex;
+    flex-direction: column;
+    .fxzl_box_conetent {
+      width: 808px;
+      height: 177px;
+      margin-top: 10px;
+      display: flex;
+      justify-content: center;
+      .fxzl_box_conetent_left {
+        width: 280px;
+        height: 177px;
+      }
+    }
+  }
 }
 
 .modules_bg_color {
@@ -484,19 +519,19 @@ onMounted(() => {
   background-size: 100% 50%;
 }
 
-.modules_bg {
-  display: flex;
-  flex-direction: column;
-  // justify-content: center;
-  align-items: center;
-  width: 300px;
-  // height: 253px;
-  height: 244px;
-  padding: 0 10px;
-  box-sizing: border-box;
+// .modules_bg {
+//   display: flex;
+//   flex-direction: column;
+//   // justify-content: center;
+//   align-items: center;
+//   width: 300px;
+//   height: 253px;
+//   // height: 244px;
+//   padding: 0 10px;
+//   box-sizing: border-box;
 
-  // background: url('../../../assets/img/m_bg.png');
-}
+//   // background: url('../../../assets/img/m_bg.png');
+// }
 
 .modules_bg2 {
   width: 808px;
@@ -556,10 +591,11 @@ onMounted(() => {
 
 .content_four {
   // flex: 1;
-  width: 100%;
-  height: 210px;
+  width: 1124;
+  height: 201px;
   .content_four_header {
-    width: 100%;
+    width: 1124px;
+    height: 54px;
     position: relative;
     .open_icon {
       position: absolute;
@@ -574,7 +610,17 @@ onMounted(() => {
     }
   }
   .content_four_body {
-    height: 152px;
+    height: 134px;
+    width: 1124;
+    display: flex;
+    align-items: center;
+  }
+  .content_four_content {
+    width: 1124px;
+    height: 125px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
     padding: 0 10px;
     box-sizing: border-box;
     display: flex;
@@ -586,60 +632,74 @@ onMounted(() => {
     // border-image: linear-gradient(180deg, rgba(7, 108, 208, 0), rgba(168, 212, 235, 1)) 1 1;
   }
 
+  .modules_bg_pdqk_color {
+    height: 78px;
+    width: 300px;
+    background: linear-gradient(180deg, rgba(32, 70, 121, 0) 2%, rgba(32, 70, 121, 0.8) 100%);
+    border-radius: 0px 0px 0px 0px;
+  }
   // 检测设备  应急车辆
   .modules_bg_jcsb {
     width: 223px;
     height: 126px;
-    padding: 0px 5px 0px;
+    // padding: 0px 5px 0px;
     // padding-left: 5px;
     box-sizing: border-box;
 
     .modules_bg_jcsb_body {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-
-      .modules_bg_jcsb_body_left {
-        width: 140px;
-
-        .modules_bg_jcsb_body_left_content {
-          display: flex;
-          align-items: end;
-          justify-content: space-between;
-          width: 140;
+      width: 223px;
+      margin-top: 3px;
+      .modules_bg_jcsb_content {
+        width: 223px;
+        height: 80px;
+        padding: 0 10px;
+        box-sizing: border-box;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .modules_bg_jcsb_body_left {
+          width: 140px;
 
-          > div {
+          .modules_bg_jcsb_body_left_content {
             display: flex;
-            flex-direction: column;
-            align-items: center;
-            font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
-            font-weight: normal;
-            font-size: 14px;
-            // color: rgba(255, 255, 255, 0.9);
-            color: #e8ebf0;
-            font-style: normal;
-            text-transform: none;
+            align-items: end;
+            justify-content: space-between;
+            width: 140;
 
-            > span {
-              font-family: Roboto, Roboto;
-              font-size: 16px;
+            > div {
+              display: flex;
+              flex-direction: column;
+              align-items: center;
+              font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
+              font-weight: normal;
+              font-size: 14px;
+              // color: rgba(255, 255, 255, 0.9);
+              color: #e8ebf0;
               font-style: normal;
               text-transform: none;
-              background: linear-gradient(to bottom, #ffffff 50%, #49ffff 100%);
-              -webkit-background-clip: text;
-              -webkit-text-fill-color: transparent;
+
+              > span {
+                font-family: Roboto, Roboto;
+                font-size: 16px;
+                font-style: normal;
+                text-transform: none;
+                background: linear-gradient(to bottom, #ffffff 50%, #49ffff 100%);
+                -webkit-background-clip: text;
+                -webkit-text-fill-color: transparent;
+              }
+              > img {
+                width: 48px;
+                // height: 48px;
+                height: 52px;
+              }
             }
+
             > img {
-              width: 48px;
-              height: 48px;
+              width: 22px;
+              height: 21px;
+              margin: 0px 5px 10px 5px;
             }
           }
-
-          > img {
-            width: 22px;
-            height: 21px;
-            margin: 0px 5px 10px 5px;
-          }
         }
       }
 
@@ -680,11 +740,16 @@ onMounted(() => {
     }
   }
 
+  .modules_bg__jcsb_color {
+    background: linear-gradient(180deg, rgba(32, 70, 121, 0) 2%, rgba(32, 70, 121, 0.8) 100%);
+    border-radius: 0px 0px 0px 0px;
+  }
+
   // 派单情况
   .modules_bg_pdqk {
     width: 300px;
-    height: 126px;
-    padding: 0px 20px 10px;
+    height: 125px;
+    padding: 0px 10px 10px;
     box-sizing: border-box;
 
     .modules_bg_pdqk_body {
@@ -692,19 +757,25 @@ onMounted(() => {
       align-items: center;
       justify-content: space-between;
       position: relative;
+      width: 280px;
+      height: 78px;
+      margin-top: 3px;
 
       .modules_bg_pdqk_body_item {
         display: flex;
         flex-direction: column;
         align-items: center;
-        font-family: Alibaba PuHuiTi 30;
+        font-family: Alibaba PuHuiTi 3;
         font-weight: normal;
         font-size: 14px;
         // color: rgba(255, 255, 255, 0.9);
         color: #e8ebf0;
         font-style: normal;
         text-transform: none;
-
+        > div {
+          color: #e8ebef;
+          line-height: 1;
+        }
         > span {
           font-family: Roboto, Roboto;
           font-weight: bold;
@@ -714,10 +785,11 @@ onMounted(() => {
           background: linear-gradient(to bottom, #ffffff 50%, #49ffff 100%);
           -webkit-background-clip: text;
           -webkit-text-fill-color: transparent;
+          line-height: 1;
         }
         > img {
           width: 48px;
-          height: 48px;
+          height: 52px;
           // margin-top: 5px;
         }
 
@@ -734,8 +806,8 @@ onMounted(() => {
         // height: 16px;
         // border-bottom: 4px dashed #175a7e;
         position: absolute;
-        top: 10px;
-        width: 64px;
+        top: 6px;
+        width: 78px;
         height: 16px;
         background-image: repeating-linear-gradient(to right, #175a7e 0 4px, transparent 4px 10px);
         background-position: bottom;
@@ -744,6 +816,7 @@ onMounted(() => {
       }
       .img-first {
         left: 48px;
+        width: 78px;
         .line_img1 {
           position: absolute;
           top: 0px;
@@ -753,11 +826,12 @@ onMounted(() => {
         }
       }
       .img-second {
-        left: 148px;
+        left: 158px;
+        width: 80px;
         .line_img1 {
           position: absolute;
           top: 0px;
-          left: 20px;
+          left: 25px;
           width: 26px;
           height: 26px;
         }
@@ -794,7 +868,7 @@ onMounted(() => {
         text-transform: none;
         > img {
           width: 48px;
-          height: 48px;
+          height: 52px;
         }
         > div {
           display: flex;
@@ -854,7 +928,7 @@ onMounted(() => {
               }
               > img {
                 width: 48px;
-                height: 48px;
+                height: 52px;
                 // margin-top: 5px;
               }
             }
@@ -918,7 +992,8 @@ onMounted(() => {
   }
 }
 </style>
-<style lang="scss">
+
+<!-- <style lang="scss">
 .modules_bg_color_active {
   // border: 2px solid #00ffff; /* 高亮边框颜色可自定义 */
   // box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
@@ -928,4 +1003,4 @@ onMounted(() => {
   z-index: 1;
   transition: box-shadow 0.3s ease;
 }
-</style>
+</style> -->

src/views/left/modules/common/MyProgress.vue

@@ -3,11 +3,12 @@
     <svg :width="size" :height="size" viewBox="0 0 120 120" style="overflow: visible">
       <defs>
         <!-- 进度条渐变 -->
-           <linearGradient :id="gradientId" x1="1" y1="0" x2="0" y2="1">
-          <stop offset="0%" :stop-color="gradientStart" :stop-opacity="startOpacity"/>
-          <stop offset="100%" :stop-color="gradientEnd" :stop-opacity="endOpacity"/>
+        <linearGradient :id="gradientId" x1="1" y1="0" x2="0" y2="1">
+          <stop offset="0%" :stop-color="gradientStart" :stop-opacity="startOpacity" />
+          <stop offset="100%" :stop-color="gradientEnd" :stop-opacity="endOpacity" />
         </linearGradient>
 
+
         <!-- 文字渐变（白 -> 结束色） -->
         <linearGradient :id="textGradientId" x1="0%" y1="0%" x2="0%" y2="100%">
           <stop offset="0%" stop-color="#ffffff" />
@@ -16,14 +17,7 @@
       </defs>
 
       <!-- 背景圆 -->
-      <circle
-        cx="60"
-        cy="60"
-        :r="radius"
-        :stroke="backgroundColor"
-        :stroke-width="strokeWidth"
-        fill="none"
-      />
+      <circle cx="60" cy="60" :r="radius" :stroke="backgroundColor" :stroke-width="strokeWidth" fill="none" />
 
       <!-- 进度条 -->
       <circle
@@ -40,25 +34,10 @@
       />
 
       <!-- 精确位置结束点 -->
-      <circle
-        :cx="endPoint.x"
-        :cy="endPoint.y"
-        :r="dotRadius"
-        :fill="gradientEnd"
-        :stroke="dotStrokeColor"
-        :stroke-width="dotStrokeWidth"
-      />
+      <circle :cx="endPoint.x" :cy="endPoint.y" :r="dotRadius" :fill="gradientEnd" :stroke="dotStrokeColor" :stroke-width="dotStrokeWidth" />
 
       <!-- 渐变文字 -->
-      <text
-        x="50%"
-        y="50%"
-        text-anchor="middle"
-        dominant-baseline="middle"
-        :fill="`url(#${textGradientId})`"
-        :font-size="textSize"
-        font-weight="500"
-      >
+      <text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle" :fill="`url(#${textGradientId})`" :font-size="textSize" font-weight="500" class="txt">
         {{ displayedValue }}
       </text>
     </svg>
@@ -73,15 +52,15 @@ const props = defineProps({
   size: { type: Number, default: 120 },
   strokeWidth: { type: Number, default: 10 },
   backgroundColor: { type: String, default: '#2d4c7f' },
-   // 渐变起始颜色
+  // 渐变起始颜色
   gradientStart: { type: String, default: '#9ac8ff' },
   // 渐变结束颜色
   gradientEnd: { type: String, default: '#1a6dff' },
-    // 渐变起始透明度
-  startOpacity: { type: Number, default: 0.1},
+  // 渐变起始透明度
+  startOpacity: { type: Number, default: 0.1 },
   // 渐变结束透明度
   endOpacity: { type: Number, default: 1 },
-  textSize: { type: Number, default: 30},
+  textSize: { type: Number, default: 30 },
   dotRadius: { type: Number, default: 5 },
   dotStrokeWidth: { type: Number, default: 2 },
   dotStrokeColor: { type: String, default: '#fff' }
@@ -98,7 +77,7 @@ const dashOffset = computed(() => circumference.value * (1 - props.value / 100))
 // 精确结束点定位
 const endPoint = computed(() => {
   const angle = (props.value / 100) * 360 - 90
-  const radian = angle * Math.PI / 180
+  const radian = (angle * Math.PI) / 180
   return {
     x: 60 + radius.value * Math.cos(radian),
     y: 60 + radius.value * Math.sin(radian)
@@ -106,4 +85,30 @@ const endPoint = computed(() => {
 })
 
 const displayedValue = computed(() => `${Math.round(props.value)}%`)
-</script>
+</script>
+
+<style lang="scss" scoped>
+.txt {
+  font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
+  font-weight: 400;
+  font-size: 36px;
+  line-height: 30px;
+  // text-shadow: 0px 5px 5px rgba(0, 0, 0, 0.25);
+  text-align: left;
+  font-style: normal;
+  text-transform: none;
+  /* 金属光泽渐变效果 */
+  // background: linear-gradient(to top, #88eaff 25%, #e2ffff 50%);
+  background: linear-gradient(to bottom, #e2ffff 20%, #ffc909 70%);
+  -webkit-background-clip: text;
+  /* 文字应用渐变 */
+  background-clip: text;
+  /* 使文字透明，背景渐变会应用到文字 */
+  color: transparent;
+  /* 光泽效果：文本阴影 */
+  // text-shadow: 2px 2px 5px rgba(255, 255, 255, 0.4), -2px -2px 5px rgba(0, 0, 0, 0.4);
+
+  /* 给文字加一些柔和的过渡效果 */
+  transition: all 0.3s ease;
+}
+</style>