diff --git a/app-dm/src/TeacherPages/TestManage/ManageTest.css b/app-dm/src/TeacherPages/TestManage/ManageTest.css
index 7d535cb..fd9fc3c 100644
--- a/app-dm/src/TeacherPages/TestManage/ManageTest.css
+++ b/app-dm/src/TeacherPages/TestManage/ManageTest.css
@@ -92,7 +92,7 @@
     z-index: 2;
 }
 #splitter{
-    width: 590;
+    width: 590px;
     border-bottom: 1px solid black;
     text-align: center;
     font-size: 20px;
@@ -104,7 +104,7 @@
     font-size: 20px;
     margin-top: -10px;
     cursor: pointer;
-    color: rgb(68, 125, 106);
+    color: rgb(154, 131, 66);
 }
 #detailed span{
     text-align: center;
diff --git a/app-dm/src/TeacherPages/Trainmanage/Trainmanage.css b/app-dm/src/TeacherPages/Trainmanage/Trainmanage.css
index 9c690f5..05be2be 100644
--- a/app-dm/src/TeacherPages/Trainmanage/Trainmanage.css
+++ b/app-dm/src/TeacherPages/Trainmanage/Trainmanage.css
@@ -69,7 +69,7 @@
 }
 .train-list-trainmanage li::before {
     content: "▶";
-    color: rgb(132, 213, 209);
+    color: #84d5d1;
     padding-right: 20px;
     line-height: 65px;
     padding-left: 15px;
@@ -77,9 +77,7 @@
     display: inline-block;
 }
 
-
-
-
+/* 按钮 */
 .sendtestpage{
     padding: 10px 30px;
     font-size: 20px;
@@ -113,17 +111,60 @@
     font-size: 14px;
     margin-left: 52px;
 }
+/* 弹窗 */
 .TrainBox{
-    width: 1000px;
-    height: 500px;
-    background-color: aqua;
+    width: 650px;
+    height: 400px;
+    margin-left: 350px;
+    margin-top: 180px;
+    position: absolute;
+    z-index: 2;
+    border: 1px solid #ceedf5;
+    background-color: #d4f6f6;
 }
 .TrainBox table{
-    margin-top: 200px;
-    margin-left: 400px;
-    width: 500px;
-    text-align: center;
-    border: 1px solid black;
+    margin-top: 60px;
+    margin-left: -2px;
+    width: 650px;
 }
 .TrainBox th{
+    font-size: 18px;
+    padding: 10px 20px 0 55px;
+}
+.xx{
+    padding: 20px 0;
+}
+.TrainBox td{
+    font-size: 18px;
+    padding: 10px 0;
+}
+
+.close-icon{
+    width: 30px;
+    height: 25px;
+    background-color: #a0d4e0;
+    border: none;
+    position: absolute;
+    left: 620px;
+    top: -20px;
+    cursor: pointer;
+}
+.close-icon:hover{
+    background-color: #c4e6ed;
+}
+
+.splitter1{
+    width: 650px;
+    border-bottom: 1px solid black;
+    text-align: center;
+    font-size: 20px;
+    padding-bottom: 10px;
+}
+
+#detailed_box_tr1{
+    width: 650px;
+    text-align: center;
+}
+.box-blue{
+    margin-top: 15px;
 }
\ No newline at end of file
diff --git a/app-dm/src/TeacherPages/Trainmanage/Trainmanage.jsx b/app-dm/src/TeacherPages/Trainmanage/Trainmanage.jsx
index da27817..4f76bba 100644
--- a/app-dm/src/TeacherPages/Trainmanage/Trainmanage.jsx
+++ b/app-dm/src/TeacherPages/Trainmanage/Trainmanage.jsx
@@ -8,7 +8,7 @@ function TrainManage(){
     const teacher_ID=localStorage.getItem('islogin')
     const [isTrue,setisTrue]=useState(false)
     const [Data,setData]=useState([])
-    const [showModal, setShowModal] = useState(true);
+    const [showModal, setShowModal] = useState(false);
     const [selectedTrain, setSelectedTrain] = useState(null);
     const [testID,settestID]=useState()
     const [TrainData,setTrainData]=useState()
@@ -50,8 +50,12 @@ function TrainManage(){
     const Click=(testID,train)=>{
         settestID(testID)
         setSelectedTrain(train)
+        setShowModal(true); // 点击列表项时显示模态框
     }
 
+    const closeModal = () => {
+        setShowModal(false); // 点击关闭按钮时隐藏模态框
+    };
 
     return(
         <div className='body-trainmanage'>
@@ -70,31 +74,40 @@ function TrainManage(){
                 <Link to='/teacher/trainmanage/TrainPods' className='ManagePods' >管理实训</Link>
                 <Link to='/teacher/SendTrain' className='sendtestpage'>发布实训</Link>
             </div>}
-            <div className='TrainBox'>
+            {showModal && (
+                <div className='TrainBox'>
+                <p className='splitter1'>实训ID：{testID}<span className='close-icon' onClick={closeModal}>X</span></p>
                 <table>
-                    <thead>
+                    <thead style={{display:'flex'}}>
                         <tr>
-                            <th>姓名</th>
-                            <th>ID</th>
-                            <th>基础成绩</th>
-                            <th>实训成绩</th>
-                            <th>总成绩</th>
+                            <th style={{ flex: 1 }}>姓名</th>
+                            <th style={{ flex: 1 }}>ID</th>
+                            <th style={{ flex: 1 }}>基础成绩</th>
+                            <th style={{ flex: 1 }}>实训成绩</th>
+                            <th style={{ flex: 1 }}>总成绩</th>
                         </tr>
+                        <p className='xx'>---------------------------------------------------------------------------</p>
                     </thead>
                     {TrainData&&<tbody>
-                    {Object.keys(TrainData).map((key)=>(
-                    <tr key={key}>
-                        <td>{key}</td>
-                        <td>{TrainData[key][0]}</td>
-                        <td>{TrainData[key][4]}</td>
-                        <td>{TrainData[key][5]}</td>
-                        <td>{parseInt(TrainData[key][4])+parseInt(TrainData[key][5])}</td>
-                    </tr>
-                    ))}
+                        <div className='box-blue'>
+                        {Object.keys(TrainData).map((key,index)=>(
+                            <tr style={{ 
+                                display: 'flex', 
+                                backgroundColor: index % 2 === 0 ? '#d4f6f6':'#fdecf5' // 偶数行一个颜色，奇数行另一个颜色
+                            }}
+                            id='detailed_box_tr1'>
+                                <td style={{ flex: 1 }}>{key}</td>
+                                <td style={{ flex: 1 }}>{TrainData[key][0]}</td>
+                                <td style={{ flex: 1 }}>{TrainData[key][4]}</td>
+                                <td style={{ flex: 1 }}>{TrainData[key][5]}</td>
+                                <td style={{ flex: 1 }}>{parseInt(TrainData[key][4])+parseInt(TrainData[key][5])}</td>
+                            </tr>
+                        ))}
+                        </div>
                     </tbody>}
                 </table>
             </div>  
-
+            )}
         </div>
     )
 }