desktop_task_schedule/code/web/task_schedule/src/views/DesktopArchievement.vue

<!--
 * @Author: Kane
 * @Date: 2023-03-03 14:38:07
 * @LastEditors: Kane
 * @FilePath: /task_schedule/src/views/DesktopArchievement.vue
 * @Description: 显示在桌面上，展示任务量与业绩的view
 * 
 * Copyright (c) ${2022} by Kane, All Rights Reserved. 
-->
<template>
    <div class="view-wrapper">
        <!-- <div class="left-wrapper"></div> -->
        <div class="center-wrapper">
            <span class="slogan">对标先进&nbsp;比学赶超</span>
            <div class="total-archievement-wrapper">
                <div class="total-archievement-rate-wrapper"></div>
                <div class="total-archievement-charts-wrapper"></div>
            </div>
            <div class="reward-wrapper"></div>
        </div>
        <div class="right-wrapper">

        </div>
    </div>
</template>

<script lang="ts">
import { reactive, onBeforeMount } from "vue";
import { useRouter } from "vue-router";
import { StaffInfo } from "@/data/cpicxim/StaffInfo";
import { loadStaffInfo } from "@/utils/api/localStorage";
import { ElMessage } from "element-plus";
export default {
    name: "DesktopArchievement",
    setup()
    {
        const router = useRouter();
        const staffInfo = loadStaffInfo();

        //检查存储的登录信息，不存在则返回登录页面
        if (staffInfo.P13UID == "")
        {
            ElMessage({
                message: "登录信息失效，请重新登录！",
                type: "success",
                center: true,
            });

            router.push("/login");
        }
    },
};
</script>

<style scoped lang="scss">
.view-wrapper {
    box-sizing: border-box;
    min-height: 800px;
    height: calc(100vh - 10mm);
    min-width: 1280px;
    width: 100vw;
    padding: 5mm;
    display: flex;
    justify-content: end;
    align-items: stretch;

    div {
        border: 1px solid red;
        box-sizing: border-box;
    }
}

.center-wrapper {
    //中间部分
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: start;

    .slogan {
        //标语
        margin: 0px;
        padding: 15px 0px;
        display: block;
        text-align: center;

        font: {
            family: "FZ-ZHUOHEI";
            weight: 100;
            size: 70px;
        }

        color: $color-bg-05;
        text-shadow: #feebb1 0px 0px,
        #feebb1 5px 0px,
        #feebb1 -5px -0px,
        #feebb1 -0px -5px,
        #feebb1 -4px -4px,
        #feebb1 4px 4px,
        #feebb1 4px -4px,
        #feebb1 -4px 4px;
    }

    .total-archievement-wrapper {
        //业绩部分
        height: 360px;
        display: flex;
        justify-content: center;
        align-items: stretch;

        .total-archievement-rate-wrapper {
            //业绩比例
            width: 25%;

            display: flex;
            justify-content: center;
            align-items: center;
        }

        .total-archievement-charts-wrapper {
            //业绩图表
            width: 75%;

            display: flex;
            justify-content: center;
            align-items: center;
        }
    }

    .reward-wrapper {
        //奖励部分
        height: 240px;
    }
}

.right-wrapper {
    min-width: 400px;
    width: 25%;
}
</style>
<style lang="scss">
body {
    background-image: radial-gradient(farthest-corner at 100% 0%,
            $color-bg-01,
            $color-bg-02,
            $color-bg-03,
            $color-bg-04,
            $color-bg-05,
            $color-bg-05);
}
</style>