表格样式

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

@@ -1,76 +1,76 @@
 <template>
-    <div>
+  <div>
-        <public-title :title="props.title">
+    <public-title :title="props.title">
-            <template #title>
+      <template #right>
-                {{ props.tips }}
+        {{ props.tips }}
-            </template>
+      </template>
-        </public-title>
+    </public-title>
-        <div class="inner" ref="healthChart"></div>
+    <div class="inner" ref="healthChart"></div>
-    </div>
+  </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: {
+  title: {
-            type: String,
+    type: String,
-            default: () => '',
+    default: () => '',
-        },
+  },
-        data: {
+  data: {
-            type: Array,
+    type: Array,
-            default: () => [],
+    default: () => [],
-        },
+  },
-        color: {
+  color: {
-            type: Array,
+    type: Array,
-            default: () => [],
+    default: () => [],
-        },
+  },
-        tips: {
+  tips: {
-            type: String,
+    type: String,
-            default: () => '',
+    default: () => '',
-        },
+  },
-    });
+});
-    const healthChart = ref<HTMLElement>();
+const healthChart = ref<HTMLElement>();
 
-    const { setSpin, spinning } = useSpin();
+const {setSpin, spinning} = useSpin();
 
-    onMounted(() => {
+onMounted(() => {
-        init();
+  init();
-    });
+});
 
-    watch(
+watch(
-        () => props.data,
+    () => props.data,
-        () => {
+    () => {
-            init();
+      init();
-        }
-    );
-
-    const { healthData, getValue, setHealth } = useHealth();
-
-    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) {
+const {healthData, getValue, setHealth} = useHealth();
-        let myChart = echarts.init(healthChart.value);
+
-        let options = screenPie(chartData, total, color);
+async function init() {
-        myChart.setOption(options);
+  // setHealth(props.data);
-        window.addEventListener('resize', () => {
+  // const yData = unref(getValue);
-            myChart.resize();
+  // let total = yData.reduce((accumulator, currentValue) => Number(accumulator) + Number(currentValue), 0);
-        });
+  initChart(props.data, 78, props.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%;
+  width: 90%;
-        margin: 0 auto;
+  margin: 0 auto;
-        height: calc(100% - 40px);
+  height: calc(100% - 40px);
-    }
+}
 </style>

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

@@ -1,64 +1,64 @@
 <template>
-    <div class="terminal-container">
+  <div class="terminal-container">
-        <public-title title="睡眠">
+    <public-title title="睡眠">
-            <template #title>平均睡眠时长：6小时30分</template>
+      <template #right>平均睡眠时长：6小时30分</template>
-        </public-title>
+    </public-title>
-        <div class="inner">
+    <div class="inner">
-            <div class="title">
+      <div class="title">
-                <span class="count">6.5h</span>
+        <span class="count">6.5h</span>
-                <span class="lightSleep">深睡2.4小时 浅睡4.1小时</span>
+        <span class="lightSleep">深睡2.4小时 浅睡4.1小时</span>
-            </div>
+      </div>
-            <div class="sleepChart" ref="sleepChart"></div>
+      <div class="sleepChart" ref="sleepChart"></div>
-        </div>
     </div>
+  </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();
+  init();
-    });
+});
-    const { healthData, getValue, setHealth } = useHealth();
+const {healthData, getValue, setHealth} = useHealth();
 
-    function init() {
+function init() {
-        initChart();
+  initChart();
-    }
+}
 
-    function initChart() {
+function initChart() {
-        let myChart = echarts.init(sleepChart.value);
+  let myChart = echarts.init(sleepChart.value);
-        let options = sleepCharts();
+  let options = sleepCharts();
-        myChart.setOption(options);
+  myChart.setOption(options);
-        window.addEventListener('resize', () => {
+  window.addEventListener('resize', () => {
-            myChart.resize();
+    myChart.resize();
-        });
+  });
-    }
+}
 </script>
 <style scoped lang="less">
-    .inner {
+.inner {
-        height: calc(100% - 40px);
+  height: calc(100% - 40px);
 
-        .title {
+  .title {
-            color: #cfcfcf;
+    color: #cfcfcf;
-            text-align: left;
+    text-align: left;
-            padding: 1% 6%;
+    padding: 1% 6%;
 
-            .count {
+    .count {
-                font-size: 28px;
+      font-size: 28px;
-                font-weight: bold;
+      font-weight: bold;
-            }
-
-            .lightSleep {
-                padding-left: 2%;
-            }
-        }
-
-        .sleepChart {
-            height: 80%;
-        }
     }
+
+    .lightSleep {
+      padding-left: 2%;
+    }
+  }
+
+  .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>