zcdsj
/
Recruitment_site
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(portal): 修复组织架构图连接线对齐问题，使用 org-inner 统一宽度 

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
TianyangZhang 2026-03-26 13:52:00 +08:00
parent 819ad3e7f1
commit a15eae5f5d
1 changed files with 44 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
offer_frontend/src/views/portal/CompanyListView.vue
View File

@ -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;