✨ feat: 底部组件显示自适应调整

hookehuyr
Commit 080d4a9a3f35741c81a572db00ee993db0b5e2a2 080d4a9a 1 parent 835b93a5
Showing 1 changed file with 106 additions and 4 deletions
src/components/common/hagerFooter.vue
--- a/src/components/common/hagerFooter.vue
View file @080d4a9
+++ b/src/components/common/hagerFooter.vue
View file @080d4a9
 <!--
  * @Date: 2024-09-26 13:42:22
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-09-30 16:26:28
+ * @LastEditTime: 2024-10-10 14:40:58
  * @FilePath: /hager/src/components/common/hagerFooter.vue
  * @Description: 文件描述
 -->
 <template>
   <div class="hager-footer">
-    <hager-box>
+    <hager-box v-if="!is_xs">
       <el-row :gutter="0" style="color: #FFF; margin: 2rem 0;">
         <el-col :span="14">
           <el-row :gutter="0">
@@ -88,6 +88,88 @@
         </el-col>
       </el-row>
     </hager-box>
+    <div v-else>
+      <div class="link-box xs">
+        <div class="link-title xs" @click="toggleCollapse('p')">
+          <div>产品目录</div>
+          <div><i class="el-icon-arrow-down"></i></div>
+        </div>
+        <el-collapse-transition>
+          <div v-show="show_p" class="link-info">
+            <p>空气断路器</p>
+            <p>塑壳断路器</p>
+            <p>自动转换开关</p>
+            <p>接触器及热过载继电器</p>
+            <p>隔离开关</p>
+            <p>配电箱</p>
+            <p>终端配电</p>
+            <p>Unimes开关柜</p>
+            <p>Berker</p>
+            <p>志系列</p>
+            <p>KNX控制系统</p>
+            <p>RCU客房控制系统</p>
+            <p>Agardio数字化能源解决方案</p>
+          </div>
+        </el-collapse-transition>
+      </div>
+      <div class="link-box xs">
+        <div class="link-title xs" @click="toggleCollapse('s')">
+          <div>解决方案</div>
+          <div><i class="el-icon-arrow-down"></i></div>
+        </div>
+        <el-collapse-transition>
+          <div v-show="show_s" class="link-info">
+            <p>住宅解决方案</p>
+            <p>商建解决方案</p>
+            <p>公建解决方案</p>
+            <p>供电局解决方案</p>
+            <p>发电解决方案</p>
+            <p>石油石化解决方案</p>
+            <p>冶金解决方案</p>
+            <p>电子解决方案</p>
+            <p>通信解决方案</p>
+            <p>算力解决方案</p>
+            <p>交通解决方案</p>
+            <p>其它解决方案</p>
+          </div>
+        </el-collapse-transition>
+      </div>
+      <div class="link-box xs">
+        <div class="link-title xs" @click="toggleCollapse('c')">
+          <div>企业</div>
+          <div><i class="el-icon-arrow-down"></i></div>
+        </div>
+        <el-collapse-transition>
+          <div v-show="show_c" class="link-info">
+            <p>海格全球</p>
+            <p>海格电气在中国</p>
+            <p>创新设计与用户体验</p>
+            <p>生产研发与服务</p>
+            <p>可持续发展的企业文化</p>
+            <p>荣誉展示</p>
+          </div>
+        </el-collapse-transition>
+      </div>
+      <div>
+        <div class="link-box xs" style="margin-bottom: 2rem;">
+          <div class="link-title">海格电气在中国</div>
+          <div class="link-info">
+            <div>来自德国的海格电气，延承德系基因的匠心与专业，为全球住宅、酒店、医院、公共建筑、商业建筑、工业及能源领域，提供安全、稳定的电气设施与服务。坚持可持续发展，专注为你，构建更安全、更清洁、更愉悦的未来电气世界。</div>
+          </div>
+        </div>
+        <div class="link-box xs">
+          <div class="link-title">联系我们</div>
+          <div class="link-info link-contact">
+            <p>海格电气中国总部</p>
+            <p>上海市静安区山西北路99号苏河湾中心21层01、02单元</p>
+            <p>粤ICP备2021117768号-3</p>
+          </div>
+        </div>
+        <div style="margin-top: 2rem;">
+          <el-image style="width: 3rem; height: 3rem;" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="fit"></el-image>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
@@ -100,14 +182,26 @@ export default {
   mixins: [mixin.init],
   data () {
     return {
-
+      show_p: false,
+      show_s: false,
+      show_c: false,
     }
   },
   mounted () {
   },
   methods: {
-
+    toggleCollapse (type) {
+      if (type === 'p') { // 产品目录
+        this.show_p = !this.show_p;
+      }
+      if (type === 's') { // 解决方案
+        this.show_s = !this.show_s;
+      }
+      if (type === 'c') { // 企业
+        this.show_c = !this.show_c;
+      }
+    }
   }
 }
 </script>
@@ -117,11 +211,19 @@ export default {
   background-color: #414141;
   margin-top: auto;
   .link-box {
+    &.xs {
+      padding: 1rem 2rem;
+    }
     .link-title {
       font-size: 1.15rem;
       font-weight: 600;
       color: #FFF;
       margin-bottom: 0.5rem;
+      &.xs {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
     }
     .link-info {
       font-size: 0.85rem;