cangku/frontend/index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="preconnect" href="https://img.alicdn.com" />
    <link rel="preload" as="image" href="https://img.alicdn.com/imgextra/i1/O1CN01f0AXSF1uzW0EYAU4i_!!6000000006108-2-tps-4000-900.png" fetchpriority="high" />
    <link rel="icon" type="image/png" href="https://s3.jiansun.vip/gongxiangpan/logos/1775097467497-1d6a81b8a76a.png" />
    <link rel="apple-touch-icon" href="https://s3.jiansun.vip/gongxiangpan/logos/1775097467497-1d6a81b8a76a.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="application-name" content="拼多多自动化运营平台" />
    <meta name="description" content="数据分析平台" />
    <meta property="og:type" content="website" />
    <meta property="og:title" content="拼多多自动化运营平台" />
    <meta property="og:description" content="数据分析平台" />
    <meta property="og:url" content="https://pddg.jiansuntuzhi.cn" />
    <meta property="og:image" content="https://s3.jiansun.vip/gongxiangpan/logos/1775097467497-1d6a81b8a76a.png" />
    <meta name="twitter:card" content="summary" />
    <meta name="twitter:title" content="拼多多自动化运营平台" />
    <meta name="twitter:description" content="数据分析平台" />
    <title>拼多多自动化运营平台</title>
    <script>
      if (/^\/(login|callback)(\/|$)/.test(window.location.pathname)) {
        document.documentElement.classList.add('boot-auth-route');
      }
    </script>
    <style>
      html,
      body,
      #root {
        min-height: 100%;
      }

      body {
        margin: 0;
        background: url("https://img.alicdn.com/imgextra/i1/O1CN01f0AXSF1uzW0EYAU4i_!!6000000006108-2-tps-4000-900.png") top center / 100% auto no-repeat, #e6e6e6;
        font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      }

      .boot-shell {
        display: flex;
        min-height: 100vh;
      }

      .boot-sidebar {
        width: 260px;
        flex: 0 0 260px;
        padding: 16px 8px 12px;
        border-right: 1px solid #e6e6e6;
        background: #fff;
        box-sizing: border-box;
      }

      .boot-brand,
      .boot-nav-item {
        display: flex;
        height: 36px;
        align-items: center;
        gap: 10px;
        padding: 0 10px;
      }

      .boot-brand {
        height: 52px;
        margin-bottom: 12px;
      }

      .boot-content {
        flex: 1;
        min-width: 0;
        padding: 16px;
        box-sizing: border-box;
      }

      .boot-panel {
        display: grid;
        gap: 16px;
        min-height: 360px;
        padding: 20px;
        border: 1px solid #e6e6e6;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.92);
        box-sizing: border-box;
      }

      .boot-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
      }

      .boot-card {
        display: grid;
        gap: 12px;
        min-height: 126px;
        padding: 16px;
        border: 1px solid #f0f0f0;
        border-radius: 8px;
        background: #fff;
        box-sizing: border-box;
      }

      .boot-auth-route .boot-shell {
        align-items: center;
        justify-content: flex-end;
        padding: 112px clamp(112px, 9.2vw, 176px) 58px clamp(64px, 6vw, 112px);
        background:
          linear-gradient(90deg, rgba(232, 248, 255, 0.04), rgba(236, 249, 255, 0.22)),
          url("/login-hero-blue.jpg") left center / cover no-repeat,
          #e6e6e6;
        box-sizing: border-box;
      }

      .boot-auth-route .boot-sidebar {
        display: none;
      }

      .boot-auth-route .boot-content {
        width: min(405px, calc(100vw - 40px));
        flex: 0 1 405px;
        padding: 0;
        box-sizing: border-box;
      }

      .boot-auth-route .boot-panel {
        min-height: 520px;
        border-color: rgba(255, 255, 255, 0.72);
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.94);
        box-shadow: 0 18px 48px rgba(21, 76, 150, 0.14);
        backdrop-filter: blur(18px);
      }

      .boot-auth-route .boot-panel > .boot-line:nth-child(1) {
        width: 140px !important;
        height: 22px !important;
      }

      .boot-auth-route .boot-panel > .boot-line:nth-child(2) {
        width: 100% !important;
        height: 40px !important;
        margin-top: 34px;
        border-radius: 8px;
      }

      .boot-auth-route .boot-grid {
        display: none;
      }

      .boot-line,
      .boot-dot {
        position: relative;
        overflow: hidden;
        background: linear-gradient(90deg, #eef1f5 0%, #f7f8fb 44%, #eef1f5 100%);
      }

      .boot-line {
        height: 16px;
        border-radius: 9999px;
      }

      .boot-dot {
        width: 32px;
        height: 32px;
        flex: 0 0 32px;
        border-radius: 4px;
      }

      .boot-dot.is-small {
        width: 16px;
        height: 16px;
        flex-basis: 16px;
      }

      .boot-line::after,
      .boot-dot::after {
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.72), transparent);
        content: "";
        transform: translateX(-100%);
        animation: boot-shimmer 1.4s ease-in-out infinite;
      }

      @keyframes boot-shimmer {
        100% {
          transform: translateX(100%);
        }
      }

      @media (max-width: 900px) {
        .boot-sidebar {
          width: 48px;
          flex-basis: 48px;
        }

        .boot-sidebar .boot-line {
          display: none;
        }

        .boot-grid {
          grid-template-columns: 1fr;
        }
      }
    </style>
  </head>
  <body>
    <div id="root">
      <div class="boot-shell" aria-busy="true">
        <aside class="boot-sidebar">
          <div class="boot-brand"><span class="boot-dot"></span><span class="boot-line" style="width: 132px"></span></div>
          <div class="boot-nav-item"><span class="boot-dot is-small"></span><span class="boot-line" style="width: 74%"></span></div>
          <div class="boot-nav-item"><span class="boot-dot is-small"></span><span class="boot-line" style="width: 58%"></span></div>
          <div class="boot-nav-item"><span class="boot-dot is-small"></span><span class="boot-line" style="width: 66%"></span></div>
          <div class="boot-nav-item"><span class="boot-dot is-small"></span><span class="boot-line" style="width: 72%"></span></div>
          <div class="boot-nav-item"><span class="boot-dot is-small"></span><span class="boot-line" style="width: 62%"></span></div>
          <div class="boot-nav-item"><span class="boot-dot is-small"></span><span class="boot-line" style="width: 68%"></span></div>
        </aside>
        <main class="boot-content">
          <section class="boot-panel">
            <span class="boot-line" style="width: 180px; height: 24px"></span>
            <span class="boot-line" style="width: min(520px, 62%); height: 32px"></span>
            <div class="boot-grid">
              <div class="boot-card"><span class="boot-line" style="width: 46%"></span><span class="boot-line" style="width: 62%; height: 28px"></span><span class="boot-line" style="width: 74%; height: 14px"></span></div>
              <div class="boot-card"><span class="boot-line" style="width: 52%"></span><span class="boot-line" style="width: 58%; height: 28px"></span><span class="boot-line" style="width: 70%; height: 14px"></span></div>
              <div class="boot-card"><span class="boot-line" style="width: 44%"></span><span class="boot-line" style="width: 64%; height: 28px"></span><span class="boot-line" style="width: 68%; height: 14px"></span></div>
            </div>
          </section>
        </main>
      </div>
    </div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>