jzmall_wx/pages/ucenter/couponList/couponList.wxss

page {
  background: #f4f4f4;
  min-height: 100%;
}

.container {
  background: #f4f4f4;
  min-height: 100%;
  /* padding-top: 30rpx; */
}

.container .h {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  width: 100%;
  display: flex;
  background: #fff;
  height: 84rpx;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.container .h .item {
  display: inline-block;
  height: 82rpx;
  width: 50%;
  padding: 0 15rpx;
  text-align: center;
}

.container .h .item .txt {
  display: inline-block;
  height: 82rpx;
  padding: 0 20rpx;
  line-height: 82rpx;
  color: #333;
  font-size: 30rpx;
  width: 170rpx;
}

.container .h .item.active .txt {
  color: #ab2b2b;
  border-bottom: 4rpx solid #ab2b2b;
}

.container .b {
  padding-top: 12rpx;
  height: auto;
  border-top:1rpx solid #ddd;
}

.container .b .coupon-form {
  height: 110rpx;
  width: 100%;
  background: #fff;
  padding-left: 30rpx;
  padding-right: 30rpx;
  padding-top: 20rpx;
  display: flex;
}

.container .b .input-box {
  flex: 1;
  height: 70rpx;
  color: #333;
  font-size: 24rpx;
  background: #fff;
  position: relative;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 35rpx;
  margin-right: 30rpx;
}

.container .b .input-box .coupon-sn {
  position: absolute;
  top: 10rpx;
  left: 30rpx;
  height: 50rpx;
  width: 100%;
  color: #000;
  line-height: 50rpx;
  font-size: 24rpx;
}

.container .b .clear-icon {
  position: absolute;
  top: 20rpx;
  right: 18rpx;
  z-index: 2;
  display: block;
  background: #fff;
}

.container .b .add-btn {
  height: 70rpx;
  border: none;
  width: 168rpx;
  /* background: #b4282d; */
  background: #4E4E4E;
  border-radius: 35rpx;
  line-height: 70rpx;
  color: #fff;
  font-size: 28rpx;
  text-align: center;
}

.container .b .add-btn.disabled {
  background: #ccc;
}

.container .b .help {
  height: 72rpx;
  line-height: 72rpx;
  text-align: right;
  padding-right: 30rpx;
  background-size: 28rpx;
  color: #999;
  font-size: 24rpx;
}

.container .b .coupon-list {
  width: 750rpx;
  height: 100%;
  overflow: hidden;
}

.container .b .item {
  position: relative;
  height: 290rpx;
  background: #ccc7c7;
  margin-bottom: 30rpx;
  margin-left: 30rpx;
  margin-right: 30rpx;
  padding-top: 52rpx;
}

.container .b .item.active {
  background: linear-gradient(to right, #cfa568, #e3bf79);
}

.container .b .tag {
  height: 32rpx;
  background: #a48143;
  padding-left: 16rpx;
  padding-right: 16rpx;
  position: absolute;
  left: 20rpx;
  color: #fff;
  top: 20rpx;
  font-size: 20rpx;
  text-align: center;
  line-height: 32rpx;
}

.container .b .content {
  margin-top: 24rpx;
  margin-left: 40rpx;
  display: flex;
  margin-right: 40rpx;
  flex-direction: row;
}

.container .b .content .left {
  flex: 1;
}

.container .b .discount {
  font-size: 50rpx;
  color: #b4282d;
}

.container .b .min {
  color: #fff;
}

.container .b .content .right {
  width: 400rpx;
}

.container .b .name {
  font-size: 44rpx;
  color: #fff;
  margin-bottom: 14rpx;
}

.container .b .time {
  font-size: 24rpx;
  color: #fff;
  line-height: 30rpx;
}

.container .b .condition {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  height: 78rpx;
  background: rgba(0, 0, 0, 0.08);
  padding: 24rpx 40rpx;
  display: flex;
  flex-direction: row;
}

.container .b .condition .txt {
  display: block;
  height: 30rpx;
  flex: 1;
  overflow: hidden;
  font-size: 24rpx;
  line-height: 30rpx;
  color: #fff;
}

.container .b .condition .icon {
  margin-left: 30rpx;
  width: 24rpx;
  height: 24rpx;
}

.container .b .page {
  width: 750rpx;
  height: 108rpx;
  background: #fff;
  margin-bottom: 20rpx;
}

.container .b .page view {
  height: 108rpx;
  width: 50%;
  float: left;
  font-size: 29rpx;
  color: #333;
  text-align: center;
  line-height: 108rpx;
}

.container .b .page .prev {
  border-right: 1px solid #d9d9d9;
}

.container .b .page .disabled {
  color: #ccc;
}
.b .no-list{
	margin:16rpx 0 0;
	text-align: center;
	color:#999;
	font-size: 28rpx;
}
.my-coupon-list{
  padding:20rpx 24rpx;
  width: auto;
  height: 100%;
  overflow: hidden;
}
.my-coupon-item{
  border-radius: 18rpx;
  background:#fff;
  height: 190rpx;
  margin:0 0 20rpx;
  display: flex;
  justify-content: space-between;
  padding:0 20rpx 0 0;
  width:706rpx;
}
.coupon-left{
  background:rgba(9, 175, 255, 0.1);
  width:230rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height:190rpx;
  padding:18rpx 0 30rpx;
}
.coupon-left .coupon-amount{
  font-size: 48rpx;
  font-weight: bold;
}
.coupon-left .coupon-type{
  font-size: 24rpx;
  font-weight: bold;
  white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 width:220rpx;
 text-align: center;
}
.coupon-left .coupon-btn{
  background:#999999;
  color: #fff;
  width:120rpx;
  height: 32rpx;
  line-height:32rpx;
  font-size: 22rpx;
  margin-top:10rpx;
  border-radius:30rpx;
  text-align: center;
}
.coupon-left .coupon-btn.active-btn{
  background:#09afff;
}
.coupon-content{
  margin:0 20rpx 0 30rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding:40rpx 0;
  flex:1
}
.coupon-content view.coupon-name{
 color:#999;
 font-size:30rpx;
 font-weight: bold;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 width:330rpx;
}
.coupon-content view.coupon-date{
  color:#999;
  font-size:20rpx;
 }
 .coupon-right{
   width:84rpx;
   height:114rpx;
   padding-top:30rpx;
 }
.coupon-status{
  width:84rpx;
  height:84rpx;
}
.my-coupon-item-valid{
  background: #fff;
  box-shadow: 0rpx 6rpx 14rpx 0px rgba(142, 142, 142, 0.03);
border-radius: 20rpx;
width:696rpx;
margin-bottom:24rpx;
padding:0 30rpx;
}
.my-coupon-item-valid .marker{
  position: absolute;
  right: 10rpx;
  float: right;
  padding: 5rpx;
  width: 136rpx;
  /* border-radius: 1rpx solid #; */
  background: #F5DA9E;
  color:#C8965A ; 
  text-align: center;
  border-bottom-left-radius: 20rpx;
  /* margin-right: -30rpx; */
  border-top-right-radius: 15rpx;
}
.coupon-top{
  display: flex;
  height: 152rpx;
  align-items: center;
  justify-content: space-between;
  padding:0rpx 8rpx 0 0;
}
.coupon-top-left{
  width:150rpx;
  color: #09AFFF;
  font-size: 22rpx;
  padding:8rpx 0 0 4rpx;
}
.coupon-top-left .coupon-value{
  display: flex;
  align-items: flex-end;
  height: 54rpx;
  margin-bottom:10rpx;
  font-size: 24rpx;
  font-weight: bold;
}
.coupon-top-left .coupon-value .coupon-value-num{
  font-size: 70rpx;
  line-height: 54rpx;
}
.coupon-top-left .coupon-value .coupon-value-num2{
  font-size: 40rpx;
	line-height: 54rpx;
	margin-left: 15rpx
}
.coupon-top-left .coupon-value .coupon-unit{
  color:#09afff;
  margin-left:4rpx;
}
.coupon-top-left .coupon-value .coupon-unit-member{
  color:#E9B06B;
  margin-left:4rpx;
}

.coupon-top-left .coupon-value .coupon-flag{
  color:#09afff;
  margin-right:4rpx;
}

.coupon-top-left .coupon-value .coupon-flag-member{
  color:#E9B06B;
  margin-right:4rpx;
}

.coupon-top-left .coupon-value .coupon-value-member{
  font-size: 70rpx;
  line-height: 54rpx;
  color:#E9B06B ;
}

.coupon-top-content{
  flex:1;
  margin:0 30rpx 0 20rpx;
  color: #B4B4B4;
  font-size: 22rpx;
  font-weight: normal;
  
}
.coupon-valid-name{
  font-weight: bold;
color: #555555;
font-size: 32rpx;
margin-bottom:10rpx;
width:380rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.coupon-top-right{
    /* writing-mode: vertical-lr; */
    width: 142rpx;
    height: 56rpx;
    background: #09AFFF;
    border-radius: 42rpx;
    text-align: center;
    color: #FFFFFF;
    line-height: 56rpx;
    font-size: 20rpx;
    letter-spacing: 3rpx;
}
.coupon-top-member{ 
  width: 142rpx;
  height: 56rpx;
  background: #E9B06B;
  border-radius: 42rpx;
  text-align: center;
  color: #FFFFFF;
  line-height: 56rpx;
  font-size: 20rpx;
  letter-spacing: 3rpx;
}

.coupon-bottom{
  padding:10rpx 4rpx 22rpx;
  color: #757575;
  font-size: 20rpx;
  line-height: 36rpx;
  border-top:1rpx dashed #D4D4D4;
  letter-spacing: 2rpx;
  display: flex;
    justify-content: space-between;
    align-items: center;
}
.coupon-switch-block{
  height: 104rpx;
  padding:0 27rpx;
  display: flex;
  align-items: center;
  margin-bottom:-20rpx;
  justify-content: center;
}
 
.van-tab--active.van-tab>view.van-ellipsis{
  color: #000 !important;
  letter-spacing: 2rpx;
}

.type-switch{
  width: 132rpx;
height: 46rpx;
line-height: 42rpx;
border: 2rpx solid #B4B4B4;
border-radius: 46rpx;
text-align: center;
color: #B4B4B4;
font-size:24rpx;
margin:10rpx;
}
.type-switch.active-switch{
  background: #4E4E4E;
  color: #fff;
  /* border: 2rpx solid #09AFFF; */
}

.pup-up-coupon{
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}
.pup-up-coupon image{ /* 设不设都行 */	
  width: 550rpx;
	height: 550rpx;
	border-radius: 10rpx;
}
.pup-up-coupon .close-icon{
  position: absolute;
  right: 360rpx;
  top: 70%;
}

.tc{
	font-family:'阿里巴巴普惠体 2 55 Regular';
	width: 550rpx;
	height: 550rpx;
	background-image: url('https://jzmall.lifejingzhi.com/file/jzmall/weixin/yhj.png');
	background-size:cover;
	background-repeat: no-repeat;
	background-position: center;
}
.pkName{
	text-align: center;
	font-weight: bold;
	color: #862B0B;
	line-height: 55rpx;
}
.num{
	text-align: center;
	font-weight: bold;
	color: #802003;
	line-height: 100rpx;
	font-size: 55rpx;
}
.money{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	width: 170rpx;
	color: #FEFAFA;
	font-weight: bold;
	font-size: 80rpx;
	margin-left: 70rpx;
	/* margin-top: 55rpx; */
}

.money>span{
	color: #FEFAFA;
	font-weight: bold;
	font-size: 30rpx;
	padding-top: 30rpx;
}
.couponName{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	color: #FEFAFA;
	font-weight: bold;
	width: 150rpx;
	font-size: 45rpx;
	margin-left: 70rpx;
}
.couponNameDesc{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	color: #FEFAFA;
	font-weight: bold;
	width: 250rpx;
	height: 240rpx;
	font-size: 35rpx;
	margin-left: 20rpx;
}

.box{
	width: 510rpx;
	height: 240rpx;
	display: flex;
	justify-content: space-between;
}