导航栏

src/main.js

@@ -18,9 +18,11 @@ import {
   Menu,
   MenuItem,
   Breadcrumb,
-  BreadcrumbItem
+  BreadcrumbItem,
+  Avatar
 } from 'element-ui'
 
+Vue.use(Avatar)
 Vue.use(Button)
 Vue.use(Form)
 Vue.use(Input)

src/views/index.vue

@@ -6,7 +6,10 @@
           <img src="../assets/logo.png" alt="" />
         </router-link>
       </div>
-      <div class="navUser">用户</div>
+      <div class="navUser">
+        <div class="block"><el-avatar shape="square" :size="50" :src="squareUrl"></el-avatar></div>
+        <span>{{ userName }}</span>
+      </div>
     </div>
     <div class="content">
       <img src="../assets/11.jpg" alt="" />
@@ -36,6 +39,8 @@ export default {
   name: 'HomeView',
   data () {
     return {
+      userName: 'ddmt',
+      // squareUrl: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
       parItem: [
         {
           title: '环境治理',
@@ -76,20 +81,29 @@ export default {
 <style lang="less">
 .navigationBar {
   width: 100%;
-  height: 100px;
+  height: 80px;
   border: 1px solid black;
   border-top-left-radius: 5px;
   border-top-right-radius: 5px;
 
   img {
-    width: 600px;
+    margin-left: 5px;
-    height: 100px;
+    width: auto;
+    height: 80px;
     float: left;
   }
 
   .navUser {
     float: right;
     margin-right: 100px;
+    .block {
+      display: inline-block;
+      margin-top: 15px;
+    }
+
+    span{
+      height: 100%;
+    }
   }
 }
 
@@ -138,7 +152,7 @@ export default {
     transition: all 0.5s;
   }
 
-  li:nth-child(5){
+  li:nth-child(5) {
     position: absolute;
     right: 0;
   }
@@ -173,7 +187,7 @@ export default {
     padding: 20px;
   }
 
-  button{
+  button {
     width: 100px;
     height: 30px;
     background-color: rgba(255, 255, 255, 0.4);