/* * ============================================ * 统一样式规范文件 (Unified Style Guide) * ============================================ * 用途: 整合所有页面的样式,消除不一致问题 * 创建日期: 2026-01-02 * 更新日期: 2026-04-18 * 使用方法: 在页面中引入此文件 * */ /* ============================================ 1. CSS变量定义 (全局颜色、间距等) ============================================ */ :root { /* 主色调 - 绿色系（安全管理系统主题色） */ --color-primary: #4CAF50; --color-primary-dark: #388E3C; --color-primary-light: #81C784; --color-secondary: #2196F3; --color-secondary-dark: #1976D2; --color-secondary-light: #64B5F6; /* 功能色 */ --color-success: #4CAF50; --color-danger: #F44336; --color-warning: #FF9800; --color-info: #03A9F4; /* 中性色 */ --color-white: #ffffff; --color-black: #000000; --color-gray-50: #fafafa; --color-gray-100: #f5f5f5; --color-gray-200: #eeeeee; --color-gray-300: #e0e0e0; --color-gray-400: #bdbdbd; --color-gray-500: #9e9e9e; --color-gray-600: #757575; --color-gray-700: #616161; --color-gray-800: #424242; --color-gray-900: #212121; /* 文字颜色 */ --text-primary: #333333; --text-secondary: #666666; --text-muted: #999999; --text-white: #ffffff; /* 边框颜色 */ --border-color: #e0e0e0; --border-color-dark: #bdbdbd; /* 背景色 */ --bg-body: #f5f5f5; --bg-container: #ffffff; --bg-hover: #f8f9fa; /* 间距 */ --spacing-xs: 4px; --spacing-sm: 8px; --spacing-md: 12px; --spacing-lg: 16px; --spacing-xl: 20px; --spacing-2xl: 24px; --spacing-3xl: 32px; /* 圆角 */ --radius-sm: 2px; --radius-md: 4px; --radius-lg: 6px; --radius-xl: 8px; --radius-round: 50%; /* 阴影 */ --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1); --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.15); --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.2); /* 过渡动画 */ --transition-fast: 0.15s ease; --transition-normal: 0.3s ease; --transition-slow: 0.5s ease; } /* ============================================ 2. 按钮样式 (统一所有按钮) ============================================ */ /* 基础按钮 */ .btn { display: inline-block; padding: 10px 15px; font-size: 14px; font-weight: 500; line-height: 1.5; text-align: center; text-decoration: none; border: none; border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition-normal); user-select: none; white-space: nowrap; } .btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); } .btn:active { transform: translateY(0); } .btn:disabled, .btn[disabled] { opacity: 0.6; cursor: not-allowed; transform: none; } /* 按钮尺寸变体 */ .btn-sm { padding: 6px 10px; font-size: 12px; } .btn-md { padding: 10px 15px; font-size: 14px; } .btn-lg { padding: 12px 20px; font-size: 16px; } /* 按钮颜色变体 */ .btn-primary { background-color: var(--color-primary); color: var(--text-white); } .btn-primary:hover { background-color: var(--color-primary-dark); } .btn-secondary { background-color: var(--color-secondary); color: var(--text-white); } .btn-secondary:hover { background-color: var(--color-secondary-dark); } .btn-success { background-color: var(--color-success); color: var(--text-white); } .btn-success:hover { background-color: #45a049; } .btn-danger { background-color: var(--color-danger); color: var(--text-white); } .btn-danger:hover { background-color: #d32f2f; } .btn-warning { background-color: var(--color-warning); color: var(--text-white); } .btn-warning:hover { background-color: #f57c00; } .btn-info { background-color: var(--color-info); color: var(--text-white); } .btn-info:hover { background-color: #0288d1; } .btn-gray { background-color: var(--color-gray-600); color: var(--text-white); } .btn-gray:hover { background-color: var(--color-gray-700); } /* 轮廓按钮 */ .btn-outline-primary { background-color: transparent; color: var(--color-primary); border: 1px solid var(--color-primary); } .btn-outline-primary:hover { background-color: var(--color-primary); color: var(--text-white); } .btn-outline-secondary { background-color: transparent; color: var(--color-secondary); border: 1px solid var(--color-secondary); } .btn-outline-secondary:hover { background-color: var(--color-secondary); color: var(--text-white); } /* 按钮组 */ .btn-group { display: inline-flex; gap: var(--spacing-sm); flex-wrap: wrap; } .btn-group-vertical { display: flex; flex-direction: column; gap: var(--spacing-sm); } .btn-group-center { display: flex; justify-content: center; gap: var(--spacing-sm); flex-wrap: wrap; } .btn-group-right { display: flex; justify-content: flex-end; gap: var(--spacing-sm); flex-wrap: wrap; } /* 全宽按钮 */ .btn-block { display: block; width: 100%; } /* ============================================ 3. 表单样式 (统一所有表单元素) ============================================ */ /* 表单组 */ .form-group { margin-bottom: var(--spacing-lg); } .form-group label { display: block; margin-bottom: var(--spacing-sm); font-size: 14px; font-weight: 500; color: var(--text-primary); } .form-group label.required::after { content: " *"; color: var(--color-danger); } /* 表单控件 */ .form-control { display: block; width: 100%; padding: 10px 12px; font-size: 14px; line-height: 1.5; color: var(--text-primary); background-color: var(--color-white); border: 1px solid var(--border-color); border-radius: var(--radius-md); transition: border-color var(--transition-fast); box-sizing: border-box; } .form-control:focus { outline: none; border-color: var(--color-secondary); box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1); } .form-control:disabled, .form-control[readonly] { background-color: var(--color-gray-100); cursor: not-allowed; } .form-control.is-invalid { border-color: var(--color-danger); } .form-control.is-valid { border-color: var(--color-success); } /* 表单控件尺寸 */ .form-control-sm { padding: 6px 10px; font-size: 12px; } .form-control-lg { padding: 12px 16px; font-size: 16px; } /* 文本域 */ textarea.form-control { min-height: 80px; resize: vertical; } /* 选择框 */ select.form-control { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 30px; } /* 复选框和单选框 */ .form-check { display: flex; align-items: center; margin-bottom: var(--spacing-sm); } .form-check-input { width: 18px; height: 18px; margin-right: var(--spacing-sm); cursor: pointer; } .form-check-label { margin-bottom: 0; cursor: pointer; font-weight: normal; } /* 文件上传 */ .form-file { position: relative; } .form-file-input { position: absolute; opacity: 0; width: 0; height: 0; } .form-file-label { display: inline-block; padding: 8px 12px; background-color: var(--color-white); border: 1.5px solid var(--border-color); border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition-normal); } .form-file-label:hover { border-color: var(--color-primary); background-color: var(--color-gray-50); } /* 表单验证提示 */ .invalid-feedback { display: block; margin-top: var(--spacing-xs); font-size: 12px; color: var(--color-danger); } .valid-feedback { display: block; margin-top: var(--spacing-xs); font-size: 12px; color: var(--color-success); } /* ============================================ 4. 表格样式 (统一所有表格) ============================================ */ .table { width: 100%; border-collapse: collapse; background-color: var(--color-white); font-size: 14px; } .table th, .table td { padding: 12px; text-align: left; border-bottom: 1px solid var(--border-color); vertical-align: middle; } .table thead th { background-color: var(--color-gray-100); font-weight: 600; color: var(--text-primary); border-bottom: 2px solid var(--border-color-dark); } .table tbody tr:hover { background-color: var(--bg-hover); } .table tbody tr:last-child td { border-bottom: none; } /* 表格变体 */ .table-bordered { border: 1px solid var(--border-color); } .table-bordered th, .table-bordered td { border: 1px solid var(--border-color); } .table-striped tbody tr:nth-child(odd) { background-color: var(--color-gray-50); } .table-hover tbody tr:hover { background-color: var(--bg-hover); } /* 表格尺寸 */ .table-sm th, .table-sm td { padding: 6px 8px; font-size: 12px; } .table-lg th, .table-lg td { padding: 16px; font-size: 16px; } /* 表格响应式容器 */ .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* 表格文本对齐 */ .table .text-center { text-align: center; } .table .text-right { text-align: right; } /* ============================================ 5. 卡片样式 (统一容器) ============================================ */ .card { background-color: var(--bg-container); border: 1px solid var(--border-color); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); overflow: hidden; } .card-header { padding: var(--spacing-lg); background-color: var(--color-gray-50); border-bottom: 1px solid var(--border-color); font-weight: 600; } .card-body { padding: var(--spacing-xl); } .card-footer { padding: var(--spacing-lg); background-color: var(--color-gray-50); border-top: 1px solid var(--border-color); } .card-title { margin: 0 0 var(--spacing-md) 0; font-size: 18px; font-weight: 600; color: var(--text-primary); } /* ============================================ 6. 标题样式 (统一页面标题) ============================================ */ .page-title { font-size: 24px; font-weight: bold; color: var(--text-primary); text-align: center; margin-bottom: var(--spacing-xl); padding-bottom: var(--spacing-md); border-bottom: 2px solid var(--color-primary); } .section-title { font-size: 20px; font-weight: 600; color: var(--text-primary); margin-bottom: var(--spacing-lg); padding-bottom: var(--spacing-sm); border-bottom: 1px solid var(--border-color); } .subsection-title { font-size: 16px; font-weight: 600; color: var(--text-primary); margin-bottom: var(--spacing-md); } /* ============================================ 7. 容器和布局 ============================================ */ .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: var(--spacing-xl); background-color: var(--bg-container); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); box-sizing: border-box; } .container-fluid { width: 100%; padding: var(--spacing-xl); box-sizing: border-box; } /* 网格系统 */ .row { display: flex; flex-wrap: wrap; margin: 0 calc(var(--spacing-md) * -1); } .col { flex: 1; padding: 0 var(--spacing-md); } .col-auto { flex: 0 0 auto; padding: 0 var(--spacing-md); } /* ============================================ 8. 工具类 (常用辅助类) ============================================ */ /* 文本对齐 */ .text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; } /* 文本颜色 */ .text-primary { color: var(--color-primary); } .text-secondary { color: var(--color-secondary); } .text-success { color: var(--color-success); } .text-danger { color: var(--color-danger); } .text-warning { color: var(--color-warning); } .text-muted { color: var(--text-muted); } /* 背景色 */ .bg-primary { background-color: var(--color-primary); } .bg-secondary { background-color: var(--color-secondary); } .bg-success { background-color: var(--color-success); } .bg-danger { background-color: var(--color-danger); } .bg-warning { background-color: var(--color-warning); } .bg-light { background-color: var(--color-gray-100); } /* 间距 */ .m-0 { margin: 0; } .mt-1 { margin-top: var(--spacing-xs); } .mt-2 { margin-top: var(--spacing-sm); } .mt-3 { margin-top: var(--spacing-md); } .mt-4 { margin-top: var(--spacing-lg); } .mt-5 { margin-top: var(--spacing-xl); } .mb-1 { margin-bottom: var(--spacing-xs); } .mb-2 { margin-bottom: var(--spacing-sm); } .mb-3 { margin-bottom: var(--spacing-md); } .mb-4 { margin-bottom: var(--spacing-lg); } .mb-5 { margin-bottom: var(--spacing-xl); } .p-0 { padding: 0; } .p-1 { padding: var(--spacing-xs); } .p-2 { padding: var(--spacing-sm); } .p-3 { padding: var(--spacing-md); } .p-4 { padding: var(--spacing-lg); } .p-5 { padding: var(--spacing-xl); } /* 显示 */ .d-none { display: none; } .d-block { display: block; } .d-inline { display: inline; } .d-inline-block { display: inline-block; } .d-flex { display: flex; } /* Flex */ .flex-row { flex-direction: row; } .flex-column { flex-direction: column; } .justify-start { justify-content: flex-start; } .justify-center { justify-content: center; } .justify-end { justify-content: flex-end; } .justify-between { justify-content: space-between; } .align-start { align-items: flex-start; } .align-center { align-items: center; } .align-end { align-items: flex-end; } /* 圆角 */ .rounded { border-radius: var(--radius-md); } .rounded-sm { border-radius: var(--radius-sm); } .rounded-lg { border-radius: var(--radius-lg); } .rounded-circle { border-radius: var(--radius-round); } /* 阴影 */ .shadow-sm { box-shadow: var(--shadow-sm); } .shadow { box-shadow: var(--shadow-md); } .shadow-lg { box-shadow: var(--shadow-lg); } /* ============================================ 10. 图片上传和预览样式（统一相机拍照、上传图片功能） ============================================ */ /* 图片上传区域 */ .upload-area { border: 2px dashed var(--border-color); border-radius: var(--radius-lg); padding: var(--spacing-xl); text-align: center; background-color: var(--color-gray-50); transition: all var(--transition-normal); cursor: pointer; } .upload-area:hover { border-color: var(--color-primary); background-color: rgba(76, 175, 80, 0.05); } .upload-area.dragover { border-color: var(--color-primary); background-color: rgba(76, 175, 80, 0.1); } /* 图片预览容器 */ .image-preview-container { display: flex; flex-wrap: wrap; gap: var(--spacing-md); margin: var(--spacing-md) 0; } .image-preview-item { position: relative; width: 120px; height: 90px; overflow: hidden; border: 1px solid var(--border-color); border-radius: var(--radius-md); background-color: var(--color-white); box-shadow: var(--shadow-sm); transition: all var(--transition-normal); } .image-preview-item:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .preview-image { width: 100%; height: 100%; object-fit: cover; cursor: pointer; display: block; } /* 删除图片按钮（统一样式） */ .delete-image-btn { position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; background-color: var(--color-danger); color: var(--text-white); border: 2px solid var(--color-white); border-radius: 50%; font-size: 14px; font-weight: bold; line-height: 20px; text-align: center; cursor: pointer; transition: all var(--transition-fast); z-index: 10; display: flex; align-items: center; justify-content: center; padding: 0; box-shadow: var(--shadow-sm); } .delete-image-btn:hover { background-color: #d32f2f; transform: scale(1.1); box-shadow: var(--shadow-md); } .delete-image-btn:active { transform: scale(0.95); } /* 图片网格布局 */ .image-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--spacing-md); margin: var(--spacing-md) 0; } .image-grid .image-item { position: relative; width: 100%; aspect-ratio: 4/3; overflow: hidden; border: 1px solid var(--border-color); border-radius: var(--radius-md); background-color: var(--color-white); box-shadow: var(--shadow-sm); } .image-grid .image-item img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ============================================ 11. 手写签名样式（统一签名功能） ============================================ */ .signature-container { margin: var(--spacing-lg) 0; padding: var(--spacing-md); border: 1px solid var(--border-color); border-radius: var(--radius-lg); background-color: var(--color-white); } .signature-canvas { border: 2px solid var(--border-color); border-radius: var(--radius-md); background-color: var(--color-white); cursor: crosshair; touch-action: none; max-width: 100%; width: 100%; height: auto; } .signature-actions { display: flex; gap: var(--spacing-sm); margin-top: var(--spacing-md); flex-wrap: wrap; } /* ============================================ 12. 响应式设计增强 ============================================ */ @media (max-width: 768px) { .container { padding: var(--spacing-md); border-radius: 0; box-shadow: none; } .page-title { font-size: 18px; } .section-title { font-size: 16px; } .btn { width: 100%; margin-bottom: var(--spacing-sm); } .btn-group, .btn-group-center, .btn-group-right { flex-direction: column; width: 100%; } .table { font-size: 12px; } .table th, .table td { padding: 8px 6px; } .form-control { font-size: 16px; /* 防止iOS缩放 */ } /* 移动端图片预览调整 */ .image-preview-item { width: 100px; height: 75px; } .delete-image-btn { width: 20px; height: 20px; font-size: 12px; top: -6px; right: -6px; } /* 移动端签名画布占满宽度 */ .signature-canvas { max-width: 100% !important; width: 100% !important; } } @media (max-width: 480px) { .container { padding: var(--spacing-sm); } .page-title { font-size: 16px; } .table { font-size: 11px; } .table th, .table td { padding: 6px 4px; } /* 超小屏幕图片预览 */ .image-preview-item { width: 80px; height: 60px; } }