feat: 接入大屏修复bug
This commit is contained in:
307
apps/web-antd/src/views/screen/navigation/Navigation.vue
Normal file
307
apps/web-antd/src/views/screen/navigation/Navigation.vue
Normal file
@@ -0,0 +1,307 @@
|
||||
<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 @click="goToMonitor()">监控大屏</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="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';
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
// 退出方法
|
||||
const logout = () => {
|
||||
// 这里可以添加清除 token、重定向登录页等逻辑
|
||||
console.log('用户退出')
|
||||
router.push('/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>
|
||||
Reference in New Issue
Block a user