<template>
<div class="icons">
<swiper :options="swiperOption">
<swiper-slide
v-for="i in swiperList"
:key="i.id"
>
<div class="icon">
<div>
<img :src="i.imgUrl" alt="">
</div>
<p>热门景点</p>
</div>
</swiper-slide>
</swiper>
</div>
</template>
<script>
export default {
name:'HomeIcons',
data () {
return {
swiperOption: {
pagination:'.swiper-pagination'
},
imgList:[
{id:"1",imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png'},
{id:"2",imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/95/8246f27355943202.png'},
{id:"3",imgUrl:'http://img1.qunarzz.com/piao/fusion/1804/ff/fdf170ee89594b02.png'},
{id:"4",imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/20/831d62d2e1c7be02.png'},
{id:"5",imgUrl:'http://img1.qunarzz.com/piao/fusion/1804/5a/13ceb38dcf262f02.png'},
{id:"6",imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/89/55083b0f1951f302.png'},
{id:"7",imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/96/c70f1e85ae4a4f02.png'},
{id:"8",imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/ab/6f7d6e44963c9302.png'}
]
}
}
}
</script>
<style scoped>
.icons{
width: 100%;
height: 0;
padding-bottom: 50%;
overflow: hidden;
.icon{
float: left;
position: relative;
width: 25%;
height: 0;
padding-bottom: 25%;
overflow: hidden;
div{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: .44rem;
img{
display: block;
height: 100%;
margin: 0 auto;
}
}
p{
width: 100%;
height: .44rem;
line-height: .44rem;
text-align: center;
position: absolute;
bottom: 0;;
}
}
}
</style>

这样写为什么会报错