From 0202dbc3369497e8ee101a0bbd5b2c3393e44198 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=B5=85=E5=BF=B5?= Date: Mon, 24 Aug 2026 10:05:13 +0800 Subject: [PATCH] =?UTF-8?q?feat(ui):=20=E8=AF=A6=E6=83=85=E6=8A=BD?= =?UTF-8?q?=E5=B1=89=E5=85=A8=E9=9D=A2=E7=BE=8E=E5=8C=96(=E5=8D=A1?= =?UTF-8?q?=E7=89=87=E5=BC=8F=E4=BF=A1=E6=81=AF=E6=A1=A3=E6=A1=88=E9=A3=8E?= =?UTF-8?q?=E6=A0=BC,=E8=A6=86=E7=9B=968=E4=B8=AA=E9=A1=B5=E9=9D=A2?= =?UTF-8?q?=E7=9A=84=E5=85=A8=E5=AD=97=E6=AE=B5=E6=8A=BD=E5=B1=89)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 头像区:渐变名片卡+玉绿头像框+身份绿点 - KV网格:双列卡片+行悬停高亮+分区玉绿竖条标题 - 顶栏:毛玻璃悬浮;图片:圆角阴影+悬停放大;背景:点阵纹理 - 零组件改动(纯CSS全局层,!important覆盖各页scoped样式) Co-Authored-By: Claude --- yunkes/src/style.css | 162 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 162 insertions(+) diff --git a/yunkes/src/style.css b/yunkes/src/style.css index 5e07d79..dca5dff 100644 --- a/yunkes/src/style.css +++ b/yunkes/src/style.css @@ -478,3 +478,165 @@ h2 { background: #e2f5eb; box-shadow: inset 3px 0 0 var(--el-color-primary); } + +/* ═══════════════════ 详情抽屉美化层(2026-08-22) ═══════════════════ + 覆盖所有页面的全字段抽屉(客户/员工/群/通话/短信/搜索/聊天/员工详情) + —— 卡片式信息档案风格,玉绿主色系呼应全站主题。 + 使用 !important 覆盖各页面的 scoped 最小布局样式。 */ + +/* ── 抽屉整体 ── */ +.el-drawer .el-drawer__body { + padding: 0 20px 24px !important; + background: + radial-gradient(circle at 1px 1px, rgba(23,29,43,.025) 1px, transparent 0) 0 0/18px 18px, + #fafbfc !important; +} + +/* ── 顶部操作栏:悬浮毛玻璃 ── */ +.yk-drawer__topbar { + position: sticky !important; + top: 0 !important; + z-index: 10 !important; + padding: 12px 0 !important; + margin: 0 -20px 16px !important; + padding-left: 20px !important; + padding-right: 20px !important; + background: rgba(250,251,252,.92) !important; + backdrop-filter: blur(8px) !important; + border-bottom: 1px solid rgba(23,29,43,.06) !important; +} + +/* ── 头像区:渐变名片卡 ── */ +.yk-drawer__avatar { + display: flex !important; + align-items: center !important; + gap: 16px !important; + margin: 0 -20px 20px !important; + padding: 20px !important; + background: linear-gradient(135deg, #e8f7ef 0%, #f0faf5 50%, #fafbfc 100%) !important; + border-radius: 12px !important; + border: 1px solid rgba(13,159,110,.1) !important; +} +.yk-drawer__avatar .el-avatar { + border: 3px solid rgba(13,159,110,.2) !important; + border-radius: 12px !important; + box-shadow: 0 4px 12px -4px rgba(13,159,110,.3) !important; + flex: none !important; +} +.yk-drawer__avatar-name { + font-size: 18px !important; + font-weight: 700 !important; + color: #1a2230 !important; + letter-spacing: .02em !important; +} +.yk-drawer__avatar-sub { + font-size: 12.5px !important; + color: #5a6472 !important; + margin-top: 4px !important; + display: flex !important; + align-items: center !important; + gap: 6px !important; +} +.yk-drawer__avatar-sub::before { + content: '' !important; + width: 6px !important; + height: 6px !important; + border-radius: 50% !important; + background: var(--el-color-primary) !important; + flex: none !important; +} + +/* ── 分区标题:玉绿竖条+字距 ── */ +.yk-drawer .el-divider--horizontal { + margin: 20px 0 12px !important; +} +.yk-drawer .el-divider__text { + font-size: 13px !important; + font-weight: 700 !important; + color: #3d4756 !important; + letter-spacing: .06em !important; + padding: 0 12px 0 0 !important; + background: transparent !important; +} +.yk-drawer .el-divider__text::before { + content: '' !important; + display: inline-block !important; + width: 3px !important; + height: 14px !important; + border-radius: 2px !important; + background: var(--el-color-primary) !important; + margin-right: 8px !important; + vertical-align: -2px !important; +} +.yk-drawer .el-divider__text.is-left { + left: 0 !important; + transform: none !important; +} + +/* ── KV 网格:卡片行+悬停高亮 ── */ +.yk-drawer__kv { + margin: 0 !important; + display: grid !important; + grid-template-columns: 1fr 1fr !important; + gap: 1px !important; + background: rgba(23,29,43,.05) !important; + border-radius: 10px !important; + overflow: hidden !important; + border: 1px solid rgba(23,29,43,.05) !important; +} +.yk-drawer__kv-item { + display: flex !important; + flex-direction: column !important; + gap: 4px !important; + padding: 10px 14px !important; + background: #fff !important; + transition: background .18s ease !important; + grid-template-columns: none !important; +} +.yk-drawer__kv-item:hover { + background: #f2faf6 !important; +} +.yk-drawer__kv-item dt { + color: #8a94a4 !important; + font-size: 11.5px !important; + font-weight: 600 !important; + letter-spacing: .04em !important; + text-transform: none !important; +} +.yk-drawer__kv-item dd { + margin: 0 !important; + font-size: 13.5px !important; + color: #2b3240 !important; + word-break: break-all !important; + min-width: 0 !important; + line-height: 1.5 !important; +} +.yk-drawer__empty { + color: #c6cdd8 !important; +} + +/* ── 图片单元格 ── */ +.yk-drawer__img .el-image { + width: 72px !important; + height: 72px !important; + border-radius: 10px !important; + border: 1px solid rgba(23,29,43,.08) !important; + box-shadow: 0 2px 8px -2px rgba(23,29,43,.15) !important; + transition: transform .2s ease !important; +} +.yk-drawer__img .el-image:hover { + transform: scale(1.04) !important; +} + +/* ── 长文本值(如描述/签名)跨全宽 ── */ +.yk-drawer__kv-item:nth-child(n+3):has(dd[style*="grid-column"]) { + grid-column: 1 / -1 !important; +} + +/* 员工独立详情页:同样的卡片化 */ +.yk-staff-detail__body .yk-drawer__avatar { + margin: 0 0 24px !important; +} +.yk-staff-detail__header { + margin-bottom: 16px !important; +}