xj-screen/src/views/healthConsultation/HealthConsultationIndex.vue

<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, onUnmounted } 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 timer = ref<number | null>(null);

    const getTime = () => {
        dateInfo.value = {
            day: dayjs().format('YYYY年MM月DD日'),
            times: dayjs().format('HH:mm:ss'),
        };
    };

    // 启动定时器，每秒更新时间
    const startTimer = () => {
        if (timer.value) {
            clearInterval(timer.value);
        }
        timer.value = window.setInterval(() => {
            getTime();
            updateRightDate();
        }, 1000);
    };

    const updateRightDate = () => {
        rightDate.value = '累计运行时间：' + (dayjs().diff(dayjs(initDate.value), 'days') + 1) + ' 天';
    };

    onMounted(() => {
        getTime();
        updateRightDate();
        startTimer(); // 启动定时器
        document.title = '健康咨询平台';
    });

    watch(
        () => dateInfo.value.day,
        () => {
            updateRightDate();
        }
    );

    // 组件卸载时清理定时器
    onUnmounted(() => {
        if (timer.value) {
            clearInterval(timer.value);
        }
    });
</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: 80px;
            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: 50px;
                letter-spacing: 10px;
                // text-shadow: 2px 2px 5px rgba(118, 141, 219, 0.53);
                font-weight: bold;
                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>