themeColor.scss 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690
  1. // 经典红 a
  2. $a-m: #ff4544;
  3. $a-s: #f39800;
  4. // 活力黄 b
  5. $b-m: #fcc600;
  6. $b-s: #555555;
  7. // 浪漫粉 c
  8. $c-m: #ff547b;
  9. $c-s: #ffe6e8;
  10. // 流光金 d
  11. $d-m: #ddb766;
  12. $d-s: #f0ebd8;
  13. // 优雅紫 e
  14. $e-m: #7783ea;
  15. $e-s: #e9ebff;
  16. // 品味红 f
  17. $f-m: #ff4544;
  18. $f-s: #555555;
  19. // 清醒绿 g
  20. $g-m: #63be72;
  21. $g-s: #e1f4e3;
  22. // 商务蓝 h
  23. $h-m: #4a90e2;
  24. $h-s: #dbe9f9;
  25. // 纯粹黑 i
  26. $i-m: #333333;
  27. $i-s: #dedede;
  28. // 忧郁红 j
  29. $j-m: #ff4544;
  30. $j-s: #ffdada;
  31. // 热情红 j
  32. $k-m: #ff6699;
  33. $k-s: #9999ff;
  34. // 商城管理蓝 q
  35. $app-admin-main-color: #446dfd;
  36. // 通用的浅灰色
  37. $app-light-gray-color: #f7f7f7;
  38. // 文字颜色
  39. .admin.admin-m-text {
  40. color: $app-admin-main-color;
  41. }
  42. .a.a-m-text {
  43. color: $a-m;
  44. }
  45. .a.a-s-text {
  46. color: $a-s;
  47. }
  48. .b.b-m-text {
  49. color: $b-m;
  50. }
  51. .b.b-s-text {
  52. color: $b-s;
  53. }
  54. .c.c-m-text {
  55. color: $c-m;
  56. }
  57. .c.c-s-text {
  58. color: $c-s;
  59. }
  60. .d.d-m-text {
  61. color: $d-m;
  62. }
  63. .d.d-s-text {
  64. color: $d-s;
  65. }
  66. .e.e-m-text {
  67. color: $e-m;
  68. }
  69. .e.e-s-text {
  70. color: $e-s;
  71. }
  72. .f.f-m-text {
  73. color: $f-m;
  74. }
  75. .f.f-s-text {
  76. color: $f-s;
  77. }
  78. .g.g-m-text {
  79. color: $g-m;
  80. }
  81. .g.g-s-text {
  82. color: $g-s;
  83. }
  84. .h.h-m-text {
  85. color: $h-m;
  86. }
  87. .h.h-s-text {
  88. color: $h-s;
  89. }
  90. .i.i-m-text {
  91. color: $i-m;
  92. }
  93. .i.i-s-text {
  94. color: $i-s;
  95. }
  96. .j.j-m-text {
  97. color: $j-m;
  98. }
  99. .j.j-s-text {
  100. color: $j-s;
  101. }
  102. .k.k-m-text {
  103. color: $k-m;
  104. }
  105. .k.k-s-text {
  106. color: $k-s;
  107. }
  108. // 背景色
  109. .a.a-m-back {
  110. background-color: $a-m;
  111. }
  112. .a.a-s-back {
  113. background-color: $a-s;
  114. }
  115. .b.b-m-back {
  116. background-color: $b-m;
  117. }
  118. .b.b-s-back {
  119. background-color: $b-s;
  120. }
  121. .c.c-m-back {
  122. background-color: $c-m;
  123. }
  124. .c.c-s-back {
  125. background-color: $c-s;
  126. }
  127. .d.d-m-back {
  128. background-color: $d-m;
  129. }
  130. .d.d-s-back {
  131. background-color: $d-s;
  132. }
  133. .e.e-m-back {
  134. background-color: $e-m;
  135. }
  136. .e.e-s-back {
  137. background-color: $e-s;
  138. }
  139. .f.f-m-back {
  140. background-color: $f-m;
  141. }
  142. .f.f-s-back {
  143. background-color: $f-s;
  144. }
  145. .g.g-m-back {
  146. background-color: $g-m;
  147. }
  148. .g.g-s-back {
  149. background-color: $g-s;
  150. }
  151. .h.h-m-back {
  152. background-color: $h-m;
  153. }
  154. .h.h-s-back {
  155. background-color: $h-s;
  156. }
  157. .i.i-m-back {
  158. background-color: $i-m;
  159. }
  160. .i.i-s-back {
  161. background-color: $i-s;
  162. }
  163. .j.j-m-back {
  164. background-color: $j-m;
  165. }
  166. .j.j-s-back {
  167. background-color: $j-s;
  168. }
  169. .k.k-m-back {
  170. background-color: $k-m;
  171. }
  172. .k.k-s-back {
  173. background-color: $k-s;
  174. }
  175. .admin.admin-m-back {
  176. background-color: $app-admin-main-color;
  177. }
  178. .app-light-gray-back {
  179. background-color: $app-light-gray-color;
  180. }
  181. // 背景色
  182. .a.a-m-back-o {
  183. background: rgba(255,69,68, 0.1);
  184. }
  185. .b.b-m-back-o {
  186. background: rgba(252,198,0, 0.1);
  187. }
  188. .c.c-m-back-o {
  189. background: rgba(255,84,123, 0.1);
  190. }
  191. .d.d-m-back-o {
  192. background: rgba(221,183,102, 0.1);
  193. }
  194. .e.e-m-back-o {
  195. background: rgba(119,131,234, 0.1);
  196. }
  197. .f.f-m-back-o {
  198. background: rgba(255,69,68, 0.1);
  199. }
  200. .g.g-m-back-o {
  201. background: rgba(99,190,114, 0.1);
  202. }
  203. .h.h-m-back-o {
  204. background: rgba(74,144,226, 0.1);
  205. }
  206. .i.i-m-back-o {
  207. background: rgba(51,51,51, 0.1);
  208. }
  209. .j.j-m-back-o {
  210. background: rgba(255,69,68, 0.1);
  211. }
  212. .k.k-m-back-o {
  213. background: rgba(255,102,153, 0.1);
  214. }
  215. // 背景色
  216. .a.a-m-back-p {
  217. background: rgba(255,69,68, 0.2);
  218. }
  219. .b.b-m-back-p {
  220. background: rgba(252,198,0, 0.2);
  221. }
  222. .c.c-m-back-p {
  223. background: rgba(255,84,123, 0.2);
  224. }
  225. .d.d-m-back-p {
  226. background: rgba(221,183,102, 0.2);
  227. }
  228. .e.e-m-back-p {
  229. background: rgba(119,131,234, 0.2);
  230. }
  231. .f.f-m-back-p {
  232. background: rgba(255,69,68, 0.2);
  233. }
  234. .g.g-m-back-p {
  235. background: rgba(99,190,114, 0.2);
  236. }
  237. .h.h-m-back-p {
  238. background: rgba(74,144,226, 0.2);
  239. }
  240. .i.i-m-back-p {
  241. background: rgba(51,51,51, 0.2);
  242. }
  243. .j.j-m-back-p {
  244. background: rgba(255,69,68, 0.2);
  245. }
  246. .k.k-m-back-p {
  247. background: rgba(255,102,153, 0.2);
  248. }
  249. // 背景色
  250. .a.a-m-back-l {
  251. background: rgba(255,69,68, 0.35);
  252. }
  253. .b.b-m-back-l {
  254. background: rgba(252,198,0, 0.35);
  255. }
  256. .c.c-m-back-l {
  257. background: rgba(255,84,123, 0.35);
  258. }
  259. .d.d-m-back-l {
  260. background: rgba(221,183,102, 0.35);
  261. }
  262. .e.e-m-back-l {
  263. background: rgba(119,131,234, 0.35);
  264. }
  265. .f.f-m-back-l {
  266. background: rgba(255,69,68, 0.35);
  267. }
  268. .g.g-m-back-l {
  269. background: rgba(99,190,114, 0.35);
  270. }
  271. .h.h-m-back-l {
  272. background: rgba(74,144,226, 0.35);
  273. }
  274. .i.i-m-back-l {
  275. background: rgba(51,51,51, 0.35);
  276. }
  277. .j.j-m-back-l {
  278. background: rgba(255,69,68, 0.35);
  279. }
  280. .k.k-m-back-l {
  281. background: rgba(255,102,153, 0.35);
  282. }
  283. // 背景色
  284. .a.a-m-back-q {
  285. background: rgba(255,69,68, 0.8);
  286. }
  287. .b.b-m-back-q {
  288. background: rgba(252,198,0, 0.8);
  289. }
  290. .c.c-m-back-q {
  291. background: rgba(255,84,123, 0.8);
  292. }
  293. .d.d-m-back-q {
  294. background: rgba(221,183,102, 0.8);
  295. }
  296. .e.e-m-back-q {
  297. background: rgba(119,131,234, 0.8);
  298. }
  299. .f.f-m-back-q {
  300. background: rgba(255,69,68, 0.8);
  301. }
  302. .g.g-m-back-q {
  303. background: rgba(99,190,114, 0.8);
  304. }
  305. .h.h-m-back-q {
  306. background: rgba(74,144,226, 0.8);
  307. }
  308. .i.i-m-back-q {
  309. background: rgba(51,51,51, 0.8);
  310. }
  311. .j.j-m-back-q {
  312. background: rgba(255,69,68, 0.8);
  313. }
  314. .j.j-m-back-q {
  315. background: rgba(255,102,153, 0.8);
  316. }
  317. // 边框颜色 (秒杀)
  318. .a .a.a-m-border-m{
  319. border-color: $a-m;
  320. border-bottom-color: transparent;
  321. border-left-color: transparent;
  322. border-right-color: transparent;
  323. }
  324. .a .a.a-s-border-m {
  325. border-color: $a-s;
  326. border-bottom-color: transparent;
  327. border-left-color: transparent;
  328. border-right-color: transparent;
  329. }
  330. .b .b.b-m-border-m {
  331. border-color: $b-m;
  332. border-bottom-color: transparent;
  333. border-left-color: transparent;
  334. border-right-color: transparent;
  335. }
  336. .b .b.b-s-border-m {
  337. border-color: $b-s;
  338. border-bottom-color: transparent;
  339. border-left-color: transparent;
  340. border-right-color: transparent;
  341. }
  342. .c .c.c-m-border-m {
  343. border-color: $c-m;
  344. border-bottom-color: transparent;
  345. border-left-color: transparent;
  346. border-right-color: transparent;
  347. }
  348. .c .c.c-s-border-m {
  349. border-color: $c-s;
  350. border-bottom-color: transparent;
  351. border-left-color: transparent;
  352. border-right-color: transparent;
  353. }
  354. .d .d.d-m-border-m {
  355. border-color: $d-m;
  356. border-bottom-color: transparent;
  357. border-left-color: transparent;
  358. border-right-color: transparent;
  359. }
  360. .d .d.d-s-border-m {
  361. border-color: $d-s;
  362. border-bottom-color: transparent;
  363. border-left-color: transparent;
  364. border-right-color: transparent;
  365. }
  366. .e .e.e-m-border-m {
  367. border-color: $e-m;
  368. border-bottom-color: transparent;
  369. border-left-color: transparent;
  370. border-right-color: transparent;
  371. }
  372. .e .e.e-s-border-m {
  373. border-color: $e-s;
  374. border-bottom-color: transparent;
  375. border-left-color: transparent;
  376. border-right-color: transparent;
  377. }
  378. .f .f.f-m-border-m {
  379. border-color: $f-m;
  380. border-bottom-color: transparent;
  381. border-left-color: transparent;
  382. border-right-color: transparent;
  383. }
  384. .f .f.f-s-border-m {
  385. border-color: $f-s;
  386. border-bottom-color: transparent;
  387. border-left-color: transparent;
  388. border-right-color: transparent;
  389. }
  390. .g .g.g-m-border-m {
  391. border-color: $g-m;
  392. border-bottom-color: transparent;
  393. border-left-color: transparent;
  394. border-right-color: transparent;
  395. }
  396. .g .g.g-s-border-m {
  397. border-color: $g-s;
  398. border-bottom-color: transparent;
  399. border-left-color: transparent;
  400. border-right-color: transparent;
  401. }
  402. .h .h.h-m-border-m {
  403. border-color: $h-m;
  404. border-bottom-color: transparent;
  405. border-left-color: transparent;
  406. border-right-color: transparent;
  407. }
  408. .h .h.h-s-border-m {
  409. border-color: $h-s;
  410. border-bottom-color: transparent;
  411. border-left-color: transparent;
  412. border-right-color: transparent;
  413. }
  414. .i .i-m-border-m {
  415. border-color: $i-m;
  416. border-bottom-color: transparent;
  417. border-left-color: transparent;
  418. border-right-color: transparent;
  419. }
  420. .i .i.i-s-border-m {
  421. border-color: $i-s;
  422. border-bottom-color: transparent;
  423. border-left-color: transparent;
  424. border-right-color: transparent;
  425. }
  426. .j .j.j-m-border-m {
  427. border-color: $j-m;
  428. border-bottom-color: transparent;
  429. border-left-color: transparent;
  430. border-right-color: transparent;
  431. }
  432. .j .j.j-s-border-m {
  433. border-color: $j-s;
  434. border-bottom-color: transparent;
  435. border-left-color: transparent;
  436. border-right-color: transparent;
  437. }
  438. .k .k.k-s-border-m {
  439. border-color: $k-s;
  440. border-bottom-color: transparent;
  441. border-left-color: transparent;
  442. border-right-color: transparent;
  443. }
  444. // 边框颜色
  445. .admin .admin.admin-m-border{
  446. border-color: $app-admin-main-color;
  447. }
  448. .a .a.a-m-border{
  449. border-color: $a-m;
  450. }
  451. .a .a.a-s-border {
  452. border-color: $a-s;
  453. }
  454. .b .b.b-m-border {
  455. border-color: $b-m;
  456. }
  457. .b .b.b-s-border {
  458. border-color: $b-s;
  459. }
  460. .c .c.c-m-border {
  461. border-color: $c-m;
  462. }
  463. .c .c.c-s-border {
  464. border-color: $c-s;
  465. }
  466. .d .d.d-m-border {
  467. border-color: $d-m;
  468. }
  469. .d .d.d-s-border {
  470. border-color: $d-s;
  471. }
  472. .e .e.e-m-border {
  473. border-color: $e-m;
  474. }
  475. .e .e.e-s-border {
  476. border-color: $e-s;
  477. }
  478. .f .f.f-m-border {
  479. border-color: $f-m;
  480. }
  481. .f .f.f-s-border {
  482. border-color: $f-s;
  483. }
  484. .g .g.g-m-border {
  485. border-color: $g-m;
  486. }
  487. .g .g.g-s-border {
  488. border-color: $g-s;
  489. }
  490. .h .h.h-m-border {
  491. border-color: $h-m;
  492. }
  493. .h .h.h-s-border {
  494. border-color: $h-s;
  495. }
  496. .i .i-m-border {
  497. border-color: $i-m;
  498. }
  499. .i .i.i-s-border {
  500. border-color: $i-s;
  501. }
  502. .j .j.j-m-border {
  503. border-color: $j-m;
  504. }
  505. .j .j.j-s-border {
  506. border-color: $j-s;
  507. }
  508. .k .k.k-m-border {
  509. border-color: $k-m;
  510. }
  511. .k .k.k-s-border {
  512. border-color: $k-s;
  513. }
  514. // 背景色
  515. .a.a-m-gradient {
  516. background:linear-gradient(140deg, $a-m, $a-s) ;
  517. }
  518. .b.b-m-gradient {
  519. background: linear-gradient(140deg, $b-m, $b-s) ;
  520. }
  521. .c.c-m-gradient {
  522. background: linear-gradient(140deg, $c-m, $c-s) ;
  523. }
  524. .d.d-m-gradient{
  525. background:linear-gradient(140deg, $d-m, $d-s) ;
  526. }
  527. .e.e-m-gradient {
  528. background: linear-gradient(140deg, $e-m, $e-s) ;
  529. }
  530. .f.f-m-gradient{
  531. background: linear-gradient(140deg, $f-m, $f-s) ;
  532. }
  533. .g.g-m-gradient {
  534. background: linear-gradient(140deg, $g-m, $g-s) ;
  535. }
  536. .h.h-m-gradient {
  537. background: linear-gradient(140deg, $h-m, $h-s) ;
  538. }
  539. .i.i-m-gradient {
  540. background: linear-gradient(140deg, $i-m, $i-s) ;
  541. }
  542. .j.j-m-gradient {
  543. background: linear-gradient(140deg, $j-m, $j-s) ;
  544. }
  545. .k.k-m-gradient {
  546. background: linear-gradient(140deg, $k-m, $k-s) ;
  547. }
  548. // 背景色
  549. .a.a-m-gradient-l {
  550. background:linear-gradient(to right, rgba(255, 69, 68, 1), rgba(255, 69, 68, 0.5)) ;
  551. }
  552. .b.b-m-gradient-l {
  553. background: linear-gradient(to right, rgba(252, 198, 0, 1), rgba(252, 198, 0, 0.5)) ;
  554. }
  555. .c.c-m-gradient-l {
  556. background: linear-gradient(to right, rgba(255, 84, 123, 1), rgba(255, 84, 123, 0.5)) ;
  557. }
  558. .d.d-m-gradient-l{
  559. background:linear-gradient(to right, rgba(221, 183, 102, 1), rgba(221, 183, 102, 0.5)) ;
  560. }
  561. .e.e-m-gradient-l {
  562. background: linear-gradient(to right, rgba(119, 131, 234, 1), rgba(119, 131, 234, 0.5)) ;
  563. }
  564. .f.f-m-gradient-l{
  565. background: linear-gradient(to right, rgba(255, 69, 68, 1), rgba(255, 69, 68, 0.5)) ;
  566. }
  567. .g.g-m-gradient-l {
  568. background: linear-gradient(to right, rgba(99, 190, 114, 1), rgba(99, 190, 114, 0.5)) ;
  569. }
  570. .h.h-m-gradient-l {
  571. background: linear-gradient(to right, rgba(74, 144, 226, 1), rgba(74, 144, 226, 0.5)) ;
  572. }
  573. .i.i-m-gradient-l {
  574. background: linear-gradient(to right, rgba(51,51,51, 1), rgba(51,51,51, 0.5)) ;
  575. }
  576. .j.j-m-gradient-l {
  577. background: linear-gradient(to right, rgba(255, 69, 68, 1), rgba(255, 69, 68, 0.5));
  578. }
  579. .a.a-m-gradient-o {
  580. background: linear-gradient(to right, rgb(255,69,68),rgba(255,69,68, 0.7));
  581. }
  582. .b.b-m-gradient-o {
  583. background: linear-gradient(to right, rgb(252,198,0),rgba(252,198,0, 0.7));
  584. }
  585. .c.c-m-gradient-o {
  586. background: linear-gradient(to right, rgb(255,84,123),rgba(255,84,123, 0.7));
  587. }
  588. .d.d-m-gradient-o {
  589. background: linear-gradient(to right, rgb(221,183,102),rgba(221,183,102, 0.7));
  590. }
  591. .e.e-m-gradient-o {
  592. background: linear-gradient(to right, rgb(119,131,234),rgba(119,131,234, 0.7));
  593. }
  594. .f.f-m-gradient-o {
  595. background: linear-gradient(to right, rgb(255,69,68),rgba(255,69,68, 0.7));
  596. }
  597. .g.g-m-gradient-o {
  598. background: linear-gradient(to right, rgb(99,190,114),rgba(99,190,114, 0.7));
  599. }
  600. .h.h-m-gradient-o {
  601. background: linear-gradient(to right, rgb(74,144,226),rgba(74,144,226, 0.7));
  602. }
  603. .i.i-m-gradient-o {
  604. background: linear-gradient(to right, rgb(51,51,51),rgba(51,51,51, 0.7));
  605. }
  606. .j.j-m-gradient-o {
  607. background: linear-gradient(to right, rgb(255,69,68),rgba(255,69,68, 0.7));
  608. }
  609. .k.k-m-gradient-o {
  610. background: linear-gradient(to right, rgb(255,102,153),rgba(255,102,153, 0.7));
  611. }
  612. .a.a-s-gradient-o {
  613. background: linear-gradient(to right, rgb(243,152,0),rgba(243,152,0, 0.7));
  614. }
  615. .b.b-s-gradient-o {
  616. background: linear-gradient(to right, rgb(85,85,85),rgba(85,85,85, 0.7));
  617. }
  618. .c.c-s-gradient-o {
  619. background: linear-gradient(to right, rgb(255,230,232),rgba(255,230,232, 0.7));
  620. }
  621. .d.d-s-gradient-o {
  622. background: linear-gradient(to right, rgb(240,235,216),rgba(240,235,216, 0.7));
  623. }
  624. .e.e-s-gradient-o {
  625. background: linear-gradient(to right, rgb(233,235,255),rgba(233,235,255, 0.7));
  626. }
  627. .f.f-s-gradient-o {
  628. background: linear-gradient(to right, rgb(85,85,85),rgba(85,85,85, 0.7));
  629. }
  630. .g.g-s-gradient-o {
  631. background: linear-gradient(to right, rgb(225,244,227),rgba(225,244,227, 0.7));
  632. }
  633. .h.h-s-gradient-o {
  634. background: linear-gradient(to right, rgb(219,233,249),rgba(219,233,249, 0.7));
  635. }
  636. .i.i-s-gradient-o {
  637. background: linear-gradient(to right, rgb(222,222,222),rgba(222,222,222, 0.7));
  638. }
  639. .j.j-s-gradient-o {
  640. background: linear-gradient(to right, rgb(255,218,218),rgba(255,218,218, 0.7));
  641. }
  642. .k.k-s-gradient-o {
  643. background: linear-gradient(to right, rgb(153,153,255),rgba(153,153,255, 0.7));
  644. }
  645. //
  646. //// 文字色
  647. .app-admin-color {
  648. color: $app-admin-main-color
  649. }