Hooke / hager

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
00de2cf2 1 parent 225380cd

✨ feat: 新增mini菜单组件，优化自适应宽度计算引入

Inline Side-by-side
Showing 7 changed files with 358 additions and 37 deletions
...@@ -27,6 +27,7 @@ declare module 'vue' { ...@@ -27,6 +27,7 @@ declare module 'vue' {
27 HagerHCarousel: typeof import('./src/components/hagerHCarousel.vue')['default'] 27 HagerHCarousel: typeof import('./src/components/hagerHCarousel.vue')['default']
28 HagerHeader: typeof import('./src/components/common/hagerHeader.vue')['default'] 28 HagerHeader: typeof import('./src/components/common/hagerHeader.vue')['default']
29 HagerHT: typeof import('./src/components/common/hagerHT.vue')['default'] 29 HagerHT: typeof import('./src/components/common/hagerHT.vue')['default']
30 + HagerMenu: typeof import('./src/components/hagerMenu.vue')['default']
30 HagerMore: typeof import('./src/components/hagerMore.vue')['default'] 31 HagerMore: typeof import('./src/components/hagerMore.vue')['default']
31 HagerT: typeof import('./src/components/common/hagerT.vue')['default'] 32 HagerT: typeof import('./src/components/common/hagerT.vue')['default']
32 HargerMore: typeof import('./src/components/hargerMore.vue')['default'] 33 HargerMore: typeof import('./src/components/hargerMore.vue')['default']
......
1 <!-- 1 <!--
2 * @Date: 2024-09-26 13:36:06 2 * @Date: 2024-09-26 13:36:06
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-09-30 14:01:41 4 + * @LastEditTime: 2024-10-10 13:54:25
5 * @FilePath: /hager/src/App.vue 5 * @FilePath: /hager/src/App.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
8 <template> 8 <template>
9 <div style=" display: flex; flex-direction: column; min-height: 100vh;"> 9 <div style=" display: flex; flex-direction: column; min-height: 100vh;">
10 <hager-header></hager-header> 10 <hager-header></hager-header>
11 - <router-view style="margin-top: 5rem; flex-grow: 1;"></router-view> 11 + <router-view :class="['wrapper', is_xs ? 'xs' : '']"></router-view>
12 <hager-footer></hager-footer> 12 <hager-footer></hager-footer>
13 </div> 13 </div>
14 </template> 14 </template>
...@@ -16,9 +16,11 @@ ...@@ -16,9 +16,11 @@
16 <script> 16 <script>
17 import hagerHeader from '@/components/common/hagerHeader.vue'; 17 import hagerHeader from '@/components/common/hagerHeader.vue';
18 import hagerFooter from '@/components/common/hagerFooter.vue'; 18 import hagerFooter from '@/components/common/hagerFooter.vue';
19 +import mixin from '@/common/mixin';
19 20
20 export default { 21 export default {
21 components: { hagerHeader, hagerFooter }, 22 components: { hagerHeader, hagerFooter },
23 + mixins: [mixin.init],
22 data () { 24 data () {
23 return { 25 return {
24 26
...@@ -28,6 +30,7 @@ export default { ...@@ -28,6 +30,7 @@ export default {
28 30
29 }, 31 },
30 methods: { 32 methods: {
33 +
31 } 34 }
32 } 35 }
33 </script> 36 </script>
...@@ -55,4 +58,12 @@ body { ...@@ -55,4 +58,12 @@ body {
55 top: 50%; 58 top: 50%;
56 transform: translateY(-50%); 59 transform: translateY(-50%);
57 } 60 }
61 +
62 +.wrapper {
63 + margin-top: 5rem;
64 + flex-grow: 1;
65 + &.xs {
66 + margin-top: 7rem;
67 + }
68 +}
58 </style> 69 </style>
......
1 /* 1 /*
2 * @Date: 2022-07-26 09:49:54 2 * @Date: 2022-07-26 09:49:54
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-09-30 09:44:55 4 + * @LastEditTime: 2024-10-10 13:53:54
5 * @FilePath: /hager/src/common/mixin.js 5 * @FilePath: /hager/src/common/mixin.js
6 * @Description: 文件描述 6 * @Description: 文件描述
7 */ 7 */
8 8
9 +import $ from 'jquery';
10 +
9 export default { 11 export default {
10 // 初始化设置 12 // 初始化设置
11 init: { 13 init: {
12 mounted () { 14 mounted () {
13 document.title = this.$route.meta.title; 15 document.title = this.$route.meta.title;
16 + // 页面进入时获取当前屏幕宽度
17 + this.handleResize();
18 + // 监听窗口的 resize 事件
19 + window.addEventListener('resize', this.handleResize);
20 + },
21 + beforeDestroy() {
22 + // 在组件销毁前移除监听器，防止内存泄漏
23 + window.removeEventListener('resize', this.handleResize);
14 }, 24 },
15 data () { 25 data () {
16 return { 26 return {
17 top_img_height: '35rem', 27 top_img_height: '35rem',
28 + screenWidth: $('.hagerBox').width(), // 初始化屏幕宽度, xs <768px
18 }; 29 };
19 }, 30 },
31 + computed: {
32 + is_xs () {
33 + return this.screenWidth < 768;
34 + }
35 + },
20 methods: { 36 methods: {
37 + handleResize() {
38 + this.screenWidth = $('.hagerBox').width(); // 更新屏幕宽度
39 + },
21 }, 40 },
22 }, 41 },
23 }; 42 };
......
1 <!-- 1 <!--
2 * @Date: 2024-09-29 10:07:11 2 * @Date: 2024-09-29 10:07:11
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-10-09 15:37:00 4 + * @LastEditTime: 2024-10-10 13:54:50
5 * @FilePath: /hager/src/components/common/hagerH1.vue 5 * @FilePath: /hager/src/components/common/hagerH1.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -36,14 +36,8 @@ export default { ...@@ -36,14 +36,8 @@ export default {
36 this.screen_width = val; 36 this.screen_width = val;
37 } 37 }
38 }, 38 },
39 - computed: {
40 - is_xs () {
41 - return this.screen_width < 768;
42 - }
43 - },
44 data () { 39 data () {
45 return { 40 return {
46 - // is_xs: false,
47 screen_width: 0, 41 screen_width: 0,
48 } 42 }
49 }, 43 },
......
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-30 17:21:13 4 + * @LastEditTime: 2024-10-10 13:55:13
5 * @FilePath: /hager/src/components/common/hagerHeader.vue 5 * @FilePath: /hager/src/components/common/hagerHeader.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
8 <template> 8 <template>
9 <div class="hager-header"> 9 <div class="hager-header">
10 <el-row class="hidden-xs-only" style="background-color: #fff;"> 10 <el-row class="hidden-xs-only" style="background-color: #fff;">
11 - <el-col :sm="2" :md="2" :lg="3" :xl="4">&nbsp;</el-col> 11 + <el-col :sm="1" :md="1" :lg="3" :xl="4">&nbsp;</el-col>
12 - <el-col :sm="20" :md="20" :lg="18" :xl="16" style="position: relative;height: 5rem;"> 12 + <el-col :sm="22" :md="22" :lg="18" :xl="16" style="position: relative;height: 5rem;">
13 <el-row> 13 <el-row>
14 <el-col :sm="16" :md="16" :lg="16" :xl="16"> 14 <el-col :sm="16" :md="16" :lg="16" :xl="16">
15 <div class="nav-wrapper"> 15 <div class="nav-wrapper">
...@@ -24,22 +24,28 @@ ...@@ -24,22 +24,28 @@
24 </div> 24 </div>
25 </el-col> 25 </el-col>
26 <el-col :sm="8" :md="8" :lg="8" :xl="8"> 26 <el-col :sm="8" :md="8" :lg="8" :xl="8">
27 - <div class="nav-right"> 27 + <el-row class="nav-right">
28 - <div class="search"> 28 + <el-col :sm="18" :md="18" :lg="18" :xl="18">
29 - <i class=el-icon-search></i>&nbsp; 29 + <div class="search">
30 - <input style="border: 0;background-color: #e3f1f7;" placeholder="搜索" /> 30 + <i class=el-icon-search></i>&nbsp;
31 - </div> 31 + <input style="border: 0;background-color: #e3f1f7; width: 100%;" placeholder="搜索" />
32 - <div @click="goToWeb" class="tooltip"> 32 + </div>
33 - <el-tooltip class="item" effect="dark" content="国际站" placement="bottom"> 33 + </el-col>
34 - <i class=el-icon-orange style="font-size: 1.25rem;"></i> 34 + <el-col :sm="3" :md="3" :lg="3" :xl="3">
35 - </el-tooltip> 35 + <div @click="goToWeb" class="tooltip">
36 - </div> 36 + <el-tooltip class="item" effect="dark" content="国际站" placement="bottom">
37 - <div @click="goToLogin" class="tooltip"> 37 + <i class=el-icon-orange style="font-size: 1.25rem;"></i>
38 - <el-tooltip class="item" effect="dark" content="用户登录" placement="bottom"> 38 + </el-tooltip>
39 - <i class=el-icon-user style="font-size: 1.25rem;"></i> 39 + </div>
40 - </el-tooltip> 40 + </el-col>
41 - </div> 41 + <el-col :sm="3" :md="3" :lg="3" :xl="3">
42 - </div> 42 + <div @click="goToLogin" class="tooltip">
43 + <el-tooltip class="item" effect="dark" content="用户登录" placement="bottom">
44 + <i class=el-icon-user style="font-size: 1.25rem;"></i>
45 + </el-tooltip>
46 + </div>
47 + </el-col>
48 + </el-row>
43 </el-col> 49 </el-col>
44 </el-row> 50 </el-row>
45 <el-collapse-transition> 51 <el-collapse-transition>
...@@ -76,16 +82,40 @@ ...@@ -76,16 +82,40 @@
76 </div> 82 </div>
77 </el-collapse-transition> 83 </el-collapse-transition>
78 </el-col> 84 </el-col>
79 - <el-col :sm="2" :md="2" :lg="3" :xl="4">&nbsp;</el-col> 85 + <el-col :sm="1" :md="1" :lg="3" :xl="4">&nbsp;</el-col>
80 </el-row> 86 </el-row>
87 + <div v-if="is_xs" style="background-color: #fff; padding: 0.5rem 1rem;">
88 + <div style="display: flex; align-items: center;justify-content: space-between;">
89 + <div @click="openMenu"><i class="el-icon-menu"></i></div>
90 + <div>
91 + <el-image style="height: 2rem;" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="cover"></el-image>
92 + </div>
93 + <div>
94 + <i class=el-icon-orange style="font-size: 1.25rem;"></i>
95 + <i class=el-icon-user style="font-size: 1.25rem;"></i>
96 + </div>
97 + </div>
98 + <div style="display: flex; align-items: center; border-radius: 1rem; border: 1px solid #f5f5f5; background-color: #e3f1f7; padding: 0.5rem 1rem; margin-top: 1rem;">
99 + <i class=el-icon-search></i>&nbsp;
100 + <input style="border: 0;background-color: #e3f1f7;" placeholder="搜索" />
101 + </div>
102 + <el-collapse-transition>
103 + <div v-show="show_menu" class="menu-mini">
104 + <hager-menu @close="closeMiniMenu"></hager-menu>
105 + </div>
106 + </el-collapse-transition>
107 + </div>
81 </div> 108 </div>
82 </template> 109 </template>
83 110
84 <script> 111 <script>
85 import mixin from 'common/mixin'; 112 import mixin from 'common/mixin';
86 import { parseQueryString } from '@/utils/tools'; 113 import { parseQueryString } from '@/utils/tools';
114 +import $ from 'jquery';
115 +import hagerMenu from '../hagerMenu.vue';
87 116
88 export default { 117 export default {
118 + components: { hagerMenu },
89 mixins: [mixin.init], 119 mixins: [mixin.init],
90 data () { 120 data () {
91 return { 121 return {
...@@ -227,12 +257,13 @@ export default { ...@@ -227,12 +257,13 @@ export default {
227 product_info: {}, 257 product_info: {},
228 is_active: '', 258 is_active: '',
229 p_index: 0, 259 p_index: 0,
260 + show_menu: false,
230 } 261 }
231 }, 262 },
232 mounted () { 263 mounted () {
233 this.product_info = this.product_menu[0]['info']; 264 this.product_info = this.product_menu[0]['info'];
234 // 修改数据结构显示 265 // 修改数据结构显示
235 - this.product_info.product = this.splitProductList(this.product_info.product) 266 + this.product_info.product = this.splitProductList(this.product_info.product);
236 }, 267 },
237 watch: { 268 watch: {
238 '$route' (to, from) { 269 '$route' (to, from) {
...@@ -319,6 +350,18 @@ export default { ...@@ -319,6 +350,18 @@ export default {
319 path: '/login' 350 path: '/login'
320 }); 351 });
321 }, 352 },
353 + openMenu () {
354 + this.show_menu = !this.show_menu;
355 + if (this.show_menu) {
356 + $('body').css('overflow', 'hidden');
357 + } else {
358 + $('body').css('overflow', 'auto');
359 + }
360 + },
361 + closeMiniMenu () {
362 + this.show_menu = false;
363 + $('body').css('overflow', 'auto');
364 + }
322 } 365 }
323 } 366 }
324 </script> 367 </script>
...@@ -444,5 +487,15 @@ export default { ...@@ -444,5 +487,15 @@ export default {
444 } 487 }
445 } 488 }
446 } 489 }
490 +
491 + .menu-mini {
492 + position: absolute;
493 + top: 6.7rem;
494 + right: 0;
495 + left: 0;
496 + width: 100vw;
497 + height: calc(100vh - 6.7rem);
498 + background-color: #F7F7F7;
499 + }
447 } 500 }
448 </style> 501 </style>
......
1 +<!--
2 + * @Date: 2024-10-10 10:37:16
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2024-10-10 13:58:53
5 + * @FilePath: /hager/src/components/hagerMenu.vue
6 + * @Description: 文件描述
7 +-->
8 +<template>
9 + <div class="hager-menu-page">
10 + <div class="menu">
11 + <div v-for="(item, index) in menuData" :key="item.id" class="menu-item">
12 + <!-- 一级菜单 -->
13 + <div @click="toggleMenu(item.id)" :class="['menu-label', activeMenu === item.id ? 'active' : '']">
14 + <div>
15 + <i class="el-icon-s-cooperation"></i>
16 + {{ item.label }}
17 + </div>
18 + <div>
19 + <i v-if="isActive(item.id)" class="el-icon-arrow-up" style="font-size: 1.25rem;"></i>
20 + <i v-else class="el-icon-arrow-down" style="font-size: 1.25rem;"></i>
21 + </div>
22 + </div>
23 +
24 + <!-- 二级菜单 -->
25 + <div v-if="isActive(item.id)" class="submenu">
26 + <div v-for="subItem in item.subItems" :key="subItem.id" class="submenu-item">
27 + <div class="submenu-label">
28 + <div @click="goToSub(subItem.id)"> {{ subItem.label }} </div>
29 + <div @click="toggleSubMenu(subItem.id)">
30 + <i v-if="isSubActive(subItem.id)" class="el-icon-arrow-up" style="font-size: 1.25rem;"></i>
31 + <i v-else class="el-icon-arrow-down" style="font-size: 1.25rem;"></i>
32 + </div>
33 + </div>
34 +
35 + <!-- 三级菜单 -->
36 + <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">
38 + {{ thirdItem.label }}
39 + </div>
40 + </div>
41 + </div>
42 + </div>
43 + </div>
44 + </div>
45 + </div>
46 +</template>
47 +
48 +<script>
49 +import mixin from 'common/mixin';
50 +
51 +export default {
52 + mixins: [mixin.init],
53 + data() {
54 + return {
55 + // 模拟的树形菜单数据
56 + menuData: [
57 + {
58 + id: 1,
59 + label: '配电产品',
60 + subItems: [
61 + {
62 + id: 11,
63 + label: '空气断路器1',
64 + subItems: [
65 + { id: 111, label: 'HW系列空气断路器' },
66 + { id: 112, label: 'HW+系列空气断路器' },
67 + { id: 113, label: 'HW系列空气断路器' },
68 + { id: 114, label: 'HW+系列空气断路器' },
69 + { id: 115, label: 'HW系列空气断路器' },
70 + { id: 116, label: 'HW+系列空气断路器' },
71 + { id: 117, label: 'HW系列空气断路器' },
72 + { id: 118, label: 'HW+系列空气断路器' },
73 + { id: 119, label: 'HW系列空气断路器' },
74 + { id: 1121, label: 'HW+系列空气断路器' },
75 + { id: 1117, label: 'HW系列空气断路器' },
76 + { id: 1127, label: 'HW+系列空气断路器' },
77 + { id: 1137, label: 'HW系列空气断路器' },
78 + { id: 1147, label: 'HW+系列空气断路器' },
79 + { id: 1157, label: 'HW系列空气断路器' },
80 + { id: 1167, label: 'HW+系列空气断路器' },
81 + { id: 7117, label: 'HW系列空气断路器' },
82 + { id: 7118, label: 'HW+系列空气断路器' },
83 + { id: 7119, label: 'HW系列空气断路器' },
84 + { id: 71121, label: 'HW+系列空气断路器' },
85 + ],
86 + },
87 + {
88 + id: 12,
89 + label: '空气断路器2',
90 + subItems: [
91 + { id: 111, label: 'HW系列空气断路器' },
92 + { id: 112, label: 'HW+系列空气断路器' },
93 + { id: 113, label: 'HW系列空气断路器' },
94 + { id: 114, label: 'HW+系列空气断路器' },
95 + { id: 115, label: 'HW系列空气断路器' },
96 + { id: 116, label: 'HW+系列空气断路器' },
97 + { id: 117, label: 'HW系列空气断路器' },
98 + { id: 118, label: 'HW+系列空气断路器' },
99 + { id: 119, label: 'HW系列空气断路器' },
100 + { id: 1121, label: 'HW+系列空气断路器' },
101 + ],
102 + },
103 + ],
104 + },
105 + {
106 + id: 2,
107 + label: '成套产品',
108 + subItems: [
109 + {
110 + id: 21,
111 + label: '塑壳断路器',
112 + subItems: [
113 + { id: 211, label: '自动转换开关' },
114 + { id: 212, label: '接触器及热过载继电器' },
115 + // 更多三级菜单项...
116 + ],
117 + },
118 + // 更多二级菜单项...
119 + ],
120 + },
121 + // 更多一级菜单项...
122 + ],
123 + activeMenu: null, // 当前展开的一级菜单ID
124 + activeSubMenu: null, // 当前展开的二级菜单ID
125 + };
126 + },
127 + mounted () {
128 +
129 + },
130 + methods: {
131 + // 切换一级菜单展开状态
132 + toggleMenu(menuId) {
133 + if (this.activeMenu === menuId) {
134 + this.activeMenu = null; // 如果已展开，点击后关闭
135 + this.activeSubMenu = null; // 同时关闭二级菜单
136 + } else {
137 + this.activeMenu = menuId; // 展开新的一级菜单
138 + this.activeSubMenu = null; // 同时重置二级菜单
139 + }
140 + },
141 +
142 + // 切换二级菜单展开状态
143 + toggleSubMenu(subMenuId) {
144 + if (this.activeSubMenu === subMenuId) {
145 + this.activeSubMenu = null; // 如果已展开，点击后关闭
146 + } else {
147 + this.activeSubMenu = subMenuId; // 展开新的二级菜单
148 + }
149 + },
150 +
151 + // 判断一级菜单是否为激活状态
152 + isActive(menuId) {
153 + return this.activeMenu === menuId;
154 + },
155 +
156 + // 判断二级菜单是否为激活状态
157 + isSubActive(subMenuId) {
158 + return this.activeSubMenu === subMenuId;
159 + },
160 +
161 + goToSub(id) {
162 + console.warn(id);
163 + this.$emit('close');
164 + this.$router.push({
165 + path: '/product/index',
166 + query: {
167 + id: id
168 + }
169 + })
170 + },
171 + goToThird(id) {
172 + console.warn(id);
173 + this.$emit('close');
174 + this.$router.push({
175 + path: '/product/detail',
176 + query: {
177 + id: id
178 + }
179 + })
180 + },
181 + }
182 +}
183 +</script>
184 +
185 +<style lang="less" scoped>
186 +.hager-menu-page {
187 + height: 100%;
188 + overflow: scroll;
189 + .menu {
190 + width: 100%;
191 + }
192 +
193 + .menu-item {
194 + cursor: pointer;
195 + }
196 +
197 + .menu-label {
198 + font-weight: bold;
199 + padding: 1rem;
200 + display: flex;
201 + align-items: center;
202 + justify-content: space-between;
203 + &.active {
204 + background-color: #FFF;
205 + }
206 + }
207 +
208 + .submenu {
209 + margin-left: 20px;
210 + }
211 +
212 + .submenu-item {
213 + padding: 5px 0;
214 + cursor: pointer;
215 + .submenu-label {
216 + padding: 0.5rem 1rem;
217 + padding-bottom: 0;
218 + display: flex;
219 + align-items: center;
220 + justify-content: space-between;
221 + }
222 + }
223 +
224 + .third-menu {
225 + margin-left: 20px;
226 + // color: #555;
227 + }
228 +
229 + .third-item {
230 + margin: 0.6rem 1rem 0.3rem;
231 + cursor: pointer;
232 + overflow: hidden;
233 + text-overflow: ellipsis;
234 + line-clamp: 1;
235 + display: -webkit-box;
236 + -webkit-line-clamp: 1;
237 + -webkit-box-orient: vertical;
238 + &:hover {
239 + color: #EE6D10;
240 + text-decoration: underline;
241 + }
242 + }
243 +}
244 +</style>
1 <!-- 1 <!--
2 * @Date: 2024-08-27 10:06:30 2 * @Date: 2024-08-27 10:06:30
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-10-09 17:43:10 4 + * @LastEditTime: 2024-10-10 13:52:00
5 * @FilePath: /hager/src/views/index.vue 5 * @FilePath: /hager/src/views/index.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -50,7 +50,6 @@ ...@@ -50,7 +50,6 @@
50 <hager-h1 title="解决方案" sub="Solution"></hager-h1> 50 <hager-h1 title="解决方案" sub="Solution"></hager-h1>
51 <div :class="['hager-solution', is_xs ? 'xs' : '']"> 51 <div :class="['hager-solution', is_xs ? 'xs' : '']">
52 <div @click="goToSolution(item)" :class="['solution-item', is_xs ? 'xs' : '']" :style="{ backgroundImage: 'url('+item.src+')' }" v-for="(item, index) in solution_list" :key="index"><p>{{ item.title }}</p></div> 52 <div @click="goToSolution(item)" :class="['solution-item', is_xs ? 'xs' : '']" :style="{ backgroundImage: 'url('+item.src+')' }" v-for="(item, index) in solution_list" :key="index"><p>{{ item.title }}</p></div>
53 - <!-- <div v-if="!is_xs" class="solution-item other">Other解决方案</div> -->
54 </div> 53 </div>
55 <div class="xs-control" v-if="is_xs"> 54 <div class="xs-control" v-if="is_xs">
56 <div><i class="el-icon-arrow-left" @click="prevBtn(solution_list)"></i> <i class="el-icon-arrow-right" @click="nextBtn(solution_list)"></i></div> 55 <div><i class="el-icon-arrow-left" @click="prevBtn(solution_list)"></i> <i class="el-icon-arrow-right" @click="nextBtn(solution_list)"></i></div>
...@@ -136,7 +135,7 @@ export default { ...@@ -136,7 +135,7 @@ export default {
136 content: '11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整', 135 content: '11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整',
137 sub: 'o Ehe gy aha oid asto Ehe gy aha oid asto Ehe gy aha oid ast' 136 sub: 'o Ehe gy aha oid asto Ehe gy aha oid asto Ehe gy aha oid ast'
138 }], 137 }],
139 - is_xs: false, 138 + // is_xs: false,
140 screen_width: 0, 139 screen_width: 0,
141 solution_list: [{ 140 solution_list: [{
142 src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', 141 src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
...@@ -194,7 +193,7 @@ export default { ...@@ -194,7 +193,7 @@ export default {
194 }); 193 });
195 }, 194 },
196 handleScreenWidth(width) { 195 handleScreenWidth(width) {
197 - this.is_xs = width < 768; 196 + // this.is_xs = width < 768;
198 this.screen_width = width; 197 this.screen_width = width;
199 }, 198 },
200 prevBtn (list) { 199 prevBtn (list) {
...@@ -267,7 +266,7 @@ export default { ...@@ -267,7 +266,7 @@ export default {
267 &.xs { 266 &.xs {
268 display: flex; 267 display: flex;
269 overflow: hidden; /* 超出部分隐藏 */ 268 overflow: hidden; /* 超出部分隐藏 */
270 - width: 100vw; /* 容器宽度适应屏幕 */ 269 + width: calc(100vw - 1rem); /* 容器宽度适应屏幕 */
271 gap: 1rem; 270 gap: 1rem;
272 } 271 }
273 .solution-item { 272 .solution-item {
...@@ -367,7 +366,7 @@ export default { ...@@ -367,7 +366,7 @@ export default {
367 &.xs { 366 &.xs {
368 display: flex; 367 display: flex;
369 overflow: hidden; /* 超出部分隐藏 */ 368 overflow: hidden; /* 超出部分隐藏 */
370 - width: 100vw; /* 容器宽度适应屏幕 */ 369 + width: calc(100vw - 1rem); /* 容器宽度适应屏幕 */
371 gap: 1rem; 370 gap: 1rem;
372 } 371 }
373 .product-item { 372 .product-item {
......