feat: about page aside i18n

src/language/en.ts

@@ -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',

src/language/zh.ts

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

src/views/Home/footer/components/Contacts.vue

@@ -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>

src/views/Home/footer/components/List.vue

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

src/views/kungalgame/KUNGalgame.vue

@@ -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>

src/views/kungalgame/components/Aside.vue

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

vite.config.ts

@@ -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,