/* ============================================================ * 墨白 (MoBai) 登录页皮肤 * 引入：app/view/login/index.html 内（在 login.css 之后） * 登录页为自包含页，大量内联样式写死蓝色，本文件用 !important 压回墨白 * 回滚：删除登录页 中本文件那行 即还原 * ============================================================ */ :root{ --mb-bg:#F5F5F7; --mb-surface:#FFFFFF; --mb-ink:#1A1A1A; --mb-text:#1F2329; --mb-text-2:#646A73; --mb-accent:#378ADD; --mb-radius:14px; --mb-shadow:0 1px 2px rgba(0,0,0,.04),0 20px 60px rgba(0,0,0,.10); --mb-dur-fast:120ms; --mb-dur-med:200ms; --mb-ease:cubic-bezier(.22,.61,.36,1); } /* 整页底色（第1层·背景）：雾青水彩渐变，替代原蓝渐变（参考图底色） */ #LAY-user-login{ background: radial-gradient(1100px 700px at 18% 10%,rgba(255,255,255,.50),rgba(255,255,255,0) 62%), radial-gradient(1000px 760px at 82% 88%,rgba(58,132,116,.30),rgba(58,132,116,0) 68%), radial-gradient(700px 520px at 55% 45%,rgba(150,208,196,.35),rgba(150,208,196,0) 70%), linear-gradient(160deg,#B4D8D0 0%,#9CCDC3 46%,#82BDB2 100%)!important; padding-top:calc(50vh - 250px)!important; } /* ===== 动态背景：水色光斑（CSS 漂移）+ 鼠标视差（JS 写 --mx/--my）+ 跟随光晕 ===== */ #LAY-user-login{position:relative!important;overflow:hidden!important;} #LAY-user-login::before, #LAY-user-login::after{ content:"";position:absolute;z-index:0;border-radius:50%; filter:blur(90px);pointer-events:none;opacity:.5; will-change:transform,translate; } /* 白雾 云团：左上，缓慢漂移 + 随鼠标轻移（水彩雾感） */ #LAY-user-login::before{ width:680px;height:680px;top:-200px;left:-160px; background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.42),rgba(255,255,255,0) 62%); translate:calc(var(--mx,0)*46px) calc(var(--my,0)*46px); animation:mb-float-a 22s var(--mb-ease) infinite alternate; } /* 深青 雾团：右下，反向漂移 */ #LAY-user-login::after{ width:600px;height:600px;bottom:-220px;right:-140px; background:radial-gradient(circle at 60% 40%,rgba(64,142,128,.30),rgba(64,142,128,0) 62%); translate:calc(var(--mx,0)*-34px) calc(var(--my,0)*-34px); animation:mb-float-b 26s var(--mb-ease) infinite alternate; } @keyframes mb-float-a{ from{transform:translate(0,0) scale(1);} to{transform:translate(90px,60px) scale(1.12);} } @keyframes mb-float-b{ from{transform:translate(0,0) scale(1);} to{transform:translate(-80px,-50px) scale(1.08);} } /* 跟随鼠标的柔光晕（由注入 JS 创建并驱动）——青瓷色 */ #LAY-user-login .mb-spot{ position:absolute;z-index:0;width:460px;height:460px;border-radius:50%; pointer-events:none;transform:translate(-50%,-50%); background:radial-gradient(circle,rgba(255,255,255,.16),rgba(140,200,186,.10) 42%,transparent 66%); filter:blur(26px);opacity:0;transition:opacity .6s var(--mb-ease); } #LAY-user-login.mb-on .mb-spot{opacity:1;} /* 登录卡与页脚浮到背景层之上 */ .layadmin-user-login-main{position:relative;z-index:2;} .layadmin-user-login-footer{position:relative;z-index:2;} /* 背景图兜底：若有 adminloginbg 也加一层浅遮罩让其不刺眼 */ #LAY-user-login[style*="background:url"]{ background-blend-mode:soft-light!important; } /* 登录卡片：毛玻璃（半透白 + 背景模糊）、大圆角、深悬浮阴影；宽卡左右分栏（品牌卡 + 表单） */ .layadmin-user-login-main{ width:min(820px,calc(100vw - 40px))!important; background:rgba(255,255,255,.62)!important; -webkit-backdrop-filter:blur(22px) saturate(1.35)!important; backdrop-filter:blur(22px) saturate(1.35)!important; border-radius:18px!important; box-shadow:0 2px 6px rgba(23,72,60,.08),0 30px 80px rgba(23,72,60,.28)!important; border:1px solid rgba(255,255,255,.65)!important; padding:0!important; display:grid!important; grid-template-columns:320px 1fr; grid-template-rows:auto 1fr; overflow:hidden; animation:mb-pop var(--mb-dur-med) var(--mb-ease) both; } /* 左栏品牌卡（由注入 JS 创建 .mb-brand，占满左侧全高） */ .layadmin-user-login-main .mb-brand{ grid-area:1/1/3/2;position:relative;overflow:hidden; display:flex;flex-direction:column;justify-content:space-between; padding:36px 32px;background:#1A1A1A;color:#fff; } .mb-brand-glow{ position:absolute;width:340px;height:340px;border-radius:50%; filter:blur(70px);pointer-events:none;opacity:.5; top:-120px;left:-100px; background:radial-gradient(circle,rgba(127,119,221,.45),rgba(127,119,221,0) 65%); animation:mb-float-a 18s var(--mb-ease) infinite alternate; } .mb-brand::after{ content:"";position:absolute;width:260px;height:260px;border-radius:50%; filter:blur(60px);pointer-events:none;opacity:.4; bottom:-100px;right:-80px; background:radial-gradient(circle,rgba(55,138,221,.40),rgba(55,138,221,0) 65%); animation:mb-float-b 22s var(--mb-ease) infinite alternate; } .mb-brand-logo{position:relative;z-index:1;display:flex;align-items:center;gap:10px; font-size:16px;font-weight:600;letter-spacing:.5px;} .mb-dot{width:18px;height:18px;border-radius:50%;background:#fff;display:inline-block; animation:mb-pulse 2.4s var(--mb-ease) infinite;} @keyframes mb-pulse{ 0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.35);} 50%{box-shadow:0 0 0 7px rgba(255,255,255,0);} } .mb-brand-bottom{position:relative;z-index:1;} .mb-brand-slogan{font-size:26px;font-weight:800;letter-spacing:1px;} .mb-brand-sub{margin-top:10px;font-size:13px;color:rgba(255,255,255,.62);letter-spacing:1px;} .mb-brand-bars{display:flex;align-items:center;gap:8px;margin-top:24px;} .mb-brand-bars i{height:6px;border-radius:3px;display:inline-block;} .mb-brand-bars .b1{width:72px;background:linear-gradient(90deg,#7F77DD,#A08FF2); animation:mb-sheen 3.2s var(--mb-ease) infinite alternate;} .mb-brand-bars .b2{width:40px;background:linear-gradient(90deg,#378ADD,#63A9EE);} .mb-brand-bars .b3{width:18px;background:#3D3D3F;} @keyframes mb-sheen{from{filter:brightness(1);}to{filter:brightness(1.35);}} /* 右栏：标题 + 表单 */ .layadmin-user-login-header{grid-area:1/2;text-align:left!important;padding:36px 44px 0!important;} .layadmin-user-login-body{grid-area:2/2;padding:16px 44px 34px!important;} @media (max-width:880px){ .layadmin-user-login-main{display:block!important;width:420px!important;max-width:calc(100vw - 24px)!important;} .layadmin-user-login-main .mb-brand{display:none!important;} .layadmin-user-login-header{padding:26px 30px 0!important;text-align:center!important;} .layadmin-user-login-body{padding:16px 30px 26px!important;} } @keyframes mb-pop{ from{opacity:0;transform:translateY(10px) scale(.98);} to{opacity:1;transform:translateY(0) scale(1);} } /* 标题：墨黑，替原 #0076FE */ .layadmin-user-login-header .dianda-title, .layadmin-user-login-header div[style*="color"]{ color:var(--mb-ink)!important; font-size:24px!important; letter-spacing:.5px; font-weight:700!important; } /* 输入框：白底、细边、聚焦光标光晕 */ .layadmin-user-login-body .layui-input{ background:var(--mb-surface)!important; border:1px solid rgba(0,0,0,.10)!important; border-radius:10px!important; height:46px!important; color:var(--mb-text)!important; transition:border-color var(--mb-dur-fast) var(--mb-ease),box-shadow var(--mb-dur-fast) var(--mb-ease)!important; } .layadmin-user-login-body .layui-input:focus{ border-color:var(--mb-accent)!important; box-shadow:0 0 0 3px rgba(55,138,221,.14)!important; outline:none; } /* 输入框前图标 */ .layadmin-user-login-icon{color:var(--mb-text-2)!important;} /* 验证码图：圆角 */ .layadmin-user-login-codeimg{border-radius:10px!important;} /* 按钮：墨黑主按钮，替原 #0076FE（内联 style 用 !important 压） */ .layadmin-user-login-body .layui-btn, .layui-btn[lay-filter="LAY-user-login-submit"]{ background:var(--mb-ink)!important; border-color:var(--mb-ink)!important; color:#fff!important; height:46px!important; line-height:46px!important; border-radius:10px!important; font-size:15px!important; letter-spacing:4px; transition:transform var(--mb-dur-fast) var(--mb-ease),box-shadow var(--mb-dur-fast) var(--mb-ease)!important; } .layadmin-user-login-body .layui-btn:hover{ transform:translateY(-1px); box-shadow:0 6px 18px rgba(26,26,26,.22)!important; } /* 链接：科技蓝 */ .layadmin-link,.layadmin-user-jump-change{color:var(--mb-accent)!important;} /* ===== 荷塘 v3 · 四层架构（便于自适应）：第1层背景=页面渐变+雾 / 第2层荷叶SVG构图 / 第3层红锦鲤 / 第4层水纹 ===== */ #mb-pond{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;} /* 第1层 水面雾气：白色水彩云缓慢流动（纯 CSS，不占 JS），带轻视差 */ #mb-pond .mb-mist{ position:absolute;inset:-10%; background: radial-gradient(560px 360px at 24% 28%,rgba(255,255,255,.32),transparent 70%), radial-gradient(680px 420px at 68% 10%,rgba(255,255,255,.24),transparent 70%), radial-gradient(760px 500px at 38% 80%,rgba(64,142,128,.26),transparent 72%); animation:mb-mist 26s ease-in-out infinite alternate; translate:calc(var(--mx,0)*14px) calc(var(--my,0)*14px); } @keyframes mb-mist{ from{transform:translate(0,0) scale(1);} to{transform:translate(-42px,26px) scale(1.07);} } /* 第2层 荷叶：SVG 固定构图(1600x900 slice)随屏等比缩放，右大叶+左小叶 */ #mb-pond .mb-leaves{ position:absolute;inset:0;opacity:.97; translate:calc(var(--mx,0)*22px) calc(var(--my,0)*22px); } #mb-pond .mb-leaves svg{width:100%;height:100%;display:block;} #mb-pond .mb-leafbig{transform-box:fill-box;transform-origin:50% 50%; animation:mb-leafdrift 18s ease-in-out infinite alternate;} @keyframes mb-leafdrift{ from{transform:rotate(0deg) translateY(0);} to{transform:rotate(1.4deg) translateY(-9px);} } /* 第3层 红锦鲤：位置/朝向由 JS rAF 驱动，内层 .mb-tail 独立摆尾（长尾飘逸感） */ .mb-koi{ position:absolute;left:0;top:0;z-index:3;will-change:transform; transform-origin:50% 50%; filter:drop-shadow(0 10px 18px rgba(20,70,60,.30)); } .mb-koi svg{display:block;width:100%;height:auto;overflow:visible;} .mb-koi .mb-tail{ transform-box:fill-box;transform-origin:96% 50%; animation:mb-tail var(--wig,2.8s) ease-in-out infinite; } @keyframes mb-tail{ 0%,100%{transform:rotate(0deg) skewX(0deg);} 38%{transform:rotate(-6deg) skewX(-3deg);} 72%{transform:rotate(5deg) skewX(2deg);} } /* 远处的小鱼：微虚、略降饱和 */ .mb-koi.mb-far{filter:drop-shadow(0 5px 9px rgba(20,70,60,.16)) blur(.6px) saturate(.9);opacity:.92;} /* 第4层 水纹：白环双圈扩散（JS 定时落在鱼身/水面 + 点击生成） */ .mb-ripple{ position:absolute;z-index:4;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%; border:1.5px solid rgba(255,255,255,.85); box-shadow:0 0 22px rgba(255,255,255,.25),inset 0 0 18px rgba(255,255,255,.28); animation:mb-rip 3.6s ease-out forwards; } .mb-ripple::after{ content:"";position:absolute;inset:20px;border-radius:50%; border:1px solid rgba(255,255,255,.6); animation:mb-rip 3.6s ease-out .28s forwards;opacity:0; } @keyframes mb-rip{ 0%{transform:scale(.08);opacity:.95;} 70%{opacity:.40;} 100%{transform:scale(1.2);opacity:0;} } @media (max-width:880px){ .mb-koi{filter:drop-shadow(0 6px 10px rgba(20,70,60,.24));} } /* 底部版权/备案条：固定页底，浅水底上深字可读（原内联深底白字被压掉） */ .layadmin-user-login-footer{ position:fixed!important;left:0!important;right:0!important;bottom:0!important; height:48px!important;line-height:48px!important;padding:0!important; background:linear-gradient(to top,rgba(255,255,255,.55),rgba(255,255,255,0))!important; color:#33594C!important;text-align:center;font-size:12px;letter-spacing:.5px; z-index:2; } .layadmin-user-login-footer a{color:#33594C!important;text-decoration:none;} .layadmin-user-login-footer a:hover{color:#1F3D33!important;}