关于创新自适应显示

hookehuyr
Commit 4f0557d7d6c6beaba0eef1af2e52c62df686bee4 4f0557d7 1 parent 819b5076
Showing 1 changed file with 138 additions and 11 deletions
src/views/about/design.vue
--- a/src/views/about/design.vue
View file @4f0557d
+++ b/src/views/about/design.vue
View file @4f0557d
 <!--
  * @Date: 2024-10-17 11:13:44
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-17 15:04:56
+ * @LastEditTime: 2024-10-22 10:05:52
  * @FilePath: /hager/src/views/about/design.vue
  * @Description: 文件描述
 -->
@@ -15,7 +15,7 @@
         </el-breadcrumb>
       </div>
     </hager-box>
-    <hager-box>
+    <hager-box v-if="!is_xs">
       <el-row style="margin: 3rem 0;">
         <el-col :span="8">
           <div class="about-box">
@@ -35,20 +35,44 @@
         </el-col>
       </el-row>
     </hager-box>
+    <div v-else style="margin-top: 1rem;">
+      <div class="about-img"></div>
+      <div class="about-box xs">
+        <div>
+          <div class="title">
+            <p class="c">创新设计</p>
+            <p class="e">Innovative Design</p>
+          </div>
+          <div class="introduce" v-clamp="3">
+            <p>海格电气一直致力于创新，<br/>我们与客户共同着手面向未来的主题。</p>
+          </div>
+          </div>
+      </div>
+    </div>
     <hager-box class="box-2n">
       <hager-h1 title="从产品到解决方案" sub="From Products to Solutions" style="margin: 2rem 0;"></hager-h1>
-      <el-row :gutter="20" style="margin-bottom: 2rem;">
+      <div>
-        <el-col :span="8" v-for="(item, index) in list" :key="index" class="products-solutions">
+        <swiper ref="myDesignSwiper" class="swiper" :options="swiperOption" @slideChange="onDesignSlideChange">
+          <swiper-slide v-for="(item, index) in design_list" :key="index">
+            <div class="products-solutions">
               <div class="img-box" :style="{ backgroundImage: 'url('+item.cover+')' }"></div>
               <div class="text-box" style="background-color: #FFF;">
                 <div class="title">{{ item.title }}</div>
                 <div class="sub">{{ item.sub }}</div>
                 <div class="content" v-clamp="2">{{ item.content }}</div>
               </div>
-        </el-col>
+            </div>
-      </el-row>
+          </swiper-slide>
+        </swiper>
+        <div v-if="design_list.length > designSlidesPerView || is_xs" class="xs-control">
+          <div>
+            <i :class="['el-icon-arrow-left', activeDesignIndex === 0 ? 'disabled' : '']"@click="prevDesignBtn()"></i>
+            <i :class="['el-icon-arrow-right', reach_design_end ? 'disabled' : '']" @click="nextDesignBtn()"></i>
+          </div>
+        </div>
+      </div>
     </hager-box>
-    <hager-box class="box-n">
+    <hager-box v-if="!is_xs" class="box-n">
       <el-row :gutter="30" style="margin-top: 2rem;margin-bottom: 2rem;">
         <el-col :span="12">
           <div class="left-box">
@@ -70,6 +94,22 @@
         </el-col>
       </el-row>
     </hager-box>
+    <div v-else>
+      <div class="left-box xs">
+        <div class="title xs">
+          <hager-h1 title="从用户体验到设计" sub="From User Experience to Design"></hager-h1>
+          <div style="margin-top: 2rem; line-height: 1.75;">
+            <p>海格电气仔细倾听客户的声音，以使我们的设计语言能够被普遍理解。为了提供更加国际化的产品组合，我们调研了不同国家的习俗、个人的不同愿望和客户关注点。客户的声音促成了符合人体工学的设计方案，确保来自海格电气的产品兼具优雅品味的外观设计与方便易用、以人为本的功能性。</p>
+          </div>
+        </div>
+      </div>
+      <div class="right-box xs">
+        <p class="title">“倾听客户的声音，打造一流设计”</p>
+        <div>
+          <img style="width: 100%; height: 10rem;" src="https://cdn.ipadbiz.cn/hager/img/about/g13@2x.png" alt="">
+        </div>
+      </div>
+    </div>
   </div>
 </template>
@@ -82,7 +122,7 @@ export default {
   mixins: [mixin.init],
   data () {
     return {
-      list: [{
+      design_list: [{
         cover: 'https://cdn.ipadbiz.cn/hager/img/about/g10@2x-1.png',
         title: '电动交通',
         sub: 'Electric Transportation',
@@ -97,14 +137,70 @@ export default {
         title: '能源效率',
         sub: 'Energy Efficiency',
         content: '节能产品有助于优化和降低能源消耗。'
-      }]
+      }],
+      swiperOption: {
+        slidesPerView: 2,
+        spaceBetween: 20,
+        preventClicks : true,
+        slideToClickedSlide: false,
+        touchRatio: 0,
+        breakpoints: {
+          1480: {
+            slidesPerView: 3,
+            spaceBetween: 30
+          },
+          1024: {
+            slidesPerView: 3,
+            spaceBetween: 30
+          },
+          768: {
+            slidesPerView: 3,
+            spaceBetween: 20
+          },
+          640: {
+            slidesPerView: 1,
+            spaceBetween: 20
+          },
+          320: {
+            slidesPerView: 1,
+            spaceBetween: 10
+          },
+          160: {
+            slidesPerView: 1,
+            spaceBetween: 0
+          }
+        }
+      },
+      activeDesignIndex: 0,
+      reach_design_end: false,
+      designSlidesPerView: 3,
     }
   },
   mounted () {
-
+    this.$nextTick(() => {
+      this.$refs.myDesignSwiper.$swiper?.on('breakpoint', (swiper) => {
+        // breakpoint时 显示的条数
+        this.designSlidesPerView = swiper.slidesPerView
+      });
+    });
   },
   methods: {
+    prevDesignBtn () {
+      this.$refs.myDesignSwiper.$swiper.slidePrev();
+    },
+    nextDesignBtn () {
+      this.$refs.myDesignSwiper.$swiper.slideNext();
+    },
+    onDesignSlideChange () {
+      this.activeDesignIndex = this.$refs.myDesignSwiper.$swiper.activeIndex;
+      const isEnd = this.$refs.myDesignSwiper.$swiper.isEnd;
+      if (isEnd) {
+        this.reach_design_end = true;
+      } else {
+        this.reach_design_end = false;
+      }
+    }
   }
 }
 </script>
@@ -125,6 +221,9 @@ export default {
       padding: 2rem;
       height: 30rem; /* 让 .about-box 撑满父容器 */
       box-sizing: border-box;
+      &.xs {
+        height: auto;
+      }
       .title {
         font-weight: bold;
         .c {
@@ -174,13 +273,25 @@ export default {
       background-color: #E3F1F7;
       height: 25rem;
       padding: 2rem;
+      &.xs {
+        height: auto;
+      }
       .title {
         top: 30%;
         transform: translateY(30%);
+        &.xs {
+          transform: translateY(0);
+        }
       }
     }
     .right-box {
-      top: 30%; transform: translateY(30%); padding: 2rem;
+      top: 30%;
+      transform: translateY(30%);
+      padding: 2rem;
+      &.xs {
+        top: 0;
+        transform: translateY(0);
+      }
       .title {
         text-align: center;
         font-size: 1.55rem;
@@ -189,5 +300,21 @@ export default {
         color: @secondary-color;
       }
     }
+
+    .xs-control {
+      display: flex;
+      justify-content: flex-end;
+      margin-top: 1rem;
+      i {
+        font-size: 1.35rem;
+        color: #EE6D10;
+        &:hover {
+          cursor: pointer;
+        }
+        &.disabled {
+          color: #ccc;
+        }
+      }
+    }
   }
 </style>