detail-item.module.less 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  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. .imgWrap {
  30. width: 87px;
  31. height: 33px;
  32. background: #e9e3ff;
  33. border-radius: 19px;
  34. img {
  35. width: 100%;
  36. height: 100%;
  37. }
  38. }
  39. }
  40. }
  41. .itemBottom {
  42. margin-top: 15px;
  43. display: flex;
  44. flex-direction: row;
  45. align-items: center;
  46. justify-content: space-around;
  47. text-align: center;
  48. .itemBottomDot {
  49. width: 25%;
  50. .dotMain {
  51. font-size: 26px;
  52. font-weight: bold;
  53. color: #333333;
  54. line-height: 30px;
  55. margin-bottom: 4px;
  56. span {
  57. font-size: 12px;
  58. font-weight: 400;
  59. color: #333333;
  60. line-height: 17px;
  61. }
  62. }
  63. .dotSub {
  64. font-size: 12px;
  65. font-weight: 400;
  66. color: #777777;
  67. line-height: 17px;
  68. }
  69. }
  70. }
  71. }