Toggle navigation
Toggle navigation
This project
Loading...
Sign in
Hooke
/
lls_program
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Pipelines
Graphs
Issues
0
Merge Requests
0
Wiki
Snippets
Network
Create a new issue
Builds
Commits
Issue Boards
Authored by
hookehuyr
2025-09-19 20:09:18 +0800
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Commit
b65a0e116c852234057727661055e6686200a1fe
b65a0e11
1 parent
62e9bf7d
feat(PointsCollector): 添加响应式高度适配平板设备
为PointsCollector组件添加响应式高度计算逻辑,根据设备类型调整容器高度和中心圆位置
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
38 additions
and
3 deletions
src/components/PointsCollector.vue
src/components/PointsCollector.vue
View file @
b65a0e1
...
...
@@ -6,7 +6,7 @@
</view>
<!-- 积分收集器主体 -->
<view class="points-collector" :style="{ height:
h
eight }">
<view class="points-collector" :style="{ height:
responsiveH
eight }">
<!-- 中心圆形显示总积分 -->
<view class="center-circle">
...
...
@@ -83,6 +83,24 @@ const floatingItems = ref([]) // 漂浮的积分项
const isCollecting = ref(false) // 是否正在收集,防止重复触发
/**
* 计算响应式容器高度
*/
const responsiveHeight = computed(() => {
const { windowWidth, windowHeight } = Taro.getWindowInfo();
// iPad和平板设备检测
const isTablet = windowWidth >= 768 || (windowWidth > windowHeight && windowWidth >= 1024);
if (isTablet) {
// 平板设备使用更保守的高度,确保圆圈不被切掉
return Math.min(windowHeight * 0.6, 600) + 'px';
} else {
// 手机设备使用传入的height或默认值
return props.height;
}
})
/**
* 根据数值长度动态计算字体大小
*/
const dynamicFontSize = computed(() => {
...
...
@@ -187,7 +205,7 @@ const generatePointsData = () => {
// 检查与中心禁飞区的距离
const dxCenter = x - 50;
const dyCenter = y -
75; // 中心点在7
5%
const dyCenter = y -
65; // 更新中心点位置为6
5%
const distanceFromCenter = Math.sqrt(dxCenter * dxCenter + dyCenter * dyCenter);
if (distanceFromCenter < centerNoFlyZone) {
hasCollision = true;
...
...
@@ -476,7 +494,7 @@ const handleGoToRewards = () => {
.center-circle {
position: absolute;
left: 50%;
top:
75%;
top:
65%; // 从75%调整到65%,为iPad等大屏设备留出更多底部空间
transform: translate(-50%, -50%);
width: 200rpx;
height: 200rpx;
...
...
@@ -615,4 +633,21 @@ const handleGoToRewards = () => {
font-size: 20rpx;
}
}
// iPad和平板设备适配
@media screen and (min-width: 768px) {
.center-circle {
top: 60%; // 平板设备进一步上移,确保不被切掉
width: 240rpx;
height: 240rpx;
}
.points-number {
font-size: 52rpx;
}
.points-label, .family-points-label {
font-size: 28rpx;
}
}
</style>
...
...
Please
register
or
login
to post a comment