fe / xianyu-ufo-app-web · Commits

Go to a project

Authored by y.huang
Commit 8d51eb924a551ec6af360196e6790850102ffdcb 1 parent b9a1724f

商品列表页面样式修改

Inline Side-by-side
Showing 4 changed files with 119 additions and 69 deletions
1 <template> 1 <template>
2 - <div> 2 + <div class="bg">
3 <div class="item" v-if="list.length" v-for="(product,index) in list" @click="goDetail(product)" 3 <div class="item" v-if="list.length" v-for="(product,index) in list" @click="goDetail(product)"
4 - :class="((index === 0 || index === 1) ? 'top-line':'') +' '+((index) % 2 === 0 ? 'right-line' :'')"  
5 - :key="index">  
6 - <div class="item-price">{{product.price ? '¥' + product.price : ' '}}</div>  
7 - <ImgSize class="item-imge" :src="product.default_images" :width="300" :height="300"/> 4 + :key="index" :class="(index) % 2 === 0 && 'magrin-right'">
  5 + <div class="item-top">
  6 + <div class="item-price">
  7 + <span class="price-flag">{{product.price && '¥'}}</span><span>{{product.price || ' '}}</span>
  8 + </div>
  9 + <div class="item-sales">{{product.sales && product.sales + '人付款'}}</div>
  10 + </div>
  11 + <ImgSize class="item-imge" :src="product.default_images" :width="274" :height="274"/>
8 <div class="item-name">{{product.product_name}}</div> 12 <div class="item-name">{{product.product_name}}</div>
9 </div> 13 </div>
10 </div> 14 </div>
@@ -36,48 +40,65 @@ export default { @@ -36,48 +40,65 @@ export default {
36 </script> 40 </script>
37 41
38 <style lang="scss" scoped> 42 <style lang="scss" scoped>
39 - .top-line {  
40 - border-top: 1px #ddd solid; 43 + .magrin-right {
  44 + margin-right: 14px;
41 } 45 }
42 46
43 - .right-line {  
44 - border-right: 1px #ddd solid; 47 + .item {
  48 + border-radius: 16px;
  49 + width: 344px;
  50 + padding: 24px;
  51 + height: 498px;
  52 + background: #fff;
  53 + margin-bottom: 16px;
45 } 54 }
46 55
47 - .item {  
48 - width: 9.37rem;  
49 - border-bottom: 1px #ddd solid;  
50 - padding: 28px 38px 0 38px;  
51 - float: left;  
52 - overflow: hidden;  
53 - height: 560px; 56 + .item-top {
  57 + height: 40px;
  58 + display: flex;
  59 + justify-content: space-between;
  60 + margin-bottom: 38px;
  61 + align-items: center;
54 } 62 }
55 63
56 .item-price { 64 .item-price {
57 - height: 32px;  
58 - margin-bottom: 38px;  
59 - font-size: 28px;  
60 - color: #000;  
61 - letter-spacing: 0; 65 + color: #d0021b;
  66 + font-size: 32px;
  67 + vertical-align: center;
62 } 68 }
63 69
64 .item-imge { 70 .item-imge {
65 - width: 300px;  
66 - height: 300px; 71 + width: 274px;
  72 + height: 274px;
  73 + margin: 0 10px;
67 } 74 }
68 75
69 .item-name { 76 .item-name {
70 - font-size: 28px; 77 + font-size: 24px;
71 color: #000; 78 color: #000;
72 letter-spacing: 0; 79 letter-spacing: 0;
73 - text-align: center;  
74 line-height: 40px; 80 line-height: 40px;
75 - margin-top: 38px;  
76 - margin-bottom: 44px; 81 + margin-top: 14px;
  82 + margin-bottom: 8px;
77 word-break: break-all; 83 word-break: break-all;
78 display: -webkit-box; 84 display: -webkit-box;
79 -webkit-line-clamp: 2; 85 -webkit-line-clamp: 2;
80 -webkit-box-orient: vertical; 86 -webkit-box-orient: vertical;
81 overflow: hidden; 87 overflow: hidden;
82 } 88 }
  89 +
  90 + .item-sales {
  91 + font-size: 22px;
  92 + color: #999;
  93 + }
  94 +
  95 + .price-flag {
  96 + font-size: 24px;
  97 + }
  98 +
  99 + .bg {
  100 + padding: 24px;
  101 + display: flex;
  102 + flex-wrap: wrap;
  103 + }
83 </style> 104 </style>
@@ -143,29 +143,35 @@ export default { @@ -143,29 +143,35 @@ export default {
143 bottom: 0; 143 bottom: 0;
144 z-index: 9; 144 z-index: 9;
145 width: 100%; 145 width: 100%;
  146 + background: #fff;
  147 + display: flex;
  148 + border-top: 1px solid rgba(0, 0, 0, 0.12);
  149 + justify-content: space-between;
  150 + align-items: center;
146 } 151 }
147 152
148 .clear { 153 .clear {
149 - line-height: 120px; 154 + margin-left: 32px;
  155 + line-height: 80px;
150 text-align: center; 156 text-align: center;
151 - width: 240px;  
152 - height: 120px; 157 + width: 330px;
  158 + height: 80px;
153 color: #000; 159 color: #000;
154 - font-size: 28px;  
155 - font-weight: bold;  
156 - float: left;  
157 - border-top: 1px solid; 160 + font-size: 32px;
  161 + border: 1px solid rgba(0, 0, 0, 0.12);
  162 + border-radius: 40px;
158 } 163 }
159 164
160 .submit { 165 .submit {
161 - line-height: 120px;  
162 - margin-left: 240px; 166 + line-height: 80px;
163 background-color: #08304B; 167 background-color: #08304B;
  168 + width: 330px;
  169 + height: 80px;
164 text-align: center; 170 text-align: center;
165 color: #fff; 171 color: #fff;
166 - font-size: 28px;  
167 - font-weight: bold;  
168 - height: 120px; 172 + font-size: 32px;
  173 + border-radius: 40px;
  174 + margin-right: 32px;
169 } 175 }
170 176
171 .item { 177 .item {
@@ -193,7 +199,7 @@ export default { @@ -193,7 +199,7 @@ export default {
193 } 199 }
194 200
195 .item-text { 201 .item-text {
196 - background: #F5F5F5; 202 + background: #f5f5f5;
197 font-size: 28px; 203 font-size: 28px;
198 color: #222; 204 color: #222;
199 text-align: center; 205 text-align: center;
@@ -201,17 +207,18 @@ export default { @@ -201,17 +207,18 @@ export default {
201 height: 80px; 207 height: 80px;
202 line-height: 80px; 208 line-height: 80px;
203 margin-right: 20px; 209 margin-right: 20px;
  210 + border-radius: 40px;
204 } 211 }
205 212
206 .item-text-selected { 213 .item-text-selected {
207 - background: #08304B; 214 + background: #08304b;
208 color: #fff; 215 color: #fff;
209 } 216 }
210 217
211 .item-size { 218 .item-size {
212 - width: 100px;  
213 - height: 100px;  
214 - line-height: 100px; 219 + width: 130px;
  220 + height: 80px;
  221 + line-height: 80px;
215 } 222 }
216 223
217 .item-img { 224 .item-img {
1 <template> 1 <template>
2 <div> 2 <div>
3 - <LayoutApp :show-back="true">  
4 - <div class="filter">  
5 - <div class="filter-tab">  
6 - <div class="tab-item" :class="selectedType === 2 && 'selected-tab'" @click="pressType(2)">人气</div>  
7 - <div class="tab-item middle" :class="selectedType === 1 && 'selected-tab'" @click="pressType(1)">  
8 - <span>价格</span>  
9 - <div :class="arrowImage"></div> 3 + <LayoutApp :show-back="true">
  4 + <div class="filter">
  5 + <div class="filter-tab">
  6 + <div class="tab-item" :class="selectedType === 2 && 'selected-tab'" @click="pressType(2)">人气</div>
  7 + <div class="tab-item middle" :class="selectedType === 1 && 'selected-tab'" @click="pressType(1)">
  8 + <span>价格</span>
  9 + <div :class="arrowImage"></div>
  10 + </div>
  11 + <div class="tab-item" :class="selectedType === 3 && 'selected-tab'" @click="pressType(3)">新品</div>
  12 + </div>
  13 + <div class="middle">
  14 + <div class="screen middle" @click="goFilter()">
  15 + <div class="screen-img"></div>
  16 + 筛选
  17 + </div>
  18 + <div class="search-img" @click="goSearch()"></div>
10 </div> 19 </div>
11 - <div class="tab-item" :class="selectedType === 3 && 'selected-tab'" @click="pressType(3)">新品</div>  
12 - </div>  
13 - <div class="screen middle" @click="goFilter()">  
14 - <div class="screen-img"></div>  
15 - 筛选  
16 </div> 20 </div>
17 - </div>  
18 - <Scroll :options="scrollOptions"  
19 - :data="productList.list"  
20 - @pulling-up="onPullingUp">  
21 - <ProductList :list="productList.list"></ProductList>  
22 - </Scroll>  
23 - </LayoutApp>  
24 - <Filtrate ref="filtrate"></Filtrate> 21 + <Scroll class="product-list"
  22 + :options="scrollOptions"
  23 + :data="productList.list"
  24 + @pulling-up="onPullingUp">
  25 + <ProductList :list="productList.list"></ProductList>
  26 + </Scroll>
  27 + </LayoutApp>
  28 + <Filtrate ref="filtrate"></Filtrate>
25 </div> 29 </div>
26 </template> 30 </template>
27 <script> 31 <script>
@@ -56,15 +60,16 @@ export default { @@ -56,15 +60,16 @@ export default {
56 listType: 1 60 listType: 1
57 }; 61 };
58 }, 62 },
59 - mounted() { 63 +
  64 + activated() {
60 this.changeArrow(); 65 this.changeArrow();
61 - let params = this.$route.params; 66 + let params = this.$route.query;
62 67
63 if (Object.keys(params).length && params.listType) { 68 if (Object.keys(params).length && params.listType) {
64 this.listType = params.listType; 69 this.listType = params.listType;
65 } 70 }
66 - this.fetchProductList({listType: this.listType, isReset: true});  
67 - this.fetchFilterData(); 71 + this.fetchProductList({...params, isReset: true});
  72 + this.fetchFilterData(params);
68 73
69 }, 74 },
70 methods: { 75 methods: {
@@ -109,6 +114,11 @@ export default { @@ -109,6 +114,11 @@ export default {
109 this.fetchProductList(params); 114 this.fetchProductList(params);
110 this.changeArrow(); 115 this.changeArrow();
111 }, 116 },
  117 + goSearch() {
  118 + this.$router.push({
  119 + name: 'Search',
  120 + });
  121 + },
112 changeArrow() { 122 changeArrow() {
113 this.arrowImage = (this.selectedType === 3 || this.selectedType === 2) ? 'price-arrow' : 123 this.arrowImage = (this.selectedType === 3 || this.selectedType === 2) ? 'price-arrow' :
114 this.priceDesc ? 'desc-arrow' : 'asc-arrow'; 124 this.priceDesc ? 'desc-arrow' : 'asc-arrow';
@@ -144,7 +154,6 @@ export default { @@ -144,7 +154,6 @@ export default {
144 } 154 }
145 155
146 .selected-tab { 156 .selected-tab {
147 - font-size: 40px;  
148 color: #000; 157 color: #000;
149 font-weight: bold; 158 font-weight: bold;
150 } 159 }
@@ -157,6 +166,7 @@ export default { @@ -157,6 +166,7 @@ export default {
157 font-size: 32px; 166 font-size: 32px;
158 color: #000; 167 color: #000;
159 letter-spacing: 0; 168 letter-spacing: 0;
  169 + margin-right: 24px;
160 } 170 }
161 171
162 .middle { 172 .middle {
@@ -191,4 +201,16 @@ export default { @@ -191,4 +201,16 @@ export default {
191 background: url(~statics/image/list/filter@3x.png) no-repeat; 201 background: url(~statics/image/list/filter@3x.png) no-repeat;
192 background-size: cover; 202 background-size: cover;
193 } 203 }
  204 +
  205 + .product-list {
  206 + background: #f5f5f5;
  207 + }
  208 +
  209 + .search-img {
  210 + width: 40px;
  211 + height: 40px;
  212 + margin-left: 20px;
  213 + background: url(~statics/image/list/search_icon@3x.png) no-repeat;
  214 + background-size: cover;
  215 + }
194 </style> 216 </style>