fix BUG: footer jump

This commit is contained in:
KUN1007 2023-10-13 19:20:23 +08:00
parent 5b31bbabe6
commit def0b75f0b
4 changed files with 42 additions and 37 deletions

View file

@ -5,14 +5,14 @@ import MainPageFooter from './footer/MainPageFooter.vue'
<template> <template>
<!-- 可视部分的容器 --> <!-- 可视部分的容器 -->
<div class="visual-wrapper"> <div class="root">
<MainPageContent /> <MainPageContent />
<MainPageFooter /> <MainPageFooter />
</div> </div>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
.visual-wrapper { .root {
height: 1500px; height: 1500px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;

View file

@ -6,24 +6,25 @@ import { Icon } from '@iconify/vue'
<!-- 下方上面的联系我们 --> <!-- 下方上面的联系我们 -->
<div class="kungalgame-contact"> <div class="kungalgame-contact">
<h2>{{ $tm('mainPage.footer.contact') }}</h2> <h2>{{ $tm('mainPage.footer.contact') }}</h2>
<!-- QQ, 微信, telegram 的图标列表 --> <!-- QQ, bilibili, telegram 的图标列表 -->
<ul> <ul>
<li> <li>
<a <a
href="http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=hlXYbLM8MqOm9WzE22ZodNiQJ3nc1Bu2&authKey=7xfTYC1atV5loXyWNv9VOTOaf5ZzR9BdCFcMNJWdmyukck8%2FDLSF3%2FrHgyiY48pT&noverify=0&group_code=726477957" href="http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=hlXYbLM8MqOm9WzE22ZodNiQJ3nc1Bu2&authKey=7xfTYC1atV5loXyWNv9VOTOaf5ZzR9BdCFcMNJWdmyukck8%2FDLSF3%2FrHgyiY48pT&noverify=0&group_code=726477957"
target="_blank" target="_blank"
><Icon icon="bi:tencent-qq" >
/></a> <Icon icon="bi:tencent-qq" />
</a>
</li> </li>
<li> <li>
<a href="https://space.bilibili.com/1748455574" target="_blank" <a href="https://space.bilibili.com/1748455574" target="_blank">
><Icon icon="ri:bilibili-line" <Icon icon="ri:bilibili-line" />
/></a> </a>
</li> </li>
<li> <li>
<a href="https://t.me/kungalgame" target="_blank" <a href="https://t.me/kungalgame" target="_blank">
><Icon icon="ic:baseline-telegram" <Icon icon="ic:baseline-telegram" />
/></a> </a>
</li> </li>
</ul> </ul>
</div> </div>

View file

@ -21,7 +21,7 @@ const info: FooterInfo[] = [
{ {
index: 1, index: 1,
name: `daily`, name: `daily`,
router: `/pool/index`, router: `/pool`,
}, },
{ {
index: 2, index: 2,
@ -37,17 +37,17 @@ const info: FooterInfo[] = [
{ {
index: 1, index: 1,
name: `execute`, name: `execute`,
router: `/technique/index`, router: `/technique`,
}, },
{ {
index: 2, index: 2,
name: `globalization`, name: `globalization`,
router: `/technique/index`, router: `/technique`,
}, },
{ {
index: 3, index: 3,
name: `make`, name: `make`,
router: `/technique/index`, router: `/technique`,
}, },
], ],
}, },
@ -63,12 +63,12 @@ const info: FooterInfo[] = [
{ {
index: 2, index: 2,
name: `principle`, name: `principle`,
router: `/kungalgame/index`, router: `/kungalgame`,
}, },
{ {
index: 3, index: 3,
name: `balance`, name: `balance`,
router: `/balance/index`, router: `/balance`,
}, },
], ],
}, },
@ -107,6 +107,7 @@ const link: FooterInfoItem[] = [
<h2> <h2>
<span>{{ $tm(`mainPage.footer.title['${kun.title}']`) }}</span> <span>{{ $tm(`mainPage.footer.title['${kun.title}']`) }}</span>
</h2> </h2>
<ul class="function" v-for="yuyu in kun.list" :key="yuyu.index"> <ul class="function" v-for="yuyu in kun.list" :key="yuyu.index">
<li> <li>
<RouterLink :to="yuyu.router">{{ <RouterLink :to="yuyu.router">{{
@ -115,11 +116,13 @@ const link: FooterInfoItem[] = [
</li> </li>
</ul> </ul>
</div> </div>
<div class="catalog"> <div class="catalog">
<!-- 每个信息类别的标题 --> <!-- 每个信息类别的标题 -->
<h2> <h2>
<span>{{ $tm(`mainPage.footer.title.friend`) }}</span> <span>{{ $tm(`mainPage.footer.title.friend`) }}</span>
</h2> </h2>
<ul class="function" v-for="azkhx in link" :key="azkhx.index"> <ul class="function" v-for="azkhx in link" :key="azkhx.index">
<li> <li>
<a :href="azkhx.router" target="_blank">{{ <a :href="azkhx.router" target="_blank">{{

View file

@ -40,27 +40,28 @@
.kun-footer-parallax > use { .kun-footer-parallax > use {
animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite; animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
fill: var(--kungalgame-trans-blue-2); fill: var(--kungalgame-trans-blue-2);
&:nth-child(1) {
opacity: 0.5;
animation-delay: -2s;
animation-duration: 7s;
}
&:nth-child(2) {
opacity: 0.3;
animation-delay: -3s;
animation-duration: 10s;
}
&:nth-child(3) {
opacity: 0.2;
animation-delay: -4s;
animation-duration: 13s;
}
&:nth-child(4) {
opacity: 0.1;
animation-delay: -5s;
animation-duration: 20s;
}
} }
.kun-footer-parallax > use:nth-child(1) {
opacity: 0.5;
animation-delay: -2s;
animation-duration: 7s;
}
.kun-footer-parallax > use:nth-child(2) {
opacity: 0.3;
animation-delay: -3s;
animation-duration: 10s;
}
.kun-footer-parallax > use:nth-child(3) {
opacity: 0.2;
animation-delay: -4s;
animation-duration: 13s;
}
.kun-footer-parallax > use:nth-child(4) {
opacity: 0.1;
animation-delay: -5s;
animation-duration: 20s;
}
@keyframes move-forever { @keyframes move-forever {
0% { 0% {
transform: translate3d(-90px, 0, 0); transform: translate3d(-90px, 0, 0);