refactor: 设备详情代码结构调整

packages/screen/src/views/EquipmentManagement/detailDialog.vue

@@ -11,19 +11,9 @@
       </template>
       <div v-if="equipment" class="drawer-content">
         <!-- 基础信息 -->
-        <div class="info-box">
-          <div class="info-title-block">
-            <span class="title-text">基础信息</span>
-          </div>
-          <div class="info-content-block flex">
-            <div class="left-wrapper">
-              <div class="info-item-list-wrapper">
-                <div class="info-item" v-for="(item, index) in showDataConfig['基础信息']" :key="index">
-                  <div class="label">{{ item.label }}</div>
-                  <div class="value">{{ equipment[item.name] }}</div>
-                </div>
-              </div>
-            </div>
+        <div class="basic-info-area">
+          <DetailInfoBox :data="equipment" :title="'基础信息'" :dataConfig="showDataConfig['基础信息']" />
+
           <div class="right-wrapper">
             <div>
               <el-tag v-if="equipment.sbzt === '完好'" type="success" size="small">完好</el-tag>
@@ -40,8 +30,6 @@
             </div>
           </div>
         </div>
-        </div>
-
         <!-- 设备位置 -->
         <DetailInfoBox class="detail-info-box" :data="equipment" :title="'设备位置'" :dataConfig="showDataConfig['设备位置']" />
 
@@ -171,64 +159,13 @@ defineExpose({
   }
 }
 
-.info-box {
-  width: 100%;
-
-  .info-title-block {
-    margin: 10px 0;
-
-    .title-text {
-      font-size: 16px;
-      font-weight: 600;
-    }
-  }
-
-  .info-content-block {
-    width: 100%;
-    padding: 15px;
-    background-color: #fff;
-    border-radius: 6px;
-
-    .info-item-list-wrapper {
-      display: grid;
-      width: 100%;
-      row-gap: 15px;
-
-      .info-item {
-        display: flex;
-        align-items: center;
-        width: 100%;
-
-        .label {
-          display: flex;
-          align-items: center;
-          font-size: 14px;
-          margin-right: 10px;
-          line-height: 14px;
-          white-space: nowrap;
-
-          &::after {
-            content: ":"
-          }
-        }
-
-        .value {
-          line-height: 14px;
-          font-size: 14px;
-          white-space: nowrap;
-        }
-
-      }
-    }
-
-
-  }
-
-  .info-content-block.flex {
-    display: flex;
-    justify-content: space-between;
+.basic-info-area {
+  position: relative;
 
   .right-wrapper {
+    position: absolute;
+    top: 45px;
+    right: 50px;
     display: flex;
     gap: 30px;
 
@@ -249,7 +186,6 @@ defineExpose({
     }
   }
 }
-}
 
 :deep(.detail-info-box) {
   .info-item-list-wrapper {