更新政府端和银行端
This commit is contained in:
459
bank-frontend/src/styles/global.css
Normal file
459
bank-frontend/src/styles/global.css
Normal file
@@ -0,0 +1,459 @@
|
||||
/**
|
||||
* 全局样式
|
||||
* @file global.css
|
||||
* @description 全局CSS样式定义
|
||||
*/
|
||||
|
||||
/* 重置样式 */
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
font-size: 14px;
|
||||
line-height: 1.5715;
|
||||
color: #262626;
|
||||
background-color: #f0f2f5;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
#app {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* 滚动条样式 */
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #c1c1c1;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #a8a8a8;
|
||||
}
|
||||
|
||||
/* 链接样式 */
|
||||
a {
|
||||
color: #1890ff;
|
||||
text-decoration: none;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #40a9ff;
|
||||
}
|
||||
|
||||
a:active {
|
||||
color: #096dd9;
|
||||
}
|
||||
|
||||
/* 按钮样式增强 */
|
||||
.ant-btn {
|
||||
border-radius: 6px;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.ant-btn-primary {
|
||||
background: #1890ff;
|
||||
border-color: #1890ff;
|
||||
}
|
||||
|
||||
.ant-btn-primary:hover {
|
||||
background: #40a9ff;
|
||||
border-color: #40a9ff;
|
||||
}
|
||||
|
||||
.ant-btn-primary:active {
|
||||
background: #096dd9;
|
||||
border-color: #096dd9;
|
||||
}
|
||||
|
||||
/* 输入框样式增强 */
|
||||
.ant-input,
|
||||
.ant-input-password,
|
||||
.ant-select-selector {
|
||||
border-radius: 6px;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.ant-input:focus,
|
||||
.ant-input-password:focus,
|
||||
.ant-select-focused .ant-select-selector {
|
||||
border-color: #1890ff;
|
||||
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
|
||||
}
|
||||
|
||||
/* 卡片样式增强 */
|
||||
.ant-card {
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.ant-card:hover {
|
||||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02), 0 4px 8px 0 rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
/* 表格样式增强 */
|
||||
.ant-table {
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ant-table-thead > tr > th {
|
||||
background: #fafafa;
|
||||
font-weight: 600;
|
||||
color: #262626;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.ant-table-tbody > tr:hover > td {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
/* 模态框样式增强 */
|
||||
.ant-modal {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.ant-modal-content {
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ant-modal-header {
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
padding: 16px 24px;
|
||||
}
|
||||
|
||||
.ant-modal-body {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.ant-modal-footer {
|
||||
border-top: 1px solid #f0f0f0;
|
||||
padding: 10px 16px;
|
||||
}
|
||||
|
||||
/* 抽屉样式增强 */
|
||||
.ant-drawer-content {
|
||||
border-radius: 8px 0 0 8px;
|
||||
}
|
||||
|
||||
.ant-drawer-header {
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
padding: 16px 24px;
|
||||
}
|
||||
|
||||
.ant-drawer-body {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
/* 页面布局样式 */
|
||||
.page-container {
|
||||
padding: 24px;
|
||||
background: #f0f2f5;
|
||||
min-height: calc(100vh - 64px);
|
||||
}
|
||||
|
||||
.page-header {
|
||||
background: #fff;
|
||||
padding: 16px 24px;
|
||||
margin-bottom: 16px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
|
||||
.page-content {
|
||||
background: #fff;
|
||||
padding: 24px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
|
||||
/* 搜索区域样式 */
|
||||
.search-area {
|
||||
background: #fff;
|
||||
padding: 16px 24px;
|
||||
margin-bottom: 16px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
|
||||
.search-form {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
align-items: flex-end;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.search-form .ant-form-item {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.search-buttons {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
/* 操作按钮样式 */
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.action-buttons .ant-btn {
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
/* 状态标签样式 */
|
||||
.status-tag {
|
||||
border-radius: 4px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.status-active {
|
||||
background: #f6ffed;
|
||||
color: #52c41a;
|
||||
border-color: #b7eb8f;
|
||||
}
|
||||
|
||||
.status-inactive {
|
||||
background: #fff2e8;
|
||||
color: #fa8c16;
|
||||
border-color: #ffd591;
|
||||
}
|
||||
|
||||
.status-suspended {
|
||||
background: #fff1f0;
|
||||
color: #ff4d4f;
|
||||
border-color: #ffccc7;
|
||||
}
|
||||
|
||||
.status-locked {
|
||||
background: #f5f5f5;
|
||||
color: #8c8c8c;
|
||||
border-color: #d9d9d9;
|
||||
}
|
||||
|
||||
/* 金额显示样式 */
|
||||
.amount-text {
|
||||
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.amount-positive {
|
||||
color: #52c41a;
|
||||
}
|
||||
|
||||
.amount-negative {
|
||||
color: #ff4d4f;
|
||||
}
|
||||
|
||||
.amount-zero {
|
||||
color: #8c8c8c;
|
||||
}
|
||||
|
||||
/* 加载状态样式 */
|
||||
.loading-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.loading-text {
|
||||
margin-left: 12px;
|
||||
color: #8c8c8c;
|
||||
}
|
||||
|
||||
/* 空状态样式 */
|
||||
.empty-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 200px;
|
||||
color: #8c8c8c;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 48px;
|
||||
margin-bottom: 16px;
|
||||
color: #d9d9d9;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 16px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.empty-description {
|
||||
font-size: 14px;
|
||||
color: #8c8c8c;
|
||||
}
|
||||
|
||||
/* 响应式样式 */
|
||||
@media (max-width: 768px) {
|
||||
.page-container {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
padding: 12px 16px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.search-area {
|
||||
padding: 12px 16px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.search-form {
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.search-buttons {
|
||||
margin-left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.search-buttons .ant-btn {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* 打印样式 */
|
||||
@media print {
|
||||
.no-print {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.page-container {
|
||||
padding: 0;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.page-header,
|
||||
.page-content {
|
||||
box-shadow: none;
|
||||
border: 1px solid #d9d9d9;
|
||||
}
|
||||
}
|
||||
|
||||
/* 动画效果 */
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.slide-enter-active,
|
||||
.slide-leave-active {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.slide-enter-from {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
.slide-leave-to {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
/* 工具类 */
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.text-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.text-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.mb-0 { margin-bottom: 0; }
|
||||
.mb-8 { margin-bottom: 8px; }
|
||||
.mb-16 { margin-bottom: 16px; }
|
||||
.mb-24 { margin-bottom: 24px; }
|
||||
|
||||
.mt-0 { margin-top: 0; }
|
||||
.mt-8 { margin-top: 8px; }
|
||||
.mt-16 { margin-top: 16px; }
|
||||
.mt-24 { margin-top: 24px; }
|
||||
|
||||
.ml-0 { margin-left: 0; }
|
||||
.ml-8 { margin-left: 8px; }
|
||||
.ml-16 { margin-left: 16px; }
|
||||
.ml-24 { margin-left: 24px; }
|
||||
|
||||
.mr-0 { margin-right: 0; }
|
||||
.mr-8 { margin-right: 8px; }
|
||||
.mr-16 { margin-right: 16px; }
|
||||
.mr-24 { margin-right: 24px; }
|
||||
|
||||
.p-0 { padding: 0; }
|
||||
.p-8 { padding: 8px; }
|
||||
.p-16 { padding: 16px; }
|
||||
.p-24 { padding: 24px; }
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.flex-center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.flex-between {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.flex-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.flex-1 {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.w-full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.h-full {
|
||||
height: 100%;
|
||||
}
|
||||
520
bank-frontend/src/styles/responsive.css
Normal file
520
bank-frontend/src/styles/responsive.css
Normal file
@@ -0,0 +1,520 @@
|
||||
/**
|
||||
* 响应式样式
|
||||
* @file responsive.css
|
||||
* @description 响应式设计样式定义
|
||||
*/
|
||||
|
||||
/* 移动端样式 */
|
||||
@media (max-width: 768px) {
|
||||
/* 布局调整 */
|
||||
.ant-layout-header {
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.ant-layout-sider {
|
||||
position: fixed !important;
|
||||
height: 100vh;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.ant-layout-content {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
/* 菜单调整 */
|
||||
.ant-menu {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.ant-menu-item,
|
||||
.ant-menu-submenu-title {
|
||||
padding: 0 16px !important;
|
||||
}
|
||||
|
||||
/* 表格调整 */
|
||||
.ant-table-wrapper {
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.ant-table {
|
||||
min-width: 600px;
|
||||
}
|
||||
|
||||
.ant-table-thead > tr > th,
|
||||
.ant-table-tbody > tr > td {
|
||||
padding: 8px 4px;
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 表单调整 */
|
||||
.ant-form-item {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.ant-form-item-label {
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
.ant-form-item-control {
|
||||
min-height: 32px;
|
||||
}
|
||||
|
||||
/* 按钮调整 */
|
||||
.ant-btn {
|
||||
min-height: 40px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.ant-btn-sm {
|
||||
min-height: 32px;
|
||||
}
|
||||
|
||||
.ant-btn-lg {
|
||||
min-height: 48px;
|
||||
}
|
||||
|
||||
/* 输入框调整 */
|
||||
.ant-input,
|
||||
.ant-input-password,
|
||||
.ant-select-selector {
|
||||
min-height: 40px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
/* 卡片调整 */
|
||||
.ant-card {
|
||||
margin-bottom: 12px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.ant-card-head {
|
||||
padding: 0 16px;
|
||||
min-height: 48px;
|
||||
}
|
||||
|
||||
.ant-card-body {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
/* 模态框调整 */
|
||||
.ant-modal {
|
||||
margin: 0 !important;
|
||||
width: 100vw !important;
|
||||
max-width: 100vw !important;
|
||||
top: 0 !important;
|
||||
}
|
||||
|
||||
.ant-modal-content {
|
||||
border-radius: 0;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.ant-modal-header {
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.ant-modal-body {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.ant-modal-footer {
|
||||
border-top: 1px solid #f0f0f0;
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
/* 抽屉调整 */
|
||||
.ant-drawer-content {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.ant-drawer-header {
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.ant-drawer-body {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
/* 分页调整 */
|
||||
.ant-pagination {
|
||||
text-align: center;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.ant-pagination-item,
|
||||
.ant-pagination-prev,
|
||||
.ant-pagination-next {
|
||||
min-width: 32px;
|
||||
height: 32px;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
/* 标签调整 */
|
||||
.ant-tag {
|
||||
margin: 2px;
|
||||
padding: 2px 8px;
|
||||
font-size: 12px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* 步骤条调整 */
|
||||
.ant-steps {
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
.ant-steps-item-title {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.ant-steps-item-description {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* 时间轴调整 */
|
||||
.ant-timeline-item-content {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 描述列表调整 */
|
||||
.ant-descriptions-item-label {
|
||||
font-weight: 600;
|
||||
color: #262626;
|
||||
}
|
||||
|
||||
.ant-descriptions-item-content {
|
||||
color: #595959;
|
||||
}
|
||||
|
||||
/* 统计数值调整 */
|
||||
.ant-statistic-title {
|
||||
font-size: 14px;
|
||||
color: #8c8c8c;
|
||||
}
|
||||
|
||||
.ant-statistic-content {
|
||||
font-size: 24px;
|
||||
color: #262626;
|
||||
}
|
||||
|
||||
/* 进度条调整 */
|
||||
.ant-progress-text {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* 工具提示调整 */
|
||||
.ant-tooltip-inner {
|
||||
font-size: 12px;
|
||||
padding: 6px 8px;
|
||||
}
|
||||
|
||||
/* 消息提示调整 */
|
||||
.ant-message {
|
||||
top: 8px;
|
||||
}
|
||||
|
||||
.ant-message-notice-content {
|
||||
padding: 8px 12px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
/* 通知调整 */
|
||||
.ant-notification {
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
}
|
||||
|
||||
.ant-notification-notice {
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
/* 确认对话框调整 */
|
||||
.ant-modal-confirm {
|
||||
margin: 0 16px;
|
||||
}
|
||||
|
||||
.ant-modal-confirm-body {
|
||||
padding: 16px 0;
|
||||
}
|
||||
|
||||
.ant-modal-confirm-btns {
|
||||
padding: 8px 0 0 0;
|
||||
}
|
||||
|
||||
/* 选择器调整 */
|
||||
.ant-select-dropdown {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.ant-select-item {
|
||||
padding: 8px 12px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 日期选择器调整 */
|
||||
.ant-picker {
|
||||
width: 100%;
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
.ant-picker-dropdown {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
/* 上传组件调整 */
|
||||
.ant-upload {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ant-upload-dragger {
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
/* 评分组件调整 */
|
||||
.ant-rate {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
/* 开关组件调整 */
|
||||
.ant-switch {
|
||||
min-width: 44px;
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
/* 滑块组件调整 */
|
||||
.ant-slider {
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
/* 穿梭框调整 */
|
||||
.ant-transfer {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ant-transfer-list {
|
||||
width: calc(50% - 8px);
|
||||
}
|
||||
|
||||
/* 树形控件调整 */
|
||||
.ant-tree {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.ant-tree-node-content-wrapper {
|
||||
padding: 4px 8px;
|
||||
}
|
||||
|
||||
/* 锚点调整 */
|
||||
.ant-anchor {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.ant-anchor-link {
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
/* 回到顶部调整 */
|
||||
.ant-back-top {
|
||||
right: 16px;
|
||||
bottom: 16px;
|
||||
}
|
||||
|
||||
/* 加载中调整 */
|
||||
.ant-spin-container {
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.ant-spin-text {
|
||||
font-size: 14px;
|
||||
color: #8c8c8c;
|
||||
}
|
||||
}
|
||||
|
||||
/* 平板样式 */
|
||||
@media (min-width: 769px) and (max-width: 1024px) {
|
||||
/* 布局调整 */
|
||||
.ant-layout-content {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
/* 表格调整 */
|
||||
.ant-table-thead > tr > th,
|
||||
.ant-table-tbody > tr > td {
|
||||
padding: 12px 8px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* 卡片调整 */
|
||||
.ant-card-body {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* 模态框调整 */
|
||||
.ant-modal {
|
||||
margin: 0 16px;
|
||||
}
|
||||
|
||||
.ant-modal-content {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
/* 表单调整 */
|
||||
.ant-form-item {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 大屏幕样式 */
|
||||
@media (min-width: 1200px) {
|
||||
/* 容器最大宽度 */
|
||||
.page-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* 表格调整 */
|
||||
.ant-table-thead > tr > th,
|
||||
.ant-table-tbody > tr > td {
|
||||
padding: 16px 12px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 卡片调整 */
|
||||
.ant-card-body {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
/* 模态框调整 */
|
||||
.ant-modal {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* 表单调整 */
|
||||
.ant-form-item {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 超宽屏幕样式 */
|
||||
@media (min-width: 1600px) {
|
||||
/* 容器最大宽度 */
|
||||
.page-container {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* 表格调整 */
|
||||
.ant-table-thead > tr > th,
|
||||
.ant-table-tbody > tr > td {
|
||||
padding: 20px 16px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 卡片调整 */
|
||||
.ant-card-body {
|
||||
padding: 32px;
|
||||
}
|
||||
|
||||
/* 表单调整 */
|
||||
.ant-form-item {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 横屏模式调整 */
|
||||
@media (orientation: landscape) and (max-height: 500px) {
|
||||
.ant-layout-header {
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
}
|
||||
|
||||
.ant-layout-sider {
|
||||
height: calc(100vh - 48px);
|
||||
}
|
||||
|
||||
.ant-layout-content {
|
||||
min-height: calc(100vh - 48px);
|
||||
}
|
||||
|
||||
.page-container {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
padding: 8px 16px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 高分辨率屏幕调整 */
|
||||
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
|
||||
.ant-table-thead > tr > th,
|
||||
.ant-table-tbody > tr > td {
|
||||
border-bottom: 0.5px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.ant-divider {
|
||||
border-top: 0.5px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.ant-card {
|
||||
border: 0.5px solid #f0f0f0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 打印样式 */
|
||||
@media print {
|
||||
.ant-layout-header,
|
||||
.ant-layout-sider,
|
||||
.ant-layout-footer {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.ant-layout-content {
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.page-container {
|
||||
padding: 0 !important;
|
||||
background: #fff !important;
|
||||
}
|
||||
|
||||
.page-header,
|
||||
.page-content {
|
||||
box-shadow: none !important;
|
||||
border: 1px solid #d9d9d9 !important;
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
.ant-table {
|
||||
border: 1px solid #d9d9d9 !important;
|
||||
}
|
||||
|
||||
.ant-table-thead > tr > th,
|
||||
.ant-table-tbody > tr > td {
|
||||
border: 1px solid #d9d9d9 !important;
|
||||
padding: 8px !important;
|
||||
}
|
||||
|
||||
.ant-btn {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.no-print {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
172
bank-frontend/src/styles/theme.js
Normal file
172
bank-frontend/src/styles/theme.js
Normal file
@@ -0,0 +1,172 @@
|
||||
/**
|
||||
* 主题配置
|
||||
* @file theme.js
|
||||
* @description Ant Design Vue 主题配置
|
||||
*/
|
||||
import { THEME_CONFIG } from '@/config/env'
|
||||
|
||||
// Ant Design Vue 主题配置
|
||||
export const themeConfig = {
|
||||
token: {
|
||||
// 主色调
|
||||
colorPrimary: THEME_CONFIG.primaryColor,
|
||||
|
||||
// 成功色
|
||||
colorSuccess: '#52c41a',
|
||||
|
||||
// 警告色
|
||||
colorWarning: '#faad14',
|
||||
|
||||
// 错误色
|
||||
colorError: '#ff4d4f',
|
||||
|
||||
// 信息色
|
||||
colorInfo: THEME_CONFIG.primaryColor,
|
||||
|
||||
// 字体大小
|
||||
fontSize: 14,
|
||||
|
||||
// 圆角
|
||||
borderRadius: 6,
|
||||
|
||||
// 组件尺寸
|
||||
sizeUnit: 4,
|
||||
sizeStep: 4,
|
||||
|
||||
// 控制台高度
|
||||
controlHeight: 32,
|
||||
|
||||
// 行高
|
||||
lineHeight: 1.5715,
|
||||
|
||||
// 字体族
|
||||
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"'
|
||||
},
|
||||
|
||||
components: {
|
||||
// 布局组件
|
||||
Layout: {
|
||||
headerBg: '#001529',
|
||||
siderBg: '#001529',
|
||||
bodyBg: '#f0f2f5'
|
||||
},
|
||||
|
||||
// 菜单组件
|
||||
Menu: {
|
||||
darkItemBg: '#001529',
|
||||
darkItemSelectedBg: '#1890ff',
|
||||
darkItemHoverBg: '#1890ff'
|
||||
},
|
||||
|
||||
// 按钮组件
|
||||
Button: {
|
||||
borderRadius: 6,
|
||||
controlHeight: 32
|
||||
},
|
||||
|
||||
// 输入框组件
|
||||
Input: {
|
||||
borderRadius: 6,
|
||||
controlHeight: 32
|
||||
},
|
||||
|
||||
// 表格组件
|
||||
Table: {
|
||||
headerBg: '#fafafa',
|
||||
headerColor: '#262626',
|
||||
rowHoverBg: '#f5f5f5'
|
||||
},
|
||||
|
||||
// 卡片组件
|
||||
Card: {
|
||||
borderRadius: 8,
|
||||
headerBg: '#fafafa'
|
||||
},
|
||||
|
||||
// 模态框组件
|
||||
Modal: {
|
||||
borderRadius: 8
|
||||
},
|
||||
|
||||
// 抽屉组件
|
||||
Drawer: {
|
||||
borderRadius: 8
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 暗色主题配置
|
||||
export const darkThemeConfig = {
|
||||
token: {
|
||||
...themeConfig.token,
|
||||
colorBgBase: '#141414',
|
||||
colorBgContainer: '#1f1f1f',
|
||||
colorBgElevated: '#262626',
|
||||
colorBorder: '#424242',
|
||||
colorText: '#ffffff',
|
||||
colorTextSecondary: '#a6a6a6',
|
||||
colorTextTertiary: '#737373',
|
||||
colorTextQuaternary: '#595959'
|
||||
},
|
||||
|
||||
components: {
|
||||
...themeConfig.components,
|
||||
Layout: {
|
||||
headerBg: '#141414',
|
||||
siderBg: '#141414',
|
||||
bodyBg: '#000000'
|
||||
},
|
||||
Menu: {
|
||||
darkItemBg: '#141414',
|
||||
darkItemSelectedBg: '#1890ff',
|
||||
darkItemHoverBg: '#1890ff'
|
||||
},
|
||||
Table: {
|
||||
headerBg: '#262626',
|
||||
headerColor: '#ffffff',
|
||||
rowHoverBg: '#262626'
|
||||
},
|
||||
Card: {
|
||||
borderRadius: 8,
|
||||
headerBg: '#262626'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 紧凑主题配置
|
||||
export const compactThemeConfig = {
|
||||
token: {
|
||||
...themeConfig.token,
|
||||
fontSize: 12,
|
||||
controlHeight: 24,
|
||||
sizeUnit: 2,
|
||||
sizeStep: 2
|
||||
},
|
||||
|
||||
components: {
|
||||
...themeConfig.components,
|
||||
Button: {
|
||||
borderRadius: 4,
|
||||
controlHeight: 24
|
||||
},
|
||||
Input: {
|
||||
borderRadius: 4,
|
||||
controlHeight: 24
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 根据配置返回主题
|
||||
export const getThemeConfig = () => {
|
||||
if (THEME_CONFIG.darkMode) {
|
||||
return darkThemeConfig
|
||||
}
|
||||
|
||||
if (THEME_CONFIG.compactMode) {
|
||||
return compactThemeConfig
|
||||
}
|
||||
|
||||
return themeConfig
|
||||
}
|
||||
|
||||
export default themeConfig
|
||||
Reference in New Issue
Block a user