6.27
This commit is contained in:
parent
231606adff
commit
4ed8c5cc49
|
|
@ -137,4 +137,5 @@ function Operation2() {
|
|||
)
|
||||
}
|
||||
|
||||
|
||||
export default Operation2;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -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/>}/>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue