659 lines
21 KiB
Vue
659 lines
21 KiB
Vue
<script>
|
||
import { getToken, setToken } from '@/utils/auth'
|
||
import { login } from './api'
|
||
import { FA_SOLID_DATA, FA_BRANDS_DATA, FA_SOLID_FAMILY, FA_BRANDS_FAMILY } from '@/static/utils/fontData'
|
||
// 1. 新增：导入用户配置接口
|
||
import { getUserConfig, editUserConfig } from './api'
|
||
// 1. 引入主题工具方法 + 预设常量（补充缺失的导入）
|
||
import {
|
||
getThemeFromServer,
|
||
switchTheme,
|
||
injectTheme,
|
||
THEME_PRESETS,
|
||
DEFAULT_THEME_KEY,
|
||
THEME_CHANGE_EVENT // 补充导入事件常量，统一事件名
|
||
} from './utils/theme'
|
||
// 引入全局主题适配器（导航栏、TabBar等）
|
||
import {
|
||
initGlobalTheme,
|
||
registerGlobalThemeListener,
|
||
applyGlobalTheme,
|
||
applyNavigationBarTheme
|
||
} from './utils/themeGlobal'
|
||
// 激励机制事件常量
|
||
const GROWTH_UPDATE_EVENT = 'growthUpdate'
|
||
|
||
function hexToRgb(hex, fallback = '198,142,63') {
|
||
if (!hex || hex[0] !== '#') return fallback
|
||
let h = hex.slice(1)
|
||
if (h.length === 3) h = h.split('').map(c => c + c).join('')
|
||
const n = parseInt(h, 16)
|
||
return `${(n >> 16) & 255},${(n >> 8) & 255},${n & 255}`
|
||
}
|
||
|
||
export default {
|
||
// 初始化全局数据（小程序全局状态核心）
|
||
globalData: {
|
||
themeKey: DEFAULT_THEME_KEY,
|
||
themeConfig: THEME_PRESETS[DEFAULT_THEME_KEY],
|
||
token: '',
|
||
lastToken: '',
|
||
fontReady: false
|
||
},
|
||
data() {
|
||
return {
|
||
themeConfig: THEME_PRESETS[DEFAULT_THEME_KEY]
|
||
}
|
||
},
|
||
computed: {
|
||
// 将主题色注入为全局 CSS 变量，供 .btn 等统一按钮类使用
|
||
rootVars() {
|
||
const c = this.themeConfig || {}
|
||
const pRGB = hexToRgb(c.primaryColor)
|
||
const dRGB = hexToRgb(c.dangerColor || '#F56C6C')
|
||
const sRGB = hexToRgb(c.successColor || '#67C23A')
|
||
const isDark = c.isDark || false
|
||
const secondaryBg = isDark ? 'rgba(255,255,255,0.16)' : 'rgba(0,0,0,0.06)'
|
||
const secondaryText = isDark ? 'rgba(255,255,255,0.9)' : '#333'
|
||
return {
|
||
'--primaryColor': c.primaryColor,
|
||
'--primaryColorRGB': pRGB,
|
||
'--secondaryColor': c.secondaryColor,
|
||
'--dangerColor': c.dangerColor || '#F56C6C',
|
||
'--dangerColorRGB': dRGB,
|
||
'--successColor': c.successColor || '#67C23A',
|
||
'--successColorRGB': sRGB,
|
||
'--warningColor': c.warningColor || '#E6A23C',
|
||
'--incomeColor': c.incomeColor || '#67C23A',
|
||
'--expendColor': c.expendColor || '#F56C6C',
|
||
'--textPrimary': c.textPrimary,
|
||
'--textSecondary': c.textSecondary,
|
||
'--textTertiary': c.textTertiary || c.textDisabled || '#909399',
|
||
'--textDisabled': c.textDisabled || '#C0C4CC',
|
||
'--bgColor': c.bgColor,
|
||
'--cardBgColor': c.cardBgColor,
|
||
'--borderColor': c.borderColor,
|
||
'--borderLight': c.borderLight,
|
||
'--inputBgColor': c.inputBgColor || c.cardBgColor,
|
||
'--gradientSoft': c.gradientSoft,
|
||
'--shadowColor': c.shadowColor,
|
||
'--btn-secondary-bg': secondaryBg,
|
||
'--btn-secondary-text': secondaryText
|
||
}
|
||
}
|
||
},
|
||
/**
|
||
* 小程序启动入口（优先初始化主题，再处理登录）
|
||
*/
|
||
onLaunch: async function() {
|
||
try {
|
||
await this.loadFonts()
|
||
console.log('✅ App启动 - 字体加载完成')
|
||
|
||
// ========== 第一步：优先初始化主题（确保样式先加载，避免闪屏） ==========
|
||
await this.initTheme()
|
||
this.themeConfig = this.globalData.themeConfig
|
||
// 注册全局主题变更监听：同步 CSS 变量驱动的统一按钮样式
|
||
uni.$on(THEME_CHANGE_EVENT, (payload) => {
|
||
const cfg = (payload && payload.config) || this.globalData.themeConfig || THEME_PRESETS[DEFAULT_THEME_KEY]
|
||
this.themeConfig = cfg
|
||
})
|
||
console.log('✅ App启动 - 主题初始化完成')
|
||
|
||
// ========== 第二步：注册激励机制全局事件监听 ==========
|
||
this.registerGrowthListener()
|
||
console.log(' 激励机制事件监听注册完成')
|
||
|
||
// ========== 第三步：处理登录逻辑（原有逻辑加固） ==========
|
||
this.globalData.token = getToken() // 同步token到全局
|
||
this.globalData.lastToken = this.globalData.token // 初始化lastToken，用于检测登录状态变化
|
||
const token = this.globalData.token
|
||
|
||
// 已登录 → 先同步配置再跳首页
|
||
if (token) {
|
||
console.log('✅ 已登录，同步用户配置')
|
||
await this.syncUserConfig()
|
||
console.log('✅ 跳转到首页')
|
||
uni.switchTab({
|
||
url: '/pages/index/index',
|
||
fail: (err) => {
|
||
console.error('跳转到首页失败：', err)
|
||
// 兜底：如果tabBar跳转失败，直接打开首页
|
||
uni.redirectTo({ url: '/pages/index/index' })
|
||
}
|
||
})
|
||
return
|
||
}
|
||
|
||
// 未登录 → 执行自动登录（保留注释，逻辑加固）
|
||
// await this.handleAutoLogin()
|
||
} catch (err) {
|
||
console.error('❌ App启动流程异常：', err)
|
||
// 终极兜底：无论启动失败原因，确保进入基础页面
|
||
uni.redirectTo({ url: '/pages/login/login' })
|
||
}
|
||
},
|
||
/**
|
||
* 小程序切前台时触发（兜底更新主题，防止样式不一致）
|
||
*/
|
||
onShow: function() {
|
||
// 重新应用全局主题到导航栏（确保切回前台时样式一致）
|
||
if (this.globalData.themeConfig) {
|
||
applyNavigationBarTheme(this.globalData.themeConfig)
|
||
}
|
||
|
||
// 检测登录状态变化（token从无到有）
|
||
const currentToken = getToken()
|
||
if (currentToken && currentToken !== this.globalData.lastToken) {
|
||
console.log('【App】检测到登录状态变化，同步用户配置')
|
||
this.syncUserConfig()
|
||
this.globalData.lastToken = currentToken
|
||
}
|
||
|
||
// 触发全局主题事件，通知所有页面更新
|
||
uni.$emit(THEME_CHANGE_EVENT, {
|
||
key: this.globalData.themeKey,
|
||
config: this.globalData.themeConfig
|
||
})
|
||
console.log('✅ 小程序切前台 - 触发主题同步')
|
||
},
|
||
/**
|
||
* 方法集合（主题 + 登录）
|
||
*/
|
||
methods: {
|
||
/**
|
||
* 加载 Font Awesome 字体（微信小程序专用 wx.loadFontFace API）
|
||
* 注意：wx.loadFontFace 的 source 参数必须为 url("...") 格式，
|
||
* 且仅支持 https 网络资源或 base64 data URI，不支持本地静态路径。
|
||
*/
|
||
loadFonts() {
|
||
return new Promise((resolve) => {
|
||
const fontConfigs = [
|
||
{ family: FA_SOLID_FAMILY, data: FA_SOLID_DATA },
|
||
{ family: FA_BRANDS_FAMILY, data: FA_BRANDS_DATA }
|
||
]
|
||
let loaded = 0
|
||
fontConfigs.forEach((config) => {
|
||
uni.loadFontFace({
|
||
family: config.family,
|
||
source: `url("${config.data}")`,
|
||
global: true,
|
||
success: () => {
|
||
loaded++
|
||
console.log(`✅ 字体加载成功 [${config.family}] via base64`)
|
||
if (loaded === fontConfigs.length) {
|
||
this.globalData.fontReady = true
|
||
uni.$emit('fontReady')
|
||
resolve()
|
||
}
|
||
},
|
||
fail: (err) => {
|
||
console.warn(`字体加载失败 [${config.family}]:`, err.errMsg || err)
|
||
loaded++
|
||
if (loaded === fontConfigs.length) {
|
||
this.globalData.fontReady = loaded > 0
|
||
uni.$emit('fontReady')
|
||
resolve()
|
||
}
|
||
}
|
||
})
|
||
})
|
||
setTimeout(() => {
|
||
if (loaded < fontConfigs.length) {
|
||
console.warn('字体加载超时，部分字体可能不可用')
|
||
}
|
||
this.globalData.fontReady = loaded > 0
|
||
uni.$emit('fontReady')
|
||
resolve()
|
||
}, 10000)
|
||
})
|
||
},
|
||
/**
|
||
* 初始化主题（兼容后端/本地/默认，强容错）
|
||
*/
|
||
async initTheme() {
|
||
try {
|
||
// 1. 从后端/本地获取合法的主题key
|
||
const themeKey = await getThemeFromServer()
|
||
// 2. 注入全局（更新storage + 全局事件 + globalData）
|
||
injectTheme(themeKey)
|
||
// 3. 强制同步globalData（小程序getApp()依赖此数据）
|
||
this.globalData.themeKey = themeKey
|
||
this.globalData.themeConfig = THEME_PRESETS[themeKey] || THEME_PRESETS[DEFAULT_THEME_KEY]
|
||
// 4. 应用全局主题到导航栏和TabBar
|
||
applyGlobalTheme(this.globalData.themeConfig)
|
||
// 5. 注册全局主题变更监听
|
||
registerGlobalThemeListener()
|
||
console.log(`【主题】初始化完成，当前主题：${this.globalData.themeKey}`)
|
||
} catch (error) {
|
||
console.error('【主题】初始化失败，使用默认主题：', error)
|
||
// 兜底：强制注入默认主题
|
||
injectTheme(DEFAULT_THEME_KEY)
|
||
this.globalData.themeKey = DEFAULT_THEME_KEY
|
||
this.globalData.themeConfig = THEME_PRESETS[DEFAULT_THEME_KEY]
|
||
applyGlobalTheme(this.globalData.themeConfig)
|
||
registerGlobalThemeListener()
|
||
}
|
||
},
|
||
/**
|
||
* 全局切换主题（供任意页面调用）
|
||
* @param {string} themeKey 目标主题key
|
||
*/
|
||
async updateTheme(themeKey, showToast = true) {
|
||
if (!themeKey || themeKey === this.globalData.themeKey) return
|
||
try {
|
||
// 调用核心切换方法（后端+本地+全局事件）
|
||
await switchTheme(themeKey, showToast)
|
||
// 同步更新globalData（关键：保证getApp()获取最新值）
|
||
this.globalData.themeKey = themeKey
|
||
this.globalData.themeConfig = THEME_PRESETS[themeKey] || THEME_PRESETS[DEFAULT_THEME_KEY]
|
||
// 应用全局主题到导航栏和TabBar
|
||
applyGlobalTheme(this.globalData.themeConfig)
|
||
console.log(`【主题】全局切换完成：${themeKey}`)
|
||
} catch (error) {
|
||
console.error(`【主题】切换失败：${themeKey}`, error)
|
||
// 兜底：本地强制切换
|
||
injectTheme(themeKey)
|
||
this.globalData.themeKey = themeKey
|
||
this.globalData.themeConfig = THEME_PRESETS[themeKey] || THEME_PRESETS[DEFAULT_THEME_KEY]
|
||
applyGlobalTheme(this.globalData.themeConfig)
|
||
}
|
||
},
|
||
/**
|
||
* 自动登录逻辑（抽离为独立方法，便于维护）
|
||
*/
|
||
async handleAutoLogin() {
|
||
try {
|
||
const res = await uni.login()
|
||
if (!res.code) {
|
||
throw new Error('获取微信code失败')
|
||
}
|
||
const tokenData = await login(res.code)
|
||
|
||
if (tokenData?.token) {
|
||
setToken(tokenData.token)
|
||
this.globalData.token = tokenData.token // 同步到全局
|
||
console.log('✅ 自动登录成功')
|
||
|
||
await this.syncUserConfig()
|
||
|
||
console.log('✅ 跳转到首页')
|
||
uni.switchTab({
|
||
url: '/pages/index/index',
|
||
fail: () => uni.redirectTo({ url: '/pages/index/index' })
|
||
})
|
||
} else {
|
||
console.log('❌ 自动登录失败 - 未获取到token')
|
||
uni.navigateTo({ url: '/pages/login/login' })
|
||
}
|
||
} catch (err) {
|
||
console.log('❌ 自动登录失败', err)
|
||
uni.navigateTo({ url: '/pages/login/login' })
|
||
}
|
||
},
|
||
/**
|
||
* 同步用户配置（登录成功后调用，从后端获取主题等配置）
|
||
*/
|
||
async syncUserConfig() {
|
||
try {
|
||
const res = await getUserConfig()
|
||
if (res?.theme) {
|
||
await this.updateTheme(res.theme, false)
|
||
}
|
||
console.log('✅ 用户配置同步完成')
|
||
} catch (error) {
|
||
console.warn('❌ 用户配置同步失败：', error)
|
||
}
|
||
},
|
||
/**
|
||
* 注册激励机制全局事件监听
|
||
*/
|
||
registerGrowthListener() {
|
||
console.log('【激励机制】开始注册全局事件监听:', GROWTH_UPDATE_EVENT)
|
||
uni.$on(GROWTH_UPDATE_EVENT, (growth) => {
|
||
console.log('【激励机制】✅ 收到全局事件触发，growth数据:', JSON.stringify(growth))
|
||
this.handleGrowthIncentives(growth)
|
||
})
|
||
console.log('【激励机制】✅ 全局事件监听注册成功')
|
||
},
|
||
/**
|
||
* 处理成长激励（升级、成就、特权）
|
||
* @param {Object} growth 成长数据
|
||
*/
|
||
handleGrowthIncentives(growth) {
|
||
console.log('【激励机制】进入 handleGrowthIncentives，growth:', growth)
|
||
|
||
if (!growth) {
|
||
console.log('【激励机制】❌ growth为空，直接返回')
|
||
return
|
||
}
|
||
|
||
console.log('【激励机制】✅ growth数据有效')
|
||
console.log('【激励机制】levelUp:', growth.levelUp, 'newAchievements长度:', growth.newAchievements?.length || 0, 'newPrivileges长度:', growth.newPrivileges?.length || 0)
|
||
|
||
// 优先级：升级 > 成就 > 特权
|
||
|
||
// 1. 检测升级
|
||
if (growth.levelUp) {
|
||
console.log('【激励机制】✅ 检测到升级，levelUp:', growth.levelUp)
|
||
this.showLevelUpCelebration(growth)
|
||
return
|
||
}
|
||
|
||
// 2. 检测新成就
|
||
if (growth.newAchievements && growth.newAchievements.length > 0) {
|
||
console.log('【激励机制】✅ 检测到新成就，数量:', growth.newAchievements.length)
|
||
this.showAchievementCelebration(growth.newAchievements)
|
||
return
|
||
}
|
||
|
||
// 3. 检测新特权
|
||
// if (growth.newPrivileges && growth.newPrivileges.length > 0) {
|
||
// console.log('【激励机制】✅ 检测到新特权，数量:', growth.newPrivileges.length)
|
||
// this.showPrivilegeNotification(growth.newPrivileges)
|
||
// }
|
||
},
|
||
/**
|
||
* 显示升级庆祝弹窗
|
||
*/
|
||
showLevelUpCelebration(growth) {
|
||
console.log('【激励机制】进入 showLevelUpCelebration，准备显示升级弹窗')
|
||
|
||
const privilegesText = growth.newPrivileges && growth.newPrivileges.length
|
||
? '\n特权：' + growth.newPrivileges.join('、')
|
||
: ''
|
||
|
||
const content = `等级：Lv.${growth.oldLevel || growth.currentLevel - 1} → Lv.${growth.currentLevel}\n称号：${growth.levelTitle || '暂无'}\n获得经验：+${growth.expGained || 0} EXP${privilegesText}`
|
||
|
||
uni.showModal({
|
||
title: '🎉 恭喜升级！',
|
||
content: content,
|
||
showCancel: false,
|
||
confirmText: '太棒了！',
|
||
confirmColor: this.globalData.themeConfig?.primaryColor || '#6366F1',
|
||
success: () => {
|
||
console.log('【激励机制】升级弹窗已关闭')
|
||
}
|
||
})
|
||
|
||
console.log('【激励机制】✅ 升级弹窗已显示')
|
||
},
|
||
/**
|
||
* 显示成就获得弹窗（支持连续展示多个）
|
||
*/
|
||
showAchievementCelebration(achievements) {
|
||
if (!achievements || achievements.length === 0) return
|
||
|
||
console.log('【激励机制】进入 showAchievementCelebration，成就数量：', achievements.length)
|
||
|
||
const current = achievements[0]
|
||
const content = `${current.name || ''}\n${current.description || current.desc || ''}\n稀有度：${current.rarityName || current.rarity || '初级'}\n获得经验：+${current.expReward || current.exp || 0} EXP`
|
||
|
||
const remainingAchievements = achievements.length > 1 ? achievements.slice(1) : []
|
||
|
||
uni.showModal({
|
||
title: '🏆 获得成就！',
|
||
content: content,
|
||
showCancel: false,
|
||
confirmText: '太棒了！',
|
||
confirmColor: this.globalData.themeConfig?.primaryColor || '#6366F1',
|
||
success: () => {
|
||
console.log('【激励机制】成就弹窗已关闭')
|
||
if (remainingAchievements.length > 0) {
|
||
setTimeout(() => {
|
||
this.showAchievementCelebration(remainingAchievements)
|
||
}, 500)
|
||
}
|
||
}
|
||
})
|
||
|
||
console.log('【激励机制】✅ 成就弹窗已显示')
|
||
},
|
||
/**
|
||
* 显示特权解锁提示
|
||
*/
|
||
showPrivilegeNotification(privileges) {
|
||
const privilegeText = privileges.join('、')
|
||
uni.showToast({
|
||
title: `解锁新特权: ${privilegeText}`,
|
||
icon: 'success',
|
||
duration: 2500
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<view class="app-root" :style="rootVars">
|
||
<slot></slot>
|
||
</view>
|
||
</template>
|
||
|
||
<style>
|
||
/* 字体加载：仅通过 JS 层 uni.loadFontFace() 加载（base64 data URI） */
|
||
/* 微信小程序不支持 CSS @font-face 本地路径，已在 loadFonts() 中用 wx.loadFontFace 处理 */
|
||
|
||
/* ========== 主题过渡动画（小程序全兼容） ========== */
|
||
.theme-transition {
|
||
transition: background-color 0.3s ease,
|
||
color 0.3s ease,
|
||
border-color 0.3s ease,
|
||
box-shadow 0.3s ease,
|
||
opacity 0.25s ease,
|
||
transform 0.25s ease;
|
||
}
|
||
|
||
/* ========== 页面过渡动画关键帧 ========== */
|
||
@keyframes pageFadeIn {
|
||
0% { opacity: 0; transform: translateY(20rpx); }
|
||
100% { opacity: 1; transform: translateY(0); }
|
||
}
|
||
|
||
@keyframes cardEnter {
|
||
0% { opacity: 0; transform: translateY(16rpx); }
|
||
100% { opacity: 1; transform: translateY(0); }
|
||
}
|
||
|
||
@keyframes shimmer {
|
||
0% { background-position: -200% 0; }
|
||
100% { background-position: 200% 0; }
|
||
}
|
||
|
||
/* ========== 动画工具类 ========== */
|
||
.page-enter {
|
||
animation: pageFadeIn 0.3s ease-out both;
|
||
}
|
||
|
||
.card-enter {
|
||
animation: cardEnter 0.25s ease-out both;
|
||
}
|
||
|
||
.content-fade {
|
||
transition: opacity 0.25s ease;
|
||
}
|
||
|
||
.shimmer-bg {
|
||
background: linear-gradient(90deg,
|
||
rgba(0, 0, 0, 0.04) 25%,
|
||
rgba(0, 0, 0, 0.08) 50%,
|
||
rgba(0, 0, 0, 0.04) 75%);
|
||
background-size: 200% 100%;
|
||
animation: shimmer 1.5s infinite;
|
||
}
|
||
|
||
.app-root {
|
||
min-height: 100vh;
|
||
}
|
||
|
||
/* ========== 全局基础样式（动态值由 :root CSS 变量决定） ========== */
|
||
page {
|
||
background: var(--bgColor, #F7F3ED);
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||
font-size: 28rpx;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
/* 卡片基础样式 */
|
||
.card {
|
||
background: var(--cardBgColor, #FFFFFF);
|
||
border-radius: 12rpx;
|
||
box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.04);
|
||
padding: 30rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
/* 旧版主按钮基础样式（保留兼容，优先使用 styles/buttons.scss 中的 .btn--primary） */
|
||
.btn-primary {
|
||
background: var(--gradientSoft, linear-gradient(135deg, #6366F1 0%, #818CF8 100%));
|
||
color: #fff;
|
||
border-radius: 14rpx;
|
||
height: 88rpx;
|
||
line-height: 88rpx;
|
||
text-align: center;
|
||
font-size: 32rpx;
|
||
border: none;
|
||
}
|
||
|
||
/* 文本样式 - 跟随主题 */
|
||
.text-primary {
|
||
color: var(--textPrimary, #2c3e50);
|
||
}
|
||
.text-secondary {
|
||
color: var(--textSecondary, #7f8c8d);
|
||
}
|
||
.text-tertiary {
|
||
color: var(--textTertiary, #909399);
|
||
}
|
||
|
||
/* 边框样式 - 跟随主题 */
|
||
.border {
|
||
border: 1rpx solid var(--borderLight, #F2EDE6);
|
||
}
|
||
|
||
/* 金额颜色（收入/支出）- 跟随主题 */
|
||
.income-color {
|
||
color: var(--incomeColor, #67C23A);
|
||
}
|
||
.expend-color {
|
||
color: var(--expendColor, #F56C6C);
|
||
}
|
||
|
||
/* ========== 清除默认样式（小程序通用优化） ========== */
|
||
button {
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
button::after {
|
||
border: none;
|
||
}
|
||
view, text, image {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* ========== 全局点击交互动效（丝滑手感） ========== */
|
||
/* 通用按压反馈：轻微缩放 + 透明度 */
|
||
.tap-feedback {
|
||
transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
|
||
opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||
}
|
||
.tap-feedback:active {
|
||
transform: scale(0.96);
|
||
opacity: 0.78;
|
||
}
|
||
|
||
/* 卡片按压反馈：轻微缩放 + 阴影减弱 */
|
||
.tap-card {
|
||
transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
|
||
box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||
}
|
||
.tap-card:active {
|
||
transform: scale(0.98);
|
||
opacity: 0.92;
|
||
}
|
||
|
||
/* 涟漪波纹效果 */
|
||
.ripple {
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.ripple::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
width: 0;
|
||
height: 0;
|
||
border-radius: 50%;
|
||
background: rgba(255, 255, 255, 0.32);
|
||
transform: translate(-50%, -50%);
|
||
transition: width 0.45s ease, height 0.45s ease, opacity 0.6s ease;
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
}
|
||
.ripple:active::after {
|
||
width: 220rpx;
|
||
height: 220rpx;
|
||
opacity: 1;
|
||
transition: 0s;
|
||
}
|
||
|
||
/* ========== 滑动进场动画（列表/卡片用） ========== */
|
||
@keyframes slideUpFade {
|
||
0% { opacity: 0; transform: translateY(24rpx); }
|
||
100% { opacity: 1; transform: translateY(0); }
|
||
}
|
||
@keyframes slideRightFade {
|
||
0% { opacity: 0; transform: translateX(-24rpx); }
|
||
100% { opacity: 1; transform: translateX(0); }
|
||
}
|
||
@keyframes scaleFade {
|
||
0% { opacity: 0; transform: scale(0.92); }
|
||
100% { opacity: 1; transform: scale(1); }
|
||
}
|
||
/* 主题色脉冲光晕 - 通过 CSS 变量驱动 */
|
||
@keyframes pulseGlow {
|
||
0%, 100% { box-shadow: 0 0 0 0 rgba(var(--primaryColorRGB, 99, 102, 241), 0.4); }
|
||
50% { box-shadow: 0 0 0 16rpx rgba(var(--primaryColorRGB, 99, 102, 241), 0); }
|
||
}
|
||
@keyframes rotate360 {
|
||
from { transform: rotate(0); }
|
||
to { transform: rotate(360deg); }
|
||
}
|
||
@keyframes shake {
|
||
0%, 100% { transform: translateX(0); }
|
||
25% { transform: translateX(-6rpx); }
|
||
75% { transform: translateX(6rpx); }
|
||
}
|
||
|
||
.slide-up { animation: slideUpFade 0.35s cubic-bezier(0.4, 0, 0.2, 1) both; }
|
||
.slide-right { animation: slideRightFade 0.35s cubic-bezier(0.4, 0, 0.2, 1) both; }
|
||
.scale-fade { animation: scaleFade 0.3s cubic-bezier(0.4, 0, 0.2, 1) both; }
|
||
.pulse-glow { animation: pulseGlow 2s ease-in-out infinite; }
|
||
.spin-slow { animation: rotate360 12s linear infinite; }
|
||
.shake-anim { animation: shake 0.4s ease; }
|
||
|
||
/* 交错延迟（用于列表元素错开进场） */
|
||
.delay-1 { animation-delay: 0.05s; }
|
||
.delay-2 { animation-delay: 0.1s; }
|
||
.delay-3 { animation-delay: 0.15s; }
|
||
.delay-4 { animation-delay: 0.2s; }
|
||
.delay-5 { animation-delay: 0.25s; }
|
||
|
||
/* ========== 文字交互态 ========== */
|
||
.text-link {
|
||
transition: opacity 0.2s ease, color 0.2s ease;
|
||
cursor: pointer;
|
||
}
|
||
.text-link:active { opacity: 0.6; }
|
||
|
||
/* ========== 主题渐变文字工具（CSS 变量驱动） ========== */
|
||
.text-gradient {
|
||
background: var(--gradientSoft, linear-gradient(135deg, #6366F1 0%, #818CF8 100%));
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
color: transparent;
|
||
}
|
||
</style>
|