1

2024-07-06 01:00:41 +08:00 · 2024-07-06 01:00:41 +08:00 · 03269269c6
parent afbf2e07af
commit 03269269c6
8 changed files with 143 additions and 85 deletions
--- a/app-dm/src/TeacherPages/MarkingPages/Marking.css
+++ b/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 {
+.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;
 }
--- a/app-dm/src/TeacherPages/MarkingPages/Marking.jsx
+++ b/app-dm/src/TeacherPages/MarkingPages/Marking.jsx
@ -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>}
--- a/app-dm/src/TeacherPages/MarkingPages/StudentLink.css
+++ b/app-dm/src/TeacherPages/MarkingPages/StudentLink.css
@ -8,7 +8,44 @@
    float: right;
    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{
-    margin-left: 1000px;
-    margin-top: 20px;
+    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;
 }
--- a/app-dm/src/TeacherPages/MarkingPages/StudentLink.jsx
+++ b/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>
--- a/app-dm/src/TeacherPages/Trainmanage/SendTrain.css
+++ b/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;
-    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; /* 根据需要调整 */
 }
--- a/app-dm/src/TeacherPages/Trainmanage/SendTrain.jsx
+++ b/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> 
--- a/app-dm/src/TeacherPages/Trainmanage/Trainmanage.css
+++ b/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;
--- a/app-dm/src/nav/style.css
+++ b/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;
-    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;
 }