parent
0033d138f3
commit
673849e5ca
2 changed files with 209 additions and 0 deletions
@ -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> |
||||
Loading…
Reference in new issue