feat: 对接各个视频数据

2025-12-30 19:42:47 +08:00
1 parent 6103453e32
commit 6ab98c4764
@@ -0,0 +1,148 @@
+<script lang="ts" setup>
+import { computed, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { getBackgroundImage, IMAGE_PATHS } from '@/utils'
+import { ImgButton } from '@/components/Button'
+import { Overlay } from '@/components/Overlay'
+import { StarRating } from '@/components/Rating'
+
+const router = useRouter()
+
+/** 笔记内容 */
+const noteContent = ref<string>('')
+
+/** 保存弹窗 */
+const showModal = ref<boolean>(false)
+
+/** 返回上一页 */
+const handleBack = (): void => {
+  router.back()
+}
+
+const disabled = computed<boolean>(() => noteContent.value.trim() === '')
+
+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 handleSave = (): void => {
+  console.log('保存笔记')
+  handleBack()
+}
+</script>
+
+<template>
+  <div
+    class="w-full h-full bg-no-repeat bg-cover px-8 pt-[400px]"
+    :style="{ backgroundImage: getBackgroundImage('vlog/practice/创作笔记底图') }"
+  >
+    <ImgButton
+      class="absolute top-0 right-0"
+      :image="IMAGE_PATHS.COMPONENTS.CLOSE"
+      @click="handleBack"
+    />
+
+    <textarea
+      v-model="noteContent"
+      class="w-full h-[300px]"
+      name="myNotes"
+      placeholder="点击输入创作笔记"
+    ></textarea>
+
+    <div class="absolute bottom-24 left-1/2 -translate-x-1/2 flex gap-60">
+      <ImgButton image="vlog/practice/保存" @click="handleSave" />
+      <ImgButton image="vlog/practice/自评" :disabled="disabled" @click="showModal = true" />
+    </div>
+
+    <!-- 保存图片弹窗 -->
+    <Overlay :visible="showModal" :clickable="false">
+      <div
+        class="w-[1795px] h-[987px] bg-no-repeat bg-cover p-10 pt-[100px]"
+        :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>
+
+<style scoped>
+textarea {
+  border: none;
+  outline: none;
+  resize: none;
+  font-size: 36px;
+  background-color: transparent;
+}
+
+textarea::placeholder {
+  color: #5d5b5b;
+  font-weight: 700;
+}
+</style>