Hooke / hager

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
eb17a096 1 parent 246c5f9e

修复图片高度显示问题

Inline Side-by-side
Showing 4 changed files with 47 additions and 11 deletions
<!--
* @Date: 2024-08-27 10:06:30
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-11-07 10:50:53
* @LastEditTime: 2024-11-07 14:39:51
* @FilePath: /hager/src/views/index.vue
* @Description: 首页
-->
......@@ -55,7 +55,7 @@
<hager-box class="box-2n" @screen-width="handleScreenWidth">
<hager-h1 title="解决方案" sub="Solution"></hager-h1>
<div v-if="!is_xs" class="hager-solution">
<el-row :gutter="15" v-for="(item, index) in splitListIntoChunks(solution_list)" :key="index">
<el-row :gutter="20" v-for="(item, index) in splitListIntoChunks(solution_list)" :key="index">
<el-col :span="6" v-for="(x, idx) in item" :key="idx">
<div
@click="goToSolution(x)"
......@@ -253,10 +253,11 @@ export default {
// breakpoint时 显示的条数
this.productSlidesPerView = swiper.slidesPerView;
});
});
// 高度监听
this.$nextTick(() => {
// 高度监听
this.product_box_height = $('.product-item').outerWidth() - $('.product-title').outerHeight() + 'px';
// 动态计算解决方案图片高度
let img_box_width = $('.solution-item').outerWidth();
$('.solution-item').css('height', img_box_width * 0.56 + 'px');
});
window.addEventListener('resize', this.handleHeightResize);
},
......@@ -274,6 +275,9 @@ export default {
handleHeightResize () {
// 高度监听
this.product_box_height = $('.product-item').outerWidth() - $('.product-title').outerHeight() + 'px';
// 动态计算解决方案图片高度
let img_box_width = $('.solution-item').outerWidth();
$('.solution-item').css('height', img_box_width * 0.56 + 'px');
},
getToGroup () {
this.$router.push({
......
<!--
* @Date: 2024-09-27 16:53:09
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-11-07 10:56:07
* @LastEditTime: 2024-11-07 14:51:28
* @FilePath: /hager/src/views/product/index.vue
* @Description: 文件描述
-->
......@@ -65,6 +65,7 @@ import hagerBox from '@/components/common/hagerBox';
import hagerH1 from '@/components/common/hagerH1.vue';
import Accordion from '@/components/accordion/Accordion.vue';
import { getProductCateAPI, getProductSearchAPI } from "@/api/hager.js";
import $ from 'jquery';
export default {
components: { hagerBox, hagerH1, Accordion },
......@@ -91,6 +92,11 @@ export default {
} else { // 没有ID显示所有产品
this.getAllMain();
}
window.addEventListener('resize', this.changeImgHeight);
},
beforeDestroy() {
// 在组件销毁前移除监听器，防止内存泄漏
window.removeEventListener('resize', this.handleHeightResize);
},
computed: {
allPath () {
......@@ -127,6 +133,13 @@ export default {
},
},
methods: {
changeImgHeight () {
this.$nextTick(() => {
// 动态计算图片高度
let img_width = $('.product-item-img img').outerWidth();
$('.product-item-img img').css('height', img_width * 1 + 'px')
})
},
handleChange(val) {
},
goToDetail (v) { // 跳转产品详情
......@@ -150,6 +163,8 @@ export default {
this.search_keyword = '';
// 设置页面标题
document.title = '所有产品 | Hager China';
// 动态计算图片高度
this.changeImgHeight();
}
},
async getMain () {
......@@ -167,6 +182,8 @@ export default {
this.getCurrentCate(this.cate_id);
// 设置页面标题
document.title = this.category_name + ' | Hager China';
// 动态计算图片高度
this.changeImgHeight();
}
},
async getCurrentCate (cate_id) {
......@@ -263,6 +280,7 @@ export default {
box-sizing: border-box;
border-radius: 8px;
border: 1px solid #eee;
overflow: hidden;
&:hover {
cursor: pointer;
}
......
<!--
* @Date: 2024-10-18 13:45:53
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-11-04 16:32:38
* @LastEditTime: 2024-11-07 14:58:09
* @FilePath: /hager/src/views/recruit.vue
* @Description: 招聘信息
-->
......@@ -117,7 +117,7 @@
</div>
<div v-if="active_idx === 2">
<hager-box v-if="!is_xs">
<el-row v-for="(item, index) in culture_list" :key="index" style="box-shadow: 0rem 0rem 1.33rem 0.08rem rgba(0,0,0,0.09); border-radius: 5px; margin-bottom: 3rem;">
<el-row v-for="(item, index) in culture_list" :key="index" style="box-shadow: 0rem 0rem 1.33rem 0.08rem rgba(0,0,0,0.09); border-radius: 10px; margin-bottom: 3rem;">
<el-col :span="12">
<div v-if="index % 2 === 0" class="corporate-culture-img" :style="{ 'background-image': 'url('+ item.img +')' }"></div>
<div v-else class="corporate-culture-box">
......@@ -297,7 +297,10 @@ export default {
this.designSlidesPerView = swiper.slidesPerView
});
// 高度监听
this.recruit_box_height = $('.job-img-wrapper').outerWidth() * 0.09 + 'px';
this.recruit_box_height = $('.job-img-wrapper').outerWidth() * 0.1 + 'px';
// 动态计算图片高度
let img_box_width = $('.img-box').outerWidth();
$('.img-box').css('height', img_box_width * 0.56 + 'px');
});
window.addEventListener('resize', this.handleHeightResize);
},
......@@ -308,7 +311,10 @@ export default {
methods: {
handleHeightResize () {
// 高度监听
this.recruit_box_height = $('.job-img-wrapper').outerWidth() * 0.09 + 'px';
this.recruit_box_height = $('.job-img-wrapper').outerWidth() * 0.1 + 'px';
// 动态计算图片高度
let img_box_width = $('.img-box').outerWidth();
$('.img-box').css('height', img_box_width * 0.56 + 'px')
},
onClickBtn (idx) {
this.active_idx = idx;
......@@ -499,6 +505,7 @@ export default {
background-repeat: no-repeat;
background-size: cover;
// background-position: center;
border-radius: 8px;
&.xs {
height: 15rem;
border-top-left-radius: 5px;
......@@ -511,6 +518,7 @@ export default {
padding: 2rem;
height: 22rem; /* 让 .about-box 撑满父容器 */
box-sizing: border-box;
border-radius: 10px;
&.xs {
background-color: #F7F7F7;
}
......
......@@ -24,7 +24,7 @@
<hager-h1 title="行业解决方案" sub="Industry Solutions" style="margin: 2rem 0 1rem;"></hager-h1>
<div>海格电气为建筑，能源，工业，基础设施等行业提供安全、稳定、可靠、智能的低压配电解决方案及KNX智能楼宇解决方案。</div>
<div v-if="!is_xs" class="hager-industry-solutions">
<el-row :gutter="15" v-for="(item, index) in splitListIntoChunks(solution_list)" :key="index">
<el-row :gutter="20" v-for="(item, index) in splitListIntoChunks(solution_list)" :key="index">
<el-col :span="6" v-for="(x, idx) in item" :key="idx">
<div @click="goToSolution(x)" class="card">
<img :src="x.cover" class="card-image">
......@@ -128,6 +128,9 @@ export default {
// 高度监听
this.solution_box_height = $('.hager-solution-top').outerWidth() * 0.4 + 'px';
this.solution_mini_height = $('.hager-solution-top').outerWidth() * 0.6 + 'px';
// 动态计算图片高度
let img_width = $('.card-image').outerWidth();
$('.card-image').css('height', img_width * 0.7 + 'px');
});
window.addEventListener('resize', this.handleHeightResize);
},
......@@ -140,6 +143,9 @@ export default {
// 高度监听
this.solution_box_height = $('.hager-solution-top').outerWidth() * 0.4 + 'px';
this.solution_mini_height = $('.hager-solution-top').outerWidth() * 0.6 + 'px';
// 动态计算图片高度
let img_width = $('.card-image').outerWidth();
$('.card-image').css('height', img_width * 0.7 + 'px');
},
splitListIntoChunks (list) {
const chunkSize = 4; // 每组4个项目
......