Hooke / hager

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
465c35ab 1 parent a865425d

✨ feat: 头部菜单功能显示测试

Inline Side-by-side
Showing 2 changed files with 180 additions and 18 deletions
......@@ -10,6 +10,7 @@ declare module 'vue' {
ElButton: typeof import('element-ui/lib/button')['default']
ElCol: typeof import('element-ui/lib/col')['default']
ElCollapseTransition: typeof import('element-ui/lib/transitions/collapse-transition')['default']
ElImage: typeof import('element-ui/lib/image')['default']
ElRow: typeof import('element-ui/lib/row')['default']
HagerBox: typeof import('./src/components/common/hagerBox.vue')['default']
HagerFooter: typeof import('./src/components/common/hagerFooter.vue')['default']
......
<!--
* @Date: 2024-09-26 13:42:11
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-09-26 16:52:12
* @LastEditTime: 2024-09-27 13:35:32
* @FilePath: /hager/src/components/common/hagerHeader.vue
* @Description: 文件描述
-->
......@@ -14,7 +14,7 @@
<el-col :sm="16" :md="16" :lg="16" :xl="16">
<div style="display: flex; background-color: gray;">
<div>图标</div>
<div @mouseover="onMouseOver" @mouseleave="onMouseLeave">产品中心</div>
<div @click="onClickProduct">产品中心</div>
<div>解决方案</div>
<div>新闻中心</div>
<div>招聘信息</div>
......@@ -32,16 +32,30 @@
</el-col>
</el-row>
<el-collapse-transition>
<div v-show="show" style="position: absolute; top: 2rem; left: 0; width: 100%; height: auto; background-color: #f1f1f1;">
<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>
</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>
<div>{{ 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>
lorem ipsum dolor sit amet consectetur adipisicing elit.
lorem ipsum dolor sit amet consectetur adipisicing elit.
lorem ipsum dolor sit amet consectetur adipisicing elit.
lorem ipsum dolor sit amet consectetur adipisicing elit.
lorem ipsum dolor sit amet consectetur adipisicing elit.
lorem ipsum dolor sit amet consectetur adipisicing elit.
lorem ipsum dolor sit amet consectetur adipisicing elit.
lorem ipsum dolor sit amet consectetur adipisicing elit.
<div v-for="(p, idx) in item.list" :key="idx">{{ p.name }}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</el-collapse-transition>
......@@ -58,19 +72,143 @@ export default {
mixins: [mixin.init],
data () {
return {
show: true,
show: false,
test1: true,
product_menu: [{
name: '配电产品',
info: {
name: '配电产品',
desc: '探索配电新境界，我们的产品引领行业潮流，提供高效、安全的配电解决方案，助您事业更上一层楼！',
product: [
{
name: '空气断路器',
list: [{
id: '',
name: 'HW系列空气断路器'
}, {
id: '',
name: 'HW+系列空气断路器'
}]
},
{
name: '空气断路器',
list: [{
id: '',
name: 'HW系列空气断路器'
}, {
id: '',
name: 'HW+系列空气断路器'
}]
},
{
name: '空气断路器',
list: [{
id: '',
name: 'HW系列空气断路器'
}, {
id: '',
name: 'HW+系列空气断路器'
}]
},
{
name: '空气断路器',
list: [{
id: '',
name: 'HW系列空气断路器'
}, {
id: '',
name: 'HW+系列空气断路器'
}]
},
{
name: '空气断路器',
list: [{
id: '',
name: 'HW系列空气断路器'
}, {
id: '',
name: 'HW+系列空气断路器'
}]
},
{
name: '空气断路器',
list: [{
id: '',
name: 'HW系列空气断路器'
}, {
id: '',
name: 'HW+系列空气断路器'
}]
},
{
name: '空气断路器',
list: [{
id: '',
name: 'HW系列空气断路器'
}, {
id: '',
name: 'HW+系列空气断路器'
}]
},
// {
// name: '',
// list: [{
// id: '',
// name: 'HW系列空气断路器'
// }, {
// id: '',
// name: 'HW+系列空气断路器'
// }]
// },
// {
// name: '',
// list: [{
// id: '',
// name: 'HW系列空气断路器'
// }, {
// id: '',
// name: 'HW+系列空气断路器'
// }]
// }
]
}
}, {
name: '成套产品',
info: {
name: '成套产品',
desc: '探索配电新境界，我们的产品引领行业潮流，提供高效、安全的配电解决方案，助您事业更上一层楼！',
product: []
}
}, {
name: '开关面板',
info: {
name: '开关面板',
desc: '探索配电新境界，我们的产品引领行业潮流，提供高效、安全的配电解决方案，助您事业更上一层楼！',
product: []
}
}, {
name: '智能控制',
info: {
name: '智能控制',
desc: '探索配电新境界，我们的产品引领行业潮流，提供高效、安全的配电解决方案，助您事业更上一层楼！',
product: []
}
}],
product_info: {},
}
},
mounted () {
this.product_info = this.product_menu[0]['info'];
},
methods: {
onMouseOver() {
onClickProduct() {
// 当鼠标悬停时
this.show = true;
},
onMouseLeave() {
// 当鼠标离开时
onClick (item) {
this.product_info = item.info;
},
closeMenu () {
this.show = false;
}
}
......@@ -78,11 +216,34 @@ export default {
</script>
<style lang="less" scoped>
.hager-header {
.hager-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 9;
}
.product-center {
position: absolute;
top: 2rem;
left: 0;
width: 100%;
height: auto;
background-color: #f1f1f1;
.product-left-wrapper {
flex-basis: 33.33%;
}
.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;
}
}
}
}
</style>
......