wxd / MShopWeApp

Commit c1ad09c9f241fb2cd9e06132a88f8ea596a17d5e

Authored by DESKTOP-QHAFKU5\iceling
1 parent cd0c59aa

商品界面优化

Inline Side-by-side
Showing 8 changed files with 625 additions and 519 deletions
components/diy_goodsGroup/diy_goodsGroup.wxml
  View file @c1ad09c
@@ -44,9 +44,9 @@ @@ -44,9 +44,9 @@
44 <block wx:if="{{card_field}}"> 44 <block wx:if="{{card_field}}">
45 <!-- 等级价>0 --> 45 <!-- 等级价>0 -->
46 <block wx:if="{{item[card_field]>0}}"> 46 <block wx:if="{{item[card_field]>0}}">
47 - <view class="money flex" > 47 + <view class="money flex ai_and">
48 <!-- 办卡价 --> 48 <!-- 办卡价 -->
49 - <view class="flex xc-wc "> 49 + <view class="flex xc-wc ai_and">
50 <view class="fs24 wz_red">￥</view> 50 <view class="fs24 wz_red">￥</view>
51 <view class="fs35 wz_red">{{filter.toFix(item[card_field],2)}}</view> 51 <view class="fs35 wz_red">{{filter.toFix(item[card_field],2)}}</view>
52 <view class="card_bg"><image src="{{url}}/miniapp/images/plus/dj_icon.png"></image><view class="card_name">{{card_name}}</view></view> 52 <view class="card_bg"><image src="{{url}}/miniapp/images/plus/dj_icon.png"></image><view class="card_name">{{card_name}}</view></view>
@@ -95,7 +95,7 @@ @@ -95,7 +95,7 @@
95 </view> 95 </view>
96 <view class="flex" style="line-height: 28rpx;" > 96 <view class="flex" style="line-height: 28rpx;" >
97 <!-- 等级价 --> 97 <!-- 等级价 -->
98 - <view class="price flex"> 98 + <view class="price flex ai_and">
99 <view class="fs22">￥</view> 99 <view class="fs22">￥</view>
100 <view class="fs28">{{filter.toFix(g_filter.get_card_price(item,card_list,0),2)}}</view> 100 <view class="fs28">{{filter.toFix(g_filter.get_card_price(item,card_list,0),2)}}</view>
101 <view class="card_bg"> <image src="{{url}}/miniapp/images/plus/dj_icon.png"></image>{{g_filter.get_card_price(item,card_list,1)}}</view> 101 <view class="card_bg"> <image src="{{url}}/miniapp/images/plus/dj_icon.png"></image>{{g_filter.get_card_price(item,card_list,1)}}</view>
@@ -183,7 +183,7 @@ @@ -183,7 +183,7 @@
183 <block wx:if="{{item[card_field]>0}}"> 183 <block wx:if="{{item[card_field]>0}}">
184 <view class="money flex" > 184 <view class="money flex" >
185 <!-- 办卡价 --> 185 <!-- 办卡价 -->
186 - <view class="flex xc-wc"> 186 + <view class="flex xc-wc ai_and">
187 <view class="fs24 wz_red">￥</view> 187 <view class="fs24 wz_red">￥</view>
188 <view class="fs35 wz_red">{{filter.toFix(item[card_field],2)}}</view> 188 <view class="fs35 wz_red">{{filter.toFix(item[card_field],2)}}</view>
189 <view class="card_bg"><image src="{{url}}/miniapp/images/plus/dj_icon.png"></image><view class="card_name">{{card_name}}</view></view> 189 <view class="card_bg"><image src="{{url}}/miniapp/images/plus/dj_icon.png"></image><view class="card_name">{{card_name}}</view></view>
@@ -232,7 +232,7 @@ @@ -232,7 +232,7 @@
232 </view> 232 </view>
233 <view class="flex" style="line-height: 28rpx;" > 233 <view class="flex" style="line-height: 28rpx;" >
234 <!-- 等级价 --> 234 <!-- 等级价 -->
235 - <view class="price flex"> 235 + <view class="price flex ai_and">
236 <view class="fs22">￥</view> 236 <view class="fs22">￥</view>
237 <view class="fs28">{{filter.toFix(g_filter.get_card_price(item,card_list,0),2)}}</view> 237 <view class="fs28">{{filter.toFix(g_filter.get_card_price(item,card_list,0),2)}}</view>
238 <view class="card_bg"> <image src="{{url}}/miniapp/images/plus/dj_icon.png"></image>{{g_filter.get_card_price(item,card_list,1)}}</view> 238 <view class="card_bg"> <image src="{{url}}/miniapp/images/plus/dj_icon.png"></image>{{g_filter.get_card_price(item,card_list,1)}}</view>
@@ -319,7 +319,7 @@ @@ -319,7 +319,7 @@
319 <block wx:if="{{item[card_field]>0}}"> 319 <block wx:if="{{item[card_field]>0}}">
320 <view class="money flex" > 320 <view class="money flex" >
321 <!-- 办卡价 --> 321 <!-- 办卡价 -->
322 - <view class="flex xc-wc"> 322 + <view class="flex xc-wc ai_and">
323 <view class="fs24 wz_red">￥</view> 323 <view class="fs24 wz_red">￥</view>
324 <view class="fs35 wz_red">{{filter.toFix(item[card_field],2)}}</view> 324 <view class="fs35 wz_red">{{filter.toFix(item[card_field],2)}}</view>
325 <view class="card_bg"><image src="{{url}}/miniapp/images/plus/dj_icon.png"></image><view class="card_name">{{card_name}}</view></view> 325 <view class="card_bg"><image src="{{url}}/miniapp/images/plus/dj_icon.png"></image><view class="card_name">{{card_name}}</view></view>
@@ -368,7 +368,7 @@ @@ -368,7 +368,7 @@
368 </view> 368 </view>
369 <view class="flex" style="line-height: 28rpx;" > 369 <view class="flex" style="line-height: 28rpx;" >
370 <!-- 等级价 --> 370 <!-- 等级价 -->
371 - <view class="price flex"> 371 + <view class="price flex ai_and">
372 <view class="fs22">￥</view> 372 <view class="fs22">￥</view>
373 <view class="fs28">{{filter.toFix(g_filter.get_card_price(item,card_list,0),2)}}</view> 373 <view class="fs28">{{filter.toFix(g_filter.get_card_price(item,card_list,0),2)}}</view>
374 <view class="card_bg"> <image src="{{url}}/miniapp/images/plus/dj_icon.png"></image>{{g_filter.get_card_price(item,card_list,1)}}</view> 374 <view class="card_bg"> <image src="{{url}}/miniapp/images/plus/dj_icon.png"></image>{{g_filter.get_card_price(item,card_list,1)}}</view>
@@ -450,7 +450,7 @@ @@ -450,7 +450,7 @@
450 <block wx:if="{{item[card_field]>0}}"> 450 <block wx:if="{{item[card_field]>0}}">
451 <view class="money flex" > 451 <view class="money flex" >
452 <!-- 办卡价 --> 452 <!-- 办卡价 -->
453 - <view class="flex xc-wc"> 453 + <view class="flex xc-wc ai_and">
454 <view class="fs24 wz_red">￥</view> 454 <view class="fs24 wz_red">￥</view>
455 <view class="fs35 wz_red">{{filter.toFix(item[card_field],2)}}</view> 455 <view class="fs35 wz_red">{{filter.toFix(item[card_field],2)}}</view>
456 <view class="card_bg"><image src="{{url}}/miniapp/images/plus/dj_icon.png"></image><view class="card_name">{{card_name}}</view></view> 456 <view class="card_bg"><image src="{{url}}/miniapp/images/plus/dj_icon.png"></image><view class="card_name">{{card_name}}</view></view>
@@ -499,7 +499,7 @@ @@ -499,7 +499,7 @@
499 </view> 499 </view>
500 <view class="flex" style="line-height: 28rpx;" > 500 <view class="flex" style="line-height: 28rpx;" >
501 <!-- 等级价 --> 501 <!-- 等级价 -->
502 - <view class="price flex"> 502 + <view class="price flex ai_and">
503 <view class="fs22">￥</view> 503 <view class="fs22">￥</view>
504 <view class="fs28">{{filter.toFix(g_filter.get_card_price(item,card_list,0),2)}}</view> 504 <view class="fs28">{{filter.toFix(g_filter.get_card_price(item,card_list,0),2)}}</view>
505 <view class="card_bg"> <image src="{{url}}/miniapp/images/plus/dj_icon.png"></image>{{g_filter.get_card_price(item,card_list,1)}}</view> 505 <view class="card_bg"> <image src="{{url}}/miniapp/images/plus/dj_icon.png"></image>{{g_filter.get_card_price(item,card_list,1)}}</view>
components/diy_goodsGroup/diy_goodsGroup.wxss
  View file @c1ad09c
1 /* pages/diy_zs/diy_zs.wxss */ 1 /* pages/diy_zs/diy_zs.wxss */
2 -.zwp_3{ margin-top: 10rpx}  
3 -.zs_goods{ 2 +
  3 +.zwp_3 {
  4 + margin-top: 10rpx;
  5 +}
  6 +
  7 +.zs_goods {
4 width: 700rpx; 8 width: 700rpx;
5 border: 1rpx #ddd solid; 9 border: 1rpx #ddd solid;
6 margin-bottom: 10rpx; 10 margin-bottom: 10rpx;
7 margin: 0 auto; 11 margin: 0 auto;
8 -  
9 } 12 }
10 -.s1_gk_a1{ 13 +
  14 +.s1_gk_a1 {
11 display: inline; 15 display: inline;
12 width: auto; 16 width: auto;
13 height: auto; 17 height: auto;
14 } 18 }
15 -.clear{ clear: both;}  
16 -.zs_top{ 19 +
  20 +.clear {
  21 + clear: both;
  22 +}
  23 +
  24 +.zs_top {
17 width: 100%; 25 width: 100%;
18 min-height: 700rpx; 26 min-height: 700rpx;
19 margin: 0 auto; 27 margin: 0 auto;
20 - margin-bottom:30rpx; 28 + margin-bottom: 30rpx;
21 display: flex; 29 display: flex;
22 } 30 }
23 31
@@ -27,66 +35,62 @@ @@ -27,66 +35,62 @@
27 margin: 1rpx auto; 35 margin: 1rpx auto;
28 } 36 }
29 37
30 -.zs_center{  
31 - width: 100%;  
32 - min-height: 200rpx;  
33 - font-size: 28rpx;  
34 - color: #333;  
35 - text-align: left;  
36 - margin-left: 25rpx;  
37 - padding: 0 10rpx; 38 +.zs_center {
  39 + width: 100%;
  40 + min-height: 200rpx;
  41 + font-size: 28rpx;
  42 + color: #333;
  43 + text-align: left;
  44 + margin-left: 25rpx;
  45 + padding: 0 10rpx;
38 } 46 }
39 47
40 -.zs_wz1{ 48 +.zs_wz1 {
41 overflow: hidden; 49 overflow: hidden;
42 - text-overflow: ellipsis;  
43 - margin-bottom:10rpx;  
44 - font-size:28rpx;  
45 - white-space: nowrap;  
46 - width: 640rpx 50 + text-overflow: ellipsis;
  51 + margin-bottom: 10rpx;
  52 + font-size: 28rpx;
  53 + white-space: nowrap;
  54 + width: 640rpx;
47 } 55 }
48 56
49 -  
50 -.zs_wz2{ 57 +.zs_wz2 {
51 overflow: hidden; 58 overflow: hidden;
52 - text-overflow: ellipsis;  
53 - margin-bottom:10rpx;  
54 -font-size:28rpx;  
55 - white-space: nowrap; 59 + text-overflow: ellipsis;
  60 + margin-bottom: 10rpx;
  61 + font-size: 28rpx;
  62 + white-space: nowrap;
56 } 63 }
57 64
58 -.zs_wz3{ 65 +.zs_wz3 {
59 overflow: hidden; 66 overflow: hidden;
60 - text-overflow: ellipsis;  
61 - margin-bottom:10rpx;  
62 -font-size:28rpx;  
63 - white-space: nowrap; 67 + text-overflow: ellipsis;
  68 + margin-bottom: 10rpx;
  69 + font-size: 28rpx;
  70 + white-space: nowrap;
64 } 71 }
65 72
66 -.zs_wz4{ 73 +.zs_wz4 {
67 overflow: hidden; 74 overflow: hidden;
68 - text-overflow: ellipsis;  
69 - margin-bottom:10rpx;  
70 -font-size:28rpx;  
71 - white-space: nowrap; 75 + text-overflow: ellipsis;
  76 + margin-bottom: 10rpx;
  77 + font-size: 28rpx;
  78 + white-space: nowrap;
72 } 79 }
73 80
74 -.zs_wz5{ 81 +.zs_wz5 {
75 overflow: hidden; 82 overflow: hidden;
76 - text-overflow: ellipsis;  
77 - font-size:30rpx;  
78 - white-space: nowrap; 83 + text-overflow: ellipsis;
  84 + font-size: 30rpx;
  85 + white-space: nowrap;
79 } 86 }
80 87
81 -.wz_red{  
82 -  
83 - color: #C4182E;  
84 - font-size: 32rpx; 88 +.wz_red {
  89 + color: #c4182e;
  90 + font-size: 32rpx;
85 } 91 }
86 92
87 -  
88 -  
89 -.zs_t1{ 93 +.zs_t1 {
90 width: 56rpx; 94 width: 56rpx;
91 height: 56rpx; 95 height: 56rpx;
92 position: absolute; 96 position: absolute;
@@ -94,8 +98,7 @@ font-size:28rpx; @@ -94,8 +98,7 @@ font-size:28rpx;
94 top: 10rpx; 98 top: 10rpx;
95 } 99 }
96 100
97 -  
98 -.zs_t2{ 101 +.zs_t2 {
99 width: 56rpx; 102 width: 56rpx;
100 height: 56rpx; 103 height: 56rpx;
101 position: absolute; 104 position: absolute;
@@ -103,7 +106,7 @@ font-size:28rpx; @@ -103,7 +106,7 @@ font-size:28rpx;
103 top: 10rpx; 106 top: 10rpx;
104 } 107 }
105 108
106 -.zs_t3{ 109 +.zs_t3 {
107 width: 56rpx; 110 width: 56rpx;
108 height: 56rpx; 111 height: 56rpx;
109 position: absolute; 112 position: absolute;
@@ -111,8 +114,7 @@ font-size:28rpx; @@ -111,8 +114,7 @@ font-size:28rpx;
111 bottom: 10rpx; 114 bottom: 10rpx;
112 } 115 }
113 116
114 -  
115 -.zs_t4{ 117 +.zs_t4 {
116 width: 56rpx; 118 width: 56rpx;
117 height: 56rpx; 119 height: 56rpx;
118 position: absolute; 120 position: absolute;
@@ -120,167 +122,157 @@ font-size:28rpx; @@ -120,167 +122,157 @@ font-size:28rpx;
120 bottom: 10rpx; 122 bottom: 10rpx;
121 } 123 }
122 124
123 -  
124 -  
125 -.zs_goods_xiao_bottom{ 125 +.zs_goods_xiao_bottom {
126 width: 100%; 126 width: 100%;
127 min-height: 300rpx; 127 min-height: 300rpx;
128 -  
129 display: flex; 128 display: flex;
130 border-bottom: 2rpx #eee solid; 129 border-bottom: 2rpx #eee solid;
131 padding: 10rpx; 130 padding: 10rpx;
132 background-color: white; 131 background-color: white;
133 -  
134 } 132 }
135 133
136 -.zs_goods_xiao{ 134 +.zs_goods_xiao {
137 width: 100%; 135 width: 100%;
138 min-height: 300rpx; 136 min-height: 300rpx;
139 -  
140 display: flex; 137 display: flex;
141 /* border-bottom: 2rpx #eee solid; */ 138 /* border-bottom: 2rpx #eee solid; */
142 padding: 10rpx; 139 padding: 10rpx;
143 background-color: white; 140 background-color: white;
144 } 141 }
145 142
146 -.zs_top_x{ 143 +.zs_top_x {
147 width: 400rpx; 144 width: 400rpx;
148 height: 318rpx; 145 height: 318rpx;
149 - margin-top: 20rpx; 146 + margin-top: 20rpx;
150 display: flex; 147 display: flex;
151 } 148 }
152 149
153 .zs_t_img_x { 150 .zs_t_img_x {
154 - width: 290rpx; 151 + width: 290rpx;
155 height: 290rpx; 152 height: 290rpx;
156 margin-left: 20rpx; 153 margin-left: 20rpx;
157 -  
158 } 154 }
159 155
160 -.zs_center_x{  
161 - 156 +.zs_center_x {
162 width: 100%; 157 width: 100%;
163 min-height: 200rpx; 158 min-height: 200rpx;
164 font-size: 28rpx; 159 font-size: 28rpx;
165 color: #333; 160 color: #333;
166 text-align: left; 161 text-align: left;
167 margin-top: 30rpx; 162 margin-top: 30rpx;
168 - padding: 0 10rpx; 163 + padding: 0 10rpx;
169 } 164 }
170 165
171 -.zs_wz1_x{ 166 +.zs_wz1_x {
172 overflow: hidden; 167 overflow: hidden;
173 - text-overflow: ellipsis;  
174 - margin-bottom:10rpx;  
175 -font-size:28rpx;  
176 - white-space: nowrap;  
177 - width: 80%; 168 + text-overflow: ellipsis;
  169 + margin-bottom: 10rpx;
  170 + font-size: 28rpx;
  171 + white-space: nowrap;
  172 + width: 80%;
178 } 173 }
179 174
180 -  
181 -.zs_wz2_x{ 175 +.zs_wz2_x {
182 overflow: hidden; 176 overflow: hidden;
183 - text-overflow: ellipsis;  
184 - margin-bottom:10rpx;  
185 -font-size:28rpx;  
186 - white-space: nowrap; 177 + text-overflow: ellipsis;
  178 + margin-bottom: 10rpx;
  179 + font-size: 28rpx;
  180 + white-space: nowrap;
187 } 181 }
188 182
189 -.zs_wz3_x{ 183 +.zs_wz3_x {
190 overflow: hidden; 184 overflow: hidden;
191 - text-overflow: ellipsis;  
192 - margin-bottom:10rpx;  
193 -font-size:28rpx;  
194 - white-space: nowrap; 185 + text-overflow: ellipsis;
  186 + margin-bottom: 10rpx;
  187 + font-size: 28rpx;
  188 + white-space: nowrap;
195 } 189 }
196 190
197 -.zs_wz4_x{ 191 +.zs_wz4_x {
198 overflow: hidden; 192 overflow: hidden;
199 - text-overflow: ellipsis;  
200 - margin-bottom:10rpx;  
201 -font-size:28rpx;  
202 - white-space: nowrap; 193 + text-overflow: ellipsis;
  194 + margin-bottom: 10rpx;
  195 + font-size: 28rpx;
  196 + white-space: nowrap;
203 } 197 }
204 198
205 -.zs_wz5_x{ 199 +.zs_wz5_x {
206 overflow: hidden; 200 overflow: hidden;
207 - text-overflow: ellipsis;  
208 - font-size:30rpx;  
209 - white-space: nowrap; 201 + text-overflow: ellipsis;
  202 + font-size: 30rpx;
  203 + white-space: nowrap;
210 } 204 }
211 205
212 -.wz_red{  
213 - color: #C4182E;  
214 - font-size: 32rpx; 206 +.wz_red {
  207 + color: #c4182e;
  208 + font-size: 32rpx;
215 } 209 }
216 210
217 -.del{  
218 - font-size: 24rpx;  
219 - color: #999;  
220 - text-decoration: line-through;  
221 - margin-top: 8rpx; 211 +.del {
  212 + font-size: 24rpx;
  213 + color: #999;
  214 + text-decoration: line-through;
  215 + margin-top: 8rpx;
222 } 216 }
223 217
224 -.zs_t1_x{ 218 +.zs_t1_x {
225 width: 56rpx; 219 width: 56rpx;
226 height: 56rpx; 220 height: 56rpx;
227 position: relative; 221 position: relative;
228 right: 62rpx; 222 right: 62rpx;
229 -top: 6rpx; 223 + top: 6rpx;
230 } 224 }
231 225
232 -.zs_t1_x1{  
233 - width: 56rpx; 226 +.zs_t1_x1 {
  227 + width: 56rpx;
234 height: 56rpx; 228 height: 56rpx;
235 position: relative; 229 position: relative;
236 right: 285rpx; 230 right: 285rpx;
237 -top: 6rpx; 231 + top: 6rpx;
238 } 232 }
239 233
240 -.zs_t1_x2{  
241 - width: 56rpx; 234 +.zs_t1_x2 {
  235 + width: 56rpx;
242 height: 56rpx; 236 height: 56rpx;
243 position: relative; 237 position: relative;
244 right: 56rpx; 238 right: 56rpx;
245 -top: 234rpx; 239 + top: 234rpx;
246 } 240 }
247 241
248 -  
249 -.zs_t1_x3{  
250 - width: 56rpx; 242 +.zs_t1_x3 {
  243 + width: 56rpx;
251 height: 56rpx; 244 height: 56rpx;
252 position: relative; 245 position: relative;
253 right: 288rpx; 246 right: 288rpx;
254 -top: 234rpx; 247 + top: 234rpx;
255 } 248 }
256 249
257 /*1列2个*/ 250 /*1列2个*/
258 251
259 -.zs_goods_ban{ 252 +.zs_goods_ban {
260 width: 100%; 253 width: 100%;
261 min-height: 300rpx; 254 min-height: 300rpx;
262 } 255 }
263 256
264 -.zs_goods_wai_ban{ 257 +.zs_goods_wai_ban {
265 display: flex; 258 display: flex;
266 /* padding-left: 2rpx; */ 259 /* padding-left: 2rpx; */
267 margin-bottom: 12rpx; 260 margin-bottom: 12rpx;
268 width: 48.5%; 261 width: 48.5%;
269 float: left; 262 float: left;
270 background: #fff; 263 background: #fff;
271 - margin-left: 1% 264 + margin-left: 1%;
272 } 265 }
273 266
274 -  
275 -.zs_goods_2l{ 267 +.zs_goods_2l {
276 width: 94%; 268 width: 94%;
277 min-height: 300rpx; 269 min-height: 300rpx;
278 /* border: 2rpx #ddd solid; */ 270 /* border: 2rpx #ddd solid; */
279 margin: 0 auto; 271 margin: 0 auto;
280 - padding: 2rpx; 272 + padding: 2rpx;
281 } 273 }
282 274
283 -.zs_top_2l{ 275 +.zs_top_2l {
284 width: 340rpx; 276 width: 340rpx;
285 height: 340rpx; 277 height: 340rpx;
286 } 278 }
@@ -290,73 +282,70 @@ top: 234rpx; @@ -290,73 +282,70 @@ top: 234rpx;
290 border: none; 282 border: none;
291 } 283 }
292 284
293 -  
294 .zs_t_img_2l { 285 .zs_t_img_2l {
295 width: 100%; 286 width: 100%;
296 height: 100%; 287 height: 100%;
297 margin: 0 auto; 288 margin: 0 auto;
298 } 289 }
299 290
300 -.zs_center_2l{ 291 +.zs_center_2l {
301 width: 100%; 292 width: 100%;
302 min-height: 200rpx; 293 min-height: 200rpx;
303 font-size: 28rpx; 294 font-size: 28rpx;
304 color: #333; 295 color: #333;
305 text-align: left; 296 text-align: left;
306 - padding: 0 10rpx; 297 + padding: 0 10rpx;
307 } 298 }
308 299
309 -.zs_wz1_2l{ 300 +.zs_wz1_2l {
310 overflow: hidden; 301 overflow: hidden;
311 text-overflow: ellipsis; 302 text-overflow: ellipsis;
312 - margin-bottom:10rpx;  
313 - font-size:30rpx; 303 + margin-bottom: 10rpx;
  304 + font-size: 30rpx;
314 white-space: nowrap; 305 white-space: nowrap;
315 margin-top: 10rpx; 306 margin-top: 10rpx;
316 } 307 }
317 308
318 -  
319 -.zs_wz2_2l{ 309 +.zs_wz2_2l {
320 overflow: hidden; 310 overflow: hidden;
321 text-overflow: ellipsis; 311 text-overflow: ellipsis;
322 - margin-bottom:10rpx;  
323 - font-size:30rpx; 312 + margin-bottom: 10rpx;
  313 + font-size: 30rpx;
324 white-space: nowrap; 314 white-space: nowrap;
325 margin-top: 10rpx; 315 margin-top: 10rpx;
326 height: 80rpx; 316 height: 80rpx;
327 - line-height: 40rpx 317 + line-height: 40rpx;
328 } 318 }
329 319
330 -.zs_wz3_2l{ 320 +.zs_wz3_2l {
331 overflow: hidden; 321 overflow: hidden;
332 text-overflow: ellipsis; 322 text-overflow: ellipsis;
333 - margin-bottom:10rpx;  
334 - font-size:30rpx; 323 + margin-bottom: 10rpx;
  324 + font-size: 30rpx;
335 white-space: nowrap; 325 white-space: nowrap;
336 margin-top: 10rpx; 326 margin-top: 10rpx;
337 } 327 }
338 328
339 -.zs_wz4_2l{ 329 +.zs_wz4_2l {
340 overflow: hidden; 330 overflow: hidden;
341 text-overflow: ellipsis; 331 text-overflow: ellipsis;
342 - margin-bottom:10rpx;  
343 - font-size:30rpx; 332 + margin-bottom: 10rpx;
  333 + font-size: 30rpx;
344 white-space: nowrap; 334 white-space: nowrap;
345 margin-top: 10rpx; 335 margin-top: 10rpx;
346 } 336 }
347 337
348 -.zs_wz5_2l{ 338 +.zs_wz5_2l {
349 overflow: hidden; 339 overflow: hidden;
350 text-overflow: ellipsis; 340 text-overflow: ellipsis;
351 - font-size:30rpx; 341 + font-size: 30rpx;
352 white-space: nowrap; 342 white-space: nowrap;
353 margin-top: 10rpx; 343 margin-top: 10rpx;
354 } 344 }
355 345
356 -  
357 -  
358 /*---俩列图片位置---*/ 346 /*---俩列图片位置---*/
359 -.zs_t1_2l{ 347 +
  348 +.zs_t1_2l {
360 width: 56rpx; 349 width: 56rpx;
361 height: 56rpx; 350 height: 56rpx;
362 position: absolute; 351 position: absolute;
@@ -364,7 +353,7 @@ top: 234rpx; @@ -364,7 +353,7 @@ top: 234rpx;
364 top: 10rpx; 353 top: 10rpx;
365 } 354 }
366 355
367 -.zs_t2_2l{ 356 +.zs_t2_2l {
368 width: 56rpx; 357 width: 56rpx;
369 height: 56rpx; 358 height: 56rpx;
370 position: absolute; 359 position: absolute;
@@ -372,16 +361,15 @@ top: 234rpx; @@ -372,16 +361,15 @@ top: 234rpx;
372 top: 10rpx; 361 top: 10rpx;
373 } 362 }
374 363
375 -.zs_t3_2l{ 364 +.zs_t3_2l {
376 width: 56rpx; 365 width: 56rpx;
377 height: 56rpx; 366 height: 56rpx;
378 position: absolute; 367 position: absolute;
379 - left: 0rpx; 368 + left: 0rpx;
380 bottom: 10rpx; 369 bottom: 10rpx;
381 } 370 }
382 371
383 -  
384 -.zs_t4_2l{ 372 +.zs_t4_2l {
385 width: 56rpx; 373 width: 56rpx;
386 height: 56rpx; 374 height: 56rpx;
387 position: absolute; 375 position: absolute;
@@ -389,23 +377,22 @@ top: 234rpx; @@ -389,23 +377,22 @@ top: 234rpx;
389 bottom: 10rpx; 377 bottom: 10rpx;
390 } 378 }
391 379
392 -  
393 -  
394 /*一个3列*/ 380 /*一个3列*/
395 -.zs_goods_wai_san{ 381 +
  382 +.zs_goods_wai_san {
396 width: 230rpx; 383 width: 230rpx;
397 display: flex; 384 display: flex;
398 margin-left: 10rpx; 385 margin-left: 10rpx;
399 float: left; 386 float: left;
400 margin-bottom: 8rpx; 387 margin-bottom: 8rpx;
401 - background-color:white; 388 + background-color: white;
402 } 389 }
403 390
404 -.zs_goods_san{ 391 +.zs_goods_san {
405 width: 240rpx; 392 width: 240rpx;
406 -  
407 } 393 }
408 -.zs_goods_3l{ 394 +
  395 +.zs_goods_3l {
409 width: 240rpx; 396 width: 240rpx;
410 min-height: 300rpx; 397 min-height: 300rpx;
411 border: 2rpx #ddd solid; 398 border: 2rpx #ddd solid;
@@ -413,19 +400,19 @@ top: 234rpx; @@ -413,19 +400,19 @@ top: 234rpx;
413 padding: 2rpx; 400 padding: 2rpx;
414 } 401 }
415 402
416 -.zs_top_3l{ 403 +.zs_top_3l {
417 width: 232rpx; 404 width: 232rpx;
418 - height: 232rpx; 405 + height: 232rpx;
419 } 406 }
420 407
421 .zs_t_img_3l { 408 .zs_t_img_3l {
422 - width:232rpx; 409 + width: 232rpx;
423 height: 232rpx; 410 height: 232rpx;
424 margin: 0 auto; 411 margin: 0 auto;
425 background-color: bisque; 412 background-color: bisque;
426 } 413 }
427 414
428 -.zs_center_3l{ 415 +.zs_center_3l {
429 width: 100%; 416 width: 100%;
430 min-height: 200rpx; 417 min-height: 200rpx;
431 font-size: 28rpx; 418 font-size: 28rpx;
@@ -434,52 +421,48 @@ top: 234rpx; @@ -434,52 +421,48 @@ top: 234rpx;
434 padding: 0 10rpx; 421 padding: 0 10rpx;
435 } 422 }
436 423
437 -.zs_wz1_3l{  
438 -  
439 - margin-bottom:10rpx;  
440 - font-size:30rpx; 424 +.zs_wz1_3l {
  425 + margin-bottom: 10rpx;
  426 + font-size: 30rpx;
441 height: 80rpx; 427 height: 80rpx;
442 width: 220rpx; 428 width: 220rpx;
443 -  
444 - overflow: hidden;  
445 - text-overflow: ellipsis;  
446 - display: -webkit-box;  
447 - -webkit-box-orient: vertical;  
448 - -webkit-line-clamp: 2; 429 + overflow: hidden;
  430 + text-overflow: ellipsis;
  431 + display: -webkit-box;
  432 + -webkit-box-orient: vertical;
  433 + -webkit-line-clamp: 2;
449 } 434 }
450 435
451 -  
452 -.zs_wz2_3l{  
453 - margin-bottom:10rpx;  
454 - font-size:30rpx; 436 +.zs_wz2_3l {
  437 + margin-bottom: 10rpx;
  438 + font-size: 30rpx;
455 display: flex; 439 display: flex;
456 } 440 }
457 441
458 -.zs_wz3_3l{ 442 +.zs_wz3_3l {
459 overflow: hidden; 443 overflow: hidden;
460 text-overflow: ellipsis; 444 text-overflow: ellipsis;
461 - margin-bottom:10rpx;  
462 - font-size:30rpx; 445 + margin-bottom: 10rpx;
  446 + font-size: 30rpx;
463 white-space: nowrap; 447 white-space: nowrap;
464 } 448 }
465 449
466 -.zs_wz4_3l{ 450 +.zs_wz4_3l {
467 overflow: hidden; 451 overflow: hidden;
468 text-overflow: ellipsis; 452 text-overflow: ellipsis;
469 - margin-bottom:10rpx;  
470 - font-size:30rpx; 453 + margin-bottom: 10rpx;
  454 + font-size: 30rpx;
471 white-space: nowrap; 455 white-space: nowrap;
472 } 456 }
473 457
474 -.zs_wz5_3l{ 458 +.zs_wz5_3l {
475 overflow: hidden; 459 overflow: hidden;
476 text-overflow: ellipsis; 460 text-overflow: ellipsis;
477 - font-size:30rpx;  
478 - white-space: nowrap; 461 + font-size: 30rpx;
  462 + white-space: nowrap;
479 } 463 }
480 464
481 -  
482 -.zs_t1_3l{ 465 +.zs_t1_3l {
483 width: 56rpx; 466 width: 56rpx;
484 height: 56rpx; 467 height: 56rpx;
485 position: absolute; 468 position: absolute;
@@ -487,8 +470,7 @@ top: 234rpx; @@ -487,8 +470,7 @@ top: 234rpx;
487 top: 10rpx; 470 top: 10rpx;
488 } 471 }
489 472
490 -  
491 -.zs_t2_3l{ 473 +.zs_t2_3l {
492 width: 56rpx; 474 width: 56rpx;
493 height: 56rpx; 475 height: 56rpx;
494 position: absolute; 476 position: absolute;
@@ -496,7 +478,7 @@ top: 234rpx; @@ -496,7 +478,7 @@ top: 234rpx;
496 top: 10rpx; 478 top: 10rpx;
497 } 479 }
498 480
499 -.zs_t3_3l{ 481 +.zs_t3_3l {
500 width: 56rpx; 482 width: 56rpx;
501 height: 56rpx; 483 height: 56rpx;
502 position: absolute; 484 position: absolute;
@@ -504,8 +486,7 @@ top: 234rpx; @@ -504,8 +486,7 @@ top: 234rpx;
504 bottom: 10rpx; 486 bottom: 10rpx;
505 } 487 }
506 488
507 -  
508 -.zs_t4_3l{ 489 +.zs_t4_3l {
509 width: 56rpx; 490 width: 56rpx;
510 height: 56rpx; 491 height: 56rpx;
511 position: absolute; 492 position: absolute;
@@ -513,27 +494,67 @@ top: 234rpx; @@ -513,27 +494,67 @@ top: 234rpx;
513 bottom: 10rpx; 494 bottom: 10rpx;
514 } 495 }
515 496
516 -.zs_goods_wai{ 497 +.zs_goods_wai {
517 background-color: white; 498 background-color: white;
518 margin-top: 10rpx; 499 margin-top: 10rpx;
519 } 500 }
520 501
521 -.rel{position: relative}  
522 -.flex{display: flex}  
523 -.fs24{font-size: 24rpx}  
524 -.fs35{font-size: 35rpx}  
525 -.xc-wc{ align-items: center; margin-top: -3rpx} 502 +.rel {
  503 + position: relative;
  504 +}
  505 +
  506 +.flex {
  507 + display: flex;
  508 +}
  509 +
  510 +.fs24 {
  511 + font-size: 24rpx;
  512 +}
  513 +
  514 +.fs35 {
  515 + font-size: 35rpx;
  516 +}
  517 +
  518 +.xc-wc {
  519 + align-items: center;
  520 + margin-top: -3rpx;
  521 +}
526 522
527 -.price.xc-ash{ 523 +.price.xc-ash {
528 font-size: 24rpx; 524 font-size: 24rpx;
529 color: #999; 525 color: #999;
530 text-decoration: line-through; 526 text-decoration: line-through;
531 margin-top: 8rpx; 527 margin-top: 8rpx;
532 } 528 }
533 529
  530 +.line_th {
  531 + text-decoration: line-through;
  532 +}
534 533
535 -.line_th{ text-decoration: line-through}  
536 -.card_bg {display: flex; padding: 2rpx 10rpx;height: 28rpx; align-items: center; border-radius: 26rpx; font-size: 19rpx;line-height: 28rpx;max-width: 110rpx;  
537 - background: #333; color: #fff; justify-content: center; margin-left: 2rpx;}  
538 -.card_bg image{ width: 19rpx; height: 19rpx; margin-right: 1rpx;}  
539 -.card_bg .card_name{ max-width: 76rpx; width: auto;overflow: hidden; white-space:nowrap; }  
540 \ No newline at end of file 534 \ No newline at end of file
  535 +.card_bg {
  536 + display: flex;
  537 + padding: 2rpx 10rpx;
  538 + height: 25rpx;
  539 + align-items: center;
  540 + border-radius: 26rpx;
  541 + font-size: 19rpx;
  542 + line-height: 25rpx;
  543 + max-width: 110rpx;
  544 + background: #333;
  545 + color: #fff;
  546 + justify-content: center;
  547 + margin-left: 8rpx;
  548 +}
  549 +
  550 +.card_bg image {
  551 + width: 19rpx;
  552 + height: 19rpx;
  553 + margin-right: 1rpx;
  554 +}
  555 +
  556 +.card_bg .card_name {
  557 + max-width: 76rpx;
  558 + width: auto;
  559 + overflow: hidden;
  560 + white-space: nowrap;
  561 +}
components/goods_list/goods_list.wxml
  View file @c1ad09c
@@ -37,7 +37,7 @@ @@ -37,7 +37,7 @@
37 <block wx:if="{{item[card_field]>0}}"> 37 <block wx:if="{{item[card_field]>0}}">
38 <view class="money flex"> 38 <view class="money flex">
39 <!-- 办卡价 --> 39 <!-- 办卡价 -->
40 - <view class="flex xc-wc"> 40 + <view class="flex xc-wc ai_and">
41 <view class="fs24">￥</view> 41 <view class="fs24">￥</view>
42 <view class="fs35">{{filter.toFix(item[card_field],2)}}</view> 42 <view class="fs35">{{filter.toFix(item[card_field],2)}}</view>
43 <view class="card_bg"> 43 <view class="card_bg">
@@ -88,7 +88,7 @@ @@ -88,7 +88,7 @@
88 </view> 88 </view>
89 <view class="flex" style="line-height: 28rpx;"> 89 <view class="flex" style="line-height: 28rpx;">
90 <!-- 等级价 --> 90 <!-- 等级价 -->
91 - <view class="price flex"> 91 + <view class="price flex ai_and">
92 <view class="fs22">￥</view> 92 <view class="fs22">￥</view>
93 <view class="fs28">{{filter.toFix(g_filter.get_card_price(item,card_list,0),2)}}</view> 93 <view class="fs28">{{filter.toFix(g_filter.get_card_price(item,card_list,0),2)}}</view>
94 <view class="card_bg"> 94 <view class="card_bg">
components/goods_list/goods_list.wxss
  View file @c1ad09c
1 .collects { 1 .collects {
2 margin-top: 40rpx; 2 margin-top: 40rpx;
3 } 3 }
4 -.ib{  
5 - display: inline-block;  
6 -}  
7 -.fs20{  
8 - font-size: 20rpx;  
9 -}  
10 -.fs22{  
11 - font-size: 22rpx;  
12 -}  
13 -.fs24{  
14 - font-size: 24rpx;  
15 -}  
16 -.fs26{  
17 - font-size: 26rpx; 4 +
  5 +.ib {
  6 + display: inline-block;
18 } 7 }
19 -.fs28{  
20 - font-size: 28rpx; 8 +
  9 +.fs20 {
  10 + font-size: 20rpx;
21 } 11 }
22 -.fs35{  
23 - font-size:35rpx; 12 +
  13 +.fs22 {
  14 + font-size: 22rpx;
24 } 15 }
25 16
  17 +.fs24 {
  18 + font-size: 24rpx;
  19 +}
26 20
  21 +.fs26 {
  22 + font-size: 26rpx;
  23 +}
27 24
28 -.flex-center{  
29 -display:flex;  
30 -justify-content:center;  
31 -align-items:center; 25 +.fs28 {
  26 + font-size: 28rpx;
32 } 27 }
33 -.xc-wc{  
34 - color: #d60021;  
35 28
  29 +.fs35 {
  30 + font-size: 35rpx;
36 } 31 }
37 32
  33 +.flex-center {
  34 + display: flex;
  35 + justify-content: center;
  36 + align-items: center;
  37 +}
38 38
  39 +.xc-wc {
  40 + color: #d60021;
  41 +}
39 42
40 -.xc-ash{  
41 -color: #b9b9b9; 43 +.xc-ash {
  44 + color: #b9b9b9;
42 } 45 }
  46 +
43 .choice_box .choice_list .choice_footer .price { 47 .choice_box .choice_list .choice_footer .price {
44 - color: #f23030; height: 10px 48 + color: #f23030;
  49 + height: 10px;
  50 +}
  51 +
  52 +.flex {
  53 + display: flex;
45 } 54 }
46 55
47 -.flex{display: flex}  
48 .ellipsis-2 { 56 .ellipsis-2 {
49 - overflow: hidden;  
50 - text-overflow: ellipsis;  
51 - display: -webkit-box;  
52 - -webkit-box-orient: vertical;  
53 - -webkit-line-clamp: 2;  
54 -}  
55 -.goods_name{  
56 - height: 62rpx; 57 + overflow: hidden;
  58 + text-overflow: ellipsis;
  59 + display: -webkit-box;
  60 + -webkit-box-orient: vertical;
  61 + -webkit-line-clamp: 2;
  62 +}
  63 +
  64 +.goods_name {
  65 + height: 62rpx;
57 margin-top: 6rpx; 66 margin-top: 6rpx;
58 line-height: 30rpx; 67 line-height: 30rpx;
59 -  
60 -  
61 } 68 }
  69 +
62 .hang { 70 .hang {
63 width: 100%; 71 width: 100%;
64 margin: auto; 72 margin: auto;
65 padding-left: 21rpx; 73 padding-left: 21rpx;
66 } 74 }
67 75
68 -  
69 .hang .collect { 76 .hang .collect {
70 width: 347rpx; 77 width: 347rpx;
71 height: 520rpx; 78 height: 520rpx;
@@ -91,15 +98,19 @@ color: #b9b9b9; @@ -91,15 +98,19 @@ color: #b9b9b9;
91 line-height: 28rpx; 98 line-height: 28rpx;
92 align-items: baseline; 99 align-items: baseline;
93 } 100 }
94 -.collect .money view{ 101 +
  102 +.collect .money view {
95 line-height: 28rpx; 103 line-height: 28rpx;
96 } 104 }
  105 +
97 .collect .money .flex { 106 .collect .money .flex {
98 - font-weight: bold; 107 + font-weight: bold;
99 } 108 }
100 -.collect .money .flex .fs24{ 109 +
  110 +.collect .money .flex .fs24 {
101 padding-top: 5rpx; 111 padding-top: 5rpx;
102 } 112 }
  113 +
103 .collect .Discount { 114 .collect .Discount {
104 width: 156rpx; 115 width: 156rpx;
105 height: 28rpx; 116 height: 28rpx;
@@ -150,12 +161,34 @@ color: #b9b9b9; @@ -150,12 +161,34 @@ color: #b9b9b9;
150 background-color: rgb(138, 138, 138); 161 background-color: rgb(138, 138, 138);
151 } 162 }
152 163
153 -.line_th{ text-decoration: line-through}  
154 -.card_bg {display: flex; padding: 2rpx 10rpx;height: 28rpx; align-items: center; border-radius: 26rpx; font-size: 19rpx;line-height: 28rpx;max-width: 110rpx;  
155 -background: #333; color: #fff; justify-content: center; margin-left: 2rpx;}  
156 -.card_bg image{ width: 19rpx; height: 19rpx; margin-right: 1rpx;}.card_bg .card_name{  
157 - max-width: 76rpx;  
158 - width: auto;  
159 - overflow: hidden;  
160 - white-space:nowrap;  
161 -}  
162 \ No newline at end of file 164 \ No newline at end of file
  165 +.line_th {
  166 + text-decoration: line-through;
  167 +}
  168 +
  169 +.card_bg {
  170 + display: flex;
  171 + padding: 2rpx 10rpx;
  172 + height: 25rpx;
  173 + align-items: center;
  174 + border-radius: 26rpx;
  175 + font-size: 19rpx;
  176 + line-height: 25rpx;
  177 + max-width: 110rpx;
  178 + background: #333;
  179 + color: #fff;
  180 + justify-content: center;
  181 + margin-left: 8rpx;
  182 +}
  183 +
  184 +.card_bg image {
  185 + width: 19rpx;
  186 + height: 19rpx;
  187 + margin-right: 1rpx;
  188 +}
  189 +
  190 +.card_bg .card_name {
  191 + max-width: 76rpx;
  192 + width: auto;
  193 + overflow: hidden;
  194 + white-space: nowrap;
  195 +}
pages/goods/goodsList/goodsList.wxml
  View file @c1ad09c
@@ -53,7 +53,7 @@ @@ -53,7 +53,7 @@
53 <block wx:if="{{card_field}}"> 53 <block wx:if="{{card_field}}">
54 <!-- 等级价>0 --> 54 <!-- 等级价>0 -->
55 <block wx:if="{{item[card_field]>0}}"> 55 <block wx:if="{{item[card_field]>0}}">
56 - <view class="flex ai-center"> 56 + <view class="flex ai_and">
57 <view class="price">￥{{item[card_field]}}</view> 57 <view class="price">￥{{item[card_field]}}</view>
58 <view class="card_bg"> 58 <view class="card_bg">
59 <image src="{{url}}/miniapp/images/plus/dj_icon.png"></image> 59 <image src="{{url}}/miniapp/images/plus/dj_icon.png"></image>
@@ -80,7 +80,7 @@ @@ -80,7 +80,7 @@
80 <view class="word-line xc-ash mk_price">￥{{item.market_price}}</view> 80 <view class="word-line xc-ash mk_price">￥{{item.market_price}}</view>
81 </view> 81 </view>
82 <view class="comment flex jc_sb"> 82 <view class="comment flex jc_sb">
83 - <view class="flex"> 83 + <view class="flex ai_and">
84 <view class="">￥{{g_filter.get_card_price(item,card_list,0)}}</view> 84 <view class="">￥{{g_filter.get_card_price(item,card_list,0)}}</view>
85 <view class="card_bg"> 85 <view class="card_bg">
86 <image src="{{url}}/miniapp/images/plus/dj_icon.png"></image> 86 <image src="{{url}}/miniapp/images/plus/dj_icon.png"></image>
pages/goods/goodsList/goodsList.wxss
  View file @c1ad09c
1 - .container {  
2 - color: #666; 1 +.container {
  2 + color: #666;
3 } 3 }
4 4
5 .nav-item { 5 .nav-item {
6 - float: left;  
7 - width: 30%;  
8 - height: 90rpx;  
9 - line-height: 90rpx;  
10 - display: flex;  
11 - align-items: center;  
12 - justify-content: center;  
13 - font-size: 32rpx;  
14 - border-bottom: 1px solid #dfefef;  
15 - background-color: #fff; 6 + float: left;
  7 + width: 30%;
  8 + height: 90rpx;
  9 + line-height: 90rpx;
  10 + display: flex;
  11 + align-items: center;
  12 + justify-content: center;
  13 + font-size: 32rpx;
  14 + border-bottom: 1px solid #dfefef;
  15 + background-color: #fff;
16 } 16 }
17 17
18 .nav-item .ico-dg { 18 .nav-item .ico-dg {
19 - width: 18rpx;  
20 - height: 12rpx;  
21 - margin-left: 10rpx;  
22 - line-height: 0; 19 + width: 18rpx;
  20 + height: 12rpx;
  21 + margin-left: 10rpx;
  22 + line-height: 0;
23 } 23 }
24 24
25 .nav-item .ico-filter { 25 .nav-item .ico-filter {
26 - width: 20rpx;  
27 - height: 20rpx;  
28 - margin-left: 10rpx;  
29 - line-height: 0; 26 + width: 20rpx;
  27 + height: 20rpx;
  28 + margin-left: 10rpx;
  29 + line-height: 0;
30 } 30 }
31 31
32 .ico-dir { 32 .ico-dir {
33 - width: 16rpx;  
34 - height: 22rpx;  
35 - margin-left: 10rpx;  
36 - background-repeat: no-repeat;  
37 - background-size: cover;  
38 - background-position-x: 0; 33 + width: 16rpx;
  34 + height: 22rpx;
  35 + margin-left: 10rpx;
  36 + background-repeat: no-repeat;
  37 + background-size: cover;
  38 + background-position-x: 0;
39 } 39 }
40 40
41 .ico-dir-dn { 41 .ico-dir-dn {
42 - background-position-x: -16rpx; 42 + background-position-x: -16rpx;
43 } 43 }
44 44
45 .ico-dir-up { 45 .ico-dir-up {
46 - background-position-x: -32rpx; 46 + background-position-x: -32rpx;
47 } 47 }
48 48
49 .search { 49 .search {
50 - width: 10%; 50 + width: 10%;
51 } 51 }
52 52
53 .search-img { 53 .search-img {
54 - width: 30rpx;  
55 - height: 30rpx; 54 + width: 30rpx;
  55 + height: 30rpx;
56 } 56 }
57 57
58 .choice_list { 58 .choice_list {
59 - background-color: #fff; 59 + background-color: #fff;
60 } 60 }
61 61
62 .choice_item { 62 .choice_item {
63 - position: relative;  
64 - width: 100%;  
65 - min-height: 200rpx;  
66 - padding: 10rpx 0;  
67 - border-bottom: 1px solid #dfefef;  
68 - font-size: 30rpx; 63 + position: relative;
  64 + width: 100%;
  65 + min-height: 200rpx;
  66 + padding: 10rpx 0;
  67 + border-bottom: 1px solid #dfefef;
  68 + font-size: 30rpx;
69 } 69 }
70 70
71 .img-wrap { 71 .img-wrap {
72 - float: left;  
73 - width: 180rpx;  
74 - height: 180rpx;  
75 - padding: 0 10rpx 10rpx; 72 + float: left;
  73 + width: 180rpx;
  74 + height: 180rpx;
  75 + padding: 0 10rpx 10rpx;
76 } 76 }
77 77
78 .img-wrap image { 78 .img-wrap image {
79 - width: 100%;  
80 - height: 100%; 79 + width: 100%;
  80 + height: 100%;
81 } 81 }
82 82
83 .item-cont .title { 83 .item-cont .title {
84 - height: 72rpx;  
85 - margin: 16rpx 0;  
86 - padding-right: 10rpx;  
87 - line-height: 36rpx;  
88 - color: #333;  
89 - overflow: hidden; 84 + height: 72rpx;
  85 + margin: 16rpx 0;
  86 + padding-right: 10rpx;
  87 + line-height: 36rpx;
  88 + color: #333;
  89 + overflow: hidden;
90 } 90 }
91 91
92 .price { 92 .price {
93 - display: inline-block;  
94 - color: #f23030;  
95 - line-height: 24rpx;  
96 - /* padding-bottom: 20rpx; */ 93 + display: inline-block;
  94 + color: #f23030;
  95 + line-height: 24rpx;
  96 + /* padding-bottom: 20rpx; */
97 } 97 }
98 98
99 .comment { 99 .comment {
100 - font-size: 25rpx;  
101 - margin-top: 4rpx;  
102 - padding-right:30rpx 100 + font-size: 25rpx;
  101 + margin-top: 4rpx;
  102 + padding-right: 30rpx;
103 } 103 }
104 104
105 .filter-modal { 105 .filter-modal {
106 - position: fixed;  
107 - left: 150rpx;  
108 - top: 0;  
109 - right: 0;  
110 - bottom: 0;  
111 - z-index: 20;  
112 - background-color: white;  
113 - overflow-x: hidden;  
114 - padding-bottom: 30rpx; 106 + position: fixed;
  107 + left: 150rpx;
  108 + top: 0;
  109 + right: 0;
  110 + bottom: 0;
  111 + z-index: 20;
  112 + background-color: white;
  113 + overflow-x: hidden;
  114 + padding-bottom: 30rpx;
115 } 115 }
116 116
117 .filter-box { 117 .filter-box {
118 - box-sizing: border-box;  
119 - width: 100%;  
120 - font-size: 28rpx;  
121 - padding: 20rpx; 118 + box-sizing: border-box;
  119 + width: 100%;
  120 + font-size: 28rpx;
  121 + padding: 20rpx;
122 } 122 }
123 123
124 .filter-name { 124 .filter-name {
125 - width: 100%;  
126 - padding: 20rpx 0;  
127 - word-break: keep-all;  
128 - white-space: nowrap;  
129 - text-overflow: ellipsis;  
130 - overflow: hidden;  
131 - font-size: 30rpx; 125 + width: 100%;
  126 + padding: 20rpx 0;
  127 + word-break: keep-all;
  128 + white-space: nowrap;
  129 + text-overflow: ellipsis;
  130 + overflow: hidden;
  131 + font-size: 30rpx;
132 } 132 }
133 133
134 .filter-items { 134 .filter-items {
135 - width: 100%; 135 + width: 100%;
136 } 136 }
137 137
138 .filter-item { 138 .filter-item {
139 - float: left;  
140 - width: fit-content;  
141 - max-width: 500rpx;  
142 - word-break: keep-all;  
143 - white-space: nowrap;  
144 - text-overflow: ellipsis;  
145 - overflow: hidden;  
146 - padding: 10rpx;  
147 - border-radius: 10rpx;  
148 - border: 1rpx #ddd solid;  
149 - margin: 0 10rpx 10rpx 0;  
150 - background-color: #fdfdfd;  
151 - color: #666; 139 + float: left;
  140 + width: fit-content;
  141 + max-width: 500rpx;
  142 + word-break: keep-all;
  143 + white-space: nowrap;
  144 + text-overflow: ellipsis;
  145 + overflow: hidden;
  146 + padding: 10rpx;
  147 + border-radius: 10rpx;
  148 + border: 1rpx #ddd solid;
  149 + margin: 0 10rpx 10rpx 0;
  150 + background-color: #fdfdfd;
  151 + color: #666;
152 } 152 }
153 153
154 .viewall-btn { 154 .viewall-btn {
155 - margin-top: 20rpx;  
156 - width: 300rpx; 155 + margin-top: 20rpx;
  156 + width: 300rpx;
157 } 157 }
158 158
159 -.card_bg {display: flex; max-width: 110rpx;height: 28rpx; align-items: center; border-radius: 26rpx; font-size: 19rpx;  
160 -background: #333; color: #fff; justify-content: center; margin-left: 3rpx; margin-top:7rpx; line-height: 28rpx;  
161 -padding: 2rpx 10rpx;width: auto; 159 +.card_bg {
  160 + display: flex;
  161 + max-width: 110rpx;
  162 + height: 25rpx;
  163 + align-items: center;
  164 + border-radius: 26rpx;
  165 + font-size: 19rpx;
  166 + background: #333;
  167 + color: #fff;
  168 + justify-content: center;
  169 + margin-left: 8rpx;
  170 + margin-top: 7rpx;
  171 + line-height: 25rpx;
  172 + padding: 2rpx 10rpx;
  173 + width: auto;
  174 +}
  175 +
  176 +.card_bg .card_name {
  177 + max-width: 76rpx;
  178 + width: auto;
  179 + overflow: hidden;
  180 + white-space: nowrap;
  181 +}
162 182
  183 +.card_bg image {
  184 + width: 19rpx;
  185 + height: 19rpx;
  186 + margin-right: 1rpx;
  187 + vertical-align: middle;
163 } 188 }
164 -.card_bg .card_name{  
165 - max-width: 76rpx;  
166 - width: auto;  
167 - overflow: hidden;  
168 - white-space:nowrap; 189 +
  190 +.mk_price {
  191 + margin-left: 10rpx;
  192 + font-size: 25rpx;
  193 +}
  194 +
  195 +.item-cont {
  196 + line-height: 38rpx;
169 } 197 }
170 -.card_bg image{ width: 19rpx; height: 19rpx; margin-right: 1rpx; vertical-align: middle}  
171 -.mk_price{margin-left: 10rpx; font-size: 25rpx;}  
172 -.item-cont{ line-height: 38rpx}  
173 \ No newline at end of file 198 \ No newline at end of file
pages/goods/search/search.wxml
  View file @c1ad09c
@@ -50,7 +50,7 @@ @@ -50,7 +50,7 @@
50 <block wx:if="{{card_field}}"> 50 <block wx:if="{{card_field}}">
51 <!-- 等级价>0 --> 51 <!-- 等级价>0 -->
52 <block wx:if="{{item[card_field]>0}}"> 52 <block wx:if="{{item[card_field]>0}}">
53 - <view class="flex ai-center"> 53 + <view class="flex ai_and">
54 <view class="price">￥{{item[card_field]}}</view> 54 <view class="price">￥{{item[card_field]}}</view>
55 <view class="card_bg"> 55 <view class="card_bg">
56 <image src="{{url}}/miniapp/images/plus/dj_icon.png"></image> 56 <image src="{{url}}/miniapp/images/plus/dj_icon.png"></image>
@@ -77,7 +77,7 @@ @@ -77,7 +77,7 @@
77 <view class="word-line xc-ash mk_price">￥{{item.market_price}}</view> 77 <view class="word-line xc-ash mk_price">￥{{item.market_price}}</view>
78 </view> 78 </view>
79 <view class="comment flex jc_sb"> 79 <view class="comment flex jc_sb">
80 - <view class="flex"> 80 + <view class="flex ai_and">
81 <view class="">￥{{g_filter.get_card_price(item,card_list,0)}}</view> 81 <view class="">￥{{g_filter.get_card_price(item,card_list,0)}}</view>
82 <view class="card_bg"> 82 <view class="card_bg">
83 <image src="{{url}}/miniapp/images/plus/dj_icon.png"></image> 83 <image src="{{url}}/miniapp/images/plus/dj_icon.png"></image>
pages/goods/search/search.wxss
  View file @c1ad09c
1 .container { 1 .container {
2 - color: #666; 2 + color: #666;
3 } 3 }
4 4
5 .nav-item { 5 .nav-item {
6 - float: left;  
7 - width: 30%;  
8 - height: 90rpx;  
9 - line-height: 90rpx;  
10 - display: flex;  
11 - align-items: center;  
12 - justify-content: center;  
13 - font-size: 32rpx;  
14 - border-bottom: 1px solid #dfefef;  
15 - background-color: #fff; 6 + float: left;
  7 + width: 30%;
  8 + height: 90rpx;
  9 + line-height: 90rpx;
  10 + display: flex;
  11 + align-items: center;
  12 + justify-content: center;
  13 + font-size: 32rpx;
  14 + border-bottom: 1px solid #dfefef;
  15 + background-color: #fff;
16 } 16 }
17 17
18 .nav-item .ico-dg { 18 .nav-item .ico-dg {
19 - width: 18rpx;  
20 - height: 12rpx;  
21 - margin-left: 10rpx;  
22 - line-height: 0; 19 + width: 18rpx;
  20 + height: 12rpx;
  21 + margin-left: 10rpx;
  22 + line-height: 0;
23 } 23 }
24 24
25 .nav-item .ico-filter { 25 .nav-item .ico-filter {
26 - width: 20rpx;  
27 - height: 20rpx;  
28 - margin-left: 10rpx;  
29 - line-height: 0; 26 + width: 20rpx;
  27 + height: 20rpx;
  28 + margin-left: 10rpx;
  29 + line-height: 0;
30 } 30 }
31 31
32 .ico-dir { 32 .ico-dir {
33 - width: 16rpx;  
34 - height: 22rpx;  
35 - margin-left: 10rpx;  
36 - background-repeat: no-repeat;  
37 - background-size: cover;  
38 - background-position-x: 0; 33 + width: 16rpx;
  34 + height: 22rpx;
  35 + margin-left: 10rpx;
  36 + background-repeat: no-repeat;
  37 + background-size: cover;
  38 + background-position-x: 0;
39 } 39 }
40 40
41 .ico-dir-dn { 41 .ico-dir-dn {
42 - background-position-x: -16rpx; 42 + background-position-x: -16rpx;
43 } 43 }
44 44
45 .ico-dir-up { 45 .ico-dir-up {
46 - background-position-x: -32rpx; 46 + background-position-x: -32rpx;
47 } 47 }
48 48
49 .nav-search { 49 .nav-search {
50 - width: 10%; 50 + width: 10%;
51 } 51 }
52 52
53 .nav-item .search-img { 53 .nav-item .search-img {
54 - width: 30rpx;  
55 - height: 30rpx; 54 + width: 30rpx;
  55 + height: 30rpx;
56 } 56 }
57 57
58 .choice_list { 58 .choice_list {
59 - background-color: #fff; 59 + background-color: #fff;
60 } 60 }
61 61
62 .choice_item { 62 .choice_item {
63 - position: relative;  
64 - width: 100%;  
65 - min-height: 200rpx;  
66 - padding: 10rpx 0;  
67 - border-bottom: 1px solid #dfefef;  
68 - font-size: 30rpx; 63 + position: relative;
  64 + width: 100%;
  65 + min-height: 200rpx;
  66 + padding: 10rpx 0;
  67 + border-bottom: 1px solid #dfefef;
  68 + font-size: 30rpx;
69 } 69 }
70 70
71 .img-wrap { 71 .img-wrap {
72 - float: left;  
73 - width: 180rpx;  
74 - height: 180rpx;  
75 - padding: 0 10rpx 10rpx; 72 + float: left;
  73 + width: 180rpx;
  74 + height: 180rpx;
  75 + padding: 0 10rpx 10rpx;
76 } 76 }
77 77
78 .img-wrap image { 78 .img-wrap image {
79 - width: 100%;  
80 - height: 100%; 79 + width: 100%;
  80 + height: 100%;
81 } 81 }
82 82
83 .item-cont .title { 83 .item-cont .title {
84 - height: 72rpx;  
85 - margin: 16rpx 0;  
86 - padding-right: 10rpx;  
87 - line-height: 36rpx;  
88 - color: #333;  
89 - overflow: hidden; 84 + height: 72rpx;
  85 + margin: 16rpx 0;
  86 + padding-right: 10rpx;
  87 + line-height: 36rpx;
  88 + color: #333;
  89 + overflow: hidden;
90 } 90 }
91 91
92 .price { 92 .price {
93 - display: inline-block;  
94 - color: #f23030;  
95 - line-height: 24rpx;  
96 - /* padding-bottom: 20rpx; */ 93 + display: inline-block;
  94 + color: #f23030;
  95 + line-height: 24rpx;
  96 + /* padding-bottom: 20rpx; */
97 } 97 }
98 98
99 .comment { 99 .comment {
100 - font-size: 25rpx;  
101 - padding-right:30rpx;  
102 - margin-top:4rpx  
103 - 100 + font-size: 25rpx;
  101 + padding-right: 30rpx;
  102 + margin-top: 4rpx;
104 } 103 }
105 104
106 .filter-modal { 105 .filter-modal {
107 - position: fixed;  
108 - left: 150rpx;  
109 - top: 0;  
110 - right: 0;  
111 - bottom: 0;  
112 - z-index: 20;  
113 - background-color: white;  
114 - overflow-x: hidden;  
115 - padding-bottom: 30rpx; 106 + position: fixed;
  107 + left: 150rpx;
  108 + top: 0;
  109 + right: 0;
  110 + bottom: 0;
  111 + z-index: 20;
  112 + background-color: white;
  113 + overflow-x: hidden;
  114 + padding-bottom: 30rpx;
116 } 115 }
117 116
118 .filter-box { 117 .filter-box {
119 - box-sizing: border-box;  
120 - width: 100%;  
121 - font-size: 28rpx;  
122 - padding: 20rpx; 118 + box-sizing: border-box;
  119 + width: 100%;
  120 + font-size: 28rpx;
  121 + padding: 20rpx;
123 } 122 }
124 123
125 .filter-name { 124 .filter-name {
126 - width: 100%;  
127 - padding: 20rpx 0;  
128 - word-break: keep-all;  
129 - white-space: nowrap;  
130 - text-overflow: ellipsis;  
131 - overflow: hidden;  
132 - font-size: 30rpx; 125 + width: 100%;
  126 + padding: 20rpx 0;
  127 + word-break: keep-all;
  128 + white-space: nowrap;
  129 + text-overflow: ellipsis;
  130 + overflow: hidden;
  131 + font-size: 30rpx;
133 } 132 }
134 133
135 .filter-items { 134 .filter-items {
136 - width: 100%; 135 + width: 100%;
137 } 136 }
138 137
139 .filter-item { 138 .filter-item {
140 - float: left;  
141 - width: fit-content;  
142 - max-width: 500rpx;  
143 - word-break: keep-all;  
144 - white-space: nowrap;  
145 - text-overflow: ellipsis;  
146 - overflow: hidden;  
147 - padding: 10rpx;  
148 - border-radius: 10rpx;  
149 - border: 1rpx #ddd solid;  
150 - margin: 0 10rpx 10rpx 0;  
151 - background-color: #fdfdfd;  
152 - color: #666; 139 + float: left;
  140 + width: fit-content;
  141 + max-width: 500rpx;
  142 + word-break: keep-all;
  143 + white-space: nowrap;
  144 + text-overflow: ellipsis;
  145 + overflow: hidden;
  146 + padding: 10rpx;
  147 + border-radius: 10rpx;
  148 + border: 1rpx #ddd solid;
  149 + margin: 0 10rpx 10rpx 0;
  150 + background-color: #fdfdfd;
  151 + color: #666;
153 } 152 }
154 153
155 .viewall-btn { 154 .viewall-btn {
156 - margin-top: 20rpx;  
157 - width: 300rpx; 155 + margin-top: 20rpx;
  156 + width: 300rpx;
158 } 157 }
159 158
160 .search-modal { 159 .search-modal {
161 - position: fixed;  
162 - top: 0;  
163 - right: 0;  
164 - left: 0;  
165 - bottom: 0;  
166 - z-index: 20;  
167 - background-color: white;  
168 - overflow-x: hidden;  
169 - padding: 80rpx 30rpx;  
170 - font-size: 30rpx;  
171 - color: #555555; 160 + position: fixed;
  161 + top: 0;
  162 + right: 0;
  163 + left: 0;
  164 + bottom: 0;
  165 + z-index: 20;
  166 + background-color: white;
  167 + overflow-x: hidden;
  168 + padding: 80rpx 30rpx;
  169 + font-size: 30rpx;
  170 + color: #555;
172 } 171 }
173 172
174 .search-bar { 173 .search-bar {
175 - width: 100%;  
176 - box-sizing: border-box; 174 + width: 100%;
  175 + box-sizing: border-box;
177 } 176 }
178 177
179 .search-input { 178 .search-input {
180 - width: 80%;  
181 - float: left;  
182 - border: 1rpx solid #e0e0e0;  
183 - box-sizing: border-box;  
184 - height: 80rpx;  
185 - padding-left: 20rpx;  
186 - border-top-left-radius: 10rpx;  
187 - border-bottom-left-radius: 10rpx; 179 + width: 80%;
  180 + float: left;
  181 + border: 1rpx solid #e0e0e0;
  182 + box-sizing: border-box;
  183 + height: 80rpx;
  184 + padding-left: 20rpx;
  185 + border-top-left-radius: 10rpx;
  186 + border-bottom-left-radius: 10rpx;
188 } 187 }
189 188
190 .search-btn { 189 .search-btn {
191 - width: 20%;  
192 - height: 80rpx;  
193 - background-color: #f23030;  
194 - display: inline-block;  
195 - text-align: center;  
196 - border-top-right-radius: 10rpx;  
197 - border-bottom-right-radius: 10rpx; 190 + width: 20%;
  191 + height: 80rpx;
  192 + background-color: #f23030;
  193 + display: inline-block;
  194 + text-align: center;
  195 + border-top-right-radius: 10rpx;
  196 + border-bottom-right-radius: 10rpx;
198 } 197 }
199 198
200 .search-btn .search-img { 199 .search-btn .search-img {
201 - height: 45rpx;  
202 - width: 45rpx;  
203 - padding: 20rpx; 200 + height: 45rpx;
  201 + width: 45rpx;
  202 + padding: 20rpx;
204 } 203 }
205 204
206 .search-hot { 205 .search-hot {
207 - margin-top: 40rpx; 206 + margin-top: 40rpx;
208 } 207 }
209 208
210 .hot-title { 209 .hot-title {
211 - font-size: 35rpx;  
212 - color: black;  
213 - margin-bottom: 30rpx; 210 + font-size: 35rpx;
  211 + color: black;
  212 + margin-bottom: 30rpx;
214 } 213 }
215 214
216 .hot-row { 215 .hot-row {
217 - display: flex;  
218 - /*--justify-content: space-between---*/  
219 - padding: 15rpx 10rpx; 216 + display: flex;
  217 + /*--justify-content: space-between---*/
  218 + padding: 15rpx 10rpx;
220 } 219 }
221 220
222 .hot-item { 221 .hot-item {
223 - padding: 8rpx 8rpx;  
224 - border: 1rpx solid #e0e0e0;  
225 - border-radius: 10rpx;  
226 - font-size: 28rpx;  
227 - margin-left: 15rpx;  
228 -}  
229 -  
230 -.card_bg {display: flex; max-width: 110rpx;height: 28rpx; align-items: center; border-radius: 26rpx; font-size: 19rpx;padding: 2rpx 10rpx;  
231 -background: #333; color: #fff; justify-content: center; margin-left: 3rpx; margin-top:7rpx; line-height: 28rpx; width: auto}  
232 -.card_bg image{ width: 19rpx; height: 19rpx; margin-right: 1rpx; vertical-align: middle}  
233 -.card_bg .card_name{  
234 - max-width: 76rpx;  
235 - width: auto;  
236 - overflow: hidden;  
237 - white-space:nowrap;  
238 -}  
239 -.mk_price{margin-left: 10rpx; font-size: 25rpx;}  
240 -.item-cont{ line-height: 38rpx} 222 + padding: 8rpx 8rpx;
  223 + border: 1rpx solid #e0e0e0;
  224 + border-radius: 10rpx;
  225 + font-size: 28rpx;
  226 + margin-left: 15rpx;
  227 +}
  228 +
  229 +.card_bg {
  230 + display: flex;
  231 + max-width: 110rpx;
  232 + height: 25rpx;
  233 + align-items: center;
  234 + border-radius: 26rpx;
  235 + font-size: 19rpx;
  236 + padding: 2rpx 10rpx;
  237 + background: #333;
  238 + color: #fff;
  239 + justify-content: center;
  240 + margin-left: 8rpx;
  241 + margin-top: 7rpx;
  242 + line-height: 25rpx;
  243 + width: auto;
  244 +}
  245 +
  246 +.card_bg image {
  247 + width: 19rpx;
  248 + height: 19rpx;
  249 + margin-right: 1rpx;
  250 + vertical-align: middle;
  251 +}
  252 +
  253 +.card_bg .card_name {
  254 + max-width: 76rpx;
  255 + width: auto;
  256 + overflow: hidden;
  257 + white-space: nowrap;
  258 +}
  259 +
  260 +.mk_price {
  261 + margin-left: 10rpx;
  262 + font-size: 25rpx;
  263 +}
  264 +
  265 +.item-cont {
  266 + line-height: 38rpx;
  267 +}