ssj_parent/pages/change_course/change_course.wxss

/* pages/change_course/change_course.wxss */
page {
  background: #fff;
}
.header-title {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 60rpx 30rpx;
  background: #F1F3FA;
}
.header-title-icon {
  width: 25rpx;
  height: 29rpx;
}
.header-title-text {
  margin: 0 50rpx;
  font-size: 30rpx;
  color: #FF6465;
}
.header-items {
  border-bottom: solid 1rpx rgba(220, 220, 220, .5);
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  padding-bottom: 30rpx;
}
.header-item {
  width: 14.28%;
  margin: 30rpx 0;
  text-align: center;
}
.header-item-title {
  font-size: 30rpx;
  color: #393939;
}
.header-item-text {
  padding: 15rpx 16rpx;
  border-radius: 80rpx;
  font-size: 24rpx;
  transition: all .3s;
}
.color-black {
  color: #7E7E7E;
}
.color-gray {
  color: #BFBFBF;
}
.header-item-text-active {
  color: #fff;
  background: #FF6465;
}
.header-item-circle-gray,
.header-item-circle-black,
.header-item-circle-red {
  position: relative;
}
.header-item-circle-gray::after,
.header-item-circle-black::after,
.header-item-circle-red::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 8rpx;
  height: 8rpx;
  border-radius: 100rpx;
  transform: translate(-50%, 180%);
}
.header-item-circle-gray::after {
  background:rgba(191, 191, 191, 1);
}
.header-item-circle-black::after {
  background:rgba(57, 57, 57, 1);
}
.header-item-circle-red::after {
  background:rgba(228, 92, 88, 1);
}
.section {
  padding: 40rpx 24rpx;
}
.section-title {
  font-size: 30rpx;
  color: #393939;
}
.section-items {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
}
.section-item {
  background: #F4F4F4;
  color: #FF6465;
  border-radius: 10rpx;
  padding: 20rpx 36rpx;
  font-size: 24rpx;
  margin: 25rpx 25rpx 0 0;
  background:rgba(255,100,101,0.2);
  border:2rpx solid rgba(255,100,101,1)
}
.section-item-active {
  background:#FF6465;
  color: #fff;
}
.section-item-noSelect{
  background:rgba(124,129,157,0.2);
  border:2rpx solid #7C819D;
  color: #7C819D;
}
.modal-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .3);
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal-wrapper {
  margin: 24rpx;
  width: 100%;
  border-radius: 24rpx;
  background: #fff;
  /* max-height: 90%; */
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}
.modal-title {
  font-size: 30rpx;
  color: #393939;
  margin: 40rpx auto;
  text-align: center;
}
.modal-picker-view {
  width: 100%;
  height: 200rpx;
  margin: 30rpx 0;
}
.modal-picker-indicator {
  line-height: 68rpx;
}
.modal-picker-view-column {
  text-align: center;
  line-height: 68rpx;
  color: #393939;
  font-size: 34rpx;
}
.modal-picker-view-column-cells {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.modal-picker-view-column-cell-green {
  color: #FF6465;
}
.modal-items {
  margin: 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}
.modal-item {
  margin: 10rpx;
  min-width: 20%;
  background: #F4F4F4;
  border-radius: 80rpx;
  font-size: 24rpx;
  color: #7E7E7E;
  padding: 20rpx 26rpx;
  text-align: center;
}
.modal-item-green {
  background: #FF6465;
  color: #fff;
}
.modal-btns {
  padding: 30rpx 30rpx 50rpx 30rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal-btn {
  font-size: 34rpx;
  flex: 1;
  text-align: center;
}
.modal-btn:nth-of-type(1) {
  border-right: solid 2rpx #DCDCDC;
}
.btn-gray {
  color: #7E7E7E;
}
.btn-green {
  color: #FF6465;
}