rax-medical/src/views/home/home.vue

<template>
    <div class="home-page">
        <div class="background-box">
            <div class="left-content">
                <div class="header-box move_4">
                    <div class="header-item =">
                        <span class="main-color f20" style="font-weight: 600;">{{ userInfo.name }}</span>
                        <span class="text2-color f14">{{ userInfo.permissions }}</span>
                    </div>
                    <div class="header-item">
                        <el-icon class="text1-color" style="font-size: 26px;margin-right: 20px;"><Calendar /></el-icon>
                        <div>
                            <p class="text1-color f14">待办任务</p>
                            <p class="main-color f20">{{ total }}</p>
                        </div>
                    </div>
                </div>
                <div class="echart-box">
                    <div class="echart-item move_2"><NumberChart/></div>
                    <div class="echart-item move_4"><TimeChart/></div>
                </div>
            </div>
            <div class="right-content">
                <div class="week-calendar">

                </div>
                <div class="system-logs">
                    <SystemLogs/>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang='ts' setup>
import { onMounted, reactive, ref, toRefs, watch } from 'vue'
import { useLoginStore } from '@/stores/user-info-store'
import NumberChart from "./number-chart.vue";
import TimeChart from "./time-chart.vue";
import SystemLogs from "@/components/system-logs.vue";

const userInfo = useLoginStore().getlogin()

const total = ref(0) // 日历添加的记录提醒统计

</script>

<style lang='scss' scoped>
.home-page {
    width: 100%;
    height: 100%;
    padding: 15px;

    .background-box {
        width: 100%;
        height: 100%;
        background: white;
        padding: 20px 35px;
        display: flex;
        justify-content: space-between;
    }

    .left-content {
        width: calc(100% - 550px);
        height: 100%;
        .header-box {
            width: 100%;
            height: 140px;
            display: flex;
            justify-content: space-between;
            .header-item {
                width: calc(50% - 10px);
                height: 100%;
                border: 1px solid $border-color;
                border-radius: 5px;
                padding: 0 90px;
                line-height: 1.5;
                display: flex;
                flex-direction: column;
                justify-content: center;
                & ~ .header-item {
                    flex-direction: row;
                    justify-content: flex-start;
                    align-items: center;
                }
            }
        }
        .echart-box {
            width: 100%;
            height: calc(100% - 160px);
            margin-top: 20px;
            .echart-item {
                width: 100%;
                height: calc(50% - 20px);
                margin-top: 20px;
            }
        }
    }

    .right-content {
        width: 530px;
        height: 100%;
    }
}</style>