gkstyle.css28.9 KB
/*
小归客源码标识-----请你认准小归客出品！！博客：xgk.pw
本人图片在此，不要。不要。不要停、
!lll!!ll!lllllll!!lllllIllllllllllllIllllllllllllllllllllllllllllllllllllllll!llllIlllllIlIl!lllllllll!!!ll!lll!llIlllllll!lll!ll
!!lll!!!!l!!!!!!!!!!l!lllllllll!lllllllllll!llllllll!lIllllllIllllllllllllllll!!lllll!!lll!!lllllll!lll!l!!!!lll!lll!lll!!!!lll!l
!l!l!!!l!l!lllIl!lllll!l!lll!!!!!l!lll!ll!lllllllll!lllll!lllllll!ll!lllllll!lllllllllll!llll!!!lllllllllll!!l!lll!!!!!!lllll!ll!
i!l!!l!!!!!!ll!lll!l!!lllllllIlllllllll!lIllllllllllll!lllll!l!lll!llll!ll!!llll!lllll!llll!llll!!llll!l!Illllllll!llll!!!!!!Ill!
!!!!lll!l!l!!!ll!!!!!!ll!!lll!!!!l!l!llll!!lllllll!l!!!!!!l!llI!llll!lll!!!!!!ll!!!!!!!!!!lllll!llIl!!!l!l!lllll!lIlll!!l!l!l!lll
!!ll!!llll!!!llllllllll!lll!!ll!l!llll!lll!llll!llllIlllll!Illll!l!llll!llllllll!!lllll!!!!!lllllllllIllllllllllllllllIlllllll!ll
!l!llll!ll!lllll!l!ll!llll!lllll!llllllllll!llll!lll!ll!lll!l!lIlllllllll!llll!!lll!llllllllllllllllllllll!lllllIllllll!lllllllIl
!lll!llll!!!llll!!lllllllll!!lll!lll!lll!l!llI!llllllllllllllll!ll!lll!lll!l!l!ll!lllllllll!llllllll!llllllllll!llllllllllllllll!
!!llll!lll!lI!lllllllll!!l!!!lllll!lI!lllllllllllllll!lllIllllllllllllll!lllllllllllllIll!lllllllllllllIlIIllllllllllllllllllllll
l!llllllll!llll!!l!lllIl!llllll!!llIl!llll!lllllllllllllllllllll!ll!ll!lllll!lllllllll!llll!l!lllll!lIl!llllllllllIllll!lllll!!ll
ll!lll!lll!!ll!!l!l!llllllllll!llllllllIlllllllll!llllllllllll!llllll!lIllllllllllll!Illlllllll!l!llll!lllllllllIlllll!llllllll!l
!ll!llll!lllllllllllllll!l!llll!lllllllllllllllllll!llll!lllIIlll!Illlll!l!lllll!ll!ll!lllllllllllllllllllllllllll!lllllllllllIlI
!Ill!l!ll!ll!l!l!lllll!lllllllll!llllllllllllllll!llllllIll: :lllllIllIlll!lll!llll!l!llllllllllll!llllllIllllllIllll!lIlllllllI
!l!!ll!lll!llllll!l!llll!lll!lllllllllllllll!llllllIllll!! Ii!l!lIlllllllllllllll!l!llllllIllllllllllllllllIlIlIllllllllllllll
llll!!!!llllll!ll!l!l!!ll!lllll!l!llllllIl!lll!lIIli; ;>; ^l!Illlllllllllllllllll!llllllllIIlllIllllllllllllllllllllIll
!!l!llll!lll!llllllll!lIlll!lllllllll!llllll!lll!>" ' `!!lll!llllIll!!ll!!ll!lllllllllllllllllllll!l!llllllllll
!!lll!lllll!ll!lllllIlIlIllll!l!lll!llllIl!llII!" ,!IllllllllI!l!lllllIllllllllIlllll!ll!lIlllIllllllllllll
!l!llllIllllllllllll!lllllIllllll!lllllllII;>^ !IllllllllIlllllllllllllllllllllIIll!!lllllll!llllllllI
ll!!lllllll!lllllllIllllIllllllllllll!lllli^ Illllllll!l!lll!llllIllllIll!IlIllllIllllllllllllllIll
!lllllIlllllllllllllllllllllllllllllIlllIi `!IllI!llllllllllIlllIlllllIlIIllllllllllllllllllllIlI
!llIll!lllllllllllIllllllllIllIlllIlllllI: \1>` lIIlIllIlIllllllIlllIllllIIlIlllllllllllllllIlllllll
llll!llllllllllllllIllIllIlIlIlllllllllIi (k$$Q; >B$$$$$a\^ IIIlllllllllIlllIIIllIIllll!IIIl!lllllllllllllllllll!
!llllllllllllllllIlllllllllllllll!llllIlI ,$$$$$$$0` 'z8#Ct(uW$8X !IllIIllllll!lIIIIllIllllllll!llllllllllll!llllllll!l
lllllIllllllIllIIlIlI!lIl!lllllllllllII! u$$$$$$$$$$$o: "+[J$&bj lIlIllllllllIllllllIllll!llllIIllllllllllll!lIll!llll
!!lllllllIllllllIlIlIlllIlll!IlllllIlll &$$$Q; :&$$$$$$$Y^ _t}illIllIlIIIIlllIlllllIlllIlIlIlllllll!llIl!lllllll
llllllllllllllIlIlIlIllllIlllll!lIlIlllIII :$$z [#$$$$$$@I ]| :j0bw|!lIIIIIlIIllllIl!IlIIllllIIIlIlll!llll!lll!l!llI
lllllllllllllIlllllIllIIlIllIlIIIlIllllII! ]$$$B#Y?,!naJ~ >u1;]vqWa{!IlllIlllIlIIllllIlIlIllllllllllllll!llllllllll
lllIlIIIIlIlIllIlllIIIlIIIlIIIlIlIIllllllI! "&u: )> _\nvnuwB8jiIlIllIlIlIIIllllIllIllllllllIlllllllIllllIll!!
!lllIlIlIlIlIlllllIIIIIllIIllIIllIllllllllIl: t$$n ~(nYYccd%k}IllIIIlIllllIllIllllllllllllllllll!lllIIlIlllIl
l!llIlIllllIllllllllll!lIlIlIIIllllllllllllll>)> XW&#w?1][|vLOwpmQJLmJ}!Illl!llllllIllllllllIlllllIl!lllllIllll!llllll!
IllllllIlllllllllllIlllIIlIIlIIlllIlIlllllll-kMQi} <dW&#bU8$$$$$8#akwOU]IlllIIlIlllllllIIlIllllIIllllllll!lllllIllllIlI!ll
lllllllllllIIlIllllIlIIlIlllIllllIlIlIlllIlIz&ahhom> ^-L$$Mbwwo$$$8$$$$BWop0{lllIlIIlIllIllIlIlllllllllIlllllllIllllllIlIlIlIll
llllllllIlIllIlIlllIlIllllIlllIIllllIlIlllIIj$B$$$8Madh$$$$$$$$$$$$b-$$$$$$Wb0{IIlIllllllIIlIlllllll!llIlIllllIIIlIIIllllllIlllll
llllllllIIIIlllIlIIIlllIlIlllIlIlIlllIlllIll!0$$$$@MW8@$$$$W$$%&%m W$$$$$$MkU-llllIIlllllIIlllllllllllllllllIlllllllIllllllIlllI
lllllIllIllIIIllllIlIlllIIIllIlllIllllllIllIII{o$$$%%@$$$$$$l ')@$$$$$$$B*b\lllllllIlIlllIlllllllIlll!ll!lllIlIIIllllIllll!lIll
llllllllllllllIIllIlllllllllllllllllllllllllllII;;+O$$$$$$$$$$$$$$$$$$$$$BMonllllllIIll;llIIIllllllll!lll!!lllllIllllll!lllllIlll
!lIllllllllllIlllIllllllllllllll!llllllllllIlIllI;I+O$$$$$$$$$$$$$$$$$$$8MaZX[IIllIIIllllIIllllllIlllIllIlIllIllllllllIlIlllIlll!
lllIllllllllIlllllIIlllllllllllll!llllll!llllIlIlIlI!fW$$$$$$$$$$$$$$$8MaqOQLX[lIIIIlIIII;II;IIIIIIIIIIIlllllllllIlllllIlIlllll!l
llllllllllIlllllllIlIllllllllll!llllll!llllllllIlIlllI>(ZB$$$$$$$$%&*kqmZZZOQCXj}(ZWoM&%@$$$$$$$$$$B*wz)<lIIllllIllIIlllIllllllll
lllllllllllllllllIllllllllllllll!lllllll!llllIllIlIIlIlII!]0dpqqwmZ0OOOZOZZmwppwO*$$$$$$$$$$$$$$$$$$$$$$$$ML(!IlllllllIllllllIlll
l!lllllllllll!lllllllllllIlllllllllllllllllllllllIIIIIlIl-xd&#abdppdbko#W%@$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$#X?IIIlIlllIllIll!l
lIlIll!llllllllllllllllllllIllllllllllllllllllllllI>}jL#$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$8c?lIlllllIlIlll
lllllllllllllllllllll!lllllllllllllllIlIl!IlII!?fm$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$Mj<IIIllIllll
!lllllllllIlllllllllllll!lllllIlllIlllIllIIi)d$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$L{iIIlllI
!llIlIllIlllll!llllllllllllllllllIlllllIIim$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$B0z0%$z>IIlI
ll!llIlllIllllllllllllllllllllllIlIllII>%$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$JZ$$$$%x-ph_llI
llllIlllIlllllllIlllllllllllllllllllI!q$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$O$$$$$$$$$$@@Ci;I
!llllllllllll!llllllllllIIIlllllIIIIt$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$@k$$$$$$$$$$$$$$*c!
lllll!lllllllllllIllIlllIlIIlllllllL$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$a$$$$$$$$$$$$$$$$$$
llllllllllllIlllIllllllIIllllllII~p$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$J$$$$$$$$$$$$$$$$$$$
!lllllllllllllllllIllllllIlIlIIl]o$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$d$$$$$$$$$$$$$$$$$$$
l!lllllll!llllIllIllllllIlIIIll[&$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$w$$$$$$$$$$$$$$$$$$$
lllllllllllllllll!llll!llIIlll}%$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$bW$$$$$$$$$$$r$$$$$$$$$$$$$$$$$$$
!llIllllllllllIIllllllllIIlll[&$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$U^}Y >8$$$$$$$$$$$$fW$$$$$$$$$$$$$$$$$
!!l!lllllll!llllllllllllllll)%$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$<> W:8+:ubB$$$$$$$$#w$$$[}d$$$$$$$$$$$$$$$
l!!ll!!llllllllllllllllllIlv$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$`i Wo$$$$$$$$$$$$$8qdCc$$$dCa$$$$$$$$$$$$
!Illllll!l!l!lllllllllllII}$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$BkbOIli~-?+~\q$$$$$$$$$
!l!l!lll!lIlllllllllllIlII[$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ohbIIlllIllIl<\q@$$$$$
!llllllIlll!lllll!llIlIlII>Q$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$Mho>IlIllIlllIll+C$$$$
ll!l!lllllllllllllllIIlII!f$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$Wao]IIIIllllIlIlliw$$$
lllllllllllll!llllllIllI!/$$$$$$$$$$$$$$$$$$$$@$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$8ao|lllllllllllIlI_%$$
llIll!lllIIlllll!lllllll/$$$$$$$$$$$$$$$$$$$$&oqZ$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$%oaxIlIlllIlIlIlIlI($$
lllllIlIl!lIl!lllllIlll($$$$$$$$$$$$$$$$$$$$B#dr>c$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$@*azlllIIlIllllllIlIx$
llllIllllll!llllllllII}$$$$$$$$$$$$$$$8#W&8oqU?II}$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$@#aLlIlllllllllllllIlY
l!lllllllllllIIlllllI}$$$$$$$$$$$$$$$$Bom0c!IlIIl~w$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$#amIllllIIIIllIlIllll
!llllIlIlllll!lllllI?$$$$$$$$$$$$$$$$%aZ0rlllIlIIiJ$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$MoqlIIIlIlIlIIlIlIIIl
llllllllllIllll!lll_$$$$$$$$$$$$$$$$8hZ0(!lIlIlIl>C$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$@obqI:;;;;;;;;;;;;IIll
!llllIllllllllllll<B$$$$$$$$$$$$$$$&bOQ1!Illlll!l+p$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$8hqq!:,,,,:,:,:::;:IIl
!!llllll!llIllllI!h$$$$$$$$$$$$$$$&d0L1llIlllllII[$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$%hpd>,:::::::::::;:;Il
!!!lIllIllllllIllZ$$$$$$$$$$$$$$$WbOJ{llIlIllIlIlf$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$*kd>:;:;;;;;;;;;;Illl
llIllIIIllIlIlIIv$$$$$$$$$$$$$$$&bOJ}lIIlIIIIlII-k$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$W*h<II;IIIIIIIIIlllll
*/
/* 1. 全局 CSS 变量与暗黑模式配置 */
:root {
--primary-color: #4285f4;
--primary-hover: #3367d6;
--danger-color: #e74c3c;
--text-main: #2c3e50;
--text-sub: #666;
--text-light: #999;
--bg-color: #f4f6f9;
--card-bg: #ffffff;
--border-color: #eee;
--shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
--radius: 8px;
--header-height: 60px;
}
body.dark-mode {
--text-main: #e0e0e0;
--text-sub: #aaa;
--text-light: #777;
--bg-color: #121212;
--card-bg: #1e1e1e;
--border-color: #333;
--shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
* { margin: 0; padding: 0; box-sizing: border-box; transition: background-color 0.3s, color 0.3s, border-color 0.3s; }
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
background-color: var(--bg-color);
color: var(--text-main);
line-height: 1.6;
padding: 20px;
padding-top: calc(var(--header-height) + 20px);
}
.container { max-width: 1200px; margin: 0 auto; }
/* 2. 头部固定悬浮样式 */
header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: var(--header-height);
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
background-color: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: var(--shadow);
z-index: 50;
}
.header-inner {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
display: flex;
justify-content: space-between;
align-items: center;
}
body.dark-mode header {
background-color: rgba(30, 30, 30, 0.8);
}
.logo { font-size: 22px; font-weight: 800; color: var(--danger-color); letter-spacing: 1px; z-index: 10; }
.logo a{ text-decoration: none; color: var(--text-sub); }
/* 桌面端导航 */
.nav-links { display: flex; gap: 25px; align-items: center; }
.nav-links a { text-decoration: none; color: var(--text-sub); font-size: 15px; font-weight: 500; }
.nav-links a:hover { color: var(--primary-color); }
/* 右侧操作区 */
.header-actions { display: flex; align-items: center; gap: 10px; z-index: 10; }
/* 图标按钮通用样式 */
.icon-btn {
background: none; border: none; cursor: pointer; color: var(--text-sub);
width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
border-radius: 50%; transition: all 0.3s ease;
}
.icon-btn:hover { background-color: rgba(66, 133, 244, 0.1); color: var(--primary-color); }
.icon-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* 汉堡菜单按钮 (默认隐藏) */
.hamburger {
display: none; flex-direction: column; justify-content: space-between;
width: 28px; height: 20px; background: transparent; border: none; cursor: pointer; padding: 0; z-index: 10;
}
.hamburger span {
display: block; width: 100%; height: 3px; background-color: var(--text-main);
border-radius: 3px; transition: all 0.3s ease; transform-origin: center;
}
.hamburger.active span:nth-child(1) { transform: translateY(8.5px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }
/* 3. 搜索弹窗 (Modal) */
.search-overlay {
position: fixed; top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.6); backdrop-filter: blur(5px);
display: none; justify-content: center; align-items: flex-start;
padding-top: 15vh; z-index: 100;
}
.search-overlay.active { display: flex; }
.search-box {
background: var(--card-bg); width: 90%; max-width: 600px;
border-radius: var(--radius); padding: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.search-input {
width: 100%; padding: 15px; font-size: 18px; border: 2px solid var(--border-color);
border-radius: var(--radius); outline: none; background: var(--bg-color); color: var(--text-main);
}
.search-input:focus { border-color: var(--primary-color); }
.search-hint { margin-top: 10px; font-size: 12px; color: var(--text-light); text-align: right; }
/* 4. 主体布局 */
.main-content { display: grid; grid-template-columns: 1fr 320px; gap: 20px; }
.content-left { display: flex; flex-direction: column; gap: 20px; }
.card { background: var(--card-bg); padding: 25px; border-radius: var(--radius); box-shadow: var(--shadow); }
.card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid var(--border-color); }
.card-title { font-size: 18px; font-weight: 700; }
.card-more { font-size: 13px; color: var(--text-light); text-decoration: none; }
.hero { text-align: center; padding: 40px 20px;background-image: url(https://www.adwest.cn/uploads/image/20260603/s2026060316111489.jpg);background-size: cover;
background-position: center;
}
.hero h1 { font-size: 32px; margin-bottom: 12px; }
.hero p { color: var(--text-sub); margin-bottom: 25px; }
.hero-buttons { display: flex; justify-content: center; gap: 15px; flex-wrap: wrap; }
.btn { padding: 10px 24px; border: none; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 600; text-decoration: none; display: inline-block; }
.btn-primary { background-color: var(--primary-color); color: white; }
.btn-outline { background-color: transparent; color: var(--primary-color); border: 1px solid var(--primary-color); }
.announcement { background-color: #fff8e1; padding: 15px 20px; border-left: 4px solid #ffc107; font-size: 14px; color: #5d4037; border-radius: 0 var(--radius) var(--radius) 0; }
body.dark-mode .announcement { background-color: #3e2723; color: #ffcc80; border-left-color: #ff9800; }
.doc-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }
.doc-item { border: 1px solid var(--border-color); border-radius: var(--radius); overflow: hidden; }
.doc-image { width: 100%; height: 130px; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); display: flex; align-items: center; justify-content: center; color: var(--text-light); }
body.dark-mode .doc-image { background: linear-gradient(135deg, #2c3e50 0%, #1a252f 100%); }
.doc-image img{ width: 100%;height: 130px; }
.doc-content { padding: 15px;background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); }
.doc-title { font-size: 15px; font-weight: 700; margin-bottom: 8px; }
.doc-desc { font-size: 12px; color: var(--text-sub); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
/* 搜索框样式 */
.header-search { display: flex; height: 32px; }
.header-search input {border: 1px solid #ccc; padding: 0 10px; border-radius: 4px 0 0 4px; outline: none; font-size: 14px; width: 100%; }
.header-search button { min-width: 60px;border: none; background: #007bff; color: #fff; padding: 0 12px; border-radius: 0 4px 4px 0; cursor: pointer; transition: 0.3s;}
.header-search button:hover { background: #0056b3; }
/* 页面主体样式 */
.page-header { margin-bottom: 20px; }
.page-header h2 { font-size: 24px; margin: 0; color: #222; }
.page-header p { font-size: 14px; color: #888; margin: 5px 0 0; }
.post-card { background: #fff; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); padding: 25px; margin-bottom: 20px; transition: transform 0.2s; }
.post-card:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.post-title { font-size: 20px; margin: 0 0 10px; }
.post-title a { text-decoration: none; color: #333; transition: color 0.2s; }
.post-title a:hover { color: #007bff; }
.post-meta { font-size: 12px; color: #888; margin-bottom: 15px; display: flex; gap: 15px; flex-wrap: wrap; }
.post-excerpt { font-size: 14px; line-height: 1.6; color: #555; }
@media (max-width: 600px) {
.header-search { width: 100%; margin-top: 10px;}
.header-search input { flex: 1; width: auto; }
}
/* 4. 文章样式布局 */
/* --- 卡片通用样式 --- */
.wz-container {
width: 100%;
max-width: 900px; /* PC端最大宽度 */
display: flex;
flex-direction: column;
gap: 20px;
}
.wz-card {
display: flex;
width: 100%;
height: 220px; /* 固定高度，保证整齐 */
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
position: relative;
color: white;
text-decoration: none; /* 去除链接下划线 */
transition: transform 0.2s;
}
.wz-card:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}
/* --- 布局核心：强制左右分栏 --- */
.wz-card-image, .wz-card-content {
flex: 1; /* 默认各占50% */
position: relative;
}
/* 图片区域 */
.wz-card-image {
background-size: cover;
background-position: center;
min-width: 0; /* 防止Flex子项溢出 */
}
/* 文字区域 */
.wz-card-content {
padding: 24px;
display: flex;
flex-direction: column;
justify-content: center;
background-color: #333; /* 默认深色背景 */
min-width: 0; /* 关键：允许文字区域收缩 */
}
/* --- 交替布局逻辑 --- */
/* 第一个卡片：图左文右 */
.wz-card-1 .wz-card-image { order: 1; }
.wz-card-1 .wz-card-content { order: 2; }
/* 第二个卡片：文左图右 (通过CSS交换顺序) */
.wz-card-2 .wz-card-content { order: 1; }
.wz-card-2 .wz-card-image { order: 2; }
/* --- 文本排版细节 --- */
.wz-card-title {
font-size: 1.4rem;
font-weight: bold;
margin-bottom: 12px;
line-height: 1.3;
white-space: nowrap; /* 标题不换行 */
overflow: hidden; /* 超出隐藏 */
text-overflow: ellipsis; /* 显示省略号 */
}
.wz-card-desc {
font-size: 0.95rem;
line-height: 1.6;
opacity: 0.9;
margin-bottom: 20px;
/* 限制显示3行，超出显示省略号 */
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* --- 底部元数据 (时间/热度) --- */
.meta-info {
display: flex;
align-items: center;
gap: 15px;
font-size: 0.8rem;
opacity: 0.7;
margin-top: auto; /* 推到底部 */
}
.meta-item {
display: flex;
align-items: center;
gap: 6px;
}
/* SVG 图标通用样式 */
.icon {
width: 16px;
height: 16px;
fill: currentColor;
}
/* 特定图标颜色微调 */
.icon-time { color: #5dade2; }
.icon-fire { color: #e74c3c; }
.icon-tag { color: #f1c40f; }
/* --- 模拟图片背景 (你可以替换 url() 为真实图片链接) --- */
.bg-ironman {
background-image: linear-gradient(to right, #2c3e50, #000), url('https://via.placeholder.com/400x300/2c3e50/ffffff?text=Image');
/* 这里用渐变模拟原图的暗色风格 */
background: linear-gradient(135deg, #1a1a1a 0%, #4a4a4a 100%);
}
.bg-ai {
/* 模拟第二张图的蓝绿色调 */
background: linear-gradient(135deg, #134E5E 0%, #71B280 100%);
}
/* 给第二张图的文字区加个深色遮罩，因为它是亮色背景 */
.wz-card-2 .wz-card-content {
background: linear-gradient(to right, rgba(19, 78, 94, 0.95), rgba(19, 78, 94, 0.8));
}
/* --- 针对手机端的特殊优化 (关键点) --- */
@media (max-width: 600px) {
.wz-card {
height: 140px; /* 手机端卡片变矮一点 */
}
.wz-card-image {
flex: 0 0 35%; /* 手机端图片占宽 35% */
}
.wz-card-content {
flex: 1; /* 文字占剩余空间 */
padding: 15px; /* 减小内边距 */
}
.wz-card-title {
font-size: 1.1rem; /* 标题变小 */
margin-bottom: 8px;
}
.wz-card-desc {
font-size: 0.8rem; /* 正文变小 */
-webkit-line-clamp: 2; /* 手机端只显示2行 */
margin-bottom: 10px;
}
.meta-info {
gap: 10px;
font-size: 0.7rem;
}
.icon {
width: 12px;
height: 12px;
}
}
/* 【新增】分页样式 */
.pagination { display: flex; justify-content: center; margin-top: 30px; gap: 5px; }
.pagination a, .pagination span {
padding: 8px 12px;
background: #fff;
border: 1px solid #ddd;
color: #333;
text-decoration: none;
border-radius: 4px;
font-size: 14px;
}
.pagination a:hover { background-color: #eee; }
.pagination .current { background-color: #007bff; color: #fff; border-color: #007bff; }
.list-group { list-style: none; }
.list-item { padding: 12px 0; border-bottom: 1px dashed var(--border-color); display: flex; justify-content: space-between; align-items: center; font-size: 14px; }
.list-item:last-child { border-bottom: none; }
.list-item a { color: var(--text-main); text-decoration: none; flex: 1; }
.list-item span { color: var(--text-light); font-size: 12px; white-space: nowrap; margin-left: 15px; }
.sidebar { display: flex; flex-direction: column; gap: 20px; }
.sidebar-title { font-size: 16px; font-weight: 700; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 2px solid var(--primary-color); display: inline-block; }
.friend-link { display: flex; align-items: center; padding: 12px 0; text-decoration: none; color: var(--text-main); border-bottom: 1px dashed var(--border-color); }
.friend-link:last-child { border-bottom: none; }
.link-logo { width: 40px; height: 40px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 8px; margin-right: 12px; flex-shrink: 0; }
.link-name { font-size: 14px; font-weight: 600; }
.link-desc { font-size: 12px; color: var(--text-light); margin-top: 2px; }
footer { text-align: center; padding: 30px 20px; color: var(--text-light); font-size: 12px; margin-top: 40px; }
footer a { color: var(--primary-color); text-decoration: none; }
/* ================= 响应式手机端适配 ================= */
@media (max-width: 768px) {
body { padding: 10px; padding-top: calc(var(--header-height) + 10px); }
header { padding: 0 15px; }
/* 手机端显示汉堡按钮，隐藏桌面端导航 */
.hamburger { display: flex; order: 2; }
.nav-links { display: none; }
/* 手机端，隐藏右侧 */
.sidebar {
display: none; /* 直接隐藏，DOM不参与渲染流 */
}
/* 手机端 3列网格菜单 */
.nav-links.mobile-active {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
position: absolute; top: 100%; left: 0; right: 0;
background: var(--card-bg); padding: 15px;
box-shadow: var(--shadow); border-radius: 0 0 var(--radius) var(--radius);
z-index: 8;
}
.nav-links.mobile-active a {
text-align: center; padding: 10px 0; background: var(--bg-color);
border-radius: 6px; font-size: 14px; color: var(--text-main);
}
.main-content { grid-template-columns: 1fr; gap: 15px; }
.card { padding: 20px; }
.hero { padding: 30px 15px; }
.hero h1 { font-size: 26px; }
.doc-list { grid-template-columns: repeat(2, 1fr);/*grid-template-columns: 1fr;*/ }
.list-item { align-items: flex-start; gap: 4px; }
.list-item span { margin-left: 0; }
}
/* 归档页面整体布局 */
.archive-container { max-width: 800px; margin: 40px auto; padding: 0 20px; }
.page-title { font-size: 2rem; margin-bottom: 30px; color: #333; }
.section-title { font-size: 1.5rem; margin: 30px 0 15px; padding-bottom: 10px; border-bottom: 2px solid #eee; }
/* 统计卡片样式 */
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 30px; }
.stat-card { background: #fff; border-radius: 8px; padding: 25px; text-align: center; box-shadow: 0 2px 10px rgba(0,0,0,0.05); transition: transform 0.3s; }
.stat-card:hover { transform: translateY(-3px); }
.stat-number { display: block; font-size: 2rem; font-weight: bold; color: #4A90E2; }
.stat-label { font-size: 0.9rem; color: #888; margin-top: 5px; }
/* 标签云样式 */
.tag-list { display: flex; flex-wrap: wrap; gap: 10px; }
.tag-item { text-decoration: none; background: #f0f2f5; color: #555; padding: 6px 15px; border-radius: 20px; font-size: 0.9rem; transition: all 0.3s; }
.tag-item:hover { background: #4A90E2; color: #fff; }
.tag-item span { font-size: 0.8rem; opacity: 0.8; margin-left: 4px; }
/* 折叠面板与时间轴样式 */
.archive-year-panel { border: 1px solid #eee; border-radius: 8px; margin-bottom: 10px; overflow: hidden; }
.year-header { padding: 15px 20px; cursor: pointer; font-size: 1.2rem; font-weight: bold; list-style: none; display: flex; align-items: center; justify-content: space-between; background: #fafafa; user-select: none; }
.year-header::-webkit-details-marker { display: none; } /* 隐藏默认三角 */
.year-count { font-size: 0.9rem; color: #888; font-weight: normal; margin-left: 10px; }
.arrow-icon { width: 20px; height: 20px; fill: #888; transition: transform 0.3s; }
details[open] .arrow-icon { transform: rotate(180deg); }
.month-list { list-style: none; padding: 0; margin: 0; background: #fff; }
.month-item a { display: flex; justify-content: space-between; padding: 12px 20px 12px 40px; text-decoration: none; color: #333; transition: background 0.2s; }
.month-item a:hover { background: #f9f9f9; color: #4A90E2; }
.month-count { font-size: 0.85rem; color: #aaa; }