<?php if($banners){?>

<div class="ms-controller" ms-controller="bannerShow">

	<div id="owl-demo" class="page-banner owl-carousel owl-theme">

		<a class="item" ms-for="el in @bannerData">

			<img ms-attr="{src:el.image}" alt="" style="width:100%;height: 382px;" ms-click="toLink(el.link)">

		</a>

	</div>

	<div class="modal fade" id="showTryPic" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" style="cursor: pointer;">

		<div class="modal-dialog" role="document" style="width: 441px;height:520px;">

			<div class="modal-content" style="width: 441px;height: 520px;">

				<div class="modal-body" style="width:441px;height:520px;box-sizing: border-box;background-color: #f5f5f9;padding:0;border-radius: 5px;position: relative;text-align: center;">

					<button type="button" class="close" data-dismiss="modal" aria-label="Close" style="width:20px;height:20px;display:inline-block;background:url(/image/system/modal-img/cn_img/close.png) no-repeat center center;background-size: contain;position: absolute;right:10px;top:10px;z-index: 1;"

					 onClick="javascript:;">

						<span aria-hidden="true" id="guan"></span>

					</button>

					<div class="tryscan">

						<div id="bannerCode"></div>

					</div>

				</div>

			</div>

		</div>

	</div>

</div>

<script type="text/javascript">

	// var bannerlist = <?php echo json_encode($banners); ?>;

	var qrcodeBanner = new QRCode(document.getElementById("bannerCode"), {

		width: 120,

		height: 120

	});

	// setTimeout(function () {

	// }, 1000);

</script>

<script>

	var banner = avalon.define({

		$id: "bannerShow",

		bannerData: <?php echo json_encode($banners); ?>,

		langModalHeader: function () {

			$("#showTryPic").modal("show");

			banner.geturl('https://try.fishqc.com')

		},

		geturl: function (url) {

			banner.str = url;

			qrcodeBanner.makeCode(banner.str);

		},

		toLink: function (item) {

			if (item == "1") {

				banner.langModalHeader()

			} else {

				window.location.href = item

			}

		}

	})

	banner.$watch('onReady', function () {

		if (this.bannerData) {

			$('#owl-demo').owlCarousel({

				items: 1,

				loop: true,

				lazyLoad: true,

				autoplay: true,

				autoplayTimeout: 5000,

				nav: true,

				navText: ['<i class="fa fa-angle-left"></i>', '<i class="fa fa-angle-right"></i>']

			});

		}

	})

</script>

<style type="text/css">

	.page-banner a.img {

		display: block;

		background-size: auto 100%;

	}

	#bannerCode {

		position: absolute;

		left: 50%;

		top: 50%;

		transform: translate(-49%, -48%);

	}

</style>

<?php }?>