<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta
    name="viewport"
    content="width=device-width, initial-scale=1.0"
  >

  <meta
    name="description"
    content="深圳市奥斯达通信有限公司企业官方网站"
  >

  <title>奥斯达通信｜企业通信与数字化服务</title>

  <link rel="stylesheet" href="css/main.css">
  <link rel="stylesheet" href="css/responsive.css">
  <link rel="stylesheet" href="css/chat-widget.css">

  <!-- 首页合作客户 Logo 专用样式 -->
  <style>
    .partners-logo-grid {
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 16px;
    }

    .partner-logo-card.partner-logo-image-card {
      min-width: 0;
      min-height: 138px; 
      padding: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      color: inherit;
      cursor: pointer;
      text-decoration: none;
      background: #ffffff;
      transition:
        transform 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease;
    }

    .partner-logo-card.partner-logo-image-card:hover {
      transform: translateY(-4px);
      border-color: #9fc4eb;
      box-shadow:
        0 18px 40px
        rgba(37, 76, 122, 0.11);
    }

    .partner-logo-card.partner-logo-image-card:focus-visible {
      outline: 3px solid #1769f3;
      outline-offset: 4px;
    }

    .partner-logo-image-card img {
      width: 100%;
      max-width: 170px;
      height: 72px;
      display: block;
      object-fit: contain;
      pointer-events: none;
      filter: none;
      opacity: 1;
      transition:
        transform 0.22s ease;
    }

    .partner-logo-image-card:hover img {
      transform: scale(1.04);
    }

    @media (max-width: 1100px) {
      .partners-logo-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }
    }

    @media (max-width: 820px) {
      .partners-logo-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }

    @media (max-width: 560px) {
      .partners-logo-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 11px;
      }

      .partner-logo-card.partner-logo-image-card {
        min-height: 108px;
        padding: 17px;
      }

      .partner-logo-image-card img {
        height: 56px;
      }
    }
  </style>

</head>

<body>

  <!-- ==============================
       网站顶部
  =============================== -->
  <header class="site-header">

    <div class="header-main container">

      <!-- 公司 Logo -->
      <a class="brand" href="index.html" aria-label="返回网站首页">

        <img
          class="brand-logo"
          src="images/logo/ostar-logo-icon.png"
          alt="奥斯达通信 Logo"
        >

        <span class="brand-name">
          <strong>奥斯达通信</strong>
          <small>OSTAR TELECOM</small>
        </span>

      </a>

      <!-- 搜索区域 -->
      <div class="header-search">

        <div class="search-box">
          <input
            id="siteSearchInput"
            type="search"
            placeholder="搜索新闻、服务、解决方案"
            aria-label="网站搜索"
          >

          <button
            id="siteSearchButton"
            type="button"
            aria-label="开始搜索"
          >
            <span>搜索</span>
          </button>
        </div>

        <div class="hot-search">
          <span class="hot-label">热门搜索：</span>

          <a href="services.html">互联网接入</a>
          <a href="services.html">IP-VPN</a>
          <a href="services.html">数据中心</a>
          <a href="news.html">数字化服务</a>
        </div>

      </div>

      <!-- 登录按钮 -->
      <div class="header-account">
        <a class="login-button" href="login.html">
          <span class="login-icon">↗</span>
          <span>登录</span>
        </a>
      </div>

    </div>

    <!-- 主导航 -->
    <nav class="main-navigation" aria-label="主导航">

      <div class="container navigation-inner">

        <a class="nav-link active" href="index.html">
          网站首页
        </a>

        <a class="nav-link" href="about.html">
          关于我们
        </a>

        <a class="nav-link" href="services.html">
          服务项目
        </a>

        <a class="nav-link" href="news.html">
          新闻动态
        </a>

        <a class="nav-link" href="cases.html">
          客户案例
        </a>

        <a class="nav-link" href="contact.html">
          联系方式
        </a>

      </div>

    </nav>

  </header>


  <main>

    <!-- ==============================
         首页首屏
    =============================== -->
    <section class="hero-section">

      <div class="hero-background-grid"></div>
      <div class="hero-glow hero-glow-one"></div>
      <div class="hero-glow hero-glow-two"></div>

      <div class="container hero-container">

        <!-- 左侧内容 -->
        <div class="hero-content">

          <div class="hero-label">
            <span class="hero-label-line"></span>
            企业通信与数字化服务
          </div>

          <h1>
            连接企业业务
            <span>创造数字价值</span>
          </h1>

          <p class="hero-description">
            深圳市奥斯达通信有限公司专注于企业通信网络、
            互联网接入、系统集成、通信工程及数字化服务，
            为不同规模的企业提供稳定、专业和持续的技术支持。
          </p>

          <div class="hero-actions">

            <a class="primary-button" href="services.html">
              查看服务项目
              <span>→</span>
            </a>

            <a class="secondary-button" href="contact.html">
              联系项目顾问
            </a>

          </div>

          <div class="hero-tags">
            <span>互联网接入</span>
            <span>SD-WAN</span>
            <span>系统集成</span>
            <span>通信工程</span>
          </div>

        </div>

        <!-- 右侧视觉卡片 -->
        <div class="hero-visual">

          <div class="network-circle network-circle-one"></div>
          <div class="network-circle network-circle-two"></div>

          <div class="network-card">

            <div class="network-card-header">

              <div>
                <span class="network-eyebrow">ENTERPRISE NETWORK</span>
                <h2>企业网络运营中心</h2>
              </div>

              <div class="network-status">
                <span class="status-dot"></span>
                运行正常
              </div>

            </div>

            <div class="chart-area">

              <div class="chart-line"></div>

              <div class="chart-bars">
                <span style="height: 42%"></span>
                <span style="height: 61%"></span>
                <span style="height: 50%"></span>
                <span style="height: 76%"></span>
                <span style="height: 68%"></span>
                <span style="height: 92%"></span>
                <span style="height: 81%"></span>
              </div>

            </div>

            <div class="network-services">

              <div>
                <strong>ISP</strong>
                <span>互联网接入</span>
              </div>

              <div>
                <strong>IDC</strong>
                <span>数据中心服务</span>
              </div>

              <div>
                <strong>IP-VPN</strong>
                <span>企业网络专线</span>
              </div>

            </div>

          </div>

          <div class="floating-card floating-card-one">
            <span>01</span>
            <strong>网络接入</strong>
          </div>

          <div class="floating-card floating-card-two">
            <span>02</span>
            <strong>系统集成</strong>
          </div>

          <div class="floating-card floating-card-three">
            <span>03</span>
            <strong>通信工程</strong>
          </div>

        </div>

      </div>

    </section>


    <!-- ==============================
         企业数据
    =============================== -->
    <section class="company-data">

      <div class="container company-data-grid">

        <article class="data-item">
          <strong>2004</strong>
          <span>公司成立</span>
        </article>

        <article class="data-item">
          <strong>高新技术企业</strong>
          <span>专业通信技术服务</span>
        </article>

        <article class="data-item">
          <strong>APNIC · CNNIC</strong>
          <span>地址分配联盟成员</span>
        </article>

        <article class="data-item">
          <strong>ISP · IDC · IP-VPN</strong>
          <span>电信增值业务资质</span>
        </article>

      </div>

    </section>
    <!-- ==============================
     行业解决方案
================================ -->
<section class="solutions-section section-block" id="solutions">

  <div class="container">

    <div class="section-heading section-heading-center">

      <span class="section-eyebrow">
        INDUSTRY SOLUTIONS
      </span>

      <h2>面向不同企业场景的通信解决方案</h2>

      <p>
        根据企业规模、业务结构和网络环境，
        提供从网络接入、系统集成到持续运维的一体化服务。
      </p>

    </div>

    <div class="solutions-grid">

      <article class="solution-card solution-card-featured">

        <div class="solution-top">

          <span class="solution-number">01</span>

          <span class="solution-status">
            核心服务
          </span>

        </div>

        <div class="solution-icon">
          ↗
        </div>

        <h3>企业互联网接入</h3>

        <p>
          为企业提供稳定、高速、安全的互联网专线，
          满足办公系统、云平台和业务应用的持续连接需求。
        </p>

        <ul>
          <li>企业宽带及互联网专线</li>
          <li>多运营商网络接入</li>
          <li>网络质量持续监控</li>
        </ul>

        <a href="services.html">
          查看解决方案
          <span>→</span>
        </a>

      </article>


      <article class="solution-card">

        <div class="solution-top">

          <span class="solution-number">02</span>

          <span class="solution-category">
            IDC
          </span>

        </div>

        <div class="solution-icon">
          ◫
        </div>

        <h3>数据中心服务</h3>

        <p>
          提供服务器托管、机柜资源、网络带宽和运行维护，
          为企业关键业务提供可靠的基础设施环境。
        </p>

        <ul>
          <li>服务器及机柜托管</li>
          <li>数据中心网络服务</li>
          <li>安全与运维支持</li>
        </ul>

        <a href="services.html">
          查看解决方案
          <span>→</span>
        </a>

      </article>


      <article class="solution-card">

        <div class="solution-top">

          <span class="solution-number">03</span>

          <span class="solution-category">
            NETWORK
          </span>

        </div>

        <div class="solution-icon">
          ⌘
        </div>

        <h3>系统集成与企业组网</h3>

        <p>
          根据企业组织结构和业务分布，
          建设统一、安全、可扩展的内部网络和跨区域通信体系。
        </p>

        <ul>
          <li>局域网与广域网建设</li>
          <li>SD-WAN及IP-VPN组网</li>
          <li>网络设备部署与调试</li>
        </ul>

        <a href="services.html">
          查看解决方案
          <span>→</span>
        </a>

      </article>


      <article class="solution-card">

        <div class="solution-top">

          <span class="solution-number">04</span>

          <span class="solution-category">
            ENGINEERING
          </span>

        </div>

        <div class="solution-icon">
          ◇
        </div>

        <h3>通信工程与技术服务</h3>

        <p>
          提供通信工程规划、安装施工、设备调试及后续维护，
          确保项目稳定交付和长期运行。
        </p>

        <ul>
          <li>通信工程设计与施工</li>
          <li>设备安装与系统调试</li>
          <li>故障处理及技术支持</li>
        </ul>

        <a href="services.html">
          查看解决方案
          <span>→</span>
        </a>

      </article>

    </div>

  </div>

</section>


<!-- ==============================
     公司介绍
================================ -->
<section class="about-preview section-block">

  <div class="container about-preview-grid">

    <div class="about-visual">

      <div class="about-visual-main">

        <span class="about-visual-label">
          SINCE 2004
        </span>

        <h3>
          深耕企业通信
          <br>
          构建可靠连接
        </h3>

        <p>
          从网络接入到数字化服务，
          奥斯达通信持续为企业客户提供专业支持。
        </p>

      </div>

      <div class="about-metric about-metric-one">

        <strong>20+</strong>

        <span>
          年行业服务经验
        </span>

      </div>

      <div class="about-metric about-metric-two">

        <strong>4</strong>

        <span>
          核心服务中心
        </span>

      </div>

      <div class="about-metric about-metric-three">

        <strong>7×24</strong>

        <span>
          技术响应支持
        </span>

      </div>

    </div>


    <div class="about-content">

      <span class="section-eyebrow">
        ABOUT OSTAR
      </span>

      <h2>
        专注通信网络与企业数字化服务
      </h2>

      <p>
        深圳市奥斯达通信有限公司成立于2004年，
        长期专注企业通信网络、互联网接入、数据中心服务、
        系统集成和通信工程。
      </p>

      <p>
        公司坚持以客户需求为导向，
        通过专业技术团队、规范服务流程和持续运维能力，
        为企业构建稳定、安全和可扩展的信息通信环境。
      </p>

      <div class="about-values">

        <div>
          <span>01</span>

          <strong>专业</strong>

          <small>
            专业技术团队与项目经验
          </small>
        </div>

        <div>
          <span>02</span>

          <strong>稳定</strong>

          <small>
            持续保障企业业务连接
          </small>
        </div>

        <div>
          <span>03</span>

          <strong>负责</strong>

          <small>
            完善的响应与服务机制
          </small>
        </div>

      </div>

      <a class="primary-button about-button" href="about.html">
        了解奥斯达通信
        <span>→</span>
      </a>

    </div>

  </div>

</section>


<!-- ==============================
     四大优势
================================ -->
<section class="advantages-section section-block">

  <div class="container">

    <div class="section-heading advantages-heading">

      <div>

        <span class="section-eyebrow">
          OUR ADVANTAGES
        </span>

        <h2>选择奥斯达通信的四大优势</h2>

      </div>

      <p>
        从资源、技术、服务到交付，
        为客户提供长期、稳定并可持续升级的通信服务。
      </p>

    </div>

    <div class="advantages-grid">

      <article class="advantage-card">

        <span class="advantage-number">
          01
        </span>

        <div class="advantage-icon">
          ◎
        </div>

        <h3>丰富的网络资源</h3>

        <p>
          结合多类型网络和通信资源，
          满足企业不同规模、不同地区和不同业务场景的连接需求。
        </p>

      </article>


      <article class="advantage-card">

        <span class="advantage-number">
          02
        </span>

        <div class="advantage-icon">
          ◈
        </div>

        <h3>专业的技术团队</h3>

        <p>
          具备通信网络、系统集成和工程实施经验，
          为项目规划、建设和运行提供技术保障。
        </p>

      </article>


      <article class="advantage-card">

        <span class="advantage-number">
          03
        </span>

        <div class="advantage-icon">
          ◌
        </div>

        <h3>完善的服务体系</h3>

        <p>
          建立从售前咨询、方案设计、项目实施到售后维护的完整服务流程。
        </p>

      </article>


      <article class="advantage-card">

        <span class="advantage-number">
          04
        </span>

        <div class="advantage-icon">
          ↗
        </div>

        <h3>持续的运维支持</h3>

        <p>
          持续关注网络质量和系统运行状态，
          快速响应企业在使用过程中出现的问题。
        </p>

      </article>

    </div>

  </div>

</section>


<!-- ==============================
     行业动态
================================ -->
<section class="home-news section-block">

  <div class="container">

    <div class="section-heading news-heading">

      <div>
        <span class="section-eyebrow">
          LATEST NEWS
        </span>

        <h2>了解奥斯达最新动态</h2>
      </div>

      <a class="section-more-link" href="news.html">
        查看全部新闻
        <span>→</span>
      </a>

    </div>

    <!-- Supabase 自动生成最新新闻 -->
    <div
    class="home-news-grid"
    id="homeNewsGrid"
    >
      <div class="home-news-loading">
        正在读取最新新闻……
      </div>
    </div>

  </div>

</section>


<!-- ==============================
     合作客户
================================ -->
<section class="partners-section section-block">

  <div class="container">

    <div class="section-heading section-heading-center">

      <span class="section-eyebrow">
        TRUSTED PARTNERS
      </span>

      <h2>合作客户与生态伙伴</h2>

      <p>
        奥斯达通信与通信运营商、网络设备厂商、
        企业软件及人工智能领域的合作伙伴保持业务协作，
        共同支持企业客户的通信网络和数字化建设。
      </p>

    </div>


    <div class="partners-logo-grid">

      <!-- 中国电信 -->
      <a
        class="partner-logo-card partner-logo-image-card"
        href="http://www.baidu.com/s?wd=中国电信+百度百科"
        target="_blank"
        rel="noopener noreferrer"
        aria-label="在百度查看中国电信介绍"
        title="查看中国电信介绍"
      >
        <img
          src="images/customers/ChinaTelecom.png"
          alt="中国电信"
          loading="lazy"
        >
      </a>


      <!-- 中国联通 -->
      <a
        class="partner-logo-card partner-logo-image-card"
        href="http://www.baidu.com/s?wd=中国联通+百度百科"
        target="_blank"
        rel="noopener noreferrer"
        aria-label="在百度查看中国联通介绍"
        title="查看中国联通介绍"
      >
        <img
          src="images/customers/ChinaUnicom.png"
          alt="中国联通"
          loading="lazy"
        >
      </a>


      <!-- 中国移动 -->
      <a
        class="partner-logo-card partner-logo-image-card"
        href="http://www.baidu.com/s?wd=中国移动+百度百科"
        target="_blank"
        rel="noopener noreferrer"
        aria-label="在百度查看中国移动介绍"
        title="查看中国移动介绍"
      >
        <img
          src="images/customers/ChinaMobile.png"
          alt="中国移动"
          loading="lazy"
        >
      </a>


      <!-- 中国铁通 -->
      <a
        class="partner-logo-card partner-logo-image-card"
        href="http://www.baidu.com/s?wd=中国铁通集团有限公司+百度百科"
        target="_blank"
        rel="noopener noreferrer"
        aria-label="在百度查看中国铁通介绍"
        title="查看中国铁通介绍"
      >
        <img
          src="images/customers/CHINA-TIETONG.png"
          alt="中国铁通"
          loading="lazy"
        >
      </a>


      <!-- 华为 -->
      <a
        class="partner-logo-card partner-logo-image-card"
        href="http://www.baidu.com/s?wd=华为技术有限公司+百度百科"
        target="_blank"
        rel="noopener noreferrer"
        aria-label="在百度查看华为介绍"
        title="查看华为介绍"
      >
        <img
          src="images/customers/HUAWEI.png"
          alt="华为"
          loading="lazy"
        >
      </a>


      <!-- 新华三 -->
      <a
        class="partner-logo-card partner-logo-image-card"
        href="http://www.baidu.com/s?wd=新华三集团+百度百科"
        target="_blank"
        rel="noopener noreferrer"
        aria-label="在百度查看新华三介绍"
        title="查看新华三介绍"
      >
        <img
          src="images/customers/H3C.png"
          alt="新华三 H3C"
          loading="lazy"
        >
      </a>


      <!-- 中兴通讯 -->
      <a
        class="partner-logo-card partner-logo-image-card"
        href="http://www.baidu.com/s?wd=中兴通讯股份有限公司+百度百科"
        target="_blank"
        rel="noopener noreferrer"
        aria-label="在百度查看中兴通讯介绍"
        title="查看中兴通讯介绍"
      >
        <img
          src="images/customers/ZTE.png"
          alt="中兴通讯 ZTE"
          loading="lazy"
        >
      </a>


      <!-- 松下 -->
      <a
        class="partner-logo-card partner-logo-image-card"
        href="http://www.baidu.com/s?wd=松下电器+百度百科"
        target="_blank"
        rel="noopener noreferrer"
        aria-label="在百度查看松下介绍"
        title="查看松下介绍"
      >
        <img
          src="images/customers/Panasonic.png"
          alt="松下 Panasonic"
          loading="lazy"
        >
      </a>


      <!-- 金蝶 -->
      <a
        class="partner-logo-card partner-logo-image-card"
        href="http://www.baidu.com/s?wd=金蝶国际软件集团+百度百科"
        target="_blank"
        rel="noopener noreferrer"
        aria-label="在百度查看金蝶介绍"
        title="查看金蝶介绍"
      >
        <img
          src="images/customers/Kingdee.png"
          alt="金蝶"
          loading="lazy"
        >
      </a>


      <!-- 联想 -->
      <a
        class="partner-logo-card partner-logo-image-card"
        href="http://www.baidu.com/s?wd=联想集团+百度百科"
        target="_blank"
        rel="noopener noreferrer"
        aria-label="在百度查看联想介绍"
        title="查看联想介绍"
      >
        <img
          src="images/customers/Lenovo.png"
          alt="联想"
          loading="lazy"
        >
      </a>


      <!-- 旷视 -->
      <a
        class="partner-logo-card partner-logo-image-card"
        href="http://www.baidu.com/s?wd=旷视科技+百度百科"
        target="_blank"
        rel="noopener noreferrer"
        aria-label="在百度查看旷视科技介绍"
        title="查看旷视科技介绍"
      >
        <img
          src="images/customers/MEGVII.jpg"
          alt="旷视科技 MEGVII"
          loading="lazy"
        >
      </a>


      <!-- Panabit -->
      <a
        class="partner-logo-card partner-logo-image-card"
        href="http://www.baidu.com/s?wd=Panabit派网+百度百科"
        target="_blank"
        rel="noopener noreferrer"
        aria-label="在百度查看Panabit介绍"
        title="查看Panabit介绍"
      >
        <img
          src="images/customers/panabit.png"
          alt="派网 Panabit"
          loading="lazy"
        >
      </a>


      <!-- 锐捷 -->
      <a
        class="partner-logo-card partner-logo-image-card"
        href="http://www.baidu.com/s?wd=锐捷网络+百度百科"
        target="_blank"
        rel="noopener noreferrer"
        aria-label="在百度查看锐捷网络介绍"
        title="查看锐捷网络介绍"
      >
        <img
          src="images/customers/Rujie.png"
          alt="锐捷网络"
          loading="lazy"
        >
      </a>


      <!-- 商汤 -->
      <a
        class="partner-logo-card partner-logo-image-card"
        href="http://www.baidu.com/s?wd=商汤科技+百度百科"
        target="_blank"
        rel="noopener noreferrer"
        aria-label="在百度查看商汤科技介绍"
        title="查看商汤科技介绍"
      >
        <img
          src="images/customers/sensetime.png"
          alt="商汤科技 SenseTime"
          loading="lazy"
        >
      </a>


      <!-- TCL -->
      <a
        class="partner-logo-card partner-logo-image-card"
        href="http://www.baidu.com/s?wd=TCL科技集团+百度百科"
        target="_blank"
        rel="noopener noreferrer"
        aria-label="在百度查看TCL介绍"
        title="查看TCL介绍"
      >
        <img
          src="images/customers/TCL.png"
          alt="TCL"
          loading="lazy"
        >
      </a>

    </div>


    <div class="partners-bottom">

      <span>
        查看更多客户服务场景与项目解决方案
      </span>

      <a href="cases.html">
        查看客户案例
        <span>→</span>
      </a>

    </div>

  </div>

</section>


<!-- ==============================
     联系我们
================================ -->
<section class="home-contact-section">

  <div class="container">

    <div class="home-contact-card">

      <div class="contact-card-decoration contact-decoration-one"></div>
      <div class="contact-card-decoration contact-decoration-two"></div>

      <div class="home-contact-content">

        <span class="contact-eyebrow">
          CONTACT OSTAR
        </span>

        <h2>
          为您的企业建立更加稳定的通信连接
        </h2>

        <p>
          无论您需要互联网专线、企业组网、数据中心服务、
          系统集成还是通信工程支持，我们都将为您提供专业方案。
        </p>

      </div>

      <div class="home-contact-actions">

        <a class="contact-primary-button" href="contact.html">
          联系项目顾问
          <span>→</span>
        </a>

        <a class="contact-secondary-button" href="services.html">
          浏览服务项目
        </a>

      </div>

    </div>

  </div>

</section>

</main>
<!-- ==============================
     网站底部
================================ -->
<footer class="site-footer">

  <div class="container footer-main">

    <div class="footer-brand-column">

      <a class="footer-brand" href="index.html">

        <img
          src="images/logo/ostar-logo-icon.png"
          alt="奥斯达通信 Logo"
        >

        <div>
          <strong>奥斯达通信</strong>
          <span>OSTAR TELECOM</span>
        </div>

      </a>

      <p>
        专注企业通信网络、互联网接入、系统集成、
        通信工程及数字化服务。
      </p>

    </div>


    <div class="footer-navigation">

      <div>
        <h3>网站导航</h3>
        <a href="index.html">网站首页</a>
        <a href="about.html">关于我们</a>
        <a href="services.html">服务项目</a>
      </div>

      <div>
        <h3>内容中心</h3>
        <a href="news.html">新闻动态</a>
        <a href="cases.html">客户案例</a>
        <a href="contact.html">联系方式</a>
      </div>

      <div>
        <h3>新闻分类</h3>
        <a href="news-company.html">公司新闻</a>
        <a href="news-industry.html">行业新闻</a>
        <a href="news-media.html">媒体报道</a>
      </div>

    </div>


    <div class="footer-contact">

      <span class="footer-small-title">
        BUSINESS CONTACT
      </span>

      <h3>联系我们</h3>

      <p>
        深圳市南山区西丽街道曙光社区中山园路
        TCL国际E城D1栋AB电梯603
      </p>

      <a href="tel:13823162880">
        电话：13823162880
      </a>

      <a href="mailto:sherry9988@139.com">
        邮箱：sherry9988@139.com
      </a>

      <a
        href="http://51shopz.com.cn"
        target="_blank"
        rel="noopener noreferrer"
      >
        官网：51shopz.com.cn
      </a>

    </div>

  </div>


  <div class="footer-bottom">

    <div class="container footer-bottom-inner">

      <span>
        © 2026 深圳市奥斯达通信有限公司  服务备案号:粤ICP备2024274865号-1 
      </span>

      <div>
        <a href="login.html">用户登录</a>
        <a href="admin.html">管理员入口</a>
      </div>

    </div>

  </div>

</footer>




<!-- ========================================
     奥斯达在线客服
======================================== -->
<div
  class="customer-service-widget"
  id="customerServiceWidget"
>

  <!-- 右下角客服入口 -->
  <button
    class="customer-service-launcher"
    id="customerServiceLauncher"
    type="button"
    aria-label="打开在线客服"
  >
    <span class="customer-service-icon">
      💬
    </span>

    <span class="customer-service-label">
      在线客服
    </span>

    <i
      class="customer-service-notification"
      id="customerServiceNotification"
      hidden
    >
      1
    </i>
  </button>


  <!-- 客服聊天窗口 -->
  <section
    class="customer-service-window"
    id="customerServiceWindow"
    aria-label="奥斯达在线客服"
    hidden
  >

    <!-- 顶部 -->
    <header class="customer-service-header">

      <div>
        <strong>
          奥斯达智能客服
        </strong>

        <span id="customerServiceStatus">
          AI客服在线
        </span>
      </div>

      <button
        id="customerServiceClose"
        type="button"
        aria-label="关闭客服窗口"
      >
        ×
      </button>

    </header>


    <!-- 聊天消息 -->
    <div
      class="customer-service-messages"
      id="customerServiceMessages"
      aria-live="polite"
    >

      <div class="chat-message chat-message-ai">

        <span class="chat-avatar">
          奥
        </span>

        <p>
          您好，我是奥斯达智能客服，
          很高兴为您服务！请问有什么可以帮助您？
        </p>

      </div>


      <div class="chat-message chat-message-ai">

        <span class="chat-avatar">
          奥
        </span>

        <p>
          您可以咨询互联网接入、企业组网、
          通信工程、系统集成及运维服务。
        </p>

      </div>

    </div>


    <!-- 转人工 -->
    <div class="customer-service-actions">

      <button
        id="transferToHumanButton"
        type="button"
      >
        👤 转人工客服
      </button>

    </div>


    <!-- 输入框 -->
    <form
      class="customer-service-input"
      id="customerServiceForm"
    >

      <textarea
        id="customerServiceInput"
        rows="1"
        maxlength="1000"
        placeholder="请输入您想咨询的问题"
        aria-label="输入咨询内容"
        required
      ></textarea>

      <button type="submit">
        发送
      </button>

    </form>

  </section>




  <!-- Supabase 脚本顺序不能改变 -->
<script src="http://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
<script src="js/supabase-config.js"></script>

<!-- 首页功能 -->
<script src="js/main.js"></script>
<script src="js/home-news.js"></script>
<script src="js/search.js"></script>
<script src="js/chat-widget.js"></script>

</div>
</body>
</html>
