/* ============================================================================ 西南大学大型仪器共享平台 · 全站通用样式 依据《基理设计规范 v2.1》Token 化：颜色 / 字号 / 间距 / 圆角 / 阴影 一律引用 genee-tokens.css 变量，禁止硬编码。 需与 配合使用（西南大学官网风格：校徽蓝 + 金色点缀）。 ============================================================================ */ /* ===== 基础重置 ===== */ *{margin:0;padding:0;box-sizing:border-box;} body{ font-family:var(--font-sans); font-size:var(--text-sm); line-height:var(--lh-text); color:var(--text-1); background:var(--bg-card); } a{text-decoration:none;color:inherit;} ul{list-style:none;} img{display:block;max-width:100%;} .container{width:1200px;max-width:94%;margin:0 auto;} /* ===== 顶部通栏 ===== */ .topbar{ background:var(--brand-900); color:rgba(255,255,255,.72); font-size:var(--text-xs); height:var(--sp-8); line-height:var(--sp-8); } .topbar .container{display:flex;justify-content:space-between;} /* ===== 导航 ===== */ header{ position:sticky;top:0;z-index:100; background:var(--brand-800); box-shadow:var(--sh-2); } .nav-wrap{display:flex;align-items:center;height:var(--sp-16);gap:var(--sp-6);} .logo{display:flex;align-items:center;} .logo img{height:var(--sp-12);width:auto;} nav.main{flex:1;display:flex;justify-content:center;gap:var(--sp-1);} nav.main a{ display:block;padding:var(--sp-2) var(--sp-4); color:rgba(255,255,255,.92); font-size:var(--text-sm); border-radius:var(--r-sm); transition:.25s;cursor:pointer; } nav.main a:hover,nav.main a.active{background:rgba(255,255,255,.14);color:var(--brand-accent-light);} /* ===== 面包屑 ===== */ .crumb{ background:var(--bg-card); border-bottom:1px solid var(--line-1); font-size:var(--text-xs);color:var(--text-2); } .crumb .container{padding:var(--sp-3) 0;} .crumb a{color:var(--text-2);} .crumb a:hover{color:var(--brand-text);} .crumb .sep{margin:0 var(--sp-2);color:var(--gray-5);} .crumb .cur{color:var(--brand-text);} /* ===== 页脚 ===== */ footer{background:var(--brand-900);color:rgba(255,255,255,.65);} .foot-main{text-align:center;padding:var(--sp-10) 0 var(--sp-6);} .foot-main img{height:var(--sp-12);margin:0 auto var(--sp-4);} .foot-links{ display:flex;justify-content:center;flex-wrap:wrap; gap:var(--sp-2) var(--sp-8); font-size:var(--text-xs);margin-bottom:var(--sp-4); } .foot-links a{cursor:pointer;transition:.2s;} .foot-links a:hover{color:var(--brand-accent-light);} /* 页脚「常用链接」标签（老前台一致：金色强调） */ .foot-links .fl-label{color:var(--brand-accent-light);font-weight:500;} .foot-bottom a{color:inherit;text-decoration:underline;text-underline-offset:2px;transition:.2s;} .foot-bottom a:hover{color:var(--brand-accent-light);} .foot-bottom{ border-top:1px solid rgba(255,255,255,.12); padding:var(--sp-4) 0;text-align:center; font-size:var(--text-xs);color:rgba(255,255,255,.45); } /* ===== 按钮（主按钮一屏仅一个高权重，其余次级 / 描边） ===== */ .btn{font-family:inherit;font-size:var(--text-sm);} .btn-primary{ background:var(--brand-solid);color:#fff;font-weight:500; border:none;border-radius:var(--r-md);cursor:pointer;transition:.2s; } .btn-primary:hover{background:var(--brand-hover);} .btn-primary:active{background:var(--brand-active);} .btn-plain{ background:var(--bg-card);border:1px solid var(--line-2); color:var(--text-2);border-radius:var(--r-md);cursor:pointer;transition:.2s; } .btn-plain:hover{background:var(--gray-3);} .btn-plain:active{background:var(--gray-4);} .btn-block{display:block;width:100%;padding:var(--sp-3) 0;} .btn-md{padding:var(--sp-2) var(--sp-6);} /* ===== 表单 ===== */ .form-row{margin-bottom:var(--sp-4);} .form-row label{ display:block;font-size:var(--text-sm);font-weight:500; color:var(--text-1);margin-bottom:var(--sp-2); } .form-row input,.form-row select,.form-row textarea{ width:100%;border:1px solid var(--line-2);border-radius:var(--r-md); padding:var(--sp-2) var(--sp-3);font-size:var(--text-sm); outline:none;font-family:inherit;color:var(--text-1);background:var(--bg-card); } .form-row input:focus,.form-row select:focus,.form-row textarea:focus{ border-color:var(--brand-figure); box-shadow:0 0 0 2px var(--brand-100); } /* ===== 搜索框（首页 Banner / 搜索页 Hero 共用） ===== */ .search-box{ display:flex;background:var(--bg-card);border-radius:var(--r-full); overflow:hidden;margin:0 auto;box-shadow:var(--sh-3); } .search-box input{ flex:1;border:none;outline:none; padding:0 var(--sp-6);font-size:var(--text-sm); height:var(--sp-12);color:var(--text-1); } .search-box button{ width:128px;background:var(--brand-solid);border:none;color:#fff; font-size:var(--text-base);font-weight:500;cursor:pointer;transition:.2s; } .search-box button:hover{background:var(--brand-hover);} .search-box button:active{background:var(--brand-active);} /* ===== 新闻列表 ===== */ .n-list li{ display:flex;align-items:center;gap:var(--sp-3); padding:var(--sp-3) var(--sp-1); border-bottom:1px dashed var(--line-1); cursor:pointer;transition:.2s; } .n-list li:last-child{border-bottom:none;} .n-list li:hover .t{color:var(--brand-text);} .n-list .t{ flex:1;font-size:var(--text-sm); white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:.2s; } .n-list .t::before{ content:"";display:inline-block;width:6px;height:6px;border-radius:50%; background:var(--brand-accent);margin-right:var(--sp-2);vertical-align:2px; } .n-list .d{font-size:var(--text-xs);color:var(--text-2);flex-shrink:0;} /* ===== 仪器卡片 ===== */ .ins-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-6);} .ins-card{ background:var(--bg-card);border-radius:var(--r-lg);overflow:hidden; cursor:pointer;transition:.3s;border:1px solid var(--line-1); } .ins-card:hover{transform:translateY(-4px);box-shadow:var(--sh-3);border-color:var(--line-2);} .ins-card .pic{height:184px;overflow:hidden;position:relative;background:var(--gray-3);} .ins-card .pic img{width:100%;height:100%;object-fit:cover;transition:.5s;} .ins-card:hover .pic img{transform:scale(1.06);} .ins-card .info{padding:var(--sp-3) var(--sp-4) var(--sp-4);} .ins-card .info h4{ font-size:var(--text-sm);font-weight:500;color:var(--text-1); line-height:var(--lh-text);height:44px;overflow:hidden; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;transition:.2s; } .ins-card:hover .info h4{color:var(--brand-text);} .ins-card .meta{ display:flex;justify-content:space-between; font-size:var(--text-xs);color:var(--text-2); margin-top:var(--sp-2);padding-top:var(--sp-2); border-top:1px dashed var(--line-1); } /* 卡片信息行（负责人 / 放置地点，参考老前台样式） */ .ins-card .row{ display:flex;align-items:center;gap:var(--sp-2); font-size:var(--text-xs);color:var(--text-2);margin-top:var(--sp-2); white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .ins-card .row .lucide{width:14px;height:14px;flex-shrink:0;color:var(--text-3);} /* 卡片状态徽章（图片左上角，参考老前台样式） */ .ins-card .pic .badge{ position:absolute;left:0;top:0;z-index:2; padding:var(--sp-1) var(--sp-3);font-size:var(--text-xs); border-bottom-right-radius:var(--r-md); } .badge.st-free{background:var(--color-success-bg);color:var(--color-success-text);} .badge.st-busy{background:var(--color-warning-bg);color:var(--color-warning-text);} .badge.st-maint{background:var(--gray-3);color:var(--text-2);} /* Lucide 图标默认尺寸（emoji 替换后统一视觉大小） */ .cir .lucide,.ico .lucide,.status-center .lucide{width:1em;height:1em;} /* ===== 结果统计 ===== */ .result-count{font-size:var(--text-xs);color:var(--text-2);} .result-count b{ color:var(--brand-text);font-size:var(--text-base);margin:0 var(--sp-1); font-family:var(--font-mono);font-variant-numeric:tabular-nums; } /* ===== 空状态（图示 + 说明 + 下一步引导） ===== */ .empty-tip{display:none;padding:var(--sp-16) 0;text-align:center;} .empty-state{display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);} .empty-state svg{width:96px;height:96px;color:var(--gray-5);} .empty-state .et-title{font-size:var(--text-base);font-weight:500;color:var(--text-1);} .empty-state .et-desc{font-size:var(--text-sm);color:var(--text-2);} .empty-state .et-btn{margin-top:var(--sp-2);padding:var(--sp-2) var(--sp-6);} /* ===== 分页 ===== */ .pager{display:flex;justify-content:center;gap:var(--sp-2);margin:var(--sp-8) 0 var(--sp-2);} .pager span{ min-width:40px;height:40px;line-height:40px;padding:0 var(--sp-2); text-align:center;border:1px solid var(--line-2);border-radius:var(--r-md); font-size:var(--text-sm);color:var(--text-2);background:var(--bg-card); cursor:pointer;transition:.2s; } .pager span:hover{border-color:var(--brand-figure);color:var(--brand-text);} .pager span.cur{background:var(--brand-solid);color:#fff;border-color:var(--brand-solid);} .pager span.arr{color:var(--brand-text);} /* ===== 分段按钮组 ===== */ .seg{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center;} .seg .seg-label{font-size:var(--text-sm);color:var(--text-2);margin-right:var(--sp-1);min-width:64px;} .seg-btn{ padding:var(--sp-2) var(--sp-4);border-radius:var(--r-md); background:var(--gray-2);color:var(--text-2); font-size:var(--text-sm);border:1px solid transparent; cursor:pointer;transition:.2s; } .seg-btn:hover{background:var(--gray-3);} .seg-btn.active{background:var(--brand-solid);color:#fff;} /* ===== 弹窗 ===== */ .modal-mask{ position:fixed;inset:0;background:rgba(0,0,0,.5); z-index:var(--z-modal);display:none; align-items:center;justify-content:center; } .modal-mask.show{display:flex;} .modal{ background:var(--bg-card);border-radius:var(--r-xl); width:640px;max-width:92%;max-height:86vh;overflow:auto; animation:pop .3s ease; } .modal.modal-sm{width:420px;} .modal.modal-md{width:460px;} @keyframes pop{from{opacity:0;transform:scale(.92);}to{opacity:1;transform:none;}} .modal-head{ background:var(--brand-800);color:#fff; padding:var(--sp-4) var(--sp-6); display:flex;justify-content:space-between;align-items:center; border-radius:var(--r-xl) var(--r-xl) 0 0; } .modal-head h3{font-size:var(--text-base);font-weight:500;} .modal-close{cursor:pointer;font-size:var(--text-xl);line-height:1;color:rgba(255,255,255,.8);display:inline-flex;align-items:center;justify-content:center;} .modal-close svg{width:18px;height:18px;} .modal-close:hover{color:var(--brand-accent-light);} .modal-body{padding:var(--sp-6);} .detail-flex{display:flex;gap:var(--sp-5);} .detail-flex img{width:240px;height:180px;object-fit:cover;border-radius:var(--r-md);flex-shrink:0;} .detail-info{flex:1;font-size:var(--text-sm);line-height:1.8;} .detail-info b{color:var(--brand-text);font-weight:500;} .detail-info .price{color:var(--color-error-text);font-weight:600;} .detail-actions{margin-top:var(--sp-5);display:flex;gap:var(--sp-3);justify-content:flex-end;} .form-hint{font-size:var(--text-xs);color:var(--text-2);text-align:center;margin-top:var(--sp-3);} /* ===== 登录 Tab（弹窗内） ===== */ .login-tabs{display:flex;gap:var(--sp-2);margin-bottom:var(--sp-5);} .login-tabs span{ flex:1;text-align:center;padding:var(--sp-3) 0;border-radius:var(--r-md); font-size:var(--text-sm);cursor:pointer; background:var(--gray-2);color:var(--text-2);transition:.25s; } .login-tabs span.active{background:var(--brand-solid);color:#fff;font-weight:500;} /* ===== Toast ===== */ .toast{ position:fixed;top:50%;left:50%;transform:translate(-50%,-50%); background:var(--brand-900);color:#fff; padding:var(--sp-3) var(--sp-8);border-radius:var(--r-md); z-index:401;font-size:var(--text-sm);display:none; } .toast.show{display:block;animation:pop .25s ease;} /* ===== 回到顶部 ===== */ #backTop{ position:fixed;right:var(--sp-6);bottom:var(--sp-8); width:var(--sp-12);height:var(--sp-12);border-radius:50%; color:#fff;border:none;cursor:pointer;font-size:var(--text-base);display:inline-flex;align-items:center;justify-content:center; background:var(--brand-solid); opacity:0;pointer-events:none;transition:.3s; box-shadow:var(--sh-2);z-index:90; } #backTop.show{opacity:1;pointer-events:auto;} #backTop svg{width:16px;height:16px;} #backTop:hover{background:var(--brand-hover);} #backTop:active{background:var(--brand-active);} /* ===== 滚动显现 ===== */ .reveal{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .7s ease;} .reveal.on{opacity:1;transform:none;} /* ===== 响应式 ===== */ @media (max-width:960px){ .nav-wrap{height:auto;padding:var(--sp-2) 0;flex-wrap:wrap;} nav.main{flex-wrap:wrap;justify-content:flex-start;} .ins-grid{grid-template-columns:1fr 1fr;} .detail-flex{flex-direction:column;} } @media (max-width:640px){ .ins-grid{grid-template-columns:1fr;} } .badge.st-sample{background:var(--color-success-bg);color:var(--color-success-text);}