|
|
@@ -1,7 +1,7 @@
|
|
|
<script setup lang="ts">
|
|
|
-import {useSunStore,useNavIndexStore} from "@/stores/sun";
|
|
|
+import {useSunStore, useNavIndexStore} from "@/stores/sun";
|
|
|
import Nav from '@/components/Nav.vue'
|
|
|
-import {ref,nextTick,provide} from "vue";
|
|
|
+import {ref, nextTick, provide} from "vue";
|
|
|
import ZksyncView from '@/views/ZksyncView.vue'
|
|
|
import LayerZero from '@/views/LayerZeroView.vue'
|
|
|
import StarkNet from '@/views/StarkNet.vue'
|
|
|
@@ -17,9 +17,13 @@ const reload = () => {
|
|
|
});
|
|
|
};
|
|
|
provide("reload", reload);
|
|
|
-const toPage = (page:number) => {
|
|
|
+const toPage = (page: number) => {
|
|
|
navIndexStore.changeIndex(page)
|
|
|
}
|
|
|
+
|
|
|
+const toLink = (url: string) => {
|
|
|
+ window.open(url)
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
@@ -31,6 +35,15 @@ const toPage = (page:number) => {
|
|
|
<div class="header">
|
|
|
<div class="left" style="z-index: 2">
|
|
|
<img class="left" v-show="!sunStore.sun" src="../assets/header-text.svg" alt="header">
|
|
|
+ <div class="officeLinkBox" style="margin-top: 32px">
|
|
|
+ <img style="cursor: pointer" @click="toLink('https://zksync.io/')" src="../assets/zksLogo.svg" alt="Logo">
|
|
|
+ <img style="cursor: pointer" @click="toLink('https://layerzero.network/')"
|
|
|
+ src="../assets/layerZero/layerZero-white.svg" alt="Logo">
|
|
|
+ <img style="cursor: pointer" @click="toLink('https://www.starknet.io/')" src="../assets/starkNet/STARKNET.svg"
|
|
|
+ alt="Logo">
|
|
|
+ <img style="cursor: pointer" @click="toLink('https://base.org/')" src="../assets/scrollLogo.svg" alt="Logo">
|
|
|
+ <img style="cursor: pointer" @click="toLink('https://scroll.io/')" src="../assets/baseLogo.svg" alt="Logo">
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="right">
|
|
|
<video v-show="!sunStore.sun" autoplay muted width="342" height="342" src="../media/0727(7).mp4">
|
|
|
@@ -38,18 +51,44 @@ const toPage = (page:number) => {
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="chainBox">
|
|
|
- <div class="item" @click="toPage(0)">
|
|
|
+ <div :class="navIndexStore.index===0 ? 'item' : 'item1'" @click="toPage(0)">
|
|
|
zkSync
|
|
|
<div class="line" v-show="navIndexStore.index===0"></div>
|
|
|
</div>
|
|
|
- <div class="item" @click="toPage(1)">
|
|
|
+ <div :class="navIndexStore.index===1 ? 'item' : 'item1'" @click="toPage(1)">
|
|
|
Layer Zero
|
|
|
<div class="line" v-show="navIndexStore.index===1"></div>
|
|
|
</div>
|
|
|
- <div class="item" @click="toPage(2)">
|
|
|
+ <div :class="navIndexStore.index===2 ? 'item' : 'item1'" @click="toPage(2)">
|
|
|
StarkNet
|
|
|
<div class="line" v-show="navIndexStore.index===2"></div>
|
|
|
</div>
|
|
|
+ <el-popover
|
|
|
+ placement="top"
|
|
|
+ :width="240"
|
|
|
+ trigger="hover"
|
|
|
+ content="This feature is under development."
|
|
|
+ >
|
|
|
+ <template #reference>
|
|
|
+ <div class="item1" style="cursor: default">
|
|
|
+ Scroll
|
|
|
+ <div class="line" v-show="navIndexStore.index===3"></div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-popover>
|
|
|
+ <el-popover
|
|
|
+ placement="top"
|
|
|
+ :width="240"
|
|
|
+ trigger="hover"
|
|
|
+ content="This feature is under development."
|
|
|
+ >
|
|
|
+ <template #reference>
|
|
|
+ <div class="item1" style="cursor: default">
|
|
|
+ BASE
|
|
|
+ <div class="line" v-show="navIndexStore.index===4"></div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-popover>
|
|
|
</div>
|
|
|
<ZksyncView v-if="navIndexStore.index===0"/>
|
|
|
<LayerZero v-if="navIndexStore.index===1"/>
|
|
|
@@ -58,7 +97,7 @@ const toPage = (page:number) => {
|
|
|
</template>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
-.homeMain{
|
|
|
+.homeMain {
|
|
|
width: 1440px;
|
|
|
margin: auto;
|
|
|
padding-top: 30px;
|
|
|
@@ -72,10 +111,11 @@ const toPage = (page:number) => {
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
}
|
|
|
+
|
|
|
.BG1 {
|
|
|
position: absolute;
|
|
|
- top: -400px;
|
|
|
- left: 260px;
|
|
|
+ top: -600px;
|
|
|
+ left: 360px;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
animation: rotateAnimation 10s linear infinite;
|
|
|
@@ -85,10 +125,11 @@ const toPage = (page:number) => {
|
|
|
width: 994px;
|
|
|
height: 994px;
|
|
|
}
|
|
|
+
|
|
|
.BG2 {
|
|
|
position: absolute;
|
|
|
- top: -300px;
|
|
|
- left: -70px;
|
|
|
+ top: -400px;
|
|
|
+ left: 70px;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
animation: rotateAnimation 15s linear infinite;
|
|
|
@@ -98,10 +139,11 @@ const toPage = (page:number) => {
|
|
|
width: 694px;
|
|
|
height: 874px;
|
|
|
}
|
|
|
+
|
|
|
.BG3 {
|
|
|
position: absolute;
|
|
|
- top: 300px;
|
|
|
- left: 700px;
|
|
|
+ top: -100px;
|
|
|
+ left: 800px;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
animation: rotateAnimation 10s linear infinite;
|
|
|
@@ -111,6 +153,7 @@ const toPage = (page:number) => {
|
|
|
width: 329px;
|
|
|
height: 447px;
|
|
|
}
|
|
|
+
|
|
|
@keyframes rotateAnimation {
|
|
|
0% {
|
|
|
transform: rotate(0deg);
|
|
|
@@ -119,6 +162,7 @@ const toPage = (page:number) => {
|
|
|
transform: rotate(-360deg);
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.header {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
@@ -128,6 +172,12 @@ const toPage = (page:number) => {
|
|
|
.left {
|
|
|
user-select: none;
|
|
|
-webkit-user-drag: none;
|
|
|
+
|
|
|
+ .officeLinkBox {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 32px;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.right {
|
|
|
@@ -137,11 +187,22 @@ const toPage = (page:number) => {
|
|
|
//height: 180px;
|
|
|
}
|
|
|
}
|
|
|
- .chainBox{
|
|
|
+
|
|
|
+ .chainBox {
|
|
|
width: 100%;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- .item{
|
|
|
+ .line {
|
|
|
+ position: absolute;
|
|
|
+ width: 60px;
|
|
|
+ height: 4px;
|
|
|
+ background: var(--color-text);
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ margin: auto;
|
|
|
+ bottom: 0;
|
|
|
+ }
|
|
|
+ .item {
|
|
|
padding: 24px 65px;
|
|
|
//border-right: 1px solid var(--vt-c-border);
|
|
|
font-family: HONOR Sans CN;
|
|
|
@@ -151,16 +212,18 @@ const toPage = (page:number) => {
|
|
|
line-height: normal;
|
|
|
position: relative;
|
|
|
cursor: pointer;
|
|
|
- .line{
|
|
|
- position: absolute;
|
|
|
- width: 60px;
|
|
|
- height: 4px;
|
|
|
- background: var(--color-text);
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- margin: auto;
|
|
|
- bottom: 0;
|
|
|
- }
|
|
|
+ }
|
|
|
+ .item1 {
|
|
|
+ padding: 24px 65px;
|
|
|
+ //border-right: 1px solid var(--vt-c-border);
|
|
|
+ font-family: HONOR Sans CN;
|
|
|
+ font-size: 15px;
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: 700;
|
|
|
+ line-height: normal;
|
|
|
+ position: relative;
|
|
|
+ cursor: pointer;
|
|
|
+ opacity: 0.5;
|
|
|
}
|
|
|
}
|
|
|
}
|
million
