436 lines
9.2 KiB
Plaintext
436 lines
9.2 KiB
Plaintext
|
||
.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;
|
||
}
|
||
|