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

rebuild main page footer

Browse source
This commit is contained in:
KUN1007 2023-06-08 11:36:02 +08:00
parent 0344cdc36b
commit fc46292643
9 changed files with 219 additions and 189 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/views/Home/content/article/MainPageArticle.vue
View file

@ -1,5 +1,5 @@
<script setup lang="ts">
import ArticleHeader from './header/ArticleHeader.vue'
import ArticleHeader from './components/header/ArticleHeader.vue'
import ArticleContent from './content/ArticleContent.vue'
</script>

0
src/views/Home/content/article/header/ArticleHeader.vue → src/views/Home/content/article/components/header/ArticleHeader.vue
View file

0
src/views/Home/content/article/header/SortTopic.vue → src/views/Home/content/article/components/header/SortTopic.vue
View file

2
src/views/Home/footer/MainPageFooter.vue
View file

@ -1,6 +1,6 @@
<script setup lang="ts">
import FooterWave from './wave/FooterWave.vue'
import KUNGalgameInfo from './info/KUNGalgameInfo.vue'
import KUNGalgameInfo from './components/KUNGalgameInfo.vue'
</script>
<template>

45
src/views/Home/footer/components/Contacts.vue Normal file
View file

@ -0,0 +1,45 @@
<script setup lang="ts">
import { Icon } from '@iconify/vue'
</script>
<template>
<!-- 下方上面的联系我们 -->
<div class="kungalgame-contact">
<h2>联系我们</h2>
<!-- QQ, 微信, telegram 的图标列表 -->
<ul>
<li><Icon icon="bi:tencent-qq" /></li>
<li><Icon icon="ri:bilibili-line" /></li>
<li><Icon icon="ic:baseline-telegram" /></li>
</ul>
</div>
</template>
<style lang="scss" scoped>
/* 下方上面的联系我们 */
.kungalgame-contact {
width: 180px;
margin: 0 auto;
margin-bottom: 5px;
display: flex;
justify-content: center;
align-items: center;
color: var(--kungalgame-font-color-2);
font-size: small;
}
.kungalgame-contact h2 {
margin-right: 20px;
font-size: medium;
}
.kungalgame-contact ul {
display: flex;
align-items: center;
flex-grow: 1;
}
.kungalgame-contact ul li {
flex-grow: 1;
display: flex;
justify-content: center;
align-items: center;
}
</style>

44
src/views/Home/footer/components/Describe.vue Normal file
View file

@ -0,0 +1,44 @@
<script setup lang="ts"></script>
<template>
<!-- 右侧的网站信息容器 -->
<div class="kungalgame-footer-right-wrap">
<!-- 网站名 -->
<div class="kungalgame">
<span>KUNgalgame</span>
</div>
<!-- 网站描述 -->
<div class="kungalgame-describe">
<span>世界上最萌的 galgame 论坛!</span>
<span>KUNgalgame以营造最良好的氛围为理念</span>
<span>KUNgalgame永远不会有广告</span>
<span>KUNgalgame永远不会收费</span>
</div>
</div>
</template>
<style lang="scss" scoped>
/* 右侧的网站信息容器 */
.kungalgame-footer-right-wrap {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
/* 右侧网站介绍部分相对于左侧的占比 */
flex-grow: 1;
color: var(--kungalgame-font-color-2);
}
/* 网站名 */
.kungalgame {
font-size: larger;
padding-bottom: 20px;
font-weight: bold;
}
/* 网站描述 */
.kungalgame-describe {
max-width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
</style>

62
src/views/Home/footer/components/KUNGalgameInfo.vue Normal file
View file

@ -0,0 +1,62 @@
<script setup lang="ts">
import List from './List.vue'
import Describe from './Describe.vue'
import Contacts from './Contacts.vue'
import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
</script>
<template>
<!-- 头部下面的信息展示部分,目的是使信息区域居中且占比 61.8 -->
<div class="kungalgame-footer-info">
<!-- 信息展示部分的容器,目的是把左侧的信息和右侧的网站介绍分开 -->
<div class="kungalgame-footer-info-wrap">
<!-- 左侧的信息容器 -->
<div class="kungalgame-footer-left-wrap">
<!-- 左侧顶部的信息 -->
<List />
<!-- 左侧下方的信息 -->
<div class="footer-left-bottom-info">
<Contacts />
<!-- 版权描述,版本号 -->
<KUNGalgameFooter style="margin: 0 auto" />
</div>
</div>
<Describe />
</div>
</div>
</template>
<style lang="scss" scoped>
/* 头部下面的信息展示部分,目的是使信息区域居中且占比 61.8 */
.kungalgame-footer-info {
/* 信息区域的增长 */
flex-grow: 1;
display: flex;
background-color: var(--kungalgame-trans-blue-2);
}
/* 信息展示部分的容器,目的是把左侧的信息和右侧的网站介绍分开 */
.kungalgame-footer-info-wrap {
margin: 0 auto;
/* 信息区域总宽度 61.8% */
width: 61.8%;
/* 信息区域最小宽度 */
min-width: 700px;
/* 为了左右两部分设置弹性盒 */
display: flex;
}
/* 左侧的信息容器 */
.kungalgame-footer-left-wrap {
display: flex;
flex-direction: column;
justify-content: space-around;
/* 左侧分类信息区相对于右侧网站介绍的比例 */
flex-grow: 2;
}
/* 左侧下方的信息 */
.footer-left-bottom-info {
display: flex;
flex-direction: column;
}
</style>

66
src/views/Home/footer/components/List.vue Normal file
View file

@ -0,0 +1,66 @@
<script setup lang="ts"></script>
<template>
<div class="footer-left-top-info">
<!-- 非 galgame 交流 -->
<div class="footer-catalog-wrap">
<!-- 每个信息类别的标题 -->
<h2 class="kungalgame-footer-catalog-title">
<span>其它交流</span>
</h2>
<ul class="function">
<li><a href="#">日常交流</a></li>
<li><a href="#">闲聊灌水</a></li>
</ul>
</div>
<!-- 技术相关 -->
<div class="footer-catalog-wrap">
<h2 class="kungalgame-footer-catalog-title">
<span>技术相关</span>
</h2>
<ul class="function">
<li><a href="#">galgame运行相关</a></li>
<li><a href="#">galgame汉化相关</a></li>
<li><a href="#">galgame制作相关</a></li>
</ul>
</div>
<!-- 关于我们 -->
<div class="footer-catalog-wrap">
<h2 class="kungalgame-footer-catalog-title">
<span>关于我们</span>
</h2>
<ul class="function">
<li><a href="#">隐私政策</a></li>
<li><a href="#">运营理念</a></li>
<li><a href="#">收支公示</a></li>
</ul>
</div>
</div>
</template>
<style lang="scss" scoped>
/* 左侧顶部的信息 */
.footer-left-top-info {
display: flex;
justify-content: center;
}
/* 顶部的三个 ul */
.footer-catalog-wrap {
width: 1px;
flex-grow: 1;
display: flex;
flex-direction: column;
color: var(--kungalgame-font-color-2);
font-size: small;
}
.footer-catalog-wrap ul li {
margin: 5px 0;
}
.footer-catalog-wrap ul li a {
flex-grow: 1;
color: var(--kungalgame-font-color-2);
}
.footer-catalog-wrap ul {
color: var(--kungalgame-font-color-2);
}
</style>

187
src/views/Home/footer/info/KUNGalgameInfo.vue
View file

@ -1,187 +0,0 @@
<script setup lang="ts">
import { Icon } from '@iconify/vue'
import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
</script>
<template>
<!-- 头部下面的信息展示部分,目的是使信息区域居中且占比 61.8 -->
<div class="kungalgame-footer-info">
<!-- 信息展示部分的容器,目的是把左侧的信息和右侧的网站介绍分开 -->
<div class="kungalgame-footer-info-wrap">
<!-- 左侧的信息容器 -->
<div class="kungalgame-footer-left-wrap">
<!-- 左侧顶部的信息 -->
<div class="footer-left-top-info">
<!-- 非 galgame 交流 -->
<div class="footer-catalog-wrap">
<!-- 每个信息类别的标题 -->
<h2 class="kungalgame-footer-catalog-title">
<span>其它交流</span>
</h2>
<ul class="function">
<li><a href="#">日常交流</a></li>
<li><a href="#">闲聊灌水</a></li>
</ul>
</div>
<!-- 技术相关 -->
<div class="footer-catalog-wrap">
<h2 class="kungalgame-footer-catalog-title">
<span>技术相关</span>
</h2>
<ul class="function">
<li><a href="#">galgame运行相关</a></li>
<li><a href="#">galgame汉化相关</a></li>
<li><a href="#">galgame制作相关</a></li>
</ul>
</div>
<!-- 关于我们 -->
<div class="footer-catalog-wrap">
<h2 class="kungalgame-footer-catalog-title">
<span>关于我们</span>
</h2>
<ul class="function">
<li><a href="#">隐私政策</a></li>
<li><a href="#">运营理念</a></li>
<li><a href="#">收支公示</a></li>
</ul>
</div>
</div>
<!-- 左侧下方的信息 -->
<div class="footer-left-bottom-info">
<!-- 下方上面的联系我们 -->
<div class="kungalgame-contact">
<h2>联系我们</h2>
<!-- QQ, 微信, telegram 的图标列表 -->
<ul>
<li><Icon icon="bi:tencent-qq" /></li>
<li><Icon icon="ri:bilibili-line" /></li>
<li><Icon icon="ic:baseline-telegram" /></li>
</ul>
</div>
<!-- 版权描述,版本号 -->
<KUNGalgameFooter style="margin: 0 auto" />
</div>
</div>
<!-- 右侧的网站信息容器 -->
<div class="kungalgame-footer-right-wrap">
<!-- 网站名 -->
<div class="kungalgame">
<span>KUNgalgame</span>
</div>
<!-- 网站描述 -->
<div class="kungalgame-describe">
<span>世界上最萌的 galgame 论坛!</span>
<span>KUNgalgame以营造最良好的氛围为理念</span>
<span>KUNgalgame永远不会有广告</span>
<span>KUNgalgame永远不会收费</span>
</div>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
/* 头部下面的信息展示部分,目的是使信息区域居中且占比 61.8 */
.kungalgame-footer-info {
/* 信息区域的增长 */
flex-grow: 1;
display: flex;
background-color: var(--kungalgame-trans-blue-2);
}
/* 信息展示部分的容器,目的是把左侧的信息和右侧的网站介绍分开 */
.kungalgame-footer-info-wrap {
margin: 0 auto;
/* 信息区域总宽度 61.8% */
width: 61.8%;
/* 信息区域最小宽度 */
min-width: 700px;
/* 为了左右两部分设置弹性盒 */
display: flex;
}
/* 左侧的信息容器 */
.kungalgame-footer-left-wrap {
display: flex;
flex-direction: column;
justify-content: space-around;
/* 左侧分类信息区相对于右侧网站介绍的比例 */
flex-grow: 2;
}
/* 左侧顶部的信息 */
.footer-left-top-info {
display: flex;
justify-content: center;
}
/* 顶部的三个 ul */
.footer-catalog-wrap {
width: 1px;
flex-grow: 1;
display: flex;
flex-direction: column;
color: var(--kungalgame-font-color-2);
font-size: small;
}
.footer-catalog-wrap ul li {
margin: 5px 0;
}
.footer-catalog-wrap ul li a {
flex-grow: 1;
color: var(--kungalgame-font-color-2);
}
.footer-catalog-wrap ul {
color: var(--kungalgame-font-color-2);
}
/* 左侧下方的信息 */
.footer-left-bottom-info {
display: flex;
flex-direction: column;
}
/* 下方上面的联系我们 */
.kungalgame-contact {
width: 180px;
margin: 0 auto;
margin-bottom: 5px;
display: flex;
justify-content: center;
align-items: center;
color: var(--kungalgame-font-color-2);
font-size: small;
}
.kungalgame-contact h2 {
margin-right: 20px;
font-size: medium;
}
.kungalgame-contact ul {
display: flex;
align-items: center;
flex-grow: 1;
}
.kungalgame-contact ul li {
flex-grow: 1;
display: flex;
justify-content: center;
align-items: center;
}
/* 右侧的网站信息容器 */
.kungalgame-footer-right-wrap {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
/* 右侧网站介绍部分相对于左侧的占比 */
flex-grow: 1;
color: var(--kungalgame-font-color-2);
}
/* 网站名 */
.kungalgame {
font-size: larger;
padding-bottom: 20px;
font-weight: bold;
}
/* 网站描述 */
.kungalgame-describe {
max-width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
</style>