[水感应客户端最新]

pages/mall/coupon/coupon.wxss

@@ -0,0 +1,182 @@
+page {
+    background-color: #f7f9fa;
+}
+
+.orderFixed {
+    background-color: #f7f9fa;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    z-index: 9;
+    height: 220rpx;
+}
+
+.orderTab {
+    height: 90rpx;
+    line-height: 90rpx;
+    background-color: white;
+    display: flex;
+}
+
+.orderTab-item {
+    flex: 2;
+    text-align: center;
+    position: relative;
+    color: #000000;
+}
+
+.orderTab-item::after {
+    position: absolute;
+    content: '';
+    left: calc(50% - 25rpx);
+    bottom: 0;
+    width: 50rpx;
+    height: 8rpx;
+    background-color: #3b7cff;
+    display: none;
+    border-radius: 90rpx;
+}
+
+.orderTab-item.active {
+    font-weight: 600;
+}
+
+.orderTab-item.active::after {
+    display: block;
+}
+
+.orderState {
+    display: flex;
+    padding: 40rpx 30rpx;
+    box-sizing: border-box;
+}
+
+.orderState-item {
+    background-color: white;
+    line-height: 54rpx;
+    padding: 0 25rpx;
+    border-radius: 54rpx;
+    font-size: 28rpx;
+    margin-right: 40rpx;
+}
+
+.orderState-item.active {
+    background-color: #3b7cff;
+    color: #ffffff;
+}
+
+/* 列表 */
+.coupon {
+    padding: 230rpx 30rpx 0;
+    box-sizing: border-box;
+}
+
+.coupon-item {
+    background-image: linear-gradient(to right, #fcefe5, #ffebdc);
+    border-radius: 20rpx;
+    padding: 30rpx 0;
+    box-sizing: border-box;
+    margin-bottom: 30rpx;
+    display: flex;
+    position: relative;
+}
+
+.coupon-item::after {
+    position: absolute;
+    content: '';
+    right: -18rpx;
+    top: calc(50% - 18rpx);
+    width: 36rpx;
+    height: 36rpx;
+    border-radius: 50%;
+    background-color: #f7f9fa;
+}
+
+.coupon-item-name {
+    width: 150rpx;
+    text-align: center;
+    font-size: 36rpx;
+    color: #ff9951;
+    line-height: 110rpx;
+    position: relative;
+}
+
+.coupon-item-name::after {
+    position: absolute;
+    content: '';
+    right: 0;
+    top: 0;
+    width: 2rpx;
+    height: 100%;
+    border-radius: 50%;
+    background-color: #fdd4b6;
+}
+
+.coupon-item-name text {
+    font-size: 60rpx;
+    font-weight: 600;
+}
+
+.coupon-item-text {
+    width: calc(100% - 150rpx);
+    padding: 10rpx 0 0 40rpx;
+    box-sizing: border-box;
+    position: relative;
+}
+
+.coupon-item-number {
+    color: #ff9951;
+    font-size: 38rpx;
+    margin-bottom: 10rpx;
+}
+
+.coupon-item-time {
+    font-size: 28rpx;
+    color: #c06728;
+}
+
+.coupon-item-go {
+    position: absolute;
+    right: 40rpx;
+    top: 30rpx;
+    background-color: #ff9951;
+    color: #ffffff;
+    font-size: 28rpx;
+    border-radius: 80rpx;
+    padding: 0 25rpx;
+    line-height: 58rpx;
+}
+
+.coupon-item-img {
+    position: absolute;
+    right: 40rpx;
+    top: 15rpx;
+    width: 94rpx;
+}
+
+.coupon-item-go.active {
+    background-color: #999999;
+}
+
+.coupon-item.active {
+    background-image: linear-gradient(to right, #eeeeee, #eeeeee);
+
+}
+
+.coupon-item.active .coupon-item-go {
+    background-color: #c1c1c1;
+}
+
+.coupon-item.active .coupon-item-name,
+.coupon-item.active .coupon-item-number {
+    color: #999999;
+}
+
+.coupon-item.active .coupon-item-time {
+    color: #7a7a7a;
+}
+
+.coupon-item.active .coupon-item-name::after {
+    background-color: #dbdbdb;
+}