style(subscription): update payment section spacing
This commit is contained in:
@@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user