1

src/App.vue

@@ -10,7 +10,9 @@ export default {
     }
   },
   mounted() {
-    
+    this.$router.push({
+      name: "Home"
+    });
   },
   methods: {
     

src/assets/css/init.css

@@ -12,4 +12,10 @@ sub{ vertical-align:text-bottom; }
 legend { color:#000; }
 fieldset, img { border:0; }
 button, input, select, textarea { font-size:100%; }
-table { border-collapse:collapse; border-spacing:0; }
\ No newline at end of file
+table { border-collapse:collapse; border-spacing:0; }
+.w110{
+    width: 110px;
+}
+.height100{
+    height: 100%;
+}
\ No newline at end of file

src/components/HomeNav/HomeNav.vue

-<style>
-.home-nav{
-    width: 100%;
-    height: 100%;
-}
-.log-box{
-    width: 100%;
-    height: 13.19%;
-}
-.log-box{
-    background-color: white;
-}
-.log-box>div{
-    height: 100%;
-    width: 100%;
-    background:rgba(13,36,129,1);
-    border-radius:0px 40px 40px 0px;
-    display: flex;
-    align-items: center;
-    justify-content: center
-}
-.log-box img{
-    width: 42px;
-}
-.home-nav .home-menu {
-    padding-left: 19px;
-}
-.home-nav .home-menu .home-menu-item{
-    color:rgba(255,255,255,1);
-    font-size: 12px;
-    cursor: pointer;
-    transition: all linear .2s;
-}
-.home-nav .home-menu .home-menu-item>div{
-    padding: 13px 0 13px 35px;
-    border-radius: 19px 0 0 19px;
-    background-color: rgba(13,36,129,1);
-}
-.home-nav .home-menu .home-menu-item:hover{
-    background-color: rgb(45, 59, 115);
-}
-.home-nav .home-menu .home-menu-item.active>div{
-    font-weight:bold;
-    color:rgba(13,36,129,1);
-    opacity: 1;
-    transition: all linear .2s;
-    background-color: white
-}
-</style>
-<template>
-    <div class="home-nav">
-        <div class="log-box">
-            <div>
-                <img src="../../assets/img/logo.png" alt="">
-            </div>
-        </div>
-        <ul class="home-menu">
-            <li class="home-menu-item" v-for="(item, index) in navList" :key="index" :class="[index === activeIndex ? 'active' : '']" @click="changeMenu(item, index)">
-                <div>
-                    <i :class="item.class"></i><span>{{item.name}}</span>
-                </div>
-            </li>
-        </ul>
-    </div>
-</template>
-<script>
-export default {
-    data () {
-        return {
-            activeIndex: 0,
-            navList: [
-                {
-                    class: 'iconfont icondongwu',
-                    name: '仪表盘'
-                },
-                {
-                    class: 'iconfont icondongwu',
-                    name: '待办事项'
-                },
-                {
-                    class: 'iconfont icondongwu',
-                    name: '线索'
-                },
-                {
-                    class: 'iconfont icondongwu',
-                    name: '客户'
-                },
-                {
-                    class: 'iconfont icondongwu',
-                    name: '联系人'
-                },
-                {
-                    class: 'iconfont icondongwu',
-                    name: '公海'
-                },
-                {
-                    class: 'iconfont icondongwu',
-                    name: '商机'
-                },
-                {
-                    class: 'iconfont icondongwu',
-                    name: '合同'
-                }
-            ]
-        }
-    },
-    mounted () {
-        
-    },
-    methods: {
-        changeMenu: function (it, ind) {
-            this.activeIndex = ind
-        } 
-    }
-
-}
-</script>

src/router.js

 import Vue from "vue";
 import Router from "vue-router";
 import index from "./views/index";
+import Home from "./components/Home"
 Vue.use(Router);
 
 export default new Router({
@@ -12,11 +13,19 @@ export default new Router({
       name: "index",
       component: index,
       meta: {
-        title: "印象之旅~感动与世界同步",
+        title: "CRM",
         "http-equiv": "X-UA-Compatible",
         content: "IE=Edge,chrome=1"
       },
       children: [
+        {
+          path: "/Home",
+          name: "Home",
+          component: Home,
+          meta: {
+            title: "CRM-仪表盘",
+          },
+        }
       ]
     }    
   ]

src/views/index.vue

@@ -3,7 +3,7 @@
     height: 100%;
 }
 .left-nav{
-    width: 14.93%;
+    width: 15%;
     float: left;
     box-sizing: border-box;
     height: 100%;
@@ -11,26 +11,56 @@
 }
 .right-content{
     float: left;
-    width: calc(100vw - 14.93%);
+    width: 85%;
     background: #F4F5F9;
     box-sizing: border-box;
     height: 100%;
+    padding-left: 30px;
+}
+.home-nv-right{
+    width: 100%;
+    height: 11%;
+    box-sizing: border-box;
+}
+.template-div{
+    height: calc(100vh - 14%);
+    overflow-y: auto;
+}
+.template-div::-webkit-scrollbar{
+    width: 4px;
+    height: 8px;
+}
+.template-div::-webkit-scrollbar-thumb {
+    border-radius: 4px;
+    -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
+    background: #c9c9c9;
+}
+.template-div::-webkit-scrollbar-thumb {
+    -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
+    border-radius: 4px;
+    background: #EDEDED;
 }
 </style>
 <template>
     <div class="clearfix main">
         <div class="left-nav">
-            <HomeNav/>
+            <HomeNavLeft/>
         </div>
         <div class="right-content">
-            a
+            <div class="home-nv-right">
+                <HomeNavRight/>
+            </div>
+            <div class="template-div">
+                <router-view/>
+            </div>
         </div>
     </div>
 </template>
 <script>
-import HomeNav from '../components/HomeNav/HomeNav'
+import HomeNavLeft from '../components/HomeNav/HomeNavLeft'
+import HomeNavRight from '../components/HomeNav/HomeNavRight'
 export default {
-    components: {HomeNav},
+    components: {HomeNavLeft, HomeNavRight},
     data () {
         return {