[Feat 0000]首页样式调整

src/components/Configurable/detail/CustomGallery.vue

@@ -64,7 +64,7 @@
   }
 
   .gallery > .gallery-item_A {
-    width: 180px;
+    width: 200px;
     height: 30px;
     position: absolute;
     background-size: 100% 100%;
@@ -86,11 +86,11 @@
     }
   }
   .gallery > .gallery-item_A:nth-child(2) {
-    top: calc(50% - 55px);
+    top: calc(50% - 65px);
     left: calc(50% - 200px);
-    width: 110px;
-    height: 110px;
-    line-height: 110px;
+    width: 130px;
+    height: 130px;
+    line-height: 130px;
     padding: 0;
     background-image: url('/@/assets/images/sealedGoaf/configurable/gallery/bg-A-1.png');
     display: flex;
@@ -104,6 +104,7 @@
       font-size: 17px;
       font-weight: bold;
       order: 2;
+      margin-top: 10px;
     }
     .gallery-item__value {
       width: 100%;
@@ -119,10 +120,10 @@
     &::after {
       content: '';
       position: absolute;
-      top: -12px; 
-      left: 93%;
-      width: 42px;
-      height: 130px;
+      top: -15px; 
+      left: 88%;
+      width: 55px;
+      height: 160px;
       background-image: url('/@/assets/images/sealedGoaf/configurable/gallery/bg-A-2.png');
       background-size: 100% 100%;
       background-repeat: no-repeat;
@@ -140,7 +141,7 @@
       content: '';
       position: absolute;
       top: 8px;
-      left: -78px;
+      left: -63px;
       width: 68px;
       height: 8px;
       background-image: url('/@/assets/images/sealedGoaf/configurable/gallery/bg-A-3.png');
@@ -150,7 +151,7 @@
     }
   }
   .gallery > .gallery-item_A:nth-child(4) {
-    top: calc(50% - 34px);
+    top: calc(50% - 38px);
     left: calc(50%);
     .gallery-item__value {
       color: #0070ff;
@@ -158,8 +159,8 @@
     &::before {
       content: '';
       position: absolute;
-      top: 8px;
-      left: -62px;
+      top: 10px;
+      left: -40px;
       width: 43px;
       height: 8px;
       background-image: url('/@/assets/images/sealedGoaf/configurable/gallery/bg-A-4.png');
@@ -169,7 +170,7 @@
     }
   }
   .gallery > .gallery-item_A:nth-child(5) {
-    top: calc(50% + 4px);
+    top: calc(50% + 8px);
     left: calc(50%);
     .gallery-item__value {
       color: #6b7772;
@@ -179,7 +180,7 @@
       content: '';
       position: absolute;
       top: 8px;
-      left: -62px;
+      left: -38px;
       width: 43px;
       height: 8px;
       background-image: url('/@/assets/images/sealedGoaf/configurable/gallery/bg-A-4.png');
@@ -198,7 +199,7 @@
       content: '';
       position: absolute;
       top: 8px;
-      left: -78px;
+      left: -58px;
       width: 68px;
       height: 8px;
       background-image: url('/@/assets/images/sealedGoaf/configurable/gallery/bg-A-3.png');
@@ -222,7 +223,7 @@
     background-image: url('/@/assets/images/sealedGoaf/configurable/gallery/bg-B-2.png');
     background-size: 100% 100%;
     background-repeat: no-repeat;
-    width: 150px;
+    width: 180px;
     height: 70px;
     position: absolute;
     text-align: center;
@@ -290,7 +291,7 @@
     align-items: center;
     justify-content: center;
     margin-top: 10px;
-    height: calc(100% - 15px) !important;
+    height: calc(100% - 20px) !important;
   }
   .gallery-item_center_C {
     width: 120px;

src/components/Configurable/detail/MiniBoard.vue

@@ -111,6 +111,7 @@
     --image-board-bg-H-C2H2: url('/@/assets/images/sealedGoaf/configurable/miniBoard/board-bg-H-C2H2.svg');
     --image-board-bg-H-pre: url('/@/assets/images/sealedGoaf/configurable/miniBoard/board-bg-H-pre.svg');
     --image-board-bg-H-tem: url('/@/assets/images/sealedGoaf/configurable/miniBoard/board-bg-H-tem.svg');
+    --image-board-bg-content-H: url('/@/assets/images/sealedGoaf/configurable/miniBoard/board-bg-content-H.png');
 
     height: 50px;
     line-height: 25px;
@@ -128,12 +129,12 @@
     white-space: nowrap;
   }
   .mini-board_A {
-    width: 210px;
+    width: 190px;
     height: 43px;
     display: flex;
     justify-content: space-between;
     align-items: end;
-    padding: 0 12px 0 20px;
+    padding: 0 5px 0 10px;
     background-image: var(--image-board-bg-A-1);
     background-size: 100% 100%;
   }
@@ -416,9 +417,11 @@
     display: flex;
     flex-direction: column;
     justify-content: center;
-    align-items: start; /* 文字靠右对齐，或者 center 居中 */
+    align-items: start;
     padding-left: 10px;
     overflow: hidden;
+    background-image: var(--image-board-bg-content-H);
+    background-size: 100% 100%;
   }
 
   .mini-board__label_H {
@@ -430,6 +433,7 @@
     text-overflow: ellipsis;
     max-width: 100%;
     margin-bottom: 6px;
+    margin-top: 5px;
   }
 
   .mini-board__value_H {
@@ -441,5 +445,6 @@
     overflow: hidden;
     text-overflow: ellipsis;
     max-width: 100%;
+    margin-bottom: 5px;
   }
 </style>

src/components/Configurable/preset/BoardTable.vue

@@ -1,106 +1,105 @@
 <template>
-  <div class="board-table-container">
-    <!-- Table 区域 -->
-    <div class="table-section" v-if="tableConfig && tableData.length > 0">
-      <div class="table__content">
-        <!-- 表头 -->
-        <div class="table__content_label" :class="`table__content_label_${tableConfig.type}`">
-          <!-- 单选框列占位（固定宽度） -->
-          <div 
-            v-if="showRadio" 
-            :style="{ width: radioColumnWidth }" 
-            class="label-t table__content__list_item_radio"
-          >
-            <!-- 表头单选框位置留空 -->
-          </div>
-          <!-- 数据列头 -->
-          <div 
-            class="label-t" 
-            v-for="(item, index) in tableColumns" 
-            :key="`header-${index}`" 
-            :style="{ flexBasis: dataColumnFlexBasis }"
-          >
-            {{ item.name }}
-          </div>
-        </div>
-        <!-- 表格内容 -->
-        <div class="table__content_list" :class="`table__content_list_${tableConfig.type}`">
-          <div 
-            class="table__content_list_row" 
-            v-for="(row, rowIndex) in tableData" 
-            :key="`row-${rowIndex}`"
-            :class="{ 'active-row': selectedRowIndex === rowIndex }"
-            @click="handleRowClick(rowIndex)"
-          >
-            <!-- 第一列：单选框（固定宽度） -->
+  <div style="padding: 10px 0; overflow: hidden;">
+    <div class="board-table-container">
+      <!-- Table 区域 -->
+      <div class="table-section" v-if="tableConfig && tableData.length > 0">
+        <div class="table__content">
+          <!-- 表头 -->
+          <div class="table__content_label" :class="`table__content_label_${tableConfig.type}`">
+            <!-- 单选框列占位（固定宽度） -->
             <div 
               v-if="showRadio" 
               :style="{ width: radioColumnWidth }" 
-              class="table__content__list_item_radio"
+              class="label-t table__content__list_item_radio"
+            >
+              <!-- 表头单选框位置留空 -->
+            </div>
+            <!-- 数据列头 -->
+            <div 
+              class="label-t" 
+              v-for="(item, index) in tableColumns" 
+              :key="`header-${index}`" 
+              :style="{ flexBasis: dataColumnFlexBasis }"
             >
-              <input 
-                type="radio" 
-                :name="radioGroupName" 
-                :checked="selectedRowIndex === rowIndex"
-                @click.stop="handleRowClick(rowIndex)"
-              />
+              {{ item.name }}
             </div>
-            <!-- 其他列（平分剩余空间） -->
+          </div>
+          <!-- 表格内容 -->
+          <div class="table__content_list" :class="`table__content_list_${tableConfig.type}`">
             <div 
-              v-for="(col, colIndex) in tableColumns" 
-              :key="`cell-${rowIndex}-${colIndex}`" 
-              :style="{ flexBasis: dataColumnFlexBasis }" 
-              :class="`table__content__list_item_${tableConfig.type}`"
+              class="table__content_list_row" 
+              v-for="(row, rowIndex) in tableData" 
+              :key="`row-${rowIndex}`"
+              :class="{ 'active-row': selectedRowIndex === rowIndex }"
+              @click="handleRowClick(rowIndex)"
             >
-              <!-- <slot :name="col.prop" :scope="row">
-                <span>{{ getter(row, col.prop) }}</span>
-              </slot> -->
-              <slot :name="col.prop" :scope="row">
-                <component :is="renderCellComponent(row, col)" />
-              </slot>
+              <!-- 第一列：单选框（固定宽度） -->
+              <div 
+                v-if="showRadio" 
+                :style="{ width: radioColumnWidth }" 
+                class="table__content__list_item_radio"
+              >
+                <input 
+                  type="radio" 
+                  :name="radioGroupName" 
+                  :checked="selectedRowIndex === rowIndex"
+                  @click.stop="handleRowClick(rowIndex)"
+                />
+              </div>
+              <!-- 其他列（平分剩余空间） -->
+              <div 
+                v-for="(col, colIndex) in tableColumns" 
+                :key="`cell-${rowIndex}-${colIndex}`" 
+                :style="{ flexBasis: dataColumnFlexBasis }" 
+                :class="`table__content__list_item_${tableConfig.type}`"
+              >
+                <!-- <slot :name="col.prop" :scope="row">
+                  <span>{{ getter(row, col.prop) }}</span>
+                </slot> -->
+                <slot :name="col.prop" :scope="row">
+                  <component :is="renderCellComponent(row, col)" />
+                </slot>
+              </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
 
-    <!-- Board 区域 - 修改为单选切换模式 -->
-    <div class="board-section">
-      <!-- 1. Board 标题单选框组 -->
-      <div class="board-selector" v-if="boardConfigList.length > 1">
-        <label 
-          v-for="(cfg, index) in boardConfigList" 
-          :key="`selector-${index}`"
-          class="board-radio-label"
-        >
-          <input 
-            type="radio" 
-            name="board-selector" 
-            :value="index" 
-            v-model="selectedBoardIndex"
-          />
-          <span>{{ cfg.title || `Board ${index + 1}` }}</span>
-        </label>
-      </div>
-      
-      <!-- 如果只有一个 board，直接显示标题（可选，或者隐藏标题） -->
-      <div class="board-title" v-else-if="boardConfigList.length === 1 && boardConfigList[0].title">
-         <div class="board-title-text">{{ boardConfigList[0].title }}</div>
-      </div>
+      <!-- Board 区域 - 修改为单选切换模式 -->
+      <div class="board-section">
+        <!-- 1. Board 标题单选框组 -->
+        <div class="board-tab-container" v-if="boardConfigList.length > 1">
+          <div 
+            class="board-tab-item"
+            v-for="(cfg, index) in boardConfigList"
+            :key="`tab-${index}`"
+            :class="{ 'active': selectedBoardIndex === index }"
+            @click="selectedBoardIndex = index"
+          >
+            {{ cfg.title || `Board ${index + 1}` }}
+          </div>
+        </div>
+        
+        <!-- 如果只有一个 board，直接显示标题（可选，或者隐藏标题） -->
+        <div class="board-title" v-else-if="boardConfigList.length === 1 && boardConfigList[0].title">
+          <div class="board-title-text">{{ boardConfigList[0].title }}</div>
+        </div>
 
-      <!-- 2. 单个 Board 内容展示区 -->
-      <div class="board-list" v-if="currentBoardConfig">
-        <MiniBoard
-          v-for="(item, itemIndex) in getCurrentBoardItems()"
-          :key="`board-item-${itemIndex}`"
-          :label="item.label"
-          :value="item.value"
-          :layout="currentBoardConfig.layout || 'val-top'"
-          :type="currentBoardConfig.type || 'D'"
-        />
+        <!-- 2. 单个 Board 内容展示区 -->
+        <div class="board-list" v-if="currentBoardConfig">
+          <MiniBoard
+            v-for="(item, itemIndex) in getCurrentBoardItems()"
+            :key="`board-item-${itemIndex}`"
+            :label="item.label"
+            :value="item.value"
+            :layout="currentBoardConfig.layout || 'val-top'"
+            :type="currentBoardConfig.type || 'D'"
+          />
+        </div>
       </div>
     </div>
   </div>
+
 </template>
 
 <script lang="ts" setup>
@@ -144,7 +143,7 @@
       radioWidth?: number; // 单选框列宽度
     }>(),
     {
-      showRadio: true,
+      showRadio: false,
       defaultValue: '-',
       radioWidth: 40, // 默认 40px
       tableData: () => [],
@@ -314,40 +313,42 @@ const renderCellComponent = (row: any, col: TableColumn) => {
     flex-direction: column;
     box-sizing: border-box;
     overflow:hidden;
+    border: 2px dashed #0070ff;
+    border-radius: 10px;
+    padding: 10px 5px;
   }
 
   .board-section {
     height: 70%;
-    min-height: 450px;
     flex: none;
     overflow: hidden;
-    padding: 10px 0;
     display: flex;
     flex-direction: column;
 
-    .board-selector {
+    .board-tab-container {
       display: flex;
-      flex-wrap: wrap;
-      gap: 15px;
-      padding: 0 10px;
-      .board-radio-label {
-        display: flex;
-        align-items: center;
-        cursor: pointer;
-        font-size: 14px;
-        color: #333;
-        
-        input[type='radio'] {
-          margin-right: 5px;
-          cursor: pointer;
-        }
+      background-color: #c1dbfd;
+      overflow: hidden;
+    }
 
-        &:hover span {
-          color: #103d82;
-        }
+    .board-tab-item {
+      padding: 8px 12px;
+      font-size: 14px;
+      color: #333;
+      cursor: pointer;
+      border: none;
+      background-color: transparent;
+      transition: all 0.2s ease;
+      
+      &:hover {
+        background-color: #d0edff;
       }
     }
 
+    .board-tab-item.active {
+      background-color: #a2c2fa;
+      color: black;
+    }
     .board-title {
       display: flex;
       align-items: center;
@@ -389,6 +390,7 @@ const renderCellComponent = (row: any, col: TableColumn) => {
 
   .table__content {
     --image-content-label-A: url('/@/assets/images/sealedGoaf/configurable/table/table-label-A.png');
+    --image-content-list-active-A: url('/@/assets/images/sealedGoaf/configurable/table/table-list-active-A.png');
 
     height: 100%;
     box-sizing: border-box;
@@ -419,16 +421,24 @@ const renderCellComponent = (row: any, col: TableColumn) => {
       overflow-y: auto;
       .table__content_list_row {
         width: 100%;
+        height: 40px;
+        min-height: 40px;
+        flex-shrink: 0;
         display: flex;
         justify-content: space-around;
         align-items: center;
         color: #fff;
-        margin-bottom: 5px;
+        cursor: pointer;
         span {
           display: inline-block;
           text-align: center;
         }
       }
+      .active-row {
+        background-image: var(--image-content-list-active-A);
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+      }
     }
 
     .table__content_label_A {
@@ -538,7 +548,8 @@ const renderCellComponent = (row: any, col: TableColumn) => {
   }
 
   .table__content_label_D {
-    background-image: var(--image-content-label-A);
+    background-color: #c1dbfd;
+    // background-image: var(--image-content-label-A);
     background-size: 100% 100%;
     background-repeat: no-repeat;
     color: #000000;

src/views/dashboard/SealedGoaf/configurable.data.sealedGoaf.ts

@@ -60,7 +60,7 @@ export const testConfigSealedGoaf: Config[] = [
       preset: [],
     },
     showStyle: {
-      size: 'width:440px;height:170px;',
+      size: 'width:400px;height:170px;',
       version: '原版',
       position: 'top:70px;left:25px;',
     },
@@ -116,7 +116,7 @@ export const testConfigSealedGoaf: Config[] = [
   //     preset: [],
   //   },
   //   showStyle: {
-  //     size: 'width:440px;height:140px;',
+  //     size: 'width:400px;height:140px;',
   //     version: '原版',
   //     position: 'top:250px;left:25px;',
   //   },
@@ -171,7 +171,7 @@ export const testConfigSealedGoaf: Config[] = [
       preset: [],
     },
     showStyle: {
-      size: 'width:440px;height:210px;',
+      size: 'width:400px;height:210px;',
       version: '原版',
       position: 'top:250px;left:25px;',
     },
@@ -276,7 +276,7 @@ export const testConfigSealedGoaf: Config[] = [
       preset: [],
     },
     showStyle: {
-      size: 'width:440px;height:420px;',
+      size: 'width:400px;height:420px;',
       version: '原版',
       position: 'top:470px;left:25px;',
     },
@@ -363,7 +363,7 @@ export const testConfigSealedGoaf: Config[] = [
       preset: [],
     },
     showStyle: {
-      size: 'width:440px;height:250px;',
+      size: 'width:400px;height:250px;',
       version: '原版',
       position: 'top:30px;right:25px;',
     },
@@ -503,7 +503,7 @@ export const testConfigSealedGoaf: Config[] = [
       // },
     },
     showStyle: {
-      size: 'width:440px;height:560px;',
+      size: 'width:400px;height:560px;',
       version: '原版',
       position: 'top:390px;right:25px;',
     },
@@ -670,7 +670,7 @@ export const testConfigSealedGoaf: Config[] = [
   //     // },
   //   },
   //   showStyle: {
-  //     size: 'width:440px;height:300px;',
+  //     size: 'width:400px;height:300px;',
   //     version: '原版',
   //     position: 'top:920px;right:25px;',
   //   },
@@ -765,9 +765,9 @@ export const testConfigSealedMine: Config[] = [
       preset: [],
     },
     showStyle: {
-      size: 'width:440px;height:200px;',
+      size: 'width:400px;height:230px;',
       version: '原版',
-      position: 'top:70px;left:25px;',
+      position: 'top:100px;left:25px;',
     },
   },
 
@@ -864,9 +864,9 @@ export const testConfigSealedMine: Config[] = [
       preset: [],
     },
     showStyle: {
-      size: 'width:440px;height:270px;',
+      size: 'width:400px;height:270px;',
       version: '原版',
-      position: 'top:250px;left:25px;',
+      position: 'top:310px;left:25px;',
     },
   },
   // 3.预警信息列表
@@ -932,9 +932,9 @@ export const testConfigSealedMine: Config[] = [
       preset: [],
     },
     showStyle: {
-      size: 'width:440px;height:360px;',
+      size: 'width:400px;height:300px;',
       version: '原版',
-      position: 'top:530px;left:25px;',
+      position: 'top:560px;left:25px;',
     },
   },
   // 4.  密闭内墙详情展示
@@ -1025,7 +1025,7 @@ export const testConfigSealedMine: Config[] = [
       ],
     },
     showStyle: {
-      size: 'width:440px;height:650px;',
+      size: 'width:400px;height:650px;',
       version: '原版',
       position: 'top:30px;right:25px;',
     },
@@ -1093,7 +1093,7 @@ export const testConfigSealedMine: Config[] = [
       preset: [],
     },
     showStyle: {
-      size: 'width:440px;height:200px;',
+      size: 'width:400px;height:210px;',
       version: '原版',
       position: 'top:670px;right:25px;',
     },

src/views/dashboard/SealedGoaf/index.vue

@@ -278,14 +278,17 @@
       pointer-events: all;
     }
   }
+  .custom-system-select-mine{
+    top: 50px !important;
+  }
   .company-title {
     position: absolute;
     background-image: url(/src/assets/images/sealedGoaf/title-bg.png);
     background-repeat: no-repeat;
     background-size: 100% 100%;
-    width: 230px;
+    width: 450px;
     height: 52px;
-    left: 230px;
+    left: 16px;
     padding: 14px 20px;
 
     .title-text {