detail-item.module.less 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. .itemWrap {
  2. background: #ffffff;
  3. border-radius: 10px;
  4. padding: 12px 15px 20px;
  5. margin: 0 13px;
  6. .itemTop {
  7. display: flex;
  8. flex-direction: row;
  9. justify-content: space-between;
  10. align-items: center;
  11. border-bottom: 1px solid #f2f2f2;
  12. padding-bottom: 12px;
  13. .itemTopLeft {
  14. .itemTopMain {
  15. height: 22px;
  16. font-size: 16px;
  17. font-weight: 500;
  18. color: #333333;
  19. line-height: 22px;
  20. margin-bottom: 6px;
  21. }
  22. .itemTopSub {
  23. font-weight: 400;
  24. color: #777777;
  25. line-height: 17px;
  26. }
  27. }
  28. .itemTopRight {
  29. display: flex;
  30. flex-direction: row;
  31. align-items: center;
  32. .imgWrap {
  33. width: 87px;
  34. height: 33px;
  35. background: #e9e3ff;
  36. border-radius: 19px;
  37. img {
  38. width: 100%;
  39. height: 100%;
  40. }
  41. }
  42. .imgIcon {
  43. font-size: 16px;
  44. color: #d8d8d8;
  45. margin-left: 6px;
  46. }
  47. }
  48. }
  49. .itemBottom {
  50. margin-top: 15px;
  51. display: flex;
  52. flex-direction: row;
  53. align-items: center;
  54. justify-content: space-around;
  55. text-align: center;
  56. .itemBottomDot {
  57. width: 25%;
  58. .dotMain {
  59. font-size: 26px;
  60. font-weight: bold;
  61. color: #333333;
  62. line-height: 30px;
  63. margin-bottom: 4px;
  64. span {
  65. font-size: 12px;
  66. font-weight: 400;
  67. color: #333333;
  68. line-height: 17px;
  69. }
  70. }
  71. .dotSub {
  72. font-size: 12px;
  73. font-weight: 400;
  74. color: #777777;
  75. line-height: 17px;
  76. }
  77. }
  78. }
  79. }