feat(ui): 优化多设备适配和文字大小一致性

为Profile页面添加iPad设备检测和响应式UI调整统一PointsDetail、PrivacyPolicy和UserAgreement页面的文字大小为text-sm

feat(ui): 优化多设备适配和文字大小一致性
为Profile页面添加iPad设备检测和响应式UI调整统一PointsDetail、PrivacyPolicy和UserAgreement页面的文字大小为text-sm
hookehuyr
Commit 024364693441862e72060ed912aee812b207778b 02436469 1 parent 5c049166
Showing 4 changed files with 115 additions and 49 deletions
src/pages/PointsDetail/index.vue
src/pages/PrivacyPolicy/index.vue
src/pages/Profile/index.vue
src/pages/UserAgreement/index.vue
--- a/src/pages/PointsDetail/index.vue
View file @0243646
+++ b/src/pages/PointsDetail/index.vue
View file @0243646
@@ -26,7 +26,7 @@
               <IconFont size="50" name="https://cdn.ipadbiz.cn/lls_prog/images/points_details_1.png" ></IconFont>
             </view>
             <view>
-              <h4 class="font-medium">每日同步步数可获得积分</h4>
+              <h4 class="font-medium text-sm">每日同步步数可获得积分</h4>
               <p class="text-sm text-gray-600">
                 每100步可兑换1积分，每日上限200积分
               </p>
@@ -37,7 +37,7 @@
               <IconFont size="50" name="https://cdn.ipadbiz.cn/lls_prog/images/points_details_2.png" ></IconFont>
             </view>
             <view>
-              <h4 class="font-medium">家人陪伴健步有奖励积分</h4>
+              <h4 class="font-medium text-sm">家人陪伴健步有奖励积分</h4>
               <p class="text-sm text-gray-600">
                 一起健步晒合影每天可获得额外100积分
               </p>
@@ -48,7 +48,7 @@
               <IconFont size="50" name="https://cdn.ipadbiz.cn/lls_prog/images/points_details_3.png" ></IconFont>
             </view>
             <view>
-              <h4 class="font-medium">邀请家人加入家庭，人数达标奖励</h4>
+              <h4 class="font-medium text-sm">邀请家人加入家庭，人数达标奖励</h4>
               <p class="text-sm text-gray-600">
                 邀请的家人达到5位，获得500奖励积分
               </p>
@@ -59,13 +59,13 @@
         <!-- <nut-sticky top="0"> -->
         <view class="border-b border-gray-200 bg-white">
           <view class="flex space-x-8">
-            <view :class="['py-3 font-medium', activeTab === 'all' ? 'text-blue-500 border-b-2 border-blue-500' : 'text-gray-500']" @click="activeTab = 'all'">
+            <view :class="['py-3 font-medium text-sm', activeTab === 'all' ? 'text-blue-500 border-b-2 border-blue-500' : 'text-gray-500']" @click="activeTab = 'all'">
               全部
             </view>
-            <view :class="['py-3 font-medium', activeTab === 'earned' ? 'text-blue-500 border-b-2 border-blue-500' : 'text-gray-500']" @click="activeTab = 'earned'">
+            <view :class="['py-3 font-medium text-sm', activeTab === 'earned' ? 'text-blue-500 border-b-2 border-blue-500' : 'text-gray-500']" @click="activeTab = 'earned'">
               已发放
             </view>
-            <view :class="['py-3 font-medium', activeTab === 'spent' ? 'text-blue-500 border-b-2 border-blue-500' : 'text-gray-500']" @click="activeTab = 'spent'">
+            <view :class="['py-3 font-medium text-sm', activeTab === 'spent' ? 'text-blue-500 border-b-2 border-blue-500' : 'text-gray-500']" @click="activeTab = 'spent'">
               已消耗
             </view>
           </view>
@@ -82,10 +82,10 @@
             <view v-if="pointsHistory && pointsHistory.length > 0">
               <view v-for="item in pointsHistory" :key="item.id" class="py-4 border-b border-gray-100 flex justify-between">
                 <view>
-                  <h4 class="font-medium">{{ item.title }}</h4>
+                  <h4 class="font-medium text-sm">{{ item.title }}</h4>
                   <p class="text-sm text-gray-500">{{ item.date }}</p>
                 </view>
-                <span :class="['font-medium', item.type === 'earned' ? 'text-green-500' : 'text-red-500']">
+                <span :class="['font-medium text-sm', item.type === 'earned' ? 'text-green-500' : 'text-red-500']">
                   {{ item.type === 'earned' ? '+' : '-' }}
                   {{ item.points }}
                 </span>
--- a/src/pages/PrivacyPolicy/index.vue
View file @0243646
+++ b/src/pages/PrivacyPolicy/index.vue
View file @0243646
 <!--
  * @Date: 2025-08-27 17:49:58
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-09-17 13:57:30
+ * @LastEditTime: 2025-09-20 10:18:43
  * @FilePath: /lls_program/src/pages/PrivacyPolicy/index.vue
  * @Description: 文件描述
 -->
@@ -11,63 +11,63 @@
     <view class="flex-1 px-4 py-6 pb-20">
       <view class="max-w-none">
         <view class="text-xl font-bold mb-4">SH老来赛 小程序隐私保护指引</view>
-        <view class="text-gray-600 mb-4">
+        <view class="text-gray-600 mb-4 text-sm">
           本指引是SH老来赛小程序开发者 上海公益新媒体中心（以下简称“开发者”）为处理你的个人信息而制定。
         </view>
         <view class="text-lg font-semibold mt-6 mb-2">开发者处理的信息</view>
-        <view class="text-gray-600 mb-4">
+        <view class="text-gray-600 mb-4 text-sm">
           根据法律规定，开发者仅处理实现小程序功能所必要的信息。
         </view>
-        <view class="text-gray-600 mb-4">
+        <view class="text-gray-600 mb-4 text-sm">
           开发者将在获取你的明示同意后，收集你的微信运动步数，用途是【用户互动】；
         </view>
-        <view class="text-gray-600 mb-4">
+        <view class="text-gray-600 mb-4 text-sm">
           开发者将在获取你的明示同意后，收集你的位置信息，用途是【用户互动】。
         </view>
         <view class="text-lg font-semibold mt-6 mb-2">你的权益</view>
-        <view class="text-gray-600 mb-4">
+        <view class="text-gray-600 mb-4 text-sm">
           关于你的个人信息，你可以通过以下方式与开发者联系，行使查阅、复制、更正、删除等法定权利。
         </view>
-        <view class="text-gray-600 mb-4">
+        <view class="text-gray-600 mb-4 text-sm">
           若你在小程序中注册了账号，你可以通过以下方式与开发者联系，申请注销你在小程序中使用的账号。在受理你的申请后，开发者承诺在十五个工作日内完成核查和处理，并按照法律法规要求处理你的相关信息。
         </view>
-        <view class="text-gray-600 mb-4 font-semibold">
+        <view class="text-gray-600 mb-4 font-semibold text-sm">
           电话：021-61517073
         </view>
         <view class="text-lg font-semibold mt-6 mb-2">开发者对信息的存储</view>
-        <view class="text-gray-600 mb-4">
+        <view class="text-gray-600 mb-4 text-sm">
           开发者承诺，除法律法规另有规定外，开发者对你的信息的保存期限应当为实现处理目的所必要的最短时间。
         </view>
         <view class="text-lg font-semibold mt-6 mb-2">信息的使用规则</view>
-        <view class="text-gray-600 mb-4">
+        <view class="text-gray-600 mb-4 text-sm">
           开发者将会在本指引所明示的用途内使用收集的信息
         </view>
-        <view class="text-gray-600 mb-4">
+        <view class="text-gray-600 mb-4 text-sm">
           如开发者使用你的信息超出本指引目的或合理范围，开发者必须在变更使用目的或范围前，再次以弹窗或其他适当的方式告知并征得你的明示同意。
         </view>
         <view class="text-lg font-semibold mt-6 mb-2">信息对外提供</view>
-        <view class="text-gray-600 mb-4">
+        <view class="text-gray-600 mb-4 text-sm">
           开发者承诺，不会主动共享或转让你的信息至任何第三方，如存在确需共享或转让时，开发者应当直接征得或确认第三方征得你的单独同意。
         </view>
-        <view class="text-gray-600 mb-4">
+        <view class="text-gray-600 mb-4 text-sm">
           开发者承诺，不会对外公开披露你的信息，如必须公开披露时，开发者应当向你告知公开披露的目的、披露信息的类型及可能涉及的信息，并征得你的单独同意。
         </view>
-        <view class="text-gray-600 mb-4">
+        <view class="text-gray-600 mb-4 text-sm">
           你认为开发者未遵守上述约定，或有其他的投诉建议、或未成年人个人信息保护相关问题，可通过以下方式与开发者联系；或者向微信进行投诉。
         </view>
-        <view class="text-gray-600 mb-4 font-semibold">
+        <view class="text-gray-600 mb-4 font-semibold text-sm">
           电话：021-61517073
         </view>
-        <view class="text-center text-gray-600 mt-8 mb-4">
+        <view class="text-center text-gray-600 mt-8 mb-4 text-sm">
           更新日期：2025-09-16
         </view>
-        <view class="text-center text-gray-600 mb-4">
+        <view class="text-center text-gray-600 mb-4 text-sm">
           本小程序已对用户的信息处理进行了逐一、如实的说明，并保证如有变更会及时更新指引。
         </view>
--- a/src/pages/Profile/index.vue
View file @0243646
+++ b/src/pages/Profile/index.vue
View file @0243646
 <!--
  * @Date: 2025-08-27 17:47:46
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-09-19 23:01:49
+ * @LastEditTime: 2025-09-20 10:19:41
  * @FilePath: /lls_program/src/pages/Profile/index.vue
  * @Description: 文件描述
 -->
@@ -28,11 +28,11 @@
         <view class="space-y-px">
           <template v-for="(item, index) in menuItems" :key="item.id">
             <view class="flex items-center py-4 cursor-pointer" @click="item.onClick">
-              <view :class="['w-10 h-10', item.color, 'rounded-full flex items-center justify-center mr-4']">
+              <view :class="[iconContainerSize, item.color, 'rounded-full flex items-center justify-center mr-4']">
-                <component :is="item.icon" size="20" class="text-white" />
+                <component :is="item.icon" :size="iconSize" class="text-white" />
               </view>
-              <span class="flex-1 text-lg">{{ item.label }}</span>
+              <span :class="['flex-1', textSize]">{{ item.label }}</span>
-              <Right size="20" class="text-gray-400" />
+              <Right :size="arrowIconSize" class="text-gray-400" />
             </view>
             <view v-if="index < menuItems.length - 1" class="h-px bg-gray-100" />
           </template>
@@ -44,7 +44,7 @@
 </template>
 <script setup>
-import { ref, shallowRef } from 'vue';
+import { ref, shallowRef, computed, onMounted } from 'vue';
 import Taro, { useDidShow } from '@tarojs/taro';
 import BottomNav from '../../components/BottomNav.vue';
 import { My, Shop3, Cart, Message, Tips, Right, Ask } from '@nutui/icons-vue-taro';
@@ -53,6 +53,69 @@ const defaultAvatar = 'https://cdn.ipadbiz.cn/mlaj/images/icon_1.jpeg'
 // 获取接口信息
 import { getUserProfileAPI } from '@/api/user'
+// 系统信息
+const systemInfo = ref({});
+
+/**
+ * 获取系统信息
+ */
+const getSystemInfo = () => {
+  try {
+    const info = Taro.getWindowInfo();
+    systemInfo.value = info;
+  } catch (error) {
+    console.error('获取系统信息失败:', error);
+  }
+};
+
+/**
+ * 检测是否为 iPad 类型设备
+ */
+const isTabletDevice = computed(() => {
+  if (!systemInfo.value.screenWidth) {
+    return false;
+  }
+
+  const { screenWidth, screenHeight } = systemInfo.value;
+  const screenRatio = screenWidth / screenHeight;
+
+  // iPad 类型设备通常屏幕比例在 0.7-0.8 之间（4:3 约为 0.75）
+  // 普通手机设备比例通常在 0.4-0.6 之间
+  return screenRatio > 0.65;
+});
+
+/**
+ * 计算图标容器尺寸类名
+ */
+const iconContainerSize = computed(() => {
+  // iPad 类型设备使用更大的容器尺寸
+  return isTabletDevice.value ? 'w-14 h-14' : 'w-10 h-10';
+});
+
+/**
+ * 计算图标尺寸
+ */
+const iconSize = computed(() => {
+  // iPad 类型设备使用更大的图标尺寸
+  return isTabletDevice.value ? '48' : '20';
+});
+
+/**
+ * 计算文字尺寸类名
+ */
+const textSize = computed(() => {
+  // iPad 类型设备使用更大的文字尺寸
+  return isTabletDevice.value ? 'text-xl' : 'text-lg';
+});
+
+/**
+ * 计算右箭头图标尺寸
+ */
+const arrowIconSize = computed(() => {
+  // iPad 类型设备使用更大的箭头图标尺寸
+  return isTabletDevice.value ? '24' : '20';
+});
+
 const allMenuItems = [
   {
     id: 'family',
@@ -112,6 +175,9 @@ const goToEditProfile = () => {
 };
 const initPageData = async () => {
+  // 获取系统信息
+  getSystemInfo();
+
   // 获取用户信息
   const { code, data } = await getUserProfileAPI()
   if (code) {
--- a/src/pages/UserAgreement/index.vue
View file @0243646
+++ b/src/pages/UserAgreement/index.vue
View file @0243646
 <!--
  * @Date: 2025-08-27 17:50:27
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-09-17 13:56:49
+ * @LastEditTime: 2025-09-20 10:16:55
  * @FilePath: /lls_program/src/pages/UserAgreement/index.vue
  * @Description: 文件描述
 -->
@@ -11,28 +11,28 @@
     <view class="flex-1 px-4 py-6 pb-20">
       <view class="max-w-none">
         <view class="text-xl font-bold mb-4">SH老来赛用户协议</view>
-        <view class="text-gray-600 mb-4">
+        <view class="text-gray-600 mb-4 text-sm">
           欢迎您使用SH老来赛应用服务。在使用SH老来赛应用服务之前，请您务必仔细阅读并透彻理解本用户协议。
         </view>
         <view class="text-lg font-semibold mt-6 mb-2">一、协议的范围</view>
-        <view class="text-gray-600 mb-4">
+        <view class="text-gray-600 mb-4  text-sm">
           本协议是您与SH老来赛应用之间关于您使用SH老来赛应用服务所订立的协议。“SH老来赛” 是指SH老来赛应用及其开发者。“用户” 是指注册、登录、使用本服务的个人或组织。
         </view>
         <view class="text-lg font-semibold mt-6 mb-2">二、账号注册与使用</view>
-        <view class="text-gray-600 mb-4">
+        <view class="text-gray-600 mb-4  text-sm">
           • 用户在使用本服务前需要注册一个SH老来赛账号。SH老来赛账号应当使用微信号绑定注册，请用户使用尚未与SH老来赛账号绑定的微信号，以及未被SH老来赛根据本协议封禁的微信号注册SH老来赛账号。
         </view>
-        <view class="text-gray-600 mb-4">
+        <view class="text-gray-600 mb-4 text-sm">
           • 用户应当对账号信息的真实性、合法性、有效性承担全部责任。用户不得冒充他人或利用他人的名义注册账号，不得使用可能侵犯他人合法权益的账号名称。
         </view>
         <view class="text-lg font-semibold mt-6 mb-2">三、用户行为规范</view>
-        <view class="text-gray-600 mb-4">
+        <view class="text-gray-600 mb-4 text-sm">
           • 用户在使用SH老来赛服务时，必须遵守中华人民共和国相关法律法规的规定，不得利用本服务进行任何违法或不正当的活动，包括但不限于：
         </view>
-        <view class="mb-4 text-gray-600 ml-4">
+        <view class="mb-4 text-gray-600 ml-4 text-sm">
           <view class="flex flex-row mb-2"><view class="mr-2">•</view><view>发布、传送、传播、储存违反国家法律法规禁止的内容</view></view>
           <view class="flex flex-row mb-2"><view class="mr-2">•</view><view>发布、传送、传播、储存侵害他人名誉权、肖像权、知识产权、商业秘密等合法权利的内容</view></view>
           <view class="flex flex-row mb-2"><view class="mr-2">•</view><view>虚构事实、隐瞒真相以误导、欺骗他人</view></view>
@@ -40,48 +40,48 @@
         </view>
         <view class="text-lg font-semibold mt-6 mb-2">四、服务变更、中断或终止</view>
-        <view class="text-gray-600 mb-4">
+        <view class="text-gray-600 mb-4 text-sm">
           • 鉴于网络服务的特殊性，SH老来赛有权根据实际情况随时变更、中断或终止部分或全部的服务而无需对用户或第三方负责。
         </view>
-        <view class="text-gray-600 mb-4">
+        <view class="text-gray-600 mb-4 text-sm">
           • 如发生下列任何一种情形，SH老来赛有权随时中断或终止向用户提供本协议项下的服务而无需对用户或任何第三方承担责任：
         </view>
-        <view class="mb-4 text-gray-600 ml-4">
+        <view class="mb-4 text-gray-600 ml-4 text-sm">
           <view class="flex flex-row mb-2"><view class="mr-2">•</view><view>用户提供的个人资料不真实</view></view>
           <view class="flex flex-row mb-2"><view class="mr-2">•</view><view>用户违反本协议中规定的使用规则</view></view>
           <view class="flex flex-row"><view class="mr-2">•</view><view>用户在使用SH老来赛服务时有违法行为</view></view>
         </view>
         <view class="text-lg font-semibold mt-6 mb-2">五、免责声明</view>
-        <view class="text-gray-600 mb-4">
+        <view class="text-gray-600 mb-4 text-sm">
           • 用户明确同意其使用SH老来赛服务所存在的风险将完全由其自己承担；因其使用SH老来赛服务而产生的一切后果也由其自己承担，SH老来赛对用户不承担任何责任。
         </view>
-        <view class="text-gray-600 mb-4">
+        <view class="text-gray-600 mb-4 text-sm">
           • SH老来赛不保证服务一定能满足用户的要求，也不保证服务不会中断，对服务的及时性、安全性、准确性也都不作保证。
         </view>
         <view class="text-lg font-semibold mt-6 mb-2">六、协议修改</view>
-        <view class="text-gray-600 mb-4">
+        <view class="text-gray-600 mb-4 text-sm">
           • SH老来赛有权随时修改本协议的任何条款，一旦本协议的内容发生变动，SH老来赛将会在应用内更新并提示修改内容。
         </view>
-        <view class="text-gray-600 mb-4">
+        <view class="text-gray-600 mb-4 text-sm">
           • 如果不同意SH老来赛对本协议相关条款所做的修改，用户有权停止使用SH老来赛服务。如果用户继续使用服务，则视为用户接受SH老来赛对本协议相关条款所做的修改。
         </view>
         <view class="text-lg font-semibold mt-6 mb-2">七、通知送达</view>
-        <view class="text-gray-600 mb-4">
+        <view class="text-gray-600 mb-4 text-sm">
           • 本协议项下SH老来赛对于用户所有的通知均可通过网页公告、微信通知等方式进行。
         </view>
         <view class="text-lg font-semibold mt-6 mb-2">八、法律适用与争议解决</view>
-        <view class="text-gray-600 mb-4">
+        <view class="text-gray-600 mb-4 text-sm">
           • 本协议的订立、执行和解释及争议的解决均应适用中华人民共和国法律。
         </view>
-        <view class="text-gray-600 mb-4">
+        <view class="text-gray-600 mb-4 text-sm">
           • 如双方就本协议内容或其执行发生任何争议，双方应尽量友好协商解决；协商不成时，任何一方均可向SH老来赛所在地的人民法院提起诉讼。
         </view>
-        <view class="text-center text-gray-600 mt-8 mb-4">
+        <view class="text-center text-gray-600 mt-8 mb-4 text-sm">
           本协议最终解释权归SH老来赛所有。
         </view>
       </view>