fix
This commit is contained in:
huangjinming
parent
2e9f96f6af
commit
8f3768a276
Binary file not shown.
|
Before Width: | Height: | Size: 946 KiB After Width: | Height: | Size: 708 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 MiB After Width: | Height: | Size: 1.3 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 570 KiB After Width: | Height: | Size: 570 KiB |
BIN
src/assets/img/home/hero/banner-slogan.gif
Normal file
BIN
src/assets/img/home/hero/banner-slogan.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.2 KiB After Width: | Height: | Size: 14 KiB |
@ -4,9 +4,8 @@
|
||||
<div class="content">
|
||||
<div class="sologan">
|
||||
<img src="@/assets/img/home/banner-slogan.gif" alt="" />
|
||||
<!-- <Slogan></Slogan> -->
|
||||
</div>
|
||||
<!-- <div class="download-center">
|
||||
<div class="download-center">
|
||||
<div class="download-item">
|
||||
<a href="https://play.google.com/store/apps/details?id=io.metamask">
|
||||
<img src="@/assets/img/home/google.png" alt=""
|
||||
@ -22,7 +21,7 @@
|
||||
<img src="@/assets/img/home/apple.png" alt=""
|
||||
/></a>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="posters">
|
||||
<div class="poster poster-one"></div>
|
||||
@ -50,18 +49,26 @@ import Slogan from "./Slogan.vue";
|
||||
height: 937px;
|
||||
position: relative;
|
||||
.sologan {
|
||||
margin: 0 auto;
|
||||
width: 1600px;
|
||||
height: 162px;
|
||||
padding-top: 150px;
|
||||
margin: 0px auto;
|
||||
width: 1259px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
img{
|
||||
object-fit: cover;
|
||||
height: 514px;
|
||||
}
|
||||
// height: 162px;
|
||||
padding-bottom: 25px;
|
||||
}
|
||||
.content {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10%;
|
||||
z-index: 8;
|
||||
// position: relative;
|
||||
//
|
||||
// z-index: 8;
|
||||
|
||||
.download-center {
|
||||
|
||||
margin-top: 25px;
|
||||
display: flex;
|
||||
width: 566px;
|
||||
@ -130,6 +137,7 @@ import Slogan from "./Slogan.vue";
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
z-index: -1;
|
||||
height: 100%;
|
||||
img {
|
||||
width: 100%;
|
||||
|
||||
@ -6,6 +6,7 @@
|
||||
:grabCursor="false"
|
||||
:centeredSlides="true"
|
||||
slidesPerView="2"
|
||||
:autoplay="{ delay: 3500, disableOnInteraction: false }"
|
||||
:coverflowEffect="{
|
||||
rotate: 0,
|
||||
stretch: 10,
|
||||
@ -70,7 +71,7 @@ const imageList = reactive([
|
||||
{ imgSrc: new URL("@/assets/img/home/game-swiper-card/04.png", import.meta.url).href },
|
||||
{ imgSrc: new URL("@/assets/img/home/game-swiper-card/05.png", import.meta.url).href },
|
||||
]);
|
||||
const modules = [EffectCoverflow, Pagination];
|
||||
const modules = [EffectCoverflow, Pagination,Autoplay];
|
||||
const boxStyle4 = computed(() => ({
|
||||
perspective: "300px",
|
||||
transition: "0s",
|
||||
|
||||
@ -4,6 +4,7 @@
|
||||
:spaceBetween="10"
|
||||
:thumbs="{ swiper: thumbsSwiper }"
|
||||
:modules="modules"
|
||||
:autoplay="{ delay: 3500, disableOnInteraction: false }"
|
||||
class="mySwiper2"
|
||||
ref="myRef"
|
||||
:navigation="{
|
||||
|
||||
@ -1,225 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="header header-top">
|
||||
<div class="nav">
|
||||
<a
|
||||
:href="nav.path"
|
||||
class="nav-item duration-200"
|
||||
v-for="(nav, i) in navList"
|
||||
:class="i == curentid ? 'active-nav-item' : ''"
|
||||
:key="i"
|
||||
@click="handNavCurent(i)"
|
||||
>
|
||||
<span> {{ nav.name }}</span></a
|
||||
>
|
||||
<div class="login-btn login-btn-active" @click="login">LOGIN</div>
|
||||
</div>
|
||||
</div>
|
||||
<ChainModel></ChainModel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted ,} from "vue";
|
||||
import { useChainStore }from '@/store/chain';
|
||||
import { useRouter, useRoute } from 'vue-router';
|
||||
import ChainModel from './ChainModel.vue'
|
||||
|
||||
const router = useRouter();
|
||||
const chain = useChainStore();
|
||||
|
||||
function click(event) {
|
||||
router.push(event.key);
|
||||
|
||||
}
|
||||
|
||||
async function login(event) {
|
||||
if (!chain.logined) {
|
||||
// 没有登录情况下执行登录
|
||||
await chain.chainManager.login()
|
||||
console.log("logined:", chain.chainManager.isLogined);
|
||||
chain.logined = chain.chainManager.isLogined;
|
||||
}
|
||||
else{
|
||||
// 已经登录过就退出登录
|
||||
await chain.chainManager.logout();
|
||||
console.log("logined:", chain.chainManager.isLogined);
|
||||
chain.logined = chain.chainManager.isLogined;
|
||||
}
|
||||
}
|
||||
|
||||
const curentid = ref(0);
|
||||
const navList = reactive([
|
||||
{ name: "HOME", path: "/" },
|
||||
{ name: "ABOUT", path: "/about" },
|
||||
{ name: "GALLERY", path: "/gellery" },
|
||||
{ name: "MARKETPLACE", path: "/marketpalce" },
|
||||
{ name: "COMMUNITY", path: "/contact" },
|
||||
]);
|
||||
|
||||
function handNavCurent(i) {
|
||||
|
||||
curentid.value = i;
|
||||
// router.push(i.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;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
|
||||
0 2px 4px -2px rgba(0, 0, 0, 0.1);
|
||||
|
||||
.nav {
|
||||
padding-left: 252px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 1130px;
|
||||
// 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;
|
||||
}
|
||||
.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::after {
|
||||
content: "";
|
||||
height: 7px;
|
||||
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;
|
||||
}
|
||||
.nav-item:hover::after {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
.active-nav-item {
|
||||
font-size: 16px;
|
||||
font-family: "JCuYuan";
|
||||
//
|
||||
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;
|
||||
// }
|
||||
.login-btn-active {
|
||||
position: relative;
|
||||
}
|
||||
.login-btn {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
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);
|
||||
}
|
||||
</style>
|
||||
@ -86,7 +86,6 @@ function backTop() {
|
||||
<style lang="scss" scoped>
|
||||
.footer {
|
||||
width: 100%;
|
||||
|
||||
.content {
|
||||
// padding-top: 133px;
|
||||
max-width: 1440px;
|
||||
@ -327,7 +326,7 @@ function backTop() {
|
||||
}
|
||||
.footer-bottom {
|
||||
display: flex;
|
||||
padding-bottom: 150px;
|
||||
padding-bottom: 69px;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
@click="handNavCurent(nav)"
|
||||
>
|
||||
<span> {{ nav.name }}</span>
|
||||
<div class="dropdown">
|
||||
<div class="dropdown" v-show="showNavMenu">
|
||||
<ul>
|
||||
<li v-for="(item, index) in nav.submenu" :key="index">
|
||||
<a class="link-name" :href="item.link" v-if="i !== 2">
|
||||
@ -78,24 +78,12 @@ function click(event) {
|
||||
}
|
||||
|
||||
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 "-";
|
||||
const accountId = AppModule.accountId;
|
||||
if (!accountId) return "-";
|
||||
if (accountId.length >= 10) {
|
||||
return `${accountId.substring(0, 6)}......${accountId.slice(-4)}`;
|
||||
}
|
||||
return accountId;
|
||||
});
|
||||
async function login(event) {
|
||||
if (!chain.logined) {
|
||||
@ -112,6 +100,7 @@ const logout = async () => {
|
||||
};
|
||||
const avatarUrl = ref("https://example.com/avatar.jpg");
|
||||
const showMenu = ref(false);
|
||||
const showNavMenu = ref(false);
|
||||
const activeIndex = ref(0);
|
||||
const navList = reactive([
|
||||
{ id: 0, name: "HOME", path: "/" },
|
||||
@ -144,8 +133,12 @@ const navList = reactive([
|
||||
|
||||
function handNavCurent(nav) {
|
||||
activeIndex.value = nav.id;
|
||||
if (nav.id > 1) {
|
||||
showNavMenu.value = true;
|
||||
} else {
|
||||
router.push(nav.path);
|
||||
}
|
||||
}
|
||||
watchEffect(() => {
|
||||
const index = navList.findIndex((navItem) => navItem.path === route.path);
|
||||
activeIndex.value = index !== -1 ? index : 0;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user