<template>
|
<view class="post-card">
|
<!-- 用户信息 -->
|
<view class="user-info">
|
<u-avatar :src="avatar" size="80" shape="circle" />
|
<view class="user-text">
|
<text class="nickname">{{ nickname }}</text>
|
<text class="time">{{ time }}</text>
|
</view>
|
</view>
|
|
<view class="inner-content">
|
<!-- 内容图片 -->
|
<image class="main-image" :src="image" mode="aspectFill" />
|
|
<!-- 描述内容 -->
|
<view class="description">
|
{{ content }}
|
</view>
|
|
<!-- 底部操作栏 -->
|
<view class="footer">
|
<view class="action">
|
<u-icon name="/static/common/heart.png" size="30" color="#fff" />
|
<text class="count">{{ likeCount }}</text>
|
</view>
|
<view class="action">
|
<u-icon name="/static/common/comment.png" size="30" color="#fff" />
|
<text class="count">{{ commentCount }}</text>
|
</view>
|
<view class="action">
|
<u-icon name="/static/common/share.png" size="30" color="#fff" />
|
</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
name: 'PostCard',
|
props: {
|
avatar: String,
|
nickname: String,
|
time: String,
|
image: String,
|
content: String,
|
likeCount: [Number, String],
|
commentCount: [Number, String]
|
}
|
}
|
</script>
|
|
<style scoped>
|
.post-card {
|
background-color: #1e1e1e;
|
border-radius: 50rpx;
|
padding: 24rpx;
|
/* margin: 20rpx; */
|
color: #fff;
|
font-size: 28rpx;
|
margin-top: 20rpx;
|
}
|
|
.user-info {
|
margin: 20rpx 30rpx 20rpx 30rpx;
|
display: flex;
|
align-items: center;
|
}
|
|
.user-text {
|
font-size: 24rpx;
|
margin-left: 16rpx;
|
}
|
|
.nickname {
|
font-weight: bold;
|
display: block;
|
}
|
|
.time {
|
font-size: 18rpx;
|
color: #aaa;
|
}
|
|
.inner-content{
|
margin-left: 30rpx;
|
margin-right: 30rpx;
|
}
|
|
.main-image {
|
width: 100%;
|
height: 250rpx;
|
border-radius: 50rpx;
|
}
|
|
.description {
|
margin-top: 20rpx;
|
margin-bottom: 20rpx;
|
font-size: 24rpx;
|
font-weight: bold;
|
color: #ddd;
|
letter-spacing: 2rpx;
|
}
|
|
.footer {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
|
.action {
|
display: flex;
|
align-items: center;
|
}
|
|
.count {
|
margin-left: 10rpx;
|
font-size: 26rpx;
|
color: #ccc;
|
}
|
</style>
|
