Hooke / hager

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
9598425d 1 parent a86e211f

✨ feat: 调整产品显示组件

Inline Side-by-side
Showing 2 changed files with 165 additions and 46 deletions
1 <!-- 1 <!--
2 * @Date: 2024-09-26 13:42:11 2 * @Date: 2024-09-26 13:42:11
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-09-30 09:59:51 4 + * @LastEditTime: 2024-09-30 11:31:26
5 * @FilePath: /hager/src/components/common/hagerHeader.vue 5 * @FilePath: /hager/src/components/common/hagerHeader.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -38,23 +38,28 @@ ...@@ -38,23 +38,28 @@
38 <div v-show="show" class="product-center"> 38 <div v-show="show" class="product-center">
39 <div style="display: flex; width: 100%;"> 39 <div style="display: flex; width: 100%;">
40 <div class="product-left-wrapper"> 40 <div class="product-left-wrapper">
41 - <div v-for="(item, index) in product_menu" :key="index" @click="onClick(item)" style="display: flex; align-items: center;"> 41 + <div :class="['product-left-item', p_index === index ? 'active' : '']" v-for="(item, index) in product_menu" :key="index" @click="onClick(item, index)">
42 - <el-image style="width: 2rem; height: 2rem" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="fit"></el-image> 42 + <div style="display: flex; align-items: center;">
43 - {{ item.name }} 43 + <el-image style="width: 2rem; height: 2rem" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="fit"></el-image>
44 - <i class="el-icon-right"></i> 44 + &nbsp;
45 + {{ item.name }}
46 + </div>
47 + <div>
48 + <i class="el-icon-right"></i>
49 + </div>
45 </div> 50 </div>
46 </div> 51 </div>
47 <div class="product-right-wrapper"> 52 <div class="product-right-wrapper">
48 - <div style="display: flex; justify-content: space-between;"> 53 + <div class="product-right-title">
49 - <div>{{ product_info.name }}</div> 54 + <div class="text">{{ product_info.name }}</div>
50 - <div @click="closeMenu">X</div> 55 + <div @click="closeMenu"><i class="el-icon-close" style="font-size: 1.25rem;"></i></div>
51 </div> 56 </div>
52 - <div>{{ product_info.desc }}</div> 57 + <div class="product-right-desc">{{ product_info.desc }}</div>
53 <div class="product-right-center"> 58 <div class="product-right-center">
54 <div v-for="(item, index) in product_info.product" :key="index" class="product-right-center-item"> 59 <div v-for="(item, index) in product_info.product" :key="index" class="product-right-center-item">
55 - <div>{{ item.name }}</div> 60 + <div @click="goToC(item)" class="header-text">{{ item.name }}&nbsp;</div>
56 <div> 61 <div>
57 - <div @click="goToP(p.id)" v-for="(p, idx) in item.list" :key="idx">{{ p.name }}</div> 62 + <div class="item-text" @click="goToP(item)" v-for="(p, idx) in item.list" :key="idx">{{ p.name }}</div>
58 </div> 63 </div>
59 </div> 64 </div>
60 </div> 65 </div>
...@@ -122,6 +127,15 @@ export default { ...@@ -122,6 +127,15 @@ export default {
122 }, { 127 }, {
123 id: '', 128 id: '',
124 name: 'HW+系列空气断路器' 129 name: 'HW+系列空气断路器'
130 + }, {
131 + id: '',
132 + name: 'HW系列空气断路器'
133 + }, {
134 + id: '',
135 + name: 'HW+系列空气断路器'
136 + }, {
137 + id: '',
138 + name: 'HW系列空气断路器'
125 }] 139 }]
126 }, 140 },
127 { 141 {
...@@ -152,28 +166,32 @@ export default { ...@@ -152,28 +166,32 @@ export default {
152 }, { 166 }, {
153 id: '', 167 id: '',
154 name: 'HW+系列空气断路器' 168 name: 'HW+系列空气断路器'
169 + }, {
170 + id: '',
171 + name: 'HW系列空气断路器'
172 + }, {
173 + id: '',
174 + name: 'HW+系列空气断路器'
175 + }, {
176 + id: '',
177 + name: 'HW系列空气断路器'
178 + }, {
179 + id: '',
180 + name: 'HW系列空气断路器'
181 + }, {
182 + id: '',
183 + name: 'HW+系列空气断路器'
184 + }, {
185 + id: '',
186 + name: 'HW系列空气断路器'
187 + }, {
188 + id: '',
189 + name: 'HW+系列空气断路器'
190 + }, {
191 + id: '',
192 + name: 'HW系列空气断路器'
155 }] 193 }]
156 }, 194 },
157 - // {
158 - // name: '',
159 - // list: [{
160 - // id: '',
161 - // name: 'HW系列空气断路器'
162 - // }, {
163 - // id: '',
164 - // name: 'HW+系列空气断路器'
165 - // }]
166 - // },
167 - // {
168 - // name: '',
169 - // list: [{
170 - // id: '',
171 - // name: 'HW系列空气断路器'
172 - // }, {
173 - // id: '',
174 - // name: 'HW+系列空气断路器'
175 - // }]
176 - // }
177 ] 195 ]
178 } 196 }
179 }, { 197 }, {
...@@ -200,26 +218,61 @@ export default { ...@@ -200,26 +218,61 @@ export default {
200 }], 218 }],
201 product_info: {}, 219 product_info: {},
202 is_active: '', 220 is_active: '',
221 + p_index: 0,
203 } 222 }
204 }, 223 },
205 mounted () { 224 mounted () {
206 this.product_info = this.product_menu[0]['info']; 225 this.product_info = this.product_menu[0]['info'];
226 + // 修改数据结构显示
227 + this.product_info.product = this.splitProductList(this.product_info.product)
207 }, 228 },
208 watch: { 229 watch: {
209 '$route' (to, from) { 230 '$route' (to, from) {
210 this.is_active = to.meta.tag; 231 this.is_active = to.meta.tag;
211 - // console.warn(from);
212 - // console.warn(location.hash);
213 - // console.warn(parseQueryString(window.location.href));
214 } 232 }
215 }, 233 },
216 methods: { 234 methods: {
235 + splitProductList (products) {
236 + const maxLength = 5; // 超过5个需要拆分
237 + let result = [];
238 +
239 + products.forEach(product => {
240 + // 如果 list 长度不超过 5，则直接加入 result
241 + if (product.list.length <= maxLength) {
242 + result.push(product);
243 + } else {
244 + // 如果 list 长度超过 5，则拆分
245 + let listChunks = [];
246 + for (let i = 0; i < product.list.length; i += maxLength) {
247 + listChunks.push(product.list.slice(i, i + maxLength));
248 + }
249 +
250 + // 第一个块保留原有的 name，后续块 name 设为空
251 + listChunks.forEach((chunk, index) => {
252 + if (index === 0) {
253 + result.push({
254 + name: product.name,
255 + list: chunk
256 + });
257 + } else {
258 + result.push({
259 + name: '',
260 + list: chunk
261 + });
262 + }
263 + });
264 + }
265 + });
266 +
267 + return result;
268 + },
217 onClickProduct() { 269 onClickProduct() {
218 // 当鼠标悬停时 270 // 当鼠标悬停时
219 this.show = true; 271 this.show = true;
220 }, 272 },
221 - onClick (item) { 273 + onClick (item, index) {
222 this.product_info = item.info; 274 this.product_info = item.info;
275 + this.p_index = index
223 }, 276 },
224 closeMenu () { 277 closeMenu () {
225 this.show = false; 278 this.show = false;
...@@ -231,11 +284,20 @@ export default { ...@@ -231,11 +284,20 @@ export default {
231 }); 284 });
232 } 285 }
233 }, 286 },
234 - goToP (id) { 287 + goToC (item) { // 跳转产品二级
288 + this.$router.push({
289 + path: '/product/index',
290 + query: {
291 + // id: id
292 + }
293 + });
294 + this.closeMenu();
295 + },
296 + goToP (item) { // 跳转产品详情
235 this.$router.push({ 297 this.$router.push({
236 path: '/product/detail', 298 path: '/product/detail',
237 query: { 299 query: {
238 - id: id 300 + // id: id
239 } 301 }
240 }); 302 });
241 this.closeMenu(); 303 this.closeMenu();
...@@ -257,20 +319,76 @@ export default { ...@@ -257,20 +319,76 @@ export default {
257 left: 0; 319 left: 0;
258 width: 100%; 320 width: 100%;
259 height: auto; 321 height: auto;
260 - background-color: #f1f1f1; 322 + background-color: #fff;
323 + border-bottom-left-radius: 5px;
324 + border-bottom-right-radius: 5px;
261 .product-left-wrapper { 325 .product-left-wrapper {
262 flex-basis: 33.33%; 326 flex-basis: 33.33%;
327 + padding: 1rem;
328 + &:hover {
329 + cursor: pointer;
330 + }
331 + .product-left-item {
332 + display: flex;
333 + align-items: center;
334 + justify-content: space-between;
335 + padding: 1rem;
336 + &.active {
337 + background-color: @background-color;
338 + border-radius: 5px;
339 + }
340 + i {
341 + color: @primary-color;
342 + }
343 + }
263 } 344 }
264 .product-right-wrapper { 345 .product-right-wrapper {
265 flex-basis: 66.67%; 346 flex-basis: 66.67%;
266 - } 347 + background-color: @background-color;
267 - .product-right-center { 348 + padding: 1.75rem 1.5rem;
268 - display: flex; 349 + .product-right-title {
269 - flex-wrap: wrap; 350 + display: flex;
270 - justify-content: space-between; 351 + justify-content: space-between;
271 - .product-right-center-item { 352 + margin-bottom: 0.25rem;
272 - flex-basis: calc(33.33% - 10px); 353 + .text {
273 - margin-bottom: 10px; 354 + font-size: 1.25rem;
355 + color: @text-color;
356 + font-weight: bold;
357 + }
358 + i {
359 + &:hover {
360 + cursor: pointer;
361 + }
362 + }
363 + }
364 + .product-right-desc {
365 + margin-bottom: 1.5rem;
366 + color: @secondary-text-color;
367 + }
368 + .product-right-center {
369 + display: flex;
370 + flex-wrap: wrap;
371 + // justify-content: space-between;
372 + .product-right-center-item {
373 + flex-basis: calc(33.33%);
374 + margin-bottom: 10px;
375 + .header-text {
376 + margin-bottom: 0.25rem;
377 + color: @text-color;
378 + &:hover {
379 + cursor: pointer;
380 + text-decoration: underline;
381 + }
382 + }
383 + .item-text {
384 + line-height: 1.75;
385 + color: @secondary-text-color;
386 + &:hover {
387 + cursor: pointer;
388 + text-decoration: underline;
389 + }
390 + }
391 + }
274 } 392 }
275 } 393 }
276 } 394 }
......
...@@ -2,4 +2,5 @@ ...@@ -2,4 +2,5 @@
2 @primary-color: #3498db; 2 @primary-color: #3498db;
3 @secondary-color: #03467c; 3 @secondary-color: #03467c;
4 @text-color: #333; 4 @text-color: #333;
5 +@secondary-text-color: #999;
5 @background-color: #f5f5f5; 6 @background-color: #f5f5f5;
......