23423

app-dm/src/nav/teacherIndex.jsx

@@ -40,6 +40,9 @@ function HeaderNavTeacher() {
                     头像
                 </div> */}
                 <ul className="narbar-nav mr-auto">
+                    <li className='nav-item'>
+                        <Link className='nav-link' to='/refresh'>刷新页面</Link>
+                    </li>
                     <li className='nav-item'>
                         <Link className='nav-link' to='/'>学生</Link>
                     </li>

app-dm/src/pages/ListPages/Subject/SubjectPage.jsx

@@ -5,8 +5,6 @@ import axios from 'axios';
 import moment from 'moment';
 
 
-
-
 // 首页 题目集
 function SubjectPage(){
     const student_ID=localStorage.getItem('islogin')

app-dm/src/pages/ListPages/Training/Operation1.jsx

@@ -4,7 +4,7 @@ import "@xterm/xterm/css/xterm.css"
 import  React,{ MouseEvent, useEffect, useRef, useState } from "react";
 import { useParams } from 'react-router';
 import { Link } from 'react-router-dom';
-import arrow from '../img/arrow.jpg'
+// import arrowright from '../img/arrowright.jpg'
 import bottom from '../img/bottom.jpg'
 import top from '../img/top.jpg'
 import axios from 'axios';

app-dm/src/pages/ListPages/Training/Operation2.jsx

@@ -4,8 +4,8 @@ import "@xterm/xterm/css/xterm.css"
 import  React,{ MouseEvent, useEffect, useRef, useState } from "react";
 import { useParams } from 'react-router';
 import { Link } from 'react-router-dom';
-import arrow from '../img/arrow.jpg'
-import arrow1 from '../img/left.jpg'
+import arrowleft from '../img/arrowleft.jpg'
+import arrowright from '../img/arrowright.jpg'
 import bottom from '../img/bottom.jpg'
 import top from '../img/top.jpg'
 
@@ -126,10 +126,10 @@ function Operation2() {
             </div>
             <Link className='btn-back2' to={`/operation1/${operateID}`} style={{color:'#000',textDecoration:'none'}}>
                 <p>上一页</p>
-                <img src={arrow1} alt="" width='40px' height='40px' />
+                <img src={arrowleft} alt="" width='40px' height='40px' />
             </Link>
             <Link className='btn-out2' to='/train' style={{color:'#000',textDecoration:'none'}}>
-                <img src={arrow} alt="" width='40px' height='40px' />
+                <img src={arrowright} alt="" width='40px' height='40px' />
                 <p>完成</p>
             </Link>
         </div>

app-dm/src/pages/ListPages/Training/TrainingPage.css

@@ -10,48 +10,46 @@
 }
 
 /* 页面右边内容 */
-.body-right-training h3{
-    margin-left: 60px;
-    font-size: 20px;
-    margin-bottom: -5px;
-}
-
 .test-training{
+    margin-left: 40px;
+    margin-bottom: 60px;
+}
+.test-training h3{
+    font-size: 20px;
+}
+.train-box-list{
     display:flex;
     flex-wrap: wrap;
     flex-direction: row;
-    margin-left: 40px;
-    margin-bottom: 60px;
+    margin-top: -20px;
 }
 
 .test-box-training{
     flex-basis: calc(30.00% - 10PX);
     box-sizing: border-box;
     margin: 20px;
+    width: 400px;
     height: 200px;
     background-image: linear-gradient(190deg,rgba(157, 246, 252, 0.7),rgba(198, 212, 255, 0.7));
     border-radius: 15px;
     line-height: 35px;
 }
-
 .test-box-training p{
     font-size: 20px;
     margin: 10px;
 }
-
 .test-box-training span{
     margin-left: 15px;
 }
-
 .test-box-training div{
     margin-left: 15px;
 }
 
 .exam-btn-training{
     position: absolute;
-    margin-left: 260px;
+    margin-left: 270px;
     border-radius: 15px;
-    margin-top: -10px;
+    margin-top: -20px;
     font-size: 17px;
     border: none;
     display: inline-block;  
@@ -69,13 +67,32 @@
 .exam-btn-training:active{
     color:rgba(86, 117, 114, 0.929);
 }
-.bottomP{
-    color: red;
-    font-size: 20px;
-    margin-top: 350px;
-    margin-left: 70px;
-    letter-spacing: 20px;
+
+/* 警告框 */
+.warning-box {
+    width: 1420px;
+    font-size: 18px;
+    color: #fd3333;
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+}
+.warning-content {
+    width: 1420px;
+    height: 60px;
+    text-align: center;
+    border-radius: 5px;
+    background-color: rgba(248, 192, 192, 0.76);
+    box-shadow: 0 0 10px rgba(115, 16, 16, 0.3);
+    /* max-width: 600px; */
+}
+.close-button {
+    float: right;
+    cursor: pointer;
+    font-size: 30px;
+    position: absolute;
+    right: 12px;
+    top: 5px;
 }
-
-
-

app-dm/src/pages/ListPages/Training/TrainingPage.jsx

@@ -4,6 +4,19 @@ import '../Training/TrainingPage.css'
 import axios from 'axios';
 
 
+const WarningModal = ({ isOpen, onClose }) => {
+    if (!isOpen) return null; // 如果警告框不显示，则不渲染
+  
+    return (
+      <div className="warning-box">
+        <div className="warning-content">
+          <span className="close-button" onClick={onClose}>×</span>
+          <p>提醒 : 请及时完成实训内容！！！</p>
+        </div>
+      </div>
+    );
+  };
+
 const list4=[
     {'train':'实训3：待定',id:'3'},
     {'train':'实训4：待定',id:'4'}
@@ -32,10 +45,28 @@ function SubjectPage(){
         FetchTrainFunc()
     },[])
 
+
+    // 控制警告框显示的状态
+    const [isWarningOpen, setWarningOpen] = useState(false);
+
+    // 打开警告框
+    const openWarning = () => setWarningOpen(true);
+
+    // 关闭警告框
+    const closeWarning = () => setWarningOpen(false);
+
+    // 可以在适当的时机调用openWarning函数来显示警告框
+    useEffect(() => {
+        openWarning();
+    }, []);
+
     return(
         <div className="body-right-training">
-            <h3>未完成实训项目</h3>
+            {/* 警告框 */}
+            {isWarningOpen && <WarningModal isOpen={isWarningOpen} onClose={closeWarning} />}
             {title&&<div className='test-training'>
+                <h3>未完成实训项目</h3>
+                <div className='train-box-list'>
                     {Object.keys(title).map((key)=>(
                         <div className='test-box-training' key={key}>
                             <p>实训:{eval(title[key][0][11])}</p>
@@ -47,8 +78,8 @@ function SubjectPage(){
                             </Link>
                         </div>
                     ))}
+                </div>
             </div>}
-            <p className='bottomP'>提醒:请及时完成实训内容！！！</p>
         </div>
 )};
 

app-dm/src/router/index.jsx

@@ -6,6 +6,8 @@ import SignInPage from '../pages/SignIn/SignInPage';
 // 导航
 import HeaderNav from '../nav/nav';
 import HeaderNavTeacher from '../nav/teacherIndex';
+//刷新页面
+import Refresh from '../utils/refresh';
 // 用户页面
 import Home from '../pages/Home/Home';
 import SubjectPage from '../pages/ListPages/Subject/SubjectPage';
@@ -75,6 +77,8 @@ function App() {
           <Route path='operation1/:operateID' element={<Operation1/>}/> {/* 实训页面1 */}
           <Route path='operation2/:operateID' element={<Operation2/>}/> {/* 实训页面2 */}
           <Route path='teacher/list_pods' element={<List_pods/>}/>
+          <Route path='/refresh' element={<Refresh/>}/>
+
           {/* 独立的顶级路由，如登录页面，也不包含HeaderNav */}
             {/* 登录页面 */}
           <Route path="signin" element={<SignInPage />} />

app-dm/src/utils/refresh.css

@@ -0,0 +1,55 @@
+.refresh-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: -20px 0; /* 根据SVG大小调整 */
+  }
+  
+  .refresh-circular {
+    animation: rotate 2s linear infinite;
+    height: 60px; /* SVG大小 */
+    width: 60px; /* SVG大小 */
+  }
+  
+  @keyframes rotate {
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+  
+  .refresh-path {
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: 0;
+    animation: dash 1.5s ease-in-out infinite, color-change 6s ease-in-out infinite;
+  }
+  
+  @keyframes dash {
+    0% {
+      stroke-dasharray: 1, 200;
+      stroke-dashoffset: 0;
+    }
+    50% {
+      stroke-dasharray: 89, 200;
+      stroke-dashoffset: -35px;
+    }
+    100% {
+      stroke-dasharray: 89, 200;
+      stroke-dashoffset: -124px;
+    }
+  }
+  
+  @keyframes color-change {
+    0%, 100% {
+      stroke: #3498db;
+    }
+    40% {
+      stroke: #9b59b6;
+    }
+    66% {
+      stroke: #e74c3c;
+    }
+    80%, 90% {
+      stroke: #f1c40f;
+    }
+  }

app-dm/src/utils/refresh.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import './refresh.css'; // 引入CSS样式
+
+function Refresh(){
+    return(
+        <div className="refresh-container">
+            {/* 使用SVG创建一个圆形的加载动画  viewBox定义了 SVG 的坐标系统和缩放行为*/}
+            <svg className="refresh-circular" viewBox="25 25 50 50">
+                {/* circle元素定义了一个圆形路径，用于加载动画
+                    cx和cy属性定义了圆心的位置
+                    r属性定义了圆的半径
+                    fill="none"表示圆形不填充颜色
+                    strokeWidth="4"定义了圆形路径的宽度 */}
+                <circle className="refresh-path" cx="50" cy="50" r="20" fill="none" strokeWidth="6" />
+            </svg>
+        </div>
+    )
+}
+
+export default Refresh;