首页进行了部分调整

package.json

@@ -8,6 +8,7 @@
   },
   "dependencies": {
     "axios": "^0.18.0",
+    "chart.js": "^2.9.3",
     "co": "^4.6.0",
     "echarts": "^4.2.0-rc.1",
     "element-ui": "^2.13.0",
@@ -17,12 +18,15 @@
     "moment": "^2.22.2",
     "register-service-worker": "^1.0.0",
     "vue": "^2.5.17",
+    "vue-chartjs": "^3.5.0",
     "vue-echarts-v3": "^1.0.19",
     "vue-lazyload": "^1.2.6",
     "vue-router": "^3.0.1",
     "vue2.0-zoom": "^2.1.1",
     "vuex": "^3.0.1",
-    "webpack-require-http": "^0.4.3"
+    "vxe-table": "^2.7.24",
+    "webpack-require-http": "^0.4.3",
+    "xe-utils": "^2.3.0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.4.1",

src/App.vue

@@ -22,7 +22,7 @@ export default {
 
 <style>
 @import './assets/global/font.css';
-@import '//at.alicdn.com/t/font_1627123_zhwytyp2i4.css';
+@import '//at.alicdn.com/t/font_1627123_b01m6uprnb.css';
 /* @import './assets/css/common.css'; */
 @import './assets/css/init.css';
 body,html{

src/components/HomeNav/HomeNavLeft.vue

 <style>
-.home-nav{
-    width: 100%;
-    height: 100%;
-}
-.log-box{
-    width: 100%;
-    height: 13.19%;
-}
-.log-box{
-    background-color: #F4F5F9;
-}
-.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
-}
-.home-nav .log-box.fillet-none>div{
-    border-radius:0px 40px 0px 0px;
-}
-.log-box img{
-    width: 42px;
+.home-nav {
+  width: 100%;
+  height: 100%;
+  font-family: perfectFont;
+  user-select: none;
+}
+.log-box {
+  width: 100%;
+  height: 13.19%;
+}
+.log-box {
+  background-color: #f4f5f9;
+}
+.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;
-    background-color: #F4F5F9;
-}
-.home-nav .home-menu .home-menu-item>div{
-    padding: 0 0 0 35px;
-    background-color: rgba(13,36,129,1);
-    height: 50px;
-    line-height: 50px;
-}
-.home-nav .home-menu .home-menu-item.active{
-    background-color: rgba(13,36,129,1);
-}
-.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: #F4F5F9;
-    border-radius: 19px 0 0 19px;
-}
-.home-nav .home-menu .home-menu-item.active + .home-menu-item>div{
-    border-radius: 0px 40px 0px 0px;
-}
-.home-nav .home-menu .home-menu-item.shang>div{
-    border-radius: 0px 0px 40px 0px;
-}
-.home-nav .home-menu .home-menu-item.active + .home-menu-item>div{
-    border-radius: 0px 40px 0px 0px;
-}
-.home-nav .home-menu .home-menu-item>div .iconfont{
-    padding-right: 10px;
+  padding-left: 19px;
+}
+.home-nav .home-menu .home-menu-item {
+  color: rgba(255, 255, 255, 1);
+  font-size: 13px;
+  cursor: pointer;
+  transition: all linear 0.2s;
+  background-color: #f4f5f9;
+}
+.home-nav .home-menu .home-menu-item > div {
+  padding: 0 0 0 35px;
+  background-color: rgba(13, 36, 129, 1);
+  height: 50px;
+  line-height: 50px;
+}
+.home-nav .home-menu .home-menu-item.active {
+  background-color: rgba(13, 36, 129, 1);
+}
+.home-nav .home-menu .home-menu-item.active > div {
+  font-weight: bold;
+  color: rgba(13, 36, 129, 1);
+  opacity: 1;
+  transition: all linear 0.2s;
+  background-color: #f4f5f9;
+  /* border-radius: 19px 0 0 19px; */
+}
+.home-nav .home-menu .home-menu-item > div .iconfont {
+  padding-right: 10px;
 }
 </style>
 <template>
-    <div class="home-nav">
-        <div class="log-box" :class="[activeIndex !== 0 ? 'fillet-none' : '']">
-            <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' : '', activeIndex === index + 1 ? 'shang' : '']" @click="changeMenu(item, index)">
-                <div>
-                    <i :class="item.class"></i><span>{{item.name}}</span>
-                </div>
-            </li>
-        </ul>
+  <div class="home-nav">
+    <div class="log-box" :class="[activeIndex !== 0 ? 'fillet-none' : '']">
+      <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' : '', activeIndex === index + 1 ? 'shang' : '']"
+        @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 iconyibiaopan',
-                    name: '仪表盘'
-                },
-                {
-                    class: 'iconfont icondaiban',
-                    name: '待办事项'
-                },
-                {
-                    class: 'iconfont iconxiansuo',
-                    name: '线索'
-                },
-                {
-                    class: 'iconfont iconkehu',
-                    name: '客户'
-                },
-                {
-                    class: 'iconfont iconkehu1',
-                    name: '联系人'
-                },
-                {
-                    class: 'iconfont icongonghaiguanli',
-                    name: '公海'
-                },
-                {
-                    class: 'iconfont iconshangji',
-                    name: '商机'
-                },
-                {
-                    class: 'iconfont iconhetong',
-                    name: '合同'
-                }
-            ]
+  data() {
+    return {
+      activeIndex: 0,
+      navList: [
+        {
+          class: "iconfont iconyibiaopan",
+          name: "仪表盘"
+        },
+        {
+          class: "iconfont icondaiban",
+          name: "待办事项"
+        },
+        {
+          class: "iconfont iconxiansuo",
+          name: "线索"
+        },
+        {
+          class: "iconfont iconkehu",
+          name: "客户"
+        },
+        {
+          class: "iconfont iconkehu1",
+          name: "联系人"
+        },
+        {
+          class: "iconfont icongonghaiguanli",
+          name: "公海"
+        },
+        {
+          class: "iconfont iconshangji",
+          name: "商机"
+        },
+        {
+          class: "iconfont iconhetong",
+          name: "合同"
         }
-    },
-    mounted () {
-        
-    },
-    methods: {
-        changeMenu: function (it, ind) {
-            this.activeIndex = ind
-        } 
+      ]
+    };
+  },
+  mounted() {},
+  methods: {
+    changeMenu: function(it, ind) {
+      this.activeIndex = ind;
     }
-
-}
+  }
+};
 </script>

src/components/HomeNav/HomeNavRight.vue

-<style>
-.nav-right{
-    height: 100%;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-.nav-right .nav-right-menu,.nav-right-info{
-    display: flex;
-    align-items: center;
-}
-.nav-right .nav-right-menu>div{
-    padding: 10px 35px;
-    background:rgba(237,237,237,1);
-    border-radius:8px;
-    font-weight:400;
-    color:rgba(153,153,153,1);
-    font-size: 12px;
-    margin-right: 20px;
-    cursor: pointer;
-}
-.nav-right .nav-right-menu>div.active{
-    background:rgba(13,36,129,1);
-    box-shadow:0px 5px 6px 0px rgba(23,31,62,0.4);
-    color:rgba(255,255,255,1);
-}
-.nav-right-info{
-    align-items: center;
-    font-size:14px;
-    height: 100%;
-}
-.nav-right-info .n-left{
-    display: flex;
-    align-items: center;
-    margin-right: 30px;
-}
-.nav-right-info .n-left span{
-    padding-left: 10px; 
-}
-.nav-right-info .n-left .qiehuan{
-    font-weight: bold;
-    color:#0D2481;
-    cursor: pointer;
-    padding-right: 30px;
-}
-.nav-right-info .n-left .el-input__inner{
-    border-radius: 17px;
-}
-.nav-right-info .n-right{
-    padding: 0 30px;
-    display: flex;
-    align-items: center;
-    height: 100%;
-    border-radius:30px 0px 0px 0px;
-    background:linear-gradient(0deg,rgba(244,245,249,1),rgba(255,255,255,1));
-}
-.nav-right-info .n-right img.msg{
-    padding-right: 30px;
-}
-.nav-right-info .n-right .hi{
-    color: #BEBEBE;
-}
-.nav-right-info .n-right .name{
-    padding-right: 30px;
-}
-.nav-right-info .n-right img.head{
-    width:44px;
-    height:44px;
-    background:rgba(255,106,105,1);
-    border-radius:50%;
-}
-</style>
-<template>
-    <div class="nav-right">
-        <div class="nav-right-menu">
-            <div v-for="(item, index) in menuList" :key="index" :class="{'active': activeIndex === index}" @click="activeIndex = index">{{item.name}}</div>
-        </div>
-        <div class="nav-right-info">
-            <div class="n-left">
-                <img src="../../assets/img/nav/em.png" alt="">
-                <span>本人及下属</span>
-                <span>|</span>
-                <span class="qiehuan">切换</span>
-                <el-select v-model="value" size="mini" class="w110" placeholder="请选择">
-                    <el-option
-                        v-for="item in options"
-                        :key="item.value"
-                        :label="item.label"
-                        :value="item.value">
-                    </el-option>
-                </el-select>
-            </div>
-            <div class="n-right">
-                <img class="msg" src="../../assets/img/nav/msg.png" alt="">
-                <span class="hi">Hello,</span>
-                <span class="name">李思思</span>
-                <img class="head" src="https://dss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=3520291871,4257579916&fm=58" alt="">
-            </div>
-        </div>
-    </div>
-</template>
-<script>
-
-export default {
-    data () {
-        return {
-            activeIndex: 0,
-            value: 0,
-            menuList: [
-                {
-                    name: '客户管理',
-                },
-                {
-                    name: '商业智能',
-                }
-            ],
-            options: [
-                {
-                    value: 0,
-                    label: '本年'
-                },{
-                    value: 1,
-                    label: '本月'
-                },{
-                    value: 2,
-                    label: '今日'
-                }
-            ]
-        }
-    },
-    mounted () {
-        
-    },
-    methods: {
-       
-    }
-
-}
-</script>

src/components/HomeNav/HomeNavTop.vue

+<style>
+.nav-right {
+  height: 100%;
+  margin: 0 30px;
+  display: flex;
+  font-family: perfectFont;
+  user-select: none;
+}
+.nav-right .nav-right-menu,
+.nav-right .nav-right-info {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  flex: 1;
+}
+.nav-right .nav-right-menu ul {
+  padding: 0;
+  margin: 0;
+  display: flex;
+  width: 100%;
+  height: 100%;
+}
+.nav-right .nav-right-menu ul li {
+  line-height: 56px;
+  display: inline-block;
+  border-bottom: 3px solid rgba(13, 36, 129, 0);
+  margin: 0 20px;
+  color: #666;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+}
+.nav-right .nav-right-menu ul li:first-child {
+  margin-left: 0px;
+}
+.nav-right .nav-right-menu ul li.active {
+  color: rgba(13, 36, 129, 1);
+  border-bottom-color: rgba(13, 36, 129, 1);
+}
+.nav-right .nav-right-menu ul li i {
+  font-size: 16px;
+  margin-right: 5px;
+}
+.nav-right .nav-right-info {
+  flex: unset;
+  width: 240px;
+  justify-content: flex-end;
+}
+.nav-right .nav-right-info .right-item {
+  text-align: right;
+  padding-left: 20px;
+}
+/* .nav-right .nav-right-info .right-item:last-child{
+    margin: 0px;
+} */
+.nav-right .nav-right-info .right-item img {
+  width: 34px;
+  height: 34px;
+  border-radius: 100%;
+}
+.nav-right .nav-right-info .right-item .welcomne-txt {
+  font-size: 12px;
+  color: #bbb;
+  margin-right: 5px;
+}
+.nav-right .nav-right-info .right-item .usr-name {
+  font-size: 16px;
+  font-weight: bold;
+  color: black;
+}
+.nav-right .nav-right-info .right-item i {
+  font-size: 20px;
+  color: #0d2481;
+}
+</style>
+<template>
+  <div class="nav-right">
+    <div class="nav-right-menu">
+      <ul>
+        <li :class="{'active':chosenMenuId==item.id}" v-for="(item, index) in menuList" :key="index" @click="chosenFirstLeaveMenu(item.id)">
+          <i class="iconfont" :class="[item.icon]"></i>{{item.name}}
+        </li>
+      </ul>
+    </div>
+    <div class="nav-right-info">
+      <div class="right-item">
+        <i class="iconfont iconmessage"></i>
+      </div>
+      <div class="right-item">
+        <span class="welcomne-txt">Good Job,</span>
+        <span class="usr-name">吴彦祖</span>
+      </div>
+      <div class="right-item">
+        <el-avatar :size="34" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1580985297255&di=d10539f3a69a8507564aaa3ac4fc131b&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fq_mini%2Cc_zoom%2Cw_640%2Fimages%2F20170728%2F5843abd8cdb74745a2fe2349879cb055.jpeg" @error="errorHandler">
+          <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
+        </el-avatar>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      activeIndex: 0,
+      value: 0,
+      menuList: [
+        {
+            id:1,
+          name: "客户管理",
+          path: "/home",
+          icon: "iconcompany"
+        },
+        {
+            id:2,
+          name: "任务/审批",
+          path: "/home",
+          icon: "icontask"
+        },
+        {
+            id:3,
+          name: "日志",
+          path: "/home",
+          icon: "iconlog"
+        },
+        {
+            id:4,
+          name: "通讯录",
+          path: "/home",
+          icon: "icontongxunlu"
+        },
+        {
+            id:5,
+          name: "智能分析",
+          path: "/home",
+          icon: "iconareachart"
+        }
+      ],
+      chosenMenuId:0
+    };
+  },
+  mounted() {},
+  methods: {
+      chosenFirstLeaveMenu(id){
+          this.chosenMenuId=id
+      },
+      errorHandler() {
+        return false
+      }
+  }
+};
+</script>

src/components/chart/ticheng.vue

+<template>
+  <div class="inerank-container">
+    <div :style="{height:'100%',width:'100%'}" ref="myLineRank"></div>
+  </div>
+</template>
+<script>
+export default {
+  props:{
+    data:{
+      type:Array,
+      default:[]
+    }
+  },
+  data() {
+    return {};
+  },
+  mounted() {
+    this.data=[
+      {
+        dataStr:'9月',
+        preferPrice:12000
+      },
+      {
+        dataStr:'10月',
+        preferPrice:8000
+      },
+      {
+        dataStr:'11月',
+        preferPrice:8500
+      },
+      {
+        dataStr:'12月',
+        preferPrice:7000
+      },
+      {
+        dataStr:'1月',
+        preferPrice:16000
+      },
+      {
+        dataStr:'2月',
+        preferPrice:0
+      },
+    ]
+    this.init();
+  },
+  methods: {
+    init() {
+      let myChart = this.$echarts.init(this.$refs.myLineRank);
+      var dataAxis = [];
+      var data2 = [];
+      this.data.forEach(x=>{
+        dataAxis.push(x.dataStr)
+        data2.push(x.preferPrice)
+      })
+      let option = {
+        // backgroundColor: "#0abb87", //"#19133e6e",
+        title: {
+          show: false
+        },
+        xAxis: {
+          data: dataAxis,
+          axisLabel: {
+            textStyle: {
+              color: "#79778a",
+              fontFamily: "DIN"
+            },
+            margin: 10,
+            interval: 0,
+            show: false
+          },
+          type : 'category',
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            show: false
+          }
+        },
+        yAxis: {
+          axisLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            textStyle: {
+              color: "#272938",
+              fontFamily: "DIN"
+            },
+            show: false
+          },
+          splitLine: {
+            show: false
+          }
+        },
+        grid: {
+          left: -54,
+          right: -54,
+          top: 0,
+          bottom: 0
+        },
+        tooltip: {
+          trigger: "item",
+          axisPointer: {
+            type: "none",
+            snap: true,
+            label: {
+              backgroundColor: '#FAB6B6'
+            }
+          }
+        },
+        series: [
+          {
+            name: "提成",
+            type: "line",
+            smooth: false,
+            symbol: "circle",
+            symbolSize: 4,
+            itemStyle: {
+              normal: {
+                lineStyle: {
+                  color: "#00C5C8"
+                },
+                areaStyle: {
+                  color: "#00C5C8"
+                },
+                color:"#00C5C8"
+              }
+            },
+            data: data2
+          }
+        ]
+      };
+      myChart.setOption(option);
+    }
+  }
+};
+</script>
+<style>
+.inerank-container {
+  height: 100%;
+  width: 100%;
+}
+</style>

src/views/index.vue

 <style>
 .main{
     height: 100%;
+    position: relative;
 }
 .left-nav{
-    width: 15%;
+    width: 184px;
     float: left;
     box-sizing: border-box;
-    height: 100%;
     background:rgba(13,36,129,1);
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
 }
 .right-content{
-    float: left;
-    width: 85%;
+    position: absolute;
+    top:0;
+    left: 184px;
     background: #F4F5F9;
     box-sizing: border-box;
-    height: 100%;
-    padding-left: 30px;
+    right: 0;
+    bottom: 0;
 }
-.home-nv-right{
+.home-nv-top{
     width: 100%;
-    height: 11%;
+    height: 60px;
     box-sizing: border-box;
+    position: absolute;
+    left:0;
+    right: 0;
+    top: 0px;
+    background: #FFF;
+    border-bottom: 1px solid #F1F1F1;
 }
 .template-div{
-    height: calc(100vh - 14%);
+    position: absolute;
+    top: 90px;
+    left: 30px;
+    right: 30px;
+    bottom: 0;
     overflow-y: auto;
 }
-.template-div::-webkit-scrollbar{
+*::-webkit-scrollbar{
     width: 4px;
     height: 8px;
 }
-.template-div::-webkit-scrollbar-thumb {
+*::-webkit-scrollbar-thumb {
     border-radius: 4px;
-    -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
+    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);
+*::-webkit-scrollbar-thumb {
+    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="main">
         <div class="left-nav">
             <HomeNavLeft/>
         </div>
         <div class="right-content">
-            <div class="home-nv-right">
-                <HomeNavRight/>
+            <div class="home-nv-top">
+                <HomeNavTop/>
             </div>
             <div class="template-div">
                 <router-view/>
@@ -58,9 +73,9 @@
 </template>
 <script>
 import HomeNavLeft from '../components/HomeNav/HomeNavLeft'
-import HomeNavRight from '../components/HomeNav/HomeNavRight'
+import HomeNavTop from '../components/HomeNav/HomeNavTop'
 export default {
-    components: {HomeNavLeft, HomeNavRight},
+    components: {HomeNavLeft, HomeNavTop},
     data () {
         return {
             

src/views/table.vue

 <template>
   <div>
-    <vxe-table border height="300" highlight-hover-row show-overflow :data="tableData">
+    <div style="width:60%;margin:100px auto;">
+      <vxe-table border height="300" highlight-hover-row show-overflow :data="tableData">
       <vxe-table-column type="seq" width="60" fixed="left"></vxe-table-column>
       <vxe-table-column field="name" title="Name" width="300"></vxe-table-column>
       <vxe-table-column field="role" title="Role" width="300"></vxe-table-column>
@@ -13,6 +14,7 @@
         </template>
       </vxe-table-column>
     </vxe-table>
+    </div>
   </div>
 </template>