haha/sbnews
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: align paid post status row

Browse Source
This commit is contained in:
hajimi
2026-08-02 20:15:41 +08:00
parent 2595c27aa2
commit 3dca013f4a
1 changed files with 23 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
uniapp/src/packages_community/components/post-card.vue
+23 -8
View File
@@ -1,8 +1,14 @@
<template> <template>
<view class="post-card" @tap="$emit('tap')"> <view class="post-card" @tap="$emit('tap')">
<view v-if="post.is_paid && !post.is_unlocked" class="post-card__paid-notice"> <view v-if="post.is_paid && !post.is_unlocked" class="post-card__topbar">
<u-icon name="lock" size="25" color="#1468f5" /> <view class="post-card__paid-notice">
<text>付费内容 · {{ post.price_points }} 积分</text> <u-icon name="lock" size="25" color="#1468f5" />
<text>付费内容 · {{ post.price_points }} 积分</text>
</view>
<view class="post-card__status">
<text class="post-card__price">{{ post.price_points }} 积分</text>
<u-icon name="more-dot-fill" size="30" color="#8d96a3" />
</view>
</view> </view>
<view class="post-card__header"> <view class="post-card__header">
@@ -16,9 +22,8 @@
</view> </view>
<text class="post-card__time">{{ formatTime(post.create_time) }}</text> <text class="post-card__time">{{ formatTime(post.create_time) }}</text>
</view> </view>
<view class="post-card__status"> <view v-if="!post.is_paid || post.is_unlocked" class="post-card__status">
<text v-if="!post.is_paid || post.is_unlocked" class="post-card__free">免费</text> <text class="post-card__free">免费</text>
<text v-else class="post-card__price">{{ post.price_points }} 积分</text>
<u-icon name="more-dot-fill" size="30" color="#8d96a3" /> <u-icon name="more-dot-fill" size="30" color="#8d96a3" />
</view> </view>
</view> </view>
@@ -186,14 +191,24 @@ const formatCount = (value: any) => {
box-shadow: 0 8rpx 24rpx rgba(31, 54, 89, 0.055); box-shadow: 0 8rpx 24rpx rgba(31, 54, 89, 0.055);
box-sizing: border-box; box-sizing: border-box;
&__topbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20rpx;
margin: -2rpx 0 20rpx;
min-width: 0;
}
&__paid-notice { &__paid-notice {
display: inline-flex; display: flex;
align-items: center; align-items: center;
gap: 8rpx; gap: 8rpx;
margin: -2rpx 0 20rpx; min-width: 0;
color: #1468f5; color: #1468f5;
font-size: 24rpx; font-size: 24rpx;
font-weight: 600; font-weight: 600;
white-space: nowrap;
} }
&__header { &__header {