样式修改完毕

1

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

@@ -70,6 +70,7 @@
           line-height: 25px;
           font-weight: 600;
           margin-bottom: 26px;
+          margin-top: 5px;
         }
       }
       .itemWrap {

src/components/col-header/modals/index.module.less

@@ -120,6 +120,7 @@
     .dropdownItem {
       position: relative;
       width: 50%;
+      cursor: pointer;
       &:nth-last-child(1) {
         &::after {
           width: 0px;

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

@@ -167,6 +167,9 @@ export default defineComponent({
         console.log(e)
       }
     }
+    const gotoFans = (nowPath:string)=>{
+      router.push({ path: nowPath, })
+    }
     const changeState = (val: string) => {
       if (val == 'strudent') {
         gotoPage('/studentInfo')
@@ -178,12 +181,14 @@ export default defineComponent({
         logout()
       }
     }
+
     return {
       ...toRefs(states),
       gotoPage,
       changeRoute,
       logout,
-      changeState
+      changeState,
+      gotoFans
     }
   },
   render() {
@@ -192,7 +197,7 @@ export default defineComponent({
         <ElDropdown
           onCommand={val => this.changeState(val)}
           popper-class="loginPopper"
-          trigger="click"
+          trigger="hover"
           v-slots={{
             dropdown: () => (
               <>
@@ -233,13 +238,13 @@ export default defineComponent({
 
                   {this.userType == 'TEACHER' ? (
                     <div class={classes.dropdownInfo}>
-                      <div class={classes.dropdownItem}>
+                      <div class={classes.dropdownItem} onClick={()=>this.gotoFans('/userInfo/myFans')}>
                         <p class={classes.dropdownItemTitle}>
                           {this.user.fansNum || 0}
                         </p>
                         <p class={classes.dropdownItemsubTitle}>粉丝</p>
                       </div>
-                      <div class={classes.dropdownItem}>
+                      <div class={classes.dropdownItem} onClick={()=>this.gotoFans('/userInfo/musicClass')}>
                         <p class={classes.dropdownItemTitle}>
                           {this.user.musicSheetNum || 0}
                         </p>

src/components/silder/index.tsx

@@ -104,7 +104,7 @@ export default defineComponent({
                     </div>
                     <div class="iconItem">
                       <img src={andIcon} alt="" />
-                      <span>Andrid</span>
+                      <span>Android</span>
                     </div>
                   </div>
                 </div>
@@ -123,7 +123,7 @@ export default defineComponent({
                     </div>
                     <div class="iconItem">
                       <img src={andIcon} alt="" />
-                      <span>Andrid</span>
+                      <span>Android</span>
                     </div>
                   </div>
                 </div>

src/views/albumDetail/index.module.less

@@ -4,6 +4,7 @@
 }
 .wrap {
   background-color: #f8f8f8 !important;
+  margin-bottom: 40px;
 }
 .w1200 {
   width: 1002px;
@@ -15,7 +16,7 @@
   padding: 20px 0;
   .left {
     border-right: 1px solid #E7E6E6;
-    width: 605px;
+    width: 629px;
     .albumInfo {
       padding: 0 25px;
       .albumTitle {
@@ -154,7 +155,7 @@
   .musicWrap {
     // padding: 0 25px;
     .musicList {
-      width: 604px;
+      // width: 604px;
     }
     .title {
       line-height: 48px;
@@ -181,7 +182,7 @@
 
   // 右边
   .right {
-    // width: 373px;
+    width: 374px;
     // margin-left: 14px;
     .some {
       padding: 20px 24px 10px;

src/views/albumDetail/index.tsx

@@ -14,13 +14,19 @@ import pagination from '@/components/pagination'
 import albumItem from './modals/albumItem'
 import request from '@/helpers/request'
 import musicLIstItem from './modals/musicLIstItem'
-import { getUserInfo, getUserType, getAuth } from '@/helpers/utils'
 import ColEmpty from '@/components/col-empty'
 import { useRoute, useRouter } from 'vue-router'
 import oStart from '@/common/images/oStart.png'
 import oLineStart from '@/common/images/oLineStart.png'
 import titleDot from '@/views/home/images/titleDot.png'
 import { watch } from 'fs'
+import {
+  getUserType,
+  vaildTeachingUrl,
+  getAuth,
+  setAuth
+} from '@/helpers/utils'
+import { state as states } from '@/state'
 export default defineComponent({
   name: 'albumDetail',
   props: {
@@ -77,6 +83,11 @@ export default defineComponent({
     }
 
     const favoriteAlbum = async () => {
+      const tockn = getAuth()
+      if (!tockn) {
+        states.loginPopupStatus = true
+        return
+      }
       try {
         const res = await request.post(
           `/api-website/music/album/favorite/${state.id}`,

src/views/albumDetail/modals/albumItem/index.module.less

@@ -1,6 +1,6 @@
 .itemWrap {
   margin-bottom: 20px;
-  margin-right: 18px;
+  margin-right: 13px;
   position: relative;
 
   &:hover {
@@ -69,7 +69,7 @@
     }
   }
   cursor: pointer;
-  &:nth-child(5n) {
+  &:nth-child(2n) {
     margin-right: 0;
   }
   .startImage {

src/views/albumDetail/modals/albumItem/index.tsx

@@ -75,7 +75,7 @@ export default defineComponent({
           <div class={classes.itemBottom}>
             <div class={classes.itemBottomL}>
               {/* <img src={pan} alt="" /> */}
-              <span>{state.detail.musicSheetCount}曲目</span>
+              <span>{state.detail.musicSheetCount}首</span>
             </div>
             <div class={classes.itemBottomR}>
               {/* <img src={start} alt="" /> */}

src/views/albumDetail/modals/musicLIstItem/index.module.less

@@ -1,10 +1,55 @@
 
 .itemAllWrap {
-  padding: 0 25px;
+  padding: 0 24px;
+  &:nth-last-child(1){
+    .itemWrap {
+    border-bottom:none;
+    }
+  }
   &:hover {
     background-color: #f8f8f8;
+    .itemWrap {
+      background-color: #f8f8f8;
+      .vip {
+        // width: 96px;
+        color: #fff !important;
+        background-color: var(--music-list-item-vip-bg)!important;
+        width: 96px !important;
+        height: 42px;
+        text-align: center !important;
+
+        p {
+          width: 96px !important;
+        }
+      }
+      .free {
+        width: 96px !important;
+        height: 42px;
+        text-align: center !important;
+        color: #fff !important;
+
+        p {
+          width: 96px !important;
+        }
+        background-color: var(--music-list-item-free-bg)!important;
+      }
+      .charge {
+        text-align: center;
+        color: #fff !important;
+        background-color: var(--music-list-item-charge-bg)!important;
+        width: 96px !important;
+        height: 42px;
+        text-align: center !important;
+
+
+        p {
+          width: 96px !important;
+        }
+      }
+    }
 
   }
+
 }
 .itemWrap {
 
@@ -13,52 +58,13 @@
   --music-list-item-desc-color: #333;
   --music-list-item-mate-color: #6a6a6a;
   --music-list-item-border-color: #f1f1f1;
-
   --music-list-item-vip-bg: #c8a430;
   --music-list-item-vip-color: #c8a430;
   --music-list-item-free-bg: #4ca751;
   --music-list-item-free-color: #4ca751;
   --music-list-item-charge-bg: #3f90d6;
   --music-list-item-charge-color: #3f90d6;
-  &:hover {
-    background-color: #f8f8f8;
-    .vip {
-      // width: 96px;
-      color: #fff !important;
-      background-color: var(--music-list-item-vip-bg)!important;
-      width: 96px !important;
-      height: 42px;
-      text-align: center !important;
-
-      p {
-        width: 96px !important;
-      }
-    }
-    .free {
-      width: 96px !important;
-      height: 42px;
-      text-align: center !important;
-      color: #fff !important;
-
-      p {
-        width: 96px !important;
-      }
-      background-color: var(--music-list-item-free-bg)!important;
-    }
-    .charge {
-      text-align: center;
-      color: #fff !important;
-      background-color: var(--music-list-item-charge-bg)!important;
-      width: 96px !important;
-      height: 42px;
-      text-align: center !important;
-
 
-      p {
-        width: 96px !important;
-      }
-    }
-  }
   height: 188px;
   background: #ffffff;
   // border-radius: 12px;
@@ -68,12 +74,13 @@
   width: 100%;
   padding: 16px 0px;
   border-bottom: 1px solid #ececec;
+
   cursor: pointer;
   .left {
     display: flex;
     flex-direction: row;
     align-items: center;
-    width: 555px;
+    width: 580px;
     .imgWrap {
       width: 88px;
       height: 88px;
@@ -82,7 +89,7 @@
       overflow: hidden;
     }
     .textWrap {
-      width: 555px;
+      width: 580px;
       position: relative;
       .musicName {
         font-size: 18px;
@@ -92,7 +99,7 @@
         margin-bottom: 6px;
       }
       .authorName {
-        font-weight: 600;
+        font-weight: 400;
         color: #666;
         line-height: 22px;
         font-size: 16px;
@@ -134,7 +141,7 @@
         object-fit: cover;
       }
       .authorName {
-        font-weight: 600;
+        font-weight: 400;
         color: #000000;
         line-height: 25px;
         font-size: 18px;

src/views/downLoad/index.tsx

@@ -55,7 +55,7 @@ export default defineComponent({
                   </div>
                   <div class={styles.iconItem}>
                     <img src={andIcon} alt="" />
-                    <span>Andrid</span>
+                    <span>Android</span>
                   </div>
                 </div>
               </div>
@@ -74,7 +74,7 @@ export default defineComponent({
                   </div>
                   <div class={styles.iconItem}>
                     <img src={andIcon} alt="" />
-                    <span>Andrid</span>
+                    <span>Android</span>
                   </div>
                 </div>
               </div>

src/views/videoDetailList/index.module.less

@@ -1,8 +1,9 @@
 .w1200 {
   width: 1002px;
-  margin: 20px auto 0;
+  margin: 20px auto 40px;
   background-color: #fff;
-  border-radius: 10px 10px 0 0;
+  border-radius: 10px;
+
 }
 .allWrap {
   background-color: #f8f8f8;
@@ -172,7 +173,7 @@
 .detailRight {
   width: 360px;
   .teacherInfo {
-    padding: 18px 6px 18px 20px;
+    padding: 18px 6px 24px 20px;
     background-color: #fff;
     h2 {
       font-size: 18px;
@@ -192,6 +193,7 @@
         font-weight: 600;
         color: #ff8b00;
         line-height: 33px;
+        text-align: center;
       }
       .fens {
         font-size: 14px;
@@ -299,7 +301,7 @@
       align-items: center;
       justify-content: flex-start;
       margin-top: 43px;
-      padding-bottom: 12px;
+      padding-bottom: 20px;
       span {
         font-size: 20px;
         color: #000;
@@ -364,15 +366,15 @@
   }
   .otherCourse {
     margin-top: 14px;
-    padding: 16px 14px 10px 24px;
+    padding: 16px 8px 10px 24px;
     background-color: #fff;
     h2 {
-      font-size: 16px;
+      font-size: 20px;
       font-family: PingFangSC-Semibold, PingFang SC;
       font-weight: 600;
-      color: #333;
+      color: #000;
       line-height: 30px;
-      margin-bottom: 11px;
+      margin-bottom: 20px;
     }
   }
 }

src/views/videoDetailList/modals/videoCourseItem.module.less

@@ -3,6 +3,9 @@
   flex-direction: row;
   padding: 20px 0;
   border-bottom: 1px solid #e7e6e6;
+  &:nth-last-child(1){
+    border-bottom: none;
+  }
   &:hover {
     background-color: #f4f4f4;
   }