You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
211 lines
5.1 KiB
211 lines
5.1 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Document</title>
|
|
<link rel="stylesheet" type="text/css" href="./assets_v2/css/clientSet/common.css?v={$smarty.const.CSS_JS_VERSION}3"/>
|
|
|
|
</head>
|
|
<style>
|
|
.cata-loading-wrapper{
|
|
display: none;
|
|
}
|
|
.cata-loading-wrapper.active-loading{
|
|
position: fixed;
|
|
width: 626px;
|
|
height: auto;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
display: block;
|
|
}
|
|
#cata-loading-img{
|
|
display: block;
|
|
margin: 0 auto;
|
|
}
|
|
.cata-loading-desc{
|
|
height: 20px;
|
|
font-family: Microsoft YaHei UI;
|
|
font-size: 16px;
|
|
font-weight: normal;
|
|
line-height: normal;
|
|
letter-spacing: 0px;
|
|
color: #fff;
|
|
width: 100%;
|
|
text-align: center;
|
|
margin-top: 9px;
|
|
}
|
|
@keyframes loadinrotate {
|
|
from { transform: rotate(0deg); }
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
#cata-loading-percent{
|
|
height: 20px;
|
|
font-family: Microsoft YaHei UI;
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
line-height: normal;
|
|
letter-spacing: 0px;
|
|
color: #fff;
|
|
width: 100%;
|
|
text-align: center;
|
|
margin-top: 16px;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
.rotating-element {
|
|
width: 32px;
|
|
height: 32px;
|
|
animation: loadinrotate 1.5s linear infinite;
|
|
-webkit-animation: loadinrotate 1.5s linear infinite;
|
|
-ms-animation: loadinrotate 1.5s linear infinite;
|
|
transform-origin: center;
|
|
}
|
|
.no_waitbtn{
|
|
font-size: 14px;
|
|
font-weight: normal;
|
|
line-height: normal;
|
|
text-align: center;
|
|
letter-spacing: 0.08em;
|
|
color: #FFFFFF;
|
|
width: 180px;
|
|
height: 46px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 14px 12px;
|
|
border-radius: 4px;
|
|
background: rgba(255, 255, 255, 0);
|
|
box-sizing: border-box;
|
|
border: 1px solid rgba(255, 255, 255, 0.7);
|
|
box-sizing: border-box;
|
|
margin: 0 auto;
|
|
margin-top: 46px;
|
|
}
|
|
.load_mask{
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #474852;
|
|
position: fixed;
|
|
z-index: -1;
|
|
}
|
|
|
|
/* 弹出框 */
|
|
.notice_dialog{
|
|
width: 100%;
|
|
height: 100%;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
background: rgba(0,0,0,.5);
|
|
z-index: 999;
|
|
}
|
|
.dialog_wrap{
|
|
width: 490px;
|
|
height: 262px;
|
|
background: #fff;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
border-radius: 10px;
|
|
text-align: center;
|
|
padding-top: 28px;
|
|
box-sizing: border-box;
|
|
}
|
|
.dialog_wrap h3{
|
|
font-family: MiSans;
|
|
font-size: 22px;
|
|
font-weight: 600;
|
|
line-height: 28px;
|
|
letter-spacing: 1.04px;
|
|
color: #000000;
|
|
margin: 0;
|
|
margin-bottom: 24px;
|
|
}
|
|
.dialog_wrap p{
|
|
font-size: 12px;
|
|
color: #666666;
|
|
}
|
|
.close_icon{
|
|
width: 16px;
|
|
height: 16px;
|
|
position: absolute;
|
|
top: 28px;
|
|
right: 28px;
|
|
cursor: pointer;
|
|
}
|
|
</style>
|
|
<body>
|
|
<div class="load_mask hide">
|
|
<div class="cata-loading-wrapper active-loading">
|
|
<!-- {$smarty.const.CSS_URL} -->
|
|
<!-- /newai -->
|
|
<img src="./assets_v2/images/clientSet/cata_loading.png" id="cata-loading-img" class="rotating-element">
|
|
<div id="cata-loading-percent"><div>努力排版中…<span class="loading-dot">…</span></div><span class="loading-percent">0%</span></div>
|
|
<div class="cata-loading-desc">约需30秒，生成后免费预览，满意再下载</div>
|
|
<div class="no_waitbtn">不等了，完成后通知我</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 排版提醒弹框 -->
|
|
<div class="notice_dialog hide">
|
|
<div class="dialog_wrap">
|
|
<h3>排版完成会提醒</h3>
|
|
<img class="close_icon" src="./assets_v2/images/clientSet/close.svg" alt="">
|
|
<img src="./assets_v2/images/clientSet/qrcode_ex.svg" alt="">
|
|
<p>微信扫码关注公众号</p>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</body>
|
|
<script>
|
|
// 开启loading效果
|
|
// loadingInit()
|
|
|
|
|
|
var loadingtimer = null
|
|
var loading_countnum = 0
|
|
function getRandom(min, max) {
|
|
return Math.floor(Math.random() * (max - min + 1)) + min;
|
|
}
|
|
|
|
function initCataLoading() {
|
|
loading_countnum = 0
|
|
clearInterval(loadingtimer)
|
|
loadingtimer = setInterval(function(){
|
|
if(loading_countnum < 99) {
|
|
loading_countnum += getRandom(1, 5)
|
|
}
|
|
if(loading_countnum >= 99) {
|
|
loading_countnum = 99
|
|
}
|
|
$('#cata-loading-percent').find('.loading-percent').text(loading_countnum+'%')
|
|
}, 800)
|
|
}
|
|
|
|
|
|
function loadingInit() {
|
|
$('.cata-loading-wrapper').addClass('active-loading')
|
|
// $('.container-catalogue-3').addClass('active-loading')
|
|
initCataLoading()
|
|
}
|
|
|
|
function clearLoading() {
|
|
$('.cata-loading-wrapper').removeClass('active-loading')
|
|
// $('.container-catalogue-3').removeClass('active-loading')
|
|
$('.header-page-path-tag').remove();
|
|
loading_countnum = 0
|
|
clearInterval(loadingtimer)
|
|
}
|
|
|
|
// 关闭弹框
|
|
$('.close_icon').click(function(){
|
|
$('.notice_dialog').hide()
|
|
})
|
|
|
|
</script>
|
|
</html>
|