.choiceness-container.data-v-11fd5532 { width: 100%; height: 100vh; background-color: #f5f6f8; display: flex; flex-direction: column; } /* 自定义沉浸式头部 */ .custom-header.data-v-11fd5532 { position: fixed; top: 0; left: 0; right: 0; background: rgba(255, 255, 255, 0.98); -webkit-backdrop-filter: blur(20rpx); backdrop-filter: blur(20rpx); box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.03); z-index: 999; } .status-bar.data-v-11fd5532 { width: 100%; } .nav-bar.data-v-11fd5532 { height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 30rpx; } .nav-left.data-v-11fd5532 { width: 80rpx; height: 100%; display: flex; align-items: center; } .back-icon.data-v-11fd5532 { font-size: 38rpx; color: #333333; font-weight: bold; } .nav-title.data-v-11fd5532 { font-size: 34rpx; font-weight: bold; color: #333333; } .nav-right.data-v-11fd5532 { width: 80rpx; } .header-placeholder.data-v-11fd5532 { width: 100%; flex-shrink: 0; } /* 顶部深紫渐变横向滚动专区 (1:1 原生惊艳质感) */ .top-scroll-brands-section.data-v-11fd5532 { background: linear-gradient(135deg, #8a2be2 0%, #4b0082 100%); padding: 24rpx 0 16rpx; width: 100%; flex-shrink: 0; } .top-brands-scroll.data-v-11fd5532 { white-space: nowrap; width: 100%; padding: 0 24rpx; box-sizing: border-box; } .t-brand-card.data-v-11fd5532 { display: inline-block; width: 160rpx; height: 120rpx; margin-right: 16rpx; border-radius: 16rpx; overflow: hidden; box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.12); vertical-align: top; } .t-brand-card.data-v-11fd5532:last-child { margin-right: 48rpx; } /* 卡片上半部纯白底包裹 Logo */ .t-logo-box.data-v-11fd5532 { height: 72rpx; /* 60% */ background-color: #ffffff; display: flex; align-items: center; justify-content: center; padding: 10rpx; box-sizing: border-box; } .t-logo-img.data-v-11fd5532 { width: 100%; height: 100%; } /* 卡片下半部粉桃底包裹文字 */ .t-name-box.data-v-11fd5532 { height: 48rpx; /* 40% */ background-color: #ffe4e1; display: flex; align-items: center; justify-content: center; padding: 0 6rpx; } .t-name-text.data-v-11fd5532 { font-size: 20rpx; color: #8b4513; font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; text-align: center; } /* 底部游标指示底栏 */ .t-indicator-wrap.data-v-11fd5532 { display: flex; justify-content: center; margin-top: 14rpx; } .t-indicator-bg.data-v-11fd5532 { width: 80rpx; height: 8rpx; background: rgba(255, 255, 255, 0.25); border-radius: 4rpx; position: relative; overflow: hidden; } .t-indicator-slider.data-v-11fd5532 { position: absolute; top: 0; width: 30rpx; height: 100%; background: #ffffff; border-radius: 4rpx; transition: left 0.05s linear; } /* 页面横幅标语区 (替换为设计定稿的高清专场背书照片容器) */ .page-banner-img-box.data-v-11fd5532 { margin: 20rpx 30rpx 0; border-radius: 20rpx; overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .banner-photo.data-v-11fd5532 { width: 100%; display: block; } /* 横向分类选项卡导航区 */ .category-tabs-container.data-v-11fd5532 { background: #ffffff; border-top-left-radius: 24rpx; border-top-right-radius: 24rpx; margin: 0 30rpx; padding: 0 10rpx; box-shadow: 0 -4rpx 12rpx rgba(0,0,0,0.02); border-bottom: 1rpx solid #f8f8f8; flex-shrink: 0; } .category-tabs-scroll.data-v-11fd5532 { white-space: nowrap; width: 100%; height: 88rpx; box-sizing: border-box; } .cat-tab-item.data-v-11fd5532 { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; height: 88rpx; padding: 0 24rpx; position: relative; vertical-align: top; } .cat-tab-text.data-v-11fd5532 { font-size: 28rpx; color: #666666; transition: all 0.2s linear; } .active-text.data-v-11fd5532 { color: #8a2be2; font-weight: bold; font-size: 30rpx; } .cat-tab-line.data-v-11fd5532 { position: absolute; bottom: 8rpx; width: 32rpx; height: 4rpx; background: #8a2be2; border-radius: 2rpx; } /* 品牌流式与单品区 */ .brand-list-scroll.data-v-11fd5532 { flex: 1; width: 100%; overflow-y: auto; } /* 新增:高保真空载/无数据底板展示区 */ .empty-loaded-tip.data-v-11fd5532 { background-color: #f8f8fb; border-radius: 20rpx; margin: 20rpx 30rpx 40rpx; padding: 60rpx 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } .elt-top-line.data-v-11fd5532 { width: 32rpx; height: 4rpx; background-color: #8a2be2; border-radius: 2rpx; margin-bottom: 24rpx; } .elt-text.data-v-11fd5532 { font-size: 26rpx; color: #999999; letter-spacing: 2rpx; } /* 调整首图圆角拼合:上面已被导航栏圆角包裹,下方列表无缝紧随 */ .brand-card-item.data-v-11fd5532 { background: #ffffff; margin: 20rpx 30rpx 30rpx; border-radius: 24rpx; overflow: hidden; box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04); } /* 顶部英雄大背图区域 */ .brand-hero.data-v-11fd5532 { position: relative; height: 240rpx; width: 100%; } .hero-bg.data-v-11fd5532 { width: 100%; height: 100%; } .hero-overlay.data-v-11fd5532 { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.65)); } .brand-meta.data-v-11fd5532 { position: absolute; bottom: 20rpx; left: 24rpx; right: 24rpx; display: flex; align-items: flex-end; } .logo-box.data-v-11fd5532 { width: 100rpx; height: 100rpx; background: #ffffff; border-radius: 50%; padding: 10rpx; box-shadow: 0 4rpx 10rpx rgba(0,0,0,0.1); flex-shrink: 0; z-index: 2; } .logo-img.data-v-11fd5532 { width: 100%; height: 100%; border-radius: 50%; } .meta-info.data-v-11fd5532 { flex: 1; margin-left: 20rpx; color: #ffffff; z-index: 2; padding-bottom: 4rpx; } .name-row.data-v-11fd5532 { display: flex; align-items: center; } .brand-name.data-v-11fd5532 { font-size: 32rpx; font-weight: bold; text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.3); } .brand-tag.data-v-11fd5532 { background: linear-gradient(to right, #ffd700, #ff8c00); color: #ffffff; font-size: 18rpx; padding: 2rpx 10rpx; border-radius: 10rpx; margin-left: 12rpx; font-weight: bold; } .brand-desc.data-v-11fd5532 { font-size: 22rpx; color: rgba(255,255,255,0.9); margin-top: 4rpx; } .tags-row.data-v-11fd5532 { display: flex; flex-wrap: wrap; margin-top: 8rpx; } .p-tag.data-v-11fd5532 { font-size: 18rpx; background: rgba(255,255,255,0.2); -webkit-backdrop-filter: blur(8rpx); backdrop-filter: blur(8rpx); padding: 2rpx 12rpx; border-radius: 6rpx; margin-right: 10rpx; } /* 热门商品矩阵 */ .goods-matrix.data-v-11fd5532 { display: flex; padding: 24rpx; justify-content: space-between; } .matrix-item.data-v-11fd5532 { width: 31%; display: flex; flex-direction: column; } .goods-img-wrapper.data-v-11fd5532 { width: 100%; aspect-ratio: 1 / 1; border-radius: 12rpx; overflow: hidden; position: relative; background: #f8f8f8; } .goods-img.data-v-11fd5532 { width: 100%; height: 100%; } .badge-tag.data-v-11fd5532 { position: absolute; top: 0; left: 0; background: linear-gradient(to right, #ff416c, #ff4b2b); color: #ffffff; font-size: 18rpx; padding: 2rpx 8rpx; border-bottom-right-radius: 12rpx; z-index: 2; } .sold-overlay.data-v-11fd5532 { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.5); color: #ffffff; font-size: 18rpx; text-align: center; padding: 2rpx 0; } .goods-info.data-v-11fd5532 { padding-top: 12rpx; display: flex; flex-direction: column; flex: 1; } .goods-title.data-v-11fd5532 { font-size: 24rpx; color: #333333; line-height: 1.3; height: 62rpx; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .price-row.data-v-11fd5532 { display: flex; align-items: baseline; margin-top: 8rpx; } .price-current.data-v-11fd5532 { color: #ff416c; font-weight: bold; } .symbol.data-v-11fd5532 { font-size: 20rpx; } .value.data-v-11fd5532 { font-size: 30rpx; } .price-old.data-v-11fd5532 { font-size: 20rpx; color: #bbbbbb; text-decoration: line-through; margin-left: 6rpx; } .coupon-capsule.data-v-11fd5532 { display: flex; align-items: center; border: 1rpx solid #ff416c; border-radius: 6rpx; overflow: hidden; margin-top: auto; width: -webkit-fit-content; width: fit-content; } .c-left.data-v-11fd5532 { background: #ff416c; color: #ffffff; font-size: 18rpx; padding: 0 6rpx; } .c-right.data-v-11fd5532 { color: #ff416c; font-size: 18rpx; padding: 0 8rpx; } /* 栏目分隔头 */ .section-divider.data-v-11fd5532 { display: flex; align-items: center; justify-content: center; padding: 20rpx 30rpx 30rpx; } .divider-line.data-v-11fd5532 { width: 80rpx; height: 2rpx; background: linear-gradient(to right, transparent, #dddddd); } .divider-line.data-v-11fd5532:last-child { background: linear-gradient(to left, transparent, #dddddd); } .divider-title.data-v-11fd5532 { font-size: 30rpx; font-weight: bold; color: #333333; padding: 0 20rpx; display: flex; align-items: center; } .fire-icon.data-v-11fd5532 { margin-right: 8rpx; font-size: 32rpx; } /* 底部双列爆品网格 */ .brand-sale-grid.data-v-11fd5532 { display: flex; flex-wrap: wrap; padding: 0 30rpx; justify-content: space-between; } .bs-card.data-v-11fd5532 { width: 48.5%; background: #ffffff; border-radius: 20rpx; overflow: hidden; margin-bottom: 24rpx; box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.04); display: flex; flex-direction: column; } .bs-img-box.data-v-11fd5532 { width: 100%; aspect-ratio: 1 / 1; position: relative; background: #f8f8f8; } .bs-img.data-v-11fd5532 { width: 100%; height: 100%; } .bs-badge.data-v-11fd5532 { position: absolute; top: 0; left: 0; background: linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%); color: #ffffff; font-size: 18rpx; padding: 4rpx 12rpx; border-bottom-right-radius: 16rpx; font-weight: bold; z-index: 2; } .bs-sold.data-v-11fd5532 { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.45); color: #ffffff; font-size: 20rpx; text-align: center; padding: 4rpx 0; -webkit-backdrop-filter: blur(4rpx); backdrop-filter: blur(4rpx); } .bs-info.data-v-11fd5532 { padding: 16rpx; display: flex; flex-direction: column; flex: 1; } .bs-title.data-v-11fd5532 { font-size: 26rpx; font-weight: bold; color: #333333; line-height: 1.35; height: 70rpx; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-bottom: 12rpx; } .bs-price-wrap.data-v-11fd5532 { display: flex; align-items: baseline; margin-top: auto; } .bs-current.data-v-11fd5532 { color: #ff416c; font-weight: bold; } .bs-symbol.data-v-11fd5532 { font-size: 20rpx; } .bs-val.data-v-11fd5532 { font-size: 34rpx; } .bs-old.data-v-11fd5532 { font-size: 20rpx; color: #bbbbbb; text-decoration: line-through; margin-left: 8rpx; } .bs-coupon.data-v-11fd5532 { display: flex; align-items: center; border: 1rpx solid #ff416c; border-radius: 8rpx; overflow: hidden; width: -webkit-fit-content; width: fit-content; margin-top: 10rpx; } .bsc-tag.data-v-11fd5532 { background: #ff416c; color: #ffffff; font-size: 18rpx; padding: 0 8rpx; font-weight: bold; } .bsc-num.data-v-11fd5532 { color: #ff416c; font-size: 18rpx; padding: 0 10rpx; font-weight: bold; } /* 最底端独立品牌身份识别底条 */ .bs-brand-bar.data-v-11fd5532 { display: flex; align-items: center; background: #fafafa; padding: 10rpx 16rpx; border-top: 1rpx solid #f0f0f0; margin-top: 12rpx; } .bsb-logo.data-v-11fd5532 { width: 32rpx; height: 32rpx; border-radius: 50%; margin-right: 10rpx; flex-shrink: 0; background: #ffffff; border: 1rpx solid #eeeeee; } .bsb-name.data-v-11fd5532 { font-size: 20rpx; color: #666666; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; font-weight: 500; } .bottom-tip.data-v-11fd5532 { text-align: center; font-size: 22rpx; color: #bbbbbb; padding: 30rpx 0 50rpx; }