6.29

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; */
+    /* border-bottom: 1px solid #7f7f7f; */
+    background-color: #f5f5f5;
+    border-bottom: 2px solid rgb(212, 212, 212);
 }
-
-/* 右侧 */
-.body-right-test{
-    width: 1403px;
-    height: 828px;
-    margin-top: 10px;
-    margin-left: 5px;
-    background-color: #fff;
-}
-
-
-/* 提交按钮 */
-#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;
 }
-
-

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(
-        <div></div>
-    )
+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 (
+    <div>
+        <div className='nav-exam'>
+            {/* 导航 */}
+            {/* <h1>{OperationId}</h1> */}
+            <p>剩余时间：{countdown >=0  && formatTime(countdown)}</p>
+        </div>
+        <div className='body-exam'>
+            <div className='nav-left-exam'>
+                {/* 左边导航 */}
+                <p>题目</p>
+                <ul className='nav-left-ul1-exam'>
+                    <li className='subject-dropdown1-exam' onClick={() => setIsSubjectDropdownOpen(!isSubjectDropdownOpen)}>
+                        主观题
+                        {isSubjectDropdownOpen ? <span className='list-img1-exam'><img src={bottom} alt="" width='20px' height='20px'/></span> : <span><img src={top} alt="" width='20px' height='20px'/></span>}
+                        {isSubjectDropdownOpen && (
+                            <ul className='dropdown-menu1-exam'>
+                                <li>判断题</li>
+                                <li>选择题</li>
+                                <li>简答题</li>
+                                {/* 子菜单项 */}
+                            </ul>
+                        )}
+                    </li>
+                    <Link to={`/operation2/1`} style={{color:'#000',textDecoration:'none'}}>
+                        <li style={{ marginTop: isSubjectDropdownOpen ? '186px' : '0' }}>实训题</li>
+                    </Link>
+                </ul>
+                {/* 题目预览框 */}
+                {/* 根据isFixed状态来设置countBox的类 */}
+                {/* <div className={`countBox ${isFixed ? 'fixed-count-box' : ''}`}> 
+                    {TrainData&&<table>
+                        <tr>选择题:</tr>
+                        <div>
+                            {Object.keys(TrainData['operateID'][0]).map((key,index)=>(
+                                <td key={key} className={answeredChoice.includes(index) ? 'answered' : ''}>{index+1}</td>
+                            ))}
+                        </div>
+                        <tr>填空题：</tr>
+                        <div>
+                            {Object.keys(TrainData['operateID'][1]).map((key,index)=>(
+                                <td key={key} className={answeredComple.includes(index) ? 'answered' : ''}>{index+1}</td>
+                            ))}
+                        </div>
+                        <tr>判断题：</tr>
+                        <div>
+                            {Object.keys(TrainData['operateID'][2]).map((key,index)=>(
+                                <td key={key} className={answeredJudge.includes(index) ? 'answered' : ''}>{index+1}</td>
+                            ))}
+                        </div>
+                    </table>}
+                </div> */}
+            </div>
+            {/* <div className='body-right1-exam'>
+                
+            </div> */}
+        </div>
+    </div>
+  )
 }
 
-export default Exam
+export default Exam;

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