实验报告

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',
+  })
 }

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',

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>