.post-card { margin: 0 28rpx 32rpx; background: rgba(255, 255, 255, 0.88); border-radius: 48rpx; border: 1rpx solid rgba(255, 255, 255, 0.72); overflow: hidden; box-shadow: 0 18rpx 40rpx rgba(95, 49, 104, 0.12); } /* 头部 */ .post-header { display: flex; align-items: center; gap: 20rpx; padding: 24rpx 24rpx 18rpx; } .post-avatar { width: 76rpx; height: 76rpx; border-radius: 28rpx; display: flex; align-items: center; justify-content: center; font-size: 32rpx; font-weight: 800; color: rgba(39, 34, 53, 0.72); flex-shrink: 0; box-shadow: inset 0 0 0 2rpx rgba(255, 255, 255, 0.8); } .post-meta { flex: 1; min-width: 0; } .post-username { display: block; font-size: 28rpx; font-weight: 800; color: #272235; } .post-loc { display: flex; align-items: center; gap: 4rpx; margin-top: 4rpx; } .loc-icon { font-size: 20rpx; } .loc-text { font-size: 22rpx; color: #9b8fa8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .post-time { font-size: 22rpx; color: #9b8fa8; flex-shrink: 0; } /* 图片区 */ .post-img-single { position: relative; } .img-single { width: 100%; height: 360rpx; display: block; background: #f0eef5; } .post-tag-chip { position: absolute; top: 20rpx; left: 20rpx; background: rgba(39, 34, 53, 0.88); color: #fff; font-size: 20rpx; font-weight: 800; padding: 8rpx 18rpx; border-radius: 999rpx; } .post-img-grid { display: grid; gap: 4rpx; } .post-img-grid-2 { grid-template-columns: 1fr 1fr; height: 300rpx; } .post-img-grid-3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; height: 320rpx; } .post-img-grid-3 .img-grid-item:first-child { grid-row: 1 / 3; } .post-img-grid-multi { grid-template-columns: 1fr 1fr 1fr; height: 320rpx; } .img-grid-item { width: 100%; height: 100%; background: #f0eef5; } /* 正文区 */ .post-body { padding: 20rpx 24rpx 24rpx; } .post-caption { display: block; font-size: 28rpx; color: #272235; line-height: 1.6; margin-bottom: 16rpx; } .post-tags { display: flex; gap: 10rpx; flex-wrap: wrap; margin-bottom: 20rpx; } .hashtag { display: inline-flex; align-items: center; font-size: 22rpx; font-weight: 800; color: #8b3cff; background: #f0e8ff; border-radius: 999rpx; padding: 6rpx 14rpx; } /* 操作栏 */ .post-actions { display: flex; gap: 16rpx; padding-top: 18rpx; border-top: 1rpx solid rgba(43, 37, 61, 0.07); } .action-btn { display: flex; align-items: center; gap: 8rpx; font-size: 24rpx; font-weight: 800; color: #6a6178; background: #f7f3ff; border-radius: 999rpx; padding: 10rpx 18rpx; } .action-btn.liked { color: #ff4f91; background: #ffe5f0; } .action-icon { font-size: 28rpx; line-height: 1; } .action-count { font-size: 24rpx; }