Browse Source

样式及新版加载动画

pull/3/head
zq 5 months ago
parent
commit
7a783f866d
  1. 121
      style/css/index.css
  2. 1
      style/img/add_lookppt_icon.svg
  3. 1
      style/img/step_active2.svg
  4. 107
      style/js/index.js

121
style/css/index.css

@ -8,6 +8,17 @@ body,p,div{
/* right: calc((100% - 1680px) / 2); */
}
}
#loading-animation {
width: 50px;
height: 50px;
background-color: #333;
border-radius: 50%;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.point{
cursor: pointer;
}
@ -831,6 +842,9 @@ header .right .activebtn{
.normal_step3.step_three dt{
background: url(../img/step_2.svg);
}
.normal_step3.step_three.active_step dt{
background: url(../img/step_active2.svg);
}
.step_line{
flex: 1;
@ -1064,6 +1078,67 @@ li .select_icon, .pay_every .pay_icon{
#advise-area{
width: calc(100% - 28px);
}
.custom-dropdown {
position: relative;
display: inline-block;
margin-right: 22px;
}
.dropdown-input {
font-size: 14px;
height: 46px;
font-family: Microsoft YaHei UI;
width: 176px;
border-radius: 6px;
height: 44px;
color: #3D3D3D;
cursor: pointer;
padding: 0 0 0 10px;
background: #FFFFFF;
border: 1px solid #E8E8E8;
}
.dropdown-input:hover, .textAreaForWordCount:hover,.coreWordCount:hover{
transition: all .3s;
border: 1px solid #5B6FF6 !important;
}
.dropdown-input:focus-visible,.textAreaForWordCount:focus-visible,.coreWordCount:focus-visible{
transition: all .3s;
border: 1px solid #5B6FF6 !important;
outline: none;
}
.empty-err{
border: 1px solid #FF4D4F;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #fff;
border-radius: 8px;
box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.08);
/* min-width: 160px; */
z-index: 1;
width: 170px;
max-height: 205px;
overflow-y: auto;
padding: 10px 8px;
}
.dropdown-content p{
color: black;
display: block;
padding: 8px 10px;
cursor: pointer;
line-height: 20px;
}
.dropdown-content p:hover{
background: #F1F4FF;
}
.dropdown-content .selected_back{
background: #F1F4FF;
}
.opt-area{
display: none;
position: absolute;
@ -1085,7 +1160,7 @@ li .select_icon, .pay_every .pay_icon{
justify-content: center;
width: 100%;
height: 84px;
background: linear-gradient( 180deg, #F1FBFF 0%, #ECF3FF 100%);
background: linear-gradient(180deg, #EDF1FE 0%, #FCFDFF 119%);
border-radius: 8px;
font-weight: 400;
font-size: 12px;
@ -1117,7 +1192,8 @@ li .select_icon, .pay_every .pay_icon{
/* margin-top: -22px; */
}
.opt-block .step-icon-active+.step-text{
color: #1675FF;
/* color: #1675FF; */
color: #5B6FF6;
}
.loading-area img{
margin: 0 8px;
@ -1233,6 +1309,7 @@ li .select_icon, .pay_every .pay_icon{
font-variation-settings: "opsz" auto;
color: #282828;
line-height: 20px;
font-weight: bold;
/* margin-bottom: 14px; */
}
.posHead img{
@ -1697,11 +1774,11 @@ li .select_icon, .pay_every .pay_icon{
right: 10px; /* 根据需要调整距离右侧的位置 */
font-size: 12px; /* 根据需要调整字体大小 */
}
.custom-select {
/* .custom-select {
position: relative;
display: inline-block;
margin-right: 22px;
}
} */
#project_select {
-webkit-appearance: none;
@ -1745,10 +1822,14 @@ border: 1px solid #E8E8E8;
select:focus {
border-color: #4A90E2; /* 聚焦时边框颜色 */
}
.coreContent .formLeft{
padding-top: 7px;
}
#side_textarea, #coreTextarea{
flex: 1;
/* width: 100%; */
padding: 14px 12px;
font-size: 14px;
/* width: 664px; */
height: 65px;
border-radius: 6px;
@ -1916,9 +1997,11 @@ footer a{
flex: 1;
border: none;
}
.report_content .search_report .report_input+span{
color: #CBD5E2;
}
.report_content .search_report .report_input::placeholder{
color: #8C919D;
}
.report_content .search_report .report_input:focus-visible{
outline: none;
@ -2590,6 +2673,33 @@ span.normalPrice{
background: #FFFFFF;
box-sizing: border-box;
border: 1px solid #FFE3DC;
position: relative;
}
.addListBox .add_item .img{
display: none;
opacity: 0;
position: absolute;
left: 0;
top: -290px;
border-radius: 12px;
z-index: 100;
background: #F2F3FE;
box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.16);
}
.addListBox .add_item_right:hover .img{
display: block !important;
opacity: 1;
}
.addListBox .add_item img{
}
.addListBox .add_item .img .preview{
height: 306px;
}
.addListBox .add_item .img .preview_icon{
position: absolute;
left: 185px;
bottom: -15px;
}
.addListBox .pos_top{
padding: 3px 13px;
@ -2616,6 +2726,7 @@ span.normalPrice{
font-size: 12px;
line-height: 20px;
margin-top: 30px;
cursor: pointer;
}
.addListBox .title{
font-size: 16px;

1
style/img/add_lookppt_icon.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="12" height="12" viewBox="0 0 12 12"><g transform="matrix(-1,0,0,1,24,0)"><g style="opacity:0;"><path d="M12 0C12 0 12 0 12 0L24 0C24 0 24 0 24 0L24 12C24 12 24 12 24 12L12 12C12 12 12 12 12 12Z" fill="#000000" fill-opacity="1"/></g><g><path d="M16.6114065625,5.99572421875L20.6889265625,2.0541442187500003C20.9292565625,1.82143021875,20.9292565625,1.44480221875,20.6889265625,1.2128312187499999C20.4486065625,0.98048861875,20.0587065625,0.98048861875,19.8183865625,1.2128312187499999L15.3059445625,5.57516421875C15.0659872625,5.80750421875,15.0659872625,6.18432421875,15.3059445625,6.41593421875L19.8183865625,10.77808421875C19.9389165625,10.89426421875,20.096456562500002,10.95234421875,20.2540165625,10.95234421875C20.4115865625,10.95234421875,20.5691265625,10.89425421875,20.6889265625,10.77771421875C20.9292565625,10.54537421875,20.9292565625,10.16928421875,20.6889265625,9.93694421875L16.6114065625,5.99572421875L16.6114065625,5.99572421875Z" fill="#3D3D3D" fill-opacity="1"/></g></g></svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

1
style/img/step_active2.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="28" height="28" viewBox="0 0 28 28"><g><rect x="0" y="0" width="28" height="28" rx="14" fill="#5B6FF6" fill-opacity="1"/><rect x="1" y="1" width="26" height="26" rx="13" fill-opacity="0" stroke-opacity="1" stroke="#5B6FF6" fill="none" stroke-width="2"/><g><path d="M15.72607,11.18652Q15.72607,10.33203,15.18604,9.84326Q14.646,9.35449,13.71631,9.35449Q13.06006,9.35449,12.39014,9.68945Q11.72021,10.02441,11.13916,10.64648L11.13916,9.347660000000001Q11.65869,8.80762,12.31836,8.52051Q12.97803,8.2334,13.8667,8.2334Q15.30225,8.2334,16.17725,9.00244Q17.05225,9.77148,17.05225,11.08398Q17.05225,12.25293,16.51562,13.10742Q15.979,13.96191,14.68018,14.85742Q13.354,15.7734,12.90625,16.1699Q12.4585,16.5664,12.28076,16.9287Q12.10303,17.291,12.10303,17.810499999999998L17.3667,17.810499999999998L17.3667,19L10.7085,19L10.7085,18.473599999999998Q10.7085,17.5576,10.95801,16.9185Q11.20752,16.2793,11.78174,15.6743Q12.35596,15.0693,13.57275,14.22168Q14.81689,13.34668,15.27148,12.68701Q15.72607,12.027339999999999,15.72607,11.18652Z" fill="#FFFFFF" fill-opacity="1"/></g></g></svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

107
style/js/index.js

@ -182,20 +182,18 @@ $(document).ready(function() {
// // 请求失败时的回调函数
// console.log(error);
// });
// $.ajax(service_domain +'/ajax_get_value_added_services',
// function(response) {
// // 请求成功时的回调函数
// console.log(response);
// }).fail(function(xhr, status, error) {
// // 请求失败时的回调函数
// console.log(error);
// });
// 首页增值服务相关
var add_item_valueText = {
'62':'选题正文一步到位',
'63':'导师看了都说好',
'96':'可自定义风格,答辩最靓的仔',
}
var add_item_valueUrl = {
'62':'./style/img/kaiti_preview.png',
'63':'./style/img/renwushu_preview.png',
'96':'',
}
getadd_Value('94')
function getadd_Value(type){
$.ajax({
@ -205,13 +203,14 @@ $(document).ready(function() {
data: {
type
},
success:function(res){
if(res.status){
let addListBoxHtml = ''
value_added_servicesList = Object.values(res.data.value_added_services);
value_added_servicesList.forEach(item=>{
if(item.type != '96'){
addListBoxHtml+= ` <div class="add_item flex " type=`+item.type+`>
addListBoxHtml+= `<div class="add_item flex add_active" type=`+item.type+`>
<div class="pos_top">`+add_item_valueText[item.type]+`</div>
<div class="add_item_left">
<p class="title">`+item.name +`</p>
@ -220,10 +219,15 @@ $(document).ready(function() {
<span class="normalPrice hide">12.00</span>
</p>
</div>
<span class="add_item_right">预览</span>
<span class="add_item_right">预览
<div class="img">
<img class="preview" src=`+add_item_valueUrl[item.type]+` alt="">
<img src="./style/img/sanjiao.svg" class="preview_icon" alt="">
</div>
</span>
</div>`
}else{
addListBoxHtml+= `<div class="add_item add_ppt_item flex" type=`+item.type+`>
addListBoxHtml+= `<div class="add_item add_ppt_item add_active flex" type=`+item.type+`>
<div class="pos_top">`+add_item_valueText[item.type]+`</div>
<div class="add_item_left">
<p class="title">`+item.name +`</p>
@ -237,7 +241,7 @@ $(document).ready(function() {
<p>当前模板</p>
<p class="add_lookPPT">
<span id="cur_ppt_selectName">清新绿意通用模板</span>
<img src="./style/img/lookAllPPT.svg" alt="">
<img src="./style/img/add_lookppt_icon.svg" alt="">
</p>
</div>
</div>`
@ -567,8 +571,8 @@ $(document).ready(function() {
}
postData.title = title
}
if(!$('.custom-select').hasClass('disNone')){
var major = parseInt($('#project_select').find('option:selected').val());
if(!$('.custom-dropdown').hasClass('disNone')){
var major= parseInt($('.dropdown-input').attr('selected_val'))
if (major <= 0 || !major) {
alert("请选择您的专业");
return;
@ -582,6 +586,10 @@ $(document).ready(function() {
}
}
if(check_type == '96'){
if (!old_parent_ppt) {
alert("请选择ppt模板");
return;
}
var pptid = pptUrlList[old_parent_ppt]['ppt_id'];
var upload_file_md5 = $("#upload_file_md5").val();
var upload_file_name = $("#upload_file_name").val();
@ -595,7 +603,6 @@ $(document).ready(function() {
alert("请选择ppt模板");
return;
}
postData.ppt_tpl = pptid;
postData.upload_file_md5 = upload_file_md5;
postData.upload_file_name = upload_file_name;
@ -613,6 +620,11 @@ $(document).ready(function() {
}
console.log(postData,'======0000');
allPostData = {...allPostData,check_flag,recharge_goods_id:'0',...postData}
$('.normal_step').removeClass('active_step')
$('.step_line').removeClass('suc_step_line')
$('.step_line').eq(0).addClass('suc_step_line')
$('.normal_step').eq(0).addClass('success_step')
$('.normal_step').eq(2).addClass('active_step')
//检验信息
getPayQrcode(postData)
}
@ -632,6 +644,7 @@ $(document).ready(function() {
// location.href = '/';
}
$('#formInputSumbtn').on('click',function(e){
payAction()
})
function getPayQrcode(postData){
@ -680,7 +693,7 @@ $(document).ready(function() {
});
}
function getRechargePayUrl(){
var core_content = $('.coreWordCount').val();
// var core_content = $('.coreWordCount').val();
var postData1 = new Object();
postData1.type = allPostData.check_type;
postData1.pay_type = allPostData.pay_type;
@ -688,12 +701,8 @@ $(document).ready(function() {
// if(configData.ppt_tpl != '') postData1.ppt_tpl = configData.ppt_tpl;//ppt
// postData1.recharge_goods_id = '0';
postData1.title = allPostData.title;
// postData1.core_content = core_content;
// if(postData1.type == '63'){
// postData1.major = parseInt($('#project_select').find('option:selected').val());
// }
if(!$('.custom-select').hasClass('disNone')){
var major = parseInt($('#project_select').find('option:selected').val());
if(!$('.custom-dropdown').hasClass('disNone')){
var major= parseInt($('.dropdown-input').attr('selected_val'))
postData1.aiessay_major = major
}
if(!$('.formItem_pro').hasClass('disNone')){
@ -705,7 +714,7 @@ $(document).ready(function() {
postData1.aiessay_wordnum = wordnums
}
if(postData1.type == '81' || postData1.type == '85'){
postData1.core_content = $('.core_content').val().trim()//核心内容
postData1.core_content = $('.core_content').val()//核心内容
}
if(postData1.type == '96'){
var pptid = pptUrlList[old_parent_ppt]['ppt_id'];
@ -737,7 +746,6 @@ $(document).ready(function() {
type:'post',
dataType:'json',
data:{...postData1},
success:function(res){
if(res.status){
$('#qrcode').html('');
@ -841,31 +849,18 @@ $(document).ready(function() {
}
$('.step_main').on('click','.normal_step1',function(){
console.log('====000');
window.scrollTo({ top: 200, behavior: 'smooth' })
})
$('.step_main').on('click','.ormal_step2.success_step',function(){
console.log('====02222200');
$('.step_main').on('click','.normal_step2.success_step',function(){
window.scrollTo({ top: 500, behavior: 'smooth' })
})
$('.step_main').on('click','.normal_step3.active_step',function(){
console.log('====03333300');
if(check_type == '94'){
window.scrollTo({ top: 1000, behavior: 'smooth' })
}else{
window.scrollTo({ top: 800, behavior: 'smooth' })
}
})
// $('.normal_step1.active_step').click(function(){
// })
// $('.normal_step2.success_step').click(function(){
// console.log('=444444====009989');
// })
// $('.normal_step3.active_step').click(function(){
// console.log('=====009989');
// window.scrollTo({ top: 1000, behavior: 'smooth' })
// })
function goLoadDown(tid,dom){
$('.right_btn').removeClass('activebtn')
$('.right_btn').eq(1).addClass('activebtn')
@ -878,16 +873,13 @@ $(document).ready(function() {
searchOrder()
}
$('li').click(function(e) {
$('.main_select li').click(function(e) {
if ($('li').hasClass('active_select')) {
$('li').removeClass('active_select')
}
$(this).addClass('active_select')
var element = $('.step_back');
var element2 = $('.footer');
// $('.main_page').animate({
// scrollTop: 500
// }, 1000);
element.removeClass('stickyStep')
element2.removeClass('footer2')
// getWordCountList();
@ -898,17 +890,29 @@ $(document).ready(function() {
// location.href = location.origin+'/aippt'
// return
// }
//重置步骤条状态
$('.normal_step').removeClass('success_step')
$('.normal_step').removeClass('active_step')
$('.step_line').removeClass('suc_step_line')
$('.normal_step').eq(0).addClass('active_step')
//重置ppt模板选择
old_parent_ppt = null;//首页选择的
new_parent_ppt = 0;//弹框内选择的
$('.form_pptItem .ppt_tem_item').removeClass('ppt_item_active')
if(!$('.step_add_three').hasClass('hide')){
$('.step_add_three').addClass('hide')
}
if(t =='94'){//字数
$('.form_essayWords').show();
$('.side_info').show();
$('.step_two').show()
$('.normal_step3').removeClass('step_three')
$('.key_words').addClass('hide')
$('.checkbox_wrap').show()
getadd_Value('94')
} else{
$('.checkbox_wrap').hide()
$('.step_two').hide()
$('.normal_step3').addClass('step_three')
$('.form_essayWords').hide();
$('.side_info').hide();
$('.key_words').removeClass('hide')
@ -931,6 +935,7 @@ $(document).ready(function() {
$('[step="3"]').hide()
$('.payModal_main').html(payhtml)
$('.pay_complete_main').html('')
}
if(t == '64'){
$('.key_words').show()
@ -981,10 +986,10 @@ $(document).ready(function() {
}
}
changeLiActive(t,'support_titleMore','.normal_recommend_title')// 标题优化
changeLiActive(t,'support_pro','.custom-select')// 专业优化
changeLiActive(t,'support_pro','.custom-dropdown')// 专业优化
changeLiActive(t,'support_edu','.formItem_pro')// 学历优化
window.scrollTo({ top: 200, behavior: 'smooth' })
// if($('.custom-select').hasClass('disNone') && $('.opt-advise').hasClass('disNone')){}
// if($('.custom-dropdown').hasClass('disNone') && $('.opt-advise').hasClass('disNone')){}
});
function changeLiActive(t,attr_type,ele){
@ -1173,7 +1178,7 @@ $(document).ready(function() {
xhr.upload.addEventListener('progress', function (e) {
if (e.lengthComputable) {
var progress = Math.ceil((e.loaded / e.total) * 100);
console.log('progress', progress)
// console.log('progress', progress)
$('.uploadMes').html('上传中......' + progress + '%');
}
}, false);

Loading…
Cancel
Save