refactor: UI/UX 全面重构 — 设计系统统一
设计系统： - uni.scss 扩展：间距/圆角/字体/阴影/动画 token 体系 - 新建 styles/mixins.scss：20+ 公共 mixin 页面重构（12 个页面）： - 首页/记账/统计/账单/个人中心/预算/分类管理 - 群组管理/通知中心/管理员/用户管理/编辑资料 所有硬编码替换为设计 token： - 颜色：#FFF8F0→$bg, #FFFFFF→$surface, #FF8C69→$primary 等 - 间距：40rpx→$space-xl, 24rpx→$space-md 等 - 字体：28rpx→$font-lg, 24rpx→$font-md 等 - 圆角：20rpx→$radius-lg, 40rpx→$radius-2xl 等 - 阴影：统一使用 $shadow-md/$shadow-sm 重复样式提取为 mixin： - page-base, sticky-header, nav-bar, card, modal-mask - tabs, tab, state-box, shimmer, flex-center 等
This commit is contained in:
wangxiaogang
@@ -49,10 +49,15 @@ onLaunch(() => {
|
||||
<style lang="scss">
|
||||
@import './uni.scss';
|
||||
|
||||
// 全局盒模型
|
||||
view, text, image, input, textarea, scroll-view, picker {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
page {
|
||||
background-color: #FFF8F0;
|
||||
background-color: $bg;
|
||||
font-family: 'Nunito', 'PingFang SC', sans-serif;
|
||||
color: #2D1B1B;
|
||||
color: $text;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -216,51 +216,44 @@ function goBack() {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/styles/mixins.scss';
|
||||
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background: #FFF8F0;
|
||||
@include page-base;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.header-fixed {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
background: #FFF8F0;
|
||||
@include sticky-header;
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
background: #FFF8F0;
|
||||
@include status-bar;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
@include nav-bar;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16rpx 40rpx;
|
||||
}
|
||||
|
||||
.nav-back {
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@include nav-back;
|
||||
border-radius: 50%;
|
||||
|
||||
&:active { background: #F0E0D6; }
|
||||
&:active { background: $border; }
|
||||
}
|
||||
|
||||
.title { font-size: 32rpx; font-weight: 500; color: #2D1B1B; }
|
||||
.title { font-size: $font-xl; font-weight: 500; color: $text; }
|
||||
|
||||
.type-toggle-wrap { display: flex; justify-content: center; margin: 16rpx 0; }
|
||||
.type-toggle-wrap { display: flex; justify-content: center; margin: $space-sm 0; }
|
||||
|
||||
.type-toggle {
|
||||
display: inline-flex;
|
||||
background: #FFF0E6;
|
||||
border-radius: 24rpx;
|
||||
padding: 8rpx;
|
||||
background: $surface-warm;
|
||||
border-radius: $radius-lg;
|
||||
padding: $space-xs;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@@ -270,48 +263,48 @@ function goBack() {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 28rpx;
|
||||
color: #8B7E7E;
|
||||
border-radius: 20rpx;
|
||||
font-size: $font-lg;
|
||||
color: $text-sec;
|
||||
border-radius: $radius-lg;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
transition: color 0.2s;
|
||||
transition: color $transition-normal;
|
||||
|
||||
&.active { color: #FF8C69; font-weight: 600; }
|
||||
&.active { color: $primary; font-weight: 600; }
|
||||
}
|
||||
|
||||
.slider {
|
||||
position: absolute;
|
||||
top: 8rpx;
|
||||
left: 8rpx;
|
||||
top: $space-xs;
|
||||
left: $space-xs;
|
||||
width: 160rpx;
|
||||
height: 72rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 20rpx;
|
||||
box-shadow: 2rpx 2rpx 8rpx rgba(45, 27, 27, 0.08);
|
||||
transition: transform 0.2s;
|
||||
background: $surface;
|
||||
border-radius: $radius-lg;
|
||||
box-shadow: $shadow-sm;
|
||||
transition: transform $transition-normal;
|
||||
}
|
||||
|
||||
.income .slider { transform: translateX(160rpx); }
|
||||
|
||||
.amount-display {
|
||||
text-align: center;
|
||||
padding: 32rpx 40rpx 24rpx;
|
||||
padding: $space-lg $space-xl $space-md;
|
||||
}
|
||||
|
||||
.currency {
|
||||
font-family: 'Fredoka', sans-serif;
|
||||
font-size: 48rpx;
|
||||
font-size: $space-2xl;
|
||||
font-weight: 500;
|
||||
color: #BFB3B3;
|
||||
margin-right: 8rpx;
|
||||
color: $text-muted;
|
||||
margin-right: $space-xs;
|
||||
}
|
||||
|
||||
.digits {
|
||||
font-family: 'Fredoka', sans-serif;
|
||||
font-size: 88rpx;
|
||||
font-weight: 700;
|
||||
color: #2D1B1B;
|
||||
color: $text;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
@@ -319,7 +312,7 @@ function goBack() {
|
||||
font-family: 'Fredoka', monospace;
|
||||
font-size: 88rpx;
|
||||
font-weight: 300;
|
||||
color: #FF8C69;
|
||||
color: $primary;
|
||||
animation: blink 1s step-end infinite;
|
||||
}
|
||||
|
||||
@@ -334,8 +327,8 @@ function goBack() {
|
||||
.category-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 16rpx;
|
||||
padding: 8rpx 0;
|
||||
gap: $space-sm;
|
||||
padding: $space-xs 0;
|
||||
}
|
||||
|
||||
.cat-item {
|
||||
@@ -348,15 +341,15 @@ function goBack() {
|
||||
&:active { transform: scale(0.95); }
|
||||
}
|
||||
|
||||
.cat-name { font-size: 22rpx; color: #8B7E7E; }
|
||||
.cat-name { font-size: $font-sm; color: $text-sec; }
|
||||
|
||||
.cat-name.active {
|
||||
color: #FF8C69;
|
||||
color: $primary;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.extra-fields {
|
||||
padding: 16rpx 40rpx;
|
||||
padding: $space-sm $space-xl;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12rpx;
|
||||
@@ -364,19 +357,19 @@ function goBack() {
|
||||
|
||||
.extra-row {
|
||||
height: 88rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 20rpx;
|
||||
border: 2rpx solid #F0E0D6;
|
||||
padding: 0 24rpx;
|
||||
background: $surface;
|
||||
border-radius: $radius-lg;
|
||||
border: 2rpx solid $border;
|
||||
padding: 0 $space-md;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.extra-text { font-size: 28rpx; color: #2D1B1B; flex: 1; }
|
||||
.extra-input { font-size: 28rpx; color: #2D1B1B; flex: 1; }
|
||||
.extra-text { font-size: $font-lg; color: $text; flex: 1; }
|
||||
.extra-input { font-size: $font-lg; color: $text; flex: 1; }
|
||||
|
||||
.placeholder { color: #BFB3B3; }
|
||||
.placeholder { color: $text-muted; }
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.cursor {
|
||||
|
||||
@@ -220,42 +220,34 @@ async function handlePublish() {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/styles/mixins.scss';
|
||||
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background: #FFF8F0;
|
||||
padding: 0 0 180rpx;
|
||||
@include page-base;
|
||||
}
|
||||
|
||||
.header-fixed {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
background: #FFF8F0;
|
||||
@include sticky-header;
|
||||
}
|
||||
|
||||
.status-bar { background: #FFF8F0; }
|
||||
.status-bar { @include status-bar; }
|
||||
|
||||
.nav-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 16rpx 40rpx 24rpx;
|
||||
padding: $space-sm $space-xl $space-md;
|
||||
}
|
||||
|
||||
.nav-back {
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
&:active { opacity: 0.6; }
|
||||
@include nav-back;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 36rpx;
|
||||
font-size: $font-2xl;
|
||||
font-weight: 600;
|
||||
color: #2D1B1B;
|
||||
color: $text;
|
||||
}
|
||||
|
||||
.nav-placeholder { width: 88rpx; }
|
||||
@@ -268,60 +260,60 @@ async function handlePublish() {
|
||||
}
|
||||
|
||||
.loading-text {
|
||||
font-size: 28rpx;
|
||||
color: #BFB3B3;
|
||||
font-size: $font-lg;
|
||||
color: $text-muted;
|
||||
}
|
||||
|
||||
.content { padding: 0 40rpx; }
|
||||
.content { padding: 0 $space-xl; }
|
||||
|
||||
.metric-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 16rpx;
|
||||
margin-bottom: 32rpx;
|
||||
gap: $space-sm;
|
||||
margin-bottom: $space-lg;
|
||||
}
|
||||
|
||||
.metric-card {
|
||||
background: #FFFFFF;
|
||||
border-radius: 28rpx;
|
||||
padding: 28rpx 24rpx;
|
||||
border: 2rpx solid #F0E0D6;
|
||||
box-shadow: 4rpx 4rpx 12rpx rgba(45, 27, 27, 0.08);
|
||||
background: $surface;
|
||||
border-radius: $radius-xl;
|
||||
padding: $font-lg $space-md;
|
||||
border: 2rpx solid $border;
|
||||
box-shadow: $shadow-md;
|
||||
}
|
||||
|
||||
.metric-value {
|
||||
font-family: 'Fredoka', sans-serif;
|
||||
font-size: 40rpx;
|
||||
font-size: $font-3xl;
|
||||
font-weight: 600;
|
||||
color: #2D1B1B;
|
||||
color: $text;
|
||||
display: block;
|
||||
|
||||
&.up { color: #7BC67E; }
|
||||
&.down { color: #FF6B6B; }
|
||||
&.up { color: $success; }
|
||||
&.down { color: $danger; }
|
||||
}
|
||||
|
||||
.metric-label {
|
||||
font-size: 24rpx;
|
||||
color: #8B7E7E;
|
||||
font-size: $font-md;
|
||||
color: $text-sec;
|
||||
display: block;
|
||||
margin-top: 8rpx;
|
||||
margin-top: $space-xs;
|
||||
}
|
||||
|
||||
.detail-card {
|
||||
background: #FFFFFF;
|
||||
border-radius: 28rpx;
|
||||
padding: 32rpx;
|
||||
border: 2rpx solid #F0E0D6;
|
||||
box-shadow: 4rpx 4rpx 12rpx rgba(45, 27, 27, 0.08);
|
||||
margin-bottom: 32rpx;
|
||||
background: $surface;
|
||||
border-radius: $radius-xl;
|
||||
padding: $space-lg;
|
||||
border: 2rpx solid $border;
|
||||
box-shadow: $shadow-md;
|
||||
margin-bottom: $space-lg;
|
||||
}
|
||||
|
||||
.detail-title {
|
||||
font-size: 28rpx;
|
||||
font-size: $font-lg;
|
||||
font-weight: 600;
|
||||
color: #2D1B1B;
|
||||
color: $text;
|
||||
display: block;
|
||||
margin-bottom: 20rpx;
|
||||
margin-bottom: $space-lg;
|
||||
}
|
||||
|
||||
.detail-row {
|
||||
@@ -335,65 +327,57 @@ async function handlePublish() {
|
||||
}
|
||||
|
||||
.detail-label {
|
||||
font-size: 26rpx;
|
||||
color: #8B7E7E;
|
||||
font-size: $font-base;
|
||||
color: $text-sec;
|
||||
}
|
||||
|
||||
.detail-value {
|
||||
font-family: 'Fredoka', sans-serif;
|
||||
font-size: 26rpx;
|
||||
font-size: $font-base;
|
||||
font-weight: 500;
|
||||
color: #2D1B1B;
|
||||
color: $text;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 28rpx;
|
||||
font-size: $font-lg;
|
||||
font-weight: 600;
|
||||
color: #2D1B1B;
|
||||
margin-bottom: 16rpx;
|
||||
color: $text;
|
||||
margin-bottom: $space-sm;
|
||||
}
|
||||
|
||||
.entry-list { margin-bottom: 32rpx; }
|
||||
.entry-list { margin-bottom: $space-lg; }
|
||||
|
||||
.entry-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20rpx;
|
||||
padding: 28rpx 32rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 28rpx;
|
||||
border: 2rpx solid #F0E0D6;
|
||||
box-shadow: 4rpx 4rpx 12rpx rgba(45, 27, 27, 0.08);
|
||||
margin-bottom: 16rpx;
|
||||
gap: $space-lg;
|
||||
padding: $font-lg $space-lg;
|
||||
background: $surface;
|
||||
border-radius: $radius-xl;
|
||||
border: 2rpx solid $border;
|
||||
box-shadow: $shadow-md;
|
||||
margin-bottom: $space-sm;
|
||||
|
||||
&:active { background: #FFF8F0; }
|
||||
&:active { background: $bg; }
|
||||
}
|
||||
|
||||
.entry-text {
|
||||
flex: 1;
|
||||
font-size: 28rpx;
|
||||
font-size: $font-lg;
|
||||
font-weight: 500;
|
||||
color: #2D1B1B;
|
||||
color: $text;
|
||||
}
|
||||
|
||||
/* 发布公告弹窗 */
|
||||
.modal-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
z-index: 200;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
@include modal-mask;
|
||||
}
|
||||
|
||||
.publish-modal {
|
||||
width: 100%;
|
||||
max-height: 85vh;
|
||||
background: #FFFFFF;
|
||||
border-radius: 40rpx 40rpx 0 0;
|
||||
background: $surface;
|
||||
border-radius: $radius-2xl $radius-2xl 0 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
@@ -402,14 +386,14 @@ async function handlePublish() {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 32rpx 40rpx 24rpx;
|
||||
border-bottom: 2rpx solid #F0E0D6;
|
||||
padding: $space-lg $space-xl $space-md;
|
||||
border-bottom: 2rpx solid $border;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: 32rpx;
|
||||
font-size: $font-xl;
|
||||
font-weight: 600;
|
||||
color: #2D1B1B;
|
||||
color: $text;
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
@@ -419,61 +403,58 @@ async function handlePublish() {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
background: #F0E0D6;
|
||||
&:active { background: #E0D6D0; }
|
||||
background: $border;
|
||||
&:active { background: darken($border, 5%); }
|
||||
}
|
||||
|
||||
.modal-close-text {
|
||||
font-size: 36rpx;
|
||||
color: #8B7E7E;
|
||||
font-size: $font-2xl;
|
||||
color: $text-sec;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
flex: 1;
|
||||
padding: 24rpx 40rpx;
|
||||
padding: $space-md $space-xl;
|
||||
max-height: 60vh;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 24rpx;
|
||||
margin-bottom: $space-md;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
font-size: 26rpx;
|
||||
font-size: $font-base;
|
||||
font-weight: 600;
|
||||
color: #2D1B1B;
|
||||
color: $text;
|
||||
display: block;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
padding: 0 24rpx;
|
||||
background: #FFF8F0;
|
||||
border-radius: 20rpx;
|
||||
border: 2rpx solid #F0E0D6;
|
||||
font-size: 28rpx;
|
||||
color: #2D1B1B;
|
||||
box-sizing: border-box;
|
||||
padding: 0 $space-md;
|
||||
background: $bg;
|
||||
border-radius: $radius-lg;
|
||||
border: 2rpx solid $border;
|
||||
font-size: $font-lg;
|
||||
color: $text;
|
||||
}
|
||||
|
||||
.form-textarea {
|
||||
width: 100%;
|
||||
height: 200rpx;
|
||||
padding: 16rpx 24rpx;
|
||||
background: #FFF8F0;
|
||||
border-radius: 20rpx;
|
||||
border: 2rpx solid #F0E0D6;
|
||||
font-size: 28rpx;
|
||||
color: #2D1B1B;
|
||||
box-sizing: border-box;
|
||||
padding: $space-sm $space-md;
|
||||
background: $bg;
|
||||
border-radius: $radius-lg;
|
||||
border: 2rpx solid $border;
|
||||
font-size: $font-lg;
|
||||
color: $text;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
gap: 24rpx;
|
||||
gap: $space-md;
|
||||
}
|
||||
|
||||
.switch-item {
|
||||
@@ -481,17 +462,17 @@ async function handlePublish() {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16rpx 20rpx;
|
||||
background: #FFF8F0;
|
||||
border-radius: 16rpx;
|
||||
border: 2rpx solid #F0E0D6;
|
||||
padding: $space-sm $space-lg;
|
||||
background: $bg;
|
||||
border-radius: $radius-md;
|
||||
border: 2rpx solid $border;
|
||||
|
||||
&:active { background: #F0E0D6; }
|
||||
&:active { background: $border; }
|
||||
}
|
||||
|
||||
.switch-label {
|
||||
font-size: 26rpx;
|
||||
color: #2D1B1B;
|
||||
font-size: $font-base;
|
||||
color: $text;
|
||||
}
|
||||
|
||||
.switch-toggle {
|
||||
@@ -500,9 +481,9 @@ async function handlePublish() {
|
||||
border-radius: 12rpx;
|
||||
background: #D0C4C4;
|
||||
position: relative;
|
||||
transition: background 0.2s;
|
||||
transition: background $transition-normal;
|
||||
|
||||
&.on { background: #FF8C69; }
|
||||
&.on { background: $primary; }
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
@@ -512,16 +493,16 @@ async function handlePublish() {
|
||||
width: 20rpx;
|
||||
height: 20rpx;
|
||||
border-radius: 50%;
|
||||
background: #FFFFFF;
|
||||
transition: transform 0.2s;
|
||||
background: $surface;
|
||||
transition: transform $transition-normal;
|
||||
}
|
||||
|
||||
&.on::after { transform: translateX(20rpx); }
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
padding: 24rpx 40rpx 40rpx;
|
||||
border-top: 2rpx solid #F0E0D6;
|
||||
padding: $space-md $space-xl $space-xl;
|
||||
border-top: 2rpx solid $border;
|
||||
}
|
||||
|
||||
.publish-btn-text {
|
||||
@@ -529,10 +510,10 @@ async function handlePublish() {
|
||||
text-align: center;
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #FFFFFF;
|
||||
padding: 20rpx;
|
||||
background: linear-gradient(135deg, #FF8C69, #E67355);
|
||||
border-radius: 20rpx;
|
||||
color: $surface;
|
||||
padding: $space-lg;
|
||||
background: linear-gradient(135deg, $primary, #E67355);
|
||||
border-radius: $radius-lg;
|
||||
|
||||
&:active { opacity: 0.8; }
|
||||
}
|
||||
@@ -541,19 +522,19 @@ async function handlePublish() {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
border: 2rpx dashed #D0C4C4;
|
||||
border-radius: 16rpx;
|
||||
border-radius: $radius-md;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8rpx;
|
||||
gap: $space-xs;
|
||||
|
||||
&:active { background: #FFF8F0; }
|
||||
&:active { background: $bg; }
|
||||
}
|
||||
|
||||
.upload-text {
|
||||
font-size: 24rpx;
|
||||
color: #BFB3B3;
|
||||
font-size: $font-md;
|
||||
color: $text-muted;
|
||||
}
|
||||
|
||||
.image-preview {
|
||||
@@ -565,7 +546,7 @@ async function handlePublish() {
|
||||
.preview-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 16rpx;
|
||||
border-radius: $radius-md;
|
||||
}
|
||||
|
||||
.image-remove {
|
||||
@@ -574,7 +555,7 @@ async function handlePublish() {
|
||||
right: -12rpx;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
background: #FF6B6B;
|
||||
background: $danger;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -582,8 +563,8 @@ async function handlePublish() {
|
||||
}
|
||||
|
||||
.image-remove-text {
|
||||
font-size: 28rpx;
|
||||
color: #FFFFFF;
|
||||
font-size: $font-lg;
|
||||
color: $surface;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
@@ -591,6 +572,6 @@ async function handlePublish() {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.placeholder { color: #BFB3B3; }
|
||||
.placeholder { color: $text-muted; }
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -162,86 +162,77 @@ onReachBottom(() => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/styles/mixins.scss';
|
||||
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background: #FFF8F0;
|
||||
padding: 0 0 180rpx;
|
||||
@include page-base;
|
||||
}
|
||||
|
||||
.header-fixed {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
background: #FFF8F0;
|
||||
@include sticky-header;
|
||||
}
|
||||
|
||||
.status-bar { background: #FFF8F0; }
|
||||
.status-bar { @include status-bar; }
|
||||
|
||||
.nav-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 16rpx 40rpx 24rpx;
|
||||
padding: $space-sm $space-xl $space-md;
|
||||
}
|
||||
|
||||
.nav-back {
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
&:active { opacity: 0.6; }
|
||||
@include nav-back;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 36rpx;
|
||||
font-size: $font-2xl;
|
||||
font-weight: 600;
|
||||
color: #2D1B1B;
|
||||
color: $text;
|
||||
}
|
||||
|
||||
.nav-placeholder { width: 88rpx; }
|
||||
|
||||
.search-bar {
|
||||
padding: 0 40rpx 24rpx;
|
||||
padding: 0 $space-xl $space-md;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 100%;
|
||||
height: 72rpx;
|
||||
padding: 0 24rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 20rpx;
|
||||
border: 2rpx solid #F0E0D6;
|
||||
font-size: 28rpx;
|
||||
color: #2D1B1B;
|
||||
padding: 0 $space-md;
|
||||
background: $surface;
|
||||
border-radius: $radius-lg;
|
||||
border: 2rpx solid $border;
|
||||
font-size: $font-lg;
|
||||
color: $text;
|
||||
}
|
||||
|
||||
.loading-box, .empty-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
gap: $space-sm;
|
||||
padding: 120rpx 0;
|
||||
}
|
||||
|
||||
.loading-text, .empty-text {
|
||||
font-size: 28rpx;
|
||||
color: #BFB3B3;
|
||||
font-size: $font-lg;
|
||||
color: $text-muted;
|
||||
}
|
||||
|
||||
.user-list { padding: 0 40rpx; }
|
||||
.user-list { padding: 0 $space-xl; }
|
||||
|
||||
.user-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 20rpx;
|
||||
padding: 24rpx 28rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 28rpx;
|
||||
border: 2rpx solid #F0E0D6;
|
||||
box-shadow: 4rpx 4rpx 12rpx rgba(45, 27, 27, 0.08);
|
||||
margin-bottom: 16rpx;
|
||||
gap: $space-lg;
|
||||
padding: $space-md $font-lg;
|
||||
background: $surface;
|
||||
border-radius: $radius-xl;
|
||||
border: 2rpx solid $border;
|
||||
box-shadow: $shadow-md;
|
||||
margin-bottom: $space-sm;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@ -249,7 +240,7 @@ onReachBottom(() => {
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
border-radius: 50%;
|
||||
background: #F0E0D6;
|
||||
background: $border;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@@ -262,9 +253,9 @@ onReachBottom(() => {
|
||||
}
|
||||
|
||||
.user-name {
|
||||
font-size: 28rpx;
|
||||
font-size: $font-lg;
|
||||
font-weight: 600;
|
||||
color: #2D1B1B;
|
||||
color: $text;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
@@ -272,24 +263,24 @@ onReachBottom(() => {
|
||||
|
||||
.role-tag {
|
||||
padding: 2rpx 12rpx;
|
||||
border-radius: 8rpx;
|
||||
border-radius: $radius-xs;
|
||||
}
|
||||
|
||||
.role-tag-text {
|
||||
font-size: 20rpx;
|
||||
font-size: $font-xs;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.user-meta {
|
||||
font-size: 24rpx;
|
||||
color: #8B7E7E;
|
||||
font-size: $font-md;
|
||||
color: $text-sec;
|
||||
display: block;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
|
||||
.user-time {
|
||||
font-size: 22rpx;
|
||||
color: #BFB3B3;
|
||||
font-size: $font-sm;
|
||||
color: $text-muted;
|
||||
display: block;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
@@ -297,23 +288,23 @@ onReachBottom(() => {
|
||||
.user-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8rpx;
|
||||
gap: $space-xs;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
padding: 8rpx 16rpx;
|
||||
background: #FFF0E6;
|
||||
border-radius: 12rpx;
|
||||
padding: $space-xs $space-sm;
|
||||
background: $surface-warm;
|
||||
border-radius: $radius-sm;
|
||||
text-align: center;
|
||||
|
||||
&.danger { background: #FFE8E8; }
|
||||
&.danger { background: $danger-light; }
|
||||
&:active { opacity: 0.7; }
|
||||
}
|
||||
|
||||
.action-text {
|
||||
font-size: 22rpx;
|
||||
color: #FF8C69;
|
||||
&.danger-text { color: #FF6B6B; }
|
||||
font-size: $font-sm;
|
||||
color: $primary;
|
||||
&.danger-text { color: $danger; }
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -290,7 +290,6 @@ async function handleDeleteSaved(id: number) {
|
||||
border-radius: 40rpx 40rpx 0 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@ -332,13 +331,11 @@ async function handleDeleteSaved(id: number) {
|
||||
padding: 24rpx 40rpx;
|
||||
max-height: 55vh;
|
||||
overflow-x: hidden;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.filter-section {
|
||||
margin-bottom: 32rpx;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.section-label {
|
||||
@@ -354,7 +351,6 @@ async function handleDeleteSaved(id: number) {
|
||||
flex-wrap: wrap;
|
||||
gap: 12rpx;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.chip {
|
||||
@@ -388,7 +384,6 @@ async function handleDeleteSaved(id: number) {
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.date-picker {
|
||||
@@ -420,7 +415,6 @@ async function handleDeleteSaved(id: number) {
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.amount-input {
|
||||
@@ -440,7 +434,6 @@ async function handleDeleteSaved(id: number) {
|
||||
}
|
||||
|
||||
.keyword-input {
|
||||
width: 100%;
|
||||
height: 72rpx;
|
||||
padding: 0 20rpx;
|
||||
background: #fff8f0;
|
||||
|
||||
@@ -245,60 +245,36 @@ onPullDownRefresh(() => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/styles/mixins.scss';
|
||||
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background: #FFF8F0;
|
||||
padding: 0 0 180rpx;
|
||||
@include page-base;
|
||||
}
|
||||
|
||||
.header-fixed {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
background: #FFF8F0;
|
||||
@include sticky-header;
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
background: #FFF8F0;
|
||||
@include status-bar;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
display: block;
|
||||
text-align: center;
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
color: #2D1B1B;
|
||||
padding: 16rpx 0 24rpx;
|
||||
@include page-title;
|
||||
}
|
||||
|
||||
.tabs-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@include tabs-wrap;
|
||||
justify-content: center;
|
||||
margin: 0 0 24rpx;
|
||||
gap: 16rpx;
|
||||
margin: 0 0 $space-md;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
display: inline-flex;
|
||||
background: #FFF0E6;
|
||||
border-radius: 24rpx;
|
||||
padding: 8rpx;
|
||||
@include tabs;
|
||||
}
|
||||
|
||||
.tab {
|
||||
padding: 16rpx 40rpx;
|
||||
border-radius: 20rpx;
|
||||
font-size: 28rpx;
|
||||
color: #8B7E7E;
|
||||
transition: all 0.2s;
|
||||
|
||||
&.active {
|
||||
background: #FFFFFF;
|
||||
color: #FF8C69;
|
||||
font-weight: 600;
|
||||
box-shadow: 2rpx 2rpx 8rpx rgba(45, 27, 27, 0.06);
|
||||
}
|
||||
@include tab;
|
||||
}
|
||||
|
||||
.filter-btn {
|
||||
@@ -306,104 +282,99 @@ onPullDownRefresh(() => {
|
||||
align-items: center;
|
||||
gap: 6rpx;
|
||||
padding: 12rpx 20rpx;
|
||||
background: #FFF0E6;
|
||||
border-radius: 20rpx;
|
||||
border: 2rpx solid #F0E0D6;
|
||||
background: $surface-warm;
|
||||
border-radius: $radius-lg;
|
||||
border: 2rpx solid $border;
|
||||
|
||||
&.active {
|
||||
border-color: #FF8C69;
|
||||
background: #FFE8E0;
|
||||
border-color: $primary;
|
||||
background: $primary-light;
|
||||
}
|
||||
|
||||
&:active { opacity: 0.7; }
|
||||
}
|
||||
|
||||
.filter-btn-text {
|
||||
font-size: 24rpx;
|
||||
color: #8B7E7E;
|
||||
.active & { color: #FF8C69; }
|
||||
font-size: $font-md;
|
||||
color: $text-sec;
|
||||
.active & { color: $primary; }
|
||||
}
|
||||
|
||||
.filter-stats {
|
||||
display: flex;
|
||||
gap: 24rpx;
|
||||
padding: 0 40rpx 16rpx;
|
||||
gap: $space-md;
|
||||
padding: 0 $space-xl $space-sm;
|
||||
}
|
||||
|
||||
.filter-stats-text {
|
||||
font-size: 24rpx;
|
||||
font-size: $font-md;
|
||||
font-family: 'Fredoka', sans-serif;
|
||||
color: #8B7E7E;
|
||||
color: $text-sec;
|
||||
}
|
||||
|
||||
.tx-list { padding: 0 40rpx; }
|
||||
.tx-list { padding: 0 $space-xl; }
|
||||
|
||||
.date-group {
|
||||
margin-bottom: 24rpx;
|
||||
margin-bottom: $space-md;
|
||||
}
|
||||
|
||||
.group-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16rpx 0;
|
||||
border-bottom: 1rpx solid #F0E0D6;
|
||||
margin-bottom: 8rpx;
|
||||
padding: $space-sm 0;
|
||||
border-bottom: 1rpx solid $border;
|
||||
margin-bottom: $space-xs;
|
||||
}
|
||||
|
||||
.group-date {
|
||||
font-size: 26rpx;
|
||||
font-size: $font-base;
|
||||
font-weight: 600;
|
||||
color: #2D1B1B;
|
||||
color: $text;
|
||||
}
|
||||
|
||||
.group-total {
|
||||
font-family: 'Fredoka', sans-serif;
|
||||
font-size: 24rpx;
|
||||
color: #8B7E7E;
|
||||
font-size: $font-md;
|
||||
color: $text-sec;
|
||||
|
||||
&.expense { color: #2D1B1B; }
|
||||
&.expense { color: $text; }
|
||||
}
|
||||
|
||||
.skeleton-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 28rpx 0;
|
||||
gap: 24rpx;
|
||||
gap: $space-md;
|
||||
}
|
||||
|
||||
.skeleton-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8rpx;
|
||||
gap: $space-xs;
|
||||
}
|
||||
|
||||
.loading-more {
|
||||
text-align: center;
|
||||
padding: 32rpx 0;
|
||||
padding: $space-lg 0;
|
||||
}
|
||||
|
||||
.loading-text { font-size: 24rpx; color: #BFB3B3; }
|
||||
.loading-text { font-size: $font-md; color: $text-muted; }
|
||||
|
||||
.empty {
|
||||
text-align: center;
|
||||
padding: 120rpx 0;
|
||||
}
|
||||
|
||||
.empty-text { font-size: 28rpx; color: #BFB3B3; }
|
||||
.empty-text { font-size: $font-lg; color: $text-muted; }
|
||||
|
||||
.state-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
@include state-box;
|
||||
justify-content: center;
|
||||
gap: 16rpx;
|
||||
padding: 120rpx 0;
|
||||
}
|
||||
|
||||
.state-text {
|
||||
font-size: 28rpx;
|
||||
color: #BFB3B3;
|
||||
@include state-text;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -180,46 +180,41 @@ function goBack() {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/styles/mixins.scss';
|
||||
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background: #FFF8F0;
|
||||
background: $bg;
|
||||
padding-bottom: 120rpx;
|
||||
}
|
||||
|
||||
.header-fixed {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
background: #FFF8F0;
|
||||
@include sticky-header;
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
background: #FFF8F0;
|
||||
@include status-bar;
|
||||
}
|
||||
|
||||
.nav-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 16rpx 32rpx;
|
||||
padding: $space-sm $space-lg;
|
||||
}
|
||||
|
||||
.nav-back {
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@include nav-back;
|
||||
border-radius: 50%;
|
||||
|
||||
&:active { background: #F0E0D6; }
|
||||
&:active { background: $border; }
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 36rpx;
|
||||
font-size: $font-2xl;
|
||||
font-weight: 600;
|
||||
color: #2D1B1B;
|
||||
color: $text;
|
||||
}
|
||||
|
||||
.nav-placeholder {
|
||||
@@ -227,18 +222,18 @@ function goBack() {
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 0 40rpx;
|
||||
padding: 0 $space-xl;
|
||||
}
|
||||
|
||||
.overview-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #FFFFFF;
|
||||
border-radius: 28rpx;
|
||||
padding: 28rpx 32rpx;
|
||||
margin-bottom: 24rpx;
|
||||
border: 2rpx solid #F0E0D6;
|
||||
box-shadow: 4rpx 4rpx 12rpx rgba(45, 27, 27, 0.08);
|
||||
background: $surface;
|
||||
border-radius: $radius-xl;
|
||||
padding: $font-lg $space-lg;
|
||||
margin-bottom: $space-md;
|
||||
border: 2rpx solid $border;
|
||||
box-shadow: $shadow-md;
|
||||
}
|
||||
|
||||
.overview-item {
|
||||
@@ -247,151 +242,144 @@ function goBack() {
|
||||
}
|
||||
|
||||
.overview-label {
|
||||
font-size: 24rpx;
|
||||
color: #8B7E7E;
|
||||
font-size: $font-md;
|
||||
color: $text-sec;
|
||||
display: block;
|
||||
margin-bottom: 8rpx;
|
||||
margin-bottom: $space-xs;
|
||||
}
|
||||
|
||||
.overview-value {
|
||||
font-family: 'Fredoka', sans-serif;
|
||||
font-size: 32rpx;
|
||||
font-size: $font-xl;
|
||||
font-weight: 600;
|
||||
color: #2D1B1B;
|
||||
color: $text;
|
||||
|
||||
&.highlight { color: #FF8C69; }
|
||||
&.highlight { color: $primary; }
|
||||
}
|
||||
|
||||
.overview-divider {
|
||||
width: 2rpx;
|
||||
height: 56rpx;
|
||||
background: #F0E0D6;
|
||||
background: $border;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.preview-card {
|
||||
background: #FFFFFF;
|
||||
border-radius: 40rpx;
|
||||
padding: 48rpx;
|
||||
border: 2rpx solid #F0E0D6;
|
||||
box-shadow: 4rpx 4rpx 12rpx rgba(45, 27, 27, 0.08);
|
||||
margin-bottom: 48rpx;
|
||||
background: $surface;
|
||||
border-radius: $radius-2xl;
|
||||
padding: $space-2xl;
|
||||
border: 2rpx solid $border;
|
||||
box-shadow: $shadow-md;
|
||||
margin-bottom: $space-2xl;
|
||||
}
|
||||
|
||||
.preview-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16rpx;
|
||||
margin-bottom: $space-sm;
|
||||
}
|
||||
|
||||
.preview-label {
|
||||
font-size: 28rpx;
|
||||
color: #8B7E7E;
|
||||
font-size: $font-lg;
|
||||
color: $text-sec;
|
||||
}
|
||||
|
||||
.preview-month {
|
||||
font-size: 24rpx;
|
||||
color: #BFB3B3;
|
||||
font-size: $font-md;
|
||||
color: $text-muted;
|
||||
}
|
||||
|
||||
.preview-amount {
|
||||
font-family: 'Fredoka', sans-serif;
|
||||
font-size: 56rpx;
|
||||
font-size: $font-4xl;
|
||||
font-weight: 600;
|
||||
color: #2D1B1B;
|
||||
color: $text;
|
||||
display: block;
|
||||
margin-bottom: 24rpx;
|
||||
margin-bottom: $space-md;
|
||||
}
|
||||
|
||||
.preview-skeleton {
|
||||
width: 240rpx;
|
||||
height: 64rpx;
|
||||
background: linear-gradient(90deg, #F0E0D6 25%, #F8EDE4 50%, #F0E0D6 75%);
|
||||
background-size: 200% 100%;
|
||||
border-radius: 12rpx;
|
||||
margin-bottom: 24rpx;
|
||||
animation: shimmer 1.5s infinite;
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% { background-position: 200% 0; }
|
||||
100% { background-position: -200% 0; }
|
||||
@include shimmer;
|
||||
border-radius: $radius-sm;
|
||||
margin-bottom: $space-md;
|
||||
}
|
||||
|
||||
.preview-hint {
|
||||
font-size: 28rpx;
|
||||
color: #BFB3B3;
|
||||
font-size: $font-lg;
|
||||
color: $text-muted;
|
||||
display: block;
|
||||
text-align: center;
|
||||
padding: 16rpx 0;
|
||||
padding: $space-sm 0;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 28rpx;
|
||||
font-size: $font-lg;
|
||||
font-weight: 600;
|
||||
color: #2D1B1B;
|
||||
margin-bottom: 24rpx;
|
||||
color: $text;
|
||||
margin-bottom: $space-md;
|
||||
}
|
||||
|
||||
.preset-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 20rpx;
|
||||
margin-bottom: 48rpx;
|
||||
gap: $space-lg;
|
||||
margin-bottom: $space-2xl;
|
||||
}
|
||||
|
||||
.preset-item {
|
||||
height: 96rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 28rpx;
|
||||
border: 2rpx solid #F0E0D6;
|
||||
background: $surface;
|
||||
border-radius: $radius-xl;
|
||||
border: 2rpx solid $border;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s;
|
||||
transition: all $transition-normal;
|
||||
|
||||
&:active {
|
||||
background: #FFF8F0;
|
||||
border-color: #FF8C69;
|
||||
background: $bg;
|
||||
border-color: $primary;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: #FFE8E0;
|
||||
border-color: #FF8C69;
|
||||
background: $primary-light;
|
||||
border-color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
.preset-text {
|
||||
font-family: 'Fredoka', sans-serif;
|
||||
font-size: 32rpx;
|
||||
font-size: $font-xl;
|
||||
font-weight: 500;
|
||||
color: #2D1B1B;
|
||||
color: $text;
|
||||
}
|
||||
|
||||
.custom-input {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 8rpx;
|
||||
margin-bottom: 32rpx;
|
||||
padding: 24rpx 32rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 28rpx;
|
||||
border: 2rpx solid #F0E0D6;
|
||||
gap: $space-xs;
|
||||
margin-bottom: $space-lg;
|
||||
padding: $space-md $space-lg;
|
||||
background: $surface;
|
||||
border-radius: $radius-xl;
|
||||
border: 2rpx solid $border;
|
||||
}
|
||||
|
||||
.input-prefix {
|
||||
font-family: 'Fredoka', sans-serif;
|
||||
font-size: 40rpx;
|
||||
font-size: $font-3xl;
|
||||
font-weight: 600;
|
||||
color: #FF8C69;
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
.input-value {
|
||||
font-family: 'Fredoka', sans-serif;
|
||||
font-size: 56rpx;
|
||||
font-size: $font-4xl;
|
||||
font-weight: 600;
|
||||
color: #2D1B1B;
|
||||
color: $text;
|
||||
flex: 1;
|
||||
|
||||
&.placeholder {
|
||||
@@ -400,15 +388,15 @@ function goBack() {
|
||||
}
|
||||
|
||||
.input-unit {
|
||||
font-size: 28rpx;
|
||||
color: #8B7E7E;
|
||||
font-size: $font-lg;
|
||||
color: $text-sec;
|
||||
}
|
||||
|
||||
.input-cursor {
|
||||
font-family: 'Fredoka', monospace;
|
||||
font-size: 56rpx;
|
||||
font-size: $font-4xl;
|
||||
font-weight: 300;
|
||||
color: #FF8C69;
|
||||
color: $primary;
|
||||
animation: blink 1s step-end infinite;
|
||||
}
|
||||
|
||||
|
||||
@@ -268,73 +268,66 @@ async function onMigrateConfirm() {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/styles/mixins.scss';
|
||||
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background: #FFF8F0;
|
||||
padding: 0 0 180rpx;
|
||||
@include page-base;
|
||||
}
|
||||
|
||||
.header-fixed {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
background: #FFF8F0;
|
||||
@include sticky-header;
|
||||
}
|
||||
|
||||
.status-bar { background: #FFF8F0; }
|
||||
.status-bar { @include status-bar; }
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16rpx 40rpx;
|
||||
padding: $space-sm $space-xl;
|
||||
}
|
||||
|
||||
.nav-back {
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@include nav-back;
|
||||
border-radius: 50%;
|
||||
|
||||
&:active { background: #F0E0D6; }
|
||||
&:active { background: $border; }
|
||||
}
|
||||
|
||||
.title { font-size: 32rpx; font-weight: 600; color: #2D1B1B; }
|
||||
.title { font-size: $font-xl; font-weight: 600; color: $text; }
|
||||
|
||||
.tabs-wrap { display: flex; justify-content: center; margin: 16rpx 0 32rpx; }
|
||||
.tabs-wrap { display: flex; justify-content: center; margin: $space-sm 0 $space-lg; }
|
||||
|
||||
.tabs {
|
||||
display: inline-flex;
|
||||
background: #FFF0E6;
|
||||
border-radius: 24rpx;
|
||||
padding: 8rpx;
|
||||
background: $surface-warm;
|
||||
border-radius: $space-md;
|
||||
padding: $space-xs;
|
||||
}
|
||||
|
||||
.tab {
|
||||
padding: 16rpx 40rpx;
|
||||
border-radius: 20rpx;
|
||||
font-size: 28rpx;
|
||||
color: #8B7E7E;
|
||||
transition: all 0.2s;
|
||||
padding: $space-sm $space-xl;
|
||||
border-radius: $radius-lg;
|
||||
font-size: $font-lg;
|
||||
color: $text-sec;
|
||||
transition: all $transition-normal;
|
||||
|
||||
&.active {
|
||||
background: #FFFFFF;
|
||||
color: #FF8C69;
|
||||
background: $surface;
|
||||
color: $primary;
|
||||
font-weight: 600;
|
||||
box-shadow: 2rpx 2rpx 8rpx rgba(45, 27, 27, 0.06);
|
||||
box-shadow: $shadow-sm;
|
||||
}
|
||||
}
|
||||
|
||||
.cat-list { padding: 0 40rpx; }
|
||||
.cat-list { padding: 0 $space-xl; }
|
||||
|
||||
.cat-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 24rpx 0;
|
||||
border-bottom: 1rpx solid #F0E0D6;
|
||||
padding: $space-md 0;
|
||||
border-bottom: 1rpx solid $border;
|
||||
|
||||
&:last-child { border-bottom: none; }
|
||||
}
|
||||
@@ -342,26 +335,26 @@ async function onMigrateConfirm() {
|
||||
.cat-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
gap: $space-sm;
|
||||
flex: 1;
|
||||
padding: 8rpx 0;
|
||||
padding: $space-xs 0;
|
||||
|
||||
&:active { opacity: 0.6; }
|
||||
}
|
||||
|
||||
.cat-name { font-size: 28rpx; color: #2D1B1B; font-weight: 500; }
|
||||
.cat-name { font-size: $font-lg; color: $text; font-weight: 500; }
|
||||
|
||||
.cat-badge {
|
||||
font-size: 20rpx;
|
||||
color: #FF8C69;
|
||||
background: #FFE8E0;
|
||||
font-size: $font-xs;
|
||||
color: $primary;
|
||||
background: $primary-light;
|
||||
padding: 4rpx 12rpx;
|
||||
border-radius: 8rpx;
|
||||
border-radius: $radius-xs;
|
||||
}
|
||||
|
||||
.cat-actions {
|
||||
display: flex;
|
||||
gap: 8rpx;
|
||||
gap: $space-xs;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
@@ -372,16 +365,16 @@ async function onMigrateConfirm() {
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
|
||||
&:active { background: #F0E0D6; }
|
||||
&:active { background: $border; }
|
||||
}
|
||||
|
||||
.fab {
|
||||
position: fixed;
|
||||
right: 40rpx;
|
||||
right: $space-xl;
|
||||
bottom: 120rpx;
|
||||
width: 112rpx;
|
||||
height: 112rpx;
|
||||
background: linear-gradient(135deg, #FF8C69, #E67355);
|
||||
background: linear-gradient(135deg, $primary, #E67355);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -394,8 +387,8 @@ async function onMigrateConfirm() {
|
||||
|
||||
.color-picker {
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
margin-bottom: 24rpx;
|
||||
gap: $space-lg;
|
||||
margin-bottom: $space-md;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
@@ -404,10 +397,10 @@ async function onMigrateConfirm() {
|
||||
height: 56rpx;
|
||||
border-radius: 50%;
|
||||
border: 4rpx solid transparent;
|
||||
transition: all 0.2s;
|
||||
transition: all $transition-normal;
|
||||
|
||||
&.selected {
|
||||
border-color: #2D1B1B;
|
||||
border-color: $text;
|
||||
transform: scale(1.15);
|
||||
}
|
||||
&:active { opacity: 0.7; }
|
||||
@@ -425,87 +418,85 @@ async function onMigrateConfirm() {
|
||||
|
||||
.modal {
|
||||
width: 600rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 32rpx;
|
||||
padding: 48rpx;
|
||||
background: $surface;
|
||||
border-radius: $space-lg;
|
||||
padding: $space-2xl;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: 32rpx;
|
||||
font-size: $font-xl;
|
||||
font-weight: 600;
|
||||
color: #2D1B1B;
|
||||
color: $text;
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin-bottom: 32rpx;
|
||||
margin-bottom: $space-lg;
|
||||
}
|
||||
|
||||
.modal-desc {
|
||||
font-size: 28rpx;
|
||||
color: #8B7E7E;
|
||||
font-size: $font-lg;
|
||||
color: $text-sec;
|
||||
display: block;
|
||||
margin-bottom: 24rpx;
|
||||
margin-bottom: $space-md;
|
||||
}
|
||||
|
||||
.modal-input {
|
||||
width: 100%;
|
||||
height: 96rpx;
|
||||
background: #FFF8F0;
|
||||
border-radius: 24rpx;
|
||||
padding: 0 32rpx;
|
||||
font-size: 28rpx;
|
||||
margin-bottom: 24rpx;
|
||||
box-sizing: border-box;
|
||||
background: $bg;
|
||||
border-radius: $space-md;
|
||||
padding: 0 $space-lg;
|
||||
font-size: $font-lg;
|
||||
margin-bottom: $space-md;
|
||||
}
|
||||
|
||||
.migrate-list {
|
||||
max-height: 400rpx;
|
||||
margin-bottom: 24rpx;
|
||||
margin-bottom: $space-md;
|
||||
}
|
||||
|
||||
.migrate-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
padding: 20rpx 16rpx;
|
||||
border-radius: 16rpx;
|
||||
margin-bottom: 8rpx;
|
||||
transition: background 0.2s;
|
||||
gap: $space-sm;
|
||||
padding: $space-lg $space-sm;
|
||||
border-radius: $radius-md;
|
||||
margin-bottom: $space-xs;
|
||||
transition: background $transition-normal;
|
||||
|
||||
&.selected {
|
||||
background: #FFE8E0;
|
||||
background: $primary-light;
|
||||
}
|
||||
&:active { background: #FFF0E6; }
|
||||
&:active { background: $surface-warm; }
|
||||
}
|
||||
|
||||
.migrate-name {
|
||||
font-size: 28rpx;
|
||||
color: #2D1B1B;
|
||||
font-size: $font-lg;
|
||||
color: $text;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.modal-btns {
|
||||
display: flex;
|
||||
gap: 24rpx;
|
||||
gap: $space-md;
|
||||
}
|
||||
|
||||
.modal-btn {
|
||||
flex: 1;
|
||||
height: 88rpx;
|
||||
border-radius: 24rpx;
|
||||
border-radius: $space-md;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 28rpx;
|
||||
font-size: $font-lg;
|
||||
font-weight: 600;
|
||||
|
||||
&.cancel {
|
||||
background: #FFF8F0;
|
||||
color: #8B7E7E;
|
||||
background: $bg;
|
||||
color: $text-sec;
|
||||
}
|
||||
|
||||
&.confirm {
|
||||
background: linear-gradient(135deg, #FF8C69, #E67355);
|
||||
color: #FFFFFF;
|
||||
background: linear-gradient(135deg, $primary, #E67355);
|
||||
color: $surface;
|
||||
}
|
||||
|
||||
&.disabled { opacity: 0.5; }
|
||||
|
||||
@@ -325,59 +325,50 @@ function handleDissolve(group: Group) {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/styles/mixins.scss';
|
||||
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background: #FFF8F0;
|
||||
padding: 0 0 180rpx;
|
||||
@include page-base;
|
||||
}
|
||||
|
||||
.header-fixed {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
background: #FFF8F0;
|
||||
@include sticky-header;
|
||||
}
|
||||
|
||||
.status-bar { background: #FFF8F0; }
|
||||
.status-bar { @include status-bar; }
|
||||
|
||||
.nav-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 16rpx 40rpx 24rpx;
|
||||
padding: $space-sm $space-xl $space-md;
|
||||
}
|
||||
|
||||
.nav-back {
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&:active { opacity: 0.6; }
|
||||
@include nav-back;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 36rpx;
|
||||
font-size: $font-2xl;
|
||||
font-weight: 600;
|
||||
color: #2D1B1B;
|
||||
color: $text;
|
||||
}
|
||||
|
||||
/* Tab 卡片 */
|
||||
.action-card {
|
||||
margin: 24rpx 40rpx 0;
|
||||
background: #FFFFFF;
|
||||
border-radius: 40rpx;
|
||||
border: 2rpx solid #F0E0D6;
|
||||
box-shadow: 4rpx 4rpx 12rpx rgba(45, 27, 27, 0.08);
|
||||
margin: $space-md $space-xl 0;
|
||||
background: $surface;
|
||||
border-radius: $radius-2xl;
|
||||
border: 2rpx solid $border;
|
||||
box-shadow: $shadow-md;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tab-bar {
|
||||
display: flex;
|
||||
padding: 16rpx 16rpx 0;
|
||||
gap: 8rpx;
|
||||
padding: $space-sm $space-sm 0;
|
||||
gap: $space-xs;
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
@@ -386,69 +377,69 @@ function handleDissolve(group: Group) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
transition: all 0.2s;
|
||||
border-radius: $radius-lg $radius-lg 0 0;
|
||||
transition: all $transition-normal;
|
||||
|
||||
&.active {
|
||||
background: #FFF0E6;
|
||||
background: $surface-warm;
|
||||
|
||||
.tab-text { color: #FF8C69; }
|
||||
.tab-text { color: $primary; }
|
||||
}
|
||||
}
|
||||
|
||||
.tab-text {
|
||||
font-size: 28rpx;
|
||||
font-size: $font-lg;
|
||||
font-weight: 500;
|
||||
color: #8B7E7E;
|
||||
color: $text-sec;
|
||||
}
|
||||
|
||||
.action-body {
|
||||
display: flex;
|
||||
gap: 16rpx;
|
||||
padding: 24rpx 32rpx 32rpx;
|
||||
gap: $space-sm;
|
||||
padding: $space-md $space-lg $space-lg;
|
||||
}
|
||||
|
||||
.action-input {
|
||||
flex: 1;
|
||||
height: 80rpx;
|
||||
padding: 0 24rpx;
|
||||
background: #FFF8F0;
|
||||
border-radius: 20rpx;
|
||||
border: 2rpx solid #F0E0D6;
|
||||
font-size: 28rpx;
|
||||
color: #2D1B1B;
|
||||
padding: 0 $space-md;
|
||||
background: $bg;
|
||||
border-radius: $radius-lg;
|
||||
border: 2rpx solid $border;
|
||||
font-size: $font-lg;
|
||||
color: $text;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
height: 80rpx;
|
||||
padding: 0 32rpx;
|
||||
background: linear-gradient(135deg, #FF8C69, #E67355);
|
||||
border-radius: 20rpx;
|
||||
padding: 0 $space-lg;
|
||||
background: linear-gradient(135deg, $primary, #E67355);
|
||||
border-radius: $radius-lg;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8rpx;
|
||||
gap: $space-xs;
|
||||
|
||||
&.disabled { opacity: 0.5; }
|
||||
&:active { opacity: 0.8; }
|
||||
}
|
||||
|
||||
.action-btn-text {
|
||||
font-size: 28rpx;
|
||||
font-size: $font-lg;
|
||||
font-weight: 600;
|
||||
color: #FFFFFF;
|
||||
color: $surface;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 群组列表 */
|
||||
.section-header {
|
||||
padding: 40rpx 40rpx 16rpx;
|
||||
padding: $space-xl $space-xl $space-sm;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 28rpx;
|
||||
font-size: $font-lg;
|
||||
font-weight: 500;
|
||||
color: #8B7E7E;
|
||||
color: $text-sec;
|
||||
}
|
||||
|
||||
.loading-box, .empty-box {
|
||||
@@ -456,36 +447,36 @@ function handleDissolve(group: Group) {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 16rpx;
|
||||
gap: $space-sm;
|
||||
padding: 80rpx 0;
|
||||
}
|
||||
|
||||
.loading-text, .empty-text {
|
||||
font-size: 28rpx;
|
||||
color: #BFB3B3;
|
||||
font-size: $font-lg;
|
||||
color: $text-muted;
|
||||
}
|
||||
|
||||
.group-list {
|
||||
padding: 0 40rpx;
|
||||
padding: 0 $space-xl;
|
||||
}
|
||||
|
||||
.group-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
padding: 28rpx 32rpx;
|
||||
margin-bottom: 16rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 28rpx;
|
||||
border: 2rpx solid #F0E0D6;
|
||||
box-shadow: 4rpx 4rpx 12rpx rgba(45, 27, 27, 0.08);
|
||||
gap: 24rpx;
|
||||
padding: $font-lg $space-lg;
|
||||
margin-bottom: $space-sm;
|
||||
background: $surface;
|
||||
border-radius: $radius-xl;
|
||||
border: 2rpx solid $border;
|
||||
box-shadow: $shadow-md;
|
||||
gap: $space-md;
|
||||
}
|
||||
|
||||
.group-icon {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 50%;
|
||||
background: #FFF0E6;
|
||||
background: $surface-warm;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -505,24 +496,24 @@ function handleDissolve(group: Group) {
|
||||
}
|
||||
|
||||
.group-name {
|
||||
font-size: 28rpx;
|
||||
font-size: $font-lg;
|
||||
font-weight: 600;
|
||||
color: #2D1B1B;
|
||||
color: $text;
|
||||
}
|
||||
|
||||
.role-badge {
|
||||
padding: 2rpx 12rpx;
|
||||
border-radius: 8rpx;
|
||||
border-radius: $radius-xs;
|
||||
}
|
||||
|
||||
.role-badge-text {
|
||||
font-size: 20rpx;
|
||||
font-size: $font-xs;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.group-meta {
|
||||
font-size: 24rpx;
|
||||
color: #BFB3B3;
|
||||
font-size: $font-md;
|
||||
color: $text-muted;
|
||||
display: block;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
@@ -532,19 +523,19 @@ function handleDissolve(group: Group) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 12rpx;
|
||||
gap: 8rpx;
|
||||
gap: $space-xs;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.invite-label {
|
||||
font-size: 24rpx;
|
||||
color: #8B7E7E;
|
||||
font-size: $font-md;
|
||||
color: $text-sec;
|
||||
}
|
||||
|
||||
.invite-code {
|
||||
font-size: 24rpx;
|
||||
font-size: $font-md;
|
||||
font-weight: 600;
|
||||
color: #FF8C69;
|
||||
color: $primary;
|
||||
font-family: 'Fredoka', monospace;
|
||||
}
|
||||
|
||||
@@ -553,70 +544,61 @@ function handleDissolve(group: Group) {
|
||||
align-items: center;
|
||||
gap: 4rpx;
|
||||
padding: 4rpx 12rpx;
|
||||
background: #FFF8F0;
|
||||
border-radius: 12rpx;
|
||||
background: $bg;
|
||||
border-radius: $radius-sm;
|
||||
|
||||
&:active { background: #F0E0D6; }
|
||||
&:active { background: $border; }
|
||||
}
|
||||
|
||||
.invite-action-text {
|
||||
font-size: 22rpx;
|
||||
color: #8B7E7E;
|
||||
font-size: $font-sm;
|
||||
color: $text-sec;
|
||||
}
|
||||
|
||||
/* 操作按钮 */
|
||||
.group-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8rpx;
|
||||
gap: $space-xs;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.group-btn {
|
||||
padding: 12rpx 24rpx;
|
||||
border-radius: 16rpx;
|
||||
padding: 12rpx $space-md;
|
||||
border-radius: $radius-md;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&.manage { background: #FFF0E6; }
|
||||
&.leave { background: #FFF0E6; }
|
||||
&.dissolve { background: #FFE8E8; }
|
||||
&.manage { background: $surface-warm; }
|
||||
&.leave { background: $surface-warm; }
|
||||
&.dissolve { background: $danger-light; }
|
||||
|
||||
&:active { opacity: 0.7; }
|
||||
}
|
||||
|
||||
.group-btn-text {
|
||||
font-size: 24rpx;
|
||||
font-size: $font-md;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
|
||||
&.manage-text { color: #FF8C69; }
|
||||
&.leave-text { color: #FF8C69; }
|
||||
&.dissolve-text { color: #FF6B6B; }
|
||||
&.manage-text { color: $primary; }
|
||||
&.leave-text { color: $primary; }
|
||||
&.dissolve-text { color: $danger; }
|
||||
}
|
||||
|
||||
/* 成员管理弹窗 */
|
||||
.modal-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
z-index: 200;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
@include modal-mask;
|
||||
}
|
||||
|
||||
.member-modal {
|
||||
width: 100%;
|
||||
max-height: 75vh;
|
||||
background: #FFFFFF;
|
||||
border-radius: 40rpx 40rpx 0 0;
|
||||
background: $surface;
|
||||
border-radius: $radius-2xl $radius-2xl 0 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@ -624,14 +606,14 @@ function handleDissolve(group: Group) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 32rpx 40rpx 24rpx;
|
||||
border-bottom: 2rpx solid #F0E0D6;
|
||||
padding: $space-lg $space-xl $space-md;
|
||||
border-bottom: 2rpx solid $border;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: 32rpx;
|
||||
font-size: $font-xl;
|
||||
font-weight: 600;
|
||||
color: #2D1B1B;
|
||||
color: $text;
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
@@ -641,14 +623,14 @@ function handleDissolve(group: Group) {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
background: #F0E0D6;
|
||||
background: $border;
|
||||
|
||||
&:active { background: #E0D6D0; }
|
||||
&:active { background: darken($border, 5%); }
|
||||
}
|
||||
|
||||
.modal-close-text {
|
||||
font-size: 36rpx;
|
||||
color: #8B7E7E;
|
||||
font-size: $font-2xl;
|
||||
color: $text-sec;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
@@ -661,19 +643,17 @@ function handleDissolve(group: Group) {
|
||||
|
||||
.member-list {
|
||||
max-height: 60vh;
|
||||
padding: 16rpx 40rpx 40rpx;
|
||||
box-sizing: border-box;
|
||||
padding: $space-sm $space-xl $space-xl;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.member-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20rpx 0;
|
||||
gap: 20rpx;
|
||||
padding: $space-lg 0;
|
||||
gap: $space-lg;
|
||||
border-bottom: 2rpx solid #F8F0EB;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
&:last-child { border-bottom: none; }
|
||||
}
|
||||
@@ -682,7 +662,7 @@ function handleDissolve(group: Group) {
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
border-radius: 50%;
|
||||
background: #F0E0D6;
|
||||
background: $border;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@@ -692,9 +672,9 @@ function handleDissolve(group: Group) {
|
||||
}
|
||||
|
||||
.member-name {
|
||||
font-size: 28rpx;
|
||||
font-size: $font-lg;
|
||||
font-weight: 500;
|
||||
color: #2D1B1B;
|
||||
color: $text;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@@ -706,22 +686,22 @@ function handleDissolve(group: Group) {
|
||||
}
|
||||
|
||||
.member-role-text {
|
||||
font-size: 22rpx;
|
||||
font-size: $font-sm;
|
||||
}
|
||||
|
||||
.member-remove {
|
||||
padding: 12rpx 24rpx;
|
||||
background: #FFE8E8;
|
||||
border-radius: 16rpx;
|
||||
padding: 12rpx $space-md;
|
||||
background: $danger-light;
|
||||
border-radius: $radius-md;
|
||||
flex-shrink: 0;
|
||||
|
||||
&:active { opacity: 0.7; }
|
||||
}
|
||||
|
||||
.member-remove-text {
|
||||
font-size: 24rpx;
|
||||
font-size: $font-md;
|
||||
font-weight: 500;
|
||||
color: #FF6B6B;
|
||||
color: $danger;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
|
||||
@@ -280,38 +280,33 @@ function goBills() {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/styles/mixins.scss';
|
||||
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background: #FFF8F0;
|
||||
padding: 0 0 180rpx;
|
||||
@include page-base;
|
||||
}
|
||||
|
||||
.header-fixed {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
background: #FFF8F0;
|
||||
@include sticky-header;
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
background: #FFF8F0;
|
||||
@include status-bar;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 16rpx 40rpx 32rpx;
|
||||
padding: $space-sm $space-xl $space-lg;
|
||||
}
|
||||
|
||||
.avatar-wrap {
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
border-radius: 50%;
|
||||
border: 2rpx solid #F0E0D6;
|
||||
background: #FFF0E6;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 2rpx solid $border;
|
||||
background: $surface-warm;
|
||||
@include flex-center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@ -322,71 +317,63 @@ function goBills() {
|
||||
|
||||
.greeting {
|
||||
flex: 1;
|
||||
font-size: 36rpx;
|
||||
font-size: $font-2xl;
|
||||
font-weight: 600;
|
||||
color: #2D1B1B;
|
||||
margin-left: 16rpx;
|
||||
color: $text;
|
||||
margin-left: $space-sm;
|
||||
}
|
||||
|
||||
.bell {
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@include flex-center;
|
||||
position: relative;
|
||||
|
||||
&:active { opacity: 0.6; }
|
||||
}
|
||||
|
||||
.bell-badge {
|
||||
position: absolute;
|
||||
top: 8rpx;
|
||||
right: 8rpx;
|
||||
top: $space-xs;
|
||||
right: $space-xs;
|
||||
min-width: 32rpx;
|
||||
height: 32rpx;
|
||||
padding: 0 8rpx;
|
||||
background: #FF6B6B;
|
||||
border-radius: 16rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 $space-xs;
|
||||
background: $danger;
|
||||
border-radius: $radius-full;
|
||||
@include flex-center;
|
||||
}
|
||||
|
||||
.bell-badge-text {
|
||||
font-size: 18rpx;
|
||||
font-size: $font-xs;
|
||||
font-weight: 600;
|
||||
color: #FFFFFF;
|
||||
color: $surface;
|
||||
}
|
||||
|
||||
.overview-card {
|
||||
margin: 0 40rpx;
|
||||
padding: 48rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 40rpx;
|
||||
border: 2rpx solid #F0E0D6;
|
||||
box-shadow: 4rpx 4rpx 12rpx rgba(45, 27, 27, 0.08),
|
||||
inset -2rpx -2rpx 6rpx rgba(45, 27, 27, 0.04);
|
||||
margin: 0 $space-xl;
|
||||
padding: $space-2xl;
|
||||
@include card($radius-2xl);
|
||||
box-shadow: $shadow-clay;
|
||||
}
|
||||
|
||||
.card-label {
|
||||
font-size: 28rpx;
|
||||
color: #8B7E7E;
|
||||
font-size: $font-lg;
|
||||
color: $text-sec;
|
||||
display: block;
|
||||
margin-bottom: 12rpx;
|
||||
margin-bottom: $space-sm;
|
||||
}
|
||||
|
||||
.amount-row {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
margin-bottom: 32rpx;
|
||||
margin-bottom: $space-lg;
|
||||
}
|
||||
|
||||
.currency {
|
||||
font-family: 'Fredoka', sans-serif;
|
||||
font-size: 44rpx;
|
||||
font-size: $font-3xl;
|
||||
font-weight: 500;
|
||||
color: #8B7E7E;
|
||||
color: $text-sec;
|
||||
margin-right: 4rpx;
|
||||
}
|
||||
|
||||
@@ -394,174 +381,156 @@ function goBills() {
|
||||
font-family: 'Fredoka', sans-serif;
|
||||
font-size: 72rpx;
|
||||
font-weight: 600;
|
||||
color: #2D1B1B;
|
||||
color: $text;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.mini-stats {
|
||||
display: flex;
|
||||
gap: 24rpx;
|
||||
margin-top: 40rpx;
|
||||
gap: $space-md;
|
||||
margin-top: $space-xl;
|
||||
}
|
||||
|
||||
.mini-stat {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
padding: 24rpx 12rpx;
|
||||
border-radius: 24rpx;
|
||||
background: #FFF8F0;
|
||||
padding: $space-md $space-sm;
|
||||
border-radius: $radius-xl;
|
||||
background: $bg;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mini-label {
|
||||
font-size: 24rpx;
|
||||
color: #8B7E7E;
|
||||
font-size: $font-md;
|
||||
color: $text-sec;
|
||||
display: block;
|
||||
margin-bottom: 8rpx;
|
||||
margin-bottom: $space-xs;
|
||||
}
|
||||
|
||||
.mini-value {
|
||||
font-family: 'Fredoka', sans-serif;
|
||||
font-size: 32rpx;
|
||||
font-size: $font-xl;
|
||||
font-weight: 600;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
@include text-ellipsis;
|
||||
|
||||
&.income { color: #7BC67E; }
|
||||
&.expense { color: #FF6B6B; }
|
||||
&.income { color: $success; }
|
||||
&.expense { color: $danger; }
|
||||
}
|
||||
|
||||
.today-card {
|
||||
margin: 24rpx 40rpx 0;
|
||||
padding: 28rpx 32rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 28rpx;
|
||||
border: 2rpx solid #F0E0D6;
|
||||
box-shadow: 4rpx 4rpx 12rpx rgba(45, 27, 27, 0.08);
|
||||
margin: $space-md $space-xl 0;
|
||||
padding: $space-lg $space-lg;
|
||||
@include card($radius-xl);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24rpx;
|
||||
gap: $space-md;
|
||||
}
|
||||
|
||||
.today-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8rpx;
|
||||
gap: $space-xs;
|
||||
}
|
||||
|
||||
.today-label {
|
||||
font-size: 24rpx;
|
||||
color: #8B7E7E;
|
||||
font-size: $font-md;
|
||||
color: $text-sec;
|
||||
}
|
||||
|
||||
.today-amount {
|
||||
font-family: 'Fredoka', sans-serif;
|
||||
font-size: 32rpx;
|
||||
font-size: $font-xl;
|
||||
font-weight: 600;
|
||||
|
||||
&.expense { color: #FF6B6B; }
|
||||
&.income { color: #7BC67E; }
|
||||
&.expense { color: $danger; }
|
||||
&.income { color: $success; }
|
||||
}
|
||||
|
||||
.today-divider {
|
||||
width: 2rpx;
|
||||
height: 56rpx;
|
||||
background: #F0E0D6;
|
||||
background: $border;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.today-count {
|
||||
font-size: 22rpx;
|
||||
color: #BFB3B3;
|
||||
font-size: $font-sm;
|
||||
color: $text-muted;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.quick-actions {
|
||||
display: flex;
|
||||
gap: 24rpx;
|
||||
padding: 0 40rpx;
|
||||
margin-top: 40rpx;
|
||||
gap: $space-md;
|
||||
padding: 0 $space-xl;
|
||||
margin-top: $space-xl;
|
||||
}
|
||||
|
||||
.quick-btn {
|
||||
flex: 1;
|
||||
height: 144rpx;
|
||||
border-radius: 32rpx;
|
||||
background: #FFFFFF;
|
||||
border: 2rpx solid #F0E0D6;
|
||||
box-shadow: 4rpx 4rpx 12rpx rgba(45, 27, 27, 0.08);
|
||||
display: flex;
|
||||
border-radius: $radius-2xl;
|
||||
@include card;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8rpx;
|
||||
@include flex-center;
|
||||
gap: $space-xs;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.97);
|
||||
box-shadow: inset 2rpx 2rpx 6rpx rgba(45, 27, 27, 0.1);
|
||||
box-shadow: $shadow-clay-pressed;
|
||||
}
|
||||
}
|
||||
|
||||
.quick-text { font-size: 24rpx; font-weight: 500; color: #2D1B1B; }
|
||||
.quick-text { font-size: $font-md; font-weight: 500; color: $text; }
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 48rpx 40rpx 24rpx;
|
||||
@include flex-between;
|
||||
padding: $space-2xl $space-xl $space-md;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 28rpx;
|
||||
font-size: $font-lg;
|
||||
font-weight: 500;
|
||||
color: #8B7E7E;
|
||||
color: $text-sec;
|
||||
}
|
||||
|
||||
.section-more {
|
||||
font-size: 24rpx;
|
||||
color: #FF8C69;
|
||||
padding: 16rpx 24rpx;
|
||||
margin: -16rpx -24rpx;
|
||||
|
||||
font-size: $font-md;
|
||||
color: $primary;
|
||||
padding: $space-sm $space-md;
|
||||
margin: -$space-sm -#{$space-md};
|
||||
&:active { opacity: 0.6; }
|
||||
}
|
||||
|
||||
.tx-list {
|
||||
padding: 0 40rpx;
|
||||
padding: 0 $space-xl;
|
||||
}
|
||||
|
||||
.amount-skeleton {
|
||||
margin-bottom: 32rpx;
|
||||
margin-bottom: $space-lg;
|
||||
}
|
||||
|
||||
.skeleton-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 28rpx 0;
|
||||
gap: 24rpx;
|
||||
padding: $space-lg 0;
|
||||
gap: $space-md;
|
||||
}
|
||||
|
||||
.skeleton-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8rpx;
|
||||
gap: $space-xs;
|
||||
}
|
||||
|
||||
.state-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 16rpx;
|
||||
padding: 80rpx 0;
|
||||
@include state-box;
|
||||
}
|
||||
|
||||
.state-text {
|
||||
font-size: 28rpx;
|
||||
color: #BFB3B3;
|
||||
@include state-text;
|
||||
}
|
||||
|
||||
/* 强提醒公告弹窗 */
|
||||
|
||||
@@ -247,75 +247,67 @@ onReachBottom(() => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/styles/mixins.scss';
|
||||
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background: #FFF8F0;
|
||||
padding: 0 0 180rpx;
|
||||
@include page-base;
|
||||
}
|
||||
|
||||
.header-fixed {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
background: #FFF8F0;
|
||||
@include sticky-header;
|
||||
}
|
||||
|
||||
.status-bar { background: #FFF8F0; }
|
||||
.status-bar { @include status-bar; }
|
||||
|
||||
.nav-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 16rpx 40rpx 24rpx;
|
||||
padding: $space-sm $space-xl $space-md;
|
||||
}
|
||||
|
||||
.nav-back {
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
&:active { opacity: 0.6; }
|
||||
@include nav-back;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 36rpx;
|
||||
font-size: $font-2xl;
|
||||
font-weight: 600;
|
||||
color: #2D1B1B;
|
||||
color: $text;
|
||||
}
|
||||
|
||||
.nav-action {
|
||||
padding: 8rpx 16rpx;
|
||||
padding: $space-xs $space-sm;
|
||||
&:active { opacity: 0.6; }
|
||||
}
|
||||
|
||||
.nav-action-text {
|
||||
font-size: 26rpx;
|
||||
color: #FF8C69;
|
||||
font-size: $font-base;
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
.tabs-wrap { display: flex; justify-content: center; margin: 0 0 24rpx; }
|
||||
.tabs-wrap { display: flex; justify-content: center; margin: 0 0 $space-md; }
|
||||
|
||||
.tabs {
|
||||
display: inline-flex;
|
||||
background: #FFF0E6;
|
||||
border-radius: 24rpx;
|
||||
padding: 8rpx;
|
||||
background: $surface-warm;
|
||||
border-radius: $space-md;
|
||||
padding: $space-xs;
|
||||
}
|
||||
|
||||
.tab {
|
||||
padding: 12rpx 32rpx;
|
||||
border-radius: 20rpx;
|
||||
font-size: 26rpx;
|
||||
color: #8B7E7E;
|
||||
transition: all 0.2s;
|
||||
padding: 12rpx $space-lg;
|
||||
border-radius: $radius-lg;
|
||||
font-size: $font-base;
|
||||
color: $text-sec;
|
||||
transition: all $transition-normal;
|
||||
|
||||
&.active {
|
||||
background: #FFFFFF;
|
||||
color: #FF8C69;
|
||||
background: $surface;
|
||||
color: $primary;
|
||||
font-weight: 600;
|
||||
box-shadow: 2rpx 2rpx 8rpx rgba(45, 27, 27, 0.06);
|
||||
box-shadow: $shadow-sm;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -323,31 +315,31 @@ onReachBottom(() => {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
gap: $space-sm;
|
||||
padding: 120rpx 0;
|
||||
}
|
||||
|
||||
.loading-text, .empty-text {
|
||||
font-size: 28rpx;
|
||||
color: #BFB3B3;
|
||||
font-size: $font-lg;
|
||||
color: $text-muted;
|
||||
}
|
||||
|
||||
.notification-list { padding: 0 40rpx; }
|
||||
.notification-list { padding: 0 $space-xl; }
|
||||
|
||||
.notification-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 20rpx;
|
||||
padding: 28rpx 32rpx;
|
||||
margin-bottom: 16rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 28rpx;
|
||||
border: 2rpx solid #F0E0D6;
|
||||
box-shadow: 4rpx 4rpx 12rpx rgba(45, 27, 27, 0.08);
|
||||
gap: $space-lg;
|
||||
padding: $font-lg $space-lg;
|
||||
margin-bottom: $space-sm;
|
||||
background: $surface;
|
||||
border-radius: $radius-xl;
|
||||
border: 2rpx solid $border;
|
||||
box-shadow: $shadow-md;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&.unread { border-left: 6rpx solid #FF8C69; }
|
||||
&.unread { border-left: 6rpx solid $primary; }
|
||||
}
|
||||
|
||||
.notif-icon {
|
||||
@@ -365,25 +357,25 @@ onReachBottom(() => {
|
||||
.notif-title-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
gap: $space-xs;
|
||||
}
|
||||
|
||||
.pin-badge {
|
||||
font-size: 24rpx;
|
||||
font-size: $font-md;
|
||||
}
|
||||
|
||||
.notif-title {
|
||||
font-size: 28rpx;
|
||||
font-size: $font-lg;
|
||||
font-weight: 600;
|
||||
color: #2D1B1B;
|
||||
color: $text;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.notif-body {
|
||||
font-size: 24rpx;
|
||||
color: #8B7E7E;
|
||||
font-size: $font-md;
|
||||
color: $text-sec;
|
||||
display: block;
|
||||
margin-top: 8rpx;
|
||||
margin-top: $space-xs;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
@@ -391,7 +383,7 @@ onReachBottom(() => {
|
||||
|
||||
.notif-image {
|
||||
width: 100%;
|
||||
border-radius: 12rpx;
|
||||
border-radius: $radius-sm;
|
||||
margin-top: 12rpx;
|
||||
}
|
||||
|
||||
@@ -399,42 +391,42 @@ onReachBottom(() => {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 8rpx;
|
||||
margin-top: $space-xs;
|
||||
}
|
||||
|
||||
.notif-time {
|
||||
font-size: 22rpx;
|
||||
color: #BFB3B3;
|
||||
font-size: $font-sm;
|
||||
color: $text-muted;
|
||||
}
|
||||
|
||||
.unread-dot {
|
||||
width: 16rpx;
|
||||
height: 16rpx;
|
||||
width: $space-sm;
|
||||
height: $space-sm;
|
||||
border-radius: 50%;
|
||||
background: #FF8C69;
|
||||
background: $primary;
|
||||
flex-shrink: 0;
|
||||
margin-top: 8rpx;
|
||||
margin-top: $space-xs;
|
||||
}
|
||||
|
||||
.notif-link {
|
||||
font-size: 22rpx;
|
||||
color: #FF8C69;
|
||||
font-size: $font-sm;
|
||||
color: $primary;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.pinned {
|
||||
border-color: #FF8C69;
|
||||
border-color: $primary;
|
||||
background: #FFFAF7;
|
||||
}
|
||||
|
||||
.no-more {
|
||||
text-align: center;
|
||||
padding: 32rpx 0;
|
||||
padding: $space-lg 0;
|
||||
}
|
||||
|
||||
.no-more-text {
|
||||
font-size: 24rpx;
|
||||
color: #BFB3B3;
|
||||
font-size: $font-md;
|
||||
color: $text-muted;
|
||||
}
|
||||
|
||||
.admin-actions {
|
||||
@@ -444,17 +436,17 @@ onReachBottom(() => {
|
||||
}
|
||||
|
||||
.admin-btn {
|
||||
padding: 8rpx 16rpx;
|
||||
background: #FFF0E6;
|
||||
border-radius: 12rpx;
|
||||
padding: $space-xs $space-sm;
|
||||
background: $surface-warm;
|
||||
border-radius: $radius-sm;
|
||||
|
||||
&.danger { background: #FFE8E8; }
|
||||
&.danger { background: $danger-light; }
|
||||
&:active { opacity: 0.7; }
|
||||
}
|
||||
|
||||
.admin-btn-text {
|
||||
font-size: 22rpx;
|
||||
color: #FF8C69;
|
||||
&.danger-text { color: #FF6B6B; }
|
||||
font-size: $font-sm;
|
||||
color: $primary;
|
||||
&.danger-text { color: $danger; }
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -105,43 +105,34 @@ async function saveProfile() {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/styles/mixins.scss';
|
||||
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background: #FFF8F0;
|
||||
padding: 0 0 180rpx;
|
||||
@include page-base;
|
||||
}
|
||||
|
||||
.header-fixed {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
background: #FFF8F0;
|
||||
@include sticky-header;
|
||||
}
|
||||
|
||||
.status-bar { background: #FFF8F0; }
|
||||
.status-bar { @include status-bar; }
|
||||
|
||||
.nav-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 16rpx 40rpx 24rpx;
|
||||
padding: $space-sm $space-xl $space-md;
|
||||
}
|
||||
|
||||
.nav-back {
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&:active { opacity: 0.6; }
|
||||
@include nav-back;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 36rpx;
|
||||
font-size: $font-2xl;
|
||||
font-weight: 600;
|
||||
color: #2D1B1B;
|
||||
color: $text;
|
||||
}
|
||||
|
||||
.nav-save {
|
||||
@@ -155,16 +146,16 @@ async function saveProfile() {
|
||||
}
|
||||
|
||||
.save-text {
|
||||
font-size: 28rpx;
|
||||
font-size: $font-lg;
|
||||
font-weight: 600;
|
||||
color: #FF8C69;
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
.avatar-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 48rpx 0 32rpx;
|
||||
padding: $space-2xl 0 $space-lg;
|
||||
}
|
||||
|
||||
.avatar-wrap {
|
||||
@@ -172,7 +163,7 @@ async function saveProfile() {
|
||||
height: 160rpx;
|
||||
border-radius: 50%;
|
||||
border: 6rpx solid rgba(255, 255, 255, 0.5);
|
||||
background: linear-gradient(135deg, #FF8C69, #FFB89A);
|
||||
background: linear-gradient(135deg, $primary, #FFB89A);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -196,61 +187,61 @@ async function saveProfile() {
|
||||
}
|
||||
|
||||
.avatar-hint {
|
||||
font-size: 24rpx;
|
||||
color: #BFB3B3;
|
||||
margin-top: 16rpx;
|
||||
font-size: $font-md;
|
||||
color: $text-muted;
|
||||
margin-top: $space-sm;
|
||||
}
|
||||
|
||||
.form-card {
|
||||
margin: 32rpx 40rpx 0;
|
||||
background: #FFFFFF;
|
||||
border-radius: 40rpx;
|
||||
border: 2rpx solid #F0E0D6;
|
||||
box-shadow: 4rpx 4rpx 12rpx rgba(45, 27, 27, 0.08);
|
||||
margin: $space-lg $space-xl 0;
|
||||
background: $surface;
|
||||
border-radius: $radius-2xl;
|
||||
border: 2rpx solid $border;
|
||||
box-shadow: $shadow-md;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 32rpx 40rpx;
|
||||
padding: $space-lg $space-xl;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
width: 120rpx;
|
||||
font-size: 28rpx;
|
||||
font-size: $font-lg;
|
||||
font-weight: 500;
|
||||
color: #2D1B1B;
|
||||
color: $text;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
flex: 1;
|
||||
font-size: 28rpx;
|
||||
color: #2D1B1B;
|
||||
font-size: $font-lg;
|
||||
color: $text;
|
||||
}
|
||||
|
||||
.tips-card {
|
||||
margin: 32rpx 40rpx 0;
|
||||
padding: 32rpx 40rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 40rpx;
|
||||
border: 2rpx solid #F0E0D6;
|
||||
box-shadow: 4rpx 4rpx 12rpx rgba(45, 27, 27, 0.08);
|
||||
margin: $space-lg $space-xl 0;
|
||||
padding: $space-lg $space-xl;
|
||||
background: $surface;
|
||||
border-radius: $radius-2xl;
|
||||
border: 2rpx solid $border;
|
||||
box-shadow: $shadow-md;
|
||||
}
|
||||
|
||||
.tips-title {
|
||||
font-size: 28rpx;
|
||||
font-size: $font-lg;
|
||||
font-weight: 600;
|
||||
color: #2D1B1B;
|
||||
color: $text;
|
||||
display: block;
|
||||
margin-bottom: 16rpx;
|
||||
margin-bottom: $space-sm;
|
||||
}
|
||||
|
||||
.tips-text {
|
||||
font-size: 24rpx;
|
||||
color: #8B7E7E;
|
||||
font-size: $font-md;
|
||||
color: $text-sec;
|
||||
display: block;
|
||||
margin-bottom: 8rpx;
|
||||
margin-bottom: $space-xs;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -357,41 +357,38 @@ async function exportData() {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/styles/mixins.scss';
|
||||
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background: #FFF8F0;
|
||||
padding: 0 0 180rpx;
|
||||
@include page-base;
|
||||
}
|
||||
|
||||
.header-fixed {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
background: #FFF8F0;
|
||||
@include sticky-header;
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
background: #FFF8F0;
|
||||
@include status-bar;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
display: block;
|
||||
text-align: center;
|
||||
font-size: 36rpx;
|
||||
font-size: $font-2xl;
|
||||
font-weight: 600;
|
||||
color: #2D1B1B;
|
||||
padding: 16rpx 0 24rpx;
|
||||
color: $text;
|
||||
padding: $space-sm 0 $space-md;
|
||||
}
|
||||
|
||||
.profile-card {
|
||||
margin: 0 40rpx;
|
||||
padding: 48rpx;
|
||||
background: linear-gradient(135deg, #FF8C69, #FFB89A);
|
||||
border-radius: 40rpx;
|
||||
margin: 0 $space-xl;
|
||||
padding: $space-2xl;
|
||||
background: linear-gradient(135deg, $primary, #FFB89A);
|
||||
border-radius: $radius-2xl;
|
||||
box-shadow: 8rpx 8rpx 24rpx rgba(45, 27, 27, 0.1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 32rpx;
|
||||
gap: $space-lg;
|
||||
|
||||
&:active { opacity: 0.85; }
|
||||
}
|
||||
@@ -408,72 +405,65 @@ async function exportData() {
|
||||
}
|
||||
|
||||
.p-name {
|
||||
font-size: 40rpx;
|
||||
font-size: $font-3xl;
|
||||
font-weight: 600;
|
||||
color: #FFFFFF;
|
||||
color: $surface;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.p-tagline {
|
||||
font-size: 28rpx;
|
||||
font-size: $font-lg;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
display: block;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
|
||||
.p-streak {
|
||||
font-size: 24rpx;
|
||||
font-size: $font-md;
|
||||
color: rgba(255, 255, 255, 0.65);
|
||||
display: block;
|
||||
margin-top: 16rpx;
|
||||
margin-top: $space-sm;
|
||||
}
|
||||
|
||||
.quick-stats {
|
||||
display: flex;
|
||||
gap: 24rpx;
|
||||
padding: 0 40rpx;
|
||||
margin-top: 32rpx;
|
||||
gap: $space-md;
|
||||
padding: 0 $space-xl;
|
||||
margin-top: $space-lg;
|
||||
}
|
||||
|
||||
.qs-card {
|
||||
flex: 1;
|
||||
padding: 32rpx 24rpx;
|
||||
background: #FFFFFF;
|
||||
padding: $space-lg $space-md;
|
||||
background: $surface;
|
||||
border-radius: 32rpx;
|
||||
border: 2rpx solid #F0E0D6;
|
||||
box-shadow: 4rpx 4rpx 12rpx rgba(45, 27, 27, 0.08);
|
||||
border: 2rpx solid $border;
|
||||
box-shadow: $shadow-md;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.qs-label {
|
||||
font-size: 24rpx;
|
||||
color: #8B7E7E;
|
||||
font-size: $font-md;
|
||||
color: $text-sec;
|
||||
display: block;
|
||||
margin-bottom: 8rpx;
|
||||
margin-bottom: $space-xs;
|
||||
}
|
||||
|
||||
.qs-value {
|
||||
font-family: 'Fredoka', sans-serif;
|
||||
font-size: 32rpx;
|
||||
font-size: $font-xl;
|
||||
font-weight: 600;
|
||||
color: #2D1B1B;
|
||||
color: $text;
|
||||
|
||||
&.income { color: #7BC67E; }
|
||||
&.income { color: $success; }
|
||||
}
|
||||
|
||||
.qs-skeleton {
|
||||
width: 160rpx;
|
||||
height: 40rpx;
|
||||
background: linear-gradient(90deg, #F0E0D6 25%, #F8EDE4 50%, #F0E0D6 75%);
|
||||
background-size: 200% 100%;
|
||||
border-radius: 8rpx;
|
||||
@include shimmer;
|
||||
border-radius: $radius-xs;
|
||||
margin: 0 auto;
|
||||
animation: shimmer 1.5s infinite;
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% { background-position: 200% 0; }
|
||||
100% { background-position: -200% 0; }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
@@ -483,57 +473,57 @@ async function exportData() {
|
||||
}
|
||||
|
||||
.menu-card {
|
||||
margin: 40rpx 40rpx 0;
|
||||
background: #FFFFFF;
|
||||
border-radius: 40rpx;
|
||||
border: 2rpx solid #F0E0D6;
|
||||
box-shadow: 4rpx 4rpx 12rpx rgba(45, 27, 27, 0.08);
|
||||
margin: $space-xl $space-xl 0;
|
||||
background: $surface;
|
||||
border-radius: $radius-2xl;
|
||||
border: 2rpx solid $border;
|
||||
box-shadow: $shadow-md;
|
||||
overflow: hidden;
|
||||
|
||||
&.mt { margin-top: 32rpx; }
|
||||
&.mt { margin-top: $space-lg; }
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
height: 112rpx;
|
||||
padding: 0 40rpx;
|
||||
padding: 0 $space-xl;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1rpx solid #F0E0D6;
|
||||
border-bottom: 1rpx solid $border;
|
||||
|
||||
&:last-child { border-bottom: none; }
|
||||
&:active { background: #FFF8F0; }
|
||||
&:active { background: $bg; }
|
||||
}
|
||||
|
||||
.mi-label { flex: 1; font-size: 28rpx; font-weight: 500; color: #2D1B1B; }
|
||||
.mi-extra { font-size: 28rpx; color: #FF8C69; font-weight: 600; margin-right: 16rpx; }
|
||||
.mi-label { flex: 1; font-size: $font-lg; font-weight: 500; color: $text; }
|
||||
.mi-extra { font-size: $font-lg; color: $primary; font-weight: 600; margin-right: $space-sm; }
|
||||
|
||||
.admin-entry {
|
||||
gap: 16rpx;
|
||||
.mi-label { color: #FF8C69; font-weight: 600; }
|
||||
gap: $space-sm;
|
||||
.mi-label { color: $primary; font-weight: 600; }
|
||||
}
|
||||
|
||||
.about-title {
|
||||
font-size: 40rpx;
|
||||
font-size: $font-3xl;
|
||||
font-weight: 600;
|
||||
color: #FF8C69;
|
||||
color: $primary;
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.about-version {
|
||||
font-size: 24rpx;
|
||||
color: #BFB3B3;
|
||||
font-size: $font-md;
|
||||
color: $text-muted;
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin: 8rpx 0 24rpx;
|
||||
margin: $space-xs 0 $space-md;
|
||||
}
|
||||
|
||||
.about-desc {
|
||||
font-size: 28rpx;
|
||||
color: #8B7E7E;
|
||||
font-size: $font-lg;
|
||||
color: $text-sec;
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin-bottom: 8rpx;
|
||||
margin-bottom: $space-xs;
|
||||
}
|
||||
|
||||
.modal-mask {
|
||||
@@ -548,33 +538,33 @@ async function exportData() {
|
||||
|
||||
.modal {
|
||||
width: 600rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 32rpx;
|
||||
padding: 48rpx;
|
||||
background: $surface;
|
||||
border-radius: $space-lg;
|
||||
padding: $space-2xl;
|
||||
}
|
||||
|
||||
.modal-btns {
|
||||
display: flex;
|
||||
gap: 24rpx;
|
||||
gap: $space-md;
|
||||
}
|
||||
|
||||
.modal-btns-top {
|
||||
margin-top: 40rpx;
|
||||
margin-top: $space-xl;
|
||||
}
|
||||
|
||||
.modal-btn {
|
||||
flex: 1;
|
||||
height: 88rpx;
|
||||
border-radius: 24rpx;
|
||||
border-radius: $space-md;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 28rpx;
|
||||
font-size: $font-lg;
|
||||
font-weight: 600;
|
||||
|
||||
&.confirm {
|
||||
background: linear-gradient(135deg, #FF8C69, #E67355);
|
||||
color: #FFFFFF;
|
||||
background: linear-gradient(135deg, $primary, #E67355);
|
||||
color: $surface;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -585,17 +575,17 @@ async function exportData() {
|
||||
}
|
||||
|
||||
.identity-card {
|
||||
margin: 24rpx 40rpx 0;
|
||||
padding: 28rpx 32rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 28rpx;
|
||||
border: 2rpx solid #F0E0D6;
|
||||
box-shadow: 4rpx 4rpx 12rpx rgba(45, 27, 27, 0.08);
|
||||
margin: $space-md $space-xl 0;
|
||||
padding: $font-lg $space-lg;
|
||||
background: $surface;
|
||||
border-radius: $radius-xl;
|
||||
border: 2rpx solid $border;
|
||||
box-shadow: $shadow-md;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20rpx;
|
||||
gap: $space-lg;
|
||||
|
||||
&:active { background: #FFF0E6; }
|
||||
&:active { background: $surface-warm; }
|
||||
}
|
||||
|
||||
.id-info {
|
||||
@@ -605,14 +595,14 @@ async function exportData() {
|
||||
}
|
||||
|
||||
.id-name {
|
||||
font-size: 28rpx;
|
||||
font-size: $font-lg;
|
||||
font-weight: 600;
|
||||
color: #2D1B1B;
|
||||
color: $text;
|
||||
}
|
||||
|
||||
.id-desc {
|
||||
font-size: 24rpx;
|
||||
color: #BFB3B3;
|
||||
font-size: $font-md;
|
||||
color: $text-muted;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
|
||||
@@ -621,33 +611,33 @@ async function exportData() {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: #FFFFFF;
|
||||
border-radius: 40rpx 40rpx 0 0;
|
||||
padding: 40rpx;
|
||||
padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
|
||||
background: $surface;
|
||||
border-radius: $radius-2xl $radius-2xl 0 0;
|
||||
padding: $space-xl;
|
||||
padding-bottom: calc($space-xl + env(safe-area-inset-bottom));
|
||||
max-height: 70vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: 32rpx;
|
||||
font-size: $font-xl;
|
||||
font-weight: 600;
|
||||
color: #2D1B1B;
|
||||
color: $text;
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin-bottom: 32rpx;
|
||||
margin-bottom: $space-lg;
|
||||
}
|
||||
|
||||
.id-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20rpx;
|
||||
padding: 28rpx 24rpx;
|
||||
border-radius: 20rpx;
|
||||
gap: $space-lg;
|
||||
padding: $font-lg $space-md;
|
||||
border-radius: $radius-lg;
|
||||
margin-bottom: 12rpx;
|
||||
|
||||
&.active { background: #FFF0E6; }
|
||||
&:active { background: #FFF8F0; }
|
||||
&.active { background: $surface-warm; }
|
||||
&:active { background: $bg; }
|
||||
}
|
||||
|
||||
.id-option-info {
|
||||
@@ -657,53 +647,53 @@ async function exportData() {
|
||||
}
|
||||
|
||||
.id-option-name {
|
||||
font-size: 28rpx;
|
||||
font-size: $font-lg;
|
||||
font-weight: 500;
|
||||
color: #2D1B1B;
|
||||
color: $text;
|
||||
}
|
||||
|
||||
.id-option-desc {
|
||||
font-size: 24rpx;
|
||||
color: #BFB3B3;
|
||||
font-size: $font-md;
|
||||
color: $text-muted;
|
||||
margin-top: 2rpx;
|
||||
}
|
||||
|
||||
.id-actions {
|
||||
display: flex;
|
||||
gap: 24rpx;
|
||||
margin-top: 24rpx;
|
||||
padding-top: 24rpx;
|
||||
border-top: 1rpx solid #F0E0D6;
|
||||
gap: $space-md;
|
||||
margin-top: $space-md;
|
||||
padding-top: $space-md;
|
||||
border-top: 1rpx solid $border;
|
||||
}
|
||||
|
||||
.id-action-btn {
|
||||
flex: 1;
|
||||
height: 80rpx;
|
||||
border-radius: 20rpx;
|
||||
background: #FFF0E6;
|
||||
border-radius: $radius-lg;
|
||||
background: $surface-warm;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&:active { background: #FFE8D6; }
|
||||
&:active { background: darken($surface-warm, 3%); }
|
||||
}
|
||||
|
||||
.id-action-text {
|
||||
font-size: 28rpx;
|
||||
font-size: $font-lg;
|
||||
font-weight: 500;
|
||||
color: #FF8C69;
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
.id-manage {
|
||||
margin-top: 16rpx;
|
||||
padding: 24rpx 20rpx;
|
||||
margin-top: $space-sm;
|
||||
padding: $space-md $space-lg;
|
||||
text-align: center;
|
||||
|
||||
&:active { background: #FFF0E6; border-radius: 16rpx; }
|
||||
&:active { background: $surface-warm; border-radius: $radius-md; }
|
||||
}
|
||||
|
||||
.id-manage-text {
|
||||
font-size: 26rpx;
|
||||
color: #8B7E7E;
|
||||
font-size: $font-base;
|
||||
color: $text-sec;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -313,46 +313,36 @@ function getBarWidth(amount: number) {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/styles/mixins.scss';
|
||||
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background: #FFF8F0;
|
||||
padding: 0 0 180rpx;
|
||||
@include page-base;
|
||||
}
|
||||
|
||||
.header-fixed {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
background: #FFF8F0;
|
||||
@include sticky-header;
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
background: #FFF8F0;
|
||||
@include status-bar;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
display: block;
|
||||
text-align: center;
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
color: #2D1B1B;
|
||||
padding: 16rpx 0 24rpx;
|
||||
@include page-title;
|
||||
}
|
||||
|
||||
.month-picker {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 48rpx;
|
||||
padding: 16rpx 0;
|
||||
gap: $space-2xl;
|
||||
padding: $space-sm 0;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@include flex-center;
|
||||
|
||||
&.disabled { opacity: 0.5; }
|
||||
|
||||
@@ -361,42 +351,35 @@ function getBarWidth(amount: number) {
|
||||
|
||||
.month-text {
|
||||
font-family: 'Fredoka', sans-serif;
|
||||
font-size: 32rpx;
|
||||
font-size: $font-xl;
|
||||
font-weight: 500;
|
||||
color: #2D1B1B;
|
||||
color: $text;
|
||||
}
|
||||
|
||||
.tabs-wrap { display: flex; justify-content: center; margin: 16rpx 0 32rpx; }
|
||||
.tabs-wrap {
|
||||
@include tabs-wrap;
|
||||
margin: $space-sm 0 $space-lg;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
display: inline-flex;
|
||||
background: #FFF0E6;
|
||||
border-radius: 24rpx;
|
||||
padding: 8rpx;
|
||||
@include tabs;
|
||||
border-radius: $radius-xl;
|
||||
}
|
||||
|
||||
.tab {
|
||||
padding: 16rpx 40rpx;
|
||||
border-radius: 20rpx;
|
||||
font-size: 28rpx;
|
||||
color: #8B7E7E;
|
||||
transition: all 0.2s;
|
||||
@include tab;
|
||||
border-radius: $radius-xl;
|
||||
|
||||
&.active {
|
||||
background: #FFFFFF;
|
||||
color: #FF8C69;
|
||||
font-weight: 600;
|
||||
box-shadow: 2rpx 2rpx 8rpx rgba(45, 27, 27, 0.06);
|
||||
border-radius: $radius-lg;
|
||||
box-shadow: $shadow-md;
|
||||
}
|
||||
}
|
||||
|
||||
.overview-card, .chart-card {
|
||||
margin: 0 40rpx 32rpx;
|
||||
padding: 40rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 40rpx;
|
||||
border: 2rpx solid #F0E0D6;
|
||||
box-shadow: 4rpx 4rpx 12rpx rgba(45, 27, 27, 0.08);
|
||||
@include card($radius-2xl);
|
||||
margin: 0 $space-xl $space-lg;
|
||||
padding: $space-xl;
|
||||
}
|
||||
|
||||
.overview-card {
|
||||
@@ -407,64 +390,61 @@ function getBarWidth(amount: number) {
|
||||
|
||||
.extra-stats {
|
||||
display: flex;
|
||||
gap: 24rpx;
|
||||
margin: 0 40rpx 32rpx;
|
||||
gap: $space-md;
|
||||
margin: 0 $space-xl $space-lg;
|
||||
}
|
||||
|
||||
.es-item {
|
||||
flex: 1;
|
||||
padding: 24rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 28rpx;
|
||||
border: 2rpx solid #F0E0D6;
|
||||
box-shadow: 4rpx 4rpx 12rpx rgba(45, 27, 27, 0.08);
|
||||
@include card($radius-xl);
|
||||
padding: $space-md;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.es-label {
|
||||
font-size: 22rpx;
|
||||
color: #8B7E7E;
|
||||
font-size: $font-sm;
|
||||
color: $text-sec;
|
||||
display: block;
|
||||
margin-bottom: 8rpx;
|
||||
margin-bottom: $space-xs;
|
||||
}
|
||||
|
||||
.es-value {
|
||||
font-family: 'Fredoka', sans-serif;
|
||||
font-size: 28rpx;
|
||||
font-size: $font-lg;
|
||||
font-weight: 600;
|
||||
color: #2D1B1B;
|
||||
color: $text;
|
||||
|
||||
&.up { color: #FF6B6B; }
|
||||
&.down { color: #7BC67E; }
|
||||
&.same { color: #8B7E7E; }
|
||||
&.up { color: $danger; }
|
||||
&.down { color: $success; }
|
||||
&.same { color: $text-sec; }
|
||||
}
|
||||
|
||||
.ov-label {
|
||||
font-size: 24rpx;
|
||||
color: #8B7E7E;
|
||||
font-size: $font-md;
|
||||
color: $text-sec;
|
||||
display: block;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.ov-value {
|
||||
font-family: 'Fredoka', sans-serif;
|
||||
font-size: 40rpx;
|
||||
font-size: $font-3xl;
|
||||
font-weight: 600;
|
||||
color: #2D1B1B;
|
||||
color: $text;
|
||||
}
|
||||
|
||||
.chart-title {
|
||||
font-size: 32rpx;
|
||||
font-size: $font-xl;
|
||||
font-weight: 500;
|
||||
color: #2D1B1B;
|
||||
color: $text;
|
||||
display: block;
|
||||
margin-bottom: 24rpx;
|
||||
margin-bottom: $space-md;
|
||||
}
|
||||
|
||||
.chart-legend {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16rpx 32rpx;
|
||||
gap: $space-sm $space-lg;
|
||||
}
|
||||
|
||||
.legend-item {
|
||||
@@ -479,74 +459,69 @@ function getBarWidth(amount: number) {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.legend-text { font-size: 24rpx; color: #8B7E7E; }
|
||||
.legend-text { font-size: $font-md; color: $text-sec; }
|
||||
|
||||
.empty {
|
||||
text-align: center;
|
||||
padding: 80rpx 0;
|
||||
}
|
||||
|
||||
.empty-text { font-size: 28rpx; color: #BFB3B3; }
|
||||
.empty-text { font-size: $font-lg; color: $text-muted; }
|
||||
|
||||
.state-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 16rpx;
|
||||
@include state-box;
|
||||
padding: 80rpx 0;
|
||||
}
|
||||
|
||||
.state-text {
|
||||
font-size: 28rpx;
|
||||
color: #BFB3B3;
|
||||
@include state-text;
|
||||
}
|
||||
|
||||
.trend-list { display: flex; flex-direction: column; gap: 16rpx; }
|
||||
.trend-list { display: flex; flex-direction: column; gap: $space-sm; }
|
||||
|
||||
.skeleton-legend {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16rpx 32rpx;
|
||||
gap: $space-sm $space-lg;
|
||||
}
|
||||
|
||||
.skeleton-trend {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
gap: $space-sm;
|
||||
}
|
||||
|
||||
.trend-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
gap: $space-sm;
|
||||
}
|
||||
|
||||
.trend-date {
|
||||
font-size: 24rpx;
|
||||
color: #8B7E7E;
|
||||
font-size: $font-md;
|
||||
color: $text-sec;
|
||||
}
|
||||
|
||||
.trend-bar-bg {
|
||||
flex: 1;
|
||||
height: 12rpx;
|
||||
border-radius: 6rpx;
|
||||
background: #F0E0D6;
|
||||
background: $border;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.trend-bar {
|
||||
height: 100%;
|
||||
border-radius: 6rpx;
|
||||
background: linear-gradient(90deg, #FF8C69, #FFB89A);
|
||||
background: linear-gradient(90deg, $primary, #FFB89A);
|
||||
transition: width 0.6s ease-out;
|
||||
}
|
||||
|
||||
.trend-amount {
|
||||
width: 120rpx;
|
||||
font-family: 'Fredoka', sans-serif;
|
||||
font-size: 24rpx;
|
||||
font-size: $font-md;
|
||||
font-weight: 500;
|
||||
color: #2D1B1B;
|
||||
color: $text;
|
||||
}
|
||||
</style>
|
||||
|
||||
238
client/src/styles/mixins.scss
Normal file
238
client/src/styles/mixins.scss
Normal file
@@ -0,0 +1,238 @@
|
||||
/* ===== 公共 Mixins ===== */
|
||||
|
||||
// 页面基础样式
|
||||
@mixin page-base {
|
||||
min-height: 100vh;
|
||||
background: $bg;
|
||||
padding-bottom: 180rpx;
|
||||
}
|
||||
|
||||
// 粘性头部
|
||||
@mixin sticky-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
background: $bg;
|
||||
}
|
||||
|
||||
// 状态栏
|
||||
@mixin status-bar {
|
||||
background: $bg;
|
||||
}
|
||||
|
||||
// 卡片
|
||||
@mixin card($radius: $radius-2xl) {
|
||||
background: $surface;
|
||||
border-radius: $radius;
|
||||
border: 2rpx solid $border;
|
||||
box-shadow: $shadow-md;
|
||||
}
|
||||
|
||||
// 导航栏
|
||||
@mixin nav-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: $space-sm $space-xl $space-md;
|
||||
}
|
||||
|
||||
// 返回按钮
|
||||
@mixin nav-back {
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
&:active { opacity: 0.6; }
|
||||
}
|
||||
|
||||
// 页面标题
|
||||
@mixin page-title {
|
||||
display: block;
|
||||
text-align: center;
|
||||
font-size: $font-2xl;
|
||||
font-weight: 600;
|
||||
color: $text;
|
||||
padding: $space-sm 0 $space-md;
|
||||
}
|
||||
|
||||
// 状态空/错误/加载
|
||||
@mixin state-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: $space-sm;
|
||||
padding: 120rpx 0;
|
||||
}
|
||||
|
||||
@mixin state-text {
|
||||
font-size: $font-lg;
|
||||
color: $text-muted;
|
||||
}
|
||||
|
||||
// Tabs
|
||||
@mixin tabs-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: $space-sm;
|
||||
}
|
||||
|
||||
@mixin tabs {
|
||||
display: inline-flex;
|
||||
background: $surface-warm;
|
||||
border-radius: $radius-lg;
|
||||
padding: $space-xs;
|
||||
}
|
||||
|
||||
@mixin tab {
|
||||
padding: $space-sm $space-xl;
|
||||
border-radius: $radius-lg;
|
||||
font-size: $font-lg;
|
||||
color: $text-sec;
|
||||
transition: all $transition-normal;
|
||||
|
||||
&.active {
|
||||
background: $surface;
|
||||
color: $primary;
|
||||
font-weight: 600;
|
||||
box-shadow: $shadow-sm;
|
||||
}
|
||||
}
|
||||
|
||||
// 弹窗
|
||||
@mixin modal-mask {
|
||||
position: fixed;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
z-index: 200;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
@mixin bottom-modal {
|
||||
width: 100%;
|
||||
max-height: 80vh;
|
||||
background: $surface;
|
||||
border-radius: $radius-2xl $radius-2xl 0 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
@mixin modal-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: $space-lg $space-xl $space-md;
|
||||
border-bottom: 2rpx solid $border;
|
||||
}
|
||||
|
||||
@mixin modal-title {
|
||||
font-size: $font-xl;
|
||||
font-weight: 600;
|
||||
color: $text;
|
||||
}
|
||||
|
||||
@mixin modal-close {
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
background: $border;
|
||||
&:active { background: darken($border, 5%); }
|
||||
}
|
||||
|
||||
// 列表项
|
||||
@mixin list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $space-md;
|
||||
padding: $space-lg $space-lg;
|
||||
background: $surface;
|
||||
border-radius: $radius-xl;
|
||||
border: 2rpx solid $border;
|
||||
box-shadow: $shadow-md;
|
||||
margin-bottom: $space-sm;
|
||||
}
|
||||
|
||||
// 输入框
|
||||
@mixin input {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
padding: 0 $space-md;
|
||||
background: $bg;
|
||||
border-radius: $radius-lg;
|
||||
border: 2rpx solid $border;
|
||||
font-size: $font-lg;
|
||||
color: $text;
|
||||
}
|
||||
|
||||
// 按钮
|
||||
@mixin btn-primary {
|
||||
height: 80rpx;
|
||||
padding: 0 $space-lg;
|
||||
background: linear-gradient(135deg, $primary, $primary-dark);
|
||||
border-radius: $radius-lg;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
&:active { opacity: 0.8; }
|
||||
}
|
||||
|
||||
@mixin btn-primary-text {
|
||||
font-size: $font-lg;
|
||||
font-weight: 600;
|
||||
color: $surface;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@mixin btn-ghost {
|
||||
padding: $space-sm $space-md;
|
||||
background: $surface-warm;
|
||||
border-radius: $radius-md;
|
||||
&:active { background: $border; }
|
||||
}
|
||||
|
||||
@mixin btn-ghost-text {
|
||||
font-size: $font-md;
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
// Shimmer 动画
|
||||
@mixin shimmer {
|
||||
background: linear-gradient(90deg, $border 25%, $surface-warm 50%, $border 75%);
|
||||
background-size: 200% 100%;
|
||||
animation: shimmer 1.5s infinite;
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% { background-position: 200% 0; }
|
||||
100% { background-position: -200% 0; }
|
||||
}
|
||||
|
||||
// Flex 工具
|
||||
@mixin flex-center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@mixin flex-between {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
// 文本溢出
|
||||
@mixin text-ellipsis {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// 安全区域
|
||||
@mixin safe-bottom {
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
@@ -1,31 +1,69 @@
|
||||
/* Design Tokens */
|
||||
/* ===== Design Tokens ===== */
|
||||
|
||||
// 颜色系统
|
||||
$primary: #FF8C69;
|
||||
$primary-light: #FFB89A;
|
||||
$primary-light: #FFE8E0;
|
||||
$primary-dark: #E67355;
|
||||
$secondary: #6C9BCF;
|
||||
$accent: #FFD166;
|
||||
|
||||
$bg: #FFF8F0;
|
||||
$surface: #FFFFFF;
|
||||
$surface-warm: #FFF0E6;
|
||||
|
||||
$text: #2D1B1B;
|
||||
$text-sec: #8B7E7E;
|
||||
$text-muted: #BFB3B3;
|
||||
|
||||
$success: #7BC67E;
|
||||
$warning: #FFB347;
|
||||
$danger: #FF6B6B;
|
||||
$danger-light: #FFE8E8;
|
||||
|
||||
$border: #F0E0D6;
|
||||
|
||||
$shadow-clay: 4px 4px 12px rgba(45, 27, 27, 0.08), inset -2px -2px 6px rgba(45, 27, 27, 0.04);
|
||||
$shadow-clay-hover: 6px 6px 16px rgba(45, 27, 27, 0.12), inset -2px -2px 6px rgba(45, 27, 27, 0.04);
|
||||
$shadow-clay-pressed: inset 2px 2px 6px rgba(45, 27, 27, 0.1);
|
||||
// 间距系统
|
||||
$space-xs: 8rpx;
|
||||
$space-sm: 16rpx;
|
||||
$space-md: 24rpx;
|
||||
$space-lg: 32rpx;
|
||||
$space-xl: 40rpx;
|
||||
$space-2xl: 48rpx;
|
||||
|
||||
$radius-sm: 8rpx;
|
||||
$radius-md: 12rpx;
|
||||
$radius-lg: 16rpx;
|
||||
$radius-xl: 20rpx;
|
||||
// 圆角系统
|
||||
$radius-xs: 8rpx;
|
||||
$radius-sm: 12rpx;
|
||||
$radius-md: 16rpx;
|
||||
$radius-lg: 20rpx;
|
||||
$radius-xl: 28rpx;
|
||||
$radius-2xl: 40rpx;
|
||||
$radius-full: 9999rpx;
|
||||
|
||||
/* uCharts theme */
|
||||
// 字体系统
|
||||
$font-xs: 20rpx;
|
||||
$font-sm: 22rpx;
|
||||
$font-md: 24rpx;
|
||||
$font-base: 26rpx;
|
||||
$font-lg: 28rpx;
|
||||
$font-xl: 32rpx;
|
||||
$font-2xl: 36rpx;
|
||||
$font-3xl: 40rpx;
|
||||
$font-4xl: 56rpx;
|
||||
|
||||
// 阴影系统
|
||||
$shadow-sm: 2rpx 2rpx 8rpx rgba(45, 27, 27, 0.06);
|
||||
$shadow-md: 4rpx 4rpx 12rpx rgba(45, 27, 27, 0.08);
|
||||
$shadow-lg: 8rpx 8rpx 24rpx rgba(45, 27, 27, 0.12);
|
||||
$shadow-clay: $shadow-md, inset -2rpx -2rpx 6rpx rgba(45, 27, 27, 0.04);
|
||||
$shadow-clay-hover: 6rpx 6rpx 16rpx rgba(45, 27, 27, 0.12), inset -2rpx -2rpx 6rpx rgba(45, 27, 27, 0.04);
|
||||
$shadow-clay-pressed: inset 2rpx 2rpx 6rpx rgba(45, 27, 27, 0.1);
|
||||
|
||||
// 动画
|
||||
$transition-fast: 0.15s ease;
|
||||
$transition-normal: 0.2s ease;
|
||||
$transition-slow: 0.3s ease;
|
||||
|
||||
/* ===== uCharts theme ===== */
|
||||
page {
|
||||
--u-charts-color-0: #FF8C69;
|
||||
--u-charts-color-1: #FFD166;
|
||||
|
||||
Reference in New Issue
Block a user