pcwl_yancheng/cheflinkuser
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改样式

Browse Source
This commit is contained in:
ISFP_T
2026-04-11 11:55:03 +08:00
parent ef9210a567
commit ec9282a64f
59 changed files with 8708 additions and 2558 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages-store/pages/store/index.vue
+486 -232
View File
@@ -461,6 +461,16 @@ function navigateTo(url: string) {
uni.navigateTo({ url })
}
function isSoldOutStock(stockLike: unknown) {
const n = Number(stockLike)
return !Number.isNaN(n) && n <= 0
}
function getDishPromoLabel(item: any): string {
const raw = item?.marketingLabel ?? item?.hotSaleTag ?? item?.rankTag ?? item?.promotionLabel
return typeof raw === 'string' && raw.trim() ? raw.trim() : ''
}
// 分享商家
function handleShare() {
uni.shareWithSystem({
@@ -478,132 +488,114 @@ function handleShare() {
<template>
<view
class="animate-in fade-in animate-ease-out animate-duration-300"
v-show="loading"
class="animate-in fade-in animate-ease-out animate-duration-300"
v-show="loading"
>
<!-- 骨架屏 -->
<StoreSkeleton/>
</view>
<view
class="animate-in fade-in animate-ease-in animate-duration-300"
v-if="!loading"
class="animate-in fade-in animate-ease-in animate-duration-300"
v-if="!loading"
>
<!-- 页面内容 -->
<view class="store-box">
<view class="relative">
<!-- 状态栏 -->
<view class="fixed top-0 left-0 z-9 w-full transition-all pt-6rpx" :class="[showStatusBar ? 'bg-#fff' : '']">
<status-bar />
<view class="flex-center-sb px-30rpx">
<image
@click="navigateBack"
src="@img/chef/1327.png"
mode="aspectFill"
class="w-48rpx h-48rpx relative z-1"
/>
<view class="flex items-center">
<image
@click="navigateTo('/pages-store/pages/store/search/index?id=' + storeID)"
src="@img-store/1333.png"
mode="aspectFill"
class="w-68rpx h-68rpx relative z-1 mr-20rpx"
/>
<view @click="handleCollectionClick" class="w-68rpx h-68rpx relative z-1 mr-20rpx">
<image
v-if="!storeDetail?.isCollect"
src="@img-store/1334.png"
mode="aspectFill"
class="w-68rpx h-68rpx"
/>
<image
v-else
src="@img-store/1337.png"
mode="aspectFill"
class="w-68rpx h-68rpx"
/>
</view>
<image
@click="handleShare"
src="@img-store/1335.png"
mode="aspectFill"
class="w-68rpx h-68rpx relative z-1"
/>
</view>
</view>
</view>
<view class="anchors"></view>
<!-- 主图 -->
<!-- <image-->
<!-- :src="storeDetail?.shopImages?.split(',')[0]"-->
<!-- mode="aspectFill"-->
<!-- class="w-750rpx h-562rpx absolute top-0 left-0"-->
<!-- />-->
<!-- 顶部导航栏 -->
<view class="fixed top-0 left-0 z-9 w-full transition-all pt-6rpx" :class="[showStatusBar ? 'bg-#fff' : '']">
<status-bar />
<wd-swiper class="bg-common" v-if="storeDetail && storeDetail?.shopImages?.split(',').length > 0" :list="storeDetail?.shopImages?.split(',')" height="562rpx" autoplay></wd-swiper>
<view class="flex-center-sb px-30rpx h-88rpx">
<image
@click="navigateBack"
src="@img/chef/1327.png"
mode="aspectFill"
class="w-48rpx h-48rpx relative z-1"
/>
<image
@click="handleShare"
src="@img-store/1335.png"
mode="aspectFill"
class="w-48rpx h-48rpx relative z-1"
/>
</view>
</view>
<view class="px-30rpx pt-40rpx pb-42rpx">
<!-- 店铺信息 -->
<!-- 占位 -->
<status-bar />
<view class="h-44rpx"></view>
<!-- 店铺 Logo -->
<view class="flex justify-center ">
<image
:src="storeDetail?.shopImages?.split(',')[0]"
mode="aspectFill"
class="w-128rpx h-128rpx rounded-24rpx bg-common"
/>
</view>
<!-- 店铺信息区域 -->
<view class="px-30rpx pt-24rpx pb-30rpx">
<view class="text-center">
<view class="text-center text-40rpx lh-40rpx text-#333 font-bold">
<!-- 店铺名称 -->
<view class="text-36rpx lh-44rpx text-#333 font-bold">
{{ storeDetail?.merchantName }}
</view>
<view class="center text-24rpx lh-24rpx my-16rpx">
<!-- 评分 + CHEFLINK -->
<view class="center text-24rpx lh-24rpx mt-16rpx">
<view class="flex items-center">
<text class="text-#333 font-500">{{ storeDetail?.rating }}</text>
<image
src="@img/chef/124.png"
class="w-24rpx h-24rpx mx-4rpx"
src="@img/chef/124.png"
class="w-24rpx h-24rpx mx-4rpx"
></image>
<text class="text-#7D7D7D">({{ storeDetail?.commentCount }})</text>
</view>
<view class="flex items-center text-#CE7138 px-10rpx">
<image
src="@img-store/1339.png"
class="w-24rpx h-24rpx mr-4rpx"
src="@img-store/1339.png"
class="w-24rpx h-24rpx mr-4rpx"
></image>
CHEFLINK
</view>
<text v-if="+storeDetail?.deliveryService === 1" class="text-#7D7D7D">
• {{ storeDetail?.deliveryTime }}{{ daySuffix(storeDetail?.deliveryTime) }}
</text>
</view>
<view class="text-24rpx lh-24rpx text-#7D7D7D text-center mt-16rpx">
{{ t('pages-store.store.title') }} US${{ storeDetail?.minOrderPrice }}
<!-- 总销量 -->
<view class="text-24rpx lh-24rpx text-#7D7D7D text-center mt-12rpx">
{{ t('common.sales') }}：{{ storeDetail?.totalOrderCount }}
</view>
<!--根据商家营业时间计算处理-->
<view class="text-24rpx lh-24rpx text-#7D7D7D text-center mt-16rpx">
<template v-if="closingInfo.show">
{{ t('pages-store.store.tips') }} {{ closingInfo.minutes }} {{ t('pages-store.store.tips1') }}
</template>
<template v-else>
{{ parseBusinessHoursUtils(storeDetail?.businessHours) }}
</template>
<text v-if="storeDistance" class="ml-10rpx">
{{ t('common.distance') }} {{ storeDistance }} {{ t('common.mile') }}
</text>
</view>
<text v-if="storeDetail?.totalOrderCount > 0" class="mt-16rpx h-48rpx bg-#00A76D/18 rounded-8rpx px-22rpx mx-auto text-24rpx lh-24rpx text-#00A76D mr-20rpx">
{{ t('common.sales') }} ：{{ storeDetail?.totalOrderCount }}
</text>
<text v-if="storeDetail?.reorderedCount > 0" class="mt-16rpx h-48rpx bg-#00A76D/18 rounded-8rpx px-22rpx mx-auto text-24rpx lh-24rpx text-#00A76D">
{{ storeDetail?.reorderedCount }} {{ t('pages-store.store.tips2') }}
</text>
</view>
<!-- 新功能插入区域 start -->
<!-- 商家优惠券 -->
<view class="py-24rpx mt-40rpx border-top border-bottom" v-if="storeCouponList.length">
<view class="flex items-center justify-between mb-24rpx">
<text class="text-28rpx lh-28rpx font-500 text-#333">{{ t('pages-store.store.merchantDiscounts') }}</text>
<view @click="handleClaimNow" class="flex items-center">
<text class="text-28rpx lh-28rpx font-500 text-#CE7138 mr-8rpx">{{ t('pages-store.store.claimNow') }}</text>
<i class="i-carbon:chevron-right text-24rpx text-#CE7138"></i>
<!-- 配送信息卡片 -->
<view v-if="showDeliverySwitch" class="delivery-info-card">
<template v-if="+storeDetail?.deliveryService === 1 && deliveryMethod === 0">
<view class="delivery-info-left">
<view>{{ t('pages-store.store.tips4') }} $ {{ storeDetail?.minOrderPrice }}</view>
<view>{{ t('pages-store.store.tips5') }} $ {{ storeDetail?.deliveryFee }}{{ t('pages-store.store.start') }}</view>
</view>
</view>
<scroll-view
scroll-x
class="coupon-scroll"
<view class="delivery-info-divider"></view>
<view class="delivery-info-right">
<view class="text-32rpx lh-40rpx text-#333 font-500">
{{ storeDetail?.deliveryTime }}{{ daySuffix(storeDetail?.deliveryTime) }}
</view>
<view class="text-24rpx lh-24rpx text-#7D7D7D mt-8rpx">{{ t('pages-store.store.earTime') }}</view>
</view>
</template>
<template v-if="+storeDetail?.selfPickup === 1 && deliveryMethod === 1">
<view class="delivery-info-left">
<view v-if="cartDataList.length > 0 && cartSavingsData && cartSavingsData.savings > 0">
{{ t('pages-store.store.use') }} {{ Config.appName }} {{ t('pages-store.store.tips3') }} ${{ cartSavingsData.savings }} {{ t('pages-store.store.discount') }}
</view>
<view v-else>--</view>
</view>
<view class="delivery-info-divider"></view>
<view class="delivery-info-right">
<view class="text-32rpx lh-40rpx text-#333 font-500">{{ storeDetail?.pickupTime }}{{ t('common.minutes') }}</view>
<view class="text-24rpx lh-24rpx text-#7D7D7D mt-8rpx">{{ t('pages-store.store.earTime') }}</view>
</view>
</template>
</view>
<!-- 优惠券标签行 -->
<view class="mt-24rpx flex items-center" v-if="storeCouponList.length">
<scroll-view
scroll-x
class="coupon-scroll flex-1"
:show-scrollbar="false"
enable-flex
>
@@ -619,107 +611,104 @@ function handleShare() {
</view>
</view>
</scroll-view>
</view>
<!-- 新功能插入区域 end -->
<!-- 自取 配送切换 -->
<!-- <view v-if="showDeliverySwitch" class="w-318rpx mt-40rpx">
<l-segmented :value="deliveryMethod" :options="deliveryMethodOptions" @click="handleClickSegmented" shape="round" bg-color="#F2F2F2" active-color="#333" />
</view> -->
<view v-if="showDeliverySwitch" class="border-#D8D8D8 border-solid border-1px rounded-20rpx min-h-164rpx mt-36rpx px-45rpx py-18rpx text-24rpx lh-24rpx flex-center-sb">
<template v-if="+storeDetail?.deliveryService === 1 && deliveryMethod === 0">
<view class="w-full h-full flex-1 text-center text-#CE7138 pr-44rpx">
<view>{{ t('pages-store.store.tips4') }} ${{ storeDetail?.minOrderPrice }}</view>
<view>{{ t('pages-store.store.tips5') }} ${{ storeDetail?.deliveryFee }}{{ t('pages-store.store.start') }}</view>
</view>
<view class="h-128rpx w-1rpx rotate-0 bg-#D8D8D8"></view>
<view class="w-full flex-1 center flex-col pl-44rpx">
<view class="text-#333 mb-8rpx">
{{ storeDetail?.deliveryTime }}{{ daySuffix(storeDetail?.deliveryTime) }}
</view>
<view class="text-#7D7D7D">{{ t('pages-store.store.earTime') }}</view>
</view>
</template>
<template v-if="+storeDetail?.selfPickup === 1 && deliveryMethod === 1">
<view class="w-full h-full flex-1 text-center text-#CE7138 pr-44rpx">
<view v-if="cartDataList.length > 0 && cartSavingsData && cartSavingsData.savings > 0">
{{ t('pages-store.store.use') }} {{ Config.appName }} {{ t('pages-store.store.tips3') }} ${{ cartSavingsData.savings }} {{ t('pages-store.store.discount') }}
</view>
<view v-else class="">--</view>
</view>
<view class="h-128rpx w-1rpx rotate-0 bg-#D8D8D8"></view>
<view class="w-full flex-1 center flex-col pl-44rpx">
<view class="text-#333 mb-8rpx">{{ storeDetail?.pickupTime }}{{ t('common.minutes') }}</view>
<view class="text-#7D7D7D">{{ t('pages-store.store.earTime') }}</view>
</view>
</template>
<view @click="handleClaimNow" class="flex items-center shrink-0 ml-16rpx">
<text class="text-28rpx lh-28rpx font-500 text-#CE7138 mr-4rpx">{{ t('pages-store.store.claimNow') }}</text>
<i class="i-carbon:chevron-right text-24rpx text-#CE7138"></i>
</view>
</view>
</view>
<wd-tabs v-model="activeTab" slidable="always" autoLineWidth>
<block v-for="item in tabs" :key="item">
<wd-tab :title="item.title">
</wd-tab>
</block>
</wd-tabs>
<view class="box mt--6px"></view>
<view v-if="tabs.length > 0" class="px-30rpx pb-120rpx">
<view v-if="currentDishList.length > 0" class="text-40rpx lh-40rpx font-500 my-36rpx">{{ t('pages-store.store.recommend') }}</view>
<view v-if="currentDishList.length > 0" class="grid grid-cols-2 gap-30rpx">
<!-- 分类标签（胶囊样式） -->
<scroll-view scroll-x class="w-full" :show-scrollbar="false" enable-flex>
<view class="flex items-center px-30rpx pb-24rpx">
<view
v-for="(item, index) in tabs"
:key="item.key"
@click="activeTab = index"
class="tab-chip"
:class="activeTab === index ? 'tab-chip--active' : ''"
>
{{ item.title }}
</view>
</view>
</scroll-view>
<!-- 商品列表 -->
<view v-if="tabs.length > 0" class="px-30rpx pb-180rpx">
<view v-if="currentDishList.length > 0" class="grid grid-cols-2 gap-24rpx items-start">
<template v-for="item in currentDishList" :key="item.id">
<view @click="navigateToDishes(item)" class="w-100% mb-10rpx">
<view class="relative h-248rpx rounded-24rpx mb-28rpx">
<view @click.stop="handleDishCollectionClick(item)" class="w-68rpx h-68rpx absolute z-2 top-0 right-0">
<image
v-if="!item.isCollect"
src="@img-store/1334.png"
mode="aspectFill"
class="w-full h-full"
/>
<image
v-else
src="@img-store/1337.png"
mode="aspectFill"
class="w-full h-full"
/>
<view @click="navigateToDishes(item)" class="dish-card" :class="{ 'dish-card--soldout': isSoldOutStock(item?.stock) }">
<!-- 商品图片 -->
<view class="dish-card-image">
<!-- NEW 绑带标签 -->
<view v-if="item.isNew == 1" class="dish-new-ribbon">
<text class="dish-new-ribbon__text">NEW</text>
</view>
<image
:src="item?.dishImage?.split(',')[0]"
<view @click.stop="handleDishCollectionClick(item)" class="w-56rpx h-56rpx absolute z-4 top-12rpx right-12rpx center">
<image
v-if="!item.isCollect"
src="@img-store/1334.png"
mode="aspectFill"
class="w-full h-full rounded-24rpx bg-common"
v-if="item.dishImage.split(',').length > 0"
/>
<image
:src="item?.dishImage"
mode="aspectFill"
class="w-full h-full rounded-24rpx bg-common"
class="w-44rpx h-44rpx"
style="filter: drop-shadow(0 2rpx 6rpx rgba(0,0,0,0.18))"
/>
<image
v-else
src="@img-store/1337.png"
mode="aspectFill"
class="w-44rpx h-44rpx"
style="filter: drop-shadow(0 2rpx 6rpx rgba(0,0,0,0.18))"
/>
</view>
<!-- 已售完遮罩 -->
<view v-if="isSoldOutStock(item?.stock)" class="dish-sold-dim"></view>
<!-- 已售完标签 -->
<view v-if="isSoldOutStock(item?.stock)" class="dish-sold-tag">{{ t('common.prompt.soldOut') }}</view>
<image
:src="item?.dishImage?.split(',')[0]"
mode="aspectFill"
class="dish-card-img"
/>
</view>
<view class="line-clamp-1 text-30rpx text-#333 font-500">
{{ item.dishName }}
</view>
<view class="flex-center-sb mt-12rpx">
<text class="text-26rpx lh-30rpx text-#333 font-500">US${{ item.discountPrice }}</text>
<view
v-if="Number(item.memberPrice) > 0"
class="member-price-tag text-[#FBE3C3] font-500 text-28rpx lh-28rpx center pl-6rpx break-all"
>
<text class="!text-24rpx">{{ t('pages-store.store.members') }}: </text>
${{ item.memberPrice }}
<!-- 卡片信息区 -->
<view class="dish-card-body">
<!-- 价格 + 销量 -->
<view class="flex items-start justify-between gap-12rpx mb-14rpx">
<view class="min-w-0 flex-1">
<text class="dish-price">$ {{ item.discountPrice }}</text>
<text
v-if="Number(item?.originalPrice) > Number(item?.discountPrice)"
class="dish-original-price"
>$ {{ item.originalPrice }}</text>
</view>
<text class="dish-sales shrink-0">{{ t('pages-store.store.sales') }}：{{ item.salesCount }}</text>
</view>
</view>
<view class="flex-center-sb mt-12rpx">
<view class="text-28rpx text-#999">
<view class="line-through">US${{ item.originalPrice }}</view>
<view>{{ t('pages-store.store.sales') }}:{{ item.salesCount }}</view>
<!-- 商品名称 -->
<view class="dish-title line-clamp-2 mb-16rpx">
{{ item.dishName }}
</view>
<view class="center w-64rpx h-64rpx rounded-50% bg-white shadow-lg">
<image
<!-- 会员价 + 加购按钮 -->
<view class="flex items-center justify-between gap-12rpx">
<view
v-if="Number(item.memberPrice) > 0"
class="dish-member shrink min-w-0"
>
<text class="dish-member-inner">{{ t('pages-store.store.members') }}: $ {{ item.memberPrice }}</text>
</view>
<view v-else class="flex-1 min-w-0"></view>
<view class="dish-add-btn center shrink-0">
<image
src="@img/chef/1285.png"
class="w-30rpx h-30rpx shrink-0"
></image>
class="w-28rpx h-28rpx"
></image>
</view>
</view>
<!-- 营销标签 -->
<view
v-if="getDishPromoLabel(item)"
class="dish-promo mt-16rpx"
>
<text class="dish-promo-text">{{ getDishPromoLabel(item) }}</text>
</view>
</view>
</view>
@@ -731,70 +720,91 @@ function handleShare() {
</view>
</template>
</view>
<view @click="navigateTo('/pages-user/pages/member/index')" v-if="cartDataList.length > 0 && cartSavingsData && cartSavingsData.savings > 0" class="h-96rpx bg-#CE7138 pl-56rpx flex items-center fixed bottom-0 left-0 w-full z-9">
<!-- 底部购物车浮窗 -->
<view
v-if="userStore.isLogin && cartDataList.length > 0"
class="store-cart-float"
@click="navigateToCart"
>
<view class="store-cart-float-inner">
<view class="relative mr-16rpx">
<view class="i-carbon:shopping-cart text-44rpx text-#333"></view>
<view class="store-cart-badge">{{ cartDataList.length > 99 ? '99+' : cartDataList.length }}</view>
</view>
<text class="text-28rpx lh-28rpx text-#333 font-500">{{ t('pages-user.cart.viewCart') }}</text>
<view class="text-28rpx text-#999 ml-55rpx"></view>
</view>
</view>
<!-- 会员省钱提示条 -->
<view
@click="navigateTo('/pages-user/pages/member/index')"
v-if="cartDataList.length > 0 && cartSavingsData && cartSavingsData.savings > 0"
class="store-savings-bar"
>
<image
src="@img/chef/1289.png"
class="mr-10rpx w-32rpx h-32rpx shrink-0"
src="@img/chef/1289.png"
class="mr-10rpx w-32rpx h-32rpx shrink-0"
></image>
<text class="text-[#fff] text-24rpx lh-24rpx">
{{ t('pages-store.store.use') }} {{ Config.appName }} {{ t('pages-store.store.tips3') }} ${{ cartSavingsData.savings }} {{ t('pages-store.store.discount') }}
{{ t('pages-store.store.use') }} {{ Config.appName }} {{ t('pages-store.store.tips3') }} ${{ cartSavingsData.savings }} {{ t('pages-store.store.discount') }}
</text>
</view>
</view>
<view v-if="cartDataList.length > 0" @click="navigateToCart" class="fixed z-9 bottom-138rpx left-50% translate-x--50% px-26rpx h-88rpx bg-#14181B rounded-44rpx center text-28rpx text-#fff font-500">
<image src="@img/chef/125.png" class="w-28rpx h-28rpx shrink-0"></image>
<view class="ml-10rpx whitespace-nowrap line-clamp-1">{{ storeDetail.merchantName }}</view>
<view class="w-8rpx h-8rpx rounded-50% bg-white mx-8rpx"></view>
<text>{{ cartDataList.length }}</text>
</view>
</view>
<coupon-popup
ref="couponPopupRef"
:coupon-list="storeCouponList"
@confirm="getMerchantCouponReceiveList"
/>
</template>
<style>
page {
background-color: #fff;
background-color: #F6F6F6;
}
</style>
<style scoped lang="scss">
:deep(.wd-swiper__track) {
border-radius: 0;
}
:deep(.wd-tabs__nav-container) {
.is-active {
color: #333 !important;
font-weight: 500 !important;
}
}
:deep(.wd-tabs__nav-item-text) {
font-size: 30rpx !important;
//color: #7D7D7D;
padding-bottom: 32rpx !important;
/* ====== 配送信息卡片 ====== */
.delivery-info-card {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 30rpx;
padding: 24rpx 40rpx;
border: 2rpx solid #D8D8D8;
border-radius: 20rpx;
min-height: 140rpx;
}
:deep(.wd-tabs__line) {
border-radius: 0 !important;
height: 10rpx !important;
background-color: #333333 !important;
}
.box {
border-bottom: 10rpx solid #F6F6F6 !important;
}
.member-price-tag {
min-width: 190rpx;
height: 42rpx;
background-image: url("/static/images/chef/1282.png");
background-size: 100% 100%;
background-repeat: no-repeat;
.delivery-info-left {
flex: 1;
text-align: center;
font-size: 24rpx;
line-height: 36rpx;
color: #CE7138;
padding-right: 30rpx;
}
.delivery-info-divider {
width: 2rpx;
height: 100rpx;
background: #D8D8D8;
flex-shrink: 0;
}
.delivery-info-right {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
padding-left: 30rpx;
}
/* ====== 优惠券标签 ====== */
.coupon-scroll {
width: 100%;
}
@@ -806,21 +816,21 @@ page {
}
.coupon-item {
margin-right: 20rpx;
margin-right: 15rpx;
flex-shrink: 0;
&:last-child {
margin-right: 0;
}
}
.coupon-tag {
min-width: 120rpx;
min-width: 110rpx;
height: 52rpx;
display: flex;
align-items: center;
justify-content: center;
padding: 0 28rpx;
padding: 0 18rpx;
position: relative;
background-image: url("/static/images/5008.png");
background-size: 100% 100%;
@@ -834,4 +844,248 @@ page {
font-weight: 400;
white-space: nowrap;
}
/* ====== 胶囊标签 ====== */
.tab-chip {
height: 60rpx;
line-height: 60rpx;
padding: 0 32rpx;
border-radius: 30rpx;
font-size: 26rpx;
color: #333;
border: 2rpx solid #E0E0E0;
white-space: nowrap;
flex-shrink: 0;
margin-right: 20rpx;
text-align: center;
&:last-child {
margin-right: 0;
}
&--active {
background: #333;
color: #fff;
border-color: #333;
}
}
/* ====== 商品卡片 ====== */
.dish-card {
width: 100%;
border-radius: 24rpx;
overflow: hidden;
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
background: #fff;
&--soldout {
opacity: 0.7;
}
}
.dish-card-image {
position: relative;
width: 100%;
height: 330rpx;
background: #f0f0f0;
overflow: hidden;
}
.dish-card-img {
width: 100%;
height: 100%;
display: block;
z-index: 1;
}
.dish-card-body {
padding: 20rpx 20rpx 22rpx;
}
.dish-price {
color: #e02e24;
font-size: 32rpx;
font-weight: 600;
line-height: 1.2;
}
.dish-original-price {
margin-left: 10rpx;
color: #b3b3b3;
font-size: 22rpx;
font-weight: 400;
text-decoration: line-through;
vertical-align: baseline;
}
.dish-sales {
color: #999;
font-size: 24rpx;
line-height: 1.35;
max-width: 48%;
text-align: right;
}
.dish-title {
color: #1a1a1a;
font-size: 28rpx;
font-weight: 500;
line-height: 1.45;
}
.dish-member {
display: inline-flex;
align-items: center;
max-width: calc(100% - 88rpx);
}
.dish-member-inner {
display: inline-block;
padding: 6rpx 18rpx;
border-radius: 999rpx;
background: linear-gradient(180deg, #fff5eb 0%, #ffe8d6 100%);
color: #c45c1a;
font-size: 24rpx;
font-weight: 500;
line-height: 1.35;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.dish-add-btn {
width: 56rpx;
height: 56rpx;
border-radius: 50%;
background: #14181b;
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.12);
}
.dish-promo {
padding: 12rpx 16rpx;
border-radius: 12rpx;
background: #fff0f0;
}
.dish-promo-text {
color: #e02e24;
font-size: 22rpx;
font-weight: 500;
line-height: 1.4;
}
/* NEW 绑带标签 */
.dish-new-ribbon {
position: absolute;
top: 0;
left: 0;
width: 184rpx;
height: 184rpx;
overflow: hidden;
z-index: 5;
pointer-events: none;
&__text {
position: absolute;
top: 26rpx;
left: -66rpx;
width: 240rpx;
text-align: center;
font-size: 22rpx;
font-weight: 700;
color: #fff;
letter-spacing: 2rpx;
line-height: 44rpx;
background: #E23636;
transform: rotate(-45deg);
}
}
/* 已售完遮罩 */
.dish-sold-dim {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 2;
background: rgba(20, 24, 27, 0.42);
pointer-events: none;
}
/* 已售完标签 */
.dish-sold-tag {
position: absolute;
z-index: 3;
left: 16rpx;
top: 16rpx;
padding: 0 14rpx;
height: 48rpx;
border-radius: 24rpx;
background: rgba(20, 24, 27, 0.75);
color: #fff;
font-size: 24rpx;
font-weight: 500;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
}
/* ====== 底部购物车浮窗 ====== */
.store-cart-float {
position: fixed;
bottom: calc(40rpx + env(safe-area-inset-bottom));
left: 50%;
width: 90%;
transform: translateX(-50%);
z-index: 9;
}
.store-cart-float-inner {
justify-content: space-between;
display: flex;
align-items: center;
height: 96rpx;
padding: 0 36rpx;
border-radius: 48rpx;
background: rgba(255, 255, 255, 0.75);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
box-shadow: 0 8rpx 40rpx rgba(0, 0, 0, 0.12);
border: 1rpx solid rgba(255, 255, 255, 0.6);
}
.store-cart-badge {
position: absolute;
top: -8rpx;
right: -12rpx;
min-width: 32rpx;
height: 32rpx;
padding: 0 8rpx;
font-size: 20rpx;
line-height: 32rpx;
font-weight: 600;
color: #fff;
text-align: center;
background: #e23636;
border-radius: 999rpx;
}
/* ====== 会员省钱提示条 ====== */
.store-savings-bar {
position: fixed;
bottom: calc(160rpx + env(safe-area-inset-bottom));
left: 50%;
width: 90%;
transform: translateX(-50%);
z-index: 8;
height: 64rpx;
border-radius: 32rpx;
background: #CE7138;
display: flex;
align-items: center;
padding: 0 32rpx;
white-space: nowrap;
}
</style>