From 93b48f344bc3254a2447d15219e8ed2320e10b4e Mon Sep 17 00:00:00 2001
From: Claude <claude@local>
Date: Fri, 26 Jun 2026 09:49:33 +0800
Subject: [PATCH] =?UTF-8?q?style:=20CompanyListView=20=E7=BB=9F=E4=B8=80?=
 =?UTF-8?q?=E5=9B=BD=E8=81=98=E7=BA=A2=E9=85=8D=E8=89=B2=E4=B8=8E=E7=BC=96?=
 =?UTF-8?q?=E8=BE=91=E5=BC=8F=E9=A3=8E=E6=A0=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Hero 暗蓝渐变改白底, 标题改宋体, 去掉金色按钮覆盖(回归红色主按钮)
- 组织架构根节点/学历标签 金/暗蓝 改红色; 子节点 hover 改红
- 学历 chips 金色计数改红; 全站中性色对齐 Ant 暖灰
- section 标题改宋体, 边框/圆角统一细线直角风

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../src/views/portal/CompanyListView.vue      | 390 ++++++++++--------
 1 file changed, 226 insertions(+), 164 deletions(-)

diff --git a/offer_frontend/src/views/portal/CompanyListView.vue b/offer_frontend/src/views/portal/CompanyListView.vue
index f0f899b..10f12bd 100644
--- a/offer_frontend/src/views/portal/CompanyListView.vue
+++ b/offer_frontend/src/views/portal/CompanyListView.vue
@@ -17,9 +17,7 @@
             <span>
               <el-icon><Briefcase /></el-icon> 在招职位 {{ group.job_count }} 个
             </span>
-            <span>
-              <el-icon><OfficeBuilding /></el-icon> 成员单位 {{ group.children?.length || 0 }} 家
-            </span>
+
           </div>
           <div class="hero-desc">{{ group.description }}</div>
           <el-button
@@ -33,7 +31,7 @@
       </div>
     </section>
 
-    <!-- ② 组织架构图 -->
+    <!-- ② 组织架构图（上移 & 放大） -->
     <section class="org-section">
       <div class="section-inner">
         <div class="section-header">
@@ -69,6 +67,18 @@
                   <div class="node-name">{{ child.name }}</div>
                   <div class="node-jobs" v-if="child.job_count">在招 {{ child.job_count }} 岗</div>
                 </div>
+                <!-- 学历招聘人数（竖排） -->
+                <div class="child-edu-list" v-if="child.edu_summary && child.edu_summary.length">
+                  <div
+                    v-for="item in child.edu_summary"
+                    :key="item.education"
+                    class="child-edu-col"
+                  >
+                    <span v-for="ch in item.education" :key="ch" class="child-edu-char">{{ ch }}</span>
+                    <span class="child-edu-count">{{ item.count }}</span>
+                    <span class="child-edu-char">人</span>
+                  </div>
+                </div>
               </div>
             </div>
           </div>
@@ -76,44 +86,37 @@
       </div>
     </section>
 
-    <!-- ③ 成员单位 -->
-    <section class="members-section">
+    <!-- ③ 在招职位汇总（折叠式） -->
+    <section class="jobs-edu-section" v-if="group.jobs_by_education && group.jobs_by_education.length">
       <div class="section-inner">
         <div class="section-header">
           <span class="section-bar"></span>
-          <span class="section-title">成员单位</span>
-          <span class="section-count">共 {{ group.children?.length || 0 }} 家</span>
+          <span class="section-title">在招职位</span>
         </div>
-        <div class="members-grid">
-          <div
-            v-for="child in group.children"
-            :key="child.id"
-            class="member-card"
-            @click="$router.push(`/companies/${child.id}`)"
-          >
-            <div class="member-header">
-              <div class="member-logo">
-                <img v-if="child.logo" :src="child.logo" alt="logo" />
-                <div v-else class="member-logo-placeholder">{{ child.name?.charAt(0) }}</div>
+        <div class="edu-table">
+          <div v-for="group_edu in group.jobs_by_education" :key="group_edu.education" class="edu-row">
+            <div class="edu-summary" @click="toggleEdu(group_edu.education)">
+              <div class="edu-tag">{{ group_edu.education }}</div>
+              <div class="edu-total-badge">
+                共计 <strong>{{ group_edu.jobs.reduce((s, j) => s + (j.headcount || 0), 0) }}</strong> 人
               </div>
-              <div class="member-info">
-                <div class="member-name">{{ child.name }}</div>
-                <div class="member-jobs" v-if="child.job_count">
-                  <el-tag size="small" type="success">在招 {{ child.job_count }} 个职位</el-tag>
+              <el-icon class="edu-arrow" :class="{ 'is-open': expandedEdus.has(group_edu.education) }">
+                <ArrowDown />
+              </el-icon>
+            </div>
+            <transition name="slide">
+              <div v-if="expandedEdus.has(group_edu.education)" class="edu-chips">
+                <div v-for="job in group_edu.jobs" :key="job.title" class="edu-chip">
+                  <span class="chip-title">{{ job.title }}</span>
+                  <span class="chip-count">{{ job.headcount }}人</span>
                 </div>
               </div>
-            </div>
-            <div class="member-desc">{{ child.description?.slice(0, 120) }}{{ child.description?.length > 120 ? '...' : '' }}</div>
-            <div class="member-footer">
-              <span class="member-email" v-if="child.email">
-                <el-icon><Message /></el-icon> {{ child.email }}
-              </span>
-              <el-button type="primary" link size="small" @click.stop="$router.push({ path: '/home', query: { org: child.id } })">查看职位 →</el-button>
-            </div>
+            </transition>
           </div>
         </div>
       </div>
     </section>
+
   </div>
 
   <div v-else-if="loading" v-loading="true" style="height: 400px"></div>
@@ -123,11 +126,19 @@
 import { ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { getOrganizations } from '@/api/organizations'
-import { Message, OfficeBuilding, Briefcase } from '@element-plus/icons-vue'
+import { Message, Briefcase, ArrowDown } from '@element-plus/icons-vue'
 
 const router = useRouter()
 const group = ref(null)
 const loading = ref(true)
+const expandedEdus = ref(new Set())
+
+function toggleEdu(edu) {
+  const s = new Set(expandedEdus.value)
+  if (s.has(edu)) s.delete(edu)
+  else s.add(edu)
+  expandedEdus.value = s
+}
 
 onMounted(async () => {
   try {
@@ -142,15 +153,18 @@ onMounted(async () => {
 
 <style scoped>
 .company-page {
-  background: #f5f6fa;
+  --serif: 'Noto Serif SC', 'Source Han Serif SC', 'Songti SC', 'STSong', 'SimSun', serif;
+  background: var(--bg-page);
   min-height: calc(100vh - 120px);
+  font-family: 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', system-ui, sans-serif;
 }
 
 /* ========== Hero ========== */
 .hero-section {
-  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 60%, #0f3460 100%);
-  padding: 56px 0 48px;
-  color: #fff;
+  background: #fff;
+  border-bottom: 1px solid var(--border);
+  padding: 48px 0 44px;
+  color: var(--text-main);
 }
 .hero-inner {
   max-width: 1100px;
@@ -164,10 +178,10 @@ onMounted(async () => {
   flex-shrink: 0;
   width: 96px;
   height: 96px;
-  border-radius: 12px;
+  border-radius: 4px;
   overflow: hidden;
-  border: 2px solid rgba(255,255,255,0.2);
-  background: rgba(255,255,255,0.05);
+  border: 1px solid var(--border);
+  background: var(--bg-page);
 }
 .hero-logo img { width: 100%; height: 100%; object-fit: cover; }
 .logo-placeholder {
@@ -176,28 +190,31 @@ onMounted(async () => {
   display: flex;
   align-items: center;
   justify-content: center;
+  font-family: var(--serif);
   font-size: 36px;
   font-weight: 700;
-  color: #c9a84c;
+  color: var(--brand-red);
 }
 .hero-name {
-  font-size: 26px;
+  font-family: var(--serif);
+  font-size: 28px;
   font-weight: 700;
   margin: 0 0 12px;
-  color: #fff;
+  color: var(--text-main);
+  letter-spacing: 0.04em;
 }
 .hero-name-link {
   cursor: pointer;
   transition: color 0.2s;
 }
 .hero-name-link:hover {
-  color: #c9a84c;
+  color: var(--brand-red);
 }
 .hero-meta {
   display: flex;
   gap: 20px;
   font-size: 13px;
-  color: rgba(255,255,255,0.65);
+  color: var(--text-muted);
   margin-bottom: 16px;
   flex-wrap: wrap;
 }
@@ -209,7 +226,7 @@ onMounted(async () => {
 .hero-desc {
   font-size: 13px;
   line-height: 1.9;
-  color: rgba(255,255,255,0.8);
+  color: var(--text-muted);
   max-height: 120px;
   overflow: hidden;
   display: -webkit-box;
@@ -218,23 +235,13 @@ onMounted(async () => {
   margin-bottom: 20px;
 }
 .hero-btn {
-  background: #c9a84c !important;
-  border-color: #c9a84c !important;
-  color: #1a1a2e !important;
   font-weight: 600;
-}
-.hero-btn:hover {
-  background: #e0bc5a !important;
-  border-color: #e0bc5a !important;
+  letter-spacing: 0.05em;
 }
 
 /* ========== 通用 Section ========== */
-.org-section,
-.members-section {
-  padding: 40px 0;
-}
-.members-section {
-  padding-bottom: 56px;
+.org-section {
+  padding: 40px 0 0;
 }
 .section-inner {
   max-width: 1100px;
@@ -251,34 +258,142 @@ onMounted(async () => {
   display: inline-block;
   width: 4px;
   height: 20px;
-  background: #c9a84c;
+  background: var(--brand-red);
   border-radius: 2px;
 }
 .section-title {
+  font-family: var(--serif);
   font-size: 20px;
   font-weight: 700;
-  color: #1a1a2e;
+  color: var(--text-main);
+  letter-spacing: 0.06em;
 }
 .section-count {
   font-size: 13px;
-  color: #999;
+  color: var(--text-muted);
   margin-left: 4px;
 }
 
-/* ========== 组织架构图 ========== */
+/* ========== 在招职位（折叠式） ========== */
+.jobs-edu-section {
+  padding: 40px 0 56px;
+}
+.edu-table {
+  background: #fff;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  box-shadow: 0 1px 6px rgba(0,0,0,.04);
+  padding: 8px 24px;
+}
+.edu-row {
+  padding: 0;
+  border-bottom: 1px solid var(--border);
+}
+.edu-row:last-child {
+  border-bottom: none;
+}
+.edu-summary {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 16px 8px;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: background 0.2s;
+  user-select: none;
+}
+.edu-summary:hover {
+  background: var(--brand-red-bg);
+}
+.edu-tag {
+  font-family: var(--serif);
+  font-size: 16px;
+  font-weight: 700;
+  color: #fff;
+  background: var(--brand-red);
+  border-radius: 3px;
+  padding: 6px 18px;
+  text-align: center;
+  white-space: nowrap;
+}
+.edu-total-badge {
+  font-size: 15px;
+  color: var(--text-main);
+  white-space: nowrap;
+}
+.edu-total-badge strong {
+  color: var(--brand-red);
+  font-size: 20px;
+  margin: 0 2px;
+}
+.edu-arrow {
+  margin-left: auto;
+  font-size: 16px;
+  color: var(--text-muted);
+  transition: transform 0.3s;
+}
+.edu-arrow.is-open {
+  transform: rotate(180deg);
+  color: var(--brand-red);
+}
+.edu-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  padding: 0 8px 16px 52px;
+}
+.edu-chip {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  background: var(--brand-red-bg);
+  border: 1px solid #FBC4C1;
+  border-radius: 3px;
+  padding: 5px 14px;
+  font-size: 14px;
+}
+.chip-title {
+  color: var(--text-main);
+}
+.chip-count {
+  color: var(--brand-red);
+  font-weight: 600;
+  white-space: nowrap;
+}
+/* 展开/折叠动画 */
+.slide-enter-active,
+.slide-leave-active {
+  transition: all 0.3s ease;
+  overflow: hidden;
+}
+.slide-enter-from,
+.slide-leave-to {
+  opacity: 0;
+  max-height: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+.slide-enter-to,
+.slide-leave-from {
+  opacity: 1;
+  max-height: 500px;
+}
+
+/* ========== 组织架构图（放大） ========== */
 .org-chart {
   background: #fff;
-  border-radius: 12px;
-  padding: 32px 24px 28px;
-  box-shadow: 0 1px 6px rgba(0,0,0,.06);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  padding: 48px 32px 40px;
+  box-shadow: 0 1px 6px rgba(0,0,0,.04);
   overflow-x: auto;
 }
 /* 内层：所有元素同宽、列方向排列 */
 .org-inner {
   display: flex;
   flex-direction: column;
-  align-items: stretch;   /* 子元素全部拉伸到同一宽度 */
-  min-width: 880px;
+  align-items: stretch;
+  min-width: 960px;
 }
 /* 根节点区：居中 */
 .org-root {
@@ -289,37 +404,39 @@ onMounted(async () => {
 .root-v-line {
   width: 2px;
   height: 20px;
-  background: #c8c8c8;
+  background: var(--border);
 }
 /* 横线：和 org-inner 等宽，天然对齐 */
 .org-h-line {
   height: 2px;
-  background: #c8c8c8;
+  background: var(--border);
   width: 100%;
 }
 .org-node {
-  border-radius: 8px;
+  border-radius: 4px;
   padding: 10px 16px;
   text-align: center;
   min-width: 100px;
 }
 .root-node {
-  background: linear-gradient(135deg, #1a1a2e, #0f3460);
+  background: var(--brand-red);
   color: #fff;
-  padding: 14px 28px;
-  border-radius: 10px;
-  min-width: 220px;
+  padding: 18px 36px;
+  border-radius: 4px;
+  min-width: 260px;
 }
 .root-node .node-name {
-  font-size: 15px;
+  font-family: var(--serif);
+  font-size: 18px;
   font-weight: 700;
   color: #fff;
   line-height: 1.4;
 }
 .root-node .node-sub {
-  font-size: 11px;
-  color: #c9a84c;
+  font-size: 12px;
+  color: rgba(255,255,255,0.8);
   margin-top: 4px;
+  letter-spacing: 0.1em;
 }
 /* 子节点行：和 org-inner 等宽 */
 .org-children {
@@ -335,119 +452,64 @@ onMounted(async () => {
 .child-v-line {
   width: 2px;
   height: 20px;
-  background: #c8c8c8;
+  background: var(--border);
 }
 .child-node {
-  background: #f0f4ff;
-  border: 1px solid #d0d9f0;
+  background: #fff;
+  border: 1px solid var(--border);
   cursor: pointer;
   transition: all 0.2s;
   width: 100%;
   box-sizing: border-box;
 }
 .child-node:hover {
-  background: #1a1a2e;
-  border-color: #1a1a2e;
+  background: var(--brand-red);
+  border-color: var(--brand-red);
 }
 .child-node:hover .node-name {
   color: #fff;
 }
 .child-node:hover .node-jobs {
-  color: #c9a84c;
+  color: rgba(255,255,255,0.85);
 }
 .child-node .node-name {
-  font-size: 11px;
+  font-size: 13px;
   font-weight: 600;
-  color: #1a1a2e;
+  color: var(--text-main);
   line-height: 1.4;
 }
 .child-node .node-jobs {
-  font-size: 10px;
-  color: #888;
-  margin-top: 3px;
+  font-size: 11px;
+  color: var(--text-muted);
+  margin-top: 4px;
 }
-
-/* ========== 成员单位网格 ========== */
-.members-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 20px;
+/* 子公司学历招聘人数（竖排） */
+.child-edu-list {
+  margin-top: 8px;
+  display: flex;
+  justify-content: center;
+  gap: 6px;
 }
-@media (max-width: 900px) {
-  .members-grid { grid-template-columns: repeat(2, 1fr); }
-}
-@media (max-width: 600px) {
-  .members-grid { grid-template-columns: 1fr; }
-}
-.member-card {
-  background: #fff;
-  border-radius: 10px;
-  padding: 20px;
-  box-shadow: 0 1px 4px rgba(0,0,0,.06);
-  cursor: pointer;
-  transition: box-shadow 0.2s, transform 0.2s;
+.child-edu-col {
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  align-items: center;
+  gap: 2px;
+  background: var(--bg-page);
+  border: 1px solid var(--border);
+  border-radius: 3px;
+  padding: 6px 4px;
 }
-.member-card:hover {
-  box-shadow: 0 4px 16px rgba(0,0,0,.12);
-  transform: translateY(-2px);
+.child-edu-char {
+  font-size: 11px;
+  color: var(--text-muted);
+  line-height: 1.2;
 }
-.member-header {
-  display: flex;
-  gap: 12px;
-  align-items: flex-start;
-}
-.member-logo {
-  width: 44px;
-  height: 44px;
-  border-radius: 8px;
-  overflow: hidden;
-  border: 1px solid #eee;
-  flex-shrink: 0;
-}
-.member-logo img { width: 100%; height: 100%; object-fit: cover; }
-.member-logo-placeholder {
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(135deg, #1a1a2e, #0f3460);
-  color: #c9a84c;
-  font-size: 18px;
+.child-edu-count {
+  color: var(--brand-red);
   font-weight: 700;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.member-name {
   font-size: 14px;
-  font-weight: 600;
-  color: #1a1a2e;
-  line-height: 1.4;
-  margin-bottom: 4px;
-}
-.member-desc {
-  font-size: 12px;
-  color: #666;
-  line-height: 1.8;
-  flex: 1;
-}
-.member-footer {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-top: 1px solid #f0f0f0;
-  padding-top: 10px;
-  font-size: 12px;
-  color: #999;
-}
-.member-email {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  max-width: 60%;
+  line-height: 1.2;
+  margin: 2px 0;
 }
 </style>