|
|
@@ -7,7 +7,7 @@
|
|
|
v-for="row in tableData"
|
|
|
:key="row.teamName"
|
|
|
class="ladder-row"
|
|
|
- :style="{ width: row.tableWidth }"
|
|
|
+ :style="{ width: row.tableWidth, '--row-bg': row.backgroundColor }"
|
|
|
>
|
|
|
<div class="team-cell">{{ row.teamName }}</div>
|
|
|
|
|
|
@@ -66,6 +66,7 @@ type CellItem =
|
|
|
type TableRow = {
|
|
|
teamName: string
|
|
|
tableWidth: string
|
|
|
+ backgroundColor: string
|
|
|
columnWidths: number[]
|
|
|
cells: CellItem[]
|
|
|
}
|
|
|
@@ -74,9 +75,28 @@ const tableData: TableRow[] = [
|
|
|
{
|
|
|
teamName: '第一梯队',
|
|
|
tableWidth: '64%',
|
|
|
+ backgroundColor: '#eef6ff',
|
|
|
columnWidths: [1.5, 1.5, 1.5, 1.5, 1.5],
|
|
|
cells: [
|
|
|
- { type: 'members', members: ['朱桂林', '孙乐臻', '王军', '符云', '王伟', '王伟', '李四'] },
|
|
|
+ {
|
|
|
+ type: 'members',
|
|
|
+ members: [
|
|
|
+ '朱桂林',
|
|
|
+ '孙乐臻',
|
|
|
+ '王军',
|
|
|
+ '符云',
|
|
|
+ '王伟',
|
|
|
+ '王伟',
|
|
|
+ '李四',
|
|
|
+ '朱桂林',
|
|
|
+ '孙乐臻',
|
|
|
+ '王军',
|
|
|
+ '符云',
|
|
|
+ '王伟',
|
|
|
+ '王伟',
|
|
|
+ '李四'
|
|
|
+ ]
|
|
|
+ },
|
|
|
{ type: 'text', text: '' },
|
|
|
{ type: 'text', text: '' },
|
|
|
{ type: 'text', text: '', tone: 'danger' },
|
|
|
@@ -86,6 +106,7 @@ const tableData: TableRow[] = [
|
|
|
{
|
|
|
teamName: '第二梯队',
|
|
|
tableWidth: '75%',
|
|
|
+ backgroundColor: '#f2faef',
|
|
|
columnWidths: [1.8, 1.8, 1.8, 1.8, 1.8],
|
|
|
cells: [
|
|
|
{ type: 'members', members: ['朱桂林', '孙乐臻', '王军', '符云', '王伟', '王伟', '李四'] },
|
|
|
@@ -98,9 +119,28 @@ const tableData: TableRow[] = [
|
|
|
{
|
|
|
teamName: '第三梯队',
|
|
|
tableWidth: '100%',
|
|
|
+ backgroundColor: '#fff8e8',
|
|
|
columnWidths: [2, 2, 2, 2, 2],
|
|
|
cells: [
|
|
|
- { type: 'members', members: ['朱桂林', '孙乐臻', '王军', '符云', '王伟', '王伟', '李四'] },
|
|
|
+ {
|
|
|
+ type: 'members',
|
|
|
+ members: [
|
|
|
+ '朱桂林',
|
|
|
+ '孙乐臻',
|
|
|
+ '王军',
|
|
|
+ '符云',
|
|
|
+ '王伟',
|
|
|
+ '王伟',
|
|
|
+ '李四',
|
|
|
+ '朱桂林',
|
|
|
+ '孙乐臻',
|
|
|
+ '王军',
|
|
|
+ '符云',
|
|
|
+ '王伟',
|
|
|
+ '王伟',
|
|
|
+ '李四'
|
|
|
+ ]
|
|
|
+ },
|
|
|
{ type: 'text', text: '' },
|
|
|
{ type: 'text', text: '' },
|
|
|
{ type: 'text', text: '' },
|
|
|
@@ -164,6 +204,7 @@ const handleMemberClick = (member: string) => {
|
|
|
padding: 12px;
|
|
|
border: 1px solid #303030;
|
|
|
box-sizing: border-box;
|
|
|
+ background-color: var(--row-bg);
|
|
|
font-weight: 600;
|
|
|
white-space: nowrap;
|
|
|
}
|
|
|
@@ -183,6 +224,7 @@ const handleMemberClick = (member: string) => {
|
|
|
padding: 12px;
|
|
|
border: 1px solid #303030;
|
|
|
box-sizing: border-box;
|
|
|
+ background-color: var(--row-bg);
|
|
|
}
|
|
|
|
|
|
.step-cell {
|