freeman/pages/cardM/cardM.wxss

/* pages/card/card.wxss */
.header{
  height: 250rpx;
  position: relative;
  width: 100%;
}
.title{
  position: absolute;
  font-family: "xiaowei";
  font-weight: 300;
  font-size: 70px;
  color: #333;
  top:30px;
  left: 20px;
}

.logo{
  position: absolute;
  top: 12px;
  right: 15px;
  height: 120px;
  width:120px;
  z-index: 1;
}
.swiperTtemBox {
  /* 底部内容样式 */
  height: 82vh;
  overflow: scroll;
  /* margin: 0rpx 0rpx; */
  background: white;
  font-size: 28rpx;
}
.picture16 {
  position: fixed;
  width: 35%;
  left: 50%;
  transform: translate(-50%,-50%);
  top: 10%;
}
.top-bar {
  display: flex;
  height: 100%;
  width: 100%;
  font-size: 80rpx;
  align-items: flex-end;
  justify-content: center;

  background: skyblue;
}
.bottom-bar {
  display: flex;
  height: 100%;
  width: 100%;
  font-size: 80rpx;
  align-items: flex-start;
  justify-content: center;
  background: rgb(137, 255, 137);
}
.left-bar {
  display: flex;
  height: 100%;
  width: 100%;
  font-size: 80rpx;
  align-items: center;
  justify-content: flex-end;
  background: rgb(255, 70, 70);
}
.right-bar {
  display: flex;
  height: 100%;
  width: 100%;
  font-size: 80rpx;
  align-items: center;
  justify-content: flex-start;
  background: rgb(255, 255, 70);
}
.main {
  display: flex;
  height: 100%;
  width: 100%;
  font-size: 100rpx;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: rgb(244, 244, 244);
}
.vertical-text {
  padding-left: 5%;
  padding-right: 5%;
  font-weight: bold;
  /* border: 2px solid black; */
  writing-mode: vertical-lr;
}
.horizontal-text {
  padding-top: 5%;
  padding-bottom: 5%;
  font-weight: bold;
  /* border: 2px solid black; */
}
.student-info1 {
  /* position: fixed;
  left: 22%;
  top: 25%;
  font-size: 40px; */
  position: fixed;
  top: 25%;
  left: 50%; /* 水平方向居中 */
  transform: translate(-50%, -50%); /* 将元素的中心点移动到父容器的中心 */
  font-size: 40px;
}
.student-info2 {
  display: flex;
  padding-top: 50%;
  font-size: 55px;
  font-weight: bold;
  justify-content: center;
}
.picker {
  width: 60%;
  height: 5%;
  position: fixed;
  top: 55%;
  left: 50%;
  transform: translate(-50%,-50%);
  border: 10px solid white;
  border-radius: 10px;
  font-size: 28px;
  background-color: white;
  text-align: center;
  line-height: 120%;
  justify-content: center;
  z-index: 2;
  font-weight: 600;
}

.pickerback{
  position: fixed;
  width: 65%;
  height: 7%;
  top: 55%;
  left: 50%;
  transform: translate(-50%,-50%);
  background-color: #4D95DF ;
  border: 10px solid #4D95DF;
  border-radius: 15px;
  z-index: 1;
}

.confirm-content {
  position: fixed;
  width: 45%;
  height: 4.5%;
  left: 50%;
  transform: translate(-50%,-50%);
  bottom: 23.7%;
  border: 2px solid #F8E39F;  /* 边框颜色 */
  background-color: #F8E39F;  /* 按钮背景颜色 */
  color: #F8E39F;             /* 字体颜色 */
  border-radius: 20px;        /* 圆角设置 */
  padding: 5px 10px;         /* 内边距 */
  font-size: 40px;            /* 字体大小 */
  text-align: center;
  justify-content: center;
}

.confirm-button {
  position: fixed;
  /* width: 10%; */
  height: 5%;
  bottom: 25.5%;
  left: 50%;
  transform: translate(-50%,-50%);
  background-color: white;  /* 内部背景颜色 */
  color: black;
  /* padding: 12px; */
  border-radius: 15px;        /* 内部圆角半径 */
  font-size: 28px;            /* 字体大小 */
  font-family: "youshebiaotihei";
  font-weight: 150;
  line-height: 60%;
  z-index: 2;
}

.picture42 {
  position: fixed;
  width: 40%;
  /* bottom: -10%; */
  /* right: 5%; */
}

.picture441 {
  position: fixed;
  width: 40%;
  bottom: 30%;
  right: 20%;
}

.picture20 {
  position: fixed;
  width: 40%;
  bottom: 30%;
  left: 20%;
}

.picture17 {
  position: fixed;
  width: 40%;
  top: 7%;
  /* bottom: 30%; */
}