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);
user.token ? router.push('/spacePage') : ''
const loginFn=()=>{
  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>