关于海格自适应调整

hookehuyr
Commit 96f698063bdf718a73529bd6f3a26ec89aaba174 96f69806 1 parent 0f8b067e
Showing 2 changed files with 83 additions and 7 deletions
src/views/about/china.vue
src/views/about/global.vue
--- a/src/views/about/china.vue
View file @96f6980
+++ b/src/views/about/china.vue
View file @96f6980
 <!--
  * @Date: 2024-10-17 11:13:44
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-17 13:21:40
+ * @LastEditTime: 2024-10-21 17:17:55
  * @FilePath: /hager/src/views/about/china.vue
  * @Description: 文件描述
 -->
@@ -15,11 +15,11 @@
         </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-wrapper">
             <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>
@@ -40,6 +40,25 @@
         <p>海格电气于1997 年进入中国市场，至今已在中国设立了3家工厂和32个销售办事处，通过覆盖全国的营销网络及高资质合作伙伴，为中国客户提供全球领先的解决方案和高效服务。</p>
       </div>
     </hager-box>
+    <div v-else>
+      <div class="about-img xs"></div>
+      <div class="about-box-wrapper xs">
+        <div class="about-box xs">
+          <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>
+      <div class="about-content xs">
+        <p>来自德国的海格电气，延承德系基因的匠心与专业，为全球住宅、酒店、医院、公共建筑、商业建筑、工业及能源领域，提供安全、稳定的电气设施与服务。坚持可持续发展，专注为你，构建更安全、更清洁、更愉悦的未来电气世界。</p>
+        <p>秉承“以客户为中心”的服务理念，海格电气是你可信赖的合作伙伴。深入洞悉中国市场需求，定制化的电气解决方案，灵动合作、完善支持，助力行业合作伙伴增效发展。</p>
+        <p>海格电气于1997 年进入中国市场，至今已在中国设立了3家工厂和32个销售办事处，通过覆盖全国的营销网络及高资质合作伙伴，为中国客户提供全球领先的解决方案和高效服务。</p>
+      </div>
+    </div>
   </div>
 </template>
@@ -74,6 +93,10 @@ export default {
       background-size: cover;
       background-position: center;
       background-image: url(https://cdn.ipadbiz.cn/hager/img/about/g08@2x-1.png);
+      &.xs {
+        height: 15rem;
+        margin-top: 1rem;
+      }
     }
     .about-box {
       background-color: #F7F7F7;
@@ -81,6 +104,18 @@ export default {
       padding: 2rem;
       height: 30rem; /* 让 .about-box 撑满父容器 */
       box-sizing: border-box;
+      &.xs {
+        height: auto;
+        padding: 2rem;
+        background-color: #FFF;
+      }
+      .about-box {
+        top: 50%;
+        transform: translateY(50%);
+        &.xs {
+          transform: none;
+        }
+      }
       .title {
         font-weight: bold;
         .c {
@@ -100,6 +135,10 @@ export default {
     .about-content {
       padding: 0 2rem 2rem;
+      &.xs {
+        background-color: #F7F7F7;
+        padding-top: 2rem;
+      }
       p {
         line-height: 2;
         margin-bottom: 1.5rem;
--- a/src/views/about/global.vue
View file @96f6980
+++ b/src/views/about/global.vue
View file @96f6980
 <!--
  * @Date: 2024-10-17 11:13:44
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-17 11:48:43
+ * @LastEditTime: 2024-10-21 17:16:51
  * @FilePath: /hager/src/views/about/global.vue
  * @Description: 文件描述
 -->
@@ -15,11 +15,11 @@
         </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-wrapper">
             <div class="about-box">
-            <div style="top: 50%; transform: translateY(50%);">
               <div class="title">
                 <p class="c">海格全球</p>
                 <p class="e">Hager Group</p>
@@ -38,6 +38,23 @@
         <p>海格集团于1955年由Hermann Hager、Oswald Hager 博士和他们的父亲Peter Hager 一起创立，集团总部位于德国Blieskastel，直到今天依然是一家独立运营的家族企业。在“真诚、勇气、正直”价值观的指导下，全球13000名员工紧密与客户联系在一起，在2023年创造了约32亿欧元的销售业绩，来自全球22个生产基地的产品和解决方案赢得了100多个国家客户的信任。</p>
       </div>
     </hager-box>
+    <div v-else>
+      <div class="about-img xs"></div>
+      <div class="about-box-wrapper xs">
+        <div class="about-box xs">
+          <div class="title">
+            <p class="c">海格全球</p>
+            <p class="e">Hager Group</p>
+          </div>
+          <div class="introduce" v-clamp="3">海格集团是全球领先的电气及智能化解决方案和服务提供商，应用领域涵盖住宅、商业建筑、公共建筑和工业。</div>
+          </div>
+      </div>
+      <div class="about-content xs">
+        <p>海格电气品牌代表了集团的核心业务，覆盖配电系统、电缆管理系统，KNX 智能控制系统和开关面板、楼宇自动化和安防系统。集团旗下还拥有Berker、Bocchiotti、Elcom 和 E3 / DC 等品牌。这使我们得以整合专能，持续为楼宇自动化领域开发创新产品、系统和服务。</p>
+        <p>海格集团是行业创新领导者之一，我们与来自工业和电气领域的客户一起致力于引领面向未来的主题，如家庭互联、智能建筑技术、能源效率、生活辅助系统、电动交通、可再生能源。配电系统是这些技术得以实现的中枢，也是伴随我们成长的基础产品。</p>
+        <p>海格集团于1955年由Hermann Hager、Oswald Hager 博士和他们的父亲Peter Hager 一起创立，集团总部位于德国Blieskastel，直到今天依然是一家独立运营的家族企业。在“真诚、勇气、正直”价值观的指导下，全球13000名员工紧密与客户联系在一起，在2023年创造了约32亿欧元的销售业绩，来自全球22个生产基地的产品和解决方案赢得了100多个国家客户的信任。</p>
+      </div>
+    </div>
   </div>
 </template>
@@ -71,13 +88,29 @@ export default {
       background-size: cover;
       background-position: center;
       background-image: url(https://cdn.ipadbiz.cn/hager/img/about/g07@2x.png);
+      &.xs {
+        height: 15rem;
+        margin-top: 1rem;
       }
-    .about-box {
+    }
+    .about-box-wrapper {
       background-color: #F7F7F7;
       position: relative; /* 父容器设置为相对定位 */
       padding: 2rem;
       height: 30rem; /* 让 .about-box 撑满父容器 */
       box-sizing: border-box;
+      &.xs {
+        height: auto;
+        padding: 2rem;
+        background-color: #FFF;
+      }
+      .about-box {
+        top: 50%;
+        transform: translateY(50%);
+        &.xs {
+          transform: none;
+        }
+      }
       .title {
         font-weight: bold;
         .c {
@@ -97,6 +130,10 @@ export default {
     .about-content {
       padding: 0 2rem 2rem;
+      &.xs {
+        background-color: #F7F7F7;
+        padding-top: 2rem;
+      }
       p {
         line-height: 2;
         margin-bottom: 1.5rem;