market-admin-ui/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;}