Browse Source

增加loading、补充上传进度条、状态显示、下载页面布局修改

master
zq 2 weeks ago
parent
commit
29a28dbdf1
  1. BIN
      assets_v2/images/clientSet/cata_loading.png
  2. 1
      assets_v2/images/clientSet/close.svg
  3. 1
      assets_v2/images/clientSet/qrcode_ex.svg
  4. 1
      assets_v2/images/clientSet/uploadSuccess.svg
  5. 98
      assets_v2/js/clientSet/fixedTemUpload.js
  6. 365
      fixedTemUpload.html
  7. 211
      loading.html
  8. 2709
      pay.html
  9. 31
      report.html
  10. 207
      selfBulid.html

BIN
assets_v2/images/clientSet/cata_loading.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 960 B

1
assets_v2/images/clientSet/close.svg

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="16" height="16" viewBox="0 0 16 16"><g><g></g><g><path d="M7.991000168981934,7.142599858840942L3.3242000689819333,2.4757998988409424C3.0887727189819336,2.2484165838409425,2.7145491589819337,2.2516684828409423,2.4831088789819336,2.483108758840942C2.2516685949819335,2.7145490388409423,2.2484166959819336,3.0887725988409422,2.475800018981934,3.3241999588409423L7.142000168981934,7.990999958840942L2.475800018981934,12.657800358840943C2.324140771981934,12.809352358840943,2.2648539129819336,13.030301358840942,2.3202722279819334,13.237417358840942C2.3756905419819336,13.444534358840942,2.5373946689819338,13.606353358840943,2.744472238981934,13.661918358840943C2.9515497689819337,13.717482358840943,3.1725407789819338,13.658352358840942,3.3242000689819333,13.506800358840943L7.991000168981934,8.839400058840942L12.657799768981933,13.506800358840943C12.809459768981933,13.658459358840942,13.030506768981933,13.717688358840942,13.237677768981934,13.662177358840943C13.444847768981933,13.606666358840942,13.606666768981933,13.444848358840943,13.662177768981934,13.237677358840942C13.717688768981933,13.030507358840943,13.658459768981933,12.809459358840943,13.506799768981933,12.657800358840943L8.839399768981934,7.990999958840942L13.506799768981933,3.3241999588409423C13.741079768981933,3.089755058840942,13.740944768981933,2.709779108840942,13.506499768981934,2.4754999288409425C13.272054768981933,2.2412207348409425,12.892079768981933,2.2413550428409423,12.657799768981933,2.4757998988409424L7.991000168981934,7.141999958840942L7.991000168981934,7.142599858840942Z" fill="#8C919D" fill-opacity="1"/></g></g></svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

1
assets_v2/images/clientSet/qrcode_ex.svg

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 17 KiB

1
assets_v2/images/clientSet/uploadSuccess.svg

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="14" height="14" viewBox="0 0 14 14"><g><g><rect x="0" y="0" width="14" height="14" rx="2" fill="#6E88F6" fill-opacity="1"/><rect x="0.5" y="0.5" width="13" height="13" rx="1.5" fill-opacity="0" stroke-opacity="1" stroke="#6E88F6" fill="none" stroke-width="1"/></g><g><g transform="matrix(0.7660444378852844,0.6427875757217407,-0.6427875757217407,0.7660444378852844,4.825818116139345,-5.258826190921752)"><path d="M10.231515525394286,4.000000073518628C10.231515525394286,4.000000073518628,10.823868285394287,4.000000073518628,10.823868285394287,4.000000073518628C11.151020385394286,3.99983879607,11.416216085394288,4.26504421,11.416216085394288,4.59219122C11.416216085394288,4.5922450999999995,11.416216085394288,4.59229892,11.416053185394286,4.59235293C11.416053185394286,4.59235293,11.414386485394287,10.7535648,11.414386485394287,10.7535648C11.414135885394288,11.0806384,11.148952685394287,11.345747,10.821867085394286,11.345910499999999C10.821867085394286,11.345910499999999,9.637162685394287,11.345910499999999,9.637162685394287,11.345910499999999C9.637162685394287,11.345910499999999,9.639002038394286,4.59235293,9.639002038394286,4.59235293C9.639252422594287,4.26526847,9.904431105394288,4.0001613831,10.231515525394286,4.000000073518628C10.231515525394286,4.000000073518628,10.231515525394286,4.000000073518628,10.231515525394286,4.000000073518628Z" fill-rule="evenodd" fill="#FFFFFF" fill-opacity="1"/></g><g transform="matrix(0.669130802154541,-0.7431446313858032,0.7431449890136719,0.6691304445266724,-4.917654321285227,4.8608527443112735)"><path d="M3.59235418,7.95304012298584C3.59235418,7.95304012298584,4.1863285999999995,7.95304012298584,4.1863285999999995,7.95304012298584C4.5083193,7.95304012298584,4.7713348,8.210239822985839,4.7785273,8.53214383298584C4.7785273,8.53214383298584,4.8607441,12.20732592298584,4.8607441,12.20732592298584C4.8607441,12.20732592298584,3.67566478,12.254317322985841,3.67566478,12.254317322985841C3.34877449,12.26728722298584,3.073269762,12.01279262298584,3.06030833,11.68590612298584C3.06014844,11.68187162298584,3.060030144,11.67783662298584,3.059952706,11.67380092298584C3.059952706,11.67380092298584,3.00011136257,8.55676257298584,3.00011136257,8.55676257298584C2.9938319386,8.22967556298584,3.25389776,7.95942875698584,3.58098477,7.95314933910584C3.58477414,7.95307658249284,3.58856362,7.95304012298584,3.59235418,7.95304012298584C3.59235418,7.95304012298584,3.59235418,7.95304012298584,3.59235418,7.95304012298584Z" fill-rule="evenodd" fill="#FFFFFF" fill-opacity="1"/></g></g></g></svg>

After

Width:  |  Height:  |  Size: 2.6 KiB

98
assets_v2/js/clientSet/fixedTemUpload.js

@ -0,0 +1,98 @@
$(document).ready(function () {
// 假装一下
$('#progressBar').val(20);
$('#progressBar').text('20%');
bindFileUpload();
function bindFileUpload() {
var formData = new FormData();
$('.fileUpload').on('click', function (event) {
$('#fileUpload').trigger('click')
})
$('#againBtn').on('click', function (event) {
$('#fileUpload').trigger('click')
})
$('#cancleBtn').click(function () {
formData = new FormData();
$('.uploadMes').html('')
})
$('#fileUpload').on('change', function () {
$('#againBtn').addClass('hide')
var fileInput = $(this);
var files = fileInput.prop('files');
var file = files[0]; // 获取文件
if (file) {
// 这里可以添加上传文件之前的逻辑,例如文件验证
// 创建FormData对象
formData.append('paper_file', file);
formData.append('paper_type', '1');
formData.append('is_asynch', '1');
formData.append('ver_chktype', check_type);
// 使用jQuery AJAX上传文件
$.ajax({
url: service_domain + '/upload_file',
type: 'POST',
data: formData,
dataType: 'json',
processData: false, // 告诉jQuery不要处理发送的数据
contentType: false, // 告诉jQuery不要设置Content-Type请求头
xhr: function () {
$(".uploadShow").addClass('hide');
$(".uploadMesShow").removeClass('hide');
$(".uploadMes").removeClass('hide');
$('#cancleBtn').removeClass('hide')
var xhr = $.ajaxSettings.xhr();
if (xhr.upload) {
$(".fileName").html(file.name);
xhr.upload.addEventListener('progress', function (e) {
if (e.lengthComputable) {
var progress = Math.ceil((e.loaded / e.total) * 100);
// console.log('progress', progress)
$('.uploadMes').html('上传中......');
}
}, false);
}
return xhr;
},
success: function (res) {
// 成功回调
// res = fileMockData
if (res.status) {
$(".uploadShow").addClass('hide');
$("#cancleBtn").addClass('hide');
$(".uploadMes").html('上传成功');
$(".uploadMes").addClass('uploadSuccess');// 成功样式
$(".uploadMes").removeClass('hide');
$('#againBtn').removeClass('hide')
$("#upload_file_md5").val(res.data.upload_file_md5);
$("#upload_file_name").val(res.data.upload_file_name);
$("#upload_file_tmpname").val(res.data.upload_file_tmpname);
} else {
$(".uploadShow").addClass('hide');
$(".uploadMes").html(res.info);
$(".uploadMes").removeClass('uploadSuccess');
$("#cancleBtn").addClass('hide');
$('#againBtn').removeClass('hide')
$('.uploadMes').addClass("uploadfile-error");
$(".uploadMes").removeClass('hide');
}
},
error: function (jqXHR, textStatus, errorThrown) {
// 错误回调
$(".uploadShow").addClass('hide');
$(".uploadMes").removeClass('uploadSuccess');
$('.uploadMes').html('解析失败!请检查文件重新上传');
$('.uploadMes').addClass("uploadfile-error");
$(".uploadMes").removeClass('hide');
$('#againBtn').removeClass('hide')
}
});
}
});
}
})

365
fixedTemUpload.html

@ -0,0 +1,365 @@
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{if $sitename}{$sitename}{else}一键生成万字{if !$is_filter_lunwen}论文{/if}范文{/if}</title>
<meta name="keywords" content="{$sitekeywords}">
<meta name="description" content="{$sitedesc}">
<!-- guip.css 文件后期引入需要更改为newai下的 -->
{if $site_ico}
<link rel="shortcut icon" href="{$site_ico}" type="image/x-icon" />{/if}
<link rel="stylesheet" type="text/css" href="{$smarty.const.CSS_URL}/assets_v2/css/clientSet/normalize.css?v={$smarty.const.CSS_JS_VERSION}"/>
<link rel="stylesheet" type="text/css" href="./assets_v2/css/clientSet/common.css?v={$smarty.const.CSS_JS_VERSION}3"/>
<link rel="stylesheet" type="text/css" href="./assets_v2/css/clientSet/guip.css"/>
<script type="text/javascript" src="{$smarty.const.CSS_URL}/assets_v2/js/clientSet/jquery-3.6.0.min.js?v={$smarty.const.CSS_JS_VERSION}"></script>
<script src="{$smarty.const.CSS_URL}/assets_v2/js/clientSet/css-vars-ponyfill.min.js"></script>
<script type="text/javascript" src="./assets_v2/js/clientSet/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="./assets_v2/js/clientSet/home.js"></script>
<!--[if lt IE 9]>
<script src="{$smarty.const.CSS_URL}/assets_v2/js/newai/html5shiv.js"></script>
<script src="{$smarty.const.CSS_URL}/assets_v2/js/newai/respond.min.js"></script>
<![endif]-->
{literal}
<style>
body{
background: #F3F5FE;
}
.flex{
display: flex;
}
.homePage-wrap{
display: flex;
justify-content: center;
margin:81px 0 54px 0;
}
.homePage-wrap img{
width: 512px;
height: 97px;
}
#container{
min-width: 1180px;
overflow-x: auto;
height: auto;
overflow: hidden;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
/* 需要迁移 */
.bg{
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
display: flex;
display: -ms-flexbox;
background: #F3F5FE;
z-index: -1;
}
.column{
display: flex;
flex-direction: column;
}
.sp_before{
width: 6px;
height: 16px;
border-radius: 12px;
background: #3F62F6;
}
.uploadWrap{
width: 540px;
height: 160px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 13px;
text-align: center;
}
.uploadWrap img{
width: 50px;
height: 50px;
}
.uploadWrap p{
font-size: 13px;
letter-spacing: normal;
color: #2C394B;
line-height: 20px;
}
.uploadWrap p:last-child{
font-family: MiSans;
font-size: 12px;
font-weight: normal;
line-height: 20px;
letter-spacing: normal;
color: rgba(92, 110, 134, 0.6);
}
/* 未上传论文时添加校验类名 */
.not_normal{
color: #FF4D4F;
}
.common_back{
width: 1000px;
height: auto;
display: flex;
flex-direction: column;
align-items: center;
padding: 24px 32px;
gap: 24px;
margin-bottom: 12px;
border-radius: 9px;
background: rgba(255, 255, 255, 0.8);
box-sizing: border-box;
border: 2px solid #FFFFFF;
backdrop-filter: blur(10px);
}
.common_back p{
margin: 0;
}
/* 页面元素 start*/
.fixed_upload{
width: 1180px;
height: auto;
display: flex;
flex-direction: column;
padding: 24px 32px;
gap: 32px;
margin-bottom: 26px;
box-sizing: border-box;
}
.selfBuid_title .goback{
position: absolute;
left: 0;
display: flex;
align-items: center;
bottom: 50%;
transform: translateY(50%);
gap: 6px;
color: #666666;
font-weight: 500;
cursor: pointer;
}
.uploadWrap{
width: 1116px;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 12px 0px;
gap: 13px;
align-self: stretch;
border-radius: 2px;
background: #F9FAFF;
border: 1px dashed #DFE2E6;
}
.upload_desc{
text-align: left;
margin-top: 4px;
}
#tem_upload_btn{
width: 144px;
height: 46px;
display: flex;
justify-content: center;
align-items: center;
padding: 14px 2px;
box-sizing: border-box;
border-radius: 4px;
background: #A8ADC2;
border: none;
color: #fff;
}
.active_btn{
background: #3F62F6 !important;
}
.btn_desc{
font-family: MiSans;
font-size: 12px;
font-weight: normal;
line-height: 20px;
letter-spacing: normal;
color: #3F62F6;
}
.common_upload{
width: 100%;
height: auto;
display: flex;
flex-direction: column;
gap: 24px;
box-sizing: border-box;
margin-bottom: 26px;
}
.condition_item{
display: flex;
align-items: center;
gap: 8px;
justify-content: flex-start;
width: 100%;
}
.condition_item b{
font-size: 14px;
color: #333;
}
.condition_item span{
padding: 4px 8px;
box-sizing: border-box;
margin-right: 16px;
}
.condition_item span.active{
border-radius: 4px;
background: #3F62F6;
color: #fff;
}
#progressBar{
width: 330px;
}
.fileName,.uploadMes{
margin-top: 6px;
}
#cancleBtn,#againBtn{
width: 89px;
height: 26px;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
padding: 5px 19px;
border-radius: 2px;
background: #F9FAFF;
font-size: 12px;
color: #23242B;
border: 1px solid #DFE2E6;
margin: 0 auto;
margin-top: 24px;
}
.uploadMes,.uploadSuccess{
font-family: MiSans;
font-size: 12px;
font-weight: normal;
line-height: 20px;
letter-spacing: normal;
color: #3F62F6;
margin-top: 6px;
}
.uploadSuccess{
color: #00C261;
}
/* 页面元素 end*/
</style>
{/literal}
</head>
<body>
<!--header公共组件-->
<!-- {include file="include/newai/header.html" hideaimenu="1"} -->
<!--header公共组件-->
<div id="container">
<div class="bg"></div>
<div class="selfBuid_title center">
<h3>上传论文,进行排版</h3>
<div class="goback">
<img src="./assets_v2/images/clientSet/back_icon.svg" alt="">返回
</div>
</div>
<div class="common_back fixed_upload ">
<div class="flex condition_item hide">
<div class="sp_before"></div>
<b>模板</b>
<span>中国人民大学-本科-马克思政治学院</span>
</div>
<div class=" common_upload">
<div class="flex condition_item">
<div class="sp_before"></div>
<b>学校</b>
<span>中国人民大学</span>
</div>
<div class="flex condition_item">
<div class="sp_before"></div>
<b>学历</b>
<div class="flex edu_wrap">
<span class="active">本科</span>
<span>本科</span>
<span>本科</span>
<span>本科</span>
<span>本科</span>
</div>
</div>
<div class="flex condition_item">
<div class="sp_before"></div>
<b>学院</b>
<div class="flex college_wrap">
<span class="active">通用</span>
<span>马克思政治学院</span>
</div>
</div>
</div>
<div class="uploadWrap">
<input type="file" id="fileUpload" class="point hide" name="file">
<div class="fileUpload hide">
<img src="./assets_v2/images/clientSet/lunwen_upload.png" alt="">
<p class="not_normal">点击此处上传论文,请确保论文完整</p>
<p class="upload_desc">
1.支持doc、docx类文件,建议使用Word2013及以上版本。极少部分文档,因软件兼容问题需自行简单调版即可。<br/>
2.上传文档应包含学位论文的基本要素信息,暂不支持纯图片的文件排版。<br/>
3.单个文件,不能超过500M。
</p>
</div>
<div class="fileInfo">
<!-- 进度条 -->
<div class="flex">
<progress id="progressBar" value="0" max="100"></progress>
<span id="percentage">0%</span>
<img src="./assets_v2/images/clientSet/uploadSuccess.svg" alt="">
</div>
<!-- 文件信息 -->
<div class="fileName">文件名称。doc</div>
<div class="uploadMes hide">上传中。。。</div>
<div id="cancleBtn" class="point btn">取消上传</div>
<div id="againBtn" class="hide btn point">重新上传</div>
</div>
</div>
</div>
<button id="tem_upload_btn" class="active_btn">排版</button>
<p class="btn_desc">点击排版,免费看效果,满意再付费</p>
<!--footer公共组件-->
<!-- {include file="include/newai/footer.html"} -->
</div>
<div id="tab_hide" class="hide">1</div>
<!-- {include file="include/newai/kefu.html"}
{$access_stats_code} -->
</body>
<!-- 迁移了项目再打开 -->
<!-- <script type="text/javascript" src="{$smarty.const.CSS_URL}/assets_v2/js/newai/rem.js"></script>
<script type="text/javascript" src="{$smarty.const.CSS_URL}/assets_v2/js/newai/common.js"></script> -->
<script type="text/javascript" src="./assets_v2/js/clientSet/fixedTemUpload.js?v=10"></script>
{literal}
<script>
$('.edu_content').on('click', '.radio_box input', function () {
let value = $(this).attr('value');
$('.edu_content .radio_box').removeClass('radio_box_active');
$(this).parent().addClass('radio_box_active');
})
</script>
{/literal}
</html>

211
loading.html

@ -0,0 +1,211 @@
<!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>

2709
pay.html

File diff suppressed because it is too large

31
report.html

@ -36,11 +36,8 @@
}
.report_content {
width: 600px;
width: 956px;
text-align: center;
/* display: flex;
flex-direction: column;
justify-content: center; */
}
.report_content h3 {
@ -272,7 +269,7 @@
}
.report_content .report_detail {
width: 600px;
width: 956px;
height: 360px;
border-radius: 6px;
opacity: 1;
@ -401,6 +398,13 @@
overflow: hidden;
}
.report_mes{
color: #EE7000;
border-radius: 6px;
background: rgba(236, 133, 51, 0.12);
padding: 8px 16px;
}
/* 报告下载end */
</style>
</head>
@ -408,16 +412,20 @@
<div class="main reportMain">
<!-- header 开始-->
{include file="include/ai2/header.html"}
<!-- {include file="view/templates/ai_new/ppt_preview.html"} -->
{if $smarty.get.oid|@trim}
<div id="query-tidhide" class="hide">{$smarty.get.oid|@trim}</div>
{elseif $smarty.cookies.tid}
<div id="query-tidhide" class="hide">{$smarty.cookies.tid}</div>
{/if}
<div id="report_page" class="">
<div class="report_mes center ft12">
<img src="{$smarty.const.CSS_URL}/images/aiNew/mes.svg" alt="">
系统保留7天以内的检测报告,超过7天则被删除,确保您的论文不会被泄露和盗窃,检测完成后请尽快下载您的检测报告。
</div>
<div class="report_box center">
<div class="report_content ">
<h3>我的报告</h3>
<h3>下载论文排版</h3>
<div class="search_report">
<span>订单编号:</span>
<input class="report_input" type="text" placeholder="请输入您的订单号来查找报告">
@ -440,6 +448,9 @@
<li>
<p>淘宝订单</p>
</li>
<li>
<p>检测卡订单</p>
</li>
</ul>
<img src="{$smarty.const.CSS_URL}/images/aiNew/wx_pay_mes.png" alt="" style="height:168px">
<img class="hide" src="{$smarty.const.CSS_URL}/images/aiNew/zfb_pay_mes.png" alt="" style="height:168px">
@ -455,13 +466,11 @@
<div class="main_top">
</div>
<div class="downLoad point" style="display: none;">下载</div>
<!-- 支付完跳转过来的,都展示“再次下载”。自己搜的,只展示“下载” -->
</div>
</div>
</div>
<div class="report_mes center ft12">
<img src="{$smarty.const.CSS_URL}/images/aiNew/mes.svg" alt="">
系统保留7天以内的检测报告,超过7天则被删除,确保您的论文不会被泄露和盗窃,检测完成后请尽快下载您的检测报告。
</div>
</div>
</div>
<!-- {include file="include/ai2/footer_index.html"} -->

207
temUpload.html → selfBulid.html

@ -68,6 +68,41 @@
display: flex;
flex-direction: column;
}
.sp_before{
width: 6px;
height: 16px;
border-radius: 12px;
background: #3F62F6;
}
.uploadWrap{
width: 540px;
height: 160px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 13px;
text-align: center;
}
.uploadWrap img{
width: 50px;
height: 50px;
}
.uploadWrap p{
font-size: 13px;
letter-spacing: normal;
color: #2C394B;
line-height: 20px;
}
.uploadWrap p:last-child{
font-family: MiSans;
font-size: 12px;
font-weight: normal;
line-height: 20px;
letter-spacing: normal;
color: rgba(92, 110, 134, 0.6);
}
/* 页面元素 start*/
.common_back{
@ -152,13 +187,7 @@
gap: 8px;
}
.sp_before{
width: 6px;
height: 16px;
border-radius: 12px;
background: #3F62F6;
}
.border_com{
width: 458px;
height: 38px;
@ -187,34 +216,7 @@
.border_com::placeholder{
color: #BABDC2;
}
.uploadWrap{
width: 540px;
height: 160px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 13px;
text-align: center;
}
.uploadWrap img{
width: 50px;
height: 50px;
}
.uploadWrap p{
font-size: 13px;
letter-spacing: normal;
color: #2C394B;
line-height: 20px;
}
.uploadWrap p:last-child{
font-family: MiSans;
font-size: 12px;
font-weight: normal;
line-height: 20px;
letter-spacing: normal;
color: rgba(92, 110, 134, 0.6);
}
#selfBulid_btn{
width: 144px;
height: 46px;
@ -248,13 +250,140 @@
<div id="container">
<div class="bg"></div>
<div class="selfBuid_title center">
<h3>上传论文,进行排版</h3>
<h3>贡献一份模板,收获一次免费排版</h3>
<p>携手共建高校论文模板库,帮助后来的学弟学妹!</p>
</div>
<!-- 无排版时 -->
<div class="selfBuid_title center" style="display: none;">
<h3>本校暂无模板,需要您的帮助</h3>
<p>上传模板要求,可享免费排版服务</p>
</div>
<div class="common_back bace_info">
<div class="info_title">
<div class="sp_before"></div>
1.基本信息
<img src="./assets_v2/images/clientSet/require.svg" alt="">
</div>
<div class="info_content">
<div class="formItem">
<div class="form_label">所属学校:</div>
<div class="form_content">
<div class="custom-dropdown ">
<input type="text" class="dropdown-input" placeholder="选择您的论文专业" selected_val="0" id="myInput"
onclick="showDropdown()" readonly>
<div class="custom-icon"></div>
<div id="myDropdown" class="dropdown-content">
<p value="{$key}">{$item}</p>
<p value="{$key}">{$item}</p>
<p value="{$key}">{$item}</p>
</div>
</div>
<div class="school_content border_com hide">
<span class="school_name">上海交通大学</span>
<span>不可修改</span>
</div>
</div>
<!-- {literal} -->
<script>
// 下拉框选择 、展开 、收起逻辑
function showDropdown() {
var dropdownContent = document.getElementById("myDropdown");
dropdownContent.style.display = "block";
}
window.onclick = function (event) {
if (!event.target.matches('.dropdown-input')) {
var dropdownContent = document.getElementById("myDropdown");
if (dropdownContent.style.display === "block") {
dropdownContent.style.display = "none";
}
}
}
//选值 赋值
$('.dropdown-content').on('click', 'p', function () {
$('.dropdown-content p').removeClass('selected_back')
$(this).addClass('selected_back')
let value = parseInt($(this).attr('value'));
$('.dropdown-input').val($(this).text())
$('.dropdown-input').attr('selected_val', value)
})
</script>
<!-- {/literal} -->
</div>
<div class="formItem">
<div class="form_label">所属学校:</div>
<div class="form_content">
<input class="college_name border_com" placeholder="填写所在的学院名称"/>
</div>
</div>
<div class="formItem educationRight ">
<div class="form_label">&emsp;&emsp;历:</div>
<div class="form_content flex edu_content">
<div class="radio_box">
<input value="{$key}" type="radio" name="edu" id="edu{$key}">
<div></div>
<label>本科</label>
</div>
<div class="radio_box">
<input value="{$key}" type="radio" name="edu" id="edu{$key}">
<div></div>
<label>专科</label>
</div>
<div class="radio_box">
<input value="{$key}" type="radio" name="edu" id="edu{$key}">
<div></div>
<label >硕士</label>
</div>
<div class="radio_box">
<input value="{$key}" type="radio" name="edu" id="edu{$key}">
<div></div>
<label>博士</label>
</div>
<div class="radio_box">
<input value="{$key}" type="radio" name="edu" id="edu{$key}">
<div></div>
<label>继续教育</label>
</div>
</div>
</div>
<div class="formItem">
<div class="form_label">&nbsp;&nbsp;号:</div>
<div class="form_content">
<input class="phone_num border_com" placeholder="留下您的手机号,平台排版完成后与您联系"/>
</div>
</div>
</div>
</div>
<div class="common_back">
<div class="info_title">
<div class="sp_before"></div>
2.论文要求
<img src="./assets_v2/images/clientSet/require.svg" alt="">
</div>
<p class="sub_title">上传学校下发的论文格式文档</p>
<div class="lunwen_demand uploadWrap">
<img src="./assets_v2/images/clientSet/lunwen_upload.png" alt="">
<p>点击此处上传文件</p>
<p>若有多个文件,请打包成压缩包上传</p>
</div>
</div>
<button id="selfBulid_btn">排版</button>
<div class="common_back">
<div class="info_title">
<div class="sp_before"></div>
3.论文上传,免费排版
</div>
<p class="sub_title">上传学校下发的论文格式文档</p>
<div class="lunwen_demand uploadWrap">
<img src="./assets_v2/images/clientSet/lunwen_upload.png" alt="">
<p>现在传:排好直接发您。以后传:先做好模板,短信通知您来操作。这都是安全、免费的</p>
</div>
</div>
<button id="selfBulid_btn">提交</button>
<!--footer公共组件-->
<!-- {include file="include/newai/footer.html"} -->
Loading…
Cancel
Save