解决冲突

Author: tangJunGit

src/assets/less/common/navigationBar.less

@@ -29,12 +29,96 @@
  vertical-align: middle;
  border-radius: 50%;
  }
+ .t-user{
+ font-weight: 900;
+ font-size: 15px;
+ }
  .t-bar{
- padding-left: 20px;
+ margin-left: 20px;
  font-size: 20px;
  cursor: pointer;
  }
- }
+ .t-bar.t-rotate{
+ animation: bar-rotate .5s;
+ -ms-animation: bar-rotate .5s;
+ -moz-animation: bar-rotate .5s;
+ -webkit-animation: bar-rotate .5s;
+ -o-animation: bar-rotate .5s;
+ transform:rotate(90deg);
+ -ms-transform:rotate(90deg); 
+ -moz-transform:rotate(90deg); 
+ -webkit-transform:rotate(90deg);
+ -o-transform:rotate(90deg); 
+ }
+
+ @keyframes bar-rotate
+ {
+ from {transform:rotate(0deg);}
+ to {transform:rotate(90deg);}
+ }
+ @-ms-keyframes bar-rotate
+ {
+ from {transform:rotate(0deg);}
+ to {transform:rotate(90deg);}
+ }
+ @-moz-keyframes bar-rotate
+ {
+ from {transform:rotate(0deg);}
+ to {transform:rotate(90deg);}
+ }
+ @-webkit-keyframes bar-rotate
+ {
+ from {transform:rotate(0deg);}
+ to {transform:rotate(90deg);}
+ }
+ @-o-keyframes bar-rotate
+ {
+ from {transform:rotate(0deg);}
+ to {transform:rotate(90deg);}
+ }
 
+ .t-bar.t-norotate{
+ animation: bar-norotate .5s;
+ -ms-animation: bar-norotate .5s;
+ -moz-animation: bar-norotate .5s;
+ -webkit-animation: bar-norotate .5s;
+ -o-animation: bar-norotate .5s;
+ transform:rotate(0deg);
+ -ms-transform:rotate(0deg); 
+ -moz-transform:rotate(0deg); 
+ -webkit-transform:rotate(0deg);
+ -o-transform:rotate(0deg); 
+ }
+ @keyframes bar-norotate
+ {
+ from {transform:rotate(90deg);}
+ to {transform:rotate(0deg);}
+ }
+ @-ms-keyframes bar-norotate
+ {
+ from {transform:rotate(90deg);}
+ to {transform:rotate(0deg);}
+ }
+ @-moz-keyframes bar-norotate
+ {
+ from {transform:rotate(90deg);}
+ to {transform:rotate(0deg);}
+ }
+ @-webkit-keyframes bar-norotate
+ {
+ from {transform:rotate(90deg);}
+ to {transform:rotate(0deg);}
+ }
+ @-o-keyframes bar-norotate
+ {
+ from {transform:rotate(90deg);}
+ to {transform:rotate(0deg);}
+ }
+ }
 
 }
+
+.t-user-dropdown .t-user-icon{
+ font-size: 15px;
+ margin-right: 5px;
+}

src/views/common/container.vue

@@ -2,11 +2,11 @@
  <div class="t-container-wrap">
  <el-container class="container">
  <el-header height="60px" class="header">
- <navigationBar :isCollapse="isCollapse" @changeCollapse="changeCollapse"></navigationBar>
+ <navigationBar :isCollapse.sync="isCollapse"></navigationBar>
  </el-header>
  <el-container>
  <el-aside width="auto" class="aside">
- <menuAside :isCollapse.sync="isCollapse"></menuAside>
+ <menuAside :isCollapse="isCollapse"></menuAside>
  </el-aside>
  <el-main class="t-main-wrap">
  <router-view/>
@@ -24,11 +24,6 @@ export default {
  isCollapse: false
  }
  },
- methods: {
- changeCollapse(isCollapse){
- this.isCollapse = isCollapse;
- }
- },
  components: {
  navigationBar,
  menuAside

src/views/common/navigationBar.vue

@@ -5,16 +5,19 @@
  </div>
  <div class="t-list">
  <el-row>
- <el-col :span="20">
+ <el-col :span="2">
  <i class="t-bar fa fa-bars"></i>
  </el-col>
- <el-col :span="4" class="text-right">
- <i class="t-icon el-icon-bell"></i>
+ <el-col :span="22" class="text-right">
+ <el-tooltip class="item" effect="dark" content="消息" placement="bottom">
+ <i class="t-icon el-icon-bell"></i>
+ </el-tooltip>
  <el-dropdown trigger="click" class="t-item">
  <img class="t-avatar" src="../../assets/images/avatar.jpg" alt>
- <el-dropdown-menu slot="dropdown">
- <el-dropdown-item>个人信息</el-dropdown-item>
- <el-dropdown-item>退出</el-dropdown-item>
+ <span class="t-user">admin</span>
+ <el-dropdown-menu slot="dropdown" class="t-user-dropdown">
+ <el-dropdown-item><i class="t-user-icon fa fa-info-circle"></i>个人信息</el-dropdown-item>
+ <el-dropdown-item><i class="t-user-icon fa fa-sign-out"></i>退出</el-dropdown-item>
  </el-dropdown-menu>
  </el-dropdown>
  </el-col>
@@ -32,11 +35,13 @@ export default {
  },
  methods:{
  collapse(){
- this.$emit('changeCollapse', !this.isCollapse)
+ this.$emit('update:isCollapse', !this.isCollapse);
  }
  }
 }
 </script>
 <style lang="less" scoped>
 @import url("../../assets/less/common/navigationBar.less");
 </style>
+<style>
+</style>