样式测试

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>说说样式复刻 - Vue版</title>
  <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
      background-color: #f5f5f5;
      color: #333;
      line-height: 1.6;
      padding: 20px;
      max-width: 850px;
      margin: 0 auto;
    }

    /* 说说容器 */
    .moment {
      background-color: white;
      border-radius: 8px;
      padding: 20px;
      margin-bottom: 20px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
      display: flex;
    }

    /* 头像区域 - 方形 */
    .avatar {
      width: 50px;
      height: 50px;
      border-radius: 8px;
      margin-right: 15px;
      flex-shrink: 0;
      overflow: hidden;
      border: 1px solid #eee;
    }

    /* 头像图片 */
    .avatar-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      background-color: #f0f0f0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      color: #999;
    }

    /* 内容区域 */
    .content {
      flex: 1;
    }

    /* 说说标题 */
    .moment-title {
      font-size: 18px;
      font-weight: 600;
      color: #1a1a1a;
      margin-bottom: 8px;
    }

    /* 说说内容 */
    .moment-text {
      font-size: 16px;
      color: #333;
      margin-bottom: 15px;
      line-height: 1.7;
      white-space: pre-line;
    }

    /* 图片展示区域 */
    .moment-images {
      margin-bottom: 15px;
    }

    /* 单张图片样式 */
    .single-image {
      max-width: 100%;
      border-radius: 8px;
      overflow: hidden;
    }

    .single-image .moment-image {
      width: 100%;
      max-width: 500px;
      height: auto;
      border-radius: 8px;
      object-fit: cover;
    }

    /* 两张图片样式 */
    .two-images {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px; /* 统一列/行间距 */
      max-width: 100%;
    }

    .two-images .moment-image {
      width: 100%;
      height: 220px;
      border-radius: 8px;
      object-fit: cover;
    }

    /* 三张图片样式 */
    .three-images {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 6px; /* 统一列/行间距 */
      max-width: 100%;
    }

    .three-images .moment-image {
      width: 100%;
      height: 180px;
      border-radius: 8px;
      object-fit: cover;
    }

    /* 四张图片样式（2x2布局） */
    .four-images {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      gap: 6px; /* 上下/左右间距统一为6px（和左右一致） */
      max-width: 100%;
    }

    .four-images .moment-image {
      width: 100%;
      height: 180px;
      border-radius: 8px;
      object-fit: cover;
    }

    /* 九宫格样式 */
    .nine-images {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 6px; /* 上下/左右间距统一为6px（和左右一致） */
      max-width: 100%;
    }

    .nine-images .moment-image {
      width: 100%;
      height: 140px;
      border-radius: 5px;
      object-fit: cover;
    }

    /* 图片容器通用样式 */
    .image-container {
      position: relative;
      overflow: hidden;
    }

    /* 说说日期 */
    .moment-date {
      font-size: 14px;
      color: #999;
      text-align: right;
    }

    /* 响应式调整 */
    @media (max-width: 768px) {
      .moment {
        padding: 15px;
      }
      
      .avatar {
        width: 50px;
        height: 50px;
        margin-right: 12px;
      }
      
      .single-image .moment-image {
        max-width: 100%;
      }
      
      .two-images .moment-image {
        height: 180px;
      }
      
      .three-images .moment-image {
        height: 140px;
      }
      
      .four-images .moment-image {
        height: 140px;
      }
      
      .nine-images .moment-image {
        height: 110px;
      }
    }

    @media (max-width: 480px) {
      body {
        padding: 15px;
      }
      
      .moment-title {
        font-size: 16px;
      }
      
      .moment-text {
        font-size: 15px;
      }
      
      /* 移动端所有布局的上下/左右间距统一为4px */
      .two-images,
      .three-images,
      .four-images,
      .nine-images {
        gap: 4px;
      }
      
      .two-images .moment-image {
        height: 150px;
      }
      
      .three-images .moment-image {
        height: 120px;
      }
      
      .four-images .moment-image {
        height: 120px;
      }
      
      .nine-images .moment-image {
        height: 95px;
      }
    }
  </style>
</head>
<body>
  <div id="app">
    <div v-for="(moment, index) in moments" :key="index" class="moment">
      <div class="avatar">
        <img :src="userInfo.avatar" alt="头像" class="avatar-img">
      </div>
      <div class="content">
        <div class="moment-title">{{ userInfo.name }}</div>
        <div class="moment-text">{{ moment.text }}</div>
        
        <div v-if="moment.images && moment.images.length" class="moment-images">
          <div 
            :class="{
              'single-image': moment.images.length === 1,
              'two-images': moment.images.length === 2,
              'three-images': moment.images.length === 3,
              'four-images': moment.images.length === 4,
              'nine-images': moment.images.length > 4
            }"
          >
            <div 
              v-for="(image, imgIndex) in moment.images" 
              :key="imgIndex" 
              class="image-container"
            >
              <img :src="image.src" class="moment-image">
            </div>
          </div>
        </div>
        
        <div class="moment-date">{{ moment.date }}</div>
      </div>
    </div>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        userInfo: {
          avatar: 'https://q1.qlogo.cn/g?b=qq&nk=3584155135&s=640',
          name: '浮生哲学'
        },
        moments: [
          {
            text: '博客部署说完了，把以前拍摄的文章都搬过来了。用滑雪的话来说就是「避免因短文章过多影响站点 sec」',
            images: [
              {
                src: 'https://youke3.picui.cn/s1/2026/01/03/69588f3908345.png'
              }
            ],
            date: '2023年9月24日'
          },
          {
            text: '商来比往，不辜负生活，不迷失方向。2023年，我们在路上，不辜负自己。\n你俩在2023年发光发热，顶峰相见。\n跨过不平凡的一年，追寻新一年的未知与激情。',
            images: [
              {
                src: 'https://youke3.picui.cn/s1/2026/01/03/69588f3908345.png'
              },
              {
                src: 'https://youke3.picui.cn/s1/2026/01/03/69588f3908345.png'
              }
            ],
            date: '2023年1月1日'
          },
          {
            text: '老婆生日快乐！\n恭喜我们的初女士15岁~~16年~~生日快乐。',
            images: [
              {
                src: 'https://youke3.picui.cn/s1/2026/01/03/69588f3908345.png'
              },
              {
                src: 'https://youke3.picui.cn/s1/2026/01/03/69588f3908345.png'
              },
              {
                src: 'https://youke3.picui.cn/s1/2026/01/03/69588f3908345.png'
              },
              {
                src: 'https://youke3.picui.cn/s1/2026/01/03/69588f3908345.png'
              }
            ],
            date: '2022年8月31日'
          },
          {
            text: '今年本来也想像去年一样买点miku的手办什么的，但是看了一圈会员购，发现没有中意的，于是作罢，还是库存钱，买V4吧。以后学会了多写几首曲子来弥补一下。\n其实也可以买只fufu的~\n感谢我的人生中有了你的颜色，ミクちゃん！',
            images: [
              {
                src: 'https://youke3.picui.cn/s1/2026/01/03/69588f3908345.png'
              },
              {
                src: 'https://youke3.picui.cn/s1/2026/01/03/69588f3908345.png'
              },
              {
                src: 'https://youke3.picui.cn/s1/2026/01/03/69588f3908345.png'
              },
              {
                src: 'https://youke3.picui.cn/s1/2026/01/03/69588f3908345.png'
              },
              {
                src: 'https://youke3.picui.cn/s1/2026/01/03/69588f3908345.png'
              },
              {
                src: 'https://youke3.picui.cn/s1/2026/01/03/69588f3908345.png'
              },
              {
                src: 'https://youke3.picui.cn/s1/2026/01/03/69588f3908345.png'
              },
              {
                src: 'https://youke3.picui.cn/s1/2026/01/03/69588f3908345.png'
              },
              {
                src: 'https://youke3.picui.cn/s1/2026/01/03/69588f3908345.png'
              }
            ],
            date: '2022年8月31日'
          },
           {
            text: '元旦到了湿布地看平安，睡着健康，睡着幸福，换着快乐，接着温馨，带着甜蜜，牵着财运，换着吉祥，迈入新年，快乐度过每一天！',
            images: [],
            date: '2023年1月1日'
          },
          {
            text: '元旦到了湿布地看平安，睡着健康，睡着幸福，换着快乐，接着温馨，带着甜蜜，牵着财运，换着吉祥，迈入新年，快乐度过每一天！',
            images: [],
            date: '2023年1月1日'
          }
        ]
      }
    });
  </script>
</body>
</html>
posted @ 2026-01-02 11:10 恨水长秋阅读(14) 评论(0) 收藏举报
刷新页面返回顶部
枕月听风

言念君子，温其如玉

样式测试

公告

枕月听风

言念君子 ，温其如玉

样式测试

公告

言念君子，温其如玉
