From 8634549dd3839c2e9945c5c5a603160822265865 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=A0=82=E7=B3=96?= Date: Thu, 28 Aug 2025 15:06:03 +0800 Subject: [PATCH] =?UTF-8?q?=E6=94=B9=E4=B8=BA=E6=9A=97=E8=89=B2=E9=A3=8E?= =?UTF-8?q?=E6=A0=BC=E4=B8=BB=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- klp-ui/src/assets/styles/btn.scss | 14 + klp-ui/src/assets/styles/element-ui.scss | 1454 +++++++++++++---- klp-ui/src/assets/styles/sidebar.scss | 121 +- klp-ui/src/components/KLPUI/KLPList/index.vue | 10 +- .../KLPUI/KLPTable/ColumnRender.vue | 23 + .../src/components/KLPUI/KLPTable/index.vue | 79 +- .../KLPUI/KLPTable/renderer/eclipse.vue | 34 + klp-ui/src/layout/components/Navbar.vue | 43 +- .../src/layout/components/TagsView/index.vue | 74 +- klp-ui/src/views/index.vue | 1 - klp-ui/src/views/wms/order/customer.vue | 64 +- klp-ui/src/views/wms/rxgood/detail.vue | 104 +- klp-ui/src/views/wms/rxgood/index.vue | 86 +- 13 files changed, 1662 insertions(+), 445 deletions(-) create mode 100644 klp-ui/src/components/KLPUI/KLPTable/ColumnRender.vue create mode 100644 klp-ui/src/components/KLPUI/KLPTable/renderer/eclipse.vue diff --git a/klp-ui/src/assets/styles/btn.scss b/klp-ui/src/assets/styles/btn.scss index 45f65930..49a40e86 100644 --- a/klp-ui/src/assets/styles/btn.scss +++ b/klp-ui/src/assets/styles/btn.scss @@ -97,3 +97,17 @@ font-size: 14px; border-radius: 2px; } + + +.el-table__cell { + padding: 0 !important; +} + +.el-table__cell .el-button { + padding: 0 !important; +} + +.el-table__cell + .el-button { + margin-left: 4px !important; + padding: 0; +} \ No newline at end of file diff --git a/klp-ui/src/assets/styles/element-ui.scss b/klp-ui/src/assets/styles/element-ui.scss index e06f013f..d83e5318 100644 --- a/klp-ui/src/assets/styles/element-ui.scss +++ b/klp-ui/src/assets/styles/element-ui.scss @@ -1,278 +1,1174 @@ -/* 基础变量定义 - 工业风浅色配色 */ +// ====================== 1. 基础颜色变量（Sass直接处理）====================== +$primary-base: #5F7BA0; /* 工业蓝灰（主色原始值） */ +$success-base: #2ECC71; /* 成功色原始值 */ +$warning-base: #E67E22; /* 警告色原始值 */ +$danger-base: #E74C3C; /* 危险色原始值 */ +$info-base: #AEB6BF; /* 次主色原始值 */ + +// 背景色原始值 +$background-base: #2B2F36; +$background-light-base: lighten($background-base, 5%); +$background-lighter-base: lighten($background-base, 10%); +$panel-bg-base: #3A3F45; +$table-bg-base: #1E2227; + +// 边框色原始值（新增基础边框色变量） +$border-color-base: #6E757D; +$border-color-light: #828991; +$border-color-lighter: #9AA1A9; + + +// ====================== 2. 间距/尺寸变量（Sass变量）====================== +$--spacing-sm: 4px; +$--spacing-base: 8px; +$--spacing-md: $--spacing-base; +$--spacing-lg: $--spacing-base * 2; +$--form-item-margin: $--spacing-base; +$--btn-height: 24px; + +// 关键修复：添加缺失的$--border-color变量，指向基础边框色 +$--border-color: $border-color-base; + + +// ====================== 3. CSS变量（与Sass变量同步）====================== :root { - --secondary-color: #78909c; /* 辅助色 */ - --accent-color: #e67e22; /* 强调色，用于突出按钮和重要操作 */ - --background-color: #f5f7fa; /* 浅色背景 */ - --card-bg-color: #ffffff; /* 卡片背景 */ - --border-color: #cfd8dc; /* 边框颜色 */ - --text-primary: #263238; /* 主要文本色 */ - --text-secondary: #546e7a; /* 次要文本色 */ - --spacing-sm: 4px; - --spacing-md: 8px; - --spacing-lg: 16px; - --spacing-base: 8px; /* 基础间距，表单、表格统一用这个值做倍数调整 */ - --form-item-margin: var(--spacing-base); /* 表单项底部间距 */ - --btn-height: 24px; /* 按钮统一高度 */ + /* 颜色体系 - 同步自Sass原始变量 */ + --color-primary: #{$primary-base}; + --color-success: #{$success-base}; + --color-warning: #{$warning-base}; + --color-danger: #{$danger-base}; + --color-info: #{$info-base}; + + /* 背景层级 */ + --color-background: #{$background-base}; + --color-background-light: #{$background-light-base}; + --color-background-lighter: #{$background-lighter-base}; + --panel-bg: #{$panel-bg-base}; + --table-bg: #{$table-bg-base}; + + /* 文本色 */ + --color-text-primary: #FFFFFF; + --color-text-regular: #EAEAEA; + --color-text-secondary: #B6BDC5; + --color-text-placeholder: #8A9098; + + /* 边框色 */ + --border-color-base: #{$border-color-base}; + --border-color-light: #{$border-color-light}; + --border-color-lighter: #{$border-color-lighter}; + --border-color: #{$--border-color}; /* 同步新增的边框色变量 */ + + /* 间距/尺寸体系 */ + --spacing-sm: #{$--spacing-sm}; + --spacing-base: #{$--spacing-base}; + --spacing-md: #{$--spacing-md}; + --spacing-lg: #{$--spacing-lg}; + --form-item-margin: #{$--form-item-margin}; + --btn-height: #{$--btn-height}; + + /* 金属质感变量 */ + --metal-gradient-light: linear-gradient(145deg, #3E434A, #363B41); + --metal-gradient-dark: linear-gradient(145deg, #363B41, #3E434A); + --metal-highlight: rgba(255,255,255,.14); + --metal-shadow: 5px 5px 12px rgba(0,0,0,.22), -5px -5px 12px rgba(255,255,255,.06); + --metal-shadow-inset: inset 3px 3px 6px rgba(0,0,0,.28), inset -3px -3px 6px rgba(255,255,255,.06); } -/* 全局样式调整 */ + +// ====================== 4. Element UI适配变量 ======================= +$--color-primary: $primary-base !default; +$--color-success: $success-base !default; +$--color-warning: $warning-base !default; +$--color-danger: $danger-base !default; +$--color-info: $info-base !default; + +$--color-background: $background-base !default; +$--color-background-light: $background-light-base !default; +$--color-background-lighter: $background-lighter-base !default; +$--panel-bg: $panel-bg-base !default; +$--table-bg: $table-bg-base !default; + +$--color-text-primary: var(--color-text-primary) !default; +$--color-text-regular: var(--color-text-regular) !default; +$--color-text-secondary: var(--color-text-secondary) !default; +$--color-text-placeholder: var(--color-text-placeholder) !default; + +// 边框色变量（包括新增的$--border-color） +$--border-color-base: $border-color-base !default; +$--border-color-light: $border-color-light !default; +$--border-color-lighter: $border-color-lighter !default; +$--border-color: $--border-color !default; /* 关键修复：同步到Element变量 */ + +// 间距变量 +$--spacing-sm: $--spacing-sm !default; +$--spacing-base: $--spacing-base !default; +$--spacing-md: $--spacing-md !default; +$--spacing-lg: $--spacing-lg !default; +$--form-item-margin: $--form-item-margin !default; +$--btn-height: $--btn-height !default; + +$--metal-gradient-light: var(--metal-gradient-light) !default; +$--metal-gradient-dark: var(--metal-gradient-dark) !default; +$--metal-highlight: var(--metal-highlight) !default; +$--metal-shadow: var(--metal-shadow) !default; +$--metal-shadow-inset: var(--metal-shadow-inset) !default; + +// Element UI兼容变量 +$--font-color-primary: $--color-text-regular !default; +$--font-color-regular: $--color-text-regular !default; +$--font-color-secondary: $--color-text-secondary !default; +$--font-color-placeholder: $--color-text-placeholder !default; +$--color-loading: $--color-primary !default; + + +// ====================== 2. 全局样式 ====================== body { - background-color: var(--background-color); - color: var(--text-primary); + background: $--color-background; + color: $--color-text-regular; font-size: 14px; line-height: 1.5; + margin: 0; + padding: 0; } -/* 面包屑导航优化 */ -.el-breadcrumb { - padding: var(--spacing-md) 0; +// Element容器适配 +.el-container, +.el-main, +.el-aside, +.el-header, +.el-footer { + background: $--color-background; + color: $--color-text-regular; + border: none; } -.el-breadcrumb__inner, -.el-breadcrumb__inner a { - font-weight: 400 !important; - color: var(--text-secondary) !important; +// 标签页内容溢出修复 +.el-tabs__content { + overflow: visible !important; } -.el-breadcrumb__separator { - margin: 0 var(--spacing-sm); - color: var(--border-color); -} -/* 按钮样式优化 */ -.el-button { - padding: 8px 16px; - border-radius: 2px; +// ====================== 3. 组件样式（按优先级合并）====================== +// ---------------------- 3.1 按钮（金属质感 + 紧凑尺寸）---------------------- +@mixin button-variant($text-color, $border-color) { + color: $text-color; + background: $--metal-gradient-light; + border: 1px solid $border-color; + box-shadow: $--metal-shadow; + border-radius: 6px; + text-shadow: 0 1px 0 rgba(0,0,0,.16); + transition: all .25s ease; + height: $--btn-height; + padding: 0 var(--spacing-lg); font-size: 13px; - transition: all 0.2s ease; -} -.el-button--success { - background-color: #2ecc71; - border-color: #2ecc71; -} + &:hover, + &:focus { + color: $text-color; + background: $--metal-gradient-dark; + border-color: $--border-color-base; + box-shadow: 6px 6px 14px rgba(0,0,0,.28), -6px -6px 14px rgba(255,255,255,.08); + transform: translateY(-1px); + } -.el-button--warning { - background-color: var(--accent-color); - border-color: var(--accent-color); -} + &:active { + box-shadow: $--metal-shadow-inset; + transform: translateY(1px); + } -.el-button--mini { - padding: 4px 8px; - font-size: 12px; -} - -/* 卡片组件优化 */ -.el-card { - border-radius: 2px; - border: 1px solid var(--border-color); - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); - overflow: hidden; -} - -.el-card__header { - padding: var(--spacing-md) var(--spacing-lg); - border-bottom: 1px solid var(--border-color); - background-color: #f9fafb; -} - -.el-card__body { - padding: var(--spacing-lg); -} - -/* 表格样式优化 - 紧凑布局 */ -.el-table { - border: 1px solid var(--border-color); - border-radius: 2px; - margin-top: 0 !important; -} - -.el-table th, -.el-table td { - padding: 2px 4px; - font-size: 13px; -} - -.el-table--border th, -.el-table--border td { - border-right: 1px solid var(--border-color); -} - -.el-table--border thead tr:last-child th { - border-bottom: 1px solid var(--border-color); -} - -/* 输入框样式优化 */ -.el-input__inner, -.el-textarea__inner { - padding: 7px 11px; - border-radius: 2px; - border: 1px solid var(--border-color); - font-size: 13px; - transition: border-color 0.2s ease; -} - -.el-input__inner:focus, -.el-textarea__inner:focus { - border-color: var(--primary-color); - box-shadow: none; -} - -/* 下拉菜单优化 */ -.el-dropdown-menu { - border-radius: 2px; - border: 1px solid var(--border-color); - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); - padding: var(--spacing-sm) 0; -} - -.el-dropdown-menu__item { - padding: 6px 16px; - font-size: 13px; -} - -.el-dropdown-menu a { - display: block; -} - -/* 标签样式优化 */ -.el-tag { - padding: 2px 8px; - border-radius: 2px; - font-size: 12px; -} - -/* 上传组件优化 */ -.el-upload { - input[type="file"] { - display: none !important; + &.is-disabled, + &[disabled] { + opacity: .6; + filter: grayscale(.1); + box-shadow: none; + cursor: not-allowed; } } -.el-upload__input { - display: none; +// 主按钮（品牌梯度） +.el-button--primary { + @include button-variant(#fff, darken($--color-primary, 10%)); + background: linear-gradient(145deg, lighten($--color-primary,6%), darken($--color-primary,6%)); + border-color: darken($--color-primary,10%); + + &:hover { + background: linear-gradient(145deg, $--color-primary, darken($--color-primary,8%)); + } } -.upload-container { - .el-upload { - width: 100%; +// 功能按钮（统一风格） +.el-button--success { + @include button-variant(#fff, darken($--color-success, 10%)); + background: linear-gradient(145deg, lighten($--color-success,6%), darken($--color-success,6%)); +} +.el-button--warning { + @include button-variant(#fff, darken($--color-warning, 10%)); + background: linear-gradient(145deg, lighten($--color-warning,6%), darken($--color-warning,6%)); +} +.el-button--danger { + @include button-variant(#fff, darken($--color-danger, 10%)); + background: linear-gradient(145deg, lighten($--color-danger,6%), darken($--color-danger,6%)); +} +.el-button--info { + @include button-variant(#111, darken($--color-info, 10%)); + background: linear-gradient(145deg, lighten($--color-info,6%), darken($--color-info,6%)); +} - .el-upload-dragger { - width: 100%; - height: 200px; - border-radius: 2px; - border: 2px dashed var(--border-color); +// 文本按钮（低干扰） +.el-button--text { + color: $--color-text-secondary; + background: transparent; + border: none; + box-shadow: none; + height: auto; + padding: 4px 8px; + + &:hover { + color: $--color-primary; + background: rgba($--color-primary, .12); + transform: none; + } +} + +// 图标按钮（圆形紧凑） +.el-button--icon { + width: 36px; + height: 36px; + padding: 0; + border-radius: 8px; + + &:only-child { + padding: 0; + } +} + +// 按钮组（无缝衔接） +.el-button-group { + .el-button { + border-radius: 0; + margin: 0; + border-left: 1px solid $--border-color-lighter; + + &:first-child { + border-radius: 6px 0 0 6px; + border-left: none; + } + &:last-child { + border-radius: 0 6px 6px 0; + } + &:not(:last-child) { + border-right: none; } } } -/* 对话框样式优化 */ +// 迷你按钮（超紧凑） +.el-button--mini { + padding: 4px 8px; + font-size: 12px; + height: calc($--btn-height - 4px); +} + + +// ---------------------- 3.2 表格（深色交替 + 金属边框）---------------------- +.el-table { + background: $--table-bg; + border: 1px solid $--border-color-light; + border-radius: 8px; + box-shadow: $--metal-shadow; + color: $--color-text-regular; + overflow: hidden; + margin-top: calc($--form-item-margin * 2); // 与表单间距 + + // 分割线 + &::before { + background-color: $--border-color-lighter; + } + + // 表头（深灰黑 + 纯白文字） + .el-table__header-wrapper { + th { + background: #1F2227; + color: $--color-text-primary; + font-weight: 600; + border-bottom: 1px solid #444A52; + padding: 4px !important; // 紧凑 padding + height: auto; + font-size: 13px; + } + } + + // 表体（奇偶行交替 + hover高亮） + .el-table__body-wrapper { + .el-table__row { + // 奇数行 + &:nth-child(odd) .el-table__cell { + background: #2F3339; + color: #EAEAEA; + } + // 偶数行 + &:nth-child(even) .el-table__cell { + background: #353A40; + color: #EAEAEA; + } + // hover + &:hover .el-table__cell { + background: rgba($--color-primary, 0.25); + color: #888888; + } + // 当前行 + &.current-row .el-table__cell { + background: rgba($--color-primary, 0.35); + color: $--color-text-primary; + font-weight: 600; + } + } + + // 单元格（统一边框 + 紧凑 padding） + .el-table__cell { + border-bottom: 1px solid #444A52; + color: #EAEAEA; + padding: 2px 4px !important; // 超紧凑 + font-size: 13px; + } + } + + // 表尾 + .el-table__footer-wrapper { + border-top: 1px solid $--border-color-lighter; + + td { + background: linear-gradient(0deg, $--color-background-light, $--color-background); + color: $--color-text-secondary; + padding: 4px !important; + } + } + + // 列宽调整线 + .el-table__column-resize-proxy { + background-color: $--color-primary; + } + + // 展开图标 + .el-table__expand-icon { + color: $--color-text-secondary; + + &.is-expanded, + &:hover { + color: $--color-primary; + } + } + + // 适配尺寸类（统一紧凑） + &.el-table--medium .el-table__cell, + &.el-table--mini .el-table__cell { + padding: 0 !important; + } +} + +// 自定义表格工具类（补充紧凑） +.small-padding .cell { + padding-left: calc($--spacing-base / 2); + padding-right: calc($--spacing-base / 2); +} + +.status-col .cell { + padding: 0 10px !important; + text-align: center; +} + + +// ---------------------- 3.3 表单/输入（金属内阴影 + 统一高度）---------------------- +// 表单项布局 +.el-form-item { + margin-bottom: $--form-item-margin !important; + label-align: right; // 标签右对齐 + font-size: 13px; + + // 标签样式 + .el-form-item__label { + color: $--color-text-secondary; + padding-right: $--spacing-base; + font-size: 13px; + } + + // 搜索表单 inline 布局 + &.search-form-item { + display: inline-block; + margin-right: $--spacing-base; + vertical-align: middle; + } +} + +// 输入框（统一高度 + 金属内阴影） +.el-input { + height: $--btn-height; + + .el-input__inner { + background: $--metal-gradient-light; + border-color: $--border-color-light; + color: $--color-text-regular; + box-shadow: $--metal-shadow-inset; + border-radius: 0; + height: $--btn-height; + line-height: $--btn-height; + padding: 0 $--spacing-base; + font-size: 13px; + + &::placeholder { + color: $--color-text-placeholder; + } + + &:focus { + border-color: $--color-primary; + box-shadow: $--metal-shadow-inset, 0 0 0 2px rgba($--color-primary, .22); + } + } + + // 输入框图标 + .el-input__icon { + color: $--color-text-secondary; + height: $--btn-height; + line-height: $--btn-height; + + &:hover { + color: $--color-primary; + } + } + + // 尺寸适配（统一高度） + &.el-input--small .el-input__inner, + &.el-input--medium .el-input__inner, + &.el-input--large .el-input__inner { + height: $--btn-height; + line-height: $--btn-height; + } + + .el-input-group__append, + .el-input-group__prepend { + border-radius: 0; + border-left: 1px solid $--border-color-light; + background: $--metal-gradient-light; + color: $--color-text-regular; + box-shadow: $--metal-shadow-inset; + font-size: 13px; + } +} + +// 文本域 +.el-textarea .el-textarea__inner { + background: $--metal-gradient-light; + border-color: $--border-color-light; + color: $--color-text-regular; + box-shadow: $--metal-shadow-inset; + border-radius: 0; + padding: $--spacing-base; + font-size: 13px; + + &::placeholder { + color: $--color-text-placeholder; + } + + &:focus { + border-color: $--color-primary; + box-shadow: $--metal-shadow-inset, 0 0 0 2px rgba($--color-primary, .22); + } +} + +// 数字输入框 +.el-input-number { + .el-input__inner { + border-radius: 0; + } + + // 增减按钮 + .el-input-number__increase, + .el-input-number__decrease { + background: $--metal-gradient-light; + border-color: $--border-color-light; + box-shadow: $--metal-shadow; + transition: all .2s ease; + height: $--btn-height; + line-height: $--btn-height; + + &:hover { + background: $--metal-gradient-dark; + border-color: $--border-color-base; + box-shadow: 0 0 0 1px $--border-color-base; + } + + &.is-disabled { + background: $--color-background-lighter; + border-color: $--border-color-lighter; + color: $--color-text-placeholder; + cursor: not-allowed; + box-shadow: none; + } + } + + .el-input-number__increase { + border-radius: 0; + .el-icon-plus { + color: $--color-text-regular; + } + } + .el-input-number__decrease { + border-radius: 0; + .el-icon-minus { + color: $--color-text-regular; + } + } + + // 迷你尺寸 + &.el-input-number--small { + .el-input-number__increase, + .el-input-number__decrease { + width: 24px; + height: 24px; + } + } + + // 无控制按钮 + &.is-without-controls .el-input__inner { + border-radius: 0; + } +} + +// 选择器/下拉框 +.el-select { + .el-input__inner { + border-radius: 0; + } + + // 下拉面板 + .el-select-dropdown { + background: $--metal-gradient-light; + border: 1px solid $--border-color-light; + box-shadow: $--metal-shadow; + color: $--color-text-regular; + border-radius: 6px; + + .el-select-dropdown__item { + color: $--color-text-regular; + padding: 6px 16px; + font-size: 13px; + + &:hover { + background-color: rgba($--color-primary, .12); + } + &.selected { + background-color: rgba($--color-primary, .20); + color: #fff; + } + } + } +} + +// 开关 +.el-switch { + .el-switch__core { + background-color: $--border-color-base; + box-shadow: $--metal-shadow-inset; + } + + &.is-checked .el-switch__core { + background-color: $--color-primary; + } +} + +// 滑块 +.el-slider__bar { + background: $--metal-gradient-dark; +} +.el-slider__button { + background: $--metal-gradient-light; + border-color: $--border-color-light; + box-shadow: $--metal-shadow; +} + +// 复选框 +.el-checkbox { + .el-checkbox__inner { + background: $--metal-gradient-light; + border-color: $--border-color-light; + box-shadow: $--metal-shadow-inset; + border-radius: 4px; + } + + &.is-checked .el-checkbox__inner { + background: $--metal-gradient-dark; + border-color: $--border-color-base; + + &::after { + border-color: $--color-text-primary; + } + } +} + + +// ---------------------- 3.4 卡片/对话框（金属外阴影 + 层级）---------------------- +// 卡片 +.el-card { + background: $--metal-gradient-light; + border: 1px solid $--border-color-light; + box-shadow: $--metal-shadow; + border-radius: 8px; + color: $--color-text-regular; + overflow: hidden; + + // 卡片头部 + .el-card__header { + padding: $--spacing-md $--spacing-lg; + border-bottom: 1px solid $--border-color-lighter; + color: $--color-text-primary; + background: transparent; + } + + // 卡片主体 + .el-card__body { + padding: $--spacing-lg; + } +} + +// 对话框 .el-dialog { transform: none; left: 0; position: relative; - margin: 0 auto; - border-radius: 2px; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); -} + margin: 10vh auto 0; + background: $--metal-gradient-light; + border: 1px solid $--border-color-light; + box-shadow: $--metal-shadow; + border-radius: 8px; + color: $--color-text-regular; + width: 60% !important; // 自适应宽度 -.el-dialog__header { - padding: var(--spacing-lg); - border-bottom: 1px solid var(--border-color); -} + // 对话框头部 + .el-dialog__header { + padding: $--spacing-lg; + border-bottom: 1px solid $--border-color-lighter; + } -.el-dialog__body { - padding: var(--spacing-lg); -} + // 对话框主体 + .el-dialog__body { + padding: $--spacing-lg; + max-height: 60vh; + overflow-y: auto; + } -.el-dialog__footer { - padding: var(--spacing-md) var(--spacing-lg); - border-top: 1px solid var(--border-color); -} - -/* 日期选择器优化 */ -.el-range-editor.el-input__inner { - display: inline-flex !important; -} - -.el-range-separator { - box-sizing: content-box; -} - -/* 菜单样式优化 */ -.el-menu { - border-right: 1px solid var(--border-color); -} - -.el-menu-item, -.el-submenu__title { - padding: 0 16px !important; - height: 40px !important; - line-height: 40px !important; -} - -.el-menu--collapse > div > .el-submenu > .el-submenu__title .el-submenu__icon-arrow { - display: none; -} - -/* 自定义工具类 - 紧凑布局 */ -.small-padding { - .cell { - padding-left: 5px; - padding-right: 5px; + // 对话框底部 + .el-dialog__footer { + padding: $--spacing-md $--spacing-lg; + border-top: 1px solid $--border-color-lighter; + text-align: right; } } -.fixed-width { - .el-button--mini { - padding: 7px 10px; - width: 60px; +// Popover +.el-popover { + background: $--metal-gradient-light; + border: 1px solid $--border-color-light; + border-radius: 8px; + box-shadow: $--metal-shadow; + color: $--color-text-regular; + padding: $--spacing-lg; + + &:focus { + outline: none; + } + + // Popover 标题 + .el-popover__title { + color: $--color-text-primary; + border-bottom: 1px solid $--border-color-lighter; + padding-bottom: $--spacing-md; + margin-bottom: $--spacing-md; + font-weight: 600; + } + + // Popover 底部 + .el-popover__footer { + border-top: 1px solid $--border-color-lighter; + padding-top: $--spacing-md; + margin-top: $--spacing-md; + text-align: right; + } + + // 箭头样式 + .popper__arrow { + &::after { + background: $--metal-gradient-light; + } + border-color: $--border-color-light; } } -.status-col { - .cell { - padding: 0 10px; - text-align: center; +.el-button-group + .el-popover { + margin-left: 5px; +} + +// ====================== 标签页组件（el-tabs）样式 ======================= +.el-tabs { + // 标签页容器 + background-color: transparent; + color: $--color-text-regular; + + // 标签栏 + .el-tabs__header { + margin: 0 0 var(--spacing-lg) 0; + padding: 0 var(--spacing-base); + border-bottom: 1px solid $--border-color-light; + background-color: transparent; + + // 标签导航容器 + .el-tabs__nav { + height: 40px; + line-height: 40px; + background-color: $--color-background-light; + border-radius: 6px 6px 0 0; + padding: 0 var(--spacing-base); + box-shadow: inset 0 -1px 0 $--border-color-light; + } + + // 标签项 + .el-tabs__item { + color: $--color-text-secondary; + height: 40px; + line-height: 40px; + padding: 0 var(--spacing-lg); + margin: 0 var(--spacing-sm); + font-size: 13px; + transition: all 0.2s ease; + border-bottom: 2px solid transparent; + + // 悬停状态 + &:hover { + color: $--color-primary; + background-color: rgba($--color-primary, 0.08); + border-bottom-color: rgba($--color-primary, 0.3); + } + + // 激活状态 + &.is-active { + color: $--color-primary; + font-weight: 500; + border-bottom-color: $--color-primary; + background-color: rgba($--color-primary, 0.1); + } + + // 禁用状态 + &.is-disabled { + color: $--color-text-placeholder; + cursor: not-allowed; + + &:hover { + color: $--color-text-placeholder; + background-color: transparent; + border-bottom-color: transparent; + } + } + } + + // 标签滚动按钮 + .el-tabs__nav-prev, + .el-tabs__nav-next { + width: 32px; + height: 32px; + line-height: 32px; + margin: 4px 0; + color: $--color-text-secondary; + border-radius: 4px; + transition: all 0.2s ease; + + &:hover { + color: $--color-primary; + background-color: rgba($--color-primary, 0.1); + } + + &.is-disabled { + color: $--color-text-placeholder; + cursor: not-allowed; + + &:hover { + color: $--color-text-placeholder; + background-color: transparent; + } + } + } + + // 标签分隔线 + .el-tabs__nav-wrap::after { + background-color: $--border-color-light; + } + } + + // 标签内容区 + .el-tabs__content { + padding: var(--spacing-lg); + background-color: $--metal-gradient-light; + border: 1px solid $--border-color-light; + border-radius: 0 0 6px 6px; + min-height: 100px; // 确保有基本高度 + } + + // 卡片类型标签页 + &.el-tabs--card { + .el-tabs__header { + border-bottom: none; + + .el-tabs__nav { + background-color: transparent; + box-shadow: none; + border-radius: 6px; + overflow: hidden; + } + + .el-tabs__item { + border: 1px solid $--border-color-light; + border-bottom: none; + border-radius: 6px 6px 0 0; + margin: 0 2px; + background-color: $--metal-gradient-light; + + &.is-active { + border-color: $--border-color-light; + border-bottom-color: $--metal-gradient-light; + background-color: $--metal-gradient-light; + position: relative; + bottom: -1px; + } + } + } + + .el-tabs__content { + border-radius: 0 6px 6px 6px; + margin-top: -1px; + } + } + + // 左侧/右侧标签页 + &.el-tabs--left, + &.el-tabs--right { + .el-tabs__header { + border-bottom: none; + border-right: 1px solid $--border-color-light; + margin: 0 var(--spacing-lg) 0 0; + + .el-tabs__nav { + flex-direction: column; + height: auto; + background-color: transparent; + box-shadow: none; + } + + .el-tabs__item { + width: 100%; + border-bottom: none; + border-right: 2px solid transparent; + + &.is-active { + border-right-color: $--color-primary; + background-color: rgba($--color-primary, 0.1); + } + } + } + + &.el-tabs--right { + .el-tabs__header { + border-right: none; + border-left: 1px solid $--border-color-light; + margin: 0 0 0 var(--spacing-lg); + } + + .el-tabs__item { + border-right: none; + border-left: 2px solid transparent; + + &.is-active { + border-left-color: $--color-primary; + } + } + } + + .el-tabs__content { + border-radius: 6px; + } + } + + // 标签页关闭按钮 + .el-icon-close { + color: $--color-text-secondary; + margin-left: var(--spacing-sm); + opacity: 0.7; + transition: all 0.2s ease; + + &:hover { + color: $--color-danger; + opacity: 1; + } + } + + // 可编辑标签添加按钮 + .el-tabs__new-tab { + color: $--color-text-secondary; + margin: 0 var(--spacing-sm); + transition: all 0.2s ease; + + &:hover { + color: $--color-primary; + background-color: rgba($--color-primary, 0.08); + } } } -.el-tag { - margin-right: 0px; - padding: 1px !important; - height: auto !important; - border-radius: 0 !important; -} +// ---------------------- 3.5 日期选择器（深色适配 + 交互优化）---------------------- +.el-date-picker { + .el-picker-panel { + background: $--metal-gradient-light; + border: 1px solid $--border-color-light; + border-radius: 8px; + box-shadow: $--metal-shadow; + color: $--color-text-regular; -.cell { - .el-tag { - margin-right: 0px; + // 头部（年月切换） + .el-date-picker__header { + border-bottom: 1px solid $--border-color-lighter; + color: $--color-text-primary; + padding: $--spacing-md; + + .el-date-picker__header-label { + cursor: pointer; + transition: color .2s; + + &:hover { + color: $--color-primary; + } + } + + .el-date-picker__header-btn { + color: $--color-text-secondary; + cursor: pointer; + transition: color .2s; + + &:hover { + color: $--color-primary; + } + + &.is-disabled { + color: $--color-text-placeholder; + cursor: not-allowed; + } + } + } + + // 日期表格 + .el-date-table { + th { + color: $--color-text-secondary; + font-weight: normal; + padding: $--spacing-sm; + } + + td { + color: $--color-text-regular; + border-radius: 4px; + transition: all .2s; + padding: $--spacing-sm; + + &.available { + cursor: pointer; + + &:hover { + background: $--metal-highlight; + } + } + + &.today { + color: $--color-primary; + font-weight: 600; + } + + &.current, + &.selected { + background: $--color-primary; + color: #fff; + + &:hover { + background: darken($--color-primary, 5%); + } + } + + &.disabled { + color: $--color-text-placeholder; + cursor: not-allowed; + + &:hover { + background: transparent; + } + } + } + } + + // 快捷选项 + .el-picker-panel__shortcut { + padding: $--spacing-md; + border-top: 1px solid $--border-color-lighter; + + .el-picker-panel__shortcut-btn { + padding: 4px 10px; + border-radius: 4px; + cursor: pointer; + transition: all .2s; + color: $--color-text-regular; + + &:hover { + background: $--metal-highlight; + color: $--color-text-primary; + } + + &.is-selected { + background: $--color-primary; + color: #fff; + + &:hover { + background: darken($--color-primary, 5%); + } + } + } + } + } + + // 范围选择器分隔符 + .el-range-separator { + color: $--color-text-regular; + padding: 0 $--spacing-md; + box-sizing: content-box; + } + + // 范围输入框 + .el-range-input { + background-color: transparent !important; + } + + .el-range-editor.el-input__inner { + display: inline-flex !important; } } -/* 表单样式优化 */ -.el-form-item { - margin-bottom: 12px; -} -.el-form-item__label { - padding-right: 10px; +// ---------------------- 3.6 导航类（面包屑/菜单）---------------------- +// 面包屑 +.el-breadcrumb { + padding: $--spacing-md 0; font-size: 13px; + + .el-breadcrumb__inner, + .el-breadcrumb__inner a { + font-weight: 400 !important; + color: $--color-text-secondary !important; + } + + .el-breadcrumb__separator { + margin: 0 $--spacing-sm; + color: $--border-color; + } } -/* 分页组件优化 */ +// 菜单 +.el-menu { + border-right: 1px solid $--border-color; + background: $--color-background; + + .el-menu-item, + .el-submenu__title { + padding: 0 16px !important; + height: 40px !important; + line-height: 40px !important; + color: $--color-text-secondary; + font-size: 13px; + + &:hover { + background: rgba($--color-primary, .12); + color: $--color-primary; + } + } + + // 折叠菜单 + &.el-menu--collapse > div > .el-submenu > .el-submenu__title .el-submenu__icon-arrow { + display: none; + } + + // 激活菜单 + .el-menu-item.is-active { + color: $--color-primary; + background: rgba($--color-primary, .15); + border-right: 3px solid $--color-primary; + } +} + + +// ---------------------- 3.7 其他组件（标签/分页/上传）---------------------- +// 标签 +.el-tag { + background: $--metal-gradient-light; + border-color: $--border-color-light; + color: $--color-text-regular; + padding: 2px 8px; + border-radius: 2px; + font-size: 12px; + height: auto; + margin-right: 0; + + // 主色标签 + &.el-tag--primary { + background: rgba($--color-primary, .22); + color: $--color-primary; + border-color: transparent; + } + + // 表格内标签（无圆角） + .cell & { + margin-right: 0; + padding: 1px !important; + border-radius: 0 !important; + } +} + +// 分页 .el-pagination { margin-top: 16px; padding: 8px 0; + text-align: right; + + .el-pager li { + margin: 0 2px; + min-width: 30px; + height: 30px; + line-height: 30px; + border-radius: 4px; + background: $--metal-gradient-light; + border: 1px solid $--border-color-light; + + &:hover { + background: $--metal-gradient-dark; + color: $--color-primary; + } + + &.active { + background: $--color-primary; + color: #fff; + border-color: $--color-primary; + } + } + + // 输入框后缀 + .el-input__suffix { + position: absolute; + line-height: 0; + } } -.el-pager li { - margin: 0 2px; - min-width: 30px; - height: 30px; - line-height: 30px; -} - +// 分页容器（透明背景） div.pagination-container { background-color: transparent !important; padding: 0 !important; @@ -281,89 +1177,63 @@ div.pagination-container { .el-pagination { padding: 0 !important; - // margin: 0 !important; + } +} - .el-input__suffix { - position: absolute; - line-height: 0px; +// 上传组件 +.el-upload { + input[type="file"] { + display: none !important; + } + + .el-upload__input { + display: none; + } + + // 拖拽上传容器 + .el-upload-dragger { + width: 100%; + height: 200px; + border-radius: 6px; + border: 2px dashed $--border-color; + background: $--metal-gradient-light; + color: $--color-text-secondary; + + &:hover { + border-color: $--color-primary; + background: $--metal-gradient-dark; } } } -.el-table--medium .el-table__cell { - padding: 0 !important; -} +// 树形组件 +.el-tree { + background-color: transparent !important; + color: $--color-text-regular; -.el-table--mini .el-table__cell { - padding: 0 !important; -} + .el-tree-node { + &:hover { + background: rgba($--color-primary, .12); + } -.el-table .el-table__header-wrapper th, -.el-table .el-table__fixed-header-wrapper th { - height: auto; - padding: 0 !important; -} - -/* 【优化】表单项整体布局：压缩间距、对齐标签 */ -.el-form-item { - margin-bottom: var(--form-item-margin) !important; - /* 让标签和表格列头对齐，可根据实际需求微调 */ - label-align: right; -} - -/* 【优化】表单标签：缩小文字大小，匹配表格列头 */ -.el-form-item__label { - font-size: 13px; - padding-right: var(--spacing-base); -} - -/* 【优化】表单输入框：统一高度、压缩内边距 */ -.el-input__inner, -.el-textarea__inner, -.el-select .el-input__inner { - height: var(--btn-height); - padding: 0 var(--spacing-base); - font-size: 13px; -} - -/* 【优化】表格与表单的间距：避免表单和表格贴太近 */ -.el-table { - margin-top: calc(var(--form-item-margin) * 2); -} - -/* 【补充】搜索按钮组：如果是 inline 布局，强制对齐 */ -.search-form .el-form-item { - display: inline-block; - margin-right: var(--spacing-base); - vertical-align: middle; -} - -/* 【补充】适配原有工具类，让紧凑度更统一 */ -.small-padding .cell { - padding-left: calc(var(--spacing-base)/2); - padding-right: calc(var(--spacing-base)/2); -} - -.el-input { - height: var(--btn-height); + &.is-current > .el-tree-node__content { + background: rgba($--color-primary, .2); + color: $--color-primary; + } + } } - -.el-input--small .el-input__inner, -.el-input--medium .el-input__inner, -.el-input--large .el-input__inner { - height: var(--btn-height); - line-height: var(--btn-height); +// ---------------------- 3.8 自定义工具类 ---------------------- +// 固定按钮宽度 +.fixed-width { + .el-button--mini { + padding: 7px 10px; + width: 60px; + } } -.el-input--small .el-input__icon, -.el-input--medium .el-input__icon, -.el-input--large .el-input__icon { - height: var(--btn-height); - line-height: var(--btn-height); -} - -.el-tabs__content { - overflow: visible !important; +// 居中单元格（深色表头） +.is-center.is-leaf.el-table__cell { + background-color: #1F2227; } \ No newline at end of file diff --git a/klp-ui/src/assets/styles/sidebar.scss b/klp-ui/src/assets/styles/sidebar.scss index 6442aed4..2ee6a676 100644 --- a/klp-ui/src/assets/styles/sidebar.scss +++ b/klp-ui/src/assets/styles/sidebar.scss @@ -1,10 +1,16 @@ #app { + // 文本颜色调整为偏黑色系（直接写死值，确保清晰） + --text-primary: #1a1a1a; + --text-regular: #333333; + --text-secondary: #555555; + --text-placeholder: #777777; .main-container { height: 100%; - transition: margin-left .28s; + transition: margin-left .28s, box-shadow .3s ease; margin-left: $base-sidebar-width; position: relative; + background: #1E2227; // 金属浅色渐变 } .sidebarHide { @@ -12,10 +18,11 @@ } .sidebar-container { - -webkit-transition: width .28s; - transition: width 0.28s; + -webkit-transition: width .28s, background .3s ease; + transition: width 0.28s, background .3s ease; width: $base-sidebar-width !important; - background-color: $base-menu-background; + background: #1E2227; // 金属深色渐变 + border-right: 1px solid #8d939b; height: 100%; position: fixed; font-size: 0px; @@ -24,8 +31,7 @@ left: 0; z-index: 1001; overflow: hidden; - -webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35); - box-shadow: 2px 0 6px rgba(0,21,41,.35); + box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.15); // reset element-ui css .horizontal-collapse-transition { @@ -38,6 +44,12 @@ .el-scrollbar__bar.is-vertical { right: 0px; + background: rgba(0, 0, 0, 0.05); + } + + .el-scrollbar__thumb { + background: #1E2227; + border-radius: 3px; } .el-scrollbar { @@ -58,52 +70,84 @@ display: inline-block; width: 100%; overflow: hidden; + color: var(--text-regular); // 链接文本偏黑 + text-decoration: none; } .svg-icon { margin-right: 16px; + color: var(--text-secondary); // 图标颜色稍浅 } .el-menu { border: none; height: 100%; width: 100% !important; + background: transparent; } .el-menu-item, .el-submenu__title { + // 明确默认状态样式（关键修复） + background: transparent !important; + box-shadow: none !important; + overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; + color: var(--text-regular); // 菜单项文本偏黑 + border-radius: 4px; + margin: 0 6px; + transition: all 0.2s ease; } - // menu hover + // menu hover - 仅在hover时生效 .submenu-title-noDropdown, .el-submenu__title { &:hover { - background-color: rgba(0, 0, 0, 0.06) !important; + background: rgba(255, 255, 255, 0.1) !important; + color: var(--text-primary) !important; // hover时文本更深 + box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.1), + inset -1px -1px 2px rgba(255, 255, 255, 0.05); } } + // 深色主题下子菜单选中高亮 & .theme-dark .is-active > .el-submenu__title { - color: $base-menu-color-active !important; - // border-right: 3px solid $base-menu-color-active !important; + color: #fff !important; // 选中时文字纯白 + // background-color: rgba(95, 123, 160, 0.25) !important; // 工业蓝浅高亮 + // border-left: 3px solid #5F7BA0; // 左边高亮条 } - & .nest-menu .el-submenu>.el-submenu__title, + // & .nest-menu .el-submenu>.el-submenu__title, & .el-submenu .el-menu-item { + // 子菜单默认样式 + background: transparent !important; + box-shadow: none !important; + min-width: $base-sidebar-width !important; + margin: 0 4px; &:hover { - background-color: rgba(0, 0, 0, 0.06) !important; + background: rgba(255, 255, 255, 0.1) !important; + color: var(--text-primary) !important; } } - & .theme-dark .nest-menu .el-submenu>.el-submenu__title, + // & .theme-dark .nest-menu .el-submenu>.el-submenu__title, & .theme-dark .el-submenu .el-menu-item { - background-color: $base-sub-menu-background !important; + background: transparent !important; + color: var(--text-regular); &:hover { - background-color: $base-sub-menu-hover !important; + background: rgba(255, 255, 255, 0.1) !important; + color: var(--text-primary) !important; + } + + &.is-active { + background: rgba(95, 123, 160, 0.28) !important; // 激活背景 + color: #fff !important; // 激活文字白色 + font-weight: 600; + border-left: 3px solid #5F7BA0; // 左边高亮条 } } } @@ -139,7 +183,6 @@ .svg-icon { margin-left: 20px; } - } } @@ -169,8 +212,9 @@ } .sidebar-container { - transition: transform .28s; + transition: transform .28s, box-shadow .3s ease; width: $base-sidebar-width !important; + box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.15); } &.hideSidebar { @@ -183,7 +227,6 @@ } .withoutAnimation { - .main-container, .sidebar-container { transition: none; @@ -196,14 +239,34 @@ &>.el-menu { .svg-icon { margin-right: 16px; + color: var(--text-secondary); } } - .nest-menu .el-submenu>.el-submenu__title, - .el-menu-item { + .el-menu-item .nest-menu { + // 默认样式重置 + background: transparent !important; + box-shadow: none !important; + &:hover { - // you can use $subMenuHover - background-color: rgba(0, 0, 0, 0.06) !important; + background: rgba(255, 255, 255, 0.1) !important; + color: var(--text-primary) !important; + box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.1), + inset -1px -1px 2px rgba(255, 255, 255, 0.05); + } + + ::v-deep &.is-active { + background: rgba(95, 123, 160, 0.28) !important; // 工业蓝背景 + color: #ffffff !important; // 激活文字白色 + font-weight: 600; + border-left: 3px solid #5F7BA0; + box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.15), + inset -1px -1px 2px rgba(255, 255, 255, 0.08); + } + + ::v-deep .el-menu-item.is-active span, + ::v-deep .el-submenu__title.is-active span { + color: #ffffff !important; // 激活文字白色 } } @@ -211,9 +274,12 @@ >.el-menu--popup { max-height: 100vh; overflow-y: auto; + background: linear-gradient(145deg, #b0b5bb, #999ea6); + border: 1px solid #8d939b; + box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.15); &::-webkit-scrollbar-track-piece { - background: #d3dce6; + background: rgba(0, 0, 0, 0.05); } &::-webkit-scrollbar { @@ -221,12 +287,13 @@ } &::-webkit-scrollbar-thumb { - background: #99a9bf; - border-radius: 20px; + background: #8d939b; + border-radius: 3px; } } } -.el-menu-item.is-active { - border-left: 4px solid !important; +#app .sidebar-container .el-menu-item, +#app .sidebar-container .el-submenu__title { + margin: 0; } \ No newline at end of file diff --git a/klp-ui/src/components/KLPUI/KLPList/index.vue b/klp-ui/src/components/KLPUI/KLPList/index.vue index b91bee18..d7dba9ea 100644 --- a/klp-ui/src/components/KLPUI/KLPList/index.vue +++ b/klp-ui/src/components/KLPUI/KLPList/index.vue @@ -257,7 +257,7 @@ export default { .klp-list-item { padding: 6px 8px; margin-bottom: 6px; - border-bottom: 1px solid #e6e6e6; + border-bottom: 1px solid #111; cursor: pointer; transition: all 0.2s ease; display: flex; @@ -269,8 +269,8 @@ export default { /* 列表项选中状态（左侧高亮边框+背景色） */ .klp-list-item.active { - border-left: 3px solid #409eff; - background-color: #f5f7fa; + border-left: 3px solid #2bf; + background-color: #222; } /* 列表标题区域（占满中间空间，让操作按钮靠右） */ @@ -284,7 +284,7 @@ export default { /* 标题前置标签样式 */ .klp-list-title .title-label { - color: #606266; + color: #ddd; margin-right: 6px; font-size: 13px; white-space: nowrap; /* 标签不换行 */ @@ -293,7 +293,7 @@ export default { /* 标题内容样式（溢出省略） */ .klp-list-title .title-value { - color: #303133; + color: #ddd; font-weight: 500; font-size: 14px; white-space: nowrap; /* 禁止换行 */ diff --git a/klp-ui/src/components/KLPUI/KLPTable/ColumnRender.vue b/klp-ui/src/components/KLPUI/KLPTable/ColumnRender.vue new file mode 100644 index 00000000..4de2b80f --- /dev/null +++ b/klp-ui/src/components/KLPUI/KLPTable/ColumnRender.vue @@ -0,0 +1,23 @@ + \ No newline at end of file diff --git a/klp-ui/src/components/KLPUI/KLPTable/index.vue b/klp-ui/src/components/KLPUI/KLPTable/index.vue index fd0dbd30..07c2cba2 100644 --- a/klp-ui/src/components/KLPUI/KLPTable/index.vue +++ b/klp-ui/src/components/KLPUI/KLPTable/index.vue @@ -39,6 +39,39 @@ + + + + + + + + @@ -47,8 +80,15 @@ + + diff --git a/klp-ui/src/layout/components/Navbar.vue b/klp-ui/src/layout/components/Navbar.vue index b662d385..2ede0d0c 100644 --- a/klp-ui/src/layout/components/Navbar.vue +++ b/klp-ui/src/layout/components/Navbar.vue @@ -106,24 +106,32 @@ export default { height: 50px; overflow: hidden; position: relative; - background: #fff; - box-shadow: 0 1px 4px rgba(0,21,41,.08); + // 金属质感渐变背景 + background: #454c51; + border-bottom: 1px solid #8d939b; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1), + 0 1px 1px rgba(255, 255, 255, 0.08) inset; .hamburger-container { line-height: 46px; height: 100%; float: left; cursor: pointer; - transition: background .3s; - -webkit-tap-highlight-color:transparent; + transition: all .3s ease; + -webkit-tap-highlight-color: transparent; + padding: 0 15px; + border-right: 1px solid rgba(0, 0, 0, 0.05); &:hover { - background: rgba(0, 0, 0, .025) + background: rgba(0, 0, 0, 0.05); + box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.08), + inset -1px -1px 2px rgba(255, 255, 255, 0.05); } } .breadcrumb-container { float: left; + padding-left: 15px; } .topmenu-container { @@ -147,24 +155,29 @@ export default { .right-menu-item { display: inline-block; - padding: 0 8px; + padding: 0 12px; height: 100%; font-size: 18px; - color: #5a5e66; + // 金属风格文字色 + color: #ddd; vertical-align: text-bottom; + transition: all 0.2s ease; &.hover-effect { cursor: pointer; - transition: background .3s; + position: relative; &:hover { - background: rgba(0, 0, 0, .025) + background: rgba(0, 0, 0, 0.05); + box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.08), + inset -1px -1px 2px rgba(255, 255, 255, 0.05); + color: #333; } } } .avatar-container { - margin-right: 30px; + margin-right: 15px; .avatar-wrapper { margin-top: 5px; @@ -174,18 +187,22 @@ export default { cursor: pointer; width: 40px; height: 40px; - border-radius: 10px; + border-radius: 8px; + // 头像金属边框 + border: 1px solid #a0a6ad; + box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); } .el-icon-caret-bottom { cursor: pointer; position: absolute; - right: -20px; + right: -15px; top: 25px; font-size: 12px; + color: #666; } } } } } - + \ No newline at end of file diff --git a/klp-ui/src/layout/components/TagsView/index.vue b/klp-ui/src/layout/components/TagsView/index.vue index 96585a5b..71f13249 100644 --- a/klp-ui/src/layout/components/TagsView/index.vue +++ b/klp-ui/src/layout/components/TagsView/index.vue @@ -241,9 +241,11 @@ export default { .tags-view-container { height: 34px; width: 100%; - background: #fff; - border-bottom: 1px solid #d8dce5; - box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04); + // 金属浅色渐变背景（直接写死渐变值） + background: #454c51; + border-bottom: 1px solid #a0a6ad; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(255, 255, 255, 0.05) inset; + .tags-view-wrapper { .tags-view-item { display: inline-block; @@ -251,39 +253,61 @@ export default { cursor: pointer; height: 26px; line-height: 26px; - border: 1px solid #d8dce5; - color: #495060; - background: #fff; + border: 1px solid #a0a6ad; + color: #ddd; + // 标签金属渐变背景 + background: #454c51; padding: 0 8px; font-size: 12px; margin-left: 5px; margin-top: 4px; + border-radius: 4px; + box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1), + -1px -1px 2px rgba(255, 255, 255, 0.05); + transition: all 0.2s ease; + &:first-of-type { margin-left: 15px; } + &:last-of-type { margin-right: 15px; } + + &:hover { + box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15), + -1px -1px 2px rgba(255, 255, 255, 0.08); + border-color: #8d939b; + } + &.active { - background-color: #42b983; + // 激活状态主色调渐变 + background: linear-gradient(145deg, #6b809d, #637994); color: #fff; - border-color: #42b983; + border-color: #5a6d86; + box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15), + -1px -1px 2px rgba(255, 255, 255, 0.1) inset; + &::before { content: ''; - background: #fff; + background: rgba(255, 255, 255, 0.8); display: inline-block; width: 8px; height: 8px; border-radius: 50%; position: relative; margin-right: 2px; + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2) inset; } } } } + .contextmenu { margin: 0; - background: #fff; + // 右键菜单金属背景 + background: #454c51; + border: 1px solid #a0a6ad; z-index: 3000; position: absolute; list-style-type: none; @@ -291,14 +315,19 @@ export default { border-radius: 4px; font-size: 12px; font-weight: 400; - color: #333; - box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3); + color: #606266; + box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.15), + -2px -2px 5px rgba(255, 255, 255, 0.08); + li { margin: 0; padding: 7px 16px; cursor: pointer; + transition: all 0.2s ease; + &:hover { - background: #eee; + background: rgba(99, 121, 148, 0.15); + color: #637994; } } } @@ -306,9 +335,10 @@ export default { + \ No newline at end of file diff --git a/klp-ui/src/views/index.vue b/klp-ui/src/views/index.vue index 1771d84f..92d4d092 100644 --- a/klp-ui/src/views/index.vue +++ b/klp-ui/src/views/index.vue @@ -33,7 +33,6 @@