home.vue

<template>
  <div class="home">
    <!--header-->
    <div class="header">
      <div class="bg_header">
        <div class="header_nav fl t_title">{{ activeTitle }}</div>
      </div>
      <div class="guide">
        <el-dropdown>
          <span class="el-dropdown-link">
            导航
            <el-icon class="el-icon--right">
              <arrow-down />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="gotoRank('force3d')"
                >原力排名</el-dropdown-item
              >
              <el-dropdown-item @click="gotoRank('fans3d')"
                >铁粉排名</el-dropdown-item
              >
              <el-dropdown-item @click="gotoRank('blog')"
                >博主主页</el-dropdown-item
              >
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>

    <!--main-->
    <div class="data_main">
      <!-- 三维地图组件 -->
      <force3d v-if="activeComponent == 'force3d'" />
      <fans3d v-else-if="activeComponent == 'fans3d'" />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { ArrowDown } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import force3d from "@/components/force-3d.vue";
import fans3d from "@/components/fans-3d.vue";
const $router = useRouter();
let activeComponent = ref("force3d");
let activeTitle = ref("全网博主原力排名分布");
onMounted(() => {});
const gotoRank = (key) => {
  activeComponent.value = key;
  switch (key) {
    case "force3d":
      activeTitle.value = "全网博主原力排名分布";
      break;
    case "fans3d":
      activeTitle.value = "全网博主铁粉排名分布";
      break;
    case "blog":
      window.open('https://blog.csdn.net/m0_61243965')
      break;
    default:
      break;
  }
};
</script>
<style lang="less">
.home {
  width: 100%;
  height: 100%;
  .header {
    .t_title {
      width: 100%;
      height: 100%;
      text-align: center;
      font-size: 28px;
      line-height: 60px;
      color: #8dd5ff;
    }
    .guide {
      position: absolute;
      cursor: pointer;
      top: 15px;
      right: 200px;
      line-height: 60px;
      font-size: 28px;
      color: #8dd5ff;
      .el-dropdown {
        font-size: 20px;
        color: #fff;
      }
      .el-dropdown-item {
        font-size: 18px;
      }
    }
  }
  .data_main {
    height: calc(100% - 80px);
  }
}
</style>