complete main page footer, fix settings panel, complete contact page

src/components/setting-panel/KUNGalgameSettingPanel.vue

@@ -126,6 +126,7 @@ const handleRecover = () => {
   display: flex;
   color: var(--kungalgame-font-color-3);
   border: 1px solid var(--kungalgame-blue-1);
+  overflow: hidden;
 }
 .container {
   position: relative;

src/language/en.ts

@@ -54,7 +54,7 @@ export default {
         balance: 'Profit and Loss',
         acgngame: 'ACGNGAME',
         shinnku: `Shinnku's Visual Novel`,
-        ymgal: '月幕galgame',
+        ymgal: 'YM galgame',
       },
       describe: {
         title: 'KUN Visual Novel',

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

@@ -8,9 +8,23 @@ import { Icon } from '@iconify/vue'
     <h2>{{ $t('mainPage.footer.contact') }}</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>
+      <li>
+        <a
+          href="http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=hlXYbLM8MqOm9WzE22ZodNiQJ3nc1Bu2&authKey=7xfTYC1atV5loXyWNv9VOTOaf5ZzR9BdCFcMNJWdmyukck8%2FDLSF3%2FrHgyiY48pT&noverify=0&group_code=726477957"
+          target="_blank"
+          ><Icon icon="bi:tencent-qq"
+        /></a>
+      </li>
+      <li>
+        <a href="https://space.bilibili.com/1748455574" target="_blank"
+          ><Icon icon="ri:bilibili-line"
+        /></a>
+      </li>
+      <li>
+        <a href="https://t.me/kungalgame" target="_blank"
+          ><Icon icon="ic:baseline-telegram"
+        /></a>
+      </li>
     </ul>
   </div>
 </template>
@@ -42,4 +56,8 @@ import { Icon } from '@iconify/vue'
   justify-content: center;
   align-items: center;
 }
+.kungalgame-contact ul li a {
+  font-size: 17px;
+  color: var(--kungalgame-font-color-2);
+}
 </style>

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

@@ -42,6 +42,7 @@ import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
   margin: 0 auto;
   /* 信息区域最小宽度 */
   min-width: 700px;
+  width: 80%;
   /* 为了左右两部分设置弹性盒 */
   display: flex;
 }

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

@@ -70,26 +70,23 @@ const info: FooterInfo[] = [
       },
     ],
   },
+]
+
+const link: FooterInfoItem[] = [
   {
-    index: 4,
-    title: `friend`,
-    list: [
-      {
-        index: 1,
-        name: `acgngame`,
-        router: `http://www.acgngames.net`,
-      },
-      {
-        index: 2,
-        name: `shinnku`,
-        router: `http://www.shinnku.com`,
-      },
-      {
-        index: 3,
-        name: `ymgal`,
-        router: `http://www.ymgal.games`,
-      },
-    ],
+    index: 1,
+    name: `acgngame`,
+    router: `http://acgngames.net`,
+  },
+  {
+    index: 2,
+    name: `shinnku`,
+    router: `http://shinnku.com`,
+  },
+  {
+    index: 3,
+    name: `ymgal`,
+    router: `http://www.ymgal.games`,
   },
 ]
 </script>
@@ -110,6 +107,19 @@ const info: FooterInfo[] = [
         </li>
       </ul>
     </div>
+    <div class="catalog">
+      <!-- 每个信息类别的标题 -->
+      <h2>
+        <span>{{ $t(`mainPage.footer.title.friend`) }}</span>
+      </h2>
+      <ul class="function" v-for="azkhx in link" :key="azkhx.index">
+        <li>
+          <a :href="azkhx.router" target="_blank">{{
+            $t(`mainPage.footer.item['${azkhx.name}']`)
+          }}</a>
+        </li>
+      </ul>
+    </div>
   </div>
 </template>
 

src/views/contact/Contact.vue

@@ -16,18 +16,21 @@ import BackToPrevious from '@/components/BackToPrevious.vue'
       </div>
       <!-- 联系方式 -->
       <div class="content">
-        <div>
+        <a href="https://t.me/kungalgame" target="_blank">
           <span>Telegram</span>
-          <Icon class="icon" icon="line-md:telegram" />
-        </div>
-        <div>
+          <Icon class="icon" icon="line-md:telegram"
+        /></a>
+        <a
+          href="http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=hlXYbLM8MqOm9WzE22ZodNiQJ3nc1Bu2&authKey=7xfTYC1atV5loXyWNv9VOTOaf5ZzR9BdCFcMNJWdmyukck8%2FDLSF3%2FrHgyiY48pT&noverify=0&group_code=726477957"
+          target="_blank"
+        >
           <span>QQ</span>
-          <Icon class="icon" icon="bi:tencent-qq" />
-        </div>
-        <div>
+          <Icon class="icon" icon="bi:tencent-qq"
+        /></a>
+        <a href="https://space.bilibili.com/1748455574" target="_blank">
           <span>Bilibili</span>
-          <Icon class="icon" icon="ri:bilibili-line" />
-        </div>
+          <Icon class="icon" icon="ri:bilibili-line"
+        /></a>
       </div>
       <BackToPrevious />
       <!-- 版权 -->
@@ -110,13 +113,14 @@ import BackToPrevious from '@/components/BackToPrevious.vue'
 .content {
   display: flex;
   font-size: 20px;
-  & > div {
+  & > a {
     /* 固定宽度 */
     width: 110px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
+    color: var(--kungalgame-font-color-3);
   }
   span {
     margin-bottom: 20px;