Rieko
/
first-android-config
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

123

main
Rieko-wang 2 years ago
parent
6c878a0d1e
commit
84a216b23e
2 changed files with 71 additions and 28 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 46
      css/style.css
  2. 53
      index.html

46
css/style.css
View File

@ -140,11 +140,45 @@ img {
/* padding-top: 48px; */ /* padding-top: 48px; */
overflow-y: scroll; overflow-y: scroll;
box-sizing: border-box; box-sizing: border-box;
transition: left 0.4s;
}
.my-account {
width: 100%;
height: 100%;
left: 100%;
position: fixed;
z-index: 99;
background-color: #f7f7f7;
/* padding-top: 48px; */
overflow-y: scroll;
box-sizing: border-box;
transition: left 0.4s;
}
.my-account:target {
left: 0;
}
@keyframes moveLeft {
0% {
let: 100%;
}
100% {
let: 70%;
}
} }
@keyframes moveRight {
0% {
let: 0%;
}
100% {
let: 100%;
}
}
.billing:target { .billing:target {
left: 0; left: 0;
transition: left 0.4s; /* transition: left 0.4s; */
} }
.list-class:target .billing-header { .list-class:target .billing-header {
left: 0; left: 0;
@ -163,16 +197,16 @@ img {
z-index: 99; z-index: 99;
} }
.container:target .billing { /* .container:target .billing {
left: 100%; left: 100%;
transition: left 0.4s;
position: fixed; position: fixed;
} }
.container:target .billing-header { .container:target .billing-header {
left: 100%; left: 100%;
transition: left 0.4s; transition: left 0.4s;
} } */
.loading { .loading {
width: 3rem; width: 3rem;
@ -392,3 +426,7 @@ img {
background-color: #f3b046; background-color: #f3b046;
color: #fff; color: #fff;
} }
.moveRight {
left: 0 !important;
}

53
index.html
View File

@ -11,34 +11,34 @@
<body> <body>
<img class="loading" src="./img/loading.png" alt=""> <img class="loading" src="./img/loading.png" alt="">
<div id="bb" class="my-account">
<div id="home" class="container"> <div class="account-header">
<div id="bb" class="billing my-account"> <a href="#home" class="account-back"></a>
<div class="account-header"> <img class="bg" src="./img/account.jpg" alt="">
<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>
<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 id="list" class="billing list-class">
<div class="account-header billing-header"> <div class="account-header billing-header">
<a href="javascript:history.back(-1)" class="account-back"></a> <a href="javascript:history.back(-1)" class="account-back"></a>
<div class="card-box"> <div class="card-box">
<div class="card-number"></div> <div class="card-number"></div>
<img class="bg" id="m1" src="./img/m1.png" alt=""> <img class="bg" id="m1" src="./img/m1.png" alt="">
<div class="filter"> <div class="filter">
<div class="filter-item active" data-query-key="nearlyWeek">近一周</div> <div class="filter-item active" data-query-key="nearlyWeek">近一周</div>
<div class="filter-item" data-query-key="nearlyMonth">近一月</div> <div class="filter-item" data-query-key="nearlyMonth">近一月</div>
<div class="filter-item" data-query-key="lastThreeMonths">近三月</div> <div class="filter-item" data-query-key="lastThreeMonths">近三月</div>
</div>
</div> </div>
</div> </div>
<div class="billing-list">
</div>
</div> </div>
<div class="billing-list">
</div>
</div>
<div id="home" class="container">
<div class="header"> <div class="header">
@ -137,6 +137,7 @@
$('.filter-item').click(function () { $('.filter-item').click(function () {
hideLoading(); hideLoading();
$('.loading').show(); $('.loading').show();
$('.filter-item').removeClass('active'); $('.filter-item').removeClass('active');
const key = $(this).attr('data-query-key'); const key = $(this).attr('data-query-key');
@ -179,7 +180,6 @@
} }
}) })
function renderBillingDom(arr) { function renderBillingDom(arr) {
const billingHtmlArr = arr.map(item => { const billingHtmlArr = arr.map(item => {
const { type, name, amount, time, money } = item; const { type, name, amount, time, money } = item;
@ -202,6 +202,10 @@
$('.billing-list').html(billingHtmlArr) $('.billing-list').html(billingHtmlArr)
} }
$('.account-back').click(function () {
$('.my-account').removeClass('moveRight')
})
$.ajax({ $.ajax({
url: "./config.json", url: "./config.json",
@ -230,6 +234,7 @@
$('.box-list').html(`<div>${fontAnimationList[0]}</div><div>${fontAnimationList[1]}</div>`) $('.box-list').html(`<div>${fontAnimationList[0]}</div><div>${fontAnimationList[1]}</div>`)
$('.toList').each(function () { $('.toList').each(function () {
$(this).click(() => { $(this).click(() => {
$('.my-account ').addClass('moveRight')
console.log($(this).attr('data-index'), 'wwww') console.log($(this).attr('data-index'), 'wwww')
$('.card-number').text(cardList[$(this).attr('data-index')]?.cardId) $('.card-number').text(cardList[$(this).attr('data-index')]?.cardId)
}) })

Write Preview
Loading…
Cancel
Save