diff --git a/STEP_NAVIGATION_REDESIGN.md b/STEP_NAVIGATION_REDESIGN.md new file mode 100644 index 0000000..0519ecb --- /dev/null +++ b/STEP_NAVIGATION_REDESIGN.md @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/eslint.config.ts b/eslint.config.ts index 8e33bca..4fb5b97 100644 --- a/eslint.config.ts +++ b/eslint.config.ts @@ -12,7 +12,14 @@ export default defineConfig([ languageOptions: { parserOptions: { parser: tseslint.parser } }, rules: { 'vue/multi-word-component-names': 'off', - '@typescript-eslint/no-unused-vars': 'warn' + '@typescript-eslint/no-unused-vars': 'warn', + '@typescript-eslint/no-explicit-any': 'warn', + // 关闭所有需要类型信息的规则 + '@typescript-eslint/no-unsafe-assignment': 'off', + '@typescript-eslint/no-unsafe-member-access': 'off', + '@typescript-eslint/no-unsafe-call': 'off', + '@typescript-eslint/no-unsafe-return': 'off', + '@typescript-eslint/no-unsafe-argument': 'off' } } ]) diff --git a/src/assets/images/afterditing/color/冬日物语.jpg b/src/assets/images/afterditing/color/冬日物语.jpg new file mode 100644 index 0000000..df22151 Binary files /dev/null and b/src/assets/images/afterditing/color/冬日物语.jpg differ diff --git a/src/assets/images/afterditing/color/卡片-冬日物语.png b/src/assets/images/afterditing/color/卡片-冬日物语.png new file mode 100644 index 0000000..41680d3 Binary files /dev/null and b/src/assets/images/afterditing/color/卡片-冬日物语.png differ diff --git a/src/assets/images/afterditing/color/卡片-智能调色.png b/src/assets/images/afterditing/color/卡片-智能调色.png new file mode 100644 index 0000000..fb6b998 Binary files /dev/null and b/src/assets/images/afterditing/color/卡片-智能调色.png differ diff --git a/src/assets/images/afterditing/color/卡片-落日余晖.png b/src/assets/images/afterditing/color/卡片-落日余晖.png new file mode 100644 index 0000000..70bd9af Binary files /dev/null and b/src/assets/images/afterditing/color/卡片-落日余晖.png differ diff --git a/src/assets/images/afterditing/color/原图.png b/src/assets/images/afterditing/color/原图.png new file mode 100644 index 0000000..54ca147 Binary files /dev/null and b/src/assets/images/afterditing/color/原图.png differ diff --git a/src/assets/images/afterditing/color/开启对比 - 不可开启.png b/src/assets/images/afterditing/color/开启对比 - 不可开启.png new file mode 100644 index 0000000..77487ea Binary files /dev/null and b/src/assets/images/afterditing/color/开启对比 - 不可开启.png differ diff --git a/src/assets/images/afterditing/color/开启对比 - 可开启.png b/src/assets/images/afterditing/color/开启对比 - 可开启.png new file mode 100644 index 0000000..6c7e59c Binary files /dev/null and b/src/assets/images/afterditing/color/开启对比 - 可开启.png differ diff --git a/src/assets/images/afterditing/color/按钮-保存.png b/src/assets/images/afterditing/color/按钮-保存.png new file mode 100644 index 0000000..1ad7ada Binary files /dev/null and b/src/assets/images/afterditing/color/按钮-保存.png differ diff --git a/src/assets/images/afterditing/color/按钮-结束调色实践.png b/src/assets/images/afterditing/color/按钮-结束调色实践.png new file mode 100644 index 0000000..8996ae0 Binary files /dev/null and b/src/assets/images/afterditing/color/按钮-结束调色实践.png differ diff --git a/src/assets/images/afterditing/color/按钮-试试其他调色.png b/src/assets/images/afterditing/color/按钮-试试其他调色.png new file mode 100644 index 0000000..65781ec Binary files /dev/null and b/src/assets/images/afterditing/color/按钮-试试其他调色.png differ diff --git a/src/assets/images/afterditing/color/按钮-调色未选中.png b/src/assets/images/afterditing/color/按钮-调色未选中.png new file mode 100644 index 0000000..6b61468 Binary files /dev/null and b/src/assets/images/afterditing/color/按钮-调色未选中.png differ diff --git a/src/assets/images/afterditing/color/按钮-调色选中.png b/src/assets/images/afterditing/color/按钮-调色选中.png new file mode 100644 index 0000000..31f507b Binary files /dev/null and b/src/assets/images/afterditing/color/按钮-调色选中.png differ diff --git a/src/assets/images/afterditing/color/智能调色.png b/src/assets/images/afterditing/color/智能调色.png new file mode 100644 index 0000000..e857c99 Binary files /dev/null and b/src/assets/images/afterditing/color/智能调色.png differ diff --git a/src/assets/images/afterditing/color/标题-调色.png b/src/assets/images/afterditing/color/标题-调色.png new file mode 100644 index 0000000..62ba420 Binary files /dev/null and b/src/assets/images/afterditing/color/标题-调色.png differ diff --git a/src/assets/images/afterditing/color/标题-调色实践.png b/src/assets/images/afterditing/color/标题-调色实践.png new file mode 100644 index 0000000..1523d6b Binary files /dev/null and b/src/assets/images/afterditing/color/标题-调色实践.png differ diff --git a/src/assets/images/afterditing/color/落日余晖.jpg b/src/assets/images/afterditing/color/落日余晖.jpg new file mode 100644 index 0000000..942b798 Binary files /dev/null and b/src/assets/images/afterditing/color/落日余晖.jpg differ diff --git a/src/assets/images/afterditing/color/调色实践.png b/src/assets/images/afterditing/color/调色实践.png new file mode 100644 index 0000000..3e82427 Binary files /dev/null and b/src/assets/images/afterditing/color/调色实践.png differ diff --git a/src/assets/images/afterditing/按钮选中-调色.png b/src/assets/images/afterditing/按钮选中-调色.png deleted file mode 100644 index 4684d61..0000000 Binary files a/src/assets/images/afterditing/按钮选中-调色.png and /dev/null differ diff --git a/src/assets/images/shooting/三分法构图底板.png b/src/assets/images/shooting/三分法构图底板.png new file mode 100644 index 0000000..f595f43 Binary files /dev/null and b/src/assets/images/shooting/三分法构图底板.png differ diff --git a/src/assets/images/shooting/图片待定1.png b/src/assets/images/shooting/图片待定1.png new file mode 100644 index 0000000..d7568ce Binary files /dev/null and b/src/assets/images/shooting/图片待定1.png differ diff --git a/src/assets/images/shooting/图片待定2.png b/src/assets/images/shooting/图片待定2.png new file mode 100644 index 0000000..ce05ab9 Binary files /dev/null and b/src/assets/images/shooting/图片待定2.png differ diff --git a/src/assets/images/shooting/对角线构图底板.png b/src/assets/images/shooting/对角线构图底板.png new file mode 100644 index 0000000..d110a2e Binary files /dev/null and b/src/assets/images/shooting/对角线构图底板.png differ diff --git a/src/assets/images/shooting/居中构图底板.png b/src/assets/images/shooting/居中构图底板.png new file mode 100644 index 0000000..446948e Binary files /dev/null and b/src/assets/images/shooting/居中构图底板.png differ diff --git a/src/assets/images/shooting/文案1.png b/src/assets/images/shooting/文案1.png new file mode 100644 index 0000000..c6c095b Binary files /dev/null and b/src/assets/images/shooting/文案1.png differ diff --git a/src/assets/images/shooting/新手导航-视频回顾.png b/src/assets/images/shooting/新手导航-视频回顾.png new file mode 100644 index 0000000..dd179d3 Binary files /dev/null and b/src/assets/images/shooting/新手导航-视频回顾.png differ diff --git a/src/assets/images/shooting/构图指南底图.png b/src/assets/images/shooting/构图指南底图.png new file mode 100644 index 0000000..cab12c6 Binary files /dev/null and b/src/assets/images/shooting/构图指南底图.png differ diff --git a/src/assets/images/shooting/标题-构图指南.png b/src/assets/images/shooting/标题-构图指南.png new file mode 100644 index 0000000..10f891e Binary files /dev/null and b/src/assets/images/shooting/标题-构图指南.png differ diff --git a/src/assets/images/shooting/标题.png b/src/assets/images/shooting/标题.png new file mode 100644 index 0000000..c746573 Binary files /dev/null and b/src/assets/images/shooting/标题.png differ diff --git a/src/assets/images/shooting/知识卡片底板.png b/src/assets/images/shooting/知识卡片底板.png new file mode 100644 index 0000000..a3dc0c1 Binary files /dev/null and b/src/assets/images/shooting/知识卡片底板.png differ diff --git a/src/assets/images/shooting/示意图-三分法.png b/src/assets/images/shooting/示意图-三分法.png new file mode 100644 index 0000000..0465150 Binary files /dev/null and b/src/assets/images/shooting/示意图-三分法.png differ diff --git a/src/assets/images/shooting/辅助线.png b/src/assets/images/shooting/辅助线.png new file mode 100644 index 0000000..9a02c61 Binary files /dev/null and b/src/assets/images/shooting/辅助线.png differ diff --git a/src/assets/images/shooting/辅助线关.png b/src/assets/images/shooting/辅助线关.png new file mode 100644 index 0000000..0ebfc3a Binary files /dev/null and b/src/assets/images/shooting/辅助线关.png differ diff --git a/src/assets/images/shooting/辅助线开.png b/src/assets/images/shooting/辅助线开.png new file mode 100644 index 0000000..cf34d24 Binary files /dev/null and b/src/assets/images/shooting/辅助线开.png differ diff --git a/src/assets/images/skill/三分法构图.png b/src/assets/images/skill/三分法构图.png new file mode 100644 index 0000000..f3dfdd6 Binary files /dev/null and b/src/assets/images/skill/三分法构图.png differ diff --git a/src/assets/images/skill/光线运用.png b/src/assets/images/skill/光线运用.png new file mode 100644 index 0000000..c504dec Binary files /dev/null and b/src/assets/images/skill/光线运用.png differ diff --git a/src/assets/images/skill/对角线构图.png b/src/assets/images/skill/对角线构图.png new file mode 100644 index 0000000..2a774ee Binary files /dev/null and b/src/assets/images/skill/对角线构图.png differ diff --git a/src/assets/images/skill/运镜技巧.png b/src/assets/images/skill/运镜技巧.png new file mode 100644 index 0000000..0bf88a6 Binary files /dev/null and b/src/assets/images/skill/运镜技巧.png differ diff --git a/src/assets/images/vlog/任务取景框/全屏内置/专业剖析侧边.png b/src/assets/images/vlog/专业剖析侧边.png similarity index 100% rename from src/assets/images/vlog/任务取景框/全屏内置/专业剖析侧边.png rename to src/assets/images/vlog/专业剖析侧边.png diff --git a/src/assets/images/vlog/任务取景框/全屏内置/侧边-底板未选中.png b/src/assets/images/vlog/侧边-底板未选中.png similarity index 100% rename from src/assets/images/vlog/任务取景框/全屏内置/侧边-底板未选中.png rename to src/assets/images/vlog/侧边-底板未选中.png diff --git a/src/assets/images/vlog/任务取景框/全屏内置/侧边-选中底板.png b/src/assets/images/vlog/侧边-选中底板.png similarity index 100% rename from src/assets/images/vlog/任务取景框/全屏内置/侧边-选中底板.png rename to src/assets/images/vlog/侧边-选中底板.png diff --git a/src/components/Button/ImgButton.vue b/src/components/Button/ImgButton.vue index 329cc4c..ec9043b 100644 --- a/src/components/Button/ImgButton.vue +++ b/src/components/Button/ImgButton.vue @@ -4,7 +4,12 @@ --> + + diff --git a/src/components/Guide/index.ts b/src/components/Guide/index.ts index c472ebb..f967ef7 100644 --- a/src/components/Guide/index.ts +++ b/src/components/Guide/index.ts @@ -3,6 +3,7 @@ export { default as GuideDragon } from './GuideDragon.vue' export { default as GuideSteps } from './GuideSteps.vue' export { default as GuideStepsItem } from './GuideStepsItem.vue' export { default as SpotlightOverlay } from './SpotlightOverlay.vue' +export { default as StepNavigation } from './StepNavigation.vue' // 类型导出 export type { diff --git a/src/components/ImagePreview/ImagePreview.vue b/src/components/ImagePreview/ImagePreview.vue index dbc5701..95c97bd 100644 --- a/src/components/ImagePreview/ImagePreview.vue +++ b/src/components/ImagePreview/ImagePreview.vue @@ -50,6 +50,8 @@ type Props = { designWidth?: number designHeight?: number getScaleMetrics: () => { scale: number; offsetX: number; offsetY: number } + // 关闭回调函数 + onClose?: () => void } const props = withDefaults(defineProps(), { @@ -119,6 +121,10 @@ const imageStyle = computed(() => ({ function emitClose() { visible.value = false emit('close') + // 调用用户提供的关闭回调 + if (props.onClose) { + props.onClose() + } } function onMaskClick() { diff --git a/src/components/ImagePreview/index.ts b/src/components/ImagePreview/index.ts index 68573df..79ad46f 100644 --- a/src/components/ImagePreview/index.ts +++ b/src/components/ImagePreview/index.ts @@ -1 +1,2 @@ export { default as ImagePreview } from './service.ts' +export type { default as ImagePreviewComponent } from './ImagePreview.vue' diff --git a/src/components/ImagePreview/service.ts b/src/components/ImagePreview/service.ts index 4a3bc4e..5f253c1 100644 --- a/src/components/ImagePreview/service.ts +++ b/src/components/ImagePreview/service.ts @@ -8,6 +8,8 @@ type PreviewOptions = { zIndex?: number // Supply scale metrics provider compatible with useScale getScaleMetrics: () => { scale: number; offsetX: number; offsetY: number } + // 关闭回调函数 + onClose?: () => void } let container: HTMLElement | null = null @@ -24,6 +26,11 @@ export default function previewImage(options: PreviewOptions) { ...options, onClose: () => { state.visible = false + // 调用用户提供的关闭回调 + if (options.onClose) { + options.onClose() + } + // 清理 DOM render(null, container!) } }) diff --git a/src/components/Modal/Modal.vue b/src/components/Modal/Modal.vue new file mode 100644 index 0000000..93bf8ba --- /dev/null +++ b/src/components/Modal/Modal.vue @@ -0,0 +1,156 @@ + + + + + diff --git a/src/components/Modal/README.md b/src/components/Modal/README.md new file mode 100644 index 0000000..165df21 --- /dev/null +++ b/src/components/Modal/README.md @@ -0,0 +1,135 @@ +# Modal 弹窗组件 + +一个功能完整的 Vue 3 弹窗组件，支持多种动画效果和灵活的插槽系统。 + +## 基本用法 + +```vue + + + +``` + +## 插槽说明 + +### body 插槽（推荐） + +直接传入弹窗的主体内容，这是最常用的插槽： + +```vue + +``` + +### 其他插槽 + +- `title`: 标题内容 +- `header`: 整个头部区域 +- `footer`: 底部区域 +- `default`: 默认内容（会作为 body 的备用内容） + +## 属性 + +| 属性 | 类型 | 默认值 | 说明 | +| ------------ | ------------- | ------- | ------------------------------ | +| visible | boolean | false | 是否显示弹窗 | +| title | string | '' | 弹窗标题 | +| width | string/number | '520px' | 弹窗宽度 | +| height | string/number | 'auto' | 弹窗高度 | +| animation | string | 'fade' | 动画类型：fade/slide/zoom/none | +| mask | boolean | true | 是否显示遮罩 | +| maskClosable | boolean | true | 是否可点击遮罩关闭 | +| closable | boolean | true | 是否显示关闭按钮 | +| center | boolean | true | 是否居中显示 | +| zIndex | number | 1000 | 弹窗层级 | +| customClass | string | '' | 自定义类名 | + +## 事件 + +| 事件名 | 说明 | 参数 | +| ---------- | -------------- | ---- | +| close | 关闭弹窗时触发 | - | +| confirm | 确认时触发 | - | +| cancel | 取消时触发 | - | +| mask-click | 点击遮罩时触发 | - | + +## 动画效果 + +支持四种动画效果： + +- `fade`: 淡入淡出（默认） +- `slide`: 从上方滑入 +- `zoom`: 缩放效果 +- `none`: 无动画 + +## 完整示例 + +```vue + + + +``` diff --git a/src/components/Modal/index.ts b/src/components/Modal/index.ts new file mode 100644 index 0000000..6864ce5 --- /dev/null +++ b/src/components/Modal/index.ts @@ -0,0 +1,6 @@ +/** + * Modal 组件导出 + */ + +export { default as Modal } from './Modal.vue' +export type { ModalProps, ModalEmits, ModalSlots } from './types' diff --git a/src/components/Modal/types.ts b/src/components/Modal/types.ts new file mode 100644 index 0000000..843d7c0 --- /dev/null +++ b/src/components/Modal/types.ts @@ -0,0 +1,52 @@ +/** + * Modal 组件类型定义 + */ + +export interface ModalProps { + /** 是否显示弹窗 */ + visible: boolean + /** 弹窗标题 */ + title?: string + /** 弹窗宽度 */ + width?: string | number + /** 弹窗高度 */ + height?: string | number + /** 是否显示遮罩层 */ + mask?: boolean + /** 是否可点击遮罩关闭 */ + maskClosable?: boolean + /** 是否显示关闭按钮 */ + closable?: boolean + /** 弹窗层级 */ + zIndex?: number + /** 自定义类名 */ + customClass?: string + /** 是否居中显示 */ + center?: boolean + /** 动画类型 */ + animation?: 'fade' | 'slide' | 'zoom' | 'none' +} + +export interface ModalEmits { + /** 关闭弹窗事件 */ + close: [] + /** 确认事件 */ + confirm: [] + /** 取消事件 */ + cancel: [] + /** 遮罩点击事件 */ + 'mask-click': [] +} + +export interface ModalSlots { + /** 默认内容插槽 */ + default: () => any + /** 主体内容插槽 */ + body: () => any + /** 标题插槽 */ + title: () => any + /** 头部插槽 */ + header: () => any + /** 底部插槽 */ + footer: () => any +} diff --git a/src/components/Overlay/Overlay.vue b/src/components/Overlay/Overlay.vue new file mode 100644 index 0000000..bc1e052 --- /dev/null +++ b/src/components/Overlay/Overlay.vue @@ -0,0 +1,142 @@ + + + + + diff --git a/src/components/Overlay/README.md b/src/components/Overlay/README.md new file mode 100644 index 0000000..8dd0545 --- /dev/null +++ b/src/components/Overlay/README.md @@ -0,0 +1,92 @@ +# Overlay 组件 + +遮罩层组件，支持多层嵌套。 + +## 基本用法 + +```vue + +``` + +## 多层嵌套 + +组件支持多层嵌套，会自动管理 z-index 层级： + +```vue + + + +``` + +## 手动指定层级 + +如果需要手动控制层级，可以使用 `level` 或 `zIndex` 属性： + +```vue + +``` + +## 属性说明 + +| 属性 | 类型 | 默认值 | 说明 | +| ---------- | ------- | -------------------- | ------------------------------ | +| visible | boolean | false | 是否显示遮罩 | +| background | string | 'rgba(0, 0, 0, 0.5)' | 遮罩背景色 | +| zIndex | number | undefined | 手动指定 z-index | +| level | number | 0 | 嵌套层级，用于自动计算 z-index | +| baseZIndex | number | 1000 | 基础 z-index 值 | +| clickable | boolean | true | 是否可点击遮罩关闭 | +| animation | string | 'fade' | 动画类型 | +| duration | number | 300 | 动画持续时间 | + +## 层级计算规则 + +- 如果没有手动指定 `zIndex`，组件会根据 `level` 自动计算： + - 计算公式：`baseZIndex + level * 10` + - 例如：baseZIndex=1000, level=1 → z-index=1010 +- 嵌套时，子组件的 level 会自动递增 +- 手动指定 `zIndex` 时，会忽略自动计算 diff --git a/src/components/Overlay/index.ts b/src/components/Overlay/index.ts new file mode 100644 index 0000000..5e75f50 --- /dev/null +++ b/src/components/Overlay/index.ts @@ -0,0 +1,6 @@ +/** + * Overlay 遮罩层组件导出 + */ + +export { default as Overlay } from './Overlay.vue' +export type { OverlayProps, OverlayEmits, OverlaySlots } from './types' diff --git a/src/components/Overlay/types.ts b/src/components/Overlay/types.ts new file mode 100644 index 0000000..c7fe6a6 --- /dev/null +++ b/src/components/Overlay/types.ts @@ -0,0 +1,39 @@ +/** + * Overlay 遮罩层组件类型定义 + */ + +export interface OverlayProps { + /** 是否显示遮罩 */ + visible: boolean + /** 遮罩背景色 */ + background?: string + /** 遮罩层级 */ + zIndex?: number + /** 是否可点击遮罩关闭 */ + clickable?: boolean + /** 自定义类名 */ + customClass?: string + /** 自定义样式 */ + customStyle?: Record + contentClass?: string + /** 动画类型 */ + animation?: 'fade' | 'slide' | 'zoom' | 'none' + /** 动画持续时间（毫秒） */ + duration?: number + /** 嵌套层级，用于自动计算 z-index */ + level?: number + /** 基础 z-index 值，默认为 1000 */ + baseZIndex?: number +} + +export interface OverlayEmits { + /** 点击遮罩事件 */ + click: [event: MouseEvent] + /** 关闭事件 */ + close: [] +} + +export interface OverlaySlots { + /** 默认内容插槽 */ + default: () => void +} diff --git a/src/components/ProgressBar/ProgressBar.vue b/src/components/ProgressBar/ProgressBar.vue index b7cfe60..4d8d0a6 100644 --- a/src/components/ProgressBar/ProgressBar.vue +++ b/src/components/ProgressBar/ProgressBar.vue @@ -10,28 +10,58 @@
-
+
制作变焦镜-我的志愿者手记
-
- - - - +
+
+ + +
+ {{ step.name }} + + +
+ + + +
@@ -71,11 +101,6 @@ interface Props { /** 当前步骤索引 (0-3) */ currentStep?: number } -// -interface Props { - /** 当前步骤索引 (0-3) */ - currentPage?: number -} // 定义事件 interface Emits { /** 点击完成按钮时触发 */ @@ -83,14 +108,13 @@ interface Emits { } const props = withDefaults(defineProps(), { - currentStep: 0, - currentPage: 0 + currentStep: 0 }) const emit = defineEmits() // 计算属性：是否可以完成（当前在最后一步） -const canComplete = computed(() => props.currentStep === 3) +const canComplete = computed(() => props.currentStep > steps.length) // 处理完成按钮点击 const handleComplete = () => { @@ -102,16 +126,22 @@ const handleComplete = () => { // 步骤配置 const steps = [ { - nameSelect: '/src/assets/images/midterm/前期准备-选中.png', - nameselectNot: '/src/assets/images/midterm/前期准备-未选中.png' + name: '前期准备', + icon: getStaticImage('midterm/准备图标.png'), + nameSelect: getStaticImage('midterm/前期准备-选中.png'), + nameselectNot: getStaticImage('midterm/前期准备-未选中.png') }, { - nameSelect: '/src/assets/images/midterm/中期拍摄-选中.png', - nameselectNot: '/src/assets/images/midterm/中期拍摄-未选中.png' + name: '中期拍摄', + icon: getStaticImage('midterm/拍摄图标.png'), + nameSelect: getStaticImage('midterm/中期拍摄-选中.png'), + nameselectNot: getStaticImage('midterm/中期拍摄-未选中.png') }, { - nameSelect: '/src/assets/images/midterm/后期剪辑-选中.png', - nameselectNot: '/src/assets/images/midterm/后期剪辑-未选中.png' + name: '后期剪辑', + icon: getStaticImage('midterm/剪辑图标.png'), + nameSelect: getStaticImage('midterm/后期剪辑-选中.png'), + nameselectNot: getStaticImage('midterm/后期剪辑-未选中.png') } ] @@ -138,8 +168,9 @@ const getStepStatus = (stepIndex: number) => { .progress-bar { position: relative; display: flex; + justify-content: center; align-items: center; - padding: 15px 20px; + padding-right: 160px; height: 292px; background-image: url('@/assets/images/components/ProgressBar-bg.png'); background-size: cover; @@ -153,22 +184,22 @@ const getStepStatus = (stepIndex: number) => { } .steps-section { - width: 1600px; + width: 1400px; display: flex; align-items: center; - justify-content: space-between; + justify-content: center; margin: 30px 20px 0; gap: 15px; } -.step-item { - padding-left: 300px; - display: flex; +/* .step-item { */ +/* padding-left: 300px; */ +/* display: flex; flex-direction: column; align-items: center; - gap: 5px; - flex: 1; -} + gap: 5px; */ +/* flex: 1; */ +/* } */ .step-text { /* font-size: 40px; */ @@ -178,12 +209,12 @@ const getStepStatus = (stepIndex: number) => { white-space: nowrap; text-shadow: 0 0 8px rgba(255, 255, 255, 0.5); display: flex; - justify-content: center; + justify-content: start; align-items: center; } .step-ellipsis { - padding-left: 17px; + padding: 0 40px; } .step-dots { @@ -256,6 +287,11 @@ button:disabled { object-fit: contain; } +.filter-blue { + filter: brightness(0) saturate(100%) invert(79%) sepia(29%) saturate(1190%) hue-rotate(330deg) + brightness(102%) contrast(98%); +} + /* 响应式设计 */ @media (max-width: 768px) { .progress-bar { diff --git a/src/components/index.ts b/src/components/index.ts index 8045278..9b069e7 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -16,3 +16,9 @@ export * from './Switcher' // 图片预览（函数式） export * from './ImagePreview' + +// 弹窗组件 +export * from './Modal' + +// 遮罩层组件 +export * from './Overlay' diff --git a/src/router/index.ts b/src/router/index.ts index abf96a0..e7af3d8 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -206,6 +206,14 @@ const routes: RouteRecordRaw[] = [ meta: { title: '脚本撰写' } + }, + { + path: '/color', + name: 'Color', + component: () => import('@/views/afterditing/color.vue'), + meta: { + title: '调色' + } } ] diff --git a/src/views/afterditing/color.vue b/src/views/afterditing/color.vue new file mode 100644 index 0000000..64418d0 --- /dev/null +++ b/src/views/afterditing/color.vue @@ -0,0 +1,172 @@ + + + diff --git a/src/views/afterditing/index.vue b/src/views/afterditing/index.vue index 05c7245..3251f52 100644 --- a/src/views/afterditing/index.vue +++ b/src/views/afterditing/index.vue @@ -1,17 +1,19 @@ diff --git a/src/views/midterm-shooting/midterm/index.vue b/src/views/midterm-shooting/midterm/index.vue index 3f73f32..89a8f47 100644 --- a/src/views/midterm-shooting/midterm/index.vue +++ b/src/views/midterm-shooting/midterm/index.vue @@ -1,5 +1,5 @@ @@ -66,7 +65,7 @@ const highlightShow = ref(true)
- +
diff --git a/src/views/midterm-shooting/shooting/index.vue b/src/views/midterm-shooting/shooting/index.vue index 6a4fb5c..95a7319 100644 --- a/src/views/midterm-shooting/shooting/index.vue +++ b/src/views/midterm-shooting/shooting/index.vue @@ -1,9 +1,65 @@ -