forked from zhongyidian/super_video
feat: 完善技能树功能架构与逻辑流程文档,新增视频播放与学习进度追踪功能
This commit is contained in:
1 parent
6090abf955
commit
e9a1fee27f
42 files changed
+1849
-760
No files matched your search
@@ -154,14 +154,14 @@ const currentStepContent = computed(() => {
|
||||
const step = currentStepData.value
|
||||
if (!step) return ''
|
||||
|
||||
if (!step.title) {
|
||||
return `${step.content}`
|
||||
}
|
||||
// if (!step.title) {
|
||||
return `${step.content}`
|
||||
// }
|
||||
|
||||
return `
|
||||
<h3 class="text-lg font-bold mb-2">${step.title}</h3>
|
||||
<div class="leading-relaxed">${step.content}</div>
|
||||
`
|
||||
// return `
|
||||
// <h3 class="text-lg font-bold mb-2">${step.title}</h3>
|
||||
// <div class="leading-relaxed">${step.content}</div>
|
||||
// `
|
||||
})
|
||||
|
||||
const handleNext = () => {
|
||||
|
||||
@@ -56,7 +56,7 @@
|
||||
</div> -->
|
||||
|
||||
<!-- 步骤标签 -->
|
||||
<div class="step-label" :class="`step-label--${step.type}`">
|
||||
<div class="step-label" :class="getTagColor(step.label)">
|
||||
{{ step.label }}
|
||||
</div>
|
||||
|
||||
@@ -93,6 +93,7 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted, nextTick, watch } from 'vue'
|
||||
import { getTagColor } from '@/utils'
|
||||
|
||||
export interface StepItem {
|
||||
id: string
|
||||
@@ -354,38 +355,9 @@ onMounted(() => {
|
||||
|
||||
.step-label {
|
||||
@apply px-16 py-4 rounded-full text-2xl font-semibold mr-4 whitespace-nowrap;
|
||||
color: white;
|
||||
min-width: 5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.step-label--shooting {
|
||||
background: linear-gradient(135deg, #22c55e, #16a34a);
|
||||
box-shadow: 0 2px 8px rgba(34, 197, 94, 0.4);
|
||||
}
|
||||
|
||||
.step-label--planning {
|
||||
background: linear-gradient(135deg, #e38872, #e38872);
|
||||
box-shadow: 0 2px 8px rgba(249, 115, 22, 0.4);
|
||||
}
|
||||
|
||||
/* 蓝色 */
|
||||
.step-label--blue {
|
||||
background: linear-gradient(135deg, #0ea5e9, #0284c7);
|
||||
box-shadow: 0 2px 8px rgba(14, 165, 233, 0.4);
|
||||
}
|
||||
|
||||
/* 天蓝色 */
|
||||
.step-label--post {
|
||||
/* background: linear-gradient(180deg, #9ed5ee, #0ea5e9); */
|
||||
background-color: #70c7ef;
|
||||
box-shadow: 0 2px 8px rgba(14, 165, 233, 0.4);
|
||||
}
|
||||
|
||||
.step-label--other {
|
||||
/* background: linear-gradient(135deg, #a855f7, #9445de); */
|
||||
background-color: #5f15d7;
|
||||
box-shadow: 0 2px 8px rgba(168, 85, 247, 0.4);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.step-content {
|
||||
|
||||
Reference in new issue
Block a user