|
|
| 第1行： |
第1行： |
| <!DOCTYPE html>
| |
| <html lang="zh-CN"> | | <html lang="zh-CN"> |
| <head> | | <head> |
| 第223行： |
第222行： |
| </div> | | </div> |
| </div> | | </div> |
| </body>
| |
| </html>
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
| <!DOCTYPE html>
| |
| <html lang="zh-CN">
| |
| <head>
| |
| <meta charset="UTF-8">
| |
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
| |
| <title>B站视频卡片</title>
| |
| <style>
| |
| *{margin:0;padding:0;box-sizing:border-box}
| |
| body{background:#f5f7fa;padding:20px;font-family:"Microsoft YaHei",sans-serif;display:flex;justify-content:center}
| |
| .video-card-container{width:100%;max-width:80vw;margin:0 auto}
| |
| .video-card{background:white;border-radius:4px;overflow:hidden;box-shadow:0 6px 20px rgba(0,0,0,.08)}
| |
| .bilibili-container{position:relative;width:100%;padding-top:56.25%;background:#000}
| |
| .bilibili-container iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none}
| |
| .info-section{padding:18px}
| |
| .user-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;flex-wrap:wrap;gap:8px 0}
| |
| .user-left{display:flex;align-items:center;gap:10px}
| |
| .avatar{width:36px;height:36px;border-radius:50%;background:#ff4d85;display:flex;align-items:center;justify-content:center;color:white;font-weight:bold}
| |
| .username{font-size:15px;font-weight:600;color:#18191c}
| |
| .detail-link{background:#ff4d85;color:white;text-decoration:none;border-radius:20px;padding:5px 16px;font-size:13px}
| |
| .title{font-size:17px;font-weight:700;color:#18191c;line-height:1.5;margin-bottom:10px}
| |
| .metadata{font-size:12.5px;color:#8e8e93;margin-bottom:14px}
| |
| .tags{display:flex;flex-wrap:wrap;gap:8px}
| |
| .tag{background:#f0f2f5;color:#000;border-radius:14px;padding:3px 10px;font-size:12px;text-decoration:none}
| |
| </style>
| |
| </head>
| |
| <body>
| |
| <div id="card"></div>
| |
|
| |
| <script>
| |
| // 1. 在这里改你要的视频信息
| |
| const videoData = {
| |
| bvid: "BV1eXSMYVEcc",
| |
| title: "【创价】久本五月病 【久本信仰祭16】",
| |
| upName: "H娘",
| |
| avatarText: "H",
| |
| meta: "sm16495736 • 2016年5月3日 00:06 (UTC+9)",
| |
| tags: [
| |
| { name: "宗教都市祭", link: "/wiki/宗教都市祭" },
| |
| { name: "久本投稿祭'25", link: "/wiki/久本投稿祭'25" },
| |
| { name: "エア本", link: "/wiki/エア本" }
| |
| ]
| |
| };
| |
|
| |
| // 2. 模板函数（不用动）
| |
| function buildCard(data) {
| |
| const tagHtml = data.tags.map(t =>
| |
| `<a href="${t.link}" class="tag">${t.name}</a>`
| |
| ).join('');
| |
|
| |
| return `
| |
| <div class="video-card-container">
| |
| <div class="video-card">
| |
| <div class="bilibili-container">
| |
| <iframe src="https://player.bilibili.com/player.html?bvid=${data.bvid}&page=1" allowfullscreen></iframe>
| |
| </div>
| |
| <div class="info-section">
| |
| <div class="user-info">
| |
| <div class="user-left">
| |
| <div class="avatar">${data.avatarText}</div>
| |
| <span class="username">${data.upName}</span>
| |
| </div>
| |
| <a href="https://www.bilibili.com/video/${data.bvid}" target="_blank" class="detail-link">+ 详情页</a>
| |
| </div>
| |
| <div class="title">${data.title}</div>
| |
| <div class="metadata">${data.meta}</div>
| |
| <div class="tags">${tagHtml}</div>
| |
| </div>
| |
| </div>
| |
| </div>`;
| |
| }
| |
|
| |
| // 3. 渲染到页面
| |
| document.getElementById('card').innerHTML = buildCard(videoData);
| |
| </script>
| |
| </body> | | </body> |
| </html> | | </html> |
