2023年啦，祝大家新年快乐！我已经从深圳回来长沙了，长沙的天气依旧很冷，大家也要注意保暖呀！突然发现自己写的文章有好多人看，好开心，谢谢大家的支持！
今天要跟大家分享的是首页中职位推荐区域，我个人觉得这个职位卡片区域的制作有几个亮点，第一个就是结合了Layui，使用了Layui里面的选项卡，实现导航菜单。第二个就是鼠标悬停到卡片区域的时候，卡片周围会出来阴影边框，我觉得我的边框颜色调的好看！设计使用的是一些简单的div、span、a、p等标签，使用了v-for循环实现卡片的布局，让我们一起来看看吧！
一、准备工作
1. 准备文件夹
在components文件夹下创建一个文件夹，命名为body-top, 其下创建index.vue文件。因为首页body部分不止职位卡片区域，所以我把body部分分成了三部分，第一部分top就是职位卡片。
2. 引入到首页index.vue文件
先将body-top引入到首页中。在第四篇文章的准备工作中，我们是给head-bar外层加了div，实现div包裹的区域为版心居中。我们的body-top也是需要版心居中的哦，所以也放在这个div里啦！
二、 职位卡片区域代码部分
1. template区域html代码
整体设计是使用Layui中的选项卡模板，再制作单个panel卡片模板。导航菜单是三个，所以是有三个大的div盒子哦，用来装显示区域的卡片。默认显示第一个导航菜单处的卡片区域。
<template>
<div class="middle-box">
<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
<ul class="layui-tab-title">
<li class="layui-this">为你匹配</li>
<li>24Hour热门</li>
<li>最新职位</li>
</ul>
<div class="layui-tab-content" style="padding: 0">
<div class="layui-tab-item layui-show">
<div class="panel" v-for="data in panelList" :key="data.index">
<p class="panel-head">
<span class="job-title"
><a href="#" class="wordcut">{{ data.title }}</a></span
>
<span class="release-time">{{ data.time }}</span>
<span class="salary">{{ data.salary }}</span>
</p>
<p class="experience">{{ data.experience }}</p>
<span
class="call-words wordcut"
v-for="word in data.words"
:key="word.index"
>{{ word }}</span
>
<hr class="hr-dotted" />
<div class="panel-footer">
<a href="#"><img :src="data.url" /></a>
<div class="footer">
<p class="company">
<a href="#" style="color: #00b38a">{{ data.company }}</a>
</p>
<p>{{ data.detail }}</p>
</div>
</div>
</div>
<a
href="https://www.lagou.com/wn/zhaopin"
target="_blank"
class="a-link"
>查看更多</a
>
</div>
<div class="layui-tab-item">
<div class="panel" v-for="data in hotList" :key="data.index">
<p class="panel-head">
<span class="job-title"
><a href="#" class="wordcut">{{ data.title }}</a></span
>
<span class="release-time">{{ data.time }}</span>
<span class="salary">{{ data.salary }}</span>
</p>
<p class="experience">{{ data.experience }}</p>
<span
class="call-words wordcut"
v-for="word in data.words"
:key="word.index"
>{{ word }}</span
>
<hr class="hr-dotted" />
<div class="panel-footer">
<a href="#"><img :src="data.url" /></a>
<div class="footer">
<p class="company">
<a href="#" style="color: #00b38a">{{ data.company }}</a>
</p>
<p>{{ data.detail }}</p>
</div>
</div>
</div>
<a
href="https://www.lagou.com/wn/zhaopin"
target="_blank"
class="a-link"
>查看更多</a
>
</div>
<div class="layui-tab-item">
<div class="panel" v-for="data in newList" :key="data.index">
<p class="panel-head">
<span class="job-title"
><a href="#" class="wordcut">{{ data.title }}</a></span
>
<span class="release-time">{{ data.time }}</span>
<span class="salary">{{ data.salary }}</span>
</p>
<p class="experience">{{ data.experience }}</p>
<span
class="call-words wordcut"
v-for="word in data.words"
:key="word.index"
>{{ word }}</span
>
<hr class="hr-dotted" />
<div class="panel-footer">
<a href="#"><img :src="data.url" /></a>
<div class="footer">
<p class="company">
<a href="#" style="color: #00b38a">{{ data.company }}</a>
</p>
<p>{{ data.detail }}</p>
</div>
</div>
</div>
<a
href="https://www.lagou.com/wn/zhaopin"
target="_blank"
class="a-link"
>查看更多</a
>
</div>
</div>
</div>
</div>
</template>
2. script区域代码
因为没有后端数据，所以很多的数据都只能自己手动加入，代码篇幅就很长。大家要是觉得数据太多，也可以少放些数据上去呀，我是觉得放多点元素会让页面好看些。
<script>
export default {
data() {
return {
panelList: [
{
title: "前端工程师",
time: "[3天前发布]",
salary: "3k-6k",
experience: "经验1-3年 / 不限",
words: ["人工智能", "电商平台"],
url: "https://www.lgstatic.com/thumbnail_100x100/i/image/M00/18/E6/CgqKkVb0_Z6Ad1IrAAA30eRM9rk131.jpg",
company: "MRS",
detail: "人工智能服务 / A轮 / 北京",
},
{
title: "Java开发工程师",
time: "[09:12发布]",
salary: "10k-13k",
experience: "经验3-5年 / 本科",
words: ["IT技术服务", "软件服务|咨询", "JAVAS"],
url: "https://www.lgstatic.com/thumbnail_100x100/i/image6/M00/4F/A5/CioPOWD6YxGAD-CWAAAsgCdp12U635.jpg",
company: "中电金信",
detail: "IT技术服务 | 咨询,软件服务｜咨询 / B轮 / 北京",
},
{
title: "资深运维开发工程师",
time: "[10:20发布]",
salary: "8k-10k",
experience: "经验1-3年 / 专科",
words: ["区块链", "Linux"],
url: "https://www.lgstatic.com/thumbnail_100x100/10/c12126598b7243deae1e1c8b6a5c2e27.png",
company: "航赞信息",
detail: "专业服务｜咨询 / 不需要融资 / 北京",
},
{
title: "需求分析师（人员外包类）",
time: "[09:12发布]",
salary: "10k-20k",
experience: "经验3-5年 / 本科",
words: ["IT技术服务|咨询", "科技金融", "JAVA"],
url: "https://www.lgstatic.com/thumbnail_100x100/i/image3/M01/02/81/CgoCgV6WZjKAOdIiAAA1Fkyw2Iw250.png",
company: "中科软",
detail: "IT技术服务 | 咨询 / 上市公司 / 北京",
},
{
title: "销售工程师",
time: "[09:09发布]",
salary: "5k-7k",
experience: "经验不限",
words: ["信息安全", "销售"],
url: "https://www.lgstatic.com/thumbnail_100x100/i/image/M00/00/30/Cgp3O1YxptSAE28wAAClIV6BArc504.jpg",
company: "格尔软件",
detail: "信息安全 / 上市公司 / 北京",
},
{
title: "高级产品经理",
time: "[09:11发布]",
salary: "20k-30k",
experience: "经验5-10年 / 本科",
words: ["金融业", "数据产品"],
url: "https://www.lgstatic.com/thumbnail_100x100/i/image/M00/01/10/Cgp3O1ZeznKAbzIrAAAkAYcCvPQ764.png",
company: "泰康在线",
detail: "金融业 / 不需要融资 / 北京",
},
{
title: "WEB前端",
time: "[10:16发布]",
salary: "8k-16k",
experience: "经验1-3年 / 本科",
words: ["人工智能服务", "电商平台", "JavaScript"],
url: "https://www.lgstatic.com/thumbnail_100x100/image1/M00/00/41/Cgo8PFTUXMmAFPC0AAA3c-6bfPQ092.gif",
company: "优捷信达",
detail: "数据服务 | 咨询,IT技术服务 | 咨询 / B轮 / 北京",
},
{
title: "java开发工程师",
time: "[10:46发布]",
salary: "16k-22k",
experience: "经验3-5年 / 本科",
words: ["金融业", "JAVA", "Spring"],
url: "https://www.lgstatic.com/thumbnail_100x100/i/image6/M00/65/46/CioPOWGprYKAJMvZAAPBLPU6rns024.png",
company: "京东方",
detail: "IT技术服务 | 咨询 / 上市公司 / 北京",
},
{
title: "市场营销",
time: "[10:34发布]",
salary: "8k-12k",
experience: "经验应届毕业生 / 本科",
words: ["软件服务咨询", "房地产 | 建筑"],
url: "https://www.lgstatic.com/thumbnail_100x100/i/image/M00/76/DA/Ciqc1F_ItcyAeb_bAAAGvYsVcXc215.png",
company: "北京麦田",
detail: "居住服务 / 不需要融资 / 北京",
},
],
hotList: [
{
title: "高级产品经理",
time: "[09:11发布]",
salary: "20k-30k",
experience: "经验5-10年 / 本科",
words: ["金融业", "数据产品"],
url: "https://www.lgstatic.com/thumbnail_100x100/i/image/M00/01/10/Cgp3O1ZeznKAbzIrAAAkAYcCvPQ764.png",
company: "泰康在线",
detail: "金融业 / 不需要融资 / 北京",
},
{
title: "java开发工程师",
time: "[10:46发布]",
salary: "16k-22k",
experience: "经验3-5年 / 本科",
words: ["金融业", "JAVA", "Spring"],
url: "https://www.lgstatic.com/thumbnail_100x100/i/image6/M00/65/46/CioPOWGprYKAJMvZAAPBLPU6rns024.png",
company: "京东方",
detail: "IT技术服务 | 咨询 / 上市公司 / 北京",
},
{
title: "前端工程师",
time: "[3天前发布]",
salary: "3k-6k",
experience: "经验1-3年 / 不限",
words: ["人工智能", "电商平台"],
url: "https://www.lgstatic.com/thumbnail_100x100/i/image/M00/18/E6/CgqKkVb0_Z6Ad1IrAAA30eRM9rk131.jpg",
company: "MRS",
detail: "人工智能服务 / A轮 / 北京",
},
{
title: "资深运维开发工程师",
time: "[10:20发布]",
salary: "8k-10k",
experience: "经验1-3年 / 专科",
words: ["区块链", "Linux"],
url: "https://www.lgstatic.com/thumbnail_100x100/10/c12126598b7243deae1e1c8b6a5c2e27.png",
company: "航赞信息",
detail: "专业服务｜咨询 / 不需要融资 / 北京",
},
{
title: "需求分析师（人员外包类）",
time: "[09:12发布]",
salary: "10k-20k",
experience: "经验3-5年 / 本科",
words: ["IT技术服务|咨询", "科技金融", "JAVA"],
url: "https://www.lgstatic.com/thumbnail_100x100/i/image3/M01/02/81/CgoCgV6WZjKAOdIiAAA1Fkyw2Iw250.png",
company: "中科软",
detail: "IT技术服务 | 咨询 / 上市公司 / 北京",
},
{
title: "市场营销",
time: "[10:34发布]",
salary: "8k-12k",
experience: "经验应届毕业生 / 本科",
words: ["软件服务咨询", "房地产 | 建筑"],
url: "https://www.lgstatic.com/thumbnail_100x100/i/image/M00/76/DA/Ciqc1F_ItcyAeb_bAAAGvYsVcXc215.png",
company: "北京麦田",
detail: "居住服务 / 不需要融资 / 北京",
},
{
title: "销售工程师",
time: "[09:09发布]",
salary: "5k-7k",
experience: "经验不限",
words: ["信息安全", "销售"],
url: "https://www.lgstatic.com/thumbnail_100x100/i/image/M00/00/30/Cgp3O1YxptSAE28wAAClIV6BArc504.jpg",
company: "格尔软件",
detail: "信息安全 / 上市公司 / 北京",
},
{
title: "WEB前端",
time: "[10:16发布]",
salary: "8k-16k",
experience: "经验1-3年 / 本科",
words: ["人工智能服务", "电商平台", "JavaScript"],
url: "https://www.lgstatic.com/thumbnail_100x100/image1/M00/00/41/Cgo8PFTUXMmAFPC0AAA3c-6bfPQ092.gif",
company: "优捷信达",
detail: "数据服务 | 咨询,IT技术服务 | 咨询 / B轮 / 北京",
},
{
title: "Java开发工程师",
time: "[09:12发布]",
salary: "10k-13k",
experience: "经验3-5年 / 本科",
words: ["IT技术服务", "软件服务|咨询", "JAVAS"],
url: "https://www.lgstatic.com/thumbnail_100x100/i/image6/M00/4F/A5/CioPOWD6YxGAD-CWAAAsgCdp12U635.jpg",
company: "中电金信",
detail: "IT技术服务 | 咨询,软件服务｜咨询 / B轮 / 北京",
},
],
newList: [
{
title: "java开发工程师",
time: "[10:46发布]",
salary: "16k-22k",
experience: "经验3-5年 / 本科",
words: ["金融业", "JAVA", "Spring"],
url: "https://www.lgstatic.com/thumbnail_100x100/i/image6/M00/65/46/CioPOWGprYKAJMvZAAPBLPU6rns024.png",
company: "京东方",
detail: "IT技术服务 | 咨询 / 上市公司 / 北京",
},
{
title: "高级产品经理",
time: "[09:11发布]",
salary: "20k-30k",
experience: "经验5-10年 / 本科",
words: ["金融业", "数据产品"],
url: "https://www.lgstatic.com/thumbnail_100x100/i/image/M00/01/10/Cgp3O1ZeznKAbzIrAAAkAYcCvPQ764.png",
company: "泰康在线",
detail: "金融业 / 不需要融资 / 北京",
},
{
title: "前端工程师",
time: "[3天前发布]",
salary: "3k-6k",
experience: "经验1-3年 / 不限",
words: ["人工智能", "电商平台"],
url: "https://www.lgstatic.com/thumbnail_100x100/i/image/M00/18/E6/CgqKkVb0_Z6Ad1IrAAA30eRM9rk131.jpg",
company: "MRS",
detail: "人工智能服务 / A轮 / 北京",
},
{
title: "市场营销",
time: "[10:34发布]",
salary: "8k-12k",
experience: "经验应届毕业生 / 本科",
words: ["软件服务咨询", "房地产 | 建筑"],
url: "https://www.lgstatic.com/thumbnail_100x100/i/image/M00/76/DA/Ciqc1F_ItcyAeb_bAAAGvYsVcXc215.png",
company: "北京麦田",
detail: "居住服务 / 不需要融资 / 北京",
},
{
title: "资深运维开发工程师",
time: "[10:20发布]",
salary: "8k-10k",
experience: "经验1-3年 / 专科",
words: ["区块链", "Linux"],
url: "https://www.lgstatic.com/thumbnail_100x100/10/c12126598b7243deae1e1c8b6a5c2e27.png",
company: "航赞信息",
detail: "专业服务｜咨询 / 不需要融资 / 北京",
},
{
title: "需求分析师（人员外包类）",
time: "[09:12发布]",
salary: "10k-20k",
experience: "经验3-5年 / 本科",
words: ["IT技术服务|咨询", "科技金融", "JAVA"],
url: "https://www.lgstatic.com/thumbnail_100x100/i/image3/M01/02/81/CgoCgV6WZjKAOdIiAAA1Fkyw2Iw250.png",
company: "中科软",
detail: "IT技术服务 | 咨询 / 上市公司 / 北京",
},
{
title: "销售工程师",
time: "[09:09发布]",
salary: "5k-7k",
experience: "经验不限",
words: ["信息安全", "销售"],
url: "https://www.lgstatic.com/thumbnail_100x100/i/image/M00/00/30/Cgp3O1YxptSAE28wAAClIV6BArc504.jpg",
company: "格尔软件",
detail: "信息安全 / 上市公司 / 北京",
},
{
title: "Java开发工程师",
time: "[09:12发布]",
salary: "10k-13k",
experience: "经验3-5年 / 本科",
words: ["IT技术服务", "软件服务|咨询", "JAVAS"],
url: "https://www.lgstatic.com/thumbnail_100x100/i/image6/M00/4F/A5/CioPOWD6YxGAD-CWAAAsgCdp12U635.jpg",
company: "中电金信",
detail: "IT技术服务 | 咨询,软件服务｜咨询 / B轮 / 北京",
},
{
title: "WEB前端",
time: "[10:16发布]",
salary: "8k-16k",
experience: "经验1-3年 / 本科",
words: ["人工智能服务", "电商平台", "JavaScript"],
url: "https://www.lgstatic.com/thumbnail_100x100/image1/M00/00/41/Cgo8PFTUXMmAFPC0AAA3c-6bfPQ092.gif",
company: "优捷信达",
detail: "数据服务 | 咨询,IT技术服务 | 咨询 / B轮 / 北京",
},
],
};
},
};
</script>
3. css代码
在设计卡片上花的时间蛮多的，卡片整体大小、排版、颜色选择都是测试了蛮多版本最终敲定的。这里有一个小亮点：在职位信息小框框处加了超过框长度的字以省略号隐藏。
<style scoped>
.middle-box {
margin-top: 70px;
}
.layui-tab .layui-tab-title li {
font-size: 20px;
margin-right: 80px;
padding: 0;
line-height: 20px;
}
.panel {
display: inline-block;
width: 470px;
height: 220px;
padding: 20px 20px 10px;
margin: 20px 0 0 20px;
border: 1px solid rgb(209, 203, 203);
}
.panel:hover {
box-shadow: 0 0 10px rgb(209, 203, 203);
}
.panel:nth-child(3n-2) {
margin-left: 0;
}
.panel p {
margin-bottom: 10px;
}
.panel .panel-head .job-title {
display: block;
float: left;
font-size: 20px;
font-weight: bold;
margin-right: 20px;
width: 100px;
height: 30px;
line-height: 30px;
}
.panel .panel-head .job-title a {
display: inline-block;
width: 100px;
}
.panel .panel-head .salary {
font-size: 20px;
float: right;
}
.panel .panel-head .release-time,
.panel .experience {
font-size: 18px;
}
.panel .call-words {
display: inline-block;
width: 80px;
height: 30px;
line-height: 30px;
text-align: center;
margin: 10px 20px 0 0;
font-size: 16px;
border: 1px solid rgb(209, 203, 203);
border-radius: 4px;
color: #999;
}
.wordcut {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.hr-dotted {
text-align: center;
border-bottom: 2px dashed #999 !important;
margin: 24px 0;
}
.panel-footer a {
float: left;
}
.panel-footer a img {
width: 50px;
height: 50px;
}
.footer {
float: left;
margin-left: 20px;
font-size: 18px;
}
.footer p {
overflow: hidden;
margin: 0;
padding: 0;
color: #999;
}
.layui-tab-content .a-link {
display: block;
width: 480px;
height: 50px;
line-height: 50px;
font-size: 20px;
text-align: center;
margin: 20px auto;
border: 2px solid #00b38a;
color: #00b38a;
}
.layui-tab-content .a-link:hover {
color: #fff;
background-color: #00b38a;
}
</style>
三、轮播图区域成果展示
截图的时候我的鼠标悬停在第一个职位卡片上啦，有一个阴影边框大家应该能够看到吧嘿嘿！点击公司图片或者公司名是可以跳转公司介绍的。
四、结语
今天的分享又结束啦，大家有疑问的地方可以留言，如果有修改建议也欢迎私信或留言呀！拜拜~~~
