Hooke / hager

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
4d44f0f6 1 parent b83d2028

首页显示调整

Inline Side-by-side
Showing 1 changed file with 45 additions and 39 deletions
<!--
* @Date: 2024-08-27 10:06:30
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-10-17 11:12:56
* @LastEditTime: 2024-10-20 21:33:43
* @FilePath: /hager/src/views/index.vue
* @Description: 文件描述
* @Description: 首页
-->
<template>
<div class="hager-container">
......@@ -84,8 +84,9 @@
</div>
</hager-box>
<hager-box class="box-n">
<!-- TODO: 待完善, 产品分类跳转，没有更多分类了？ -->
<hager-h1 title="产品中心" sub="Product"></hager-h1>
<div v-if="!is_xs" class="hager-product-center">
<!-- <div v-if="!is_xs" class="hager-product-center">
<el-row :gutter="15">
<el-col :span="6" v-for="(item, index) in product_list" :key="index">
<div @click ="goToProduct(item)" class="product-item">
......@@ -97,17 +98,20 @@
<div class="more-box" style="margin-top: 2rem;">
<hager-more></hager-more>
</div>
</div>
<div v-else>
</div> -->
<div>
<swiper ref="myProductSwiper" class="swiper" :options="swiperOption" @slideChange="onProductSlideChange">
<swiper-slide v-for="(item, index) in product_list" :key="index">
<div @click="goToProduct(item)" class="product-item xs">
<div class="img" :style="{ height: '8rem', margin: '1rem', backgroundImage: 'url('+item.src+')' }"></div>
<div class="img" :style="{ height: '8rem', backgroundImage: 'url('+item.src+')' }"></div>
<p style="margin: 0.5rem;">{{ item.title }}</p>
</div>
</swiper-slide>
</swiper>
<div class="hager-product-center-more xs">
<div v-if="product_list.length <= productSlidesPerView" class="more-box" style="margin-top: 2rem;">
<hager-more></hager-more>
</div>
<div v-else class="hager-product-center-more xs">
<hager-more></hager-more>
<div class="xs-control">
<div>
......@@ -217,7 +221,6 @@ export default {
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',
......@@ -239,32 +242,39 @@ export default {
title: '4住宅解决方案'
}],
product_list: [{
src: 'https://cdn.ipadbiz.cn/hager/img/KNX%E6%99%BA%E8%83%BD%E6%8E%A7%E5%88%B6%E6%A8%A1%E5%9D%97@2x.png',
title: 'hw01 空气断路器'
src: 'https://cdn.ipadbiz.cn/hager/img/pp01@2x.png',
title: '配电产品'
}, {
src: 'https://cdn.ipadbiz.cn/hager/img/ats%E8%87%AA%E5%8A%A8%E8%BD%AC%E6%8D%A2%E5%BC%80%E5%85%B3@2x.png',
title: 'h3+ 智能塑壳断路器'
src: 'https://cdn.ipadbiz.cn/hager/img/pp01@2x.png',
title: '成套产品'
}, {
src: 'https://cdn.ipadbiz.cn/hager/img/h3+%20%E6%99%BA%E8%83%BD%E5%A1%91%E5%A3%B3%E6%96%AD%E8%B7%AF%E5%99%A8@2x.png',
title: 'ats自动转换开关'
src: 'https://cdn.ipadbiz.cn/hager/img/pp01@2x.png',
title: '开关面板'
}, {
src: 'https://cdn.ipadbiz.cn/hager/img/hw+%20%E7%A9%BA%E6%B0%94%E6%96%AD%E8%B7%AF%E5%99%A8@2x.png',
title: 'KNX智能控制模块'
src: 'https://cdn.ipadbiz.cn/hager/img/pp01@2x.png',
title: '智能控制'
}, {
src: 'https://cdn.ipadbiz.cn/hager/img/pp01@2x.png',
title: '能源管理'
}],
swiperOption: {
slidesPerView: 2,
spaceBetween: 50,
spaceBetween: 20,
preventClicks : true,
slideToClickedSlide: false,
touchRatio: 0,
breakpoints: {
1480: {
slidesPerView: 5,
spaceBetween: 30
},
1024: {
slidesPerView: 4,
spaceBetween: 40
slidesPerView: 5,
spaceBetween: 30
},
768: {
slidesPerView: 3,
spaceBetween: 30
spaceBetween: 20
},
640: {
slidesPerView: 2,
......@@ -284,30 +294,21 @@ export default {
activeProductIndex: 0,
reach_solution_end: false,
reach_product_end: false,
productSlidesPerView: 5,
}
},
async mounted () {
// const container = document.querySelector('.container');
// const boxes = container.querySelectorAll('.box');
// // 如果超过11个项目，设置最后一个为特殊样式
// if (boxes.length > 11) {
// boxes[boxes.length - 1].classList.add('other');
// }
// this.$nextTick(() => {
// console.warn(this.$refs.mySolutionSwiper);
// this.$refs.mySolutionSwiper.$swiper?.on('click', (evt) => {
// // evt.preventDefault();
// let index = this.$refs.mySolutionSwiper.$swiper.clickedIndex;
// this.goToSolution(this.solution_list[index]);
// });
// });
this.$nextTick(() => {
this.$refs.myProductSwiper.$swiper?.on('breakpoint', (swiper) => {
// breakpoint时 显示的条数
this.productSlidesPerView = swiper.slidesPerView
});
});
},
watch: {
// 监听$route对象的变化
$route(to, from) {
console.log('路由变化了：', to.path);
// 在此处执行你想要的逻辑
}
},
methods: {
......@@ -344,7 +345,10 @@ export default {
},
goToProduct (v) {
this.$router.push({
path: '/product/detail'
path: '/product/category',
query: {
id: v.id
}
});
},
handleScreenWidth(width) {
......@@ -573,10 +577,10 @@ 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);
transform: scale(1.05);
// box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
&.xs {
......@@ -592,6 +596,8 @@ export default {
background-size: cover; /* 相当于 object-fit: cover */
background-position: center; /* 让图片居中 */
background-repeat: no-repeat;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
}
......