video 二级页面

TEAMModelOS.SmartTeach/ClientApp/components/resource/video.vue

@@ -13,7 +13,7 @@
       <div class="video_list">
         <div class="video_left">
           <img src="../../assets/image/resource/video_img.jpg" />
-          <a target="_blank" href="" class="playbtn1"></a>
+          <a target="_blank" href="/videodetails" class="playbtn1"></a>
           <h4 class="name">
             <a target="_blank" href="" style="color:#fff">人教五上第五单元_列方程解决实际问题</a>
           </h4>
@@ -21,9 +21,9 @@
         <ul class="video_right">
           <li class="video_more_list" v-for="item in video_list">
             <img :src="item.imgurl" />
-            <a target="_blank" href="" class="playbtn1"></a>
+            <a target="_blank" :href="item.url" class="playbtn1"></a>
             <h4 class="name_more">
-            <a target="_blank" href="" style="color:#fff">{{item.slogan}}</a>
+            <a target="_blank" :href="item.url" style="color:#fff">{{item.slogan}}</a>
             </h4>
           </li>
         </ul>
@@ -36,13 +36,13 @@
     data() {
       return {
         video_list: [
-          { "id": 1, "imgurl": require("../../assets/image/resource/video_img_one.jpg"), "slogan": '人教三上第四单元_三位数减三位...', "url": '' },
-          { "id": 2, "imgurl": require("../../assets/image/resource/video_img_two.jpg"), "slogan": '五上第七单元_在一条线段上植树', "url": '' },
-          { "id": 3, "imgurl": require("../../assets/image/resource/video_img_three.jpg"), "slogan": '人教一上第五单元_6和7的写法', "url": '' },
-          { "id": 4, "imgurl": require("../../assets/image/resource/video_img_four.jpg"), "slogan": '人教二上第四单元_2，3的乘法口诀', "url": '' },
+          { "id": 1, "imgurl": require("../../assets/image/resource/video_img_one.jpg"), "slogan": '人教三上第四单元_三位数减三位...', "url": '/videodetails?id=1' },
+          { "id": 2, "imgurl": require("../../assets/image/resource/video_img_two.jpg"), "slogan": '五上第七单元_在一条线段上植树', "url": '/videodetails?id=2' },
+          { "id": 3, "imgurl": require("../../assets/image/resource/video_img_three.jpg"), "slogan": '人教一上第五单元_6和7的写法', "url": '/videodetails?id=3' },
+          { "id": 4, "imgurl": require("../../assets/image/resource/video_img_four.jpg"), "slogan": '人教二上第四单元_2，3的乘法口诀', "url": '/videodetails?id=4' },
         ],
       }
-    }
+    },
   }
 </script>
 <style scoped>
@@ -122,17 +122,20 @@
     .video_left:hover .playbtn1 {
       display: block;
     }
-    .playbtn1 {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      background: url(../../assets/image/resource/play.png) no-repeat;
-      width: 64px;
-      height: 64px;
-      margin-top: -32px;
-      margin-left: -32px;
-      display: none;
-    }
+    .video_more_list:hover  .playbtn1 {
+     display: block;
+  }
+  .playbtn1 {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    background: url(../../assets/image/resource/play.png) no-repeat;
+    width: 64px;
+    height: 64px;
+    margin-top: -32px;
+    margin-left: -32px;
+    display: none;
+  }
   .name {
     position: absolute;
     bottom: 5px;

TEAMModelOS.SmartTeach/ClientApp/router/routes.js

@@ -5,6 +5,7 @@ import Index from '@/view/resource/index'
 import Synch from '@/view/resource/resourceindex/synchronization.vue'
 import Library from '@/view/resource/resourceindex/library.vue'
 import Details from '@/view/resource/resourceindex/details.vue'
+import Videodetails from '@/view/resource/resourceindex/videodetails.vue'
 import Activity from '@/view/resource/activity'
 import HomePage from '@/view/resource/HomePage'
 import Teacher from '@/view/resource/Teacher'
@@ -17,6 +18,7 @@ export const routes = [
   { name: 'synch', path: '/synch', component: Synch },
   { name: 'library', path: '/library', component: Library },
   { name: 'details', path: '/details', component: Details },
+  { name: 'videodetails', path: '/videodetails', component: Videodetails },
   { name: 'activity', path: '/activity', component: Activity},
   { name: 'HomePage', path: '/HomePage', component: HomePage },
   { name: 'Teacher', path: '/Teacher', component: Teacher },