Hooke / hager

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
225380cd 1 parent 15bda2ba

✨ feat(首页产品中心): 自适应改造

Inline Side-by-side
Showing 2 changed files with 60 additions and 22 deletions
......@@ -6,7 +6,7 @@
* @Description: 文件描述
-->
<template>
<div :class="['hagerH1', is_xs ? 'xs' : '']">
<div :class="['hagerH1']">
<p class="h1">{{ title }}</p>
<p class="sub">{{ sub }}</p>
</div>
......
<!--
* @Date: 2024-08-27 10:06:30
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-10-09 16:42:27
* @LastEditTime: 2024-10-09 17:43:10
* @FilePath: /hager/src/views/index.vue
* @Description: 文件描述
-->
......@@ -47,25 +47,28 @@
</div>
</hager-box>
<hager-box class="box-2n" @screen-width="handleScreenWidth">
<hager-h1 title="解决方案" sub="Solution" :width="screen_width"></hager-h1>
<hager-h1 title="解决方案" sub="Solution"></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 @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>
<!-- <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><i class="el-icon-arrow-left" @click="prevBtn(solution_list)"></i> <i class="el-icon-arrow-right" @click="nextBtn(solution_list)"></i></div>
</div>
</hager-box>
<hager-box class="box-n">
<hager-h1 title="产品中心" sub="Product Center"></hager-h1>
<div class="hager-product-center">
<div v-for="(item, index) in 4" :key="index" class="product-item">
<el-image style="width: 14rem; height: 14rem;" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="fit"></el-image>
<p style="margin-top: 1rem;">atS三型特决井天</p>
<div :class="['hager-product-center', is_xs ? 'xs' : '']">
<div v-for="(item, index) in product_list" :key="index" :class="['product-item', is_xs ? 'xs' : '']">
<el-image style="height: 14rem;" :src="item.src" fit="cover"></el-image>
<p style="margin-top: 1rem;">{{ item.title }}</p>
</div>
</div>
<div style="display: flex; justify-content: center; margin-top: 2rem;">
<div :class="['hager-product-center-more', is_xs ? 'xs' : '']">
<hager-more></hager-more>
<div class="xs-control" v-if="is_xs">
<div><i class="el-icon-arrow-left" @click="prevBtn(product_list)"></i> <i class="el-icon-arrow-right" @click="nextBtn(product_list)"></i></div>
</div>
</div>
</hager-box>
<hager-box class="box-2n">
......@@ -147,7 +150,20 @@ export default {
}, {
src: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
title: '4住宅解决方案'
}]
}],
product_list: [{
src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
title: '三型特决井天'
}, {
src: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
title: '三型特决井天'
}, {
src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
title: '三型特决井天'
}, {
src: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
title: '三型特决井天'
}],
}
},
async mounted () {
......@@ -181,13 +197,13 @@ export default {
this.is_xs = width < 768;
this.screen_width = width;
},
prevBtn () {
const last = this.solution_list.pop(); // 移除最后一个元素
this.solution_list.unshift(last); // 将最后一个元素添加到数组开头
prevBtn (list) {
const last = list.pop(); // 移除最后一个元素
list.unshift(last); // 将最后一个元素添加到数组开头
},
nextBtn () {
const first = this.solution_list.shift(); // 移除第一个元素
this.solution_list.push(first); // 将第一个元素添加到数组末尾
nextBtn (list) {
const first = list.shift(); // 移除第一个元素
list.push(first); // 将第一个元素添加到数组末尾
},
},
}
......@@ -267,7 +283,7 @@ export default {
// transition: transform 0.3s ease-in-out;
&:hover {
// transform: scale(1.05);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
// box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
cursor: pointer;
}
&.other {
......@@ -342,11 +358,18 @@ export default {
}
}
}
.hager-product-center {
margin-top: 2rem;
display: grid;
grid-template-columns: repeat(4, 1fr); /* 一行显示4个 */
gap: 1.5rem; /* 每个项目之间的间距 */
&.xs {
display: flex;
overflow: hidden; /* 超出部分隐藏 */
width: 100vw; /* 容器宽度适应屏幕 */
gap: 1rem;
}
.product-item {
height: auto;
padding: 1.5rem;
......@@ -354,13 +377,28 @@ export default {
color: #333;
border-radius: 8px;
background-color: #f3f3f3;
transition: transform 0.3s ease-in-out;
// transition: transform 0.3s ease-in-out;
&:hover {
cursor: pointer;
transform: scale(1.05);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
// transform: scale(1.05);
// box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
&.xs {
flex: 0 0 50vw; /* 每个子元素宽度为屏幕宽度的一半 (显示2个元素) */
// padding: 0 20px;
// box-sizing: border-box;
}
}
}
.hager-product-center-more {
display: flex;
justify-content: center;
margin-top: 2rem;
&.xs {
justify-content: space-between;
padding-left: 20%;
}
}
}
</style>
......