style(subscription): update payment section spacing

This commit is contained in:
2026-06-23 16:55:34 +08:00
parent b40e6476bf
commit 3e148f5c0d
2 changed files with 32 additions and 35 deletions
@@ -1,17 +1,14 @@
.card { .card {
background: #ffffff; background-color: #ffffff;
border-radius: var(--radius-xl); border-radius: 21px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
overflow: hidden; overflow: hidden;
border: 1px solid rgba(0, 0, 0, 0.04); border: solid 1px rgba(0, 0, 0, 0.14);
} }
.header { .header {
background: linear-gradient( background-color: #fce4ec;
90deg, border-radius: 5px;
var(--color-auth-primary-gradient-start),
var(--color-auth-primary-gradient-end)
);
padding: var(--spacing-md); padding: var(--spacing-md);
text-align: center; text-align: center;
} }
@@ -20,35 +17,35 @@
margin: 0; margin: 0;
font-size: var(--font-size-lg); font-size: var(--font-size-lg);
font-weight: 600; font-weight: 600;
color: #ffffff; color: #f657a0;
line-height: 1.3; line-height: 1.3;
} }
.list { .list {
list-style: none; list-style: none;
margin: 0; margin: 18px 0;
padding: 0; padding: 0 0 0 20px;
} }
.item { .item {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
gap: var(--spacing-sm); gap: 0;
padding: var(--spacing-md) var(--spacing-lg); padding: 0;
font-size: var(--font-size-md); font-size: 14px;
color: var(--color-auth-text-primary); color: #1e1e1e;
line-height: 1.4; line-height: normal;
}
.item + .item {
border-top: 1px solid rgba(0, 0, 0, 0.05);
} }
.numeral { .numeral {
flex: 0 0 auto; flex: 0 0 auto;
font-weight: 500; font-weight: 500;
min-width: 20px; color: #1e1e1e;
color: var(--color-auth-text-primary); }
.numeral::after {
content: " ";
white-space: pre;
} }
.text { .text {
@@ -1,9 +1,3 @@
/* 视觉规格:
* - 全宽,52px 高
* - 粉渐变(#f96ADE → #f657A0
* - 半径 24,白字 16px/600
* - 阴影 0 3px 5px rgba(208,12,65,0.20)
*/
.button { .button {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
@@ -12,17 +6,23 @@
height: 52px; height: 52px;
padding: 0 var(--spacing-lg); padding: 0 var(--spacing-lg);
border: none; border: none;
border-radius: var(--radius-xxxl); border-radius: 35px;
background: linear-gradient( background-image:
90deg, linear-gradient(
var(--color-auth-primary-gradient-start), 269deg,
var(--color-auth-primary-gradient-end) #ff67e0 0%,
); rgba(254, 104, 224, 0.5) 20%,
box-shadow: 0 3px 5px var(--color-auth-primary-button-shadow); rgba(252, 105, 223, 0.79) 66%,
#f96ade 100%
),
linear-gradient(#f657a0, #f657a0);
background-blend-mode: normal, normal;
box-shadow: 0 5px 7px 0 rgba(247, 89, 168, 0.31);
color: #ffffff; color: #ffffff;
font-size: var(--font-size-lg); font-size: var(--font-size-lg);
font-weight: 600; font-weight: 600;
cursor: pointer; cursor: pointer;
opacity: 0.85;
transition: filter 0.15s ease, transform 0.05s ease, opacity 0.15s ease; transition: filter 0.15s ease, transform 0.05s ease, opacity 0.15s ease;
} }