app.scss 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356
  1. /* 初始化样式
  2. ------------------------------- */
  3. * {
  4. margin: 0;
  5. padding: 0;
  6. box-sizing: border-box;
  7. outline: none !important;
  8. }
  9. :root {
  10. --next-color-white: #ffffff;
  11. --next-bg-main-color: #f8f8f8;
  12. --next-bg-color: #f5f5ff;
  13. --next-border-color-light: #f1f2f3;
  14. --next-color-primary-lighter: #ecf5ff;
  15. --next-color-success-lighter: #f0f9eb;
  16. --next-color-warning-lighter: #fdf6ec;
  17. --next-color-danger-lighter: #fef0f0;
  18. --next-color-dark-hover: #0000001a;
  19. --next-color-menu-hover: rgba(0, 0, 0, 0.2);
  20. --next-color-user-hover: rgba(0, 0, 0, 0.04);
  21. --next-color-seting-main: #e9eef3;
  22. --next-color-seting-aside: #d3dce6;
  23. --next-color-seting-header: #b3c0d1;
  24. }
  25. html,
  26. body,
  27. #app {
  28. margin: 0;
  29. padding: 0;
  30. width: 100%;
  31. height: 100%;
  32. font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
  33. font-weight: 400;
  34. -webkit-font-smoothing: antialiased;
  35. -webkit-tap-highlight-color: transparent;
  36. background-color: var(--next-bg-main-color);
  37. font-size: 14px;
  38. overflow: hidden;
  39. position: relative;
  40. }
  41. /* 主布局样式
  42. ------------------------------- */
  43. .layout-container {
  44. width: 100%;
  45. height: 100%;
  46. .layout-pd {
  47. padding: 15px !important;
  48. }
  49. .layout-flex {
  50. display: flex;
  51. flex-direction: column;
  52. flex: 1;
  53. }
  54. .layout-aside {
  55. background: var(--next-bg-menuBar);
  56. box-shadow: 2px 0 6px rgb(0 21 41 / 1%);
  57. height: inherit;
  58. position: relative;
  59. z-index: 1;
  60. display: flex;
  61. flex-direction: column;
  62. overflow-x: hidden !important;
  63. .el-scrollbar__view {
  64. overflow: hidden;
  65. }
  66. }
  67. .layout-header {
  68. padding: 0 !important;
  69. height: auto !important;
  70. }
  71. .layout-main {
  72. padding: 0 !important;
  73. overflow: hidden;
  74. width: 100%;
  75. background-color: var(--next-bg-main-color);
  76. display: flex;
  77. flex-direction: column;
  78. // 内层 el-scrollbar样式,用于界面高度自适应(main.vue)
  79. .layout-main-scroll {
  80. @extend .layout-flex;
  81. .layout-parent {
  82. @extend .layout-flex;
  83. position: relative;
  84. }
  85. }
  86. }
  87. // 用于界面高度自适应
  88. .layout-padding {
  89. @extend .layout-pd;
  90. position: absolute;
  91. left: 0;
  92. top: 0;
  93. height: 100%;
  94. overflow: hidden;
  95. @extend .layout-flex;
  96. &-auto {
  97. height: inherit;
  98. @extend .layout-flex;
  99. }
  100. &-view {
  101. background: var(--el-color-white);
  102. width: 100%;
  103. height: 100%;
  104. border-radius: 4px;
  105. border: 1px solid var(--el-border-color-light, #ebeef5);
  106. overflow: hidden;
  107. }
  108. }
  109. // 用于界面高度自适应,主视图区 main 的内边距,用于 iframe
  110. .layout-padding-unset {
  111. padding: 0 !important;
  112. &-view {
  113. border-radius: 0 !important;
  114. border: none !important;
  115. }
  116. }
  117. // 用于设置 iframe loading 时的高度(loading 垂直居中显示)
  118. .layout-iframe {
  119. .el-loading-parent--relative {
  120. height: 100%;
  121. }
  122. }
  123. .el-scrollbar {
  124. width: 100%;
  125. }
  126. .layout-el-aside-br-color {
  127. border-right: 1px solid var(--el-border-color-light, #ebeef5);
  128. }
  129. // pc端左侧导航样式
  130. .layout-aside-pc-220 {
  131. width: 220px !important;
  132. transition: width 0.3s ease;
  133. }
  134. .layout-aside-pc-64 {
  135. width: 64px !important;
  136. transition: width 0.3s ease;
  137. }
  138. .layout-aside-pc-1 {
  139. width: 1px !important;
  140. transition: width 0.3s ease;
  141. }
  142. // 手机端左侧导航样式
  143. .layout-aside-mobile {
  144. position: fixed;
  145. top: 0;
  146. left: -220px;
  147. width: 220px;
  148. z-index: 9999999;
  149. }
  150. .layout-aside-mobile-close {
  151. left: -220px;
  152. transition: all 0.3s cubic-bezier(0.39, 0.58, 0.57, 1);
  153. }
  154. .layout-aside-mobile-open {
  155. left: 0;
  156. transition: all 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
  157. }
  158. .layout-aside-mobile-mode {
  159. position: fixed;
  160. top: 0;
  161. right: 0;
  162. bottom: 0;
  163. left: 0;
  164. height: 100%;
  165. background-color: rgba(0, 0, 0, 0.5);
  166. z-index: 9999998;
  167. animation: error-img 0.3s;
  168. }
  169. .layout-mian-height-50 {
  170. height: calc(100vh - 50px);
  171. }
  172. .layout-columns-warp {
  173. flex: 1;
  174. display: flex;
  175. overflow: hidden;
  176. }
  177. .layout-hide {
  178. display: none;
  179. }
  180. }
  181. /* element plus 全局样式
  182. ------------------------------- */
  183. .layout-breadcrumb-seting {
  184. .el-divider {
  185. background-color: rgb(230, 230, 230);
  186. }
  187. }
  188. /* nprogress 进度条跟随主题颜色
  189. ------------------------------- */
  190. #nprogress {
  191. .bar {
  192. background: var(--el-color-primary) !important;
  193. z-index: 9999999 !important;
  194. }
  195. }
  196. /* flex 弹性布局
  197. ------------------------------- */
  198. .flex {
  199. display: flex;
  200. }
  201. .flex-auto {
  202. flex: 1;
  203. overflow: hidden;
  204. }
  205. .flex-center {
  206. @extend .flex;
  207. flex-direction: column;
  208. width: 100%;
  209. overflow: hidden;
  210. }
  211. .flex-margin {
  212. margin: auto;
  213. }
  214. .flex-warp {
  215. display: flex;
  216. flex-wrap: wrap;
  217. align-content: flex-start;
  218. margin: 0 -5px;
  219. .flex-warp-item {
  220. padding: 5px;
  221. .flex-warp-item-box {
  222. width: 100%;
  223. height: 100%;
  224. }
  225. }
  226. }
  227. /* cursor 鼠标形状
  228. ------------------------------- */
  229. // 默认
  230. .cursor-default {
  231. cursor: default !important;
  232. }
  233. // 帮助
  234. .cursor-help {
  235. cursor: help !important;
  236. }
  237. // 手指
  238. .cursor-pointer {
  239. cursor: pointer !important;
  240. }
  241. // 移动
  242. .cursor-move {
  243. cursor: move !important;
  244. }
  245. /* 宽高 100%
  246. ------------------------------- */
  247. .w100 {
  248. width: 100% !important;
  249. }
  250. .h100 {
  251. height: 100% !important;
  252. }
  253. .vh100 {
  254. height: 100vh !important;
  255. }
  256. .max100vh {
  257. max-height: 100vh !important;
  258. }
  259. .min100vh {
  260. min-height: 100vh !important;
  261. }
  262. /* 颜色值
  263. ------------------------------- */
  264. .color-primary {
  265. color: var(--el-color-primary);
  266. }
  267. .color-success {
  268. color: var(--el-color-success);
  269. }
  270. .color-warning {
  271. color: var(--el-color-warning);
  272. }
  273. .color-danger {
  274. color: var(--el-color-danger);
  275. }
  276. .color-info {
  277. color: var(--el-color-info);
  278. }
  279. /* 字体大小全局样式
  280. ------------------------------- */
  281. @for $i from 10 through 32 {
  282. .font#{$i} {
  283. font-size: #{$i}px !important;
  284. }
  285. }
  286. /* 外边距、内边距全局样式
  287. ------------------------------- */
  288. @for $i from 1 through 35 {
  289. .mt#{$i} {
  290. margin-top: #{$i}px !important;
  291. }
  292. .mr#{$i} {
  293. margin-right: #{$i}px !important;
  294. }
  295. .mb#{$i} {
  296. margin-bottom: #{$i}px !important;
  297. }
  298. .ml#{$i} {
  299. margin-left: #{$i}px !important;
  300. }
  301. .pt#{$i} {
  302. padding-top: #{$i}px !important;
  303. }
  304. .pr#{$i} {
  305. padding-right: #{$i}px !important;
  306. }
  307. .pb#{$i} {
  308. padding-bottom: #{$i}px !important;
  309. }
  310. .pl#{$i} {
  311. padding-left: #{$i}px !important;
  312. }
  313. }
  314. // 自定义全局样式
  315. .asj-container {
  316. padding: 3px 10px 3px 5px;
  317. }
  318. .fs-page-custom {
  319. position: initial !important;
  320. }
  321. .asj-header {
  322. position: sticky;
  323. background-color: #fff;
  324. box-shadow: 0px 0px 12px rgba(51,89,181,0.16);
  325. z-index: 10;
  326. top: 1px;
  327. height: 80px;
  328. margin-bottom: 3px;
  329. display: flex;
  330. flex-direction: column;
  331. }
  332. .asj-info {
  333. margin: 5px;
  334. display: flex;
  335. flex-direction: row;
  336. gap: 30px;
  337. }
  338. .asj-tabs > .el-tabs__header.is-top {
  339. position: sticky;
  340. top: 82px;
  341. z-index: 10;
  342. }