<template>
	<div class="list1" v-if="imgInfo.games.length">
		<div class="games clearfix">
			<router-link v-if="imgInfo.banner" to="" class="col-xs-6 col-md-4 bigImg">
				<img v-lazy="imgInfo.banner.photourl" alt="">
			</router-link>
			<ul class="col-xs-6 col-md-8">
				<li  class="smallImg col-md-6" v-for="(game,index) in imgInfo.games" :key="index">
					<router-link to="">
						<figure class="animateF">
							<img v-lazy="game.webcover" alt="">
							<figcaption>
								<div class="animateTitle title" slot="title">
									<h6 class="colorf"> <slot name="iconL"></slot>{{game.title}}<slot name="iconR"></slot></h6>
								</div>
							</figcaption>
						</figure>
					</router-link>
				</li>
			</ul>
		</div>
	</div>
</template>
<script>
    export default {
        name: 'bannenex',
        props: {
            imgInfo: {
                default() {
                    return  {
                        "banner": {
                            "title": "每日推荐（龙之谷）",
                                "photourl": "http://theme.cdn.betophall.com//data/game/banner/201709291655151045.png",
                                "redirecturl": "/gamedetail/621",
                                "src": "http://theme.cdn.betophall.com///gamedetail/621"
                        },
                        "games": [
                            {
                                "id": "989",
                                "webcover": "http://theme.cdn.betophall.com//data/game/webcover/201712011743241005.jpg",
                                "title": "大神"
                            },
                            {
                                "id": "983",
                                "webcover": "http://theme.cdn.betophall.com//data/game/webcover/20171130171657290.jpg",
                                "title": "最终幻想Ⅻ"
                            },
                            {
                                "id": "977",
                                "webcover": "http://theme.cdn.betophall.com//data/game/webcover/201711271437597896.jpg",
                                "title": "怪物猎人2nd"
                            },
                            {
                                "id": "960",
                                "webcover": "http://theme.cdn.betophall.com//data/game/webcover/20171117175854528.jpg",
                                "title": "新超级马里奥"
                            }
                        ]
                    }
                }

            }
        },
        data() {
            return {

            }
        },
        components: {

        },
        computed: {

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

<style lang="less" scoped>
	@import url("../../../assets/config.less");

	figure {
		position: relative;
		overflow: hidden;
		img {
			display: block;
			width: 100%;
			min-height: 100%;
		}
	}


	.animateF {
		width: 100%;
		height: 100%;
		position: relative;
		overflow: hidden;
		transition: box-shadow .3s;
		&:hover {
			box-shadow: 2px 2px 15px #999;
			figcaption {
				bottom: 0px;
				&:after {
					background-image: linear-gradient(to top, @common_cl, transparent);
				}
			}
		}
		.img {
			width: 100%;
			transition: transform .3s;
		}
		img {
			display: block;
			height: 100%;
		}
		figcaption {
			position: absolute;
			bottom: -60px;
			width: 100%;
			height: 60px;
			box-sizing: border-box;
			color: #fff;
			transition: all .3s;
			//      z-index: 1;
			.animateTitle {
				position: relative;
				z-index: 1;
				padding-top: 30px;
				.label {
					@h: 30px;
					display: inline-block;
					height: @h;
					padding: 0px 10px;
					margin-right: 16px;
					line-height: @h;
					background: @common_cl;
					border-radius: @h;
					font-size: 16px;
				}
				.nowrap {
					width: 80%;
					font-size: 16px;
					color: #fffefe;
					margin: 0 auto;
				}
			}
			&:after {
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				display: block;
				width: 100%;
				height: 100%;
				background-image: linear-gradient(0deg, #000, transparent);
				opacity: .7;
			}
		}
	}

	.list1 {
		margin-top: -8px;
		.nowrap {
			margin: 0 auto;
		}
		img {
			display: block;
		}
		.games {
			position: relative;
		}
		.bigImg {
			position: absolute;
			left: 0;
			top: 0;
			height: 100%;
			text-align: center;
			transition: all .5s;
			overflow: hidden;
			&:hover {
				box-shadow: 2px 2px 15px #000;
			}
			&:after {
				position: absolute;
				top: 0;
				left: 0;
				content: '';
				display: block;
				width: 100%;
				height: 100%;
				/*background: rgba(0, 0, 0, .3) url(../../assets/images/dayhot.png) no-repeat center;*/
				z-index: 1;
			}
			img {
				height: 100%;
				display: block;
			}
		}
		ul {
			/*max-height: 488px;*/
			float: right;
		}
		.animateTitle {
			font-size: 18px ;
		}
		.smallImg {
			max-height: 50%;
			padding-bottom: 1.2%;
			padding-left: 2.4%;
			box-sizing: border-box;
			float: right;
			text-align: center;
			figure {
				height: 100%;
			}
			&:nth-child(3),
			&:nth-child(4) {
				padding-bottom: 0%;
				padding-top: 1.2%;
			}
		}
	}
</style>
