dtm
/
dtm_vue


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705
							<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>DTM 业务监测版块预览</title>
  <style>
    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
      background: #eef3fb;
      color: #17243b;
    }

    .preview-shell {
      max-width: 1440px;
      margin: 0 auto;
      padding: 28px;
    }

    .topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      margin-bottom: 22px;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      font-weight: 800;
      color: #101b33;
      font-size: 18px;
    }

    .brand-mark {
      width: 42px;
      height: 42px;
      border-radius: 14px;
      background: linear-gradient(145deg, #7935f5 0%, #6028ee 100%);
      color: #fff;
      display: grid;
      place-items: center;
      box-shadow: 0 14px 28px rgba(99, 50, 236, 0.22);
    }

    .nav-pills {
      display: flex;
      gap: 8px;
      padding: 4px;
      border-radius: 16px;
      background: #fff;
      box-shadow: 0 14px 30px rgba(42, 61, 115, 0.08);
    }

    .nav-pills a {
      padding: 10px 16px;
      border-radius: 12px;
      color: #6e778b;
      font-size: 14px;
      font-weight: 700;
      text-decoration: none;
    }

    .nav-pills a.active {
      background: #6267f2;
      color: #fff;
    }

    .hero {
      margin-bottom: 24px;
      padding: 30px 34px;
      border-radius: 26px;
      background: linear-gradient(110deg, #ffffff 0%, #f7f9ff 56%, #eaf0ff 100%);
      box-shadow: 0 20px 45px rgba(42, 61, 115, 0.08);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }

    .eyebrow {
      margin: 0 0 8px;
      color: #6267f2;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .5px;
      text-transform: uppercase;
    }

    h1,
    h2,
    h3,
    p {
      margin-top: 0;
    }

    .hero h1 {
      margin-bottom: 10px;
      color: #101b33;
      font-size: 32px;
      line-height: 1.2;
    }

    .hero p:last-child {
      max-width: 700px;
      margin-bottom: 0;
      color: #7b8498;
      line-height: 1.8;
    }

    .hero-visual {
      min-width: 174px;
      height: 112px;
      border-radius: 24px;
      background: #fff;
      box-shadow: 0 18px 40px rgba(91, 105, 247, 0.18);
      display: flex;
      align-items: flex-end;
      justify-content: center;
      gap: 10px;
      padding: 22px;
    }

    .bar {
      width: 12px;
      border-radius: 999px;
      background: #ffad55;
    }

    .bar:nth-child(1) { height: 36px; }
    .bar:nth-child(2) { height: 60px; background: #6267f2; }
    .bar:nth-child(3) { height: 46px; }
    .bar:nth-child(4) { height: 72px; background: #ef4c43; }

    .section {
      margin-bottom: 30px;
    }

    .section-header {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 20px;
      margin: 4px 0 16px;
    }

    .section-header h2 {
      margin-bottom: 4px;
      color: #101b33;
      font-size: 24px;
    }

    .section-header p {
      margin-bottom: 0;
      color: #8a93a6;
    }

    .filter-card {
      margin-bottom: 18px;
      padding: 16px 18px;
      border-radius: 22px;
      background: #fff;
      box-shadow: 0 16px 36px rgba(38, 51, 96, 0.06);
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      align-items: center;
    }

    .field {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 3px;
      border-radius: 15px;
      background: #f6f8ff;
      color: #5d667a;
      font-size: 13px;
      font-weight: 700;
    }

    .segmented span,
    .date-chip,
    .btn {
      height: 32px;
      padding: 0 14px;
      border-radius: 11px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      white-space: nowrap;
    }

    .segmented span.active {
      background: #6267f2;
      color: #fff;
      box-shadow: 0 8px 18px rgba(98, 103, 242, 0.22);
    }

    .date-chip {
      min-width: 300px;
      background: #fff;
      color: #29364f;
      box-shadow: inset 0 0 0 1px rgba(98, 103, 242, 0.12);
      justify-content: space-between;
    }

    .btn {
      border: 0;
      background: #f6f8ff;
      color: #6e778b;
      font-weight: 800;
    }

    .btn.primary {
      background: #6267f2;
      color: #fff;
      box-shadow: 0 8px 18px rgba(98, 103, 242, 0.22);
    }

    .btn.warn {
      background: #fff6e8;
      color: #f39a20;
    }

    .grid {
      display: grid;
      gap: 18px;
    }

    .kpi-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      margin-bottom: 18px;
    }

    .kpi-card {
      min-height: 142px;
      padding: 20px;
      border-radius: 20px;
      background: #fff;
      box-shadow: 0 16px 34px rgba(37, 50, 88, 0.08);
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
    }

    .kpi-card::after {
      content: "";
      position: absolute;
      top: -36px;
      right: -30px;
      width: 108px;
      height: 108px;
      border-radius: 50%;
      background: rgba(98, 103, 242, 0.1);
    }

    .kpi-card.primary {
      background: linear-gradient(145deg, #7935f5 0%, #6028ee 100%);
      color: #fff;
      box-shadow: 0 20px 36px rgba(99, 50, 236, 0.24);
    }

    .kpi-icon {
      position: absolute;
      top: 18px;
      left: 20px;
      width: 44px;
      height: 44px;
      border-radius: 15px;
      background: #f1efff;
      color: #6267f2;
      display: grid;
      place-items: center;
      font-weight: 900;
    }

    .primary .kpi-icon {
      background: #fff;
      color: #6267f2;
    }

    .kpi-label {
      margin-bottom: 8px;
      color: #7b8498;
      font-size: 13px;
    }

    .primary .kpi-label,
    .primary .kpi-hint,
    .primary .kpi-value {
      color: #fff;
    }

    .kpi-value {
      color: #121d35;
      font-size: 27px;
      font-weight: 900;
      line-height: 1.2;
    }

    .kpi-hint {
      margin-top: 10px;
      color: #a0a8b8;
      font-size: 12px;
    }

    .two-col {
      grid-template-columns: minmax(0, 1.4fr) minmax(320px, .6fr);
    }

    .card {
      border-radius: 22px;
      background: #fff;
      box-shadow: 0 18px 42px rgba(42, 61, 115, 0.08);
      padding: 22px;
    }

    .card h3 {
      margin-bottom: 6px;
      color: #101b33;
      font-size: 18px;
    }

    .card-subtitle {
      margin-bottom: 18px;
      color: #8a93a6;
      font-size: 12px;
    }

    table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
      overflow: hidden;
      border-radius: 14px;
      font-size: 13px;
    }

    th {
      padding: 13px 14px;
      background: #f8f9fd;
      color: #697287;
      text-align: left;
      font-weight: 900;
    }

    td {
      padding: 14px;
      border-bottom: 1px solid #eef1f7;
      color: #29364f;
    }

    tr:last-child td {
      border-bottom: 0;
    }

    .rank-list {
      display: grid;
      gap: 12px;
    }

    .rank-item {
      display: grid;
      grid-template-columns: 34px minmax(0, 1fr) auto;
      gap: 10px;
      align-items: center;
      padding: 11px 0;
      border-bottom: 1px solid #f0f2f7;
    }

    .rank-item:last-child {
      border-bottom: 0;
    }

    .rank-index {
      width: 28px;
      height: 28px;
      border-radius: 10px;
      background: #f1efff;
      color: #6267f2;
      display: grid;
      place-items: center;
      font-weight: 900;
    }

    .rank-name {
      color: #1b2740;
      font-weight: 800;
    }

    .rank-meta {
      margin-top: 4px;
      color: #9aa3b4;
      font-size: 12px;
    }

    .rank-value {
      color: #101b33;
      font-weight: 900;
    }

    .mini-chart {
      height: 260px;
      display: flex;
      align-items: end;
      gap: 14px;
      padding: 20px 10px 4px;
      border-radius: 18px;
      background: #f8f9fd;
    }

    .mini-chart span {
      flex: 1;
      min-width: 20px;
      border-radius: 12px 12px 6px 6px;
      background: linear-gradient(180deg, #6267f2, #8a5cf6);
      position: relative;
    }

    .mini-chart span:nth-child(even) {
      background: linear-gradient(180deg, #ffad55, #f39a20);
    }

    .supplier-layout {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .supplier-card {
      min-height: 160px;
      padding: 22px;
      border-radius: 20px;
      background: #fff;
      box-shadow: 0 16px 34px rgba(37, 50, 88, 0.08);
    }

    .supplier-card h3 {
      margin-bottom: 12px;
      color: #101b33;
    }

    .score {
      margin-bottom: 12px;
      color: #6267f2;
      font-size: 34px;
      font-weight: 900;
    }

    .tag-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .tag {
      padding: 6px 10px;
      border-radius: 999px;
      background: #f1efff;
      color: #6267f2;
      font-size: 12px;
      font-weight: 800;
    }

    .footer-note {
      color: #8a93a6;
      font-size: 12px;
      line-height: 1.7;
      text-align: center;
      margin: 22px 0 0;
    }

    @media (max-width: 1100px) {
      .kpi-grid,
      .supplier-layout {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .two-col {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 720px) {
      .preview-shell {
        padding: 16px;
      }

      .topbar,
      .hero,
      .section-header {
        align-items: flex-start;
        flex-direction: column;
      }

      .hero-visual {
        width: 100%;
      }

      .kpi-grid,
      .supplier-layout {
        grid-template-columns: 1fr;
      }

      .date-chip {
        min-width: 220px;
      }
    }
  </style>
</head>
<body>
  <main class="preview-shell">
    <div class="topbar">
      <div class="brand">
        <div class="brand-mark">DTM</div>
        <span>业务监测驾驶舱预览</span>
      </div>
      <nav class="nav-pills">
        <a href="#order" class="active">订单监测</a>
        <a href="#supply">供应监测</a>
      </nav>
    </div>

    <section class="hero">
      <div>
        <p class="eyebrow">DTM Data Monitor</p>
        <h1>订单与供应链核心业务监测</h1>
        <p>面向经营分析、渠道跟踪、供应商对比与付款计划，统一采用轻量化后台风格，重点突出指标、趋势、明细和异常。</p>
      </div>
      <div class="hero-visual" aria-hidden="true">
        <span class="bar"></span>
        <span class="bar"></span>
        <span class="bar"></span>
        <span class="bar"></span>
      </div>
    </section>

    <section id="order" class="section">
      <div class="section-header">
        <div>
          <h2>订单监测</h2>
          <p>店铺运营、商品价值、渠道表现和订单价值统一分析。</p>
        </div>
      </div>

      <div class="filter-card">
        <div class="field segmented">
          <strong>统计周期</strong>
          <span>日报</span>
          <span class="active">月报</span>
          <span>年报</span>
          <span>全量</span>
        </div>
        <div class="field">
          <strong>日期范围</strong>
          <span class="date-chip"><span>2022-12-01</span><span>至</span><span>2022-12-31</span></span>
          <button class="btn primary">查询</button>
          <button class="btn">重置</button>
          <button class="btn warn">导出 Excel</button>
        </div>
      </div>

      <div class="grid kpi-grid">
        <div class="kpi-card primary">
          <div class="kpi-icon">¥</div>
          <div class="kpi-label">销售额</div>
          <div class="kpi-value">¥153,298.58</div>
          <div class="kpi-hint">当前周期累计销售</div>
        </div>
        <div class="kpi-card">
          <div class="kpi-icon">单</div>
          <div class="kpi-label">订单量</div>
          <div class="kpi-value">488</div>
          <div class="kpi-hint">有效订单总数</div>
        </div>
        <div class="kpi-card">
          <div class="kpi-icon">件</div>
          <div class="kpi-label">销量</div>
          <div class="kpi-value">1,228</div>
          <div class="kpi-hint">商品销售件数</div>
        </div>
        <div class="kpi-card">
          <div class="kpi-icon">客</div>
          <div class="kpi-label">平均客单价</div>
          <div class="kpi-value">¥314.14</div>
          <div class="kpi-hint">销售额 / 订单量</div>
        </div>
      </div>

      <div class="grid two-col">
        <div class="card">
          <h3>渠道明细</h3>
          <p class="card-subtitle">2022-12-01 至 2022-12-31</p>
          <table>
            <thead>
              <tr>
                <th>平台</th>
                <th>渠道/店铺</th>
                <th>订单量</th>
                <th>销量</th>
                <th>销售额</th>
                <th>客单价</th>
              </tr>
            </thead>
            <tbody>
              <tr><td>京东自营</td><td>京东自营</td><td>60</td><td>338</td><td>¥44,176.81</td><td>¥736.28</td></tr>
              <tr><td>佳奥旗舰店</td><td>佳奥旗舰店</td><td>63</td><td>184</td><td>¥32,623.00</td><td>¥517.83</td></tr>
              <tr><td>传统电商平台</td><td>爱梦芽008</td><td>16</td><td>35</td><td>¥9,140.00</td><td>¥571.25</td></tr>
              <tr><td>传统电商平台</td><td>佳奥家居专营店</td><td>32</td><td>95</td><td>¥7,299.00</td><td>¥228.09</td></tr>
            </tbody>
          </table>
        </div>

        <aside class="card">
          <h3>销售 Top 5</h3>
          <p class="card-subtitle">按销售额排序</p>
          <div class="rank-list">
            <div class="rank-item"><div class="rank-index">1</div><div><div class="rank-name">京东自营</div><div class="rank-meta">京东自营</div></div><div class="rank-value">¥44,176.81</div></div>
            <div class="rank-item"><div class="rank-index">2</div><div><div class="rank-name">佳奥旗舰店</div><div class="rank-meta">旗舰渠道</div></div><div class="rank-value">¥32,623.00</div></div>
            <div class="rank-item"><div class="rank-index">3</div><div><div class="rank-name">爱梦芽008</div><div class="rank-meta">传统电商</div></div><div class="rank-value">¥9,140.00</div></div>
            <div class="rank-item"><div class="rank-index">4</div><div><div class="rank-name">佳奥家居专营店</div><div class="rank-meta">传统电商</div></div><div class="rank-value">¥7,299.00</div></div>
            <div class="rank-item"><div class="rank-index">5</div><div><div class="rank-name">平台运营</div><div class="rank-meta">华东</div></div><div class="rank-value">¥4,904.00</div></div>
          </div>
        </aside>
      </div>
    </section>

    <section id="supply" class="section">
      <div class="section-header">
        <div>
          <h2>供应监测</h2>
          <p>供应商查询、核心指标对比、付款计划和综合评分统一呈现。</p>
        </div>
      </div>

      <div class="filter-card">
        <div class="field">
          <strong>供应商名称</strong>
          <span class="date-chip"><span>佳奥</span><span></span><span>全部匹配</span></span>
        </div>
        <div class="field">
          <strong>日期范围</strong>
          <span class="date-chip"><span>2025-01-01</span><span>至</span><span>2025-05-14</span></span>
          <button class="btn primary">查询</button>
          <button class="btn">重置</button>
        </div>
      </div>

      <div class="grid supplier-layout">
        <div class="supplier-card">
          <h3>供应商总数</h3>
          <div class="score">156</div>
          <div class="tag-row"><span class="tag">实时</span><span class="tag">覆盖采购数据</span></div>
        </div>
        <div class="supplier-card">
          <h3>平均综合得分</h3>
          <div class="score">82.5</div>
          <div class="tag-row"><span class="tag">成本</span><span class="tag">交付</span><span class="tag">账期</span></div>
        </div>
        <div class="supplier-card">
          <h3>预计付款计划</h3>
          <div class="score">¥326.8万</div>
          <div class="tag-row"><span class="tag">7天内到期</span><span class="tag">账期推算</span></div>
        </div>
      </div>

      <div class="grid two-col" style="margin-top: 18px;">
        <div class="card">
          <h3>供应商核心指标对比</h3>
          <p class="card-subtitle">订单金额、入库金额、交付及时率和完成率</p>
          <div class="mini-chart" aria-label="供应商核心指标柱状图">
            <span style="height: 72%;"></span>
            <span style="height: 54%;"></span>
            <span style="height: 88%;"></span>
            <span style="height: 64%;"></span>
            <span style="height: 46%;"></span>
            <span style="height: 70%;"></span>
            <span style="height: 58%;"></span>
            <span style="height: 82%;"></span>
          </div>
        </div>
        <div class="card">
          <h3>付款计划提醒</h3>
          <p class="card-subtitle">按预计付款日期排序</p>
          <div class="rank-list">
            <div class="rank-item"><div class="rank-index">1</div><div><div class="rank-name">深圳某电子有限公司</div><div class="rank-meta">2025-05-18 到期</div></div><div class="rank-value">¥86,420</div></div>
            <div class="rank-item"><div class="rank-index">2</div><div><div class="rank-name">华东供应链服务商</div><div class="rank-meta">2025-05-21 到期</div></div><div class="rank-value">¥62,800</div></div>
            <div class="rank-item"><div class="rank-index">3</div><div><div class="rank-name">佳奥配套工厂</div><div class="rank-meta">2025-05-28 到期</div></div><div class="rank-value">¥45,600</div></div>
          </div>
        </div>
      </div>
    </section>

    <p class="footer-note">该页面为静态 HTML 预览稿，仅用于向甲方展示新版订单监测与供应监测的视觉方向和信息组织方式。</p>
  </main>
</body>
</html>