Showing
1 changed file
with
113 additions
and
99 deletions
| 1 | .coupon-page { | 1 | .coupon-page { |
| 2 | - .coupon-title { | ||
| 3 | - background-color: #fff; | ||
| 4 | - text-align: center; | ||
| 5 | - height: 96rem/$pxConvertRem; | ||
| 6 | - line-height: 96rem/$pxConvertRem; | ||
| 7 | - font-size: 30rem / $pxConvertRem; | ||
| 8 | - } | ||
| 9 | - .coupon-box { | ||
| 10 | - background-color: #fff; | ||
| 11 | - padding: 36rem/$pxConvertRem; | ||
| 12 | - padding-top: 0; | ||
| 13 | - height: 172rem/$pxConvertRem; | ||
| 14 | - .coupon-box-main { | ||
| 15 | - width: 100%; | ||
| 16 | - float: left; | ||
| 17 | - height: 170rem / $pxConvertRem; | ||
| 18 | - .coupon-left { | ||
| 19 | - float: left; | ||
| 20 | - width: 80%; | ||
| 21 | - height: 170rem/$pxConvertRem; | ||
| 22 | - background-size: 100%; | ||
| 23 | - background-repeat: no-repeat; | ||
| 24 | - } | ||
| 25 | - .coupon-right { | ||
| 26 | - float: left; | ||
| 27 | - width: 20%; | 2 | + |
| 3 | + .coupon-title { | ||
| 4 | + background-color: #fff; | ||
| 28 | text-align: center; | 5 | text-align: center; |
| 29 | - height: 170rem/$pxConvertRem; | ||
| 30 | - background-color: rgb(224,84,85); | ||
| 31 | - .coupon-right-reBox { | ||
| 32 | - height: 100%; | ||
| 33 | - width: 100%; | ||
| 34 | - color:#fff; | ||
| 35 | - .coupon-right-re { | ||
| 36 | - font-size: 25rem/$pxConvertRem; | ||
| 37 | - margin-top: 60rem/$pxConvertRem; | ||
| 38 | - } | ||
| 39 | - } | ||
| 40 | - .coupon-right-goBox { | ||
| 41 | - height: 100%; | ||
| 42 | - width: 100%; | ||
| 43 | - color:#fff; | ||
| 44 | - font-size: 15rem/$pxConvertRem; | ||
| 45 | - .coupon-right-st { | ||
| 46 | - margin-top: 40rem/$pxConvertRem; | ||
| 47 | - } | ||
| 48 | - .coupon-right-go { | ||
| 49 | - border-radius: 15px; | ||
| 50 | - border: 1px solid #fff; | ||
| 51 | - margin: 0 auto; | ||
| 52 | - margin-top: 20rem/$pxConvertRem; | ||
| 53 | - width: 90rem/$pxConvertRem; | ||
| 54 | - height: 30rem/$pxConvertRem; | ||
| 55 | - line-height: 30rem/$pxConvertRem; | ||
| 56 | - } | 6 | + height: 96rem/$pxConvertRem; |
| 7 | + line-height: 96rem/$pxConvertRem; | ||
| 8 | + font-size: 30rem / $pxConvertRem; | ||
| 9 | + } | ||
| 10 | + | ||
| 11 | + .coupon-box { | ||
| 12 | + background-color: #fff; | ||
| 13 | + padding: 36rem/$pxConvertRem; | ||
| 14 | + padding-top: 0; | ||
| 15 | + height: 172rem/$pxConvertRem; | ||
| 16 | + | ||
| 17 | + .coupon-box-main { | ||
| 18 | + width: 100%; | ||
| 19 | + float: left; | ||
| 20 | + height: 170rem / $pxConvertRem; | ||
| 21 | + | ||
| 22 | + .coupon-left { | ||
| 23 | + float: left; | ||
| 24 | + width: 80%; | ||
| 25 | + height: 170rem/$pxConvertRem; | ||
| 26 | + background-size: 100%; | ||
| 27 | + background-repeat: no-repeat; | ||
| 28 | + } | ||
| 29 | + | ||
| 30 | + .coupon-right { | ||
| 31 | + float: left; | ||
| 32 | + width: 20%; | ||
| 33 | + text-align: center; | ||
| 34 | + height: 170rem/$pxConvertRem; | ||
| 35 | + background-color: rgb(224,84,85); | ||
| 36 | + | ||
| 37 | + .coupon-right-reBox { | ||
| 38 | + height: 100%; | ||
| 39 | + width: 100%; | ||
| 40 | + color:#fff; | ||
| 41 | + | ||
| 42 | + .coupon-right-re { | ||
| 43 | + font-size: 25rem/$pxConvertRem; | ||
| 44 | + margin-top: 60rem/$pxConvertRem; | ||
| 45 | + } | ||
| 46 | + } | ||
| 47 | + | ||
| 48 | + .coupon-right-goBox { | ||
| 49 | + height: 100%; | ||
| 50 | + width: 100%; | ||
| 51 | + color:#fff; | ||
| 52 | + font-size: 15rem/$pxConvertRem; | ||
| 53 | + | ||
| 54 | + .coupon-right-st { | ||
| 55 | + margin-top: 40rem/$pxConvertRem; | ||
| 56 | + } | ||
| 57 | + | ||
| 58 | + .coupon-right-go { | ||
| 59 | + border-radius: 15px; | ||
| 60 | + border: 1px solid #fff; | ||
| 61 | + margin: 0 auto; | ||
| 62 | + margin-top: 20rem/$pxConvertRem; | ||
| 63 | + width: 90rem/$pxConvertRem; | ||
| 64 | + height: 30rem/$pxConvertRem; | ||
| 65 | + line-height: 30rem/$pxConvertRem; | ||
| 66 | + } | ||
| 67 | + } | ||
| 68 | + } | ||
| 57 | } | 69 | } |
| 58 | - } | ||
| 59 | } | 70 | } |
| 60 | - } | ||
| 61 | } | 71 | } |
| 62 | 72 | ||
| 63 | .coupon-mask { | 73 | .coupon-mask { |
| 64 | - position: absolute; | ||
| 65 | - top: 0; | ||
| 66 | - left: 0; | ||
| 67 | - right: 0; | ||
| 68 | - bottom: 0; | ||
| 69 | - background-color: rgba(0, 0, 0, .5); | ||
| 70 | - display: none; | ||
| 71 | - z-index: 9; | 74 | + position: absolute; |
| 75 | + top: 0; | ||
| 76 | + left: 0; | ||
| 77 | + right: 0; | ||
| 78 | + bottom: 0; | ||
| 79 | + background-color: rgba(0, 0, 0, .5); | ||
| 80 | + display: none; | ||
| 81 | + z-index: 9; | ||
| 72 | } | 82 | } |
| 73 | 83 | ||
| 74 | .coupon-message { | 84 | .coupon-message { |
| 75 | - position: fixed; | ||
| 76 | - top: 50%; | ||
| 77 | - left: 50%; | ||
| 78 | - width: 550rem/$pxConvertRem; | ||
| 79 | - height: 250rem/$pxConvertRem; | ||
| 80 | - margin-left: -275rem/$pxConvertRem; | ||
| 81 | - margin-top: -125rem/$pxConvertRem; | ||
| 82 | - z-index: 10; | ||
| 83 | - background-color: rgba(250, 250, 250, .92); | ||
| 84 | - display: none; | ||
| 85 | - border-radius: 10px; | ||
| 86 | - .coupon-message-content { | ||
| 87 | - border-bottom: 1px solid rgb(197, 197, 197); | ||
| 88 | - height: 160rem/$pxConvertRem; | ||
| 89 | - text-align: center; | ||
| 90 | - line-height: 160rem/$pxConvertRem; | ||
| 91 | - font-size: 28rem/$pxConvertRem; | ||
| 92 | - } | ||
| 93 | - .coupon-message-op { | ||
| 94 | - height: 90rem/$pxConvertRem; | ||
| 95 | - text-align: center; | ||
| 96 | - line-height: 90rem/$pxConvertRem; | ||
| 97 | - font-size: 32rem/$pxConvertRem; | ||
| 98 | - | ||
| 99 | - .coupon-message-op-det { | ||
| 100 | - color: rgb(223, 98, 112); | ||
| 101 | - display:none; | ||
| 102 | - } | ||
| 103 | - .coupon-message-op-go { | ||
| 104 | - color:rgb(223,98,112); | ||
| 105 | - display:none; | 85 | + position: fixed; |
| 86 | + top: 50%; | ||
| 87 | + left: 50%; | ||
| 88 | + width: 550rem/$pxConvertRem; | ||
| 89 | + height: 250rem/$pxConvertRem; | ||
| 90 | + margin-left: -275rem/$pxConvertRem; | ||
| 91 | + margin-top: -125rem/$pxConvertRem; | ||
| 92 | + z-index: 10; | ||
| 93 | + background-color: rgba(250, 250, 250, .92); | ||
| 94 | + display: none; | ||
| 95 | + border-radius: 10px; | ||
| 96 | + | ||
| 97 | + .coupon-message-content { | ||
| 98 | + border-bottom: 1px solid rgb(197, 197, 197); | ||
| 99 | + height: 160rem/$pxConvertRem; | ||
| 100 | + text-align: center; | ||
| 101 | + line-height: 160rem/$pxConvertRem; | ||
| 102 | + font-size: 28rem/$pxConvertRem; | ||
| 106 | } | 103 | } |
| 107 | - .coupon-message-op-rel { | ||
| 108 | - color: rgb(223, 98, 112); | ||
| 109 | - display:none; | 104 | + |
| 105 | + .coupon-message-op { | ||
| 106 | + height: 90rem/$pxConvertRem; | ||
| 107 | + text-align: center; | ||
| 108 | + line-height: 90rem/$pxConvertRem; | ||
| 109 | + font-size: 32rem/$pxConvertRem; | ||
| 110 | + | ||
| 111 | + .coupon-message-op-det { | ||
| 112 | + color: rgb(223, 98, 112); | ||
| 113 | + display:none; | ||
| 114 | + } | ||
| 115 | + | ||
| 116 | + .coupon-message-op-go { | ||
| 117 | + color:rgb(223,98,112); | ||
| 118 | + display:none; | ||
| 119 | + } | ||
| 120 | + | ||
| 121 | + .coupon-message-op-rel { | ||
| 122 | + color: rgb(223, 98, 112); | ||
| 123 | + display:none; | ||
| 124 | + } | ||
| 110 | } | 125 | } |
| 111 | - } | ||
| 112 | } | 126 | } |
-
Please register or login to post a comment