102201601work2/qianduan/pages/teacher/teacher.wxss

/* pages/teacher/teacher.wxss */
.container {
    height: 100vh;
    background-size: cover;
    background-position: center;
}
.circle1 {
    width: 200px;  /* 圆形的宽度 */
    height: 200px; /* 圆形的高度 */
    background-color: #ffb6a4; /* 圆形的背景颜色 */
    border: 5px solid #f1e029;    /* 矩形的边框 */
    box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, 0.5); /* 添加阴影 */
    border-radius: 50%; /* 将矩形变成圆形 */
    position: absolute;
    left: 80px;     
    top: 210px;     
    z-index: 3;
}
.hu-image {
    position: absolute;     /* 绝对定位 */
    left: 70px;            /* 距离左侧更左边，例如减小到 -100px */
    top: 200px;             /* 距离顶部更高，例如减小到 -100px */
    width: 230px;           /* 图片宽度 */
    height: auto;           /* 图片高度自适应 */
    z-index: 5;             /* 设置z-index，确保在前面 */
}
.hu-image2 {
    position: absolute;     /* 绝对定位 */
    left: 85px;            /* 距离左侧更左边，例如减小到 -100px */
    top: 208px;             /* 距离顶部更高，例如减小到 -100px */
    width: 205px;           /* 图片宽度 */
    height: auto;           /* 图片高度自适应 */
    z-index: 5;             /* 设置z-index，确保在前面 */
}
.dm-text {
    position: absolute;      /* 绝对定位 */
    left: 80px;             /* 距离左侧50px */
    top:285px;              /* 距离顶部50px */
    font-size: 38px;        /* 字号 */
    margin: 10px;           /* 边距 */
    line-height: 20px;      /* 行间距 */
    color:#767676 ;            /* 文本颜色 */
    font-weight: bold;
    padding: 10px;          /* 内边距 */
    z-index: 7;
    opacity: 0.9;
}
.rectangle {
    position: absolute;
    left: 36px;     /* 矩形左上角的横坐标 */
    top: 80px;      /* 矩形左上角的纵坐标 */
    width: 305px;   /* 矩形的宽度 */
    height: 380px;   /* 矩形的高度 */
    background-color: #ffd67b; 
    border-radius: 41px;
    opacity: 0.18;
    z-index: 5;
}
.rectangle-name {
    position: absolute;
    left: 46px;     /* 矩形左上角的横坐标 */
    top: 105px;      /* 矩形左上角的纵坐标 */
    width: 285px;   /* 矩形的宽度 */
    height: 60px;   /* 矩形的高度 */
    background-color: #ffd67b; 
    border-radius: 30px;
    z-index: 6;
}
.md {
    position: absolute;      /* 绝对定位 */
    left: 60px;             /* 距离左侧50px */
    top:0px;              /* 距离顶部50px */
    font-size: 20px;        /* 字号 */
    margin: 10px;           /* 边距 */
    line-height: 20px;      /* 行间距 */
    color:#3f3f3f ;            /* 文本颜色 */
    font-weight: bold;
    padding: 10px;          /* 内边距 */
    z-index: 7;
    opacity: 0.9;
}
.rectangle-down {
    position: absolute;
    left: 36px;     /* 矩形左上角的横坐标 */
    top: 480px;      /* 矩形左上角的纵坐标 */
    width: 305px;   /* 矩形的宽度 */
    height: 200px;   /* 矩形的高度 */
    background-color: #ffd67b; 
    border-radius: 41px;
    opacity: 0.18;
    z-index: 5;
}
.choice {
    position: absolute;      /* 绝对定位 */
    left: 80px;             /* 距离左侧50px */
    top:500px;              /* 距离顶部50px */
    font-size: 24px;        /* 字号 */
    margin: 10px;           /* 边距 */
    line-height: 20px;      /* 行间距 */
    color:#6d6d6d ;            /* 文本颜色 */
    font-weight: bold;
    padding: 10px;          /* 内边距 */
    z-index: 9;
}
.hudong {
    position: absolute;      /* 绝对定位 */
    left: 65px;             /* 距离左侧50px */
    top:650px;              /* 距离顶部50px */
    font-size: 18px;        /* 字号 */
    margin: -30px;           /* 边距 */
    line-height: 20px;      /* 行间距 */
    color:#656565 ;            /* 文本颜色 */
    font-weight: bold;
    padding: 10px;          /* 内边距 */
    z-index: 9;
}
.confirm-button {
    width: 100px !important; /* 用于测试优先级问题 */
    left: 80px;             /* 距离左侧50px */
    top:-164px;              /* 距离顶部50px */
    padding: 5px;      /* 内边距，控制按钮大小 */
    font-size: 20px;        /* 字号 */
    color: #ffffff;            /* 按钮文本颜色 */
    background-color: #78ba7d; /* 按钮背景颜色 */
    border-radius: 4px ;     /* 圆角边框 */
    cursor: pointer;        /* 鼠标悬停时变成手指形状 */
    z-index: 5
}


.confirm-button:hover {
    background-color: #0056b3; /* 悬停时按钮颜色 */
}  

.confirm-button2 {
    width: 100px !important; /* 用于测试优先级问题 */
    left: -85px;             /* 距离左侧50px */
    top:-200px;              /* 距离顶部50px */
    padding: 5px;      /* 内边距，控制按钮大小 */
    font-size: 20px;        /* 字号 */
    color: #ffffff;            /* 按钮文本颜色 */
    background-color: #347acf; /* 按钮背景颜色 */
    border-radius: 4px ;     /* 圆角边框 */
    cursor: pointer;        /* 鼠标悬停时变成手指形状 */
    z-index: 5
}


 .confirm-button2:hover {
    background-color: #0056b3; /* 悬停时按钮颜色 */
 } 
 .dao {
    position: absolute;      /* 绝对定位 */
    left: 220px;             /* 距离左侧50px */
    top:10px;              /* 距离顶部50px */
    font-size: 25px;        /* 字号 */
    margin: 10px;           /* 边距 */
    line-height: 20px;      /* 行间距 */
    color:#3f3f3f ;            /* 文本颜色 */
    font-weight: bold;
    padding: 10px;          /* 内边距 */
    z-index: 7;
    opacity: 0.9;
}
.back-image {
    position: absolute;     /* 绝对定位 */
    left: 5px;            /* 距离左侧200px */
    top: 0px;             /* 距离顶部150px */
    width: 70px;           /* 图片宽度 */
    height: auto;           /* 图片高度自适应 */
    z-index: 2;             /* 设置z-index，确保在前面 */
}