index.wxss 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202
  1. @charset "UTF-8";
  2. Page {
  3. width: 100%;
  4. height: 100%;
  5. background-color: #F7F7F7;
  6. }
  7. .container {
  8. width: 100%;
  9. height: 100%;
  10. background-color: #F7F7F7;
  11. /* 门店的标题 */
  12. }
  13. .container .shop {
  14. border-top: 1rpx solid #ECECEC;
  15. width: 100%;
  16. background-color: #F7F7F7;
  17. padding-top: 20rpx;
  18. position: fixed;
  19. z-index: 99;
  20. /* 未获得授权时显示获取授权按钮 */
  21. }
  22. .container .shop > .title {
  23. display: flex;
  24. justify-content: space-between;
  25. padding: 0 40rpx;
  26. height: 80rpx;
  27. line-height: 80rpx;
  28. background-color: #fff;
  29. }
  30. .container .shop .shop-info {
  31. width: 100%;
  32. height: 220rpx;
  33. border: 1rpx solid #ECECEC;
  34. display: flex;
  35. flex-direction: row;
  36. justify-content: space-between;
  37. align-items: center;
  38. padding: 20rpx 30rpx;
  39. box-sizing: border-box;
  40. margin-bottom: 10rpx;
  41. background-color: #fff;
  42. }
  43. .container .shop .shop-info > .shopimg {
  44. width: 150rpx;
  45. height: 150rpx;
  46. }
  47. .container .shop .shop-info > .shopimg > .img {
  48. width: 100%;
  49. height: 100%;
  50. }
  51. .container .shop .shop-info .shopmsg {
  52. flex: 2;
  53. height: 200rpx;
  54. margin-left: 50rpx;
  55. display: flex;
  56. flex-direction: column;
  57. justify-content: space-around;
  58. /* 处理定位图标上移的问题 */
  59. /* 新品促销标签 */
  60. }
  61. .container .shop .shop-info .shopmsg > .shopview {
  62. display: flex;
  63. justify-content: space-between;
  64. }
  65. .container .shop .shop-info .shopmsg > .shop-address {
  66. position: relative;
  67. padding-left: 45rpx;
  68. }
  69. .container .shop .shop-info .shopmsg > .shop-address .address-icon {
  70. position: absolute;
  71. top: -6rpx;
  72. left: 0;
  73. }
  74. .container .shop .shop-info .shopmsg .mark {
  75. width: 105rpx;
  76. height: 30rpx;
  77. line-height: 30rpx;
  78. text-align: center;
  79. border-radius: 30rpx;
  80. }
  81. .container .shop .shop-info .shopmsg .discount {
  82. color: #E359A8;
  83. border: 1px solid #E359A8;
  84. }
  85. .container .shop .shop-info .shopmsg .new {
  86. border: 1px solid #80CB5F;
  87. color: #80CB5F;
  88. }
  89. .container .shop .user-location-btn {
  90. width: 100%;
  91. height: 220rpx;
  92. border-top: 1rpx solid #ECECEC;
  93. background-color: #fff;
  94. position: relative;
  95. }
  96. .container .shop .user-location-btn .location-btn {
  97. background-color: #ECECEC;
  98. padding: 0;
  99. width: 50%;
  100. height: 50%;
  101. line-height: 100rpx;
  102. color: #21ad50;
  103. position: absolute;
  104. left: 50%;
  105. top: 28%;
  106. transform: translate(-50%);
  107. }
  108. .container .product {
  109. overflow-y: auto;
  110. padding-top: 320rpx;
  111. /* .weui-tabs {
  112. .weui-tabs-bar__wrp {
  113. .weui-tabs-bar__content {
  114. height: 100rpx;
  115. line-height: 99rpx;
  116. white-space: nowrap;
  117. display: flex;
  118. justify-content: space-around;
  119. border-bottom: 1rpx solid #ECECEC;
  120. }
  121. }
  122. } */
  123. }
  124. .container .product .productinfo {
  125. width: 95%;
  126. height: 380rpx;
  127. padding: 10rpx 0;
  128. margin: 0 auto;
  129. }
  130. .container .product .productinfo .product-item {
  131. position: relative;
  132. width: 100%;
  133. height: 380rpx;
  134. border-radius: 20rpx;
  135. background-size: cover;
  136. background-position: center;
  137. }
  138. .container .product .productinfo .product-item .product-desc {
  139. height: 380rpx;
  140. color: #fff;
  141. position: absolute;
  142. color: #fff;
  143. top: 210rpx;
  144. left: 20rpx;
  145. letter-spacing: 2rpx;
  146. font-weight: 100;
  147. }
  148. .container .product .productinfo .product-item .order {
  149. position: absolute;
  150. right: 40rpx;
  151. bottom: 20rpx;
  152. width: 100rpx;
  153. height: 100rpx;
  154. border-radius: 50%;
  155. background-color: #098932;
  156. color: #fff;
  157. }
  158. .container .product .productinfo .product-item .order > view {
  159. width: 70rpx;
  160. height: 70rpx;
  161. line-height: 35rpx;
  162. letter-spacing: 5rpx;
  163. text-align: center;
  164. font-size: 14px;
  165. margin: 18rpx;
  166. }
  167. .container .product .productinfo .product-item .gray {
  168. background-color: #999;
  169. }
  170. .container .product .productinfo:first-child {
  171. margin-top: 10rpx;
  172. }
  173. .fw700 {
  174. font-weight: 500;
  175. font-size: 18px;
  176. }