预警表格样式修改

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

@@ -2,9 +2,20 @@
   <div>
     <public-title title="预警"/>
     <div class="inner-screen">
-      <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')"/>
+      <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')"
+      >
+        <template #address="{text}">
+          <div class="police-times">
+            <span class="police-text">{{ text }}</span>
+            <span class="police-icon"></span>
+          </div>
+        </template>
+      </a-table>
     </div>
   </div>
 </template>
@@ -13,55 +24,53 @@ import {ref} from 'vue';
 import PublicTitle from '/@/components/publicTitle.vue';
 
 const tableInfo = ref({
-  dataSource: [],
-  columns: [],
+  dataSource: [
+    {
+      key: '1',
+      name: '胡彦斌',
+      age: 32,
+      address: '西湖区湖底公园1号',
+    },
+    {
+      key: '2',
+      name: '胡彦祖',
+      age: 42,
+      address: '西湖区湖底公园1号',
+    },
+    {
+      key: '3',
+      name: '胡彦祖',
+      age: 42,
+      address: '西湖区湖底公园1号',
+    },
+  ],
+  columns: [
+    {
+      title: '姓名',
+      dataIndex: 'name',
+      key: 'name',
+      align: 'center',
+    },
+    {
+      title: '年龄',
+      dataIndex: 'age',
+      key: 'age',
+      align: 'right',
+    },
+    {
+      title: '住址',
+      dataIndex: 'address',
+      key: 'address',
+      align: 'center',
+      slots: {customRender: 'address'}
+    },
+  ],
   pagination: {
     current: 1,
     pageSize: 2,
-    total: 20
-  }
-})
-const dataSource = ref([
-  {
-    key: '1',
-    name: '胡彦斌',
-    age: 32,
-    address: '西湖区湖底公园1号',
+    total: 2,
   },
-  {
-    key: '2',
-    name: '胡彦祖',
-    age: 42,
-    address: '西湖区湖底公园1号',
-  },
-  {
-    key: '3',
-    name: '胡彦祖',
-    age: 42,
-    address: '西湖区湖底公园1号',
-  },
-]);
-
-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>
 <style scoped lang="less">
 .inner-screen {
@@ -69,6 +78,25 @@ const columns = ref([
   height: calc(100% - 40px);
   margin: 20px 0;
 
+  .police-times {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .police-text {
+      padding-right: 20px;
+    }
+
+    .police-icon {
+      display: inline-block;
+      width: 18px;
+      height: 18px;
+      background: url('/@/assets/images/terminal.png') no-repeat;
+      background-size: 100% 100%;
+      cursor: pointer;
+    }
+  }
+
   :deep(.ant-table-thead) {
     display: none !important;
   }
@@ -83,14 +111,13 @@ const columns = ref([
   }
 
   :deep(.ant-table-row:hover) {
-    background-color: transparent !important;
+    background-color: transparent;
     color: #ffffff;
   }
-
 }
 
 .ant-table-striped :deep(.table-striped) td {
-  background-color: #0A0A0C;
+  background-color: #0a0a0c;
   color: #ffffff;
 }
 
@@ -100,24 +127,49 @@ const columns = ref([
 
 // 分页
 :deep(.ant-pagination-prev .ant-pagination-item-link, .ant-pagination-next .ant-pagination-item-link) {
-  background-color: #1F2935;
-  color: #8291A9;
+  background-color: #1f2935;
+  color: #8291a9;
   border: none;
 }
 
 :deep(.ant-pagination-item) {
-  background-color: #1F2935;
+  background-color: #1f2935;
   color: #ffffff;
   border: none;
 }
 
 // 当前页选中的样式
 :deep(.ant-pagination-item-active) {
-  background-color: #0081FF;
+  background-color: #0081ff;
 }
 
-:deep(.ant-pagination-item-active a,.ant-pagination-item a) {
+:deep(.ant-pagination-item-active a) {
   color: #ffffff;
 }
 
+:deep(.ant-pagination-item a) {
+  color: #ffffff;
+}
+
+:deep(.ant-pagination-prev .ant-pagination-item-link, .ant-pagination-next .ant-pagination-item-link) {
+  color: #ffffff;
+  background-color: #1f2935;
+}
+
+// 省略样式
+:deep(.ant-pagination-jump-next .ant-pagination-item-container .ant-pagination-item-ellipsis) {
+  color: #ffffff;
+}
+
+// 省略鼠标移入样式
+:deep(.ant-pagination-jump-next .ant-pagination-item-container .ant-pagination-item-link-icon) {
+  color: rgba(255, 255, 255, 0.4);
+}
+
+// 下一页
+:deep(.ant-pagination-next .ant-pagination-item-link) {
+  background-color: #1f2935;
+  color: #8291a9;
+  border: none;
+}
 </style>