6.27

app-dm/src/pages/ListPages/Training/Operation2.jsx

@@ -137,4 +137,5 @@ function Operation2() {
   )
 }
 
+
 export default Operation2;

app-dm/src/pages/ListPages/Training/Operation3.jsx

@@ -1,95 +0,0 @@
-import './Operation2.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 arrowleft from '../img/arrowleft.jpg'
-import arrowright from '../img/arrowright.jpg'
-import bottom from '../img/bottom.jpg'
-import top from '../img/top.jpg'
-
-function Operation3() {
-    const { operateID } = useParams();
-
-    //倒计时
-    // const { OperationId } = useParams();
-    const [test_data, setTestData] = useState('');
-    const [countdown, setCountdown] = useState(0);
-
-    // 倒计时初始化
-    useEffect(() => {
-    const examDuration = 60 * 60; // 假设考试时长为1小时
-    setCountdown(examDuration);
-    }, []);
-
-    // 倒计时更新
-    useEffect(() => {
-        let interval = setInterval(() => {
-            if (countdown > 0) {
-                setCountdown(countdown - 1);
-            } else {
-                clearInterval(interval);
-                alert('考试时间到！');
-            }
-        }, 1000);
-        return () => clearInterval(interval);
-    }, [countdown]);
-
-     // 转换秒数为时分秒格式
-      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-operation2'>
-            {/* 导航 */}
-            {/* <h1>{OperationId}</h1> */}
-            <p>剩余时间：{formatTime(countdown)}</p>
-        </div>
-        <div className='body-operation2'>
-            <div className='nav-left-operation2'>
-                {/* 左边导航 */}
-                <p>题目</p>
-                <ul className='nav-left-ul2'>
-                    <Link to='/operation1/实训一：数据库的安装' style={{color:'#000',textDecoration:'none'}}>
-                        <li className='subject-dropdown2' onClick={() => setIsSubjectDropdownOpen(!isSubjectDropdownOpen)}>
-                            主观题
-                            {isSubjectDropdownOpen ? <span className='list-img2'><img src={bottom} alt="" width='20px' height='20px'/></span> : <span><img src={top} alt="" width='20px' height='20px'/></span>}
-                            {isSubjectDropdownOpen && (
-                                <ul className='dropdown-menu2'>
-                                    <li>判断题</li>
-                                    <li>选择题</li>
-                                    <li>简答题</li>
-                                    {/* 子菜单项 */}
-                                </ul>
-                            )}
-                        </li>   
-                    </Link>         
-                    <li style={{ marginTop: isSubjectDropdownOpen ? '186px' : '0' }}>实训题</li>
-                </ul>
-            </div>
-            <div className='body-right2'>
-                第三页（实训题:）的右边页面
-            </div>
-            <Link className='btn-back2' to={`/operation1/${operateID}`} style={{color:'#000',textDecoration:'none'}}>
-                <p>上一页</p>
-                <img src={arrowleft} alt="" width='40px' height='40px' />
-            </Link>
-            <Link className='btn-out2' to='/train' style={{color:'#000',textDecoration:'none'}}>
-                <img src={arrowright} alt="" width='40px' height='40px' />
-                <p>完成</p>
-            </Link>
-        </div>
-    </div>
-  )
-}
-
-export default Operation3;

app-dm/src/pages/ListPages/Training/TrainingPage.css

@@ -78,6 +78,17 @@
     justify-content: center;
     align-items: center;
     z-index: 1000;
+    animation: slideInFromUp 0.5s ease-out forwards;
+}
+@keyframes slideInFromUp {
+    from {
+      transform: translateY(100%);
+      opacity: 0;
+    }
+    to {
+      transform: translateY(0);
+      opacity: 1;
+    }
 }
 .warning-content {
     width: 1420px;

app-dm/src/pages/ListPages/Training/TrainingPage.jsx

@@ -4,17 +4,43 @@ import '../Training/TrainingPage.css'
 import axios from 'axios';
 
 
+// const WarningModal = ({ isOpen, onClose }) => {
+   
+//     if (!isOpen) return; // 如果警告框不显示，则不渲染
+//     return (
+//       <div className="warning-box">
+//         <div className="warning-content">
+//           <span className="close-button" onClick={onClose}>×</span>
+//           <p>提醒 : 请及时完成实训内容！！！</p>
+//         </div>
+//       </div>
+//     );
+// };
+
 const WarningModal = ({ isOpen, onClose }) => {
-    if (!isOpen) return null; // 如果警告框不显示，则不渲染
+    // 添加一个状态来控制是否应用动画
+    const [isClosing, setIsClosing] = useState(false);
   
-    return (
+    // 定义关闭警告框的函数
-      <div className="warning-box">
+    const handleClose = () => {
+        setIsClosing(true); // 设置状态以触发动画
+        setTimeout(() => {
+            setIsClosing(false); // 确保动画结束后状态能够重置
+            onClose(); // 动画结束后调用传入的onClose函数来关闭Modal
+        }, 500); // 500ms 应与CSS动画持续时间一致
+    };
+
+    if (!isOpen || !isClosing) {
+      return (
+        <div className={`warning-box ${isClosing ? 'slideUpFadeOut' : ''}`}>
         <div className="warning-content">
-          <span className="close-button" onClick={onClose}>×</span>
+          {!isClosing && <span className="close-button" onClick={handleClose}>×</span>}
           <p>提醒 : 请及时完成实训内容！！！</p>
         </div>
       </div>
     );
+    }
+    return null;
   };
 
 const list4=[
@@ -23,6 +49,7 @@ const list4=[
 ]
 // 首页 学习分析
 function SubjectPage(){
+
     const student_ID=localStorage.getItem('islogin')
     if(student_ID==null){
         alert('登录过期，请重新登录')
@@ -48,13 +75,10 @@ function SubjectPage(){
 
     // 控制警告框显示的状态
     const [isWarningOpen, setWarningOpen] = useState(false);
-
     // 打开警告框
     const openWarning = () => setWarningOpen(true);
-
     // 关闭警告框
     const closeWarning = () => setWarningOpen(false);
-
     // 可以在适当的时机调用openWarning函数来显示警告框
     useEffect(() => {
         openWarning();

app-dm/src/router/index.jsx

@@ -16,7 +16,6 @@ import AnalysePage from '../pages/ListPages/Analyse/AnalysePages';
 import Exam from '../pages/ListPages/Subject/Exam';
 import Operation1 from '../pages/ListPages/Training/Operation1';
 import Operation2 from '../pages/ListPages/Training/Operation2';
-import Operation3 from '../pages/ListPages/Training/Operation3';
 
 // 教师页面
 import TeacherPage from '../TeacherPages/TeacherPage';
@@ -78,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='operation3/:operateID' element={<Operation3/>}/> {/* 实训页面3:web前端 */}
           <Route path='teacher/list_pods' element={<List_pods/>}/>
           <Route path='/refresh' element={<Refresh/>}/>