Videos Added 2.

Author: henrywch

src/components/VideoCard.vue

@@ -9,7 +9,7 @@ defineProps<{
 <template>
   <router-link
     :to="{ name: 'demo', params: { id: video.id } }"
-    class="group block overflow-hidden rounded-2xl border border-emerald-100 bg-white/80 backdrop-blur-sm transition-all duration-300 hover:border-emerald-300 hover:shadow-xl hover:shadow-emerald-900/10 hover:-translate-y-1"
+    class="group flex h-full flex-col overflow-hidden rounded-2xl border border-emerald-100 bg-white/80 backdrop-blur-sm transition-all duration-300 hover:border-emerald-300 hover:shadow-xl hover:shadow-emerald-900/10 hover:-translate-y-1"
   >
     <div class="relative aspect-video overflow-hidden bg-emerald-900/10">
       <!-- Use video element for thumbnail when no image is provided -->
@@ -43,7 +43,7 @@ defineProps<{
         </div>
       </div>
     </div>
-    <div class="p-5">
+    <div class="flex flex-1 flex-col p-5">
       <h3
         class="mb-2 text-lg font-bold text-gray-800 transition-colors group-hover:text-emerald-700"
       >
@@ -52,7 +52,7 @@ defineProps<{
       <p class="mb-4 line-clamp-2 text-sm leading-relaxed text-gray-600">
         {{ video.description }}
       </p>
-      <div class="flex flex-wrap gap-2">
+      <div class="mt-auto flex flex-wrap gap-2">
         <span
           v-for="tag in video.tags"
           :key="tag"
@@ -63,7 +63,7 @@ defineProps<{
         <span
           class="rounded-full bg-emerald-100 px-3 py-1 text-xs font-bold text-emerald-800 border border-emerald-200"
         >
-          {{ video.questions.length }} questions
+          {{ video.questions.length }} 个问题
         </span>
       </div>
     </div>

src/data/demos.ts

@@ -60,18 +60,18 @@ export const demos: DemoVideo[] = [
     ],
   },
   {
-    id: "dakaimen",
-    title: "大开门",
+    id: "taishi-luroufan",
+    title: "台式卤肉饭",
     description: "一段关于「大开门」的精彩视频片段。",
-    videoUrl: hfUrl("大开门.mp4"),
+    videoUrl: hfUrl("台式卤肉饭.mp4"),
     thumbnailUrl: "",
-    tags: ["生活", "趣味"],
+    tags: ["生活", "菜谱"],
     questions: [
       {
         id: "dk-q1",
-        text: "视频中猫咪一共被喂食了几次，具体时间是？",
+        text: "根据视频，简述做菜的步骤并且定位相应的时间段",
         answer:
-          "猫咪一共被喂食了五次。第一次在00:03，第二次在00:12，第三次在00:18，第四次在00:27，第五次在00:37。",
+          "从 00:00 开始到 00:06 结束，我们可以看到特写镜头首先展示了一锅正在炖煮的卤肉，锅中包含肉块、卤蛋和葱段，表面撒有香料，随后镜头聚焦于锅中正在冒泡的卤肉，热气腾腾，色泽诱人。画面中央出现白色文字“台式卤肉饭”，紧接着镜头切换，用木勺将卤肉舀到一碗白米饭上，米饭旁配有切开的卤蛋和绿色蔬菜。画面下方出现白色字幕：“软糯入味的卤肉饭没有人不爱吧~”。随后，一个木勺舀起一勺卤肉和米饭，展示其丰富的配料和诱人的色泽，画面下方再次出现白色字幕：“软糯入味的卤肉饭没有人不爱吧~”。整个视频以成品展示开场，呈现了这道台式卤肉饭的诱人外观和制作完成后的摆盘效果。\n\n在 00:06 至 00:11 期间，一只手使用菜刀在木质砧板上将五花肉切成小块，画面下方显示白色字幕“五花肉切小块”；随后，同一块砧板上被切碎的红葱头，画面下方出现白色字幕“红葱头切小丁”；接着，切碎的干香菇也被展示在砧板上，画面下方显示白色字幕“泡发好的干香菇切丁”。随后镜头切换，展示出四个装有食材的碗，分别盛放着切好的五花肉、干香菇、红葱头和蒜末，所有食材整齐摆放，准备用于后续的烹饪步骤。整个过程围绕食材的初步处理展开，清晰呈现了五花肉、红葱头和干香菇的切割方式与状态。\n\n在 00:11 至 00:24 期间，视频展示了在平底锅中，切碎的红葱头被倒入热油中，伴随着“下锅小火慢炸”的白色字幕，厨师用木铲不断翻炒，直至红葱头呈现出金黄色，随后用漏勺将其捞出，留下热油在锅中。接着，切好的五花肉被放入锅中，画面显示“五花肉 蒜末 姜片”的白色字幕，厨师继续用木铲翻炒，使五花肉逐渐煸炒出油脂，画面下方出现“煸炒出油脂”的白色字幕。随后，厨师将煸炒出的多余油脂倒入另一个碗中，画面下方显示“多余的油盛出来 油多了会腻”的白色字幕。紧接着，厨师向锅中加入一勺料酒、两勺生抽、一勺老抽、八角、桂皮、香叶以及几颗冰糖，画面左侧出现白色文字列表，详细列出了所用的调味料，包括“1勺料酒 2勺生抽 1勺老抽 八角 桂皮 香叶 几颗冰糖”，厨师继续翻炒，使五花肉均匀地裹上酱汁，画面下方出现“翻炒均匀”的白色字幕。整个过程清晰展示了卤肉的初步烹饪步骤，包括炸红葱头、煸炒五花肉以及加入调味料进行翻炒。\n\n00:24 至 00:31，画面显示切好的干香菇丁和葱头丁被加入锅中，与五花肉一起翻炒，画面下方出现白色字幕“下锅干香菇丁和葱头丁”。随后，厨师向锅中倒入适量的水，画面下方出现白色字幕“加入没过食材”，接着将三个卤蛋放入锅中，画面下方出现白色字幕“再几个鸡蛋 小火煮一个小时”。最后，厨师盖上锅盖，画面下方出现白色字幕“开盖后再煮10分钟 收浓汤汁”。整个过程展示了卤肉的收尾阶段，包括加入干香菇和葱头丁、加水、放入卤蛋并盖上锅盖进行长时间炖煮。\n\n从 00:31 开始到 00:37 结束，我们可以看到特写镜头展示了卤肉在锅中炖煮的过程，汤汁正在慢慢收浓，随后画面切换至卤肉被盛入一碗白米饭中，旁边摆放着切开的卤蛋和绿色蔬菜，厨师使用木勺将卤肉与米饭充分搅拌，画面下方出现白色字幕：“酱汁浓郁 拌着米饭吃真的超级香~”。紧接着，一个木勺舀起一勺拌好的卤肉饭，画面下方再次出现白色字幕：“卤肉软糯入味 肥而不腻~太好吃啦”。视频以这道完成的台式卤肉饭作为结尾，展示了其最终的呈现效果和诱人的口感。",
       },
     ],
   },
@@ -105,6 +105,12 @@ export const demos: DemoVideo[] = [
         answer:
           "中杯、大杯和特大杯。",
       },
+      {
+        id: "lg-q2",
+        text: "罗老师为什么最后情绪激动",
+        answer:
+          "在视频中，罗老师多次尝试用中杯拿铁表达需求，但店员始终将中杯错误地理解为大杯，导致他反复纠正并表现出无奈。当店员再次将中杯误认为大杯时，罗老师的情绪逐渐升级，最终爆发。这种反复误解直接导致了他的情绪激动。因此，罗老师最后情绪激动是因为店员多次将他要求的中杯拿铁误解为大杯，导致他反复纠正却无法被理解，最终情绪失控。",
+      },
     ],
   },
 ];