154 lines
3.1 KiB
Vue
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>
|