@charset "UTF-8"; /* 水平间距 */ /* 水平间距 */ .homepage.data-v-57280228 { min-height: 100vh; background: #ffffff; /* 改为白色背景,符合UI设计 */ } /* 轮播图区域 */ .banner-section.data-v-57280228 { position: relative; height: 550rpx; /* 恢复原来的高度 */ overflow: hidden; background: #ffffff; /* 确保背景为白色 */ /* 状态栏占位 */ /* 透明搜索框容器 - 调整位置到轮播图上方 */ /* 透明搜索框 */ } .banner-section .status-bar-placeholder.data-v-57280228 { position: absolute; top: 0; left: 0; right: 0; z-index: 1; } .banner-section .banner-swiper.data-v-57280228 { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .banner-section .banner-item.data-v-57280228 { width: 100%; height: 100%; position: relative; } .banner-section .banner-item .banner-image.data-v-57280228 { width: 100%; height: 100%; object-fit: cover; } .banner-section .banner-item .banner-overlay.data-v-57280228 { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0, 0, 0, 0.3)); /* 减少遮罩透明度 */ padding: 30rpx; } .banner-section .banner-item .banner-overlay .banner-title.data-v-57280228 { color: white; font-size: 32rpx; font-weight: bold; } .banner-section .banner-indicator.data-v-57280228 { position: absolute; bottom: 30rpx; /* 调整到底部右侧,符合UI设计 */ right: 30rpx; background: rgba(255, 255, 255, 0.9); /* 改为白色半透明背景 */ color: #333; /* 改为深色文字 */ padding: 8rpx 16rpx; border-radius: 20rpx; font-size: 24rpx; z-index: 3; border: 1rpx solid rgba(0, 0, 0, 0.1); /* 添加细边框 */ } .banner-section .transparent-search-container.data-v-57280228 { position: absolute; left: 0; right: 0; z-index: 10; padding: 0 20rpx; /* 减少左右间距,更接近边缘对齐 */ top: 80rpx; /* 固定位置,在状态栏下方 */ } .banner-section .transparent-search-box.data-v-57280228 { background: rgba(255, 255, 255, 0.6); /* 改为半透明背景 */ -webkit-backdrop-filter: blur(10rpx); backdrop-filter: blur(10rpx); border: 1rpx solid rgba(255, 255, 255, 0.3); /* 改为半透明白色边框 */ border-radius: 50rpx; height: 80rpx; /* 增加高度 */ display: flex; align-items: center; padding: 0 30rpx; box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1); /* 减少阴影 */ transition: all 0.3s ease; /* 点击态效果 */ } .banner-section .transparent-search-box .search-icon.data-v-57280228 { font-size: 32rpx; color: #666; /* 改为深色图标 */ margin-right: 20rpx; } .banner-section .transparent-search-box .search-placeholder.data-v-57280228 { font-size: 28rpx; color: #999; /* 改为深色占位符 */ flex: 1; } .banner-section .transparent-search-box.data-v-57280228:active { background: white; -webkit-transform: scale(0.98); transform: scale(0.98); } /* 商品分类区域 */ .categories-section.data-v-57280228 { padding: 20rpx 20rpx 120rpx; /* 减少左右间距,与搜索框对齐,更接近边缘 */ background: #ffffff; } .categories-section .category-block.data-v-57280228 { background: #ffffff; /* 保持白色背景 */ border-radius: 30rpx; /* 减少圆角 */ margin-bottom: 20rpx; /* 减少间距 */ overflow: hidden; border: 1rpx solid #f0f0f0; /* 添加细边框 */ box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05); /* 减少阴影 */ } .categories-section .category-block .category-header.data-v-57280228 { display: flex; justify-content: space-between; align-items: center; padding: 25rpx 20rpx; /* 减少内边距,与外部容器对齐 */ border-bottom: 1rpx solid #f5f5f5; /* 更淡的分割线 */ } .categories-section .category-block .category-header .category-title.data-v-57280228 { font-size: 32rpx; /* 减少字体大小 */ font-weight: 600; /* 减少字重 */ color: #333; } .categories-section .category-block .category-header .more-btn.data-v-57280228 { display: flex; align-items: center; color: #FF6600; } .categories-section .category-block .category-header .more-btn .more-text.data-v-57280228 { font-size: 26rpx; /* 减少字体大小 */ margin-right: 8rpx; } .categories-section .category-block .category-header .more-btn .more-arrow.data-v-57280228 { font-size: 22rpx; /* 减少字体大小 */ } .categories-section .category-block .products-grid.data-v-57280228 { display: flex; padding: 20rpx 20rpx; /* 左右内边距与外部容器对齐 */ gap: 15rpx; /* 使用gap替代margin */ } .categories-section .category-block .products-grid .product-item.data-v-57280228 { flex: 1; background: #fafafa; /* 更淡的背景色 */ border-radius: 12rpx; /* 减少圆角 */ overflow: hidden; border: 1rpx solid #f0f0f0; /* 添加细边框 */ /* 点击态效果 */ } .categories-section .category-block .products-grid .product-item .product-image.data-v-57280228 { width: 100%; height: 180rpx; /* 调整图片高度 */ background: #f5f5f5; object-fit: cover; } .categories-section .category-block .products-grid .product-item .product-info.data-v-57280228 { padding: 15rpx 12rpx; /* 减少内边距 */ } .categories-section .category-block .products-grid .product-item .product-info .product-name.data-v-57280228 { font-size: 24rpx; /* 减少字体大小 */ color: #333; display: block; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.3; } .categories-section .category-block .products-grid .product-item.data-v-57280228:active { -webkit-transform: scale(0.98); transform: scale(0.98); opacity: 0.8; } /* 加载状态 */ .loading-container.data-v-57280228 { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255, 255, 255, 0.95); display: flex; align-items: center; justify-content: center; z-index: 9999; } .loading-container .loading-content.data-v-57280228 { display: flex; flex-direction: column; align-items: center; } .loading-container .loading-content .loading-spinner.data-v-57280228 { width: 60rpx; height: 60rpx; border: 4rpx solid #f3f3f3; border-top: 4rpx solid #FF6600; border-radius: 50%; -webkit-animation: loading-spin-data-v-57280228 1s linear infinite; animation: loading-spin-data-v-57280228 1s linear infinite; margin-bottom: 20rpx; } .loading-container .loading-content .loading-text.data-v-57280228 { font-size: 28rpx; color: #666; } @-webkit-keyframes loading-spin-data-v-57280228 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes loading-spin-data-v-57280228 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /* 底部间距 */ .bottom-spacer.data-v-57280228 { height: 100rpx; } /* 调试区域 */ .debug-section.data-v-57280228 { position: fixed; bottom: 120rpx; right: 30rpx; background: rgba(0, 0, 0, 0.8); border-radius: 20rpx; overflow: hidden; z-index: 999; } .debug-section .debug-header.data-v-57280228 { padding: 20rpx; } .debug-section .debug-header .debug-title.data-v-57280228 { color: white; font-size: 24rpx; } .debug-section .debug-content.data-v-57280228 { border-top: 1rpx solid rgba(255, 255, 255, 0.2); padding: 20rpx; } .debug-section .debug-content .user-status.data-v-57280228 { display: flex; align-items: center; margin-bottom: 20rpx; } .debug-section .debug-content .user-status .status-text.data-v-57280228 { color: white; font-size: 22rpx; margin-right: 15rpx; flex: 1; } .debug-section .debug-content .debug-btn.data-v-57280228 { padding: 10rpx 20rpx; border-radius: 15rpx; border: none; font-size: 22rpx; margin-right: 10rpx; margin-bottom: 10rpx; } .debug-section .debug-content .debug-btn.login.data-v-57280228 { background: #007aff; color: white; } .debug-section .debug-content .debug-btn.logout.data-v-57280228 { background: #ff9500; color: white; } .debug-section .debug-content .debug-btn.clear.data-v-57280228 { background: #ff3b30; color: white; width: 100%; margin-right: 0; } /* 点击态效果 */ .more-btn.data-v-57280228:active { opacity: 0.7; } .banner-item.data-v-57280228:active { opacity: 0.9; }