414 lines
9.8 KiB
Vue
414 lines
9.8 KiB
Vue
<template>
|
|
<div>
|
|
<div class="header header-top">
|
|
<div class="header-logo">
|
|
<a href="#">
|
|
<img src="../../assets/img/home/header-logo.png" alt=""
|
|
/></a>
|
|
</div>
|
|
<div class="nav">
|
|
<a
|
|
class="nav-item duration-200"
|
|
v-for="(nav, i) in navList"
|
|
:class="i == curentid ? 'active-nav-item' : ''"
|
|
:key="i"
|
|
@click="handNavCurent(nav)"
|
|
>
|
|
<span> {{ nav.name }}</span>
|
|
<div class="dropdown">
|
|
<ul>
|
|
<li v-for="(item, index) in nav.submenu" :key="index">
|
|
<a class="link-name" href="#" v-if="i !== 2">
|
|
{{ item.label }}
|
|
<img
|
|
class="link-img"
|
|
src="../../assets/img/home/link-icon.png"
|
|
alt=""
|
|
/></a>
|
|
<span v-else>{{ item.label }}</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</a>
|
|
<div class="header-right">
|
|
<div
|
|
v-if="!chain.logined"
|
|
class="login-btn login-btn-active"
|
|
@click="login"
|
|
>
|
|
LOGIN
|
|
</div>
|
|
<div v-else class="avatar" @click="showMenu = !showMenu">
|
|
<img
|
|
class="avatar-img"
|
|
src="../../assets/img/home/avatar.png"
|
|
alt="用户头像"
|
|
/>
|
|
<!-- 下拉菜单 -->
|
|
<div class="menu" v-show="showMenu">
|
|
<div class="menu-item">
|
|
<div class="title">{{ formatAddress }}</div>
|
|
<div><img src="../../assets/img/home/copy.png" alt="" /></div>
|
|
</div>
|
|
<div class="menu-item" @click="logout">Logout</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<ChainModel></ChainModel>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, reactive, onMounted, computed } from "vue";
|
|
import { useChainStore } from "@/store/chain";
|
|
import { useAppStore } from "@/store/app";
|
|
|
|
import { useRouter, useRoute } from "vue-router";
|
|
import ChainModel from "../../components/home/ChainModel.vue";
|
|
const AppModule = useAppStore();
|
|
const router = useRouter();
|
|
const chain = useChainStore();
|
|
const app = useAppStore();
|
|
|
|
function click(event) {
|
|
router.push(event.key);
|
|
}
|
|
|
|
const formatAddress = computed(() => {
|
|
console.log(AppModule.accountId, "AppModule.accountId");
|
|
if (!AppModule.accountId) {
|
|
return "-";
|
|
}
|
|
if (AppModule.accountId.length >= 10) {
|
|
return (
|
|
AppModule.accountId.substring(0, 6) +
|
|
"......" +
|
|
AppModule.accountId.substring(AppModule.accountId.length - 4)
|
|
);
|
|
} else if (
|
|
AppModule.accountId.length > 0 &&
|
|
AppModule.accountId.length < 10
|
|
) {
|
|
return AppModule.accountId;
|
|
} else {
|
|
return "-";
|
|
}
|
|
});
|
|
async function login(event) {
|
|
if (!chain.logined) {
|
|
// 没有登录情况下执行登录
|
|
await chain.chainManager.login();
|
|
console.log("logined:", chain.chainManager.isLogined);
|
|
chain.logined = chain.chainManager.isLogined;
|
|
}
|
|
}
|
|
const logout = async () => {
|
|
await chain.chainManager.logout();
|
|
console.log("logined:", chain.chainManager.isLogined);
|
|
chain.logined = chain.chainManager.isLogined;
|
|
};
|
|
const avatarUrl = ref("https://example.com/avatar.jpg");
|
|
const showMenu = ref(false);
|
|
const curentid = ref(0);
|
|
const navList = reactive([
|
|
{ id: 0, name: "HOME", path: "/" },
|
|
{ id: 1, name: "ABOUT", path: "/about" },
|
|
{
|
|
id: 2,
|
|
name: "MARKETPLACE",
|
|
path: "/marketpalce",
|
|
submenu: [{ label: "Coming soon", link: "/products/1" }],
|
|
},
|
|
{
|
|
id: 3,
|
|
name: "COMMUNITY",
|
|
path: "/contact",
|
|
submenu: [
|
|
{ label: "Twitter", link: "/products/1" },
|
|
{ label: "Youtube", link: "/products/2" },
|
|
{ label: "Facebook", link: "/products/3" },
|
|
{ label: "Medium", link: "/products/3" },
|
|
{ label: "Telegram", link: "/products/3" },
|
|
],
|
|
},
|
|
]);
|
|
|
|
function handNavCurent(nav) {
|
|
curentid.value = nav.id;
|
|
|
|
console.log(curentid.value, "curentid.value");
|
|
|
|
router.push(nav.path);
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.header {
|
|
position: fixed;
|
|
z-index: 19;
|
|
top: 0;
|
|
left: 0;
|
|
background-color: rgb(255, 255, 255);
|
|
width: 100%;
|
|
// height: 60px;
|
|
display: flex;
|
|
align-items: center;
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
|
|
0 2px 4px -2px rgba(0, 0, 0, 0.1);
|
|
.header-logo {
|
|
margin-left: 29px;
|
|
// padding-left: 20px;
|
|
width: 64px;
|
|
height: 63px;
|
|
}
|
|
.nav {
|
|
padding-left: 83px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: 830px;
|
|
// position: relative;
|
|
a {
|
|
padding-top: 20px;
|
|
padding-bottom: 20px;
|
|
}
|
|
.nav-item {
|
|
font-size: 16px;
|
|
position: relative;
|
|
font-weight: 800;
|
|
transition-property: color;
|
|
transition-duration: 0.15s;
|
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
font-family: "Big John";
|
|
|
|
color: #cccccc;
|
|
.dropdown {
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
// width: 150px;
|
|
background: rgba(0, 0, 0, 0.84);
|
|
border-radius: 0px 0px 12px 12px;
|
|
z-index: 1;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: all 0.3s ease-out;
|
|
}
|
|
.dropdown ul {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
.dropdown li {
|
|
// padding: 10px;
|
|
padding-top: 10px;
|
|
padding-bottom: 10px;
|
|
padding-left: 20px;
|
|
padding-right: 20px;
|
|
cursor: pointer;
|
|
}
|
|
.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;
|
|
}
|
|
// .dropdown li:hover {
|
|
// background-color: #f5f5f5;
|
|
// }
|
|
}
|
|
.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: "Big John";
|
|
color: rgba(215, 68, 88, 1);
|
|
}
|
|
.nav-item:hover .dropdown {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
.nav-item::after {
|
|
content: "";
|
|
height: 7px;
|
|
overflow: hidden;
|
|
display: block;
|
|
left: 0;
|
|
bottom: 0;
|
|
position: absolute;
|
|
width: 100%;
|
|
// background: #1fc8ff;
|
|
background: url("@/assets/img/home/nav-boder.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
transform: scaleX(0);
|
|
|
|
transition: all 1s;
|
|
}
|
|
.nav-item:hover::after {
|
|
transform: scaleX(1);
|
|
}
|
|
|
|
.active-nav-item {
|
|
font-size: 16px;
|
|
font-family: "Big John";
|
|
position: relative;
|
|
font-weight: 800;
|
|
transition-property: color;
|
|
transition-duration: 1s;
|
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
color: rgba(215, 68, 88, 1);
|
|
}
|
|
|
|
.active-nav-item::after {
|
|
content: "";
|
|
height: 8px;
|
|
overflow: hidden;
|
|
display: block;
|
|
left: -7%;
|
|
bottom: 0;
|
|
position: absolute;
|
|
width: 120%;
|
|
// background: #1fc8ff;
|
|
background: url("@/assets/img/home/nav-boder.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
transform: scaleX(0);
|
|
transition: all 1s;
|
|
}
|
|
.active-nav-item::after {
|
|
transform: scaleX(1);
|
|
}
|
|
}
|
|
}
|
|
// .header-top {
|
|
// position: relative;
|
|
// }
|
|
.header-right {
|
|
width: 228px;
|
|
position: absolute;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
right: 0;
|
|
.menu {
|
|
position: absolute;
|
|
top: 111%;
|
|
right: -35px;
|
|
width: 180px;
|
|
z-index: 1;
|
|
padding: 10px 0;
|
|
background-color: #000000;
|
|
border-radius: 5px;
|
|
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
|
|
list-style: none;
|
|
transition: all 0.3s ease-out;
|
|
}
|
|
li {
|
|
margin: 5px 0;
|
|
}
|
|
.menu-item {
|
|
padding: 0px 15px;
|
|
color: #f5f5f5;
|
|
display: flex;
|
|
align-items: center;
|
|
.title {
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
a:hover {
|
|
background-color: #f5f5f5;
|
|
}
|
|
}
|
|
// .login-btn-active {
|
|
// position: relative;
|
|
// }
|
|
.login-btn {
|
|
position: relative;
|
|
width: 228px;
|
|
height: 72px;
|
|
font-size: 26px;
|
|
line-height: 72px;
|
|
font-size: 22px;
|
|
font-family: "Big John";
|
|
color: #122326;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
background: url("@/assets/svg/login-active.svg") no-repeat;
|
|
background-size: 100% 100%;
|
|
z-index: 0;
|
|
transition: background-image 1s;
|
|
// transition:background-image 1s linear;
|
|
// transform: scaleX(1);
|
|
// transition: all 0.15s;
|
|
// transition-property: background;
|
|
// transition-duration: 0.15s;
|
|
// transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
.login-btn::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
opacity: 1;
|
|
// transition: 0.5s;
|
|
background: url("@/assets/svg/login.svg") no-repeat;
|
|
background-size: 100% 100%;
|
|
transform: scaleX(1, 1);
|
|
clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
|
|
transition: all 0.3s ease-in-out;
|
|
z-index: -1;
|
|
// transition:background-image 1s linear;
|
|
// transform: scaleX(0.98);
|
|
}
|
|
.login-btn:hover:after {
|
|
opacity: 1;
|
|
clip-path: polygon(
|
|
calc(50% + 0px) calc(50% + 150px),
|
|
calc(50% + 150px) calc(50% + 0px),
|
|
calc(50% + 0px) calc(50% - 150px),
|
|
calc(50% - 150px) calc(50% - 0px)
|
|
);
|
|
|
|
transition: all 0.3s ease-in-out;
|
|
transform: scaleX(1, 1);
|
|
}
|
|
.login-btn:active:after {
|
|
opacity: 1;
|
|
transform: scaleX(1);
|
|
}
|
|
.avatar {
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
}
|
|
.avatar-img {
|
|
width: 54px;
|
|
height: 54px;
|
|
margin-top: 5px;
|
|
margin-right: 30px;
|
|
border: 2px solid rgba(215, 68, 88, 1);
|
|
border-radius: 50%;
|
|
}
|
|
.link-name {
|
|
position: relative;
|
|
.link-img {
|
|
position: absolute;
|
|
top: 24px;
|
|
right: -18px;
|
|
}
|
|
}
|
|
</style>
|