Compare commits
No commits in common. "29c15e93d32d33f64a419135e06fac3ceed53a09" and "17bd97c9dcd0c91f18973445c87d9171e9ada7ac" have entirely different histories.
29c15e93d3
...
17bd97c9dc
|
@ -40,9 +40,6 @@ 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>
|
||||||
|
|
Before Width: | Height: | Size: 19 KiB After Width: | Height: | Size: 19 KiB |
After Width: | Height: | Size: 9.5 KiB |
|
@ -5,6 +5,8 @@ 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')
|
||||||
|
|
|
@ -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 arrowright from '../img/arrowright.jpg'
|
import arrow from '../img/arrow.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';
|
||||||
|
|
|
@ -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 arrowleft from '../img/arrowleft.jpg'
|
import arrow from '../img/arrow.jpg'
|
||||||
import arrowright from '../img/arrowright.jpg'
|
import arrow1 from '../img/left.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={arrowleft} alt="" width='40px' height='40px' />
|
<img src={arrow1} 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={arrowright} alt="" width='40px' height='40px' />
|
<img src={arrow} alt="" width='40px' height='40px' />
|
||||||
<p>完成</p>
|
<p>完成</p>
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -10,46 +10,48 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 页面右边内容 */
|
/* 页面右边内容 */
|
||||||
.test-training{
|
.body-right-training h3{
|
||||||
margin-left: 40px;
|
margin-left: 60px;
|
||||||
margin-bottom: 60px;
|
|
||||||
}
|
|
||||||
.test-training h3{
|
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
|
margin-bottom: -5px;
|
||||||
}
|
}
|
||||||
.train-box-list{
|
|
||||||
|
.test-training{
|
||||||
display:flex;
|
display:flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
margin-top: -20px;
|
margin-left: 40px;
|
||||||
|
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: 270px;
|
margin-left: 260px;
|
||||||
border-radius: 15px;
|
border-radius: 15px;
|
||||||
margin-top: -20px;
|
margin-top: -10px;
|
||||||
font-size: 17px;
|
font-size: 17px;
|
||||||
border: none;
|
border: none;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
@ -67,32 +69,13 @@
|
||||||
.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;
|
||||||
|
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;
|
|
||||||
}
|
|
||||||
|
|
|
@ -4,19 +4,6 @@ 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'}
|
||||||
|
@ -45,28 +32,10 @@ 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">
|
||||||
{/* 警告框 */}
|
|
||||||
{isWarningOpen && <WarningModal isOpen={isWarningOpen} onClose={closeWarning} />}
|
|
||||||
{title&&<div className='test-training'>
|
|
||||||
<h3>未完成实训项目</h3>
|
<h3>未完成实训项目</h3>
|
||||||
<div className='train-box-list'>
|
{title&&<div className='test-training'>
|
||||||
{Object.keys(title).map((key)=>(
|
{Object.keys(title).map((key)=>(
|
||||||
<div className='test-box-training' key={key}>
|
<div className='test-box-training' key={key}>
|
||||||
<p>实训:{eval(title[key][0][11])}</p>
|
<p>实训:{eval(title[key][0][11])}</p>
|
||||||
|
@ -78,8 +47,8 @@ function SubjectPage(){
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
|
||||||
</div>}
|
</div>}
|
||||||
|
<p className='bottomP'>提醒:请及时完成实训内容!!!</p>
|
||||||
</div>
|
</div>
|
||||||
)};
|
)};
|
||||||
|
|
||||||
|
|
After Width: | Height: | Size: 8.6 KiB |
Before Width: | Height: | Size: 2.0 KiB |
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 2.0 KiB |
Before Width: | Height: | Size: 5.1 KiB After Width: | Height: | Size: 5.1 KiB |
Before Width: | Height: | Size: 19 KiB After Width: | Height: | Size: 19 KiB |
After Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 22 KiB |
After Width: | Height: | Size: 9.5 KiB |
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
|
@ -6,8 +6,6 @@ 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,8 +73,6 @@ function App() {
|
||||||
<Route path='/teacher/SendTrain' element={<SendTrain/>}/> {/*实训管理-发布实训*/}
|
<Route path='/teacher/SendTrain' element={<SendTrain/>}/> {/*实训管理-发布实训*/}
|
||||||
<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='/refresh' element={<Refresh/>}/>
|
|
||||||
|
|
||||||
{/* 独立的顶级路由,如登录页面,也不包含HeaderNav */}
|
{/* 独立的顶级路由,如登录页面,也不包含HeaderNav */}
|
||||||
{/* 登录页面 */}
|
{/* 登录页面 */}
|
||||||
<Route path="signin" element={<SignInPage />} />
|
<Route path="signin" element={<SignInPage />} />
|
||||||
|
|
|
@ -1,55 +0,0 @@
|
||||||
.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;
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,20 +0,0 @@
|
||||||
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;
|
|