This repository has been archived on 2024-07-11. You can view files and clone it, but cannot push or open issues or pull requests.
yoshop-wechat/pages/coupon/coupon.wxss

95 lines
3.4 KiB
Plaintext
Raw Permalink Normal View History

2020-04-25 22:59:04 +08:00
.container, page {
background: #fff; }
.coupon-list {
padding: 20rpx; }
.coupon-list .coupon-item {
position: relative;
overflow: hidden;
margin-bottom: 22rpx; }
.coupon-list .coupon-item .item-wrapper {
width: 100%;
display: flex;
background: #fff;
border-radius: 8rpx;
color: #fff;
height: 180rpx; }
.coupon-list .coupon-item .item-wrapper .coupon-type {
position: absolute;
top: 0;
right: 0;
z-index: 10;
width: 128rpx;
padding: 3px 0;
background: #a771ff;
font-size: 20rpx;
text-align: center;
color: #ffffff;
transform: rotate(45deg);
transform-origin: 64rpx 64rpx; }
.coupon-list .coupon-item .item-wrapper.color__blue {
background: linear-gradient(-125deg, #57bdbf, #2f9de2); }
.coupon-list .coupon-item .item-wrapper.color__red {
background: linear-gradient(-128deg, #ff6d6d, #ff3636); }
.coupon-list .coupon-item .item-wrapper.color__violet {
background: linear-gradient(-113deg, #ef86ff, #b66ff5); }
.coupon-list .coupon-item .item-wrapper.color__violet .coupon-type {
background: #55b5ff; }
.coupon-list .coupon-item .item-wrapper.color__yellow {
background: linear-gradient(-141deg, #f7d059, #fdb054); }
.coupon-list .coupon-item .item-wrapper.color__gray {
background: linear-gradient(-113deg, #bdbdbd, #a2a1a2); }
.coupon-list .coupon-item .item-wrapper.color__gray .coupon-type {
background: #9e9e9e; }
.coupon-list .coupon-item .item-wrapper .content {
flex: 1;
padding: 30rpx 20rpx;
border-radius: 8px 0 0 8px; }
.coupon-list .coupon-item .item-wrapper .content .title {
font-size: 38rpx; }
.coupon-list .coupon-item .item-wrapper .content .bottom .time {
font-size: 24rpx; }
.coupon-list .coupon-item .item-wrapper .content .bottom .receive {
height: 46rpx;
width: 122rpx;
line-height: 46rpx;
text-align: center;
border: 1px solid #fff;
border-radius: 30rpx;
color: #fff;
font-size: 24rpx; }
.coupon-list .coupon-item .item-wrapper .content .bottom .receive.state {
border: none; }
.coupon-list .coupon-item .item-wrapper .tip {
position: relative;
flex: 0 0 32%;
text-align: center;
border-radius: 0 8px 8px 0; }
.coupon-list .coupon-item .item-wrapper .tip .money {
font-weight: bold;
font-size: 52rpx; }
.coupon-list .coupon-item .item-wrapper .tip .pay-line {
font-size: 22rpx; }
.coupon-list .coupon-item .item-wrapper .split-line {
position: relative;
flex: 0 0 0;
border-left: 4rpx solid #fff;
margin: 0 5px 0 3px;
background: #fff; }
.coupon-list .coupon-item .item-wrapper .split-line:before, .coupon-list .coupon-item .item-wrapper .split-line:after {
content: '';
position: absolute;
width: 12px;
height: 6px;
background: #f7f7f7;
left: -7px;
z-index: 1; }
.coupon-list .coupon-item .item-wrapper .split-line:before {
border-radius: 0 0 8px 8px;
top: 0; }
.coupon-list .coupon-item .item-wrapper .split-line:after {
border-radius: 8px 8px 0 0;
bottom: 0; }
/*# sourceMappingURL=coupon.wxss.map */