152 lines
3.5 KiB
Vue
152 lines
3.5 KiB
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">对标先进 比学赶超</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> |