diff --git a/package.json b/package.json index 3d84ac8..c13b9fb 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "prepare": "husky" }, "dependencies": { + "less": "^4.4.1", "vue": "^3.5.18", "vue-router": "^4.5.1" }, diff --git a/src/assets/images/equipment/侧边导航栏.png b/src/assets/images/equipment/侧边导航栏.png new file mode 100644 index 0000000..7eb6226 Binary files /dev/null and b/src/assets/images/equipment/侧边导航栏.png differ diff --git a/src/assets/images/equipment/内容-安卓小米.png b/src/assets/images/equipment/内容-安卓小米.png new file mode 100644 index 0000000..7d27721 Binary files /dev/null and b/src/assets/images/equipment/内容-安卓小米.png differ diff --git a/src/assets/images/equipment/内容-苹果.png b/src/assets/images/equipment/内容-苹果.png new file mode 100644 index 0000000..3c055f2 Binary files /dev/null and b/src/assets/images/equipment/内容-苹果.png differ diff --git a/src/assets/images/equipment/手机-亮.png b/src/assets/images/equipment/手机-亮.png new file mode 100644 index 0000000..ffc0f65 Binary files /dev/null and b/src/assets/images/equipment/手机-亮.png differ diff --git a/src/assets/images/equipment/手机-暗.png b/src/assets/images/equipment/手机-暗.png new file mode 100644 index 0000000..70c1948 Binary files /dev/null and b/src/assets/images/equipment/手机-暗.png differ diff --git a/src/assets/images/equipment/按钮-右滑.png b/src/assets/images/equipment/按钮-右滑.png new file mode 100644 index 0000000..7515128 Binary files /dev/null and b/src/assets/images/equipment/按钮-右滑.png differ diff --git a/src/assets/images/equipment/按钮-展开.png b/src/assets/images/equipment/按钮-展开.png new file mode 100644 index 0000000..b5d851b Binary files /dev/null and b/src/assets/images/equipment/按钮-展开.png differ diff --git a/src/assets/images/equipment/按钮-左滑.png b/src/assets/images/equipment/按钮-左滑.png new file mode 100644 index 0000000..f52a662 Binary files /dev/null and b/src/assets/images/equipment/按钮-左滑.png differ diff --git a/src/assets/images/equipment/按钮-收缩.png b/src/assets/images/equipment/按钮-收缩.png new file mode 100644 index 0000000..5764a17 Binary files /dev/null and b/src/assets/images/equipment/按钮-收缩.png differ diff --git a/src/assets/images/equipment/按钮选中-设备准备.png b/src/assets/images/equipment/按钮选中-设备准备.png new file mode 100644 index 0000000..df7c363 Binary files /dev/null and b/src/assets/images/equipment/按钮选中-设备准备.png differ diff --git a/src/assets/images/equipment/标题-安卓小米.png b/src/assets/images/equipment/标题-安卓小米.png new file mode 100644 index 0000000..80a8350 Binary files /dev/null and b/src/assets/images/equipment/标题-安卓小米.png differ diff --git a/src/assets/images/equipment/标题-苹果.png b/src/assets/images/equipment/标题-苹果.png new file mode 100644 index 0000000..8cd403c Binary files /dev/null and b/src/assets/images/equipment/标题-苹果.png differ diff --git a/src/assets/images/equipment/浮空屏.png b/src/assets/images/equipment/浮空屏.png new file mode 100644 index 0000000..c78cb44 Binary files /dev/null and b/src/assets/images/equipment/浮空屏.png differ diff --git a/src/assets/images/equipment/设备-手机1.png b/src/assets/images/equipment/设备-手机1.png new file mode 100644 index 0000000..bd2243c Binary files /dev/null and b/src/assets/images/equipment/设备-手机1.png differ diff --git a/src/assets/images/equipment/设备-手机2.png b/src/assets/images/equipment/设备-手机2.png new file mode 100644 index 0000000..49839e1 Binary files /dev/null and b/src/assets/images/equipment/设备-手机2.png differ diff --git a/src/assets/images/equipment/设备准备-背景.png b/src/assets/images/equipment/设备准备-背景.png new file mode 100644 index 0000000..f70a01c Binary files /dev/null and b/src/assets/images/equipment/设备准备-背景.png differ diff --git a/src/assets/images/equipment/设备准备引导1.png b/src/assets/images/equipment/设备准备引导1.png new file mode 100644 index 0000000..4d41d95 Binary files /dev/null and b/src/assets/images/equipment/设备准备引导1.png differ diff --git a/src/assets/images/equipment/返回.png b/src/assets/images/equipment/返回.png new file mode 100644 index 0000000..88aae74 Binary files /dev/null and b/src/assets/images/equipment/返回.png differ diff --git a/src/assets/images/equipment/选中按钮.png b/src/assets/images/equipment/选中按钮.png new file mode 100644 index 0000000..9912a89 Binary files /dev/null and b/src/assets/images/equipment/选中按钮.png differ diff --git a/src/assets/images/midterm/中期拍摄.png b/src/assets/images/midterm/中期拍摄.png new file mode 100644 index 0000000..d9f73c5 Binary files /dev/null and b/src/assets/images/midterm/中期拍摄.png differ diff --git a/src/assets/images/midterm/中期拍摄底板.png b/src/assets/images/midterm/中期拍摄底板.png new file mode 100644 index 0000000..88ed323 Binary files /dev/null and b/src/assets/images/midterm/中期拍摄底板.png differ diff --git a/src/assets/images/midterm/准备图标.png b/src/assets/images/midterm/准备图标.png new file mode 100644 index 0000000..5a7e143 Binary files /dev/null and b/src/assets/images/midterm/准备图标.png differ diff --git a/src/assets/images/midterm/前期准备.png b/src/assets/images/midterm/前期准备.png new file mode 100644 index 0000000..e7624b0 Binary files /dev/null and b/src/assets/images/midterm/前期准备.png differ diff --git a/src/assets/images/midterm/剪辑图标.png b/src/assets/images/midterm/剪辑图标.png new file mode 100644 index 0000000..cc3b3e4 Binary files /dev/null and b/src/assets/images/midterm/剪辑图标.png differ diff --git a/src/assets/images/midterm/叉.png b/src/assets/images/midterm/叉.png new file mode 100644 index 0000000..b5a110d Binary files /dev/null and b/src/assets/images/midterm/叉.png differ diff --git a/src/assets/images/midterm/后期剪辑.png b/src/assets/images/midterm/后期剪辑.png new file mode 100644 index 0000000..c7fed27 Binary files /dev/null and b/src/assets/images/midterm/后期剪辑.png differ diff --git a/src/assets/images/midterm/完成.png b/src/assets/images/midterm/完成.png new file mode 100644 index 0000000..b76e28f Binary files /dev/null and b/src/assets/images/midterm/完成.png differ diff --git a/src/assets/images/midterm/引导遮罩.png b/src/assets/images/midterm/引导遮罩.png new file mode 100644 index 0000000..d51d9c8 Binary files /dev/null and b/src/assets/images/midterm/引导遮罩.png differ diff --git a/src/assets/images/midterm/拍摄图标.png b/src/assets/images/midterm/拍摄图标.png new file mode 100644 index 0000000..862101a Binary files /dev/null and b/src/assets/images/midterm/拍摄图标.png differ diff --git a/src/assets/images/midterm/进度装饰(已完成.png b/src/assets/images/midterm/进度装饰(已完成.png new file mode 100644 index 0000000..d87fb67 Binary files /dev/null and b/src/assets/images/midterm/进度装饰(已完成.png differ diff --git a/src/assets/images/midterm/进度装饰(未完成.png b/src/assets/images/midterm/进度装饰(未完成.png new file mode 100644 index 0000000..6cb869e Binary files /dev/null and b/src/assets/images/midterm/进度装饰(未完成.png differ diff --git a/src/assets/images/vlog/进度数字/%.png b/src/assets/images/vlog/进度数字/percentage.png similarity index 100% rename from src/assets/images/vlog/进度数字/%.png rename to src/assets/images/vlog/进度数字/percentage.png diff --git a/src/components/ProgressBar/ProgressBar.vue b/src/components/ProgressBar/ProgressBar.vue index 6b25e8c..a272e22 100644 --- a/src/components/ProgressBar/ProgressBar.vue +++ b/src/components/ProgressBar/ProgressBar.vue @@ -23,8 +23,11 @@ class="step-item" :class="getStepStatus(index)" > - {{ step.name }} -
•••••
+ + + + +
@@ -89,10 +92,18 @@ const handleComplete = () => { // 步骤配置 const steps = [ - { name: '前期准备', icon: '📋' }, - { name: '中期拍摄', icon: '📹' }, - { name: '后期剪辑', icon: '🎬' }, - { name: '即可开启实战', icon: '⚡' } + { + name: '/src/assets/images/midterm/前期准备.png', + icon: '/src/assets/images/midterm/准备图标.png' + }, + { + name: '/src/assets/images/midterm/中期拍摄.png', + icon: '/src/assets/images/midterm/拍摄图标.png' + }, + { + name: '/src/assets/images/midterm/后期剪辑.png', + icon: '/src/assets/images/midterm/剪辑图标.png' + } ] // 获取步骤状态 @@ -142,6 +153,7 @@ const getStepStatus = (stepIndex: number) => { } .step-item { + padding-left: 300px; display: flex; flex-direction: column; align-items: center; @@ -150,12 +162,19 @@ const getStepStatus = (stepIndex: number) => { } .step-text { - font-size: 26px; + /* font-size: 40px; */ color: white; font-weight: bold; text-align: center; white-space: nowrap; text-shadow: 0 0 8px rgba(255, 255, 255, 0.5); + display: flex; + justify-content: center; + align-items: center; +} + +.step-ellipsis { + padding-left: 17px; } .step-dots { diff --git a/src/router/index.ts b/src/router/index.ts index 84d3384..356ca48 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -51,6 +51,31 @@ const routes: RouteRecordRaw[] = [ meta: { title: '视频' } + }, + //中期拍摄 + { + path: '/midterm', + name: 'midterm', + component: () => import('@/views/midterm-shooting/midterm/index.vue'), + meta: { + title: '中期拍摄' + } + }, + { + path: '/equipment', + name: 'equipment', + component: () => import('@/views/midterm-shooting/equipment/index.vue'), + meta: { + title: '设备准备' + } + }, + { + path: '/prepare', + name: 'Prepare', + component: () => import('@/views/prepare/index.vue'), + meta: { + title: '脚本准备' + } } ] diff --git a/src/utils/index.ts b/src/utils/index.ts index fe1e60a..37c939a 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -68,6 +68,25 @@ export const IMAGE_PATHS = { BG: 'vlog/bg', BG_CENTER: 'vlog/bg-center', TITLE: 'vlog/title', + PREPARE: 'vlog/制作变焦镜/入口节点/前期准备底板', + Midterm: 'vlog/制作变焦镜/入口节点/中期拍摄底板', + MidtermEquipment: 'vlog/制作变焦镜/入口节点/按钮-设备准备', + MidtermFraming: 'vlog/制作变焦镜/入口节点/按钮-实地取景', + MidtermShoot: 'vlog/制作变焦镜/入口节点/按钮-现场拍摄', + Scripting: 'vlog/制作变焦镜/入口节点/按钮选中-脚本撰写', + SelectArrow: 'vlog/制作变焦镜/入口节点/选中箭头', + Progress: 'vlog/进度数字/进度', + Zero: 'vlog/进度数字/0', + One: 'vlog/进度数字/1', + Two: 'vlog/进度数字/2', + Three: 'vlog/进度数字/3', + Four: 'vlog/进度数字/4', + Five: 'vlog/进度数字/5', + Six: 'vlog/进度数字/6', + Seven: 'vlog/进度数字/7', + Eight: 'vlog/进度数字/8', + Nine: 'vlog/进度数字/9', + Percentage: 'vlog/进度数字/percentage', TASK_CAMERA: 'vlog/task-camera', TASK_BTN_OK: 'vlog/task-btn-ok', TASK_BTN: 'vlog/task-btn', @@ -161,5 +180,12 @@ export const IMAGE_PATHS = { COMPLETE_BUTTON: 'components/进入-实战操作', COMPLETE_BUTTON_DISABLED: 'components/完成前置-即可开启实战', BACKGROUND: 'components/制作变焦镜-底板' + }, + + // 设备准备 + EQUIPMENT: { + BG: 'equipment/设备准备-背景', + SELECT_THE_BUTTON: 'equipment/按钮选中-设备准备', + NAVIGATION_SIDEBAR: 'equipment/侧边导航栏' } } as const diff --git a/src/views/midterm-shooting/equipment/index.vue b/src/views/midterm-shooting/equipment/index.vue new file mode 100644 index 0000000..7eb9111 --- /dev/null +++ b/src/views/midterm-shooting/equipment/index.vue @@ -0,0 +1,123 @@ + + + diff --git a/src/views/midterm-shooting/midterm/index.vue b/src/views/midterm-shooting/midterm/index.vue new file mode 100644 index 0000000..b6199c3 --- /dev/null +++ b/src/views/midterm-shooting/midterm/index.vue @@ -0,0 +1,124 @@ + + + + diff --git a/src/views/prepare/index.vue b/src/views/prepare/index.vue new file mode 100644 index 0000000..4de2f26 --- /dev/null +++ b/src/views/prepare/index.vue @@ -0,0 +1,126 @@ + + + +