解决方案自适应样式优化

hookehuyr
Commit ee56c98640188404308d730adf2b5795c819dcf9 ee56c986 1 parent 43170a48
Showing 2 changed files with 130 additions and 56 deletions
src/views/solution/detail.vue
src/views/solution/index.vue
--- a/src/views/solution/detail.vue
View file @ee56c98
+++ b/src/views/solution/detail.vue
View file @ee56c98
 <!--
  * @Date: 2024-09-29 15:49:27
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-16 18:55:21
+ * @LastEditTime: 2024-10-21 14:43:11
  * @FilePath: /hager/src/views/solution/detail.vue
  * @Description: 文件描述
 -->
@@ -18,7 +18,7 @@
         </div>
       </div>
     </hager-box>
-    <hager-box class="box-n">
+    <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;">
@@ -27,7 +27,7 @@
             </el-carousel-item>
           </el-carousel>
         </el-col>
-        <el-col class="brief-introduction" :span="12">
+        <el-col :span="12" class="brief-introduction">
           <div class="intro-box">
             <hager-h1 title="学校解决方案" sub="Electronic solutions"></hager-h1>
             <p style="margin: 2rem 0;">淨於电气开乐驾能民电峰决方案，提供安全。可靠。摄作友好。易于堆护的电力划！ 1h14. n53 X0(009121 3098. 228 41324849 56MeD 换至备用电源，保障救学和生活的连续性。</p>
@@ -36,24 +36,67 @@
         </el-col>
       </el-row>
     </hager-box>
+    <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-image @click="onClickImg(item.src)" style="width: 100%; height: 100%;" fit="fill" :src="item.src"></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>
+          <i class="el-icon-right"></i>
+        </div>
+      </div>
+    </div>
     <hager-box class="box-2n">
       <hager-h1 title="成功案例" sub="Success Cases" style="margin: 2rem 0;"></hager-h1>
-      <div class="hager-success-cases">
+      <div v-if="!is_xs">
-        <div class="card" v-for="(item, index) in success_data_list" :key="index">
+        <div class="hager-success-cases">
-          <img :src="item.img" alt="学校图片" class="card-image">
+          <div class="card" v-for="(item, index) in success_data_list" :key="index">
-          <div class="card-content">
+            <img :src="item.img" alt="学校图片" class="card-image">
-            <h3>{{ item.title }}</h3>
+            <div class="card-content">
-            <p>{{ item.sub }}</p>
+              <h3>{{ item.title }}</h3>
-            <i class="el-icon-right"></i>
+              <p>{{ item.sub }}</p>
+              <i class="el-icon-right"></i>
+            </div>
           </div>
         </div>
+        <div style="display: flex; justify-content: center; margin-top: 2rem;">
+          <hager-more></hager-more>
+        </div>
       </div>
-      <div style="display: flex; justify-content: center; margin-top: 2rem;">
+      <div v-else>
-        <hager-more></hager-more>
+        <swiper ref="mySuccessSwiper" class="swiper" :options="swiperOption" @slideChange="onSuccessSlideChange">
+          <swiper-slide v-for="(item, index) in success_data_list" :key="index">
+            <div class="hager-success-cases xs">
+              <div class="card">
+                <img :src="item.img" alt="学校图片" class="card-image">
+                <div class="card-content">
+                  <h3>{{ item.title }}</h3>
+                  <p class="clamp-text">{{ item.sub }}</p>
+                  <i class="el-icon-right"></i>
+                </div>
+              </div>
+            </div>
+          </swiper-slide>
+        </swiper>
+        <div v-if="success_data_list.length > SuccessSlidesPerView || is_xs" 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="Our advantages" style="margin: 2rem 0;"></hager-h1>
+      <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)">
@@ -65,8 +108,8 @@
           </div>
         </swiper-slide>
       </swiper>
-      <div class="hager-product-center-more">
+      <div v-if="product_list.length > productSlidesPerView || is_xs" class="hager-product-center-more">
-        <hager-more></hager-more>
+        <!-- <hager-more></hager-more> -->
         <div class="xs-control">
           <div>
             <i :class="['el-icon-arrow-left', activeProductIndex === 0 ? 'disabled' : '']" @click="prevProductBtn()"></i>
@@ -86,6 +129,7 @@ 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';
 export default {
   components: { hagerBox, hagerH1, hagerMore, hagerHCarousel, hagerService },
@@ -105,27 +149,27 @@ export default {
       success_data_list: [{
         title: '厦门翔城中小学',
         sub: '占地面积约43811.99平方米，总建筑面积约32188.83平方米，规模48个教学班，可提供2400个优质初中学位。翔城中学是翔安第一所拥有游泳馆的中学。',
-        img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+        img: 'https://cdn.ipadbiz.cn/hager/img/WX20241021-135715@2x.png',
       }, {
         title: '厦门翔城中小学',
         sub: '占地面积约43811.99平方米，总建筑面积约32188.83平方米，规模48个教学班，可提供2400个优质初中学位。翔城中学是翔安第一所拥有游泳馆的中学。',
-        img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+        img: 'https://cdn.ipadbiz.cn/hager/img/WX20241021-135715@2x.png',
       }, {
         title: '厦门翔城中小学',
         sub: '占地面积约43811.99平方米，总建筑面积约32188.83平方米，规模48个教学班，可提供2400个优质初中学位。翔城中学是翔安第一所拥有游泳馆的中学。',
-        img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+        img: 'https://cdn.ipadbiz.cn/hager/img/WX20241021-135715@2x.png',
       }, {
         title: '厦门翔城中小学',
         sub: '占地面积约43811.99平方米，总建筑面积约32188.83平方米，规模48个教学班，可提供2400个优质初中学位。翔城中学是翔安第一所拥有游泳馆的中学。',
-        img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+        img: 'https://cdn.ipadbiz.cn/hager/img/WX20241021-135715@2x.png',
       }, {
         title: '厦门翔城中小学',
         sub: '占地面积约43811.99平方米，总建筑面积约32188.83平方米，规模48个教学班，可提供2400个优质初中学位。翔城中学是翔安第一所拥有游泳馆的中学。',
-        img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+        img: 'https://cdn.ipadbiz.cn/hager/img/WX20241021-135715@2x.png',
       }, {
         title: '厦门翔城中小学',
         sub: '占地面积约43811.99平方米，总建筑面积约32188.83平方米，规模48个教学班，可提供2400个优质初中学位。翔城中学是翔安第一所拥有游泳馆的中学。',
-        img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+        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',
@@ -172,13 +216,41 @@ export default {
           }
         }
       },
-      activeSolutionIndex: 0,
+      activeSuccessIndex: 0,
       activeProductIndex: 0,
+      reach_success_end: false,
       reach_product_end: false,
+      SuccessSlidesPerView: 4,
+      productSlidesPerView: 4,
     }
   },
   mounted () {
+    this.$nextTick(() => {
+      this.$refs.myProductSwiper.$swiper?.on('breakpoint', (swiper) => {
+        // breakpoint时 显示的条数
+        this.productSlidesPerView = swiper.slidesPerView
+      });
+      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 + '...'); // 添加省略号
+          }
+        }
+      }
+
+      clampText('.clamp-text', 3); // 限制显示三行文本
+    });
   },
   methods: {
     onClickImg (item) {
@@ -192,6 +264,12 @@ export default {
     prevProductBtn () {
       this.$refs.myProductSwiper.$swiper.slidePrev();
     },
+    nextSuccessBtn () {
+      this.$refs.mySuccessSwiper.$swiper.slideNext();
+    },
+    prevSuccessBtn () {
+      this.$refs.mySuccessSwiper.$swiper.slidePrev();
+    },
     nextProductBtn () {
       this.$refs.myProductSwiper.$swiper.slideNext();
     },
@@ -205,6 +283,17 @@ export default {
         this.reach_product_end = false;
       }
     },
+    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;
+      } else {
+        this.reach_success_end = false;
+      }
+    },
   }
 }
 </script>
@@ -230,8 +319,14 @@ export default {
   .brief-introduction {
     background-color: #FFF;
     height: 25rem;
+    &.xs {
+      height: auto;
+    }
     .intro-box {
       padding: 3rem;
+      &.xs {
+        padding: 2rem;
+      }
       i {
         color: @primary-color;
         font-size: 1.5rem;
@@ -240,40 +335,20 @@ export default {
   }
   .hager-success-cases {
     margin-top: 2rem;
-    // display: grid;
-    // grid-template-columns: repeat(3, 1fr); /* 一行显示4个 */
-    // gap: 1.5rem; /* 每个项目之间的间距 */
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between; /* 确保子元素之间的空间被均匀分配 */
-    // .case-item {
+    &.xs {
-    //   position: relative;
+      display: block;
-    //   height: 12rem;
+    }
-    //   padding: 1.5rem;
-    //   text-align: center;
-    //   color: #FFF;
-    //   border-radius: 8px;
-    //   background-image: url('https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg');
-    //   background-size: cover;
-    //   background-position: top center;
-    //   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;
-    //   }
-    // }
     .card {
-      // margin: 0.5rem;
       flex: 0 0 32.33%; /* 宽度为 1/3 */
       margin-bottom: 1rem; /* 在元素之间添加间距 */
       box-sizing: border-box; /* 防止 padding 或 margin 影响宽度 */
-      // width: 300px;
       border-radius: 10px;
       box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
       overflow: hidden;
       background-color: #fff;
-      // margin: 0;
       transition: transform 0.3s ease-in-out;
       &:hover {
         transform: scale(1.05);
@@ -347,7 +422,7 @@ export default {
       }
     }
     .card-title {
-      color: @secondary-color;
+      color: @text-color;
       font-weight: bold;
       margin: 1rem 0;
       &:hover {
@@ -356,6 +431,5 @@ export default {
       }
     }
   }
-
 }
 </style>
--- a/src/views/solution/index.vue
View file @ee56c98
+++ b/src/views/solution/index.vue
View file @ee56c98
@@ -31,7 +31,7 @@
               <div class="card-content">
                 <div class="card-title">
                   <span>{{ x.title }}</span>
-                  <i class="el-icon-right"></i>
+                  <i class="el-icon-right" style="color: #00ABE5;"></i>
                 </div>
                 <p class="card-sub">{{ x.sub }}</p>
               </div>
@@ -82,35 +82,35 @@ export default {
   data () {
     return {
       solution_list: [{
-        src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+        src: 'https://cdn.ipadbiz.cn/hager/img/WX20241021-110827@2x.png',
         title: '1住宅解决方案',
         sub: 'Residential Solution Case'
       }, {
-        src: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
+        src: 'https://cdn.ipadbiz.cn/hager/img/WX20241021-110827@2x.png',
         title: '2住宅解决方案',
         sub: 'Residential Solution Case'
       }, {
-        src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+        src: 'https://cdn.ipadbiz.cn/hager/img/WX20241021-110827@2x.png',
         title: '3住宅解决方案',
         sub: 'Residential Solution Case'
       }, {
-        src: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
+        src: 'https://cdn.ipadbiz.cn/hager/img/WX20241021-110827@2x.png',
         title: '4住宅解决方案',
         sub: 'Residential Solution Case'
       }, {
-        src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+        src: 'https://cdn.ipadbiz.cn/hager/img/WX20241021-110827@2x.png',
         title: '1住宅解决方案',
         sub: 'Residential Solution Case'
       }, {
-        src: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
+        src: 'https://cdn.ipadbiz.cn/hager/img/WX20241021-110827@2x.png',
         title: '2住宅解决方案',
         sub: 'Residential Solution Case'
       }, {
-        src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+        src: 'https://cdn.ipadbiz.cn/hager/img/WX20241021-110827@2x.png',
         title: '3住宅解决方案',
         sub: 'Residential Solution Case'
       }, {
-        src: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
+        src: 'https://cdn.ipadbiz.cn/hager/img/WX20241021-110827@2x.png',
         title: '4住宅解决方案',
         sub: 'Residential Solution Case'
       }],