提交

1

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

@@ -22,17 +22,17 @@ import backIcon from '../images/backIcon.png'
 import peopleIcon from '../images/peopleIcon.png'
 import planIcon from '../images/planIcon.png'
 import ablumIcon from '../images/ablumIcon.png'
-import noAblumIcon from '../images/ablumIcon.png'
+import noAblumIcon from '../images/noAblumIcon.png'
 import memberIcon from '../images/memberIcon.png'
 import noMemberIcon from '../images/noMemberIcon.png'
 import onlineIcon from '../images/onlineIcon.png'
-import noOnlineIcon from '../images/onlineIcon.png'
+import noOnlineIcon from '../images/noOnlineIcon.png'
 import styleIcon from '../images/styleIcon.png'
-import nostyleIcon from '../images/styleIcon.png'
+import nostyleIcon from '../images/noStyleIcon.png'
 import videoIcon from '../images/videoIcon.png'
-import noVideoIcon from '../images/videoIcon.png'
+import noVideoIcon from '../images/noVideoIcon.png'
 import vipIcon from '../images/vipIcon.png'
-import noVipIcon from '../images/vipIcon.png'
+import noVipIcon from '../images/noVipIcon.png'
 import icon_back from '@/common/images/icon_back.png'
 
 import {

src/components/hotSearch/index.module.less

@@ -6,7 +6,7 @@
   align-items: center;
   justify-content: space-between;
   padding-bottom: 45px;
-  border-bottom: 1px solid #e8e8e8;
+
   .wrapLeft {
     display: flex;
     flex-direction: row;

src/components/videoDetailItem/index.module.less

@@ -1,5 +1,12 @@
-.isFull {
+.isFull.itemWrap {
   width: 100% !important;
+  margin-right: 0;
+  overflow: hidden;
+
+  &:hover {
+    transform: translateY(0px);
+    transition: all linear 0.1s;
+  }
   .detaile {
     width: 100% !important;
     height: 187px !important;
@@ -10,8 +17,13 @@
       height: 187px !important;
     }
   }
+
+  .masker {
+    width: 100%!important;
+    height: 187px!important;
+  }
   &:nth-last-child(1) {
-    border-bottom: none;
+    // border-bottom: none;
   }
   border-bottom: 1px solid #f0f0f0;
   margin-bottom: 14px;
@@ -19,6 +31,7 @@
     padding-bottom: 14px !important;
   }
 }
+
 .itemWrap {
   border: 1px solid #E0E0E0;
   width: 312px;

src/views/albumDetail/index.module.less

@@ -151,7 +151,10 @@
     }
   }
   .musicWrap {
-    padding: 0 25px;
+    // padding: 0 25px;
+    .musicList {
+      width: 604px;
+    }
     .title {
       line-height: 48px;
       font-size: 20px;
@@ -177,25 +180,25 @@
 
   // 右边
   .right {
-    width: 373px;
-    margin-left: 14px;
+    // width: 373px;
+    // margin-left: 14px;
     .some {
-      padding: 20px 20px 10px;
+      padding: 20px 24px 10px;
       background-color: #fff;
       margin-bottom: 14px;
       .someTitle {
         display: flex;
         flex-direction: row;
         justify-content: space-between;
-        margin-bottom: 18px;
+        margin-bottom: 20px;
         .tilteL {
           display: flex;
           flex-direction: row;
           align-items: center;
           font-weight: 600;
-          color: #333;
+          color: #000;
           line-height: 30px;
-          font-size: 18px;
+          font-size: 20px;
           img {
             width: 24px;
             height: 24px;

src/views/albumDetail/index.tsx

@@ -4,7 +4,8 @@ import start from '@/components/albumItem/images/start.png'
 import lineStart from '@/components/albumItem/images/lineStart.png'
 import smallPan from '@/components/albumItem/images/pan.png'
 import classes from './index.module.less'
-import arrow from '@/components/musicLIstItem/images/arrow.png'
+// import arrow from '@/components/musicLIstItem/images/arrow.png'
+import arrow from '@/views/home/images/moreArrow.png'
 import hot from '@/components/hotSearch/images/hot.png'
 import pan from './images/pan.png'
 import somePan from './images/somePan.png'
@@ -176,7 +177,7 @@ export default defineComponent({
                       <img src={titleDot} alt="" />
                   </div>
                 </div>
-                <div>
+                <div class={classes.musicList}>
                   {state.musicList.map(item => {
                     return <musicLIstItem item={item}></musicLIstItem>
                   })}
@@ -195,7 +196,7 @@ export default defineComponent({
               <div class={classes.some}>
                 <div class={classes.someTitle}>
                   <div class={classes.tilteL}>
-                    <img src={somePan} alt="" />
+                    {/* <img src={somePan} alt="" /> */}
                     <span>相关专辑</span>
                   </div>
                   <div
@@ -221,7 +222,7 @@ export default defineComponent({
               <div class={classes.some}>
                 <div class={classes.someTitle}>
                   <div class={classes.tilteL}>
-                    <img src={hot} alt="" />
+                    {/* <img src={hot} alt="" /> */}
                     <span>热门专辑</span>
                   </div>
                   <div

src/views/albumDetail/modals/albumItem.tsx

@@ -1,55 +0,0 @@
-import { defineComponent, toRefs, reactive, onMounted, ref } from 'vue'
-
-import classes from './index.module.less'
-import hold from '@/components/albumItem/images/hold.png'
-import { useRouter } from 'vue-router'
-export default defineComponent({
-  name: 'albumItem',
-  props: {
-    detail: {
-      type: Object,
-      default: {
-        albumCoverUrl: '',
-        albumDesc: '',
-        albumFavoriteCount: 0,
-        albumName: '',
-        albumStatus: 0,
-        albumTag: '',
-        auditVersion: 0,
-        createBy: 0,
-        createTime: '',
-        delFlag: null,
-        hotFlag: null,
-        id: 0,
-        musicSheetCount: 0,
-        musicTagNames: '',
-        sortNumber: 0,
-        topFlag: null,
-        updateBy: 34,
-        updateTime: ''
-      }
-    }
-  },
-  emits:['albumDetail'],
-  setup(props,conent) {
-    const state = reactive({
-      detail: props.detail
-    })
-    const router = useRouter()
-    const gotoAlbum = ()=>{
-      conent.emit('albumDetail',state.detail.id)
-    }
-    return () => (
-      <>
-        <div class={classes.itemWrap} onClick={gotoAlbum}>
-          <img
-            src={state.detail.albumCoverUrl ? state.detail.albumCoverUrl : hold}
-            alt=""
-            class={classes.hold}
-          />
-          <h2>{state.detail.albumName}</h2>
-        </div>
-      </>
-    )
-  }
-})

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

@@ -0,0 +1,122 @@
+.itemWrap {
+  margin-bottom: 20px;
+  margin-right: 18px;
+  position: relative;
+
+  &:hover {
+    .hold {
+      // transform: translateY(-10px);
+      transition: linear 0.1s;
+      .masker {
+        // transition: all linear 0.2s;
+        visibility: visible;
+        img {
+          width: 48px;
+          height: 48px;
+          animation-name: showPaly;
+          animation-duration: .6s;
+          animation-timing-function: linear;
+          animation-fill-mode: forwards;
+          // animation-delay: 1s;
+        }
+      }
+      @keyframes showPaly {
+        0% {
+         transform: scale(.5);
+
+        }
+        50% {
+          transform: scale(1.2);
+
+        }
+        100% {
+          transform: scale(1);
+        }
+      }
+      // img {
+      //   transform: scale(1.1);
+      //   transition: all 0.3s ease-in-out;
+      // }
+    }
+  }
+  .hold {
+    .masker {
+      visibility: hidden;
+      width: 156px;
+      height: 156px;
+      background-color: rgba(0, 0, 0, 0.4);
+      position: absolute;
+      top: 0;
+      left: 0;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: center;
+      position: absolute;
+      img {
+        width: 48px;
+        height: 48px;
+      }
+    }
+    position: relative;
+    width: 156px;
+    height: 156px;
+    border-radius: 10px;
+    overflow: hidden;
+    img {
+      width: 100%;
+      transition: all 0.3s ease-in-out;
+    }
+  }
+  cursor: pointer;
+  &:nth-child(5n) {
+    margin-right: 0;
+  }
+  .startImage {
+    width: 24px;
+    height: 24px;
+    z-index: 1000;
+    position: absolute;
+    top: 8px;
+    right: 8px;
+  }
+  h2 {
+    line-height: 30px;
+    font-size: 18px;
+    font-weight: 400;
+    color: #000;
+    line-height: 25px;
+    margin: 13px 0 3px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: 156px;
+  }
+
+  span {
+    color: #999;
+    font-size: 14px;
+  }
+  .itemBottom {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    img {
+      width: 18px;
+      margin-right: 4px;
+      // height: 18px;
+    }
+    .itemBottomR {
+      margin-right: 1px;
+    }
+    .itemBottomL,
+    .itemBottomR {
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      align-items: center;
+      font-size: 14px;
+      line-height: 20px;
+    }
+  }
+}

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

@@ -0,0 +1,89 @@
+import { defineComponent, toRefs, reactive, onMounted, ref, watch } from 'vue'
+
+import classes from './index.module.less'
+import hold from './images/hold.png'
+import start from './images/start.png'
+import lineStart from './images/lineStart.png'
+import pan from './images/pan.png'
+import player from './images/player.png'
+import { useRouter } from 'vue-router'
+export default defineComponent({
+  name: 'albumItem',
+  props: {
+    detail: {
+      type: Object,
+      default: {
+        albumCoverUrl: '',
+        albumDesc: '',
+        albumFavoriteCount: 0,
+        albumName: '',
+        albumStatus: 0,
+        albumTag: '',
+        auditVersion: 0,
+        createBy: 0,
+        createTime: '',
+        delFlag: null,
+        hotFlag: null,
+        id: 0,
+        musicSheetCount: 0,
+        musicTagNames: '',
+        sortNumber: 0,
+        topFlag: null,
+        updateBy: 34,
+        updateTime: '',
+        favorite:0
+      } as any
+    }
+  },
+  emits:['albumDetail'],
+  setup(props,conent) {
+    const state = reactive({
+      detail: props.detail
+    })
+    watch(
+      () => props.detail,
+      detail => {
+        state.detail = detail
+      }
+    )
+    const router = useRouter()
+    const gotoAlbum = () => {
+      conent.emit('albumDetail',state.detail.id)
+    }
+    return () => (
+      <>
+        <div
+          class={classes.itemWrap}
+          onClick={() => {
+            gotoAlbum()
+          }}
+        >
+          <img class={classes.startImage} src={state.detail.favorite?lineStart:start} alt="" />
+          <div class={classes.hold}>
+            <div class={classes.masker}>
+              <img src={player} alt="" />
+            </div>
+            <img
+              src={
+                state.detail.albumCoverUrl ? state.detail.albumCoverUrl : hold
+              }
+              alt=""
+            />
+          </div>
+
+          <h2>{state.detail.albumName}</h2>
+          <div class={classes.itemBottom}>
+            <div class={classes.itemBottomL}>
+              {/* <img src={pan} alt="" /> */}
+              <span>{state.detail.musicSheetCount}曲目</span>
+            </div>
+            <div class={classes.itemBottomR}>
+              {/* <img src={start} alt="" /> */}
+              <span>{state.detail.albumFavoriteCount}收藏</span>
+            </div>
+          </div>
+        </div>
+      </>
+    )
+  }
+})

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

@@ -1,6 +1,15 @@
+
+.itemAllWrap {
+  padding: 0 25px;
+  &:hover {
+    background-color: #f8f8f8;
+
+  }
+}
 .itemWrap {
   &:hover {
     background-color: #f8f8f8;
+
   }
   --music-list-item-background-color: #fff;
   --music-list-item-title-color: #333;
@@ -29,7 +38,7 @@
     display: flex;
     flex-direction: row;
     align-items: center;
-    width: 100%;
+    width: 555px;
     .imgWrap {
       width: 88px;
       height: 88px;
@@ -38,6 +47,7 @@
       overflow: hidden;
     }
     .textWrap {
+      width: 555px;
       position: relative;
       .musicName {
         font-size: 18px;
@@ -119,7 +129,7 @@
       }
     }
     .touchButtonO {
-      right: -100px;
+      right: 0;
       top: 38px;
       position: absolute;
       &:hover {

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

@@ -5,11 +5,12 @@ import gou from './images/gou.png'
 import music from './images/music.png'
 import member from './images/member.png'
 import palyer from './images/palyer.png'
-import arrow from './images/arrow.png'
+// import arrow from './images/arrow.png'
 import { goodsType } from '@/constant'
 import { useRouter } from 'vue-router'
 import start from '@/common/images/start.png'
 import lineStart from '@/common/images/lineStart.png'
+import arrow from '@/views/home/images/moreArrow.png'
 
 type Props = {
   id?: Number
@@ -59,6 +60,7 @@ export default defineComponent({
     }
     return () => (
       <div
+      class={classes.itemAllWrap}
         onClick={() => {
           props.onClick(state.item)
         }}

src/views/musicLibrary/index.module.less

@@ -14,8 +14,9 @@
 
   margin: 0 auto;
   .myTabWrap {
+    border-top: 1px solid #e8e8e8;
     :global {
-      margin-top: 28px;
+      padding-top: 28px;
       font-size: 20px;
       .el-tabs__nav-wrap {
         &::after {

src/views/videoDetailList/index.module.less

@@ -1,31 +1,86 @@
 .w1200 {
-  width: 1200px;
+  width: 1002px;
   margin: 20px auto 0;
+  background-color: #fff;
+  border-radius: 10px 10px 0 0;
+}
+.allWrap {
+  background-color: #f8f8f8;
 }
 
 .videoList {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
-  margin-top: 20px;
+  // margin-top: 20px;
 }
 .detailWrap {
   display: flex;
   flex-direction: row;
   .detailLeft {
-    width: 826px;
-    margin-right: 16px;
+    width: 628px;
+    padding: 0 24px;
+    margin: 26px 0;
+    // margin-right: 16px;
+    border-right: 1px solid #e7e6e6;
 
     .detailTopImg {
       background-color: #fff;
-      width: 826px;
-      height: 463px;
-      margin-bottom: 14px;
+      width: 628px;
+      // height: 463px;
+      margin-bottom: 24px;
     }
   }
 }
+.courseDetailWrap {
+  .courseDetailTitle {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 10px;
+    span {
+      font-size: 28px;
+      font-weight: 500;
+      color: #000000;
+      line-height: 40px;
+    }
+    .courseTitleR {
+      display: flex;
+      flex-direction: row;
+      align-items: bottom;
+
+      span {
+        font-size: 16px;
+        font-weight: 500;
+        color: #00BF9B;
+        line-height: 22px;
+      }
+      img {
+        width: 20px;
+        height: 20px;
+        margin-right: 10px;
+      }
+    }
+  }
+
+}
+.tag {
+  background-color: rgba(188, 253, 241, 0.46);
+  color: #00886d;
+  // padding: 0px 4px;
+  font-size: 14px;
+  margin-right: 16px;
+  border-radius: 20px;
+  padding: 0 16px;
+  height: 30px;
+  line-height: 30px;
+  text-align: center;
+  display: inline-block;
+  margin-bottom: 50px;
+}
 .courseWrap {
-  padding: 20px;
+  // padding: 20px;
   background-color: #fff;
   .courseTitle {
     display: flex;
@@ -37,19 +92,19 @@
     color: #333;
     line-height: 28px;
     img {
-      width: 22px;
-      height: 22px;
-      margin-right: 8px;
+      width: 30px;
+      height: 20px;
+      margin-left: 10px;
     }
   }
   .courseInfo {
-    margin-top: 10px;
-    padding-bottom: 20px;
-    border-bottom: 1px solid #f0f0f0;
+    margin-top: 14px;
+    padding-bottom: 53px;
+    // border-bottom: 1px solid #f0f0f0;
     p {
-      font-size: 18px;
+      font-size: 16px;
       font-weight: 400;
-      color: #666666;
+      color: #656565;
       line-height: 28px;
     }
   }
@@ -74,17 +129,25 @@
       line-height: 28px;
       align-items: center;
       img {
-        width: 22px;
-        height: 22px;
-        margin-right: 8px;
+        width: 30px;
+        height: 20px;
+        margin-right: 10px;
       }
     }
     .courseTitlTimer {
       font-size: 16px;
       font-family: PingFangSC-Medium, PingFang SC;
-      font-weight: 600;
-      color: #2dc7aa;
-      line-height: 28px;
+      font-weight: 500;
+      color: #FF6422;
+      line-height: 22px;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      img {
+        width: 16px;
+        height: 16px;
+        margin-right: 10px;
+      }
     }
   }
 }
@@ -92,8 +155,35 @@
 .detailRight {
   width: 360px;
   .teacherInfo {
-    padding: 18px 16px;
+    padding: 18px 6px 18px 20px;
     background-color: #fff;
+    h2 {
+      font-size: 18px;
+      font-weight: 500;
+      color: #000000;
+      line-height: 25px;
+      margin-bottom: 23px;
+    }
+    .teacherTopInfo {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      .fensNum {
+        font-size: 24px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #ff8b00;
+        line-height: 33px;
+      }
+      .fens {
+        font-size: 14px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #999999;
+        line-height: 20px;
+      }
+    }
     .teacherHeadWrap {
       display: flex;
       flex-direction: row;
@@ -104,24 +194,26 @@
         flex-direction: row;
         align-items: center;
         .teacherHeader {
-          width: 50px;
-          height: 50px;
+          width: 68px;
+          height: 68px;
           border-radius: 50%;
+          border: 1px solid #2dc7aa;
           overflow: hidden;
-          margin-right: 10px;
+          margin-right: 17px;
         }
         .teacherHeadName {
           padding-top: 2px;
-          display: flex;
-          flex-direction: row;
-          align-items: center;
-          font-size: 18px;
+          // display: flex;
+          // flex-direction: row;
+          // align-items: center;
+          font-size: 16px;
           font-family: PingFangSC-Semibold, PingFang SC;
-          font-weight: 600;
-          color: #333;
-          line-height: 25px;
-          span {
-            margin-right: 12px;
+          font-weight: 500;
+          color: #000;
+          line-height: 22px;
+         span{
+            margin-bottom: 10px;
+            display: block;
           }
           .teacherIcon {
             width: 54px;
@@ -129,33 +221,37 @@
             margin-right: 5px;
           }
         }
-        .fens {
-          font-size: 14px;
-          font-family: PingFangSC-Regular, PingFang SC;
-          font-weight: 400;
-          color: #999999;
-          line-height: 22px;
-          span {
-            color: #333333;
-          }
-        }
+      }
+      .fensNum {
+        font-size: 24px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #ff8b00;
+        line-height: 33px;
+      }
+      .fens {
+        font-size: 14px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #999999;
+        line-height: 20px;
       }
       .teacherHeadRight {
         width: 67px;
-        background: #2dc7aa;
-        border-radius: 21px;
+        height: 26px;
+        background: #ff6969;
+        border-radius: 13px;
         font-size: 14px;
-        font-family: PingFangSC-Semibold, PingFang SC;
         color: #ffffff;
-        line-height: 30px;
+        line-height: 26px;
         text-align: center;
         cursor: pointer;
       }
       .teacherHeadRight.isStart {
-        border: 1px solid #2dc7aa;
+        height: 28px;
+        border: 1px solid #ff6969;
         background: #fff;
-        color: #2dc7aa;
-
+        color: #ff6969;
       }
     }
     //
@@ -184,48 +280,64 @@
       flex-direction: row;
       align-items: center;
       justify-content: flex-start;
-      margin-top: 20px;
+      margin-top: 43px;
       padding-bottom: 12px;
-      font-size: 16px;
       span {
-        font-size: 16px;
-        color: #333;
+        font-size: 20px;
+        color: #000;
         line-height: 28px;
         font-weight: 600;
       }
       img {
         width: 24px;
         height: 24px;
-        margin-right: 6px;
+        margin-right: 10px;
       }
     }
     .teacherDetail {
-      font-size: 16px;
+      font-size: 14px;
       font-family: PingFangSC-Regular, PingFang SC;
       font-weight: 400;
-      color: #666666;
-      line-height: 25px;
-      border-bottom: 1px solid #F0F0F0;
-      padding-bottom: 14px;
+      color: #999;
+      line-height: 28px;
     }
+
     .teacherVideoList {
       display: flex;
       flex-direction: row;
       flex-wrap: wrap;
       .videoItem {
         cursor: pointer;
+        &:hover {
+          .player {
+            visibility: visible;
+          }
+
+        }
+        .player {
+          position: absolute;
+          width: 48px;
+          height: 48px;
+          left: 50%;
+          top: 50%;
+          margin-left: -24px;
+          margin-top: -24px;
+          visibility: hidden;
+        }
         .Styles {
-          width: 159px;
-          height: 89px;
+          width: 160px;
+          height: 160px;
         }
         .videoItemVideo {
-          width: 159px;
-          height: 89px;
+          width: 160px;
+          height: 160px;
+          object-fit:cover;
+          border-radius: 10px;
         }
-        margin-right: 9px;
+        margin-right: 10px;
         margin-bottom: 12px;
-        width: 159px;
-        height: 89px;
+        width: 160px;
+        height: 160px;
         position: relative;
         &:nth-child(2n) {
           margin-right: 0;
@@ -235,7 +347,7 @@
   }
   .otherCourse {
     margin-top: 14px;
-    padding: 16px 14px 10px;
+    padding: 16px 14px 10px 24px;
     background-color: #fff;
     h2 {
       font-size: 16px;
@@ -247,15 +359,7 @@
     }
   }
 }
-.player {
-  position: absolute;
-  width: 32px;
-  height: 32px;
-  left: 50%;
-  top: 50%;
-  margin-left: -16px;
-  margin-top: -16px;
-}
+
 .hotSearchWrap {
   margin-top: 20px;
 }

src/views/videoDetailList/index.tsx

@@ -4,7 +4,7 @@ import { defineComponent, toRefs, reactive, onMounted, ref } from 'vue'
 import styles from './index.module.less'
 import hotSearch from '@/components/hotSearch'
 import searchInput from '@/components/searchInput'
-import videoDetailItem from '@/components/videoDetailItem'
+import videoDetailItem from './modals/videoDetailItem'
 import request from '@/helpers/request'
 import pagination from '@/components/pagination'
 import { useRoute } from 'vue-router'

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

@@ -1,12 +1,18 @@
 .videoWrap {
   display: flex;
   flex-direction: row;
-  margin-bottom: 12px;
+  padding: 20px 0;
+  border-bottom: 1px solid #E7E6E6;
+  &:hover {
+    background-color: #F4F4F4;
+  }
   .videoImgWrapImg {
-    width: 220px;
-    height: 124px;
+    width: 208px;
+    height: 116px;
     margin-right: 10px;
-    max-width: 220px!important;
+    border-radius: 10px;
+    overflow: hidden;
+    max-width: 208px !important;
   }
   .videoImgWrap {
     cursor: pointer;
@@ -24,23 +30,43 @@
   .courseInfo {
     padding-top: 7px;
     h4 {
-      font-size: 17px;
+      font-size: 18px;
       font-weight: 600;
       color: #333;
-      line-height: 28px;
-      margin-bottom: 6px;
+      line-height: 25px;
+      margin-bottom: 4px;
     }
     .courseDetial {
-      font-size: 16px;
+      font-size: 14px;
       font-family: PingFangSC-Regular, PingFang SC;
       font-weight: 400;
       color: #666666;
       line-height: 25px;
+      height: 56px;
       display: -webkit-box;
       overflow: hidden;
       text-overflow: ellipsis;
       -webkit-line-clamp: 4;
       -webkit-box-orient: vertical;
+      line-height: 24px;
+      // margin-bottom: 5px;
+    }
+    .courseDetialTime {
+      font-size: 14px;
+      font-weight: 400;
+      color: #ff6422;
+      line-height: 28px;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      img {
+        width: 16px;
+        height: 16px;
+        margin-right: 10px;
+      }
+      // span {
+      //   margin-right: px;
+      // }
     }
   }
 }

src/views/videoDetailList/modals/videoCourseItem.tsx

@@ -1,5 +1,6 @@
 import { defineComponent, toRefs, reactive, onMounted, ref, watch } from 'vue'
 import player from '../images/player.png'
+import clock from '../images/clock.png'
 import classes from './videoCourseItem.module.less'
 import detaile from '@/components/videoDetailItem/images/detaile.png'
 import { ElDialog } from 'element-plus'
@@ -48,6 +49,7 @@ export default defineComponent({
           <div class={classes.courseInfo}>
             <h4>{state.item.videoTitle}</h4>
             <p class={classes.courseDetial}>{state.item.videoContent}</p>
+            <p  class={classes.courseDetialTime}><img src={clock} alt="" /> <span>课时：</span><span>120分钟</span></p>
           </div>
           <ElDialog
             modelValue={state.showDown}

src/views/videoDetailList/modals/videoDetailItem/index.module.less

@@ -0,0 +1,199 @@
+.isFull.itemWrap {
+  width: 100% !important;
+  margin-right: 0;
+
+
+  .detaile {
+    width: 100% !important;
+    height: 187px !important;
+    border-radius: 4px;
+
+    img {
+      width: 100% !important;
+      height: 187px !important;
+    }
+  }
+
+  .masker {
+    visibility: visible !important;
+    width: 100%;
+    height: 187px;
+  }
+  &:nth-last-child(1) {
+    border-bottom: none;
+  }
+  border-bottom: 1px solid #f0f0f0;
+  margin-bottom: 14px;
+  .itemBottom {
+    padding-bottom: 14px !important;
+  }
+}
+
+.itemWrap {
+  border: 1px solid #e0e0e0;
+  width: 312px;
+  margin-bottom: 20px;
+  margin-right: 33px;
+  border-radius: 10px;
+  overflow: hidden;
+  background-color: #fff;
+  cursor: pointer;
+  &:nth-child(3n) {
+    margin-right: 0;
+  }
+  &:hover {
+    // transform: translateY(-10px);
+    // transition: all linear 0.1s;
+    .detaileWrap {
+      .masker {
+        // transition: all linear 0.2s;
+        visibility: visible;
+        img {
+          width: 48px;
+          height: 48px;
+          animation-name: showPaly;
+          animation-duration: 0.5s;
+          animation-timing-function: linear;
+          animation-fill-mode: forwards;
+          // animation-delay: 1s;
+        }
+      }
+      @keyframes showPaly {
+        0% {
+          transform: scale(0.5);
+        }
+        50% {
+          transform: scale(1.2);
+        }
+        100% {
+          transform: scale(1);
+        }
+      }
+    }
+  }
+  .detaileWrap {
+    position: relative;
+
+    .detaile {
+      border-radius: 4px;
+      width: 312px;
+      height: 174px;
+    }
+    .masker {
+      visibility: hidden;
+      width: 312px;
+      height: 174px;
+      background-color: rgba(0, 0, 0, 0.4);
+      position: absolute;
+      top: 0;
+      left: 0;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: center;
+      position: absolute;
+      z-index: 900;
+      img {
+        width: 48px;
+        height: 48px;
+      }
+    }
+    // &:hover {
+
+    // }
+  }
+  .infoBottom {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 12px;
+    justify-content: space-between;
+    .infoBottomL {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      .itemHead {
+        width: 28px;
+        height: 28px;
+        border-radius: 50%;
+        border: 2px solid #4bb39e;
+        margin-right: 12px;
+      }
+      .itemTitle {
+        font-size: 20px;
+        font-weight: 500;
+        color: #333333;
+        line-height: 28px;
+      }
+      .course {
+        color: #666;
+        font-size: 18px;
+        line-height: 25px;
+      }
+    }
+  }
+  .itemBottom {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 0 12px 12px;
+    justify-content: space-between;
+    .itemBottomL {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      .itemHead {
+        width: 28px;
+        height: 28px;
+        vertical-align: bottom;
+        margin-right: 10px;
+      }
+      .itemTitle {
+        color: #999;
+        font-weight: 500;
+        font-size: 16px;
+        line-height: 22px;
+      }
+      .line {
+        width: 1px;
+        height: 10px;
+        border: 1px solid #d3d3d3;
+        margin: 0 10px;
+      }
+      .course {
+        color: #666;
+        font-size: 16px;
+        line-height: 22px;
+      }
+    }
+    // .buy {
+    //   color: #ff802c;
+    //   font-size: 16px;
+    //   line-height: 22px;
+    // }
+    // .itemBottomR {
+    .detaileStudy {
+      // position: absolute;
+      // left: 0;
+      // bottom: 0;
+      // padding: 0 12px;
+      line-height: 38px;
+      // background-color: rgba(0, 0, 0, 0.6);
+      // opacity: .6;
+      color: #00ac89;
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-end;
+      align-items: center;
+      .detaileDot {
+        display: inline-block;
+        width: 6px;
+        height: 6px;
+        background: #00ac89;
+        border-radius: 50%;
+        margin-right: 7px;
+      }
+    }
+    // }
+  }
+}

src/views/videoDetailList/modals/videoDetailItem/index.tsx

@@ -0,0 +1,100 @@
+import { defineComponent, toRefs, reactive, onMounted, ref, watch } from 'vue'
+
+import classes from './index.module.less'
+import detaile from './images/detaile.png'
+import player from '@/components/albumItem/images/player.png'
+import icon from './images/icon.png'
+import { useRouter } from 'vue-router'
+export default defineComponent({
+  name: 'albumItem',
+  emits: ['getDetail'],
+  props: {
+    detail: {
+      type: Object,
+      default: {
+        auditStatus: '',
+        endTime: '',
+        lessonSubject: '',
+        order: '',
+        orderNo: '',
+        page: 0,
+        rows: 0,
+        search: '',
+        sort: '',
+        startTime: '',
+        userId: 0,
+        videoLessonGroupId: 0
+      }
+    },
+    isFull: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(props, conent) {
+    const state = reactive({
+      detail: props.detail,
+      isFull: props.isFull
+    })
+    watch(
+      () => props.detail,
+      detail => {
+        state.detail = detail
+      }
+    )
+    const router = useRouter()
+    const gotoVideoDetail = () => {
+      if (state.isFull) {
+        conent.emit('getDetail', state.detail.id)
+      }
+      router.push({ path: '/videoDetail', query: { id: state.detail.id } })
+    }
+    return () => (
+      <>
+        <div
+          class={[classes.itemWrap, state.isFull ? classes.isFull : '']}
+          onClick={gotoVideoDetail}
+        >
+          <div class={classes.detaileWrap}>
+          <div class={classes.masker}>
+              <img src={player} alt="" />
+            </div>
+            {/* <p class={classes.detaileStudy}>
+              <span class={classes.detaileDot}></span>
+              {state.detail.countStudent}人在学
+            </p> */}
+            <img
+              src={
+                state.detail.lessonCoverUrl
+                  ? state.detail.lessonCoverUrl
+                  : detaile
+              }
+              alt=""
+              class={classes.detaile}
+            />
+          </div>
+          <div class={classes.infoBottom}>
+            <div class={classes.infoBottomL}>
+              <img src={icon} class={classes.itemHead} alt="" />
+              <span class={classes.itemTitle}>{state.detail.username}</span>
+            </div>
+            <span class={classes.course}>{state.detail.lessonCount}课时</span>
+          </div>
+          <div class={classes.itemBottom}>
+            <div class={classes.itemBottomL}>
+              <span class={classes.itemTitle}>{state.detail.lessonSubjectName}</span>
+              {/* <div class={classes.line}></div> */}
+            </div>
+            {/* <div class={classes.itemBottomR}>
+              了解更多
+            </div> */}
+            <p class={classes.detaileStudy}>
+              <span class={classes.detaileDot}></span>
+              {state.detail.countStudent}人在学
+            </p>
+          </div>
+        </div>
+      </>
+    )
+  }
+})

src/views/videoDetailList/videoDetail.tsx

@@ -10,10 +10,11 @@ import {
 // import classes from './index.module.less'
 import detaile from '@/components/videoDetailItem/images/detaile.png'
 import videoCourseItem from './modals/videoCourseItem'
-import courseIcon from './images/courseIcon.png'
+// from './images/courseIcon.png'
+import courseIcon from '@/views/home/images/titleDot.png'
 import peopleIcon from './images/peopleIcon.png'
 import teacherIcon from './images/teacherIcon.png'
-import player from './images/player.png'
+import player from '@/components/albumItem/images/player.png'
 import teacher from './images/teacher.png'
 import teacherHeader from '@/common/images/icon_teacher.png'
 import musiceIcon from './images/musiceIcon.png'
@@ -26,6 +27,8 @@ import pagination from '@/components/pagination'
 import { useRoute } from 'vue-router'
 import { getUserInfo, getUserType, getAuth } from '@/helpers/utils'
 import showVideoDetail from './modals/showVideoDetail'
+import bookIcon from './images/bookIcon.png'
+import tree from './images/tree.png'
 import { ElDialog } from 'element-plus'
 export default defineComponent({
   name: 'videoDetailList',
@@ -83,7 +86,8 @@ export default defineComponent({
       },
       userType: '',
       showVideoDetail: false,
-      activeItem: null as any
+      activeItem: null as any,
+      styleList:[]as any
     })
 
     const route = useRoute()
@@ -117,10 +121,12 @@ export default defineComponent({
           }
         )
         state.videoDetail = { ...res.data.lessonGroup }
+        // state.styleList = {...res.data.detailList}
         const teacherRes = await request.get(
           `/api-website/open/teacher/detail/${res.data.lessonGroup.teacherId}`
         )
         state.teacherDetail = { ...teacherRes.data }
+        state.teacherDetail.styleList = [...res.data.detailList]
       } catch (e) {}
     }
 
@@ -182,7 +188,7 @@ export default defineComponent({
     })
     return () => (
       <>
-        <div>
+        <div class={styles.allWrap}>
           <div class="wall" style={{ height: '70px' }}></div>
           <div class={[styles.w1200, styles.detailWrap]}>
             <div class={styles.detailLeft}>
@@ -195,11 +201,24 @@ export default defineComponent({
                 class={styles.detailTopImg}
                 alt=""
               />
+              <div class={styles.courseDetailWrap}>
+                <p class={styles.courseDetailTitle}>
+                  <span>{state.videoDetail.lessonName}</span>{' '}
+                  <div class={styles.courseTitleR}>
+                    <img src={bookIcon} alt="" />
+                    <span>{state.videoDetail.countStudent}人在学</span>
+                  </div>
+                </p>
+              </div>
+              <div class={styles.tag}>
+                {state.videoDetail.lessonSubjectName}
+              </div>
               <div class={styles.courseWrap}>
                 <div class={styles.courseTitle}>
-                  <img src={courseIcon} alt="" />
                   <span>课程介绍</span>
+                  <img src={courseIcon} alt="" />
                 </div>
+
                 <div class={styles.courseInfo}>
                   <p>{state.videoDetail.lessonDesc}</p>
                 </div>
@@ -207,12 +226,13 @@ export default defineComponent({
                 <div class={styles.courseListWrap}>
                   <div class={styles.courseTitle}>
                     <div class={styles.courseTitleLeft}>
-                      <img src={TimetableIcon} alt="" />
                       <span>课程列表</span>
+                      <img src={courseIcon} alt="" />
                     </div>
-                    <span class={styles.courseTitlTimer}>
-                      共{state.videoDetail.lessonCount}课时
-                    </span>
+                    <p class={styles.courseTitlTimer}>
+                      <img src={tree} alt="" />
+                      <span> 共{state.videoDetail.lessonCount}课时</span>
+                    </p>
                   </div>
                   {state.videoList.map(item => {
                     return <videoCourseItem item={item}></videoCourseItem>
@@ -229,74 +249,55 @@ export default defineComponent({
             </div>
             <div class={styles.detailRight}>
               <div class={styles.teacherInfo}>
-                <div class={styles.teacherHeadWrap}>
-                  <div class={styles.teacherHeadLeft}>
-                    <img
-                      src={
-                        state.videoDetail.avatar
-                          ? state.videoDetail.avatar
-                          : teacherHeader
-                      }
-                      alt=""
-                      class={styles.teacherHeader}
-                    />
-                    <div class={styles.teacherHeadInfo}>
-                      <div class={styles.teacherHeadName}>
-                        <span>{state.videoDetail.username}</span>
-                        {/* {state.teacherDetail.teacherType &&
-                        state.teacherDetail.teacherType.indexOf('ENTRY') ==
-                          -1 ? (
-                          ''
-                        ) : (
-                          <img
-                            src={teacher}
-                            class={styles.teacherIcon}
-                            alt=""
-                          />
-                        )}
-                        {state.teacherDetail.teacherType &&
-                        state.teacherDetail.teacherType.indexOf('MUSICIAN') ==
-                          -1 ? (
-                          ''
-                        ) : (
-                          <img
-                            src={musiceIcon}
-                            class={styles.teacherIcon}
-                            alt=""
-                          />
-                        )} */}
+                <div  class={styles.teacherTopInfo}>
+                  <div class={styles.teacherHeadWrap}>
+                    <div class={styles.teacherHeadLeft}>
+                      <img
+                        src={
+                          state.videoDetail.avatar
+                            ? state.videoDetail.avatar
+                            : teacherHeader
+                        }
+                        alt=""
+                        class={styles.teacherHeader}
+                      />
+                      <div class={styles.teacherHeadInfo}>
+                        <div class={styles.teacherHeadName}>
+                          <span>{state.videoDetail.username}</span>
+                          {state.userType == 'STUDENT' ? (
+                            <div
+                              class={[
+                                styles.teacherHeadRight,
+                                state.teacherDetail.isStar ? styles.isStart : ''
+                              ]}
+                              onClick={() => followVideo()}
+                            >
+                              {state.teacherDetail.isStar ? '已关注' : '+ 关注'}
+                            </div>
+                          ) : null}
+                        </div>
                       </div>
-                      <p class={styles.fens}>
-                        粉丝 <span>{state.teacherDetail.fansNum}</span>
-                      </p>
                     </div>
                   </div>
-                  {state.userType == 'STUDENT' ? (
-                    <div
-                      class={[
-                        styles.teacherHeadRight,
-                        state.teacherDetail.isStar ? styles.isStart : ''
-                      ]}
-                      onClick={() => followVideo()}
-                    >
-                      {state.teacherDetail.isStar ? '已关注' : '关注'}
-                    </div>
-                  ) : null}
+                  <div>
+                    <p class={styles.fensNum}>{state.teacherDetail.fansNum}</p>
+                    <p class={styles.fens}>粉丝数</p>
+                  </div>
                 </div>
                 <div class={styles.titleWrap}>
-                  <img src={peopleIcon} alt="" />
+                  {/* <img src={peopleIcon} alt="" /> */}
                   <span>个人介绍</span>
                 </div>
                 <p class={styles.teacherDetail}>
                   {state.teacherDetail.introduction}
                 </p>
                 <div class={styles.titleWrap}>
-                  <img src={teacherIcon} alt="" />
+                  {/* <img src={teacherIcon} alt="" /> */}
                   <span>老师风采</span>
                 </div>
                 <div class={styles.teacherVideoList}>
-                  {state.teacherDetail.styleVideo &&
-                    state.teacherDetail.styleVideo.map((item: any) => {
+                  {state.teacherDetail.styleList &&
+                    state.teacherDetail.styleList.map((item: any) => {
                       return (
                         <div
                           class={styles.videoItem}
@@ -308,11 +309,12 @@ export default defineComponent({
                             src={item.videoUrl}
                             class={styles.videoItemVideo}
                           /> */}
-                          <video
+                          {/* <video
                             class={styles.videoItemVideo}
                             src={item.videoUrl}
                             controls={false}
-                          ></video>
+                          ></video> */}
+                          <img  class={styles.videoItemVideo} src={item.coverUrl} alt="" />
                           <img src={player} alt="" class={styles.player} />
                         </div>
                       )
@@ -345,7 +347,7 @@ export default defineComponent({
             </div>
           </div>
           <ElDialog
-          title='个人风采'
+            title="个人风采"
             modelValue={state.showVideoDetail}
             onUpdate:modelValue={val => (state.showVideoDetail = val)}
             closeOnClickModal={true}