cebg-website/src/components/home/GameIntroduction.vue
huangjinming fc3b9854f1 newcebg
2023-02-27 14:41:12 +08:00

154 lines
3.1 KiB
Vue

<template>
<div class="container">
<div class="tabs">
<!-- <div class="tab-left">
<img src="../../assets/img/home/tabs/tab-left.png" alt="" />
</div> -->
<TabBar
:listred="listred"
:listblack="listblack"
:tabs="tabs"
:activeTab="activeTab"
:getTabIcon="getTabIcon"
@handactiveTab="handactiveTab"
></TabBar>
<div class="tab-bg">
<img src="../../assets/img/home/tabs/tab-bg.png" alt="" />
</div>
</div>
<div class="content">
<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="" />
</div>
</div>
</template>
<script setup>
import TabBar from "./TabBar.vue";
import HeroCard from "./HeroCard.vue";
import WeaponCard from "./WeaponCard.vue";
import ChipCard from "./ChipCard.vue";
import loginButton from "./loginButton.vue";
import { ref, computed } from "vue";
const listred = [
"src/assets/img/home/tabs/HERO-red-tab.png",
"src/assets/img/home/tabs/WEAPON-red-tab.png",
"src/assets/img/home/tabs/CHIP-red-tab.png",
];
const listblack = [
"src/assets/img/home/tabs/HERO-black-tab.png",
"src/assets/img/home/tabs/WEAPON-black-tab.png",
"src/assets/img/home/tabs/CHIP-black-tab.png",
];
const activeTab = ref(0);
const tabs = ["HERO", "WEAPON", "CHIP"];
const getTabIcon = (index) =>
index === activeTab.value ? listred[index] : listblack[index];
function handactiveTab(index) {
activeTab.value = index;
}
</script>
<style lang="scss" scoped>
.container {
position: relative;
height: 1480px;
.tabs {
width: 1440px;
margin: 0 auto;
display: flex;
position: relative;
justify-content: center;
align-items: center;
}
.tab-bg {
position: absolute;
}
.game-bg {
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
right: 0;
bottom: 0;
color: transparent;
img {
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: -1;
color: transparent;
}
}
}
.btn{
width: 300px;
height: 100px;
margin: 0 auto;
}
.tabs {
display: flex;
}
.tab {
display: flex;
align-items: center;
justify-content: center;
border: none;
background: none;
color: #fff;
text-transform: uppercase;
font-size: 16px;
font-weight: bold;
padding: 20px;
}
.tab img {
margin-right: 10px;
width: 20px;
height: 20px;
}
.tab.active {
background-color: #f00;
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
.tab-left {
width: 535px;
img {
width: 100%;
}
}
.tab-right {
width: 535px;
img {
width: 100%;
}
}
</style>