Hooke / mlaj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
f1f68ab8 1 parent e521e128

feat(recall): 新增积分汇总页面及资源文件 

添加积分汇总页面组件 PointsPage.vue，包含积分球动画效果和交互逻辑
添加相关图片资源文件用于页面展示
更新路由配置以支持积分汇总页面访问
修改登录页按钮文字颜色为白色
Inline Side-by-side
Showing 10 changed files with 189 additions and 2 deletions
/*
* @Date: 2025-03-20 20:36:36
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-12-23 17:54:30
* @LastEditTime: 2025-12-24 09:36:29
* @FilePath: /mlaj/src/router/routes.js
* @Description: 路由地址映射配置
*/
......@@ -145,6 +145,12 @@ export const routes = [
meta: { title: '分享海报' },
},
{
path: '/recall/points',
name: 'Points',
component: () => import('../views/recall/PointsPage.vue'),
meta: { title: '积分汇总' },
},
{
path: '/checkout',
name: 'CheckoutPage',
component: () => import('../views/checkout/CheckoutPage.vue'),
......
<template>
<div class="points-page h-screen bg-cover bg-center bg-no-repeat relative overflow-hidden flex flex-col" :style="{ backgroundImage: `url(${bgImg})` }">
<!-- 头部积分球区域 -->
<div class="header-bubbles relative h-48 w-full pt-6 flex-shrink-0">
<!-- 球体 1 -->
<div class="bubble absolute left-10 top-12 animate-float-slow">
<div class="bubble-bg w-12 h-12 bg-contain bg-center bg-no-repeat flex flex-col items-center justify-center" :style="{ backgroundImage: `url(${ppImg})` }">
<img :src="jbImg" class="w-3.5 h-3.5 mb-0.5" alt="coin" />
<span class="text-white text-[8px] font-bold leading-none">+100</span>
</div>
</div>
<!-- 球体 2 -->
<div class="bubble absolute left-32 top-4 animate-float">
<div class="bubble-bg w-12 h-12 bg-contain bg-center bg-no-repeat flex flex-col items-center justify-center" :style="{ backgroundImage: `url(${ppImg})` }">
<img :src="jbImg" class="w-3.5 h-3.5 mb-0.5" alt="coin" />
<span class="text-white text-[8px] font-bold leading-none">+100</span>
</div>
</div>
<!-- 球体 3 -->
<div class="bubble absolute right-32 top-4 animate-float-delayed">
<div class="bubble-bg w-12 h-12 bg-contain bg-center bg-no-repeat flex flex-col items-center justify-center" :style="{ backgroundImage: `url(${ppImg})` }">
<img :src="jbImg" class="w-3.5 h-3.5 mb-0.5" alt="coin" />
<span class="text-white text-[8px] font-bold leading-none">+100</span>
</div>
</div>
<!-- 球体 4 -->
<div class="bubble absolute right-10 top-12 animate-float-slow-delayed">
<div class="bubble-bg w-12 h-12 bg-contain bg-center bg-no-repeat flex flex-col items-center justify-center" :style="{ backgroundImage: `url(${ppImg})` }">
<img :src="jbImg" class="w-3.5 h-3.5 mb-0.5" alt="coin" />
<span class="text-white text-[8px] font-bold leading-none">+100</span>
</div>
</div>
<!-- 球体 5 (新增) -->
<div class="bubble absolute left-20 top-24 animate-float-delayed">
<div class="bubble-bg w-10 h-10 bg-contain bg-center bg-no-repeat flex flex-col items-center justify-center" :style="{ backgroundImage: `url(${ppImg})` }">
<img :src="jbImg" class="w-3 h-3 mb-0.5" alt="coin" />
<span class="text-white text-[8px] font-bold leading-none">+100</span>
</div>
</div>
<!-- 球体 6 (新增) -->
<div class="bubble absolute right-20 top-24 animate-float">
<div class="bubble-bg w-10 h-10 bg-contain bg-center bg-no-repeat flex flex-col items-center justify-center" :style="{ backgroundImage: `url(${ppImg})` }">
<img :src="jbImg" class="w-3 h-3 mb-0.5" alt="coin" />
<span class="text-white text-[8px] font-bold leading-none">+100</span>
</div>
</div>
<!-- 球体 7 (新增) -->
<div class="bubble absolute left-4 top-32 animate-float-slow">
<div class="bubble-bg w-8 h-8 bg-contain bg-center bg-no-repeat flex flex-col items-center justify-center" :style="{ backgroundImage: `url(${ppImg})` }">
<img :src="jbImg" class="w-2.5 h-2.5 mb-0.5" alt="coin" />
<span class="text-white text-[6px] font-bold leading-none">+100</span>
</div>
</div>
<!-- 球体 8 (新增) -->
<div class="bubble absolute right-4 top-32 animate-float-slow-delayed">
<div class="bubble-bg w-8 h-8 bg-contain bg-center bg-no-repeat flex flex-col items-center justify-center" :style="{ backgroundImage: `url(${ppImg})` }">
<img :src="jbImg" class="w-2.5 h-2.5 mb-0.5" alt="coin" />
<span class="text-white text-[6px] font-bold leading-none">+100</span>
</div>
</div>
</div>
<!-- 中间瓶子 -->
<div class="bottle-section flex justify-center -mt-24 mb-2 relative z-10 flex-shrink-0">
<img :src="pzImg" class="w-64 h-auto object-contain drop-shadow-[0_0_15px_rgba(255,255,255,0.3)]" alt="bottle" />
</div>
<!-- 内容区域 -->
<div class="flex-1 flex flex-col justify-between px-4 pb-24 overflow-hidden">
<!-- 积分卡片 -->
<div class="mb-2 bg-white/10 backdrop-blur-md rounded-2xl p-4 text-center border border-white/20 shadow-lg flex-shrink-0">
<p class="text-white text-sm mb-1 opacity-90">您成功收集到</p>
<div class="flex items-baseline justify-center mb-1">
<span class="text-yellow-400 text-3xl font-bold mr-2 tracking-wider">15,800</span>
<span class="text-white text-sm opacity-90">星球币</span>
</div>
<p class="text-white text-[12px] scale-90">基于您的历史活动自动计算所得 1元积1分</p>
</div>
<!-- 如何收获星球币卡片 -->
<div class="bg-white/10 backdrop-blur-md rounded-2xl p-4 border border-white/20 shadow-lg flex flex-col justify-center flex-1 min-h-0">
<h3 class="text-white text-[22px] font-bold mb-4 text-center shadow-text">如何收获星球币?</h3>
<div class="space-y-4 flex-1 flex flex-col justify-center">
<div v-for="(item, index) in harvestMethods" :key="index" class="flex items-center space-x-3 pl-4">
<img :src="item.icon" class="w-4 h-4 object-contain" :alt="item.text" />
<span class="text-white text-[15px] font-medium tracking-wide">{{ item.text }}</span>
</div>
</div>
<div class="mt-4 text-center">
<p class="text-white text-[12px] mb-0.5">每一步前行,</p>
<p class="text-white text-[12px]">皆可兑换成照耀生命的星光。</p>
</div>
</div>
</div>
<!-- 底部按钮 -->
<div class="fixed bottom-0 left-0 w-full p-4 bg-gradient-to-t from-black/50 to-transparent pb-8 z-20">
<van-button block class="submit-btn !rounded-lg !bg-transparent !border-[#FFDD01] !text-[#FFDD01] !font-bold !text-lg !h-[48px]" @click="handleExplore">
进入新星球探索
</van-button>
</div>
</div>
</template>
<script setup>
import { useTitle } from '@vueuse/core'
import { useRouter } from 'vue-router'
// 导入图片资源
import bgImg from '@/assets/images/recall/bg01@2x.png'
import ppImg from '@/assets/images/recall/pp@2x.png'
import jbImg from '@/assets/images/recall/jb@2x.png'
import pzImg from '@/assets/images/recall/pz@2x.png'
import icon957 from '@/assets/images/recall/957@2x.png'
import icon958 from '@/assets/images/recall/958@2x.png'
import icon959 from '@/assets/images/recall/959@2x.png'
import icon961 from '@/assets/images/recall/961@2x.png'
useTitle('积分汇总')
const router = useRouter()
const harvestMethods = [
{ icon: icon957, text: '参加线下星球活动' },
{ icon: icon958, text: '参加线上学习活动' },
{ icon: icon959, text: '邀请挚友加入BEHALO' },
{ icon: icon961, text: '连续完成作业打卡' },
]
const handleExplore = () => {
// 路由跳转逻辑
console.log('Enter new planet exploration')
// router.push('/...')
}
</script>
<style lang="less" scoped>
.submit-btn {
// Add a subtle gradient for better visual
background: linear-gradient(180deg, rgba(249, 243, 157, 0.19) 0%, rgba(219, 243, 48, 0.3) 100%) !important;
backdrop-filter: blur(4px);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}
.shadow-text {
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
@keyframes float-slow {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
.animate-float {
animation: float 3s ease-in-out infinite;
}
.animate-float-delayed {
animation: float 3s ease-in-out infinite 1.5s;
}
.animate-float-slow {
animation: float-slow 4s ease-in-out infinite 0.5s;
}
.animate-float-slow-delayed {
animation: float-slow 4s ease-in-out infinite 2s;
}
</style>
......@@ -75,7 +75,7 @@
</div>
<div class="p-4 border-t border-gray-100 bg-white safe-area-bottom">
<van-button block round type="primary" color="linear-gradient(to right, #FFDD01, #E5C600)"
class="!text-black !font-bold !h-[44px]" @click="showAgreement = false">
class="!text-white !font-bold !h-[44px]" @click="showAgreement = false">
我已阅读并同意
</van-button>
</div>
......