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），将不同的技能模块移动到不同的位置。
六.工作经历
工作经历组件代码：srccomponentsSecurityResearchSecurityResearch.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>
