search.css 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
  1. .search-result {
  2. padding-top: 80px;
  3. background-color: #f8f8f8;
  4. }
  5. .search-result .search-result-body {
  6. padding-top: 30px;
  7. width: 1170px;
  8. margin: 0 auto;
  9. text-align: left;
  10. }
  11. .search-result .search-result-body .search-result-title {
  12. margin-top: 30px;
  13. font-size: 30px;
  14. font-weight: bold;
  15. }
  16. .search-result .search-result-body .search-total {
  17. margin: 10px auto 16px;
  18. font-size: 12px;
  19. border-bottom: #d0d1d1;
  20. }
  21. .search-result .search-result-body .card-list {
  22. display: flex;
  23. align-items: center;
  24. flex-wrap: wrap;
  25. padding: 5px 0 0 0;
  26. margin-top: 15px;
  27. overflow: hidden;
  28. }
  29. .search-result .search-result-body .card-list div {
  30. margin-right: 25px;
  31. display: inline-block;
  32. }
  33. .search-result .search-result-body .card-list div:nth-child(6n) {
  34. margin-right: 0;
  35. }
  36. .search-result .search-result-body .card-list div:nth-child(6n+1) {
  37. margin-left: 5px;
  38. }
  39. .search-result .search-result-body .search-pagination {
  40. margin-top: 30px;
  41. display: flex;
  42. justify-content: center;
  43. }
  44. .goods-sku-info {
  45. display: block;
  46. max-width: 170px;
  47. margin: 0 25px 25px 0;
  48. cursor: pointer;
  49. }
  50. .goods-sku-info .goods-img {
  51. padding: 0;
  52. margin: 0 0 12px 0;
  53. overflow: hidden;
  54. display: flex;
  55. box-shadow: #dddddd 0 0 6px;
  56. position: relative;
  57. }
  58. .goods-sku-info .goods-img img {
  59. height: 228px;
  60. width: 170px;
  61. }
  62. .goods-sku-info .goods-img img:hover {
  63. z-index: 0;
  64. }
  65. .goods-sku-info .goods-img:hover::after {
  66. opacity: 1;
  67. box-shadow: rgba(100, 100, 100, 0.3) 0 0 8px 3px;
  68. }
  69. .goods-sku-info .goods-img::after {
  70. content: "";
  71. position: absolute;
  72. width: 170px;
  73. height: 228px;
  74. box-sizing: border-box;
  75. background: rgba(229, 229, 229, 0.2);
  76. animation: enlarge 0.2s ease 0s 1 normal none running;
  77. opacity: 0;
  78. transition: all 0.3s ease 0s;
  79. }
  80. .goods-sku-info .goods-name {
  81. height: 38px;
  82. font-size: 12px;
  83. text-overflow: ellipsis;
  84. overflow: hidden;
  85. display: -webkit-box;
  86. -webkit-line-clamp: 2;
  87. -webkit-box-orient: vertical;
  88. }
  89. .goods-sku-info .goods-price {
  90. font-size: 16px;
  91. margin: 5px 0;
  92. font-weight: bold;
  93. }
  94. .goods-sku-info .goods-price::before {
  95. content: "¥";
  96. }
  97. .goods-sku-info .goods--original-price {
  98. display: inline-block;
  99. text-decoration: line-through;
  100. font-size: 12px;
  101. margin: 0;
  102. padding: 0;
  103. }
  104. .goods-sku-info .goods-discount-percentage {
  105. display: inline-block;
  106. font-size: 12px;
  107. margin: 0 0 0 10px;
  108. padding: 0 5px;
  109. color: white;
  110. background: rgb(223, 30, 28);
  111. }
  112. .goods-sku-info .goods-discount-percentage::before {
  113. content: "-";
  114. }
  115. .goods-sku-info .goods-discount-percentage::after {
  116. content: "%";
  117. }