双页面登录的工程实现：登录/注册切换、隐藏容器 resize 坑与玻璃拟态卡片

作者：Y2Ksoft 前端组 ｜ 分类：前端工程 / 交互实现

一个好看的登录页，背后藏着不少工程细节。我们以 Y2Ksoft 系统的双页面登录为例，拆解登录/注册 Tab 切换、隐藏容器导致图表白屏、玻璃拟态卡片三件事。

一、双页面结构：左宣传 + 右表单

登录层是一个覆盖全屏的 position:fixed 容器，分两栏：

• 左栏（品牌区）：径向光晕背景 + 大字标题 + 副标题 + 4 个亮点标签，纯展示；
• 右栏（登录卡）：玻璃拟态卡片，含登录/注册两个 Tab。

<div id="login">
  <div class="lg-left">...品牌宣传...</div>
  <div class="lg-right">...登录/注册卡片...</div>
</div>
<div class="app hidden" id="app">...主系统...</div>

二、Tab 切换：两个表单互斥显示

登录和注册是同一张卡片里的两个 div，靠 class 切换：

function switchTab(t){
  document.getElementById("tabLogin").classList.toggle("on",t==="login");
  document.getElementById("tabReg").classList.toggle("on",t==="reg");
  document.getElementById("loginForm").classList.toggle("hidden",t!=="login");
  document.getElementById("regForm").classList.toggle("hidden",t!=="reg");
}

注册信息存 localStorage（演示用），登录时校验 admin/123456 或已注册账号。

三、致命坑：隐藏容器里图表白屏

主系统 .app 默认 display:none，登录后才显示。如果启动时直接 show("dash") 初始化 ECharts，容器尺寸是 0，图表会画成空白。解法：登录成功后再初始化，并强制 resize：

function enter(){
  document.getElementById("login").classList.add("hidden");
  document.getElementById("app").classList.remove("hidden");
  show("dash");                       // 此时容器已可见，尺寸正常
  setTimeout(()=>charts.forEach(c=>c.resize()),60);  // 双保险
}

这个坑在所有"先登录后显示主界面"的系统里都会出现。记住：图表初始化必须在容器可见之后。

四、玻璃拟态登录卡

右栏卡片三件套：

• background:rgba(255,255,255,.06) 半透明；
• border:1px solid rgba(255,255,255,.10) 细描边；
• backdrop-filter:blur(18px) 毛玻璃 + 外发光阴影。

输入框聚焦时边框变主蓝、背景轻微泛蓝，反馈一致；登录按钮用蓝色渐变 + 阴影，悬停 translateY(-1px)。

五、回车登录与错误提示

密码框监听回车直接提交；账号/密码错误在卡片内显示红色 lg-err，不弹窗打断体验。

document.getElementById("lgPwd").addEventListener("keydown",e=>{
  if(e.key==="Enter") doLogin();
});

---

小结：登录页不是"画两个输入框"。双页面结构、Tab 切换、隐藏容器 resize 坑、玻璃拟态卡片——这套组合拳做好，300+ 系统就有了统一、大气、不白屏的入口。