.container.data-v-12be2f83 { background-color: #f5f6f8; } /* 头部区域 */ .header.data-v-12be2f83 { position: fixed; top: 0; left: 0; right: 0; background: #ffffff; padding-bottom: 10rpx; z-index: 100; } .status-bar.data-v-12be2f83 { width: 100%; } .placeholder-style.data-v-12be2f83 { color: #999; } /* 搜索区域 (1:1 还原) */ .search-section.data-v-12be2f83 { display: flex; align-items: center; padding: 20rpx 30rpx; justify-content: space-between; } .search-bar-wrap.data-v-12be2f83 { flex: 1; height: 72rpx; background: #ffffff; border: 2rpx solid #ff416c; border-radius: 36rpx; display: flex; align-items: center; padding-left: 30rpx; padding-right: 4rpx; /* 为内部按钮留出微小边距 */ position: relative; } .search-icon.data-v-12be2f83 { font-size: 30rpx; color: #ff416c; margin-right: 16rpx; } .search-input.data-v-12be2f83 { flex: 1; font-size: 26rpx; color: #333; } .search-btn-red.data-v-12be2f83 { width: 130rpx; height: 64rpx; background: linear-gradient(to right, #ff715a, #ff416c); color: #ffffff; font-size: 28rpx; font-weight: bold; border-radius: 32rpx; display: flex; align-items: center; justify-content: center; } .search-right-ad.data-v-12be2f83 { width: 100rpx; height: 80rpx; margin-left: 20rpx; } .nav-scroll.data-v-12be2f83 { white-space: nowrap; padding: 0 20rpx; } .nav-item.data-v-12be2f83 { display: inline-block; padding: 10rpx 30rpx; position: relative; } .nav-text.data-v-12be2f83 { font-size: 30rpx; color: #333; transition: all 0.3s; } .nav-item.active .nav-text.data-v-12be2f83 { color: #ff416c; font-size: 34rpx; font-weight: bold; } .nav-line.data-v-12be2f83 { position: absolute; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 40rpx; height: 6rpx; background-color: #ff416c; border-radius: 6rpx; } /* 主体滚动区域 */ .main-content.data-v-12be2f83 { min-height: 100vh; } /* 轮播图 */ .banner-box.data-v-12be2f83 { padding: 0 30rpx 10rpx; } .swiper.data-v-12be2f83 { height: 320rpx; border-radius: 24rpx; overflow: hidden; box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05); } .banner-img.data-v-12be2f83 { width: 100%; height: 100%; } /* 修改主轮播指示器 */ .swiper.data-v-12be2f83 :deep(.uni-swiper-dot) { width: 12rpx; height: 12rpx; background: rgba(255, 255, 255, 0.8) !important; } .swiper.data-v-12be2f83 :deep(.uni-swiper-dot-active) { width: 30rpx; height: 12rpx; border-radius: 6rpx; background: #ff416c !important; } /* 垂直通知栏 */ .notice-bar.data-v-12be2f83 { margin: 0 30rpx 16rpx; background-color: #fff0f3; height: 64rpx; border-radius: 32rpx; display: flex; align-items: center; padding: 0 24rpx; } .notice-icon-box.data-v-12be2f83 { margin-right: 16rpx; display: flex; align-items: center; } .notice-speaker.data-v-12be2f83 { font-size: 28rpx; color: #ff416c; } .notice-swiper.data-v-12be2f83 { flex: 1; height: 100%; } .notice-item.data-v-12be2f83 { height: 100%; display: flex; align-items: center; } .notice-avatar.data-v-12be2f83 { width: 40rpx; height: 40rpx; border-radius: 50%; margin-right: 12rpx; } .notice-text.data-v-12be2f83 { font-size: 24rpx; color: #ff416c; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 金刚区 */ .grid-menu-wrap.data-v-12be2f83 { background: #ffffff; margin-bottom: 20rpx; padding-bottom: 16rpx; } .grid-swiper.data-v-12be2f83 { height: 340rpx; } .grid-menu.data-v-12be2f83 { display: flex; flex-wrap: wrap; padding: 20rpx 0 0; } .grid-item.data-v-12be2f83 { width: 20%; display: flex; flex-direction: column; align-items: center; margin-bottom: 24rpx; position: relative; } .menu-icon.data-v-12be2f83 { width: 88rpx; height: 88rpx; margin-bottom: 12rpx; } .menu-text.data-v-12be2f83 { font-size: 24rpx; color: #333; } .menu-tag.data-v-12be2f83 { position: absolute; top: -10rpx; right: 4rpx; background: linear-gradient(to right, #ff715a, #ff416c); color: #fff; font-size: 16rpx; padding: 2rpx 8rpx; border-radius: 16rpx; border-bottom-left-radius: 0; white-space: nowrap; -webkit-transform: scale(0.9); transform: scale(0.9); } .grid-indicator.data-v-12be2f83 { display: flex; justify-content: center; margin-top: 4rpx; } .indicator-bg.data-v-12be2f83 { width: 60rpx; height: 8rpx; background: #eeeeee; border-radius: 4rpx; position: relative; overflow: hidden; } .indicator-slider.data-v-12be2f83 { position: absolute; left: 0; top: 0; height: 100%; background: #ff416c; border-radius: 4rpx; transition: -webkit-transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease; } .ad-img.data-v-12be2f83 { width: 100%; height: 100%; } /* 活动专区 - 胶囊轮播图 */ .ad-swiper-box.data-v-12be2f83 { margin: 0 30rpx 16rpx; } .ad-swiper.data-v-12be2f83 { height: 180rpx; border-radius: 90rpx; /* 高度的一半,形成胶囊形状 */ overflow: hidden; /* 强制子元素继承圆角 */ -webkit-transform: translateY(0); transform: translateY(0); -webkit-mask-image: -webkit-radial-gradient(white, black); } .ad-swiper-img.data-v-12be2f83 { width: 100%; height: 100%; border-radius: 90rpx; } /* 修改 swiper 指示点样式 */ .ad-swiper.data-v-12be2f83 :deep(.uni-swiper-dot) { width: 12rpx; height: 6rpx; border-radius: 4rpx; } .ad-swiper.data-v-12be2f83 :deep(.uni-swiper-dot-active) { width: 30rpx; border-radius: 4rpx; } /* 今日值得买 (1:1 还原) */ .worth-buy-card.data-v-12be2f83 { background-color: #ffffff; margin: 0 30rpx 16rpx; border-radius: 24rpx; padding: 24rpx 24rpx 10rpx; box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.03); } .worth-header.data-v-12be2f83 { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12rpx; } .worth-header-left.data-v-12be2f83 { display: flex; align-items: center; } .worth-icon.data-v-12be2f83 { width: 36rpx; height: 36rpx; margin-right: 12rpx; } .worth-title.data-v-12be2f83 { font-size: 34rpx; font-weight: bold; color: #333; } .worth-header-right.data-v-12be2f83 { display: flex; align-items: center; } .avatar-list.data-v-12be2f83 { display: flex; margin-right: 12rpx; } .avatar.data-v-12be2f83 { width: 40rpx; height: 40rpx; border-radius: 50%; border: 2rpx solid #fff; margin-right: -12rpx; } .avatar-more.data-v-12be2f83 { width: 40rpx; height: 40rpx; border-radius: 50%; background: #666; color: #fff; font-size: 16rpx; display: flex; align-items: center; justify-content: center; border: 2rpx solid #fff; } .flash-sale-count.data-v-12be2f83 { font-size: 24rpx; color: #ff416c; } .worth-subtitle-tag.data-v-12be2f83 { display: inline-block; background-color: #f2f2f2; color: #999; font-size: 22rpx; padding: 4rpx 16rpx; border-radius: 8rpx; margin-bottom: 24rpx; } .worth-tabs.data-v-12be2f83 { display: flex; background-color: #f7f7f7; border-radius: 12rpx; height: 80rpx; margin-bottom: 24rpx; overflow: visible; } .worth-tab-item.data-v-12be2f83 { flex: 1; display: flex; align-items: center; justify-content: center; font-size: 28rpx; color: #666; position: relative; } .worth-tab-item.active.data-v-12be2f83 { background: linear-gradient(to right, #ff715a, #ff416c); color: #fff; border-radius: 12rpx; font-weight: bold; } .active-arrow.data-v-12be2f83 { position: absolute; bottom: -12rpx; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 0; height: 0; border-left: 12rpx solid transparent; border-right: 12rpx solid transparent; border-top: 12rpx solid #ff416c; } .worth-swiper.data-v-12be2f83 { height: 700rpx; /* 进一步压缩高度,消除底部留白 */ } .worth-swiper.data-v-12be2f83 :deep(.uni-swiper-dots) { bottom: 0rpx !important; /* 使指示点更贴近底部 */ } .worth-goods-item.data-v-12be2f83 { display: flex; padding: 20rpx 0; border-bottom: 1rpx solid #f2f2f2; } .worth-goods-item.data-v-12be2f83:last-child { border-bottom: none; } .worth-goods-img.data-v-12be2f83 { width: 240rpx; height: 240rpx; border-radius: 16rpx; margin-right: 20rpx; background-color: #f9f9f9; } .worth-goods-info.data-v-12be2f83 { flex: 1; display: flex; flex-direction: column; justify-content: space-between; } .worth-goods-title.data-v-12be2f83 { font-size: 28rpx; color: #333; line-height: 40rpx; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .worth-goods-labels.data-v-12be2f83 { margin-top: 8rpx; display: flex; flex-wrap: nowrap; overflow: hidden; } .worth-label.data-v-12be2f83 { font-size: 18rpx; padding: 2rpx 10rpx; border-radius: 6rpx; margin-right: 12rpx; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 1; } .worth-label.red.data-v-12be2f83 { color: #ff416c; border: 1rpx solid #ff416c; } .worth-label.orange.data-v-12be2f83 { color: #ff715a; border: 1rpx solid #ff715a; } .worth-price-row.data-v-12be2f83 { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12rpx; } .worth-price-tip.data-v-12be2f83 { font-size: 24rpx; color: #ff416c; margin-right: 4rpx; } .worth-price-symbol.data-v-12be2f83 { font-size: 24rpx; color: #ff416c; font-weight: bold; } .worth-price-val.data-v-12be2f83 { font-size: 40rpx; color: #ff416c; font-weight: bold; margin-right: 12rpx; } .worth-old-price.data-v-12be2f83 { font-size: 22rpx; color: #999; text-decoration: line-through; } .worth-coupon-tag.data-v-12be2f83 { background-color: #ff416c; color: #fff; font-size: 22rpx; padding: 4rpx 12rpx; border-radius: 4rpx; position: relative; } .worth-buy-btn-group.data-v-12be2f83 { display: flex; height: 64rpx; margin-top: 16rpx; border-radius: 32rpx; overflow: hidden; } .worth-btn-left.data-v-12be2f83 { flex: 1.2; background: #fff3d6; color: #8b572a; font-size: 24rpx; display: flex; align-items: center; justify-content: center; } .worth-btn-right.data-v-12be2f83 { flex: 1; background: linear-gradient(to right, #ff715a, #ff416c); color: #fff; font-size: 26rpx; font-weight: bold; display: flex; align-items: center; justify-content: center; } /* 推荐页面 */ .recommend-zone.data-v-12be2f83 { display: flex; margin: 0 30rpx 20rpx; height: 320rpx; justify-content: space-between; } .recommend-left.data-v-12be2f83 { width: 48%; background: linear-gradient(135deg, #fff0f0, #ffe4e4); border-radius: 20rpx; padding: 20rpx; position: relative; } .recommend-right.data-v-12be2f83 { width: 48%; display: flex; flex-direction: column; justify-content: space-between; } .rec-box.data-v-12be2f83 { height: 47%; background: #ffffff; border-radius: 20rpx; padding: 16rpx; display: flex; align-items: center; justify-content: space-between; } .rec-title.data-v-12be2f83 { font-size: 30rpx; font-weight: bold; color: #333; margin-bottom: 6rpx; } .rec-sub.data-v-12be2f83 { font-size: 22rpx; color: #ff4b2b; background: rgba(255, 75, 43, 0.1); padding: 2rpx 10rpx; border-radius: 10rpx; display: inline-block; } .rec-img-large.data-v-12be2f83 { width: 180rpx; height: 180rpx; position: absolute; bottom: 10rpx; right: 10rpx; } .rec-text-wrap.data-v-12be2f83 { flex: 1; } .rec-img-small.data-v-12be2f83 { width: 100rpx; height: 100rpx; } /* 品牌特卖区 */ .brand-zone.data-v-12be2f83 { margin: 0 30rpx 20rpx; background: #ffffff; border-radius: 20rpx; padding: 20rpx; } .zone-header.data-v-12be2f83 { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20rpx; } .zone-title.data-v-12be2f83 { font-size: 32rpx; font-weight: bold; color: #333; } .zone-more.data-v-12be2f83 { font-size: 24rpx; color: #999; } .brand-scroll.data-v-12be2f83 { white-space: nowrap; } .brand-item.data-v-12be2f83 { display: inline-block; width: 180rpx; margin-right: 20rpx; text-align: center; } .brand-logo.data-v-12be2f83 { width: 80rpx; height: 40rpx; margin-bottom: 10rpx; display: block; margin-left: auto; margin-right: auto; } .brand-goods-img.data-v-12be2f83 { width: 180rpx; height: 180rpx; border-radius: 12rpx; background-color: #f5f5f5; } .brand-price.data-v-12be2f83 { color: #ff416c; font-size: 28rpx; font-weight: bold; margin-top: 10rpx; } .brand-old-price.data-v-12be2f83 { color: #999; font-size: 20rpx; text-decoration: line-through; } /* 品牌特卖区 (1:1 还原) */ .brand-sale-module.data-v-12be2f83 { margin: 0 30rpx 16rpx; background: #ffffff; border-radius: 24rpx; padding: 24rpx 24rpx 10rpx; box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.03); } .brand-header.data-v-12be2f83 { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24rpx; } .brand-header-left.data-v-12be2f83 { display: flex; align-items: center; } .brand-tag-icon.data-v-12be2f83 { width: 32rpx; height: 32rpx; margin-right: 12rpx; } .brand-title.data-v-12be2f83 { font-size: 34rpx; font-weight: bold; color: #333; margin-right: 16rpx; } .brand-subtitle-tag.data-v-12be2f83 { background-color: #f2f2f2; color: #999; font-size: 22rpx; padding: 4rpx 12rpx; border-radius: 6rpx; } .brand-more.data-v-12be2f83 { font-size: 26rpx; color: #999; } .brand-highlight.data-v-12be2f83 { height: 180rpx; position: relative; border-radius: 20rpx; overflow: hidden; margin-bottom: 20rpx; } .highlight-bg.data-v-12be2f83 { width: 100%; height: 100%; -webkit-filter: brightness(0.9); filter: brightness(0.9); } .highlight-content.data-v-12be2f83 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; padding: 0 30rpx; background: rgba(0,0,0,0.1); } .brand-logo-white-box.data-v-12be2f83 { width: 130rpx; height: 130rpx; background: #ffffff; border-radius: 16rpx; display: flex; align-items: center; justify-content: center; margin-right: 24rpx; box-shadow: 0 4rpx 10rpx rgba(0,0,0,0.1); } .brand-logo-img.data-v-12be2f83 { width: 100rpx; height: 100rpx; } .brand-feature-info.data-v-12be2f83 { flex: 1; } .brand-name-row.data-v-12be2f83 { color: rgba(255, 255, 255, 0.9); font-size: 24rpx; display: flex; align-items: center; margin-bottom: 8rpx; } .brand-name-row .arrow.data-v-12be2f83 { margin-left: 8rpx; font-size: 22rpx; } .brand-discount-text.data-v-12be2f83 { color: #fff; font-size: 32rpx; margin-bottom: 14rpx; font-weight: bold; } .brand-promo-tags.data-v-12be2f83 { display: flex; } .p-tag.data-v-12be2f83 { background: rgba(0, 0, 0, 0.25); color: #fff; font-size: 20rpx; padding: 4rpx 16rpx; border-radius: 20rpx; margin-right: 12rpx; } .brand-goods-swiper.data-v-12be2f83 { height: 700rpx; } .brand-goods-grid.data-v-12be2f83 { display: flex; justify-content: space-between; } .brand-grid-item.data-v-12be2f83 { width: 31%; } .b-img-wrap.data-v-12be2f83 { position: relative; width: 100%; height: 210rpx; border-radius: 12rpx; overflow: hidden; background-color: #f9f9f9; margin-bottom: 12rpx; } .anniversary-tag.data-v-12be2f83 { position: absolute; top: 0; left: 0; background: linear-gradient(to right, #ff715a, #ff416c); color: #fff; font-size: 18rpx; padding: 4rpx 10rpx; border-bottom-right-radius: 12rpx; display: flex; align-items: center; z-index: 1; } .a-icon.data-v-12be2f83 { font-size: 16rpx; margin-right: 4rpx; } .b-goods-img.data-v-12be2f83 { width: 100%; height: 100%; } .b-sold-overlay.data-v-12be2f83 { position: absolute; bottom: 0; left: 0; width: 100%; background: rgba(0,0,0,0.4); color: #fff; font-size: 20rpx; text-align: center; padding: 4rpx 0; } .b-goods-title.data-v-12be2f83 { font-size: 24rpx; color: #333; line-height: 32rpx; height: 64rpx; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-bottom: 8rpx; } .b-promo-label.data-v-12be2f83 { font-size: 20rpx; color: #4a4aff; border: 1rpx solid #4a4aff; padding: 0 8rpx; border-radius: 4rpx; display: inline-block; margin-bottom: 12rpx; } .b-price-row.data-v-12be2f83 { display: flex; justify-content: space-between; align-items: center; } .b-price-blue.data-v-12be2f83 { color: #4a4aff; font-size: 32rpx; font-weight: bold; } .b-coupon-tag.data-v-12be2f83 { background: #ff416c; color: #fff; font-size: 18rpx; padding: 2rpx 8rpx; border-radius: 4rpx; } /* 平台切换选项卡 */ .platform-tabs.data-v-12be2f83 { display: flex; padding: 20rpx 40rpx; background-color: #f5f6f8; } .p-tab-item.data-v-12be2f83 { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; } .p-tab-item text.data-v-12be2f83 { font-size: 32rpx; color: #333; font-weight: 500; transition: all 0.3s; } .p-tab-item.active text.data-v-12be2f83 { color: #ff416c; font-weight: bold; font-size: 34rpx; } .p-active-line.data-v-12be2f83 { width: 40rpx; height: 4rpx; background-color: #ff416c; border-radius: 4rpx; margin-top: 8rpx; } /* 商品列表 (1:1 还原) */ .goods-list.data-v-12be2f83 { display: flex; flex-wrap: wrap; padding: 10rpx 24rpx; justify-content: space-between; } .goods-item.data-v-12be2f83 { width: calc(50% - 12rpx); background: #ffffff; border-radius: 20rpx; overflow: hidden; margin-bottom: 24rpx; box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.03); } .g-img-wrap.data-v-12be2f83 { position: relative; width: 100%; height: 340rpx; background-color: #f9f9f9; } .g-anniversary-tag.data-v-12be2f83 { position: absolute; top: 0; left: 0; background: linear-gradient(to right, #ff715a, #ff416c); color: #fff; font-size: 18rpx; padding: 4rpx 10rpx; border-bottom-right-radius: 12rpx; display: flex; align-items: center; z-index: 2; } .g-brand-tag.data-v-12be2f83 { position: absolute; top: 0; right: 0; background: rgba(138, 93, 255, 0.8); color: #fff; font-size: 20rpx; padding: 4rpx 12rpx; border-bottom-left-radius: 12rpx; z-index: 2; } .g-bottom-banner.data-v-12be2f83 { position: absolute; bottom: 0; left: 0; width: 100%; background: rgba(0, 200, 83, 0.9); color: #fff; font-size: 18rpx; padding: 6rpx 0; text-align: center; z-index: 2; } .goods-img.data-v-12be2f83 { width: 100%; height: 100%; } .goods-info.data-v-12be2f83 { padding: 20rpx 16rpx; } .goods-title.data-v-12be2f83 { font-size: 28rpx; color: #333; line-height: 40rpx; height: 80rpx; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-bottom: 12rpx; } .tag-tmall.data-v-12be2f83, .tag-taobao.data-v-12be2f83 { color: #fff; font-size: 20rpx; padding: 2rpx 8rpx; border-radius: 6rpx; margin-right: 8rpx; display: inline-block; vertical-align: middle; } .tag-tmall.data-v-12be2f83 { background-color: #ff0036; } .tag-taobao.data-v-12be2f83 { background-color: #ff5000; } .goods-lowest-tag.data-v-12be2f83 { display: inline-block; border: 1rpx solid #ff416c; color: #ff416c; font-size: 20rpx; padding: 0 12rpx; border-radius: 20rpx; margin-bottom: 16rpx; opacity: 0.8; } /* 修正最低价标签样式 */ .goods-lowest-price.data-v-12be2f83 { display: inline-block; border: 1rpx solid #ffcdd2; color: #ff416c; font-size: 22rpx; padding: 2rpx 16rpx; border-radius: 20rpx; margin-bottom: 16rpx; background: #fff5f5; } .goods-price-row.data-v-12be2f83 { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12rpx; } .g-price-tip.data-v-12be2f83 { font-size: 24rpx; color: #ff416c; } .g-price-val.data-v-12be2f83 { font-size: 38rpx; color: #ff416c; font-weight: bold; } .g-coupon-tag.data-v-12be2f83 { border: 1rpx solid #ff416c; color: #ff416c; font-size: 20rpx; padding: 0 8rpx; border-radius: 4rpx; } .price-coupon.data-v-12be2f83 { display: flex; align-items: baseline; margin-top: 4rpx; } .coupon-tip.data-v-12be2f83 { font-size: 22rpx; color: #ff8a00; } .coupon-val.data-v-12be2f83 { font-size: 28rpx; color: #ff8a00; font-weight: bold; } .goods-sales.data-v-12be2f83 { font-size: 24rpx; color: #999; } .loading-more.data-v-12be2f83 { text-align: center; color: #999; font-size: 24rpx; padding: 30rpx 0 calc(120rpx + env(safe-area-inset-bottom)); } /* 底部 Tab 栏 */ .bottom-tab-bar.data-v-12be2f83 { position: fixed; bottom: 0; left: 0; width: 100%; z-index: 999; display: flex; justify-content: space-around; align-items: center; height: 100rpx; background-color: #ffffff; border-top: 1rpx solid #eeeeee; padding-bottom: env(safe-area-inset-bottom); } .bottom-tab-bar .tab-item.data-v-12be2f83 { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; } .bottom-tab-bar .tab-icon.data-v-12be2f83 { width: 44rpx; height: 44rpx; margin-bottom: 6rpx; } .bottom-tab-bar .tab-text.data-v-12be2f83 { font-size: 20rpx; }