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">&#xe65d;</span></a></li>
          <li><a href="https://drunk-poetry.github.io/" style="color: #666;" target="_blank"><span class="iconfont">&#xe600;</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">&#xe62e;</span></a></li>
          <li data-toggle="tooltip" data-placement="top"><a href="mailto:youngam@qq.com" style="color: #666;" target="_blank"><span class="iconfont">&#xe6af;</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:未添加相關插件文件！