payProject/pages/cardBag/cardBag.wxss

/* pages/cardBag/cardBag.wxss */
page {
  background: #F9F9F9;
}

.history{
  display: flex;
  justify-content: right;
  height: 60rpx;
  background-color: #fff;
}
.history view {
  width: 112rpx;
  height: 40rpx;
  color: rgba(153,153,153,1);
  font-size: 28rpx;
  font-family: PingFangSC-Regular;
  text-align: center;
  white-space: nowrap;
  line-height: 40rpx;
  margin: 10rpx 0 0 598rpx;
}

.tabs-wrap {
  padding: 0 84rpx;
  height: 120rpx;
  background: #fff;
  justify-content: space-between;
}

.tabs-wrap .item {
  height: 100%;
  font-size: 28rpx;
  color: #666666;
  position: relative;
  font-family: PingFangSC-Regular;
  font-weight: 400;
}

.tabs-wrap .item.active {
  font-family: PingFangSC-Medium;
  font-weight: 500;
  color: #333333;
}

.tabs-wrap .item.active::before {
  content: '';
  position: absolute;
  top: 90rpx;
  width: 40rpx;
  height: 8rpx;
  background: linear-gradient(144deg, #FA7D22 0%, #FA4622 100%);
  border-radius: 4rpx;
}

.conItem{
  background-color: #FFF;
  border-radius: 16rpx;
  width: 690rpx;
  height: 154rpx;
  flex-direction: row;
  display: flex;
  margin: 40rpx 30rpx;
  position: relative;
}

.leftLine{
  background-color: #FA7D22;
  border-radius: 16rpx 0rpx 0rpx 16rpx;
  width: 10rpx;
  height: 154rpx;
  display: flex;
  flex-direction: column;
}

.right{
  width: 100%;
  padding: 24rpx 24rpx 0rpx 44rpx;
}
.titleFrequency{
  display: flex;
  justify-content: space-between;
  height: 32rpx;
  line-height: 32rpx;
  margin-bottom: 30rpx;
}

.title {
  width: 512rpx;
  height: 32rpx;
  color: rgba(51,51,51,1);
  font-size: 32rpx;
  font-family: SourceHanSansCN-Regular;
  text-align: left;
  line-height: 32rpx;
}

.frequency{
  margin-right: 24rpx;
}

.beOverdue{
  display: flex;
  align-items: center;
}

.usedTimes{
  color: #FF3007;
  font-size: 36rpx;
  font-family: SourceHanSansCN-Regular;
  text-align: left;
  white-space: nowrap;
}

.totalFrequency{
  color: #666666;
  font-size: 28rpx;
  font-family: SourceHanSansCN-Regular;
  text-align: center;
  white-space: nowrap;
  margin-top: 8rpx;
}

.beOverdueToUse{
  display: flex;
  justify-content: space-between;
}

.beOverdueItem{
  color: #999999;
  font-size: 24rpx;
  font-family: SourceHanSansCN-Regular;
  text-align: left;
  white-space: nowrap;
}

.tips{
  color: #FF3007;
  font-size: 32rpx;
  font-family: SourceHanSansCN-Regular;
  text-align: left;
  white-space: nowrap;
  margin: 0rpx 8rpx;
}

.toUse{
  background-color: #FA7D22;
  border-radius: 25rpx;
  height: 50rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 104rpx;
  color: rgba(255,255,255,1);
  font-size: 24rpx;
  font-family: PingFangSC-Medium;
  text-align: left;
  white-space: nowrap;
}

.cardBg{
  z-index: 69;
  position: absolute;
  left: 470rpx;
  top: -86rpx;
}

.cardBg image{
  width: 180rpx;
  height: 144rpx;
  object-fit: contain;
}

.used{
  color: #999;
}

.usedBg{
  background-color: #999;
}