<div
v-for="(sites, index) in site_list"
:key="index"
:class="sites[0].class"
>
<div class="category">
<div class="category-prefix">
<img
src="../../assets/images/Rectangle36.png"
alt=""
class="category-prefix-img"
/>
</div>
<span>
{{ sites[0].type }}
</span>
</div>
<div class="site-set">
<div class="site" v-for="(site, index) in sites" :key="index">
<div class="site-icon">
<img :src="site.photo" />
</div>
<div class="name-description">
<div class="site-name">
<a :href="site.url">
<span>
{{ site.name }}
</span>
</a>
</div>
<div class="site-description">
<span>{{ site.description }}</span>
</div>
</div>
</div>实现了如图的效果
网站种类为一维，一种网站中的各个网址为一维，其中index为二维数组的一维的索引，不需要自定义，从0开始，先遍历种类创建各个种类的div容器
对应data中的二维数组如下：
site_list: [
[
{
type: "招聘",
class: "recruitment",
photo: require("~/assets/images/Rectangle19.svg"),
name: "Boss直聘",
description: "一款BOSS与牛人直接开聊的招聘工具",
url: "",
},
{
type: "招聘",
class: "recruitment",
photo: require("~/assets/images/Rectangle19.svg"),
name: "Boss直聘",
description: "一款BOSS与牛人直接开聊的招聘工具",
url: "",
},
{
type: "招聘",
class: "recruitment",
photo: require("~/assets/images/Rectangle19.svg"),
name: "Boss直聘",
description: "一款BOSS与牛人直接开聊的招聘工具",
url: "",
},
{
type: "招聘",
class: "recruitment",
photo: require("~/assets/images/Rectangle19.svg"),
name: "Boss直聘",
description: "一款BOSS与牛人直接开聊的招聘工具",
url: "",
},
{
type: "招聘",
class: "recruitment",
photo: require("~/assets/images/Rectangle19.svg"),
name: "Boss直聘",
description: "一款BOSS与牛人直接开聊的招聘工具",
url: "",
},
{
type: "招聘",
class: "recruitment",
photo: require("~/assets/images/Rectangle19.svg"),
name: "Boss直聘",
description: "一款BOSS与牛人直接开聊的招聘工具",
url: "",
},
],
[
{
type: "猎头",
class: "headhunter",
photo: require("~/assets/images/Rectangle19.svg"),
name: "Boss直聘",
description: "一款BOSS与牛人直接开聊的招聘工具",
url: "",
},
{
type: "猎头",
class: "headhunter",
photo: require("~/assets/images/Rectangle19.svg"),
name: "Boss直聘",
description: "一款BOSS与牛人直接开聊的招聘工具",
url: "",
},
{
type: "猎头",
class: "headhunter",
photo: require("~/assets/images/Rectangle19.svg"),
name: "Boss直聘",
description: "一款BOSS与牛人直接开聊的招聘工具",
url: "",
},
{
type: "猎头",
class: "headhunter",
photo: require("~/assets/images/Rectangle19.svg"),
name: "Boss直聘",
description: "一款BOSS与牛人直接开聊的招聘工具",
url: "",
},
{
type: "猎头",
class: "headhunter",
photo: require("~/assets/images/Rectangle19.svg"),
name: "Boss直聘",
description: "一款BOSS与牛人直接开聊的招聘工具",
url: "",
},
{
type: "猎头",
class: "headhunter",
photo: require("~/assets/images/Rectangle19.svg"),
name: "Boss直聘",
description: "一款BOSS与牛人直接开聊的招聘工具",
url: "",
},
],
[
{
type: "背调",
class: "backgroundCheck",
photo: require("~/assets/images/Rectangle19.svg"),
name: "Boss直聘",
description: "一款BOSS与牛人直接开聊的招聘工具",
url: "",
},
{
type: "背调",
class: "backgroundCheck",
photo: require("~/assets/images/Rectangle19.svg"),
name: "Boss直聘",
description: "一款BOSS与牛人直接开聊的招聘工具",
url: "",
},
{
type: "背调",
class: "backgroundCheck",
photo: require("~/assets/images/Rectangle19.svg"),
name: "Boss直聘",
description: "一款BOSS与牛人直接开聊的招聘工具",
url: "",
},
{
type: "背调",
class: "backgroundCheck",
photo: require("~/assets/images/Rectangle19.svg"),
name: "Boss直聘",
description: "一款BOSS与牛人直接开聊的招聘工具",
url: "",
},
{
type: "背调",
class: "backgroundCheck",
photo: require("~/assets/images/Rectangle19.svg"),
name: "Boss直聘",
description: "一款BOSS与牛人直接开聊的招聘工具",
url: "",
},
{
type: "背调",
class: "backgroundCheck",
photo: require("~/assets/images/Rectangle19.svg"),
name: "Boss直聘",
description: "一款BOSS与牛人直接开聊的招聘工具",
url: "",
},
],
[
{
type: "薪酬",
class: "salary",
photo: require("~/assets/images/Rectangle19.svg"),
name: "Boss直聘",
description: "一款BOSS与牛人直接开聊的招聘工具",
url: "",
},
{
type: "薪酬",
class: "salary",
photo: require("~/assets/images/Rectangle19.svg"),
name: "Boss直聘",
description: "一款BOSS与牛人直接开聊的招聘工具",
url: "",
},
{
type: "薪酬",
class: "salary",
photo: require("~/assets/images/Rectangle19.svg"),
name: "Boss直聘",
description: "一款BOSS与牛人直接开聊的招聘工具",
url: "",
},
{
type: "薪酬",
class: "salary",
photo: require("~/assets/images/Rectangle19.svg"),
name: "Boss直聘",
description: "一款BOSS与牛人直接开聊的招聘工具",
url: "",
},
{
type: "薪酬",
class: "salary",
photo: require("~/assets/images/Rectangle19.svg"),
name: "Boss直聘",
description: "一款BOSS与牛人直接开聊的招聘工具",
url: "",
},
{
type: "薪酬",
class: "salary",
photo: require("~/assets/images/Rectangle19.svg"),
name: "Boss直聘",
description: "一款BOSS与牛人直接开聊的招聘工具",
url: "",
},
],
[
{
type: "五险一金",
class: "insuranceFund",
photo: require("~/assets/images/Rectangle19.svg"),
name: "Boss直聘",
description: "一款BOSS与牛人直接开聊的招聘工具",
url: "",
},
{
type: "五险一金",
class: "insuranceFund",
photo: require("~/assets/images/Rectangle19.svg"),
name: "Boss直聘",
description: "一款BOSS与牛人直接开聊的招聘工具",
url: "",
},
{
type: "五险一金",
class: "insuranceFund",
photo: "/site_assets/client/assets/images/Rectangle19.svg",
name: "Boss直聘",
description: "一款BOSS与牛人直接开聊的招聘工具",
url: "",
},
{
type: "五险一金",
class: "insuranceFund",
photo: require("~/assets/images/Rectangle19.svg"),
name: "Boss直聘",
description: "一款BOSS与牛人直接开聊的招聘工具",
url: "",
},
{
type: "五险一金",
class: "insuranceFund",
photo: require("~/assets/images/Rectangle19.svg"),
name: "Boss直聘",
description: "一款BOSS与牛人直接开聊的招聘工具",
url: "",
},
{
type: "五险一金",
class: "insuranceFund",
photo: require("~/assets/images/Rectangle19.svg"),
name: "Boss直聘",
description: "一款BOSS与牛人直接开聊的招聘工具",
url: "",
},
],
[
{
type: "企业福利",
class: "welfare",
photo: require("~/assets/images/Rectangle19.svg"),
name: "Boss直聘",
description: "一款BOSS与牛人直接开聊的招聘工具",
url: "",
},
{
type: "企业福利",
class: "welfare",
photo: require("~/assets/images/Rectangle19.svg"),
name: "Boss直聘",
description: "一款BOSS与牛人直接开聊的招聘工具",
url: "",
},
{
type: "企业福利",
class: "welfare",
photo: require("~/assets/images/Rectangle19.svg"),
name: "Boss直聘",
description: "一款BOSS与牛人直接开聊的招聘工具",
url: "",
},
{
type: "企业福利",
class: "welfare",
photo: require("~/assets/images/Rectangle19.svg"),
name: "Boss直聘",
description: "一款BOSS与牛人直接开聊的招聘工具",
url: "",
},
{
type: "企业福利",
class: "welfare",
photo: require("~/assets/images/Rectangle19.svg"),
name: "Boss直聘",
description: "一款BOSS与牛人直接开聊的招聘工具",
url: "",
},
{
type: "企业福利",
class: "welfare",
photo: require("~/assets/images/Rectangle19.svg"),
name: "Boss直聘",
description: "一款BOSS与牛人直接开聊的招聘工具",
url: "",
},
],
[
{
type: "体检",
class: "medical",
photo: require("~/assets/images/Rectangle19.svg"),
name: "Boss直聘",
description: "一款BOSS与牛人直接开聊的招聘工具",
url: "",
},
{
type: "体检",
class: "medical",
photo: require("~/assets/images/Rectangle19.svg"),
name: "Boss直聘",
description: "一款BOSS与牛人直接开聊的招聘工具",
url: "",
},
{
type: "体检",
class: "medical",
photo: require("~/assets/images/Rectangle19.svg"),
name: "Boss直聘",
description: "一款BOSS与牛人直接开聊的招聘工具",
url: "",
},
{
type: "体检",
class: "medical",
photo: require("~/assets/images/Rectangle19.svg"),
name: "Boss直聘",
description: "一款BOSS与牛人直接开聊的招聘工具",
url: "",
},
{
type: "体检",
class: "medical",
photo: require("~/assets/images/Rectangle19.svg"),
name: "Boss直聘",
description: "一款BOSS与牛人直接开聊的招聘工具",
url: "",
},
{
type: "体检",
class: "medical",
photo: require("~/assets/images/Rectangle19.svg"),
name: "Boss直聘",
description: "一款BOSS与牛人直接开聊的招聘工具",
url: "",
},
],
[
{
type: "法律",
class: "law",
photo: require("~/assets/images/Rectangle19.svg"),
name: "Boss直聘",
description: "一款BOSS与牛人直接开聊的招聘工具",
url: "",
},
{
type: "法律",
class: "law",
photo: require("~/assets/images/Rectangle19.svg"),
name: "Boss直聘",
description: "一款BOSS与牛人直接开聊的招聘工具",
url: "",
},
{
type: "法律",
class: "law",
photo: require("~/assets/images/Rectangle19.svg"),
name: "Boss直聘",
description: "一款BOSS与牛人直接开聊的招聘工具",
url: "",
},
{
type: "法律",
class: "law",
photo: require("~/assets/images/Rectangle19.svg"),
name: "Boss直聘",
description: "一款BOSS与牛人直接开聊的招聘工具",
url: "",
},
{
type: "法律",
class: "law",
photo: require("~/assets/images/Rectangle19.svg"),
name: "Boss直聘",
description: "一款BOSS与牛人直接开聊的招聘工具",
url: "",
},
{
type: "法律",
class: "law",
photo: require("~/assets/images/Rectangle19.svg"),
name: "Boss直聘",
description: "一款BOSS与牛人直接开聊的招聘工具",
url: "",
},
],
]
css样式如下：
.emptyBox {
position: relative;
top: -60px;
@media screen and (max-width: 500px) {
top: -15px;
}
}
.category-prefix {
width: 4px;
height: 100%;
margin-top: 0px;
float: left;
display: block;
line-height: 100%;
margin-left: 0;
padding-top: 1.5%;
@media screen and (max-width: 500px) {
padding-top: 1%;
line-height: 40px;
display: none;
}
}
.category-prefix-img {
width: "4px";
height: "18px";
}
.recruitment,
.headhunter,
.backgroundCheck,
.salary,
.insuranceFund,
.welfare,
.medical,
.law {
width: 100%;
margin-right: 240px;
margin-top: 24px;
margin-left: 0px;
border-radius: 4px;
background-color: white;
@media screen and (max-width: 500px) {
height: 21%;
display: inline-block;
}
}
.site-set {
width: 100%;
line-height: 100px;
margin-left: 0;
text-align: left;
overflow: auto;
@media screen and (max-width: 500px) {
margin-top: 0px;
display: grid;
grid-template-columns: 1fr 1fr;
}
}
.site {
width: 16%;
margin-left: 0px;
margin-right: 5px;
display: block;
float: left;
@media screen and (max-width: 500px) {
width: 100%;
justify-content: center;
justify-items: center;
}
}
.site-icon {
width: 20px;
height: 100%;
margin-right: 13px;
display: block;
float: left;
margin-left: 24px;
margin-top: -5%;
@media screen and (max-width: 500px) {
margin-left: 0%;
margin-right: 0%;
text-align: center;
margin-top: -6%;
float: left;
width: 28%;
}
img {
width: 25px;
height: 100%;
}
}
.name-description {
width: 110px;
float: left;
display: block;
position: relative;
@media screen and (max-width: 500px) {
width: 70%;
height: 100%;
margin: 0 auto;
}
}
.site-name {
font-size: 14px;
opacity: 0.87;
line-height: 22px;
margin-top: 20px;
height: 22px;
@media screen and (max-width: 500px) {
line-height: 20px;
margin: 0 auto;
margin-top: 20px;
}
span {
top: 22%;
position: relative;
@media screen and (max-width: 500px) {
height: 20px;
display: block;
text-align: left;
}
}
}
.site-name span:hover {
text-decoration: underline;
}
.site-description {
font-size: 12px;
opacity: 0.6;
line-height: 20px;
padding-bottom: 28px;
padding-top: 8px;
@media screen and (max-width: 500px) {
font-size: 10px;
line-height: 14px;
margin: 0 auto;
margin-top: 5px;
padding: 0;
}
}本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
