Vue+Element 웹 페이지 개인 이력서 시스템 구현(추천)

이 글 은 Vue+Element 를 사용 하여 실 현 된 개인 이력서 시스템 을 소개 합 니 다.주로 vue,element,css 3,css 포 지 셔 닝 을 사용 합 니 다.
저 자 는 윈도 우즈 10 에서 개발 을 진행 하 였 으 며,현재 크롬 에서 만 테스트 를 진행 하 였 으 며,큰 결함 은 없다.그러나 아직도 많은 작은 기능 이 완선 되 지 않 고 코드 도 최적화 되 지 않 아서 나중에 기능 을 계속 보완 하고 코드 를 최적화 할 것 이다.
성명:프로젝트 는 상대 적 으로 순수한 정적 페이지 로 코드 가 비교적 간단 합 니 다.큰 사람 은 눈 을 감 고 돌아 다 니 거나 한 번 보고 귀중 한 의견 을 남 겨 도 됩 니 다.

프로젝트 소개
이 프로젝트 는 웹 페이지 의 개인 이력서 시스템 으로 주로 사용 하 는 기술 은 vue 2+element 입 니 다.
개인 이력서 시스템 은 주로 6 개의 단일 파일 구성 요 소 를 포함 합 니 다.상단 메뉴,첫 페이지,개인 소개,개인 기능,업무 경력 과 아래쪽 페이지 입 니 다.
먼저 움 직 이 는 그림 을 느껴 보 세 요.

프로젝트 디 렉 터 리:

다음은 각 구성 요 소 를 상세 하 게 소개 하 겠 습 니 다.
상단 메뉴

상단 메뉴 구성 요 소 는 src\components\menu\TopMenu.vue 입 니 다.
1.소스 코드


<template>
 <!-- components/TopMenu.vue -->
 <div class="menupage">
 <el-menu
 :default-active="activeIndex2"
 class="el-menu-demo"
 mode="horizontal"
 @select="handleSelect"
 background-color="#545c64"
 text-color="#fff"
 active-text-color="#ffd04b">
  <p class="logo-title"><i class="el-icon-user"></i>JEmbrace</p>
  <el-menu-item index="1" style="margin-left:250px;">  </el-menu-item>
  <el-menu-item index="2">    </el-menu-item>
  <el-menu-item index="3">    </el-menu-item>
  <el-menu-item index="4">    </el-menu-item>
 </el-menu>
 </div>
</template>
<style>
.menupage{
 position: fixed;
 width: 100%;
 top: 0px;
 z-index: 100;
}
.menupage .el-menu.el-menu--horizontal{
 border-bottom: none;
 height: 100px;
 line-height: 100px;
}
.menupage .el-menu.el-menu--horizontal>.el-menu-item,.menupage .el-menu--horizontal>.el-submenu .el-submenu__title{
 height: 100px;
 line-height: 100px;
 padding: 0px 50px;
 font-size: 16px;
 letter-spacing: 4px;
}
.menupage .el-menu--horizontal>.el-menu-item.is-active,.menupage .el-menu--horizontal>.el-submenu.is-active .el-submenu__title{
 border-bottom-width: 4px;
}
.menupage .logo-title .el-icon-user{
 margin-right: 5px;
}
</style>
<style scoped>
 .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;
 }
</style>
<script>
export default {
 name: 'topMenu',
 data () {
 return {
  activeIndex2: '1'
 }
 },
 methods: {
 handleSelect (key, keyPath) {
  var name = ''
  if (key === '1') name = 'homepage'
  if (key === '4') name = 'productpage'
  if (key === '3') name = 'securityresearch'
  if (key === '2') name = 'aboutus'
  var targetEle = document.querySelector('.' + name)
  var offsetTop = targetEle.offsetTop
  document.documentElement.scrollTop = offsetTop - 150
 }
 }
}
</script>

2.메뉴 설명
메뉴 의 실현 은 element 의NavMenu 탐색 메뉴 구성 요소를 사 용 했 습 니 다.
메뉴 는 전체적으로 fixed 포 지 셔 닝 을 사용 하여 브 라 우 저 상단 에 고정 시 킵 니 다.또한 z-index 설정 메뉴 를 맨 위 에 쌓 습 니 다.
아이콘

아이콘 은 element 의icon구성 요 소 를 사용 합 니 다.
메뉴 이동
메뉴 표시 줄 의 네 가지 옵션 을 누 르 면 페이지 가 자동 으로 해당 하 는 보기 로 굴 러 갑 니 다.대응 하 는 실현 함 수 는 handle Select 함수 입 니 다.이 함 수 는NavMenu 탐색 메뉴에서 제공 하 는 select 이벤트 의 반전 함수 에 작용 합 니 다.

여기 서 주목 해 야 할 매개 변 수 는 index 입 니 다.이것 은요소 가 설정 한 index 속성 값 입 니 다.

handle Select 함 수 는 index 매개 변수 에 따라 현재 그 메뉴 가 활성화 되 었 음 을 알 수 있 습 니 다.그리고 메뉴 의 name 값 에 따라 스크롤 바 를 해당 하 는 보기 로 이동 시 킵 니 다.


//        ，          
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
}

첫 페이지

첫 페이지 구성 요 소 는 src\components\홈\홈 페이지 vue 입 니 다.
1.소스 코드


<template>
 <div class='homepage'>
  <div class="content">
   <div class='box' id='box1'></div>
   <div class='box' id='box2'> </div>
   <p>{{sign}}</p>
   <div class='box' id='box3'></div>
   <div class='box' id='box4'></div>
  </div>
 </div>
</template>
<style scoped>
 .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;
 }
</style>
<script>
export default {
 name: 'HomePage',
 data () {
 return {
  sign: '  web     '
 }
 }
}
</script>

2.설명
첫 페이지 는 주로 애니메이션 과 중간 텍스트 레이아웃 입 니 다.
애니메이션
배경 그림 의 애니메이션 특성 에 대해 서 는 css 3 의 animation 을 사용 합 니 다.애니메이션 이름 은 bg 입 니 다.전체 애니메이션 과정 에서 background-size 의 크기 를 바 꾸 고 background-position 의 위 치 를 바 꾸 면 됩 니 다.
중간 텍스트 와 레이아웃
중간 문자 와 문자 주위 의 부분 은 p 태그 와 네 개의 div 에 의 해 이 루어 집 니 다.

정상 적 인 문서 흐름 에 따라 이 p 요소 와 네 개의 div 의 구 조 는 다음 과 같 습 니 다.

네 개의 div 요 소 를 줄 내 블록 급 요소 로 설정 합 니 다:display:inline-block;(이 때 p 요 소 는 여전히 블록 급 요소 입 니 다)

이 럴 때 포석 은 기본적으로 아래 모양 이에 요.

그리고 상대 적 인 포 지 셔 닝 을 사용 하여 네 개의 테두리 의 top/bottom/left/right 위 치 를 조정 합 니 다.

마지막 으로 대응 하 는 border 테 두 리 를 수정 하 는 것 입 니 다.예 를 들 어 왼쪽 상단 의 div\#box 1 은 border-top 과 border-left 만 설정 합 니 다.왼쪽 아래 div\#box 3 는 border-left 와 border-bottom 만 설정 합 니 다.
완 료 된 스타일 수정:

프로필

프로필 구성 요소 코드:src\\components\\Aboutus\\Aboutus.vue
1.소스 코드


<template>
 <div class="aboutus">
 <div class="title">
  <el-divider content-position="center">    </el-divider>
  <p><el-tag>xxxx  </el-tag><el-tag>  </el-tag></p>
 </div>
 <el-card class="box-card" style="margin-bottom: 20px;">
  <div class="text item">
  <el-row :gutter="110">
   <el-col :span="8">
   <div class="grid-content bg-purple">
     2005.07    <span class="large">      </span>，    。     xxxxxxx，     xxxx、xxxx、xx xxxx   。         java php  ,                  (        、          )、       。
   </div>
   </el-col>
   <el-col :span="8">
   <div class="grid-content bg-purple">
             web    ,      css、javascript、jquery python。        xxxxxxx、xxxx。           web    ，      vue   。
   </div>
   </el-col>
   <el-col :span="8">
   <div class="grid-content bg-purple">
           ，        ，  <span class="large">    </span>     。                 ，       。
   </div>
   </el-col>
  </el-row>
  </div>
  <div class='topMask square'></div><div class='topMask circular'></div>
 </el-card>
 </div>
</template>
<script>
export default {
 name: 'AboutUs'
}
</script>
<style>
 .aboutus .grid-content.line{
 border-right: 1px solid #ddd;
 height: 150px;
 }
 .aboutus .el-card__header{
 background: #545c64;
 }
 .aboutus .el-card__body{
 padding: 50px 20px;
 }
 .aboutus .el-timeline-item__wrapper{
 top: -8px;
 }
 .aboutus .title p .el-tag{
 margin: 0px 5px;
 cursor: pointer;
 }
</style>
<style scoped>
 .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);
 }
</style>

2.설명
개인 소개 이 구성 요소 에는 주로 세 가지 내용 이 포함 되 어 있 습 니 다.분할 선 제목,분할 선 제목 아래 의 파란색 태그,내용 부분 과 문자 위 에 있 는 반투명 원형/사각형 그림자 입 니 다.
분할 선 제목
분할 선 은 element 의 Divider 분할 선 구성 요 소 를 사용 하고 분할 선 에 하위 사용자 정의 텍스트 내용 을 추가 합 니 다.
분할 선의 스타일 은 공공 스타일 입 니 다.src\components\Product\Product.vue 구성 요소 에서 브 라 우 저-오른쪽 단 추 를 누 르 면 요소 스타일 을 볼 수 있 습 니 다.이 Product 구성 요소 에서 유래 한 스타일 을 볼 수 있 습 니 다.
파란색 라벨
파란색 탭 은 element 의 태그 탭 구성 요 소 를 사용 합 니 다.
내용.
내용 부분 은 element 의 layout 24 바 구 조 를 사 용 했 습 니 다.모두 3 열 로 나 뉘 었 습 니 다.각 칸 이 차지 하 는 열 수 는 8 열 입 니 다.el-col 의 span 속성 은 8 로 설정 되 어 있 습 니 다.(같은 줄 의 span 설정 배열 을 더 하면 24 를 초과 할 수 없습니다.그렇지 않 으 면 줄 이 바 뀔 것 입 니 다)

동시에 3 열 중간 간격 은 el-row 의 gutter 속성 을 설정 하여 이 루어 집 니 다.

텍스트 위쪽 반투명 원형/사각형 그림자
텍스트 위 에 두 개의 그림자 가 있 습 니 다.파란색 사각형 반투명 그림자 와 주황색 원형 반투명 그림자 입 니 다.
이 두 개 도 비교적 간단 합 니 다.코드 는 바 레이아웃 아래 에 있 고 두 개의 div 를 설정 하 였 습 니 다.

이 두 div 를 모두 100*100 의 크기 로 설정 하고 원형 모양 의 실현 은 원 각 속성 border-radius 를 50%로 설정 합 니 다.마름모꼴 모양 은 div 를 2d 회전 45 도 를 통 해 이 루어 집 니 다.
두 그림자 의 색상 과 투명 도 는 스스로 수정 할 수 있 습 니 다.두 그림자 의 위 치 는 두 요소 의 포 지 셔 닝 을 통 해 absolute 로 설정 하고 해당 하 는 오프셋(top,bottom,left,right)을 설정 하면 됩 니 다.
개인 기

개인 기능 구성 요소 코드:src\\components\\SecurityResearch\\SecurityResearch.vue
1.소스 코드


<template>
 <div class="securityresearch">
  <div class="title">
  <el-divider content-position="center">    </el-divider>
  <p><el-tag>vue   </el-tag><el-tag >javascript</el-tag><el-tag>css</el-tag></p>
  </div>
  <div class="skill">
  <span class='vue'>Vue</span>
  <span class='js'>JS</span>
  <span class='css'>CSS</span>
  <span class='echarts'>Echarts</span>
  <span class='webpack'>webpack</span>
  <span class='python'>python</span>
  <span class='linux'>linux</span>
  </div>
 </div>
</template>
<style>
 .securityresearch .title p .el-tag{
 margin: 0px 5px;
 cursor: pointer;
 }
 .securityresearch .box-card .text{
 text-align: left;
 }
</style>
<style scoped>
 .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;
 }
</style>
<script>
export default {
 name: 'SecurityResearch'
}
</script>

2.설명
개인 기능 구성 요 소 는 주로 기능 모듈 의 레이아웃 입 니 다.
스 킬 모듈 레이아웃
모든 스 킬 모듈 은 span 요 소 를 사용 하여 구현 합 니 다.

기본적으로 이 7 개의 스 킬 모듈 은 한 줄 에 나란히 표시 되 며 스타일 이 없습니다.

그리고 이 7 개 모듈 에 공 통 된 스타일 을 설정 합 니 다.글꼴 색상 은 흰색,원 각 50%입 니 다.이 7 개의 스 킬 모듈 에 원 하 는 요소 크기(width/height),글꼴 크기,배경 색 을 설정 합 니 다.

그리고 우 리 는 두 개의 포 지 셔 닝 을 설정 해 야 한다.
스 킬 모듈 의 부모 요소 div\#skill 은 relative 상대 위치 로 설정 합 니 다.
vue 스 킬 모듈 이외 의 기타 6 개 스 킬 모듈 을 absolute 절대 포 지 셔 닝

마지막 단 계 는 자신의 취향 에 따라 다른 6 개 스 킬 모듈 의 오프셋(top,bottom,left,right)을 설정 하고 서로 다른 스 킬 모듈 을 서로 다른 위치 로 이동 하 는 것 이다.
경력

작업 경력 구성 요소 코드:src\\components\\SecurityResearch\\SecurityResearch.vue
1.소스 코드


<template>
 <div class="productpage">
 <div class="title">
  <el-divider content-position="center">    </el-divider>
  <p><el-tag >  </el-tag><el-tag>   </el-tag></p>
 </div>
 <div class='experience'>
  <el-timeline>
  <el-timeline-item timestamp="2010/07/-2014/10" placement="top">
   <el-card>
   <h4>  </h4>
   <p>
            、                   <br>
      bug  <br>
              <br>
   </p>
   </el-card>
  </el-timeline-item>
  <el-timeline-item timestamp="2014/10-  " placement="top">
   <el-card>
   <h4>xxx</h4>
   <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
   </el-card>
  </el-timeline-item>
  </el-timeline>
 </div>
 <div class="project">
  <div class="content" @click="drawerHander(1)" >
   <img src='../../assets/p1.jpg' class='ifns'>
   <div class='hover'>
   <p>  1</p>
   </div>
  </div>
  <div class="content" @click="drawerHander(2)">
  <img src='../../assets/p1.jpg' class='ifns'>
  <div class='hover'>
  <p>  2</p>
  </div>
  </div>
  <div class="content" @click="drawerHander(3)">
  <img src='../../assets/p1.jpg' class='ifns'>
  <div class='hover'>
   <p>  3</p>
  </div>
  </div>
 </div>
 <el-drawer
  :title="projectInfo[currentIndex]['title']"
  :visible.sync="drawer"
  :direction="direction"
  :before-close="handleClose">
  <p class='info'>
   <el-row>
   <el-col :span="24">
    <div class="grid-content bg-purple-dark">
        ：{{projectInfo[currentIndex]['intro']}}
    </div>
   </el-col>
   </el-row>
   <el-row>
   <el-col :span="24">
    <div class="grid-content bg-purple-dark">
        ：{{projectInfo[currentIndex]['company']}}
    </div>
   </el-col>
   </el-row>
   <el-row>
   <el-col :span="24">
    <div class="grid-content bg-purple-dark">
        ：{{projectInfo[currentIndex]['developEnv']}}
    </div>
   </el-col>
   </el-row>
   <el-row>
   <el-col :span="24">
    <div class="grid-content bg-purple-dark">
        :
    </div>
    <div class="grid-content bg-purple-dark" v-for="(item,key) in projectInfo[currentIndex]['responsibility']" :key="key">
    {{projectInfo[currentIndex]['responsibility'][key]}}
    </div>
   </el-col>
   </el-row>
  </p>
 </el-drawer>
 </div>
</template>

<script>
export default {
 name: 'Products',
 data () {
 return {
  drawer: false,
  direction: 'btt',
  currentIndex: 0,
  projectInfo: [
  {
   title: '  1',
   intro: '       ',
   company: '  ',
   developEnv: '         ',
   responsibility: {
   res1: '  1',
   res2: '  2',
   res3: '  3'
   }
  }, {
   title: '  2',
   intro: '     2  ',
   company: '  ',
   developEnv: '         ',
   responsibility: {
   res1: '  1',
   res2: '  2',
   res3: '  3'
   }
  }, {
   title: '  3',
   intro: '     3  ',
   company: '  ',
   developEnv: '         ',
   responsibility: {
   res1: '  1',
   res2: '  2',
   res3: '  3'
   }
  }
  ]
 }
 },
 methods: {
 handleClose (done) {
  done()
 },
 drawerHander (index) {
  this.drawer = true
  this.currentIndex = index - 1
 }
 }
}
</script>
<style>
 div .el-divider--horizontal{
 height: 2px;
 margin-top:100px;
 background-color: rgb(84, 92, 100);
 }
 div .el-divider__text{
 font-size: 26px;
 color: #545c64;
 }
 div .el-drawer__header{
 font-size: 20px;
 font-weight: blod;
 padding-bottom: 20px;
 border-bottom: 1px solid;
 }
 div .el-drawer{
 background-color: rgb(61, 67, 72);
 color: #ccc;
 }
 div .el-drawer__body{
 padding: 0px 20px 0px 20px;
 }
</style>
<style scoped>
 .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);
 }
 h1{
 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;
 }
</style>

2.설명
작업 경력 구성 요 소 는 주로 두 가지 부분 을 포함 합 니 다.시간 축,프로젝트 소개,항목 을 클릭 하여 자세 한 정 보 를 엽 니 다.
시간 축
시간 축 은 element타임 라인 타임 라인 구성 요소를 사용 합 니 다.
프로젝트 소개
프로젝트 소개.

이 세 개의 div 패 키 지 는 div\#procject 에 있 습 니 다.div\#procject 는 flex 레이아웃 을 사용 하면 세 개의 div 를 나란히 표시 하고 화면 크기 에 따라 디 스 플레이 에 적응 할 수 있 습 니 다.
항목 을 클릭 하여 자세 한 내용 을 엽 니 다.
항목 에 표 시 된 이 상세 한 정 보 를 누 르 면 element서랍 장 구성 요소를 사 용 했 습 니 다.여기 에는 div\#content 의 drawer Hander 함수 가 있 습 니 다.항목 을 클릭 할 때 해당 항목 의 번호 index 를 전달 하고 두 개의 데 이 터 를 설정 합 니 다.


drawer=true
currentIndex = index-1

drawer 데 이 터 는서랍 장구성 요소 가 표시 되 는 지 여 부 를 제어 하 는 변수 입 니 다.true 로 설정 하면 서랍 이 열 립 니 다.
currentIndex 는 현재 사용자 가 클릭 하여 열 린 항목 을 기록 하 는 데 사 용 됩 니 다.만약 에 전달 하 는 index 가 1 이 라면 현재 사용자 가 클릭 하여 열 린 항목 이 1 이 라 고 표시 하면 currentIndex 의 값 은 0 입 니 다.(index-1 을 사용 하 는 이 유 는 배열 아래 표 시 는 0 에서 시작 되 고 그 다음 에 procject Info 배열 에서 데 이 터 를 가 져 와 야 하기 때 문 입 니 다)
이 때 우 리 는 이 currentIndex 를 통 해 프로젝트 데 이 터 를 저장 하 는 procject Info 에서 아래 0 으로 표 시 된 요소 의 프로젝트 제목(title),프로젝트 소개(intro),이 프로젝트 를 개발 할 때 소속 회사(copany),프로젝트 개발 환경(developeEnv)과 직책(responsibility)을 얻 고 이 데 이 터 를 Drawer 서랍 구성 요소 에 보 여 줍 니 다.


<el-drawer
  :title="projectInfo[currentIndex]['title']"
  :visible.sync="drawer"
  :direction="direction"
  :before-close="handleClose">
  <p class='info'>
   <el-row>
   <el-col :span="24">
    <div class="grid-content bg-purple-dark">
        ：{{projectInfo[currentIndex]['intro']}}
    </div>
   </el-col>
   </el-row>
   <el-row>
   <el-col :span="24">
    <div class="grid-content bg-purple-dark">
        ：{{projectInfo[currentIndex]['company']}}
    </div>
   </el-col>
   </el-row>
   <el-row>
   <el-col :span="24">
    <div class="grid-content bg-purple-dark">
        ：{{projectInfo[currentIndex]['developEnv']}}
    </div>
   </el-col>
   </el-row>
   <el-row>
   <el-col :span="24">
    <div class="grid-content bg-purple-dark">
        :
    </div>
    <div class="grid-content bg-purple-dark" v-for="(item,key) in projectInfo[currentIndex]['responsibility']" :key="key">
    {{projectInfo[currentIndex]['responsibility'][key]}}
    </div>
   </el-col>
   </el-row>
  </p>
 </el-drawer>

밑 쪽 꼬 릿 말

아래쪽 꼬 릿 말 구성 요소:src\\components\Footer\\Footer.vue
1.소스 코드


<template>
 <div class='footer'>
  <span class="scroll"></span>
  <el-divider></el-divider>
  <span>    </span>
  <el-divider direction="vertical"></el-divider>
  <span>    </span>
  <el-divider direction="vertical"></el-divider>
  <span @click="drawer = true">   </span>
  <br/>
  <br/>
  <span class="copyright">     JEmbrace</span>
  <el-drawer
  title="   "
  :visible.sync="drawer"
  :direction="direction"
  :before-close="handleClose">
  <p class='info'>
   <i class="el-icon-phone"></i>  ：18822299999<br/>
   <i class="el-icon-message"></i>  ：[email protected]<br/>
   <i class="el-icon-message"></i>  ：https://www.cnblogs.com/HouJiao/<br/>
   <i class="el-icon-message"></i>github：https://github.com/JEmbrace<br/>
  </p>
  </el-drawer>
 </div>
</template>
<style>
 .el-divider{
 background-color: rgb(84, 92, 100);
 }
</style>
<style scoped>
 .footer{
  height: 250px;
  text-align: center;
  font-size: 16px;
  padding: 0px 100px;
  position: relative;
 }
 .footer{
  cursor: pointer;
 }
 .copyright{
  font-size: 12px;
 }
 .info{
  font-size: 14px;
  color: #72767b;
  line-height: 25px;
 }
 .footer .scroll{
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  border:1px solid #448aff;
  background-color: rgba(68,138,255,0.2);
  position: absolute;
  left: 5%;
  top: -25px;
  z-index: 10;
  animation: scrollA infinite 20s linear alternate;
 }
 @keyframes scrollA {
  0% {left: 5%;transform: rotate(180deg);};
  10% {left: 5%;transform: rotate(270deg);}
  20% {left: 5%;transform: rotate(450deg);}
  25% {left: 10%;transform: rotate(540deg);}
  30% {left: 20%;transform: rotate(720deg);}
  35% {left: 30%;transform: rotate(900deg);}
  40% {left: 40%;transform: rotate(1080deg);}
  45% {left: 50%;transform: rotate(1260deg);}
  50% {left: 60%;transform: rotate(1440deg);}
  55% {left: 70%;transform: rotate(1620deg);}
  60% {left: 80%;transform: rotate(1800deg);}
  80% {left: 90%;transform: rotate(2610deg);}
  90% {left: 90%;transform: rotate(2340deg);}
  100% {left: 90%;transform: rotate(2520deg);}
 }
</style>
<script>
export default {
 name: 'Footer',
 data () {
 return {
  drawer: false,
  direction: 'btt'
 }
 },
 methods: {
 handleClose (done) {
  done()
 }
 }
}
</script>

2.설명
아래쪽 꼬 릿 말 구성 요 소 는 비교적 간단 합 니 다.세 개의 문자+두 개의 분할 선 도 element분할 선 구성 요소의 수직 분할 선 을 사 용 했 습 니 다.
연락 을 누 르 면 서랍 을 열 수 있 습 니 다.이것 은 근무 경력 의 서랍 과 마찬가지 로 중복 설명 이 없습니다.
총화
여기까지 이 간단 한 이력서 항목 을 완 성 했 습 니 다.사실은 세부 적 인 작은 기능 이 완선 되 지 않 았 고 후기 에 계속 완 선 될 것 입 니 다.
위 에서 말 한 것 은 소 편 이 소개 해 드 린 Vue+Element 가 웹 페이지 의 개인 이력서 시스템 을 실현 하 는 것 입 니 다.여러분 에 게 bang 이 있 기 를 바 랍 니 다!

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

Vue Render 함수로 DOM 노드 코드 인스턴스 만들기

render에서createElement 함수를 사용하여 DOM 노드를 만드는 것은 직관적이지 않지만 일부 독립 구성 요소의 디자인에서 특수한 수요를 충족시킬 수 있습니다.간단한 렌더링 예는 다음과 같습니다. 또한 v...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

SpringIOC 프레임 워 크 의 간단 한 실현 절차

CSS 로 iframe 효과 코드 구축

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다