This commit is contained in:
parent
afbf2e07af
commit
03269269c6
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -73,15 +73,17 @@ function Marking(){
|
|||
<ul>
|
||||
{Object.keys(MarkData).map((key)=>(
|
||||
<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 id='TF'>{MarkData[key][0][6]>currentTime? ' ':'未开始'}</div>
|
||||
<span>{MarkData[key][0][6]}</span>
|
||||
</p>
|
||||
</li>
|
||||
</Link>
|
||||
<li key={key}>
|
||||
<img src={Test} alt="" width='35px' height='35px'/>
|
||||
<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>
|
||||
</div>
|
||||
</li>
|
||||
</Link>
|
||||
))}
|
||||
</ul>
|
||||
</div>}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
.calendar1 {
|
||||
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;
|
||||
.calendar2 {
|
||||
width: 110px;
|
||||
max-width: 300px;
|
||||
line-height: 18px;
|
||||
position: absolute !important; /* 相对于固定定位的 .react-datepicker-popper */
|
||||
bottom: -15px; /* 根据需要调整 */
|
||||
left: 0px; /* 根据需要调整 */
|
||||
}
|
||||
|
|
@ -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
|
||||
/>
|
||||
{/* 空格符号 */}
|
||||
<span>-</span>
|
||||
{/* 空格符号 */}
|
||||
{/* 结束时间 */}
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue