需求保障清单style

src/views/simulationScene/simulationModel/index.vue

@@ -20,7 +20,14 @@
         </a-radio-group>
       </template>
       <div class="normal" style="padding: 5px">
-        <a-table rowKey="id" :columns="qd.qdColumns" :dataSource="qd.qdList" :pagination="false" bordered></a-table>
+        <a-table
+          class="simulation-table-plain"
+          rowKey="id"
+          :columns="qd.qdColumns"
+          :dataSource="qd.qdList"
+          :pagination="false"
+          :bordered="true"
+        ></a-table>
       </div>
     </ModuleWrapper>
     <div
@@ -101,15 +108,22 @@ export default {
       qd: {
         qdlx: 'xqqd',
         qdColumns: [
-          { dataIndex: 'dj', title: '等级', width: '62px', align: 'center' },
+          {
+            dataIndex: 'dj',
+            title: '等级',
+            width: '62px',
+            align: 'center',
+            customRender: (text) => ['', '紧急', '加急', '一般'][text],
+            customCell: (record) => ({ style: { color: ['', '#ff3838', '#feba29', '#ffffff'][record.dj] } }),
+          },
           { dataIndex: 'bzxq', title: '保障需求' },
         ],
         qdList: [
-          { id: '1', dj: '紧急', bzxq: '500枚防空导弹、6辆装甲车' },
+          { id: '1', dj: '1', bzxq: '500枚防空导弹、6辆装甲车' },
-          { id: '2', dj: '加急', bzxq: '5吨汽油、100套军装' },
+          { id: '2', dj: '2', bzxq: '5吨汽油、100套军装' },
-          { id: '3', dj: '一般', bzxq: '15箱消炎药、6箱葡萄糖滴' },
+          { id: '3', dj: '3', bzxq: '15箱消炎药、6箱葡萄糖滴' },
-          { id: '4', dj: '一般', bzxq: '一吨饮用水' },
+          { id: '4', dj: '3', bzxq: '一吨饮用水' },
-          { id: '5', dj: '一般', bzxq: '1吨燃油、厨房抽烟机设备一' },
+          { id: '5', dj: '3', bzxq: '1吨燃油、厨房抽烟机设备一' },
         ],
       },
       sx: {
@@ -162,6 +176,45 @@ export default {
     background-color: #bae7ff22;
   }
 }
+.simulation-table-plain::v-deep {
+  .ant-table {
+    color: #a1c2d0;
+  }
+  .ant-table-body > table {
+    border: none;
+  }
+  .ant-table-thead > tr > th {
+    background-color: #083a52;
+    color: #ffffff;
+    border-bottom-color: #05628e;
+    border-top: 1px solid #05628e;
+    &:last-child {
+      border-right-color: #05628e;
+    }
+    &:not(:last-child) {
+      border-right-color: #05628e3b;
+    }
+    &:first-child {
+      border-left: 1px solid #05628e;
+    }
+    &:not(:first-child) {
+    }
+  }
+  .ant-table-tbody > tr > td {
+    border-bottom-color: #064766;
+    &:last-child {
+      border-right-color: #064766;
+    }
+    &:not(:last-child) {
+      border-right-color: #05628e3b;
+    }
+    &:first-child {
+      border-left: 1px solid #064766;
+    }
+    &:not(:first-child) {
+    }
+  }
+}
 .image {
   width: 100%;
   padding: 20px;