vue+element-ui编写捐款项目监听组件

<template>
  <div class="project-container">
    <div class="user-info">
      <img :src="user.avatar" alt="User Avatar" class="avatar">
      <span class="nickname">{{ user.nickname }}</span>
    </div>
    <div class="project-info">
      <h2 class="project-name">{{ project.name }}</h2>
      <p class="project-details">{{ project.created_at }} | {{ project.content }}</p>
      <el-progress :percentage="project.progress" text-inside></el-progress>
      <el-progress :percentage="project.donationProgress" text-inside></el-progress>
    </div>
    <div class="donate-button">
      <el-button type="primary" @click="donate">捐款</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        avatar: 'user_avatar.jpg',
        nickname: 'John Doe'
      },
      project: {
        name: '公益项目名称',
        created_at: '2021-01-01',
        content: '公益项目内容',
        progress: 80,
        donationProgress: 50
      }
    };
  },
  methods: {
    donate() {
      // 实现捐款逻辑
    }
  }
};
</script>

<style scoped>
.project-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px;
  background-color: #f5f5f5;
  border-radius: 5px;
}

.user-info {
  display: flex;
  align-items: center;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.nickname {
  margin-left: 10px;
}

.project-info {
  margin-top: 20px;
}

.project-name {
  font-size: 24px;
  font-weight: bold;
}

.project-details {
  margin-top: 10px;
}

.donate-button {
  align-self: flex-end;
  margin-top: 20px;
}
</style>

效果图：