lami-base-v1/frontend/src/app/mobile/pages/course-detail/course-detail.html

<div class="fixed inset-0 bg-white dark:bg-gray-800 z-50 overflow-hidden flex flex-col">
  <div class="sticky top-0 bg-white dark:bg-gray-800 px-4 py-3 border-b border-gray-200 dark:border-gray-700 flex-shrink-0">
    <div class="w-12 h-1 bg-gray-300 dark:bg-gray-600 rounded-full mx-auto mb-3"></div>
    <div class="flex items-center justify-between">
      <h3 class="font-semibold text-lg">课程详情</h3>
      <button routerLink="/mobile/learning" class="w-8 h-8 flex items-center justify-center">
        <fa-icon [icon]="faTimes" class="text-gray-500 dark:text-gray-400"></fa-icon>
      </button>
    </div>
  </div>
  <div class="flex-1 overflow-y-auto">
    <div class="h-48 bg-gradient-to-br from-green-400 to-green-600 flex items-center justify-center">
      <fa-icon [icon]="faBullhorn" class="text-white text-6xl"></fa-icon>
    </div>
    <div class="p-4">
      <h2 class="font-semibold text-xl mb-2">产品卖点提炼技巧</h2>
      <div class="flex items-center gap-4 mb-4 text-sm text-gray-500">
        <span><fa-icon [icon]="faClock" class="mr-1"></fa-icon>45分钟</span>
        <span><fa-icon [icon]="faSignal" class="mr-1"></fa-icon>初级</span>
        <span>1.2万人学习</span>
      </div>
      <p class="text-gray-600 dark:text-gray-300 mb-6 leading-relaxed">本课程将帮助你掌握产品卖点提炼的核心方法，学习如何从客户角度出发，用简洁有力的语言传达产品价值，提升销售转化率。</p>
      <h4 class="font-semibold mb-3">课程大纲</h4>
      <div class="space-y-3 mb-6">
        <div class="flex items-center gap-3 p-3 bg-gray-50 dark:bg-gray-700 rounded-lg">
          <div class="w-8 h-8 bg-green-500 text-white rounded-full flex items-center justify-center text-sm">1</div>
          <span class="flex-1">卖点提炼的基本概念</span>
          <fa-icon [icon]="faCheckCircle" class="text-green-500"></fa-icon>
        </div>
        <div class="flex items-center gap-3 p-3 bg-gray-50 dark:bg-gray-700 rounded-lg">
          <div class="w-8 h-8 bg-green-500 text-white rounded-full flex items-center justify-center text-sm">2</div>
          <span class="flex-1">FAB法则实战应用</span>
          <fa-icon [icon]="faCheckCircle" class="text-green-500"></fa-icon>
        </div>
        <div class="flex items-center gap-3 p-3 bg-gray-50 dark:bg-gray-700 rounded-lg">
          <div class="w-8 h-8 bg-gray-300 dark:bg-gray-600 text-white rounded-full flex items-center justify-center text-sm">3</div>
          <span class="flex-1">客户视角的卖点转化</span>
          <span class="text-sm text-gray-400">12:30</span>
        </div>
        <div class="flex items-center gap-3 p-3 bg-gray-50 dark:bg-gray-700 rounded-lg">
          <div class="w-8 h-8 bg-gray-300 dark:bg-gray-600 text-white rounded-full flex items-center justify-center text-sm">4</div>
          <span class="flex-1">实战演练与点评</span>
          <span class="text-sm text-gray-400">15:00</span>
        </div>
      </div>
    </div>
  </div>
  <div class="p-4 border-t border-gray-200 dark:border-gray-700 flex-shrink-0 safe-bottom">
    <button routerLink="/mobile/video/1" class="w-full py-4 bg-green-500 text-white font-semibold rounded-xl shadow-lg shadow-green-500/30">开始学习</button>
  </div>
</div>