bingshuo/guanghulab
1
0
Fork 0
Code Issues 2 Pull Requests Actions 1 Packages Projects Releases Wiki Activity

guanghu.chat v12: 卡片hover玻璃态强化·上浮8px+蓝色微光
Some checks failed
自动更新代码和重启 / update-and-restart (push) Has been cancelled
Details
CI检查 + 自动部署 / check (push) Has been cancelled
Details
CI检查 + 自动部署 / deploy (push) Has been cancelled
Details

Browse Source 
所有卡片改为玻璃态:
- background: rgba(10,10,10,0.65) + backdrop-filter: blur(12px)
- hover: translateY(-8px) + 蓝色微光boxShadow + ::before径向光晕 + ::after顶部亮线
- steps/arch/eco全部同步加强
This commit is contained in:
冰朔 2026-06-27 17:18:59 +08:00
parent f66f9d74a9
commit a5fbf1ca6d
1 changed files with 84 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
enterprise/guanghu-chat/index.html
View File

@ -54,26 +54,78 @@ body{font-family:var(--font);background:var(--bg);color:var(--gray-200);-webkit-
.sec-tit{font-size:28px;font-weight:600;color:#fff;letter-spacing:.04em;font-family:var(--serif)}
.sec-tit b{font-weight:600;color:var(--accent-light)}
/* Cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--gray-800);border-radius:12px;overflow:hidden;max-width:1000px;margin:0 auto}
.card{padding:36px 28px;background:var(--gray-950);transition:background .3s}
.card:hover{background:var(--gray-900)}
.card-num{font-size:28px;font-weight:600;color:var(--accent-light);margin-bottom:16px}
.card-tit{font-size:17px;font-weight:600;color:#fff;margin-bottom:8px}
.card-txt{font-size:14px;color:var(--gray-400);line-height:1.8}
/* Cards · 玻璃态+强hover */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1000px;margin:0 auto}
.card{
padding:40px 28px;border-radius:14px;
background:rgba(10,10,10,0.65);
border:1px solid rgba(255,255,255,0.06);
transition:all .45s cubic-bezier(.25,.1,.25,1);
position:relative;overflow:hidden;
backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.card::before{
content:'';position:absolute;inset:0;opacity:0;transition:opacity .45s;
background:radial-gradient(circle at 50% 0%,rgba(37,99,235,0.1),transparent 60%);
}
.card::after{
content:'';position:absolute;top:0;left:0;right:0;height:1px;opacity:0;transition:opacity .45s;
background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent);
}
.card:hover{
transform:translateY(-8px);
border-color:rgba(255,255,255,0.15);
box-shadow:0 16px 48px rgba(0,0,0,0.5),0 0 0 1px rgba(37,99,235,0.15),0 0 60px rgba(37,99,235,0.08);
}
.card:hover::before{opacity:1}
.card:hover::after{opacity:1}
.card-num{font-size:28px;font-weight:600;color:var(--accent-light);margin-bottom:16px;position:relative}
.card-tit{font-size:17px;font-weight:600;color:#fff;margin-bottom:8px;position:relative}
.card-txt{font-size:14px;color:var(--gray-400);line-height:1.8;position:relative}
/* Steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--gray-800);border-radius:12px;overflow:hidden;max-width:1000px;margin:0 auto}
.step{padding:36px 28px;background:var(--gray-950);text-align:center;transition:background .3s}
.step:hover{background:var(--gray-900)}
.step-num{font-size:32px;font-weight:600;color:var(--accent-light);margin-bottom:12px}
.step-tit{font-size:16px;font-weight:600;color:#fff;margin-bottom:8px}
.step-txt{font-size:14px;color:var(--gray-400);line-height:1.8}
/* Steps · 玻璃态+强hover */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1000px;margin:0 auto}
.step{
padding:40px 28px;border-radius:14px;text-align:center;
background:rgba(10,10,10,0.65);
border:1px solid rgba(255,255,255,0.06);
transition:all .45s cubic-bezier(.25,.1,.25,1);
position:relative;overflow:hidden;
backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.step::before{content:'';position:absolute;inset:0;opacity:0;transition:opacity .45s;
background:radial-gradient(circle at 50% 0%,rgba(37,99,235,0.08),transparent 55%);}
.step::after{content:'';position:absolute;top:0;left:0;right:0;height:1px;opacity:0;transition:opacity .45s;
background:linear-gradient(90deg,transparent,rgba(255,255,255,0.25),transparent);}
.step:hover{
transform:translateY(-8px);
border-color:rgba(255,255,255,0.15);
box-shadow:0 16px 48px rgba(0,0,0,0.5),0 0 0 1px rgba(37,99,235,0.1),0 0 40px rgba(37,99,235,0.05);
}
.step:hover::before{opacity:1}
.step:hover::after{opacity:1}
.step-num{font-size:32px;font-weight:600;color:var(--accent-light);margin-bottom:12px;position:relative}
.step-tit{font-size:16px;font-weight:600;color:#fff;margin-bottom:8px;position:relative}
.step-txt{font-size:14px;color:var(--gray-400);line-height:1.8;position:relative}
/* Arch */
.arch{max-width:800px;margin:0 auto;display:flex;flex-direction:column;gap:1px}
.alayer{padding:28px 36px;background:var(--gray-950);border:1px solid var(--gray-800);border-radius:12px;transition:border-color .3s}
.alayer:hover{border-color:var(--gray-700)}
.alayer{
padding:32px 40px;border-radius:14px;
background:rgba(10,10,10,0.65);
border:1px solid rgba(255,255,255,0.06);
transition:all .4s cubic-bezier(.25,.1,.25,1);
position:relative;overflow:hidden;
backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.alayer::before{content:'';position:absolute;inset:0;opacity:0;transition:opacity .4s;
background:radial-gradient(circle at 50% 0%,rgba(37,99,235,0.05),transparent 55%);}
.alayer:hover{
transform:translateY(-6px);
border-color:rgba(255,255,255,0.15);
box-shadow:0 12px 36px rgba(0,0,0,0.4),0 0 0 1px rgba(37,99,235,0.08);
}
.alayer:hover::before{opacity:1}
.alayer.l1{border-left:3px solid var(--accent-light)}
.alayer.l2{border-left:3px solid var(--gray-400)}
.alayer.l3{border-left:3px solid var(--gray-500)}
@ -84,8 +136,22 @@ body{font-family:var(--font);background:var(--bg);color:var(--gray-200);-webkit-
/* Eco */
.eco{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1000px;margin:0 auto}
.eg{padding:24px;background:var(--gray-950);border:1px solid var(--gray-800);border-radius:12px;transition:border-color .2s}
.eg:hover{border-color:var(--gray-700)}
.eg{
padding:24px;border-radius:14px;
background:rgba(10,10,10,0.65);
border:1px solid rgba(255,255,255,0.06);
transition:all .35s cubic-bezier(.25,.1,.25,1);
position:relative;overflow:hidden;
backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.eg::before{content:'';position:absolute;inset:0;opacity:0;transition:opacity .35s;
background:radial-gradient(circle at 50% 0%,rgba(37,99,235,0.04),transparent 55%);}
.eg:hover{
transform:translateY(-4px);
border-color:rgba(255,255,255,0.12);
box-shadow:0 8px 24px rgba(0,0,0,0.3),0 0 0 1px rgba(37,99,235,0.06);
}
.eg:hover::before{opacity:1}
.el{font-size:14px;font-weight:600;color:#fff;margin-bottom:14px}
.et{display:flex;flex-wrap:wrap;gap:6px}
.eti{font-size:12px;padding:4px 10px;border-radius:6px;background:var(--gray-900);color:var(--gray-400);border:1px solid var(--gray-800);transition:all .2s}