/* pages/student/student.wxss */ .container { height: 100vh; background-size: cover; background-position: center -50px; } .lanren-image { position: absolute; /* 绝对定位 */ left: -33px; /* 距离左侧200px */ top: 452px; /* 距离顶部150px */ width: 410px; /* 图片宽度 */ height: auto; /* 图片高度自适应 */ z-index: 2; /* 设置z-index,确保在前面 */ } .zi-image { position: absolute; /* 绝对定位 */ left: 160px; /* 距离左侧200px */ top: 132px; /* 距离顶部150px */ width: 230px; /* 图片宽度 */ height: auto; /* 图片高度自适应 */ z-index: 1; /* 设置z-index,确保在前面 */ } .dd-image { position: absolute; /* 绝对定位 */ left:16px; /* 距离左侧200px */ top: 366px; /* 距离顶部150px */ width: 100px; /* 图片宽度 */ height: auto; /* 图片高度自适应 */ z-index: 2; /* 设置z-index,确保在前面 */ } .circle1{ width: 110px; /* 圆形的宽度 */ height: 110px; /* 圆形的高度 */ background-color: #951d1d; /* 圆形的背景颜色 */ border-radius: 50%; /* 将矩形变成圆形 */ position: absolute; left: 10px; top: 361px; z-index: 1; } .guize-image { position: absolute; /* 绝对定位 */ left:295px; /* 距离左侧200px */ top: 50px; /* 距离顶部150px */ width: 60px; /* 图片宽度 */ height: auto; /* 图片高度自适应 */ z-index: 7; /* 设置z-index,确保在前面 */ } .text1 { position: absolute; /* 绝对定位 */ left: 288px; /* 距离左侧50px */ top:105px; /* 距离顶部50px */ font-size: 25px; /* 字号 */ margin: 10psx; /* 边距 */ line-height: 20px; /* 行间距 */ color: #4f4f4f; /* 文本颜色 */ font-weight: bold; padding: 10px; /* 内边距 */ z-index: 2; } .paihang-image { position: absolute; /* 绝对定位 */ left:8px; /* 距离左侧200px */ top: 250px; /* 距离顶部150px */ width: 120px; /* 图片宽度 */ height: auto; /* 图片高度自适应 */ z-index: 7; /* 设置z-index,确保在前面 */ } .yu-image { position: absolute; /* 绝对定位 */ left:8px; /* 距离左侧200px */ top: 150px; /* 距离顶部150px */ width: 150px; /* 图片宽度 */ height: auto; /* 图片高度自适应 */ z-index: 7; /* 设置z-index,确保在前面 */ } .rectangle1 { position: absolute; left: 16px; /* 矩形左上角的横坐标 */ top: 35px; /* 矩形左上角的纵坐标 */ width: 85px; /* 矩形的宽度 */ height: 85px; /* 矩形的高度 */ background-color: #ffffff; z-index: 3; border-radius: 10px; /* 圆角边框 */ box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.5); } .rectangle2 { position: absolute; left: 22px; /* 矩形左上角的横坐标 */ top: 42px; /* 矩形左上角的纵坐标 */ width: 66px; /* 矩形的宽度 */ height: 66px; /* 矩形的高度 */ border: 3px solid #e1b474; /* 矩形的边框 */ z-index: 3; border-radius: 10px; /* 圆角边框 */ } .bao-image { position: absolute; /* 绝对定位 */ left:9px; /* 距离左侧200px */ top: 28px; /* 距离顶部150px */ width: 100px; /* 图片宽度 */ height: auto; /* 图片高度自适应 */ z-index: 7; /* 设置z-index,确保在前面 */ } .rectangle3 { position: absolute; left: 90px; /* 矩形左上角的横坐标 */ top: 70px; /* 矩形左上角的纵坐标 */ width: 107px; /* 矩形的宽度 */ height: 50px; /* 矩形的高度 */ background-color: #ffffff; z-index: 1; border-radius: 10px; /* 圆角边框 */ } .rectangle4 { position: absolute; left: 93px; /* 矩形左上角的横坐标 */ top: 75px; /* 矩形左上角的纵坐标 */ width: 100px; /* 矩形的宽度 */ height: 40px; /* 矩形的高度 */ background-color: #e1b474; z-index: 1; border-radius: 10px; /* 圆角边框 */ } .text2 { position: absolute; /* 绝对定位 */ left: 98px; /* 距离左侧50px */ top:65px; /* 距离顶部50px */ font-size: 22px; /* 字号 */ margin: 10px; /* 边距 */ line-height: 20px; /* 行间距 */ color: #4f4f4f; /* 文本颜色 */ font-weight: bold; padding: 10px; /* 内边距 */ z-index: 7; } .text3 { position: absolute; /* 绝对定位 */ left: 132px; /* 距离左侧50px */ top:145px; /* 距离顶部50px */ font-size: 22px; /* 字号 */ margin: 10px; /* 边距 */ line-height: 20px; /* 行间距 */ color: #ffffff; /* 文本颜色 */ font-weight: bold; padding: 10px; /* 内边距 */ z-index: 7; } .text4 { position: absolute; /* 绝对定位 */ left: 82px; /* 距离左侧50px */ top:28px; /* 距离顶部50px */ font-size: 19px; /* 字号 */ margin: 10px; /* 边距 */ line-height: 20px; /* 行间距 */ color: #d56868; /* 文本颜色 */ font-weight: bold; padding: 10px; /* 内边距 */ z-index: 7; } .fanhui-image { position: absolute; /* 绝对定位 */ left: 290px; /* 距离左侧200px */ top: -10px; /* 距离顶部150px */ width: 70px; /* 图片宽度 */ height: auto; /* 图片高度自适应 */ z-index: 7; /* 设置z-index,确保在前面 */ } .bao-image { position: absolute; left: 9px; top: 28px; width: 100px; height: 100px; border-radius: 50%; z-index: 7; } /* 模态框样式 */ .modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; z-index: 8; } .modal-content { background: #ffffff; padding: 20px; border-radius: 10px; width: 80%; z-index: 8; } /* 输入框容器 */ .input-container { margin-top: 20px; display: flex; justify-content: space-between; align-items: center; z-index: 8; } /* 标签样式 */ .label { font-size: 20px; color: #333; z-index: 8; } /* 输入框样式 */ .input-field { width: 60%; padding: 10px; font-size: 18px; border: 1px solid #ddd; border-radius: 5px; z-index: 8; } /* 按钮样式 */ .upload-button { margin-left: 10px; z-index: 8; } .confirm-button, .cancel-button { margin-top: 20px; background-color: #007aff; color: #ffffff; padding: 10px; border-radius: 5px; z-index: 8; } .submit-text { text-align: center; /* 文本水平居中 */ line-height: 50px; /* 设置行高为按钮高度以实现垂直居中 */ /* 其他属性保持不变 */ background-color: #e1b474; border: 5px solid #ffffff; /* 设置边框颜色和宽度 */ border-radius: 15px; /* 设置圆角边框 */ width: -80px; /* 设置宽度 */ height: 50px; /* 设置高度 */ position: absolute; /* 绝对定位 */ left: 98px; /* 距离左侧50px */ top:600px; /* 距离顶部50px */ font-size: 22px; /* 字号 */ margin: 10px; /* 边距 */ line-height: 20px; /* 行间距 */ color: #4f4f4f; /* 文本颜色 */ z-index: 7; }