This commit is contained in:
nopy 2024-07-10 15:26:33 +08:00
parent a10e0d4150
commit 45cdd778d5
3 changed files with 86 additions and 32 deletions

View File

@ -92,7 +92,7 @@
z-index: 2; z-index: 2;
} }
#splitter{ #splitter{
width: 590; width: 590px;
border-bottom: 1px solid black; border-bottom: 1px solid black;
text-align: center; text-align: center;
font-size: 20px; font-size: 20px;
@ -104,7 +104,7 @@
font-size: 20px; font-size: 20px;
margin-top: -10px; margin-top: -10px;
cursor: pointer; cursor: pointer;
color: rgb(68, 125, 106); color: rgb(154, 131, 66);
} }
#detailed span{ #detailed span{
text-align: center; text-align: center;

View File

@ -69,7 +69,7 @@
} }
.train-list-trainmanage li::before { .train-list-trainmanage li::before {
content: "▶"; content: "▶";
color: rgb(132, 213, 209); color: #84d5d1;
padding-right: 20px; padding-right: 20px;
line-height: 65px; line-height: 65px;
padding-left: 15px; padding-left: 15px;
@ -77,9 +77,7 @@
display: inline-block; display: inline-block;
} }
/* 按钮 */
.sendtestpage{ .sendtestpage{
padding: 10px 30px; padding: 10px 30px;
font-size: 20px; font-size: 20px;
@ -113,17 +111,60 @@
font-size: 14px; font-size: 14px;
margin-left: 52px; margin-left: 52px;
} }
/* 弹窗 */
.TrainBox{ .TrainBox{
width: 1000px; width: 650px;
height: 500px; height: 400px;
background-color: aqua; margin-left: 350px;
margin-top: 180px;
position: absolute;
z-index: 2;
border: 1px solid #ceedf5;
background-color: #d4f6f6;
} }
.TrainBox table{ .TrainBox table{
margin-top: 200px; margin-top: 60px;
margin-left: 400px; margin-left: -2px;
width: 500px; width: 650px;
text-align: center;
border: 1px solid black;
} }
.TrainBox th{ .TrainBox th{
font-size: 18px;
padding: 10px 20px 0 55px;
}
.xx{
padding: 20px 0;
}
.TrainBox td{
font-size: 18px;
padding: 10px 0;
}
.close-icon{
width: 30px;
height: 25px;
background-color: #a0d4e0;
border: none;
position: absolute;
left: 620px;
top: -20px;
cursor: pointer;
}
.close-icon:hover{
background-color: #c4e6ed;
}
.splitter1{
width: 650px;
border-bottom: 1px solid black;
text-align: center;
font-size: 20px;
padding-bottom: 10px;
}
#detailed_box_tr1{
width: 650px;
text-align: center;
}
.box-blue{
margin-top: 15px;
} }

View File

@ -8,7 +8,7 @@ function TrainManage(){
const teacher_ID=localStorage.getItem('islogin') const teacher_ID=localStorage.getItem('islogin')
const [isTrue,setisTrue]=useState(false) const [isTrue,setisTrue]=useState(false)
const [Data,setData]=useState([]) const [Data,setData]=useState([])
const [showModal, setShowModal] = useState(true); const [showModal, setShowModal] = useState(false);
const [selectedTrain, setSelectedTrain] = useState(null); const [selectedTrain, setSelectedTrain] = useState(null);
const [testID,settestID]=useState() const [testID,settestID]=useState()
const [TrainData,setTrainData]=useState() const [TrainData,setTrainData]=useState()
@ -50,8 +50,12 @@ function TrainManage(){
const Click=(testID,train)=>{ const Click=(testID,train)=>{
settestID(testID) settestID(testID)
setSelectedTrain(train) setSelectedTrain(train)
setShowModal(true); //
} }
const closeModal = () => {
setShowModal(false); //
};
return( return(
<div className='body-trainmanage'> <div className='body-trainmanage'>
@ -70,31 +74,40 @@ function TrainManage(){
<Link to='/teacher/trainmanage/TrainPods' className='ManagePods' >管理实训</Link> <Link to='/teacher/trainmanage/TrainPods' className='ManagePods' >管理实训</Link>
<Link to='/teacher/SendTrain' className='sendtestpage'>发布实训</Link> <Link to='/teacher/SendTrain' className='sendtestpage'>发布实训</Link>
</div>} </div>}
{showModal && (
<div className='TrainBox'> <div className='TrainBox'>
<p className='splitter1'>实训ID{testID}<span className='close-icon' onClick={closeModal}>X</span></p>
<table> <table>
<thead> <thead style={{display:'flex'}}>
<tr> <tr>
<th>姓名</th> <th style={{ flex: 1 }}>姓名</th>
<th>ID</th> <th style={{ flex: 1 }}>ID</th>
<th>基础成绩</th> <th style={{ flex: 1 }}>基础成绩</th>
<th>实训成绩</th> <th style={{ flex: 1 }}>实训成绩</th>
<th>总成绩</th> <th style={{ flex: 1 }}>总成绩</th>
</tr> </tr>
<p className='xx'>---------------------------------------------------------------------------</p>
</thead> </thead>
{TrainData&&<tbody> {TrainData&&<tbody>
{Object.keys(TrainData).map((key)=>( <div className='box-blue'>
<tr key={key}> {Object.keys(TrainData).map((key,index)=>(
<td>{key}</td> <tr style={{
<td>{TrainData[key][0]}</td> display: 'flex',
<td>{TrainData[key][4]}</td> backgroundColor: index % 2 === 0 ? '#d4f6f6':'#fdecf5' //
<td>{TrainData[key][5]}</td> }}
<td>{parseInt(TrainData[key][4])+parseInt(TrainData[key][5])}</td> id='detailed_box_tr1'>
<td style={{ flex: 1 }}>{key}</td>
<td style={{ flex: 1 }}>{TrainData[key][0]}</td>
<td style={{ flex: 1 }}>{TrainData[key][4]}</td>
<td style={{ flex: 1 }}>{TrainData[key][5]}</td>
<td style={{ flex: 1 }}>{parseInt(TrainData[key][4])+parseInt(TrainData[key][5])}</td>
</tr> </tr>
))} ))}
</div>
</tbody>} </tbody>}
</table> </table>
</div> </div>
)}
</div> </div>
) )
} }