{{sign}}
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.源代码
个人简介
xxxx大学 本科 于2005.07月毕业于某喵喵喵大学,本科学历。在校专业为xxxxxxx,主修课程为xxxx、xxxx、xx和xxxx等课程。在校期间主要技能为java和php语言,和实验室小伙伴一起完成过内部管理平台(成员在线时长记录、周计划制定和组长评价)、纳新面试系统等。 毕业后在某某公司做web开发工作,主要的技能为css、javascript、jquery和python。主要参与的产品有xxxxxxx、xxxx。现就职于一家创业公司做web前端岗位,主要的技能为vue全家桶。 工作中比较自律,对待工作认真负责,喜欢不断学习来提升自己。希望能找到一群志同道合的人一起工作,不断进步和成长。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.源代码
个人技能
vue全家桶 javascript css Vue JS CSS Echarts webpack python linux2.说明
个人技能组件主要就是技能模块的布局(分割线和蓝色标签在个人简介组件介绍时已经说过,这里不再重复)
技能模块布局
所有的技能模块均使用span元素实现
默认的情况下,这七个技能模块并排在一行显示,且没有任何样式
然后给这七个模块设置共同的样式:字体颜色白色、圆角50%;在给这七个技能模块设置你想要的元素大小(width/height)、字体大小、背景颜色。
然后我们需要设置两个定位:
技能模块的父元素div#skill设置为relative相对定位
将vue技能模块之外的其他六个技能模块进行absolute绝对定位
最后一步就是根据自己的喜好设置其他六个技能模块的偏移量(top、bottom、left、right),将不同的技能模块移动到不同的位置。
六.工作经历
工作经历组件代码:src\components\SecurityResearch\SecurityResearch.vue
1.源代码
工作经历
某司 某某司 某司
主要负责某某产品、某某某产品的前端开发和部分后端功能开发
产品bug修复
产品前场问题反馈处理
xxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
项目1
项目2
项目3
项目介绍:{{projectInfo[currentIndex]['intro']}} 所在公司:{{projectInfo[currentIndex]['company']}} 开发环境:{{projectInfo[currentIndex]['developEnv']}} 职责描述:{{projectInfo[currentIndex]['responsibility'][key]}}2.说明
工作经历组件主要包含两个部分:时间轴、项目介绍、点击项目打开详情
时间轴
时间轴使用的是element的 Timeline 时间线 组件。
项目介绍
项目介绍这块先说一下三个项目的布局。
这三个div包裹在div#project中,div#project采用了flex布局,就可以轻松的实现三个div并排显示,并且根据屏幕大小自适应显示。
点击项目打开详情
点击项目显示的这个详情使用了element的 Drawer 抽屉 组件,在这里有一些逻辑代码,就是div#content的drawerHander函数。在点击项目时,传递了对应项目的编号index,然后设置两个数据:
drawer=truecurrentIndex = index-1drawer数据是控制 Drawer 抽屉 组件是否显示的一个变量,设置为true表示抽屉打开。
currentIndex用于记录当前用户点击打开的是那个项目,假如传递的index是1,表示当前用户点击打开的是项目1,那么currentIndex的值就为0(使用index-1的原因就是因为数组下标是从0开始的,后面需要从projectInfo数组中获取数据)。
此时我们就可以通过这个currentIndex,从保存项目数据的projectInfo中获取下标为0的元素的项目的标题(title)、项目介绍(intro)、开发该项目时所属的公司(company)、项目开发环境(developEnv)和职责(responsibility),并且将这几个数据展示到 Drawer 抽屉 组件中。
项目介绍:{{projectInfo[currentIndex]['intro']}} 所在公司:{{projectInfo[currentIndex]['company']}} 开发环境:{{projectInfo[currentIndex]['developEnv']}} 职责描述:{{projectInfo[currentIndex]['responsibility'][key]}}七.底部页脚
底部页脚组件:src\components\Footer\Footer.vue
1.源代码
Top
- 近期文章
- Laravel 9.13版本发布(0个评论)
- beego+GeoLite2免费数据库获取ip地址经纬度等定位归属信息(0个评论)
- redis安全配置之修改端口、添加密码流程步骤及启动使用(0个评论)
- PHP + Memcache实现简单的统计当前在线人数功能(0个评论)
- Thinkphp5.1框架中实现Session+Redis会话共享流程步骤(0个评论)
- go语言中使用Signbit()函数判断一个整数是正数或负数(0个评论)
- 删库跑路之一链家程序员删除公司9TB数据被判7年,望各大码农警之!(0个评论)
- Laravel角色和权限:拦截器Gates和策略Policies的解释(0个评论)
- Laravel 9.12版本发布(0个评论)
- go语言中实现把数据写入文件函数WriteFile()编写(0个评论)
- 近期评论
博主 在
hyperf框架常用命令-在centos7中退出命令及在docker容器中退出命令中评论 @路过的靓仔:cdn静态资源被墙,已修复..GGGGGGGGG 在
layui框架常用输入框介绍中评论 写的很好解决问题..路过的靓仔 在
hyperf框架常用命令-在centos7中退出命令及在docker容器中退出命令中评论 剩下好多 wait 状态的..激光豆芽 在
为什么你不能安逸?国内996为什么没有国外955香?中评论 国内现在无意义的内卷太多了..激光豆芽 在
阿里云香港服务器搭建自用vpn:Shadowsocks使用流程步骤中评论 厉害了..Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号
![]()