BIGEMPA Js API示例中心
<!DOCTYPE html>
<html>
<head>
<script src="http://www.bjxdny.cn/Public/common/js/jquery.min.js"></script>
<style type="text/css">
input {
width: 90px;
height: 32px;
}
#showMobilePreview {
z-index: 9999;
width: 400px;
height: 100%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
opacity: 1;
text-align: center;
}
.mobile_preview_header {
display: block;
position: absolute;
top: 0;
left: 0;
height: 53px;
width: 387px;
background: #eeeff2;
text-align: center;
line-height: 40px;
border-top-right-radius: 50px;
border-top-left-radius: 50px;
}
}
.mobile_preview_header_icon {
display: inline-block;
width: 65px;
height: 10px;
background: #c8c9cc;
border-radius: 9px;
vertical-align: middle;
margin-top: 18px;
}
.mobile_preview_frame {
width: 375px;
min-height: 309px;
/*height: 729px;*/
max-height: calc(100vh - 72px);
top: 33px;
left: 0;
border: 6px solid #eeeff2;
position: relative;
background-color: #fff;
display: block;
overflow: hidden;
}
#YuFrameMobilePreview {
border: none;
width: 375px;
height: 100%;
}
.mobile_preview_footer {
display: block;
position: absolute;
bottom: 0;
left: 0;
height: 52px;
width: 387px;
background: #eeeff2;
text-align: center;
line-height: 45px;
border-bottom-right-radius: 50px;
border-bottom-left-radius: 50px;
}
.mobile_preview_footer_icon {
display: inline-block;
width: 43px;
height: 43px;
background: #c8c9cc;
border-radius: 50%;
vertical-align: middle;
}
</style>
</head>
<body>
<!-- 手機訪問https://ok.zhangwei.fun/phone.html -->
<!-- <iframe src="" frameborder="0"></iframe> -->
<div id='showMobilePreview'>
<div class='mobile_preview_header'><i class='mobile_preview_header_icon'></i></div>
? ? ?? ??? <div class='mobile_preview_frame'><iframe id='YuFrameMobilePreview' name='YuFrameMobilePreview'
src="https://ok.zhangwei.fun/phone.html"></iframe>
</div>
? ? ?? ??? ?<div class='mobile_preview_footer'><i class='mobile_preview_footer_icon'></i></div>
</div>
</body>
<html>