<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>
	<meta http-equiv="Cache-Control" content="no-cache"/>
	<title>安卓 DOCER WPS </title>
	<link rel="stylesheet" href="../css/main.css">
	<link rel="stylesheet" href="../css/swiper.min.css">
	<style>
		html{ background: #ebebeb; }
		body{ height:100%;}
		.maskbg { opacity: 1; }
		.swipe-wrap img { opacity: 0; }
	</style>
</head>
<body ms-controller="PreviewCtrl" class="body">


<!-- 预览 开始
<div class="swipe" id="slider">
	<div class="swipe-wrap">
		<div ms-repeat-el="previewImages">
			<img ms-src="el.url"  ms-visible="el.isLoaded">
			<div class="preview_loading" ms-visible="!el.isLoaded">
				<div class="loading"></div>
			</div>
		</div>
	</div>
	<div class="viewinfo">
		<div class="pagination">
			<span class="pag_dotted" ms-repeat-el="previewImages" ms-class-1="pag_dotted_active: $index === previewIndex"></span>
		</div>
		<a href="javascript:void(0)" class="btn_used" ms-click="applyTemplate"><span>立即使用</span></a>
	</div>
	<div class="maskbg"></div>
</div>
预览 结束 -->

<div class="preivew">
	<!-- 模板信息 start -->
	<div class="preview_info">
		<div>
			<div class="preview_title" ms-text="mbInfo.name"></div>
			<div class="preview_txt">
				<span>浏览量：<span ms-text="mbInfo.browseNumber"></span>次</span>
				<span>{{mbInfo.filesize/1024|number(2)}}</span>KB
				<span>|</span>
				<span ms-text="mbInfo.author"></span>
			</div>
			<span class="preview_bg"></span>
		</div>
	</div>
	<!-- 模板信息 end -->
	<!--广告链接 start-->
	<div class="ad_link" ms-click="clickAdsLink(adInfo.link, '')" ms-if="isShowAdsLink">
		<span class="ad_text_left" ms-text="adInfo.text" ></span>
		<span class="ad_text_right">立即领取</span>
	</div>
	<!--广告链接 end-->
	<!-- 预览 开始 -->
	<!-- <div class="swipe" id="slider">
		<div class="swipe-wrap">
			<div ms-repeat-el="previewImages" style="text-aglne:center">
				<img style="max-width: 100%;max-height: 100%;" ms-src="el.url"  ms-visible="el.isLoaded">
				<img src="../css/img/preview_loading.png" style="max-width: 100%;max-height: 100%;">
				<div class="preview_loading" ms-visible="!el.isLoaded">
					<div class="loading"></div>
				</div>
			</div>
		</div>
	</div> -->
	<div ms-class="{{isShowAdsLink? 'swipe has_ad':'swipe'}}" id="slider" ms-visible="!isShowBigPicPreview" style="visibility: visible; " >
        <div class="swiper-container" id="slider_p" style="height: 100%;">
            <div class="swiper-wrapper">
                <div class="swiper-slide" ms-repeat-el="previewImages">
                    <div ms-click="showBigPicPreview()"><img ms-src="el.url" style="max-height:100%;max-width:100%;position:absolute;top:0;left: 0;right: 0;bottom: 0;margin: auto;"></div>
                    <!-- <img src="../css/img/preview_loading.png" style="max-height: 100%;"> -->
                </div>
            </div>
        </div>
	</div>
	<div class="viewinfo">
		<div class="pagination" id="page" ms-visible="!isShowBigPicPreview && previewImages.length > 1"></div>
		<div class="pagination_replace_holder" ms-visible="isShowBigPicPreview || previewImages.length <= 1"></div>
		<div class="pagination" style="display:none;">
			<!-- 活动状态添加: pag_dotted_active -->
			<span class="pag_dotted" ms-repeat-el="previewImages" ms-class-1="pag_dotted_active: $index === previewIndex"></span>
		</div>
		<!-- <a href="javascript:void(0)" class="btn_used"><span>立即使用</span></a> -->
		<div class="preview_btn_foot" ms-visible="loaded" style="display:none;">
			<div class="preview_btn_all" ms-visible="mbInfo.is_docer_vip">
				<a href="javascript:void(0);" class="mouth_btn" ms-on-tap="openMonthCard()"><img align="absmiddle" src="../css/img/mem_btn_logo.png" />续费会员</a>
				<a ms-visible="mbInfo.free_times > 0" href="javascript:void(0);" class="used_btn" ms-on-tap="applyTemplate">免费使用</a>
				<a ms-visible="mbInfo.free_times == 0" href="javascript:void(0);" class="used_btn" ms-on-tap="applyTemplate">立刻使用
					<span ms-visible="mbInfo.price&&mbInfo.price!=0">({{mbInfo.price / 100}}元)</span>
				</a>
			</div>
			<div class="preview_btn_all" ms-visible="!mbInfo.is_docer_vip">
				<a href="javascript:void(0);" class="mouth_btn" ms-on-tap="openMonthCard()"><img align="absmiddle" src="../css/img/mem_btn_logo.png" />会员全场免费</a>
				<a href="javascript:void(0);" class="used_btn" ms-on-tap="applyTemplate">立刻使用
					<span ms-visible="mbInfo.price&&mbInfo.price!=0">({{mbInfo.price / 100}}元)</span>
				</a>
			</div>
		</div>
	</div>
	<!-- 预览 结束 -->

</div>
<!-- 大图预览 Start-->
<div class="preview_big" ms-visible="isShowBigPicPreview" ms-click="closeShowBigPicPreview()">
	<div class="swiper-container" id="preview_big_swiper_container">
			<div class="swiper-wrapper">
					<div class="swiper-slide" ms-repeat-el="previewImages">
							<img ms-src="el.url" style="max-height:100%;max-width:100%;position:absolute;top:0;left: 0;right: 0;bottom: 0;margin: auto;">
							<!-- <img src="../css/img/preview_loading.png" style="max-height: 100%;"> -->
					</div>
			</div>
	</div>
	<div class="pagination" id="big_page" ms-visible="previewImages.length > 1"></div>
</div>
<!-- 大图预览 End -->
</body>
<script type="text/javascript" src="../js/publish/avalon.js"></script>
<script type="text/javascript" src="../js/publish/load.js"></script>
<script type="text/javascript">
	load('preview');
</script>
</html>
