This commit is contained in:
30404 2024-06-26 19:33:29 +08:00
commit 7313e37fdd
20 changed files with 169 additions and 41 deletions

View File

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

View File

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.5 KiB

View File

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

View File

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

View File

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

View File

@ -10,48 +10,46 @@
} }
/* 页面右边内容 */ /* 页面右边内容 */
.body-right-training h3{
margin-left: 60px;
font-size: 20px;
margin-bottom: -5px;
}
.test-training{ .test-training{
margin-left: 40px;
margin-bottom: 60px;
}
.test-training h3{
font-size: 20px;
}
.train-box-list{
display:flex; display:flex;
flex-wrap: wrap; flex-wrap: wrap;
flex-direction: row; flex-direction: row;
margin-left: 40px; margin-top: -20px;
margin-bottom: 60px;
} }
.test-box-training{ .test-box-training{
flex-basis: calc(30.00% - 10PX); flex-basis: calc(30.00% - 10PX);
box-sizing: border-box; box-sizing: border-box;
margin: 20px; margin: 20px;
width: 400px;
height: 200px; height: 200px;
background-image: linear-gradient(190deg,rgba(157, 246, 252, 0.7),rgba(198, 212, 255, 0.7)); background-image: linear-gradient(190deg,rgba(157, 246, 252, 0.7),rgba(198, 212, 255, 0.7));
border-radius: 15px; border-radius: 15px;
line-height: 35px; line-height: 35px;
} }
.test-box-training p{ .test-box-training p{
font-size: 20px; font-size: 20px;
margin: 10px; margin: 10px;
} }
.test-box-training span{ .test-box-training span{
margin-left: 15px; margin-left: 15px;
} }
.test-box-training div{ .test-box-training div{
margin-left: 15px; margin-left: 15px;
} }
.exam-btn-training{ .exam-btn-training{
position: absolute; position: absolute;
margin-left: 260px; margin-left: 270px;
border-radius: 15px; border-radius: 15px;
margin-top: -10px; margin-top: -20px;
font-size: 17px; font-size: 17px;
border: none; border: none;
display: inline-block; display: inline-block;
@ -69,13 +67,32 @@
.exam-btn-training:active{ .exam-btn-training:active{
color:rgba(86, 117, 114, 0.929); color:rgba(86, 117, 114, 0.929);
} }
.bottomP{
color: red; /* 警告框 */
font-size: 20px; .warning-box {
margin-top: 350px; width: 1420px;
margin-left: 70px; font-size: 18px;
letter-spacing: 20px; 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;
} }

View File

@ -4,6 +4,19 @@ import '../Training/TrainingPage.css'
import axios from 'axios'; 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=[ const list4=[
{'train':'实训3待定',id:'3'}, {'train':'实训3待定',id:'3'},
{'train':'实训4待定',id:'4'} {'train':'实训4待定',id:'4'}
@ -32,23 +45,41 @@ function SubjectPage(){
FetchTrainFunc() FetchTrainFunc()
},[]) },[])
//
const [isWarningOpen, setWarningOpen] = useState(false);
//
const openWarning = () => setWarningOpen(true);
//
const closeWarning = () => setWarningOpen(false);
// openWarning
useEffect(() => {
openWarning();
}, []);
return( return(
<div className="body-right-training"> <div className="body-right-training">
<h3>未完成实训项目</h3> {/* 警告框 */}
{isWarningOpen && <WarningModal isOpen={isWarningOpen} onClose={closeWarning} />}
{title&&<div className='test-training'> {title&&<div className='test-training'>
{Object.keys(title).map((key)=>( <h3>未完成实训项目</h3>
<div className='test-box-training' key={key}> <div className='train-box-list'>
<p>实训:{eval(title[key][0][11])}</p> {Object.keys(title).map((key)=>(
<span>发布者:陈老师</span> <div className='test-box-training' key={key}>
<div>发布时间:{title[key][0][5]}</div> <p>实训:{eval(title[key][0][11])}</p>
<div>截至时间:{title[key][0][6]}</div> <span>发布者:陈老师</span>
<Link to={`/operation1/${title[key][0][10]}`} className="exam-btn-training"> <div>发布时间:{title[key][0][5]}</div>
开始实训 <div>截至时间:{title[key][0][6]}</div>
</Link> <Link to={`/operation1/${title[key][0][10]}`} className="exam-btn-training">
开始实训
</Link>
</div>
))}
</div> </div>
))}
</div>} </div>}
<p className='bottomP'>提醒:请及时完成实训内容</p>
</div> </div>
)}; )};

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.6 KiB

View File

Before

Width:  |  Height:  |  Size: 2.0 KiB

After

Width:  |  Height:  |  Size: 2.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

View File

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 19 KiB

View File

Before

Width:  |  Height:  |  Size: 5.1 KiB

After

Width:  |  Height:  |  Size: 5.1 KiB

View File

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 22 KiB

View File

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.5 KiB

View File

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

View File

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

View File

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