表格样式

src/components/item-d/item-d.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <public-title :title="props.title">
-            <template #title>
+      <template #right>
         {{ props.tips }}
       </template>
     </public-title>
@@ -9,14 +9,14 @@
   </div>
 </template>
 <script setup lang="ts">
-    import PublicTitle from '/@/components/publicTitle.vue';
+import PublicTitle from '/@/components/publicTitle.vue';
-    import { useSpin } from '/@/components/body-d-left/bodyLeftHooks.ts';
+import {useSpin} from '/@/components/body-d-left/bodyLeftHooks.ts';
-    import { useHealth } from '/@/components/body-d-right/bodyRightHooks.ts';
+import {useHealth} from '/@/components/body-d-right/bodyRightHooks.ts';
-    import { screenPie } from '/@/components/item-d/pieCharts.ts';
+import {screenPie} from '/@/components/item-d/pieCharts.ts';
-    import { onMounted, ref, unref, watch } from 'vue';
+import {onMounted, ref, unref, watch} from 'vue';
-    import * as echarts from 'echarts';
+import * as echarts from 'echarts';
 
-    const props = defineProps({
+const props = defineProps({
   title: {
     type: String,
     default: () => '',
@@ -33,44 +33,44 @@
     type: String,
     default: () => '',
   },
-    });
+});
-    const healthChart = ref<HTMLElement>();
+const healthChart = ref<HTMLElement>();
 
-    const { setSpin, spinning } = useSpin();
+const {setSpin, spinning} = useSpin();
 
-    onMounted(() => {
+onMounted(() => {
   init();
-    });
+});
 
-    watch(
+watch(
     () => props.data,
     () => {
       init();
     }
-    );
+);
 
-    const { healthData, getValue, setHealth } = useHealth();
+const {healthData, getValue, setHealth} = useHealth();
 
-    async function init() {
+async function init() {
   // setHealth(props.data);
   // const yData = unref(getValue);
   // let total = yData.reduce((accumulator, currentValue) => Number(accumulator) + Number(currentValue), 0);
   initChart(props.data, 78, props.color);
-    }
+}
 
-    function initChart(chartData, total, color) {
+function initChart(chartData, total, color) {
   let myChart = echarts.init(healthChart.value);
   let options = screenPie(chartData, total, color);
   myChart.setOption(options);
   window.addEventListener('resize', () => {
     myChart.resize();
   });
-    }
+}
 </script>
 <style scoped lang="less">
-    .inner {
+.inner {
   width: 90%;
   margin: 0 auto;
   height: calc(100% - 40px);
-    }
+}
 </style>

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

@@ -1,7 +1,7 @@
 <template>
   <div class="terminal-container">
     <public-title title="睡眠">
-            <template #title>平均睡眠时长：6小时30分</template>
+      <template #right>平均睡眠时长：6小时30分</template>
     </public-title>
     <div class="inner">
       <div class="title">
@@ -13,33 +13,33 @@
   </div>
 </template>
 <script setup lang="ts">
-    import PublicTitle from '/@/components/publicTitle.vue';
+import PublicTitle from '/@/components/publicTitle.vue';
-    import * as echarts from 'echarts';
+import * as echarts from 'echarts';
-    import { ringOption, useHealth } from '/@/components/body-d-right/bodyRightHooks';
+import {ringOption, useHealth} from '/@/components/body-d-right/bodyRightHooks';
-    import { ref, onMounted, unref } from 'vue';
+import {ref, onMounted, unref} from 'vue';
-    import { sleepCharts } from '/@/components/secondaryScreen/screen-right/screenRightHooks';
+import {sleepCharts} from '/@/components/secondaryScreen/screen-right/screenRightHooks';
 
-    const sleepChart = ref<HTMLElement>();
+const sleepChart = ref<HTMLElement>();
-    onMounted(() => {
+onMounted(() => {
   init();
-    });
+});
-    const { healthData, getValue, setHealth } = useHealth();
+const {healthData, getValue, setHealth} = useHealth();
 
-    function init() {
+function init() {
   initChart();
-    }
+}
 
-    function initChart() {
+function initChart() {
   let myChart = echarts.init(sleepChart.value);
   let options = sleepCharts();
   myChart.setOption(options);
   window.addEventListener('resize', () => {
     myChart.resize();
   });
-    }
+}
 </script>
 <style scoped lang="less">
-    .inner {
+.inner {
   height: calc(100% - 40px);
 
   .title {
@@ -60,5 +60,5 @@
   .sleepChart {
     height: 80%;
   }
-    }
+}
 </style>

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)) {
+  :deep(.ant-table) {
-    background-color: rgba(255, 255, 255, 0.1);
+    background-color: transparent;
+    pointer-events: none;
   }
 
-  :deep(.ant-table-tbody tr:nth-child(odd)) {
+  :deep(.ant-table-tbody > tr > td) {
-    background-color: #0A0A0C;
+    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>