Newer
Older
urbanLifeline_YanAn / src / assets / styles / ruoyi.scss
@zhangqy zhangqy on 3 Oct 4 KB first commit
  1. /**
  2. * 通用css样式布局处理
  3. * Copyright (c) 2019 newfiber
  4. */
  5.  
  6. /** 基础通用 **/
  7. .pt5 {
  8. padding-top: 5px;
  9. }
  10. .pr5 {
  11. padding-right: 5px;
  12. }
  13. .pb5 {
  14. padding-bottom: 5px;
  15. }
  16. .mt5 {
  17. margin-top: 5px;
  18. }
  19. .mr5 {
  20. margin-right: 5px;
  21. }
  22. .mb5 {
  23. margin-bottom: 5px;
  24. }
  25. .mb8 {
  26. margin-bottom: 8px;
  27. }
  28. .ml5 {
  29. margin-left: 5px;
  30. }
  31. .mt10 {
  32. margin-top: 10px;
  33. }
  34. .mr10 {
  35. margin-right: 10px;
  36. }
  37. .mb10 {
  38. margin-bottom: 10px;
  39. }
  40. .ml10 {
  41. margin-left: 10px;
  42. }
  43. .mt20 {
  44. margin-top: 20px;
  45. }
  46. .mr20 {
  47. margin-right: 20px;
  48. }
  49. .mb20 {
  50. margin-bottom: 20px;
  51. }
  52. .ml20 {
  53. margin-left: 20px;
  54. }
  55.  
  56. .h1,
  57. .h2,
  58. .h3,
  59. .h4,
  60. .h5,
  61. .h6,
  62. h1,
  63. h2,
  64. h3,
  65. h4,
  66. h5,
  67. h6 {
  68. font-family: inherit;
  69. font-weight: 500;
  70. line-height: 1.1;
  71. color: inherit;
  72. }
  73.  
  74. .el-form .el-form-item__label {
  75. font-weight: 700;
  76. text-align: end;
  77. }
  78. .el-dialog:not(.is-fullscreen) {
  79. margin-top: 6vh !important;
  80. }
  81.  
  82. .el-dialog.scrollbar .el-dialog__body {
  83. overflow: auto;
  84. overflow-x: hidden;
  85. max-height: 75vh;
  86. padding: 10px 20px 0;
  87. }
  88.  
  89. .el-table {
  90. .el-table__header-wrapper,
  91. .el-table__fixed-header-wrapper {
  92. th {
  93. word-break: break-word;
  94. background-color: #f8f8f9 !important;
  95. color: #515a6e;
  96. height: 40px !important;
  97. font-size: 13px;
  98. }
  99. }
  100. .el-table__body-wrapper {
  101. .el-button [class*="el-icon-"] + span {
  102. margin-left: 1px;
  103. }
  104. }
  105. }
  106.  
  107. /** 表单布局 **/
  108. .form-header {
  109. font-size: 15px;
  110. color: #6379bb;
  111. border-bottom: 1px solid #ddd;
  112. margin: 8px 10px 25px 10px;
  113. padding-bottom: 5px;
  114. }
  115.  
  116. /** 表格布局 **/
  117. .pagination-container {
  118. // position: relative;
  119. height: 25px;
  120. margin-bottom: 10px;
  121. margin-top: 15px;
  122. padding: 10px 20px !important;
  123. }
  124.  
  125. /* tree border */
  126. .tree-border {
  127. margin-top: 5px;
  128. border: 1px solid #e5e6e7;
  129. background: #ffffff none;
  130. border-radius: 4px;
  131. width: 100%;
  132. }
  133.  
  134. .pagination-container .el-pagination {
  135. right: 30px;
  136. position: absolute;
  137. }
  138.  
  139. @media (max-width: 768px) {
  140. .pagination-container .el-pagination > .el-pagination__jump {
  141. display: none !important;
  142. }
  143. .pagination-container .el-pagination > .el-pagination__sizes {
  144. display: none !important;
  145. }
  146. }
  147.  
  148. .el-table .fixed-width .el-button--small {
  149. padding-left: 0;
  150. padding-right: 0;
  151. width: inherit;
  152. }
  153.  
  154. /** 表格更多操作下拉样式 */
  155. .el-table .el-dropdown-link {
  156. cursor: pointer;
  157. color: #409eff;
  158. margin-left: 10px;
  159. }
  160.  
  161. .el-table .el-dropdown,
  162. .el-icon-arrow-down {
  163. font-size: 12px;
  164. }
  165.  
  166. .el-tree-node__content > .el-checkbox {
  167. margin-right: 8px;
  168. }
  169.  
  170. .list-group-striped > .list-group-item {
  171. border-left: 0;
  172. border-right: 0;
  173. border-radius: 0;
  174. padding-left: 0;
  175. padding-right: 0;
  176. }
  177.  
  178. .list-group {
  179. padding-left: 0px;
  180. list-style: none;
  181. }
  182.  
  183. .list-group-item {
  184. border-bottom: 1px solid #e7eaec;
  185. border-top: 1px solid #e7eaec;
  186. margin-bottom: -1px;
  187. padding: 11px 0px;
  188. font-size: 13px;
  189. }
  190.  
  191. .pull-right {
  192. float: right !important;
  193. }
  194.  
  195. .el-card__header {
  196. padding: 14px 15px 7px !important;
  197. min-height: 40px;
  198. }
  199.  
  200. .el-card__body {
  201. padding: 15px 20px 20px 20px !important;
  202. }
  203.  
  204. .card-box {
  205. padding-right: 15px;
  206. padding-left: 15px;
  207. margin-bottom: 10px;
  208. }
  209.  
  210. /* button color */
  211. .el-button--cyan.is-active,
  212. .el-button--cyan:active {
  213. background: #20b2aa;
  214. border-color: #20b2aa;
  215. color: #ffffff;
  216. }
  217.  
  218. .el-button--cyan:focus,
  219. .el-button--cyan:hover {
  220. background: #48d1cc;
  221. border-color: #48d1cc;
  222. color: #ffffff;
  223. }
  224.  
  225. .el-button--cyan {
  226. background-color: #20b2aa;
  227. border-color: #20b2aa;
  228. color: #ffffff;
  229. }
  230.  
  231. /* text color */
  232. .text-navy {
  233. color: #1ab394;
  234. }
  235.  
  236. .text-primary {
  237. color: inherit;
  238. }
  239.  
  240. .text-success {
  241. color: #1c84c6;
  242. }
  243.  
  244. .text-info {
  245. color: #23c6c8;
  246. }
  247.  
  248. .text-warning {
  249. color: #f8ac59;
  250. }
  251.  
  252. .text-danger {
  253. color: #ed5565;
  254. }
  255.  
  256. .text-muted {
  257. color: #888888;
  258. }
  259.  
  260. /* image */
  261. .img-circle {
  262. border-radius: 50%;
  263. }
  264.  
  265. .img-lg {
  266. width: 120px;
  267. height: 120px;
  268. }
  269.  
  270. .avatar-upload-preview {
  271. position: absolute;
  272. top: 50%;
  273. transform: translate(50%, -50%);
  274. width: 200px;
  275. height: 200px;
  276. border-radius: 50%;
  277. box-shadow: 0 0 4px #ccc;
  278. overflow: hidden;
  279. }
  280.  
  281. /* 拖拽列样式 */
  282. .sortable-ghost {
  283. opacity: 0.8;
  284. color: #fff !important;
  285. background: #42b983 !important;
  286. }
  287.  
  288. /* 表格右侧工具栏样式 */
  289. .top-right-btn {
  290. margin-left: auto;
  291. }