新增关于中国页面

 <!--
 <!--
  * @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 13:21:40
+ * @FilePath: /hager/src/views/about/china.vue
  * @Description: 文件描述
  * @Description: 文件描述
 -->
 -->
 <template>
 <template>
-  <div class="hager-about-global-page">
+  <div class="hager-about-china-page">
     <hager-box>
     <hager-box>
       <div v-if="!is_xs" style="margin-top: 1.5rem;">
       <div v-if="!is_xs" style="margin-top: 1.5rem;">
         <el-breadcrumb separator="/">
         <el-breadcrumb separator="/">
@@ -15,15 +15,41 @@
         </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">Hager in China</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>
+      <div class="about-content">
+        <p>来自德国的海格电气，延承德系基因的匠心与专业，为全球住宅、酒店、医院、公共建筑、商业建筑、工业及能源领域，提供安全、稳定的电气设施与服务。坚持可持续发展，专注为你，构建更安全、更清洁、更愉悦的未来电气世界。</p>
+        <p>秉承“以客户为中心”的服务理念，海格电气是你可信赖的合作伙伴。深入洞悉中国市场需求，定制化的电气解决方案，灵动合作、完善支持，助力行业合作伙伴增效发展。</p>
+        <p>海格电气于1997 年进入中国市场，至今已在中国设立了3家工厂和32个销售办事处，通过覆盖全国的营销网络及高资质合作伙伴，为中国客户提供全球领先的解决方案和高效服务。</p>
+      </div>
+    </hager-box>
   </div>
   </div>
 </template>
 </template>
 
 
 <script>
 <script>
 import mixin from 'common/mixin';
 import mixin from 'common/mixin';
 import hagerBox from '@/components/common/hagerBox';
 import hagerBox from '@/components/common/hagerBox';
+import hagerH1 from '@/components/common/hagerH1.vue';
 
 
 export default {
 export default {
-  components: { hagerBox },
+  components: { hagerBox, hagerH1 },
   mixins: [mixin.init],
   mixins: [mixin.init],
   data () {
   data () {
     return {
     return {
@@ -40,7 +66,44 @@ export default {
 </script>
 </script>
 
 
 <style lang="less" scoped>
 <style lang="less" scoped>
-  .hager-about-global-page {
+  .hager-about-china-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/g08@2x-1.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>
 </style>