You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

219 lines
4.3 KiB

7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
  1. body {
  2. height:100vh;
  3. }
  4. $header-height : 50px;
  5. $nav-height : 59px;
  6. #header {
  7. position:relative;
  8. @include display-flex();
  9. height:$header-height;
  10. background: #5399ea; /* Old browsers */
  11. background: -moz-linear-gradient(left, #5399ea 0%, #5ec0cc 100%); /* FF3.6-15 */
  12. background: -webkit-linear-gradient(left, #5399ea 0%,#5ec0cc 100%); /* Chrome10-25,Safari5.1-6 */
  13. background: linear-gradient(to right, #5399ea 0%,#5ec0cc 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  14. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5399ea', endColorstr='#5ec0cc',GradientType=1 ); /* IE6-9 */
  15. padding:0 30px;
  16. z-index:101;
  17. align-items: center;
  18. .logo {
  19. display:block;
  20. color:#fff;
  21. font-size:19px;
  22. }
  23. .top-navs {
  24. -ms-flex:1;
  25. -webkit-flex:1;
  26. flex:1;
  27. }
  28. .btn-top-action {
  29. padding:14px;
  30. cursor:pointer;
  31. background:transparent;
  32. position:relative;
  33. color:#fff;
  34. border:0 none;
  35. outline:none !important;
  36. font-size:13px;
  37. i {
  38. font-size:20px;
  39. vertical-align: middle;
  40. }
  41. }
  42. .btn-user {
  43. display:inline-block;
  44. .btn-top-action {
  45. &:after {
  46. content:"\f107";
  47. font-family:'Font Awesome 5 Pro';
  48. position:absolute;
  49. right:0px;
  50. top:50%;
  51. -webkit-transform: translateY(-50%);
  52. -moz-transform: translateY(-50%);
  53. -ms-transform: translateY(-50%);
  54. -o-transform: translateY(-50%);
  55. transform: translateY(-50%);
  56. }
  57. }
  58. }
  59. }
  60. #nav {
  61. position:relative;
  62. z-index: 100;
  63. width: 100%;
  64. height: $nav-height;
  65. background-color: #ffffff;
  66. border-bottom: 1px solid #e6e6e6;
  67. padding:0 30px;
  68. .main-navigation {
  69. @include display-flex();
  70. height:$nav-height;
  71. padding:0;
  72. margin:0;
  73. list-style:none;
  74. flex-wrap:wrap;
  75. > li {
  76. display:block;
  77. position:relative;
  78. margin-right:30px;
  79. > a {
  80. @include display-flex();
  81. height:$nav-height;
  82. justify-content: center;
  83. align-items: center;
  84. color:#979797;
  85. font-size:0;
  86. font-weight:500;
  87. padding-left:0;
  88. padding-right:45px;
  89. position:relative;
  90. &:after {
  91. content:"\f107";
  92. font-family:'Font Awesome 5 Pro';
  93. position:absolute;
  94. font-size:15px;
  95. right:15px;
  96. top:50%;
  97. -webkit-transform: translateY(-50%);
  98. -moz-transform: translateY(-50%);
  99. -ms-transform: translateY(-50%);
  100. -o-transform: translateY(-50%);
  101. transform: translateY(-50%);
  102. }
  103. i, span {
  104. font-size:15px;
  105. }
  106. i + span {
  107. margin-left:6px;
  108. }
  109. }
  110. &.active {
  111. > a {
  112. color:#282828;
  113. }
  114. }
  115. > ul {
  116. height:0;
  117. visibility: hidden;
  118. opacity:0;
  119. z-index:101;
  120. position:absolute;
  121. top:100%;
  122. left:0;
  123. width:130px;
  124. background:#fff;
  125. list-style:none;
  126. padding:0;
  127. margin:0;
  128. border:1px solid #767676;
  129. li {
  130. display:block;
  131. a {
  132. display:block;
  133. padding:12px 15px;
  134. font-size:13px;
  135. color:#282828;
  136. cursor:pointer;
  137. &:hover {
  138. background-color:#f4f8f9;
  139. }
  140. }
  141. &.active {
  142. a {
  143. background-color:#f4f8f9;
  144. color:$color-primary;
  145. }
  146. }
  147. }
  148. }
  149. &:hover {
  150. > a {
  151. color:#282828;
  152. }
  153. > ul {
  154. height:auto;
  155. visibility: visible;
  156. opacity:1;
  157. -webkit-transition: visibility .3s, opacity .3s;
  158. -moz-transition: visibility .3s, opacity .3s;
  159. -ms-transition: visibility .3s, opacity .3s;
  160. -o-transition: visibility .3s, opacity .3s;
  161. transition: visibility .3s, opacity .3s;
  162. }
  163. }
  164. }
  165. }
  166. }
  167. #contents {
  168. padding:30px;
  169. height: calc(100vh - #{$header-height} - #{$nav-height});
  170. overflow-y:auto;
  171. }
  172. .page-header {
  173. margin-bottom:15px;
  174. .page-title {
  175. font-size:23px;
  176. font-weight:500;
  177. color:#282828;
  178. small {
  179. color:#767676;
  180. font-size:12px;
  181. margin-left:15px;
  182. }
  183. }
  184. }
  185. .box {
  186. position:relative;
  187. padding:30px;
  188. background:#fff;
  189. border-radius:4px;
  190. border:1px solid #e6e6e6;
  191. }