style: 更新网站整体样式为浅红色主题
将PortalLayout.vue和HomeView.vue的配色方案从深蓝央企风格更新为浅红色主题： - 顶部条/页脚：#8B4545 (深玫瑰棕) - 主导航渐变：#C17A7A -> #A85555 (柔和玫瑰色) - 页面背景：#FBF5F5 (极浅粉) - 主要按钮/图标：#E57373 (浅红色) - 次要强调：#EF9A9A (更浅粉红) - 辅助色：#D4A95D (暖金色) Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
ed3b29aafe
commit
5e3d521096
|
|
@ -112,14 +112,14 @@ a { text-decoration: none; }
|
|||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #F0EDE8;
|
||||
background: #FBF5F5;
|
||||
font-family: 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
|
||||
}
|
||||
|
||||
/* 顶部公告条 */
|
||||
.top-bar {
|
||||
background: #0E1E3D;
|
||||
color: rgba(255,255,255,0.65);
|
||||
background: #8B4545;
|
||||
color: rgba(255,255,255,0.75);
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
|
@ -144,8 +144,8 @@ a { text-decoration: none; }
|
|||
|
||||
/* 主导航 */
|
||||
.main-header {
|
||||
background: linear-gradient(180deg, #12264F 0%, #0E1E3D 100%);
|
||||
box-shadow: 0 4px 20px rgba(14,30,61,0.4);
|
||||
background: linear-gradient(180deg, #C17A7A 0%, #A85555 100%);
|
||||
box-shadow: 0 4px 20px rgba(168,85,85,0.3);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
|
|
@ -243,8 +243,8 @@ a { text-decoration: none; }
|
|||
.btn-ghost:hover { border-color: #C8973A; color: #C8973A; }
|
||||
.btn-primary {
|
||||
padding: 7px 20px;
|
||||
background: #B5272C;
|
||||
border: 1px solid #B5272C;
|
||||
background: #E57373;
|
||||
border: 1px solid #E57373;
|
||||
color: #fff;
|
||||
border-radius: 3px;
|
||||
font-size: 13px;
|
||||
|
|
@ -254,7 +254,7 @@ a { text-decoration: none; }
|
|||
font-weight: 600;
|
||||
font-family: inherit;
|
||||
}
|
||||
.btn-primary:hover { background: #9A2024; border-color: #9A2024; }
|
||||
.btn-primary:hover { background: #E86C6C; border-color: #E86C6C; }
|
||||
.user-badge {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
padding: 6px 14px;
|
||||
|
|
@ -272,10 +272,10 @@ a { text-decoration: none; }
|
|||
.user-name { color: rgba(255,255,255,0.85); font-size: 13px; }
|
||||
|
||||
/* 红色底线装饰 */
|
||||
.header-underline { height: 3px; background: #0E1E3D; }
|
||||
.header-underline { height: 3px; background: #8B4545; }
|
||||
.underline-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #B5272C 0%, #E63329 40%, #C8973A 100%);
|
||||
background: linear-gradient(90deg, #E57373 0%, #EF9A9A 40%, #D4A95D 100%);
|
||||
}
|
||||
|
||||
/* 内容区 */
|
||||
|
|
@ -289,8 +289,8 @@ a { text-decoration: none; }
|
|||
|
||||
/* 页脚 */
|
||||
.portal-footer {
|
||||
background: #0E1E3D;
|
||||
border-top: 3px solid #B5272C;
|
||||
background: #8B4545;
|
||||
border-top: 3px solid #E57373;
|
||||
padding: 20px 0;
|
||||
}
|
||||
.footer-inner {
|
||||
|
|
|
|||
|
|
@ -186,7 +186,7 @@
|
|||
<div class="content-section">
|
||||
<div class="section-heading"><span class="heading-bar"></span>工作地点</div>
|
||||
<div class="location-row">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#B5272C" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#E57373" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
|
||||
{{ selectedJob.location }}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -210,7 +210,7 @@
|
|||
</div>
|
||||
<div class="cc-divider"></div>
|
||||
<div class="cc-contact" v-if="selectedJob.organization?.email">
|
||||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#B5272C" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
|
||||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#E57373" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
|
||||
{{ selectedJob.organization.email }}
|
||||
</div>
|
||||
<button class="btn-apply-card" :class="{ loading: applying }" @click="handleApply">
|
||||
|
|
@ -225,7 +225,7 @@
|
|||
<template v-else>
|
||||
<div class="state-tip full-tip">
|
||||
<div class="empty-icon">
|
||||
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#C8973A" stroke-width="1.5"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
|
||||
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#D4A95D" stroke-width="1.5"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
|
||||
</div>
|
||||
<p>请从左侧选择企业及职位</p>
|
||||
</div>
|
||||
|
|
@ -333,14 +333,14 @@ onMounted(async () => {
|
|||
<style scoped>
|
||||
/* ── 变量 ── */
|
||||
.three-panel {
|
||||
--red: #B5272C;
|
||||
--dark: #0E1E3D;
|
||||
--gold: #C8973A;
|
||||
--gold-lt: #F0D080;
|
||||
--cream: #FAF7F3;
|
||||
--border: #E5DDD5;
|
||||
--text: #1A1A2E;
|
||||
--muted: #7A8094;
|
||||
--red: #E57373;
|
||||
--dark: #8B4545;
|
||||
--gold: #D4A95D;
|
||||
--gold-lt: #E8C573;
|
||||
--cream: #FBF5F5;
|
||||
--border: #E8DDD8;
|
||||
--text: #2A1A1A;
|
||||
--muted: #8B6B6B;
|
||||
|
||||
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(14,30,61,0.12);
|
||||
box-shadow: 0 4px 24px rgba(139,69,69,0.12);
|
||||
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
||||
}
|
||||
|
||||
|
|
@ -417,7 +417,7 @@ 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, #3D5A8A, #1E3460);
|
||||
background: linear-gradient(135deg, #C8A080, #9A7860);
|
||||
}
|
||||
.org-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
|
||||
.org-name {
|
||||
|
|
@ -506,14 +506,14 @@ onMounted(async () => {
|
|||
/* Banner */
|
||||
.detail-banner {
|
||||
position: relative;
|
||||
background: linear-gradient(135deg, #0E1E3D 0%, #1A2E56 50%, #1C1C3A 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(200,151,58,0.03) 20px, rgba(200,151,58,0.03) 21px),
|
||||
repeating-linear-gradient(-45deg, transparent, transparent 20px, rgba(200,151,58,0.03) 20px, rgba(200,151,58,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(200,151,58,0.15);
|
||||
border: 1px solid rgba(200,151,58,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(200,151,58,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(200,151,58,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(181,39,44,0.4);
|
||||
box-shadow: 0 4px 16px rgba(229,115,115,0.4);
|
||||
}
|
||||
.btn-apply:hover { background: #9A1F23; box-shadow: 0 6px 20px rgba(181,39,44,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,7 +591,7 @@ onMounted(async () => {
|
|||
background: #fff;
|
||||
border-radius: 6px;
|
||||
padding: 24px 28px;
|
||||
box-shadow: 0 2px 12px rgba(14,30,61,0.07);
|
||||
box-shadow: 0 2px 12px rgba(139,69,69,0.07);
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
.detail-right { width: 224px; flex-shrink: 0; }
|
||||
|
|
@ -643,7 +643,7 @@ onMounted(async () => {
|
|||
background: #fff;
|
||||
border-radius: 6px;
|
||||
padding: 18px;
|
||||
box-shadow: 0 2px 12px rgba(14,30,61,0.07);
|
||||
box-shadow: 0 2px 12px rgba(139,69,69,0.07);
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
.company-card-label {
|
||||
|
|
@ -655,7 +655,7 @@ onMounted(async () => {
|
|||
.cc-logo {
|
||||
width: 48px; height: 48px;
|
||||
border-radius: 8px; overflow: hidden; flex-shrink: 0;
|
||||
background: linear-gradient(135deg, #C8973A, #9A6E28);
|
||||
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);
|
||||
|
|
@ -677,7 +677,7 @@ onMounted(async () => {
|
|||
transition: background 0.2s;
|
||||
font-family: inherit; letter-spacing: 0.05em;
|
||||
}
|
||||
.btn-apply-card:hover { background: #9A1F23; }
|
||||
.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, #E8E0D8 25%, #F0E8E0 50%, #E8E0D8 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