优化ActivityItem组件：1. 优化左右布局结构 2. 调整组件间距和样式 3. 完善组件覆盖效果
This commit is contained in:
davy
parent
2e0e29a3d1
commit
69ffc1fd00
@ -1,19 +1,27 @@
|
||||
<template>
|
||||
<view class="activity-item flex" @click="handleClick">
|
||||
<view class="left flex flex-col justify-between align-center">
|
||||
<image :src="item.brandLogo" style="width: 140rpx;height: 140rpx;"></image>
|
||||
<text>活动状态</text>
|
||||
<view v-if="item.audit_status == 0" style="color: #9E9E9E;font-size: 24rpx;">待审核</view>
|
||||
<view v-if="item.audit_status == 2" style="color: #DE3C4B;font-size: 24rpx;">未通过</view>
|
||||
<view v-if="item.audit_status == 1">
|
||||
<block v-if="item.activity_status == 1">
|
||||
<view class="margin-bottom-xs" style="color: #9E9E9E;font-size: 24rpx;">招募进行中</view>
|
||||
<view>
|
||||
<text style="font-size: 72rpx; color: #DE3C4B;">{{item.remainingDays}}</text>天
|
||||
<image :src="item.brandLogo" style="width: 140rpx;height: 140rpx;border-radius: 6rpx;"></image>
|
||||
<text style="color: #606060;font-size: 24rpx;font-weight: bold;white-space: nowrap;">
|
||||
<block v-if="activityState === 'recruiting'">活动招募还剩</block>
|
||||
<block v-else-if="activityState === 'inProgress'">距离达成还剩</block>
|
||||
</text>
|
||||
<view class="status-box">
|
||||
<block v-if="activityState === 'recruiting'">
|
||||
<view class="days-left">
|
||||
<text style="font-size: 72rpx; color: #DE3C4B;">{{item.remainingDays}}</text>
|
||||
<text style="font-size: 24rpx;color: #606060;">天</text>
|
||||
</view>
|
||||
</block>
|
||||
<block v-else>
|
||||
<view style="color: #9E9E9E;font-size: 24rpx;">活动已结束</view>
|
||||
<block v-else-if="activityState === 'inProgress'">
|
||||
<view v-if="item.remainingBeerCount > 0">
|
||||
<text style="font-size: 24rpx;color: #0B0E26;">{{item.remainingBeerCount}}</text>
|
||||
<text style="font-size: 24rpx;color: #0B0E26;">桶</text>
|
||||
</view>
|
||||
</block>
|
||||
<block v-else-if="activityState === 'completed'">
|
||||
<view v-if="!item.barAwardStatus" style="font-size: 24rpx;color: #19367A;font-weight: bold;">待兑付</view>
|
||||
<view v-else style="font-size: 24rpx;color: #19367A;font-weight: bold;">已完成</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
@ -30,6 +38,7 @@
|
||||
<text v-if="item.activityRewardType == 2 || (item.activityRewardType == 1 && item.activityRewardGoods)" class="zeng">赠</text>
|
||||
<text v-if="item.activityRewardType == 1 && item.activityRewardGoods" style="color: #0B0E26;font-size: 24rpx;">{{item.activityRewardGoods.goodsName}} * {{item.activityRewardCount}}</text>
|
||||
<text v-if="item.activityRewardType == 2" style="color: #0B0E26;font-size: 24rpx;">啤酒币 * {{item.activityRewardCount}}个</text>
|
||||
<text v-if="item.barAwardStatus" style="color: #0B0E26;font-size: 24rpx;">（已发放）</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@ -44,6 +53,18 @@ export default {
|
||||
required: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
activityState() {
|
||||
if (this.item.activityStatus === 1) {
|
||||
return 'recruiting';
|
||||
} else if (this.item.activityStatus === 2) {
|
||||
return 'inProgress';
|
||||
} else if (this.item.activityStatus === 3) {
|
||||
return 'completed';
|
||||
}
|
||||
return '';
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClick() {
|
||||
this.$emit('click', this.item)
|
||||
@ -56,54 +77,49 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* 活动项容器样式 */
|
||||
.activity-item {
|
||||
border-radius: 20rpx;
|
||||
background: #FDFDFD;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #F2F2F2;
|
||||
position: relative;
|
||||
width: 702rpx;
|
||||
margin-bottom: 32rpx;
|
||||
margin-bottom: 48rpx;
|
||||
|
||||
// &:last-child {
|
||||
// margin-bottom: 0;
|
||||
// }
|
||||
|
||||
.left {
|
||||
padding: 24rpx 20rpx;
|
||||
border-radius: 20rpx;
|
||||
background: #FFFFFF;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #EFEDE9;
|
||||
width: 180rpx;
|
||||
margin-top: -10rpx;
|
||||
margin-bottom: -10rpx;
|
||||
}
|
||||
|
||||
.right {
|
||||
padding: 20rpx;
|
||||
flex: 1;
|
||||
|
||||
width: 702rpx;
|
||||
min-height: 428rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 20rpx;
|
||||
padding: 24rpx 24rpx 24rpx 200rpx;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0rpx 1rpx 3rpx 0rpx rgba(0, 0, 0, 0.1);
|
||||
|
||||
.title {
|
||||
font-family: Source Han Sans;
|
||||
font-size: 28rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
line-height: 30rpx;
|
||||
line-height: 48rpx;
|
||||
color: #0B0E26;
|
||||
margin-bottom: 20rpx;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.sub {
|
||||
font-family: Source Han Sans;
|
||||
font-size: 24rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
line-height: 30rpx;
|
||||
line-height: 40rpx;
|
||||
color: #0B0E26;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.scroll-img {
|
||||
width: 500rpx;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
white-space: nowrap;
|
||||
height: 144rpx;
|
||||
margin-bottom: 20rpx;
|
||||
margin-bottom: 18rpx;
|
||||
overflow-x: auto;
|
||||
|
||||
.beer-box {
|
||||
width: 100rpx;
|
||||
@ -119,9 +135,8 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.zeng {
|
||||
font-family: Source Han Sans;
|
||||
font-size: 20rpx;
|
||||
font-weight: bold;
|
||||
line-height: normal;
|
||||
@ -133,5 +148,67 @@ export default {
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.left {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: -12rpx;
|
||||
height: calc(100% + 24rpx);
|
||||
width: 180rpx;
|
||||
padding: 24rpx 16rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 20rpx;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #EFEDE9;
|
||||
z-index: 1;
|
||||
box-shadow: 0rpx 1rpx 3rpx 0rpx rgba(0, 0, 0, 0.1);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.brand-logo {
|
||||
width: 148rpx;
|
||||
height: 148rpx;
|
||||
border-radius: 12rpx;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.brewery-name {
|
||||
font-size: 24rpx;
|
||||
font-weight: bold;
|
||||
color: #0B0E26;
|
||||
text-align: center;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.city {
|
||||
font-size: 20rpx;
|
||||
color: #9D9D9D;
|
||||
text-align: center;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.status-text {
|
||||
font-size: 20rpx;
|
||||
color: #0B0E26;
|
||||
text-align: center;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.remaining-days {
|
||||
font-size: 40rpx;
|
||||
font-weight: bold;
|
||||
color: #D42E78;
|
||||
text-align: center;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.days-unit {
|
||||
font-size: 20rpx;
|
||||
color: #D42E78;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user