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

newcebg

Browse Source
This commit is contained in:
huangjinming 2023-02-24 11:21:23 +08:00
parent 0b82f8613b
commit 5521bc4849
9 changed files with 33 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/img/home/gameplay.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 13 KiB

4
src/components/home/ChipCard.vue
View File

@ -45,9 +45,9 @@
</div> </div>
<!-- <div class="chip-top"></div> --> <!-- <div class="chip-top"></div> -->
</div> </div>
<div class="chip-bg"> <!-- <div class="chip-bg">
<img src="@/assets/img/home/weapon-bg.png" alt="" /> <img src="@/assets/img/home/weapon-bg.png" alt="" />
</div> </div> -->
</div> </div>
</div> </div>
</template> </template>

4
src/components/home/GameGallerp.vue
View File

@ -175,12 +175,14 @@ function handleScroll() {
padding-top: 157px; padding-top: 157px;
padding-bottom: 310px; padding-bottom: 310px;
position: relative; position: relative;
z-index: 3; z-index: 3;
.gallery-title { .gallery-title {
width: 573px; width: 573px;
height: 60px; height: 60px;
margin: 0 auto; margin: 0 auto;
font-size: 108px; text-align: center;
font-size: 76px;
font-family: "Big John"; font-family: "Big John";
color: #0f0e0e; color: #0f0e0e;

30
src/components/home/GameIntroduction.vue
View File

@ -17,15 +17,15 @@
</div> </div>
</div> </div>
<div class="content"> <div class="content">
<div v-if="activeTab === 0"> <transition name="fade">
<HeroCard></HeroCard> <div class="item">
</div> <XyzTransitionGroup class="item-group" xyz="fade-100%">
<div v-if="activeTab === 1"> <HeroCard v-if="activeTab === 0"></HeroCard>
<WeaponCard></WeaponCard> <WeaponCard v-if="activeTab === 1"></WeaponCard>
</div> <ChipCard v-if="activeTab === 2"></ChipCard>
<div v-if="activeTab === 2"> </XyzTransitionGroup>
<ChipCard></ChipCard> </div>
</div> </transition>
</div> </div>
<div class="game-bg"> <div class="game-bg">
<img src="@/assets/img/home/weapon-bg.png" alt="" /> <img src="@/assets/img/home/weapon-bg.png" alt="" />
@ -65,6 +65,9 @@ function handactiveTab(index) {
.tabs { .tabs {
width: 1440px; width: 1440px;
margin: 0 auto; margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
} }
.game-bg { .game-bg {
position: absolute; position: absolute;
@ -114,4 +117,13 @@ function handactiveTab(index) {
.tab.active { .tab.active {
background-color: #f00; background-color: #f00;
} }
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
</style> </style>

4
src/components/home/HeroCard.vue
View File

@ -12,9 +12,9 @@
> >
HERO HERO
</div> </div>
<div class="hero-bg"> <!-- <div class="hero-bg">
<img src="@/assets/img/home/weapon-bg.png" alt="" /> <img src="@/assets/img/home/weapon-bg.png" alt="" />
</div> </div> -->
</div> </div>
<div class="centent-right"></div> <div class="centent-right"></div>
</div> </div>

4
src/components/home/WeaponCard.vue
View File

@ -22,9 +22,9 @@
</div> --> </div> -->
<WeaponSwiper></WeaponSwiper> <WeaponSwiper></WeaponSwiper>
</div> </div>
<div class="weapon-bg"> <!-- <div class="weapon-bg">
<img src="@/assets/img/home/weapon-bg.png" alt="" /> <img src="@/assets/img/home/weapon-bg.png" alt="" />
</div> </div> -->
</div> </div>
</div> </div>
</template> </template>

2
src/components/home/WeaponSwiper.vue
View File

@ -22,7 +22,7 @@
<div class="thumbs_weapon_container"> <div class="thumbs_weapon_container">
<Swiper <Swiper
@swiper="setWeaponThumbsSwiper" @swiper="setWeaponThumbsSwiper"
:slides-per-view="7" :slides-per-view="4"
:modules="modules" :modules="modules"
:space-between="23" :space-between="23"
class="weaponThumbs" class="weaponThumbs"

5
src/components/home/WhatCebg.vue
View File

@ -101,7 +101,7 @@
<script setup> <script setup>
import { ref, onMounted } from "vue"; import { ref, onMounted } from "vue";
import BgSwitchButton from "./BgSwitchButton.vue";
const Y1 = ref(0); const Y1 = ref(0);
const ratio = ref(0.2); //视差偏移率 const ratio = ref(0.2); //视差偏移率
const isPveTab = ref(false); const isPveTab = ref(false);
@ -123,8 +123,7 @@ function handleScroll() {
document.documentElement.scrollTop || document.documentElement.scrollTop ||
document.body.scrollTop; document.body.scrollTop;
positionY1.value = Y1.value - scrollTop * ratio.value; //原始高度-滚动距离*视差系数 positionY1.value = Y1.value - scrollTop * ratio.value; //原始高度-滚动距离*视差系数
// console.log(mTab.value, "mTab");
console.log(positionY1.value + "-------------------3");
} }
</script> </script>

6
src/views/HomeView.vue
View File

@ -4,10 +4,6 @@
<Banner></Banner> <Banner></Banner>
<WhatCebg></WhatCebg> <WhatCebg></WhatCebg>
<GameIntroduction></GameIntroduction> <GameIntroduction></GameIntroduction>
<!-- <HeroCard></HeroCard>
<WeaponCard></WeaponCard>
<ChipCard></ChipCard> -->
<!-- <vue3dLoader filePath="/70001.gltf" :height="800"></vue3dLoader> -->
<GameGallerp></GameGallerp> <GameGallerp></GameGallerp>
<FooterBar></FooterBar> <FooterBar></FooterBar>
</div> </div>
@ -17,8 +13,6 @@ import NavBar from "@/components/home/NavBar.vue";
import Banner from "@/components/home/Banner.vue"; import Banner from "@/components/home/Banner.vue";
import WhatCebg from "@/components/home/WhatCebg.vue"; import WhatCebg from "@/components/home/WhatCebg.vue";
import GameIntroduction from "@/components/home/GameIntroduction.vue"; import GameIntroduction from "@/components/home/GameIntroduction.vue";
import WeaponCard from "@/components/home/WeaponCard.vue";
import ChipCard from "@/components/home/ChipCard.vue";
import GameGallerp from "@/components/home/GameGallerp.vue"; import GameGallerp from "@/components/home/GameGallerp.vue";
import FooterBar from "@/components/home/FooterBar.vue"; import FooterBar from "@/components/home/FooterBar.vue";
</script> </script>