|
|
@@ -34,6 +34,8 @@
|
|
|
:key="index"
|
|
|
:class="['step-cell', cell.tone === 'danger' ? 'notice-cell' : '']"
|
|
|
>
|
|
|
+ <span class="cell-bookmark">{{ cellBookmarks[index] }}</span>
|
|
|
+
|
|
|
<template v-if="cell.type === 'members'">
|
|
|
<button
|
|
|
v-for="member in cell.members"
|
|
|
@@ -103,7 +105,7 @@ const tableData: TableRow[] = [
|
|
|
'王伟',
|
|
|
'王伟',
|
|
|
'李四',
|
|
|
- '朱桂林',
|
|
|
+
|
|
|
'孙乐臻',
|
|
|
'王军',
|
|
|
'符云',
|
|
|
@@ -165,6 +167,7 @@ const tableData: TableRow[] = [
|
|
|
]
|
|
|
|
|
|
const selectedMember = ref('')
|
|
|
+const cellBookmarks = ['技术', '经营', '商务', '安全', '法务']
|
|
|
|
|
|
const getColumnPercent = (row: TableRow, index: number) => {
|
|
|
const total = row.columnWidths.reduce((sum, width) => sum + width, 0)
|
|
|
@@ -344,7 +347,7 @@ const handleMemberClick = (member: string) => {
|
|
|
|
|
|
.content-table td {
|
|
|
height: 78px;
|
|
|
- padding: 10px 14px;
|
|
|
+ padding: 10px 14px 10px 26px;
|
|
|
border: 1px solid var(--line);
|
|
|
box-sizing: border-box;
|
|
|
background-color: var(--row-bg);
|
|
|
@@ -358,6 +361,30 @@ const handleMemberClick = (member: string) => {
|
|
|
word-break: break-all;
|
|
|
}
|
|
|
|
|
|
+.cell-bookmark {
|
|
|
+ position: absolute;
|
|
|
+ top: 10px;
|
|
|
+ left: -1px;
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ min-width: 18px;
|
|
|
+ height: 48px;
|
|
|
+ padding: 4px 2px;
|
|
|
+ border: 1px solid rgba(70, 125, 164, 0.28);
|
|
|
+ border-left: 0;
|
|
|
+ border-radius: 0 6px 6px 0;
|
|
|
+ background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(230, 238, 244, 0.92));
|
|
|
+ box-shadow: 0 6px 14px rgba(24, 37, 54, 0.08);
|
|
|
+ color: #47657e;
|
|
|
+ font-size: 10px;
|
|
|
+ font-weight: 700;
|
|
|
+ letter-spacing: 0.08em;
|
|
|
+ line-height: 1.1;
|
|
|
+ writing-mode: vertical-rl;
|
|
|
+ text-orientation: upright;
|
|
|
+}
|
|
|
+
|
|
|
.notice-cell {
|
|
|
background-image: linear-gradient(135deg, rgba(178, 109, 66, 0.09), transparent 60%);
|
|
|
}
|
|
|
@@ -468,7 +495,7 @@ const handleMemberClick = (member: string) => {
|
|
|
}
|
|
|
|
|
|
.content-table td {
|
|
|
- padding: 8px 6px;
|
|
|
+ padding: 8px 6px 8px 22px;
|
|
|
}
|
|
|
|
|
|
.member-link {
|
|
|
@@ -476,6 +503,13 @@ const handleMemberClick = (member: string) => {
|
|
|
font-size: 11px;
|
|
|
}
|
|
|
|
|
|
+ .cell-bookmark {
|
|
|
+ top: 8px;
|
|
|
+ min-width: 16px;
|
|
|
+ height: 42px;
|
|
|
+ font-size: 9px;
|
|
|
+ }
|
|
|
+
|
|
|
.member-detail {
|
|
|
flex-wrap: wrap;
|
|
|
gap: 8px;
|
