index.scss 1.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. @import "@styles/theme.scss";
  2. .comp-item-list {
  3. margin-top: 20px;
  4. background: #ffffff;
  5. }
  6. .comp-item-list__title {
  7. display: flex;
  8. flex-direction: column;
  9. justify-content: center;
  10. padding: 0 30px;
  11. height: 100px;
  12. }
  13. .comp-item-list__wrap {
  14. display: flex;
  15. flex-direction: row;
  16. flex-wrap: wrap;
  17. padding: 0 15px;
  18. }
  19. .comp-item-list__item {
  20. display: flex;
  21. flex-direction: column;
  22. padding: 0 15px 48px;
  23. width: 50%;
  24. &-img {
  25. width: 330px;
  26. height: 330px;
  27. background: #f4f4f4;
  28. border-radius: 4px;
  29. }
  30. &-info {
  31. margin-top: 20px;
  32. display: flex;
  33. flex-direction: column;
  34. }
  35. &-name {
  36. color: $text-color;
  37. font-size: 28px;
  38. line-height: 40px;
  39. @include text-ellipsis;
  40. }
  41. &-price-wrap {
  42. display: flex;
  43. flex-direction: row;
  44. align-items: center;
  45. }
  46. &-price {
  47. color: $black;
  48. font-size: 32px;
  49. line-height: 48px;
  50. }
  51. &-price--origin {
  52. margin-left: 14px;
  53. color: $text-color-lighter;
  54. font-size: 30px;
  55. font-weight: 200;
  56. line-height: 48px;
  57. text-decoration: line-through;
  58. text-decoration-color: $text-color-lighter;
  59. }
  60. }