✨ feat: 底部组件完善显示样式

 <!--
 <!--
  * @Date: 2024-09-26 13:42:22
  * @Date: 2024-09-26 13:42:22
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-09-26 15:43:37
+ * @LastEditTime: 2024-09-27 19:34:39
  * @FilePath: /hager/src/components/common/hagerFooter.vue
  * @FilePath: /hager/src/components/common/hagerFooter.vue
  * @Description: 文件描述
  * @Description: 文件描述
 -->
 -->
 <template>
 <template>
   <div class="hager-footer">
   <div class="hager-footer">
-    <el-row class="hidden-xs-only">
-      <el-col :sm="2" :md="2" :lg="3" :xl="4">&nbsp;</el-col>
-      <el-col :sm="20" :md="20" :lg="18" :xl="16">
-        <div style="display: flex; justify-content: space-between; color: #FFF;">
+    <hager-box>
+      <el-row :gutter="0" style="color: #FFF; margin: 2rem 0;">
+        <el-col :span="14">
+          <el-row :gutter="0">
+            <el-col :span="8">
+              <div class="link-box">
+                <div class="link-title">产品目录</div>
+                <div 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>
+              </div>
+            </el-col>
+            <el-col :span="8">
+              <div class="link-box">
+                <div class="link-title">解决方案</div>
+                <div 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>
+              </div>
+            </el-col>
+            <el-col :span="8">
+              <div class="link-box">
+                <div class="link-title">企业</div>
+                <div class="link-info">
+                  <p>海格全球</p>
+                  <p>海格电气在中国</p>
+                  <p>创新设计与用户体验</p>
+                  <p>生产研发与服务</p>
+                  <p>可持续发展的企业文化</p>
+                  <p>荣誉展示</p>
+                </div>
+              </div>
+            </el-col>
+          </el-row>
+        </el-col>
+        <el-col :span="10">
           <div>
           <div>
-            <div>产品目录</div>
-            <div>空气短路器</div>
-            <div>空气短路器</div>
-            <div>空气短路器</div>
+            <div class="link-box" style="margin-bottom: 2rem;">
+              <div class="link-title">海格电气在中国</div>
+              <div class="link-info">
+                <div>来自德国的海格电气，延承德系基因的匠心与专业，为全球住宅、酒店、医院、公共建筑、商业建筑、工业及能源领域，提供安全、稳定的电气设施与服务。坚持可持续发展，专注为你，构建更安全、更清洁、更愉悦的未来电气世界。</div>
+              </div>
+            </div>
+            <div class="link-box">
+              <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>
-            <div>解决方案</div>
-            <div>住宅解决方案</div>
-            <div>住宅解决方案</div>
-            <div>住宅解决方案</div>
-          </div>
-          <div>
-            <div>企业</div>
-            <div>海格全球</div>
-            <div>海格全球</div>
-            <div>海格全球</div>
-          </div>
-          <div>
-            <div>海格电气在中国</div>
-            <div>联系我们</div>
-            <div>图标</div>
-          </div>
-        </div>
-      </el-col>
-      <el-col :sm="2" :md="2" :lg="3" :xl="4">&nbsp;</el-col>
-    </el-row>
+        </el-col>
+      </el-row>
+    </hager-box>
   </div>
   </div>
 </template>
 </template>
 
 
 <script>
 <script>
 import mixin from 'common/mixin';
 import mixin from 'common/mixin';
+import hagerBox from '@/components/common/hagerBox';
 
 
 export default {
 export default {
+  components: { hagerBox },
   mixins: [mixin.init],
   mixins: [mixin.init],
   data () {
   data () {
     return {
     return {
@@ -63,5 +115,36 @@ export default {
 <style lang="less" scoped>
 <style lang="less" scoped>
 .hager-footer {
 .hager-footer {
   background-color: #414141;
   background-color: #414141;
+  .link-box {
+    .link-title {
+      font-size: 1.15rem;
+      font-weight: 600;
+      color: #FFF;
+      margin-bottom: 0.5rem;
+    }
+    .link-info {
+      font-size: 0.75rem;
+      color: #FFF;
+      line-height: 2;
+      display: flex;
+      flex-direction: column;
+      p {
+        display: inline-block;
+        &:hover {
+          text-decoration: underline;
+          cursor: pointer;
+        }
+      }
+      &.link-contact {
+        p {
+          color: #7a98c7;
+          &:hover {
+            text-decoration: underline;
+            cursor: pointer;
+          }
+        }
+      }
+    }
+  }
 }
 }
 </style>
 </style>