更新avue 修改sidevar组件对接接口

src/App.vue

@@ -1,8 +1,6 @@
 <template>
 	<div id="app">
-		<transition  :name="transitionName">
 			<router-view></router-view>
-    	</transition>
 	</div>
 </template>
 
@@ -11,21 +9,10 @@ export default {
   name: "app",
   data() {
     return {
-      transitionName: "slide-right" // 默认动态路由变化为slide-right
+      
     };
   },
-  watch: {
+  watch: {},
-    $route(to, from) {
-      let isBack = this.$router.isBack; //  监听路由变化时的状态为前进还是后退
-
-      if (isBack) {
-        this.transitionName = "slide-right";
-      } else {
-        this.transitionName = "slide-left";
-      }
-      this.$router.isBack = false;
-    }
-  },
   created() {},
   methods: {},
   computed: {}
@@ -35,25 +22,6 @@ export default {
 #app {
   width: 100%;
   height: 100%;
-  overflow: hidden;
+  overflow:hidden;
-}
-.Router {
-  position: absolute;
-  width: 100%;
-  min-height: 100%;
-  overflow-y: hidden;
-  transition: all 0.5s ease;
-}
-
-.slide-left-enter,
-.slide-right-leave-active {
-  -webkit-transform: translate(100%, 0);
-  transform: translate(100%, 0);
-}
-
-.slide-left-leave-active,
-.slide-right-enter {
-  -webkit-transform: translate(-100%, 0);
-  transform: translate(-100% 0);
 }
 </style>

src/api/menu.js

@@ -1,7 +1,7 @@
 import request from '@/router/axios'
 export function GetMenu() {
     return request({
-        url: '/admin/menu/userTree',
+        url: '/admin/menu/getUserTree',
         method: 'get'
     })
 }

src/page/index/index.vue

@@ -14,7 +14,7 @@
 <script>
 import { mapGetters } from "vuex";
 import Tags from "./tags";
-import Top from "./top";
+import Top from "./top/";
 import Sidebar from "./sidebar/";
 export default {
   name: "index",

src/page/index/sidebar/index.vue

@@ -1,14 +1,7 @@
 <template>
-      <el-menu  
+  <el-menu unique-opened :default-active="tag.value" class="el-menu-vertical-demo" background-color="#495060" text-color="#c9cbd0" active-text-color="#409EFF" :collapse="isCollapse">
-      unique-opened  
+    <sidebar-item :menu="menu" :show="!isCollapse"></sidebar-item>
-      :default-active="tag.value" 
+  </el-menu>
-      class="el-menu-vertical-demo"  
-      background-color="#495060" 
-      text-color="#c9cbd0" 
-      active-text-color="#409EFF"
-      :collapse="isCollapse">
-          <sidebar-item :menu="menu" :show="!isCollapse"></sidebar-item>
-      </el-menu>
 </template>
 
 <script>

src/page/index/sidebar/sidebarItem.vue

@@ -1,22 +1,22 @@
 <template>
   <div class="menu-wrapper">
-    <template  v-for="(item,index) in menu">
+    <template v-for="item in menu">
-        <el-menu-item v-if="item.children.length===0 " :index="item.href" @click="open(item)" :key="item.label">
+      <el-menu-item v-if="item.children.length===0 " :index="item.component" @click="open(item)" :key="item.label">
-            <i :class="item.icon"></i>
+        <i :class="item.icon"></i>
-            <span slot="title">{{item.label}}</span>
+        <span slot="title">{{item.label}}</span>
-        </el-menu-item>
+      </el-menu-item>
       <el-submenu v-else :index="item.label" :key="item.name">
-          <template slot="title">
+        <template slot="title">
-              <i :class="item.icon"></i>
+          <i :class="item.icon"></i>
-              <span slot="title" :class="{display:!show}">{{item.label}}</span>
+          <span slot="title" :class="{display:!show}">{{item.label}}</span>
-          </template>
+        </template>
-          <template v-for="child in item.children">
+        <template v-for="child in item.children">
-              <el-menu-item :index="child.href" @click="open(child)" v-if="child.children.length==0">
+          <el-menu-item v-if="child.children.length==0" :index="child.component" @click="open(child)">
-                  <i :class="child.icon"></i>
+            <i :class="child.icon"></i>
-                  <span slot="title">{{child.label}}</span>
+            <span slot="title">{{child.label}}</span>
-              </el-menu-item>
+          </el-menu-item>
-           <sidebar-item  v-else  :menu="[child]" :show="show"></sidebar-item>
+          <sidebar-item v-else :menu="[child]" :show="show"></sidebar-item>
-         </template>
+        </template>
       </el-submenu>
     </template>
   </div>

src/page/index/tags.vue

@@ -1,43 +1,36 @@
 <template>
   <div class="tags-container">
-      <div class="tags-breadcrumb">
+    <!-- breadcrumb按钮和面包屑 -->
-           <i class="icon-navicon tag-collapse" :class="[{ 'tag-collapse_right': isCollapse }]" @click="showCollapse"></i>
+    <div class="tags-breadcrumb">
-           <Breadcrumb  class="tags-breadcrumb-list"></Breadcrumb>
+      <i class="icon-navicon tag-collapse" :class="[{ 'tag-collapse_right': isCollapse }]" @click="showCollapse"></i>
+      <Breadcrumb class="tags-breadcrumb-list"></Breadcrumb>
+    </div>
+    <!-- tag盒子 -->
+    <div class="tags-box" ref="tagBox">
+      <div class="tags-list" ref="tagsList" @mousewheel="hadelMousewheel" @mouseup="hadelMouseUp" @mousemove="hadelMouse" @mousedown="hadelMousestart" @touchup="hadelMouseUp" @touchmove="hadelMouse" @touchstart="hadelMousestart">
+        <div ref="tagsPageOpened" class="tag-item" :name="item.value" @contextmenu.prevent="openMenu(item,$event)" v-for="(item,index) in tagList" :key="index" @click="openUrl(item.value,item.label,item.num)">
+          <span class="icon-yuan tag-item-icon" :class="{'is-active':nowTagValue==item.value}"></span>
+          <span class="tag-text">{{item.label}}</span>
+          <i class="el-icon-close tag-close" @click.stop="closeTag(item)" v-if="item.close"></i>
+        </div>
       </div>
-       <div class="tags-box">
+      <el-dropdown class="tags-menu pull-right">
-         
+        <el-button type="primary" size="mini">
-          <div class="tags-list" ref="tagsList" >
+          更多
-            <div  class="tag-scroll" @mousewheel="hadelMousewheel" 
+          <i class="el-icon-arrow-down el-icon--right"></i>
-             @mouseup="hadelMouseUp" 
+        </el-button>
-             @mousemove="hadelMousewheel" 
+        <el-dropdown-menu slot="dropdown">
-             @mousedown="hadelMousestart" 
+          <el-dropdown-item @click.native="closeOthersTags">关闭其他</el-dropdown-item>
-             @touchup="hadelMouseUp" 
+          <el-dropdown-item @click.native="closeAllTags">关闭全部</el-dropdown-item>
-             @touchmove="hadelMousewheel" 
+        </el-dropdown-menu>
-             @touchstart="hadelMousestart">
+      </el-dropdown>
-              <div class="tag-item" @contextmenu.prevent="openMenu(item,$event)" v-for="(item,index) in tagList" :key="index" @click="openUrl(item.value,item.label,item.num)">
+    </div>
-                <span class="icon-yuan tag-item-icon" :class="{'is-active':nowTagValue==item.value}"></span> 
+    <!-- <ul class='contextmenu' v-show="visible" :style="{left:left+'px',top:top+'px'}">
-                <span class="tag-text">{{item.label}}</span> 
-                <i class="el-icon-close tag-close" @click.stop="closeTag(item)"  v-if="item.close"></i>
-              </div>
-            </div>
-           
-          </div>
-           <el-dropdown class="tags-menu pull-right">
-            <el-button type="primary" size="mini">
-              更多<i class="el-icon-arrow-down el-icon--right"></i>
-            </el-button>
-            <el-dropdown-menu slot="dropdown">
-              <el-dropdown-item  @click.native="closeOthersTags">关闭其他</el-dropdown-item>
-              <el-dropdown-item  @click.native="closeAllTags">关闭全部</el-dropdown-item>
-            </el-dropdown-menu>
-          </el-dropdown>
-        </div>       
-        <!-- <ul class='contextmenu' v-show="visible" :style="{left:left+'px',top:top+'px'}">
           <li @click="closeTag(selectedTag)">关闭</li>
           <li @click="closeOthersTags">关闭其他</li>
           <li @click="closeAllTags">关闭全部</li>
         </ul> -->
-    </div>
+  </div>
 </template>
 <script>
 import { resolveUrlPath } from "@/util/util";
@@ -51,6 +44,7 @@ export default {
   data() {
     return {
       visible: false,
+      tagBodyLeft: 0,
       lock: false,
       startX: 0,
       startY: 0,
@@ -62,14 +56,22 @@ export default {
     };
   },
   created() {},
-  mounted() {},
+  mounted() {
+    this.init();
+  },
   watch: {
+    $route(to) {
+      this.init();
+    },
     visible(value) {
       if (value) {
         document.body.addEventListener("click", this.closeMenu);
       } else {
         document.body.removeEventListener("click", this.closeMenu);
       }
+    },
+    tagBodyLeft(value) {
+      this.$refs.tagsList.style.left = value + "px";
     }
   },
   computed: {
@@ -86,6 +88,17 @@ export default {
     }
   },
   methods: {
+    init() {
+      this.refsTag = this.$refs.tagsPageOpened;
+      setTimeout(() => {
+        this.refsTag.forEach((item, index) => {
+          if (this.tag.value === item.attributes.name.value) {
+            let tag = this.refsTag[index];
+            this.moveToView(tag);
+          }
+        });
+      }, 1);
+    },
     showCollapse() {
       this.$store.commit("SET_COLLAPSE");
     },
@@ -102,22 +115,10 @@ export default {
         this.startY = e.changedTouches[0].pageY;
       }
     },
-    hadelMousewheel(e) {
+    hadelMouse(e) {
-      const left = Number(this.$refs.tagsList.style.left.replace("px", ""));
-      const step = 100; //一个tag长度
-      const len = 10; //tag的个数
       const boundarystart = 0,
-        boundaryend = -(this.tagList.length - len) * step;
+        boundaryend =
-      //鼠标滑轮滚动
+          this.$refs.tagsList.offsetWidth - this.$refs.tagBox.offsetWidth + 100;
-      if (e.deltaY) {
-        this.endY = e.deltaY;
-        if (this.endY > 0 && left > boundaryend) {
-          this.$refs.tagsList.style.left = left - step + "px";
-        } else if (this.endY < 0 && left < boundarystart) {
-          this.$refs.tagsList.style.left = left + step + "px";
-        }
-        return;
-      }
       if (!this.lock) {
         return;
       }
@@ -135,12 +136,25 @@ export default {
       let distanceX = this.endX - this.startX;
       let distanceY = this.endY - this.startY;
       //判断滑动方向——向右滑动
-      distanceX = distanceX * 0.08;
+      distanceX = parseInt(distanceX * 0.8);
-      if (distanceX > 0 && left <= boundarystart) {
+      if (distanceX > 0 && this.tagBodyLeft < boundarystart) {
-        this.$refs.tagsList.style.left = left + distanceX + "px";
+        this.tagBodyLeft = this.tagBodyLeft + distanceX;
         //判断滑动方向——向左滑动
-      } else if (distanceX < 0 && left >= boundaryend) {
+      } else if (distanceX < 0 && this.tagBodyLeft >= -boundaryend) {
-        this.$refs.tagsList.style.left = left + distanceX + "px";
+        this.tagBodyLeft = this.tagBodyLeft + distanceX;
+      }
+    },
+    hadelMousewheel(e) {
+      const step = 0.8 * 90; //一个tag长度
+      const boundarystart = 0,
+        boundaryend =
+          this.$refs.tagsList.offsetWidth - this.$refs.tagBox.offsetWidth + 100;
+      // Y>0向左滑动
+      if (e.deltaY > 0 && this.tagBodyLeft >= -boundaryend) {
+        this.tagBodyLeft = this.tagBodyLeft - step;
+        // Y<0向右滑动
+      } else if (e.deltaY < 0 && this.tagBodyLeft < boundarystart) {
+        this.tagBodyLeft = this.tagBodyLeft + step;
       }
     },
     openMenu(tag, e) {
@@ -163,11 +177,29 @@ export default {
       this.$store.commit("ADD_TAG", this.tagWel);
       this.$router.push({ path: resolveUrlPath(this.tagWel.value) });
     },
+    moveToView(tag) {
+      if (tag.offsetLeft < -this.tagBodyLeft) {
+        // 标签在可视区域左侧
+        this.tagBodyLeft = -tag.offsetLeft + 10;
+      } else if (
+        tag.offsetLeft + 10 > -this.tagBodyLeft &&
+        tag.offsetLeft + tag.offsetWidth <
+          -this.tagBodyLeft + this.$refs.tagBox.offsetWidth
+      ) {
+        // 标签在可视区域
+      } else {
+        // 标签在可视区域右侧
+        this.tagBodyLeft = -(
+          tag.offsetLeft -
+          (this.$refs.tagBox.offsetWidth - 100 - tag.offsetWidth) +
+          20
+        );
+      }
+    },
     openUrl(url, name, num) {
       this.$store.commit("ADD_TAG", {
         label: name,
-        value: url,
+        value: url
-        num: num
       });
       this.$router.push({ path: resolveUrlPath(url) });
     },

src/page/index/top.vue

@@ -1,78 +0,0 @@
-<template>
-<div class="header">
-		<div class="header-button is-left">
-		  <h3 style="letter-spacing: 1px;">Pig 微服务快速开发框架</h3>
-		</div>
-		<h1 class="header-title"></h1>
-		<div class="header-button is-right">
-        <el-tooltip class="item" effect="dark" content="锁屏" placement="bottom">
-           <span  class="header-item">
-              <i class="icon-bofangqi-suoping" @click="handleLock"></i>
-           </span>
-        </el-tooltip>
-         <el-tooltip class="item" effect="dark" :content="isFullScren?'退出全屏':'全屏'" placement="bottom">
-           <span  class="header-item">
-               <i :class="isFullScren?'icon-tuichuquanping':'icon-quanping'" @click="handleScreen"></i>
-           </span>
-         </el-tooltip>
-         <el-dropdown>
-          <span class="el-dropdown-link">
-            {{userInfo.username}}<i class="el-icon-arrow-down el-icon--right"></i>
-          </span>
-          <el-dropdown-menu slot="dropdown">
-            <el-dropdown-item @click.native="logout">退出系统</el-dropdown-item>
-          </el-dropdown-menu>
-        </el-dropdown>
-        <el-tooltip class="item" effect="dark" content="用户头像" placement="bottom">
-             <img class="header-userImg" :src="userInfo.avatar">
-         </el-tooltip>
-		</div>
-	</div>
-</template>
-
-<script>
-import { mapState, mapGetters } from "vuex";
-import { fullscreenToggel } from "@/util/util";
-export default {
-  name: "top",
-  data() {
-    return {};
-  },
-  filters: {},
-  created() {},
-  computed: {
-    ...mapState({
-      userInfo: state => state.user.userInfo
-    }),
-    ...mapGetters(["isFullScren"])
-  },
-  methods: {
-    handleLock() {
-      this.$store.commit("SET_LOCK");
-      setTimeout(() => {
-        this.$router.push({ path: "/lock" });
-      }, 100);
-    },
-    handleScreen() {
-      this.$store.commit("SET_FULLSCREN");
-      fullscreenToggel();
-    },
-    logout() {
-      this.$confirm("是否退出系统, 是否继续?", "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning"
-      }).then(() => {
-        this.$store.dispatch("LogOut").then(() => {
-          this.$router.push({ path: "/login" });
-        });
-      });
-    }
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-
-</style>
-

src/page/index/top/index.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="header">
+    <div class="header-button is-left">
+      <h3 style="letter-spacing: 1px;">Avue 通用管理系统快速开发框架</h3>
+    </div>
+    <h1 class="header-title"></h1>
+    <div class="header-button is-right">
+      <el-tooltip class="item" effect="dark" content="锁屏" placement="bottom">
+        <span class="header-item">
+          <top-lock></top-lock>
+        </span>
+      </el-tooltip>
+      <el-tooltip class="item" effect="dark" :content="isFullScren?'退出全屏':'全屏'" placement="bottom">
+        <span class="header-item">
+          <i :class="isFullScren?'icon-tuichuquanping':'icon-quanping'" @click="handleScreen"></i>
+        </span>
+      </el-tooltip>
+      <el-dropdown>
+        <span class="el-dropdown-link">
+          {{userInfo.username}}
+          <i class="el-icon-arrow-down el-icon--right"></i>
+        </span>
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item>
+            <router-link to="/">首页</router-link>
+          </el-dropdown-item>
+          <el-dropdown-item>
+            <a href="https://gitee.com/smallweigit/avue" target="_blank">码云地址</a>
+          </el-dropdown-item>
+          <el-dropdown-item>
+            <a href="https://github.com/nmxiaowei/avue" target="_blank">github</a>
+          </el-dropdown-item>
+          <el-dropdown-item @click.native="logout" divided>退出系统</el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
+      <el-tooltip class="item" effect="dark" content="用户头像" placement="bottom">
+        <img class="header-userImg" :src="userInfo.avatar">
+      </el-tooltip>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState, mapGetters } from "vuex";
+import { fullscreenToggel } from "@/util/util";
+import topLock from "./top-lock";
+export default {
+  components: { topLock },
+  name: "top",
+  data() {
+    return {};
+  },
+  filters: {},
+  created() {},
+  computed: {
+    ...mapState({
+      userInfo: state => state.user.userInfo
+    }),
+    ...mapGetters(["isFullScren"])
+  },
+  methods: {
+    handleScreen() {
+      this.$store.commit("SET_FULLSCREN");
+      fullscreenToggel();
+    },
+    logout() {
+      this.$confirm("是否退出系统, 是否继续?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(() => {
+        this.$store.dispatch("LogOut").then(() => {
+          this.$router.push({ path: "/login" });
+        });
+      });
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+
+</style>
+

src/page/index/top/top-lock.vue

@@ -0,0 +1,63 @@
+<template>
+    <span>
+        <i class="icon-bofangqi-suoping" @click="handleLock"></i>
+        <el-dialog title="设置锁屏密码" :visible.sync="box" width="30%">
+            <el-form :model="form" ref="form" label-width="80px">
+                <el-form-item label="锁屏密码" prop="passwd" :rules="[{ required: true, message: '锁屏密码不能为空'}]">
+                    <el-input v-model="form.passwd" placeholder="请输入锁屏密码"></el-input>
+                </el-form-item>
+            </el-form>
+            <span slot="footer" class="dialog-footer">
+                <el-button type="primary" @click="handleSetLock">确 定</el-button>
+            </span>
+        </el-dialog>
+    </span>
+</template>
+
+<script>
+import { fullscreenToggel } from "@/util/util";
+import { validatenull } from "@/util/validate";
+import { mapGetters } from "vuex";
+export default {
+  name: "top-lock",
+  data() {
+    return {
+      box: false,
+      form: {
+        passwd: ""
+      }
+    };
+  },
+  created() {},
+  mounted() {},
+  computed: {
+    ...mapGetters(["lockPasswd"])
+  },
+  props: [],
+  methods: {
+    handleSetLock() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          this.$store.commit("SET_LOCK_PASSWD", this.form.passwd);
+          this.handleLock();
+        }
+      });
+    },
+    handleLock() {
+      if (validatenull(this.lockPasswd)) {
+        this.box = true;
+        return;
+      }
+      this.$store.commit("SET_LOCK");
+      setTimeout(() => {
+        this.$router.push({ path: "/lock" });
+      }, 100);
+    }
+  },
+  components: {}
+};
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/store/modules/common.js

@@ -1,4 +1,4 @@
-import { setStore, getStore } from '@/util/store'
+import { setStore, getStore, removeStore } from '@/util/store'
 import { validatenull } from '@/util/validate'
 import { getDic } from '@/api/admin'
 import { baseUrl } from '@/config/env';
@@ -8,6 +8,7 @@ const common = {
         isCollapse: false,
         isFullScren: false,
         isLock: getStore({ name: 'isLock' }) || false,
+        lockPasswd: getStore({ name: 'lockPasswd' }) || '',
     },
     actions: {
         //获取字典公用类
@@ -34,11 +35,17 @@ const common = {
         },
         SET_LOCK: (state, action) => {
             state.isLock = true;
-            setStore({ name: 'isLock', content: state.isLock })
+            setStore({ name: 'isLock', content: state.isLock, type: 'session' })
+        },
+        SET_LOCK_PASSWD: (state, lockPasswd) => {
+            state.lockPasswd = lockPasswd;
+            setStore({ name: 'lockPasswd', content: state.lockPasswd, type: 'session' })
         },
         CLEAR_LOCK: (state, action) => {
             state.isLock = false;
-            setStore({ name: 'isLock', content: state.isLock })
+            state.lockPasswd = '';
+            removeStore({ name: 'lockPasswd' });
+            removeStore({ name: 'isLock' });
         },
     }
 }

src/store/modules/tags.js

@@ -1,4 +1,4 @@
-import { setStore, getStore } from '@/util/store'
+import { setStore, getStore, removeStore } from '@/util/store'
 import { validatenull } from "@/util/validate"
 const tagObj = {
     label: '',
@@ -40,21 +40,20 @@ const navs = {
             if (state.tagList.some(a => a.value === action.value)) return
             state.tagList.push({
                 label: action.label,
-                num: action.num,
                 value: action.value,
             })
             state.tagList = setFistTag(state.tagList);
-            setStore({ name: 'tagList', content: state.tagList, type: 'session' })
+            setStore({ name: 'tagList', content: state.tagList })
         },
         SET_TAG_CURRENT: (state, tagCurrent) => {
             state.tagCurrent = tagCurrent;
-            setStore({ name: 'tagCurrent', content: state.tagCurrent, type: 'session' })
+            setStore({ name: 'tagCurrent', content: state.tagCurrent })
         },
         SET_TAG: (state, value) => {
             for (const [i, v] of state.tagList.entries()) {
                 if (v.value === value) {
                     state.tag = state.tagList[i];
-                    setStore({ name: 'tag', content: state.tag, type: 'session' })
+                    setStore({ name: 'tag', content: state.tag })
                     break
                 }
             }
@@ -62,8 +61,8 @@ const navs = {
         DEL_ALL_TAG: (state, action) => {
             state.tag = tagObj;
             state.tagList = [];
-            setStore({ name: 'tag', content: state.tagList, type: 'session' })
+            removeStore({ name: 'tag' });
-            setStore({ name: 'tagList', content: state.tagList, type: 'session' })
+            removeStore({ name: 'tagList' });
         },
         DEL_TAG_OTHER: (state, action) => {
             for (const [i, v] of state.tagList.entries()) {
@@ -71,8 +70,8 @@ const navs = {
                     state.tagList = state.tagList.slice(i, i + 1)
                     state.tag = state.tagList[0];
                     state.tagList[0].close = false;
-                    setStore({ name: 'tag', content: state.tag, type: 'session' })
+                    setStore({ name: 'tag', content: state.tag })
-                    setStore({ name: 'tagList', content: state.tagList, type: 'session' })
+                    setStore({ name: 'tagList', content: state.tagList })
                     break
                 }
             }

src/styles/top.scss

@@ -1,51 +1,43 @@
 .header {
-    -webkit-box-align: center;
+  -webkit-box-align: center;
-    -ms-flex-align: center;
+  -ms-flex-align: center;
-    align-items: center;
+  align-items: center;
-    background-color: #fff;
+  background-color: #fff;
-    border-bottom:2px solid $menuBg;
+  border-bottom:2px solid $menuBg;
-    color: #333;
+  color: #333;
-    box-sizing: border-box;
+  box-sizing: border-box;
-    display: -webkit-box;
+  display: -webkit-box;
-    display: -ms-flexbox;
+  display: -ms-flexbox;
-    display: flex;
+  display: flex;
-    font-size: 18px;
+  font-size: 18px;
-    height: 60px;
+  height: 60px;
-    line-height: 1;
+  line-height: 1;
-    padding: 0 10px;
+  padding: 0 10px;
-    text-align: center;
+  white-space: nowrap;
-    white-space: nowrap;
+}
-  }
+
-  
+.header-title {
-  .header-title {
+  overflow: hidden;
-    overflow: hidden;
+  text-overflow: ellipsis;
-    text-overflow: ellipsis;
+  white-space: nowrap;
-    white-space: nowrap;
+  font-size: inherit;
-    font-size: inherit;
+  font-weight: 400;
-    font-weight: 400;
+  flex: 1;
-    flex: 1;
+}
-  }
+
-  
+.header-userImg{
-  .header-button.is-left {
+  margin: 0 3px 0 10px;
-    text-align: left;
+  padding: 2px;
-  }
+  width: 35px;
-  
+  height:35px;
-  .header-button.is-right {
+  border-radius: 100%;
-    text-align: right;
+  box-sizing: border-box;
-  }
+  border:1px solid #eee;
-  .header-userImg{
+}
-    margin: 0 3px 0 10px;
+.header-button {
-    padding: 2px;
+  display: flex;
-    width: 35px;
+  align-items: center;
-    height:35px;
+}
-    border-radius: 100%;
+.header-button>.header-item{
-    box-sizing: border-box;
+  margin-right: 12px;
-    border:1px solid #eee;
+}
-  }
-  .header-button {
-    display: flex;
-    align-items: center;
-  }
-  .header-button>.header-item{
-    margin-right: 12px;
-  }