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

src/style/index.css

@@ -24,8 +24,8 @@ body {
   background: #F6F7F8;
 }
 
-.user-shadow {
-  box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.04);
+.user-shadow {  
+  box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.1000);
 }
 
 ::-webkit-scrollbar {

src/views/App.tsx

@@ -30,7 +30,7 @@ export default defineComponent({
         <div
           style={{
             minHeight: 'calc(100vh - 263.5px)',
-            background:'#fff'
+            background: '#fff'
           }}
         >
           <ElConfigProvider locale={zhCn} message={{ max: 1 }}>

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

@@ -15,24 +15,24 @@ export default defineComponent({
   render() {
     const item = this.item
     return (
-      <div class="rounded-sm w-[168px] cursor-pointer overflow-hidden relative transition-all">
+      <div class="rounded-sm w-[156px] cursor-pointer overflow-hidden relative transition-all">
         <ElImage
-          class="w-full h-[168px] align-middle"
+          class="w-full h-[156px] align-middle rounded-[10px]"
           fit="cover"
           src={item.albumCoverUrl || hold}
         />
 
-        <div class="text-lg text-black whitespace-nowrap text-ellipsis overflow-hidden py-1">
+        <div class="text-lg text-black whitespace-nowrap text-ellipsis overflow-hidden pb-0.5 pt-2">
           {item.albumName}
         </div>
 
         <div class="flex justify-between text-sm text-[#999]">
           <div class="flex items-center">
-            <img src={pan} class="w-[18px] h-[18px] mr-1" />
+            {/* <img src={pan} class="w-[18px] h-[18px] mr-1" /> */}
             <span>{item.musicSheetCount}首</span>
           </div>
           <div class="flex items-center ">
-            <img src={start} class="w-[18px] h-[18px] mr-1" />
+            {/* <img src={start} class="w-[18px] h-[18px] mr-1" /> */}
             <span>{item.albumFavoriteCount}收藏</span>
           </div>
         </div>

src/views/student-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/student-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/student-info/components/users/index.tsx

@@ -1,10 +1,15 @@
 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 { userInfo } from 'os'
 import { getUserType } from '@/helpers/utils'
 
+export const getAssetsHomeFile = (fileName: string) => {
+  const path = `../../../user-info/images/${fileName}`
+  const modules = import.meta.globEager('../../../user-info/images/*')
+  return modules[path].default
+}
+
 export default defineComponent({
   name: 'users',
   computed: {
@@ -14,37 +19,51 @@ export default defineComponent({
   },
   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-[#FFE7CF] absolute left-6 top-0 text-[#AB5400] text-xs py-0.5 px-2 rounded-[10px]">
+          学生
+        </div>
+
+        <img
+          src={this.userInfo.heardUrl || iconTeacher}
+          class="w-[68px] h-[68px] rounded-full border-2 border-[#2DC7AA] border-solid mt-6 mx-auto"
+        />
 
-        <p class="text-[#1A1A1A] text-lg pt-4">{this.userInfo.username}</p>
+        <p class="text-[#333] text-lg font-medium pt-4 flex items-center justify-center">
+          {this.userInfo.username}
+
+          <img
+            src={
+              this.userInfo.isVip
+                ? getAssetsHomeFile('icon_vip.png')
+                : getAssetsHomeFile('icon_vip_default.png')
+            }
+            class="h-[26px]"
+          />
+        </p>
+
+        <div class={this.userInfo.isVip !== 1 ? 'mb-9 mt-5' : ''}>
+          {this.userInfo.isVip !== 1 && (
+            <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 pt-10 border-t border-solid border-[#E7E6E6]">
           <span
-            class={[
-              'flex items-center justify-center leading-6',
-              getUserType() === 'STUDENT' && 'cursor-pointer'
-            ]}
+            class="flex items-center justify-center flex-col leading-6 cursor-pointer flex-1"
             onClick={() => {
               if (getUserType() === 'STUDENT') {
                 this.$router.push('/studentInfo/myFollow')
               }
             }}
           >
+            <b class="text-[#333333] text-[28px] pl-1 pb-1">
+              {this.userInfo.starTeacherNum || 0}
+            </b>
             关注
-            {getUserType() === 'TEACHER' ? (
-              <b class="text-black text-xl pl-1 pb-[2px]">
-                {this.userInfo.fansNum || 0}
-              </b>
-            ) : (
-              <b class="text-black text-xl pl-1 pb-[2px]">
-                {this.userInfo.starTeacherNum || 0}
-              </b>
-            )}
           </span>
-          {/* <span class="pl-3 flex items-center justify-center leading-6">
-            帖子<b class="text-black text-xl pl-1 pb-[2px]">124</b>
-          </span> */}
         </div>
       </div>
     )

src/views/student-info/index.tsx

@@ -7,13 +7,15 @@ 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>
-        <div class="w-[960px] bg-white rounded-[6px] user-shadow">
-          <RouterView></RouterView>
+      <div class="bg-[#F6F7F8]">
+        <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-[737px] border-l border-l-[#E7E6E6]">
+            <RouterView></RouterView>
+          </div>
         </div>
       </div>
     )

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

@@ -56,18 +56,18 @@ export default defineComponent({
   render() {
     return (
       <>
-        <div class="px-4 flex flex-wrap">
+        <div class="flex flex-wrap">
           <ElSkeleton
             loading={this.loading}
             animated
             class="px-[14px] flex items-center flex-row justify-between"
-            count={5}
+            count={4}
             v-slots={{
               template: () => (
-                <div class="flex items-center flex-col justify-between w-[168px]">
+                <div class="flex items-center flex-col justify-between w-[156px]">
                   <ElSkeletonItem
                     variant="image"
-                    style={{ width: '168px', height: '168px' }}
+                    style={{ width: '156px', height: '156px' }}
                   ></ElSkeletonItem>
                   <ElSkeletonItem
                     variant="p"
@@ -90,7 +90,7 @@ export default defineComponent({
           >
             {this.list.map((item: any) => (
               <>
-                <div class="w-1/5 pb-4">
+                <div class="w-1/4 pb-4">
                   <Item class="m-auto" item={item} />
                 </div>
               </>

src/views/student-info/my-score/index.module.less

@@ -1,22 +1,24 @@
 .myScore {
   :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;
+    }
   }
 }

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

@@ -8,7 +8,7 @@ export default defineComponent({
   name: 'live-class',
   data() {
     return {
-      activeName: 'MYSCORE'
+      activeName: 'ALBUM'
     }
   },
   methods: {
@@ -16,7 +16,7 @@ export default defineComponent({
   },
   render() {
     return (
-      <div class={[styles.myScore, 'relative']}>
+      <div class={[styles.myScore, 'relative px-[25px]']}>
         <ElTabs v-model={this.activeName}>
           <ElTabPane label="我的乐谱" name="MYSCORE">
             {this.activeName === 'MYSCORE' && <List auditStatus="MYSCORE" />}

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

@@ -1,10 +1,10 @@
 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 MusicItem from '../../user-info/music-class/item'
 
 export default defineComponent({
   name: 'list',
@@ -67,7 +67,7 @@ export default defineComponent({
   render() {
     return (
       <>
-        <div class="px-[38px]">
+        <div class="mt-5">
           <ElSkeleton
             loading={this.loading}
             animated
@@ -79,7 +79,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>
@@ -98,7 +98,7 @@ export default defineComponent({
             }}
           >
             {this.list.map((item: any) => (
-              <MusicLIstItem
+              <MusicItem
                 onClick={(item: any) => {
                   if (this.auditStatus === 'UNPASS') {
                     console.log(item)
@@ -110,7 +110,7 @@ export default defineComponent({
                       }
                     })
                   } else {
-                    // 跳转对应详情
+                    // 跳转对应详情 个人中心不跳转到详情
                   }
                 }}
                 item={{
@@ -122,7 +122,10 @@ export default defineComponent({
                   composer: item.composer,
                   chargeType: item.chargeType
                 }}
-                class={[styles.musicListItem, 'mb-2 rounded-xl cursor-pointer']}
+                class={[
+                  styles.musicListItem,
+                  'mb-2 cursor-pointer border-b border-solid border-[#E7E6E6]'
+                ]}
               />
             ))}
           </ElSkeleton>

src/views/user-info/index.tsx

@@ -7,13 +7,15 @@ export default defineComponent({
   name: 'user-info',
   render() {
     return (
-      <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-[737px] border-l border-l-[#E7E6E6]">
-          <RouterView></RouterView>
+      <div class="bg-[#F6F7F8]">
+        <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-[737px] border-l border-l-[#E7E6E6]">
+            <RouterView></RouterView>
+          </div>
         </div>
       </div>
     )

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

@@ -24,7 +24,7 @@ export default defineComponent({
 
         <div class="pt-12">
           <ColSteps
-            class="px-[58px]"
+            class="pl-[58px] pr-7"
             type="small"
             active={createState.active}
           />

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

@@ -55,7 +55,7 @@
   width: 100%;
   border-radius: 12px;
   margin-bottom: 10px;
-  padding: 10px 12px;
+  padding: 10px 0;
   cursor: pointer;
   .left {
     display: flex;

src/views/user-info/my-fans/index.tsx

@@ -4,6 +4,8 @@ import request from '@/helpers/request'
 import { ElImage, ElSkeleton, ElSkeletonItem, ElTag } from 'element-plus'
 import { defineComponent } from 'vue'
 
+import iconVip from '../images/icon_vip.png'
+
 export default defineComponent({
   name: 'MyFans',
   data() {
@@ -55,8 +57,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>
 
@@ -65,51 +67,66 @@ export default defineComponent({
             loading={this.loading}
             animated
             class=" w-full m-auto px-[14px] flex"
-            count={3}
+            count={4}
             v-slots={{
               template: () => (
-                <div class="w-[296px] rounded-md bg-white py-4 px-[14px] mb-4 m-auto flex items-center hover:drop-shadow-lg transition-all">
+                <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: '56px', height: '56px' }}
+                    style={{ width: '48px', height: '48px' }}
                   ></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>
+                  <ElSkeletonItem
+                    variant="h3"
+                    style={{
+                      width: '50%',
+                      marginTop: '8px',
+                      marginBottom: '20px'
+                    }}
+                  ></ElSkeletonItem>
+                  <ElSkeletonItem
+                    variant="p"
+                    style={{ width: '60%', marginTop: '6px' }}
+                  ></ElSkeletonItem>
                 </div>
               )
             }}
           >
             <div class="flex flex-wrap px-3">
               {this.list.map((item: any) => (
-                <div class="basis-1/3 ">
-                  <div class="w-[296px] rounded-md bg-white py-4 px-[14px] mb-4 m-auto flex items-center hover:drop-shadow-lg transition-all">
-                    <ElImage src={item.avatar} class="w-14 h-14 rounded-full" />
-
-                    <div class="pl-2.5">
-                      <p class="text-base text-[#333] font-medium leading-tight pb-1.5">
-                        {item.userName}
-                      </p>
-                      <p>
-                        <ElTag
-                          effect="dark"
-                          size="small"
-                          color="#FFF1DE"
-                          style={{
-                            borderColor: '#FFF1DE',
-                            color: '#FF8C00',
-                            marginRight: '5px'
-                          }}
-                        >
-                          {item.subjectName}
-                        </ElTag>
-                      </p>
+                <div class="basis-1/4 ">
+                  <div class="w-[158px] rounded-[10px] pt-10 pb-7 mb-4 m-auto flex items-center justify-center flex-col user-shadow relative">
+                    <div class="bg-[#FFE7CF] absolute left-2.5 top-2.5 text-[#AB5400] 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>
+
+                    <p class="text-base text-[#333] font-medium leading-tight pb-5 pt-2 text-center">
+                      {item.userName}
+                    </p>
+                    <p>
+                      <ElTag
+                        effect="dark"
+                        // size="small"
+                        color="#E0FEF9"
+                        round
+                        style={{
+                          borderColor: '#E0FEF9',
+                          color: '#1B967E',
+                          margin: '0 4px'
+                        }}
+                      >
+                        {item.subjectName}
+                      </ElTag>
+                    </p>
                   </div>
                 </div>
               ))}

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

@@ -103,7 +103,7 @@ export default defineComponent({
 
         <div class="pt-12">
           <ColSteps
-            class="px-[60px]"
+            class="pl-[60px] pr-7"
             type="large"
             active={createState.active}
           />