北の独自升级

<script>
  new Vue({
    el: '#app',
    data: {
      notes: [
        { id: 1, color: 'color-1', title: '祝愿大家 ✨', content: '都能找到理想的上位机工作' },
        { id: 2, color: 'color-2', title: '待办清单 📋', content: '• 优化学习路线页<br>• 测试便签响应式' },
        { id: 3, color: 'color-3', title: '学习目标 🌱', content: '掌握 Flex/Grid 布局精髓，不再依赖框架。' },
        { id: 4, color: 'color-4', title: '心情记录 💖', content: '今天阳光很好，代码也跑通了！' },
        { id: 5, color: 'color-5', title: '技术笔记 🧠', content: '<code>box-shadow</code> 可叠加多层，模拟真实投影。' },
        { id: 6, color: 'color-6', title: '生活琐事 🛒', content: '买咖啡、换灯泡、给植物浇水' },
        { id: 7, color: 'color-7', title: '设计思考 🎨', content: '质感 = 微对比 + 柔和阴影 + 精准留白' },
        { id: 8, color: 'color-8', title: '项目计划 🚀', content: 'Q3 完成个人作品集网站重构' },
        { id: 9, color: 'color-9', title: '读书摘录 📖', content: '“优雅的代码，是写给人看的。”' },
        { id: 10, color: 'color-10', title: '健康提醒 💪', content: '每小时起身活动，保护颈椎！' },
        { id: 11, color: 'color-11', title: '资源收藏 🔗', content: 'MDN Web Docs + CSS Tricks = 黄金组合' },
        { color: 'color-12', title: '第01天记录 🎯', content: '2025-11-10 : 今日练背+二头' }
      ]
    }
  });
</script>

<!-- run -->
<style>
  /* 博客园兼容 */
  .postBody {
    padding: 0px 20px !important;
  }

  /* 重置与基础 */
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  /* 主容器：1150px 宽，居中，一行4列 */
  #app {
    font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    padding: 40px 20px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 36px;
    justify-items: center;
    max-width: 1150px;
    margin: 0 auto;
  }

  .note {
    width: 240px;
    padding: 26px;
    border-radius: 14px;
    box-shadow:
      0 6px 16px rgba(0, 0, 0, 0.08),
      2px 2px 0 rgba(0, 0, 0, 0.02);
    position: relative;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    line-height: 1.55;
    font-weight: 500;
  }

  /* 错落旋转（仅在非悬停时生效） */
  .note:nth-child(1)  { transform: rotate(-2deg); }
  .note:nth-child(2)  { transform: rotate(1.8deg); }
  .note:nth-child(3)  { transform: rotate(-1.2deg); }
  .note:nth-child(4)  { transform: rotate(1.5deg); }
  .note:nth-child(5)  { transform: rotate(-0.9deg); }
  .note:nth-child(6)  { transform: rotate(1.1deg); }
  .note:nth-child(7)  { transform: rotate(-1.4deg); }
  .note:nth-child(8)  { transform: rotate(0.7deg); }
  .note:nth-child(9)  { transform: rotate(-0.6deg); }
  .note:nth-child(10) { transform: rotate(1.3deg); }
  .note:nth-child(11) { transform: rotate(-1deg); }
  .note:nth-child(12) { transform: rotate(0.9deg); }

  .note:hover {
    transform: rotate(0deg) scale(1.03) !important;
    z-index: 20;
    box-shadow:
      0 10px 24px rgba(0, 0, 0, 0.12),
      2px 2px 0 rgba(0, 0, 0, 0.03);
  }



  .note h3 {
    font-size: 1.2rem;
    margin-bottom: 14px;
    font-weight: 700;
  }

  .note p {
    font-size: 0.95rem;
    opacity: 0.92;
  }

  /* ========== 12 种精致便签配色 ========== */
  .note.color-1  { background: #fff9db; color: #5a4a00; }
  .note.color-2  { background: #e6f7ff; color: #005f7f; }
  .note.color-3  { background: #f0fdf4; color: #1a6e35; }
  .note.color-4  { background: #fdf2f8; color: #7e225f; }
  .note.color-5  { background: #f5f3ff; color: #4c2d9e; }
  .note.color-6  { background: #fffbeb; color: #78350f; }
  .note.color-7  { background: #ecfdf5; color: #065f46; }
  .note.color-8  { background: #f0f9ff; color: #084c7f; }
  .note.color-9  { background: #fdf4ff; color: #6d28d9; }
  .note.color-10 { background: #fff7ed; color: #7c2d12; }
  .note.color-11 { background: #f0f9ff; color: #0c4a6e; }
  .note.color-12 { background: #f8fafc; color: #1e293b; border: 1px solid #e2e8f0; }

  /* 代码高亮 */
  code {
    background: rgba(0,0,0,0.04);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.9em;
  }

#cnblogs_post_body h3 {
    font-size: 16px;
    font-weight: bold;
    line-height: 1.5;
    margin: 10px 0 !important;
    font-size: 16px !important;
}

#cnblogs_post_body>pre, #cnblogs_post_body p, .blogpost-body>pre, .blogpost-body p {
    margin: 10px auto;
    font-size: 14px !important;
    line-height: 2;
}

  /* ========== 响应式 ========== */
  @media (max-width: 900px) {
    #app {
      grid-template-columns: repeat(2, 1fr);
      gap: 28px;
      padding: 30px 16px;
    }
  }

  @media (max-width: 600px) {
    #app {
      grid-template-columns: 1fr;
      gap: 24px;
      padding: 30px 16px;
    }
    .note {
      width: 100%;
      max-width: 320px;
      transform: rotate(0deg) !important;
    }
    .note::after {
      display: none;
    }
  }
</style>

<div id="app">
  <div
    v-for="note in notes"
    :key="note.id"
    :class="['note', note.color]"
    v-html="`<h3>${note.title}</h3><p>${note.content}</p>`"
  ></div>
</div>