app.less 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150
  1. @import "base/style.less";
  2. @import "base/mixin.less";
  3. html,
  4. body {
  5. min-height: 100vh;
  6. width: 100vw;
  7. background-color: @backgroundColor;
  8. margin: 0;
  9. display: flex;
  10. .ms-font(@defalutSize, @defalutColor) !important; //默认字体样式
  11. * {
  12. text-decoration: none !important;
  13. font-family: Verdana, Arial, Helvetica, sans-serif;
  14. box-sizing: border-box;
  15. }
  16. }
  17. @headHeight: 50px;
  18. //超文本隐藏
  19. .ms-ellipsis {
  20. overflow: hidden;
  21. text-overflow: ellipsis;
  22. white-space: nowrap;
  23. display: block;
  24. }
  25. //垂直居中
  26. .ms-align-center {
  27. display: flex;
  28. align-items: center;
  29. }
  30. //修改描述字体颜色
  31. input::-webkit-input-placeholder,
  32. textarea::-webkit-input-placeholder {
  33. .ms-font(@auxiliarySize, @auxiliaryColor);
  34. resize: none;
  35. }
  36. //设置滚动条样式
  37. *::-webkit-scrollbar {
  38. .ms-width-height(8px);
  39. }
  40. /*定义滚动条轨道 内阴影+圆角*/
  41. *::-webkit-scrollbar-track {
  42. border-radius: 10px;
  43. /*滚动条的背景区域的圆角*/
  44. background-color: @backgroundColor;
  45. /*滚动条的背景颜色*/
  46. }
  47. /*定义滑块 内阴影+圆角*/
  48. *::-webkit-scrollbar-thumb {
  49. border-radius: 10px;
  50. /*滚动条的圆角*/
  51. background-color: @borderColor;
  52. /*滚动条的背景颜色*/
  53. }
  54. .ms-container {
  55. margin: 12px;
  56. height: ~'calc(100% - 24px)';
  57. padding: 14px;
  58. background: #fff;
  59. }
  60. .ms-header {
  61. padding: 10px;
  62. margin: 0;
  63. border-bottom: 1px solid #ddd;
  64. background: #fff;
  65. height: 50px;
  66. button{
  67. height: 30px;
  68. }
  69. }
  70. .ms-pagination {
  71. padding: 20px 0;
  72. text-align: right;
  73. }
  74. .ms-fr {
  75. float: right;
  76. }
  77. .ms-tr {
  78. text-align: right;
  79. }
  80. // 按钮组之间的间距
  81. .el-button+.el-button {
  82. // margin-left: 5px;
  83. }
  84. .ms-weixin-content{
  85. width: ~'calc(100% - 140px)';
  86. }
  87. // 弹出框样式
  88. .ms-weixin-dialog{
  89. .el-dialog__header{
  90. height: 55px;
  91. box-sizing: border-box;
  92. padding: 10px 10px 25px 10px;
  93. border-bottom: 1px solid @borderColor;
  94. .el-dialog__title{
  95. .ms-font(@defalutSize,@defalutColor,bold);
  96. }
  97. }
  98. .el-dialog__footer{
  99. border-top: 1px solid @borderColor;
  100. padding: 15px !important;
  101. }
  102. }
  103. //选中样式
  104. .ms-hover{
  105. cursor: pointer;
  106. &:hover{
  107. color: @themeColor;
  108. background: #fff;
  109. border-color: @themeColor;
  110. }
  111. }
  112. // 头部下拉选择区域间距
  113. .ms-header-select{
  114. font-size: 0;
  115. >.el-select:nth-of-type(2){
  116. margin: 0 10px;
  117. }
  118. }
  119. .el-submenu{
  120. // margin: 0 12px;
  121. // 菜单选中样式
  122. .el-menu-item.is-active{
  123. border-radius: 4px;
  124. }
  125. }
  126. // 卡片样式
  127. .el-card, .el-message{
  128. border-radius:0 !important;
  129. }