抖音c端
Du kan inte välja fler än 25 ämnen Ämnen måste starta med en bokstav eller siffra, kan innehålla bindestreck ('-') och vara max 35 tecken långa.

212 rader
6.3 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-image: linear-gradient(to top, #48c6ef 0%, #6f86d6 100%);
  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: #ffffff;
  38. margin-bottom: 30rpx;
  39. padding: 20rpx 25rpx 50rpx 25rpx;
  40. box-sizing: border-box !important;
  41. background-image: linear-gradient(to top, #48c6ef 0%, #6f86d6 100%);
  42. border-radius: 12rpx;
  43. .img {
  44. width: 30%;
  45. height: 170rpx;
  46. border-radius: 15rpx;
  47. overflow: hidden;
  48. image {
  49. width: 100%;
  50. height: 100%;
  51. }
  52. }
  53. .infoBox {
  54. display: flex;
  55. justify-content: space-between;
  56. flex-direction: column;
  57. width: 65%;
  58. margin-left: 20rpx;
  59. padding: 8rpx 0;
  60. .infoItem {
  61. width: 100%;
  62. white-space: nowrap;
  63. overflow: hidden;
  64. text-overflow: ellipsis;
  65. }
  66. }
  67. .infoBox2 {
  68. display: flex;
  69. justify-content: space-between;
  70. flex-direction: column;
  71. width: 65%;
  72. margin-left: 20rpx;
  73. padding: 30rpx 0;
  74. .infoItem {
  75. width: 100%;
  76. white-space: nowrap;
  77. overflow: hidden;
  78. text-overflow: ellipsis;
  79. }
  80. }
  81. .mapBtn {
  82. position: absolute;
  83. bottom: 15rpx;
  84. right: 15rpx;
  85. padding: 7rpx 12rpx;
  86. border-radius: 15rpx;
  87. background-color: #f76767;
  88. }
  89. }
  90. .takeingPlace {
  91. text-align: center;
  92. margin-top: 30rpx;
  93. .title {
  94. font-size: 45rpx;
  95. color: #00000075;
  96. margin-bottom: 40rpx;
  97. }
  98. }
  99. }
  100. }
  101. .selectCity {
  102. .nav {
  103. margin-bottom: 20rpx;
  104. padding: 0 20rpx;
  105. .item {
  106. width: 10%;
  107. color: #ffffff;
  108. text-align: center;
  109. padding: 8rpx 15rpx;
  110. background-image: linear-gradient(to top, #48c6ef 0%, #6f86d6 100%);
  111. border-radius: 15rpx;
  112. }
  113. }
  114. .notice {
  115. font-size: 35rpx;
  116. padding: 0 15rpx;
  117. margin-bottom: 30rpx;
  118. }
  119. .indexList {
  120. padding: 0 15rpx;
  121. box-sizing: border-box;
  122. margin-bottom: 25rpx;
  123. .title {
  124. font-size: 35rpx;
  125. }
  126. .item {
  127. font-size: 30rpx;
  128. height: 80rpx;
  129. line-height: 80rpx;
  130. border-bottom: 1px solid #0000003b;
  131. }
  132. }
  133. }
  134. .indexBar {
  135. position: fixed;
  136. top: 5%;
  137. right: 3%;
  138. font-size: 25rpx;
  139. text-align: center;
  140. background-color: #00000075;
  141. padding-top: 20rpx;
  142. padding-bottom: 10rpx;
  143. border-radius: 30rpx;
  144. .indexBarItem {
  145. position: relative;
  146. width: 50rpx;
  147. height: 42rpx;
  148. color: #ffffff;
  149. transition: all 0.3s;
  150. &.active {
  151. color: #f92672;
  152. }
  153. .tag {
  154. position: absolute;
  155. left: -210%;
  156. top: 0;
  157. width: 110rpx;
  158. height: 60rpx;
  159. text-align: center;
  160. transform: scale(1.3);
  161. }
  162. .name {
  163. position: relative;
  164. top: -11rpx;
  165. left: 10rpx;
  166. display: inline-block;
  167. height: 50rpx;
  168. line-height: 50rpx;
  169. color: #ffffff;
  170. background-color: #8a8a8a;
  171. border-radius: 15rpx;
  172. padding: 0 20rpx;
  173. }
  174. .tran {
  175. display: inline-block;
  176. width: 0;
  177. height: 0;
  178. border-top: 20rpx solid #ffffff00;
  179. border-bottom: 20rpx solid #ffffff00;
  180. border-left: 20rpx solid #8a8a8a;
  181. border-right: 20rpx solid #ffffff00;
  182. }
  183. }
  184. }
  185. }
  186. }