global.vue 5.82 KB
<!--
 * @Date: 2024-10-17 11:13:44
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2024-10-22 16:22:33
 * @FilePath: /hager/src/views/about/global.vue
 * @Description: 文件描述
-->
<template>
  <div class="hager-about-global-page">
    <hager-box>
      <div 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 v-if="!is_xs">
      <el-row style="margin: 3rem 0;">
        <el-col :span="8">
          <div class="about-box-wrapper">
            <div class="about-box">
              <div class="title">
                <p class="c">海格全球</p>
                <p class="e">Hager Group</p>
              </div>
              <div class="introduce" v-clamp="3">海格集团是全球领先的电气及智能化解决方案和服务提供商,应用领域涵盖住宅、商业建筑、公共建筑和工业。</div>
              </div>
          </div>
        </el-col>
        <el-col :span="16">
          <div class="about-img"></div>
        </el-col>
      </el-row>
      <div class="about-content">
        <p>海格电气品牌代表了集团的核心业务,覆盖配电系统、电缆管理系统,KNX 智能控制系统和开关面板、楼宇自动化和安防系统。集团旗下还拥有Berker、Bocchiotti、Elcom 和 E3 / DC 等品牌。这使我们得以整合专能,持续为楼宇自动化领域开发创新产品、系统和服务。</p>
        <p>海格集团是行业创新领导者之一,我们与来自工业和电气领域的客户一起致力于引领面向未来的主题,如家庭互联、智能建筑技术、能源效率、生活辅助系统、电动交通、可再生能源。配电系统是这些技术得以实现的中枢,也是伴随我们成长的基础产品。</p>
        <p>海格集团于1955年由Hermann Hager、Oswald Hager 博士和他们的父亲Peter Hager 一起创立,集团总部位于德国Blieskastel,直到今天依然是一家独立运营的家族企业。在“真诚、勇气、正直”价值观的指导下,全球13000名员工紧密与客户联系在一起,在2023年创造了约32亿欧元的销售业绩,来自全球22个生产基地的产品和解决方案赢得了100多个国家客户的信任。</p>
      </div>
    </hager-box>
    <div v-else>
      <div class="about-img xs"></div>
      <div class="about-box-wrapper xs">
        <div class="about-box xs">
          <div class="title">
            <p class="c xs">海格全球</p>
            <p class="e xs">Hager Group</p>
          </div>
          <div class="introduce" v-clamp="3">海格集团是全球领先的电气及智能化解决方案和服务提供商,应用领域涵盖住宅、商业建筑、公共建筑和工业。</div>
          </div>
      </div>
      <div class="about-content xs">
        <p>海格电气品牌代表了集团的核心业务,覆盖配电系统、电缆管理系统,KNX 智能控制系统和开关面板、楼宇自动化和安防系统。集团旗下还拥有Berker、Bocchiotti、Elcom 和 E3 / DC 等品牌。这使我们得以整合专能,持续为楼宇自动化领域开发创新产品、系统和服务。</p>
        <p>海格集团是行业创新领导者之一,我们与来自工业和电气领域的客户一起致力于引领面向未来的主题,如家庭互联、智能建筑技术、能源效率、生活辅助系统、电动交通、可再生能源。配电系统是这些技术得以实现的中枢,也是伴随我们成长的基础产品。</p>
        <p>海格集团于1955年由Hermann Hager、Oswald Hager 博士和他们的父亲Peter Hager 一起创立,集团总部位于德国Blieskastel,直到今天依然是一家独立运营的家族企业。在“真诚、勇气、正直”价值观的指导下,全球13000名员工紧密与客户联系在一起,在2023年创造了约32亿欧元的销售业绩,来自全球22个生产基地的产品和解决方案赢得了100多个国家客户的信任。</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 {

    }
  },
  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/g07@2x.png);
      &.xs {
        height: 15rem;
        margin-top: 1rem;
      }
    }
    .about-box-wrapper {
      background-color: #F7F7F7;
      position: relative; /* 父容器设置为相对定位 */
      padding: 2rem;
      height: 30rem; /* 让 .about-box 撑满父容器 */
      box-sizing: border-box;
      &.xs {
        height: auto;
        padding: 2rem;
        background-color: #FFF;
      }
      .about-box {
        top: 50%;
        transform: translateY(50%);
        &.xs {
          transform: none;
        }
      }
      .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 {
        line-height: 1.75;
        margin-top: 1rem;
      }
    }

    .about-content {
      padding: 0 2rem 2rem;
      &.xs {
        background-color: #F7F7F7;
        padding-top: 2rem;
      }
      p {
        line-height: 2;
        margin-bottom: 1.5rem;
      }
    }
  }
</style>