增加隐私协议和政策

src/pages/Home/index.vue

@@ -132,8 +132,8 @@
           </div>
           <div class="text-center text-[10px] leading-[14px] font-[300] md:ml-[17px] md:text-left">
             <span class="font-[600]">Hi快VPN™</span> &copy; All rights reserved.<br />
-            <a href="#" class="underline">Terms of Service</a>
-            <a href="#" class="ml-2 underline">Privacy Policy</a>
+            <router-link to="/terms-of-service" class="underline">Terms of Service</router-link>
+            <router-link to="/privacy-policy" class="ml-2 underline">Privacy Policy</router-link>
           </div>
         </div>
 

src/pages/PrivacyPolicy/index.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="min-h-screen bg-black text-white" style="font-family: 'Roboto', sans-serif">
+    <!-- Main Content -->
+    <main class="mx-auto max-w-[1000px] px-6 md:px-2 md:pt-16 md:pb-[50px]">
+      <!-- Mobile Images -->
+      <div class="md:hidden">
+        <img
+          src="./mobile/row-1-column-1.webp"
+          alt="Terms of Service - Part 1"
+          class="mb-0 w-full"
+        />
+        <img
+          src="./mobile/row-2-column-1.webp"
+          alt="Terms of Service - Part 2"
+          class="mb-0 w-full"
+        />
+        <img
+          src="./mobile/row-3-column-1.webp"
+          alt="Terms of Service - Part 3"
+          class="mb-0 w-full"
+        />
+      </div>
+
+      <!-- Desktop Images (2x) -->
+      <div class="hidden md:block">
+        <img
+          src="./pc/row1.png"
+          alt="Terms of Service - Part 1"
+          class="mb-10 origin-left scale-50"
+        />
+        <img
+          src="./pc/row2.png"
+          alt="Terms of Service - Part 2"
+          class="mb-0 w-full"
+          style="width: 100%; height: auto"
+        />
+        <img
+          src="./pc/row3.png"
+          alt="Terms of Service - Part 3"
+          class="m-auto mt-[60px] h-[28px] w-[594px]"
+        />
+      </div>
+    </main>
+  </div>
+</template>
+
+<script setup lang="ts">
+// No additional logic needed for this static page
+</script>
+
+<style scoped>
+/* No additional styles needed */
+</style>

src/pages/TermsOfService/index.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="min-h-screen bg-black text-white" style="font-family: 'Roboto', sans-serif">
+    <!-- Main Content -->
+    <main class="mx-auto max-w-[1000px] px-6 md:px-2 md:pt-16 md:pb-[50px]">
+      <!-- Mobile Images -->
+      <div class="md:hidden">
+        <img
+          src="./mobile/row-1-column-1.webp"
+          alt="Terms of Service - Part 1"
+          class="mb-0 w-full"
+        />
+        <img
+          src="./mobile/row-2-column-1.webp"
+          alt="Terms of Service - Part 2"
+          class="mb-0 w-full"
+        />
+        <img
+          src="./mobile/row-3-column-1.webp"
+          alt="Terms of Service - Part 3"
+          class="mb-0 w-full"
+        />
+      </div>
+
+      <!-- Desktop Images (2x) -->
+      <div class="hidden md:block">
+        <img src="./pc/row1.png" alt="Terms of Service - Part 1" class="mb-10 h-[18px] w-[206px]" />
+        <img
+          src="./pc/row2.png"
+          alt="Terms of Service - Part 2"
+          class="mb-0 w-full"
+          style="width: 100%; height: auto"
+        />
+        <img
+          src="./pc/row3.png"
+          alt="Terms of Service - Part 3"
+          class="m-auto mt-[60px] h-[70px] w-[693px]"
+        />
+      </div>
+    </main>
+  </div>
+</template>
+
+<script setup lang="ts">
+// No additional logic needed for this static page
+</script>
+
+<style scoped>
+/* No additional styles needed */
+</style>

src/router/index.ts

@@ -18,6 +18,16 @@ const router = createRouter({
       name: 'user-center',
       component: () => import('../pages/UserCenter/index.vue'),
     },
+    {
+      path: '/terms-of-service',
+      name: 'terms-of-service',
+      component: () => import('../pages/TermsOfService/index.vue'),
+    },
+    {
+      path: '/privacy-policy',
+      name: 'privacy-policy',
+      component: () => import('../pages/PrivacyPolicy/index.vue'),
+    },
   ],
 })
 

src/styles/index.css

@@ -1,3 +1,11 @@
+@font-face {
+  font-family: 'Roboto';
+  src: url('/src/styles/roboto.woff2') format('woff2');
+  font-weight: 100 900;
+  font-style: normal;
+  font-display: swap;
+}
+
 @import "tailwindcss";
 @import "tw-animate-css";
 @layer utilities {