公共部分的布局

src/router/index.js

@@ -25,6 +25,7 @@ Vue.use(Router);
 export const constantRoutes = [
   {
     path: '',
+    redirect: '/home',
     component: resolve => require(['@/views/index'], resolve),
     name: 'index',
     children: [

src/views/index.vue

@@ -1,8 +1,37 @@
 <template>
   <div class="index_page">
+    <!-- 右侧悬浮 -->
+    <div class="slid">
+      <div class="item-box">
+        <el-tooltip class="item" effect="dark" placement="left-start">
+          <div class="tip_img" slot="content">
+            <img src="@/assets/image/scanloginqrcode.jpg" alt="" />
+          </div>
+          <div>
+            <img src="@/assets/image/weixin.png" />
+            <div class="text">公众号</div>
+          </div>
+        </el-tooltip>
+      </div>
+      <div class="item-box">
+        <el-tooltip class="item" effect="dark" placement="left-start">
+          <div class="tip_img" slot="content">
+            <img src="@/assets/image/scanloginqrcode.jpg" alt="" />
+          </div>
+          <div>
+            <img src="@/assets/image/qq.png" />
+            <div class="text">QQ群</div>
+          </div>
+        </el-tooltip>
+      </div>
+      <div class="item-box">
+        <img src="@/assets/image/service.png" />
+        <div class="text">在线客服</div>
+      </div>
+    </div>
     <!-- <div class="img_box">
-        <img src="@/assets/image/toubu.png" alt="" />
+      <img src="@/assets/image/toubu.png" alt="" />
-      </div> -->
+    </div> -->
     <!-- 整体宽度 -->
     <div class="content">
       <!-- 头部 -->
@@ -43,6 +72,60 @@
     <div class="content">
       <router-view></router-view>
     </div>
+    <div class="my_footer">
+      <div style="height: 4px;background: #FFA32C;"></div>
+      <div class="footer_one content">
+        <p>
+          <span>
+            <i><img src="@/assets/image/icon1.png" alt=""/></i>
+            总浏览量：1020</span
+          >
+          <span>
+            <i><img src="@/assets/image/icon1.png" alt=""/></i>
+            今日浏览：1020</span
+          >
+        </p>
+        <div class="footer_two">
+          <div class="footer_left">
+            <div class="footer_left_one">
+              <span class="footer_left_l">版权声明</span>
+              <span class="footer_left_r">
+                <i><img src="@/assets/image/icon3.png" alt=""/></i>
+                客服热线：(周一至周五8:30-18:00)
+              </span>
+            </div>
+            <div class="footer_left_two">
+              <span class="footer_left_l">用户协议</span>
+            </div>
+            <div class="footer_left_three">
+              <span class="footer_left_l">意见反馈</span>
+              <span class="footer_left_r">
+                <i><img src="@/assets/image/icon2.png" alt=""/></i>
+                公司地址：安徽省合肥市蜀山区黄山市601号412-414
+              </span>
+            </div>
+          </div>
+          <div class="footer_right">
+            <div class="item">
+              <img src="@/assets/image/scanloginqrcode.jpg" alt="" />
+              <div>嘉策公众号</div>
+            </div>
+            <div class="item">
+              <img src="@/assets/image/scanloginqrcode.jpg" alt="" />
+              <div>QQ群</div>
+            </div>
+          </div>
+        </div>
+        <div class="footer_three">
+          <div>
+            <span>商务合作</span>
+            <span>政策服务</span>
+            <span>在线解答</span>
+          </div>
+          <p>版权服务：合肥嘉策信息技术服务有限公司 皖ICP备45619723号</p>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -108,6 +191,26 @@ export default {
   //   left: 0;
   //   z-index: -1;
   // }
+  .slid {
+    width: 82px;
+    height: 246px;
+    position: fixed;
+    left: 50%;
+    border: 1px solid #dcdcdc;
+    border-bottom: 0;
+    background: #ffffff;
+    margin-left: 720px;
+    top: 400px;
+    .item-box {
+      text-align: center;
+      padding: 15px 0;
+      border-bottom: 1px solid #dcdcdc;
+      .text {
+        font-size: 16px;
+        color: #666;
+      }
+    }
+  }
 
   .header {
     height: 206px;
@@ -191,7 +294,74 @@ export default {
       }
     }
   }
-
+  .my_footer {
+    .footer_one {
+      p {
+        text-align: center;
+        font-size: 14px;
+        color: #666;
+        span {
+          i {
+            margin-right: 3px;
+            img {
+              vertical-align: middle;
+            }
+          }
+        }
+        span:nth-child(2) {
+          margin-left: 40px;
+        }
+      }
+    }
+    .footer_two {
+      border-bottom: 1px solid #dcdcdc;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .footer_left {
+        padding: 50px 0;
+        .footer_left_two {
+          margin: 20px 0;
+        }
+        .footer_left_l {
+          font-size: 18px;
+          color: #333;
+          margin-right: 30px;
+        }
+        .footer_left_r {
+          i {
+            img {
+              vertical-align: middle;
+            }
+          }
+        }
+      }
+      .footer_right {
+        display: flex;
+        .item {
+          font-size: 18px;
+          color: #333;
+          margin-right: 50px;
+          text-align: center;
+        }
+      }
+    }
+    .footer_three {
+      text-align: center;
+      padding: 36px 0;
+      div {
+        font-size: 16px;
+        color: #3394ff;
+        span:nth-child(2) {
+          margin: 0 39px;
+        }
+      }
+      p {
+        font-size: 14px;
+        color: #333;
+      }
+    }
+  }
   .el-tabs--border-card {
     border: 0;
   }
@@ -240,7 +410,6 @@ export default {
     padding: 0 100px;
   }
 }
-
 @media (max-width: 1024px) {
   .chart-wrapper {
     padding: 8px;