|
|
/* pages/student/dm/dm.wxss */
|
|
|
.container {
|
|
|
height: 100vh;
|
|
|
background-size: cover;
|
|
|
background-position: center;
|
|
|
}
|
|
|
.card-image {
|
|
|
position: absolute; /* 绝对定位 */
|
|
|
left: 210px; /* 距离左侧200px */
|
|
|
top: 510px; /* 距离顶部150px */
|
|
|
width: 150px; /* 图片宽度 */
|
|
|
height: auto; /* 图片高度自适应 */
|
|
|
z-index: 2; /* 设置z-index，确保在前面 */
|
|
|
}
|
|
|
.green-image {
|
|
|
position: absolute; /* 绝对定位 */
|
|
|
left: -30px; /* 距离左侧200px */
|
|
|
top: -80px; /* 距离顶部150px */
|
|
|
width: 300px; /* 图片宽度 */
|
|
|
height: auto; /* 图片高度自适应 */
|
|
|
z-index: 2; /* 设置z-index，确保在前面 */
|
|
|
}
|
|
|
.green-image1 {
|
|
|
position: absolute; /* 绝对定位 */
|
|
|
left: -50px; /* 距离左侧更左边，例如减小到 -100px */
|
|
|
top: -90px; /* 距离顶部更高，例如减小到 -100px */
|
|
|
width: 350px; /* 图片宽度 */
|
|
|
height: auto; /* 图片高度自适应 */
|
|
|
z-index: 2; /* 设置z-index，确保在前面 */
|
|
|
}
|
|
|
.green-image2 {
|
|
|
position: absolute; /* 绝对定位 */
|
|
|
left: -20px; /* 距离左侧更左边，例如减小到 -100px */
|
|
|
top: -45px; /* 距离顶部更高，例如减小到 -100px */
|
|
|
width: 350px; /* 图片宽度 */
|
|
|
height: auto; /* 图片高度自适应 */
|
|
|
z-index: 2; /* 设置z-index，确保在前面 */
|
|
|
}
|
|
|
.name {
|
|
|
position: absolute; /* 绝对定位 */
|
|
|
left: 20px; /* 距离左侧50px */
|
|
|
top:45px; /* 距离顶部50px */
|
|
|
font-size: 24px; /* 字号 */
|
|
|
margin: 10px; /* 边距 */
|
|
|
line-height: 20px; /* 行间距 */
|
|
|
color:#fdc904 ; /* 文本颜色 */
|
|
|
font-weight: bold;
|
|
|
padding: 10px; /* 内边距 */
|
|
|
z-index: 4;
|
|
|
opacity: 0.9;
|
|
|
}
|
|
|
.circle1 {
|
|
|
width: 250px; /* 圆形的宽度 */
|
|
|
height: 250px; /* 圆形的高度 */
|
|
|
background-color: #ffb6a4; /* 圆形的背景颜色 */
|
|
|
border: 5px solid #f1e029; /* 矩形的边框 */
|
|
|
box-shadow: 0px 0px 20px 10px rgba(0, 0, 0, 0.5); /* 添加阴影 */
|
|
|
border-radius: 50%; /* 将矩形变成圆形 */
|
|
|
position: absolute;
|
|
|
left: 50px;
|
|
|
top: 250px;
|
|
|
z-index: 3;
|
|
|
}
|
|
|
.hu-image {
|
|
|
position: absolute; /* 绝对定位 */
|
|
|
left: 45px; /* 距离左侧更左边，例如减小到 -100px */
|
|
|
top: 250px; /* 距离顶部更高，例如减小到 -100px */
|
|
|
width: 270px; /* 图片宽度 */
|
|
|
height: auto; /* 图片高度自适应 */
|
|
|
z-index: 5; /* 设置z-index，确保在前面 */
|
|
|
}
|
|
|
.hu-image2 {
|
|
|
position: absolute; /* 绝对定位 */
|
|
|
left: 65px; /* 距离左侧更左边，例如减小到 -100px */
|
|
|
top: 270px; /* 距离顶部更高，例如减小到 -100px */
|
|
|
width: 230px; /* 图片宽度 */
|
|
|
height: auto; /* 图片高度自适应 */
|
|
|
z-index: 5; /* 设置z-index，确保在前面 */
|
|
|
}
|
|
|
.dm-text {
|
|
|
position: absolute; /* 绝对定位 */
|
|
|
left: 75px; /* 距离左侧50px */
|
|
|
top:345px; /* 距离顶部50px */
|
|
|
font-size: 40px; /* 字号 */
|
|
|
margin: 10px; /* 边距 */
|
|
|
line-height: 20px; /* 行间距 */
|
|
|
color:#767676 ; /* 文本颜色 */
|
|
|
font-weight: bold;
|
|
|
padding: 10px; /* 内边距 */
|
|
|
z-index: 7;
|
|
|
opacity: 0.9;
|
|
|
}
|
|
|
.card-text {
|
|
|
position: absolute; /* 绝对定位 */
|
|
|
left: 200px; /* 距离左侧50px */
|
|
|
top:620px; /* 距离顶部50px */
|
|
|
font-size: 25px; /* 字号 */
|
|
|
margin: 10px; /* 边距 */
|
|
|
line-height: 20px; /* 行间距 */
|
|
|
color:#fdc904 ; /* 文本颜色 */
|
|
|
font-weight: bold;
|
|
|
padding: 10px; /* 内边距 */
|
|
|
z-index: 7;
|
|
|
opacity: 0.9;
|
|
|
}
|
|
|
.fanhui-image {
|
|
|
position: absolute; /* 绝对定位 */
|
|
|
left: 0px; /* 距离左侧200px */
|
|
|
top: 0px; /* 距离顶部150px */
|
|
|
width: 70px; /* 图片宽度 */
|
|
|
height: auto; /* 图片高度自适应 */
|
|
|
z-index: 7; /* 设置z-index，确保在前面 */
|
|
|
|
|
|
}
|
|
|
.grade1 {
|
|
|
position: absolute; /* 绝对定位 */
|
|
|
left: 20px; /* 距离左侧50px */
|
|
|
top:45px; /* 距离顶部50px */
|
|
|
font-size: 24px; /* 字号 */
|
|
|
margin: 10px; /* 边距 */
|
|
|
line-height: 20px; /* 行间距 */
|
|
|
color:#fdc904 ; /* 文本颜色 */
|
|
|
font-weight: bold;
|
|
|
padding: 10px; /* 内边距 */
|
|
|
z-index: 4;
|
|
|
opacity: 0.9;
|
|
|
} |
