Compare commits

...

2 Commits

Author SHA1 Message Date
nopy 29c15e93d3 Merge branch 'master' of https://gitea.xn--7p0a.site/2312072104/dm 2024-06-26 19:27:10 +08:00
nopy f68fb0f1d9 1 2024-06-26 19:27:06 +08:00
20 changed files with 169 additions and 41 deletions

View File

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

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';
//
function SubjectPage(){
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 { 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';

View File

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

View File

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

View File

@ -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,23 +45,41 @@ 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'>
{Object.keys(title).map((key)=>(
<div className='test-box-training' key={key}>
<p>实训:{eval(title[key][0][11])}</p>
<span>发布者:陈老师</span>
<div>发布时间:{title[key][0][5]}</div>
<div>截至时间:{title[key][0][6]}</div>
<Link to={`/operation1/${title[key][0][10]}`} className="exam-btn-training">
开始实训
</Link>
<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>
<span>发布者:陈老师</span>
<div>发布时间:{title[key][0][5]}</div>
<div>截至时间:{title[key][0][6]}</div>
<Link to={`/operation1/${title[key][0][10]}`} className="exam-btn-training">
开始实训
</Link>
</div>
))}
</div>
))}
</div>}
<p className='bottomP'>提醒:请及时完成实训内容</p>
</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 HeaderNavTeacher from '../nav/teacherIndex';
//
import Refresh from '../utils/refresh';
//
import Home from '../pages/Home/Home';
import SubjectPage from '../pages/ListPages/Subject/SubjectPage';
@ -73,6 +75,8 @@ function App() {
<Route path='/teacher/SendTrain' element={<SendTrain/>}/> {/*实训管理-发布实训*/}
<Route path='operation1/:operateID' element={<Operation1/>}/> {/* 实训页面1 */}
<Route path='operation2/:operateID' element={<Operation2/>}/> {/* 实训页面2 */}
<Route path='/refresh' element={<Refresh/>}/>
{/* 独立的顶级路由如登录页面也不包含HeaderNav */}
{/* 登录页面 */}
<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;