hookehuyr

feat(Dashboard): 根据设备类型动态调整首页高度

添加系统信息获取功能,检测是否为平板设备
根据设备类型动态调整首页 hero 区域高度
1 <!-- 1 <!--
2 * @Date: 2025-08-27 17:43:45 2 * @Date: 2025-08-27 17:43:45
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-09-17 14:28:08 4 + * @LastEditTime: 2025-09-19 23:23:33
5 * @FilePath: /lls_program/src/pages/Dashboard/index.vue 5 * @FilePath: /lls_program/src/pages/Dashboard/index.vue
6 * @Description: 首页 6 * @Description: 首页
7 --> 7 -->
8 <template> 8 <template>
9 <view class="min-h-screen flex flex-col bg-white pb-16" style="background-color: #F9FAFB;"> 9 <view class="min-h-screen flex flex-col bg-white pb-16" style="background-color: #F9FAFB;">
10 <!-- Hero section with family name and background image --> 10 <!-- Hero section with family name and background image -->
11 - <view class=" bg-white rounded-xl shadow-md mx-4 mt-4 relative" style="height: 30vh;"> 11 + <view class=" bg-white rounded-xl shadow-md mx-4 mt-4 relative" :style="{ height: isTabletDevice ? '40vh' : '30vh' }">
12 <image :src="familyCover" mode="aspectFill" alt="Family background" class="w-full h-full object-cover rounded-xl" /> 12 <image :src="familyCover" mode="aspectFill" alt="Family background" class="w-full h-full object-cover rounded-xl" />
13 <view class="absolute inset-0 flex flex-col justify-end rounded-xl bg-black bg-opacity-10"> 13 <view class="absolute inset-0 flex flex-col justify-end rounded-xl bg-black bg-opacity-10">
14 <view class="m-5"> 14 <view class="m-5">
...@@ -383,6 +383,9 @@ useLoad(async () => { ...@@ -383,6 +383,9 @@ useLoad(async () => {
383 }); 383 });
384 384
385 useDidShow(async () => { 385 useDidShow(async () => {
386 + // 获取系统信息
387 + getSystemInfo();
388 +
386 // 刷新页面数据 389 // 刷新页面数据
387 await refreshDashboardData(); 390 await refreshDashboardData();
388 391
...@@ -466,4 +469,35 @@ const onShareAppMessage = (res) => { ...@@ -466,4 +469,35 @@ const onShareAppMessage = (res) => {
466 Taro.useShareAppMessage((res) => { 469 Taro.useShareAppMessage((res) => {
467 return onShareAppMessage(res); 470 return onShareAppMessage(res);
468 }); 471 });
472 +
473 +// 系统信息
474 +const systemInfo = ref({});
475 +
476 +/**
477 + * 获取系统信息
478 + */
479 +const getSystemInfo = () => {
480 + try {
481 + const info = Taro.getSystemInfoSync();
482 + systemInfo.value = info;
483 + } catch (error) {
484 + console.error('获取系统信息失败:', error);
485 + }
486 +};
487 +
488 +/**
489 + * 检测是否为 iPad 类型设备
490 + */
491 +const isTabletDevice = computed(() => {
492 + if (!systemInfo.value.screenWidth) {
493 + return false;
494 + }
495 +
496 + const { screenWidth, screenHeight } = systemInfo.value;
497 + const screenRatio = screenWidth / screenHeight;
498 +
499 + // iPad 类型设备通常屏幕比例在 0.7-0.8 之间(4:3 约为 0.75)
500 + // 普通手机设备比例通常在 0.4-0.6 之间
501 + return screenRatio > 0.65;
502 +});
469 </script> 503 </script>
......