student-h5/src/App.vue

<template>
  <div id="container">
    <!-- <div id="nav">
      <router-link
        v-for="item in routes"
        :key="item.path"
        :to="item.path"
        :class="{
          link: true,
          active: name === item.name,
        }"
      >
        {{ item.name }}
      </router-link>
    </div> -->
    <main>
      <router-view />
    </main>
  </div>
</template>
<script setup>
import { computed, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useStore } from "vuex";
import { boeRequest, request } from "@/api/request";
import { GET_USER_INFO } from "@/api/ThirdApi";
import { getCookie } from "@/api/utils";

import { USER_INFO } from "@/api/api";
console.log("版本1.3.4------------");
const store = useStore();
const router = useRouter();

onMounted(() => {
  window.location.href.includes("/login") || getUserInfo();
});

function getUserInfo() {
  if (
    import.meta.env.MODE === "development" ||
    import.meta.env.MODE === "test"
  ) {
    request(USER_INFO, {}).then((res) => {
      store.commit("SET_USER", res.data);
    });
  } else {
    boeRequest(GET_USER_INFO).then((res) => {
      res.result.avatar =
        res.result.avatar || "/800e23f7-b58c-4192-820d-0c6a2b7544cc.png";
      store.commit("SET_USER", res.result);
    });
  }
}
</script>
<style lang="scss">
#app {
  // font-family: MicrosoftYaHei, Microsoft YaHei, Avenir, Helvetica, Arial,
  // sans-serif;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
    Microsoft YaHei, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  height: 100%;
}

#container {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100%;
  background-color: rgba(242, 245, 247, 1);
  // background-color: #ccc;
  #nav {
    width: 220px;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 30px 0;
    box-sizing: border-box;
    background: #f1f1f1;
    box-shadow: 0 5px 15px 8px rgba(1, 22, 54, 0.795);

    .link {
      text-decoration: none;
      color: rgb(0, 0, 0);
      padding: 10px;
      transition: all 0.4s;
      text-align: center;

      &:hover {
        background: rgba(4, 37, 223, 0.274);
        color: #f1f1f1;
      }

      &.active {
        color: #f1f1f1;
        background: rgba(17, 120, 255, 0.74);
      }
    }
  }

  main {
    flex: 1;
    width: 100%;
    // padding: 30px;
    box-sizing: border-box;
  }
}
</style>