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 186 additions and 24 deletions
...@@ -10,6 +10,7 @@ declare module 'vue' { ...@@ -10,6 +10,7 @@ declare module 'vue' {
10 ElButton: typeof import('element-ui/lib/button')['default'] 10 ElButton: typeof import('element-ui/lib/button')['default']
11 ElCol: typeof import('element-ui/lib/col')['default'] 11 ElCol: typeof import('element-ui/lib/col')['default']
12 ElCollapseTransition: typeof import('element-ui/lib/transitions/collapse-transition')['default'] 12 ElCollapseTransition: typeof import('element-ui/lib/transitions/collapse-transition')['default']
13 + ElImage: typeof import('element-ui/lib/image')['default']
13 ElRow: typeof import('element-ui/lib/row')['default'] 14 ElRow: typeof import('element-ui/lib/row')['default']
14 HagerBox: typeof import('./src/components/common/hagerBox.vue')['default'] 15 HagerBox: typeof import('./src/components/common/hagerBox.vue')['default']
15 HagerFooter: typeof import('./src/components/common/hagerFooter.vue')['default'] 16 HagerFooter: typeof import('./src/components/common/hagerFooter.vue')['default']
......
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-26 16:52:12 4 + * @LastEditTime: 2024-09-27 13:35:32
5 * @FilePath: /hager/src/components/common/hagerHeader.vue 5 * @FilePath: /hager/src/components/common/hagerHeader.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
14 <el-col :sm="16" :md="16" :lg="16" :xl="16"> 14 <el-col :sm="16" :md="16" :lg="16" :xl="16">
15 <div style="display: flex; background-color: gray;"> 15 <div style="display: flex; background-color: gray;">
16 <div>图标</div> 16 <div>图标</div>
17 - <div @mouseover="onMouseOver" @mouseleave="onMouseLeave">产品中心</div> 17 + <div @click="onClickProduct">产品中心</div>
18 <div>解决方案</div> 18 <div>解决方案</div>
19 <div>新闻中心</div> 19 <div>新闻中心</div>
20 <div>招聘信息</div> 20 <div>招聘信息</div>
...@@ -32,16 +32,30 @@ ...@@ -32,16 +32,30 @@
32 </el-col> 32 </el-col>
33 </el-row> 33 </el-row>
34 <el-collapse-transition> 34 <el-collapse-transition>
35 - <div v-show="show" style="position: absolute; top: 2rem; left: 0; width: 100%; height: auto; background-color: #f1f1f1;"> 35 + <div v-show="show" class="product-center">
36 - <div> 36 + <div style="display: flex; width: 100%;">
37 - lorem ipsum dolor sit amet consectetur adipisicing elit. 37 + <div class="product-left-wrapper">
38 - lorem ipsum dolor sit amet consectetur adipisicing elit. 38 + <div v-for="(item, index) in product_menu" :key="index" @click="onClick(item)" style="display: flex; align-items: center;">
39 - lorem ipsum dolor sit amet consectetur adipisicing elit. 39 + <el-image style="width: 2rem; height: 2rem" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="fit"></el-image>
40 - lorem ipsum dolor sit amet consectetur adipisicing elit. 40 + {{ item.name }}
41 - lorem ipsum dolor sit amet consectetur adipisicing elit. 41 + <i class="el-icon-right"></i>
42 - lorem ipsum dolor sit amet consectetur adipisicing elit. 42 + </div>
43 - lorem ipsum dolor sit amet consectetur adipisicing elit. 43 + </div>
44 - lorem ipsum dolor sit amet consectetur adipisicing elit. 44 + <div class="product-right-wrapper">
45 + <div style="display: flex; justify-content: space-between;">
46 + <div>{{ product_info.name }}</div>
47 + <div @click="closeMenu">X</div>
48 + </div>
49 + <div>{{ product_info.desc }}</div>
50 + <div class="product-right-center">
51 + <div v-for="(item, index) in product_info.product" :key="index" class="product-right-center-item">
52 + <div>{{ item.name }}</div>
53 + <div>
54 + <div v-for="(p, idx) in item.list" :key="idx">{{ p.name }}</div>
55 + </div>
56 + </div>
57 + </div>
58 + </div>
45 </div> 59 </div>
46 </div> 60 </div>
47 </el-collapse-transition> 61 </el-collapse-transition>
...@@ -58,19 +72,143 @@ export default { ...@@ -58,19 +72,143 @@ export default {
58 mixins: [mixin.init], 72 mixins: [mixin.init],
59 data () { 73 data () {
60 return { 74 return {
61 - show: true, 75 + show: false,
76 + test1: true,
77 + product_menu: [{
78 + name: '配电产品',
79 + info: {
80 + name: '配电产品',
81 + desc: '探索配电新境界，我们的产品引领行业潮流，提供高效、安全的配电解决方案，助您事业更上一层楼！',
82 + product: [
83 + {
84 + name: '空气断路器',
85 + list: [{
86 + id: '',
87 + name: 'HW系列空气断路器'
88 + }, {
89 + id: '',
90 + name: 'HW+系列空气断路器'
91 + }]
92 + },
93 + {
94 + name: '空气断路器',
95 + list: [{
96 + id: '',
97 + name: 'HW系列空气断路器'
98 + }, {
99 + id: '',
100 + name: 'HW+系列空气断路器'
101 + }]
102 + },
103 + {
104 + name: '空气断路器',
105 + list: [{
106 + id: '',
107 + name: 'HW系列空气断路器'
108 + }, {
109 + id: '',
110 + name: 'HW+系列空气断路器'
111 + }]
112 + },
113 + {
114 + name: '空气断路器',
115 + list: [{
116 + id: '',
117 + name: 'HW系列空气断路器'
118 + }, {
119 + id: '',
120 + name: 'HW+系列空气断路器'
121 + }]
122 + },
123 + {
124 + name: '空气断路器',
125 + list: [{
126 + id: '',
127 + name: 'HW系列空气断路器'
128 + }, {
129 + id: '',
130 + name: 'HW+系列空气断路器'
131 + }]
132 + },
133 + {
134 + name: '空气断路器',
135 + list: [{
136 + id: '',
137 + name: 'HW系列空气断路器'
138 + }, {
139 + id: '',
140 + name: 'HW+系列空气断路器'
141 + }]
142 + },
143 + {
144 + name: '空气断路器',
145 + list: [{
146 + id: '',
147 + name: 'HW系列空气断路器'
148 + }, {
149 + id: '',
150 + name: 'HW+系列空气断路器'
151 + }]
152 + },
153 + // {
154 + // name: '',
155 + // list: [{
156 + // id: '',
157 + // name: 'HW系列空气断路器'
158 + // }, {
159 + // id: '',
160 + // name: 'HW+系列空气断路器'
161 + // }]
162 + // },
163 + // {
164 + // name: '',
165 + // list: [{
166 + // id: '',
167 + // name: 'HW系列空气断路器'
168 + // }, {
169 + // id: '',
170 + // name: 'HW+系列空气断路器'
171 + // }]
172 + // }
173 + ]
174 + }
175 + }, {
176 + name: '成套产品',
177 + info: {
178 + name: '成套产品',
179 + desc: '探索配电新境界，我们的产品引领行业潮流，提供高效、安全的配电解决方案，助您事业更上一层楼！',
180 + product: []
181 + }
182 + }, {
183 + name: '开关面板',
184 + info: {
185 + name: '开关面板',
186 + desc: '探索配电新境界，我们的产品引领行业潮流，提供高效、安全的配电解决方案，助您事业更上一层楼！',
187 + product: []
188 + }
189 + }, {
190 + name: '智能控制',
191 + info: {
192 + name: '智能控制',
193 + desc: '探索配电新境界，我们的产品引领行业潮流，提供高效、安全的配电解决方案，助您事业更上一层楼！',
194 + product: []
195 + }
196 + }],
197 + product_info: {},
62 } 198 }
63 }, 199 },
64 mounted () { 200 mounted () {
65 - 201 + this.product_info = this.product_menu[0]['info'];
66 }, 202 },
67 methods: { 203 methods: {
68 - onMouseOver() { 204 + onClickProduct() {
69 // 当鼠标悬停时 205 // 当鼠标悬停时
70 this.show = true; 206 this.show = true;
71 }, 207 },
72 - onMouseLeave() { 208 + onClick (item) {
73 - // 当鼠标离开时 209 + this.product_info = item.info;
210 + },
211 + closeMenu () {
74 this.show = false; 212 this.show = false;
75 } 213 }
76 } 214 }
...@@ -78,11 +216,34 @@ export default { ...@@ -78,11 +216,34 @@ export default {
78 </script> 216 </script>
79 217
80 <style lang="less" scoped> 218 <style lang="less" scoped>
81 -.hager-header { 219 + .hager-header {
82 - position: fixed; 220 + position: fixed;
83 - top: 0; 221 + top: 0;
84 - left: 0; 222 + left: 0;
85 - right: 0; 223 + right: 0;
86 - z-index: 9; 224 + z-index: 9;
87 -} 225 + .product-center {
226 + position: absolute;
227 + top: 2rem;
228 + left: 0;
229 + width: 100%;
230 + height: auto;
231 + background-color: #f1f1f1;
232 + .product-left-wrapper {
233 + flex-basis: 33.33%;
234 + }
235 + .product-right-wrapper {
236 + flex-basis: 66.67%;
237 + }
238 + .product-right-center {
239 + display: flex;
240 + flex-wrap: wrap;
241 + justify-content: space-between;
242 + .product-right-center-item {
243 + flex-basis: calc(33.33% - 10px);
244 + margin-bottom: 10px;
245 + }
246 + }
247 + }
248 + }
88 </style> 249 </style>
......