专家库

src/views/expert/list/index.vue

@@ -3,45 +3,46 @@
     <div class="table-title">专家梯队示例</div>
 
     <div class="table-list">
-      <table
+      <div
         v-for="row in tableData"
         :key="row.teamName"
-        class="ladder-row-table"
+        class="ladder-row"
         :style="{ width: row.tableWidth }"
       >
-        <colgroup>
-          <col :style="{ width: row.teamWidth }" />
-          <col
-            v-for="(_, index) in row.columnWidths"
-            :key="index"
-            :style="{ width: `${getColumnPercent(row, index)}%` }"
-          />
-        </colgroup>
-
-        <tbody>
-          <tr>
-            <td class="team-cell">{{ row.teamName }}</td>
-
-            <td v-for="(cell, index) in row.cells" :key="index" class="step-cell">
-              <template v-if="cell.type === 'members'">
-                <button
-                  v-for="member in cell.members"
-                  :key="member"
-                  type="button"
-                  class="member-link"
-                  @click="handleMemberClick(member)"
-                >
-                  {{ member }}
-                </button>
-              </template>
-
-              <span v-else :class="['cell-text', cell.tone === 'danger' ? 'is-danger' : '']">
-                {{ cell.text }}
-              </span>
-            </td>
-          </tr>
-        </tbody>
-      </table>
+        <div class="team-cell">{{ row.teamName }}</div>
+
+        <table class="content-table">
+          <colgroup>
+            <col
+              v-for="(_, index) in row.columnWidths"
+              :key="index"
+              :style="{ width: `${getColumnPercent(row, index)}%` }"
+            />
+          </colgroup>
+
+          <tbody>
+            <tr>
+              <td v-for="(cell, index) in row.cells" :key="index" class="step-cell">
+                <template v-if="cell.type === 'members'">
+                  <button
+                    v-for="member in cell.members"
+                    :key="member"
+                    type="button"
+                    class="member-link"
+                    @click="handleMemberClick(member)"
+                  >
+                    {{ member }}
+                  </button>
+                </template>
+
+                <span v-else :class="['cell-text', cell.tone === 'danger' ? 'is-danger' : '']">
+                  {{ cell.text }}
+                </span>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
     </div>
 
     <div v-if="selectedMember" class="member-detail"> 当前查看人员：{{ selectedMember }} </div>
@@ -65,7 +66,6 @@ type CellItem =
 type TableRow = {
   teamName: string
   tableWidth: string
-  teamWidth: string
   columnWidths: number[]
   cells: CellItem[]
 }
@@ -74,23 +74,21 @@ const tableData: TableRow[] = [
   {
     teamName: '第一梯队',
     tableWidth: '64%',
-    teamWidth: '90px',
-    columnWidths: [1, 1, 1, 1, 1],
+    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' },
       { type: 'text', text: '' }
     ]
   },
   {
     teamName: '第二梯队',
     tableWidth: '75%',
-    teamWidth: '90px',
-    columnWidths: [1.5, 1.5, 1.5, 1.5, 1.5],
+    columnWidths: [1.8, 1.8, 1.8, 1.8, 1.8],
     cells: [
-      { type: 'members', members: ['朱桂林', '孙乐臻', '王军', '钟国伟', '李伟伟', '张伟伟'] },
+      { type: 'members', members: ['朱桂林', '孙乐臻', '王军', '符云', '王伟', '王伟', '李四'] },
       { type: 'text', text: '' },
       { type: 'text', text: '' },
       { type: 'text', text: '' },
@@ -100,28 +98,9 @@ const tableData: TableRow[] = [
   {
     teamName: '第三梯队',
     tableWidth: '100%',
-    teamWidth: '90px',
-    columnWidths: [1.8, 1.8, 1.8, 1.8, 1.8],
+    columnWidths: [2, 2, 2, 2, 2],
     cells: [
-      {
-        type: 'members',
-        members: [
-          '朱桂林',
-          '孙乐臻',
-          '王军',
-          '钟国伟',
-          '李伟伟',
-          '张伟伟',
-          '张三',
-          '李四',
-          '王五',
-          '赵六',
-          '钱七',
-          '孙八',
-          '周九',
-          '吴十'
-        ]
-      },
+      { type: 'members', members: ['朱桂林', '孙乐臻', '王军', '符云', '王伟', '王伟', '李四'] },
       { type: 'text', text: '' },
       { type: 'text', text: '' },
       { type: 'text', text: '' },
@@ -164,32 +143,48 @@ const handleMemberClick = (member: string) => {
   overflow: hidden;
 }
 
-.ladder-row-table {
+.ladder-row {
+  display: flex;
+  width: 100%;
   max-width: 100%;
-  margin: 0;
+  min-width: 0;
+  min-height: 78px;
+}
+
+.ladder-row + .ladder-row {
+  margin-top: -1px;
+}
+
+.team-cell {
+  display: flex;
+  flex: 0 0 90px;
+  align-items: center;
+  justify-content: center;
+  min-height: 78px;
+  padding: 12px;
+  border: 1px solid #303030;
+  box-sizing: border-box;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.content-table {
+  flex: 1 1 auto;
+  width: 0;
+  min-width: 0;
   table-layout: fixed;
   border-collapse: collapse;
   border-spacing: 0;
   background: #fff;
 }
 
-.ladder-row-table + .ladder-row-table {
-  border-top: 0;
-}
-
-.ladder-row-table td {
+.content-table td {
   height: 78px;
   padding: 12px;
   border: 1px solid #303030;
   box-sizing: border-box;
 }
 
-.team-cell {
-  text-align: center;
-  font-weight: 600;
-  white-space: nowrap;
-}
-
 .step-cell {
   text-align: center;
   vertical-align: middle;