| 1 | <!DOCTYPE html> |
| 2 | <html lang="zh-CN"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8"> |
| 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| 6 | <title>小红书白 · Xiaohongshu White</title> |
| 7 | <style> |
| 8 | *{margin:0;padding:0;box-sizing:border-box} |
| 9 | html,body{width:100%;height:100%;overflow:hidden;background:#0f1117} |
| 10 | body{display:grid;place-items:center;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif} |
| 11 | .slide{position:relative;width:min(100vw,calc(100vh*16/9));aspect-ratio:16/9;overflow:hidden;background:linear-gradient(160deg,#ffffff 0%,#fff8f6 100%);box-shadow:0 0 0 1px rgba(255,255,255,.06)} |
| 12 | .layout{position:absolute;inset:0;display:grid;grid-template-columns:42% 58%} |
| 13 | .left{position:relative;padding:clamp(20px,4vw,52px) clamp(12px,2.5vw,32px) clamp(16px,3vw,40px) clamp(20px,4vw,52px);display:flex;flex-direction:column;justify-content:center} |
| 14 | .tag-row{display:flex;align-items:center;gap:clamp(5px,1vw,10px);margin-bottom:clamp(8px,1.6vw,20px)} |
| 15 | .tag-red{font-size:clamp(7px,.8vw,10px);color:#fff;background:#f56565;padding:clamp(2px,.3vw,4px) clamp(6px,1vw,12px);border-radius:clamp(4px,.6vw,8px);font-weight:600} |
| 16 | .tag-date{font-size:clamp(6px,.7vw,9px);color:#a8a29e} |
| 17 | h1{font-family:Georgia,"Songti SC","Noto Serif SC",serif;font-size:clamp(20px,3.6vw,44px);color:#7c2d12;font-weight:700;line-height:1.25} |
| 18 | h1 em{font-style:normal;color:#f56565} |
| 19 | .lead{font-family:Georgia,"Songti SC",serif;font-size:clamp(9px,1.1vw,14px);color:#78716c;line-height:1.8;margin-top:clamp(8px,1.5vw,18px)} |
| 20 | .highlight{background:linear-gradient(180deg,transparent 60%,rgba(245,101,101,.15) 60%);padding:0 2px} |
| 21 | .stats{display:flex;gap:clamp(10px,2vw,28px);margin-top:clamp(10px,2vw,26px)} |
| 22 | .stat{text-align:left} |
| 23 | .stat-num{font-family:Georgia,serif;font-size:clamp(16px,2.6vw,32px);color:#f56565;font-weight:bold;line-height:1} |
| 24 | .stat-label{font-size:clamp(6px,.7vw,9px);color:#a8a29e;margin-top:clamp(2px,.3vw,4px)} |
| 25 | .palette{display:flex;gap:clamp(3px,.4vw,5px);margin-top:auto;padding-top:clamp(12px,2vw,28px)} |
| 26 | .sw{width:clamp(9px,1.2vw,14px);height:clamp(9px,1.2vw,14px);border-radius:3px;background:var(--c);border:1px solid rgba(0,0,0,.06)} |
| 27 | .right{position:relative;display:flex;flex-direction:column;gap:clamp(8px,1.4vw,18px);padding:clamp(20px,4vw,52px) clamp(20px,4vw,52px) clamp(16px,3vw,40px) 0;justify-content:center} |
| 28 | .card{background:#fffaf9;border:1px solid #fde2e1;border-radius:clamp(10px,1.6vw,20px);padding:clamp(10px,2vw,26px) clamp(12px,2.4vw,32px);position:relative;overflow:hidden} |
| 29 | .card::before{content:'';position:absolute;top:0;left:0;width:clamp(3px,.4vw,5px);height:100%;background:linear-gradient(180deg,#f56565,#fca5a5)} |
| 30 | .card-title{font-family:Georgia,"Songti SC",serif;font-size:clamp(10px,1.4vw,17px);color:#7c2d12;font-weight:700;padding-left:clamp(6px,1vw,14px)} |
| 31 | .card-list{margin-top:clamp(6px,1vw,14px);padding-left:clamp(6px,1vw,14px);display:flex;flex-direction:column;gap:clamp(3px,.5vw,7px)} |
| 32 | .card-item{display:flex;align-items:flex-start;gap:clamp(4px,.6vw,8px);font-size:clamp(7px,.9vw,11px);color:#78716c;line-height:1.6} |
| 33 | .card-item::before{content:'';display:block;width:clamp(4px,.5vw,6px);height:clamp(4px,.5vw,6px);border-radius:50%;background:#fc8181;margin-top:clamp(3px,.4vw,5px);flex-shrink:0} |
| 34 | .card-warm{background:#fffbeb;border-color:#fde68a} |
| 35 | .card-warm::before{background:linear-gradient(180deg,#92400e,#fbbf24)} |
| 36 | .card-warm .card-item::before{background:#fbbf24} |
| 37 | .footer-tags{display:flex;gap:clamp(4px,.6vw,8px);flex-wrap:wrap;padding-left:0} |
| 38 | .hash{font-size:clamp(7px,.8vw,10px);color:#f56565;font-weight:500} |
| 39 | .bookmark{position:absolute;top:0;right:clamp(12px,2.5vw,32px);width:clamp(18px,2.5vw,32px);height:clamp(28px,3.8vw,50px);background:#f56565;clip-path:polygon(0 0,100% 0,100% 100%,50% 72%,0 100%);z-index:5} |
| 40 | .heart-row{display:flex;align-items:center;gap:clamp(4px,.6vw,8px);margin-top:clamp(8px,1.4vw,18px);padding-left:clamp(6px,1vw,14px)} |
| 41 | .heart{width:clamp(10px,1.4vw,18px);height:clamp(10px,1.4vw,18px);position:relative} |
| 42 | .heart::before,.heart::after{content:'';position:absolute;width:50%;height:80%;background:#f56565;border-radius:50% 50% 0 0} |
| 43 | .heart::before{left:0;transform:rotate(-45deg);transform-origin:0 100%} |
| 44 | .heart::after{right:0;transform:rotate(45deg);transform-origin:100% 100%} |
| 45 | .heart-count{font-size:clamp(8px,1vw,12px);color:#78716c} |
| 46 | </style> |
| 47 | </head> |
| 48 | <body> |
| 49 | <div class="slide"> |
| 50 | <div class="bookmark"></div> |
| 51 | <div class="layout"> |
| 52 | <div class="left"> |
| 53 | <div class="tag-row"> |
| 54 | <span class="tag-red">秋季限定</span> |
| 55 | <span class="tag-date">2026.11 · 第 03 期</span> |
| 56 | </div> |
| 57 | <h1>京都深秋<br><em>慢游指南</em></h1> |
| 58 | <p class="lead">十一月的枫叶把整座城染成暖红色。从<span class="highlight">永观堂</span>的逆光枫影到哲学之道的落叶小径，这趟三天两夜的慢节奏旅行，值得你在收藏夹里留一个位置。</p> |
| 59 | <div class="stats"> |
| 60 | <div class="stat"><div class="stat-num">3天2夜</div><div class="stat-label">行程天数</div></div> |
| 61 | <div class="stat"><div class="stat-num">12</div><div class="stat-label">必去景点</div></div> |
| 62 | <div class="stat"><div class="stat-num">4.9</div><div class="stat-label">推荐指数</div></div> |
| 63 | </div> |
| 64 | <div class="palette"> |
| 65 | <i class="sw" style="--c:#7c2d12"></i> |
| 66 | <i class="sw" style="--c:#92400e"></i> |
| 67 | <i class="sw" style="--c:#f56565"></i> |
| 68 | <i class="sw" style="--c:#fc8181"></i> |
| 69 | <i class="sw" style="--c:#fbbf24"></i> |
| 70 | <i class="sw" style="--c:#fffaf9"></i> |
| 71 | </div> |
| 72 | </div> |
| 73 | <div class="right"> |
| 74 | <div class="card"> |
| 75 | <div class="card-title">必打卡枫叶名所</div> |
| 76 | <div class="card-list"> |
| 77 | <div class="card-item">永观堂 — 逆光时段 16:00-17:30 最美</div> |
| 78 | <div class="card-item">东福寺通天桥 — 两旁两百棵枫树隧道</div> |
| 79 | <div class="card-item">清水寺 — 夜间特别拜观，灯光映枫</div> |
| 80 | </div> |
| 81 | <div class="heart-row"> |
| 82 | <div class="heart"></div> |
| 83 | <span class="heart-count">2.3w 收藏</span> |
| 84 | </div> |
| 85 | </div> |
| 86 | <div class="card card-warm"> |
| 87 | <div class="card-title">温暖美食推荐</div> |
| 88 | <div class="card-list"> |
| 89 | <div class="card-item">% Arabica 岚山店 — 枫叶窗景拿铁</div> |
| 90 | <div class="card-item">伊右卫门沙龙 — 抹茶季节限定套餐</div> |
| 91 | </div> |
| 92 | <div class="footer-tags" style="margin-top:clamp(8px,1.4vw,18px)"> |
| 93 | <span class="hash">#京都旅行</span> |
| 94 | <span class="hash">#红叶季</span> |
| 95 | <span class="hash">#慢生活</span> |
| 96 | </div> |
| 97 | </div> |
| 98 | </div> |
| 99 | </div> |
| 100 | </div> |
| 101 | </body> |
| 102 | </html> |
| 103 |