更新

src/colexiu-project.code-workspace

@@ -1,20 +0,0 @@
-{
-	"folders": [
-		{
-			"path": ".."
-		},
-		{
-			"path": "../../mdaya"
-		},
-		{
-			"path": "../../h5-colexiu"
-		},
-		{
-			"path": "../../colexiu-manage"
-		},
-		{
-			"path": "../../dy-admin-live"
-		}
-	],
-	"settings": {}
-}

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

@@ -1,35 +1,76 @@
 .step {
-  @apply flex-1 flex items-center justify-center text-[#999] text-[14px] last:mr-0 relative h-[38px] -mr-2;
-}
-.small {
-  background: url('./images/small_default_bg.png') no-repeat center;
-  background-size: contain;
+  // @apply flex-1 flex items-center justify-center text-[#999] text-[14px] last:mr-0 relative h-[38px] -mr-2;
+  @apply text-[#666];
 
-  &.active {
-    background: url('./images/small_bg.png') no-repeat center;
-    background-size: contain;
-    @apply text-white;
+  &:first-child {
+    .imgNum {
+      padding-left: 0;
+    }
   }
 }
 
-.medium {
-  background: url('./images/medium_default_bg.png') no-repeat center;
-  background-size: contain;
+.flex {
+  flex: 1;
+}
+
+.line {
+  width: 100%;
+  height: 4px;
+  background: url('./images/yuan.png') repeat-x center;
+  background-size: 8px;
+  border-radius: 2px;
 
   &.active {
-    background: url('./images/medium_bg.png') no-repeat center;
-    background-size: contain;
-    @apply text-white;
+    background: #2dc7aa;
   }
 }
 
-.large {
-  background: url('./images/large_default_bg.png') no-repeat center;
-  background-size: contain;
-
-  &.active {
-    background: url('./images/large_bg.png') no-repeat center;
-    background-size: contain;
-    @apply text-white;
+.imgRound {
+  // .imgNum {
+  //   width: 44px;
+  //   height: 24px;
+  //   padding: 0 10px;
+  //   background-color: #fff;
+  //   z-index: 10;
+  //   position: relative;
+  // }
+  img {
+    width: 24px;
+    height: 24px;
+    z-index: 10;
+    position: relative;
   }
 }
+
+// .small {
+//   background: url('./images/small_default_bg.png') no-repeat center;
+//   background-size: contain;
+
+//   &.active {
+//     background: url('./images/small_bg.png') no-repeat center;
+//     background-size: contain;
+//     @apply text-white;
+//   }
+// }
+
+// .medium {
+//   background: url('./images/medium_default_bg.png') no-repeat center;
+//   background-size: contain;
+
+//   &.active {
+//     background: url('./images/medium_bg.png') no-repeat center;
+//     background-size: contain;
+//     @apply text-white;
+//   }
+// }
+
+// .large {
+//   background: url('./images/large_default_bg.png') no-repeat center;
+//   background-size: contain;
+
+//   &.active {
+//     background: url('./images/large_bg.png') no-repeat center;
+//     background-size: contain;
+//     @apply text-white;
+//   }
+// }

src/components/col-steps/index.tsx

@@ -1,6 +1,6 @@
 import { defineComponent, PropType } from 'vue'
 import styles from './index.module.less'
-
+import iconSuccess from '@/common/images/icon_success.png'
 export const getAssetsHomeFile = (fileName: string) => {
   const path = `./images/${fileName}`
   const modules = import.meta.globEager('./images/*')
@@ -21,80 +21,120 @@ export default defineComponent({
   },
   data() {
     return {
+      stepLength: 0,
       list: {
         small: [
           {
             title: '课程信息',
-            iconActive: getAssetsHomeFile('6.png')
+            iconActive: getAssetsHomeFile('n1.png')
           },
           {
             title: '教学计划',
-            icon: getAssetsHomeFile('2.png'),
-            iconActive: getAssetsHomeFile('2_active.png')
+            icon: getAssetsHomeFile('n2.png'),
+            iconActive: getAssetsHomeFile('n2.png')
           },
           {
             title: '课程安排',
-            icon: getAssetsHomeFile('4.png'),
-            iconActive: getAssetsHomeFile('4_active.png')
+            icon: getAssetsHomeFile('n3.png'),
+            iconActive: getAssetsHomeFile('n3.png')
           },
           {
             title: '开课条件',
-            icon: getAssetsHomeFile('3.png'),
-            iconActive: getAssetsHomeFile('3_active.png')
+            icon: getAssetsHomeFile('n4.png'),
+            iconActive: getAssetsHomeFile('n4.png')
           }
         ],
         medium: [
           {
             title: '实名认证',
-            iconActive: getAssetsHomeFile('7.png')
+            iconActive: getAssetsHomeFile('n1.png')
           },
           {
             title: '基本信息',
-            icon: getAssetsHomeFile('1.png'),
-            iconActive: getAssetsHomeFile('1_active.png')
+            icon: getAssetsHomeFile('n2.png'),
+            iconActive: getAssetsHomeFile('n2.png')
           },
           {
             title: '学历信息',
-            icon: getAssetsHomeFile('8.png'),
-            iconActive: getAssetsHomeFile('8_active.png')
+            icon: getAssetsHomeFile('n3.png'),
+            iconActive: getAssetsHomeFile('n3.png')
           }
         ],
         large: [
           {
             title: '课程信息',
-            iconActive: getAssetsHomeFile('6.png')
+            iconActive: getAssetsHomeFile('n1.png')
           },
           {
             title: '课程内容',
-            icon: getAssetsHomeFile('5.png'),
-            iconActive: getAssetsHomeFile('5_active.png')
+            icon: getAssetsHomeFile('n2.png'),
+            iconActive: getAssetsHomeFile('n2.png')
           }
         ]
       }
     }
   },
+  mounted() {
+    this.stepLength = this.list[this.type].length
+  },
   render() {
+    console.log(this.active)
     return (
-      <div class={[styles.steps, 'flex items-center bg-white']}>
+      <div class={[styles.steps, 'flex items-center justify-between bg-white']}>
         {this.list[this.type].map((item: any, index: number) => (
           <div
             class={[
               styles.step,
               styles[this.type],
+              this.stepLength - 1 > index && styles.flex,
               this.active >= index && styles.active
             ]}
           >
-            <div class="w-[30px] h-[30px] rounded-full overflow-hidden bg-slate-600 mr-3">
+            <div
+              class={[
+                'flex items-end pb-5',
+                !(index === 0 || this.active >= index) && 'opacity-80'
+                // (index === 0 || this.active >= index) && styles.flex
+              ]}
+            >
               {index === 0 || this.active >= index ? (
-                <img src={item.iconActive} />
+                <img src={item.iconActive} class="w-[18px] h-[22px]" />
               ) : (
-                <img src={item.icon} />
+                <img src={item.icon} class="w-[18px] h-[22px]" />
+              )}
+              <span class={['pl-2 text-lg font-medium leading-none']}>
+                {item.title}
+              </span>
+            </div>
+
+            <div class={['relative', styles.imgRound]}>
+              <div class={styles.imgNum}>
+                {index === 0 || this.active >= index ? (
+                  <img src={iconSuccess} class="bg-white " />
+                ) : (
+                  <div class="w-6 h-6 box-border border-2 border-['#ADE2D1'] rounded-full"></div>
+                )}
+              </div>
+              {this.stepLength - 1 > index && (
+                <div class="pl-[30px] pr-[5px] box-border absolute top-2.5 w-full">
+                  <div
+                    class={[styles.line, this.active > index && styles.active]}
+                  ></div>
+                </div>
               )}
             </div>
-            {item.title}
           </div>
         ))}
       </div>
+
+      //   <div class="w-[30px] h-[30px] rounded-full overflow-hidden bg-slate-600 mr-3">
+      //     {index === 0 || this.active >= index ? (
+      //       <img src={item.iconActive} />
+      //     ) : (
+      //       <img src={item.icon} />
+      //     )}
+      //   </div>
+      //   {item.title}
     )
   }
 })

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

@@ -12,7 +12,7 @@
 .uploadFile {
   width: 100%;
   min-width: 300px;
-  height: 40px;
+  height: 50px;
   border: 1px solid rgba(142, 142, 142, 0.26);
   border-radius: 4px;
   display: flex;

src/components/col-upload/index.tsx

@@ -172,7 +172,7 @@ export default defineComponent({
           <div
             ref="uploadDom"
             class={[styles.uploadClass, 'w-full']}
-            style={{ height: this.uploadType === 'image' ? '85px' : '38px' }}
+            style={{ height: this.uploadType === 'image' ? '85px' : '48px' }}
           >
             {this.modelValue ? (
               this.uploadType === 'image' ? (

src/style/index.css

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

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

@@ -41,11 +41,13 @@ export default defineComponent({
   },
   render() {
     return (
-      <div class="pt-12 px-72 pb-24">
-        <ColSteps type="medium" active={teacherState.active} />
-        {teacherState.active === 0 && <CertInfo />}
-        {teacherState.active === 1 && <BaseInfo />}
-        {teacherState.active === 2 && <EduInformation />}
+      <div class="bg-[#F8F8F8]">
+        <div class="w-[1002px] m-auto bg-white pt-12 px-48 pb-24">
+          <ColSteps type="medium" active={teacherState.active} />
+          {teacherState.active === 0 && <CertInfo />}
+          {teacherState.active === 1 && <BaseInfo />}
+          {teacherState.active === 2 && <EduInformation />}
+        </div>
       </div>
     )
   }

src/views/role-auth/teacherAuth/components/base-info/index.module.less

@@ -1,5 +1,15 @@
 .form {
+  --el-component-size-large: 48px;
   :global {
+    .el-input,
+    .el-select--large {
+      height: 48px;
+      line-height: 48px;
+    }
+    .el-form-item__label {
+      font-size: 16px;
+      color: rgba(0, 0, 0, 0.85);
+    }
     .el-radio-button__inner {
       border: var(--el-border);
       border-radius: var(--el-border-radius-base) !important;

src/views/role-auth/teacherAuth/components/base-info/index.tsx

@@ -21,7 +21,7 @@ export default defineComponent({
         ref="form"
         size="large"
         model={teacherState.teacherCert}
-        labelPosition="left"
+        labelPosition="top"
       >
         <ElFormItem
           label="可教授声部（可多选）"
@@ -64,9 +64,10 @@ export default defineComponent({
           />
         </ElFormItem>
         <ElFormItem>
-          <div class="text-center w-full">
+          <div class="text-center w-full pt-8">
             <ElButton
-              class="!w-40 !h-[38px]"
+              class="!w-44 !h-[48px]"
+              round
               onClick={() => {
                 teacherState.active = 0
               }}
@@ -75,7 +76,8 @@ export default defineComponent({
             </ElButton>
             <ElButton
               type="primary"
-              class="!w-40 !h-[38px]"
+              class="!w-44 !h-[48px]"
+              round
               onClick={() => {
                 ;(this as any).$refs['form'].validate(async (_: boolean) => {
                   if (_) {

src/views/role-auth/teacherAuth/components/cert-brief/index.module.less

@@ -1,10 +1,10 @@
 .musicAuth {
-  background: url('../../../images/bg_top.png') no-repeat top left,
-    url('../../../images/bg_left_bottom.png') no-repeat left bottom,
-    url('../../../images/bg_right_center.png') no-repeat right 70%,
-    url('../../../images/teacher_main.png') no-repeat top right;
-  background-size: 212px 126px, 178px 172px, 171px 230px, 682px 458px;
-  background-color: #fff;
+  // background: url('../../../images/bg_top.png') no-repeat top left,
+  //   url('../../../images/bg_left_bottom.png') no-repeat left bottom,
+  //   url('../../../images/bg_right_center.png') no-repeat right 70%,
+  //   url('../../../images/teacher_main.png') no-repeat top right;
+  // background-size: 212px 126px, 178px 172px, 171px 230px, 682px 458px;
+  // background-color: #fff;
   .txt {
     position: relative;
     z-index: 1;
@@ -26,8 +26,31 @@
 
   .col {
     background: #ffffff;
-    box-shadow: 0px 10px 36px 0px rgba(0, 0, 0, 0.13);
+    box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.1);
     border-radius: 10px;
-    min-height: 197px;
+    width: 218px;
+  }
+
+  .musicHeader {
+    background: url('../../../images/teacher/header_bg.png') no-repeat center;
+    background-size: contain;
+  }
+
+  .before,
+  .after {
+    width: 30px;
+    height: 20px;
+    display: inline-block;
+  }
+
+  .before {
+    background: url('../../../images/teacher/title_left.png') no-repeat center;
+    background-size: contain;
+    margin-right: 10px;
+  }
+  .after {
+    background: url('../../../images/teacher/title_right.png') no-repeat center;
+    background-size: contain;
+    margin-left: 10px;
   }
 }

src/views/role-auth/teacherAuth/components/cert-brief/index.tsx

@@ -5,8 +5,8 @@ import { defineComponent } from 'vue'
 import { teacherState } from '../../teacherState'
 import styles from './index.module.less'
 export const getAssetsHomeFile = (fileName: string) => {
-  const path = `../../../images/${fileName}`
-  const modules = import.meta.globEager('../../../images/*')
+  const path = `../../../images/teacher/${fileName}`
+  const modules = import.meta.globEager('../../../images/teacher/*')
   return modules[path].default
 }
 
@@ -15,8 +15,8 @@ export default defineComponent({
   computed: {
     auth() {
       // 音乐人审核状态 UNPAALY、未申请 DOING、审核中 PASS、通过 UNPASS、不通过,可用值:UNPAALY,DOING,PASS,UNPASS
-      let auth = state.user.data?.entryStatus
-      let obj = {
+      const auth = state.user.data?.entryStatus
+      const obj = {
         text: '立即认证',
         status: false
       }
@@ -31,7 +31,7 @@ export default defineComponent({
       }
       return obj
     },
-    authStatus(): Boolean {
+    authStatus() {
       const entryStatus = state.user.data?.entryStatus || 0
       return entryStatus === 'PASS' ? true : false
     }
@@ -68,53 +68,72 @@ export default defineComponent({
   },
   render() {
     return (
-      <div class={[styles.musicAuth, 'px-[138px]']}>
-        <div class="w-[388px] pt-24 pb-28">
-          <div class="text-[28px] font-semibold pb-5">酷乐秀基本介绍</div>
-          <p class={[styles.txt]}>
-            酷乐秀是一款为器乐学习者提供智能陪练及线上授课撮
-          </p>
-          <p class={[styles.txt]}>
-            合的乐器教学平台，器乐老师可通过自身的专业知识为
-          </p>
-          <p class={[styles.txt, 'inline-block']}>
-            自己带来<span class="font-medium">授课及曲谱销售收益</span>。
-          </p>
+      <div class={[styles.musicAuth]}>
+        <div
+          class={[
+            styles.musicHeader,
+            'w-[1080px] h-[393px] m-auto text-[#333]'
+          ]}
+        >
+          <div class="w-[470px] pt-24 ml-[126px] box-border">
+            <div class="text-[28px]  font-semibold pb-7">酷乐秀基本介绍</div>
+            <p class={[styles.txt]}>
+              酷乐秀是一款为器乐学习者提供智能陪练及线上授课撮合的乐器教
+            </p>
+            <p class={[styles.txt]}>
+              学平台，器乐老师可通过自身的专业知识为自己带来
+              <span class="font-medium">授课及曲谱销</span>
+            </p>
+            <p class={[styles.txt, 'inline-block']}>
+              <span class="font-medium">售收益</span>。
+            </p>
+          </div>
         </div>
-        <div class="pb-20">
-          <h2 class="text-2xl pb-11 text-center font-semibold">认证权益</h2>
+        <div class="bg-[#FFFCF8]">
+          <div class="w-[1080px] m-auto pt-[30px] pb-[50px]">
+            <h2 class="text-[28px] pb-11 text-center font-semibold">
+              <i class={styles.before}></i>
+              认证权益
+              <i class={styles.after}></i>
+            </h2>
 
-          <ElRow class="mb-24" gutter={28}>
-            {this.list.map((item: any) => (
-              <ElCol span={6} class="pr-3 !flex">
-                <div class={[styles.col, 'flex items-center flex-col p-4']}>
-                  <img class="w-[94px] h-[87px]" src={item.logo} />
+            <ElRow class="!mx-[98px]" gutter={28}>
+              {this.list.map((item: any) => (
+                <ElCol span={6} class="!flex">
+                  <div class={[styles.col, 'flex items-center flex-col p-4']}>
+                    <img class=" w-[72px] h-[72px]" src={item.logo} />
 
-                  <div class="flex items-center font-[18px] font-medium pb-3 pt-5">
-                    <img class="w-[30px] h-[22px] mr-1" src={item.num} />
-                    {item.title}
+                    <div class="flex items-center font-[18px] font-medium pb-3 pt-5">
+                      <img class="w-[30px] h-[22px] mr-1" src={item.num} />
+                      {item.title}
+                    </div>
+                    <p class="text-[14px] text-[#666] leading-6 text-justify">
+                      {item.desc}
+                    </p>
                   </div>
-                  <p class="text-[14px] text-[#666] leading-6 text-justify">
-                    {item.desc}
-                  </p>
-                </div>
-              </ElCol>
-            ))}
-          </ElRow>
-          {!this.authStatus && (
+                </ElCol>
+              ))}
+            </ElRow>
+          </div>
+        </div>
+        {!this.authStatus && (
+          <div class="pb-32 pt-9">
             <>
               <h2 class="text-2xl pb-10 text-center font-semibold">
+                <i class={styles.before}></i>
                 酷乐秀欢迎您的加入
+                <i class={styles.after}></i>
               </h2>
 
-              <p class="text-lg text-center mb-10">
+              <p class="text-base text-center mb-[72px]">
                 在艺术的殿堂中，为他人照亮前进的道路，用自己的经验和点拨，传播艺术的种子，获取硕果。
               </p>
 
               <div class="text-center">
                 <ElButton
                   type="primary"
-                  class="rounded w-40 !h-[38px]"
+                  class="rounded w-72 !h-[48px]"
+                  round
                   disabled={this.auth.status}
                   onClick={() => {
                     const currentY =
@@ -128,8 +147,8 @@ export default defineComponent({
                 </ElButton>
               </div>
             </>
-          )}
-        </div>
+          </div>
+        )}
       </div>
     )
   }

src/views/role-auth/teacherAuth/components/cert-info/index.module.less

@@ -1,10 +1,21 @@
 .form {
+  --el-component-size-large: 48px;
   :global {
+    .el-input,
+    .el-select--large {
+      height: 48px;
+      line-height: 48px;
+    }
+    .el-form-item__label {
+      font-size: 16px;
+      color: rgba(0, 0, 0, 0.85);
+    }
+
     .el-radio-button__inner {
       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/role-auth/teacherAuth/components/cert-info/index.tsx

@@ -117,7 +117,7 @@ export default defineComponent({
         class={[styles.form, 'mx-4 mt-7']}
         size="large"
         model={teacherState.teacherCert}
-        labelPosition="left"
+        labelPosition="top"
       >
         <ElFormItem
           label="真实姓名"
@@ -196,7 +196,7 @@ export default defineComponent({
             disabled
             v-model={teacherState.teacherCert.birthdate}
             type="date"
-            class="!h-[38px] !w-full"
+            class="!h-[48px] !w-full"
             placeholder="请选择出生日期"
           />
         </ElFormItem>
@@ -231,7 +231,8 @@ export default defineComponent({
             </div>
             <ElButton
               type="primary"
-              class="!w-40 !h-[38px]"
+              round
+              class="!w-56 !h-[48px] mt-5"
               onClick={this.onSubmit}
             >
               下一步

src/views/role-auth/teacherAuth/components/edu-information/index.module.less

@@ -1,5 +1,15 @@
 .form {
+  --el-component-size-large: 48px;
   :global {
+    .el-input,
+    .el-select--large {
+      height: 48px;
+      line-height: 48px;
+    }
+    .el-form-item__label {
+      font-size: 16px;
+      color: rgba(0, 0, 0, 0.85);
+    }
     .el-radio-button__inner {
       border: var(--el-border);
       border-radius: var(--el-border-radius-base) !important;
@@ -17,7 +27,8 @@
     }
 
     .el-dialog {
-      --el-dialog-width: 379px !important;
+      --el-dialog-width: 488px !important;
+      --el-border-radius-small: 10px !important;
     }
     .el-dialog__header,
     .el-dialog__body {

src/views/role-auth/teacherAuth/components/edu-information/index.tsx

@@ -1,10 +1,12 @@
 import {
   ElButton,
+  ElCol,
   ElDialog,
   ElForm,
   ElFormItem,
   ElInput,
-  ElMessage
+  ElMessage,
+  ElRow
 } from 'element-plus'
 import { defineComponent } from 'vue'
 import styles from './index.module.less'
@@ -12,7 +14,8 @@ import { teacherState } from '../../teacherState'
 import ColUpload from '@/components/col-upload'
 import request from '@/helpers/request'
 import deepClone from '@/helpers/deep-clone'
-import iconTeacherAuth from '../../../images/icon_teacher_auth.png'
+import iconTeacherAuth from '../../../images/music-popup.png'
+import iconSuccess from '../../../images/icon_success.png'
 import { getUserInfo } from '@/state'
 
 export default defineComponent({
@@ -55,7 +58,7 @@ export default defineComponent({
         ref="form"
         size="large"
         model={teacherState.teacherCert}
-        labelPosition="left"
+        labelPosition="top"
       >
         <ElFormItem
           labelWidth={this.labelWidth}
@@ -79,37 +82,42 @@ export default defineComponent({
             placeholder="请输入您的专业名称"
           />
         </ElFormItem>
-        <ElFormItem labelWidth={this.labelWidth} label="毕业证书（选填）">
-          <ColUpload
-            v-model:modelValue={teacherState.teacherCert.gradCertificate}
-            accept=".png, .jpg"
-          />
-        </ElFormItem>
-        <ElFormItem labelWidth={this.labelWidth} label="学位证书（选填）">
-          <ColUpload
-            v-model:modelValue={teacherState.teacherCert.degreeCertificate}
-            accept=".png, .jpg"
-          />
-          {/* <ElInput
-            v-model={teacherState.teacherCert.degreeCertificate}
-            placeholder="请输入您的毕业院校"
-          /> */}
-        </ElFormItem>
-        <ElFormItem labelWidth={this.labelWidth} label="教师资格证（选填）">
-          <ColUpload
-            v-model:modelValue={teacherState.teacherCert.teacherCertificate}
-            accept=".png, .jpg"
-          />
-          {/* <ElInput
+        <ElRow>
+          <ElCol span={8}>
+            <ElFormItem labelWidth={this.labelWidth} label="毕业证书（选填）">
+              <ColUpload
+                v-model:modelValue={teacherState.teacherCert.gradCertificate}
+                accept=".png, .jpg"
+              />
+            </ElFormItem>
+          </ElCol>
+          <ElCol span={8}>
+            <ElFormItem labelWidth={this.labelWidth} label="学位证书（选填）">
+              <ColUpload
+                v-model:modelValue={teacherState.teacherCert.degreeCertificate}
+                accept=".png, .jpg"
+              />
+            </ElFormItem>
+          </ElCol>
+          <ElCol span={8}>
+            <ElFormItem labelWidth={this.labelWidth} label="教师资格证（选填）">
+              <ColUpload
+                v-model:modelValue={teacherState.teacherCert.teacherCertificate}
+                accept=".png, .jpg"
+              />
+              {/* <ElInput
             v-model={teacherState.teacherCert.teacherCertificate}
             placeholder="请输入您的毕业院校"
           /> */}
-        </ElFormItem>
+            </ElFormItem>
+          </ElCol>
+        </ElRow>
 
         <ElFormItem>
-          <div class="text-center w-full">
+          <div class="text-center w-full pt-8">
             <ElButton
-              class="!w-40 !h-[38px]"
+              class="!w-44 !h-[48px]"
+              round
               onClick={() => {
                 teacherState.active = 1
               }}
@@ -118,7 +126,8 @@ export default defineComponent({
             </ElButton>
             <ElButton
               type="primary"
-              class="!w-40 !h-[38px]"
+              class="!w-44 !h-[48px]"
+              round
               onClick={this.onSubmit}
               loading={this.loading}
             >
@@ -135,19 +144,20 @@ export default defineComponent({
           showClose
         >
           <div class="p-8">
-            <img src={iconTeacherAuth} />
+            <img src={iconTeacherAuth} class="px-6" />
+
+            <img src={iconSuccess} class="w-14 h-14 m-auto mb-4" />
             <p class="text-center text-[#666] text-base -m-1 pb-6">
-              感谢您的教学热情，小酷将在24小时内
-              <br />
-              完成审核，请留意APP消息及短信获取
+              感谢您的教学热情，小酷将在24小时内完成审核
               <br />
-              审核结果。
+              请留意APP消息及短信获取审核结果
             </p>
 
             <ElButton
               type="primary"
               class="w-full rounded-sm"
-              style={{ height: '38px' }}
+              style={{ height: '48px' }}
+              round
               onClick={() => {
                 this.popupStatus = false
                 teacherState.active = 0

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

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

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

@@ -67,7 +67,7 @@ export default defineComponent({
           老师
         </div>
         <img
-          src={iconTeacher}
+          src={this.userInfo.heardUrl || iconTeacher}
           class="w-[68px] h-[68px] rounded-full border-2 border-[#2DC7AA] border-solid mt-6 mx-auto"
         />
 
@@ -156,22 +156,36 @@ 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
+          class={
+            this.userInfo.entryFlag !== 1 && !this.checkBadge('VIP')
+              ? 'mb-9'
+              : ''
+          }
+        >
+          {this.userInfo.entryFlag !== 1 && (
+            <ElButton
+              round
+              type="primary"
+              size="large"
+              plain
+              class="!px-4 !bg-white hover:!bg-[#2DC7AA]"
+              onClick={() => {
+                this.onDetail('entry')
+              }}
+            >
+              达人认证
+            </ElButton>
+          )}
+
+          {!this.checkBadge('VIP') && (
+            <ElButton round type="primary" size="large" class="!px-4">
+              开通会员
+            </ElButton>
+          )}
         </div>
 
-        <div class="text-base text-[#999] mx-[25px] flex items-center justify-center mt-9 pt-10 border-t border-solid border-[#E7E6E6]">
+        <div class="text-base text-[#999] mx-[25px] flex items-center justify-center pt-10 border-t border-solid border-[#E7E6E6]">
           <span
             class="flex items-center justify-center flex-col leading-6 cursor-pointer flex-1 border-r border-solid border-[#E7E6E6]"
             onClick={() => {

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

@@ -1,7 +1,7 @@
 .liveClass {
   :global {
     .el-tabs__item {
-      font-size: 20px;
+      font-size: 18px;
       font-weight: 500;
       color: #999;
       height: 56px;
@@ -9,7 +9,7 @@
       padding-right: 40px;
       padding-left: 0;
       &.is-active {
-        font-size: 24px;
+        font-size: 20px;
         color: #000;
       }
     }

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

@@ -6,13 +6,13 @@
   }
 }
 .formSection {
-  --el-component-size-large: 38;
+  --el-component-size-large: 48px;
   :global {
     .el-input,
     .el-select--large,
     .el-form-item--large .el-form-item__label {
-      height: 38;
-      line-height: 38;
+      height: 48px;
+      line-height: 48px;
     }
     .el-form-item__label {
       font-size: 16px;

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

@@ -183,8 +183,8 @@ export default defineComponent({
         </div>
 
         <div class={[styles.timerContainer, 'mb12']}>
-          <ElRow gutter={5}>
-            <ElCol span={3} class={[styles.tag]}></ElCol>
+          <ElRow gutter={5} class="pr-2">
+            <ElCol span={3}></ElCol>
             {this.weekList.map((item: any) => (
               <ElCol span={3}>
                 <span class={styles.tag}>{item}</span>
@@ -192,8 +192,8 @@ export default defineComponent({
             ))}
           </ElRow>
 
-          <ElRow gutter={5} class="pt-1">
-            <ElCol span={3} class={[styles.tag]}></ElCol>
+          <ElRow gutter={5} class="pt-1 pr-2">
+            <ElCol span={3}></ElCol>
             {this.weekList.map((item: any, index: number) => (
               <ElCol span={3}>
                 <span

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

@@ -1,23 +1,25 @@
 .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: 18px;
+      font-weight: 500;
+      color: #999;
+      height: 56px;
+      line-height: 56px;
+      padding-right: 40px;
+      padding-left: 0;
+      &.is-active {
+        font-size: 20px;
+        color: #000;
+      }
     }
     .el-tabs__nav-wrap::after {
       height: 1px;
       background: #eeeeee;
     }
-  }
-
-  .musicListItem:hover {
-    box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.04);
+    .el-tabs__active-bar {
+      height: 4px;
+    }
   }
 
   .badge {
@@ -31,3 +33,120 @@
     }
   }
 }
+
+.itemWrap {
+  --music-list-item-background-color: #fff;
+  --music-list-item-title-color: #333;
+  --music-list-item-desc-color: #333;
+  --music-list-item-mate-color: #6a6a6a;
+  --music-list-item-border-color: #f1f1f1;
+  --music-list-item-vip-bg: #fff1cd;
+  --music-list-item-vip-color: #ff6c00;
+  --music-list-item-free-bg: #fff1e7;
+  --music-list-item-free-color: #ff4700;
+  --music-list-item-charge-bg: #e1f0ff;
+  --music-list-item-charge-color: #0086ff;
+
+  background: #ffffff;
+  border-radius: 12px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  width: 100%;
+  border-radius: 12px;
+  margin-bottom: 10px;
+  padding: 10px 12px;
+  cursor: pointer;
+  .left {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    .imgWrap {
+      width: 88px;
+      height: 88px;
+      margin-right: 20px;
+    }
+    .textWrap {
+      p {
+        font-weight: 600;
+        color: #000;
+        line-height: 22px;
+        font-size: 18px;
+        margin-bottom: 7px;
+        display: flex;
+      }
+      .authorInfo {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+
+        span {
+          font-weight: 400;
+          color: #999;
+          font-size: 16px;
+        }
+        .icon {
+          width: 18px;
+          height: 18px;
+          border-radius: 27px;
+          margin-right: 6px;
+        }
+        .authorName {
+          color: #333;
+          font-size: 12px;
+          margin-right: 8px;
+        }
+      }
+    }
+  }
+  .tagList {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin-top: 10px;
+    .tag {
+      background-color: #bcfdf1;
+      color: #00886d;
+      padding: 5px 16px;
+      font-size: 12px;
+      margin-right: 5px;
+      border-radius: 20px;
+    }
+  }
+  .right {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    cursor: pointer;
+
+    .arrow {
+      width: 20px;
+      height: 20px;
+      margin-left: 12px;
+    }
+  }
+
+  .touchButton {
+    width: 48px;
+    height: 22px;
+    background: #e1f0ff;
+    border-radius: 10px 0px 10px 0px;
+    line-height: 22px;
+    color: #fff;
+    text-align: center;
+    font-size: 14px;
+    margin-left: 6px;
+    &.vip {
+      background-color: #c8a430;
+      color: #fff;
+    }
+    &.free {
+      background-color: #4ca751;
+      color: #fff;
+    }
+    &.charge {
+      background-color: #3f90d6;
+      color: #fff;
+    }
+  }
+}

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

@@ -10,7 +10,7 @@ export default defineComponent({
     const musicActiveName = sessionStorage.getItem('musicActiveName')
     sessionStorage.removeItem('musicActiveName')
     return {
-      activeName: musicActiveName || 'PASS',
+      activeName: musicActiveName || 'DOING',
       num: {
         doing: 0,
         pass: 0,
@@ -21,7 +21,7 @@ export default defineComponent({
 
   render() {
     return (
-      <div class={[styles.liveClass, 'relative pb-5']}>
+      <div class={[styles.liveClass, 'relative px-[25px]']}>
         <ElButton
           round
           type="primary"

src/views/user-info/music-class/item.tsx

@@ -0,0 +1,104 @@
+import { defineComponent, reactive, watch } from 'vue'
+import icon from './images/icon.png'
+import classes from './index.module.less'
+import detaile from './images/detaile.png'
+import music from './images/music.png'
+import arrow from './images/arrow.png'
+import { goodsType } from '@/constant'
+import { useRouter } from 'vue-router'
+
+type Props = {
+  id?: number
+  addName: string
+  addUserAvatar: string
+  musicSheetName: string
+  subjectNames: string
+  composer: string
+  chargeType: string
+}
+const chargeTypes = {
+  CHARGE: '点播',
+  FREE: '免费',
+  VIP: 'VIP'
+}
+
+export default defineComponent({
+  name: 'music-item',
+  props: {
+    item: {
+      type: Object as () => Props,
+      default: () => ({})
+    },
+    onClick: {
+      type: Function,
+      default: (item: any) => {}
+    }
+  },
+
+  setup(props: any) {
+    const state = reactive({
+      item: props.item
+    })
+    const router = useRouter()
+    watch(
+      () => props.item,
+      item => {
+        state.item = item
+      }
+    )
+    const gotoMusicDetail = () => {
+      router.push({ path: '/muiscDetial', query: { id: state.item.id } })
+    }
+    return () => (
+      <div
+        onClick={() => {
+          props.onClick(state.item)
+        }}
+      >
+        <div class={classes.itemWrap} onClick={() => gotoMusicDetail()}>
+          <div class={classes.left}>
+            <div class={classes.imgWrap}>
+              <img src={music} alt="" />
+            </div>
+            <div class={classes.textWrap}>
+              <p>
+                {state.item.musicSheetName}
+                <div
+                  class={[
+                    classes.touchButton,
+                    classes[state.item.chargeType?.toLocaleLowerCase()]
+                  ]}
+                >
+                  {chargeTypes[state.item.chargeType]
+                    ? chargeTypes[state.item.chargeType]
+                    : '点播'}
+                </div>
+              </p>
+              <div class={classes.authorInfo}>
+                <span>作曲: {state.item.composer}</span>
+                {/* <img
+                  class={classes.icon}
+                  src={state.item.addUserAvatar || icon}
+                  alt=""
+                />
+                <span class={classes.authorName}>
+                  {state.item.addName ? state.item.addName : '小酷有谱'}
+                </span>
+                */}
+              </div>
+
+              <div class={classes.tagList}>
+                {state.item.subjectNames ? (
+                  <div class={classes.tag}>{state.item.subjectNames}</div>
+                ) : null}
+              </div>
+            </div>
+          </div>
+          <div class={classes.right}>
+            <img class={classes.arrow} src={arrow} alt="" />
+          </div>
+        </div>
+      </div>
+    )
+  }
+})

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

@@ -1,11 +1,11 @@
 import ColEmpty from '@/components/col-empty'
-import MusicLIstItem from '@/components/musicLIstItem'
 import Pagination from '@/components/pagination'
 import request from '@/helpers/request'
 import styles from './index.module.less'
 import { ElSkeleton, ElSkeletonItem } from 'element-plus'
 import { defineComponent } from 'vue'
 import { state } from '@/state'
+import MusicItem from './item'
 
 export default defineComponent({
   name: 'list',
@@ -78,7 +78,7 @@ export default defineComponent({
       <>
         {state.user.data?.musicianFlag ? (
           <>
-            <div class="px-[38px]">
+            <div>
               <ElSkeleton
                 loading={this.loading}
                 animated
@@ -90,7 +90,7 @@ export default defineComponent({
                       <div class="w-2/3 flex items-center">
                         <ElSkeletonItem
                           variant="circle"
-                          style={{ width: '66px', height: '66px' }}
+                          style={{ width: '88px', height: '88px' }}
                         ></ElSkeletonItem>
                         <div class="w-1/2 pl-2">
                           <ElSkeletonItem variant="h3"></ElSkeletonItem>
@@ -109,7 +109,7 @@ export default defineComponent({
                 }}
               >
                 {this.list.map((item: any) => (
-                  <MusicLIstItem
+                  <MusicItem
                     onClick={(item: any) => {
                       if (this.auditStatus === 'UNPASS') {
                         console.log(item)
@@ -135,7 +135,7 @@ export default defineComponent({
                     }}
                     class={[
                       styles.musicListItem,
-                      'mb-2 rounded-xl cursor-pointer'
+                      'mb-2 cursor-pointer border-b border-solid border-[#E7E6E6]'
                     ]}
                   />
                 ))}

src/views/user-info/music-operation/index.module.less

@@ -1,6 +1,18 @@
 .form,
 .tags {
+  --el-border-radius-small: 10px !important;
+  --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-radio-button__inner {
       border: var(--el-border);
       border-radius: var(--el-border-radius-base) !important;
@@ -19,6 +31,22 @@
   }
 }
 
+// .from {
+//   --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);
+//     }
+//   }
+// }
+
 .rule {
   font-size: 14px;
   line-height: 27px;

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

@@ -208,20 +208,20 @@ export default defineComponent({
   render() {
     return (
       <div class={styles.form}>
-        <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>
 
         <ElForm
           size="large"
           labelPosition="left"
-          labelWidth={'130px'}
+          labelWidth={'150px'}
           model={this.form}
           ref="form"
-          class="px-52 py-5"
+          class="px-7 py-5"
         >
           <ElFormItem
-            label="MusicXML文件"
+            label="上传XML"
             prop="xmlFileUrl"
             rules={[{ required: true, message: '请选择MusicXML文件' }]}
           >
@@ -440,9 +440,10 @@ export default defineComponent({
             </>
           )}
         </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]"
+            round
             onClick={() => {
               this.$router.back()
             }}
@@ -451,7 +452,8 @@ export default defineComponent({
           </ElButton>
           <ElButton
             type="primary"
-            class="!w-40 !h-[38px]"
+            class="!w-44 !h-[48px]"
+            round
             onClick={this.onSubmit}
             loading={this.submitLoading}
           >
@@ -479,7 +481,8 @@ export default defineComponent({
           ))}
           <div class="text-center pt-2">
             <ElButton
-              class="!w-36"
+              class="!w-36 !h-[48px]"
+              round
               size="large"
               onClick={() => {
                 this.radioList = []
@@ -488,7 +491,8 @@ export default defineComponent({
               重置
             </ElButton>
             <ElButton
-              class="!w-36"
+              class="!w-36 !h-[48px]"
+              round
               size="large"
               type="primary"
               onClick={() => {

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

@@ -4,7 +4,7 @@
     //   @apply px-11;
     // }
     .el-tabs__item {
-      font-size: 20px;
+      font-size: 18px;
       font-weight: 500;
       color: #999;
       height: 56px;
@@ -12,7 +12,7 @@
       padding-right: 40px;
       padding-left: 0;
       &.is-active {
-        font-size: 24px;
+        font-size: 20px;
         color: #000;
       }
     }

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

@@ -147,24 +147,6 @@ export default defineComponent({
                     />
                   </div>
                 ))}
-                {this.list.map((item: any) => (
-                  <div
-                    class={['w-1/3 pt-6', 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>
-                ))}
               </ElSkeleton>
             </div>