/* ============================================================ 进销存系统 公共样式 主题系统: 通过 切换 ============================================================ */ * { box-sizing: border-box; } :root { --brand: #6366f1; --brand-2: #8b5cf6; --brand-deep: #4f46e5; --brand-rgb: 99, 102, 241; --bg: #f1f5f9; --card: #ffffff; --border: #e2e8f0; --text: #1e293b; --text-2: #64748b; --text-3: #94a3b8; --sidebar: #1e293b; --grad: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); --shadow: 0 1px 3px rgba(0,0,0,.05); } html[data-theme="emerald"] { --brand: #10b981; --brand-2: #14b8a6; --brand-deep: #059669; --brand-rgb: 16, 185, 129; --bg: #f0faf5; --border: #d1fae5; --sidebar: #064e3b; --grad: linear-gradient(135deg, #10b981 0%, #14b8a6 100%); } html[data-theme="sunset"] { --brand: #f59e0b; --brand-2: #f43f5e; --brand-deep: #d97706; --brand-rgb: 245, 158, 11; --bg: #fff7ed; --border: #fed7aa; --sidebar: #431407; --grad: linear-gradient(135deg, #f59e0b 0%, #f43f5e 100%); } body { margin: 0; font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; background: var(--bg); color: var(--text); } [v-cloak] { display: none; } /* ===== Element Plus 主题变量 ===== */ :root { --el-color-primary: var(--brand); --el-color-primary-light-3: color-mix(in srgb, var(--brand) 70%, #fff); --el-color-primary-light-5: color-mix(in srgb, var(--brand) 50%, #fff); --el-color-primary-light-7: color-mix(in srgb, var(--brand) 30%, #fff); --el-color-primary-light-8: color-mix(in srgb, var(--brand) 20%, #fff); --el-color-primary-light-9: color-mix(in srgb, var(--brand) 10%, #fff); --el-color-primary-dark-2: var(--brand-deep); --el-border-radius-base: 8px; --el-border-radius-small: 6px; } html[data-theme="emerald"] { --el-color-primary: #10b981; --el-color-primary-dark-2: #059669; } html[data-theme="sunset"] { --el-color-primary: #f59e0b; --el-color-primary-dark-2: #d97706; } /* ===== 按钮美化 ===== */ .el-button { border-radius: 8px; font-weight: 500; transition: all .2s ease; } .el-button--primary { background: var(--grad); border: none; box-shadow: 0 4px 12px rgba(var(--brand-rgb), .3); } .el-button--primary:hover, .el-button--primary:focus { background: var(--grad); filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(var(--brand-rgb), .4); } .el-button--primary.is-plain, .el-button--primary.is-text { background: transparent; box-shadow: none; } .el-button:not(.el-button--text):not(.el-button--primary):not(.el-button--info):not(.el-button--success):not(.el-button--warning):not(.el-button--danger) { border-color: var(--border); color: var(--text-2); } .el-button--primary.is-link { color: var(--brand); background: none; box-shadow: none; } .el-button--primary.is-link:hover { color: var(--brand-deep); } /* ===== 表格美化 ===== */ .el-table { --el-table-header-bg-color: #f8fafc; --el-table-border-color: var(--border); border-radius: 10px; overflow: hidden; } .el-table th.el-table__cell { color: var(--text-2); font-weight: 600; } .el-table .el-table__row:hover > td.el-table__cell { background: rgba(var(--brand-rgb), .04); } .el-pagination.is-background .el-pager li.is-active { background: var(--brand); border-radius: 8px; } /* ===== 输入框/选择器 ===== */ .el-input__wrapper, .el-select__wrapper { border-radius: 8px; } .el-input__wrapper { box-shadow: 0 0 0 1px var(--border) inset; } .el-input__wrapper.is-focus { box-shadow: 0 0 0 1px var(--brand) inset; } /* ===== 卡片 ===== */ .table-card, .stat-card, .chart-card, .pos-left, .pos-right { box-shadow: var(--shadow); border: 1px solid var(--border); } /* ===== 标签 ===== */ .el-tag { border-radius: 6px; } /* ===== 弹窗 ===== */ .el-dialog { border-radius: 14px; overflow: hidden; } /* ===== 菜单激活项 ===== */ .el-menu .el-menu-item.is-active { background: rgba(var(--brand-rgb), .15) !important; } /* ===== 登录页 ===== */ .login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--grad); position: relative; overflow: hidden; } .login-wrap::before, .login-wrap::after { content: ''; position: absolute; border-radius: 50%; filter: blur(60px); opacity: .4; } .login-wrap::before { width: 300px; height: 300px; background: rgba(255,255,255,.25); top: -60px; left: -60px; } .login-wrap::after { width: 360px; height: 360px; background: rgba(255,255,255,.15); bottom: -80px; right: -60px; } .login-box { background: rgba(255,255,255,.97); backdrop-filter: blur(10px); border-radius: 20px; padding: 44px 40px; width: 400px; box-shadow: 0 25px 80px rgba(0,0,0,.35); position: relative; z-index: 2; animation: loginIn .5s ease; } @keyframes loginIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .login-brand { text-align: center; margin-bottom: 30px; } .login-brand .logo { font-size: 44px; } .login-brand h1 { font-size: 22px; margin: 8px 0 4px; color: #0f172a; } .login-brand p { font-size: 12px; color: #94a3b8; letter-spacing: 1px; } .login-tip { text-align: center; color: #94a3b8; font-size: 12px; margin-top: 18px; } /* ===== 布局 ===== */ .layout { height: 100vh; } .aside { background: var(--sidebar); display: flex; flex-direction: column; position: relative; z-index: 100; } .brand { display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 18px; color: #fff; font-weight: 700; font-size: 15px; border-bottom: 1px solid rgba(255,255,255,.08); flex-shrink: 0; } .logo-s { font-size: 22px; } .menu { border-right: none !important; flex: 1; overflow-y: auto; } .menu::-webkit-scrollbar { width: 4px; } .menu::-webkit-scrollbar-thumb { background: rgba(255,255,255,.25); border-radius: 2px; } /* ===== 侧边栏: 一级菜单悬停 -> 右侧弹出二级菜单 ===== */ .menu-flyout { flex: 1; padding: 8px 10px; overflow: visible; } .mf-item { position: relative; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 8px; cursor: pointer; color: #94a3b8; font-size: 14px; transition: .15s; user-select: none; } .mf-item:hover, .mf-item.open { background: rgba(255,255,255,.1); color: #fff; } .mf-item.on { background: rgba(99,102,241,.3); color: #fff; } .mf-item .mi svg { width: 18px; height: 18px; } .mf-arrow { margin-left: auto; opacity: .7; } .mf-arrow svg { width: 12px; height: 12px; } .mf-pop { position: fixed; min-width: 190px; max-height: calc(100vh - 120px); overflow-y: auto; background: #fff; border: 1px solid #eef2f7; border-radius: 10px; padding: 6px; box-shadow: 0 10px 28px rgba(15,23,42,.18); z-index: 3000; } .mf-pop-title { font-size: 11px; font-weight: 700; color: #94a3b8; padding: 6px 10px 8px; margin-bottom: 4px; border-bottom: 1px solid #f1f5f9; } .mf-pop-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 8px; font-size: 13px; color: #475569; cursor: pointer; white-space: nowrap; transition: .12s; } .mf-pop-item:hover { background: #eef2ff; color: #4f46e5; } .mf-pop-item.on { background: #4f46e5; color: #fff; } .mf-pop-item .mi svg { width: 16px; height: 16px; } .mi { margin-right: 6px; display: inline-flex; vertical-align: middle; } .mi svg { width: 18px; height: 18px; } .el-menu-item .mi, .el-sub-menu__title .mi { color: inherit; opacity: .85; } .el-menu-item.is-active .mi { opacity: 1; } .header { background: var(--card); display: flex; align-items: center; justify-content: space-between; box-shadow: 0 1px 4px rgba(0,0,0,.06); z-index: 5; } .page-title { font-size: 17px; font-weight: 700; } .header-right { display: flex; align-items: center; gap: 18px; } .user-chip { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; color: var(--text-2); outline: none; } .msg-badge { margin-right: 4px; } .main { padding: 16px; overflow-y: auto; background: var(--bg); } /* ===== 卡片与工具栏 ===== */ .filter-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; align-items: center; } .filter-bar .el-input, .filter-bar .el-select { width: 180px; } .table-card { background: #fff; border-radius: 10px; padding: 16px; box-shadow: 0 1px 3px rgba(0,0,0,.05); } .pager { display: flex; justify-content: flex-end; margin-top: 12px; } .stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 14px; } .stat-card { background: #fff; border-radius: 12px; padding: 18px; display: flex; align-items: center; gap: 14px; box-shadow: 0 1px 3px rgba(0,0,0,.05); transition: .2s; } .stat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.08); } /* 统计卡图标: 渐变底 + 白色线性图标(颜色由卡片内联 --c1/--c2/--sh 控制) */ .stat-icon { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #fff; background: linear-gradient(135deg, var(--c1, #6366f1), var(--c2, #8b5cf6)); box-shadow: 0 6px 14px var(--sh, rgba(99, 102, 241, .28)); transition: transform .25s ease, box-shadow .25s ease; } .stat-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .stat-card:hover .stat-icon { transform: scale(1.08) rotate(-3deg); } .stat-info .label { color: #94a3b8; font-size: 12px; } .stat-info .value { font-size: 22px; font-weight: 700; margin-top: 2px; letter-spacing: -.3px; } .chart-card { background: #fff; border-radius: 12px; padding: 16px; box-shadow: 0 1px 3px rgba(0,0,0,.05); margin-bottom: 14px; } .chart-box { height: 300px; } /* ===== 开单页 ===== */ .pos-wrap { display: grid; grid-template-columns: 1fr 360px; gap: 14px; height: calc(100vh - 120px); } .pos-left, .pos-right { background: #fff; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.05); padding: 14px; overflow-y: auto; } .pos-right { display: flex; flex-direction: column; } .pos-cart-list { flex: 1; min-height: 120px; max-height: none; overflow-y: auto; } .pos-footer { flex-shrink: 0; } .pos-goods-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-top: 10px; } .pos-goods { border: 1px solid #e2e8f0; border-radius: 10px; padding: 10px; cursor: pointer; transition: .15s; } .pos-goods:hover { border-color: #6366f1; box-shadow: 0 4px 12px rgba(99,102,241,.15); } .pos-goods .g-name { font-size: 13px; font-weight: 600; height: 36px; overflow: hidden; } .pos-goods .g-price { color: #ef4444; font-weight: 700; } .pos-goods .g-stock { color: #94a3b8; font-size: 11px; } /* 购物车商品卡片: 上=概览(图/名称/单价×数量/金额/删除) 下=操作(赠品/单价/数量) */ .pos-cart-item { border: 1px solid #eef2f7; border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; background: #fff; transition: .15s; } .pos-cart-item:hover { border-color: #c7d2fe; box-shadow: 0 2px 8px rgba(99,102,241,.1); } .pos-cart-item.gift { background: #fff8f8; border-color: #fecaca; } .ci-head { display: flex; align-items: center; gap: 10px; } .ci-img { width: 38px; height: 38px; border-radius: 8px; background: #f1f5f9; overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 18px; } .ci-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .ci-info { flex: 1; min-width: 0; } .ci-name { display: flex; align-items: center; gap: 5px; min-width: 0; font-size: 13px; font-weight: 600; color: #1e293b; } .ci-name .el-tag { flex-shrink: 0; height: 18px; padding: 0 4px; line-height: 16px; } .ci-name-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ci-sub { font-size: 11px; color: #94a3b8; margin-top: 3px; } .ci-amt { text-align: right; flex-shrink: 0; } .ci-amt-val { font-size: 15px; font-weight: 700; color: #ef4444; line-height: 1.2; } .ci-amt-val.zero { color: #f59e0b; } .ci-amt-orig { font-size: 11px; color: #cbd5e1; text-decoration: line-through; } .ci-del { width: 22px; height: 22px; padding: 0; border: none; background: transparent; color: #cbd5e1; font-size: 12px; cursor: pointer; border-radius: 6px; flex-shrink: 0; } .ci-del:hover { background: #fee2e2; color: #ef4444; } .ci-ops { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed #eef2f7; } .ci-op { display: flex; align-items: center; gap: 3px; } .ci-op-label { font-size: 12px; color: #94a3b8; font-weight: 600; } .pos-footer { border-top: 2px solid #f1f5f9; margin-top: 10px; padding-top: 10px; } .pos-total { font-size: 13px; color: #64748b; display: flex; justify-content: space-between; margin: 4px 0; } .pos-pay { font-size: 20px; font-weight: 800; color: #ef4444; display: flex; justify-content: space-between; } /* ===== 打印预览 ===== */ .print-preview { max-height: 60vh; overflow: auto; background: #f8fafc; padding: 16px; border-radius: 8px; display: flex; justify-content: center; } .pt-barcode { display: block; } /* ===== 打印模板可视化编辑器 ===== */ .tpl-editor-dialog .el-dialog__body { max-height: 74vh; overflow-y: auto; padding-bottom: 20px; } .tpl-field-panel { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px; border: 1px dashed #c7d2fe; border-radius: 8px; background: #f5f7ff; width: 100%; } .tpl-field-panel .el-button { margin-left: 0; } .tpl-rows { border: 1px solid #e2e8f0; border-radius: 8px; padding: 8px; max-height: 46vh; overflow-y: auto; background: #f8fafc; } .tpl-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; background: #fff; border: 1px solid #e2e8f0; border-radius: 6px; margin-bottom: 6px; } .tpl-row.on { border-color: #f59e0b; background: #fffbeb; } .tpl-row-left { display: flex; align-items: center; gap: 8px; flex: 1; flex-wrap: wrap; } .tpl-row-right { display: flex; align-items: center; gap: 4px; } .tpl-badge { font-size: 11px; padding: 2px 6px; border-radius: 4px; color: #fff; flex-shrink: 0; } .tpl-badge.field { background: #6366f1; } .tpl-badge.text { background: #64748b; } .tpl-badge.divider { background: #94a3b8; } .tpl-badge.goods { background: #f59e0b; } .tpl-field-name { font-size: 13px; color: #1e293b; font-weight: 600; } .tpl-empty { color: #cbd5e1; text-align: center; padding: 30px 0; font-size: 13px; } .tpl-preview { border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden; } .tpl-preview-head { padding: 8px 12px; background: #f1f5f9; font-size: 13px; font-weight: 600; color: #475569; border-bottom: 1px solid #e2e8f0; } .tpl-preview-body { min-height: 200px; padding: 10px; background: #fff; font-family: Consolas, monospace; font-size: 12px; color: #000; line-height: 1.5; overflow: auto; max-height: 46vh; } .el-table .cell { font-size: 13px; } .el-dialog__header { margin-right: 0; } .tag-radius { border-radius: 6px; } /* ===== 高效开单 POS 增强 ===== */ .pos-cats { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 10px; } .cat-item { padding: 5px 12px; border-radius: 16px; background: #f1f5f9; font-size: 12px; color: #475569; cursor: pointer; transition: .15s; white-space: nowrap; } .cat-item:hover { background: #e0e7ff; } .cat-item.on { background: #6366f1; color: #fff; } .cat-count { margin-left: 4px; font-size: 10px; opacity: .7; } .cat-sep { width: 1px; height: 22px; background: #e2e8f0; margin: 0 2px; } .g-spec { font-size: 10px; color: #94a3b8; font-weight: 400; display: block; } .g-line { display: flex; justify-content: space-between; align-items: center; margin-top: 5px; } .g-stock.low { color: #ef4444; font-weight: 600; } .pos-load-more { text-align: center; margin-top: 8px; } .pos-quick-pay { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 10px 0; } .pos-quick-pay .el-button { margin-left: 0; padding: 12px 0; font-size: 13px; } .pos-goods { position: relative; } .pos-goods .g-name { font-weight: 600; } .pos-g-img { height: 70px; margin-bottom: 6px; display: flex; align-items: center; justify-content: center; background: #f8fafc; border-radius: 6px; overflow: hidden; } .pos-g-img img { max-width: 100%; max-height: 100%; object-fit: contain; } .pos-g-img-empty { font-size: 30px; opacity: .4; } /* ===== 主题选择器 ===== */ .theme-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .theme-card { border: 2px solid var(--border); border-radius: 12px; cursor: pointer; overflow: hidden; transition: .2s; background: #fff; } .theme-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,.1); } .theme-card.on { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .2); } .theme-card .th-preview { height: 72px; position: relative; display: flex; } .theme-card .th-side { width: 40%; height: 100%; display: flex; flex-direction: column; padding: 8px 6px; } .theme-card .th-main { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 10px 8px; background: #f1f5f9; } .theme-card .th-bar { height: 6px; border-radius: 3px; background: rgba(255,255,255,.4); } .theme-card .th-btn { width: 50%; height: 14px; border-radius: 6px; } .theme-card .th-dot { width: 10px; height: 10px; border-radius: 50%; align-self: flex-end; } .theme-card .th-name { text-align: center; padding: 8px; font-size: 13px; font-weight: 600; color: var(--text); position: relative; } .theme-card.on .th-name::after { content: '✓'; position: absolute; right: 10px; color: var(--brand); font-weight: 800; } .theme-card .th-desc { text-align: center; padding: 0 8px 8px; font-size: 11px; color: var(--text-3); } /* 主题选择器应用到元素 */ .theme-card[data-t="indigo"] .th-side { background: linear-gradient(180deg,#1e293b,#334155); } .theme-card[data-t="indigo"] .th-btn { background: linear-gradient(135deg,#6366f1,#8b5cf6); } .theme-card[data-t="indigo"] .th-dot { background: #8b5cf6; } .theme-card[data-t="emerald"] .th-side { background: linear-gradient(180deg,#064e3b,#065f46); } .theme-card[data-t="emerald"] .th-btn { background: linear-gradient(135deg,#10b981,#14b8a6); } .theme-card[data-t="emerald"] .th-dot { background: #14b8a6; } .theme-card[data-t="sunset"] .th-side { background: linear-gradient(180deg,#431407,#7c2d12); } .theme-card[data-t="sunset"] .th-btn { background: linear-gradient(135deg,#f59e0b,#f43f5e); } .theme-card[data-t="sunset"] .th-dot { background: #f43f5e; }