北の独自升级

<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-10-27 : 今日练背' }]}});
</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"><divv-for="note in notes":key="note.id":class="['note', note.color]"v-html="`<h3>${note.title}</h3><p>${note.content}</p>`"></div>
</div>