Hooke / hager

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
15bda2ba 1 parent 3bfa5393

✨ feat: 测试xs尺寸下，单个模块显示处理

Inline Side-by-side
Showing 5 changed files with 110 additions and 22 deletions
...@@ -13,6 +13,7 @@ ...@@ -13,6 +13,7 @@
13 "axios": "^1.7.5", 13 "axios": "^1.7.5",
14 "dayjs": "^1.11.13", 14 "dayjs": "^1.11.13",
15 "element-ui": "^2.15.14", 15 "element-ui": "^2.15.14",
16 + "jquery": "^3.7.1",
16 "mui-player": "^1.8.1", 17 "mui-player": "^1.8.1",
17 "sass": "1.55.0", 18 "sass": "1.55.0",
18 "vue": "2.7.13", 19 "vue": "2.7.13",
......
1 <!-- 1 <!--
2 * @Date: 2024-09-26 17:15:15 2 * @Date: 2024-09-26 17:15:15
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-09-26 17:15:27 4 + * @LastEditTime: 2024-10-09 15:36:42
5 * @FilePath: /hager/src/components/common/hagerBox.vue 5 * @FilePath: /hager/src/components/common/hagerBox.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
8 <template> 8 <template>
9 <div class="hagerBox"> 9 <div class="hagerBox">
10 <el-row> 10 <el-row>
11 - <el-col :sm="2" :md="2" :lg="3" :xl="4">&nbsp;</el-col> 11 + <el-col :xs="1" :sm="2" :md="2" :lg="3" :xl="4">&nbsp;</el-col>
12 - <el-col :sm="20" :md="20" :lg="18" :xl="16"> 12 + <el-col :xs="22" :sm="20" :md="20" :lg="18" :xl="16">
13 <slot></slot> 13 <slot></slot>
14 </el-col> 14 </el-col>
15 - <el-col :sm="2" :md="2" :lg="3" :xl="4">&nbsp;</el-col> 15 + <el-col :xs="1" :sm="2" :md="2" :lg="3" :xl="4">&nbsp;</el-col>
16 </el-row> 16 </el-row>
17 </div> 17 </div>
18 </template> 18 </template>
19 19
20 <script> 20 <script>
21 import mixin from 'common/mixin'; 21 import mixin from 'common/mixin';
22 +import $ from 'jquery';
22 23
23 export default { 24 export default {
24 mixins: [mixin.init], 25 mixins: [mixin.init],
25 data () { 26 data () {
26 return { 27 return {
27 - 28 + screenWidth: $('.hagerBox').width(), // 初始化屏幕宽度, xs <768px
28 } 29 }
29 }, 30 },
30 mounted () { 31 mounted () {
32 + // 页面进入时获取当前屏幕宽度
33 + this.handleResize();
31 34
35 + // 监听窗口的 resize 事件
36 + window.addEventListener('resize', this.handleResize);
32 }, 37 },
33 methods: { 38 methods: {
34 - 39 + handleResize() {
40 + this.screenWidth = $('.hagerBox').width(); // 更新屏幕宽度
41 + // 通过 emit 发送事件 'screen-width' 和数据
42 + this.$emit('screen-width', this.screenWidth);
43 + },
44 + },
45 + beforeDestroy() {
46 + // 在组件销毁前移除监听器，防止内存泄漏
47 + window.removeEventListener('resize', this.handleResize);
35 } 48 }
36 } 49 }
37 </script> 50 </script>
......
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-09-30 10:06:04 4 + * @LastEditTime: 2024-10-09 15:37:00
5 * @FilePath: /hager/src/components/common/hagerH1.vue 5 * @FilePath: /hager/src/components/common/hagerH1.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
8 <template> 8 <template>
9 - <div class="hagerH1"> 9 + <div :class="['hagerH1', is_xs ? 'xs' : '']">
10 <p class="h1">{{ title }}</p> 10 <p class="h1">{{ title }}</p>
11 <p class="sub">{{ sub }}</p> 11 <p class="sub">{{ sub }}</p>
12 </div> 12 </div>
...@@ -25,11 +25,26 @@ export default { ...@@ -25,11 +25,26 @@ export default {
25 sub: { 25 sub: {
26 type: String, 26 type: String,
27 default: '副标题' 27 default: '副标题'
28 + },
29 + width: {
30 + type: Number,
31 + default: 0
32 + }
33 + },
34 + watch: {
35 + width (val) {
36 + this.screen_width = val;
37 + }
38 + },
39 + computed: {
40 + is_xs () {
41 + return this.screen_width < 768;
28 } 42 }
29 }, 43 },
30 data () { 44 data () {
31 return { 45 return {
32 - 46 + // is_xs: false,
47 + screen_width: 0,
33 } 48 }
34 }, 49 },
35 mounted () { 50 mounted () {
...@@ -43,6 +58,9 @@ export default { ...@@ -43,6 +58,9 @@ export default {
43 58
44 <style lang="less" scoped> 59 <style lang="less" scoped>
45 .hagerH1 { 60 .hagerH1 {
61 + // &.xs {
62 + // padding: 0 1rem;
63 + // }
46 .h1 { 64 .h1 {
47 color: @secondary-color; 65 color: @secondary-color;
48 font-size: 1.75rem; 66 font-size: 1.75rem;
......
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-09-30 16:57:53 4 + * @LastEditTime: 2024-10-09 16:42:27
5 * @FilePath: /hager/src/views/index.vue 5 * @FilePath: /hager/src/views/index.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -46,10 +46,14 @@ ...@@ -46,10 +46,14 @@
46 </div> 46 </div>
47 </div> 47 </div>
48 </hager-box> 48 </hager-box>
49 - <hager-box class="box-2n"> 49 + <hager-box class="box-2n" @screen-width="handleScreenWidth">
50 - <hager-h1 title="解决方案" sub="Solution"></hager-h1> 50 + <hager-h1 title="解决方案" sub="Solution" :width="screen_width"></hager-h1>
51 - <div class="hager-solution"> 51 + <div :class="['hager-solution', is_xs ? 'xs' : '']">
52 - <div @click="goToSolution(item)" class="solution-item" v-for="(item, index) in 10" :key="index"><p>住宅解决方案</p></div> 52 + <div @click="goToSolution(item)" class="solution-item 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>
55 + <div class="xs-control" v-if="is_xs">
56 + <div><i class="el-icon-arrow-left" @click="prevBtn"></i> <i class="el-icon-arrow-right" @click="nextBtn"></i></div>
53 </div> 57 </div>
54 </hager-box> 58 </hager-box>
55 <hager-box class="box-n"> 59 <hager-box class="box-n">
...@@ -128,6 +132,21 @@ export default { ...@@ -128,6 +132,21 @@ export default {
128 title: '获奖+1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀', 132 title: '获奖+1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀',
129 content: '11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整', 133 content: '11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整',
130 sub: 'o Ehe gy aha oid asto Ehe gy aha oid asto Ehe gy aha oid ast' 134 sub: 'o Ehe gy aha oid asto Ehe gy aha oid asto Ehe gy aha oid ast'
135 + }],
136 + is_xs: false,
137 + screen_width: 0,
138 + solution_list: [{
139 + src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
140 + title: '1住宅解决方案'
141 + }, {
142 + src: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
143 + title: '2住宅解决方案'
144 + }, {
145 + src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
146 + title: '3住宅解决方案'
147 + }, {
148 + src: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
149 + title: '4住宅解决方案'
131 }] 150 }]
132 } 151 }
133 }, 152 },
...@@ -157,8 +176,20 @@ export default { ...@@ -157,8 +176,20 @@ export default {
157 this.$router.push({ 176 this.$router.push({
158 path: '/solution/detail' 177 path: '/solution/detail'
159 }); 178 });
160 - } 179 + },
161 - } 180 + handleScreenWidth(width) {
181 + this.is_xs = width < 768;
182 + this.screen_width = width;
183 + },
184 + prevBtn () {
185 + const last = this.solution_list.pop(); // 移除最后一个元素
186 + this.solution_list.unshift(last); // 将最后一个元素添加到数组开头
187 + },
188 + nextBtn () {
189 + const first = this.solution_list.shift(); // 移除第一个元素
190 + this.solution_list.push(first); // 将第一个元素添加到数组末尾
191 + },
192 + },
162 } 193 }
163 </script> 194 </script>
164 195
...@@ -209,9 +240,6 @@ export default { ...@@ -209,9 +240,6 @@ export default {
209 font-size: 3rem; 240 font-size: 3rem;
210 } 241 }
211 } 242 }
212 - .text {
213 -
214 - }
215 } 243 }
216 } 244 }
217 } 245 }
...@@ -220,6 +248,12 @@ export default { ...@@ -220,6 +248,12 @@ export default {
220 display: grid; 248 display: grid;
221 grid-template-columns: repeat(4, 1fr); /* 一行显示4个 */ 249 grid-template-columns: repeat(4, 1fr); /* 一行显示4个 */
222 gap: 1.5rem; /* 每个项目之间的间距 */ 250 gap: 1.5rem; /* 每个项目之间的间距 */
251 + &.xs {
252 + display: flex;
253 + overflow: hidden; /* 超出部分隐藏 */
254 + width: 100vw; /* 容器宽度适应屏幕 */
255 + gap: 1rem;
256 + }
223 .solution-item { 257 .solution-item {
224 position: relative; 258 position: relative;
225 height: 12rem; 259 height: 12rem;
...@@ -227,12 +261,12 @@ export default { ...@@ -227,12 +261,12 @@ export default {
227 text-align: center; 261 text-align: center;
228 color: #FFF; 262 color: #FFF;
229 border-radius: 8px; 263 border-radius: 8px;
230 - background-image: url('https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'); 264 + // background-image: url('https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg');
231 background-size: cover; 265 background-size: cover;
232 background-position: center; 266 background-position: center;
233 - transition: transform 0.3s ease-in-out; 267 + // transition: transform 0.3s ease-in-out;
234 &:hover { 268 &:hover {
235 - transform: scale(1.05); 269 + // transform: scale(1.05);
236 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 270 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
237 cursor: pointer; 271 cursor: pointer;
238 } 272 }
...@@ -256,6 +290,23 @@ export default { ...@@ -256,6 +290,23 @@ export default {
256 background-color: rgba(0, 0, 0, 0.2); 290 background-color: rgba(0, 0, 0, 0.2);
257 line-height: 2rem; 291 line-height: 2rem;
258 } 292 }
293 + &.xs {
294 + flex: 0 0 50vw; /* 每个子元素宽度为屏幕宽度的一半 (显示2个元素) */
295 + // padding: 0 20px;
296 + // box-sizing: border-box;
297 + }
298 + }
299 + }
300 + .xs-control {
301 + display: flex;
302 + justify-content: flex-end;
303 + margin-top: 1rem;
304 + i {
305 + font-size: 1.35rem;
306 + color: #EE6D10;
307 + &:hover {
308 + cursor: pointer;
309 + }
259 } 310 }
260 } 311 }
261 .news-container { 312 .news-container {
......
...@@ -1823,6 +1823,11 @@ is-what@^3.14.1: ...@@ -1823,6 +1823,11 @@ is-what@^3.14.1:
1823 resolved "https://mirrors.cloud.tencent.com/npm/is-what/-/is-what-3.14.1.tgz#e1222f46ddda85dead0fd1c9df131760e77755c1" 1823 resolved "https://mirrors.cloud.tencent.com/npm/is-what/-/is-what-3.14.1.tgz#e1222f46ddda85dead0fd1c9df131760e77755c1"
1824 integrity sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA== 1824 integrity sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==
1825 1825
1826 +jquery@^3.7.1:
1827 + version "3.7.1"
1828 + resolved "https://mirrors.cloud.tencent.com/npm/jquery/-/jquery-3.7.1.tgz#083ef98927c9a6a74d05a6af02806566d16274de"
1829 + integrity sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==
1830 +
1826 js-tokens@^4.0.0: 1831 js-tokens@^4.0.0:
1827 version "4.0.0" 1832 version "4.0.0"
1828 resolved "https://mirrors.cloud.tencent.com/npm/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499" 1833 resolved "https://mirrors.cloud.tencent.com/npm/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
......