record.scss 2.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. .hc-my-record-page {
  2. .hc-record-time-line {
  3. position: relative;
  4. width: 100%;
  5. display: flex;
  6. flex-direction: column;
  7. padding: 14px;
  8. .time-line-item {
  9. position: relative;
  10. display: flex;
  11. text-align: center;
  12. padding-bottom: 14px;
  13. &::before {
  14. position: absolute;
  15. content: "";
  16. width: 1px;
  17. top: 19px;
  18. left: 6.5px;
  19. bottom: 1px;
  20. background: #FBBCB4;
  21. transition: all 0.3s ease-in-out 0s;
  22. }
  23. .item-icon {
  24. display: block;
  25. position: relative;
  26. top: 3px;
  27. .dot {
  28. width: 14px;
  29. height: 14px;
  30. background-color: #fbbcb4;
  31. border: 1px solid #f96654;
  32. border-radius: 50%;
  33. }
  34. }
  35. .item-content {
  36. flex: 1;
  37. position: relative;
  38. text-align: left;
  39. padding-left: 10px;
  40. .time {
  41. font-size: 14px;
  42. color: #8E8E93;
  43. margin-bottom: 10px;
  44. }
  45. .card {
  46. background: white;
  47. position: relative;
  48. padding: 10px;
  49. border-radius: 6px;
  50. box-shadow: 0 2px 6px 0 rgba(221, 221, 221, .31);
  51. margin-bottom: 10px;
  52. .title {
  53. color: #101010;
  54. margin-bottom: 10px;
  55. }
  56. .text {
  57. color: #8E8E93;
  58. font-size: 13px;
  59. }
  60. }
  61. }
  62. }
  63. .time-line-item.no-data {
  64. &::before {
  65. display: none;
  66. }
  67. .item-icon .dot {
  68. background-color: #C7C7CC;
  69. border-color: #C7C7CC;
  70. }
  71. .item-content .card {
  72. background: #EAEAEA;
  73. box-shadow: none;
  74. color: #8E8E93;
  75. font-size: 14px;
  76. }
  77. }
  78. }
  79. }