payProject/subPackages/pages/subCardDetails/subCardDetails.wxss

/* pages/subCardDetails/subCardDetails.wxss */

.termValidity,.availableItems,.instructionsUse,.reminder{
  margin: 20rpx;
  background-color: #fff;
  border-radius: 24rpx;
  height: 152rpx;
  padding: 24rpx;
  box-sizing: border-box;
  box-shadow: 0px -1px 8px 0px rgba(0,0,0,0.04);
}

.availableItems,.instructionsUse,.reminder{
  height: auto;
}

.termValidity view,.instructionsUse view,.reminder view{
  color: #333333;
  font-size: 32rpx;
  font-family: PingFangSC-Medium;
  text-align: left;
  white-space: nowrap;
  height: 44rpx;
  line-height: 44rpx;
  margin-bottom: 20rpx;
}

.termValidity text,.instructionsUse text,.reminder text{
  color: #999999;
  font-size: 28rpx;
  font-family: PingFangSC-Regular;
  text-align: left;
  white-space: nowrap;
  height: 40rpx;
  line-height: 40rpx;
}

.reminder text{
  display: block;
  margin-bottom: 20rpx;
}

.reminder text:last-child{
  margin-bottom: 0rpx;
}

.instructionsUse text{
  width: 662rpx;
  white-space: normal;
}

.availableItems .title{
  width: 128rpx;
  height: 44rpx;
  color: #333333;
  font-size: 32rpx;
  font-family: PingFangSC-Medium;
  text-align: left;
  white-space: nowrap;
  line-height: 44rpx;
  margin-bottom: 24rpx;
}

.item{
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.item:last-child{
  margin-bottom: 0rpx;
}

.left image{
  width: 130rpx;
  height: 130rpx;
  object-fit: contain;
  border-radius: 12rpx;
}

.right{
  margin-left: 14rpx;
}

.rightTitle{
  width: 506rpx;
  height: 80rpx;
  color: #292929;
  font-size: 28rpx;
  font-family: PingFangSC-Regular;
  text-align: justify;
  line-height: 40rpx;
  margin-left: 10rpx;
}

.frequencyToUse{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.frequency{
  height: 50rpx;
  color: #FA7D22;
  font-size: 36rpx;
  font-family: PingFangSC-Medium;
  text-align: right;
  white-space: nowrap;
}

.toUse{
  background-color: #FA7D22;
  border-radius: 24rpx;
  height: 50rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 104rpx;
  color: #FFFFFF;
  font-size: 24rpx;
  font-family: PingFangSC-Medium;
  text-align: left;
  white-space: nowrap;
}
.toUserActive{
  background-color: #999;
}
.used{
  color: #999;
}

.usedBg{
  background-color: #E5E5E5;
}

.recommendYouTitle{
  display: flex;
  justify-content: center;
  align-items: center;
}

.recommendYouTitle view{
  background-color: #E9E9E9;
  width: 130rpx;
  height: 2rpx;
}

.recommendYouTitle text{
  width: 96rpx;
  height: 34rpx;
  color: #666666;
  font-size: 24rpx;
  font-family: PingFangSC-Regular;
  text-align: left;
  white-space: nowrap;
  line-height: 34rpx;
  margin: 0rpx 20rpx;
}

.recommendYouCon{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 20rpx;
}

.recommendYouConItem{
  background-color: #FFFFFF;
  border-radius: 24rpx;
  width: 344rpx;
  display: flex;
  flex-direction: column;
  margin-bottom: 20rpx;
}

.recommendYouConItemTop{
  font-size: 0rpx;
}

.recommendYouConItemTop image{
  width: 344rpx;
  height: 344rpx;
  border-radius: 24rpx 24rpx 0rpx 0rpx;
}

.recommendYouConItemBottom{
  margin-top: 20rpx;
  padding: 0rpx 24rpx;
}

.recommendYouConItemBottom .title{
  width: 296rpx;
  height: 40rpx;
  color: #333333;
  font-size: 28rpx;
  font-family: PingFangSC-Medium;
  text-align: left;
  white-space: nowrap;
  line-height: 40rpx;
  overflow:hidden;
  text-overflow: ellipsis;
}

.descCon{
  display: flex;
  
  margin-top: 22rpx;
}

.descCon .desc{
  color: #666666;
  font-size: 24rpx;
  font-family: PingFangSC-Medium;
  text-align: left;
  white-space: nowrap;
  line-height: 34rpx;
  margin: 0rpx 24rpx 0 0rpx;
  background-color: rgba(247,247,247,1);
  border-radius: 8rpx;
  height: 38rpx;
  width: 104rpx;
  padding: 2rpx 0rpx 0rpx 4rpx;
}

.priceCart{
  margin-top: 14rpx;
  display: flex;
  justify-content: space-between;
  height: 56rpx;
  line-height: 56rpx;
  margin-bottom: 16rpx;
}

.price{
  height: 46rpx;
  line-height: 46rpx;
  align-self: flex-start;
}

.price text:first-child{
  height: 46rpx;
  color: rgba(250,70,34,1);
  font-size: 24rpx;
  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
  text-align: left;
  white-space: nowrap;
  line-height: 46rpx;
}
.price text:last-child{
  height: 46rpx;
  color: rgba(250,70,34,1);
  font-size: 40rpx;
  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
  text-align: left;
  white-space: nowrap;
  line-height: 46rpx;
}

.cart{
  width: 36rpx;
  height: 30rpx;
  align-self: flex-end;
  font-size: 0;
}

.cart image{
  width: 100%;
  height: 100%;
  object-fit: contain;
}