提交 cbc2ed8a 编写于 作者: 杨广俊's avatar 杨广俊

teacher details

上级 189dab19
无法预览此类型文件
无法预览此类型文件
...@@ -87,7 +87,7 @@ export default { ...@@ -87,7 +87,7 @@ export default {
}, },
parmData: { parmData: {
type: Array, type: Array,
default: [] default: () => []
}, },
}, },
mounted() { mounted() {
......
<template>
<div class="hot-teacher">
<div class="space-between" id="fiveBoxMenu">
<img class="img" src="../../images/mins.png"/>
<div @click="goToPage('')" class="five-more gray fs11">
更多<img src="../../images/right-throw.png" class="thorw-icon"/>
</div>
</div>
<div :class="index>1 && (index+1 == list.length)?'teacher-item item-end' : 'teacher-item'" :key="index" v-for="(item,index) in list" @click="goToPage(item)">
<div class="teacher-itemimg">
<img v-lazy="item.appImageUrl"/>
</div>
<div class="five-text">
<div class="teacher-itemname fs14">{{item.title}}</div>
<div class="five-tag fs11">
<span class="m-tag">#{{item.categoryName}}</span>
<span class="m-play" @click.stop="playFun(item)">
<div class="play-opt play-start" v-show="item['play'] =='1'">
<span></span>
<span></span>
<span></span>
</div>
<div class="play-opt play-stop" v-show="item.play == '2'">
<span></span>
<span></span>
<span></span>
</div>
<img class="five-radio" src="../../images/play.png" v-if="item.play == '0'"/>
</span>
</div>
</div>
</div>
</div>
</template>
<script>
import {
pageJumpUrl
} from '@/utils/index'
export default {
name: 'YqyFiveMinutes',
data() {
return {
list: [],
isPlay: false,
id: ''
}
},
props: {
parmData: {
type: Array,
default: () => []
}
},
created() {
let _this = this;
//暂停
window.__pauseAudioView = function (parm) {
_this.changePlay(_this.id, '2');
}
//开始
window.__playAudioView = function (parm) {
_this.changePlay(_this.id, '1');
}
window.__closeAudioView = function (parm) {
_this.changePlay(_this.id, '0');
}
},
mounted() {
//console.log(this.parmData);
this.list = this.parmData;
},
methods: {
goToPage(item) {
let obj = {
}
///console.log(item);
let url = pageJumpUrl();
// console.log(url.pageListUrl);
let itemData = {
"imageUrl": "",
"appModuleInfo": {
"code": "M200",
"type": 4,
"name": "课程介绍页",
"paramFlag": 1,
"paramList": []
}
};
if (!!item) {
obj = {
menuLevel: 1,
menuCode: 'm_home',
functionCode: 'f_five_minutes',
actionCode: 'c_content',
labelId: item.id,
labelValue: item.title,
}
itemData.title = item.name;
itemData.appModuleInfo["paramList"] = [{
"key": "className",
"value": 'com.picahealth.yunque.activitys.music.WebMusicListActivity###FiveMinutesMedicalSchoolWebViewController',
"type": 4,
"seqNo": 1
},
{
"key": "id",
"value": `${item.id}`,
"type": 1,
"seqNo": 2
}
]
} else {
obj = {
menuLevel: 1,
menuCode: 'm_home',
functionCode: 'f_five_minutes',
actionCode: 'c_all'
}
itemData.appModuleInfo.paramList = [{
"key": "className",
"value": 'com.picahealth.yunque.activitys.music.WebMusicListActivity###FiveMinutesMedicalSchoolWebViewController',
"type": 4,
"seqNo": 1
}]
}
this.pageBurialPoin(obj)
let paramList = this.setEventByModuleCode(itemData);
rocNative.dispatchEventByModuleCode({
modeCode: itemData.appModuleInfo.code,
jsonString: paramList
})
},
changePlay(id, str) {
//play : 1播放 2:暂停 0:初始状态
for (let i = 0; i < this.list.length; i++) {
if (id == this.list[i].id) {
if (str == '1') {
this.list[i].play = '1';
} else if (str == '2') {
this.list[i].play = '2';
// alert(str)
} else if (str == '0') {
this.list[i].play = '0';
}
} else {
this.list[i].play = '0';
}
}
},
playFun(item) {
this.id = item.id; //保存id
this.changePlay(item.id, '1');
this.pageBurialPoin({
menuLevel: 1,
menuCode: 'm_home',
functionCode: 'f_five_minutes',
actionCode: 'c_play',
labelId: item.id,
labelValue: item.title,
})
rocNative.openFiveMintusAudio({
categoryName: item.categoryName,
appImageUrl: item.appImageUrl,
publishTime: item.publishTime,
id: item.id,
filePath: item.filePath,
title: item.title,
size: item.size,
isPlay: true,
fileType: item.fileType,
totalTime: item.totalTime
})
}
},
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '../../style/mixin.scss';
@import '../../style/global.scss';
.hot-teacher {
width: 100%;
background-color: #fff;
padding: 0 px2rem(15px) 0;
margin-top: px2rem(15px);
.img {
width: px2rem(109px);
height: px2rem(22px);
}
.thorw-icon {
width: px2rem(8px);
height: px2rem(8px);
}
.five-more {
border: 1px solid RGBA(169, 174, 183, 1);
border-radius: px2rem(16px);
height: px2rem(16px);
line-height: px2rem(16px);
padding: 0 px2rem(5px) 0 px2rem(6px);
vertical-align: middle;
}
.teacher-item {
width: 100%;
height: px2rem(85px);
position: relative;
margin-top: px2rem(20px);
&:not(:last-child) {
border-bottom: 1px solid RGBA(240, 240, 240, 1);
}
.teacher-itemimg {
width: px2rem(60px);
height: px2rem(60px);
border-radius: px2rem(3px);
box-shadow: 0 px2rem(2px) px2rem(3px) RGBA(0, 78, 64, 0.1);
float: left;
img {
width: 100%;
height: 100%;
display: inline-block;
border-radius: px2rem(3px);
}
}
.five-text {
margin-left: px2rem(70px);
height: px2rem(38px);
}
.teacher-itemname {
color: RGBA(102, 102, 102, 1);
height: px2rem(38px);
line-height: px2rem(19px);
font-size: px2rem(14px);
margin-bottom: px2rem(5px);
}
.five-tag {
position: relative;
padding-right: px2rem(25px);
.m-tag {
height: px2rem(17px);
line-height: px2rem(17px);
padding: 0 px2rem(5px);
color: #BF9E15;
border-radius: 0 px2rem(3px) px2rem(3px) px2rem(3px);
background: #FFFDFA;
/* background-color: px2rem(17px);*/
border: 1px solid #FAE5AF;
}
}
.m-play {
width: px2rem(28px);
height: px2rem(28px);
display: inline-block;
position: absolute;
right: 0;
bottom: 0;
.play-stop {}
.play-opt {
position: relative;
width: px2rem(28px);
height: px2rem(28px);
border: 1px solid #56c3bb;
border-radius: 50%;
span {
width: px2rem(3px);
height: px2rem(5px);
bottom: px2rem(5px);
position: absolute;
background: #56c3bb;
border-radius: 2px 2px 0 0;
}
}
.play-stop {
span:first-child {
left: px2rem(8px);
height: px2rem(5px);
}
span:nth-child(2) {
left: px2rem(12px);
height: px2rem(15px);
}
span:nth-child(3) {
left: px2rem(16px);
height: px2rem(10px);
}
}
.play-start {
span {
-webkit-animation: bodong 0.5s infinite ease-in-out alternate;
animation: bodong 0.5s infinite ease-in-out alternate;
}
span:first-child {
left: px2rem(8px);
-webkit-animation-delay: .1s;
animation-delay: .1s;
}
span:nth-child(2) {
left: px2rem(12px);
-webkit-animation-delay: .3s;
animation-delay: .3s;
}
span:nth-child(3) {
left: px2rem(16px);
-webkit-animation-delay: .5s;
animation-delay: .5s;
}
@-webkit-keyframes bodong {
0% {
height: px2rem(5px);
}
30% {
height: px2rem(10px);
}
60% {
height: px2rem(15px);
}
80% {
height: px2rem(10px);
}
100% {
height: px2rem(5px);
}
}
@keyframes bodong {
0% {
height: px2rem(5px);
}
30% {
height: px2rem(10px);
}
60% {
height: px2rem(15px);
}
80% {
height: px2rem(10px);
}
100% {
height: px2rem(5px);
}
}
}
img {
width: 100%;
height: 100%;
display: block;
}
}
}
.item-end {
height: px2rem(60px);
}
}
</style>
<template> <template>
<div class="hot-teacher" > <section>
<div class="space-between" id="fiveBoxMenu"> <GroupTitle groupTitle="5分钟医学院" groupNum="10"/>
<div class="hot-teacher">
<!-- <div class="space-between" id="fiveBoxMenu">
<img class="img" src="../../images/mins.png"/> <img class="img" src="../../images/mins.png"/>
<div @click="goToPage('')" class="five-more gray fs11"> <div @click="goToPage('')" class="five-more gray fs11">
更多<img src="../../images/right-throw.png" class="thorw-icon"/> 更多<img src="../../images/right-throw.png" class="thorw-icon"/>
</div> </div>
</div> </div> -->
<div :class="index>1 && (index+1 == list.length)?'teacher-item item-end' : 'teacher-item'" :key="index" v-for="(item,index) in list" @click="goToPage(item)"> <div :class="index>1 && (index+1 == list.length)?'teacher-item item-end' : 'teacher-item'" :key="index" v-for="(item,index) in list" @click="goToPage(item)">
<div class="teacher-itemimg"> <div class="teacher-itemimg">
<img v-lazy="item.appImageUrl"/> <img v-lazy="item.appImageUrl"/>
...@@ -33,50 +35,64 @@ ...@@ -33,50 +35,64 @@
</div> </div>
</div> </div>
</div> </div>
<ShowAllItem />
<NoMoreItem v-show="false" />
<SplitLine borderWidth="3px" />
</section>
</template> </template>
<script> <script>
import { pageJumpUrl} from '@/utils/index' import { pageJumpUrl } from '@/utils/index'
import GroupTitle from '@/components/business/group-title';
import NoMoreItem from '@/components/business/no-more-item';
import ShowAllItem from '@/components/business/show-all-item';
import SplitLine from '@/components/business/split-line';
export default { export default {
name: 'YqyFiveMinutes', name: 'YqyFiveMinutes',
data(){ data() {
return { return {
list:[], list: [],
isPlay:false, isPlay: false,
id:'' id: ''
} }
}, },
props:{ components: {
parmData:{ GroupTitle,
type:Array, NoMoreItem,
default:[] ShowAllItem,
} SplitLine
}, },
created(){ // props: {
// parmData: {
// type: Array,
// default: () => []
// }
// },
created() {
let _this = this; let _this = this;
//暂停 //暂停
window.__pauseAudioView = function(parm){ window.__pauseAudioView = function (parm) {
_this.changePlay(_this.id, '2');
_this.changePlay(_this.id,'2');
} }
//开始 //开始
window.__playAudioView = function(parm){ window.__playAudioView = function (parm) {
_this.changePlay(_this.id,'1'); _this.changePlay(_this.id, '1');
} }
window.__closeAudioView = function(parm){ window.__closeAudioView = function (parm) {
_this.changePlay(_this.id,'0'); _this.changePlay(_this.id, '0');
} }
}, },
mounted(){ mounted() {
//console.log(this.parmData); //console.log(this.parmData);
this.list = this.parmData; // this.list = this.parmData;
this.getFiveData()
}, },
methods: { methods: {
goToPage(item){ goToPage(item) {
let obj = { let obj = {
} }
...@@ -84,57 +100,54 @@ export default { ...@@ -84,57 +100,54 @@ export default {
///console.log(item); ///console.log(item);
let url = pageJumpUrl(); let url = pageJumpUrl();
// console.log(url.pageListUrl); // console.log(url.pageListUrl);
let itemData={ let itemData = {
"imageUrl":"", "imageUrl": "",
"appModuleInfo":{ "appModuleInfo": {
"code":"M200", "code": "M200",
"type":4, "type": 4,
"name":"课程介绍页", "name": "课程介绍页",
"paramFlag":1, "paramFlag": 1,
"paramList":[] "paramList": []
} }
}; };
if(!!item){ if (!!item) {
obj = { obj = {
menuLevel:1, menuLevel: 1,
menuCode:'m_home', menuCode: 'm_home',
functionCode:'f_five_minutes', functionCode: 'f_five_minutes',
actionCode:'c_content', actionCode: 'c_content',
labelId:item.id, labelId: item.id,
labelValue :item.title, labelValue: item.title,
} }
itemData.title = item.name; itemData.title = item.name;
itemData.appModuleInfo["paramList"] = [ itemData.appModuleInfo["paramList"] = [{
{ "key": "className",
"key":"className", "value": 'com.picahealth.yunque.activitys.music.WebMusicListActivity###FiveMinutesMedicalSchoolWebViewController',
"value":'com.picahealth.yunque.activitys.music.WebMusicListActivity###FiveMinutesMedicalSchoolWebViewController', "type": 4,
"type":4, "seqNo": 1
"seqNo":1
}, },
{ {
"key":"id", "key": "id",
"value":`${item.id}`, "value": `${item.id}`,
"type":1, "type": 1,
"seqNo":2 "seqNo": 2
} }
] ]
}else{ } else {
obj = { obj = {
menuLevel:1, menuLevel: 1,
menuCode:'m_home', menuCode: 'm_home',
functionCode:'f_five_minutes', functionCode: 'f_five_minutes',
actionCode:'c_all' actionCode: 'c_all'
} }
itemData.appModuleInfo.paramList = [ itemData.appModuleInfo.paramList = [{
{ "key": "className",
"key":"className", "value": 'com.picahealth.yunque.activitys.music.WebMusicListActivity###FiveMinutesMedicalSchoolWebViewController',
"value":'com.picahealth.yunque.activitys.music.WebMusicListActivity###FiveMinutesMedicalSchoolWebViewController', "type": 4,
"type":4, "seqNo": 1
"seqNo":1 }]
}
]
} }
this.pageBurialPoin(obj) this.pageBurialPoin(obj)
...@@ -145,38 +158,38 @@ export default { ...@@ -145,38 +158,38 @@ export default {
}) })
}, },
changePlay(id,str){ changePlay(id, str) {
//play : 1播放 2:暂停 0:初始状态 //play : 1播放 2:暂停 0:初始状态
for(let i=0;i<this.list.length;i++){ for (let i = 0; i < this.list.length; i++) {
if(id == this.list[i].id){ if (id == this.list[i].id) {
if(str == '1'){ if (str == '1') {
this.list[i].play = '1'; this.list[i].play = '1';
}else if(str == '2'){ } else if (str == '2') {
this.list[i].play = '2'; this.list[i].play = '2';
// alert(str) // alert(str)
}else if(str == '0'){ } else if (str == '0') {
this.list[i].play = '0'; this.list[i].play = '0';
} }
}else{ } else {
this.list[i].play = '0'; this.list[i].play = '0';
} }
} }
}, },
playFun(item){ playFun(item) {
this.id = item.id;//保存id this.id = item.id; //保存id
this.changePlay(item.id,'1'); this.changePlay(item.id, '1');
this.pageBurialPoin({ this.pageBurialPoin({
menuLevel:1, menuLevel: 1,
menuCode:'m_home', menuCode: 'm_home',
functionCode:'f_five_minutes', functionCode: 'f_five_minutes',
actionCode:'c_play', actionCode: 'c_play',
labelId:item.id, labelId: item.id,
labelValue :item.title, labelValue: item.title,
}) })
rocNative.openFiveMintusAudio({ rocNative.openFiveMintusAudio({
categoryName: item.categoryName, categoryName: item.categoryName,
...@@ -185,37 +198,65 @@ export default { ...@@ -185,37 +198,65 @@ export default {
id: item.id, id: item.id,
filePath: item.filePath, filePath: item.filePath,
title: item.title, title: item.title,
size:item.size, size: item.size,
isPlay: true, isPlay: true,
fileType: item.fileType, fileType: item.fileType,
totalTime: item.totalTime totalTime: item.totalTime
}) })
},
//五分钟医学院
getFiveData() {
let _this = this,
parm = {
pageNo: 1,
pageSize: 4,
data: {
setEntry: 'headers'
}
}
this.API_GET('contents/fiveMinutes/contents', parm).then(res => {
if (res.respCode == '200') {
_this.list = _this.handelFive(res.fiveMinutesMedicalContentList) || []
} }
})
}, },
//处理五分钟数据 初始化播放状态
handelFive(d) {
for (let i = 0; i < d.length; i++) {
d[i].play = '0';
}
return d;
}
},
} }
</script> </script>
<!-- Add "scoped" attribute to limit CSS to this component only --> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped> <style lang="scss" scoped>
@import '../../style/mixin.scss'; @import '../../style/mixin.scss';
@import '../../style/global.scss'; @import '../../style/global.scss';
.hot-teacher{
.hot-teacher {
width: 100%; width: 100%;
background-color: #fff; background-color: #fff;
padding: 0 px2rem(15px) 0; padding: 0 px2rem(15px) 0;
margin-top:px2rem(15px); .img {
.img{
width: px2rem(109px); width: px2rem(109px);
height: px2rem(22px); height: px2rem(22px);
} }
.thorw-icon{
.thorw-icon {
width: px2rem(8px); width: px2rem(8px);
height: px2rem(8px); height: px2rem(8px);
} }
.five-more{
.five-more {
border: 1px solid RGBA(169, 174, 183, 1); border: 1px solid RGBA(169, 174, 183, 1);
border-radius: px2rem(16px); border-radius: px2rem(16px);
height: px2rem(16px); height: px2rem(16px);
...@@ -223,46 +264,48 @@ export default { ...@@ -223,46 +264,48 @@ export default {
padding: 0 px2rem(5px) 0 px2rem(6px); padding: 0 px2rem(5px) 0 px2rem(6px);
vertical-align: middle; vertical-align: middle;
} }
.teacher-item{
.teacher-item {
width: 100%; width: 100%;
height: px2rem(85px); height: px2rem(75px);
position: relative; position: relative;
margin-top: px2rem(20px); margin-top: px2rem(4px);
&:not(:last-child){ margin: px2rem(4px) 0 px2rem(15px);
&:not(:last-child) {
border-bottom: 1px solid RGBA(240, 240, 240, 1); border-bottom: 1px solid RGBA(240, 240, 240, 1);
} }
.teacher-itemimg{
.teacher-itemimg {
width: px2rem(60px); width: px2rem(60px);
height: px2rem(60px); height: px2rem(60px);
border-radius: px2rem(3px); border-radius: px2rem(3px);
box-shadow: 0 px2rem(2px) px2rem(3px) RGBA(0, 78, 64, 0.1); box-shadow: 0 px2rem(2px) px2rem(3px) RGBA(0, 78, 64, 0.1);
float: left; float: left;
img{ img {
width:100%; width: 100%;
height: 100%; height: 100%;
display: inline-block; display: inline-block;
border-radius: px2rem(3px); border-radius: px2rem(3px);
} }
} }
.five-text{
margin-left:px2rem(70px); .five-text {
margin-left: px2rem(70px);
height: px2rem(38px); height: px2rem(38px);
} }
.teacher-itemname{
.teacher-itemname {
color: RGBA(102, 102, 102, 1); color: RGBA(102, 102, 102, 1);
height: px2rem(38px); height: px2rem(38px);
line-height: px2rem(19px); line-height: px2rem(19px);
font-size: px2rem(14px); font-size: px2rem(14px);
margin-bottom: px2rem(5px); margin-bottom: px2rem(5px);
} }
.five-tag{
.five-tag {
position: relative; position: relative;
padding-right: px2rem(25px); padding-right: px2rem(25px);
.m-tag {
.m-tag{
height: px2rem(17px); height: px2rem(17px);
line-height: px2rem(17px); line-height: px2rem(17px);
padding: 0 px2rem(5px); padding: 0 px2rem(5px);
...@@ -270,101 +313,125 @@ export default { ...@@ -270,101 +313,125 @@ export default {
border-radius: 0 px2rem(3px) px2rem(3px) px2rem(3px); border-radius: 0 px2rem(3px) px2rem(3px) px2rem(3px);
background: #FFFDFA; background: #FFFDFA;
/* background-color: px2rem(17px);*/ /* background-color: px2rem(17px);*/
border:1px solid #FAE5AF; border: 1px solid #FAE5AF;
} }
} }
.m-play {
.m-play{
width: px2rem(28px); width: px2rem(28px);
height: px2rem(28px); height: px2rem(28px);
display: inline-block; display: inline-block;
position:absolute; position: absolute;
right: 0; right: 0;
bottom: 0; bottom: 0;
.play-stop{ .play-opt {
position: relative;
}
.play-opt{
position:relative;
width: px2rem(28px); width: px2rem(28px);
height: px2rem(28px); height: px2rem(28px);
border:1px solid #56c3bb; border: 1px solid #56c3bb;
border-radius:50%; border-radius: 50%;
span{ span {
width:px2rem(3px); width: px2rem(3px);
height: px2rem(5px); height: px2rem(5px);
bottom:px2rem(5px); bottom: px2rem(5px);
position:absolute; position: absolute;
background:#56c3bb; background: #56c3bb;
border-radius: 2px 2px 0 0; border-radius: 2px 2px 0 0;
}
}
.play-stop {
span:first-child {
left: px2rem(8px);
height: px2rem(5px);
}
span:nth-child(2) {
left: px2rem(12px);
height: px2rem(15px);
}
span:nth-child(3) {
left: px2rem(16px);
height: px2rem(10px);
}
}
.play-start {
span {
-webkit-animation: bodong 0.5s infinite ease-in-out alternate;
animation: bodong 0.5s infinite ease-in-out alternate;
}
span:first-child {
left: px2rem(8px);
-webkit-animation-delay: .1s;
animation-delay: .1s;
}
span:nth-child(2) {
left: px2rem(12px);
-webkit-animation-delay: .3s;
animation-delay: .3s;
} }
span:nth-child(3) {
left: px2rem(16px);
-webkit-animation-delay: .5s;
animation-delay: .5s;
} }
.play-stop{
span:first-child{ @-webkit-keyframes bodong {
left:px2rem(8px); 0% {
height: px2rem(5px); height: px2rem(5px);
} }
span:nth-child(2){ 30% {
left:px2rem(12px); height: px2rem(10px);
height: px2rem(15px); }
60% {
height: px2rem(15px);
} }
span:nth-child(3){
left:px2rem(16px); 80% {
height: px2rem(10px); height: px2rem(10px);
} }
100% {
height: px2rem(5px);
}
} }
.play-start{
span{
-webkit-animation: bodong 0.5s infinite ease-in-out alternate; @keyframes bodong {
animation: bodong 0.5s infinite ease-in-out alternate; 0% {
height: px2rem(5px);
} }
span:first-child{
left:px2rem(8px); 30% {
-webkit-animation-delay:.1s; height: px2rem(10px);
animation-delay:.1s;
} }
span:nth-child(2){ 60% {
left:px2rem(12px); height: px2rem(15px);
-webkit-animation-delay:.3s;
animation-delay:.3s;
} }
span:nth-child(3){
left:px2rem(16px); 80% {
-webkit-animation-delay:.5s; height: px2rem(10px);
animation-delay:.5s;
} }
@-webkit-keyframes bodong{
0%{height:px2rem(5px); } 100% {
30%{height:px2rem(10px);} height: px2rem(5px);
60%{height:px2rem(15px);}
80%{height:px2rem(10px);}
100%{height:px2rem(5px);}
} }
@keyframes bodong{
0%{height:px2rem(5px); }
30%{height:px2rem(10px);}
60%{height:px2rem(15px);}
80%{height:px2rem(10px);}
100%{height:px2rem(5px);}
} }
} }
img{
img {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: block; display: block;
} }
} }
} }
.item-end{
.item-end {
height: px2rem(60px); height: px2rem(60px);
} }
} }
......
<template>
<div class="cource-teach" >
<div class="cource-header">
<div class="title" id="new-course">
{{title}}
<div class="get-more gray fs11" @click="goToPage('')">
更多<img src="../../images/right-throw.png" class="thorw-icon"/>
</div>
</div>
</div>
<div class="couse-list">
<div :class="index%2==1 ? 'course-item end-left' : 'course-item'" :key="index" v-for="(item,index) in parmData">
<div class="course-pic" @click="goToPage(item)">
<img v-lazy="item.courseInfoUrl" class="pic-tec" />
<span class="course-tag">{{item.disName}}</span>
</div>
<p class="course-txt">
{{item.name}}
</p>
<div class="course-opt">
<span class="opt-info">{{!item.showTime ? '' : item.showTime + ' |'}} {{item.joinNum}}人已学</span>
<span :class="item.whetherFavors==2?'opt collect':'opt collected'"@click="collectFun(item.whetherFavors,item.id,item.name)">
{{item.whetherFavors==2?'收藏':'已收藏'}}
</span>
</div>
</div>
</div>
<div v-if="parmData.length==0" class="noSource">暂无最新教程数据</div>
</div>
</template>
<script>
//import { setEventByModuleCode } from '@/utils/index'
export default {
name: 'YqyTeacherList',
data () {
return {
list: [],
title:'最新课程',
pageNo:1,
pageSize:6,
}
},
mounted(){
//this.getData()
//this.list = this.parmData;
},
props:{
parmData:{
type:Array,
default: () => []
},
userToken:{
type:String,
default:''
},
},
methods: {
//跳转
goToPage(item){
this.$emit("setRefrshParm",{isclick:true})
this.pageBurialPoin({
menuLevel:1,
menuCode:'m_home',
functionCode:'f_new_course',
actionCode:'c_course',
labelId:item.id,
labelValue :item.name,
})
let itemData = {};
if(item == ''){
itemData = {
"title":item.name,
"imageUrl":"",
"appModuleInfo":{
"code":"M200",
"type":4,
"name":"课程介绍页",
"paramFlag":1,
"paramList":[
{
"key":"className",
"value":"com.picahealth.yunque.activitys.famousteacherschool.AllDiseaseActivity###MicroProfessionMoreTableController",
"type":4,
"seqNo":1
},
{
"key":"disCategoryId",
"value":'-1',
"type":1,
"seqNo":2
}
]
}
};
}else{
itemData = {
"title":item.name,
"imageUrl":"",
"appModuleInfo":{
"code":"M200",
"type":4,
"name":"课程介绍页",
"paramFlag":1,
"paramList":[
{
"key":"className",
"value":"com.picahealth.yunque.activitys.courseplaynew.CourseIntroduceActivity###WeexCourseIntroViewController",
"type":4,
"seqNo":1
},
{
"key":"courseId",
"value":`${item.id}`,
"type":1,
"seqNo":2
}
]
}
};
}
let paramList = this.setEventByModuleCode(itemData);
rocNative.dispatchEventByModuleCode({
modeCode: itemData.appModuleInfo.code,
jsonString: paramList
})
},
//收藏 取消收藏
collectFun(status,id,name){
// alert(this.userToken)
status = status == 1 ? 2 : 1;
this.pageBurialPoin({
menuLevel:1,
menuCode:'m_home',
functionCode:'f_new_course',
actionCode:'c_collect',
labelId:id,
labelValue :name,
})
let _this = this,
parm = {
token:_this.userToken,
type:status,
courseId:id,
setEntry: 'headers',
data:{
token:_this.userToken,
}
}
_this.POST('contents/favors',parm).then(function(res){
if(res.code === '000000'){
_this.handelData(id,status);
}else{
//alert(res.message);
rocNative.showNativeToast({
message: '注册登陆后才能收藏哦'
})
}
})
},
handelData(id,status){
let d = this.parmData;
for(let i=0;i<d.length;i++){
if(id == d[i].id){
d[i].whetherFavors = status;
}
}
},
getData(){
//alert("最新课程");
let _this = this,
parm = {
pageNo:_this.pageNo,
pageSize:_this.pageSize,
token:_this.userToken,
setEntry: 'headers'
}
_this.GET('/contents/HomeNewCourse/NewCourseInformation',parm).then(function(res){
if(res.code === '000000'){
_this.list = res.data.contentAppModels || [];
}
})
}
}
}
</script>
<style lang="scss" scoped>
@import '../../style/global.scss';
@import '../../style/mixin.scss';
.ellipsis{
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
width: px2rem(170px);
}
.couse-list{
overflow: hidden;
}
.get-more{
border: 1px solid RGBA(169, 174, 183, 0.5);
border-radius: px2rem(16px);
padding: 0 px2rem(5px) 0 px2rem(6px);
vertical-align: middle;
display: inline-block;
float: right;
margin-top:px2rem(3px);
height: px2rem(16px);
line-height: px2rem(16px);
font-size: px2rem(11px);
}
.thorw-icon{
width: px2rem(8px);
height: px2rem(8px);
}
.noSource{
text-align: center;
font-size: px2rem(13px);
padding:px2rem(13px) 0;
color:#999;
}
.cource-teach{
padding:0 px2rem(15px);
}
.course-item{
float: left;
margin-bottom: px2rem(19px);
margin-right: px2rem(5px);
}
.end-left{
margin-right: 0;
}
.course-pic{
width:px2rem(170px);
height:px2rem(95px);
border-radius: px2rem(3px);
position: relative;
.pic-tec{
width: 100%;
height: 100%;
border-radius: px2rem(3px);
display: block;
}
.course-tag{
position: absolute;
display: inline-block;
top:px2rem(5px);
left: px2rem(5px);
line-height: px2rem(16px);
height:px2rem(16px);
color:#4A87D4;
padding: 0 px2rem(3px);
background: #FAFCFF;
border:1px solid #C3DCFB;
font-size: px2rem(10px);
border-radius: px2rem(2px);
}
}
.course-txt{
margin-top: px2rem(5px);
font-size: px2rem(14px);
line-height: px2rem(19px);
max-height: px2rem(38px);
color: #333;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
width: px2rem(170px);
}
.opt-info{
color:#999;
}
.course-opt{
font-size: px2rem(12px);
/* margin-top: px2rem(6px);*/
position: relative;
.opt{
display: inline-block;
top:0;
right: 0;
position: absolute;
height: px2rem(18px);
line-height: px2rem(18px);
padding:0 px2rem(4px);
}
.collect{
background: #F7F8F9;
color: #666;
}
.collected{
color: #F47A48;
background: RGBA(244, 122, 72, 0.04);
}
}
.title{
font-size: px2rem(18px);
height: px2rem(18px);
margin: 0 0 px2rem(21px) 0;
font-weight: bold;
color:#28344C
}
</style>
<template> <template>
<div class="cource-teach" > <section>
<div class="cource-header"> <GroupTitle groupNum="6" />
<div class="title" id="new-course"> <div class="cource-teach">
{{title}}
<div class="get-more gray fs11" @click="goToPage('')">
更多<img src="../../images/right-throw.png" class="thorw-icon"/>
</div>
</div>
</div>
<div class="couse-list"> <div class="couse-list">
<div :class="index%2==1 ? 'course-item end-left' : 'course-item'" :key="index" v-for="(item,index) in parmData"> <div
:class="index % 2 == 1 ? 'course-item end-left' : 'course-item'"
v-show="index < 4" v-for="(item, index) in parmData" :key="index">
<div class="course-pic" @click="goToPage(item)"> <div class="course-pic" @click="goToPage(item)">
<img v-lazy="item.courseInfoUrl" class="pic-tec" /> <img v-lazy="item.courseInfoUrl" class="pic-tec" />
<span class="course-tag">{{item.disName}}</span> <span class="course-tag">{{item.disName}}</span>
...@@ -31,97 +25,108 @@ ...@@ -31,97 +25,108 @@
<div v-if="parmData.length==0" class="noSource">暂无最新教程数据</div> <div v-if="parmData.length==0" class="noSource">暂无最新教程数据</div>
</div> </div>
<ShowAllItem />
<NoMoreItem v-show="false" />
<SplitLine borderWidth="3px" />
</section>
</template> </template>
<script> <script>
//import { setEventByModuleCode } from '@/utils/index' //import { setEventByModuleCode } from '@/utils/index'
import GroupTitle from '@/components/business/group-title';
import NoMoreItem from '@/components/business/no-more-item';
import ShowAllItem from '@/components/business/show-all-item';
import SplitLine from '@/components/business/split-line';
export default { export default {
name: 'YqyTeacherList', name: 'YqyTeacherList',
data () { data() {
return { return {
list: [], list: [],
title:'最新课程', title: '最新课程',
pageNo:1, pageNo: 1,
pageSize:6, pageSize: 6,
parmData: []
} }
}, },
mounted(){ components: {
//this.getData() GroupTitle,
NoMoreItem,
ShowAllItem,
SplitLine
},
mounted() {
this.getData()
//this.list = this.parmData; //this.list = this.parmData;
}, },
props:{ props: {
parmData:{ userToken: {
type:Array, type: String,
default:[] default: ''
},
userToken:{
type:String,
default:''
}, },
}, },
methods: { methods: {
//跳转 //跳转
goToPage(item){ goToPage(item) {
this.$emit("setRefrshParm",{isclick:true}) this.$emit("setRefrshParm", {
isclick: true
})
this.pageBurialPoin({ this.pageBurialPoin({
menuLevel:1, menuLevel: 1,
menuCode:'m_home', menuCode: 'm_home',
functionCode:'f_new_course', functionCode: 'f_new_course',
actionCode:'c_course', actionCode: 'c_course',
labelId:item.id, labelId: item.id,
labelValue :item.name, labelValue: item.name,
}) })
let itemData = {}; let itemData = {};
if(item == ''){ if (item == '') {
itemData = { itemData = {
"title":item.name, "title": item.name,
"imageUrl":"", "imageUrl": "",
"appModuleInfo":{ "appModuleInfo": {
"code":"M200", "code": "M200",
"type":4, "type": 4,
"name":"课程介绍页", "name": "课程介绍页",
"paramFlag":1, "paramFlag": 1,
"paramList":[ "paramList": [{
{ "key": "className",
"key":"className", "value": "com.picahealth.yunque.activitys.famousteacherschool.AllDiseaseActivity###MicroProfessionMoreTableController",
"value":"com.picahealth.yunque.activitys.famousteacherschool.AllDiseaseActivity###MicroProfessionMoreTableController", "type": 4,
"type":4, "seqNo": 1
"seqNo":1
}, },
{ {
"key":"disCategoryId", "key": "disCategoryId",
"value":'-1', "value": '-1',
"type":1, "type": 1,
"seqNo":2 "seqNo": 2
} }
] ]
} }
}; };
}else{ } else {
itemData = { itemData = {
"title":item.name, "title": item.name,
"imageUrl":"", "imageUrl": "",
"appModuleInfo":{ "appModuleInfo": {
"code":"M200", "code": "M200",
"type":4, "type": 4,
"name":"课程介绍页", "name": "课程介绍页",
"paramFlag":1, "paramFlag": 1,
"paramList":[ "paramList": [{
{ "key": "className",
"key":"className", "value": "com.picahealth.yunque.activitys.courseplaynew.CourseIntroduceActivity###WeexCourseIntroViewController",
"value":"com.picahealth.yunque.activitys.courseplaynew.CourseIntroduceActivity###WeexCourseIntroViewController", "type": 4,
"type":4, "seqNo": 1
"seqNo":1
}, },
{ {
"key":"courseId", "key": "courseId",
"value":`${item.id}`, "value": `${item.id}`,
"type":1, "type": 1,
"seqNo":2 "seqNo": 2
} }
] ]
} }
...@@ -137,33 +142,33 @@ export default { ...@@ -137,33 +142,33 @@ export default {
}, },
//收藏 取消收藏 //收藏 取消收藏
collectFun(status,id,name){ collectFun(status, id, name) {
// alert(this.userToken) // alert(this.userToken)
status = status == 1 ? 2 : 1; status = status == 1 ? 2 : 1;
this.pageBurialPoin({ this.pageBurialPoin({
menuLevel:1, menuLevel: 1,
menuCode:'m_home', menuCode: 'm_home',
functionCode:'f_new_course', functionCode: 'f_new_course',
actionCode:'c_collect', actionCode: 'c_collect',
labelId:id, labelId: id,
labelValue :name, labelValue: name,
}) })
let _this = this, let _this = this,
parm = { parm = {
token:_this.userToken, token: _this.userToken,
type:status, type: status,
courseId:id, courseId: id,
setEntry: 'headers', setEntry: 'headers',
data:{ data: {
token:_this.userToken, token: _this.userToken,
} }
} }
_this.POST('contents/favors',parm).then(function(res){ _this.POST('contents/favors', parm).then(function (res) {
if(res.code === '000000'){ if (res.code === '000000') {
_this.handelData(id,status); _this.handelData(id, status);
}else{ } else {
//alert(res.message); //alert(res.message);
rocNative.showNativeToast({ rocNative.showNativeToast({
message: '注册登陆后才能收藏哦' message: '注册登陆后才能收藏哦'
...@@ -171,27 +176,27 @@ export default { ...@@ -171,27 +176,27 @@ export default {
} }
}) })
}, },
handelData(id,status){ handelData(id, status) {
let d = this.parmData; let d = this.parmData;
for(let i=0;i<d.length;i++){ for (let i = 0; i < d.length; i++) {
if(id == d[i].id){ if (id == d[i].id) {
d[i].whetherFavors = status; d[i].whetherFavors = status;
} }
} }
}, },
getData(){ getData() {
//alert("最新课程"); //alert("最新课程");
let _this = this, let _this = this,
parm = { parm = {
pageNo:_this.pageNo, pageNo: _this.pageNo,
pageSize:_this.pageSize, pageSize: _this.pageSize,
token:_this.userToken, token: _this.userToken,
setEntry: 'headers' setEntry: 'headers'
} }
_this.GET('/contents/HomeNewCourse/NewCourseInformation',parm).then(function(res){ _this.GET('/contents/HomeNewCourse/NewCourseInformation', parm).then(function (res) {
if(res.code === '000000'){ if (res.code === '000000') {
_this.list = res.data.contentAppModels || []; _this.parmData = res.data.contentAppModels || [];
} }
}) })
} }
...@@ -204,76 +209,87 @@ export default { ...@@ -204,76 +209,87 @@ export default {
@import '../../style/global.scss'; @import '../../style/global.scss';
@import '../../style/mixin.scss'; @import '../../style/mixin.scss';
.ellipsis{ .ellipsis {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
width: px2rem(170px); width: px2rem(170px);
} }
.couse-list{
.couse-list {
overflow: hidden; overflow: hidden;
} }
.get-more{
.get-more {
border: 1px solid RGBA(169, 174, 183, 0.5); border: 1px solid RGBA(169, 174, 183, 0.5);
border-radius: px2rem(16px); border-radius: px2rem(16px);
padding: 0 px2rem(5px) 0 px2rem(6px); padding: 0 px2rem(5px) 0 px2rem(6px);
vertical-align: middle; vertical-align: middle;
display: inline-block; display: inline-block;
float: right; float: right;
margin-top:px2rem(3px); margin-top: px2rem(3px);
height: px2rem(16px); height: px2rem(16px);
line-height: px2rem(16px); line-height: px2rem(16px);
font-size: px2rem(11px); font-size: px2rem(11px);
} }
.thorw-icon{
.thorw-icon {
width: px2rem(8px); width: px2rem(8px);
height: px2rem(8px); height: px2rem(8px);
} }
.noSource{
.noSource {
text-align: center; text-align: center;
font-size: px2rem(13px); font-size: px2rem(13px);
padding:px2rem(13px) 0; padding: px2rem(13px) 0;
color:#999; color: #999;
} }
.cource-teach{
padding:0 px2rem(15px); .cource-teach {
padding: 0 px2rem(15px);
} }
.course-item{
.course-item {
float: left; float: left;
margin-bottom: px2rem(19px); margin-bottom: px2rem(19px);
margin-right: px2rem(5px); margin-right: px2rem(5px);
} }
.end-left{
.end-left {
margin-right: 0; margin-right: 0;
} }
.course-pic{
width:px2rem(170px); .course-pic {
height:px2rem(95px); width: px2rem(170px);
height: px2rem(95px);
border-radius: px2rem(3px); border-radius: px2rem(3px);
position: relative; position: relative;
.pic-tec{
.pic-tec {
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: px2rem(3px); border-radius: px2rem(3px);
display: block; display: block;
} }
.course-tag{
.course-tag {
position: absolute; position: absolute;
display: inline-block; display: inline-block;
top:px2rem(5px); top: px2rem(5px);
left: px2rem(5px); left: px2rem(5px);
line-height: px2rem(16px); line-height: px2rem(16px);
height:px2rem(16px); height: px2rem(16px);
color:#4A87D4; color: #4A87D4;
padding: 0 px2rem(3px); padding: 0 px2rem(3px);
background: #FAFCFF; background: #FAFCFF;
border:1px solid #C3DCFB; border: 1px solid #C3DCFB;
font-size: px2rem(10px); font-size: px2rem(10px);
border-radius: px2rem(2px); border-radius: px2rem(2px);
} }
} }
.course-txt{
.course-txt {
margin-top: px2rem(5px); margin-top: px2rem(5px);
font-size: px2rem(14px); font-size: px2rem(14px);
line-height: px2rem(19px); line-height: px2rem(19px);
...@@ -284,44 +300,44 @@ export default { ...@@ -284,44 +300,44 @@ export default {
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
width: px2rem(170px); width: px2rem(170px);
} }
.opt-info{
color:#999; .opt-info {
color: #999;
} }
.course-opt{
.course-opt {
font-size: px2rem(12px); font-size: px2rem(12px);
/* margin-top: px2rem(6px);*/ /* margin-top: px2rem(6px);*/
position: relative; position: relative;
.opt{ .opt {
display: inline-block; display: inline-block;
top:0; top: 0;
right: 0; right: 0;
position: absolute; position: absolute;
height: px2rem(18px); height: px2rem(18px);
line-height: px2rem(18px); line-height: px2rem(18px);
padding:0 px2rem(4px); padding: 0 px2rem(4px);
} }
.collect{
.collect {
background: #F7F8F9; background: #F7F8F9;
color: #666; color: #666;
} }
.collected{
.collected {
color: #F47A48; color: #F47A48;
background: RGBA(244, 122, 72, 0.04); background: RGBA(244, 122, 72, 0.04);
} }
} }
.title {
.title{
font-size: px2rem(18px); font-size: px2rem(18px);
height: px2rem(18px); height: px2rem(18px);
margin: 0 0 px2rem(21px) 0; margin: 0 0 px2rem(21px) 0;
font-weight: bold; font-weight: bold;
color:#28344C color: #28344C
} }
</style> </style>
...@@ -16,8 +16,8 @@ export default { ...@@ -16,8 +16,8 @@ export default {
default: '课程' default: '课程'
}, },
groupNum: { groupNum: {
type: Number, type: String,
default: 0 default: "0"
} }
} }
} }
......
<template>
<section>
<GroupTitle groupTitle="健康漫画" groupNum="6" />
<div class="font-style">
<div class="teach-opt">
<div class="teach-list">
<div :class="index%2==1?'list-item mr0':'list-item'"
v-for="(item, index) in list" :key="index"
@click="goToDetail(item)"
v-show="index < 4">
<div class="tea-img" :style="'background:'+ item.bgColor">
<img v-lazy="item.doctorImg">
<!-- <span class="learn-p">{{item.joinNum}}人已学</span> -->
<!-- <span class="learn-p">{{item.joinNum | yLocalString}}人已学</span> -->
</div>
<div class="tea-txt">
<!-- <div class="tea-name">{{item.doctorName}}</div> -->
<div class="tea-position">
{{item.doctorHospital}}
</div>
</div>
</div>
</div>
</div>
</div>
<ShowAllItem />
<NoMoreItem v-show="false" />
<!-- <SplitLine borderWidth="3px" /> -->
</section>
</template>
<script>
// import teacherTop from '../../components/teachers/teach-top-new';
// import {
// teacher_back,
// fast_sicon,
// hot_teacher,
// screen,
// teacher,
// teacherother
// } from '../../utils/buryingPoint';
import GroupTitle from '@/components/business/group-title';
import NoMoreItem from '@/components/business/no-more-item';
import ShowAllItem from '@/components/business/show-all-item';
import SplitLine from '@/components/business/split-line';
export default {
components: {
GroupTitle,
NoMoreItem,
ShowAllItem,
SplitLine
},
data() {
return {
topTitle: '讲师集',
isScroll: false,
token: '',
list: [],
isShowCount: true,
followCount: 0,
studyCount: 0,
col: 1, //0综合,1人气,2资源数,3姓名首字母
dir: 2, //1:正序 2:逆序
}
},
mounted() {
let _this = this
this.token = this.$route.query.userToken || this.$route.query.token
// this.getUserInfo()
this.getData();
// window.__getUserInfo = function(parm){
// // alert('in __getUserInfo')
// _this.token = parm.userToken || _this.$route.query.token;
// this.getData();
// }
window.__refresh = function (parm) {
_this.getData();
}
window.addEventListener('scroll', this.handleScroll)
},
computed: {
},
methods: {
handleScroll: function () {
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
if (scrollTop > 25) {
this.isScroll = true;
} else {
this.isScroll = false;
}
},
//获取版本号
getUserInfo() {
rocNative.getUserInfo({
__funcName: '__getUserInfo'
})
},
goToDetail(item) {
let _this = this;
this.$router.push({
path: '/teachersDetail',
query: {
id: item.doctorId,
token: _this.token
}
})
// this.appBuryingPointEntrust({
// ...teacher,
// labelId: item.doctorId,
// labelValue: item.doctorName
// })
},
// 埋点
appBuryingPointEntrust(val) {
rocNative.appBuryingPointEntrust(val)
},
//排序
sortFun() {
this.dir = this.dir == 1 ? 2 : 1;
this.getData()
},
randomBg(d) {
for (let i = 0; i < d.length; i++) {
if (i % 4 == 0) {
d[i].bgColor = '#EBF6F1'
} else if (i % 4 == 1) {
d[i].bgColor = '#EDF3FA'
} else if (i % 4 == 2) {
d[i].bgColor = '#F0F0FA'
} else if (i % 4 == 3) {
d[i].bgColor = '#F6EFE6'
}
}
/// console.log(d);
},
getData() {
let _this = this,
para = {
token: _this.token,
setEntry: 'headers'
}
let url = '/contents/courseDoctor/getAllTeacher/orderby/' + _this.col + '/dir/' + _this.dir
this.GET(url, para).then(res => {
if (res.code == '000000') {
_this.list = res.data.teacherList || [];
_this.followCount = res.data.followCount || 0;
_this.studyCount = res.data.studyCount || 0;
if (_this.list.length > 0) {
_this.randomBg(_this.list);
}
}
})
// this.appBuryingPointEntrust({
// ...teacher,
// labelId: _this.dir,
// labelValue: _this.dir === 1 ? '升序' : '降序'
// })
}
}
}
</script>
<style>
body {
background: #fff
}
</style>
<style lang="scss" scoped>
body {
background: #fff
}
@import '../../style/mixin';
.mint-header {
background-color: rgba($color: #000000, $alpha: 0)
}
.font-style {
width: 100%;
overflow: hidden;
@include sc(0.6rem, #666);
}
.teach-opt {
padding: 0 px2rem(15px) px2rem(15px) px2rem(15px);
.teach-title {
font-size: px2rem(18px);
// padding-bottom: px2rem(0px);
color: #333;
}
.teach-list {
margin-top: px2rem(-14px);
overflow: hidden;
}
.opt-span {
span {
color: #449284;
font-size: px2rem(13px);
display: inline-block;
vertical-align: middle;
height: px2rem(10px);
line-height: px2rem(10px);
img {
display: inline-block;
width: px2rem(15px);
height: px2rem(15px);
vertical-align: middle;
}
}
}
.list-item {
width: px2rem(170px);
margin-right: px2rem(5px);
margin-top: px2rem(15px);
border-radius: 0 0 px2rem(3px) px2rem(3px);
float: left;
box-shadow: 0 px2rem(4px) px2rem(6px) RGBA(0, 0, 0, 0.06);
}
.mr0 {
margin-right: 0
}
.tea-txt {
padding: px2rem(5px) px2rem(7px);
}
.tea-img {
width: px2rem(170px);
height: px2rem(125px);
position: relative;
border-radius: px2rem(3px) px2rem(3px) 0 0;
img {
width: 100%;
height: 100%;
display: block;
border-radius: px2rem(3px) px2rem(3px) 0 0;
}
.learn-p {
padding-left: px2rem(5px);
position: absolute;
width: 100%;
left: 0;
bottom: 0;
background: #333;
background: -webkit-linear-gradient(left, RGBA(0, 0, 0, 0.2), RGBA(0, 0, 0, 0));
background: -o-linear-gradient(right, RGBA(0, 0, 0, 0.2), RGBA(0, 0, 0, 0));
background: -moz-linear-gradient(right, RGBA(0, 0, 0, 0.2), RGBA(0, 0, 0, 0));
background: linear-gradient(to right, RGBA(0, 0, 0, 0.2), RGBA(0, 0, 0, 0));
color: #fff;
font-size: px2rem(11px);
height: px2rem(20px);
line-height: px2rem(20px);
}
}
.tea-name {
padding: 0;
color: #333;
font-size: px2rem(14px);
font-weight: 500;
}
.tea-position {
height: px2rem(53px);
padding: px2rem(7px) px2rem(0px) px2rem(10px);
line-height: px2rem(15px);
font-size: px2rem(14px);
font-weight: 400;
color: #333;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
}
}
.home-header {
height: px2rem(185px);
@include bis('../../images/headerTop.png');
.logo_img {
height: px2rem(85px);
width: px2rem(345px);
text-align: center;
}
}
</style>
...@@ -28,7 +28,7 @@ export default { ...@@ -28,7 +28,7 @@ export default {
width: px2rem(13px); width: px2rem(13px);
// height: px2rem(26px); // height: px2rem(26px);
border: px2rem(1px) solid rgba(200,200,200,1); border: px2rem(1px) solid rgba(200,200,200,1);
border-top: 0; border-bottom: 0;
} }
&-text { &-text {
padding: 0 px2rem(4px); padding: 0 px2rem(4px);
......
...@@ -37,9 +37,12 @@ export default { ...@@ -37,9 +37,12 @@ export default {
// @import '../../style/global.scss'; // @import '../../style/global.scss';
.search-wrapper { .search-wrapper {
display: flex; display: flex;
position: relative; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
z-index: 1;
width: 100%;
background: #fff;
flex-direction: row; flex-direction: row;
padding: px2rem(20px) px2rem(10px) px2rem(10px) px2rem(15px); padding: px2rem(20px) px2rem(10px) px2rem(10px) px2rem(15px);
text-align: center; text-align: center;
......
...@@ -16,7 +16,7 @@ export default { ...@@ -16,7 +16,7 @@ export default {
}, },
borderColor: { borderColor: {
type: String, type: String,
default: '#e7e7e7' default: '#F8F8F8'
} }
} }
} }
......
<template>
<section class="font-style">
<teacherTop :backMethod="backMethod" :isScroll="isScroll" :isJSJ="false"></teacherTop>
<div class="teach-opt">
<div class="tea-detail">
<div class="head-img">
<img v-lazy="doctorParm.doctor.avatar_image_url">
</div>
<p class="detail-name">{{doctorParm.doctor.name}}</p>
<p class="detail-intr" style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">
{{doctorParm.doctor.hospital}} {{doctorParm.doctor.title}}
</p>
<div class="detail-info">
<div class="info-item">
<span class="detail-count">{{doctorParm.studyCount.toLocaleString()}}</span>
<p>学习人数</p>
</div>
<div class="info-item">
<span class="detail-count">{{doctorParm.followCount.toLocaleString()}}</span>
<p>关注人数</p>
</div>
</div>
</div>
<div class="tea-new-title plr15">新课上线</div>
<div class="tea-new-line plr15">
<div class="item-new-box">
<div class="item-line" v-for="(item,index) in newsList" :key="index">
<div class="line-img" @click="goToPage(item)">
<img v-lazy="item.imageUrl">
<span class="tag" v-show="item.structureName">{{item.structureName}}</span>
<span class="line-play" @click.stop="goToPage(item)">
<img src="../../images/grey-play.png">
</span>
</div>
<div class="line-name">
{{item.courseName}}
</div>
<div class="line-info">
<span>{{item.publishTime}} | {{item.joinNum.toLocaleString()}}人已学</span>
<span @click.stop="collectFun(item.favorFlag,item.courseId, item.courseName)" :class="item.favorFlag == 2 ? 'btn collect' : 'btn collected'">
{{item.favorFlag == 2?'收藏':'已收藏'}}
</span>
<!-- <span class='btn collected'>已收藏</span> -->
</div>
</div>
<div class="no-more" v-if="newsList.length == 0">暂无数据</div>
</div>
</div>
<div class="grey-box"></div>
<div class="teach-title plr15">课程教学</div>
<div class="opt-span plr15">
<span class="" @click="sortFun">学习人数
<img src="../../images/sort-d.png" v-if="dir == 2">
<img src="../../images/sort-u.png" v-if="dir == 1">
</span>
</div>
<div class="teach-list plr15">
<div :class="index%2==1?'list-item mr0':'list-item'"
v-for="(item,index) in list" @click="goToPage(item)" :key="index">
<div class="tea-img">
<img v-lazy="item.imageUrl">
<span class="learn-p">{{item.joinNum.toLocaleString()}}人已学</span>
</div>
<div class="tea-txt">
<!-- <p class="tea-name">{{item.doctorName}}</p> -->
<div class="tea-position">
{{item.courseName}}
</div>
</div>
</div>
<div class="no-more" v-if="list.length == 0">暂无数据</div>
</div>
</div>
</section>
</template>
<script>
import teacherTop from '../../components/teachers/teach-top';
import {teacher,teacher_info_collect} from '../../utils/buryingPoint';
export default {
components:{
teacherTop
},
data(){
return {
isScroll:false,
backMethod: 'inner',
list: [],
newsList: [],
dir: 2,
doctorId: '',
doctorParm: {
studyCount: 0,
followCount: 0,
doctor: {
app_image_url: '',
avatar_image_url: '',
name: '',
title: ''
}
},
token: null
}
},
mounted(){
// alert(this.$route.query)
let _this = this
this.doctorId = this.$route.query.id;
this.token = this.$route.query.userToken || this.$route.query.token
this.token = this.token || '4A96FD82B250491683D17888482A1F96' || 'A76D20BE3C79409C9520AB5A997737DF',
this.backMethod = this.$route.query.from === 'appHome' ? 'native' : 'inner'
this.getBaseData();
this.getNewClass();
this.getCourse();
window.__refresh = function() {
// alert('in __refresh')
_this.getBaseData();
_this.getNewClass();
_this.getCourse();
}
window.addEventListener('scroll',this.handleScroll)
},
computed: {
},
methods:{
handleScroll: function(){
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
if(scrollTop > 25){
this.isScroll = true;
}else{
this.isScroll = false;
}
},
//跳转
goToPage(item){
let itemData={
"title":item.name,
"imageUrl":"",
"appModuleInfo":{
"code":"M200",
"type":4,
"name":"课程介绍页",
"paramFlag":1,
"paramList":[
{
"key":"className",
"value":"com.picahealth.yunque.activitys.courseplaynew.CourseIntroduceActivity###WeexCourseIntroViewController",
"type":4,
"seqNo":1
},
{
"key":"courseId",
"value":`${item.courseId}`,
"type":1,
"seqNo":2
}
]
}
};
let paramList = this.setEventByModuleCode(itemData);
rocNative.dispatchEventByModuleCode({
modeCode: itemData.appModuleInfo.code,
jsonString: paramList
})
},
collectFun(flag, id, name){
// let flag = this.resourceData.item[val].favorFlag;
flag = flag == 1 ? 2 : 1;
let _this = this,
para = {
type: flag,
courseId: id,
token: this.token || '4A96FD82B250491683D17888482A1F96' || 'A76D20BE3C79409C9520AB5A997737DF',
setEntry: 'headers'
}
// alert('para.token: ' + para.token)
this.POST(`contents/diagnosis/favors`, para).then( res => {
// alert(JSON.stringify(res))
if(res.code === '000000'){
_this.handelData(id, flag);
} else {
rocNative.showNativeToast({
message: '注册登陆后才能收藏哦'
})
}
// this.resourceData.item[val].favorFlag = res.code=='000000'?(flag==1? 2:1):flag;
})
// this.$emit('collect',val,this.resourceData.item[val].favorFlag,id,name)
},
// collectFunOld(status, id, courseName){
// status = status == 1 ? 2 : 1;
// let _this = this,
// parm = {
// token: _this.token || '4A96FD82B250491683D17888482A1F96' || 'A76D20BE3C79409C9520AB5A997737DF',
// type: status,
// courseId: id,
// setEntry: 'headers'
// }
// alert(JSON.stringify(parm))
// // alert(this.token)
// _this.POST('contents/favors',parm).then(function(res){
// alert(JSON.stringify(res))
// if(res.code === '000000'){
// _this.handelData(id,status);
// } else {
// rocNative.showNativeToast({
// message: '请先登录'
// })
// }
// })
// this.appBuryingPointEntrust({
// ...teacher_info_collect,
// labelId: id,
// labelValue: courseName
// })
// },
// 埋点
appBuryingPointEntrust(val) {
rocNative.appBuryingPointEntrust(val)
},
handelData(id,status){
let d = this.newsList;
for(let i=0;i<d.length;i++){
if(id == d[i].courseId){
d[i].favorFlag = status;
}
}
},
sortFun(){
this.dir = this.dir == 2 ? 1 : 2;
this.getCourse();
},
//课程教学
getCourse(){
let _this = this,
para = {
token: this.token,
setEntry: 'headers'
}
let url = '/contents/courseDoctor/courseList/'+_this.doctorId+'/orderby/1/dir/'+_this.dir;
this.GET(url, para).then(res => {
if(res.code == '000000'){
_this.list = res.data || [];
}
})
this.appBuryingPointEntrust({
...teacher,
labelId: _this.dir,
labelValue: _this.dir === 1 ? '升序' : '降序'
})
},
//新课程
getNewClass(){
let _this = this,
para = {
token: this.token,
setEntry: 'headers'
}
let url = '/contents/courseDoctor/latestCourseList/'+_this.doctorId;
this.GET(url, para).then(res => {
if(res.code == '000000'){
_this.newsList = res.data || [];
}
})
},
//基础信息
getBaseData(){
let _this = this,
para = {
token: this.token,
setEntry: 'headers'
}
let url = '/contents/courseDoctor/doctorDetail/'+_this.doctorId;
this.GET(url, para).then(res => {
if(res.code == '000000'){
_this.doctorParm = {
followCount:res.data.followCount,
studyCount:res.data.studyCount,
doctor:res.data.doctor
}
}
})
}
}
}
</script>
<style>
body{background: #fff;height: auto;}
</style>
<style lang="scss" scoped>
body{background: #fff}
@import '../../style/mixin';
.mint-header {
background-color: rgba($color: #000000, $alpha: 0)
}
.font-style {
width: 100%;
overflow: hidden;
@include sc(0.6rem, #666);
}
.tea-detail{
height: px2rem(154px);
position: absolute;
width: 100%;
left: 0;
top:-(px2rem(64px));
z-index: 10;
@include bis('../../images/detaiBg.png');
.head-img{
width: px2rem(45px);
height: px2rem(45px);
border-radius: 100%;
margin: -(px2rem(10px)) auto 0;
background: #D8D8D8;
text-align: center;
img{
width: px2rem(45px);
height: px2rem(45px);
border-radius: 50%;
}
}
.detail-name{
margin-top:px2rem(3px);
line-height: px2rem(20px);
font-size: px2rem(14px);
color:#333;
text-align: center;
}
.detail-intr{
text-align: center;
line-height: px2rem(17px);
height: px2rem(17px);
overflow: hidden;
width: 90%;
margin:0 auto;
font-size: px2rem(12px);
color:#666;
}
.detail-info{
overflow: hidden;
margin-top: px2rem(12px);
.info-item{
width: 50%;
float: left;
text-align: center;
span{
line-height: px2rem(20px);
font-size: px2rem(14px);
color:#333;
}
p{
line-height: px2rem(17px);
font-size: px2rem(12px);
color:#666;
}
}
}
}
.tea-new-title{
font-size: px2rem(18px);
margin: px2rem(15px) 0;
color:#333;
}
.tea-new-line.plr15{padding-left:px2rem(17px);}
.tea-new-line{
width: 100%;
overflow: hidden;
overflow-x: scroll;
-webkit-tap-highlight-color:rgba(0,0,0,0);
outline: 0;
-webkit-overflow-scrolling : touch;
height: px2rem(273px);
.item-new-box{
width: px2rem(10000000px);
}
.item-line{
width: px2rem(345px);
padding-bottom: px2rem(23px);
float: left;
margin-right: px2rem(10px);
.line-img{
width: px2rem(345px);
height: px2rem(191px);
position: relative;
.line-play{
position: absolute;
width: px2rem(60px);
height: px2rem(60px);
left:50%;
top:50%;
margin:-(px2rem(30px)) 0 0 -(px2rem(30px));
}
.tag{
display: inline-block;
background: #fff;
border:1px solid #C3DCFB;
position: absolute;
top:px2rem(5px);
left: px2rem(5px);
font-size: px2rem(10px);
line-height: px2rem(16px);
padding: 0 px2rem(10px);
border-radius: px2rem(2px);
color:#4A87D4;
}
img {
width: 100%;
height:100%;
border-radius: px2rem(6px);
margin-right: px2rem(17px);
}
}
.line-name{
margin-top: px2rem(10px);
font-size: px2rem(16px);
line-height: px2rem(16px);
width: 100%;
overflow: hidden;
height: px2rem(16px);
color:#333;
}
.line-info{
overflow: hidden;
margin-top: px2rem(10px);
span{
display: inline-block;
font-size: px2rem(12px);
color: #999;
line-height: px2rem(18px);
}
.btn{
color:#666;
background: #F7F8F9;
padding: 0 px2rem(5px);
float: right;
margin-right: px2rem(5px);
}
.collected{
color: #F47A48;
background: RGBA(244, 122, 72, 0.04);
}
}
}
}
.grey-box{
width: 100%;
height: px2rem(6px);
background: #F8F8F8;
}
.plr15{
padding-right: px2rem(15px);
padding-left: px2rem(15px);
}
.teach-opt{
padding:px2rem(90px) 0 px2rem(30px) 0;
position: relative;
.teach-title{
font-size: px2rem(18px);
padding-bottom: px2rem(15px);
padding-top: px2rem(15px);
color:#333;
}
.teach-list{
overflow: hidden;
}
.no-more{
text-align: center;
color:#999;
font-size: px2rem(12px);
}
.opt-span{
span{
color:#449284;
font-size: px2rem(13px);
display: inline-block;
vertical-align: middle;
height: px2rem(15px);
line-height: px2rem(15px);
img{
display: inline-block;
width: px2rem(15px);
height: px2rem(15px);
vertical-align: middle;
}
}
}
.list-item{
width: px2rem(170px);
margin-right: px2rem(5px);
margin-top: px2rem(15px);
float: left;
box-shadow: 0 px2rem(4px) px2rem(6px) RGBA(0, 0, 0, 0.06);
}
.mr0{
margin-right: 0
}
.tea-txt{
padding:px2rem(7px);
}
.tea-img{
width: px2rem(170px);
height: px2rem(96px);
position: relative;
img{
width: 100%;
height: 100%;
display: block;
border-radius: px2rem(3px) px2rem(3px) 0 0 ;
}
.learn-p{
padding-left: px2rem(5px);
position: absolute;
width: 100%;
left:0;
bottom: 0;
background: #333;
background: -webkit-linear-gradient(left, RGBA(0, 0, 0, 0.2),RGBA(0, 0, 0, 0));
background: -o-linear-gradient(right, RGBA(0, 0, 0, 0.2),RGBA(0, 0, 0, 0));
background: -moz-linear-gradient(right, RGBA(0, 0, 0, 0.2),RGBA(0, 0, 0, 0));
background: linear-gradient(to right, RGBA(0, 0, 0, 0.2),RGBA(0, 0, 0, 0));
color:#fff;
font-size: px2rem(11px);
height: px2rem(20px);
line-height: px2rem(20px);
}
}
.tea-name{
color:#333;
font-size: px2rem(14px);
padding: px2rem(7px) 0 px2rem(3px) 0;
}
.tea-position{
height: px2rem(38px);
font-size: px2rem(14px);
line-height: px2rem(19px);
color:#333;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
}
}
.home-header {
height: px2rem(185px);
@include bis('../../images/headerTop.png');
.logo_img{
height: px2rem(85px);
width: px2rem(345px);
text-align: center;
}
}
</style>
<template>
<section class="font-style">
<teacherTop :topTitle="topTitle" :isScroll="isScroll" :isShowCount="isShowCount" :studyCount="studyCount" :followCount="followCount"></teacherTop>
<div class="teach-opt">
<div class="teach-title">讲师名录</div>
<div class="opt-span">
<span class="" @click="sortFun">人气
<img src="../../images/sort-u.png" v-if="dir == 1">
<img src="../../images/sort-d.png" v-if="dir == 2">
</span>
</div>
<div class="teach-list">
<div :class="index%2==1?'list-item mr0':'list-item'" v-for="(item, index) in list"
@click="goToDetail(item)" :key="index">
<div class="tea-img" :style="'background:'+ item.bgColor">
<img v-lazy="item.doctorImg">
<span class="learn-p">{{item.joinNum | yLocalString}}人已学</span>
</div>
<div class="tea-txt">
<div class="tea-name">{{item.doctorName}}</div>
<div class="tea-position">
{{item.doctorHospital}}
</div>
</div>
</div>
</div>
</div>
</section>
</template>
<script>
import teacherTop from '../../components/teachers/teach-top-new';
import {teacher_back,fast_sicon,hot_teacher,screen,teacher,teacherother} from '../../utils/buryingPoint';
export default {
components:{
teacherTop
},
data(){
return {
topTitle: '讲师集',
isScroll:false,
token: '',
list:[],
isShowCount:true,
followCount:0,
studyCount:0,
col:1, //0综合,1人气,2资源数,3姓名首字母
dir:2,//1:正序 2:逆序
}
},
mounted(){
let _this = this
this.token = this.$route.query.userToken || this.$route.query.token
// this.getUserInfo()
this.getData();
// window.__getUserInfo = function(parm){
// // alert('in __getUserInfo')
// _this.token = parm.userToken || _this.$route.query.token;
// this.getData();
// }
window.__refresh = function(parm){
_this.getData();
}
window.addEventListener('scroll',this.handleScroll)
},
computed:{
},
methods:{
handleScroll:function(){
var scrollTop=window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
if(scrollTop > 25){
this.isScroll = true;
}else{
this.isScroll = false;
}
},
//获取版本号
getUserInfo(){
rocNative.getUserInfo({
__funcName: '__getUserInfo'
})
},
goToDetail(item){
let _this = this;
this.$router.push({
path: '/teachersDetail',
query:{
id: item.doctorId,
token: _this.token
}
})
this.appBuryingPointEntrust({
...teacher,
labelId: item.doctorId,
labelValue: item.doctorName
})
},
// 埋点
appBuryingPointEntrust(val) {
rocNative.appBuryingPointEntrust(val)
},
//排序
sortFun(){
this.dir = this.dir == 1 ? 2 : 1;
this.getData()
},
randomBg(d){
for(let i=0;i<d.length;i++){
if(i%4 == 0){
d[i].bgColor = '#EBF6F1'
}else if(i%4 == 1){
d[i].bgColor = '#EDF3FA'
}else if(i%4 == 2){
d[i].bgColor = '#F0F0FA'
}else if(i%4 == 3){
d[i].bgColor = '#F6EFE6'
}
}
/// console.log(d);
},
getData(){
let _this = this,
para = {
token: _this.token,
setEntry: 'headers'
}
let url = '/contents/courseDoctor/getAllTeacher/orderby/'+_this.col+'/dir/'+_this.dir
this.GET(url, para).then(res => {
if(res.code == '000000'){
_this.list = res.data.teacherList || [];
_this.followCount = res.data.followCount || 0;
_this.studyCount = res.data.studyCount || 0;
if(_this.list.length>0){
_this.randomBg(_this.list);
}
}
})
this.appBuryingPointEntrust({
...teacher,
labelId: _this.dir,
labelValue: _this.dir === 1 ? '升序' : '降序'
})
}
}
}
</script>
<style>
body{background: #fff}
</style>
<style lang="scss" scoped>
body{background: #fff}
@import '../../style/mixin';
.mint-header {
background-color: rgba($color: #000000, $alpha: 0)
}
.font-style {
width: 100%;
overflow: hidden;
@include sc(0.6rem, #666);
}
.teach-opt{
padding:px2rem(26px) px2rem(15px) px2rem(15px) px2rem(15px);
.teach-title{
font-size: px2rem(18px);
// padding-bottom: px2rem(0px);
color:#333;
}
.teach-list{
overflow: hidden;
}
.opt-span{
span{
color:#449284;
font-size: px2rem(13px);
display: inline-block;
vertical-align: middle;
height: px2rem(10px);
line-height: px2rem(10px);
img{
display: inline-block;
width: px2rem(15px);
height: px2rem(15px);
vertical-align: middle;
}
}
}
.list-item{
width: px2rem(170px);
margin-right: px2rem(5px);
margin-top: px2rem(15px);
border-radius: 0 0 px2rem(3px) px2rem(3px) ;
float: left;
box-shadow: 0 px2rem(4px) px2rem(6px) RGBA(0, 0, 0, 0.06);
}
.mr0{
margin-right: 0
}
.tea-txt{
padding:px2rem(5px) px2rem(7px) ;
}
.tea-img{
width: px2rem(170px);
height: px2rem(83px);
position: relative;
border-radius: px2rem(3px) px2rem(3px) 0 0 ;
img{
width: 100%;
height: 100%;
display: block;
border-radius: px2rem(3px) px2rem(3px) 0 0 ;
}
.learn-p{
padding-left: px2rem(5px);
position: absolute;
width: 100%;
left:0;
bottom: 0;
background: #333;
background: -webkit-linear-gradient(left, RGBA(0, 0, 0, 0.2),RGBA(0, 0, 0, 0));
background: -o-linear-gradient(right, RGBA(0, 0, 0, 0.2),RGBA(0, 0, 0, 0));
background: -moz-linear-gradient(right, RGBA(0, 0, 0, 0.2),RGBA(0, 0, 0, 0));
background: linear-gradient(to right, RGBA(0, 0, 0, 0.2),RGBA(0, 0, 0, 0));
color:#fff;
font-size: px2rem(11px);
height: px2rem(20px);
line-height: px2rem(20px);
}
}
.tea-name{
padding: 0;
color:#333;
font-size: px2rem(14px);
font-weight: 500;
}
.tea-position{
height: px2rem(30px);
font-size: px2rem(12px);
line-height: px2rem(15px);
color: #666;
font-weight: 400;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
}
}
.home-header {
height: px2rem(185px);
@include bis('../../images/headerTop.png');
.logo_img{
height: px2rem(85px);
width: px2rem(345px);
text-align: center;
}
}
</style>
<template>
<section>
<GroupTitle groupTitle="讲师" groupNum="6" />
<div class="font-style">
<div class="teach-opt">
<div class="teach-list">
<div :class="index%2==1?'list-item mr0':'list-item'"
v-for="(item, index) in list" :key="index"
@click="goToDetail(item)"
v-show="index < 4">
<div class="tea-img" :style="'background:'+ item.bgColor">
<img v-lazy="item.doctorImg">
<span class="learn-p">{{item.joinNum}}人已学</span>
<!-- <span class="learn-p">{{item.joinNum | yLocalString}}人已学</span> -->
</div>
<div class="tea-txt">
<div class="tea-name">{{item.doctorName}}</div>
<div class="tea-position">
{{item.doctorHospital}}
</div>
</div>
</div>
</div>
</div>
</div>
<ShowAllItem />
<NoMoreItem v-show="false" />
<SplitLine borderWidth="3px" />
</section>
</template>
<script>
// import teacherTop from '../../components/teachers/teach-top-new';
// import {
// teacher_back,
// fast_sicon,
// hot_teacher,
// screen,
// teacher,
// teacherother
// } from '../../utils/buryingPoint';
import GroupTitle from '@/components/business/group-title';
import NoMoreItem from '@/components/business/no-more-item';
import ShowAllItem from '@/components/business/show-all-item';
import SplitLine from '@/components/business/split-line';
export default {
components: {
GroupTitle,
NoMoreItem,
ShowAllItem,
SplitLine
},
data() {
return {
topTitle: '讲师集',
isScroll: false,
token: '',
list: [],
isShowCount: true,
followCount: 0,
studyCount: 0,
col: 1, //0综合,1人气,2资源数,3姓名首字母
dir: 2, //1:正序 2:逆序
}
},
mounted() {
let _this = this
this.token = this.$route.query.userToken || this.$route.query.token
// this.getUserInfo()
this.getData();
// window.__getUserInfo = function(parm){
// // alert('in __getUserInfo')
// _this.token = parm.userToken || _this.$route.query.token;
// this.getData();
// }
window.__refresh = function (parm) {
_this.getData();
}
window.addEventListener('scroll', this.handleScroll)
},
computed: {
},
methods: {
handleScroll: function () {
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
if (scrollTop > 25) {
this.isScroll = true;
} else {
this.isScroll = false;
}
},
//获取版本号
getUserInfo() {
rocNative.getUserInfo({
__funcName: '__getUserInfo'
})
},
goToDetail(item) {
let _this = this;
this.$router.push({
path: '/details',
query: {
id: item.doctorId,
token: _this.token
}
})
// this.appBuryingPointEntrust({
// ...teacher,
// labelId: item.doctorId,
// labelValue: item.doctorName
// })
},
// 埋点
appBuryingPointEntrust(val) {
rocNative.appBuryingPointEntrust(val)
},
//排序
sortFun() {
this.dir = this.dir == 1 ? 2 : 1;
this.getData()
},
randomBg(d) {
for (let i = 0; i < d.length; i++) {
if (i % 4 == 0) {
d[i].bgColor = '#EBF6F1'
} else if (i % 4 == 1) {
d[i].bgColor = '#EDF3FA'
} else if (i % 4 == 2) {
d[i].bgColor = '#F0F0FA'
} else if (i % 4 == 3) {
d[i].bgColor = '#F6EFE6'
}
}
/// console.log(d);
},
getData() {
let _this = this,
para = {
token: _this.token,
setEntry: 'headers'
}
let url = '/contents/courseDoctor/getAllTeacher/orderby/' + _this.col + '/dir/' + _this.dir
this.GET(url, para).then(res => {
if (res.code == '000000') {
_this.list = res.data.teacherList || [];
_this.followCount = res.data.followCount || 0;
_this.studyCount = res.data.studyCount || 0;
if (_this.list.length > 0) {
_this.randomBg(_this.list);
}
}
})
// this.appBuryingPointEntrust({
// ...teacher,
// labelId: _this.dir,
// labelValue: _this.dir === 1 ? '升序' : '降序'
// })
}
}
}
</script>
<style>
body {
background: #fff
}
</style>
<style lang="scss" scoped>
body {
background: #fff
}
@import '../../style/mixin';
.mint-header {
background-color: rgba($color: #000000, $alpha: 0)
}
.font-style {
width: 100%;
overflow: hidden;
@include sc(0.6rem, #666);
}
.teach-opt {
padding: 0 px2rem(15px) px2rem(15px) px2rem(15px);
.teach-title {
font-size: px2rem(18px);
// padding-bottom: px2rem(0px);
color: #333;
}
.teach-list {
margin-top: px2rem(-14px);
overflow: hidden;
}
.opt-span {
span {
color: #449284;
font-size: px2rem(13px);
display: inline-block;
vertical-align: middle;
height: px2rem(10px);
line-height: px2rem(10px);
img {
display: inline-block;
width: px2rem(15px);
height: px2rem(15px);
vertical-align: middle;
}
}
}
.list-item {
width: px2rem(170px);
margin-right: px2rem(5px);
margin-top: px2rem(15px);
border-radius: 0 0 px2rem(3px) px2rem(3px);
float: left;
box-shadow: 0 px2rem(4px) px2rem(6px) RGBA(0, 0, 0, 0.06);
}
.mr0 {
margin-right: 0
}
.tea-txt {
padding: px2rem(5px) px2rem(7px);
}
.tea-img {
width: px2rem(170px);
height: px2rem(83px);
position: relative;
border-radius: px2rem(3px) px2rem(3px) 0 0;
img {
width: 100%;
height: 100%;
display: block;
border-radius: px2rem(3px) px2rem(3px) 0 0;
}
.learn-p {
padding-left: px2rem(5px);
position: absolute;
width: 100%;
left: 0;
bottom: 0;
background: #333;
background: -webkit-linear-gradient(left, RGBA(0, 0, 0, 0.2), RGBA(0, 0, 0, 0));
background: -o-linear-gradient(right, RGBA(0, 0, 0, 0.2), RGBA(0, 0, 0, 0));
background: -moz-linear-gradient(right, RGBA(0, 0, 0, 0.2), RGBA(0, 0, 0, 0));
background: linear-gradient(to right, RGBA(0, 0, 0, 0.2), RGBA(0, 0, 0, 0));
color: #fff;
font-size: px2rem(11px);
height: px2rem(20px);
line-height: px2rem(20px);
}
}
.tea-name {
padding: 0;
color: #333;
font-size: px2rem(14px);
font-weight: 500;
}
.tea-position {
height: px2rem(30px);
font-size: px2rem(12px);
line-height: px2rem(15px);
color: #666;
font-weight: 400;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
}
}
.home-header {
height: px2rem(185px);
@include bis('../../images/headerTop.png');
.logo_img {
height: px2rem(85px);
width: px2rem(345px);
text-align: center;
}
}
</style>
<template>
<div class="wrapper" :class="{active:isScroll}">
<!-- <div class="status-bar"></div> -->
<div class="top-header" :class="{active:isScroll}">
<div class="content left-icon" @click="goBack()">
<img v-if="!isScroll" border="0" src="https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/left-icon-white.png" alt="">
<img v-if="isScroll" border="0" src="https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/left-icon.png" alt="">
</div>
<div v-if="isScroll && isJSJ" class="content title" :class="{active:isScroll}">讲师集</div>
<div v-if="isScroll && !isJSJ" class="content title" :class="{active:isScroll}">云鹊医讲师</div>
<!-- <div class="content right-icon" @click="share()">
<img v-if="!isScroll" border="0" src="https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/right-icon-white.png" alt="">
<img v-if="isScroll" border="0" src="https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/right-icon.png" alt="">
</div> -->
</div>
</div>
</template>
<script>
import {teacher_back} from '../../utils/buryingPoint.js';
// import {shareUrl} from '@/utils/index'
import {shareUrl} from '../../utils/index.js'
export default {
name:'MyHeader',
props:{
isOpacity:{
type:Boolean,
default:true
},
isScroll:{
type:Boolean,
default:false
},
isShare:{
type:Boolean,
default:true
},
doctorId:{
type:String,
default:""
},
backMethod: {
type: String,
default: 'native'
},
isJSJ: {
type: Boolean,
default: true
}
},
computed: {
topTitle2() {
return this.topTitle
}
},
mounted(){
// console.log(this.isShare);
console.log(shareUrl);
console.log(`${shareUrl}`+'?doctorId='+this.doctorId)
},
methods:{
// backPre(){
// if(this.backMethod === 'inner') {
// this.$router.go(-1)
// } else {
// rocNative.goBack()
// }
// },
goBack(){
if(this.backMethod === 'inner') {
this.$router.go(-1)
} else {
rocNative.goBack()
}
},
share(){
rocNative.shareWechat({
title1:'个人评价',
title2:'个人评价出现了喔',
shareUrl:`${shareUrl}gpr#/home`+'?doctorId='+this.doctorId,
type:6,
shareImageUrl:'https://file.yunqueyi.com/logo.png?version='+new Date().getTime(),
shareId:0
})
this.buryingPointShare();
},
/////////埋点//////////
//返回
buryingPointBack:function(){
rocNative.appBuryingPointEntrust({
...teacher_back,
functionCode:'f_gpranking',
actionCode:'c_back',
labelValue:'返回',
createdTime:new Date().getTime()
})
},
//分享
buryingPointShare:function(){
rocNative.appBuryingPointEntrust({
...teacher_back,
functionCode:'f_gpranking',
actionCode:'c_share',
labelValue:'分享',
createdTime:new Date().getTime()
})
},
}
}
</script>
<style lang="scss" scoped>
@import '../../style/mixin';
.wrapper{
position:fixed;
top: 0;
width:100%;
z-index:100000000;
/**************表头******************/
.top-header{
display:flex;
display:-webkit-flex;
flex-direction: row;
// justify-content:center;//这个会整体居中,但是使用一些左右不等的margin时,会影响效果
align-items:center;
width:100%;
height:px2rem(45px);//header高度
margin-top:px2rem(25px);///////////statusbar高度!!!!!!!!!!!!!!!!!!!!!默认使用此高度
}
.top-header.active{
// margin-top:0;
border-bottom:px2rem(2px) solid #e7e7e7;
background-color:#fff;
}
.top-header .left-icon{
margin-left:px2rem(15px);
}
.top-header .title{
width:px2rem(116px);
height:px2rem(18px);
line-height:px2rem(18px);
margin-left:px2rem(90px);
text-align:center;
color:#fff;
font-size:px2rem(18px);
}
.top-header .title.active{
color:#000;
}
.top-header .right-icon{
margin-left:px2rem(95px);
}
.top-header .left-icon img,.top-header .right-icon img{
display:block;//这样其外的div可以正好将其包裹住
width:px2rem(25px);
height:px2rem(25px);
}
}
.wrapper.active{
background-color:#fff;
// background-color:rgba(0,0,0,0.84);
// background-color:rgba(255,255,255,0.34)
}
</style>
<template>
<div>
<back-header :isScroll="isScroll" :backMethod="backMethod" :isJSJ="isJSJ"></back-header>
<div class="teach-top">
<div class="tc title">{{parmObj}}</div>
<div class="tc count" v-if="isShowCount">{{studyCount.toLocaleString()}}人学习&nbsp;&nbsp;&nbsp;&nbsp;{{followCount.toLocaleString()}}人关注</div>
</div>
</div>
</template>
<script>
import BackHeader from '../../components/teachers/back-header';
export default {
data () {
return {
bgColor:'#fff',
parmObj:''
}
},
components:{
BackHeader
},
props:{
isShowCount: {
default:false,
type:Boolean
},
followCount: {
type:Number,
default:0
},
studyCount: {
type:Number,
default:0
},
statusBarHeight: {
type:Number,
default:0
},
isScroll:{
type: Boolean,
default: false
},
backMethod: {
type: String,
default: 'native'
},
isJSJ: {
type: Boolean,
default: true
}
},
mounted(){
this.parmObj = this.isShowCount ? '讲师集' : '云鹊医讲师'
},
methods: {
backPre(){
if(this.backMethod === 'inner') {
this.$router.go(-1)
} else {
rocNative.goBack()
}
},
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '../../style/mixin.scss';
@import '../../style/global.scss';
.pt150 {
margin-top: px2rem(150px)
}
.teach-top{
width: 100%;
height: px2rem(145px);
// @include bis('../../images/treatmentHeaderTop.png');
@include bis('../../images/treatmentHeaderTop.png');
.tc{
text-align: center;
}
.back{
position: fixed;
z-index: 110;
left:px2rem(18px);
top: px2rem(25px);
display: inline-block;
width: px2rem(50px);
height: px2rem(50px);
img{
width: px2rem(25px);
height: px2rem(25px);
}
}
.title{
font-size: px2rem(25px);
color: #fff;
padding: px2rem(45px) 0 px2rem(8px);
font-weight: 500
}
.count{
font-size: px2rem(15px);
line-height: px2rem(21px);
color: #fff;
}
}
</style>
<template>
<div class="teach-top">
<span class="back" @click="backPre">
<!-- <img src="../../images/left-icon.png"> -->
<img src="https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/left-icon.png">
</span>
<div class="tc title">{{parmObj}}</div>
<div class="tc count" v-if="isShowCount">{{studyCount.toLocaleString()}}人学习&nbsp;&nbsp;&nbsp;&nbsp;{{followCount.toLocaleString()}}人关注</div>
</div>
</template>
<script>
export default {
data () {
return {
parmObj:''
}
},
props:{
isShowCount: {
default:false,
type:Boolean
},
followCount: {
type:Number,
default:0
},
studyCount: {
type:Number,
default:0
},
statusBarHeight: {
type:Number,
default:0
},
backMethod: {
type: String,
default: 'native'
}
},
mounted(){
this.parmObj = this.isShowCount ? '讲师集' : '云鹊医讲师'
},
methods: {
backPre(){
if(this.backMethod === 'inner') {
this.$router.go(-1)
} else {
rocNative.goBack()
}
},
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '../../style/mixin.scss';
@import '../../style/global.scss';
.teach-top{
width: 100%;
height: px2rem(185px);
position: relative;
@include bis('../../images/headerTop.png');
.tc{
text-align: center;
}
.back{
position: fixed;
z-index: 110;
left:px2rem(18px);
top: px2rem(25px);
display: inline-block;
width: px2rem(50px);
height: px2rem(50px);
img{
width: px2rem(25px);
height: px2rem(25px);
}
}
.title{
font-size: px2rem(25px);
color: #fff;
padding: px2rem(55px) 0 px2rem(8px) 0;
font-weight: 500
}
.count{
font-size: px2rem(15px);
line-height: px2rem(21px);
color: #fff;
}
}
</style>
<template>
<div>
<back-header :isScroll="isScroll" :backMethod="backMethod" :isJSJ="isJSJ"></back-header>
<div class="teach-top">
<!-- <div class="teach-top" :class="{'pt150': isScroll}"> -->
<!-- <div class="back" v-if="isScroll" @click="backPre" style="flex-direction:row;width:100%;">
<img src="../../images/left-icon.png">
<img src="https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/left-icon.png">
<span style="padding-bottom:10px;">dddd</span>
</div> -->
<!-- <TopNav :bgColor="bgColor" :title="navTitle" :isNavFix="isNavFix" :burialPoint="pointStyle"></TopNav> -->
<div class="tc title">{{parmObj}}</div>
<div class="tc count" v-if="isShowCount">{{studyCount.toLocaleString()}}人学习&nbsp;&nbsp;&nbsp;&nbsp;{{followCount.toLocaleString()}}人关注</div>
</div>
</div>
</template>
<script>
import BackHeader from '../../components/teachers/back-header';
export default {
data () {
return {
bgColor:'#fff',
parmObj:''
}
},
components:{
BackHeader
},
props:{
isShowCount: {
default:false,
type:Boolean
},
followCount: {
type:Number,
default:0
},
studyCount: {
type:Number,
default:0
},
statusBarHeight: {
type:Number,
default:0
},
isScroll:{
type: Boolean,
default: false
},
backMethod: {
type: String,
default: 'native'
},
isJSJ: {
type: Boolean,
default: true
}
},
mounted(){
this.parmObj = this.isShowCount ? '讲师集' : '云鹊医讲师'
},
methods: {
backPre(){
if(this.backMethod === 'inner') {
this.$router.go(-1)
} else {
rocNative.goBack()
}
},
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '../../style/mixin.scss';
@import '../../style/global.scss';
.pt150 {
margin-top: px2rem(150px)
}
.teach-top{
width: 100%;
height: px2rem(185px);
@include bis('../../images/headerTop.png');
.tc{
text-align: center;
}
.back{
position: fixed;
z-index: 110;
left:px2rem(18px);
top: px2rem(25px);
display: inline-block;
width: px2rem(50px);
height: px2rem(50px);
img{
width: px2rem(25px);
height: px2rem(25px);
}
}
.title{
font-size: px2rem(25px);
color: #fff;
padding: px2rem(55px) 0 px2rem(8px) 0;
font-weight: 500
}
.count{
font-size: px2rem(15px);
line-height: px2rem(21px);
color: #fff;
}
}
</style>
<template>
<div class="wrapper" :class="{active:isScroll}">
<!-- <div class="status-bar"></div> -->
<div class="top-header" :class="{active:isScroll}">
<div class="content left-icon" @click="backPre()">
<img v-if="!isScroll" border="0" src="https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/left-icon-white.png" alt="">
<img v-if="isScroll" border="0" src="https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/left-icon.png" alt="">
</div>
<div v-if="isScroll" class="content title" :class="{active:isScroll}">{{title}}</div>
<div v-if="!showShare" class="content right-icon" @click="share()">
<img v-if="!isScroll" border="0" src="https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/right-icon-white.png" alt="">
<img v-if="isScroll" border="0" src="https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/right-icon.png" alt="">
</div>
</div>
</div>
</template>
<script>
import {mapMutations} from 'vuex'
// import {shareUrl} from '@/utils/index'
import {shareUrl} from '../../utils/index.js'
export default {
name:'MyHeader',
props:{
isOpacity:{
type:Boolean,
default:true
},
isScroll:{
type:Boolean,
default:false
},
showShare:{
type: Boolean,
default:true
},
doctorId:{
type:String,
default:""
},
title:{
type: String,
default: ""
},
isWeb:{
type: Boolean
}
},
mounted(){
// console.log(this.isShare);
console.log(shareUrl);
console.log(`${shareUrl}`+'?doctorId='+this.doctorId)
},
methods:{
...mapMutations([
'SET_CLEAR_VUEX'
]),
backPre(){
if(this.backMethod === 'inner') {
this.$router.go(-1)
} else {
rocNative.goBack()
}
},
goBack(){
this.$emit('goBack');
if (this.isWeb) {
this.$router.go(-1)
} else {
rocNative.goBack();
}
this.SET_CLEAR_VUEX()
rocNative.goBack();
},
share(){
rocNative.shareWechat({
title1:'个人评价',
title2:'个人评价出现了喔',
shareUrl:`${shareUrl}gpr#/home`+'?doctorId='+this.doctorId,
type:6,
shareImageUrl:'https://file.yunqueyi.com/logo.png?version='+new Date().getTime(),
shareId:0
})
this.buryingPointShare();
},
//分享
buryingPointShare:function(){
rocNative.appBuryingPointEntrust({
...point_granking,
functionCode:'f_gpranking',
actionCode:'c_share',
labelValue:'分享',
createdTime:new Date().getTime()
})
},
}
}
</script>
<style lang="scss" scoped>
@import '../../style/mixin';
.wrapper{
position:fixed;
width:100%;
z-index:100000000;
/**************表头******************/
.top-header{
display:flex;
display:-webkit-flex;
flex-direction: row;
// justify-content:center;//这个会整体居中,但是使用一些左右不等的margin时,会影响效果
align-items:center;
width:100%;
height:px2rem(45px);//header高度
margin-top:px2rem(25px);///////////statusbar高度!!!!!!!!!!!!!!!!!!!!!默认使用此高度
}
.top-header.active{
// margin-top:0;
border-bottom:px2rem(2px) solid #e7e7e7;
background-color:#fff;
}
.top-header .left-icon{
margin-left:px2rem(15px);
}
.top-header .title{
// width:px2rem(116px);
height:px2rem(18px);
line-height:px2rem(18px);
margin-left:px2rem(90px);
text-align:center;
color:#fff;
font-size:px2rem(18px);
}
.top-header .title.active{
color:#000;
}
.top-header .right-icon{
margin-left:px2rem(95px);
}
.top-header .left-icon img,.top-header .right-icon img{
display:block;//这样其外的div可以正好将其包裹住
width:px2rem(25px);
height:px2rem(25px);
}
}
.wrapper.active{
background-color:#fff;
// background-color:rgba(0,0,0,0.84);
// background-color:rgba(255,255,255,0.34)
}
</style>
...@@ -3,30 +3,31 @@ import App from '../App' ...@@ -3,30 +3,31 @@ import App from '../App'
const index = r => require.ensure([], () => r(require('../views/index')), 'index') const index = r => require.ensure([], () => r(require('../views/index')), 'index')
const search = r => require.ensure([], () => r(require('../views/search-index')), 'search') const search = r => require.ensure([], () => r(require('../views/search-index')), 'search')
const result = r => require.ensure([], () => r(require('../views/result')), 'result') const result = r => require.ensure([], () => r(require('../views/result')), 'result')
const details = r => require.ensure([], () => r(require('../views/teacher-details')), 'details')
export default [{ export default [{
path: '/', path: '/',
component: App, //顶层路由,对应index.html component: App, //顶层路由,对应index.html
children: [ //二级路由。对应App.vue children: [
//地址为空时跳转home页面
{ {
path: '', path: '',
redirect: '/index' redirect: '/index'
}, },
//首页城市列表页
{ {
path: '/index', path: '/index',
component: index component: index
}, },
//首页城市列表页
{ {
path: '/search', path: '/search',
component: search component: search
}, },
//首页城市列表页
{ {
path: '/result', path: '/result',
component: result component: result
}, },
{
path: '/details',
component: details
}
] ]
}] }]
module.exports = {
//讲师集页面-糖尿病
teacher_back: {
menuCode: 'm_teacher_dm',
menuToCode: '',
menuLevel: 4,
functionCode: 'f_teachertitle_dm',
actionCode: 'c_back',
labelId: '',
labelValue: '',
createdTime: new Date().getTime(),
duration: 1
},
fast_sicon: {
menuCode: 'm_teacher_dm',
menuToCode: '',
menuLevel: 4,
functionCode: 'f_teachertitle_dm',
actionCode: 'c_fast_sicon',
labelId: '',
labelValue: '',
createdTime: new Date().getTime(),
duration: 1
},
hot_teacher: {
menuCode: 'm_teacher_dm',
menuToCode: '',
menuLevel: 4,
functionCode: 'f_teachertitle_dm',
actionCode: 'c_hot_teacher',
labelId: '',
labelValue: '',
createdTime: new Date().getTime(),
duration: 1
},
teacher: {
menuCode: 'm_teacher_dm',
menuToCode: '',
menuLevel: 4,
functionCode: 'f_teacherdir_dm',
actionCode: 'c_teacher',
labelId: '',
labelValue: '',
createdTime: new Date().getTime(),
duration: 1
},
activity_action: {
menuCode: 'm_teacher_dm',
menuToCode: '',
menuLevel: 4,
// functionCode:'f_activity',
// actionCode: 'c_project',
labelId: '',
labelValue: '',
duration: 1
},
teacherother: {
menuCode: 'm_teacher_dm',
menuToCode: '',
menuLevel: 4,
functionCode: 'f_teacherother_dm',
actionCode: 'c_teacher',
labelId: '',
labelValue: '',
createdTime: new Date().getTime(),
duration: 1
},
screen: {
menuCode: 'm_teacher_dm',
menuToCode: '',
menuLevel: 4,
functionCode: 'f_teacherdir_dm',
actionCode: 'c_screen',
labelId: '',
labelValue: '',
createdTime: new Date().getTime(),
duration: 1
},
//治疗药物集-糖尿病
medicine_back: {
menuCode: 'm_medicine_dm',
menuToCode: '',
menuLevel: 1,
functionCode: 'f_teachertitle_dm',
actionCode: 'c_back',
labelId: '',
labelValue: '',
createdTime: new Date().getTime(),
duration: 1
},
medicine_fast_open: {
menuCode: 'm_medicine_dm',
menuToCode: '',
menuLevel: 1,
functionCode: 'f_teachertitle_dm',
actionCode: 'c_fast_open',
labelId: '',
labelValue: '',
createdTime: new Date().getTime(),
duration: 1
},
medicine_hot_title: {
menuCode: 'm_medicine_dm',
menuToCode: '',
menuLevel: 1,
functionCode: 'f_teachertitle_dm',
actionCode: 'c_hot_title',
labelId: '',
labelValue: '',
createdTime: new Date().getTime(),
duration: 1
},
medicine_course: {
menuCode: 'm_medicine_dm',
menuToCode: '',
menuLevel: 1,
functionCode: 'f_new_course',
actionCode: 'c_course',
labelId: '',
labelValue: '',
createdTime: new Date().getTime(),
duration: 1
},
medicine_collect: {
menuCode: 'm_medicine_dm',
menuToCode: '',
menuLevel: 1,
functionCode: 'f_new_course',
actionCode: 'c_collect',
labelId: '',
labelValue: '',
createdTime: new Date().getTime(),
duration: 1
},
medicine_collect: {
menuCode: 'm_medicine_dm',
menuToCode: '',
menuLevel: 1,
functionCode: 'f_new_course',
actionCode: 'c_collect',
labelId: '',
labelValue: '',
createdTime: new Date().getTime(),
duration: 1
},
medicine_teach_course: {
menuCode: 'm_medicine_dm',
menuToCode: '',
menuLevel: 1,
functionCode: 'f_course',
actionCode: 'c_course',
labelId: '',
labelValue: '',
createdTime: new Date().getTime(),
duration: 1
},
medicine_teach_screen: {
menuCode: 'm_medicine_dm',
menuToCode: '',
menuLevel: 1,
functionCode: 'f_course',
actionCode: 'c_screen',
labelId: '',
labelValue: '',
createdTime: new Date().getTime(),
duration: 1
},
medicine_teach_more: {
menuCode: 'm_medicine_dm',
menuToCode: '',
menuLevel: 1,
functionCode: 'f_course',
actionCode: 'c_more',
labelId: '',
labelValue: '',
createdTime: new Date().getTime(),
duration: 1
},
medicine_need_course: {
menuCode: 'm_medicine_dm',
menuToCode: '',
menuLevel: 1,
functionCode: 'f_recommend',
actionCode: 'c_course',
labelId: '',
labelValue: '',
createdTime: new Date().getTime(),
duration: 1
},
medicine_need_change: {
menuCode: 'm_medicine_dm',
menuToCode: '',
menuLevel: 1,
functionCode: 'f_recommend',
actionCode: 'c_change',
labelId: '',
labelValue: '',
createdTime: new Date().getTime(),
duration: 1
},
//讲师之详情页
teacher_info_back:{
menuCode: 'm_teacher_info',
menuToCode: '',
menuLevel: 4,
functionCode: 'f_teacher_info',
actionCode: 'c_back',
labelId: '',
labelValue: '',
createdTime: new Date().getTime(),
duration: 1
},
teacher_info_fast_sicon:{
menuCode: 'm_teacher_info',
menuToCode: '',
menuLevel: 4,
functionCode: 'f_teacher_info',
actionCode: 'c_fast_sicon',
labelId: '',
labelValue: '',
createdTime: new Date().getTime(),
duration: 1
},
teacher_info_new_course:{
menuCode: 'm_teacher_info',
menuToCode: '',
menuLevel: 4,
functionCode: 'f_new_course',
actionCode: 'c_course',
labelId: '',
labelValue: '',
createdTime: new Date().getTime(),
duration: 1
},
teacher_info_collect:{
menuCode: 'm_teacher_info',
menuToCode: '',
menuLevel: 4,
functionCode: 'f_new_course',
actionCode: 'c_collect',
labelId: '',
labelValue: '',
createdTime: new Date().getTime(),
duration: 1
},
teacher_info_course:{
menuCode: 'm_teacher_info',
menuToCode: '',
menuLevel: 4,
functionCode: 'f_course',
actionCode: 'c_course',
labelId: '',
labelValue: '',
createdTime: new Date().getTime(),
duration: 1
},
teacher_info_screen:{
menuCode: 'm_teacher_info',
menuToCode: '',
menuLevel: 4,
functionCode: 'f_course',
actionCode: 'c_screen',
labelId: '',
labelValue: '',
createdTime: new Date().getTime(),
duration: 1
},
teacher_info_more:{
menuCode: 'm_teacher_info',
menuToCode: '',
menuLevel: 4,
functionCode: 'f_course',
actionCode: 'c_more',
labelId: '',
labelValue: '',
createdTime: new Date().getTime(),
duration: 1
},
teacher_info_other_course:{
menuCode: 'm_teacher_info',
menuToCode: '',
menuLevel: 4,
functionCode: 'f_course_other',
actionCode: 'c_course',
labelId: '',
labelValue: '',
createdTime: new Date().getTime(),
duration: 1
},
//首页
illness_step_icon:{
menuCode: 'm_illness_dm',
menuToCode: '',
menuLevel: 2,
functionCode: 'f_dm',
actionCode: 'c_step_icon',
labelId: '',
labelValue: '',
createdTime: new Date().getTime(),
duration: 1
},
illness_hot_title:{
menuCode: 'm_illness_dm',
menuToCode: '',
menuLevel: 2,
functionCode: 'f_dm',
actionCode: 'c_hot_title',
labelId: '',
labelValue: '',
createdTime: new Date().getTime(),
duration: 1
},
illness_course:{
menuCode: 'm_illness_dm',
menuToCode: '',
menuLevel: 2,
functionCode: 'f_new_course',
actionCode: 'c_course',
labelId: '',
labelValue: '',
createdTime: new Date().getTime(),
duration: 1
},
illness_collect:{
menuCode: 'm_illness_dm',
menuToCode: '',
menuLevel: 2,
functionCode: 'f_new_course',
actionCode: 'c_collect',
labelId: '',
labelValue: '',
createdTime: new Date().getTime(),
duration: 1
},
illness_teach_course:{
menuCode: 'm_illness_dm',
menuToCode: '',
menuLevel: 2,
functionCode: 'f_course',
actionCode: 'c_course',
labelId: '',
labelValue: '',
createdTime: new Date().getTime(),
duration: 1
},
illness_teach_more:{
menuCode: 'm_illness_dm',
menuToCode: '',
menuLevel: 2,
functionCode: 'f_course',
actionCode: 'c_more',
labelId: '',
labelValue: '',
createdTime: new Date().getTime(),
duration: 1
},
illness_need_course:{
menuCode: 'm_illness_dm',
menuToCode: '',
menuLevel: 2,
functionCode: 'f_recommend',
actionCode: 'c_course',
labelId: '',
labelValue: '',
createdTime: new Date().getTime(),
duration: 1
},
illness_need_change:{
menuCode: 'm_illness_dm',
menuToCode: '',
menuLevel: 2,
functionCode: 'f_recommend',
actionCode: 'c_change',
labelId: '',
labelValue: '',
createdTime: new Date().getTime(),
duration: 1
},
//治疗页面
treat_back:{
menuCode: 'm_treat_dm',
menuToCode: '',
menuLevel: 3,
functionCode: 'f_dm',
actionCode: 'c_back',
labelId: '',
labelValue: '',
createdTime: new Date().getTime(),
duration: 1
},
treat_fast_sicon:{
menuCode: 'm_treat_dm',
menuToCode: '',
menuLevel: 3,
functionCode: 'f_dm',
actionCode: 'c_fast_sicon',
labelId: '',
labelValue: '',
createdTime: new Date().getTime(),
duration: 1
},
treat_step_icon:{
menuCode: 'm_treat_dm',
menuToCode: '',
menuLevel: 3,
functionCode: 'f_dm',
actionCode: 'c_step_icon',
labelId: '',
labelValue: '',
createdTime: new Date().getTime(),
duration: 1
},
treat_hot_title:{
menuCode: 'm_treat_dm',
menuToCode: '',
menuLevel: 3,
functionCode: 'f_dm',
actionCode: 'c_hot_title',
labelId: '',
labelValue: '',
createdTime: new Date().getTime(),
duration: 1
},
treat_course:{
menuCode: 'm_treat_dm',
menuToCode: '',
menuLevel: 3,
functionCode: 'f_new_course',
actionCode: 'c_course',
labelId: '',
labelValue: '',
createdTime: new Date().getTime(),
duration: 1
},
treat_collect:{
menuCode: 'm_treat_dm',
menuToCode: '',
menuLevel: 3,
functionCode: 'f_new_course',
actionCode: 'c_collect',
labelId: '',
labelValue: '',
createdTime: new Date().getTime(),
duration: 1
},
treat_teach_course:{
menuCode: 'm_treat_dm',
menuToCode: '',
menuLevel: 3,
functionCode: 'f_course',
actionCode: 'c_course',
labelId: '',
labelValue: '',
createdTime: new Date().getTime(),
duration: 1
},
treat_teach_more:{
menuCode: 'm_treat_dm',
menuToCode: '',
menuLevel: 3,
functionCode: 'f_course',
actionCode: 'c_more',
labelId: '',
labelValue: '',
createdTime: new Date().getTime(),
duration: 1
},
treat_need_course:{
menuCode: 'm_treat_dm',
menuToCode: '',
menuLevel: 3,
functionCode: 'f_recommend',
actionCode: 'c_course',
labelId: '',
labelValue: '',
createdTime: new Date().getTime(),
duration: 1
},
treat_need_change:{
menuCode: 'm_treat_dm',
menuToCode: '',
menuLevel: 3,
functionCode: 'f_recommend',
actionCode: 'c_change',
labelId: '',
labelValue: '',
createdTime: new Date().getTime(),
duration: 1
}
}
\ No newline at end of file
...@@ -226,11 +226,11 @@ export function jumpEvaluatPage(){ ...@@ -226,11 +226,11 @@ export function jumpEvaluatPage(){
return evaluatPageUrl return evaluatPageUrl
} }
// dev地址 // // dev地址
const baseUrl = 'https://dev-sc.yunqueyi.com/' // const baseUrl = 'https://dev-sc.yunqueyi.com/'
const apiUrl = 'https://dev-api.yunqueyi.com/' // const apiUrl = 'https://dev-api.yunqueyi.com/'
const evaluatPageUrl = 'https://dev-phome.yunqueyi.com/gpr/#/home' // const evaluatPageUrl = 'https://dev-phome.yunqueyi.com/gpr/#/home'
export const jumpWebPageUrl = 'https://dev-phome.yunqueyi.com/appl/#/' // export const jumpWebPageUrl = 'https://dev-phome.yunqueyi.com/appl/#/'
// // test1地址 // // test1地址
// const baseUrl = 'https://test1-sc.yunqueyi.com/' // const baseUrl = 'https://test1-sc.yunqueyi.com/'
...@@ -243,11 +243,11 @@ export const jumpWebPageUrl = 'https://dev-phome.yunqueyi.com/appl/#/' ...@@ -243,11 +243,11 @@ export const jumpWebPageUrl = 'https://dev-phome.yunqueyi.com/appl/#/'
// const evaluatPageUrl = 'https://uat-phome.yunqueyi.com/gpr/#/home' // const evaluatPageUrl = 'https://uat-phome.yunqueyi.com/gpr/#/home'
// export const jumpWebPageUrl = 'https://uat-phome.yunqueyi.com/appl/#/' // export const jumpWebPageUrl = 'https://uat-phome.yunqueyi.com/appl/#/'
// // pro地址 // pro地址
// const baseUrl = 'https://sc.yunqueyi.com/' const baseUrl = 'https://sc.yunqueyi.com/'
// const apiUrl = 'https://api.yunqueyi.com/' const apiUrl = 'https://api.yunqueyi.com/'
// const evaluatPageUrl = 'https://phome.yunqueyi.com/gpr/#/home' const evaluatPageUrl = 'https://phome.yunqueyi.com/gpr/#/home'
// export const jumpWebPageUrl = 'https://phome.yunqueyi.com/appl/#/' export const jumpWebPageUrl = 'https://phome.yunqueyi.com/appl/#/'
// 获取BaseUrl // 获取BaseUrl
......
<template> <template>
<section> <section>
<SearchHeader @search="search"/> <SearchHeader @search="search"/>
<SplitLine/> <!-- <SplitLine/> -->
<!-- 没有结果页面 --> <!-- 没有结果页面 -->
<section v-show="!hasResult"> <section v-show="!hasResult" class="mt-100">
<!-- <NoResultPage/> <!-- <NoResultPage/>
<RecommendCourse/> --> <RecommendCourse/> -->
</section> </section>
<!-- 有结果页面 --> <!-- 有结果页面 -->
<section v-show="hasResult"> <section v-show="hasResult" class="mt-100">
<mt-navbar v-model="selected" :fixed="false"> <mt-navbar v-model="selected" :fixed="true" style="top: 58px;">
<mt-tab-item id="0">综合</mt-tab-item> <mt-tab-item id="0">综合</mt-tab-item>
<mt-tab-item id="1">课程</mt-tab-item> <mt-tab-item id="1">课程</mt-tab-item>
<mt-tab-item id="2">五分钟医学</mt-tab-item> <mt-tab-item id="2">五分钟医学</mt-tab-item>
...@@ -27,30 +27,32 @@ ...@@ -27,30 +27,32 @@
<!-- 讲师 --> <!-- 讲师 -->
<!-- <SplitLine borderWidth="3px"/> --> <!-- <SplitLine borderWidth="3px"/> -->
<!-- 健康漫画 --> <!-- 健康漫画 -->
<NoMoreItem/> <!-- <NoMoreItem/>
<GroupTitle/> <GroupTitle/>
<ShowAllItem/> <ShowAllItem/> -->
<CourseList/> <CourseList/>
<CourseAdjust/> <!-- <CourseAdjust/> -->
<FiveMinutes/> <FiveMinutes/>
<TeacherList/>
<HealthComics/>
<NoMoreItem/>
</mt-tab-container-item> </mt-tab-container-item>
<mt-tab-container-item id="1"> <mt-tab-container-item id="1">
aaa <CourseList/>
</mt-tab-container-item> </mt-tab-container-item>
<mt-tab-container-item id="2"> <mt-tab-container-item id="2">
bbb <FiveMinutes/>
</mt-tab-container-item> </mt-tab-container-item>
<mt-tab-container-item id="3"> <mt-tab-container-item id="3">
dddd <TeacherList/>
</mt-tab-container-item> </mt-tab-container-item>
<mt-tab-container-item id="4"> <mt-tab-container-item id="4">
eee <HealthComics/>
</mt-tab-container-item> </mt-tab-container-item>
</mt-tab-container> </mt-tab-container>
</section> </section>
...@@ -67,6 +69,8 @@ import GroupTitle from '../components/business/group-title'; ...@@ -67,6 +69,8 @@ import GroupTitle from '../components/business/group-title';
import CourseList from '../components/business-new/yqy-teacher-list'; import CourseList from '../components/business-new/yqy-teacher-list';
import CourseAdjust from '../components/business-new/yqy-adjust'; import CourseAdjust from '../components/business-new/yqy-adjust';
import FiveMinutes from '../components/business-new/yqy-five-minutes'; import FiveMinutes from '../components/business-new/yqy-five-minutes';
import TeacherList from '@/components/business/teacher-list';
import HealthComics from '@/components/business/health-comics';
import { Navbar, TabItem } from 'mint-ui'; import { Navbar, TabItem } from 'mint-ui';
...@@ -88,7 +92,9 @@ export default { ...@@ -88,7 +92,9 @@ export default {
GroupTitle, GroupTitle,
CourseList, CourseList,
CourseAdjust, CourseAdjust,
FiveMinutes FiveMinutes,
TeacherList,
HealthComics
}, },
watch: { watch: {
selected(val) { selected(val) {
...@@ -140,5 +146,7 @@ export default { ...@@ -140,5 +146,7 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import '../style/mixin.scss'; @import '../style/mixin.scss';
@import '../style/global.scss'; @import '../style/global.scss';
.mt-100 {
padding-top: px2rem(105px);
}
</style> </style>
<template>
<section class="font-style">
<teacherTop :backMethod="backMethod" :isScroll="isScroll" :isJSJ="false"></teacherTop>
<div class="teach-opt">
<div class="tea-detail">
<div class="head-img">
<img v-lazy="doctorParm.doctor.avatar_image_url">
</div>
<p class="detail-name">{{doctorParm.doctor.name}}</p>
<p class="detail-intr" style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">
{{doctorParm.doctor.hospital}} {{doctorParm.doctor.title}}
</p>
<div class="detail-info">
<div class="info-item">
<span class="detail-count">{{doctorParm.studyCount.toLocaleString()}}</span>
<p>学习人数</p>
</div>
<div class="info-item">
<span class="detail-count">{{doctorParm.followCount.toLocaleString()}}</span>
<p>关注人数</p>
</div>
</div>
</div>
<div class="tea-new-title plr15">新课上线</div>
<div class="tea-new-line plr15">
<div class="item-new-box">
<div class="item-line" v-for="(item,index) in newsList" :key="index">
<div class="line-img" @click="goToPage(item)">
<img v-lazy="item.imageUrl">
<span class="tag" v-show="item.structureName">{{item.structureName}}</span>
<span class="line-play" @click.stop="goToPage(item)">
<img src="../images/grey-play.png">
</span>
</div>
<div class="line-name">
{{item.courseName}}
</div>
<div class="line-info">
<span>{{item.publishTime}} | {{item.joinNum.toLocaleString()}}人已学</span>
<span @click.stop="collectFun(item.favorFlag,item.courseId, item.courseName)" :class="item.favorFlag == 2 ? 'btn collect' : 'btn collected'">
{{item.favorFlag == 2?'收藏':'已收藏'}}
</span>
<!-- <span class='btn collected'>已收藏</span> -->
</div>
</div>
<div class="no-more" v-if="newsList.length == 0">暂无数据</div>
</div>
</div>
<div class="grey-box"></div>
<div class="teach-title plr15">课程教学</div>
<div class="opt-span plr15">
<span class="" @click="sortFun">学习人数
<img src="../images/sort-d.png" v-if="dir == 2">
<img src="../images/sort-u.png" v-if="dir == 1">
</span>
</div>
<div class="teach-list plr15">
<div :class="index%2==1?'list-item mr0':'list-item'"
v-for="(item,index) in list" @click="goToPage(item)" :key="index">
<div class="tea-img">
<img v-lazy="item.imageUrl">
<span class="learn-p">{{item.joinNum.toLocaleString()}}人已学</span>
</div>
<div class="tea-txt">
<!-- <p class="tea-name">{{item.doctorName}}</p> -->
<div class="tea-position">
{{item.courseName}}
</div>
</div>
</div>
<div class="no-more" v-if="list.length == 0">暂无数据</div>
</div>
</div>
</section>
</template>
<script>
import teacherTop from '../components/teachers/teach-top';
// import {teacher,teacher_info_collect} from '../utils/buryingPoint';
export default {
components:{
teacherTop
},
data(){
return {
isScroll:false,
backMethod: 'inner',
list: [],
newsList: [],
dir: 2,
doctorId: '',
doctorParm: {
studyCount: 0,
followCount: 0,
doctor: {
app_image_url: '',
avatar_image_url: '',
name: '',
title: ''
}
},
token: null
}
},
mounted(){
// alert(this.$route.query)
let _this = this
this.doctorId = this.$route.query.id;
this.token = this.$route.query.userToken || this.$route.query.token
this.token = this.token || '4A96FD82B250491683D17888482A1F96' || 'A76D20BE3C79409C9520AB5A997737DF',
this.backMethod = this.$route.query.from === 'appHome' ? 'native' : 'inner'
this.getBaseData();
this.getNewClass();
this.getCourse();
window.__refresh = function() {
// alert('in __refresh')
_this.getBaseData();
_this.getNewClass();
_this.getCourse();
}
window.addEventListener('scroll',this.handleScroll)
},
computed: {
},
methods:{
handleScroll: function(){
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
if(scrollTop > 25){
this.isScroll = true;
}else{
this.isScroll = false;
}
},
//跳转
goToPage(item){
let itemData={
"title":item.name,
"imageUrl":"",
"appModuleInfo":{
"code":"M200",
"type":4,
"name":"课程介绍页",
"paramFlag":1,
"paramList":[
{
"key":"className",
"value":"com.picahealth.yunque.activitys.courseplaynew.CourseIntroduceActivity###WeexCourseIntroViewController",
"type":4,
"seqNo":1
},
{
"key":"courseId",
"value":`${item.courseId}`,
"type":1,
"seqNo":2
}
]
}
};
let paramList = this.setEventByModuleCode(itemData);
rocNative.dispatchEventByModuleCode({
modeCode: itemData.appModuleInfo.code,
jsonString: paramList
})
},
collectFun(flag, id, name){
// let flag = this.resourceData.item[val].favorFlag;
flag = flag == 1 ? 2 : 1;
let _this = this,
para = {
type: flag,
courseId: id,
token: this.token || '4A96FD82B250491683D17888482A1F96' || 'A76D20BE3C79409C9520AB5A997737DF',
setEntry: 'headers'
}
// alert('para.token: ' + para.token)
this.POST(`contents/diagnosis/favors`, para).then( res => {
// alert(JSON.stringify(res))
if(res.code === '000000'){
_this.handelData(id, flag);
} else {
rocNative.showNativeToast({
message: '注册登陆后才能收藏哦'
})
}
// this.resourceData.item[val].favorFlag = res.code=='000000'?(flag==1? 2:1):flag;
})
// this.$emit('collect',val,this.resourceData.item[val].favorFlag,id,name)
},
// collectFunOld(status, id, courseName){
// status = status == 1 ? 2 : 1;
// let _this = this,
// parm = {
// token: _this.token || '4A96FD82B250491683D17888482A1F96' || 'A76D20BE3C79409C9520AB5A997737DF',
// type: status,
// courseId: id,
// setEntry: 'headers'
// }
// alert(JSON.stringify(parm))
// // alert(this.token)
// _this.POST('contents/favors',parm).then(function(res){
// alert(JSON.stringify(res))
// if(res.code === '000000'){
// _this.handelData(id,status);
// } else {
// rocNative.showNativeToast({
// message: '请先登录'
// })
// }
// })
// this.appBuryingPointEntrust({
// ...teacher_info_collect,
// labelId: id,
// labelValue: courseName
// })
// },
// 埋点
appBuryingPointEntrust(val) {
rocNative.appBuryingPointEntrust(val)
},
handelData(id,status){
let d = this.newsList;
for(let i=0;i<d.length;i++){
if(id == d[i].courseId){
d[i].favorFlag = status;
}
}
},
sortFun(){
this.dir = this.dir == 2 ? 1 : 2;
this.getCourse();
},
//课程教学
getCourse(){
let _this = this,
para = {
token: this.token,
setEntry: 'headers'
}
let url = '/contents/courseDoctor/courseList/'+_this.doctorId+'/orderby/1/dir/'+_this.dir;
this.GET(url, para).then(res => {
if(res.code == '000000'){
_this.list = res.data || [];
}
})
// this.appBuryingPointEntrust({
// ...teacher,
// labelId: _this.dir,
// labelValue: _this.dir === 1 ? '升序' : '降序'
// })
},
//新课程
getNewClass(){
let _this = this,
para = {
token: this.token,
setEntry: 'headers'
}
let url = '/contents/courseDoctor/latestCourseList/'+_this.doctorId;
this.GET(url, para).then(res => {
if(res.code == '000000'){
_this.newsList = res.data || [];
}
})
},
//基础信息
getBaseData(){
let _this = this,
para = {
token: this.token,
setEntry: 'headers'
}
let url = '/contents/courseDoctor/doctorDetail/'+_this.doctorId;
this.GET(url, para).then(res => {
if(res.code == '000000'){
_this.doctorParm = {
followCount:res.data.followCount,
studyCount:res.data.studyCount,
doctor:res.data.doctor
}
}
})
}
}
}
</script>
<style>
body{background: #fff;height: auto;}
</style>
<style lang="scss" scoped>
body{background: #fff}
@import '../style/mixin';
.mint-header {
background-color: rgba($color: #000000, $alpha: 0)
}
.font-style {
width: 100%;
overflow: hidden;
@include sc(0.6rem, #666);
}
.tea-detail{
height: px2rem(154px);
position: absolute;
width: 100%;
left: 0;
top:-(px2rem(64px));
z-index: 10;
@include bis('../images/detaiBg.png');
.head-img{
width: px2rem(45px);
height: px2rem(45px);
border-radius: 100%;
margin: -(px2rem(10px)) auto 0;
background: #D8D8D8;
text-align: center;
img{
width: px2rem(45px);
height: px2rem(45px);
border-radius: 50%;
}
}
.detail-name{
margin-top:px2rem(3px);
line-height: px2rem(20px);
font-size: px2rem(14px);
color:#333;
text-align: center;
}
.detail-intr{
text-align: center;
line-height: px2rem(17px);
height: px2rem(17px);
overflow: hidden;
width: 90%;
margin:0 auto;
font-size: px2rem(12px);
color:#666;
}
.detail-info{
overflow: hidden;
margin-top: px2rem(12px);
.info-item{
width: 50%;
float: left;
text-align: center;
span{
line-height: px2rem(20px);
font-size: px2rem(14px);
color:#333;
}
p{
line-height: px2rem(17px);
font-size: px2rem(12px);
color:#666;
}
}
}
}
.tea-new-title{
font-size: px2rem(18px);
margin: px2rem(15px) 0;
color:#333;
}
.tea-new-line.plr15{padding-left:px2rem(17px);}
.tea-new-line{
width: 100%;
overflow: hidden;
overflow-x: scroll;
-webkit-tap-highlight-color:rgba(0,0,0,0);
outline: 0;
-webkit-overflow-scrolling : touch;
height: px2rem(273px);
.item-new-box{
width: px2rem(10000000px);
}
.item-line{
width: px2rem(345px);
padding-bottom: px2rem(23px);
float: left;
margin-right: px2rem(10px);
.line-img{
width: px2rem(345px);
height: px2rem(191px);
position: relative;
.line-play{
position: absolute;
width: px2rem(60px);
height: px2rem(60px);
left:50%;
top:50%;
margin:-(px2rem(30px)) 0 0 -(px2rem(30px));
}
.tag{
display: inline-block;
background: #fff;
border:1px solid #C3DCFB;
position: absolute;
top:px2rem(5px);
left: px2rem(5px);
font-size: px2rem(10px);
line-height: px2rem(16px);
padding: 0 px2rem(10px);
border-radius: px2rem(2px);
color:#4A87D4;
}
img {
width: 100%;
height:100%;
border-radius: px2rem(6px);
margin-right: px2rem(17px);
}
}
.line-name{
margin-top: px2rem(10px);
font-size: px2rem(16px);
line-height: px2rem(16px);
width: 100%;
overflow: hidden;
height: px2rem(16px);
color:#333;
}
.line-info{
overflow: hidden;
margin-top: px2rem(10px);
span{
display: inline-block;
font-size: px2rem(12px);
color: #999;
line-height: px2rem(18px);
}
.btn{
color:#666;
background: #F7F8F9;
padding: 0 px2rem(5px);
float: right;
margin-right: px2rem(5px);
}
.collected{
color: #F47A48;
background: RGBA(244, 122, 72, 0.04);
}
}
}
}
.grey-box{
width: 100%;
height: px2rem(6px);
background: #F8F8F8;
}
.plr15{
padding-right: px2rem(15px);
padding-left: px2rem(15px);
}
.teach-opt{
padding:px2rem(90px) 0 px2rem(30px) 0;
position: relative;
.teach-title{
font-size: px2rem(18px);
padding-bottom: px2rem(15px);
padding-top: px2rem(15px);
color:#333;
}
.teach-list{
overflow: hidden;
}
.no-more{
text-align: center;
color:#999;
font-size: px2rem(12px);
}
.opt-span{
span{
color:#449284;
font-size: px2rem(13px);
display: inline-block;
vertical-align: middle;
height: px2rem(15px);
line-height: px2rem(15px);
img{
display: inline-block;
width: px2rem(15px);
height: px2rem(15px);
vertical-align: middle;
}
}
}
.list-item{
width: px2rem(170px);
margin-right: px2rem(5px);
margin-top: px2rem(15px);
float: left;
box-shadow: 0 px2rem(4px) px2rem(6px) RGBA(0, 0, 0, 0.06);
}
.mr0{
margin-right: 0
}
.tea-txt{
padding:px2rem(7px);
}
.tea-img{
width: px2rem(170px);
height: px2rem(96px);
position: relative;
img{
width: 100%;
height: 100%;
display: block;
border-radius: px2rem(3px) px2rem(3px) 0 0 ;
}
.learn-p{
padding-left: px2rem(5px);
position: absolute;
width: 100%;
left:0;
bottom: 0;
background: #333;
background: -webkit-linear-gradient(left, RGBA(0, 0, 0, 0.2),RGBA(0, 0, 0, 0));
background: -o-linear-gradient(right, RGBA(0, 0, 0, 0.2),RGBA(0, 0, 0, 0));
background: -moz-linear-gradient(right, RGBA(0, 0, 0, 0.2),RGBA(0, 0, 0, 0));
background: linear-gradient(to right, RGBA(0, 0, 0, 0.2),RGBA(0, 0, 0, 0));
color:#fff;
font-size: px2rem(11px);
height: px2rem(20px);
line-height: px2rem(20px);
}
}
.tea-name{
color:#333;
font-size: px2rem(14px);
padding: px2rem(7px) 0 px2rem(3px) 0;
}
.tea-position{
height: px2rem(38px);
font-size: px2rem(14px);
line-height: px2rem(19px);
color:#333;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
}
}
.home-header {
height: px2rem(185px);
@include bis('../images/headerTop.png');
.logo_img{
height: px2rem(85px);
width: px2rem(345px);
text-align: center;
}
}
</style>
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册