Vue + Bootstrap 制作炫酷个人简历(二)
没想到隔了这么久才来更新。
用vue做简历,不是非常适合,为什么呢。
因为简历没什么数据上的操作,一般都是静态的内容。
不过都说了用Vue来做,也只能强行续命了。
这里是我做好的成品 非一般简历
由于未涉及页面跳转,所以没有vue-router
想要实现如网页中的功能,首先我们要使用fullpage.js插件
这也是jquery的插件之一,官网地址
他可以让我们的页面实习全屏滚动效果。
本来式通过 npm 进行安装使用的,结果。。。
3版本需要许可证书,ok,我在网站找了一个以前的,下载下来用。
正式进入正题。
修改app.vue如下
<template>
<div id="app">
<div id="fullpage">
<div class="section section1">
<page1/>
</div>
<div class="section section2">
<page2/>
</div>
<div class="section section3">
<page3/>
</div>
<div class="section section4">
<page4/>
</div>
</div>
</div>
</template> <script>
import Page1 from './Pages/page1/Page1'
import Page2 from './Pages/page2/Page2'
import Page3 from './Pages/page3/Page3'
import Page4 from './Pages/page4/Page4'
import $ from 'jquery'
import './assets/lib/fullpage/jquery.easings.min.js'
import './assets/lib/fullpage/jquery.fullPage.js'
export default {
name: 'App',
components: {
Page1,
Page2,
Page3,
Page4
},
mounted: function () {
$('#fullpage').fullpage({
verticalCentered: false,
anchros: ['page1', 'page2', 'page3', 'page4'],
navigation: true,
navigationTooltips: ['首页', '教育背景', '实习经历', '专业技能']
})
}
}
</script> <style>
* {
margin: 0;
padding: 0;
}
a {
color: #666666;
}
a:active, a:visited {
color: #666666;
text-decoration: none;
}
a:hover {
color: #6CA6CD;
text-decoration: none;
}
#fullpage {
background: #F2F2F2;
}
.section {
overflow: hidden;
}
</style>
这里我们引用了四个页面(当然,前提我们需要创建四个页面)
由于 a 标签作用于全局,所以未使用scoped
接下来,创建Page1
再src目录下创建Pages文件夹用来存放我们的代码
具体如图:
编辑 创建好 page1.vue —— page4.vue 然后逐个编辑
当然,我是写完一个页面再创的另一个页面。
编辑Page1.vue 代码如下:
<template>
<div class="container">
<div class="col-md-4 col-md-offset-4 mycontent" @click.self="hideWeiXin()">
<div class="img-circle img-content">
<img src="https://i04piccdn.sogoucdn.com/3c28af542f2d49f7-fe9c78d2ff4ac332-9ce573e288e09eb3de538388d1a831bb_qq" alt="">
</div>
<h2 class="text-muted my-nane">YoungAm</h2>
<h3 class="my-work">前端工程师<a href="" style="color: #666;"><em>-自由职业</em></a></h3>
<ul class="list-inline my-icon">
<li><a href="http://www.youngam.cn" style="color: #666;" target="_blank"><span class="iconfont"></span></a></li>
<li><a href="https://drunk-poetry.github.io/" style="color: #666;" target="_blank"><span class="iconfont"></span></a></li>
<li @click.prevent="showWeiXin()"
@mouseenter="showWeiXin()"
@mouseleave="hideWeiXin()"
class="popover-toggle"
title="我的微信"
data-container="body"
data-toggle="popover"
data-placement="top"
data-content='<img src="http://youngam.cn/hi/images/wechat.png" alt="加载失败">'
data-html='true'
><a href="" style="color: #666;"><span class="iconfont"></span></a></li>
<li data-toggle="tooltip" data-placement="top"><a href="mailto:youngam@qq.com" style="color: #666;" target="_blank"><span class="iconfont"></span></a></li>
</ul>
<p class="one-say">风雨一生兼程,灵魂轻盈随行</p>
</div>
</div>
</template> <script>
import $ from 'jquery'
export default {
name: 'Page1',
methods: {
showWeiXin: function () {
$('.popover-toggle').popover('show')
},
hideWeiXin: function () {
$('.popover-toggle').popover('hide')
}
}
}
</script> <style>
@font-face {
font-family: 'iconfont'; /* project id 1078238 */
src: url('//at.alicdn.com/t/font_1078238_ba5f0tzj7er.eot');
src: url('//at.alicdn.com/t/font_1078238_ba5f0tzj7er.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_1078238_ba5f0tzj7er.woff2') format('woff2'),
url('//at.alicdn.com/t/font_1078238_ba5f0tzj7er.woff') format('woff'),
url('//at.alicdn.com/t/font_1078238_ba5f0tzj7er.ttf') format('truetype'),
url('//at.alicdn.com/t/font_1078238_ba5f0tzj7er.svg#iconfont') format('svg');
}
.iconfont {
font-family:"iconfont" !important;
font-size:16px;font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
.mycontent {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.img-content {
width:210px;
height:0;
padding-bottom: 210px;
margin-bottom: 150px;
border: 1px solid #aaa;
overflow: hidden;
transition: 1.3s;
}
.active .img-content {
margin-bottom: 30px;
}
.img-content:hover {
transform-origin: 50% 50%;
animation: touPicAni ease-in-out 1.5s;
}
.img-content img {
width: 101%;
}
.my-nane {
line-height: 1rem;;
}
.my-work {
font-weight: bold;
line-height: .1rem;
}
.my-work em {
font-size: 1.8rem;
font-weight: 300;
}
.my-work a:hover {
color: inherit;
}
.my-icon span {
font-size: 2.2rem;
line-height: 4rem;
padding: 20px;
transition-delay: 1.3s;
transition: 1.3s;
}
.active .my-icon span {
font-size: 2rem;
padding: 1px;
}
.one-say {
font-size: 2rem;
margin-top: 10%;
letter-spacing: .3em;
text-shadow: 3px 4px 2px #AAAAAA;
white-space: nowrap;
}
.popover-content img {
width:100%;
}
@keyframes touPicAni{
0%{transform: rotateZ(0);}
25%{transform: rotateZ(40deg);}
75%{transform: rotateZ(-40deg);}
100%{transform: rotateZ(0);}
}
</style>
再说一句,由于我后来想改为普通的网页文件,为了方便,没有使用需要编码的stylus
Page2.vue ,如下:
<template>
<div class="container">
<div class="col-md-4 col-md-offset-4 mycontent">
<h1 class="page-title">教育背景</h1>
<div class="teach-block my-ani">
<p class="teach-time text-center">2016.09 - 2020.06</p>
<h2 class="text-center">四川师范大学 本科</h2>
<h3 class="text-center">影视与传媒学院 <b class="text-info">数字媒体技术</b></h3>
</div>
<div class="learn-class my-ani">
<h1 class="text-center">主修课程</h1>
<h4>web编程、web3D技术、面向对象程序设计 <br>虚拟现实技术、数据库基础、游戏设计</h4>
</div>
<div class="get-reward my-ani">
<h1 class="text-center">荣获奖励</h1>
<h4>国家励志奖学金 一等奖学金 二等奖学金</h4>
</div>
</div>
</div>
</template> <script>
export default {
name: 'Page2'
}
</script> <style>
h1, h2, h3, h4, p {
font-family: "楷体", "宋体", "微软雅黑";
white-space: nowrap;
}
@keyframes title-ani{
0% {transform: scale(1);}
50% {transform: scale(1.2);}
100% {transform: scale(1);}
}
.text-center {
text-align: center;
margin: 2px;
}
.page-title{
transition-delay: .2s;
transition: 1s;
font-size: 50px;
font-weight: bold;
padding-bottom: 300px;
}
.active .page-title {
padding-bottom: 40px;
animation: title-ani ease 1.3s;
}
.teach-time {
font-size: 15px;
}
.learn-class {
margin: 30px 0;;
}
.my-ani {
opacity: 0;
transition: 1.3s;
margin-left: 150px;
}
.active .teach-block {
transition-delay: .5s;
opacity: 1;
margin: 0;
}
.active .learn-class {
transition-delay: 1s;
opacity: 1;
margin: 30px 0;
}
.active .get-reward {
transition-delay: 1.5s;
opacity: 1;
margin: 0;
}
</style>
Page3.vue 代码如下:
<template>
<div class="container">
<div class="col-md-4 col-md-offset-4 mycontent">
<h1 class="page-title">实习经历</h1>
<div class="teach-block my-ani">
<span class="leader-icon"></span>
<h2 class="work-title">四川全美 <span class="text-muted">前端工程师</span></h2>
<p class="teach-time ">2017.09 - 2018.12</p>
<ul class="work-detail">
<li>负责公司产品的前端页面制作</li>
<li>优化代码兼容性</li>
<li>前端交互和网页美化</li>
</ul>
</div>
<div class="learn-class my-ani">
<span class="leader-icon"></span>
<h2 class="work-title">四川全美 <span class="text-muted">前端工程师</span></h2>
<p class="teach-time ">2017.09 - 2018.12</p>
<ul class="work-detail">
<li>负责公司产品的前端页面制作</li>
<li>优化代码兼容性</li>
<li>前端交互和网页美化</li>
</ul>
</div>
<div class="get-reward my-ani">
<span class="leader-icon"></span>
<h2 class="work-title">四川全美 <span class="text-muted">前端工程师</span></h2>
<p class="teach-time ">2017.09 - 2018.12</p>
<ul class="work-detail">
<li>负责公司产品的前端页面制作</li>
<li>优化代码兼容性</li>
<li>前端交互和网页美化</li>
</ul>
</div>
</div>
</div>
</template> <script>
export default {
name: 'Page3'
}
</script> <style scoped>
h1, h2, h3, p {
margin: 2px;
}
.leader-icon {
width: 35px;
height: 35px;
border: 5px solid #6CA6CD;
border-radius: 50%;
position: absolute;
left: -60px;
top: 0px;
}
.leader-icon::before {
content: '';
width: 7px;
height: 7px;
border-radius: 50%;
background: #333333;
position: absolute;
top: 9px;
left: 9px;
}
.leader-icon::after {
content: '';
width: 5px;
height: 330%;
background: #333333;
position: absolute;
top: 40px;
left: 10px;
}
.leader2::after {
height: 350%;
}
.my-ani {
position: relative;
left: 60px;
width: 100%;
margin-top: 80px;
margin-left: 0;
}
.active .my-ani {
margin: 3px;
}
.work-title span {
font-size: 20px;
}
.work-detail {
font-size: 15px;
margin-left: 30px;
}
</style>
Page4.vue 代码如下:
<template>
<div class="container">
<div class="col-md-6 col-md-offset-3 mycontent">
<h1 class="page-title">专业技能</h1>
<div class="my-container" v-for="(item, index) in skills" :key="index">
<div class="col-xs-4 skill-content">
<p class="text-muted skills">{{item.name}}</p>
</div>
<div class="col-xs-8">
<div class="progress progress-content">
<div :class="['progress-bar','progress-bar-info','pro-default','pro'+index]"><p class="progress-text">{{item.pro}}</p></div>
</div>
</div>
</div>
</div>
</div>
</template> <script>
import $ from 'jquery'
export default {
name: 'Page4',
data () {
return {
skills: [{
name: 'HTML',
pro: '80%'
}, {
name: 'JavaScript',
pro: '80%'
}, {
name: 'css/css3',
pro: '80%'
}, {
name: 'Jquery',
pro: '75%'
}, {
name: 'Bootstrap',
pro: '75%'
}, {
name: 'Vue.js',
pro: '70%'
}, {
name: 'Unity/C#',
pro: '67%'
}, {
name: 'PHP',
pro: '32%'
}, {
name: 'Mysql',
pro: '30%'
}],
getProText: ''
}
},
mounted: function () {
$.each($('.progress-text'), function (i, value) {
let tempNum = parseInt(value.innerText)
if (tempNum > 75) {
$('.progress-text').eq(i).addClass('progress-bar-info').text('擅长')
} else if (tempNum > 50) {
$('.progress-text').eq(i).addClass('progress-bar-success').text('熟悉')
} else {
$('.progress-text').eq(i).addClass('progress-bar-warning').text('了解')
}
})
}
}
</script> <style>
.my-container {
width: 95%;
}
.skills {
font-size: 20px;
line-height: 20px;
text-align: center;
}
.progress-text {
font-size: 1.5rem;
}
.progress-content {
box-shadow: 0 0 4px 1px #D4D4D4;
}
.pro-default {
transition: 2.3s ease-out;
width: 0;
}
.active .pro0, .active .pro1, .active .pro2{
width: 80%;
}
.active .pro3 {
width: 75%;
}
.active .pro4 {
width: 70%;
}
.active .pro5 {
width: 65%;
}
.active .pro6 {
width: 67%;
}
.active .pro7 {
width: 32%;
}
.active .pro8 {
width: 30%;
}
@media screen and (max-height:990px) {
.skill-content {
margin: -5px;
}
}
</style>
然后主要的就是这样,下次再讲一些细节。
上面代码运行肯定有错。
ps:未添加相关插件文件!
Vue + Bootstrap 制作炫酷个人简历(二)的更多相关文章
- Vue + Bootstrap 制作炫酷个人简历(一)
最近看了别人做的简历,简单炫酷,自己非常喜欢,于是打算自己做一个,尝试一下. 由于写这篇随笔的时候才开始动工,所以目前没有成品给大家看. emmm等我更新完会在最后附上成品. 现在 开始! 首先 配置 ...
- 基于Bootstrap的炫酷jQuery slider插件
简要教程 这是一款在原生bootstrap slider的基础上制作效果非常炫酷的jQuery slider插件.该slider插件可以自定义slider的颜色.形状.透明度和tooltip等属性,美 ...
- 用AI制作炫酷效果
PART1:制作第一个效果 步骤一:新建一个800*600的画布. 骤二:从工具栏选“矩形工具”,创建一个800*600的矩形.白色的是画布,浅红色(我的AI之前保留的填充颜色,每个人都不一样)的是你 ...
- web报表设计器在线制作炫酷图表
相信很多人都看过这些大屏的图表,是不是感觉效果很酷炫,做起来会很复杂,按照传统的方式去做,使用数据分析工具结合ps美化可能耗时要数月才能做出来.但这个时候用Smartbi自助仪表盘功能,全方位的满足各 ...
- css3制作炫酷导航栏效果
今天主要利用hover选择器.鼠标滑过查看效果. 一.普通导航栏 Home Content Service Team Contact 对于这种普通的导航栏,只是鼠标滑过的时候颜色会变,所以思路变得很简 ...
- vue 写一个炫酷的轮播图
效果如上图: 原理: 1.利用css 的 transform 和一些其他的属性,先选五张将图片位置拍列好,剩余的隐藏 2.利用 js 动态切换类名,达到切换效果 css代码如下 .swiper-cer ...
- vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)
前言: 此事例是在vue组件中,使用canvas实现倒计时动画的效果.其实,实现效果的逻辑跟vue没有关系,只要读懂canvas如何实现效果的这部分逻辑就可以了 canvas动画的原理:利用定时器,给 ...
- canvas,制作炫酷的时钟和倒计时
html部分 p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 30.0px Consolas; color: #2b7ec3 } p.p2 { margin ...
- 制作炫酷banner js插件,revolution
这是一款非常强大的内容切换插件,它基于jQuery,它充分响应,支持移动设备,支持手机触摸,键盘翻页:它内置幻灯.视频播放计时器,它拥有各种模式:自定义,自动响应,全屏:它有多种动画效果.3d效果.. ...
随机推荐
- 2018.10.31 NOIP模拟 几串字符(数位dp+组合数学)
传送门 如果观察到性质其实也不是很难想. 然而考试的时候慌得一批只有心思写暴力233. 下面是几个很有用的性质: c0,1+1≥c1,0≥c0,1c_{0,1 }+1 ≥ c_{1,0} ≥ c_{0 ...
- mysql下载、安装
一.下载 网上下载地址五花八门,为了防止出现不必要的麻烦,建议直接从官网下载.有几点好处: 1.没有任何其他捆绑的软件 2.版本分布清晰,一般建议选择较新版本 mysql官网下载地址:https ...
- flask 知识积累
PythonWEB框架之Flask Flask快速入门,知识整理 Flask 框架
- 程序员面试50题—sizeof的用法(6)
以下为Windows下的32 位C++程序,请计算sizeof 的值void Func ( char str[100] ){sizeof( str ) = ?}void *p = malloc( 10 ...
- UVa 11427 Expect the Expected (数学期望 + 概率DP)
题意:某个人每天晚上都玩游戏,如果第一次就䊨了就高兴的去睡觉了,否则就继续直到赢的局数的比例严格大于 p,并且他每局获胜的概率也是 p,但是你最玩 n 局,但是如果比例一直超不过 p 的话,你将不高兴 ...
- 【王者荣耀之IT大神版】1.1版本升级之“投降机制”
版本:1.1 关于“投降机制”的理论基础与灵感来源于<微习惯>这本书. 简单来说,微习惯就是很小很小的习惯,比如说,每天做一个俯卧撑,每天看一页书等等.我们以前也许有过很多的计划,但却总是 ...
- 2.2.2synchronized同步代码块的使用
当两个并发线程访问同一个对象object中的synchronized(this)同步代码块时,一段时间内只能有一个线程执行,另一个线程必须等待期执行完才能执行. package com.cky.bea ...
- 2.2.1synchronized方法的弊端
缺陷:用关键字synchronized声明方法是有弊端的,譬如A线程调用同步方法执行一个长时间的任务,那么B线程则必须等待较长的时间, 解决方法:使用synchronized同步语句块 package ...
- Java理论学时第三节。课后作业。
如果一个类中既有初始化块,又有构造方法,同时还设定了字段的初始值,谁说了算? 运行结果. 根据我的总结,它们三个的优先级是:构造方法 > 字段初始值 > 初始化块. 当多个类之间有继承关系 ...
- SSM_CRUD新手练习(1)创建项目
最近看了SSM框架,网上找了个入门视频的比较简单的小项目熟悉一下框架.现在把整个过程记录下来. 1.创建Maven工程,注意我们选择的是simple project就够了. 这样我们的Maven项目就 ...