refactor(ui): 更新强制预设组件布局和样式

- 重新格式化 HTML 属性和 JavaScript 代码以保持一致性
- 将紧急基础属性卡移至组中的第一个位置
- 为基础属性标签添加图标并调整 flex 布局
- 更新样式中属性卡宽度、间距和图标位置
- 注释掉未使用的属性图标 CSS 属性

packages/screen/src/views/3DSituationalAwarenessRefactor/components/LeftPanel/ForcePreset.vue

@@ -4,9 +4,14 @@
     <div class="custom-dropdown" v-click-outside="closeDropdown">
       <!-- 触发器 -->
       <div class="dropdown-trigger" @click="toggleDropdown">
-        <span class="trigger-text">距离灾害点{{ forcePreset.searchRadius }}km范围内</span>
+        <span class="trigger-text"
+          >距离灾害点{{ forcePreset.searchRadius }}km范围内</span
+        >
         <div class="trigger-icon" :class="{ 'is-open': isDropdownOpen }">
-          <img src="../../assets/images/SketchPng8063f445fba047c290a9620343b62ea51d767b8cdcd86769502b5b160998aacc.png" alt="dropdown" />
+          <img
+            src="../../assets/images/SketchPng8063f445fba047c290a9620343b62ea51d767b8cdcd86769502b5b160998aacc.png"
+            alt="dropdown"
+          />
         </div>
       </div>
 
@@ -21,10 +26,29 @@
             @click="selectOption(option.value)"
           >
             <span class="item-text">{{ option.label }}</span>
-            <div v-if="forcePreset.searchRadius === option.value" class="item-icon">
-              <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
-                <path d="M8 12L11 15L16 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            <div
+              v-if="forcePreset.searchRadius === option.value"
+              class="item-icon"
+            >
+              <svg
+                viewBox="0 0 24 24"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <circle
+                  cx="12"
+                  cy="12"
+                  r="10"
+                  stroke="currentColor"
+                  stroke-width="2"
+                />
+                <path
+                  d="M8 12L11 15L16 9"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
               </svg>
             </div>
           </div>
@@ -37,6 +61,22 @@
 
       <div class="summary-stats">
         <div class="stat-group">
+          <div class="stat-card stat-card--base">
+            <span class="stat-label flexBox"
+              >应急基地
+
+              <img
+                src="../../assets/images/SketchPng157040b93d0288f48b67022319d8789e5ccded19d94fa14634044ed62a722b1c.png"
+                alt="base"
+                class="stat-icon"
+              />
+            </span>
+
+            <div class="stat-value-wrapper">
+              <span class="stat-value">{{ forcePreset.bases }}</span>
+              <span class="stat-unit">处</span>
+            </div>
+          </div>
           <div class="stat-card stat-card--equipment">
             <span class="stat-label">应急装备</span>
             <div class="stat-value-wrapper">
@@ -45,15 +85,6 @@
             </div>
           </div>
 
-          <div class="stat-card stat-card--base">
-            <span class="stat-label">应急基地</span>
-            <div class="stat-value-wrapper">
-              <span class="stat-value">{{ forcePreset.bases }}</span>
-              <span class="stat-unit">处</span>
-            </div>
-            <!-- <img src="../../assets/images/SketchPng157040b93d0288f48b67022319d8789e5ccded19d94fa14634044ed62a722b1c.png" alt="base" class="stat-icon" /> -->
-          </div>
-
           <div class="stat-card stat-card--personnel">
             <span class="stat-label">应急人员</span>
             <div class="stat-value-wrapper">
@@ -69,10 +100,16 @@
             :key="station.id"
             class="station-item"
           >
-            <img src="../../assets/images/路线icon.png" alt="station" class="station-icon" />
+            <img
+              src="../../assets/images/路线icon.png"
+              alt="station"
+              class="station-icon"
+            />
             <div class="station-info">
               <span class="station-name">{{ station.name }}</span>
-              <span class="station-distance">距离灾害点{{ station.distance }}公里</span>
+              <span class="station-distance"
+                >距离灾害点{{ station.distance }}公里</span
+              >
             </div>
           </div>
         </div>
@@ -82,34 +119,34 @@
 </template>
 
 <script setup>
-import { ref, inject } from 'vue'
+import { ref, inject } from "vue";
 
-const { forcePreset } = inject('disasterData')
-const onDistanceChange = inject('onDistanceChange')
+const { forcePreset } = inject("disasterData");
+const onDistanceChange = inject("onDistanceChange");
 
 // 下拉框状态
-const isDropdownOpen = ref(false)
+const isDropdownOpen = ref(false);
 
 // 距离选项
 const distanceOptions = [
-  { value: 10, label: '距离灾害点10km范围内' },
-  { value: 30, label: '距离灾害点30km范围内' },
-  { value: 50, label: '距离灾害点50km范围内' }
-]
+  // { value: 10, label: "距离灾害点10km范围内" },
+  { value: 30, label: "距离灾害点30km范围内" },
+  { value: 50, label: "距离灾害点50km范围内" },
+];
 
 /**
  * 切换下拉框显示/隐藏
  */
 const toggleDropdown = () => {
-  isDropdownOpen.value = !isDropdownOpen.value
-}
+  isDropdownOpen.value = !isDropdownOpen.value;
+};
 
 /**
  * 关闭下拉框
  */
 const closeDropdown = () => {
-  isDropdownOpen.value = false
-}
+  isDropdownOpen.value = false;
+};
 
 /**
  * 选择选项
@@ -117,30 +154,30 @@ const closeDropdown = () => {
  */
 const selectOption = (value) => {
   if (onDistanceChange) {
-    onDistanceChange(value)
-  }
-  closeDropdown()
+    onDistanceChange(value);
   }
+  closeDropdown();
+};
 
 // 点击外部关闭下拉框的指令
 const vClickOutside = {
   mounted(el, binding) {
     el.clickOutsideEvent = (event) => {
       if (!(el === event.target || el.contains(event.target))) {
-        binding.value()
+        binding.value();
       }
-    }
-    document.addEventListener('click', el.clickOutsideEvent)
+    };
+    document.addEventListener("click", el.clickOutsideEvent);
   },
   unmounted(el) {
-    document.removeEventListener('click', el.clickOutsideEvent)
-  }
-}
+    document.removeEventListener("click", el.clickOutsideEvent);
+  },
+};
 </script>
 
 <style scoped lang="scss">
-@use '@/styles/mixins.scss' as *;
-@use '../../assets/styles/common.scss' as *;
+@use "@/styles/mixins.scss" as *;
+@use "../../assets/styles/common.scss" as *;
 
 .force-preset {
   padding: 0;
@@ -286,7 +323,7 @@ const vClickOutside = {
       .stat-group {
         display: flex;
         justify-content: center;
-        gap: vw(32);
+        gap: vw(22);
 
         .stat-card {
           // flex: 1;
@@ -298,9 +335,10 @@ const vClickOutside = {
           padding: vh(12) vw(12) vh(30);
           border-radius: vw(6);
           position: relative;
-          background: url('../../assets/images/完成里程.png') no-repeat center bottom;
+          background: url("../../assets/images/完成里程.png") no-repeat center
+            bottom;
           // background-size: 100% 100%;
-          width: vw(84);
+          width: vw(104);
 
           .stat-label {
             color: var(--text-white);
@@ -308,6 +346,11 @@ const vClickOutside = {
             font-family: SourceHanSansCN-Medium, sans-serif;
           }
 
+          .flexBox{
+            display: flex;
+            align-items: center;
+          }
+
           .stat-value-wrapper {
             display: flex;
             align-items: baseline;
@@ -328,12 +371,12 @@ const vClickOutside = {
           }
 
           .stat-icon {
-            position: absolute;
-            right: vw(8);
-            bottom: vh(8);
-            width: vw(24);
-            height: vh(24);
-            opacity: 0.5;
+            // position: absolute;
+            // right: vw(8);
+            // bottom: vh(8);
+            width: vw(12);
+            height: vw(10);
+            // opacity: 0.5;
           }
         }
       }
@@ -361,7 +404,8 @@ const vClickOutside = {
           gap: vw(12);
           padding: vh(0) vw(12);
           // background: rgba(20, 53, 118, 0.3);
-          background: url('../../assets/images/文本线条框.png') no-repeat center center;
+          background: url("../../assets/images/文本线条框.png") no-repeat center
+            center;
           background-size: 100% 100%;
           border-radius: vw(6);