知识点学习

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/layout/spacePage.vue

@@ -17,8 +17,73 @@
                     <button class="btn3" @click="handlePasswordClick">密码管理</button>
                 </div>
                 <div class="rightBoxes">
-                    <div class="topBox"></div>
+                    <div class="topBox">
-                    <div class="bottomBox"></div>
+                        <el-form style="margin:30px 0 0 200px;" :rules="rules" :model="formModel" ref="formRef"
+                            size="large" autocomplete="off">
+                            <el-form-item prop="username" class="custom-form-item">
+                                <div class="left" style="width: 60px;color: #fbfdfd;">
+                                    用户账号
+                                </div>
+                                <div class="right">
+                                    <el-input v-model="formModel.username" style="border-color: #20bec8;"></el-input>
+                                </div>
+                            </el-form-item>
+                            <el-form-item prop="name" class="custom-form-item">
+                                <div style="display: flex; align-items: center; color: pink">
+                                    <div class="left" style="width: 60px;color: #fbfdfd;">
+                                        姓名
+                                    </div>
+                                    <div class="right">
+                                        <el-input v-model="formModel.name" style="border-color: #20bec8;"></el-input>
+                                    </div>
+                                </div>
+                            </el-form-item>
+                            <el-form-item prop="clssid" class="custom-form-item">
+                                <div class="left" style="width: 60px;color: #fbfdfd;">
+                                    班级
+                                </div>
+                                <div class="right">
+                                    <el-input v-model="formModel.clssid" style="border-color: #20bec8;"></el-input>
+                                </div>
+                            </el-form-item>
+
+                        </el-form>
+                    </div>
+                    <div class="bottomBox">
+                        <el-form size="large" style="margin:30px 0 0 265px;" :rules="rules" :model="formModel">
+                            <el-form-item prop="studentNumb">
+                                <div style="display: flex; align-items: center;">
+                                    <div class="left" style="width: 60px;color: #fbfdfd;">
+                                        学号
+                                    </div>
+                                    <div class="right">
+                                        <el-input v-model="formModel.studentNumb"
+                                            style="border-color: #20bec8"></el-input>
+                                    </div>
+                                </div>
+                            </el-form-item>
+                            <el-form-item prop="mobile">
+                                <div style="display: flex; align-items: center;">
+                                    <div class="left" style="width: 60px;color: #fbfdfd;">
+                                        手机号
+                                    </div>
+                                    <div class="right">
+                                        <el-input v-model="formModel.mobile" style="border-color: #20bec8"></el-input>
+                                    </div>
+                                </div>
+                            </el-form-item>
+                            <el-form-item prop="score">
+                                <div style="display: flex; align-items: center;">
+                                    <div class="left" style="width: 60px;color: #fbfdfd;">
+                                        成绩
+                                    </div>
+                                    <div class="right">
+                                        <el-input v-model="formModel.score" style="border-color: #20bec8"></el-input>
+                                    </div>
+                                </div>
+                            </el-form-item>
+                        </el-form>
+                    </div>
                 </div>
             </div>
         </div>
@@ -43,6 +108,7 @@ const loginFn = () => {
 const handleHomeClick = () => {
     // 处理首页按钮点击逻辑，如路由跳转
     console.log('首页按钮被点击');
+    router.push('/studyPage')
 };
 const handleRecordClick = () => {
     console.log('学习/成绩记录按钮被点击');
@@ -50,6 +116,51 @@ const handleRecordClick = () => {
 const handlePasswordClick = () => {
     console.log('密码管理按钮被点击');
 };
+
+const formRef = ref();
+const formModel = ref({
+    username: "",
+    name: "",
+    clssid: '',
+    studentNumb: "",
+    mobile: '',
+    score: ''
+});
+const rules = {
+    username: [
+        { required: true, message: "请输入用户名", trigger: "blur" },
+        {
+            min: 5,
+            max: 30,
+            message: "用户名长度最小五位最大三十位",
+            trigger: ["change", "blur"],
+        },
+    ],
+    studentNumb: [
+        { required: true, message: "请输入学号", trigger: "blur" },
+        {
+            min: 5,
+            max: 11,
+            message: "学号长度最小五位最大十一位",
+            trigger: ["change", "blur"],
+        },
+    ],
+    name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
+    clssid: [
+        { required: true, message: "请选择所属班级", trigger: "blur" },
+    ],
+    mobile: [
+        { required: true, message: "请输入手机号", trigger: "blur" },
+        {
+            pattern: /^1[3-9]\d{9}$/,
+            message: "手机号格式不正确",
+            trigger: ["change", "blur"],
+        },
+    ],
+    score:[
+        { required: true, message: "成绩", trigger: "blur" },
+    ]
+};
 </script>
 
 <style lang="less" scoped>
@@ -151,6 +262,7 @@ const handlePasswordClick = () => {
                 height: 40px;
                 line-height: 40px;
             }
+
             .btn1,
             .btn2,
             .btn3 {
@@ -178,6 +290,7 @@ const handlePasswordClick = () => {
                 left: 26%;
                 top: 360px;
             }
+
             .btn3 {
                 position: absolute;
                 left: 22%;
@@ -206,6 +319,15 @@ const handlePasswordClick = () => {
                 // justify-content: center;
                 // align-items: center;
                 transform: skewX(15deg);
+
+                .el-input {
+                    width: 450px;
+                    height: 50px;
+                }
+
+                :deep(.el-form-item__error) {
+                    left: 90px;
+                }
             }
 
             .bottomBox {
@@ -221,6 +343,14 @@ const handlePasswordClick = () => {
                 // align-items: center;
                 transform: skewX(15deg);
 
+                .el-input {
+                    width: 450px;
+                    height: 50px;
+                }
+
+                :deep(.el-form-item__error) {
+                    left: 90px;
+                }
             }
 
 

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')
   }
 
 ];