feat: privacy page i18n

src/views/kungalgame/KUNGalgame.vue

@@ -21,7 +21,7 @@ const kungalgamePageWidth = computed(() => {
         <Aside />
 
         <!-- KUNGalgame en translation -->
-        <div v-if="showKUNGalgameLanguage === 'en'" class="article">
+        <div class="article" v-if="showKUNGalgameLanguage === 'en'">
           <h1>About Us</h1>
           <h2 id="introduction">Website Introduction</h2>
           <p>
@@ -280,7 +280,7 @@ const kungalgamePageWidth = computed(() => {
         </div>
 
         <!-- KUNGalgame cn translation -->
-        <div v-if="showKUNGalgameLanguage === 'zh'" class="article">
+        <div class="article" v-if="showKUNGalgameLanguage === 'zh'">
           <h1>关于我们</h1>
           <h2 id="introduction">网站简介</h2>
           <p>

src/views/privacy/Privacy.vue

@@ -1,17 +1,55 @@
 <script setup lang="ts">
 import BackToPrevious from '@/components/BackToPrevious.vue'
 import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
+
+import { useKUNGalgameSettingsStore } from '@/store/modules/settings'
+import { storeToRefs } from 'pinia'
+
+const { showKUNGalgameLanguage } = storeToRefs(useKUNGalgameSettingsStore())
 </script>
 
 <template>
-  <!-- 根容器 -->
   <div class="root">
-    <!-- 内容容器 -->
     <div class="container">
-      <!-- 标题 -->
-      <div class="title">隐私政策</div>
-      <!-- 内容区 -->
-      <div class="article">
+      <div class="title">{{ $tm('kungalgame.privacy') }}</div>
+
+      <div class="article" v-if="showKUNGalgameLanguage === 'en'">
+        <br />
+        <p>
+          We will never use your personal information and will not use your
+          personal information for anything outside of this site.
+        </p>
+        <br />
+        <p>
+          Yes, only this sentence, because
+          <strong>
+            we are not a commercial forum, and profit is not our purpose.
+          </strong>
+          There is no need to profit from personal data.
+        </p>
+        <br />
+        <p>To be precise, we need the following permissions:</p>
+        <br />
+        <ul class="list">
+          <li>
+            Personal Information: Email, registration time, etc., used for
+            password recovery.
+          </li>
+          <li>
+            Log-Related Information: Through cookies, Local Storage, and other
+            means, we provide search history, image caching, and other
+            experience optimizations. You can disable cookies and similar
+            methods to prevent our use.
+          </li>
+          <li>
+            Device-Related Information: Device date, operating system
+            information, etc., for convenient device adaptation.
+          </li>
+        </ul>
+        <BackToPrevious />
+      </div>
+
+      <div class="article" v-if="showKUNGalgameLanguage === 'zh'">
         <br />
         <p>
           我们永远不会利用你的个人信息，不会将你的个人信息用于除了本站以外的任何地方
@@ -34,7 +72,7 @@ import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
         </ul>
         <BackToPrevious />
       </div>
-      <!-- 版权 -->
+
       <KUNGalgameFooter style="position: absolute; bottom: -60px" />
     </div>
   </div>
@@ -43,6 +81,7 @@ import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
 <style lang="scss" scoped>
 .root {
   height: 100vh;
+  min-height: 900px;
   width: 100vw;
   background: linear-gradient(
     var(--kungalgame-trans-pink-1),
@@ -53,10 +92,9 @@ import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
   align-items: center;
   background-color: var(--kungalgame-white);
 }
-/* 内容区容器 */
+
 .container {
   max-width: 500px;
-  /* 居中 */
   margin: auto;
   position: relative;
   background-color: var(--kungalgame-trans-blue-0);
@@ -67,30 +105,28 @@ import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
   flex-direction: column;
   align-items: center;
   color: var(--kungalgame-font-color-3);
-}
-/* 内容区容器 hover */
-.container:hover {
+
+  &:hover {
     box-shadow: var(--kungalgame-shadow-1);
     transition: 0.3s;
+  }
 }
-/* 内容区 */
+
 .article {
   padding: 20px;
 }
-/* 单个项目之间的距离 */
+
 .list > li {
   margin-bottom: 30px;
   list-style: inside;
 }
-/* 页面的标题 */
+
 .title {
-  /* 固定高度 */
   font-size: 30px;
   height: 77px;
   display: flex;
   justify-content: center;
   align-items: center;
-  /* 距离下一个项目的距离 */
   margin: 10px 0;
 }