最近2018中文字幕在日韩欧美国产成人片_国产日韩精品一区二区在线_在线观看成年美女黄网色视频_国产精品一区三区五区_国产精彩刺激乱对白_看黄色黄大色黄片免费_人人超碰自拍cao_国产高清av在线_亚洲精品电影av_日韩美女尤物视频网站

小編給大家分享一下Vue+Element如何實(shí)現(xiàn)網(wǎng)頁(yè)版?zhèn)€人簡(jiǎn)歷系統(tǒng)，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)公司專注于大石橋企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站,商城網(wǎng)站開(kāi)發(fā)。大石橋網(wǎng)站建設(shè)公司,為大石橋等地區(qū)提供建站服務(wù)。全流程按需定制開(kāi)發(fā)，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務(wù)

一.項(xiàng)目介紹

本項(xiàng)目是一個(gè)網(wǎng)頁(yè)版的個(gè)人簡(jiǎn)歷系統(tǒng)，主要使用的技術(shù)為vue2+element進(jìn)行實(shí)現(xiàn)。

個(gè)人簡(jiǎn)歷系統(tǒng) 主要包含六個(gè)單文件組件：頂部菜單、首頁(yè)、個(gè)人簡(jiǎn)介、個(gè)人技能、工作經(jīng)歷和底部頁(yè)腳。

先來(lái)一個(gè)動(dòng)圖感受一下：

項(xiàng)目目錄：

下面就來(lái)詳細(xì)介紹一下每個(gè)組件。

二.頂部菜單

頂部菜單組件為:src\components\menu\TopMenu.vue

1.源代碼

 .logo-title{
 position: absolute;
 left: 100px;
 top: 0px;
 color:#fff;
 font-size:26px;
 cursor: pointer;
 }
 .logo-title img{
 width: 80px;
 outline:none;
 vertical-align: middle;
 }

2.說(shuō)明 菜單

菜單的實(shí)現(xiàn)使用了element的 NavMenu 導(dǎo)航菜單 組件

菜單整體使用了fixed定位，將其固定在瀏覽器頂部；并且使用z-index設(shè)置菜單堆疊在最頂層。

圖標(biāo)

圖標(biāo)采用了element的icon 組件

菜單跳轉(zhuǎn)

我們點(diǎn)擊菜單欄的四個(gè)選項(xiàng)，頁(yè)面會(huì)自動(dòng)滾動(dòng)到對(duì)應(yīng)的視圖。對(duì)應(yīng)的實(shí)現(xiàn)的函數(shù)是handleSelect函數(shù)，該函數(shù)作用于 NavMenu 導(dǎo)航菜單 提供的select事件的回調(diào)函數(shù)。

在這里，需要關(guān)注的參數(shù)為index，它是 元素設(shè)置的index屬性值。

handleSelect函數(shù)根據(jù)index參數(shù)，可以得知當(dāng)前激活了那個(gè)菜單，然后根據(jù)菜單的name值，讓滾動(dòng)條至對(duì)應(yīng)的視圖。

//點(diǎn)擊菜單欄的選擇，自動(dòng)滾動(dòng)到對(duì)應(yīng)的視圖
handleSelect (index, indexPath) {
  var name = ''
  if (index === '1') name = 'homepage'
  if (index === '4') name = 'productpage'
  if (index === '3') name = 'securityresearch'
  if (index === '2') name = 'aboutus'
  var targetEle = document.querySelector('.' + name)
  var offsetTop = targetEle.offsetTop
  document.documentElement.scrollTop = offsetTop - 150
}

三.首頁(yè)

首頁(yè)組件為：src\components\home\HomePage.vue

1. 源代碼

 .homepage{
 height: 550px;
 background: url(../../assets/home_bg.jpg) no-repeat;
 background-size: 100% 120%;
 color: #fff;
 font-size: 28px;
 margin-top: 100px;
 animation: bg infinite 100s linear alternate;
 }
 @keyframes bg {
 0% {background-size: 110% 130%; }
 10% {background-size: 111% 131%; }
 20% {background-size: 112% 132%; background-position: bottom;}
 30% {background-size: 113% 133%; }
 40% {background-size: 114% 134%;}
 50% {background-size: 115% 135%;background-position: left;}
 60% {background-size: 116% 136%;}
 70% {background-size: 117% 137%;}
 80% {background-size: 118% 138%;background-position: right;}
 90% {background-size: 119% 139%;}
 100% {background-size: 120% 140%;}
 }
 .content{
 display: inline-block;
 position: relative;
 top: 40%;
 }
 p{
 text-shadow: 0px 0px 10px rgba(255,255,255,0.5);
 letter-spacing: 10px;
 }
 .box{
 display: inline-block;
 width: 100px;
 height: 20px;
 }
 #box1{
 border-left:8px solid;
 border-top: 8px solid;
 position: relative;
 right: 150px;
 bottom: 20px;
 }
 #box2{
 border-top: 8px solid;
 border-right: 8px solid;
 position: relative;
 left: 150px;
 bottom: 20px;
 }
 #box3{
 border-left: 8px solid;
 border-bottom: 8px solid;
 position: relative;
 right: 150px;
 top: 20px;
 }
 #box4{
 border-right: 8px solid;
 border-bottom: 8px solid;
 position: relative;
 left: 150px;
 top: 20px;
 }

2.說(shuō)明

首頁(yè)主要是一個(gè)動(dòng)畫(huà)和中間的文字布局。

動(dòng)畫(huà)

關(guān)于背景圖片的動(dòng)畫(huà)特性使用的就是css3的animation，動(dòng)畫(huà)名為bg，在整個(gè)動(dòng)畫(huà)過(guò)程中改變background-size的大小，改變background-position的位置即可。

中間文字和布局

中間的文字和文字周?chē)木植恳揽康氖莗標(biāo)簽和四個(gè)div去實(shí)現(xiàn)的。

按照正常的文檔流，這一個(gè)p元素和四個(gè)div的布局如下：

設(shè)置四個(gè)div元素為行內(nèi)塊級(jí)元素：display:inline-block;（此時(shí)p元素依然是塊級(jí)元素）

這個(gè)時(shí)候布局基本是下面的樣子

然后在使用相對(duì)定位將四個(gè)邊框的top/bottom/left/right位置進(jìn)行調(diào)整

最后就是將對(duì)應(yīng)的border邊框進(jìn)行修改，比如：左上角的div#box1只設(shè)置border--top和border-left；左下角的div#box3只設(shè)置border-left和border-bottom。

修改完成后的樣式：

四.個(gè)人簡(jiǎn)介

個(gè)人簡(jiǎn)介組件代碼：src\components\AboutUs\AboutUs.vue

1.源代碼

 .aboutus{
 font-size: 14px;
 text-align: left;
 padding: 0px 100px;
 }
 .intro{
 width: 200px;
 border: 1px solid #ddd;
 border-radius: 5px;
 }
 .text {
 font-size: 14px;
 text-align: left;
 line-height: 30px;
 text-indent: 2em;
 }
 .box-card{
 position: relative;
 }
 .item {
 display: inline-block;
 margin: 30px 50px;
 }
 .clearfix:before,
 .clearfix:after {
 display: table;
 content: "";
 }
 .clearfix:after {
 clear: both
 }
 .clearfix span{
 color: #fff;
 font-weight: bold;
 }
 .title p{
 color: #8c8888;
 font-size: 15px;
 margin-bottom: 80px;
 text-align: center;
 }
 .grid-content .large{
 font-size: 16px;
 color: #409EFF;
 font-weight: bold;
 }
 .topMask{
 width: 100px;
 height: 100px;
 background-color: rgba(68,138,255,0.2);
 transform: rotate(45deg);
 position: absolute;
 }
 .square{
 border-radius: 5px;
 top: 0px;
 }
 .circular{
 border-radius: 50%;
 top:80px;
 left: 80%;
 background-color: rgba(255, 208, 75,0.2);
 }

2.說(shuō)明

個(gè)人簡(jiǎn)介這個(gè)組件中，主要包含三個(gè)內(nèi)容：分割線標(biāo)題、分割線標(biāo)題下的藍(lán)色標(biāo)簽、內(nèi)容部分和文字上方半透明圓形/方形陰影

分割線標(biāo)題

分割線使用了element的 Divider 分割線 組件，并且在分割線上面添加子自定義的文字內(nèi)容。

分割線的樣式為公共的樣式，在src\components\Product\Product.vue組件中，可以在瀏覽器中-右鍵-查看元素樣式，可以看到生效的樣式來(lái)源于該P(yáng)roduct組件。

藍(lán)色標(biāo)簽

藍(lán)色的標(biāo)簽使用了element的 Tag 標(biāo)簽 組件。

內(nèi)容

內(nèi)容部分使用了element的 layout24分欄布局 ，總共分為三列，每一欄占據(jù)的列數(shù)為8列：el-col的span屬性設(shè)置為8（同一行的span設(shè)置數(shù)組相加不能超過(guò)24，否則會(huì)換行）

同時(shí)三列中間的間隔通過(guò)設(shè)置el-row的gutter屬性來(lái)實(shí)現(xiàn)。

文字上方半透明圓形/方形陰影

文字上方有兩個(gè)陰影：藍(lán)色方形半透明陰影和橙色圓形半透明陰影

這兩個(gè)也比較簡(jiǎn)單，代碼位于分欄布局下方，設(shè)置了兩個(gè)div

對(duì)這兩個(gè)div都設(shè)置為100*100的大小，圓形形狀的實(shí)現(xiàn)通過(guò)設(shè)置圓角屬性border-radius為50%；菱形形狀通過(guò)將div進(jìn)行2d的旋轉(zhuǎn)45度即可實(shí)現(xiàn)。

兩個(gè)陰影的顏色和透明度可以自行修改，兩個(gè)陰影的位置通過(guò)設(shè)置兩個(gè)元素的定位為absolute，并且設(shè)置相應(yīng)的偏移量（top、bottom、left、right）即可。

五.個(gè)人技能

個(gè)人技能組件代碼：src\components\SecurityResearch\SecurityResearch.vue

1.源代碼

 .securityresearch{
 font-size: 14px;
 padding: 0px 100px;
 }
 .title p{
 color: #8c8888;
 font-size: 15px;
 margin-bottom: 80px;
 text-align: center;
 }
 .content p{
 font-size: 20px;
 color: #8c8888;
 }
 .skill{
 margin: 100px 0px;
 position: relative;
 }
 .skill span{
 display: inline-block;
 color: #fff;
 border-radius: 50%;
 }
 span.vue{
 background-color: rgba(102,153,204,1) ;
 width: 200px;
 height: 200px;
 line-height: 200px;
 font-size: 28px;
 z-index: 100;
 }
 span.js{
 background-color: rgba(255,153,102,0.5);
 width: 130px;
 height: 130px;
 line-height: 130px;
 font-size: 26px;
 position: absolute;
 left: 43%;
 bottom: 150px;
 z-index: 0;
 }
 span.css{
 background-color: rgba(102,204,204,0.8);
 width: 90px;
 height: 90px;
 font-size: 26px;
 line-height: 90px;
 font-size: 26px;
 position: absolute;
 left: 35%;
 top: 100px;
 z-index: 0;
 }
 span.echarts{
 background-color: rgba(255,153,153,0.7) ;
 width: 100px;
 height: 100px;
 line-height: 100px;
 font-size: 24px;
 position: absolute;
 left: 59%;
 bottom: 10px;
 z-index: 0;
 }
 span.webpack{
 background-color: rgba(255,204,51,0.8);
 width: 70px;
 height: 70px;
 line-height: 70px;
 font-size: 13px;
 position: absolute;
 left: 30%;
 top: 20px;
 z-index: 0;
 }
 span.python{
 background-color: rgba(204,102,102,0.5) ;
 width: 60px;
 height: 60px;
 line-height: 60px;
 font-size: 14px;
 position: absolute;
 left: 51%;
 bottom: -10px;
 z-index: 0;
 }
 span.linux{
 background-color: rgba(153,153,255,0.8) ;
 width: 60px;
 height: 60px;
 line-height: 60px;
 font-size: 14px;
 position: absolute;
 left: 60%;
 top: -50px;
 z-index: 0;
 }

2.說(shuō)明

個(gè)人技能組件主要就是技能模塊的布局（分割線和藍(lán)色標(biāo)簽在個(gè)人簡(jiǎn)介組件介紹時(shí)已經(jīng)說(shuō)過(guò)，這里不再重復(fù)）

技能模塊布局

所有的技能模塊均使用span元素實(shí)現(xiàn)

默認(rèn)的情況下，這七個(gè)技能模塊并排在一行顯示，且沒(méi)有任何樣式

然后給這七個(gè)模塊設(shè)置共同的樣式：字體顏色白色、圓角50%；在給這七個(gè)技能模塊設(shè)置你想要的元素大小（width/height）、字體大小、背景顏色。

然后我們需要設(shè)置兩個(gè)定位：

技能模塊的父元素div#skill設(shè)置為relative相對(duì)定位

將vue技能模塊之外的其他六個(gè)技能模塊進(jìn)行absolute絕對(duì)定位

最后一步就是根據(jù)自己的喜好設(shè)置其他六個(gè)技能模塊的偏移量（top、bottom、left、right），將不同的技能模塊移動(dòng)到不同的位置。

六.工作經(jīng)歷

工作經(jīng)歷組件代碼：src\components\SecurityResearch\SecurityResearch.vue

1.源代碼

 .productpage{
 padding: 0px 100px 0px 100px;
 }
 .productpage .project{
 display: flex;
 justify-content:space-around;
 }
 .ifns{
 width:85%;
 display: inline-block;
 outline: 1px dashed rgba(84, 92, 100, 0.1);
 }
 .experience{
 text-align: left;
 }
 .content{
 text-align: center;
 display: inline;
 position: relative;
 margin: 20px;
 }
 .content p{
 width: 95%;
 color: #fff;
 font-size: 14px;
 text-align: center;
 }
 .hover{
 position: absolute;
 bottom: 5px;
 left: 7.5%;
 background-color: rgba(84, 92, 100, 0.3);
 height: 60px;
 width: 85%;
 line-height: 60px;
 cursor: pointer;
 }
 .hover:hover{
 background-color: rgba(84, 92, 100, 0.6);
 }
 h2{
 border:1px solid #ccc;
 height: 0px;
 }
 .title p{
 color: #8c8888;
 font-size: 15px;
 margin-top: 30px;
 margin-bottom: 20px;
 }
 .title p .el-tag{
 margin: 0px 5px;
 cursor: pointer;
 }
 .info{
 font-size: 14px;
 color: #72767b;
 line-height: 25px;
 }

2.說(shuō)明

工作經(jīng)歷組件主要包含兩個(gè)部分：時(shí)間軸、項(xiàng)目介紹、點(diǎn)擊項(xiàng)目打開(kāi)詳情

時(shí)間軸

時(shí)間軸使用的是element的 Timeline 時(shí)間線 組件。

項(xiàng)目介紹

項(xiàng)目介紹這塊先說(shuō)一下三個(gè)項(xiàng)目的布局。

這三個(gè)div包裹在div#project中，div#project采用了flex布局，就可以輕松的實(shí)現(xiàn)三個(gè)div并排顯示，并且根據(jù)屏幕大小自適應(yīng)顯示。

點(diǎn)擊項(xiàng)目打開(kāi)詳情

點(diǎn)擊項(xiàng)目顯示的這個(gè)詳情使用了element的 Drawer 抽屜 組件，在這里有一些邏輯代碼，就是div#content的drawerHander函數(shù)。在點(diǎn)擊項(xiàng)目時(shí)，傳遞了對(duì)應(yīng)項(xiàng)目的編號(hào)index，然后設(shè)置兩個(gè)數(shù)據(jù)：

drawer=true
currentIndex = index-1

drawer數(shù)據(jù)是控制 Drawer 抽屜 組件是否顯示的一個(gè)變量，設(shè)置為true表示抽屜打開(kāi)。

currentIndex用于記錄當(dāng)前用戶點(diǎn)擊打開(kāi)的是那個(gè)項(xiàng)目，假如傳遞的index是1，表示當(dāng)前用戶點(diǎn)擊打開(kāi)的是項(xiàng)目1，那么currentIndex的值就為0（使用index-1的原因就是因?yàn)閿?shù)組下標(biāo)是從0開(kāi)始的，后面需要從projectInfo數(shù)組中獲取數(shù)據(jù)）。

此時(shí)我們就可以通過(guò)這個(gè)currentIndex，從保存項(xiàng)目數(shù)據(jù)的projectInfo中獲取下標(biāo)為0的元素的項(xiàng)目的標(biāo)題（title）、項(xiàng)目介紹（intro）、開(kāi)發(fā)該項(xiàng)目時(shí)所屬的公司（company）、項(xiàng)目開(kāi)發(fā)環(huán)境（developEnv）和職責(zé)（responsibility），并且將這幾個(gè)數(shù)據(jù)展示到 Drawer 抽屜 組件中。

  
   
   
    
    項(xiàng)目介紹：{{projectInfo[currentIndex]['intro']}}