qp_onemap_ui/src/views/yygl/appCenter.vue

<template>
  <div class="app-center">
    <div class="container">
        <!-- 左侧导航栏 -->
        <div class="sidebar">
        <div class="sidebar-menu">
            <div class="menu-item" :class="{'active': menuValue === 1}" @click="handleMenuClick(1)">
            <el-icon><Menu /></el-icon>
            <span>应用概览</span>
            </div>
            <div class="menu-item" v-if="userInfo.id != touristUserId" :class="{'active': menuValue === 2}" @click="handleMenuClick(2)">
            <el-icon><Grid /></el-icon>
            <span>应用管理</span>
            </div>
            <div class="menu-item" :class="{'active': menuValue === 3}" @click="handleMenuClick(3)">
            <el-icon><Monitor /></el-icon>
            <span>应用监测</span>
            </div>
        </div>
        </div>

        <!-- 右侧主内容区 -->
        <div class="main-content">
            <AppOverview v-if="menuValue === 1" />
            <AppManagement v-if="menuValue === 2" />
            <AppMonitoring v-if="menuValue === 3" />
        </div>
    </div>
  </div>
</template>

<script>
import AppOverview from "@/views/yygl/overview/index.vue";
import AppManagement from "@/views/yygl/manage/index.vue";
import AppMonitoring from "@/views/yygl/monitor/index.vue";
export default {
  name: "AppCenter",
  components: {
    AppOverview,
    AppManagement,
    AppMonitoring,
  },
  data() {
    return {
        touristUserId:systemConfig.touristUserId,
        userInfo:this.$store.state.userInfo,
        userState:this.$store.state.userState,
        menuValue:1
    }
  },
  methods: {
    handleMenuClick(value) {
      console.log(value)
      this.menuValue = value;
    }
  }
}
</script>

<style lang="less" scoped>
.app-center {
  width: 100%;
//   min-height: 100vh;
  height: calc(100vh - 120px);
  background-color: #08224a;
  color: #ffffff;
  overflow-x: hidden;
}
.container {
  display: flex;
  width: 100%;
  height: 100%;
  background-color: #08224a;
  color: #ffffff;
}

/* 左侧导航栏样式 */
.sidebar {
  width: 200px;
  background-color: #0a2a5a;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  
  .sidebar-menu {
    padding: 20px 0;
    
    .menu-item {
      display: flex;
      align-items: center;
      padding: 15px 20px;
      cursor: pointer;
      transition: all 0.3s ease;
      color: rgba(255, 255, 255, 0.8);
      
      i {
        margin-right: 12px;
        font-size: 18px;
      }
      
      &:hover {
        background-color: rgba(24, 144, 255, 0.2);
        color: #ffffff;
      }
      
      &.active {
        background-color: rgba(24, 144, 255, 0.3);
        color: #ffffff;
        border-right: 3px solid #1890ff;
      }
    }
  }
}

/* 右侧主内容区 */
.main-content {
  flex: 1;
  padding: 20px 30px;
  overflow: auto;
}

</style>