common.scss 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121
  1. // 全局变量
  2. @import './variables.scss';
  3. // ele样式覆盖
  4. @import './element-ui.scss';
  5. // 顶部右侧显示
  6. @import './top.scss';
  7. // 导航标签
  8. @import './tags.scss';
  9. // 工具类函数
  10. @import './mixin.scss';
  11. // 侧面导航栏
  12. @import './sidebar.scss';
  13. // 动画
  14. @import './animate/vue-transition.scss';
  15. //主题
  16. @import './theme/index.scss';
  17. //适配
  18. @import './media.scss';
  19. //通用配置
  20. @import './normalize.scss';
  21. a{
  22. text-decoration: none;
  23. color:#333;
  24. }
  25. *{
  26. outline: none;
  27. }
  28. //滚动条样式
  29. @include scrollBar;
  30. .flex{display: flex;}
  31. .flex1{flex: 1;}
  32. .flex-d-c{
  33. flex-direction: column;
  34. }
  35. .jc-sb{
  36. justify-content:space-between
  37. }
  38. .jc-al-c{
  39. align-items: center;
  40. }
  41. .flex-center{
  42. justify-content: center;
  43. align-items: center;
  44. }
  45. .grid4x4{
  46. display: grid;
  47. grid-template-columns: 25% 25% 25% 25%;
  48. grid-template-rows: 25% 25% 25% 25%;
  49. }
  50. .w-100p{width: 100%;}
  51. .h-100p{height: 100%;}
  52. .mg-l-10{margin-left: 10px;}
  53. .mg-t-10{margin-top: 10px;}
  54. .mg-r-10{margin-right: 10px;}
  55. .mg-b-10{margin-bottom: 10px;}
  56. .mg-10{margin: 10px;}
  57. .pd-l-10{padding-left: 10px;}
  58. .pd-t-10{padding-top: 10px;}
  59. .pd-r-10{padding-right: 10px;}
  60. .pd-b-10{padding-bottom: 10px;}
  61. .pd-10{padding: 10px;}
  62. .mg-l-20{margin-left: 20px;}
  63. .mg-t-20{margin-top: 20px;}
  64. .mg-r-20{margin-right: 20px;}
  65. .mg-b-20{margin-bottom: 20px;}
  66. .mg-20{margin: 20px;}
  67. .pd-l-20{padding-left: 20px;}
  68. .pd-t-20{padding-top: 20px;}
  69. .pd-r-20{padding-right: 20px;}
  70. .pd-b-20{padding-bottom: 20px;}
  71. .pd-20{padding: 20px;}
  72. .box-size-bb{box-sizing: border-box;}
  73. .bgc-f6{background-color: #f6f6f6;}
  74. .normal-black{color: #606266;}
  75. .border-grey{
  76. border-color: rgb(187, 187, 187);
  77. border-width: 1px;
  78. border-style: solid;
  79. }
  80. .border-grey-b{
  81. border-bottom: 1px solid rgb(187, 187, 187);
  82. }
  83. .font-s-12{font-size: 12px;}
  84. .font-c-warning{color: rgb(240, 99, 10);}
  85. .text-icon{
  86. padding:0px;
  87. font-size: 18px;
  88. }
  89. .text-icon-danger.el-button--text{
  90. color: #f56c6c;
  91. }
  92. .text-success{color: #34c362;}
  93. .text-warning{color: #ec6421;}
  94. .text-align-c{text-align: center;}
  95. .custom-tree-node {
  96. flex: 1;
  97. display: flex;
  98. align-items: center;
  99. justify-content: space-between;
  100. font-size: 14px;
  101. padding-right: 8px;
  102. }