<!--
 * @Date: 2024-10-17 11:13:44
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2024-12-09 13:41:32
 * @FilePath: /hager/src/views/about/design.vue
 * @Description: 文件描述
-->
<template>
  <div class="hager-about-global-page">
    <hager-box>
      <div style="margin-top: 1.5rem;">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/about' }">关于海格</el-breadcrumb-item>
          <el-breadcrumb-item>{{ $route.name }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </hager-box>
    <hager-box v-if="!is_xs">
      <el-row style="margin: 3rem 0;">
        <el-col :span="8">
          <div class="about-box">
            <div style="top: 50%; transform: translateY(50%);">
              <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>
        </el-col>
        <el-col :span="16">
          <div class="about-img"></div>
        </el-col>
      </el-row>
    </hager-box>
    <div v-else style="margin-top: 1rem;">
      <div class="about-img xs"></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: 1rem 0;"></hager-h1>
      <div>
        <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>
            </div>
          </swiper-slide>
        </swiper>
        <div v-if="design_list.length > designSlidesPerView || (is_xs && design_list.length > 2)" class="xs-control">
          <div>
            <i :class="['el-icon-arrow-left', activeDesignIndex === 0 ? 'disabled' : '']"@click="prevDesignBtn()"></i>&nbsp;
            <i :class="['el-icon-arrow-right', reach_design_end ? 'disabled' : '']" @click="nextDesignBtn()"></i>
          </div>
        </div>
      </div>
    </hager-box>
    <hager-box v-if="!is_xs" class="box-n">
      <hager-h1 title="从用户体验到设计" sub="From User Experience to Design" style="margin-top: 1rem;"></hager-h1>
      <el-row :gutter="0" style="margin-top: 2rem;margin-bottom: 2rem;">
        <el-col :span="12">
          <!-- <div class="left-box">
            <div class="title">
              <hager-h1 title="从用户体验到设计" sub="From User Experience to Design"></hager-h1>
              <div style="margin-top: 2rem; line-height: 1.75;" v-clamp="4">
                <p>海格电气仔细倾听客户的声音，以使我们的设计语言能够被普遍理解。为了提供更加国际化的产品组合，我们调研了不同国家的习俗、个人的不同愿望和客户关注点。客户的声音促成了符合人体工学的设计方案，确保来自海格电气的产品兼具优雅品味的外观设计与方便易用、以人为本的功能性。</p>
              </div>
            </div>
          </div> -->
          <div style="box-shadow: 0px 0px 16px 1px rgba(0,0,0,0.09); height: 29rem;">
            <div class="right-box">
              <p class="title">“倾听客户的声音，打造一流设计”</p>
              <div>
                <img style="width: 100%; height: 15rem;" src="https://cdn.ipadbiz.cn/hager/img/about/jiang@2x.png" alt="">
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <!-- <div class="right-box">
            <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 style="background-image: url(https://cdn.ipadbiz.cn/hager/img/about/g09@2x.png); background-size: cover; background-repeat: no-repeat; height: 29rem;"></div>
        </el-col>
      </el-row>
      <div style="margin-top: 2rem; line-height: 1.75;" v-clamp="4">
        <p>海格电气仔细倾听客户的声音，以使我们的设计语言能够被普遍理解。为了提供更加国际化的产品组合，我们调研了不同国家的习俗、个人的不同愿望和客户关注点。客户的声音促成了符合人体工学的设计方案，确保来自海格电气的产品兼具优雅品味的外观设计与方便易用、以人为本的功能性。</p>
      </div>
    </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: 15rem;" src="https://cdn.ipadbiz.cn/hager/img/about/jiang@2x.png">
        </div>
      </div>
      <div>
        <img style="width: 100%; height: 20rem;" src="https://cdn.ipadbiz.cn/hager/img/about/g09@2x.png">
      </div>
      <div style="line-height: 2; padding: 1rem;">
        <p>海格电气仔细倾听客户的声音，以使我们的设计语言能够被普遍理解。为了提供更加国际化的产品组合，我们调研了不同国家的习俗、个人的不同愿望和客户关注点。客户的声音促成了符合人体工学的设计方案，确保来自海格电气的产品兼具优雅品味的外观设计与方便易用、以人为本的功能性。</p>
      </div>
    </div>
  </div>
</template>

<script>
import mixin from 'common/mixin';
import hagerBox from '@/components/common/hagerBox';

export default {
  components: { hagerBox },
  mixins: [mixin.init],
  data () {
    return {
      design_list: [{
        cover: 'https://cdn.ipadbiz.cn/hager/img/about/g10@2x-1.png',
        title: '电动交通',
        sub: 'Electric Transportation',
        content: '供电网络为开启电动交通的未来保驾护航，公关和私人场所均提供智能充电站。'
      }, {
        cover: 'https://cdn.ipadbiz.cn/hager/img/about/g11@2x-1.png',
        title: '楼宇自动化',
        sub: 'Building Automation',
        content: '楼宇自动化将会同时带来高效节能及优质舒适的生活。'
      }, {
        cover: 'https://cdn.ipadbiz.cn/hager/img/about/g12@2x-1.png',
        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: 2,
            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>

<style lang="less" scoped>
  .hager-about-global-page {
    .about-img {
      width: 100%;
      height: 30rem;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      background-image: url('https://cdn.ipadbiz.cn/hager/img/about/g09@2x-1.png');
      &.xs {
        height: 20rem;
      }
    }
    .about-box {
      background-color: #F7F7F7;
      position: relative; /* 父容器设置为相对定位 */
      padding: 2rem;
      height: 30rem; /* 让 .about-box 撑满父容器 */
      box-sizing: border-box;
      &.xs {
        height: auto;
      }
      .title {
        font-weight: bold;
        .c {
          font-size: 2rem;
          color: @secondary-color;
        }
        .e {
          font-size: 1.5rem;
          color: @primary-color;
        }
      }
      .introduce {
        line-height: 1.75;
        margin-top: 1rem;
      }
    }

    .products-solutions {
      border: 1px solid #eee;
      .img-box {
        width: 100%;
        height: 15rem; /* 根据需要设置高度 */
        background-size: 100% 100%; /* 强制背景图填满整个容器 */
        background-position: center;
        background-repeat: no-repeat; /* 防止图片重复 */
      }
      .text-box {
        padding: 1rem;
        height: 8rem;
        .title {
          color: @secondary-color;
          font-weight: bold;
          font-size: 1.25rem;
        }
        .sub {
          color: @primary-color;
          font-weight: bold;
          margin: 0.5rem 0;
        }
        .content {
          line-height: 1.7;
        }
      }
    }

    .left-box {
      // background-color: #E3F1F7;
      height: 25rem;
      padding: 2rem;
      &.xs {
        height: auto;
      }
      .title {
        top: 30%;
        transform: translateY(30%);
        &.xs {
          transform: translateY(0);
        }
      }
    }
    .right-box {
      top: 10%;
      transform: translateY(10%);
      padding: 2rem;
      &.xs {
        top: 0;
        transform: translateY(0);
      }
      .title {
        text-align: center;
        font-size: 1.55rem;
        font-weight: bold;
        margin-bottom: 2rem;
        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>