修复图片高度显示问题

hookehuyr
Commit eb17a0969cba6a3c3fb2ac381eb72aab56e99f68 eb17a096 1 parent 246c5f9e
Showing 4 changed files with 47 additions and 11 deletions
src/views/index.vue
src/views/product/index.vue
src/views/recruit.vue
src/views/solution/index.vue
--- a/src/views/index.vue
View file @eb17a09
+++ b/src/views/index.vue
View file @eb17a09
 <!--
  * @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({
--- a/src/views/product/index.vue
View file @eb17a09
+++ b/src/views/product/index.vue
View file @eb17a09
 <!--
  * @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;
       }
--- a/src/views/recruit.vue
View file @eb17a09
+++ b/src/views/recruit.vue
View file @eb17a09
 <!--
  * @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;
       }
--- a/src/views/solution/index.vue
View file @eb17a09
+++ b/src/views/solution/index.vue
View file @eb17a09
@@ -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个项目