解决方案头部图片比例调整

 <template>
 <template>
   <div class="hager-solution-index">
   <div class="hager-solution-index">
-    <hager-box :style="{backgroundColor: '#F5F6FB', height: top_img_height }">
+    <hager-box :style="{backgroundColor: '#F5F6FB', height: solution_box_height }">
       <div class="hager-solution-top">
       <div class="hager-solution-top">
         <el-row v-if="!is_xs" :gutter="20" style="display: flex;">
         <el-row v-if="!is_xs" :gutter="20" style="display: flex;">
           <el-col :span="8">
           <el-col :span="8">
@@ -14,10 +14,10 @@
             </div>
             </div>
           </el-col>
           </el-col>
           <el-col :span="16">
           <el-col :span="16">
-            <img :style="{ height: top_img_height, width: '100%' }" src="https://cdn.ipadbiz.cn/hager/banner/01.png">
+            <img :style="{ height: solution_box_height, width: '100%' }" src="https://cdn.ipadbiz.cn/hager/banner/01.png">
           </el-col>
           </el-col>
         </el-row>
         </el-row>
-        <img v-else :style="{ height: top_img_height, width: '100%' }" src="https://cdn.ipadbiz.cn/hager/banner/01.png">
+        <img v-else :style="{ height: solution_mini_height, width: '100%' }" src="https://cdn.ipadbiz.cn/hager/banner/01.png">
       </div>
       </div>
     </hager-box>
     </hager-box>
     <hager-box class="box-n">
     <hager-box class="box-n">
@@ -76,6 +76,7 @@ import hagerH1 from '@/components/common/hagerH1.vue';
 import hagerMore from '@/components/hagerMore.vue';
 import hagerMore from '@/components/hagerMore.vue';
 import hagerService from '@/components/common/hagerService.vue';
 import hagerService from '@/components/common/hagerService.vue';
 import { getSolutionListAPI } from "@/api/hager.js";
 import { getSolutionListAPI } from "@/api/hager.js";
+import $ from 'jquery';
 
 
 export default {
 export default {
   components: { hagerBox, hagerH1, hagerMore, hagerService },
   components: { hagerBox, hagerH1, hagerMore, hagerService },
@@ -114,6 +115,8 @@ export default {
       },
       },
       activeIndex: 0,
       activeIndex: 0,
       reach_end: false,
       reach_end: false,
+      solution_box_height: '10rem',
+      solution_mini_height: '10rem',
     }
     }
   },
   },
   async mounted () {
   async mounted () {
@@ -121,8 +124,23 @@ export default {
     if (code) {
     if (code) {
       this.solution_list = data;
       this.solution_list = data;
     }
     }
+    this.$nextTick(() => {
+      // 高度监听
+      this.solution_box_height = $('.hager-solution-top').outerWidth() * 0.4 + 'px';
+      this.solution_mini_height = $('.hager-solution-top').outerWidth() * 0.6 + 'px';
+    });
+    window.addEventListener('resize', this.handleHeightResize);
+  },
+  beforeDestroy() {
+    // 在组件销毁前移除监听器，防止内存泄漏
+    window.removeEventListener('resize', this.handleHeightResize);
   },
   },
   methods: {
   methods: {
+    handleHeightResize () {
+      // 高度监听
+      this.solution_box_height = $('.hager-solution-top').outerWidth() * 0.4 + 'px';
+      this.solution_mini_height = $('.hager-solution-top').outerWidth() * 0.6 + 'px';
+    },
     splitListIntoChunks (list) {
     splitListIntoChunks (list) {
       const chunkSize = 4; // 每组4个项目
       const chunkSize = 4; // 每组4个项目
       const result = [];
       const result = [];