样式调整

src/components/GlobalComponents/DarkLayout.vue

@@ -21,11 +21,14 @@
     <!-- Main区域 - 内容展示 -->
     <main class="dark-layout-main">
       <el-card shadow="never" class="dark-card content-card">
-        <div class="main-content">
+
+        <!--main-content-->
+        <div class="grid grid-cols-3 2xl:grid-cols-4 3xl:grid-cols-5 gap-4">
           <slot name="main">
             <slot></slot>
           </slot>
         </div>
+
         <div v-if="$slots['footer-actions']" class="footer-container">
           <div class="footer-divider"></div>
           <div class="footer-actions">
@@ -95,6 +98,7 @@
 
   .dark-layout-header {
     padding: 15px;
+    padding-bottom: 0;
     background-color: var(--dark-bg-color);
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
   }
@@ -117,7 +121,7 @@
 
   .dark-layout-main {
     flex: 1;
-    padding: 0 15px 15px;
+    //padding: 0 15px 15px;
     overflow: hidden;
     background-color: var(--dark-bg-color);
     display: flex;
@@ -125,14 +129,16 @@
   }
 
   .dark-card {
-    background-color: var(--dark-card-bg);
-    border: 1px solid var(--dark-border-color);
+    //background-color: var(--dark-card-bg);
+    //border: 1px solid var(--dark-border-color);
+    background-color: transparent;
+    border: none;
     color: var(--dark-text-primary);
     transition: all 0.3s ease;
   }
 
   .dark-card:hover {
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
+    //box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
   }
 
   .content-card {
@@ -146,7 +152,7 @@
     flex: 1;
     overflow: auto;
     display: grid;
-    grid-template-columns: repeat(6, 1fr);
+    grid-template-columns: repeat(4, 1fr);
     grid-auto-rows: min-content;
     gap: 15px;
     padding: 15px;

src/components/GlobalComponents/VirtualCard.vue

@@ -1,41 +1,46 @@
 <template>
-  <el-card shadow="hover">
-    <div class="plan-header">
-      <div class="plan-secret-tag" :style="secretTagStyle">
-        {{ plan.secretLevel }}
+  <el-card shadow="hover" class="virtual-card">
+    <!-- 头部插槽 -->
+    <template #header>
+      <div class="plan-header">
+        <div class="plan-secret-tag" :style="secretTagStyle">
+          {{ plan.secretLevel }}
+        </div>
+        <el-tooltip
+            :content="plan.planName + '-' + plan.simulationParticipantTasks"
+            placement="top"
+            :disabled="!isPlanNameOverflow"
+        >
+          <h3 ref="planNameRef" class="plan-name" style="color: #e0e6ed">
+            {{ plan.planName + "-" + plan.simulationParticipantTasks }}
+          </h3>
+        </el-tooltip>
+        <!-- 状态标签（保留注释以便后续恢复） -->
+        <!-- <el-tag
+          :type="statusTagType"
+          size="small"
+          class="plan-status"
+          effect="dark"
+        >
+          {{ plan.status }}
+        </el-tag> -->
+        <span></span>
       </div>
-      <el-tooltip
-        :content="plan.planName + '-' + plan.simulationParticipantTasks"
-        placement="top"
-        :disabled="!isPlanNameOverflow"
-      >
-        <h3 ref="planNameRef" class="plan-name" style="color: #e0e6ed">
-          {{ plan.planName + "-" + plan.simulationParticipantTasks }}
-        </h3>
-      </el-tooltip>
-      <!--      <el-tag
-        :type="statusTagType"
-        size="small"
-        class="plan-status"
-        effect="dark"
-      >
-        {{ plan.status }}
-      </el-tag>-->
-      <span></span>
-    </div>
+    </template>
 
+    <!-- 卡片内容区域 -->
     <div class="plan-content">
       <div class="plan-main-info">
         <div class="info-row">
           <span class="info-label dark-label">仿真推演任务名称:</span>
           <el-tooltip
-            :content="plan.simulationTaskName"
-            placement="top"
-            :disabled="!isSimulationTaskNameOverflow"
+              :content="plan.simulationTaskName"
+              placement="top"
+              :disabled="!isSimulationTaskNameOverflow"
           >
             <span
-              ref="simulationTaskNameRef"
-              class="info-value dark-value text-ellipsis"
+                ref="simulationTaskNameRef"
+                class="info-value dark-value text-ellipsis"
             >
               {{ plan.simulationTaskName || "-" }}
             </span>
@@ -44,13 +49,13 @@
         <div class="info-row">
           <span class="info-label dark-label">仿真推演开始时间:</span>
           <el-tooltip
-            :content="plan.simulationStartTime"
-            placement="top"
-            :disabled="!isSimulationStartTimeOverflow"
+              :content="plan.simulationStartTime"
+              placement="top"
+              :disabled="!isSimulationStartTimeOverflow"
           >
             <span
-              ref="simulationStartTimeRef"
-              class="info-value dark-value text-ellipsis"
+                ref="simulationStartTimeRef"
+                class="info-value dark-value text-ellipsis"
             >
               {{ plan.simulationStartTime || "-" }}
             </span>
@@ -59,13 +64,13 @@
         <div class="info-row">
           <span class="info-label dark-label">仿真推演结束时间:</span>
           <el-tooltip
-            :content="plan.simulationEndTime"
-            placement="top"
-            :disabled="!isSimulationEndTimeOverflow"
+              :content="plan.simulationEndTime"
+              placement="top"
+              :disabled="!isSimulationEndTimeOverflow"
           >
             <span
-              ref="simulationEndTimeRef"
-              class="info-value dark-value text-ellipsis"
+                ref="simulationEndTimeRef"
+                class="info-value dark-value text-ellipsis"
             >
               {{ plan.simulationEndTime || "-" }}
             </span>
@@ -74,13 +79,13 @@
         <div class="info-row">
           <span class="info-label dark-label">仿真推演次数:</span>
           <el-tooltip
-            :content="plan.simulationCount"
-            placement="top"
-            :disabled="!isSimulationCountOverflow"
+              :content="plan.simulationCount"
+              placement="top"
+              :disabled="!isSimulationCountOverflow"
           >
             <span
-              ref="simulationCountRef"
-              class="info-value dark-value text-ellipsis"
+                ref="simulationCountRef"
+                class="info-value dark-value text-ellipsis"
             >
               {{ plan.simulationCount || "-" }}
             </span>
@@ -92,13 +97,13 @@
         <div class="info-row">
           <span class="info-label dark-label">仿真推演参试任务:</span>
           <el-tooltip
-            :content="plan.simulationParticipantTasks"
-            placement="top"
-            :disabled="!isSimulationParticipantTasksOverflow"
+              :content="plan.simulationParticipantTasks"
+              placement="top"
+              :disabled="!isSimulationParticipantTasksOverflow"
           >
             <span
-              ref="simulationParticipantTasksRef"
-              class="info-value dark-value text-ellipsis"
+                ref="simulationParticipantTasksRef"
+                class="info-value dark-value text-ellipsis"
             >
               {{ plan.simulationParticipantTasks || "-" }}
             </span>
@@ -110,9 +115,9 @@
         <div class="info-row">
           <span class="info-label dark-label">创建人:</span>
           <el-tooltip
-            :content="plan.username"
-            placement="top"
-            :disabled="!isUsernameOverflow"
+              :content="plan.username"
+              placement="top"
+              :disabled="!isUsernameOverflow"
           >
             <span ref="usernameRef" class="info-value dark-value text-ellipsis">
               {{ plan.username || "-" }}
@@ -122,13 +127,13 @@
         <div class="info-row">
           <span class="info-label dark-label">创建时间:</span>
           <el-tooltip
-            :content="plan.createTime"
-            placement="top"
-            :disabled="!isCreateTimeOverflow"
+              :content="plan.createTime"
+              placement="top"
+              :disabled="!isCreateTimeOverflow"
           >
             <span
-              ref="createTimeRef"
-              class="info-value dark-value text-ellipsis"
+                ref="createTimeRef"
+                class="info-value dark-value text-ellipsis"
             >
               {{ plan.createTime || "-" }}
             </span>
@@ -137,11 +142,13 @@
       </div>
     </div>
 
+    <!-- 操作按钮区域 -->
     <div class="plan-actions">
-      <el-button size="mini" type="info" @click="editPlan">想定编辑</el-button>
-      <el-button size="mini" @click="viewDetail">仿真推演</el-button>
+      <el-button type="info" icon="el-icon-edit" @click="editPlan">想定编辑</el-button>
+      <el-button icon="el-icon-monitor" class="blue-btn" @click="viewDetail">仿真推演</el-button>
     </div>
   </el-card>
+
 </template>
 
 <script>
@@ -257,6 +264,19 @@
 </script>
 
 <style scoped>
+.blue-btn:hover{
+  background: #004466;
+  border: 2px solid #1e3a5f;
+  border-color: #4085ac;
+  color: #fff;
+}
+.virtual-card {
+  padding: 0;
+}
+
+::v-deep .el-card__header {
+  background-color: #123e7f;
+}
   .target-plan-card {
     margin-bottom: 15px;
     transition: all 0.3s ease;
@@ -273,25 +293,26 @@
   .plan-header {
     display: flex;
     align-items: center;
-    margin-bottom: 12px;
+    //margin-bottom: 12px;
   }
 
   .plan-secret-tag {
     padding: 2px 8px;
     border-radius: 4px;
     color: white;
-    font-size: 12px;
+    font-size: 14px;
     margin-right: 8px;
   }
 
   .plan-name {
     flex: 1;
     margin: 0;
-    font-size: 16px;
+    font-size: 18px;
+    font-weight: bold;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    max-width: 180px;
+    //max-width: 180px;
   }
 
   .plan-status {
@@ -299,7 +320,8 @@
   }
 
   .plan-content {
-    margin-bottom: 12px;
+    padding: 14px 16px;
+    //margin-bottom: 12px;
     flex: 1;
   }
 
@@ -321,7 +343,7 @@
 
   .dark-label {
     color: #8796ad;
-    width: 70px;
+    width: 120px;
     display: inline-block;
     flex-shrink: 0;
   }
@@ -342,6 +364,8 @@
   .plan-actions {
     display: flex;
     justify-content: space-between;
+    padding: 14px 16px;
+    border-top: 1px solid #425163;
   }
 
   .dark-button {

src/styles/element-variables.scss

@@ -735,3 +735,12 @@ $--breakpoints-spec: (                         // 特殊断点配置集合
   background-color: rgb(1, 29, 92);
   padding: 15px;
 }
+
+.el-button--primary {
+  background-color: #2aa6ff;
+  border-color: #24a2ff;
+}
+.el-button--primary:hover{
+  background-color: #2aa6ff;
+  border-color: #24a2ff;
+}

src/styles/vab.scss

@@ -242,7 +242,7 @@ html {
     }
 
     .el-card {
-      margin-bottom: 15px;
+      //margin-bottom: 15px;
 
       &__body {
         padding: $base-padding;

src/views/Deduction/taskSetting/index.vue

@@ -28,7 +28,7 @@
         <el-button
           @click="handleEdit"
           icon="el-icon-plus"
-          type="primary"
+          class="blue-btn"
         > 添加 </el-button>
       </template>
 
@@ -255,5 +255,12 @@ export default {
 </script>
 
 <style scoped>
+.blue-btn:hover{
+  background: #004466;
+  border: 2px solid #1e3a5f;
+  border-color: #4085ac;
+  color: #fff;
+}
+
 @import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css";
 </style>

tailwind.config.js

@@ -7,7 +7,12 @@ module.exports = {
   ],
   darkMode: false,
   theme: {
-    extend: {},
+    extend: {
+      screens: {
+        "3xl": "1920px", // 自定义 3xl 断点
+        "4xl": "2560px", // 自定义 4xl 断点
+      },
+    },
   },
   variants: {
     extend: {},