hagerHeader.vue
2.56 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!--
* @Date: 2024-09-26 13:42:11
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-09-26 16:52:12
* @FilePath: /hager/src/components/common/hagerHeader.vue
* @Description: 文件描述
-->
<template>
<div class="hager-header">
<el-row class="hidden-xs-only">
<el-col :sm="2" :md="2" :lg="3" :xl="4"> </el-col>
<el-col :sm="20" :md="20" :lg="18" :xl="16" style="position: relative;">
<el-row>
<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>解决方案</div>
<div>新闻中心</div>
<div>招聘信息</div>
<div>关于海格</div>
<div>联系我们</div>
<div>首页</div>
</div>
</el-col>
<el-col :sm="8" :md="8" :lg="8" :xl="8">
<div style="display: flex; background-color: blue;">
<div>搜索</div>
<div>地球仪</div>
<div>用户</div>
</div>
</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>
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>
</div>
</el-collapse-transition>
</el-col>
<el-col :sm="2" :md="2" :lg="3" :xl="4"> </el-col>
</el-row>
</div>
</template>
<script>
import mixin from 'common/mixin';
export default {
mixins: [mixin.init],
data () {
return {
show: true,
}
},
mounted () {
},
methods: {
onMouseOver() {
// 当鼠标悬停时
this.show = true;
},
onMouseLeave() {
// 当鼠标离开时
this.show = false;
}
}
}
</script>
<style lang="less" scoped>
.hager-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 9;
}
</style>