vue
<template>
<div>
<van-grid class="navicon mt-3" :column-num="4">
<van-grid-item v-for="(item,index) in naviconList" :key="index">
<i class="sprite" :class="item.activeClass"></i>
<div class="mt-2">{{item.text}}</div>
</van-grid-item>
</van-grid>
</div>
</template>
<script>
export default {
data() {
return {
naviconList: [
{
activeClass:'sprite-news',
text:'爆料站'
},
{
activeClass:'sprite-stories',
text:'故事站'
},
{
activeClass:'sprite-mall',
text:'周边商城'
},
{
activeClass:'sprite-server',
text:'体验服'
},
{
activeClass:'sprite-rookie',
text:'新人专区'
},
{
activeClass:'sprite-honour',
text:'荣耀·传承'
},
{
activeClass:'sprite-wz',
text:'王者营地'
},
{
activeClass:'sprite-public',
text:'公众号'
},
]
}
},
}
</script>
<style>
</style>
scss
.sprite {
background: url(../images/index.png) no-repeat 0 0; //0 0左上角对齐 750*910
background-size:28.8462rem 35rem ; //375px
display: inline-block; //i标签使用精灵图要设置
&.sprite-news{
width: 2.6154rem;
height: 1.5385rem;
background-position: 63.546% 15.517%; //用百分数
}
&.sprite-stories{
width: 3.5385rem;
height: 1.5385rem;
background-position: 93.483% 15.614%; //用百分数
}
&.sprite-mall{
width: 1.4615rem;
height: 1.6923rem;
background-position: 36.746% 0.924%; //用百分数
}
&.sprite-server{
width: 1.5385rem;
height: 1.5385rem;
background-position: 10.408% 15.517%; //用百分数
}
&.sprite-rookie{
width: 1.5385rem;
height: 1.6154rem;
background-position: 89.733% 1.266%; //用百分数
}
&.sprite-honour{
width: 1.8462rem;
height:1.5385rem;
background-position: 36.467% 15.287%; //用百分数
}
&.sprite-wz{
width: 1.8462rem;
height: 1.8462rem;
background-position: 63.3% 0.927%; //用百分数
}
&.sprite-public{
width: 1.8462rem;
height: 1.5385rem;
background-position: 0 96.207%; //用百分数
}
&.sprite-arrow{
width: 0.7692rem;
height: 0.7692rem;
background-position: 38.577% 52.076%; //用百分数
}
}
效果: