in

src/assets/css/public/common.less

@@ -28,7 +28,7 @@ h5 {
 }
 }
 
 
 body {
 body {
-    background-color: #FFFFFF;
+    background-color: #f1f4fa;
     color           : #333;
     color           : #333;
     font-family     : "微软雅黑";
     font-family     : "微软雅黑";
     font-size       : 12px;
     font-size       : 12px;
@@ -65,4 +65,16 @@ ul {
 caption,
 caption,
 th {
 th {
     text-align: left;
     text-align: left;
+}
+/**element-ui 样式重写**/
+.el-message--info{
+    min-width:auto!important;
+    border:0px!important;
+    background: rgba(0,0,0,0.4)!important;
+    .el-icon-info{
+        display: none;
+    }
+    .el-message__content{
+        color:#fff!important;
+    }
 }
 }
\ No newline at end of file

src/assets/css/public/common.min.css

-body,dl,dt,dd,ul,ol,li,pre,form,input,p,th,td{font-weight:400;margin:0;padding:0}h1,h2,h3,h4,h4,h5{margin:0;padding:0}body{background-color:#FFFFFF;color:#333;font-family:"微软雅黑";font-size:12px;text-align:left}select{font-size:12px}table{border-collapse:collapse}img{border:0 none}em,strong,th,i{font-style:normal;font-weight:400}ol,ul{list-style-image:none;list-style-position:outside;list-style-type:none}caption,th{text-align:left}
+body,dl,dt,dd,ul,ol,li,pre,form,input,p,th,td{font-weight:400;margin:0;padding:0}h1,h2,h3,h4,h4,h5{margin:0;padding:0}body{background-color:#f1f4fa;color:#333;font-family:"微软雅黑";font-size:12px;text-align:left}select{font-size:12px}table{border-collapse:collapse}img{border:0 none}em,strong,th,i{font-style:normal;font-weight:400}ol,ul{list-style-image:none;list-style-position:outside;list-style-type:none}caption,th{text-align:left}.el-message--info{min-width:auto!important;border:0px!important;background:rgba(0,0,0,0.4) !important}.el-message--info .el-icon-info{display:none}.el-message--info .el-message__content{color:#fff !important}
\ No newline at end of file

src/components/menu.vue

 <template>
 <template>
-    <div class="meau-yx">
-        
-        <div class="meau-con">
-            我是左侧菜单
-        </div>
+  <div class="meau-yx">
+    <div class="logo">云芯系统</div>
+    <i>展开</i>
+    <div class="meau-con">
+      
+      <el-menu default-active="2" class="el-menu-vertical-demo" active-text-color="#1969F9">
+        <el-submenu index="1">
+          <template slot="title">
+            <i class="el-icon-location"></i>
+            <span>导航一</span>
+          </template>
+          <el-menu-item-group>
+            <el-menu-item index="1-1">选项1</el-menu-item>
+            <el-menu-item index="1-2">选项2</el-menu-item>
+          </el-menu-item-group>
+        </el-submenu>
+        <el-menu-item index="2">
+          <i class="el-icon-menu"></i>
+          <span slot="title">导航二</span>
+        </el-menu-item>
+        <el-menu-item index="3">
+          <i class="el-icon-setting"></i>
+          <span slot="title">导航三</span>
+        </el-menu-item>
+      </el-menu>
     </div>
     </div>
+  </div>
 </template>
 </template>
 
 
 <script>
 <script>
+  import Vue from 'vue';
+  import {
+    Menu,
+    MenuItem,
+    Submenu,
+    MenuItemGroup,
+    Message
+  } from 'element-ui'
+  Vue.use(Menu).use(MenuItem).use(MenuItemGroup).use(Submenu)
 
 
   export default {
   export default {
     name: 'menus',
     name: 'menus',
     props: {
     props: {
-     
+
     },
     },
     data() {
     data() {
       return {
       return {
-       
+
       }
       }
     },
     },
     methods: {
     methods: {
-        
+
     }
     }
   }
   }
 </script>
 </script>
 
 
 <style lang="less">
 <style lang="less">
-  #app{padding-left:220px;}
-  .meau-yx{
-      width:220px;
-      background: #ccc;
-      position:fixed;
-      left:0px;
-      top:0px;
-      bottom:0px;
-      .meau-con{
-          width:100%;
+  #app {
+    padding-left: 220px;
+  }
+
+  .meau-yx {
+    width: 226px;
+    background: #fff;
+    position: fixed;
+    left: 0px;
+    top: 0px;
+    bottom: 0px;
+    .logo{
+      height: 56px;
+      line-height: 56px;
+      font-weight: bold;
+      color:#fff;
+      text-align: center;
+      background: #1969F9;
+      box-shadow: 0px 2px 42px -8px rgba(206, 214, 219, 0.5);
+    }
+    .meau-con {
+      width: 100%;
+      overflow: auto;
+      height:100vh;
+      
+      .el-menu{
+        border:0px;
+        .el-menu-item,.el-submenu__title{
+font-size: 16px;color:#646B78;
+        }
+        
+      }
+      &::-webkit-scrollbar {
+        width: 18px;
       }
       }
+      &::-webkit-scrollbar-thumb {
+        border-radius: 8px;
+        background: #fff;
+        width:10px;
+        -webkit-box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.2);
+      }
+      &::-webkit-scrollbar-track {
+        border-radius: 0;
+        background: #D2D9E7;
+      }
+    }
   }
   }
 </style>
 </style>
\ No newline at end of file

src/views/Index/index.vue

@@ -11,10 +11,9 @@
   import Menu from "@/components/menu.vue";
   import Menu from "@/components/menu.vue";
   import Tool from '../../tool'
   import Tool from '../../tool'
   import {
   import {
-    Button
-
+    Button,
+    Message 
   } from 'element-ui'
   } from 'element-ui'
-
   Vue.use(Button)
   Vue.use(Button)
   export default {
   export default {
     name: "index",
     name: "index",
@@ -29,6 +28,8 @@
     computed: {},
     computed: {},
     methods: {
     methods: {
       ceshi() {
       ceshi() {
+          //this.$message.error('上传头像图片只能是 JPG 格式!');
+        Message('这是一条消息提示');
         this.$http('get', "/getJoke1", {
         this.$http('get', "/getJoke1", {
           page: 1, count: 2, type: 'video'
           page: 1, count: 2, type: 'video'
         })
         })