Showing
3 changed files
with
121 additions
and
96 deletions
1 | -.yoho-coin{ | 1 | +.yoho-coin { |
2 | background: #f6f6f6; | 2 | background: #f6f6f6; |
3 | padding-top: 20px; | 3 | padding-top: 20px; |
4 | 4 | ||
5 | - .coin-total{ | 5 | + .coin-total { |
6 | padding: 35px 0; | 6 | padding: 35px 0; |
7 | background: $white; | 7 | background: $white; |
8 | text-align: center; | 8 | text-align: center; |
9 | 9 | ||
10 | - p:first-child{ | 10 | + p:first-child { |
11 | font-size: 34px; | 11 | font-size: 34px; |
12 | } | 12 | } |
13 | - p:nth-child(2){ | 13 | + p:nth-child(2) { |
14 | font-size: 78px; | 14 | font-size: 78px; |
15 | color: #4a90e2; | 15 | color: #4a90e2; |
16 | line-height: 80px; | 16 | line-height: 80px; |
17 | } | 17 | } |
18 | - p:last-child{ | 18 | + p:last-child { |
19 | color: #b0b0b0; | 19 | color: #b0b0b0; |
20 | font-size: 28px; | 20 | font-size: 28px; |
21 | } | 21 | } |
22 | } | 22 | } |
23 | - .coin-detail{ | 23 | + .coin-detail { |
24 | margin-top: 40px; | 24 | margin-top: 40px; |
25 | 25 | ||
26 | - >p:first-child{ | 26 | + > p:first-child { |
27 | padding: 0 30px; | 27 | padding: 0 30px; |
28 | font-size: 28px; | 28 | font-size: 28px; |
29 | color: #b0b0b0; | 29 | color: #b0b0b0; |
30 | } | 30 | } |
31 | - .coin-detail-list{ | 31 | + .coin-detail-list { |
32 | padding: 0 30px; | 32 | padding: 0 30px; |
33 | background: $white; | 33 | background: $white; |
34 | border-top: 1px solid #eee; | 34 | border-top: 1px solid #eee; |
35 | border-bottom: 1px solid #eee; | 35 | border-bottom: 1px solid #eee; |
36 | 36 | ||
37 | - li{ | 37 | + li { |
38 | display: flex; | 38 | display: flex; |
39 | padding: 20px 0; | 39 | padding: 20px 0; |
40 | border-bottom: 1px solid #eee; | 40 | border-bottom: 1px solid #eee; |
41 | - &:last-child{ | 41 | + |
42 | + &:last-child { | ||
42 | border-bottom: 0 none; | 43 | border-bottom: 0 none; |
43 | } | 44 | } |
44 | } | 45 | } |
45 | - .coin-source{ | 46 | + .coin-source { |
46 | flex: 1; | 47 | flex: 1; |
47 | - p{ | 48 | + |
49 | + p { | ||
48 | display: -webkit-box; | 50 | display: -webkit-box; |
49 | -webkit-line-clamp: 1; | 51 | -webkit-line-clamp: 1; |
50 | -webkit-box-orient: vertical; | 52 | -webkit-box-orient: vertical; |
@@ -55,14 +57,15 @@ | @@ -55,14 +57,15 @@ | ||
55 | font-size: 34px; | 57 | font-size: 34px; |
56 | margin-right: 60px; | 58 | margin-right: 60px; |
57 | } | 59 | } |
58 | - time{ | 60 | + |
61 | + time { | ||
59 | display: block; | 62 | display: block; |
60 | margin-top: 5px; | 63 | margin-top: 5px; |
61 | font-size: 28px; | 64 | font-size: 28px; |
62 | color: #b0b0b0; | 65 | color: #b0b0b0; |
63 | } | 66 | } |
64 | } | 67 | } |
65 | - .coin-num{ | 68 | + .coin-num { |
66 | font-size: 34px; | 69 | font-size: 34px; |
67 | line-height: 92px; | 70 | line-height: 92px; |
68 | } | 71 | } |
1 | $black: #000; | 1 | $black: #000; |
2 | $white: #fff; | 2 | $white: #fff; |
3 | -.main-wrap{ | 3 | + |
4 | +.main-wrap { | ||
4 | background: #f6f6f6; | 5 | background: #f6f6f6; |
5 | } | 6 | } |
6 | -.order-detail{ | ||
7 | - >div{ | 7 | + |
8 | +.order-detail { | ||
9 | + | ||
10 | + > div { | ||
8 | background: $white; | 11 | background: $white; |
9 | padding: 0 30px; | 12 | padding: 0 30px; |
10 | } | 13 | } |
11 | - .order-status{ | 14 | + |
15 | + .order-status { | ||
12 | display: flex; | 16 | display: flex; |
13 | height: 80px; | 17 | height: 80px; |
14 | line-height: 80px; | 18 | line-height: 80px; |
15 | color: $white; | 19 | color: $white; |
16 | background: $black; | 20 | background: $black; |
17 | 21 | ||
18 | - p:first-of-type{ | 22 | + p:first-of-type { |
19 | flex: 1; | 23 | flex: 1; |
20 | font-size: 34px; | 24 | font-size: 34px; |
21 | } | 25 | } |
22 | } | 26 | } |
23 | 27 | ||
24 | - .order-code{ | 28 | + .order-code { |
25 | padding: 20px 30px; | 29 | padding: 20px 30px; |
26 | margin-bottom: 20px; | 30 | margin-bottom: 20px; |
27 | border-top: 1px solid #eee; | 31 | border-top: 1px solid #eee; |
28 | border-bottom: 1px solid #eee; | 32 | border-bottom: 1px solid #eee; |
29 | 33 | ||
30 | - p:first-of-type{ | 34 | + p:first-of-type { |
31 | font-size: 34px; | 35 | font-size: 34px; |
32 | font-weight: 700; | 36 | font-weight: 700; |
33 | } | 37 | } |
34 | - p:last-of-type{ | 38 | + p:last-of-type { |
35 | font-size: 28px; | 39 | font-size: 28px; |
36 | color: #b0b0b0; | 40 | color: #b0b0b0; |
37 | } | 41 | } |
38 | } | 42 | } |
39 | 43 | ||
40 | - .order-address{ | 44 | + .order-address { |
41 | position: relative; | 45 | position: relative; |
42 | padding: 20px 30px 27px; | 46 | padding: 20px 30px 27px; |
43 | margin-bottom: 20px; | 47 | margin-bottom: 20px; |
44 | border-top: 1px solid #eee; | 48 | border-top: 1px solid #eee; |
45 | word-wrap: break-word; | 49 | word-wrap: break-word; |
46 | 50 | ||
47 | - p:first-of-type{ | 51 | + p:first-of-type { |
48 | font-size: 32px; | 52 | font-size: 32px; |
49 | font-weight: 700; | 53 | font-weight: 700; |
50 | - span{ | 54 | + |
55 | + span { | ||
51 | margin-right: 40px; | 56 | margin-right: 40px; |
52 | } | 57 | } |
53 | } | 58 | } |
54 | - p:last-of-type{ | 59 | + p:last-of-type { |
55 | font-size: 28px; | 60 | font-size: 28px; |
56 | color: #b0b0b0; | 61 | color: #b0b0b0; |
57 | } | 62 | } |
58 | - &:after{ | ||
59 | - content: ''; | 63 | + &:after { |
64 | + content: ""; | ||
60 | position: absolute; | 65 | position: absolute; |
61 | left: 0; | 66 | left: 0; |
62 | bottom: 0; | 67 | bottom: 0; |
@@ -66,49 +71,51 @@ $white: #fff; | @@ -66,49 +71,51 @@ $white: #fff; | ||
66 | border-bottom: 1px solid #eee; | 71 | border-bottom: 1px solid #eee; |
67 | } | 72 | } |
68 | } | 73 | } |
69 | - .order-goods{ | 74 | + .order-goods { |
70 | padding-top: 20px; | 75 | padding-top: 20px; |
71 | border-top: 1px solid #eee; | 76 | border-top: 1px solid #eee; |
72 | border-bottom: 1px solid #eee; | 77 | border-bottom: 1px solid #eee; |
73 | 78 | ||
74 | - .goods-info{ | 79 | + .goods-info { |
75 | display: flex; | 80 | display: flex; |
76 | padding: 20px 0; | 81 | padding: 20px 0; |
77 | border-bottom: 1px solid #eee; | 82 | border-bottom: 1px solid #eee; |
78 | - &:last-child{ | 83 | + |
84 | + &:last-child { | ||
79 | border-bottom: 0 none; | 85 | border-bottom: 0 none; |
80 | } | 86 | } |
81 | } | 87 | } |
82 | - .img-box{ | 88 | + .img-box { |
83 | position: relative; | 89 | position: relative; |
84 | width: 98px; | 90 | width: 98px; |
85 | height: 130px; | 91 | height: 130px; |
86 | overflow: hidden; | 92 | overflow: hidden; |
87 | 93 | ||
88 | - label{ | 94 | + label { |
89 | position: absolute; | 95 | position: absolute; |
90 | left: 0; | 96 | left: 0; |
91 | bottom: 0; | 97 | bottom: 0; |
92 | width: 100%; | 98 | width: 100%; |
93 | height: 30px; | 99 | height: 30px; |
94 | line-height: 30px; | 100 | line-height: 30px; |
95 | - background: rgba(0, 0, 0, .2); | 101 | + background: rgba(0, 0, 0, 0.2); |
96 | color: $white; | 102 | color: $white; |
97 | text-align: center; | 103 | text-align: center; |
98 | } | 104 | } |
99 | - img{ | 105 | + img { |
100 | width: 100%; | 106 | width: 100%; |
101 | height: 100%; | 107 | height: 100%; |
102 | } | 108 | } |
103 | } | 109 | } |
104 | - .goods-detail{ | 110 | + .goods-detail { |
105 | flex: 1; | 111 | flex: 1; |
106 | margin: 0 20px; | 112 | margin: 0 20px; |
107 | font-size: 24px; | 113 | font-size: 24px; |
108 | - span{ | 114 | + |
115 | + span { | ||
109 | margin-right: 40px; | 116 | margin-right: 40px; |
110 | } | 117 | } |
111 | - .name{ | 118 | + .name { |
112 | display: -webkit-box; | 119 | display: -webkit-box; |
113 | -webkit-line-clamp: 2; | 120 | -webkit-line-clamp: 2; |
114 | -webkit-box-orient: vertical; | 121 | -webkit-box-orient: vertical; |
@@ -118,50 +125,53 @@ $white: #fff; | @@ -118,50 +125,53 @@ $white: #fff; | ||
118 | overflow: hidden; | 125 | overflow: hidden; |
119 | font-size: 28px; | 126 | font-size: 28px; |
120 | } | 127 | } |
121 | - .size{ | 128 | + .size { |
122 | color: #b0b0b0; | 129 | color: #b0b0b0; |
123 | } | 130 | } |
124 | } | 131 | } |
125 | - .goods-price{ | 132 | + .goods-price { |
126 | text-align: right; | 133 | text-align: right; |
127 | - p:first-of-type{ | 134 | + |
135 | + p:first-of-type { | ||
128 | font-size: 28px; | 136 | font-size: 28px; |
129 | } | 137 | } |
130 | - p:last-of-type{ | 138 | + p:last-of-type { |
131 | font-size: 30px; | 139 | font-size: 30px; |
132 | color: #b0b0b0; | 140 | color: #b0b0b0; |
133 | } | 141 | } |
134 | } | 142 | } |
135 | } | 143 | } |
136 | - .order-amount{ | 144 | + .order-amount { |
137 | padding: 30px 20px; | 145 | padding: 30px 20px; |
138 | margin-bottom: 20px; | 146 | margin-bottom: 20px; |
139 | border-bottom: 1px solid #eee; | 147 | border-bottom: 1px solid #eee; |
140 | text-align: right; | 148 | text-align: right; |
141 | 149 | ||
142 | - li{ | 150 | + li { |
143 | font-size: 28px; | 151 | font-size: 28px; |
144 | 152 | ||
145 | - label{ | 153 | + label { |
146 | display: inline-block; | 154 | display: inline-block; |
147 | width: 150px; | 155 | width: 150px; |
148 | text-align: left; | 156 | text-align: left; |
149 | color: #b0b0b0; | 157 | color: #b0b0b0; |
150 | } | 158 | } |
151 | - span{ | 159 | + span { |
152 | display: inline-block; | 160 | display: inline-block; |
153 | - width:200px; | 161 | + width: 200px; |
154 | text-align: left; | 162 | text-align: left; |
155 | } | 163 | } |
156 | - &:last-of-type{ | 164 | + &:last-of-type { |
157 | font-size: 34px; | 165 | font-size: 34px; |
158 | - label{ | 166 | + |
167 | + label { | ||
159 | color: $black; | 168 | color: $black; |
160 | } | 169 | } |
161 | } | 170 | } |
171 | + | ||
162 | } | 172 | } |
163 | } | 173 | } |
164 | - .order-button{ | 174 | + .order-button { |
165 | position: fixed; | 175 | position: fixed; |
166 | left: 0; | 176 | left: 0; |
167 | right: 0; | 177 | right: 0; |
@@ -171,7 +181,7 @@ $white: #fff; | @@ -171,7 +181,7 @@ $white: #fff; | ||
171 | border-top: 1px solid #eee; | 181 | border-top: 1px solid #eee; |
172 | text-align: right; | 182 | text-align: right; |
173 | 183 | ||
174 | - button{ | 184 | + button { |
175 | padding: 0 20px; | 185 | padding: 0 20px; |
176 | height: 68px; | 186 | height: 68px; |
177 | line-height: 68px; | 187 | line-height: 68px; |
@@ -182,22 +192,22 @@ $white: #fff; | @@ -182,22 +192,22 @@ $white: #fff; | ||
182 | background: $white; | 192 | background: $white; |
183 | font-size: 28px; | 193 | font-size: 28px; |
184 | 194 | ||
185 | - &.black{ | 195 | + &.black { |
186 | width: 192px; | 196 | width: 192px; |
187 | color: $white; | 197 | color: $white; |
188 | background: $black; | 198 | background: $black; |
189 | } | 199 | } |
190 | - &.countdown{ | 200 | + &.countdown { |
191 | color: $white; | 201 | color: $white; |
192 | background: $black; | 202 | background: $black; |
193 | } | 203 | } |
194 | - &.normal{ | 204 | + &.normal { |
195 | width: 188px; | 205 | width: 188px; |
196 | padding: 0; | 206 | padding: 0; |
197 | border: 1px solid $black; | 207 | border: 1px solid $black; |
198 | color: $black; | 208 | color: $black; |
199 | } | 209 | } |
200 | - &:focus{ | 210 | + &:focus { |
201 | outline: none; | 211 | outline: none; |
202 | } | 212 | } |
203 | } | 213 | } |
1 | $black: #000; | 1 | $black: #000; |
2 | $white: #fff; | 2 | $white: #fff; |
3 | 3 | ||
4 | -.order-wrapper{ | 4 | +.order-wrapper { |
5 | background: #f6f6f6; | 5 | background: #f6f6f6; |
6 | padding-top: 20px; | 6 | padding-top: 20px; |
7 | 7 | ||
8 | - .order-item{ | 8 | + .order-item { |
9 | background: $white; | 9 | background: $white; |
10 | margin-top: 20px; | 10 | margin-top: 20px; |
11 | border-top: 1px solid #eee; | 11 | border-top: 1px solid #eee; |
12 | border-bottom: 1px solid #eee; | 12 | border-bottom: 1px solid #eee; |
13 | 13 | ||
14 | - &:first-child{ | 14 | + &:first-child { |
15 | margin-top: 0; | 15 | margin-top: 0; |
16 | } | 16 | } |
17 | } | 17 | } |
18 | - .order-detail{ | 18 | + .order-detail { |
19 | padding: 0 30px; | 19 | padding: 0 30px; |
20 | 20 | ||
21 | - .order-code,.order-option,.goods-info{ | 21 | + .order-code, |
22 | + .order-option, | ||
23 | + .goods-info { | ||
22 | display: flex; | 24 | display: flex; |
23 | - >div{ | 25 | + |
26 | + > div { | ||
24 | box-sizing: border-box; | 27 | box-sizing: border-box; |
25 | } | 28 | } |
26 | } | 29 | } |
27 | } | 30 | } |
28 | - .order-code{ | 31 | + .order-code { |
29 | height: 88px; | 32 | height: 88px; |
30 | font-size: 34px; | 33 | font-size: 34px; |
31 | border-bottom: 1px solid #eee; | 34 | border-bottom: 1px solid #eee; |
32 | line-height: 88px; | 35 | line-height: 88px; |
33 | 36 | ||
34 | - >p:first-child{ | 37 | + > p:first-child { |
35 | flex: 1; | 38 | flex: 1; |
36 | } | 39 | } |
37 | } | 40 | } |
38 | - .order-goods{ | ||
39 | - .goods-info{ | 41 | + .order-goods { |
42 | + .goods-info { | ||
40 | position: relative; | 43 | position: relative; |
41 | padding: 20px 0; | 44 | padding: 20px 0; |
42 | border-bottom: 1px solid #eee; | 45 | border-bottom: 1px solid #eee; |
43 | 46 | ||
44 | - &:last-child{ | 47 | + &:last-child { |
45 | border-bottom: 0 none; | 48 | border-bottom: 0 none; |
46 | } | 49 | } |
47 | 50 | ||
48 | - >a{ | 51 | + > a { |
49 | position: absolute; | 52 | position: absolute; |
50 | - left:0; | ||
51 | - right:0; | ||
52 | - bottom:0; | ||
53 | - top:0; | 53 | + left: 0; |
54 | + right: 0; | ||
55 | + bottom: 0; | ||
56 | + top: 0; | ||
54 | width: 100%; | 57 | width: 100%; |
55 | - opacity:0; | 58 | + opacity: 0; |
56 | } | 59 | } |
57 | } | 60 | } |
58 | - .img-box{ | 61 | + .img-box { |
59 | width: 98px; | 62 | width: 98px; |
60 | height: 130px; | 63 | height: 130px; |
61 | overflow: hidden; | 64 | overflow: hidden; |
62 | - img{ | 65 | + |
66 | + img { | ||
63 | width: 100%; | 67 | width: 100%; |
64 | height: 100%; | 68 | height: 100%; |
65 | } | 69 | } |
66 | } | 70 | } |
67 | - .goods-detail{ | 71 | + .goods-detail { |
68 | flex: 1; | 72 | flex: 1; |
69 | margin: 0 20px; | 73 | margin: 0 20px; |
70 | font-size: 24px; | 74 | font-size: 24px; |
71 | 75 | ||
72 | - span{ | 76 | + span { |
73 | margin-right: 40px; | 77 | margin-right: 40px; |
74 | } | 78 | } |
75 | - .name{ | 79 | + |
80 | + .name { | ||
76 | display: -webkit-box; | 81 | display: -webkit-box; |
77 | -webkit-line-clamp: 2; | 82 | -webkit-line-clamp: 2; |
78 | -webkit-box-orient: vertical; | 83 | -webkit-box-orient: vertical; |
79 | text-overflow: ellipsis; | 84 | text-overflow: ellipsis; |
80 | - /*height: 2.4em;*/ | 85 | + |
86 | + /* height: 2.4em; */ | ||
81 | line-height: 1.25; | 87 | line-height: 1.25; |
82 | overflow: hidden; | 88 | overflow: hidden; |
83 | font-size: 28px; | 89 | font-size: 28px; |
84 | } | 90 | } |
85 | - .size{ | 91 | + .size { |
86 | color: #b0b0b0; | 92 | color: #b0b0b0; |
87 | } | 93 | } |
88 | } | 94 | } |
89 | - .goods-price{ | 95 | + .goods-price { |
90 | text-align: right; | 96 | text-align: right; |
91 | - p:first-of-type{ | 97 | + |
98 | + p:first-of-type { | ||
92 | font-size: 28px; | 99 | font-size: 28px; |
93 | } | 100 | } |
94 | - p:last-of-type{ | 101 | + |
102 | + p:last-of-type { | ||
95 | font-size: 30px; | 103 | font-size: 30px; |
96 | color: #b0b0b0; | 104 | color: #b0b0b0; |
97 | } | 105 | } |
98 | } | 106 | } |
99 | } | 107 | } |
100 | - .order-option{ | 108 | + .order-option { |
101 | padding: 30px 0; | 109 | padding: 30px 0; |
102 | border-top: 1px solid #eee; | 110 | border-top: 1px solid #eee; |
103 | 111 | ||
104 | - .goods-total{ | 112 | + .goods-total { |
105 | flex: 1; | 113 | flex: 1; |
106 | font-size: 28px; | 114 | font-size: 28px; |
107 | line-height: 68px; | 115 | line-height: 68px; |
108 | } | 116 | } |
109 | - .options{ | ||
110 | - button{ | 117 | + |
118 | + .options { | ||
119 | + button { | ||
111 | padding: 0 20px; | 120 | padding: 0 20px; |
112 | height: 68px; | 121 | height: 68px; |
113 | line-height: 68px; | 122 | line-height: 68px; |
@@ -118,45 +127,48 @@ $white: #fff; | @@ -118,45 +127,48 @@ $white: #fff; | ||
118 | background: $white; | 127 | background: $white; |
119 | font-size: 28px; | 128 | font-size: 28px; |
120 | 129 | ||
121 | - &.black{ | 130 | + &.black { |
122 | width: 192px; | 131 | width: 192px; |
123 | color: $white; | 132 | color: $white; |
124 | background: $black; | 133 | background: $black; |
125 | } | 134 | } |
126 | - &.countdown{ | 135 | + &.countdown { |
127 | color: $white; | 136 | color: $white; |
128 | background: $black; | 137 | background: $black; |
129 | } | 138 | } |
130 | - &.normal{ | 139 | + &.normal { |
131 | width: 188px; | 140 | width: 188px; |
132 | padding: 0; | 141 | padding: 0; |
133 | border: 1px solid $black; | 142 | border: 1px solid $black; |
134 | color: $black; | 143 | color: $black; |
135 | } | 144 | } |
136 | - &:focus{ | 145 | + &:focus { |
137 | outline: none; | 146 | outline: none; |
138 | } | 147 | } |
139 | } | 148 | } |
140 | } | 149 | } |
141 | } | 150 | } |
142 | } | 151 | } |
143 | -.return-goods{ | ||
144 | - .order-code{ | 152 | + |
153 | +.return-goods { | ||
154 | + .order-code { | ||
145 | height: 128px; | 155 | height: 128px; |
146 | 156 | ||
147 | - .code-time{ | 157 | + .code-time { |
148 | flex: 1; | 158 | flex: 1; |
149 | - p:first-child{ | 159 | + |
160 | + p:first-child { | ||
150 | margin-top: 8px; | 161 | margin-top: 8px; |
151 | line-height: 60px; | 162 | line-height: 60px; |
152 | } | 163 | } |
153 | - p:nth-child(2){ | 164 | + p:nth-child(2) { |
154 | font-size: 28px; | 165 | font-size: 28px; |
155 | line-height: 30px; | 166 | line-height: 30px; |
156 | color: #b0b0b0; | 167 | color: #b0b0b0; |
157 | } | 168 | } |
158 | } | 169 | } |
159 | - >p:last-child{ | 170 | + |
171 | + > p:last-child { | ||
160 | line-height: 128px; | 172 | line-height: 128px; |
161 | color: #4a90e2; | 173 | color: #4a90e2; |
162 | } | 174 | } |
-
Please register or login to post a comment