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