.post-card { margin: 0 28rpx 32rpx; background: rgba(255, 255, 255, 0.40); backdrop-filter: blur(28rpx) saturate(170%); -webkit-backdrop-filter: blur(28rpx) saturate(170%); border-radius: 56rpx; border: 1rpx solid rgba(255, 255, 255, 0.78); overflow: hidden; box-shadow: 0 22rpx 48rpx rgba(120, 70, 140, 0.16), inset 0 1rpx 0 rgba(255, 255, 255, 0.65); } /* 头部 */ .post-header { display: flex; align-items: center; gap: 20rpx; padding: 24rpx 24rpx 18rpx; } .post-avatar { width: 80rpx; height: 80rpx; border-radius: 30rpx; display: flex; align-items: center; justify-content: center; font-size: 32rpx; font-weight: 800; color: rgba(43, 36, 56, 0.72); flex-shrink: 0; border: 3rpx solid rgba(255, 255, 255, 0.85); box-shadow: 0 10rpx 22rpx rgba(120, 70, 150, 0.16); } .post-meta { flex: 1; min-width: 0; } .post-username { display: block; font-size: 28rpx; font-weight: 800; color: #2b2438; } .post-loc { display: flex; align-items: center; gap: 4rpx; margin-top: 4rpx; } .loc-icon { font-size: 20rpx; } .loc-text { font-size: 22rpx; color: #a59cb5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .post-time { font-size: 22rpx; color: #a59cb5; flex-shrink: 0; } /* 图片区 */ .post-img-single { position: relative; } .img-single { width: 100%; height: 360rpx; display: block; background: #f0eef5; } .post-tag-chip { position: absolute; top: 22rpx; left: 22rpx; background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(20rpx) saturate(180%); -webkit-backdrop-filter: blur(20rpx) saturate(180%); color: #2b2438; font-size: 21rpx; font-weight: 800; padding: 10rpx 22rpx; border-radius: 24rpx; border: 1rpx solid rgba(255, 255, 255, 0.7); box-shadow: 0 14rpx 30rpx rgba(120, 70, 150, 0.18); transform: rotate(-3deg); } .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: #2b2438; 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: #8a3fe0; background: rgba(167, 139, 250, 0.16); border: 1rpx solid rgba(167, 139, 250, 0.28); border-radius: 999rpx; padding: 6rpx 14rpx; } /* 操作栏 */ .post-actions { display: flex; gap: 14rpx; padding-top: 20rpx; border-top: 1rpx solid rgba(255, 255, 255, 0.55); } .action-btn { display: flex; align-items: center; gap: 8rpx; font-size: 24rpx; font-weight: 800; color: #6e6480; background: rgba(255, 255, 255, 0.42); border: 1rpx solid rgba(255, 255, 255, 0.62); border-radius: 999rpx; padding: 12rpx 22rpx; transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease; } .action-btn:active { transform: scale(0.95); } .action-btn.liked { color: #fff; background: linear-gradient(135deg, #ff2d6e, #ff7a1a); border-color: transparent; box-shadow: 0 12rpx 26rpx rgba(255, 45, 110, 0.32); } .action-icon { font-size: 28rpx; line-height: 1; } .action-count { font-size: 24rpx; }