feat: about page aside i18n

This commit is contained in:
KUN1007 2023-10-20 22:34:19 +08:00
parent ad77e8642b
commit 61979bf250
7 changed files with 101 additions and 52 deletions

View file

@ -325,6 +325,20 @@ export default {
replies: 'Replies',
comments: 'Comments',
},
kungalgame: {
introduction: 'Introduction',
operating: 'Operating',
rules: 'Forum Rules',
privacy: 'Privacy',
bylaw: 'Bylaws',
update: 'Update Log',
pl: 'Profit & Loss',
nonMoe: 'Non-Moe',
join: 'Join Us',
thanks: 'Thanks List',
donate: 'Donate Us',
home: 'Back Home',
},
// 非页面组件这里统一用大驼峰
ComponentAlert: {
confirm: 'OK',

View file

@ -324,6 +324,20 @@ export default {
replies: '回复数',
comments: '评论数',
},
kungalgame: {
introduction: '网站简介',
operating: '运营理念',
rules: '论坛规定',
privacy: '隐私政策',
bylaw: '执行条例',
update: '更新日志',
pl: '收支公示',
nonMoe: '不萌记录',
join: '加入我们',
thanks: '感谢名单',
donate: '赞助我们',
home: '返回主页',
},
// 非页面组件这里统一用大驼峰
ComponentAlert: {
confirm: '确定',

View file

@ -11,18 +11,27 @@ import { Icon } from '@iconify/vue'
<li>
<a
href="http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=hlXYbLM8MqOm9WzE22ZodNiQJ3nc1Bu2&authKey=7xfTYC1atV5loXyWNv9VOTOaf5ZzR9BdCFcMNJWdmyukck8%2FDLSF3%2FrHgyiY48pT&noverify=0&group_code=726477957"
aria-label="KUN Visual Novel Official QQ Group | 鲲 Galgame 官方 QQ 群"
target="_blank"
>
<Icon icon="bi:tencent-qq" />
</a>
</li>
<li>
<a href="https://space.bilibili.com/1748455574" target="_blank">
<a
aria-label="KUN Visual Novel Official Bilibili Account | 鲲 Galgame 官方 Bilibili"
href="https://space.bilibili.com/1748455574"
target="_blank"
>
<Icon icon="ri:bilibili-line" />
</a>
</li>
<li>
<a href="https://t.me/kungalgame" target="_blank">
<a
aria-label="KUN Visual Novel Official Telegram Group"
href="https://t.me/kungalgame"
target="_blank"
>
<Icon icon="ic:baseline-telegram" />
</a>
</li>

View file

@ -164,5 +164,11 @@ const link: FooterInfoItem[] = [
.mobile {
display: none;
}
.function {
li {
height: 48px;
}
}
}
</style>

View file

@ -26,8 +26,6 @@ const kungalgamePageWidth = computed(() => {
<!-- 文章容器 -->
<div class="article">
<h1>关于我们</h1>
<br />
<br />
<h2 id="introduction">网站简介</h2>
<p>
KUNGalgame 是由 <span class="skip">KUN</span>个人发起的一个
@ -242,7 +240,7 @@ p,
.list {
color: var(--kungalgame-font-color-2);
}
/* da标题的字体 */
h1 {
margin-right: 30px;
margin-top: 57px;
@ -286,8 +284,21 @@ a {
@media (max-width: 1000px) {
.content-container {
width: 100%;
width: 90%;
padding: 0;
}
}
@media (max-width: 700px) {
.content-container {
width: 100%;
}
.article {
margin-left: 7px;
}
h1 {
margin: 20px auto;
}
}
</style>

View file

@ -6,37 +6,35 @@ interface asideBar {
}
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: '/' },
{ index: 1, name: 'privacy', router: '/privacy' },
{ index: 2, name: 'bylaw', router: '/bylaw' },
{ index: 3, name: 'update', router: '/update-log' },
{ index: 4, name: 'pl', router: '/balance' },
{ index: 5, name: 'nonMoe', router: '/non-moe' },
{ index: 6, name: 'join', router: '/contact' },
{ index: 7, name: 'thanks', router: '/thanks-list' },
{ index: 8, name: 'donate', router: '/donate' },
{ index: 9, name: 'home', 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">
<RouterLink style="color: #218bff" :to="{ path: kun.router }">{{
kun.name
}}</RouterLink>
</li>
</ul>
<span>{{ $tm('kungalgame.introduction') }}</span>
<span>{{ $tm('kungalgame.operating') }}</span>
<span>{{ $tm('kungalgame.rules') }}</span>
<span class="skip" v-for="kun in asideBarItem" :key="kun.index">
<RouterLink
style="color: var(--kungalgame-blue-4)"
:to="{ path: kun.router }"
>
{{ $tm(`kungalgame.${kun.name}`) }}
</RouterLink>
</span>
</div>
</template>
<style lang="scss" scoped>
/* 侧边的文章结构索引 */
.aside {
width: 122px;
height: 100%;
@ -45,49 +43,45 @@ const asideBarItem: asideBar[] = [
position: sticky;
top: 0;
color: var(--kungalgame-font-color-3);
/* 侧边的标题 */
& > div {
/* 固定高度 */
height: 50px;
/* 字体设置 */
font-size: 17px;
font-weight: bold;
/* 居中 */
display: flex;
flex-direction: column;
align-items: center;
& > span {
width: 100%;
height: 40px;
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;
&:nth-child(3) {
border-bottom: 1.5px solid var(--kungalgame-blue-4);
}
}
}
/* 跳转链接 */
.skip {
border-bottom: 1.5px solid var(--kungalgame-blue-4);
cursor: pointer;
color: var(--kungalgame-blue-4);
a {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
/* 单个项目的 hover */
&:hover {
background-color: var(--kungalgame-trans-blue-2);
}
}
}
@media (max-width: 700px) {
.aside {
width: 90px;
font-size: small;
}
}
</style>

View file

@ -13,6 +13,7 @@ export default defineConfig({
'@': path.resolve(__dirname, './src'),
},
},
server: { host: '127.0.0.1', port: 1007 },
// 消除 i18n 警告
define: {
__VUE_I18N_FULL_INSTALL__: true,