Rieko-wang 2 years ago
parent
commit
f6f50fd7a6
  1. 57
      config.json
  2. 71
      css/style.css
  3. BIN
      img/1.jpg
  4. BIN
      img/1的副本.jpg
  5. BIN
      img/IMG_3619.png
  6. 0
      img/IMG_3619的副本.jpg
  7. BIN
      img/list.jpg
  8. BIN
      img/m1.png
  9. 0
      img/m1的副本.jpg
  10. BIN
      img/m2.png
  11. 0
      img/m2的副本.jpg
  12. 0
      img/m3的副本.jpg
  13. BIN
      img/t.jpg
  14. 127
      index.html

57
config.json

@ -18,7 +18,64 @@
"money": "123"
}
],
"fontAnimationList": ["滚动文字1", "滚动文字2"],
"billingList": [
{
"type": "0",
"name": "转存",
"amount": "+10,201.62",
"time": "2022-02-18 05:23:01",
"money": "10,233.88"
},
{
"type": "1",
"name": "转存",
"amount": "-10,201.62",
"time": "2022-02-18 05:23:01",
"money": "00.00"
},
{
"type": "0",
"name": "转存",
"amount": "+10,201.62",
"time": "2022-02-18 05:23:01",
"money": "10,233.88"
},
{
"type": "1",
"name": "转存",
"amount": "-10,201.62",
"time": "2022-02-18 05:23:01",
"money": "00.00"
},
{
"type": "0",
"name": "转存",
"amount": "+10,201.62",
"time": "2022-02-18 05:23:01",
"money": "10,233.88"
},
{
"type": "1",
"name": "转存",
"amount": "-10,201.62",
"time": "2022-02-18 05:23:01",
"money": "00.00"
},
{
"type": "0",
"name": "转存",
"amount": "+10,201.62",
"time": "2022-02-18 05:23:01",
"money": "10,233.88"
},
{
"type": "1",
"name": "转存",
"amount": "-10,201.62",
"time": "2022-02-18 05:23:01",
"money": "00.00"
},
{
"type": "0",
"name": "转存",

71
css/style.css

@ -56,6 +56,9 @@ img {
.container {
width: 100%;
padding-bottom: 6rem;
overflow: hidden;
height: 100vh;
box-sizing: border-box;
}
.bg {
width: 100%;
@ -136,12 +139,17 @@ img {
background-color: #f7f7f7;
padding-top: 48px;
overflow-y: scroll;
box-sizing: border-box;
}
.billing:target {
left: 0;
transition: left 0.4s;
}
.list-class:target .billing-header {
left: 0;
transition: left 0.4s;
}
.account-header {
position: relative;
@ -161,6 +169,11 @@ img {
position: fixed;
}
.container:target .billing-header {
left: 100%;
transition: left 0.4s;
}
.loading {
width: 3rem;
position: fixed;
@ -230,7 +243,6 @@ img {
align-items: center;
/* background-color: red; */
width: 100%;
box-sizing: border-box;
}
.billing-list .name {
@ -285,3 +297,60 @@ img {
padding-right: 1rem;
background-color: #fff;
}
.billing-header {
position: fixed;
top: 48px;
left: 100%;
z-index: 10;
width: 100%;
}
.home-box {
position: relative;
}
.font-animation-box {
position: absolute;
/* background-color: rgba(255, 255, 255, 0.7); */
width: 30%;
left: 25%;
height: 3.2rem;
top: 0.5rem;
font-size: 1.3rem;
color: #fff;
overflow: hidden;
}
.font-animation-box .box-list div {
height: 3.2rem;
display: flex;
align-items: center;
}
.font-animation-box .box-list {
width: 100%;
height: 6.4rem;
position: absolute;
top: 3.2rem;
animation: fonMoveTop 5s infinite backwards;
}
@keyframes fonMoveTop {
0% {
top: 3.2rem;
}
10% {
top: 0;
}
50% {
top: 0;
}
60% {
top: -3.2rem;
}
99.99999% {
top: -3.2rem;
}
100% {
top: 3.2rem;
}
}

BIN
img/1.jpg

Binary file not shown.

Before

Width:  |  Height:  |  Size: 105 KiB

After

Width:  |  Height:  |  Size: 214 KiB

BIN
img/1的副本.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 105 KiB

BIN
img/IMG_3619.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 223 KiB

0
img/IMG_3619.jpg → img/IMG_3619的副本.jpg

Before

Width:  |  Height:  |  Size: 25 KiB

After

Width:  |  Height:  |  Size: 25 KiB

BIN
img/list.jpg

Binary file not shown.

Before

Width:  |  Height:  |  Size: 53 KiB

BIN
img/m1.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 163 KiB

0
img/m1.jpg → img/m1的副本.jpg

Before

Width:  |  Height:  |  Size: 51 KiB

After

Width:  |  Height:  |  Size: 51 KiB

BIN
img/m2.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

0
img/m2.jpg → img/m2的副本.jpg

Before

Width:  |  Height:  |  Size: 30 KiB

After

Width:  |  Height:  |  Size: 30 KiB

0
img/m3.jpg → img/m3的副本.jpg

Before

Width:  |  Height:  |  Size: 28 KiB

After

Width:  |  Height:  |  Size: 28 KiB

BIN
img/t.jpg

Binary file not shown.

Before

Width:  |  Height:  |  Size: 32 KiB

127
index.html

@ -13,36 +13,46 @@
<img class="loading" src="./img/loading.png" alt="">
<div id="home" class="container">
<div id="bb" class="billing">
<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 class="bb-list">
</div>
<img class="bg" style="margin-top: 10px;" src="./img/IMG_3620.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">
<div class="account-header">
<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" src="./img/m1.jpg" alt="">
</div>
<div class="billing-list">
<img class="bg" id="m1" src="./img/m1.png" alt="">
</div>
</div>
<div class="billing-list">
</div>
</div>
<div class="header"></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>
<img class="bg" src="./img/1.jpg" alt="">
<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">
@ -85,52 +95,81 @@
}
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;
};
// 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()
}
})
// 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, bottomTips, cardList, billingList, billingCardNumber } = result;
const { showApp, fontAnimationList, bottomTips, cardList, billingList, billingCardNumber } = result;
if (!showApp) {
$('body').html('')
} else {
@ -141,7 +180,7 @@
<div class="item">
<div class="card">${cardId} <span>${cardCode}</span></div>
<div class="money">${money}</div>
<img class="bg" src="./img/IMG_3619.jpg" alt="">
<img class="bg" src="./img/IMG_3619.png" alt="">
</div>
`
})
@ -164,14 +203,14 @@
<div class="ye">余额:${money}</div>
</div>
</div>
${type == 0 ? ' <img class="bg" src="./img/m2.jpg" alt="">' : ' <img class="bg" src="./img/m3.jpg" alt="">'}
<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('')

Loading…
Cancel
Save