优化:深国际改革方案增加左侧固定导航菜单(17个锚点+滚动监听+移动端抽屉)
This commit is contained in:
@@ -49,7 +49,7 @@
|
||||
'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
background: var(--bg);
|
||||
color: var(--text-primary);
|
||||
line-height: 1.8;
|
||||
line-height: 1.57;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
@@ -148,7 +148,7 @@
|
||||
.main {
|
||||
margin-left: var(--sidebar-w);
|
||||
margin-top: var(--header-h);
|
||||
padding: 36px 48px 64px;
|
||||
padding: 32px 40px 64px;
|
||||
min-height: calc(100vh - var(--header-h));
|
||||
max-width: 1100px;
|
||||
}
|
||||
@@ -174,40 +174,18 @@
|
||||
|
||||
/* ===== SECTIONS ===== */
|
||||
section {
|
||||
margin: 40px 0;
|
||||
margin: 48px 0;
|
||||
scroll-margin-top: calc(var(--header-h) + 1rem);
|
||||
}
|
||||
section h2 {
|
||||
font-size: 22px;
|
||||
line-height: 30px;
|
||||
padding: 0 0 10px 14px;
|
||||
border-left: 4px solid var(--color-primary);
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
margin-bottom: 20px;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
section h3 {
|
||||
font-size: 18px;
|
||||
line-height: 26px;
|
||||
margin: 28px 0 14px;
|
||||
padding-left: 12px;
|
||||
border-left: 3px solid #722ED1;
|
||||
color: #722ED1;
|
||||
}
|
||||
section h4 {
|
||||
font-size: 15px;
|
||||
line-height: 22px;
|
||||
margin: 18px 0 10px;
|
||||
color: #444;
|
||||
font-weight: 600;
|
||||
}
|
||||
section h2 { font-size:24px;line-height:32px;padding-bottom:8px;border-bottom:1px solid var(--border);margin-bottom:20px;color:var(--color-primary); }
|
||||
section h3 { font-size:20px;line-height:28px;margin:24px 0 12px;color:#722ED1; }
|
||||
section h4 { font-size:16px;line-height:24px;margin:16px 0 8px;color:var(--color-success); }
|
||||
|
||||
/* ===== PARAGRAPH ===== */
|
||||
p {
|
||||
color: var(--text-secondary);
|
||||
font-size: 14px;
|
||||
margin: 10px 0;
|
||||
text-indent: 2em;
|
||||
text-align: justify;
|
||||
}
|
||||
p.no-indent { text-indent: 0; }
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
--sidebar-w: 260px; --header-h: 64px;
|
||||
}
|
||||
*{margin:0;padding:0;box-sizing:border-box;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;background:var(--bg);color:var(--text-primary);line-height:1.8;font-size:15px;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;background:var(--bg);color:var(--text-primary);line-height:1.57;font-size:15px;}
|
||||
::-webkit-scrollbar{width:6px;height:6px;}
|
||||
::-webkit-scrollbar-track{background:transparent;}
|
||||
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px;}
|
||||
@@ -38,11 +38,11 @@
|
||||
.sidebar nav a.sub{padding-left:2.5rem;font-size:12px;}
|
||||
.sidebar nav a.sub::before{content:"· ";font-weight:700;}
|
||||
.main{margin-left:var(--sidebar-w);margin-top:var(--header-h);padding:36px 48px 64px;min-height:calc(100vh - var(--header-h));max-width:1100px;}
|
||||
section{margin:40px 0;scroll-margin-top:calc(var(--header-h) + 1rem);}
|
||||
section h2{font-size:22px;line-height:30px;padding:0 0 10px 14px;border-left:4px solid var(--color-primary);border-bottom:1px solid var(--border-light);margin-bottom:20px;}
|
||||
section h3{font-size:18px;line-height:26px;margin:28px 0 14px;padding-left:12px;border-left:3px solid #722ED1;color:#722ED1;}
|
||||
section h4{font-size:15px;line-height:22px;margin:18px 0 10px;color:#444;font-weight:600;}
|
||||
p{color:var(--text-secondary);font-size:14px;margin:10px 0;text-indent:2em;text-align:justify;}
|
||||
section{margin:48px 0;scroll-margin-top:calc(var(--header-h) + 1rem);}
|
||||
section h2{font-size:24px;line-height:32px;padding-bottom:8px;border-bottom:1px solid var(--border);margin-bottom:20px;color:var(--color-primary);}
|
||||
section h3{font-size:20px;line-height:28px;margin:24px 0 12px;color:#722ED1;}
|
||||
section h4{font-size:16px;line-height:24px;margin:16px 0 8px;color:var(--color-success);}
|
||||
p{color:var(--text-secondary);font-size:14px;margin:10px 0;text-align:justify;}
|
||||
p.no-indent{text-indent:0;}
|
||||
p.lead{font-size:16px;color:var(--text-primary);text-indent:0;line-height:1.9;}
|
||||
strong{color:var(--text-primary);}
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
--sidebar-w: 260px; --header-h: 64px;
|
||||
}
|
||||
*{margin:0;padding:0;box-sizing:border-box;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;background:var(--bg);color:var(--text-primary);line-height:1.8;font-size:15px;}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;background:var(--bg);color:var(--text-primary);line-height:1.57;font-size:15px;}
|
||||
::-webkit-scrollbar{width:6px;height:6px;}
|
||||
::-webkit-scrollbar-track{background:transparent;}
|
||||
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px;}
|
||||
@@ -36,11 +36,11 @@
|
||||
.sidebar nav a:hover,.sidebar nav a.active{color:var(--color-primary);background:var(--color-primary-bg);}
|
||||
.sidebar nav a.active{border-left-color:var(--color-primary);font-weight:600;}
|
||||
.main{margin-left:var(--sidebar-w);margin-top:var(--header-h);padding:36px 48px 64px;min-height:calc(100vh - var(--header-h));max-width:1100px;}
|
||||
section{margin:40px 0;scroll-margin-top:calc(var(--header-h) + 1rem);}
|
||||
section h2{font-size:22px;line-height:30px;padding:0 0 10px 14px;border-left:4px solid var(--color-primary);border-bottom:1px solid var(--border-light);margin-bottom:20px;}
|
||||
section h3{font-size:18px;line-height:26px;margin:28px 0 14px;padding-left:12px;border-left:3px solid #722ED1;color:#722ED1;}
|
||||
section h4{font-size:15px;line-height:22px;margin:18px 0 10px;color:#444;font-weight:600;}
|
||||
p{color:var(--text-secondary);font-size:14px;margin:10px 0;text-indent:2em;text-align:justify;}
|
||||
section{margin:48px 0;scroll-margin-top:calc(var(--header-h) + 1rem);}
|
||||
section h2{font-size:24px;line-height:32px;padding-bottom:8px;border-bottom:1px solid var(--border);margin-bottom:20px;color:var(--color-primary);}
|
||||
section h3{font-size:20px;line-height:28px;margin:24px 0 12px;color:#722ED1;}
|
||||
section h4{font-size:16px;line-height:24px;margin:16px 0 8px;color:var(--color-success);}
|
||||
p{color:var(--text-secondary);font-size:14px;margin:10px 0;text-align:justify;}
|
||||
p.no-indent{text-indent:0;}
|
||||
p.lead{font-size:16px;color:var(--text-primary);text-indent:0;line-height:1.9;}
|
||||
strong{color:var(--text-primary);}
|
||||
|
||||
@@ -39,7 +39,7 @@
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
background: var(--bg); color: var(--text-primary); line-height: 1.8; font-size: 15px;
|
||||
background: var(--bg); color: var(--text-primary); line-height: 1.57; font-size: 15px;
|
||||
}
|
||||
::-webkit-scrollbar { width: 6px; height: 6px; }
|
||||
::-webkit-scrollbar-track { background: transparent; }
|
||||
@@ -78,14 +78,14 @@
|
||||
.sidebar nav a:hover { color: var(--color-primary); background: var(--color-primary-bg); }
|
||||
.sidebar nav a.active { color: var(--color-primary); border-left-color: var(--color-primary); background: var(--color-primary-bg); font-weight: 600; }
|
||||
|
||||
.main { margin-left: var(--sidebar-w); margin-top: var(--header-h); padding: 36px 48px 64px; min-height: calc(100vh - var(--header-h)); max-width: 1100px; }
|
||||
.main { margin-left: var(--sidebar-w); margin-top: var(--header-h); padding: 32px 40px 64px; min-height: calc(100vh - var(--header-h)); max-width: 1100px; }
|
||||
|
||||
section { margin: 40px 0; scroll-margin-top: calc(var(--header-h) + 1rem); }
|
||||
section h2 { font-size: 22px; line-height: 30px; padding: 0 0 10px 14px; border-left: 4px solid var(--color-primary); border-bottom: 1px solid var(--border-light); margin-bottom: 20px; color: var(--text-primary); }
|
||||
section h3 { font-size: 18px; line-height: 26px; margin: 28px 0 14px; padding-left: 12px; border-left: 3px solid #722ED1; color: #722ED1; }
|
||||
section h4 { font-size: 15px; line-height: 22px; margin: 18px 0 10px; color: #444; font-weight: 600; }
|
||||
section { margin: 48px 0; scroll-margin-top: calc(var(--header-h) + 1rem); }
|
||||
section h2 { font-size:24px;line-height:32px;padding-bottom:8px;border-bottom:1px solid var(--border);margin-bottom:20px;color:var(--color-primary); }
|
||||
section h3 { font-size:20px;line-height:28px;margin:24px 0 12px;color:#722ED1; }
|
||||
section h4 { font-size:16px;line-height:24px;margin:16px 0 8px;color:var(--color-success); }
|
||||
|
||||
p { color: var(--text-secondary); font-size: 14px; margin: 10px 0; text-indent: 2em; text-align: justify; }
|
||||
p { color: var(--text-secondary); font-size: 14px; margin: 10px 0; text-align: justify; }
|
||||
p.no-indent { text-indent: 0; }
|
||||
p.lead { font-size: 16px; color: var(--text-primary); text-indent: 0; line-height: 1.9; }
|
||||
strong { color: var(--text-primary); }
|
||||
|
||||
Reference in New Issue
Block a user