效果预览：
网页版效果图
开发环境
1.hbuilderx
2.微信开发者工具
代码实现
主要是这两个页面文件
1.index.vue
<template>
<view class="">
<section class="container">
<section class="side" id="side" >
<!-- 个人肖像 -->
<section class="me">
<!-- 头像照片 -->
<img class="avatar" src="https://img-blog.csdnimg.cn/20210425144925265.png" style="width: 120px;border-radius:50%;height: 120px;">
<h1 class="name">一粒程序米</h1>
<h4 class="info-job">前端开发工程师 / 中山</h4>
</section>
<!-- 基本信息 -->
<section class="profile info-unit">
<h2>
<i class="fa fa-user" aria-hidden="true"></i>基本信息</h2>
<hr/>
<ul>
<li>
<label>个人信息</label>
<span>一粒程序米 / 女</span>
</li>
<li>
<label>英语水平</label>
<span>CET-4</span>
</li>
</ul>
</section>
<!-- 联系方式 -->
<section class="contact info-unit">
<h2>
<i class="fa fa-phone" aria-hidden="true"></i>联系方式</h2>
<hr/>
<ul>
<li>
<label>邮箱</label>
<a href="mailto:wangjinchan_wjc@qq.com?subject=邮件主题&body=这是邮件的内容" target="_blank">wangjinchan_wjc@qq.com</a>
</li>
<li>
<label>博客</label>
<a href="https://wangjinchan.blog.csdn.net" target="_blank">https://wangjinchan.blog.csdn.net</a>
</li>
<li>
<label>Gitee</label>
<a href="https://gitee.com/wangjinchan" target="_blank">https://gitee.com/wangjinchan</a>
</li>
</ul>
</section>
<!-- 技能点 -->
<section class="skill info-unit">
<h2>
<i class="fa fa-code" aria-hidden="true"></i>技能点</h2>
<hr/>
<view class="my-progress" style="width: 80%;">
<ul>
<li>
<label>HTML</label>
<progress percent="80" show-info stroke-width="10" activeColor="#1abc9c" :show-info="false"/>
</li>
<li>
<label>CSS</label>
<progress percent="80" show-info stroke-width="10" activeColor="#1abc9c" :show-info="false" />
</li>
<li>
<label>JavaScript</label>
<progress percent="80" show-info stroke-width="10" activeColor="#1abc9c" :show-info="false"/>
</li>
<li>
<label>Vue</label>
<progress percent="70" show-info stroke-width="10" activeColor="#1abc9c" :show-info="false" />
</li>
<li>
<label>java</label>
<progress percent="80" show-info stroke-width="10" activeColor="#1abc9c" :show-info="false" />
</li>
<li>
<label>Andorid</label>
<progress percent="75" show-info stroke-width="10" activeColor="#1abc9c" :show-info="false" />
</li>
<li>
<label>iOS</label>
<progress percent="70" show-info stroke-width="10" activeColor="#1abc9c" :show-info="false"/>
</li>
<li>
<label>c语言</label>
<progress percent="70" show-info stroke-width="10" activeColor="#1abc9c" :show-info="false"/>
</li>
</ul>
</view>
</section>
<!-- 技术栈 -->
<div class="stack info-unit">
<h2><i class="fa fa-code" aria-hidden="true"></i>其他</h2>
<hr/>
<ul>
<li>
<label>前端</label>
<span>vue、uni-app、Android、iOS</span>
</li>
<li>
<label>后端</label>
<span>springboot、MySQL</span>
</li>
<li>
<label>其他</label>
<span>Git、Photoshop </span>
</li>
</ul>
</div>
</section>
<section class="main">
<!-- 教育经历 -->
<section class="edu info-unit">
<h2>
<i class="fa fa-graduation-cap" aria-hidden="true"></i>教育经历</h2>
<hr/>
<ul>
<li>
<h3>
<span>韩山师范学院 - 电子信息工程</span>
<time>2016.9-2020.6</time>
</h3>
</li>
<li>
<p><b>主修课程:</b> c语言、Java、web技术、单片机应用课程设计、无线传感网技术、物联网企业项目实践</p>
</li>
</ul>
</section>
<section class="edu info-unit ">
<h2>
<i class="fa fa-graduation-cap" aria-hidden="true"></i>荣誉奖项</h2>
<hr/>
<ul >
<li>1.获学校2020届优秀毕业生</li>
<li>2.连续四年获学业奖学金</li>
<li>3.2019年获第十届蓝桥杯算法Java软件B组竞赛省级三等奖</li>
<li>4.2016年获学校"优秀团员"</li>
</ul>
</section>
<!-- 工作经历 -->
<section class="work info-unit">
<h2>
<i class="fa fa-shopping-bag" aria-hidden="true"></i>工作经历</h2>
<hr/>
<ul>
<li>
<h4>
<span>[经历1]中山xxxx有限公司－前端开发工程师</span>
<time>2021.9-至今</time>
</h4>
<ul class="info-content" >
<li>1.参与项目功能模块实现</li>
<li>2.开发安卓功能插件、iOS功能插件</li>
<li>3.封装vue页面组件</li>
<li>4.优化维护项目，修复bug</li>
<li>5.从零搭建使用原生插件的uni-app项目</li>
</ul>
</li>
<li>
<h4>
<span>[经历2]中山市xxxxx有限公司-软件开发工程师</span>
<time>2020.1 至 2021.8</time>
</h4>
<ul class="info-content" >
<li>1.参与项目的需求分析、项目设计、模块开发；</li>
<li>2.独立承担公司项目的功能设计、开发和实现，包括web前后端开发、安卓客户端；</li>
<li>3.编写技术文档、数据库设计文档、项目使用说明文档</li>
<li>4.负责项目推进及优化工作</li>
</ul>
</li>
</ul>
</section>
<!-- 项目经验 -->
<section class="project info-unit">
<h2><i class="fa fa-shopping-bag" aria-hidden="true"></i>企业项目</h2>
<hr/>
<ul>
<li>
<h4>
<span>[项目1：xxx公司] xxxx</span>
<time>2021.9-至今</time>
</h4>
<p>技术栈：uni-app+原生插件+echarts</p>
<ul class="info-content" >
<li>1.负责app框架搭建和对应功能模块的实现</li>
<li>2.开发设计功能流程图，如手环数据采集上传、手环交互</li>
<li>3.开发安卓、iOS原生插件（音频、集成xx手环、xx手环）</li>
<li>4.封装ui组件（问卷组件、echarts图表）</li>
<li>5.重构优化app并不断维护修复bug</li>
<li>6.负责部分后端接口代码编写</li>
<li>7.负责app后台管理系统前端部分ui组件封装</li>
</ul>
</li>
<li>
<h4>
<span>[项目2：xx公司] xxxx</span>
<time>2020.1-2021.8</time>
</h4>
<p>技术栈：Android+springboot+MySQL+串口通信</p>
<ul class="info-content" >
<li>1.独立承担安卓app开发和web开发</li>
<li>2.实现用户管理功能需求</li>
<li>3.集成短信验证码</li>
<li>4.集成支付宝</li>
<li>5.实现即时聊天</li>
<li>6.数据加密</li>
<li>7.与硬件端进行串口通信</li>
</ul>
</li>
</ul>
</section>
<section class="project info-unit">
<h2><i class="fa fa-shopping-bag" aria-hidden="true"></i>个人项目</h2>
<hr/>
<ul>
<li>
<h4>
<span>1.基于语音控制的智能衣柜系统（毕业设计）</span>
<time>2019.10.15-至今</time>
</h4>
<ul class="info-content">
<li>
<p>技术栈：单片机+zigbee+WiFi+Android+物联网三层</p>
<p>功能：语音控制 、除湿杀菌，手机APP远程控制、广域网控制，智能照明</p>
<p>职责：负责整个系统结构搭建以及代码编写</p>
</li>
</ul>
</li>
<li>
<h4>
<span>1.无线网络调试助手</span>
<time>2020.3.1-至今</time>
</h4>
<ul class="info-content">
<li>
<p>技术栈：TCP/IP+经典蓝牙+低功耗蓝牙</p>
<p>功能：集成tcp，udp，经典蓝牙，低功耗蓝牙的服务端和客户端。</p>
<p>职责：负责整个系统结构搭建以及代码编写</p>
</li>
</ul>
</li>
</ul>
</section>
<p style="color: #1ABC9C;font-size: 10px;position: absolute;right:60px;">更多项目详见gitee</p>
<!-- 自我评价 -->
<section class="work info-unit">
<h2>
<i class="fa fa-pencil" aria-hidden="true"></i>自我评价</h2>
<hr/>
<p><span class="mark-txt">“坚持学习与复盘，坚持运动与分享”</span></p>
</section>
<view class="">
<button type="default" @click="handleClick">项目预览</button>
</view>
</section>
</section>
<footer class="footer">
<p>© 2022 一粒程序米.文档最后更新时间为<time>2022年03月10日.</time></p>
</footer>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello'
}
},
onLoad() {
},
methods: {
handleClick(){
uni.navigateTo({
url:'../imageView/imageView'
})
}
}
}
</script>
<style >
a{
color: #1ABC9C;
}
.my-progress{
width: 80%;
/* margin: 0 auto; */
}
.my-progress li{
padding-top: 10px;
}
page {
background: #e5e5e5;
width: 100%;
overflow-x: hidden;
padding: 1rem 10%;
padding-bottom: 0;
box-sizing: border-box;
font-size: .9em; }
page .fa {
margin-right: .1em; }
page .info-unit {
margin-bottom: 1rem; }
page .info-unit h2 {
font-weight: 700; }
page .info-unit h3 {
font-weight: 300; }
/* -------------------------------------------------
* 头部部分
* ------------------------------------------------- */
.header {
display: none; }
/* -------------------------------------------------
* 主体部分
* ------------------------------------------------- */
.side {
position: absolute;
width: 20rem;
background: #fff;
border-radius: 5px;
box-shadow: 0 5px 20px #bbb;
box-sizing: border-box;
padding: 1rem;
}
.container .side .me {
text-align: center;
margin-bottom: 2rem; }
.container .side .me .portrait {
margin: 0 auto;
margin-bottom: 1rem;
width: 8rem;
height: 8rem;
overflow: hidden;
position: relative; }
.container .side .me .portrait .loading span:nth-child(2) {
-webkit-animation-delay: 0.2s; }
.container .side .me .portrait .loading span:nth-child(3) {
-webkit-animation-delay: 0.4s; }
.container .side .me .portrait .loading span:nth-child(4) {
-webkit-animation-delay: 0.6s; }
.container .side .me .portrait .loading span:nth-child(5) {
-webkit-animation-delay: 0.8s; }
.container .side .me .portrait img {
display: none;
width: 8rem;
height: 8rem;
border-radius: 50%; }
.container .side .info-unit ul li label {
display: inline-block;
width: 30%; }
.container .side .info-unit ul li span {
display: inline-block;
vertical-align: top;
width: 65%; }
.container .main {
position: relative;
margin-left: 22rem;
background: #fff;
border-radius: 5px;
box-shadow: 0 5px 20px #bbb;
box-sizing: border-box;
padding: 1rem; }
.container .main .info-unit ul {
box-sizing: border-box;
padding-left: 1.2rem;
padding-right: 0.8rem; }
.container .main .info-unit ul li {
margin-bottom: 1rem;
list-style: disc; }
.container .main .info-unit ul li h3 .link {
font-size: .5rem;
border: 1px solid #4db6ac;
padding: 1px 3px;
-webkit-border-radius: 5px;
border-radius: 5px;
margin-left: .5rem; }
.container .main .info-unit ul li h3 time {
text-align: right;
font-size: 12px;
float: right; }
.container .main .info-unit ul li .info-content li {
list-style: circle;
font-size: 11px;
margin: 0; }
.container .main .info-unit ul li .info-content .fa {
font-size: 1em; }
/* -------------------------------------------------
* 文档底部
* ------------------------------------------------- */
.footer {
width: 100%;
margin-top: 1rem;
height: 2rem; }
.footer p {
line-height: 2rem;
text-align: center;
font-size: 0.8rem; }
/* -------------------------------------------------
* 自定义部分
* ------------------------------------------------- */
.fa {
font-size: 1.2em; }
h2 {
font-size: 1.2em; }
h3 {
font-size: 1.1em; }
hr {
margin-bottom: .4em; }
aside {
position: fixed;
right: 0;
top: 30%;
z-index: 2; }
aside ul li {
margin-bottom: 10px;
-webkit-border-radius: 10px 0 0 10px;
border-radius: 19px 0 0 10px;
-webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
background: #1abc9c; }
aside ul li a {
display: inline-block;
width: 80px;
height: 38px;
line-height: 38px;
padding-left: 10px;
color: #fff; }
mark {
background: rgba(232, 232, 232, 0.8); }
@media screen and (max-width: 1169px) {
.container .info-unit h3 span {
display: block; }
.container .info-unit h3 span.link {
display: inline; }
.container .project h3 span {
display: inline; }
.container .project h3 time {
display: block; }
.container .main .info-unit ul li h3 time {
float: none;
text-align: left; } }
@media screen and (max-width: 1034px) {
body {
padding: 1rem 3%; } }
@media screen and (max-width: 750px) {
.container .side {
position: static;
width: 95%;
margin: 0 auto; }
.container .main {
position: static;
margin-left: 0;
width: 95%;
margin: 0 auto;
margin-top: 1.5rem; }
/* #nav-m {
display: none;
position: fixed;
width: 28px;
height: 28px;
right: 10px;
bottom: 20px;
box-shadow: 0 5px 20px #bbb;
border-radius: 50%; }
#nav-m svg {
width: 28px;
height: 28px; } */
aside {
display: none; } }
</style>
2.imageView.vue
<template>
<view class="content">
<h1>1.智能衣柜</h1>
<image src="../../static/images/qrcode_gitee.com.png" mode=""></image>
<h1>2.无线网络调试助手</h1>
<image src="../../static/images/iot.png" mode=""></image>
<h1>3.万能空调遥控器</h1>
<image src="../../static/images/kongtiao.png" mode=""></image>
<h1>4.智能停车场app</h1>
<image src="../../static/images/park.png" mode=""></image>
<h1>5.博客</h1>
<image src="../../static/images/blog.png" mode=""></image>
<button class="" @click="back">返回简历</button>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
back(){
uni.navigateTo({
url:'../index/index'
})
}
}
}
</script>
<style>
.content{
padding: 30px;
}
.content image{
border-radius: 10px;
width: 200px;
height: 200px;
}
</style>
静态图片
对了，要发布成为小程序的话，以下的都要勾上
以及在微信开发者工具那里也要勾上
完结。
需要源码的请先自己尝试一下自己搭建一下，如果搭建不成功再留下邮箱吧。
ui设计来源于 拾迹，有做一定的修改。
1341
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
