/* admin.css —— H5 管理端设计系统（移植自小程序浅色科技工业风，rpx→px，去除 wxss 特有规则）移动端优先，max-width 居中，桌面/平板也好看。所有页面本文件 + 写自己的结构即可。 */ /* 作用域根 = #page。 SPA(console.html) 里 #page 是管理视图容器；旧多页版(login/admin/bind.html) 给。之所以不用 :root，是因为控制台 control.css 的 :root 也定义了 --bg/--ok/--line，同文档内联时会互相覆盖 —— 降级到 #page 后两套主题彻底隔离。 */ #page { --brand: #1f6feb; --brand-2: #0ea5e9; --brand-soft: #eaf2ff; --bg: #eef1f6; --card: #ffffff; --line: #dce1e9; --line-soft: #eef1f6; --text: #151a23; --muted: #6b7280; --muted-2: #9aa2ae; --radius: 14px; --radius-lg: 20px; --shadow-sm: 0 2px 12px rgba(20, 30, 50, .05); --shadow-lg: 0 12px 40px rgba(20, 30, 50, .08); --ok: #16a34a; --ok-soft: #e9f9ef; --warn: #f59e0b; --danger: #e5484d; } * { box-sizing: border-box; } #page { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: -apple-system, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", system-ui, sans-serif; font-size: 15px; -webkit-font-smoothing: antialiased; } #page .app { max-width: 720px; margin: 0 auto; padding: 16px; } /* ===== 顶栏 ===== */ .topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .topbar h1 { font-size: 19px; font-weight: 800; margin: 0; letter-spacing: .5px; } .topbar .who { font-size: 12px; color: var(--muted); } .btn-ghost-sm { background: #fff; color: var(--muted); border: 1px solid var(--line); border-radius: 10px; padding: 6px 12px; font-size: 13px; cursor: pointer; } .btn-ghost-sm:active { transform: translateY(1px); } /* ===== 卡片 ===== */ .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-bottom: 14px; box-shadow: var(--shadow-sm); } .row { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .muted { color: var(--muted); font-size: 13px; } .title { font-size: 17px; font-weight: 700; margin-bottom: 4px; color: var(--text); } .sub { color: var(--muted); font-size: 13px; margin-bottom: 14px; } .section-title { font-size: 13px; color: var(--muted); font-weight: 600; letter-spacing: .5px; margin: 6px 0 12px; } /* ===== 按钮 ===== */ .btn { background: var(--brand); color: #fff; border: none; border-radius: 12px; padding: 12px 18px; text-align: center; font-weight: 600; font-size: 15px; cursor: pointer; box-shadow: 0 6px 16px rgba(31, 111, 235, .2); line-height: 1.3; } .btn:active { transform: translateY(1px); } .btn.block { width: 100%; display: block; } .btn.ghost { background: #fff; color: #33414f; border: 1px solid #c7d0e0; box-shadow: none; } .btn.danger { background: var(--danger); box-shadow: none; } .btn.warn { background: var(--warn); color: #1a1a1a; box-shadow: none; } .btn.mini { padding: 7px 12px; font-size: 13px; box-shadow: none; border-radius: 9px; } .btn[disabled] { opacity: .5; cursor: not-allowed; } .mt12 { margin-top: 12px; } .mt16 { margin-top: 16px; } .ml8 { margin-left: 8px; } /* ===== 输入框 ===== */ .field { margin-top: 14px; } .field-label { display: block; font-size: 13px; color: var(--muted); letter-spacing: 1px; margin-bottom: 8px; } .input { width: 100%; box-sizing: border-box; background: #f7f9fc; border: 1px solid #cdd5e1; border-radius: 12px; padding: 12px 14px; color: var(--text); font-size: 15px; outline: none; } .input:focus { border-color: var(--brand); background: #fff; } /* ===== 标签 ===== */ .tag { display: inline-block; font-size: 12px; padding: 3px 10px; border-radius: 999px; background: var(--brand-soft); color: var(--brand); margin-left: 8px; vertical-align: middle; } .tag.l3tag { background: var(--ok-soft); color: var(--ok); } /* ===== 身份卡统计 ===== */ .me-card .stats { display: flex; margin-top: 16px; padding-top: 14px; border-top: 1px solid #eef1f6; } .stat { flex: 1; text-align: center; } .stat-n { font-size: 26px; font-weight: 800; color: var(--brand); line-height: 1; } .stat-l { font-size: 12px; color: var(--muted); margin-top: 4px; } /* ===== 树形节点 ===== */ .card.node .row { align-items: flex-start; flex-wrap: wrap; row-gap: 8px; } .node-main { flex: 1 1 240px; min-width: 0; } .node-ops { display: flex; align-items: center; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; gap: 8px; } .node-name { display: flex; align-items: center; flex-wrap: wrap; row-gap: 4px; font-weight: 700; font-size: 16px; max-width: 100%; } .card.node.l2 { border-left: 5px solid var(--brand); } .card.node.l3 { border-left: 5px solid var(--ok); } .l3-wrap { margin: 14px 0 0 16px; padding-left: 14px; border-left: 2px solid #dbe4f0; } .card.l3 { background: #f7f9fc; margin: 10px 0; box-shadow: none; } /* 卡片信息块：用户名/密码/备注 */ .node-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; } .fld { display: flex; flex-direction: column; background: #f3f6fb; border-radius: 12px; padding: 10px 14px; flex: 1 1 30%; min-width: 140px; box-sizing: border-box; } .fld .meta-k { font-size: 12px; color: var(--muted); } .fld .meta-v { font-size: 15px; color: var(--text); font-weight: 600; word-break: break-all; margin-top: 4px; } /* ===== 设备 ===== */ .devs { margin-top: 12px; } .dev { padding: 12px 0; border-top: 1px solid #e9eef5; } .dev:first-child { border-top: none; } .dev-info { flex: 1; min-width: 0; } .dev-name { font-size: 15px; font-weight: 600; display: flex; align-items: center; color: var(--text); } /* 设备名称强制正常黑色（L3 我的设备卡片等，防止旧版/H5 缓存导致浅色） */ .card.node.dev .node-name { color: var(--text); font-weight: 700; } .card.node.dev .meta-v { color: var(--text); } /* 状态点 */ .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; background: var(--muted-2); margin-right: 8px; vertical-align: middle; } .dot.ok { background: var(--ok); } .dot.warn { background: var(--warn); } .dot.off { background: #c2c8d4; } .dot.wait { background: #f59e0b; } .dev-status { font-size: 12px; margin-left: 8px; vertical-align: middle; } .dev-status.on { color: #16a34a; } .dev-status.off { color: #9aa3b2; } /* 设备在线/离线胶囊 badge（标题下方独立） */ .online-badge { display: inline-block; margin-top: 10px; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 500; align-self: flex-start; } .online-badge.on { background: #16a34a; color: #fff; } .online-badge.off { background: #eef0f3; color: #6b7280; } .online-badge.wait { background: #fff7ed; color: #d97706; } .empty-sm { font-size: 12px; color: var(--muted-2); padding: 10px 0 0 6px; } /* ===== 空态 ===== */ .empty-state { text-align: center; padding: 40px 20px; color: var(--muted-2); } .empty-state .es-icon { width: 64px; height: 64px; margin: 0 auto 14px; background-repeat: no-repeat; background-position: center; background-size: 56px 56px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa2ae' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7l9-4 9 4v10l-9 4-9-4z'/%3E%3Cpath d='M3 7l9 4 9-4M12 11v10'/%3E%3C/svg%3E"); opacity: .85; } .empty-state .es-title { font-size: 16px; color: var(--text); font-weight: 700; margin-bottom: 6px; } .empty-state .es-desc { font-size: 13px; line-height: 1.6; } /* ===== 弹窗（添加/编辑） ===== */ .mask { position: fixed; inset: 0; background: rgba(20, 30, 50, .45); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 20px; } .sheet { width: 100%; max-width: 420px; background: #fff; border-radius: 18px; padding: 22px; box-sizing: border-box; } .sheet .title { font-size: 18px; margin-bottom: 16px; } .sheet .btn { margin-top: 8px; } /* ===== 登录页 ===== */ .login { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 28px; box-sizing: border-box; background: linear-gradient(rgba(31, 111, 235, .045) 1px, transparent 1px) 0 0 / 100% 32px, linear-gradient(90deg, rgba(31, 111, 235, .045) 1px, transparent 1px) 0 0 / 32px 100%, #eef1f6; } .brand { display: flex; flex-direction: column; align-items: center; margin-bottom: 32px; } .brand-mark { width: 64px; height: 64px; border-radius: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M12 5l6 3.5v7L12 19l-6-3.5v-7z'/%3E%3C/svg%3E") center / 34px 34px no-repeat, linear-gradient(135deg, #1f6feb, #0ea5e9); box-shadow: 0 8px 22px rgba(31, 111, 235, .32); } .brand-name { font-size: 30px; font-weight: 800; letter-spacing: 3px; color: #151a23; margin-top: 14px; } .brand-line { width: 56px; height: 4px; border-radius: 3px; margin: 10px 0; background: linear-gradient(90deg, #1f6feb, #0ea5e9); } .brand-sub { font-size: 13px; color: var(--muted); letter-spacing: 1px; } .panel { position: relative; width: 100%; max-width: 400px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 36px 30px 28px; box-shadow: var(--shadow-lg); box-sizing: border-box; overflow: hidden; } .panel-bar { position: absolute; top: 0; left: 0; right: 0; height: 6px; background: linear-gradient(90deg, #1f6feb, #0ea5e9); } .panel-head { margin-bottom: 22px; } .panel-title { font-size: 26px; font-weight: 800; color: #151a23; letter-spacing: 1px; } .panel-tip { font-size: 13px; color: var(--muted); margin-top: 6px; } .field-input-wrap { position: relative; display: flex; align-items: center; } .field-input { width: 100%; box-sizing: border-box; height: 52px; line-height: 52px; background: #f7f9fc; border: 1px solid #cdd5e1; border-radius: 12px; padding: 0 46px 0 16px; font-size: 16px; color: #151a23; outline: none; transition: border-color .15s, background .15s; } .field-input:focus { border-color: var(--brand); background: #fff; } .eye { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; background-repeat: no-repeat; background-position: center; background-size: 20px 20px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); cursor: pointer; } .eye.on { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%231f6feb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E"); } .login-btn { width: 100%; margin-top: 10px; padding: 15px 0; text-align: center; background: linear-gradient(90deg, #1f6feb, #1557d6); color: #fff; font-size: 16px; font-weight: 700; letter-spacing: 3px; border: none; border-radius: 12px; box-shadow: 0 8px 20px rgba(31, 111, 235, .28); cursor: pointer; } .login-btn:active { transform: translateY(2px); } .login-error { margin-top: 14px; color: var(--danger); font-size: 13px; text-align: center; } .panel-foot { margin-top: 18px; font-size: 12px; color: var(--muted-2); text-align: center; line-height: 1.6; }