Merge branch 'main' of http://182.92.169.222:3000/dlsx/virtualSimulation
JayChou
2 months ago
commit
adacb8a7f3
15 changed files with 1429 additions and 220 deletions
|
After Width: | Height: | Size: 8.7 KiB |
|
After Width: | Height: | Size: 33 KiB |
|
After Width: | Height: | Size: 35 KiB |
|
After Width: | Height: | Size: 129 KiB |
|
After Width: | Height: | Size: 168 KiB |
|
After Width: | Height: | Size: 170 KiB |
@ -0,0 +1,205 @@ |
||||
<template> |
||||
<div class="container-bgc"> |
||||
<div class="top"> |
||||
<div class="title">{{ setting.title }}</div> |
||||
</div> |
||||
<!-- 右边箭头 --> |
||||
<button class="submit-right" @click="SubRight"></button> |
||||
<!-- 左边按钮 --> |
||||
<button class="submit-left" @click="SubLeft"></button> |
||||
<div class="question-body"> |
||||
<div class="question">知识点学习</div> |
||||
<el-scrollbar height="200px"> |
||||
<div class="txt" v-html="Text"></div> |
||||
</el-scrollbar> |
||||
</div> |
||||
<div class="submit-buttons"> |
||||
<!-- <button class="submit-btn" @click="reset">退出</button> --> |
||||
<!-- <button class="submit-btn" @click="enter">进入仿真实验</button> --> |
||||
<router-link class="submit-btn" to="">退出</router-link> |
||||
<router-link class="submit-btn" to="/program">进入仿真实验</router-link> |
||||
</div> |
||||
|
||||
</div> |
||||
</template> |
||||
|
||||
<script lang="ts" setup> |
||||
import settingStore from "@/store/modules/setting"; |
||||
import { getExperiment } from '@/api/index' |
||||
import { ref, computed, onMounted, onUnmounted } from "vue" |
||||
import { useRouter } from 'vue-router'; |
||||
const setting = settingStore(); |
||||
//左箭头 |
||||
const SubLeft = () => { |
||||
|
||||
} |
||||
//右箭头 |
||||
const SubRight = () => { |
||||
|
||||
} |
||||
|
||||
const Text = ref() |
||||
const getContent = async () => { |
||||
const res: any = await getExperiment(); |
||||
// console.log(res.result.purposeRequirements,'res') |
||||
Text.value = res.result.purposeRequirements |
||||
console.log(Text.value); |
||||
|
||||
} |
||||
|
||||
onMounted(() => { getContent() }); |
||||
|
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.container-bgc { |
||||
position: relative; |
||||
width: 100%; |
||||
// height: 1000px; |
||||
min-height: 100vh; |
||||
// background-color: #091d22; |
||||
background: url("@/assets/images/bg3.png") no-repeat; |
||||
background-size: cover; |
||||
|
||||
.submit-right { |
||||
background: url("@/assets/images/right.png") no-repeat; |
||||
background-size: contain; |
||||
width: 60px; |
||||
/* 按钮宽度 */ |
||||
height: 60px; |
||||
/* 按钮高度 */ |
||||
border: none; |
||||
cursor: pointer; |
||||
position: absolute; |
||||
right: 0; |
||||
/* 紧靠右部 */ |
||||
top: 40%; |
||||
/* 垂直居中*/ |
||||
} |
||||
|
||||
.submit-left { |
||||
background: url("@/assets/images/left.png") no-repeat; |
||||
background-size: contain; |
||||
width: 60px; |
||||
/* 按钮宽度 */ |
||||
height: 60px; |
||||
/* 按钮高度 */ |
||||
border: none; |
||||
cursor: pointer; |
||||
position: absolute; |
||||
left: 0; |
||||
/* 紧靠左部 */ |
||||
top: 40%; |
||||
/* 垂直居中*/ |
||||
} |
||||
|
||||
.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-size: cover; |
||||
|
||||
.title { |
||||
color: #fff; |
||||
} |
||||
} |
||||
|
||||
.question-body { |
||||
background: url("@/assets/images/FakeAnimateForPrototype.png") no-repeat center center; |
||||
/* 添加 background-position */ |
||||
background-size: 99%; |
||||
/* 确保背景图片覆盖整个元素 */ |
||||
width: 1100px; |
||||
/* 100% 宽度以确保背景图片完全显示 */ |
||||
height: 600px; |
||||
/* 固定高度 */ |
||||
margin-top: 100px; |
||||
margin-left: auto; |
||||
margin-right: auto; |
||||
padding-left: 50px; |
||||
padding-right: 50px; |
||||
padding-top: 30px; |
||||
|
||||
.question { |
||||
font-size: 42px; |
||||
/* 字体大小 */ |
||||
text-align: center; |
||||
/* 水平居中 */ |
||||
letter-spacing: 3px; |
||||
/* 字符间距，单位可以是 px、em 等 */ |
||||
margin-top: 45px; |
||||
margin-bottom: 20px; |
||||
color: #fff; |
||||
} |
||||
|
||||
.scrollbar-demo-item { |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
height: 50px; |
||||
margin: 20px; |
||||
margin-top: 30px; |
||||
text-align: center; |
||||
border-radius: 4px; |
||||
background: var(--el-color-primary-light-9); |
||||
color: var(--el-color-primary); |
||||
} |
||||
|
||||
.txt { |
||||
margin-top: 28px; |
||||
margin-left: 20px; |
||||
margin-right: 20px; |
||||
font-size: 18px; |
||||
/* 字体大小 */ |
||||
font-family: Consolas, sans-serif; |
||||
/* 字体样式 */ |
||||
letter-spacing: 1.5px; |
||||
/* 字符间距，单位可以是 px、em 等 */ |
||||
line-height: 1.5; |
||||
/* 行间距，1.5 表示字体大小的 1.5 倍 */ |
||||
color: #9b9a9a; |
||||
} |
||||
} |
||||
|
||||
.submit-buttons { |
||||
display: flex; |
||||
/* 使用 Flexbox 布局 */ |
||||
flex-direction: row; |
||||
/* 水平排列按钮 */ |
||||
justify-content: center; |
||||
/* 水平居中 */ |
||||
gap: 450px; |
||||
/* 按钮之间的间距 */ |
||||
margin-top: 10px; |
||||
} |
||||
|
||||
.submit-btn { |
||||
background: url("@/assets/images/Button.png") center; |
||||
background-size: contain; |
||||
/* 确保背景图片覆盖整个元素 */ |
||||
background-color: transparent; |
||||
/* 背景颜色设置为透明 */ |
||||
border: none; |
||||
/* 移除边框 */ |
||||
cursor: pointer; |
||||
/* 鼠标悬停时显示手型 */ |
||||
width: 300px; |
||||
height: 41px; |
||||
font-size: 17px; |
||||
font-weight: bold; |
||||
/* 文字加粗 */ |
||||
color: #fff; |
||||
display: flex; |
||||
align-items: center; |
||||
/* 垂直居中 */ |
||||
justify-content: center; |
||||
/* 水平居中 */ |
||||
text-decoration: none |
||||
} |
||||
|
||||
} |
||||
</style> |
||||
@ -0,0 +1,370 @@ |
||||
<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="personal-center"> |
||||
<div class="leftBox"> |
||||
<h2>个人中心</h2> |
||||
<p>学生8527</p> |
||||
<button class="btn1" @click="handleHomeClick">首页</button> |
||||
<button class="btn2" @click="handleRecordClick">学习/成绩记录</button> |
||||
<button class="btn3" @click="handlePasswordClick">密码管理</button> |
||||
</div> |
||||
<div class="rightBoxes"> |
||||
<div class="topBox"> |
||||
<el-form style="margin:30px 0 0 200px;" :rules="rules" :model="formModel" ref="formRef" |
||||
size="large" autocomplete="off"> |
||||
<el-form-item prop="username" class="custom-form-item"> |
||||
<div class="left" style="width: 60px;color: #fbfdfd;"> |
||||
用户账号 |
||||
</div> |
||||
<div class="right"> |
||||
<el-input v-model="formModel.username" style="border-color: #20bec8;"></el-input> |
||||
</div> |
||||
</el-form-item> |
||||
<el-form-item prop="name" class="custom-form-item"> |
||||
<div style="display: flex; align-items: center; color: pink"> |
||||
<div class="left" style="width: 60px;color: #fbfdfd;"> |
||||
姓名 |
||||
</div> |
||||
<div class="right"> |
||||
<el-input v-model="formModel.name" style="border-color: #20bec8;"></el-input> |
||||
</div> |
||||
</div> |
||||
</el-form-item> |
||||
<el-form-item prop="clssid" class="custom-form-item"> |
||||
<div class="left" style="width: 60px;color: #fbfdfd;"> |
||||
班级 |
||||
</div> |
||||
<div class="right"> |
||||
<el-input v-model="formModel.clssid" style="border-color: #20bec8;"></el-input> |
||||
</div> |
||||
</el-form-item> |
||||
|
||||
</el-form> |
||||
</div> |
||||
<div class="bottomBox"> |
||||
<el-form size="large" style="margin:30px 0 0 265px;" :rules="rules" :model="formModel"> |
||||
<el-form-item prop="studentNumb"> |
||||
<div style="display: flex; align-items: center;"> |
||||
<div class="left" style="width: 60px;color: #fbfdfd;"> |
||||
学号 |
||||
</div> |
||||
<div class="right"> |
||||
<el-input v-model="formModel.studentNumb" |
||||
style="border-color: #20bec8"></el-input> |
||||
</div> |
||||
</div> |
||||
</el-form-item> |
||||
<el-form-item prop="mobile"> |
||||
<div style="display: flex; align-items: center;"> |
||||
<div class="left" style="width: 60px;color: #fbfdfd;"> |
||||
手机号 |
||||
</div> |
||||
<div class="right"> |
||||
<el-input v-model="formModel.mobile" style="border-color: #20bec8"></el-input> |
||||
</div> |
||||
</div> |
||||
</el-form-item> |
||||
<el-form-item prop="score"> |
||||
<div style="display: flex; align-items: center;"> |
||||
<div class="left" style="width: 60px;color: #fbfdfd;"> |
||||
成绩 |
||||
</div> |
||||
<div class="right"> |
||||
<el-input v-model="formModel.score" style="border-color: #20bec8"></el-input> |
||||
</div> |
||||
</div> |
||||
</el-form-item> |
||||
</el-form> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
|
||||
</template> |
||||
|
||||
<script setup lang="ts" name="spacePage"> |
||||
|
||||
import { ref } from "vue" |
||||
import { useRouter } from 'vue-router' |
||||
import settingStore from "@/store/modules/setting"; |
||||
const setting = settingStore(); |
||||
import userStore from '@/store/modules/user'; |
||||
|
||||
const router = useRouter() |
||||
const user = userStore(); |
||||
const loginFn = () => { |
||||
router.push('/login') |
||||
} |
||||
const handleHomeClick = () => { |
||||
// 处理首页按钮点击逻辑，如路由跳转 |
||||
console.log('首页按钮被点击'); |
||||
router.push('/studyPage') |
||||
}; |
||||
const handleRecordClick = () => { |
||||
console.log('学习/成绩记录按钮被点击'); |
||||
}; |
||||
const handlePasswordClick = () => { |
||||
console.log('密码管理按钮被点击'); |
||||
}; |
||||
|
||||
const formRef = ref(); |
||||
const formModel = ref({ |
||||
username: "", |
||||
name: "", |
||||
clssid: '', |
||||
studentNumb: "", |
||||
mobile: '', |
||||
score: '' |
||||
}); |
||||
const rules = { |
||||
username: [ |
||||
{ required: true, message: "请输入用户名", trigger: "blur" }, |
||||
{ |
||||
min: 5, |
||||
max: 30, |
||||
message: "用户名长度最小五位最大三十位", |
||||
trigger: ["change", "blur"], |
||||
}, |
||||
], |
||||
studentNumb: [ |
||||
{ required: true, message: "请输入学号", trigger: "blur" }, |
||||
{ |
||||
min: 5, |
||||
max: 11, |
||||
message: "学号长度最小五位最大十一位", |
||||
trigger: ["change", "blur"], |
||||
}, |
||||
], |
||||
name: [{ required: true, message: "请输入姓名", trigger: "blur" }], |
||||
clssid: [ |
||||
{ required: true, message: "请选择所属班级", trigger: "blur" }, |
||||
], |
||||
mobile: [ |
||||
{ required: true, message: "请输入手机号", trigger: "blur" }, |
||||
{ |
||||
pattern: /^1[3-9]\d{9}$/, |
||||
message: "手机号格式不正确", |
||||
trigger: ["change", "blur"], |
||||
}, |
||||
], |
||||
score:[ |
||||
{ required: true, message: "成绩", trigger: "blur" }, |
||||
] |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="less" scoped> |
||||
.login_container { |
||||
position: relative; |
||||
width: 100%; |
||||
// height: 1080px; |
||||
min-height: 100vh; |
||||
background-color: #091d22; |
||||
background: url("../assets//images/bg3.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轴方向倾斜 -30 度 */ |
||||
border-radius: 5%; |
||||
|
||||
p { |
||||
transform: skew(30deg); |
||||
/* 反向倾斜，抵消父元素的变形 */ |
||||
font-size: 18px; |
||||
color: #fff; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.main-content { |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
|
||||
.personal-center { |
||||
display: flex; |
||||
width: 1800px; |
||||
height: 600px; |
||||
margin-top: 150px; |
||||
justify-content: space-evenly; |
||||
|
||||
.leftBox { |
||||
position: relative; |
||||
width: 550px; |
||||
height: 600px; |
||||
background: url("../assets/images/space1.png") no-repeat; |
||||
transform: skewX(-5deg); |
||||
margin-right: -150px; |
||||
// flex-direction: column; |
||||
background-size: 98%; |
||||
|
||||
h2 { |
||||
position: absolute; |
||||
top: 6px; |
||||
left: 60%; |
||||
transform: translateX(-50%); |
||||
color: #ededd8; |
||||
font-size: 16px; |
||||
font-weight: 700; |
||||
height: 40px; |
||||
line-height: 40px; |
||||
font-size: 20px; |
||||
} |
||||
|
||||
p { |
||||
position: absolute; |
||||
top: 28%; |
||||
left: 55%; |
||||
transform: translateX(-50%); |
||||
color: #fdeda0; |
||||
font-size: 20px; |
||||
font-weight: 700; |
||||
height: 40px; |
||||
line-height: 40px; |
||||
} |
||||
|
||||
.btn1, |
||||
.btn2, |
||||
.btn3 { |
||||
display: block; |
||||
width: 200px; |
||||
height: 55px; |
||||
background-color: #e9ddab; |
||||
margin: 25px auto; |
||||
border: none; |
||||
border-radius: 5px; |
||||
color: #333; |
||||
font-size: 20px; |
||||
font-weight: 700; |
||||
transform: skewX(-17deg); |
||||
} |
||||
|
||||
.btn1 { |
||||
position: absolute; |
||||
top: 268px; |
||||
left: 31%; |
||||
} |
||||
|
||||
.btn2 { |
||||
position: absolute; |
||||
left: 26%; |
||||
top: 360px; |
||||
} |
||||
|
||||
.btn3 { |
||||
position: absolute; |
||||
left: 22%; |
||||
top: 453px; |
||||
} |
||||
} |
||||
|
||||
.rightBoxes { |
||||
width: 1200px; |
||||
height: 600px; |
||||
// background-color: skyblue; |
||||
// flex: 1; |
||||
display: flex; |
||||
justify-content: space-around; |
||||
flex-direction: column; |
||||
transform: skewX(-17deg); |
||||
|
||||
.topBox { |
||||
// width: 800px; |
||||
// height: 300px; |
||||
flex: 1; |
||||
background-color: lightgreen; |
||||
background: url("../assets/images/space2.png") no-repeat; |
||||
background-size: 98%; |
||||
// display: flex; |
||||
// justify-content: center; |
||||
// align-items: center; |
||||
transform: skewX(15deg); |
||||
|
||||
.el-input { |
||||
width: 450px; |
||||
height: 50px; |
||||
} |
||||
|
||||
:deep(.el-form-item__error) { |
||||
left: 90px; |
||||
} |
||||
} |
||||
|
||||
.bottomBox { |
||||
margin-top: 36px; |
||||
flex: 1; |
||||
// width: 800px; |
||||
// height: 200px; |
||||
background-color: lightcoral; |
||||
background: url("../assets/images/space3.png") no-repeat; |
||||
background-size: 98%; |
||||
// display: flex; |
||||
// justify-content: center; |
||||
// align-items: center; |
||||
transform: skewX(15deg); |
||||
|
||||
.el-input { |
||||
width: 450px; |
||||
height: 50px; |
||||
} |
||||
|
||||
:deep(.el-form-item__error) { |
||||
left: 90px; |
||||
} |
||||
} |
||||
|
||||
|
||||
} |
||||
} |
||||
} |
||||
|
||||
// .personal-center { |
||||
// background-color: #003366; |
||||
// padding: 20px; |
||||
// color: white; |
||||
// border-radius: 10px; |
||||
// transform: skewX(-15deg); |
||||
// display: flex; |
||||
|
||||
|
||||
// }</style> |
||||
@ -0,0 +1,156 @@ |
||||
<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> |
||||
</template> |
||||
|
||||
<script setup lang="ts" name="studyPage"> |
||||
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() |
||||
const user = userStore(); |
||||
const loginFn = () => { |
||||
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 为例 |
||||
break; |
||||
case 2: |
||||
isBox2Clicked.value = true; |
||||
// router.push('/page2'); |
||||
break; |
||||
case 3: |
||||
isBox3Clicked.value = true; |
||||
// router.push('/page3'); |
||||
break; |
||||
default: |
||||
break; |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="less" scoped> |
||||
.login_container { |
||||
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: 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; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.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; |
||||
/* 垂直居中 */ |
||||
color: white; |
||||
/* 设置文字颜色 */ |
||||
text-align: center; |
||||
/* 文本居中对齐 */ |
||||
font-size: 49px; |
||||
font-weight: 700; |
||||
line-height: 190px; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,167 @@ |
||||
<template> |
||||
<div class="container-bgc"> |
||||
<div class="top"> |
||||
<div class="title">{{ setting.title }}</div> |
||||
</div> |
||||
<!-- 右边箭头 --> |
||||
<button class="submit-right" @click="SubRight"></button> |
||||
<!-- 左边按钮 --> |
||||
<button class="submit-left" @click="SubLeft"></button> |
||||
<div class="question-body"> |
||||
<div class="question" >实验目标</div> |
||||
<el-scrollbar height="330px"> <div class="txt" v-html="Text"></div> </el-scrollbar> |
||||
</div> |
||||
<div class="submit-buttons"> |
||||
<!-- <button class="submit-btn" @click="reset">退出</button> --> |
||||
<!-- <button class="submit-btn" @click="enter">进入仿真实验</button> --> |
||||
<router-link class="submit-btn" to="">退出</router-link> |
||||
<router-link class="submit-btn" to="/program">进入仿真实验</router-link> |
||||
</div> |
||||
|
||||
</div> |
||||
</template> |
||||
|
||||
<script lang="ts" setup> |
||||
import settingStore from "@/store/modules/setting"; |
||||
import {getExperiment} from '@/api/index' |
||||
import { ref,computed,onMounted, onUnmounted} from "vue" |
||||
import { useRouter } from 'vue-router'; |
||||
const setting = settingStore(); |
||||
//左箭头 |
||||
const SubLeft =()=>{ |
||||
|
||||
} |
||||
//右箭头 |
||||
const SubRight =()=>{ |
||||
|
||||
} |
||||
|
||||
const Text = ref() |
||||
const getContent = async()=>{ |
||||
const res:any = await getExperiment(); |
||||
// console.log(res.result.purposeRequirements,'res') |
||||
Text.value = res.result.purposeRequirements |
||||
console.log(Text.value); |
||||
|
||||
} |
||||
|
||||
onMounted(() => {getContent()}); |
||||
|
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.container-bgc { |
||||
position: relative; |
||||
width: 100%; |
||||
// height: 1000px; |
||||
min-height: 100vh; |
||||
// background-color: #091d22; |
||||
background: url("@/assets/images/bg3.png") no-repeat; |
||||
background-size: cover; |
||||
|
||||
.submit-right{ |
||||
background: url("@/assets/images/right.png") no-repeat; |
||||
background-size: contain; |
||||
width: 60px; /* 按钮宽度 */ |
||||
height: 60px; /* 按钮高度 */ |
||||
border: none; |
||||
cursor: pointer; |
||||
position: absolute; |
||||
right: 0; /* 紧靠右部 */ |
||||
top: 40%; /* 垂直居中*/ |
||||
} |
||||
.submit-left{ |
||||
background: url("@/assets/images/left.png") no-repeat; |
||||
background-size: contain; |
||||
width: 60px; /* 按钮宽度 */ |
||||
height: 60px; /* 按钮高度 */ |
||||
border: none; |
||||
cursor: pointer; |
||||
position: absolute; |
||||
left: 0; /* 紧靠左部 */ |
||||
top: 40%; /* 垂直居中*/ |
||||
} |
||||
|
||||
.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-size: cover; |
||||
|
||||
.title { |
||||
color: #fff; |
||||
} |
||||
} |
||||
|
||||
.question-body { |
||||
background: url("@/assets/images/FakeAnimateForPrototype.png") no-repeat center center; /* 添加 background-position */ |
||||
background-size: contain; /* 确保背景图片覆盖整个元素 */ |
||||
width: 1100px; /* 100% 宽度以确保背景图片完全显示 */ |
||||
height: 500px; /* 固定高度 */ |
||||
margin-top: 100px; |
||||
margin-left: auto; |
||||
margin-right: auto; |
||||
padding-left: 50px; |
||||
padding-right: 50px; |
||||
padding-top: 30px; |
||||
|
||||
.question{ |
||||
font-size: 42px; /* 字体大小 */ |
||||
text-align: center; /* 水平居中 */ |
||||
letter-spacing: 3px; /* 字符间距，单位可以是 px、em 等 */ |
||||
margin-bottom: 30px; |
||||
color: #fff; |
||||
} |
||||
.scrollbar-demo-item { |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
height: 50px; |
||||
margin: 10px; |
||||
text-align: center; |
||||
border-radius: 4px; |
||||
background: var(--el-color-primary-light-9); |
||||
color: var(--el-color-primary); |
||||
} |
||||
.txt { |
||||
margin-top: 18px; |
||||
margin-left: 20px; |
||||
margin-right: 20px; |
||||
font-size: 18px; /* 字体大小 */ |
||||
font-family: Consolas, sans-serif; /* 字体样式 */ |
||||
letter-spacing: 1.5px; /* 字符间距，单位可以是 px、em 等 */ |
||||
line-height: 1.5; /* 行间距，1.5 表示字体大小的 1.5 倍 */ |
||||
color: #9b9a9a; |
||||
} |
||||
} |
||||
.submit-buttons { |
||||
display: flex; /* 使用 Flexbox 布局 */ |
||||
flex-direction: row; /* 水平排列按钮 */ |
||||
justify-content: center; /* 水平居中 */ |
||||
gap: 450px; /* 按钮之间的间距 */ |
||||
margin-top: 50px; |
||||
} |
||||
|
||||
.submit-btn { |
||||
background: url("@/assets/images/Button.png") center; |
||||
background-size: contain; /* 确保背景图片覆盖整个元素 */ |
||||
background-color: transparent; /* 背景颜色设置为透明 */ |
||||
border: none; /* 移除边框 */ |
||||
cursor: pointer; /* 鼠标悬停时显示手型 */ |
||||
width: 300px; |
||||
height: 41px; |
||||
font-size: 17px; |
||||
font-weight: bold; /* 文字加粗 */ |
||||
color: #fff; |
||||
display: flex; |
||||
align-items: center; /* 垂直居中 */ |
||||
justify-content: center; /* 水平居中 */ |
||||
text-decoration: none |
||||
} |
||||
|
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue