fix BUG: footer jump
This commit is contained in:
parent
5b31bbabe6
commit
def0b75f0b
|
@ -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;
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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">{{
|
||||||
|
|
|
@ -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) {
|
||||||
.kun-footer-parallax > use:nth-child(1) {
|
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
animation-delay: -2s;
|
animation-delay: -2s;
|
||||||
animation-duration: 7s;
|
animation-duration: 7s;
|
||||||
}
|
}
|
||||||
.kun-footer-parallax > use:nth-child(2) {
|
&:nth-child(2) {
|
||||||
opacity: 0.3;
|
opacity: 0.3;
|
||||||
animation-delay: -3s;
|
animation-delay: -3s;
|
||||||
animation-duration: 10s;
|
animation-duration: 10s;
|
||||||
}
|
}
|
||||||
.kun-footer-parallax > use:nth-child(3) {
|
&:nth-child(3) {
|
||||||
opacity: 0.2;
|
opacity: 0.2;
|
||||||
animation-delay: -4s;
|
animation-delay: -4s;
|
||||||
animation-duration: 13s;
|
animation-duration: 13s;
|
||||||
}
|
}
|
||||||
.kun-footer-parallax > use:nth-child(4) {
|
&:nth-child(4) {
|
||||||
opacity: 0.1;
|
opacity: 0.1;
|
||||||
animation-delay: -5s;
|
animation-delay: -5s;
|
||||||
animation-duration: 20s;
|
animation-duration: 20s;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@keyframes move-forever {
|
@keyframes move-forever {
|
||||||
0% {
|
0% {
|
||||||
transform: translate3d(-90px, 0, 0);
|
transform: translate3d(-90px, 0, 0);
|
||||||
|
|
Loading…
Reference in a new issue