index.scss 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236
  1. @use "./reset";
  2. .app-container {
  3. padding: 10px;
  4. }
  5. .search-container {
  6. padding: 18px 0 0 10px;
  7. margin-bottom: 10px;
  8. background-color: var(--el-bg-color-overlay);
  9. border: 1px solid var(--el-border-color-light);
  10. border-radius: 4px;
  11. box-shadow: var(--el-box-shadow-light);
  12. }
  13. .table-container > .el-card__header {
  14. padding: calc(var(--el-card-padding) - 8px) var(--el-card-padding);
  15. }
  16. .link-type,
  17. .link-type:focus {
  18. color: #337ab7;
  19. cursor: pointer;
  20. &:hover {
  21. color: rgb(32 160 255);
  22. }
  23. }
  24. .mainContentBox {
  25. width: 100%;
  26. height: calc(100vh - 80px);
  27. padding: 0 24px 24px 24px;
  28. overflow: hidden;
  29. //background: white;
  30. }
  31. .commonTitle {
  32. font-weight: 500;
  33. font-size: 38px;
  34. color: rgba(0, 0, 0, 0.9);
  35. line-height: 40px;
  36. text-align: left;
  37. margin-bottom: 20px;
  38. }
  39. .elColClasss {
  40. height: calc(100vh - 130px);
  41. }
  42. .drawerTitle {
  43. width: 100%;
  44. height: 38px;
  45. font-weight: 500;
  46. font-size: 38px;
  47. color: rgba(0, 0, 0, 0.9);
  48. text-align: center;
  49. }
  50. //steps 二级路由页面Scroll样式
  51. .stepsViewScroll {
  52. width: calc((100vw / 6 * 5) - 50px);
  53. margin-top: $p20;
  54. display: grid;
  55. gap: 20px;
  56. grid-template-columns: 1fr 1fr;
  57. }
  58. //flex布局居中
  59. //字体样式
  60. .titleText {
  61. font-size: 24px;
  62. font-weight: 500;
  63. font-weight: bold;
  64. }
  65. .describeText {
  66. font-size: 20px;
  67. color: #00000060;
  68. line-height: 25px;
  69. }
  70. //公共弹框样式
  71. .midPopUp {
  72. position: fixed;
  73. width: 100vw;
  74. height: 100vh;
  75. z-index: 2;
  76. background-color: #00000030;
  77. top: 0;
  78. left: 0;
  79. backdrop-filter: blur(5px);
  80. display: flex;
  81. justify-content: center;
  82. align-items: center;
  83. .container {
  84. width: 50vw;
  85. height: 80vh;
  86. background-color: #F1F3F5;
  87. border-radius: 16px;
  88. padding: 10px;
  89. display: flex;
  90. flex-direction: column;
  91. .headerTittle {
  92. width: 100%;
  93. height: 55px;
  94. text-align: center;
  95. line-height: 55px;
  96. font-size: 38px;
  97. font-weight: 500;
  98. }
  99. .describeText {
  100. width: 100%;
  101. height: 40px;
  102. text-align: center;
  103. line-height: 40px;
  104. font-size: 20px;
  105. color: #00000060;
  106. }
  107. .info {
  108. flex: 1;
  109. }
  110. }
  111. }
  112. // 弹框html模板
  113. // <div class="midPopUp">
  114. // <div class="container">
  115. // <div class="headerTittle">本次存入</div>
  116. // <div class="describeText">LX22112233221122</div>
  117. // <el-scrollbar>
  118. // </el-scrollbar>
  119. // </div>
  120. // </div>
  121. .rightFullPopUp {
  122. position: fixed;
  123. width: 100vw;
  124. height: 100vh;
  125. z-index: 2;
  126. background-color: #00000030;
  127. top: 0;
  128. left: 0;
  129. backdrop-filter: blur(5px);
  130. .container {
  131. width: 50vw;
  132. height: 100vh;
  133. background-color: #F1F3F5;
  134. border-radius: 16px;
  135. padding: 10px;
  136. display: flex;
  137. flex-direction: column;
  138. float: right;
  139. .headerTittle {
  140. width: 100%;
  141. height: 55px;
  142. text-align: center;
  143. line-height: 55px;
  144. font-size: 38px;
  145. font-weight: 500;
  146. }
  147. .describeText {
  148. width: 100%;
  149. height: 40px;
  150. text-align: center;
  151. line-height: 40px;
  152. font-size: 20px;
  153. color: #00000060;
  154. }
  155. .info {
  156. flex: 1;
  157. }
  158. }
  159. }
  160. // <div class="rightFullPopUp" >
  161. // <div class="container">
  162. // <div class="headerTittle">本次存入</div>
  163. // <div class="describeText">LX22112233221122</div>
  164. // <el-scrollbar />
  165. // </div>
  166. // </div>
  167. //drawer样式
  168. .container {
  169. width: 50vw;
  170. height: 100vh;
  171. background-color: #F1F3F5;
  172. border-radius: 16px;
  173. display: flex;
  174. flex-direction: column;
  175. padding-top: 20px;
  176. padding-left: 30px;
  177. padding-right: 20px;
  178. .headerTittle {
  179. width: 100%;
  180. height: 55px;
  181. text-align: center;
  182. line-height: 55px;
  183. font-size: 38px;
  184. font-weight: 500;
  185. }
  186. .describeText {
  187. width: 100%;
  188. height: 40px;
  189. text-align: center;
  190. line-height: 40px;
  191. font-size: 20px;
  192. color: #00000060;
  193. }
  194. .info {
  195. flex: 1;
  196. }
  197. }
  198. //全局表格样式
  199. //控制字体
  200. .el-table__cell{
  201. font-size: $p20;
  202. color: black;
  203. }