北の朋友圈

<script>
  new Vue({
    el: '#app',
    data: {
      moments: [
        {
          avatarUrl: 'https://pic.cnblogs.com/avatar/3509019/20251027094540.png',
          username: '枕月听风',
          timestamp: '2025年11月9日09:12:32',
          content: '我的青春太过于安静，以至于到它结束，一时都没反应过来，自己已经是一个成年人了。没有遇到小时候幻想的女孩，没有激情洋溢的校园时光，没有偷偷藏起的脸红心跳，没有恣意而为的潇洒，没有漫画里憧憬的许多美好，只有一些旧旧的回忆，黄昏时站在窗前看树影。',
          images: [
            { url: 'https://img2024.cnblogs.com/blog/3509019/202511/3509019-20251109091507789-308580338.jpg'},
            { url: 'https://img2024.cnblogs.com/blog/3509019/202511/3509019-20251109091526719-234288962.jpg',},
            { url: 'https://img2024.cnblogs.com/blog/3509019/202511/3509019-20251109091724554-1301040947.jpg',}
          ]
        },
        {
          avatarUrl: 'https://pic.cnblogs.com/avatar/3509019/20251027094540.png',
          username: '枕月听风',
          timestamp: '2025年11月8日07:24:42',
          content: '今天下雨只能打车去上班了',
          images: [
           
          ]
        },
        {
          avatarUrl: 'https://pic.cnblogs.com/avatar/3509019/20251027094540.png',
          username: '枕月听风',
          timestamp: '2025年11月7日19:24:08',
          content: '你始终欠自己一个该有模样',
          images: [
           
          ]
        },
        {
          avatarUrl: 'https://pic.cnblogs.com/avatar/3509019/20251027094540.png',
          username: '枕月听风',
          timestamp: '2025年11月6日16:55:05',
          content: '朋友圈样式测试',
          images: [
            { url: 'https://img2024.cnblogs.com/blog/3509019/202510/3509019-20251024135901093-1410977460.png'},
            { url: 'https://img2024.cnblogs.com/blog/3509019/202510/3509019-20251022204420867-2001256496.jpg',},
            { url: 'https://img2024.cnblogs.com/blog/3509019/202510/3509019-20251022073618730-1232511152.jpg',}
          ]
        }
      ]
    },
    methods: {
      getImageClass(images) {
        const count = images.length;
        if (count === 1 && images[0].type === 'single') return 'single-image';
        if (count === 2) return 'two-images';
        if (count === 4) return 'four-images';
        return 'multi-images';
      }
    }
  });
</script>

<!-- run -->
<style>
  
  .container {
    max-width: 650px;
    margin: 0 auto;
  }
  
.moment {
  background-color: #fff;
  border-radius: 10px;
  padding: 18px;
  margin-bottom: 20px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06);
  border: 1px solid #eee;
  transition: all 0.3s ease;
}

.moment:hover {
  border-color: #1e88e5;
  box-shadow: 0 6px 16px rgba(30, 136, 229, 0.15);
  transform: translateY(1px);
}
  
  .header {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
  }
  
  .avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    margin-right: 12px;
    overflow: hidden;
    background-color: #e0e0e0;
  }
  
  .avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .user-info {
    flex: 1;
  }
  
  .username {
    font-weight: 500;
    font-size: 16px;
    margin-bottom: 4px;
  }
  
  .timestamp {
    font-size: 12px;
    color: #999;
  }
  
.content {
    margin-bottom: 12px;
    line-height: 1.5;
    font-size: 15px;
    font-weight: 500;
    color: #434343;
}
  
  .images {
    margin-bottom: 12px;
  }
  
  .single-image {
    max-width: 100%;
    border-radius: 4px;
    overflow: hidden;
  }
  
  .single-image img {
    width: 100%;
    height: auto;
    display: block;
  }
  
  .multi-images {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
  }
  
  .multi-images img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
    aspect-ratio: 1 / 1;
  }
  
  .two-images {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
  }
  
  .two-images img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
    aspect-ratio: 1 / 1;
  }
  
  .four-images {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
  }
  
  .four-images img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
    aspect-ratio: 1 / 1;
  }
</style>

<div id="app">
  <div class="container">
    <div class="moment" v-for="(moment, index) in moments" :key="index">
      <div class="header">
        <div class="avatar">
          <img :src="moment.avatarUrl" :alt="moment.username + '头像'">
        </div>
        <div class="user-info">
          <div class="username">{{ moment.username }}</div>
          <div class="timestamp">{{ moment.timestamp }}</div>
        </div>
      </div>
      
      <div class="content">{{ moment.content }}</div>
      
      <div class="images" v-if="moment.images.length > 0">
        <div :class="getImageClass(moment.images)">
          <img 
            v-for="(img, imgIndex) in moment.images" 
            :key="imgIndex"
            :src="img.url"
            :alt="img.alt"
          >
        </div>
      </div>
    </div>
  </div>
</div>