招聘底部图片高度优化

 <!--
 <!--
  * @Date: 2024-10-18 13:45:53
  * @Date: 2024-10-18 13:45:53
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-23 14:57:22
+ * @LastEditTime: 2024-10-24 17:33:52
  * @FilePath: /hager/src/views/recruit.vue
  * @FilePath: /hager/src/views/recruit.vue
  * @Description: 招聘信息
  * @Description: 招聘信息
 -->
 -->
@@ -91,7 +91,7 @@
         <div :class="['job-img-box', 'email', is_xs ? 'xs' : '']" :style="{ backgroundImage: 'url(https://cdn.ipadbiz.cn/hager/img/recruit/z01.png)'}">
         <div :class="['job-img-box', 'email', is_xs ? 'xs' : '']" :style="{ backgroundImage: 'url(https://cdn.ipadbiz.cn/hager/img/recruit/z01.png)'}">
           <div>简历投递邮箱:hr.communication@hager.com</div>
           <div>简历投递邮箱:hr.communication@hager.com</div>
         </div>
         </div>
-        <div :class="['job-img-box', 'job', is_xs ? 'xs' : '']" :style="{ backgroundImage: 'url(https://cdn.ipadbiz.cn/hager/img/recruit/z02.png)'}">
+        <div :class="['job-img-box', 'job', is_xs ? 'xs' : '']" :style="{ backgroundImage: 'url(https://cdn.ipadbiz.cn/hager/img/recruit/z02.png)', height: recruit_box_height }">
           <p>经理职位 8000元</p>
           <p>经理职位 8000元</p>
           <p>高级工程师/主管 6000元</p>
           <p>高级工程师/主管 6000元</p>
           <p>工程师/专员 5000元</p>
           <p>工程师/专员 5000元</p>
@@ -165,6 +165,7 @@ import mixin from 'common/mixin';
 import hagerBox from '@/components/common/hagerBox';
 import hagerBox from '@/components/common/hagerBox';
 import hagerH1 from '@/components/common/hagerH1.vue';
 import hagerH1 from '@/components/common/hagerH1.vue';
 import hagerLoadMore from '@/components/hagerLoadMore.vue';
 import hagerLoadMore from '@/components/hagerLoadMore.vue';
+import $ from 'jquery';
 
 
 export default {
 export default {
   components: { hagerH1, hagerBox, hagerLoadMore },
   components: { hagerH1, hagerBox, hagerLoadMore },
@@ -172,35 +173,6 @@ export default {
   data () {
   data () {
     return {
     return {
       active_idx: 0,
       active_idx: 0,
-      location_options: [{
-        value: '远程办公',
-        label: '远程办公'
-      }, {
-        value: '广东省-东莞',
-        label: '广东省-东莞'
-      }, {
-        value: '浙江省-杭州',
-        label: '浙江省-杭州'
-      }],
-      location_value: '',
-      job_list: [
-        {
-          title: '销售工程师',
-          location: '远程办公'
-        },
-        {
-          title: '产品管理主管级工程师',
-          location: '广东省-东莞'
-        },
-        {
-          title: 'QE/ 质量工程师',
-          location: '广东省-东莞'
-        },
-        {
-          title: '销售工程师',
-          location: '浙江省-杭州'
-        },
-      ],
       awards_list: [{
       awards_list: [{
         id: '1',
         id: '1',
         zh: '海格集团雇主奖项',
         zh: '海格集团雇主奖项',
@@ -315,6 +287,7 @@ export default {
       activeDesignIndex: 0,
       activeDesignIndex: 0,
       reach_design_end: false,
       reach_design_end: false,
       designSlidesPerView: 3,
       designSlidesPerView: 3,
+      recruit_box_height: '10rem'
     }
     }
   },
   },
   mounted () {
   mounted () {
@@ -323,9 +296,20 @@ export default {
         // breakpoint时 显示的条数
         // breakpoint时 显示的条数
         this.designSlidesPerView = swiper.slidesPerView
         this.designSlidesPerView = swiper.slidesPerView
       });
       });
+      // 高度监听
+      this.recruit_box_height = $('.job-img-wrapper').outerWidth() * 0.09 + 'px';
     });
     });
+    window.addEventListener('resize', this.handleHeightResize);
+  },
+  beforeDestroy() {
+    // 在组件销毁前移除监听器，防止内存泄漏
+    window.removeEventListener('resize', this.handleHeightResize);
   },
   },
   methods: {
   methods: {
+    handleHeightResize () {
+      // 高度监听
+      this.recruit_box_height = $('.job-img-wrapper').outerWidth() * 0.09 + 'px';
+    },
     onClickBtn (idx) {
     onClickBtn (idx) {
       this.active_idx = idx;
       this.active_idx = idx;
     },
     },
@@ -466,7 +450,7 @@ export default {
       }
       }
       &.job {
       &.job {
         padding: 1rem 2rem;
         padding: 1rem 2rem;
-        height: 9rem;
+        height: auto;
         flex-direction: column;
         flex-direction: column;
         font-size: 1.25rem;
         font-size: 1.25rem;
         p {
         p {