feat: 对接各个视频数据

2025-12-30 19:42:47 +08:00
1 parent 6103453e32
commit 6ab98c4764
@@ -0,0 +1,129 @@
+<script lang="ts" setup>
+import { useRouter } from 'vue-router'
+import { Video } from '@/components'
+import { ImgButton } from '@/components/Button'
+import { StarRating } from '@/components/Rating'
+import { IMAGE_PATHS, getBackgroundImage } from '@/utils'
+import { Overlay } from '@/components/Overlay'
+import { ref } from 'vue'
+
+const router = useRouter()
+
+const props = defineProps({
+  path: {
+    type: String,
+    required: true
+  }
+})
+
+interface EvaluationItem {
+  /** 标题 */
+  title: string
+  /** 描述 */
+  description: string
+  /** 评分 */
+  score: number
+}
+
+/** 评估项目列表 */
+const evaluationItems = ref<EvaluationItem[]>([
+  {
+    title: '主题与内容',
+    description: '主题明确聚焦"身边美好"，内容真实、有感染力，能让观众感受到日常闪光',
+    score: 3
+  },
+  {
+    title: '拍摄技巧',
+    description: '运镜自然、光线运用合理、画面清晰饱和度、能辅助主题表达（至少1种运镜+1种光线）',
+    score: 4
+  },
+  {
+    title: '剪辑与包装',
+    description: '素材拼接流畅，调色/滤镜适配、字幕清晰、音乐不盖人声、整体风格统一',
+    score: 5
+  },
+  {
+    title: '创意与独特性',
+    description: '视角新颖、有个人观察，或用特殊细节/情节展现“美好”,避免平淡复刻',
+    score: 4
+  },
+  {
+    title: '综合感受',
+    description: '视角新颖、有个人观察，或用特殊细节/情节展现“美好”避免平淡复刻',
+    score: 5
+  }
+])
+
+/** 保存弹窗 */
+const showModal = ref<boolean>(false)
+
+/** 返回上一页 */
+const handleBack = (): void => {
+  router.back()
+}
+</script>
+
+<template>
+  <div class="relative h-full">
+    <ImgButton
+      class="absolute right-0 top-0 z-50"
+      :image="IMAGE_PATHS.COMPONENTS.BACK"
+      @click="handleBack"
+    />
+    <ImgButton
+      class="absolute right-0 bottom-10 z-50"
+      image="vlog/practice/评分"
+      @click="showModal = true"
+    />
+    <Video
+      :src="decodeURIComponent(props.path)"
+      :volume="1"
+      :muted="false"
+      :controls="true"
+      :loop="false"
+    />
+
+    <!-- 保存图片弹窗 -->
+    <Overlay :visible="showModal" :clickable="false">
+      <div
+        class="w-[1795px] h-[987px] bg-no-repeat bg-cover p-10 pt-[80px]"
+        :style="{ backgroundImage: getBackgroundImage('vlog/practice/评分底板') }"
+      >
+        <ImgButton
+          class="absolute -top-8 -right-14 z-10"
+          :image="IMAGE_PATHS.COMPONENTS.CLOSE"
+          @click="showModal = false"
+        />
+
+        <div class="relative h-full overflow-y-scroll px-8">
+          <div
+            class="w-full bg-no-repeat bg-cover bg-left py-44"
+            :style="{ backgroundImage: getBackgroundImage('vlog/practice/滑动表内文字') }"
+          >
+            <div class="pl-10 space-y-16">
+              <div
+                v-for="(item, index) in evaluationItems"
+                :key="index"
+                class="relative w-full h-[182px] bg-no-repeat bg-cover px-12 py-3 flex justify-between"
+                :style="{ backgroundImage: getBackgroundImage('vlog/practice/评分条') }"
+              >
+                <div class="pr-8 space-y-10">
+                  <h4 class="text-3xl font-bold text-white mb-3">
+                    {{ `0${index + 1}` }} {{ item.title }}
+                  </h4>
+                  <p class="text-3xl text-gray-800 font-bold leading-relaxed">
+                    {{ item.description }}
+                  </p>
+                </div>
+                <StarRating class="absolute -bottom-5 right-10" :score="item.score" size="lg" />
+              </div>
+              <div class="w-full flex justify-center">
+                <ImgButton image="vlog/practice/保存" @click="showModal = false" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Overlay>
+  </div>
+</template>