|
|
@@ -1,11 +1,11 @@
|
|
|
html, body {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
}
|
|
|
|
|
|
body {
|
|
|
- margin: 0;
|
|
|
- font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
|
|
|
+ margin: 0;
|
|
|
+ font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
|
|
|
-webkit-font-smoothing: antialiased;
|
|
|
-moz-osx-font-smoothing: grayscale;
|
|
|
font-size: 16px;
|
|
|
@@ -22,115 +22,179 @@ body {
|
|
|
}
|
|
|
|
|
|
a:link {
|
|
|
- transition: color .3s ease-in-out;
|
|
|
+ transition: color .3s ease-in-out;
|
|
|
}
|
|
|
|
|
|
|
|
|
.app-ct {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
-
|
|
|
- .app-hd {
|
|
|
- flex: none;
|
|
|
- display: flex;
|
|
|
- position: relative;
|
|
|
- z-index: 99;
|
|
|
- height: 50px;
|
|
|
- box-shadow: 0 0 8px rgba(0,0,0,.2);
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .site-logo {
|
|
|
- $s: 1.3rem;
|
|
|
- margin: 0 .5rem 0 1.5rem;
|
|
|
- width: $s;
|
|
|
- height: $s;
|
|
|
- }
|
|
|
-
|
|
|
- .site-title {
|
|
|
- margin: 0;
|
|
|
- font-weight: 400;
|
|
|
- font-size: 1.3rem;
|
|
|
- line-height: 1;
|
|
|
-
|
|
|
- a {
|
|
|
- font-weight: 600;
|
|
|
- text-decoration: none;
|
|
|
- color: $text;
|
|
|
-
|
|
|
- &:hover {
|
|
|
- color: $color;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .app-bd {
|
|
|
- display: flex;
|
|
|
- flex: auto;
|
|
|
- }
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ .app-hd {
|
|
|
+ flex: none;
|
|
|
+ display: flex;
|
|
|
+ position: relative;
|
|
|
+ z-index: 99;
|
|
|
+ height: 50px;
|
|
|
+ box-shadow: 0 0 8px rgba(0,0,0,.2);
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .toggle-side {
|
|
|
+ display: none;
|
|
|
+ margin-left: 1rem;
|
|
|
+ padding: .5rem;
|
|
|
+ font-size: 1.25rem;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ @include screen-mob {
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .site-logo {
|
|
|
+ $s: 1.3rem;
|
|
|
+ margin: 0 .5rem 0 1.5rem;
|
|
|
+ width: $s;
|
|
|
+ height: $s;
|
|
|
+
|
|
|
+ @include screen-mob {
|
|
|
+ margin-left: .5rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .site-title {
|
|
|
+ margin: 0;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 1.3rem;
|
|
|
+ line-height: 1;
|
|
|
+
|
|
|
+ a {
|
|
|
+ font-weight: 600;
|
|
|
+ text-decoration: none;
|
|
|
+ color: $text;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ color: $color;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .app-bd {
|
|
|
+ flex: auto;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+$side-width: 200px;
|
|
|
+$just-trans: all .2s ease-in-out;
|
|
|
+
|
|
|
+
|
|
|
+.sidebar-open {
|
|
|
+ @include screen-mob {
|
|
|
+ .app-sd-mask {
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+
|
|
|
+ .app-sd {
|
|
|
+ left: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.app-sd-mask,
|
|
|
+.app-sd {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: 10;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.app-sd-mask {
|
|
|
+ display: none;
|
|
|
+ width: 100%;
|
|
|
}
|
|
|
|
|
|
.app-sd {
|
|
|
- flex: 0 0 200px;
|
|
|
- padding-top: 2rem;
|
|
|
- border-right: 1px solid #eaecef;
|
|
|
-
|
|
|
-
|
|
|
- > .menu-group {
|
|
|
- margin-bottom: 1rem;
|
|
|
- }
|
|
|
-
|
|
|
- .menu-group {
|
|
|
-
|
|
|
- .menu-title {
|
|
|
- padding: 0 1.25rem;
|
|
|
- margin-top: 0;
|
|
|
- margin-bottom: .5rem;
|
|
|
- font-size: 1.1em;
|
|
|
- font-weight: 700;
|
|
|
- }
|
|
|
-
|
|
|
- .menu-list {
|
|
|
- margin: 0;
|
|
|
- padding: 0;
|
|
|
- }
|
|
|
-
|
|
|
- .menu-item {
|
|
|
- padding: .35rem 1rem .35rem 1.25rem;
|
|
|
- list-style: none;
|
|
|
- font-size: 15px;
|
|
|
-
|
|
|
- > a {
|
|
|
- color: #2c3e50;
|
|
|
- text-decoration: none;
|
|
|
- cursor: pointer;
|
|
|
-
|
|
|
- &.router-link-active,
|
|
|
- &:hover {
|
|
|
- color: $color;
|
|
|
- }
|
|
|
-
|
|
|
- &.router-link-active {
|
|
|
- font-weight: 700;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .menu-group .router-link-active {
|
|
|
- font-weight: 400;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: $side-width;
|
|
|
+ padding-top: 2rem;
|
|
|
+ background-color: #fff;
|
|
|
+ border-right: 1px solid #eaecef;
|
|
|
+ transition: $just-trans;
|
|
|
+
|
|
|
+ @include screen-mob {
|
|
|
+ left: -$side-width;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ > .menu-group {
|
|
|
+ margin-bottom: 1rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .menu-group {
|
|
|
+
|
|
|
+ .menu-title {
|
|
|
+ padding: 0 1.25rem;
|
|
|
+ margin-top: 0;
|
|
|
+ margin-bottom: .5rem;
|
|
|
+ font-size: 1.1em;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+
|
|
|
+ .menu-list {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ padding-left: 1rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .menu-item {
|
|
|
+ list-style: none;
|
|
|
+ font-size: .875rem;
|
|
|
+
|
|
|
+ > a {
|
|
|
+ display: block;
|
|
|
+ padding: .35rem 1rem .35rem 1.25rem;
|
|
|
+ color: #2c3e50;
|
|
|
+ text-decoration: none;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ &.router-link-active,
|
|
|
+ &:hover {
|
|
|
+ color: $color;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.router-link-active {
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .menu-group .router-link-active {
|
|
|
+ font-weight: 400;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.app-main {
|
|
|
- flex: auto;
|
|
|
- overflow: hidden;
|
|
|
+ padding-left: $side-width;
|
|
|
+ height: 100%;
|
|
|
+ transition: $just-trans;
|
|
|
+
|
|
|
+ @include screen-mob {
|
|
|
+ padding-left: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ > .router-tab {
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.app-page {
|
|
|
padding: 15px;
|
|
|
font-size: 14px;
|
|
|
- line-height: 1.5;
|
|
|
+ line-height: 1.5;
|
|
|
}
|
zhaihaoyi