Skip to content

飞
飞鹤小程序
Commit a0127b7e authored by 王炽's avatar 王炽
Browse files
Options

异业券多皮肤上传

parent 831e686f
Hide whitespace changes
Inline Side-by-side
Showing with 162 additions and 31 deletions
components/integralArea/InviteGift.less
View file @ a0127b7e
......@@ -8,19 +8,27 @@
color: #333333;
margin-bottom: 20rpx;
display: block;
&.item-4 {
color: #FFF0DF;
}
}
.invite_card {
position: relative;
width: 100%;
height: 254rpx;
background: rgba(255, 255, 255, 0.3);
background: rgba(255, 255, 255, 0.2);
border-radius: 30rpx;
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
padding: 30rpx;
box-sizing: border-box;
overflow: hidden;
&.item-4 {
background: rgba(255, 255, 255, 0.1);
}
.card_content {
position: relative;
height: 100%;
......@@ -32,18 +40,26 @@
font-size: 36rpx;
font-weight: bold;
color: #1c1c1c;
&.item-4 {
color: #FFF0DF;
}
}
.card_description {
font-size: 24rpx;
color: #999999;
margin-top: 10rpx;
&.item-4 {
color: #FFF0DF;
}
}
.invite_button {
width: 172rpx;
height: 62rpx;
background: linear-gradient(90deg, #A07B4D 0%, #C09A60 100%);
background: linear-gradient(to right, #A07B4D 0%, #C09A60 100%);
border-radius: 30rpx;
display: flex;
margin-top: 30rpx;
......@@ -62,6 +78,22 @@
&:active {
transform: scale(0.95);
}
&.item-1 {
background: linear-gradient(to right, #5089C1 0%, #6FA2D5 100%);
}
&.item-2 {
background: linear-gradient(to right, #7253A5 0%, #9879CC 100%);
}
&.item-3 {
background: linear-gradient(to right, #CDA36B 0%, #E0B97D 100%);
}
&.item-4 {
background: linear-gradient(to right, #000000 0%, #2C1500 100%);
}
}
}
......@@ -82,12 +114,24 @@
font-size: 24rpx;
color: #999999;
margin-right: 8rpx;
&.item-4 {
color: #D7D7D7;
}
}
.record_arrow {
font-size: 20rpx;
color: #999999;
font-weight: bold;
&.item-4 {
color: #D7D7D7;
}
}
&.item-4 {
background: rgba(255, 255, 255, 0.36);
}
&:active {
......
components/integralArea/InviteGift.vue
View file @ a0127b7e
<template>
<view class="invite_gift_container">
<view class="invite_gift_container" :class="`item-${itemIndex}`">
<!-- 主标题 -->
<text class="invite_gift_title">邀请得好礼</text>
<text class="invite_gift_title" :class="`item-${itemIndex}`">邀请得好礼</text>
<!-- 邀请卡片 -->
<view class="invite_card">
<view class="invite_card" :class="`item-${itemIndex}`">
<!-- 卡片内容区域 -->
<view class="card_content">
<!-- 卡片标题 -->
<text class="card_title">邀请好友注册得好礼</text>
<text class="card_title" :class="`item-${itemIndex}`">邀请好友注册得好礼</text>
<!-- 描述文字 -->
<text class="card_description">成功邀请一位好友注册即可获得XXX</text>
<text class="card_description" :class="`item-${itemIndex}`">成功邀请一位好友注册即可获得XXX</text>
<!-- 去邀请按钮 -->
<button class="invite_button" @tap="handleInviteClick" open-type="share">
<button class="invite_button" :class="`item-${itemIndex}`" @tap="handleInviteClick" open-type="share">
<text class="invite_button_text">去邀请</text>
</button>
</view>
......@@ -27,9 +27,9 @@
/>
</view>
<!-- 邀请记录按钮 -->
<view class="record_button" @click="handleRecordClick">
<text class="record_text">邀请记录</text>
<text class="record_arrow">{{`>`}}</text>
<view class="record_button" :class="`item-${itemIndex}`" @click="handleRecordClick">
<text class="record_text" :class="`item-${itemIndex}`">邀请记录</text>
<text class="record_arrow" :class="`item-${itemIndex}`">{{`>`}}</text>
</view>
<!-- 3D星星角色 -->
......@@ -45,11 +45,24 @@
</template>
<script setup>
import { defineEmits } from 'vue';
import { defineProps, defineEmits, onMounted } from 'vue';
// Props 定义
const props = defineProps({
itemIndex: {
type: Number,
default: 0
}
});
// Emits 定义
const emit = defineEmits(['invite', 'record']);
// 在 onMounted 中打印 itemIndex
onMounted(() => {
console.log('InviteGift itemIndex:', props.itemIndex);
});
// 去邀请按钮点击事件
const handleInviteClick = () => {
console.log('去邀请按钮点击');
......
views/Integral.less
View file @ a0127b7e
......@@ -475,11 +475,15 @@
.signin_reward_container {
width: 686rpx;
height: 418rpx;
background: rgba(255, 255, 255, 0.3);
background: rgba(255, 255, 255, 0.2);
border-radius: 30rpx;
margin-top: 30rpx;
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08); // 更柔和的阴影
&.item-4 {
background: rgba(255, 255, 255, 0.1);
}
// 标题区域
.signin_title_area {
display: flex;
......@@ -959,10 +963,26 @@
margin-bottom: 30rpx;
padding: 0 30rpx 0 30rpx;
display: block;
&.item-1 {
color: #284A6C;
}
&.item-2 {
color: #322D6F;
}
&.item-3 {
color: #814912;
}
&.item-4 {
color: #FFF0DF;
}
}
.yiyequan_card {
background: rgba(255, 255, 255, 0.3);
background: rgba(255, 255, 255, 0.2);
height: 472rpx;
border-radius: 30rpx;
padding-left: 24rpx;
......@@ -972,10 +992,14 @@
margin-right: 32rpx;
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
&.item-4 {
background: rgba(255, 255, 255, 0.2);
}
.yiyequan_card_header {
padding-top: 24rpx;
display: flex;
justify-content: space-between;
// justify-content: space-between;
align-items: center;
margin-bottom: 30rpx;
......@@ -983,11 +1007,21 @@
font-size: 32rpx;
font-weight: bold;
color: #333333;
&.item-4 {
color: #FFF0DF;
}
}
.card_count {
font-size: 24rpx;
color: #666666;
margin-left: 30rpx;
&.item-4 {
color: #FFF0DF;
}
}
}
......@@ -1059,6 +1093,10 @@
line-clamp: 2;
-webkit-box-orient: vertical;
color: #333333;
&.item-4 {
color: #FFF0DF;
}
font-weight: normal;
height: 80rpx;
}
......@@ -1089,6 +1127,22 @@
text-align: center;
line-height: 62rpx;
&.item-1 {
background: linear-gradient(90deg, #5089C1 0%, #6FA2D5 100%);
}
&.item-2 {
background: linear-gradient(90deg, #7253A5 0%, #9879CC 100%);
}
&.item-3 {
background: linear-gradient(90deg, #CDA36B 0%, #E0B97D 100%);
}
&.item-4 {
background: linear-gradient(90deg, #000000 0%, #2C1500 100%);
}
.exchange_text {
font-size: 24rpx;
color: #FFFFFF;
......@@ -1129,6 +1183,10 @@
color: #333333;
text-align: left;
overflow: hidden;
&.item-4 {
color: #FFF0DF;
}
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
......@@ -1151,6 +1209,22 @@
align-items: center;
justify-content: center;
&.item-1 {
background: linear-gradient(90deg, #5089C1 0%, #6FA2D5 100%);
}
&.item-2 {
background: linear-gradient(90deg, #7253A5 0%, #9879CC 100%);
}
&.item-3 {
background: linear-gradient(90deg, #CDA36B 0%, #E0B97D 100%);
}
&.item-4 {
background: linear-gradient(90deg, #000000 0%, #2C1500 100%);
}
.exchange_text {
font-size: 24rpx;
color: #FFFFFF;
......
views/Integral.vue
View file @ a0127b7e
......@@ -223,8 +223,8 @@
:src="$baseUrl + `integral/${tupianBanben}/zhankaiBtn${itemIndex}.png`" mode="aspectFit" />
</view>
<!-- 7天连续签到奖励容器 -->
<view class="signin_reward_container" v-if="true">
<!-- 7天连续签到奖励容器 -->
<view class="signin_reward_container" :class="`item-${itemIndex}`" v-if="true">
<!-- 标题区域 -->
<view class="signin_title_area" :class="`item-${itemIndex}`">
<text class="signin_main_title">连签7天，奖励翻5倍</text>
......@@ -273,8 +273,8 @@
</view>
<!-- 积分限时购 -->
<SeckillSection :isdebug="isdebug" @credits-sale-click="handleCreditsSaleClick" />
<!-- 邀请得好礼组件 -->
<InviteGift v-if="true" class="invite_container" @invite="handleInviteClick" @record="handleRecordClick" />
<!-- 邀请得好礼组件 -->
<InviteGift v-if="true" class="invite_container" :itemIndex="itemIndex" @invite="handleInviteClick" @record="handleRecordClick" />
<!-- 会员活动 -->
<view class="vip-active-area" v-if="vipActive?.length > 0">
<text class="vip-title" :style="{ color: itemIndex === 4 ? '#fff0df' : '#1d1e25' }">会员活动</text>
......@@ -288,17 +288,17 @@
</swiper>
</view>
<!-- 异业券权益区域 -->
<view class="yiyequan_area">
<!-- 主标题 -->
<text class="yiyequan_title">异业券权益</text>
<!-- 异业券权益区域 -->
<view class="yiyequan_area" :class="`item-${itemIndex}`">
<!-- 主标题 -->
<text class="yiyequan_title" :class="`item-${itemIndex}`">异业券权益</text>
<!-- 权益卡片 -->
<view class="yiyequan_card">
<!-- 权益卡片 -->
<view class="yiyequan_card" :class="`item-${itemIndex}`">
<!-- 卡片头部 -->
<view class="yiyequan_card_header">
<text class="card_title">积分兑换惊喜福利</text>
<text class="card_count">您有{{ availableBenefits }}个权益可兑换</text>
<text class="card_title" :class="`item-${itemIndex}`">积分兑换惊喜福利</text>
<text class="card_count" :class="`item-${itemIndex}`">您有{{ availableBenefits }}个权益可兑换</text>
</view>
<!-- 权益列表 -->
......@@ -316,7 +316,7 @@
<!-- 单个商品时的内容区域 -->
<view class="benefit_content" v-if="benefitList.length === 1">
<!-- 权益名称 -->
<text class="benefit_name">{{ benefit.goodsName }}</text>
<text class="benefit_name" :class="`item-${itemIndex}`">{{ benefit.goodsName }}</text>
<!-- 积分价格容器 -->
<view class="benefit_points_container">
......@@ -324,7 +324,7 @@
</view>
<!-- 兑换按钮 -->
<view class="exchange_button" @click="handleExchangeClick(benefit, index)">
<view class="exchange_button" :class="`item-${itemIndex}`" @click="handleExchangeClick(benefit, index)">
<text class="exchange_text">兑换</text>
</view>
</view>
......@@ -332,13 +332,13 @@
<!-- 多个商品时的内容区域 -->
<template v-else>
<!-- 权益名称 -->
<text class="benefit_name">{{ benefit.goodsName }}</text>
<text class="benefit_name" :class="`item-${itemIndex}`">{{ benefit.goodsName }}</text>
<!-- 积分价格 -->
<text class="benefit_points">{{ benefit.credits }}积分</text>
<!-- 兑换按钮 -->
<view class="exchange_button" @click="handleExchangeClick(benefit, index)">
<view class="exchange_button" :class="`item-${itemIndex}`" @click="handleExchangeClick(benefit, index)">
<text class="exchange_text">兑换</text>
</view>
</template>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment