You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
126 lines
3.1 KiB
126 lines
3.1 KiB
<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>
|
|
|