This commit is contained in:
parent
1a82a49056
commit
0ddbba548e
|
|
@ -6,14 +6,18 @@
|
||||||
<!-- 榜单类型切换 -->
|
<!-- 榜单类型切换 -->
|
||||||
<view class="rank-main-tabs">
|
<view class="rank-main-tabs">
|
||||||
<view class="main-tab" :class="{ 'active': rankType === 1 }" @click="switchRankType(1)">
|
<view class="main-tab" :class="{ 'active': rankType === 1 }" @click="switchRankType(1)">
|
||||||
<text class="fire-icon" v-if="rankType === 1">🔥</text>
|
<view class="tab-content-wrap">
|
||||||
|
<image class="wheat-icon wheat-left" src="/static/wheat_icon.png" v-if="rankType === 1"></image>
|
||||||
<text class="tab-main-txt">实时热销榜</text>
|
<text class="tab-main-txt">实时热销榜</text>
|
||||||
<text class="fire-icon" v-if="rankType === 1">🔥</text>
|
<image class="wheat-icon wheat-right" src="/static/wheat_icon.png" v-if="rankType === 1"></image>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="main-tab" :class="{ 'active': rankType === 2 }" @click="switchRankType(2)">
|
<view class="main-tab" :class="{ 'active': rankType === 2 }" @click="switchRankType(2)">
|
||||||
|
<view class="tab-content-wrap">
|
||||||
<text class="tab-main-txt">全天热销榜</text>
|
<text class="tab-main-txt">全天热销榜</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
<!-- 分类滑动导航 -->
|
<!-- 分类滑动导航 -->
|
||||||
<scroll-view scroll-x class="cate-nav" :show-scrollbar="false">
|
<scroll-view scroll-x class="cate-nav" :show-scrollbar="false">
|
||||||
|
|
@ -25,63 +29,67 @@
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<scroll-view scroll-y class="rank-content" @scrolltolower="loadMore">
|
<scroll-view scroll-y class="rank-content" @scrolltolower="loadMore">
|
||||||
<!-- 顶部占位 -->
|
<!-- 顶部背景延伸区 (仅作为背景块,不包裹卡片) -->
|
||||||
<view class="header-placeholder" :style="{ height: (statusBarHeight + 180) + 'px' }"></view>
|
<view class="rank-bg-header" :style="{ height: (statusBarHeight + 110) + 'px' }"></view>
|
||||||
|
|
||||||
<!-- Top 1-3 领奖台布局 (2 - 1 - 3) -->
|
<!-- Top 1-3 领奖台布局 (参考 shop-sy2 样式) -->
|
||||||
<view class="top-three-wrap" v-if="goodsList.length >= 3">
|
<view class="top-three-wrap" v-if="goodsList.length >= 3">
|
||||||
<!-- Top 2 (左侧) -->
|
<!-- Top 2 (左侧) -->
|
||||||
<view class="top-card top-card-side" @click="goToDetail(goodsList[1].id)">
|
<view class="top-card top-card-side" @click="goToDetail(goodsList[1].id)">
|
||||||
<view class="top-badge-wrap">
|
<view class="top-badge-wrap badge-2">
|
||||||
<image class="top-badge-img" src="/static/rank_badge.png" mode="widthFix"></image>
|
<text class="top-badge-num">TOP 2</text>
|
||||||
<text class="top-badge-num">2</text>
|
|
||||||
</view>
|
</view>
|
||||||
<view class="top-img-box">
|
<view class="top-img-box">
|
||||||
<image class="top-img" :src="goodsList[1].image" mode="aspectFill"></image>
|
<image class="top-img" :src="goodsList[1].image" mode="aspectFill"></image>
|
||||||
<view class="top-sales-bar">已抢{{ goodsList[1].sales }}件</view>
|
<view class="top-sales-bar">已抢{{ goodsList[1].sales }}件</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="top-title">
|
<view class="top-info-box">
|
||||||
<image src="https://img-haodanku-com.cdn.fudaiapp.com/FlyOSTvjC3LjrkUoJ0NPxx1qnGz4" class="p-icon"></image>
|
|
||||||
<text class="top-name">{{ goodsList[1].title }}</text>
|
<text class="top-name">{{ goodsList[1].title }}</text>
|
||||||
|
<view class="top-price-box">
|
||||||
|
<text class="price-label">券后¥</text>
|
||||||
|
<text class="price-val">{{ goodsList[1].finalPrice }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="top-coupon-tag" v-if="goodsList[1].couponValue">券 {{ goodsList[1].couponValue }}元</view>
|
||||||
</view>
|
</view>
|
||||||
<text class="top-price">券后¥<text class="tp-val">{{ goodsList[1].finalPrice }}</text></text>
|
|
||||||
<view class="top-coupon-tag">券 {{ goodsList[1].couponValue }}元</view>
|
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- Top 1 (中间,略高) -->
|
<!-- Top 1 (中间) -->
|
||||||
<view class="top-card top-card-center" @click="goToDetail(goodsList[0].id)">
|
<view class="top-card top-card-center" @click="goToDetail(goodsList[0].id)">
|
||||||
<view class="top-badge-wrap">
|
<image class="crown-icon" src="https://img.bc.haodanku.com/cms_web/1698115530" mode="widthFix"></image>
|
||||||
<image class="top-badge-img" src="/static/rank_badge.png" mode="widthFix"></image>
|
<view class="top-badge-wrap badge-1">
|
||||||
<text class="top-badge-num">1</text>
|
<text class="top-badge-num">TOP 1</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="top-img-box">
|
<view class="top-img-box">
|
||||||
<image class="top-img" :src="goodsList[0].image" mode="aspectFill"></image>
|
<image class="top-img" :src="goodsList[0].image" mode="aspectFill"></image>
|
||||||
<view class="top-sales-bar top-sales-bar-1">已抢{{ goodsList[0].sales }}件</view>
|
<view class="top-sales-bar">已抢{{ goodsList[0].sales }}件</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="top-title">
|
<view class="top-info-box">
|
||||||
<image src="https://img-haodanku-com.cdn.fudaiapp.com/FlyOSTvjC3LjrkUoJ0NPxx1qnGz4" class="p-icon"></image>
|
|
||||||
<text class="top-name">{{ goodsList[0].title }}</text>
|
<text class="top-name">{{ goodsList[0].title }}</text>
|
||||||
|
<view class="top-price-box">
|
||||||
|
<text class="price-label">券后¥</text>
|
||||||
|
<text class="price-val">{{ goodsList[0].finalPrice }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="top-coupon-tag" v-if="goodsList[0].couponValue">券 {{ goodsList[0].couponValue }}元</view>
|
||||||
</view>
|
</view>
|
||||||
<text class="top-price">券后¥<text class="tp-val">{{ goodsList[0].finalPrice }}</text></text>
|
|
||||||
<view class="top-coupon-tag">券 {{ goodsList[0].couponValue }}元</view>
|
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- Top 3 (右侧) -->
|
<!-- Top 3 (右侧) -->
|
||||||
<view class="top-card top-card-side" @click="goToDetail(goodsList[2].id)">
|
<view class="top-card top-card-side" @click="goToDetail(goodsList[2].id)">
|
||||||
<view class="top-badge-wrap">
|
<view class="top-badge-wrap badge-3">
|
||||||
<image class="top-badge-img" src="/static/rank_badge.png" mode="widthFix"></image>
|
<text class="top-badge-num">TOP 3</text>
|
||||||
<text class="top-badge-num">3</text>
|
|
||||||
</view>
|
</view>
|
||||||
<view class="top-img-box">
|
<view class="top-img-box">
|
||||||
<image class="top-img" :src="goodsList[2].image" mode="aspectFill"></image>
|
<image class="top-img" :src="goodsList[2].image" mode="aspectFill"></image>
|
||||||
<view class="top-sales-bar">已抢{{ goodsList[2].sales }}件</view>
|
<view class="top-sales-bar">已抢{{ goodsList[2].sales }}件</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="top-title">
|
<view class="top-info-box">
|
||||||
<image src="https://img-haodanku-com.cdn.fudaiapp.com/FlyOSTvjC3LjrkUoJ0NPxx1qnGz4" class="p-icon"></image>
|
|
||||||
<text class="top-name">{{ goodsList[2].title }}</text>
|
<text class="top-name">{{ goodsList[2].title }}</text>
|
||||||
|
<view class="top-price-box">
|
||||||
|
<text class="price-label">券后¥</text>
|
||||||
|
<text class="price-val">{{ goodsList[2].finalPrice }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="top-coupon-tag" v-if="goodsList[2].couponValue">券 {{ goodsList[2].couponValue }}元</view>
|
||||||
</view>
|
</view>
|
||||||
<text class="top-price">券后¥<text class="tp-val">{{ goodsList[2].finalPrice }}</text></text>
|
|
||||||
<view class="top-coupon-tag">券 {{ goodsList[2].couponValue }}元</view>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
|
|
@ -234,8 +242,10 @@
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
background: linear-gradient(180deg, #ff6034, #ff4b2b, #ff416c);
|
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");
|
||||||
z-index: 100;
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
z-index: 200; /* 提升层级至最高,确保滑动时文字不被卡片遮挡 */
|
||||||
padding-bottom: 0;
|
padding-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -249,14 +259,22 @@
|
||||||
|
|
||||||
.main-tab {
|
.main-tab {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 4rpx;
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-content-wrap {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-main-txt {
|
.tab-main-txt {
|
||||||
font-size: 30rpx;
|
font-size: 30rpx;
|
||||||
color: rgba(255, 255, 255, 0.7);
|
color: rgba(255, 255, 255, 0.7);
|
||||||
transition: all 0.3s;
|
transition: all 0.3s;
|
||||||
|
padding-bottom: 8rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-tab.active .tab-main-txt {
|
.main-tab.active .tab-main-txt {
|
||||||
|
|
@ -265,58 +283,86 @@
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fire-icon {
|
.main-tab.active::after {
|
||||||
font-size: 28rpx;
|
content: "";
|
||||||
|
width: 40rpx;
|
||||||
|
height: 4rpx;
|
||||||
|
background: #ffffff;
|
||||||
|
border-radius: 2rpx;
|
||||||
|
margin-top: 4rpx; /* 紧贴文字下方 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.wheat-icon {
|
||||||
|
width: 32rpx;
|
||||||
|
height: 44rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wheat-right {
|
||||||
|
transform: scaleX(-1);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 分类导航 */
|
/* 分类导航 */
|
||||||
.cate-nav {
|
.cate-nav {
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
padding: 16rpx 0;
|
padding: 10rpx 0 20rpx;
|
||||||
background: #ffffff;
|
background: transparent;
|
||||||
border-radius: 20rpx 20rpx 0 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.cate-item {
|
.cate-item {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 8rpx 28rpx;
|
padding: 8rpx 32rpx;
|
||||||
margin: 0 8rpx;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cate-txt {
|
.cate-txt {
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
color: #666;
|
color: rgba(255, 255, 255, 0.8);
|
||||||
}
|
}
|
||||||
|
|
||||||
.cate-item.active .cate-txt {
|
.cate-item.active .cate-txt {
|
||||||
color: #333;
|
color: #ffffff;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
font-size: 30rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cate-item.active {
|
.cate-item.active::after {
|
||||||
border-bottom: 4rpx solid #ff4b2b;
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
bottom: 4rpx;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
width: 48rpx;
|
||||||
|
height: 6rpx;
|
||||||
|
background: #ffffff;
|
||||||
|
border-radius: 3rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ========== 滚动内容 ========== */
|
/* ========== 滚动内容 ========== */
|
||||||
.rank-content {
|
.rank-content {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
background-color: #f5f6f8;
|
||||||
|
overflow: visible;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-placeholder {
|
.rank-bg-header {
|
||||||
width: 100%;
|
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 1-3 领奖台 ========== */
|
||||||
.top-three-wrap {
|
.top-three-wrap {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: flex-end;
|
align-items: flex-end;
|
||||||
justify-content: center;
|
justify-content: space-between;
|
||||||
padding: 20rpx 16rpx 10rpx;
|
padding: 60rpx 20rpx 20rpx;
|
||||||
background: #ffffff;
|
margin-top: -60rpx; /* 调小负边距,防止遮挡导航文字 */
|
||||||
margin: 0 0 16rpx;
|
position: relative;
|
||||||
gap: 10rpx;
|
z-index: 110;
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.top-card {
|
.top-card {
|
||||||
|
|
@ -324,122 +370,148 @@
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
border-radius: 12rpx;
|
border-radius: 20rpx;
|
||||||
overflow: hidden;
|
overflow: visible;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
box-shadow: 0 16rpx 40rpx rgba(0,0,0,0.15);
|
||||||
}
|
}
|
||||||
|
|
||||||
.top-card-side {
|
.top-card-side {
|
||||||
flex: 1;
|
width: 31%;
|
||||||
|
height: 410rpx; /* 侧边基准高度 */
|
||||||
|
z-index: 10;
|
||||||
}
|
}
|
||||||
|
|
||||||
.top-card-center {
|
.top-card-center {
|
||||||
flex: 1.15;
|
width: 34%;
|
||||||
margin-top: -20rpx;
|
height: 470rpx; /* 中间拔高 */
|
||||||
|
z-index: 15;
|
||||||
|
border: 2rpx solid #ffd700;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.crown-icon {
|
||||||
|
position: absolute;
|
||||||
|
top: -50rpx;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
width: 76rpx;
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 荣誉徽章体系 (参考 shop-sy2) */
|
||||||
.top-badge-wrap {
|
.top-badge-wrap {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -6rpx;
|
top: 0;
|
||||||
left: 8rpx;
|
left: 0;
|
||||||
width: 60rpx;
|
padding: 4rpx 16rpx;
|
||||||
height: 60rpx;
|
border-radius: 20rpx 0 20rpx 0;
|
||||||
z-index: 10;
|
z-index: 99;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.top-badge-img {
|
.badge-1 {
|
||||||
width: 60rpx;
|
background: linear-gradient(135deg, #ff4b2b, #ff416c);
|
||||||
position: absolute;
|
}
|
||||||
|
|
||||||
|
.badge-2 {
|
||||||
|
background: linear-gradient(135deg, #4facfe, #00f2fe);
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge-3 {
|
||||||
|
background: linear-gradient(135deg, #f093fb, #f5576c);
|
||||||
}
|
}
|
||||||
|
|
||||||
.top-badge-num {
|
.top-badge-num {
|
||||||
position: relative;
|
font-size: 20rpx;
|
||||||
z-index: 11;
|
font-weight: 900;
|
||||||
font-size: 24rpx;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
margin-top: -6rpx;
|
font-style: italic;
|
||||||
}
|
}
|
||||||
|
|
||||||
.top-img-box {
|
.top-img-box {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
aspect-ratio: 1;
|
height: 210rpx;
|
||||||
border-radius: 12rpx;
|
overflow: visible;
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
background: #f5f5f5;
|
background: #f5f5f5;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.top-card-center .top-img-box {
|
||||||
|
height: 270rpx;
|
||||||
|
}
|
||||||
|
|
||||||
.top-img {
|
.top-img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
border-radius: 16rpx 16rpx 0 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 胶囊式销量标签 */
|
||||||
.top-sales-bar {
|
.top-sales-bar {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 50%;
|
||||||
right: 0;
|
transform: translate(-50%, 50%);
|
||||||
background: linear-gradient(90deg, #ff9a44, #ff6534);
|
background: rgba(255, 75, 43, 0.9);
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
font-size: 20rpx;
|
font-size: 18rpx;
|
||||||
text-align: center;
|
white-space: nowrap;
|
||||||
padding: 6rpx 0;
|
padding: 4rpx 16rpx;
|
||||||
|
border-radius: 40rpx;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
z-index: 100;
|
||||||
|
box-shadow: 0 4rpx 12rpx rgba(255, 75, 43, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.top-sales-bar-1 {
|
.top-info-box {
|
||||||
background: linear-gradient(90deg, #ff5e62, #ff416c);
|
padding: 24rpx 10rpx 12rpx;
|
||||||
}
|
|
||||||
|
|
||||||
.top-title {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
padding: 10rpx 8rpx 4rpx;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
background: #ffffff;
|
||||||
|
border-radius: 0 0 20rpx 20rpx;
|
||||||
.p-icon {
|
text-align: center;
|
||||||
width: 24rpx;
|
|
||||||
height: 24rpx;
|
|
||||||
margin-right: 4rpx;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.top-name {
|
.top-name {
|
||||||
font-size: 22rpx;
|
font-size: 24rpx;
|
||||||
color: #333;
|
color: #333;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
margin-bottom: 8rpx;
|
||||||
|
white-space: nowrap;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
white-space: nowrap;
|
|
||||||
flex: 1;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.top-price {
|
.top-price-box {
|
||||||
font-size: 22rpx;
|
display: flex;
|
||||||
|
align-items: baseline;
|
||||||
|
justify-content: center;
|
||||||
color: #ff4b2b;
|
color: #ff4b2b;
|
||||||
padding: 0 8rpx;
|
|
||||||
width: 100%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.tp-val {
|
.price-label {
|
||||||
font-size: 30rpx;
|
font-size: 18rpx;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.price-val {
|
||||||
|
font-size: 34rpx;
|
||||||
|
font-weight: 900;
|
||||||
|
}
|
||||||
|
|
||||||
.top-coupon-tag {
|
.top-coupon-tag {
|
||||||
background: linear-gradient(90deg, #ff9a44, #ff6534);
|
margin: 4rpx auto 0;
|
||||||
color: #ffffff;
|
font-size: 18rpx;
|
||||||
font-size: 20rpx;
|
color: #ff4b2b;
|
||||||
padding: 4rpx 16rpx;
|
background: rgba(255, 75, 43, 0.1);
|
||||||
border-radius: 20rpx;
|
padding: 0 12rpx;
|
||||||
margin: 6rpx 0 12rpx;
|
border-radius: 4rpx;
|
||||||
|
display: inline-block;
|
||||||
|
border: 1rpx solid rgba(255, 75, 43, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ========== Top 4+ 列表 ========== */
|
/* ========== Top 4+ 列表 ========== */
|
||||||
|
|
@ -461,18 +533,18 @@
|
||||||
width: 200rpx;
|
width: 200rpx;
|
||||||
height: 200rpx;
|
height: 200rpx;
|
||||||
border-radius: 12rpx;
|
border-radius: 12rpx;
|
||||||
overflow: hidden;
|
overflow: visible; /* 修改为 visible 允许角标超出 */
|
||||||
position: relative;
|
position: relative;
|
||||||
background: #f5f5f5;
|
background: #f5f5f5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.rest-badge-wrap {
|
.rest-badge-wrap {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -2rpx;
|
top: -12rpx; /* 向上移动一点 */
|
||||||
left: 4rpx;
|
left: -4rpx; /* 向左移动一点 */
|
||||||
width: 50rpx;
|
width: 50rpx;
|
||||||
height: 50rpx;
|
height: 50rpx;
|
||||||
z-index: 10;
|
z-index: 99;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
@ -510,6 +582,13 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.p-icon {
|
||||||
|
width: 26rpx;
|
||||||
|
height: 26rpx;
|
||||||
|
margin-right: 8rpx;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.rest-name {
|
.rest-name {
|
||||||
font-size: 26rpx;
|
font-size: 26rpx;
|
||||||
color: #333;
|
color: #333;
|
||||||
|
|
@ -559,7 +638,8 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
background: linear-gradient(90deg, #fff0e6, #ffe8d6);
|
background: url("https://web.cms.hykefu.cn/static/img/todayBg.png") no-repeat center;
|
||||||
|
background-size: 100% 100%;
|
||||||
border-radius: 30rpx;
|
border-radius: 30rpx;
|
||||||
margin-top: 10rpx;
|
margin-top: 10rpx;
|
||||||
padding: 4rpx 4rpx 4rpx 20rpx;
|
padding: 4rpx 4rpx 4rpx 20rpx;
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,15 @@
|
||||||
|
const fs = require('fs');
|
||||||
|
const path = require('path');
|
||||||
|
|
||||||
|
const base64Data = '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';
|
||||||
|
|
||||||
|
const buffer = Buffer.from(base64Data, 'base64');
|
||||||
|
const outputPath = path.join(__dirname, '..', 'static', 'wheat_icon.png');
|
||||||
|
|
||||||
|
try {
|
||||||
|
fs.writeFileSync(outputPath, buffer);
|
||||||
|
console.log('Success: Saved to ' + outputPath);
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Error: ' + err.message);
|
||||||
|
process.exit(1);
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Loading…
Reference in New Issue