update

src/components/Educationvideo.vue

@@ -2,7 +2,7 @@
 <template>
   <div class="Educationvideo">
     <div class="left">
-        <ul class="lineUl" style="margin-top:62px">
+        <ul class="lineUl" style="margin-top:64px">
             <li @click="SelectLineId(-1)" :class="msg.LineId ==-1 ? 'Active' : ''">
                 不限
             </li>
@@ -25,16 +25,27 @@
                     <div @click.prevent="goUrl('EducationvideoSee',item)" class="imgDiv">
                         <img v-if="item.Cover && item.Cover!=''" :onerror="defaultImg" style="height:195px;width:100%" :src="item.Cover" alt="">
                         <img v-else style="height:195px;width:100%" src="../assets/img/hotel/biefu.png" alt="">
+                        <div class="backDiv">
+                          <span class="iconfont icon-ico_bofang"></span>
                           <div @click.prevent="goUrl1('EducationvideoList',$event)" class="icon">
                               <span class="iconfont icon-weihu"></span>
                           </div>
                         </div>
-                    <p>{{item.Name}}</p>
-                    <p>{{item.EmName}}</p>
-                    <p>{{item.WatchNum}}次观看
+                        
+                    </div>
+                    <div class="contentDiv">
+                        <img v-if="item.EmPhoto && item.EmPhoto!=''" :src="item.EmPhoto" alt="">
+                        <img v-else src="../assets/img/default.png" alt="">
+                        <div class="DesDiv">
+                          <p style="font-size:14px" class="bold">{{item.Name}}</p>
+                          <p class="wryh" style="color:#aaaaaa">{{item.EmName}}</p>
+                          <p class="wryh" style="color:#aaaaaa">{{item.WatchNum}}次观看
                               <span class="circle"></span>    
                               <span>{{item.UpdateDate}}</span>    
                           </p>
+                        </div>
+                    </div>
+                    
                 </li>
             </ul>
             <div v-if="dataList.length==0" style="text-align:center;padding-top:40px">
@@ -45,6 +56,12 @@
             </el-pagination> 
         </div>
     </div>
+    <div class="videoDiv" v-show="videoDivState">
+      <div style="text-align:right;padding-right:15px;cursor:pointer"><span @click="videoDivState=false" style="font-size:30px;color:#fff" class="iconfont icon-bumenguanli-shanchu"></span></div>
+      <video autoplay="autoplay" width="100%" height="90%" :src="thisVideoAddress" controls="controls"></video>
+    </div>
+    
+
   </div>
 </template>
 
@@ -57,6 +74,8 @@ export default {
   },
   data () {
     return {
+      videoDivState:false,
+      thisVideoAddress:"",
       defaultImg: 'this.src="' + require("../assets/img/bg_z1@2x.png") + '"',
       val:'',
       LineList:[],
@@ -77,6 +96,17 @@ export default {
   mounted() {
     this.getLineList();
     this.getList();
+     window.addEventListener('scroll',function(){
+       console.log("ddocument.documentElement.offsetHeight",document.documentElement.offsetHeight)
+       console.log("ddocument.documentElement.scrollTop",document.documentElement.scrollTop)
+       console.log("window.innerHeight",window.innerHeight)
+      let bottomOfWindow = document.documentElement.offsetHeight - document.documentElement.scrollTop - window.innerHeight <= 200
+       console.log("bottomOfWindow",bottomOfWindow)
+       
+       if(bottomOfWindow) {
+          console.log("滚动到底部")
+       }
+     })
   },
   methods: {
       SelectLineId(id){
@@ -113,15 +143,29 @@ export default {
             }
             });
       },
-      goUrl(path,item){
-          let msg=JSON.stringify(item)
-          this.$router.push({
-            name:path,
-            query: {
-                msg:msg,
-                blank: "y"
+      AddList(id) {
+        this.apipost(
+          "Video_post_SetVideoWatch",{VideoId:id},
+          res => {
+
+            if (res.data.resultCode == 1) {
+
             }
-            });
+          }
+        );
+      },
+      goUrl(path,item){
+        this.videoDivState=true;
+        this.thisVideoAddress=item.VideoAddress;
+        this.AddList(item.Id)
+          // let msg=JSON.stringify(item)
+          // this.$router.push({
+          //   name:path,
+          //   query: {
+          //       msg:msg,
+          //       blank: "y"
+          //   }
+          //   });
       },
     //获取线路列表
       getLineList() {
@@ -141,6 +185,52 @@ export default {
 }
 </script>
 <style>
+.wryh{
+  font-family: '微软雅黑'
+}
+.Educationvideo .right .Content .videoUl li .backDiv{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: rgba(0,0,0,0.3);
+  top: 0;
+}
+
+.Educationvideo .right .Content .videoUl li .imgDiv .icon-ico_bofang{
+  position: absolute;
+  font-size: 36px;
+  color:#fff;
+}
+
+.videoDiv{
+  position: fixed;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 999999999;
+  background: #000;
+}
+.Educationvideo .contentDiv img{
+  width:35px;height:35px;border-radius:50%;
+  position: absolute;
+  
+
+}
+.Educationvideo .contentDiv .DesDiv{
+  padding-left: 45px;
+  box-sizing: border-box;
+  width: 100%;
+}
+.Educationvideo .contentDiv{
+  position: relative;
+  margin-top:5px;
+}
+.Educationvideo .bold{
+  font-family: "pingfangR"
+}
 .Educationvideo .el-pagination.is-background .el-pager li:not(.disabled).active{
   background-color: #f56c6c!important;
 }
@@ -171,7 +261,6 @@ export default {
 }
 .Educationvideo .right .Content .videoUl li p{
     font-size: 12px;
-    color:#666666;
     padding-left:6px;
     box-sizing: border-box;
 }
@@ -183,7 +272,7 @@ export default {
     margin-right: 10px;
 }
   .Educationvideo .right .Content{
-      padding:90px 15px 10px 15px;
+      padding:15px 15px 10px 15px;
       box-sizing: border-box;
   }
 *{
@@ -193,6 +282,7 @@ export default {
  .Educationvideo .left .lineUl .Active{
     color:#fff;
     background: #f56c6c;
+    font-family: "pingfangR";
 }
  .Educationvideo .left .lineUl li:hover{
      background: #f56c6c;
@@ -212,20 +302,20 @@ li{
       padding: 15px 0;
       padding-left: 50px;
       box-sizing: border-box;
-      position: fixed;
-      top: 0;
-      width: calc(100% - 200px);
+      /* position: fixed;
+      top: 50px;
+      width: calc(100% - 200px); */
       background: #fff;
-      left: 200px;
+      /* left: 200px; */
 
   }
  .Educationvideo{
      position: relative;
      min-height: 100%;
-     background: #fff;
+     background: #f5f5f5;
  }
  .Educationvideo .left{
-     position: fixed;
+     position: absolute;
      min-height: 100%;
      width: 200px;
      z-index: 100;
@@ -233,7 +323,7 @@ li{
  }
   .Educationvideo .right{
       background: #f5f5f5;
-      padding-left: 210px;
+      padding-left: 200px;
       box-sizing: border-box;
       min-height: 100%;
   }

src/components/EducationvideoSee.vue

@@ -6,7 +6,7 @@
             <div class="imgDiv">
                 <video style="border: 1px solid #f5f5f5;" width="100%" :height="videoHeight" :src="datainfo.VideoAddress" controls="controls">
                 </video>
-                <p style="font-size:18px;font-family:'PingFangR';margin-top:15px">{{datainfo.Name}}</p>
+                <p style="font-size:18px;font-family:'pingfangR';margin-top:15px">{{datainfo.Name}}</p>
                 <p>{{datainfo.EmName}}</p>
                 <p>{{datainfo.WatchNum}}次观看
                     <span class="circle"></span>    

src/router/config.js

@@ -133,6 +133,31 @@ export default {
                         title: '操作'
                     }
                 },
+                {
+                    path: '/Educationvideo', //教育视频
+                    name: 'Educationvideo',
+                    component: resolve => require(['@/components/Educationvideo'], resolve),
+                    meta: {
+                        title: '教育视频'
+                    },
+                },
+                {
+                    path: '/EducationvideoSee', //教育视频
+                    name: 'EducationvideoSee',
+                    component: resolve => require(['@/components/EducationvideoSee'], resolve),
+                    meta: {
+                        title: '观看教育视频'
+                    },
+                },
+                {
+                    path: '/EducationvideoList', //教育视频
+                    name: 'EducationvideoList',
+                    component: resolve => require(['@/components/EducationvideoList'], resolve),
+                    meta: {
+                        title: '维护教育视频'
+                    },
+                },
+
                 {
                     path: '/finance',
                     name: 'finance',
@@ -4495,30 +4520,7 @@ export default {
                 title: '资产管理'
             },
         },
-        {
-            path: '/Educationvideo', //教育视频
-            name: 'Educationvideo',
-            component: resolve => require(['@/components/Educationvideo'], resolve),
-            meta: {
-                title: '教育视频'
-            },
-        },
-        {
-            path: '/EducationvideoSee', //教育视频
-            name: 'EducationvideoSee',
-            component: resolve => require(['@/components/EducationvideoSee'], resolve),
-            meta: {
-                title: '观看教育视频'
-            },
-        },
-        {
-            path: '/EducationvideoList', //教育视频
-            name: 'EducationvideoList',
-            component: resolve => require(['@/components/EducationvideoList'], resolve),
-            meta: {
-                title: '维护教育视频'
-            },
-        },
+        
         
         
         {