hashirama/kun-galgame-vue
1
0
Fork 0
Code Issues Pull requests Actions Projects Releases Wiki Activity

fix BUG: footer jump

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/views/Home/KUNGalgameMainPage.vue
View file

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

19
src/views/Home/footer/components/Contacts.vue
View file

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

15
src/views/Home/footer/components/List.vue
View file

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

41
src/views/Home/footer/components/Wave.vue
View file

@ -40,27 +40,28 @@
.kun-footer-parallax > use {
animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
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 {
0% {
transform: translate3d(-90px, 0, 0);