<template>
|
<view class="post-card">
|
<!-- 用户信息 -->
|
<view class="user-info">
|
<up-avatar :src="avatar" size="80rpx" 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">
|
<up-icon name="heart-fill" size="30rpx" color="#fff" />
|
<text class="count">{{ likeCount }}</text>
|
</view>
|
<view class="action">
|
<up-icon name="chat-fill" size="30rpx" color="#fff" />
|
<text class="count">{{ commentCount }}</text>
|
</view>
|
<view class="action">
|
<up-icon name="share" size="30rpx" color="#fff" />
|
</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script setup lang="ts">
|
interface Props {
|
avatar?: string;
|
nickname?: string;
|
time?: string;
|
image?: string;
|
content?: string;
|
likeCount?: number | string;
|
commentCount?: number | string;
|
}
|
|
const props = defineProps<Props>();
|
</script>
|
|
<style scoped lang="scss">
|
.post-card {
|
background-color: #1e1e1e;
|
border-radius: 24rpx;
|
padding: 10rpx;
|
color: #fff;
|
font-size: 28rpx;
|
margin-top: 20rpx;
|
}
|
|
.user-info {
|
margin: 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: 0 20rpx;
|
}
|
|
.main-image {
|
width: 100%;
|
height: 250rpx;
|
border-radius: 24rpx;
|
}
|
|
.description {
|
margin: 20rpx 0;
|
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>
|
|
