feat: about page aside i18n
This commit is contained in:
KUN1007
parent
6539c6ac20
commit
79192f8a55
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -324,6 +324,20 @@ export default {
|
|||
replies: '回复数',
|
||||
comments: '评论数',
|
||||
},
|
||||
kungalgame: {
|
||||
introduction: '网站简介',
|
||||
operating: '运营理念',
|
||||
rules: '论坛规定',
|
||||
privacy: '隐私政策',
|
||||
bylaw: '执行条例',
|
||||
update: '更新日志',
|
||||
pl: '收支公示',
|
||||
nonMoe: '不萌记录',
|
||||
join: '加入我们',
|
||||
thanks: '感谢名单',
|
||||
donate: '赞助我们',
|
||||
home: '返回主页',
|
||||
},
|
||||
// 非页面组件这里统一用大驼峰
|
||||
ComponentAlert: {
|
||||
confirm: '确定',
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -164,5 +164,11 @@ const link: FooterInfoItem[] = [
|
|||
.mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.function {
|
||||
li {
|
||||
height: 48px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
Loading…
Reference in a new issue