<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>微博-随时随地发现新鲜事</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
background: #f2f2f2;
min-height: 100vh;
}
.top-bar {
background: #ff8200;
color: white;
padding: 12px 16px;
display: flex;
align-items: center;
justify-content: space-between;
position: sticky;
top: 0;
z-index: 100;
}
.top-bar .title {
font-size: 18px;
font-weight: bold;
}
.top-bar .nav-icons {
display: flex;
gap: 20px;
font-size: 18px;
}
.search-banner {
background: #fff;
padding: 10px 16px;
margin-bottom: 8px;
}
.search-banner input {
width: 100%;
padding: 10px 16px;
background: #f5f5f5;
border: none;
border-radius: 20px;
font-size: 14px;
outline: none;
}
.tab-nav {
display: flex;
background: #fff;
border-bottom: 1px solid #eee;
position: sticky;
top: 46px;
z-index: 99;
}
.tab-nav .tab {
flex: 1;
text-align: center;
padding: 12px 0;
font-size: 15px;
color: #666;
position: relative;
cursor: pointer;
}
.tab-nav .tab.active {
color: #ff8200;
font-weight: bold;
}
.tab-nav .tab.active::after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 30px;
height: 3px;
background: #ff8200;
border-radius: 2px;
}
.pull-refresh {
text-align: center;
padding: 12px 0 4px 0;
color: #999;
font-size: 13px;
background: #f2f2f2;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
}
.pull-refresh .refresh-icon {
display: inline-block;
width: 16px;
height: 16px;
border: 2px solid #ccc;
border-top-color: #ff8200;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.stories-bar {
background: #fff;
padding: 14px 16px;
margin-bottom: 8px;
overflow-x: auto;
white-space: nowrap;
display: flex;
gap: 14px;
}
.stories-bar::-webkit-scrollbar {
display: none;
}
.story-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
flex-shrink: 0;
}
.story-ring {
width: 56px;
height: 56px;
border-radius: 50%;
padding: 3px;
background: linear-gradient(135deg, #ff8200, #ff4500, #ff1493);
}
.story-ring.viewed {
background: linear-gradient(135deg, #ccc, #999);
}
.story-ring .story-avatar {
width: 100%;
height: 100%;
border-radius: 50%;
border: 2px solid #fff;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
font-size: 18px;
}
.story-item .story-name {
font-size: 11px;
color: #666;
max-width: 56px;
overflow: hidden;
text-overflow: ellipsis;
}
.live-section {
background: #fff;
padding: 14px 16px;
margin-bottom: 8px;
}
.live-section h3 {
font-size: 16px;
margin-bottom: 12px;
color: #333;
display: flex;
align-items: center;
gap: 6px;
}
.live-badge {
display: inline-block;
background: #ff4d4f;
color: #fff;
font-size: 10px;
padding: 1px 6px;
border-radius: 3px;
animation: livePulse 1.5s ease-in-out infinite;
}
@keyframes livePulse {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
.live-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.live-card {
border-radius: 8px;
overflow: hidden;
position: relative;
}
.live-card .live-thumb {
width: 100%;
aspect-ratio: 16/9;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
}
.live-card .live-info {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
padding: 20px 8px 8px;
color: #fff;
}
.live-card .live-info .live-title {
font-size: 12px;
}
.live-card .live-info .live-viewers {
font-size: 11px;
color: #ddd;
margin-top: 2px;
}
.weibo-list {
padding: 0;
}
.weibo-card {
background: #fff;
padding: 14px 16px;
margin-bottom: 8px;
}
.weibo-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
}
.avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, #ff8200, #ff6a00);
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
font-size: 16px;
}
.user-info .username {
font-size: 15px;
font-weight: bold;
color: #333;
}
.user-info .user-desc {
font-size: 12px;
color: #999;
margin-top: 2px;
}
.v-badge {
display: inline-block;
background: #ff8200;
color: #fff;
font-size: 10px;
padding: 0 4px;
border-radius: 3px;
margin-left: 4px;
vertical-align: middle;
}
.weibo-content {
font-size: 15px;
color: #333;
line-height: 1.6;
margin-bottom: 10px;
}
.mention {
color: #ff8200;
cursor: pointer;
}
.hashtag {
color: #5b7daf;
cursor: pointer;
}
.quoted-post {
background: #f7f7f7;
border-radius: 8px;
padding: 10px 12px;
margin-bottom: 10px;
border-left: 3px solid #ff8200;
}
.quoted-post .qp-user {
font-size: 14px;
color: #5b7daf;
font-weight: bold;
margin-bottom: 4px;
}
.quoted-post .qp-content {
font-size: 14px;
color: #666;
line-height: 1.5;
}
.repost-label {
font-size: 13px;
color: #999;
margin-bottom: 8px;
}
.weibo-images {
display: grid;
gap: 4px;
margin-bottom: 10px;
}
.weibo-images.cols-1 {
grid-template-columns: 1fr;
max-width: 240px;
}
.weibo-images.cols-2 {
grid-template-columns: repeat(2, 1fr);
max-width: 240px;
}
.weibo-images.cols-3 {
grid-template-columns: repeat(3, 1fr);
}
.weibo-images .img-placeholder {
aspect-ratio: 1;
background: linear-gradient(135deg, #e0e0e0, #f5f5f5);
border-radius: 4px;
}
.weibo-images .img-placeholder:nth-child(1) {
background: linear-gradient(135deg, #ff9a9e, #fecfef);
}
.weibo-images .img-placeholder:nth-child(2) {
background: linear-gradient(135deg, #a18cd1, #fbc2eb);
}
.weibo-images .img-placeholder:nth-child(3) {
background: linear-gradient(135deg, #ffecd2, #fcb69f);
}
.weibo-images .img-placeholder:nth-child(4) {
background: linear-gradient(135deg, #a1c4fd, #c2e9fb);
}
.weibo-images .img-placeholder:nth-child(5) {
background: linear-gradient(135deg, #d4fc79, #96e6a1);
}
.weibo-images .img-placeholder:nth-child(6) {
background: linear-gradient(135deg, #fbc2eb, #a6c1ee);
}
.weibo-images .img-placeholder:nth-child(7) {
background: linear-gradient(135deg, #fddb92, #d1fdff);
}
.weibo-images .img-placeholder:nth-child(8) {
background: linear-gradient(135deg, #9890e3, #b1f4cf);
}
.weibo-images .img-placeholder:nth-child(9) {
background: linear-gradient(135deg, #ebc0fd, #d9ded8);
}
.video-container {
position: relative;
margin-bottom: 10px;
border-radius: 8px;
overflow: hidden;
}
.video-container .video-thumb {
width: 100%;
aspect-ratio: 16/9;
display: flex;
align-items: center;
justify-content: center;
}
.video-play-btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 52px;
height: 52px;
background: rgba(0, 0, 0, 0.5);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.video-play-btn::after {
content: "";
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 10px 0 10px 18px;
border-color: transparent transparent transparent #fff;
margin-left: 3px;
}
.video-duration {
position: absolute;
bottom: 8px;
right: 8px;
background: rgba(0, 0, 0, 0.6);
color: #fff;
font-size: 12px;
padding: 2px 6px;
border-radius: 3px;
}
.weibo-actions {
display: flex;
justify-content: space-around;
padding-top: 10px;
border-top: 1px solid #f5f5f5;
}
.weibo-actions .action {
display: flex;
align-items: center;
gap: 5px;
font-size: 13px;
color: #999;
cursor: pointer;
transition: transform 0.2s ease;
}
.weibo-actions .action:active {
transform: scale(1.2);
}
.weibo-actions .action.liked {
color: #ff4d4f;
}
.weibo-actions .action.liked .like-icon {
animation: likeAnim 0.4s ease;
}
@keyframes likeAnim {
0% {
transform: scale(1);
}
50% {
transform: scale(1.4);
}
100% {
transform: scale(1);
}
}
@keyframes commentAnim {
0% {
transform: scale(1);
}
30% {
transform: scale(0.8) rotate(-8deg);
}
60% {
transform: scale(1.2) rotate(4deg);
}
100% {
transform: scale(1) rotate(0deg);
}
}
.hot-topic {
background: #fff;
padding: 14px 16px;
margin-bottom: 8px;
}
.hot-topic h3 {
font-size: 16px;
margin-bottom: 12px;
color: #333;
}
.topic-item {
display: flex;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid #f8f8f8;
}
.topic-item:last-child {
border-bottom: none;
}
.topic-rank {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: bold;
margin-right: 10px;
}
.topic-rank.top1 {
color: #ff4d4f;
}
.topic-rank.top2 {
color: #ff7a45;
}
.topic-rank.top3 {
color: #ffa940;
}
.topic-title {
font-size: 14px;
color: #333;
flex: 1;
}
.topic-count {
font-size: 12px;
color: #999;
}
.topic-fire {
font-size: 12px;
margin-left: 4px;
color: #ff4d4f;
}
.topic-tag {
display: inline-block;
font-size: 10px;
padding: 0 4px;
border-radius: 3px;
margin-left: 4px;
color: #fff;
}
.topic-tag.hot {
background: #ff4d4f;
}
.topic-tag.new {
background: #ff8200;
}
.topic-tag.recommend {
background: #5b7daf;
}
.footer {
text-align: center;
padding: 20px;
color: #ccc;
font-size: 12px;
}
.footer-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px 16px;
margin-bottom: 12px;
}
.footer-links a {
color: #999;
font-size: 12px;
text-decoration: none;
}
.footer-copyright {
color: #ccc;
font-size: 11px;
line-height: 1.8;
}
.footer-info {
margin-top: 10px;
font-size: 11px;
color: #ddd;
line-height: 1.6;
}
.load-more {
text-align: center;
padding: 16px;
color: #ff8200;
font-size: 14px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="top-bar">
<div class="title">微博</div>
<div class="nav-icons">
<span>🔍</span>
<span>✉</span>
</div>
</div>
<div class="search-banner">
<input type="text" placeholder="搜索微博内容、用户或话题" />
</div>
<div class="tab-nav">
<div class="tab active">关注</div>
<div class="tab">热门</div>
<div class="tab">视频</div>
</div>
<div class="pull-refresh">
<span class="refresh-icon"></span>
正在刷新...
</div>
<div class="stories-bar">
<div class="story-item">
<div class="story-ring">
<div
class="story-avatar"
style="background: linear-gradient(135deg, #ff8200, #ff6a00)"
>
科
</div>
</div>
<span class="story-name">科技日报</span>
</div>
<div class="story-item">
<div class="story-ring">
<div
class="story-avatar"
style="background: linear-gradient(135deg, #4facfe, #00f2fe)"
>
新
</div>
</div>
<span class="story-name">新华网</span>
</div>
<div class="story-item">
<div class="story-ring viewed">
<div
class="story-avatar"
style="background: linear-gradient(135deg, #43e97b, #38f9d7)"
>
体
</div>
</div>
<span class="story-name">体育频道</span>
</div>
<div class="story-item">
<div class="story-ring">
<div
class="story-avatar"
style="background: linear-gradient(135deg, #f093fb, #f5576c)"
>
娱
</div>
</div>
<span class="story-name">娱乐新鲜事</span>
</div>
<div class="story-item">
<div class="story-ring">
<div
class="story-avatar"
style="background: linear-gradient(135deg, #fa709a, #fee140)"
>
美
</div>
</div>
<span class="story-name">美食达人</span>
</div>
<div class="story-item">
<div class="story-ring viewed">
<div
class="story-avatar"
style="background: linear-gradient(135deg, #a18cd1, #fbc2eb)"
>
旅
</div>
</div>
<span class="story-name">旅行日记</span>
</div>
<div class="story-item">
<div class="story-ring">
<div
class="story-avatar"
style="background: linear-gradient(135deg, #667eea, #764ba2)"
>
音
</div>
</div>
<span class="story-name">音乐现场</span>
</div>
<div class="story-item">
<div class="story-ring">
<div
class="story-avatar"
style="background: linear-gradient(135deg, #f6d365, #fda085)"
>
读
</div>
</div>
<span class="story-name">读书分享</span>
</div>
</div>
<div class="live-section">
<h3>🎥 正在直播 <span class="live-badge">LIVE</span></h3>
<div class="live-grid">
<div class="live-card">
<div
class="live-thumb"
style="background: linear-gradient(135deg, #667eea, #764ba2)"
>
🎬
</div>
<div class="live-info">
<div class="live-title">科技创新峰会直播</div>
<div class="live-viewers">👁 12.3万</div>
</div>
</div>
<div class="live-card">
<div
class="live-thumb"
style="background: linear-gradient(135deg, #f093fb, #f5576c)"
>
🎨
</div>
<div class="live-info">
<div class="live-title">音乐节现场</div>
<div class="live-viewers">👁 8.7万</div>
</div>
</div>
</div>
</div>
<div class="hot-topic">
<h3>🔥 微博热搜榜</h3>
<div class="topic-item">
<div class="topic-rank top1">1</div>
<div class="topic-title">
科技产业年度盛典圆满举办<span class="topic-tag hot">热</span>
</div>
<div class="topic-count">523万</div>
<span class="topic-fire">🔥</span>
</div>
<div class="topic-item">
<div class="topic-rank top2">2</div>
<div class="topic-title">冬季旅游热门目的地推荐</div>
<div class="topic-count">412万</div>
<span class="topic-fire">🔥</span>
</div>
<div class="topic-item">
<div class="topic-rank top3">3</div>
<div class="topic-title">
新能源汽车销量再创新高<span class="topic-tag hot">热</span>
</div>
<div class="topic-count">387万</div>
<span class="topic-fire">🔥</span>
</div>
<div class="topic-item">
<div class="topic-rank">4</div>
<div class="topic-title">国产大模型技术突破</div>
<div class="topic-count">296万</div>
</div>
<div class="topic-item">
<div class="topic-rank">5</div>
<div class="topic-title">
年度最佳电影评选结果揭晓<span class="topic-tag new">新</span>
</div>
<div class="topic-count">254万</div>
</div>
<div class="topic-item">
<div class="topic-rank">6</div>
<div class="topic-title">国际空间站新发现引发关注</div>
<div class="topic-count">218万</div>
</div>
<div class="topic-item">
<div class="topic-rank">7</div>
<div class="topic-title">全国多地迎来降雪天气</div>
<div class="topic-count">195万</div>
<span class="topic-fire">🔥</span>
</div>
<div class="topic-item">
<div class="topic-rank">8</div>
<div class="topic-title">
教育改革新方案公布<span class="topic-tag recommend">荐</span>
</div>
<div class="topic-count">182万</div>
</div>
<div class="topic-item">
<div class="topic-rank">9</div>
<div class="topic-title">电竞战队夺冠创造历史</div>
<div class="topic-count">167万</div>
</div>
<div class="topic-item">
<div class="topic-rank">10</div>
<div class="topic-title">春节档电影预售票房破纪录</div>
<div class="topic-count">153万</div>
<span class="topic-fire">🔥</span>
</div>
<div class="topic-item">
<div class="topic-rank">11</div>
<div class="topic-title">
AI绘画艺术展览开幕<span class="topic-tag new">新</span>
</div>
<div class="topic-count">141万</div>
</div>
<div class="topic-item">
<div class="topic-rank">12</div>
<div class="topic-title">全民健身运动热潮持续升温</div>
<div class="topic-count">128万</div>
</div>
</div>
<div class="weibo-list">
<div class="weibo-card">
<div class="weibo-header">
<div class="avatar">科</div>
<div class="user-info">
<div class="username">科技日报<span class="v-badge">V</span></div>
<div class="user-desc">1小时前 来自微博网页版</div>
</div>
</div>
<div class="weibo-content">
OpenHarmony系统持续迭代升级，生态设备数量已突破新高。越来越多的应用和设备接入该生态系统，为用户带来更加丰富的跨端体验。<span
class="hashtag"
>#OpenHarmony#</span
>
<span class="hashtag">#科技发展#</span>
<span class="mention">@华为开发者联盟</span>
</div>
<div class="weibo-images cols-3">
<div class="img-placeholder"></div>
<div class="img-placeholder"></div>
<div class="img-placeholder"></div>
</div>
<div class="weibo-actions">
<div class="action">💬 256</div>
<div class="action liked">❤ 1.2万</div>
<div class="action">🔁 328</div>
</div>
</div>
<div class="weibo-card">
<div class="weibo-header">
<div
class="avatar"
style="background: linear-gradient(135deg, #4facfe, #00f2fe)"
>
新
</div>
<div class="user-info">
<div class="username">新华网<span class="v-badge">V</span></div>
<div class="user-desc">2小时前 来自iPhone客户端</div>
</div>
</div>
<div class="weibo-content">
今日，国务院新闻办公室举行新闻发布会，介绍了经济运行总体情况。数据显示，国民经济持续恢复向好，高质量发展扎实推进。<span
class="hashtag"
>#经济发展#</span
>
<span class="hashtag">#新闻发布#</span>
</div>
<div class="weibo-actions">
<div class="action">💬 189</div>
<div class="action">❤ 8.6万</div>
<div class="action">🔁 456</div>
</div>
</div>
<div class="weibo-card">
<div class="weibo-header">
<div
class="avatar"
style="background: linear-gradient(135deg, #43e97b, #38f9d7)"
>
体
</div>
<div class="user-info">
<div class="username">体育频道<span class="v-badge">V</span></div>
<div class="user-desc">3小时前 来自Android</div>
</div>
</div>
<div class="weibo-content">
亚运会精彩赛事回顾，中国代表团在多个项目中表现优异，展现了体育强国的风采。让我们一起回顾那些令人激动的瞬间！<span
class="hashtag"
>#亚运会#</span
>
<span class="hashtag">#体育精神#</span>
<span class="mention">@中国体育</span>
<span class="mention">@奥林匹克</span>
</div>
<div class="weibo-images cols-6">
<div
class="img-placeholder"
style="background: linear-gradient(135deg, #43e97b, #38f9d7)"
></div>
<div
class="img-placeholder"
style="background: linear-gradient(135deg, #f093fb, #f5576c)"
></div>
<div
class="img-placeholder"
style="background: linear-gradient(135deg, #4facfe, #00f2fe)"
></div>
<div
class="img-placeholder"
style="background: linear-gradient(135deg, #f6d365, #fda085)"
></div>
<div
class="img-placeholder"
style="background: linear-gradient(135deg, #a18cd1, #fbc2eb)"
></div>
<div
class="img-placeholder"
style="background: linear-gradient(135deg, #d4fc79, #96e6a1)"
></div>
</div>
<div class="weibo-actions">
<div class="action">💬 567</div>
<div class="action liked">❤ 3.2万</div>
<div class="action">🔁 892</div>
</div>
</div>
<div class="weibo-card">
<div class="weibo-header">
<div
class="avatar"
style="background: linear-gradient(135deg, #f093fb, #f5576c)"
>
娱
</div>
<div class="user-info">
<div class="username">娱乐新鲜事<span class="v-badge">V</span></div>
<div class="user-desc">4小时前 来自微博网页版</div>
</div>
</div>
<div class="weibo-content">
年度热门综艺盘点，多档创新节目获得观众好评。综艺节目在内容创作和形式创新方面取得了长足进步，为观众带来了更多精彩的文化体验。<span
class="hashtag"
>#综艺推荐#</span
>
<span class="mention">@综艺大热门</span>
</div>
<div class="weibo-actions">
<div class="action">💬 342</div>
<div class="action">❤ 2.1万</div>
<div class="action">🔁 156</div>
</div>
</div>
<div class="weibo-card">
<div class="weibo-header">
<div
class="avatar"
style="background: linear-gradient(135deg, #fa709a, #fee140)"
>
美
</div>
<div class="user-info">
<div class="username">美食达人</div>
<div class="user-desc">5小时前 来自iPhone客户端</div>
</div>
</div>
<div class="weibo-content">
周末探店｜藏在巷子里的宝藏面馆，手工拉面劲道爽滑，汤底浓郁醇厚，配上秘制辣椒油简直绝了！<span
class="hashtag"
>#美食探店#</span
>
<span class="hashtag">#面条控#</span>
<span class="mention">@吃货联盟</span>
</div>
<div class="weibo-images cols-1">
<div
class="img-placeholder"
style="
aspect-ratio: 4/3;
background: linear-gradient(135deg, #f6d365, #fda085);
"
></div>
</div>
<div class="weibo-actions">
<div class="action">💬 89</div>
<div class="action">❤ 4567</div>
<div class="action">🔁 234</div>
</div>
</div>
<div class="weibo-card">
<div class="weibo-header">
<div
class="avatar"
style="background: linear-gradient(135deg, #667eea, #764ba2)"
>
摄
</div>
<div class="user-info">
<div class="username">摄影师小王</div>
<div class="user-desc">6小时前 来自华为Mate60</div>
</div>
</div>
<div class="weibo-content">
日落时分的城市天际线，金色的阳光洒满大地，每一帧都是壁纸级别的美景。<span
class="hashtag"
>#手机摄影#</span
>
<span class="hashtag">#城市风光#</span>
</div>
<div class="weibo-images cols-9">
<div class="img-placeholder"></div>
<div class="img-placeholder"></div>
<div class="img-placeholder"></div>
<div class="img-placeholder"></div>
<div class="img-placeholder"></div>
<div class="img-placeholder"></div>
<div class="img-placeholder"></div>
<div class="img-placeholder"></div>
<div class="img-placeholder"></div>
</div>
<div class="weibo-actions">
<div class="action">💬 45</div>
<div class="action liked">❤ 2.3万</div>
<div class="action">🔁 567</div>
</div>
</div>
<div class="weibo-card">
<div class="weibo-header">
<div
class="avatar"
style="background: linear-gradient(135deg, #f093fb, #f5576c)"
>
影
</div>
<div class="user-info">
<div class="username">电影推荐官</div>
<div class="user-desc">7小时前 来自Android</div>
</div>
</div>
<div class="weibo-content">
年度必看科幻大片！震撼的视觉效果和深刻的主题内核完美融合，绝对值回票价。<span
class="hashtag"
>#电影推荐#</span
>
<span class="hashtag">#科幻电影#</span>
<span class="mention">@电影资讯</span>
</div>
<div class="video-container">
<div
class="video-thumb"
style="background: linear-gradient(135deg, #0c3483, #a2b6df)"
></div>
<div class="video-play-btn"></div>
<div class="video-duration">02:35</div>
</div>
<div class="weibo-actions">
<div class="action">💬 678</div>
<div class="action">❤ 5.4万</div>
<div class="action">🔁 1.2万</div>
</div>
</div>
<div class="weibo-card">
<div class="weibo-header">
<div
class="avatar"
style="background: linear-gradient(135deg, #a18cd1, #fbc2eb)"
>
旅
</div>
<div class="user-info">
<div class="username">旅行日记</div>
<div class="user-desc">8小时前 来自iPhone客户端</div>
</div>
</div>
<div class="weibo-content">
冰岛极光之旅第三天，终于等到了欧若拉！当绿色和紫色的光带在天空中舞动的那一刻，所有的等待都值了。<span
class="hashtag"
>#冰岛旅行#</span
>
<span class="hashtag">#极光#</span>
<span class="mention">@环球旅行家</span>
</div>
<div class="weibo-images cols-2">
<div
class="img-placeholder"
style="background: linear-gradient(135deg, #0c3483, #6a85b6)"
></div>
<div
class="img-placeholder"
style="background: linear-gradient(135deg, #43e97b, #38f9d7)"
></div>
</div>
<div class="weibo-actions">
<div class="action">💬 234</div>
<div class="action">❤ 1.8万</div>
<div class="action">🔁 445</div>
</div>
</div>
<div class="weibo-card">
<div class="weibo-header">
<div
class="avatar"
style="background: linear-gradient(135deg, #fbc2eb, #a6c1ee)"
>
读
</div>
<div class="user-info">
<div class="username">读书分享家</div>
<div class="user-desc">9小时前 来自微博网页版</div>
</div>
</div>
<div class="weibo-content">
《人类简史》读后感：尤瓦尔·赫拉利用独特的视角重新审视人类文明的发展历程，让人对历史有了全新的认知。强烈推荐！<span
class="hashtag"
>#读书笔记#</span
>
<span class="hashtag">#好书推荐#</span>
</div>
<div class="weibo-images cols-3">
<div
class="img-placeholder"
style="background: linear-gradient(135deg, #f6d365, #fda085)"
></div>
<div
class="img-placeholder"
style="background: linear-gradient(135deg, #fbc2eb, #a6c1ee)"
></div>
<div
class="img-placeholder"
style="background: linear-gradient(135deg, #d4fc79, #96e6a1)"
></div>
</div>
<div class="weibo-actions">
<div class="action">💬 156</div>
<div class="action">❤ 9876</div>
<div class="action">🔁 321</div>
</div>
</div>
<div class="weibo-card">
<div class="weibo-header">
<div
class="avatar"
style="background: linear-gradient(135deg, #4facfe, #00f2fe)"
>
创
</div>
<div class="user-info">
<div class="username">数码测评君<span class="v-badge">V</span></div>
<div class="user-desc">10小时前 来自Android</div>
</div>
</div>
<div class="weibo-content">
最新旗舰手机深度测评来了！影像系统大幅升级，夜间拍摄能力堪称同价位最强。<span
class="hashtag"
>#手机测评#</span
>
<span class="hashtag">#数码科技#</span>
<span class="mention">@数码圈</span>
</div>
<div class="video-container">
<div
class="video-thumb"
style="background: linear-gradient(135deg, #2b5876, #4e4376)"
></div>
<div class="video-play-btn"></div>
<div class="video-duration">08:42</div>
</div>
<div class="weibo-actions">
<div class="action">💬 1.2万</div>
<div class="action liked">❤ 6.8万</div>
<div class="action">🔁 2.3万</div>
</div>
</div>
<div class="weibo-card">
<div class="weibo-header">
<div
class="avatar"
style="background: linear-gradient(135deg, #43e97b, #38f9d7)"
>
健
</div>
<div class="user-info">
<div class="username">健身教练Lisa</div>
<div class="user-desc">11小时前 来自iPhone客户端</div>
</div>
</div>
<div class="weibo-content">
<span class="mention">@所有人</span>
每天坚持运动30分钟，你的身体会感谢你！今天分享一组适合办公室白领的拉伸动作，缓解久坐疲劳。<span
class="hashtag"
>#健身打卡#</span
>
<span class="hashtag">#健康生活#</span>
</div>
<div class="video-container">
<div
class="video-thumb"
style="background: linear-gradient(135deg, #11998e, #38ef7d)"
></div>
<div class="video-play-btn"></div>
<div class="video-duration">03:18</div>
</div>
<div class="weibo-actions">
<div class="action">💬 432</div>
<div class="action">❤ 3456</div>
<div class="action">🔁 789</div>
</div>
</div>
<div class="weibo-card">
<div class="weibo-header">
<div
class="avatar"
style="background: linear-gradient(135deg, #ff8200, #ff6a00)"
>
微
</div>
<div class="user-info">
<div class="username">微博管理员</div>
<div class="user-desc">12小时前 来自微博网页版</div>
</div>
</div>
<div class="weibo-content">
<div class="repost-label">
🔁 转发了 <span class="mention">@科技日报</span> 的微博：
</div>
<div class="quoted-post">
<div class="qp-user"><span class="mention">@科技日报</span></div>
<div class="qp-content">
OpenHarmony系统持续迭代升级，生态设备数量已突破新高。越来越多的应用和设备接入该生态系统，为用户带来更加丰富的跨端体验。<span
class="hashtag"
>#OpenHarmony#</span
>
</div>
</div>
共建开源生态，携手推动技术创新！<span class="hashtag"
>#开源生态#</span
>
</div>
<div class="weibo-actions">
<div class="action">💬 78</div>
<div class="action">❤ 5432</div>
<div class="action">🔁 123</div>
</div>
</div>
<div class="weibo-card">
<div class="weibo-header">
<div
class="avatar"
style="background: linear-gradient(135deg, #fa709a, #fee140)"
>
设
</div>
<div class="user-info">
<div class="username">设计师小陈</div>
<div class="user-desc">13小时前 来自MacBook Pro</div>
</div>
</div>
<div class="weibo-content">
2024年度UI设计趋势：玻璃拟态、微交互动效、AI辅助设计工具将成为主流。<span
class="hashtag"
>#UI设计#</span
>
<span class="hashtag">#设计趋势#</span>
<span class="mention">@设计社区</span>
<span class="mention">@UI中国</span>
</div>
<div class="weibo-images cols-3">
<div
class="img-placeholder"
style="background: linear-gradient(135deg, #667eea, #764ba2)"
></div>
<div
class="img-placeholder"
style="background: linear-gradient(135deg, #f093fb, #f5576c)"
></div>
<div
class="img-placeholder"
style="background: linear-gradient(135deg, #4facfe, #00f2fe)"
></div>
</div>
<div class="weibo-actions">
<div class="action">💬 321</div>
<div class="action">❤ 1.5万</div>
<div class="action">🔁 678</div>
</div>
</div>
</div>
<div class="load-more">点击加载更多</div>
<div class="footer">
<div class="footer-links">
<a href="javascript:void(0);">关于微博</a>
<a href="javascript:void(0);">帮助中心</a>
<a href="javascript:void(0);">开放平台</a>
<a href="javascript:void(0);">微博招聘</a>
<a href="javascript:void(0);">广告服务</a>
<a href="javascript:void(0);">用户协议</a>
<a href="javascript:void(0);">隐私政策</a>
<a href="javascript:void(0);">联系我们</a>
</div>
<div class="footer-copyright">
© 2024 Sina Corporation<br />
京ICP证000007号
</div>
<div class="footer-info">
微博客 m.weibo.cn<br />
客服电话：400-096-0960<br />
京公网安备 11000002000001号
</div>
</div>
<script>
function test() {
return true;
}
</script>
</body>
</html>
