fix
This commit is contained in:
huangjinming
parent
0ca8f35e3e
commit
3d6c3aceba
@ -32,7 +32,8 @@
|
||||
"vue": "^3.2.45",
|
||||
"vue-3d-loader": "^2.1.5",
|
||||
"vue-router": "^4.1.6",
|
||||
"web3": "^1.8.2"
|
||||
"web3": "^1.8.2",
|
||||
"youtube-player": "^5.6.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^4.0.0",
|
||||
|
||||
BIN
mobile/src/assets/img/mobile-home/banner-bg.png
Normal file
BIN
mobile/src/assets/img/mobile-home/banner-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 563 KiB |
BIN
mobile/src/assets/img/mobile-home/banner-slogan.png
Normal file
BIN
mobile/src/assets/img/mobile-home/banner-slogan.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
@ -20,6 +20,7 @@
|
||||
clickable: true,
|
||||
}"
|
||||
:modules="modules"
|
||||
:autoplay="{ delay: 4000, disableOnInteraction: false }"
|
||||
:loop="true"
|
||||
class="mySwiper"
|
||||
ref="myRef"
|
||||
@ -40,7 +41,7 @@
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, reactive, onMounted } from "vue";
|
||||
import { Pagination } from "swiper";
|
||||
import { Pagination ,Autoplay} from "swiper";
|
||||
import { Swiper, SwiperSlide } from "swiper/vue";
|
||||
import "swiper/css";
|
||||
import "swiper/css/navigation";
|
||||
@ -51,7 +52,7 @@ const ratio = ref(0.2); //视差偏移率
|
||||
const positionY1 = ref(0); //背景Y轴偏移量
|
||||
const box = ref(null);
|
||||
const myRef = ref(null);
|
||||
const modules = [Pagination];
|
||||
const modules = [Pagination,Autoplay];
|
||||
const imageList = reactive([
|
||||
{
|
||||
imgSrc: new URL(
|
||||
@ -92,13 +93,13 @@ const handSlideNext = () => {
|
||||
myRef.value?.$el.swiper.slideNext();
|
||||
};
|
||||
onMounted(() => {
|
||||
window.addEventListener("scroll", handleScroll); //创建滚动监听，页面滚动回调handleScroll方法
|
||||
document.body.addEventListener("scroll", handleScroll); //创建滚动监听，页面滚动回调handleScroll方法
|
||||
let bgTest = document.getElementById("bgTest");
|
||||
Y1.value = bgTest.offsetTop * ratio.value;
|
||||
});
|
||||
function handleScroll() {
|
||||
const scrollTop =
|
||||
window.pageYOffset ||
|
||||
document.body.pageYOffset ||
|
||||
document.documentElement.scrollTop ||
|
||||
document.body.scrollTop;
|
||||
positionY1.value = Y1.value - scrollTop * ratio.value; //原始高度-滚动距离*视差系数
|
||||
@ -120,8 +121,8 @@ function handleScroll() {
|
||||
}
|
||||
.news-title {
|
||||
position: absolute;
|
||||
left: 190px;
|
||||
top: -80px;
|
||||
left: 30%;
|
||||
top: -1600px;
|
||||
font-size: 100px;
|
||||
font-family: "Big John";
|
||||
font-weight: 400;
|
||||
|
||||
@ -130,14 +130,14 @@ const HistoryList = reactive([
|
||||
},
|
||||
]);
|
||||
onMounted(() => {
|
||||
window.addEventListener("scroll", handleScroll); //创建滚动监听，页面滚动回调handleScroll方法
|
||||
document.body.addEventListener("scroll", handleScroll); //创建滚动监听，页面滚动回调handleScroll方法
|
||||
let bgTest = document.getElementById("bgTest");
|
||||
Y1.value = bgTest.offsetTop * ratio.value;
|
||||
});
|
||||
|
||||
function handleScroll() {
|
||||
const scrollTop =
|
||||
window.pageYOffset ||
|
||||
document.body.pageYOffset ||
|
||||
document.documentElement.scrollTop ||
|
||||
document.body.scrollTop;
|
||||
positionY1.value = Y1.value - scrollTop * ratio.value; //原始高度-滚动距离*视差系数
|
||||
@ -189,13 +189,13 @@ function handleScroll() {
|
||||
}
|
||||
.roadmap-title {
|
||||
position: absolute;
|
||||
left: 0%;
|
||||
top: -400px;
|
||||
font-size: 210px;
|
||||
left: 10%;
|
||||
top: -1000px;
|
||||
font-size: 100px;
|
||||
font-family: "Big John";
|
||||
font-weight: 400;
|
||||
color: #173637;
|
||||
opacity: 0.3;
|
||||
// opacity: 0.3;
|
||||
z-index: -1;
|
||||
}
|
||||
.content {
|
||||
|
||||
@ -89,14 +89,14 @@ const cardText = [
|
||||
},
|
||||
];
|
||||
onMounted(() => {
|
||||
window.addEventListener("scroll", handleScroll); //创建滚动监听，页面滚动回调handleScroll方法
|
||||
document.body.addEventListener("scroll", handleScroll); //创建滚动监听，页面滚动回调handleScroll方法
|
||||
let bgTest = document.getElementById("bgTest");
|
||||
Y1.value = bgTest.offsetTop * ratio.value;
|
||||
});
|
||||
|
||||
function handleScroll() {
|
||||
const scrollTop =
|
||||
window.pageYOffset ||
|
||||
document.body.pageYOffset ||
|
||||
document.documentElement.scrollTop ||
|
||||
document.body.scrollTop;
|
||||
positionY1.value = Y1.value - scrollTop * ratio.value; //原始高度-滚动距离*视差系数
|
||||
|
||||
101
mobile/src/components/global/YouTubeVideo.vue
Normal file
101
mobile/src/components/global/YouTubeVideo.vue
Normal file
@ -0,0 +1,101 @@
|
||||
<script setup>
|
||||
import { ref, watch, onMounted, onBeforeUnmount } from "vue";
|
||||
import YouTubePlayer from "youtube-player";
|
||||
|
||||
const props = defineProps({
|
||||
id: { type: String, default: "" },
|
||||
src: { type: String, required: true },
|
||||
width: { type: Number, default: 0 },
|
||||
height: { type: Number, default: 0 }
|
||||
});
|
||||
|
||||
const emit = defineEmits(["ended", "play", "pause"]);
|
||||
|
||||
onMounted(() => {
|
||||
initPlayer();
|
||||
loadPlayer();
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
player && player.destroy();
|
||||
});
|
||||
|
||||
const getVideoId = () => {
|
||||
try {
|
||||
const url = new URL(props.src);
|
||||
console.log(url,'urlurlurl');
|
||||
return url.searchParams.get("v") || "";
|
||||
} catch (error) {
|
||||
return "";
|
||||
}
|
||||
};
|
||||
|
||||
let player = null;
|
||||
const initPlayer = () => {
|
||||
try {
|
||||
player = YouTubePlayer(`youtube-${props.id}`, {
|
||||
host: "https://www.youtube.com",
|
||||
width: props.width,
|
||||
height: props.height,
|
||||
videoId: getVideoId(),
|
||||
playsinline: 1,
|
||||
rel: 0
|
||||
});
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
};
|
||||
|
||||
const loadPlayer = () => {
|
||||
try {
|
||||
player.loadVideoById(getVideoId());
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
};
|
||||
|
||||
const play = () => player && player.playVideo();
|
||||
const pause = () => player && player.pauseVideo();
|
||||
|
||||
// -1（未开始）0（已结束）1（正在播放）2（已暂停）3（正在缓冲）5（视频已插入）
|
||||
let stateChangeListener;
|
||||
const addStateChange = () => {
|
||||
stateChangeListener = player?.on("stateChange", (event) => {
|
||||
if (event.data === 0) emit("ended");
|
||||
if (event.data === 1) emit("play");
|
||||
if (event.data === 2) emit("pause");
|
||||
});
|
||||
};
|
||||
const removeStateChange = () => {
|
||||
if (stateChangeListener && player) player.off(stateChangeListener);
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.src,
|
||||
() => loadPlayer()
|
||||
);
|
||||
|
||||
defineExpose({ play, pause });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="youtube-video">
|
||||
<div :id="'youtube-' + id"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.youtube-video {
|
||||
// width: 100%;
|
||||
video{
|
||||
object-fit: cover !important;
|
||||
}
|
||||
|
||||
// overflow: hidden;
|
||||
}
|
||||
::selection {
|
||||
color: #fff;
|
||||
background: transparent !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="banner">
|
||||
<div class="content">
|
||||
<div class="title">rtyrtyr</div>
|
||||
<div class="title"><img src="../../assets/img/mobile-home/banner-slogan.png" alt=""></div>
|
||||
<div class="download-btns">
|
||||
<div class="andriod">
|
||||
<img src="../../assets/img/mobile-home/andriod.png" alt="" />
|
||||
@ -15,7 +15,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="banner-bg">
|
||||
<img src="@/assets/img/home/banner-bg.png" alt="" />
|
||||
<img src="@/assets/img/mobile-home/banner-bg.png" alt="" />
|
||||
</div>
|
||||
<div class="banner-bottom">
|
||||
<img src="@/assets/img/mobile-home/home-banner-bottom-boder.png" alt="" />
|
||||
@ -28,7 +28,7 @@
|
||||
<style lang="scss" scoped>
|
||||
.banner {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
height: 1243px;
|
||||
position: relative;
|
||||
.banner-bg {
|
||||
position: absolute;
|
||||
@ -60,6 +60,14 @@
|
||||
padding-top: 120px;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
.title{
|
||||
width:725px ;
|
||||
margin: 0 auto;
|
||||
margin-top: 333px;
|
||||
img{
|
||||
width:725px ;
|
||||
}
|
||||
}
|
||||
.download-btns {
|
||||
position: absolute;
|
||||
bottom: 150px;
|
||||
|
||||
@ -6,6 +6,7 @@
|
||||
:grabCursor="false"
|
||||
:centeredSlides="true"
|
||||
slidesPerView="2"
|
||||
:autoplay="{ delay: 4000, disableOnInteraction: false }"
|
||||
:coverflowEffect="{
|
||||
rotate: 0,
|
||||
stretch: 15,
|
||||
@ -39,6 +40,7 @@ import { ref, computed, reactive } from "vue";
|
||||
import {
|
||||
EffectCoverflow,
|
||||
Thumbs,
|
||||
Autoplay,
|
||||
FreeMode,
|
||||
Navigation,
|
||||
Pagination,
|
||||
@ -61,7 +63,7 @@ const imageList = reactive([
|
||||
{ imgSrc: require("@/assets/img/home/game-swiper-card/04.png") },
|
||||
{ imgSrc: require("@/assets/img/home/game-swiper-card/05.png") },
|
||||
]);
|
||||
const modules = [EffectCoverflow, Pagination];
|
||||
const modules = [EffectCoverflow, Pagination,Autoplay];
|
||||
|
||||
const handSlidePrev = () => {
|
||||
myRef.value?.$el.swiper.slidePrev();
|
||||
|
||||
@ -35,20 +35,26 @@
|
||||
:loop="true"
|
||||
:slides-per-view="1"
|
||||
:space-between="15"
|
||||
:autoplay="{ delay: 3000, disableOnInteraction: false }"
|
||||
:pagination="{
|
||||
clickable: true,
|
||||
}"
|
||||
:autoplay="{ delay: 10000, disableOnInteraction: false }"
|
||||
>
|
||||
<swiper-slide v-for="(item, index) in imageList" :key="index">
|
||||
<div class="gallery-banner-img">
|
||||
<img :src="item.imgSrc" alt="" />
|
||||
<YoutubeVideo
|
||||
:id="item.id"
|
||||
:src="item.videoSrc"
|
||||
:width="720"
|
||||
:height="435"
|
||||
>
|
||||
</YoutubeVideo>
|
||||
</div>
|
||||
</swiper-slide>
|
||||
</swiper>
|
||||
</div>
|
||||
<div class="btn">
|
||||
<div class="go-to-btn"></div>
|
||||
<!-- <div class="go-to-btn"></div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -74,7 +80,10 @@
|
||||
<DameplaySwiperCard></DameplaySwiperCard>
|
||||
</div>
|
||||
<div class="gameplay-bottom-viodboder">
|
||||
<img src="@/assets/img/mobile-home/game-feature-bottom-boder.png" alt="" />
|
||||
<img
|
||||
src="@/assets/img/mobile-home/game-feature-bottom-boder.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
@ -95,7 +104,7 @@
|
||||
import { ref, computed, reactive, onMounted } from "vue";
|
||||
import DameplaySwiperCard from "./DameplaySwiperCard.vue";
|
||||
import { Swiper, SwiperSlide } from "swiper/vue";
|
||||
// import VideoModal from "./VideoModal.vue";
|
||||
import YoutubeVideo from "../global/YouTubeVideo.vue";
|
||||
|
||||
// 引入swiper样式（按需导入）
|
||||
import "swiper/css";
|
||||
@ -108,28 +117,28 @@ import { Autoplay, Pagination, Navigation, Scrollbar } from "swiper";
|
||||
const modules = [Autoplay, Pagination, Navigation, Scrollbar];
|
||||
const imageList = reactive([
|
||||
{
|
||||
imgSrc: require("@/assets/img/home/game/001.png"),
|
||||
videoSrc: "https://embersword.com/videos/hero-animate-h264.mp4",
|
||||
videoSrc: "https://www.youtube.com/watch?v=_SZ5pVCxmro",
|
||||
id: "_SZ5pVCxmro",
|
||||
},
|
||||
{
|
||||
imgSrc: require("@/assets/img/home/game/002.png"),
|
||||
videoSrc: "https://embersword.com/videos/hero-animate-h264.mp4",
|
||||
videoSrc: "https://www.youtube.com/watch?v=b-Dt2UvK4c4",
|
||||
id: "b-Dt2UvK4c4",
|
||||
},
|
||||
{
|
||||
imgSrc: require("@/assets/img/home/game/003.png"),
|
||||
videoSrc: "https://embersword.com/videos/hero-animate-h264.mp4",
|
||||
videoSrc: "https://www.youtube.com/watch?v=t8SZPxlqzMI",
|
||||
id: "t8SZPxlqzMI",
|
||||
},
|
||||
{
|
||||
imgSrc: require("@/assets/img/home/game/004.png"),
|
||||
videoSrc: "https://embersword.com/videos/hero-animate-h264.mp4",
|
||||
videoSrc: "https://www.youtube.com/watch?v=_trHtuEsmDY",
|
||||
id: "_trHtuEsmDY",
|
||||
},
|
||||
{
|
||||
imgSrc: require("@/assets/img/home/game/005.png"),
|
||||
videoSrc: "https://embersword.com/videos/hero-animate-h264.mp4",
|
||||
videoSrc: "https://www.youtube.com/watch?v=ru1TNcZoS98",
|
||||
id: "ru1TNcZoS98",
|
||||
},
|
||||
{
|
||||
imgSrc: require("@/assets/img/home/game/006.png"),
|
||||
videoSrc: "https://embersword.com/videos/hero-animate-h264.mp4",
|
||||
videoSrc: "https://www.youtube.com/watch?v=0hSr0KJtgmI",
|
||||
id: "0hSr0KJtgmI",
|
||||
},
|
||||
]);
|
||||
const Y1 = ref(0);
|
||||
@ -371,6 +380,7 @@ const handleClick = (item) => {
|
||||
border-radius: 15px;
|
||||
width: 100%;
|
||||
height: 435px;
|
||||
background-color: #010001;
|
||||
// flex: 0 0 33.33333333%;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
|
||||
@ -29,16 +29,23 @@
|
||||
</div>
|
||||
<div class="pve-content">
|
||||
<div class="slogan">
|
||||
<span class="title"> The PVE rewards include in-game ... </span
|
||||
<span class="title">
|
||||
Each battle contains 40 players by matching </span
|
||||
><br />
|
||||
. Bounty quest: Finish the corresponding task to earn the rewards<br />
|
||||
. 3 different types of dungeons, Signal, Multi, and Guild
|
||||
<span v-if="!isPveTab"
|
||||
>A player should expect to face the majority or entirety of their
|
||||
opponents in the form of computer-controlled opponents.
|
||||
</span>
|
||||
<span v-else
|
||||
>Stands for Player versus Player. It’s a game mode that revolves
|
||||
around layer-against-player combat - combat between actual human
|
||||
players.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gameplay-left">
|
||||
<div class="pve-img">
|
||||
<img v-if="isPveTab" src="@/assets/img/home/pve-img.png" alt="" />
|
||||
<img v-else src="@/assets/img/home/pve-img.png" alt="" />
|
||||
<img src="@/assets/img/home/pve-img.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -47,7 +54,7 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Modal from '../layout/Modal.vue'
|
||||
import Modal from "../layout/Modal.vue";
|
||||
import { ref, onMounted } from "vue";
|
||||
const isPveTab = ref(false);
|
||||
const handTabActive = (isTab) => {
|
||||
@ -62,7 +69,7 @@ const handTabActive = (isTab) => {
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
padding-top: 100px;
|
||||
background: linear-gradient(180deg, #27757D, #289299, #34ADB4);
|
||||
background: linear-gradient(180deg, #27757d, #289299, #34adb4);
|
||||
.gameplay-bg {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
@ -140,11 +147,11 @@ const handTabActive = (isTab) => {
|
||||
.pve-left: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)
|
||||
);
|
||||
calc(50% + 0px) calc(50% + 250px),
|
||||
calc(50% + 250px) calc(50% + 0px),
|
||||
calc(50% + 0px) calc(50% - 250px),
|
||||
calc(50% - 250px) calc(50% - 0px)
|
||||
);
|
||||
transition: all 0.25s ease-in;
|
||||
transform: scaleX(1, 1);
|
||||
}
|
||||
@ -179,11 +186,11 @@ const handTabActive = (isTab) => {
|
||||
}
|
||||
.pve-left-active:hover::after {
|
||||
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)
|
||||
);
|
||||
calc(50% + 0px) calc(50% + 250px),
|
||||
calc(50% + 250px) calc(50% + 0px),
|
||||
calc(50% + 0px) calc(50% - 250px),
|
||||
calc(50% - 250px) calc(50% - 0px)
|
||||
);
|
||||
opacity: 1;
|
||||
transform: scaleX(1, 1);
|
||||
transition: all 0.25s ease-in;
|
||||
@ -302,10 +309,10 @@ const handTabActive = (isTab) => {
|
||||
.pve-right: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)
|
||||
calc(50% + 0px) calc(50% + 250px),
|
||||
calc(50% + 250px) calc(50% + 0px),
|
||||
calc(50% + 0px) calc(50% - 250px),
|
||||
calc(50% - 250px) calc(50% - 0px)
|
||||
);
|
||||
transition: all 0.3s ease-in;
|
||||
transform: scaleX(1, 1);
|
||||
@ -347,10 +354,10 @@ const handTabActive = (isTab) => {
|
||||
.pve-right-active: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)
|
||||
calc(50% + 0px) calc(50% + 250px),
|
||||
calc(50% + 250px) calc(50% + 0px),
|
||||
calc(50% + 0px) calc(50% - 250px),
|
||||
calc(50% - 250px) calc(50% - 0px)
|
||||
);
|
||||
transition: all 0.3s ease-in;
|
||||
transform: scaleX(1, 1);
|
||||
@ -374,6 +381,7 @@ const handTabActive = (isTab) => {
|
||||
.slogan {
|
||||
width: 694px;
|
||||
// height: 164px;
|
||||
|
||||
margin: 0 auto;
|
||||
margin-bottom: 121px;
|
||||
margin-top: 38px;
|
||||
|
||||
@ -6,6 +6,7 @@
|
||||
<swiper
|
||||
:modules="modules"
|
||||
class="mySwiper"
|
||||
:autoplay="{ delay: 4000, disableOnInteraction: false }"
|
||||
@swiper="setHeroSwiper"
|
||||
:navigation="{
|
||||
nextEl: '.swiper-btn1-next',
|
||||
@ -42,8 +43,8 @@ import { ref, onMounted } from "vue";
|
||||
import { HeroList } from "@/configs/information";
|
||||
import "swiper/css";
|
||||
import "swiper/css/navigation";
|
||||
import { Navigation } from "swiper";
|
||||
const modules = ref([Navigation]);
|
||||
import { Navigation, Autoplay} from "swiper";
|
||||
const modules = ref([Navigation,Autoplay]);
|
||||
const heroAnimationActive = ref(false);
|
||||
const swiperIndex = ref(null);
|
||||
const activeIndex = ref(0);
|
||||
|
||||
@ -8,6 +8,7 @@
|
||||
<swiper
|
||||
:modules="modules"
|
||||
class="mySwiper"
|
||||
:autoplay="{ delay: 4000, disableOnInteraction: false }"
|
||||
:navigation="{
|
||||
nextEl: '.swiper-btn2-next',
|
||||
prevEl: '.swiper-btn2-prev',
|
||||
@ -51,8 +52,8 @@ import { ref, computed, reactive, onMounted } from "vue";
|
||||
import "swiper/css";
|
||||
import "swiper/css/navigation";
|
||||
// import required modules
|
||||
import { Navigation } from "swiper";
|
||||
const modules = ref([Navigation]);
|
||||
import { Navigation,Autoplay } from "swiper";
|
||||
const modules = ref([Navigation,Autoplay]);
|
||||
const weaponAnimationActive = ref(false);
|
||||
const weaponList = reactive([
|
||||
{
|
||||
|
||||
@ -74,20 +74,36 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
let timer = null;
|
||||
import { ref ,onMounted,onUnmounted} from "vue";
|
||||
const scrollTop = ref(0)
|
||||
const btnFlag = ref(false)
|
||||
|
||||
function backTop() {
|
||||
timer = setInterval(() => {
|
||||
const backTop =
|
||||
window.pageYOffset ||
|
||||
document.documentElement.scrollTop ||
|
||||
document.body.scrollTop;
|
||||
const speedTop = backTop / 10;
|
||||
document.documentElement.scrollTop = backTop - speedTop;
|
||||
if (backTop === 0) {
|
||||
clearInterval(timer);
|
||||
let timer = setInterval(() => {
|
||||
let ispeed = Math.floor(-scrollTop.value / 5)
|
||||
document.documentElement.scrollTop = document.body.scrollTop = scrollTop.value + ispeed
|
||||
if (scrollTop.value === 0) {
|
||||
clearInterval(timer)
|
||||
}
|
||||
}, 10);
|
||||
}, 16)
|
||||
}
|
||||
|
||||
function scrollToTop() {
|
||||
scrollTop.value = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
|
||||
if (scrollTop.value > 60) {
|
||||
btnFlag.value = true
|
||||
} else {
|
||||
btnFlag.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener('scroll', scrollToTop)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('scroll', scrollToTop)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -4,9 +4,10 @@
|
||||
<img src="../../assets/img/home/nav-logo.png" alt="" />
|
||||
</div>
|
||||
<div class="nav-right">
|
||||
<div class="avatar-icon">
|
||||
<div class="avatar-icon" v-if="!chain.logined" @click="login">
|
||||
<img src="../../assets/img/mobile-home/avatar-icon.png" alt="" />
|
||||
</div>
|
||||
<div v-else class="logout" @click="logout">logout</div>
|
||||
<div
|
||||
:class="navShow == true ? 'nav-btn-active' : 'nav-btn'"
|
||||
@click="switchNav"
|
||||
@ -42,16 +43,21 @@
|
||||
</div>
|
||||
</a-drawer>
|
||||
</div>
|
||||
<ChainModel></ChainModel>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, provide } from "vue";
|
||||
import { computed, reactive, onMounted, nextTick ,watchEffect} from "vue";
|
||||
import { computed, reactive, onMounted, nextTick, watchEffect } from "vue";
|
||||
import { useRouter, useRoute } from "vue-router";
|
||||
import ChainModel from "../../components/global/ChainModel.vue";
|
||||
import { useChainStore } from "@/store/chain";
|
||||
import { useAppStore } from "@/store/app";
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const navShow = ref(false);
|
||||
const activeIndex = ref(0);
|
||||
const chain = useChainStore();
|
||||
onMounted(async () => {
|
||||
navShow.value = true;
|
||||
await nextTick();
|
||||
@ -89,11 +95,25 @@ const navList = reactive([
|
||||
],
|
||||
},
|
||||
]);
|
||||
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;
|
||||
};
|
||||
function onLinkTo(item, index) {
|
||||
activeIndex.value = index;
|
||||
router.push(item.path);
|
||||
navShow.value = false;
|
||||
}
|
||||
|
||||
watchEffect(() => {
|
||||
const index = navList.findIndex((navItem) => navItem.path === route.path);
|
||||
activeIndex.value = index !== -1 ? index : 0;
|
||||
@ -193,4 +213,16 @@ watchEffect(() => {
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.logout {
|
||||
// width: 36px;
|
||||
// height: 36px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 28px;
|
||||
font-family: "Big John";
|
||||
font-weight: 400;
|
||||
// position: relative;
|
||||
color: #d74458;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -9,7 +9,7 @@ const routes = [
|
||||
component: Home,
|
||||
meta: {
|
||||
showInMenu: true,
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/about",
|
||||
@ -17,7 +17,7 @@ const routes = [
|
||||
component: About,
|
||||
meta: {
|
||||
showInMenu: true,
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/gellery",
|
||||
@ -26,7 +26,7 @@ const routes = [
|
||||
import(/* webpackChunkName "gellery" */ "././../views/GalleryView.vue"),
|
||||
meta: {
|
||||
showInMenu: true,
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/marketpalce",
|
||||
@ -37,7 +37,7 @@ const routes = [
|
||||
),
|
||||
meta: {
|
||||
showInMenu: true,
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/contact",
|
||||
@ -46,13 +46,25 @@ const routes = [
|
||||
import(/* webpackChunkName "contact" */ "././../views/ContactUsView.vue"),
|
||||
meta: {
|
||||
showInMenu: true,
|
||||
}
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(),
|
||||
routes,
|
||||
routes
|
||||
});
|
||||
router.afterEach((to, from) => {
|
||||
let bodySrcollTop = document.body.scrollTop;
|
||||
if (bodySrcollTop !== 0) {
|
||||
document.body.scrollTop = 0;
|
||||
return;
|
||||
}
|
||||
let docSrcollTop = document.documentElement.scrollTop;
|
||||
if (docSrcollTop !== 0) {
|
||||
document.documentElement.scrollTop = 0;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
export default router;
|
||||
|
||||
@ -19,7 +19,12 @@ export const useUserStore = defineStore('user', () => {
|
||||
];
|
||||
|
||||
const token = ref(getToken());
|
||||
|
||||
// const accountId = ref(getAccountId());
|
||||
// AppModule.updateAccount(accountId.value);
|
||||
if(token.value){
|
||||
|
||||
AppModule.updateStep(1);
|
||||
}
|
||||
async function Login({bcInstance, account, chainId, nonce}) {
|
||||
nonce += ''
|
||||
const tips = 'This signature is only used for verify your account'
|
||||
|
||||
@ -2015,7 +2015,7 @@ debug@^3.1.0, debug@^3.2.7:
|
||||
dependencies:
|
||||
ms "^2.1.1"
|
||||
|
||||
debug@^4.1.0, debug@^4.1.1, debug@^4.3.3:
|
||||
debug@^4.1.0, debug@^4.1.1, debug@^4.3.3, debug@^4.3.4:
|
||||
version "4.3.4"
|
||||
resolved "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz"
|
||||
integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
|
||||
@ -3636,6 +3636,11 @@ levelup@^1.2.1:
|
||||
semver "~5.4.1"
|
||||
xtend "~4.0.0"
|
||||
|
||||
load-script@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.npmmirror.com/load-script/-/load-script-1.0.0.tgz#0491939e0bee5643ee494a7e3da3d2bac70c6ca4"
|
||||
integrity sha512-kPEjMFtZvwL9TaZo0uZ2ml+Ye9HUMmPwbYRJ324qF9tqMejwykJ5ggTyvzmrbBeapCAbk98BSbTeovHEEP1uCA==
|
||||
|
||||
locate-path@^3.0.0:
|
||||
version "3.0.0"
|
||||
resolved "https://registry.npmmirror.com/locate-path/-/locate-path-3.0.0.tgz"
|
||||
@ -4932,6 +4937,11 @@ simple-get@^2.7.0:
|
||||
once "^1.3.1"
|
||||
simple-concat "^1.0.0"
|
||||
|
||||
sister@^3.0.0:
|
||||
version "3.0.2"
|
||||
resolved "https://registry.npmmirror.com/sister/-/sister-3.0.2.tgz#bb3e39f07b1f75bbe1945f29a27ff1e5a2f26be4"
|
||||
integrity sha512-p19rtTs+NksBRKW9qn0UhZ8/TUI9BPw9lmtHny+Y3TinWlOa9jWh9xB0AtPSdmOy49NJJJSSe0Ey4C7h0TrcYA==
|
||||
|
||||
snapdragon-node@^2.0.1:
|
||||
version "2.1.1"
|
||||
resolved "https://registry.npmmirror.com/snapdragon-node/-/snapdragon-node-2.1.1.tgz"
|
||||
@ -6036,3 +6046,12 @@ yauzl@^2.10.0:
|
||||
dependencies:
|
||||
buffer-crc32 "~0.2.3"
|
||||
fd-slicer "~1.1.0"
|
||||
|
||||
youtube-player@^5.6.0:
|
||||
version "5.6.0"
|
||||
resolved "https://registry.npmmirror.com/youtube-player/-/youtube-player-5.6.0.tgz#71699ca093d8ae65e87091898cf812b354e261ea"
|
||||
integrity sha512-x95fBbxV7eZ1ZsFtMLMcSGX0Jb/GPPj69RsooyEDVa9bzvvNZ4d5VjnBVBYoY85008VefkLvtaV+b+l38R/LMQ==
|
||||
dependencies:
|
||||
debug "^4.3.4"
|
||||
load-script "^1.0.0"
|
||||
sister "^3.0.0"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user