rollcall/Roll_Students/pages/AddClass/AddClass.wxss

.container {
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* 让元素从容器的顶部开始对齐 */
  align-items: center;
  height: 100vh;
  background-color: #f5f8f9;
  padding-top:20rpx;
}

.class-card {
  background-color: #f5f8f9;
  padding: 20rpx;
  margin-top: 20rpx; /* 每个卡片上方的间距 */
  border-radius: 20rpx;
  box-shadow: 4rpx 4rpx 6rpx rgba(64, 149, 229, 0.85);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 2rpx solid rgba(29,70,157,1);
  width: 600rpx;
  height: 100rpx;
}

.class-image{
  width:80rpx;
  height: 80rpx;
  border-radius: 10rpx;
  margin-right: 20rpx;
}

.class-info{
  white-space: pre;
  flex:1; /* 意味着该元素可以占用容器中所有可用的空间。 */
}

.class-name {
  font-size: 36rpx;
  font-weight: bold;
}

.class-details {
  font-size: 24rpx;
  color: #888888;
  display: flex; /* 使子元素以行内显示 */
  gap:20rpx;
}

.arrow {
  width: 16px;
  height: 16px;
}

.add-button {
  padding:0;
  margin: 0;
  flex:none;
  position: fixed; /* 固定在视口 */
  bottom: 75rpx; /* 距离底部20rpx */
  right: 75rpx; /* 距离右侧20rpx */
  width: 100rpx; /* 按钮宽度 */
  height: 100rpx; /* 按钮高度 */
  background-color: #f5f8f9; /*按钮颜色*/
  border: none; /* 去掉默认边框 */
  display:flex;
  justify-content: center; /* 图片在按钮内部水平居中 */
  align-items: center; /* 图片在按钮内部垂直居中 */
  box-sizing: border-box;
}

/* 图片样式 */
.add-image {
  width: 100rpx; /* 图片宽度 */
  height: 100rpx; /* 图片高度 */
}

/* 浮窗的覆盖层 通用 */
.modal {
  position: fixed; /* 绝对定位以覆盖整个视口 */
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5); /* 背景为半透明黑色 */
  display: flex; /* 使用flex布局 */
  justify-content: center; /* 居中对齐内容 */
  align-items: center; /* 垂直居中对齐 */
}

/* 浮窗内容 通用 */
.modal-content {
  background-color: #4095e5; /* 浮窗的背景颜色 */
  padding: 40rpx 20rpx; /* 内边距 */
  border-radius: 20rpx; /* 圆角 */
  width: 80%; /* 浮窗宽度为视口的80% */
  max-width: 500rpx; /* 最大宽度为500rpx */
}

/* 浮窗标题 通用 */
.modal-title {
  color: white;
  font-weight: bold;
  font-size: 46rpx; /* 字体大小 */
  margin-top: 30rpx;
  margin-bottom: 30rpx;
  text-shadow: 4rpx 4rpx 6rpx rgba(0, 0, 0, 0.4);
}

/* 输入框样式 */
.input-box {
  width: 90%; /* 输入框宽度占满父容器 */
  margin-top: 10rpx; /* 上方留出间隙 */
  padding: 25rpx; /* 内边距 */
  border: none; /* 去掉边框 */
  border-bottom: 2rpx solid #fff; /* 底部边框 */
  border-radius: 20rpx; /* 圆角 */
  background-color: #fff; /* 背景颜色 */
  color: black; /* 字体颜色 */
  box-shadow: 4rpx 4rpx 6rpx rgba(0, 0, 0, 0.4);
}

/* 设置 placeholder 的颜色 */
.input-box::-webkit-input-placeholder {
  color: #888888; /* 输入框班级名称的颜色 */
}

/* 浮窗按钮容器 通用 */
.modal-buttons {
  display: flex; /* 使用flex布局 */
  justify-content: space-between; /* 按钮间隔均匀 */
  margin-top: 20rpx; /* 上方留出空间 */
  gap:50rpx; /* 设置按钮之间的间距 */
  margin-left: 50rpx;
  margin-right: 50rpx;
}

/* 确认、取消按钮样式 通用 */
.confirm-button, .cancel-button {
  background-color: white; /* 按钮背景颜色 */
  color: #0014b7; /* 按钮文字颜色 */
  flex: 1; /* 等宽 */
  padding: 10rpx; /* 内边距 */
  border: none; /* 去掉默认边框 */
  border-radius: 20rpx; /* 圆角 */
  margin-left: 10rpx; /* 按钮间距 */
  box-shadow: 4rpx 4rpx 6rpx rgba(0, 0, 0, 0.4);
}

/* 文件选择部分 */
.file-selection {
  display: flex; /* 使用flex布局 */
  align-items: center; /* 垂直居中 */
  margin-bottom: 10rpx; /* 底部留出一些间距 */
}

/* 选择文件按钮样式 */
.select-file-button {
  background-color: white; /* 按钮背景颜色 */
  color: #0014b7; /* 按钮文字颜色 */
  padding: 15rpx; /* 内边距 */
  border: none; /* 去掉默认边框 */
  font-size: 30rpx;
  width: 200rpx;
  border-radius: 20rpx; /* 圆角 */
  margin-right: 20rpx; /* 按钮与文件名之间的间距 */
  box-shadow: 4rpx 4rpx 6rpx rgba(0, 0, 0, 0.4);
  box-sizing: border-box; /* 包含边距和内边距 */
}

/* 文件名的显示样式 */
.file-name {
  color: white; /* 文字颜色 */
}

/* 分隔线样式 */
.divider {
  height: 4rpx; /* 分隔线高度 */
  background-color: #0014b7; /* 分隔线颜色 */
  margin: 10rpx 0; /* 上下留出一些间距 */
}