yuminge-app/yun-min-program-plugin-master/packageI/donation_project/donationProjectDetails/donationProjectDetails.wxss

/* packageI/donation_project/donationProjectDetails/donationProjectDetails.wxss */

.wrapper {
  padding: 20rpx;
}

.container {
  width: 100%;
  background-color: #fff;
  border-radius: 15rpx;
}

.container .container-header {
  display: flex;
  justify-content: space-between;
  padding-top: 31rpx;
  padding-left: 25rpx;
}

.container .container-header .container-title {
  position: relative;
  display: flex;
  align-items: center;
  font-weight: bold;
  padding-left: 15rpx;
  font-size: 28rpx;
  color: #f15353;
}

.container .container-header .container-title::before {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  content: " ";
  display: block;
  width: 4rpx;
  height: 22rpx;
  background: #f15353;
}

.container .container-header .container-header-next {
  display: flex;
  align-items: center;
  color: #7f7f7f;
  font-size: 22rpx;
}

.brief {
  display: flex;
  padding: 30rpx;
  background: #fff;
}

.brief .desc_info {
  padding-left: 20rpx;
  text-align: left;
  overflow: hidden;
}

.brief .desc_info .name {
  font-size: 30rpx;
  color: #333;
}

.brief .desc_info .choice_time {
  display: inline-flex;
  align-items: center;
  height: 52rpx;
  margin-top: 30rpx;
  padding: 0 22rpx;
  color: #f15353;
  border-radius: 6rpx;
  border: solid 1rpx #f15353;
}

.brief .desc_info .choice_time text {
  font-size: 24rpx;
  padding-right: 13rpx;
}

.donation-list {
  padding: 13rpx 0;
}

.donation-list .donation-item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 29rpx 25rpx;
  padding-bottom: 26rpx;
  text-align: left;
  border-bottom: 1rpx solid #f6f6f6;
}

.donation-list .donation-item:last-child {
  border-bottom: none;
}

.donation-list .donation-item .project_name {
  font-size: 30rpx;
  color: #333;
}

.donation-list .donation-item .price {
  margin-top: 13rpx;
  font-size: 26rpx;
  color: #333;
}

.donation-list .donation-item .price .small {
  font-size: 24rpx;
  color: #f15353;
}

.donation-list .donation-item .price .num {
  font-size: 30rpx;
  color: #f15353;
}

.donation-list .donation-item .project_ps {
  margin-top: 32rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 22rpx;
  color: #6f6f6f;
}

.picture {
  margin-top: 20rpx;
  padding-bottom: 22rpx;
}

.picture .container-icon-title {
  display: flex;
  align-items: center;
  color: #f15353;
}

.picture .container-icon-title text {
  margin-left: 16rpx;
  font-size: 28rpx;
}

.picture .container-icon-title .icon-customform_list_3 {
  font-size: 27rpx;
  transform: translateY(2rpx);
}

.picture .container-icon-title .icon-fontclass-ship {
  height: 32rpx;
  width: 37rpx;
  display: flex;
  align-items: center;
  font-size: 45rpx;
}

.picture .picture-list {
  display: flex;
  padding: 0 25rpx;
}

.picture .picture-list .picture-container {
  display: flex;
  overflow-x: scroll;
}

.picture .picture-list .picture-container .picture-item {
  display: flex;
  flex-direction: column;
  width: 244rpx;
  padding-top: 19rpx;
  padding-left: 25rpx;
  padding-bottom: 22rpx;
}

.picture .picture-list .picture-container .picture-item:first-child {
  padding-left: 0;
  width: 220rpx;
}

.picture .picture-list .picture-container .picture-item .project_name {
  text-align: center;
  margin-top: 16rpx;
  font-size: 22rpx;
  color: #2a2a2a;
}

.face {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 220rpx;
  height: 146rpx;
  margin: 6.5rpx 0;
  background-color: #ededed;
  border-radius: 10rpx;
}

.face image,
.face video {
  width: 220rpx;
  height: 146rpx;
  border-radius: 10rpx;
}

.face text {
  font-size: 26rpx;
  color: #7c7c7c;
}

.face .playerBtn {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 44rpx;
  height: 44rpx;
  margin: auto;
  border-radius: 50%;
}

.face .playerBtn i {
  color: #fff;
  font-size: 40rpx;
}

.time_select {
  padding-bottom: 1.375rem;
}

.time_select .disabled {
  opacity: 0.5;
}

.time_select .time_select_header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 1.53rem;
}

.time_select .time_select_header .icon-left {
  transform: rotateY(180deg);
}

.time_select .time_select_header .iconfont {
  color: #a0a0a0;
  font-size: 0.825rem;
}

.time_select .time_select_header text {
  padding: 0 1.5rem;
  font-size: 1.125rem;
  color: #151414;
}

.time_select .time_select_container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  justify-items: center;
  padding-top: 0.3rem;
}

.time_select .time_select_container .time_select_item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.688rem;
  height: 1.375rem;
  margin-top: 2rem;
  font-size: 0.875rem;
  color: #202020;
  border-radius: 0.125rem;
}

.time_select .time_select_container .time_select_item.active {
  color: #fff;
  background-color: #f15353;
}

.time_select .time_searct_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15.906rem;
  height: 2.125rem;
  margin: 2.3rem auto 0;
  font-size: 1rem;
  color: #fff;
  background-color: #f15353;
  border-radius: 0.313rem;
}