Authored by 毕凯

整理 scss 文件地址

1 .coupon-area { 1 .coupon-area {
2 - max-width: 640rem / $pxConvertRem 0; 2 + max-width: 640px;
3 overflow: hidden; 3 overflow: hidden;
4 4
5 .banner-top { 5 .banner-top {
1 -.coupon-area {  
2 - max-width: 640px;  
3 - overflow: hidden;  
4 -  
5 - .banner-top {  
6 - float: left;  
7 - }  
8 -}  
9 -  
10 -.just-img{  
11 - width: 100%;  
12 - float: left;  
13 - margin: 20rem / $pxConvertRem 0;  
14 -}  
15 -.coupon-floor {  
16 - float: left;  
17 - width: 100%;  
18 - .floor-title {  
19 - background-color: #fff;  
20 - text-align: center;  
21 - height: 96rem / $pxConvertRem;  
22 - line-height: 96rem / $pxConvertRem;  
23 - font-size: 30rem / $pxConvertRem;  
24 - }  
25 -  
26 - .floor-main {  
27 - height: 180rem / $pxConvertRem;  
28 - width: 100%;  
29 - background-size: 100%;  
30 - background-repeat: no-repeat;  
31 - padding: 10rem / $pxConvertRem 30rem / $pxConvertRem;  
32 - box-sizing: border-box;  
33 - float: left;  
34 -  
35 - .main-left {  
36 - float: left;  
37 - width: 467rem / $pxConvertRem;  
38 - height: 160rem / $pxConvertRem;  
39 - }  
40 -  
41 - .main-right-receive, .main-right-use, .main-right-go {  
42 - float: right;  
43 - width: 113rem / $pxConvertRem;  
44 - height: 160rem / $pxConvertRem;  
45 - position: relative;  
46 -  
47 - span {  
48 - background-repeat: no-repeat;  
49 - background-size: contain;  
50 -  
51 - &.on-receive {  
52 - position: absolute;  
53 - left: 50%;  
54 - top: 50rem / $pxConvertRem;  
55 - margin-left: -26rem / $pxConvertRem;  
56 - display: inline-block;  
57 - width: 52rem / $pxConvertRem;  
58 - height: 54rem / $pxConvertRem;  
59 - background-image: image-url('coupon/click-txt.png');  
60 - }  
61 -  
62 - &.received {  
63 - width: 113rem / $pxConvertRem;  
64 - height: 132rem / $pxConvertRem;  
65 - background-image: image-url('coupon/received.png');  
66 - position: absolute;  
67 - top: 0;  
68 - right: 0;  
69 - }  
70 -  
71 - &.zero {  
72 - width: 111rem / $pxConvertRem;  
73 - height: 132rem / $pxConvertRem;  
74 - background-image: image-url('coupon/zero.png');  
75 - position: absolute;  
76 - top: 0;  
77 - right: 0;  
78 - }  
79 - }  
80 - }  
81 - }  
82 -}  
83 -  
84 -.floor-mask {  
85 - position: absolute;  
86 - top: 0;  
87 - left: 0;  
88 - right: 0;  
89 - bottom: 0;  
90 - background-color: rgba(0, 0, 0, .5);  
91 - display: none;  
92 - z-index: 9;  
93 -}  
94 -  
95 -.floor-message {  
96 - position: fixed;  
97 - top: 50%;  
98 - left: 50%;  
99 - width: 550rem/$pxConvertRem;  
100 - height: 250rem/$pxConvertRem;  
101 - margin-left: -275rem/$pxConvertRem;  
102 - margin-top: -125rem/$pxConvertRem;  
103 - z-index: 10;  
104 - background-color: rgba(250, 250, 250, .92);  
105 - display: none;  
106 - border-radius: 10px;  
107 -  
108 - .coupon-message-content {  
109 - border-bottom: 1px solid rgb(197, 197, 197);  
110 - height: 160rem/$pxConvertRem;  
111 - text-align: center;  
112 - line-height: 160rem/$pxConvertRem;  
113 - font-size: 28rem/$pxConvertRem;  
114 - }  
115 -  
116 - .coupon-message-op {  
117 - height: 90rem/$pxConvertRem;  
118 - text-align: center;  
119 - line-height: 90rem/$pxConvertRem;  
120 - font-size: 32rem/$pxConvertRem;  
121 - color: rgb(223, 98, 112);  
122 - }  
123 -}  
124 -  
125 -.floor-tooltip{  
126 - position: fixed;  
127 - top: 50%;  
128 - left: 50%;  
129 - width: 220rem/$pxConvertRem;  
130 - height: 140rem/$pxConvertRem;  
131 - margin-left: -110rem/$pxConvertRem;  
132 - margin-top: -70rem/$pxConvertRem;  
133 - z-index: 11;  
134 - background-color: rgba(60, 60, 60, .7);  
135 - display: none;  
136 - border-radius: 8rem/$pxConvertRem;  
137 - color: #fff;  
138 -  
139 - .icon-box{  
140 - height: 84rem/$pxConvertRem;  
141 - line-height: 84rem/$pxConvertRem;  
142 - text-align: center;  
143 - }  
144 -  
145 - .icon-msg{  
146 - height: 56rem/$pxConvertRem;  
147 - text-align: center;  
148 - }  
149 -}  
1 -.limit-good-page {  
2 - background-color: #f4f4f4;  
3 - color: #444;  
4 -  
5 - .top {  
6 - font-size: 0.6rem;  
7 - height: 2rem;  
8 - line-height: 2.2rem;  
9 - margin-bottom: 0.1rem;  
10 - background-color: #fff;  
11 - padding: 0.2rem 0 0.2rem 0.5rem;  
12 -  
13 -  
14 - div {  
15 - width: 20%;  
16 - display: inline-block;  
17 - float: left;  
18 - img {  
19 - width: 1.5rem;  
20 - border: 1px solid #ccc;  
21 - border-radius: 100%;  
22 - position: relative;  
23 - top: 0.25rem;  
24 - }  
25 - }  
26 -  
27 - p {  
28 - display: inline-block;  
29 - float: left;  
30 - width: 80%;  
31 - }  
32 - }  
33 -  
34 - .detail {  
35 - background-color: #fff;  
36 - padding: 0.6rem 0.8rem;  
37 - border-bottom: 1px solid #e6e6e6;  
38 - margin-bottom: 1rem;  
39 -  
40 - .name {  
41 - font-size: 0.9rem;  
42 - margin-bottom: 0.5rem;  
43 - }  
44 - .sale-info {  
45 - height: 1rem;  
46 - line-height: 1rem;  
47 - }  
48 - .price {  
49 - font-size: 0.8rem;  
50 - color: #d0021b;  
51 - float: left;  
52 - }  
53 -  
54 - .date {  
55 - font-size: 0.6rem;  
56 - float: right;  
57 -  
58 - .text {  
59 - position: relative;  
60 - top: 0.08rem;  
61 - }  
62 - }  
63 - }  
64 -  
65 - .goodDesc {  
66 - padding: 0.5rem;  
67 - border-top: 1px solid #e6e6e6;  
68 - background-color: #fff;  
69 -  
70 - p {  
71 - font-size: 0.6rem;  
72 - line-height: 1rem;  
73 - text-indent: 2em;  
74 - }  
75 -  
76 - img {  
77 - margin: 0.3rem 0;  
78 - max-width: 100%;  
79 - }  
80 - }  
81 -  
82 - .bottom {  
83 - background-color: #fff;  
84 - border-top: 1px solid #e6e6e6;  
85 - padding: 0.5rem 2rem 2rem 2rem;  
86 - height: 3rem;  
87 - width: 12rem;  
88 - margin: 0 auto;  
89 -  
90 - .logo {  
91 - width: 100;  
92 - height: 2.5rem;  
93 -  
94 - background-image: image-url('logo-bottom.png');  
95 - background-size: 100%;  
96 - background-repeat: no-repeat;  
97 - background-position: center;  
98 - }  
99 -  
100 - .btn {  
101 - font-size: 0.8rem;  
102 - background-color: #fff;  
103 - border: 1px solid #444;  
104 - border-radius: 0.2rem;  
105 - padding: 0.3rem 0.6rem;  
106 - }  
107 -  
108 - .btn:active {  
109 - background-color: #ccc;  
110 - }  
111 -  
112 - .left, .right {  
113 - display: inline-block;  
114 - float: left;  
115 - }  
116 -  
117 - .left {  
118 - width: 39%;  
119 - }  
120 -  
121 - .right {  
122 - width: 60%;  
123 - font-size: 0.65rem;  
124 -  
125 - span {  
126 - display: block;  
127 - width: 95%;  
128 - margin: 0 auto;  
129 - }  
130 - }  
131 - }  
132 -}