✨ feat: 新增关于海格-创新设计页面

 <!--
 <!--
  * @Date: 2024-10-17 11:13:44
  * @Date: 2024-10-17 11:13:44
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-17 11:27:27
- * @FilePath: /hager/src/views/about/global.vue
+ * @LastEditTime: 2024-10-17 14:50:29
+ * @FilePath: /hager/src/views/about/design.vue
  * @Description: 文件描述
  * @Description: 文件描述
 -->
 -->
 <template>
 <template>
@@ -15,6 +15,61 @@
         </el-breadcrumb>
         </el-breadcrumb>
       </div>
       </div>
     </hager-box>
     </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>
   </div>
 </template>
 </template>
 
 
@@ -27,7 +82,22 @@ export default {
   mixins: [mixin.init],
   mixins: [mixin.init],
   data () {
   data () {
     return {
     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 () {
   mounted () {
@@ -41,6 +111,83 @@ export default {
 
 
 <style lang="less" scoped>
 <style lang="less" scoped>
   .hager-about-global-page {
   .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>
 </style>