uni-app 求简历样式

发布于 1周前 作者 zlyuanteng 来自 Uni-App

uni-app 求简历样式

求简历样式

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的模板语法来绑定数据,并通过样式来美化简历页面。你可以根据自己的需求进一步扩展和美化这个简历样式。

回到顶部