couponCell.wxss 5.98 KB

.couponCell {
  width: 710rpx;
  height: 200rpx;
  display: flex;
  flex-direction: row;
  margin-left: 20rpx;
}

.couponCell .couponCellLeftView {
  position:relative; 
  z-index: 800;
  display: flex;
  width: 220rpx;
  height: 200rpx;
}

.couponCell .couponCellLeftView .couponCellLeft {
  width: 220rpx;
  height: 200rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 900;
}

.couponCell .couponCellLeftView .couponCellLeftBackImage {
  width: 220rpx;
  height: 200rpx;
  position: absolute;
  margin-top: 0rpx; 
  z-index: 120; 
}

.couponCell .couponCellLeftView .couponCellLeft .priceView {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
}

.couponCell .couponCellLeftView .couponCellLeft .yunfeiName {
  text-overflow:ellipsis; 
  display: block;
  overflow: hidden;
  white-space: nowrap;
  font-family: PingFang-SC-Medium;
  font-size: 48rpx;
  letter-spacing: -0.67px;
}

.couponCell .couponCellLeftView .couponCellLeft .priceView .priceIcon {
  text-overflow:ellipsis; 
  display: block;
  overflow: hidden;
  white-space: nowrap;
  font-family: PingFang-SC-Semibold;
  font-size: 28rpx;
  letter-spacing: -0.39px;
}

.couponCell .couponCellLeftView .couponCellLeft .priceView .price {
  text-overflow:ellipsis; 
  display: block;
  white-space: nowrap;
  font-family: PingFang-SC-Semibold;
  font-size: 72rpx;
  letter-spacing: -0.39px;
  line-height: 70rpx;
  margin-left: 5rpx;
  max-width: 170rpx;
  word-break:break-all;
  display:-webkit-box;
  -webkit-line-clamp:1;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.couponCell .couponCellLeftView .couponCellLeft .priceDetail {
  font-family: PingFang-SC-Regular;
  font-size: 24rpx;
  letter-spacing: 0;
  margin-top: 10rpx;
}

.couponCell .couponCellRightView {
  width: 490rpx;
  height: 200rpx;
  display: flex;
  position:relative; 
  z-index: 800;
}

.couponCell .couponCellRightView .couponCellRightViewBackImage{
  width: 490rpx;
  height: 200rpx;
  position: absolute;
  margin-top: 0rpx;
  z-index: 120;
  margin-left: -1rpx;
}

.couponCell .couponCellRightView .couponCellRight {
  width: 480rpx;
  height: 180rpx;
  display: flex;
  flex-direction: column;
  margin-top: 20rpx;
  margin-left: 10rpx;  
  z-index: 900;
}

.couponCell .couponCellRightView .couponCellRight .couponCellRightTop {
  width: 400rpx;
  height: 72rpx;
  display: flex;
  flex-direction: row;
  font-family: PingFang-SC-Regular;
  font-size: 24rpx;
  letter-spacing: 0;
  line-height: 36rpx;
  word-break:break-all;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.couponCell .couponCellRightView .couponCellRight .couponCellRightTop .couponIcon{
  font-family: PingFang-SC-Medium;
  font-size: 24rpx;
  letter-spacing: 0;
  /* margin-left: 10rpx; */
}

.couponCell .couponCellRightView .couponCellRight .couponCellRightMiddle {
  width: 400rpx;
  height: 32rpx;
  display: flex;
  flex-direction: row;
}

.couponCell .couponCellRightView .couponCellRight .couponCellRightMiddle .time {
  font-family: PingFang-SC-Regular;
  font-size: 22rpx;
  letter-spacing: 0;
}

.couponCell .couponCellRightView .couponCellRight .couponCellRightBottom {
  width: 480rpx;
  height: 60rpx;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: 5rpx;
}

.couponCell .couponCellRightView .couponCellRight .couponCellRightBottom .commentViewButton {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.couponCell .couponCellRightView .couponCellRight .couponCellRightBottom .commentViewButton .commentButtonText {
  font-family: PingFang-SC-Regular;
  font-size: 22rpx;
  letter-spacing: 0;
  margin-bottom: 5rpx;
}

.couponCell .couponCellRightView .couponCellRight .couponCellRightBottom .commentViewButton .commentDesText {
  word-break:break-all;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  line-height: 26rpx;
  font-family: PingFang-SC-Regular;
  font-size: 20rpx;
  letter-spacing: 0;
}

.couponCell .couponCellRightView .couponCellRight .couponCellRightBottom .commentViewButton .arrowIcon {
  width: 27rpx;
  height: 18rpx; 
  margin-left: 10rpx;
  margin-bottom: 5rpx;
}

.couponCell .couponCellRightView .couponCellRight .couponCellRightBottom .useButton {
  width: 128rpx;
  height: 48rpx;
  font-family: PingFang-SC-Medium;
  font-size: 22rpx;
  letter-spacing: 0;
  margin-right: 22rpx;
  border-radius: 76rpx;  
  border:1px solid #444444; 
  align-items: center;
  justify-content: center;
  display: flex;
  color: #444444;
  margin-bottom: 5rpx;
}

.couponCell .couponCellRightView .couponCellRight .rightIcon {
  width: 126rpx;
  height: 114rpx; 
  margin-bottom: 30rpx;
  margin-right: 20rpx;
}

.couponCell .couponCellRightView .couponCellRight .selectIconView {
  width: 100rpx;
  height: 160rpx; 
  margin-right: 30rpx;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.couponCell .couponCellRightView .couponCellRight .selectIconView .selectIcon {
  width: 40rpx;
  height: 40rpx; 
  margin-bottom: 5rpx;
}

.couponCell .overduSoonIcon {
  width: 86rpx;
  height: 86rpx; 
  position: absolute;
  margin-top: 0rpx;
  right: 20rpx;
  z-index: 997;
  display: flex;
}

.commentView {
  width: 710rpx;
  height: 160rpx;
  margin-left: 20rpx;
  background: rgba(255, 255, 255, 0.7);
  display: flex;
  flex-direction: column;
  margin-top: -10rpx;
}

.commentView .commentText1{
  font-family: PingFang-SC-Regular;
  font-size: 22rpx;
  letter-spacing: 0;
  line-height: 32rpx;
  word-break:break-all;
  display:-webkit-box;
  -webkit-line-clamp:1;
  -webkit-box-orient:vertical;
  overflow:hidden;
  margin-top: 8rpx; 
  margin-left: 26rpx;
  max-width: 670rpx;
}

.commentView .commentText2{
  font-family: PingFang-SC-Regular;
  font-size: 22rpx;
  letter-spacing: 0;
  line-height: 32rpx;
  word-break:break-all;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  margin-top: 8rpx;
  margin-left: 26rpx;
  max-width: 670rpx;
}