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
<!--
* @Date: 2024-09-26 13:42:11
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-09-30 09:59:51
* @LastEditTime: 2024-09-30 11:31:26
* @FilePath: /hager/src/components/common/hagerHeader.vue
* @Description: 文件描述
-->
......@@ -38,23 +38,28 @@
<div v-show="show" class="product-center">
<div style="display: flex; width: 100%;">
<div class="product-left-wrapper">
<div v-for="(item, index) in product_menu" :key="index" @click="onClick(item)" style="display: flex; align-items: center;">
<el-image style="width: 2rem; height: 2rem" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="fit"></el-image>
{{ item.name }}
<i class="el-icon-right"></i>
<div :class="['product-left-item', p_index === index ? 'active' : '']" v-for="(item, index) in product_menu" :key="index" @click="onClick(item, index)">
<div style="display: flex; align-items: center;">
<el-image style="width: 2rem; height: 2rem" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="fit"></el-image>
&nbsp;
{{ item.name }}
</div>
<div>
<i class="el-icon-right"></i>
</div>
</div>
</div>
<div class="product-right-wrapper">
<div style="display: flex; justify-content: space-between;">
<div>{{ product_info.name }}</div>
<div @click="closeMenu">X</div>
<div class="product-right-title">
<div class="text">{{ product_info.name }}</div>
<div @click="closeMenu"><i class="el-icon-close" style="font-size: 1.25rem;"></i></div>
</div>
<div>{{ product_info.desc }}</div>
<div class="product-right-desc">{{ product_info.desc }}</div>
<div class="product-right-center">
<div v-for="(item, index) in product_info.product" :key="index" class="product-right-center-item">
<div>{{ item.name }}</div>
<div @click="goToC(item)" class="header-text">{{ item.name }}&nbsp;</div>
<div>
<div @click="goToP(p.id)" v-for="(p, idx) in item.list" :key="idx">{{ p.name }}</div>
<div class="item-text" @click="goToP(item)" v-for="(p, idx) in item.list" :key="idx">{{ p.name }}</div>
</div>
</div>
</div>
......@@ -122,6 +127,15 @@ export default {
}, {
id: '',
name: 'HW+系列空气断路器'
}, {
id: '',
name: 'HW系列空气断路器'
}, {
id: '',
name: 'HW+系列空气断路器'
}, {
id: '',
name: 'HW系列空气断路器'
}]
},
{
......@@ -152,28 +166,32 @@ export default {
}, {
id: '',
name: 'HW+系列空气断路器'
}, {
id: '',
name: 'HW系列空气断路器'
}, {
id: '',
name: 'HW+系列空气断路器'
}, {
id: '',
name: 'HW系列空气断路器'
}, {
id: '',
name: 'HW系列空气断路器'
}, {
id: '',
name: 'HW+系列空气断路器'
}, {
id: '',
name: 'HW系列空气断路器'
}, {
id: '',
name: 'HW+系列空气断路器'
}, {
id: '',
name: 'HW系列空气断路器'
}]
},
// {
// name: '',
// list: [{
// id: '',
// name: 'HW系列空气断路器'
// }, {
// id: '',
// name: 'HW+系列空气断路器'
// }]
// },
// {
// name: '',
// list: [{
// id: '',
// name: 'HW系列空气断路器'
// }, {
// id: '',
// name: 'HW+系列空气断路器'
// }]
// }
]
}
}, {
......@@ -200,26 +218,61 @@ export default {
}],
product_info: {},
is_active: '',
p_index: 0,
}
},
mounted () {
this.product_info = this.product_menu[0]['info'];
// 修改数据结构显示
this.product_info.product = this.splitProductList(this.product_info.product)
},
watch: {
'$route' (to, from) {
this.is_active = to.meta.tag;
// console.warn(from);
// console.warn(location.hash);
// console.warn(parseQueryString(window.location.href));
}
},
methods: {
splitProductList (products) {
const maxLength = 5; // 超过5个需要拆分
let result = [];
products.forEach(product => {
// 如果 list 长度不超过 5，则直接加入 result
if (product.list.length <= maxLength) {
result.push(product);
} else {
// 如果 list 长度超过 5，则拆分
let listChunks = [];
for (let i = 0; i < product.list.length; i += maxLength) {
listChunks.push(product.list.slice(i, i + maxLength));
}
// 第一个块保留原有的 name，后续块 name 设为空
listChunks.forEach((chunk, index) => {
if (index === 0) {
result.push({
name: product.name,
list: chunk
});
} else {
result.push({
name: '',
list: chunk
});
}
});
}
});
return result;
},
onClickProduct() {
// 当鼠标悬停时
this.show = true;
},
onClick (item) {
onClick (item, index) {
this.product_info = item.info;
this.p_index = index
},
closeMenu () {
this.show = false;
......@@ -231,11 +284,20 @@ export default {
});
}
},
goToP (id) {
goToC (item) { // 跳转产品二级
this.$router.push({
path: '/product/index',
query: {
// id: id
}
});
this.closeMenu();
},
goToP (item) { // 跳转产品详情
this.$router.push({
path: '/product/detail',
query: {
id: id
// id: id
}
});
this.closeMenu();
......@@ -257,20 +319,76 @@ export default {
left: 0;
width: 100%;
height: auto;
background-color: #f1f1f1;
background-color: #fff;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
.product-left-wrapper {
flex-basis: 33.33%;
padding: 1rem;
&:hover {
cursor: pointer;
}
.product-left-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem;
&.active {
background-color: @background-color;
border-radius: 5px;
}
i {
color: @primary-color;
}
}
}
.product-right-wrapper {
flex-basis: 66.67%;
}
.product-right-center {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.product-right-center-item {
flex-basis: calc(33.33% - 10px);
margin-bottom: 10px;
background-color: @background-color;
padding: 1.75rem 1.5rem;
.product-right-title {
display: flex;
justify-content: space-between;
margin-bottom: 0.25rem;
.text {
font-size: 1.25rem;
color: @text-color;
font-weight: bold;
}
i {
&:hover {
cursor: pointer;
}
}
}
.product-right-desc {
margin-bottom: 1.5rem;
color: @secondary-text-color;
}
.product-right-center {
display: flex;
flex-wrap: wrap;
// justify-content: space-between;
.product-right-center-item {
flex-basis: calc(33.33%);
margin-bottom: 10px;
.header-text {
margin-bottom: 0.25rem;
color: @text-color;
&:hover {
cursor: pointer;
text-decoration: underline;
}
}
.item-text {
line-height: 1.75;
color: @secondary-text-color;
&:hover {
cursor: pointer;
text-decoration: underline;
}
}
}
}
}
}
......
......@@ -2,4 +2,5 @@
@primary-color: #3498db;
@secondary-color: #03467c;
@text-color: #333;
@secondary-text-color: #999;
@background-color: #f5f5f5;
......