<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,height=device-height, user-scalable=no,initial-scale=1, minimum-scale=1, maximum-scale=1,target-densitydpi=device-dpi ">
	<title>我的</title>
	<link rel="stylesheet" type="text/css" href="${ctx }/styles/common/reset.css" />
	<link rel="stylesheet" type="text/css" href="${ctx }/styles/wechat/newmine.css?v=4.1218" />
	<link href="${ctx }/scripts/lib/layui/layui.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="${ctx }/plugin/swiper/swiper_js/swiper-3.4.1.min.js"></script>
	<link rel="stylesheet" type="text/css" href="${ctx }/plugin/swiper/swiper_css/swiper-3.4.1.min.css" />
	<style>
		.headerArea{
		height: 62px;
		padding: 20px 25px 14px 20px;
		box-sizing: border-box;
		background: #fff;
	}
	.headerArea .swiper-icon{
		display: block;
		width: 18px;
		height: 28px;
		float: left;
		background: url("../../images/index_v1.0/Bitmap.png") no-repeat center center;
		background-size: contain;
	}
	.headerArea .swiper-icon.fude-icon{
		background: url("../../images/index_v1.0/fude-logo.png") no-repeat center center;
		width: 111px;
		height: 42px;
  }
  .headerArea .swiper-icon.suoke-icon{
		background: url("../../images/index_v1.0/suoke_logo.jpg") no-repeat center/contain;
		width: 111px;
		height: 42px;
	}
	.headerArea .add-icon{
		display: block;
		width: 18px;
		height: 18px;
		float: right;
		background: url("../../images/index_v1.0/setSome.png") no-repeat center center;
		background-size: cover;
	}
	.swiper-container{
  width: 100%;
  height: 100%;
	}
	.swiper-wrapper{
		height: 100%;
	}
	.swiper-slide{
		width: 74.67%!important;
    height: 150px;
    overflow: hidden;
		margin: auto;
		box-shadow: 0 1px 10px 0 #e6e6e6 ;
	}
	.card{
		background: url("../../images/index_v1.0/myBg.png") no-repeat center/cover;
		/* margin-left: -46px; */
		border-radius: 7px;
	}
	.weal{
		background: url("../../images/index_v1.0/weBg.png") no-repeat center/cover;
		border-radius: 7px;
    margin-left: -46px;
	}
	.swiper-slide>a{
		display: block;
		margin:0 auto;
		height: 100%;
		border-radius: 7px;
		overflow: hidden;
	}
	.swiper-slide>a>img{
		width: 100%;
		height: 100%;
	}
	.banner{
  width: 100%;
  height: 165px;
	background: #FFFFFF;
	margin-bottom: 10px;
}
.vir-item .item-text.phone-login{
	color: #E21F1F
}
.look_face{
	color: blue !important
}
</style>

</head>

<body style="background: #fff">
	<input type="hidden" value="${ctx}" id="contextPath" />
	<div class="headerArea">
		<span class="swiper-icon"></span>
		<span class="add-icon"></span>
	</div>
	<div class="banner">
		<div class="swiper-container">
			<div class="swiper-wrapper">
				<div class="swiper-slide weal">
					<div class="title">员工福利卡</div>
					<span class="logo-icon"></span>
					<p>中航物业：24000048754201898</p>
					<div class="price-extra">
						<label for="">福利余额：</label>
						<span>点击查看</span>
					</div>
        </div>
        <div class="swiper-slide card">
					<div class="left">
						<span class="build-name">楼宇通行卡</span>
						<div class="foot-info">
							<img class="nickPic" src="" alt="">
							<div class="mine-info">
								<span class="nickName">未登录</span>
								<span class="acountName"></span>
							</div>
						</div>
						<div class="code-info"><span class="tcode"></span> 点击出示二维码</div>
					</div>
					<div class="right">
						<span class="logo-icon"></span>
					</div>
				</div>
			</div>
			<!-- <div class="swiper-pagination"></div> -->
			<!-- 如果需要滚动条 -->
			<!-- <div class="swiper-scrollbar"></div> -->
		</div>
	</div>
	<div class="newmine-wp"></div>
	<div class="nav-wp">
		<a href="javascript:void(0)" class="nav-btn home ">
			<span class="icon"></span>
			<div class="name">首页</div>

		</a>
		<a href="javascript:void(0)" class="nav-btn service ">
			<span class="icon"></span>
			<div class="name">服务</div>

		</a>
		<a href="javascript:void(0)" class="nav-btn trade_area ">
			<span class="icon"></span>
			<div class="name"></div>
		</a>
		<a href="javascript:void(0)" class="nav-btn mine active">
			<span class="icon"></span>
			<div class="name">我的</div>
		</a>
	</div>
	<div class="cover">
		<div>
			<div class="part_1 hide">
				<span class="imgCode"></span>
				<p>二维码功能正在开发中</p>
			</div>	
			
			<div class="part_2 hide">
				<div class="qrcode_wrap hide">
					<p class="qrcode_tip">楼宇通行二维码</p>
					<div id="code"></div> 
					<div class="refresh_wrap">
						<p class="refresh"><img src="${ctx}/images/reload.png" alt="">手动刷新</p>
					</div>
				</div>
				<div class="nodata hide">
					<img src="${ctx}/images/qrcode_nodata.png" alt="">
					<p class="tip">抱歉，暂时无法生成通行二维码</p>
					<div class="error">
						<p class="p1">可能是由以下原因导致：</p>
						<p class="pp">登录账号无通行权限；</p>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script>
		var mySwiper = new Swiper('.swiper-container', {
			slidesPerView: 'auto',
			centeredSlides: true,
			spaceBetween: 20,
			longSwipesRatio: 0.3,
			touchRatio:1,
			paginationClickable: true,
			observer: true, //修改swiper自己或子元素时，自动初始化swiper
			observeParents: true, //修改swiper的父元素时，自动初始化swiper		
			allowTouchMove: true
			
		});
		// 开启拖动
		mySwiper.allowTouchMove = true;
	</script>
	<script type="text/javascript" src="${ctx }/scripts/lib/template-native.js"></script>
	<script type="text/javascript" src="${ctx }/scripts/common/jquery-1.11.3.min.js"></script>
	<script type="text/javascript" src="${ctx }/scripts/lib/plugins/qrcode/jquery.qrcode.min.js"></script>
	<script type="text/javascript" src="${ctx }/plugin/layer/mobile/layer.js?v=4.0"></script>
	<script type="text/javascript" src="${ctx }/scripts/wechat/newmine.js?v=2019-8-23"></script>
</body>

</html>