index.wxss 8.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330
  1. @charset "UTF-8";
  2. /* 水平间距 */
  3. /* 水平间距 */
  4. .homepage.data-v-57280228 {
  5. min-height: 100vh;
  6. background: #ffffff;
  7. /* 改为白色背景,符合UI设计 */
  8. }
  9. /* 轮播图区域 */
  10. .banner-section.data-v-57280228 {
  11. position: relative;
  12. height: 550rpx;
  13. /* 恢复原来的高度 */
  14. overflow: hidden;
  15. background: #ffffff;
  16. /* 确保背景为白色 */
  17. /* 状态栏占位 */
  18. /* 透明搜索框容器 - 调整位置到轮播图上方 */
  19. /* 透明搜索框 */
  20. }
  21. .banner-section .status-bar-placeholder.data-v-57280228 {
  22. position: absolute;
  23. top: 0;
  24. left: 0;
  25. right: 0;
  26. z-index: 1;
  27. }
  28. .banner-section .banner-swiper.data-v-57280228 {
  29. width: 100%;
  30. height: 100%;
  31. position: absolute;
  32. top: 0;
  33. left: 0;
  34. }
  35. .banner-section .banner-item.data-v-57280228 {
  36. width: 100%;
  37. height: 100%;
  38. position: relative;
  39. }
  40. .banner-section .banner-item .banner-image.data-v-57280228 {
  41. width: 100%;
  42. height: 100%;
  43. object-fit: cover;
  44. }
  45. .banner-section .banner-item .banner-overlay.data-v-57280228 {
  46. position: absolute;
  47. bottom: 0;
  48. left: 0;
  49. right: 0;
  50. background: linear-gradient(transparent, rgba(0, 0, 0, 0.3));
  51. /* 减少遮罩透明度 */
  52. padding: 30rpx;
  53. }
  54. .banner-section .banner-item .banner-overlay .banner-title.data-v-57280228 {
  55. color: white;
  56. font-size: 32rpx;
  57. font-weight: bold;
  58. }
  59. .banner-section .banner-indicator.data-v-57280228 {
  60. position: absolute;
  61. bottom: 30rpx;
  62. /* 调整到底部右侧,符合UI设计 */
  63. right: 30rpx;
  64. background: rgba(255, 255, 255, 0.9);
  65. /* 改为白色半透明背景 */
  66. color: #333;
  67. /* 改为深色文字 */
  68. padding: 8rpx 16rpx;
  69. border-radius: 20rpx;
  70. font-size: 24rpx;
  71. z-index: 3;
  72. border: 1rpx solid rgba(0, 0, 0, 0.1);
  73. /* 添加细边框 */
  74. }
  75. .banner-section .transparent-search-container.data-v-57280228 {
  76. position: absolute;
  77. left: 0;
  78. right: 0;
  79. z-index: 10;
  80. padding: 0 20rpx;
  81. /* 减少左右间距,更接近边缘对齐 */
  82. top: 80rpx;
  83. /* 固定位置,在状态栏下方 */
  84. }
  85. .banner-section .transparent-search-box.data-v-57280228 {
  86. background: rgba(255, 255, 255, 0.6);
  87. /* 改为半透明背景 */
  88. -webkit-backdrop-filter: blur(10rpx);
  89. backdrop-filter: blur(10rpx);
  90. border: 1rpx solid rgba(255, 255, 255, 0.3);
  91. /* 改为半透明白色边框 */
  92. border-radius: 50rpx;
  93. height: 80rpx;
  94. /* 增加高度 */
  95. display: flex;
  96. align-items: center;
  97. padding: 0 30rpx;
  98. box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
  99. /* 减少阴影 */
  100. transition: all 0.3s ease;
  101. /* 点击态效果 */
  102. }
  103. .banner-section .transparent-search-box .search-icon.data-v-57280228 {
  104. font-size: 32rpx;
  105. color: #666;
  106. /* 改为深色图标 */
  107. margin-right: 20rpx;
  108. }
  109. .banner-section .transparent-search-box .search-placeholder.data-v-57280228 {
  110. font-size: 28rpx;
  111. color: #999;
  112. /* 改为深色占位符 */
  113. flex: 1;
  114. }
  115. .banner-section .transparent-search-box.data-v-57280228:active {
  116. background: white;
  117. -webkit-transform: scale(0.98);
  118. transform: scale(0.98);
  119. }
  120. /* 商品分类区域 */
  121. .categories-section.data-v-57280228 {
  122. padding: 20rpx 20rpx 120rpx;
  123. /* 减少左右间距,与搜索框对齐,更接近边缘 */
  124. background: #ffffff;
  125. }
  126. .categories-section .category-block.data-v-57280228 {
  127. background: #ffffff;
  128. /* 保持白色背景 */
  129. border-radius: 30rpx;
  130. /* 减少圆角 */
  131. margin-bottom: 20rpx;
  132. /* 减少间距 */
  133. overflow: hidden;
  134. border: 1rpx solid #f0f0f0;
  135. /* 添加细边框 */
  136. box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
  137. /* 减少阴影 */
  138. }
  139. .categories-section .category-block .category-header.data-v-57280228 {
  140. display: flex;
  141. justify-content: space-between;
  142. align-items: center;
  143. padding: 25rpx 20rpx;
  144. /* 减少内边距,与外部容器对齐 */
  145. border-bottom: 1rpx solid #f5f5f5;
  146. /* 更淡的分割线 */
  147. }
  148. .categories-section .category-block .category-header .category-title.data-v-57280228 {
  149. font-size: 32rpx;
  150. /* 减少字体大小 */
  151. font-weight: 600;
  152. /* 减少字重 */
  153. color: #333;
  154. }
  155. .categories-section .category-block .category-header .more-btn.data-v-57280228 {
  156. display: flex;
  157. align-items: center;
  158. color: #FF6600;
  159. }
  160. .categories-section .category-block .category-header .more-btn .more-text.data-v-57280228 {
  161. font-size: 26rpx;
  162. /* 减少字体大小 */
  163. margin-right: 8rpx;
  164. }
  165. .categories-section .category-block .category-header .more-btn .more-arrow.data-v-57280228 {
  166. font-size: 22rpx;
  167. /* 减少字体大小 */
  168. }
  169. .categories-section .category-block .products-grid.data-v-57280228 {
  170. display: flex;
  171. padding: 20rpx 20rpx;
  172. /* 左右内边距与外部容器对齐 */
  173. gap: 15rpx;
  174. /* 使用gap替代margin */
  175. }
  176. .categories-section .category-block .products-grid .product-item.data-v-57280228 {
  177. flex: 1;
  178. background: #fafafa;
  179. /* 更淡的背景色 */
  180. border-radius: 12rpx;
  181. /* 减少圆角 */
  182. overflow: hidden;
  183. border: 1rpx solid #f0f0f0;
  184. /* 添加细边框 */
  185. /* 点击态效果 */
  186. }
  187. .categories-section .category-block .products-grid .product-item .product-image.data-v-57280228 {
  188. width: 100%;
  189. height: 180rpx;
  190. /* 调整图片高度 */
  191. background: #f5f5f5;
  192. object-fit: cover;
  193. }
  194. .categories-section .category-block .products-grid .product-item .product-info.data-v-57280228 {
  195. padding: 15rpx 12rpx;
  196. /* 减少内边距 */
  197. }
  198. .categories-section .category-block .products-grid .product-item .product-info .product-name.data-v-57280228 {
  199. font-size: 24rpx;
  200. /* 减少字体大小 */
  201. color: #333;
  202. display: block;
  203. text-align: center;
  204. overflow: hidden;
  205. text-overflow: ellipsis;
  206. white-space: nowrap;
  207. line-height: 1.3;
  208. }
  209. .categories-section .category-block .products-grid .product-item.data-v-57280228:active {
  210. -webkit-transform: scale(0.98);
  211. transform: scale(0.98);
  212. opacity: 0.8;
  213. }
  214. /* 加载状态 */
  215. .loading-container.data-v-57280228 {
  216. position: fixed;
  217. top: 0;
  218. left: 0;
  219. right: 0;
  220. bottom: 0;
  221. background: rgba(255, 255, 255, 0.95);
  222. display: flex;
  223. align-items: center;
  224. justify-content: center;
  225. z-index: 9999;
  226. }
  227. .loading-container .loading-content.data-v-57280228 {
  228. display: flex;
  229. flex-direction: column;
  230. align-items: center;
  231. }
  232. .loading-container .loading-content .loading-spinner.data-v-57280228 {
  233. width: 60rpx;
  234. height: 60rpx;
  235. border: 4rpx solid #f3f3f3;
  236. border-top: 4rpx solid #FF6600;
  237. border-radius: 50%;
  238. -webkit-animation: loading-spin-data-v-57280228 1s linear infinite;
  239. animation: loading-spin-data-v-57280228 1s linear infinite;
  240. margin-bottom: 20rpx;
  241. }
  242. .loading-container .loading-content .loading-text.data-v-57280228 {
  243. font-size: 28rpx;
  244. color: #666;
  245. }
  246. @-webkit-keyframes loading-spin-data-v-57280228 {
  247. 0% {
  248. -webkit-transform: rotate(0deg);
  249. transform: rotate(0deg);
  250. }
  251. 100% {
  252. -webkit-transform: rotate(360deg);
  253. transform: rotate(360deg);
  254. }
  255. }
  256. @keyframes loading-spin-data-v-57280228 {
  257. 0% {
  258. -webkit-transform: rotate(0deg);
  259. transform: rotate(0deg);
  260. }
  261. 100% {
  262. -webkit-transform: rotate(360deg);
  263. transform: rotate(360deg);
  264. }
  265. }
  266. /* 底部间距 */
  267. .bottom-spacer.data-v-57280228 {
  268. height: 100rpx;
  269. }
  270. /* 调试区域 */
  271. .debug-section.data-v-57280228 {
  272. position: fixed;
  273. bottom: 120rpx;
  274. right: 30rpx;
  275. background: rgba(0, 0, 0, 0.8);
  276. border-radius: 20rpx;
  277. overflow: hidden;
  278. z-index: 999;
  279. }
  280. .debug-section .debug-header.data-v-57280228 {
  281. padding: 20rpx;
  282. }
  283. .debug-section .debug-header .debug-title.data-v-57280228 {
  284. color: white;
  285. font-size: 24rpx;
  286. }
  287. .debug-section .debug-content.data-v-57280228 {
  288. border-top: 1rpx solid rgba(255, 255, 255, 0.2);
  289. padding: 20rpx;
  290. }
  291. .debug-section .debug-content .user-status.data-v-57280228 {
  292. display: flex;
  293. align-items: center;
  294. margin-bottom: 20rpx;
  295. }
  296. .debug-section .debug-content .user-status .status-text.data-v-57280228 {
  297. color: white;
  298. font-size: 22rpx;
  299. margin-right: 15rpx;
  300. flex: 1;
  301. }
  302. .debug-section .debug-content .debug-btn.data-v-57280228 {
  303. padding: 10rpx 20rpx;
  304. border-radius: 15rpx;
  305. border: none;
  306. font-size: 22rpx;
  307. margin-right: 10rpx;
  308. margin-bottom: 10rpx;
  309. }
  310. .debug-section .debug-content .debug-btn.login.data-v-57280228 {
  311. background: #007aff;
  312. color: white;
  313. }
  314. .debug-section .debug-content .debug-btn.logout.data-v-57280228 {
  315. background: #ff9500;
  316. color: white;
  317. }
  318. .debug-section .debug-content .debug-btn.clear.data-v-57280228 {
  319. background: #ff3b30;
  320. color: white;
  321. width: 100%;
  322. margin-right: 0;
  323. }
  324. /* 点击态效果 */
  325. .more-btn.data-v-57280228:active {
  326. opacity: 0.7;
  327. }
  328. .banner-item.data-v-57280228:active {
  329. opacity: 0.9;
  330. }