index.less 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  1. .el-form--label-top{
  2. .el-form-item{
  3. flex-wrap: wrap;
  4. }
  5. .el-form-item__label{
  6. width: 100%;
  7. }
  8. }
  9. .el-form-item.is-danger{
  10. .error-info{
  11. display: inline !important;
  12. }
  13. }
  14. .el-form-item.pos-top{
  15. flex-wrap: wrap;
  16. &--padding{
  17. >.el-form-item__content{
  18. padding-left: 12px;
  19. }
  20. }
  21. .el-form-item__label{
  22. width: 100% !important;
  23. text-align: left;
  24. }
  25. >.el-form-item__content{
  26. width: 100% !important;
  27. box-sizing: border-box;
  28. //padding-left: 12px;
  29. .basic-table{
  30. width: 100%; // 修复pos-top下 basic宽度为0的问题
  31. }
  32. }
  33. }
  34. .cip-form-item--pc.cip-form-item{ // pc模式下的el-form-item--in-table特殊化处理
  35. &.cip-form-item--in-table{
  36. //display: inline !important;
  37. > .el-form-item{
  38. margin: 0;
  39. display: inline !important;
  40. .el-form-item__content{
  41. display: flex;
  42. flex-wrap: nowrap;
  43. flex-grow: 2;
  44. width:auto;
  45. font-size: 12px;
  46. }
  47. }
  48. }
  49. }
  50. .cip-form-item.el-form-item__wrapper{
  51. display: flex;
  52. width: 100%;
  53. &.cip-form-item--hidden{ // 隐藏
  54. height: 0;
  55. overflow: hidden;
  56. }
  57. &.cip-form-item--label-position-top{
  58. > .el-form-item{
  59. display: block;
  60. }
  61. }
  62. > .el-form-item{
  63. flex-grow: 2;
  64. display: flex;
  65. align-items: flex-start;
  66. width: 100%;
  67. .el-form-item__label{
  68. flex-shrink: 0;
  69. }
  70. .is-readonly{
  71. color: #99a9bf;
  72. }
  73. .el-form-item__content{
  74. //max-width: 100%;
  75. margin-left:0 !important;
  76. flex-grow: 2;
  77. flex-shrink: 1;
  78. width: 0;
  79. display: flex;
  80. //align-items: center; // 此处center将当值 input组件垂直居中破坏样式
  81. }
  82. }
  83. .content--end{
  84. .el-form-item__content{
  85. align-self: flex-end;
  86. }
  87. }
  88. // input框在inline-block下出现空隙
  89. .el-input__inner, .el-input__count{
  90. vertical-align: top;
  91. }
  92. .el-input-group{
  93. vertical-align: middle;
  94. }
  95. // label为空的时候,移除label的padding
  96. .hide-label{
  97. > .el-form-item__label{
  98. padding: 0;
  99. }
  100. }
  101. }
  102. .el-table {
  103. .is-right {
  104. .el-form-item__content {
  105. justify-content: flex-end;
  106. text-align: right;
  107. }
  108. }
  109. }