Merge branch 'newVersion' of http://git.dayaedu.com/lex/colexiu-project into newVersion

src/components/col-calendar/index.module.less

@@ -1,5 +1,6 @@
 .calendar {
   border-radius: 10px;
+  background-color: transparent;
 
   .subtitle {
     display: flex;

src/components/col-calendar/index.tsx

@@ -254,11 +254,11 @@ export default defineComponent({
           modelValue={this.show}
           onUpdate:modelValue={e => (this.show = e)}
           title={this.selectDayTitle}
-          width={'520px'}
+          width={'440px'}
         >
           <div class={[styles.container, 'flex flex-wrap']}>
             {this.dayList.map((item: any) => (
-              <div class="w-1/4 mb-2">
+              <div class="w-1/3 mb-2 text-center">
                 <ElTag
                   round
                   class={[
@@ -284,7 +284,7 @@ export default defineComponent({
             <ElButton
               round
               plain
-              class="!w-40 !h-[38px]"
+              class="!w-40 !h-[48px] !text-base"
               onClick={() => {
                 this.show = false
                 this.selectDays = []
@@ -295,7 +295,7 @@ export default defineComponent({
             <ElButton
               type="primary"
               round
-              class="!w-40 !h-[38px]"
+              class="!w-40 !h-[48px] !text-base"
               disabled={!(this.selectDays.length > 0)}
               onClick={() => {
                 this.selectDay && this.selectDay(this.selectDays)

src/components/col-header/modals/loganInfo.tsx

@@ -35,7 +35,13 @@ import vipIcon from '../images/vipIcon.png'
 import noVipIcon from '../images/vipIcon.png'
 import icon_back from '@/common/images/icon_back.png'
 
-import { getUserInfo, getUserType, getAuth, setAuth } from '@/helpers/utils'
+import {
+  getUserInfo,
+  getUserType,
+  getAuth,
+  setAuth,
+  removeAuth
+} from '@/helpers/utils'
 import { useRoute, useRouter } from 'vue-router'
 import request from '@/helpers/request'
 import mitt from '@/helpers/mitt'
@@ -150,6 +156,7 @@ export default defineComponent({
       try {
         const res = await request.get('/api-auth/exit', {})
         router.push({ path: '/' })
+        removeAuth()
         window.location.reload()
       } catch (e) {
         console.log(e)
@@ -277,14 +284,17 @@ export default defineComponent({
                           角色切换
                         </div>
                         <div class="changeWrap">
-                          <span> {this.userType == 'TEACHER' ?'学生':'老师'}</span>
+                          <span>
+                            {' '}
+                            {this.userType == 'TEACHER' ? '学生' : '老师'}
+                          </span>
                           <img src={icon_back} alt="" class="icon_back" />
                         </div>
                       </ElDropdownItem>
                     ) : null}
 
                     <ElDropdownItem command="back" class="backItem">
-                      <div class='lineItem'>
+                      <div class="lineItem">
                         <div class="backWrap">
                           <img class="backIcon" src={backIcon} alt="" />{' '}
                           退出登录

src/components/col-video/index.module.less

@@ -1,5 +1,5 @@
 :root {
-  --plyr-color-main:#1FF0C9;
+  --plyr-color-main: #1ff0c9;
 }
 .video-container {
   width: 100%;
@@ -15,8 +15,9 @@
   }
 }
 :global {
-
-
+  .plyr:fullscreen video {
+    height: 100% !important;
+  }
   .plyr__poster {
     background-size: cover;
   }
@@ -26,13 +27,12 @@
   }
 }
 .audios {
-
   :global {
     .plyr__controls {
-      background-color: #333!important;
+      background-color: #333 !important;
       height: 68px;
       line-height: 68px;
-      color: #fff!important;
+      color: #fff !important;
     }
   }
 }

src/style/index.css

@@ -12,6 +12,7 @@
   --el-color-primary-light-9: #ecf9f6 !important;
   --el-color-primary-dark-2: #24ad93 !important;
   --searchbgColor:'#f6f7f8' !important;
+  --el-border-radius-round: 999px !important;
 }
 
 html {

src/views/role-auth/teacherAuth/index.tsx

@@ -45,7 +45,7 @@ export default defineComponent({
   },
   render() {
     return (
-      <div class="w-[1200px] mt-36 mb-[60px] bg-white min-h-full m-auto text-[#333]">
+      <div class="w-[1002px] mt-36 mb-[60px] bg-white min-h-full m-auto text-[#333]">
         {this.authStatus || !teacherState.nextStatus ? <CertBrief /> : <Auth />}
       </div>
     )

src/views/user-info/components/item/index.tsx

@@ -13,37 +13,41 @@ export default defineComponent({
   render() {
     const item = this.item
     return (
-      <div class="border border-[#f5f5f5] rounded-sm w-[262px] h-[302px] m-auto overflow-hidden relative hover:shadow-md transition-all">
-        {item.subjectName && (
+      <div class="border border-[#E0E0E0] box-border rounded-[10px] w-[218px] m-auto overflow-hidden relative transition-all">
+        {/* {item.subjectName && (
           <div class="absolute top-2 right-3 bg-black/40 text-white text-sm rounded-sm px-3 h-7 flex items-center justify-center z-10">
             {item.subjectName}
           </div>
-        )}
-        <ElImage
-          class="w-full h-[175px] align-middle"
-          fit="cover"
-          src={item.backgroundPic}
-        />
-        <div class="mx-2.5 py-3.5 border-b border-b-[#F2F2F2]">
-          <div class="text-lg leading-none font-medium whitespace-nowrap overflow-hidden text-ellipsis">
-            {item.courseGroupName}
-          </div>
-          <div class="text-sm text-[#999] pt-2.5">
+        )} */}
+        <div class="relative">
+          <ElImage
+            class="w-full h-[122px] align-middle"
+            fit="cover"
+            src={item.backgroundPic}
+          />
+          <div class="text-sm text-[#52FFDC] h-7 leading-7 px-3 flex items-center justify-end absolute left-0 right-0 bottom-0 bg-black/60">
+            <i class="w-1 h-1 bg-[#52FFDC] rounded-full mr-1.5 inline-block"></i>
             {item.studentCount}人已购买
           </div>
         </div>
 
-        <div class="mx-2.5 py-4 flex items-center justify-between">
-          <div class="flex items-center">
-            <ElImage
-              class="w-[22px] h-[22px] align-middle rounded-full overflow-hidden mr-2"
-              object-fit="cover"
-              src={item.avatar || iconTeacher}
-            />
-            <span>{item.teacherName}</span>
+        <div class="text-base px-2.5 pt-2 text-[#666666] leading-none font-medium whitespace-nowrap overflow-hidden text-ellipsis">
+          {item.courseGroupName}
+        </div>
+
+        {item.courseStartTime && (
+          <p class="text-[#999] text-xs px-2.5 leading-none pt-1.5">
+            开课时间：{item.courseStartTime}
+          </p>
+        )}
+
+        <div class="mx-2.5 pt-1.5 pb-2 flex items-center justify-between">
+          <div class="text-xl text-[#F90000] font-medium leading-none">
+            <span class="text-sm leading-7">￥</span>
+            {item.coursePrice}
           </div>
-          <div class="font-medium text-[15px] leading-5 text-[#2DC7AA]">
-            ￥{item.coursePrice}/{item.courseNum}课时
+          <div class="text-base text-[#FF5F22] leading-none">
+            {item.courseNum}课时
           </div>
         </div>
       </div>

src/views/user-info/components/user-menu/index.module.less

@@ -1,4 +1,6 @@
 .menuItem {
+  box-sizing: border-box;
+  border-right: 4px solid transparent;
   .icon1 {
     background: url('./images/1.png') no-repeat center;
     background-size: contain;
@@ -21,9 +23,9 @@
   }
   &.active,
   &:hover {
-    background: url('./images/menu_active.png') no-repeat left center;
-    background-size: contain;
-    @apply text-white;
+    background-color: #e9fff8;
+    color: #2dc7aa;
+    border-right-color: #2dc7aa;
 
     .icon1 {
       background: url('./images/1-active.png') no-repeat center;

src/views/user-info/components/user-menu/index.tsx

@@ -41,19 +41,21 @@ export default defineComponent({
   },
   render() {
     return (
-      <div class="bg-white rounded-[6px] text-center py-6 px-[18px] flex items-center flex-col">
+      <div class="bg-white rounded-[6px] text-center pt-6 flex items-center flex-col">
         {this.menuList.map((item: any) => (
           <RouterLink
             to={item.path}
             class={[
-              'py-2 px-6 mb-1.5 flex items-center text-base text-[#666] w-full last:mb-0 cursor-pointer',
+              'py-4 px-6 flex items-center text-lg font-medium text-[#666] w-full last:mb-0 cursor-pointer',
               styles.menuItem,
               (item.name === this.activeRoute ||
                 item.name === this.acitveMenuRoute) &&
                 styles.active
             ]}
           >
-            <i class={['w-7 h-7 mr-3.5', styles['icon' + item.meta.index]]}></i>
+            <i
+              class={['w-6 h-6 mr-[22px]', styles['icon' + item.meta.index]]}
+            ></i>
             {item.meta.title}
           </RouterLink>
         ))}

src/views/user-info/components/users/index.tsx

@@ -1,12 +1,17 @@
 import { defineComponent } from 'vue'
 import iconTeacher from '@/common/images/icon_teacher.png'
-import { ElTag } from 'element-plus'
+import { ElButton, ElTag } from 'element-plus'
 import { state } from '@/state'
 
-import musicDefault from '../../images/music_default.png'
-import musicActive from '../../images/music_active.png'
-import entryDefault from '../../images/entry_default.png'
-import entryActive from '../../images/entry_active.png'
+// import musicDefault from '../../images/music_default.png'
+// import musicActive from '../../images/music_active.png'
+// import entryDefault from '../../images/entry_default.png'
+// import entryActive from '../../images/entry_active.png'
+export const getAssetsHomeFile = (fileName: string) => {
+  const path = `../../images/${fileName}`
+  const modules = import.meta.globEager('../../images/*')
+  return modules[path].default
+}
 
 export default defineComponent({
   name: 'users',
@@ -26,16 +31,95 @@ export default defineComponent({
           path: '/musicAuth'
         })
       }
+    },
+    // 检验是否有对应徽章
+    checkBadge(type: string) {
+      // tag : 老师点亮图标
+      // STYLE:个人风采
+      // VIDEO：视频课
+      // LIVE：直播课，
+      // MUSIC：曲目 逗号隔开
+      let status = false
+      const { userInfo } = this
+      switch (type) {
+        case 'STYLE':
+        case 'VIDEO':
+        case 'LIVE':
+        case 'MUSIC':
+          if (userInfo.tag) {
+            status = userInfo.tag.indexOf(type) > -1
+          }
+          break
+        case 'VIP':
+          status = userInfo.isVip > 0
+          break
+        default:
+          status = false
+          break
+      }
+      return status
     }
   },
   render() {
     return (
-      <div class="bg-white rounded-[6px] text-center pt-[30px] pb-8 flex items-center flex-col">
-        <img src={iconTeacher} class="w-[68px] h-[68px] rounded-full" />
+      <div class=" text-center pb-8 relative overflow-hidden">
+        <div class="bg-[#CFFFF0] absolute left-6 top-0 text-[#00AB76] text-xs py-0.5 px-2 rounded-[10px]">
+          老师
+        </div>
+        <img
+          src={iconTeacher}
+          class="w-[68px] h-[68px] rounded-full border-2 border-[#2DC7AA] border-solid mt-6 mx-auto"
+        />
+
+        <p class="text-[#333] text-lg font-medium pt-4 flex items-center justify-center">
+          {this.userInfo.username}
 
-        <p class="text-[#1A1A1A] text-lg pt-4">{this.userInfo.username}</p>
+          <img
+            src={
+              this.checkBadge('VIP')
+                ? getAssetsHomeFile('icon_vip.png')
+                : getAssetsHomeFile('icon_vip_default.png')
+            }
+            class="h-[26px]"
+          />
+        </p>
 
-        <div class="pt-3 pb-6 flex">
+        <div class="flex items-center justify-center pt-2 pb-10">
+          <img
+            src={
+              this.checkBadge('STYLE')
+                ? getAssetsHomeFile('icon_cert.png')
+                : getAssetsHomeFile('icon_cert_default.png')
+            }
+            class="h-[26px] px-1"
+          />
+          <img
+            src={
+              this.checkBadge('VIDEO')
+                ? getAssetsHomeFile('icon_video.png')
+                : getAssetsHomeFile('icon_video_default.png')
+            }
+            class="h-[26px] px-1"
+          />
+          <img
+            src={
+              this.checkBadge('LIVE')
+                ? getAssetsHomeFile('icon_live.png')
+                : getAssetsHomeFile('icon_live_default.png')
+            }
+            class="h-[26px] px-1"
+          />
+          <img
+            src={
+              this.checkBadge('MUSIC')
+                ? getAssetsHomeFile('icon_music.png')
+                : getAssetsHomeFile('icon_music_default.png')
+            }
+            class="h-[26px] px-1"
+          />
+        </div>
+
+        {/* <div class="pt-3 pb-6 flex">
           {this.userInfo.entryFlag === 1 ? (
             <img
               src={entryActive}
@@ -70,31 +154,45 @@ export default defineComponent({
               }}
             />
           )}
+        </div> */}
+
+        <div>
+          <ElButton
+            round
+            type="primary"
+            size="large"
+            plain
+            class="!px-4 !bg-white hover:!bg-[#2DC7AA]"
+          >
+            达人认证
+          </ElButton>
+          <ElButton round type="primary" size="large" class="!px-4">
+            开通会员
+          </ElButton>
         </div>
 
-        <div class="text-[14px] text-[#666] flex items-center justify-center">
+        <div class="text-base text-[#999] mx-[25px] flex items-center justify-center mt-9 pt-10 border-t border-solid border-[#E7E6E6]">
           <span
-            class="flex items-center justify-center leading-6 cursor-pointer"
+            class="flex items-center justify-center flex-col leading-6 cursor-pointer flex-1 border-r border-solid border-[#E7E6E6]"
             onClick={() => {
               this.$router.push('/userInfo/myFans')
             }}
           >
-            粉丝
-            <b class="text-black text-xl pl-1 pb-[2px]">
+            <b class="text-[#333333] text-[28px] pl-1 pb-1">
               {this.userInfo.fansNum || 0}
             </b>
+            粉丝
           </span>
           <span
-            class="pl-3 flex items-center justify-center leading-6 cursor-pointer"
+            class="pl-3 flex items-center flex-col justify-center leading-6 cursor-pointer flex-1"
             onClick={() => {
               this.$router.push('/userInfo/musicClass')
             }}
           >
-            乐谱
-            <b class="text-black text-xl pl-1 pb-[2px]">
-              {' '}
+            <b class="text-[#333333] text-[28px] pl-1 pb-1">
               {this.userInfo.musicSheetNum || 0}
             </b>
+            乐谱
           </span>
         </div>
       </div>

src/views/user-info/index.tsx

@@ -7,12 +7,12 @@ export default defineComponent({
   name: 'user-info',
   render() {
     return (
-      <div class="w-[1200px] mt-[100px] mb-14 min-h-full m-auto text-[#333] flex">
-        <div class="w-56 mr-4">
-          <Users class="mb-3 user-shadow" />
-          <UserMenu class="user-shadow" />
+      <div class="w-[1002px] mt-[100px] rounded-[10px] bg-white py-5 overflow-hidden mb-14 min-h-full m-auto text-[#333] flex">
+        <div class="w-[264px] ">
+          <Users />
+          <UserMenu />
         </div>
-        <div class="w-[960px] bg-white rounded-[6px] user-shadow">
+        <div class="w-[737px] border-l border-l-[#E7E6E6]">
           <RouterView></RouterView>
         </div>
       </div>

src/views/user-info/live-class/index.module.less

@@ -1,18 +1,39 @@
 .liveClass {
   :global {
-    .el-tabs__nav-wrap {
-      @apply px-11;
-    }
     .el-tabs__item {
-      @apply text-base;
-      color: #666;
-      height: 64px;
-      line-height: 64px;
-      padding: 0 42px;
+      font-size: 20px;
+      font-weight: 500;
+      color: #999;
+      height: 56px;
+      line-height: 56px;
+      padding-right: 40px;
+      padding-left: 0;
+      &.is-active {
+        font-size: 24px;
+        color: #000;
+      }
     }
     .el-tabs__nav-wrap::after {
       height: 1px;
       background: #eeeeee;
     }
+    .el-tabs__active-bar {
+      height: 4px;
+    }
+  }
+}
+.items:first-child {
+  display: flex;
+  justify-content: flex-start;
+  & > div {
+    margin: 0;
+  }
+}
+
+.items:nth-child(3n + 3) {
+  display: flex;
+  justify-content: flex-end;
+  & > div {
+    margin: 0;
   }
 }

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

@@ -15,11 +15,11 @@ export default defineComponent({
   },
   render() {
     return (
-      <div class={[styles.liveClass, 'relative']}>
+      <div class={[styles.liveClass, 'relative px-[25px]']}>
         <ElButton
           round
           type="primary"
-          class="absolute right-11 top-4 z-10"
+          class="absolute right-11 top-3 z-10"
           onClick={() => {
             // 直播课需要达人认证和开通直播
             if (state.user.data?.entryFlag && state.user.data?.liveFlag) {
@@ -42,7 +42,7 @@ export default defineComponent({
             }
           }}
         >
-          新建直播课
+          新建课程
         </ElButton>
         <ElTabs v-model={this.activeName}>
           <ElTabPane label="进行中" name="ING">

src/views/user-info/live-class/list.tsx

@@ -5,6 +5,7 @@ import { state } from '@/state'
 import { ElSkeleton, ElSkeletonItem } from 'element-plus'
 import { defineComponent } from 'vue'
 import Item from '../components/item'
+import styles from './index.module.less'
 
 export default defineComponent({
   name: 'list',
@@ -66,46 +67,30 @@ export default defineComponent({
       <>
         {state.user.data?.entryFlag && state.user.data?.liveFlag ? (
           <>
-            <div class="flex flex-wrap px-10">
+            <div class="flex flex-wrap">
               <ElSkeleton
                 loading={this.loading}
                 animated
-                class="flex"
+                class="flex justify-between"
                 count={3}
                 v-slots={{
                   template: () => (
-                    <div class="w-1/3">
-                      <div class="flex flex-col pt-8 w-[262px] m-auto">
+                    <div class="w-[218px]">
+                      <div class="flex flex-col pt-8 w-[218px] rounded-[10px] overflow-hidden m-auto">
                         <ElSkeletonItem
                           variant="image"
-                          style={{ width: '100%', height: '175px' }}
+                          style={{ width: '100%', height: '122px' }}
                         ></ElSkeletonItem>
-                        <div class="mx-2.5 py-3.5 border-b border-b-[#F2F2F2]">
-                          <div class="text-lg leading-none font-medium whitespace-nowrap overflow-hidden text-ellipsis">
-                            <ElSkeletonItem variant="h3"></ElSkeletonItem>
-                          </div>
-                          <div class="text-sm text-[#999] pt-2.5">
-                            <ElSkeletonItem
-                              variant="p"
-                              style={{ width: '50%' }}
-                            ></ElSkeletonItem>
-                          </div>
+                        <div class="text-base px-2.5 pt-2 text-[#666666] leading-none font-medium whitespace-nowrap overflow-hidden text-ellipsis">
+                          <ElSkeletonItem variant="h3"></ElSkeletonItem>
                         </div>
 
-                        <div class="mx-2.5 py-4 flex items-center">
-                          <ElSkeletonItem
-                            variant="circle"
-                            style={{
-                              width: '22px',
-                              height: '22px',
-                              marginRight: '5px'
-                            }}
-                          ></ElSkeletonItem>
+                        <div class="mx-2.5 pt-1.5 pb-2 flex items-center justify-between">
                           <ElSkeletonItem
                             variant="p"
                             style={{ width: '20%' }}
                           ></ElSkeletonItem>
-                          <p style={{ width: '45%' }}></p>
+                          <p style={{ width: '60%' }}></p>
                           <ElSkeletonItem
                             variant="p"
                             style={{ width: '20%' }}
@@ -117,7 +102,7 @@ export default defineComponent({
                 }}
               >
                 {this.list.map((item: any) => (
-                  <div class="w-1/3 pt-8">
+                  <div class={['w-1/3 pt-8', styles.items]}>
                     <Item item={item} />
                   </div>
                 ))}

src/views/user-info/live-operation/course-class/index.module.less

@@ -1,5 +1,17 @@
 .courseContent {
+  --el-component-size-large: 48px;
   :global {
+    .el-input,
+    .el-select--large,
+    .el-form-item--large .el-form-item__label {
+      height: 48px;
+      line-height: 48px;
+    }
+    .el-form-item__label {
+      font-size: 16px;
+      color: rgba(0, 0, 0, 0.85);
+    }
+
     .el-dialog {
       --el-dialog-width: 375px !important;
     }

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

@@ -117,10 +117,10 @@ export default defineComponent({
     return (
       <div class={styles.courseContent}>
         <ElForm
-          class="px-[200px] pb-10 pt-7"
+          class="px-6 pb-10 pt-7"
           size="large"
           ref="form"
-          labelWidth={'120px'}
+          labelWidth={'140px'}
           labelPosition="left"
           model={createState.live}
         >
@@ -230,7 +230,7 @@ export default defineComponent({
               <ElRadioGroup v-model={createState.live.backgroundPicTemplate}>
                 <ElRow>
                   {createState.templateList.map((item: any) => (
-                    <ElCol span={10} class="mb-3 cursor-pointer">
+                    <ElCol span={7} class="mb-3 cursor-pointer">
                       <div
                         class="w-[152px] relative rounded-xl overflow-hidden border"
                         onClick={() => {
@@ -283,9 +283,10 @@ export default defineComponent({
             </ElFormItem>
           )}
         </ElForm>
-        <div class="border-t border-t-[#E5E5E5] text-center pt-6 pb-7">
+        <div class="text-center pt-6 pb-7">
           <ElButton
-            class="!w-40 !h-[38px]"
+            class="!w-44 !h-[48px] !text-base"
+            round
             onClick={() => {
               // console.log(true)
               createState.active = 2
@@ -300,7 +301,8 @@ export default defineComponent({
           </ElButton>
           <ElButton
             type="primary"
-            class="!w-40 !h-[38px]"
+            class="!w-44 !h-[48px] !text-base"
+            round
             onClick={() => {
               // this.show = true
               ;(this as any).$refs.form.validate(_ => {

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

@@ -1,5 +1,6 @@
 .arrange {
   margin: 0 14px;
+  --el-border-radius-small: 10px;
 
   .arrangeCell {
     margin: 10px 0 0;
@@ -7,6 +8,10 @@
     // border-radius: 10px;
     // overflow: hidden;
   }
+  .selectPopupContent {
+    margin: 0 34px;
+    padding-top: 20px;
+  }
   .rTitle {
     display: flex;
     align-items: center;
@@ -33,16 +38,22 @@
 
   .desc,
   .times {
-    font-size: 14px;
+    font-size: 16px;
     color: #666666;
     line-height: 20px;
   }
 
   .times {
-    padding-top: 10px;
-    span {
+    padding-top: 18px;
+
+    & > div {
       display: block;
-      padding-bottom: 5px;
+      text-align: center;
+      padding: 10px 0;
+      margin-bottom: 16px;
+      background: rgba(45, 199, 170, 0.1);
+      border-radius: 10px;
+      color: #2dc7aa;
     }
   }
 
@@ -58,4 +69,9 @@
       padding-top: 10px;
     }
   }
+
+  .dialog {
+    background: url('../../images/course_bg.png') no-repeat left 10% #fff;
+    background-size: 18%;
+  }
 }

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

@@ -9,6 +9,7 @@ import { getWeekCh } from '@/helpers/utils'
 import ColCalendar from '@/components/col-calendar'
 import { ElButton, ElDialog, ElMessageBox, ElTag } from 'element-plus'
 import { scrollAnimation } from '@/util/scroll'
+import iconTimer from '../../images/icon_timer.png'
 
 export default defineComponent({
   name: 'arrange',
@@ -241,8 +242,8 @@ export default defineComponent({
   render() {
     return (
       <div class={[styles.arrange]}>
-        <div class="px-[235px] pt-7">
-          <div class="border-dashed border-[#EDEDED] border-2 rounded-lg px-8 pt-4 pb-6">
+        <div class="px-12 pt-7">
+          <div class="px-8 pt-4 pb-6 bg-[#FCFCFC] rounded-[10px]">
             <ColCalendar
               selectList={createState.selectCourseList}
               list={this.calendarList}
@@ -259,14 +260,14 @@ export default defineComponent({
               <span>已选择课程时间</span>
             </div>
 
-            <div class={styles.rTag}>
+            <div class={[styles.rTag, 'flex flex-wrap']}>
               {this.showSelectList.map((item: any) => (
                 <>
                   <ElTag
                     round
                     size="large"
                     effect="light"
-                    class={['mb-2 !border-[#2DC7AA] !color-[#2DC7AA]']}
+                    class={['mb-2 !border-[#2DC7AA] !color-[#2DC7AA] mr-2']}
                     closable
                     onClose={() => this.onCloseTag(item)}
                   >
@@ -279,9 +280,10 @@ export default defineComponent({
           </div>
         </div>
 
-        <div class="border-t border-t-[#E5E5E5] text-center pt-6 pb-7">
+        <div class="text-center pt-6 pb-7">
           <ElButton
-            class="!w-40 !h-[38px]"
+            round
+            class="!w-44 !h-[48px] !text-base"
             onClick={() => {
               createState.active = 2
               // 重置选择的课次
@@ -294,8 +296,9 @@ export default defineComponent({
             上一步
           </ElButton>
           <ElButton
+            round
             type="primary"
-            class="!w-40 !h-[38px]"
+            class="!w-44 !h-[48px] !text-base"
             onClick={this.onSubmit}
           >
             下一步
@@ -305,28 +308,49 @@ export default defineComponent({
         <ElDialog
           modelValue={this.selectStatus}
           onUpdate:modelValue={e => (this.selectStatus = e)}
-          width={'400px'}
-          title="提示"
+          width={'488px'}
+          // title="提示"
+          custom-class={!createState.coursePlanStatus && styles.dialog}
+          v-slots={{
+            header: () => (
+              <h2 class="text-center text-2xl text-[#333] font-medium">
+                {!createState.coursePlanStatus ? '温馨提示' : '课程确认'}
+              </h2>
+            )
+          }}
         >
           <div class={styles.selectContainer}>
             <div class={styles.selectPopupContent}>
               <p class={styles.desc}>
-                {this.selectType === 'noEnough' && !createState.coursePlanStatus
-                  ? '您所选择的上课时间未达到您输入的课时数，系统根据已选时间将自动按周顺延排课。'
-                  : '您已选择以下上课时间段，时间段会暂时锁定，锁定期间学员不可购买该时间段课程。'}
+                {this.selectType === 'noEnough' &&
+                !createState.coursePlanStatus ? (
+                  <div class="text-center py-9">
+                    您所选择的上课时间未达到您输入的课时数
+                    <br />
+                    系统根据已选时间将自动按周顺延排课。
+                  </div>
+                ) : (
+                  '您已选择以下上课时间段，时间段会暂时锁定，锁定期间学员不可购买该时间段课程。'
+                )}
               </p>
               {createState.live.coursePlanList &&
                 createState.live.coursePlanList.length > 0 &&
                 createState.coursePlanStatus && (
                   <p class={styles.times}>
                     {createState.live.coursePlanList.map((item: any) => (
-                      <span>
-                        {dayjs(item.startTime || new Date()).format(
-                          'YYYY-MM-DD'
-                        )}{' '}
-                        {dayjs(item.startTime || new Date()).format('HH:mm')}~
-                        {dayjs(item.endTime || new Date()).format('HH:mm')}
-                      </span>
+                      <div class="flex items-center">
+                        <img
+                          src={iconTimer}
+                          class="inline-block w-4 h-4 mr-3 mb-0.5"
+                        />
+                        <span>
+                          {dayjs(item.startTime || new Date()).format(
+                            'YYYY-MM-DD'
+                          )}{' '}
+                          {dayjs(item.startTime || new Date()).format('HH:mm')}~
+                          {dayjs(item.endTime || new Date()).format('HH:mm')}
+                        </span>
+                      </div>
                     ))}
                   </p>
                 )}
@@ -337,7 +361,7 @@ export default defineComponent({
                 type="primary"
                 round
                 plain
-                class="!w-40 !h-[38px]"
+                class="!w-40 !h-[48px] !text-base"
                 onClick={this.onReset}
               >
                 {this.selectType === 'noEnough' ? '继续选择' : '重新选择'}
@@ -345,7 +369,7 @@ export default defineComponent({
               <ElButton
                 type="primary"
                 round
-                class="!w-40 !h-[38px]"
+                class="!w-40 !h-[48px] !text-base"
                 onClick={this.onSure}
               >
                 确认

src/views/user-info/live-operation/course-info/index.module.less

@@ -0,0 +1,15 @@
+.formSection {
+  --el-component-size-large: 48px;
+  :global {
+    .el-input,
+    .el-select--large,
+    .el-form-item--large .el-form-item__label {
+      height: 48px;
+      line-height: 48px;
+    }
+    .el-form-item__label {
+      font-size: 16px;
+      color: rgba(0, 0, 0, 0.85);
+    }
+  }
+}

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

@@ -105,12 +105,12 @@ export default defineComponent({
   },
   render() {
     return (
-      <>
+      <div class={styles.formSection}>
         <ElForm
-          class="px-[200px] pb-10 pt-7"
+          class="px-6 pb-10 pt-7"
           size="large"
           ref="form"
-          labelWidth={'100px'}
+          labelWidth={'120px'}
           labelPosition="left"
           model={createState.live}
         >
@@ -237,7 +237,7 @@ export default defineComponent({
               }}
             />
           </ElFormItem>
-          <div class="text-sm text-[#999] pl-[100px] leading-relaxed pb-2">
+          <div class="text-sm text-[#999] pl-[120px] leading-relaxed pb-2">
             <p>扣除手续费后您的课程预计收入为：</p>
             <p>
               单课时
@@ -253,10 +253,11 @@ export default defineComponent({
             <p>您的课程收入将在课程结束后结算到您的账户中</p>
           </div>
         </ElForm>
-        <div class="border-t border-t-[#E5E5E5] text-center pt-6 pb-7">
+        <div class="text-center pt-6 pb-7">
           <ElButton
             type="primary"
-            class="!w-40 !h-[38px]"
+            round
+            class="!w-44 !h-[48px] !text-base"
             onClick={() => {
               ;(this as any).$refs.form.validate(async (valid: boolean) => {
                 if (valid) {
@@ -281,7 +282,7 @@ export default defineComponent({
             下一步
           </ElButton>
         </div>
-      </>
+      </div>
     )
   }
 })

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

@@ -5,3 +5,18 @@
     }
   }
 }
+.formSection {
+  --el-component-size-large: 38;
+  :global {
+    .el-input,
+    .el-select--large,
+    .el-form-item--large .el-form-item__label {
+      height: 38;
+      line-height: 38;
+    }
+    .el-form-item__label {
+      font-size: 16px;
+      color: rgba(0, 0, 0, 0.85);
+    }
+  }
+}

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

@@ -2,6 +2,7 @@ import { scrollAnimation } from '@/util/scroll'
 import { ElButton, ElForm, ElFormItem, ElInput } from 'element-plus'
 import { defineComponent } from 'vue'
 import { basePlan, createState } from '../createState'
+import styles from './index.module.less'
 
 export default defineComponent({
   name: 'course-plan',
@@ -57,9 +58,9 @@ export default defineComponent({
   },
   render() {
     return (
-      <>
+      <div class={styles.formSection}>
         <ElForm
-          class="px-[200px] pb-10 pt-7"
+          class="px-6 pb-10 pt-7"
           size="large"
           ref="form"
           labelWidth={'100px'}
@@ -71,6 +72,7 @@ export default defineComponent({
               <ElFormItem
                 label={`第${item.classNum}课`}
                 prop={`coursePlanList.${index}.plan`}
+                class="pb-2"
                 rules={[{ required: true, message: '请输入课程计划' }]}
               >
                 <ElInput
@@ -85,9 +87,10 @@ export default defineComponent({
               </ElFormItem>
             ))}
         </ElForm>
-        <div class="border-t border-t-[#E5E5E5] text-center pt-6 pb-7">
+        <div class="text-center pt-4 pb-7">
           <ElButton
-            class="!w-40 !h-[38px]"
+            round
+            class="!w-44 !h-[48px] !text-base"
             onClick={() => {
               createState.active = 0
               createState.live.coursePlanList = [{ ...basePlan }]
@@ -96,14 +99,15 @@ export default defineComponent({
             上一步
           </ElButton>
           <ElButton
+            round
             type="primary"
-            class="!w-40 !h-[38px]"
+            class="!w-44 !h-[48px] !text-base"
             onClick={this.onSubmit}
           >
             下一步
           </ElButton>
         </div>
-      </>
+      </div>
     )
   }
 })

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

@@ -18,13 +18,13 @@ export default defineComponent({
   render() {
     return (
       <>
-        <div class="text-base text-[#333] leading-none px-6 py-5 border-b border-b-[#E5E5E5]">
+        <div class="text-2xl font-medium text-black leading-none px-6 py-5 ">
           {this.type === 'create' ? '新建直播课' : '编辑直播课'}
         </div>
 
         <div class="pt-12">
           <ColSteps
-            class="px-[190px]"
+            class="px-[58px]"
             type="small"
             active={createState.active}
           />

src/views/user-info/model/practice-timer/index.tsx

@@ -212,7 +212,7 @@ export default defineComponent({
             ))}
           </ElRow>
 
-          <div class="h-72 overflow-auto">
+          <div class="h-72 overflow-y-auto overflow-x-hidden">
             {this.list.map((item: any, index: number) => (
               <ElRow gutter={5} class="pt-1">
                 <ElCol span={3}>
@@ -252,7 +252,8 @@ export default defineComponent({
         {/* <Sticky offsetBottom={0} position="bottom"> */}
         <div class="text-center pt-3 pb-5">
           <ElButton
-            class="!w-40 !h-[38px]"
+            class="!w-40 !h-[48px] !text-base"
+            round
             onClick={() => {
               this.onClose()
             }}
@@ -261,8 +262,9 @@ export default defineComponent({
           </ElButton>
           <ElButton
             type="primary"
-            class="!w-40 !h-[38px]"
+            class="!w-40 !h-[48px] !text-base"
             onClick={this.onSubmit}
+            round
           >
             保存设置
           </ElButton>

src/views/user-info/practice-setting/index.module.less

@@ -1,5 +1,17 @@
 .setting {
+  --el-component-size-large: 48px;
+  --el-border-radius-small: 10px;
   :global {
+    .el-input,
+    .el-select--large,
+    .el-form-item--large .el-form-item__label {
+      height: 48px;
+      line-height: 48px;
+    }
+    .el-form-item__label {
+      font-size: 16px;
+      color: rgba(0, 0, 0, 0.85);
+    }
     .el-dialog {
       --el-dialog-width: 485px !important;
     }
@@ -12,7 +24,7 @@
       border: var(--el-border);
       border-radius: var(--el-border-radius-base) !important;
       width: 100%;
-      padding: 11px 19px !important;
+      padding: 16px 19px !important;
     }
     .el-radio-button__original-radio:checked + .el-radio-button__inner {
       background-color: #e9fff8;

src/views/user-info/practice-setting/index.tsx

@@ -251,18 +251,18 @@ export default defineComponent({
   render() {
     return (
       <div class={styles.setting}>
-        <div class="text-base text-[#666] leading-none px-6 py-5 border-b border-b-[#E5E5E5]">
+        <div class="text-2xl font-medium text-black leading-none px-6 py-5 ">
           陪练课设置
         </div>
         {state.user.data?.entryFlag ? (
           <>
             <ElForm
               labelPosition="left"
-              labelWidth={'180px'}
+              labelWidth={'188px'}
               size="large"
               model={this.form}
               ref="form"
-              class="px-44 py-5"
+              class="px-6 py-5"
             >
               <ElFormItem
                 label="是否开启陪练"
@@ -382,9 +382,10 @@ export default defineComponent({
               </ElFormItem>
             </ElForm>
 
-            <div class="border-t border-t-[#E5E5E5] text-center pt-6 pb-7">
+            <div class="text-center pt-6 pb-7">
               <ElButton
-                class="!w-40 !h-[38px]"
+                class="!w-44 !h-[48px] !text-base"
+                round
                 onClick={() => {
                   // 重置数据
                   this.form = {
@@ -404,7 +405,8 @@ export default defineComponent({
               </ElButton>
               <ElButton
                 type="primary"
-                class="!w-40 !h-[38px]"
+                class="!w-44 !h-[48px] !text-base"
+                round
                 onClick={this.onSubmit}
               >
                 保存设置
@@ -427,6 +429,7 @@ export default defineComponent({
           modelValue={this.timerStatus}
           onUpdate:modelValue={val => (this.timerStatus = val)}
           showClose
+          width={'488px'}
         >
           <PracticeTimer
             onChoice={this.onChoiceTimer}

src/views/user-info/video-class/index.module.less

@@ -1,19 +1,45 @@
 .liveClass {
   :global {
-    .el-tabs__nav-wrap {
-      @apply px-11;
-    }
+    // .el-tabs__nav-wrap {
+    //   @apply px-11;
+    // }
     .el-tabs__item {
-      @apply text-base;
-      color: #666;
-      height: 64px;
-      line-height: 64px;
-      padding: 0 42px;
+      font-size: 20px;
+      font-weight: 500;
+      color: #999;
+      height: 56px;
+      line-height: 56px;
+      padding-right: 40px;
+      padding-left: 0;
+      &.is-active {
+        font-size: 24px;
+        color: #000;
+      }
     }
 
     .el-tabs__nav-wrap::after {
       height: 1px;
       background: #eeeeee;
     }
+
+    .el-tabs__active-bar {
+      height: 4px;
+    }
+  }
+}
+
+.items:first-child {
+  display: flex;
+  justify-content: flex-start;
+  & > div {
+    margin: 0;
+  }
+}
+
+.items:nth-child(3n + 3) {
+  display: flex;
+  justify-content: flex-end;
+  & > div {
+    margin: 0;
   }
 }

src/views/user-info/video-class/index.tsx

@@ -15,13 +15,13 @@ export default defineComponent({
   },
   render() {
     return (
-      <div class={[styles.liveClass, 'relative']}>
+      <div class={[styles.liveClass, 'relative px-[25px]']}>
         {/* 审核状态(DOING:待审核 PASS:通过 */}
         {/* UNPASS:未通过),可用值:UNPAALY,DOING,PASS,UNPASS */}
         <ElButton
           round
           type="primary"
-          class="absolute right-11 top-4 z-10"
+          class="absolute right-11 top-3 z-10"
           onClick={() => {
             if (state.user.data?.entryFlag) {
               this.$router.push('/userInfo/videoOperation')
@@ -31,7 +31,7 @@ export default defineComponent({
             }
           }}
         >
-          新建视频课
+          新建课程
         </ElButton>
         <ElTabs v-model={this.activeName}>
           <ElTabPane label="已上架" name="PASS">

src/views/user-info/video-class/list.tsx

@@ -5,6 +5,7 @@ import { state } from '@/state'
 import { ElSkeleton, ElSkeletonItem } from 'element-plus'
 import { defineComponent } from 'vue'
 import Item from '../components/item'
+import styles from './index.module.less'
 
 export default defineComponent({
   name: 'list',
@@ -83,21 +84,21 @@ export default defineComponent({
       <>
         {state.user.data?.entryFlag ? (
           <>
-            <div class="flex flex-wrap px-10">
+            <div class="flex flex-wrap">
               <ElSkeleton
                 loading={this.loading}
                 animated
-                class="flex"
+                class="flex justify-between"
                 count={3}
                 v-slots={{
                   template: () => (
-                    <div class="w-1/3">
-                      <div class="flex flex-col pt-8 w-[262px] m-auto">
+                    <div class="w-[218px]">
+                      <div class="flex flex-col pt-8 w-[218px] rounded-[10px] overflow-hidden m-auto">
                         <ElSkeletonItem
                           variant="image"
-                          style={{ width: '100%', height: '175px' }}
+                          style={{ width: '100%', height: '122px' }}
                         ></ElSkeletonItem>
-                        <div class="mx-2.5 py-3.5 border-b border-b-[#F2F2F2]">
+                        {/* <div class="mx-2.5 py-3.5 border-b border-b-[#F2F2F2]">
                           <div class="text-lg leading-none font-medium whitespace-nowrap overflow-hidden text-ellipsis">
                             <ElSkeletonItem variant="h3"></ElSkeletonItem>
                           </div>
@@ -107,22 +108,17 @@ export default defineComponent({
                               style={{ width: '50%' }}
                             ></ElSkeletonItem>
                           </div>
+                        </div> */}
+                        <div class="text-base px-2.5 pt-2 text-[#666666] leading-none font-medium whitespace-nowrap overflow-hidden text-ellipsis">
+                          <ElSkeletonItem variant="h3"></ElSkeletonItem>
                         </div>
 
-                        <div class="mx-2.5 py-4 flex items-center">
-                          <ElSkeletonItem
-                            variant="circle"
-                            style={{
-                              width: '22px',
-                              height: '22px',
-                              marginRight: '5px'
-                            }}
-                          ></ElSkeletonItem>
+                        <div class="mx-2.5 pt-1.5 pb-2 flex items-center justify-between">
                           <ElSkeletonItem
                             variant="p"
                             style={{ width: '20%' }}
                           ></ElSkeletonItem>
-                          <p style={{ width: '45%' }}></p>
+                          <p style={{ width: '60%' }}></p>
                           <ElSkeletonItem
                             variant="p"
                             style={{ width: '20%' }}
@@ -134,7 +130,28 @@ export default defineComponent({
                 }}
               >
                 {this.list.map((item: any) => (
-                  <div class="w-1/3 pt-8" onClick={() => this.onDetail(item)}>
+                  <div
+                    class={['w-1/3 pt-8', styles.items]}
+                    onClick={() => this.onDetail(item)}
+                  >
+                    <Item
+                      item={{
+                        backgroundPic: item.lessonCoverUrl,
+                        courseGroupName: item.lessonName,
+                        studentCount: item.countStudent,
+                        avatar: item.avatar,
+                        teacherName: item.username,
+                        coursePrice: item.lessonPrice,
+                        courseNum: item.lessonCount
+                      }}
+                    />
+                  </div>
+                ))}
+                {this.list.map((item: any) => (
+                  <div
+                    class={['w-1/3 pt-6', styles.items]}
+                    onClick={() => this.onDetail(item)}
+                  >
                     <Item
                       item={{
                         backgroundPic: item.lessonCoverUrl,

src/views/user-info/video-operation/course-content/index.module.less

@@ -1,5 +1,16 @@
 .courseContent {
+  --el-component-size-large: 48px;
   :global {
+    .el-input,
+    .el-select--large,
+    .el-form-item--large .el-form-item__label {
+      height: 48px;
+      line-height: 48px;
+    }
+    .el-form-item__label {
+      font-size: 16px;
+      color: rgba(0, 0, 0, 0.85);
+    }
     .el-dialog {
       --el-dialog-width: 375px !important;
     }

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

@@ -113,9 +113,9 @@ export default defineComponent({
     return (
       <div class={styles.courseContent}>
         <ElForm
-          class="px-[140px] pb-10 pt-7 min-h-[280px]"
+          class="px-6 pb-10 pt-7 min-h-[280px]"
           size="large"
-          labelWidth={'90px'}
+          labelWidth={'120px'}
           labelPosition="left"
           ref="form"
           model={createState}
@@ -135,7 +135,7 @@ export default defineComponent({
           </ElFormItem>
           {createState.lessonList.map((item: any, index: number) => (
             <div
-              class="p-4 pt-5 rounded-xl mb-3 border border-dashed border-gray-300 relative"
+              class="p-4 mb-10 border-b border-solid border-[#E7E6E6] relative"
               key={item.key}
             >
               <div class="absolute right-4 top-4 z-10 flex">
@@ -198,33 +198,8 @@ export default defineComponent({
                   </ElTooltip>
                 )}
               </div>
-              <ElRow>
-                <ElCol span={10}>
-                  <ElFormItem label={`第${index + 1}课`}>
-                    {/* <ColUploadVideo
-                      v-model:modelValue={item.videoUrl}
-                      disabled
-                    /> */}
-                    <ColVideo
-                      styleValue={{ with: '150px', height: '85px' }}
-                      controls={false}
-                      src={item.videoUrl}
-                      // progress={false}
-                      volume={false}
-                    />
-                    <p></p>
-                  </ElFormItem>
-                </ElCol>
-                <ElCol span={10}>
-                  <ElFormItem
-                    label="视频封面"
-                    prop={`lessonList.${index}.coverUrl`}
-                    rules={[{ required: true, message: '请上传视频封面' }]}
-                  >
-                    <ColUpload v-model:modelValue={item.coverUrl} />
-                  </ElFormItem>
-                </ElCol>
-              </ElRow>
+              <h2 class="text-xl font-medium pb-5">{`第 ${index + 1} 课`}</h2>
+
               <ElFormItem
                 label="课程标题"
                 prop={`lessonList.${index}.videoTitle`}
@@ -261,12 +236,41 @@ export default defineComponent({
                   showWordLimit
                 />
               </ElFormItem>
+              <ElRow>
+                <ElCol span={12}>
+                  {/* <ElFormItem label={`第${index + 1}课`}> */}
+                  <ElFormItem label="课程视频" required>
+                    {/* <ColUploadVideo
+                      v-model:modelValue={item.videoUrl}
+                      disabled
+                    /> */}
+                    <ColVideo
+                      styleValue={{ with: '150px', height: '85px' }}
+                      controls={false}
+                      src={item.videoUrl}
+                      // progress={false}
+                      volume={false}
+                    />
+                    <p></p>
+                  </ElFormItem>
+                </ElCol>
+                <ElCol span={10}>
+                  <ElFormItem
+                    label="视频封面"
+                    prop={`lessonList.${index}.coverUrl`}
+                    rules={[{ required: true, message: '请上传视频封面' }]}
+                  >
+                    <ColUpload v-model:modelValue={item.coverUrl} />
+                  </ElFormItem>
+                </ElCol>
+              </ElRow>
             </div>
           ))}
         </ElForm>
-        <div class="border-t border-t-[#E5E5E5] text-center pt-6 pb-7">
+        <div class="text-center pt-6 pb-7">
           <ElButton
-            class="!w-40 !h-[38px]"
+            round
+            class="!w-44 !h-[48px] !text-base"
             onClick={() => {
               createState.active = 0
               const currentY =
@@ -277,8 +281,9 @@ export default defineComponent({
             上一步
           </ElButton>
           <ElButton
+            round
             type="primary"
-            class="!w-40 !h-[38px]"
+            class="!w-44 !h-[48px] !text-base"
             onClick={this.handleSubmit}
           >
             下一步

src/views/user-info/video-operation/course-info/index.module.less

@@ -10,3 +10,19 @@
   width: 150px;
   height: 85px;
 }
+
+.courseInfo {
+  --el-component-size-large: 48px;
+  :global {
+    .el-input,
+    .el-select--large,
+    .el-form-item--large .el-form-item__label {
+      height: 48px;
+      line-height: 48px;
+    }
+    .el-form-item__label {
+      font-size: 16px;
+      color: rgba(0, 0, 0, 0.85);
+    }
+  }
+}

src/views/user-info/video-operation/course-info/index.tsx

@@ -100,12 +100,12 @@ export default defineComponent({
   },
   render() {
     return (
-      <>
+      <div class={styles.courseInfo}>
         <ElForm
-          class="px-[200px] pb-10 pt-7"
+          class="px-6 pb-10 pt-7"
           size="large"
           ref="form"
-          labelWidth={'100px'}
+          labelWidth={'120px'}
           labelPosition="left"
           model={createState.lessonGroup}
         >
@@ -184,7 +184,7 @@ export default defineComponent({
               }}
             />
           </ElFormItem>
-          <div class="text-sm text-[#999] pl-[100px] leading-relaxed pb-2">
+          <div class="text-sm text-[#999] pl-[120px] leading-relaxed pb-2">
             <p>扣除手续费后您的课程预计收入为： </p>
             <p>
               课程组总收入
@@ -220,7 +220,7 @@ export default defineComponent({
               >
                 <ElRow>
                   {createState.templateList.map((item: any) => (
-                    <ElCol span={10} class="mb-3 cursor-pointer">
+                    <ElCol span={7} class="mb-3 cursor-pointer">
                       <div
                         class="w-[152px] relative rounded-xl overflow-hidden border"
                         onClick={() => {
@@ -280,10 +280,11 @@ export default defineComponent({
             </ElFormItem>
           )}
         </ElForm>
-        <div class="border-t border-t-[#E5E5E5] text-center pt-6 pb-7">
+        <div class=" text-center pt-6 pb-7">
           <ElButton
             type="primary"
-            class="!w-40 !h-[38px]"
+            round
+            class="!w-44 !h-[48px] !text-base"
             onClick={() => {
               ;(this as any).$refs.form.validate(async (valid: boolean) => {
                 if (valid) {
@@ -308,7 +309,7 @@ export default defineComponent({
             下一步
           </ElButton>
         </div>
-      </>
+      </div>
     )
   }
 })

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

@@ -97,13 +97,13 @@ export default defineComponent({
   render() {
     return (
       <>
-        <div class="text-base text-[#333] leading-none px-6 py-5 border-b border-b-[#E5E5E5]">
+        <div class="text-2xl font-medium text-black leading-none px-6 py-5 ">
           {this.type === 'create' ? '新建视频课' : '编辑视频课'}
         </div>
 
         <div class="pt-12">
           <ColSteps
-            class="px-[200px]"
+            class="px-[60px]"
             type="large"
             active={createState.active}
           />