653 lines
16 KiB
Vue
653 lines
16 KiB
Vue
<template>
|
|
<div>
|
|
<div class="header header-top">
|
|
<div class="header-left">
|
|
<div class="header-logo" @click="handlHome">
|
|
<img src="../../assets/img/home/game_logo01.png" alt="" />
|
|
</div>
|
|
<div class="nav">
|
|
<a
|
|
v-for="(nav, i) in navList"
|
|
:class="i === activeIndex ? 'active-nav-item' : 'nav-item'"
|
|
:key="i"
|
|
@click="handNavCurent(nav)"
|
|
>
|
|
{{ nav.name }}
|
|
<div class="dropdown">
|
|
<ul>
|
|
<li v-for="(item, index) in nav.submenu" :key="index">
|
|
<div
|
|
class="link-content"
|
|
@click="openThirdPartyLink(item.link)"
|
|
>
|
|
<a
|
|
class="link-name"
|
|
:href="item.link"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>{{ item.label }}</a
|
|
>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="header-right">
|
|
<div class="immutable-cart" v-if="isCart" @click="myCart">
|
|
<div class="immutable-cart-img">
|
|
<img src="@/assets/img/marketplace/Add shopping cart02.png" alt="">
|
|
</div>
|
|
<div v-if="immutableStore.accessToken" class="immutable-cart-amount">7</div>
|
|
</div>
|
|
<div class="metaMask-login" v-if="!immutableStore.accessToken" @click="immuTableLogin">Login</div>
|
|
<div class="metaMask-login-active" v-else @click="showMenu = !showMenu">
|
|
<div class="matamask">
|
|
<div class="title">{{ formatAddress }}</div>
|
|
</div>
|
|
<div class="menu" v-show="showMenu">
|
|
<div class="menu-item" @click="immuTableLogout">Logout</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="wallet"></div>
|
|
<Cart v-show="cartShow" @closeCart="cartShow = false" class="cart-con" />
|
|
<ChainModel></ChainModel>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, reactive, onMounted, computed, watchEffect, getCurrentInstance, watch } from "vue";
|
|
const { proxy } = getCurrentInstance();
|
|
import { useChainStore } from "@/store/chain";
|
|
import { useAppStore } from "@/store/app";
|
|
import { hasMetamask } from "@/utils/chain.util";
|
|
import { useRouter, useRoute } from "vue-router";
|
|
import ChainModel from "@/components/home/ChainModel.vue";
|
|
import { useCopyToClipboard } from "./../../hooks/useCopyToClipboard";
|
|
import { PassportWallet } from "@/wallet/passPort"
|
|
import { useImmutableStore } from "@/store/immutable"
|
|
import { useMarketplaceStore } from "@/store/marketplace"
|
|
|
|
import Cart from "@/components/cart/index.vue"
|
|
|
|
const immutableStore = useImmutableStore()
|
|
const marketplaceStore = useMarketplaceStore()
|
|
const AppModule = useAppStore();
|
|
const router = useRouter();
|
|
const route = useRoute();
|
|
const chain = useChainStore();
|
|
const app = useAppStore();
|
|
const showMenu = ref(false);
|
|
const loginShowMenu = ref(false);
|
|
const dropdownVisible = ref(false);
|
|
const isCart = ref(false)
|
|
const cartShow = ref(false)
|
|
const activeIndex = ref(0);
|
|
const navList = reactive([
|
|
{ id: 0, name: "ABOUT", path: "/about" },
|
|
{ id: 1, name: "ASSETS", path: "https://pledge.kingsome.cn/" },
|
|
// { id: 1, name: "planet", path: "https://planet.kingsome.cn/" },
|
|
// {
|
|
// id: 2,
|
|
// name: "STAKE",
|
|
// path: "https://pledge.kingsome.cn",
|
|
// },
|
|
// {
|
|
// id: 3,
|
|
// name: "hashrate",
|
|
// path: "https://pledge.kingsome.cn",
|
|
// },
|
|
|
|
{
|
|
id: 4,
|
|
name: "COMMUNITY",
|
|
path: "/stake",
|
|
submenu: [
|
|
{ label: "Twitter", link: "https://twitter.com/_CounterFire" },
|
|
{
|
|
label: "Youtube",
|
|
link: "https://youtube.com/c/CryptoElitesBattlegrounds",
|
|
},
|
|
{
|
|
label: "Facebook",
|
|
link: "https://www.facebook.com/profile.php?id=100090965821157&mibextid=LQQJ4d",
|
|
},
|
|
{ label: "Medium", link: "https://medium.com/@CounterFire" },
|
|
|
|
{ label: "Discord", link: "https://discord.com/invite/fNSn2NHUvf" },
|
|
],
|
|
},
|
|
{
|
|
id: 5,
|
|
name: "EVENT",
|
|
path: "/contact",
|
|
submenu: [
|
|
{ label: "Badge", link: "https://badge.counterfire.games/" },
|
|
{
|
|
label: "Gacha",
|
|
link: "https://gacha.counterfire.games/",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
id: 6,
|
|
name: "MARKETPLACE",
|
|
path: "/marketplace",
|
|
},
|
|
{
|
|
id: 7,
|
|
name: "ASSETS",
|
|
path: "/assets",
|
|
}
|
|
]);
|
|
function click(event) {
|
|
router.push(event.key);
|
|
}
|
|
|
|
|
|
//const { copied, copyToClipboard } = useCopyToClipboard(AppModule.accountId);
|
|
const { copied, error, reset, copyToClipboard } = useCopyToClipboard();
|
|
|
|
const message = copied.value
|
|
? "Text copied!"
|
|
: "Click the button to copy text.";
|
|
const formatAddress = computed(() => {
|
|
const accountId = localStorage.getItem('assessAddress');
|
|
if (!accountId) return "-";
|
|
if (accountId.length >= 10) {
|
|
return `${accountId.substring(0, 6)}......${accountId.slice(-4)}`;
|
|
}
|
|
return accountId;
|
|
});
|
|
|
|
async function login(type) {
|
|
|
|
if (!chain.logined) {
|
|
//没有登录情况下执行登录
|
|
|
|
await chain.chainManager.login(type);
|
|
// console.log("logined:", chain.chainManager.isLogined);
|
|
chain.logined = chain.chainManager.isLogined;
|
|
}
|
|
}
|
|
const handlLogin = () => {
|
|
loginShowMenu.value = !loginShowMenu.value;
|
|
};
|
|
const logout = async () => {
|
|
await chain.chainManager.logout();
|
|
window.location.reload();
|
|
// console.log("logined:", chain.chainManager.isLogined);
|
|
chain.logined = chain.chainManager.isLogined;
|
|
window.location.reload();
|
|
};
|
|
const handlHome = () => {
|
|
router.push("/");
|
|
};
|
|
|
|
function handNavCurent(nav) {
|
|
activeIndex.value = nav.id;
|
|
if (nav.id == 1) {
|
|
window.open(nav.path, "_blank");
|
|
} else if(nav.id == 0) {
|
|
router.push(nav.path);
|
|
} else if(nav.id == 6) {
|
|
router.push(nav.path);
|
|
} else if(nav.id == 7) {
|
|
router.push(nav.path);
|
|
}
|
|
// if (nav.id == 1 || nav.id == 2 || nav.id == 3) {
|
|
// window.open(nav.path, "_blank");
|
|
// } else if (nav.id == 5 || nav.id == 6) {
|
|
// dropdownVisible.value = true;
|
|
// } else {
|
|
// router.push(nav.path);
|
|
// }
|
|
}
|
|
function openThirdPartyLink(url) {
|
|
window.open(url, "_blank");
|
|
}
|
|
const handleCopy = () => {
|
|
const accountId = AppModule.accountId;
|
|
reset();
|
|
copyToClipboard(accountId).then(() => {
|
|
// if (copied.value) {
|
|
// message.success("Copy successful!");
|
|
// }
|
|
});
|
|
};
|
|
watchEffect(() => {
|
|
const index = navList.findIndex(
|
|
(navItem) => route.path.slice(0, 5) === navItem.path.slice(0, 5)
|
|
);
|
|
activeIndex.value = index !== -1 ? index : "";
|
|
});
|
|
|
|
// --------------------------------
|
|
const immuTableLogin = async () => {
|
|
try{
|
|
const walletLogin = await new PassportWallet().connect()
|
|
immutableStore.accessToken = walletLogin.accessToken
|
|
immutableStore.accounts = walletLogin.accounts[0]
|
|
localStorage.setItem('assessToken', walletLogin.accessToken)
|
|
localStorage.setItem('assessAddress', walletLogin.accounts[0])
|
|
// console.log(walletLogin)
|
|
/*
|
|
accessToken
|
|
accounts
|
|
profile:
|
|
|
|
*/
|
|
// loginShowMenu.value = !loginShowMenu.value;
|
|
// const list = await new PassportWallet().beginSellERC721({
|
|
// contractAddress: '',
|
|
// tokenId: ''
|
|
// });
|
|
// console.log(list)
|
|
} catch (e) {
|
|
console.log(e);
|
|
}
|
|
}
|
|
|
|
const immuTableLogout = async () => {
|
|
try {
|
|
await new PassportWallet().logout()
|
|
} catch (e) {
|
|
console.log(e)
|
|
}
|
|
}
|
|
|
|
|
|
// 购物车
|
|
const myCart = async () => {
|
|
if(immutableStore.accessToken) {
|
|
cartShow.value = true
|
|
} else {
|
|
immuTableLogin()
|
|
}
|
|
}
|
|
|
|
watch(() => route.path,(newPath, oldPath) => {
|
|
if(newPath == '/marketplace' || newPath == '/assets') {
|
|
isCart.value = true
|
|
} else {
|
|
isCart.value = false
|
|
}
|
|
})
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.header {
|
|
position: fixed;
|
|
z-index: 19;
|
|
top: 0;
|
|
left: 0;
|
|
background: rgba(0, 0, 0, 0.6);
|
|
// opacity: .6;
|
|
width: 100%;
|
|
height: 84px;
|
|
display: flex;
|
|
align-items: center;
|
|
padding-right: 11px;
|
|
justify-content: space-between;
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
|
|
0 2px 4px -2px rgba(0, 0, 0, 0.1);
|
|
.header-left {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.header-logo {
|
|
margin-left: 64px;
|
|
width: 194px;
|
|
cursor: pointer;
|
|
height: 62px;
|
|
img {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.nav {
|
|
padding-left: 83px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
// width: 830px;
|
|
a {
|
|
padding-top: 27px;
|
|
padding-bottom: 27px;
|
|
}
|
|
|
|
.nav-item {
|
|
font-size: 32px;
|
|
position: relative;
|
|
padding-left: 21px;
|
|
padding-right: 21px;
|
|
transition-property: color;
|
|
transition-duration: 0.15s;
|
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
font-family: "Anton";
|
|
line-height: 30px;
|
|
color: #bb7fff !important;
|
|
cursor: pointer;
|
|
.dropdown {
|
|
position: absolute;
|
|
top: 84px;
|
|
left: 50%;
|
|
width: 100%;
|
|
background: rgba(0, 0, 0, 0.84);
|
|
border-radius: 0px 0px 12px 12px;
|
|
z-index: 1;
|
|
opacity: 0;
|
|
transform: translate(-50%, 0%);
|
|
visibility: hidden;
|
|
transition: all 0.3s ease-out;
|
|
}
|
|
|
|
.dropdown ul {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
.dropdown li {
|
|
// padding-top: 10px;
|
|
// padding-bottom: 10px;
|
|
padding-left: 20px;
|
|
padding-right: 20px;
|
|
cursor: pointer;
|
|
}
|
|
.link-content {
|
|
display: flex;
|
|
// width: 150px;
|
|
text-align: center;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
.link-label {
|
|
font-size: 16px;
|
|
font-family: Arial;
|
|
font-weight: 400;
|
|
text-align: center;
|
|
color: #ffffff;
|
|
}
|
|
.dropdown li a {
|
|
font-size: 16px;
|
|
font-family: Arial;
|
|
font-weight: 400;
|
|
color: #ffffff;
|
|
padding-top: 10px;
|
|
padding-bottom: 10px;
|
|
text-align: center; /* ensure text is centered */
|
|
width: 100%; /* make it span the full width */
|
|
display: block;
|
|
cursor: pointer;
|
|
}
|
|
.dropdown li span {
|
|
font-size: 15px;
|
|
font-family: Arial;
|
|
font-weight: 400;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
.duration-200 {
|
|
transition-duration: 0.2s;
|
|
}
|
|
.nav-item:hover {
|
|
transition-property: color;
|
|
transition-duration: 0.15s;
|
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
font-family: "Anton";
|
|
background-color: #bb7fff;
|
|
border-radius: 42px;
|
|
color: #000000 !important;
|
|
}
|
|
.nav-item:hover .dropdown {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
|
|
.active-nav-item {
|
|
font-size: 32px;
|
|
font-family: "Anton";
|
|
position: relative;
|
|
padding-left: 21px;
|
|
padding-right: 21px;
|
|
line-height: 30px;
|
|
background-color: #bb7fff;
|
|
border-radius: 42px;
|
|
transition-property: color;
|
|
transition-duration: 0.3s;
|
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
color: #000000 !important;
|
|
.dropdown {
|
|
position: absolute;
|
|
top: 84px;
|
|
left: 50%;
|
|
width: 100%;
|
|
background: rgba(0, 0, 0, 0.84);
|
|
border-radius: 0px 0px 12px 12px;
|
|
z-index: 1;
|
|
opacity: 0;
|
|
transform: translate(-50%, 0%);
|
|
visibility: hidden;
|
|
transition: all 0.3s ease-out;
|
|
}
|
|
.dropdown ul {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
.dropdown li {
|
|
padding-top: 10px;
|
|
padding-bottom: 10px;
|
|
padding-left: 20px;
|
|
padding-right: 20px;
|
|
cursor: pointer;
|
|
}
|
|
.link-content {
|
|
display: flex;
|
|
// width: 150px;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
.link-label {
|
|
font-size: 16px;
|
|
font-family: Arial;
|
|
font-weight: 400;
|
|
text-align: center;
|
|
color: #ffffff;
|
|
}
|
|
.dropdown li a {
|
|
font-size: 16px;
|
|
font-family: Arial;
|
|
font-weight: 400;
|
|
color: #ffffff;
|
|
}
|
|
.dropdown li span {
|
|
font-size: 15px;
|
|
font-family: Arial;
|
|
font-weight: 400;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.header-right {
|
|
// width: 228px;
|
|
// position: absolute;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
// right: 11px;
|
|
|
|
.metaMask-logo {
|
|
width: 60px;
|
|
height: 60px;
|
|
margin-left: 10px;
|
|
margin-right: 30px;
|
|
// padding-right:10px;
|
|
}
|
|
.metaMask-login {
|
|
width: 205px;
|
|
height: 68px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: #BB7FFF;
|
|
cursor: pointer;
|
|
background: #2d2738;
|
|
font-size: 24px;
|
|
font-family: "Poppins";
|
|
font-weight: 400;
|
|
border: 2px solid #A767FF;
|
|
position: relative;
|
|
border-radius: 34px;
|
|
.menu {
|
|
position: absolute;
|
|
top: 75px;
|
|
right: 0px;
|
|
width: 218px;
|
|
z-index: 1;
|
|
text-align: center;
|
|
padding: 5px 0;
|
|
background-color: #252636;
|
|
border-radius: 30px;
|
|
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
|
|
list-style: none;
|
|
border: 2px solid #A767FF;
|
|
transition: all 0.3s ease-out;
|
|
}
|
|
li {
|
|
margin: 5px 0;
|
|
}
|
|
|
|
.menu-item {
|
|
padding-left: 8px;
|
|
padding-top: 10px;
|
|
padding-bottom: 10px;
|
|
color: #f5f5f5;
|
|
display: flex;
|
|
font-size: 18px;
|
|
font-weight: 400;
|
|
.login-icon {
|
|
width: 28px;
|
|
margin-right: 3px;
|
|
height: 28px;
|
|
}
|
|
.title {
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
a:hover {
|
|
background-color: #f5f5f5;
|
|
}
|
|
}
|
|
.metaMask-login-active {
|
|
width: 218px;
|
|
height: 68px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: relative;
|
|
cursor: pointer;
|
|
background: #2d2738;
|
|
font-size: 20px;
|
|
font-family: "Poppins";
|
|
font-weight: 400;
|
|
color: #BB7FFF;
|
|
border: 2px solid #A767FF;
|
|
border-radius: 34px;
|
|
.menu {
|
|
position: absolute;
|
|
top: 75px;
|
|
right: 0px;
|
|
width: 218px;
|
|
z-index: 1;
|
|
text-align: center;
|
|
padding: 10px 0;
|
|
background-color: #252636;
|
|
border-radius: 30px;
|
|
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
|
|
border: 2px solid #A767FF;
|
|
list-style: none;
|
|
|
|
transition: all 0.3s ease-out;
|
|
}
|
|
li {
|
|
margin: 5px 0;
|
|
|
|
}
|
|
|
|
.menu-item {
|
|
padding: 5px 15px;
|
|
color: #f5f5f5;
|
|
display: flex;
|
|
font-size: 18px;
|
|
font-weight: 400;
|
|
// padding-top: 10px;
|
|
justify-content: center;
|
|
.title {
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
a:hover {
|
|
background-color: #f5f5f5;
|
|
}
|
|
}
|
|
.immutable-cart {
|
|
color: #fff;
|
|
position: relative;
|
|
margin-right: 10px;
|
|
cursor: pointer;
|
|
.immutable-cart-img {
|
|
width: 53px;
|
|
height: 49px;
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.immutable-cart-amount {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
width: 25px;
|
|
height: 25px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: red;
|
|
border-radius: 50%;
|
|
font-size: 18px;
|
|
}
|
|
}
|
|
.immutable-login {
|
|
width: 120px;
|
|
height: 40px;
|
|
line-height: 40px;
|
|
text-align: center;
|
|
background: #bb7fff;
|
|
border-radius: 26px;
|
|
}
|
|
}
|
|
|
|
.link-name {
|
|
position: relative;
|
|
.link-img {
|
|
position: absolute;
|
|
top: 24px;
|
|
right: -18px;
|
|
}
|
|
}
|
|
.cart-con {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 84px;
|
|
background: #1e1b23;
|
|
z-index: 999;
|
|
}
|
|
</style>
|