Merge branch 'main' of http://182.92.169.222:3000/dlsx/virtualSimulation
commit
006a9997f1
8 changed files with 250 additions and 161 deletions
@ -1,157 +1,223 @@ |
||||
<template> |
||||
<div class="login_container"> |
||||
<div class="top"> |
||||
<div class="loginBtn"> |
||||
<p @click="loginFn">{{ user.token ? '已登录' : '登录/注册' }}</p> |
||||
</div> |
||||
<div class="title">{{ setting.title }}</div> |
||||
</div> |
||||
<div class="main-content"> |
||||
<div class="box" :style="{ backgroundImage: isBox1Clicked ? `url(${btn1})` : `url(${btn2})` }" |
||||
@click="handleBoxClick(1)"> |
||||
知识点学习 |
||||
</div> |
||||
<div class="box" :style="{ backgroundImage: isBox2Clicked ? `url(${btn1})` : `url(${btn2})` }" |
||||
@click="handleBoxClick(2)">学习</div> |
||||
<div class="box" :style="{ backgroundImage: isBox3Clicked ? `url(${btn1})` : `url(${btn2})` }" |
||||
style="margin-bottom: 80px;" @click="handleBoxClick(3)">仿真实验</div> |
||||
</div> |
||||
<div class="login_container"> |
||||
<div class="top"> |
||||
<div class="loginBtn"> |
||||
<p @click="loginFn">{{ user.token ? "已登录" : "登录/注册" }}</p> |
||||
</div> |
||||
<div class="submit"> |
||||
<p @click="submit">提交</p> |
||||
</div> |
||||
<div class="title">{{ setting.title }}</div> |
||||
</div> |
||||
<div class="main-content"> |
||||
<div |
||||
class="box" |
||||
:style="{ |
||||
backgroundImage: isBox1Clicked ? `url(${btn1})` : `url(${btn2})`, |
||||
}" |
||||
@click="handleBoxClick(1)" |
||||
> |
||||
知识点学习 |
||||
</div> |
||||
<div |
||||
class="box" |
||||
:style="{ |
||||
backgroundImage: isBox2Clicked ? `url(${btn1})` : `url(${btn2})`, |
||||
}" |
||||
@click="handleBoxClick(2)" |
||||
> |
||||
学习 |
||||
</div> |
||||
<div |
||||
class="box" |
||||
:style="{ |
||||
backgroundImage: isBox3Clicked ? `url(${btn1})` : `url(${btn2})`, |
||||
}" |
||||
style="margin-bottom: 80px" |
||||
@click="handleBoxClick(3)" |
||||
> |
||||
仿真实验 |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup lang="ts" name="studyPage"> |
||||
import { ref } from "vue" |
||||
import { useRouter } from 'vue-router' |
||||
import { ref } from "vue"; |
||||
import { useRouter } from "vue-router"; |
||||
import settingStore from "@/store/modules/setting"; |
||||
const setting = settingStore(); |
||||
import userStore from '@/store/modules/user'; |
||||
import btn1 from '@/assets/images/btn1.png' |
||||
import btn2 from '@/assets/images/btn2.png' |
||||
console.log(btn1, 'btn1'); |
||||
|
||||
const router = useRouter() |
||||
import userStore from "@/store/modules/user"; |
||||
import btn1 from "@/assets/images/btn1.png"; |
||||
import btn2 from "@/assets/images/btn2.png"; |
||||
import { submitExperiment } from "@/api"; |
||||
import { ElMessage } from "element-plus"; |
||||
const router = useRouter(); |
||||
const user = userStore(); |
||||
const loginFn = () => { |
||||
router.push('/login') |
||||
} |
||||
// user.token ? router.push("/spacePage") : ""; |
||||
|
||||
if (user.token) { |
||||
router.push("/spacePage"); |
||||
return; |
||||
} |
||||
router.push("/login"); |
||||
}; |
||||
const isBox1Clicked = ref(false); |
||||
const isBox2Clicked = ref(false); |
||||
const isBox3Clicked = ref(false); |
||||
const handleBoxClick = (boxNumber) => { |
||||
isBox1Clicked.value = false; |
||||
isBox2Clicked.value = false; |
||||
isBox3Clicked.value = false; |
||||
switch (boxNumber) { |
||||
case 1: |
||||
isBox1Clicked.value = true; |
||||
// router.push('/page1'); // 跳转到对应的页面，这里以 /page1 为例 |
||||
router.push('/knowledgePage') |
||||
break; |
||||
case 2: |
||||
isBox2Clicked.value = true; |
||||
// router.push('/page2'); |
||||
break; |
||||
case 3: |
||||
isBox3Clicked.value = true; |
||||
// router.push('/page3'); |
||||
break; |
||||
default: |
||||
break; |
||||
isBox1Clicked.value = false; |
||||
isBox2Clicked.value = false; |
||||
isBox3Clicked.value = false; |
||||
switch (boxNumber) { |
||||
case 1: |
||||
isBox1Clicked.value = true; |
||||
// router.push('/page1'); // 跳转到对应的页面，这里以 /page1 为例 |
||||
router.push("/knowledgePage"); |
||||
break; |
||||
case 2: |
||||
isBox2Clicked.value = true; |
||||
router.push("/subjectTest"); |
||||
break; |
||||
case 3: |
||||
isBox3Clicked.value = true; |
||||
router.push("/"); |
||||
break; |
||||
default: |
||||
break; |
||||
} |
||||
}; |
||||
|
||||
const submit = async () => { |
||||
await submitExperiment({ getStudyRecords_id: user.userInfo.id }).then( |
||||
(res: any) => { |
||||
console.log(res); |
||||
if (res.code == 500) { |
||||
ElMessage.error(res.message); |
||||
} else { |
||||
ElMessage.success(res.message); |
||||
} |
||||
} |
||||
); |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="less" scoped> |
||||
.login_container { |
||||
position: relative; |
||||
position: relative; |
||||
width: 100%; |
||||
// height: 1080px; |
||||
min-height: 100vh; |
||||
background-color: #091d22; |
||||
background: url("../assets//images/bg1.png") no-repeat; |
||||
background-size: cover; |
||||
|
||||
.top { |
||||
width: 100%; |
||||
// height: 1080px; |
||||
min-height: 100vh; |
||||
background-color: #091d22; |
||||
background: url("../assets//images/bg1.png") no-repeat; |
||||
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; |
||||
|
||||
.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; |
||||
} |
||||
|
||||
.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%; |
||||
|
||||
.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; |
||||
} |
||||
} |
||||
.submit { |
||||
position: absolute; |
||||
/* 清除浮动影响 */ |
||||
// float: right; |
||||
/* 向左浮动 */ |
||||
top: 10px; |
||||
right: 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; |
||||
} |
||||
} |
||||
p { |
||||
transform: skew(30deg); |
||||
/* 反向倾斜，抵消父元素的变形 */ |
||||
font-size: 18px; |
||||
color: #fff; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.main-content { |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
min-height: 100vh; |
||||
margin: 0; |
||||
// background: url("../assets/images/login.png") no-repeat; |
||||
background-position: center; |
||||
background-size: 50% auto; |
||||
flex-direction: column; |
||||
|
||||
.box { |
||||
width: 520px; |
||||
height: 162px; |
||||
// background-color: #007BFF; |
||||
// background: url("../assets/images/btn2.png") no-repeat; |
||||
background-repeat: no-repeat; |
||||
margin: 30px 0 0 25px; |
||||
cursor: pointer; |
||||
background-repeat: no-repeat; |
||||
background-size: contain; |
||||
/* 让图片完整显示在盒子内 */ |
||||
background-position: center; |
||||
/* 图片在盒子中水平和垂直居中 */ |
||||
display: flex; |
||||
/* 使用 flex 布局 */ |
||||
justify-content: center; |
||||
align-items: center; |
||||
min-height: 100vh; |
||||
margin: 0; |
||||
// background: url("../assets/images/login.png") no-repeat; |
||||
background-position: center; |
||||
background-size: 50% auto; |
||||
flex-direction: column; |
||||
|
||||
.box { |
||||
|
||||
width: 520px; |
||||
height: 162px; |
||||
// background-color: #007BFF; |
||||
// background: url("../assets/images/btn2.png") no-repeat; |
||||
background-repeat: no-repeat; |
||||
margin: 30px 0 0 25px; |
||||
cursor: pointer; |
||||
background-repeat: no-repeat; |
||||
background-size: contain; |
||||
/* 让图片完整显示在盒子内 */ |
||||
background-position: center; |
||||
/* 图片在盒子中水平和垂直居中 */ |
||||
display: flex; |
||||
/* 使用 flex 布局 */ |
||||
justify-content: center; |
||||
/* 水平居中 */ |
||||
// align-items: center; |
||||
/* 垂直居中 */ |
||||
color: white; |
||||
/* 设置文字颜色 */ |
||||
text-align: center; |
||||
/* 文本居中对齐 */ |
||||
font-size: 49px; |
||||
font-weight: 700; |
||||
line-height: 190px; |
||||
} |
||||
/* 水平居中 */ |
||||
// align-items: center; |
||||
/* 垂直居中 */ |
||||
color: white; |
||||
/* 设置文字颜色 */ |
||||
text-align: center; |
||||
/* 文本居中对齐 */ |
||||
font-size: 49px; |
||||
font-weight: 700; |
||||
line-height: 190px; |
||||
} |
||||
} |
||||
</style> |
||||
</style> |
||||
|
||||
Loading…
Reference in new issue