专家库

src/views/expert/list/index.vue

@@ -1,17 +1,24 @@
 <template>
   <div class="expert-step-table">
-    <div class="table-title">专家梯队示例</div>
+    <header class="table-intro">
+      <div class="intro-copy">
+        <h1>专家梯队</h1>
+      </div>
+    </header>
 
     <div class="table-list">
       <div
-        v-for="row in tableData"
+        v-for="(row, rowIndex) in tableData"
         :key="row.teamName"
         class="ladder-row"
         :style="{ width: row.tableWidth, '--row-bg': row.backgroundColor }"
       >
-        <div class="team-cell">{{ row.teamName }}</div>
+        <div class="team-cell">
+          <span class="team-index">0{{ rowIndex + 1 }}</span>
+          <span class="team-name">{{ row.teamName }}</span>
+        </div>
 
-        <table class="content-table">
+        <table class="content-table" :aria-label="row.teamName">
           <colgroup>
             <col
               v-for="(_, index) in row.columnWidths"
@@ -22,7 +29,11 @@
 
           <tbody>
             <tr>
-              <td v-for="(cell, index) in row.cells" :key="index" class="step-cell">
+              <td
+                v-for="(cell, index) in row.cells"
+                :key="index"
+                :class="['step-cell', cell.tone === 'danger' ? 'notice-cell' : '']"
+              >
                 <template v-if="cell.type === 'members'">
                   <button
                     v-for="member in cell.members"
@@ -45,7 +56,11 @@
       </div>
     </div>
 
-    <div v-if="selectedMember" class="member-detail"> 当前查看人员：{{ selectedMember }} </div>
+    <div v-if="selectedMember" class="member-detail">
+      <span class="detail-label">SELECTED EXPERT</span>
+      <strong>{{ selectedMember }}</strong>
+      <span class="detail-copy">已选中，可在此处接入人员详情面板。</span>
+    </div>
   </div>
 </template>
 
@@ -164,18 +179,97 @@ const handleMemberClick = (member: string) => {
 
 <style scoped lang="scss">
 .expert-step-table {
+  --ink: #182536;
+  --muted-ink: #718092;
+  --line: rgba(28, 44, 62, 0.18);
   width: 100%;
-  padding: 24px;
+  max-width: 1440px;
+  margin: 0 auto;
+  padding: 34px;
   overflow: hidden;
   box-sizing: border-box;
-  background: #f5f7fa;
+  background: radial-gradient(circle at 92% 4%, rgba(113, 145, 173, 0.18), transparent 28%),
+    linear-gradient(135deg, #f4f6f7 0%, #e9eef1 100%);
+  color: var(--ink);
+  font-family: 'Avenir Next', 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
 }
 
-.table-title {
-  margin-bottom: 16px;
-  font-size: 18px;
-  font-weight: 600;
-  color: #1f2937;
+.table-intro {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 32px;
+  margin-bottom: 28px;
+  padding: 0 4px 22px;
+  border-bottom: 1px solid rgba(28, 44, 62, 0.16);
+}
+
+.eyebrow {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 12px;
+  color: #758496;
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.18em;
+}
+
+.eyebrow-dot,
+.legend-dot {
+  display: inline-block;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: #b26d42;
+  box-shadow: 0 0 0 4px rgba(178, 109, 66, 0.13);
+}
+
+.table-intro h1 {
+  margin: 0;
+  color: var(--ink);
+  font-family: Georgia, 'Times New Roman', serif;
+  font-size: clamp(30px, 4vw, 46px);
+  font-weight: 500;
+  letter-spacing: -0.045em;
+  line-height: 1;
+}
+
+.table-intro p {
+  max-width: 420px;
+  margin: 12px 0 0;
+  color: var(--muted-ink);
+  font-size: 13px;
+  line-height: 1.7;
+}
+
+.intro-meta {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  padding-bottom: 4px;
+  color: #647285;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+}
+
+.legend-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 9px;
+  letter-spacing: 0;
+}
+
+.legend-dot {
+  width: 6px;
+  height: 6px;
+  background: #467da4;
+  box-shadow: 0 0 0 4px rgba(70, 125, 164, 0.13);
+}
+
+.tier-count {
+  color: #9aa6b3;
 }
 
 .table-list {
@@ -189,6 +283,24 @@ const handleMemberClick = (member: string) => {
   max-width: 100%;
   min-width: 0;
   min-height: 78px;
+  transform: translateX(0);
+  animation: row-in 0.55s both;
+  transition:
+    transform 220ms ease,
+    filter 220ms ease;
+}
+
+.ladder-row:nth-child(2) {
+  animation-delay: 80ms;
+}
+
+.ladder-row:nth-child(3) {
+  animation-delay: 160ms;
+}
+
+.ladder-row:hover {
+  transform: translateX(5px);
+  filter: saturate(1.04);
 }
 
 .ladder-row + .ladder-row {
@@ -197,15 +309,29 @@ const handleMemberClick = (member: string) => {
 
 .team-cell {
   display: flex;
-  flex: 0 0 90px;
+  flex: 0 0 104px;
   align-items: center;
-  justify-content: center;
+  justify-content: flex-start;
+  gap: 10px;
   min-height: 78px;
-  padding: 12px;
-  border: 1px solid #303030;
+  padding: 12px 14px;
+  border: 1px solid var(--line);
   box-sizing: border-box;
   background-color: var(--row-bg);
-  font-weight: 600;
+  color: var(--ink);
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.team-index {
+  color: rgba(24, 37, 54, 0.38);
+  font-family: 'Courier New', monospace;
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+}
+
+.team-name {
   white-space: nowrap;
 }
 
@@ -216,56 +342,146 @@ const handleMemberClick = (member: string) => {
   table-layout: fixed;
   border-collapse: collapse;
   border-spacing: 0;
-  background: #fff;
+  background: transparent;
 }
 
 .content-table td {
   height: 78px;
-  padding: 12px;
-  border: 1px solid #303030;
+  padding: 10px 14px;
+  border: 1px solid var(--line);
   box-sizing: border-box;
   background-color: var(--row-bg);
 }
 
 .step-cell {
+  position: relative;
   text-align: center;
   vertical-align: middle;
   overflow-wrap: anywhere;
   word-break: break-all;
 }
 
+.notice-cell {
+  background-image: linear-gradient(135deg, rgba(178, 109, 66, 0.09), transparent 60%);
+}
+
 .member-link {
-  display: inline;
-  margin: 0 3px;
-  padding: 0;
-  border: 0;
-  background: transparent;
-  color: #409eff;
+  display: inline-flex;
+  align-items: center;
+  margin: 3px 2px;
+  padding: 4px 7px;
+  border: 1px solid rgba(70, 125, 164, 0.24);
+  border-radius: 4px;
+  background: rgba(255, 255, 255, 0.42);
+  color: #356783;
   cursor: pointer;
-  font: inherit;
-  line-height: 1.8;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1.2;
+  transition:
+    transform 180ms ease,
+    border-color 180ms ease,
+    background-color 180ms ease,
+    color 180ms ease;
 }
 
 .member-link:hover {
-  color: #66b1ff;
-  text-decoration: underline;
+  border-color: #467da4;
+  background: #467da4;
+  color: #fff;
+  transform: translateY(-2px);
+}
+
+.member-link:focus-visible {
+  outline: 2px solid #b26d42;
+  outline-offset: 2px;
 }
 
 .cell-text {
-  color: #303133;
-  line-height: 1.7;
+  color: #687789;
+  font-size: 12px;
+  line-height: 1.65;
 }
 
 .is-danger {
-  color: #f56c6c;
+  color: #a95f3c;
+  font-weight: 600;
 }
 
 .member-detail {
-  display: inline-block;
-  margin-top: 16px;
-  padding: 8px 12px;
-  border: 1px solid #dcdfe6;
-  background: #fff;
-  color: #606266;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-top: 22px;
+  padding: 12px 16px;
+  border: 1px solid rgba(70, 125, 164, 0.2);
+  border-left: 3px solid #467da4;
+  background: rgba(255, 255, 255, 0.62);
+  color: #637285;
+  font-size: 12px;
+}
+
+.member-detail strong {
+  color: var(--ink);
+  font-size: 14px;
+}
+
+.detail-label {
+  color: #467da4;
+  font-family: 'Courier New', monospace;
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+}
+
+.detail-copy {
+  color: #8b97a5;
+}
+
+@keyframes row-in {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (max-width: 700px) {
+  .expert-step-table {
+    padding: 22px 14px;
+  }
+
+  .table-intro {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 18px;
+  }
+
+  .intro-meta {
+    width: 100%;
+    justify-content: space-between;
+  }
+
+  .team-cell {
+    flex-basis: 86px;
+    padding: 10px;
+  }
+
+  .content-table td {
+    padding: 8px 6px;
+  }
+
+  .member-link {
+    padding: 4px 5px;
+    font-size: 11px;
+  }
+
+  .member-detail {
+    flex-wrap: wrap;
+    gap: 8px;
+  }
 }
 </style>