diff --git a/styles.css b/styles.css index 9206efb..321ddb7 100644 --- a/styles.css +++ b/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; +}