This commit is contained in:
nopy 2024-07-08 00:42:32 +08:00
parent 8d29d0eb44
commit 2b77b063dc
5 changed files with 222 additions and 104 deletions

View File

@ -1,24 +1,31 @@
.body-right-studentlink{ .body-right-studentlink{
width: 1420px; width: 1400px;
height: 830px; height: 805px;
position: absolute; position: absolute;
top: 72px; top: 72px;
left: 220px; left: 220px;
border-radius: 10px; border-radius: 10px;
float: right; float: right;
background-color: #f7f8fa; background-color: #f7f8fa;
padding: 10px;
} }
.link-box{ .link-box{
margin-top: 30px; height: 500px;
/* border: 5px double #aee1e3; */
box-shadow:
inset 0 0 0 2px #aee1e3, /* 外边框颜色 */
inset 0 0 0 6px #aee1e3;
} }
.title-link{ .title-link{
font-size: 18px; font-size: 18px;
line-height: 60px;
background-color: #aee1e3;
} }
.link-table{ .link-table{
position: relative; position: relative;
} }
.link-table td{ .link-table td{
padding: 0 26.2px; padding: 0 24px;
font-size: 17px; font-size: 17px;
border-bottom: 1px solid #8a9991; border-bottom: 1px solid #8a9991;
line-height: 40px; line-height: 40px;
@ -38,10 +45,9 @@
width: 140px; width: 140px;
height: 45px; height: 45px;
font-size: 20px; font-size: 20px;
/* background-color: rgb(187, 235, 219); */ background-image: linear-gradient(#d7fffa,#aee1e3);
background-image: linear-gradient(#bbf5e2,#a4d1d3);
border-radius: 20px; border-radius: 20px;
border: none; border: none;
margin-left: 1180px; margin-left: 1200px;
margin-top: 700px; margin-top: 20px;
} }

View File

@ -13,4 +13,59 @@
width: 1200px; width: 1200px;
height: 300px; height: 300px;
background-color: aqua; background-color: aqua;
}
.select-box2{
font-size: 18px;
margin-left: 50px;
margin-top: 20px;
padding-bottom: 20px;
}
.select-box2 select{
width: 80px;
height: 28px;
margin: 0 10px;
}
.title-link1{
font-size: 18px;
line-height: 60px;
background-color: #aee1e3;
}
.title-link1 th{
padding: 0 65px;
}
.question-box{
text-align: center;
line-height: 50px;
}
.question-box td{
border-bottom: 1px solid #8a9991;
}
.question-btn1{
width: 100px;
height: 40px;
background-color: #c8e1e2;
font-size: 16px;
border: none;
position: absolute;
left: 1140px;
top: 600px;
}
.question-btn2{
width: 100px;
height: 40px;
background-color: #c8e1e2;
font-size: 16px;
border: none;
position: absolute;
left: 1270px;
top: 600px;
}
.smaller-box{
margin: 0 300px;
height: 400px;
box-shadow:
inset 0 0 0 2px #aee1e3, /* 外边框颜色 */
inset 0 0 0 6px #aee1e3;
} }

View File

@ -170,59 +170,74 @@ function Questionmange(){
return ( return (
<div className="body-right-question"> <div className="body-right-question">
{!append&&<div> {!append&&<div>
<div> <div className='select-box2'>
<span>题目类型</span> <span>题目类型</span>
<select onChange={Click1}> <select onChange={Click1}>
<option value="选择题">选择题</option> <option value="选择题">选择题</option>
<option value='填空题'>填空题</option> <option value='填空题'>填空题</option>
<option value='判断题'>判断题</option> <option value='判断题'>判断题</option>
</select>
<span>
章节选择
<select onChange={Click2}>
<option value="第一章">第一章</option>
<option value='第二章'>第二章</option>
</select> </select>
</span> <span>
</div> 章节选择
<select onChange={Click2}>
<div className='ku'> <option value="第一章">第一章</option>
<option value='第二章'>第二章</option>
</select>
</span>
</div>
{type==='选择题'&&data&&<table> {type==='选择题'&&data&&<table>
<tr> <div className='link-box'>
<th>题目ID</th><th>题目</th><th>选项A</th><th>选项B</th><th>选项C</th><th>选项D</th><th>正确选项</th>{isTrue&&<th style={{color:'red'}}>选择要删除的题目</th>} <tr className='title-link1'>
</tr> <th>题目ID</th><th>题目</th><th>选项A</th><th>选项B</th><th>选项C</th><th>选项D</th><th>正确选项</th>{isTrue&&<th style={{color:'red'}}>选择要删除的题目</th>}
{Object.keys(data).map((key)=>( </tr>
<tr key={key}> {Object.keys(data).map((key)=>(
<td>{data[key][7]}</td><td>{data[key][1]}</td><td>{data[key][2]}</td><td>{data[key][3]}</td><td>{data[key][4]}</td><td>{data[key][5]}</td><td>{data[key][6]}</td>{isTrue&&<td><input type="checkbox" onChange={(e) => handChoiceChange(e, data[key][7])} /></td>} <tr key={key} className='question-box'>
</tr> <td>{data[key][7]}</td>
))} <td>{data[key][1]}</td>
<td>{data[key][2]}</td>
<td>{data[key][3]}</td>
<td>{data[key][4]}</td>
<td>{data[key][5]}</td>
<td>{data[key][6]}</td>
{isTrue&&<td><input type="checkbox" onChange={(e) => handChoiceChange(e, data[key][7])} /></td>}
</tr>
))}
</div>
</table>} </table>}
{type==='填空题'&&data&&<table> {type==='填空题'&&data&&<table>
<tr> <div className='smaller-box'>
<th>题目ID</th><th>问题</th><th>答案</th>{isTrue&&<th style={{color:'red'}}>选择要删除的题目</th>} <tr className='title-link1'>
</tr> <th>题目ID</th>
{Object.keys(data).map((key)=>( <th>问题</th>
<tr key={key}> <th>答案</th>
<td>{data[key][3]}</td><td>{data[key][1]}</td><td>{data[key][2]}</td>{isTrue&&<td><input type="checkbox" onChange={(e) => handCompleChange(e, data[key][3])} /></td>} {isTrue&&<th style={{color:'red'}}>选择要删除的题目</th>}
</tr> </tr>
))} {Object.keys(data).map((key)=>(
<tr key={key} className='question-box'>
<td>{data[key][3]}</td><td>{data[key][1]}</td><td>{data[key][2]}</td>{isTrue&&<td><input type="checkbox" onChange={(e) => handCompleChange(e, data[key][3])} /></td>}
</tr>
))}
</div>
</table>} </table>}
{type==='判断题'&&data&&<table> {type==='判断题'&&data&&<table>
<tr> <div className='smaller-box'>
<th>题目ID</th><th>题目</th><th>答案</th>{isTrue&&<th style={{color:'red'}}>选择要删除的题目</th>} <tr className='title-link1'>
</tr> <th>题目ID</th>
{Object.keys(data).map((key)=>( <th>题目</th>
<tr key={key}> <th>答案</th>{isTrue&&<th style={{color:'red'}}>选择要删除的题目</th>}
<td>{data[key][3]}</td><td>{data[key][1]}</td><td>{data[key][2]}</td>{isTrue&&<td><input type="checkbox" onChange={(e) => handJudgeChange(e, data[key][3])} /></td>} </tr>
</tr> {Object.keys(data).map((key)=>(
))} <tr key={key} className='question-box'>
<td>{data[key][3]}</td><td>{data[key][1]}</td><td>{data[key][2]}</td>{isTrue&&<td><input type="checkbox" onChange={(e) => handJudgeChange(e, data[key][3])} /></td>}
</tr>
))}
</div>
</table>} </table>}
</div> {!isTrue&&<button onClick={appendClick} className='question-btn1'>添加题目</button>}
{!isTrue&&<button onClick={appendClick}>添加题目</button>}{!isTrue&&<button onClick={del1}>删除</button>} {!isTrue&&<button onClick={del1} className='question-btn2'>删除</button>}
{isTrue&&<button onClick={del2}>确定</button>}{isTrue&&<button onClick={cancellation1}>取消</button>} {isTrue&&<button onClick={del2}>确定</button>}
</div>} {isTrue&&<button onClick={cancellation1}>取消</button>}
</div>}
{append&&<div className='appendBox'> {append&&<div className='appendBox'>
<span>请选择题目类型</span> <span>请选择题目类型</span>
<select onChange={appendClick1}> <select onChange={appendClick1}>

View File

@ -9,29 +9,61 @@
background-color: #f7f8fa; background-color: #f7f8fa;
} }
.body-right-Pods-table{ .body-right-Pods-table{
margin-left: 20px;
text-align: center; text-align: center;
margin-top: 10px; margin-top: 10px;
} }
.body-right-Pods-table th{ .body-right-Pods-table th{
width: 100px; width: 100px;
} padding: 0 80px;
.body-right-Pods-table td{
text-align: center;
}
span{
all: unset;
}
.SrcBox{
border: 1px solid black;
}
.SrcBox th{
border-bottom: 1px solid black;
width: 220px;
}
.SrcBox td{
text-align: center;
} }
.thd{ .thd{
font-weight: bold; font-weight: bold;
} }
.massage-box-link{
position: relative;
}
.massage-box-link td{
padding: 0 24px;
font-size: 17px;
border-bottom: 1px solid #8a9991;
line-height: 40px;
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
}
.massage-box-link button{
width: 100px;
height: 30px;
background-color: rgb(198, 226, 223);
font-size: 16px;
border: none;
}
.spanBox{
font-size: 20px;
font-weight: 550;
padding: 10px;
}
.SrcBox{
border: 1px solid black;
margin-left: 150px;
margin-top: 50px;
}
.SrcBox th{
padding:10px 60px;
border-bottom: 1px solid black;
width: 220px;
}
.SrcBox td{
padding: 10px 0;
text-align: center;
}
.srcbtn{
width: 100px;
height: 40px;
font-size: 18px;
position: absolute;
left: 480px;
top: 200px;
}

View File

@ -50,40 +50,50 @@ function TrainPods(){
return( return(
<div className='body-right-Pods'> <div className='body-right-Pods'>
{isTrue&&<table className='body-right-Pods-table'> {isTrue&&
<thead> <div className='link-box'>
<tr> <table className='body-right-Pods-table'>
<th>学号</th><th>实训类型</th><th>实训ID</th><th>IP</th><th>实训链接</th><span className='thd'>操作</span> <thead>
</tr> <tr className='title-link'>
</thead> <th>学号</th>
{Pods&&<tbody> <th>实训类型</th>
{Object.keys(Pods['list']).map((key,index)=>( <th>实训ID</th>
index>1&& <th>IP</th>
<tr key={key}> <th>实训链接</th>
<td>{Pods['list'][key]['name'].substring(1, 9)}</td> <th className='thd'>操作</th>
<td>{Pods['list'][key]['name'].substring(0,1)==='n'? '终端实训':'网页实训'}</td> </tr>
<td>{Pods['list'][key]['name'].substring(10)}</td> </thead>
<td>{Pods['list'][key]['ip']}</td> {Pods&&<tbody>
<td><button onClick={()=>FindSrc(Pods['list'][key]['name'].substring(1, 9),Pods['list'][key]['name'].substring(10))}>查看链接</button></td> {Object.keys(Pods['list']).map((key,index)=>(
<td><button onClick={()=>handleDelete(Pods['list'][key]['name'])}>删除</button></td> index>1&&
</tr> <tr key={key} className='massage-box-link'>
))} <td>{Pods['list'][key]['name'].substring(1, 9)}</td>
</tbody>} <td>{Pods['list'][key]['name'].substring(0,1)==='n'? '终端实训':'网页实训'}</td>
</table>} <td>{Pods['list'][key]['name'].substring(10)}</td>
{!isTrue&& <table> <td>{Pods['list'][key]['ip']}</td>
<span className='spanBox'>此学生的实训地址为</span> <td><button onClick={()=>FindSrc(Pods['list'][key]['name'].substring(1, 9),Pods['list'][key]['name'].substring(10))}>查看链接</button></td>
<div className='SrcBox'> <td><button onClick={()=>handleDelete(Pods['list'][key]['name'])}>删除</button></td>
<tr> </tr>
<th>LINK</th><th>LINK2</th><th>LINK3</th> ))}
</tr> </tbody>}
{Object.keys(SrcData).map((key)=>( </table>
<tr key={key}> </div>}
<td>{SrcData[0][0]}</td><td>{SrcData[0][1]}</td><td>{SrcData[0][2]}</td> {!isTrue&&
<table>
<span className='spanBox'>此学生的实训地址为</span>
<div className='SrcBox'>
<tr>
<th>LINK</th><th>LINK2</th><th>LINK3</th>
</tr> </tr>
))} {Object.keys(SrcData).map((key)=>(
</div> <tr key={key}>
<button onClick={()=>setisTrue(!isTrue)} style={{marginLeft:'600px'}}>返回</button> <td>{SrcData[0][0]}</td><td>{SrcData[0][1]}</td><td>{SrcData[0][2]}</td>
</table>} </tr>
))}
</div>
<button onClick={()=>setisTrue(!isTrue)} style={{marginLeft:'600px'}} className='srcbtn'>返回</button>
</table>}
</div> </div>
) )
} }