✨ feat: 解决方案接口联调

hookehuyr
Commit 653d14000a942ef279cf6d5aaef88ba29f5ed0a2 653d1400 1 parent 02b4c605
Showing 4 changed files with 327 additions and 98 deletions
src/api/hager.js
src/views/solution/case.vue
src/views/solution/detail.vue
src/views/solution/index.vue
--- a/src/api/hager.js
View file @653d140
+++ b/src/api/hager.js
View file @653d140
 /*
  * @Date: 2024-09-26 13:36:06
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-11-07 18:08:31
+ * @LastEditTime: 2024-11-29 10:13:28
  * @FilePath: /hager/src/api/hager.js
  * @Description: 文件描述
  */
@@ -17,6 +17,8 @@ const Api = {
   PRODUCT_INFO: '/srv/?a=detail&type=product',
   PRODUCT_SEARCH: '/srv/?a=cate&type=product_search',
   SOLUTION: '/srv/?a=cate&type=solution',
+  SOLUTION_CASE: '/srv/?a=cate&type=case',
+  SOLUTION_DETAIL: '/srv/?a=detail&type=case',
   FOOTER: '/srv/?a=footer',
   REGISTER: '/srv/?a=user&type=register',
   LOGIN: '/srv/?a=user&type=login',
@@ -47,6 +49,10 @@ export const getProductSearchAPI = (params) => fn(fetch.get(Api.PRODUCT_SEARCH, 
 export const getSolutionListAPI = (params) => fn(fetch.get(Api.SOLUTION, params));
+export const getSolutionCaseAPI = (params) => fn(fetch.get(Api.SOLUTION_CASE, params));
+export const getSolutionDetailAPI = (params) => fn(fetch.get(Api.SOLUTION_DETAIL, params));
+
+
 export const getFooterAPI = (params) => fn(fetch.get(Api.FOOTER, params));
 export const registerAPI = (params) => fn(fetch.post(Api.REGISTER, params));
--- a/src/views/solution/case.vue
View file @653d140
+++ b/src/views/solution/case.vue
View file @653d140
 <!--
  * @Date: 2024-10-18 12:06:09
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-11-04 09:40:35
+ * @LastEditTime: 2024-11-29 13:43:42
  * @FilePath: /hager/src/views/solution/case.vue
  * @Description: 文件描述
 -->
@@ -10,18 +10,105 @@
     <hager-box>
       <div style="margin-top: 1.5rem;">
         <el-breadcrumb separator="/">
-          <el-breadcrumb-item v-if="!is_xs">解决方案</el-breadcrumb-item>
+          <el-breadcrumb-item v-if="!is_xs" :to="{ path: '/solution/index' }">解决方案</el-breadcrumb-item>
-          <el-breadcrumb-item>商建解决方案</el-breadcrumb-item>
+          <el-breadcrumb-item :to="{ path: casePath }">{{ success_info.category_name }}</el-breadcrumb-item>
           <el-breadcrumb-item>成功案例</el-breadcrumb-item>
         </el-breadcrumb>
       </div>
     </hager-box>
-    <hager-box class="box-n">
+    <hager-box v-if="!is_xs" class="box-n">
-      <hager-h1 title="深圳华侨城洲际酒店" sub="异域风情 奢华享受"></hager-h1>
+      <el-row class="solution-case-banner">
+        <el-col :span="8">
+          <div class="solution-case-box">
+            <div class="title">
+              <p class="c">{{ success_info.post_title }}</p>
+              <p class="e">{{ success_info.post_subtitle }}</p>
+            </div>
+          </div>
+        </el-col>
+        <el-col :span="16">
+          <div class="solution-case-img" :style="{ 'background-image': 'url(' + top_banner + ')' }"></div>
+        </el-col>
+      </el-row>
+    </hager-box>
+    <div v-else>
+      <div style="padding: 1rem;">
+        <div class="solution-case-img xs" :style="{ 'background-image': 'url(' + top_banner + ')' }"></div>
+        <div class="solution-case-box xs">
+          <div class="title">
+            <p class="c xs">{{ success_info.post_title }}</p>
+            <p class="e xs">{{ success_info.post_subtitle }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <hager-box>
+      <div :class="['solution-case-intro', is_xs ? 'xs' : '']">
+        <p v-html="success_info.post_excerpt"></p>
+      </div>
+    </hager-box>
+    <hager-box v-if="!is_xs" class="box-n">
+      <el-row class="solution-case-banner">
+        <el-col :span="16">
+          <div class="solution-case-img" :style="{ 'background-image': 'url(' + text_img + ')' }"></div>
+        </el-col>
+        <el-col :span="8">
+          <div class="solution-case-box" style="padding: 1rem 2rem;">
+            <p v-html="success_info.post_content"></p>
+            <!-- <div class="title">
+              <p class="c" style="font-size: 1.1rem;">智能产品 精准助力</p>
+            </div>
+            <p style="overflow-y: auto; margin-top: 0.5rem;">
+              海格电气为新疆华电哈密2×100万千瓦煤电项目提供有力的技术支持，提供智能空气断路器、塑壳断路器，EW交流接触器等智能化产品和服务。
+              HW+空气断路器全系列均标配了LCD液晶显示屏，具有高对比度、高亮度、大字体的特点，方便运维人员在明亮的环境或黑暗的环境下，从不同方向，不同角度轻松读取数据，快速做出运维决策。
+              塑壳断路器采用智能型控制器与微处理器技术，LSI型脱扣单元具有动作电流和动作时间在线调整功能。其中，短路短延时时间可从0.05S调整到1S，调整范围更加宽泛，为现场实现选择性保护提供技术支撑。
+            </p> -->
+          </div>
+        </el-col>
+      </el-row>
     </hager-box>
+    <div v-else>
+      <div style="padding: 1rem;">
+        <!-- <div class="solution-case-img xs" :style="{ 'background-image': 'url('+ item.img +')' }"></div> -->
+        <div class="solution-case-img xs" :style="{ 'background-image': 'url(' + text_img + ')' }"></div>
+        <div class="solution-case-box xs">
+          <p v-html="success_info.post_content"></p>
+          <!-- <div class="title">
+            <p class="c xs">智能产品 精准助力</p>
+          </div>
+          <p style="margin-top: 1rem;">
+            海格电气为新疆华电哈密2×100万千瓦煤电项目提供有力的技术支持，提供智能空气断路器、塑壳断路器，EW交流接触器等智能化产品和服务。
+            HW+空气断路器全系列均标配了LCD液晶显示屏，具有高对比度、高亮度、大字体的特点，方便运维人员在明亮的环境或黑暗的环境下，从不同方向，不同角度轻松读取数据，快速做出运维决策。
+            塑壳断路器采用智能型控制器与微处理器技术，LSI型脱扣单元具有动作电流和动作时间在线调整功能。其中，短路短延时时间可从0.05S调整到1S，调整范围更加宽泛，为现场实现选择性保护提供技术支撑。
+          </p> -->
+        </div>
+      </div>
+    </div>
     <hager-box>
-      <div class="case-title">{{ title }}</div>
+      <div :class="['case-content', is_xs ? 'xs' : '']" v-html="success_info.post_text"></div>
-      <div :class="['case-content', is_xs ? 'xs' : '']" v-html="content"></div>
+    </hager-box>
+    <hager-box class="box-n">
+      <div style="padding: 1vw; background-color: #F3F3F3;">
+        <swiper ref="myProductSwiper" class="swiper" :options="swiperOption" @slideChange="onProductSlideChange">
+          <swiper-slide v-for="(item, index) in case_img" :key="index">
+            <div class="solution-card-box">
+              <div class="card-image-wrapper">
+                <!-- <el-image :src="item.src" fit="fit"></el-image> -->
+                <img :src="item.value" style="">
+              </div>
+            </div>
+          </swiper-slide>
+        </swiper>
+        <div v-if="case_img.length > productSlidesPerView || is_xs" class="hager-product-center-more">
+          <!-- <hager-more></hager-more> -->
+          <div class="xs-control">
+            <div>
+              <i :class="['el-icon-arrow-left', activeProductIndex === 0 ? 'disabled' : '']" @click="prevProductBtn()"></i>
+              <i :class="['el-icon-arrow-right', reach_product_end ? 'disabled' : '']" @click="nextProductBtn()"></i>
+            </div>
+          </div>
+        </div>
+      </div>
     </hager-box>
   </div>
 </template>
@@ -30,26 +117,95 @@
 import mixin from 'common/mixin';
 import hagerBox from '@/components/common/hagerBox';
 import hagerH1 from '@/components/common/hagerH1.vue';
-import { getNewsDetailAPI } from "@/api/hager.js";
+import { getSolutionDetailAPI } from "@/api/hager.js";
 export default {
   components: { hagerBox },
   mixins: [mixin.init],
   data () {
     return {
-      title: '默认标题',
+      product_list: [],
-      content: '默认内容',
+      swiperOption: {
+        slidesPerView: 2,
+        spaceBetween: 50,
+        preventClicks : true,
+        slideToClickedSlide: false,
+        touchRatio: 0,
+        breakpoints: {
+          1024: {
+            slidesPerView: 4,
+            spaceBetween: 20
+          },
+          768: {
+            slidesPerView: 3,
+            spaceBetween: 20
+          },
+          640: {
+            slidesPerView: 2,
+            spaceBetween: 20
+          },
+          320: {
+            slidesPerView: 2,
+            spaceBetween: 10
+          },
+          160: {
+            slidesPerView: 1,
+            spaceBetween: 0
+          }
+        }
+      },
+      activeProductIndex: 0,
+      reach_product_end: false,
+      productSlidesPerView: 4,
+      success_info: {},
+      top_banner: '',
+      text_img: '',
+      case_img: [],
+    }
+  },
+  computed: {
+    casePath () {
+      return `/solution/detail?id=${this.success_info.category_id}`;
+    }
+  },
+  watch: {
+    'top_banner' (v) {
+      console.warn(v);
     }
   },
   async mounted () {
-    const { code, data } = await getNewsDetailAPI({ id: this.$route.query.id });
+    const { code, data } = await getSolutionDetailAPI({ id: this.$route.query.id });
     if (code) {
-      this.title = data.post_title;
+      this.success_info = data;
-      this.content = data.product_advantages;
+      this.top_banner = this.success_info.file?.top_img ? this.success_info.file?.top_img[0]['value'] : '';
+      this.text_img = data.file?.left_img ? data.file?.left_img[0]['value'] : '';
+      this.case_img = data.file?.img_list ? data.file?.img_list : [];
     }
+
+    this.$nextTick(() => {
+      this.$refs.myProductSwiper.$swiper?.on('breakpoint', (swiper) => {
+        // breakpoint时 显示的条数
+        this.productSlidesPerView = swiper.slidesPerView
+      });
+    });
   },
   methods: {
+    prevProductBtn () {
+      this.$refs.myProductSwiper.$swiper.slidePrev();
+    },
+    nextProductBtn () {
+      this.$refs.myProductSwiper.$swiper.slideNext();
+    },
+    onProductSlideChange () {
+      this.activeProductIndex = this.$refs.myProductSwiper.$swiper.activeIndex;
+      const isEnd = this.$refs.myProductSwiper.$swiper.isEnd;
+      if (isEnd) {
+        this.reach_product_end = true;
+      } else {
+        this.reach_product_end = false;
+      }
+    },
   }
 }
 </script>
@@ -72,6 +228,101 @@ export default {
       }
     }
+    .solution-case-img {
+      width: 100%;
+      height: 35rem;
+      background-repeat: no-repeat;
+      background-size: cover;
+      background-position: center;
+      &.xs {
+        height: 15rem;
+      }
+    }
+
+    .solution-case-box {
+      background-color: #F7F7F7;
+      position: relative; /* 父容器设置为相对定位 */
+      padding: 2rem;
+      height: 35rem; /* 让 .about-box 撑满父容器 */
+      box-sizing: border-box;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      &.xs {
+        height: auto;
+      }
+      .title {
+        font-weight: bold;
+        word-break: break-all;
+        .c {
+          font-size: 1.5rem;
+          color: @secondary-color;
+          line-height: 1.5;
+          &.xs {
+            font-size: 1.5rem;
+          }
+        }
+        .e {
+          font-size: 1.2rem;
+          color: @primary-color;
+          margin-top: 0.5rem;
+          &.xs {
+            font-size: 1.1rem;
+          }
+        }
+      }
+    }
+
+    .solution-case-intro {
+      padding: 1rem 3rem;
+      &.xs {
+        padding: 1rem;
+      }
+    }
+
+  .solution-card-box {
+    .card-image-wrapper {
+      // background-color: #F3F3F3;
+      border-radius: 5px;
+      transition: transform 0.3s ease-in-out;
+      // &:hover {
+      //   transform: scale(1.05);
+      //   // box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+      //   cursor: pointer;
+      // }
+      img {
+        width: 100%;
+        // margin-left: calc((100%) / 2);
+        height: auto;
+      }
+    }
+    .card-title {
+      color: @text-color;
+      font-weight: bold;
+      margin: 1rem 0;
+      &:hover {
+        cursor: pointer;
+        text-decoration: underline;
+      }
+    }
+  }
+
+  .xs-control {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 1rem;
+    i {
+      font-size: 1.35rem;
+      color: #EE6D10;
+      &:hover {
+        cursor: pointer;
+      }
+      &.disabled {
+        color: #ccc;
+      }
+    }
+  }
+
     .case-title {
       color: @secondary-color;
       text-align: center;
@@ -81,8 +332,9 @@ export default {
     }
     :deep(.case-content) {
-      margin-bottom: 2rem;
+      padding: 1rem 3rem;
       &.xs {
+        padding: 1rem;
         img {
           width: 100%;
           height: auto;
--- a/src/views/solution/detail.vue
View file @653d140
+++ b/src/views/solution/detail.vue
View file @653d140
 <!--
  * @Date: 2024-09-29 15:49:27
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-11-10 11:53:25
+ * @LastEditTime: 2024-11-29 11:26:32
  * @FilePath: /hager/src/views/solution/detail.vue
  * @Description: 文件描述
 -->
 <template>
   <div class="hager-solution-detail">
-    <hager-box v-if="!is_xs" class="top-img" :style="{ backgroundImage: 'url(https://cdn.ipadbiz.cn/hager/banner/banner03@2x.png)' }">
+    <hager-box v-if="!is_xs" class="top-img" :style="{ backgroundImage: 'url(' + case_banner + ')' }">
       <div class="banner-text-wrapper top-center">
         <div class="text">
-          <p class="title" style="margin-bottom: 0;">学校解决方案</p>
+          <p class="title" style="margin-bottom: 0;">{{ case_info.category_name }}</p>
-          <p class="sub">Campus Solution</p>
+          <p class="sub">{{ case_info.category_name_en }}</p>
         </div>
-        <!-- <div class="text-sub">
-          海格用丰富的行业知识和应用经验，为多个行业提供先进的数字化解决方案。
-        </div> -->
       </div>
     </hager-box>
     <hager-box v-if="!is_xs" class="box-n">
       <el-row :gutter="0">
         <el-col :span="12" style="height: 25rem;">
           <el-carousel height="25rem" :interval="8000" style="border-radius: 5px;">
-            <el-carousel-item v-for="(item, index) in banner_list" :key="index" class="carousel-img">
+            <el-carousel-item v-for="(item, index) in case_img" :key="index" class="carousel-img">
-              <el-image @click="onClickImg(item.src)" style="width: 100%; height: 100%;" fit="fill" :src="item.src"></el-image>
+              <el-image @click="onClickImg(item)" style="width: 100%; height: 100%;" fit="fill" :src="item"></el-image>
             </el-carousel-item>
           </el-carousel>
         </el-col>
         <el-col :span="12" class="brief-introduction">
           <div class="intro-box">
-            <!-- <hager-h1 title="学校解决方案" sub="Electronic solutions"></hager-h1> -->
+            <p style="margin: 2rem 0;" v-html="case_info.category_description"></p>
-            <p style="margin: 2rem 0;">淨於电气开乐驾能民电峰决方案，提供安全。可靠。摄作友好。易于堆护的电力划！ 1h14. n53 X0(009121 3098. 228 41324849 56MeD 换至备用电源，保障救学和生活的连续性。</p>
+            <!-- <i class="el-icon-right"></i> -->
-            <i class="el-icon-right"></i>
           </div>
         </el-col>
       </el-row>
@@ -39,16 +35,16 @@
     <div v-else>
       <div style="height: 25rem; margin-top: 2rem;">
         <el-carousel height="25rem" :interval="8000" style="border-radius: 5px;">
-          <el-carousel-item v-for="(item, index) in banner_list" :key="index" class="carousel-img">
+          <el-carousel-item v-for="(item, index) in case_img" :key="index" class="carousel-img">
-            <el-image @click="onClickImg(item.src)" style="width: 100%; height: 100%;" fit="fill" :src="item.src"></el-image>
+            <el-image @click="onClickImg(item)" style="width: 100%; height: 100%;" fit="fill" :src="item"></el-image>
           </el-carousel-item>
         </el-carousel>
       </div>
       <div class="brief-introduction xs">
         <div class="intro-box xs">
           <hager-h1 title="学校解决方案" sub="Electronic solutions"></hager-h1>
-          <p style="margin: 2rem 0;">淨於电气开乐驾能民电峰决方案，提供安全。可靠。摄作友好。易于堆护的电力划！ 1h14. n53 X0(009121 3098. 228 41324849 56MeD 换至备用电源，保障救学和生活的连续性。</p>
+          <p style="margin: 2rem 0;" v-html="case_info.post_description"></p>
-          <i class="el-icon-right"></i>
+          <!-- <i class="el-icon-right"></i> -->
         </div>
       </div>
     </div>
@@ -57,10 +53,10 @@
       <div v-if="!is_xs">
         <div class="hager-success-cases">
           <div @click="goToCase(item)" class="card" v-for="(item, index) in success_data_list" :key="index">
-            <img :src="item.img" alt="学校图片" class="card-image">
+            <img :src="item.cover" alt="图片" class="card-image">
             <div class="card-content">
-              <h3>{{ item.title }}</h3>
+              <h3>{{ item.post_title }}</h3>
-              <p>{{ item.sub }}</p>
+              <p v-html="item.post_description"></p>
               <i class="el-icon-right"></i>
             </div>
           </div>
@@ -74,10 +70,10 @@
           <swiper-slide v-for="(item, index) in success_data_list" :key="index">
             <div @click="goToCase(item)" class="hager-success-cases xs">
               <div class="card">
-                <img :src="item.img" alt="学校图片" class="card-image">
+                <img :src="item.cover" alt="图片" class="card-image">
                 <div class="card-content">
-                  <h3>{{ item.title }}</h3>
+                  <h3>{{ item.post_title }}</h3>
-                  <p class="clamp-text">{{ item.sub }}</p>
+                  <p class="clamp-text" v-html="item.post_description "></p>
                   <i class="el-icon-right"></i>
                 </div>
               </div>
@@ -102,9 +98,9 @@
           <div class="card-box" @click="goToProduct(item)">
             <div class="card-image-wrapper">
               <!-- <el-image :src="item.src" fit="fit"></el-image> -->
-              <img :src="item.src" style="">
+              <img :src="item.cover" style="">
             </div>
-            <p class="card-title">{{ item.title }}</p>
+            <p class="card-title">{{ item.post_title }}</p>
           </div>
         </swiper-slide>
       </swiper>
@@ -130,63 +126,26 @@ import hagerMore from '@/components/hagerMore.vue';
 import hagerHCarousel from '@/components/hagerHCarousel.vue';
 import hagerService from '@/components/common/hagerService.vue';
 import $ from 'jquery';
+import { getSolutionCaseAPI } from "@/api/hager.js";
 export default {
+  metaInfo: {
+    // title: '海格电气官方网站',
+    meta: [
+      { name: 'keyword', content: 'ddddd' },
+      { name: 'description', content: '4444' },
+    ]
+  },
   components: { hagerBox, hagerH1, hagerMore, hagerHCarousel, hagerService },
   mixins: [mixin.init],
   data () {
     return {
-      banner_list: [
+      case_info: {},
-        {
+      case_banner: '',
-          src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+      case_img: [],
-          url: ''
+      banner_list: [],
-        },
+      success_data_list: [],
-        {
+      product_list: [],
-          src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
-          url: ''
-        }
-      ],
-      success_data_list: [{
-        title: '厦门翔城中小学',
-        sub: '占地面积约43811.99平方米，总建筑面积约32188.83平方米，规模48个教学班，可提供2400个优质初中学位。翔城中学是翔安第一所拥有游泳馆的中学。',
-        img: 'https://cdn.ipadbiz.cn/hager/img/WX20241021-135715@2x.png',
-      }, {
-        title: '厦门翔城中小学',
-        sub: '占地面积约43811.99平方米，总建筑面积约32188.83平方米，规模48个教学班，可提供2400个优质初中学位。翔城中学是翔安第一所拥有游泳馆的中学。',
-        img: 'https://cdn.ipadbiz.cn/hager/img/WX20241021-135715@2x.png',
-      }, {
-        title: '厦门翔城中小学',
-        sub: '占地面积约43811.99平方米，总建筑面积约32188.83平方米，规模48个教学班，可提供2400个优质初中学位。翔城中学是翔安第一所拥有游泳馆的中学。',
-        img: 'https://cdn.ipadbiz.cn/hager/img/WX20241021-135715@2x.png',
-      }, {
-        title: '厦门翔城中小学',
-        sub: '占地面积约43811.99平方米，总建筑面积约32188.83平方米，规模48个教学班，可提供2400个优质初中学位。翔城中学是翔安第一所拥有游泳馆的中学。',
-        img: 'https://cdn.ipadbiz.cn/hager/img/WX20241021-135715@2x.png',
-      }, {
-        title: '厦门翔城中小学',
-        sub: '占地面积约43811.99平方米，总建筑面积约32188.83平方米，规模48个教学班，可提供2400个优质初中学位。翔城中学是翔安第一所拥有游泳馆的中学。',
-        img: 'https://cdn.ipadbiz.cn/hager/img/WX20241021-135715@2x.png',
-      }, {
-        title: '厦门翔城中小学',
-        sub: '占地面积约43811.99平方米，总建筑面积约32188.83平方米，规模48个教学班，可提供2400个优质初中学位。翔城中学是翔安第一所拥有游泳馆的中学。',
-        img: 'https://cdn.ipadbiz.cn/hager/img/WX20241021-135715@2x.png',
-      }],
-      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/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/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/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/hw+%20%E7%A9%BA%E6%B0%94%E6%96%AD%E8%B7%AF%E5%99%A8@2x.png',
-        title: 'KNX智能控制模块'
-      }],
       swiperOption: {
         slidesPerView: 2,
         spaceBetween: 50,
@@ -224,7 +183,15 @@ export default {
       productSlidesPerView: 4,
     }
   },
-  mounted () {
+  async mounted () {
+    const { code, data } = await getSolutionCaseAPI({ cid: this.$route.query.id });
+    if (code) {
+      this.case_info = data;
+      this.case_banner = data.file?.banner ? data.file?.banner[0] : 'https://cdn.ipadbiz.cn/hager/banner/banner03@2x.png';
+      this.case_img = data.file?.img ? data.file?.img : ['https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'];
+      this.success_data_list = data.list;
+      this.product_list = data.product;
+    }
     this.$nextTick(() => {
       this.$refs.myProductSwiper.$swiper?.on('breakpoint', (swiper) => {
         // breakpoint时 显示的条数
@@ -258,12 +225,18 @@ export default {
     },
     goToProduct (v) {
       this.$router.push({
-        path: '/product/detail'
+        path: '/product/detail',
+        query: {
+          id: v.id
+        }
       });
     },
     goToCase (v) {
       this.$router.push({
-        path: '/solution/case'
+        path: '/solution/case',
+        query: {
+          id: v.id,
+        }
       });
     },
     prevProductBtn () {
@@ -291,7 +264,6 @@ export default {
     onSuccessSlideChange () {
       this.activeSuccessIndex = this.$refs.mySuccessSwiper.$swiper.activeIndex;
       const isEnd = this.$refs.mySuccessSwiper.$swiper.isEnd;
-      console.warn(isEnd);
       if (isEnd) {
         this.reach_success_end = true;
--- a/src/views/solution/index.vue
View file @653d140
+++ b/src/views/solution/index.vue
View file @653d140
@@ -126,7 +126,7 @@ export default {
     }
     this.$nextTick(() => {
       // 高度监听
-      this.solution_box_height = $('.hager-solution-top').outerWidth() * 0.4 + 'px';
+      this.solution_box_height = $('.hager-solution-top').outerWidth() * 0.3 + 'px';
       this.solution_mini_height = $(window).outerWidth() * 0.55 + 'px';
       // 动态计算图片高度
       let img_width = $('.card-image').outerWidth();
@@ -141,7 +141,7 @@ export default {
   methods: {
     handleHeightResize () {
       // 高度监听
-      this.solution_box_height = $('.hager-solution-top').outerWidth() * 0.4 + 'px';
+      this.solution_box_height = $('.hager-solution-top').outerWidth() * 0.3 + 'px';
       this.solution_mini_height = $('.hager-solution-top').outerWidth() * 0.6 + 'px';
       // 动态计算图片高度
       let img_width = $('.card-image').outerWidth();
@@ -160,7 +160,6 @@ export default {
       return result;
     },
     goToSolution (v) {
-      console.warn(v);
       this.$router.push({
         path: '/solution/detail',
         query: {
@@ -201,7 +200,7 @@ export default {
     img {
       width: 100%;
       max-width: 100%; /* 防止宽度超出容器 */
-      object-fit: fill; /* 保持图片内容的完整性，可以根据需求调整为 cover 或 contain */
+      object-fit: cover; /* 保持图片内容的完整性，可以根据需求调整为 cover 或 contain */
     }
   }
   .hager-industry-solutions {