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.
224 lines
6.8 KiB
224 lines
6.8 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="stylesheet" href="./css/style.css">
|
|
<link rel="stylesheet" href="./css/swiper-3.4.2.min.css">
|
|
</head>
|
|
|
|
<body>
|
|
<img class="loading" src="./img/loading.png" alt="">
|
|
|
|
<div id="home" class="container">
|
|
<div id="bb" class="billing my-account">
|
|
<div class="account-header">
|
|
<a href="#home" class="account-back"></a>
|
|
<img class="bg" src="./img/account.jpg" alt="">
|
|
</div>
|
|
<div class="bb-list">
|
|
</div>
|
|
<img class="bg" style="margin-top: 10px;" src="./img/IMG_3620.jpg" alt="">
|
|
</div>
|
|
|
|
<div id="list" class="billing list-class">
|
|
<div class="account-header billing-header">
|
|
<a href="#home" class="account-back"></a>
|
|
<div class="card-box">
|
|
<div class="card-number"></div>
|
|
<img class="bg" id="m1" src="./img/m1.png" alt="">
|
|
</div>
|
|
</div>
|
|
<div class="billing-list">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="header">
|
|
|
|
</div>
|
|
<div class="banner">
|
|
<!-- <img class="bg top-header" src="./img/t.jpg" alt=""> -->
|
|
<a href="#bb" class="account"></a>
|
|
<a href="#list" class="mx"></a>
|
|
</div>
|
|
<div class="home-box">
|
|
<img class="bg" src="./img/1.jpg" alt="">
|
|
<div class="font-animation-box">
|
|
<div class="box-list">
|
|
<div>21312312</div>
|
|
<div>--1231231</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="swiper-container">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide">
|
|
<img src="./img/lun.jpg" alt="">
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<img src="./img/lun.jpg" alt="">
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<img src="./img/lun.jpg" alt="">
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<img src="./img/lun.jpg" alt="">
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<img src="./img/lun.jpg" alt="">
|
|
</div>
|
|
</div>
|
|
<!-- 如果需要分页器 -->
|
|
<div class="swiper-pagination"></div>
|
|
</div>
|
|
|
|
<img class="bg" src="./img/2.jpg" alt="">
|
|
<img class="bg" src="./img/3.jpg" alt="">
|
|
<img class="bg" src="./img/4.jpg" alt="">
|
|
<img class="bg" src="./img/5.jpg" alt="">
|
|
<img class="bg" src="./img/6.jpg" alt="">
|
|
<img class="bg footer" src="./img/7.jpg" alt="">
|
|
<p class="tips"></p>
|
|
|
|
</div>
|
|
|
|
<script src="./js/swiper-3.4.2.min.js"></script>
|
|
<script src="./js/jquery-3.6.1.min.js"></script>
|
|
<script>
|
|
function hideLoading() {
|
|
setTimeout(() => {
|
|
$('.loading').hide();
|
|
}, 500)
|
|
}
|
|
hideLoading();
|
|
|
|
$("#m1").each(function () {
|
|
if (this.complete) {
|
|
console.log('complete', this.height)
|
|
$('.billing-list').css('paddingTop', this.height)
|
|
|
|
// console.log(111, this.height())
|
|
// $('.billing-list').css('paddingTop', '123px')
|
|
// this image already loaded
|
|
// do whatever you would do when it was loaded
|
|
} else {
|
|
$($(this)).on('load', function () {
|
|
// image now loaded
|
|
$('.billing-list').css('paddingTop', this.height)
|
|
|
|
console.log('load', this.height)
|
|
|
|
});
|
|
}
|
|
});
|
|
|
|
// $('').load = () => {
|
|
// // $('#list').css('paddingTop', $('.card-box').height())
|
|
|
|
// }
|
|
|
|
$('.account,.mx').on('click', () => {
|
|
$('.loading').show()
|
|
hideLoading();
|
|
})
|
|
$(function () {
|
|
|
|
|
|
|
|
|
|
// function getPageScroll() {
|
|
// var xScroll, yScroll;
|
|
// if (self.pageYOffset) {
|
|
// yScroll = self.pageYOffset;
|
|
// xScroll = self.pageXOffset;
|
|
// } else if (document.documentElement && document.documentElement.scrollTop) { // Explorer 6 Strict
|
|
// yScroll = document.documentElement.scrollTop;
|
|
// xScroll = document.documentElement.scrollLeft;
|
|
// } else if (document.body) {// all other Explorers
|
|
// yScroll = document.body.scrollTop;
|
|
// xScroll = document.body.scrollLeft;
|
|
// }
|
|
// arrayPageScroll = new Array(xScroll, yScroll);
|
|
// return arrayPageScroll;
|
|
// };
|
|
new Swiper('.swiper-container', {
|
|
loop: true,
|
|
pagination: '.swiper-pagination',
|
|
autoplay: 3000,
|
|
paginationClickable: true
|
|
})
|
|
// console.log('44')
|
|
// document.addEventListener('scroll', () => {
|
|
// const pageScroll = getPageScroll();
|
|
// const isShow = $('.top-header').is(":visible")
|
|
// console.log('11', isShow)
|
|
|
|
// if (pageScroll[1] >= 48 && !isShow) {
|
|
// $('.top-header').show()
|
|
// }
|
|
// if (pageScroll[1] < 48 && isShow) {
|
|
// $('.top-header').hide()
|
|
// }
|
|
// })
|
|
|
|
$.ajax({
|
|
url: "./config.json",
|
|
success: function (result) {
|
|
console.log(result, 'result')
|
|
if (result) {
|
|
const { showApp, fontAnimationList, bottomTips, cardList, billingList, billingCardNumber } = result;
|
|
if (!showApp) {
|
|
$('body').html('')
|
|
} else {
|
|
$('.tips').html(bottomTips);
|
|
const cardHtmlArr = cardList.map((item) => {
|
|
const { cardId, cardCode, money } = item
|
|
return `
|
|
<div class="item">
|
|
<div class="card">${cardId} <span>${cardCode}</span></div>
|
|
<div class="money">${money}</div>
|
|
<img class="bg" src="./img/IMG_3619.png" alt="">
|
|
</div>
|
|
`
|
|
})
|
|
|
|
$('.bb-list').html(cardHtmlArr.join(''))
|
|
|
|
const billingHtmlArr = billingList.map(item => {
|
|
const { type, name, amount, time, money } = item;
|
|
|
|
return `
|
|
<div class="item">
|
|
<div class="card-l">
|
|
<div class="row">
|
|
<p class="name">${name}</p>
|
|
${type == 0 ? `<div class="add">${amount}</div>` : ` <div class="add jian">${amount}</div>`
|
|
}
|
|
</div>
|
|
<div class="row">
|
|
<div class="time">${time}</div>
|
|
<div class="ye">余额：${money}</div>
|
|
</div>
|
|
</div>
|
|
<img class="bg" src="./img/m2.png" alt="">
|
|
</div>
|
|
`
|
|
})
|
|
|
|
$('.billing-list').html(billingHtmlArr)
|
|
$('.card-number').text(billingCardNumber)
|
|
$('.box-list').html(`<div>${fontAnimationList[0]}</div><div>${fontAnimationList[1]}</div>`)
|
|
}
|
|
} else {
|
|
$('body').html('')
|
|
}
|
|
}
|
|
});
|
|
})
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|
|
|