102201601work2/qianduan/pages/teacher/Trank/rank-Mode2/rank-Mode2.wxss

/* pages/student/rank/rank.wxss */
.container {
  height: 100vh;
  background-size: cover;
  background-position: center;
}
.p1-image {
  position: absolute;     /* 绝对定位 */
  left: 0px;            /* 距离左侧200px */
  top: 500px;             /* 距离顶部150px */
  width: 200px;           /* 图片宽度 */
  height: auto;           /* 图片高度自适应 */
  z-index: 2;             /* 设置z-index，确保在前面 */
}
.p2-image {
  position: absolute;     /* 绝对定位 */
  left: 160px;            /* 距离左侧200px */
  top: 480px;             /* 距离顶部150px */
  width: 240px;           /* 图片宽度 */
  height: auto;           /* 图片高度自适应 */
  z-index: 2;             /* 设置z-index，确保在前面 */
}
.vs-image {
  position: absolute;     /* 绝对定位 */
  left: 120px;            /* 距离左侧200px */
  top: 530px;             /* 距离顶部150px */
  width: 200px;           /* 图片宽度 */
  height: auto;           /* 图片高度自适应 */
  z-index: 2;             /* 设置z-index，确保在前面 */
}
.rank1-image {
  position: absolute;     /* 绝对定位 */
  left: 80px;            /* 距离左侧200px */
  top:0px;             /* 距离顶部150px */
  width: 200px;           /* 图片宽度 */
  height: auto;           /* 图片高度自适应 */
  z-index: 2;             /* 设置z-index，确保在前面 */
}
.rectangle {
  position: absolute;
  left: 30px;     /* 矩形左上角的横坐标 */
  top: 100px;      /* 矩形左上角的纵坐标 */
  width: 280px;   /* 矩形的宽度 */
  height: 350px;   /* 矩形的高度 */
  background-color: rgba(132, 200, 200, 0.6); /* 原色，透明度50% */
  z-index: 1;
  border: 13px solid #bd92f4;    /* 矩形的边框 */
  border-radius: 30px;     /* 圆角边框 */
}
.rectangle-00 {
  position: absolute;
  left: 46px;     /* 矩形左上角的横坐标 */
  top: 155px;      /* 矩形左上角的纵坐标 */
  width: 274px;   /* 矩形的宽度 */
  height: 32px;   /* 矩形的高度 */
  background-color: #ececec; 
  z-index: 3;
  border-radius: 10px;     /* 圆角边框 */
  opacity: 0.7;
}
.rectangle-01 {
  position: absolute;
  left: 43px;     /* 矩形左上角的横坐标 */
  top: 192px;      /* 矩形左上角的纵坐标 */
  width: 280px;   /* 矩形的宽度 */
  height: 53px;   /* 矩形的高度 */
  background-color: #4a65b1; 
  z-index: 3;
  opacity: 0.9;
}
.rectangle-02 {
  position: absolute;
  left: 43px;     /* 矩形左上角的横坐标 */
  top: 247px;      /* 矩形左上角的纵坐标 */
  width: 280px;   /* 矩形的宽度 */
  height: 53px;   /* 矩形的高度 */
  background-color: #8a8eda; 
  z-index: 3;
  opacity: 0.7;
}
.rectangle-03 {
  position: absolute;
  left: 43px;     /* 矩形左上角的横坐标 */
  top: 302px;      /* 矩形左上角的纵坐标 */
  width: 280px;   /* 矩形的宽度 */
  height: 53px;   /* 矩形的高度 */
  background-color: #4a65b1; 
  z-index: 3;
  opacity: 0.9;
}
.rectangle-04 {
  position: absolute;
  left: 43px;     /* 矩形左上角的横坐标 */
  top: 357px;      /* 矩形左上角的纵坐标 */
  width: 280px;   /* 矩形的宽度 */
  height: 53px;   /* 矩形的高度 */
  background-color: #8a8eda; 
  z-index: 3;
  opacity: 0.7;
}
.rectangle-05 {
  position: absolute;
  left: 43px;     /* 矩形左上角的横坐标 */
  top: 412px;      /* 矩形左上角的纵坐标 */
  width: 280px;   /* 矩形的宽度 */
  height: 53px;   /* 矩形的高度 */
  background-color: #4a65b1; 
  z-index: 3;
  opacity: 0.9;
  border-radius: 7px;     /* 圆角边框 */
}
.rank-text {
  position: absolute;      /* 绝对定位 */
  left: 55px;             /* 距离左侧50px */
  top:140px;              /* 距离顶部50px */
  font-size: 18px;        /* 字号 */
  margin: 10px;           /* 边距 */
  line-height: 20px;      /* 行间距 */
  color: #4d4dcd;            /* 文本颜色 */
  font-weight: bold;
  padding: 10px;          /* 内边距 */
  z-index: 4
}

.circle1 {
  width: 45px;  /* 圆形的宽度 */
  height: 45px; /* 圆形的高度 */
  background-color: #cddf8a; /* 圆形的背景颜色 */
  border-radius: 50%; /* 将矩形变成圆形 */
  position: absolute;
  left: 50px;     
  top: 196px;     
  z-index: 3;
}
.circle2 {
  width: 45px;  /* 圆形的宽度 */
  height: 45px; /* 圆形的高度 */
  background-color:#cddf8a; /* 圆形的背景颜色 */
  border-radius: 50%; /* 将矩形变成圆形 */
  position: absolute;
  left: 50px;     
  top: 250px;     
  z-index: 3;
}
.circle3 {
  width: 45px;  /* 圆形的宽度 */
  height: 45px; /* 圆形的高度 */
  background-color: #cddf8a; /* 圆形的背景颜色 */
  border-radius: 50%; /* 将矩形变成圆形 */
  position: absolute;
  left: 50px;     
  top: 305px;     
  z-index: 3;
}
.circle4 {
  width: 45px;  /* 圆形的宽度 */
  height: 45px; /* 圆形的高度 */
  background-color: #cddf8a; /* 圆形的背景颜色 */
  border-radius: 50%; /* 将矩形变成圆形 */
  position: absolute;
  left: 50px;     
  top: 361px;     
  z-index: 3;
}
.circle5 {
  width: 45px;  /* 圆形的宽度 */
  height: 45px; /* 圆形的高度 */
  background-color: #cddf8a; /* 圆形的背景颜色 */
  border-radius: 50%; /* 将矩形变成圆形 */
  position: absolute;
  left: 50px;     
  top: 415px;     
  z-index: 3;
}
.image1 {
  position: absolute;     /* 绝对定位 */
  left: 58px;            /* 距离左侧200px */
  top:203px;             /* 距离顶部150px */
  width: 30px;           /* 图片宽度 */
  height: auto;           /* 图片高度自适应 */
  z-index: 3;             /* 设置z-index，确保在前面 */
}
.image2 {
  position: absolute;     /* 绝对定位 */
  left: 47px;            /* 距离左侧200px */
  top:246px;             /* 距离顶部150px */
  width: 52px;           /* 图片宽度 */
  height: auto;           /* 图片高度自适应 */
  z-index: 3;             /* 设置z-index，确保在前面 */
}
.image3 {
  position: absolute;     /* 绝对定位 */
  left: 47px;            /* 距离左侧200px */
  top:292px;             /* 距离顶部150px */
  width: 52px;           /* 图片宽度 */
  height: auto;           /* 图片高度自适应 */
  z-index: 3;             /* 设置z-index，确保在前面 */
}
.image4 {
  position: absolute;     /* 绝对定位 */
  left: 53px;            /* 距离左侧200px */
  top:359px;             /* 距离顶部150px */
  width: 38px;           /* 图片宽度 */
  height: auto;           /* 图片高度自适应 */
  z-index: 3;             /* 设置z-index，确保在前面 */
}
.image5 {
  position: absolute;     /* 绝对定位 */
  left: 0px;            /* 距离左侧200px */
  top:395px;             /* 距离顶部150px */
  width: 150px;           /* 图片宽度 */
  height: auto;           /* 图片高度自适应 */
  z-index: 3;             /* 设置z-index，确保在前面 */
}
.image6 {
  position: absolute;     /* 绝对定位 */
  left: 60px;            /* 距离左侧200px */
  top:180px;             /* 距离顶部150px */
  width: 40px;           /* 图片宽度 */
  height: auto;           /* 图片高度自适应 */
  z-index: 3;             /* 设置z-index，确保在前面 */
}

.fanhui-image {
  position: absolute;     /* 绝对定位 */
  left: 0px;            /* 距离左侧200px */
  top: 0px;             /* 距离顶部150px */
  width: 70px;           /* 图片宽度 */
  height: auto;           /* 图片高度自适应 */
  z-index: 7;             /* 设置z-index，确保在前面 */
  
}
.fanhui-image {
  position: absolute;     /* 绝对定位 */
  left: 0px;            /* 距离左侧200px */
  top: 0px;             /* 距离顶部150px */
  width: 70px;           /* 图片宽度 */
  height: auto;           /* 图片高度自适应 */
  z-index: 7;             /* 设置z-index，确保在前面 */
  
}



/* pages/student/rank/rank.wxss */
.container {
  height: 100vh;
  background-size: cover;
  background-position: center;
}

.rank1-image {
  position: absolute;     /* 绝对定位 */
  left: 80px;            /* 距离左侧200px */
  top:0px;             /* 距离顶部150px */
  width: 200px;           /* 图片宽度 */
  height: auto;           /* 图片高度自适应 */
  z-index: 2;             /* 设置z-index，确保在前面 */
}
.rectangle {
  position: absolute;
  left: 30px;     /* 矩形左上角的横坐标 */
  top: 100px;      /* 矩形左上角的纵坐标 */
  width: 280px;   /* 矩形的宽度 */
  height: 350px;   /* 矩形的高度 */
  background-color: #EE5A26; /* 原色，透明度50% */
  z-index: 1;
  opacity: 0.74;
  border: 13px solid #fbae3e;    /* 矩形的边框 */
  border-radius: 30px;     /* 圆角边框 */
}
.rectangle-00 {
  position: absolute;
  left: 46px;     /* 矩形左上角的横坐标 */
  top: 155px;      /* 矩形左上角的纵坐标 */
  width: 274px;   /* 矩形的宽度 */
  height: 32px;   /* 矩形的高度 */
  background-color: #f2de9a; 
  z-index: 3;
  border-radius: 10px;     /* 圆角边框 */
  opacity: 0.7;
}
.rectangle-01 {
  position: absolute;
  left: 43px;     /* 矩形左上角的横坐标 */
  top: 192px;      /* 矩形左上角的纵坐标 */
  width: 280px;   /* 矩形的宽度 */
  height: 53px;   /* 矩形的高度 */
  background-color: #FCCA00; 
  z-index: 3;
  opacity: 0.45;
}
.rectangle-02 {
  position: absolute;
  left: 43px;     /* 矩形左上角的横坐标 */
  top: 247px;      /* 矩形左上角的纵坐标 */
  width: 280px;   /* 矩形的宽度 */
  height: 53px;   /* 矩形的高度 */
  background-color: #F4CE98; 
  z-index: 3;
  opacity: 0.64;
}
.rectangle-03 {
  position: absolute;
  left: 43px;     /* 矩形左上角的横坐标 */
  top: 302px;      /* 矩形左上角的纵坐标 */
  width: 280px;   /* 矩形的宽度 */
  height: 53px;   /* 矩形的高度 */
  background-color: #FCCA00; 
  z-index: 3;
  opacity: 0.45;
}
.rectangle-04 {
  position: absolute;
  left: 43px;     /* 矩形左上角的横坐标 */
  top: 357px;      /* 矩形左上角的纵坐标 */
  width: 280px;   /* 矩形的宽度 */
  height: 53px;   /* 矩形的高度 */
  background-color: #F4CE98; 
  z-index: 3;
  opacity: 0.64;
}
.rectangle-05 {
  position: absolute;
  left: 43px;     /* 矩形左上角的横坐标 */
  top: 412px;      /* 矩形左上角的纵坐标 */
  width: 280px;   /* 矩形的宽度 */
  height: 53px;   /* 矩形的高度 */
  background-color: #FCCA00; 
  z-index: 3;
  opacity: 0.45;
  border-radius: 7px;     /* 圆角边框 */
}
.rank-text {
  position: absolute;      /* 绝对定位 */
  left: 55px;             /* 距离左侧50px */
  top:140px;              /* 距离顶部50px */
  font-size: 18px;        /* 字号 */
  margin: 10px;           /* 边距 */
  line-height: 20px;      /* 行间距 */
  color: #EE5A26;            /* 文本颜色 */
  font-weight: bold;
  padding: 10px;          /* 内边距 */
  opacity: 0.72;
  z-index: 4
}

.circle1 {
  width: 45px;  /* 圆形的宽度 */
  height: 45px; /* 圆形的高度 */
  background-color: #f2de9a; /* 圆形的背景颜色 */
  border-radius: 50%; /* 将矩形变成圆形 */
  position: absolute;
  left: 50px;     
  top: 196px;     
  z-index: 3;
}
.circle2 {
  width: 45px;  /* 圆形的宽度 */
  height: 45px; /* 圆形的高度 */
  background-color:#f2de9a; /* 圆形的背景颜色 */
  border-radius: 50%; /* 将矩形变成圆形 */
  position: absolute;
  left: 50px;     
  top: 250px;     
  z-index: 3;
}
.circle3 {
  width: 45px;  /* 圆形的宽度 */
  height: 45px; /* 圆形的高度 */
  background-color: #f2de9a; /* 圆形的背景颜色 */
  border-radius: 50%; /* 将矩形变成圆形 */
  position: absolute;
  left: 50px;     
  top: 305px;     
  z-index: 3;
}
.circle4 {
  width: 45px;  /* 圆形的宽度 */
  height: 45px; /* 圆形的高度 */
  background-color: #f2de9a; /* 圆形的背景颜色 */
  border-radius: 50%; /* 将矩形变成圆形 */
  position: absolute;
  left: 50px;     
  top: 361px;     
  z-index: 3;
}
.circle5 {
  width: 45px;  /* 圆形的宽度 */
  height: 45px; /* 圆形的高度 */
  background-color: #f2de9a; /* 圆形的背景颜色 */
  border-radius: 50%; /* 将矩形变成圆形 */
  position: absolute;
  left: 50px;     
  top: 415px;     
  z-index: 3;
}
.image1 {
  position: absolute;     /* 绝对定位 */
  left: 58px;            /* 距离左侧200px */
  top:203px;             /* 距离顶部150px */
  width: 30px;           /* 图片宽度 */
  height: auto;           /* 图片高度自适应 */
  z-index: 3;             /* 设置z-index，确保在前面 */
}
.image2 {
  position: absolute;     /* 绝对定位 */
  left: 47px;            /* 距离左侧200px */
  top:246px;             /* 距离顶部150px */
  width: 52px;           /* 图片宽度 */
  height: auto;           /* 图片高度自适应 */
  z-index: 3;             /* 设置z-index，确保在前面 */
}
.image3 {
  position: absolute;     /* 绝对定位 */
  left: 47px;            /* 距离左侧200px */
  top:292px;             /* 距离顶部150px */
  width: 52px;           /* 图片宽度 */
  height: auto;           /* 图片高度自适应 */
  z-index: 3;             /* 设置z-index，确保在前面 */
}
.image4 {
  position: absolute;     /* 绝对定位 */
  left: 53px;            /* 距离左侧200px */
  top:359px;             /* 距离顶部150px */
  width: 38px;           /* 图片宽度 */
  height: auto;           /* 图片高度自适应 */
  z-index: 3;             /* 设置z-index，确保在前面 */
}
.image5 {
  position: absolute;     /* 绝对定位 */
  left: 0px;            /* 距离左侧200px */
  top:395px;             /* 距离顶部150px */
  width: 150px;           /* 图片宽度 */
  height: auto;           /* 图片高度自适应 */
  z-index: 3;             /* 设置z-index，确保在前面 */
}
.LV1-image {
  position: absolute;     /* 绝对定位 */
  left: 20px;            /* 距离左侧200px */
  top:165px;             /* 距离顶部150px */
  width: 60px;           /* 图片宽度 */
  height: auto;           /* 图片高度自适应 */
  z-index: 3;             /* 设置z-index，确保在前面 */
}
.text1 {
  position: absolute;      /* 绝对定位 */
  left: 65px;             /* 距离左侧50px */
  top:165px;              /* 距离顶部50px */
  font-size: 20px;        /* 字号 */
  margin: 10px;           /* 边距 */
  line-height: 20px;      /* 行间距 */
  color: #f7f7f7;            /* 文本颜色 */
  font-weight: bold;
  padding: 10px;          /* 内边距 */
  z-index: 4;
  opacity: 0.9;
}
.text2 {
  position: absolute;      /* 绝对定位 */
  left: 65px;             /* 距离左侧50px */
  top:220px;              /* 距离顶部50px */
  font-size: 20px;        /* 字号 */
  margin: 10px;           /* 边距 */
  line-height: 20px;      /* 行间距 */
  color: #f7f7f7;            /* 文本颜色 */
  font-weight: bold;
  padding: 10px;          /* 内边距 */
  z-index: 4;
  opacity: 0.9;
}
.text3 {
  position: absolute;      /* 绝对定位 */
  left: 65px;             /* 距离左侧50px */
  top:275px;              /* 距离顶部50px */
  font-size: 20px;        /* 字号 */
  margin: 10px;           /* 边距 */
  line-height: 20px;      /* 行间距 */
  color: #f7f7f7;            /* 文本颜色 */
  font-weight: bold;
  padding: 10px;          /* 内边距 */
  z-index: 4;
  opacity: 0.9;
}
.text8 {
position: absolute;      /* 绝对定位 */
left: 170px;             /* 距离左侧50px */
top:275px;              /* 距离顶部50px */
font-size: 20px;        /* 字号 */
margin: 10px;           /* 边距 */
line-height: 20px;      /* 行间距 */
color: #f7f7f7;            /* 文本颜色 */
font-weight: bold;
padding: 10px;          /* 内边距 */
z-index: 4;
opacity: 0.9;
}
.text4 {
  position: absolute;      /* 绝对定位 */
  left: 65px;             /* 距离左侧50px */
  top:330px;              /* 距离顶部50px */
  font-size: 20px;        /* 字号 */
  margin: 10px;           /* 边距 */
  line-height: 20px;      /* 行间距 */
  color: #f7f7f7;            /* 文本颜色 */
  font-weight: bold;
  padding: 10px;          /* 内边距 */
  z-index: 4;
  opacity: 0.9;
}
.text9 {
position: absolute;      /* 绝对定位 */
left: 170px;             /* 距离左侧50px */
top:330px;              /* 距离顶部50px */
font-size: 20px;        /* 字号 */
margin: 10px;           /* 边距 */
line-height: 20px;      /* 行间距 */
color: #f7f7f7;            /* 文本颜色 */
font-weight: bold;
padding: 10px;          /* 内边距 */
z-index: 4;
opacity: 0.9;
}
.text5 {
  position: absolute;      /* 绝对定位 */
  left: 65px;             /* 距离左侧50px */
  top:388px;              /* 距离顶部50px */
  font-size: 20px;        /* 字号 */
  margin: 10px;           /* 边距 */
  line-height: 20px;      /* 行间距 */
  color: #f7f7f7;            /* 文本颜色 */
  font-weight: bold;
  padding: 10px;          /* 内边距 */
  z-index: 4;
  opacity: 0.9;
}
.text6 {
position: absolute;      /* 绝对定位 */
left: 170px;             /* 距离左侧50px */
top:165px;              /* 距离顶部50px */
font-size: 20px;        /* 字号 */
margin: 10px;           /* 边距 */
line-height: 20px;      /* 行间距 */
color: #f7f7f7;            /* 文本颜色 */
font-weight: bold;
padding: 10px;          /* 内边距 */
z-index: 4;
opacity: 0.9;
}
.text7 {
position: absolute;      /* 绝对定位 */
left: 170px;             /* 距离左侧50px */
top:220px;              /* 距离顶部50px */
font-size: 20px;        /* 字号 */
margin: 10px;           /* 边距 */
line-height: 20px;      /* 行间距 */
color: #f7f7f7;            /* 文本颜色 */
font-weight: bold;
padding: 10px;          /* 内边距 */
z-index: 4;
opacity: 0.9;
}
.text10 {
position: absolute;      /* 绝对定位 */
left: 170px;             /* 距离左侧50px */
top:388px;              /* 距离顶部50px */
font-size: 20px;        /* 字号 */
margin: 10px;           /* 边距 */
line-height: 20px;      /* 行间距 */
color: #f7f7f7;            /* 文本颜色 */
font-weight: bold;
padding: 10px;          /* 内边距 */
z-index: 4;
opacity: 0.9;
}
.fanhui-image {
  position: absolute;     /* 绝对定位 */
  left: 0px;            /* 距离左侧200px */
  top: 0px;             /* 距离顶部150px */
  width: 70px;           /* 图片宽度 */
  height: auto;           /* 图片高度自适应 */
  z-index: 7;             /* 设置z-index，确保在前面 */
  
}
.fanhui-image {
  position: absolute;     /* 绝对定位 */
  left: 0px;            /* 距离左侧200px */
  top: 0px;             /* 距离顶部150px */
  width: 70px;           /* 图片宽度 */
  height: auto;           /* 图片高度自适应 */
  z-index: 7;             /* 设置z-index，确保在前面 */
  
}
.green1-image {
  position: absolute;     /* 绝对定位 */
  left: 138px;            /* 距离左侧200px */
  top:400px;             /* 距离顶部150px */
  width: 280px;           /* 图片宽度 */
  height: auto;           /* 图片高度自适应 */
  z-index: 0;             /* 设置z-index，确保在前面 */
}
.green2-image {
  position: absolute;     /* 绝对定位 */
  left: 188px;            /* 距离左侧200px */
  top:50px;             /* 距离顶部150px */
  width: 250px;           /* 图片宽度 */
  height: auto;           /* 图片高度自适应 */
  z-index: 0;             /* 设置z-index，确保在前面 */
}
.green3-image {
  position: absolute;     /* 绝对定位 */
  left: -50px;            /* 距离左侧200px */
  top:200px;             /* 距离顶部150px */
  width: 250px;           /* 图片宽度 */
  height: auto;           /* 图片高度自适应 */
  z-index: 0;             /* 设置z-index，确保在前面 */
}