detail.css 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142
  1. /**
  2. * 搜索
  3. */
  4. .search input {
  5. width: calc(100% - 328rpx);
  6. border-top-right-radius: 0 !important;
  7. border-bottom-right-radius: 0 !important;
  8. height: 52rpx;
  9. line-height: 52rpx;
  10. border-width: 1px;
  11. border-style: solid;
  12. padding-top: 0;
  13. padding-bottom: 0;
  14. }
  15. .header-shop-whole-search input {
  16. width: calc(100% - 168rpx);
  17. }
  18. .search-btn {
  19. top: 20rpx;
  20. right: 20rpx;
  21. }
  22. .search-btn button {
  23. width: 150rpx;
  24. padding: 0;
  25. height: 57rpx;
  26. line-height: 57rpx;
  27. }
  28. .search-btn button:first-child {
  29. border-top-left-radius: 0 !important;
  30. border-bottom-left-radius: 0 !important;
  31. background: #ff8c00;
  32. border: 1px solid #ff8c00;
  33. }
  34. .search-btn button:last-child {
  35. background: #483E39;
  36. border: 1px solid #483E39;
  37. margin-left: 20rpx;
  38. }
  39. /**
  40. * 头部
  41. */
  42. .header {
  43. padding: 20rpx 10rpx;
  44. font-size: 24rpx;
  45. }
  46. .shop-logo {
  47. width: 280rpx;
  48. }
  49. .base-bottom image {
  50. width: 28rpx;
  51. height: 28rpx;
  52. }
  53. .header .base {
  54. width: calc(100% - 320rpx);
  55. }
  56. .shop-title {
  57. line-height: 40rpx;
  58. }
  59. /**
  60. * 客服
  61. */
  62. .header-service {
  63. width: 400rpx;
  64. left: 80rpx;
  65. top: 210rpx;
  66. z-index: 2;
  67. font-size: 24rpx;
  68. -webkit-box-shadow: 0 10px 10px rgb(0 0 0 / 30%);
  69. box-shadow: 0 10px 10px rgb(0 0 0 / 30%);
  70. }
  71. .header-service .item:first-child {
  72. border-top: 0 !important;
  73. }
  74. .header-service .qrcode .item:not(:last-child) {
  75. margin-right: 20rpx;
  76. }
  77. .header-service image {
  78. width: 130rpx;
  79. height: 130rpx;
  80. }
  81. .header-service .chat-info image {
  82. width: 40rpx;
  83. height: 40rpx;
  84. }
  85. /**
  86. * 导航
  87. */
  88. .nav {
  89. height: 70rpx;
  90. border-width: 0 0 1px 0;
  91. border-style: solid;
  92. }
  93. .nav .nav-scroll {
  94. float: right;
  95. width: calc(100% - 230rpx);
  96. }
  97. .nav .item {
  98. padding: 0 20rpx;
  99. }
  100. .nav-shop-category {
  101. padding-right: 38rpx !important;
  102. background-size: 14px 14px;
  103. }
  104. /**
  105. * 导航商品分类
  106. */
  107. .nav-category {
  108. width: 220rpx;
  109. z-index: 1;
  110. margin-top: 12rpx;
  111. box-shadow: 0 6px 6px rgb(0 0 0 / 10%);
  112. border-bottom-right-radius: 20rpx;
  113. border-width: 0 1px 1px 1px;
  114. border-style: solid;
  115. border-color: #efefef;
  116. }
  117. .nav-category .category-scroll {
  118. max-height: 600rpx;
  119. }
  120. .nav-category .item {
  121. padding: 20rpx;
  122. }
  123. .nav-category .item:not(:last-child) {
  124. border-bottom: 1px dashed #f7f7f7;
  125. }
  126. /**
  127. * 商品分类切换
  128. */
  129. .shop-category-list .item {
  130. margin: 20rpx 0;
  131. }
  132. .shop-category-list .item {
  133. margin-left: 20rpx;
  134. }
  135. .shop-category-list .item:last-child {
  136. margin-right: 20rpx;
  137. }