:root { /* 品牌主题色：默认值即原蓝色。机构绑定自己的主题色后，由服务端在 注入 :root 覆盖，全站主色（按钮/链接/进度条/渐变/边框）随之切换 —— 即"独立品牌"的主色。 --primary-light / --primary-border / --primary-bg 由主色与白色按 20%/70%/90% 混合得出， 注入时一并算好，保证任意主色下都有配套的浅色底与描边。 */ --primary: #409eff; --primary-light: #66b1ff; --primary-bg: #ecf5ff; --primary-border: #c6e2ff; --success: #67c23a; --success-bg: #f0f9eb; --warning: #e6a23c; --warning-bg: #fdf6ec; --danger: #f56c6c; --danger-bg: #fef0f0; --info: #909399; --info-bg: #f4f4f5; --text-primary: #303133; --text-regular: #606266; --text-secondary: #909399; --text-placeholder: #a8abb2; --border: #ebeef5; --border-light: #e4e7ed; --bg-page: #f2f6fc; --bg-white: #ffffff; --radius: 8px; --shadow: 0 1px 4px rgba(0,0,0,.04); } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; } body { font-family: "Helvetica Neue", Helvetica, "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", Arial, sans-serif; background: var(--bg-page); color: var(--text-primary); font-size: 14px; } a { text-decoration: none; color: inherit; } .app { display: flex; min-height: 100vh; } /* ---------- 侧边栏 ---------- */ .sidebar { width: 230px; background: var(--bg-white); border-right: 1px solid var(--border); display: flex; flex-direction: column; flex-shrink: 0; } .sidebar .brand { padding: 0; background: linear-gradient(135deg, var(--primary) 0%, #36d1dc 100%); color: #fff; } .sidebar .brand-inner { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; } .sidebar .brand .sparkle { font-size: 20px; margin-right: 6px; } .sidebar .brand .brand-name { font-size: 20px; font-weight: 700; letter-spacing: 1px; } .sidebar .brand .collapse { background: rgba(255,255,255,.2); border: none; color: #fff; padding: 3px 8px; border-radius: 4px; font-size: 12px; cursor: pointer; } .sidebar nav { padding: 10px 0; flex: 1; overflow-y: auto; } .group { margin: 6px 0; } .group-title { padding: 8px 22px; font-size: 12px; color: var(--text-secondary); font-weight: 600; letter-spacing: .5px; } .group a, .group .static { display: flex; align-items: center; gap: 10px; padding: 10px 18px; margin: 2px 12px; border-radius: 6px; color: var(--text-primary); font-size: 14px; transition: all .15s; } .group .static { color: var(--text-regular); } .group a .icon, .foot a .icon { width: 18px; height: 18px; flex-shrink: 0; } .group a:hover { background: #f5f7fa; } .group-title { display: flex; align-items: center; gap: 8px; } .group-title .gicon { opacity: .7; } .group a.active { background: linear-gradient(90deg, var(--primary), #36d1dc); color: #fff; box-shadow: 0 4px 12px rgba(64,158,255,.35); } .sidebar .foot { padding: 12px 20px; border-top: 1px solid var(--border); font-size: 14px; } .sidebar .foot a { color: var(--text-regular); display: flex; align-items: center; gap: 8px; } .sidebar .foot a:hover { color: var(--primary); } /* ---------- 主内容区 ---------- */ .main { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--bg-page); } .content { padding: 20px; } /* ---------- 顶部信息卡 ---------- */ .hero-card { background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%); border-radius: 12px; padding: 28px 34px; color: #fff; margin-bottom: 20px; box-shadow: 0 8px 24px rgba(59,130,246,.28); } .hero-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 40px; } .hero-card .item .label { font-size: 13px; opacity: .85; margin-bottom: 6px; } .hero-card .item .value { font-size: 32px; font-weight: 700; letter-spacing: .5px; } .hero-card .item .value.points { color: #fde047; text-shadow: 0 2px 4px rgba(0,0,0,.15); } /* ---------- 卡片面板 ---------- */ .cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; } .card { background: var(--bg-white); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow); } .card .label { font-size: 13px; color: var(--text-secondary); margin-bottom: 6px; } .card .value { font-size: 24px; font-weight: 700; color: var(--text-primary); } .panel { background: var(--bg-white); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); } .panel h3 { font-size: 16px; font-weight: 600; margin-bottom: 18px; color: var(--text-primary); } .info-list { color: var(--text-regular); line-height: 2; } .info-list li { margin-left: 18px; } .info-list a { color: var(--primary); } /* ---------- 表格 ---------- */ table { width: 100%; border-collapse: collapse; font-size: 14px; } th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--border); } th { background: #f5f7fa; color: var(--text-regular); font-weight: 600; } tbody tr:hover { background: #f5f7fa; } .tag { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 12px; } .tag.done { background: var(--success-bg); color: var(--success); } .tag.run { background: var(--warning-bg); color: var(--warning); } .tag.wait { background: var(--info-bg); color: var(--info); } .tag.danger { background: var(--danger-bg); color: var(--danger); } /* ---------- 分页 ---------- */ .pager { display: flex; align-items: center; gap: 8px; margin-top: 16px; } .pager a, .pager span { padding: 6px 12px; border: 1px solid var(--border-light); border-radius: 4px; font-size: 13px; color: var(--text-regular); background: #fff; } .pager a:hover { color: var(--primary); border-color: var(--primary-border); background: var(--primary-bg); } .pager .cur { background: var(--primary); color: #fff; border-color: var(--primary); } /* ---------- 表单 ---------- */ .field { margin-bottom: 18px; } .field label { display: block; font-size: 13px; color: var(--text-regular); margin-bottom: 8px; } .field input, .field select, .field textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--border-light); border-radius: 4px; font-size: 14px; color: var(--text-primary); background: #fff; transition: border .15s; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--primary); } .field textarea { min-height: 100px; resize: vertical; } .btn { display: inline-block; padding: 10px 18px; background: var(--primary); color: #fff; border: none; border-radius: 4px; font-size: 14px; cursor: pointer; transition: background .15s; } .btn:hover { background: var(--primary-light); } .btn.block { width: 100%; } .error { background: var(--danger-bg); color: var(--danger); padding: 10px 12px; border-radius: 4px; font-size: 13px; margin-bottom: 14px; } .msg { background: var(--success-bg); color: var(--success); padding: 10px 12px; border-radius: 4px; font-size: 13px; margin-bottom: 14px; } .muted { color: var(--text-secondary); font-size: 13px; } /* ---------- 登录/注册 ---------- */ .auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #eff6ff 0%, #f5f3ff 100%); } .auth-card { width: 380px; background: #fff; border-radius: var(--radius); padding: 36px 34px; box-shadow: 0 12px 40px rgba(0,0,0,.08); border: 1px solid var(--border); } .auth-card h2 { font-size: 24px; margin-bottom: 6px; color: var(--text-primary); } .auth-card .sub { color: var(--text-secondary); font-size: 13px; margin-bottom: 24px; } .auth-card .alt { text-align: center; font-size: 13px; color: var(--text-secondary); margin-top: 16px; } .auth-card .alt a { color: var(--primary); } /* ---------- 工具栏（搜索/筛选） ---------- */ .toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 18px; } .toolbar .field-inline { display: flex; align-items: center; gap: 8px; } .toolbar input, .toolbar select { padding: 8px 12px; border: 1px solid var(--border-light); border-radius: 4px; font-size: 13px; background: #fff; color: var(--text-primary); } .toolbar input:focus, .toolbar select:focus { outline: none; border-color: var(--primary); } .toolbar .search { width: 240px; } .btn.sm { padding: 8px 14px; font-size: 13px; } .btn.danger { background: var(--danger); } .btn.danger:hover { background: #f78989; } .btn.ghost { background: #fff; color: var(--primary); border: 1px solid var(--primary-border); } .btn.ghost:hover { background: var(--primary-bg); } .link-btn { color: var(--primary); cursor: pointer; border: none; background: none; font-size: 13px; padding: 0; } .link-btn.danger { color: var(--danger); } /* ---------- 进度条 ---------- */ .progress { height: 8px; background: var(--border); border-radius: 6px; overflow: hidden; width: 120px; display: inline-block; vertical-align: middle; } .progress > i { display: block; height: 100%; background: linear-gradient(90deg, var(--primary), #36d1dc); } /* ---------- 表单两列 ---------- */ .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; } .form-grid .field { margin-bottom: 0; } /* ---------- 详情 ---------- */ .detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; } .detail-item { display: flex; flex-direction: column; gap: 4px; padding: 10px 0; border-bottom: 1px dashed var(--border); } .detail-item .k { font-size: 12px; color: var(--text-secondary); } .detail-item .v { font-size: 15px; color: var(--text-primary); font-weight: 500; } /* ---------- 统计卡强调色 ---------- */ .cards .card .v-sub { font-size: 12px; color: var(--text-secondary); margin-top: 4px; } .card.accent-blue { border-top: 3px solid var(--primary); } .card.accent-green { border-top: 3px solid var(--success); } .card.accent-orange { border-top: 3px solid var(--warning); } .card.accent-purple { border-top: 3px solid #8b5cf6; } /* ---------- 公告 ---------- */ .notice { background: var(--primary-bg); border: 1px solid var(--primary-border); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 12px; } .notice .t { font-weight: 600; color: var(--primary); margin-bottom: 6px; font-size: 14px; } .notice .c { color: var(--text-regular); font-size: 13px; line-height: 1.7; } /* ---------- 双栏 ---------- */ .row-2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; } @media (max-width: 980px) { .row-2 { grid-template-columns: 1fr; } .form-grid, .detail-grid, .hero-grid { grid-template-columns: 1fr; } } .section-title { font-size: 15px; font-weight: 600; margin-bottom: 14px; color: var(--text-primary); } .empty { text-align: center; color: var(--text-secondary); padding: 40px 0; } /* ---------- 生成表单专用（1:1 复刻 Element Plus 风格） ---------- */ .hint { font-size: 12px; color: var(--text-secondary); margin-top: 6px; } .paper-panel { background: var(--bg-white); border: 1px solid var(--border); border-radius: 12px; padding: 28px; box-shadow: var(--shadow); } .paper-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; } .paper-title { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; color: var(--text-primary); } .paper-title .icon { font-size: 22px; } .paper-title .version { font-size: 12px; font-weight: 500; color: var(--primary); background: var(--primary-bg); border: 1px solid var(--primary-border); padding: 3px 10px; border-radius: 12px; } .paper-meta { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-secondary); } .paper-meta .dot { width: 8px; height: 8px; border-radius: 50%; background: #67c23a; box-shadow: 0 0 0 3px rgba(103,194,58,.15); } /* Tabs */ .paper-tabs { display: inline-flex; gap: 0; background: #f5f7fa; border-radius: 20px; padding: 4px; margin-bottom: 22px; } .paper-tabs .tab { padding: 8px 20px; border-radius: 16px; font-size: 14px; color: var(--text-regular); cursor: pointer; border: none; background: transparent; transition: all .2s; } .paper-tabs .tab.active { background: linear-gradient(90deg, var(--primary), #36d1dc); color: #fff; box-shadow: 0 4px 12px rgba(64,158,255,.3); } .paper-tabs .tab:not(.active):hover { color: var(--primary); } /* 带计数器输入 */ .input-wrap { position: relative; } .input-wrap input, .input-wrap textarea { width: 100%; } .input-wrap .counter { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--text-secondary); display: flex; align-items: center; gap: 10px; } .input-wrap .counter .rule { color: var(--primary); cursor: pointer; } .input-wrap .counter .rule:hover { text-decoration: underline; } .input-wrap textarea { padding-right: 80px; } .input-wrap textarea ~ .counter { top: 14px; transform: none; } /* Slider + number */ .slider-field { display: flex; align-items: center; gap: 12px; } .slider-field input[type=range] { flex: 1; -webkit-appearance: none; height: 6px; border-radius: 3px; background: #e4e7ed; outline: none; } .slider-field input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--primary); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.15); cursor: pointer; } .slider-field input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--primary); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.15); cursor: pointer; } .slider-field .num-box { display: flex; align-items: center; border: 1px solid var(--border-light); border-radius: 4px; overflow: hidden; } .slider-field .num-box input { width: 72px; border: none; padding: 8px 10px; text-align: center; font-weight: 600; } .slider-field .num-box .unit { padding: 8px 10px; background: #f5f7fa; border-left: 1px solid var(--border-light); color: var(--text-secondary); font-size: 13px; } /* Switch */ .switch-row { display: flex; flex-wrap: wrap; gap: 22px 32px; margin: 4px 0 18px; } .switch-row label { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-regular); cursor: pointer; } .switch-row input[type=checkbox] { appearance: none; width: 38px; height: 20px; background: #dcdfe6; border-radius: 10px; position: relative; cursor: pointer; transition: background .2s; outline: none; } .switch-row input[type=checkbox]::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.15); } .switch-row input[type=checkbox]:checked { background: var(--primary); } .switch-row input[type=checkbox]:checked::after { transform: translateX(18px); } /* Outline section */ .outline-section { display: grid; grid-template-columns: 1fr 260px; gap: 20px; align-items: start; } .outline-card { background: var(--primary-bg); border: 1px solid var(--primary-border); border-radius: 8px; padding: 16px; } .outline-card h4 { font-size: 14px; color: var(--text-primary); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; } .outline-card p { font-size: 12px; color: var(--text-secondary); line-height: 1.7; margin-bottom: 12px; } .outline-card .btn { width: 100%; text-align: center; background: linear-gradient(90deg, var(--primary), #36d1dc); } .outline-card ul { margin-top: 12px; padding-left: 14px; font-size: 12px; color: var(--text-secondary); line-height: 1.8; } .outline-card ul li { margin-bottom: 4px; } /* Batch textarea */ .batch-area { min-height: 220px; } /* 合计 */ .total-box { display: flex; align-items: center; justify-content: space-between; background: linear-gradient(90deg, var(--primary-bg), #f5f7fa); border: 1px solid var(--primary-border); border-radius: 8px; padding: 14px 18px; margin: 18px 0; } .total-box .label { font-size: 14px; font-weight: 600; color: var(--text-primary); } .total-box .value { font-size: 20px; font-weight: 700; color: var(--text-primary); } /* 说明 link */ .tip-link { color: var(--primary); cursor: pointer; font-size: 12px; margin-left: 6px; } .tip-link:hover { text-decoration: underline; } /* 提交区 */ .form-actions { display: flex; gap: 14px; margin-top: 4px; } .form-actions .btn { padding: 11px 32px; font-size: 14px; } .form-actions .btn.primary { background: linear-gradient(90deg, var(--primary), #36d1dc); } .form-actions .btn.reset { background: #fff; color: var(--text-regular); border: 1px solid var(--border-light); } .form-actions .btn.reset:hover { color: var(--primary); border-color: var(--primary-border); background: #f5f7fa; } .field > label { font-weight: 500; } .field > label .req { color: var(--danger); margin-left: 2px; } @media (max-width: 980px) { .outline-section { grid-template-columns: 1fr; } .paper-header { flex-direction: column; align-items: flex-start; gap: 10px; } .slider-field { flex-wrap: wrap; } .switch-row { gap: 14px 20px; } } /* ---------- 管理页 1:1 公共样式 ---------- */ .admin-title { font-size: 20px; font-weight: 700; color: var(--text-primary); margin-bottom: 14px; } .admin-card { background: var(--bg-white); border: 1px solid var(--border); border-radius: 12px; padding: 22px 24px; box-shadow: var(--shadow); } .admin-toolbar { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-bottom: 12px; } .admin-toolbar input.search { width: 260px; padding: 8px 12px; border: 1px solid var(--border-light); border-radius: 6px; font-size: 13px; background: #fff; color: var(--text-primary); } .admin-toolbar input.search:focus { outline: none; border-color: var(--primary); } .admin-toolbar .btn { padding: 8px 16px; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; } .admin-toolbar .btn.ghost { background: #fff; color: var(--text-regular); border: 1px solid var(--border-light); } .admin-toolbar .btn.ghost:hover { color: var(--primary); border-color: var(--primary-border); background: #f5f7fa; } .admin-pager-info { font-size: 12px; color: var(--text-secondary); margin: 10px 0 14px; } .admin-table { width: 100%; border-collapse: collapse; font-size: 14px; } .admin-table th, .admin-table td { text-align: left; padding: 14px 10px; border-bottom: 1px solid var(--border); } .admin-table th { background: #f5f7fa; color: var(--text-regular); font-weight: 600; } .admin-table tbody tr:hover { background: #fafafa; } .admin-table .id-link { color: var(--primary); cursor: pointer; } .admin-table .id-link:hover { text-decoration: underline; } a.download { color: var(--primary); cursor: pointer; text-decoration: none; } a.download:hover { text-decoration: underline; } .admin-table .download { color: var(--primary); cursor: pointer; } .admin-table .download:hover { text-decoration: underline; } .admin-pager { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; } .admin-pager.center { justify-content: center; gap: 16px; } .admin-pager a { padding: 8px 16px; border-radius: 6px; font-size: 13px; background: var(--primary); color: #fff; display: inline-flex; align-items: center; gap: 6px; } .admin-pager a:hover { background: var(--primary-light); } .admin-pager span { font-size: 13px; color: var(--text-regular); } .tag { border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 500; } .info-list { list-style: none; color: var(--text-regular); line-height: 2.2; } .info-list li { display: flex; gap: 10px; } .info-list .num { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--border-light); color: var(--text-secondary); font-size: 12px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 6px; } .info-list a { color: var(--primary); } .info-list a:hover { text-decoration: underline; } .v-header { writing-mode: vertical-rl; letter-spacing: 2px; margin: 0 auto; } /* ---------- 管理后台 ---------- */ .role-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; } .role-desc { color: var(--text-secondary); font-size: 13px; margin-top: 8px; } .module-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-top: 20px; } .module-card { display: block; background: var(--bg-white); border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px; text-decoration: none; color: inherit; box-shadow: var(--shadow); transition: transform .12s, box-shadow .12s, border-color .12s; } .module-card:hover { transform: translateY(-2px); border-color: var(--primary); box-shadow: 0 8px 24px rgba(64,158,255,.15); } .module-card .mc-name { font-size: 15px; font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: 8px; } .module-card .mc-desc { font-size: 13px; color: var(--text-secondary); margin-top: 8px; line-height: 1.6; } .module-card .mc-icon { width: 30px; height: 30px; border-radius: 8px; background: var(--primary-bg); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; margin-top: 18px; } .stat-box { background: var(--bg-white); border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px; } .stat-box .sv { font-size: 26px; font-weight: 700; color: var(--primary); } .stat-box .sl { font-size: 13px; color: var(--text-secondary); margin-top: 6px; } .admin-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; flex-wrap: wrap; gap: 12px; } .admin-head .left { display: flex; align-items: center; gap: 12px; } .field-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 16px; } .field-row .f { display: flex; flex-direction: column; gap: 6px; } .field-row .f label { font-size: 12px; color: var(--text-secondary); } .field-row .f input, .field-row .f select, .field-row .f textarea { padding: 8px 12px; border: 1px solid var(--border-light); border-radius: 4px; font-size: 13px; background: #fff; color: var(--text-primary); min-width: 160px; } .field-row .f input:focus, .field-row .f select:focus, .field-row .f textarea:focus { outline: none; border-color: var(--primary); } .inline-form { display: inline; } .nowrap { white-space: nowrap; } .text-secondary { color: var(--text-secondary); } .text-danger { color: var(--danger); } /* ---------- 模型配置模块 ---------- */ .range-tabs { display: inline-flex; background: var(--info-bg); border-radius: 8px; padding: 3px; gap: 2px; } .range-tabs a { padding: 5px 14px; border-radius: 6px; font-size: 13px; color: var(--text-regular); } .range-tabs a.on { background: var(--bg-white); color: var(--primary); font-weight: 600; box-shadow: var(--shadow); } .stat-mini-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 20px; } .stat-mini { background: var(--bg-white); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; } .stat-mini .label { font-size: 12px; color: var(--text-secondary); margin-bottom: 4px; } .stat-mini .value { font-size: 20px; font-weight: 700; } .stat-mini .value.up { color: var(--success); } .stat-mini .value.down { color: var(--danger); } .model-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--primary-bg); color: var(--primary); border-radius: 5px; padding: 2px 8px; font-size: 12px; margin: 2px 4px 2px 0; } .model-chip.main { background: linear-gradient(135deg, var(--primary), #36d1dc); color: #fff; } .model-chip.off { background: var(--info-bg); color: var(--info); text-decoration: line-through; } .param-list { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; color: var(--text-secondary); } .param-list b { color: var(--text-primary); font-weight: 600; } /* 弹窗 */ .modal-mask { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: none; align-items: center; justify-content: center; z-index: 1000; } .modal-mask.show { display: flex; } .modal { background: var(--bg-white); border-radius: 12px; width: 680px; max-width: 94vw; max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.2); } /* 弹窗内表单也参与 flex 收缩：modal-body/foot 在 form 内时，form 必须可收缩，body 才能内部滚动 */ .modal > form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden; } .modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .modal-head .t { font-size: 16px; font-weight: 600; } .modal-close { cursor: pointer; background: none; border: none; font-size: 20px; color: var(--text-secondary); line-height: 1; padding: 4px; } .modal-close:hover { color: var(--danger); } .modal-tabs { display: flex; border-bottom: 1px solid var(--border); padding: 0 22px; flex-shrink: 0; } .modal-tabs .mtab { padding: 12px 16px; cursor: pointer; font-size: 14px; color: var(--text-regular); border-bottom: 2px solid transparent; } .modal-tabs .mtab.on { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; } .modal-body { padding: 20px 22px; overflow-y: auto; flex: 1 1 auto; min-height: 0; } .modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--border); flex-shrink: 0; } .mtab-pane { display: none; } .mtab-pane.on { display: block; } .form-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; } .form-grid2 .f, .form-grid2 .full { grid-column: 1 / -1; } .f label { display: block; font-size: 13px; color: var(--text-regular); margin-bottom: 6px; } .f input, .f select, .f textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--border-light); border-radius: 6px; font-size: 14px; font-family: inherit; background: var(--bg-white); color: var(--text-primary); } .f input:focus, .f select:focus, .f textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px rgba(64,158,255,.15); } .f textarea { min-height: 220px; line-height: 1.7; font-family: Consolas, Menlo, monospace; font-size: 13px; resize: vertical; } .f .hint { font-size: 12px; color: var(--text-secondary); margin-top: 4px; } .switch-line { display: flex; align-items: center; gap: 10px; font-size: 14px; } .switch-line input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--primary); } .detail-collapse { border: 1px dashed var(--border-light); border-radius: 8px; padding: 4px 14px; margin-top: 14px; } .detail-collapse summary { cursor: pointer; color: var(--text-secondary); font-size: 13px; padding: 8px 0; } .failbar { height: 8px; background: var(--success-bg); border-radius: 4px; overflow: hidden; } .failbar i { display: block; height: 100%; background: var(--danger); border-radius: 4px; } .btn-ghost { background: var(--bg-white); border: 1px solid var(--border-light); border-radius: 6px; padding: 8px 18px; cursor: pointer; font-size: 14px; color: var(--text-regular); } .btn-ghost:hover { color: var(--primary); border-color: var(--primary); } .btn-primary { background: var(--primary); border: none; border-radius: 6px; padding: 8px 20px; cursor: pointer; font-size: 14px; color: #fff; } .btn-primary:hover { background: var(--primary-light); } /* ---------- 管理看板 ---------- */ .kpi-wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; } .kpi { display: flex; align-items: center; gap: 14px; background: var(--bg-white); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow); } .kpi .ic { width: 50px; height: 50px; border-radius: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .kpi .ic svg { width: 24px; height: 24px; } .kpi .ic.blue { background: var(--primary-bg); color: var(--primary); } .kpi .ic.green { background: var(--success-bg); color: var(--success); } .kpi .ic.orange { background: var(--warning-bg); color: var(--warning); } .kpi .ic.purple { background: #f3eefc; color: #8b5cf6; } .kpi .info { min-width: 0; } .kpi .info .l { font-size: 13px; color: var(--text-secondary); margin-bottom: 2px; } .kpi .info .v { font-size: 26px; font-weight: 700; line-height: 1.1; color: var(--text-primary); } .kpi .info .s { font-size: 12px; color: var(--text-secondary); margin-top: 4px; } .todo-list { display: flex; flex-direction: column; } .todo-item { display: flex; align-items: center; } .todo-item a { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 12px 2px; border-bottom: 1px dashed var(--border); color: inherit; } .todo-item:last-child a { border-bottom: none; } .todo-item .left { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-primary); } .todo-item .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .todo-item .name { transition: color .15s; } .todo-item a:hover .name { color: var(--primary); } .todo-item .cnt { font-size: 14px; font-weight: 700; } .sys-row { display: flex; align-items: center; justify-content: space-between; padding: 11px 2px; font-size: 14px; border-bottom: 1px dashed var(--border); } .sys-row:last-child { border-bottom: none; } .sys-row .k { color: var(--text-regular); } .sys-row .v { font-weight: 600; color: var(--text-primary); } .trend { display: flex; align-items: flex-end; gap: 10px; height: 190px; padding: 10px 4px 0; } .trend .col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 8px; min-width: 0; } .trend .bar { width: 60%; max-width: 44px; background: linear-gradient(180deg, var(--primary), #36d1dc); border-radius: 6px 6px 0 0; min-height: 4px; transition: height .4s; } .trend .col.today .bar { background: linear-gradient(180deg, #8b5cf6, #a78bfa); } .trend .cval { font-size: 12px; font-weight: 600; color: var(--text-secondary); } .trend .cday { font-size: 12px; color: var(--text-secondary); white-space: nowrap; } .trend .col.today .cday { color: #8b5cf6; font-weight: 600; } @media (max-width: 1100px) { .kpi-wrap { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .kpi-wrap { grid-template-columns: 1fr; } } /* ===== 看板增强：环比箭头 / 刷新徽标 / 折线图 / 可点击行 / 模态框 ===== */ .kpi .info .d { font-size: 12px; margin-top: 5px; display: flex; align-items: center; gap: 4px; } .kpi .info .d.up { color: var(--success); } .kpi .info .d.down { color: var(--danger); } .kpi .info .d.flat { color: var(--text-secondary); } .kpi .info .d .arrow { font-weight: 700; font-size: 13px; line-height: 1; } .refresh-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; cursor: pointer; user-select: none; background: var(--success-bg); color: var(--success); border: 1px solid transparent; transition: all .15s; } .refresh-badge::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px rgba(103,194,58,.18); } .refresh-badge:hover { border-color: var(--success); } .refresh-badge.err { background: #fef0f0; color: var(--danger); } .refresh-badge.err::before { background: var(--danger); box-shadow: 0 0 0 3px rgba(245,108,108,.18); } .trend-chart { width: 100%; min-height: 210px; } .trend-chart svg { display: block; } .dash-tasks tr.clickable { cursor: pointer; transition: background .12s; } .dash-tasks tr.clickable:hover { background: var(--primary-bg); } /* 模态框 */ /* 看板弹窗遮罩（由内联 style.display 控制，勿写 display:flex，避免覆盖旧 .show 弹窗的默认隐藏） */ .modal-mask { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 2000; align-items: center; justify-content: center; } .modal-box { width: 560px; max-width: 92vw; max-height: 86vh; overflow: auto; background: var(--card-bg, #fff); border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,.2); } .modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); font-size: 16px; font-weight: 600; } .modal-close { cursor: pointer; font-size: 24px; line-height: 1; color: var(--text-secondary); padding: 0 4px; } .modal-close:hover { color: var(--danger); } .modal-body { padding: 20px; } .modal-loading { text-align: center; color: var(--text-secondary); padding: 40px 0; font-size: 14px; } .detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; margin-bottom: 18px; } .detail-grid .dl { display: flex; flex-direction: column; gap: 4px; } .detail-grid .dk, .detail-title .dk { font-size: 12px; color: var(--text-secondary); } .detail-grid .dv, .detail-title .dv { font-size: 14px; color: var(--text-primary); font-weight: 500; word-break: break-all; } .detail-title { margin-bottom: 14px; } .detail-title .dv { margin-top: 4px; font-weight: 600; } .detail-foot { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); } @media (max-width: 640px) { .detail-grid { grid-template-columns: 1fr; } .modal-box { width: 96vw; } } /* ===== 看板增强 V2：KPI 可点击 / 趋势 Tab / 下钻表格 ===== */ .kpi.clickable { cursor: pointer; transition: transform .15s, box-shadow .15s; } .kpi.clickable:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.1); } .trend-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; } .trend-tabs { display: flex; gap: 6px; } .ttab { padding: 6px 16px; border: 1px solid var(--border); border-radius: 20px; background: transparent; cursor: pointer; font-size: 13px; color: var(--text-regular); transition: all .15s; } .ttab:hover { color: var(--primary); border-color: var(--primary); } .ttab.on { color: #fff; background: var(--primary); border-color: var(--primary); font-weight: 600; } .drill-table { width: 100%; border-collapse: collapse; font-size: 14px; } .drill-table th { text-align: left; padding: 10px 12px; font-size: 12px; font-weight: 600; color: var(--text-secondary); border-bottom: 2px solid var(--border); white-space: nowrap; } .drill-table td { padding: 10px 12px; border-bottom: 1px solid var(--border-light); color: var(--text-primary); } .drill-table tr:hover td { background: var(--primary-bg); } .drill-table .muted { color: var(--text-secondary); font-size: 12px; white-space: nowrap; } .drill-page { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); } .btn-sm { padding: 6px 16px; border-radius: 6px; border: 1px solid var(--border); background: #fff; cursor: pointer; font-size: 13px; color: var(--text-regular); transition: all .15s; } .btn-sm:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); } .btn-sm:disabled { opacity: .4; cursor: not-allowed; } .page-info { font-size: 13px; color: var(--text-secondary); } @media (max-width: 640px) { .trend-head { flex-direction: column; align-items: flex-start; gap: 8px; } .drill-table { font-size: 12px; } .drill-table th, .drill-table td { padding: 6px 8px; } }