176 lines
3.5 KiB
Vue
176 lines
3.5 KiB
Vue
<template>
|
|
<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')"
|
|
>
|
|
<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>
|
|
<script setup lang="ts">
|
|
import {ref} from 'vue';
|
|
import PublicTitle from '/@/components/publicTitle.vue';
|
|
|
|
const tableInfo = ref({
|
|
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: 2,
|
|
},
|
|
});
|
|
</script>
|
|
<style scoped lang="less">
|
|
.inner-screen {
|
|
width: 100%;
|
|
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;
|
|
}
|
|
|
|
:deep(.ant-table) {
|
|
background-color: transparent;
|
|
pointer-events: none;
|
|
}
|
|
|
|
:deep(.ant-table-tbody > tr > td) {
|
|
border-bottom: none;
|
|
}
|
|
|
|
:deep(.ant-table-row:hover) {
|
|
background-color: transparent;
|
|
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) {
|
|
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>
|