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="$getUserType() != 1"
            :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 {
      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>