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 @@
"axios": "^1.7.5",
"dayjs": "^1.11.13",
"element-ui": "^2.15.14",
"jquery": "^3.7.1",
"mui-player": "^1.8.1",
"sass": "1.55.0",
"vue": "2.7.13",
......
<!--
* @Date: 2024-09-26 17:15:15
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-09-26 17:15:27
* @LastEditTime: 2024-10-09 15:36:42
* @FilePath: /hager/src/components/common/hagerBox.vue
* @Description: 文件描述
-->
<template>
<div class="hagerBox">
<el-row>
<el-col :sm="2" :md="2" :lg="3" :xl="4">&nbsp;</el-col>
<el-col :sm="20" :md="20" :lg="18" :xl="16">
<el-col :xs="1" :sm="2" :md="2" :lg="3" :xl="4">&nbsp;</el-col>
<el-col :xs="22" :sm="20" :md="20" :lg="18" :xl="16">
<slot></slot>
</el-col>
<el-col :sm="2" :md="2" :lg="3" :xl="4">&nbsp;</el-col>
<el-col :xs="1" :sm="2" :md="2" :lg="3" :xl="4">&nbsp;</el-col>
</el-row>
</div>
</template>
<script>
import mixin from 'common/mixin';
import $ from 'jquery';
export default {
mixins: [mixin.init],
data () {
return {
screenWidth: $('.hagerBox').width(), // 初始化屏幕宽度, xs <768px
}
},
mounted () {
// 页面进入时获取当前屏幕宽度
this.handleResize();
// 监听窗口的 resize 事件
window.addEventListener('resize', this.handleResize);
},
methods: {
handleResize() {
this.screenWidth = $('.hagerBox').width(); // 更新屏幕宽度
// 通过 emit 发送事件 'screen-width' 和数据
this.$emit('screen-width', this.screenWidth);
},
},
beforeDestroy() {
// 在组件销毁前移除监听器，防止内存泄漏
window.removeEventListener('resize', this.handleResize);
}
}
</script>
......
<!--
* @Date: 2024-09-29 10:07:11
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-09-30 10:06:04
* @LastEditTime: 2024-10-09 15:37:00
* @FilePath: /hager/src/components/common/hagerH1.vue
* @Description: 文件描述
-->
<template>
<div class="hagerH1">
<div :class="['hagerH1', is_xs ? 'xs' : '']">
<p class="h1">{{ title }}</p>
<p class="sub">{{ sub }}</p>
</div>
......@@ -25,11 +25,26 @@ export default {
sub: {
type: String,
default: '副标题'
},
width: {
type: Number,
default: 0
}
},
watch: {
width (val) {
this.screen_width = val;
}
},
computed: {
is_xs () {
return this.screen_width < 768;
}
},
data () {
return {
// is_xs: false,
screen_width: 0,
}
},
mounted () {
......@@ -43,6 +58,9 @@ export default {
<style lang="less" scoped>
.hagerH1 {
// &.xs {
// padding: 0 1rem;
// }
.h1 {
color: @secondary-color;
font-size: 1.75rem;
......
<!--
* @Date: 2024-08-27 10:06:30
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-09-30 16:57:53
* @LastEditTime: 2024-10-09 16:42:27
* @FilePath: /hager/src/views/index.vue
* @Description: 文件描述
-->
......@@ -46,10 +46,14 @@
</div>
</div>
</hager-box>
<hager-box class="box-2n">
<hager-h1 title="解决方案" sub="Solution"></hager-h1>
<div class="hager-solution">
<div @click="goToSolution(item)" class="solution-item" v-for="(item, index) in 10" :key="index"><p>住宅解决方案</p></div>
<hager-box class="box-2n" @screen-width="handleScreenWidth">
<hager-h1 title="解决方案" sub="Solution" :width="screen_width"></hager-h1>
<div :class="['hager-solution', is_xs ? 'xs' : '']">
<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>
<div v-if="!is_xs" class="solution-item other">Other解决方案</div>
</div>
<div class="xs-control" v-if="is_xs">
<div><i class="el-icon-arrow-left" @click="prevBtn"></i> <i class="el-icon-arrow-right" @click="nextBtn"></i></div>
</div>
</hager-box>
<hager-box class="box-n">
......@@ -128,6 +132,21 @@ export default {
title: '获奖+1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀',
content: '11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整',
sub: 'o Ehe gy aha oid asto Ehe gy aha oid asto Ehe gy aha oid ast'
}],
is_xs: false,
screen_width: 0,
solution_list: [{
src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
title: '1住宅解决方案'
}, {
src: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
title: '2住宅解决方案'
}, {
src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
title: '3住宅解决方案'
}, {
src: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
title: '4住宅解决方案'
}]
}
},
......@@ -157,8 +176,20 @@ export default {
this.$router.push({
path: '/solution/detail'
});
}
}
},
handleScreenWidth(width) {
this.is_xs = width < 768;
this.screen_width = width;
},
prevBtn () {
const last = this.solution_list.pop(); // 移除最后一个元素
this.solution_list.unshift(last); // 将最后一个元素添加到数组开头
},
nextBtn () {
const first = this.solution_list.shift(); // 移除第一个元素
this.solution_list.push(first); // 将第一个元素添加到数组末尾
},
},
}
</script>
......@@ -209,9 +240,6 @@ export default {
font-size: 3rem;
}
}
.text {
}
}
}
}
......@@ -220,6 +248,12 @@ export default {
display: grid;
grid-template-columns: repeat(4, 1fr); /* 一行显示4个 */
gap: 1.5rem; /* 每个项目之间的间距 */
&.xs {
display: flex;
overflow: hidden; /* 超出部分隐藏 */
width: 100vw; /* 容器宽度适应屏幕 */
gap: 1rem;
}
.solution-item {
position: relative;
height: 12rem;
......@@ -227,12 +261,12 @@ export default {
text-align: center;
color: #FFF;
border-radius: 8px;
background-image: url('https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg');
// background-image: url('https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg');
background-size: cover;
background-position: center;
transition: transform 0.3s ease-in-out;
// transition: transform 0.3s ease-in-out;
&:hover {
transform: scale(1.05);
// transform: scale(1.05);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
cursor: pointer;
}
......@@ -256,6 +290,23 @@ export default {
background-color: rgba(0, 0, 0, 0.2);
line-height: 2rem;
}
&.xs {
flex: 0 0 50vw; /* 每个子元素宽度为屏幕宽度的一半 (显示2个元素) */
// padding: 0 20px;
// box-sizing: border-box;
}
}
}
.xs-control {
display: flex;
justify-content: flex-end;
margin-top: 1rem;
i {
font-size: 1.35rem;
color: #EE6D10;
&:hover {
cursor: pointer;
}
}
}
.news-container {
......
......@@ -1823,6 +1823,11 @@ is-what@^3.14.1:
resolved "https://mirrors.cloud.tencent.com/npm/is-what/-/is-what-3.14.1.tgz#e1222f46ddda85dead0fd1c9df131760e77755c1"
integrity sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==
jquery@^3.7.1:
version "3.7.1"
resolved "https://mirrors.cloud.tencent.com/npm/jquery/-/jquery-3.7.1.tgz#083ef98927c9a6a74d05a6af02806566d16274de"
integrity sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==
js-tokens@^4.0.0:
version "4.0.0"
resolved "https://mirrors.cloud.tencent.com/npm/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
......