crypto/cebg-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改nft页面

Browse Source
This commit is contained in:
cebgcontract 2022-09-28 17:56:34 +08:00
parent 41192dacff
commit d6e8f999ed
10 changed files with 87 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -6,7 +6,7 @@
"scripts": { "scripts": {
"desktop": "webpack --config ./webpack.desktop.js", "desktop": "webpack --config ./webpack.desktop.js",
"mobile": "webpack --config ./webpack.mobile.js", "mobile": "webpack --config ./webpack.mobile.js",
"deploy:prod": "rm -f ./src/.DS_Store && aws s3 sync ./src s3://cebg.games.new --acl public-read --exclude \"pubgv4/*\" --exclude \"release/*\"", "deploy:prod": "rm -f ./dist/.DS_Store && aws s3 sync ./dist s3://cebg.games.new --acl public-read --exclude \"pubgv4/*\" --exclude \"release/*\"",
"refresh:prod": "aws cloudfront create-invalidation --distribution-id EE4HC9OXEQC7Y --paths \"/*\"" "refresh:prod": "aws cloudfront create-invalidation --distribution-id EE4HC9OXEQC7Y --paths \"/*\""
}, },
"author": "", "author": "",

35
src/desktop/nft.html
View File

@ -211,13 +211,27 @@
</section> </section>
</div> </div>
<div class="nft-hero-c weapon-item-c"> <div class="nft-hero-c weapon-item-c">
<a href="javascript:;"><img src="img/nft/weapon/wp1@2x.png" /></a> <a href="javascript:;" data-imgdetail="img/nft/weapon/wp-00@2x.png">
<a href="javascript:;"><img src="img/nft/weapon/wp2@2x.png" /></a> <img src="img/nft/weapon/wp1@2x.png" />
<a href="javascript:;"><img src="img/nft/weapon/wp3@2x.png" /></a> </a>
<a href="javascript:;"><img src="img/nft/weapon/wp4@2x.png" /></a> <a href="javascript:;" data-imgdetail="img/nft/weapon/wp-01@2x.png">
<a href="javascript:;"><img src="img/nft/weapon/wp5@2x.png" /></a> <img src="img/nft/weapon/wp2@2x.png" />
<a href="javascript:;"><img src="img/nft/weapon/wp6@2x.png" /></a> </a>
<a href="javascript:;"><img src="img/nft/weapon/wp7@2x.png" /></a> <a href="javascript:;" data-imgdetail="img/nft/weapon/wp-02@2x.png">
<img src="img/nft/weapon/wp3@2x.png" />
</a>
<a href="javascript:;" data-imgdetail="img/nft/weapon/wp-03@2x.png">
<img src="img/nft/weapon/wp4@2x.png" />
</a>
<a href="javascript:;" data-imgdetail="img/nft/weapon/wp-04@2x.png">
<img src="img/nft/weapon/wp5@2x.png" />
</a>
<a href="javascript:;" data-imgdetail="img/nft/weapon/wp-05@2x.png">
<img src="img/nft/weapon/wp6@2x.png" />
</a>
<a href="javascript:;" data-imgdetail="img/nft/weapon/wp-06@2x.png">
<img src="img/nft/weapon/wp7@2x.png" />
</a>
</div> </div>
</div> </div>
<div class="nft-hero"> <div class="nft-hero">
@ -609,16 +623,15 @@
}) })
}) })
function silde(_index) { function silde(_index) {
var items = $('.weapon-item-c a')
var img = $(items[_index]).data('imgdetail')
mySwiper = $( mySwiper = $(
'.weapon-silder .swiper-slide-active .swiper-nested-1', '.weapon-silder .swiper-slide-active .swiper-nested-1',
).swiper({ ).swiper({
prevButton: '.weapon-silder .swiper-slide-active .prev', prevButton: '.weapon-silder .swiper-slide-active .prev',
nextButton: '.weapon-silder .swiper-slide-active .next', nextButton: '.weapon-silder .swiper-slide-active .next',
}) })
$('.weapon-view .hero-d-data img').attr( $('.weapon-view .hero-d-data img').attr('src', img)
'src',
'img/nft/weapon/wp-0' + _index + '@2x.png',
)
} }
</script> </script>
</body> </body>

67
src/mobile/NFT.html
View File

@ -64,7 +64,7 @@
<div class="desc-in-model"> <div class="desc-in-model">
<div class="desc-inner"> <div class="desc-inner">
<span class="desc-close"> <span class="desc-close">
<img src="imgMobile/nft/hero/close2-b.png" /> <img src="imgMobile/nft/hero/close2-b@2x.png" />
</span> </span>
<h3 class="na-he">Usage</h3> <h3 class="na-he">Usage</h3>
<p class="na-he"> <p class="na-he">
@ -180,7 +180,7 @@
<div class="desc-in-model"> <div class="desc-in-model">
<div class="desc-inner weapon-inner"> <div class="desc-inner weapon-inner">
<span class="desc-close"> <span class="desc-close">
<img src="imgMobile/nft/hero/close2-b.png" /> <img src="imgMobile/nft/hero/close2-b@2x.png" />
</span> </span>
<h3 class="na-he">Usage</h3> <h3 class="na-he">Usage</h3>
<p class="na-he"> <p class="na-he">
@ -214,13 +214,27 @@
</section> </section>
</div> </div>
<div class="nft-hero-c weapon-item-c"> <div class="nft-hero-c weapon-item-c">
<a href="javascript:;"><img src="img/nft/weapon/wp1@2x.png" /></a> <a href="javascript:;" data-imgdetail="img/nft/weapon/wp-00@2x.png">
<a href="javascript:;"><img src="img/nft/weapon/wp2@2x.png" /></a> <img src="img/nft/weapon/wp1@2x.png" />
<a href="javascript:;"><img src="img/nft/weapon/wp3@2x.png" /></a> </a>
<a href="javascript:;"><img src="img/nft/weapon/wp4@2x.png" /></a> <a href="javascript:;" data-imgdetail="img/nft/weapon/wp-01@2x.png">
<a href="javascript:;"><img src="img/nft/weapon/wp5@2x.png" /></a> <img src="img/nft/weapon/wp2@2x.png" />
<a href="javascript:;"><img src="img/nft/weapon/wp6@2x.png" /></a> </a>
<a href="javascript:;"><img src="img/nft/weapon/wp7@2x.png" /></a> <a href="javascript:;" data-imgdetail="img/nft/weapon/wp-02@2x.png">
<img src="img/nft/weapon/wp3@2x.png" />
</a>
<a href="javascript:;" data-imgdetail="img/nft/weapon/wp-03@2x.png">
<img src="img/nft/weapon/wp4@2x.png" />
</a>
<a href="javascript:;" data-imgdetail="img/nft/weapon/wp-04@2x.png">
<img src="img/nft/weapon/wp5@2x.png" />
</a>
<a href="javascript:;" data-imgdetail="img/nft/weapon/wp-05@2x.png">
<img src="img/nft/weapon/wp6@2x.png" />
</a>
<a href="javascript:;" data-imgdetail="img/nft/weapon/wp-06@2x.png">
<img src="img/nft/weapon/wp7@2x.png" />
</a>
</div> </div>
</div> </div>
<div class="nft-hero"> <div class="nft-hero">
@ -233,7 +247,7 @@
<div class="desc-in-model"> <div class="desc-in-model">
<div class="desc-inner chip-inner"> <div class="desc-inner chip-inner">
<span class="desc-close"> <span class="desc-close">
<img src="imgMobile/nft/hero/close2-b.png" /> <img src="imgMobile/nft/hero/close2-b@2x.png" />
</span> </span>
<h3 class="na-he">Usage</h3> <h3 class="na-he">Usage</h3>
<p class="na-he"> <p class="na-he">
@ -273,7 +287,7 @@
<div class="hero-d-layer-con"> <div class="hero-d-layer-con">
<img src="imgMobile/nft/hero/herodbg@2x.png" width="100%" /> <img src="imgMobile/nft/hero/herodbg@2x.png" width="100%" />
<span class="hero-d-close"> <span class="hero-d-close">
<img src="imgMobile/nft/hero/close-b.png" /> <img src="imgMobile/nft/weapon/close-b@2x.png" />
</span> </span>
<span class="hero-d-p"> <span class="hero-d-p">
<img src="img/nft/hero/hero1-d@2x.png" /> <img src="img/nft/hero/hero1-d@2x.png" />
@ -294,7 +308,7 @@
<div class="hero-d-layer-con"> <div class="hero-d-layer-con">
<!-- <img src="imgMobile/nft/weapon/weapbg@2x.png" width="100%"/> --> <!-- <img src="imgMobile/nft/weapon/weapbg@2x.png" width="100%"/> -->
<span class="hero-d-close"> <span class="hero-d-close">
<img src="imgMobile/nft/weapon/close-b.png" /> <img src="imgMobile/nft/weapon/close-b@2x.png" />
</span> </span>
<div class="weapon-silder"> <div class="weapon-silder">
<div class="swiper-container swiper-container-0"> <div class="swiper-container swiper-container-0">
@ -566,11 +580,29 @@
var mySwiper = '' var mySwiper = ''
var mySwiper2 = '' var mySwiper2 = ''
$(function () { $(function () {
let bodyEl = document.body
let top = 0
function stopBodyScroll(isFixed) {
if (isFixed) {
top = window.scrollY
bodyEl.style.position = 'fixed'
bodyEl.style.top = -top + 'px'
} else {
bodyEl.style.position = ''
bodyEl.style.top = ''
window.scrollTo(0, top)
}
}
$('.desc-btn').click(function () { $('.desc-btn').click(function () {
$(this).next('.desc-wrap').slideDown(250) $(this).next('.desc-wrap').slideDown(250)
stopBodyScroll(true)
}) })
$('.desc-close').click(function () { $('.desc-close').click(function () {
$(this).parents('.desc-wrap').slideUp(250) $(this).parents('.desc-wrap').slideUp(250)
stopBodyScroll(false)
}) })
$('.hero-item-c a').click(function () { $('.hero-item-c a').click(function () {
@ -582,10 +614,12 @@
.find('.hero-d-p img') .find('.hero-d-p img')
.attr('src', bigImg) .attr('src', bigImg)
$('.hero-view').find('.hero-d-data img').attr('src', imgDetail) $('.hero-view').find('.hero-d-data img').attr('src', imgDetail)
stopBodyScroll(true)
}) })
$('.hero-d-close').click(function () { $('.hero-d-close').click(function () {
$(this).parents('.hero-d-layer').slideUp(250) $(this).parents('.hero-d-layer').slideUp(250)
stopBodyScroll(false)
}) })
$('.weapon-item-c a').click(function () { $('.weapon-item-c a').click(function () {
@ -597,7 +631,7 @@
.find('.hero-d-p img') .find('.hero-d-p img')
.attr('src', bigImg) .attr('src', bigImg)
$('.weapon-view').find('.hero-d-data img').attr('src', imgDetail) $('.weapon-view').find('.hero-d-data img').attr('src', imgDetail)
stopBodyScroll(true)
mySwiper2 = $('.weapon-silder .swiper-container-0').swiper({ mySwiper2 = $('.weapon-silder .swiper-container-0').swiper({
// loop: true, // loop: true,
direction: 'vertical', direction: 'vertical',
@ -620,16 +654,15 @@
}) })
}) })
function silde(_index) { function silde(_index) {
var items = $('.weapon-item-c a')
var img = $(items[_index]).data('imgdetail')
mySwiper = $( mySwiper = $(
'.weapon-silder .swiper-slide-active .swiper-nested-1', '.weapon-silder .swiper-slide-active .swiper-nested-1',
).swiper({ ).swiper({
prevButton: '.weapon-silder .swiper-slide-active .prev', prevButton: '.weapon-silder .swiper-slide-active .prev',
nextButton: '.weapon-silder .swiper-slide-active .next', nextButton: '.weapon-silder .swiper-slide-active .next',
}) })
$('.weapon-view .hero-d-data img').attr( $('.weapon-view .hero-d-data img').attr('src', img)
'src',
'img/nft/weapon/wp-0' + _index + '@2x.png',
)
} }
</script> </script>
</body> </body>

12
src/mobile/css/main.css
View File

@ -716,6 +716,7 @@ span.swiper-pagination-bullet {
height: 100%; height: 100%;
width: calc(100%); width: calc(100%);
overflow-y: auto; overflow-y: auto;
background: #000000bd;
} }
.desc-wrap .desc-close { .desc-wrap .desc-close {
@ -725,6 +726,10 @@ span.swiper-pagination-bullet {
cursor: pointer; cursor: pointer;
-webkit-tap-highlight-color:transparent; -webkit-tap-highlight-color:transparent;
} }
.desc-wrap .desc-close img{
width: 34px;
height: 34px;
}
.desc-inner { .desc-inner {
background: url('../imgMobile/nft/hero/layerbg@2x.png') no-repeat center top; background: url('../imgMobile/nft/hero/layerbg@2x.png') no-repeat center top;
@ -738,7 +743,7 @@ span.swiper-pagination-bullet {
.chip-inner { .chip-inner {
background: url("../imgMobile/nft/chip/chip-layer-bg@2x.png") no-repeat center top; background: url("../imgMobile/nft/chip/chip-layer-bg@2x.png") no-repeat center top;
background-size: 100% auto; background-size: 100% 100%;
height: 310px; height: 310px;
} }
@ -774,6 +779,7 @@ span.swiper-pagination-bullet {
height: calc(100% + 26px); height: calc(100% + 26px);
width: calc(100%); width: calc(100%);
overflow-y: auto; overflow-y: auto;
background: #000000bd;
} }
@ -795,6 +801,10 @@ span.swiper-pagination-bullet {
z-index: 12; z-index: 12;
-webkit-tap-highlight-color:transparent; -webkit-tap-highlight-color:transparent;
} }
.hero-d-close img{
width: 58px;
height: 58px;
}
.hero-d-p { .hero-d-p {
position: absolute; position: absolute;

BIN
src/mobile/imgMobile/nft/chip/chip-layer-bg1@2x.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 166 KiB

BIN
src/mobile/imgMobile/nft/chip/chip-layer-bg@2x.png Executable file → Normal file
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 166 KiB

After

Width:  |  Height:  |  Size: 200 KiB

BIN
src/mobile/imgMobile/nft/hero/close2-b@2x.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
src/mobile/imgMobile/nft/hero/layerbg@2x.png Executable file → Normal file
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 337 KiB

After

Width:  |  Height:  |  Size: 157 KiB

BIN
src/mobile/imgMobile/nft/weapon/close-b@2x.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

1
webpack.mobile.js
View File

@ -24,6 +24,7 @@ entryFiles.map((entryFile) => {
module.exports = { module.exports = {
mode: 'production', mode: 'production',
// mode: 'development',
entry: './src/mobile/js/app.js', entry: './src/mobile/js/app.js',
output: { output: {
path: path.resolve(__dirname, 'dist/mobile'), path: path.resolve(__dirname, 'dist/mobile'),