130 lines
3.8 KiB
Vue
130 lines
3.8 KiB
Vue
<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>
|