From cfb9ed8dfd52115356eb24486cb4263ed9081096 Mon Sep 17 00:00:00 2001
From: Claude <claude@local>
Date: Thu, 25 Jun 2026 17:22:41 +0800
Subject: [PATCH] =?UTF-8?q?style:=20HomeView=20=E5=8F=8C=E6=A0=8F=E9=BB=91?=
 =?UTF-8?q?=E9=87=91=E6=94=B9=E5=9B=BD=E8=81=98=E7=BA=A2=E7=99=BD=E5=BA=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude <noreply@anthropic.com>
---
 offer_frontend/src/views/portal/HomeView.vue | 655 ++++++++++++-------
 1 file changed, 412 insertions(+), 243 deletions(-)

diff --git a/offer_frontend/src/views/portal/HomeView.vue b/offer_frontend/src/views/portal/HomeView.vue
index 926f702..8101459 100644
--- a/offer_frontend/src/views/portal/HomeView.vue
+++ b/offer_frontend/src/views/portal/HomeView.vue
@@ -7,20 +7,6 @@
         <span class="left-title">全部企业</span>
         <span class="left-count">{{ totalOrgs }}</span>
       </div>
-      <!-- 查看全部按钮 -->
-      <div
-        class="org-row org-all"
-        :class="{ active: !selectedOrg }"
-        @click="clearOrg"
-      >
-        <div class="org-avatar all-avatar">
-          <span>全</span>
-        </div>
-        <div class="org-meta">
-          <span class="org-name">全部职位</span>
-          <span class="org-stat">查看所有企业岗位</span>
-        </div>
-      </div>
       <div class="left-body">
         <template v-if="orgsLoading">
           <div v-for="i in 4" :key="i" class="skeleton-row" />
@@ -73,113 +59,172 @@
 
     <!-- ── 右栏 ── -->
     <section class="panel-right">
-      <!-- 搜索栏 -->
-      <div class="search-bar">
-        <div class="search-row">
-          <div class="search-field">
-            <el-input
-              v-model="filters.search"
-              placeholder="职位名称 / 关键词"
-              clearable
-              :prefix-icon="SearchIcon"
-              @keyup.enter="doSearch"
-              @clear="doSearch"
-            />
+
+      <!-- ── 选中公司：公司介绍 + 学历分组 ── -->
+      <template v-if="selectedOrg">
+        <div class="right-scroll">
+
+          <!-- 公司介绍卡片 -->
+          <div class="intro-section">
+            <div class="section-title">公司介绍</div>
+            <div class="intro-card">
+              <div class="intro-photo">
+                <img
+                  :src="selectedOrg.logo || '/images/company-building.png'"
+                  :alt="selectedOrg.name"
+                  @error="(e) => e.target.src = '/images/company-building.png'"
+                />
+              </div>
+              <div class="intro-info">
+                <div class="intro-name">{{ selectedOrg.name }}</div>
+                <div class="intro-desc">{{ selectedOrg.description || '暂无公司简介。' }}</div>
+              </div>
+            </div>
           </div>
-          <div class="search-field">
-            <el-input
-              v-model="filters.location"
-              placeholder="城市"
-              clearable
-              @keyup.enter="doSearch"
-              @clear="doSearch"
-            />
+
+          <!-- 学历分组岗位 -->
+          <div class="edu-sections" v-loading="jobsLoading">
+            <template v-if="!jobsLoading">
+              <div
+                v-for="(edu, index) in eduLevels"
+                :key="edu.key"
+              >
+                <div class="edu-row">
+                  <div class="edu-label-wrap">
+                    <div class="edu-label">{{ edu.label }}</div>
+                    <div class="edu-total-badge" v-if="eduGroups[edu.key].length > 0">共计 {{ eduTotals[edu.key] }} 人</div>
+                  </div>
+                  <div class="job-chips-area">
+                    <template v-if="eduGroups[edu.key].length > 0">
+                      <div
+                        v-for="job in eduGroups[edu.key]"
+                        :key="job.id"
+                        class="job-chip"
+                        @click="goToJobDetail(job)"
+                      >
+                        <span class="chip-icon">
+                          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/>
+                          </svg>
+                        </span>
+                        <span class="chip-name">{{ job.title }}</span>
+                        <span class="chip-count">（招{{ job.headcount }}人）</span>
+                      </div>
+                    </template>
+                    <div v-else class="chips-empty">暂无{{ edu.label }}岗位</div>
+                  </div>
+                </div>
+                <div class="edu-divider" v-if="index < eduLevels.length - 1" />
+              </div>
+            </template>
           </div>
-          <div class="search-field">
-            <el-input
-              v-model="filters.category"
-              placeholder="职位类别"
-              clearable
-              @keyup.enter="doSearch"
-              @clear="doSearch"
-            />
+        </div>
+      </template>
+
+      <!-- ── 未选公司：搜索 + 职位列表 ── -->
+      <template v-else>
+        <!-- 搜索栏 -->
+        <div class="search-bar">
+          <div class="search-row">
+            <div class="search-field">
+              <el-input
+                v-model="filters.search"
+                placeholder="职位名称 / 关键词"
+                clearable
+                :prefix-icon="SearchIcon"
+                @keyup.enter="doSearch"
+                @clear="doSearch"
+              />
+            </div>
+            <div class="search-field">
+              <el-input
+                v-model="filters.location"
+                placeholder="城市"
+                clearable
+                @keyup.enter="doSearch"
+                @clear="doSearch"
+              />
+            </div>
+            <div class="search-field">
+              <el-input
+                v-model="filters.category"
+                placeholder="职位类别"
+                clearable
+                @keyup.enter="doSearch"
+                @clear="doSearch"
+              />
+            </div>
+            <div class="search-field">
+              <el-select
+                v-model="filters.education"
+                placeholder="学历要求"
+                clearable
+                @change="doSearch"
+              >
+                <el-option value="博士" label="博士" />
+                <el-option value="硕士" label="硕士" />
+                <el-option value="本科及以下" label="本科及以下" />
+              </el-select>
+            </div>
+            <el-button type="primary" class="search-btn" @click="doSearch">
+              搜索
+            </el-button>
           </div>
-          <div class="search-field">
-            <el-select
-              v-model="filters.education"
-              placeholder="学历要求"
-              clearable
-              @change="doSearch"
+        </div>
+
+        <!-- 结果头 -->
+        <div class="right-header">
+          <span class="right-title">全部职位</span>
+          <span class="right-count">共 {{ totalJobs }} 个</span>
+        </div>
+
+        <!-- 职位列表 -->
+        <div class="right-body" v-loading="jobsLoading">
+          <template v-if="!jobsLoading && !jobsError && jobs.length === 0">
+            <div class="state-tip">
+              {{ hasFilters ? '未找到匹配的职位，请调整筛选条件' : '暂无职位数据' }}
+            </div>
+          </template>
+          <template v-else-if="jobsError">
+            <div class="state-tip">加载失败，请刷新重试</div>
+          </template>
+          <template v-else>
+            <div
+              v-for="job in jobs"
+              :key="job.id"
+              class="job-row"
+              @click="goToJobDetail(job)"
             >
-              <el-option value="博士" label="博士" />
-              <el-option value="硕士" label="硕士" />
-              <el-option value="本科及以下" label="本科及以下" />
-            </el-select>
-          </div>
-          <el-button type="primary" class="search-btn" @click="doSearch">
-            搜索
-          </el-button>
-        </div>
-        <div class="search-context" v-if="selectedOrg">
-          <span class="context-label">当前企业：</span>
-          <el-tag size="small" closable @close="clearOrg">{{ selectedOrg.name }}</el-tag>
-        </div>
-      </div>
-
-      <!-- 结果头 -->
-      <div class="right-header">
-        <span class="right-title">
-          {{ selectedOrg ? selectedOrg.name + ' · 职位列表' : '全部职位' }}
-        </span>
-        <span class="right-count">共 {{ totalJobs }} 个</span>
-      </div>
-
-      <!-- 职位列表 -->
-      <div class="right-body" v-loading="jobsLoading">
-        <template v-if="!jobsLoading && !jobsError && jobs.length === 0">
-          <div class="state-tip">
-            {{ hasFilters ? '未找到匹配的职位，请调整筛选条件' : '暂无职位数据' }}
-          </div>
-        </template>
-        <template v-else-if="jobsError">
-          <div class="state-tip">加载失败，请刷新重试</div>
-        </template>
-        <template v-else>
-          <div
-            v-for="job in jobs"
-            :key="job.id"
-            class="job-row"
-            @click="goToJobDetail(job)"
-          >
-            <div class="job-row-top">
-              <div class="job-row-title">{{ job.title }}</div>
-              <div class="job-row-salary">{{ job.salary }}</div>
-            </div>
-            <div class="job-row-meta">
-              <span class="job-org">{{ job.organization_name || job.organization?.name }}</span>
-              <span class="meta-dot">·</span>
-              <span>{{ job.location }}</span>
-              <span class="meta-dot" v-if="job.education">·</span>
-              <span v-if="job.education">{{ job.education }}</span>
-            </div>
-            <div class="job-row-tags">
-              <span class="tag tag-cat" v-if="job.category">{{ job.category }}</span>
-              <span class="tag tag-edu" v-if="job.education">{{ job.education }}</span>
-              <span class="tag tag-loc">{{ job.location }}</span>
+              <div class="job-row-top">
+                <div class="job-row-title">{{ job.title }}</div>
+                <div class="job-row-salary">{{ job.salary }}</div>
+              </div>
+              <div class="job-row-meta">
+                <span class="job-org">{{ job.organization_name || job.organization?.name }}</span>
+                <span class="meta-dot">·</span>
+                <span>{{ job.location }}</span>
+                <span class="meta-dot" v-if="job.education">·</span>
+                <span v-if="job.education">{{ job.education }}</span>
+              </div>
+              <div class="job-row-tags">
+                <span class="tag tag-cat" v-if="job.category">{{ job.category }}</span>
+                <span class="tag tag-edu" v-if="job.education">{{ job.education }}</span>
+                <span class="tag tag-loc">{{ job.location }}</span>
+              </div>
             </div>
+          </template>
+          <!-- 分页 -->
+          <div class="pagination-wrap" v-if="totalJobs > pageSize">
+            <el-pagination
+              layout="prev, pager, next"
+              :total="totalJobs"
+              :page-size="pageSize"
+              v-model:current-page="currentPage"
+              @current-change="handlePageChange"
+            />
           </div>
-        </template>
-        <!-- 分页 -->
-        <div class="pagination-wrap" v-if="totalJobs > pageSize">
-          <el-pagination
-            layout="prev, pager, next"
-            :total="totalJobs"
-            :page-size="pageSize"
-            v-model:current-page="currentPage"
-            @current-change="handlePageChange"
-          />
         </div>
-      </div>
+      </template>
     </section>
   </div>
 </template>
@@ -210,6 +255,12 @@ const pageSize = 20
 
 const filters = reactive({ search: '', location: '', category: '', education: '' })
 
+const eduLevels = [
+  { key: '博士', label: '博士' },
+  { key: '硕士', label: '硕士' },
+  { key: '本科及以下', label: '本科' },
+]
+
 const totalOrgs = computed(() => {
   return orgs.value.reduce((n, o) => n + 1 + (o.children?.length || 0), 0)
 })
@@ -218,12 +269,33 @@ const hasFilters = computed(() => {
   return filters.search || filters.location || filters.category || filters.education
 })
 
+const eduGroups = computed(() => {
+  const groups = { '博士': [], '硕士': [], '本科及以下': [] }
+  jobs.value.forEach(job => {
+    if (groups[job.education] !== undefined) {
+      groups[job.education].push(job)
+    }
+  })
+  return groups
+})
+
+const eduTotals = computed(() => {
+  const totals = {}
+  for (const [key, list] of Object.entries(eduGroups.value)) {
+    totals[key] = list.reduce((sum, job) => sum + (job.headcount || 0), 0)
+  }
+  return totals
+})
+
 async function fetchJobs(page = 1) {
   jobsLoading.value = true
   jobsError.value = false
   try {
     const params = { page }
-    if (selectedOrg.value) params.organization = selectedOrg.value.id
+    if (selectedOrg.value) {
+      params.organization = selectedOrg.value.id
+      params.page_size = 200  // 选中公司时拉取全部岗位用于分组
+    }
     if (filters.search) params.search = filters.search
     if (filters.location) params.location = filters.location
     if (filters.category) params.category = filters.category
@@ -277,6 +349,9 @@ onMounted(async () => {
         const child = org.children?.find(c => c.id === targetOrgId)
         if (child) { selectedOrg.value = child; break }
       }
+    } else if (orgs.value.length > 0) {
+      // 默认选中第一家公司
+      selectedOrg.value = orgs.value[0]
     }
   } catch { orgsError.value = true }
   finally { orgsLoading.value = false }
@@ -286,13 +361,15 @@ onMounted(async () => {
 
 <style scoped>
 .two-panel {
-  --gold: #B8860B;
-  --gold-lt: #D4AF37;
-  --dark: #1A1A1A;
-  --cream: #F7F8FA;
+  --gold: var(--brand-red);
+  --gold-lt: var(--brand-red-3);
+  --dark: var(--bg-card);
+  --cream: var(--bg-page);
   --border: #E5E6EB;
-  --text: #1D2129;
-  --muted: #86909C;
+  --text: var(--text-main);
+  --muted: var(--text-muted);
+  --blue: var(--brand-red);
+  --blue-lt: var(--brand-red-bg);
 
   display: flex;
   height: calc(100vh - 97px);
@@ -303,98 +380,76 @@ onMounted(async () => {
 
 /* ── 左栏 ── */
 .panel-left {
-  width: 280px;
+  width: 240px;
   flex-shrink: 0;
   display: flex;
   flex-direction: column;
   background: var(--dark);
-  border-right: 1px solid rgba(255,255,255,0.07);
+  border-right: 1px solid var(--border);
 }
 .left-header {
-  padding: 16px 18px;
+  padding: 14px 16px;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  border-bottom: 1px solid rgba(255,255,255,0.08);
+  border-bottom: 1px solid var(--border);
   flex-shrink: 0;
 }
 .left-title {
-  font-size: 13px;
+  font-size: 14px;
   font-weight: 700;
-  color: rgba(255,255,255,0.9);
+  color: var(--text-main);
   letter-spacing: 0.1em;
 }
 .left-count {
   background: var(--gold);
   color: #fff;
-  font-size: 11px;
+  font-size: 13px;
   font-weight: 700;
-  padding: 2px 8px;
+  padding: 2px 7px;
   border-radius: 10px;
-  min-width: 24px;
-  text-align: center;
 }
 .left-body { flex: 1; overflow-y: auto; }
-.left-body::-webkit-scrollbar { width: 4px; }
-.left-body::-webkit-scrollbar-track { background: transparent; }
-.left-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 2px; }
+.left-body::-webkit-scrollbar { width: 3px; }
+.left-body::-webkit-scrollbar-thumb { background: #C9CDD4; border-radius: 2px; }
 
-/* 全部按钮 */
-.org-all {
-  border-bottom: 1px solid rgba(255,255,255,0.1) !important;
-}
-.all-avatar {
-  background: linear-gradient(135deg, #4A90D9, #357ABD) !important;
-}
+.org-all { border-bottom: 1px solid var(--border) !important; }
+.all-avatar { background: linear-gradient(135deg, #4A90D9, #357ABD) !important; }
 
-/* 公司行 */
 .org-row {
   display: flex;
   align-items: center;
-  gap: 10px;
-  padding: 10px 16px;
-  border-left: 3px solid transparent;
-  border-bottom: 1px solid rgba(255,255,255,0.05);
+  gap: 9px;
+  padding: 9px 14px;
+  border-bottom: 1px solid var(--border);
   cursor: pointer;
-  transition: background 0.15s;
+  transition: background 0.15s, box-shadow 0.15s;
+  box-shadow: inset 3px 0 0 transparent;
 }
-.org-row:hover { background: rgba(255,255,255,0.06); }
+.org-row:hover { background: var(--brand-red-bg); }
 .org-row.active {
-  border-left-color: var(--gold);
-  background: rgba(184,134,11,0.1);
+  box-shadow: inset 3px 0 0 var(--gold);
+  background: var(--brand-red-bg);
 }
 .org-avatar {
-  width: 34px; height: 34px;
-  border-radius: 6px;
-  background: linear-gradient(135deg, #B8860B, #8B6407);
+  width: 32px; height: 32px;
+  border-radius: 5px;
+  background: linear-gradient(135deg, #C8161D, #8B1014);
   display: flex; align-items: center; justify-content: center;
   font-size: 15px; font-weight: 900; color: #fff;
   flex-shrink: 0; overflow: hidden;
 }
 .org-avatar img { width: 100%; height: 100%; object-fit: cover; }
-.child-avatar {
-  width: 28px; height: 28px; font-size: 12px;
-  background: linear-gradient(135deg, #A67C07, #7D5A05);
-}
+.child-avatar { width: 26px; height: 26px; font-size: 13px; background: linear-gradient(135deg, #A11218, #6B0C10); }
 .org-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
-.org-name {
-  font-size: 13px; font-weight: 600;
-  color: rgba(255,255,255,0.88);
-  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
-}
-.child-name { font-size: 12px; color: rgba(255,255,255,0.7); }
+.org-name { font-size: 14px; font-weight: 600; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.child-name { font-size: 13px; color: var(--text-muted); }
 .org-row.active .org-name { color: var(--gold-lt); }
-.org-stat { font-size: 11px; color: rgba(255,255,255,0.38); }
+.org-stat { font-size: 13px; color: var(--text-muted); }
 .org-stat em { font-style: normal; color: var(--gold); font-weight: 700; }
-.org-child { padding-left: 12px; background: rgba(0,0,0,0.12); }
-.child-indent {
-  display: flex; align-items: center; flex-shrink: 0;
-  padding-left: 6px;
-}
-.child-line {
-  display: block; width: 10px; height: 1px;
-  background: rgba(184,134,11,0.35);
-}
+.org-child { padding-left: 10px; background: var(--bg-page); }
+.child-indent { display: flex; align-items: center; flex-shrink: 0; padding-left: 4px; }
+.child-line { display: block; width: 8px; height: 1px; background: var(--border); }
 
 /* ── 右栏 ── */
 .panel-right {
@@ -405,6 +460,174 @@ onMounted(async () => {
   min-width: 0;
 }
 
+/* 选中公司时的滚动容器 */
+.right-scroll {
+  flex: 1;
+  overflow-y: auto;
+  padding: 20px 24px;
+  display: flex;
+  flex-direction: column;
+}
+
+.intro-section {
+  flex-shrink: 0;
+}
+.right-scroll::-webkit-scrollbar { width: 5px; }
+.right-scroll::-webkit-scrollbar-thumb { background: #C5CDD8; border-radius: 3px; }
+
+/* 公司介绍 */
+.section-title {
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--text);
+  margin-bottom: 12px;
+  padding-left: 2px;
+}
+
+.intro-card {
+  background: #fff;
+  border-radius: 10px;
+  padding: 16px;
+  display: flex;
+  gap: 18px;
+  align-items: flex-start;
+  box-shadow: 0 1px 6px rgba(0,0,0,0.06);
+  margin-bottom: 20px;
+}
+.intro-photo {
+  width: 180px;
+  height: 110px;
+  border-radius: 8px;
+  overflow: hidden;
+  flex-shrink: 0;
+  background: #E8ECF2;
+}
+.intro-photo img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.intro-info {
+  flex: 1;
+  min-width: 0;
+}
+.intro-name {
+  font-size: 19px;
+  font-weight: 700;
+  color: var(--text);
+  margin-bottom: 8px;
+}
+.intro-desc {
+  font-size: 15px;
+  color: var(--muted);
+  line-height: 1.7;
+}
+
+/* 学历分组 */
+.edu-sections {
+  background: #fff;
+  border-radius: 10px;
+  box-shadow: 0 1px 6px rgba(0,0,0,0.06);
+  overflow: hidden;
+  flex: 1;
+}
+
+.edu-row {
+  display: flex;
+  gap: 0;
+  align-items: stretch;
+  padding: 18px 20px;
+}
+
+.edu-label-wrap {
+  width: 70px;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding-top: 2px;
+}
+
+.edu-label {
+  background: #fff;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 8px 10px;
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--text);
+  text-align: center;
+  min-width: 54px;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
+}
+
+.job-chips-area {
+  flex: 1;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  align-content: flex-start;
+  padding-left: 16px;
+}
+
+.job-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 7px 12px;
+  background: #fff;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.15s;
+  font-size: 14px;
+  color: var(--text);
+  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
+  white-space: nowrap;
+}
+.job-chip:hover {
+  border-color: var(--blue);
+  color: var(--blue);
+  background: var(--blue-lt);
+  box-shadow: 0 2px 6px rgba(43,90,222,0.12);
+}
+.chip-icon {
+  color: var(--blue);
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+.chip-name { font-weight: 500; }
+.chip-count { color: var(--muted); font-size: 13px; }
+
+.edu-total-badge {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 5px 0;
+  background: var(--brand-red-bg);
+  border: 1px solid var(--brand-red-3);
+  border-radius: 6px;
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--gold);
+  white-space: nowrap;
+}
+
+.chips-empty {
+  font-size: 14px;
+  color: #BDC3CB;
+  padding: 8px 0;
+}
+
+.edu-divider {
+  height: 1px;
+  background: var(--border);
+  margin: 0 20px;
+}
+
 /* 搜索栏 */
 .search-bar {
   flex-shrink: 0;
@@ -412,19 +635,10 @@ onMounted(async () => {
   padding: 14px 20px;
   border-bottom: 1px solid var(--border);
 }
-.search-row {
-  display: flex;
-  gap: 10px;
-  align-items: center;
-}
-.search-field {
-  flex: 1;
-  min-width: 0;
-}
+.search-row { display: flex; gap: 10px; align-items: center; }
+.search-field { flex: 1; min-width: 0; }
 .search-field :deep(.el-input__wrapper),
-.search-field :deep(.el-select .el-input__wrapper) {
-  border-radius: 6px;
-}
+.search-field :deep(.el-select .el-input__wrapper) { border-radius: 6px; }
 .search-btn {
   flex-shrink: 0;
   padding: 8px 24px;
@@ -433,20 +647,7 @@ onMounted(async () => {
   background: var(--gold) !important;
   border-color: var(--gold) !important;
 }
-.search-btn:hover {
-  background: var(--gold-lt) !important;
-  border-color: var(--gold-lt) !important;
-}
-.search-context {
-  margin-top: 10px;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-.context-label {
-  font-size: 12px;
-  color: var(--muted);
-}
+.search-btn:hover { background: var(--gold-lt) !important; border-color: var(--gold-lt) !important; }
 
 /* 结果头 */
 .right-header {
@@ -458,10 +659,8 @@ onMounted(async () => {
   flex-shrink: 0;
   background: #fff;
 }
-.right-title { font-size: 14px; font-weight: 600; color: var(--text); }
-.right-count {
-  font-size: 12px; color: var(--muted);
-}
+.right-title { font-size: 16px; font-weight: 600; color: var(--text); }
+.right-count { font-size: 14px; color: var(--muted); }
 
 /* 职位列表 */
 .right-body { flex: 1; overflow-y: auto; }
@@ -474,56 +673,26 @@ onMounted(async () => {
   background: #fff;
 }
 .job-row:hover { background: #FAFBFC; }
-.job-row-top {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 6px;
-}
-.job-row-title {
-  font-size: 14px; font-weight: 600;
-  color: var(--text);
-}
-.job-row-salary {
-  font-size: 14px; font-weight: 700;
-  color: #E63329;
-  flex-shrink: 0;
-  margin-left: 16px;
-}
-.job-row-meta {
-  font-size: 12px; color: var(--muted); margin-bottom: 8px;
-  display: flex; align-items: center; gap: 4px;
-}
+.job-row-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
+.job-row-title { font-size: 16px; font-weight: 600; color: var(--text); }
+.job-row-salary { font-size: 16px; font-weight: 700; color: #E63329; flex-shrink: 0; margin-left: 16px; }
+.job-row-meta { font-size: 14px; color: var(--muted); margin-bottom: 8px; display: flex; align-items: center; gap: 4px; }
 .job-org { color: var(--gold); font-weight: 500; }
 .meta-dot { color: #D9D9D9; }
 .job-row-tags { display: flex; gap: 6px; flex-wrap: wrap; }
-.tag {
-  font-size: 11px; padding: 2px 8px;
-  border-radius: 3px; font-weight: 500;
-}
+.tag { font-size: 13px; padding: 2px 8px; border-radius: 3px; font-weight: 500; }
 .tag-loc { background: #E8EEF8; color: #2C5282; }
 .tag-cat { background: #E8F5E9; color: #2E7D32; }
 .tag-edu { background: #F3E5F5; color: #7B1FA2; }
 
 /* 分页 */
-.pagination-wrap {
-  padding: 16px 20px;
-  display: flex;
-  justify-content: center;
-  background: #fff;
-  border-top: 1px solid var(--border);
-}
+.pagination-wrap { padding: 16px 20px; display: flex; justify-content: center; background: #fff; border-top: 1px solid var(--border); }
 
-/* 空状态 / 骨架 */
-.state-tip {
-  display: flex; align-items: center; justify-content: center;
-  height: 200px;
-  color: var(--muted); font-size: 13px;
-}
+/* 空态 / 骨架 */
+.state-tip { display: flex; align-items: center; justify-content: center; height: 200px; color: var(--muted); font-size: 15px; }
 .skeleton-row {
-  height: 14px; background: linear-gradient(90deg, #E8E8E8 25%, #F0F0F0 50%, #E8E8E8 75%);
-  background-size: 200% 100%;
-  border-radius: 3px; margin-bottom: 10px;
+  height: 12px; background: linear-gradient(90deg, #E5E6EB 25%, #F2F3F5 50%, #E5E6EB 75%);
+  background-size: 200% 100%; border-radius: 3px; margin: 8px 14px;
   animation: shimmer 1.5s infinite;
 }
 @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }