Compare commits
1 Commits
dev
...
5df910c9f1
| Author | SHA1 | Date | |
|---|---|---|---|
| 5df910c9f1 |
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<view class="budget-bar-wrap">
|
||||
<view class="bar-track">
|
||||
<view class="bar-fill" :style="{ width: percentage + '%', background: fillColor }"></view>
|
||||
<view class="bar-fill" :class="{ over: rawPercentage > 100 }" :style="{ width: percentage + '%' }"></view>
|
||||
</view>
|
||||
<view class="bar-info" v-if="showLabel">
|
||||
<text class="bar-text" v-if="rawPercentage <= 100">预算 {{ formatAmount(total) }} · 剩余 {{ formatAmount(Math.max(0, total - used)) }}</text>
|
||||
@@ -27,25 +27,25 @@ const rawPercentage = computed(() => {
|
||||
})
|
||||
|
||||
const percentage = computed(() => Math.min(100, rawPercentage.value))
|
||||
|
||||
const fillColor = computed(() => {
|
||||
if (rawPercentage.value > 100) return '#FF6B6B'
|
||||
return 'linear-gradient(90deg, #FF8C69, #FFB89A)'
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.bar-track {
|
||||
height: 16rpx;
|
||||
border-radius: 8rpx;
|
||||
background: #F0E0D6;
|
||||
background: $border;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.bar-fill {
|
||||
height: 100%;
|
||||
border-radius: 8rpx;
|
||||
transition: width 0.6s ease-out;
|
||||
background: linear-gradient(90deg, $primary, lighten($primary, 15%));
|
||||
transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
&.over {
|
||||
background: $danger;
|
||||
}
|
||||
}
|
||||
|
||||
.bar-info {
|
||||
@@ -56,20 +56,20 @@ const fillColor = computed(() => {
|
||||
|
||||
.bar-text {
|
||||
font-size: 24rpx;
|
||||
color: #8B7E7E;
|
||||
color: $text-sec;
|
||||
}
|
||||
|
||||
.bar-pct {
|
||||
font-family: 'Fredoka', sans-serif;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #FF8C69;
|
||||
color: $primary;
|
||||
|
||||
&.over { color: #FF6B6B; }
|
||||
&.over { color: $danger; }
|
||||
}
|
||||
|
||||
.bar-text.over {
|
||||
color: #FF6B6B;
|
||||
color: $danger;
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -22,6 +22,7 @@ const iconStyle = computed(() => ({
|
||||
background: props.selected ? '#FFE8E0' : (props.bgColor || (props.color + '15')),
|
||||
width: (sizeMap[props.size || 'md']) + 'rpx',
|
||||
height: (sizeMap[props.size || 'md']) + 'rpx',
|
||||
boxShadow: props.selected ? '0 0 0 4rpx rgba(255, 140, 105, 0.15)' : 'none',
|
||||
}))
|
||||
|
||||
const fontSize = computed(() => (fontMap[props.size || 'md']) + 'rpx')
|
||||
@@ -42,6 +43,7 @@ const fontSize = computed(() => (fontMap[props.size || 'md']) + 'rpx')
|
||||
}
|
||||
|
||||
.selected {
|
||||
border-color: #FF8C69;
|
||||
border-color: $primary;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -207,10 +207,10 @@ function onConfirm() {
|
||||
|
||||
.key.fn {
|
||||
background: $primary-light;
|
||||
border-color: #FFD0C0;
|
||||
border-color: darken($primary-light, 8%);
|
||||
|
||||
&:active {
|
||||
background: #FFD0C0;
|
||||
background: darken($primary-light, 8%);
|
||||
box-shadow: $shadow-clay-pressed;
|
||||
transform: scale(0.96);
|
||||
}
|
||||
|
||||
@@ -1,8 +1,22 @@
|
||||
<template>
|
||||
<view class="save-success" v-if="visible">
|
||||
<!-- 纸屑粒子 -->
|
||||
<view class="confetti-container" v-if="animating">
|
||||
<view
|
||||
v-for="i in 20"
|
||||
:key="i"
|
||||
class="confetti"
|
||||
:class="`confetti-${i}`"
|
||||
:style="confettiStyle(i)"
|
||||
></view>
|
||||
</view>
|
||||
|
||||
<view class="success-content" :class="{ show: animating }">
|
||||
<view class="success-icon">
|
||||
<Icon name="check" :size="80" color="#FFFFFF" />
|
||||
<view class="success-icon-wrap">
|
||||
<view class="success-ring"></view>
|
||||
<view class="success-icon">
|
||||
<Icon name="check" :size="80" color="#FFFFFF" />
|
||||
</view>
|
||||
</view>
|
||||
<text class="success-text">{{ text }}</text>
|
||||
<view class="success-actions" v-if="showContinue">
|
||||
@@ -31,12 +45,33 @@ const emit = defineEmits(['update:visible', 'continue', 'back'])
|
||||
|
||||
const animating = ref(false)
|
||||
|
||||
// 纸屑样式：随机位置、颜色、动画延迟
|
||||
const confettiColors = ['#FF8C69', '#FFD166', '#7BC67E', '#6C9BCF', '#FF69B4', '#FFB89A']
|
||||
function confettiStyle(i: number) {
|
||||
const angle = (i / 20) * 360
|
||||
const distance = 120 + Math.random() * 200
|
||||
const color = confettiColors[i % confettiColors.length]
|
||||
const delay = Math.random() * 0.3
|
||||
const size = 8 + Math.random() * 12
|
||||
const isRect = i % 3 === 0
|
||||
return {
|
||||
'--tx': `${Math.cos(angle * Math.PI / 180) * distance}rpx`,
|
||||
'--ty': `${Math.sin(angle * Math.PI / 180) * distance - 100}rpx`,
|
||||
'--rot': `${Math.random() * 720 - 360}deg`,
|
||||
background: color,
|
||||
width: isRect ? `${size}rpx` : `${size * 0.6}rpx`,
|
||||
height: `${size}rpx`,
|
||||
borderRadius: isRect ? '2rpx' : '50%',
|
||||
animationDelay: `${delay}s`,
|
||||
}
|
||||
}
|
||||
|
||||
watch(() => props.visible, (val) => {
|
||||
if (val) {
|
||||
setTimeout(() => { animating.value = true }, 50)
|
||||
// 如果不显示继续按钮，自动关闭
|
||||
if (!props.showContinue) {
|
||||
setTimeout(() => { onBack() }, 2000)
|
||||
setTimeout(() => { onBack() }, 2200)
|
||||
}
|
||||
} else {
|
||||
animating.value = false
|
||||
@@ -74,13 +109,44 @@ function onBack() {
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
// 纸屑容器
|
||||
.confetti-container {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.confetti {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
animation: confetti-burst 0.8s cubic-bezier(0.23, 1, 0.32, 1) forwards;
|
||||
}
|
||||
|
||||
@keyframes confetti-burst {
|
||||
0% {
|
||||
transform: translate(0, 0) rotate(0deg) scale(0);
|
||||
opacity: 0;
|
||||
}
|
||||
20% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(1);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.success-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
transform: scale(0.8);
|
||||
opacity: 0;
|
||||
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
z-index: 2;
|
||||
|
||||
&.show {
|
||||
transform: scale(1);
|
||||
@@ -88,12 +154,42 @@ function onBack() {
|
||||
}
|
||||
}
|
||||
|
||||
// 图标外环脉冲
|
||||
.success-icon-wrap {
|
||||
position: relative;
|
||||
@include flex-center;
|
||||
}
|
||||
|
||||
.success-ring {
|
||||
position: absolute;
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
border-radius: 50%;
|
||||
border: 4rpx solid rgba(123, 198, 126, 0.3);
|
||||
animation: ring-pulse 1s ease-out 0.3s both;
|
||||
}
|
||||
|
||||
@keyframes ring-pulse {
|
||||
0% {
|
||||
transform: scale(0.8);
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1.5);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.success-icon {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, $success, #5BA85E);
|
||||
background: linear-gradient(135deg, $success, darken($success, 10%));
|
||||
@include flex-center;
|
||||
box-shadow: 0 8rpx 32rpx rgba(123, 198, 126, 0.4);
|
||||
}
|
||||
|
||||
.success-text {
|
||||
@@ -114,15 +210,16 @@ function onBack() {
|
||||
border-radius: $radius-xl;
|
||||
min-width: 200rpx;
|
||||
@include flex-center;
|
||||
transition: transform $transition-fast, opacity $transition-fast;
|
||||
|
||||
&.continue {
|
||||
background: $primary;
|
||||
&:active { opacity: 0.8; }
|
||||
&:active { opacity: 0.8; transform: scale(0.96); }
|
||||
}
|
||||
|
||||
&.back {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
&:active { background: rgba(255, 255, 255, 0.3); }
|
||||
&:active { background: rgba(255, 255, 255, 0.3); transform: scale(0.96); }
|
||||
}
|
||||
}
|
||||
|
||||
@@ -131,4 +228,10 @@ function onBack() {
|
||||
font-weight: 600;
|
||||
color: $surface;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.confetti { animation: none !important; display: none; }
|
||||
.success-ring { animation: none !important; display: none; }
|
||||
.success-content { transition: opacity 0.2s ease; }
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -19,7 +19,7 @@ const style = computed(() => ({
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.skeleton {
|
||||
background: linear-gradient(90deg, #F0E0D6 25%, #F8EDE4 50%, #F0E0D6 75%);
|
||||
background: linear-gradient(90deg, $border 25%, $surface-warm 50%, $border 75%);
|
||||
background-size: 200% 100%;
|
||||
animation: shimmer 1.5s infinite;
|
||||
border-radius: 8rpx;
|
||||
|
||||
@@ -108,6 +108,8 @@ function onTouchEnd() {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/styles/mixins.scss';
|
||||
|
||||
.tx-item-wrap {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
@@ -121,22 +123,33 @@ function onTouchEnd() {
|
||||
gap: 24rpx;
|
||||
border-radius: 20rpx;
|
||||
transition: transform 0.2s ease;
|
||||
background: #FFFFFF;
|
||||
background: $surface;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
&:active {
|
||||
background: #FFF0E6;
|
||||
background: $surface-warm;
|
||||
}
|
||||
}
|
||||
|
||||
// 左滑提示：首次加载时微微露出删除按钮
|
||||
.tx-item-wrap:first-child .tx-item:not(.no-hint) {
|
||||
animation: swipe-hint 0.6s ease 1.5s both;
|
||||
}
|
||||
|
||||
@keyframes swipe-hint {
|
||||
0% { transform: translateX(0); }
|
||||
40% { transform: translateX(-40rpx); }
|
||||
100% { transform: translateX(0); }
|
||||
}
|
||||
|
||||
.delete-btn {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 160rpx;
|
||||
background: #FF6B6B;
|
||||
background: $danger;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -169,9 +182,9 @@ function onTouchEnd() {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
border-radius: 50%;
|
||||
background: #FFF0E6;
|
||||
background: $primary-light;
|
||||
font-size: 16rpx;
|
||||
color: #FF8C69;
|
||||
color: $primary;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
@@ -185,22 +198,20 @@ function onTouchEnd() {
|
||||
.name {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #2D1B1B;
|
||||
color: $text;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
@include text-ellipsis;
|
||||
}
|
||||
|
||||
.meta {
|
||||
font-size: 24rpx;
|
||||
color: #8B7E7E;
|
||||
color: $text-sec;
|
||||
display: block;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
|
||||
.creator-name {
|
||||
color: #FF8C69;
|
||||
color: $primary;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@@ -211,7 +222,13 @@ function onTouchEnd() {
|
||||
font-variant-numeric: tabular-nums;
|
||||
white-space: nowrap;
|
||||
|
||||
&.expense { color: #2D1B1B; }
|
||||
&.income { color: #7BC67E; }
|
||||
&.expense { color: $text; }
|
||||
&.income { color: $success; }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.tx-item-wrap:first-child .tx-item {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -328,7 +328,11 @@ function goBack() {
|
||||
|
||||
.title { font-size: $font-xl; font-weight: 500; color: $text; }
|
||||
|
||||
.type-toggle-wrap { display: flex; justify-content: center; margin: $space-sm 0; }
|
||||
.type-toggle-wrap {
|
||||
display: flex; justify-content: center;
|
||||
margin: $space-sm 0;
|
||||
@include fade-in-up;
|
||||
}
|
||||
|
||||
.type-toggle {
|
||||
display: inline-flex;
|
||||
@@ -363,7 +367,7 @@ function goBack() {
|
||||
background: $surface;
|
||||
border-radius: $radius-lg;
|
||||
box-shadow: $shadow-sm;
|
||||
transition: transform $transition-normal;
|
||||
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.income .slider { transform: translateX(160rpx); }
|
||||
@@ -387,8 +391,9 @@ function goBack() {
|
||||
gap: 6rpx;
|
||||
padding: 12rpx 0;
|
||||
position: relative;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
|
||||
&:active { transform: scale(0.95); }
|
||||
&:active { transform: scale(0.92); }
|
||||
|
||||
&.suggested {
|
||||
.cat-icon-wrap {
|
||||
@@ -396,10 +401,16 @@ function goBack() {
|
||||
border-radius: $radius-lg;
|
||||
padding: 6rpx;
|
||||
margin: -6rpx;
|
||||
animation: suggest-pulse 2s ease-in-out infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes suggest-pulse {
|
||||
0%, 100% { border-color: $primary; }
|
||||
50% { border-color: lighten($primary, 30%); }
|
||||
}
|
||||
|
||||
.cat-icon-wrap {
|
||||
position: relative;
|
||||
transition: all $transition-normal;
|
||||
|
||||
@@ -45,13 +45,22 @@
|
||||
<text class="section-title">我的群组</text>
|
||||
</view>
|
||||
|
||||
<view v-if="groupStore.loading" class="loading-box">
|
||||
<text class="loading-text">加载中...</text>
|
||||
<view v-if="groupStore.loading" class="skeleton-list">
|
||||
<view v-for="i in 2" :key="i" class="skeleton-card">
|
||||
<Skeleton width="80rpx" height="80rpx" variant="circle" />
|
||||
<view class="skeleton-info">
|
||||
<Skeleton width="200rpx" height="28rpx" variant="text" />
|
||||
<Skeleton width="280rpx" height="24rpx" variant="text" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-else-if="groupStore.groups.length === 0" class="empty-box">
|
||||
<Icon name="user" :size="48" color="#BFB3B3" />
|
||||
<view class="empty-icon-wrap">
|
||||
<Icon name="user" :size="48" color="#BFB3B3" />
|
||||
</view>
|
||||
<text class="empty-text">还没有加入任何群组</text>
|
||||
<text class="empty-hint">创建或加入一个群组，和家人朋友一起记账</text>
|
||||
</view>
|
||||
|
||||
<view v-else class="group-list">
|
||||
@@ -147,6 +156,7 @@ import { waitForReady } from '@/utils/app-ready'
|
||||
import { statusBarHeight, capsuleRight } from '@/utils/system'
|
||||
import { API_BASE } from '@/config'
|
||||
import Icon from '@/components/Icon/Icon.vue'
|
||||
import Skeleton from '@/components/Skeleton/Skeleton.vue'
|
||||
import type { GroupMember, Group } from '@/api/group'
|
||||
|
||||
const groupStore = useGroupStore()
|
||||
@@ -473,7 +483,20 @@ function handleDissolve(group: Group) {
|
||||
color: $text-sec;
|
||||
}
|
||||
|
||||
.loading-box, .empty-box {
|
||||
// 骨架屏
|
||||
.skeleton-list { padding: 0 $space-xl; }
|
||||
.skeleton-card {
|
||||
display: flex; align-items: center; gap: $space-md;
|
||||
padding: $space-lg; margin-bottom: $space-sm;
|
||||
background: $surface; border-radius: $radius-xl;
|
||||
border: 2rpx solid $border;
|
||||
}
|
||||
.skeleton-info {
|
||||
flex: 1; display: flex; flex-direction: column; gap: $space-xs;
|
||||
}
|
||||
|
||||
// 空状态
|
||||
.empty-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
@@ -482,8 +505,20 @@ function handleDissolve(group: Group) {
|
||||
padding: 80rpx 0;
|
||||
}
|
||||
|
||||
.loading-text, .empty-text {
|
||||
font-size: $font-lg;
|
||||
.empty-icon-wrap {
|
||||
width: 120rpx; height: 120rpx; border-radius: 50%;
|
||||
background: $surface-warm; @include flex-center;
|
||||
margin-bottom: $space-sm;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: $font-xl;
|
||||
font-weight: 600;
|
||||
color: $text;
|
||||
}
|
||||
|
||||
.empty-hint {
|
||||
font-size: $font-md;
|
||||
color: $text-muted;
|
||||
}
|
||||
|
||||
|
||||
@@ -364,6 +364,7 @@ function goBills() {
|
||||
padding: $space-2xl;
|
||||
@include card($radius-2xl);
|
||||
box-shadow: $shadow-clay;
|
||||
@include fade-in-up;
|
||||
}
|
||||
|
||||
.card-label {
|
||||
@@ -393,6 +394,7 @@ function goBills() {
|
||||
font-weight: 600;
|
||||
color: $text;
|
||||
font-variant-numeric: tabular-nums;
|
||||
@include count-up;
|
||||
}
|
||||
|
||||
.mini-stats {
|
||||
@@ -434,6 +436,7 @@ function goBills() {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $space-md;
|
||||
@include fade-in-up(0.1s);
|
||||
}
|
||||
|
||||
.today-item {
|
||||
@@ -475,6 +478,7 @@ function goBills() {
|
||||
gap: $space-md;
|
||||
padding: 0 $space-xl;
|
||||
margin-top: $space-xl;
|
||||
@include fade-in-up(0.15s);
|
||||
}
|
||||
|
||||
.quick-btn {
|
||||
@@ -485,9 +489,10 @@ function goBills() {
|
||||
flex-direction: column;
|
||||
@include flex-center;
|
||||
gap: $space-xs;
|
||||
transition: transform $transition-fast, box-shadow $transition-fast;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.97);
|
||||
transform: scale(0.94);
|
||||
box-shadow: $shadow-clay-pressed;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -23,13 +23,23 @@
|
||||
</view>
|
||||
|
||||
<!-- 通知列表 -->
|
||||
<view v-if="loading && list.length === 0" class="loading-box">
|
||||
<text class="loading-text">加载中...</text>
|
||||
<view v-if="loading && list.length === 0" class="skeleton-list">
|
||||
<view v-for="i in 4" :key="i" class="skeleton-notif">
|
||||
<Skeleton width="64rpx" height="64rpx" variant="circle" />
|
||||
<view class="skeleton-info">
|
||||
<Skeleton width="240rpx" height="28rpx" variant="text" />
|
||||
<Skeleton width="400rpx" height="24rpx" variant="text" />
|
||||
<Skeleton width="120rpx" height="20rpx" variant="text" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-else-if="list.length === 0" class="empty-box">
|
||||
<Icon name="bell" :size="48" color="#BFB3B3" />
|
||||
<view class="empty-icon-wrap">
|
||||
<Icon name="bell" :size="48" color="#BFB3B3" />
|
||||
</view>
|
||||
<text class="empty-text">暂无通知</text>
|
||||
<text class="empty-hint">新的通知会在这里显示</text>
|
||||
</view>
|
||||
|
||||
<view v-else class="notification-list">
|
||||
@@ -87,6 +97,7 @@ import { getNotifications, markRead, markAllRead, getNotificationImageUrl } from
|
||||
import { waitForReady } from '@/utils/app-ready'
|
||||
import { statusBarHeight, capsuleRight } from '@/utils/system'
|
||||
import Icon from '@/components/Icon/Icon.vue'
|
||||
import Skeleton from '@/components/Skeleton/Skeleton.vue'
|
||||
import type { Notification } from '@/api/notification'
|
||||
|
||||
const notifStore = useNotificationStore()
|
||||
@@ -305,7 +316,20 @@ onReachBottom(() => {
|
||||
}
|
||||
}
|
||||
|
||||
.loading-box, .empty-box {
|
||||
// 骨架屏
|
||||
.skeleton-list { padding: 0 $space-xl; }
|
||||
.skeleton-notif {
|
||||
display: flex; align-items: flex-start; gap: $space-lg;
|
||||
padding: $space-lg; margin-bottom: $space-sm;
|
||||
background: $surface; border-radius: $radius-xl;
|
||||
border: 2rpx solid $border;
|
||||
}
|
||||
.skeleton-info {
|
||||
flex: 1; display: flex; flex-direction: column; gap: $space-xs;
|
||||
}
|
||||
|
||||
// 空状态
|
||||
.empty-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
@@ -313,8 +337,20 @@ onReachBottom(() => {
|
||||
padding: 120rpx 0;
|
||||
}
|
||||
|
||||
.loading-text, .empty-text {
|
||||
font-size: $font-lg;
|
||||
.empty-icon-wrap {
|
||||
width: 120rpx; height: 120rpx; border-radius: 50%;
|
||||
background: $surface-warm; @include flex-center;
|
||||
margin-bottom: $space-sm;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: $font-xl;
|
||||
font-weight: 600;
|
||||
color: $text;
|
||||
}
|
||||
|
||||
.empty-hint {
|
||||
font-size: $font-md;
|
||||
color: $text-muted;
|
||||
}
|
||||
|
||||
|
||||
@@ -20,15 +20,25 @@
|
||||
</view>
|
||||
|
||||
<!-- 加载/空/列表 -->
|
||||
<view v-if="loading" class="loading-box">
|
||||
<text class="loading-text">加载中...</text>
|
||||
<view v-if="loading" class="skeleton-list">
|
||||
<view v-for="i in 3" :key="i" class="skeleton-card">
|
||||
<Skeleton width="88rpx" height="88rpx" variant="circle" />
|
||||
<view class="skeleton-info">
|
||||
<Skeleton width="200rpx" height="28rpx" variant="text" />
|
||||
<Skeleton width="300rpx" height="24rpx" variant="text" />
|
||||
</view>
|
||||
<Skeleton width="120rpx" height="32rpx" variant="rect" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-else-if="list.length === 0" class="empty-box">
|
||||
<Icon name="edit" :size="48" color="#BFB3B3" />
|
||||
<view class="empty-icon-wrap">
|
||||
<Icon name="edit" :size="48" color="#BFB3B3" />
|
||||
</view>
|
||||
<text class="empty-text">暂无周期账单</text>
|
||||
<text class="empty-hint">设置房租、订阅、工资等定期收支</text>
|
||||
<view class="empty-btn" @tap="openAddModal">
|
||||
<Icon name="plus" :size="24" color="#FFFFFF" />
|
||||
<text class="empty-btn-text">添加周期账单</text>
|
||||
</view>
|
||||
</view>
|
||||
@@ -162,6 +172,7 @@ import { getRecurringTemplates, createRecurringTemplate, updateRecurringTemplate
|
||||
import Icon from '@/components/Icon/Icon.vue'
|
||||
import CategoryIcon from '@/components/CategoryIcon/CategoryIcon.vue'
|
||||
import AmountEditor from '@/components/AmountEditor/AmountEditor.vue'
|
||||
import Skeleton from '@/components/Skeleton/Skeleton.vue'
|
||||
import type { RecurringTemplate } from '@/api/recurring'
|
||||
|
||||
const catStore = useCategoryStore()
|
||||
@@ -361,16 +372,35 @@ function goBack() { uni.navigateBack() }
|
||||
}
|
||||
.sync-text { font-size: $font-md; color: #43A047; font-weight: 500; }
|
||||
|
||||
.loading-box, .empty-box {
|
||||
// 骨架屏
|
||||
.skeleton-list { padding: 0 $space-xl; }
|
||||
.skeleton-card {
|
||||
display: flex; align-items: center; gap: $space-md;
|
||||
padding: $space-lg; margin-bottom: $space-sm;
|
||||
background: $surface; border-radius: $radius-xl;
|
||||
border: 2rpx solid $border;
|
||||
}
|
||||
.skeleton-info {
|
||||
flex: 1; display: flex; flex-direction: column; gap: $space-xs;
|
||||
}
|
||||
|
||||
// 空状态
|
||||
.empty-box {
|
||||
display: flex; flex-direction: column; align-items: center;
|
||||
padding: 120rpx 0; gap: $space-sm;
|
||||
}
|
||||
.loading-text, .empty-text { font-size: $font-lg; color: $text-muted; }
|
||||
.empty-icon-wrap {
|
||||
width: 120rpx; height: 120rpx; border-radius: 50%;
|
||||
background: $surface-warm; @include flex-center;
|
||||
margin-bottom: $space-sm;
|
||||
}
|
||||
.empty-text { font-size: $font-xl; font-weight: 600; color: $text; }
|
||||
.empty-hint { font-size: $font-md; color: $text-muted; margin-top: -$space-xs; }
|
||||
.empty-btn {
|
||||
margin-top: $space-lg; padding: $space-sm $space-xl;
|
||||
background: $primary; border-radius: $radius-lg;
|
||||
&:active { opacity: 0.8; }
|
||||
background: linear-gradient(135deg, $primary, $primary-dark);
|
||||
border-radius: $radius-lg; display: flex; align-items: center; gap: $space-xs;
|
||||
&:active { opacity: 0.8; transform: scale(0.96); }
|
||||
}
|
||||
.empty-btn-text { font-size: $font-base; color: $surface; font-weight: 600; }
|
||||
|
||||
|
||||
@@ -247,3 +247,65 @@
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
// ===== 入场动画 =====
|
||||
|
||||
// 卡片淡入上浮
|
||||
@mixin fade-in-up($delay: 0s) {
|
||||
animation: fadeInUp 0.4s cubic-bezier(0.23, 1, 0.32, 1) $delay both;
|
||||
}
|
||||
|
||||
// 列表项交错淡入
|
||||
@mixin stagger-item($index: 0, $base-delay: 0.05s) {
|
||||
opacity: 0;
|
||||
animation: fadeInUp 0.35s cubic-bezier(0.23, 1, 0.32, 1) ($index * $base-delay) both;
|
||||
}
|
||||
|
||||
// 数字跳动
|
||||
@mixin count-up {
|
||||
animation: countPulse 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
|
||||
// 弹性缩放
|
||||
@mixin bounce-in($delay: 0s) {
|
||||
animation: bounceIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) $delay both;
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(24rpx);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bounceIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.85);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes countPulse {
|
||||
0% { transform: scale(1); }
|
||||
40% { transform: scale(1.08); }
|
||||
100% { transform: scale(1); }
|
||||
}
|
||||
|
||||
// 尊重减弱动画偏好
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.fade-in-up,
|
||||
.stagger-item,
|
||||
.bounce-in {
|
||||
animation: none !important;
|
||||
opacity: 1 !important;
|
||||
transform: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user