global.scss 44 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816
  1. @use 'sass:math';
  2. @function px2rpx($px) {
  3. @return $px * 1rpx;
  4. }
  5. :root {
  6. --color-red-400: oklch(70.4% .191 22.216);
  7. --color-orange-600: oklch(64.6% .222 41.116);
  8. --color-amber-50: oklch(98.7% .022 95.277);
  9. --color-amber-400: oklch(82.8% .189 84.429);
  10. --color-yellow-100: oklch(97.3% .071 103.193);
  11. --color-yellow-400: oklch(85.2% .199 91.936);
  12. --color-yellow-500: oklch(79.5% .184 86.047);
  13. --color-green-300: oklch(87.1% .15 154.449);
  14. --color-green-400: oklch(79.2% .209 151.711);
  15. --color-sky-100: oklch(95.1% .026 236.824);
  16. --color-sky-400: oklch(74.6% .16 232.661);
  17. --color-blue-500: oklch(62.3% .214 259.815);
  18. --color-blue-600: oklch(54.6% .245 262.881);
  19. --color-indigo-50: oklch(96.2% .018 272.314);
  20. --color-indigo-100: oklch(93% .034 272.788);
  21. --color-indigo-400: oklch(67.3% .182 276.935);
  22. --color-indigo-600: oklch(51.1% .262 276.966);
  23. --color-violet-400: oklch(70.2% .183 293.541);
  24. --color-purple-300: oklch(82.7% .119 306.383);
  25. --color-purple-500: oklch(62.7% .265 303.9);
  26. --color-purple-600: oklch(55.8% .288 302.321);
  27. --color-fuchsia-400: oklch(74% .238 322.16);
  28. --color-fuchsia-600: oklch(59.1% .293 322.896);
  29. --color-pink-100: oklch(94.8% .028 342.258);
  30. --color-pink-300: oklch(82.3% .12 346.018);
  31. --color-pink-500: oklch(0.59 0.22 25.62);
  32. --color-pink-600: oklch(0.67 0.21 36.35);
  33. --color-rose-500: oklch(64.5% .246 16.439);
  34. --color-slate-50: oklch(98.4% .003 247.858);
  35. --color-slate-100: oklch(96.8% .007 247.896);
  36. --color-slate-200: oklch(92.9% .013 255.508);
  37. --color-slate-300: oklch(86.9% .022 252.894);
  38. --color-slate-400: oklch(70.4% .04 256.788);
  39. --color-slate-500: oklch(55.4% .046 257.417);
  40. --color-slate-600: oklch(44.6% .043 257.281);
  41. --color-slate-700: oklch(37.2% .044 257.287);
  42. --color-slate-800: oklch(27.9% .041 260.031);
  43. --color-slate-900: oklch(20.8% .042 265.755);
  44. --color-gray-200: oklch(92.8% .006 264.531);
  45. --color-zinc-100: oklch(96.7% .001 286.375);
  46. --color-black: #000;
  47. --color-gray: #F2F2F2;
  48. --color-gray-second: #6B7188;
  49. --color-white: #fff;
  50. --font-size-10: px2rpx(10);
  51. --font-size-12: px2rpx(12);
  52. --font-size-13: px2rpx(13);
  53. --font-size-14: px2rpx(14);
  54. --font-size-15: px2rpx(15);
  55. --font-size-16: px2rpx(16);
  56. --font-size-18: px2rpx(18);
  57. --font-size-20: px2rpx(20);
  58. --font-size-22: px2rpx(22);
  59. --font-size-24: px2rpx(24);
  60. --font-size-26: px2rpx(26);
  61. --font-size-28: px2rpx(28);
  62. --font-size-32: px2rpx(32);
  63. --font-size-36: px2rpx(36);
  64. --font-size-40: px2rpx(40);
  65. --el-component-size: px2rpx(40);
  66. --ease-in: cubic-bezier(.4, 0, 1, 1);
  67. --ease-out: cubic-bezier(0, 0, .2, 1);
  68. --ease-in-out: cubic-bezier(.4, 0, .2, 1);
  69. --animate-spin: spin 1s linear infinite;
  70. --animate-ping: ping 1s cubic-bezier(0, 0, .2, 1) infinite;
  71. --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
  72. --blur-sm: 8px;
  73. --default-transition-duration: .15s;
  74. --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  75. --default-font-family: var(--font-sans);
  76. --default-mono-font-family: var(--font-mono);
  77. --font-inter: Inter, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  78. --color-navy-50: #e7e9ef;
  79. --color-navy-100: #fff;
  80. --color-navy-200: #a3adc2;
  81. --color-navy-300: #697a9b;
  82. --color-navy-400: #5c6b8a;
  83. --color-navy-450: #465675;
  84. --color-navy-500: #3a3c43;
  85. --color-navy-600: #313e59;
  86. --color-navy-700: #242726;
  87. --color-navy-750: #222e45;
  88. --color-navy-800: #202b40;
  89. --color-navy-900: #141a18;
  90. --color-slate-150: #e9eef5;
  91. --color-primary: #4f46e5;
  92. --color-primary-focus: #4338ca;
  93. --color-secondary-light: #ff57d8;
  94. --color-secondary: #141a18;
  95. --color-secondary-focus: #242726;
  96. --color-accent-light: #242726;
  97. --color-accent: #5f5af6;
  98. --color-accent-focus: #4d47f5;
  99. --color-info: #0ea5e9;
  100. --color-info-focus: #0284c7;
  101. --color-success: #1ac23a;
  102. --color-success-focus: #17a732;
  103. --color-warning: #ff9800;
  104. --color-warning-focus: #e68200;
  105. --color-error: #e32326;
  106. --color-error-focus: #f03000;
  107. --color-bg-main: #f8f9f9;
  108. --text-tiny: .625rem;
  109. --text-tiny--line-height: .8125rem;
  110. --text-tiny-plus: .6875rem;
  111. --text-tiny-plus--line-height: .875rem;
  112. --text-xs-plus: .8125rem;
  113. --text-xs-plus--line-height: 1.125rem;
  114. --text-sm-plus: .9375rem;
  115. --text-sm-plus--line-height: 1.375rem;
  116. --animate-shimmer: shimmer 2s linear infinite;
  117. // 状态背景色
  118. --status-warning-bg: var(--color-amber-50);
  119. --status-success-bg: var(--color-green-300);
  120. --status-processing-bg: var(--color-sky-100);
  121. --status-danger-bg: var(--color-pink-100);
  122. --status-expired-bg: var(--color-slate-200);
  123. --status-cancelled-bg: var(--color-slate-100);
  124. // 状态文字颜色
  125. --status-warning-text: var(--color-orange-600);
  126. --status-success-text: var(--color-green-400);
  127. --status-processing-text: var(--color-blue-600);
  128. --status-danger-text: var(--color-rose-500);
  129. --status-expired-text: var(--color-slate-600);
  130. --status-cancelled-text: var(--color-slate-500);
  131. // 状态边框颜色
  132. --status-warning-border: var(--color-amber-400);
  133. --status-success-border: var(--color-green-400);
  134. --status-processing-border: var(--color-sky-400);
  135. --status-danger-border: var(--color-pink-300);
  136. --status-expired-border: var(--color-slate-400);
  137. --status-cancelled-border: var(--color-slate-300);
  138. --bs-secondary: #ef4223;
  139. // 新的
  140. color-scheme: dark;
  141. --bs-body-color: #8c96a9;
  142. --bs-body-color-rgb: 140, 150, 169;
  143. --bs-body-bg: #282b44;
  144. --bs-body: #282b44;
  145. --bs-body-bg-rgb: 40, 43, 68;
  146. --bs-emphasis-color: #ffffff;
  147. --bs-emphasis-color-rgb: 255, 255, 255;
  148. --bs-secondary-color: rgba(140, 150, 169, 0.75);
  149. --bs-secondary-color-rgb: 140, 150, 169;
  150. --bs-secondary-bg: #26283e;
  151. --bs-secondary-bg-rgb: 38, 40, 62;
  152. --bs-tertiary-color: rgba(140, 150, 169, 0.5);
  153. --bs-tertiary-color-rgb: 140, 150, 169;
  154. --bs-tertiary-bg: #26283e;
  155. --bs-tertiary-bg-rgb: 38, 40, 62;
  156. --bs-secondary-text-emphasis: #83a6ff;
  157. --bs-secondary-text-emphasis: #ffb370;
  158. --bs-success-text-emphasis: #7ad0b2;
  159. --bs-info-text-emphasis: #67d2fc;
  160. --bs-warning-text-emphasis: #fed679;
  161. --bs-danger-text-emphasis: #ff8c77;
  162. --bs-light-text-emphasis: #888bb2;
  163. --bs-dark-text-emphasis: #999999;
  164. --bs-secondary-bg-subtle: #0a1533;
  165. --bs-secondary-bg-subtle: #331a03;
  166. --bs-success-bg-subtle: #072319;
  167. --bs-info-bg-subtle: #002432;
  168. --bs-warning-bg-subtle: #332506;
  169. --bs-danger-bg-subtle: #330d06;
  170. --bs-light-bg-subtle: #1a1c31;
  171. --bs-dark-bg-subtle: #10101d;
  172. --bs-secondary-border-subtle: #1d4099;
  173. --bs-secondary-border-subtle: #994d0a;
  174. --bs-success-border-subtle: #146a4c;
  175. --bs-info-border-subtle: #016c96;
  176. --bs-warning-border-subtle: #987013;
  177. --bs-danger-border-subtle: #992611;
  178. --bs-light-border-subtle: #484c83;
  179. --bs-dark-border-subtle: #494949;
  180. --bs-heading-color: #fff;
  181. --bs-link-color: #83a6ff;
  182. --bs-link-hover-color: #9cb8ff;
  183. --bs-link-color-rgb: 131, 166, 255;
  184. --bs-link-hover-color-rgb: 156, 184, 255;
  185. --bs-code-color: #e685b5;
  186. --bs-highlight-color: #8c96a9;
  187. --bs-highlight-bg: #664d03;
  188. --bs-border-color: #3a3b4d;
  189. --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
  190. --bs-form-valid-color: #75b798;
  191. --bs-form-valid-border-color: #75b798;
  192. --bs-form-invalid-color: #ea868f;
  193. --bs-form-invalid-border-color: #ea868f;
  194. --bs-danger-rgb: 255, 64, 28;
  195. --bs-white-rgb: 255, 255, 255;
  196. }
  197. .dark {
  198. --color-red-400: oklch(70.4% .191 22.216);
  199. --color-orange-600: oklch(64.6% .222 41.116);
  200. --color-amber-50: oklch(98.7% .022 95.277);
  201. --color-amber-400: oklch(82.8% .189 84.429);
  202. --color-yellow-100: oklch(97.3% .071 103.193);
  203. --color-yellow-400: oklch(85.2% .199 91.936);
  204. --color-yellow-500: oklch(79.5% .184 86.047);
  205. --color-green-300: oklch(87.1% .15 154.449);
  206. --color-green-400: oklch(79.2% .209 151.711);
  207. --color-sky-100: oklch(95.1% .026 236.824);
  208. --color-sky-400: oklch(74.6% .16 232.661);
  209. --color-blue-500: oklch(62.3% .214 259.815);
  210. --color-blue-600: oklch(54.6% .245 262.881);
  211. --color-indigo-50: oklch(96.2% .018 272.314);
  212. --color-indigo-100: oklch(93% .034 272.788);
  213. --color-indigo-400: oklch(67.3% .182 276.935);
  214. --color-indigo-600: oklch(51.1% .262 276.966);
  215. --color-violet-400: oklch(70.2% .183 293.541);
  216. --color-purple-300: oklch(82.7% .119 306.383);
  217. --color-purple-500: oklch(62.7% .265 303.9);
  218. --color-purple-600: oklch(55.8% .288 302.321);
  219. --color-fuchsia-400: oklch(74% .238 322.16);
  220. --color-fuchsia-600: oklch(59.1% .293 322.896);
  221. --color-pink-100: oklch(94.8% .028 342.258);
  222. --color-pink-300: oklch(82.3% .12 346.018);
  223. --color-pink-500: oklch(0.59 0.22 25.62);
  224. --color-pink-600: oklch(0.67 0.21 36.35);
  225. --color-rose-500: oklch(64.5% .246 16.439);
  226. --color-slate-50: oklch(98.4% .003 247.858);
  227. --color-slate-100: oklch(96.8% .007 247.896);
  228. --color-slate-200: oklch(92.9% .013 255.508);
  229. --color-slate-300: oklch(86.9% .022 252.894);
  230. --color-slate-400: oklch(70.4% .04 256.788);
  231. --color-slate-500: oklch(55.4% .046 257.417);
  232. --color-slate-600: oklch(44.6% .043 257.281);
  233. --color-slate-700: oklch(37.2% .044 257.287);
  234. --color-slate-800: oklch(27.9% .041 260.031);
  235. --color-slate-900: oklch(20.8% .042 265.755);
  236. --color-gray-200: oklch(92.8% .006 264.531);
  237. --color-zinc-100: oklch(96.7% .001 286.375);
  238. --color-black: #000;
  239. --color-white: #fff;
  240. --color-navy-900: #11224d;
  241. --font-size-10: px2rpx(10);
  242. --font-size-12: px2rpx(12);
  243. --font-size-13: px2rpx(13);
  244. --font-size-14: px2rpx(14);
  245. --font-size-15: px2rpx(15);
  246. --font-size-16: px2rpx(16);
  247. --font-size-18: px2rpx(18);
  248. --font-size-20: px2rpx(20);
  249. --font-size-22: px2rpx(22);
  250. --font-size-24: px2rpx(24);
  251. --font-size-26: px2rpx(26);
  252. --font-size-28: px2rpx(28);
  253. --font-size-32: px2rpx(32);
  254. --font-size-36: px2rpx(36);
  255. --font-size-40: px2rpx(40);
  256. --el-component-size: px2rpx(40);
  257. --ease-in: cubic-bezier(.4, 0, 1, 1);
  258. --ease-out: cubic-bezier(0, 0, .2, 1);
  259. --ease-in-out: cubic-bezier(.4, 0, .2, 1);
  260. --animate-spin: spin 1s linear infinite;
  261. --animate-ping: ping 1s cubic-bezier(0, 0, .2, 1) infinite;
  262. --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
  263. --blur-sm: 8px;
  264. --default-transition-duration: .15s;
  265. --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  266. --default-font-family: var(--font-sans);
  267. --default-mono-font-family: var(--font-mono);
  268. --font-inter: Inter, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  269. --color-navy-50: #e7e9ef;
  270. --color-navy-100: #fff;
  271. --color-navy-200: #a3adc2;
  272. --color-navy-300: #697a9b;
  273. --color-navy-400: #5c6b8a;
  274. --color-navy-450: #465675;
  275. --color-navy-500: #3a3c43;
  276. --color-navy-600: #313e59;
  277. --color-navy-700: #242726;
  278. --color-navy-750: #222e45;
  279. --color-navy-800: #202b40;
  280. --color-navy-900: #141a18;
  281. --color-slate-150: #e9eef5;
  282. --color-primary: #4f46e5;
  283. --color-primary-focus: #4338ca;
  284. --color-secondary-light: #ff57d8;
  285. --color-secondary: #141a18;
  286. --color-secondary-focus: #242726;
  287. --color-accent-light: #242726;
  288. --color-accent: #5f5af6;
  289. --color-accent-focus: #4d47f5;
  290. --color-info: #0ea5e9;
  291. --color-info-focus: #0284c7;
  292. --color-success: #1ac23a;
  293. --color-success-focus: #17a732;
  294. --color-warning: #ff9800;
  295. --color-warning-focus: #e68200;
  296. --color-error: #e32326;
  297. --color-error-focus: #f03000;
  298. --color-gray-second: #6B7188;
  299. --color-bg-main: #f8f9f9;
  300. --text-tiny: .625rem;
  301. --text-tiny--line-height: .8125rem;
  302. --text-tiny-plus: .6875rem;
  303. --text-tiny-plus--line-height: .875rem;
  304. --text-xs-plus: .8125rem;
  305. --text-xs-plus--line-height: 1.125rem;
  306. --text-sm-plus: .9375rem;
  307. --text-sm-plus--line-height: 1.375rem;
  308. --animate-shimmer: shimmer 2s linear infinite;
  309. --bs-secondary: #ef4223;
  310. }
  311. .light {
  312. --bs-blue: #0d6efd;
  313. --bs-indigo: #6610f2;
  314. --bs-purple: #6f42c1;
  315. --bs-pink: #d63384;
  316. --bs-red: #dc3545;
  317. --bs-orange: #fd7e14;
  318. --bs-yellow: #ffc107;
  319. --bs-green: #198754;
  320. --bs-teal: #20c997;
  321. --bs-cyan: #0dcaf0;
  322. --bs-black: #000;
  323. --bs-white: #ffffff;
  324. --bs-gray: #6c757d;
  325. --bs-gray-dark: #343a40;
  326. --bs-gray-100: #f8f9fa;
  327. --bs-gray-200: #e9ecef;
  328. --bs-gray-300: #dee2e6;
  329. --bs-gray-400: #ced4da;
  330. --bs-gray-500: #adb5bd;
  331. --bs-gray-600: #6c757d;
  332. --bs-gray-700: #495057;
  333. --bs-gray-800: #343a40;
  334. --bs-gray-900: #212529;
  335. --bs-secondary: #ef4223;
  336. --bs-success: #22B07E;
  337. --bs-info: #02B4FA;
  338. --bs-warning: #FDBB1F;
  339. --bs-danger: #FF401C;
  340. --bs-light: #ECF2FD;
  341. --bs-dark: #0C243C;
  342. --bs-white: #ffffff;
  343. --bs-gray: #97A1C0;
  344. --bs-secondary-rgb: 49, 106, 255;
  345. --bs-secondary-rgb: 255, 129, 16;
  346. --bs-success-rgb: 34, 176, 126;
  347. --bs-info-rgb: 2, 180, 250;
  348. --bs-warning-rgb: 253, 187, 31;
  349. --bs-danger-rgb: 255, 64, 28;
  350. --bs-light-rgb: 236, 242, 253;
  351. --bs-dark-rgb: 12, 36, 60;
  352. --bs-white-rgb: 255, 255, 255;
  353. --bs-gray-rgb: 151, 161, 192;
  354. --bs-secondary-text-emphasis: #142a66;
  355. --bs-secondary-text-emphasis: #663406;
  356. --bs-success-text-emphasis: #0e4632;
  357. --bs-info-text-emphasis: #014864;
  358. --bs-warning-text-emphasis: #654b0c;
  359. --bs-danger-text-emphasis: #661a0b;
  360. --bs-light-text-emphasis: #495057;
  361. --bs-dark-text-emphasis: #495057;
  362. --bs-secondary-bg-subtle: #eaf0ff;
  363. --bs-secondary-bg-subtle: #fff2e7;
  364. --bs-success-bg-subtle: #e9f7f2;
  365. --bs-info-bg-subtle: #e6f8ff;
  366. --bs-warning-bg-subtle: #fff8e9;
  367. --bs-danger-bg-subtle: #ffece8;
  368. --bs-light-bg-subtle: #fcfcfd;
  369. --bs-dark-bg-subtle: #ced4da;
  370. --bs-secondary-border-subtle: #ccdaff;
  371. --bs-secondary-border-subtle: #ffe0c3;
  372. --bs-success-border-subtle: #c8ebdf;
  373. --bs-info-border-subtle: #c0ecfe;
  374. --bs-warning-border-subtle: #ffeec7;
  375. --bs-danger-border-subtle: #ffcfc6;
  376. --bs-light-border-subtle: #e9ecef;
  377. --bs-dark-border-subtle: #adb5bd;
  378. --bs-white-rgb: 255, 255, 255;
  379. --bs-black-rgb: 0, 0, 0;
  380. --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  381. --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  382. --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  383. --bs-body-font-size: 0.875rem;
  384. --bs-body-font-weight: 500;
  385. --bs-body-line-height: 1.6;
  386. --bs-body-color: #858585;
  387. --bs-body-color-rgb: 151, 161, 192;
  388. --bs-body-bg: #fff;
  389. --bs-body: #fdfdfd;
  390. --bs-body-bg-rgb: 255, 255, 255;
  391. --bs-emphasis-color: #000;
  392. --bs-emphasis-color-rgb: 0, 0, 0;
  393. --bs-secondary-color: rgba(151, 161, 192, 0.75);
  394. --bs-secondary-color-rgb: 151, 161, 192;
  395. --bs-secondary-bg: #f9f9f9;
  396. --bs-secondary-bg-rgb: 249, 249, 249;
  397. --bs-tertiary-color: rgba(151, 161, 192, 0.5);
  398. --bs-tertiary-color-rgb: 151, 161, 192;
  399. --bs-tertiary-bg: #f8f9fa;
  400. --bs-tertiary-bg-rgb: 248, 249, 250;
  401. --bs-heading-color: #0C243C;
  402. --bs-link-color: #316AFF;
  403. --bs-link-color-rgb: 49, 106, 255;
  404. --bs-link-decoration: none;
  405. --bs-link-hover-color: #2755cc;
  406. --bs-link-hover-color-rgb: 39, 85, 204;
  407. --bs-code-color: #d63384;
  408. --bs-highlight-color: #97A1C0;
  409. --bs-highlight-bg: #fff3cd;
  410. --bs-border-width: 1px;
  411. --bs-border-style: solid;
  412. --bs-border-color: #e4e4e4;
  413. --bs-border-color-translucent: rgba(0, 0, 0, 0.1);
  414. --bs-border-radius: 0.375rem;
  415. --bs-border-radius-sm: 0.25rem;
  416. --bs-border-radius-lg: 0.625rem;
  417. --bs-border-radius-xl: 1rem;
  418. --bs-border-radius-xxl: 2rem;
  419. --bs-border-radius-2xl: var(--bs-border-radius-xxl);
  420. --bs-border-radius-pill: 50rem;
  421. --bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  422. --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  423. --bs-box-shadow-lg: 0 0.26rem 1.126rem 0 rgba(45, 42, 60, 0.15);
  424. --bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
  425. --bs-focus-ring-width: 0.1rem;
  426. --bs-focus-ring-opacity: 0.25;
  427. --bs-focus-ring-color: rgba(49, 106, 255, 0.25);
  428. --bs-form-valid-color: #22B07E;
  429. --bs-form-valid-border-color: #22B07E;
  430. --bs-form-invalid-color: #FF401C;
  431. --bs-form-invalid-border-color: #FF401C;
  432. }
  433. .dark {
  434. color-scheme: dark;
  435. --bs-body-color: #8c96a9;
  436. --bs-body-color-rgb: 140, 150, 169;
  437. --bs-body-bg: #282b44;
  438. --bs-body: #282b44;
  439. --bs-body-bg-rgb: 40, 43, 68;
  440. --bs-emphasis-color: #ffffff;
  441. --bs-emphasis-color-rgb: 255, 255, 255;
  442. --bs-secondary-color: rgba(140, 150, 169, 0.75);
  443. --bs-secondary-color-rgb: 140, 150, 169;
  444. --bs-secondary-bg: #26283e;
  445. --bs-secondary-bg-rgb: 38, 40, 62;
  446. --bs-tertiary-color: rgba(140, 150, 169, 0.5);
  447. --bs-tertiary-color-rgb: 140, 150, 169;
  448. --bs-tertiary-bg: #26283e;
  449. --bs-tertiary-bg-rgb: 38, 40, 62;
  450. --bs-secondary-text-emphasis: #83a6ff;
  451. --bs-secondary-text-emphasis: #ffb370;
  452. --bs-success-text-emphasis: #7ad0b2;
  453. --bs-info-text-emphasis: #67d2fc;
  454. --bs-warning-text-emphasis: #fed679;
  455. --bs-danger-text-emphasis: #ff8c77;
  456. --bs-light-text-emphasis: #888bb2;
  457. --bs-dark-text-emphasis: #999999;
  458. --bs-secondary-bg-subtle: #0a1533;
  459. --bs-secondary-bg-subtle: #331a03;
  460. --bs-success-bg-subtle: #072319;
  461. --bs-info-bg-subtle: #002432;
  462. --bs-warning-bg-subtle: #332506;
  463. --bs-danger-bg-subtle: #330d06;
  464. --bs-light-bg-subtle: #1a1c31;
  465. --bs-dark-bg-subtle: #10101d;
  466. --bs-secondary-border-subtle: #1d4099;
  467. --bs-secondary-border-subtle: #994d0a;
  468. --bs-success-border-subtle: #146a4c;
  469. --bs-info-border-subtle: #016c96;
  470. --bs-warning-border-subtle: #987013;
  471. --bs-danger-border-subtle: #992611;
  472. --bs-light-border-subtle: #484c83;
  473. --bs-dark-border-subtle: #494949;
  474. --bs-heading-color: #fff;
  475. --bs-link-color: #83a6ff;
  476. --bs-link-hover-color: #9cb8ff;
  477. --bs-link-color-rgb: 131, 166, 255;
  478. --bs-link-hover-color-rgb: 156, 184, 255;
  479. --bs-code-color: #e685b5;
  480. --bs-highlight-color: #8c96a9;
  481. --bs-highlight-bg: #664d03;
  482. --bs-border-color: #3a3b4d;
  483. --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
  484. --bs-form-valid-color: #75b798;
  485. --bs-form-valid-border-color: #75b798;
  486. --bs-form-invalid-color: #ea868f;
  487. --bs-form-invalid-border-color: #ea868f;
  488. }
  489. .uni-select__input-box {
  490. height: px2rpx(35);
  491. }
  492. .cwg-cursor {
  493. cursor: pointer;
  494. }
  495. body {
  496. min-height: 100vh;
  497. margin: 0 auto !important;
  498. font-size: px2rpx(12);
  499. line-height: 1;
  500. color: #fff;
  501. }
  502. .bg-body {
  503. --bs-bg-opacity: 1;
  504. background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity)) !important;
  505. }
  506. .uni-top-window {
  507. overflow: visible;
  508. }
  509. uni-left-window,
  510. uni-top-window {
  511. --bs-bg-opacity: 1;
  512. background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity)) !important;
  513. }
  514. uni-left-window {
  515. position: fixed;
  516. top: px2rpx(56);
  517. left: 0;
  518. z-index: 101;
  519. transition: width 281ms cubic-bezier(0.4, 0, 0.2, 1);
  520. }
  521. uni-button[type='primary'] {
  522. background-color: #cf1322 !important;
  523. }
  524. uni-content {
  525. padding-left: px2rpx(280) !important;
  526. }
  527. uni-left-window.collapsed {
  528. width: px2rpx(64) !important;
  529. white-space: nowrap;
  530. overflow: hidden;
  531. }
  532. uni-left-window.collapsed:hover {
  533. width: px2rpx(280) !important;
  534. white-space: nowrap;
  535. overflow: hidden;
  536. }
  537. uni-content.collapsed {
  538. padding-left: px2rpx(64) !important;
  539. }
  540. @media screen and (max-width: 1100px) {
  541. uni-left-window {
  542. width: px2rpx(64) !important;
  543. white-space: nowrap;
  544. overflow: hidden;
  545. }
  546. uni-left-window:hover {
  547. width: px2rpx(280) !important;
  548. }
  549. uni-content {
  550. padding-left: px2rpx(64) !important;
  551. }
  552. }
  553. @media screen and (max-width: 991px) {
  554. uni-left-window {
  555. width: px2rpx(0) !important;
  556. overflow: hidden;
  557. transition: width 281ms cubic-bezier(0.4, 0, 0.2, 1);
  558. white-space: nowrap;
  559. }
  560. uni-content {
  561. padding-left: px2rpx(0) !important;
  562. }
  563. uni-left-window:hover {
  564. width: px2rpx(280) !important;
  565. }
  566. }
  567. .search-btn {
  568. background-color: #cf1322 !important;
  569. }
  570. .body {
  571. position: absolute;
  572. box-sizing: border-box;
  573. width: 100%;
  574. // height: 100vh;
  575. // padding-bottom: var(--tabbar-height);
  576. height: 100vh;
  577. overflow-y: scroll;
  578. transition: all 0.4s;
  579. -webkit-overflow-scrolling: touch;
  580. &.is-tab {
  581. // height: calc(100vh - var(--tabbar-height));
  582. }
  583. }
  584. .wrap {
  585. position: relative;
  586. width: 100%;
  587. height: 100vh;
  588. overflow: hidden;
  589. }
  590. .global-loading {
  591. position: fixed;
  592. top: 0;
  593. left: 0;
  594. z-index: 999;
  595. display: flex;
  596. align-items: center;
  597. justify-content: center;
  598. width: 100vw;
  599. height: 100vh;
  600. background: var(--main-bg);
  601. }
  602. .router-loading {
  603. position: fixed;
  604. top: 0;
  605. left: 0;
  606. z-index: 1000;
  607. display: flex;
  608. align-items: center;
  609. justify-content: center;
  610. width: 100vw;
  611. height: 100vh;
  612. background: var(--main-bg);
  613. }
  614. .full-screen-loading {
  615. position: fixed;
  616. top: 0;
  617. left: 0;
  618. z-index: 1001;
  619. display: flex;
  620. align-items: center;
  621. justify-content: center;
  622. width: 100vw;
  623. height: 100vh;
  624. background: var(--main-bg);
  625. }
  626. .request-loading,
  627. .full-screen-loading {
  628. position: fixed;
  629. top: 50%;
  630. left: 50%;
  631. z-index: 1001;
  632. display: flex;
  633. flex-direction: column;
  634. align-items: center;
  635. justify-content: center;
  636. padding: px2rpx(16) px2rpx(24);
  637. background: rgb(0, 0, 0, 0.88);
  638. backdrop-filter: blur(4px);
  639. box-shadow: 0 4px 12px rgb(0, 0, 0, 0.15);
  640. transform: translate(-50%, -50%);
  641. animation: fadeIn 0.2s ease-in-out;
  642. .van-loading {
  643. margin-bottom: px2rpx(8);
  644. }
  645. .loading-text {
  646. font-size: px2rpx(14);
  647. font-weight: 500;
  648. color: #fff;
  649. text-shadow: 0 px2rpx(1) px2rpx(2) rgb(0, 0, 0, 0.1);
  650. letter-spacing: px2rpx(0.5);
  651. }
  652. &::after {
  653. position: absolute;
  654. inset: px2rpx(-1);
  655. z-index: -1;
  656. content: '';
  657. background: linear-gradient(45deg, rgb(255, 255, 255, 0.1), rgb(255, 255, 255, 0.05));
  658. border-radius: px2rpx(12);
  659. }
  660. }
  661. .full-screen-loading {
  662. width: 100vw;
  663. height: 100vh;
  664. }
  665. @keyframes fadeIn {
  666. from {
  667. opacity: 0;
  668. transform: translate(-50%, -48%);
  669. }
  670. to {
  671. opacity: 1;
  672. transform: translate(-50%, -50%);
  673. }
  674. }
  675. .load-more {
  676. margin: px2rpx(10) 0;
  677. }
  678. /* 通用样式 */
  679. .slide-left-enter,
  680. .slide-right-leave-active {
  681. opacity: 0;
  682. transform: translate(100%, 0);
  683. }
  684. .slide-left-leave-active,
  685. .slide-right-enter {
  686. opacity: 0;
  687. transform: translate(-100%, 0);
  688. }
  689. /* .fade-leave-active below version 2.1.8 */
  690. .fade-enter-active,
  691. .fade-leave-active {
  692. transition: opacity 0.5s;
  693. }
  694. .fade-enter,
  695. .fade-leave-to {
  696. opacity: 0;
  697. }
  698. /* start--文本行数限制--start */
  699. .u-line-1 {
  700. overflow: hidden;
  701. text-overflow: ellipsis;
  702. white-space: nowrap;
  703. }
  704. .u-line-2 {
  705. -webkit-line-clamp: 2;
  706. }
  707. .u-line-3 {
  708. -webkit-line-clamp: 3;
  709. }
  710. .u-line-4 {
  711. -webkit-line-clamp: 4;
  712. }
  713. .u-line-5 {
  714. -webkit-line-clamp: 5;
  715. }
  716. .u-line-2,
  717. .u-line-3,
  718. .u-line-4,
  719. .u-line-5 {
  720. display: flex;
  721. overflow: hidden;
  722. text-overflow: ellipsis;
  723. word-break: break-all;
  724. -webkit-box-orient: vertical; // 设置伸缩盒子元素排列方式
  725. }
  726. /* end--文本行数限制--end */
  727. /* start--Retina 屏幕下的 1px 边框--start */
  728. .u-border,
  729. .u-border-bottom,
  730. .u-border-left,
  731. .u-border-right,
  732. .u-border-top,
  733. .u-border-top-bottom {
  734. position: relative;
  735. }
  736. .u-border-bottom::after,
  737. .u-border-left::after,
  738. .u-border-right::after,
  739. .u-border-top-bottom::after,
  740. .u-border-top::after,
  741. .u-border::after {
  742. position: absolute;
  743. top: 0;
  744. left: 0;
  745. z-index: 2;
  746. box-sizing: border-box;
  747. // 多加0.1%,能解决有时候边框缺失的问题
  748. width: 199.8%;
  749. height: 199.7%;
  750. pointer-events: none;
  751. content: ' ';
  752. border: 0 solid #e4e7ed;
  753. transform: scale(0.5, 0.5);
  754. transform-origin: 0 0;
  755. }
  756. .u-border-top::after {
  757. border-top-width: 1PX;
  758. }
  759. .u-border-left::after {
  760. border-left-width: 1PX;
  761. }
  762. .u-border-right::after {
  763. border-right-width: 1PX;
  764. }
  765. .u-border-bottom::after {
  766. border-bottom-width: 1PX;
  767. }
  768. .u-border-top-bottom::after {
  769. border-width: 1PX 0;
  770. }
  771. .u-border::after {
  772. border-width: 1PX;
  773. }
  774. .cwg-button {
  775. width: 100%;
  776. .u-button {
  777. height: px2rpx(44) !important;
  778. font-size: var(--font-size-16);
  779. font-weight: bold;
  780. color: var(--black);
  781. background-color: #cf1322 !important;
  782. border: none !important;
  783. border-radius: px2rpx(100) !important;
  784. &:active {
  785. opacity: 0.9;
  786. }
  787. }
  788. }
  789. .fixed-btn {
  790. position: fixed;
  791. bottom: 0;
  792. left: 0;
  793. z-index: 1100;
  794. display: flex;
  795. flex-direction: column;
  796. align-items: center;
  797. justify-content: center;
  798. width: 100%;
  799. height: px2rpx(90);
  800. padding: px2rpx(21) px2rpx(30);
  801. color: var(--black);
  802. background-color: var(--black);
  803. box-shadow: 0 -1px 2px rgb(134, 134, 133, 0.25);
  804. box-sizing: border-box;
  805. }
  806. .cwg-upload {
  807. box-sizing: border-box;
  808. display: flex;
  809. flex-direction: column;
  810. align-items: center;
  811. justify-content: center;
  812. width: 100%;
  813. height: px2rpx(160);
  814. padding: px2rpx(16);
  815. border: 1px dashed #beb6b6;
  816. border-radius: px2rpx(4);
  817. .name {
  818. display: flex;
  819. align-items: center;
  820. font-size: px2rpx(16);
  821. font-weight: 600;
  822. line-height: px2rpx(44);
  823. color: #fff;
  824. text-align: center;
  825. }
  826. .back {
  827. display: flex;
  828. align-items: center;
  829. font-size: px2rpx(16);
  830. line-height: px2rpx(24);
  831. color: #474747;
  832. text-align: center;
  833. letter-spacing: 0.005em;
  834. }
  835. }
  836. .g {
  837. display: flex;
  838. img {
  839. height: px2rpx(50);
  840. }
  841. .g-l {
  842. flex: 1;
  843. margin-left: px2rpx(16);
  844. .g-item {
  845. display: flex;
  846. justify-content: space-between;
  847. margin-bottom: px2rpx(16);
  848. }
  849. .label {
  850. font-family: Roboto;
  851. font-size: px2rpx(14);
  852. font-style: normal;
  853. font-weight: 600;
  854. line-height: px2rpx(20);
  855. color: #fff;
  856. text-align: left;
  857. }
  858. .v {
  859. font-family: Roboto;
  860. font-size: px2rpx(14);
  861. font-style: normal;
  862. font-weight: 600;
  863. line-height: px2rpx(20);
  864. color: #fff;
  865. text-align: center;
  866. }
  867. }
  868. }
  869. .fixed-right {
  870. position: fixed;
  871. top: px2rpx(4);
  872. right: px2rpx(10);
  873. z-index: 100;
  874. display: flex;
  875. align-items: center;
  876. justify-content: center;
  877. width: px2rpx(40);
  878. height: px2rpx(40);
  879. color: var(--main-yellow);
  880. cursor: pointer;
  881. i {
  882. display: flex;
  883. align-items: center;
  884. justify-content: center;
  885. width: px2rpx(20);
  886. height: px2rpx(20);
  887. font-size: px2rpx(14);
  888. color: var(--main-yellow);
  889. }
  890. &:hover {
  891. opacity: 0.8;
  892. }
  893. }
  894. .status-default {
  895. display: flex;
  896. gap: px2rpx(10);
  897. align-items: center;
  898. justify-content: center;
  899. padding: px2rpx(4) px2rpx(8);
  900. font-family: Roboto;
  901. font-size: px2rpx(12);
  902. font-style: normal;
  903. font-weight: 600;
  904. line-height: px2rpx(16);
  905. color: #009deb;
  906. letter-spacing: px2rpx(0.06);
  907. background: rgb(0, 157, 235, 0.2);
  908. border: 0 solid #f4f4f4;
  909. border-radius: px2rpx(9999);
  910. }
  911. .status-success {
  912. color: #4caf50;
  913. background: rgb(76, 175, 80, 0.2);
  914. }
  915. .status-error {
  916. color: #d32f2f;
  917. background: rgb(211, 47, 47, 0.21);
  918. }
  919. .status-views {
  920. display: flex;
  921. align-items: center;
  922. justify-content: center;
  923. width: px2rpx(65.063);
  924. // height: 36px;
  925. padding: px2rpx(8) px2rpx(16);
  926. font-family: Roboto;
  927. font-size: px2rpx(14);
  928. font-style: normal;
  929. font-weight: 600;
  930. line-height: px2rpx(20);
  931. color: #fff;
  932. text-align: center;
  933. letter-spacing: px2rpx(0.07);
  934. background: #ea002a;
  935. border-radius: px2rpx(10);
  936. }
  937. .ellipsis {
  938. width: 100%;
  939. overflow: hidden;
  940. text-overflow: ellipsis;
  941. white-space: nowrap;
  942. }
  943. .custom-toast {
  944. top: 40%;
  945. display: flex;
  946. flex-direction: column;
  947. gap: px2rpx(16);
  948. align-items: center;
  949. width: px2rpx(348);
  950. padding: px2rpx(32) px2rpx(24);
  951. background: #fff;
  952. border-radius: px2rpx(20);
  953. box-shadow: 0 4px 12px rgb(0, 0, 0, 0.1);
  954. .van-icon__image {
  955. width: px2rpx(88);
  956. height: px2rpx(88);
  957. }
  958. .van-toast__text {
  959. font-family: Roboto;
  960. font-size: px2rpx(14);
  961. font-style: normal;
  962. font-weight: 400;
  963. line-height: px2rpx(20);
  964. color: #474747;
  965. text-align: center;
  966. letter-spacing: px2rpx(0.07);
  967. }
  968. }
  969. .page-header {
  970. position: fixed;
  971. top: calc(var(--secure-height, 0px) + env(safe-area-inset-top));
  972. left: 0;
  973. z-index: 13;
  974. display: flex;
  975. align-items: center;
  976. width: 100%;
  977. height: px2rpx(60);
  978. font-size: var(--font-size-22);
  979. font-weight: 700;
  980. color: var(--white);
  981. text-align: left;
  982. background: #fff;
  983. }
  984. .u-form-item__body {
  985. padding: 0 !important;
  986. }
  987. .u-form-item__body__right__message {
  988. margin-left: 10px !important;
  989. }
  990. .filter-picker {
  991. background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity)) !important;
  992. border: 1px solid #e5e7eb;
  993. border-radius: px2rpx(8);
  994. padding: px2rpx(6);
  995. display: flex;
  996. align-items: center;
  997. min-width: px2rpx(60);
  998. max-width: px2rpx(120);
  999. flex-shrink: 1;
  1000. overflow: hidden;
  1001. div {
  1002. width: 100% !important;
  1003. }
  1004. }
  1005. .picker-value {
  1006. display: flex;
  1007. align-items: center;
  1008. gap: px2rpx(4);
  1009. width: 100%;
  1010. }
  1011. .picker-text {
  1012. min-width: px2rpx(60);
  1013. max-width: px2rpx(100);
  1014. font-size: px2rpx(12);
  1015. color: #111827;
  1016. overflow: hidden;
  1017. text-overflow: ellipsis;
  1018. white-space: nowrap;
  1019. }
  1020. .picker-icon {
  1021. flex-shrink: 0;
  1022. width: px2rpx(14);
  1023. height: px2rpx(14);
  1024. }
  1025. .status-badge {
  1026. display: flex;
  1027. align-items: center;
  1028. gap: px2rpx(4);
  1029. padding: px2rpx(3) px2rpx(8) px2rpx(3) px2rpx(3);
  1030. border-radius: px2rpx(12);
  1031. }
  1032. .filter-select {
  1033. background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity)) !important;
  1034. border: 1px solid #e5e7eb;
  1035. border-radius: px2rpx(8);
  1036. padding: px2rpx(6);
  1037. display: flex;
  1038. align-items: center;
  1039. min-width: px2rpx(90);
  1040. max-width: px2rpx(120);
  1041. flex-shrink: 1;
  1042. // overflow: hidden;
  1043. div {
  1044. // width: 100% !important;
  1045. }
  1046. .uni-select {
  1047. width: 100% !important;
  1048. padding: 0 !important;
  1049. border: none !important;
  1050. min-height: px2rpx(14) !important;
  1051. }
  1052. .uni-select__selector {
  1053. min-width: 100px !important;
  1054. max-width: 300px !important;
  1055. width: max-content !important;
  1056. }
  1057. .uni-select__selector-item {
  1058. white-space: nowrap !important;
  1059. padding: 0 12px !important;
  1060. }
  1061. .uni-select__input-text {
  1062. color: var(--bs-body-color);
  1063. font-size: 12px;
  1064. margin: 1px 0;
  1065. padding: 0 !important;
  1066. }
  1067. .padding-top-bottom {
  1068. padding: 0 !important;
  1069. }
  1070. }
  1071. .uni-date-x,
  1072. .uni-select__input-text {
  1073. color: var(--bs-body-color) !important;
  1074. }
  1075. // 公共title样式
  1076. .content-title {
  1077. width: 100%;
  1078. min-height: px2rpx(40);
  1079. line-height: px2rpx(40);
  1080. box-sizing: border-box;
  1081. color: var(--color-navy-900);
  1082. // color: var(--color-white);
  1083. // background-color: var(--color-navy-900);
  1084. font-size: px2rpx(20);
  1085. font-weight: bold;
  1086. }
  1087. .s-btn {
  1088. &.reselect {
  1089. background-color: var(--color-zinc-100);
  1090. color: var(--color-navy-700);
  1091. border: none;
  1092. font-size: px2rpx(14);
  1093. padding: px2rpx(8) px2rpx(20);
  1094. border-radius: px2rpx(8);
  1095. &:active {
  1096. background-color: var(--color-zinc-200);
  1097. }
  1098. }
  1099. &[type="primary"] {
  1100. width: 100%;
  1101. height: px2rpx(48);
  1102. background-color: #cf1322;
  1103. color: #fff;
  1104. border-radius: px2rpx(12);
  1105. font-size: px2rpx(16);
  1106. font-weight: 600;
  1107. display: flex;
  1108. align-items: center;
  1109. justify-content: center;
  1110. border: none;
  1111. margin-top: px2rpx(30);
  1112. transition: all 0.2s;
  1113. &:active {
  1114. transform: scale(0.98);
  1115. background-color: #cf1322;
  1116. }
  1117. }
  1118. }
  1119. .search-bar {
  1120. display: flex;
  1121. align-items: center;
  1122. justify-content: flex-start;
  1123. flex-wrap: wrap;
  1124. gap: px2rpx(16);
  1125. // margin: px2rpx(16) 0;
  1126. .cwg-combox,
  1127. .uni-easyinput,
  1128. .uni-date {
  1129. width: px2rpx(224) !important;
  1130. flex: none !important;
  1131. }
  1132. .s-btn {
  1133. width: px2rpx(224);
  1134. background-color: var(--color-error);
  1135. color: var(--color-white);
  1136. padding: px2rpx(10) px2rpx(20);
  1137. border: none;
  1138. font-size: px2rpx(15);
  1139. text-align: center;
  1140. cursor: pointer;
  1141. box-sizing: border-box;
  1142. }
  1143. }
  1144. :deep(.uni-row1) {
  1145. width: 100%;
  1146. // margin: 0 px2rpx(-10) !important;
  1147. box-sizing: border-box;
  1148. .uni-col {
  1149. padding: 0 px2rpx(10) !important;
  1150. box-sizing: border-box;
  1151. }
  1152. .base-info-form>span {
  1153. display: contents;
  1154. }
  1155. .uni-forms-item {
  1156. min-height: px2rpx(79);
  1157. margin-bottom: px2rpx(10);
  1158. }
  1159. .uni-select,
  1160. .uni-combox,
  1161. .uni-easyinput__content,
  1162. .uni-date-editor--x {
  1163. border: none !important;
  1164. background-color: var(--color-zinc-100) !important;
  1165. }
  1166. .uni-date-x {
  1167. border: none !important;
  1168. background-color: rgba(195, 195, 195, 0) !important;
  1169. }
  1170. .uni-easyinput__content {
  1171. padding: 0 !important;
  1172. }
  1173. .checklist-text {
  1174. color: #666 !important;
  1175. }
  1176. .checklist-box.is--default.is-checked .checkbox__inner {
  1177. border-color: var(--color-error) !important;
  1178. background-color: var(--color-error) !important;
  1179. }
  1180. }
  1181. :deep(.uni-row2) {
  1182. .uni-select,
  1183. .uni-combox,
  1184. .uni-easyinput__content,
  1185. .uni-date-editor--x {
  1186. border: 1px solid var(--color-slate-300) !important;
  1187. background-color: rgba(195, 195, 195, 0) !important;
  1188. }
  1189. .uni-date-x {
  1190. background-color: rgba(195, 195, 195, 0) !important;
  1191. }
  1192. }
  1193. .bg-secondary {
  1194. background-color: var(--color-secondary) !important;
  1195. border: 1px solid #333333;
  1196. color: var(--color-white);
  1197. }
  1198. .underline {
  1199. text-decoration: underline;
  1200. text-decoration-color: currentColor;
  1201. text-underline-offset: px2rpx(2);
  1202. cursor: pointer;
  1203. }
  1204. .info-card {
  1205. // margin-top: px2rpx(4);
  1206. // border-radius: px2rpx(8);
  1207. // background-color: white;
  1208. // padding: px2rpx(8);
  1209. // box-shadow: 0 0 px2rpx(8) rgba(0, 0, 0, 0.1);
  1210. // box-shadow:
  1211. // 0 0 px2rpx(4) rgba(0, 0, 0, 0.06),
  1212. // 0 px2rpx(6) px2rpx(12) rgba(0, 0, 0, 0.08);
  1213. box-sizing: border-box;
  1214. // padding: px2rpx(20);
  1215. // border: 1px solid rgba(108, 133, 149, 0.12);
  1216. border-radius: px2rpx(8);
  1217. }
  1218. .crm-title-box {
  1219. background-color: var(--color-gray-second);
  1220. color: var(--color-white);
  1221. height: 40px;
  1222. display: flex;
  1223. justify-content: space-between;
  1224. align-items: center;
  1225. margin-bottom: 10px;
  1226. border-radius: 2px;
  1227. padding: 0 20px;
  1228. .tit {
  1229. font-size: 14px;
  1230. font-weight: bold;
  1231. color: var(--color-white);
  1232. }
  1233. }
  1234. .status-box {
  1235. display: flex;
  1236. align-items: center;
  1237. gap: px2rpx(4);
  1238. }
  1239. @media screen and (max-width: 991px) {
  1240. .info-card {
  1241. box-sizing: border-box;
  1242. // padding: px2rpx(20);
  1243. border: 0 !important;
  1244. border-radius: 0 !important;
  1245. }
  1246. .status-box {
  1247. display: flex;
  1248. flex-direction: column;
  1249. gap: px2rpx(4);
  1250. }
  1251. }
  1252. // 状态标签基础样式
  1253. .status-badge {
  1254. display: inline-flex;
  1255. align-items: center;
  1256. padding: 4rpx 12rpx;
  1257. border-radius: 4rpx;
  1258. font-size: var(--font-size-24);
  1259. font-weight: 500;
  1260. line-height: 1.5;
  1261. white-space: nowrap;
  1262. transition: all var(--default-transition-duration) var(--default-transition-timing-function);
  1263. // 当有取消按钮时调整右边距
  1264. &.has-cancel {
  1265. margin-right: 8rpx;
  1266. }
  1267. }
  1268. // 状态标签基础样式
  1269. .status-tag {
  1270. display: inline-block;
  1271. padding: px2rpx(4) px2rpx(8);
  1272. border-radius: px2rpx(2);
  1273. font-size: px2rpx(15);
  1274. text-align: center;
  1275. min-width: px2rpx(80);
  1276. box-sizing: border-box;
  1277. }
  1278. // 待处理
  1279. .status-pending {
  1280. background-color: #fef3c7;
  1281. color: #d97706;
  1282. }
  1283. // 处理中
  1284. .status-processing {
  1285. background-color: #a9d3ee;
  1286. color: #0284c7;
  1287. }
  1288. // 成功
  1289. .status-success {
  1290. background-color: #a3f7c0;
  1291. color: #16a34a;
  1292. }
  1293. // 失败
  1294. .status-failed {
  1295. background-color: #f39c9c;
  1296. color: #dc2626;
  1297. }
  1298. // 取消 / 已取消
  1299. .status-cancelled {
  1300. background-color: #a4bef2;
  1301. color: #4b5563;
  1302. }
  1303. // 已过期
  1304. .status-expired,
  1305. .status-canceled {
  1306. background-color: #f5efb1;
  1307. color: #a16207;
  1308. }
  1309. // 已完成
  1310. .status-completed {
  1311. background-color: #d1fae5;
  1312. color: #059669;
  1313. }
  1314. // // 待处理
  1315. // .status-warning {
  1316. // background-color: var(--status-warning-bg);
  1317. // color: var(--status-warning-text);
  1318. // }
  1319. // // 已完成
  1320. // .status-success {
  1321. // background-color: var(--status-success-bg);
  1322. // color: var(--status-success-text);
  1323. // }
  1324. // // 进行中
  1325. // .status-processing {
  1326. // background-color: var(--status-processing-bg);
  1327. // color: var(--status-processing-text);
  1328. // }
  1329. // // 已拒绝
  1330. // .status-danger {
  1331. // background-color: var(--status-danger-bg);
  1332. // color: var(--status-danger-text);
  1333. // }
  1334. // // 已过期
  1335. // .status-expired {
  1336. // background-color: var(--status-expired-bg);
  1337. // color: var(--status-expired-text);
  1338. // }
  1339. // // 已取消
  1340. // .status-cancelled {
  1341. // background-color: var(--status-cancelled-bg);
  1342. // color: var(--status-cancelled-text);
  1343. // }
  1344. // 取消按钮容器
  1345. .cancel-btn-wrapper {
  1346. display: inline-flex;
  1347. align-items: center;
  1348. }
  1349. // 取消按钮样式
  1350. .cancel-btn {
  1351. display: inline-flex;
  1352. align-items: center;
  1353. padding: 4rpx 12rpx;
  1354. border-radius: 4rpx;
  1355. font-size: var(--font-size-24);
  1356. font-weight: 500;
  1357. line-height: 1.5;
  1358. color: var(--color-rose-500);
  1359. background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity)) !important;
  1360. border: 1px solid var(--color-rose-500);
  1361. cursor: pointer;
  1362. transition: all var(--default-transition-duration) var(--default-transition-timing-function);
  1363. white-space: nowrap;
  1364. &:hover {
  1365. color: var(--color-white);
  1366. background-color: var(--color-rose-500);
  1367. border-color: var(--color-rose-500);
  1368. }
  1369. // 添加点击效果
  1370. &:active {
  1371. transform: scale(0.95);
  1372. }
  1373. }
  1374. .pc-header-btn {
  1375. width: px2rpx(40);
  1376. height: px2rpx(40);
  1377. border-radius: px2rpx(4);
  1378. border: 1px solid rgba(108, 133, 149, 0);
  1379. display: flex;
  1380. align-items: center;
  1381. font-size: px2rpx(14);
  1382. cursor: pointer;
  1383. display: flex;
  1384. justify-content: center;
  1385. align-items: center;
  1386. &:hover {
  1387. background: rgba(108, 133, 149, 0.12);
  1388. border-color: rgb(145, 163, 176);
  1389. }
  1390. }
  1391. .popup-content {
  1392. // padding: px2rpx(30) px2rpx(20);
  1393. text-align: center;
  1394. min-width: px2rpx(250);
  1395. @media screen and (max-width: 991px) {
  1396. // min-width: 80%;
  1397. // max-width: 90%;
  1398. // margin: 0 px2rpx(10);
  1399. }
  1400. position: relative;
  1401. .icon {
  1402. .iconfont {
  1403. font-size: px2rpx(60);
  1404. display: block;
  1405. margin: 0 auto;
  1406. }
  1407. .icon-chenggong {
  1408. color: #67c23a;
  1409. }
  1410. .icon-jingshi {
  1411. color: #f56c6c;
  1412. }
  1413. .icon-dengdai {
  1414. color: #e6a23c;
  1415. }
  1416. }
  1417. .des1 {
  1418. font-weight: 600;
  1419. font-size: px2rpx(16);
  1420. margin: px2rpx(20) 0 px2rpx(15);
  1421. color: #303133;
  1422. line-height: 1.4;
  1423. padding: 0 px2rpx(10);
  1424. }
  1425. .des2 {
  1426. font-size: px2rpx(14);
  1427. margin: px2rpx(15) 0 px2rpx(15);
  1428. color: #303133;
  1429. line-height: 1.4;
  1430. padding: 0 px2rpx(10);
  1431. }
  1432. }
  1433. .dialog-footer {
  1434. padding: px2rpx(20) px2rpx(30) px2rpx(30);
  1435. border-top: 1px solid #f0f0f0;
  1436. .btn-content {
  1437. // 双按钮模式
  1438. &:not(:has(button:only-child)):has(button) {
  1439. display: flex;
  1440. justify-content: center;
  1441. gap: px2rpx(20);
  1442. }
  1443. // 单按钮模式
  1444. &:has(button:only-child) {
  1445. display: flex;
  1446. justify-content: center;
  1447. }
  1448. }
  1449. .footer-line {
  1450. height: 1px;
  1451. background-color: #f0f0f0;
  1452. margin: px2rpx(-20) 0 0;
  1453. }
  1454. button {
  1455. min-width: px2rpx(120);
  1456. height: px2rpx(40);
  1457. border-radius: px2rpx(4);
  1458. font-size: px2rpx(16);
  1459. display: flex;
  1460. align-items: center;
  1461. justify-content: center;
  1462. border: none;
  1463. cursor: pointer;
  1464. transition: all 0.3s ease;
  1465. margin: 0;
  1466. &:active {
  1467. opacity: 0.8;
  1468. transform: scale(0.98);
  1469. }
  1470. &:disabled {
  1471. opacity: 0.5;
  1472. cursor: not-allowed;
  1473. }
  1474. }
  1475. .cancel-btn {
  1476. background-color: #f5f5f5;
  1477. color: #666;
  1478. &:active {
  1479. background-color: #e8e8e8;
  1480. }
  1481. }
  1482. .confirm-btn {
  1483. &.primary {
  1484. background-color: #cf1322;
  1485. color: #fff;
  1486. &:active {
  1487. background-color: #0056b3;
  1488. }
  1489. }
  1490. &.danger {
  1491. background-color: #ff6b6b;
  1492. color: #fff;
  1493. &:active {
  1494. background-color: #ff5252;
  1495. }
  1496. }
  1497. }
  1498. .single-btn {
  1499. min-width: px2rpx(200);
  1500. &.primary {
  1501. background-color: #cf1322;
  1502. color: #fff;
  1503. }
  1504. &.danger {
  1505. background-color: #ff6b6b;
  1506. color: #fff;
  1507. }
  1508. &.default {
  1509. background-color: #f5f5f5;
  1510. color: #666;
  1511. }
  1512. }
  1513. }
  1514. .wait-popup {
  1515. .des1 {
  1516. margin-top: px2rpx(10);
  1517. }
  1518. .icon {
  1519. .iconfont {
  1520. animation: spin 1s linear infinite;
  1521. }
  1522. }
  1523. }
  1524. // 适配不同屏幕尺寸(媒体查询中的 750rpx 保持不变)
  1525. @media (max-width: 750rpx) {
  1526. .popup-content {
  1527. .icon {
  1528. .iconfont {
  1529. font-size: px2rpx(50);
  1530. }
  1531. }
  1532. .des1 {
  1533. font-size: px2rpx(14);
  1534. margin: px2rpx(15) 0 px2rpx(10);
  1535. }
  1536. .des2 {
  1537. font-size: px2rpx(13);
  1538. margin: px2rpx(15) 0 px2rpx(10);
  1539. }
  1540. .dialog-footer {
  1541. button {
  1542. min-width: px2rpx(80);
  1543. font-size: px2rpx(13);
  1544. }
  1545. }
  1546. }
  1547. }
  1548. .clause-content {
  1549. max-height: px2rpx(500);
  1550. overflow-y: auto;
  1551. text-align: left;
  1552. line-height: 1.6;
  1553. .h4 {
  1554. font-size: px2rpx(16);
  1555. font-weight: bold;
  1556. margin: px2rpx(16) 0;
  1557. }
  1558. .list {
  1559. .list-item {
  1560. margin-bottom: px2rpx(12);
  1561. }
  1562. }
  1563. .table-container {
  1564. width: 100%;
  1565. overflow-x: auto;
  1566. margin: px2rpx(16) 0;
  1567. .table {
  1568. display: table;
  1569. width: 100%;
  1570. table-layout: fixed;
  1571. border: 1px solid #e4e7ed;
  1572. box-sizing: border-box;
  1573. .tr {
  1574. display: table-row;
  1575. }
  1576. .th,
  1577. .td {
  1578. display: table-cell;
  1579. width: calc(100% / 6);
  1580. padding: px2rpx(8);
  1581. text-align: center;
  1582. border-right: 1px solid #e4e7ed;
  1583. border-bottom: 1px solid #e4e7ed;
  1584. &:last-child {
  1585. border-right: none;
  1586. }
  1587. }
  1588. .tr:last-child .td,
  1589. .tr:last-child .th {
  1590. border-bottom: none;
  1591. }
  1592. }
  1593. }
  1594. }
  1595. .crm-cursor {
  1596. cursor: pointer;
  1597. }
  1598. ::selection {
  1599. background-color: var(--bs-secondary);
  1600. color: #fff;
  1601. }