This commit is contained in:
nopy 2024-07-06 01:00:41 +08:00
parent afbf2e07af
commit 03269269c6
8 changed files with 143 additions and 85 deletions

View File

@ -45,24 +45,24 @@
} }
.test-mark p{ .test-mark p{
margin-top: 8px; margin-top: 10px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: start; align-items: start;
} }
.p-mark span{
.p-mark {
font-size: 18px; font-size: 18px;
line-height: 48px;
} }
.p-mark p{
.test-mark span { font-size: 14px;
font-size: 13px;
margin-top: -12px;
color: #525252; color: #525252;
margin-top: -10px;
} }
#TF{ #TF{
position: absolute; position: absolute;
margin-left: 1200px; margin-left: 1230px;
margin-top: -45px;
} }

View File

@ -73,15 +73,17 @@ function Marking(){
<ul> <ul>
{Object.keys(MarkData).map((key)=>( {Object.keys(MarkData).map((key)=>(
<Link style={{color:'#000',textDecoration:'none'}} to={`studentlink/Mark/${key}`}> <Link style={{color:'#000',textDecoration:'none'}} to={`studentlink/Mark/${key}`}>
<li key={key}> <li key={key}>
<img src={Test} alt="" width='35px' height='35px'/> <img src={Test} alt="" width='35px' height='35px'/>
<p> <div>
<p className='p-mark'><span>实训ID:{MarkData[key][0][10]}</span>{eval(MarkData[key][0][11])}</p> <div className='p-mark'>
<div id='TF'>{MarkData[key][0][6]>currentTime? ' ':'未开始'}</div> <span>实训{MarkData[key][0][10]}{eval(MarkData[key][0][11])}</span>
<span>{MarkData[key][0][6]}</span> <p>{MarkData[key][0][6]}</p>
</p> </div>
</li> <div id='TF'>{MarkData[key][0][6]>currentTime? ' ':'未开始'}</div>
</Link> </div>
</li>
</Link>
))} ))}
</ul> </ul>
</div>} </div>}

View File

@ -8,7 +8,44 @@
float: right; float: right;
background-color: #f7f8fa; background-color: #f7f8fa;
} }
.title-link{
position: absolute;
top: 30px;
left: -110px;
font-size: 18px;
}
.title-link th{
padding-left: 190px;
}
.link-table{
margin-top: 50px;
position: absolute;
top: 40px;
left: 25px;
}
.link-table td{
padding-left: 45px;
font-size: 17px;
border-bottom: 1px solid #8a9991;
padding-bottom: 15px;
}
.link-table input{
height: 20px;
}
.link-table tr {
vertical-align: middle; /* 垂直居中对齐 */
}
.submit{ .submit{
margin-left: 1000px; width: 140px;
margin-top: 20px; height: 45px;
font-size: 20px;
/* background-color: rgb(187, 235, 219); */
background-image: linear-gradient(#bbf5e2,#a4d1d3);
border-radius: 20px;
border: none;
margin-left: 1180px;
margin-top: 700px;
} }

View File

@ -8,7 +8,6 @@ import axios from 'axios';
function StudentLink(){ function StudentLink(){
const testID=useParams()['key'] const testID=useParams()['key']
const sumbitScore=async()=>{ const sumbitScore=async()=>{
try{ try{
const sumbitScoreSrc=await axios.post('/api/teacher/UpdateTest',{ const sumbitScoreSrc=await axios.post('/api/teacher/UpdateTest',{
@ -63,7 +62,7 @@ function StudentLink(){
<div className='body-right-studentlink'> <div className='body-right-studentlink'>
{TestLink&&<table> {TestLink&&<table>
<thead> <thead>
<tr> <tr className='title-link'>
<th>学生</th> <th>学生</th>
<th>链接1</th> <th>链接1</th>
<th>链接2</th> <th>链接2</th>
@ -74,7 +73,7 @@ function StudentLink(){
</thead> </thead>
<tbody> <tbody>
{Object.keys(TestLink).map((key)=>( {Object.keys(TestLink).map((key)=>(
<tr key={key}> <tr key={key} className='link-table'>
<td>{key}</td> <td>{key}</td>
<td><Link to={TestLink[key][6]} target="_blank">{TestLink[key][6]}</Link></td> <td><Link to={TestLink[key][6]} target="_blank">{TestLink[key][6]}</Link></td>
<td><Link to={TestLink[key][7]} target="_blank">{TestLink[key][7]}</Link></td> <td><Link to={TestLink[key][7]} target="_blank">{TestLink[key][7]}</Link></td>

View File

@ -30,7 +30,7 @@
margin-top: -28px; margin-top: -28px;
} }
.SendTrain_body_left_ul button{ .SendTrain_body_left_ul button{
background-color: rgb(247, 232, 189); background-color: #f7e8bd;
border: none; border: none;
width: 100%; width: 100%;
height: 40px; height: 40px;
@ -233,10 +233,16 @@
/* 按钮 */ /* 按钮 */
#SendTrainBtn{ #SendTrainBtn{
font-size: 32px; height: 40px;
width: 130px;
font-size: 25px;
margin-top: 40px; margin-top: 40px;
margin-bottom: 40px; margin-bottom: 40px;
margin-left: 830px; margin-left: 900px;
background-color: #9acec2;
border: none;
border-radius: 20px;
color: #fff;
} }
@ -246,31 +252,29 @@
} }
.OptionBox{ .OptionBox{
width: 90%; width: 90%;
height: 500px; height: 480px;
margin-top: 30px;
margin-left: 15px; margin-left: 15px;
border-radius: 20px; border-radius: 20px;
background-color: rgb(173, 255, 251); background-color: #bef6e9;
padding: 10px;
} }
.TrainSelectClass{ .TrainSelectClass{
width: 95%; width: 95%;
height: 200px; height: 200px;
background-color: bisque; background-color: #fffde8;
border-radius: 20px; border-radius: 20px;
margin-left: 7px; margin-left: 7px;
padding-top: 20;
} }
.TrainSelectClassP{ .TrainSelectClassP{
font-size: 20px; font-size: 20px;
margin-left: 80px; margin-left: 85px;
padding-top: 10px; padding-top: 15px;
} }
#Train_class_ul{ #Train_class_ul{
margin-left: 30px; margin-left: 40px;
} }
#Train_class_ul li{ #Train_class_ul li{
list-style-type: none; list-style-type: none;
@ -280,50 +284,54 @@
/* 普通状态下的样式 */ /* 普通状态下的样式 */
width: 120px; width: 120px;
height: 30px; height: 30px;
border: 1px solid #5086eb; border: 1px solid #72967b;
cursor: pointer; cursor: pointer;
margin-top: 10px; margin-top: 10px;
margin-left: 15px; margin-left: 15px;
text-align: center; text-align: center;
line-height: 30px;
} }
.Trainselected { .Trainselected {
/* 选中状态下的样式 */ /* 选中状态下的样式 */
background-color: rgb(148, 246, 186); background-color: rgb(181, 252, 208);
border-color: rgb(250, 200, 140); border:1px solid rgb(206, 153, 88);
} }
/* 时间选择盒子 */
.TrainSelectTime{ .TrainSelectTime{
width: 95%; width: 95%;
height: 220px; height: 220px;
background-color: beige; background-color: #fff4d5;
text-align: center; text-align: center;
margin-left: 7px; margin-left: 7px;
border-radius: 20px; border-radius: 20px;
} }
.TrainSelectTime p{ .TrainSelectTime p{
padding-top: 10px; padding-top: 25px;
} }
.TrainSelectTime p::before{ .TrainSelectTime p::before{
content: "▶"; content: "▶";
} }
.calendar-box span{ /* 日历 */
.calendar-picker span{
position: absolute; position: absolute;
top: 400px; top: 323px;
right: 185px; right: 181px;
} }
.calendar1{ .calendar1 {
width: 100px; width: 110px;
height: 20px; max-width: 300px;
position: absolute; line-height: 18px;
left: -110px; position: absolute !important; /* 相对于固定定位的 .react-datepicker-popper */
bottom: -15px;
left: -120px;
} }
.calendar2{ .calendar2 {
width: 100px; width: 110px;
height: 20px; max-width: 300px;
position: absolute; line-height: 18px;
right: -130px; position: absolute !important; /* 相对于固定定位的 .react-datepicker-popper */
} bottom: -15px; /* 根据需要调整 */
.data-num{ left: 0px; /* 根据需要调整 */
margin-top: 30px;
} }

View File

@ -138,16 +138,32 @@ function SendTrain(){
// //
const [startDate, setStartDate] = useState(new Date()); const [startDate, setStartDate] = useState(new Date());
const [endDate, setEndDate] = useState(new Date()); const [endDate, setEndDate] = useState(new Date());
const [duration, setDuration] = useState(null);
const [scrollPosition, setScrollPosition] = useState(0);
// //
const handleStartDateChange = (date) => { const handleStartDateChange = (date) => {
setStartDate(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) => { const handleEndDateChange = (date) => {
setEndDate(date); setEndDate(date);
}; };
return( return(
<div className='SendTrain_body'> <div className='SendTrain_body'>
<div className='SendTrain_body_left'> <div className='SendTrain_body_left'>
@ -320,21 +336,6 @@ function SendTrain(){
</ul>} </ul>}
</div> </div>
<div className='TrainSelectTime'> <div className='TrainSelectTime'>
<p>请填写考试总时长</p>
<select name="" id="" alue={HourValue} onChange={gethourvalue}>
{Object.keys(hour_list).map((num)=>(
<option value={num} key={num}>{num}</option>
))}
</select>小时
<button onClick={()=>{
console.log(startDate);
console.log(endDate);
}}>asd</button>
<select name="" id="" value={MinValue} onChange={getminvalue}>
{min_list.map((num)=>(
<option value={num} key={num}>{num}</option>
))}
</select>分钟
{/* 日历 */} {/* 日历 */}
<p>请填写考试开始截止日期</p> <p>请填写考试开始截止日期</p>
<div className='calendar-box'> <div className='calendar-box'>
@ -342,15 +343,23 @@ function SendTrain(){
<div className='start-date-input'> <div className='start-date-input'>
{/* 日历组件 */} {/* 日历组件 */}
<div className='calendar-picker'> <div className='calendar-picker'>
{/* 开始时间 */}
<DatePicker <DatePicker
selected={startDate} selected={startDate}
onChange={handleStartDateChange} onChange={handleStartDateChange}
dateFormat="yyyy-MM-dd HH:mm" dateFormat="yyyy-MM-dd HH:mm"
showTimeSelect showTimeSelect
timeIntervals={10} // timeIntervals={10}
timeCaption="time" timeCaption="time"
minDate={new Date()} // minDate={new Date()}
className="calendar1"
dropdownMode="scroll" //
inPortal={true} // DOM
/> />
&nbsp; {/* 空格符号 */}
<span>-</span>
&nbsp; {/* 空格符号 */}
{/* 结束时间 */}
<DatePicker <DatePicker
selected={endDate} selected={endDate}
onChange={handleEndDateChange} onChange={handleEndDateChange}
@ -359,11 +368,14 @@ function SendTrain(){
timeIntervals={10} timeIntervals={10}
timeCaption="time" timeCaption="time"
minDate={startDate || new Date()} // minDate={startDate || new Date()} //
dropdownMode="scroll" //
className='calendar2'
/> />
</div> </div>
</div> </div>
</div> </div>
<p>考试总时长</p>
{duration || '请选择考试结束日期'}
</div> </div>
</div> </div>
</div> </div>

View File

@ -18,7 +18,7 @@
height: 2px; height: 2px;
position: absolute; position: absolute;
top: 60px; top: 60px;
background-image: linear-gradient(120deg,#ffffff,rgb(223, 223, 223),#fff); background-image: linear-gradient(120deg,#ffffff,rgb(181, 181, 181),#fff);
} }
.ul1-trainmanage{ .ul1-trainmanage{
width: 650px; width: 650px;

View File

@ -92,7 +92,7 @@
top: 0px; top: 0px;
position: fixed; position: fixed;
right: 0px; right: 0px;
background-color: #fef2f2ef;; background-color: #e7f8fbf3;
padding: 0; padding: 0;
list-style: none; list-style: none;
z-index: 1; z-index: 1;
@ -137,8 +137,8 @@
font-size: 20px; font-size: 20px;
text-align: center; text-align: center;
line-height: 80px; line-height: 80px;
border-bottom: 1px solid #77a6d5; border-bottom: 1px solid #4f946a;
background-color: #fef2f2ef; background-color: #e7f8fbf3;
overflow: hidden; overflow: hidden;
} }
.close-btn-nav { .close-btn-nav {
@ -151,18 +151,18 @@
background: none; background: none;
border: none; border: none;
font-size: 18px; font-size: 18px;
color: #8b4a11; color: #257e84;
background-color: #fce5d9; background-color: #bffbdb;
/* border: 1px solid #666; */ /* border: 1px solid #666; */
} }
.close-btn-nav:hover{ .close-btn-nav:hover{
background-color: #fff3e3; background-color: #c6f1e3;
} }
.set-list-nav li:hover{ .set-list-nav li:hover{
cursor: pointer; cursor: pointer;
color: rgb(65, 13, 121); color: rgb(13, 121, 105);
} }
.exit-btn-nav{ .exit-btn-nav{
height: 40px; height: 40px;
@ -170,12 +170,12 @@
border: none; border: none;
border-radius: 10px; border-radius: 10px;
font-size: 18px; font-size: 18px;
margin-top: 310px; margin-top: 290px;
margin-left: 25px; margin-left: 25px;
background-color: rgb(183, 231, 255); background-color: rgb(176, 245, 218);
} }
.exit-btn-nav:hover{ .exit-btn-nav:hover{
background-color: #b0dcf7; background-color: #b0f7da;
} }