登录页面条款弹窗的优化

pages/future/future.vue

@@ -1,13 +1,69 @@
 <template>
-	<view class="">
+  <view class="page">
-		
+    <custom-navbar title="未来规划" />
-	</view>
+    <tile-grid/>
+    <view class="header" :style="{ backgroundColor: CommonEnum.BASE_COLOR }">
+      <!-- 状态展示 -->
+      <status-display
+          v-if="loading"
+          type="loading"
+          loading-text="加载中..."
+      />
+      <!-- 页面内容将在这里添加 -->
+    </view>
+
+  </view>
 </template>
 
-<script setup>
+<script>
-	
+import CommonEnum from "../../enum/common";
+import StatusDisplay from "../../components/status-display/status-display.vue";
+
+export default {
+  components: {
+    StatusDisplay
+  },
+  data() {
+    return {
+      CommonEnum,
+      loading: false
+    }
+  },
+  onLoad() {
+    // 页面加载时获取数据
+    this.loadPageData()
+  },
+  methods: {
+    // 加载页面数据
+    async loadPageData() {
+      this.loading = true
+      try {
+        // TODO: 调用页面数据API
+        // const response = await getPageData()
+        // 模拟加载
+        setTimeout(() => {
+          this.loading = false
+        }, 1000)
+      } catch (error) {
+        console.error('获取页面数据失败:', error)
+        this.loading = false
+      }
+    }
+  }
+}
 </script>
 
 <style lang="scss" scoped>
-	       
+.page {
-</style>
+  background: #F5F0E7;
+}
+.header {
+  width: 100%;
+  min-height: 100vh;
+  display: flex;
+  align-items: flex-start;
+  flex-direction: column;
+  padding: 0 15rpx;
+  padding-bottom: 40rpx;
+}
+</style>

pages/login/login.vue

@@ -27,8 +27,10 @@
           <text class="popup-title">服务条款</text>
           <text class="popup-close" @click="closeServiceTermsPopup">×</text>
         </view>
-        <scroll-view class="popup-body" scroll-y>
+        <scroll-view class="popup-body" scroll-y="true" :scroll-top="scrollTop">
-          <rich-text :nodes="serviceTermsContent"></rich-text>
+          <view class="terms-content">
+            <rich-text :nodes="serviceTermsContent"></rich-text>
+          </view>
         </scroll-view>
         <view class="popup-footer">
           <text class="popup-tip">请仔细阅读服务条款，阅读完毕后点击同意</text>
@@ -44,8 +46,10 @@
           <text class="popup-title">法律条款及隐私政策</text>
           <text class="popup-close" @click="closePrivacyPolicyPopup">×</text>
         </view>
-        <scroll-view class="popup-body" scroll-y>
+        <scroll-view class="popup-body" scroll-y="true" :scroll-top="scrollTop">
-          <rich-text :nodes="privacyPolicyContent"></rich-text>
+          <view class="terms-content">
+            <rich-text :nodes="privacyPolicyContent"></rich-text>
+          </view>
         </scroll-view>
         <view class="popup-footer">
           <text class="popup-tip">请仔细阅读隐私政策，阅读完毕后点击同意</text>
@@ -79,6 +83,7 @@ export default {
       showPrivacyPolicyPopup: false, // 隐私政策弹窗
       serviceTermsContent: '', // 服务条款内容
       privacyPolicyContent: '', // 隐私政策内容
+      scrollTop: 0, // 滚动位置
     }
   },
   onLoad() {
@@ -118,8 +123,16 @@ export default {
       try {
         const res = await getServiceTerms();
         if (res.code === 200 && res.data) {
-          this.serviceTermsContent = res.data.content || '暂无服务条款内容';
+          // 处理文本内容，确保正确换行和样式
+          let content = res.data.content || '暂无服务条款内容';
+          // 将换行符转换为HTML换行标签
+          content = content.replace(/\n/g, '<br/>');
+          // 添加基本样式
+          content = `<div style="word-wrap: break-word; word-break: break-all; line-height: 1.6; font-size: 28rpx; color: #333;">${content}</div>`;
+          this.serviceTermsContent = content;
           this.showServiceTermsPopup = true;
+          // 重置滚动位置
+          this.scrollTop = 0;
         } else {
           uni.showToast({
             title: '获取服务条款失败',
@@ -139,8 +152,16 @@ export default {
       try {
         const res = await getPrivacyPolicy();
         if (res.code === 200 && res.data) {
-          this.privacyPolicyContent = res.data.content || '暂无隐私政策内容';
+          // 处理文本内容，确保正确换行和样式
+          let content = res.data.content || '暂无隐私政策内容';
+          // 将换行符转换为HTML换行标签
+          content = content.replace(/\n/g, '<br/>');
+          // 添加基本样式
+          content = `<div style="word-wrap: break-word; word-break: break-all; line-height: 1.6; font-size: 28rpx; color: #333;">${content}</div>`;
+          this.privacyPolicyContent = content;
           this.showPrivacyPolicyPopup = true;
+          // 重置滚动位置
+          this.scrollTop = 0;
         } else {
           uni.showToast({
             title: '获取隐私政策失败',
@@ -420,6 +441,17 @@ page{
   line-height: 1.6;
   font-size: 28rpx;
   color: #333;
+  height: 0; /* 确保scroll-view有固定高度 */
+}
+
+.terms-content {
+  word-wrap: break-word;
+  word-break: break-all;
+  line-height: 1.6;
+  font-size: 28rpx;
+  color: #333;
+  padding-bottom: 20rpx; /* 底部留白 */
+  padding-right: 30rpx; /* 右边距 */
 }
 
 .popup-footer {