任务修改动态布局

components/renwu/TaskPop.less

@@ -12,12 +12,14 @@
 
 	.task_pop_container {
 		width: 100%;
-		height: 1092rpx;
+		// height 通过动态样式设置
 		background: #F7F7F7;
 		border-radius: 24rpx 24rpx 0 0;
 		padding: 0rpx 30rpx 0rpx 30rpx;
 		box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1);
 		animation: slideUp 0.3s ease-out;
+		display: flex;
+		flex-direction: column;
 
 		.task_pop_header {
 			display: flex;
@@ -54,8 +56,7 @@
 		}
 
 		.task_list {
-			height: 964rpx;
-			overflow-y: auto;
+			// height 和 overflow-y 通过动态样式设置
 			
 			.task_item {
 				display: flex;

components/renwu/TaskPop.vue

 <template>
 	<view class="task_pop_overlay" v-if="visible" @click.stop>
-		<view class="task_pop_container" @click.stop>
+		<view class="task_pop_container" :style="{ height: containerHeight + 'rpx' }" @click.stop>
 			<!-- 弹窗头部 -->
 			<view class="task_pop_header">
 				<text class="task_pop_title">做任务赚积分</text>
@@ -10,7 +10,7 @@
 			</view>
 			
 			<!-- 任务列表 -->
-			<view class="task_list">
+			<view class="task_list" :style="{ height: taskListHeight + 'rpx', 'overflow-y': canScroll ? 'auto' : 'hidden' }">
 				<view 
 					class="task_item" 
 					v-for="(task, index) in props.taskTodo" 
@@ -42,7 +42,7 @@
 </template>
 
 <script setup>
-import { defineProps, defineEmits, ref, onMounted, watch } from 'vue';
+import { defineProps, defineEmits, ref, onMounted, watch, computed } from 'vue';
 import { useIntegralStore } from '../../stores/integral';
 import md from '../../md.js';
 
@@ -58,6 +58,32 @@ const props = defineProps({
 	}
 });
 
+// 计算任务条数
+const taskCount = computed(() => {
+	return props.taskTodo?.length || 0;
+});
+
+// 计算弹窗容器高度：100 + 条数 * 170，最多6条
+const containerHeight = computed(() => {
+	const count = Math.min(taskCount.value, 6);
+	return 100 + count * 170;
+});
+
+// 计算任务列表高度：根据条数动态变化，最多6条时固定高度
+const taskListHeight = computed(() => {
+	const count = taskCount.value;
+	if (count <= 6) {
+		return count * 170;
+	}
+	// 超过6条时，固定为6条的高度，内容可滚动
+	return 6 * 170;
+});
+
+// 判断是否可滚动：超过6条时可滚动
+const canScroll = computed(() => {
+	return taskCount.value > 6;
+});
+
 onMounted(() => {
 	props.taskTodo.forEach(item => {
 		md.sensorComponentLogTake({