抖音c端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

196 lines
4.5 KiB

  1. /* c:\Users\56817\Desktop\Working Space\3,TikTok-MiniPro\ttc\pages2\shopSelect\shopSelect.ttss */
  2. page {
  3. font-size: 30rpx;
  4. box-sizing: border-box !important;
  5. background-color: #fff;
  6. padding-bottom: 0;
  7. }
  8. page .continer {
  9. width: 95%;
  10. height: 100%;
  11. margin: auto;
  12. padding: 30rpx 0;
  13. }
  14. page .continer .selectShop .nav {
  15. display: flex;
  16. justify-content: space-between;
  17. margin-bottom: 20rpx;
  18. padding: 0 20rpx;
  19. }
  20. page .continer .selectShop .nav .item {
  21. color: #ffffff;
  22. padding: 8rpx 15rpx;
  23. background: linear-gradient(270deg, #DDAB5A, #B8832D);
  24. border-radius: 15rpx;
  25. }
  26. page .continer .selectShop .shopList {
  27. width: 100%;
  28. background-color: #ffffff;
  29. border-radius: 10rpx;
  30. padding: 20rpx 0;
  31. margin: auto;
  32. }
  33. page .continer .selectShop .shopList .item {
  34. position: relative;
  35. display: flex;
  36. justify-content: space-between;
  37. width: 95%;
  38. margin: auto;
  39. color: #000000;
  40. margin-bottom: 30rpx;
  41. padding: 25rpx 25rpx 25rpx 25rpx;
  42. box-sizing: border-box !important;
  43. background-color: #fffffff8;
  44. border: 1px solid #0000002d;
  45. border-radius: 12rpx;
  46. }
  47. page .continer .selectShop .shopList .item .img {
  48. position: relative;
  49. width: 30%;
  50. }
  51. page .continer .selectShop .shopList .item .img image {
  52. position: absolute;
  53. top: 50%;
  54. transform: translateY(-50%);
  55. width: 170rpx;
  56. height: 170rpx;
  57. border-radius: 15rpx;
  58. border: 1px solid #00000018;
  59. }
  60. page .continer .selectShop .shopList .item .infoBox {
  61. display: flex;
  62. justify-content: space-between;
  63. flex-direction: column;
  64. width: 65%;
  65. margin-left: 20rpx;
  66. padding: 8rpx 0;
  67. }
  68. page .continer .selectShop .shopList .item .infoBox .infoItem {
  69. width: 100%;
  70. white-space: pre-wrap;
  71. }
  72. page .continer .selectShop .shopList .item .infoBox .infoItem.distance {
  73. margin: 20rpx 0;
  74. }
  75. page .continer .selectShop .shopList .item .infoBox .infoItem.address {
  76. font-size: 27rpx;
  77. }
  78. page .continer .selectShop .shopList .item .infoBox .infoItem .mapBtn {
  79. position: relative;
  80. bottom: 2rpx;
  81. display: inline-block;
  82. font-size: 22rpx;
  83. color: #ffffff;
  84. padding: 10rpx;
  85. border-radius: 15rpx;
  86. background: linear-gradient(270deg, #DDAB5A, #B8832D);
  87. margin-left: 20rpx;
  88. }
  89. page .continer .selectShop .shopList .item .infoBox2 {
  90. display: flex;
  91. justify-content: space-between;
  92. flex-direction: column;
  93. width: 65%;
  94. margin-left: 20rpx;
  95. padding: 30rpx 0;
  96. }
  97. page .continer .selectShop .shopList .item .infoBox2 .infoItem {
  98. width: 100%;
  99. white-space: pre-wrap;
  100. }
  101. page .continer .selectShop .shopList .item .infoBox2 .infoItem.address {
  102. font-size: 27rpx;
  103. margin-top: 15rpx;
  104. }
  105. page .continer .selectShop .shopList .takeingPlace {
  106. text-align: center;
  107. margin-top: 30rpx;
  108. }
  109. page .continer .selectShop .shopList .takeingPlace .title {
  110. font-size: 45rpx;
  111. color: #00000075;
  112. margin-bottom: 40rpx;
  113. }
  114. page .continer .selectCity .nav {
  115. margin-bottom: 20rpx;
  116. padding: 0 20rpx;
  117. }
  118. page .continer .selectCity .nav .item {
  119. width: 10%;
  120. color: #ffffff;
  121. text-align: center;
  122. padding: 8rpx 15rpx;
  123. background: linear-gradient(270deg, #DDAB5A, #B8832D);
  124. border-radius: 15rpx;
  125. }
  126. page .continer .selectCity .notice {
  127. font-size: 35rpx;
  128. padding: 0 15rpx;
  129. margin-bottom: 30rpx;
  130. }
  131. page .continer .selectCity .indexList {
  132. padding: 0 15rpx;
  133. box-sizing: border-box;
  134. margin-bottom: 25rpx;
  135. }
  136. page .continer .selectCity .indexList .title {
  137. font-size: 35rpx;
  138. }
  139. page .continer .selectCity .indexList .item {
  140. font-size: 30rpx;
  141. height: 80rpx;
  142. line-height: 80rpx;
  143. border-bottom: 1px solid #0000003b;
  144. }
  145. page .continer .indexBar {
  146. position: fixed;
  147. top: 5%;
  148. right: 3%;
  149. font-size: 25rpx;
  150. text-align: center;
  151. background-color: #00000075;
  152. padding-top: 20rpx;
  153. padding-bottom: 10rpx;
  154. border-radius: 30rpx;
  155. }
  156. page .continer .indexBar .indexBarItem {
  157. position: relative;
  158. width: 50rpx;
  159. height: 42rpx;
  160. color: #ffffff;
  161. transition: all 0.3s;
  162. }
  163. page .continer .indexBar .indexBarItem.active {
  164. color: #f92672;
  165. }
  166. page .continer .indexBar .indexBarItem .tag {
  167. position: absolute;
  168. left: -210%;
  169. top: 0;
  170. width: 110rpx;
  171. height: 60rpx;
  172. text-align: center;
  173. transform: scale(1.3);
  174. }
  175. page .continer .indexBar .indexBarItem .name {
  176. position: relative;
  177. top: -11rpx;
  178. left: 10rpx;
  179. display: inline-block;
  180. height: 50rpx;
  181. line-height: 50rpx;
  182. color: #ffffff;
  183. background-color: #8a8a8a;
  184. border-radius: 15rpx;
  185. padding: 0 20rpx;
  186. }
  187. page .continer .indexBar .indexBarItem .tran {
  188. display: inline-block;
  189. width: 0;
  190. height: 0;
  191. border-top: 20rpx solid #ffffff00;
  192. border-bottom: 20rpx solid #ffffff00;
  193. border-left: 20rpx solid #8a8a8a;
  194. border-right: 20rpx solid #ffffff00;
  195. }