master

分支 (2)

管理

管理

master

dev

chlidapp
/
order_coupon.html

<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui"/>
	<meta name="apple-mobile-web-app-capable" content="yes"/>
	<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
	<meta name="format-detection" content="telephone=no, email=no"/>
	<meta charset="UTF-8">
	<title>优惠卷</title>
	<link rel="stylesheet" href="themes/css/core.css">
	<link rel="stylesheet" href="themes/css/icon.css">
	<link rel="stylesheet" href="themes/css/home.css">
	<link rel="icon" type="image/x-icon" href="favicon.ico">
	<link href="iTunesArtwork@2x.png" sizes="114x114" rel="apple-touch-icon-precomposed">
	<style type="text/css">
			/*仿京东页面优惠卷样式*/
			body{
				background-color: #efeff4;
			}
			.tab-panel-item{
				background-color: #efeff4;
			}
			p{
				color: #999;
				font-size: 14px;
			}
			.fl{float: left;}
			.fr{float: right;}

			.coupon_voucher2_main {
				width: 100%;
				height: auto;
			    padding: 10px;
			    background-color: white;
			    margin-bottom: 1rem;
		    }
		    .coupon_voucher2_view {
			   width: 40%;
			   text-align: center;
			   /*background-color: salmon;*/
			}
			.coupon_voucher2_info {
			  width: 58%;
			  /*background-color: sandybrown;*/
			}

			.coupon_voucher2_info_label {
			   margin-top: 1rem;
			}
			.coupon_voucher2_info_date {

			}
			.coupon_voucher2_view_price i{
			    vertical-align: top;
			    position: relative;
			    top: 5px;
			    margin: 10px 2px;
			}
			.coupon_voucher2_view_price strong{
				font-size: 45px;
			    font-weight: 700;
			}
			/*优惠卷顶部横线*/
			.yhj_topbann{
				 width: 100%;
				 height: 5px;
				 background-color: #999;
				 border-top-left-radius: 5px;
				 border-top-right-radius: 5px;
			}
			/*使用规则样式*/
			.use_rule_div{
				padding: 10px;
				width: 100%;
				/*background-color: salmon;*/
				text-align: right;
			}
			.use_rule{
			    color: #e93b3d;
			}
			/*未使用颜色*/
			.un_use_color{
		   		 color: #53c7ca;
			}
			.un_use_color_bg{
				background-color:#53c7ca ;
			}
	</style>
</head>
<body>

	<header class="aui-header-default aui-header-fixed aui-header-bg">
		<a href="javascript:history.back(-1)" class="aui-header-item">
			<i class="aui-icon aui-icon-back-white"></i>
		</a>
		<div class="aui-header-center aui-header-center-clear">
			<div class="aui-header-center-logo">
				<div class="aui-car-white-Typeface">优惠卷</div>
			</div>
		</div>
		<a href="#" class="aui-header-item-icon"   style="min-width:0">
			<!--<i class="aui-icon aui-icon-search"></i>-->
		</a>
	</header>

	<section class="aui-myOrder-content">
		<div class="m-tab demo-small-pitch" data-ydui-tab>
			<div class="aui-myOrder-fix">
				<ul class="tab-nav">
					<li class="tab-nav-item tab-active"><a href="javascript:;">可使用</a></li>
					<li class="tab-nav-item"><a href="javascript:;">不可用</a></li>
				</ul>
			</div>
			<div class="tab-panel" >
				<div class="tab-panel-item tab-active" 	>
					<div class="aui-list-product-box aui-list-product-box-clear">
						<div class="use_rule_div">
							<a href="" class="use_rule">使用规则</a>
						</div>

						<!--内容开始-->
						<a href="#">
							<div class="yhj_topbann un_use_color_bg"></div>
							<div href="#" class="coupon_voucher2_main clearfix">
								<div class="coupon_voucher2_view fl">
									<p class="coupon_voucher2_view_price un_use_color"><i>¥</i><strong>30</strong></p>
									<p class="coupon_voucher2_view_des un_use_color">满199元可用</p>
								</div>
								<div class="coupon_voucher2_info fr">
									<p class="coupon_voucher2_info_text">
										仅可购买指定课程
									</p>
									<p class="coupon_voucher2_info_label">
										<span>可叠加</span> <span>可与活动折扣叠加使用</span>
									</p>
									<p class="coupon_voucher2_info_date">
										2017-12-20 - 2018-01-03
									</p>
								</div>
							</div>
						</a>
						<!--***END****-->
						<a href="#">
							<div class="yhj_topbann un_use_color_bg"></div>
							<div href="#" class="coupon_voucher2_main clearfix">
								<div class="coupon_voucher2_view fl ">
									<p class="coupon_voucher2_view_price un_use_color"><i>¥</i><strong>30</strong></p>
									<p class="coupon_voucher2_view_des un_use_color">满199元可用</p>
								</div>
								<div class="coupon_voucher2_info fr">
									<p class="coupon_voucher2_info_text">
										仅可购买指定课程
									</p>
									<p class="coupon_voucher2_info_label">
										<span>可叠加</span> <span>可与活动折扣叠加使用</span>
									</p>
									<p class="coupon_voucher2_info_date">
										2017-12-20 - 2018-01-03
									</p>
								</div>
							</div>
						</a>
					</div>
				</div>
				<div class="tab-panel-item">
					<div class="aui-list-product-box aui-list-product-box-clear">
						<div class="use_rule_div">
							<a href="" class="use_rule">使用规则</a>
						</div>

						<!--内容开始-->
						<a href="#">
							<div class="yhj_topbann"></div>
							<div href="#" class="coupon_voucher2_main clearfix">
								<div class="coupon_voucher2_view fl">
									<p class="coupon_voucher2_view_price "><i>¥</i><strong>30</strong></p>
									<p class="coupon_voucher2_view_des ">满199元可用</p>
								</div>
								<div class="coupon_voucher2_info fr">
									<p class="coupon_voucher2_info_text">
										仅可购买指定课程
									</p>
									<p class="coupon_voucher2_info_label">
										<span>可叠加</span> <span>可与活动折扣叠加使用</span>
									</p>
									<p class="coupon_voucher2_info_date">
										2017-12-20 - 2018-01-03
									</p>
								</div>
							</div>
						</a>
						<!--***END****-->
						<a href="#">
							<div class="yhj_topbann"></div>
							<div href="#" class="coupon_voucher2_main clearfix">
								<div class="coupon_voucher2_view fl">
									<p class="coupon_voucher2_view_price "><i>¥</i><strong>30</strong></p>
									<p class="coupon_voucher2_view_des ">满199元可用</p>
								</div>
								<div class="coupon_voucher2_info fr">
									<p class="coupon_voucher2_info_text">
										仅可购买指定课程
									</p>
									<p class="coupon_voucher2_info_label">
										<span>可叠加</span> <span>可与活动折扣叠加使用</span>
									</p>
									<p class="coupon_voucher2_info_date">
										2017-12-20 - 2018-01-03
									</p>
								</div>
							</div>
						</a>
					</div>
				</div>


			</div>
		</div>
	</section>


	<script type="text/javascript" src="themes/js/jquery.min.js"></script>
	<script type="text/javascript" src="themes/js/aui.js"></script>
	<script type="text/javascript" >
        /**
         * Javascript API调用Tab
         */
        !function ($) {
            var $tab = $('#J_Tab');

            $tab.tab({
                nav: '.tab-nav-item',
                panel: '.tab-panel-item',
                activeClass: 'tab-active'
            });

			/*
			 $tab.find('.tab-nav-item').on('open.ydui.tab', function (e) {
			 console.log('索引：%s - [%s]正在打开', e.index, $(this).text());
			 });
			 */

            $tab.find('.tab-nav-item').on('opened.ydui.tab', function (e) {
                console.log('索引：%s - [%s]已经打开了', e.index, $(this).text());
            });
        }(jQuery);
	</script>

</body>
</html>