排行榜
This commit is contained in:
1173117610@qq.com
parent
bbf6b97c08
commit
5419f1348a
|
|
@ -0,0 +1,89 @@
|
||||||
|
<template>
|
||||||
|
<view class="bottom-tab-bar">
|
||||||
|
<view class="tab-item" v-for="(tab, index) in bottomBarList" :key="index" @click="handleTabClick(tab, index)">
|
||||||
|
<image class="tab-icon" :src="activeTab === index ? tab.hl_img : tab.img"></image>
|
||||||
|
<text class="tab-text" :style="{ color: activeTab === index ? tab.hl_color : tab.color }">{{ tab.title }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
activeTab: {
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
bottomBarList: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.getBottomBar();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getBottomBar() {
|
||||||
|
uni.request({
|
||||||
|
url: 'https://api.cmspro.haodanku.com/bottomBar/lists?cid=qOstW90',
|
||||||
|
success: (res) => {
|
||||||
|
if (res.data && res.data.code === 200 && res.data.data.bottom_bar) {
|
||||||
|
// 根据 sort 降序排序
|
||||||
|
this.bottomBarList = res.data.data.bottom_bar.sort((a, b) => b.sort - a.sort);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
handleTabClick(tab, index) {
|
||||||
|
if (this.activeTab === index) return;
|
||||||
|
|
||||||
|
let url = '';
|
||||||
|
if (tab.title === '首页') url = '/pages/index/index';
|
||||||
|
else if (tab.title === '榜单') url = '/pages/rank/rank';
|
||||||
|
|
||||||
|
if (url) {
|
||||||
|
uni.redirectTo({
|
||||||
|
url: url
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.bottom-tab-bar {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 100rpx;
|
||||||
|
background: rgba(255, 255, 255, 0.98);
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
padding-bottom: env(safe-area-inset-bottom);
|
||||||
|
box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
|
||||||
|
z-index: 999;
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-icon {
|
||||||
|
width: 44rpx;
|
||||||
|
height: 44rpx;
|
||||||
|
margin-bottom: 4rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-text {
|
||||||
|
font-size: 20rpx;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -23,6 +23,12 @@
|
||||||
"style": {
|
"style": {
|
||||||
"navigationStyle": "custom"
|
"navigationStyle": "custom"
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/rank/rank",
|
||||||
|
"style": {
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"globalStyle": {
|
"globalStyle": {
|
||||||
|
|
|
||||||
|
|
@ -248,22 +248,21 @@
|
||||||
<view class="loading-more">-- 到底啦 --</view>
|
<view class="loading-more">-- 到底啦 --</view>
|
||||||
</scroll-view>
|
</scroll-view>
|
||||||
|
|
||||||
<!-- 底部 Tab 栏 -->
|
<!-- 通用底部 Tab 栏 -->
|
||||||
<view class="bottom-tab-bar">
|
<bottom-nav :activeTab="0"></bottom-nav>
|
||||||
<view class="tab-item" v-for="(tab, index) in bottomBarList" :key="index" @click="activeBottomTab = index">
|
|
||||||
<image class="tab-icon" :src="activeBottomTab === index ? tab.hl_img : tab.img"></image>
|
|
||||||
<text class="tab-text" :style="{ color: activeBottomTab === index ? tab.hl_color : tab.color }">{{ tab.title }}</text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import BottomNav from '@/components/bottom-nav/bottom-nav.vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
components: {
|
||||||
|
BottomNav
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
activeBottomTab: 0,
|
activeBottomTab: 0,
|
||||||
bottomBarList: [],
|
|
||||||
currentTab: 0,
|
currentTab: 0,
|
||||||
navList: [{ name: '首页', cat_id: 0 }, { name: '推荐', cat_id: -1 }],
|
navList: [{ name: '首页', cat_id: 0 }, { name: '推荐', cat_id: -1 }],
|
||||||
scrollTarget: '',
|
scrollTarget: '',
|
||||||
|
|
@ -304,7 +303,6 @@
|
||||||
},
|
},
|
||||||
onLoad() {
|
onLoad() {
|
||||||
this.getIndexData();
|
this.getIndexData();
|
||||||
this.getBottomBar();
|
|
||||||
this.getCategoryList();
|
this.getCategoryList();
|
||||||
this.getNoticeList();
|
this.getNoticeList();
|
||||||
this.getGoodsList();
|
this.getGoodsList();
|
||||||
|
|
@ -352,17 +350,7 @@
|
||||||
url: `/pages/detail/detail?id=${id}`
|
url: `/pages/detail/detail?id=${id}`
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
getBottomBar() {
|
|
||||||
uni.request({
|
|
||||||
url: 'https://api.cmspro.haodanku.com/bottomBar/lists?cid=qOstW90',
|
|
||||||
success: (res) => {
|
|
||||||
if (res.data && res.data.code === 200 && res.data.data.bottom_bar) {
|
|
||||||
// 根据 sort 降序排序
|
|
||||||
this.bottomBarList = res.data.data.bottom_bar.sort((a, b) => b.sort - a.sort);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
getCategoryList() {
|
getCategoryList() {
|
||||||
uni.request({
|
uni.request({
|
||||||
url: 'https://api.cmspro.haodanku.com/index/category?cid=qOstW90',
|
url: 'https://api.cmspro.haodanku.com/index/category?cid=qOstW90',
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,599 @@
|
||||||
|
<template>
|
||||||
|
<view class="rank-container">
|
||||||
|
<!-- 沉浸式渐变头部 -->
|
||||||
|
<view class="rank-header">
|
||||||
|
<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
|
||||||
|
<!-- 榜单类型切换 -->
|
||||||
|
<view class="rank-main-tabs">
|
||||||
|
<view class="main-tab" :class="{ 'active': rankType === 1 }" @click="switchRankType(1)">
|
||||||
|
<text class="fire-icon" v-if="rankType === 1">🔥</text>
|
||||||
|
<text class="tab-main-txt">实时热销榜</text>
|
||||||
|
<text class="fire-icon" v-if="rankType === 1">🔥</text>
|
||||||
|
</view>
|
||||||
|
<view class="main-tab" :class="{ 'active': rankType === 2 }" @click="switchRankType(2)">
|
||||||
|
<text class="tab-main-txt">全天热销榜</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 分类滑动导航 -->
|
||||||
|
<scroll-view scroll-x class="cate-nav" :show-scrollbar="false">
|
||||||
|
<view class="cate-item" :class="{ 'active': currentCateId === item.id }"
|
||||||
|
v-for="(item, index) in categoryList" :key="index" @click="switchCategory(item.id)">
|
||||||
|
<text class="cate-txt">{{ item.name }}</text>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<scroll-view scroll-y class="rank-content" @scrolltolower="loadMore">
|
||||||
|
<!-- 顶部占位 -->
|
||||||
|
<view class="header-placeholder" :style="{ height: (statusBarHeight + 180) + 'px' }"></view>
|
||||||
|
|
||||||
|
<!-- Top 1-3 领奖台布局 (2 - 1 - 3) -->
|
||||||
|
<view class="top-three-wrap" v-if="goodsList.length >= 3">
|
||||||
|
<!-- Top 2 (左侧) -->
|
||||||
|
<view class="top-card top-card-side" @click="goToDetail(goodsList[1].id)">
|
||||||
|
<view class="top-badge-wrap">
|
||||||
|
<image class="top-badge-img" src="https://img.bc.haodanku.com/cms_web/1698115498" mode="widthFix"></image>
|
||||||
|
<text class="top-badge-num">2</text>
|
||||||
|
</view>
|
||||||
|
<view class="top-img-box">
|
||||||
|
<image class="top-img" :src="goodsList[1].image" mode="aspectFill"></image>
|
||||||
|
<view class="top-sales-bar">已抢{{ goodsList[1].sales }}件</view>
|
||||||
|
</view>
|
||||||
|
<view class="top-title">
|
||||||
|
<image src="https://img-haodanku-com.cdn.fudaiapp.com/FlyOSTvjC3LjrkUoJ0NPxx1qnGz4" class="p-icon"></image>
|
||||||
|
<text class="top-name">{{ goodsList[1].title }}</text>
|
||||||
|
</view>
|
||||||
|
<text class="top-price">券后¥<text class="tp-val">{{ goodsList[1].finalPrice }}</text></text>
|
||||||
|
<view class="top-coupon-tag">券 {{ goodsList[1].couponValue }}元</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- Top 1 (中间，略高) -->
|
||||||
|
<view class="top-card top-card-center" @click="goToDetail(goodsList[0].id)">
|
||||||
|
<view class="top-badge-wrap">
|
||||||
|
<image class="top-badge-img" src="https://img.bc.haodanku.com/cms_web/1698115498" mode="widthFix"></image>
|
||||||
|
<text class="top-badge-num">1</text>
|
||||||
|
</view>
|
||||||
|
<view class="top-img-box">
|
||||||
|
<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>
|
||||||
|
<view class="top-title">
|
||||||
|
<image src="https://img-haodanku-com.cdn.fudaiapp.com/FlyOSTvjC3LjrkUoJ0NPxx1qnGz4" class="p-icon"></image>
|
||||||
|
<text class="top-name">{{ goodsList[0].title }}</text>
|
||||||
|
</view>
|
||||||
|
<text class="top-price">券后¥<text class="tp-val">{{ goodsList[0].finalPrice }}</text></text>
|
||||||
|
<view class="top-coupon-tag">券 {{ goodsList[0].couponValue }}元</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- Top 3 (右侧) -->
|
||||||
|
<view class="top-card top-card-side" @click="goToDetail(goodsList[2].id)">
|
||||||
|
<view class="top-badge-wrap">
|
||||||
|
<image class="top-badge-img" src="https://img.bc.haodanku.com/cms_web/1698115498" mode="widthFix"></image>
|
||||||
|
<text class="top-badge-num">3</text>
|
||||||
|
</view>
|
||||||
|
<view class="top-img-box">
|
||||||
|
<image class="top-img" :src="goodsList[2].image" mode="aspectFill"></image>
|
||||||
|
<view class="top-sales-bar">已抢{{ goodsList[2].sales }}件</view>
|
||||||
|
</view>
|
||||||
|
<view class="top-title">
|
||||||
|
<image src="https://img-haodanku-com.cdn.fudaiapp.com/FlyOSTvjC3LjrkUoJ0NPxx1qnGz4" class="p-icon"></image>
|
||||||
|
<text class="top-name">{{ goodsList[2].title }}</text>
|
||||||
|
</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>
|
||||||
|
|
||||||
|
<!-- Top 4+ 横向列表 -->
|
||||||
|
<view class="rest-list">
|
||||||
|
<view class="rest-item" v-for="(goods, idx) in goodsList.slice(3)" :key="idx" @click="goToDetail(goods.id)">
|
||||||
|
<view class="rest-left">
|
||||||
|
<view class="rest-badge-wrap">
|
||||||
|
<image class="rest-badge-img" src="https://img.bc.haodanku.com/cms_web/1698115498" mode="widthFix"></image>
|
||||||
|
<text class="rest-badge-num">{{ idx + 4 }}</text>
|
||||||
|
</view>
|
||||||
|
<image class="rest-img" :src="goods.image" mode="aspectFill"></image>
|
||||||
|
</view>
|
||||||
|
<view class="rest-right">
|
||||||
|
<view class="rest-title-row">
|
||||||
|
<image src="https://img-haodanku-com.cdn.fudaiapp.com/FlyOSTvjC3LjrkUoJ0NPxx1qnGz4" class="p-icon"></image>
|
||||||
|
<text class="rest-name">{{ goods.title }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="rest-price-row">
|
||||||
|
<text class="rest-price-tip">券后¥</text>
|
||||||
|
<text class="rest-price-val">{{ goods.finalPrice }}</text>
|
||||||
|
<text class="rest-price-old">¥{{ goods.originalPrice }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="rest-coupon">券 {{ goods.couponValue }}元</view>
|
||||||
|
<view class="rest-buy-bar">
|
||||||
|
<text class="rest-buy-txt">近2小时已抢 <text class="rest-buy-num">{{ goods.sales }}</text> 件</text>
|
||||||
|
<view class="rest-buy-btn">马上抢</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="loading-status" v-if="loading">火速加载中...</view>
|
||||||
|
<view class="footer-placeholder"></view>
|
||||||
|
</scroll-view>
|
||||||
|
|
||||||
|
<!-- 底部导航 -->
|
||||||
|
<bottom-nav :activeTab="1"></bottom-nav>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import BottomNav from '@/components/bottom-nav/bottom-nav.vue';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
BottomNav
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
statusBarHeight: 44,
|
||||||
|
rankType: 1,
|
||||||
|
currentCateId: 0,
|
||||||
|
categoryList: [
|
||||||
|
{ id: 0, name: '全部' },
|
||||||
|
{ id: 10, name: '居家' },
|
||||||
|
{ id: 11, name: '美食' },
|
||||||
|
{ id: 8, name: '儿童' },
|
||||||
|
{ id: 3, name: '女装' },
|
||||||
|
{ id: 4, name: '美妆' }
|
||||||
|
],
|
||||||
|
goodsList: [],
|
||||||
|
loading: false,
|
||||||
|
page: 1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
const sysInfo = uni.getSystemInfoSync();
|
||||||
|
this.statusBarHeight = sysInfo.statusBarHeight || 44;
|
||||||
|
this.getRankList(true);
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
switchRankType(type) {
|
||||||
|
if (this.rankType === type) return;
|
||||||
|
this.rankType = type;
|
||||||
|
this.getRankList(true);
|
||||||
|
},
|
||||||
|
switchCategory(id) {
|
||||||
|
if (this.currentCateId === id) return;
|
||||||
|
this.currentCateId = id;
|
||||||
|
this.getRankList(true);
|
||||||
|
},
|
||||||
|
getRankList(refresh = false) {
|
||||||
|
if (refresh) {
|
||||||
|
this.page = 1;
|
||||||
|
this.goodsList = [];
|
||||||
|
}
|
||||||
|
if (this.loading) return;
|
||||||
|
this.loading = true;
|
||||||
|
|
||||||
|
uni.request({
|
||||||
|
url: `https://api.cmspro.haodanku.com/ranking/lists?type=${this.rankType}&category_id=${this.currentCateId}&page=${this.page}&page_size=60&cid=qOstW90`,
|
||||||
|
success: (res) => {
|
||||||
|
if (res.data && res.data.code === 200 && res.data.data && res.data.data.list_item && res.data.data.list_item.list) {
|
||||||
|
const list = res.data.data.list_item.list.map(item => {
|
||||||
|
// 处理标题
|
||||||
|
let title = item.itemshorttitle || item.itemtitle;
|
||||||
|
if (title.length > 18) {
|
||||||
|
title = title.substring(0, 18) + '...';
|
||||||
|
}
|
||||||
|
|
||||||
|
// 处理销量显示
|
||||||
|
let salesCount = this.rankType === 1 ? (item.todaysale || item.itemsale2 || 0) : item.itemsale;
|
||||||
|
let salesStr = salesCount >= 10000 ? (salesCount / 10000).toFixed(1) + '万' : salesCount;
|
||||||
|
|
||||||
|
return {
|
||||||
|
id: item.itemid,
|
||||||
|
image: item.itempic,
|
||||||
|
title: title,
|
||||||
|
finalPrice: item.itemendprice,
|
||||||
|
originalPrice: item.itemprice,
|
||||||
|
couponValue: item.couponmoney || 0,
|
||||||
|
sales: salesStr,
|
||||||
|
shopName: item.shopname,
|
||||||
|
labels: item.label || []
|
||||||
|
};
|
||||||
|
});
|
||||||
|
this.goodsList = [...this.goodsList, ...list];
|
||||||
|
}
|
||||||
|
},
|
||||||
|
complete: () => {
|
||||||
|
this.loading = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
loadMore() {
|
||||||
|
// 榜单通常展示前60条
|
||||||
|
},
|
||||||
|
goToDetail(id) {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/pages/detail/detail?id=${id}`
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.rank-container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background-color: #f5f6f8;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 头部区域 ========== */
|
||||||
|
.rank-header {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
background: linear-gradient(180deg, #ff6034, #ff4b2b, #ff416c);
|
||||||
|
z-index: 100;
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rank-main-tabs {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 88rpx;
|
||||||
|
gap: 60rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-tab {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 4rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-main-txt {
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: rgba(255, 255, 255, 0.7);
|
||||||
|
transition: all 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-tab.active .tab-main-txt {
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 34rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fire-icon {
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 分类导航 */
|
||||||
|
.cate-nav {
|
||||||
|
white-space: nowrap;
|
||||||
|
padding: 16rpx 0;
|
||||||
|
background: #ffffff;
|
||||||
|
border-radius: 20rpx 20rpx 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cate-item {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 8rpx 28rpx;
|
||||||
|
margin: 0 8rpx;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cate-txt {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cate-item.active .cate-txt {
|
||||||
|
color: #333;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cate-item.active {
|
||||||
|
border-bottom: 4rpx solid #ff4b2b;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 滚动内容 ========== */
|
||||||
|
.rank-content {
|
||||||
|
flex: 1;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-placeholder {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== Top 1-3 领奖台 ========== */
|
||||||
|
.top-three-wrap {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 20rpx 16rpx 10rpx;
|
||||||
|
background: #ffffff;
|
||||||
|
margin: 0 0 16rpx;
|
||||||
|
gap: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-card {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
background: #ffffff;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-card-side {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-card-center {
|
||||||
|
flex: 1.15;
|
||||||
|
margin-top: -20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-badge-wrap {
|
||||||
|
position: absolute;
|
||||||
|
top: -6rpx;
|
||||||
|
left: 8rpx;
|
||||||
|
width: 60rpx;
|
||||||
|
height: 60rpx;
|
||||||
|
z-index: 10;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-badge-img {
|
||||||
|
width: 60rpx;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-badge-num {
|
||||||
|
position: relative;
|
||||||
|
z-index: 11;
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #ffffff;
|
||||||
|
margin-top: -6rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-img-box {
|
||||||
|
width: 100%;
|
||||||
|
aspect-ratio: 1;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
background: #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-sales-bar {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
background: linear-gradient(90deg, #ff9a44, #ff6534);
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 20rpx;
|
||||||
|
text-align: center;
|
||||||
|
padding: 6rpx 0;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-sales-bar-1 {
|
||||||
|
background: linear-gradient(90deg, #ff5e62, #ff416c);
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 10rpx 8rpx 4rpx;
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-icon {
|
||||||
|
width: 24rpx;
|
||||||
|
height: 24rpx;
|
||||||
|
margin-right: 4rpx;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-name {
|
||||||
|
font-size: 22rpx;
|
||||||
|
color: #333;
|
||||||
|
font-weight: bold;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-price {
|
||||||
|
font-size: 22rpx;
|
||||||
|
color: #ff4b2b;
|
||||||
|
padding: 0 8rpx;
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tp-val {
|
||||||
|
font-size: 30rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-coupon-tag {
|
||||||
|
background: linear-gradient(90deg, #ff9a44, #ff6534);
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 20rpx;
|
||||||
|
padding: 4rpx 16rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
margin: 6rpx 0 12rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== Top 4+ 列表 ========== */
|
||||||
|
.rest-list {
|
||||||
|
background: #ffffff;
|
||||||
|
margin: 0 16rpx;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rest-item {
|
||||||
|
display: flex;
|
||||||
|
padding: 24rpx;
|
||||||
|
border-bottom: 1rpx solid #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rest-left {
|
||||||
|
flex-shrink: 0;
|
||||||
|
width: 200rpx;
|
||||||
|
height: 200rpx;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
background: #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rest-badge-wrap {
|
||||||
|
position: absolute;
|
||||||
|
top: -2rpx;
|
||||||
|
left: 4rpx;
|
||||||
|
width: 50rpx;
|
||||||
|
height: 50rpx;
|
||||||
|
z-index: 10;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rest-badge-img {
|
||||||
|
width: 50rpx;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rest-badge-num {
|
||||||
|
position: relative;
|
||||||
|
z-index: 11;
|
||||||
|
font-size: 22rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #ffffff;
|
||||||
|
margin-top: -4rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rest-img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rest-right {
|
||||||
|
flex: 1;
|
||||||
|
margin-left: 20rpx;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rest-title-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rest-name {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #333;
|
||||||
|
font-weight: bold;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rest-price-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: baseline;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rest-price-tip {
|
||||||
|
font-size: 22rpx;
|
||||||
|
color: #ff4b2b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rest-price-val {
|
||||||
|
font-size: 40rpx;
|
||||||
|
color: #ff4b2b;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rest-price-old {
|
||||||
|
font-size: 22rpx;
|
||||||
|
color: #bbb;
|
||||||
|
text-decoration: line-through;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rest-coupon {
|
||||||
|
display: inline-block;
|
||||||
|
align-self: flex-start;
|
||||||
|
background: linear-gradient(90deg, #ff9a44, #ff6534);
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 20rpx;
|
||||||
|
padding: 4rpx 16rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
margin-top: 6rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rest-buy-bar {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
background: linear-gradient(90deg, #fff0e6, #ffe8d6);
|
||||||
|
border-radius: 30rpx;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
padding: 4rpx 4rpx 4rpx 20rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rest-buy-txt {
|
||||||
|
font-size: 20rpx;
|
||||||
|
color: #ff6534;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rest-buy-num {
|
||||||
|
font-weight: bold;
|
||||||
|
color: #ff4b2b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rest-buy-btn {
|
||||||
|
background: linear-gradient(90deg, #ff6534, #ff4b2b);
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 22rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
padding: 10rpx 24rpx;
|
||||||
|
border-radius: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 其他 ========== */
|
||||||
|
.loading-status {
|
||||||
|
text-align: center;
|
||||||
|
padding: 40rpx 0;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-placeholder {
|
||||||
|
height: 140rpx;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue