This commit is contained in:
30404 2024-07-06 13:01:50 +08:00
commit 5074ea46b5
8 changed files with 143 additions and 85 deletions

View File

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

View File

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

View File

@ -8,7 +8,44 @@
float: right;
background-color: #f7f8fa;
}
.submit{
margin-left: 1000px;
margin-top: 20px;
.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{
width: 140px;
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(){
const testID=useParams()['key']
const sumbitScore=async()=>{
try{
const sumbitScoreSrc=await axios.post('/api/teacher/UpdateTest',{
@ -63,7 +62,7 @@ function StudentLink(){
<div className='body-right-studentlink'>
{TestLink&&<table>
<thead>
<tr>
<tr className='title-link'>
<th>学生</th>
<th>链接1</th>
<th>链接2</th>
@ -74,7 +73,7 @@ function StudentLink(){
</thead>
<tbody>
{Object.keys(TestLink).map((key)=>(
<tr key={key}>
<tr key={key} className='link-table'>
<td>{key}</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>

View File

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

View File

@ -138,16 +138,32 @@ 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) => {
setEndDate(date);
};
return(
<div className='SendTrain_body'>
<div className='SendTrain_body_left'>
@ -320,21 +336,6 @@ function SendTrain(){
</ul>}
</div>
<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>
<div className='calendar-box'>
@ -342,15 +343,23 @@ function SendTrain(){
<div className='start-date-input'>
{/* 日历组件 */}
<div className='calendar-picker'>
{/* 开始时间 */}
<DatePicker
selected={startDate}
onChange={handleStartDateChange}
dateFormat="yyyy-MM-dd HH:mm"
showTimeSelect
timeIntervals={10} //
timeIntervals={10}
timeCaption="time"
minDate={new Date()} //
minDate={new Date()}
className="calendar1"
dropdownMode="scroll" //
inPortal={true} // DOM
/>
&nbsp; {/* 空格符号 */}
<span>-</span>
&nbsp; {/* 空格符号 */}
{/* 结束时间 */}
<DatePicker
selected={endDate}
onChange={handleEndDateChange}
@ -359,11 +368,14 @@ function SendTrain(){
timeIntervals={10}
timeCaption="time"
minDate={startDate || new Date()} //
dropdownMode="scroll" //
className='calendar2'
/>
</div>
</div>
</div>
<p>考试总时长</p>
{duration || '请选择考试结束日期'}
</div>
</div>
</div>

View File

@ -18,7 +18,7 @@
height: 2px;
position: absolute;
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{
width: 650px;

View File

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