抖音c端
25개 이상의 토픽을 선택하실 수 없습니다. Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

202 lines
5.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. .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. display: flex;
  33. justify-content: space-between;
  34. width: 95%;
  35. margin: auto;
  36. color: #ffffff;
  37. margin-bottom: 30rpx;
  38. padding: 20rpx 25rpx;
  39. box-sizing: border-box !important;
  40. background-image: linear-gradient(to top, #48c6ef 0%, #6f86d6 100%);
  41. border-radius: 12rpx;
  42. .img {
  43. width: 30%;
  44. height: 170rpx;
  45. border-radius: 15rpx;
  46. overflow: hidden;
  47. image {
  48. width: 100%;
  49. height: 100%;
  50. }
  51. }
  52. .infoBox {
  53. display: flex;
  54. justify-content: space-between;
  55. flex-direction: column;
  56. width: 65%;
  57. margin-left: 20rpx;
  58. padding: 8rpx 0;
  59. .infoItem {
  60. width: 100%;
  61. white-space: nowrap;
  62. overflow: hidden;
  63. text-overflow: ellipsis;
  64. }
  65. }
  66. .infoBox2 {
  67. display: flex;
  68. justify-content: space-between;
  69. flex-direction: column;
  70. width: 65%;
  71. margin-left: 20rpx;
  72. padding: 30rpx 0;
  73. .infoItem {
  74. width: 100%;
  75. white-space: nowrap;
  76. overflow: hidden;
  77. text-overflow: ellipsis;
  78. }
  79. }
  80. }
  81. .takeingPlace {
  82. text-align: center;
  83. margin-top: 30rpx;
  84. .title {
  85. font-size: 45rpx;
  86. color: #00000075;
  87. margin-bottom: 40rpx;
  88. }
  89. }
  90. }
  91. }
  92. .selectCity {
  93. .nav {
  94. margin-bottom: 20rpx;
  95. padding: 0 20rpx;
  96. .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. }
  105. .notice {
  106. font-size: 35rpx;
  107. padding: 0 15rpx;
  108. margin-bottom: 30rpx;
  109. }
  110. .indexList {
  111. padding: 0 15rpx;
  112. box-sizing: border-box;
  113. margin-bottom: 25rpx;
  114. .title {
  115. font-size: 35rpx;
  116. }
  117. .item {
  118. font-size: 30rpx;
  119. height: 80rpx;
  120. line-height: 80rpx;
  121. border-bottom: 1px solid #0000003b;
  122. }
  123. }
  124. }
  125. .indexBar {
  126. position: fixed;
  127. top: 5%;
  128. right: 3%;
  129. font-size: 25rpx;
  130. text-align: center;
  131. background-color: #00000075;
  132. padding-top: 20rpx;
  133. padding-bottom: 10rpx;
  134. border-radius: 30rpx;
  135. .indexBarItem {
  136. position: relative;
  137. width: 50rpx;
  138. height: 42rpx;
  139. color: #ffffff;
  140. transition: all 0.3s;
  141. &.active {
  142. color: #f92672;
  143. }
  144. .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. .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. .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. }
  174. }
  175. }
  176. }
  177. }