html, body { height: 100%; }
body { /* font:14px/1.5 microsoft yahei; */ color: #555; background: #f5f7fa; margin: 0; box-sizing: border-box; -webkit-box-sizing: border-box; }
a { color: #444; transition: all 0.3s ease; }
a:hover, a:focus { text-decoration: none }
h1, h2, h3, h4 { color: #333; margin: 0 }
p, ul, li { margin: 0; padding: 0 }
ipnut, button { border: none; font-family: microsoft yahei }
label { font-weight: normal }
/* 滚动条美化 */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; }
::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 4px; transition: all 0.3s ease; }
::-webkit-scrollbar-thumb:hover { background: #a8a8a8; }
/* 常用颜色变量 */
:root { --color-primary: #0066cc; --color-primary-dark: #0052a3; --color-primary-light: #0077e6; --color-success: #28a745; --color-warning: #fd7e14; --color-danger: #dc3545; --color-info: #17a2b8; --color-purple: #6f42c1; --color-gray: #6c757d; --color-white: #ffffff; --color-light: #f8f9fa; --color-border: #e0e0e0; --color-text: #555; --color-heading: #333; --gradient-primary: linear-gradient(135deg, #0066cc 0%, #0052a3 100%); --gradient-success: linear-gradient(135deg, #28a745 0%, #218838 100%); --gradient-warning: linear-gradient(135deg, #fd7e14 0%, #e67e22 100%); --gradient-danger: linear-gradient(135deg, #dc3545 0%, #c82333 100%); --gradient-purple: linear-gradient(135deg, #6f42c1 0%, #5a32a3 100%); --gradient-info: linear-gradient(135deg, #17a2b8 0%, #138496 100%); --gradient-gray: linear-gradient(135deg, #6c757d 0%, #5a6268 100%); --gradient-light: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); }
/*====header 开始============================================================*/
header { /* background:linear-gradient(135deg, #0066cc 0%, #004d99 100%);*/ background: url(images/header-bg.png) #0066cc; background-size: cover; padding: 18px 0; color: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.1); position: relative; z-index: 100; }
header h5 { font-weight: bold; }
header .btn { margin: 0 4px; }
/* 两侧 */
.header-flex-between { color: #fff; display: flex; flex-direction: row; justify-content: space-between; position: sticky; top: 0; }
.header-logo { display: flex; align-items: center; transition: all 0.3s ease; }
.header-logo:hover { transform: translateX(5px); }
.header-logo img { width: 55px; margin-right: 12px; border-radius: 8px; /* box-shadow: 0 2px 8px rgba(0,0,0,0.2);*/ }
.header-logo div .sys-name { font-size: 30px; font-weight: bold; color: #fff; text-shadow: 0px 2px 4px rgba(0,0,0,0.2); letter-spacing: 1px; }
.header-logo p { font-size: .7rem; font-weight: normal; margin: -5px 0 0; color: #e8f4ff; opacity: 0.9; }
.header-left,
.header-right { display: flex; align-items: center; }
.header-right .item { flex: auto; color: #fff; padding: 0 8px; }
.header-right .item a { color: #fff; transition: all 0.3s ease; }
.header-right .item a:hover { font-weight: bold; text-decoration: none; color: #fff; text-shadow: 0 0 8px rgba(255,255,255,0.5); }
.header-right .item a i { transition: all 0.3s ease; }
.header-right .item a:hover i { transform: rotate(90deg); }
/*====header 结束============================================================*/
/*====nav 开始============================================================*/
nav { background: #fff !important; box-shadow: 0 2px 12px rgba(0,0,0,0.08); height: 56px; line-height: 56px; border-bottom: 3px solid transparent; background-image: linear-gradient(#fff, #fff), linear-gradient(#0066cc, #0066cc); background-origin: border-box; background-clip: content-box, border-box; }
nav .nav-menu { display: flex; align-items: center; }
nav .nav-menu > li { position: relative; transition: all 0.3s ease; z-index: 100; }
nav .nav-menu > li:hover { background-color: rgba(0, 102, 204, 0.06); transform: translateY(-1px); }
nav .nav-menu > li.active { background-color: rgba(0, 102, 204, 0.08); }
nav .nav-menu > li::after { content: ""; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 1px; height: 20px; background: linear-gradient(180deg, transparent, #e0e0e0, transparent); }
nav .nav-menu > li:last-child::after { content: ""; }
nav .nav-menu > li.active > a { font-size: 1rem; font-weight: 600; color: #0066cc; position: relative; padding: 0 20px; border-bottom: 3px solid #0066cc; }
nav .nav-menu > li.active > a::before { content: ''; position: absolute; bottom: -3px; left: 50%; transform: translateX(-50%); width: 30px; height: 3px; background: linear-gradient(90deg, #0066cc, #0080ff); border-radius: 2px; box-shadow: 0 2px 8px rgba(0,102,204,0.4); animation: slideIn 0.3s ease; }
@keyframes slideIn {
from { width: 0; opacity: 0; }
to { width: 30px; opacity: 1; }
}
nav .nav-menu > li a { color: #555; font-weight: 500; padding: 0 20px; transition: all 0.3s ease; display: flex; align-items: center; height: 56px; }
nav .nav-menu > li a:hover { font-weight: bold; }
nav .nav-menu > li a i { height: initial; transition: all 0.3s ease; }
nav .nav-menu > li a i.fa-angle-down { margin-left: 6px; font-size: 0.85rem; }
nav .nav-menu > li:hover a i.fa-angle-down { transform: rotate(180deg); color: #0066cc; }
nav .nav-menu .dropdown-content { top: 56px !important; width: max-content !important; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.15); border: 1px solid #e8e8e8; padding: 8px 0; animation: dropdownFade 0.3s ease; }
@keyframes dropdownFade {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
nav .nav-menu .dropdown-content li { margin: 2px 0; }
nav .nav-menu .dropdown-content li > a { color: #555; text-align: left; font-size: 0.95rem; padding: 10px 24px; border-radius: 0px; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; }
nav .nav-menu .dropdown-content li > a:hover { background: linear-gradient(90deg, rgba(0, 102, 204, 0.08), rgba(0, 102, 204, 0.12)); color: #0066cc; padding-left: 28px; z-index: 100; }
/* nav .nav-menu .dropdown-content li>a:hover::before{content: '→';position: absolute;left: 12px;color: #0066cc;font-weight: bold;} */
/* tabs 二级菜单 */
.nav-sub-menu { display: flex; width: 100%; background-color: #fff; border-bottom: 1px solid #e0e0e0; box-shadow: 0 2px 4px rgba(0,0,0,0.03); }
.nav-sub-menu li { float: left; margin-bottom: -3px; position: relative; }
.nav-sub-menu li a { display: block; padding: 14px 32px; border-right: 1px solid #f0f0f0; border-top: 2px solid transparent; color: #666; font-weight: 500; transition: all 0.3s ease; position: relative; }
.nav-sub-menu li a:hover { color: #0066cc; background-color: rgba(0, 102, 204, 0.05); }
.nav-sub-menu li.active a { background-color: #fff; color: #0066cc; border-top-color: #0066cc; font-weight: 600; /* box-shadow: 0 -2px 8px rgba(0,0,0,0.05); */ }
/* .nav-sub-menu li.active a::after{content: '';position: absolute;bottom: -2px;left: 0;right: 0;height: 2px;background: linear-gradient(90deg, #0066cc, #0080ff);opacity: 0.3;} */
/*====nav 结束============================================================*/
/*====toolbar 开始============================================================*/
.toolbar { padding: 18px 0; /* border-bottom: 1px solid #e8e8e8;*/ }
/* 让工具栏置顶 */
.toolbar-fixed { position: sticky; top: 0; z-index: 9; transition: background-position 0.3s ease; }
/* 使用CSS变量和滚动驱动动画（现代浏览器支持） */
@media (prefers-reduced-motion: no-preference) {
.toolbar-fixed { /* 定义滚动驱动动画 */ animation: stickyBackground linear both; animation-timeline: scroll(); animation-range: 0px 100px; }
}
@keyframes stickyBackground {
from { background-color: transparent; box-shadow: none; }
to { background-color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
}
.toolbar .container { display: flex; flex-direction: row; justify-content: space-between; }
.toolar-left { display: flex; align-items: center; color: #666; font-size: 0.95rem; }
.toolar-left span { font-weight: 600; color: #0066cc; }
/* 列表页面，工具栏搜索框 */
.toolbar-search { text-align: center; padding: 12px 0 12px 0; background-color: #f8f9fa; border: 1px dashed #e0e0e0; border-radius: 10px; }
.toolbar-search .input-field > label { top: -4px; font-size: 0.9rem; color: #666; }
.toolbar-search .input-field > label.active { top: 4px; color: #0066cc; }
.toolbar-search .input-field > input[type=text] { font-size: 14px; height: 32px; margin-bottom: 0; border-bottom: 2px solid #e0e0e0; transition: all 0.3s ease; }
.toolbar-search .input-field > input[type=text]:focus { border-bottom-color: #0066cc; box-shadow: 0 1px 0 0 #0066cc; }
.toolbar-search .input-field.inline.select-date i { bottom: 8px; right: 8px; }
/*====toolbar 结束============================================================*/
/*====page 开始============================================================*/
.page { background-color: #fff; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.04); overflow: hidden; }
.page .text-hint { padding: 12px 16px 16px 16px; color: #666; border-bottom: 1px dashed #e0e0e0; background-color: #f8f9fa; font-style: italic; }
.page .text-hint span { display: inline-block; margin: 0 5px; font-weight: 600; color: var(--color-primary); }
/* 通用：信息显示布局 */
.info-title { border-bottom: 1px dashed #e0e0e0; background-color: #e7f3ff8a; font-size: 1.4rem; color: var(--color-primary); padding: 10px; margin-bottom: 24px; }
.info-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; }
.info-grid.col2 { grid-template-columns: repeat(2,1fr); }
.info-grid.col3 { grid-template-columns: repeat(3,1fr); }
.info-item-row { display: flex; padding-bottom: 1rem; border-bottom: 1px solid var(--color-border); }
.info-item-row .info-label { width: 120px; color: #b1b1b1; text-align: center; font-weight: 600; }
.info-item-row .info-value { flex: 1; color: #252525; font-size: 1rem; }
.info-item-column { display: flex; flex-direction: column; }
.info-item-column .info-label { display: block; font-weight: 500; color: #a7a7a7; font-size: 0.9rem; }
.info-item-column .info-value { font-size: 16px; color: #4d4d4d; }
/*====page 结束============================================================*/
/*====table 开始============================================================*/
table a { color: #039be5; transition: all 0.3s ease; }
table a:hover { font-weight: bold; text-decoration: none; color: #0066cc; }
table.default { border-collapse: separate; border-spacing: 0; /*overflow: hidden;*/ border: 1px solid #e8e8e8; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
table.default th,
table.default td { vertical-align: middle; border-radius: 0; padding: 8px 12px; height: 48px; }
table.default thead th { vertical-align: middle; padding: 14px 12px; border-bottom: 2px solid #0066cc; background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%); color: #333; font-weight: 600; white-space: nowrap; }
/* 四周圆角 */
table.default thead tr:first-child th:first-child { border-top-left-radius: 8px; }
table.default thead tr:first-child th:last-child { border-top-right-radius: 8px; }
table.default tbody tr:last-child td:first-child { border-bottom-left-radius: 8px; }
table.default tbody tr:last-child td:last-child { border-bottom-right-radius: 8px; }
table.default tbody tr { transition: all 0.2s ease; border-bottom: 1px solid #f0f0f0; }
table.default tbody tr:hover { background-color: rgba(0, 102, 204, 0.05) !important; transform: scale(1.005); }
table.default tbody tr:nth-of-type(odd) { background-color: #fafbfc; }
table.default tbody tr:last-child { border-bottom: 0px; }
/* 表格操作列 */
.td-action { white-space: nowrap; }
.td-action .btn { font-size: 0.85rem; }
.td-action .btn i { font-size: 0.85rem; margin-right: 4px; }
/* 头像列 */
.td-avatar { width: 60px; }
.td-avatar .img-circle { width: 40px; height: 40px; }
/*表格内的折叠按钮*/
.btn-circle-list ul { border-radius: 10px; border: 1px solid var(--color-primary); }
.btn-circle-list i.fa-bars { border-radius: 50%; background-color: #f8f9fa; box-shadow: 0 2px 6px rgba(0,0,0,0.1); }
.btn-circle-list:hover i.fa-bars { border-radius: 50% !important; background: var(--color-primary) !important; }
/*====table 结束============================================================*/
/*====button 开始============================================================*/
.btn { background: var(--gradient-primary); border-radius: 10px; overflow: hidden; text-decoration: none !important; margin: 2px 0; font-weight: 500; letter-spacing: 0.5px; box-shadow: 0 2px 6px rgba(0,102,204,0.3); transition: all 0.3s ease; display: inline-flex; gap: 6px;position:relative; }
.btn:before { content: ""; position: absolute; left: -100%; width: 100%; height: 100%; background: linear-gradient(to left, rgba(255,255,255,.2), #fff, rgba(255,255,255,.2)); opacity: .4; transition: .6s }
.btn:hover { background: linear-gradient(135deg, #0077e6 0%, #0066cc 100%); color: #fff; box-shadow: 0 4px 12px rgba(0, 102, 204, 0.4); transform: translateY(-2px); }
.btn:hover:before { left: 100% }
.btn:active { transform: translateY(0); box-shadow: 0 2px 4px rgba(0,102,204,0.3); }
.btn i { font-size: 0.95rem; }
.btn.mini { height: 32px; line-height: 32px; padding: 0 12px; font-size: 0.9rem; }
/*====button 结束============================================================*/
/*====form 表单元素 开始============================================================*/
.input-field input[type=text],
.input-field input[type=password],
.input-field input[type=email],
.input-field input[type=number],
.input-field input[type=tel],
.input-field input[type=url],
.input-field textarea { border-bottom: 2px solid #e0e0e0; transition: all 0.3s ease; font-size: 14px; }
.input-field input[type=text]:focus,
.input-field input[type=password]:focus,
.input-field input[type=email]:focus,
.input-field input[type=number]:focus,
.input-field input[type=tel]:focus,
.input-field input[type=url]:focus,
.input-field textarea:focus { border-bottom-color: #0066cc; box-shadow: 0 1px 0 0 #0066cc; }
.input-field label { color: #666; font-size: 0.9rem; transition: all 0.3s ease; }
.input-field label.active { color: #0066cc; font-size: 1rem; }
/*日期选择框美化*/
.input-field.select-date { position: relative; }
.input-field.select-date i { position: absolute; right: 16px; bottom: 16px; }
/* 下拉选择框美化 */
.select-wrapper input.select-dropdown { border-bottom: 2px solid #e0e0e0; margin-bottom: 8px; }
.select-wrapper input.select-dropdown:focus { border-bottom-color: #0066cc; }
.dropdown-content li > a, .dropdown-content li > span { color: #666; font-size: 14px; }
.dropdown-content li:hover, .dropdown-content li.active { background-color: rgba(0, 102, 204, 0.08); }
/* 复选框和单选框美化 */
[type="checkbox"]:checked + span:not(.lever):before { border-right: 2px solid #0066cc; border-bottom: 2px solid #0066cc; }
[type="checkbox"]:checked + span:not(.lever):after { border: 2px solid #0066cc; background-color: #0066cc; }
[type="checkbox"].filled-in:checked + span:not(.lever):after { border: 2px solid #0066cc; background-color: #0066cc; }
[type="radio"]:checked + span:after,
[type="radio"].with-gap:checked + span:after { background-color: #0066cc; border: 2px solid #0066cc; }
[type="radio"]:checked + span:after,
[type="radio"].with-gap:checked + span:after,
[type="radio"]:checked:focus + span:after,
[type="radio"].with-gap:checked:focus + span:after { background-color: #0066cc; }
/*====form 表单元素 结束============================================================*/
/*====pagination分页 开始 ============================================================*/
.pagination { display: flex; text-align: center; margin: 20px 0; align-items: center; justify-content: space-between; }
.pagination li { display: inline-block; border-radius: 4px; margin: 0 3px; }
.pagination li a { background-color: #fff; color: #666; font-size: 0.9rem; border: 1px solid #e0e0e0; border-radius: 4px; transition: all 0.3s ease; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.pagination li a:hover { background-color: var(--color-primary); color: #fff; border-color: var(--color-primary); font-weight: 500; box-shadow: 0 2px 8px rgba(0,102,204,0.3); transform: translateY(-1px); }
.pagination li.active a { background-color: var(--color-primary); color: #fff; border-color: var(--color-primary); font-weight: 600; box-shadow: 0 2px 8px rgba(0,102,204,0.3); }
.pagination li.disabled a { background-color: #f8f9fa; color: #bbbbbb; border-color: #e0e0e0; cursor: not-allowed; }
.pagination li.disabled a:hover { background-color: #f8f9fa; color: #bbbbbb; border-color: #e0e0e0; box-shadow: none; transform: none; }
/*====pagination分页 结束 ============================================================*/
/*====footer 开始============================================================*/
.footer { font-size: 13px; color: #888; text-align: center; padding: 30px 0; background-color: #fff; border-top: 1px solid #e8e8e8; margin-top: 20px; }
.footer a { color: var(--color-primary);; transition: all 0.3s ease; }
.footer a:hover { color: var(--color-primary);; text-decoration: underline; }
/*====footer 结束============================================================*/
/*====popuper 弹出页面标准布局 开始============================================================*/
.popuper { display: flex; flex-direction: column; height: 100vh; }
.popuper header, .popuper footer { flex: 0 0 auto; }
.popuper ul.info { background-color: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.05); padding: 12px 20px; text-align: center; }
.popuper ul.info li { display: inline-block; padding: 0 10px; border-right: 1px solid #ddd; }
.popuper ul.info li:last-child { border-right: none; }
.popuper .content { flex: 1 1 auto; }
.popuper footer { border-top: 1px solid #c9c9c9; text-align: center; padding: 8px 12px; }
/*====popuper 弹出页面标准布局 结束============================================================*/
/*====materialize 自定义样式 开始============================================================*/
/* 主要匹配颜色 */
.datepicker-date-display { background-color: #12569b; }
.datepicker-table td.is-selected { background-color: #12569b; }
/*====materialize 自定义样式 结束============================================================*/
/*====layer 自定义样式 开始============================================================*/
.layui-layer { border-radius: 10px !important; }
.layui-layer-title { border-top-left-radius: 10px !important; border-top-right-radius: 10px !important; }
.layui-layer-content { border-radius: 10px; overflow: hidden; }
.layui-layer-btn a, .layui-layer-btn button { border-radius: 5px !important; }
.layui-layer-iframe { overflow-y: initial !important; }
/*去掉“弹出页面”显示的滚动条(特别是 人员选择器)*/
.layui-layer-iframe iframe { border-radius: 8px !important; }
/*====layer 自定义样式 结束============================================================*/
/*====响应式优化 开始============================================================*/
@media(max-width:1200px) {
.container { width: 95%; max-width: 1200px; }
}
@media(max-width:992px) {
.header-logo .sys-name { font-size: 26px; }
.header-logo p { font-size: 0.65rem; }
.nav-menu > li a { font-size: 0.95rem; padding: 0 12px; }
.nav-sub-menu li a { padding: 12px 20px; }
}
@media(max-width:768px) {
header { padding: 14px 0; }
.header-logo img { width: 45px; margin-right: 8px; }
.header-logo .sys-name { font-size: 22px; }
.header-logo p { font-size: 0.6rem; }
.header-right .item { padding: 0 4px; font-size: 0.9rem; }
nav { height: auto; line-height: normal; }
nav .nav-menu { display: flex; flex-wrap: wrap; justify-content: center; }
nav .nav-menu > li { width: auto; margin: 2px 5px; }
nav .nav-menu > li::after { display: none; }
nav .nav-menu > li a { padding: 8px 12px; font-size: 0.9rem; }
.nav-sub-menu { overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
.nav-sub-menu li a { padding: 10px 16px; font-size: 0.9rem; }
.toolbar { padding: 12px 0; }
.toolbar .container { flex-direction: column; align-items: flex-start; }
.toolar-left { margin-bottom: 10px; font-size: 0.85rem; }
.toolar-right { width: 100%; display: flex; flex-wrap: wrap; gap: 8px; }
.toolbar-search { padding: 10px 0; }
.toolbar-search .input-field { width: 100%; margin-bottom: 10px; }
/* .page { padding: 16px; border-radius: 6px; }*/
.info-grid { grid-template-columns: repeat(1,1fr); }
.info-grid.col2 { grid-template-columns: repeat(1,1fr); }
.info-grid.col3 { grid-template-columns: repeat(1,1fr); }
table.default { font-size: 0.85rem; }
table.default th, table.default td { padding: 6px 8px; height: 40px; }
.btn { font-size: 0.9rem; }
.btn i { font-size: 0.85rem; }
.pagination li { margin: 0 2px; }
.pagination li a { padding: 6px 10px; font-size: 0.85rem; }
}
@media(max-width:576px) {
.header-flex-between { flex-direction: column; text-align: center; }
.header-logo { margin-bottom: 10px; }
.header-right { width: 100%; justify-content: center; margin-top: 8px; }
.header-logo .sys-name { font-size: 18px; }
.header-logo p { display: none; }
nav .nav-menu { flex-direction: column; }
nav .nav-menu > li { width: 100%; text-align: center; border-bottom: 1px solid #f0f0f0; }
nav .nav-menu > li::after { display: none; }
nav .nav-menu > li a { display: block; padding: 12px 0; }
.nav-sub-menu li a { padding: 10px 12px; font-size: 0.85rem; }
.toolbar-search .input-field { margin-bottom: 8px; }
.toolbar-search .input-field > input[type=text] { height: 28px; font-size: 13px; }
/* .page { padding: 12px; }*/
table.default { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.default thead, table.default tbody, table.default th, table.default td, table.default tr { display: block; }
table.default thead tr { position: absolute; top: -9999px; left: -9999px; }
table.default tr { border: 1px solid #e0e0e0; margin-bottom: 10px; border-radius: 6px; padding: 10px; }
table.default td { border: none; border-bottom: 1px solid #f0f0f0; position: relative; padding-left: 50%; height: auto; }
table.default td:before { position: absolute; top: 6px; left: 6px; width: 45%; padding-right: 10px; white-space: nowrap; font-weight: 600; color: #333; }
table.default tbody tr:hover { transform: none; }
.btn { font-size: 0.85rem; }
.btn i { font-size: 0.8rem; }
.pagination { margin: 15px 0; }
.pagination li { margin: 0 1px; }
.pagination li a { padding: 5px 8px; font-size: 0.8rem; }
.footer { font-size: 12px; padding: 20px 0; }
}
/*====响应式优化 结束============================================================*/