Rieko-wang
2 years ago
@ -0,0 +1,119 @@ |
|||
@media screen and (min-width: 320px) { |
|||
html { |
|||
font-size: 62.5%; |
|||
} |
|||
} |
|||
|
|||
@media screen and (min-width: 360px) { |
|||
html { |
|||
font-size: 65%; |
|||
} |
|||
} |
|||
|
|||
@media screen and (min-width: 384px) { |
|||
html { |
|||
font-size: 67.5%; |
|||
} |
|||
} |
|||
|
|||
@media screen and (min-width: 400px) { |
|||
html { |
|||
font-size: 70%; |
|||
} |
|||
} |
|||
|
|||
* { |
|||
margin: 0; |
|||
padding: 0; |
|||
} |
|||
|
|||
html, |
|||
body { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
|
|||
body { |
|||
background-color: #fff; |
|||
box-sizing: border-box; |
|||
} |
|||
.header { |
|||
width: 100%; |
|||
height: 48px; |
|||
background-color: #000; |
|||
} |
|||
.container { |
|||
width: 100%; |
|||
padding-bottom: 6rem; |
|||
} |
|||
.bg { |
|||
width: 100%; |
|||
} |
|||
.footer { |
|||
position: fixed; |
|||
bottom: 0; |
|||
left: 0; |
|||
z-index: 10; |
|||
} |
|||
.swiper-container { |
|||
width: 100%; |
|||
padding-bottom: 1rem; |
|||
} |
|||
.swiper-container img { |
|||
width: 100%; |
|||
} |
|||
.swiper-slide { |
|||
box-sizing: border-box; |
|||
padding: 1.2rem; |
|||
/* background-color: pink; */ |
|||
} |
|||
.swiper-pagination { |
|||
} |
|||
.swiper-pagination-bullet { |
|||
width: 6px !important; |
|||
height: 6px !important; |
|||
background-color: rgba(0, 0, 0, 0.5) !important; |
|||
} |
|||
.swiper-pagination-bullet-active { |
|||
width: 1rem !important; |
|||
border-radius: 2.3rem !important; |
|||
background-color: #ababab !important; |
|||
} |
|||
|
|||
.tips { |
|||
width: 100%; |
|||
text-align: center; |
|||
line-height: 2; |
|||
} |
|||
.top-header { |
|||
display: none; |
|||
width: 100%; |
|||
position: fixed; |
|||
top: -5px; |
|||
left: 0; |
|||
z-index: 2222; |
|||
} |
|||
|
|||
.banner { |
|||
position: relative; |
|||
} |
|||
|
|||
.banner .account { |
|||
position: absolute; |
|||
background-color: red; |
|||
z-index: 11; |
|||
width: 4rem; |
|||
height: 4rem; |
|||
top: 17rem; |
|||
left: 5rem; |
|||
} |
|||
|
|||
.mx { |
|||
position: absolute; |
|||
background-color: pink; |
|||
z-index: 11; |
|||
width: 4rem; |
|||
height: 4rem; |
|||
top: 17rem; |
|||
left: 20rem; |
|||
} |
|||
|
After Width: | Height: | Size: 295 KiB |
|
After Width: | Height: | Size: 141 KiB |
|
After Width: | Height: | Size: 200 KiB |
|
After Width: | Height: | Size: 242 KiB |
|
After Width: | Height: | Size: 248 KiB |
|
After Width: | Height: | Size: 82 KiB |
|
After Width: | Height: | Size: 24 KiB |
|
After Width: | Height: | Size: 79 KiB |
|
After Width: | Height: | Size: 32 KiB |
@ -0,0 +1,115 @@ |
|||
<!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"> |
|||
<title></title> |
|||
</head> |
|||
|
|||
<body> |
|||
<div class="container"> |
|||
<div class="header"></div> |
|||
<div class="banner"> |
|||
<img class="bg top-header" src="./img/t.jpg" alt=""> |
|||
<div class="account"></div> |
|||
<div class="mx"></div> |
|||
</div> |
|||
<img class="bg" src="./img/1.jpg" alt=""> |
|||
<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 () { |
|||
|
|||
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, bottomTips } = result; |
|||
if (!showApp) { |
|||
$('body').html('') |
|||
} else { |
|||
$('.tips').html(bottomTips) |
|||
} |
|||
} else { |
|||
$('body').html('') |
|||
} |
|||
} |
|||
}); |
|||
}) |
|||
</script> |
|||
</body> |
|||
|
|||
</html> |
|||