6.29
This commit is contained in:
parent
ee1c6935e0
commit
950f670f85
|
|
@ -1,61 +1,43 @@
|
||||||
/* 导航 */
|
/* 上面导航 */
|
||||||
.nav-test{
|
.nav-exam{
|
||||||
width: 100%;
|
height: 50px;
|
||||||
height: 52px;
|
width: 1630px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
box-shadow: 1px 1px 6px #d4d4d4;
|
||||||
|
}
|
||||||
|
.nav-exam p{
|
||||||
|
width: 200px;
|
||||||
|
height: 40px;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
background-color: rgb(255, 255, 255);
|
line-height: 10px;
|
||||||
box-shadow: 3px 2px 2px #d4d4d4;
|
padding-right: 10px;
|
||||||
|
float: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav1{
|
.body-exam{
|
||||||
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{
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-content: center;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
/* 第二页（实训题）的左边导航 */
|
||||||
/* 左侧 */
|
.nav-left-exam{
|
||||||
.body-left-test{
|
|
||||||
width: 215px;
|
width: 215px;
|
||||||
height: 840px;
|
height: 1540px;
|
||||||
|
position: absolute;
|
||||||
box-shadow: 2px 2px 6px #d4d4d4;
|
box-shadow: 2px 2px 6px #d4d4d4;
|
||||||
}
|
}
|
||||||
|
.nav-left-exam p{
|
||||||
.body-left-test p{
|
height: 10px;
|
||||||
font-size: 16px;
|
font-size: 15px;
|
||||||
padding: 0 10px;
|
padding: 0 10px;
|
||||||
|
margin-top: 6px;
|
||||||
}
|
}
|
||||||
|
.nav-left-ul1-exam{
|
||||||
.body-left-test ul{
|
|
||||||
width: 175px;
|
width: 175px;
|
||||||
height: 240px;
|
position: relative;
|
||||||
border-top: 1px solid #7f7f7f;
|
border-top: 2px solid rgb(212, 212, 212);
|
||||||
}
|
}
|
||||||
|
.nav-left-ul1-exam li{
|
||||||
.body-left-test li{
|
width: 65px;
|
||||||
width: 75px;
|
|
||||||
height: 40px;
|
height: 40px;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
|
|
@ -64,42 +46,77 @@
|
||||||
line-height: 40px;
|
line-height: 40px;
|
||||||
display: block;
|
display: block;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border-bottom: 1px solid #7f7f7f;
|
/* border-bottom: 1px solid #7f7f7f; */
|
||||||
/* background-color:aliceblue; */
|
background-color: #f5f5f5;
|
||||||
|
border-bottom: 2px solid rgb(212, 212, 212);
|
||||||
}
|
}
|
||||||
|
/* 下拉菜单 */
|
||||||
/* 右侧 */
|
.dropdown-menu1-exam {
|
||||||
.body-right-test{
|
height: auto;
|
||||||
width: 1403px;
|
|
||||||
height: 828px;
|
|
||||||
margin-top: 10px;
|
|
||||||
margin-left: 5px;
|
|
||||||
background-color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* 提交按钮 */
|
|
||||||
#submit{
|
|
||||||
position: absolute;
|
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;
|
.countBox-exam{
|
||||||
margin-left: 20px;
|
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{
|
.fixed-count-box-exam {
|
||||||
border-bottom: 2px solid rgb(111, 203, 242);
|
position: fixed;
|
||||||
width: 2000px;
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
width: auto;
|
||||||
|
z-index: 1000;
|
||||||
}
|
}
|
||||||
#comple_box td{
|
.countBox-exam div{
|
||||||
border-bottom: 2px solid rgb(111, 203, 242);
|
display: flex;
|
||||||
width: 2000px;
|
flex-wrap:wrap;
|
||||||
|
width: 200px;
|
||||||
}
|
}
|
||||||
.input_txt{
|
.countBox-exam td{
|
||||||
border: none;
|
width: 40px;
|
||||||
border-bottom: 1px solid black;
|
height: 30px;
|
||||||
font-size: 16px;
|
border: 1px solid black;
|
||||||
font-family: 'heiti';
|
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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,112 @@
|
||||||
import './Exam.css'
|
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 { 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 axios from 'axios';
|
||||||
import { useEffect, useState } from 'react';
|
|
||||||
|
|
||||||
// 首页 课程班级
|
function Exam() {
|
||||||
function Exam(){
|
|
||||||
return(
|
|
||||||
<div></div>
|
//倒计时
|
||||||
|
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;
|
||||||
|
|
@ -23,8 +23,8 @@ import ClassID from '../TeacherPages/classlistpages/classId';
|
||||||
import ManageTest from '../TeacherPages/TestManage/ManageTest';
|
import ManageTest from '../TeacherPages/TestManage/ManageTest';
|
||||||
import SendTest from '../TeacherPages/TestManage/SendTest';
|
import SendTest from '../TeacherPages/TestManage/SendTest';
|
||||||
import Marking from '../TeacherPages/MarkingPages/Marking';
|
import Marking from '../TeacherPages/MarkingPages/Marking';
|
||||||
import SendTrain from '../TeacherPages/Trainmanage/SendTrain'
|
import SendTrain from '../TeacherPages/TrainManage/SendTrain'
|
||||||
import TrainManage from '../TeacherPages/Trainmanage/Trainmanage'
|
import TrainManage from '../TeacherPages/TrainManage/Trainmanage'
|
||||||
import StudentLink from '../TeacherPages/MarkingPages/StudentLink';
|
import StudentLink from '../TeacherPages/MarkingPages/StudentLink';
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue