幽灵资源网 Design By www.bzswh.com
这篇文章介绍一个使用Vue+Element实现的个人简历系统，主要用到的技术有：vue、element、css3、css定位。
作者在window10进行开发，目前只在chrome上进行过测试，没有大的毛病。但是还有很多小功能还不完善，代码也未进行优化，后续会继续完善功能，优化代码。
声明：项目相对来说就是一个纯静态页面，代码都比较简单，大佬可闭眼绕过，或者看一眼留下宝贵意见也可
一.项目介绍
本项目是一个网页版的个人简历系统，主要使用的技术为vue2+element进行实现。
个人简历系统 主要 包含六个单文件组件：顶部菜单、首页、个人简介、个人技能、工作经历和底部页脚。
先来一个动图感受一下：
项目目录：
下面就来详细介绍一下每个组件。
二.顶部菜单
顶部菜单组件为: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 组件
菜单跳转
我们点击菜单栏的四个选项，页面会自动滚动到对应的视图。对应的实现的函数是handleSelect函数，该函数作用于 NavMenu 导航菜单 提供的select事件的回调函数。
在这里，需要关注的参数为index，它是 <el-menu-item>元素设置的index属性值。
handleSelect函数根据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\home\HomePage.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.说明
首页主要是一个动画和中间的文字布局。
动画
关于背景图片的动画特性使用的就是css3的animation，动画名为bg，在整个动画过程中改变background-size的大小，改变background-position的位置即可。
中间文字和布局
中间的文字和文字周围的局部依靠的是p标签和四个div去实现的。
按照正常的文档流，这一个p元素和四个div的布局如下：
设置四个div元素为行内块级元素：display:inline-block;（此时p元素依然是块级元素）
这个时候布局基本是下面的样子
然后在使用相对定位将四个边框的top/bottom/left/right位置进行调整
最后就是将对应的border边框进行修改，比如：左上角的div#box1只设置border--top和border-left；左下角的div#box3只设置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的 Tag 标签 组件。
内容
内容部分使用了element的 layout24分栏布局 ，总共分为三列，每一栏占据的列数为8列：el-col的span属性设置为8（同一行的span设置数组相加不能超过24，否则会换行）
同时三列中间的间隔通过设置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元素实现
默认的情况下，这七个技能模块并排在一行显示，且没有任何样式
然后给这七个模块设置共同的样式：字体颜色白色、圆角50%；在给这七个技能模块设置你想要的元素大小（width/height）、字体大小、背景颜色。
然后我们需要设置两个定位：
技能模块的父元素div#skill设置为relative相对定位
将vue技能模块之外的其他六个技能模块进行absolute绝对定位
最后一步就是根据自己的喜好设置其他六个技能模块的偏移量（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的 Timeline 时间线 组件。
项目介绍
项目介绍这块先说一下三个项目的布局。
这三个div包裹在div#project中，div#project采用了flex布局，就可以轻松的实现三个div并排显示，并且根据屏幕大小自适应显示。
点击项目打开详情
点击项目显示的这个详情使用了element的 Drawer 抽屉 组件，在这里有一些逻辑代码，就是div#content的drawerHander函数。在点击项目时，传递了对应项目的编号index，然后设置两个数据：
drawer=true currentIndex = index-1
drawer数据是控制 Drawer 抽屉 组件是否显示的一个变量，设置为true表示抽屉打开。
currentIndex用于记录当前用户点击打开的是那个项目，假如传递的index是1，表示当前用户点击打开的是项目1，那么currentIndex的值就为0（使用index-1的原因就是因为数组下标是从0开始的，后面需要从projectInfo数组中获取数据）。
此时我们就可以通过这个currentIndex，从保存项目数据的projectInfo中获取下标为0的元素的项目的标题（title）、项目介绍（intro）、开发该项目时所属的公司（company）、项目开发环境（developEnv）和职责（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>邮箱：18822299999@163.com<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 !
幽灵资源网 Design By www.bzswh.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
幽灵资源网 Design By www.bzswh.com
暂无评论...
一口气升级7个大模型SaaS应用，百度智能云：突出一个“开箱即用” - 2024/12/24
这一波大模型产业落地浪潮里，不少企业其实处在 “干瞪眼“的状态。
一种情况是，很多大模型产品看得见却摸不着，在台上一个个遥遥领先——今天Sora技精四座，明天英伟达的机器人又赢得满堂彩，可是到了台下一问：啥时候能用上啊？答曰：遥遥无期。
另一种情况是，企业想用上大模型，却又难免瞻前顾后——既要考虑场景融合，又得兼顾安全性，还要考虑打通现有系统，再加上各种部署成本和繁琐的采购流程……最后只能拂袖：罢了，再等等吧。
这一波大模型产业落地浪潮里，不少企业其实处在 “干瞪眼“的状态。
一种情况是，很多大模型产品看得见却摸不着，在台上一个个遥遥领先——今天Sora技精四座，明天英伟达的机器人又赢得满堂彩，可是到了台下一问：啥时候能用上啊？答曰：遥遥无期。
另一种情况是，企业想用上大模型，却又难免瞻前顾后——既要考虑场景融合，又得兼顾安全性，还要考虑打通现有系统，再加上各种部署成本和繁琐的采购流程……最后只能拂袖：罢了，再等等吧。
稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！
昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？