Vue + Bootstrap 制作炫酷个人简历（二）

2021-11-02 23:16:36

没想到隔了这么久才来更新。

用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:未添加相关插件文件！

码农公寓

相关文章