Compare commits
No commits in common. '673849e5ca6e1570bab61bb65ce1e03cda61e40e' and 'fb96ac2e2722b88698b7ce05404ec4665bd302b2' have entirely different histories.
673849e5ca
...
fb96ac2e27
3 changed files with 2 additions and 341 deletions
@ -1,205 +0,0 @@ |
|||||||
<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