admin-vben5/apps/web-antd/src/views/screen/navigation/Navigation.vue
fyy 9279f2246a
Some checks are pending
Gitea Actions Demo / Explore-Gitea-Actions (push) Waiting to run
fix: 大屏退出登录
2025-07-11 15:59:53 +08:00

313 lines
7.4 KiB
Vue

<template>
<div class="navigation-bg">
<div class="navigation-head">
<div class="navigation-head-left">超级管理员 欢迎你</div>
<div class="navigation-head-center">南川区综合服务中心数智平台</div>
<div class="navigation-head-right" @click="logout">
<span>
<!-- <img src="../../../assets/return.png" alt="退出"> -->
退出
</span>
</div>
</div>
<div class="navigation-body">
<div class="navigation-body-left">
<div @click="goToProperty()">基础物业</div>
<div @click="goToEnergyAnalysis()">能耗分析</div>
<div @click="goToSecurity()">安防大屏</div>
</div>
<div class="navigation-body-center">
<div class="top-content">
<div class="top-content-text1"><div class="text1">数据管理</div></div>
<div class="top-content-text2"><div class="text1">运行监控</div></div>
<div class="top-content-text3"><div class="text1">信息管理</div></div>
<div class="top-content-text4"><div class="text1">配置管理</div></div>
<div class="top-content-text5"><div class="text1">登录管理</div></div>
<div class="top-content-text6"><div class="text1">驾驶舱</div></div>
</div>
<div class="bottom-content">
<div class="bottom-content-text1"><div class="text">数字建模</div></div>
<div class="bottom-content-text2"><div class="text">指挥中心</div></div>
<div class="bottom-content-text3"><div class="text">软件支撑</div></div>
<div class="bottom-content-text4"><div class="text">应用管理</div></div>
<div class="bottom-content-text5"><div class="text">数据管理</div></div>
</div>
</div>
<div class="navigation-body-right">
<div @click="goToMonitor()">监控大屏</div>
<div @click="goToDigitalIntelligence()">商务中心</div>
<div @click="goToHome()">后台管理</div>
<!-- <div>能源管理</div>
<div>能耗分析</div> -->
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router'
import { preferences } from '@vben/preferences';
import { useFlexibleRem } from '#/utils/useFlexibleRem'
import { useAuthStore } from '../../../store'
useFlexibleRem()
const router = useRouter()
const authStore = useAuthStore();
// 退出方法
const logout = async () => {
// 这里可以添加清除 token、重定向登录页等逻辑
console.log('用户退出')
await authStore.logout()
router.push('/auth/login') // 假设登录页面路径为 /login
}
//物业
const goToProperty = () => {
router.push('/property')
}
//能耗分析
const goToEnergyAnalysis = () => {
router.push('/energyAnalysis')
}
// 监控大屏
const goToSecurity = () => {
router.push('/security')
}
// 监控大屏
const goToMonitor = () => {
router.push('/monitor')
}
// 商务中心数智管理平台
const goToDigitalIntelligence = () => {
router.push('/digitalIntelligence')
}
//
const goToHome = () => {
router.push(preferences.app.defaultHomePath);
}
</script>
<style scoped>
.navigation-bg {
height: 100vh;
width: 100vw;
text-align: center;
background: url("../../../assets/navigation.png");
background-size: 100% 100%;
color: #fff;
text-shadow: 0 0.125rem 0.5rem #000;
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.navigation-head {
display: flex;
align-items: center;
flex-wrap: wrap;
height: 3.5rem;
}
.navigation-head-center{
font-size: 1.9rem;
color: #fff;
text-align: center;
font-weight: bold;
letter-spacing: 0.1em;
}
.navigation-head-left,
.navigation-head-right {
flex: 1 1 100%;
text-align: center;
cursor: pointer;
font-size: 1rem;
padding-left: 1.3rem;
padding-right: 1.3rem;
}
@media (min-width: 48em) {
.navigation-head-left {
flex: 1;
text-align: left;
font-size: 0.875rem;
padding-left: 1.3rem;
}
.navigation-head-center {
flex: 3;
font-size: 1.5rem;
text-align: center;
}
.navigation-head-right {
flex: 1;
text-align: right;
font-size: 0.875rem;
padding-right: 1.3rem;
}
}
.navigation-body {
display: flex;
align-items: center;
justify-content: space-between;
flex: 1;
}
.navigation-body-left {
width: 12%;
display: flex;
flex-direction: column;
justify-content: space-around;
padding: 2.25rem 1.25rem;
height: 35rem;
}
.navigation-body-left div {
background: url("../../../assets/shine.png") no-repeat center;
background-size: contain;
font-size: 1rem;
padding: 0.625rem 1.25rem;
min-width: 7.5rem;
max-width: 100%;
transition: transform 0.2s ease;
cursor: pointer;
color: #77DAFF;
}
.navigation-body-left div:hover {
color: #ffffff;
background-image: url("../../../assets/shine-lines.png");
}
.navigation-body-center{
flex: 1;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.top-content{
height: 70%;
padding-top: 26rem;
padding-left: 19.5rem;
padding-right: 20rem;
display: flex;
justify-content: space-between;
.top-content-text1{
font-size: 1.0625rem;
width: 4.6875rem;
height: 7.5rem;
padding-top: 0.5rem;
color: #86B6E6;
cursor: pointer;
}
.top-content-text2{
font-size: 1.0625rem;
font-weight: 600;
width: 4.6875rem;
height: 7.5rem;
padding-top: 1.25rem;
color: #86ECDE;
cursor: pointer;
}
.top-content-text3{
font-size: 1.0625rem;
font-weight: 600;
width: 4.6875rem;
height: 7.5rem;
padding-top: 2.5rem;
color: #FECFB4;
cursor: pointer;
}
.top-content-text4{
font-size: 1.0625rem;
font-weight: 600;
width: 4.6875rem;
height: 7.5rem;
padding-top: 2.625rem;
color: #CDADF4;
cursor: pointer;
}
.top-content-text5{
font-size: 1.0625rem;
font-weight: 600;
width: 4.6875rem;
height: 7.5rem;
padding-top: 1.5625rem;
color: #86ECDE;
cursor: pointer;
}
.top-content-text6{
font-size: 1.0625rem;
font-weight: 600;
width: 4.6875rem;
height: 7.5rem;
padding-top: 1.25rem;
color: #86B6E6;
cursor: pointer;
}
.text1{
padding: 0.3125rem 1.875rem;
}
}
.bottom-content{
height: 50%;
display: flex;
justify-content: space-between;
padding-top: 12.5rem;
padding-left: 23.625rem;
padding-right: 24.25rem;
font-size: 1rem;
color: #00EEFD;
.bottom-content-text1{
width: 6.875rem;
cursor: pointer;
}
.bottom-content-text2{
padding-top: 0.75rem;
width: 6.875rem;
cursor: pointer;
}
.bottom-content-text3{
padding-top: 1.125rem;
width: 6.875rem;
cursor: pointer;
}
.bottom-content-text4{
padding-top: 0.8125rem;
width: 6.875rem;
cursor: pointer;
}
.bottom-content-text5{
width: 6.875rem;
cursor: pointer;
}
.text{
align-items: center;
}
}
.navigation-body-right{
width: 12%;
display: flex;
flex-direction: column;
justify-content: space-around;
padding: 2.25rem 1.25rem;
height: 35rem;
}
.navigation-body-right div {
background: url("../../../assets/shine.png") no-repeat center;
background-size: contain;
font-size: 1rem;
padding: 0.625rem 1.25rem;
min-width: 7.5rem;
max-width: 100%;
transition: transform 0.2s ease;
cursor: pointer;
color: #77DAFF;
}
.navigation-body-right div:hover {
background-image: url("../../../assets/shine-lines.png");
color: #ffffff;
}
</style>