Hooke / hager

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
43170a48 1 parent 9b51d9e1

菜单自适应显示优化

Inline Side-by-side
Showing 2 changed files with 137 additions and 70 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-10-21 12:59:17 4 + * @LastEditTime: 2024-10-21 13:42:16
5 * @FilePath: /hager/src/components/common/hagerHeader.vue 5 * @FilePath: /hager/src/components/common/hagerHeader.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -448,6 +448,7 @@ export default { ...@@ -448,6 +448,7 @@ export default {
448 }, 448 },
449 openMenu () { 449 openMenu () {
450 this.show_menu = !this.show_menu; 450 this.show_menu = !this.show_menu;
451 + // TAG: 解决body滚动被禁止
451 if (this.show_menu) { 452 if (this.show_menu) {
452 $('body').css('overflow', 'hidden'); 453 $('body').css('overflow', 'hidden');
453 } else { 454 } else {
......
1 <!-- 1 <!--
2 * @Date: 2024-10-10 10:37:16 2 * @Date: 2024-10-10 10:37:16
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-10-10 13:58:53 4 + * @LastEditTime: 2024-10-21 13:37:46
5 * @FilePath: /hager/src/components/hagerMenu.vue 5 * @FilePath: /hager/src/components/hagerMenu.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
8 <template> 8 <template>
9 <div class="hager-menu-page"> 9 <div class="hager-menu-page">
10 - <div class="menu"> 10 + <div class="menu-wrapper">
11 + <div class="menu-title" @click="toggleTop()">产品中心</div>
12 + <div>
13 + <i
14 + v-if="isToggle"
15 + class="el-icon-arrow-up"
16 + style="font-size: 1.25rem; color: #F56400;"
17 + @click="toggleTop()"
18 + ></i>
19 + <i @click="toggleTop()" v-else class="el-icon-arrow-down" style="font-size: 1.25rem; color: #F56400;"></i>
20 + </div>
21 + </div>
22 + <div v-if="isToggle" class="menu">
11 <div v-for="(item, index) in menuData" :key="item.id" class="menu-item"> 23 <div v-for="(item, index) in menuData" :key="item.id" class="menu-item">
12 <!-- 一级菜单 --> 24 <!-- 一级菜单 -->
13 - <div @click="toggleMenu(item.id)" :class="['menu-label', activeMenu === item.id ? 'active' : '']"> 25 + <div
26 + @click="toggleMenu(item.id)"
27 + :class="['menu-label', activeMenu === item.id ? 'active' : '']"
28 + >
14 <div> 29 <div>
15 <i class="el-icon-s-cooperation"></i> 30 <i class="el-icon-s-cooperation"></i>
16 {{ item.label }} 31 {{ item.label }}
17 </div> 32 </div>
18 <div> 33 <div>
19 - <i v-if="isActive(item.id)" class="el-icon-arrow-up" style="font-size: 1.25rem;"></i> 34 + <i
20 - <i v-else class="el-icon-arrow-down" style="font-size: 1.25rem;"></i> 35 + v-if="isActive(item.id)"
36 + class="el-icon-arrow-up"
37 + style="font-size: 1.25rem; color: #F56400;"
38 + ></i>
39 + <i v-else class="el-icon-arrow-down" style="font-size: 1.25rem; color: #F56400;"></i>
21 </div> 40 </div>
22 </div> 41 </div>
23 42
...@@ -25,16 +44,25 @@ ...@@ -25,16 +44,25 @@
25 <div v-if="isActive(item.id)" class="submenu"> 44 <div v-if="isActive(item.id)" class="submenu">
26 <div v-for="subItem in item.subItems" :key="subItem.id" class="submenu-item"> 45 <div v-for="subItem in item.subItems" :key="subItem.id" class="submenu-item">
27 <div class="submenu-label"> 46 <div class="submenu-label">
28 - <div @click="goToSub(subItem.id)"> {{ subItem.label }} </div> 47 + <div @click="goToSub(subItem.id)">{{ subItem.label }}</div>
29 <div @click="toggleSubMenu(subItem.id)"> 48 <div @click="toggleSubMenu(subItem.id)">
30 - <i v-if="isSubActive(subItem.id)" class="el-icon-arrow-up" style="font-size: 1.25rem;"></i> 49 + <i
31 - <i v-else class="el-icon-arrow-down" style="font-size: 1.25rem;"></i> 50 + v-if="isSubActive(subItem.id)"
51 + class="el-icon-arrow-up"
52 + style="font-size: 1.25rem; color: #F56400;"
53 + ></i>
54 + <i v-else class="el-icon-arrow-down" style="font-size: 1.25rem; color: #F56400;"></i>
32 </div> 55 </div>
33 </div> 56 </div>
34 57
35 <!-- 三级菜单 --> 58 <!-- 三级菜单 -->
36 <div v-if="isSubActive(subItem.id)" class="third-menu"> 59 <div v-if="isSubActive(subItem.id)" class="third-menu">
37 - <div @click="goToThird(thirdItem.id)" v-for="thirdItem in subItem.subItems" :key="thirdItem.id" class="third-item"> 60 + <div
61 + @click="goToThird(thirdItem.id)"
62 + v-for="thirdItem in subItem.subItems"
63 + :key="thirdItem.id"
64 + class="third-item"
65 + >
38 {{ thirdItem.label }} 66 {{ thirdItem.label }}
39 </div> 67 </div>
40 </div> 68 </div>
...@@ -42,91 +70,104 @@ ...@@ -42,91 +70,104 @@
42 </div> 70 </div>
43 </div> 71 </div>
44 </div> 72 </div>
73 + <div class="menu-wrapper" @click="goTo('/solution/index')">
74 + <div class="menu-title">解决方案</div>
75 + </div>
76 + <div class="menu-wrapper" @click="goTo('/news')">
77 + <div class="menu-title">新闻中心</div>
78 + </div>
79 + <div class="menu-wrapper" @click="goTo('/recruit')">
80 + <div class="menu-title">招聘信息</div>
81 + </div>
82 + <div class="menu-wrapper" @click="goTo('/about')">
83 + <div class="menu-title">关于海格</div>
84 + </div>
85 + <div class="menu-wrapper" @click="goTo('/concat')">
86 + <div class="menu-title">联系我们</div>
87 + </div>
88 + <div class="menu-wrapper" @click="goTo('/')">
89 + <div class="menu-title">首页</div>
90 + </div>
45 </div> 91 </div>
46 </template> 92 </template>
47 93
48 <script> 94 <script>
49 -import mixin from 'common/mixin'; 95 +import mixin from "common/mixin";
50 96
51 export default { 97 export default {
52 mixins: [mixin.init], 98 mixins: [mixin.init],
53 data() { 99 data() {
54 return { 100 return {
55 - // 模拟的树形菜单数据
56 menuData: [ 101 menuData: [
57 { 102 {
58 id: 1, 103 id: 1,
59 - label: '配电产品', 104 + label: "配电产品",
60 subItems: [ 105 subItems: [
61 { 106 {
62 id: 11, 107 id: 11,
63 - label: '空气断路器1', 108 + label: "空气断路器1",
64 subItems: [ 109 subItems: [
65 - { id: 111, label: 'HW系列空气断路器' }, 110 + { id: 111, label: "HW系列空气断路器" },
66 - { id: 112, label: 'HW+系列空气断路器' }, 111 + { id: 112, label: "HW+系列空气断路器" },
67 - { id: 113, label: 'HW系列空气断路器' }, 112 + { id: 113, label: "HW系列空气断路器" },
68 - { id: 114, label: 'HW+系列空气断路器' }, 113 + { id: 114, label: "HW+系列空气断路器" },
69 - { id: 115, label: 'HW系列空气断路器' }, 114 + { id: 115, label: "HW系列空气断路器" },
70 - { id: 116, label: 'HW+系列空气断路器' }, 115 + { id: 116, label: "HW+系列空气断路器" },
71 - { id: 117, label: 'HW系列空气断路器' }, 116 + { id: 117, label: "HW系列空气断路器" },
72 - { id: 118, label: 'HW+系列空气断路器' }, 117 + { id: 118, label: "HW+系列空气断路器" },
73 - { id: 119, label: 'HW系列空气断路器' }, 118 + { id: 119, label: "HW系列空气断路器" },
74 - { id: 1121, label: 'HW+系列空气断路器' }, 119 + { id: 1121, label: "HW+系列空气断路器" },
75 - { id: 1117, label: 'HW系列空气断路器' }, 120 + { id: 1117, label: "HW系列空气断路器" },
76 - { id: 1127, label: 'HW+系列空气断路器' }, 121 + { id: 1127, label: "HW+系列空气断路器" },
77 - { id: 1137, label: 'HW系列空气断路器' }, 122 + { id: 1137, label: "HW系列空气断路器" },
78 - { id: 1147, label: 'HW+系列空气断路器' }, 123 + { id: 1147, label: "HW+系列空气断路器" },
79 - { id: 1157, label: 'HW系列空气断路器' }, 124 + { id: 1157, label: "HW系列空气断路器" },
80 - { id: 1167, label: 'HW+系列空气断路器' }, 125 + { id: 1167, label: "HW+系列空气断路器" },
81 - { id: 7117, label: 'HW系列空气断路器' }, 126 + { id: 7117, label: "HW系列空气断路器" },
82 - { id: 7118, label: 'HW+系列空气断路器' }, 127 + { id: 7118, label: "HW+系列空气断路器" },
83 - { id: 7119, label: 'HW系列空气断路器' }, 128 + { id: 7119, label: "HW系列空气断路器" },
84 - { id: 71121, label: 'HW+系列空气断路器' }, 129 + { id: 71121, label: "HW+系列空气断路器" },
85 ], 130 ],
86 }, 131 },
87 { 132 {
88 id: 12, 133 id: 12,
89 - label: '空气断路器2', 134 + label: "空气断路器2",
90 subItems: [ 135 subItems: [
91 - { id: 111, label: 'HW系列空气断路器' }, 136 + { id: 111, label: "HW系列空气断路器" },
92 - { id: 112, label: 'HW+系列空气断路器' }, 137 + { id: 112, label: "HW+系列空气断路器" },
93 - { id: 113, label: 'HW系列空气断路器' }, 138 + { id: 113, label: "HW系列空气断路器" },
94 - { id: 114, label: 'HW+系列空气断路器' }, 139 + { id: 114, label: "HW+系列空气断路器" },
95 - { id: 115, label: 'HW系列空气断路器' }, 140 + { id: 115, label: "HW系列空气断路器" },
96 - { id: 116, label: 'HW+系列空气断路器' }, 141 + { id: 116, label: "HW+系列空气断路器" },
97 - { id: 117, label: 'HW系列空气断路器' }, 142 + { id: 117, label: "HW系列空气断路器" },
98 - { id: 118, label: 'HW+系列空气断路器' }, 143 + { id: 118, label: "HW+系列空气断路器" },
99 - { id: 119, label: 'HW系列空气断路器' }, 144 + { id: 119, label: "HW系列空气断路器" },
100 - { id: 1121, label: 'HW+系列空气断路器' }, 145 + { id: 1121, label: "HW+系列空气断路器" },
101 ], 146 ],
102 }, 147 },
103 ], 148 ],
104 }, 149 },
105 { 150 {
106 id: 2, 151 id: 2,
107 - label: '成套产品', 152 + label: "成套产品",
108 subItems: [ 153 subItems: [
109 { 154 {
110 id: 21, 155 id: 21,
111 - label: '塑壳断路器', 156 + label: "塑壳断路器",
112 subItems: [ 157 subItems: [
113 - { id: 211, label: '自动转换开关' }, 158 + { id: 211, label: "自动转换开关" },
114 - { id: 212, label: '接触器及热过载继电器' }, 159 + { id: 212, label: "接触器及热过载继电器" },
115 - // 更多三级菜单项...
116 ], 160 ],
117 }, 161 },
118 - // 更多二级菜单项...
119 ], 162 ],
120 }, 163 },
121 - // 更多一级菜单项...
122 ], 164 ],
165 + isToggle: false,
123 activeMenu: null, // 当前展开的一级菜单ID 166 activeMenu: null, // 当前展开的一级菜单ID
124 activeSubMenu: null, // 当前展开的二级菜单ID 167 activeSubMenu: null, // 当前展开的二级菜单ID
125 }; 168 };
126 }, 169 },
127 - mounted () { 170 + mounted() {},
128 -
129 - },
130 methods: { 171 methods: {
131 // 切换一级菜单展开状态 172 // 切换一级菜单展开状态
132 toggleMenu(menuId) { 173 toggleMenu(menuId) {
...@@ -160,32 +201,56 @@ export default { ...@@ -160,32 +201,56 @@ export default {
160 201
161 goToSub(id) { 202 goToSub(id) {
162 console.warn(id); 203 console.warn(id);
163 - this.$emit('close'); 204 + this.$emit("close");
164 this.$router.push({ 205 this.$router.push({
165 - path: '/product/index', 206 + path: "/product/index",
166 query: { 207 query: {
167 - id: id 208 + id: id,
168 - } 209 + },
169 - }) 210 + });
170 }, 211 },
171 goToThird(id) { 212 goToThird(id) {
172 console.warn(id); 213 console.warn(id);
173 - this.$emit('close'); 214 + this.$emit("close");
174 this.$router.push({ 215 this.$router.push({
175 - path: '/product/detail', 216 + path: "/product/detail",
176 query: { 217 query: {
177 - id: id 218 + id: id,
178 - } 219 + },
179 - }) 220 + });
180 }, 221 },
222 + //
223 + toggleTop(v) {
224 + this.isToggle = !this.isToggle;
225 + },
226 + goTo (path) { // 跳转页面
227 + this.$emit("close");
228 + if (this.$route.path !== path) { // 不能重复点击当前页面
229 + this.$router.push({
230 + path,
231 + });
181 } 232 }
182 -} 233 + },
234 + },
235 +};
183 </script> 236 </script>
184 237
185 <style lang="less" scoped> 238 <style lang="less" scoped>
186 .hager-menu-page { 239 .hager-menu-page {
187 height: 100%; 240 height: 100%;
188 overflow: scroll; 241 overflow: scroll;
242 + background-color: #FFF;
243 + .menu-wrapper {
244 + display: flex;
245 + align-items: center;
246 + padding: 1rem;
247 + justify-content: space-between;
248 + // padding-bottom: 0;
249 + border-bottom: 1px solid #F9F9F9;
250 + .menu-title {
251 + color: @secondary-color;
252 + }
253 + }
189 .menu { 254 .menu {
190 width: 100%; 255 width: 100%;
191 } 256 }
...@@ -195,18 +260,19 @@ export default { ...@@ -195,18 +260,19 @@ export default {
195 } 260 }
196 261
197 .menu-label { 262 .menu-label {
198 - font-weight: bold; 263 + // font-weight: bold;
199 padding: 1rem; 264 padding: 1rem;
200 display: flex; 265 display: flex;
201 align-items: center; 266 align-items: center;
202 justify-content: space-between; 267 justify-content: space-between;
203 &.active { 268 &.active {
204 - background-color: #FFF; 269 + background-color: #fff;
205 } 270 }
206 } 271 }
207 272
208 .submenu { 273 .submenu {
209 - margin-left: 20px; 274 + padding-left: 20px;
275 + background-color: #F7F7F7;
210 } 276 }
211 277
212 .submenu-item { 278 .submenu-item {
...@@ -236,7 +302,7 @@ export default { ...@@ -236,7 +302,7 @@ export default {
236 -webkit-line-clamp: 1; 302 -webkit-line-clamp: 1;
237 -webkit-box-orient: vertical; 303 -webkit-box-orient: vertical;
238 &:hover { 304 &:hover {
239 - color: #EE6D10; 305 + color: #ee6d10;
240 text-decoration: underline; 306 text-decoration: underline;
241 } 307 }
242 } 308 }
......