Skip to content

Commit 942ab79

Browse files
pc-studypc-study
committed
enhance: Apple design refinements, fix nav flash, redesign Pro pricing card
- Apply Apple-inspired design: subtler section dividers, neutral eyebrows, unified card shadows, refined spacing and typography across all pages - Fix page navigation flash: remove view transitions, add instant theme init in <head> across all 189 HTML files, remove page-progress bar - Redesign Pro plan card with "限时特惠" style: gradient header zone, original price strikethrough, large ¥99 price, savings badge - Bump cache version to v=20260321l / os-v30
1 parent 914797a commit 942ab79

192 files changed

Lines changed: 1304 additions & 1286 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎404.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="zh-CN">
33
<head>
44
<meta charset="UTF-8">
5-
<script>try{var l=localStorage.getItem("lang");if(l)document.documentElement.lang=l==="en"?"en":"zh-CN"}catch(e){}</script>
5+
<script>try{var l=localStorage.getItem("lang");if(l)document.documentElement.lang=l==="en"?"en":"zh-CN"}catch(e){}try{var t=localStorage.getItem("theme")||"dark";document.documentElement.setAttribute("data-theme",t)}catch(e){document.documentElement.setAttribute("data-theme","dark")}</script>
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<meta name="baidu-site-verification" content="codeva-5szOVhdF6k" />
88
<meta name="google-site-verification" content="FiO8gdu01Lz27qUPg4W2BfgG4VhD8ZWMXeiOa_ILa44" />
@@ -20,11 +20,11 @@
2020
<link rel="icon" href="favicon.svg" type="image/svg+xml">
2121
<link rel="icon" href="favicon-32x32.png" sizes="32x32" type="image/png">
2222
<link rel="apple-touch-icon" href="apple-touch-icon.png">
23-
<link rel="manifest" href="manifest.json?v=20260321i">
23+
<link rel="manifest" href="manifest.json?v=20260321l">
2424
<link rel="preconnect" href="https://fonts.googleapis.com">
2525
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
2626
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600&family=Noto+Sans+SC:wght@300;400;500;700;900&family=Orbitron:wght@700;900&display=swap" rel="stylesheet">
27-
<link rel="stylesheet" href="css/style.css?v=20260321i">
27+
<link rel="stylesheet" href="css/style.css?v=20260321l">
2828
<style>
2929
.err-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;
3030
text-align:center;min-height:calc(100vh - 200px);padding:100px 20px 80px}
@@ -111,7 +111,7 @@ <h1 class="err-title" data-i18n="err404Title">页面未找到</h1>
111111
</section>
112112

113113
<div id="footer"></div>
114-
<script src="js/shared.js?v=20260321i"></script>
114+
<script src="js/shared.js?v=20260321l"></script>
115115
<script>
116116
document.getElementById('nav').innerHTML = navHTML('');
117117
document.getElementById('footer').innerHTML = footerHTML();
@@ -143,6 +143,6 @@ <h1 class="err-title" data-i18n="err404Title">页面未找到</h1>
143143
if (currentLang !== 'zh') setLang(currentLang);
144144
</script>
145145
<script>if('serviceWorker' in navigator){navigator.serviceWorker.register('sw.js')}</script>
146-
<script src="js/search.js?v=20260321i"></script>
146+
<script src="js/search.js?v=20260321l"></script>
147147
</body>
148148
</html>

‎compat.html‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="zh-CN">
33
<head>
44
<meta charset="UTF-8">
5-
<script>try{var l=localStorage.getItem("lang");if(l)document.documentElement.lang=l==="en"?"en":"zh-CN"}catch(e){}</script>
5+
<script>try{var l=localStorage.getItem("lang");if(l)document.documentElement.lang=l==="en"?"en":"zh-CN"}catch(e){}try{var t=localStorage.getItem("theme")||"dark";document.documentElement.setAttribute("data-theme",t)}catch(e){document.documentElement.setAttribute("data-theme","dark")}</script>
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<meta name="baidu-site-verification" content="codeva-5szOVhdF6k" />
88
<meta name="google-site-verification" content="FiO8gdu01Lz27qUPg4W2BfgG4VhD8ZWMXeiOa_ILa44" />
@@ -29,26 +29,26 @@
2929
<link rel="icon" href="favicon.svg" type="image/svg+xml">
3030
<link rel="icon" href="favicon-32x32.png" sizes="32x32" type="image/png">
3131
<link rel="apple-touch-icon" href="apple-touch-icon.png">
32-
<link rel="manifest" href="manifest.json?v=20260321i">
32+
<link rel="manifest" href="manifest.json?v=20260321l">
3333
<link rel="preconnect" href="https://fonts.googleapis.com">
3434
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
3535
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600&family=Noto+Sans+SC:wght@300;400;500;700;900&family=Orbitron:wght@700;900&display=swap" rel="stylesheet">
36-
<link rel="stylesheet" href="css/style.css?v=20260321i">
36+
<link rel="stylesheet" href="css/style.css?v=20260321l">
3737
<style>
3838
/* HERO */
39-
.cp-hero{padding:80px 0 20px;text-align:center}
40-
.cp-hero h1{font-size:clamp(1.8rem,4vw,2.6rem);font-weight:900;color:var(--text);margin-bottom:12px}
41-
.cp-hero p{color:var(--text-dim);font-size:1rem;max-width:620px;margin:0 auto;line-height:1.7;font-weight:300}
39+
.cp-hero{padding:100px 0 24px;text-align:center}
40+
.cp-hero h1{font-size:clamp(1.8rem,4vw,2.6rem);font-weight:900;color:var(--text);margin-bottom:14px}
41+
.cp-hero p{color:var(--text-dim);font-size:.95rem;max-width:580px;margin:0 auto;line-height:1.75;font-weight:300}
4242

4343
/* STATS BAR */
44-
.cp-stats{display:flex;justify-content:center;gap:40px;flex-wrap:wrap;margin-top:32px}
44+
.cp-stats{display:flex;justify-content:center;gap:40px;flex-wrap:wrap;margin-top:36px}
4545
.cp-stat{text-align:center}
4646
.cp-stat-num{font-size:2rem;font-weight:900;font-family:var(--display);background:linear-gradient(135deg,var(--red),var(--accent2));
4747
-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:transparent}
48-
.cp-stat-label{font-size:.78rem;color:var(--text-muted);margin-top:4px}
48+
.cp-stat-label{font-size:.78rem;color:var(--text-muted);margin-top:6px}
4949

5050
/* COMPAT MATRIX */
51-
.cp-matrix{padding:50px 0 40px}
51+
.cp-matrix{padding:56px 0 44px}
5252
.mx-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
5353
.mx-table{width:100%;border-collapse:separate;border-spacing:0;min-width:680px}
5454
.mx-table th,.mx-table td{padding:12px 16px;text-align:center;font-size:.84rem;border-bottom:1px solid var(--border)}
@@ -63,7 +63,7 @@
6363
.mx-note{margin-top:16px;font-size:.82rem;color:var(--text-muted);line-height:1.7;text-align:center;font-style:italic}
6464

6565
/* GUIDES SECTION */
66-
.cp-guides{padding:50px 0 40px}
66+
.cp-guides{padding:56px 0 44px}
6767
.gd-filter{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:28px 0 32px}
6868
.gd-filter-btn{background:var(--card);border:1px solid var(--border);border-radius:20px;padding:6px 16px;
6969
font-size:.78rem;color:var(--text-dim);cursor:pointer;transition:all .25s;font-family:var(--font)}
@@ -278,7 +278,7 @@ <h1 class="anim-up grad-text" data-i18n="cpTitle">安装合集</h1>
278278
</div></section>
279279

280280
<div id="footer"></div>
281-
<script src="js/shared.js?v=20260321i"></script>
281+
<script src="js/shared.js?v=20260321l"></script>
282282
<script>
283283
document.getElementById('nav').innerHTML = navHTML('compat');
284284
document.getElementById('footer').innerHTML = footerHTML();
@@ -670,6 +670,6 @@ <h1 class="anim-up grad-text" data-i18n="cpTitle">安装合集</h1>
670670
});
671671
</script>
672672
<script>if('serviceWorker' in navigator){navigator.serviceWorker.register('sw.js')}</script>
673-
<script src="js/search.js?v=20260321i"></script>
673+
<script src="js/search.js?v=20260321l"></script>
674674
</body>
675675
</html>

‎css/style.css‎

Lines changed: 44 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -4,34 +4,40 @@
44
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
55
:root{
66
--red:#C74634;--red-glow:#e05a48;--red-dark:#a83a2b;
7+
--red-subtle:rgba(199,70,52,.7);
78
--bg:#0a0a0e;--bg2:#111118;--bg3:#181822;
89
--card:#14141d;
910
--border:#232334;--border-light:#33334a;--border-red:rgba(199,70,52,.25);
10-
--text:#e8e6e3;--text-dim:#9a9aaa;--text-muted:#7a7a90;
11+
--text:#e8e6e3;--text-dim:#8e8e9e;--text-muted:#6e6e82;
1112
--accent:#C74634;--accent2:#e8934a;--green:#3aba6a;--blue:#4a8fe8;
1213
--font:'Noto Sans SC',system-ui,sans-serif;
1314
--mono:'JetBrains Mono','Fira Code',monospace;
1415
--display:'Orbitron',sans-serif;
15-
--r:10px;--r-sm:6px;--r-lg:14px;--r-xl:18px;
16+
--r:12px;--r-sm:8px;--r-lg:16px;--r-xl:20px;
1617
--max-w:1160px;
1718
--nav-h:64px;
1819
--term-bg:#1a1a24;
1920
--card-hover:#1a1a28;
2021
--glow-sm:0 0 20px rgba(199,70,52,.15);
2122
--glow-md:0 0 40px rgba(199,70,52,.12),0 0 80px rgba(199,70,52,.06);
23+
--shadow-card:0 1px 3px rgba(0,0,0,.2);
24+
--shadow-card-hover:0 12px 40px rgba(0,0,0,.2),0 0 20px rgba(199,70,52,.08);
2225
}
2326
/* Light theme */
2427
[data-theme="light"]{
25-
--bg:#f4f4f7;--bg2:#eaeaef;--bg3:#e0e0e8;
28+
--bg:#f5f5f7;--bg2:#eeeef2;--bg3:#e4e4ea;
2629
--card:#fff;
27-
--border:#d0d0da;--border-light:#b8b8c8;--border-red:rgba(199,70,52,.2);
28-
--text:#1a1a2e;--text-dim:#5a5a70;--text-muted:#8a8a9e;
30+
--border:#d8d8e0;--border-light:#c0c0cc;--border-red:rgba(199,70,52,.18);
31+
--text:#1a1a2e;--text-dim:#555568;--text-muted:#86869a;
32+
--red-subtle:rgba(199,70,52,.8);
2933
--green:#1a8a4a;--blue:#2a6ac0;
30-
--accent2:#d07830;
34+
--accent2:#c06a28;
3135
--term-bg:#1a1a24;
3236
--card-hover:#f0f0f5;
33-
--glow-sm:0 0 20px rgba(199,70,52,.08);
34-
--glow-md:0 0 40px rgba(199,70,52,.08),0 0 80px rgba(199,70,52,.04);
37+
--glow-sm:0 0 20px rgba(199,70,52,.06);
38+
--glow-md:0 0 30px rgba(199,70,52,.06),0 0 60px rgba(199,70,52,.03);
39+
--shadow-card:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
40+
--shadow-card-hover:0 12px 40px rgba(0,0,0,.08),0 0 0 1px rgba(199,70,52,.06);
3541
}
3642
/* Keep terminal areas dark in light mode */
3743
[data-theme="light"] .cmd-code,
@@ -116,23 +122,24 @@ img{max-width:100%;display:block}
116122

117123
/* === CONTAINER === */
118124
.container{max-width:var(--max-w);margin:0 auto;padding:0 24px}
119-
.section{padding:80px 0}
120-
.section-sm{padding:50px 0}
125+
.section{padding:100px 0}
126+
.section-sm{padding:70px 0}
121127

122128
/* === GRADIENT TEXT UTILITY === */
123129
.grad-text{background:linear-gradient(135deg,var(--red-glow),var(--accent2));
124130
-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:transparent}
125131

126132
/* === COMMON TYPOGRAPHY === */
127-
.section-eyebrow{font-size:.78rem;text-transform:uppercase;letter-spacing:3px;color:var(--red);
128-
font-weight:600;margin-bottom:12px;display:flex;align-items:center;gap:10px}
129-
.section-eyebrow::before{content:'';width:24px;height:1px;background:var(--red)}
133+
.section-eyebrow{font-size:.72rem;text-transform:uppercase;letter-spacing:4px;color:var(--text-muted);
134+
font-weight:600;margin-bottom:14px;display:flex;align-items:center;gap:10px}
135+
.section-eyebrow::before{content:'';width:24px;height:1px;background:var(--text-muted)}
130136
.section-center .section-eyebrow{justify-content:center}
131137
.section-center .section-eyebrow::before{display:none}
132-
.section-title{font-size:clamp(1.6rem,3.5vw,2.2rem);font-weight:900;color:var(--text);line-height:1.3;margin-bottom:12px}
133-
.section-desc{font-size:1rem;color:var(--text-dim);max-width:600px;line-height:1.7;font-weight:300}
138+
.section-title{font-size:clamp(1.6rem,3.5vw,2.4rem);font-weight:900;color:var(--text);line-height:1.25;margin-bottom:14px}
139+
.section-desc{font-size:.95rem;color:var(--text-dim);max-width:560px;line-height:1.75;font-weight:300}
134140
.section-center{text-align:center}
135141
.section-center .section-desc{margin:0 auto}
142+
.section-tag{font-size:.72rem;text-transform:uppercase;letter-spacing:4px;color:var(--text-muted);font-weight:600;margin-bottom:8px}
136143

137144
/* === BUTTONS === */
138145
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 28px;border-radius:var(--r);
@@ -153,14 +160,16 @@ img{max-width:100%;display:block}
153160

154161
/* === CARDS === */
155162
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);
156-
padding:28px 24px;transition:all .35s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}
163+
padding:32px 28px;transition:all .35s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;
164+
box-shadow:var(--shadow-card)}
157165
.card::before{content:'';position:absolute;inset:0;
158-
background:linear-gradient(135deg,rgba(199,70,52,.06) 0%,transparent 50%,rgba(199,70,52,.03) 100%);
166+
background:linear-gradient(135deg,rgba(199,70,52,.04) 0%,transparent 50%,rgba(199,70,52,.02) 100%);
159167
opacity:0;transition:opacity .35s;pointer-events:none}
160-
.card:hover{border-color:rgba(199,70,52,.3);transform:translateY(-3px);
161-
box-shadow:0 12px 40px rgba(0,0,0,.15),var(--glow-sm)}
168+
.card:hover{border-color:rgba(199,70,52,.2);transform:translateY(-3px);
169+
box-shadow:var(--shadow-card-hover)}
162170
.card:hover::before{opacity:1}
163-
[data-theme="light"] .card:hover{box-shadow:0 12px 40px rgba(0,0,0,.08),0 0 20px rgba(199,70,52,.06)}
171+
[data-theme="light"] .card{box-shadow:var(--shadow-card)}
172+
[data-theme="light"] .card:hover{box-shadow:var(--shadow-card-hover)}
164173

165174
/* === TAGS === */
166175
.tag{display:inline-flex;align-items:center;background:var(--bg3);border:1px solid var(--border);
@@ -183,16 +192,13 @@ img{max-width:100%;display:block}
183192
pointer-events:none}
184193

185194
/* === SECTION DIVIDER === */
186-
.section-divider{height:1px;border:none;margin:0;position:relative;
187-
background:linear-gradient(90deg,transparent,var(--border-light) 20%,var(--border) 50%,var(--border-light) 80%,transparent)}
188-
.section-divider::after{content:'';position:absolute;top:-1px;left:50%;transform:translateX(-50%);
189-
width:120px;height:3px;background:linear-gradient(90deg,transparent,var(--red) 40%,var(--red-glow) 50%,var(--red) 60%,transparent);
190-
border-radius:2px;filter:blur(1px);opacity:.6}
195+
.section-divider{height:1px;border:none;margin:0;
196+
background:linear-gradient(90deg,transparent,var(--border) 20%,var(--border-light) 50%,var(--border) 80%,transparent)}
191197

192198
/* === FOOTER === */
193-
.footer{border-top:none;padding:50px 0 40px;position:relative}
199+
.footer{border-top:none;padding:60px 0 40px;position:relative}
194200
.footer::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;
195-
background:linear-gradient(90deg,transparent,rgba(199,70,52,.3) 30%,rgba(199,70,52,.4) 50%,rgba(199,70,52,.3) 70%,transparent)}
201+
background:linear-gradient(90deg,transparent,var(--border-light) 30%,var(--border-light) 70%,transparent)}
196202
.footer-inner{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px}
197203
.footer-brand .footer-logo{font-weight:900;font-size:1.1rem;color:var(--text);margin-bottom:8px}
198204
.footer-brand .footer-logo span{color:var(--red)}
@@ -298,7 +304,8 @@ img{max-width:100%;display:block}
298304
}
299305
@media(max-width:900px){
300306
.footer-inner{grid-template-columns:1fr 1fr;gap:30px}
301-
.section{padding:60px 0}
307+
.section{padding:70px 0}
308+
.section-sm{padding:56px 0}
302309
.nav-links a{padding:6px 10px;font-size:.82rem}
303310
}
304311
@media(max-width:768px){
@@ -332,7 +339,8 @@ img{max-width:100%;display:block}
332339
.wechat-popup{bottom:186px;right:16px;width:260px;padding:16px}
333340

334341
.footer-inner{grid-template-columns:1fr}
335-
.section{padding:50px 0}
342+
.section{padding:56px 0}
343+
.section-sm{padding:44px 0}
336344
.btn{padding:10px 22px;font-size:.85rem}
337345
.nav-toggle{padding:6px 12px;font-size:.78rem;min-height:36px}
338346
.section-eyebrow::before{width:16px}
@@ -550,10 +558,10 @@ img{max-width:100%;display:block}
550558
.pay-next{margin-top:12px;padding:12px 20px;background:linear-gradient(135deg,rgba(74,143,232,.08),rgba(74,143,232,.02));border:1px solid rgba(74,143,232,.2);border-radius:var(--r);font-size:.88rem;color:var(--text-dim);text-align:center;line-height:1.7}
551559
.pay-next a{color:var(--blue);font-weight:600;text-decoration:none}
552560
.pay-next a:hover{text-decoration:underline}
553-
.pr-download{padding:40px 0 30px}
554-
.pr-dl-box{text-align:center;padding:44px 36px;background:linear-gradient(135deg,rgba(199,70,52,.08),rgba(232,147,74,.04));border:1.5px solid rgba(199,70,52,.25);border-radius:var(--r-xl);transition:all .35s;position:relative;overflow:hidden}
555-
.pr-dl-box::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--red),var(--accent2))}
556-
.pr-dl-box:hover{border-color:rgba(199,70,52,.4);box-shadow:0 8px 40px rgba(199,70,52,.1)}
561+
.pr-download{padding:44px 0 30px}
562+
.pr-dl-box{text-align:center;padding:48px 40px;background:var(--card);border:1.5px solid var(--border);border-radius:var(--r-xl);transition:all .35s;position:relative;overflow:hidden;box-shadow:var(--shadow-card)}
563+
.pr-dl-box::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--red),var(--accent2))}
564+
.pr-dl-box:hover{border-color:var(--border-light);box-shadow:var(--shadow-card-hover)}
557565
.pr-dl-box h3{font-size:1.4rem;font-weight:900;margin-bottom:12px;display:flex;align-items:center;justify-content:center;gap:10px}
558566
.pr-dl-box h3::before{content:'\2193';display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:rgba(199,70,52,.12);color:var(--red);font-size:1rem;font-weight:700;flex-shrink:0}
559567
.pr-dl-box p{font-size:.92rem;color:var(--text-dim);margin-bottom:20px;line-height:1.7}
@@ -627,10 +635,8 @@ img{max-width:100%;display:block}
627635
.footer-social a.gt-icon:hover{border-color:#c71d23;color:#c71d23;box-shadow:0 4px 16px rgba(199,29,35,.2)}
628636
.footer-social a.em-icon:hover{border-color:var(--accent2);color:var(--accent2);box-shadow:0 4px 16px rgba(232,147,74,.2)}
629637

630-
/* === VIEW TRANSITIONS === */
631-
@view-transition{navigation:auto}
632-
::view-transition-old(root){animation:fadeOut .2s ease-out}
633-
::view-transition-new(root){animation:fadeIn .3s ease-in}
638+
/* === PAGE ENTER ANIMATION === */
639+
/* Removed: cross-document view transitions and body fade-in cause navigation flash */
634640

635641
/* === PRINT STYLES === */
636642
@media print{
@@ -663,7 +669,7 @@ img{max-width:100%;display:block}
663669
@media(max-width:768px){.doc-qs-grid{grid-template-columns:1fr}}
664670

665671
/* === GENERATOR PAGE === */
666-
.gen-hero{padding:50px 0 20px;text-align:center}
672+
.gen-hero{padding:60px 0 24px;text-align:center}
667673
.gen-hero h1{font-size:1.8rem;font-weight:900;color:var(--text);margin-bottom:8px}
668674
.gen-hero p{color:var(--text-dim);font-size:.95rem;font-weight:300}
669675

0 commit comments

Comments
 (0)