<!-- src/views/VideoShowcase.vue -->
<template>
  <div class="page">
    <!-- 标题区 -->
    <header class="header">
      <h1 class="title">东师理想数学动画 AI 制作平台</h1>      
    </header>

    <!-- 主体区 -->
    <main class="main">
      <!-- 左侧视频 -->
      <section class="video-box">
        <video class="video" controls preload="metadata">
          <source src="@/assets/AnimatedFunctionPlot.mp4" type="video/mp4" />
          您的浏览器不支持 HTML5 视频。
        </video>
      </section>

      <!-- 右侧介绍卡片 -->
      <aside class="intro">
        <h2 class="intro-title">功能说明</h2>
        <p class="intro-desc">
          提供数学动画制作平台，帮助用户直观理解复杂的数学概念和函数关系。
        </p>

        <h2 class="intro-title">实现步骤</h2>
        <ul class="intro-desc">
          <li>采用步步为层的策略，确保动画制作的每个步骤都清晰可见</li>
          <li>利用大模型逐步生成动画效果，提高制作效率</li>
          <li>一步一校验，确保每个动画细节都符合数学原理和视觉效果要求</li>
        </ul>
      </aside>
    </main>
  </div>
</template>

<script setup>
/* 可在此扩展交互逻辑 */
function handleWatch() {
  console.log('用户点击了「立即观看」');
}
</script>

<style scoped>
/* ===== 全局基础 ===== */
html,body{margin:0;padding:0;}

/* ===== 页面容器 ===== */
.page{
  min-height:100vh;
  background:linear-gradient(135deg,#f5f7fa 0%,#ffffff 100%);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

/* ===== 标题区 ===== */
.header{
  padding:50px 20px;
  text-align:center;
  background:linear-gradient(135deg,#337ECC 0%,#337ECC 100%);
  box-shadow:0 4px 20px rgba(0,0,0,.2);
}
.title{
  margin:0;
  font-size:44px;
  font-weight:800;
  letter-spacing:1px;
  background:linear-gradient(90deg,#ffffff 0%,#cbd5e1 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
.subtitle{
  margin:12px 0 0;
  font-size:20px;
  color:#94a3b8;
  letter-spacing:.5px;
}

/* ===== 主体布局 ===== */
.main{
  max-width:1200px;
  margin:0 auto;
  padding:48px 20px;
  display:flex;
  flex-wrap:wrap;
  gap:40px;
  align-items:flex-start;
}

/* ===== 左侧视频 ===== */
.video-box{
  flex:1 1 680px;
}
.video{
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  border-radius:12px;
  box-shadow:0 6px 20px rgba(0,0,0,.08);
}

/* ===== 右侧卡片 ===== */
.intro{
  flex:1 1 300px;
  max-width:360px;
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:36px;
  box-shadow:0 4px 16px rgba(0,0,0,.05);
  height: 427px;
}
.intro-title{
  margin:0 0 16px;
  font-size:22px;
  font-weight:600;
  color: #409eff;
  padding-bottom: 10px;  
  border-bottom: 2px solid #409eff;  
}
.intro-desc{
  margin:0 0 24px;
  font-size:14px;
  line-height:1.7;
  color:#4b5563;
}
.intro-sub{
  margin:28px 0 12px;
  font-size:18px;
  font-weight:600;
  color:#111827;
}
.intro-steps{
  margin:0;
  padding-left:20px;
  font-size:15px;
  line-height:1.8;
  color:#4b5563;
}
.intro-steps li{
  margin-bottom:8px;
}

/* ===== 响应式 ===== */
@media(max-width:768px){
  .title{font-size:32px;}
  .main{flex-direction:column;align-items:center;}
  .intro{max-width:100%;}
}

ul {
  margin: 0;
  padding-left: 1.5rem; /* 增加左边距 */
  list-style-type: disc; /* 确保显示圆点 */
}

li {
  margin-bottom: 8px; /* 增加列表项间距 */
}
</style>