1

app-dm/src/TeacherPages/list_pods/List_pods.css

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

app-dm/src/TeacherPages/list_pods/List_pods.jsx

@@ -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 (
-    <div className="App">
-      <h1>剩余时间：{seconds}</h1>
-      <button onClick={handleStart}>开始倒计时</button>
-    </div>
-  );
-}
-export default List_pods

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;
+    width: 1414px;
-    height: 845px;
+    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);
-}
-
-
-

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() {
                                 {/* 子菜单项 */}
                             </ul>
                         )}
-                    </li>                    
+                    </li>
                     <Link to={`/operation2/1`} style={{color:'#000',textDecoration:'none'}}>
                         <li style={{ marginTop: isSubjectDropdownOpen ? '186px' : '0' }}>实训题</li>
                     </Link>
                 </ul>
-                <div className='countBox'>
+                {/* 题目预览框 */}
+                <div className={`countBox ${isFixed ? 'fixed-count-box' : ''}`}> {/* 根据isFixed状态来设置countBox的类 */}
                     {TrainData&&<table>
                         <tr>选择题:</tr>
                         <div>
@@ -257,59 +278,74 @@ function Operation1() {
                 </div>
             </div>
             <div className='body-right1'>
-            {TrainData && (
+                {TrainData && (
-            <table className='body-right1-choice'>
-                <p>选择题:</p>
-                <tbody>
-                    {Object.keys(TrainData['operateID'][0]).map((key,index) => (
-                        <tr key={key}>
-                            <tr style={{fontSize:'18px'}}>({index+1}.){TrainData['operateID'][0][key][0][1]}</tr>
-                            <div className='optionBox'>
-                                <label><input type="radio" value={TrainData['operateID'][0][key][0][2]}  checked={choice_answer[key] === TrainData['operateID'][0][key][0][2]} onChange={handleOptionChange} name={`group${key}`}/><span>A:{TrainData['operateID'][0][key][0][2]}</span></label>
-                                <br />
-                                <label><input type="radio" value={TrainData['operateID'][0][key][0][3]}  checked={choice_answer[key] === TrainData['operateID'][0][key][0][3]} onChange={handleOptionChange} name={`group${key}`}/><span>B:{TrainData['operateID'][0][key][0][3]}</span></label>
-                                <br />
-                                <label><input type="radio" value={TrainData['operateID'][0][key][0][4]}  checked={choice_answer[key] === TrainData['operateID'][0][key][0][4]} onChange={handleOptionChange} name={`group${key}`}/><span>C:{TrainData['operateID'][0][key][0][4]}</span></label>
-                                <br />
-                                <label><input type="radio" value={TrainData['operateID'][0][key][0][5]}  checked={choice_answer[key] === TrainData['operateID'][0][key][0][5]} onChange={handleOptionChange} name={`group${key}`}/><span>D:{TrainData['operateID'][0][key][0][5]}</span></label>
-                            </div>
-                        </tr>
-                    ))}
-                </tbody>
-            </table>
-            )}
-            {TrainData&&(
-                <table className='body-right1-comple'>
-                    <tbody>
-                    <p>填空题:</p>
-                    {Object.keys(TrainData['operateID'][1]).map((key)=>(
-                        <tr key={key}>{TrainData['operateID'][1][key][0][1]}
-                        <br />
-                        <span>请填入你的答案:</span>
-                            <input type="text" onChange={handleInputChange} name={key} value={completion_answer[key]||''}/>
-                        </tr>
-                    ))}
-                    </tbody>
-                </table>
-            )}
-            {TrainData&&(
                 <table>
+                    <p>选择题</p>
                     <tbody>
-                        <p>判断题:</p>
+                        {Object.keys(TrainData['operateID'][0]).map((key,index) => (
-                        {Object.keys(TrainData['operateID'][2]).map((key)=>(
+                            <tr key={key}>
-                            <tr key={key}>{TrainData['operateID'][2][key][0][1]}
+                                <tr className='test-title'>{index+1}.{TrainData['operateID'][0][key][0][1]}</tr>
-                                <tr>
+                                <div className='optionBox'>
-                                    <label><input type="radio" name={`judge${key}`} checked={judge_answer[key] === 'true'} onChange={handleJudgeOption} value={true} />T</label>
+                                    <label>
-                                    <label><input type="radio" name={`judge${key}`} checked={judge_answer[key] === 'false'} onChange={handleJudgeOption} value={false} />F</label>
+                                        <input type="radio" value={TrainData['operateID'][0][key][0][2]}  checked={choice_answer[key] === TrainData['operateID'][0][key][0][2]} onChange={handleOptionChange} name={`group${key}`}/>
-                                </tr>
+                                        <span>A.{TrainData['operateID'][0][key][0][2]}</span>
+                                    </label>
+                                    <br />
+                                    <label>
+                                        <input type="radio" value={TrainData['operateID'][0][key][0][3]}  checked={choice_answer[key] === TrainData['operateID'][0][key][0][3]} onChange={handleOptionChange} name={`group${key}`}/>
+                                        <span>B.{TrainData['operateID'][0][key][0][3]}</span>
+                                    </label>
+                                    <br />
+                                    <label>
+                                        <input type="radio" value={TrainData['operateID'][0][key][0][4]}  checked={choice_answer[key] === TrainData['operateID'][0][key][0][4]} onChange={handleOptionChange} name={`group${key}`}/>
+                                        <span>C.{TrainData['operateID'][0][key][0][4]}</span>
+                                    </label>
+                                    <br />
+                                    <label>
+                                        <input type="radio" value={TrainData['operateID'][0][key][0][5]}  checked={choice_answer[key] === TrainData['operateID'][0][key][0][5]} onChange={handleOptionChange} name={`group${key}`}/>
+                                        <span>D.{TrainData['operateID'][0][key][0][5]}</span>
+                                    </label>
+                                </div>
                             </tr>
                         ))}
-                        
                     </tbody>
                 </table>
-            )}
+                )}
-            <button onClick={click}>测试</button><button onClick={clear}>清除测试</button><button onClick={submit}>假提交按钮</button>
+                {TrainData&&(
-            <Link to={`/operation2/${operateID}`}><button onClick={saveAnswers}>下一页</button></Link>
+                    <table className='body-right1-comple'>
+                        <tbody>
+                        <p>填空题</p>
+                        {Object.keys(TrainData['operateID'][1]).map((key,index)=>(
+                            <tr key={key}>
+                                <tr className='test-title1'>{index+1}.{TrainData['operateID'][1][key][0][1]}</tr>
+                                {/* <br /> */}
+                                <div className='input-box'>
+                                    <span>请填入你的答案：</span>
+                                    <input type="text" onChange={handleInputChange} name={key} value={completion_answer[key]||''}/>
+                                </div>
+                            </tr>
+                        ))}
+                        </tbody>
+                    </table>
+                )}
+                {TrainData&&(
+                    <table>
+                        <tbody>
+                            <p>判断题</p>
+                            {Object.keys(TrainData['operateID'][2]).map((key,index)=>(
+                                <tr key={key}>
+                                    <tr>{index+1}.{TrainData['operateID'][2][key][0][1]}</tr>
+                                    <tr>
+                                        <label><input type="radio" name={`judge${key}`} checked={judge_answer[key] === 'true'} onChange={handleJudgeOption} value={true} />T</label>
+                                        <label><input type="radio" name={`judge${key}`} checked={judge_answer[key] === 'false'} onChange={handleJudgeOption} value={false} />F</label>
+                                    </tr>
+                                </tr>
+                            ))}
+                        </tbody>
+                    </table>
+                )}
+                <button onClick={click}>测试</button><button onClick={clear}>清除测试</button><button onClick={submit}>假提交按钮</button>
+                <Link to={`/operation2/${operateID}`}><button onClick={saveAnswers}>下一页</button></Link>
             </div>
         </div>
     </div>

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;

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() {
           <Route path='/teacher/SendTrain' element={<SendTrain/>}/> {/*实训管理-发布实训*/}
           <Route path='operation1/:operateID' element={<Operation1/>}/> {/* 实训页面1:理论 */}
           <Route path='operation2/:operateID' element={<Operation2/>}/> {/* 实训页面2:数据库 */}
-          <Route path='teacher/list_pods' element={<List_pods/>}/>
           <Route path='/refresh' element={<Refresh/>}/>
 
           {/* 独立的顶级路由，如登录页面，也不包含HeaderNav */}