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 */}