fix icons

src/styles/theme/color.scss

@@ -99,7 +99,9 @@ $kungalgame-trans-white-5: #ffffff8e;
 $kungalgame-trans-white-6: #ffffff77;
 $kungalgame-trans-white-7: #ffffff48;
 $kungalgame-trans-white-8: #ffffff1a;
+/* 这个白色是占位符，不然会导致塌陷 */
 $kungalgame-trans-white-9: #ffffff00;
+
 $kungalgame-trans-gray-0: #f6f8fa77;
 $kungalgame-trans-gray-1: #eaeef277;
 $kungalgame-trans-gray-2: #d0d7de77;

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

@@ -59,7 +59,7 @@ export default {
             <!-- QQ, 微信, telegram 的图标列表 -->
             <ul>
               <li><Icon icon="bi:tencent-qq" /></li>
-              <li><Icon icon="ri:wechat-fill" /></li>
+              <li><Icon icon="ri:bilibili-line" /></li>
               <li><Icon icon="ic:baseline-telegram" /></li>
             </ul>
           </div>

src/views/contacts/Contacts.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 // Vue 中不允许在 template 中用 '<' 这个符号，换成 msg
 const msg = '< 返回主页'
+import { Icon } from '@iconify/vue'
 </script>
 
 <template>
@@ -16,16 +17,16 @@ const msg = '< 返回主页'
       <!-- 联系方式 -->
       <div class="content">
         <div>
-          <span>Telegram 群</span>
-          <i class="fa-brands fa-telegram"></i>
+          <span>Telegram</span>
+          <Icon class="icon" icon="line-md:telegram" />
         </div>
         <div>
-          <span>QQ 群</span>
-          <i class="fa-brands fa-qq"></i>
+          <span>QQ</span>
+          <Icon class="icon" icon="bi:tencent-qq" />
         </div>
         <div>
-          <span>Bilibili 主页</span>
-          <i class="fa-brands fa-bilibili"></i>
+          <span>Bilibili</span>
+          <Icon class="icon" icon="ri:bilibili-line" />
         </div>
       </div>
       <router-link to="/">
@@ -138,13 +139,14 @@ const msg = '< 返回主页'
   cursor: pointer;
 }
 /* 图标字体 */
-.content i {
+.icon {
+  font-size: 25px;
   height: 100%;
   color: $kungalgame-blue-4;
   cursor: pointer;
   text-align: center;
 }
-.content i:hover {
+.icon:hover {
   color: $kungalgame-red-4;
   transform: scale(1.2);
   transition: 0.1s;

src/views/technique/Technique.vue

@@ -722,7 +722,7 @@ import { currBackground } from '@/hooks/useBackgroundPicture'
 /* 标签的文字部分 */
 .tags > li > span {
   cursor: pointer;
-  border-bottom: 2px solid $kungalgame-trans-white-8;
+  border-bottom: 2px solid $kungalgame-trans-white-9;
 }
 .tags > li > span:hover {
   border-bottom: 2px solid $kungalgame-blue-4;

src/views/thanks-list/ThanksList.vue

@@ -25,7 +25,7 @@ import { currBackground } from '@/hooks/useBackgroundPicture'
           <li>Github（github） - 配色</li>
           <li>bbs.kfmax.com（绯月） - 用户信息分类</li>
           <li>StackOverflow （StackOverflow） - 页面板块的阴影</li>
-          <li>ChatGPT （Open AIChatGPT） - 布局中的各种技术问题</li>
+          <li>ChatGPT （Open AIChatGPT） - 各种技术问题</li>
           <li>Google（谷歌） - 帖子详情页面</li>
           <li>YouTube （油管） - 技术交流页面</li>
           <li>Adobe （Adobe） - 底部 Footer</li>
@@ -36,7 +36,7 @@ import { currBackground } from '@/hooks/useBackgroundPicture'
         <br />
         <br />
         <p>
-          虽然可能还参考了众多网站的设计，但是因为我在设计之初查看了众多的网站设计，却没有做相关的记录，所以无法展示
+          在设计之初我们浏览了大量设计优秀的网页，可能还参考了众多网站的设计，但由于在大量的浏览时没有做相关记录，所以无法展示
         </p>
         <br />
         <br />
@@ -53,9 +53,10 @@ import { currBackground } from '@/hooks/useBackgroundPicture'
         <br />
         <br />
         <p>
-          以及<span class="skip">鲲的 galgame 交流群（QQ）</span>，和<span
+          以及<span class="skip"> 鲲的 galgame 交流群（QQ）</span>，和<span
             class="skip"
-            >鲲的 galgame 交流群（Telegram）</span
+          >
+            鲲的 galgame 交流群（Telegram）</span
           >，以及其它众多人员的相关支持，在这里我们对他们的建议和纠错表示衷心的感谢。
         </p>
         <br />
@@ -67,7 +68,7 @@ import { currBackground } from '@/hooks/useBackgroundPicture'
         </p>
         <br />
         <br />
-        <p>纯 HTML + CSS实现：<span class="skip">kungalgame-pure-css</span></p>
+        <p>纯 HTML + CSS 实现：<span class="skip">kungalgame-pure-css</span></p>
         <p>
           Vue + Vite + ts + pinia 实现：<span class="skip">kungalgame-vue</span>
         </p>