xts_acts/web/httpserverpages/www.hao123.com/index.html-代码预览-xts_acts:基于OpenHarmony生态的应用兼容性测试套件项目

kaihongsunlianFormat httpserverpages HTML files with 2-space indent Co-Authored-By: Agent
<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>hao123 - 我的上网主页</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        font-family: "Microsoft YaHei", sans-serif;
        background: #f0f2f5;
        min-height: 100vh;
      }
      .header {
        background: linear-gradient(135deg, #e74c3c, #c0392b);
        color: white;
        padding: 12px 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .header .logo {
        font-size: 24px;
        font-weight: bold;
      }
      .header .user-info {
        font-size: 14px;
        opacity: 0.9;
      }
      .search-section {
        background: white;
        padding: 20px;
        border-bottom: 1px solid #eee;
      }
      .search-bar {
        max-width: 600px;
        margin: 0 auto;
        display: flex;
        border: 2px solid #e74c3c;
        border-radius: 25px;
        overflow: hidden;
      }
      .search-bar input {
        flex: 1;
        padding: 12px 20px;
        font-size: 16px;
        border: none;
        outline: none;
      }
      .search-bar button {
        padding: 12px 40px;
        background: #e74c3c;
        color: white;
        border: none;
        font-size: 16px;
        font-weight: bold;
        cursor: pointer;
      }
      .content {
        max-width: 1100px;
        margin: 0 auto;
        padding: 20px;
      }
      .quick-nav {
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        gap: 10px;
        margin-bottom: 20px;
      }
      .nav-item {
        text-align: center;
        padding: 12px 5px;
        background: white;
        border-radius: 10px;
        cursor: pointer;
        transition: all 0.2s;
        text-decoration: none;
      }
      .nav-item:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      }
      .nav-item .nav-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        margin: 0 auto 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
      }
      .nav-item .nav-text {
        font-size: 12px;
        color: #333;
      }
      .breaking-news {
        background: #fff8e1;
        border-radius: 10px;
        padding: 12px 20px;
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        gap: 15px;
        border: 1px solid #ffe082;
      }
      .breaking-news .bn-tag {
        background: #e74c3c;
        color: white;
        padding: 3px 10px;
        border-radius: 4px;
        font-size: 13px;
        font-weight: bold;
        white-space: nowrap;
      }
      .breaking-news .bn-ticker {
        flex: 1;
        overflow: hidden;
        height: 24px;
        position: relative;
      }
      .breaking-news .bn-ticker .bn-scroll {
        display: inline-block;
        white-space: nowrap;
        animation: tickerScroll 20s linear infinite;
        font-size: 14px;
        color: #333;
        line-height: 24px;
      }
      @keyframes tickerScroll {
        0% {
          transform: translateX(100%);
        }
        100% {
          transform: translateX(-100%);
        }
      }
      .news-panel {
        background: white;
        border-radius: 12px;
        padding: 20px;
        margin-bottom: 20px;
      }
      .news-panel h2 {
        font-size: 18px;
        margin-bottom: 15px;
        padding-bottom: 10px;
        border-bottom: 2px solid #e74c3c;
      }
      .news-item {
        display: flex;
        gap: 15px;
        padding: 12px 0;
        border-bottom: 1px solid #f0f0f0;
      }
      .news-item:last-child {
        border-bottom: none;
      }
      .news-item .news-img {
        width: 140px;
        height: 90px;
        border-radius: 8px;
        background: linear-gradient(135deg, #ff9a9e, #fecfef);
        flex-shrink: 0;
      }
      .news-item:nth-child(even) .news-img {
        background: linear-gradient(135deg, #a18cd1, #fbc2eb);
      }
      .news-item:nth-child(3n) .news-img {
        background: linear-gradient(135deg, #4facfe, #00f2fe);
      }
      .news-item .news-info h3 {
        font-size: 15px;
        color: #333;
        margin-bottom: 6px;
      }
      .news-item .news-info p {
        font-size: 13px;
        color: #999;
      }
      .ad-banner {
        background: white;
        border-radius: 12px;
        padding: 0;
        margin-bottom: 20px;
        overflow: hidden;
        border: 1px solid #eee;
      }
      .ad-banner .ad-label {
        background: #ff4d4f;
        color: white;
        font-size: 11px;
        padding: 2px 8px;
        display: inline-block;
        position: relative;
        top: 8px;
        left: 8px;
        z-index: 1;
      }
      .ad-banner .ad-content {
        height: 120px;
        background: linear-gradient(135deg, #f093fb, #f5576c);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 18px;
        font-weight: bold;
      }
      .ad-banner-small {
        background: white;
        border-radius: 10px;
        padding: 15px;
        margin-bottom: 15px;
        border: 1px solid #f0f0f0;
        text-align: center;
      }
      .ad-banner-small .ad-label {
        background: #ff4d4f;
        color: white;
        font-size: 10px;
        padding: 1px 6px;
        display: inline-block;
        margin-bottom: 8px;
      }
      .ad-banner-small .ad-img {
        height: 80px;
        background: linear-gradient(135deg, #ffecd2, #fcb69f);
        border-radius: 6px;
        margin-bottom: 8px;
      }
      .ad-banner-small .ad-text {
        font-size: 13px;
        color: #666;
      }
      .sidebar-ads {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        margin-bottom: 20px;
      }
      .tool-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
      }
      .tool-item {
        background: white;
        border-radius: 10px;
        padding: 15px;
        text-align: center;
        cursor: pointer;
        transition: all 0.2s;
      }
      .tool-item:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      }
      .tool-item .tool-icon {
        font-size: 28px;
        margin-bottom: 8px;
      }
      .tool-item .tool-text {
        font-size: 13px;
        color: #333;
      }
      .two-col {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 20px;
      }
      .third-party-scripts {
        display: none;
      }
      .footer {
        text-align: center;
        padding: 20px;
        color: #999;
        font-size: 12px;
        border-top: 1px solid #eee;
        margin-top: 20px;
      }
      .section-panel {
        background: white;
        border-radius: 12px;
        padding: 20px;
        margin-bottom: 20px;
      }
      .section-panel h2 {
        font-size: 18px;
        margin-bottom: 15px;
        padding-bottom: 10px;
        border-bottom: 2px solid #e74c3c;
      }
      .shopping-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 15px;
      }
      .product-card {
        border: 1px solid #f0f0f0;
        border-radius: 10px;
        padding: 12px;
        text-align: center;
        transition: all 0.2s;
        cursor: pointer;
      }
      .product-card:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        transform: translateY(-2px);
      }
      .product-card .product-img {
        height: 100px;
        border-radius: 8px;
        margin-bottom: 10px;
      }
      .product-card .product-name {
        font-size: 13px;
        color: #333;
        margin-bottom: 6px;
      }
      .product-card .product-price {
        font-size: 16px;
        color: #e74c3c;
        font-weight: bold;
      }
      .product-card .product-price-old {
        font-size: 12px;
        color: #ccc;
        text-decoration: line-through;
        margin-left: 5px;
      }
      .movie-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 15px;
      }
      .movie-card {
        border: 1px solid #f0f0f0;
        border-radius: 10px;
        overflow: hidden;
        cursor: pointer;
        transition: all 0.2s;
      }
      .movie-card:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      }
      .movie-card .movie-poster {
        height: 140px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 14px;
        font-weight: bold;
      }
      .movie-card .movie-info {
        padding: 10px;
      }
      .movie-card .movie-info .movie-title {
        font-size: 14px;
        color: #333;
        font-weight: bold;
      }
      .movie-card .movie-info .movie-time {
        font-size: 12px;
        color: #999;
        margin-top: 4px;
      }
      .movie-card .movie-info .movie-score {
        font-size: 12px;
        color: #e74c3c;
        margin-top: 4px;
      }
      .lottery-table {
        width: 100%;
        border-collapse: collapse;
      }
      .lottery-table th,
      .lottery-table td {
        padding: 10px 12px;
        text-align: center;
        border-bottom: 1px solid #f0f0f0;
        font-size: 14px;
      }
      .lottery-table th {
        background: #f8f9fa;
        color: #666;
        font-weight: normal;
      }
      .lottery-table .lottery-numbers {
        color: #e74c3c;
        font-weight: bold;
        letter-spacing: 3px;
      }
      .stock-table {
        width: 100%;
        border-collapse: collapse;
      }
      .stock-table th,
      .stock-table td {
        padding: 8px 12px;
        text-align: center;
        border-bottom: 1px solid #f0f0f0;
        font-size: 14px;
      }
      .stock-table th {
        background: #f8f9fa;
        color: #666;
        font-weight: normal;
      }
      .stock-up {
        color: #e74c3c;
      }
      .stock-down {
        color: #2ecc71;
      }
      .weather-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 12px;
      }
      .weather-card {
        background: #f8f9fa;
        border-radius: 10px;
        padding: 15px;
        text-align: center;
      }
      .weather-card .weather-city {
        font-size: 14px;
        color: #333;
        font-weight: bold;
        margin-bottom: 8px;
      }
      .weather-card .weather-icon {
        font-size: 32px;
        margin-bottom: 8px;
      }
      .weather-card .weather-temp {
        font-size: 18px;
        color: #e74c3c;
        font-weight: bold;
        margin-bottom: 4px;
      }
      .weather-card .weather-desc {
        font-size: 12px;
        color: #999;
      }
      .search-cloud {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
      }
      .search-tag {
        padding: 6px 16px;
        background: #f0f2f5;
        border-radius: 20px;
        font-size: 13px;
        color: #555;
        cursor: pointer;
        transition: all 0.2s;
        text-decoration: none;
      }
      .search-tag:hover {
        background: #e74c3c;
        color: white;
      }
      .search-tag.hot {
        background: #fff0f0;
        color: #e74c3c;
      }
      .search-tag.hot:hover {
        background: #e74c3c;
        color: white;
      }
      .social-links {
        display: flex;
        justify-content: center;
        gap: 20px;
        flex-wrap: wrap;
      }
      .social-link {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 20px;
        background: #f8f9fa;
        border-radius: 25px;
        text-decoration: none;
        color: #333;
        font-size: 14px;
        transition: all 0.2s;
        cursor: pointer;
      }
      .social-link:hover {
        background: #e74c3c;
        color: white;
      }
      .social-link .social-icon {
        font-size: 20px;
      }
      .calendar-widget {
        text-align: center;
      }
      .calendar-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
      }
      .calendar-header span {
        font-size: 16px;
        font-weight: bold;
      }
      .calendar-header button {
        background: none;
        border: 1px solid #ddd;
        border-radius: 4px;
        padding: 4px 10px;
        cursor: pointer;
        font-size: 14px;
      }
      .calendar-days {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 4px;
      }
      .calendar-days .day-label {
        font-size: 12px;
        color: #999;
        padding: 6px 0;
        text-align: center;
      }
      .calendar-days .day-cell {
        font-size: 13px;
        padding: 8px 0;
        text-align: center;
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.2s;
      }
      .calendar-days .day-cell:hover {
        background: #e74c3c;
        color: white;
      }
      .calendar-days .day-cell.today {
        background: #e74c3c;
        color: white;
        font-weight: bold;
      }
      .calendar-days .day-cell.other-month {
        color: #ccc;
      }
      .bookmark-list {
        list-style: none;
      }
      .bookmark-list li {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 12px;
        border-bottom: 1px solid #f0f0f0;
        font-size: 14px;
      }
      .bookmark-list li:last-child {
        border-bottom: none;
      }
      .bookmark-list li .bm-icon {
        margin-right: 10px;
        font-size: 16px;
      }
      .bookmark-list li .bm-actions {
        display: flex;
        gap: 10px;
      }
      .bookmark-list li .bm-actions button {
        background: none;
        border: none;
        color: #999;
        cursor: pointer;
        font-size: 13px;
      }
      .bookmark-list li .bm-actions button:hover {
        color: #e74c3c;
      }
      .bookmark-add {
        display: flex;
        gap: 10px;
        margin-bottom: 15px;
      }
      .bookmark-add input {
        flex: 1;
        padding: 8px 12px;
        border: 1px solid #ddd;
        border-radius: 6px;
        font-size: 14px;
        outline: none;
      }
      .bookmark-add button {
        padding: 8px 20px;
        background: #e74c3c;
        color: white;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        font-size: 14px;
      }
      .ad-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
        margin-bottom: 20px;
      }
      .section-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        margin-bottom: 20px;
      }
    </style>
  </head>
  <body>
    <div class="header">
      <div class="logo">hao123</div>
      <div class="user-info">
        欢迎访问 | <a href="#" style="color: white">登录</a>
      </div>
    </div>
    <div class="search-section">
      <div class="search-bar">
        <input type="text" placeholder="输入关键词搜索" />
        <button>搜索</button>
      </div>
    </div>
    <div class="content">
      <div class="quick-nav">
        <a class="nav-item" href="#"
          ><div class="nav-icon" style="background: #e3f2fd">&#128218;</div>
          <div class="nav-text">新闻</div></a
        >
        <a class="nav-item" href="#"
          ><div class="nav-icon" style="background: #fff3e0">&#128250;</div>
          <div class="nav-text">视频</div></a
        >
        <a class="nav-item" href="#"
          ><div class="nav-icon" style="background: #e8f5e9">&#128640;</div>
          <div class="nav-text">科技</div></a
        >
        <a class="nav-item" href="#"
          ><div class="nav-icon" style="background: #fce4ec">&#127916;</div>
          <div class="nav-text">娱乐</div></a
        >
        <a class="nav-item" href="#"
          ><div class="nav-icon" style="background: #f3e5f5">&#9917;</div>
          <div class="nav-text">体育</div></a
        >
        <a class="nav-item" href="#"
          ><div class="nav-icon" style="background: #e0f7fa">&#128176;</div>
          <div class="nav-text">财经</div></a
        >
        <a class="nav-item" href="#"
          ><div class="nav-icon" style="background: #fff9c4">&#128205;</div>
          <div class="nav-text">地图</div></a
        >
        <a class="nav-item" href="#"
          ><div class="nav-icon" style="background: #c8e6c9">&#128221;</div>
          <div class="nav-text">翻译</div></a
        >
        <a class="nav-item" href="#"
          ><div class="nav-icon" style="background: #dcedc8">&#128247;</div>
          <div class="nav-text">图片</div></a
        >
        <a class="nav-item" href="#"
          ><div class="nav-icon" style="background: #ffe0b2">&#127911;</div>
          <div class="nav-text">音乐</div></a
        >
        <a class="nav-item" href="#"
          ><div class="nav-icon" style="background: #b3e5fc">&#128202;</div>
          <div class="nav-text">购物</div></a
        >
        <a class="nav-item" href="#"
          ><div class="nav-icon" style="background: #f8bbd0">&#128197;</div>
          <div class="nav-text">日历</div></a
        >
        <a class="nav-item" href="#"
          ><div class="nav-icon" style="background: #d1c4e9">&#128218;</div>
          <div class="nav-text">小说</div></a
        >
        <a class="nav-item" href="#"
          ><div class="nav-icon" style="background: #b2dfdb">&#128663;</div>
          <div class="nav-text">汽车</div></a
        >
        <a class="nav-item" href="#"
          ><div class="nav-icon" style="background: #ffccbc">&#127968;</div>
          <div class="nav-text">房产</div></a
        >
        <a class="nav-item" href="#"
          ><div class="nav-icon" style="background: #c5cae9">&#127911;</div>
          <div class="nav-text">电台</div></a
        >
        <a class="nav-item" href="#"
          ><div class="nav-icon" style="background: #f0f4c3">&#128193;</div>
          <div class="nav-text">邮箱</div></a
        >
        <a class="nav-item" href="#"
          ><div class="nav-icon" style="background: #ffe0b2">&#128081;</div>
          <div class="nav-text">彩票</div></a
        >
        <a class="nav-item" href="#"
          ><div class="nav-icon" style="background: #e0f2f1">&#128187;</div>
          <div class="nav-text">小游戏</div></a
        >
        <a class="nav-item" href="#"
          ><div class="nav-icon" style="background: #fce4ec">&#128146;</div>
          <div class="nav-text">直播</div></a
        >
        <a class="nav-item" href="#"
          ><div class="nav-icon" style="background: #e8eaf6">&#128241;</div>
          <div class="nav-text">手机</div></a
        >
        <a class="nav-item" href="#"
          ><div class="nav-icon" style="background: #fff3e0">&#127860;</div>
          <div class="nav-text">美食</div></a
        >
        <a class="nav-item" href="#"
          ><div class="nav-icon" style="background: #e0f7fa">&#128694;</div>
          <div class="nav-text">旅游</div></a
        >
        <a class="nav-item" href="#"
          ><div class="nav-icon" style="background: #f1f8e9">&#128218;</div>
          <div class="nav-text">教育</div></a
        >
        <a class="nav-item" href="#"
          ><div class="nav-icon" style="background: #fff8e1">&#128587;</div>
          <div class="nav-text">健康</div></a
        >
      </div>
      <div class="breaking-news">
        <span class="bn-tag">快讯</span>
        <div class="bn-ticker">
          <span class="bn-scroll"
            >&#9888; 突发：全球科技峰会今日开幕 &nbsp;&nbsp; | &nbsp;&nbsp;
            &#127942; 国足世预赛晋级形势分析 &nbsp;&nbsp; | &nbsp;&nbsp;
            &#128200; A股三大指数集体高开 &nbsp;&nbsp; | &nbsp;&nbsp; &#127780;
            春节假期旅游收入创新高 &nbsp;&nbsp; | &nbsp;&nbsp; &#128640;
            神舟飞船成功发射升空 &nbsp;&nbsp; | &nbsp;&nbsp; &#127757;
            全国多地迎来降雪天气</span
          >
        </div>
      </div>
      <div class="ad-banner">
        <span class="ad-label">广告</span>
        <div class="ad-content">&#127873; 限时优惠 - 精选好物推荐</div>
      </div>
      <div class="ad-grid">
        <div class="ad-banner-small">
          <div class="ad-label">广告</div>
          <div
            class="ad-img"
            style="background: linear-gradient(135deg, #ffecd2, #fcb69f)"
          ></div>
          <div class="ad-text">新品上市 - 智能手机</div>
        </div>
        <div class="ad-banner-small">
          <div class="ad-label">广告</div>
          <div
            class="ad-img"
            style="background: linear-gradient(135deg, #a18cd1, #fbc2eb)"
          ></div>
          <div class="ad-text">品牌特惠 - 限时抢购</div>
        </div>
        <div class="ad-banner-small">
          <div class="ad-label">广告</div>
          <div
            class="ad-img"
            style="background: linear-gradient(135deg, #4facfe, #00f2fe)"
          ></div>
          <div class="ad-text">在线课程 - 限时优惠</div>
        </div>
        <div class="ad-banner-small">
          <div class="ad-label">广告</div>
          <div
            class="ad-img"
            style="background: linear-gradient(135deg, #43e97b, #38f9d7)"
          ></div>
          <div class="ad-text">金融产品 - 安全可靠</div>
        </div>
      </div>
      <div class="two-col">
        <div>
          <div class="news-panel">
            <h2>热点资讯</h2>
            <div class="news-item">
              <div class="news-img"></div>
              <div class="news-info">
                <h3>数字经济引领高质量发展新篇章</h3>
                <p>新华网 &middot; 1小时前</p>
              </div>
            </div>
            <div class="news-item">
              <div class="news-img"></div>
              <div class="news-info">
                <h3>人工智能技术创新成果发布</h3>
                <p>科技日报 &middot; 2小时前</p>
              </div>
            </div>
            <div class="news-item">
              <div class="news-img"></div>
              <div class="news-info">
                <h3>绿色能源转型加速推进</h3>
                <p>经济观察报 &middot; 3小时前</p>
              </div>
            </div>
            <div class="news-item">
              <div class="news-img"></div>
              <div class="news-info">
                <h3>新能源汽车销量再创新高</h3>
                <p>第一财经 &middot; 4小时前</p>
              </div>
            </div>
            <div class="news-item">
              <div class="news-img"></div>
              <div class="news-info">
                <h3>教育改革方案正式落地实施</h3>
                <p>人民日报 &middot; 5小时前</p>
              </div>
            </div>
            <div class="news-item">
              <div class="news-img"></div>
              <div class="news-info">
                <h3>航天工程取得重大突破性进展</h3>
                <p>央视新闻 &middot; 6小时前</p>
              </div>
            </div>
            <div class="news-item">
              <div class="news-img"></div>
              <div class="news-info">
                <h3>全国碳交易市场成交额破百亿</h3>
                <p>经济日报 &middot; 7小时前</p>
              </div>
            </div>
          </div>
          <div class="ad-banner">
            <span class="ad-label">广告</span>
            <div
              class="ad-content"
              style="background: linear-gradient(135deg, #4facfe, #00f2fe)"
            >
              &#128722; 年中大促 - 全场低至3折起
            </div>
          </div>
          <div class="section-panel">
            <h2>&#128722; 购物精选</h2>
            <div class="shopping-grid">
              <div class="product-card">
                <div
                  class="product-img"
                  style="
                    background: linear-gradient(135deg, #ffecd2, #fcb69f);
                    border-radius: 8px;
                  "
                ></div>
                <div class="product-name">无线蓝牙耳机 Pro</div>
                <div>
                  <span class="product-price">&yen;199</span
                  ><span class="product-price-old">&yen;399</span>
                </div>
              </div>
              <div class="product-card">
                <div
                  class="product-img"
                  style="
                    background: linear-gradient(135deg, #a18cd1, #fbc2eb);
                    border-radius: 8px;
                  "
                ></div>
                <div class="product-name">智能手表 运动版</div>
                <div>
                  <span class="product-price">&yen;599</span
                  ><span class="product-price-old">&yen;899</span>
                </div>
              </div>
              <div class="product-card">
                <div
                  class="product-img"
                  style="
                    background: linear-gradient(135deg, #4facfe, #00f2fe);
                    border-radius: 8px;
                  "
                ></div>
                <div class="product-name">机械键盘 RGB</div>
                <div>
                  <span class="product-price">&yen;299</span
                  ><span class="product-price-old">&yen;499</span>
                </div>
              </div>
              <div class="product-card">
                <div
                  class="product-img"
                  style="
                    background: linear-gradient(135deg, #43e97b, #38f9d7);
                    border-radius: 8px;
                  "
                ></div>
                <div class="product-name">便携充电宝 20000mAh</div>
                <div>
                  <span class="product-price">&yen;129</span
                  ><span class="product-price-old">&yen;259</span>
                </div>
              </div>
            </div>
          </div>
          <div class="section-panel">
            <h2>&#127916; 电影排期</h2>
            <div class="movie-grid">
              <div class="movie-card">
                <div
                  class="movie-poster"
                  style="
                    background: linear-gradient(
                      135deg,
                      #0f0c29,
                      #302b63,
                      #24243e
                    );
                  "
                >
                  科幻大片
                </div>
                <div class="movie-info">
                  <div class="movie-title">星际迷航：新纪元</div>
                  <div class="movie-time">10:30 13:00 15:30 18:00 20:30</div>
                  <div class="movie-score">&#11088; 9.2</div>
                </div>
              </div>
              <div class="movie-card">
                <div
                  class="movie-poster"
                  style="background: linear-gradient(135deg, #ee9ca7, #ffdde1)"
                >
                  爱情喜剧
                </div>
                <div class="movie-info">
                  <div class="movie-title">心动奇遇记</div>
                  <div class="movie-time">11:00 14:00 16:30 19:00 21:30</div>
                  <div class="movie-score">&#11088; 8.5</div>
                </div>
              </div>
              <div class="movie-card">
                <div
                  class="movie-poster"
                  style="background: linear-gradient(135deg, #11998e, #38ef7d)"
                >
                  动作冒险
                </div>
                <div class="movie-info">
                  <div class="movie-title">龙之传说</div>
                  <div class="movie-time">09:30 12:00 14:30 17:00 19:30</div>
                  <div class="movie-score">&#11088; 8.8</div>
                </div>
              </div>
              <div class="movie-card">
                <div
                  class="movie-poster"
                  style="background: linear-gradient(135deg, #fc5c7d, #6a82fb)"
                >
                  悬疑推理
                </div>
                <div class="movie-info">
                  <div class="movie-title">暗夜追踪</div>
                  <div class="movie-time">10:00 13:30 16:00 18:30 21:00</div>
                  <div class="movie-score">&#11088; 8.1</div>
                </div>
              </div>
            </div>
          </div>
          <div class="section-panel">
            <h2>&#128682; 生活服务</h2>
            <div class="tool-grid">
              <div class="tool-item">
                <div class="tool-icon">&#127777;</div>
                <div class="tool-text">天气</div>
              </div>
              <div class="tool-item">
                <div class="tool-icon">&#128663;</div>
                <div class="tool-text">打车</div>
              </div>
              <div class="tool-item">
                <div class="tool-icon">&#127860;</div>
                <div class="tool-text">外卖</div>
              </div>
              <div class="tool-item">
                <div class="tool-icon">&#127968;</div>
                <div class="tool-text">酒店</div>
              </div>
              <div class="tool-item">
                <div class="tool-icon">&#128722;</div>
                <div class="tool-text">电影票</div>
              </div>
              <div class="tool-item">
                <div class="tool-icon">&#128694;</div>
                <div class="tool-text">旅游</div>
              </div>
              <div class="tool-item">
                <div class="tool-icon">&#128179;</div>
                <div class="tool-text">理财</div>
              </div>
              <div class="tool-item">
                <div class="tool-icon">&#128187;</div>
                <div class="tool-text">招聘</div>
              </div>
              <div class="tool-item">
                <div class="tool-icon">&#128666;</div>
                <div class="tool-text">火车票</div>
              </div>
              <div class="tool-item">
                <div class="tool-icon">&#9992;</div>
                <div class="tool-text">机票</div>
              </div>
              <div class="tool-item">
                <div class="tool-icon">&#128241;</div>
                <div class="tool-text">充值</div>
              </div>
              <div class="tool-item">
                <div class="tool-icon">&#128221;</div>
                <div class="tool-text">快递</div>
              </div>
              <div class="tool-item">
                <div class="tool-icon">&#128200;</div>
                <div class="tool-text">股票</div>
              </div>
              <div class="tool-item">
                <div class="tool-icon">&#128176;</div>
                <div class="tool-text">汇率</div>
              </div>
              <div class="tool-item">
                <div class="tool-icon">&#128203;</div>
                <div class="tool-text">计算器</div>
              </div>
              <div class="tool-item">
                <div class="tool-icon">&#128274;</div>
                <div class="tool-text">密码管理</div>
              </div>
            </div>
          </div>
          <div class="section-panel">
            <h2>&#128193; 我的书签</h2>
            <div class="bookmark-add">
              <input type="text" placeholder="输入网址名称..." />
              <input type="text" placeholder="输入网址URL..." />
              <button>添加</button>
            </div>
            <ul class="bookmark-list">
              <li>
                <span><span class="bm-icon">&#127760;</span> 百度一下</span>
                <span class="bm-actions"
                  ><button>编辑</button><button>删除</button></span
                >
              </li>
              <li>
                <span><span class="bm-icon">&#127760;</span> 淘宝网</span>
                <span class="bm-actions"
                  ><button>编辑</button><button>删除</button></span
                >
              </li>
              <li>
                <span><span class="bm-icon">&#127760;</span> 微博</span>
                <span class="bm-actions"
                  ><button>编辑</button><button>删除</button></span
                >
              </li>
              <li>
                <span><span class="bm-icon">&#127760;</span> 知乎</span>
                <span class="bm-actions"
                  ><button>编辑</button><button>删除</button></span
                >
              </li>
              <li>
                <span><span class="bm-icon">&#127760;</span> GitHub</span>
                <span class="bm-actions"
                  ><button>编辑</button><button>删除</button></span
                >
              </li>
            </ul>
          </div>
        </div>
        <div>
          <div class="sidebar-ads">
            <div class="ad-banner-small">
              <div class="ad-label">广告</div>
              <div
                class="ad-img"
                style="background: linear-gradient(135deg, #f093fb, #f5576c)"
              ></div>
              <div class="ad-text">游戏推荐 - 热门新游</div>
            </div>
            <div class="ad-banner-small">
              <div class="ad-label">广告</div>
              <div
                class="ad-img"
                style="background: linear-gradient(135deg, #ff9a9e, #fecfef)"
              ></div>
              <div class="ad-text">美容护肤 - 品牌折扣</div>
            </div>
          </div>
          <div class="section-panel">
            <h2>&#127777; 多城天气</h2>
            <div class="weather-grid">
              <div class="weather-card">
                <div class="weather-city">北京</div>
                <div class="weather-icon">&#9728;</div>
                <div class="weather-temp">26&deg;C</div>
                <div class="weather-desc">晴转多云</div>
              </div>
              <div class="weather-card">
                <div class="weather-city">上海</div>
                <div class="weather-icon">&#127782;</div>
                <div class="weather-temp">28&deg;C</div>
                <div class="weather-desc">多云</div>
              </div>
              <div class="weather-card">
                <div class="weather-city">广州</div>
                <div class="weather-icon">&#127783;</div>
                <div class="weather-temp">32&deg;C</div>
                <div class="weather-desc">雷阵雨</div>
              </div>
              <div class="weather-card">
                <div class="weather-city">深圳</div>
                <div class="weather-icon">&#127780;</div>
                <div class="weather-temp">31&deg;C</div>
                <div class="weather-desc">阵雨转晴</div>
              </div>
              <div class="weather-card">
                <div class="weather-city">成都</div>
                <div class="weather-icon">&#127781;</div>
                <div class="weather-temp">24&deg;C</div>
                <div class="weather-desc">阴天</div>
              </div>
            </div>
          </div>
          <div class="ad-banner-small">
            <div class="ad-label">广告</div>
            <div
              class="ad-img"
              style="background: linear-gradient(135deg, #667eea, #764ba2)"
            ></div>
            <div class="ad-text">投资理财 - 年化收益8%</div>
          </div>
          <div class="ad-banner-small">
            <div class="ad-label">广告</div>
            <div
              class="ad-img"
              style="background: linear-gradient(135deg, #fddb92, #d1fdff)"
            ></div>
            <div class="ad-text">教育培训 - 名师在线</div>
          </div>
          <div class="section-panel">
            <h2>&#128200; 股市行情</h2>
            <table class="stock-table">
              <tr>
                <th>名称</th>
                <th>最新价</th>
                <th>涨跌幅</th>
              </tr>
              <tr>
                <td>上证指数</td>
                <td class="stock-up">3,256.78</td>
                <td class="stock-up">+1.23%</td>
              </tr>
              <tr>
                <td>深证成指</td>
                <td class="stock-up">10,892.34</td>
                <td class="stock-up">+0.87%</td>
              </tr>
              <tr>
                <td>创业板指</td>
                <td class="stock-down">2,156.90</td>
                <td class="stock-down">-0.32%</td>
              </tr>
              <tr>
                <td>恒生指数</td>
                <td class="stock-up">18,234.56</td>
                <td class="stock-up">+2.15%</td>
              </tr>
              <tr>
                <td>纳斯达克</td>
                <td class="stock-down">16,789.01</td>
                <td class="stock-down">-0.45%</td>
              </tr>
            </table>
          </div>
          <div class="section-panel">
            <h2>&#128081; 彩票开奖</h2>
            <table class="lottery-table">
              <tr>
                <th>彩种</th>
                <th>期号</th>
                <th>开奖号码</th>
              </tr>
              <tr>
                <td>双色球</td>
                <td>2024088</td>
                <td class="lottery-numbers">03 08 15 22 31 33 + 07</td>
              </tr>
              <tr>
                <td>大乐透</td>
                <td>24087</td>
                <td class="lottery-numbers">01 12 18 25 34 + 05 09</td>
              </tr>
              <tr>
                <td>福彩3D</td>
                <td>2024088</td>
                <td class="lottery-numbers">5 2 8</td>
              </tr>
              <tr>
                <td>排列三</td>
                <td>24087</td>
                <td class="lottery-numbers">7 4 1</td>
              </tr>
            </table>
          </div>
          <div class="ad-banner">
            <span class="ad-label">广告</span>
            <div
              class="ad-content"
              style="background: linear-gradient(135deg, #43e97b, #38f9d7)"
            >
              &#127775; 新用户专享 - 注册即领100元红包
            </div>
          </div>
          <div class="section-panel">
            <h2>&#128269; 热搜榜</h2>
            <div class="search-cloud">
              <a class="search-tag hot" href="#">AI大模型</a>
              <a class="search-tag hot" href="#">新能源汽车</a>
              <a class="search-tag" href="#">奥运会</a>
              <a class="search-tag hot" href="#">高考分数线</a>
              <a class="search-tag" href="#">电影推荐</a>
              <a class="search-tag" href="#">旅游攻略</a>
              <a class="search-tag hot" href="#">房价走势</a>
              <a class="search-tag" href="#">减肥食谱</a>
              <a class="search-tag" href="#">考研时间</a>
              <a class="search-tag" href="#">手机测评</a>
              <a class="search-tag" href="#">健身计划</a>
              <a class="search-tag" href="#">理财入门</a>
            </div>
          </div>
          <div class="ad-banner-small">
            <div class="ad-label">广告</div>
            <div
              class="ad-img"
              style="background: linear-gradient(135deg, #fa709a, #fee140)"
            ></div>
            <div class="ad-text">跨境电商 - 全球好货</div>
          </div>
          <div class="section-panel">
            <h2>&#128197; 日历</h2>
            <div class="calendar-widget">
              <div class="calendar-header">
                <button>&lt;</button>
                <span>2024年6月</span>
                <button>&gt;</button>
              </div>
              <div class="calendar-days">
                <div class="day-label">日</div>
                <div class="day-label">一</div>
                <div class="day-label">二</div>
                <div class="day-label">三</div>
                <div class="day-label">四</div>
                <div class="day-label">五</div>
                <div class="day-label">六</div>
                <div class="day-cell other-month">26</div>
                <div class="day-cell other-month">27</div>
                <div class="day-cell other-month">28</div>
                <div class="day-cell other-month">29</div>
                <div class="day-cell other-month">30</div>
                <div class="day-cell other-month">31</div>
                <div class="day-cell">1</div>
                <div class="day-cell">2</div>
                <div class="day-cell">3</div>
                <div class="day-cell">4</div>
                <div class="day-cell">5</div>
                <div class="day-cell">6</div>
                <div class="day-cell">7</div>
                <div class="day-cell">8</div>
                <div class="day-cell">9</div>
                <div class="day-cell">10</div>
                <div class="day-cell">11</div>
                <div class="day-cell">12</div>
                <div class="day-cell">13</div>
                <div class="day-cell">14</div>
                <div class="day-cell">15</div>
                <div class="day-cell">16</div>
                <div class="day-cell">17</div>
                <div class="day-cell">18</div>
                <div class="day-cell">19</div>
                <div class="day-cell">20</div>
                <div class="day-cell">21</div>
                <div class="day-cell">22</div>
                <div class="day-cell">23</div>
                <div class="day-cell">24</div>
                <div class="day-cell">25</div>
                <div class="day-cell">26</div>
                <div class="day-cell">27</div>
                <div class="day-cell">28</div>
                <div class="day-cell">29</div>
                <div class="day-cell">30</div>
                <div class="day-cell other-month">1</div>
                <div class="day-cell other-month">2</div>
                <div class="day-cell other-month">3</div>
                <div class="day-cell other-month">4</div>
                <div class="day-cell other-month">5</div>
              </div>
            </div>
          </div>
          <div class="section-panel">
            <h2>&#128279; 社交媒体</h2>
            <div class="social-links">
              <a class="social-link" href="#"
                ><span class="social-icon">&#127760;</span> 微博</a
              >
              <a class="social-link" href="#"
                ><span class="social-icon">&#128172;</span> 微信</a
              >
              <a class="social-link" href="#"
                ><span class="social-icon">&#128241;</span> 抖音</a
              >
              <a class="social-link" href="#"
                ><span class="social-icon">&#128250;</span> B站</a
              >
              <a class="social-link" href="#"
                ><span class="social-icon">&#128240;</span> 知乎</a
              >
              <a class="social-link" href="#"
                ><span class="social-icon">&#128231;</span> 小红书</a
              >
            </div>
          </div>
          <div class="ad-banner-small">
            <div class="ad-label">广告</div>
            <div
              class="ad-img"
              style="background: linear-gradient(135deg, #89f7fe, #66a6ff)"
            ></div>
            <div class="ad-text">云服务器 - 首年仅需99元</div>
          </div>
          <div class="ad-banner-small">
            <div class="ad-label">广告</div>
            <div
              class="ad-img"
              style="background: linear-gradient(135deg, #fddb92, #d1fdff)"
            ></div>
            <div class="ad-text">保险服务 - 保障全家</div>
          </div>
        </div>
      </div>
      <div class="ad-banner">
        <span class="ad-label">广告</span>
        <div
          class="ad-content"
          style="background: linear-gradient(135deg, #667eea, #764ba2)"
        >
          &#127881; 会员日活动 - 精选商品满减不停
        </div>
      </div>
    </div>
    <div class="third-party-scripts">
      <img src="https://ad.example.com/ad.js" width="1" height="1" alt="" />
      <img
        src="https://tracker.example.com/pixel.gif"
        width="1"
        height="1"
        alt=""
      />
      <img
        src="https://analytics.example.com/track"
        width="1"
        height="1"
        alt=""
      />
      <img src="https://ads.example.net/banner" width="1" height="1" alt="" />
      <img src="https://beacon.example.com/log" width="1" height="1" alt="" />
      <script src="https://ad.example.com/ad-sdk.js"></script>
      <script src="https://cdn.example.com/analytics.js"></script>
      <script src="https://tracker2.example.com/push.js"></script>
    </div>
    <div class="footer">
      <p>
        &copy; 2024 hao123 京ICP证000001号 | 关于hao123 | 联系我们 | 隐私政策
      </p>
    </div>
    <script>
      function test() {
        return true;
      }
    </script>
  </body>
</html>