banlv/cozsweet-frontend-nextjs
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): add responsive mobile design tokens

Browse Source
This commit is contained in:
chenhang
2026-06-25 10:50:46 +08:00
parent cc065f7781
commit 038b207964
8 changed files with 63 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/_components/core/mobile-shell.module.css
+2 -2
View File
@@ -5,7 +5,7 @@
justify-content: center;
width: 100%;
min-height: var(--app-viewport-height, 100dvh);
background: #000000; /* 显式黑，桌面端 500px 外圈为黑色 */
background: #000000; /* 显式黑，桌面端移动壳外圈为黑色 */
}
.content {
@@ -14,6 +14,6 @@
flex: 1 1 auto;
flex-direction: column;
width: 100%;
max-width: 500px;
max-width: var(--app-max-width, 540px);
min-height: var(--app-viewport-height, 100dvh);
}
src/app/globals.css
+1
View File
@@ -13,6 +13,7 @@
@import "../tokens/border-widths.css";
@import "../tokens/icon-sizes.css";
@import "../tokens/breakpoints.css";
@import "../tokens/responsive.css";
@import "../tokens/dimensions.css";
/* ============================================================
src/app/sidebar/components/sidebar-screen.module.css
+3 -3
View File
@@ -7,16 +7,16 @@
background: var(--color-page-background, #ffffff);
color: var(--color-auth-text-primary, #333333);
min-height: 100dvh;
padding: 0 28px var(--spacing-xxl, 24px);
padding: 0 var(--page-padding-x, 28px) var(--spacing-xxl, 24px);
box-sizing: border-box;
}
.userSlot {
padding: 20px 0;
padding: var(--sidebar-user-padding-y, 20px) 0;
}
.cardSlot {
padding: var(--spacing-sm, 8px) 0;
padding: var(--sidebar-card-gap-y, 8px) 0;
}
.settingsSlot {
src/app/sidebar/components/user-header.module.css
+5 -5
View File
@@ -8,8 +8,8 @@
.avatar {
flex: 0 0 auto;
width: 56px;
height: 56px;
width: var(--sidebar-avatar-size, 56px);
height: var(--sidebar-avatar-size, 56px);
border-radius: 50%;
background: var(--color-accent, #f84d96);
display: flex;
@@ -40,7 +40,7 @@
.name {
margin: 0;
font-size: var(--font-size-lg, 16px);
font-size: var(--font-responsive-md, 16px);
font-weight: 600;
color: #000000;
line-height: 1.2;
@@ -51,7 +51,7 @@
.subtitle {
margin: 0;
font-size: var(--font-size-sm, 12px);
font-size: clamp(12px, 2.593vw, 14px);
color: var(--color-text-secondary, #9e9e9e);
line-height: 1.2;
}
@@ -91,7 +91,7 @@
var(--color-button-gradient-end, #ff52a2)
);
color: var(--color-text-primary, #ffffff);
font-size: var(--font-size-sm, 12px);
font-size: clamp(12px, 2.593vw, 14px);
font-weight: 600;
border: 0;
cursor: pointer;
src/app/sidebar/components/vip-benefits-card.module.css
+6 -4
View File
@@ -17,7 +17,9 @@
border-radius: 21px;
width: 100%;
box-sizing: border-box;
padding: 18px 0 18px 18px;
padding: var(--sidebar-card-padding-y, 18px) 0
var(--sidebar-card-padding-y, 18px)
var(--sidebar-card-padding-x, 18px);
overflow: hidden;
}
@@ -31,7 +33,7 @@
.title {
margin: 0;
font-size: var(--font-size-xxl);
font-size: var(--font-responsive-xl, 20px);
font-weight: 700;
color: #f657a0;
line-height: 1.3;
@@ -63,7 +65,7 @@
align-items: flex-start;
gap: 0;
padding: 0;
font-size: var(--font-size-lg);
font-size: var(--font-responsive-md, 16px);
color: #1e1e1e;
line-height: normal;
}
@@ -104,7 +106,7 @@
linear-gradient(#fb5e9d, #fb5e9d);
background-blend-mode: normal, normal;
color: var(--color-text-primary, #ffffff);
font-size: var(--font-size-lg);
font-size: var(--font-responsive-md, 16px);
font-weight: 600;
border: 0;
cursor: pointer;
src/app/sidebar/components/voice-package-card.module.css
+14 -11
View File
@@ -15,7 +15,10 @@
border: solid 1px #fbbcb6;
border-radius: 21px;
width: 100%;
padding: 18px 12px 18px 18px;
padding: var(--sidebar-card-padding-y, 18px)
var(--sidebar-card-padding-right, 12px)
var(--sidebar-card-padding-y, 18px)
var(--sidebar-card-padding-x, 18px);
box-sizing: border-box;
overflow: hidden;
}
@@ -41,15 +44,15 @@
}
.title {
font-size: var(--font-size-xxl);
font-size: var(--font-responsive-xl, 20px);
font-weight: 700;
color: var(--color-accent, #f84d96);
}
.micIcon {
flex: 0 0 auto;
width: 100px;
height: 100px;
width: var(--sidebar-voice-image-size, 100px);
height: var(--sidebar-voice-image-size, 100px);
display: flex;
align-items: center;
justify-content: center;
@@ -57,8 +60,8 @@
.micImage {
display: block;
width: 100px;
height: 100px;
width: var(--sidebar-voice-image-size, 100px);
height: var(--sidebar-voice-image-size, 100px);
object-fit: contain;
}
@@ -76,7 +79,7 @@
.usedNumber {
display: inline-flex;
color: #fa438b;
font-size: 30px;
font-size: var(--font-responsive-number-lg, 30px);
font-weight: 700;
line-height: 1;
}
@@ -84,7 +87,7 @@
.totalNumber {
display: inline-flex;
color: #000000;
font-size: 30px;
font-size: var(--font-responsive-number-lg, 30px);
font-weight: 700;
line-height: 1;
}
@@ -92,12 +95,12 @@
.usageUnit {
color: var(--color-text-secondary, #9e9e9e);
display: inline-flex;
font: 400 var(--font-size-xl, 18px) / 1 var(--font-sans);
font: 400 var(--font-responsive-lg, 18px) / 1 var(--font-sans);
}
.usageText {
color: #adabab;
font-size: 18px;
font-size: var(--font-responsive-lg, 18px);
font-weight: 400;
}
@@ -116,7 +119,7 @@
linear-gradient(#f69757, #f69757);
background-blend-mode: normal, normal;
color: var(--color-text-primary, #ffffff);
font-size: var(--font-size-lg);
font-size: var(--font-responsive-md, 16px);
font-weight: 600;
border: 0;
cursor: pointer;