1 回复
当然,以下是一个使用uni-app实现的简单简历样式示例。这个示例展示了如何使用uni-app的组件和样式来构建一个基本的简历页面。
首先,确保你的uni-app项目已经创建,然后你可以在你的pages
文件夹中创建一个新的页面,比如resume.vue
。
<template>
<view class="container">
<view class="header">
<text class="name">{{ name }}</text>
<text class="contact">{{ contact }}</text>
</view>
<view class="section">
<text class="section-title">个人信息</text>
<view class="info-item">
<text class="info-label">性别:</text>
<text class="info-value">{{ gender }}</text>
</view>
<view class="info-item">
<text class="info-label">年龄:</text>
<text class="info-value">{{ age }}</text>
</view>
<!-- 可以继续添加更多个人信息 -->
</view>
<view class="section">
<text class="section-title">教育背景</text>
<view class="education-item" v-for="(edu, index) in education" :key="index">
<text class="info-label">{{ edu.school }}</text>
<text class="info-value">{{ edu.degree }} - {{ edu.year }}</text>
</view>
</view>
<view class="section">
<text class="section-title">工作经验</text>
<view class="work-item" v-for="(work, index) in workExperience" :key="index">
<text class="info-label">{{ work.company }}</text>
<text class="info-value">{{ work.position }} - {{ work.year }}</text>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
name: '张三',
contact: '12345678901',
gender: '男',
age: '30',
education: [
{ school: 'XX大学', degree: '本科', year: '2010-2014' },
// 更多教育信息
],
workExperience: [
{ company: 'XX公司', position: '开发工程师', year: '2015-2018' },
// 更多工作经验
]
};
}
};
</script>
<style scoped>
.container {
padding: 20px;
}
.header {
text-align: center;
}
.name {
font-size: 24px;
font-weight: bold;
}
.contact {
font-size: 18px;
}
.section {
margin-top: 20px;
}
.section-title {
font-size: 20px;
font-weight: bold;
}
.info-item, .education-item, .work-item {
margin-top: 10px;
}
.info-label, .info-value {
display: inline-block;
width: 50%;
}
</style>
这个示例代码展示了如何使用uni-app的模板语法来绑定数据,并通过样式来美化简历页面。你可以根据自己的需求进一步扩展和美化这个简历样式。