提交

1

src/components/albumItem/index.module.less

@@ -5,29 +5,32 @@
   }
   margin-bottom: 28px;
   margin-right: 26px;
-  border-radius: 4px;
-  overflow: hidden;
+
+
   h2 {
     line-height: 30px;
-    font-size: 22px;
-    font-weight: 500;
-    color: #000000;
+    font-size: 18px;
+    font-weight: 600;
+    color: #333;
     line-height: 30px;
     margin: 6px 0;
+    overflow: hidden;
   }
   .hold {
     width: 219px;
+    height: 219px;
+    border-radius: 4px;
   }
   span {
     color: #999;
-    font-size: 18px;
+    font-size: 14px;
   }
   .itemBottom {
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
     img {
-      width: 19px;
+      width: 18px;
       margin-right: 4px;
       // height: 18px;
     }
@@ -39,6 +42,7 @@
       flex-direction: row;
       justify-content: flex-start;
       align-items: center;
+      font-size: 14px;
     }
   }
 }

src/components/banner/index.module.less

@@ -19,7 +19,7 @@
     width: 40px;
     height: 72px;
     background: rgba(0, 0, 0, 0.26);
-    border-radius: 20px;
+    border-radius: 8px;
     position: absolute;
     z-index: 100;
     position: absolute;

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

@@ -1,4 +1,6 @@
-
+:root {
+  --plyr-color-main:#1FF0C9;
+}
 .video-container {
   width: 100%;
   border: 1px solid var(--next-border-color-light);
@@ -13,6 +15,8 @@
   }
 }
 :global {
+
+
   .plyr__poster {
     background-size: cover;
   }

src/components/hotSearch/index.module.less

@@ -1,5 +1,5 @@
 .wrap {
-  margin-top: 20px;
+  // margin-top: 20px;
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -10,7 +10,7 @@
     align-items: center;
     .hotIcon {
       width: 24px;
-      height: 28px;
+      height: 24px;
       margin-right: 10px;
     }
     .tagWrap {
@@ -41,13 +41,13 @@
   .searchWrap {
     cursor: pointer;
     span {
-      color: #000 !important;
+      color: #666 !important;
       line-height: 28px;
     }
     .search {
-      width: 28px;
-      height: 28px;
-      margin-left: 8px;
+      width: 24px;
+      height: 24px;
+      margin-left: 6px;
     }
   }
 }

src/components/musicLIstItem/index.module.less

@@ -11,7 +11,7 @@
   --music-list-item-charge-bg: #e1f0ff;
   --music-list-item-charge-color: #0086ff;
 
-  height: 94px;
+  height: 78px;
   background: #ffffff;
   border-radius: 12px;
   display: flex;
@@ -20,15 +20,16 @@
   width: 100%;
   border-radius: 12px;
   margin-bottom: 10px;
-  padding: 14px 16px;
+  padding: 10px 12px;
+  cursor: pointer;
   .left {
     display: flex;
     flex-direction: row;
     align-items: center;
     .imgWrap {
-      width: 62px;
-      height: 62px;
-      margin-right: 18px;
+      width: 58px;
+      height: 58px;
+      margin-right: 20px;
     }
     .textWrap {
       p {
@@ -36,11 +37,12 @@
         color: #333333;
         line-height: 22px;
         font-size: 16px;
-        margin-bottom: 10px;
+        margin-bottom: 7px;
         span {
           font-weight: 400;
           color: #6a6a6a;
           margin-left: 10px;
+          font-size: 14px;
         }
       }
       .authorInfo {
@@ -48,8 +50,8 @@
         flex-direction: row;
         align-items: center;
         .icon {
-          width: 20px;
-          height: 20px;
+          width: 18px;
+          height: 18px;
           border-radius: 27px;
           margin-right: 6px;
         }

src/components/tagItem/index.module.less

@@ -1,11 +1,12 @@
 .tag {
   cursor: pointer;
   color: #2dc7aa;
-  line-height: 28px;
+  line-height: 24px;
   background: #e9f6f4;
-  border-radius: 6px;
+  border-radius: 4px;
   border: 1px solid #2dc7aa;
-  padding: 0 14px;
+  padding: 0 12px;
+  font-size: 13px;
   margin-right: 12px;
   &:last-child{
     margin-right: 0!important;

src/components/tagItem/index.tsx

@@ -21,7 +21,7 @@ export default defineComponent({
     }
     return () => (
       <>
-        <ElTag size="large" onClick={()=>shioseTag(state.title)} class={classes.tag}>{state.title}</ElTag>
+        <ElTag  onClick={()=>shioseTag(state.title)} class={classes.tag}>{state.title}</ElTag>
       </>
     )
   }

src/components/videoDetailItem/index.module.less

@@ -2,10 +2,10 @@
   width: 100%!important;
   .detaile {
     width: 100%!important;
-    height: 225px!important;
+    height:187px!important;
     img {
       width: 100%!important;
-      height: 225px!important;
+      height: 187px!important;
     }
   }
 }

src/views/albumDetail/index.module.less

@@ -18,11 +18,11 @@
       .albumInfoTopImg {
         position: relative;
         width: 240px;
-        height: 218px;
+        height: 226px;
         margin-right: 22px;
         .albumCover {
-          width: 218px;
-          height: 218px;
+          width: 226px;
+          height: 226px;
           position: absolute;
           z-index: 100;
           background-color: #fff;
@@ -51,7 +51,7 @@
           font-weight: 400;
           color: #666666;
           line-height: 28px;
-          width: 466px;
+          width: 504px;
           overflow: hidden;
           text-overflow: ellipsis;
           word-wrap: break-word;
@@ -69,7 +69,7 @@
     }
     .albumInfoBottom {
       font-size: 18px;
-      color: #000;
+      color: #666;
       margin-top: 30px;
       display: flex;
       flex-direction: row;
@@ -77,9 +77,10 @@
       .albumInfoLeft {
         display: flex;
         flex-direction: row;
-        font-size: 18px;
+        font-size: 16px;
         img {
-          width: 23px;
+          width: 22px;
+          height: 22px;
           margin-right: 6px;
           // height: 18px;
         }
@@ -114,7 +115,7 @@
     .title {
       line-height: 48px;
       font-size: 20px;
-      font-weight: 500;
+      font-weight: 600;
       color: #000000;
       display: flex;
       flex-direction: row;
@@ -135,7 +136,7 @@
     margin-left: 14px;
     width: 100%;
     .some {
-      padding: 20px 24px;
+      padding: 20px;
       background-color: #fff;
       margin-bottom: 14px;
       .someTitle {
@@ -162,11 +163,12 @@
           display: flex;
           flex-direction: row;
           align-items: center;
-          font-size: 18px;
+          font-size: 16px;
           color: #666;
           .arrow {
             width: 16px;
             height: 16px;
+            margin-left: 4px;
           }
         }
       }

src/views/albumDetail/index.tsx

@@ -36,7 +36,7 @@ export default defineComponent({
       musicList: [],
       pageInfo: {
         // 分页规则
-        limit: 12, // 限制显示条数
+        limit: 10, // 限制显示条数
         page: 1, // 当前页
         total: 0, // 总条数
         page_size: [10, 20, 40, 50] // 选择限制显示条数
@@ -45,6 +45,7 @@ export default defineComponent({
       userType: ''
     })
     const route = useRoute()
+    const router = useRouter()
     const getList = async () => {
       try {
         const res = await request.post('/api-website/open/music/album/detail', {
@@ -87,6 +88,10 @@ export default defineComponent({
       state.id = id as string
       getList()
     }
+
+    const gotoMore = ()=>{
+      router.push({path:'/searchdetail'})
+    }
     return () => (
       <>
         <div class={classes.wall}></div>
@@ -169,7 +174,7 @@ export default defineComponent({
                   <img src={somePan} alt="" />
                   <span>相关专辑</span>
                 </div>
-                <div class={classes.tilteR}>
+                <div class={classes.tilteR} onClick={()=>{gotoMore()}}>
                   <span>更多</span>
                   <img class={classes.arrow} src={arrow} alt="" />
                 </div>
@@ -190,7 +195,7 @@ export default defineComponent({
                   <img src={hot} alt="" />
                   <span>热门专辑</span>
                 </div>
-                <div class={classes.tilteR}>
+                <div class={classes.tilteR} onClick={()=>{gotoMore()}}>
                   <span>更多</span>
                   <img class={classes.arrow} src={arrow} alt="" />
                 </div>

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

@@ -3,23 +3,23 @@
   &:nth-child(2n){
     margin-right: 0;
   }
-  margin-bottom: 28px;
-  margin-right: 14px;
+  margin-bottom: 19px;
+  margin-right: 18px;
   border-radius: 4px;
   overflow: hidden;
   h2 {
     line-height: 25px;
-    font-size: 18px;
+    font-size: 16px;
     font-weight: 500;
     color: #000000;
-    margin: 6px 0 0;
+    margin: 8px 0 0;
   }
   .hold {
-    width: 168px;
+    width: 151px;
   }
   span {
     color: #999;
-    font-size: 18px;
+    font-size: 16px;
   }
   .itemBottom {
     display: flex;

src/views/home/index.module.less

@@ -17,12 +17,12 @@
     align-items: center;
     justify-content: center;
     .dotImg {
-      width: 54px;
-      height: 54px;
+      width: 44px;
+      height: 44px;
     }
     h4 {
       margin: 0 10px;
-      font-size: 32px;
+      font-size: 28px;
       font-weight: 600;
       color: #333333;
       line-height: 45px;
@@ -49,9 +49,9 @@
     align-items: center;
     justify-content: space-between;
     h5 {
-      font-size: 22px;
-      font-weight: 500;
-      color: #000000;
+      font-size: 20px;
+      font-weight: 600;
+      color: #333;
       line-height: 30px;
     }
     .wrapRight {
@@ -59,6 +59,7 @@
       flex-direction: row;
       cursor: pointer;
       span {
+        font-size: 16px;
         color: #666;
       }
       .arrow {
@@ -69,3 +70,10 @@
     }
   }
 }
+.mb48 {
+  margin-bottom: 48px!important;
+}
+.mb32 {
+  margin-bottom: 32px!important;
+}
+

src/views/home/index.tsx

@@ -82,7 +82,7 @@ export default defineComponent({
         <div class="bg-white">
           <div class={styles.w1200}>
             <div class={styles.section}>
-              <div class={styles.titleWrap}>
+              <div class={[styles.titleWrap,styles.mb48]}>
                 <img src={titleDot} class={styles.dotImg} alt="" />
                 <h4>热门专辑</h4>
                 <img src={titleDot} class={styles.dotImg} alt="" />
@@ -99,7 +99,7 @@ export default defineComponent({
         <div>
           <div class={styles.w1200}>
             <div class={styles.section}>
-              <div class={styles.titleWrap}>
+              <div class={[styles.titleWrap,styles.mb32]}>
                 <img src={titleDot} class={styles.dotImg} alt="" />
                 <h4>精品视频课</h4>
                 <img src={titleDot} class={styles.dotImg} alt="" />

src/views/musicLibrary/index.module.less

@@ -8,26 +8,38 @@
   font-size: 20px;
   color: red;
 }
+
 .w1200 {
   width: 1200px !important;
   margin: 0 auto;
-  :global {
-    .el-tabs__item {
-      font-size: 22px;
-      margin-bottom: 14px;
-    }
-    .el-tabs__active-bar {
-      height: 6px;
-      background: #2dc7aa;
-      border-radius: 3px;
-    }
-    .el-tabs__header {
-      margin: 0!important;
+  .myTabWrap {
+    :global {
+      margin-top: 28px;
+      font-size: 20px;
+
+      .el-tabs__item {
+        font-size: 20px;
+        margin-bottom: 8px;
+      }
+      .el-tabs__item.is-active{
+        font-weight: bold;
+      }
+      .el-tabs__active-bar {
+        height: 4px;
+        background: #2dc7aa;
+        border-radius: 3px;
+
+      }
+      .el-tabs__header {
+        margin: 0 !important;
+      }
     }
   }
-
 }
 .section {
+  .hotSearch {
+    margin-top: 17px;
+  }
   .hotAlbum {
     margin-top: 37px;
     font-size: 22px;
@@ -97,8 +109,3 @@
     }
   }
 }
-
-.myTab {
-  margin-top: 28px;
-  font-size: 20px;
-}

src/views/musicLibrary/searchdetail.tsx

@@ -1,5 +1,12 @@
 // import { PaperClipIcon } from '@heroicons/vue/solid'
-import { defineComponent, toRefs, reactive, onMounted, ref ,nextTick} from 'vue'
+import {
+  defineComponent,
+  toRefs,
+  reactive,
+  onMounted,
+  ref,
+  nextTick
+} from 'vue'
 import arrow from '@/components/musicLIstItem/images/arrow.png'
 import styles from './index.module.less'
 import hotSearch from '@/components/hotSearch'
@@ -29,10 +36,10 @@ export default defineComponent({
       albumList: [],
       musicList: [],
       chiose: 'album',
-      searchs:{
-        albumTagIds:'',
-        search:'',
-        subject:''
+      searchs: {
+        albumTagIds: '',
+        search: '',
+        subject: ''
       }
     })
     const route = useRoute()
@@ -69,35 +76,35 @@ export default defineComponent({
     //     console.log(e)
     //   }
     // }
-    const searchRust = (val:any)=>{
+    const searchRust = (val: any) => {
       state.searchs.albumTagIds = val.join(',') as string
       startSearch(state.searchs)
     }
-    const startSearch = (val:any)=>{
-     state.searchs = {...state.searchs,...val}
-     search()
+    const startSearch = (val: any) => {
+      state.searchs = { ...state.searchs, ...val }
+      search()
     }
 
-    const search = ()=>{
-      if(state.chiose == 'album'){
-       searchAlbumRef.value.getList(state.searchs)
+    const search = () => {
+      if (state.chiose == 'album') {
+        searchAlbumRef.value.getList(state.searchs)
       }
-      if(state.chiose == 'music' ){
+      if (state.chiose == 'music') {
         searchMusicRef.value.getList(state.searchs)
       }
     }
     onMounted(() => {
-      if(route.query.search){
+      if (route.query.search) {
         state.searchs.search = route.query.search as string
       }
-      if(route.query.subject){
+      if (route.query.subject) {
         state.searchs.subject = route.query.subject as string
       }
-      if(route.query.type){
+      if (route.query.type) {
         state.chiose = route.query.type as string
       }
-      console.log( state.chiose,'chiose')
-      nextTick(()=>{
+      console.log(state.chiose, 'chiose')
+      nextTick(() => {
         search()
       })
 
@@ -112,23 +119,43 @@ export default defineComponent({
       searchMusicRef
     }
   },
-    render() {
-    return  (
+  render() {
+    return (
       <div>
         <div class="">
           <div class="wall" style={{ height: '70px' }}></div>
           <div class={styles.w1200}>
             <div class={styles.section}>
-              <searchInput isWhile={true} searchVal={{...this.searchs}} onStartSearch={(val:any)=>{this.startSearch(val)}}></searchInput>
-              <hotSearch type={'search'} onSearchRust={(val:any)=>this.searchRust(val)} onHotTag={(val:string)=>{this.searchs.search = val}} ></hotSearch>
-              <ElTabs class={styles.myTab} v-model={this.chiose}>
-                <ElTabPane label="专辑" name="album">
-                  {this.chiose == 'album' ? <searchAlbum ref='searchAlbumRef'/> : null}
-                </ElTabPane>
-                <ElTabPane label="乐谱" name="music">
-                  {this.chiose == 'music' ? <searchMusic ref='searchMusicRef'/> : null}
-                </ElTabPane>
-              </ElTabs>
+              <searchInput
+                isWhile={true}
+                searchVal={{ ...this.searchs }}
+                onStartSearch={(val: any) => {
+                  this.startSearch(val)
+                }}
+              ></searchInput>
+              <div class={styles.hotSearch}>
+                <hotSearch
+                  type={'search'}
+                  onSearchRust={(val: any) => this.searchRust(val)}
+                  onHotTag={(val: string) => {
+                    this.searchs.search = val
+                  }}
+                ></hotSearch>
+              </div>
+              <div class={styles.myTabWrap}>
+                <ElTabs class={styles.myTab} v-model={this.chiose}>
+                  <ElTabPane label="专辑" name="album">
+                    {this.chiose == 'album' ? (
+                      <searchAlbum ref="searchAlbumRef" />
+                    ) : null}
+                  </ElTabPane>
+                  <ElTabPane label="乐谱" name="music">
+                    {this.chiose == 'music' ? (
+                      <searchMusic ref="searchMusicRef" />
+                    ) : null}
+                  </ElTabPane>
+                </ElTabs>
+              </div>
             </div>
           </div>
         </div>

src/views/videoDetailList/index.module.less

@@ -13,12 +13,14 @@
   display: flex;
   flex-direction: row;
   .detailLeft {
-    width: 690px;
+    width: 826px;
     margin-right: 16px;
-    background-color: #fff;
+
     .detailTopImg {
-      width: 690px;
-      margin-bottom: 20px;
+      background-color: #fff;
+      width: 826px;
+      height: 463px;
+      margin-bottom: 14px;
     }
   }
 }
@@ -29,14 +31,14 @@
     display: flex;
     flex-direction: row;
     align-items: center;
-    font-size: 20px;
+    font-size: 18px;
     font-family: PingFangSC-Medium, PingFang SC;
-    font-weight: 500;
+    font-weight: 600;
     color: #000000;
     line-height: 28px;
     img {
-      width: 26px;
-      height: 26px;
+      width: 22px;
+      height: 22px;
       margin-right: 8px;
     }
   }
@@ -45,7 +47,7 @@
     padding-bottom: 20px;
     border-bottom: 1px solid #f0f0f0;
     p {
-      font-size: 20px;
+      font-size: 18px;
       font-weight: 400;
       color: #666666;
       line-height: 28px;
@@ -65,22 +67,22 @@
       display: flex;
       flex-direction: row;
       justify-content: flex-start;
-      font-size: 20px;
+      font-size: 18px;
       font-family: PingFangSC-Medium, PingFang SC;
-      font-weight: 500;
+      font-weight: 600;
       color: #000000;
       line-height: 28px;
       align-items: center;
       img {
-        width: 26px;
-        height: 26px;
+        width: 22px;
+        height: 22px;
         margin-right: 8px;
       }
     }
     .courseTitlTimer {
-      font-size: 20px;
+      font-size: 16px;
       font-family: PingFangSC-Medium, PingFang SC;
-      font-weight: 500;
+      font-weight: 600;
       color: #2dc7aa;
       line-height: 28px;
     }
@@ -88,9 +90,9 @@
 }
 
 .detailRight {
-  width: 494px;
+  width: 360px;
   .teacherInfo {
-    padding: 20px;
+    padding: 18px 16px;
     background-color: #fff;
     .teacherHeadWrap {
       display: flex;
@@ -102,22 +104,22 @@
         flex-direction: row;
         align-items: center;
         .teacherHeader {
-          width: 54px;
-          height: 54px;
+          width: 50px;
+          height: 50px;
           border-radius: 50%;
           overflow: hidden;
-          margin-right: 16px;
+          margin-right: 10px;
         }
         .teacherHeadName {
           padding-top: 2px;
           display: flex;
           flex-direction: row;
           align-items: center;
-          font-size: 20px;
+          font-size: 18px;
           font-family: PingFangSC-Semibold, PingFang SC;
           font-weight: 600;
           color: #000000;
-          line-height: 28px;
+          line-height: 25px;
           span {
             margin-right: 12px;
           }
@@ -128,7 +130,7 @@
           }
         }
         .fens {
-          font-size: 16px;
+          font-size: 14px;
           font-family: PingFangSC-Regular, PingFang SC;
           font-weight: 400;
           color: #999999;
@@ -184,8 +186,9 @@
       justify-content: flex-start;
       margin-top: 20px;
       padding-bottom: 12px;
+      font-size: 16px;
       span {
-        font-size: 20px;
+        font-size: 16px;
         color: #000;
         line-height: 28px;
         font-weight: 600;
@@ -193,11 +196,11 @@
       img {
         width: 24px;
         height: 24px;
-        margin-right: 10px;
+        margin-right: 6px;
       }
     }
     .teacherDetail {
-      font-size: 18px;
+      font-size: 16px;
       font-family: PingFangSC-Regular, PingFang SC;
       font-weight: 400;
       color: #666666;
@@ -208,18 +211,19 @@
       flex-direction: row;
       flex-wrap: wrap;
       .videoItem {
+        cursor: pointer;
         .Styles {
-          width: 218px;
-          height: 145px;
+          width: 159px;
+          height: 89px;
         }
         .videoItemVideo {
-          width: 218px;
-          height: 145px;
+          width: 159px;
+          height: 89px;
         }
-        margin-right: 18px;
+        margin-right: 9px;
         margin-bottom: 12px;
-        width: 218px;
-        height: 145px;
+        width: 159px;
+        height: 89px;
         position: relative;
         &:nth-child(2n) {
           margin-right: 0;
@@ -228,11 +232,11 @@
     }
   }
   .otherCourse {
-    margin-top: 18px;
-    padding: 16px 20px 22px;
+    margin-top: 14px;
+    padding: 16px 14px 10px;
     background-color: #fff;
     h2 {
-      font-size: 22px;
+      font-size: 16px;
       font-family: PingFangSC-Semibold, PingFang SC;
       font-weight: 600;
       color: #000000;

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

@@ -0,0 +1,4 @@
+.wrap {
+  // width: 800px;
+
+}

src/views/videoDetailList/modals/showVideoDetail.tsx

@@ -0,0 +1,48 @@
+import { defineComponent, toRefs, reactive, onMounted, ref, watch } from 'vue'
+import player from '../images/player.png'
+import classes from './showVideoDetail.module.less'
+import detaile from '@/components/videoDetailItem/images/detaile.png'
+import { ElDialog, ElButton } from 'element-plus'
+import QrcodeVue from 'qrcode.vue'
+import register_bg from '@/views/login/images/register_bg.png'
+import colVideo from '@/components/col-video/index'
+export default defineComponent({
+  name: 'downModel',
+  emits: ['close'],
+  props: {
+    item: {
+      type: Object,
+      default: {}
+    }
+  },
+  components: {
+    QrcodeVue,
+    colVideo
+  },
+  setup(props, conent) {
+    const state = reactive({
+      item: props.item as any
+    })
+    watch(
+      () => props.item,
+      item => {
+        state.item = item
+      }
+    )
+    const onClose = () => {
+      conent.emit('close')
+    }
+    return () => (
+      <>
+        {/*   styleValue={{ with: '159px', height: '89px' }} */}
+        <div class={classes.wrap}>
+          <colVideo
+            controls={false}
+            src={state.item.videoUrl}
+            class={classes.videoItemVideo}
+          />
+        </div>
+      </>
+    )
+  }
+})

src/views/videoDetailList/videoDetail.tsx

@@ -25,6 +25,8 @@ import request from '@/helpers/request'
 import pagination from '@/components/pagination'
 import { useRoute } from 'vue-router'
 import { getUserInfo, getUserType, getAuth } from '@/helpers/utils'
+import showVideoDetail from './modals/showVideoDetail'
+import { ElDialog } from 'element-plus'
 export default defineComponent({
   name: 'videoDetailList',
   props: {
@@ -37,7 +39,8 @@ export default defineComponent({
     videoDetailItem,
     videoCourseItem,
     pagination,
-    colVideo
+    colVideo,
+    showVideoDetail
   },
   setup(props, conent) {
     const state = reactive({
@@ -78,7 +81,9 @@ export default defineComponent({
         total: 0, // 总条数
         page_size: [5, 20, 40, 50] // 选择限制显示条数
       },
-      userType: ''
+      userType: '',
+      showVideoDetail:false,
+      activeItem:null as any
     })
 
     const route = useRoute()
@@ -164,6 +169,10 @@ export default defineComponent({
         console.log(e)
       }
     }
+    const openVideo = (item:any)=>{
+      state.activeItem = item;
+      state.showVideoDetail = true;
+    }
     onMounted(() => {
       if (route.query.id) {
         state.id = route.query.id as string
@@ -234,7 +243,7 @@ export default defineComponent({
                     <div class={styles.teacherHeadInfo}>
                       <div class={styles.teacherHeadName}>
                         <span>{state.videoDetail.username}</span>
-                        {state.teacherDetail.teacherType &&
+                        {/* {state.teacherDetail.teacherType &&
                         state.teacherDetail.teacherType.indexOf('ENTRY') ==
                           -1 ? (
                           ''
@@ -255,7 +264,7 @@ export default defineComponent({
                             class={styles.teacherIcon}
                             alt=""
                           />
-                        )}
+                        )} */}
                       </div>
                       <p class={styles.fens}>
                         粉丝 <span>{state.teacherDetail.fansNum}</span>
@@ -289,15 +298,15 @@ export default defineComponent({
                   {state.teacherDetail.styleVideo &&
                     state.teacherDetail.styleVideo.map((item: any) => {
                       return (
-                        <div class={styles.videoItem}>
-                          <colVideo
-                            styleValue={{ with: '218px', height: '145px' }}
-                            controls={true}
+                        <div class={styles.videoItem} onClick={()=>openVideo(item)}>
+                          {/* <colVideo
+                            styleValue={{ with: '159px', height: '89px' }}
+                            controls={false}
                             src={item.videoUrl}
                             class={styles.videoItemVideo}
-                          />
-
-                          {/* <img src={player} alt="" class={styles.player} /> */}
+                          /> */}
+                          <video  class={styles.videoItemVideo}   src={item.videoUrl} controls={false}></video>
+                          <img src={player} alt="" class={styles.player} />
                         </div>
                       )
                     })}
@@ -328,6 +337,14 @@ export default defineComponent({
               </div>
             </div>
           </div>
+          <ElDialog
+            modelValue={state.showVideoDetail}
+            onUpdate:modelValue={val => (state.showVideoDetail = val)}
+            closeOnClickModal={true}
+            closeOnPressEscape={false}
+          >
+            <showVideoDetail item={state.activeItem} onClose={()=>state.showVideoDetail = false}></showVideoDetail>
+          </ElDialog>
         </div>
       </>
     )