健康咨询平台大屏

2025-09-25 14:57:31 +08:00
parent a97d9c64aa
commit d103785a45
15 changed files with 20569 additions and 5 deletions
@@ -0,0 +1,147 @@
+<template>
+    <div class="sun-screen-box">
+        <div class="sun-screen-title">
+            <div class="sun-title-left">
+                {{ dateInfo?.day }} {{ dateInfo?.times }}<span style="margin-left: 30px">{{ rightDate }}</span>
+            </div>
+            <div class="sun-title-center">健康咨询平台</div>
+            <div class="sun-title-right">
+                <!-- <a-button class="top-right-button" @click="toOther">健康监测大屏</a-button> -->
+            </div>
+        </div>
+        <div class="sun-body-content">
+            <div class="sun-body-content-top">
+                <health-content-top />
+            </div>
+            <div class="sun-body-content-middle">
+                <health-content-middle />
+            </div>
+            <div class="sun-body-content-bottom">
+                <health-content-bottom-item1 class="item" />
+                <health-content-bottom-item2 class="item" />
+                <health-content-bottom-item3 class="item" />
+                <health-content-bottom-item4 class="item" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+    import healthContentTop from './components/healthContentTop.vue';
+    import healthContentMiddle from './components/healthContentMiddle.vue';
+    import healthContentBottomItem1 from './components/healthContentBottomItem1.vue';
+    import healthContentBottomItem2 from './components/healthContentBottomItem2.vue';
+    import healthContentBottomItem3 from './components/healthContentBottomItem3.vue';
+    import healthContentBottomItem4 from './components/healthContentBottomItem4.vue';
+    import { ref, onMounted, watch } from 'vue';
+    import dayjs from 'dayjs';
+    import { startTime } from '/@/utils/utils.ts';
+
+    interface DateInfo {
+        day?: string;
+        times?: string;
+    }
+    const dateInfo = ref<DateInfo>({});
+    const rightDate = ref<string>('');
+    const initDate = ref(startTime);
+
+    const getTime = () => {
+        dateInfo.value = {
+            day: dayjs().format('YYYY年MM月DD日'),
+            times: dayjs().format('HH:mm:ss'),
+        };
+    };
+    onMounted(() => {
+        getTime();
+        rightDate.value = '累计运行时间：' + (dayjs().diff(dayjs(initDate.value), 'days') + 1) + ' 天';
+    });
+
+    watch(
+        () => dateInfo.value.day,
+        () => {
+            rightDate.value = '累计运行时间：' + (dayjs().diff(dayjs(initDate.value), 'days') + 1) + ' 天';
+        }
+    );
+</script>
+
+<style lang="less" scoped>
+    .sun-screen-box {
+        height: 100vh;
+        letter-spacing: 2px;
+        background: url('/@/assets/indexSun/bigBg.png') no-repeat;
+        background-size: 100% 100%;
+
+        .sun-screen-title {
+            height: 87px;
+            background: url('/@/assets/indexSun/bg.png') no-repeat;
+            background-size: 100% 100%;
+            display: flex;
+            font-size: 20px;
+            color: #fff;
+            text-align: center;
+
+            .sun-title-left {
+                font-family: MicrosoftYaHei-Bold;
+                // font-size: 22px;
+                font-size: clamp(14px, 1vw, 50px);
+                font-weight: bold;
+                text-align: left;
+                flex: 1;
+                line-height: 60px;
+                padding-left: 15px;
+            }
+
+            .sun-title-right {
+                flex: 1;
+                text-align: right;
+                line-height: 50px;
+                padding-right: 30px;
+            }
+
+            .sun-title-center {
+                flex: 1;
+                font-size: 58px;
+                letter-spacing: 10px;
+                // text-shadow: 2px 2px 5px rgba(118, 141, 219, 0.53);
+                font-weight: 400;
+                font-family: PangMenZhengDao;
+            }
+        }
+
+        .sun-body-content {
+            height: calc(100% - 87px);
+            padding: 10px 20px;
+            box-sizing: border-box;
+            .sun-body-content-top {
+                height: 10%;
+            }
+            .sun-body-content-middle {
+                height: 55%;
+                // padding: 0 20px 20px 20px;
+                box-sizing: border-box;
+                width: 100%;
+                // position: absolute;
+                // left: 0;
+                // top: 200px;
+            }
+            .sun-body-content-bottom {
+                height: 35%;
+                // padding: 0 20px 20px 20px;
+                box-sizing: border-box;
+                width: 100%;
+                // height: 300px;
+                // position: absolute;
+                // left: 0;
+                // bottom: 0;
+                display: flex;
+                justify-content: space-around;
+                display: flex;
+                justify-content: space-between; /* 左右元素靠边，中间等间距 */
+                gap: 16px;
+                .item {
+                    flex: 1; /* 等分占位 */
+                }
+            }
+        }
+    }
+</style>