SocialNetworks_duan/src/App.vue

<template>
  <div class="app-container">
    <header class="el-header">
      <div>
        <img src="./assets/images/head.png" alt="" style="width: 100%; height: 100%" />
        <div>
          <!-- 根据状态控制显示 -->
          <div class="toogle-jianjie" v-if="showToggleJianjie">
            <img
              src="./assets/images/toogle-pei.png"
              alt=""
              style="width: 640px; margin-left: 640px; margin-top: 176px"
            />
            <img
              src="./assets/images/cancel.png"
              alt=""
              style="margin-left: -40px; margin-bottom: 159px; cursor: pointer"
              @click="showToggleJianjie = false"
            />
          </div>
        </div>
      </div>
    </header>
    <aside class="aside">
      <nav class="menu">
        <!-- 手动生成第一个菜单项 -->
        <div v-for="item in menuItems" :key="item.index" class="el-sub-menu">
          <div class="menu-title">
            <div class="tltlemenu-left">
              <img
                src="./assets/images/titlelogo.png"
                style="width: 20px; height: 20px; margin-right: 12px"
              />
              {{ item.title }}
            </div>
            <img src="./assets/images/titleright.png" alt="" style="width: 66px; height: 16px" />
          </div>
          <ul class="menu-items">
            <div v-for="child in item.subItems" :key="child.index" style="text-decoration: none">
              <li
                :key="child.index"
                class="el-menu-item"
                @click="jumpPage(child.index)"
                :class="{ active: isActive(child.index) }"
              >
                <div>
                  {{ child.title }}
                </div>
              </li>
            </div>
          </ul>
        </div>
      </nav>
    </aside>
    <el-dialog v-model="openDialog" width="500" align-center class="custom-dialog-prepare">
      <div class="center-tips">
        <img src="./assets/images/icon/pre-icon.png" alt="" class="pre-icon" />
        <div class="tips-font">该案例正在开发中</div>
      </div>
    </el-dialog>
    <main class="main">
      <!-- 路由视图 -->
      <router-view></router-view>
    </main>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessage } from "element-plus";
const router = useRouter();
const route = useRoute();
const menuItems = [
  {
    index: "1",
    title: "关键节点识别",
    subItems: [
      { index: "/key-node-1", title: "重大舆情事件锚点推荐" },
      { index: "/key-node-2", title: "传播意见领袖识别" },
      { index: "/key-node-3", title: "传播桥梁节点识别" }
    ]
  },
  {
    index: "2",
    title: "链路预测",
    subItems: [
      { index: "/link-prediction-1", title: "人物互动隐关系预测" },
      { index: "/link-prediction-2", title: "社交紧密团体识别" },
      { index: "/link-prediction-3", title: "人物社交隐关系预测" }
    ]
  },
  {
    index: "3",
    title: "群体演化分析",
    subItems: [
      { index: "/group-evolution-1", title: "群体识别发现" },
      { index: "/group-evolution-2", title: "群体结构演化分析" },
      { index: "/group-evolution-3", title: "群体成员演化分析" },
      { index: "/group-evolution-4", title: "异常群体捕捉" }
    ]
  }
];

const openDialog = ref(false);
// 判断当前路由是否激活菜单项
const isActive = (routePath) => {
  return route.path === routePath;
};

//处理跳转页面逻辑
const jumpPage = (routePath) => {
  const activedPaths = [
    "/key-node-1",
    "/key-node-2",
    "/key-node-3",
    "/link-prediction-1",
    "/link-prediction-2",
    "/link-prediction-3",
    "/group-evolution-1",
    "/group-evolution-2",
    "/group-evolution-3",
    "/group-evolution-4"
  ];
  if (activedPaths.includes(routePath)) {
    router.push({ path: routePath });
    return;
  }
  openDialog.value = true;
};
// 控制弹窗显示状态
const showToggleJianjie = ref(false);
</script>

<style scoped>
.app-container {
  width: 100vw;
  height: 1080px;
  background-image: url("./assets/images/bci.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #02131f;
}
:deep(.custom-dialog-prepare) {
  width: 480px;
  height: 250px;
  background: url("./assets/images/preparation.png") no-repeat center;
  display: flex;
  align-items: center;
  justify-content: center;
}
:deep(.custom-dialog-prepare) .pre-icon {
  width: 30px;
  height: 30px;
  margin-right: 10px;
}
:deep(.custom-dialog-prepare) .center-tips {
  display: flex;
  align-items: center;
}
:deep(.custom-dialog-prepare) .center-tips .tips-font {
  font-size: 24px;
  color: #fff;
  opacity: 0.7;
}
.el-header {
  width: 100%;
  height: 100px;
}
.toogle-jianjie {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: fixed;
  z-index: 9999;
  backdrop-filter: blur(4px);
  background-color: rgba(0, 0, 0, 0.7);
}
.aside {
  width: 320px;
  height: 944px;
  border: 2px;
  padding: 16px;
  left: 16px;
  color: aliceblue;
  font-family: Arial, sans-serif;
  position: absolute;
}

.menu {
  width: 320px;
  height: 100%;
  border-width: 2px;
  border-style: solid;
  border-image: linear-gradient(to bottom, #3aa1f8, #3aa1f833) 1;
  background-image: linear-gradient(to right, #063d7133, #081e38cc);
}

.sub-menu {
  width: 288px;
  height: 176px;
}
.menu-items {
  padding: 0 15px;
}
.menu-title {
  cursor: pointer;
  padding: 10px;
  width: 288px;
  border-radius: 2px;
  margin-top: 16px;
  margin-left: 16px;
  background-image: linear-gradient(to right, #18395c, #3378c200);
  border-image: linear-gradient(to right, #225f9200, #3aa1f8) 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.menu-title:hover {
  border-radius: 2px;
  background: linear-gradient(270deg, rgba(14, 167, 213, 0) 0%, rgba(8, 118, 190, 0.24) 100%);
}

.el-menu-item {
  width: 100%;
  height: 36px;
  margin-top: 12px;
  line-height: 36px;
  cursor: pointer;
  color: #fff;
  padding-left: 40px;
  border-radius: 2px;
}

.el-menu-item.active {
  background-image: linear-gradient(to right, #0876be, #0ea7d500);
  border-radius: 2px;
}

.tltlemenu-left {
  display: flex;
  align-items: center;
}

.sub-menu-items {
  list-style-type: none;
  padding: 0;
  margin: 0;
  margin-top: 5px;
}

.el-menu-item {
  width: 288px;
  height: 36px;
  margin-top: 12px;
  line-height: 36px;
}

.el-menu-item a {
  margin-left: 40px;
  color: aliceblue;
  text-decoration: none;
}

.el-menu-item:hover {
  background-image: linear-gradient(to right, #0876be, #0ea7d500);
}

.main {
  width: 1544px;

  margin-left: 360px;
  margin-top: 16px;
}

.main2 {
  width: 1544px;
  height: 100%;
  margin-left: 0px;
  margin-top: 16px;
}
</style>