admin-vben5/apps/web-antd/src/views/screen/navigation/Navigation.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>