186 lines
3.4 KiB
Vue
186 lines
3.4 KiB
Vue
<script>
|
|
export default {
|
|
onLaunch() {
|
|
console.log('Bill Helper Launch')
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
background: #f4ede3;
|
|
color: #16202a;
|
|
font-family: 'PingFang SC', 'HarmonyOS Sans SC', sans-serif;
|
|
--bg-app: #f4ede3;
|
|
--bg-accent: linear-gradient(135deg, #102a43 0%, #1f6f5f 100%);
|
|
--surface-card: rgba(255, 255, 255, 0.9);
|
|
--surface-strong: #ffffff;
|
|
--surface-muted: rgba(255, 255, 255, 0.68);
|
|
--text-primary: #16202a;
|
|
--text-secondary: #617081;
|
|
--text-muted: #91a0af;
|
|
--line-soft: rgba(22, 32, 42, 0.08);
|
|
--brand: #1f6f5f;
|
|
--brand-soft: rgba(31, 111, 95, 0.14);
|
|
--danger: #d25543;
|
|
--danger-soft: rgba(210, 85, 67, 0.14);
|
|
--warning: #c48a1f;
|
|
--shadow-card: 0 18rpx 40rpx rgba(16, 42, 67, 0.08);
|
|
}
|
|
|
|
view,
|
|
text,
|
|
button,
|
|
input,
|
|
textarea,
|
|
scroll-view {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
button {
|
|
margin: 0;
|
|
padding: 0;
|
|
background: transparent;
|
|
line-height: 1;
|
|
border: 0;
|
|
}
|
|
|
|
button::after {
|
|
border: 0;
|
|
}
|
|
|
|
.app-page {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 24rpx;
|
|
min-height: 100vh;
|
|
padding: 28rpx 28rpx 188rpx;
|
|
background:
|
|
radial-gradient(circle at top right, rgba(31, 111, 95, 0.16), transparent 32%),
|
|
var(--bg-app);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.theme-dark {
|
|
--bg-app: #0f1720;
|
|
--bg-accent: linear-gradient(135deg, #09111a 0%, #1d4e46 100%);
|
|
--surface-card: rgba(19, 29, 40, 0.92);
|
|
--surface-strong: #162331;
|
|
--surface-muted: rgba(24, 35, 49, 0.76);
|
|
--text-primary: #eef5fb;
|
|
--text-secondary: #9db0c2;
|
|
--text-muted: #7c90a3;
|
|
--line-soft: rgba(255, 255, 255, 0.08);
|
|
--brand: #64c6a9;
|
|
--brand-soft: rgba(100, 198, 169, 0.14);
|
|
--danger: #ff8c78;
|
|
--danger-soft: rgba(255, 140, 120, 0.14);
|
|
--warning: #f2c56d;
|
|
--shadow-card: 0 18rpx 48rpx rgba(0, 0, 0, 0.28);
|
|
}
|
|
|
|
.surface-card {
|
|
background: var(--surface-card);
|
|
border: 1rpx solid var(--line-soft);
|
|
border-radius: 30rpx;
|
|
box-shadow: var(--shadow-card);
|
|
backdrop-filter: blur(12rpx);
|
|
}
|
|
|
|
.surface-strong {
|
|
background: var(--surface-strong);
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 34rpx;
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.section-subtitle {
|
|
font-size: 24rpx;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.pill-button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 18rpx 24rpx;
|
|
border-radius: 999rpx;
|
|
background: var(--surface-muted);
|
|
color: var(--text-secondary);
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.pill-button.active {
|
|
background: var(--brand);
|
|
color: #ffffff;
|
|
}
|
|
|
|
.primary-button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 22rpx 28rpx;
|
|
border-radius: 24rpx;
|
|
background: var(--bg-accent);
|
|
color: #ffffff;
|
|
font-size: 28rpx;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.ghost-button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 20rpx 26rpx;
|
|
border-radius: 22rpx;
|
|
background: var(--brand-soft);
|
|
color: var(--brand);
|
|
font-size: 26rpx;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.danger-button {
|
|
background: var(--danger-soft);
|
|
color: var(--danger);
|
|
}
|
|
|
|
.input-shell {
|
|
display: flex;
|
|
align-items: center;
|
|
min-height: 86rpx;
|
|
padding: 0 24rpx;
|
|
border-radius: 24rpx;
|
|
background: var(--surface-muted);
|
|
border: 1rpx solid transparent;
|
|
}
|
|
|
|
.input-shell input,
|
|
.input-shell textarea {
|
|
width: 100%;
|
|
font-size: 28rpx;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.muted-text {
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.tiny-text {
|
|
font-size: 22rpx;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.positive {
|
|
color: var(--brand);
|
|
}
|
|
|
|
.negative {
|
|
color: var(--danger);
|
|
}
|
|
</style>
|
|
|
|
|