样式优化

src/App.vue

@@ -13,5 +13,16 @@ export default {
   #app{
     font-family:PingFang SC;
   }
+  /*html::-webkit-scrollbar { width: 0 !important }*/
+  html::-webkit-scrollbar {
+    width:10px;
+  }
+  html::-webkit-scrollbar-track {
+    background-color:#fafafa;
+  }
+  html::-webkit-scrollbar-thumb {
+    background:#dddddd;
+    border-radius:25px;
+  }
 </style>
 

src/components/PageFooter.vue

 <template>
   <div>
-    <div class="footer" style="padding-top: 10px;padding-bottom: 10px">
+    <div class="footer" style="padding-top: 10px;padding-bottom: 15px">
       <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>
+          <span class="footer_left_name">让美家变得更简单</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">
+          <div style="color: #07FBF1;margin-bottom: 8px;font-size: 14px"> <i class="el-icon-service"></i> 在线客服</div>
+          <div style="font-size: 13px;color: #b6b7b8">
             服务时间：周一至周六8:30-18:00
           </div>
         </div>
       </div>
     </div>
-    <div style="background: #424449;padding-top: 40px;padding-bottom: 40px">
+    <div style="background: #424449;padding-top: 40px;padding-bottom: 30px">
       <div class="footer_content" >
         <div>
-          <span style="font-size: 16px;margin-left: 16px">客户端下载 | 帮助中心 | 商家后台</span>
+          <span class="footer_help">客户端下载</span>
+          <span class="footer_help" style="position: relative;top: -2px;">|</span>
+          <span class="footer_help">帮助中心</span>
+          <span class="footer_help" style="position: relative;top: -2px;">|</span>
+          <span class="footer_help">商家后台</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 style="margin-right: 20px;font-size: 14px;color: #b6b7b8">关注我们</div>
+            <img style="margin-right: 20px;width: 45px;height: 45px" src="../../static/home/gzh.png" alt="">
+            <img style="width: 45px;height: 45px" src="../../static/home/dy.png" alt="">
           </div>
         </div>
       </div>
@@ -45,6 +49,21 @@
 </script>
 
 <style scoped>
+  .footer_help {
+    color: #b6b7b8;
+    font-size: 15px;
+    margin-right: 25px
+  }
+  .footer_left_name {
+    width: 238px;
+    height: 29px;
+    font-size: 18px;
+    font-family: PingFang SC;
+    font-weight: 400;
+    color: #FFFFFF;
+    margin-left: 10px;
+    letter-spacing:2px;
+  }
   .footer {
     width: 100%;
     background: linear-gradient(195deg, #25292C, #353B40);
@@ -56,7 +75,7 @@
     margin: 0 auto;
     margin-top: 70px;
     text-align: center;
-    font-size: 14px;
+    font-size: 13px;
     font-weight: 400;
     color: #999999;
   }

src/components/TopNav.vue

@@ -35,11 +35,11 @@
   .text {
     width: 35px;
     height: 17px;
-    font-size: 16px;
+    font-size: 15px;
     font-family: PingFang SC;
     font-weight: 500;
     color: #ffffff;
-    margin-right: 30px;
+    margin-left: 30px;
   }
 
   .main {

src/views/home/index.vue

 <template>
-  <div>
+  <div class="body">
     <div class="cbusAB">
       <video class="hKbpCH" height="600" src="../../../static/top_video.mp4" autoplay="autoplay" loop muted
              playsinline></video>
@@ -145,7 +145,7 @@
             </el-card>
           </el-col>
         </el-row>
-        <div style="text-align: center;margin-top: 60px;cursor: pointer">
+        <div style="text-align: center;margin-top: 60px;cursor: pointer;margin-bottom: 100px">
           <img src="../../../static/btn_on.png" alt="">
         </div>
       </div>
@@ -160,6 +160,7 @@
 </script>
 
 <style scoped>
+
   .title1{
     margin-top: 120px;
     text-align: center;