|
|
@@ -1,24 +1,49 @@
|
|
|
<template>
|
|
|
<div class="video">
|
|
|
- <div class="video_box">
|
|
|
- <div class="video_title"><div class="video_name">微课</div><i>2638</i></div>
|
|
|
- <ul class="video_select">
|
|
|
- <li class="select_name">语文</li>
|
|
|
- <li class="select_name">数学</li>
|
|
|
- <li class="select_name">英语</li>
|
|
|
- <li class="select_name">物理</li>
|
|
|
- <li class="select_name">化学</li>
|
|
|
- <li class="select_name_more"><Icon type="ios-more" size="16"/></li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
- <div class="video_list">
|
|
|
- <div class="video_left"></div>
|
|
|
- <div class="video_right"></div>
|
|
|
+ <div class="video_box">
|
|
|
+ <div class="video_title"><div class="video_name">微课</div><i>2638</i></div>
|
|
|
+ <ul class="video_select">
|
|
|
+ <li class="select_name">语文</li>
|
|
|
+ <li class="select_name">数学</li>
|
|
|
+ <li class="select_name">英语</li>
|
|
|
+ <li class="select_name">物理</li>
|
|
|
+ <li class="select_name">化学</li>
|
|
|
+ <li class="select_name_more"><Icon type="ios-more" size="16" /></li>
|
|
|
+ </ul>
|
|
|
+ <div class="video_list">
|
|
|
+ <div class="video_left">
|
|
|
+ <img src="../../assets/image/resource/video_img.jpg" />
|
|
|
+ <a target="_blank" href="" class="playbtn1"></a>
|
|
|
+ <h4 class="name">
|
|
|
+ <a target="_blank" href="" style="color:#fff">人教五上第五单元_列方程解决实际问题</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="" class="playbtn1"></a>
|
|
|
+ <h4 class="name_more">
|
|
|
+ <a target="_blank" href="" style="color:#fff">{{item.slogan}}</a>
|
|
|
+ </h4>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
-
|
|
|
+ export default {
|
|
|
+ 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": '' },
|
|
|
+ ],
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
</script>
|
|
|
<style scoped>
|
|
|
.video {
|
|
|
@@ -77,4 +102,67 @@
|
|
|
width: 15%;
|
|
|
padding: 0px 5px 0px 5px;
|
|
|
}
|
|
|
+ .video_list {
|
|
|
+ width:100%;
|
|
|
+ height:400px;
|
|
|
+ float:left;
|
|
|
+ padding:1.5%;
|
|
|
+ }
|
|
|
+ .video_left {
|
|
|
+ width:50%;
|
|
|
+ float:left;
|
|
|
+ position:relative;
|
|
|
+ }
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+ .name {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 5px;
|
|
|
+ left: 0px;
|
|
|
+ width: 91.7%;
|
|
|
+ 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: 91.7%;
|
|
|
+ font-weight: normal;
|
|
|
+ line-height: 35px;
|
|
|
+ font-size: 14px;
|
|
|
+ background-color: rgba(52, 52, 52, .5);
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ .video_right {
|
|
|
+ width: 50%;
|
|
|
+ float: left;
|
|
|
+ list-style: none;
|
|
|
+ }
|
|
|
+ .video_more_list {
|
|
|
+ width:50%;
|
|
|
+ float:left;
|
|
|
+ position:relative;
|
|
|
+ height:170px;
|
|
|
+ margin-top:12px;
|
|
|
+ }
|
|
|
+ .video_more_list img {
|
|
|
+ width:91.5%;
|
|
|
+ height:170px;
|
|
|
+ }
|
|
|
</style>
|
