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

feat: Implement responsive page layout components and CSS variables

Browse Source 
- Added PageScaffold component for shared page layout with safe-area padding and scroll management.
- Introduced ResponsiveMobileShell for mobile canvas layout with customizable backgrounds.
- Created ScrollablePage component for scrollable content areas.
- Updated CSS styles for coins rules screen, sidebar components, and subscription sections to use responsive design tokens.
- Added viewport CSS variables provider to synchronize CSS variables with the visual viewport.
- Refactored breakpoints and dimensions for better responsiveness across devices.
This commit is contained in:
chenhang
2026-07-02 18:05:17 +08:00
parent 3592c6bb56
commit 34c8e2db4e
23 changed files with 497 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/subscription/components/subscription-coins-offer-section.module.css
+17 -11
View File
@@ -1,7 +1,7 @@
.section {
overflow: hidden;
border: 1px solid rgba(17, 17, 17, 0.12);
border-radius: 28px;
border-radius: var(--responsive-card-radius, 28px);
background: #fff8df;
box-shadow: 0 16px 42px rgba(220, 162, 36, 0.12);
backdrop-filter: blur(18px);
@@ -9,7 +9,10 @@
.heading {
position: relative;
padding: 18px 18px 22px;
padding:
var(--responsive-card-padding, 18px)
var(--responsive-card-padding, 18px)
var(--responsive-card-padding-lg, 22px);
background:
linear-gradient(135deg, #fffdf2 0%, #fff3c8 58%, #ffe8a6 100%),
#fff3c8;
@@ -18,7 +21,7 @@
.title {
margin: 0;
color: #181014;
font-size: 22px;
font-size: var(--responsive-page-title, 22px);
font-weight: 800;
line-height: 1.2;
}
@@ -38,8 +41,11 @@
z-index: 1;
display: flex;
flex-direction: column;
gap: 8px;
padding: 18px 12px 14px;
gap: var(--spacing-sm, 8px);
padding:
var(--responsive-card-padding, 18px)
clamp(10px, 2.222vw, 12px)
clamp(12px, 2.593vw, 14px);
background: transparent;
}
@@ -48,10 +54,10 @@
grid-template-columns: 48px minmax(0, 1fr) auto auto;
align-items: center;
width: 100%;
min-height: 48px;
min-height: var(--responsive-control-height, 48px);
padding: 8px 12px 8px 6px;
border: 1px solid transparent;
border-radius: 18px;
border-radius: var(--responsive-card-radius-sm, 18px);
background: #ffffff;
color: #53484d;
cursor: pointer;
@@ -97,7 +103,7 @@
.coins {
min-width: 0;
font-size: 16px;
font-size: var(--responsive-body, 16px);
font-weight: 700;
line-height: 1.2;
}
@@ -108,7 +114,7 @@
border-radius: 999px;
background: linear-gradient(135deg, #ff5fae 0%, #ff8a34 100%);
color: #ffffff;
font-size: 14px;
font-size: clamp(10px, 2.593vw, 14px);
font-weight: 900;
line-height: 1;
white-space: nowrap;
@@ -125,7 +131,7 @@
}
.price {
font-size: 16px;
font-size: var(--responsive-body, 16px);
font-weight: 800;
line-height: 1.2;
white-space: nowrap;
@@ -134,7 +140,7 @@
.originalPrice {
margin-top: 3px;
color: #9c8b91;
font-size: 12px;
font-size: var(--responsive-micro, 12px);
font-weight: 800;
line-height: 1;
text-decoration: line-through;
src/app/subscription/components/subscription-screen.module.css
+19 -15
View File
@@ -5,7 +5,11 @@
background:
radial-gradient(circle at 8% 4%, rgba(255, 255, 255, 0.95) 0 90px, transparent 160px),
linear-gradient(180deg, #fff9fb 0%, #fcf3f4 52%, #fffefe 100%);
padding: 18px 20px 10px;
padding:
calc(var(--page-padding-y, 18px) + var(--app-safe-top, 0px))
calc(var(--page-padding-x, 20px) + var(--app-safe-right, 0px))
calc(10px + var(--app-safe-bottom, 0px))
calc(var(--page-padding-x, 20px) + var(--app-safe-left, 0px));
}
.header {
@@ -21,11 +25,11 @@
.firstRechargeBanner {
display: flex;
align-items: center;
gap: 12px;
margin-top: 14px;
padding: 12px 14px;
gap: var(--spacing-md, 12px);
margin-top: var(--page-section-gap, 14px);
padding: clamp(10px, 2.222vw, 12px) clamp(12px, 2.593vw, 14px);
border: 1px solid rgba(255, 95, 174, 0.28);
border-radius: 22px;
border-radius: var(--responsive-card-radius-sm, 22px);
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 239, 248, 0.94) 100%),
#ffffff;
@@ -38,7 +42,7 @@
border-radius: 999px;
background: linear-gradient(135deg, #ff5fae 0%, #ff8a34 100%);
color: #ffffff;
font-size: 20;
font-size: clamp(20px, 5.185vw, 28px);
font-weight: 900;
line-height: 1;
box-shadow: 0 10px 22px rgba(255, 95, 174, 0.25);
@@ -51,7 +55,7 @@
.firstRechargeTitle {
margin: 0;
color: #181014;
font-size: 17px;
font-size: var(--responsive-card-title, 17px);
font-weight: 900;
line-height: 1.15;
}
@@ -59,7 +63,7 @@
.firstRechargeSubtitle {
margin: 4px 0 0;
color: #75656d;
font-size: 12px;
font-size: var(--responsive-micro, 12px);
font-weight: 700;
line-height: 1.25;
}
@@ -67,8 +71,8 @@
.offerStack {
display: flex;
flex-direction: column;
gap: 18px;
margin-top: 14px;
gap: var(--page-section-gap, 18px);
margin-top: var(--page-section-gap, 14px);
}
.userSlot {
@@ -92,7 +96,7 @@
margin: 0;
padding: var(--spacing-md) var(--spacing-xs);
color: var(--color-text-secondary);
font-size: var(--font-size-sm);
font-size: var(--responsive-caption, var(--font-size-sm));
text-align: center;
line-height: 1.5;
}
@@ -100,7 +104,7 @@
.autoRenewCaption {
margin-top: var(--spacing-xxl);
padding: 0 var(--spacing-xs);
font-size: var(--font-size-lg);
font-size: var(--responsive-body, var(--font-size-lg));
color: #3c3b3b;
}
@@ -113,11 +117,11 @@
}
.paymentMethodSlot {
margin-top: 22px;
margin-top: var(--page-section-gap-lg, 22px);
}
.ctaSlot {
margin-top: 22px;
margin-top: var(--page-section-gap-lg, 22px);
}
.agreementSlot {
@@ -126,7 +130,7 @@
}
.agreementLabel {
font-size: 12px;
font-size: var(--responsive-micro, 12px);
}
.agreementLink {
src/app/subscription/components/subscription-vip-offer-section.module.css
+21 -15
View File
@@ -1,7 +1,7 @@
.section {
overflow: hidden;
border: 1px solid rgba(255, 71, 166, 0.28);
border-radius: 28px;
border-radius: var(--responsive-card-radius, 28px);
background: #ffe2f0;
box-shadow: 0 18px 45px rgba(255, 71, 166, 0.22);
backdrop-filter: blur(18px);
@@ -9,7 +9,10 @@
.summary {
position: relative;
padding: 18px 18px 22px;
padding:
var(--responsive-card-padding, 18px)
var(--responsive-card-padding, 18px)
var(--responsive-card-padding-lg, 22px);
background:
linear-gradient(135deg, #ff9bd1 0%, #ff61ad 56%, #f657a0 100%),
#ff61ad;
@@ -25,20 +28,20 @@
.titleText {
color: #181014;
font-size: 20px;
font-size: var(--responsive-section-title, 20px);
font-weight: 800;
}
.renewText {
color: rgba(255, 255, 255, 0.82);
font-size: 13px;
font-size: var(--responsive-caption, 13px);
font-weight: 700;
}
.subtitle {
margin: 8px 0 0;
color: rgba(255, 255, 255, 0.9);
font-size: 15px;
font-size: var(--responsive-body, 15px);
font-weight: 700;
line-height: 1.3;
}
@@ -58,21 +61,24 @@
z-index: 1;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
padding: 18px 10px 12px;
gap: clamp(7px, 1.667vw, 9px);
padding:
var(--responsive-card-padding, 18px)
clamp(8px, 1.852vw, 10px)
clamp(10px, 2.222vw, 12px);
}
.planCard {
position: relative;
display: flex;
min-width: 0;
min-height: 128px;
min-height: clamp(116px, 23.704vw, 128px);
flex-direction: column;
align-items: center;
justify-content: center;
padding: 12px 6px 11px;
padding: clamp(10px, 2.222vw, 12px) 6px clamp(9px, 2.037vw, 11px);
border: 1px solid rgba(246, 87, 160, 0.08);
border-radius: 20px;
border-radius: var(--responsive-card-radius-sm, 20px);
background: #ffffff;
color: #181014;
cursor: pointer;
@@ -111,7 +117,7 @@
border-radius: 999px;
background: linear-gradient(135deg, #ff5fae 0%, #ff8a34 100%);
color: #ffffff;
font-size: 16px;
font-size: clamp(12px, 2.963vw, 16px);
font-weight: 900;
line-height: 1;
white-space: nowrap;
@@ -121,7 +127,7 @@
.planTitle {
margin-top: 20px;
font-size: 19px;
font-size: clamp(16px, 3.519vw, 19px);
font-weight: 800;
line-height: 1.15;
white-space: nowrap;
@@ -136,7 +142,7 @@
}
.price {
font-size: 30px;
font-size: var(--font-responsive-number-lg, 30px);
font-weight: 500;
letter-spacing: -0.8px;
}
@@ -144,7 +150,7 @@
.currency {
margin-bottom: 3px;
color: #8b717a;
font-size: 12px;
font-size: var(--responsive-micro, 12px);
font-weight: 700;
text-transform: lowercase;
}
@@ -152,7 +158,7 @@
.originalPrice {
margin-top: 10px;
color: #9c8b91;
font-size: 14px;
font-size: var(--responsive-caption, 14px);
font-weight: 800;
line-height: 1;
text-decoration: line-through;