update:0.04v

app.ttss

@@ -1,32 +1,39 @@
 .page-tabbar {
   position: fixed;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  height: 96rpx;
-  background: #ffffff;
-  border-top: 1rpx solid #e8e8e8;
+  left: 16rpx;
+  right: 16rpx;
+  bottom: 12rpx;
+  height: 84rpx;
+  border-radius: 24rpx;
+  background: rgba(255, 255, 255, 0.94);
+  border: 1rpx solid #ebeff5;
+  box-shadow: 0 12rpx 30rpx rgba(15, 23, 42, 0.12);
   display: flex;
+  padding: 6rpx;
+  box-sizing: border-box;
   z-index: 200;
 }
 
 .page-tab-item {
   flex: 1;
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
+  border-radius: 18rpx;
 }
 
 .page-tab-text {
-  font-size: 26rpx;
-  color: #7a8799;
-  font-weight: 500;
+  font-size: 28rpx;
+  color: #7b8798;
+  font-weight: 600;
+  line-height: 1.2;
 }
 
 .page-tab-item-active {
-  background: #f8fbff;
+  background: #165dff;
 }
 
 .page-tab-text-active {
-  color: #4facfe;
+  color: #ffffff;
 }

pages/product/index.ttml

@@ -1,81 +1,101 @@
 <view class="product-page">
-  <view class="hero">
-    <text class="title">音乐数字工具产品介绍</text>
-    <text class="subtitle">音乐数字工具软件核心功能围绕音频处理、交互体验、资源管理、数据统计、多端适配五大维度，聚焦软件本身的技术能力与功能落地，覆盖歌唱、乐理、器乐、欣赏、创作全场景。</text>
-  </view>
-
-  <view class="section">
-    <text class="section-title">一、核心音频交互模块</text>
-    <view class="card">
-      <text class="item-title">1. 多模式音频播放与控制</text>
-      <text class="item-desc">支持范唱、伴奏、节奏、旋律、哼唱、唱名、男女声分轨播放，可自由切换轨道、调节音量占比；支持变速不变调、慢速跟练、分句播放；支持音频循环、断点续播、逐小节/逐音符精准定位。</text>
-    </view>
-    <view class="card">
-      <text class="item-title">2. 音高与节奏可视化交互</text>
-      <text class="item-desc">内置旋律线实时展示，可直观呈现音准与节奏变化；支持音高、节奏实时识别与反馈；内置可视化节拍器，支持多拍号切换与速度调节。</text>
+  <scroll-view class="page-scroll" scroll-y="true">
+    <view class="hero">
+      <text class="hero-title"><text class="hero-title-main">新一代</text>
+智能音乐数字系统</text>
+      <text class="hero-desc">以尖端音频技术重塑音乐工具。为数字化时代打造的高保真、智能化的专业级教学平台。</text>
+      
+      <image
+        class="hero-image"
+        src="/images/product-hero.jpg"
+        mode="aspectFill"
+      />
     </view>
-  </view>
 
-  <view class="section">
-    <text class="section-title">二、乐谱与器乐辅助功能</text>
-    <view class="card">
-      <text class="item-title">1. 动态乐谱展示与编辑</text>
-      <text class="item-desc">支持简谱、五线谱双向对照展示，歌词与乐谱同步高亮，可自由缩放与模式切换；支持勾画标注、修改音符、调整旋律走向；支持乐谱导出与分享。</text>
-    </view>
-    <view class="card">
-      <text class="item-title">2. 虚拟器乐与指法辅助</text>
-      <text class="item-desc">内置排箫、葫芦丝、陶笛、竖笛、口风琴等虚拟键盘/指板，支持指法动态高亮；支持多声部演示、声部静音与独奏切换；支持按乐器类型与曲目难度自动生成指法图谱。</text>
-    </view>
-  </view>
+    <view class="section">
+      <view class="section-head">
+        <text class="section-title">核心交互模块</text>
+        <text class="section-sub">MODULE 01</text>
+      </view>
 
-  <view class="section">
-    <text class="section-title">三、AI智能交互与识别模块</text>
-    <view class="card">
-      <text class="item-title">智能识别与陪练评测</text>
-      <text class="item-desc">支持麦克风实时识别音准、节奏、指法准确性并自动标记偏差；支持片段选择、速度调节、逐音校验与偏差暂停提醒；支持完整性、准确性量化评分并生成反馈报告。</text>
-    </view>
-  </view>
+      <view class="feature-card">
+        <view class="feature-icon">▶</view>
+        <view class="feature-content">
+          <text class="feature-title">多模式高保真播放</text>
+          <text class="feature-desc">支持多种应用场景，确保音质始终如一的清晰与稳定。</text>
+        </view>
+      </view>
 
-  <view class="section">
-    <text class="section-title">四、多媒体资源与创作模块</text>
-    <view class="card">
-      <text class="item-title">1. 多媒体资源整合与展示</text>
-      <text class="item-desc">支持高清音频、视频播放，可关联展示乐曲背景与创作者信息；支持资源分类、搜索、筛选与持续更新；支持外部音视频、图片、乐谱导入。</text>
+      <view class="feature-card">
+        <view class="feature-icon">◉</view>
+        <view class="feature-content">
+          <text class="feature-title">无损变速变调</text>
+          <text class="feature-desc">自主研发算法，在大范围调整下依然保持自然音色。</text>
+        </view>
+      </view>
     </view>
-    <view class="card">
-      <text class="item-title">2. 简易编曲与创作功能</text>
-      <text class="item-desc">提供配器选择、旋律编辑、多轨混音等功能；支持节奏创作、旋律仿写与律动小游戏；支持作品导出、保存与多平台分享。</text>
-    </view>
-  </view>
 
-  <view class="section">
-    <text class="section-title">五、工具与管理模块</text>
-    <view class="card">
-      <text class="item-title">1. 可视化编辑与录制工具</text>
-      <text class="item-desc">内置音乐电子白板，支持书写与编辑五线谱/简谱并添加标注；支持屏幕+音频录制并进行简单剪辑；支持PPT、Word、Excel导入与播放。</text>
-    </view>
-    <view class="card">
-      <text class="item-title">2. 数据统计与云端服务</text>
-      <text class="item-desc">支持使用时长、操作频次、识别准确率等统计并生成可视化报表；支持资源、记录、作品云端备份；支持多端数据同步与设备间互通。</text>
-    </view>
-  </view>
+    <view class="section">
+      <view class="section-head">
+        <text class="section-title">教学资源中心</text>
+        <text class="section-sub">RESOURCES</text>
+      </view>
 
-  <view class="section">
-    <text class="section-title">六、多端适配与拓展功能</text>
-    <text class="value-line">1. 支持电脑、平板、手机、电子白板等多设备适配，界面自适应调整</text>
-    <text class="value-line">2. 支持多用户分组与权限管控，实现分组展示与互动操作</text>
-    <text class="value-line">3. 预留灵活拓展接口，可按需求新增模块、对接外部资源</text>
-  </view>
+      <text class="minor-title">支持的教材版本</text>
+      <text class="minor-desc">紧扣教学大纲，实现 <text class="blue">100% 同步教材内容</text>。</text>
+      <view class="version-wrap">
+        <text class="version-chip">人音版</text>
+        <text class="version-chip">人教版</text>
+        <text class="version-chip">花城版</text>
+        <text class="version-chip">苏教版</text>
+        <text class="version-chip">湘艺版</text>
+      </view>
 
-  <view class="section">
-    <text class="section-title">产品优势</text>
-    <text class="value-line">软件聚焦音频交互、智能识别、资源整合、多端适配四大核心能力，提供从音频播放、乐谱展示到智能交互、创作留存的全流程功能支持。</text>
-    <text class="value-line">可根据软件开发服务需求灵活适配各类音乐相关场景，满足不同客户的定制化开发诉求。</text>
-  </view>
+      <view class="resource-card resource-card-blue">
+        <text class="resource-title">海量资源插件</text>
+        <text class="resource-num">30,000+ <text class="resource-en">PREMIUM ITEMS</text></text>
+        <text class="resource-desc">涵盖乐理知识、视唱练耳、器乐教学等全方位精品资源，即点即用，显著降低使用门槛。</text>
+        <view class="resource-tag-wrap">
+          <text class="resource-tag">乐理</text>
+          <text class="resource-tag">视唱</text>
+          <text class="resource-tag">练耳</text>
+        </view>
+      </view>
 
-  <view class="contact-box">
-    <button class="contact-btn" bindtap="handleContactService">联系客服</button>
-  </view>
+      <view class="resource-card">
+        <text class="resource-title">海量曲谱与音频库</text>
+        <text class="resource-en-only">COMPREHENSIVE LIBRARY</text>
+        <text class="resource-desc">汇集古典名曲至流行金曲，百万级曲谱与音频资源实时更新，满足不同应用阶段需求。</text>
+      </view>
+    </view>
+
+    <view class="ai-card">
+      <text class="ai-sub">INTELLIGENCE</text>
+      <text class="ai-title">AI 智能交互与识别</text>
+      <text class="ai-desc">基于自研深度 learning 模型，提供实时演奏测评与反馈，让每一次练习都像专业指导。</text>
+      <view class="ai-grid">
+        <view class="ai-item">
+          <text class="ai-item-title">深度学习</text>
+          <text class="ai-item-sub">识别引擎</text>
+        </view>
+        <view class="ai-item">
+          <text class="ai-item-title">实时评分</text>
+          <text class="ai-item-sub">多维分析</text>
+        </view>
+      </view>
+      <image
+        class="ai-image"
+        src="/images/product-ai.jpg"
+        mode="aspectFill"
+      />
+    </view>
+
+    <view class="final-card">
+      <text class="final-title">开启您的数字音乐之旅</text>
+      <text class="final-desc">加入数千名专业用户的行列，共同探索音乐工具的无限可能。</text>
+      <button class="primary-btn" bindtap="handleContactService">立即咨询</button>
+    </view>
+  </scroll-view>
 
   <view class="page-tabbar">
     <view class="page-tab-item page-tab-item-active" bindtap="handleGoProduct">

pages/product/index.ttss

@@ -1,110 +1,333 @@
 .product-page {
   min-height: 100vh;
+  background: #f3f4f6;
+  color: #1a1d23;
+  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
+}
+
+.page-scroll {
+  height: 100vh;
   box-sizing: border-box;
-  background: #f5f7fb;
-  padding: 24rpx 24rpx 140rpx 24rpx;
+  padding: 18rpx 18rpx 170rpx;
 }
 
 .hero {
-  background: linear-gradient(135deg, #667eea 0%, #6d8df6 100%);
-  border-radius: 20rpx;
-  padding: 28rpx;
-  margin-bottom: 24rpx;
+  background: #f3f4f6;
+  border-radius: 24rpx;
+  padding: 12rpx 4rpx 8rpx;
 }
 
-.title {
+.hero-title {
   display: block;
-  color: #ffffff;
-  font-size: 34rpx;
-  font-weight: 600;
-  margin-bottom: 12rpx;
+  white-space: pre-line;
+  font-size: 62rpx;
+  line-height: 1.15;
+  font-weight: 800;
+  color: #111827;
 }
 
-.subtitle {
+.hero-title-main {
+  color: #165dff;
+}
+
+.hero-desc {
   display: block;
-  color: rgba(255, 255, 255, 0.92);
-  font-size: 24rpx;
-  line-height: 1.6;
+  margin-top: 14rpx;
+  color: #6b7280;
+  font-size: 28rpx;
+  line-height: 1.7;
+}
+
+.ghost-btn {
+  margin-top: 20rpx;
+  height: 72rpx;
+  border-radius: 36rpx;
+  border: 1rpx solid #d4dae3;
+  background: #eceff3;
+  color: #374151;
+  font-size: 32rpx;
+  font-weight: 600;
+}
+
+.ghost-btn::after {
+  border: none;
+}
+
+.hero-image {
+  margin-top: 20rpx;
+  width: 100%;
+  height: 340rpx;
+  border-radius: 36rpx;
 }
 
 .section {
-  background: #ffffff;
-  border-radius: 16rpx;
-  padding: 20rpx;
-  margin-bottom: 20rpx;
+  margin-top: 20rpx;
+  background: #eceef2;
+  border-radius: 24rpx;
+  padding: 20rpx 14rpx;
+}
+
+.section-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
 }
 
 .section-title {
+  font-size: 42rpx;
+  color: #111827;
+  font-weight: 800;
+}
+
+.section-sub {
+  margin-top: 8rpx;
+  font-size: 14rpx;
+  color: #b6bfcb;
+  letter-spacing: 2rpx;
+}
+
+.feature-card {
+  margin-top: 14rpx;
+  border-radius: 24rpx;
+  background: #f7f8fa;
+  padding: 18rpx;
+  display: flex;
+  gap: 14rpx;
+}
+
+.feature-icon {
+  width: 48rpx;
+  height: 48rpx;
+  border-radius: 50%;
+  background: #eaf0fb;
+  color: #165dff;
+  font-size: 22rpx;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.feature-content {
+  flex: 1;
+}
+
+.feature-title {
   display: block;
+  font-size: 32rpx;
+  color: #111827;
+  font-weight: 700;
+}
+
+.feature-desc {
+  display: block;
+  margin-top: 8rpx;
   font-size: 28rpx;
-  color: #1f2d3d;
-  font-weight: 600;
-  margin-bottom: 16rpx;
+  color: #6b7280;
+  line-height: 1.65;
+}
+
+.minor-title {
+  display: block;
+  margin-top: 12rpx;
+  font-size: 32rpx;
+  color: #111827;
+  font-weight: 700;
+}
+
+.minor-desc {
+  display: block;
+  margin-top: 8rpx;
+  font-size: 28rpx;
+  color: #6b7280;
+  line-height: 1.65;
+}
+
+.blue {
+  color: #165dff;
+  font-weight: 700;
+}
+
+.version-wrap {
+  margin-top: 12rpx;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8rpx;
+}
+
+.version-chip {
+  padding: 8rpx 14rpx;
+  border-radius: 16rpx;
+  background: #f7f8fa;
+  color: #374151;
+  font-size: 24rpx;
 }
 
-.card {
-  background: #f8faff;
-  border: 1rpx solid #e6ecff;
-  border-radius: 12rpx;
-  padding: 16rpx;
-  margin-bottom: 12rpx;
+.resource-card {
+  margin-top: 16rpx;
+  border-radius: 24rpx;
+  background: #f7f8fa;
+  padding: 18rpx;
 }
 
-.card:last-child {
-  margin-bottom: 0;
+.resource-card-blue {
+  background: #eaf2ff;
+  border: 1rpx solid #d7e4ff;
 }
 
-.item-title {
+.resource-title {
   display: block;
-  color: #2b3a4d;
-  font-size: 26rpx;
-  font-weight: 600;
-  margin-bottom: 8rpx;
+  font-size: 32rpx;
+  color: #111827;
+  font-weight: 700;
 }
 
-.item-desc {
+.resource-num {
   display: block;
-  color: #4f627a;
+  margin-top: 4rpx;
+  color: #165dff;
+  font-size: 40rpx;
+  font-weight: 800;
+}
+
+.resource-en {
+  font-size: 14rpx;
+  color: #8ea2c6;
+}
+
+.resource-en-only {
+  display: block;
+  margin-top: 4rpx;
+  font-size: 14rpx;
+  color: #8ea2c6;
+  letter-spacing: 1rpx;
+}
+
+.resource-desc {
+  display: block;
+  margin-top: 8rpx;
+  font-size: 28rpx;
+  color: #6b7280;
+  line-height: 1.65;
+}
+
+.resource-tag-wrap {
+  margin-top: 12rpx;
+  display: flex;
+  gap: 8rpx;
+}
+
+.resource-tag {
+  flex: 1;
+  height: 44rpx;
+  line-height: 44rpx;
+  text-align: center;
+  border-radius: 20rpx;
+  background: #f8fafc;
+  color: #165dff;
   font-size: 24rpx;
-  line-height: 1.6;
+  font-weight: 600;
+}
+
+.ai-card {
+  margin-top: 20rpx;
+  border-radius: 28rpx;
+  background: linear-gradient(180deg, #1d63f2 0%, #0f57de 100%);
+  padding: 20rpx 18rpx;
+}
+
+.ai-sub {
+  display: block;
+  font-size: 14rpx;
+  color: rgba(255, 255, 255, 0.6);
+  letter-spacing: 2rpx;
+}
+
+.ai-title {
+  display: block;
+  margin-top: 8rpx;
+  font-size: 40rpx;
+  color: #fff;
+  font-weight: 700;
 }
 
-.tags {
+.ai-desc {
+  display: block;
+  margin-top: 8rpx;
+  font-size: 28rpx;
+  color: rgba(255, 255, 255, 0.86);
+  line-height: 1.65;
+}
+
+.ai-grid {
+  margin-top: 12rpx;
   display: flex;
-  flex-wrap: wrap;
+  gap: 8rpx;
 }
 
-.tag {
-  background: #eef4ff;
-  color: #3f5f9f;
-  border-radius: 999rpx;
-  font-size: 22rpx;
-  padding: 10rpx 18rpx;
-  margin-right: 12rpx;
-  margin-bottom: 12rpx;
+.ai-item {
+  flex: 1;
+  border-radius: 20rpx;
+  background: rgba(255, 255, 255, 0.12);
+  padding: 14rpx;
 }
 
-.value-line {
+.ai-item-title {
   display: block;
-  color: #33475b;
-  font-size: 24rpx;
-  line-height: 1.8;
+  font-size: 28rpx;
+  color: #fff;
+  font-weight: 700;
+}
+
+.ai-item-sub {
+  display: block;
+  margin-top: 4rpx;
+  font-size: 20rpx;
+  color: rgba(255, 255, 255, 0.64);
 }
 
-.contact-box {
-  margin-top: 28rpx;
+.ai-image {
+  margin-top: 14rpx;
+  width: 100%;
+  height: 160rpx;
+  border-radius: 20rpx;
 }
 
-.contact-btn {
-  height: 84rpx;
-  border-radius: 42rpx;
-  background: #4facfe;
-  color: #ffffff;
+.final-card {
+  margin-top: 20rpx;
+  margin-bottom: 16rpx;
+  border-radius: 24rpx;
+  background: #f7f8fa;
+  padding: 24rpx 18rpx;
+  border-left: 4rpx solid #c5dafe;
+}
+
+.final-title {
+  display: block;
+  font-size: 40rpx;
+  color: #111827;
+  font-weight: 800;
+}
+
+.final-desc {
+  display: block;
+  margin-top: 8rpx;
   font-size: 28rpx;
-  font-weight: 600;
-  border: none;
+  color: #6b7280;
+  line-height: 1.65;
+}
+
+.primary-btn {
+  margin-top: 16rpx;
+  height: 72rpx;
+  border-radius: 36rpx;
+  background: #165dff;
+  color: #fff;
+  font-size: 32rpx;
+  font-weight: 700;
 }
 
-.contact-btn::after {
+.primary-btn::after {
   border: none;
 }

pages/trial/index.js

@@ -15,9 +15,11 @@ Page({
     isLoadingImgCode: false,
     isVerifyingImgCode: false,
     isSubmitting: false,
+    showVideoModal: false,
     showSubmitTip: false,
     submitTipText: '',
     countdown: 0,
+    trialVideoUrl: 'https://daya-online-1303457149.cos.ap-nanjing.myqcloud.com/product-video/%E8%80%81%E5%B8%88%E7%AB%AF%E5%A6%82%E4%BD%95%E7%99%BB%E5%BD%95%E4%BD%BF%E7%94%A8.mp4',
     submitApi: 'https://kt.colexiu.com/edu-app/open/student/requestTrial',
     getImgCodeApi: 'https://kt.colexiu.com/edu-app/open/sendImgCode',
     sendSmsApi: 'https://kt.colexiu.com/edu-app/open/sendSmsVerify'
@@ -431,6 +433,32 @@ Page({
   handleGoTrial: function () {
   },
 
+  handleOpenVideo: function () {
+    this.setData({
+      showVideoModal: true
+    }, () => {
+      if (this.videoContext) {
+        this.videoContext.play()
+      }
+    })
+  },
+
+  onReady: function () {
+    this.videoContext = tt.createVideoContext('trialVideo', this)
+  },
+
+  handleCloseVideo: function () {
+    if (this.videoContext) {
+      this.videoContext.pause()
+    }
+    this.setData({
+      showVideoModal: false
+    })
+  },
+
+  noop: function () {
+  },
+
   onUnload: function () {
     if (this._submitTipTimer) {
       clearTimeout(this._submitTipTimer)
@@ -440,5 +468,8 @@ Page({
       clearInterval(this._countdownTimer)
       this._countdownTimer = null
     }
+    if (this.videoContext) {
+      this.videoContext.pause()
+    }
   }
 })

pages/trial/index.ttml

@@ -1,112 +1,109 @@
-<view class="trial-page">
-  <view class="hero">
-    <text class="title">申请试用</text>
-    <text class="subtitle">完整真实填写以下信息，即可免费申请软件试用。</text>
-  </view>
+<view class="trial-page">
+  <scroll-view class="page-scroll" scroll-y="true">
+    <image
+      class="header-image"
+      src="/images/trial-hero.jpg"
+      mode="aspectFill"
+    />
 
-  <view class="form-card">
-    <view class="form-item">
-      <text class="label">职业</text>
-      <view class="option-group">
-        <view
-          class="option-item {{formData.occupation === '学生' ? 'option-item-active' : ''}}"
-          data-field="occupation"
-          data-value="学生"
-          bindtap="handleSelectOption"
-        >
-          学生
-        </view>
-        <view
-          class="option-item {{formData.occupation === '教师' ? 'option-item-active' : ''}}"
-          data-field="occupation"
-          data-value="教师"
-          bindtap="handleSelectOption"
-        >
-          教师
+    <view class="form-wrap">
+      <view class="form-item">
+        <text class="label">身份职业</text>
+        <view class="switch-group">
+          <view
+            class="switch-item {{formData.occupation === '学生' ? 'switch-item-active' : ''}}"
+            data-field="occupation"
+            data-value="学生"
+            bindtap="handleSelectOption"
+          >学生</view>
+          <view
+            class="switch-item {{formData.occupation === '教师' ? 'switch-item-active' : ''}}"
+            data-field="occupation"
+            data-value="教师"
+            bindtap="handleSelectOption"
+          >教师</view>
         </view>
       </view>
-    </view>
 
-    <view class="form-item">
-      <text class="label">姓名</text>
-      <input
-        class="input"
-        placeholder="请输入姓名"
-        value="{{formData.name}}"
-        data-field="name"
-        bindinput="handleInputChange"
-      />
-    </view>
+      <view class="form-item">
+        <text class="label">您的姓名</text>
+        <input
+          class="input"
+          placeholder="请输入姓名"
+          value="{{formData.name}}"
+          data-field="name"
+          bindinput="handleInputChange"
+        />
+      </view>
 
-    <view class="form-item">
-      <text class="label">性别</text>
-      <view class="option-group">
-        <view
-          class="option-item {{formData.gender === '男' ? 'option-item-active' : ''}}"
-          data-field="gender"
-          data-value="男"
-          bindtap="handleSelectOption"
-        >
-          男
+      <view class="form-item">
+        <text class="label">性别</text>
+        <view class="switch-group">
+          <view
+            class="switch-item {{formData.gender === '男' ? 'switch-item-active' : ''}}"
+            data-field="gender"
+            data-value="男"
+            bindtap="handleSelectOption"
+          >男</view>
+          <view
+            class="switch-item {{formData.gender === '女' ? 'switch-item-active' : ''}}"
+            data-field="gender"
+            data-value="女"
+            bindtap="handleSelectOption"
+          >女</view>
         </view>
-        <view
-          class="option-item {{formData.gender === '女' ? 'option-item-active' : ''}}"
-          data-field="gender"
-          data-value="女"
-          bindtap="handleSelectOption"
-        >
-          女
+      </view>
+
+      <view class="form-item">
+        <text class="label">联系电话</text>
+        <view class="phone-row">
+          <input
+            class="input input-flex"
+            type="number"
+            maxlength="11"
+            placeholder="请输入手机号"
+            value="{{formData.phone}}"
+            data-field="phone"
+            bindinput="handleInputChange"
+          />
+          <button
+            class="code-btn"
+            bindtap="handleSendCode"
+            disabled="{{isSendingCode || isLoadingImgCode || countdown > 0}}"
+          >{{countdown > 0 ? (countdown + 's后重试') : '获取验证码'}}</button>
         </view>
       </view>
-    </view>
 
-    <view class="form-item">
-      <text class="label">手机号</text>
-      <view class="input-with-btn">
+      <view class="form-item" tt:if="{{isCodeSent}}">
+        <text class="label">验证码</text>
         <input
-          class="input input-flex"
+          class="input"
           type="number"
-          maxlength="11"
-          placeholder="请输入手机号"
-          value="{{formData.phone}}"
-          data-field="phone"
+          maxlength="6"
+          placeholder="请输入验证码"
+          value="{{formData.code}}"
+          data-field="code"
           bindinput="handleInputChange"
         />
-        <button
-          class="code-btn"
-          bindtap="handleSendCode"
-          disabled="{{isSendingCode || isLoadingImgCode || countdown > 0}}"
-        >
-          {{countdown > 0 ? (countdown + 's后重发') : '获取验证码'}}
-        </button>
       </view>
-    </view>
-
-    <view class="form-item" tt:if="{{isCodeSent}}">
-      <text class="label">验证码</text>
-      <input
-        class="input"
-        type="number"
-        maxlength="6"
-        placeholder="请输入验证码"
-        value="{{formData.code}}"
-        data-field="code"
-        bindinput="handleInputChange"
-      />
-    </view>
 
-    <button class="submit-btn" bindtap="handleSubmit" disabled="{{isSubmitting}}" loading="{{isSubmitting}}">提交申请</button>
+      <button class="submit-btn" bindtap="handleSubmit" disabled="{{isSubmitting}}" loading="{{isSubmitting}}">提交申请</button>
 
-    <view class="tips-box">
-      <text class="tips-title">提示说明</text>
-      <text class="tips-line">1. 学生用户：本产品配套有独立APP，可以去应用商店搜索并下载。</text>
-      <text class="tips-line">2. 教师用户：本产品配套有网页端管理系统，相关信息可通过官方渠道了解。</text>
-      <text class="tips-line">3. 同一手机号仅可申请试用一次，申请后账号自动开通，试用期为2天。</text>
-      <text class="tips-line">4. 有任何问题可以加入抖音主页粉丝群进行咨询。</text>
+      <view class="tips-box">
+        <text class="tips-title">温馨提示</text>
+        <text class="tips-line">1. 学生用户：本产品配套有独立APP，可以去应用商店搜索并下载。</text>
+        <view class="tips-line tips-line-inline">
+          <text>2. 教师用户：本产品配套有教师端管理系统，安装请</text>
+          <text class="tips-link" bindtap="handleOpenVideo">查看视频</text>
+          <text>详情。</text>
+        </view>
+        <text class="tips-line">3. 同一手机号仅可申请试用一次，申请后账号（手机号）自动开通，试用期为2天。</text>
+        <text class="tips-line">4. 有任何问题可以加入抖音主页粉丝群进行咨询。</text>
+      </view>
     </view>
-  </view>
+  </scroll-view>
 
-  <view class="page-tabbar">
+  <view class="page-tabbar" tt:if="{{!showVideoModal}}">
     <view class="page-tab-item" bindtap="handleGoProduct">
       <text class="page-tab-text">产品介绍</text>
     </view>
@@ -142,6 +139,18 @@
     </view>
   </view>
 
+  <view class="video-mask" tt:if="{{showVideoModal}}" catchtap="noop">
+    <view class="video-close" bindtap="handleCloseVideo">关闭</view>
+    <video
+      id="trialVideo"
+      class="trial-video-fullscreen"
+      src="{{trialVideoUrl}}"
+      controls
+      autoplay="{{showVideoModal}}"
+      object-fit="contain"
+    />
+  </view>
+
   <view class="submit-tip" tt:if="{{showSubmitTip}}">
     <text class="submit-tip-text">{{submitTipText}}</text>
   </view>

pages/trial/index.ttss

@@ -1,92 +1,85 @@
 .trial-page {
   min-height: 100vh;
-  box-sizing: border-box;
-  background: #f5f7fb;
-  padding: 24rpx 24rpx 140rpx 24rpx;
+  background: #eceff4;
+  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
 }
 
-.hero {
-  background: linear-gradient(135deg, #5c84ff 0%, #6aa7ff 100%);
-  border-radius: 20rpx;
-  padding: 28rpx;
-  margin-bottom: 24rpx;
+.page-scroll {
+  height: 100vh;
+  box-sizing: border-box;
+  padding: 18rpx 0 146rpx;
 }
 
-.title {
+.header-image {
+  width: 678rpx;
+  height: 300rpx;
+  margin: 0 auto;
+  border-radius: 40rpx;
   display: block;
-  color: #ffffff;
-  font-size: 34rpx;
-  font-weight: 600;
-  margin-bottom: 10rpx;
 }
 
-.subtitle {
-  display: block;
-  color: rgba(255, 255, 255, 0.92);
-  font-size: 24rpx;
-  line-height: 1.6;
+.form-wrap {
+  margin-top: 28rpx;
+  padding: 0 44rpx;
 }
 
-.form-card {
-  background: #ffffff;
-  border-radius: 16rpx;
-  padding: 24rpx;
-  box-shadow: 0 10rpx 30rpx rgba(40, 68, 120, 0.06);
+.form-item {
+  margin-bottom: 30rpx;
 }
 
-.form-item {
-  margin-bottom: 22rpx;
+.label {
+  display: block;
+  margin-bottom: 12rpx;
+  color: #546a88;
+  font-size: 32rpx;
+  font-weight: 600;
 }
 
-.option-group {
+.switch-group {
+  background: #edf1f6;
+  border-radius: 24rpx;
+  padding: 8rpx;
   display: flex;
-  flex-wrap: wrap;
-  gap: 16rpx;
+  gap: 10rpx;
 }
 
-.option-item {
-  min-width: 180rpx;
-  height: 76rpx;
-  line-height: 76rpx;
-  padding: 0 28rpx;
+.switch-item {
+  flex: 1;
+  height: 78rpx;
+  line-height: 78rpx;
   text-align: center;
-  background: #f7f9fc;
-  border: 1rpx solid #dfe6f2;
-  border-radius: 12rpx;
-  color: #2c3e50;
-  font-size: 24rpx;
-}
-
-.option-item-active {
-  background: #e8f1ff;
-  border-color: #4facfe;
-  color: #2363d1;
+  border-radius: 20rpx;
+  color: #5b6f8a;
+  font-size: 32rpx;
   font-weight: 600;
 }
 
-.label {
-  display: block;
-  color: #2c3e50;
-  font-size: 24rpx;
-  margin-bottom: 8rpx;
+.switch-item-active {
+  background: #ffffff;
+  color: #165dff;
+  box-shadow: 0 8rpx 18rpx rgba(15, 23, 42, 0.08);
 }
 
 .input {
   width: 100%;
-  height: 76rpx;
-  background: #f7f9fc;
-  border: 1rpx solid #dfe6f2;
-  border-radius: 12rpx;
+  height: 96rpx;
+  border-radius: 28rpx;
+  border: 1rpx solid #e3e8f0;
+  background: #f8fafc;
   box-sizing: border-box;
-  padding: 0 16rpx;
-  font-size: 24rpx;
-  color: #2c3e50;
+  padding: 0 24rpx;
+  color: #1f2937;
+  font-size: 32rpx;
+}
+
+.input::placeholder {
+  color: #9ca9bc;
 }
 
-.input-with-btn {
+.phone-row {
   display: flex;
   align-items: center;
-  gap: 12rpx;
+  gap: 10rpx;
 }
 
 .input-flex {
@@ -94,28 +87,82 @@
 }
 
 .code-btn {
-  width: 190rpx;
-  height: 76rpx;
-  line-height: 76rpx;
+  width: 210rpx;
+  height: 82rpx;
+  line-height: 82rpx;
   padding: 0;
-  border-radius: 12rpx;
-  border: 1rpx solid #4facfe;
-  background: #eef6ff;
-  color: #2363d1;
-  font-size: 22rpx;
+  border-radius: 22rpx;
+  border: 1rpx solid #d0def4;
+  background: #e9f1ff;
+  color: #165dff;
+  font-size: 28rpx;
   font-weight: 600;
 }
 
 .code-btn[disabled] {
-  color: #a0aec0;
-  border-color: #dfe6f2;
-  background: #f5f7fb;
+  color: #9ca9bc;
+  border-color: #dfe6f0;
+  background: #edf2f8;
 }
 
 .code-btn::after {
   border: none;
 }
 
+.submit-btn {
+  margin-top: 8rpx;
+  width: 100%;
+  height: 98rpx;
+  border-radius: 49rpx;
+  background: #2f69df;
+  color: #ffffff;
+  font-size: 34rpx;
+  font-weight: 700;
+  border: none;
+  box-shadow: 0 14rpx 30rpx rgba(47, 105, 223, 0.28);
+}
+
+.submit-btn::after {
+  border: none;
+}
+
+.tips-box {
+  margin-top: 26rpx;
+  margin-bottom: 20rpx;
+  border-radius: 34rpx;
+  border: 1rpx solid #d0def1;
+  background: #edf3fa;
+  padding: 22rpx;
+}
+
+.tips-title {
+  display: block;
+  color: #165dff;
+  font-size: 32rpx;
+  font-weight: 700;
+  margin-bottom: 8rpx;
+}
+
+.tips-line {
+  display: block;
+  margin-top: 8rpx;
+  color: #5b6f8a;
+  font-size: 28rpx;
+  line-height: 1.7;
+}
+
+.tips-line-inline {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.tips-link {
+  color: #165dff;
+  text-decoration: underline;
+  margin: 0 6rpx;
+}
+
 .img-code-mask {
   position: fixed;
   left: 0;
@@ -156,7 +203,7 @@
   display: block;
   text-align: center;
   color: #2c3e50;
-  font-size: 36rpx;
+  font-size: 32rpx;
   font-weight: 600;
   margin-bottom: 24rpx;
 }
@@ -176,7 +223,7 @@
   box-sizing: border-box;
   padding: 0 20rpx;
   color: #2c3e50;
-  font-size: 30rpx;
+  font-size: 32rpx;
 }
 
 .img-code-right {
@@ -199,44 +246,35 @@
   margin-top: 14rpx;
 }
 
-.tips-box {
-  margin-top: 20rpx;
-  padding: 14rpx 16rpx;
-  background: #f7faff;
-  border: 1rpx solid #cfe3ff;
-  border-radius: 10rpx;
-}
-
-.tips-title {
-  display: block;
-  color: #1f4f95;
-  font-size: 24rpx;
-  font-weight: 600;
-  margin-bottom: 6rpx;
-}
-
-.tips-line {
-  display: block;
-  color: #365c97;
-  font-size: 23rpx;
-  line-height: 1.6;
-  margin-top: 4rpx;
+.video-mask {
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  z-index: 130;
+  background: #000000;
 }
 
-.submit-btn {
-  margin: 34rpx auto 0;
-  width: 360rpx;
-  height: 84rpx;
-  border-radius: 42rpx;
-  background: #4facfe;
+.video-close {
+  position: absolute;
+  top: 44rpx;
+  right: 28rpx;
+  z-index: 131;
+  min-width: 112rpx;
+  height: 64rpx;
+  line-height: 64rpx;
+  padding: 0 20rpx;
+  text-align: center;
+  border-radius: 32rpx;
+  background: rgba(0, 0, 0, 0.45);
   color: #ffffff;
   font-size: 28rpx;
-  font-weight: 600;
-  border: none;
 }
 
-.submit-btn::after {
-  border: none;
+.trial-video-fullscreen {
+  width: 100vw;
+  height: 100vh;
 }
 
 .submit-tip {

refactor_output/产品介绍_code.html

@@ -0,0 +1,307 @@
+<!DOCTYPE html><html lang="zh-CN"><head>
+<meta charset="utf-8">
+<meta content="width=device-width, initial-scale=1.0" name="viewport">
+<title>Colexiu - 闊充箰鏁板瓧鏁欏绯荤粺</title>
+<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&amp;display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700;900&amp;display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet">
+<script id="tailwind-config">
+        tailwind.config = {
+            darkMode: "class",
+            theme: {
+                extend: {
+                    "colors": {
+                        "surface-bright": "#F7F9FC",
+                        "background": "#F7F9FC",
+                        "primary": "#0064FF",
+                        "on-surface": "#1A1D23",
+                        "on-surface-variant": "#5F6D7E",
+                        "surface-container": "#FFFFFF",
+                        "outline-variant": "#E2E8F0"
+                    },
+                    "borderRadius": {
+                        "DEFAULT": "0.5rem",
+                        "lg": "0.75rem",
+                        "xl": "1rem",
+                        "2xl": "1.5rem",
+                        "3xl": "2rem",
+                        "full": "9999px"
+                    },
+                    "fontFamily": {
+                        "headline": ["Noto Sans SC", "Inter", "sans-serif"],
+                        "body": ["Noto Sans SC", "Inter", "sans-serif"],
+                        "label": ["Noto Sans SC", "Inter", "sans-serif"]
+                    }
+                },
+            },
+        }
+    </script>
+<style>
+        .material-symbols-outlined {
+            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+        }
+        .soft-shadow {
+            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.04), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
+        }
+        .glass-header {
+            background: rgba(255, 255, 255, 0.85);
+            backdrop-filter: blur(12px);
+            -webkit-backdrop-filter: blur(12px);
+        }
+        .chinese-tracking {
+            letter-spacing: 0.02em;
+        }
+        .section-title {
+            font-size: 1.5rem;
+            font-weight: 900;
+            letter-spacing: 0.02em;
+        }
+        .section-marker {
+            height: 0.25rem;
+            width: 2rem;
+            background: #0064FF;
+            border-radius: 9999px;
+            margin-top: 0.25rem;
+        }
+        .section-caption {
+            font-size: 0.75rem;
+            font-weight: 700;
+            letter-spacing: 0.1em;
+            text-transform: uppercase;
+            opacity: 0.3;
+            color: #5F6D7E;
+        }
+        .feature-card {
+            display: flex;
+            gap: 1.25rem;
+            padding: 1.5rem;
+            border-radius: 2rem;
+            border: 1px solid #f8fafc;
+            background: #fff;
+            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.04), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
+        }
+        .feature-icon-wrap {
+            width: 3.5rem;
+            height: 3.5rem;
+            border-radius: 1rem;
+            background: #eff6ff;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-shrink: 0;
+        }
+        .resource-pill {
+            padding: 0.5rem 1rem;
+            border-radius: 0.75rem;
+            border: 1px solid #f1f5f9;
+            background: #f8fafc;
+            font-size: 0.875rem;
+            font-weight: 500;
+            color: #1A1D23;
+        }
+        .bottom-nav-item {
+            display: flex;
+            flex: 1;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            padding: 0.625rem 0;
+            transition: all 0.2s ease;
+        }
+        .bottom-nav-item:active {
+            transform: scale(0.95);
+        }
+        .bottom-nav-item.active {
+            border-radius: 18px;
+            background: #0064FF;
+            color: #fff;
+        }
+        .bottom-nav-item.inactive {
+            color: #5F6D7E;
+        }
+    </style>
+</head>
+<body class="bg-surface-bright text-on-surface font-body selection:bg-primary/20 selection:text-primary">
+<!-- TopAppBar -->
+<header class="fixed top-0 w-full z-50 glass-header border-b border-white/20 px-5 py-3 flex justify-between items-center">
+<div class="flex items-center gap-2">
+<div class="w-8 h-8 rounded-lg bg-primary flex items-center justify-center text-white font-black text-sm">C</div>
+<span class="font-bold text-base tracking-tight text-on-surface">鏅鸿兘闊充箰鏁板瓧绯荤粺</span>
+</div>
+<div class="flex items-center gap-3">
+<button class="text-on-surface/70">
+<span class="material-symbols-outlined text-[22px]">menu</span>
+</button>
+</div>
+</header>
+<main class="pt-16 pb-32">
+<!-- Hero Section -->
+<section class="relative px-6 py-12 overflow-hidden bg-white">
+<div class="absolute top-0 right-0 -mr-20 -mt-20 w-80 h-80 bg-primary/5 rounded-full blur-[80px]"></div>
+<div class="absolute bottom-0 left-0 -ml-20 -mb-20 w-60 h-60 bg-blue-400/5 rounded-full blur-[60px]"></div>
+<div class="relative z-10">
+<h1 class="text-[40px] leading-[1.2] font-black text-on-surface mb-5 chinese-tracking pt-4">
+<span class="text-primary">鏂颁竴浠</span><br>鏅鸿兘闊充箰鏁板瓧绯荤粺
+            </h1>
+<p class="text-base text-on-surface-variant leading-relaxed mb-8 max-w-[90%]">
+                浠ュ皷绔煶棰戞妧鏈噸濉戦煶涔愬伐鍏枫€備负鏁板瓧鍖栨椂浠ｆ墦閫犵殑楂樹繚鐪熴€佹櫤鑳藉寲鐨勪笓涓氱骇鏁欏骞冲彴銆?            </p>
+<div class="flex flex-col gap-3">
+<button class="w-full bg-slate-50 text-on-surface-variant py-4 rounded-2xl font-bold text-lg border border-slate-200 active:scale-[0.98] transition-all">
+                    瑙傜湅婕旂ず瑙嗛
+                </button>
+</div>
+</div>
+<div class="mt-12 relative">
+<div class="rounded-3xl overflow-hidden soft-shadow border border-white">
+<img class="w-full aspect-[4/3] object-cover" data-alt="Digital Music Platform professional product interface showing AI-powered performance analysis and interactive music staff" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAXiCxegq7dPQqZr80RwY5VWYaObdvBXZ0mZQheQhkDOvoYVlGSsre7G7RXDpIb6z_NJsWtL0UOIpNqdb5yz-jymVp2o58QJVuxUhkLS9lsxXC8Dx4ci2BtGCWZhOZfgjBCs00CX1Kx5De-irgXZPxorzRQiS0V9e4kx9zVsKSP410cGBGWjwWya_YWOBl91_sZpLKk8KSkdMZkcPqKiS6fI8TqNmpFMh8trxfFYhgqJ4o8elCvfxjnyWCOGy-VCcM_UbfpZRDFkRY">
+</div>
+</div>
+</section>
+<!-- Core Features -->
+<section class="px-6 py-12 space-y-6">
+<div class="flex items-end justify-between mb-2">
+<div>
+<h2 class="section-title">鏍稿績浜や簰妯″潡</h2>
+<div class="section-marker"></div>
+</div>
+<span class="section-caption">Module 01</span>
+</div>
+<div class="grid gap-4">
+<!-- Feature Card 1 -->
+<div class="feature-card">
+<div class="feature-icon-wrap">
+<span class="material-symbols-outlined text-primary text-3xl">play_circle</span>
+</div>
+<div>
+<h3 class="text-lg font-bold mb-1">澶氭ā寮忛珮淇濈湡鎾斁</h3>
+<p class="text-sm text-on-surface-variant leading-relaxed">鏀寔澶氱搴旂敤鍦烘櫙锛岀‘淇濋煶璐ㄥ缁堝涓€鐨勬竻鏅颁笌绋冲畾銆</p>
+</div>
+</div>
+<!-- Feature Card 2 -->
+<div class="feature-card">
+<div class="feature-icon-wrap">
+<span class="material-symbols-outlined text-primary text-3xl">speed</span>
+</div>
+<div>
+<h3 class="text-lg font-bold mb-1">鏃犳崯鍙橀€熷彉璋</h3>
+<p class="text-sm text-on-surface-variant leading-relaxed">鑷富鐮斿彂绠楁硶锛屽湪澶ц寖鍥磋皟鏁翠笅渚濈劧淇濇寔鑷劧闊宠壊銆</p>
+</div>
+</div>
+</div>
+</section>
+<!-- Enhanced Resources Section -->
+<section class="px-6 py-12 bg-white">
+<div class="flex items-end justify-between mb-8">
+<div>
+<h2 class="section-title">鏁欏璧勬簮涓績</h2>
+<div class="section-marker"></div>
+</div>
+<span class="section-caption">Resources</span>
+</div>
+<!-- Textbook Versions -->
+<div class="mb-10">
+<div class="flex items-center gap-2 mb-4">
+<span class="material-symbols-outlined text-primary">menu_book</span>
+<h3 class="font-bold text-lg">鏀寔鐨勬暀鏉愮増鏈</h3>
+</div>
+<p class="text-sm text-on-surface-variant mb-4">绱ф墸鏁欏澶х翰锛屽疄鐜?<span class="text-primary font-bold">100% 鍚屾鏁欐潗鍐呭</span>銆</p>
+<div class="flex flex-wrap gap-2">
+<span class="resource-pill">浜洪煶鐗</span>
+<span class="resource-pill">浜烘暀鐗</span>
+<span class="resource-pill">绮ゆ暀鐗</span>
+<span class="resource-pill">鑻忔暀鐗</span>
+<span class="resource-pill">婀樻暀鐗</span>
+</div>
+</div>
+<!-- Massive Courseware -->
+<div class="mb-10 p-6 rounded-3xl bg-blue-50/50 border border-blue-100/50">
+<div class="flex items-start gap-4 mb-4">
+<div class="w-12 h-12 rounded-2xl bg-white flex items-center justify-center soft-shadow text-primary">
+<span class="material-symbols-outlined text-2xl">grid_view</span>
+</div>
+<div>
+<h3 class="font-bold text-lg">娴烽噺璧勬簮鎻掍欢</h3>
+<div class="flex items-center gap-1 mt-0.5">
+<span class="text-primary font-black text-xl leading-none">30,000+</span>
+<span class="text-[10px] text-on-surface-variant font-bold uppercase tracking-tighter">Premium Items</span>
+</div>
+</div>
+</div>
+<p class="text-sm text-on-surface-variant leading-relaxed mb-4">娑电洊涔愮悊鐭ヨ瘑銆佽鍞辩粌鑰炽€佸櫒涔愭暀瀛︾瓑鍏ㄦ柟浣嶇簿鍝佽祫婧愶紝鍗崇偣鍗崇敤锛屾樉钁楅檷浣庝娇鐢ㄩ棬妲涖€</p>
+<div class="flex gap-2">
+<div class="flex-1 py-2 px-3 rounded-xl bg-white text-center text-[11px] font-bold text-primary border border-blue-100">涔愮悊</div>
+<div class="flex-1 py-2 px-3 rounded-xl bg-white text-center text-[11px] font-bold text-primary border border-blue-100">瑙嗗敱</div>
+<div class="flex-1 py-2 px-3 rounded-xl bg-white text-center text-[11px] font-bold text-primary border border-blue-100">缁冭€</div>
+</div>
+</div>
+<!-- Music Scores & Audio -->
+<div class="p-6 rounded-3xl bg-slate-50 border border-slate-100">
+<div class="flex items-start gap-4 mb-4">
+<div class="w-12 h-12 rounded-2xl bg-white flex items-center justify-center soft-shadow text-primary">
+<span class="material-symbols-outlined text-2xl">library_music</span>
+</div>
+<div>
+<h3 class="font-bold text-lg">娴烽噺鏇茶氨涓庨煶棰戝簱</h3>
+<p class="text-[10px] text-on-surface-variant font-bold uppercase tracking-widest mt-0.5">Comprehensive Library</p>
+</div>
+</div>
+<p class="text-sm text-on-surface-variant leading-relaxed">姹囬泦鍙ゅ吀鍚嶆洸鑷虫祦琛岄噾鏇诧紝鐧句竾閲忕骇鏇茶氨涓庨煶棰戣祫婧愬疄鏃舵洿鏂般€傛敮鎸佸绉嶆牸寮忓睍鐜帮紝婊¤冻涓嶅悓搴旂敤闃舵闇€姹傘€</p>
+</div>
+</section>
+<!-- AI & Visualization -->
+<section class="px-6 py-6">
+<div class="bg-primary rounded-3xl p-8 relative overflow-hidden soft-shadow">
+<div class="absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full -mr-16 -mt-16 blur-2xl"></div>
+<div class="relative z-10">
+<div class="flex items-center gap-2 text-white/60 mb-4">
+<span class="material-symbols-outlined text-sm">auto_awesome</span>
+<span class="text-[10px] font-bold tracking-widest uppercase">Intelligence</span>
+</div>
+<h2 class="text-2xl font-bold text-white mb-4">AI 鏅鸿兘浜や簰涓庤瘑鍒</h2>
+<p class="text-white/80 text-sm leading-relaxed mb-6">
+                    鍩轰簬鑷爺娣卞害 learning 妯″瀷锛屾彁渚涘疄鏃舵紨濂忔祴璇勪笌鍙嶉锛岃姣忎竴娆＄粌涔犻兘鍍忎笓涓氭寚瀵艰埇绮惧噯銆?                </p>
+<div class="grid grid-cols-2 gap-3 mb-6">
+<div class="bg-white/10 backdrop-blur-md rounded-2xl p-4 border border-white/10">
+<span class="material-symbols-outlined text-white mb-2" data-icon="psychology">psychology</span>
+<div class="text-white font-bold text-sm">娣卞害瀛︿範</div>
+<div class="text-[10px] text-white/50 uppercase">璇嗗埆寮曟搸</div>
+</div>
+<div class="bg-white/10 backdrop-blur-md rounded-2xl p-4 border border-white/10">
+<span class="material-symbols-outlined text-white mb-2" data-icon="analytics">analytics</span>
+<div class="text-white font-bold text-sm">瀹炴椂璇勫垎</div>
+<div class="text-[10px] text-white/50 uppercase">澶氱淮鍒嗘瀽</div>
+</div>
+</div>
+<div class="rounded-2xl overflow-hidden border border-white/20 shadow-2xl">
+<img class="w-full h-40 object-cover" data-alt="AI visualization notes" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBKa2Dxq5IUqanp4ymV7nk4RgOvdEPJk7mpUeec0t4LlHqtbHDvotCMqDYDI-xOhI8sA58WX1BRT9h3w6ziV1fcER4X8E_xx_lg-R8EoEPOLuCB_IvqgTfeqNa1uR-bVG5Nxh1hFVuWlTue8M9LSwaowdPbXFs80gTy29VgYtXcHzY03JxwbDvIo4e9l3BIXucSwJm-Z3V09tA7cOQD7WGcCe8dPt50riIvbwMq4M4plx8TaoaYo4-B1PceOt3uaiH75zjuVVObxAs">
+</div>
+</div>
+</div>
+</section>
+<!-- Final CTA -->
+<section class="px-6 py-12">
+<div class="bg-white rounded-3xl p-10 text-center border border-slate-100 soft-shadow relative overflow-hidden">
+<div class="absolute top-0 left-0 w-2 h-full bg-primary/20"></div>
+<h2 class="text-2xl font-black mb-4">寮€鍚偍鐨勬暟瀛楅煶涔愪箣鏃</h2>
+<p class="text-on-surface-variant text-sm mb-8 leading-relaxed">鍔犲叆鏁板崈鍚嶄笓涓氱敤鎴风殑琛屽垪锛屽叡鍚屾帰绱㈤煶涔愬伐鍏风殑鏃犻檺鍙兘銆</p>
+<button class="bg-primary text-white w-full py-4 rounded-2xl font-bold shadow-lg shadow-primary/20 active:scale-[0.98] transition-all">
+                绔嬪嵆鍏嶈垂璇曠敤
+            </button>
+</div>
+</section>
+</main>
+<!-- BottomNavBar -->
+<div class="fixed bottom-0 left-0 w-full z-50 flex justify-center pb-6">
+<nav class="bg-white/90 backdrop-blur-2xl fixed bottom-5 left-1/2 -translate-x-1/2 w-[92%] max-w-sm rounded-[24px] p-1.5 shadow-[0_20px_50px_rgba(0,0,0,0.1)] border border-white/50 flex">
+<a class="bottom-nav-item active" href="#">
+<span class="material-symbols-outlined text-[20px] mb-0.5">dashboard</span>
+<span class="text-[10px] font-bold tracking-wider">浜у搧婕旂ず</span>
+</a>
+<a class="bottom-nav-item inactive" href="#">
+<span class="material-symbols-outlined text-[20px] mb-0.5">verified_user</span>
+<span class="text-[10px] font-bold tracking-wider">鍏嶈垂璇曠敤</span>
+</a>
+</nav>
+</div>
+</body></html>

refactor_output/申请试用_code.html

@@ -0,0 +1,226 @@
+<!DOCTYPE html>
+
+<html lang="zh-CN"><head>
+<meta charset="utf-8"/>
+<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
+<title>鐢宠璇曠敤 - 鏅鸿兘闊充箰璇惧爞</title>
+<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+<link href="https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;600;700;800&amp;display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
+<script id="tailwind-config">
+        tailwind.config = {
+            darkMode: "class",
+            theme: {
+                extend: {
+                    colors: {
+                        primary: {
+                            50: '#f0f7ff',
+                            100: '#e0effe',
+                            200: '#bae0fd',
+                            500: '#3b82f6',
+                            600: '#2563eb',
+                        },
+                        slate: {
+                            50: '#f8fafc',
+                            100: '#f1f5f9',
+                            200: '#e2e8f0',
+                            500: '#64748b',
+                            600: '#475569',
+                            700: '#334155',
+                            800: '#1e293b',
+                            900: '#0f172a',
+                        }
+                    },
+                    borderRadius: {
+                        "DEFAULT": "0.25rem",
+                        "lg": "0.5rem",
+                        "xl": "0.75rem",
+                        "2xl": "1rem",
+                        "3xl": "1.5rem",
+                        "full": "9999px"
+                    },
+                    fontFamily: {
+                        "headline": ["Public Sans", "PingFang SC", "sans-serif"],
+                        "body": ["Public Sans", "PingFang SC", "sans-serif"],
+                        "label": ["Public Sans", "PingFang SC", "sans-serif"]
+                    }
+                },
+            },
+        }
+    </script>
+<style>
+        body {
+            font-family: 'Public Sans', 'PingFang SC', sans-serif;
+            -webkit-tap-highlight-color: transparent;
+            min-height: max(884px, 100dvh);
+        }
+        .glass-card {
+            background: rgba(255, 255, 255, 0.7);
+            backdrop-filter: blur(12px);
+            -webkit-backdrop-filter: blur(12px);
+        }
+        .material-symbols-outlined {
+            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+            vertical-align: middle;
+        }
+        .field-label {
+            margin-left: 0.25rem;
+            font-size: 0.875rem;
+            font-weight: 500;
+            color: #64748b;
+        }
+        .segmented-wrap {
+            display: flex;
+            gap: 0.25rem;
+            padding: 0.375rem;
+            border-radius: 1rem;
+            background: rgba(241, 245, 249, 0.5);
+        }
+        .segmented-btn {
+            flex: 1;
+            border-radius: 0.75rem;
+            padding: 0.75rem 0;
+            font-size: 0.875rem;
+            font-weight: 600;
+            color: #64748b;
+            transition: all 0.2s ease;
+        }
+        .segmented-btn:hover {
+            background: rgba(255, 255, 255, 0.5);
+        }
+        .segmented-btn.active {
+            background: #fff;
+            color: #2563eb;
+            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+        }
+        .field-input {
+            width: 100%;
+            border: none;
+            border-radius: 1rem;
+            background: rgba(255, 255, 255, 0.7);
+            padding: 1rem 1.25rem;
+            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+            transition: all 0.2s ease;
+        }
+        .field-input:focus {
+            outline: none;
+            box-shadow: 0 0 0 2px #3b82f6;
+        }
+        .field-input::placeholder {
+            color: #94a3b8;
+        }
+        .bottom-nav-link {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 0.25rem;
+            transition: color 0.2s ease;
+        }
+        .bottom-nav-link.inactive {
+            color: #94a3b8;
+        }
+        .bottom-nav-link.inactive:hover {
+            color: #3b82f6;
+        }
+        .bottom-nav-link.active {
+            color: #2563eb;
+        }
+    </style>
+</head>
+<body class="bg-gradient-to-b from-primary-50 to-white min-h-screen text-slate-900">
+<!-- TopAppBar -->
+<nav class="fixed top-0 w-full backdrop-blur-md z-50 bg-white/80 dark:bg-slate-900/80 border-b border-slate-100 dark:border-slate-800 shadow-sm flex items-center justify-between px-4 h-14 w-full">
+<div class="flex items-center gap-3">
+<button class="flex items-center justify-center w-8 h-8 rounded-full hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors active:opacity-70">
+<span class="material-symbols-outlined text-slate-600 dark:text-slate-400">arrow_back</span>
+</button>
+<h1 class="font-sans text-lg font-semibold tracking-tight text-slate-900 dark:text-white">鐢宠璇曠敤</h1>
+</div>
+<div class="w-8"></div> <!-- Spacer for balance -->
+</nav>
+<!-- Main Content -->
+<main class="pt-20 pb-32 px-6 max-w-lg mx-auto">
+<div class="space-y-8">
+<!-- Header Image/Decoration -->
+<div class="relative h-48 w-full rounded-3xl overflow-hidden shadow-sm">
+<img alt="High-quality, minimalist header image for a digital music classroom application. The image features a modern tablet on a clean desk, displaying an interactive musical score with colorful notes and AI feedback indicators. Subtle musical elements like headphones or a small midi keyboard are in the background. The style is clean, bright, and professional with a soft blue and white color palette. 4k resolution, high fidelity, education-focused." class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDDTfU-IdAeo4NQslf_w5CxTbh5PjxL6jQM4Pjn27NpYeTR-rrTVBqZYGx_w00qNU0IS4NXIbHBUoIqdd7xwg8B2pp-I5RL6TrhC41RUi8VoKPeSwprG24DwrXX95kh9T25k0sTn71MpqH5pkcPxa-YAAfnekimwa2YQrxcjXsFY2E_u8wpyLI2HVbtYVTyxXnujLhMFLu--3C8Ul4jduk1orjhU0Xv8rpT2hDhWyuQoYM_nXszttb7OZC4Q-l_ZQCeK0ONNhNw5kU"/>
+<div class="absolute inset-0 bg-gradient-to-tr from-primary-600/10 to-transparent"></div>
+</div>
+<!-- Form Section -->
+<div class="space-y-6">
+<!-- Role Selection -->
+<div class="space-y-3">
+<label class="field-label">韬唤鑱屼笟</label>
+<div class="segmented-wrap">
+<button class="segmented-btn active">瀛︾敓</button>
+<button class="segmented-btn">鏁欏笀</button>
+</div>
+</div>
+<!-- Name Input -->
+<div class="space-y-3">
+<label class="field-label">鎮ㄧ殑濮撳悕</label>
+<input class="field-input" placeholder="璇疯緭鍏ュ鍚" type="text"/>
+</div>
+<!-- Gender Selection -->
+<div class="space-y-3">
+<label class="field-label">鎬у埆</label>
+<div class="segmented-wrap">
+<button class="segmented-btn active">鐢</button>
+<button class="segmented-btn">濂</button>
+</div>
+</div>
+<!-- Phone & Verification -->
+<div class="space-y-3">
+<label class="field-label">鑱旂郴鐢佃瘽</label>
+<div class="relative">
+<input class="field-input" placeholder="璇疯緭鍏ユ墜鏈哄彿" type="tel"/>
+<button class="absolute right-2 top-1/2 -translate-y-1/2 px-4 py-2 bg-blue-50 text-blue-600 text-sm font-medium rounded-xl hover:bg-blue-100 active:opacity-70 transition-all">鑾峰彇楠岃瘉鐮</button>
+</div>
+</div>
+<!-- Submit Button -->
+<button class="w-full py-4 mt-4 bg-blue-600 text-white font-bold text-lg rounded-3xl shadow-lg shadow-blue-200 active:scale-[0.98] transition-all">
+                    鎻愪氦鐢宠
+                </button>
+</div>
+<!-- Guidelines/Notes -->
+<div class="bg-primary-50/50 border border-primary-100 rounded-3xl p-6 space-y-4">
+<div class="flex items-center gap-2 text-blue-600">
+<span class="material-symbols-outlined text-lg">info</span>
+<span class="font-bold text-sm">娓╅Θ鎻愮ず</span>
+</div>
+<ul class="space-y-3 text-xs text-slate-500 leading-relaxed font-medium">
+<li class="flex gap-3">
+<span class="text-blue-400">1.</span>
+<span>瀛︾敓鐢ㄦ埛锛氭湰浜у搧閰嶅鏈夌嫭绔婣PP锛屽彲浠ュ幓搴旂敤鍟嗗簵鎼滅储骞朵笅杞姐€</span>
+</li>
+<li class="flex gap-3">
+<span class="text-blue-400">2.</span>
+<span>鏁欏笀鐢ㄦ埛锛氭湰浜у搧閰嶅鏈夌綉椤电绠＄悊绯荤粺锛岀浉鍏充俊鎭彲閫氳繃瀹樻柟娓犻亾浜嗚В銆</span>
+</li>
+<li class="flex gap-3">
+<span class="text-blue-400">3.</span>
+<span>鍚屼竴鎵嬫満鍙蜂粎鍙敵璇疯瘯鐢ㄤ竴娆★紝鐢宠鍚庤处鍙疯嚜鍔ㄥ紑閫氾紝璇曠敤鏈熶负2澶┿€</span>
+</li>
+<li class="flex gap-3">
+<span class="text-blue-400">4.</span>
+<span>鏈変换浣曢棶棰樺彲浠ュ姞鍏ユ姈闊充富椤电矇涓濈兢杩涜鍜ㄨ銆</span>
+</li>
+</ul>
+</div>
+</div>
+</main>
+<!-- Bottom Navigation Bar -->
+<nav class="fixed bottom-0 w-full glass-card border-t border-slate-100 flex items-center justify-around px-8 pb-8 pt-3 z-50">
+<a class="bottom-nav-link inactive" href="#">
+<span class="material-symbols-outlined text-2xl">home</span>
+<span class="text-[10px] font-bold">浜у搧浠嬬粛</span>
+</a>
+<a class="bottom-nav-link active" href="#">
+<div class="relative">
+<span class="material-symbols-outlined text-2xl" style="font-variation-settings: 'FILL' 1;">assignment_turned_in</span>
+<span class="absolute -top-1 -right-1 w-2 h-2 bg-blue-600 rounded-full"></span>
+</div>
+<span class="text-[10px] font-bold">鐢宠璇曠敤</span>
+</a>
+</nav>
+</body></html>