|
|
@@ -0,0 +1,136 @@
|
|
|
+.hc-layout-box {
|
|
|
+ position: relative;
|
|
|
+ height: 100vh;
|
|
|
+ width: 100%;
|
|
|
+ .hc-aside-box {
|
|
|
+ position: relative;
|
|
|
+ color: #838791;
|
|
|
+ background: #f1f5f8;
|
|
|
+ transition: 0.2s;
|
|
|
+ border-radius: 0;
|
|
|
+ z-index: 1;
|
|
|
+ box-shadow: -2px 0 10px 0 rgba(32, 37, 50, 0.03), 0 10px 21px 20px rgba(32, 37, 50, 0.03);
|
|
|
+ .hc-aside-logo-box {
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ transition: opacity 0.3s;
|
|
|
+ cursor: pointer;
|
|
|
+ margin: 32px 0;
|
|
|
+ left: -10px;
|
|
|
+ #logo-icon {
|
|
|
+ height: 35px;
|
|
|
+ width: 35px;
|
|
|
+ }
|
|
|
+ #logo-name {
|
|
|
+ height: 40px;
|
|
|
+ margin-left: 5px;
|
|
|
+ }
|
|
|
+ &:hover {
|
|
|
+ opacity: .8;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .hc-aside-menu-box {
|
|
|
+ position: relative;
|
|
|
+ height: calc(100% - 216px);
|
|
|
+ width: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ user-select: none;
|
|
|
+ }
|
|
|
+ .hc-aside-bar-box {
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ padding: 24px 0;
|
|
|
+ margin-top: 24px;
|
|
|
+ transition: 0.2s;
|
|
|
+ &:before {
|
|
|
+ position: absolute;
|
|
|
+ content: '';
|
|
|
+ top: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 1px;
|
|
|
+ background-image: linear-gradient(90deg, rgba(102, 102, 102, 0.00) 11%, #dbe8f3 35%, #dbe8f3 64%, rgba(102, 102, 102, 0.00) 86%);
|
|
|
+ }
|
|
|
+ div {
|
|
|
+ position: relative;
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 26px;
|
|
|
+ transition: 0.1s;
|
|
|
+ &.active {
|
|
|
+ color: white;
|
|
|
+ background: var(--el-color-primary);
|
|
|
+ border-radius: 6px;
|
|
|
+ box-shadow: 3px 2px 8px 0 var(--hc-shadow-color-5);
|
|
|
+ }
|
|
|
+ &:not(.active) {
|
|
|
+ cursor: pointer;
|
|
|
+ &:hover {
|
|
|
+ color: var(--el-color-primary);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ & + div {
|
|
|
+ margin-left: 26px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.is-collapse .hc-aside-logo-box {
|
|
|
+ left: initial;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .hc-container-view {
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
+ .hc-header-view {
|
|
|
+ position: relative;
|
|
|
+ --el-header-padding: 0;
|
|
|
+ --el-header-height: 111px;
|
|
|
+ .hc-header-box {
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-direction: row;
|
|
|
+ padding: 12px 20px;
|
|
|
+ .hc-header-page-name {
|
|
|
+ position: relative;
|
|
|
+ color: #cccccc;
|
|
|
+ font-size: 22px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+ .hc-header-content {
|
|
|
+ position: relative;
|
|
|
+ text-align: right;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-end;
|
|
|
+ max-width: 50%;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .hc-header-top-menu-bar {
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 6px 20px;
|
|
|
+ overflow: hidden;
|
|
|
+ border-top: 1px solid #ebeaea;
|
|
|
+ border-bottom: 1px solid #ebeaea;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .hc-main-box {
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ height: 100%;
|
|
|
+ --el-main-padding: 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
