This commit is contained in:
parent
a10e0d4150
commit
45cdd778d5
|
@ -92,7 +92,7 @@
|
|||
z-index: 2;
|
||||
}
|
||||
#splitter{
|
||||
width: 590;
|
||||
width: 590px;
|
||||
border-bottom: 1px solid black;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
|
@ -104,7 +104,7 @@
|
|||
font-size: 20px;
|
||||
margin-top: -10px;
|
||||
cursor: pointer;
|
||||
color: rgb(68, 125, 106);
|
||||
color: rgb(154, 131, 66);
|
||||
}
|
||||
#detailed span{
|
||||
text-align: center;
|
||||
|
|
|
@ -69,7 +69,7 @@
|
|||
}
|
||||
.train-list-trainmanage li::before {
|
||||
content: "▶";
|
||||
color: rgb(132, 213, 209);
|
||||
color: #84d5d1;
|
||||
padding-right: 20px;
|
||||
line-height: 65px;
|
||||
padding-left: 15px;
|
||||
|
@ -77,9 +77,7 @@
|
|||
display: inline-block;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* 按钮 */
|
||||
.sendtestpage{
|
||||
padding: 10px 30px;
|
||||
font-size: 20px;
|
||||
|
@ -113,17 +111,60 @@
|
|||
font-size: 14px;
|
||||
margin-left: 52px;
|
||||
}
|
||||
/* 弹窗 */
|
||||
.TrainBox{
|
||||
width: 1000px;
|
||||
height: 500px;
|
||||
background-color: aqua;
|
||||
width: 650px;
|
||||
height: 400px;
|
||||
margin-left: 350px;
|
||||
margin-top: 180px;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
border: 1px solid #ceedf5;
|
||||
background-color: #d4f6f6;
|
||||
}
|
||||
.TrainBox table{
|
||||
margin-top: 200px;
|
||||
margin-left: 400px;
|
||||
width: 500px;
|
||||
text-align: center;
|
||||
border: 1px solid black;
|
||||
margin-top: 60px;
|
||||
margin-left: -2px;
|
||||
width: 650px;
|
||||
}
|
||||
.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;
|
||||
}
|
|
@ -8,7 +8,7 @@ function TrainManage(){
|
|||
const teacher_ID=localStorage.getItem('islogin')
|
||||
const [isTrue,setisTrue]=useState(false)
|
||||
const [Data,setData]=useState([])
|
||||
const [showModal, setShowModal] = useState(true);
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
const [selectedTrain, setSelectedTrain] = useState(null);
|
||||
const [testID,settestID]=useState()
|
||||
const [TrainData,setTrainData]=useState()
|
||||
|
@ -50,8 +50,12 @@ function TrainManage(){
|
|||
const Click=(testID,train)=>{
|
||||
settestID(testID)
|
||||
setSelectedTrain(train)
|
||||
setShowModal(true); // 点击列表项时显示模态框
|
||||
}
|
||||
|
||||
const closeModal = () => {
|
||||
setShowModal(false); // 点击关闭按钮时隐藏模态框
|
||||
};
|
||||
|
||||
return(
|
||||
<div className='body-trainmanage'>
|
||||
|
@ -70,31 +74,40 @@ function TrainManage(){
|
|||
<Link to='/teacher/trainmanage/TrainPods' className='ManagePods' >管理实训</Link>
|
||||
<Link to='/teacher/SendTrain' className='sendtestpage'>发布实训</Link>
|
||||
</div>}
|
||||
<div className='TrainBox'>
|
||||
{showModal && (
|
||||
<div className='TrainBox'>
|
||||
<p className='splitter1'>实训ID:{testID}<span className='close-icon' onClick={closeModal}>X</span></p>
|
||||
<table>
|
||||
<thead>
|
||||
<thead style={{display:'flex'}}>
|
||||
<tr>
|
||||
<th>姓名</th>
|
||||
<th>ID</th>
|
||||
<th>基础成绩</th>
|
||||
<th>实训成绩</th>
|
||||
<th>总成绩</th>
|
||||
<th style={{ flex: 1 }}>姓名</th>
|
||||
<th style={{ flex: 1 }}>ID</th>
|
||||
<th style={{ flex: 1 }}>基础成绩</th>
|
||||
<th style={{ flex: 1 }}>实训成绩</th>
|
||||
<th style={{ flex: 1 }}>总成绩</th>
|
||||
</tr>
|
||||
<p className='xx'>---------------------------------------------------------------------------</p>
|
||||
</thead>
|
||||
{TrainData&&<tbody>
|
||||
{Object.keys(TrainData).map((key)=>(
|
||||
<tr key={key}>
|
||||
<td>{key}</td>
|
||||
<td>{TrainData[key][0]}</td>
|
||||
<td>{TrainData[key][4]}</td>
|
||||
<td>{TrainData[key][5]}</td>
|
||||
<td>{parseInt(TrainData[key][4])+parseInt(TrainData[key][5])}</td>
|
||||
</tr>
|
||||
))}
|
||||
<div className='box-blue'>
|
||||
{Object.keys(TrainData).map((key,index)=>(
|
||||
<tr style={{
|
||||
display: 'flex',
|
||||
backgroundColor: index % 2 === 0 ? '#d4f6f6':'#fdecf5' // 偶数行一个颜色,奇数行另一个颜色
|
||||
}}
|
||||
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>
|
||||
))}
|
||||
</div>
|
||||
</tbody>}
|
||||
</table>
|
||||
</div>
|
||||
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue