bobyuxinyang
/
lessncomos


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106
							<!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>西贡杠杆 Saigon Leverage｜纯粹星辰</title>
    <link rel="stylesheet" href="./styles.css?v=202607141015" />
  </head>
  <body>
    <header class="topbar">
      <a class="brand" href="#top" aria-label="返回顶部">
        <img class="brand-mark" src="../brand/logo-mark.svg" data-dark-src="../brand/logo-mark.svg" data-light-src="../brand/logo-mark-light.svg" alt="" />
        <span class="brand-copy"><strong>纯粹星辰</strong><em>less and cosmos.</em></span>
      </a>
      <div class="topbar-actions">
        <span class="episode" id="episodeLabel">CASE TIMELINE · EP.01</span>
        <button class="icon-button" id="themeToggle" type="button" aria-label="切换至浅色模式" title="切换至浅色模式"><span class="icon-glyph" aria-hidden="true">☼</span></button>
        <button class="icon-button edit-button" id="editToggle" type="button" aria-label="编辑页面内容" title="编辑页面内容"><span class="icon-glyph" aria-hidden="true">✎</span></button>
        <button class="icon-button" id="copyLink" type="button" aria-label="复制当前页面链接" title="复制当前页面链接"><span class="icon-glyph" aria-hidden="true">⤴</span></button>
      </div>
    </header>
    <div class="editbar" id="editbar" aria-live="polite">
      <span><i></i> 编辑模式：直接点击文字修改，内容会自动保存在本机</span>
      <button type="button" id="resetEdits">恢复原稿</button>
    </div>

    <main id="top">
      <section class="hero" aria-labelledby="caseTitle">
        <div class="hero-orbit" aria-hidden="true"></div>
        <div class="leverage-word" aria-hidden="true">LEVERAGE</div>
        <div class="hero-copy">
          <p class="case-slug">SAIGON—LEVERAGE / 西贡杠杆</p>
          <p class="eyebrow" id="heroEyebrow" data-edit="hero-eyebrow">48 亿美元的资本豪赌</p>
          <h1 id="caseTitle" data-edit="case-title">西贡杠杆<br /><span>一场用债务撬动国家级资产的豪赌</span></h1>
          <p class="hero-deck" id="heroDeck">300 多亿人民币入场，七年账面价值暴跌 72%。这是跨国战略误判，还是一场必须放进政治经济学里理解的长期博弈？</p>
        </div>
        <div class="hero-metrics" id="heroMetrics" aria-label="案例核心数字"></div>
        <a class="scroll-cue" href="#story">沿时间线阅读 <span>↓</span></a>
      </section>

      <section class="story" id="story">
        <aside class="story-rail" aria-label="案例导航">
          <div class="rail-sticky">
            <p class="rail-label">阅读视角</p>
            <div class="filters" id="filters"></div>
            <div class="progress-block">
              <div class="progress-meta"><span>故事进度</span><strong id="progressText">0%</strong></div>
              <div class="progress-track"><span id="progressBar"></span></div>
            </div>
            <nav class="chapter-nav" id="chapterNav" aria-label="章节跳转"></nav>
          </div>
        </aside>

        <div class="timeline-wrap">
          <div class="timeline-head">
            <div>
              <p class="section-kicker">CHRONICLE</p>
              <h2 data-edit="timeline-title">一根杠杆，三层战场</h2>
            </div>
            <div class="timeline-tools">
              <span>点击事件展开商业含义</span>
              <div class="view-switch" aria-label="时间线浏览密度">
                <button type="button" data-view="compact">速览</button>
                <button type="button" data-view="detail">详细</button>
              </div>
            </div>
          </div>
          <div class="timeline" id="timeline"></div>
          <section class="participants" aria-labelledby="participantsTitle">
            <div class="participants-head">
              <div>
                <p class="section-kicker">THE PLAYERS</p>
                <h2 id="participantsTitle" data-edit="participants-title">谁在这场牌局里</h2>
              </div>
              <p>参与方 · 立场 · 核心筹码</p>
            </div>
            <div class="participants-grid" id="participantsGrid"></div>
          </section>
        </div>
      </section>

      <section class="model" id="model" aria-labelledby="modelTitle">
        <p class="section-kicker">THINKING MODEL</p>
        <h2 id="modelTitle" data-edit="model-title">商业三维天平</h2>
        <p class="model-intro" data-edit="model-intro">任何脱离政治经济学的纯经营分析，都只是纸面模型。看懂一家企业，需要同时放上三个砝码。</p>
        <div class="model-grid" id="modelGrid"></div>
        <blockquote data-edit="model-quote">“物理微观决定你能活多久，资本宏观决定你能跑多快，而政治主权决定你挣到的钱究竟属于谁。”</blockquote>
      </section>

      <section class="ending">
        <p>THE QUESTION REMAINS</p>
        <h2 data-edit="ending-question">它会成为跨国资本的“还债绞肉机”，<br />还是完成进化的消费品巨头？</h2>
        <span data-edit="ending-answer">时间会给出答案。</span>
      </section>
    </main>

    <footer>
      <img src="../brand/logo-chinese-slogan-dark.svg" data-dark-src="../brand/logo-chinese-slogan-dark.svg" data-light-src="../brand/logo-chinese-slogan-light-bg.svg" alt="纯粹星辰，一念纯粹，万里星辰" />
      <p>理解政治，看懂经济，听见资本与权力最真实的呼吸。</p>
    </footer>

    <script src="./case-data.js?v=202607141015"></script>
    <script src="./app.js?v=202607141015"></script>
  </body>
</html>