/**index.wxss**/ /* 强制隐藏所有滚动条 */ ::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; -webkit-appearance: none; background: transparent; } /* 修复页面整体布局 */ page { height: 100vh; display: flex; flex-direction: column; background: transparent; margin: 0; padding: 0; } .container { padding: 0; margin: 0; width: 100%; height: 100vh; display: flex; flex-direction: column; box-sizing: border-box; background: transparent; } /* 空状态提示样式 */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 100rpx 20rpx; text-align: center; min-height: 60vh; } .empty-state-text { font-size: 36rpx; color: #999; margin-bottom: 20rpx; } .empty-state-subtext { font-size: 28rpx; color: #ccc; } /* 为整个容器添加修复 */ .top-section-container { background: #ffffff; backdrop-filter: blur(10rpx); -webkit-backdrop-filter: blur(10rpx); padding: 20rpx 0 0rpx; margin-top: 140rpx; box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1); border-bottom: 1rpx solid #e0e0e0; display: flex; flex-direction: column; align-items: center; box-sizing: border-box; overflow: hidden; } /* 广告轮播图样式 */ .ad-carousel { width: 100%; margin: 0; overflow: hidden; border-radius: 0; box-shadow: none; height: 320rpx; position: relative; z-index: 1000; } .ad-swiper { width: 100%; height: 100%; } .ad-image { width: 100%; height: 100%; object-fit: cover; border-radius: 0; background-color: #f5f5f5; } /* 功能按钮样式 */ .function-buttons { display: flex; justify-content: space-around; align-items: center; padding: 10rpx 20rpx; width: 100%; max-width: 850rpx; box-sizing: border-box; background: #ffffff; margin: 0 auto; gap: 5rpx; border-radius: 12rpx; box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08); } .function-btn { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8rpx 0; margin: 0; text-align: center; background: #ffffff; border-radius: 12rpx; transition: all 0.3s ease; min-width: 90rpx; border: none; box-shadow: none; } .function-btn:hover { transform: translateY(-2rpx); background: #f5f5f5; box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1); } .function-btn:active { transform: translateY(0rpx) scale(0.96); box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.15); } .function-btn-icon { font-size: 42rpx; margin-bottom: 5rpx; transition: all 0.3s ease; display: block; } .function-btn:nth-child(1) .function-btn-icon { color: #1677ff; } .function-btn:nth-child(2) .function-btn-icon { color: #52c41a; } .function-btn:nth-child(3) .function-btn-icon { color: #faad14; } .function-btn-text { font-size: 18rpx; color: #333333; font-weight: 600; letter-spacing: 0; text-shadow: none; position: relative; z-index: 1; transition: all 0.3s ease; } .function-btn:hover .function-btn-icon { transform: scale(1.05); } .function-btn:hover .function-btn-text { color: #1677ff; } /* 确保所有主要区域背景一致 */ .top-section-container, .category-section, .goods-section, .goods-list { background: transparent; } /* 修复商品列表区域 */ .goods-section { flex: 1; display: flex; flex-direction: column; overflow: hidden; position: relative; padding-top: 0; margin: 0; border-radius: 0; box-shadow: none; background: transparent; z-index: 1; } /* 标题样式调整 */ .top-section-container .title { padding: 10rpx 0; font-size: 28rpx; font-weight: bold; text-align: center; color: #333; margin: 0; } /* 搜索区域样式调整 */ .top-section-container .search-section { padding: 0 30rpx 15rpx; width: 100%; max-width: 850rpx; } /* 搜索框样式 */ .top-section-container .search-bar { display: flex; align-items: center; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10rpx); -webkit-backdrop-filter: blur(10rpx); border-radius: 50rpx; padding: 5rpx 15rpx; box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1); min-height: 60rpx; } /* 修复商品列表区域 */ .goods-list { flex: 1; padding-top: 0; padding-bottom: 20rpx; height: auto; min-height: calc(100vh - 400rpx); /* 调整最小高度 */ box-sizing: border-box; overflow-y: auto; -webkit-overflow-scrolling: touch; background: transparent; } /* 品种筛选区域调整 - 确保在商品图层之上,搜索框之下 */ .category-section { width: 100%; max-width: 850rpx; background: transparent; padding: 10rpx 0; height: auto; min-height: 70rpx; box-sizing: border-box; box-shadow: none; margin: 0 auto 0rpx; } /* iOS专用修复 */ @media screen and (-webkit-min-device-pixel-ratio:0) { .top-section-container { -webkit-transform: translateZ(0); transform: translateZ(0); } /* 防止iOS弹性滚动导致的视觉问题 */ .goods-list { -webkit-overflow-scrolling: touch; } } /* 确保滚动视图有正确的容器高度 */ .goods-section { flex: 1; display: flex; flex-direction: column; height: auto; min-height: auto; position: relative; background: #f5f5f5; padding-bottom: calc(env(safe-area-inset-bottom) + 120rpx); overflow: hidden; } /* 标题样式 */ .title { font-size: 36rpx; font-weight: bold; margin: 10rpx 20rpx; color: #333; text-align: center; flex-shrink: 0; } /* 搜索区域样式 */ .search-section { width: 100%; margin: 0; box-sizing: border-box; } .search-bar { display: flex; align-items: center; gap: 10rpx; width: 100%; background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(10rpx); -webkit-backdrop-filter: blur(10rpx); padding: 6rpx; border-radius: 50rpx; box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08); box-sizing: border-box; border: 1rpx solid rgba(255, 255, 255, 0.5); } .search-input-wrapper { flex: 1; display: flex; align-items: center; position: relative; background-color: transparent; border-radius: 40rpx; padding: 0 10rpx; } .search-icon { margin: 0 10rpx; font-size: 28rpx; color: #999; transition: all 0.3s ease; } .search-input { flex: 1; height: 50rpx; font-size: 26rpx; color: #333; border: none; outline: none; background: transparent; } .search-placeholder { color: #999; } .region-selector { display: flex; align-items: center; gap: 5rpx; font-size: 24rpx; font-weight: 500; color: #333; padding: 10rpx 15rpx; background: transparent; border: none; transition: all 0.3s ease; margin-right: 10rpx; } .region-selector:hover { transform: translateY(-2rpx); box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1); } .region-arrow { font-size: 22rpx; font-weight: bold; color: #333; } .search-button { background-color: #1677ff; color: white; border: none; border-radius: 20rpx; padding: 20rpx 4rpx; font-size: 20rpx; font-weight: bold; white-space: nowrap; box-shadow: 0 2rpx 8rpx rgba(22, 119, 255, 0.3); min-width: 10rpx; text-align: center; } /* 重置button默认样式,允许自定义宽度 */ wx-button:not([size=mini]) { margin-left: initial; margin-right: initial; width: initial; } /* 地区选择器弹窗样式 */ .region-picker-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: flex-end; z-index: 9999; } .region-picker-container { background-color: white; width: 100%; border-radius: 20rpx 20rpx 0 0; padding: 20rpx; padding-bottom: 160rpx; box-sizing: border-box; } .region-picker-title { font-size: 32rpx; font-weight: bold; text-align: center; margin-bottom: 20rpx; color: #333; } .region-list { max-height: 500rpx; overflow-y: auto; margin-bottom: 20rpx; } .region-item { padding: 20rpx; font-size: 28rpx; color: #333; border-bottom: 1rpx solid #eee; } .region-item.active { color: #1677ff; font-weight: bold; background-color: #f0f7ff; } .confirm-region-btn { background-color: #1677ff; color: white; border: none; border-radius: 40rpx; padding: 20rpx; font-size: 28rpx; font-weight: bold; width: 100%; margin-top: 10rpx; box-shadow: 0 2rpx 8rpx rgba(22, 119, 255, 0.3); } /* 品种筛选区域样式 - 已合并到上方固定定位样式 */ .category-scroll { display: flex; gap: 16rpx; padding: 10rpx 20rpx; white-space: nowrap; overflow-x: auto; background: transparent; border-radius: 0; border: none; align-items: center; /* 移除justify-content: center,确保滚动时内容从左侧开始 */ } .egg-item { position: relative; padding: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-radius: 30rpx; display: flex; justify-content: center; align-items: center; transition: all 0.3s ease; box-shadow: none; border: 1rpx solid #e0e0e0; flex-shrink: 0; min-width: 120rpx; height: 56rpx; } .egg-item.active { background: #1677ff; color: white; border: 1rpx solid transparent; } .egg-inner { font-size: 26rpx; color: #555; font-weight: 500; text-align: center; white-space: nowrap; padding: 0 20rpx; } .egg-item.active .egg-inner { color: #ffffff; font-size: 26rpx; } /* 侧边栏按钮样式 - 白色半透明毛玻璃质感 */ .sidebar-btn { position: fixed; left: 20rpx; z-index: 1002; width: 120rpx; height: 80rpx; background-color: rgba(255, 255, 255, 0.85); backdrop-filter: blur(10rpx); -webkit-backdrop-filter: blur(10rpx); border-radius: 40rpx; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.15); transition: all 0.3s ease; border: 1rpx solid rgba(255, 255, 255, 0.5); touch-action: none; } .sidebar-btn:hover { transform: scale(1.05); box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.2); /* 增强阴影 */ background-color: rgba(255, 255, 255, 0.95); /* 提高透明度 */ } /* 侧边栏按钮隐藏状态 */ .sidebar-btn.hidden { left: -80rpx; transform: scale(1); opacity: 1; background-color: rgba(255, 255, 255, 0.85); } /* 侧边栏按钮内容区域 */ .sidebar-btn-content { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; padding: 10rpx; } /* 招商入驻入口 */ .sidebar-entry { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16rpx 12rpx; border-radius: 12rpx; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.4); transition: all 0.2s ease; } .sidebar-entry:active { transform: scale(0.95); box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.3); } /* 图标容器 */ .sidebar-icon-wrap { width: 48rpx; height: 48rpx; display: flex; justify-content: center; align-items: center; margin-bottom: 8rpx; } .sidebar-icon { font-size: 36rpx; } .sidebar-text { font-size: 20rpx; color: #ffffff; font-weight: 600; text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.2); } .sidebar-text-black { font-size: 20rpx; color: #333333; font-weight: 600; } /* 箭头按钮 */ .sidebar-arrow { width: 40rpx; height: 80rpx; background-color: rgba(0, 0, 0, 0.05); /* 淡灰色背景 */ border-radius: 0 40rpx 40rpx 0; display: flex; justify-content: center; align-items: center; transition: all 0.3s ease; cursor: pointer; } .sidebar-arrow:hover { background-color: rgba(0, 0, 0, 0.1); /* 加深背景色 */ } /* 箭头图标 */ .arrow-icon { font-size: 20rpx; color: #666; /* 深色箭头 */ font-weight: bold; transition: transform 0.3s ease, color 0.3s ease; display: inline-block; } .arrow-icon.arrow-left { transform: rotate(0deg); } .arrow-icon.arrow-right { transform: rotate(180deg); } /* 侧边栏样式 */ .sidebar-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 9998; animation: fadeIn 0.3s ease; } .sidebar { position: fixed; top: 0; left: 0; width: 60%; height: 100%; background-color: white; z-index: 9999; box-shadow: 4rpx 0 20rpx rgba(0, 0, 0, 0.2); animation: slideIn 0.3s ease; display: flex; flex-direction: column; } /* 底部弹出样式 */ .sidebar.bottom-popup { top: auto; bottom: 130rpx; /* 避开底部导航栏 */ left: 0; right: 0; width: 100%; height: calc(80% - 100rpx); /* 调整高度,减去底部导航栏高度 */ max-height: calc(1000rpx - 100rpx); border-radius: 40rpx 40rpx 0 0; animation: slideUp 0.3s ease; box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.2); } /* 筛选内容区域 */ .filter-content { display: flex; flex: 1; overflow: hidden; } /* 左侧分类列表 */ .filter-left { width: 25%; background-color: #f5f5f5; overflow-y: auto; } .filter-category-item { padding: 30rpx 0; text-align: center; font-size: 28rpx; color: #333; border-bottom: 1rpx solid #e0e0e0; transition: all 0.3s ease; } .filter-category-item.active { background-color: white; color: #1677ff; font-weight: bold; border-right: 4rpx solid #1677ff; } .filter-category-item:hover { background-color: #e8f4ff; } /* 右侧内容区域 */ .filter-right { width: 75%; background-color: white; overflow-y: auto; } .filter-right-content { padding: 20rpx; } .filter-option { display: inline-block; padding: 16rpx 24rpx; margin: 12rpx; border-radius: 20rpx; border: 2rpx solid #e0e0e0; font-size: 26rpx; color: #666; background-color: white; transition: all 0.3s ease; white-space: nowrap; } .filter-option.active { background-color: #1677ff; color: white; border-color: #1677ff; } .filter-option:hover { border-color: #1677ff; color: #1677ff; } .filter-option.all-option { width: calc(100% - 48rpx); text-align: center; margin: 12rpx; background-color: #f0f0f0; border-color: #d9d9d9; } .filter-option.all-option.active { background-color: #1677ff; color: white; border-color: #1677ff; } /* 动画效果 */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideIn { from { transform: translateX(-100%); } to { transform: translateX(0); } } .sidebar-title { font-size: 36rpx; font-weight: bold; color: #333; padding: 40rpx 20rpx; border-bottom: 2rpx solid #eee; text-align: center; } .sidebar-menu { flex: 1; padding: 20rpx 0; } .sidebar-item { display: flex; align-items: center; padding: 30rpx 40rpx; transition: all 0.3s ease; border-bottom: 1rpx solid #f0f0f0; } .sidebar-item:hover { background-color: #f5f5f5; padding-left: 50rpx; } /* 高级筛选侧边栏样式 */ .advanced-filter-sidebar { left: auto; right: 0; width: 75%; animation: slideInRight 0.3s ease; } /* 右侧滑入动画 */ @keyframes slideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } } /* 底部滑入动画 */ @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } } /* 筛选区域样式 */ .filter-section { padding: 20rpx; border-bottom: 1rpx solid #f0f0f0; } .filter-title { font-size: 32rpx; font-weight: bold; color: #333; margin-bottom: 20rpx; padding-left: 10rpx; } .filter-options { display: flex; flex-wrap: wrap; gap: 16rpx; padding: 0 10rpx; } .filter-option { padding: 12rpx 24rpx; border-radius: 20rpx; border: 2rpx solid #e0e0e0; font-size: 26rpx; color: #666; background-color: white; transition: all 0.3s ease; white-space: nowrap; } .filter-option.active { background-color: #1677ff; color: white; border-color: #1677ff; } .filter-option:hover { border-color: #1677ff; color: #1677ff; } /* 操作按钮样式 */ .filter-actions { display: flex; padding: 20rpx; gap: 20rpx; border-top: 2rpx solid #eee; position: sticky; bottom: 0; background-color: white; z-index: 10; box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1); } .filter-action-btn { flex: 1; padding: 20rpx; border-radius: 40rpx; font-size: 28rpx; font-weight: bold; text-align: center; transition: all 0.3s ease; } .filter-action-btn.reset { background-color: white; color: #666; border: 2rpx solid #e0e0e0; } .filter-action-btn.apply { background-color: #1677ff; color: white; border: none; box-shadow: 0 4rpx 12rpx rgba(22, 119, 255, 0.3); } .filter-action-btn.reset:hover { background-color: #f5f5f5; border-color: #1677ff; color: #1677ff; } .filter-action-btn.apply:hover { background-color: #4096ff; box-shadow: 0 6rpx 16rpx rgba(22, 119, 255, 0.4); } /* 自定义下拉菜单样式 */ .custom-picker { width: 100%; padding: 0 10rpx; position: relative; } .custom-picker-trigger { display: flex; justify-content: space-between; align-items: center; padding: 16rpx 24rpx; border: 2rpx solid #e0e0e0; border-radius: 20rpx; font-size: 26rpx; color: #666; background-color: white; transition: all 0.3s ease; } .custom-picker-trigger:hover { border-color: #1677ff; } .custom-picker-arrow { font-size: 20rpx; color: #999; margin-left: 10rpx; transition: transform 0.3s ease; } .custom-picker-arrow.rotate { transform: rotate(180deg); } .custom-picker-options { position: absolute; top: 100%; left: 10rpx; right: 10rpx; margin-top: 8rpx; max-height: 400rpx; overflow-y: auto; border: 2rpx solid #e0e0e0; border-radius: 16rpx; background-color: white; box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1); z-index: 1002; } .custom-picker-option { padding: 16rpx 24rpx; font-size: 26rpx; color: #666; transition: all 0.3s ease; border-bottom: 1rpx solid #f0f0f0; } .custom-picker-option:last-child { border-bottom: none; border-radius: 0 0 16rpx 16rpx; } .custom-picker-option:first-child { border-radius: 16rpx 16rpx 0 0; } .custom-picker-option:hover { background-color: #f5f5f5; color: #1677ff; } .custom-picker-option.active { background-color: #1677ff; color: white; } .sidebar-item-icon { font-size: 36rpx; margin-right: 20rpx; } .sidebar-item-text { font-size: 28rpx; color: #333; font-weight: bold; } /* 商品区域样式 */ .goods-section { background-color: transparent; padding: 0; margin: 0; border-radius: 0; box-shadow: none; flex: 1; overflow-y: auto; width: 100%; box-sizing: border-box; } .goods-title { font-size: 28rpx; font-weight: bold; color: #333; margin-bottom: 20rpx; } .goods-list { overflow-y: auto; -webkit-overflow-scrolling: touch; } .goods-list-container { padding: 0rpx 24rpx; padding-bottom: 20rpx; padding-bottom: calc(env(safe-area-inset-bottom) + 140rpx); } .grid-container { display: flex; flex-wrap: wrap; gap: 16rpx; width: 100%; padding: 0 10rpx; box-sizing: border-box; } .grid-item { width: calc((100% - 16rpx) / 2); /* 每个商品项占50%宽度,留出16rpx的间距 */ } .goods-item { width: 100%; border-radius: 24rpx; overflow: hidden; transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); transform-style: preserve-3d; perspective: 1000rpx; } .goods-card { width: 100%; border-radius: 20rpx; overflow: hidden; background: rgba(255, 255, 255, 0.82); backdrop-filter: blur(10rpx); -webkit-backdrop-filter: blur(10rpx); box-shadow: 0 6rpx 24rpx rgba(0, 0, 0, 0.15), 0 0 0 1rpx rgba(0, 0, 0, 0.08), inset 0 0 0 1rpx rgba(255, 255, 255, 0.95); border: 2rpx solid rgba(200, 200, 200, 0.5); display: flex; flex-direction: column; } .goods-item:hover { transform: translateY(-8rpx); box-shadow: 0 16rpx 40rpx rgba(0, 0, 0, 0.22), 0 0 0 2rpx rgba(0, 0, 0, 0.12), inset 0 0 0 1rpx rgba(255, 255, 255, 1); } .goods-item:active { transform: translateY(-4rpx); } .goods-item.long-card { margin-bottom: 24rpx; } .goods-item.long-card .goods-info { min-height: 200rpx; padding: 24rpx; } .goods-item.short-card { margin-bottom: 16rpx; } .goods-item.short-card .goods-info { min-height: 140rpx; padding: 16rpx; } .goods-item.short-card .goods-name { -webkit-line-clamp: 1; min-height: 40rpx; } .goods-item.short-card .goods-spec { margin-bottom: 8rpx; } .goods-item.short-card .goods-price { font-size: 32rpx; } .left-column .goods-item { transform: translateZ(10rpx); } .right-column .goods-item { transform: translateZ(-10rpx); } .goods-image-container { position: relative; width: 100%; padding-bottom: 100%; overflow: hidden; background: rgba(0, 0, 0, 0.05); } .goods-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #eee; transition: all 0.4s ease; } .goods-item:hover .goods-image { transform: scale(1.05); } .goods-tag { position: absolute; top: 16rpx; left: 16rpx; background: rgba(255, 90, 90, 0.85); backdrop-filter: blur(8rpx); color: white; font-size: 22rpx; padding: 8rpx 16rpx; border-radius: 20rpx; font-weight: bold; box-shadow: 0 2rpx 8rpx rgba(255, 90, 90, 0.3); border: 1rpx solid rgba(255, 255, 255, 0.3); } .goods-info { padding: 20rpx; flex: 1; display: flex; flex-direction: column; background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(10rpx); border-top: 1rpx solid rgba(255, 255, 255, 0.5); } .goods-name { font-size: 28rpx; font-weight: bold; color: #333; margin-bottom: 12rpx; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: 60rpx; line-height: 1.4; text-shadow: 0 1rpx 2rpx rgba(255, 255, 255, 0.8); } .goods-spec { font-size: 24rpx; color: #666; margin-bottom: 12rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1rpx 2rpx rgba(255, 255, 255, 0.8); } .goods-price { font-size: 36rpx; font-weight: bold; color: #ff4d4f; margin-bottom: 12rpx; text-shadow: 0 1rpx 2rpx rgba(255, 255, 255, 0.8); } .goods-status-row { display: flex; flex-wrap: nowrap; gap: 8rpx; margin-bottom: 12rpx; } .status-tag { font-size: 20rpx; padding: 4rpx 8rpx; border-radius: 4rpx; font-weight: 600; display: inline-block; white-space: nowrap; flex-shrink: 0; } .status-tag.supply-spot { background: rgba(82, 196, 26, 0.15); color: #389e0d; border: 1rpx solid rgba(82, 196, 26, 0.5); } .status-tag.supply-presale { background: rgba(255, 154, 28, 0.15); color: #d46b08; border: 1rpx solid rgba(255, 154, 28, 0.5); } .status-tag.auth-verified { background: rgba(24, 144, 255, 0.15); color: #096dd9; border: 1rpx solid rgba(24, 144, 255, 0.5); } .status-tag.auth-unverified { background: rgba(140, 140, 140, 0.15); color: #595959; border: 1rpx solid rgba(140, 140, 140, 0.5); } .status-tag.negotiate-yes { background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(8rpx); -webkit-backdrop-filter: blur(8rpx); border: 1rpx solid rgba(200, 200, 200, 0.5); box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.08); color: #000000; } .status-tag.source-yes { background: rgba(24, 144, 255, 0.15); color: #096dd9; border: 1rpx solid rgba(24, 144, 255, 0.5); } .status-tag.negotiate-no { background: rgba(180, 180, 180, 0.15); color: #595959; border: 1rpx solid rgba(180, 180, 180, 0.5); } .status-tag.source-third { background: rgba(24, 144, 255, 0.15); color: #096dd9; border: 1rpx solid rgba(24, 144, 255, 0.5); } .status-tag.source-platform { background: rgba(82, 196, 26, 0.15); color: #389e0d; border: 1rpx solid rgba(82, 196, 26, 0.5); } .status-tag.source-unverified { background: rgba(255, 122, 69, 0.15); color: #ff7a45; border: 1rpx solid rgba(255, 122, 69, 0.5); } .status-tag.item-count { background: rgba(82, 196, 26, 0.15); color: #389e0d; border: 1rpx solid rgba(82, 196, 26, 0.5); } /* product-status-row 容器样式 */ .product-status-row { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 6rpx; width: 100%; height: 36rpx; overflow: visible; position: relative; z-index: 9999; margin: 4rpx 0; background: transparent; } /* 货源类型标签 - 完全根据字数动态调整宽度 */ .product-status-row .source-tag { width: auto; min-width: 50rpx; max-width: 120rpx; white-space: nowrap; flex-shrink: 0; font-size: 16rpx; padding: 6rpx 8rpx; height: 28rpx; line-height: 16rpx; display: flex; align-items: center; justify-content: center; border-radius: 6rpx; border: 1rpx solid rgba(0, 0, 0, 0.1); background: rgba(24, 144, 255, 0.1); color: #096dd9; box-sizing: border-box; } /* 议价状态标签 - 完全根据字数动态调整宽度 */ .product-status-row .negotiate-tag { width: auto; min-width: 50rpx; max-width: 80rpx; white-space: nowrap; text-align: center; flex-shrink: 0; font-size: 16rpx; padding: 6rpx 8rpx; height: 28rpx; line-height: 16rpx; display: flex; align-items: center; justify-content: center; border-radius: 6rpx; border: 1rpx solid rgba(0, 0, 0, 0.1); background: rgba(255, 255, 255, 0.8); color: #333; box-sizing: border-box; } /* 库存标签 - 根据字数动态调整宽度 */ .product-status-row .stock-tag { width: auto; min-width: 70rpx; max-width: 160rpx; white-space: nowrap; text-align: center; font-size: 16rpx; padding: 6rpx 8rpx; height: 28rpx; line-height: 16rpx; display: flex; align-items: center; justify-content: center; border-radius: 6rpx; border: 1rpx solid rgba(0, 0, 0, 0.1); background: rgba(82, 196, 26, 0.1); color: #389e0d; box-sizing: border-box; } .goods-footer { display: flex; justify-content: space-between; font-size: 22rpx; color: #888; margin-top: auto; padding-top: 12rpx; border-top: 1rpx solid rgba(255, 255, 255, 0.2); text-shadow: 0 1rpx 2rpx rgba(255, 255, 255, 0.8); } .goods-region-bg { background: rgba(255, 255, 255, 0.5); backdrop-filter: blur(8rpx); -webkit-backdrop-filter: blur(8rpx); border-radius: 8rpx; padding: 6rpx 14rpx; box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08); border: none; } .goods-region { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 4rpx 10rpx; background: linear-gradient(135deg, rgba(22, 119, 255, 0.08) 0%, rgba(64, 150, 255, 0.05) 100%); border-radius: 12rpx; font-size: 18rpx; } .goods-reserved { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 空商品样式 */ .empty-goods { width: 100%; text-align: center; padding: 60rpx 0; color: #999; font-size: 28rpx; } /* 加载更多样式 */ .loading-more { width: 100%; text-align: center; padding: 20rpx 0; color: #999; font-size: 24rpx; } /* 弹窗样式 */ .auth-modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; z-index: 9999; } .auth-modal-container { background-color: #fff; border-radius: 32rpx; width: 90%; max-width: 720rpx; padding: 60rpx 40rpx 40rpx; box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.2); transition: all 0.3s ease; border: 2rpx solid rgba(255, 255, 255, 0.8); box-sizing: border-box; } .auth-modal-title { font-size: 44rpx; font-weight: bold; color: #222; text-align: center; margin-bottom: 40rpx; letter-spacing: 1rpx; } .auth-modal-content { font-size: 32rpx; line-height: 1.6; color: #555; text-align: center; margin-bottom: 50rpx; padding: 0 20rpx; width: 100%; box-sizing: border-box; word-break: break-word; } .auth-modal-buttons { display: flex; flex-direction: column; gap: 20rpx; padding: 0 20rpx; width: 100%; box-sizing: border-box; } .auth-primary-button { background-color: #07c160; color: #fff; font-size: 36rpx; font-weight: 600; line-height: 1.6; border-radius: 12rpx; padding: 32rpx 0; width: 100%; box-shadow: 0 4rpx 12rpx rgba(7, 193, 96, 0.3); transition: all 0.3s ease; border: none; margin: 0; min-width: auto; } .auth-primary-button:active { transform: translateY(2rpx); box-shadow: 0 3rpx 12rpx rgba(7, 193, 96, 0.5); } .auth-primary-button::after { border: none; } .auth-cancel-button { background-color: #fff; color: #666; font-size: 36rpx; font-weight: 500; line-height: 1.6; border-radius: 12rpx; padding: 32rpx 0; width: 100%; border: 1rpx solid #e0e0e0; transition: all 0.3s ease; margin: 0; min-width: auto; } .auth-cancel-button:active { transform: translateY(2rpx); border-color: #d0d0d0; box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1); } .auth-cancel-button::after { border: none; } /* 头像选择样式 */ .avatar-section { text-align: center; margin-bottom: 40rpx; } .avatar-wrapper { padding: 0; background: none; border: none; } .avatar { width: 160rpx; height: 160rpx; border-radius: 50%; } /* 表单样式 */ .form-group { margin-bottom: 30rpx; } .form-label { font-size: 28rpx; margin-bottom: 10rpx; display: block; } .form-input { border: 1rpx solid #eee; border-radius: 8rpx; padding: 20rpx; width: 100%; max-width: 100%; box-sizing: border-box; font-size: 28rpx; } .form-actions { text-align: center; margin-top: 40rpx; } .confirm-button { background-color: #07c160; color: white; width: 100%; border-radius: 8rpx; border: none; } /* 登录提示样式 */ .login-hint { margin-top: 50rpx; font-size: 28rpx; color: #666; text-align: center; } .link-text { color: #1677ff; } /* 图片预览样式 */ .image-preview-mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.9); display: flex; justify-content: center; align-items: center; z-index: 9999; } .image-preview-swiper { width: 100%; height: 100%; } .preview-image { width: 100%; height: 100%; display: block; } .image-preview-close { position: absolute; top: 40rpx; right: 40rpx; width: 60rpx; height: 60rpx; background-color: rgba(0, 0, 0, 0.5); border-radius: 30rpx; display: flex; justify-content: center; align-items: center; z-index: 10000; } .close-icon { color: white; font-size: 36rpx; font-weight: bold; } /* ==================== 瀑布流布局(Masonry) ==================== */ /* 骨架屏样式 */ .skeleton-container { padding: 0; background: transparent; margin-top: 180rpx; } .skeleton-grid { display: flex; flex-wrap: wrap; gap: 16rpx; width: 100%; } .skeleton-grid-item { width: calc((100% - 16rpx) / 2); background: #fff; border-radius: 16rpx; overflow: hidden; } .skeleton-image { width: 100%; height: 350rpx; background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%); background-size: 200% 100%; animation: skeleton-loading 1.5s infinite; } .skeleton-title { height: 32rpx; margin: 20rpx 16rpx 12rpx; background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%); background-size: 200% 100%; animation: skeleton-loading 1.5s infinite; border-radius: 8rpx; } .skeleton-title.short { width: 60%; margin-top: 0; } .skeleton-footer { margin: 16rpx; } .skeleton-price { width: 80rpx; height: 32rpx; background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%); background-size: 200% 100%; animation: skeleton-loading 1.5s infinite; border-radius: 8rpx; } @keyframes skeleton-loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .goods-list-container { padding: 0 20rpx; padding-bottom: 20rpx; min-height: calc(100% - 40rpx); padding-bottom: calc(env(safe-area-inset-bottom) + 140rpx); } /* 网格容器 */ .grid-container { display: flex; flex-wrap: wrap; gap: 16rpx; width: 100%; margin-top: 20rpx; background: transparent; } /* 网格商品项 */ .grid-item { width: calc((100% - 16rpx) / 2); border-radius: 16rpx; overflow: hidden; transition: all 0.3s ease; } .grid-item:active { transform: scale(0.98); opacity: 0.9; } /* 商品卡片 */ .product-card { width: 100%; height: 450rpx; /* 固定高度 */ background: #fff; border-radius: 16rpx; overflow: hidden; box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08); transition: all 0.3s ease; display: flex; flex-direction: column; position: relative; } .product-card:active { transform: scale(0.98); box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.1); } /* 商品图片区域 */ .product-image-wrapper { position: relative; width: 100%; height: 320rpx; background: #f5f5f5; border-radius: 16rpx 16rpx 0 0; overflow: hidden; } /* 统一媒体元素样式 */ .product-media { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; background-color: #f5f5f5; } /* 视频样式增强 */ video.product-media { object-fit: cover; z-index: 1; } /* 售空商品半透明覆盖层 */ .sold-out-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.6); z-index: 2; border-radius: 16rpx; } /* 促销标签 */ .promo-tag { position: absolute; top: 0; left: 0; padding: 6rpx 12rpx; font-size: 20rpx; color: #fff; border-radius: 0 0 12rpx 0; z-index: 3; font-weight: 600; } .promo-tag.presale { background: linear-gradient(135deg, #ff6b00 0%, #ff8c00 100%); box-shadow: 0 2rpx 8rpx rgba(255, 107, 0, 0.3); } .promo-tag.in-stock { background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%); box-shadow: 0 2rpx 8rpx rgba(82, 196, 26, 0.3); } .promo-tag.source { background: linear-gradient(135deg, #e00 0%, #ff4d4f 100%); box-shadow: 0 2rpx 8rpx rgba(255, 0, 0, 0.3); } .promo-tag.sold-out { background: linear-gradient(135deg, #a92a2aff 0%, #a6a6a6 100%); box-shadow: 0 2rpx 8rpx rgba(140, 140, 140, 0.3); } /* 售空水印样式 */ .sold-out-watermark { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.4); z-index: 10; transform: rotate(-15deg); } .sold-out-text { font-size: 56rpx; font-weight: 700; color: #fff; text-shadow: 2rpx 2rpx 8rpx rgba(0, 0, 0, 0.5); letter-spacing: 8rpx; border: 6rpx solid rgba(255, 255, 255, 0.8); padding: 16rpx 40rpx; border-radius: 8rpx; } /* 商品信息区域 */ .product-info { padding: 16rpx; height: auto; min-height: 210rpx; display: flex; flex-direction: column; justify-content: space-between; gap: 10rpx; box-sizing: border-box; } /* 第一行布局:货源类型 | 产品名称 | 货源描述 */ .product-first-row { display: block; width: 100%; line-height: 1.4; } /* 商品标题 */ .product-title { font-size: 26rpx; color: #000000; font-weight: 700; display: inline; margin-right: 8rpx; } /* 商品描述 */ .product-description { font-size: 26rpx; color: #000000; font-weight: 700; display: inline; word-break: break-word; } /* 状态标签样式 */ .status-tag { display: inline; margin-right: 8rpx; } /* 已浏览商品样式 */ .product-title.viewed, .product-description.viewed { color: #999999; opacity: 0.8; } /* 商品库存行 */ .product-stock-row { display: flex; align-items: center; } /* 销量和地区 - 淘宝风格 */ .product-meta { display: flex; justify-content: space-between; align-items: center; font-size: 22rpx; color: #999; margin-top: 8rpx; } /* 移除旧的产品状态行样式 */ .product-status-row { display: none; } /* 商品卡片 */ .product-card { width: 100%; height: auto; min-height: 450rpx; background: #fff; border-radius: 16rpx; overflow: hidden; box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08); transition: all 0.3s ease; display: flex; flex-direction: column; position: relative; } .sales-count { color: #999; background: rgba(255, 77, 79, 0.08); padding: 4rpx 10rpx; border-radius: 6rpx; font-size: 20rpx; font-weight: 500; } .product-location { max-width: 80rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 20rpx; color: #141212ff; } /* 加载更多 */ .loading-more { display: flex; justify-content: center; align-items: center; padding: 30rpx 0; width: 100%; } .loading-spinner { width: 32rpx; height: 32rpx; border: 3rpx solid #e5e5e5; border-top-color: #1677ff; border-radius: 50%; animation: spin 0.8s linear infinite; margin-right: 12rpx; } .loading-text { font-size: 26rpx; color: #999; } @keyframes spin { to { transform: rotate(360deg); } } /* 无更多数据 */ .no-more-data { display: flex; align-items: center; justify-content: center; padding: 30rpx 20rpx; padding-bottom: calc(env(safe-area-inset-bottom) + 10rpx); color: #999; font-size: 26rpx; gap: 20rpx; } .no-more-data::before, .no-more-data::after { content: ''; flex: 1; height: 1rpx; background: #e5e5e5; max-width: 80rpx; } /* 广告位样式 */ .ad-card { position: relative; border-radius: 16rpx; overflow: hidden; background: #fff; box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08); margin-bottom: 16rpx; z-index: 1; /* 修复真机遮挡问题:确保广告不被fixed元素遮挡 */ transform: translateZ(0); -webkit-transform: translateZ(0); } /* 完整卡片广告 */ .ad-full-card { width: 100%; height: 350rpx; /* 修复遮挡:增加层级 */ position: relative; z-index: 1001; } /* 轮播广告样式 */ .ad-swiper { width: 100%; height: 100%; } .ad-image { width: 100%; height: 350rpx; } /* 半高图片广告 */ .ad-half-image { width: 100%; height: 180rpx; /* 修复遮挡:增加层级 */ position: relative; z-index: 1001; } .ad-image-half { width: 100%; height: 180rpx; } /* 广告标签 */ .ad-badge { position: absolute; top: 16rpx; right: 16rpx; background: rgba(0, 0, 0, 0.5); color: #fff; font-size: 20rpx; padding: 4rpx 12rpx; border-radius: 6rpx; } /* 广告点击效果 */ .ad-card:active { opacity: 0.85; } /* 空商品状态 */ .empty-goods { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 100rpx 0; width: 100%; } .empty-icon { font-size: 80rpx; margin-bottom: 20rpx; } .empty-text { font-size: 30rpx; color: #999; margin-bottom: 12rpx; } .empty-hint { font-size: 24rpx; color: #ccc; } /* 回到顶部按钮 */ .back-to-top-btn { position: fixed; right: 24rpx; bottom: 180rpx; width: 60rpx; height: 60rpx; background: rgba(255, 255, 255, 0.25); backdrop-filter: blur(16rpx); -webkit-backdrop-filter: blur(16rpx); border-radius: 50%; display: flex; justify-content: center; align-items: center; box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15); border: 2rpx solid rgba(255, 255, 255, 0.4); opacity: 0; transform: translateY(20rpx); transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); z-index: 1002; pointer-events: none; } .back-to-top-btn.visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .back-to-top-icon { font-size: 24rpx; color: #1677ff; font-weight: 600; line-height: 1; text-shadow: 0 1rpx 2rpx rgba(255, 255, 255, 0.8); } .back-to-top-text { font-size: 30rpx; color: #1677ff; margin-top: 4rpx; font-weight: bold; text-shadow: 0 1rpx 2rpx rgba(255, 255, 255, 0.8); }