<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>
效果图: