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