chenxing
cff4325947
build / build (push) Successful in 2m20s
- SiteManage.vue: 8 列表格改为站点工作台，按 schId 分组「主站宽卡 + 院系子站网格」， 保留卡片⇄表格视图切换与搜索过滤；scope=all 全局视图支持多校分组，搜索时主站卡始终保留（层级锚点） - 新增 views/cms/components/SiteCard.vue、SiteMainCard.vue - 删除 components/SiteContextCard.vue: 站点身份改由页头「学校名.站点名」承担（SchoolLayout）， 侧栏不再铺第二份站点列表，切站入口从 3 处收敛到 2 处（面包屑 + 站点工作台） - v3.1 视觉修订: 色带语义统一为「当前站」（全页同时只有一张卡带选中态，不再一页两处蓝）； 删除面包屑 band-sub 橙色接缝条（身份已收回页头）；返回按钮 ios-undo 18×18 → ios-arrow-back 26×26 可点方块； 删除 SiteManage .zone-tip 设计说明文字（误当 UI 渲染） - 测试: siteLayer.spec.ts 站点卡 4 用例重写为页头反向/正向断言，siteManage.spec.ts 补卡片视图断言；182 用例绿 - 方案: docs/22-站点管理修订方案.md（含 §9 v3.1 视觉修订与像素对照表）
232 lines
14 KiB
CSS
232 lines
14 KiB
CSS
/* 本文件由 scripts/gen-yh-theme.mjs 生成（color-mix 已构建期静态化），勿手改派生色值。
|
||
定稿：07-seam-pure.html（浅色接缝条·纯享版）；挂接：main.ts 置于 icons.css 之后。
|
||
档位开关挂在 <html>：data-theme=blue|ocean|ink|violet|teal × side-deep|side-light × grad-on|grad-off × side-plain */
|
||
|
||
/* ============ 变量体系（:root 默认档 = blue + side-deep + grad-on + side-follow） ============ */
|
||
:root{
|
||
--brand:#577afb; --brand-2:#7b8ffd; --brand-dark:#4264e4;
|
||
--brand-soft:#eef2ff; --brand-a:rgba(87,122,251,0.34); --glow:rgba(87,122,251,0.42);
|
||
--topbar-bg:linear-gradient(100deg,var(--brand) 0%,var(--brand-2) 100%);
|
||
--green:#20a162; --green-d:#188451;
|
||
--red:#e54d42; --red-soft:#fef1f0;
|
||
/* 第一波（P1）沿用现状 56/56，紧凑化 52/44 留 P2（方案 §8-D2） */
|
||
--topbar-h:56px; --crumb-h:56px; --side-w:200px; --r:10px; --r-s:7px;
|
||
--page-bg:#f3f5fa; --panel:#fff; --line:#e9edf5; --line-2:#f0f3f9;
|
||
--text:#1e2635; --text-2:#5a6478; --text-3:#98a1b2;
|
||
--sh:0 1px 2px rgba(16,24,40,.04),0 14px 30px -22px rgba(16,24,40,.4);
|
||
--side-bg:linear-gradient(180deg,#5e7ffb 0%,#415bbb 100%);
|
||
--side-text:#c7d2ea; --side-icon:#95a6cb;
|
||
--side-line:rgba(255,255,255,.08);
|
||
--side-hover:rgba(255,255,255,.09); --side-hover-text:#fff;
|
||
--side-active-bg:rgba(255,255,255,.18); --side-active-text:#fff;
|
||
--side-bar:#fff; --side-scroll:rgba(255,255,255,.18);
|
||
--strip-bg:linear-gradient(180deg,#e9eefe 0,#fff 100%);
|
||
}
|
||
|
||
/* blue · brand #577afb */
|
||
html[data-theme="blue"]{
|
||
--brand:#577afb; --brand-2:#7b8ffd; --brand-dark:#4264e4;
|
||
--brand-soft:#eef2ff; --brand-a:rgba(87,122,251,0.34); --glow:rgba(87,122,251,0.42);
|
||
--strip-bg:linear-gradient(180deg,#e9eefe 0,#fff 100%);
|
||
}
|
||
html[data-theme="blue"].side-deep{--side-bg:#425dbf}
|
||
html[data-theme="blue"].side-deep.grad-on{--side-bg:linear-gradient(180deg,#5e7ffb 0%,#415bbb 100%)}
|
||
html[data-theme="blue"].side-light{--side-bg:#f3f6ff}
|
||
html[data-theme="blue"].side-light.grad-on{--side-bg:linear-gradient(180deg,#e9eefe 0%,#f0f3fa 100%)}
|
||
html[data-theme="blue"].grad-off{--topbar-bg:#577afb}
|
||
|
||
/* ocean · brand #2f7ce0 */
|
||
html[data-theme="ocean"]{
|
||
--brand:#2f7ce0; --brand-2:#4a9bf5; --brand-dark:#2568c4;
|
||
--brand-soft:#eaf3fe; --brand-a:rgba(47,124,224,0.34); --glow:rgba(47,124,224,0.42);
|
||
--strip-bg:linear-gradient(180deg,#e4eefb 0,#fff 100%);
|
||
}
|
||
html[data-theme="ocean"].side-deep{--side-bg:#255fab}
|
||
html[data-theme="ocean"].side-deep.grad-on{--side-bg:linear-gradient(180deg,#3781e1 0%,#255da8 100%)}
|
||
html[data-theme="ocean"].side-light{--side-bg:#f0f6fd}
|
||
html[data-theme="ocean"].side-light.grad-on{--side-bg:linear-gradient(180deg,#e4eefb 0%,#eff3f9 100%)}
|
||
html[data-theme="ocean"].grad-off{--topbar-bg:#2f7ce0}
|
||
|
||
/* ink · brand #3d4d63 */
|
||
html[data-theme="ink"]{
|
||
--brand:#3d4d63; --brand-2:#6d82a1; --brand-dark:#2e3c4f;
|
||
--brand-soft:#eef1f6; --brand-a:rgba(61,77,99,0.34); --glow:rgba(61,77,99,0.5);
|
||
--strip-bg:linear-gradient(180deg,#e6e8eb 0,#fff 100%);
|
||
}
|
||
html[data-theme="ink"].side-deep{--side-bg:#303d51}
|
||
html[data-theme="ink"].side-deep.grad-on{--side-bg:linear-gradient(180deg,#455469 0%,#2f3c50 100%)}
|
||
html[data-theme="ink"].side-light{--side-bg:#f1f3f4}
|
||
html[data-theme="ink"].side-light.grad-on{--side-bg:linear-gradient(180deg,#e6e8eb 0%,#eff2f5 100%)}
|
||
html[data-theme="ink"].grad-off{--topbar-bg:#3d4d63}
|
||
|
||
/* violet · brand #6d5ae0 */
|
||
html[data-theme="violet"]{
|
||
--brand:#6d5ae0; --brand-2:#8f7cf2; --brand-dark:#5a48c9;
|
||
--brand-soft:#f1effe; --brand-a:rgba(109,90,224,0.34); --glow:rgba(109,90,224,0.42);
|
||
--strip-bg:linear-gradient(180deg,#eceafb 0,#fff 100%);
|
||
}
|
||
html[data-theme="violet"].side-deep{--side-bg:#5246ab}
|
||
html[data-theme="violet"].side-deep.grad-on{--side-bg:linear-gradient(180deg,#7361e1 0%,#5045a8 100%)}
|
||
html[data-theme="violet"].side-light{--side-bg:#f5f3fd}
|
||
html[data-theme="violet"].side-light.grad-on{--side-bg:linear-gradient(180deg,#eceafb 0%,#f1f2f9 100%)}
|
||
html[data-theme="violet"].grad-off{--topbar-bg:#6d5ae0}
|
||
|
||
/* teal · brand #0d9488 */
|
||
html[data-theme="teal"]{
|
||
--brand:#0d9488; --brand-2:#18b5a5; --brand-dark:#0b7c72;
|
||
--brand-soft:#e8f7f5; --brand-a:rgba(13,148,136,0.36); --glow:rgba(13,148,136,0.42);
|
||
--strip-bg:linear-gradient(180deg,#e0f1f0 0,#fff 100%);
|
||
}
|
||
html[data-theme="teal"].side-deep{--side-bg:#0d706c}
|
||
html[data-theme="teal"].side-deep.grad-on{--side-bg:linear-gradient(180deg,#17988d 0%,#0d6e6a 100%)}
|
||
html[data-theme="teal"].side-light{--side-bg:#eef8f7}
|
||
html[data-theme="teal"].side-light.grad-on{--side-bg:linear-gradient(180deg,#e0f1f0 0%,#eef4f7 100%)}
|
||
html[data-theme="teal"].grad-off{--topbar-bg:#0d9488}
|
||
|
||
/* ---- 深浅档非底色 token（与品牌色联动的用 var 派生；浅色档 line/hover/active 用默认档实测值，
|
||
主题间差异肉眼不可辨，保持单档以压复杂度——同定稿 side-light 组） ---- */
|
||
html.side-light{
|
||
--side-text:#4a5568; --side-icon:#98a2b3;
|
||
--side-line:#ccd6f2;
|
||
--side-hover:#e3e8f8; --side-hover-text:#1e2635;
|
||
--side-active-bg:#e6ebfe; --side-active-text:var(--brand-dark);
|
||
--side-bar:var(--brand); --side-scroll:#d3d9e3;
|
||
}
|
||
html.grad-off{--topbar-bg:var(--brand)}
|
||
|
||
/* ---- 侧栏与品牌色解耦（side-follow 关） ---- */
|
||
html.side-plain.side-deep{
|
||
--side-bg:#2c3444; --side-text:#c2cbd9; --side-icon:#909dae;
|
||
--side-line:rgba(255,255,255,.08);
|
||
--side-hover:rgba(255,255,255,.08); --side-hover-text:#fff;
|
||
--side-active-bg:rgba(255,255,255,.16); --side-active-text:#fff;
|
||
--side-bar:#fff; --side-scroll:rgba(255,255,255,.18);
|
||
}
|
||
html.side-plain.side-light{
|
||
--side-bg:#f7f8fa; --side-text:#4a5568; --side-icon:#98a2b3;
|
||
--side-line:#e6eaf0; --side-hover:#eff1f5;
|
||
--side-active-bg:#eceef3; --side-active-text:#2f3a4c;
|
||
--side-bar:#8b95a8; --side-scroll:#d3d9e3;
|
||
}
|
||
html.side-plain.grad-on.side-deep{--side-bg:linear-gradient(180deg,#333c4d 0%,#272e3c 100%)}
|
||
html.side-plain.grad-on.side-light{--side-bg:linear-gradient(180deg,#fafbfc 0%,#f2f4f7 100%)}
|
||
html.side-plain{--strip-bg:linear-gradient(180deg,#f2f4f8 0,#fff 100%)}
|
||
|
||
/* ---- 顶栏：.header-container ---- */
|
||
.layout-wrap .header-container{background:var(--topbar-bg);box-shadow:0 1px 3px rgba(16,24,40,.14);transition:background .28s}
|
||
.layout-wrap .header-container h4{font-weight:600;letter-spacing:.4px}
|
||
.layout-wrap .header-container .delimiter{background:rgba(255,255,255,.28)}
|
||
/* 顶栏 logo 徽标（模板新增节点） */
|
||
.logo-badge{width:30px;height:30px;flex:0 0 auto;border-radius:9px;background:#fff;display:grid;place-items:center;box-shadow:0 2px 7px rgba(0,0,0,.16);margin-right:10px}
|
||
.logo-badge svg,.logo-badge img{width:22px;height:22px;display:block}
|
||
/* 用户胶囊 */
|
||
.layout-wrap .header-aside{padding:0 8px 0 5px;height:36px;border-radius:999px;transition:background .16s}
|
||
.layout-wrap .header-aside:hover{background:rgba(255,255,255,.16)}
|
||
|
||
/* ---- 侧栏：.left-menu（皮肤覆盖 layout.css 浅色档；深浅由 --side-* 驱动） ---- */
|
||
.layout-wrap .left-menu{background:var(--side-bg);border-right:1px solid var(--side-line);color:var(--side-text);transition:background .28s}
|
||
.layout-wrap .left-menu::-webkit-scrollbar{width:8px}
|
||
.layout-wrap .left-menu::-webkit-scrollbar-thumb{background:var(--side-scroll);border-radius:8px}
|
||
.layout-wrap .left-menu ul{padding:8px 0 18px}
|
||
.layout-wrap .left-menu li{margin:1px 8px;border-radius:var(--r-s);transition:background .15s,color .15s}
|
||
.layout-wrap .left-menu li a{
|
||
display:block;height:40px;line-height:40px;padding:0 12px;border-radius:var(--r-s);
|
||
color:var(--side-text);font-size:13px;border-right:none;transition:background .15s,color .15s;position:relative;
|
||
}
|
||
.layout-wrap .left-menu li a:hover{background:var(--side-hover);color:var(--side-hover-text)}
|
||
.layout-wrap .left-menu li a:hover .iconfont,.layout-wrap .left-menu li:hover .iconfont{color:var(--side-hover-text)}
|
||
.layout-wrap .left-menu li.active{background:var(--side-active-bg);border-right:0}
|
||
.layout-wrap .left-menu li.active a{color:var(--side-active-text);font-weight:600;background:transparent;border-right:none}
|
||
.layout-wrap .left-menu li.active a .iconfont{color:var(--side-active-text)}
|
||
.layout-wrap .left-menu li.active::before{
|
||
content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
|
||
width:3px;height:20px;border-radius:0 3px 3px 0;background:var(--side-bar);
|
||
}
|
||
.layout-wrap .left-menu li.child-item{margin:0 8px}
|
||
.layout-wrap .left-menu li.child-item a{height:36px;line-height:36px;font-size:12.5px}
|
||
.layout-wrap .left-menu li.child-item.active::before{height:16px}
|
||
/* 菜单图标 mask 类（icons.css 用 background-color 上色，这里给品牌感近色） */
|
||
.layout-wrap .left-menu .iconfont{margin-right:8px}
|
||
.layout-wrap .left-menu .arrow-up,.layout-wrap .left-menu .arrow-down{border-color:var(--side-icon)}
|
||
|
||
/* ---- 面包屑：.path-nav → 浅色接缝条（方案 §7.3 融合站点身份带） ---- */
|
||
.layout-wrap .path-nav{
|
||
height:var(--crumb-h);background:var(--strip-bg);border-bottom:1px solid var(--line);
|
||
color:var(--text-3);box-sizing:border-box;
|
||
}
|
||
.layout-wrap .path-nav .ivu-breadcrumb-item-link{color:var(--text-2)}
|
||
.layout-wrap .path-nav .ivu-breadcrumb>span:last-child .ivu-breadcrumb-item-link,.layout-wrap .path-nav .ivu-breadcrumb>span:last-child{color:var(--text);font-weight:600}
|
||
.layout-wrap .path-nav .ivu-breadcrumb a:hover{color:var(--brand)}
|
||
.layout-wrap .path-nav .crumb-home{color:var(--brand)}
|
||
.layout-wrap .path-nav .ivu-breadcrumb-item-separator{color:#ccd4e0}
|
||
/* 定稿：不再画独立 3px 横杠——顶部 3px 由接缝条承接顶栏渐变。
|
||
v3：站点身份已由页头「学校名.站点名」承担，原先 band-sub 让位身份橙的覆盖已删，
|
||
否则子站态上面包屑顶部常驻一条橙色横杠，与页头身份重复，且被误读成边框。 */
|
||
.layout-wrap .path-nav::before{
|
||
content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--topbar-bg);z-index:1;
|
||
}
|
||
.layout-wrap .path-nav::after{display:none}
|
||
|
||
/* ---- 内容区：灰底 + 白卡 ---- */
|
||
.base-wrap-main{background:var(--page-bg)}
|
||
.base-wrap-main .main-container{
|
||
background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
|
||
box-shadow:var(--sh);margin:0 18px 24px;padding:16px 20px 24px;box-sizing:border-box;
|
||
}
|
||
/* 栏目工作台左树卡 */
|
||
.base-wrap-main .tree-container{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)}
|
||
|
||
/* ---- 搜索区分区化（卡片内 filterbar 语义） ---- */
|
||
.base-wrap-main .search-wrap{
|
||
background:#fbfcfe;border:1px solid var(--line-2);border-radius:var(--r-s);
|
||
padding:10px 12px;height:auto;min-height:52px;box-sizing:border-box;margin-bottom:12px;
|
||
}
|
||
|
||
/* ---- 表格/操作列皮肤（三蓝归一 #5979EA/#2d8cf0 → var(--brand)） ---- */
|
||
.ivu-table-header th,.ivu-table-fixed-header th{background:#f7f9fc !important;color:var(--text-2)}
|
||
.ivu-table td{border-bottom:1px solid var(--line-2)}
|
||
.ivu-table-body tr:hover td,.ivu-table tbody tr:hover td{background:var(--brand-soft) !important}
|
||
.base-wrap-main .ivu-table .operating-link{color:var(--brand)}
|
||
.base-wrap-main .ivu-table .operating-link.disabled{color:#aaa}
|
||
.ivu-table-cell .operating-btn:hover{background:var(--brand);color:#fff}
|
||
|
||
/* ---- view-ui-plus 品牌态 ---- */
|
||
.ivu-btn-primary{background-color:var(--brand);border-color:var(--brand)}
|
||
.ivu-btn-primary:hover,.ivu-btn-primary.active{background-color:var(--brand-dark);border-color:var(--brand-dark)}
|
||
.ivu-btn-success{background-color:var(--green);border-color:var(--green)}
|
||
.ivu-btn-success:hover,.ivu-btn-success.active{background-color:var(--green-d);border-color:var(--green-d)}
|
||
.ivu-btn-error{background-color:var(--red);border-color:var(--red)}
|
||
.ivu-btn-error:hover,.ivu-btn-error.active{background-color:#c93f36;border-color:#c93f36}
|
||
.ivu-btn-text{color:var(--brand)}
|
||
.ivu-btn-text:hover{color:var(--brand-dark)}
|
||
.ivu-tabs-ink-bar{background-color:var(--brand)}
|
||
.ivu-tabs-tab:hover,.ivu-tabs-tab-active{color:var(--brand)}
|
||
.base-wrap-main .ivu-page-item-active{background:var(--brand);border-color:var(--brand)}
|
||
.base-wrap-main .ivu-page-item-active a,.base-wrap-main .ivu-page-item-active a:hover{color:#fff !important}
|
||
.base-wrap-main .ivu-page-item:hover{border-color:var(--brand)}
|
||
.base-wrap-main .ivu-page-item:hover a,.base-wrap-main .ivu-page-item:hover i{color:var(--brand)}
|
||
.base-wrap-main .ivu-page-prev:hover i,.base-wrap-main .ivu-page-next:hover i{border-color:var(--brand);color:var(--brand)}
|
||
.ivu-select-item-selected{color:var(--brand)}
|
||
.ivu-select-item-selected:hover{background:var(--brand-soft)}
|
||
.ivu-checkbox-checked .ivu-checkbox-inner{border-color:var(--brand);background-color:var(--brand)}
|
||
.ivu-radio-checked .ivu-radio-inner{border-color:var(--brand);background-color:var(--brand)}
|
||
.ivu-checkbox-wrapper:hover .ivu-checkbox-inner,.ivu-radio-wrapper:hover .ivu-radio-inner{border-color:var(--brand)}
|
||
.ivu-input:focus,.ivu-input-focused,.ivu-select-visible .ivu-select-selection{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-a)}
|
||
.ivu-input:hover,.ivu-select-selection:hover{border-color:#c6d0e2}
|
||
.ivu-switch-checked{border-color:var(--brand);background-color:var(--brand)}
|
||
.ivu-tree-title:hover{background-color:var(--brand-soft)}
|
||
.ivu-tree-title-selected,a.ivu-tree-title-selected:hover{background-color:var(--brand-soft);color:var(--brand)}
|
||
.ivu-spin-dot{background-color:var(--brand)}
|
||
.ivu-modal-header-inner{font-weight:600;color:var(--text)}
|
||
a{color:var(--brand)}
|
||
a:hover{color:var(--brand-dark)}
|
||
|
||
/* ---- 滚动条（定稿全局） ---- */
|
||
::-webkit-scrollbar{width:8px;height:8px}
|
||
::-webkit-scrollbar-thumb{background:#c9d0dd;border-radius:8px}
|
||
::-webkit-scrollbar-thumb:hover{background:#aeb8c9}
|
||
::-webkit-scrollbar-track{background:transparent}
|
||
|
||
/* ---- 工作台/主题管理全屏页深色顶栏吃主题变量（方案 §7.3） ---- */
|
||
.wb-header{background:var(--topbar-bg) !important}
|