logo
简体中文

导航菜单

使用 Vue 生成简历 PDF

自定义样式

本章将指导你如何定制简历的样式，包括颜色、字体、布局等方面。

配色方案

默认配色

项目使用了一套简洁的配色方案：

用途颜色值
主标题#0f172a
副标题#1e293b
正文#475569
次要文字#6b7280
链接#2563eb
强调色#f97316
背景色#f3f4f6

自定义配色

你可以在 App.vue 的 <style> 部分修改颜色：

.card h2 {
  color: #1e40af;
}

.timeline::before {
  background: linear-gradient(to bottom, #3b82f6, #8b5cf6);
}

.badge {
  background: #dbeafe;
  color: #1e40af;
}

字体设置

使用系统字体

默认使用系统字体栈：

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

使用自定义字体

如果你想使用自定义字体，可以在 index.html 中引入：

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">

然后在 CSS 中使用：

body {
  font-family: 'Noto Sans SC', -apple-system, sans-serif;
}

布局调整

调整内容宽度

A4 纸张的内容区宽度为 170mm（210mm - 40mm 边距）。如果需要调整：

@page {
  size: A4;
  margin: 15mm;
}

body {
  width: 180mm;
}

调整卡片间距

.card {
  margin-bottom: 16px;
}

调整内边距

.card {
  padding: 20px 24px;
}

添加新模块

技能标签模块

<Card>
  <h3>技能标签</h3>
  <div class="skill-tags">
    <span class="skill-tag">Vue.js</span>
    <span class="skill-tag">TypeScript</span>
    <span class="skill-tag">Node.js</span>
    <span class="skill-tag">Python</span>
  </div>
</Card>

添加样式：

.skill-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.skill-tag {
  padding: 4px 12px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 20px;
  font-size: 12px;
}

项目经历模块

<Card>
  <h3>项目经历</h3>
  <ul class="list">
    <li>
      <div class="project-row">
        <h3>项目名称</h3>
        <a href="https://github.com/..." target="_blank" class="project-link">
          GitHub
        </a>
      </div>
      <p>项目描述...</p>
    </li>
  </ul>
</Card>

添加样式：

.project-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.project-link {
  font-size: 12px;
  color: #2563eb;
}

打印优化

确保背景色打印

@media print {
  body {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .card {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

避免内容断裂

.card {
  break-inside: avoid;
}

.timeline-item {
  break-inside: avoid;
}

完整示例

以下是一个完整的自定义样式示例：

@page {
  size: A4;
  margin: 20mm;
}

body {
  font-family: 'Noto Sans SC', -apple-system, sans-serif;
  margin: 0;
  padding: 0;
  width: 170mm;
  max-width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  background: #fafafa;
}

.page {
  width: 100%;
  max-width: 170mm;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}

.card {
  background: #fff;
  border-radius: 12px;
  padding: 18px 22px;
  margin-bottom: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border: 1px solid #e5e7eb;
  break-inside: avoid;
}

.card h2 {
  margin: 0 0 4px;
  font-size: 20px;
  color: #1e293b;
  font-weight: 700;
}

.card h3 {
  margin: 0 0 10px;
  font-size: 15px;
  color: #334155;
  font-weight: 600;
}

.badge {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 8px;
  background: #e0f2fe;
  color: #0369a1;
  font-size: 12px;
}

.timeline::before {
  background: linear-gradient(to bottom, #06b6d4, #8b5cf6);
}

.timeline-year {
  color: #0284c7;
}

@media print {
  body {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    background: white;
  }
}

总结

通过本教程，你已经学会了：

  1. 使用 Vue 3 组件化开发简历页面
  2. 配置 A4 打印布局
  3. 使用 Puppeteer 自动生成 PDF
  4. 自定义简历样式

现在你可以根据自己的需求，创建独一无二的简历了！

进阶建议

  • 使用 CSS 变量统一管理配色
  • 创建多个简历模板，根据不同职位选择
  • 添加二维码组件，链接到在线作品集
  • 使用暗色主题，生成不同风格的简历

搜索