|
@@ -1,8 +1,7 @@
|
|
|
<template>
|
|
|
- <common-header/>
|
|
|
+ <common-header />
|
|
|
<div class="banner-box pr">
|
|
|
- <div class="banner"
|
|
|
- :style="{'background': 'url('+curMenu.img+') top no-repeat','background-size': 'cover'}"></div>
|
|
|
+ <div class="banner" :style="{'background': 'url('+curMenu.img+') top no-repeat','background-size': 'cover'}"></div>
|
|
|
<div class="right-menu">
|
|
|
<ul>
|
|
|
<li v-for="item in menuList" :class="item.id == curMenu.id?'selected':''" @mouseover="switchImg(item)">
|
|
@@ -18,28 +17,25 @@
|
|
|
<div class="">
|
|
|
<div class="d-flex flex-between flex-v-mid">
|
|
|
<h3 class="font-size-26 text-white">学生优秀作业</h3>
|
|
|
- <div>
|
|
|
- <span class="d-in-block v-mid arrow prev"></span>
|
|
|
- <span class="ml10 d-in-block v-mid arrow next"></span>
|
|
|
- </div>
|
|
|
+ <!-- <div>
|
|
|
+ <span class="d-in-block v-mid arrow prev" style="cursor: pointer;" @click="handlePrev(1)"></span>
|
|
|
+ <span class="ml10 d-in-block v-mid arrow next" style="cursor: pointer;" @click="handleNext(1)"></span>
|
|
|
+ </div> -->
|
|
|
</div>
|
|
|
<ul class="mt10 course-list">
|
|
|
- <li v-for="item in xsyxzy">
|
|
|
+ <li v-for="item in xsyxzy" :key="item.yz_id">
|
|
|
<div class="course-img pr">
|
|
|
- <img :src="item.img" alt="">
|
|
|
+ <img :src="getFullUrl(item.yz_img)" alt="">
|
|
|
<div class="tag-info text-center">
|
|
|
<span class="tag-icon prove d-in-block v-mid"></span>
|
|
|
- <span class="d-in-block v-mid font-size-13 text-white">{{ item.prove }}</span>
|
|
|
+ <span class="d-in-block v-mid font-size-13 text-white">{{ item.yz_like_num }}</span>
|
|
|
<span class="ml10 tag-icon favor d-in-block v-mid"></span>
|
|
|
- <span class="d-in-block v-mid font-size-13 text-white">{{ item.favor }}</span>
|
|
|
+ <span class="d-in-block v-mid font-size-13 text-white">{{ item.yz_fav_num }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="course-info">
|
|
|
- <h3 class="font-size-16 text-overflow">{{ item.title }}</h3>
|
|
|
- <el-rate
|
|
|
- v-model="item.rate"
|
|
|
- disabled
|
|
|
- />
|
|
|
+ <h3 class="font-size-16 text-overflow">{{ item.yz_name }}</h3>
|
|
|
+ <el-rate disabled-void-color="#fff" v-model="item.yz_star_num" disabled />
|
|
|
</div>
|
|
|
</li>
|
|
|
</ul>
|
|
@@ -47,28 +43,25 @@
|
|
|
<div class="">
|
|
|
<div class="d-flex flex-between">
|
|
|
<h3 class="font-size-26 text-white">教师优秀作品</h3>
|
|
|
- <div>
|
|
|
- <span class="d-in-block v-mid arrow prev"></span>
|
|
|
- <span class="ml10 d-in-block v-mid arrow next"></span>
|
|
|
- </div>
|
|
|
+ <!-- <div>
|
|
|
+ <span class="d-in-block v-mid arrow prev" style="cursor: pointer;" @click="handlePrev(2)"></span>
|
|
|
+ <span class="ml10 d-in-block v-mid arrow next" style="cursor: pointer;" @click="handleNext(2)"></span>
|
|
|
+ </div> -->
|
|
|
</div>
|
|
|
<ul class="mt10 course-list">
|
|
|
- <li v-for="item in jsxyzp">
|
|
|
+ <li v-for="item in jsxyzp" :key="item.yz_id">
|
|
|
<div class="course-img pr">
|
|
|
- <img :src="item.img" alt="">
|
|
|
+ <img :src="getFullUrl(item.yz_img)" alt="">
|
|
|
<div class="tag-info text-center">
|
|
|
<span class="tag-icon prove d-in-block v-mid"></span>
|
|
|
- <span class="d-in-block v-mid font-size-13 text-white">{{ item.prove }}</span>
|
|
|
+ <span class="d-in-block v-mid font-size-13 text-white">{{ item.yz_like_num }}</span>
|
|
|
<span class="ml10 tag-icon favor d-in-block v-mid"></span>
|
|
|
- <span class="d-in-block v-mid font-size-13 text-white">{{ item.favor }}</span>
|
|
|
+ <span class="d-in-block v-mid font-size-13 text-white">{{ item.yz_fav_num }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="course-info">
|
|
|
- <h3 class="font-size-16 text-overflow">{{ item.title }}</h3>
|
|
|
- <el-rate
|
|
|
- v-model="item.rate"
|
|
|
- disabled
|
|
|
- />
|
|
|
+ <h3 class="font-size-16 text-overflow">{{ item.yz_name }}</h3>
|
|
|
+ <el-rate v-model="item.yz_star_num" disabled disabled-void-color="#fff" />
|
|
|
</div>
|
|
|
</li>
|
|
|
</ul>
|
|
@@ -123,26 +116,21 @@
|
|
|
</div>
|
|
|
<h3 class="title m-65">直播课程</h3>
|
|
|
<div class="mt45 d-flex live-list">
|
|
|
- <a href="javascript:;" class="pt65 pl85" @click="toLive(1)">
|
|
|
- <h3 class="font-size-30 text-white font-bold-1">双师一生</h3>
|
|
|
- <h4 class="mt40 font-size-16 text-white">轻松便捷的快速构建教学</h4>
|
|
|
- <h4 class="mt15 font-size-16 text-white">超强的抗弱网能力,优秀的网络自适应策略保证优质观看效果</h4>
|
|
|
- <h4 class="mt15 font-size-16 text-white">满足大规模教师、学生同时接入</h4>
|
|
|
- <h5 class="mt80 pr80 font-size-16 lh20 text-white text-right">
|
|
|
- <span class="d-in-block v-mid">查看课程</span>
|
|
|
- <span class="ml3 d-in-block v-mid arrow-right"></span>
|
|
|
- </h5>
|
|
|
- </a>
|
|
|
- <a href="javascript:;" @click="toLive(2)">
|
|
|
- <div class="text-center">
|
|
|
- <h3 class="font-size-30">网络直播</h3>
|
|
|
- <h4 class="mt15 font-size-16 color-6">网络直播网络直播网络直播</h4>
|
|
|
- </div>
|
|
|
- </a>
|
|
|
- <a href="javascript:;" @click="toLive(3)">
|
|
|
- <div class="text-center">
|
|
|
- <h3 class="font-size-30">专题直播</h3>
|
|
|
- <h4 class="mt15 font-size-16 color-6">专题直播专题直播专题直播专题直播</h4>
|
|
|
+ <a v-for="(item, index) in liveData" :key="index" @click="toLive(index+1)" @mouseover="handleHover(index)">
|
|
|
+ <div class="list" :class="activeLive==index?'activeLive pt65 pl85':''" :style="{background: activeLive==index ? `url(${item.img}) center no-repeat` : `url(${item.bgImg}) center no-repeat`}">
|
|
|
+ <div v-if="activeLive==index">
|
|
|
+ <h3 class="font-size-30 text-white font-bold-1">{{item.name}}</h3>
|
|
|
+ <h4 class="mt40 font-size-16 text-white">{{item.pro1}}</h4>
|
|
|
+ <h4 class="mt15 font-size-16 text-white">{{item.pro2}}</h4>
|
|
|
+ <h4 class="mt15 font-size-16 text-white">{{item.pro3}}</h4>
|
|
|
+ <h5 class="mt80 pr80 font-size-16 lh20 text-white text-right">
|
|
|
+ <span class="d-in-block v-mid">查看课程</span>
|
|
|
+ <span class="ml3 d-in-block v-mid arrow-right"></span>
|
|
|
+ </h5>
|
|
|
+ </div>
|
|
|
+ <div v-else>
|
|
|
+ <h3 class="font-size-30">{{item.name}}</h3>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</a>
|
|
|
</div>
|
|
@@ -188,11 +176,15 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
-
|
|
|
-
|
|
|
</template>
|
|
|
<script>
|
|
|
import CommonHeader from "@/components/CommonHeader/index.vue";
|
|
|
+import { getFullUrl } from '@/utils/helper';
|
|
|
+import img1 from "/images/home/live-1.png";
|
|
|
+import img2 from "/images/home/live2.png";
|
|
|
+import img3 from "/images/home/live3.png";
|
|
|
+import bgImg1 from "/images/home/live-2.png";
|
|
|
+import bgImg2 from "/images/home/live-3.png";
|
|
|
export default {
|
|
|
components: {
|
|
|
CommonHeader
|
|
@@ -265,7 +257,7 @@ export default {
|
|
|
favor: '14w+'
|
|
|
}, {
|
|
|
id: '4',
|
|
|
- img:'/images/home/4.png',
|
|
|
+ img: '/images/home/4.png',
|
|
|
title: '拇指姑娘',
|
|
|
rate: 4,
|
|
|
prove: '10w+',
|
|
@@ -292,7 +284,36 @@ export default {
|
|
|
rate: 4,
|
|
|
prove: '10w+',
|
|
|
favor: '14w+'
|
|
|
- }]
|
|
|
+ }],
|
|
|
+ xsPage: 1,
|
|
|
+ jsPage: 1,
|
|
|
+ liveData: [
|
|
|
+ {
|
|
|
+ name: "双师一生",
|
|
|
+ pro1: "轻松便捷的快速构建教学",
|
|
|
+ pro2: "超强的抗弱网能力,优秀的网络自适应策略保证优质观看效果",
|
|
|
+ pro3: "满足大规模教师、学生同时接入",
|
|
|
+ img: img1,
|
|
|
+ bgImg: bgImg1
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "网络直播",
|
|
|
+ pro1: "支持音频/视频实景上课,音频、动作等实时传递,呈现真实课堂的教学环境",
|
|
|
+ pro2: "老师在线发布测验题,学生端进行答题检测,老师可查看测验结果,检查教室内学员是否认真听课",
|
|
|
+ pro3: "",
|
|
|
+ img: img2,
|
|
|
+ bgImg: bgImg1
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "专题直播",
|
|
|
+ pro1: "支持云端录制和本地录制,生成直播录制视频及云端回放链接",
|
|
|
+ pro2: "完全重现直播时的场景,便于学习复习及教学内容再次传播",
|
|
|
+ pro3: "",
|
|
|
+ img: img3,
|
|
|
+ bgImg: bgImg2
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ activeLive: 0
|
|
|
}
|
|
|
|
|
|
},
|
|
@@ -301,25 +322,96 @@ export default {
|
|
|
this.curMenu = item;
|
|
|
},
|
|
|
toTeacher() {
|
|
|
- this.$router.push({name:'resource'});
|
|
|
- localStorage.setItem('curNav','resource');
|
|
|
+ this.$router.push({ name: 'resource' });
|
|
|
+ localStorage.setItem('curNav', 'resource');
|
|
|
},
|
|
|
toLive(type) {
|
|
|
switch (type) {
|
|
|
case 1:
|
|
|
- this.$router.push({name:'ssys'});
|
|
|
- localStorage.setItem('curNav','zbkt');
|
|
|
+ this.$router.push({ name: 'ssys' });
|
|
|
+ localStorage.setItem('curNav', 'zbkt');
|
|
|
break;
|
|
|
case 2:
|
|
|
- this.$router.push({name:'wlzb'});
|
|
|
- localStorage.setItem('curNav','zbkt');
|
|
|
+ this.$router.push({ name: 'wlzb' });
|
|
|
+ localStorage.setItem('curNav', 'zbkt');
|
|
|
break;
|
|
|
case 3:
|
|
|
- this.$router.push({name:'ztzb'});
|
|
|
- localStorage.setItem('curNav','zbkt');
|
|
|
+ this.$router.push({ name: 'ztzb' });
|
|
|
+ localStorage.setItem('curNav', 'zbkt');
|
|
|
break;
|
|
|
}
|
|
|
+ },
|
|
|
+ initXSData() {
|
|
|
+ request({
|
|
|
+ url: '/ysgc/zp/index',
|
|
|
+ data: {
|
|
|
+ yz_type: 1,
|
|
|
+ limit: 4,
|
|
|
+ page: this.xsPage
|
|
|
+ }
|
|
|
+ }).then(res => {
|
|
|
+ if (res.code == 1) {
|
|
|
+ this.xsyxzy = res.data.page_data;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ initJSData() {
|
|
|
+ request({
|
|
|
+ url: '/ysgc/zp/index',
|
|
|
+ data: {
|
|
|
+ yz_type: 2,
|
|
|
+ limit: 3,
|
|
|
+ page: this.jsPage
|
|
|
+ }
|
|
|
+ }).then(res => {
|
|
|
+ if (res.code == 1) {
|
|
|
+ this.jsxyzp = res.data.page_data;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ setActiveItem(i) {
|
|
|
+ if (this.$refs["carousel" + i][0]) {
|
|
|
+ // 手动切换幻灯片 setActiveItem(i)(Carousel Methods)
|
|
|
+ // 需要切换的幻灯片的索引,从 0 开始;或相应 el-carousel-item 的 name 属性值
|
|
|
+ // i 与 name 里面的值绑定 ,i 决定显示那个 name值的 el-carousel-item
|
|
|
+ this.$refs["carousel" + i][0].setActiveItem("name" + i)
|
|
|
+ // console.log(i)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handlePrev(type) {
|
|
|
+ if (type == 1) {
|
|
|
+ if (this.xsPage == 1) {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ this.xsPage--;
|
|
|
+ this.initXSData();
|
|
|
+ } else if (type == 2) {
|
|
|
+ if (this.jsPage == 1) {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ this.jsPage--;
|
|
|
+ this.initJSData();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleNext(type) {
|
|
|
+ if (type == 1) {
|
|
|
+ this.xsPage++;
|
|
|
+ this.initXSData();
|
|
|
+ } else if (type == 2) {
|
|
|
+ this.jsPage++;
|
|
|
+ this.initJSData();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleHover(index) {
|
|
|
+ this.activeLive = index;
|
|
|
+ if (index == 2) {
|
|
|
+ this.liveData[1].bgImg = bgImg2;
|
|
|
+ }
|
|
|
}
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.initXSData();
|
|
|
+ this.initJSData();
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
@@ -348,7 +440,12 @@ export default {
|
|
|
z-index: 50;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
- background: radial-gradient(rgba(255, 255, 255, 0.00), rgba(160, 221, 255, 0.00), rgba(74, 190, 255, 0.54), rgba(0, 163, 255, 0.86));
|
|
|
+ background: radial-gradient(
|
|
|
+ rgba(255, 255, 255, 0),
|
|
|
+ rgba(160, 221, 255, 0),
|
|
|
+ rgba(74, 190, 255, 0.54),
|
|
|
+ rgba(0, 163, 255, 0.86)
|
|
|
+ );
|
|
|
}
|
|
|
|
|
|
.right-menu {
|
|
@@ -359,7 +456,11 @@ export default {
|
|
|
margin-left: 505px;
|
|
|
width: 318px;
|
|
|
height: 560px;
|
|
|
- background: linear-gradient(270deg, rgba(0, 163, 255, .41), rgba(0, 208, 255, 0.16));
|
|
|
+ background: linear-gradient(
|
|
|
+ 270deg,
|
|
|
+ rgba(0, 163, 255, 0.41),
|
|
|
+ rgba(0, 208, 255, 0.16)
|
|
|
+ );
|
|
|
display: flex;
|
|
|
justify-content: right;
|
|
|
|
|
@@ -392,7 +493,11 @@ export default {
|
|
|
.content-bg {
|
|
|
width: 100%;
|
|
|
height: 700px;
|
|
|
- background: linear-gradient(0deg, rgba(255, 255, 255, 0.00) 0%, rgba(0, 163, 255, .86));
|
|
|
+ background: linear-gradient(
|
|
|
+ 0deg,
|
|
|
+ rgba(255, 255, 255, 0) 0%,
|
|
|
+ rgba(0, 163, 255, 0.86)
|
|
|
+ );
|
|
|
}
|
|
|
|
|
|
.course-box {
|
|
@@ -442,6 +547,13 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ ::v-deep .el-carousel__indicators--horizontal {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ ::v-deep .el-carousel__arrow {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+
|
|
|
.course-img {
|
|
|
width: 100%;
|
|
|
height: 131px;
|
|
@@ -459,7 +571,7 @@ export default {
|
|
|
z-index: 30;
|
|
|
width: 137px;
|
|
|
height: 27px;
|
|
|
- background: rgba(0, 0, 0, .59);
|
|
|
+ background: rgba(0, 0, 0, 0.59);
|
|
|
border-radius: 0 10px 0 10px;
|
|
|
|
|
|
.tag-icon {
|
|
@@ -532,31 +644,25 @@ export default {
|
|
|
a {
|
|
|
height: 391px;
|
|
|
|
|
|
- &:first-child {
|
|
|
- margin-top: -15px;
|
|
|
- margin-right: -25px;
|
|
|
- width: 885px;
|
|
|
- height: 439px;
|
|
|
- background: url("/images/home/live-1.png") center no-repeat;
|
|
|
- }
|
|
|
-
|
|
|
- &:nth-child(2) {
|
|
|
- width: 301px;
|
|
|
- background: url("/images/home/live-2.png") center no-repeat;
|
|
|
+ .list {
|
|
|
+ height: 100%;
|
|
|
+ width: 300px;
|
|
|
+ cursor: pointer;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
+ transition: width linear 0.05s;
|
|
|
}
|
|
|
|
|
|
- &:nth-child(3) {
|
|
|
- width: 301px;
|
|
|
- background: url("/images/home/live-3.png") center no-repeat;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
+ .activeLive {
|
|
|
+ margin-top: -15px;
|
|
|
+ margin-right: -25px;
|
|
|
+ width: 885px;
|
|
|
+ height: 439px;
|
|
|
+ cursor: pointer;
|
|
|
+ display: block;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
|
|
|
.wit-list {
|