509 lines
15 KiB
CSS
509 lines
15 KiB
CSS
/**
|
|
* @file GErpSystem 银河锋锐ERP后台管理系统样式表
|
|
* @author GVSDS TermiNexus
|
|
* @version 4.3.1777
|
|
* @description 基于Layui框架开发的企业级ERP后台管理系统样式表
|
|
* @copyright GVSDS © 2026
|
|
* @license InternalUseOnlyLicense
|
|
* @charset utf-8
|
|
*/
|
|
|
|
@charset "utf-8";
|
|
|
|
:root {
|
|
--primary-color: #4361ee;
|
|
--secondary-color: #3f37c9;
|
|
--text-color: #2b2d42;
|
|
--light-text: #8d99ae;
|
|
--bg-color: #f8f9fa;
|
|
--card-bg: rgba(255, 255, 255, 0.85);
|
|
--border-radius: 12px;
|
|
--box-shadow: 0 8px 32px rgba(31, 38, 135, 0.14);
|
|
--nav-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
|
|
--transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
|
|
}
|
|
|
|
* { margin: 0px; padding: 0px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
|
|
@font-face { font-family: 'CZH'; src: url('/assets/fonts/CZH.ttf'); }
|
|
@font-face { font-family: 'RM'; src: url('/assets/fonts/RM.ttf'); }
|
|
a { text-decoration: none; }
|
|
html { width: 100%; height: 100%; overflow-x: hidden; overflow-y: auto; scroll-behavior: smooth; }
|
|
body { width: 100%; height: 100%; background: #f1f1f1; position: absolute; z-index: -100; }
|
|
|
|
.layui-form-switch { margin-top: 0px; }
|
|
.layui-input:focus,.layui-textarea:focus { border-color: #189f92 !important; }
|
|
.layui-fluid { padding: 15px; }
|
|
|
|
.gerp-container { width: 100%; height: 60px; background: linear-gradient(135deg, #006fc9 0%, #004a8f 100%); box-shadow: var(--nav-shadow); }
|
|
.gerp-container a,.layui-nav .layui-nav-item a { color: #fff; }
|
|
|
|
.gerp-container .logo a {
|
|
background-color: transparent;
|
|
font-weight: 600;
|
|
float: left;
|
|
font-size: 18px;
|
|
padding-left: 25px;
|
|
line-height: 60px;
|
|
width: 200px;
|
|
}
|
|
|
|
.gerp-container .right { background-color: transparent; float: right; }
|
|
.gerp-container .gerp-left-open { height: 60px; float: left; margin-left: 15px; user-select: none; }
|
|
|
|
.gerp-container .gerp-left-open i {
|
|
display: block;
|
|
background: rgba(255, 255, 255, 0.15);
|
|
width: 36px;
|
|
height: 36px;
|
|
line-height: 36px;
|
|
border-radius: 50%;
|
|
text-align: center;
|
|
margin-top: 12px;
|
|
cursor: pointer;
|
|
transition: var(--transition);
|
|
}
|
|
|
|
.gerp-container .gerp-left-open i:hover { background: rgba(255, 255, 255, 0.3); transform: rotate(90deg); }
|
|
.gerp-container .left { background-color: transparent; float: left; }
|
|
.gerp-container .layui-nav-item { line-height: 60px; }
|
|
.gerp-container .layui-nav-more { top: 25px; }
|
|
.gerp-container .layui-nav-child { top: 60px; border-radius: 0 0 8px 8px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); }
|
|
.gerp-container .layui-nav-child i { margin-right: 10px; }
|
|
|
|
.layui-nav .layui-nav-item a { outline: none; cursor: pointer; }
|
|
.layui-nav .layui-nav-child a { color: #333; cursor: pointer; }
|
|
|
|
.left-nav {
|
|
position: absolute;
|
|
top: 60px;
|
|
bottom: 0px;
|
|
left: 0;
|
|
z-index: 2;
|
|
padding-top: 2px;
|
|
background-color: #EEEEEE;
|
|
width: 300px;
|
|
max-width: 300px;
|
|
overflow: auto;
|
|
overflow-x: hidden;
|
|
box-shadow: 1px 0 1px rgba(0, 0, 0, 0.08);
|
|
transition: var(--transition);
|
|
}
|
|
|
|
.left-nav .gerp-side-nav-ul .current { background-color: rgba(0, 0, 0, 0.3); }
|
|
.left-nav .gerp-side-nav-ul li {
|
|
display: grid;
|
|
transition: var(--transition);
|
|
grid-template-rows: 0fr;
|
|
transition: grid-template-rows 0.3s;
|
|
width: 100%;
|
|
}
|
|
.left-nav .gerp-side-nav-ul li a {
|
|
font-size: 14px;
|
|
padding: 10px 15px 10px 10px;
|
|
display: block;
|
|
cursor: pointer;
|
|
border-left: 4px solid transparent;
|
|
transition: all 0.3s;
|
|
margin: 5px 10px;
|
|
border-radius: 4px;
|
|
width: 83%;
|
|
}
|
|
|
|
.left-nav .gerp-side-nav-ul li i { transition: var(--transition); }
|
|
.left-nav .gerp-side-nav-ul li cite { transition: var(--transition); margin-left: 3px; }
|
|
|
|
.left-nav a:hover { background: #006fc9 !important; color: #fff; border-color: #004570 !important; }
|
|
.left-nav a.active { background: #006fc9 !important; color: #fff; border-color: #004570 !important; }
|
|
|
|
.left-nav .gerp-side-nav-ul li a cite { font-size: 14px;}
|
|
|
|
.sub-menu { width: 91%; padding: 2px; }
|
|
|
|
.left-nav .gerp-side-nav-ul li .sub-menu { display: none; }
|
|
.left-nav .gerp-side-nav-ul li .opened { display: block; }
|
|
|
|
.left-nav .gerp-side-nav-ul li .sub-menu li a { padding: 12px 15px 12px 30px; font-size: 14px; cursor: pointer; }
|
|
.left-nav .gerp-side-nav-ul li .sub-menu li .sub-menu li a { padding-left: 45px; }
|
|
.left-nav .gerp-side-nav-ul li .sub-menu li a i { font-size: 12px; }
|
|
|
|
.left-nav .gerp-side-nav-ul li a i { padding-right: 15px; line-height: 14px; }
|
|
.left-nav .gerp-side-nav-ul li .gerp-nav-right { padding-top: 2.5px; padding-right: 5px; float: right; font-size: 16px; }
|
|
|
|
.page-content {
|
|
position: absolute;
|
|
top: 60px;
|
|
right: 0;
|
|
bottom: 0px;
|
|
left: 300px;
|
|
overflow: hidden;
|
|
z-index: -1;
|
|
}
|
|
|
|
.page-content-bg {
|
|
position: absolute;
|
|
top: 60px;
|
|
right: 0;
|
|
bottom: 0px;
|
|
left: 300px;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
overflow: hidden;
|
|
z-index: 100;
|
|
display: none;
|
|
}
|
|
|
|
.page-content .tab {
|
|
height: 100%;
|
|
width: 100%;
|
|
margin: 0px;
|
|
}
|
|
|
|
.page-content .layui-tab-title {
|
|
height: 35px;
|
|
background: #EFEEF0;
|
|
position: relative;
|
|
z-index: 100;
|
|
margin-top: -2px;
|
|
margin-left: -2px;
|
|
}
|
|
|
|
.page-content .gerp-nav {
|
|
height: 35px;
|
|
background: #FFF;
|
|
position: relative;
|
|
z-index: 100;
|
|
margin-top: -2px;
|
|
margin-left: -2px;
|
|
padding: 0 20px;
|
|
border-bottom: 1px solid #e5e5e5;
|
|
line-height: 39px;
|
|
overflow: hidden;
|
|
width: -webkit-fill-available;
|
|
top: 0;
|
|
}
|
|
|
|
.gerp-nav-tools { float: right; cursor: pointer; }
|
|
.gerp-nav-btn { margin: 10px; }
|
|
.gerp-nav-i { font-size: 17px !important; }
|
|
|
|
.page-content .layui-tab-title li.home i { padding-right: 5px; }
|
|
.page-content .layui-tab-title li.home .layui-tab-close { display: none; }
|
|
.page-content .layui-tab-title li { line-height: 35px; position: relative; transition: background-color 0.3s ease; }
|
|
.page-content .layui-tab-title li:not(.layui-this):hover { background-color: rgba(255, 255, 255, 0.7); }
|
|
|
|
.page-content .layui-tab-title li::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 0;
|
|
background-color: #1f88e5;
|
|
transition: height 0.3s ease;
|
|
}
|
|
|
|
.page-content .layui-tab-title .layui-this::before { height: 5px; }
|
|
.page-content .layui-tab-title li .layui-tab-close { border-radius: 10%; transition: background-color 0.3s ease; }
|
|
|
|
.page-content .layui-tab-title .layui-this { background: #fff; }
|
|
.page-content .layui-tab-bar { height: 34px; line-height: 35px; }
|
|
|
|
.page-content .layui-tab-content {
|
|
position: relative;
|
|
bottom: 0;
|
|
width: 100%;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
height: calc(100% - 36px);
|
|
}
|
|
|
|
.page-content .layui-tab-content .layui-tab-item {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
|
|
will-change: transform, opacity;
|
|
backface-visibility: hidden;
|
|
}
|
|
|
|
.page-content .layui-tab-content .layui-tab-item:not(.layui-show) { opacity: 0; pointer-events: none; }
|
|
.page-content .layui-tab-content .layui-tab-item.layui-show {
|
|
transform: translateX(0);
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
z-index: 1;
|
|
}
|
|
|
|
.page-content .layui-tab-content .layui-tab-item.slide-in-right { transform: translateX(100%); opacity: 1; }
|
|
.page-content .layui-tab-content .layui-tab-item.slide-in-left { transform: translateX(-100%); opacity: 1; }
|
|
.page-content .layui-tab-content .layui-tab-item.slide-out-left { transform: translateX(-100%); opacity: 0.8; }
|
|
.page-content .layui-tab-content .layui-tab-item.slide-out-right { transform: translateX(100%); opacity: 0.8; }
|
|
.page-content .layui-tab-content .layui-tab-item iframe { width: 100%; height: 100%; border: none; }
|
|
|
|
.layui-table {
|
|
border-radius: var(--border-radius);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.layui-table td,
|
|
.layui-table th {
|
|
min-width: 80px;
|
|
padding: 12px 15px;
|
|
}
|
|
|
|
/* 优化表格样式 */
|
|
.layui-table thead tr { background: linear-gradient(to right, #f8f9fa, #e9ecef); }
|
|
.layui-table tbody tr:hover { background-color: rgba(0, 111, 201, 0.05) !important; }
|
|
.layui-btn-group .layui-btn { margin: 0; border-radius: 0; }
|
|
.layui-btn-group .layui-btn:first-child { border-radius: 4px 0 0 4px; }
|
|
.layui-btn-group .layui-btn:last-child { border-radius: 0 4px 4px 0; }
|
|
|
|
@media screen and (max-width: 768px) {
|
|
.layui-table-responsive { width: 100%; overflow-x: auto; }
|
|
.gerp-container .logo a { width: 140px; }
|
|
.gerp-container .gerp-left-open { }
|
|
|
|
.left-nav { width: 60px; }
|
|
.left-nav .gerp-side-nav-ul li a i { font-size: 18px; }
|
|
|
|
.left-nav .user-avatar-card .avatar { width: 25px; height: 25px; }
|
|
.page-content { left: 60px; }
|
|
.page-content .layui-tab-content .layui-tab-item { -webkit-overflow-scrolling: touch; overflow-y: scroll; }
|
|
}
|
|
|
|
/* 6. 未使用的弹窗/右键菜单DOM样式（第二段完全删除） */
|
|
.gerp-tab-right {
|
|
display: none;
|
|
width: 80px;
|
|
position: absolute;
|
|
top: 35px;
|
|
left: 0px;
|
|
}
|
|
.gerp-tab-right dl { top: 0px; }
|
|
.gerp-tab-show {
|
|
position: absolute;
|
|
top: 36px;
|
|
bottom: 0px;
|
|
width: 100%;
|
|
background: rgb(255, 255, 255, 0);
|
|
padding: 0px;
|
|
overflow: hidden;
|
|
display: none;
|
|
}
|
|
|
|
.nav-single-line {
|
|
white-space: nowrap !important;
|
|
overflow: visible !important;
|
|
text-overflow: clip !important;
|
|
display: block !important;
|
|
position: relative !important;
|
|
}
|
|
.nav-link-single-line {
|
|
white-space: nowrap !important;
|
|
display: inline-block !important;
|
|
}
|
|
|
|
.cite-visible {
|
|
display: inline-block !important;
|
|
white-space: nowrap !important;
|
|
}
|
|
|
|
.cite-hidden {
|
|
display: none !important;
|
|
}
|
|
|
|
/* 确保gerp-nav-right在收起时必隐藏 */
|
|
.left-nav.collapsed .gerp-nav-right,
|
|
.gerp-nav-right.hidden {
|
|
display: none !important;
|
|
}
|
|
/* 展开时必显示 */
|
|
.left-nav:not(.collapsed) .gerp-nav-right {
|
|
display: inline-block !important;
|
|
}
|
|
|
|
/*精细版样式*/
|
|
.gerp-sm { font-size: 12px; }
|
|
.gerp-sm body { font-size: 12px; }
|
|
.gerp-sm .login .message { font-size: 14px; }
|
|
.gerp-sm .layui-table td,
|
|
.gerp-sm .layui-table th { font-size: 12px; }
|
|
.gerp-sm .layui-elem-field legend { font-size: 18px; }
|
|
.gerp-sm .x-admin-backlog-body p cite { font-size: 24px; }
|
|
.gerp-sm .left-nav .gerp-side-nav-ul li a cite { font-size: 12px; }
|
|
.gerp-sm .iconfont { font-size: 14px; }
|
|
.gerp-sm .layui-tab-title li { font-size: 12px; }
|
|
.gerp-sm .layui-icon { font-size: 14px; }
|
|
.gerp-sm .layui-nav * { font-size: 12px; }
|
|
.gerp-sm .layui-breadcrumb>* { font-size: 12px; visibility: visible; }
|
|
.gerp-sm .layui-btn,
|
|
.gerp-sm .layui-btn-xs,
|
|
.gerp-sm .layui-btn-sm { font-size: 12px; }
|
|
.gerp-sm .layui-laydate { font-size: 12px; }
|
|
.gerp-sm .layui-btn {
|
|
height: 30px;
|
|
line-height: 30px;
|
|
padding: 0 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
.gerp-sm .layui-btn-lg {
|
|
height: 38px;
|
|
line-height: 38px;
|
|
padding: 0 18px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.gerp-sm .layui-layer-title,
|
|
.gerp-sm .layui-layer-dialog .layui-layer-content { font-size: 12px; }
|
|
.gerp-sm .layui-input,
|
|
.gerp-sm .layui-select,
|
|
.gerp-sm .layui-textarea { height: 30px; }
|
|
.gerp-sm .layui-form-pane .layui-form-label { height: 30px; line-height: 14px; }
|
|
.gerp-sm .layui-form-checkbox span { font-size: 12px; }
|
|
.gerp-sm .fly-none .layui-icon {
|
|
line-height: 300px;
|
|
font-size: 300px;
|
|
color: #393D49;
|
|
}
|
|
|
|
.layui-btn { margin: 1px 1px; }
|
|
.side-nav {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
width: 300px;
|
|
}
|
|
|
|
/* 头像样式 */
|
|
.avatar-container {
|
|
position: relative;
|
|
width: 200px;
|
|
height: 200px;
|
|
cursor: pointer;
|
|
margin-bottom: 20px;
|
|
}
|
|
.avatar-img { width: 100%; height: 100%; object-fit: cover; }
|
|
.avatar-overlay {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
color: white;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
opacity: 0;
|
|
transition: opacity 0.3s;
|
|
border-radius: 50%;
|
|
}
|
|
.avatar-container:hover .avatar-overlay { opacity: 1; }
|
|
/* 头像样式完 */
|
|
|
|
/* CARD 圆角 & 阴影 & 分割线 */
|
|
.layui-card-header { border-bottom: 1px solid #ddd; }
|
|
.layui-card-round {
|
|
background: var(--card-bg);
|
|
backdrop-filter: blur(10px);
|
|
-webkit-backdrop-filter: blur(10px);
|
|
border-radius: var(--border-radius);
|
|
box-shadow: var(--box-shadow);
|
|
overflow: hidden;
|
|
transform: translateY(20px);
|
|
transition: var(--transition);
|
|
}
|
|
/* CARD 圆角 & 阴影完 */
|
|
|
|
.user-avatar-card {
|
|
width: 260px;
|
|
margin: 10px;
|
|
padding: 10px;
|
|
display: flex;
|
|
border-radius: 5px;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
transition: transform 0.3s ease, box-shadow 0.3s, margin 0.3s ease;;
|
|
}
|
|
.user-avatar-card:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); }
|
|
.user-avatar-card .avatar {
|
|
width: 50px;
|
|
height: 50px;
|
|
border-radius: 50%;
|
|
margin-right: 15px;
|
|
margin-left: 5px;
|
|
background-color: #1E9FFF;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: white;
|
|
font-size: 20px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
.user-avatar-card .text-content { flex: 1; white-space: nowrap; overflow: hidden; }
|
|
.user-avatar-card .title {
|
|
font-size: 16px;
|
|
color: #333;
|
|
font-weight: bold;
|
|
margin-bottom: 5px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.user-avatar-card .subtitle {
|
|
font-size: 14px;
|
|
color: #999;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.layui-card {
|
|
border-radius: 6px;
|
|
border: 1px solid #f0f0f0;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 1px rgba(0, 0, 0, 0.03);
|
|
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
|
position: relative;
|
|
}
|
|
|
|
.layui-card:hover { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.05); }
|
|
|
|
.layui-card-header {
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.03);
|
|
font-weight: normal;
|
|
border-radius: 6px 6px 0 0;
|
|
}
|
|
.layui-card-body { padding: 12px 15px; }
|
|
|
|
/* 响应式调整 */
|
|
@media (max-width: 480px) {
|
|
.user-avatar-card { width: 100%; }
|
|
}
|
|
|
|
/* 添加Tab切换动画效果 */
|
|
.layui-tab-content { position: relative; overflow: hidden; }
|
|
.layui-tab-item {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
transition: transform 0.3s ease-in-out;
|
|
will-change: transform;
|
|
}
|
|
|
|
.layui-tab-item.layui-show { transform: translateX(0); z-index: 1; }
|
|
.layui-tab-item:not(.layui-show) { display: block !important; visibility: visible !important; }
|
|
.layui-tab-item.slide-left { transform: translateX(-100%); }
|
|
.layui-tab-item.slide-right { transform: translateX(100%); }
|
|
|
|
::-webkit-scrollbar { width: 12px; height: 12px; background-color: rgba(240, 240, 240, 0.8); border-radius: 10px; }
|
|
::-webkit-scrollbar-track { background-color: transparent; border-radius: 10px; margin: 4px 0; }
|
|
::-webkit-scrollbar-thumb { background-color: #c1c1c1; border-radius: 10px; border: 3px solid transparent; background-clip: content-box; transition: all 0.3s ease-in-out; }
|
|
::-webkit-scrollbar-thumb:hover { background-color: #a8a8a8; transform: scaleX(1.1); }
|
|
::-webkit-scrollbar-thumb:active { background-color: #888888; transform: scaleX(1.15); }
|
|
::-webkit-scrollbar-corner { background-color: transparent; }
|
|
|
|
.layui-nav.right .layui-nav-child { z-index: 9999; position: absolute; }
|
|
|
|
.layui-tab-title li.tab-no-close .layui-tab-close { display: none !important; }
|