From 1c6e09b74ebf9cc787f9ba702ecbcecae9a8b4ba Mon Sep 17 00:00:00 2001
From: Ly <503441659@qq.com>
Date: Fri, 21 Mar 2025 09:09:11 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=9E=E9=AA=8C=E6=8A=A5=E5=91=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/api/index.ts | 7 ++
src/router/index.ts | 5 ++
src/views/target/index.vue | 167 +++++++++++++++++++++++++++++++++++++
3 files changed, 179 insertions(+)
create mode 100644 src/views/target/index.vue
diff --git a/src/api/index.ts b/src/api/index.ts
index 766ccd0..2fc361f 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -50,4 +50,11 @@ export const checkapi = (params:any)=> {
method: 'get',
params
})
+}
+//获取实验目标
+export const getExperiment = ()=>{
+ return request({
+ url:'/experimental/xnExperimental/selectExperimental',
+ method:'get',
+ })
}
\ No newline at end of file
diff --git a/src/router/index.ts b/src/router/index.ts
index 75b9269..b316d13 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -32,6 +32,11 @@ const routerList: any = [
name: 'SubjectTest',
component: () => import('@/views/subjectTest/index.vue'),
},
+ {
+ path: '/target', // 实验目标（简介）
+ name: 'Target',
+ component: () => import('@/views/target/index.vue'),
+ },
{
path: '/login',
name: 'Login',
diff --git a/src/views/target/index.vue b/src/views/target/index.vue
new file mode 100644
index 0000000..2ee015d
--- /dev/null
+++ b/src/views/target/index.vue
@@ -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>