index.less 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. .list {
  2. margin-top: 40px;
  3. .item {
  4. padding: 28px 75px 28px 124px;
  5. display: flex;
  6. justify-content: space-between;
  7. margin-bottom: 18px;
  8. background: #ffffff;
  9. box-shadow: 0px 0px 8px 14px rgba(0, 0, 0, 0.03);
  10. border-radius: 12px;
  11. align-items: center;
  12. }
  13. .status {
  14. width: 134px;
  15. height: 134px;
  16. font-size: 36px;
  17. font-weight: 400;
  18. color: #000000;
  19. text-align: center;
  20. line-height: 134px;
  21. background: url('@/assets/circle-success.png') no-repeat center;
  22. background-size: 100% 100%;
  23. }
  24. .statusError {
  25. background-image: url('@/assets/circle-error.png');
  26. }
  27. .info {
  28. flex: 1;
  29. padding-left: 100px;
  30. i {
  31. width: 14px;
  32. height: 14px;
  33. display: inline-block;
  34. vertical-align: middle;
  35. border-radius: 50%;
  36. margin-right: 14px;
  37. background-color: rgba(74, 144, 226, 1);
  38. }
  39. }
  40. .time {
  41. font-size: 24px;
  42. font-weight: 400;
  43. color: #4a4a4a;
  44. line-height: 34px;
  45. }
  46. .desc {
  47. font-size: 32px;
  48. font-weight: 400;
  49. color: #4a4a4a;
  50. line-height: 44px;
  51. .number {
  52. font-size: 54px;
  53. font-weight: 500;
  54. color: #f5a623;
  55. line-height: 76px;
  56. margin-left: 12px;
  57. }
  58. span {
  59. font-size: 28px;
  60. color: #000000;
  61. }
  62. }
  63. .btn {
  64. width: 23px;
  65. height: 35px;
  66. background: url('@/assets/arr-right.png') no-repeat center;
  67. background-size: 100% 100%;
  68. }
  69. }