1

app-dm/src/TeacherPages/MarkingPages/Marking.css

@@ -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 span{
-.p-mark {
     font-size: 18px;
+    line-height: 48px;
 
 }
-
+.p-mark p{
-.test-mark span {
+    font-size: 14px;
-    font-size: 13px;
-    margin-top: -12px;
     color: #525252;
+    margin-top: -10px;
 }
 #TF{
     position: absolute;
-    margin-left: 1200px;
+    margin-left: 1230px;
+    margin-top: -45px;
 }

app-dm/src/TeacherPages/MarkingPages/Marking.jsx

@@ -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>
+                                <div>
-                                <p className='p-mark'><span>实训ID:{MarkData[key][0][10]}</span>{eval(MarkData[key][0][11])}</p>
+                                    <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>  
+                                </div>
-                            </p>
                             </li>
                         </Link>
                     ))}

app-dm/src/TeacherPages/MarkingPages/StudentLink.css

@@ -8,7 +8,44 @@
     float: right;
     background-color: #f7f8fa;
 }
-.submit{
+.title-link{
-    margin-left: 1000px;
+    position: absolute;
-    margin-top: 20px;
+    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;
 }

app-dm/src/TeacherPages/MarkingPages/StudentLink.jsx

@@ -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>

app-dm/src/TeacherPages/Trainmanage/SendTrain.css

@@ -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;
+    height: 480px;
-    margin-top: 30px;
     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;
+    margin-left: 85px;
-    padding-top: 10px;
+    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);
+    background-color: rgb(181, 252, 208);
-    border-color: rgb(250, 200, 140);
+    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;
+    top: 323px;
-    right: 185px;
+    right: 181px;
 }
 .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 {
-    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;
 }

app-dm/src/TeacherPages/Trainmanage/SendTrain.jsx

@@ -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> 

app-dm/src/TeacherPages/Trainmanage/Trainmanage.css

@@ -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;

app-dm/src/nav/style.css

@@ -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;
+    border-bottom: 1px solid #4f946a;
-    background-color: #fef2f2ef;
+    background-color: #e7f8fbf3;
     overflow: hidden;
 }
 .close-btn-nav {
@@ -151,18 +151,18 @@
     background: none;
     border: none;
     font-size: 18px;
-    color: #8b4a11;
+    color: #257e84;
-    background-color: #fce5d9;
+    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;
 }