This commit is contained in:
parent
afbf2e07af
commit
03269269c6
|
@ -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;
|
||||||
}
|
}
|
|
@ -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>}
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
|
@ -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>
|
||||||
|
|
|
@ -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;
|
|
||||||
}
|
}
|
|
@ -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
|
||||||
/>
|
/>
|
||||||
|
{/* 空格符号 */}
|
||||||
|
<span>-</span>
|
||||||
|
{/* 空格符号 */}
|
||||||
|
{/* 结束时间 */}
|
||||||
<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>
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue