From a15eae5f5d9515eeaae98a3f85f134db3ea125c1 Mon Sep 17 00:00:00 2001
From: TianyangZhang <zty18395607196@163.com>
Date: Thu, 26 Mar 2026 13:52:00 +0800
Subject: [PATCH] =?UTF-8?q?fix(portal):=20=E4=BF=AE=E5=A4=8D=E7=BB=84?=
 =?UTF-8?q?=E7=BB=87=E6=9E=B6=E6=9E=84=E5=9B=BE=E8=BF=9E=E6=8E=A5=E7=BA=BF?=
 =?UTF-8?q?=E5=AF=B9=E9=BD=90=E9=97=AE=E9=A2=98=EF=BC=8C=E4=BD=BF=E7=94=A8?=
 =?UTF-8?q?=20org-inner=20=E7=BB=9F=E4=B8=80=E5=AE=BD=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../src/views/portal/CompanyListView.vue      | 73 +++++++++++--------
 1 file changed, 44 insertions(+), 29 deletions(-)

diff --git a/offer_frontend/src/views/portal/CompanyListView.vue b/offer_frontend/src/views/portal/CompanyListView.vue
index 8c86ce5..09858f5 100644
--- a/offer_frontend/src/views/portal/CompanyListView.vue
+++ b/offer_frontend/src/views/portal/CompanyListView.vue
@@ -40,30 +40,35 @@
           <span class="section-bar"></span>
           <span class="section-title">组织架构</span>
         </div>
+        <!-- org-chart 只负责外层滚动 -->
         <div class="org-chart">
-          <!-- 根节点 -->
-          <div class="org-root">
-            <div class="org-node root-node">
-              <div class="node-name">{{ group.name }}</div>
-              <div class="node-sub">集团总院</div>
+          <!-- 内层固定宽度，所有元素在此对齐 -->
+          <div class="org-inner">
+            <!-- 根节点 + 竖线 -->
+            <div class="org-root">
+              <div class="org-node root-node">
+                <div class="node-name">{{ group.name }}</div>
+                <div class="node-sub">集团总院</div>
+              </div>
+              <div class="root-v-line"></div>
             </div>
-            <!-- 根节点下的竖线 -->
-            <div class="root-v-line"></div>
-          </div>
-          <!-- 子节点区域（横线用 before 伪元素覆盖） -->
-          <div class="org-children">
-            <div
-              v-for="child in group.children"
-              :key="child.id"
-              class="org-child-wrap"
-            >
-              <div class="child-v-line"></div>
+            <!-- 横线：宽度与 org-inner 相同，保证对齐 -->
+            <div class="org-h-line"></div>
+            <!-- 子节点行：宽度与 org-inner 相同 -->
+            <div class="org-children">
               <div
-                class="org-node child-node"
-                @click="$router.push(`/companies/${child.id}`)"
+                v-for="child in group.children"
+                :key="child.id"
+                class="org-child-wrap"
               >
-                <div class="node-name">{{ child.name }}</div>
-                <div class="node-jobs" v-if="child.job_count">在招 {{ child.job_count }} 岗</div>
+                <div class="child-v-line"></div>
+                <div
+                  class="org-node child-node"
+                  @click="$router.push(`/companies/${child.id}`)"
+                >
+                  <div class="node-name">{{ child.name }}</div>
+                  <div class="node-jobs" v-if="child.job_count">在招 {{ child.job_count }} 岗</div>
+                </div>
               </div>
             </div>
           </div>
@@ -261,16 +266,29 @@ onMounted(async () => {
   box-shadow: 0 1px 6px rgba(0,0,0,.06);
   overflow-x: auto;
 }
+/* 内层：所有元素同宽、列方向排列 */
+.org-inner {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;   /* 子元素全部拉伸到同一宽度 */
+  min-width: 880px;
+}
+/* 根节点区：居中 */
 .org-root {
   display: flex;
   flex-direction: column;
   align-items: center;
-  margin-bottom: 0;
 }
 .root-v-line {
   width: 2px;
-  height: 24px;
-  background: #d0d0d0;
+  height: 20px;
+  background: #c8c8c8;
+}
+/* 横线：和 org-inner 等宽，天然对齐 */
+.org-h-line {
+  height: 2px;
+  background: #c8c8c8;
+  width: 100%;
 }
 .org-node {
   border-radius: 8px;
@@ -296,13 +314,10 @@ onMounted(async () => {
   color: #c9a84c;
   margin-top: 4px;
 }
-/* 子节点行 */
+/* 子节点行：和 org-inner 等宽 */
 .org-children {
   display: flex;
-  justify-content: space-between;
-  gap: 8px;
-  min-width: 900px;
-  border-top: 2px solid #d0d0d0;
+  width: 100%;
 }
 .org-child-wrap {
   display: flex;
@@ -313,7 +328,7 @@ onMounted(async () => {
 .child-v-line {
   width: 2px;
   height: 20px;
-  background: #d0d0d0;
+  background: #c8c8c8;
 }
 .child-node {
   background: #f0f4ff;