|
|
/* 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，确保在前面 */
|
|
|
}
|
|
|
.nobody-image {
|
|
|
position: absolute; /* 绝对定位 */
|
|
|
left: -8px; /* 距离左侧200px */
|
|
|
top: 45px; /* 距离顶部150px */
|
|
|
width: 400px; /* 图片宽度 */
|
|
|
height: auto; /* 图片高度自适应 */
|
|
|
z-index: 3; /* 设置z-index，确保在前面 */
|
|
|
}
|
|
|
.rectangle1 {
|
|
|
position: absolute;
|
|
|
left: 90px; /* 矩形左上角的横坐标 */
|
|
|
top: 305px; /* 矩形左上角的纵坐标 */
|
|
|
width: 180px; /* 矩形的宽度 */
|
|
|
height: 60px; /* 矩形的高度 */
|
|
|
background-color: #ffb6a4;
|
|
|
z-index: 3;
|
|
|
border: 7px solid #78ba7d; /* 矩形的边框 */
|
|
|
}
|
|
|
.rectangle2 {
|
|
|
position: absolute;
|
|
|
left: 90px; /* 矩形左上角的横坐标 */
|
|
|
top: 425px; /* 矩形左上角的纵坐标 */
|
|
|
width: 180px; /* 矩形的宽度 */
|
|
|
height: 60px; /* 矩形的高度 */
|
|
|
background-color: #ffb6a4;
|
|
|
z-index: 3;
|
|
|
border: 7px solid #78ba7d; /* 矩形的边框 */
|
|
|
}
|
|
|
.text1 {
|
|
|
position: absolute; /* 绝对定位 */
|
|
|
left: 105px; /* 距离左侧50px */
|
|
|
top:310px; /* 距离顶部50px */
|
|
|
font-size: 28px; /* 字号 */
|
|
|
margin: 10px; /* 边距 */
|
|
|
line-height: 20px; /* 行间距 */
|
|
|
color: #4f4f4f; /* 文本颜色 */
|
|
|
font-weight: bold;
|
|
|
padding: 10px; /* 内边距 */
|
|
|
z-index: 4;
|
|
|
opacity: 0.9;
|
|
|
}
|
|
|
.text2 {
|
|
|
position: absolute; /* 绝对定位 */
|
|
|
left: 105px; /* 距离左侧50px */
|
|
|
top:430px; /* 距离顶部50px */
|
|
|
font-size: 28px; /* 字号 */
|
|
|
margin: 10px; /* 边距 */
|
|
|
line-height: 20px; /* 行间距 */
|
|
|
color: #4f4f4f; /* 文本颜色 */
|
|
|
font-weight: bold;
|
|
|
padding: 10px; /* 内边距 */
|
|
|
z-index: 4;
|
|
|
opacity: 0.9;
|
|
|
}
|
|
|
.circle1 {
|
|
|
width: 60px; /* 圆形的宽度 */
|
|
|
height: 60px; /* 圆形的高度 */
|
|
|
background-color: #ffffff; /* 圆形的背景颜色 */
|
|
|
border: 5px solid #ffd67b; /* 矩形的边框 */
|
|
|
|
|
|
border-radius: 50%; /* 将矩形变成圆形 */
|
|
|
position: absolute;
|
|
|
left:45px;
|
|
|
top: 290px;
|
|
|
z-index: 3;
|
|
|
}
|
|
|
.circle2 {
|
|
|
width: 95px; /* 圆形的宽度 */
|
|
|
height: 55px; /* 圆形的高度 */
|
|
|
background-color: #ffffff; /* 圆形的背景颜色 */
|
|
|
border: 5px solid #ffd67b; /* 矩形的边框 */
|
|
|
|
|
|
border-radius: 50%; /* 将矩形变成圆形 */
|
|
|
position: absolute;
|
|
|
left: 10px;
|
|
|
top: 390px;
|
|
|
z-index: 3;
|
|
|
}
|
|
|
.circle3 {
|
|
|
width: 45px; /* 圆形的宽度 */
|
|
|
height: 45px; /* 圆形的高度 */
|
|
|
background-color: #ffffff; /* 圆形的背景颜色 */
|
|
|
border: 5px solid #ffd67b; /* 矩形的边框 */
|
|
|
|
|
|
border-radius: 50%; /* 将矩形变成圆形 */
|
|
|
position: absolute;
|
|
|
left:255px;
|
|
|
top: 350px;
|
|
|
z-index: 3;
|
|
|
}
|
|
|
.grade1 {
|
|
|
position: absolute; /* 绝对定位 */
|
|
|
left: -20px; /* 距离左侧50px */
|
|
|
top:0px; /* 距离顶部50px */
|
|
|
font-size: 22px; /* 字号 */
|
|
|
margin: 10px; /* 边距 */
|
|
|
line-height: 20px; /* 行间距 */
|
|
|
color:#78ba7d ; /* 文本颜色 */
|
|
|
font-weight: bold;
|
|
|
padding: 10px; /* 内边距 */
|
|
|
z-index: 4;
|
|
|
opacity: 0.9;
|
|
|
}
|
|
|
.grade2 {
|
|
|
position: absolute; /* 绝对定位 */
|
|
|
left: -5px; /* 距离左侧50px */
|
|
|
top:-5px; /* 距离顶部50px */
|
|
|
font-size: 22px; /* 字号 */
|
|
|
margin: 10px; /* 边距 */
|
|
|
line-height: 20px; /* 行间距 */
|
|
|
color:#78ba7d ; /* 文本颜色 */
|
|
|
font-weight: bold;
|
|
|
padding: 10px; /* 内边距 */
|
|
|
z-index: 4;
|
|
|
opacity: 0.9;
|
|
|
}
|
|
|
.grade3 {
|
|
|
position: absolute; /* 绝对定位 */
|
|
|
left: -10px; /* 距离左侧50px */
|
|
|
top:-10px; /* 距离顶部50px */
|
|
|
font-size: 26px; /* 字号 */
|
|
|
margin: 10px; /* 边距 */
|
|
|
line-height: 20px; /* 行间距 */
|
|
|
color:#bd3124 ; /* 文本颜色 */
|
|
|
font-weight: bold;
|
|
|
padding: 10px; /* 内边距 */
|
|
|
z-index: 4;
|
|
|
opacity: 0.9;
|
|
|
}
|
|
|
.rectangle3 {
|
|
|
position: absolute;
|
|
|
left: 45px; /* 矩形左上角的横坐标 */
|
|
|
top: 535px; /* 矩形左上角的纵坐标 */
|
|
|
width: 280px; /* 矩形的宽度 */
|
|
|
height: 50px; /* 矩形的高度 */
|
|
|
background-color: #ffffff;
|
|
|
z-index: 3;
|
|
|
border: 1px solid #bbbbbb; /* 矩形的边框 */
|
|
|
border-radius: 46px;
|
|
|
box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.5); /* 添加阴影 */
|
|
|
}
|
|
|
input {
|
|
|
margin-top: 10px;
|
|
|
margin-left: 30px;
|
|
|
font-size: 16px;
|
|
|
color: #333;
|
|
|
padding: 5px;
|
|
|
z-index: 4;
|
|
|
}
|
|
|
.confirm-button {
|
|
|
width: 80px !important; /* 用于测试优先级问题 */
|
|
|
left: -5px; /* 距离左侧50px */
|
|
|
top:520px; /* 距离顶部50px */
|
|
|
padding: 5px; /* 内边距，控制按钮大小 */
|
|
|
font-size: 18px; /* 字号 */
|
|
|
color: #fcfcfc; /* 按钮文本颜色 */
|
|
|
background-color: #3662e5; /* 按钮背景颜色 */
|
|
|
border: 3px solid #e7cd2d; /* 矩形的边框 */
|
|
|
border-radius: 7px ; /* 圆角边框 */
|
|
|
cursor: pointer; /* 鼠标悬停时变成手指形状 */
|
|
|
z-index: 4
|
|
|
}
|
|
|
|
|
|
/* 悬停效果 */
|
|
|
.confirm-button:hover {
|
|
|
background-color: #0056b3; /* 悬停时按钮颜色 */
|
|
|
}
|
|
|
.rectangleall {
|
|
|
position: absolute;
|
|
|
left: 0px; /* 矩形左上角的横坐标 */
|
|
|
top: 0px; /* 矩形左上角的纵坐标 */
|
|
|
width: 375px; /* 矩形的宽度 */
|
|
|
height: 724px; /* 矩形的高度 */
|
|
|
background-color: #4F4F4F;
|
|
|
z-index: 5;
|
|
|
opacity: 0.73;
|
|
|
}
|
|
|
.rectangleother {
|
|
|
position: absolute;
|
|
|
left: 80px; /* 矩形左上角的横坐标 */
|
|
|
top: 250px; /* 矩形左上角的纵坐标 */
|
|
|
width: 205px; /* 矩形的宽度 */
|
|
|
height: 142px; /* 矩形的高度 */
|
|
|
background-color: #fdc904;
|
|
|
border-radius: 36px;
|
|
|
z-index: 5;
|
|
|
}
|
|
|
.rectangleother {
|
|
|
position: absolute;
|
|
|
left: 67px; /* 矩形左上角的横坐标 */
|
|
|
top: 252px; /* 矩形左上角的纵坐标 */
|
|
|
width: 225px; /* 矩形的宽度 */
|
|
|
height: 162px; /* 矩形的高度 */
|
|
|
background-color: #fdc904;
|
|
|
border-radius: 36px;
|
|
|
z-index: 6;
|
|
|
}
|
|
|
.rectangleother2 {
|
|
|
position: absolute;
|
|
|
left: 45px; /* 矩形左上角的横坐标 */
|
|
|
top: 230px; /* 矩形左上角的纵坐标 */
|
|
|
width: 255px; /* 矩形的宽度 */
|
|
|
height: 192px; /* 矩形的高度 */
|
|
|
background-color: #ffffff;
|
|
|
border: 7px solid #3764dd; /* 矩形的边框 */
|
|
|
border-radius: 36px;
|
|
|
z-index: 5;
|
|
|
}
|
|
|
.text3 {
|
|
|
position: absolute; /* 绝对定位 */
|
|
|
left: 20px; /* 距离左侧50px */
|
|
|
top:0px; /* 距离顶部50px */
|
|
|
font-size: 25px; /* 字号 */
|
|
|
margin: 10px; /* 边距 */
|
|
|
line-height: 30px; /* 行间距 */
|
|
|
color: #3764dd; /* 文本颜色 */
|
|
|
font-weight: bold;
|
|
|
padding: 10px; /* 内边距 */
|
|
|
z-index: 4;
|
|
|
opacity: 0.9;
|
|
|
}
|
|
|
.confirm-button2 {
|
|
|
width: 65px !important; /* 用于测试优先级问题 */
|
|
|
height: 33px;
|
|
|
left: 0px; /* 距离左侧50px */
|
|
|
top:120px; /* 距离顶部50px */
|
|
|
padding: 5px; /* 内边距，控制按钮大小 */
|
|
|
font-size: 16px; /* 字号 */
|
|
|
color: #101010; /* 按钮文本颜色 */
|
|
|
background-color: #ffffff; /* 按钮背景颜色 */
|
|
|
border: 3px solid #bbbbbb; /* 矩形的边框 */
|
|
|
border-radius: 4px ; /* 圆角边框 */
|
|
|
cursor: pointer; /* 鼠标悬停时变成手指形状 */
|
|
|
z-index: 8;
|
|
|
box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.5); /* 添加阴影 */
|
|
|
}
|
|
|
|
|
|
/* 悬停效果 */
|
|
|
.confirm-button2:hover {
|
|
|
background-color: #0056b3; /* 悬停时按钮颜色 */
|
|
|
}
|
