cfc/cfc-frontend/components/TaskItem.vue

<template>
  <view class="task-item" @click="handleClick">
    <view class="task-item-left">
      <text class="task-item-name">{{ task.title }}</text>
      <text class="task-item-deadline" v-if="task.deadline">⏰ {{ task.deadline }}</text>
    </view>
    <view class="task-item-right">
      <text class="task-item-points" v-if="task.points">+{{ task.points }}⭐</text>
      <text class="task-item-action" @click.stop="handleAction">去完成</text>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    task: { type: Object, required: true }
  },
  methods: {
    handleClick() {
      this.$emit('click', this.task)
    },
    handleAction() {
      this.$emit('action', this.task)
    }
  }
}
</script>

<style scoped>
.task-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}
.task-item:last-child { border-bottom: none; }
.task-item-left { flex: 1; min-width: 0; }
.task-item-name { font-size: 26rpx; color: #333; display: block; }
.task-item-deadline { font-size: 22rpx; color: #999; margin-top: 4rpx; display: block; }
.task-item-right {
  display: flex;
  align-items: center;
  gap: 16rpx;
  margin-left: 16rpx;
  flex-shrink: 0;
}
.task-item-points { font-size: 24rpx; font-weight: 600; color: #F97316; }
.task-item-action {
  font-size: 24rpx;
  color: #5B9BD5;
  padding: 8rpx 16rpx;
  border: 2rpx solid #5B9BD5;
  border-radius: 20rpx;
}
</style>