更新

src/views/user-info/live-operation/course-content/index.tsx

@@ -0,0 +1,17 @@
+import { ElForm, ElFormItem, ElInput } from 'element-plus'
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'course-content',
+  render() {
+    return (
+      <>
+        <ElForm>
+          <ElFormItem label="第一课">
+            <ElInput type="textarea" rows="3" />
+          </ElFormItem>
+        </ElForm>
+      </>
+    )
+  }
+})

src/views/user-info/live-operation/course-plan/index.tsx

@@ -0,0 +1,29 @@
+import { ElButton, ElForm, ElFormItem, ElInput } from 'element-plus'
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'course-plan',
+  render() {
+    return (
+      <>
+        <ElForm
+          class="px-[200px] pb-10 pt-7"
+          size="large"
+          ref="form"
+          labelWidth={'100px'}
+          labelPosition="top"
+        >
+          <ElFormItem label="第一课">
+            <ElInput type="textarea" rows="3" />
+          </ElFormItem>
+        </ElForm>
+        <div class="border-t border-t-[#E5E5E5] text-center pt-6 pb-7">
+          <ElButton class="!w-40 !h-[38px]">上一步</ElButton>
+          <ElButton type="primary" class="!w-40 !h-[38px]">
+            下一步
+          </ElButton>
+        </div>
+      </>
+    )
+  }
+})

src/views/user-info/live-operation/createState.ts

@@ -10,7 +10,7 @@ export const basePlan = {
 const original = () => {
   return {
     subjectList: [], // 声部列表
-    active: 0,
+    active: 2,
     rate: 0,
     minutes: [] as any,
     tabIndex: 1,

src/views/user-info/live-operation/index.tsx

@@ -1,7 +1,9 @@
 import ColSteps from '@/components/col-steps'
 import request from '@/helpers/request'
 import { defineComponent } from 'vue'
+import CourseContent from './course-content'
 import CourseInfo from './course-info'
+import CoursePlan from './course-plan'
 import { createState } from './createState'
 
 export default defineComponent({
@@ -27,6 +29,8 @@ export default defineComponent({
           />
 
           {createState.active === 0 && <CourseInfo />}
+          {createState.active === 1 && <CourseContent />}
+          {createState.active === 2 && <CoursePlan />}
           {/* {createState.active === 1 && <CourseContent />} */}
         </div>
       </>