提交
This commit is contained in:
zpc
parent
0e90d64fec
commit
2a7af5e872
|
|
@ -4,10 +4,10 @@
|
|||
<uni-icons type="left" color="#000000"></uni-icons>
|
||||
</view>
|
||||
<view class="title1">福利屋</view>
|
||||
<view class="" style="height: 232rpx;"></view>
|
||||
<view class="header-space"></view>
|
||||
<banner :type-id="8" :height="328"></banner>
|
||||
|
||||
<view class="center" style="width: 100%; margin-top: 30rpx;">
|
||||
<view class="tab-container">
|
||||
<view class="tab">
|
||||
<view class="tab-item1 center" @click="$refs.rulePop.getRule(20, '规则说明')">
|
||||
<text>规则说明</text>
|
||||
|
|
@ -21,108 +21,79 @@
|
|||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 内容列表区域 -->
|
||||
<view class="benefits-container">
|
||||
<scroll-view scroll-y="true" class="benefits-scroll">
|
||||
<!-- 进行中列表 -->
|
||||
<template v-if="tabCur == 1">
|
||||
<view v-for="(item, index) in ongoingData" :key="index" class="benefit-item relative"
|
||||
@click="$c.to({ url: '/pages/infinite/bonus_house_details?goods_id=' + item.id })">
|
||||
<text class="benefit-title">{{ item.title }}</text>
|
||||
<text class="benefit-tips">{{ item.tips }}</text>
|
||||
|
||||
<!-- 进行中 -->
|
||||
<view v-if="tabCur == 1" class=""
|
||||
style="width: 672rpx; height: 760rpx; margin: 40rpx auto 0; overflow: hidden;">
|
||||
<scroll-view scroll-y="true" style=" height: 760rpx;">
|
||||
<view class="relative" v-for="(item, index) in benefitsData"
|
||||
@click="$c.to({ url: '/pages/infinite/bonus_house_details' })"
|
||||
style="width: 100%; height: 274rpx; background-color: #F8F8F8; margin-bottom: 36rpx; border-radius: 16rpx;">
|
||||
|
||||
<text style="position: absolute; left: 24rpx; top: 28rpx; color: #333333;font-size: 24rpx;">{{
|
||||
item.title }}</text>
|
||||
<text style="position: absolute; left: 24rpx; top: 62rpx; color: #FF862D; font-size: 18rpx;">{{
|
||||
item.tips }}</text>
|
||||
|
||||
<view class="center"
|
||||
style="width: 128rpx; height: 60rpx; background-color: #D8FD24; border-radius: 16rpx; position: absolute; top: 20rpx; right: 24rpx;">
|
||||
<text style="font-size: 20rpx; color: #333333; font-weight: 600;">马上参与</text>
|
||||
</view>
|
||||
|
||||
<scroll-view scroll-x="true"
|
||||
style="height: 80rpx; white-space: nowrap; position: absolute; left: 24rpx; top: 112rpx;">
|
||||
<view v-for="(item1, index) in item.GoodsList" class="relative" :key="index1"
|
||||
style="width: 80rpx; height: 80rpx; display: inline-block; margin-right: 36rpx;">
|
||||
|
||||
<image src="https://mh.shhuanmeng.com/static/web/static/checkin/gem.png"
|
||||
style="width: 100%; height: 100%; position: absolute;"></image>
|
||||
<!-- src="https://mh.shhuanmeng.com/static/web/static/checkin/gem.png":src="$img1('checkin/Fire.png')" -->
|
||||
<view class="center"
|
||||
style="width: 44rpx; height: 20rpx; background-color: rgba(172, 172, 172, 0.60); position: absolute; border-radius: 10rpx; bottom: 4rpx; left: 50%; transform: translateX(-50%);">
|
||||
<text style="font-size: 18rpx; color: #fff;">x{{ item1.num }}</text>
|
||||
</view>
|
||||
<view class="action-btn center">
|
||||
<text>马上参与</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class=""
|
||||
style="width: 624rpx; height: 2.01rpx; background-color: #F3F3F3; position: absolute; left: 24rpx; bottom: 54rpx;">
|
||||
<scroll-view scroll-x="true" class="goods-scroll">
|
||||
<view v-for="(item1, index1) in item.GoodsList" :key="index1" class="goods-item relative">
|
||||
<image class="goods-img" :src="item1.imgUrl">
|
||||
</image>
|
||||
<view class="goods-num center">
|
||||
<text>x{{ item1.num }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="divider"></view>
|
||||
<view class="popularity center">
|
||||
<image class="fire-icon" :src="$img1('checkin/Fire.png')"></image>
|
||||
<text class="popularity-text">{{ item.Popularity }}</text>
|
||||
</view>
|
||||
|
||||
<text class="time-text">{{ item.Time }}</text>
|
||||
</view>
|
||||
<view class="center" style="position: absolute; left: 24rpx; bottom: 16rpx;">
|
||||
<image style="width: 18rpx; height: 20rpx;" :src="$img1('checkin/Fire.png')" mode=""></image>
|
||||
<text style="font-size: 16rpx; color: #999999; margin-left: 8rpx;">{{ item.Popularity }}</text>
|
||||
</template>
|
||||
|
||||
<!-- 已结束列表 -->
|
||||
<template v-else>
|
||||
<view v-for="(item, index) in endedData" :key="index" class="benefit-item relative"
|
||||
@click="$c.to({ url: '/pages/infinite/bonus_house_details' })">
|
||||
<text class="benefit-title">{{ item.title }}</text>
|
||||
<text class="benefit-tips">{{ item.tips }}</text>
|
||||
|
||||
<view class="action-btn center ended">
|
||||
<text>已结束</text>
|
||||
</view>
|
||||
<scroll-view scroll-x="true" class="goods-scroll">
|
||||
<view v-for="(item1, index1) in item.GoodsList" :key="index1" class="goods-item relative">
|
||||
<image class="goods-img" :src="item1.imgUrl">
|
||||
</image>
|
||||
<view class="goods-num center">
|
||||
<text>x{{ item1.num }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="divider"></view>
|
||||
<view class="popularity center">
|
||||
<image class="fire-icon" :src="$img1('checkin/Fire.png')"></image>
|
||||
<text class="popularity-text">{{ item.Popularity }}</text>
|
||||
</view>
|
||||
|
||||
<text class="time-text">{{ item.Time }}</text>
|
||||
</view>
|
||||
<text style="font-size: 16rpx; color: #999999; position: absolute; right: 24rpx; bottom: 18rpx;">{{
|
||||
item.Time }}</text>
|
||||
</view>
|
||||
</template>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<!-- 已结束 -->
|
||||
<view v-else class="" style="width: 672rpx; height: 760rpx; margin: 40rpx auto 0; overflow: hidden;">
|
||||
<scroll-view scroll-y="true" style=" height: 760rpx;">
|
||||
<view class="relative" v-for="(item, index) in benefitsData"
|
||||
style="width: 100%; height: 274rpx; background-color: #F8F8F8; margin-bottom: 36rpx; border-radius: 16rpx;">
|
||||
|
||||
<text style="position: absolute; left: 24rpx; top: 28rpx; color: #333333;font-size: 24rpx;">{{
|
||||
item.title }}</text>
|
||||
<text style="position: absolute; left: 24rpx; top: 62rpx; color: #FF862D; font-size: 18rpx;">{{
|
||||
item.tips }}</text>
|
||||
|
||||
<view class="center"
|
||||
style="width: 128rpx; height: 60rpx; background-color: #333333; border-radius: 16rpx; position: absolute; top: 20rpx; right: 24rpx;">
|
||||
<text style="font-size: 20rpx; color: #D8FD24; font-weight: 600;">已结束</text>
|
||||
</view>
|
||||
|
||||
<scroll-view scroll-x="true"
|
||||
style="height: 80rpx; white-space: nowrap; position: absolute; left: 24rpx; top: 112rpx;">
|
||||
<view v-for="(item1, index1) in item.GoodsList" class="relative" :key="index1"
|
||||
style="width: 80rpx; height: 80rpx; display: inline-block; margin-right: 36rpx;">
|
||||
|
||||
<image src="https://mh.shhuanmeng.com/static/web/static/checkin/gem.png"
|
||||
style="width: 100%; height: 100%; position: absolute;"></image>
|
||||
<!-- src="https://mh.shhuanmeng.com/static/web/static/checkin/gem.png":src="$img1('checkin/Fire.png')" -->
|
||||
<view class="center"
|
||||
style="width: 44rpx; height: 20rpx; background-color: rgba(172, 172, 172, 0.60); position: absolute; border-radius: 10rpx; bottom: 4rpx; left: 50%; transform: translateX(-50%);">
|
||||
<text style="font-size: 18rpx; color: #fff;">x{{ item1.num }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class=""
|
||||
style="width: 624rpx; height: 2.01rpx; background-color: #F3F3F3; position: absolute; left: 24rpx; bottom: 54rpx;">
|
||||
</view>
|
||||
<view class="center" style="position: absolute; left: 24rpx; bottom: 16rpx;">
|
||||
<image style="width: 18rpx; height: 20rpx;" :src="$img1('checkin/Fire.png')" mode=""></image>
|
||||
<text style="font-size: 16rpx; color: #999999; margin-left: 8rpx;">{{ item.Popularity }}</text>
|
||||
</view>
|
||||
<text style="font-size: 16rpx; color: #999999; position: absolute; right: 24rpx; bottom: 18rpx;">{{
|
||||
item.Time }}</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="row center" style="margin-top: 20rpx;">
|
||||
<view class="center" style="width: 220rpx; height: 72rpx; background-color: #333333; border-radius: 16rpx;">
|
||||
<text style="font-size: 24rpx; color: #D8FD24;">我的卡券</text>
|
||||
<view class="btn-group row center">
|
||||
<view class="my-coupon center" @click="$c.to({ url: '/pages/infinite/my_coupons' })">
|
||||
<text>我的卡券</text>
|
||||
</view>
|
||||
<view class="center"
|
||||
style="width: 220rpx; height: 72rpx; background-color: #D8FD24; border-radius: 16rpx; margin-left: 38rpx;">
|
||||
<text style="font-size: 24rpx; color: #333333;">赏品记录</text>
|
||||
<view class="reward-record center" @click="$c.to({ url: '/pages/infinite/reward_records' })">
|
||||
<text>赏品记录</text>
|
||||
</view>
|
||||
</view>
|
||||
<rule-pop ref="rulePop"></rule-pop>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -130,95 +101,107 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
tabCur: 1,
|
||||
benefitsData: [{
|
||||
title: "新人消费满5元福利屋",
|
||||
tips: "消费返利（所有参与者有机会获得奖励",
|
||||
isOngoing: true, //是否进行中
|
||||
Popularity: 52, //热度
|
||||
Time: "2025-03-10 14:00—2025-03-10 14:00",
|
||||
GoodsList: [
|
||||
{
|
||||
imgUrl: "", //赏品图
|
||||
num: 1, //数量
|
||||
}],
|
||||
}, {
|
||||
title: "新人消费满10元福利屋",
|
||||
tips: "消费返利（所有参与者有机会获得奖励",
|
||||
isOngoing: true, //是否进行中
|
||||
Popularity: 52, //热度
|
||||
Time: "2025-03-10 14:00—2025-03-10 14:00",
|
||||
GoodsList: [{
|
||||
imgUrl: "", //赏品图
|
||||
num: 1, //数量
|
||||
}, {
|
||||
imgUrl: "",
|
||||
num: 1,
|
||||
},]
|
||||
}, {
|
||||
title: "新人消费满15元福利屋",
|
||||
tips: "消费返利（所有参与者有机会获得奖励",
|
||||
isOngoing: true, //是否进行中
|
||||
Popularity: 52, //热度
|
||||
Time: "2025-03-10 14:00—2025-03-10 14:00",
|
||||
GoodsList: [{
|
||||
imgUrl: "", //赏品图
|
||||
num: 1, //数量
|
||||
}, {
|
||||
imgUrl: "",
|
||||
num: 1,
|
||||
},]
|
||||
},],
|
||||
ongoingData: [], // 进行中数据
|
||||
endedData: [], // 已结束数据
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
|
||||
async onLoad() {
|
||||
await this.load();
|
||||
this.loadOngoingData();
|
||||
},
|
||||
|
||||
methods: {
|
||||
async load() {
|
||||
let res = await this.req({
|
||||
url: "goods_fuliwu",
|
||||
})
|
||||
console.log(res)
|
||||
this.benefitsData.splice(0, this.benefitsData.length)
|
||||
res.data.data.forEach(item => {
|
||||
console.log(item);
|
||||
let b = [];
|
||||
item.goodslist.forEach(item1 => {
|
||||
console.log(item1);
|
||||
for (let i = 0; i < item1.stock; i++) {
|
||||
b.push({
|
||||
imgUrl: item1.imgurl,
|
||||
num: 1//item1.price,
|
||||
})
|
||||
// 加载进行中的福利屋数据
|
||||
async loadOngoingData() {
|
||||
if (this.loading) return;
|
||||
this.loading = true;
|
||||
|
||||
try {
|
||||
const res = await this.req({
|
||||
url: "goods_fuliwu", // 进行中接口
|
||||
data: {
|
||||
type: 1
|
||||
}
|
||||
})
|
||||
// 如果当前时间在item.flw_start_time和item.flw_end_time之间，则isOngoing为true，否则为false
|
||||
let isOngoing = new Date() > new Date(item.flw_start_time) && new Date() < new Date(item.flw_end_time)
|
||||
let t =
|
||||
{
|
||||
});
|
||||
|
||||
if (res?.data?.data) {
|
||||
this.ongoingData = this.formatBenefitsData(res.data.data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载进行中福利屋数据失败:', error);
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
// 加载已结束的福利屋数据
|
||||
async loadEndedData() {
|
||||
if (this.loading) return;
|
||||
this.loading = true;
|
||||
|
||||
try {
|
||||
const res = await this.req({
|
||||
url: "goods_fuliwu", // 已结束接口
|
||||
data: {
|
||||
type: 3
|
||||
}
|
||||
});
|
||||
|
||||
if (res?.data?.data) {
|
||||
this.endedData = this.formatBenefitsData(res.data.data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载已结束福利屋数据失败:', error);
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
// 格式化福利屋数据
|
||||
formatBenefitsData(data) {
|
||||
return data.map(item => {
|
||||
const goodsList = [];
|
||||
|
||||
if (item.goodslist && item.goodslist.length) {
|
||||
item.goodslist.forEach(goods => {
|
||||
if (goods.stock > 0) {
|
||||
goodsList.push({
|
||||
imgUrl: goods.imgurl,
|
||||
num: goods.stock//item1.price,
|
||||
})
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
id: item.id,
|
||||
choujiang_xianzhi: item.choujiang_xianzhi,
|
||||
title: item.title,
|
||||
tips: item.goods_describe,
|
||||
isOngoing: isOngoing, //是否进行中
|
||||
Popularity: item.join_count, //热度
|
||||
Time: item.flw_start_time + "—" + item.flw_end_time,
|
||||
GoodsList: b
|
||||
Popularity: item.join_count,
|
||||
Time: `${item.flw_start_time} — ${item.flw_end_time}`,
|
||||
GoodsList: goodsList
|
||||
};
|
||||
this.benefitsData.push(t)
|
||||
})
|
||||
|
||||
});
|
||||
},
|
||||
|
||||
// 切换标签
|
||||
tabChange(i) {
|
||||
this.tabCur = i
|
||||
switch (Number(i)) {
|
||||
case 1:
|
||||
// this.getData()
|
||||
break
|
||||
case 2:
|
||||
// this.getData()
|
||||
// this.subTabChange(this.subTabCur)
|
||||
break
|
||||
if (this.tabCur === i) return; // 避免重复加载
|
||||
this.tabCur = i;
|
||||
|
||||
if (i === 1) {
|
||||
// 切换到进行中，加载进行中数据
|
||||
if (this.ongoingData.length === 0) {
|
||||
this.loadOngoingData();
|
||||
}
|
||||
} else {
|
||||
// 切换到已结束，加载已结束数据
|
||||
if (this.endedData.length === 0) {
|
||||
this.loadEndedData();
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
|
|
@ -233,6 +216,10 @@ export default {
|
|||
background: #FFFFFF;
|
||||
}
|
||||
|
||||
.header-space {
|
||||
height: 232rpx;
|
||||
}
|
||||
|
||||
.navLeft {
|
||||
position: fixed;
|
||||
left: 30rpx;
|
||||
|
|
@ -258,6 +245,11 @@ export default {
|
|||
z-index: 50;
|
||||
}
|
||||
|
||||
.tab-container {
|
||||
width: 100%;
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
|
||||
.tab {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -300,7 +292,6 @@ export default {
|
|||
font-size: 24rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -327,8 +318,166 @@ export default {
|
|||
font-size: 24rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.benefits-container {
|
||||
width: 672rpx;
|
||||
height: 760rpx;
|
||||
margin: 40rpx auto 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.benefits-scroll {
|
||||
height: 760rpx;
|
||||
}
|
||||
|
||||
.benefit-item {
|
||||
width: 100%;
|
||||
height: 274rpx;
|
||||
background-color: #F8F8F8;
|
||||
margin-bottom: 36rpx;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.benefit-title {
|
||||
position: absolute;
|
||||
left: 24rpx;
|
||||
top: 28rpx;
|
||||
color: #333333;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.benefit-tips {
|
||||
position: absolute;
|
||||
left: 24rpx;
|
||||
top: 62rpx;
|
||||
color: #FF862D;
|
||||
font-size: 18rpx;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
width: 128rpx;
|
||||
height: 60rpx;
|
||||
background-color: #D8FD24;
|
||||
border-radius: 16rpx;
|
||||
position: absolute;
|
||||
top: 20rpx;
|
||||
right: 24rpx;
|
||||
|
||||
&.ended {
|
||||
background-color: #333333;
|
||||
|
||||
text {
|
||||
color: #D8FD24;
|
||||
}
|
||||
}
|
||||
|
||||
text {
|
||||
font-size: 20rpx;
|
||||
color: #333333;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.goods-scroll {
|
||||
height: 80rpx;
|
||||
white-space: nowrap;
|
||||
position: absolute;
|
||||
left: 24rpx;
|
||||
top: 112rpx;
|
||||
}
|
||||
|
||||
.goods-item {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
display: inline-block;
|
||||
margin-right: 36rpx;
|
||||
}
|
||||
|
||||
.goods-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.goods-num {
|
||||
width: 44rpx;
|
||||
height: 20rpx;
|
||||
background-color: rgba(172, 172, 172, 0.60);
|
||||
position: absolute;
|
||||
border-radius: 10rpx;
|
||||
bottom: 4rpx;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
|
||||
text {
|
||||
font-size: 18rpx;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.divider {
|
||||
width: 624rpx;
|
||||
height: 2rpx;
|
||||
background-color: #F3F3F3;
|
||||
position: absolute;
|
||||
left: 24rpx;
|
||||
bottom: 54rpx;
|
||||
}
|
||||
|
||||
.popularity {
|
||||
position: absolute;
|
||||
left: 24rpx;
|
||||
bottom: 16rpx;
|
||||
}
|
||||
|
||||
.fire-icon {
|
||||
width: 18rpx;
|
||||
height: 20rpx;
|
||||
}
|
||||
|
||||
.popularity-text {
|
||||
font-size: 16rpx;
|
||||
color: #999999;
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
|
||||
.time-text {
|
||||
font-size: 16rpx;
|
||||
color: #999999;
|
||||
position: absolute;
|
||||
right: 24rpx;
|
||||
bottom: 18rpx;
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.my-coupon {
|
||||
width: 220rpx;
|
||||
height: 72rpx;
|
||||
background-color: #333333;
|
||||
border-radius: 16rpx;
|
||||
|
||||
text {
|
||||
font-size: 24rpx;
|
||||
color: #D8FD24;
|
||||
}
|
||||
}
|
||||
|
||||
.reward-record {
|
||||
width: 220rpx;
|
||||
height: 72rpx;
|
||||
background-color: #D8FD24;
|
||||
border-radius: 16rpx;
|
||||
margin-left: 38rpx;
|
||||
|
||||
text {
|
||||
font-size: 24rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<view class="content">
|
||||
<view class="navLeft align-center" :style="{top:$sys().statusBarHeight+'px'}" @tap="$c.back(1)">
|
||||
<view class="navLeft align-center" :style="{ top: $sys().statusBarHeight + 'px' }" @tap="$c.back(1)">
|
||||
<uni-icons type="left" color="#000000"></uni-icons>
|
||||
<!-- <view class="">{{$c.detailPageTitle((pageData && pageData.goods) || '')}}</view> -->
|
||||
</view>
|
||||
|
|
@ -18,19 +18,18 @@
|
|||
<image style="width: 108rpx; height: 108rpx;position: absolute; left: 24rpx; top: 22rpx;"
|
||||
:src="$img1('checkin/logo2.png')"></image>
|
||||
|
||||
<text
|
||||
style="font-size: 24rpx; color: #333333; position: absolute; left: 146rpx; top: 34rpx;">{{bonusDetailsData.Title}}</text>
|
||||
<text style="font-size: 24rpx; color: #333333; position: absolute; left: 146rpx; top: 34rpx;">{{
|
||||
bonusData.title }}</text>
|
||||
|
||||
<text
|
||||
style="font-size: 18rpx; color: #FF862D; position: absolute; left: 146rpx; top: 68rpx;">{{bonusDetailsData.Tips}}</text>
|
||||
<text style="font-size: 18rpx; color: #FF862D; position: absolute; left: 146rpx; top: 68rpx;">{{
|
||||
bonusData.tips }}</text>
|
||||
|
||||
<text
|
||||
style="font-size: 16rpx; color: #999999; position: absolute; left: 146rpx; top: 102rpx;">{{bonusDetailsData.Time}}</text>
|
||||
<text style="font-size: 16rpx; color: #999999; position: absolute; left: 146rpx; top: 102rpx;">{{
|
||||
bonusData.time }}</text>
|
||||
|
||||
<view class="row center" style="position: absolute; left: 470rpx; top: 68rpx;">
|
||||
<image style="width: 18rpx; height: 20rpx;" :src="$img1('checkin/Fire.png')" mode=""></image>
|
||||
<text
|
||||
style="font-size: 16rpx; color: #999999; margin-left: 8rpx;">{{bonusDetailsData.Popularity}}</text>
|
||||
<text style="font-size: 16rpx; color: #999999; margin-left: 8rpx;">{{ bonusData.popularity }}</text>
|
||||
</view>
|
||||
|
||||
<image style="width: 50rpx; height: 50rpx; position: absolute; top: 50rpx; right: 24rpx;"
|
||||
|
|
@ -43,25 +42,22 @@
|
|||
|
||||
<view class="tab">
|
||||
<view class="tab-item center relative" v-for="(item, i) in tabList" :key="i"
|
||||
:class="tabCur == i?'act':'unact'" @click="tabChange(i)">
|
||||
<text>{{item}}</text>
|
||||
:class="currentTab == i ? 'act' : 'unact'" @click="handleTabChange(i)">
|
||||
<text>{{ item }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 赏品预览 -->
|
||||
<scroll-view v-if="tabCur==0" scroll-y="true" class="" style="width: 100%; height: 900rpx;">
|
||||
<scroll-view v-if="currentTab == 0" scroll-y="true" class="" style="width: 100%; height: 900rpx;">
|
||||
<view style="height: 60rpx;"></view>
|
||||
<view class="" style="width: 544rpx; height: 500rpx; background-color: #999999; margin: 0 auto 0;">
|
||||
</view>
|
||||
|
||||
<view class="grid-container">
|
||||
<view class="grid-item column align-center" v-for="(item,index) in bonusDetailsData.GoodsList"
|
||||
<view class="grid-item column align-center" v-for="(item, index) in goodsList" :key="index"
|
||||
style="">
|
||||
|
||||
<image style="width: 112rpx; height: 112rpx;background-color: #D8D8D8; border-radius: 16rpx;"
|
||||
:src="$img1('checkin/gem2.png')" mode=""></image>
|
||||
|
||||
<text style="color: #999999; font-size: 16rpx; margin-top: 16rpx;">{{item.Price}}</text>
|
||||
<image style="width: 112rpx; height: 112rpx;border-radius:25rpx;" :src="item.imgUrl"></image>
|
||||
<text style="color: #999999; font-size: 16rpx; margin-top: 16rpx;">{{ item.title }}</text>
|
||||
|
||||
</view>
|
||||
|
||||
|
|
@ -69,63 +65,48 @@
|
|||
</scroll-view>
|
||||
|
||||
|
||||
<scroll-view v-if="tabCur==1" scroll-y="true" style="width: 100%; height: 890rpx; padding: 24rpx;">
|
||||
<view class="row align-center" v-for="(item,index) in bonusDetailsData.PlayerList" :key="index"
|
||||
<scroll-view v-if="currentTab == 1" scroll-y="true" style="width: 100%; height: 890rpx; padding: 24rpx;">
|
||||
<view class="row align-center" v-for="(item, index) in participantList" :key="index"
|
||||
style="height: 76rpx; margin-bottom: 24rpx;">
|
||||
|
||||
<view class="center" style="width: 30rpx;">
|
||||
<text style="color: #999999; font-size: 20rpx;">{{index+1}}</text>
|
||||
<text style="color: #999999; font-size: 20rpx;">{{ index + 1 }}</text>
|
||||
</view>
|
||||
|
||||
|
||||
<image :src="item.Avatar"
|
||||
<image :src="item.avatar"
|
||||
style="width: 76rpx; height: 76rpx; background-color: #D8D8D8; border-radius: 50%; margin-left: 24rpx;"
|
||||
mode=""></image>
|
||||
|
||||
<view class="column" style="margin-left: 16rpx;">
|
||||
<text style="color: #333333; font-size: 20rpx;">{{item.name}}</text>
|
||||
<text style="color: #999999; font-size: 16rpx; margin-top: 12rpx;">{{item.time}}</text>
|
||||
<text style="color: #333333; font-size: 20rpx;">{{ item.name }}</text>
|
||||
<text style="color: #999999; font-size: 16rpx; margin-top: 12rpx;">{{ item.time }}</text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<scroll-view v-if="tabCur==2" scroll-y="true" style="width: 100%; height: 890rpx; padding: 24rpx;">
|
||||
<view class="row align-center relative" v-for="(item,index) in bonusDetailsData.PlayerList" :key="index"
|
||||
<scroll-view v-if="currentTab == 2" scroll-y="true" style="width: 100%; height: 890rpx; padding: 24rpx;">
|
||||
<view class="row align-center relative" v-for="(item, index) in awardRecordList" :key="index"
|
||||
style="height: 76rpx; margin-bottom: 24rpx;">
|
||||
|
||||
<view class="center" style="width: 30rpx;">
|
||||
<text style="color: #999999; font-size: 20rpx;">{{index+1}}</text>
|
||||
<text style="color: #999999; font-size: 20rpx;">{{ index + 1 }}</text>
|
||||
</view>
|
||||
|
||||
|
||||
<image :src="item.Avatar"
|
||||
<image :src="item.avatar"
|
||||
style="width: 76rpx; height: 76rpx; background-color: #D8D8D8; border-radius: 50%; margin-left: 24rpx;"
|
||||
mode=""></image>
|
||||
|
||||
<view class="column" style="margin-left: 16rpx;">
|
||||
<text style="color: #333333; font-size: 20rpx;">{{item.name}}</text>
|
||||
<text style="color: #999999; font-size: 16rpx; margin-top: 12rpx;">{{item.time}}</text>
|
||||
<text style="color: #333333; font-size: 20rpx;">{{ item.name }}</text>
|
||||
<text style="color: #999999; font-size: 16rpx; margin-top: 12rpx;">{{ item.time }}</text>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="row center" style="position: absolute; right: 56rpx;">
|
||||
<image v-if="index==0" :src="$img1('checkin/Jackpot.png')" style="width: 46rpx; height: 26rpx;"
|
||||
mode=""></image>
|
||||
<image v-if="index == 0" :src="$img1('checkin/Jackpot.png')"
|
||||
style="width: 46rpx; height: 26rpx;" mode=""></image>
|
||||
<text style="color: #999999; font-size: 20rpx; margin-left: 16rpx;">晶体*1500</text>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
<view class="column align-center"
|
||||
style="width: 100%; height: 198rpx; background-color: #fff; margin-top: 8rpx;">
|
||||
|
||||
|
|
@ -133,213 +114,405 @@
|
|||
style="width: 340rpx; height: 84rpx; background-color: #D8FD24; border-radius: 16rpx; margin-top: 32rpx;">
|
||||
<text style="color: #333333; font-size: 32rpx; font-weight: 600;">马上参与</text>
|
||||
</view>
|
||||
<text
|
||||
style="color: #8A8A8A; font-size: 20rpx; font-weight: 400; margin-top: 12rpx;">距离开奖时间：0天06：29：19</text>
|
||||
<text style="color: #8A8A8A; font-size: 20rpx; font-weight: 400; margin-top: 12rpx;">距离开奖时间：{{ remainingTime
|
||||
}}</text>
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tabCur: 0,
|
||||
bonusDetailsData: {
|
||||
Title: "新人消费满5元福利屋",
|
||||
Tips: "消费返利（所有参与者有机会获得奖励",
|
||||
Time: "2025-03-10 14:00",
|
||||
Popularity: 52, //热度
|
||||
GoodsList: [{
|
||||
imgUrl: "",
|
||||
Price: "1000钻石",
|
||||
}, {
|
||||
imgUrl: "",
|
||||
Price: "1000钻石",
|
||||
}, {
|
||||
imgUrl: "",
|
||||
Price: "1000钻石",
|
||||
}, {
|
||||
imgUrl: "",
|
||||
Price: "1000钻石",
|
||||
}, {
|
||||
imgUrl: "",
|
||||
Price: "1000钻石",
|
||||
}, {
|
||||
imgUrl: "",
|
||||
Price: "1000钻石",
|
||||
}, {
|
||||
imgUrl: "",
|
||||
Price: "1000钻石",
|
||||
}, {
|
||||
imgUrl: "",
|
||||
Price: "1000钻石",
|
||||
}, {
|
||||
imgUrl: "",
|
||||
Price: "1000钻石",
|
||||
}, ],
|
||||
PlayerList: [{
|
||||
Avatar: "", //头像
|
||||
name: "微信名",
|
||||
time: "2025-03-10 14:00"
|
||||
}, {
|
||||
Avatar: "",
|
||||
name: "微信名",
|
||||
time: "2025-03-10 14:00"
|
||||
}, {
|
||||
Avatar: "",
|
||||
name: "微信名",
|
||||
time: "2025-03-10 14:00"
|
||||
}, {
|
||||
Avatar: "",
|
||||
name: "微信名",
|
||||
time: "2025-03-10 14:00"
|
||||
}, {
|
||||
Avatar: "",
|
||||
name: "微信名",
|
||||
time: "2025-03-10 14:00"
|
||||
}, {
|
||||
Avatar: "",
|
||||
name: "微信名",
|
||||
time: "2025-03-10 14:00"
|
||||
}, {
|
||||
Avatar: "",
|
||||
name: "微信名",
|
||||
time: "2025-03-10 14:00"
|
||||
}, {
|
||||
Avatar: "",
|
||||
name: "微信名",
|
||||
time: "2025-03-10 14:00"
|
||||
}, {
|
||||
Avatar: "",
|
||||
name: "微信名",
|
||||
time: "2025-03-10 14:00"
|
||||
}, {
|
||||
Avatar: "",
|
||||
name: "微信名",
|
||||
time: "2025-03-10 14:00"
|
||||
}, {
|
||||
Avatar: "",
|
||||
name: "微信名",
|
||||
time: "2025-03-10 14:00"
|
||||
}, ]
|
||||
},
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
currentTab: 0,
|
||||
bonusData: {
|
||||
title: "新人消费满5元福利屋",
|
||||
tips: "消费返利（所有参与者有机会获得奖励",
|
||||
time: "2025-03-10 14:00",
|
||||
popularity: 52, // 热度
|
||||
},
|
||||
goodsList: [],
|
||||
participantList: [{
|
||||
avatar: "", // 头像
|
||||
name: "微信名",
|
||||
time: "2025-03-10 14:00"
|
||||
}, {
|
||||
avatar: "",
|
||||
name: "微信名",
|
||||
time: "2025-03-10 14:00"
|
||||
}, {
|
||||
avatar: "",
|
||||
name: "微信名",
|
||||
time: "2025-03-10 14:00"
|
||||
}, {
|
||||
avatar: "",
|
||||
name: "微信名",
|
||||
time: "2025-03-10 14:00"
|
||||
}, {
|
||||
avatar: "",
|
||||
name: "微信名",
|
||||
time: "2025-03-10 14:00"
|
||||
}, {
|
||||
avatar: "",
|
||||
name: "微信名",
|
||||
time: "2025-03-10 14:00"
|
||||
}, {
|
||||
avatar: "",
|
||||
name: "微信名",
|
||||
time: "2025-03-10 14:00"
|
||||
}, {
|
||||
avatar: "",
|
||||
name: "微信名",
|
||||
time: "2025-03-10 14:00"
|
||||
}, {
|
||||
avatar: "",
|
||||
name: "微信名",
|
||||
time: "2025-03-10 14:00"
|
||||
}, {
|
||||
avatar: "",
|
||||
name: "微信名",
|
||||
time: "2025-03-10 14:00"
|
||||
}, {
|
||||
avatar: "",
|
||||
name: "微信名",
|
||||
time: "2025-03-10 14:00"
|
||||
}],
|
||||
awardRecordList: [{
|
||||
avatar: "", // 头像
|
||||
name: "微信名",
|
||||
time: "2025-03-10 14:00"
|
||||
}, {
|
||||
avatar: "",
|
||||
name: "微信名",
|
||||
time: "2025-03-10 14:00"
|
||||
}, {
|
||||
avatar: "",
|
||||
name: "微信名",
|
||||
time: "2025-03-10 14:00"
|
||||
}, {
|
||||
avatar: "",
|
||||
name: "微信名",
|
||||
time: "2025-03-10 14:00"
|
||||
}, {
|
||||
avatar: "",
|
||||
name: "微信名",
|
||||
time: "2025-03-10 14:00"
|
||||
}, {
|
||||
avatar: "",
|
||||
name: "微信名",
|
||||
time: "2025-03-10 14:00"
|
||||
}, {
|
||||
avatar: "",
|
||||
name: "微信名",
|
||||
time: "2025-03-10 14:00"
|
||||
}, {
|
||||
avatar: "",
|
||||
name: "微信名",
|
||||
time: "2025-03-10 14:00"
|
||||
}, {
|
||||
avatar: "",
|
||||
name: "微信名",
|
||||
time: "2025-03-10 14:00"
|
||||
}, {
|
||||
avatar: "",
|
||||
name: "微信名",
|
||||
time: "2025-03-10 14:00"
|
||||
}, {
|
||||
avatar: "",
|
||||
name: "微信名",
|
||||
time: "2025-03-10 14:00"
|
||||
}],
|
||||
tabList: [
|
||||
"赏品预览", "参与人数", "赏品记录"
|
||||
],
|
||||
remainingTime: "0天00:00:00",
|
||||
countdownTimer: null,
|
||||
endTime: null,
|
||||
currentServerTime: null
|
||||
}
|
||||
},
|
||||
async onLoad(options) {
|
||||
console.log(options)
|
||||
await this.load(options.goods_id)
|
||||
},
|
||||
methods: {
|
||||
async load(goods_id) {
|
||||
const res = await this.req({
|
||||
url: "goods_fuliwu_detail",
|
||||
data: {
|
||||
goods_id: goods_id
|
||||
}
|
||||
})
|
||||
console.log(res)
|
||||
|
||||
tabList: [
|
||||
"赏品预览", "参与人数", "赏品记录"
|
||||
]
|
||||
if (res.status === 1 && res.data) {
|
||||
const { goods, goodslist, join_count, current_time, status, status_text } = res.data;
|
||||
|
||||
// 更新福利屋基本信息
|
||||
this.bonusData = {
|
||||
title: goods.title,
|
||||
tips: goods.goods_describe,
|
||||
time: goods.open_time,
|
||||
popularity: join_count || 0
|
||||
};
|
||||
|
||||
let index = 0;
|
||||
this.goodsList.splice(0, this.goodsList.length)
|
||||
// 更新赏品列表
|
||||
goodslist.forEach(item => {
|
||||
for (let i = 0; i < item.stock; i++) {
|
||||
this.goodsList.push({
|
||||
index,
|
||||
imgUrl: item.imgurl,
|
||||
title: item.title,
|
||||
id: item.id,
|
||||
stock: item.stock,
|
||||
realPrice: item.price,
|
||||
sortIndex: item.sort,
|
||||
type: item.shang_title,
|
||||
typeColor: item.shang_color
|
||||
});
|
||||
index++;
|
||||
}
|
||||
})
|
||||
// this.goodsList = goodslist.map(item => ({
|
||||
// imgUrl: item.imgurl,
|
||||
// price: item.title,
|
||||
// id: item.id,
|
||||
// stock: item.stock,
|
||||
// realPrice: item.price,
|
||||
// sortIndex: item.sort,
|
||||
// type: item.shang_title,
|
||||
// typeColor: item.shang_color
|
||||
// }));
|
||||
|
||||
// 计算倒计时
|
||||
this.calculateRemainingTime(goods.open_time, current_time);
|
||||
this.startCountdownTimer(goods.open_time, current_time);
|
||||
|
||||
// 其他状态信息
|
||||
this.activityStatus = status;
|
||||
this.activityStatusText = status_text;
|
||||
|
||||
// 获取参与人数和赏品记录列表
|
||||
if (join_count > 0) {
|
||||
await this.loadParticipants(goods_id);
|
||||
await this.loadAwardRecords(goods_id);
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
tabChange(i) {
|
||||
this.tabCur = i
|
||||
calculateRemainingTime(openTime, currentTime) {
|
||||
// 将时间字符串转为时间对象
|
||||
const endDate = new Date(openTime.replace(/-/g, '/'));
|
||||
const currentDate = new Date(currentTime.replace(/-/g, '/'));
|
||||
|
||||
switch (i) {
|
||||
case 0:
|
||||
this.subTabChange(this.subTabCur)
|
||||
break
|
||||
default:
|
||||
this.listData = []
|
||||
// 保存结束时间和当前服务器时间，用于实时倒计时
|
||||
this.endTime = endDate;
|
||||
this.currentServerTime = currentDate;
|
||||
|
||||
this.mescroll.resetUpScroll()
|
||||
this.mescroll.scrollTo(0, 0)
|
||||
break
|
||||
// 计算时间差
|
||||
let diffTime = endDate.getTime() - currentDate.getTime();
|
||||
if (diffTime <= 0) {
|
||||
this.remainingTime = "0天00:00:00";
|
||||
return;
|
||||
}
|
||||
|
||||
// 转换为天、时、分、秒
|
||||
const days = Math.floor(diffTime / (24 * 60 * 60 * 1000));
|
||||
diffTime = diffTime % (24 * 60 * 60 * 1000);
|
||||
const hours = Math.floor(diffTime / (60 * 60 * 1000));
|
||||
diffTime = diffTime % (60 * 60 * 1000);
|
||||
const minutes = Math.floor(diffTime / (60 * 1000));
|
||||
diffTime = diffTime % (60 * 1000);
|
||||
const seconds = Math.floor(diffTime / 1000);
|
||||
|
||||
// 格式化时间
|
||||
this.remainingTime = `${days}天${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
|
||||
},
|
||||
|
||||
startCountdownTimer(openTime, currentTime) {
|
||||
// 清除之前可能存在的计时器
|
||||
if (this.countdownTimer) {
|
||||
clearInterval(this.countdownTimer);
|
||||
}
|
||||
|
||||
// 保存结束时间和当前时间的时间差（毫秒）
|
||||
const endDate = new Date(openTime.replace(/-/g, '/'));
|
||||
const currentDate = new Date(currentTime.replace(/-/g, '/'));
|
||||
const serverClientTimeDiff = currentDate.getTime() - new Date().getTime();
|
||||
|
||||
// 设置每秒更新一次倒计时
|
||||
this.countdownTimer = setInterval(() => {
|
||||
// 获取当前客户端时间并加上与服务器的时间差，以获得准确的服务器当前时间
|
||||
const now = new Date();
|
||||
const serverNow = new Date(now.getTime() + serverClientTimeDiff);
|
||||
|
||||
// 计算与结束时间的差值
|
||||
let diffTime = endDate.getTime() - serverNow.getTime();
|
||||
|
||||
// 倒计时结束
|
||||
if (diffTime <= 0) {
|
||||
clearInterval(this.countdownTimer);
|
||||
this.remainingTime = "0天00:00:00";
|
||||
return;
|
||||
}
|
||||
},
|
||||
|
||||
// 计算天、时、分、秒
|
||||
const days = Math.floor(diffTime / (24 * 60 * 60 * 1000));
|
||||
diffTime = diffTime % (24 * 60 * 60 * 1000);
|
||||
const hours = Math.floor(diffTime / (60 * 60 * 1000));
|
||||
diffTime = diffTime % (60 * 60 * 1000);
|
||||
const minutes = Math.floor(diffTime / (60 * 1000));
|
||||
diffTime = diffTime % (60 * 1000);
|
||||
const seconds = Math.floor(diffTime / 1000);
|
||||
|
||||
// 更新倒计时显示
|
||||
this.remainingTime = `${days}天${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
|
||||
}, 1000);
|
||||
},
|
||||
|
||||
onUnload() {
|
||||
// 组件卸载时清除计时器
|
||||
if (this.countdownTimer) {
|
||||
clearInterval(this.countdownTimer);
|
||||
this.countdownTimer = null;
|
||||
}
|
||||
},
|
||||
|
||||
async loadParticipants(goods_id) {
|
||||
// 这里应该调用获取参与人数列表的接口
|
||||
// 示例代码，实际应替换为真实接口
|
||||
try {
|
||||
const res = await this.req({
|
||||
url: "goods_fuliwu_participants",
|
||||
data: { goods_id }
|
||||
});
|
||||
|
||||
if (res.status === 1 && res.data && res.data.list) {
|
||||
this.participantList = res.data.list.map(item => ({
|
||||
avatar: item.avatar || "",
|
||||
name: item.nickname || "用户",
|
||||
time: item.create_time || ""
|
||||
}));
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("加载参与人数列表失败", error);
|
||||
}
|
||||
},
|
||||
|
||||
async loadAwardRecords(goods_id) {
|
||||
// 这里应该调用获取赏品记录的接口
|
||||
// 示例代码，实际应替换为真实接口
|
||||
try {
|
||||
const res = await this.req({
|
||||
url: "goods_fuliwu_records",
|
||||
data: { goods_id }
|
||||
});
|
||||
|
||||
if (res.status === 1 && res.data && res.data.list) {
|
||||
this.awardRecordList = res.data.list.map(item => ({
|
||||
avatar: item.avatar || "",
|
||||
name: item.nickname || "用户",
|
||||
time: item.win_time || "",
|
||||
award: item.award_name || "晶体*1500"
|
||||
}));
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("加载赏品记录失败", error);
|
||||
}
|
||||
},
|
||||
|
||||
handleTabChange(index) {
|
||||
this.currentTab = index
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.content {
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
box-sizing: border-box;
|
||||
background: #F7F7F7;
|
||||
.content {
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
box-sizing: border-box;
|
||||
background: #F7F7F7;
|
||||
}
|
||||
|
||||
.navLeft {
|
||||
position: fixed;
|
||||
left: 30rpx;
|
||||
height: 44px;
|
||||
z-index: 100;
|
||||
|
||||
>view {
|
||||
font-weight: 400;
|
||||
font-size: 50rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
.navLeft {
|
||||
position: fixed;
|
||||
left: 30rpx;
|
||||
height: 44px;
|
||||
z-index: 100;
|
||||
.title1 {
|
||||
width: 100%;
|
||||
top: 108rpx;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 34rpx;
|
||||
justify-content: center;
|
||||
color: black;
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
>view {
|
||||
.tab {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10rpx 60rpx;
|
||||
|
||||
|
||||
.tab-item {
|
||||
width: 155rpx;
|
||||
height: 68rpx;
|
||||
position: relative;
|
||||
margin-right: 25rpx;
|
||||
|
||||
&.act {
|
||||
font-weight: 400;
|
||||
font-size: 50rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
|
||||
.title1 {
|
||||
width: 100%;
|
||||
top: 108rpx;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 34rpx;
|
||||
justify-content: center;
|
||||
color: black;
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
.tab {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10rpx 60rpx;
|
||||
|
||||
|
||||
.tab-item {
|
||||
width: 155rpx;
|
||||
height: 68rpx;
|
||||
position: relative;
|
||||
margin-right: 25rpx;
|
||||
|
||||
&.act {
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 48rpx;
|
||||
height: 4rpx;
|
||||
background: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
&.unact {
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #CCCCCC;
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 48rpx;
|
||||
height: 4rpx;
|
||||
background: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
&.unact {
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #CCCCCC;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.grid-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 134rpx);
|
||||
gap: 24rpx;
|
||||
width: 580rpx;
|
||||
margin: 28rpx auto 0;
|
||||
padding-bottom: 20rpx;
|
||||
}
|
||||
.grid-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 124rpx);
|
||||
gap: 24rpx;
|
||||
width: 580rpx;
|
||||
margin: 28rpx auto 0;
|
||||
padding-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
width: 112rpx;
|
||||
height: 150rpx;
|
||||
|
||||
|
||||
}
|
||||
.grid-item {
|
||||
width: 142rpx;
|
||||
height: 150rpx;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user