onepage_mrhi/tm/template_dir/cmb_card.html

<{include file="header.html"}>
<{include file="nav.html"}>
<link rel="stylesheet" type="text/css" href="<{$web_cfg.cdn}>/public/static/css/animate.min.css" />
<div class="wrapper jsc-sidebar-content jsc-sidebar-pulled">

    <!---钛金卡图片 beign-->
    <div id="apppart1" class="card_cell card_cover_box" style="z-index:4;">
        <div class="vogue_card_box center fadeInUp"><img src="<{$web_cfg.cdn}>/public/static/img/vogue_card.png"></div>     
        <div class="activity_des fadeInUp">
            <p>Vogue钛金信用卡是《VOGUE服饰与美容》携手招商银行推出的高端专属信用卡，呈现给您精彩的时尚生活。持卡人时尚精品消费，独享9折优惠。</p>
        </div>
    </div>
    <!---钛金卡图片 end-->
    
    <!---持卡人尊享权益 beign-->
    <div id="apppart2" class="card_cell card_rights_box" style="z-index:3;">
        <div class="article_title center">持卡人尊享权益</div>
        <div class="vogue_list_box v_card_list">
            <dl class="d1">
                <a href="#">
                    <dt><img src="<{$web_cfg.cdn}>/public/static/img/list_img.jpg"></dt>
                    <dd>
                        <p class="list_title">安缦颐和酒店</p>
                        <p>每晚入住即享免费双人早餐。免费房型升级（视酒店预订情况）</p>
                    </dd>
                </a>
            </dl>
            <dl class="d2">
                <a href="#">
                    <dt><img src="<{$web_cfg.cdn}>/public/static/img/card_img_02.jpg"></dt>
                    <dd>
                        <p class="list_title">北京万达索芙特大酒店</p>
                        <p>入住三晚，支付两晚房费。（仅限门市价）</p>
                    </dd>
                </a>
            </dl>
            <dl class="d3">
                <a href="#">
                    <dt><img src="<{$web_cfg.cdn}>/public/static/img/card_img_03.jpg"></dt>
                    <dd style="padding-top:0px;">
                        <p class="list_title">香格里拉水疗</p>
                        <p>购买任意产品及理疗项目（不含水疗）享受八五折优惠 </p>
                    </dd>
                </a>
            </dl>
            <dl class="d4">
                <a href="#">
                    <dt><img src="<{$web_cfg.cdn}>/public/static/img/card_img_04.jpg"></dt>
                    <dd style="padding-top:0px;">
                        <p class="list_title">TONI&GUY</p>
                        <p>周一至周四店内消费服务项目尊享九折优惠（不适用于产品消费）</p>
                    </dd>
                </a>
            </dl>
            <dl class="d5">
                <a href="#">
                    <dt><img src="<{$web_cfg.cdn}>/public/static/img/card_img_05.jpg"></dt>
                    <dd>
                        <p class="list_title">EL WILLY</p>
                        <p>三菜午餐，三人同行，一人免费</p>
                    </dd>
                </a>
            </dl>
            <dl class="d6">
                <a href="#">
                    <dt><img src="<{$web_cfg.cdn}>/public/static/img/card_img_06.jpg"></dt>
                    <dd>
                        <p class="list_title">UCCASTORE</p>
                        <p> 在UCCASTORE购买艺术衍生品和下列品牌产品，可尊享9折优惠</p>
                    </dd>
                </a>
            </dl>
        </div>
        <br>
        <div class="clear"></div>
        <div class="up_icon center" style="display:none"><img src="<{$web_cfg.cdn}>/public/static/img/up_icon.png"></div>
        <br>
    </div>
    <!---持卡人尊享权益 end-->
    
    
    <!---专属活动 beign-->
    <div id="apppart3" class="card_cell" style="z-index:2;">
    	<div class="article_title center">专属活动</div>
        <div class="vogue_top_list">
            <dl class="d1">
                <dt><img src="<{$web_cfg.cdn}>/public/static/img/v_card_img1.jpg"></dt>                
            </dl>
            <dl class="d2">
                <dt><img src="<{$web_cfg.cdn}>/public/static/img/v_card_img2.jpg"></dt>                
            </dl>
            <dl class="d3">
                <dt><img src="<{$web_cfg.cdn}>/public/static/img/v_card_img3.jpg"></dt>                
            </dl>
        </div>
        <div class="clear"></div>
    </div>
    <!---专属活动 beign-->
    
    <!---钛金卡申请 beign-->
    <div id="apppart3" class="card_cell card_apply_box" style="z-index:1;">
        <div class="article_title center">&nbsp;&nbsp;</div>
        <div class="article_content card_apply">即日起申请VOGUE钛金信用卡可享第一年免年费礼遇。持卡人时尚精品消费，独享9折优惠。
活动详情可致电招商银行信用卡服务热线400-820-5555。</div>
        <br>
        <div class="submit_cell card_apply_submit" style="border:none; margin:10px; font-size:1.6em"><a href="https://ccclub.cmbchina.com/mca/MPreContract.aspx?cardsel=7802" class="submit_btn_style">马上申请</a></div>
    </div>
    <!---钛金卡申请 end-->
    
    <div class="up_posi">
    	<div class="up_icon center"><img src="<{$web_cfg.cdn}>/public/static/img/up_icon.png"></div>
    </div>
    
</div>

</div>

<div class="a_cover"></div>

<{include file="left.html"}>

<script>
//loading效果重新加载页面后只执行一次
$("#munu_icon").one("click",function(){
	loading();
});
function loading(){
	$("#munu_icon span").fadeOut().delay(400).fadeIn();
	$("#munu_icon #loading").fadeIn().delay(25).fadeOut();
}

//loading
var count = 0;
function rotate() {
var elem2 = document.getElementById('loading');
elem2.style.MozTransform = 'scale(0.3) rotate('+count+'deg)';
elem2.style.WebkitTransform = 'scale(0.3) rotate('+count+'deg)';
if (count==360) { count = 0 }
count+=45;
window.setTimeout(rotate, 100);
}
window.setTimeout(rotate, 100);
KISSY.use('node, io, gallery/datalazyload/2.0/index', function (S, Node, IO, Datalazyload) {
	new Datalazyload({
		load: function(el){
			var requesrUrl = $(el).data('request-url');
			var page = $(el).data('page') + 1;
			var totals = $(el).data('totals');
			if (!requesrUrl) {
				return false;
			}
			
			if (page >= totals) $('.up_icon').hide();
			if (page > totals) return false;
			
			IO.get(
				requesrUrl
				, {page: page}
				, function (data) {
					if (data.ok) {
						$('#loadPage').data('page', page);
						$(".vogue_top_list2").append(data.msg);
					}
				}
				, 'json'
			);
		}
	});
});



//--------
var index = 0;
var isAnimate = false;
var isModal = false;
var yStart;
var yEnd;
var isfirst =false;

$(document).bind("touchstart", function(e) {
	var touch = e.originalEvent.touches[0];
	yStart = touch.pageY;
});
$(document).bind("touchmove", function(e) {
	event.preventDefault();	
	var touch = e.originalEvent.touches[0];
	yEnd = touch.pageY;
	if(isAnimate || isModal) return false;
	if (yEnd - 100> yStart & yEnd > yStart){ //down
		if(index == 0) return false;
		setPage(1,--index)
	} else if (yEnd + 100 < yStart & yEnd < yStart){ //up
		if(index == 3) return false;
		setPage(0,++index);
	}
});

function nextpage()
{
    if(isAnimate) return false;
	setPage(0,++index)	
}

$(".up_icon").click(function(){
	if(isAnimate) return false;
	setPage(0,++index);	
});


setBtn()
function setBtn(){
	$(".up_icon").css("opacity",0);
	if(index == 0){
		$(".up_icon").css("bottom","3%").css("opacity","1");
	}else if(index == 3){
		$(".up_icon").css("bottom","-9999px");
	}else{
		$(".up_icon").css("bottom","3%");
	}
}
function setPage(dir,page){
    if(isfirst==false)
    {
        isfirst=true;
        $(".card_cell").css("display","block");		
    }
	
    
	isAnimate = true;
	if(dir == 1){
		$("#apppart"+(page+1)).animate({"top":"0"},380);
	}else{
        $("#apppart"+page).animate({"top":"-150%"},380);

	}
	if(page == 1){
		$(".v_card_list .d1").addClass("fadeInUp");
		$(".v_card_list .d2").addClass("fadeInUp");
		$(".v_card_list .d3").addClass("fadeInUp");
		$(".v_card_list .d4").addClass("fadeInUp");
		$(".v_card_list .d5").addClass("fadeInUp");
		$(".v_card_list .d6").addClass("fadeInUp");
	}
	if(page == 2){
		$(".vogue_top_list .d1").addClass("fadeInUp");
		$(".vogue_top_list .d2").addClass("fadeInUp");
		$(".vogue_top_list .d3").addClass("fadeInUp");
	}
	if(page == 3){
		$(".card_apply").addClass("fadeInUp");
		$(".card_apply_submit").addClass("fadeInUp");
		
	}
	setBtn();
	setTimeout(function(){
		if(isAnimate) isAnimate = false;
		$(".up_icon").animate({opacity:1})
		
	},550);
}
</script>




<{include file="bottom.html"}>