This commit is contained in:
parent
a10e0d4150
commit
45cdd778d5
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
|
@ -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>}
|
||||||
<div className='TrainBox'>
|
{showModal && (
|
||||||
|
<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'>
|
||||||
</tr>
|
<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>}
|
</tbody>}
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue