102201601work2/qianduan/pages/teacher/Mode-quiz/Mode-quiz.wxss

/* 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: 7
}

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