feat: 对接各个视频数据

2025-12-30 19:42:47 +08:00
1 parent 6103453e32
commit 6ab98c4764
@@ -0,0 +1,170 @@
+<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: 4
+  },
+  {
+    title: '拍摄方法',
+    description: '拍摄方式选择合理，镜头语言服务于画面表达',
+    score: 2
+  },
+  {
+    title: '剪辑逻辑',
+    description: '剪辑节奏清晰，镜头衔接自然，有整体感',
+    score: 5
+  },
+  {
+    title: '创作意识',
+    description: '能体现主动构思，而非随拍拼接',
+    score: 0
+  },
+  {
+    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('film/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('film/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="pl-10 space-y-10 mt-10">
+            <p class="glow-text">
+              评分时要关注5个维度哦～每个维度满分5分，能打1-5分，记得对照作品表现来打分呀～
+            </p>
+            <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>
+            <p class="glow-text">
+              己评价的实战作品，从封面入口就能直接看到具体评分！打了多少分一目了然，不用再点进详情页翻找啦～
+            </p>
+            <div class="w-full flex justify-center">
+              <ImgButton image="vlog/practice/保存" @click="showModal = false" />
+            </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;
+}
+
+.glow-text {
+  color: white;
+  font-size: 2rem;
+  font-weight: bold;
+  text-shadow:
+    /* 描边效果 - 多层阴影模拟描边 */
+    -1px -1px 0 #0066ff,
+    1px -1px 0 #0066ff,
+    -1px 1px 0 #0066ff,
+    1px 1px 0 #0066ff,
+    -2px -2px 0 #0066ff,
+    2px -2px 0 #0066ff,
+    -2px 2px 0 #0066ff,
+    2px 2px 0 #0066ff,
+    /* 发光效果 - 蓝色光晕 */ 0 0 10px #0066ff,
+    0 0 20px #0066ff,
+    0 0 30px #0066ff,
+    0 0 40px #0066ff,
+    0 0 50px #0066ff;
+}
+</style>