<!--
 * @Date: 2024-10-17 09:22:56
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2024-11-11 11:20:45
 * @FilePath: /hager/src/views/about/index.vue
 * @Description: 文件描述
-->
<template>
  <div class="hager-about-page">
    <hager-box v-if="!is_xs" :class="['top-img', is_xs ? 'xs' : '']" :style="{ backgroundImage: 'url(https://cdn.ipadbiz.cn/hager/img/tiny/banner04@2x.png)' }">
      <div class="banner-text-wrapper" style="margin-top: 8%;">
        <div class="text">
          <p class="title" style="">海格E3可持续发展理念</p>
          <p class="sub" style="">Ethics 道德</p>
          <p class="sub" style="">Environment 环境</p>
          <p class="sub" style="">Energy 能源</p>
        </div>
      </div>
    </hager-box>
    <hager-box v-else>
      <div class="banner-text-wrapper top-center">
        <div class="text">
          <p class="title" style="margin-bottom: 0; font-size: 5vw;">关于海格</p>
          <p class="sub" style="font-size: 4vw;">About Hager</p>
        </div>
      </div>
    </hager-box>
    <hager-box v-if="!is_xs" class="box-n" style="margin-top: 2rem;">
      <el-row v-for="(item, index) in intro_list" :key="index" style="margin-bottom: 3rem;">
        <el-col :span="12">
          <div v-if="index % 2 === 0" class="about-img" :style="{ 'background-image': 'url('+ item.img +')' }"></div>
          <div v-else class="about-box">
            <div class="title">
              <p class="c">{{ item.c_title }}</p>
              <p class="e">{{ item.e_title }}</p>
            </div>
            <div class="introduce" v-clamp="3">{{ item.content }}</div>
            <div class="more">
              <div class="btn" @click="goTo(item.link)">MORE</div>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div v-if="index % 2 === 0" class="about-box">
            <div class="title">
              <p class="c">{{ item.c_title }}</p>
              <p class="e">{{ item.e_title }}</p>
            </div>
            <div class="introduce" v-clamp="3">{{ item.content }}</div>
            <div class="more">
              <div class="btn" @click="goTo(item.link)">MORE</div>
            </div>
          </div>
          <div v-else class="about-img" :style="{ 'background-image': 'url('+ item.img +')' }"></div>
        </el-col>
      </el-row>
    </hager-box>
    <div v-else>
      <div v-for="(item, index) in intro_list" :key="index" style="padding: 1rem;">
        <div class="about-img xs" :style="{ 'background-image': 'url('+ item.img +')' }"></div>
        <div class="about-box xs">
          <div class="title">
            <p class="c xs">{{ item.c_title }}</p>
            <p class="e xs">{{ item.e_title }}</p>
          </div>
          <div class="introduce" v-clamp="3">{{ item.content }}</div>
          <div class="more xs">
            <div class="btn" @click="goTo(item.link)">MORE</div>
          </div>
        </div>
      </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 {
      intro_list: [{
        img: 'https://cdn.ipadbiz.cn/hager/img/about/g071@2x.png',
        c_title: '海格全球',
        e_title: 'Hager Group',
        content: '海格集团是全球领先的低压电气及智能化解决方案和服务供应商，行业领域涵盖建筑（住宅、商业、公建）、电力和工业。',
        link: '/about/global',
      },{
        img: 'https://cdn.ipadbiz.cn/hager/img/about/g02@2x.png',
        c_title: '海格电气在中国',
        e_title: 'Hager in China',
        content: '海格电气于1997 年进入中国市场，至今已在中国设立了3家工厂和32个销售办事处，通过覆盖全国的营销网络及高资质合作伙伴，为中国客户提供全球领先的解决方案和高效服务。',
        link: '/about/china',
      },{
        img: 'https://cdn.ipadbiz.cn/hager/img/about/g03@2x.png',
        c_title: '创新设计',
        e_title: 'Innovative Design',
        content: '海格电气一直致力于创新，我们与客户共同着手面向未来的主题。海格电气仔细倾听客户的声音，以使我们的设计语言能够被普遍理解。',
        link: '/about/design',
      },{
        img: 'https://cdn.ipadbiz.cn/hager/img/about/g04@2x-1.png',
        c_title: '生产研发',
        e_title: 'Production and R&D',
        content: '为配合海格集团在全球的业务扩展计划，目前中国有2个生产基地，分别位于惠州和东莞，主要为亚太乃至全球市场提供优质的配电及相关产品。海格集团在全球拥有22家生产基地，主要分布于欧洲。',
        link: '/about/product',
      },{
        img: 'https://cdn.ipadbiz.cn/hager/img/tiny/g05@2x.png',
        c_title: '可持续发展',
        e_title: 'Sustainable Development',
        content: '作为一家有着明确价值观的家族企业，我们今天就行动起来，以确保未来成功。海格电气一直持续不断地投资我们的员工及其技能开发和培训、优化我们的生态平衡、开发更节能的流程和解决方案。',
        link: '/about/development',
      },{
        img: 'https://cdn.ipadbiz.cn/hager/img/about/g06@2x.png',
        c_title: '荣誉展示',
        e_title: 'Honors',
        content: '海格集团是行业创新领导者之一，我们与来自工业和电气领域的客户一起致力于引领面向未来的主题，如家庭互联、智能建筑技术、能源效率、生活辅助系统、电动交通、可再生能源。',
        link: '/about/honors',
      }]
    }
  },
  mounted () {

  },
  methods: {
    goTo (path) {
      this.$router.push({
        path,
      });
    }
  }
}
</script>

<style lang="less" scoped>
  .hager-about-page {
    .top-img {
      width: 100%;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      position: relative;
      height: 25rem;
      &.xs {
        height: 12rem;
      }
      .top-center {
        position: absolute;
        transform: translateY(100%); /* 垂直与水平居中 */
      }
    }

    .about-img {
      width: 100%;
      height: 25rem;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      &.xs {
        height: 15rem;
      }
    }
    .about-box {
      background-color: #F7F7F7;
      position: relative; /* 父容器设置为相对定位 */
      padding: 2rem;
      height: 25rem; /* 让 .about-box 撑满父容器 */
      box-sizing: border-box;
      &.xs {
        height: 20rem;
      }
      .title {
        font-weight: bold;
        .c {
          font-size: 2rem;
          color: @secondary-color;
          &.xs {
            font-size: 1.5rem;
          }
        }
        .e {
          font-size: 1.5rem;
          color: @primary-color;
          &.xs {
            font-size: 1.1rem;
          }
        }
      }
      .introduce {
        position: absolute; /* 绝对定位 */
        overflow: auto; /* 防止内容过多时溢出 */
        margin-top: 1rem;
        padding-right: 1rem;
        line-height: 1.75;
      }
      .more {
        position: absolute; /* 固定在容器底部 */
        bottom: 1rem;
        &.xs {
          bottom: 2.5rem;
        }
        .btn {
          background-color: #F56400;
          width: 8rem;
          height: 1rem;
          padding: 1rem;
          color: #FFF;
          text-align: center;
          line-height: 1rem;
          transition: background-color .25s ease-in-out;
          &:hover {
            background-color: #ff8f33;
            cursor: pointer;
            // color: #F56400;
            // border: 1px solid #F56400;
          }
        }
      }
    }
  }
</style>