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" v-if=" setting.activeStepIndex!=12">
      当前实验步骤为第{{ setting.activeStepIndex }}步，实验名称为:{{
        stepData[setting.activeStepIndex]
      }}，共11步
    </div>
    <div class="bottom" v-else>全部实验完成</div>

  </div>
</template>

<script lang="ts" setup>
import { useRouter } from "vue-router";
import { 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");
};
const stepData:any = {
  "1": "LabVIEW软件的安装及配置",
  "2": "构建温湿度传感器模型",
  "3": "编写程序框图程序",
  "4": "调试控制测试",
  "5": "配置LabVIEW网络通信控件及端口",
  "6": "虚拟机安装",
  "7": "虚拟Windows 主机",
  "8": "编写服务器端程序",
  "9": "服务器与LabVIEW模拟终端通信调试",
  "10": "服务器端读取LabVIEW模拟传感器的数据",
  "11": "实验总结，攥写实验报告",
  '12':'全部完成'
};
watch(
  () => setting.activeStepIndex,
  (newValue: number) => {
    localStorage.setItem("activeStepIndex", newValue.toString());
  }
);
</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;
      }
    }
  }
}
.bottom {
  position: absolute;
  top: 120px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 22px;
  color: #fff;
}
</style>