Merge branch 'master' of https://gitea.xn--7p0a.site/2312072104/dm
This commit is contained in:
commit
c3be58098d
|
|
@ -10,44 +10,50 @@
|
|||
background-color: #f7f8fa;
|
||||
}
|
||||
#view_history{
|
||||
margin-left: 100px;
|
||||
width: 1200px;
|
||||
height: 350px;
|
||||
background-color: aqua;
|
||||
margin-top: 100px;
|
||||
width: 1100px;
|
||||
height: 520px;
|
||||
background-color: rgb(175, 235, 217);
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
left: 125px;
|
||||
padding-left: 60px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
#view_history_nav{
|
||||
border-bottom: 1px solid black;
|
||||
width: 850px;
|
||||
width: 935px;
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
.view_history_content{
|
||||
width: 850px;
|
||||
text-align: center;
|
||||
}
|
||||
#class_portrait{
|
||||
|
||||
#class_list{
|
||||
position: absolute;
|
||||
width: 330px;
|
||||
height: 300px;
|
||||
margin-left: 860px;
|
||||
margin-top: 10px;
|
||||
background-color: rgb(112, 80, 227);
|
||||
}
|
||||
#class_list select{
|
||||
width: 100px;
|
||||
height:40px;
|
||||
font-size: 20px;
|
||||
position: absolute;
|
||||
left: 970px;
|
||||
top: -30px;
|
||||
border: 3px solid #f6fffd;
|
||||
}
|
||||
|
||||
.view_history_content{
|
||||
width: 940px;
|
||||
font-size: 17px;
|
||||
padding: 5px 0;
|
||||
line-height: 35px;
|
||||
text-align: center;
|
||||
}
|
||||
#view_history_box{
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
height: 550px;
|
||||
width: 850px;
|
||||
background-color: antiquewhite;
|
||||
}
|
||||
#class_list{
|
||||
position: absolute;
|
||||
margin-left: 975px;
|
||||
margin-top: -20px;
|
||||
}
|
||||
#class_list select{
|
||||
font-size: 20px;
|
||||
border: none;
|
||||
height: 450px;
|
||||
width: 940px;
|
||||
/* background-color: antiquewhite; */
|
||||
background-color: #f6fffc;
|
||||
}
|
||||
|
||||
#body_bottom{
|
||||
|
|
@ -58,18 +64,14 @@
|
|||
margin-top: 20px;
|
||||
}
|
||||
#sendtest_btn{
|
||||
font-size: 30px;
|
||||
margin-left: 30px;
|
||||
height: 50px;
|
||||
width: 300px;
|
||||
font-size: 25px;
|
||||
margin-left: 800px;
|
||||
margin-top: 100px;
|
||||
|
||||
}
|
||||
#body_bottom_right{
|
||||
width: 350px;
|
||||
height: 220px;
|
||||
background-color: darkolivegreen;
|
||||
position: absolute;
|
||||
margin-left: 850px;
|
||||
margin-top:-220px;
|
||||
border: none;
|
||||
background-color: rgb(249, 236, 204);
|
||||
border: 1px solid #e8caa9;
|
||||
}
|
||||
#view_history_table td{
|
||||
border-bottom: 1px solid black;
|
||||
|
|
@ -77,6 +79,8 @@
|
|||
#view_history_table tr{
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 弹窗 */
|
||||
#detailed{
|
||||
margin-left: 390px;
|
||||
margin-top: 180px;
|
||||
|
|
@ -84,13 +88,15 @@
|
|||
height: 400px;
|
||||
border: 1px solid black;
|
||||
position: absolute;
|
||||
background-color: rgb(175, 25, 234);
|
||||
background-color: #fef9dd;
|
||||
z-index: 2;
|
||||
}
|
||||
#splitter{
|
||||
width: 590;
|
||||
border-bottom: 1px solid black;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
#return{
|
||||
position: absolute;
|
||||
|
|
@ -98,9 +104,12 @@
|
|||
font-size: 20px;
|
||||
margin-top: -10px;
|
||||
cursor: pointer;
|
||||
color: rgb(68, 125, 106);
|
||||
}
|
||||
#detailed span{
|
||||
text-align: center;
|
||||
line-height: 5px;
|
||||
padding-top: 5px;
|
||||
}
|
||||
#detailed_box_tr{
|
||||
width: 600px;
|
||||
|
|
@ -108,9 +117,10 @@
|
|||
}
|
||||
#detailed_box{
|
||||
height: 270px;
|
||||
width: 600px;
|
||||
width: 590px;
|
||||
line-height: 30px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
margin-top: -10px;
|
||||
margin-left: -3px;
|
||||
margin-top: -25px;
|
||||
/* margin-left: px; */
|
||||
}
|
||||
|
|
@ -105,7 +105,7 @@ function TeacherPage() {
|
|||
|
||||
return (
|
||||
<div className='body-right-manage'>
|
||||
{/* 详细信息 */}
|
||||
{/* 详细信息（弹窗） */}
|
||||
{isDetailedBoxVisible && <div id='detailed'>
|
||||
<p id='splitter'>试卷ID{testID}<span id='return' onClick={return_detailed}>X</span></p>
|
||||
<p style={{display:'flex'}}>
|
||||
|
|
@ -116,11 +116,14 @@ function TeacherPage() {
|
|||
</p>
|
||||
<div>
|
||||
<p>--------------------------------------------------------------------------------------</p>
|
||||
{detaileddata&&<table>
|
||||
<tbody>
|
||||
{detaileddata&&<tbody>
|
||||
<div id='detailed_box'>
|
||||
{Object.keys(detaileddata).map((key)=>(
|
||||
<tr style={{display:'flex'}} id='detailed_box_tr'>
|
||||
{Object.keys(detaileddata).map((key, index)=>(
|
||||
<tr style={{
|
||||
display: 'flex',
|
||||
backgroundColor: index % 2 === 0 ? '#fef9dd':'#fdf2b3' // 偶数行一个颜色，奇数行另一个颜色
|
||||
}}
|
||||
id='detailed_box_tr'>
|
||||
<td style={{ flex: 1 }}>{detaileddata[key][6]}</td>
|
||||
<td style={{ flex: 1 }}>{detaileddata[key][5] ? detaileddata[key][5] : "未完成"}</td>
|
||||
<td style={{ flex: 1 }}>{detaileddata[key][5] ? `${getRandomNumber()}%` : "未完成"}</td>
|
||||
|
|
@ -128,8 +131,7 @@ function TeacherPage() {
|
|||
</tr>
|
||||
))}
|
||||
</div>
|
||||
</tbody>
|
||||
</table>}
|
||||
</tbody>}
|
||||
</div>
|
||||
</div>}
|
||||
{/* 总体信息 */}
|
||||
|
|
@ -151,11 +153,6 @@ function TeacherPage() {
|
|||
<option key={key} value={key}>{key}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div id='class_portrait'>
|
||||
{/* 班级画像 */}
|
||||
|
||||
|
||||
</div>
|
||||
<div id='view_history_box'>
|
||||
{ defaultclass &&<table id='view_history_table'>
|
||||
|
|
@ -175,11 +172,9 @@ function TeacherPage() {
|
|||
</tbody>
|
||||
</table>}
|
||||
</div>
|
||||
<div id='body_bottom_right'>
|
||||
<Link to="/teacher/sendtest"><button id='sendtest_btn'>前往发布新的考试➡</button></Link>
|
||||
</div>
|
||||
</div>
|
||||
<button onClick={click}>测试</button>
|
||||
{/* <button onClick={click}>测试</button> */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,29 +18,9 @@
|
|||
margin-bottom: 0px;
|
||||
}
|
||||
/* 选择题 */
|
||||
.Trainbox_xz{
|
||||
.Testbox_xz{
|
||||
background-color: #fff;
|
||||
}
|
||||
.chapter{
|
||||
color: #5cc1b9;
|
||||
font-size: 18px;
|
||||
font-weight: 550;
|
||||
float: right;
|
||||
padding-right: 10px;
|
||||
padding-top: 5px;
|
||||
}
|
||||
.questiontitle_xz{
|
||||
padding-top: 15px;
|
||||
padding-left: 10px;
|
||||
font-size: 17px;
|
||||
}
|
||||
.Test_answer_box{
|
||||
padding-top: 5px;
|
||||
padding-left: 27px;
|
||||
}
|
||||
.Test_answer_box tr{
|
||||
line-height: 40px;
|
||||
}
|
||||
.check_box_xz{
|
||||
width: 100px;
|
||||
height: 30px;
|
||||
|
|
@ -204,6 +184,7 @@
|
|||
text-align: center;
|
||||
margin-left: 7px;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.TestSelectTime p{
|
||||
padding-top: 25px;
|
||||
|
|
|
|||
|
|
@ -128,22 +128,27 @@ function SendTest(){
|
|||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className='SendTest_body'>
|
||||
<div className='SendTest_body_right'>
|
||||
<p>题目选择</p>
|
||||
{question&&<table>
|
||||
<span className='title'>选择题</span>
|
||||
{Object.keys(question['choice']).map((key)=>(
|
||||
<tbody>
|
||||
{Object.keys(question['choice']).map((key,index)=>(
|
||||
<tr key={key}>
|
||||
<div>{question['choice'][key][8]}</div>
|
||||
<td className='Testbox_xz'>
|
||||
<div className='chapter'>{question['choice'][key][8]}</div>
|
||||
<tr>
|
||||
<td className='questiontitle'>问.{question['choice'][key][1]}</td>
|
||||
<td className='Train_answer_box'>{index+1}.{question['choice'][key][1]}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<div className='Train_answer_box'>
|
||||
<tr>A:{question['choice'][key][2]}</tr>
|
||||
<tr>B:{question['choice'][key][3]}</tr>
|
||||
<tr>C:{question['choice'][key][4]}</tr>
|
||||
<tr>D:{question['choice'][key][5]}</tr>
|
||||
<tr>A.{question['choice'][key][2]}</tr>
|
||||
<tr>B.{question['choice'][key][3]}</tr>
|
||||
<tr>C.{question['choice'][key][4]}</tr>
|
||||
<tr>D.{question['choice'][key][5]}</tr>
|
||||
</div>
|
||||
</tr>
|
||||
<div className='check_box_xz'>
|
||||
<input type="checkbox" className='check_box' onClick={(event)=>{
|
||||
if (event.target.checked) {
|
||||
//在选择题目集中添加选择题的ID
|
||||
|
|
@ -156,17 +161,21 @@ function SendTest(){
|
|||
items.filter((item)=>item!==question['choice'][key][7])
|
||||
)
|
||||
}
|
||||
}} /><span>是否选择</span>
|
||||
}} />
|
||||
<span>是否选择</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
<span className='title'>填空题</span>
|
||||
{Object.keys(question['completion']).map((key)=>(
|
||||
{Object.keys(question['completion']).map((key,index)=>(
|
||||
<tr key={key}>
|
||||
<td className='Testbox'>
|
||||
{question['completion'][key][4]}
|
||||
<td className='questiontitle'>
|
||||
问.{question['completion'][key][1]}
|
||||
<td className='Testbox_tk'>
|
||||
<div className='chapter_tk'>{question['completion'][key][4]}</div>
|
||||
<td className='questiontitle_tk'>
|
||||
{index+1}.{question['completion'][key][1]}
|
||||
</td>
|
||||
<div className='check_box_tk'>
|
||||
<input type="checkbox" className='check_box' onClick={(event)=>{
|
||||
if (event.target.checked) {
|
||||
//在选择题目集中添加选择题的ID
|
||||
|
|
@ -179,16 +188,19 @@ function SendTest(){
|
|||
items.filter((item)=>item!==question['completion'][key][3])
|
||||
)
|
||||
}
|
||||
}} /><span>是否选择</span>
|
||||
}} />
|
||||
<span>是否选择</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
<span className='title'>判断题</span>
|
||||
{Object.keys(question['judge']).map((key)=>(
|
||||
{Object.keys(question['judge']).map((key,index)=>(
|
||||
<tr key={key}>
|
||||
<td className='Testbox'>
|
||||
{question['judge'][key][4]}
|
||||
<td className='judgetitletd'>问:{question['judge'][key][1]}</td>
|
||||
<td className='Testbox_pd'>
|
||||
<div className='chapter_pd'>{question['judge'][key][4]}</div>
|
||||
<td className='judgetitle'>{index+1}.{question['judge'][key][1]}</td>
|
||||
<div className='check_box_pd'>
|
||||
<input type="checkbox" className='check_box' onClick={(event)=>{
|
||||
if (event.target.checked) {
|
||||
setJudge(items=>([
|
||||
|
|
@ -200,21 +212,22 @@ function SendTest(){
|
|||
items.filter((item)=>item!==question['judge'][key][3])
|
||||
)
|
||||
}
|
||||
}} /><span>是否选择</span>
|
||||
}} />
|
||||
<span>是否选择</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>}
|
||||
|
||||
|
||||
<button onClick={SendTrainBtn} id='SendTrainBtn'>发布按钮</button>
|
||||
</div>
|
||||
{/* 右边的内容 */}
|
||||
<div className='right_right'>
|
||||
<div className='OptionBox'>
|
||||
<div className='TrainSelectClass'>
|
||||
<p className='TrainSelectClassP'>请选择发布班级</p>
|
||||
{ ClassData &&<ul id='Train_class_ul'>
|
||||
<div className='TestSelectClass'>
|
||||
<p className='TestSelectClassP'>请选择发布班级</p>
|
||||
{ ClassData &&<ul id='Test_class_ul'>
|
||||
{Object.keys(ClassData).map((key)=>(
|
||||
<li key={key}>
|
||||
<div className={getClassNames(key)} onClick={() => click_div(key)}>
|
||||
|
|
@ -224,10 +237,10 @@ function SendTest(){
|
|||
))}
|
||||
</ul>}
|
||||
</div>
|
||||
<div className='TrainSelectTime'>
|
||||
<button onClick={()=>{
|
||||
<div className='TestSelectTime'>
|
||||
{/* <button onClick={()=>{
|
||||
console.log(Choice);
|
||||
}}></button>
|
||||
}}></button> */}
|
||||
<p>请填写考试时间</p>
|
||||
<select name="" id="" alue={HourValue} onChange={gethourvalue}>
|
||||
{Object.keys(hour_list).map((num)=>(
|
||||
|
|
|
|||
|
|
@ -118,10 +118,10 @@
|
|||
padding-top: 5px;
|
||||
}
|
||||
.questiontitle_tk{
|
||||
padding-top: 15px;
|
||||
padding-top: 18px;
|
||||
padding-left: 10px;
|
||||
font-size: 16px;
|
||||
line-height: 25px;
|
||||
line-height: 20px;
|
||||
}
|
||||
.check_box_tk{
|
||||
width: 100px;
|
||||
|
|
@ -153,10 +153,13 @@
|
|||
font-weight: 550;
|
||||
float: right;
|
||||
padding-right: 10px;
|
||||
margin-top: -10px;
|
||||
padding-top: 5px;
|
||||
}
|
||||
.judgetitle{
|
||||
padding-top: 8px;
|
||||
padding-left: 10px;
|
||||
font-size: 16px;
|
||||
line-height: 10px;
|
||||
}
|
||||
.check_box_pd{
|
||||
width: 100px;
|
||||
|
|
@ -180,43 +183,64 @@
|
|||
/* 以下为为实训 */
|
||||
.Train_div{
|
||||
width: 100%-1px;
|
||||
height:700px;
|
||||
border: 1px solid black;
|
||||
height:690px;
|
||||
border-top: 1px solid black;
|
||||
border-right: 1px solid black;
|
||||
border-bottom: 1px solid black;
|
||||
border-top: none;
|
||||
}
|
||||
#Train_1{
|
||||
width: 100%;
|
||||
height: 350px;
|
||||
height: 280px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.Train_1_left{
|
||||
flex: 60%;
|
||||
background-color: beige;
|
||||
background-color: rgb(250, 250, 220);
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
padding-top: 120px;
|
||||
}
|
||||
.Train_1_right{
|
||||
flex: 40%;
|
||||
background-color: rgb(111, 200, 241);
|
||||
/* background-color: rgb(143, 230, 250); */
|
||||
background-color: #befdee;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.Train_1_right span{
|
||||
padding-bottom: 130px;
|
||||
}
|
||||
.Train_1_right input{
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
}
|
||||
.Train_1_right p{
|
||||
font-size: 20px;
|
||||
border: none;
|
||||
padding-left: 20px;
|
||||
margin-top: -28px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
|
||||
#Train_2{
|
||||
width: 100%;
|
||||
height: 350px;
|
||||
height: 280px;
|
||||
display: flex;
|
||||
}
|
||||
.Train_2_left{
|
||||
flex: 60%;
|
||||
background-color: rgb(97, 237, 92);
|
||||
background-color: rgb(173, 246, 169);
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
padding-top: 120px;
|
||||
}
|
||||
.Train_2_right{
|
||||
flex: 40%;
|
||||
background-color: rgb(248, 127, 231);
|
||||
/* background-color: rgb(254, 175, 243); */
|
||||
background-color: #fcefcf;
|
||||
}
|
||||
.Train_1_right span{
|
||||
font-size: 20px;
|
||||
|
|
@ -236,7 +260,7 @@
|
|||
height: 40px;
|
||||
width: 130px;
|
||||
font-size: 25px;
|
||||
margin-top: 40px;
|
||||
margin-top: 60px;
|
||||
margin-bottom: 40px;
|
||||
margin-left: 900px;
|
||||
background-color: #9acec2;
|
||||
|
|
|
|||
|
|
@ -139,24 +139,9 @@ function SendTrain(){
|
|||
const [startDate, setStartDate] = useState(new Date());
|
||||
const [endDate, setEndDate] = useState(new Date());
|
||||
const [duration, setDuration] = useState(null);
|
||||
const [scrollPosition, setScrollPosition] = useState(0);
|
||||
// 处理开始时间选择
|
||||
const handleStartDateChange = (date) => {
|
||||
setStartDate(date);
|
||||
// 计算时长并更新状态
|
||||
if (startDate && date) {
|
||||
const diffInMilliseconds = date - startDate;
|
||||
const diffInDays = Math.floor(diffInMilliseconds / (1000 * 60 * 60 * 24));
|
||||
const diffInHours = Math.floor((diffInMilliseconds % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
|
||||
const diffInMinutes = Math.floor((diffInMilliseconds % (1000 * 60 * 60)) / (1000 * 60));
|
||||
let durationText = '';
|
||||
if (diffInDays > 0) durationText += `${diffInDays}天`;
|
||||
if (diffInHours > 0 || diffInDays > 0) durationText += `${diffInHours}小时`;
|
||||
durationText += `${diffInMinutes}分钟`;
|
||||
setDuration(durationText);
|
||||
} else {
|
||||
setDuration('请选择考试结束日期');
|
||||
}
|
||||
};
|
||||
// 处理结束时间选择
|
||||
const handleEndDateChange = (date) => {
|
||||
|
|
@ -204,7 +189,7 @@ function SendTrain(){
|
|||
</div>
|
||||
</tr>
|
||||
<div className='check_box_xz'>
|
||||
<input type="checkbox" onClick={(event)=>{
|
||||
<input type="checkbox" className='check_box' onClick={(event)=>{
|
||||
if (event.target.checked) {
|
||||
//在选择题目集中添加选择题的ID
|
||||
setTrainChoice(items=>([
|
||||
|
|
@ -231,7 +216,7 @@ function SendTrain(){
|
|||
{index+1}.{Trainquestion['completion'][key][1]}
|
||||
</td>
|
||||
<div className='check_box_tk'>
|
||||
<input type="checkbox" onClick={(event)=>{
|
||||
<input type="checkbox" className='check_box' onClick={(event)=>{
|
||||
if (event.target.checked) {
|
||||
//在选择题目集中添加选择题的ID
|
||||
setTrainCompletion(items=>([
|
||||
|
|
@ -256,7 +241,7 @@ function SendTrain(){
|
|||
<div className='chapter_pd'>{Trainquestion['judge'][key][4]}</div>
|
||||
<td className='judgetitle'>{index+1}.{Trainquestion['judge'][key][1]}</td>
|
||||
<div className='check_box_pd'>
|
||||
<input type="checkbox" onClick={(event)=>{
|
||||
<input type="checkbox" className='check_box' onClick={(event)=>{
|
||||
if (event.target.checked) {
|
||||
setTrainJudge(items=>([
|
||||
...items,
|
||||
|
|
@ -293,7 +278,8 @@ function SendTrain(){
|
|||
setTrain((items)=>
|
||||
items.filter((item)=>item!==event.target.value))
|
||||
}
|
||||
}}/>是否选择
|
||||
}}/>
|
||||
<p>是否选择</p>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -375,7 +361,16 @@ function SendTrain(){
|
|||
</div>
|
||||
</div>
|
||||
<p>考试总时长</p>
|
||||
{duration || '请选择考试结束日期'}
|
||||
<select name="" id="" alue={HourValue} onChange={gethourvalue}>
|
||||
{Object.keys(hour_list).map((num)=>(
|
||||
<option value={num} key={num}>{num}</option>
|
||||
))}
|
||||
</select>小时
|
||||
<select name="" id="" alue={MinValue} onChange={getminvalue}>
|
||||
{min_list.map((num)=>(
|
||||
<option value={num} key={num}>{num}</option>
|
||||
))}
|
||||
</select>分钟
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -63,24 +63,24 @@
|
|||
}
|
||||
|
||||
.sendtestpage{
|
||||
padding: 20px 30px;
|
||||
padding: 10px 30px;
|
||||
font-size: 20px;
|
||||
text-decoration: none;
|
||||
color: #000;
|
||||
position: absolute;
|
||||
bottom: 170px;
|
||||
right: 100px;
|
||||
bottom: 100px;
|
||||
right: 50px;
|
||||
background-color: rgb(186, 237, 237);
|
||||
border-radius: 20px;
|
||||
}
|
||||
.ManagePods{
|
||||
border-radius: 20px;
|
||||
position: absolute;
|
||||
padding: 20px 30px;
|
||||
padding: 10px 30px;
|
||||
text-decoration: none;
|
||||
font-size: 20px;
|
||||
color: #000;
|
||||
right: 300px;
|
||||
bottom: 170px;
|
||||
right: 220px;
|
||||
bottom: 100px;
|
||||
background-color: rgb(186, 237, 237);
|
||||
}
|
||||
|
|
@ -113,6 +113,41 @@ function TeacherPage() {
|
|||
};
|
||||
|
||||
|
||||
|
||||
const CustomTooltip = ({ active, payload }) => {
|
||||
if (active && payload && payload.length) {
|
||||
// payload[0] 包含了柱子的数据，您需要确保数据格式与此匹配
|
||||
const data = payload[0].payload; // 假设您的数据是通过 payload 传递的
|
||||
return (
|
||||
<div className="custom-tooltip" style={{ backgroundColor: '#fff', padding: '10px', border: '1px solid #ccc',width:'200px',height:'100px' }}>
|
||||
<p className="label" style={labelStyle}>{`试卷ID: ${data.name}`}</p>
|
||||
<p className="intro" style={introStyle}>{`分数: ${payload[0].value}`}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
const labelStyle = {
|
||||
margin: '0', // 段落顶部和底部外边距
|
||||
color: '#333', // 字体颜色
|
||||
fontSize: '18px', // 学生姓名的字体大小
|
||||
width:'100px',
|
||||
height:'40px',
|
||||
marginLeft:'50px',
|
||||
lineheight:'40px'
|
||||
};
|
||||
|
||||
const introStyle = {
|
||||
margin: '0', // 段落顶部和底部外边距
|
||||
color: '#333', // 字体颜色
|
||||
fontSize: '18px', // 分数的字体大小
|
||||
width:'100px',
|
||||
height:'40px',
|
||||
marginLeft:'50px',
|
||||
};
|
||||
|
||||
|
||||
return(
|
||||
<div className='body-right-classId'>
|
||||
<div id='body-right-bottom'>
|
||||
|
|
@ -156,9 +191,9 @@ function TeacherPage() {
|
|||
{studentScores.length > 0 ? (
|
||||
<BarChart width={600} height={350} data={studentScores} barSize={80} className='bar' >
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
<XAxis dataKey="name" />
|
||||
<XAxis dataKey="name" tickFormatter={(value) => `试卷ID: ${value}`} />
|
||||
<YAxis dataKey="score" />
|
||||
<Tooltip active='false'/>
|
||||
<Tooltip content={<CustomTooltip />} />
|
||||
<Bar dataKey="score" fill="#fdf0d3" />
|
||||
</BarChart>
|
||||
):(
|
||||
|
|
|
|||
|
|
@ -89,7 +89,7 @@
|
|||
height: 390px;
|
||||
position: absolute;
|
||||
top: 390px;
|
||||
left: 150px;
|
||||
left: 200px;
|
||||
background-color: #bfd1f6;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
|
@ -110,13 +110,12 @@
|
|||
}
|
||||
/* 学生详情 */
|
||||
.choice-box{
|
||||
height: 300px;
|
||||
width: 400px;
|
||||
height: 200px;
|
||||
width: 300px;
|
||||
background-color: #cddbf3;
|
||||
/* background-color: #a4cdf8; */
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
left: 720px;
|
||||
top: 80px;
|
||||
left: 730px;
|
||||
box-shadow:
|
||||
inset 0 0 0 2px #fdfdfd, /* 外边框颜色 */
|
||||
inset 0 0 0 6px #ffffff;
|
||||
|
|
@ -153,4 +152,6 @@
|
|||
}
|
||||
.studentName{
|
||||
font-size: 18px;
|
||||
padding-top: 20px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
Loading…
Reference in New Issue