抖音c端
Du kannst nicht mehr als 25 Themen auswählen Themen müssen entweder mit einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.

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