wangfukang
2 weeks ago
8 changed files with 1738 additions and 228 deletions
@ -0,0 +1,694 @@ |
|||||
|
<template> |
||||
|
<view class="pending-page" :class="{'store-scene': isStoreScene}"> |
||||
|
<view class="hero"> |
||||
|
<view class="top-bar" @tap="back"> |
||||
|
<view class="back-btn" :style="navPaddingStyle"> |
||||
|
<uni-icons type="left" size="27" color="#fff"></uni-icons> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="hero-copy"> |
||||
|
<view class="hero-kicker">{{isStoreScene ? '校园团购' : '校园外卖'}}</view> |
||||
|
<view class="hero-title">{{isStoreScene ? '正在等你来拼团' : '附近饭搭子开团中'}}</view> |
||||
|
<view class="hero-sub">{{isStoreScene ? '同学们发起的到店团，凑齐就一起省' : '公开拼饭局都在这里，点进店铺直接参团'}}</view> |
||||
|
</view> |
||||
|
<view class="hero-badge"> |
||||
|
<image src="/static/images/img/loading.gif" mode="aspectFit"></image> |
||||
|
<text>待成团</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="search-card"> |
||||
|
<view class="search-box"> |
||||
|
<uni-icons type="search" size="18" :color="searchIconColor"></uni-icons> |
||||
|
<input type="text" v-model="query.keyWord" confirm-type="search" placeholder="搜索商品或商家" |
||||
|
@confirm="searchGroup" /> |
||||
|
<view class="search-btn" @tap="searchGroup">搜索</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="list-wrap"> |
||||
|
<view class="empty-card" v-if="groupList.length === 0 && loadStatus !== 'loading'"> |
||||
|
<view class="empty-icon">拼</view> |
||||
|
<view class="empty-title">暂时没有待成团</view> |
||||
|
<view class="empty-sub">换个关键词试试，或者稍后再来看看同学们的新团</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="group-card" v-for="(item,index) in groupList" :key="item.id" @tap="joinGroup(item)"> |
||||
|
<view class="rank-pill">热拼 {{index + 1}}</view> |
||||
|
<view class="shop-row"> |
||||
|
<view class="shop-img"> |
||||
|
<image :src="item.uiShopIcon" mode="aspectFill"></image> |
||||
|
<view class="scene-mark">{{isStoreScene ? '团' : '饭'}}</view> |
||||
|
</view> |
||||
|
<view class="shop-info"> |
||||
|
<view class="shop-name">{{item.uiShopName}}</view> |
||||
|
<view class="product-name">{{item.uiProductName}}</view> |
||||
|
<view class="tag-row"> |
||||
|
<text>{{item.uiShopType}}</text> |
||||
|
<text>{{item.uiTargetMembers}}人成团</text> |
||||
|
<text>还差{{item.uiMissingMembers}}人</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="product-row"> |
||||
|
<image :src="item.uiProductImage" mode="aspectFill"></image> |
||||
|
<view class="product-copy"> |
||||
|
<view class="price-row"> |
||||
|
<text class="group-label">拼团价</text> |
||||
|
<text class="price">¥{{item.uiGroupPrice}}</text> |
||||
|
</view> |
||||
|
<view class="progress-bar"> |
||||
|
<view class="progress-inner" :style="item.uiProgressStyle"></view> |
||||
|
</view> |
||||
|
<view class="progress-copy">{{item.uiCurrentMembers}}人已拼 · 点击参与这一团</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="card-bottom"> |
||||
|
<view class="time-copy">{{item.uiExpireText}}</view> |
||||
|
<view class="join-btn">{{isStoreScene ? '参与到店团' : '参与拼饭局'}}</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<uni-load-more :status="loadStatus" v-if="groupList.length > 0" /> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
scene: 'takeaway', |
||||
|
menuButtonInfo: { |
||||
|
top: 0 |
||||
|
}, |
||||
|
loadStatus: 'more', |
||||
|
navPaddingStyle: '', |
||||
|
totalPages: 1, |
||||
|
query: { |
||||
|
regionId: '', |
||||
|
status: 0, |
||||
|
isFace: 0, |
||||
|
merchantType: 1, |
||||
|
pageNumber: 1, |
||||
|
pageSize: 10, |
||||
|
keyWord: '' |
||||
|
}, |
||||
|
groupList: [] |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
isStoreScene() { |
||||
|
return this.scene === 'storeGroup' |
||||
|
}, |
||||
|
searchIconColor() { |
||||
|
return this.isStoreScene ? '#f0642f' : '#08735d' |
||||
|
} |
||||
|
}, |
||||
|
onLoad(option) { |
||||
|
this.scene = option && option.scene ? option.scene : 'takeaway' |
||||
|
this.query.merchantType = this.isStoreScene ? 2 : 1 |
||||
|
this.initRegion() |
||||
|
}, |
||||
|
onShow() { |
||||
|
this.menuButtonInfo = uni.getMenuButtonBoundingClientRect() |
||||
|
this.navPaddingStyle = 'padding-top: ' + this.menuButtonInfo.top + 'px;' |
||||
|
}, |
||||
|
onReachBottom() { |
||||
|
if (this.loadStatus === 'loading' || this.query.pageNumber >= this.totalPages) return |
||||
|
this.query.pageNumber += 1 |
||||
|
this.getGroupList() |
||||
|
}, |
||||
|
methods: { |
||||
|
initRegion() { |
||||
|
const area = uni.getStorageSync('area') |
||||
|
if (!area) { |
||||
|
this.tui.toast('请先选择区域') |
||||
|
return |
||||
|
} |
||||
|
try { |
||||
|
const areaInfo = typeof area === 'string' ? JSON.parse(area) : area |
||||
|
this.query.regionId = areaInfo.id || '' |
||||
|
} catch (e) { |
||||
|
this.query.regionId = '' |
||||
|
} |
||||
|
if (!this.query.regionId) { |
||||
|
this.tui.toast('请先选择区域') |
||||
|
return |
||||
|
} |
||||
|
this.getGroupList() |
||||
|
}, |
||||
|
searchGroup() { |
||||
|
this.query.pageNumber = 1 |
||||
|
this.totalPages = 1 |
||||
|
this.groupList = [] |
||||
|
this.getGroupList() |
||||
|
}, |
||||
|
getGroupList() { |
||||
|
if (!this.query.regionId) return |
||||
|
this.loadStatus = 'loading' |
||||
|
this.tui.request('/mall/admin/orderGroup/page', 'POST', this.query, false, false).then((res) => { |
||||
|
if (res.code == 200) { |
||||
|
const result = res.result || {} |
||||
|
const list = Array.isArray(result.records) ? result.records.map(item => this.formatGroupItem(item)) : [] |
||||
|
if (this.query.pageNumber === 1) { |
||||
|
this.groupList = list |
||||
|
} else { |
||||
|
this.groupList = [...this.groupList, ...list] |
||||
|
} |
||||
|
this.totalPages = result.pages || result.totalPages || 1 |
||||
|
this.loadStatus = this.query.pageNumber >= this.totalPages ? 'nomore' : 'more' |
||||
|
} else { |
||||
|
this.loadStatus = 'nomore' |
||||
|
this.tui.toast(res.message) |
||||
|
} |
||||
|
}).catch(() => { |
||||
|
this.loadStatus = 'nomore' |
||||
|
}) |
||||
|
}, |
||||
|
joinGroup(item) { |
||||
|
const shopItem = item.shopItem || {} |
||||
|
if (!shopItem.id) { |
||||
|
this.tui.toast('商家信息缺失，暂时无法参团') |
||||
|
return |
||||
|
} |
||||
|
const sceneQuery = this.isStoreScene ? '&orderScene=storeGroup' : '' |
||||
|
const shopItemStr = encodeURIComponent(JSON.stringify(shopItem)) |
||||
|
uni.navigateTo({ |
||||
|
url: '/package2/group/groupBuySingle?type=shop&item=' + shopItemStr + |
||||
|
'&groupId=' + item.id + |
||||
|
'&targetMembers=' + (item.targetMembers || 2) + |
||||
|
'&isFaceToFace=0' + sceneQuery |
||||
|
}) |
||||
|
}, |
||||
|
getShopIcon(item) { |
||||
|
return (item.shopItem && item.shopItem.shopIcon) || item.productPicture || '/static/images/img/shangpintu.png' |
||||
|
}, |
||||
|
formatGroupItem(item) { |
||||
|
return { |
||||
|
...item, |
||||
|
uiShopIcon: this.getShopIcon(item), |
||||
|
uiProductImage: item.productPicture || this.getShopIcon(item), |
||||
|
uiShopName: this.getShopName(item), |
||||
|
uiProductName: item.productName || '同学发起的拼团', |
||||
|
uiShopType: this.getShopType(item), |
||||
|
uiTargetMembers: item.targetMembers || 2, |
||||
|
uiCurrentMembers: item.currentMembers || 0, |
||||
|
uiMissingMembers: this.missingMembers(item), |
||||
|
uiGroupPrice: this.formatPrice(item.groupPrice), |
||||
|
uiExpireText: this.formatExpireText(item), |
||||
|
uiProgressStyle: this.buildProgressStyle(item) |
||||
|
} |
||||
|
}, |
||||
|
getShopName(item) { |
||||
|
return (item.shopItem && item.shopItem.shopName) || item.shopName || '未知商家' |
||||
|
}, |
||||
|
getShopType(item) { |
||||
|
const shopItem = item.shopItem || {} |
||||
|
return shopItem.shopTypeTitle || (shopItem.shopTakeaway && shopItem.shopTakeaway.type) || (this.isStoreScene ? '团购' : '美食') |
||||
|
}, |
||||
|
missingMembers(item) { |
||||
|
const target = Number(item.targetMembers || 2) |
||||
|
const current = Number(item.currentMembers || 0) |
||||
|
return Math.max(target - current, 0) |
||||
|
}, |
||||
|
buildProgressStyle(item) { |
||||
|
const target = Number(item.targetMembers || 2) |
||||
|
const current = Number(item.currentMembers || 0) |
||||
|
const percent = target > 0 ? Math.min(100, Math.max(12, Math.round(current / target * 100))) : 12 |
||||
|
return 'width: ' + percent + '%;' |
||||
|
}, |
||||
|
formatPrice(price) { |
||||
|
const num = Number(price || 0) |
||||
|
return num ? num.toFixed(2) : '--' |
||||
|
}, |
||||
|
formatExpireText(item) { |
||||
|
if (!item.expireTime) return '24小时内成团' |
||||
|
const expire = new Date(item.expireTime).getTime() |
||||
|
const diff = expire - Date.now() |
||||
|
if (isNaN(expire) || diff <= 0) return '即将结束' |
||||
|
const hours = Math.floor(diff / 3600000) |
||||
|
const minutes = Math.floor((diff % 3600000) / 60000) |
||||
|
return hours > 0 ? '剩余约' + hours + '小时' + minutes + '分' : '剩余约' + minutes + '分' |
||||
|
}, |
||||
|
back() { |
||||
|
uni.navigateBack() |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.pending-page { |
||||
|
min-height: 100vh; |
||||
|
padding-bottom: 140rpx; |
||||
|
background: |
||||
|
radial-gradient(circle at 12% 8%, rgba(197, 255, 153, 0.5), transparent 34%), |
||||
|
radial-gradient(circle at 90% 18%, rgba(175, 255, 231, 0.48), transparent 36%), |
||||
|
linear-gradient(180deg, #f6ffea 0%, #f7fff9 42%, #fff9ef 100%); |
||||
|
color: #06382f; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
|
||||
|
.store-scene { |
||||
|
background: |
||||
|
radial-gradient(circle at 82% 120rpx, rgba(255, 241, 210, 0.86) 0, rgba(255, 241, 210, 0) 260rpx), |
||||
|
radial-gradient(circle at 10% 260rpx, rgba(255, 190, 185, 0.3) 0, rgba(255, 190, 185, 0) 240rpx), |
||||
|
linear-gradient(180deg, #ffd0b8 0%, #ffe6d6 260rpx, #fff7ef 560rpx, #fffaf6 100%); |
||||
|
color: #3f2618; |
||||
|
} |
||||
|
|
||||
|
.hero { |
||||
|
min-height: 360rpx; |
||||
|
padding: 0 26rpx 36rpx; |
||||
|
box-sizing: border-box; |
||||
|
position: relative; |
||||
|
overflow: hidden; |
||||
|
background: linear-gradient(135deg, #0f8b6b 0%, #87eabf 58%, #fff0c8 100%); |
||||
|
color: #fff; |
||||
|
} |
||||
|
|
||||
|
.store-scene .hero { |
||||
|
background: linear-gradient(115deg, rgba(255, 132, 80, 0.98) 0%, rgba(255, 185, 113, 0.94) 56%, rgba(255, 236, 218, 0.9) 100%); |
||||
|
} |
||||
|
|
||||
|
.hero::after { |
||||
|
content: ''; |
||||
|
width: 420rpx; |
||||
|
height: 420rpx; |
||||
|
border-radius: 50%; |
||||
|
background: rgba(255, 255, 255, 0.22); |
||||
|
position: absolute; |
||||
|
right: -170rpx; |
||||
|
top: -130rpx; |
||||
|
} |
||||
|
|
||||
|
.top-bar { |
||||
|
height: 98rpx; |
||||
|
position: relative; |
||||
|
z-index: 2; |
||||
|
} |
||||
|
|
||||
|
.back-btn { |
||||
|
width: 68rpx; |
||||
|
height: 68rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
.hero-copy { |
||||
|
position: relative; |
||||
|
z-index: 2; |
||||
|
width: 66%; |
||||
|
padding-top: 24rpx; |
||||
|
} |
||||
|
|
||||
|
.hero-kicker { |
||||
|
display: inline-block; |
||||
|
padding: 8rpx 18rpx; |
||||
|
border-radius: 999rpx; |
||||
|
background: rgba(255, 255, 255, 0.34); |
||||
|
font-size: 22rpx; |
||||
|
font-weight: 900; |
||||
|
} |
||||
|
|
||||
|
.hero-title { |
||||
|
margin-top: 18rpx; |
||||
|
font-size: 48rpx; |
||||
|
line-height: 58rpx; |
||||
|
font-weight: 900; |
||||
|
} |
||||
|
|
||||
|
.hero-sub { |
||||
|
margin-top: 12rpx; |
||||
|
font-size: 24rpx; |
||||
|
line-height: 36rpx; |
||||
|
font-weight: 800; |
||||
|
color: rgba(255, 255, 255, 0.86); |
||||
|
} |
||||
|
|
||||
|
.hero-badge { |
||||
|
width: 190rpx; |
||||
|
height: 190rpx; |
||||
|
border-radius: 42rpx; |
||||
|
position: absolute; |
||||
|
right: 32rpx; |
||||
|
bottom: 42rpx; |
||||
|
z-index: 2; |
||||
|
background: rgba(255, 255, 255, 0.42); |
||||
|
box-shadow: 0 22rpx 44rpx rgba(0, 45, 29, 0.16); |
||||
|
text-align: center; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
.hero-badge image { |
||||
|
width: 120rpx; |
||||
|
height: 120rpx; |
||||
|
margin-top: 16rpx; |
||||
|
} |
||||
|
|
||||
|
.hero-badge text { |
||||
|
display: block; |
||||
|
font-size: 23rpx; |
||||
|
font-weight: 900; |
||||
|
} |
||||
|
|
||||
|
.search-card { |
||||
|
width: 94%; |
||||
|
margin: -32rpx auto 22rpx; |
||||
|
padding: 16rpx; |
||||
|
border-radius: 34rpx; |
||||
|
background: rgba(255, 255, 255, 0.76); |
||||
|
box-shadow: 0 18rpx 42rpx rgba(20, 115, 88, 0.12); |
||||
|
box-sizing: border-box; |
||||
|
position: relative; |
||||
|
z-index: 3; |
||||
|
} |
||||
|
|
||||
|
.store-scene .search-card { |
||||
|
box-shadow: 0 18rpx 42rpx rgba(178, 102, 48, 0.12); |
||||
|
} |
||||
|
|
||||
|
.search-box { |
||||
|
height: 72rpx; |
||||
|
padding: 0 16rpx; |
||||
|
border-radius: 28rpx; |
||||
|
background: #fff; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.search-box input { |
||||
|
flex: 1; |
||||
|
min-width: 0; |
||||
|
height: 72rpx; |
||||
|
margin-left: 12rpx; |
||||
|
font-size: 24rpx; |
||||
|
color: #243d36; |
||||
|
} |
||||
|
|
||||
|
.search-btn { |
||||
|
width: 86rpx; |
||||
|
height: 44rpx; |
||||
|
border-radius: 999rpx; |
||||
|
background: linear-gradient(90deg, #dcff9c, #baffec); |
||||
|
color: #08735d; |
||||
|
font-size: 22rpx; |
||||
|
font-weight: 900; |
||||
|
line-height: 44rpx; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.store-scene .search-btn { |
||||
|
background: linear-gradient(135deg, #ff7444 0%, #ffae53 100%); |
||||
|
color: #fff; |
||||
|
} |
||||
|
|
||||
|
.list-wrap { |
||||
|
width: 94%; |
||||
|
margin: 0 auto; |
||||
|
} |
||||
|
|
||||
|
.empty-card, |
||||
|
.group-card { |
||||
|
border-radius: 34rpx; |
||||
|
background: rgba(255, 255, 255, 0.86); |
||||
|
box-shadow: 0 18rpx 44rpx rgba(19, 91, 70, 0.12); |
||||
|
border: 1rpx solid rgba(255, 255, 255, 0.86); |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
|
||||
|
.store-scene .empty-card, |
||||
|
.store-scene .group-card { |
||||
|
box-shadow: 0 16rpx 34rpx rgba(178, 102, 48, 0.12); |
||||
|
border-color: rgba(255, 221, 188, 0.72); |
||||
|
} |
||||
|
|
||||
|
.empty-card { |
||||
|
min-height: 460rpx; |
||||
|
padding-top: 110rpx; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.empty-icon { |
||||
|
width: 100rpx; |
||||
|
height: 100rpx; |
||||
|
margin: 0 auto 22rpx; |
||||
|
border-radius: 34rpx; |
||||
|
background: linear-gradient(135deg, #e8ffb8, #b8ffe9); |
||||
|
color: #08735d; |
||||
|
font-size: 34rpx; |
||||
|
font-weight: 900; |
||||
|
line-height: 100rpx; |
||||
|
} |
||||
|
|
||||
|
.store-scene .empty-icon { |
||||
|
background: linear-gradient(135deg, #ff9a72 0%, #ffd38a 100%); |
||||
|
color: #fff; |
||||
|
} |
||||
|
|
||||
|
.empty-title { |
||||
|
font-size: 30rpx; |
||||
|
font-weight: 900; |
||||
|
} |
||||
|
|
||||
|
.empty-sub { |
||||
|
width: 78%; |
||||
|
margin: 14rpx auto 0; |
||||
|
color: rgba(0, 35, 28, 0.56); |
||||
|
font-size: 24rpx; |
||||
|
line-height: 38rpx; |
||||
|
} |
||||
|
|
||||
|
.group-card { |
||||
|
margin-bottom: 22rpx; |
||||
|
padding: 20rpx 18rpx 18rpx; |
||||
|
position: relative; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
.rank-pill { |
||||
|
position: absolute; |
||||
|
right: 18rpx; |
||||
|
top: 18rpx; |
||||
|
z-index: 2; |
||||
|
padding: 5rpx 13rpx; |
||||
|
border-radius: 999rpx; |
||||
|
background: rgba(219, 255, 157, 0.72); |
||||
|
color: #08735d; |
||||
|
font-size: 18rpx; |
||||
|
font-weight: 900; |
||||
|
} |
||||
|
|
||||
|
.store-scene .rank-pill { |
||||
|
background: #fff0dc; |
||||
|
color: #e96632; |
||||
|
} |
||||
|
|
||||
|
.shop-row { |
||||
|
display: flex; |
||||
|
} |
||||
|
|
||||
|
.shop-img { |
||||
|
width: 168rpx; |
||||
|
height: 168rpx; |
||||
|
flex-shrink: 0; |
||||
|
border-radius: 30rpx; |
||||
|
overflow: hidden; |
||||
|
position: relative; |
||||
|
background: #f4fff3; |
||||
|
box-shadow: 0 14rpx 28rpx rgba(20, 75, 57, 0.14); |
||||
|
} |
||||
|
|
||||
|
.shop-img image { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
|
||||
|
.scene-mark { |
||||
|
width: 42rpx; |
||||
|
height: 42rpx; |
||||
|
border-radius: 50%; |
||||
|
background: rgba(255, 255, 255, 0.92); |
||||
|
color: #ff5a35; |
||||
|
font-size: 22rpx; |
||||
|
font-weight: 900; |
||||
|
line-height: 42rpx; |
||||
|
text-align: center; |
||||
|
position: absolute; |
||||
|
left: 10rpx; |
||||
|
top: 10rpx; |
||||
|
} |
||||
|
|
||||
|
.shop-info { |
||||
|
flex: 1; |
||||
|
min-width: 0; |
||||
|
padding-left: 20rpx; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
|
||||
|
.shop-name { |
||||
|
padding-right: 92rpx; |
||||
|
font-size: 33rpx; |
||||
|
line-height: 42rpx; |
||||
|
font-weight: 900; |
||||
|
white-space: nowrap; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
} |
||||
|
|
||||
|
.product-name { |
||||
|
margin-top: 10rpx; |
||||
|
color: rgba(0, 35, 28, 0.58); |
||||
|
font-size: 24rpx; |
||||
|
line-height: 34rpx; |
||||
|
white-space: nowrap; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
} |
||||
|
|
||||
|
.store-scene .product-name { |
||||
|
color: #876247; |
||||
|
} |
||||
|
|
||||
|
.tag-row { |
||||
|
margin-top: 16rpx; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
.tag-row text { |
||||
|
display: inline-block; |
||||
|
margin: 0 8rpx 8rpx 0; |
||||
|
padding: 5rpx 10rpx; |
||||
|
border-radius: 12rpx; |
||||
|
background: rgba(184, 255, 225, 0.62); |
||||
|
color: #08735d; |
||||
|
font-size: 20rpx; |
||||
|
font-weight: 900; |
||||
|
} |
||||
|
|
||||
|
.store-scene .tag-row text { |
||||
|
background: #fff0dc; |
||||
|
color: #d65f2c; |
||||
|
} |
||||
|
|
||||
|
.product-row { |
||||
|
margin-top: 18rpx; |
||||
|
padding: 14rpx; |
||||
|
border-radius: 26rpx; |
||||
|
background: rgba(255, 250, 237, 0.72); |
||||
|
display: flex; |
||||
|
} |
||||
|
|
||||
|
.store-scene .product-row { |
||||
|
background: #fff7ee; |
||||
|
} |
||||
|
|
||||
|
.product-row image { |
||||
|
width: 110rpx; |
||||
|
height: 110rpx; |
||||
|
border-radius: 22rpx; |
||||
|
background: #fff; |
||||
|
flex-shrink: 0; |
||||
|
} |
||||
|
|
||||
|
.product-copy { |
||||
|
flex: 1; |
||||
|
min-width: 0; |
||||
|
padding-left: 16rpx; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
|
||||
|
.price-row { |
||||
|
height: 42rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.group-label { |
||||
|
margin-right: 10rpx; |
||||
|
padding: 4rpx 9rpx; |
||||
|
border-radius: 10rpx; |
||||
|
background: #fff0dc; |
||||
|
color: #b4572d; |
||||
|
font-size: 19rpx; |
||||
|
font-weight: 900; |
||||
|
} |
||||
|
|
||||
|
.price { |
||||
|
color: #f0441f; |
||||
|
font-size: 30rpx; |
||||
|
font-weight: 900; |
||||
|
} |
||||
|
|
||||
|
.progress-bar { |
||||
|
height: 14rpx; |
||||
|
margin-top: 16rpx; |
||||
|
border-radius: 999rpx; |
||||
|
background: rgba(214, 239, 210, 0.8); |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
.progress-inner { |
||||
|
height: 100%; |
||||
|
border-radius: 999rpx; |
||||
|
background: linear-gradient(90deg, #a6ffea 0%, #e3ff96 100%); |
||||
|
} |
||||
|
|
||||
|
.store-scene .progress-inner { |
||||
|
background: linear-gradient(90deg, #ff7444 0%, #ffd16e 100%); |
||||
|
} |
||||
|
|
||||
|
.progress-copy { |
||||
|
margin-top: 10rpx; |
||||
|
color: rgba(0, 35, 28, 0.52); |
||||
|
font-size: 21rpx; |
||||
|
font-weight: 800; |
||||
|
} |
||||
|
|
||||
|
.store-scene .progress-copy { |
||||
|
color: #8f715b; |
||||
|
} |
||||
|
|
||||
|
.card-bottom { |
||||
|
height: 58rpx; |
||||
|
margin-top: 16rpx; |
||||
|
padding-top: 12rpx; |
||||
|
border-top: 1rpx solid rgba(20, 90, 70, 0.08); |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.time-copy { |
||||
|
flex: 1; |
||||
|
color: rgba(0, 35, 28, 0.58); |
||||
|
font-size: 22rpx; |
||||
|
font-weight: 800; |
||||
|
} |
||||
|
|
||||
|
.store-scene .time-copy { |
||||
|
color: #8f715b; |
||||
|
} |
||||
|
|
||||
|
.join-btn { |
||||
|
width: 160rpx; |
||||
|
height: 50rpx; |
||||
|
border-radius: 999rpx; |
||||
|
background: linear-gradient(90deg, rgba(227, 255, 150, 1), rgba(166, 255, 234, 1)); |
||||
|
color: #08735d; |
||||
|
font-size: 24rpx; |
||||
|
font-weight: 900; |
||||
|
line-height: 50rpx; |
||||
|
text-align: center; |
||||
|
box-shadow: 0 12rpx 24rpx rgba(13, 114, 82, 0.16); |
||||
|
} |
||||
|
|
||||
|
.store-scene .join-btn { |
||||
|
background: linear-gradient(135deg, #ff7444 0%, #ff9f38 100%); |
||||
|
color: #fff; |
||||
|
box-shadow: 0 12rpx 24rpx rgba(255, 126, 39, 0.24); |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue