更新样式

src/components/videoDetailItem/index.tsx

@@ -56,7 +56,7 @@ export default defineComponent({
           onClick={gotoVideoDetail}
         >
           <div class={classes.detaileWrap}>
-          <div class={classes.masker}>
+            <div class={classes.masker}>
               <img src={player} alt="" />
             </div>
             <p class={classes.detaileStudy}>
@@ -64,6 +64,7 @@ export default defineComponent({
               {state.detail.countStudent}人在学
             </p>
             <img
+              style={{ objectFit: 'cover' }}
               src={
                 state.detail.lessonCoverUrl
                   ? state.detail.lessonCoverUrl
@@ -82,12 +83,12 @@ export default defineComponent({
           </div>
           <div class={classes.itemBottom}>
             <div class={classes.itemBottomL}>
-              <span class={classes.itemTitle}>{state.detail.lessonSubjectName}</span>
+              <span class={classes.itemTitle}>
+                {state.detail.lessonSubjectName}
+              </span>
               {/* <div class={classes.line}></div> */}
             </div>
-            <div class={classes.itemBottomR}>
-              了解更多
-            </div>
+            <div class={classes.itemBottomR}>了解更多</div>
           </div>
         </div>
       </>

src/views/App.module.less

@@ -1,17 +1,18 @@
 .loginContainer {
   :global {
     .el-dialog {
-      --el-dialog-width: 440px !important;
+      overflow: hidden;
+      --el-dialog-width: 488px !important;
+      --el-dialog-border-radius: 10px !important;
       --el-dialog-bg-color: transparent !important;
     }
     .el-dialog__header,
     .el-dialog__body {
       padding: 0;
     }
-
   }
 }
 
 :root {
---theme-color:#1FF0C9;
+  --theme-color: #1ff0c9;
 }

src/views/login/components/form/index.module.less

@@ -1,5 +1,15 @@
 .formLogin {
   :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-input {
       --el-component-size: 40px !important;
     }

src/views/login/components/form/index.tsx

@@ -13,7 +13,7 @@ import ImgCode from '../img-code'
 import styles from './index.module.less'
 import { setAuth } from '@/helpers/utils'
 import { checkPhone } from '@/helpers/validate'
-import mitt from '@/helpers/mitt'
+import iconSuccess from '@/common/images/icon_success.png'
 
 // const validatePassword = (
 //   rule: any,
@@ -33,11 +33,11 @@ export default defineComponent({
   props: {
     type: {
       type: String,
-      default: 'teacher-login' as
-        | 'teacher-login'
-        | 'student-login'
-        | 'teacher-register'
-        | 'student-register'
+      default: 'login' as 'login' | 'register'
+    },
+    loginType: {
+      type: String,
+      default: 'TEACHER' as 'TEACHER' | 'STUDENT'
     },
     onClose: {
       type: Function,
@@ -46,6 +46,10 @@ export default defineComponent({
     onChange: {
       type: Function,
       default: (type: string) => {}
+    },
+    onLoginTypeChange: {
+      type: Function,
+      default: (type: string) => {}
     }
   },
   data() {
@@ -84,28 +88,16 @@ export default defineComponent({
     onSubmit() {
       ;(this as any).$refs.loginForm.validate(async (valid: boolean) => {
         if (valid) {
-          if (this.type === 'teacher-login') {
-            const params = {
-              isSurportRegister: false,
-              loginUserType: 'TEACHER'
-            }
-            await this.onLogin(params)
-          } else if (this.type === 'student-login') {
+          if (this.type === 'login') {
             const params = {
               isSurportRegister: false,
-              loginUserType: 'STUDENT'
-            }
-            await this.onLogin(params)
-          } else if (this.type === 'teacher-register') {
-            const params = {
-              isSurportRegister: true,
-              loginUserType: 'TEACHER'
+              loginUserType: this.loginType
             }
             await this.onLogin(params)
-          } else if (this.type === 'student-register') {
+          } else if (this.type === 'register') {
             const params = {
               isSurportRegister: true,
-              loginUserType: 'STUDENT'
+              loginUserType: this.loginType
             }
             await this.onLogin(params)
           }
@@ -135,15 +127,11 @@ export default defineComponent({
             loginUserType: params.loginUserType
           })
         )
-
-        if (this.type === 'teacher-login' || this.type === 'student-login') {
-          // postMessage()
+        // console.log(res, 'res')
+        if (this.type === 'login') {
           window.location.reload()
           this.onClose()
-        } else if (
-          this.type === 'teacher-register' ||
-          this.type === 'student-register'
-        ) {
+        } else if (this.type === 'register') {
           this.onChange('register-success')
         }
       } catch (e: any) {
@@ -216,6 +204,39 @@ export default defineComponent({
             ></ElInput>
           </ElFormItem>
         )} */}
+
+        {this.type === 'login' ? (
+          <div class="w-full flex justify-center mb-9 pt-6">
+            <div
+              class="flex items-center pr-6 cursor-pointer"
+              onClick={() => {
+                this.onLoginTypeChange('TEACHER')
+              }}
+            >
+              {this.loginType === 'TEACHER' ? (
+                <img src={iconSuccess} class="w-5 h-5 mr-2.5" />
+              ) : (
+                <div class="w-5 h-5 rounded-full box-border border border-[#CCCCCC] mr-2.5"></div>
+              )}
+              老师登录
+            </div>
+            <div
+              class="flex items-center cursor-pointer"
+              onClick={() => {
+                this.onLoginTypeChange('STUDENT')
+              }}
+            >
+              {this.loginType === 'STUDENT' ? (
+                <img src={iconSuccess} class="w-5 h-5 mr-2.5" />
+              ) : (
+                <div class="w-5 h-5 rounded-full box-border border border-[#CCCCCC] mr-2.5"></div>
+              )}
+              学生登录
+            </div>
+          </div>
+        ) : (
+          <div class="h-12"></div>
+        )}
         <ElFormItem>
           <ElButton
             type="primary"
@@ -223,6 +244,8 @@ export default defineComponent({
             onClick={this.onSubmit}
             disabled={this.loading}
             loading={this.loading}
+            style={{ height: '48px', fontSize: '16px' }}
+            round
           >
             {this.type === 'teacher-login' || this.type === 'student-login'
               ? '登 录'

src/views/login/components/login/index.module.less

@@ -0,0 +1,54 @@
+.loginTabs {
+  // @apply px-9 bg-white;
+  :global {
+    --el-border-color-light: transparent !important;
+    .el-tabs {
+      --el-tabs-header-height: 35px !important;
+    }
+
+    .el-tabs__content {
+      overflow: inherit;
+    }
+
+    .el-tabs__item {
+      @apply text-2xl !important;
+      --el-text-color-primary: #999 !important;
+      height: 38px;
+      padding: 0 20px !important;
+
+      &.is-active {
+        color: #333;
+      }
+    }
+
+    .el-tabs__nav-scroll {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .el-tabs__active-bar {
+      height: 4px;
+      border-radius: 2px;
+      width: 48px !important;
+      margin-left: 24px;
+    }
+
+    .el-tabs__header {
+      margin-bottom: 32px;
+    }
+  }
+
+  .scanTxt {
+    span {
+      color: var(--el-color-primary);
+    }
+  }
+}
+.qrCodeStyle {
+  :global {
+    .el-tabs__active-bar {
+      margin-left: 36px !important;
+    }
+  }
+}

src/views/login/components/login/index.tsx

@@ -0,0 +1,94 @@
+import { state } from '@/state'
+import { ElTabPane, ElTabs } from 'element-plus'
+import { defineComponent } from 'vue'
+import Form from '../form'
+import QrLogin from '../qr-login'
+import styles from './index.module.less'
+export const getAssetsHomeFile = (fileName: string) => {
+  const path = `../../images/${fileName}`
+  const modules = import.meta.globEager('../../images/*')
+  return modules[path].default
+}
+
+export default defineComponent({
+  name: 'Login',
+  props: {
+    onClose: {
+      type: Function,
+      default: () => {}
+    },
+    onTypeChange: {
+      type: Function,
+      default: (type: any) => {}
+    },
+    type: {
+      type: String
+    }
+  },
+  watch: {
+    tabType(val: string) {
+      // 切换登录类型时需要清除定时器
+      if (val != 'qrLogin') {
+        clearInterval(state.loginPopupTimer)
+      }
+    }
+  },
+  data() {
+    return {
+      loginType: 'TEACHER',
+      tabType: 'login' as 'login' | 'qrLogin'
+    }
+  },
+  render() {
+    return (
+      <div class={styles.loginTabs}>
+        <ElTabs
+          class={this.tabType === 'qrLogin' && styles.qrCodeStyle}
+          v-model={this.tabType}
+        >
+          <ElTabPane label="手机登录" name="login">
+            <Form
+              type="login"
+              loginType={this.loginType}
+              onLoginTypeChange={(type: string) => {
+                this.loginType = type
+              }}
+              onChange={(type: string) => {
+                this.onTypeChange(type)
+              }}
+              onClose={() => {
+                this.onClose()
+              }}
+            />
+          </ElTabPane>
+          <ElTabPane label="二维码登录" name="qrLogin">
+            {this.tabType === 'qrLogin' && (
+              <QrLogin
+                loginType={this.loginType}
+                onChange={(type: any) => {
+                  // this.type = type
+                }}
+                onClose={() => {
+                  this.onClose()
+                }}
+              />
+            )}
+          </ElTabPane>
+        </ElTabs>
+        {this.tabType === 'login' && (
+          <div class={[styles.scanTxt, 'text-center']}>
+            没有账号，
+            <span
+              class="cursor-pointer"
+              onClick={() => {
+                this.onTypeChange('register')
+              }}
+            >
+              马上注册
+            </span>
+          </div>
+        )}
+      </div>
+    )
+  }
+})

src/views/login/components/qr-login/index.tsx

@@ -125,7 +125,7 @@ export default defineComponent({
   render() {
     return (
       <div class={'text-center pt-4'}>
-        <div
+        {/* <div
           class={'absolute top-2 right-2 z-10'}
           onClick={() => {
             this.removeTimer()
@@ -136,7 +136,7 @@ export default defineComponent({
             src={getAssetsHomeFile('icon_pc_login.png')}
             class="w-14 h-14 cursor-pointer"
           />
-        </div>
+        </div> */}
         {this.isScan ? (
           <>
             <ElIcon
@@ -165,15 +165,14 @@ export default defineComponent({
           </>
         ) : (
           <>
-            <div
-              class="mx-auto w-[178px] h-[178px] align-middle flex items-center justify-center relative overflow-hidden rounded"
-              style={{
-                boxShadow: '0px 0px 8px 0px rgba(0, 0, 0, 0.18)'
-              }}
-            >
-              <QrcodeVue value={this.qrCode} size={168} />
+            <div class="mx-auto w-[192px] h-[192px] relative overflow-hidden rounded-[10px]">
+              <QrcodeVue
+                value={this.qrCode}
+                size={192}
+                class="p-2.5 border-4 border-[#2DC7AA] box-border rounded-[10px]"
+              />
               {/* 手动在中间添加图标 */}
-              <div class="absolute w-[178px] h-[178px] top-0 left-0 flex items-center justify-center">
+              <div class="absolute w-[192px] h-[192px] top-0 left-0 flex items-center justify-center">
                 <img src={logoIco} class="w-9 h-9" />
               </div>
               {/* 登录是否过期 */}
@@ -197,7 +196,7 @@ export default defineComponent({
               )}
             </div>
             <div class="flex items-center justify-center pt-8 font-normal">
-              <img
+              {/* <img
                 class="w-9 h-9 align-middle mr-4"
                 src={getAssetsHomeFile('icon_scan.png')}
               />
@@ -207,6 +206,11 @@ export default defineComponent({
                   打开<span class={styles.txt}>酷乐秀学生端APP</span>
                 </p>
                 <p>扫一扫登录</p>
+              </div> */}
+              <div class="text-lg text-[#333] text-center">
+                打开
+                {this.loginType === 'TEACHER' ? '酷乐秀学院' : '酷乐秀'}
+                App扫一扫登录
               </div>
             </div>
           </>

src/views/login/components/register-success/index.tsx

@@ -0,0 +1,88 @@
+import { defineComponent } from 'vue'
+import sutdentDownLoad from '@/common/images/student_download.png'
+import teacherDownLoad from '@/common/images/teacher_download.png'
+import styles from '../../index.module.less'
+import { ElButton } from 'element-plus'
+import { getUserType } from '@/helpers/utils'
+export const getAssetsHomeFile = (fileName: string) => {
+  const path = `../../images/${fileName}`
+  const modules = import.meta.globEager('../../images/*')
+  return modules[path].default
+}
+export default defineComponent({
+  name: 'register-success',
+  props: {
+    onClose: {
+      type: Function,
+      default: () => {}
+    },
+    onTypeChange: {
+      type: Function,
+      default: (type: any) => {}
+    }
+  },
+  data() {
+    return {
+      registerType: 'student' as 'teacher' | 'student'
+    }
+  },
+  mounted() {
+    this.registerType = getUserType() === 'STUDENT' ? 'student' : 'teacher'
+  },
+  render() {
+    return (
+      <div class={['text-center']}>
+        <h2 class="text-2xl font-medium text-[#333] mb-6 flex flex-col items-center">
+          注册成功
+          <i class="w-12 h-1 bg-[#2DC7AA] inline-block leading-none rounded-sm mt-1"></i>
+        </h2>
+
+        {this.registerType === 'teacher' ? (
+          <img
+            src={teacherDownLoad}
+            class="mx-auto w-[192px] h-[192px] align-middle border-4 border-solid border-[#2DC7AA] rounded-[10px]"
+          />
+        ) : (
+          <img
+            src={sutdentDownLoad}
+            class="mx-auto w-[192px] h-[192px] align-middle border-4 border-solid border-[#2DC7AA] rounded-[10px]"
+          />
+        )}
+
+        {/* <h3 class="text-lg text=[#333] pt-4 pb-2">注册成功</h3> */}
+        <div
+          class={[styles.scanTxt, 'leading-6 text-lg text-[#333] pt-4 pb-2']}
+        >
+          <p>
+            恭喜您已成功注册酷乐秀
+            {this.registerType === 'teacher' ? '老师' : '学生'}账号！
+          </p>
+          <p>
+            {/* <span> */}
+            下载酷乐秀
+            {this.registerType === 'teacher' ? '老师' : '学生'}端APP
+            {/* </span> */}
+            发现更大的世界
+          </p>
+        </div>
+
+        <ElButton
+          type="primary"
+          class="w-full mt-4"
+          round
+          style={{ height: '48px' }}
+          onClick={() => {
+            if (this.registerType == 'teacher') {
+              // this.type = 'teacher-auth'
+              this.onTypeChange('teacher-auth')
+            } else {
+              this.onClose()
+            }
+          }}
+        >
+          知道了
+        </ElButton>
+      </div>
+    )
+  }
+})

src/views/login/components/register/index.module.less

@@ -0,0 +1,97 @@
+.loginTabs {
+  // @apply px-9 bg-white;
+  :global {
+    --el-border-color-light: transparent !important;
+    .el-tabs {
+      --el-tabs-header-height: 35px !important;
+    }
+
+    .el-tabs__content {
+      overflow: inherit;
+    }
+
+    .el-tabs__item {
+      @apply text-2xl !important;
+      --el-text-color-primary: #999 !important;
+      height: 38px;
+      padding: 0 20px !important;
+
+      &.is-active {
+        color: #333;
+      }
+    }
+
+    .el-tabs__nav-scroll {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .el-tabs__active-bar {
+      height: 4px;
+      border-radius: 2px;
+      width: 48px !important;
+      margin-left: 24px;
+    }
+
+    .el-tabs__header {
+      margin-bottom: 32px;
+    }
+  }
+
+  .scanTxt {
+    span {
+      color: var(--el-color-primary);
+    }
+  }
+}
+.qrCodeStyle {
+  :global {
+    .el-tabs__active-bar {
+      margin-left: 36px !important;
+    }
+  }
+}
+
+.toolTips {
+  position: absolute;
+  left: -118px;
+  top: 6px;
+  border-radius: 2px;
+  padding: 3px 10px;
+  z-index: 2000;
+  font-size: 12px;
+  line-height: 20px;
+  width: 110px;
+  word-wrap: break-word;
+  visibility: visible;
+  background: #ffff;
+  border: 1px solid var(--el-color-primary);
+  color: var(--el-color-primary);
+
+  .toolTips_arrow {
+    position: absolute;
+    top: -5px;
+    transform: translate3d(0px, 15px, 0px);
+    right: -5px;
+    width: 10px;
+    height: 10px;
+    z-index: -1;
+    &::before {
+      position: absolute;
+      width: 10px;
+      height: 10px;
+      z-index: -1;
+      content: ' ';
+      transform: rotate(45deg);
+      background: var(--el-text-color-primary);
+      box-sizing: border-box;
+      border-top-right-radius: 2px;
+      border: 1px solid var(--el-color-primary);
+      background: #fff;
+      right: 0;
+      border-left-color: transparent !important;
+      border-bottom-color: transparent !important;
+    }
+  }
+}

src/views/login/components/register/index.tsx

@@ -0,0 +1,75 @@
+import { ElTabPane, ElTabs } from 'element-plus'
+import { defineComponent } from 'vue'
+import Form from '../form'
+import styles from './index.module.less'
+
+export default defineComponent({
+  name: 'register',
+  props: {
+    onClose: {
+      type: Function,
+      default: () => {}
+    },
+    onTypeChange: {
+      type: Function,
+      default: (type: any) => {}
+    }
+  },
+  data() {
+    return {
+      loginType: 'TEACHER',
+      tabType: 'login' as 'login' | 'qrLogin'
+    }
+  },
+  render() {
+    return (
+      <>
+        <ElTabs v-model={this.loginType}>
+          <ElTabPane label="老师注册" name="TEACHER">
+            {this.loginType === 'TEACHER' && (
+              <Form
+                type="register"
+                loginType={this.loginType}
+                key="teacher-register"
+                ref="teacherRegister"
+                onChange={(type: string) => {
+                  this.onTypeChange(type)
+                }}
+                onClose={() => {
+                  this.onClose()
+                }}
+              />
+            )}
+          </ElTabPane>
+          <ElTabPane label="学员注册" name="STUDENT">
+            {this.loginType === 'STUDENT' && (
+              <Form
+                type="register"
+                loginType={this.loginType}
+                key="student-register"
+                ref="studentRegister"
+                onChange={(type: string) => {
+                  this.onTypeChange(type)
+                }}
+                onClose={() => {
+                  this.onClose()
+                }}
+              />
+            )}
+          </ElTabPane>
+        </ElTabs>
+        <div class={[styles.scanTxt, 'text-center']}>
+          已有账号，
+          <span
+            class="cursor-pointer"
+            onClick={() => {
+              this.onTypeChange('login')
+            }}
+          >
+            马上登录
+          </span>
+        </div>
+      </>
+    )
+  }
+})

src/views/login/components/teacher-auth/index.tsx

@@ -2,6 +2,7 @@ import { defineComponent } from 'vue'
 import styles from './index.module.less'
 import teacher1 from '../../images/teacher_1.png'
 import teacher2 from '../../images/teacher_2.png'
+import musicCenter from '../../images/music_center.png'
 import { ElButton, ElCol, ElRow } from 'element-plus'
 
 export default defineComponent({
@@ -25,15 +26,17 @@ export default defineComponent({
   render() {
     return (
       <>
-        <div class="text-[#1a1a1a] font-medium text-xl text-center after:w-4 after:h-[3px] after:rounded-sm after:bg-[#2DC7AA] after:block after:m-auto after:mt-2">
-          酷乐秀认证
-        </div>
+        <h2 class="text-2xl font-medium text-[#333] mb-6 flex flex-col items-center">
+          酷乐秀达人认证
+          <i class="w-12 h-1 bg-[#2DC7AA] inline-block leading-none rounded-sm mt-1"></i>
+        </h2>
+
+        <img src={musicCenter} class="w-[305px] m-auto" />
 
-        <div class="text-center text-gray-500 pt-4 pb-5">
+        <div class="text-center text-xl font-medium text-[#333] py-8">
           完成酷乐秀认证能开启更多功能！
         </div>
-
-        <ElRow gutter={10}>
+        {/* <ElRow gutter={10}>
           <ElCol span={12} class="cursor-pointer">
             <div
               class="border-neutral-200 border-solid border rounded flex items-center p-4"
@@ -70,18 +73,37 @@ export default defineComponent({
               </div>
             </div>
           </ElCol>
-        </ElRow>
+        </ElRow> */}
 
-        <ElButton
-          type="primary"
-          class="w-full mt-4"
-          style={{ height: '40px' }}
-          onClick={() => {
-            this.onClose()
-          }}
-        >
-          下次再说
-        </ElButton>
+        <div class="text-center">
+          <ElButton
+            type="primary"
+            class="mt-4 w-40"
+            round
+            style={{ height: '48px' }}
+            onClick={() => {
+              this.onDetail('teacher')
+            }}
+          >
+            立即认证
+          </ElButton>
+          <ElButton
+            type="primary"
+            class="mt-4 w-40"
+            plain
+            round
+            style={{
+              height: '48px',
+              backgroundColor: '#fff',
+              color: '#2DC7AA !important'
+            }}
+            onClick={() => {
+              this.onClose()
+            }}
+          >
+            下次再说
+          </ElButton>
+        </div>
       </>
     )
   }

src/views/login/index.module.less

@@ -1,10 +1,3 @@
-.loginSection {
-  .iconClose {
-    background: url('./images/icon_close.png') no-repeat center;
-    background-size: 100%;
-  }
-}
-
 .loginTabs {
   // @apply px-9 bg-white;
   :global {
@@ -18,8 +11,31 @@
     }
 
     .el-tabs__item {
-      @apply text-lg !important;
-      --el-text-color-primary: #666 !important;
+      @apply text-2xl !important;
+      --el-text-color-primary: #999 !important;
+      height: 38px;
+      padding: 0 20px !important;
+
+      &.is-active {
+        color: #333;
+      }
+    }
+
+    .el-tabs__nav-scroll {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .el-tabs__active-bar {
+      height: 4px;
+      border-radius: 2px;
+      width: 48px !important;
+      margin-left: 24px;
+    }
+
+    .el-tabs__header {
+      margin-bottom: 32px;
     }
   }
 
@@ -29,6 +45,13 @@
     }
   }
 }
+.qrCodeStyle {
+  :global {
+    .el-tabs__active-bar {
+      margin-left: 36px !important;
+    }
+  }
+}
 
 .toolTips {
   position: absolute;
@@ -72,3 +95,13 @@
     }
   }
 }
+
+.registerSuccessBg {
+  background: url('./images/register_popup_bg.png') no-repeat left top;
+  background-size: 128px;
+}
+
+.teacherAuthBg {
+  background: url('./images/music_auth_bg.png') no-repeat left top;
+  background-size: 132px;
+}

src/views/login/index.tsx

@@ -6,8 +6,10 @@ import QrcodeVue from 'qrcode.vue'
 import QrLogin from './components/qr-login'
 import TeacherAuth from './components/teacher-auth'
 import { state } from '@/state'
-import sutdentDownLoad from '@/common/images/student_download.png'
-import teacherDownLoad from '@/common/images/teacher_download.png'
+import Login from './components/login'
+import Register from './components/register'
+import { CloseBold } from '@element-plus/icons-vue'
+import RegisterSuccess from './components/register-success'
 
 export const getAssetsHomeFile = (fileName: string) => {
   const path = `./images/${fileName}`
@@ -37,19 +39,19 @@ export default defineComponent({
     }
   },
   methods: {
-    onReset(type: 'login' | 'register') {
-      if (type === 'login') {
-        ;(this as any).$refs.teacherLogin &&
-          (this as any).$refs.teacherLogin.onResetFields()
-        ;(this as any).$refs.studentLogin &&
-          (this as any).$refs.studentLogin.onResetFields()
-      } else if (type === 'register') {
-        ;(this as any).$refs.teacherRegister &&
-          (this as any).$refs.teacherRegister.onResetFields()
-        ;(this as any).$refs.studentRegister &&
-          (this as any).$refs.studentRegister.onResetFields()
-      }
-    }
+    // onReset(type: 'login' | 'register') {
+    //   if (type === 'login') {
+    //     ;(this as any).$refs.teacherLogin &&
+    //       (this as any).$refs.teacherLogin.onResetFields()
+    //     ;(this as any).$refs.studentLogin &&
+    //       (this as any).$refs.studentLogin.onResetFields()
+    //   } else if (type === 'register') {
+    //     ;(this as any).$refs.teacherRegister &&
+    //       (this as any).$refs.teacherRegister.onResetFields()
+    //     ;(this as any).$refs.studentRegister &&
+    //       (this as any).$refs.studentRegister.onResetFields()
+    //   }
+    // }
   },
   watch: {
     type(val: string) {
@@ -62,213 +64,51 @@ export default defineComponent({
   render() {
     return (
       <div class={[styles.loginSection, 'relative']}>
-        <i
-          class={[
-            styles.iconClose,
-            'w-9 h-9 rounded-full flex absolute -top-1 -right-[18px]'
-          ]}
+        <div
+          class={['rounded-full flex absolute top-[22px] right-[22px] z-10']}
           onClick={() => {
             this.onClose()
           }}
-        ></i>
-        {this.type == 'teacher-auth' ? (
-          <img
-            src={getAssetsHomeFile('cert_bg.png')}
-            class={[styles.loginBg, '-mt-[10px]']}
-          />
-        ) : (
-          <img
-            src={getAssetsHomeFile('register_bg.png')}
-            class={[styles.loginBg, '-mt-[10px]']}
-          />
-        )}
+        >
+          <ElIcon size={16} color="#999999">
+            <CloseBold />
+          </ElIcon>
+        </div>
         <div
           class={[
             styles.loginTabs,
-            'px-9 pt-5 pb-12 bg-white relative',
+            'px-14 pt-9 pb-12 bg-white relative',
+            this.type === 'register-success' && styles.registerSuccessBg,
+            this.type === 'teacher-auth' && styles.teacherAuthBg,
             this.type === 'qr-login' ? 'pb-4' : '',
             this.type === 'teacher-auth' ? 'px-6 pb-8' : ''
           ]}
         >
           {this.type === 'login' && (
-            <>
-              <div class={'absolute top-2 right-2 z-10'}>
-                <div class={styles.toolTips}>
-                  <span>扫码登录更方便</span>
-                  <span class={styles.toolTips_arrow}></span>
-                </div>
-                <img
-                  src={getAssetsHomeFile('icon_qrcode_login.png')}
-                  class="w-14 h-14 cursor-pointer"
-                  onClick={() => {
-                    this.type = 'qr-login'
-                  }}
-                />
-              </div>
-              <ElTabs v-model={this.loginType}>
-                <ElTabPane label="老师登录" name="teacher">
-                  {this.loginType === 'teacher' && (
-                    <Form
-                      type="teacher-login"
-                      key="teacherLogin"
-                      ref="teacherLogin"
-                      onClose={() => {
-                        this.onClose()
-                      }}
-                    />
-                  )}
-                </ElTabPane>
-                <ElTabPane label="学员登录" name="student">
-                  {this.loginType === 'student' && (
-                    <Form
-                      type="student-login"
-                      key="studentLogin"
-                      ref="studentLogin"
-                      onClose={() => {
-                        this.onClose()
-                      }}
-                    />
-                  )}
-                </ElTabPane>
-              </ElTabs>
-              <div class={[styles.scanTxt]}>
-                没有账号，
-                <span
-                  class="cursor-pointer"
-                  onClick={() => {
-                    this.onReset('login')
-                    this.type = 'register'
-                  }}
-                >
-                  马上注册
-                </span>
-              </div>
-            </>
-          )}
-
-          {this.type === 'qr-login' && (
-            <>
-              <QrLogin
-                loginType={this.loginType}
-                onChange={(type: any) => {
-                  this.type = type
-                }}
-                onClose={() => {
-                  this.onClose()
-                }}
-              />
-              <div class={[styles.scanTxt, 'pt-14 text-center']}>
-                没有账号，
-                <span
-                  class="cursor-pointer"
-                  onClick={() => {
-                    this.type = 'register'
-                  }}
-                >
-                  马上注册
-                </span>
-              </div>
-            </>
+            <Login
+              onClose={this.onClose}
+              onTypeChange={(type: any) => {
+                this.type = type
+              }}
+            />
           )}
 
           {this.type === 'register' && (
-            <>
-              <ElTabs v-model={this.registerType}>
-                <ElTabPane label="老师注册" name="teacher">
-                  {this.registerType === 'teacher' && (
-                    <Form
-                      type="teacher-register"
-                      key="teacher-register"
-                      ref="teacherRegister"
-                      onClose={() => {
-                        this.onClose()
-                      }}
-                      onChange={(type: any) => {
-                        this.type = type
-                      }}
-                    />
-                  )}
-                </ElTabPane>
-                <ElTabPane label="学员注册" name="student">
-                  {this.registerType === 'student' && (
-                    <Form
-                      type="student-register"
-                      key="student-register"
-                      ref="studentRegister"
-                      onClose={() => {
-                        this.onClose()
-                      }}
-                      onChange={(type: any) => {
-                        this.type = type
-                      }}
-                    />
-                  )}
-                </ElTabPane>
-              </ElTabs>
-              <div class={[styles.scanTxt]}>
-                已有账号，
-                <span
-                  class="cursor-pointer"
-                  onClick={() => {
-                    this.onReset('register')
-                    this.type = 'login'
-                  }}
-                >
-                  马上登录
-                </span>
-              </div>
-            </>
+            <Register
+              onClose={this.onClose}
+              onTypeChange={(type: any) => {
+                this.type = type
+              }}
+            />
           )}
 
           {this.type === 'register-success' && (
-            <div class={'text-center pt-4'}>
-              {/* <QrcodeVue
-                value={this.qrCodeDownLoad}
-                size={178}
-                class="mx-auto shadow-lg w-[178px] h-[178px] align-middle"
-              /> */}
-              {this.registerType === 'teacher' ? (
-                <img
-                  src={teacherDownLoad}
-                  class="mx-auto shadow-lg w-[178px] h-[178px] align-middle"
-                />
-              ) : (
-                <img
-                  src={sutdentDownLoad}
-                  class="mx-auto shadow-lg w-[178px] h-[178px] align-middle"
-                />
-              )}
-
-              <h3 class="text-lg text=[#1a1a1a] pt-4 pb-2">注册成功</h3>
-              <div class={[styles.scanTxt, 'leading-6']}>
-                <p>
-                  恭喜您已成功注册酷乐秀
-                  {this.registerType === 'teacher' ? '老师' : '学生'}账号！
-                </p>
-                <p>
-                  <span>
-                    下载酷乐秀
-                    {this.registerType === 'teacher' ? '老师' : '学生'}端APP
-                  </span>
-                  发现更大的世界
-                </p>
-              </div>
-
-              <ElButton
-                type="primary"
-                class="w-full mt-4"
-                style={{ height: '40px' }}
-                onClick={() => {
-                  if (this.registerType == 'teacher') {
-                    this.type = 'teacher-auth'
-                  } else {
-                    this.onClose()
-                  }
-                }}
-              >
-                知道了
-              </ElButton>
-            </div>
+            <RegisterSuccess
+              onClose={this.onClose}
+              onTypeChange={(type: any) => {
+                this.type = type
+              }}
+            />
           )}
 
           {this.type === 'teacher-auth' && (

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

@@ -3,6 +3,7 @@ import { defineComponent } from 'vue'
 import pan from '../../images/pan.png'
 import start from '../../images/start.png'
 import hold from '../../images/hold.png'
+import iconStart from '../../images/icon_start.png'
 
 export default defineComponent({
   name: 'item',
@@ -15,7 +16,9 @@ export default defineComponent({
   render() {
     const item = this.item
     return (
-      <div class="rounded-sm w-[156px] cursor-pointer overflow-hidden relative transition-all">
+      <div class="rounded-[10px] w-[156px] cursor-pointer overflow-hidden relative transition-all">
+        <ElImage src={iconStart} class="w-6 h-6 !absolute top-2 right-4 z-10" />
+
         <ElImage
           class="w-full h-[156px] align-middle rounded-[10px]"
           fit="cover"

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

@@ -42,7 +42,7 @@ export default defineComponent({
           />
         </p>
 
-        <div class={this.userInfo.isVip !== 1 ? 'mb-9 mt-5' : ''}>
+        <div class={this.userInfo.isVip !== 1 ? 'mt-5' : ''}>
           {this.userInfo.isVip !== 1 && (
             <ElButton round type="primary" size="large" class="!px-4">
               开通会员
@@ -50,7 +50,7 @@ export default defineComponent({
           )}
         </div>
 
-        <div class="text-base text-[#999] mx-[25px] flex items-center justify-center pt-10 border-t border-solid border-[#E7E6E6]">
+        <div class="text-base text-[#999] mx-[25px] mt-9 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"
             onClick={() => {

src/views/student-info/my-follow/index.tsx

@@ -12,8 +12,8 @@ export default defineComponent({
   },
   render() {
     return (
-      <div class="h-full bg-[#FAFAFA] rounded-md overflow-hidden">
-        <div class="text-sm text-[#333] bg-white leading-none px-6 py-5 border-b border-b-[#E5E5E5]">
+      <div class="h-full rounded-md overflow-hidden">
+        <div class="text-2xl font-medium text-black leading-none px-6 py-5 ">
           关注的老师
         </div>
 

src/views/student-info/my-follow/item.tsx

@@ -1,7 +1,9 @@
 import { defineComponent } from 'vue'
 import styles from './index.module.less'
 import iconTeacher from '@/common/images/icon_teacher.png'
-import { ElButton, ElRate, ElTag } from 'element-plus'
+import { ElButton, ElImage, ElRate, ElTag } from 'element-plus'
+// import iconVip from '../images/icon_vip.png'
+import iconVip from '../../user-info/images/icon_vip.png'
 
 export default defineComponent({
   name: 'item',
@@ -20,63 +22,47 @@ export default defineComponent({
   render() {
     const item = this.item
     return (
-      <div
-        class={[
-          'py-3 pl-3 pr-5 flex justify-between bg-white rounded-md  hover:drop-shadow-lg transition-all'
-        ]}
-      >
-        <div class="flex items-center">
-          <img src={iconTeacher} class="w-[54px] h-[54px] rounded-full" />
-
-          <div class="pl-5">
-            <div class="flex items-center">
-              <span class="text-base pr-1 text-[#333]">{item.userName}</span>
-              {/* <ElRate
-                modelValue={item.starGrade}
-                disabled
-                textColor="#ffc459"
-                class={[styles.rate, '!h-4']}
-              /> */}
-            </div>
-            <div class="pt-1">
-              {this.subjects.map(subject => (
-                <ElTag
-                  effect="dark"
-                  size="small"
-                  color="#FFF1DE"
-                  style={{
-                    borderColor: '#FFF1DE',
-                    color: '#FF8C00',
-                    marginRight: '5px'
-                  }}
-                >
-                  {subject}
-                </ElTag>
-              ))}
-            </div>
-          </div>
+      <div class="w-[158px] rounded-[10px] pt-10  mb-4 m-auto user-shadow relative">
+        <div class="bg-[#CFF2FF] absolute left-2.5 top-2.5 text-[#0089B9] text-xs py-0.5 px-2 rounded-[10px]">
+          老师
+        </div>
+        <div class="flex flex-col items-center">
+          <ElImage
+            src={item.avatar}
+            class="w-12 h-12 rounded-full border-2 border-[#2DC7AA]"
+          />
+          {item.isVip && <ElImage src={iconVip} class="h-7 -mt-4" />}
         </div>
 
-        <div class="flex items-center">
-          {/* <div class="flex pr-16 text-[#333] text-base leading-none">
-            <p class="pr-5 mr-5 border-r">
-              <span class="text-[#999] pr-2">粉丝</span>
-              {item.fansNum}
-            </p>
-            <p>
-              <span class="text-[#999] pr-2">已上课时</span>
-              {item.expTime}
-            </p>
-          </div> */}
+        <p class="text-base text-[#333] font-medium leading-tight pb-5 pt-2 text-center">
+          {item.userName}
+        </p>
+        <p class="mx-4 text-center mb-3">
+          {this.subjects.map(subject => (
+            <ElTag
+              effect="dark"
+              size="small"
+              color="#E0FEF9"
+              round
+              style={{
+                borderColor: '#E0FEF9',
+                color: '#1B967E',
+                margin: '0 4px 8px'
+              }}
+            >
+              {subject}
+            </ElTag>
+          ))}
+        </p>
 
+        <div class="border-[#E7E6E6] border-t block mx-2.5 pt-1 pb-2 text-center">
           <ElButton
-            type="primary"
+            type="text"
             plain
             size="small"
-            disabled
-            class="!bg-white hover:!text-[#2DC7AA] !border-[#2DC7AA]"
+            class="!bg-white !text-[#999999] hover:!text-[#FF8B00]"
           >
-            已关注
+            取消关注
           </ElButton>
         </div>
       </div>

src/views/student-info/my-follow/list.tsx

@@ -62,33 +62,56 @@ export default defineComponent({
           <ElSkeleton
             loading={this.loading}
             animated
-            class=" w-full m-auto flex flex-wrap"
-            count={2}
+            class="w-full m-auto flex flex-wrap"
+            count={4}
             v-slots={{
               template: () => (
-                <div class="basis-1/2">
-                  <div class=" rounded-md bg-white py-4 px-[14px] mb-4 mx-2 flex items-center">
-                    <ElSkeletonItem
-                      variant="circle"
-                      style={{ width: '54px', height: '54px' }}
-                    ></ElSkeletonItem>
+                // <div class="basis-1/2">
+                //   <div class=" rounded-md bg-white py-4 px-[14px] mb-4 mx-2 flex items-center">
+                //     <ElSkeletonItem
+                //       variant="circle"
+                //       style={{ width: '54px', height: '54px' }}
+                //     ></ElSkeletonItem>
 
-                    <div class="flex w-32 flex-col pl-2.5">
-                      <ElSkeletonItem variant="h3"></ElSkeletonItem>
-                      <ElSkeletonItem
-                        variant="p"
-                        style={{ width: '60%', marginTop: '6px' }}
-                      ></ElSkeletonItem>
-                    </div>
-                  </div>
+                //     <div class="flex w-32 flex-col pl-2.5">
+                //       <ElSkeletonItem variant="h3"></ElSkeletonItem>
+                //       <ElSkeletonItem
+                //         variant="p"
+                //         style={{ width: '60%', marginTop: '6px' }}
+                //       ></ElSkeletonItem>
+                //     </div>
+                //   </div>
+                // </div>
+                <div class="w-[158px] rounded-[10px] pt-10 pb-7 mb-4 m-auto flex items-center justify-center flex-col user-shadow relative">
+                  <ElSkeletonItem
+                    variant="circle"
+                    style={{ width: '48px', height: '48px' }}
+                  ></ElSkeletonItem>
+
+                  <ElSkeletonItem
+                    variant="h3"
+                    style={{
+                      width: '50%',
+                      marginTop: '8px',
+                      marginBottom: '20px'
+                    }}
+                  ></ElSkeletonItem>
+                  <ElSkeletonItem
+                    variant="p"
+                    style={{ width: '60%', marginTop: '6px' }}
+                  ></ElSkeletonItem>
+                  <ElSkeletonItem
+                    variant="p"
+                    style={{ width: '60%', marginTop: '6px' }}
+                  ></ElSkeletonItem>
                 </div>
               )
             }}
           >
             <div class="flex flex-wrap">
               {this.list.map((item: any) => (
-                <div class="basis-1/2">
-                  <Item class="mb-4 mx-2" item={item} />
+                <div class="basis-1/4">
+                  <Item item={item} />
                 </div>
               ))}
             </div>

src/views/student-info/my-score/album-list.tsx

@@ -90,7 +90,7 @@ export default defineComponent({
           >
             {this.list.map((item: any) => (
               <>
-                <div class="w-1/4 pb-4">
+                <div class="w-1/4 pb-5">
                   <Item class="m-auto" item={item} />
                 </div>
               </>

src/views/student-info/my-score/index.tsx

@@ -8,7 +8,7 @@ export default defineComponent({
   name: 'live-class',
   data() {
     return {
-      activeName: 'ALBUM'
+      activeName: 'MYSCORE'
     }
   },
   methods: {

src/views/student-info/my-score/list.tsx

@@ -62,6 +62,7 @@ export default defineComponent({
           this.loading = false
         }, 200)
       }
+      // this.loading = true
     }
   },
   render() {
@@ -75,7 +76,7 @@ export default defineComponent({
             count={3}
             v-slots={{
               template: () => (
-                <div class="h-[94px] flex items-center justify-between w-full mb-2">
+                <div class="h-[94px] flex items-center justify-between w-full pt-2 mb-2">
                   <div class="w-2/3 flex items-center">
                     <ElSkeletonItem
                       variant="circle"
@@ -124,7 +125,7 @@ export default defineComponent({
                 }}
                 class={[
                   styles.musicListItem,
-                  'mb-2 cursor-pointer border-b border-solid border-[#E7E6E6]'
+                  'pt-2 cursor-pointer border-b border-solid border-[#E7E6E6] hover:bg-[#F4F4F4]'
                 ]}
               />
             ))}

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

@@ -47,7 +47,7 @@
   --music-list-item-charge-bg: #e1f0ff;
   --music-list-item-charge-color: #0086ff;
 
-  background: #ffffff;
+  // background: #ffffff;
   border-radius: 12px;
   display: flex;
   flex-direction: row;

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

@@ -86,7 +86,7 @@ export default defineComponent({
                 count={3}
                 v-slots={{
                   template: () => (
-                    <div class="h-[94px] flex items-center justify-between w-full mb-2">
+                    <div class="h-[94px] flex items-center justify-between w-full mb-2 pt-2">
                       <div class="w-2/3 flex items-center">
                         <ElSkeletonItem
                           variant="circle"
@@ -135,7 +135,7 @@ export default defineComponent({
                     }}
                     class={[
                       styles.musicListItem,
-                      'mb-2 cursor-pointer border-b border-solid border-[#E7E6E6]'
+                      'pt-2 cursor-pointer border-b border-solid border-[#E7E6E6] hover:bg-[#F4F4F4]'
                     ]}
                   />
                 ))}