style: 应用现代简约配色方案到三栏布局
将HomeView.vue的三栏布局更新为现代简约风格： - 左栏：#F5F5F5 浅灰背景 + #333 深灰文字 - 中栏：#FFFFFF 纯白背景 - 右栏：#FFFFFF 纯白背景 - 选中态：#E57373 浅红强调 - 边框：#EFEFEF 浅灰 - 悬停效果：#EBEBEB 浅灰 提升视觉层次和可读性，符合现代UI设计规范。 Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
2b818f1ce7
commit
82b796e211
|
|
@ -333,14 +333,14 @@ onMounted(async () => {
|
|||
<style scoped>
|
||||
/* ── 变量 ── */
|
||||
.three-panel {
|
||||
--red: #B8860B;
|
||||
--dark: #1A1A1A;
|
||||
--gold: #B8860B;
|
||||
--gold-lt: #D4AF37;
|
||||
--cream: #FAFAFA;
|
||||
--border: #D3D3D3;
|
||||
--text: #2A1A1A;
|
||||
--muted: #3A3A3A;
|
||||
--red: #E57373;
|
||||
--dark: #F5F5F5;
|
||||
--gold: #E57373;
|
||||
--gold-lt: #E57373;
|
||||
--cream: #FFFFFF;
|
||||
--border: #EFEFEF;
|
||||
--text: #333333;
|
||||
--muted: #999999;
|
||||
|
||||
display: flex;
|
||||
height: calc(100vh - 220px);
|
||||
|
|
@ -348,7 +348,7 @@ onMounted(async () => {
|
|||
overflow: hidden;
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--border);
|
||||
box-shadow: 0 4px 24px rgba(0,0,0,0.12);
|
||||
box-shadow: 0 4px 24px rgba(139,69,69,0.12);
|
||||
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
||||
}
|
||||
|
||||
|
|
@ -366,13 +366,13 @@ onMounted(async () => {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.08);
|
||||
border-bottom: 1px solid #EFEFEF;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.left-title {
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: rgba(255,255,255,0.9);
|
||||
color: #333333;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
.left-count {
|
||||
|
|
@ -388,7 +388,7 @@ onMounted(async () => {
|
|||
.left-body { flex: 1; overflow-y: auto; }
|
||||
.left-body::-webkit-scrollbar { width: 4px; }
|
||||
.left-body::-webkit-scrollbar-track { background: transparent; }
|
||||
.left-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 2px; }
|
||||
.left-body::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); border-radius: 2px; }
|
||||
|
||||
/* 公司行 */
|
||||
.org-row {
|
||||
|
|
@ -397,19 +397,19 @@ onMounted(async () => {
|
|||
gap: 10px;
|
||||
padding: 10px 16px;
|
||||
border-left: 3px solid transparent;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.05);
|
||||
border-bottom: 1px solid #EFEFEF;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.org-row:hover { background: rgba(255,255,255,0.06); }
|
||||
.org-row:hover { background: #EBEBEB; }
|
||||
.org-row.active {
|
||||
border-left-color: var(--gold);
|
||||
background: rgba(184,134,11,0.1);
|
||||
border-left-color: var(--red);
|
||||
background: #FFF5F5;
|
||||
}
|
||||
.org-avatar {
|
||||
width: 34px; height: 34px;
|
||||
border-radius: 6px;
|
||||
background: linear-gradient(135deg, #B8860B, #8B6407);
|
||||
background: linear-gradient(135deg, #C8973A, #9A6E28);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 15px; font-weight: 900; color: #fff;
|
||||
flex-shrink: 0; overflow: hidden;
|
||||
|
|
@ -417,28 +417,28 @@ onMounted(async () => {
|
|||
.org-avatar img { width: 100%; height: 100%; object-fit: cover; }
|
||||
.child-avatar {
|
||||
width: 28px; height: 28px; font-size: 12px;
|
||||
background: linear-gradient(135deg, #A67C07, #7D5A05);
|
||||
background: linear-gradient(135deg, #C8A080, #9A7860);
|
||||
}
|
||||
.org-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
|
||||
.org-name {
|
||||
font-size: 13px; font-weight: 600;
|
||||
color: rgba(255,255,255,0.88);
|
||||
color: #333333;
|
||||
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
||||
}
|
||||
.child-name { font-size: 12px; color: rgba(255,255,255,0.7); }
|
||||
.org-row.active .org-name { color: var(--gold-lt); }
|
||||
.org-stat { font-size: 11px; color: rgba(255,255,255,0.38); }
|
||||
.org-stat em { font-style: normal; color: var(--gold); font-weight: 700; }
|
||||
.child-name { font-size: 12px; color: #666666; }
|
||||
.org-row.active .org-name { color: var(--red); }
|
||||
.org-stat { font-size: 11px; color: #999999; }
|
||||
.org-stat em { font-style: normal; color: var(--red); font-weight: 700; }
|
||||
|
||||
/* 子公司缩进 */
|
||||
.org-child { padding-left: 12px; background: rgba(0,0,0,0.12); }
|
||||
.org-child { padding-left: 12px; background: #FAFAFA; }
|
||||
.child-indent {
|
||||
display: flex; align-items: center; flex-shrink: 0;
|
||||
padding-left: 6px;
|
||||
}
|
||||
.child-line {
|
||||
display: block; width: 10px; height: 1px;
|
||||
background: rgba(184,134,11,0.35);
|
||||
background: #E57373;
|
||||
}
|
||||
|
||||
/* ── 中栏 ── */
|
||||
|
|
@ -447,15 +447,15 @@ onMounted(async () => {
|
|||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--cream);
|
||||
border-right: 1px solid var(--border);
|
||||
background: #FFFFFF;
|
||||
border-right: 1px solid #EFEFEF;
|
||||
}
|
||||
.mid-header {
|
||||
padding: 14px 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 2px solid var(--border);
|
||||
border-bottom: 2px solid #EFEFEF;
|
||||
flex-shrink: 0;
|
||||
background: #fff;
|
||||
}
|
||||
|
|
@ -463,8 +463,8 @@ onMounted(async () => {
|
|||
.mid-title-org { color: var(--red); }
|
||||
.mid-title.muted { color: var(--muted); font-weight: 400; }
|
||||
.mid-count {
|
||||
font-size: 11px; color: var(--muted);
|
||||
background: #F0F0F0; border-radius: 10px; padding: 1px 8px;
|
||||
font-size: 11px; color: #999999;
|
||||
background: #F5F5F5; border-radius: 10px; padding: 1px 8px;
|
||||
}
|
||||
.mid-body { flex: 1; overflow-y: auto; }
|
||||
|
||||
|
|
@ -472,15 +472,15 @@ onMounted(async () => {
|
|||
.job-row {
|
||||
padding: 13px 16px;
|
||||
border-left: 3px solid transparent;
|
||||
border-bottom: 1px solid var(--border);
|
||||
border-bottom: 1px solid #EFEFEF;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s;
|
||||
background: #fff;
|
||||
}
|
||||
.job-row:hover { background: #F8F8F8; }
|
||||
.job-row:hover { background: #FAFAFA; }
|
||||
.job-row.active {
|
||||
border-left-color: var(--red);
|
||||
background: #FFFAF9;
|
||||
background: #FFF5F5;
|
||||
}
|
||||
.job-row-title {
|
||||
font-size: 13px; font-weight: 600;
|
||||
|
|
@ -500,20 +500,20 @@ onMounted(async () => {
|
|||
.panel-right {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
background: #FAFAFA;
|
||||
background: #FFFFFF;
|
||||
}
|
||||
|
||||
/* Banner */
|
||||
.detail-banner {
|
||||
position: relative;
|
||||
background: linear-gradient(135deg, #1A1A1A 0%, #2A2A2A 50%, #222222 100%);
|
||||
background: linear-gradient(135deg, #8B4545 0%, #A85555 50%, #9A4C4C 100%);
|
||||
overflow: hidden;
|
||||
}
|
||||
.banner-deco {
|
||||
position: absolute; inset: 0;
|
||||
background:
|
||||
repeating-linear-gradient(45deg, transparent, transparent 20px, rgba(184,134,11,0.03) 20px, rgba(184,134,11,0.03) 21px),
|
||||
repeating-linear-gradient(-45deg, transparent, transparent 20px, rgba(184,134,11,0.03) 20px, rgba(184,134,11,0.03) 21px);
|
||||
repeating-linear-gradient(45deg, transparent, transparent 20px, rgba(212,169,93,0.03) 20px, rgba(212,169,93,0.03) 21px),
|
||||
repeating-linear-gradient(-45deg, transparent, transparent 20px, rgba(212,169,93,0.03) 20px, rgba(212,169,93,0.03) 21px);
|
||||
}
|
||||
.banner-content {
|
||||
position: relative;
|
||||
|
|
@ -527,8 +527,8 @@ onMounted(async () => {
|
|||
.banner-category {
|
||||
display: inline-block;
|
||||
padding: 3px 12px;
|
||||
background: rgba(184,134,11,0.15);
|
||||
border: 1px solid rgba(184,134,11,0.35);
|
||||
background: rgba(212,169,93,0.15);
|
||||
border: 1px solid rgba(212,169,93,0.35);
|
||||
color: var(--gold-lt);
|
||||
font-size: 11px; letter-spacing: 0.1em;
|
||||
border-radius: 2px; margin-bottom: 10px;
|
||||
|
|
@ -557,13 +557,13 @@ onMounted(async () => {
|
|||
display: flex; align-items: center; gap: 6px;
|
||||
padding: 9px 18px;
|
||||
background: transparent;
|
||||
border: 1px solid rgba(184,134,11,0.5);
|
||||
border: 1px solid rgba(212,169,93,0.5);
|
||||
color: var(--gold-lt);
|
||||
border-radius: 3px; font-size: 13px;
|
||||
cursor: pointer; transition: all 0.2s;
|
||||
font-family: inherit;
|
||||
}
|
||||
.btn-collect:hover { background: rgba(184,134,11,0.1); border-color: var(--gold); }
|
||||
.btn-collect:hover { background: rgba(212,169,93,0.1); border-color: var(--gold); }
|
||||
.btn-apply {
|
||||
padding: 9px 24px;
|
||||
background: var(--red);
|
||||
|
|
@ -572,9 +572,9 @@ onMounted(async () => {
|
|||
cursor: pointer; transition: all 0.2s;
|
||||
letter-spacing: 0.05em;
|
||||
font-family: inherit;
|
||||
box-shadow: 0 4px 16px rgba(184,134,11,0.4);
|
||||
box-shadow: 0 4px 16px rgba(229,115,115,0.4);
|
||||
}
|
||||
.btn-apply:hover { background: #A67C07; box-shadow: 0 6px 20px rgba(184,134,11,0.5); }
|
||||
.btn-apply:hover { background: #E86C6C; box-shadow: 0 6px 20px rgba(229,115,115,0.5); }
|
||||
.btn-apply.loading { opacity: 0.7; cursor: not-allowed; }
|
||||
.banner-hint { font-size: 12px; color: rgba(255,255,255,0.4); margin-top: 8px; }
|
||||
.banner-hint.success { color: #6FCF97; }
|
||||
|
|
@ -591,8 +591,8 @@ onMounted(async () => {
|
|||
background: #fff;
|
||||
border-radius: 6px;
|
||||
padding: 24px 28px;
|
||||
box-shadow: 0 2px 12px rgba(0,0,0,0.07);
|
||||
border: 1px solid var(--border);
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
|
||||
border: 1px solid #EFEFEF;
|
||||
}
|
||||
.detail-right { width: 224px; flex-shrink: 0; }
|
||||
|
||||
|
|
@ -614,7 +614,7 @@ onMounted(async () => {
|
|||
.red-val { color: var(--red); }
|
||||
|
||||
.section-divider {
|
||||
height: 1px; background: var(--border);
|
||||
height: 1px; background: #EFEFEF;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
|
|
@ -643,8 +643,8 @@ onMounted(async () => {
|
|||
background: #fff;
|
||||
border-radius: 6px;
|
||||
padding: 18px;
|
||||
box-shadow: 0 2px 12px rgba(0,0,0,0.07);
|
||||
border: 1px solid var(--border);
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
|
||||
border: 1px solid #EFEFEF;
|
||||
}
|
||||
.company-card-label {
|
||||
font-size: 11px; font-weight: 700;
|
||||
|
|
@ -655,7 +655,7 @@ onMounted(async () => {
|
|||
.cc-logo {
|
||||
width: 48px; height: 48px;
|
||||
border-radius: 8px; overflow: hidden; flex-shrink: 0;
|
||||
background: linear-gradient(135deg, #B8860B, #8B6407);
|
||||
background: linear-gradient(135deg, #D4A95D, #B08C3A);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 20px; font-weight: 900; color: #fff;
|
||||
border: 1px solid var(--border);
|
||||
|
|
@ -663,7 +663,7 @@ onMounted(async () => {
|
|||
.cc-logo img { width: 100%; height: 100%; object-fit: cover; }
|
||||
.cc-name { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
|
||||
.cc-desc { font-size: 11px; color: var(--muted); line-height: 1.6; }
|
||||
.cc-divider { height: 1px; background: var(--border); margin-bottom: 12px; }
|
||||
.cc-divider { height: 1px; background: #EFEFEF; margin-bottom: 12px; }
|
||||
.cc-contact {
|
||||
display: flex; align-items: center; gap: 6px;
|
||||
font-size: 12px; color: var(--muted); word-break: break-all;
|
||||
|
|
@ -677,7 +677,7 @@ onMounted(async () => {
|
|||
transition: background 0.2s;
|
||||
font-family: inherit; letter-spacing: 0.05em;
|
||||
}
|
||||
.btn-apply-card:hover { background: #A67C07; }
|
||||
.btn-apply-card:hover { background: #E86C6C; }
|
||||
.btn-apply-card.loading { opacity: 0.7; cursor: not-allowed; }
|
||||
.apply-success { text-align: center; font-size: 12px; color: #27AE60; margin-top: 8px; }
|
||||
|
||||
|
|
@ -691,7 +691,7 @@ onMounted(async () => {
|
|||
.empty-icon { opacity: 0.5; }
|
||||
.detail-loading { padding: 24px 28px; }
|
||||
.skeleton-row {
|
||||
height: 14px; background: linear-gradient(90deg, #E8E8E8 25%, #F0F0F0 50%, #E8E8E8 75%);
|
||||
height: 14px; background: linear-gradient(90deg, #EDE3DE 25%, #F5EDED 50%, #EDE3DE 75%);
|
||||
background-size: 200% 100%;
|
||||
border-radius: 3px; margin-bottom: 10px;
|
||||
animation: shimmer 1.5s infinite;
|
||||
|
|
|
|||
Loading…
Reference in New Issue