hookehuyr

refactor(components): 调整积分规则提示位置并优化样式

将积分规则提示从 PointsCollector 组件移至 Dashboard 页面
优化头部和底部容器的 padding 值
移除不再使用的 CSS 样式代码
......@@ -7,11 +7,6 @@
<!-- 积分收集器主体 -->
<view class="points-collector" :style="{ height: height }">
<!-- 积分规则提示 -->
<view class="points-rule-tip" @tap="handleGoToPointsRule">
<view class="tip-icon">💡</view>
<text class="tip-text">积分规则</text>
</view>
<!-- 中心圆形显示总积分 -->
<view class="center-circle">
......@@ -436,14 +431,7 @@ const handleGoToRewards = () => {
})
}
/**
* 处理积分规则点击事件
*/
const handleGoToPointsRule = () => {
Taro.navigateTo({
url: '/pages/PointsList/index'
})
}
</script>
......@@ -456,9 +444,14 @@ const handleGoToPointsRule = () => {
overflow: hidden;
}
.points-collector-header,
.points-collector-header {
padding: 40rpx;
padding-bottom: 20rpx;
}
.points-collector-footer {
padding: 40rpx;
padding-top: 20rpx;
}
.points-collector {
......@@ -469,29 +462,7 @@ const handleGoToPointsRule = () => {
overflow: hidden;
}
.points-rule-tip {
position: absolute;
// background-color: white;
top: 0rpx;
right: 15rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 999;
cursor: pointer;
}
.tip-icon {
font-size: 32rpx;
margin-bottom: 4rpx;
}
.tip-text {
font-size: 20rpx;
color: #666;
line-height: 1;
}
.center-circle {
position: absolute;
......
......@@ -142,9 +142,14 @@ const handleGoToPointsRule = () => {
overflow: hidden;
}
.total-points-display-header,
.total-points-display-footer {
.points-collector-header {
padding: 40rpx;
padding-bottom: 20rpx;
}
.points-collector-footer {
padding: 40rpx;
padding-top: 20rpx;
}
.total-points-display {
......@@ -156,29 +161,29 @@ const handleGoToPointsRule = () => {
align-items: center;
}
.points-rule-tip {
position: absolute;
// background-color: white;
top: 0rpx;
right: 10rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 999;
cursor: pointer;
}
.tip-icon {
font-size: 32rpx;
margin-bottom: 4rpx;
}
.tip-text {
font-size: 20rpx;
color: #666;
line-height: 1;
}
// .points-rule-tip {
// position: absolute;
// // background-color: white;
// top: 0rpx;
// right: 10rpx;
// display: flex;
// flex-direction: column;
// align-items: center;
// justify-content: center;
// z-index: 999;
// cursor: pointer;
// }
// .tip-icon {
// font-size: 32rpx;
// margin-bottom: 4rpx;
// }
// .tip-text {
// font-size: 20rpx;
// color: #666;
// line-height: 1;
// }
.center-circle1 {
position: absolute;
......
......@@ -26,7 +26,7 @@
<template v-if="!showTotalPointsOnly">
<PointsCollector
ref="pointsCollectorRef"
height="30vh"
height="25vh"
:total-points="finalTotalPoints"
:pending-points="pendingPoints"
:family-id="family_id"
......@@ -35,8 +35,13 @@
>
<!-- 头部:今日步数 -->
<template #header>
<view class="flex justify-between items-center mb-1">
<view class="flex justify-between items-center mb-1 relative">
<span class="text-gray-500">今日</span>
<!-- 积分规则提示 -->
<view class="points-rule-tip" @tap="handleGoToPointsRule">
<view class="tip-icon">💡</view>
<text class="tip-text">积分规则</text>
</view>
</view>
<view class="flex justify-between items-center">
<view class="flex items-baseline">
......@@ -362,6 +367,15 @@ const openFamilyRank = () => {
Taro.navigateTo({ url: '/pages/FamilyRank/index' });
}
/**
* 处理积分规则点击事件
*/
const handleGoToPointsRule = () => {
Taro.navigateTo({
url: '/pages/PointsList/index'
})
}
const family_id = ref('');
const totalFamilySteps = ref(0);
......@@ -436,3 +450,29 @@ useReady(async () => {
});
})
</script>
<style lang="less">
.points-rule-tip {
position: absolute;
// background-color: white;
top: -35rpx;
right: -25rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 999;
cursor: pointer;
}
.tip-icon {
font-size: 32rpx;
margin-bottom: 4rpx;
}
.tip-text {
font-size: 20rpx;
color: #666;
line-height: 1;
}
</style>
......