.rank-container.data-v-57dc3616 { width: 100%; height: 100vh; background-color: #f5f6f8; display: flex; flex-direction: column; } /* ========== 头部区域 ========== */ .rank-header.data-v-57dc3616 { position: fixed; top: 0; left: 0; right: 0; background-image: linear-gradient(90deg, rgba(255, 154, 12, 0.9), rgba(253, 36, 39, 0.9)), url("https://img.alicdn.com/bao/uploaded/O1CN015WwOJy1qPYhqS1DwG_!!6000000005488-0-yinhe.jpg_310x310"); background-size: cover; background-position: center; z-index: 200; /* 提升层级至最高,确保滑动时文字不被卡片遮挡 */ padding-bottom: 0; } .status-bar.data-v-57dc3616 { width: 100%; } .rank-main-tabs.data-v-57dc3616 { display: flex; align-items: center; justify-content: center; height: 88rpx; gap: 60rpx; } .main-tab.data-v-57dc3616 { display: flex; flex-direction: column; align-items: center; position: relative; } .tab-content-wrap.data-v-57dc3616 { display: flex; align-items: center; gap: 8rpx; } .tab-main-txt.data-v-57dc3616 { font-size: 30rpx; color: rgba(255, 255, 255, 0.7); transition: all 0.3s; padding-bottom: 8rpx; } .main-tab.active .tab-main-txt.data-v-57dc3616 { color: #ffffff; font-size: 34rpx; font-weight: bold; } .main-tab.active.data-v-57dc3616::after { content: ""; width: 40rpx; height: 4rpx; background: #ffffff; border-radius: 2rpx; margin-top: 4rpx; /* 紧贴文字下方 */ } .wheat-icon.data-v-57dc3616 { width: 32rpx; height: 44rpx; } .wheat-right.data-v-57dc3616 { -webkit-transform: scaleX(-1); transform: scaleX(-1); } /* 分类导航 */ .cate-nav.data-v-57dc3616 { white-space: nowrap; padding: 10rpx 0 20rpx; background: transparent; } .cate-item.data-v-57dc3616 { display: inline-block; padding: 8rpx 32rpx; position: relative; } .cate-txt.data-v-57dc3616 { font-size: 28rpx; color: rgba(255, 255, 255, 0.8); } .cate-item.active .cate-txt.data-v-57dc3616 { color: #ffffff; font-weight: bold; font-size: 30rpx; } .cate-item.active.data-v-57dc3616::after { content: ""; position: absolute; bottom: 4rpx; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 48rpx; height: 6rpx; background: #ffffff; border-radius: 3rpx; } /* ========== 滚动内容 ========== */ .rank-content.data-v-57dc3616 { flex: 1; height: 100%; background-color: #f5f6f8; overflow: visible; } .rank-bg-header.data-v-57dc3616 { width: 100%; background-image: linear-gradient(90deg, rgba(255, 154, 12, 0.9), rgba(253, 36, 39, 0.9)), url("https://img.alicdn.com/bao/uploaded/O1CN015WwOJy1qPYhqS1DwG_!!6000000005488-0-yinhe.jpg_310x310"); background-size: cover; background-position: bottom; } /* ========== Top 1-3 领奖台 ========== */ .top-three-wrap.data-v-57dc3616 { display: flex; align-items: flex-end; justify-content: space-between; padding: 60rpx 20rpx 20rpx; margin-top: -60rpx; /* 调小负边距,防止遮挡导航文字 */ position: relative; z-index: 110; box-sizing: border-box; width: 100%; } .top-card.data-v-57dc3616 { display: flex; flex-direction: column; align-items: center; background: #ffffff; border-radius: 20rpx; overflow: visible; position: relative; box-shadow: 0 16rpx 40rpx rgba(0,0,0,0.15); } .top-card-side.data-v-57dc3616 { width: 31%; height: 410rpx; /* 侧边基准高度 */ z-index: 10; } .top-card-center.data-v-57dc3616 { width: 34%; height: 470rpx; /* 中间拔高 */ z-index: 15; border: 2rpx solid #ffd700; } .crown-icon.data-v-57dc3616 { position: absolute; top: -50rpx; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 76rpx; z-index: 100; } /* 荣誉徽章体系 (参考 shop-sy2) */ .top-badge-wrap.data-v-57dc3616 { position: absolute; top: 0; left: 0; padding: 4rpx 16rpx; border-radius: 20rpx 0 20rpx 0; z-index: 99; display: flex; align-items: center; justify-content: center; } .badge-1.data-v-57dc3616 { background: linear-gradient(135deg, #ff4b2b, #ff416c); } .badge-2.data-v-57dc3616 { background: linear-gradient(135deg, #4facfe, #00f2fe); } .badge-3.data-v-57dc3616 { background: linear-gradient(135deg, #f093fb, #f5576c); } .top-badge-num.data-v-57dc3616 { font-size: 20rpx; font-weight: 900; color: #ffffff; font-style: italic; } .top-img-box.data-v-57dc3616 { width: 100%; height: 210rpx; overflow: visible; position: relative; background: #f5f5f5; } .top-card-center .top-img-box.data-v-57dc3616 { height: 270rpx; } .top-img.data-v-57dc3616 { width: 100%; height: 100%; border-radius: 16rpx 16rpx 0 0; } /* 胶囊式销量标签 */ .top-sales-bar.data-v-57dc3616 { position: absolute; bottom: 0; left: 50%; -webkit-transform: translate(-50%, 50%); transform: translate(-50%, 50%); background: rgba(255, 75, 43, 0.9); color: #ffffff; font-size: 18rpx; white-space: nowrap; padding: 4rpx 16rpx; border-radius: 40rpx; font-weight: bold; z-index: 100; box-shadow: 0 4rpx 12rpx rgba(255, 75, 43, 0.3); } .top-info-box.data-v-57dc3616 { padding: 24rpx 16rpx 16rpx; /* 增加左右内边距 */ width: 100%; display: flex; flex-direction: column; box-sizing: border-box; background: #ffffff; border-radius: 0 0 20rpx 20rpx; text-align: left; /* 切换为左对齐 */ } .top-name.data-v-57dc3616 { font-size: 24rpx; color: #333; font-weight: bold; margin-bottom: 8rpx; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .top-price-box.data-v-57dc3616 { display: flex; align-items: baseline; justify-content: flex-start; /* 切换为左对齐 */ color: #ff4b2b; } .price-label.data-v-57dc3616 { font-size: 18rpx; font-weight: bold; } .price-val.data-v-57dc3616 { font-size: 34rpx; font-weight: 900; } .coupon-wrap.data-v-57dc3616 { display: inline-flex; align-items: center; justify-content: center; margin: 8rpx 0 0; /* 移除 auto,改为左对齐 */ border: 1rpx solid #ff4b2b; border-radius: 4rpx; overflow: hidden; background: #ffffff; align-self: flex-start; /* 确保在 flex 容器中左对齐 */ } .rest-right .coupon-wrap.data-v-57dc3616 { margin: 8rpx 0; align-self: flex-start; } .coupon-label.data-v-57dc3616 { background: #ff4b2b; color: #ffffff; font-size: 18rpx; padding: 0 8rpx; height: 30rpx; line-height: 30rpx; font-weight: bold; } .coupon-value.data-v-57dc3616 { color: #ff4b2b; font-size: 18rpx; padding: 0 10rpx; height: 30rpx; line-height: 30rpx; font-weight: bold; } /* ========== Top 4+ 列表 ========== */ .rest-list.data-v-57dc3616 { background: #ffffff; margin: 0 16rpx; border-radius: 16rpx; overflow: hidden; } .rest-item.data-v-57dc3616 { display: flex; padding: 24rpx; border-bottom: 1rpx solid #f5f5f5; } .rest-left.data-v-57dc3616 { flex-shrink: 0; width: 200rpx; height: 200rpx; border-radius: 12rpx; overflow: visible; position: relative; background: #f5f5f5; } .rest-badge-wrap.data-v-57dc3616 { position: absolute; top: -12rpx; left: -4rpx; width: 50rpx; height: 50rpx; z-index: 99; display: flex; align-items: center; justify-content: center; } .rest-badge-img.data-v-57dc3616 { width: 50rpx; position: absolute; } .rest-badge-num.data-v-57dc3616 { position: relative; z-index: 11; font-size: 22rpx; font-weight: bold; color: #ffffff; margin-top: -4rpx; } .rest-img.data-v-57dc3616 { width: 100%; height: 100%; } .rest-right.data-v-57dc3616 { flex: 1; margin-left: 20rpx; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; /* 关键:防止 Flex 子项被内容撑开导致超伸 */ } .rest-title-row.data-v-57dc3616 { display: flex; align-items: center; } .p-icon.data-v-57dc3616 { width: 26rpx; height: 26rpx; margin-right: 8rpx; flex-shrink: 0; } .rest-name.data-v-57dc3616 { font-size: 26rpx; color: #333; font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; } .rest-price-row.data-v-57dc3616 { display: flex; align-items: baseline; margin-top: 10rpx; } .rest-price-tip.data-v-57dc3616 { font-size: 22rpx; color: #ff4b2b; } .rest-price-val.data-v-57dc3616 { font-size: 40rpx; color: #ff4b2b; font-weight: bold; margin-right: 10rpx; } .rest-price-old.data-v-57dc3616 { font-size: 22rpx; color: #bbb; text-decoration: line-through; } .rest-buy-bar.data-v-57dc3616 { display: flex; align-items: center; background: url("https://web.cms.hykefu.cn/static/img/todayBg.png") no-repeat center; background-size: 100% 100%; border-radius: 40rpx; margin-top: 10rpx; overflow: hidden; width: 100%; height: 56rpx; box-sizing: border-box; /* 确保 padding 不会增加总宽度 */ } .btn-prev.data-v-57dc3616 { flex: 1; display: flex; align-items: center; padding-left: 20rpx; height: 100%; } .rest-buy-txt.data-v-57dc3616 { padding-left: 15rpx; font-size: 20rpx; color: #ff6534; white-space: nowrap; } .rest-buy-num.data-v-57dc3616 { font-weight: bold; color: #ff4b2b; margin: 0 4rpx; } .btn-next.data-v-57dc3616 { width: 150rpx; /* 调整宽度以对齐图片中的按钮区域 */ height: 100%; display: flex; align-items: center; justify-content: center; background: transparent; /* 背景透明,直接使用底图效果 */ color: #ffffff !important; font-size: 24rpx; font-weight: bold; flex-shrink: 0; } /* ========== 其他 ========== */ .loading-status.data-v-57dc3616 { text-align: center; padding: 40rpx 0; font-size: 24rpx; color: #999; } .footer-placeholder.data-v-57dc3616 { height: 140rpx; }