提交5

lishifeng

2020-09-15 ce10677f47a14879424e7f562f78442cc03cfda1

 src/components/PageHeader.vue

@@ -6,10 +6,22 @@
                    <img src="../assets/images/yuanchang_logo.png">
                    <span>蓄电池监控平台</span>
                </div>
                <!-- <div class="info-banner">
                    <div class="info-banner-text">机房停电数：</div>
                    <div class="info-banner-val">123</div>
                </div> -->
                <div class="page-header-right" slot="footer">
                    <div class="hdw-avatar">
                        <span class="hdw-avatar-icon">
                            <i class="iconfont el-icon-Userselect"></i>
                        </span>
                        <el-dropdown @command="commandClick">
                            <span class="hdw-avatar-text">
                                {{username}}<i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item>密码修改</el-dropdown-item>
                                <el-dropdown-item command="outSystem">安全退出</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                </div>
            </flex-layout>
        </div>
    </div>
@@ -17,7 +29,26 @@

<script>
export default {
    
    data() {
        return {
           username: sessionStorage.getItem('username'),
        }
    },
    methods: {
        outSystem() {
            this.$router.push('/login');
        },
        commandClick(name) {
            switch(name) {
                case 'outSystem':
                    this.outSystem();
                break;
                default:
                    this.$layer.msg('该功能暂未开放！');
                break;
            }
        }
    }
}
</script>

@@ -46,6 +77,34 @@
    padding-top: 8px;
    padding-bottom: 8px;
}
.hdw-avatar {
    margin-top: 10px;
    margin-right: 16px;
    cursor: pointer;
    color: #e4e3e3;
}
.hdw-avatar:hover {
    color: #FFFFFF;
}
.hdw-avatar:hover .el-icon-arrow-down {
    transform: rotate(180deg);
}
.hdw-avatar-icon {
    display: inline-block;
    padding: 8px;
    border-radius: 16px;
    background-color: #87d068;
}
.hdw-avatar-icon .iconfont {
    font-size: 16px;
}
.hdw-avatar-text {
    color: #FFFFFF;
    margin-left: 8px;
}
.hdw-avatar-text .el-icon-arrow-down {
    margin-left: 4px;
}
</style>