foot

src/App.vue

@@ -9,4 +9,9 @@ export default {
   name: 'App'
 }
 </script>
+<style>
+  #app{
+    font-family:PingFang SC;
+  }
+</style>
 

src/components/PageFooter.vue

 <template>
-  <div class="footer">
-    <div class="footer_content">
-      <el-row>
-        <el-col :span="12">
-          <img style="width: 100px;height: 30px"
-               src="https://img2.baidu.com/it/u=3629687853,959678225&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" alt="">
-          <span>让美家变得更简单</span>
-        </el-col>
-        <el-col :span="12">
   <div>
-            <div>在线客服</div>
+    <div class="footer" style="padding-top: 10px;padding-bottom: 10px">
+      <div class="footer_content" >
         <div>
+          <img style="width: 100px;height: 30px;vertical-align: middle"
+               src="https://img2.baidu.com/it/u=3629687853,959678225&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" alt="">
+          <span style="font-size: 16px;margin-left: 16px">让美家变得更简单</span>
+        </div>
+        <div style="text-align: right">
+          <div style="color: #07FBF1;margin-bottom: 10px"> <i class="el-icon-service"></i> 在线客服</div>
+          <div style="font-size: 14px;color: #FFFFFF">
             服务时间：周一至周六8:30-18:00
           </div>
         </div>
-        </el-col>
-      </el-row>
       </div>
+    </div>
+    <div style="background: #424449;padding-top: 40px;padding-bottom: 40px">
+      <div class="footer_content" >
         <div>
+          <span style="font-size: 16px;margin-left: 16px">客户端下载 | 帮助中心 | 商家后台</span>
+        </div>
+        <div style="text-align: right">
+          <div style="display: flex;align-items: center">
+            <div style="margin-right: 20px">关注我们</div>
+            <img style="margin-right: 20px" src="../../static/home/gzh.png" alt="">
+            <img style="margin-right: 10px" src="../../static/home/dy.png" alt="">
+          </div>
+        </div>
+      </div>
       <p class="footer_bottom">
         <span>CopyRight @中山市艾文凯迪网络科技公司 版权所有</span>
         <span>粤ICP备14009360号</span>
@@ -35,27 +45,34 @@
 </script>
 
 <style scoped>
-  .footer_bottom{
+  .footer {
+    width: 100%;
+    background: linear-gradient(195deg, #25292C, #353B40);
+    box-shadow: 0px 3px 20px 0px rgba(6, 36, 14, 0.1);
+  }
+
+  .footer_bottom {
     width: 1300px;
     margin: 0 auto;
+    margin-top: 70px;
     text-align: center;
     font-size: 14px;
-    font-family: PingFang SC;
     font-weight: 400;
     color: #999999;
   }
-  .footer {
-    width: 100%;
-    height: 88px;
-    background: linear-gradient(195deg, #25292C, #353B40);
-    box-shadow: 0px 3px 20px 0px rgba(6, 36, 14, 0.1);
-  }
+
   .footer_content {
     width: 1300px;
     margin-top: 100px;
+    margin-bottom: 30px;
     color: #ffffff;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin: 0 auto;
   }
-  .footer_bottom span{
+
+  .footer_bottom span {
     margin-right: 15px;
   }
 </style>