自定义样式

在本章中，我们将学习如何自定义简历样式。

主题配置

创建主题配置文件 src/theme.ts：

export const theme = {
  colors: {
    primary: '#2563eb',
    secondary: '#64748b',
    text: '#1e293b',
    background: '#ffffff',
  },
  fonts: {
    heading: 'Inter, sans-serif',
    body: 'Inter, sans-serif',
  },
};

应用样式

在组件中使用主题：

<template>
  <div class="resume">
    <h1 :style="{ color: theme.colors.primary }">{{ name }}</h1>
  </div>
</template>

<script setup lang="ts">

</script>

打印样式

添加打印特定的样式：

@media print {
  .resume {
    page-break-inside: avoid;
  }
}

下一步

恭喜！你已经完成了简历应用的开发。