510_laomengkuang_wxsmall_shopper/pages/member/member.wxss

/* pages/member/member.wxss */

.bg {
  width: 750rpx;
  height: 632rpx;
}

.userContainer {
  position: absolute;
  width: 100%;
  height: 346rpx;
  left: 0;
  top: 0;
  color: #fff;
}

.headBox {
  position: absolute;
  width: 144rpx;
  height: 144rpx;
  top: 93rpx;
  left: 33rpx;
  background-color: #fff;
  border-radius: 50%;
  box-sizing: border-box;
  padding: 7rpx;
  overflow: hidden;
}

.headBox>image {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.userContainer>.userName {
  position: absolute;
  font-size: 40rpx;
  left: 194rpx;
  top: 125rpx;
}

.userContainer>.userPhone {
  position: absolute;
  font-size: 30rpx;
  left: 194rpx;
  top: 179rpx;
}

.userContainer>.crown {
  position: absolute;
  width: 46rpx;
  height: 36rpx;
  left: 32rpx;
  bottom: 0;
}

.crown>.memberNo {
  position: absolute;
  font-size: 20rpx;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 76%;
  text-align: center;
}

.userContainer>.memberName {
  position: absolute;
  left: 96rpx;
  bottom: 0;
  height: 36rpx;
  line-height: 36rpx;
  font-size: 30rpx;
}

.userContainer>.memberLe {
  position: absolute;
  left: 309rpx;
  bottom: 0;
  height: 36rpx;
  line-height: 36rpx;
  font-size: 30rpx;
}

.userContainer>.ratio {
  position: absolute;
  left: 546rpx;
  bottom: 0;
  height: 36rpx;
  line-height: 36rpx;
  font-size: 30rpx;
}

.infoContainer {
  position: absolute;
  width: 100%;
  height: calc(100vh - 475rpx);
  left: 0;
  bottom: 0;
  background-color: #fff;
  border-radius: 42rpx;
  box-sizing: border-box;
}

.infoContainer>.integralBox {
  position: absolute;
  width: 720rpx;
  height: 214rpx;
  left: 15rpx;
  top: -107rpx;
}

.integralBox>.icon {
  position: absolute;
  width: 108rpx;
  height: 86rpx;
  left: 55rpx;
  top: 65rpx;
}

.integralBox>.integral {
  position: absolute;
  right: 113rpx;
  top: 0;
  height: 214rpx;
  line-height: 214rpx;
  text-align: right;
  color: #eb6100;
  font-size: 60rpx;
}

.infoContainer>.couponContainer {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.couponContainer>.typeBox {
  display: flex;
  margin: 140rpx 0 32rpx 0;
  justify-content: center;
}

.typeBox>.item {
  font-size: 28rpx;
  width: 100rpx;
  height: 84rpx;
  line-height: 84rpx;
  text-align: center;
  color: #999;
  box-sizing: border-box;
}

.item.select {
  color: #333;
  font-size: 30rpx;
  font-weight: 700;
  border-bottom: 8rpx solid #ff7615;
}

.couponList {
  position: relative;
  display: block;
  width: 686rpx;
  height: calc(100% - 256rpx - 98rpx);
  padding: 0 32rpx;
}

.couponBox {
  position: relative;
  display: block;
  width: 100%;
  height: 220rpx;
  margin-bottom: 24rpx;
  border-radius: 10rpx;
}

.couponBox>.couponBgImg {
  position: absolute;
  width: 738rpx;
  height: 284rpx;
  left: -25rpx;
  top: -26rpx;
}

.couponBox>.couponImgBox {
  position: absolute;
  top: 0;
  left: 0;
  width: 220rpx;
  height: 100%;
  border-radius: 10rpx;
  overflow: hidden;
}

.couponImgBox>image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10rpx;
  mask-size: cover;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANwAAADcCAYAAAAbWs+BAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjFCMDNERkEzQTRBRDExRUE4MjM1ODBEMkRGQkM0RUNDIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjFCMDNERkE0QTRBRDExRUE4MjM1ODBEMkRGQkM0RUNDIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MUIwM0RGQTFBNEFEMTFFQTgyMzU4MEQyREZCQzRFQ0MiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MUIwM0RGQTJBNEFEMTFFQTgyMzU4MEQyREZCQzRFQ0MiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4wqVPuAAADBUlEQVR42uzYz0pUcRzG4RlNBaWgTdDChSRtAhdSSLQIrQvwHrwA78SCopswiNZBtBIVvAlRWggRZC38l++PjiDijGfmnKLF88CLlGf1hQ/HmW6nt9vZq2wxm87GOkAvd7IfNz1065r/m8w+Zi/dEGq7Xye4kSv/fpr9FBsMbK7OQ5eDe5FtuBsMZbnOQ93q51R26GYwtKPsQbZX5w332b2gkfFs7aaHRjt/vo18617Q2KPsV7+PZiW4d9m8W0ErlrJv2XavPymX3AhaU15ib7L32ezVX5YvTU6qh4B2lS9S1rMP2U62X4L77S7wb4w4AQgOBAcIDgQHCA4EB4IDBAeCAwQHggPBAYIDwQGCA8EBggPBgeAAwYHgAMGB4EBwgOBAcIDgQHCA4EBwIDhAcCA4QHAgOBAcIDgQHCA4EBwgOBAcCA4QHAgOEBwIDgQHCA4EBwgOBAeCAwQHggMEB4IDBAeCA8EBggPBAYIDwYHgAMGB4ADBgeAAwYHgQHCA4EBwgOBAcCA4QHAgOEBwIDhAcCA4EBwgOBAcIDgQHAgOEBwIDhAcCA4EBwgOBAcIDgQHCA4EB4IDBAeCAwQHggPBAYIDwQGCA8EBggPBgeAAwYHgAMGB4EBwgOBAcIDgQHCA4EBwIDhAcCA4QHAgOBAcIDgQHCA4EBwIDhAcCA4QHAgOEBwIDgQHCA4EBwgOBAeCAwQHggMEB4IDBAeCA8EBggPBAYIDwYHgAMGB4ADBgeAAwYHgQHCA4EBwgOBAcCA4QHAgOEBwIDgQHCA4EBwgOBAcIDgQHAgOEBwIDhAcCA4EBwgOBAcIDgQHCA4EB4IDBAeCAwQH/1Nwp84Af8VB9jgbz7plJbg9d4HWLWb3sp3s+PIb7pPbQGsOs7vZl+t+WV5zC9mmO0ErSmzf+32G28p23Qkae9Yvtos3XDFf/a0JDOeg+szW12j182t2Vn3QAwb3vOqoU+cNd2E1e+12MLCJ7GjQ4Iq5bD176IZQW7fpQ0+yleqD4Ew25abQLLhzAQYAMqkvynNUO3sAAAAASUVORK5CYII=');
  mask-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANwAAADcCAYAAAAbWs+BAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjFCMDNERkEzQTRBRDExRUE4MjM1ODBEMkRGQkM0RUNDIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjFCMDNERkE0QTRBRDExRUE4MjM1ODBEMkRGQkM0RUNDIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MUIwM0RGQTFBNEFEMTFFQTgyMzU4MEQyREZCQzRFQ0MiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MUIwM0RGQTJBNEFEMTFFQTgyMzU4MEQyREZCQzRFQ0MiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4wqVPuAAADBUlEQVR42uzYz0pUcRzG4RlNBaWgTdDChSRtAhdSSLQIrQvwHrwA78SCopswiNZBtBIVvAlRWggRZC38l++PjiDijGfmnKLF88CLlGf1hQ/HmW6nt9vZq2wxm87GOkAvd7IfNz1065r/m8w+Zi/dEGq7Xye4kSv/fpr9FBsMbK7OQ5eDe5FtuBsMZbnOQ93q51R26GYwtKPsQbZX5w332b2gkfFs7aaHRjt/vo18617Q2KPsV7+PZiW4d9m8W0ErlrJv2XavPymX3AhaU15ib7L32ezVX5YvTU6qh4B2lS9S1rMP2U62X4L77S7wb4w4AQgOBAcIDgQHCA4EB4IDBAeCAwQHggPBAYIDwQGCA8EBggPBgeAAwYHgAMGB4EBwgOBAcIDgQHCA4EBwIDhAcCA4QHAgOBAcIDgQHCA4EBwgOBAcCA4QHAgOEBwIDgQHCA4EBwgOBAeCAwQHggMEB4IDBAeCA8EBggPBAYIDwYHgAMGB4ADBgeAAwYHgQHCA4EBwgOBAcCA4QHAgOEBwIDhAcCA4EBwgOBAcIDgQHAgOEBwIDhAcCA4EBwgOBAcIDgQHCA4EB4IDBAeCAwQHggPBAYIDwQGCA8EBggPBgeAAwYHgAMGB4EBwgOBAcIDgQHCA4EBwIDhAcCA4QHAgOBAcIDgQHCA4EBwIDhAcCA4QHAgOEBwIDgQHCA4EBwgOBAeCAwQHggMEB4IDBAeCA8EBggPBAYIDwYHgAMGB4ADBgeAAwYHgQHCA4EBwgOBAcCA4QHAgOEBwIDgQHCA4EBwgOBAcIDgQHAgOEBwIDhAcCA4EBwgOBAcIDgQHCA4EB4IDBAeCAwQH/1Nwp84Af8VB9jgbz7plJbg9d4HWLWb3sp3s+PIb7pPbQGsOs7vZl+t+WV5zC9mmO0ErSmzf+32G28p23Qkae9Yvtos3XDFf/a0JDOeg+szW12j182t2Vn3QAwb3vOqoU+cNd2E1e+12MLCJ7GjQ4Iq5bD176IZQW7fpQ0+yleqD4Ew25abQLLhzAQYAMqkvynNUO3sAAAAASUVORK5CYII=');
}

.couponInfoBox {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 466rpx;
}

.couponInfoBox>.couponTitle {
  position: absolute;
  left: 24rpx;
  color: #6A0A0E;
  font-size: 30rpx;
  top: 31rpx;
  font-weight: 700;
}

.couponInfoBox>.couponMemo {
  position: absolute;
  left: 36rpx;
  color: #333333;
  font-size: 20rpx;
  top: 72rpx;
}

.couponInfoBox>.couponNums {
  position: absolute;
  left: 36rpx;
  width: 141rpx;
  height: 36rpx;
  line-height: 34rpx;
  border: 1rpx solid #EB6100;
  border-radius: 18rpx;
  box-sizing: border-box;
  text-align: center;
  color: #EB6100;
  font-size: 20rpx;
  bottom: 44rpx;
}

.couponInfoBox>.btnWriteOff {
  position: absolute;
  width: 110rpx;
  height: 60rpx;
  text-align: center;
  line-height: 60rpx;
  right: 24rpx;
  bottom: 32rpx;
  border-radius: 30rpx;
  background-color: #EB6100;
  color: #ffffff;
  font-size: 30rpx;
}

.btnBox {
  position: absolute;
  width: 100%;
  height: 98rpx;
  left: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  background-color: #ffffff;
  box-shadow: 0 0 15rpx 5rpx rgba(0, 0, 0, 0.1);
}

.btnBox>.btnItemBox {
  width: 50%;
  height: 100%;
  line-height: 98rpx;
  font-size: 36rpx;
  color: #EB6100;
  text-align: center;
  background-color: #ffffff;
}

.btnBox>.btnItemBoxRight {
  color: #ffffff;
  background-image: linear-gradient(to right, #EB6100, #FF892A);
}
.infoContainer>.integralContainer{
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.integralContainer>.intergralTitleBox {
  position: relative;
  width: 609rpx;
  margin: 205rpx auto 64rpx auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.intergralTitleBox>.line {
  width: 173rpx;
  height: 1rpx;
  background-color: #B7B7B7;
}

.intergralTitleBox>.title {
  color: #333333;
  font-size: 45rpx;
  font-weight: 600;
}

.integralContainer>.intergralInput {
  position: relative;
  display: block;
  width: 600rpx;
  height: 98rpx;
  line-height: 94rpx;
  text-align: center;
  color: #333333;
  font-size: 60rpx;
  font-weight: 600;
  padding: 0 35rpx;
  margin: 0 auto;
  box-sizing: border-box;
  background-color: #D8D8D8;
  border-radius: 49rpx;
  border: 2rpx solid rgba(216, 216, 216, 1);
}

.integralContainer>.writeOffAmount {
  position: relative;
  width: 100%;
  text-align: center;
  color: #333333;
  font-size: 26rpx;
  margin-top: 32rpx;
  font-weight: 600;
}
.integralContainer>.giveChoice{
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #333333;
  font-size: 26rpx;
  margin-top: 16rpx;
  font-weight: 600;
}
.giveChoice>.item{
  position: relative;
  padding: 9rpx 20rpx;
  margin-right: 20rpx;
  border:1rpx solid #999999;
  box-sizing: border-box;
  border-radius: 50rpx;
  color: #999999;
  font-size: 26rpx;
  min-width: 80rpx;
  text-align: center;
}
.integralContainer>.integraLe{
  position: relative;
  width: 100%;
  text-align: center;
  margin-top: 40rpx;
  color: #333333;
  font-size: 26rpx;
  font-weight: 600;
}