common.scss 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222
  1. @import "~/assets/css/tool.scss";
  2. // @import "~/assets/css/font/iconfont.css";
  3. @import "~/assets/styles/index.scss";
  4. @import "~/assets/font/iconfont.css";
  5. @import "~/assets/bqfl/iconfont.css";
  6. @import "~/assets/styles/mobile.scss";
  7. @import "~/assets/styles/variables.scss";
  8. // .mywow {
  9. // // display: none;
  10. // transform: translateX(-10000000px);
  11. // }
  12. * {
  13. // padding: 0;
  14. // margin: 0;
  15. box-sizing: border-box;
  16. }
  17. a {
  18. text-decoration: none;
  19. /* 去除默认的下划线 */
  20. color: inherit;
  21. /* 去除默认的颜色和点击后变化的颜色 */
  22. }
  23. @include responseTo("pc") {
  24. html,
  25. body {
  26. // min-width: 1500px;
  27. color: var(--color-01);
  28. font-weight: var(--weight-400);
  29. font-family: var(--family-01);
  30. margin: 0;
  31. }
  32. .container {
  33. // padding-top: 170px;
  34. }
  35. .center1200 {
  36. width: 1200px !important;
  37. margin: 0 auto !important;
  38. }
  39. .center1440 {
  40. width: 1440px !important;
  41. margin: 0 auto !important;
  42. }
  43. .center1670 {
  44. width: 1670px !important;
  45. margin: 0 auto !important;
  46. }
  47. }
  48. img {
  49. line-height: 1;
  50. }
  51. .one-row {
  52. white-space: nowrap;
  53. overflow: hidden;
  54. text-overflow: ellipsis;
  55. }
  56. .bg {
  57. background-repeat: no-repeat;
  58. background-position: center center;
  59. background-size: cover;
  60. }
  61. .center-btn {
  62. width: auto;
  63. min-width: var(--size-178);
  64. min-height: var(--size-50);
  65. background: linear-gradient(-45deg, #2cbac0 0%, #006efe 100%), #006efe;
  66. border-radius: 4px;
  67. display: inline-flex;
  68. justify-content: center;
  69. align-items: center;
  70. font-size: var(--size-18);
  71. font-family: var(--family-01);
  72. font-weight: var(--weight-400);
  73. color: #ffffff;
  74. }
  75. .btn-01 {
  76. width: 1px;
  77. display: inline-flex;
  78. justify-content: center;
  79. align-items: center;
  80. flex-wrap: nowrap;
  81. min-width: var(--size-178);
  82. min-height: var(--size-50);
  83. padding: 0 var(--size-20);
  84. background: #ffffff;
  85. border: 1px solid var(--color-04);
  86. border-radius: var(--size-4);
  87. font-size: var(--size-18);
  88. font-family: var(--family-01);
  89. font-weight: var(--weight-400);
  90. color: var(--color-04);
  91. }
  92. .load {
  93. position: fixed;
  94. top: 45%;
  95. left: 50%;
  96. // .n-spin-description {
  97. // color: #b10000;
  98. // }
  99. // .n-base-loading__icon {
  100. // color: #b10000 !important;
  101. // }
  102. }
  103. .n-dropdown-menu.en .n-dropdown-option .n-dropdown-option-body .n-dropdown-option-body__label {
  104. font-size: 0.85em;
  105. }
  106. /** 个人中心共用样式 */
  107. .personal-center {
  108. padding: var(--size-220) var(--size-220) var(--size-40) var(--size-220);
  109. background-color: #f5f5f5;
  110. .center-component {
  111. width: 100%;
  112. min-height: var(--size-220);
  113. // background-color: #ffffff;
  114. border-radius: var(--size-16);
  115. overflow: hidden;
  116. display: flex;
  117. background-color: #ffffff;
  118. .center-component-right {
  119. flex: 1;
  120. .component-right-head {
  121. width: 100%;
  122. display: flex;
  123. align-items: center;
  124. justify-content: space-between;
  125. border-bottom: var(--size-3) solid #f5f5f5;
  126. padding: var(--size-40) var(--size-30) var(--size-14) var(--size-54);
  127. .head-title {
  128. flex: 1;
  129. color: #1a1a1a;
  130. margin: 0;
  131. font-size: var(--size-24);
  132. font-weight: 700;
  133. }
  134. }
  135. .component-right-body {
  136. padding: var(--size-40) var(--size-30) var(--size-14) var(--size-54);
  137. }
  138. }
  139. }
  140. }
  141. // 表格样式
  142. .table-style {
  143. box-sizing: border-box;
  144. .th-sort {
  145. display: flex;
  146. justify-content: center;
  147. .iconfont {
  148. color: #ff6a00;
  149. margin-right: var(--size-4);
  150. }
  151. span {
  152. min-width: var(--size-70);
  153. }
  154. }
  155. th {
  156. background-color: #fff7f1;
  157. font-weight: 700;
  158. font-size: var(--size-16);
  159. box-sizing: border-box;
  160. }
  161. td,
  162. th {
  163. text-align: center;
  164. word-wrap: break-word;
  165. /* 或者使用 overflow-wrap: break-word; */
  166. white-space: normal;
  167. /* 默认值,允许文本换行 */
  168. }
  169. tr:nth-of-type(even) td {
  170. background-color: #f7f7f7 !important;
  171. }
  172. .highlight {
  173. display: block;
  174. color: #0090ff;
  175. cursor: pointer;
  176. }
  177. .highlight.ver {
  178. color: #06a71b;
  179. margin-top: var(--size-10);
  180. }
  181. }
  182. // 表格分页样式
  183. .table-pagination {
  184. display: flex;
  185. justify-content: center;
  186. margin-top: var(--size-50);
  187. padding-bottom: var(--size-20);
  188. }