|
42 | 42 |
|
43 | 43 | /* PLAN CARDS */ |
44 | 44 | .pr-plans{padding:48px 0 36px} |
45 | | -.plans-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin:0 auto;align-items:stretch} |
| 45 | +.plans-grid{display:grid;grid-template-columns:1fr 1.08fr;gap:28px;margin:0 auto;align-items:stretch} |
46 | 46 | .plan{background:var(--card);border:1.5px solid var(--border);border-radius:var(--r-xl);padding:44px 40px; |
47 | 47 | position:relative;overflow:hidden;transition:all .35s cubic-bezier(.4,0,.2,1); |
48 | 48 | display:flex;flex-direction:column;box-shadow:var(--shadow-card)} |
49 | 49 | .plan:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-hover)} |
50 | | -.plan-pop{border-color:rgba(199,70,52,.35);padding:0;overflow:hidden} |
51 | | -.plan-pop::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--red),var(--accent2))} |
52 | | -.plan-hero-zone{text-align:center;padding:40px 40px 28px; |
53 | | - background:linear-gradient(180deg,rgba(199,70,52,.12) 0%,rgba(199,70,52,.03) 60%,transparent 100%); |
| 50 | +.plan-pop{border-color:rgba(199,70,52,.45);padding:0;overflow:hidden; |
| 51 | + box-shadow:0 4px 30px rgba(199,70,52,.12),0 1px 3px rgba(0,0,0,.2); |
| 52 | + transform:scale(1.02)} |
| 53 | +.plan-pop:hover{transform:scale(1.02) translateY(-4px);box-shadow:0 12px 48px rgba(199,70,52,.18),0 0 20px rgba(199,70,52,.08)} |
| 54 | +.plan-pop::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--red),var(--accent2))} |
| 55 | +.plan-hero-zone{text-align:center;padding:44px 40px 30px; |
| 56 | + background:linear-gradient(180deg,rgba(199,70,52,.18) 0%,rgba(199,70,52,.06) 50%,transparent 100%); |
54 | 57 | position:relative} |
55 | | -.plan-pop .plan-badge{margin-bottom:14px} |
56 | | -.plan-orig-price{font-size:.95rem;color:var(--text-muted);text-decoration:line-through;margin-bottom:4px} |
57 | | -.plan-big-price{font-size:4.5rem;font-weight:900;color:var(--text);line-height:1;margin-bottom:8px;font-family:var(--display);letter-spacing:-2px} |
58 | | -.plan-yen{font-size:1.6rem;font-weight:700;color:var(--red-glow);vertical-align:super;margin-right:2px} |
59 | | -.plan-save-tag{display:inline-block;background:rgba(199,70,52,.15);color:var(--red-glow); |
60 | | - font-size:.75rem;font-weight:700;padding:4px 14px;border-radius:20px;margin-bottom:10px;letter-spacing:.5px} |
| 58 | +.plan-pop .plan-badge{margin-bottom:10px} |
| 59 | +.plan-pop .plan-name{font-size:1.6rem;margin-bottom:12px} |
| 60 | +.plan-orig-price{font-size:.95rem;color:var(--text-muted);text-decoration:line-through;margin-bottom:6px} |
| 61 | +.plan-big-price{font-size:5rem;font-weight:900;color:var(--text);line-height:1;margin-bottom:10px;font-family:var(--display);letter-spacing:-2px} |
| 62 | +.plan-yen{font-size:1.8rem;font-weight:700;color:var(--red-glow);vertical-align:super;margin-right:2px} |
| 63 | +.plan-save-tag{display:inline-block;background:rgba(199,70,52,.2);color:var(--red-glow); |
| 64 | + font-size:.78rem;font-weight:700;padding:5px 16px;border-radius:20px;margin-bottom:12px;letter-spacing:.5px; |
| 65 | + border:1px solid rgba(199,70,52,.2)} |
61 | 66 | .plan-buy-type{font-size:.82rem;color:var(--text-dim);letter-spacing:1px} |
62 | 67 | .plan-pop .plan-divider{margin:0 40px 20px} |
63 | 68 | .plan-pop .plan-features{padding:0 40px;margin-bottom:24px} |
|
149 | 154 |
|
150 | 155 | @media(max-width:768px){ |
151 | 156 | .plans-grid{grid-template-columns:1fr} |
| 157 | + .plan-pop{transform:none} |
| 158 | + .plan-pop:hover{transform:translateY(-4px)} |
152 | 159 | .plan-hero-zone{padding:32px 24px 22px} |
153 | | - .plan-big-price{font-size:3.5rem} |
| 160 | + .plan-big-price{font-size:3.8rem} |
154 | 161 | .plan-pop .plan-divider{margin:0 24px 16px} |
155 | 162 | .plan-pop .plan-features{padding:0 24px} |
156 | 163 | .plan-pop .plan-btn{margin:0 24px} |
@@ -257,6 +264,7 @@ <h1 class="anim-up grad-text" data-i18n="prTitle">选择适合您的版本</h1> |
257 | 264 | <div class="plan plan-pop reveal"> |
258 | 265 | <div class="plan-hero-zone"> |
259 | 266 | <div class="plan-badge" data-i18n="planPaidBadge">限时特惠</div> |
| 267 | + <div class="plan-name" data-i18n="planPaidName">专业版</div> |
260 | 268 | <div class="plan-orig-price" data-i18n="planOrigPrice">¥999</div> |
261 | 269 | <div class="plan-big-price"><span class="plan-yen">¥</span><span data-i18n="planBigNum">99</span></div> |
262 | 270 | <div class="plan-save-tag" data-i18n="planSaveTag">立省 ¥900</div> |
|
0 commit comments