<!--_meta 作为公共模版分离出去-->
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link rel="Bookmark" href="favicon.ico" >
<link rel="Shortcut Icon" href="favicon.ico" />
<!--[if lt IE 9]>
<script type="text/javascript" src="lib/html5.js"></script>
<script type="text/javascript" src="lib/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/H-ui.admin.css" />
<link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.8/iconfont.css" />
<link rel="stylesheet" type="text/css" href="static/h-ui.admin/skin/default/skin.css" id="skin" />
<link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/style.css" />
<!--[if IE 6]>
<script type="text/javascript" src="http://lib.h-ui.net/DD_belatedPNG_0.0.8a-min.js" ></script>
<script>DD_belatedPNG.fix('*');</script><![endif]-->
<!--/meta 作为公共模版分离出去-->
<style>
.cont{
position: absolute;
top: 0;
left: 0;
100%;
height: 100%;
}
nav{
position: absolute;
top: 0;
left: 0;
100%;
height: 40px;
line-height: 40px;
padding: 0 20px;
font-weight: 700;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
h1.title{
position: absolute;
left: 20px;
line-height: 40px;
top: 0;
padding: 0;
font-size: 20px;
}
.page-num{
text-align: center;
}
.btn-cont{
position: absolute;
right: 20px;
top: 0;
}
/* .btn-cont a{
position:relative;
60px;
text-align: center;
}
.btn-cont a:hover p{
display: block;
}*/
.btn-cont p{
/*display: none;*/
/*position: absolute;*/
top: 32px;
left:0;
100%;
text-align: center;
}
.img-cont{
position: relative;
80%;
height: 100%;
padding: 40px 20px 20px;
font-size: 0;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
.img-box{
100%;
height: 100%;
overflow: auto;
text-align: center;
background: #333;
}
.img-cont img{
auto;
height: 100%;
}
.a-r-btn{
position: absolute;
right: 20px;
bottom: 20px;
}
.a-r-btn .btn{
display: block;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="cont">
<nav class="nav">
<h1 class="title">电子回执单</h1>
<p class="page-num">1/1</p>
<div class="btn-group btn-cont">
<a class="btn radius" id="download"><i class="Hui-iconfont Hui-iconfont-down"></i><p>下载</p></a>
<a class="btn radius" id="print"><i class="Hui-iconfont Hui-iconfont-dayinji"></i><p>打印</p></a>
</div>
</nav>
<section class="img-cont">
<div class="img-box">
<img src="http://images.57us.com/p8/up/2017/0809/201708092245517995.jpg" alt="回执单图片" class="radius" id="receiptImg">
</div>
</section>
<div class="a-r-btn">
<a class="btn radius" id="increase"><i class="Hui-iconfont Hui-iconfont-add"></i></a>
<a class="btn radius" id="narrow"><i class="Hui-iconfont Hui-iconfont-jianhao"></i></a>
</div>
</div>
<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="lib/layer/2.4/layer.js"></script>
<!-- <script type="text/javascript" src="lib/jquery.validation/1.14.0/jquery.validate.js"></script>
<script type="text/javascript" src="lib/jquery.validation/1.14.0/validate-methods.js"></script>
<script type="text/javascript" src="lib/jquery.validation/1.14.0/messages_zh.js"></script>
<script type="text/javascript" src="static/h-ui/js/H-ui.js"></script> -->
<script type="text/javascript" src="static/h-ui.admin/js/H-ui.admin.page.js"></script>
<!--/_footer /作为公共模版分离出去-->
<!--请在下方写此页面业务相关的脚本-->
<script>
$(function(){
var imgHeight = 100;
$("#increase").on("click",function(){
imgHeight += 10;
$("#receiptImg").css({
"height":imgHeight+"%"
});
layer.msg(imgHeight+"%");
});
$("#narrow").on("click",function(){
imgHeight -= 10;
if(imgHeight <= 100){
imgHeight = 100;
}
$("#receiptImg").css({
"height":imgHeight+"%"
});
layer.msg(imgHeight+"%");
});
$("#print").on("click",function(){
var currDoc = $("body").html();
var printDoc = $(".img-cont").html();
$("body").html(printDoc);
$("#receiptImg").css({
"width":"100%",
"height":"auto"
});
$("#receiptImg").removeClass("radius");
window.print();
$("body").html(currDoc);
});
$("#download").on("click",function(){
var url = $("#receiptImg").attr("src");
var evt = document.createEvent("HTMLEvents");
evt.initEvent("click", false, false);
$(this).attr({
"href":url,
"download":"回执单"
});
this.dispatchEvent(evt);
});
});
</script>
</body>
</html>
<!--_meta 作为公共模版分离出去--><!DOCTYPE HTML><html><head> <meta charset="utf-8"> <meta name="renderer" content="webkit|ie-comp|ie-stand"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> <meta http-equiv="Cache-Control" content="no-siteapp" /> <link rel="Bookmark" href="favicon.ico" > <link rel="Shortcut Icon" href="favicon.ico" /> <!--[if lt IE 9]> <script type="text/javascript" src="lib/html5.js"></script> <script type="text/javascript" src="lib/respond.min.js"></script> <![endif]--> <link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css" /> <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/H-ui.admin.css" /> <link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.8/iconfont.css" />
<link rel="stylesheet" type="text/css" href="static/h-ui.admin/skin/default/skin.css" id="skin" /> <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/style.css" /> <!--[if IE 6]> <script type="text/javascript" src="http://lib.h-ui.net/DD_belatedPNG_0.0.8a-min.js" ></script> <script>DD_belatedPNG.fix('*');</script><![endif]--> <!--/meta 作为公共模版分离出去--> <style> .cont{ position: absolute; top: 0; left: 0; 100%; height: 100%; } nav{ position: absolute; top: 0; left: 0; 100%; height: 40px; line-height: 40px; padding: 0 20px; font-weight: 700; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } h1.title{ position: absolute; left: 20px; line-height: 40px; top: 0; padding: 0; font-size: 20px; } .page-num{ text-align: center; } .btn-cont{ position: absolute; right: 20px; top: 0; }/* .btn-cont a{ position:relative; 60px; text-align: center; } .btn-cont a:hover p{ display: block; }*/ .btn-cont p{ /*display: none;*/ /*position: absolute;*/ top: 32px; left:0; 100%; text-align: center; } .img-cont{ position: relative; 80%; height: 100%; padding: 40px 20px 20px; font-size: 0; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } .img-box{ 100%; height: 100%; overflow: auto; text-align: center; background: #333; } .img-cont img{ auto; height: 100%; } .a-r-btn{ position: absolute; right: 20px; bottom: 20px; } .a-r-btn .btn{ display: block; margin-top: 10px; } </style></head><body><div class="cont"> <nav class="nav"> <h1 class="title">电子回执单</h1> <p class="page-num">1/1</p> <div class="btn-group btn-cont"> <a class="btn radius" id="download"><i class="Hui-iconfont Hui-iconfont-down"></i><p>下载</p></a> <a class="btn radius" id="print"><i class="Hui-iconfont Hui-iconfont-dayinji"></i><p>打印</p></a> </div> </nav> <section class="img-cont"> <div class="img-box"> <img src="http://images.57us.com/p8/up/2017/0809/201708092245517995.jpg" alt="回执单图片" class="radius" id="receiptImg"> </div> </section> <div class="a-r-btn"> <a class="btn radius" id="increase"><i class="Hui-iconfont Hui-iconfont-add"></i></a> <a class="btn radius" id="narrow"><i class="Hui-iconfont Hui-iconfont-jianhao"></i></a> </div></div><!--_footer 作为公共模版分离出去--><script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script><script type="text/javascript" src="lib/layer/2.4/layer.js"></script>
<!-- <script type="text/javascript" src="lib/jquery.validation/1.14.0/jquery.validate.js"></script><script type="text/javascript" src="lib/jquery.validation/1.14.0/validate-methods.js"></script><script type="text/javascript" src="lib/jquery.validation/1.14.0/messages_zh.js"></script><script type="text/javascript" src="static/h-ui/js/H-ui.js"></script> --><script type="text/javascript" src="static/h-ui.admin/js/H-ui.admin.page.js"></script>
<!--/_footer /作为公共模版分离出去-->
<!--请在下方写此页面业务相关的脚本--><script> $(function(){ var imgHeight = 100; $("#increase").on("click",function(){ imgHeight += 10; $("#receiptImg").css({ "height":imgHeight+"%" }); layer.msg(imgHeight+"%"); }); $("#narrow").on("click",function(){ imgHeight -= 10; if(imgHeight <= 100){ imgHeight = 100; } $("#receiptImg").css({ "height":imgHeight+"%" }); layer.msg(imgHeight+"%"); }); $("#print").on("click",function(){ var currDoc = $("body").html(); var printDoc = $(".img-cont").html(); $("body").html(printDoc); $("#receiptImg").css({ "width":"100%", "height":"auto" }); $("#receiptImg").removeClass("radius"); window.print(); $("body").html(currDoc); }); $("#download").on("click",function(){ var url = $("#receiptImg").attr("src"); var evt = document.createEvent("HTMLEvents"); evt.initEvent("click", false, false); $(this).attr({ "href":url, "download":"回执单" }); this.dispatchEvent(evt); }); });</script></body></html>