抖音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.

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