知识点学习

src/layout/knowledgePage.vue

@@ -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>

src/router/index.ts

@@ -50,6 +50,10 @@ const routerList: any = [
     path: '/spacePage',
     name: 'SpacePage',
     component:()=>import('@/layout/spacePage.vue')
+  },{
+    path: '/knowledgePage',
+    name: 'KnowledgePage',
+    component: () => import('@/layout/knowledgePage.vue')
   }
 
 ];