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 class="chip-top"></div> -->
</div>
<div class="chip-bg">
<!-- <div class="chip-bg">
<img src="@/assets/img/home/weapon-bg.png" alt="" />
</div>
</div> -->
</div>
</div>
</template>

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

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

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

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

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

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

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

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

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

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

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

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

6
src/views/HomeView.vue
View File

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