Update styles.css

styles.css

@@ -7,7 +7,7 @@ body {
     background-size: cover;
 }  
 
-.container {  
+.container { 
     width: auto;
     margin: auto;
     padding: 4vh;  /* 增加内边距 */
@@ -126,17 +126,7 @@ button:hover {
     background-color: rgba(192, 191, 191, 0.9); /* 鼠标悬停时稍微加深背景 */
     transform: translateY(-0.2vh); /* 鼠标悬停时稍微上升 */  
     box-shadow: 0 1.2vw 1.6vw 0 rgba(0, 0, 0, 0.24), 0 1.7vw 5vw 0 rgba(0, 0, 0, 0.19);
-}  
-
-input[type="file"],  
-input[type="text"] {  
-    width: 100%;  
-    padding: 1.5vh;  /* 增加输入框内边距 */
-    font-size: 1.1vh;  /* 增大输入框字体 */
-    margin: 1vh 0;  
-    border: 0.1vw solid #ccc;  
-    border-radius: 0.5vw;  
-}  
+}   
 
 .long-cang-regular {
     font-family: "Long Cang", cursive;
@@ -145,10 +135,10 @@ input[type="text"] {
 }
 
 #selectedStudent {  
-    font-size: 3.2vh;  /* 增大选中学生字体 */
+    font-size: 4vh;  /* 增大选中学生字体 */
     font-family: "Ma Shan Zheng", cursive;
     text-align: center;  
-    margin-top: 2vh;  
+    margin-top: 5vh;  
     color: #2f2f35;  
     transition: transform 0.5s;  
     position: absolute;
@@ -197,7 +187,7 @@ input[type="text"] {
 }  
 
 .file-label :hover{
-    background-color: rgba(161, 159, 159, 0.9); /* 鼠标悬停时稍微加深背景 */
+    background-color: rgba(192, 191, 191, 0.9); /* 鼠标悬停时稍微加深背景 */
     transform: translateY(-0.2vh); /* 鼠标悬停时稍微上升 */  
     box-shadow: 0 1.2vw 1.6vw 0 rgba(0, 0, 0, 0.24), 0 1.7vw 5vw 0 rgba(0, 0, 0, 0.19);
 }
@@ -241,3 +231,83 @@ input[type="text"] {
     visibility: hidden;
     transition: opacity 1s ease-in-out, visibility 1s ease-in-out;
 }
+
+/*文件上传样式*/
+.modal {  
+    display: none; /* 隐藏模态框 */  
+    position: fixed;  
+    z-index: 1;  
+    left: 0;  
+    top: 0;  
+    width: 100%;  
+    height: 100%;  
+    overflow: auto;  
+    background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */  
+}  
+
+.modal-content {  
+    background-color: white;  
+    margin: 15% auto;  
+    padding: 20px;  
+    border: 1px solid #888;  
+    width: 300px;  
+    border-radius: 8px;  
+    text-align: center;  
+}  
+
+.upload-box {  
+    font-size: 24px;
+    font-family: "Ma Shan Zheng", cursive;
+    border: 2px dashed #ccc;  
+    padding: 20px;  
+    margin-bottom: 10px;  
+    cursor: pointer;  
+}  
+
+.upload-box:hover {  
+    border-color: #4CAF50;  
+}  
+
+.pic {  
+    font-size: 50px;  
+    color: #4CAF50;  
+} 
+
+.button-container {  
+    display: flex;  
+    justify-content: space-between;  
+}  
+
+#cancelButton {  
+    padding: 10px 20px;
+    border: none;  
+    border-radius: 5px;  
+    cursor: pointer;   
+    color: black;  
+}  
+
+#okButton {  
+    padding: 10px 20px;
+    border: none;  
+    border-radius: 5px;  
+    cursor: pointer; 
+    color: black;  
+}     
+
+.close-button {  
+    padding: 10px 20px;
+    border: none;  
+    border-radius: 5px;  
+    cursor: pointer; 
+    color: #aaa;  
+    float: right;  
+    font-size: 28px;  
+    font-weight: bold;  
+}  
+
+.close-button:hover,  
+.close-button:focus {  
+    color: black;  
+    text-decoration: none;  
+    cursor: pointer;  
+}