{% raw %}{{ post.content || '这条朋友圈没有解析出文字内容' }}{% endraw %} +
+ + + {% raw %}{{ post.location.poi_name || post.location.poi_address || post.location.city }}{% endraw %} + +
+
-
- +
+ +
+ + {% raw %}{{ formatVideoDuration(media.video_duration) }}{% endraw %} +
@@ -195,7 +211,16 @@ - 朋友圈图片预览 + 朋友圈图片预览 +
{% endblock %} @@ -229,6 +254,7 @@ rawDialogVisible: false, imagePreviewVisible: false, previewImageUrl: '', + previewMedia: null, rawDialogContent: '', selectedPost: null, commentForm: { @@ -373,10 +399,18 @@ this.rawDialogContent = JSON.stringify(post.raw || post, null, 2); this.rawDialogVisible = true; }, - previewImage(media) { - this.previewImageUrl = media.url || media.thumb || ''; + openMediaPreview(media) { + this.previewMedia = media; + this.previewImageUrl = media.hd || media.url || media.thumb || ''; this.imagePreviewVisible = true; }, + formatVideoDuration(value) { + const seconds = Math.round(parseFloat(value || 0)); + if (!seconds || Number.isNaN(seconds)) return '视频'; + const mins = Math.floor(seconds / 60); + const secs = seconds % 60; + return `${mins}:${String(secs).padStart(2, '0')}`; + }, resetFilters() { this.viewMode = 'home'; this.selectedTowxid = ''; @@ -413,11 +447,28 @@ .post-meta { font-size: 12px; color: #64748b; margin-top: 3px; } .post-actions { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .post-content { color: #0f172a; line-height: 1.8; margin-bottom: 14px; white-space: pre-wrap; word-break: break-word; } + .post-location { + display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; padding: 8px 12px; + border-radius: 999px; background: rgba(14,165,233,0.08); color: #0369a1; font-size: 13px; font-weight: 600; + border: 1px solid rgba(14,165,233,0.12); + } .post-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 10px; margin-bottom: 14px; } .post-media-item img, .upload-preview-item img { width: 100%; height: 108px; object-fit: cover; border-radius: 16px; cursor: pointer; border: 1px solid rgba(148,163,184,0.14); box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08); } + .post-media-item { position: relative; } + .post-media-item.is-video::after { + content: ''; position: absolute; inset: 0; border-radius: 16px; + background: linear-gradient(180deg, rgba(15,23,42,0.02), rgba(15,23,42,0.3)); + pointer-events: none; + } + .video-badge { + position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; + padding: 6px 10px; border-radius: 999px; background: rgba(15,23,42,0.72); color: #fff; + font-size: 12px; font-weight: 600; z-index: 2; + box-shadow: 0 8px 20px rgba(15, 23, 42, 0.18); + } .post-feedback { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .feedback-block { padding: 14px; border-radius: 18px; background: rgba(248,250,252,0.88); @@ -448,6 +499,7 @@ border: 1px solid rgba(148,163,184,0.12); } .large-preview { width: 100%; border-radius: 18px; } + .large-video { width: 100%; max-height: 75vh; border-radius: 18px; background: #000; } @media (max-width: 1100px) { .friend-circle-grid { grid-template-columns: 1fr; } .post-feedback { grid-template-columns: 1fr; }