102201601work2/qianduan/pages/index/index.wxss

.container {
    height: 100vh;
    background-size: cover;
    background-position: center;
    z-index: -2; 
}
.teacher-image {
    position: absolute;     /* 绝对定位 */
    left: 50px;            /* 距离左侧200px */
    top: 222px;             /* 距离顶部150px */
    width: 260px;           /* 图片宽度 */
    height: auto;           /* 图片高度自适应 */
    z-index: 2;             /* 设置z-index，确保在前面 */
}
.text1 {
    position: absolute;      /* 绝对定位 */
    left: 28px;             /* 距离左侧50px */
    top:135px;              /* 距离顶部50px */
    font-size: 55px;        /* 字号 */
    margin: 10psx;           /* 边距 */
    line-height: 20px;      /* 行间距 */
    color: #4f4f4f;            /* 文本颜色 */
    font-weight: bold;
    padding: 10px;          /* 内边距 */
    z-index: 2;
}
.green1-image {
    position: absolute;     /* 绝对定位 */
    left: 0px;            /* 距离左侧200px */
    top: 0px;             /* 距离顶部150px */
    width: 180px;           /* 图片宽度 */
    height: auto;           /* 图片高度自适应 */
    z-index: 1;             /* 设置z-index，确保在前面 */
}
.green2-image {
    position: absolute;     /* 绝对定位 */
    left: 125px;            /* 距离左侧200px */
    top: 258px;             /* 距离顶部150px */
    width: 250px;           /* 图片宽度 */
    height: auto;           /* 图片高度自适应 */
    z-index: 1;             /* 设置z-index，确保在前面 */
}
.music-image {
    position: absolute;     /* 绝对定位 */
    left: 310px;            /* 距离左侧200px */
    top: 90px;             /* 距离顶部150px */
    width: 80px;           /* 图片宽度 */
    height: auto;           /* 图片高度自适应 */
    z-index: 3;             /* 设置z-index，确保在前面 */
}
.home-image {
    position: absolute;     /* 绝对定位 */
    left: 15px;            /* 距离左侧200px */
    top: 30px;             /* 距离顶部150px */
    width: 40px;           /* 图片宽度 */
    height: auto;           /* 图片高度自适应 */
    z-index: 3;             /* 设置z-index，确保在前面 */
}
.rectangle1 {
    position: absolute;
    left: 3px;     /* 矩形左上角的横坐标 */
    top: 25px;      /* 矩形左上角的纵坐标 */
    width: 60px;   /* 矩形的宽度 */
    height: 40px;   /* 矩形的高度 */
    border-radius: 50px;     /* 圆角边框 */
    background-color:#fff4e6 ;
    border: 3px dashed #e1b474;    /* 矩形的边框 */
    z-index: 1;  
}
.rectangle2 {
    position: absolute;
    left: 80px;     /* 矩形左上角的横坐标 */
    top: 520px;      /* 矩形左上角的纵坐标 */
    width: 200px;   /* 矩形的宽度 */
    height: 60px;   /* 矩形的高度 */
    border-radius: 28px;     /* 圆角边框 */
    background-color:#2b84fe ;
    border: 1px dashed #bbbbbb;    /* 矩形的边框 */
    z-index: 1;  
}
.rectangle3 {
    position: absolute;
    left: 80px;     /* 矩形左上角的横坐标 */
    top: 600px;      /* 矩形左上角的纵坐标 */
    width: 200px;   /* 矩形的宽度 */
    height: 60px;   /* 矩形的高度 */
    border-radius: 28px;     /* 圆角边框 */
    background-color:#ffdb17 ;
    border: 1px dashed #bbbbbb;    /* 矩形的边框 */
    z-index: 1;  
}
.text2 {
    position: absolute;      /* 绝对定位 */
    left: 105px;             /* 距离左侧50px */
    top:530px;              /* 距离顶部50px */
    font-size: 34px;        /* 字号 */
    margin: 10psx;           /* 边距 */
    line-height: 20px;      /* 行间距 */
    color: #f2f2f0;            /* 文本颜色 */
    font-weight: bold;
    padding: 10px;          /* 内边距 */
    z-index: 2;
}
.text3 {
    position: absolute;      /* 绝对定位 */
    left: 105px;             /* 距离左侧50px */
    top:610px;              /* 距离顶部50px */
    font-size: 34px;        /* 字号 */
    margin: 10psx;           /* 边距 */
    line-height: 20px;      /* 行间距 */
    color: #694b4b;            /* 文本颜色 */
    font-weight: bold;
    padding: 10px;          /* 内边距 */
    z-index: 2;
}