协议

src/components/common/LoginForm.vue

@@ -47,8 +47,8 @@
             <n-el class="agree mt-9 text-center text-xs">
                 <n-checkbox v-model:checked="agree">
                     已阅读并同意
-                    <span class="prim" @click.stop="">《用户服务协议》</span>和
-                    <span class="prim" @click.stop="">《平台隐私协议》</span>
+                    <span class="prim" @click.stop="goRule('user')">《用户协议》</span>和
+                    <span class="prim" @click.stop="goRule('privacy')">《隐私协议》</span>
                 </n-checkbox>
             </n-el>
         </n-form>
@@ -61,6 +61,23 @@
                 </n-card>
             </div>
         </NModal>
+
+        <n-modal
+            v-model:show="showRule"
+            :block-scroll="false"
+            transform-origin="center"
+            class="max-w-xl py-3"
+            style="width: 75%"
+        >
+            <n-card
+                :title="ruleType === 'user' ? '用户协议' : '隐私协议'"
+                :border="false"
+                content-style="padding:0;overflow:auto"
+                class="rule bg-white dark:bg-zinc-800 rounded-lg"
+            >
+                <rule-content :ruleType="ruleType"></rule-content>
+            </n-card>
+        </n-modal>
     </NConfigProvider>
 </template>
 <script setup lang="ts">
@@ -80,10 +97,15 @@ import {
     NModal,
     NCard
 } from 'naive-ui'
+import { RuleContent } from '@/components/common'
 import { User, ShieldCheck } from '@vicons/tabler'
 import { fetchSendVerify } from '../../api'
 import { useStorage } from '@vueuse/core'
 import { useAuthStore } from '@/store'
+import { router } from '@/router'
+import { useBasicLayout } from '@/hooks/useBasicLayout'
+
+const { isMobile } = useBasicLayout()
 
 const themeOverrides: GlobalThemeOverrides = {
     Input: {
@@ -255,6 +277,22 @@ onMounted(() => {
         form.value.invitor = String(window.sessionStorage.getItem('invitor'))
     }
 })
+
+const showRule = ref(false)
+const ruleType = ref('user')
+function goRule(type: string) {
+    if (isMobile.value) {
+        router.push({
+            name: 'rule',
+            query: {
+                type: type
+            }
+        })
+    } else {
+        ruleType.value = type
+        showRule.value = true
+    }
+}
 </script>
 <style lang="less" scoped>
 .input-icon {
@@ -270,7 +308,7 @@ onMounted(() => {
         color: var(--text-color-3);
     }
     .prim {
-        color: var(--primary-color);
+        color: var(--text-color-1);
     }
 }
 
@@ -337,4 +375,8 @@ onMounted(() => {
         }
     }
 }
+
+.rule {
+    max-height: 80vh;
+}
 </style>

src/views/page/RuleView.vue

@@ -1,20 +1,30 @@
 <template>
     <div class="page h-full">
-        <n-page-header class="head" title="用户协议" @back="handleBack"> </n-page-header>
+        <n-page-header class="head bg-white dark:bg-black" :title="ruleType === 'user' ? '用户协议' : '隐私协议'" @back="handleBack">
+        </n-page-header>
 
-        <rule-content></rule-content>
+        <rule-content :ruleType="ruleType"></rule-content>
     </div>
 </template>
 
 <script lang="ts" setup>
 import { RuleContent } from '@/components/common'
 import { NPageHeader } from 'naive-ui'
-import { useRouter } from 'vue-router'
+import { useRouter, useRoute } from 'vue-router'
+import { onMounted, ref } from 'vue'
 
 const router = useRouter()
 function handleBack() {
     router.back()
 }
+
+const route = useRoute()
+const ruleType = ref('user')
+onMounted(() => {
+    if (route.query.type) {
+        ruleType.value = route.query.type as string
+    }
+})
 </script>
 
 <style lang="less" scoped>
@@ -30,7 +40,7 @@ function handleBack() {
     }
 }
 .head {
-    background-color: #fff;
+    // background-color: #fff;
     position: sticky;
     top: 0;
 }