style: 修改样式

package.json

@@ -2,7 +2,7 @@
   "name": "@gic-test/vue-office-header",
   "description": "vue-office-header Plugin",
   "author": "fairyly <498745097@qq.com>",
-  "version": "1.0.28",
+  "version": "1.0.30",
   "license": "MIT",
   "private": false,
   "main": "dist/vue-office-header.js",

src/lib/vue-office-header.vue

@@ -3,7 +3,7 @@
     <!-- logo -->
     <div class="navheader-logo fl" :class="{moveleft: isCollapse ,moveright: !isCollapse}">好办管理平台</div>
     <div class="navheader-item fl">
-      <a class="itemlink" @click="handleCollapse">
+      <a class="itemlink icon-collapse" @click="handleCollapse">
         <i class="iconfont" :class="{'icon-shouqi': !isCollapse,'icon-zhankai': isCollapse}"></i>
       </a>
       <template v-for="(menuitem,index) in menuHead">
@@ -74,7 +74,7 @@
       }
     },
     beforeMount() {
-      const that = this
+      const that = this;
       let host = window.location.origin;
       if (host.indexOf('localhost') != '-1') {
         that.baseUrl = 'http://www.gicdev.com';
@@ -366,6 +366,12 @@
   flex-wrap: wrap;
 }
 
+.border-box {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
 .flex1(@width,@height) {
   flex: 0 0 @width;
   width: @width;
@@ -416,6 +422,8 @@
   padding: 0;
   z-index: 99;
   color: #fff;
+  -webkit-box-shadow: 5px -1px 10px #ddd;
+  box-shadow: 5px -1px 10px #ddd;
 
   .fl {
     float: left;
@@ -430,11 +438,12 @@
     width: 200px;
     height: 64px;
     float: left;
-    padding-left: 28px;
+    padding-left: 50px;
     font-size: 20px;
     color: #1F2F3D;
     text-align: center;
     background: url("./logo.png") no-repeat 20px center;
+    .border-box;
   }
 
   &-pic {
@@ -443,34 +452,38 @@
 
   &-item {
     flex: 1;
-    box-shadow: 5px -1px 10px #ddd;
   }
   .itemlink {
     float: left;
-    padding: 0 20px;
     display: inline-block;
+    width: 133px;
     height: 62px;
+    text-align: center;
     cursor: pointer;
     color: #606266;
 
+    &.icon-collapse {
+      width: auto;
+      padding: 0 23px 0 14px;
+    }
+
     &:hover {
       color: @main-color;
     }
   }
 
   .bottom:hover {
-    border-bottom: 2px solid @main-color;
+    border-bottom: 3px solid @main-color;
   }
 
   /* 选中 */
   .current-module.bottom {
     color: @main-color;
-    border-bottom: 2px solid @main-color;
+    border-bottom: 3px solid @main-color;
     font-weight: 500;
   }
 
   /* logo */
-
   .moveleft {
     margin-left: -136px;
     transition: all .3s ease;
@@ -482,7 +495,6 @@
     margin-left: 0px;
     transition: all .2s ease;
   }
-
 }
 
 li {
@@ -518,8 +530,6 @@ li {
   }
 }
 
-
-
 .user-left-img {
   img {
     width: 24px;
@@ -549,6 +559,4 @@ li {
     min-width: 1440px
   }
 }
-
-
 </style>