forked from zhongyidian/super_video
feat: 添加 Vlog 模块路由和相关图像路径，更新模块切换器交互
This commit is contained in:
zhongyidian committed
1 parent
02ddfd0c07
commit
aeec7fceed
247 files changed
+534
-3
No files matched your search
@@ -0,0 +1,277 @@
|
||||
<!--
|
||||
进度条组件
|
||||
用于显示制作变焦镜的步骤进度
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="progress-bar-container">
|
||||
<!-- 主进度条 -->
|
||||
<div class="progress-bar">
|
||||
<!-- 中间步骤指示器 -->
|
||||
<div class="steps-section" v-if="currentStep > 0">
|
||||
<!-- 标题区域 -->
|
||||
<div class="absolute top-0 left-40">
|
||||
<img
|
||||
:src="getStaticImage(IMAGE_PATHS.PROGRESS_BAR.TITLE)"
|
||||
alt="制作变焦镜-我的志愿者手记"
|
||||
class="title-image"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-for="(step, index) in steps.slice(0, 3)"
|
||||
:key="index"
|
||||
class="step-item"
|
||||
:class="getStepStatus(index)"
|
||||
>
|
||||
<span class="step-text">{{ step.name }}</span>
|
||||
<div class="step-dots">•••••</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute top-0 left-40" v-else>
|
||||
<img
|
||||
:src="getStaticImage(IMAGE_PATHS.PROGRESS_BAR.UNLOCKED)"
|
||||
alt="未解锁"
|
||||
class="icon-image"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 右侧完成按钮 -->
|
||||
<div class="right-section">
|
||||
<button @click="handleComplete" :disabled="!canComplete">
|
||||
<img
|
||||
:src="
|
||||
getStaticImage(
|
||||
canComplete
|
||||
? IMAGE_PATHS.PROGRESS_BAR.COMPLETE_BUTTON
|
||||
: IMAGE_PATHS.PROGRESS_BAR.COMPLETE_BUTTON_DISABLED
|
||||
)
|
||||
"
|
||||
alt="完成前置-即可开启实战"
|
||||
class="button-image"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed } from 'vue'
|
||||
import { getStaticImage, IMAGE_PATHS } from '@/utils'
|
||||
|
||||
// 定义组件属性
|
||||
interface Props {
|
||||
/** 当前步骤索引 (0-3) */
|
||||
currentStep?: number
|
||||
}
|
||||
|
||||
// 定义事件
|
||||
interface Emits {
|
||||
/** 点击完成按钮时触发 */
|
||||
complete: []
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
currentStep: 0
|
||||
})
|
||||
|
||||
const emit = defineEmits<Emits>()
|
||||
|
||||
// 计算属性：是否可以完成（当前在最后一步）
|
||||
const canComplete = computed(() => props.currentStep === 3)
|
||||
|
||||
// 处理完成按钮点击
|
||||
const handleComplete = () => {
|
||||
if (canComplete.value) {
|
||||
emit('complete')
|
||||
}
|
||||
}
|
||||
|
||||
// 步骤配置
|
||||
const steps = [
|
||||
{ name: '前期准备', icon: '📋' },
|
||||
{ name: '中期拍摄', icon: '📹' },
|
||||
{ name: '后期剪辑', icon: '🎬' },
|
||||
{ name: '即可开启实战', icon: '⚡' }
|
||||
]
|
||||
|
||||
// 获取步骤状态
|
||||
const getStepStatus = (stepIndex: number) => {
|
||||
if (stepIndex < props.currentStep) return 'completed'
|
||||
if (stepIndex === props.currentStep) return 'current'
|
||||
return 'locked'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.progress-bar-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.title-image {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 15px 20px;
|
||||
height: 292px;
|
||||
background-image: url('@/assets/images/components/ProgressBar-bg.png');
|
||||
background-size: cover;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.icon-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.steps-section {
|
||||
width: 1600px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin: 30px 20px 0;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.step-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.step-text {
|
||||
font-size: 26px;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
text-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.step-dots {
|
||||
font-size: 14px;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
letter-spacing: 3px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* 步骤状态样式 */
|
||||
.step-item.completed .step-text {
|
||||
color: #4ade80;
|
||||
font-weight: bold;
|
||||
text-shadow: 0 0 8px rgba(74, 222, 128, 0.6);
|
||||
}
|
||||
|
||||
.step-item.completed .step-dots {
|
||||
color: #4ade80;
|
||||
text-shadow: 0 0 4px rgba(74, 222, 128, 0.4);
|
||||
}
|
||||
|
||||
.step-item.current .step-text {
|
||||
color: #fbbf24;
|
||||
font-weight: bold;
|
||||
text-shadow: 0 0 8px rgba(251, 191, 36, 0.6);
|
||||
}
|
||||
|
||||
.step-item.current .step-dots {
|
||||
color: #fbbf24;
|
||||
text-shadow: 0 0 4px rgba(251, 191, 36, 0.4);
|
||||
}
|
||||
|
||||
.step-item.locked .step-text {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
text-shadow: 0 0 4px rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.step-item.locked .step-dots {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.right-section {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
button {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
button:hover:not(:disabled) {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
button:active:not(:disabled) {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.button-image {
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.progress-bar {
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
padding: 20px 15px;
|
||||
}
|
||||
|
||||
.right-section {
|
||||
min-width: auto;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.steps-section {
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.step-item {
|
||||
flex-direction: row;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.step-dots {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.button-image {
|
||||
width: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.progress-bar {
|
||||
padding: 15px 10px;
|
||||
}
|
||||
|
||||
.step-text {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.button-image {
|
||||
width: 70px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user