<!--
 * @Date: 2024-10-17 11:13:44
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2024-10-17 14:50:29
 * @FilePath: /hager/src/views/about/design.vue
 * @Description: 文件描述
-->
<template>
  <div class="hager-about-global-page">
    <hager-box>
      <div v-if="!is_xs" style="margin-top: 1.5rem;">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item>关于海格</el-breadcrumb-item>
          <el-breadcrumb-item>{{ $route.name }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </hager-box>
    <hager-box>
      <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="15">
          <div class="about-img"></div>
        </el-col>
      </el-row>
    </hager-box>
    <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;">
        <el-col :span="8" v-for="(item, index) in list" :key="index" 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>
      </el-row>
    </hager-box>
    <hager-box class="box-n">
      <el-row :gutter="30" 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>
        </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>
        </el-col>
      </el-row>
    </hager-box>
  </div>
</template>

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

export default {
  components: { hagerBox },
  mixins: [mixin.init],
  data () {
    return {
      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: '节能产品有助于优化和降低能源消耗。'
      }]
    }
  },
  mounted () {

  },
  methods: {

  }
}
</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.png);
    }
    .about-box {
      background-color: #F7F7F7;
      position: relative; /* 父容器设置为相对定位 */
      padding: 2rem;
      height: 30rem; /* 让 .about-box 撑满父容器 */
      box-sizing: border-box;
      .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;
      .title {
        top: 30%;
        transform: translateY(30%);
      }
    }
    .right-box {
      top: 30%; transform: translateY(30%); padding: 2rem;
      .title {
        text-align: center;
        font-size: 1.55rem;
        font-weight: bold;
        margin-bottom: 2rem;
        color: @secondary-color;
      }
    }
  }
</style>