<script>new Vue({el: '#app',{photos: [{id: 1,src: 'https://pic.cnblogs.com/avatar/3509019/20251020113106.png',alt: 'Mountain',title: '山间晨曦',desc: '清晨的第一缕阳光洒在雪山上。',ratio: 'normal'},{id: 2,src: 'https://picsum.photos/800/600?random=2',alt: 'Ocean',title: '蔚蓝海岸',desc: '地中海的宁静午后。',ratio: 'wide'},{id: 3,src: 'https://picsum.photos/400/600?random=3',alt: 'Forest',title: '林间小径',desc: '雨后森林，空气清新。',ratio: 'tall'},{id: 4,src: 'https://picsum.photos/600/800?random=4',alt: 'City',title: '都市夜景',desc: '东京涩谷的霓虹光影。',ratio: 'normal'}]}});
</script><style>.postBody {padding: 0px 20px !important;}* {margin: 0;padding: 0;box-sizing: border-box;}#app {background: #f9f9fb;font-family: 'Segoe UI', system-ui, sans-serif;min-height: 100vh;display: flex;justify-content: center;align-items: flex-start;padding: 40px 20px;}.photo-wall {display: grid;grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));gap: 16px;max-width: 1200px;width: 100%;}.photo-card {position: relative;aspect-ratio: 3 / 4;border: 2px solid #e0e0e0;border-radius: 12px;overflow: hidden;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);transition: border-color 0.3s ease;background: white;}.photo-card.wide { aspect-ratio: 4 / 3; }.photo-card.tall { aspect-ratio: 2 / 3; }.photo-card:hover {border-color: #1e56a0; }.photo-card img {width: 100%;height: 100%;object-fit: cover;display: block;transition: transform 0.3s ease;}.photo-info {position: absolute;bottom: 0;left: 0;right: 0;padding: 16px;background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);color: white;transform: translateY(100%);transition: transform 0.3s ease, opacity 0.3s ease;opacity: 0;pointer-events: none;}.photo-card:hover .photo-info {transform: translateY(0);opacity: 1;}.photo-info h3 {font-size: 16px;font-weight: 600;margin-bottom: 6px;line-height: 1.3;}.photo-info p {font-size: 13px;opacity: 0.9;line-height: 1.4;}/* 移动端适配 */@media (max-width: 600px) {#app {padding: 20px 12px;}.photo-wall {gap: 12px;}.photo-info {padding: 12px;}.photo-info h3 {font-size: 14px;}.photo-info p {font-size: 12px;}}
</style><div id="app"><div class="photo-wall"><divv-for="photo in photos":key="photo.id":class="['photo-card', photo.ratio]"><img :src="photo.src" :alt="photo.alt" loading="lazy" /><div class="photo-info"><h3>{{ photo.title }}</h3><p>{{ photo.desc }}</p></div></div></div>
</div>