virtualSimulation/src/layout/index.vue

<template>
  <div class="container-bgc">
    <div class="top">
      <div class="loginBtn">
        <p @click="loginFn">{{ user.token ? "已登录" : "登录/注册" }}</p>
      </div>
      
      <div class="title">{{ setting.title }}</div>
    </div>
    <router-view v-slot="{ Component }">
      <keep-alive>
        <component :is="Component"></component>
      </keep-alive>
    </router-view>
    <keep-alive> </keep-alive>
    <div class="bottom"></div>
  </div>
</template>

<script lang="ts" setup>
import { useRouter } from "vue-router";
// import { onMounted, reactive, ref, toRefs, watch } from "vue";
import settingStore from "@/store/modules/setting";
import userStore from "@/store/modules/user";
const user = userStore();
const setting = settingStore();
const router = useRouter();

console.log(setting.title);
const loginFn = () => {
  // user.token ? router.push("/spacePage") : "";

if(user.token){

  router.push("/spacePage")
  return
}
  router.push("/login");
};
</script>

<style lang="scss" scoped>
.container-bgc {
  position: relative;
  width: 100%;
  // height: 1080px;
  min-height: 100vh;
  background-color: #091d22;
  background: url("../assets//images/bg2.png") no-repeat;
  background-size: cover;

  .top {
    width: 100%;
    height: 75px;
    text-align: center;
    font-size: 42px;
    line-height: 75px;
    font-style: italic;
    background: url("../assets/images/topbgc.png") no-repeat;
    // background-position: center bottom -10px;
    background-size: cover;

    .title {
      color: #fff;
    }

    .loginBtn {
      position: absolute;
      /* 清除浮动影响 */
      float: left;
      /* 向左浮动 */
      top: 10px;
      left: 230px;
      border: 1px solid #33fefe;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
      width: 142px;
      height: 40px;
      line-height: 37px;
      background: linear-gradient(to bottom, #08b9c1, #0758b8);
      transform: skew(-30deg);
      cursor: pointer;
      /* 在X轴方向倾斜 -35 度 */
      border-radius: 5%;
      p {
        transform: skew(30deg);
        /* 反向倾斜，抵消父元素的变形 */
        font-size: 18px;
        color: #fff;
      }
    }
  }
}
</style>