海格全球样式修改

 <!--
  * @Date: 2024-08-27 10:06:30
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-15 11:49:38
+ * @LastEditTime: 2024-10-15 17:18:48
  * @FilePath: /hager/src/views/index.vue
  * @Description: 文件描述
 -->
@@ -15,30 +15,36 @@
     <hager-box class="box-n">
       <hager-h1 title="海格全球" sub="Hager Global"></hager-h1>
       <div class="hager-global">
-        <p>海格集团是全球领先的电气及智能化鲜决方案和服务提供商，应用领域涵盖住宅，商业建筑，公共建筑和工业。</p>
-        <p>海格申气品牌代表了集闭的核心业务，蜀盖配电系统。申缆管理系统。KNX 智能榕制系统和开关面板，楼宇自动化和安防系统。集团旗下还拥有 7 E3 / DC</p>
-        <p>海格集团是行业创新领导者之一，我们与来自工业和电气领域的客户一起致力于引领面向未来的主题，如家庭互联、智能建筑技术，能源效率、生活辅助系统，电动交通、
-        可再生能源。配电系统是这盛技术得以实现的中枢。也是伴随我们成长的其础产品</p>
+        <div class="hager-global-info-fold">
+          <p>海格集团是全球领先的电气及智能化解决方案和服务提供商，应用领域涵盖<span class="strong">住宅、商业建筑、公共建筑和工业。</span><i v-if="is_fold" class="el-icon-arrow-up" @click="toggleFold(true)"></i><i v-else class="el-icon-arrow-down" @click="toggleFold(false)"></i></p>
+          <el-collapse-transition>
+            <div v-show="is_fold">
+              <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>
+          </el-collapse-transition>
+        </div>
         <div :class="['hager-global-info', is_xs ? 'xs' : '']">
           <div class="hager-global-info-item">
-            <p class="num"><span>32</span>亿</p>
-            <p class="text">2023年销售额32亿欧元</p>
-            <p class="text">Sales ot 3.2 billion  2023</p>
+            <p class="num"><span>32</span>&nbsp;亿欧元</p>
+            <p class="text">2023年总营收</p>
+            <p class="text">Sales of 3.2 billion eurosin 2023</p>
           </div>
           <div class="hager-global-info-item">
-            <p class="num"><span>32</span>亿</p>
-            <p class="text">2023年销售额32亿欧元</p>
-            <p class="text">Sales ot 3.2 billion  2023</p>
+            <p class="num" style="font-size: 1.85rem;"><span>100</span>&nbsp;+</p>
+            <p class="text">国家采用海格解决方案</p>
+            <p class="text">100+ countries adopted Hager solutions</p>
           </div>
           <div class="hager-global-info-item">
-            <p class="num"><span>32</span>亿</p>
-            <p class="text">2023年销售额32亿欧元</p>
-            <p class="text">Sales ot 3.2 billion  2023</p>
+            <p class="num"><span>13,000</span>&nbsp;位</p>
+            <p class="text">全球员工</p>
+            <p class="text">13000 employees around the world</p>
           </div>
           <div class="hager-global-info-item">
-            <p class="num"><span>32</span>亿</p>
-            <p class="text">2023年销售额32亿欧元</p>
-            <p class="text">Sales ot 3.2 billion  2023</p>
+            <p class="num"><span>22</span>&nbsp;个</p>
+            <p class="text">生产基地</p>
+            <p class="text">22 production sites</p>
           </div>
         </div>
         <div style="display: flex; justify-content: center; margin-top: 1rem;">
@@ -177,6 +183,7 @@ export default {
   components: { hagerBox, hagerH1, hagerMore },
   data () {
     return {
+      is_fold: false,
       news_list: [{
         src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
         title: '获奖+1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀',
@@ -281,6 +288,9 @@ export default {
     }
   },
   methods: {
+    toggleFold (v) {
+      this.is_fold = !this.is_fold;
+    },
     goToNew (v) {
       this.$router.push({
         path: '/news/detail'
@@ -367,8 +377,13 @@ export default {
   }
   .hager-global {
     padding: 2rem 0;
+    .hager-global-info-fold {
       p {
         line-height: 2;
+        span.strong {
+          color: @primary-color;
+        }
+      }
     }
     .hager-global-info {
       display: flex;
@@ -388,6 +403,9 @@ export default {
             font-size: 3rem;
           }
         }
+        .text {
+          line-height: 1.8;
+        }
       }
     }
   }