zhongyidianandClaude Opus 4.7
1f8723aabd
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
116 lines
2.9 KiB
Vue
116 lines
2.9 KiB
Vue
<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 PracticeRatingModal, {
|
||
type PracticeRatingItem,
|
||
} from '@/components/PracticeRatingModal'
|
||
|
||
const router = useRouter()
|
||
|
||
/** 笔记内容 */
|
||
const noteContent = ref<string>('')
|
||
|
||
/** 保存弹窗 */
|
||
const showModal = ref<boolean>(false)
|
||
|
||
/** 返回上一页 */
|
||
const handleBack = (): void => {
|
||
router.back()
|
||
}
|
||
|
||
const disabled = computed<boolean>(() => noteContent.value.trim() === '')
|
||
|
||
/** 评估项目列表 */
|
||
const evaluationItems = ref<PracticeRatingItem[]>([
|
||
{
|
||
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>
|
||
|
||
<PracticeRatingModal
|
||
:visible="showModal"
|
||
:items="evaluationItems"
|
||
background-image="film/practice/电影感短视频创作-作品评分表"
|
||
top-tip="评分时要关注5个维度哦～分别是画面氛围、抽摄方法、剪辑逻辑、创作意识、综合观感，每个维度满分5分，能打1-5分，记得对照作品表现来打分呀～"
|
||
bottom-tip="己评价的实战作品，从封面入口就能直接看到具体评分！打了多少分一目了然，不用再点进详情页翻找啦～"
|
||
@close="showModal = false"
|
||
/>
|
||
</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>
|