<template>
	<div class="list2 clearfix">
		<router-link class="saygameA col-md-3 clo-xs-6" v-for="(item,index) in list" :key="index" to="">
			<figure>
				<div class="img"><img class="w100" v-lazy="item.background2" alt=""></div>
				<figcaption class="nowrap">{{item.title.length
					<12?item.title:item.title.substring(0,12)+ '...'}}</figcaption>
			</figure>
		</router-link>
	</div>
</template>
<script>
    export default {
        name: 'bannenex',

        data() {
            return {
                list:[
                    {
                        "id": "86",
                        "background": "http://theme.cdn.betophall.com//data/saygame/content/201711231632204155.jpg",
                        "title": "阴阳师版农药：决战平安京首测体验",
                        "background2": "http://theme.cdn.betophall.com//data/saygame/content/201711281709104689.jpg",
                        "describes": "阴阳师+农药，你值得拥有"
                    },
                    {
                        "id": "85",
                        "background": "http://theme.cdn.betophall.com//data/saygame/content/201711231616215537.jpg",
                        "title": "《光荣使命》前来吃鸡！",
                        "background2": "http://theme.cdn.betophall.com//data/saygame/content/201711231638254949.jpg",
                        "describes": "北通左游W1手柄抢先体验《光荣使命》"
                    },
                    {
                        "id": "84",
                        "background": "http://theme.cdn.betophall.com//data/saygame/content/201711161507037253.jpg",
                        "title": "最强吃鸡：《荒野行动》北通左游教学",
                        "background2": "http://theme.cdn.betophall.com//data/saygame/content/201711281705198197.png",
                        "describes": "网易的吃鸡，很棒棒~"
                    },
                    {
                        "id": "75",
                        "background": "http://theme.cdn.betophall.com//data/saygame/content/201711171139452981.jpg",
                        "title": "【左游超会玩09】骚到飞起 王者荣耀里还有这种操作？",
                        "background2": "http://theme.cdn.betophall.com//data/saygame/content/201711171139472712.jpg",
                        "describes": null
                    }
                ]
            }
        },
        components: {

        },
        computed: {

        },
        mounted() {}
    }
</script>

<style lang="less" scoped>
	@import url("../../../assets/config.less");
	.list2 {
		margin-bottom: 20px;
		/*overflow: hidden;*/
		.saygameA {
			padding: 0 1%;
			box-sizing: border-box;
			&:hover {
				figcaption {
					color: @common_cl;
				}
				.img {
					transform: translateY(-10px);
				}
			}
			figcaption {
				color: #000;
				font-size: 14px;
			}
			&:last-child {
			}
			.img {
				display: block;
				width: 100%;
				overflow: hidden;
				transition: all .3s;
				margin-bottom: 15px;
			}
		}
	}
</style>
