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

rebuild about page

Browse source
This commit is contained in:
KUN1007 2023-06-03 00:02:46 +08:00
parent fe12c15061
commit aa446d3d9c
9 changed files with 102 additions and 119 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/KUNGalgameTopBar.vue
View file

@ -41,7 +41,7 @@ const topBarItem: topBar[] = [
let topicStyle = {}
// 接受父组件的传值
const props = defineProps(['isMainPage', 'isTopicPage'])
const props = defineProps(['isMainPage', 'isTopicPage', 'isAboutPage'])
const isMain = props.isMainPage
const isTopicPage = props.isTopicPage

110
src/views/kungalgame/KUNGalgame.vue
View file

@ -2,24 +2,10 @@
import KUNGalgameTopBar from '@/components/KUNGalgameTopBar.vue'
// 导入背景图片
import { currBackground } from '@/hooks/useBackgroundPicture'
interface asideBar {
index: number
name: string
router: string
}
const asideBarItem: asideBar[] = [
{ index: 1, name: '隐私政策', router: '/privacy' },
{ index: 2, name: '执行条例', router: '/bylaw' },
{ index: 3, name: '更新日志', router: '/update-log' },
{ index: 4, name: '收支公示', router: '/balance' },
{ index: 5, name: '不萌记录', router: '/non-moe' },
{ index: 6, name: '加入我们', router: '/contact' },
{ index: 7, name: '感谢名单', router: '/thanks-list' },
{ index: 8, name: '赞助我们', router: '/donate' },
{ index: 9, name: '返回主页', router: '/' },
]
// 导入 Footer
import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
// 导入 Aside
import Aside from './components/Aside.vue'
</script>
<template>
@ -30,20 +16,7 @@ const asideBarItem: asideBar[] = [
<div class="content-container">
<!-- 内容区 -->
<div class="content">
<!-- 侧边的文章结构索引 -->
<div class="aside">
<div>KUNGalgame</div>
<ul>
<li>网站简介</li>
<li>运营理念</li>
<li>论坛规定</li>
<li class="skip" v-for="kun in asideBarItem" :key="kun.index">
<router-link style="color: #218bff" :to="{ path: kun.router }">{{
kun.name
}}</router-link>
</li>
</ul>
</div>
<Aside />
<!-- 文章容器 -->
<div class="article">
<h1>关于我们</h1>
@ -195,29 +168,22 @@ const asideBarItem: asideBar[] = [
</p>
</div>
<!-- 版权 -->
<div class="copyright">
<span
>Copyright © 2023 KUNgalgame All rights reserved | Version
0.01</span
>
</div>
<KUNGalgameFooter
style="
width: 100%;
position: absolute;
bottom: 1%;
display: flex;
justify-content: center;
"
/>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
* {
list-style: none;
padding: 0;
margin: 0;
text-decoration: none;
}
*::-webkit-scrollbar {
display: none;
}
.root {
height: 100vh;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
@ -235,8 +201,6 @@ const asideBarItem: asideBar[] = [
/* 居中 */
margin: 0 auto;
padding: 7px;
/* 相对于版权定位 */
position: relative;
}
/* 内容区 */
.content {
@ -246,44 +210,6 @@ const asideBarItem: asideBar[] = [
display: flex;
box-shadow: $shadow;
}
/* 侧边的文章结构索引 */
.aside {
width: 122px;
height: 100%;
flex-shrink: 0;
border-right: 1px solid $kungalgame-blue-4;
}
/* 侧边的标题 */
.aside > div {
/* 固定高度 */
height: 50px;
/* 字体设置 */
font-size: 17px;
font-weight: bold;
/* 居中 */
display: flex;
justify-content: center;
align-items: center;
}
/* 侧边总体的列表 */
.aside > ul {
display: flex;
flex-direction: column;
align-items: center;
}
/* 侧边的单个项目 */
.aside > ul > li {
width: 100%;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
/* 单个项目的 hover */
.aside > ul > li:hover {
background-color: $kungalgame-trans-blue-2;
}
/* 文章区距离侧边的距离 */
.article {
width: 100%;
@ -338,12 +264,4 @@ a {
list-style: inside;
text-indent: 4em;
}
/* 版权 */
.copyright {
width: 100%;
position: absolute;
bottom: 1%;
display: flex;
justify-content: center;
}
</style>

84
src/views/kungalgame/components/Aside.vue Normal file
View file

@ -0,0 +1,84 @@
<script setup lang="ts">
interface asideBar {
index: number
name: string
router: string
}
const asideBarItem: asideBar[] = [
{ index: 1, name: '隐私政策', router: '/privacy' },
{ index: 2, name: '执行条例', router: '/bylaw' },
{ index: 3, name: '更新日志', router: '/update-log' },
{ index: 4, name: '收支公示', router: '/balance' },
{ index: 5, name: '不萌记录', router: '/non-moe' },
{ index: 6, name: '加入我们', router: '/contact' },
{ index: 7, name: '感谢名单', router: '/thanks-list' },
{ index: 8, name: '赞助我们', router: '/donate' },
{ index: 9, name: '返回主页', router: '/' },
]
</script>
<template>
<!-- 侧边的文章结构索引 -->
<div class="aside">
<div>KUNGalgame</div>
<ul>
<li>网站简介</li>
<li>运营理念</li>
<li>论坛规定</li>
<li class="skip" v-for="kun in asideBarItem" :key="kun.index">
<router-link style="color: #218bff" :to="{ path: kun.router }">{{
kun.name
}}</router-link>
</li>
</ul>
</div>
</template>
<style lang="scss" scoped>
/* 侧边的文章结构索引 */
.aside {
width: 122px;
height: 100%;
flex-shrink: 0;
border-right: 1px solid $kungalgame-blue-4;
/* 侧边的标题 */
& > div {
/* 固定高度 */
height: 50px;
/* 字体设置 */
font-size: 17px;
font-weight: bold;
/* 居中 */
display: flex;
justify-content: center;
align-items: center;
font-family: serif;
}
/* 侧边总体的列表 */
& > ul {
display: flex;
flex-direction: column;
align-items: center;
/* 侧边的单个项目 */
& > li {
width: 100%;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
/* 单个项目的 hover */
&:hover {
background-color: $kungalgame-trans-blue-2;
}
}
}
}
/* 跳转链接 */
.skip {
border-bottom: 1.5px solid $kungalgame-blue-4;
cursor: pointer;
color: $kungalgame-blue-4;
}
</style>

5
src/views/kungalgamer/KUNGalgamer.vue
View file

@ -61,11 +61,6 @@ import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
/* 用户页面的所有字体颜色 */
color: $kungalgame-font-color-3;
}
/*
内容区
*/
.content {
/* 使帖子不溢出 */
height: 1px;

3
src/views/kungalgamer/components/NavBar.vue
View file

@ -74,7 +74,7 @@ const navBar: nav[] = [
background-color: $kungalgame-trans-blue-0;
display: flex;
&:hover {
background-color: $kungalgame-trans-blue-4;
background-color: $kungalgame-trans-red-2;
transition: 0.1s;
}
a {
@ -83,6 +83,7 @@ const navBar: nav[] = [
display: flex;
justify-content: center;
align-items: center;
color: $kungalgame-blue-4;
}
}
}

2
src/views/kungalgamer/components/SingleTopic.vue
View file

@ -4,7 +4,7 @@
<!-- 单个帖子 -->
<div class="topic">
<div class="topic-title">
啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
</div>
<div class="topic-time">2019/10/7</div>
</div>

2
src/views/pool/Pool.vue
View file

@ -357,8 +357,6 @@ import { currBackground } from '@/hooks/useBackgroundPicture'
background-position: center;
background-size: cover;
min-width: 700px;
font-family: 'adobe-clean', 'Source Sans Pro', -apple-system,
'BlinkMacSystemFont', 'Segoe UI,Roboto', sans-serif;
}
/* 帖子池容器 */
.pool-container {

11
src/views/technique/Technique.vue
View file

@ -38,15 +38,6 @@ import Aside from './components/Aside.vue'
</template>
<style lang="scss" scoped>
* {
list-style: none;
padding: 0;
margin: 0;
text-decoration: none;
}
*::-webkit-scrollbar {
display: none;
}
.root {
height: 1500px;
display: flex;
@ -55,8 +46,6 @@ import Aside from './components/Aside.vue'
background-position: center;
background-size: cover;
min-width: 800px;
font-family: 'adobe-clean', 'Source Sans Pro', -apple-system,
'BlinkMacSystemFont', 'Segoe UI,Roboto', sans-serif;
}
/* 内容区 */
.content {

2
src/views/topic/KUNGalgameTopicPage.vue
View file

@ -33,8 +33,6 @@ import { currBackground } from '@/hooks/useBackgroundPicture'
background-position: center;
background-attachment: fixed;
background-size: cover;
font-family: PingFang SC, HarmonyOS_Regular, Helvetica Neue, Microsoft YaHei,
sans-serif;
}
/* 下面帖子详情区的容器 */
.topic-wrapper {