index.scss 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225
  1. @use './variables.module.scss' as *;
  2. @use './mixin.scss';
  3. @use './transition.scss';
  4. @use './element-ui.scss';
  5. @use './sidebar.scss';
  6. @use './btn.scss';
  7. @use './ruoyi.scss';
  8. @use 'animate.css';
  9. @use 'element-plus/dist/index.css';
  10. body {
  11. height: 100%;
  12. margin: 0;
  13. -moz-osx-font-smoothing: grayscale;
  14. -webkit-font-smoothing: antialiased;
  15. text-rendering: optimizeLegibility;
  16. background: var(--el-bg-color-page);
  17. font-family:
  18. 'MiSans',
  19. 'HarmonyOS Sans SC',
  20. 'PingFang SC',
  21. 'Source Han Sans SC',
  22. 'Noto Sans SC',
  23. 'Hiragino Sans GB',
  24. 'Microsoft YaHei',
  25. sans-serif;
  26. }
  27. label {
  28. font-weight: 600;
  29. }
  30. html {
  31. height: 100%;
  32. box-sizing: border-box;
  33. }
  34. html.dark .svg-icon,
  35. html.dark svg {
  36. fill: var(--el-text-color-regular);
  37. }
  38. #app {
  39. height: 100%;
  40. }
  41. *,
  42. *:before,
  43. *:after {
  44. box-sizing: inherit;
  45. }
  46. .no-padding {
  47. padding: 0px !important;
  48. }
  49. .padding-content {
  50. padding: 4px 0;
  51. }
  52. a:focus,
  53. a:active {
  54. outline: none;
  55. }
  56. a,
  57. a:focus,
  58. a:hover {
  59. cursor: pointer;
  60. color: inherit;
  61. text-decoration: none;
  62. }
  63. div:focus {
  64. outline: none;
  65. }
  66. .fr {
  67. float: right;
  68. }
  69. .fl {
  70. float: left;
  71. }
  72. .pr-5 {
  73. padding-right: 5px;
  74. }
  75. .pl-5 {
  76. padding-left: 5px;
  77. }
  78. .block {
  79. display: block;
  80. }
  81. .pointer {
  82. cursor: pointer;
  83. }
  84. .inlineBlock {
  85. display: block;
  86. }
  87. .clearfix {
  88. &:after {
  89. visibility: hidden;
  90. display: block;
  91. font-size: 0;
  92. content: ' ';
  93. clear: both;
  94. height: 0;
  95. }
  96. }
  97. aside {
  98. background: #eef1f6;
  99. padding: 8px 24px;
  100. margin-bottom: 20px;
  101. border-radius: var(--app-radius-md);
  102. display: block;
  103. line-height: 32px;
  104. font-size: 16px;
  105. font-family:
  106. 'MiSans',
  107. 'HarmonyOS Sans SC',
  108. 'PingFang SC',
  109. 'Source Han Sans SC',
  110. 'Noto Sans SC',
  111. 'Hiragino Sans GB',
  112. 'Microsoft YaHei',
  113. sans-serif;
  114. color: #2c3e50;
  115. -webkit-font-smoothing: antialiased;
  116. -moz-osx-font-smoothing: grayscale;
  117. a {
  118. color: #337ab7;
  119. cursor: pointer;
  120. &:hover {
  121. color: rgb(32, 160, 255);
  122. }
  123. }
  124. }
  125. //main-container全局样式
  126. .app-container {
  127. padding: 20px;
  128. background: var(--app-surface-bg);
  129. border: 1px solid var(--app-surface-border);
  130. border-radius: var(--app-radius-base);
  131. box-shadow: var(--app-shadow-sm);
  132. }
  133. // search面板样式
  134. .panel,
  135. .search {
  136. margin-bottom: 0.75rem;
  137. border-radius: var(--app-radius-base);
  138. border: 1px solid var(--el-border-color-light);
  139. padding: 0.75rem;
  140. box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  141. transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
  142. &:hover {
  143. box-shadow: var(--app-shadow-sm);
  144. border-color: var(--el-border-color);
  145. transform: translateY(-1px);
  146. }
  147. }
  148. .components-container {
  149. margin: 30px 50px;
  150. position: relative;
  151. }
  152. .text-center {
  153. text-align: center;
  154. }
  155. .sub-navbar {
  156. height: 50px;
  157. line-height: 50px;
  158. position: relative;
  159. width: 100%;
  160. text-align: right;
  161. padding-right: 20px;
  162. transition: 600ms ease position;
  163. background: linear-gradient(90deg, rgba(32, 182, 249, 1) 0%, rgba(32, 182, 249, 1) 0%, rgba(33, 120, 241, 1) 100%, rgba(33, 120, 241, 1) 100%);
  164. .subtitle {
  165. font-size: 20px;
  166. color: #fff;
  167. }
  168. &.draft {
  169. background: #d0d0d0;
  170. }
  171. &.deleted {
  172. background: #d0d0d0;
  173. }
  174. }
  175. .link-type,
  176. .link-type:focus {
  177. color: #337ab7;
  178. cursor: pointer;
  179. &:hover {
  180. color: rgb(32, 160, 255);
  181. }
  182. }
  183. .filter-container {
  184. padding-bottom: 10px;
  185. .filter-item {
  186. display: inline-block;
  187. vertical-align: middle;
  188. margin-bottom: 10px;
  189. }
  190. }