From 812e94b48a0f6790d3d831262d4ee0980a512c0b Mon Sep 17 00:00:00 2001 From: nopy <646880214@qq.com> Date: Thu, 27 Jun 2024 13:44:10 +0800 Subject: [PATCH 1/3] 1 --- .../pages/ListPages/Training/Operation1.css | 81 +++++++++++-------- .../pages/ListPages/Training/Operation1.jsx | 7 +- 2 files changed, 50 insertions(+), 38 deletions(-) diff --git a/app-dm/src/pages/ListPages/Training/Operation1.css b/app-dm/src/pages/ListPages/Training/Operation1.css index 113e8db..8b625c0 100644 --- a/app-dm/src/pages/ListPages/Training/Operation1.css +++ b/app-dm/src/pages/ListPages/Training/Operation1.css @@ -1,6 +1,6 @@ .nav-operation1{ height: 50px; - width: 99.5%; + width: 1630px; margin-bottom: 5px; box-shadow: 1px 1px 6px #d4d4d4; } @@ -57,8 +57,8 @@ z-index: 1000; } .dropdown-menu1 li{ - background-color: rgb(255, 239, 239); - border-bottom: 2px solid rgb(253, 210, 210); + background-color: rgb(236, 232, 232); + border-bottom: 2px solid rgb(213, 208, 208); } /* 显示下拉菜单 */ .subject-dropdown.open1 + .dropdown-menu1 { @@ -69,6 +69,45 @@ top: 15px; left: 180px; } + +/* 题目预览框 */ +.countBox{ + height: 280px; + padding: 7px; + background-color:#e8f7f0; + box-shadow: 0px 0px 10px #aacbae; +} +.countBox div{ + display: flex; + flex-wrap:wrap; + width: 200px; +} +.countBox td{ + width: 40px; + height: 30px; + /* background-color: rgb(136, 243, 209); */ + border: 1px solid black; + text-align: center; + margin-left: 5px; + margin-top: 5px; + cursor: pointer; +} +.countBox tr{ + font-size: 18px; + font-weight: 550; + color: #364a38; +} +.answered { + /* 例如，改变题目的背景色 */ + width: 40px; + height: 30px; + background-color: rgb(142, 255, 223); + text-align: center; + margin-left: 5px; + margin-top: 5px; + cursor: pointer; +} + /* 第二页（实训题）的右边页面 */ .body-right1{ width: 1415px; @@ -79,11 +118,11 @@ border-radius: 10px; background-color: #f7f8fa; } +/* .body-right1-choice tbody{ + +} */ /* 前进按钮 */ -.btn-back1{ - -} .btn-back1 p{ font-size: 20px; margin-left: 5px; @@ -110,32 +149,6 @@ .body-right1-comple tr{ background-color: rgb(110, 130, 130); } -.countBox{ - margin-top: 10px; -} -.countBox div{ - display: flex; - flex-wrap:wrap; - width: 200px; -} -.countBox td{ - width: 40px; - height: 30px; - /* background-color: rgb(136, 243, 209); */ - border: 1px solid black; - text-align: center; - margin-left: 5px; - margin-top: 5px; - cursor: pointer; -} -.answered { - /* 例如，改变题目的背景色 */ - width: 40px; - height: 30px; - background-color: rgb(136, 243, 209); - text-align: center; - margin-left: 5px; - margin-top: 5px; - cursor: pointer; - } + + diff --git a/app-dm/src/pages/ListPages/Training/Operation1.jsx b/app-dm/src/pages/ListPages/Training/Operation1.jsx index 6df4cc4..04e72de 100644 --- a/app-dm/src/pages/ListPages/Training/Operation1.jsx +++ b/app-dm/src/pages/ListPages/Training/Operation1.jsx @@ -11,7 +11,7 @@ import axios from 'axios'; function Operation1() { const click=()=>{ - console.log(TrainData); + console.log(TrainData['operateID'][3][0]); } const clear=()=>{ localStorage.removeItem('choice_answers'); @@ -40,7 +40,6 @@ function Operation1() { }) const returnData=TrainDataSrc.data setTrainData(returnData) - //60*parseInt(returnData['operateID'][4] }catch{ alert('TrainDataFunc出错') } @@ -138,7 +137,7 @@ function Operation1() { localStorage.setItem('answeredChoice',answeredChoice) localStorage.setItem('answeredComple',answeredComple) localStorage.setItem('answeredJudge',answeredJudge) - + localStorage.setItem('TrainTest',TrainData['operatrID'][3][0]) }; // 在组件加载时从 localStorage 中恢复答案 @@ -258,7 +257,7 @@ function Operation1() { {TrainData && (

选择题:

- + {Object.keys(TrainData['operateID'][0]).map((key,index) => ( ({index+1}.){TrainData['operateID'][0][key][0][1]} From 43bf9d2dc72ca228830041e5c1d19ffa768b480c Mon Sep 17 00:00:00 2001 From: nopy <646880214@qq.com> Date: Sat, 29 Jun 2024 12:51:26 +0800 Subject: [PATCH 2/3] 1 --- .../src/TeacherPages/list_pods/List_pods.css | 12 -- .../src/TeacherPages/list_pods/List_pods.jsx | 28 ---- .../pages/ListPages/Training/Operation1.css | 108 +++++++++----- .../pages/ListPages/Training/Operation1.jsx | 136 +++++++++++------- .../pages/ListPages/Training/Operation2.css | 4 +- app-dm/src/router/index.jsx | 3 +- 6 files changed, 161 insertions(+), 130 deletions(-) delete mode 100644 app-dm/src/TeacherPages/list_pods/List_pods.css delete mode 100644 app-dm/src/TeacherPages/list_pods/List_pods.jsx diff --git a/app-dm/src/TeacherPages/list_pods/List_pods.css b/app-dm/src/TeacherPages/list_pods/List_pods.css deleted file mode 100644 index ea79a9b..0000000 --- a/app-dm/src/TeacherPages/list_pods/List_pods.css +++ /dev/null @@ -1,12 +0,0 @@ -.list-pods-container { - width: 100%; - height: 100%; - display: flex; - justify-content: center; - align-items: center; - } - - h1 { - font-size: 2rem; - color: #333; - } \ No newline at end of file diff --git a/app-dm/src/TeacherPages/list_pods/List_pods.jsx b/app-dm/src/TeacherPages/list_pods/List_pods.jsx deleted file mode 100644 index f2f4a39..0000000 --- a/app-dm/src/TeacherPages/list_pods/List_pods.jsx +++ /dev/null @@ -1,28 +0,0 @@ -import './list_pods.css' -import React, { useEffect, useState } from 'react'; -function List_pods(){ - const [seconds, setSeconds] = useState(60); - - const handleStart = () => { - const intervalId = setInterval(() => { - if (seconds > 0) { - setSeconds(seconds - 1); - } else { - clearInterval(intervalId); - alert('考试时间到!'); - } - }, 1000); - - return () => { - clearInterval(intervalId); - }; - }; - - return ( -
-

剩余时间：{seconds}

- -
- ); -} -export default List_pods \ No newline at end of file diff --git a/app-dm/src/pages/ListPages/Training/Operation1.css b/app-dm/src/pages/ListPages/Training/Operation1.css index 8b625c0..84451b5 100644 --- a/app-dm/src/pages/ListPages/Training/Operation1.css +++ b/app-dm/src/pages/ListPages/Training/Operation1.css @@ -1,3 +1,4 @@ +/* 上面导航 */ .nav-operation1{ height: 50px; width: 1630px; @@ -20,17 +21,18 @@ /* 第二页（实训题）的左边导航 */ .nav-left-operation1{ width: 215px; - height: 100%; + height: 1540px; position: absolute; box-shadow: 2px 2px 6px #d4d4d4; } .nav-left-operation1 p{ - font-size: 16px; + height: 10px; + font-size: 15px; padding: 0 10px; + margin-top: 6px; } .nav-left-ul1{ width: 175px; - /* border-top: 1px solid #7f7f7f; */ position: relative; border-top: 2px solid rgb(212, 212, 212); } @@ -74,8 +76,20 @@ .countBox{ height: 280px; padding: 7px; + position: fixed; + right: 0px; + top: 65px; background-color:#e8f7f0; - box-shadow: 0px 0px 10px #aacbae; + box-shadow: 0px 0px 6px #aacbae; + z-index: 1000; + transition: top 0.3s; /* 平滑过渡效果 */ +} +.fixed-count-box { + position: fixed; + top: 0; + right: 0; + width: auto; + z-index: 1000; } .countBox div{ display: flex; @@ -85,7 +99,6 @@ .countBox td{ width: 40px; height: 30px; - /* background-color: rgb(136, 243, 209); */ border: 1px solid black; text-align: center; margin-left: 5px; @@ -101,7 +114,7 @@ /* 例如，改变题目的背景色 */ width: 40px; height: 30px; - background-color: rgb(142, 255, 223); + background-color: rgb(149, 223, 187); text-align: center; margin-left: 5px; margin-top: 5px; @@ -110,45 +123,66 @@ /* 第二页（实训题）的右边页面 */ .body-right1{ - width: 1415px; - height: 845px; + width: 1414px; + height: 1540px; position: absolute; top: 64px; left: 230px; border-radius: 10px; background-color: #f7f8fa; } -/* .body-right1-choice tbody{ - -} */ +.body-right1 p{ + width: 80px; + height: 30px; + margin: 0px; + padding-left: 10px; + margin-left: -10px; + font-size: 20px; + color: #273128; + background-image: linear-gradient(#c7e0ca,#a7daa3); + border-radius: 0 10px 10px 0; +} +.body-right1 table{ + width: 100%; + border-spacing: 10px; +} +.test-title{ + font-size: 17px; + text-indent: 1em; +} +.optionBox{ + width: 100%; + height: 160px; + font-size: 16px; + margin-top: 5px; + margin-bottom: 5px; + background-color: rgb(255, 255, 255); +} +.optionBox label{ + margin-left: 40px; + line-height: 40px; +} +.body-right1-comple{ + border-collapse: separate; + text-indent: initial; + border-spacing: 10px; /* 设置行和列之间的间距 */ +} +.body-right1-comple tr{ + height: 25px; + background-color: #fff; +} +.test-title1{ + font-size: 17px; +} +.input-box{ + margin-bottom: 10px; +} +.body-right1-comple span{ + margin-left: 30px; +} /* 前进按钮 */ .btn-back1 p{ font-size: 20px; margin-left: 5px; -} - -.body-right1 table{ - width: 100%; -} -.optionBox{ - width: 100%; - background-color: rgb(110, 130, 130); -} -.body-right1 p{ - margin: 0px; - font-size: 20px; -} -.optionBox label{ - margin-left: 10px; -} -.body-right1-comple{ - border-collapse: separate; - border-spacing: 10px; /* 设置行和列之间的间距 */ -} -.body-right1-comple tr{ - background-color: rgb(110, 130, 130); -} - - - +} \ No newline at end of file diff --git a/app-dm/src/pages/ListPages/Training/Operation1.jsx b/app-dm/src/pages/ListPages/Training/Operation1.jsx index e2d23ab..91714d5 100644 --- a/app-dm/src/pages/ListPages/Training/Operation1.jsx +++ b/app-dm/src/pages/ListPages/Training/Operation1.jsx @@ -200,9 +200,29 @@ function Operation1() { } JUD_sum++ } - } + // 题目预览框 + const [isFixed,setIsFixed]=useState(false) + // 创建一个函数来处理滚动逻辑 + const handleScroll = () => { + const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0; + const fixedThreshold = 100; // 滚动到100px后固定 + + if (scrollTop > fixedThreshold) { + setIsFixed(true); + } else { + setIsFixed(false); + } + }; + // 在组件挂载后添加滚动事件监听器，并在卸载时移除 + useEffect(() => { + window.addEventListener('scroll', handleScroll); + + return () => { + window.removeEventListener('scroll', handleScroll); + }; + }, []); return ( @@ -228,12 +248,13 @@ function Operation1() { {/* 子菜单项 */} )} - +
  • 实训题
    • -
    + {/* 题目预览框 */} +
    {/* 根据isFixed状态来设置countBox的类 */} {TrainData&&
    选择题:
    @@ -257,59 +278,74 @@ function Operation1() {
    - {TrainData && ( -
    -

    选择题:

    - - {Object.keys(TrainData['operateID'][0]).map((key,index) => ( - - ({index+1}.){TrainData['operateID'][0][key][0][1]} -
    - -
    - -
    - -
    - -
    - - ))} - -
    - )} - {TrainData&&( - - -

    填空题:

    - {Object.keys(TrainData['operateID'][1]).map((key)=>( - {TrainData['operateID'][1][key][0][1]} -
    - 请填入你的答案: - - - ))} - -
    - )} - {TrainData&&( + {TrainData && ( +

    选择题

    -

    判断题:

    - {Object.keys(TrainData['operateID'][2]).map((key)=>( - {TrainData['operateID'][2][key][0][1]} - - - - + {Object.keys(TrainData['operateID'][0]).map((key,index) => ( + + {index+1}.{TrainData['operateID'][0][key][0][1]} +
    + +
    + +
    + +
    + +
    ))} -
    - )} - - + )} + {TrainData&&( + + +

    填空题

    + {Object.keys(TrainData['operateID'][1]).map((key,index)=>( + + {index+1}.{TrainData['operateID'][1][key][0][1]} + {/*
    */} +
    + 请填入你的答案： + +
    + + ))} + +
    + )} + {TrainData&&( + + +

    判断题

    + {Object.keys(TrainData['operateID'][2]).map((key,index)=>( + + {index+1}.{TrainData['operateID'][2][key][0][1]} + + + + + + ))} + +
    + )} + + diff --git a/app-dm/src/pages/ListPages/Training/Operation2.css b/app-dm/src/pages/ListPages/Training/Operation2.css index 2d9a3c2..d46fa11 100644 --- a/app-dm/src/pages/ListPages/Training/Operation2.css +++ b/app-dm/src/pages/ListPages/Training/Operation2.css @@ -25,8 +25,10 @@ box-shadow: 2px 2px 6px #d4d4d4; } .nav-left-operation2 p{ - font-size: 16px; + height: 10px; + font-size: 15px; padding: 0 10px; + margin-top: 6px; } .nav-left-ul2{ width: 175px; diff --git a/app-dm/src/router/index.jsx b/app-dm/src/router/index.jsx index 3f1ffc4..3438c16 100755 --- a/app-dm/src/router/index.jsx +++ b/app-dm/src/router/index.jsx @@ -26,7 +26,7 @@ import Marking from '../TeacherPages/MarkingPages/Marking'; import SendTrain from '../TeacherPages/TrainManage/SendTrain'; import TrainManage from '../TeacherPages/TrainManage/Trainmanage'; import StudentLink from '../TeacherPages/MarkingPages/StudentLink'; -import List_pods from '../TeacherPages/list_pods/list_pods'; + // 定义一个组件来包裹除了特定页面(exam)外的所有页面使其有导航 @@ -77,7 +77,6 @@ function App() { }/> {/*实训管理-发布实训*/} }/> {/* 实训页面1:理论 */} }/> {/* 实训页面2:数据库 */} - }/> }/> {/* 独立的顶级路由，如登录页面，也不包含HeaderNav */} From 950f670f85a53c525955f82477ca6754c6108b56 Mon Sep 17 00:00:00 2001 From: nopy <646880214@qq.com> Date: Sat, 29 Jun 2024 13:06:28 +0800 Subject: [PATCH 3/3] 6.29 --- app-dm/src/pages/ListPages/Subject/Exam.css | 171 +++++++++++--------- app-dm/src/pages/ListPages/Subject/Exam.jsx | 113 ++++++++++++- app-dm/src/router/index.jsx | 4 +- 3 files changed, 202 insertions(+), 86 deletions(-) diff --git a/app-dm/src/pages/ListPages/Subject/Exam.css b/app-dm/src/pages/ListPages/Subject/Exam.css index d25ad69..247fb2f 100644 --- a/app-dm/src/pages/ListPages/Subject/Exam.css +++ b/app-dm/src/pages/ListPages/Subject/Exam.css @@ -1,61 +1,43 @@ -/* 导航 */ -.nav-test{ - width: 100%; - height: 52px; +/* 上面导航 */ +.nav-exam{ + height: 50px; + width: 1630px; + margin-bottom: 5px; + box-shadow: 1px 1px 6px #d4d4d4; +} +.nav-exam p{ + width: 200px; + height: 40px; font-size: 20px; - background-color: rgb(255, 255, 255); - box-shadow: 3px 2px 2px #d4d4d4; + line-height: 10px; + padding-right: 10px; + float: right; } -.nav1{ - line-height:15px; - font-size: 20px; - margin-left: 100px; - font-weight: 500; - font-family: '微软雅黑'; -} - -.nav1 p{ - font-size: 15px; - margin-top: 15px; -} -.nav1 h1{ - font-size: 20px; - margin-top: 15px; -} - -.time{ - position: absolute; - right: 50px; - top: 8px; -} - -/* 主体 */ -.body-box{ +.body-exam{ display: flex; - align-content: center; + flex-direction: column; } - -/* 左侧 */ -.body-left-test{ +/* 第二页（实训题）的左边导航 */ +.nav-left-exam{ width: 215px; - height: 840px; + height: 1540px; + position: absolute; box-shadow: 2px 2px 6px #d4d4d4; } - -.body-left-test p{ - font-size: 16px; +.nav-left-exam p{ + height: 10px; + font-size: 15px; padding: 0 10px; + margin-top: 6px; } - -.body-left-test ul{ +.nav-left-ul1-exam{ width: 175px; - height: 240px; - border-top: 1px solid #7f7f7f; + position: relative; + border-top: 2px solid rgb(212, 212, 212); } - -.body-left-test li{ - width: 75px; +.nav-left-ul1-exam li{ + width: 65px; height: 40px; font-size: 18px; list-style-type: none; @@ -64,42 +46,77 @@ line-height: 40px; display: block; cursor: pointer; - border-bottom: 1px solid #7f7f7f; - /* background-color:aliceblue; */ -} - -/* 右侧 */ -.body-right-test{ - width: 1403px; - height: 828px; - margin-top: 10px; - margin-left: 5px; - background-color: #fff; + /* border-bottom: 1px solid #7f7f7f; */ + background-color: #f5f5f5; + border-bottom: 2px solid rgb(212, 212, 212); } - - -/* 提交按钮 */ -#submit{ +/* 下拉菜单 */ +.dropdown-menu1-exam { + height: auto; position: absolute; + top: 62px; + left: 0px; + z-index: 1000; +} +.dropdown-menu1-exam li{ + background-color: rgb(236, 232, 232); + border-bottom: 2px solid rgb(213, 208, 208); +} +/* 显示下拉菜单 */ +.subject-dropdown.open1-exam + .dropdown-menu1-exam { + display: block; +} +.subject-dropdown1-exam span{ + position: absolute; + top: 15px; + left: 180px; } -#choice_box input{ - margin-top: 20px; - margin-left: 20px; +/* 题目预览框 */ +.countBox-exam{ + height: 280px; + padding: 7px; + position: fixed; + right: 0px; + top: 65px; + background-color:#e8f7f0; + box-shadow: 0px 0px 6px #aacbae; + z-index: 1000; + transition: top 0.3s; /* 平滑过渡效果 */ } -#choice_box td{ - border-bottom: 2px solid rgb(111, 203, 242); - width: 2000px; +.fixed-count-box-exam { + position: fixed; + top: 0; + right: 0; + width: auto; + z-index: 1000; } -#comple_box td{ - border-bottom: 2px solid rgb(111, 203, 242); - width: 2000px; +.countBox-exam div{ + display: flex; + flex-wrap:wrap; + width: 200px; } -.input_txt{ - border: none; - border-bottom: 1px solid black; - font-size: 16px; - font-family: 'heiti'; +.countBox-exam td{ + width: 40px; + height: 30px; + border: 1px solid black; + text-align: center; + margin-left: 5px; + margin-top: 5px; + cursor: pointer; } - - +.countBox-exam tr{ + font-size: 18px; + font-weight: 550; + color: #364a38; +} +.answered-exam { + /* 例如，改变题目的背景色 */ + width: 40px; + height: 30px; + background-color: rgb(149, 223, 187); + text-align: center; + margin-left: 5px; + margin-top: 5px; + cursor: pointer; +} \ No newline at end of file diff --git a/app-dm/src/pages/ListPages/Subject/Exam.jsx b/app-dm/src/pages/ListPages/Subject/Exam.jsx index 16265fd..17f52a8 100644 --- a/app-dm/src/pages/ListPages/Subject/Exam.jsx +++ b/app-dm/src/pages/ListPages/Subject/Exam.jsx @@ -1,13 +1,112 @@ import './Exam.css' +import { Terminal } from "@xterm/xterm"; +import "@xterm/xterm/css/xterm.css" +import React,{ MouseEvent, useEffect, useRef, useState } from "react"; import { useParams } from 'react-router'; +import { Link } from 'react-router-dom'; +// import arrowright from '../img/arrowright.jpg' +import bottom from '../img/bottom.jpg' +import top from '../img/top.jpg' import axios from 'axios'; -import { useEffect, useState } from 'react'; -// 首页 课程班级 -function Exam(){ - return( -
    - ) +function Exam() { + + + //倒计时 + const [countdown, setCountdown] = useState(null); + + // 倒计时更新 + useEffect(() => { + let interval = setInterval(() => { + if (countdown !== 0 ) { + setCountdown(countdown - 1); + localStorage.setItem('time',countdown-1) + } else { + clearInterval(interval); + alert('考试时间到！'); + } + }, 1000); + return () => clearInterval(interval); + }, [countdown]); + + // useEffect(()=>{ + // if(countdown<0){ + // console.log('c'); + // setCountdown(60 * parseInt(TrainData['operateID'][4])) + // localStorage.removeItem('time') + // } + // },[TrainData]) + + // 转换秒数为时分秒格式 + const formatTime = (seconds) => { + const hours = Math.floor(seconds / 3600); + const minutes = Math.floor((seconds % 3600) / 60); + const secs = seconds % 60; + return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`; + }; + + // 下拉菜单 + const [isSubjectDropdownOpen, setIsSubjectDropdownOpen] = useState(false); + + return ( +
    +
    + {/* 导航 */} + {/*

    {OperationId}

    */} +

    剩余时间：{countdown >=0 && formatTime(countdown)}

    +
    +
    +
    + {/* 左边导航 */} +

    题目

    +
      +
    • setIsSubjectDropdownOpen(!isSubjectDropdownOpen)}> + 主观题 + {isSubjectDropdownOpen ? : } + {isSubjectDropdownOpen && ( +
        +
      • 判断题
        • +
      • 选择题
        • +
      • 简答题
        • + {/* 子菜单项 */} +
      + )} +
      • + +
    • 实训题
      • + +
    + {/* 题目预览框 */} + {/* 根据isFixed状态来设置countBox的类 */} + {/*
    + {TrainData&& + 选择题: +
    + {Object.keys(TrainData['operateID'][0]).map((key,index)=>( +
    + ))} + + 填空题： +
    + {Object.keys(TrainData['operateID'][1]).map((key,index)=>( +
    + ))} + + 判断题： +
    + {Object.keys(TrainData['operateID'][2]).map((key,index)=>( +
    + ))} + +
    {index+1}
    {index+1}
    {index+1}
    } +
    */} +
    + {/*
    + +
    */} +
    +
    + ) } -export default Exam \ No newline at end of file +export default Exam; \ No newline at end of file diff --git a/app-dm/src/router/index.jsx b/app-dm/src/router/index.jsx index b5e2aa3..a2c4596 100755 --- a/app-dm/src/router/index.jsx +++ b/app-dm/src/router/index.jsx @@ -23,8 +23,8 @@ import ClassID from '../TeacherPages/classlistpages/classId'; import ManageTest from '../TeacherPages/TestManage/ManageTest'; import SendTest from '../TeacherPages/TestManage/SendTest'; import Marking from '../TeacherPages/MarkingPages/Marking'; -import SendTrain from '../TeacherPages/Trainmanage/SendTrain' -import TrainManage from '../TeacherPages/Trainmanage/Trainmanage' +import SendTrain from '../TeacherPages/TrainManage/SendTrain' +import TrainManage from '../TeacherPages/TrainManage/Trainmanage' import StudentLink from '../TeacherPages/MarkingPages/StudentLink';