manager.css.vue

.manager-container {

    background-color: #f8f8ff;

    min-height: 100vh;

}

.manager-header {

    display: flex;

    background-color: #716aca;

}

.manager-header-left {

    width: 300px;

    height: 60px;

    padding-left: 10px;

    display: flex;

    align-items: center

}

.manager-header-left img {

    width: 35px;

    height: 35px;

}

.manager-header-left .title {

    flex: 1;

    margin-left: 5px;

    font-size: 20px;

    font-weight: bold;

    color: #fff

}

.manager-header-center {

    flex: 1;

    width: 0;

    display: flex;

    align-items: center

}

.manager-header-right {

    width: 200px;

    display: flex;

    align-items: center;

    justify-content: flex-end;

}

.manager-header-right .avatar {

    display: flex;

    align-items: center;

    padding-right: 10px;

    color: #fff;

    cursor: default

}

.manager-header-right .avatar img {

    width: 40px;

    height: 40px;

    border-radius: 50%;

    margin-right: 5px

}

.manager-main {

    display: flex;

}

.manager-main-left {

    width: 200px;

    min-height: calc(100vh - 60px);

    box-shadow: 0 2px 6px rgba(0, 0, 0, .1);

}

.manager-main-right {

    flex: 1;

    width: 0;

    padding: 10px;

}

.manager-main-right .search {

    padding: 10px;

    background-color: #fff;

    border-radius: 5px;

    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);

}

.manager-main-right .operation {

    margin-top: 5px;

    padding: 10px;

    background-color: #fff;

    border-radius: 5px;

    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1)

}

.manager-main-right .table {

    margin-top: 5px;

    padding: 15px 10px;

    background-color: #fff;

    border-radius: 5px;

    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)

}

.manager-main-right .table .pagination {

    margin-top: 10px;

}

.card {

    padding: 20px;

    background-color: #fff;

    border-radius: 5px;

    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);

}

/* ElementUI */

.el-menu {

    width: 200px;

    height: 100%;

    background-color: #fff;

}

.el-submenu__title {

    color: #575962;

    height: 50px;

    line-height: 50px;

}

.is-opened i, .is-active i {

    color: #716aca !important;

}

.el-menu-item {

    color: #575962;

    height: 50px;

    line-height: 50px;

    background-color: #fff !important; /* 必须加上这个背景色，否则鼠标离开会出现白色 */

}

.el-menu-item.is-active {

    background-color: #e0ddfc !important;

    color: #0000000C;

    border-left: 5px solid #716aca;

}

.el-menu--inline .el-menu-item {

    padding-left: 50px !important;

}

.el-menu .is-active {

    color: #575962 !important;

}

.el-submenu__title:hover {

    background-color: #e0ddfc !important;

}

.el-menu-item:not(.is-active):hover {

    /*background-color: #0376bf !important;*/

    /*color: #fff;*/

}

.el-menu-item:hover {

    background-color: #e0ddfc !important;

    color: #575962 ;

}

.el-submenu__icon-arrow {

    margin-top: -5px;

}

.el-breadcrumb__inner {

    color: #fff !important;

}

.el-breadcrumb__separator {

    color: #fff;

}

.el-breadcrumb {

    margin-left: 10px;

}

.el-dropdown-menu {

    margin-top: 20px !important;

}

th.el-table__cell {

    background-color: #f7f8fa !important;

    color: #666;

}