Courses address, here posted the source code of the project, there is a need of self-created it.
https://www.imooc.com/learn/1221
Applet page / index / index.wxml
<swiper style="height:{{height}}px">
<swiper-item>
<image src="../../img/photo.jpg" mode="widthFix" class="photo"></image>
<view class="cover-info">
<text class="cover-name">{{name}}</text>
<text class="cover-spell">{{spell}}</text>
</view>
<view class="big-circle"></view>
<view class="medium-circle"></view>
<view class="small-circle"></view>
<view class="cover-work">
<text class="cover-job">{{job}}</text>
<text class="cover-exp">{{exp}}</text>
</view>
<view class="navigation">
我的简历
<image src="../../img/arrow-right.png" class="arrow-right"></image>
</view>
</swiper-item>
<swiper-item>
<scroll-view scroll-y="true" style="width:{{width}}px;height:{{height}}px">
<view class="resume">
<view class="section">
<view class="section-info">
<view class="section-seq">1</view>
<text class="section-title">基本资料</text>
</view>
<view class="column col-2">
<text class="info">姓名：{{name}}</text>
<text class="info">电话：{{tel}}</text>
</view>
<view class="column col-2">
<text class="info">性别：{{sex}}</text>
<text class="info">年龄：{{age}}</text>
</view>
<view class="column col-1">
<text class="info">邮箱：{{email}}</text>
</view>
<view class="column col-1">
<text class="info">住址：{{address}}</text>
</view>
</view>
<view class="section">
<view class="section-info">
<view class="section-seq">2</view>
<text class="section-title">主要技能</text>
</view>
<view class="skill" wx:for="{{skill}}" wx:key="item">
<text class="skill-name">{{item.name}}</text>
<progress class="progress" percent="{{item.percent}}" stroke-width="5"></progress>
</view>
</view>
<view class="section">
<view class="section-info">
<view class="section-seq">3</view>
<text class="section-title">教育经历</text>
</view>
<view class="education" wx:for="{{education}}" wx:key="item">
<view class="school">
<image src="../../img/icon_school.png" class="icon-school"></image>
<text>{{item.school}}</text>
</view>
<view class="row">
<view class="info">
<image src="../../img/icon_book.png" class="icon-book"></image>
<text>{{item.major}}</text>
</view>
<view class="info">
<image src="../../img/icon_calendar.png" class="icon-calendar"></image>
<text>{{item.year}}</text>
</view>
</view>
<rich-text class="desc">{{item.desc}}</rich-text>
</view>
</view>
<text class="page">1/4</text>
</view>
</scroll-view>
</swiper-item>
<swiper-item>
<scroll-view scroll-y="true" style="width:{{width}}px;height:{{height}}px">
<view class="resume">
<view class="section">
<view class="section-info">
<view class="section-seq">4</view>
<text class="section-title">工作经历</text>
</view>
<view class="work" wx:for="{{work}}" wx:key="item">
<view class="company">
<image src="../../img/icon_company.png" class="icon-company"></image>
<text>{{item.company}}</text>
</view>
<view class="row">
<view class="info">
<image src="../../img/icon_job.png" class="icon-job"></image>
<text>{{item.job}}</text>
</view>
<view class="info">
<image src="../../img/icon_calendar.png" class="icon-calendar"></image>
<text>{{item.year}}</text>
</view>
</view>
<rich-text class="desc">{{item.desc}}</rich-text>
</view>
</view>
<text class="page">2/4</text>
</view>
</scroll-view>
</swiper-item>
<swiper-item>
<scroll-view scroll-y="true" style="width:{{width}}px;height:{{height}}px">
<view class="resume">
<view class="section">
<view class="section-info">
<view class="section-seq">5</view>
<text class="section-title">工作经历</text>
</view>
<view class="project" wx:for="{{project}}" wx:key="item">
<view class="project-name">
<image src="../../img/icon_computer.png" class="icon-computer"></image>
<text>{{item.name}}</text>
</view>
<rich-text class="desc">{{item.desc}}</rich-text>
</view>
</view>
<text class="page">3/4</text>
</view>
</scroll-view>
</swiper-item>
<swiper-item>
<scroll-view scroll-y="true" style="width:{{width}}px;height:{{height}}px">
<view class="resume">
<view class="section">
<view class="section-info">
<view class="section-seq">6</view>
<text class="section-title">自我评价</text>
</view>
<view class="introduction">
<rich-text class="desc">{{introduction}}</rich-text>
</view>
</view>
<text class="page">4/4</text>
</view>
</scroll-view>
</swiper-item>
</swiper>
Applet page / index / index.js
Pages and the // / index / index.js
Page ({
/ **
* initial data page
* /
the Data: {
width: 0,
height: 0,
name: "Xiezai Hao",
spell: "Xie Zihao",
the Job: "the Java engineer ",
exp:" 1-year internship experience ",
tel:" 13,312,345,678 ",
Sex:" M ",
Age: 29,
Email:" [email protected] ",
address:" XX street Chaoyang District, Beijing No. 126 " ,
skill: [
{name: "the Java", Percent: 85},
{name: "the PHP", Percent: 40},
{name: "the HTML / the CSS / the JavaScript", Percent: 90},
{name: "the Python" , Percent: 70},
{name: "Big Data ", Percent: 60}
],
Education: [
{
school: "Beijing University of Aeronautics and Astronautics",
Major: "Computer Science and Technology (undergraduate)",
year: "2014-2018",
desc: "The professional training to master the basic theoretical knowledge of computer software, familiar with software development and management technology to We engaged in software design, development and management of computer software in the field of high-level talent "
}
],
Work: [
{
company:" Beijing XX company ",
the Job:" programmer ",
year:" 2019 / 01- to now ",
desc : "XXX electricity supplier involved in the development of the system, as a programmer role main job is responsible for advertising, product development and maintenance modules spike, commodity groups, and other fight, and is responsible for managing the operation and maintenance work on the project.."
},
{
company: "Beijing XX company",
the Job: "intern",
year: "2018 / 03-2019 / 01",
desc: "involved in the development and testing of K13 online education system, maintenance API interface calls Tencent cloud-demand, and to achieve online transfer code, add watermark, security chain and piracy, and the development and maintenance of small micro-channel K13 education program. "
},
{
Company: "Beijing University of Aeronautics and Astronautics maker culture"
job: "project leader",
year: "2017 / 05-2018 / 01",
desc: "micro-mall development Litemall school system to participate in the Innovation Institute, served as project leader positions, participated in merchandise management, order management, micro-letter design and development payments, shopping carts and other modules. "
}
],
Project: [
{
name:" XXX electricity supplier system ",
desc:" the electricity supplier O2O system is a new type of retail electricity supplier system is divided into subsystems shopping payment subsystem, database subsystem, security subsystem, subsystem inventory, logistics and financial subsystem subsystems. SpringCloud core architecture uses a micro-service architecture, the integration of several subsystems above. technology stack including SpringMVC, MyBatis, Activiti , Shiro, QuartZ, Sculptor Boot, jabdp, jee-weapp, RocketMQ, Kafka, Selenium, Echart, Vue, Element-UI, Uni-APP, Swagger, elasticSearch, Druid, Zookeeper, data platform of choice are two of MySQL cluster ( Replication, PXC), managed by myCat, while myCat do hot standby .NoSQL uses Redis cluster MongoDB clusters and cluster "
},
{
name:" XXX K13 online education system ",
desc: "This system is for the K13 online education system in primary and secondary students, the use of video-on-demand form, divided into B / S form and C / S in the form I was primarily responsible for business management instructor teaching video to K13 platform. after uploading instructional videos, after editing professionals, the K13-demand cloud platform invoke Tencent API interface to achieve online transcoding and compression, and add watermark, security finally generate the URL path broadcast, to render HTML pages or APP above. the system technology stack include SpringBoot, SpringMVC, MyBatis, SpringSecurity, Kafka, QuartZ, Flowable, the system will eventually be deployed in Tencent cloud platform. "
},
{
name:" Beijing maker culture University of Aeronautics and Astronautics ",
desc:" Litemall micro Shopping Mall is the school of Beijing United innovation XX super Group to create a joint B2C electronic business system, which uses separate front and rear end design architecture, divided into a total of five subsystems, namely Taiwan before and after the micro system mall, mall management front and back office systems , core systems mall. Mall has all the features on micro businesses, including micro-channel pay. above technical architecture background Head selected SSM frame SpringBoot, SpringMVC and MyBatis composition, and the integration Shiro, Swagger, PowerMock, Ali cloud technology. Distal project uses VUE + ElementUI technical architecture, the applet used in micro-channel native frame .Litemall micro store using profile type cluster deployment, published in DockerSwarm environment and to achieve high load, high performance and high availability. "
}
],
introduction: "I am cheerful, athletic, energetic, warm, sincere; serious and responsible attitude towards work, good communication and coordination have strong organizational skills and team spirit; self-motivated, eager to learn can continuously improve their ability and .. the overall quality of work in the future, I will be full of energy, spirit of hard study to try to work steadily to improve their ability to work, and the simultaneous development of enterprises "
}
/ **
* life cycle function - listen the page is loaded
* /
onLoad: function (Options) {
},
/ **
* life cycle function - listen for the first time the page rendering is complete
* /
the onReady: function () {
},
/ **
* life cycle function - monitor page displays
* /
onShow: function () {
var width = wx.getSystemInfoSync () windowWidth.
var height = wx.getSystemInfoSync () windowHeight.
this.setData ({
width: width,
height: height
})
},
/ **
* Life Cycle function - listen for the hidden page
* /
OnHide: function () {
},
/ **
* Life Cycle function - listen to uninstall the page
* /
onUnload: function () {
},
/ **
* page related event handler - the drop-down monitor user actions
* /
onPullDownRefresh : function () {
},
/ **
handler event * pull bottom of the page
* /
onReachBottom: function () {
},
/ **
* Share user clicks the upper right corner
* /
onShareAppMessage: function () {
}
})
index.wxss
.photo{
display: block;
width: 90%;
margin-left: auto;
margin-right: auto;
position: fixed;
bottom: 0;
}
.cover-info{
position: absolute;
left: 50px;
top: 30px;
}
.cover-name{
font-size: 30px;
font-weight: bold;
display: block;
letter-spacing: 1px;
}
.cover-spell{
font-size: 20px;
letter-spacing: 1px;
}
.big-circle{
background-color: rgba(0, 165, 34, 0.7);
width: 260px;
height: 260px;
border-radius: 130px;
position: absolute;
left: -150px;
top: 110px;
}
.medium-circle{
background-color: rgba(0, 165, 34, 0.7);
width: 160px;
height: 160px;
border-radius: 80px;
position: absolute;
right: -80px;
top: 110px;
}
.small-circle{
background-color: rgba(0, 165, 34, 0.7);
width: 50px;
height: 50px;
border-radius: 25px;
position: absolute;
left: -10px;
bottom: 110px;
}
.cover-work{
position: absolute;
bottom: 200px;
text-align: center;
background-color: rgba(0,0,0,0.2);
padding: 20px 0;
width: 100%;
}
.cover-job{
display: block;
color: #fff;
font-size: 30px;
font-weight: bold;
}
.cover-exp{
display: block;
color: #fff;
font-size: 20px;
}
.navigation{
position: absolute;
top: 40px;
right: 10px;
font-size: 18px;
}
.arrow-right{
width: 20px;
height: 20px;
vertical-align: -5px;
}
.resume{
margin: 0 20px;
}
.section{
padding-bottom: 30px;
}
.section-info{
display: flex;
border-bottom: 1px solid #333;
padding-bottom: 5px;
margin: 10px 0;
}
.section-seq{
background-color: #444;
width: 22px;
height: 22px;
color: #fff;
text-align: center;
line-height: 22px;
margin-right: 10px;
font-weight: bold;
margin-top: 3px;
}
.section-title{
font-size: 20px;
}
.column{
font-size: 16px;
border-bottom: dashed 1px #333;
padding: 10px 0;
}
.col-2{
column-count: 2;
}
.col-1{
column-count: 1;
}
.info{
display: block;
}
.skill{
padding: 5px 0;
}
.skill-name{
font-size: 16px;
display: block;
margin-bottom: 5px;
}
.progress{
}
.education,.work,.project,.introduction{
border-bottom: dashed 1px #999;
padding: 10px 0;
}
.education:last-of-type{
border-bottom:none;
}
.work:last-of-type{
border-bottom:none;
}
.project:last-of-type{
border-bottom:none;
}
.introduction:last-of-type{
border-bottom:none;
}
.school,.company,.project-name{
font-size: 18px;
margin-bottom: 10px;
}
.icon-school{
width: 26px;
height: 26px;
vertical-align: -6px;
margin-right: 5px;
}
.row{
display: flex;
justify-content: space-between;
}
.info{
font-size: 16px;
margin-bottom: 10px;
}
.icon-book{
width: 16px;
height: 16px;
vertical-align: -2px;
margin-right: 3px;
}
.icon-calendar{
width: 17px;
height: 17px;
vertical-align: -2px;
margin-right: 3px;
}
.desc{
color: #999;
line-height: 1.5;
}
.page{
display: block;
width: 100%;
text-align: center;
font-size: 16px;
padding-bottom: 15px;
}
.icon-company{
width: 22px;
height: 22px;
vertical-align: -4px;
margin-right: 5px;
}
.icon-job{
width: 18px;
height: 18px;
vertical-align: -3px;
margin-right: 3px;
}
.icon-computer{
width: 26px;
height: 26px;
vertical-align: -6px;
margin-right: 5px;
}
app.json
{
"pages": [
"pages/index/index"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "MY RESUME",
"navigationBarTextStyle": "black"
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}