diff --git a/public/index.html b/public/index.html index bba5f0a..45ca655 100644 --- a/public/index.html +++ b/public/index.html @@ -5,7 +5,8 @@ - + + <%= htmlWebpackPlugin.options.title %> diff --git a/src/assets/main/card/aoi.png b/src/assets/main/card/aoi.png new file mode 100644 index 0000000..c04da4f Binary files /dev/null and b/src/assets/main/card/aoi.png differ diff --git a/src/assets/main/card/astral.png b/src/assets/main/card/astral.png new file mode 100644 index 0000000..dd499b8 Binary files /dev/null and b/src/assets/main/card/astral.png differ diff --git a/src/assets/main/card/canoe.png b/src/assets/main/card/canoe.png new file mode 100644 index 0000000..b3db633 Binary files /dev/null and b/src/assets/main/card/canoe.png differ diff --git a/src/assets/main/card/card_bg.png b/src/assets/main/card/card_bg.png new file mode 100644 index 0000000..41b146d Binary files /dev/null and b/src/assets/main/card/card_bg.png differ diff --git a/src/assets/main/card/card_border.png b/src/assets/main/card/card_border.png new file mode 100644 index 0000000..efbfdf9 Binary files /dev/null and b/src/assets/main/card/card_border.png differ diff --git a/src/assets/main/card/class_0.png b/src/assets/main/card/class_0.png new file mode 100644 index 0000000..b410b3e Binary files /dev/null and b/src/assets/main/card/class_0.png differ diff --git a/src/assets/main/card/class_1.png b/src/assets/main/card/class_1.png new file mode 100644 index 0000000..7af4b59 Binary files /dev/null and b/src/assets/main/card/class_1.png differ diff --git a/src/assets/main/card/class_2.png b/src/assets/main/card/class_2.png new file mode 100644 index 0000000..07f8eed Binary files /dev/null and b/src/assets/main/card/class_2.png differ diff --git a/src/assets/main/card/dragonscale.png b/src/assets/main/card/dragonscale.png new file mode 100644 index 0000000..a2ced55 Binary files /dev/null and b/src/assets/main/card/dragonscale.png differ diff --git a/src/assets/main/card/hill.png b/src/assets/main/card/hill.png new file mode 100644 index 0000000..5e41e9d Binary files /dev/null and b/src/assets/main/card/hill.png differ diff --git a/src/assets/main/card/icon_buy.png b/src/assets/main/card/icon_buy.png new file mode 100644 index 0000000..37777ee Binary files /dev/null and b/src/assets/main/card/icon_buy.png differ diff --git a/src/assets/main/card/kurosawa.png b/src/assets/main/card/kurosawa.png new file mode 100644 index 0000000..0534fea Binary files /dev/null and b/src/assets/main/card/kurosawa.png differ diff --git a/src/assets/main/card/lazar.png b/src/assets/main/card/lazar.png new file mode 100644 index 0000000..383cd45 Binary files /dev/null and b/src/assets/main/card/lazar.png differ diff --git a/src/assets/main/card/mariana.png b/src/assets/main/card/mariana.png new file mode 100644 index 0000000..3442cae Binary files /dev/null and b/src/assets/main/card/mariana.png differ diff --git a/src/assets/main/card/miffy.png b/src/assets/main/card/miffy.png new file mode 100644 index 0000000..2c35aab Binary files /dev/null and b/src/assets/main/card/miffy.png differ diff --git a/src/assets/main/card/n_aoi.png b/src/assets/main/card/n_aoi.png new file mode 100644 index 0000000..3f81c06 Binary files /dev/null and b/src/assets/main/card/n_aoi.png differ diff --git a/src/assets/main/card/n_astral.png b/src/assets/main/card/n_astral.png new file mode 100644 index 0000000..b7be0e9 Binary files /dev/null and b/src/assets/main/card/n_astral.png differ diff --git a/src/assets/main/card/n_canoe.png b/src/assets/main/card/n_canoe.png new file mode 100644 index 0000000..fecf031 Binary files /dev/null and b/src/assets/main/card/n_canoe.png differ diff --git a/src/assets/main/card/n_dragonscale.png b/src/assets/main/card/n_dragonscale.png new file mode 100644 index 0000000..a50d971 Binary files /dev/null and b/src/assets/main/card/n_dragonscale.png differ diff --git a/src/assets/main/card/n_hill.png b/src/assets/main/card/n_hill.png new file mode 100644 index 0000000..95c1930 Binary files /dev/null and b/src/assets/main/card/n_hill.png differ diff --git a/src/assets/main/card/n_kurosawa.png b/src/assets/main/card/n_kurosawa.png new file mode 100644 index 0000000..cc4a9f4 Binary files /dev/null and b/src/assets/main/card/n_kurosawa.png differ diff --git a/src/assets/main/card/n_lazar.png b/src/assets/main/card/n_lazar.png new file mode 100644 index 0000000..c81ed98 Binary files /dev/null and b/src/assets/main/card/n_lazar.png differ diff --git a/src/assets/main/card/n_mariana.png b/src/assets/main/card/n_mariana.png new file mode 100644 index 0000000..11b9020 Binary files /dev/null and b/src/assets/main/card/n_mariana.png differ diff --git a/src/assets/main/card/n_miffy.png b/src/assets/main/card/n_miffy.png new file mode 100644 index 0000000..98e1f6a Binary files /dev/null and b/src/assets/main/card/n_miffy.png differ diff --git a/src/assets/main/card/n_yamada.png b/src/assets/main/card/n_yamada.png new file mode 100644 index 0000000..cb726d1 Binary files /dev/null and b/src/assets/main/card/n_yamada.png differ diff --git a/src/assets/main/card/name_bg.png b/src/assets/main/card/name_bg.png new file mode 100644 index 0000000..a537d8a Binary files /dev/null and b/src/assets/main/card/name_bg.png differ diff --git a/src/assets/main/card/price_bg.png b/src/assets/main/card/price_bg.png new file mode 100644 index 0000000..4ffa1eb Binary files /dev/null and b/src/assets/main/card/price_bg.png differ diff --git a/src/assets/main/card/yamada.png b/src/assets/main/card/yamada.png new file mode 100644 index 0000000..7b8e7e6 Binary files /dev/null and b/src/assets/main/card/yamada.png differ diff --git a/src/components/main/Card.vue b/src/components/main/Card.vue index 48f170d..d5ccbc6 100644 --- a/src/components/main/Card.vue +++ b/src/components/main/Card.vue @@ -1,13 +1,16 @@ @@ -30,7 +31,7 @@ export default class extends Vue { } .title { position: absolute; - top: 58px; + top: 100px; left: 0; right: 0; display: flex; @@ -44,6 +45,9 @@ export default class extends Vue { .title .text{ color: white; font-size: 28px; + margin: 10px 15px; + text-align: center; + text-shadow: 0 0 0.1em #fbc369, 0 0 0.1em #fbc369; } .main-img{ width: 87vw; @@ -54,4 +58,28 @@ export default class extends Vue { margin-left: auto; margin-right: auto; } +.main-img_2 { + display: none; +} +@media (max-width: 767px) { + .main-img{ + display: none; + } + .title img { + width: 281px; + } + .title .text{ + font-size: 14px; + } + .main-img_2{ + display: block; + width: 90vw; + position: absolute; + left: 0; + right: 0; + bottom: 20vh; + margin-left: auto; + margin-right: auto; + } +} diff --git a/src/components/main/GamePlaySection.vue b/src/components/main/GamePlaySection.vue index afac18b..13511bf 100644 --- a/src/components/main/GamePlaySection.vue +++ b/src/components/main/GamePlaySection.vue @@ -2,16 +2,29 @@
- hi you ar + Earn your NFTs item by playing the game and sell it on the markedplace to make money.
-
- - - some thing error - +
' +
+ + + Earn your NFTs item by playing the game and sell it on the markedplace to make money. + +
+
+
+ +
@@ -29,6 +42,16 @@ import SpineView from '@/components/main/SpineView.vue' }) export default class extends Vue { private hero: ISpineData = { id: 'hero10', skelName: 'pic_hero10', animName: 'animation', repeat: true, scale: 1.2 } + private videoShow = false + private videoUrl = 'https://cdn.cebg.games/video/v2.mp4' + showVideo() { + this.videoShow = true + } + + hideVideo() { + this.videoShow = false + console.log('hide video') + } } @@ -44,7 +67,7 @@ export default class extends Vue { flex-direction: column; position: absolute; left: 0; - top: 38px; + top: 100px; right: 0; margin: auto; width: 50vw; @@ -70,12 +93,16 @@ export default class extends Vue { right: 0; bottom: 18vh; position: absolute; + padding-bottom: 77px; + padding-top: 20px; +} +.color-content { display: flex; flex-direction: column; align-items: center; justify-content: space-between; - padding-bottom: 77px; - padding-top: 20px; + width: 100%; + height: 80%; } .logo_t { width: 151px; @@ -111,4 +138,103 @@ export default class extends Vue { background-image: url('~@/assets/main/p2/bg_bottom.png'); background-repeat: repeat-x; } +.video-bg{ + width: 100%; + height: 100%; + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + z-index: 14; +} +.video-div { + width: 70vw; + height: 40vw; + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + margin: auto; + z-index: 15; +} +.video-div video { + width: 100%; + height: 100%; +} +@media (max-width: 767px) { + .title { + top: 60px; + } + .title img { + width: 100%; + } + .hero-anim{ + width: 450px; + height: 600px; + left: 10px; + } + .color-view{ + width: 100vw; + height: 50vh; + bottom: 8vh; + display: flex; + justify-content: end; + } + .color-content { + width: 50%; + justify-content: flex-start; + } + .logo_t{ + width: 90px; + height: 70px; + margin-bottom: 8px; + } + .logo_b { + width: 180px; + height: auto; + margin-bottom: 80px; + } + .watch_btn{ + width: 190px; + height: 60px; + margin-top: 100px; + } + + .title .tips { + color: white; + font-size: 14px; + text-align: center; + text-shadow: 0 0 0.1em #fbc369, 0 0 0.1em #fbc369; + } + .color-view .text{ + color: white; + font-size: 14px; + text-align: center; + text-shadow: 0 0 0.1em #fbc369, 0 0 0.1em #fbc369; + } + .video-div { + width: 100vw; + height: 56vw; + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + margin: auto; + z-index: 15; + } +} +@media (max-width: 415px) { + .hero-anim{ + width: 200px; + height: 500px; + left: 10px; + } + .color-content { + width: 70%; + justify-content: flex-start; + } +} diff --git a/src/components/main/HomeHero.vue b/src/components/main/HomeHero.vue index 803d790..c7d2a9b 100644 --- a/src/components/main/HomeHero.vue +++ b/src/components/main/HomeHero.vue @@ -35,22 +35,41 @@ export default class extends Vue { diff --git a/src/components/main/HomeSection.vue b/src/components/main/HomeSection.vue index dd83771..1e7624b 100644 --- a/src/components/main/HomeSection.vue +++ b/src/components/main/HomeSection.vue @@ -12,7 +12,7 @@
- +
@@ -34,10 +34,10 @@ import HomeHero from '@/components/main/HomeHero.vue' }) export default class extends Vue { private heros: ISpineData[] = [ - { id: 'hero1', skelName: 'pic_hero2', animName: 'animation', repeat: true }, - { id: 'hero2', skelName: 'pic_hero3', animName: 'animation', repeat: true }, - { id: 'hero3', skelName: 'pic_hero9', animName: 'animation', repeat: true }, - { id: 'hero4', skelName: 'pic_hero1', animName: 'animation', repeat: true } + { id: 'hero1', skelName: 'pic_hero2', animName: 'animation', repeat: true, scale: 1.1 }, + { id: 'hero2', skelName: 'pic_hero3', animName: 'animation', repeat: true, scale: 1.1 }, + { id: 'hero3', skelName: 'pic_hero9', animName: 'animation', repeat: true, scale: 1.1 }, + { id: 'hero4', skelName: 'pic_hero1', animName: 'animation', repeat: true, scale: 1.1 } ] } @@ -77,14 +77,48 @@ export default class extends Vue { position: relative; display: flex; flex-direction: column-reverse; + overflow: hidden; } .spine-list{ display: flex; + justify-content: space-between; } -.hero-anim { - width: 400px; - height: 800px; - margin-left: -90px; - margin-right: -90px; +.hero-von:not(:first-child){ + margin-left: -120px; +} + +@media (max-width: 767px) { + #home_section{ + flex-direction: column; + align-items: center; + } + .home_left_panel{ + width: 100vw; + align-items: center; + margin-top: 20px; + } + .home_right_panel { + width: 100vw; + height: 50vh; + } + .spine-list{ + } + + .home_left_panel .one_row:first-child{ + margin-left: 0; + } + .one_row img { + max-width: 100%; + } + .version_list_panel img{ + width: 25vw; + margin-right: 5px; + } + .hero-von:not(:first-child){ + margin-left: -100px; + } +} +@media (max-width: 415px) { + } diff --git a/src/components/main/MainFooter.vue b/src/components/main/MainFooter.vue index 98f5ea7..38c8dbc 100644 --- a/src/components/main/MainFooter.vue +++ b/src/components/main/MainFooter.vue @@ -63,8 +63,8 @@ export default class extends Vue { .centerPart{ width: 50vw; display: grid; - grid-template-columns: 33% 33% 33%; - grid-template-rows: 80px 80px 80px; + grid-template-columns: repeat(3, 33.33%); + grid-template-rows: repeat(3, 80px); padding-top: 50px; } .link-list a{ @@ -96,4 +96,35 @@ export default class extends Vue { .community-list a img{ width: 50px; } + @media (max-width: 767px) { + .footer{ + flex-direction: column; + align-items: center; + } + .centerPart{ + width: 80vw; + display: grid; + grid-template-rows: repeat(3, 30px); + padding-top: 30px; + } + .community-title { + width: 80vw; + display: flex; + justify-content: center; + } + .rightPart{ + width: 80vw; + padding: 20px; + } + } + @media (max-width: 415px) { + .link-list a{ + font-size: 14px; + } + } + @media (max-width: 376px) { + .link-list a{ + font-size: 12px; + } + } diff --git a/src/components/main/MainHeader.vue b/src/components/main/MainHeader.vue index 2911a87..e05da46 100644 --- a/src/components/main/MainHeader.vue +++ b/src/components/main/MainHeader.vue @@ -1,7 +1,16 @@