pco/sp-admin/sa-frame/index/index.css

* {
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    background-color: #EEE;
}

body {
    height: 100vh;
    background-color: #EEE;
    background-image: url(admin-loading.gif);
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

.app {
    height: 100%;
    font-size: 16px;
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}

.app {
    background-color: #EEE;
}

/* 变量 */
body {
    --nav-left-width: 200px;
    --nav-left-width-fold: 64px;
    --nav-right-1-height: 50px;
    --nav-right-2-height: 35px;
}

.nav-left, .nav-right {
    position: fixed;
    top: 0;
    height: 100%;
}

/* 左边 */
.nav-left {
    width: var(--nav-left-width);
    left: 0px;
    z-index: 200;
    overflow: hidden;
}

.nav-left-top {
    width: 100%;
    box-sizing: border-box;
    height: 85px;
    line-height: 85px; /* z-index: 100; */
    overflow: hidden;
}

.nav-left-bottom {
    width: 100%;
    box-sizing: border-box;
    height: calc(100% - 85px);
    overflow: hidden;
}

/* 右边 */
.nav-right {
    width: calc(100% - var(--nav-left-width));
    right: 0px;
    z-index: 100;
}

.nav-right-1 {
    height: var(--nav-right-1-height);
    line-height: var(--nav-right-1-height);
    z-index: 200;
    position: relative;
    border-bottom: 1px #F1F1F1 solid;
    box-sizing: border-box;
    overflow: hidden;
}

.nav-right-2 {
    height: var(--nav-right-2-height);
    line-height: var(--nav-right-2-height);
    z-index: 200;
    position: relative;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
}

.nav-right-3 {
    width: 100%;
    height: calc(100vh - var(--nav-right-1-height) - var(--nav-right-2-height));
    position: relative;
    overflow: hidden;
}

/* .fas{transition: all 0s;} */

/* 所有带动画的元素 */
.admin-logo, .nav-left, .nav-left-top, .nav-left-bottom, .nav-right /* , .nav-right-2 * */
{
    transition: all 0.2s;
}


/* 菜单折叠 */
.app-fold {
    --nav-left-width: 64px;
}

/* 菜单折叠时 部分元素隐藏 */
.app-fold .admin-title, .app-fold .menu-name, .app-fold-right .el-submenu__icon-arrow {
    display: none;
}

.app-fold .admin-logo {
    margin-left: 12px !important;
}

/* .nav-right-3 包裹了太多 View，不能让它参与动画，因为实在太TM卡了 */
.nav-right-3 {
    width: calc(100% - var(--nav-left-width));
    position: fixed;
    transition: none;
}

.app-fold-right .nav-right-3 {
    width: calc(100% - 64px);
    left: 64px;
}


/* -------------- 其它 --------------- */

/* 折叠时悬浮菜单样式，防止透明 */
.el-menu--vertical .el-menu--popup {
    background-color: #FFF !important;
    color: red !important;
}

/* 最高层级 */
.z-index-max {
    z-index: 2147483647;
}


/* 遮罩样式 */
.shade-fox {
    position: absolute;
    z-index: 1000000;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    color: #FFF;
    top: 0px;
}

.shade-fox {
    display: flex;
    justify-content: center;
    align-items: center
}

.shade-text {
}

/* 去除掉便签的大边框 */
.layer-note-class .layui-layer-input {
    outline: 0;
    box-shadow: none !important;
    padding: 0.8em !important;
    font-family: 'Times New Roman', Times, serif;
}

.layer-note-class .layui-layer-input {
    border: 0px #ddd solid;
    border-bottom: 1px #ddd solid;
}