客户新需求-解决方案详情页头部设计改动

 /*
  * @Date: 2024-08-26 10:42:15
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-12-12 14:54:14
+ * @LastEditTime: 2024-12-27 16:38:24
  * @FilePath: /hager/src/route.js
  * @Description: 文件描述
  */
@@ -78,6 +78,24 @@ export default [{
   },
   children: []
 }, {
+  path: '/solution/detail_test/:id/:timestamp',
+  name: '解决方案详情1-test',
+  component: () => import('@/views/solution/detail_test'),
+  meta: {
+    title: '解决方案 | Hager China',
+    tag: 'solution'
+  },
+  children: []
+}, {
+  path: '/solution/detail_test/:id/:current_index/:timestamp',
+  name: '解决方案详情2-test',
+  component: () => import('@/views/solution/detail_test'),
+  meta: {
+    title: '解决方案 | Hager China',
+    tag: 'solution'
+  },
+  children: []
+}, {
   path: '/solution/case/:id/:current_index?',
   name: '成功案例',
   component: () => import('@/views/solution/case'),

+<!--
+ * @Date: 2024-09-29 15:49:27
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2024-12-27 17:58:12
+ * @FilePath: /hager/src/views/solution/detail_test.vue
+ * @Description: 文件描述
+-->
+<template>
+  <div class="hager-solution-detail">
+    <hager-box v-if="!is_xs" class="top-img" :style="{ backgroundImage: 'url(' + case_banner + ')' }"></hager-box>
+    <hager-box>
+      <hager-h1 :title="case_info.category_name" :sub="case_info.category_name_en" style="margin: 3vw 0 1rem; text-align: center;"></hager-h1>
+      <div class="intro-box" style="text-align: center;">
+        <p v-html="category_description"></p>
+      </div>
+    </hager-box>
+    <hager-box v-if="case_list.length > 1">
+      <div class="hager-solution-detail-nav">
+        <div class="nav" v-for="(item, index) in case_list" :key="index">
+          <div @click="changeCase(item, index)" :class="[current_id == item.id ? 'current-nav' : '', 'detail-nav']">{{ item.category_name }}</div>
+        </div>
+      </div>
+    </hager-box>
+    <hager-box v-if="!is_xs" class="box-n">
+      <hager-h1 title="典型配电系统图" sub="Typical Electrical Distribution System" style="margin: 2rem 0;"></hager-h1>
+      <div style="display: flex; justify-content:space-between; align-items: center;">
+        <div @click="onClickImg(item.value)" v-for="(item, index) in case_img" :key="index" class="carousel-img-test" :style="{backgroundImage: 'url(' + item.value + ')'}"></div>
+      </div>
+    </hager-box>
+    <div v-else>
+      <hager-h1 title="典型配电系统图" sub="Typical Electrical Distribution System" style="margin: 2rem 1rem;"></hager-h1>
+      <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 case_img" :key="index" class="carousel-img">
+            <el-image @click="onClickImg(item.value)" style="width: 100%; height: 100%;" fit="cover" :src="item.value"></el-image>
+          </el-carousel-item>
+        </el-carousel>
+      </div>
+    </div>
+    <hager-box class="box-2n">
+      <hager-h1 title="成功案例" sub="Success Cases" style="margin: 2rem 0;"></hager-h1>
+      <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.cover" alt="图片" class="card-image-pc">
+            <div class="card-content-pc">
+              <h3>{{ item.post_title }}</h3>
+              <p v-html="item.post_description"></p>
+            </div>
+            <i class="el-icon-right pc"></i>
+          </div>
+        </div>
+      </div>
+      <div v-else>
+        <swiper ref="mySuccessSwiper" class="swiper" :options="swiperOption" @slideChange="onSuccessSlideChange">
+          <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.cover" alt="图片" class="card-image">
+                <div class="card-content">
+                  <!-- <h3 style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">{{ item.post_title }}</h3> -->
+                  <h3 class="clamp-title">{{ item.post_title }}</h3>
+                  <!-- <p class="clamp-text" v-html="item.post_description "></p> -->
+                  <i class="el-icon-right"></i>
+                </div>
+              </div>
+            </div>
+          </swiper-slide>
+        </swiper>
+        <div v-if="success_data_list.length > SuccessSlidesPerView || (is_xs && success_data_list.length > 2)" class="hager-product-center-more xs">
+          <!-- <hager-more></hager-more> -->
+          <div class="xs-control">
+            <div>
+              <i :class="['el-icon-arrow-left', activeSuccessIndex === 0 ? 'disabled' : '']" @click="prevSuccessBtn()"></i>
+              <i :class="['el-icon-arrow-right', reach_success_end ? 'disabled' : '']" @click="nextSuccessBtn()"></i>
+            </div>
+          </div>
+        </div>
+      </div>
+    </hager-box>
+    <hager-box class="box-n">
+      <hager-h1 title="使用产品" sub="Products" style="margin: 2rem 0;"></hager-h1>
+      <swiper ref="myProductSwiper" class="swiper" :options="swiperOption" @slideChange="onProductSlideChange">
+        <swiper-slide v-for="(item, index) in product_list" :key="index">
+          <div class="card-box" @click="goToProduct(item)">
+            <div class="card-image-wrapper">
+              <!-- <el-image :src="item.src" fit="fit"></el-image> -->
+              <img :src="item.cover" style="">
+            </div>
+            <p class="card-title">{{ item.post_title }}</p>
+          </div>
+        </swiper-slide>
+      </swiper>
+      <div v-if="product_list.length > productSlidesPerView || (is_xs && product_list.length > 2)" 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>
+    </hager-box>
+    <hager-service style="background-color: #f1f1f1;"></hager-service>
+  </div>
+</template>
+
+<script>
+import mixin from 'common/mixin';
+import hagerBox from '@/components/common/hagerBox';
+import hagerH1 from '@/components/common/hagerH1.vue';
+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";
+
+function clampText(element, lines) {
+  var $element = $(element);
+  var lineHeight = parseFloat($element.css('line-height')); // 获取行高
+  var maxHeight = lineHeight * lines; // 计算三行的最大高度
+
+  // 如果内容高度超过三行，进行截断
+  if ($element.height() > maxHeight) {
+    var originalText = $element.text(); // 获取原始文本
+    var truncatedText = originalText;
+
+    // 逐字截断文本，直到高度小于或等于三行
+    while ($element.height() > maxHeight) {
+      truncatedText = truncatedText.slice(0, -1); // 每次去掉最后一个字符
+      $element.text(truncatedText + '...'); // 添加省略号
+    }
+  }
+}
+
+export default {
+  metaInfo: {
+    // title: '海格电气官方网站',
+    meta: [
+      { name: 'keyword', content: '' },
+      { name: 'description', content: '' },
+    ]
+  },
+  components: { hagerBox, hagerH1, hagerMore, hagerHCarousel, hagerService },
+  mixins: [mixin.init],
+  data () {
+    return {
+      case_info: {},
+      case_banner: '',
+      case_img: [],
+      banner_list: [],
+      success_data_list: [],
+      product_list: [],
+      swiperOption: {
+        slidesPerView: 2,
+        spaceBetween: 50,
+        preventClicks : true,
+        slideToClickedSlide: false,
+        touchRatio: 0,
+        breakpoints: {
+          1024: {
+            slidesPerView: 4,
+            spaceBetween: 40
+          },
+          768: {
+            slidesPerView: 3,
+            spaceBetween: 30
+          },
+          640: {
+            slidesPerView: 2,
+            spaceBetween: 20
+          },
+          320: {
+            slidesPerView: 2,
+            spaceBetween: 10
+          },
+          160: {
+            slidesPerView: 1,
+            spaceBetween: 0
+          }
+        }
+      },
+      activeSuccessIndex: 0,
+      activeProductIndex: 0,
+      reach_success_end: false,
+      reach_product_end: false,
+      SuccessSlidesPerView: 4,
+      productSlidesPerView: 4,
+      case_list: [],
+      current_index: 0,
+      current_id: '',
+      category_description: '',
+    }
+  },
+  mounted () {
+    this.initialize();
+  },
+  watch: {
+    '$route.params.id' (old, val) {
+      if (old !== val) {
+        this.initialize();
+      }
+    }
+  },
+  methods: {
+    async initialize () {
+      const { code, data } = await getSolutionCaseAPI({ cid: this.$route.params.id });
+      if (code) {
+        this.case_info = data;
+        this.case_banner = data.file?.banner ? data.file?.banner[0] : 'https://cdn.ipadbiz.cn/hager/banner/banner08.png';
+        this.case_list = data.list;
+        this.category_description = data.category_description;
+        this.current_index = this.$route.params.current_index ? +this.$route.params.current_index : 0;
+        this.current_id = this.case_list[this.current_index]['id'];
+        this.success_data_list = this.case_list[this.current_index].list ?? [];
+        // this.category_description = this.case_list[this.current_index].category_description ?? '';
+        this.case_img = this.case_list[this.current_index].file?.img ? this.case_list[this.current_index].file?.img : ['https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'];
+        this.product_list = this.case_list[this.current_index].product ?? [];
+      }
+      this.$nextTick(() => {
+        this.$refs.myProductSwiper.$swiper?.on('breakpoint', (swiper) => {
+          // breakpoint时 显示的条数
+          this.productSlidesPerView = swiper.slidesPerView
+        });
+
+        clampText('.clamp-text', 3); // 限制显示三行文本
+      });
+    },
+    onClickImg (item) {
+      window.open(item, '_blank');
+    },
+    goToProduct (v) {
+      this.$router.push({
+        path: `/product/detail/${v.id}`,
+      });
+    },
+    goToCase (v) {
+      this.$router.push({
+        path: `/solution/case/${v.id}/${this.current_index}`,
+      });
+    },
+    prevProductBtn () {
+      this.$refs.myProductSwiper.$swiper.slidePrev();
+    },
+    nextSuccessBtn () {
+      this.$refs.mySuccessSwiper.$swiper.slideNext();
+    },
+    prevSuccessBtn () {
+      this.$refs.mySuccessSwiper.$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;
+      }
+    },
+    onSuccessSlideChange () {
+      this.activeSuccessIndex = this.$refs.mySuccessSwiper.$swiper.activeIndex;
+      const isEnd = this.$refs.mySuccessSwiper.$swiper.isEnd;
+
+      if (isEnd) {
+        this.reach_success_end = true;
+      } else {
+        this.reach_success_end = false;
+      }
+    },
+    changeCase (v, idx) {
+      this.current_index = idx;
+      this.current_id = this.case_list[idx]['id'];
+      this.success_data_list = this.case_list[idx].list ?? [];
+      // this.category_description = this.case_list[idx].category_description ?? '';
+      this.case_img = this.case_list[idx].file?.img ? this.case_list[idx].file?.img : ['https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'];
+      this.product_list = this.case_list[idx].product ?? [];
+      this.activeSuccessIndex = 0
+      this.activeProductIndex = 0
+      this.reach_product_end = false
+      this.reach_success_end = false
+
+      this.$nextTick(() => {
+        this.$refs.myProductSwiper.$swiper?.slideTo(0);
+        clampText('.clamp-text', 3); // 限制显示三行文本
+
+      })
+      // 记录点击的分类ID，用于返回定位到该分类
+      this.$router.push({
+        path: `/solution/detail_test/${this.$route.params.id}/${this.current_index}/${Date.now()}`,
+      });
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.hager-solution-detail {
+  .top-img {
+    width: 100%;
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center;
+    position: relative;
+    height: 25rem;
+    .top-center {
+      position: absolute;
+      transform: translateY(100%); /* 垂直与水平居中 */
+    }
+  }
+  .carousel-img {
+    &:hover {
+      cursor: zoom-in;
+    }
+  }
+  .carousel-img-test{
+    width: 49%;
+    border-radius: 5px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    background-size: cover;
+    height: 25vw;
+    &:hover {
+      cursor: zoom-in;
+    }
+  }
+  .brief-introduction {
+    background-color: #FFF;
+    height: 25rem;
+    display: flex;
+    align-items: center;
+    &.xs {
+      height: auto;
+    }
+    .intro-box {
+      padding: 0 3rem;
+      overflow: auto;
+      // height: 25rem;
+      box-sizing:border-box;
+      display: flex;
+      // align-items: center;
+      margin-top: 2rem;
+      &.xs {
+        padding: 2rem;
+        display: block;
+        overflow: visible;
+      }
+      i {
+        color: @primary-color;
+        font-size: 1.5rem;
+      }
+    }
+  }
+  .hager-success-cases {
+    margin-top: 2rem;
+    display: flex;
+    flex-wrap: wrap;
+    // justify-content: space-between; /* 确保子元素之间的空间被均匀分配 */
+    // gap: 1vw;
+    &.xs {
+      display: block;
+    }
+    .card {
+      flex: 0 0 32.33%; /* 宽度为 1/3 */
+      margin-bottom: 0.25vw; /* 在元素之间添加间距 */
+      box-sizing: border-box; /* 防止 padding 或 margin 影响宽度 */
+      border-radius: 10px;
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+      overflow: hidden;
+      background-color: #fff;
+      transition: transform 0.3s ease-in-out;
+      position: relative;
+      margin-right: 0.75rem;
+      margin-bottom: 0.75rem;
+      &:nth-child(3n) {
+        margin-right: 0;
+      }
+      &:hover {
+        transform: scale(1.05);
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+        cursor: pointer;
+      }
+      .card-image-pc {
+        width: 100%;
+        height: 15rem;
+        object-fit: cover;
+      }
+      .card-image {
+        width: 100%;
+        height: 12rem;
+        object-fit: cover;
+      }
+
+      .card-content-pc {
+        padding: 1rem 1.5rem;
+        margin-bottom: 2rem;
+        h3 {
+          color: @secondary-color;
+          font-size: 1.25rem;
+          margin: 0;
+          margin-bottom: 0.5rem;
+        }
+        p {
+          font-size: 0.95rem;
+          line-height: 1.8;
+        }
+      }
+      .card-content {
+        padding: 1rem 1.5rem;
+        .clamp-title {
+          color: @secondary-color;
+          font-size: 1.25rem;
+          margin: 0;
+          margin-bottom: 0.5rem;
+          min-height: calc(2 * 1.5em); /* 假设行高为 1.5em */
+          line-height: 1.5em;
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 2; /* 显示两行 */
+          overflow: hidden;
+        }
+        p {
+          font-size: 0.95rem;
+          line-height: 1.8;
+        }
+        i {
+        margin-top: 0.5rem;
+        color: @primary-color;
+        font-size: 1.5rem;
+      }
+      }
+      i.pc {
+        position: absolute;
+        bottom: 0;
+        display: inline-flex;
+        margin-top: 0.5rem;
+        margin-left: 1.5rem;
+        margin-bottom: 1rem;
+        color: @primary-color;
+        font-size: 1.5rem;
+      }
+
+      .card p {
+        font-size: 14px;
+        color: #333;
+        line-height: 1.6;
+        margin-bottom: 15px;
+      }
+    }
+  }
+
+  .xs-control {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 1rem;
+    i {
+      font-size: 1.35rem;
+      color: #EE6D10;
+      &:hover {
+        cursor: pointer;
+      }
+      &.disabled {
+        color: #ccc;
+      }
+    }
+  }
+
+  .card-box {
+    .card-image-wrapper {
+      background-color: #FFF;
+      border-radius: 5px;
+      transition: transform 0.3s ease-in-out;
+      border: 1px solid rgba(0, 0, 0, 0.1);
+      overflow: hidden;
+      &:hover {
+        // box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+        cursor: pointer;
+      }
+      img {
+        width: 14rem;
+        margin-left: calc((100% - 14rem) / 2);
+        height: auto;
+      }
+    }
+    .card-title {
+      color: @text-color;
+      font-weight: bold;
+      margin: 1rem 0;
+      &:hover {
+        cursor: pointer;
+        text-decoration: underline;
+      }
+    }
+  }
+
+  .hager-solution-detail-nav {
+    background-color: #F3F3F3;
+    display: flex;
+    align-items: center;
+    justify-content:space-around;
+    margin-top: 2rem;
+    .nav {
+      flex: 1;
+      // text-align: center;
+      padding: 1.5rem 10vw;
+      position: relative;
+      &:not(:last-child) {
+        &::after {
+          content: '|';
+          position: absolute;
+          right: 0rem;
+          top: 50%;
+          transform: translateY(-50%);
+          color: #adadad;
+          font-size: 1rem;
+        }
+      }
+      &:first-child {
+        text-align: right;
+      }
+      &:last-child {
+        text-align: left;
+      }
+    }
+    .detail-nav {
+      display: inline;
+      color: @text-color;
+      font-size: 1.2rem;
+      padding: 1.4rem;
+      &:hover {
+        cursor: pointer;
+      }
+    }
+    .current-nav {
+      color: @secondary-color;
+      border-bottom: 3px solid #ED6C00;
+      font-weight: bold;
+    }
+  }
+}
+</style>