新增关于海格-发展页面

 <!--
  * @Date: 2024-10-17 11:13:44
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-17 11:27:27
- * @FilePath: /hager/src/views/about/global.vue
+ * @LastEditTime: 2024-10-17 16:22:51
+ * @FilePath: /hager/src/views/about/development.vue
  * @Description: 文件描述
 -->
 <template>
-  <div class="hager-about-global-page">
+  <div class="hager-about-development-page">
     <hager-box>
       <div v-if="!is_xs" style="margin-top: 1.5rem;">
         <el-breadcrumb separator="/">
@@ -15,15 +15,41 @@
         </el-breadcrumb>
       </div>
     </hager-box>
+    <hager-box>
+      <el-row style="margin: 3rem 0;">
+        <el-col :span="8">
+          <div class="about-box">
+            <div style="top: 30%; transform: translateY(30%);">
+              <div class="title">
+                <p class="c">可持续发展</p>
+                <p class="e">Sustainable<br/>Development</p>
+              </div>
+              <div class="introduce">
+                <p style="margin: 1.5rem 0 1rem;">“关注人们的需求，关心我们的环境，顺乎道德，合乎责任。”</p>
+                <p>——Daniel Hager 先生</p>
+                <p>海格集团监事会主席</p>
+              </div>
+              </div>
+          </div>
+        </el-col>
+        <el-col :span="15">
+          <div class="about-img"></div>
+        </el-col>
+      </el-row>
+      <div class="about-content">
+        <p>作为一家有着明确价值观的家族企业，我们今天就行动起来，以确保未来成功。海格电气一直持续不断地投资我们的员工及其技能开发和培训、优化我们的生态平衡、开发更节能的流程和解决方案。可持续发展是我们获得长期成功的关键。我们所做的每件事都秉承可持续发展的原则，因此我们将整个可持续发展的概念融合成为统一的理念：E3      。E3      是一个广泛的理念，用于指导我们更好地使用地球上有限的资源。三个E分别代表道德（Ethics）、环境（Environment）和能源（Energy）。</p>
+      </div>
+    </hager-box>
   </div>
 </template>
 
 <script>
 import mixin from 'common/mixin';
 import hagerBox from '@/components/common/hagerBox';
+import hagerH1 from '@/components/common/hagerH1.vue';
 
 export default {
-  components: { hagerBox },
+  components: { hagerBox, hagerH1 },
   mixins: [mixin.init],
   data () {
     return {
@@ -40,7 +66,44 @@ export default {
 </script>
 
 <style lang="less" scoped>
-  .hager-about-global-page {
+  .hager-about-development-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/g20@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;
+      }
+    }
 
+    .about-content {
+      padding: 0 2rem 2rem;
+      p {
+        line-height: 2;
+        margin-bottom: 1.5rem;
+      }
+    }
   }
 </style>