✨ feat: 新增关于海格首页

 /*
 /*
  * @Date: 2024-08-26 10:42:15
  * @Date: 2024-08-26 10:42:15
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-09-30 09:47:44
+ * @LastEditTime: 2024-10-17 09:22:48
  * @FilePath: /hager/src/route.js
  * @FilePath: /hager/src/route.js
  * @Description: 文件描述
  * @Description: 文件描述
  */
  */
@@ -50,4 +50,13 @@ export default [{
     tag: 'solution'
     tag: 'solution'
   },
   },
   children: []
   children: []
+}, {
+  path: '/about',
+  name: '关于海格',
+  component: () => import('@/views/about'),
+  meta: {
+    title: '海格电器',
+    tag: 'about'
+  },
+  children: []
 }]
 }]

+<!--
+ * @Date: 2024-10-17 09:22:56
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2024-10-17 10:46:59
+ * @FilePath: /hager/src/views/about/index.vue
+ * @Description: 文件描述
+-->
+<template>
+  <div class="hager-about-page">
+    <hager-box class="top-img" :style="{ height: top_img_height, backgroundImage: 'url(https://cdn.ipadbiz.cn/hager/banner/banner04@2x.png)' }">
+      <div v-if="!is_xs" class="banner-text-wrapper top-center">
+        <div class="text">
+          <p class="title">海格E3可持续发展理念</p>
+          <p class="sub">Ethics 道德</p>
+          <p class="sub">Environment 环境</p>
+          <p class="sub">Energy 能源</p>
+        </div>
+      </div>
+    </hager-box>
+    <hager-box 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>
+</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/g01@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.png',
+        c_title: '生产研发',
+        e_title: 'Production and R&D',
+        content: '为配合海格集团在全球的业务扩展计划，目前中国有2个生产基地，分别位于惠州和东莞，主要为亚太乃至全球市场提供优质的配电及相关产品。海格集团在全球拥有22家生产基地，主要分布于欧洲。',
+        link: '/about/product',
+      },{
+        img: 'https://cdn.ipadbiz.cn/hager/img/about/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: {
+
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .hager-about-page {
+    .top-img {
+      width: 100%;
+      background-repeat: no-repeat;
+      background-size: cover;
+      background-position: center;
+      position: relative;
+      .top-center {
+        position: absolute;
+        transform: translateY(100%); /* 垂直与水平居中 */
+      }
+    }
+
+    .about-img {
+      width: 100%;
+      height: 20rem;
+      background-repeat: no-repeat;
+      background-size: cover;
+    }
+    .about-box {
+      background-color: #F7F7F7;
+      position: relative; /* 父容器设置为相对定位 */
+      padding: 2rem;
+      height: 20rem; /* 让 .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 {
+        position: absolute; /* 绝对定位 */
+        overflow: auto; /* 防止内容过多时溢出 */
+        margin-top: 1rem;
+        padding-right: 1rem;
+        line-height: 1.75;
+      }
+      .more {
+        position: absolute; /* 固定在容器底部 */
+        bottom: 1rem;
+        .btn {
+          background-color: #F56400;
+          width: 8rem;
+          height: 1rem;
+          padding: 1rem;
+          color: #FFF;
+          text-align: center;
+          line-height: 1rem;
+          &:hover {
+            background-color: #FFF;
+            color: #F56400;
+            cursor: pointer;
+            border: 1px solid #F56400;
+          }
+        }
+      }
+    }
+  }
+</style>