表格样式

src/components/secondaryScreen/screen-right/threeR.vue

@@ -2,7 +2,9 @@
   <div>
     <public-title title="预警"/>
     <div class="inner-screen">
-      <a-table :dataSource="dataSource" :columns="columns"/>
+      <a-table class="ant-table-striped" :dataSource="tableInfo.dataSource" :columns="tableInfo.columns"
+               :pagination="tableInfo.pagination"
+               :rowClassName="(record, index) => (index % 2 === 1 ? 'table-default' : 'table-striped')"/>
     </div>
   </div>
 </template>
@@ -10,6 +12,15 @@
 import {ref} from 'vue';
 import PublicTitle from '/@/components/publicTitle.vue';
 
+const tableInfo = ref({
+  dataSource: [],
+  columns: [],
+  pagination: {
+    current: 1,
+    pageSize: 2,
+    total: 20
+  }
+})
 const dataSource = ref([
   {
     key: '1',
@@ -36,16 +47,19 @@ const columns = ref([
     title: '姓名',
     dataIndex: 'name',
     key: 'name',
+    align: 'center',
   },
   {
     title: '年龄',
     dataIndex: 'age',
     key: 'age',
+    align: 'right',
   },
   {
     title: '住址',
     dataIndex: 'address',
     key: 'address',
+    align: 'center',
   },
 ]);
 </script>
@@ -59,13 +73,51 @@ const columns = ref([
     display: none !important;
   }
 
-  :deep(.ant-table-tbody tr:nth-child(even)) {
-    background-color: rgba(255, 255, 255, 0.1);
+  :deep(.ant-table) {
+    background-color: transparent;
+    pointer-events: none;
   }
 
-  :deep(.ant-table-tbody tr:nth-child(odd)) {
-    background-color: #0A0A0C;
+  :deep(.ant-table-tbody > tr > td) {
+    border-bottom: none;
+  }
+
+  :deep(.ant-table-row:hover) {
+    background-color: transparent !important;
     color: #ffffff;
   }
+
 }
+
+.ant-table-striped :deep(.table-striped) td {
+  background-color: #0A0A0C;
+  color: #ffffff;
+}
+
+.ant-table-striped :deep(.table-default) td {
+  color: #ffffff;
+}
+
+// 分页
+:deep(.ant-pagination-prev .ant-pagination-item-link, .ant-pagination-next .ant-pagination-item-link) {
+  background-color: #1F2935;
+  color: #8291A9;
+  border: none;
+}
+
+:deep(.ant-pagination-item) {
+  background-color: #1F2935;
+  color: #ffffff;
+  border: none;
+}
+
+// 当前页选中的样式
+:deep(.ant-pagination-item-active) {
+  background-color: #0081FF;
+}
+
+:deep(.ant-pagination-item-active a,.ant-pagination-item a) {
+  color: #ffffff;
+}
+
 </style>