关于海格-可持续发展自适应页面调整

 <!--
  * @Date: 2024-10-17 11:13:44
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-22 11:35:17
+ * @LastEditTime: 2024-10-22 11:48:50
  * @FilePath: /hager/src/views/about/china.vue
- * @Description: 文件描述
+ * @Description: 关于海格-海格在中国
 -->
 <template>
   <div class="hager-about-china-page">

 <!--
  * @Date: 2024-10-17 11:13:44
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-17 16:22:51
+ * @LastEditTime: 2024-10-22 11:49:53
  * @FilePath: /hager/src/views/about/development.vue
- * @Description: 文件描述
+ * @Description: 关于海格-可持续发展
 -->
 <template>
   <div class="hager-about-development-page">
@@ -15,7 +15,7 @@
         </el-breadcrumb>
       </div>
     </hager-box>
-    <hager-box>
+    <hager-box v-if="!is_xs">
       <el-row style="margin: 3rem 0;">
         <el-col :span="8">
           <div class="about-box">
@@ -40,6 +40,22 @@
         <p>作为一家有着明确价值观的家族企业，我们今天就行动起来，以确保未来成功。海格电气一直持续不断地投资我们的员工及其技能开发和培训、优化我们的生态平衡、开发更节能的流程和解决方案。可持续发展是我们获得长期成功的关键。我们所做的每件事都秉承可持续发展的原则，因此我们将整个可持续发展的概念融合成为统一的理念：E3      。E3      是一个广泛的理念，用于指导我们更好地使用地球上有限的资源。三个E分别代表道德（Ethics）、环境（Environment）和能源（Energy）。</p>
       </div>
     </hager-box>
+    <div v-else>
+      <div class="about-img xs"></div>
+      <div class="about-box xs">
+        <div>
+          <div class="title">
+            <p class="c xs">可持续发展</p>
+            <p class="e xs">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>
+    </div>
   </div>
 </template>
 
@@ -74,6 +90,10 @@ export default {
       background-size: cover;
       background-position: center;
       background-image: url(https://cdn.ipadbiz.cn/hager/img/about/g20@2x.png);
+      &.xs {
+        height: 15rem;
+        margin-top: 1rem;
+      }
     }
     .about-box {
       background-color: #F7F7F7;
@@ -81,15 +101,26 @@ export default {
       padding: 2rem;
       height: 30rem; /* 让 .about-box 撑满父容器 */
       box-sizing: border-box;
+      &.xs {
+        height: auto;
+        padding: 2rem;
+        background-color: #FFF;
+      }
       .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 {