|
@@ -0,0 +1,276 @@
|
|
|
+
|
|
|
+<template>
|
|
|
+ <div class="home">
|
|
|
+ <div class="title">
|
|
|
+ <Icon type="ios-home-outline" size="22" />
|
|
|
+ <p><router-link to="/TeacherZone/ZonesHome">工作室首页</router-link></p><span>>名师课堂</span>
|
|
|
+ </div>
|
|
|
+ <div class="list-info">
|
|
|
+ <h1 class="list-title">最新课例</h1>
|
|
|
+ <div class="video">
|
|
|
+ <div class="video_box">
|
|
|
+ <div class="video_list">
|
|
|
+ <div class="video_left">
|
|
|
+ <img src="../../assets/image/resource/teach01.jpg" />
|
|
|
+ <a target="_blank" href="/videodetails" class="playbtn1"></a>
|
|
|
+ <h4 class="name">
|
|
|
+ <a target="_blank" href="" style="color:#fff">选修3-1第二章恒定电流,电源和电流</a>
|
|
|
+ </h4>
|
|
|
+ </div>
|
|
|
+ <ul class="video_right">
|
|
|
+ <li class="video_more_list" v-for="item in video_list">
|
|
|
+ <img :src="item.imgurl" />
|
|
|
+ <a target="_blank" :href="item.url" class="playbtn1"></a>
|
|
|
+ <h4 class="name_more">
|
|
|
+ <a target="_blank" :href="item.url" style="color:#fff">{{item.slogan}}</a>
|
|
|
+ </h4>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="list-infos">
|
|
|
+ <h1 class="list-title">微课课例</h1>
|
|
|
+ <div class="video">
|
|
|
+ <div class="video_box">
|
|
|
+ <div class="video_list">
|
|
|
+ <ul class="video_rights">
|
|
|
+ <li class="video_more_list" v-for="item in video_lists">
|
|
|
+ <img :src="item.imgurl" />
|
|
|
+ <a target="_blank" :href="item.url" class="playbtn1"></a>
|
|
|
+ <h4 class="name_more">
|
|
|
+ <a target="_blank" :href="item.url" style="color:#fff">{{item.slogan}}</a>
|
|
|
+ </h4>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ video_list: [
|
|
|
+ { "id": 1, "imgurl": require("../../assets/image/resource/teach03.jpg"), "slogan": '选修3-1第二章恒定电流,电流的微观解析', "url": '/videodetails?id=1' },
|
|
|
+ { "id": 2, "imgurl": require("../../assets/image/resource/teach01.jpg"), "slogan": '选修3-1第二章恒定电流,电流的微观解析', "url": '/videodetails?id=2' },
|
|
|
+ { "id": 3, "imgurl": require("../../assets/image/resource/teach02.jpg"), "slogan": '选修3-1第二章恒定电流,电流的微观解析', "url": '/videodetails?id=3' },
|
|
|
+ { "id": 4, "imgurl": require("../../assets/image/resource/teach04.jpg"), "slogan": '选修3-1第二章恒定电流,电流的微观解析', "url": '/videodetails?id=4' },
|
|
|
+ ],
|
|
|
+ video_lists: [
|
|
|
+ { "id": 1, "imgurl": require("../../assets/image/resource/teach03.jpg"), "slogan": '选修3-1第二章恒定电流,电流的微观解析', "url": '/videodetails?id=1' },
|
|
|
+ { "id": 2, "imgurl": require("../../assets/image/resource/teach01.jpg"), "slogan": '选修3-1第二章恒定电流,电流的微观解析', "url": '/videodetails?id=2' },
|
|
|
+ { "id": 3, "imgurl": require("../../assets/image/resource/teach02.jpg"), "slogan": '选修3-1第二章恒定电流,电流的微观解析', "url": '/videodetails?id=3' },
|
|
|
+ { "id": 4, "imgurl": require("../../assets/image/resource/teach04.jpg"), "slogan": '选修3-1第二章恒定电流,电流的微观解析', "url": '/videodetails?id=4' },
|
|
|
+
|
|
|
+ ],
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ viewDetails() {
|
|
|
+ this.$router.push({ path: '/TeacherZone/TeachDetails' })
|
|
|
+
|
|
|
+ },
|
|
|
+ chooseTab() {
|
|
|
+ this.info = this.data;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+<style scoped>
|
|
|
+ .home {
|
|
|
+ width: 66%;
|
|
|
+ height: 500px;
|
|
|
+ position: absolute;
|
|
|
+ top: 70%;
|
|
|
+ left: 53%;
|
|
|
+ transform: translate(-50%,-50%);
|
|
|
+ float: left;
|
|
|
+ /*display: inline-flex;*/
|
|
|
+ }
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: 16px;
|
|
|
+ text-align: left;
|
|
|
+ font-weight: 600;
|
|
|
+ width: 300px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title p {
|
|
|
+ display: inline;
|
|
|
+ }
|
|
|
+
|
|
|
+ .list-info {
|
|
|
+ margin-top: 35px;
|
|
|
+ width: 90%;
|
|
|
+ background: #fff;
|
|
|
+ /* float: left; */
|
|
|
+ /*margin-left: -24%;*/
|
|
|
+ height: 450px;
|
|
|
+ border: 1px solid #ededed;
|
|
|
+ }
|
|
|
+ .list-infos {
|
|
|
+ margin-top: 35px;
|
|
|
+ width: 90%;
|
|
|
+ background: #fff;
|
|
|
+ height: 500px;
|
|
|
+ border: 1px solid #ededed;
|
|
|
+ }
|
|
|
+
|
|
|
+ .list-title {
|
|
|
+ float: left;
|
|
|
+ height: 57px;
|
|
|
+ line-height: 57px;
|
|
|
+ font-size: 20px;
|
|
|
+ margin-left: 10px;
|
|
|
+ color: #288add;
|
|
|
+ border-bottom: 1px solid #288add;
|
|
|
+ }
|
|
|
+ .video {
|
|
|
+ margin-top: 7%;
|
|
|
+ /* float: left; */
|
|
|
+ /* display: inline; */
|
|
|
+ background-color: #f3f3f3;
|
|
|
+ }
|
|
|
+
|
|
|
+ .video_box {
|
|
|
+ background-color: #fff;
|
|
|
+ margin: 0 auto;
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+ .video_name {
|
|
|
+ float: left;
|
|
|
+ line-height: 39px;
|
|
|
+ border-bottom: #288add solid 1px;
|
|
|
+ padding: 12px 5px 0px 5px;
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: normal;
|
|
|
+ color: #288add;
|
|
|
+ }
|
|
|
+
|
|
|
+ /*i {
|
|
|
+ float: left;
|
|
|
+ margin: 22px 0px 0px 8px;
|
|
|
+ height: 20px;
|
|
|
+ line-height: 20px;
|
|
|
+ border-radius: 10px;
|
|
|
+ background: #8ea9b9;
|
|
|
+ font-size: 14px;
|
|
|
+ padding: 0px 10px;
|
|
|
+ color: #fff;
|
|
|
+ }*/
|
|
|
+
|
|
|
+ .video_select {
|
|
|
+ width: 30%;
|
|
|
+ float: left;
|
|
|
+ list-style: none;
|
|
|
+ border-bottom: #ececec solid 1px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .select_name {
|
|
|
+ float: left;
|
|
|
+ width: 15%;
|
|
|
+ line-height: 39px;
|
|
|
+ padding: 12px 5px 0px 5px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #6f8abb;
|
|
|
+ }
|
|
|
+
|
|
|
+ .select_name_more {
|
|
|
+ float: left;
|
|
|
+ width: 15%;
|
|
|
+ padding: 0px 5px 0px 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .video_list {
|
|
|
+ width: 100%;
|
|
|
+ /* float: left; */
|
|
|
+ padding: 1.5%;
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+
|
|
|
+ .video_left {
|
|
|
+ width: 50%;
|
|
|
+ float: left;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .video_left img {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .video_left:hover .playbtn1 {
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+
|
|
|
+ .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;
|
|
|
+ left: 0px;
|
|
|
+ width: 100%;
|
|
|
+ font-weight: normal;
|
|
|
+ line-height: 45px;
|
|
|
+ font-size: 16px;
|
|
|
+ background-color: rgba(52, 52, 52, .5);
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .name_more {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0px;
|
|
|
+ left: 0px;
|
|
|
+ width: 100%;
|
|
|
+ font-weight: normal;
|
|
|
+ line-height: 35px;
|
|
|
+ font-size: 14px;
|
|
|
+ background-color: rgba(52, 52, 52, .5);
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .video_right {
|
|
|
+ width: 48%;
|
|
|
+ float: left;
|
|
|
+ list-style: none;
|
|
|
+ margin-left: 2%;
|
|
|
+ }
|
|
|
+ .video_rights {
|
|
|
+ width: 48%;
|
|
|
+ float: left;
|
|
|
+ list-style: none;
|
|
|
+ margin-left: 2%;
|
|
|
+ display: contents;
|
|
|
+ }
|
|
|
+
|
|
|
+ .video_more_list {
|
|
|
+ width: 48%;
|
|
|
+ float: left;
|
|
|
+ position: relative;
|
|
|
+ height: 170px;
|
|
|
+ margin-top: 12px;
|
|
|
+ margin: 0.5% 1%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .video_more_list img {
|
|
|
+ width: 100%;
|
|
|
+ height: 170px;
|
|
|
+ }
|
|
|
+</style>
|