|
|
/* pages/teacher/Mode-arrive/Mode-arrive.wxss */
|
|
|
.container {
|
|
|
height: 100vh;
|
|
|
background-size: cover;
|
|
|
background-position: center;
|
|
|
}
|
|
|
.ball-image {
|
|
|
position: absolute; /* 绝对定位 */
|
|
|
left: -30px; /* 距离左侧200px */
|
|
|
top: 370px; /* 距离顶部150px */
|
|
|
width: 450px; /* 图片宽度 */
|
|
|
height: auto; /* 图片高度自适应 */
|
|
|
z-index: 2; /* 设置z-index，确保在前面 */
|
|
|
}
|
|
|
.back-image {
|
|
|
position: absolute; /* 绝对定位 */
|
|
|
left: 5px; /* 距离左侧200px */
|
|
|
top: 0px; /* 距离顶部150px */
|
|
|
width: 70px; /* 图片宽度 */
|
|
|
height: auto; /* 图片高度自适应 */
|
|
|
z-index: 2; /* 设置z-index，确保在前面 */
|
|
|
}
|
|
|
.circle {
|
|
|
width: 65px; /* 圆形的宽度 */
|
|
|
height: 65px; /* 圆形的高度 */
|
|
|
background-color: #80acd2; /* 圆形的背景颜色 */
|
|
|
border-radius: 50%; /* 将矩形变成圆形 */
|
|
|
position: absolute;
|
|
|
left: 300px;
|
|
|
top: 6px;
|
|
|
z-index: 3;
|
|
|
}
|
|
|
.rank-image {
|
|
|
position: absolute; /* 绝对定位 */
|
|
|
left: 300px; /* 距离左侧200px */
|
|
|
top: 15px; /* 距离顶部150px */
|
|
|
width: 65px; /* 图片宽度 */
|
|
|
height: auto; /* 图片高度自适应 */
|
|
|
z-index: 3; /* 设置z-index，确保在前面 */
|
|
|
}
|
|
|
.rectangle {
|
|
|
position: absolute;
|
|
|
left: 30px; /* 矩形左上角的横坐标 */
|
|
|
top: 120px; /* 矩形左上角的纵坐标 */
|
|
|
width: 320px; /* 矩形的宽度 */
|
|
|
height: 180px; /* 矩形的高度 */
|
|
|
background-color: #ffffff; /* 原色，透明度50% */
|
|
|
z-index: 2;
|
|
|
border-radius: 42px; /* 圆角边框 */
|
|
|
border: 1px solid #bbbbbb; /* 矩形的边框 */
|
|
|
box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, 0.5); /* 添加阴影 */
|
|
|
display: flex; /* 使用 flexbox 布局 */
|
|
|
align-items: center; /* 垂直居中 */
|
|
|
justify-content: space-around; /* 水平分布 */
|
|
|
}
|
|
|
.radio-label {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
margin-right: 5px; /* 元素之间的间距 */
|
|
|
margin-top: 85px;
|
|
|
}
|
|
|
|
|
|
.radio-input {
|
|
|
display: none;
|
|
|
|
|
|
}
|
|
|
|
|
|
.radio-custom {
|
|
|
width: 20px;
|
|
|
height: 20px;
|
|
|
border: 2px solid #333;
|
|
|
border-radius: 50%;
|
|
|
position: relative;
|
|
|
margin-right: 5px;
|
|
|
margin-top:0px;
|
|
|
}
|
|
|
|
|
|
.radio-input:checked + .radio-custom {
|
|
|
border-color: #bd3124; /* 选中后边框颜色 */
|
|
|
}
|
|
|
|
|
|
.radio-input:checked + .radio-custom::after {
|
|
|
content: "";
|
|
|
display: block;
|
|
|
width: 12px;
|
|
|
height: 12px;
|
|
|
background-color: #1684fc; /* 选中后圆点颜色 */
|
|
|
border-radius: 50%;
|
|
|
position: absolute;
|
|
|
top: 50%;
|
|
|
left: 50%;
|
|
|
transform: translate(-50%, -50%);
|
|
|
}
|
|
|
.text1 {
|
|
|
position: absolute; /* 绝对定位 */
|
|
|
left: 20px; /* 距离左侧50px */
|
|
|
top:-20px; /* 距离顶部50px */
|
|
|
font-size: 20px; /* 字号 */
|
|
|
margin: 10px; /* 边距 */
|
|
|
line-height: 25px; /* 行间距 */
|
|
|
color:#4f4f4f ; /* 文本颜色 */
|
|
|
font-weight: bold;
|
|
|
padding: 10px; /* 内边距 */
|
|
|
z-index: 4;
|
|
|
opacity: 0.9;
|
|
|
} |
