diff --git a/src/assets/style/theme/theme.scss b/src/assets/style/theme/theme.scss index 21cfa499..a9087e33 100644 --- a/src/assets/style/theme/theme.scss +++ b/src/assets/style/theme/theme.scss @@ -1,9 +1,11 @@ +// 主题公用 .layout-main-group { - height: 100vh; - width: 100vw; + height: 100%; + width: 100%; background-size: cover; background-position: center; position: relative; + // 背景上面的半透明遮罩 .layout-main-mask { position: absolute; top: 0px; @@ -12,170 +14,169 @@ left: 0px; background-color: rgba(#000, .3); } -} - -// 主题公用 -.layout-main { - position: absolute; - top: 0px; - right: 0px; - bottom: 0px; - left: 0px; - // [布局] 顶栏 - .el-header { - padding: 0px; - // logo区域 - .logo-group { - transition: width .3s; - float: left; - text-align: center; - img { + // 主体 + .layout-main { + position: absolute; + top: 0px; + right: 0px; + bottom: 0px; + left: 0px; + // [布局] 顶栏 + .el-header { + padding: 0px; + // logo区域 + .logo-group { + transition: width .3s; + float: left; + text-align: center; + img { + height: 60px; + } + } + // 折叠侧边栏切换按钮 + .toggle-aside-btn { + float: left; height: 60px; - } - } - // 折叠侧边栏切换按钮 - .toggle-aside-btn { - float: left; - height: 60px; - width: 60px; - display: flex; - justify-content: center; - align-items: center; - @extend %unable-select; - i { - font-size: 20px; - margin-top: 4px; - } - } - // [菜单] 顶栏 - .el-menu { - float: left; - border-bottom: none; - background-color: transparent; - .el-menu-item { - @extend %unable-select; - border-bottom: none; - } - .el-submenu { - @extend %unable-select; - .el-submenu__title { - border-bottom: none; - } - } - } - // 顶栏右侧的按钮 - .d2-header-right { - float: right; - height: 60px; - display: flex; - align-items: center; - .btn-text { - padding: 14px 12px; - border-radius: 4px; - margin: 0px !important; - margin-left: 10px !important; - } - .el-dropdown { - @extend %unable-select; - } - } - } - // [布局] 顶栏下面 - .el-container { - // 侧边栏 - .el-aside { - transition: width .3s; - overflow: auto; - // [菜单] 正常状态 - .el-menu { - @extend %unable-select; - background-color: transparent; - border-right: none; - .el-menu-item { - i { - margin-right: 5px; - font-size: 20px; - } - } - } - .el-submenu { - @extend %unable-select; - .el-submenu__title { - i { - margin-right: 5px; - font-size: 20px; - } - .el-submenu__icon-arrow { - margin-top: -10px; - } - } - } - // 菜单为空的时候显示的信息 - .menu-empty { - height: 160px; - margin: 10px; - margin-top: 0px; - border-radius: 4px; + width: 60px; display: flex; justify-content: center; align-items: center; - flex-direction: column; @extend %unable-select; i { - font-size: 30px; - margin-bottom: 10px; - } - span { - font-size: 14px; + font-size: 20px; + margin-top: 4px; } } - // [菜单] 折叠状态 - .el-menu--collapse { + // [菜单] 顶栏 + .el-menu { + float: left; + border-bottom: none; background-color: transparent; - .el-submenu__title { - text-align: center; + .el-menu-item { + @extend %unable-select; + border-bottom: none; + } + .el-submenu { + @extend %unable-select; + .el-submenu__title { + border-bottom: none; + } + } + } + // 顶栏右侧的按钮 + .d2-header-right { + float: right; + height: 60px; + display: flex; + align-items: center; + .btn-text { + padding: 14px 12px; + border-radius: 4px; + margin: 0px !important; + margin-left: 10px !important; + } + .el-dropdown { + @extend %unable-select; } } } - .el-main { - padding: 0px; - position: relative; + // [布局] 顶栏下面 + .el-container { + // 侧边栏 + .el-aside { + transition: width .3s; + overflow: auto; + // [菜单] 正常状态 + .el-menu { + @extend %unable-select; + background-color: transparent; + border-right: none; + .el-menu-item { + i { + margin-right: 5px; + font-size: 20px; + } + } + } + .el-submenu { + @extend %unable-select; + .el-submenu__title { + i { + margin-right: 5px; + font-size: 20px; + } + .el-submenu__icon-arrow { + margin-top: -10px; + } + } + } + // 菜单为空的时候显示的信息 + .menu-empty { + height: 160px; + margin: 10px; + margin-top: 0px; + border-radius: 4px; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + @extend %unable-select; + i { + font-size: 30px; + margin-bottom: 10px; + } + span { + font-size: 14px; + } + } + // [菜单] 折叠状态 + .el-menu--collapse { + background-color: transparent; + .el-submenu__title { + text-align: center; + } + } + } + .el-main { + padding: 0px; + position: relative; + overflow: hidden; + } + } + // [组件] d2-container-full + .d2-container-full { + position: absolute; + border-top-left-radius: 4px; + border-top-right-radius: 4px; overflow: hidden; - } - } - // [组件] d2-container-full - .d2-container-full { - position: absolute; - border-top-left-radius: 4px; - border-top-right-radius: 4px; - overflow: hidden; - color: #303133; - &:hover { - box-shadow: none; - } - .d2-container-full__header { - position: absolute; - top: 0px; - left: 0px; - width: 100%; - padding: 18px 20px; - box-sizing: border-box; - } - .d2-container-full__body { - position: absolute; - padding: 20px; - left: 0px; - right: 0px; - bottom: 0px; - overflow: auto; - } - .d2-container-full__footer { - position: absolute; - bottom: 0px; - left: 0px; - width: 100%; - padding: 18px 20px; - box-sizing: border-box; + color: #303133; + &:hover { + box-shadow: none; + } + .d2-container-full__header { + position: absolute; + top: 0px; + left: 0px; + width: 100%; + padding: 18px 20px; + box-sizing: border-box; + } + .d2-container-full__body { + position: absolute; + padding: 20px; + left: 0px; + right: 0px; + bottom: 0px; + overflow: auto; + } + .d2-container-full__footer { + position: absolute; + bottom: 0px; + left: 0px; + width: 100%; + padding: 18px 20px; + box-sizing: border-box; + } } } }