1

2024-07-08 22:09:24 +08:00 · 2024-07-08 22:09:24 +08:00 · 76582c0d06
parent 6bb52471ad
commit 76582c0d06
14 changed files with 115 additions and 85 deletions
--- a/app-dm/src/nav/nav.jsx
+++ b/app-dm/src/nav/nav.jsx
@ -57,6 +57,13 @@ function HeaderNav() {
                    <div className='Form-nav'>
                        <div className="set-list-nav">
                            <button className='close-btn-nav' onClick={handleSettingsClick}>X</button>
+                            <ul>
+                                <li>账号管理</li>
+                                <li>个人信息</li>
+                                <li>登录设备</li>
+                                <li>我的通知</li>
+                                <li>个性化</li>
+                            </ul>
                        </div>
                        <button className='exit-btn-nav' onClick={outlog}>退出登录</button>
                    </div>
--- a/app-dm/src/nav/style.css
+++ b/app-dm/src/nav/style.css
@ -95,7 +95,7 @@
    background-color: #e7f8fbf3;
    padding: 0;
    list-style: none;
-    z-index: 1;
+    z-index: 1000;

    /* 默认隐藏在屏幕左侧外 */
    transform: translateX(-100%);
@ -127,6 +127,20 @@
 .set-list-nav {
    margin-top: 80px;
 }
+.set-list-nav ul {
+    background-color: transparent;
+    padding: 0;
+}
+.set-list-nav li {
+    height: 80px;
+    width: 100%;
+    font-size: 20px;
+    text-align: center;
+    line-height: 80px;
+    border-bottom: 1px solid #4f946a;
+    background-color: #e7f8fbf3;
+    overflow: hidden;
+}
 .close-btn-nav {
    width: 30px;
    height: 25px;
@ -146,13 +160,17 @@
    background-color: #c6f1e3;
 }

+.set-list-nav li:hover{
+    cursor: pointer;
+    color: rgb(13, 121, 105);
+}
 .exit-btn-nav{
    height: 40px;
    width: 170px;
    border: none;
    border-radius: 10px;
    font-size: 18px;
-    margin-top: 340%;
+    margin-top: 290px;
    margin-left: 25px;
    background-color: rgb(176, 245, 218);
 }
--- a/app-dm/src/pages/Home/Home.css
+++ b/app-dm/src/pages/Home/Home.css
@ -1,8 +1,7 @@
 /* 右侧首页内容 */
 .body-right-home{
    width: 1420px;
-    /* height: 1330px; */
-    height: 830px;
+    height: 1280px;
    position: absolute;
    top: 72px;
    left: 220px;
@ -33,38 +32,23 @@
    border-radius: 10px 10px 0 0;
 }

-/* 灰盒子 */
-/* .block{
-    width: 1300px;
-    height: 150px;
-    position: absolute;
-    top: 220px;
-    left: 58px;
-    border: 1px solid #d3d3d3;
-    background-color: #fff;
-}
-.block-box{
-    width: 98%;
-    height: 128px;
-    background-color: #f7f8f9;
-    border: 1px solid #d3d3d3;
-    margin: 11px;
-} */

 /* 题目+课表 */
-/* .box-two{
+.box-two{
    width: 1420px;
    height: 390px;
    display: flex;
    align-content: center;
-} */
+}
 /* 题目 */
-/* .list{
+.list{
    width: 560px;
    height: 310px;
+    /* background-color: #e9eef8; */
+    /* background-color: #bdd2ee; */
    background-image: linear-gradient(120deg,rgb(192, 215, 245),rgb(217, 237, 250),rgb(178, 207, 245));
    position: absolute;
-    top: 390px;
+    top: 260px;
    left: 115px;
    padding: 10px;
 }
@ -75,6 +59,7 @@
    margin-left: -5px;
    font-weight: 600;
    font-size: 18px;
+    /* background-color: #d5e3ff; */
    background-color: #cce6f6;
    color: #506f98;
    border-radius: 0 0 10px 10px;
@ -114,17 +99,17 @@
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
-} */
+}

 /* 课表 */
 .timetable{
-    width: 620px;
-    height: 400px;
+    width: 580px;
+    height: 330px;
    /* background-color: #eee8f9; */
    background-image: linear-gradient(rgb(234, 212, 251),rgb(219, 195, 238),rgb(218, 184, 244));
    position: absolute;
-    top: 280px;
-    left: 780px;
+    top: 260px;
+    left: 730px;
 }
 .schedule{
    width: 560px;
@ -146,9 +131,9 @@
    box-shadow: 2px 0 5px #beb0dc;
 }
 .schedule table{
-    width: 530px;
-    height: 340px;
-    margin-top: -45px;
+    width: 500px;
+    height: 280px;
+    margin-top: -50px;
    margin-left: 40px;
    background-color: #ffffff;
    border: 1px solid rgb(187, 186, 186);
@ -164,12 +149,11 @@

 /* 图表 */
 .chart{
-    width: 730px;
-    height: 400px;
+    width: 1200px;
+    height: 500px;
    position: absolute;
    left: 110px;
-    top: 280px;
-    left: 20px;
+    top: 660px;
    /* background-color: #d8f2f7d7; */
    background-image: linear-gradient(#d8f2f7d7,rgb(165, 232, 232),rgba(192, 244, 243, 0.916));
 }
@ -188,11 +172,11 @@
 }

 .line-graph{
-    width: 620px;
-    height: 320px;
+    width: 860px;
+    height: 420px;
    padding: 10px;
    margin-top: -90px;
-    margin-left: 50px;
+    margin-left: 160px;
    background-color: #fff;
    border-radius: 15px;
 }
@ -226,6 +210,5 @@
    height: 60px;
    position: absolute;
    bottom: 0;
-    /* background-color: rgba(49, 67, 113, 0.4); */
-    background-color: #d8dcec;
+    background-color: #dbdeec;
 }
--- a/app-dm/src/pages/Home/Home.jsx
+++ b/app-dm/src/pages/Home/Home.jsx
@ -145,13 +145,8 @@ function Home(){
                <span>吾日三省吾身,吃饭了吗,睡觉了吗,上达梦做题了吗？</span>
                <img src={Ad} alt="" height='190px' width='100%'/>
            </div>
-            {/* <div className='block'>
-                <div className='block-box'>
-                    内容暂定
-                </div>
-            </div> */}
-            {/* <div className='box-two'> */}
-                {/* <div className='list'>
+            <div className='box-two'>
+                <div className='list'>
                    <h3>练习和考试</h3>
                    <ul>
                        <li onClick={handelTestClick}>
@ -171,7 +166,7 @@ function Home(){
                            <span>暂定时间3</span>
                        </li>
                    </ul>
-                </div> */}
+                </div>
                <div className='timetable'>
                    {/* 课表 */}
                    <div className='schedule'>
@ -217,9 +212,10 @@ function Home(){
                        </table>
                    </div>
                </div>
-            {/* </div> */}
+            </div>
            <div className='chart'>
                <h3>分析图表</h3>
+                {/* 图表 (未完成)*/}
                <div className='line-graph' >
                    <Line data={chartData} options={options}/>
                </div>
--- a/app-dm/src/pages/ListPages/Analyse/AnalysePages.css
+++ b/app-dm/src/pages/ListPages/Analyse/AnalysePages.css
@ -16,7 +16,8 @@
 .test-analyse li{
    cursor: pointer;
    overflow: hidden;
-    width: 1140px;
+    /* width: 1140px; */
+    width: 100%;
    height: 70px;
    background-color: #ffffff;
    margin-top: 15px;
--- a/app-dm/src/pages/ListPages/Subject/Exam.css
+++ b/app-dm/src/pages/ListPages/Subject/Exam.css
@ -21,7 +21,7 @@
 /* 第二页（实训题）的左边导航 */
 .nav-left-exam{
    width: 215px;
-    height: 1540px;
+    height: 900px;
    position: absolute;
    box-shadow: 2px 2px 6px #d4d4d4;
 }
@ -128,4 +128,15 @@
    left: 230px;
    border-radius: 10px;
    background-color: #f7f8fa;
+}
+
+.subject-btn{
+    width: 100px;
+    height: 40px;
+    border: none;
+    margin-top: 150px;
+    margin-left: 1200px;
+    border-radius: 20px;
+    font-size: 18px;
+    background-image: linear-gradient(rgb(195, 255, 227),rgb(168, 224, 200));
 }
--- a/app-dm/src/pages/ListPages/Subject/Exam.jsx
+++ b/app-dm/src/pages/ListPages/Subject/Exam.jsx
@ -331,7 +331,7 @@ function Exam() {
                        </tbody>
                    </table>
                )}
-                <button onClick={submit}>提交</button>
+                <button onClick={submit} className='subject-btn'>提交</button>
            </div>
        </div>
    </div>
--- a/app-dm/src/pages/ListPages/Subject/SubjectPage.css
+++ b/app-dm/src/pages/ListPages/Subject/SubjectPage.css
@ -1,5 +1,3 @@
-
-
 /* 右侧页面 */
 .body-right-subject{
    width: 1420px;
--- a/app-dm/src/pages/ListPages/Training/Operation1.css
+++ b/app-dm/src/pages/ListPages/Training/Operation1.css
@ -195,4 +195,25 @@
 .btn-back1 p{
    font-size: 20px;
    margin-left: 5px;
+}
+
+.operation-btn1{
+    width: 100px;
+    height: 40px;
+    border: none;
+    margin-top: 50px;
+    margin-left: 20px;
+    border-radius: 20px;
+    font-size: 18px;
+    background-image: linear-gradient(rgb(195, 255, 227),rgb(168, 224, 200));
+}
+.operation-btn2{
+    width: 100px;
+    height: 40px;
+    border: none;
+    margin-top: 50px;
+    margin-left: 20px;
+    border-radius: 20px;
+    font-size: 18px;
+    background-image: linear-gradient(rgb(195, 255, 227),rgb(168, 224, 200));
 }
--- a/app-dm/src/pages/ListPages/Training/Operation1.jsx
+++ b/app-dm/src/pages/ListPages/Training/Operation1.jsx
@ -351,8 +351,10 @@ function Operation1() {
                        </tbody>
                    </table>
                )}
-                <button onClick={submit}>保存答案</button>
-                <Link to={`/operation2/${operateID}`}><button onClick={saveAnswers}>下一页</button></Link>
+                <button onClick={submit} className='operation-btn1'>保存答案</button>
+                <Link to={`/operation2/${operateID}`}>
+                    <button onClick={saveAnswers} className='operation-btn2'>下一页</button>
+                </Link>
            </div>
        </div>
    </div>
--- a/app-dm/src/pages/ListPages/Training/Operation2.css
+++ b/app-dm/src/pages/ListPages/Training/Operation2.css
@ -75,21 +75,26 @@
 /* 第二页（实训题题）的右边页面 */
 .body-right2{
    width: 1415px;
-    height: 550px;
+    height: 800px;
    position: absolute;
    top: 64px;
    left: 230px;
    border-radius: 10px;
    background-color: #f7f8fa;
 }
-
-
-
+.body-right2 p{
+    font-size: 18px;
+    margin-left: 50px;
+}
+Link{
+    font-size: 18px;
+    margin-left: 50px;
+}
 /* 返回按钮 */
 .btn-back2{
    height: 50px;
    position: absolute;
-    bottom: 50px;
+    bottom: 60px;
    right: 230px;
    padding: 0 20px;
    display: flex;
@ -104,15 +109,16 @@
 }
 /* 前进按钮 */
 .btn-out2{
+    width: 140px;
    cursor: pointer;
    height: 50px;
    position: absolute;
-    bottom: 50px;
-    right: 80px;
+    bottom: 60px;
+    right: 70px;
    padding: 0 20px;
    display: flex;
    align-items: center;
-    /* border: 1px solid #000; */
+    border: none;
    box-shadow: 1px 2px 5px gray;
    background-color: #efefef;
 }
--- a/app-dm/src/pages/ListPages/Training/Operation2.jsx
+++ b/app-dm/src/pages/ListPages/Training/Operation2.jsx
@ -157,14 +157,14 @@ function Operation2() {
            <div className='body-right2'>
                {/* 前端连接数据库⬇ */}
                { !isTrue&&TrainData&&Src&&<div>
-                    <p>{TrainData['operateID'][3][0]}</p>
-                    <Link to={Src[6]}>{Src[6]}</Link>
+                    <p>题目：{TrainData['operateID'][3][0]}</p>
+                    <Link to={Src[6]} style={{fontSize:'18px',marginLeft:'50px'}}>{Src[6]}</Link>
                    <br />
-                    <Link to={Src[7]}>{Src[7]}</Link>
+                    <Link to={Src[7]} style={{fontSize:'18px',marginLeft:'50px'}}>{Src[7]}</Link>
                    <br />
-                    <Link to={Src[8]}>{Src[8]}</Link>
+                    <Link to={Src[8]} style={{fontSize:'18px',marginLeft:'50px'}}>{Src[8]}</Link>
                    <br />
-                    点击以上链接前往实训
+                    <p>点击以上链接前往实训</p>
                    </div>
                    }
                {/* 前端连接数据库 ⬆*/}
--- a/app-dm/src/pages/ListPages/Training/TrainingPage.css
+++ b/app-dm/src/pages/ListPages/Training/TrainingPage.css
@ -77,7 +77,7 @@
    display: flex;
    justify-content: center;
    align-items: center;
-    z-index: 1000;
+    z-index: 1;
    animation: slideInFromUp 0.5s ease-out forwards;
 }
@keyframes slideInFromUp {
--- a/app-dm/src/pages/ListPages/Training/TrainingPage.jsx
+++ b/app-dm/src/pages/ListPages/Training/TrainingPage.jsx
@ -4,19 +4,6 @@ import '../Training/TrainingPage.css'
 import axios from 'axios';


-// const WarningModal = ({ isOpen, onClose }) => {
-   
-//     if (!isOpen) return; // 如果警告框不显示，则不渲染
-//     return (
-//       <div className="warning-box">
-//         <div className="warning-content">
-//           <span className="close-button" onClick={onClose}>×</span>
-//           <p>提醒 : 请及时完成实训内容！！！</p>
-//         </div>
-//       </div>
-//     );
-// };
-
 const WarningModal = ({ isOpen, onClose }) => {
    // 添加一个状态来控制是否应用动画
    const [isClosing, setIsClosing] = useState(false);