提交 8c2144c5 编写于 作者: guangjun.yang's avatar guangjun.yang

清理文件

上级 91f6334a
<template>
<div class="cource-teach" id="adjust-u">
<div :class="isFixed ? 'cource-header fixed' : 'cource-header'" :style="{height:menuptop}">
<div class="fixBox">
<div class="bgFill" :style="{height:ptop}"></div>
<div class="font-title">
{{title}}
</div>
</div>
</div>
<div class="couse-cont">
<div class="couse-list" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10" :style="'height:'+clientHeight">
<div :class="index%2==1 ? 'course-item end-left' : 'course-item'" :key="index" v-for="(item,index) in list">
<div class="course-pic" @click="goToPage(item)">
<img :src="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 class="loading-box">
<span class="loading-more-txt" v-if="isLoading">努力加载中...</span>
<span class="no-more" v-if="noMore">没有更多了......</span>
</div>
</div>
<!-- <LOADING v-if="isShowLoading"></LOADING> -->
</div>
</template>
<script>
import {
Loadmore,
Spinner,
InfiniteScroll
} from 'mint-ui';
// import { setEventByModuleCode } from '@/utils/index'
// import LOADING from '../../components/common/loading-new';
export default {
data() {
return {
list: [],
pageNo: 2,
isDisabled: false,
pageSize: 10,
title: '为您推荐',
isCollected: '',
allLoaded: true,
loading: false, //是否滚动加载
isLoading: false, //加载中
noMore: false,
clientHeight: 'auto',
isShowLoading: true,
menuHeight: 0,
ptop: 20,
popHeight: 0,
menuptop: 0,
isReauestBack: true,
}
},
props: {
isFixed: {
default: false,
type: Boolean
},
statusBarHeight: {
type: Number,
default: 0
},
adjustPageNo: {
type: Number,
default: 1
},
userToken: {
type: String,
default: ''
},
parmData: {
type: Array,
default: () => []
},
},
mounted() {
this.list = this.parmData;
// this.$store.dispatch("setSource", []);
//this.pageNo = this.adjustPageNo;
// if(window.__isAndroid){
// this.popHeight = this.statusBarHeight/2
// }else{
// this.popHeight = this.statusBarHeight
// }
// this.menuHeight = this.popHeight + 7 + 40 + "px";
// this.ptop = this.popHeight + "px";
// this.getData();
},
created() {
let _this = this;
window.__getStatusBarHeight = function (parm) {
if (window.__isAndroid) {
_this.popHeight = parseInt(parm.statusBarHeight) / 2
} else {
_this.popHeight = parm.statusBarHeight
}
_this.ptop = _this.popHeight + 'px';
_this.menuptop = _this.popHeight + 36 + 'px'
}
this.getStatusHight()
},
watch: {
},
components: {
// LOADING
},
methods: {
getStatusHight() {
rocNative.getStatusBarHeight({
__funcName: '__getStatusBarHeight'
})
},
//跳转
goToPage(item) {
this.pageBurialPoin({
menuLevel: 1,
menuCode: 'm_home',
functionCode: 'f_recommend',
actionCode: 'c_course',
labelId: item.id,
labelValue: item.name,
})
this.pageNo = 1;
this.$emit("setRefrshParm", {
isclick: true
})
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.id}`,
"type": 1,
"seqNo": 2
}
]
}
};
let paramList = this.setEventByModuleCode(itemData);
rocNative.dispatchEventByModuleCode({
modeCode: itemData.appModuleInfo.code,
jsonString: paramList
})
},
//滑动加载更多
loadMore() {
let _this = this;
if (_this.isReauestBack) {
_this.isLoading = true;
//埋点
this.pageBurialPoin({
menuLevel: 1,
menuCode: 'm_home',
functionCode: 'f_recommend',
actionCode: 'c_load_more'
})
setTimeout(() => {
_this.getData('loadMore');
}, 500)
}
},
//收藏 取消收藏
collectFun(status, id, name) {
// alert(this.userToken);
status = status == 1 ? 2 : 1;
this.pageBurialPoin({
menuLevel: 1,
menuCode: 'm_home',
functionCode: 'f_recommend',
actionCode: 'c_collect',
labelId: id,
labelValue: name,
})
let _this = this,
parm = {
token: _this.userToken,
type: status,
courseId: id,
setEntry: 'headers',
data: {
token: _this.userToken,
}
}
/// alert(this.token)
_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.list;
for (let i = 0; i < d.length; i++) {
if (id == d[i].id) {
d[i].whetherFavors = status;
}
}
},
//加载数据
getData(type) {
let _this = this,
parm = {
pageNo: _this.pageNo,
pageSize: _this.pageSize,
token: _this.userToken,
setEntry: 'headers'
}
_this.GET('contents/courses/recommendCourseList', parm).then(function (res) {
if (res.code === '000000') {
if (res.data == null || res.data.length == 0) {
res.data = [];
_this.isLoading = false;
_this.noMore = true;
_this.loading = true;
_this.isReauestBack = false;
} else {
_this.isReauestBack = true;
_this.list = [..._this.list, ...res.data];
_this.isLoading = true;
_this.noMore = false;
_this.loading = false;
_this.pageNo += 1;
}
}
})
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '../../style/mixin.scss';
@import '../../style/global.scss';
img {
@include bis('../../images/evaluatBg.png');
}
.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
width: px2rem(170px);
}
.couse-list {
overflow: hidden;
}
.bgFill {
background: inherit;
height: px2rem(20px);
}
.cource-teach .cource-header,
.couse-cont {
padding: 0 px2rem(15px);
}
.couse-cont {}
.fixBox {}
.cource-header {
/* margin: 0 0 px2rem(11px) 0;*/
/*height: px2rem(45px);*/
margin-bottom: px2rem(15px);
.font-title {
line-height: px2rem(36px);
height: px2rem(36px);
background: #fff;
}
}
.loading-box {
font-size: px2rem(16px);
padding: px2rem(10px) 0 px2rem(20px) 0;
text-align: center;
span {
color: #999;
}
}
.change-part {
margin-top: px2rem(10px);
float: right;
font-size: px2rem(11px);
line-height: px2rem(11px);
border: 1px solid #A9AEB7;
border-radius: px2rem(9px);
vertical-align: middle;
padding: px2rem(3px) px2rem(5px) px2rem(4px) px2rem(6px);
img {
width: px2rem(12px);
height: px2rem(12px);
}
}
.fixed {
.fixBox {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 112;
.font-title {
background: #44A99B;
padding: 0 px2rem(15px);
color: #fff;
}
}
.bgFill {
background: #44A99B;
}
}
.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%;
display: block;
border-radius: px2rem(3px);
}
.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);
}
.course-opt {
font-size: px2rem(12px);
position: relative;
/*margin-top: px2rem(6px);*/
.opt-info {
color: #999;
}
.opt {
display: inline-block;
height: px2rem(18px);
line-height: px2rem(18px);
padding: 0 px2rem(4px);
position: absolute;
right: 0;
top: 0;
}
.collect {
background: #F7F8F9;
color: #666;
}
.collected {
color: #F47A48;
background: RGBA(244, 122, 72, 0.04);
}
}
.font-title {
font-size: px2rem(18px);
font-weight: bold;
color: #28344C
}
.title {
font-size: px2rem(16px);
text-align: left;
width: px2rem(170px);
max-height: px2rem(20px);
}
</style>
<template>
<div class="hot-teacher">
<div class="title">{{title}}</div>
<!--展示形式 左一 右二-->
<div class="teacher-item space-between">
<div class="category-left" @click="goToPage(leftObj)">
<img class="category-img" :src="leftObj.imageUrl" alt="image"/>
</div>
<div class="category-right">
<div class="right-img" @click="goToPage(rightTop)">
<img class="category-img" :src="rightTop.imageUrl" alt="image"/>
</div>
<div class="right-img mt5" @click="goToPage(rightBottom)">
<img class="category-img" :src="rightBottom.imageUrl" alt="image"/>
</div>
</div>
</div>
<div class="holder-img" @click="goToPage(rightBp)">
<img :src="rightBp.imageUrl" class="category-img" alt="image"/>
</div>
</div>
</template>
<script>
// import { setEventByModuleCode } from '@/utils/index'
export default {
data(){
return{
list: [],
leftObj: {"imageUrl": require('../../images/error.png')},
rightTop: {"imageUrl": require('../../images/error.png')},
rightBottom: {"imageUrl": require('../../images/error.png')},
rightBp: {"imageUrl": require('../../images/error.png')},
title: '专题分类'
}
},
mounted(){
this.getData();
},
methods: {
goToPage(itemData){
this.pageBurialPoin({
menuLevel: 1,
menuCode: 'm_home',
functionCode: 'f_module',
actionCode: 'c_module',
labelId: itemData.id,
labelValue: itemData.name,
})
let paramList = this.setEventByModuleCode(itemData);
rocNative.dispatchEventByModuleCode({
modeCode: itemData.appModuleInfo.code,
jsonString: paramList
})
},
getData(){
let _this = this,
para = {
category: 1,
position: 3,
token: this.userToken,
setEntry: 'headers'
}
this.GET('contents/HomeColumn/Information', para).then(res => {
if(res.code == '000000'){
//console.log(res);
_this.list = res.data && res.data.iconColumnInformationModels || [];
/// console.log(_this.list);
_this.leftObj = _this.list[0] || {};
_this.rightTop = _this.list[1] || {};
_this.rightBottom = _this.list[2] || {};
_this.rightBp = _this.list[3] || {};
}
})
},
},
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '../../style/mixin.scss';
@import '../../style/global.scss';
// img {
// @include bis('../../images/evaluatBg.png');
// }
.title{
font-size: px2rem(18px);
font-weight: bold;
margin-bottom: px2rem(15px);
}
.hot-teacher{
width: 100%;
margin-top: px2rem(30px);
padding: 0 px2rem(15px) px2rem(26px);
.category-img{
width: 100%;
height: 100%;
}
.teacher-item{
width: 100%;
/* height: px2rem(190px);*/
.category-left{
width: px2rem(170px);
height: px2rem(195px);
border-radius: px2rem(3px);
}
.category-img{
width: 100%;
height: 100%;
display: block;
border-radius: px2rem(3px);
}
.mt5{
margin-top: px2rem(5px);
}
.category-right{
width: px2rem(170px);
height: px2rem(190px);
.right-img{
width: px2rem(170px);
height: px2rem(95px);
border-radius: px2rem(3px);
}
}
}
.holder-img{
margin-top:px2rem(5px);
width: 100%;
height: px2rem(126px);
border-radius: px2rem(3px);
img{
border-radius: px2rem(3px);
}
}
}
</style>
<template>
<div class="hot-teacher">
<div class="title">{{title}}</div>
<!--展示形式 左一 右二-->
<div class="teacher-item space-between">
<div class="category-left" @click="goToPage(leftObj)">
<img class="category-img" :src="leftObj.imageUrl"/>
</div>
<div class="category-right">
<div class="right-img" @click="goToPage(rightTop)">
<img class="category-img" :src="rightTop.imageUrl"/>
</div>
<div class="right-img mt5" @click="goToPage(rightBottom)">
<img class="category-img" :src="rightBottom.imageUrl"/>
</div>
</div>
</div>
<div class="holder-img" @click="goToPage(rightBp)">
<img :src="rightBp.imageUrl" class="category-img"/>
</div>
</div>
</template>
<script>
// import { setEventByModuleCode } from '@/utils/index'
export default {
data(){
return{
list:[],
leftObj:{},
rightTop:{},
rightBottom:{},
rightBp:{},
title:'专题分类'
}
},
watch:{
parmData:function(n){
if(n){
this.list = this.parmData;
this.leftObj = this.list[0] || {};
this.rightTop = this.list[1] || {};
this.rightBottom = this.list[2] || {};
this.rightBp = this.list[3] || {};
}
}
},
mounted(){
// this.getData();
},
props:{
parmData:{
type:Array,
default:[]
},
},
methods: {
goToPage(itemData){
//console.log(itemData);
this.pageBurialPoin({
menuLevel:1,
menuCode:'m_home',
functionCode:'f_module',
actionCode:'c_module',
labelId:itemData.id,
labelValue :itemData.name,
})
let paramList = this.setEventByModuleCode(itemData);
rocNative.dispatchEventByModuleCode({
modeCode: itemData.appModuleInfo.code,
jsonString: paramList
})
},
getData(){
let _this = this,
para = {
category: 1,
position:3,
token:this.userToken,
setEntry: 'headers'
}
this.GET('contents/HomeColumn/Information', para).then(res => {
if(res.code == '000000'){
//console.log(res);
_this.list = res.data && res.data.iconColumnInformationModels || [];
/// console.log(_this.list);
_this.leftObj = _this.list[0] || {};
_this.rightTop = _this.list[1] || {};
_this.rightBottom = _this.list[2] || {};
_this.rightBp = _this.list[3] || {};
}
})
},
},
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '../../style/mixin.scss';
@import '../../style/global.scss';
.title{
font-size: px2rem(18px);
font-weight: bold;
margin-bottom: px2rem(15px);
}
.hot-teacher{
width: 100%;
margin-top: px2rem(30px);
padding: 0 px2rem(15px) px2rem(26px);
.category-img{
width: 100%;
height: 100%;
}
.teacher-item{
width: 100%;
/* height: px2rem(190px);*/
.category-left{
width: px2rem(170px);
height: px2rem(195px);
border-radius: px2rem(3px);
}
.category-img{
width: 100%;
height: 100%;
display: block;
border-radius: px2rem(3px);
}
.mt5{
margin-top: px2rem(5px);
}
.category-right{
width: px2rem(170px);
height: px2rem(190px);
.right-img{
width: px2rem(170px);
height: px2rem(95px);
border-radius: px2rem(3px);
}
}
}
.holder-img{
margin-top:px2rem(5px);
width: 100%;
height: px2rem(126px);
border-radius: px2rem(3px);
img{
border-radius: px2rem(3px);
}
}
}
</style>
<template>
<div class="hot-teacher">
<div class="title">{{title}}</div>
<!--展示形式 左一 右二-->
<div class="teacher-item space-between">
<div class="category-left" @click="goToPage(leftObj)">
<img class="category-img" :src="leftObj.imageUrl"/>
</div>
<div class="category-right">
<div class="right-img" @click="goToPage(rightTop)">
<img class="category-img" :src="rightTop.imageUrl"/>
</div>
<div class="right-img mt5" @click="goToPage(rightBottom)">
<img class="category-img" :src="rightBottom.imageUrl"/>
</div>
</div>
</div>
<div class="holder-img" @click="goToPage(rightBp)">
<img :src="rightBp.imageUrl" class="category-img"/>
</div>
</div>
</template>
<script>
// import { setEventByModuleCode } from '@/utils/index'
export default {
data(){
return{
list:[],
leftObj:{},
rightTop:{},
rightBottom:{},
rightBp:{},
title:'专题分类'
}
},
watch:{
parmData:function(n){
if(n){
this.list = this.parmData;
this.leftObj = this.list[0] || {};
this.rightTop = this.list[1] || {};
this.rightBottom = this.list[2] || {};
this.rightBp = this.list[3] || {};
}
}
},
mounted(){
// this.getData();
},
props:{
parmData:{
type:Array,
default:[]
},
},
methods: {
goToPage(itemData){
//console.log(itemData);
this.pageBurialPoin({
menuLevel:1,
menuCode:'m_home',
functionCode:'f_module',
actionCode:'c_module',
labelId:itemData.id,
labelValue :itemData.name,
})
let paramList = this.setEventByModuleCode(itemData);
rocNative.dispatchEventByModuleCode({
modeCode: itemData.appModuleInfo.code,
jsonString: paramList
})
},
getData(){
let _this = this,
para = {
category: 1,
position:3,
token:this.userToken,
setEntry: 'headers'
}
this.GET('contents/HomeColumn/Information', para).then(res => {
if(res.code == '000000'){
//console.log(res);
_this.list = res.data && res.data.iconColumnInformationModels || [];
/// console.log(_this.list);
_this.leftObj = _this.list[0] || {};
_this.rightTop = _this.list[1] || {};
_this.rightBottom = _this.list[2] || {};
_this.rightBp = _this.list[3] || {};
}
})
},
},
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '../../style/mixin.scss';
@import '../../style/global.scss';
.title{
font-size: px2rem(18px);
font-weight: bold;
margin-bottom: px2rem(15px);
}
.hot-teacher{
width: 100%;
margin-top: px2rem(30px);
padding: 0 px2rem(15px) px2rem(26px);
.category-img{
width: 100%;
height: 100%;
}
.teacher-item{
width: 100%;
/* height: px2rem(190px);*/
.category-left{
width: px2rem(170px);
height: px2rem(195px);
border-radius: px2rem(3px);
}
.category-img{
width: 100%;
height: 100%;
display: block;
border-radius: px2rem(3px);
}
.mt5{
margin-top: px2rem(5px);
}
.category-right{
width: px2rem(170px);
height: px2rem(190px);
.right-img{
width: px2rem(170px);
height: px2rem(95px);
border-radius: px2rem(3px);
}
}
}
.holder-img{
margin-top:px2rem(5px);
width: 100%;
height: px2rem(126px);
border-radius: px2rem(3px);
img{
border-radius: px2rem(3px);
}
}
}
</style>
<template>
<div class="hot-teacher">
<div class="title">{{title}}</div>
<!--展示形式 左一 右二-->
<div class="teacher-item space-between">
<div class="category-left" @click="goToPage(parmData[0])">
<img class="category-img" :src="parmData[0].imageUrl"/>
</div>
<div class="category-right">
<div class="right-img" @click="goToPage(parmData[1])">
<img class="category-img" :src="parmData[1].imageUrl"/>
</div>
<div class="right-img mt5" @click="goToPage(parmData[2])">
<img class="category-img" :src="parmData[2].imageUrl"/>
</div>
</div>
</div>
<div class="holder-img" @click="goToPage(parmData[3])">
<img :src="parmData[3].imageUrl" class="category-img"/>
</div>
</div>
</template>
<script>
// import { setEventByModuleCode } from '@/utils/index'
export default {
data(){
return{
list:[],
leftObj:{},
rightTop:{},
rightBottom:{},
rightBp:{},
title:'专题分类',
parmData:[
{imageUrl:''},
{imageUrl:''},
{imageUrl:''},
{imageUrl:''}
]
}
},
mounted(){
this.getData();
},
props:{
},
methods: {
goToPage(itemData){
this.pageBurialPoin({
menuLevel:1,
menuCode:'m_home',
functionCode:'f_module',
actionCode:'c_module',
labelId:itemData.id,
labelValue :itemData.name,
})
let paramList = this.setEventByModuleCode(itemData);
rocNative.dispatchEventByModuleCode({
modeCode: itemData.appModuleInfo.code,
jsonString: paramList
})
},
getData(){
let _this = this,
para = {
category: 1,
position:3,
token: this.userToken,
setEntry: 'headers'
}
this.GET('contents/HomeColumn/Information', para).then(res => {
if(res.code == '000000'){
_this.parmData = res.data && res.data.iconColumnInformationModels || [];
}
})
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '../../style/mixin.scss';
@import '../../style/global.scss';
.title{
font-size: px2rem(18px);
font-weight: bold;
margin-bottom: px2rem(15px);
}
.hot-teacher{
width: 100%;
margin-top: px2rem(30px);
padding: 0 px2rem(15px) px2rem(26px);
.category-img{
width: 100%;
height: 100%;
}
.teacher-item{
width: 100%;
/* height: px2rem(190px);*/
.category-left{
width: px2rem(170px);
height: px2rem(195px);
border-radius: px2rem(3px);
}
.category-img{
width: 100%;
height: 100%;
display: block;
border-radius: px2rem(3px);
}
.mt5{
margin-top: px2rem(5px);
}
.category-right{
width: px2rem(170px);
height: px2rem(190px);
.right-img{
width: px2rem(170px);
height: px2rem(95px);
border-radius: px2rem(3px);
}
}
}
.holder-img{
margin-top:px2rem(5px);
width: 100%;
height: px2rem(126px);
border-radius: px2rem(3px);
img{
border-radius: px2rem(3px);
}
}
}
</style>
<template>
<div class="hot-teacher">
<div class="title">{{title}}</div>
<!--展示形式 左一 右二-->
<div class="teacher-item space-between">
<div class="category-left" @click="goToPage(parmData[0])">
<img class="category-img" :src="parmData[0].imageUrl"/>
</div>
<div class="category-right">
<div class="right-img" @click="goToPage(parmData[1])">
<img class="category-img" :src="parmData[1].imageUrl"/>
</div>
<div class="right-img mt5" @click="goToPage(parmData[2])">
<img class="category-img" :src="parmData[2].imageUrl"/>
</div>
</div>
</div>
<div class="holder-img" @click="goToPage(parmData[3])">
<img :src="parmData[3].imageUrl" class="category-img"/>
</div>
</div>
</template>
<script>
// import { setEventByModuleCode } from '@/utils/index'
export default {
data(){
return{
list:[],
leftObj:{},
rightTop:{},
rightBottom:{},
rightBp:{},
title:'专题分类',
parmData:[
{imageUrl:''},
{imageUrl:''},
{imageUrl:''},
{imageUrl:''}
]
}
},
mounted(){
this.getData();
},
props:{
},
methods: {
goToPage(itemData){
this.pageBurialPoin({
menuLevel:1,
menuCode:'m_home',
functionCode:'f_module',
actionCode:'c_module',
labelId:itemData.id,
labelValue :itemData.name,
})
let paramList = this.setEventByModuleCode(itemData);
rocNative.dispatchEventByModuleCode({
modeCode: itemData.appModuleInfo.code,
jsonString: paramList
})
},
getData(){
let _this = this,
para = {
category: 1,
position:3,
token: this.userToken,
setEntry: 'headers'
}
this.GET('contents/HomeColumn/Information', para).then(res => {
if(res.code == '000000'){
_this.parmData = res.data && res.data.iconColumnInformationModels || [];
}
})
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '../../style/mixin.scss';
@import '../../style/global.scss';
.title{
font-size: px2rem(18px);
font-weight: bold;
margin-bottom: px2rem(15px);
}
.hot-teacher{
width: 100%;
margin-top: px2rem(30px);
padding: 0 px2rem(15px) px2rem(26px);
.category-img{
width: 100%;
height: 100%;
}
.teacher-item{
width: 100%;
/* height: px2rem(190px);*/
.category-left{
width: px2rem(170px);
height: px2rem(195px);
border-radius: px2rem(3px);
}
.category-img{
width: 100%;
height: 100%;
display: block;
border-radius: px2rem(3px);
}
.mt5{
margin-top: px2rem(5px);
}
.category-right{
width: px2rem(170px);
height: px2rem(190px);
.right-img{
width: px2rem(170px);
height: px2rem(95px);
border-radius: px2rem(3px);
}
}
}
.holder-img{
margin-top:px2rem(5px);
width: 100%;
height: px2rem(126px);
border-radius: px2rem(3px);
img{
border-radius: px2rem(3px);
}
}
}
</style>
<template>
<div class="hot-teacher">
<div class="title">{{title}}</div>
<!--展示形式 左一 右二-->
<div class="teacher-item space-between">
<div class="category-left" @click="goToPage(leftObj)">
<img class="category-img" :src="leftObj.imageUrl" alt="image"/>
</div>
<div class="category-right">
<div class="right-img" @click="goToPage(rightTop)">
<img class="category-img" :src="rightTop.imageUrl" alt="image"/>
</div>
<div class="right-img mt5" @click="goToPage(rightBottom)">
<img class="category-img" :src="rightBottom.imageUrl" alt="image"/>
</div>
</div>
</div>
<div class="holder-img" @click="goToPage(rightBp)">
<img :src="rightBp.imageUrl" class="category-img" alt="image"/>
</div>
</div>
</template>
<script>
// import { setEventByModuleCode } from '@/utils/index'
export default {
data(){
return{
list: [],
leftObj: {"imageUrl": require('../../images/error.png')},
rightTop: {"imageUrl": require('../../images/error.png')},
rightBottom: {"imageUrl": require('../../images/error.png')},
rightBp: {"imageUrl": require('../../images/error.png')},
title: '专题分类'
}
},
mounted(){
this.getData();
},
methods: {
goToPage(itemData){
this.pageBurialPoin({
menuLevel: 1,
menuCode: 'm_home',
functionCode: 'f_module',
actionCode: 'c_module',
labelId: itemData.id,
labelValue: itemData.name,
})
let paramList = this.setEventByModuleCode(itemData);
rocNative.dispatchEventByModuleCode({
modeCode: itemData.appModuleInfo.code,
jsonString: paramList
})
},
getData(){
let _this = this,
para = {
category: 1,
position: 3,
token: this.userToken,
setEntry: 'headers'
}
this.GET('contents/HomeColumn/Information', para).then(res => {
if(res.code == '000000'){
//console.log(res);
_this.list = res.data && res.data.iconColumnInformationModels || [];
/// console.log(_this.list);
_this.leftObj = _this.list[0] || {};
_this.rightTop = _this.list[1] || {};
_this.rightBottom = _this.list[2] || {};
_this.rightBp = _this.list[3] || {};
}
})
},
},
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '../../style/mixin.scss';
@import '../../style/global.scss';
// img {
// @include bis('../../images/evaluatBg.png');
// }
.title{
font-size: px2rem(18px);
font-weight: bold;
margin-bottom: px2rem(15px);
}
.hot-teacher{
width: 100%;
margin-top: px2rem(30px);
padding: 0 px2rem(15px) px2rem(26px);
.category-img{
width: 100%;
height: 100%;
}
.teacher-item{
width: 100%;
/* height: px2rem(190px);*/
.category-left{
width: px2rem(170px);
height: px2rem(195px);
border-radius: px2rem(3px);
}
.category-img{
width: 100%;
height: 100%;
display: block;
border-radius: px2rem(3px);
}
.mt5{
margin-top: px2rem(5px);
}
.category-right{
width: px2rem(170px);
height: px2rem(190px);
.right-img{
width: px2rem(170px);
height: px2rem(95px);
border-radius: px2rem(3px);
}
}
}
.holder-img{
margin-top:px2rem(5px);
width: 100%;
height: px2rem(126px);
border-radius: px2rem(3px);
img{
border-radius: px2rem(3px);
}
}
}
</style>
<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 :src="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>
<section>
<GroupTitle groupTitle="5分钟医学院" groupNum="10"/>
<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 :src="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>
<ShowAllItem />
<NoMoreItem v-show="false" />
<SplitLine borderWidth="3px" />
</section>
</template>
<script>
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 {
name: 'YqyFiveMinutes',
data() {
return {
list: [],
isPlay: false,
id: ''
}
},
components: {
GroupTitle,
NoMoreItem,
ShowAllItem,
SplitLine
},
// 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;
this.getFiveData()
},
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
})
},
//五分钟医学院
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>
<!-- 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;
.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(75px);
position: relative;
margin-top: px2rem(4px);
margin: px2rem(4px) 0 px2rem(15px);
&: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-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>
<div class="hello">
<div class="header">
<div class="white gxy fs50">{{resourceData.title}}</div>
<div>
<span class="white fs30 gxyStudy">{{resourceData.studyCount.toLocaleString()}}人学习</span>
<span class="white fs30">{{resourceData.follower.toLocaleString()}}人关注</span>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'YqyHeaderTop',
components: {
},
props: {
resourceData: {
type: Object,
default:()=>{
return {
title: '高血压',
studyCount: 270000,
follower: 1
}
}
}
},
watch: {
message(val){
console.log('val',val);
}
},
data () {
return {
message: ''
}
},
mounted(){
},
methods: {
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '../../style/mixin.scss';
@import '../../style/global.scss';
html,body{
width: px2rem(375px);
height: 100%;
background-color: #F8F8F8;
}
.white{
color: #fff;
}
.fs30{
font-size: px2rem(15px);
}
.gxyStudy{
margin-right: px2rem(19px);
}
.gxy{
font-size: px2rem(25px);
margin: px2rem(25px) 0 px2rem(11px) 0;
}
.header{
width: 100%;
height: px2rem(213px);
background-image: url('http://pica-pro.oss-cn-shanghai.aliyuncs.com/teach/bg.png');
}
.hotTag{
width: 100%;
height: px2rem(150px);
}
.hotTagTitle{
font-size: px2rem(18px);
padding: px2rem(73px) px2rem(15px);
float: left;
background-color: #fff;
}
.cource{
width: 100%;
height: px2rem(350px);
}
.fontTitle{
font-size: px2rem(18px);
padding: 0 0 px2rem(21px) px2rem(15px);
float: left;
width: 100%;
text-align: left;
}
.title{
font-size: px2rem(16px);
}
.courceLeft{
float: left;
padding-left: px2rem(15px);
}
.needLeft{
float: left;
padding: 0 0 px2rem(40px) px2rem(15px);
}
.courceTime{
float: left;
}
.courceImg{
width: px2rem(170px);
height: px2rem(96px);
margin-bottom: px2rem(10px);
}
.courceMore{
font-size: px2rem(15px);
color: #999999;
}
.need{
width: 100%;
height: px2rem(325px);
margin-top: px2rem(35px);
}
</style>
<template>
<div class="hello">
<div class="header">
<div class="white gxy fs50">{{resourceData.title}}</div>
<div>
<span class="white fs30 gxyStudy">{{resourceData.studyCount.toLocaleString()}}人学习</span>
<span class="white fs30">{{resourceData.follower.toLocaleString()}}人关注</span>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'YqyHeaderTop',
components: {
},
props: {
resourceData: {
type: Object,
default:()=>{
return {
title: '高血压',
studyCount: 270000,
follower: 1
}
}
}
},
watch: {
message(val){
console.log('val',val);
}
},
data () {
return {
message: ''
}
},
mounted(){
},
methods: {
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '../../style/mixin.scss';
@import '../../style/global.scss';
html,body{
width: px2rem(375px);
height: 100%;
background-color: #F8F8F8;
}
.white{
color: #fff;
}
.fs30{
font-size: px2rem(15px);
}
.gxyStudy{
margin-right: px2rem(19px);
}
.gxy{
font-size: px2rem(25px);
margin: px2rem(25px) 0 px2rem(11px) 0;
}
.header{
width: 100%;
height: px2rem(213px);
background-image: url('http://pica-pro.oss-cn-shanghai.aliyuncs.com/teach/bg.png');
}
.hotTag{
width: 100%;
height: px2rem(150px);
}
.hotTagTitle{
font-size: px2rem(18px);
padding: px2rem(73px) px2rem(15px);
float: left;
background-color: #fff;
}
.cource{
width: 100%;
height: px2rem(350px);
}
.fontTitle{
font-size: px2rem(18px);
padding: 0 0 px2rem(21px) px2rem(15px);
float: left;
width: 100%;
text-align: left;
}
.title{
font-size: px2rem(16px);
}
.courceLeft{
float: left;
padding-left: px2rem(15px);
}
.needLeft{
float: left;
padding: 0 0 px2rem(40px) px2rem(15px);
}
.courceTime{
float: left;
}
.courceImg{
width: px2rem(170px);
height: px2rem(96px);
margin-bottom: px2rem(10px);
}
.courceMore{
font-size: px2rem(15px);
color: #999999;
}
.need{
width: 100%;
height: px2rem(325px);
margin-top: px2rem(35px);
}
</style>
<template>
<div class="hot-teacher" id="famus-teacher">
<div class="titleTop">
<span class="title">{{title}}</span>
<div class="get-more gray fs11" @click="goToPage('','list')">
更多<img src="../../images/right-throw.png" class="thorw-icon"/>
</div>
</div>
<div class="tea-list">
<div class="tea-listbox">
<div class="tea-item" :key="index" v-for="(item,index) in parmData" @click="goToPage(item)">
<div class="head-pic">
<img class="tea-itemimg" :src="item.avatarImageUrl"/>
</div>
<span class="tea-itemname">{{item.name}}</span>
</div>
</div>
</div>
</div>
</template>
<script>
// import { setEventByModuleCode } from '@/utils/index'
import { jumpWebPageUrl } from '@/utils/index'
export default {
data(){
return {
title:'云鹊名师',
list: [],
pageNo: 1,
pageSize: 10,
parmData: []
}
},
mounted(){
this.getData();
},
props:{
userToken:{
type:String,
default:''
}
},
methods: {
//跳转
goToPage(item,parm){
let _this = this,
url = '',action_code = '',label_id = '';
if(parm == 'list'){
url = jumpWebPageUrl+'teachers?userToken='+_this.userToken;
action_code = 'c_more'
}else{
url = jumpWebPageUrl+'teachersDetail?id='+item.id+"&from=appHome&userToken="+_this.userToken
action_code = 'c_teacher';
label_id = item.id;
}
let itemData={
"title":"",
"imageUrl":"",
"appModuleInfo":{
"code":"M300",
"type":4,
"name":"wwww",
"paramFlag":1,
"paramList":[
{
"key":"pageUrl",
"value": url,
"type":4,
"seqNo":1
},{
"key":"showTitle",
"value": false,
"type":1,
"seqNo":2
},{
"key":"title",
"value": '',
"type":1,
"seqNo":3
}
]
}
};
rocNative.dispatchEventByModuleCode({
modeCode: itemData.appModuleInfo.code,
jsonString: itemData.appModuleInfo.paramList
})
this.pageBurialPoin({
menuLevel:1,
menuCode:'m_home',
functionCode:'f_teacher',
actionCode:action_code,
labelId:label_id,
labelValue :item.name,
})
},
getData(){
let _this = this,
para = {
pageNo: this.pageNo,
pageSize: this.pageSize,
token: this.userToken,
setEntry: 'headers'
}
this.GET('contents/HomeLecturer/LecturerInformation', para).then(res => {
if(res.code == '000000'){
_this.parmData = (res.data && res.data.pCourseDoctorModels || []).slice()
}
})
}
}
}
</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 0 px2rem(26px) px2rem(15px);
.titleTop{
padding: 0 px2rem(15px) px2rem(15px) 0;
overflow: hidden;
height: px2rem(40px);
}
.title{
font-size: px2rem(18px);
float: left;
font-weight: bold;
}
.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);
}
.thorw-icon{
width: px2rem(8px);
height: px2rem(8px);
}
.tea-list{
width: 100%;
overflow: hidden;
height: px2rem(75px);
overflow-x: scroll;
-webkit-tap-highlight-color:rgba(0,0,0,0);
outline: 0;
-webkit-overflow-scrolling : touch;
}
.tea-listbox{
width: 1100px;
clear: both;
}
.tea-item{
font-size: px2rem(13px);
margin: 0 px2rem(19px) 0 0;
display: inline-block;
position: relative;
float: left;
text-align: center;
.head-pic{
background: #ECECEC;
width: px2rem(50px);
height: px2rem(50px);
border-radius: 50%;
text-align: center;
}
.tea-itemimg{
width: px2rem(50px);
height: px2rem(50px);
border-radius: 50%;
}
.tea-itemname{
color: RGBA(102, 102, 102, 1);
margin-top: px2rem(4px);
font-size: px2rem(13px);
line-height: px2rem(19px);
height: px2rem(19px);
display: inline-block;
}
}
}
</style>
<template>
<div class="hot-teacher" id="famus-teacher">
<div class="titleTop">
<span class="title">{{title}}</span>
<div class="get-more gray fs11" @click="goToPage('','list')">
更多<img src="../../images/right-throw.png" class="thorw-icon"/>
</div>
</div>
<div class="tea-list">
<div class="tea-listbox">
<div class="tea-item" :key="index" v-for="(item,index) in parmData" @click="goToPage(item)">
<div class="head-pic">
<img class="tea-itemimg" :src="item.avatarImageUrl"/>
</div>
<span class="tea-itemname">{{item.name}}</span>
</div>
</div>
</div>
</div>
</template>
<script>
// import { setEventByModuleCode } from '@/utils/index'
import { jumpWebPageUrl } from '@/utils/index'
export default {
data(){
return {
title:'云鹊名师',
list:[],
pageNo:1,
pageSize:10
}
},
mounted(){
//this.list = this.parmData;
// alert(this.userToken);
//this.getData();
},
props:{
parmData:{
type:Array,
default:[]
},
userToken:{
type:String,
default:''
}
},
methods: {
//跳转
goToPage(item,parm){
let _this = this,
url = '',action_code = '',label_id = '';
//alert(_this.userToken);
if(parm == 'list'){
url = jumpWebPageUrl+'teachers?userToken='+_this.userToken;
action_code = 'c_more'
// rocNative.gotoNewWebActivity({
// pageUrl: jumpWebPageUrl+'teachers?userToken='+_this.userToken
// })
}else{
url = jumpWebPageUrl+'teachersDetail?id='+item.id+"&from=appHome&userToken="+_this.userToken
action_code = 'c_teacher';
label_id = item.id;
// rocNative.gotoNewWebActivity({
// pageUrl: jumpWebPageUrl+'teachersDetail?id='+item.id+"&from=appHome&userToken="+_this.userToken
// })
}
let itemData={
"title":"",
"imageUrl":"",
"appModuleInfo":{
"code":"M300",
"type":4,
"name":"wwww",
"paramFlag":1,
"paramList":[
{
"key":"pageUrl",
"value": url,
"type":4,
"seqNo":1
},{
"key":"showTitle",
"value": false,
"type":1,
"seqNo":2
},{
"key":"title",
"value": '',
"type":1,
"seqNo":3
}
]
}
};
// alert(JSON.stringify(itemData))
rocNative.dispatchEventByModuleCode({
modeCode: itemData.appModuleInfo.code,
jsonString: itemData.appModuleInfo.paramList
})
this.pageBurialPoin({
menuLevel:1,
menuCode:'m_home',
functionCode:'f_teacher',
actionCode:action_code,
labelId:label_id,
labelValue :item.name,
})
},
getData(){
let _this = this,
para = {
pageNo:this.pageNo,
pageSize:this.pageSize,
token:this.userToken,
setEntry: 'headers'
}
this.GET('contents/HomeLecturer/LecturerInformation', para).then(res => {
if(res.code == '000000'){
_this.list = res.data && res.data.pCourseDoctorModels || []
}
})
}
}
}
</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 0 px2rem(26px) px2rem(15px);
.titleTop{
padding: 0 px2rem(15px) px2rem(15px) 0;
overflow: hidden;
height: px2rem(40px);
}
.title{
font-size: px2rem(18px);
float: left;
font-weight: bold;
}
.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);
}
.thorw-icon{
width: px2rem(8px);
height: px2rem(8px);
}
.tea-list{
width: 100%;
overflow: hidden;
height: px2rem(75px);
overflow-x: scroll;
-webkit-tap-highlight-color:rgba(0,0,0,0);
outline: 0;
-webkit-overflow-scrolling : touch;
}
.tea-listbox{
width: 1100px;
clear: both;
}
.tea-item{
font-size: px2rem(13px);
margin: 0 px2rem(19px) 0 0;
display: inline-block;
position: relative;
float: left;
text-align: center;
.head-pic{
background: #ECECEC;
width: px2rem(50px);
height: px2rem(50px);
border-radius: 50%;
text-align: center;
}
.tea-itemimg{
width: px2rem(50px);
height: px2rem(50px);
border-radius: 50%;
}
.tea-itemname{
color: RGBA(102, 102, 102, 1);
margin-top: px2rem(4px);
font-size: px2rem(13px);
line-height: px2rem(19px);
height: px2rem(19px);
display: inline-block;
}
}
}
</style>
<template>
<div class="hot-teacher" id="famus-teacher">
<div class="titleTop">
<span class="title">{{title}}</span>
<div class="get-more gray fs11" @click="goToPage('','list')">
更多<img src="../../images/right-throw.png" class="thorw-icon"/>
</div>
</div>
<div class="tea-list">
<div class="tea-listbox">
<div class="tea-item" :key="index" v-for="(item,index) in parmData" @click="goToPage(item)">
<div class="head-pic">
<img class="tea-itemimg" :src="item.avatarImageUrl"/>
</div>
<span class="tea-itemname">{{item.name}}</span>
</div>
</div>
</div>
</div>
</template>
<script>
// import { setEventByModuleCode } from '@/utils/index'
import { jumpWebPageUrl } from '@/utils/index'
export default {
data(){
return {
title:'云鹊名师',
list:[],
pageNo:1,
pageSize:10
}
},
mounted(){
//this.list = this.parmData;
// alert(this.userToken);
//this.getData();
},
props:{
parmData:{
type:Array,
default:[]
},
userToken:{
type:String,
default:''
}
},
methods: {
//跳转
goToPage(item,parm){
let _this = this,
url = '',action_code = '',label_id = '';
//alert(_this.userToken);
if(parm == 'list'){
url = jumpWebPageUrl+'teachers?userToken='+_this.userToken;
action_code = 'c_more'
// rocNative.gotoNewWebActivity({
// pageUrl: jumpWebPageUrl+'teachers?userToken='+_this.userToken
// })
}else{
url = jumpWebPageUrl+'teachersDetail?id='+item.id+"&from=appHome&userToken="+_this.userToken
action_code = 'c_teacher';
label_id = item.id;
// rocNative.gotoNewWebActivity({
// pageUrl: jumpWebPageUrl+'teachersDetail?id='+item.id+"&from=appHome&userToken="+_this.userToken
// })
}
let itemData={
"title":"",
"imageUrl":"",
"appModuleInfo":{
"code":"M300",
"type":4,
"name":"wwww",
"paramFlag":1,
"paramList":[
{
"key":"pageUrl",
"value": url,
"type":4,
"seqNo":1
},{
"key":"showTitle",
"value": false,
"type":1,
"seqNo":2
},{
"key":"title",
"value": '',
"type":1,
"seqNo":3
}
]
}
};
// alert(JSON.stringify(itemData))
rocNative.dispatchEventByModuleCode({
modeCode: itemData.appModuleInfo.code,
jsonString: itemData.appModuleInfo.paramList
})
this.pageBurialPoin({
menuLevel:1,
menuCode:'m_home',
functionCode:'f_teacher',
actionCode:action_code,
labelId:label_id,
labelValue :item.name,
})
},
getData(){
let _this = this,
para = {
pageNo:this.pageNo,
pageSize:this.pageSize,
token:this.userToken,
setEntry: 'headers'
}
this.GET('contents/HomeLecturer/LecturerInformation', para).then(res => {
if(res.code == '000000'){
_this.list = res.data && res.data.pCourseDoctorModels || []
}
})
}
}
}
</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 0 px2rem(26px) px2rem(15px);
.titleTop{
padding: 0 px2rem(15px) px2rem(15px) 0;
overflow: hidden;
height: px2rem(40px);
}
.title{
font-size: px2rem(18px);
float: left;
font-weight: bold;
}
.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);
}
.thorw-icon{
width: px2rem(8px);
height: px2rem(8px);
}
.tea-list{
width: 100%;
overflow: hidden;
height: px2rem(75px);
overflow-x: scroll;
-webkit-tap-highlight-color:rgba(0,0,0,0);
outline: 0;
-webkit-overflow-scrolling : touch;
}
.tea-listbox{
width: 1100px;
clear: both;
}
.tea-item{
font-size: px2rem(13px);
margin: 0 px2rem(19px) 0 0;
display: inline-block;
position: relative;
float: left;
text-align: center;
.head-pic{
background: #ECECEC;
width: px2rem(50px);
height: px2rem(50px);
border-radius: 50%;
text-align: center;
}
.tea-itemimg{
width: px2rem(50px);
height: px2rem(50px);
border-radius: 50%;
}
.tea-itemname{
color: RGBA(102, 102, 102, 1);
margin-top: px2rem(4px);
font-size: px2rem(13px);
line-height: px2rem(19px);
height: px2rem(19px);
display: inline-block;
}
}
}
</style>
<template>
<div class="hot-teacher" id="famus-teacher">
<div class="titleTop">
<span class="title">{{title}}</span>
<div class="get-more gray fs11" @click="goToPage('','list')">
更多<img src="../../images/right-throw.png" class="thorw-icon"/>
</div>
</div>
<div class="tea-list">
<div class="tea-listbox">
<div class="tea-item" :key="index" v-for="(item,index) in parmData" @click="goToPage(item)">
<div class="head-pic">
<img class="tea-itemimg" :src="item.avatarImageUrl"/>
</div>
<span class="tea-itemname">{{item.name}}</span>
</div>
</div>
</div>
</div>
</template>
<script>
// import { setEventByModuleCode } from '@/utils/index'
import { jumpWebPageUrl } from '@/utils/index'
export default {
data(){
return {
title:'云鹊名师',
list: [],
pageNo: 1,
pageSize: 10,
parmData: []
}
},
mounted(){
this.getData();
},
props:{
userToken:{
type:String,
default:''
}
},
methods: {
//跳转
goToPage(item,parm){
let _this = this,
url = '',action_code = '',label_id = '';
if(parm == 'list'){
url = jumpWebPageUrl+'teachers?userToken='+_this.userToken;
action_code = 'c_more'
}else{
url = jumpWebPageUrl+'teachersDetail?id='+item.id+"&from=appHome&userToken="+_this.userToken
action_code = 'c_teacher';
label_id = item.id;
}
let itemData={
"title":"",
"imageUrl":"",
"appModuleInfo":{
"code":"M300",
"type":4,
"name":"wwww",
"paramFlag":1,
"paramList":[
{
"key":"pageUrl",
"value": url,
"type":4,
"seqNo":1
},{
"key":"showTitle",
"value": false,
"type":1,
"seqNo":2
},{
"key":"title",
"value": '',
"type":1,
"seqNo":3
}
]
}
};
rocNative.dispatchEventByModuleCode({
modeCode: itemData.appModuleInfo.code,
jsonString: itemData.appModuleInfo.paramList
})
this.pageBurialPoin({
menuLevel:1,
menuCode:'m_home',
functionCode:'f_teacher',
actionCode:action_code,
labelId:label_id,
labelValue :item.name,
})
},
getData(){
let _this = this,
para = {
pageNo: this.pageNo,
pageSize: this.pageSize,
token: this.userToken,
setEntry: 'headers'
}
this.GET('contents/HomeLecturer/LecturerInformation', para).then(res => {
if(res.code == '000000'){
_this.parmData = (res.data && res.data.pCourseDoctorModels || []).slice()
}
})
}
}
}
</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 0 px2rem(26px) px2rem(15px);
.titleTop{
padding: 0 px2rem(15px) px2rem(15px) 0;
overflow: hidden;
height: px2rem(40px);
}
.title{
font-size: px2rem(18px);
float: left;
font-weight: bold;
}
.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);
}
.thorw-icon{
width: px2rem(8px);
height: px2rem(8px);
}
.tea-list{
width: 100%;
overflow: hidden;
height: px2rem(75px);
overflow-x: scroll;
-webkit-tap-highlight-color:rgba(0,0,0,0);
outline: 0;
-webkit-overflow-scrolling : touch;
}
.tea-listbox{
width: 1100px;
clear: both;
}
.tea-item{
font-size: px2rem(13px);
margin: 0 px2rem(19px) 0 0;
display: inline-block;
position: relative;
float: left;
text-align: center;
.head-pic{
background: #ECECEC;
width: px2rem(50px);
height: px2rem(50px);
border-radius: 50%;
text-align: center;
}
.tea-itemimg{
width: px2rem(50px);
height: px2rem(50px);
border-radius: 50%;
}
.tea-itemname{
color: RGBA(102, 102, 102, 1);
margin-top: px2rem(4px);
font-size: px2rem(13px);
line-height: px2rem(19px);
height: px2rem(19px);
display: inline-block;
}
}
}
</style>
<template>
<div class="banner-box">
<div class="banner space-between">
<div :class="index+1==list.length ? 'banner-item item-end' : 'banner-item'"
v-for="(item, index) in list"
@click="goToPage(item)"
:key="index" >
<img class="banner-img" :src="item.imageUrl"/>
<span class="banner-text fs24">
{{item.name}}
</span>
</div>
</div>
</div>
</template>
<script>
import { jumpWebPageUrl } from '@/utils/index'
export default {
name: 'YqyHomeBanner',
data(){
return {
list:[{
"imageUrl": require('../../images/error.png'),
"name": "微专业"
},{
"imageUrl": require('../../images/error.png'),
"name": "名师讲堂"
},{
"imageUrl": require('../../images/error.png'),
"name": "患者教育"
},{
"imageUrl": require('../../images/error.png'),
"name": "专项合作"
},{
"imageUrl": require('../../images/error.png'),
"name": "活动掠影"
}],
}
},
mounted(){
this.getData()
},
props:{
userToken:{
default:'',
type:String
}
},
methods: {
goToPage(itemData){
let paramList = this.setEventByModuleCode(itemData);
let code = '',categoryId = '',item = {};
if(itemData.appModuleInfo && itemData.appModuleInfo.code == 'M500'){
//let url = jumpWebPageUrl+'activity?categoryId=1';
code = 'M300';
let url = '';
if(itemData.appModuleInfo.paramList.length>0){
if(itemData.appModuleInfo.paramList[0].value.indexOf('activity') > -1){
url = itemData.appModuleInfo.paramList[0].value + '?categoryId='+itemData.appModuleInfo.paramList[1].value+'&userToken='+this.userToken;
}
if(itemData.appModuleInfo.paramList[0].value.indexOf('teachers') > -1){
url = itemData.appModuleInfo.paramList[0].value+'?userToken='+this.userToken;
}
}
item = {
"name":itemData.name,
"id":itemData.id,
"title":"",
"imageUrl":"",
"appModuleInfo":{
"code":code == '' ? itemData.appModuleInfo.code : code,
"type":4,
"name":"wwww",
"paramFlag":1,
"paramList":[
{
"key":"pageUrl",
"value": url,
"type":4,
"seqNo":1
},{
"key":"showTitle",
"value": false,
"type":1,
"seqNo":2
},{
"key":"title",
"value": '',
"type":1,
"seqNo":3
}
]
}
};
}else{
item = itemData;
}
rocNative.dispatchEventByModuleCode({
modeCode: item.appModuleInfo.code,
jsonString: item.appModuleInfo.paramList
})
this.pageBurialPoin({
menuLevel:1,
menuCode:'m_home',
functionCode:'f_icon',
actionCode:'c_icon_files',
labelId:itemData.id,
labelValue :itemData.name,
})
},
getData(){
let _this = this,
para = {
category: 1,
position:1,
setEntry: 'headers',
}
this.GET('contents/HomeColumn/Information', para).then(res => {
if(res.code == '000000'){
_this.list = res.data && res.data.iconColumnInformationModels || []
}
})
},
},
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '../../style/mixin.scss';
@import '../../style/global.scss';
// img {
// @include bis('../../images/evaluatBg.png');
// }
html,body{
width: px2rem(375px);
height: px2rem(100%);
background-color: #F8F8F8;
}
.banner-box{
position: relative;
height: px2rem(47px);
padding:0 px2rem(15px);
}
.banner{
width: px2rem(345px);
height: px2rem(74px);
background-color: #fff;
position: absolute;
top:-(px2rem(27px));
padding: px2rem(15px) px2rem(10px);
box-shadow: 0 px2rem(1px) px2rem(5px) RGBA(49, 127, 119, 0.1);
border-radius: px2rem(3px);
z-index: 2;
}
.banner-item{
width: px2rem(60px);
display: inline-block;
margin-right: px2rem(15px);
text-align: center;
}
.item-end{
margin-right: 0
}
.banner-img{
width: px2rem(22px);
height: px2rem(22px);
margin: 0 auto;
display:block;
}
.banner-text{
margin-top:px2rem(5px);
display: block;
position: relative;
font-size: px2rem(12px);
text-align: center;
width: 100%;
}
.banner-text i{
width: px2rem(4px);
height: px2rem(4px);
display: inline-block;
background: #FB5B52;
border-radius: 100%;
position: absolute;
top:0;
right: -4px
}
</style>
<template>
<div class="banner-box">
<div class="banner space-between">
<div :class="index+1==parmData.length ?'banner-item item-end' : 'banner-item'" :key="index" v-for="(item,index) in parmData" @click="goToPage(item)">
<img class="banner-img" :src="item.imageUrl"/>
<span class="banner-text fs24">
{{item.name}}
<!-- <i></i> -->
</span>
</div>
</div>
</div>
</template>
<script>
import { jumpWebPageUrl } from '@/utils/index'
export default {
name: 'YqyHomeBanner',
data(){
return {
list:[],
}
},
mounted(){
this.list = this.parmData;
// this.getData();
},
props:{
parmData:{
type:Array,
default:[]
},
userToken:{
default:'',
type:String
}
},
methods: {
goToPage(itemData){
let paramList = this.setEventByModuleCode(itemData);
let code = '',categoryId = '',item = {};
if(itemData.appModuleInfo && itemData.appModuleInfo.code == 'M500'){
//let url = jumpWebPageUrl+'activity?categoryId=1';
code = 'M300';
let url = '';
if(itemData.appModuleInfo.paramList.length>0){
if(itemData.appModuleInfo.paramList[0].value.indexOf('activity') > -1){
url = itemData.appModuleInfo.paramList[0].value + '?categoryId='+itemData.appModuleInfo.paramList[1].value+'&userToken='+this.userToken;
}
if(itemData.appModuleInfo.paramList[0].value.indexOf('teachers') > -1){
url = itemData.appModuleInfo.paramList[0].value+'?userToken='+this.userToken;
}
//alert(url);
}
///itemData.appModuleInfo.code = 'M300';
item = {
"name":itemData.name,
"id":itemData.id,
"title":"",
"imageUrl":"",
"appModuleInfo":{
"code":code == '' ? itemData.appModuleInfo.code : code,
"type":4,
"name":"wwww",
"paramFlag":1,
"paramList":[
{
"key":"pageUrl",
"value": url,
"type":4,
"seqNo":1
},{
"key":"showTitle",
"value": false,
"type":1,
"seqNo":2
},{
"key":"title",
"value": '',
"type":1,
"seqNo":3
}
]
}
};
//itemData.appModuleInfo = item.appModuleInfo;
}else{
item = itemData;
}
// alert(JSON.stringify(itemData))
rocNative.dispatchEventByModuleCode({
modeCode: item.appModuleInfo.code,
jsonString: item.appModuleInfo.paramList
})
//console.log(itemData);
this.pageBurialPoin({
menuLevel:1,
menuCode:'m_home',
functionCode:'f_icon',
actionCode:'c_icon_files',
labelId:itemData.id,
labelValue :itemData.name,
})
}
},
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '../../style/mixin.scss';
@import '../../style/global.scss';
html,body{
width: px2rem(375px);
height: px2rem(100%);
background-color: #F8F8F8;
}
.banner-box{
position: relative;
height: px2rem(47px);
padding:0 px2rem(15px);
}
.banner{
width: px2rem(345px);
height: px2rem(74px);
background-color: #fff;
position: absolute;
top:-(px2rem(27px));
padding: px2rem(15px) px2rem(10px);
box-shadow: 0 px2rem(1px) px2rem(5px) RGBA(49, 127, 119, 0.1);
border-radius: px2rem(3px);
z-index: 2;
}
.banner-item{
width: px2rem(60px);
display: inline-block;
margin-right: px2rem(15px);
text-align: center;
}
.item-end{
margin-right: 0
}
.banner-img{
width: px2rem(22px);
height: px2rem(22px);
margin: 0 auto;
display:block;
}
.banner-text{
margin-top:px2rem(5px);
display: block;
position: relative;
font-size: px2rem(12px);
text-align: center;
width: 100%;
}
.banner-text i{
width: px2rem(4px);
height: px2rem(4px);
display: inline-block;
background: #FB5B52;
border-radius: 100%;
position: absolute;
top:0;
right: -4px
}
</style>
<template>
<div class="banner-box">
<div class="banner space-between">
<div :class="index+1==parmData.length ?'banner-item item-end' : 'banner-item'" :key="index" v-for="(item,index) in parmData" @click="goToPage(item)">
<img class="banner-img" :src="item.imageUrl"/>
<span class="banner-text fs24">
{{item.name}}
<!-- <i></i> -->
</span>
</div>
</div>
</div>
</template>
<script>
import { jumpWebPageUrl } from '@/utils/index'
export default {
name: 'YqyHomeBanner',
data(){
return {
list:[],
}
},
mounted(){
this.list = this.parmData;
// this.getData();
},
props:{
parmData:{
type:Array,
default:[]
},
userToken:{
default:'',
type:String
}
},
methods: {
goToPage(itemData){
let paramList = this.setEventByModuleCode(itemData);
let code = '',categoryId = '',item = {};
if(itemData.appModuleInfo && itemData.appModuleInfo.code == 'M500'){
//let url = jumpWebPageUrl+'activity?categoryId=1';
code = 'M300';
let url = '';
if(itemData.appModuleInfo.paramList.length>0){
if(itemData.appModuleInfo.paramList[0].value.indexOf('activity') > -1){
url = itemData.appModuleInfo.paramList[0].value + '?categoryId='+itemData.appModuleInfo.paramList[1].value+'&userToken='+this.userToken;
}
if(itemData.appModuleInfo.paramList[0].value.indexOf('teachers') > -1){
url = itemData.appModuleInfo.paramList[0].value+'?userToken='+this.userToken;
}
//alert(url);
}
///itemData.appModuleInfo.code = 'M300';
item = {
"name":itemData.name,
"id":itemData.id,
"title":"",
"imageUrl":"",
"appModuleInfo":{
"code":code == '' ? itemData.appModuleInfo.code : code,
"type":4,
"name":"wwww",
"paramFlag":1,
"paramList":[
{
"key":"pageUrl",
"value": url,
"type":4,
"seqNo":1
},{
"key":"showTitle",
"value": false,
"type":1,
"seqNo":2
},{
"key":"title",
"value": '',
"type":1,
"seqNo":3
}
]
}
};
//itemData.appModuleInfo = item.appModuleInfo;
}else{
item = itemData;
}
// alert(JSON.stringify(itemData))
rocNative.dispatchEventByModuleCode({
modeCode: item.appModuleInfo.code,
jsonString: item.appModuleInfo.paramList
})
//console.log(itemData);
this.pageBurialPoin({
menuLevel:1,
menuCode:'m_home',
functionCode:'f_icon',
actionCode:'c_icon_files',
labelId:itemData.id,
labelValue :itemData.name,
})
}
},
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '../../style/mixin.scss';
@import '../../style/global.scss';
html,body{
width: px2rem(375px);
height: px2rem(100%);
background-color: #F8F8F8;
}
.banner-box{
position: relative;
height: px2rem(47px);
padding:0 px2rem(15px);
}
.banner{
width: px2rem(345px);
height: px2rem(74px);
background-color: #fff;
position: absolute;
top:-(px2rem(27px));
padding: px2rem(15px) px2rem(10px);
box-shadow: 0 px2rem(1px) px2rem(5px) RGBA(49, 127, 119, 0.1);
border-radius: px2rem(3px);
z-index: 2;
}
.banner-item{
width: px2rem(60px);
display: inline-block;
margin-right: px2rem(15px);
text-align: center;
}
.item-end{
margin-right: 0
}
.banner-img{
width: px2rem(22px);
height: px2rem(22px);
margin: 0 auto;
display:block;
}
.banner-text{
margin-top:px2rem(5px);
display: block;
position: relative;
font-size: px2rem(12px);
text-align: center;
width: 100%;
}
.banner-text i{
width: px2rem(4px);
height: px2rem(4px);
display: inline-block;
background: #FB5B52;
border-radius: 100%;
position: absolute;
top:0;
right: -4px
}
</style>
<template>
<div class="banner-box">
<div class="banner space-between">
<div :class="index+1==list.length ? 'banner-item item-end' : 'banner-item'"
v-for="(item, index) in list"
@click="goToPage(item)"
:key="index" >
<img class="banner-img" :src="item.imageUrl"/>
<span class="banner-text fs24">
{{item.name}}
</span>
</div>
</div>
</div>
</template>
<script>
import { jumpWebPageUrl } from '@/utils/index'
export default {
name: 'YqyHomeBanner',
data(){
return {
list:[{
"imageUrl": require('../../images/error.png'),
"name": "微专业"
},{
"imageUrl": require('../../images/error.png'),
"name": "名师讲堂"
},{
"imageUrl": require('../../images/error.png'),
"name": "患者教育"
},{
"imageUrl": require('../../images/error.png'),
"name": "专项合作"
},{
"imageUrl": require('../../images/error.png'),
"name": "活动掠影"
}],
}
},
mounted(){
this.getData()
},
props:{
userToken:{
default:'',
type:String
}
},
methods: {
goToPage(itemData){
let paramList = this.setEventByModuleCode(itemData);
let code = '',categoryId = '',item = {};
if(itemData.appModuleInfo && itemData.appModuleInfo.code == 'M500'){
//let url = jumpWebPageUrl+'activity?categoryId=1';
code = 'M300';
let url = '';
if(itemData.appModuleInfo.paramList.length>0){
if(itemData.appModuleInfo.paramList[0].value.indexOf('activity') > -1){
url = itemData.appModuleInfo.paramList[0].value + '?categoryId='+itemData.appModuleInfo.paramList[1].value+'&userToken='+this.userToken;
}
if(itemData.appModuleInfo.paramList[0].value.indexOf('teachers') > -1){
url = itemData.appModuleInfo.paramList[0].value+'?userToken='+this.userToken;
}
}
item = {
"name":itemData.name,
"id":itemData.id,
"title":"",
"imageUrl":"",
"appModuleInfo":{
"code":code == '' ? itemData.appModuleInfo.code : code,
"type":4,
"name":"wwww",
"paramFlag":1,
"paramList":[
{
"key":"pageUrl",
"value": url,
"type":4,
"seqNo":1
},{
"key":"showTitle",
"value": false,
"type":1,
"seqNo":2
},{
"key":"title",
"value": '',
"type":1,
"seqNo":3
}
]
}
};
}else{
item = itemData;
}
rocNative.dispatchEventByModuleCode({
modeCode: item.appModuleInfo.code,
jsonString: item.appModuleInfo.paramList
})
this.pageBurialPoin({
menuLevel:1,
menuCode:'m_home',
functionCode:'f_icon',
actionCode:'c_icon_files',
labelId:itemData.id,
labelValue :itemData.name,
})
},
getData(){
let _this = this,
para = {
category: 1,
position:1,
setEntry: 'headers',
}
this.GET('contents/HomeColumn/Information', para).then(res => {
if(res.code == '000000'){
_this.list = res.data && res.data.iconColumnInformationModels || []
}
})
},
},
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '../../style/mixin.scss';
@import '../../style/global.scss';
// img {
// @include bis('../../images/evaluatBg.png');
// }
html,body{
width: px2rem(375px);
height: px2rem(100%);
background-color: #F8F8F8;
}
.banner-box{
position: relative;
height: px2rem(47px);
padding:0 px2rem(15px);
}
.banner{
width: px2rem(345px);
height: px2rem(74px);
background-color: #fff;
position: absolute;
top:-(px2rem(27px));
padding: px2rem(15px) px2rem(10px);
box-shadow: 0 px2rem(1px) px2rem(5px) RGBA(49, 127, 119, 0.1);
border-radius: px2rem(3px);
z-index: 2;
}
.banner-item{
width: px2rem(60px);
display: inline-block;
margin-right: px2rem(15px);
text-align: center;
}
.item-end{
margin-right: 0
}
.banner-img{
width: px2rem(22px);
height: px2rem(22px);
margin: 0 auto;
display:block;
}
.banner-text{
margin-top:px2rem(5px);
display: block;
position: relative;
font-size: px2rem(12px);
text-align: center;
width: 100%;
}
.banner-text i{
width: px2rem(4px);
height: px2rem(4px);
display: inline-block;
background: #FB5B52;
border-radius: 100%;
position: absolute;
top:0;
right: -4px
}
</style>
<template>
<div :class="searchFix?'header fixed' : 'header' " id="search-top" :style="{height:menuptop}">
<div class="search-menu">
<div :class="isTransparent?'search-transparent':'bgWhite'" class="search">
<input type="search" :class="isTransparent?'search-transparent':''" class="input" v-model="searchVal" :placeholder="placeholder" @click="goToPage"/>
<img v-if="searchFix" class="search-img" src='../../images/search-grey.png'>
<img v-else class="search-img" src='../../images/search-white.png'>
</div>
<div class="bgFill" :style="{height:ptop}"></div>
<!-- <div class="fixBox">
<div class="header-right" @click="goToPage">
<img v-if="searchFix" class="info" src='../../images/msg1.png'>
<img v-else class="info" src='../../images/msg1.png'>
<div :class="isMax?'num-max':'num-min'" class="info-count fs10" v-show="msgCount>0">{{msgCount>99?'99+':msgCount}}</div>
</div>
</div> -->
</div>
</div>
</template>
<script>
export default {
data(){
return {
placeholder: '即将上线,敬请期待',
disabled:'disabled',
searchVal:'',
isTransparent: true, //更改颜色 背景
isMax:false,//消息数量是否大于99
count:'',
isShowMsg:true,
ptop:0,
menuptop:0,
popHeight:0
}
},
props:{
msgCount:{
type:String,
default:''
},
statusBarHeight:{
type:Number,
default:0
},
searchFix:{
type:Boolean,
default:false,
}
},
watch:{
// searchFix:function(n){
// if(n){
// alert(this.searchFix)
// }
// }
},
created(){
let _this = this;
window.__getStatusBarHeight = function(parm){
//lert(parm.statusBarHeight)
if(window.__isAndroid){
_this.popHeight = parseInt(parm.statusBarHeight)/2.5
}else{
_this.popHeight = parm.statusBarHeight
}
_this.ptop = _this.popHeight+'px';
_this.menuptop = _this.popHeight+'px'
// alert(parm.statusBarHeight);
}
this.getStatusHight()
},
mounted(){
// this.getStatusHight();
// if(window.__isAndroid){
// this.popHeight = this.statusBarHeight/2
// }else{
// this.popHeight = this.statusBarHeight
// }
// this.count = this.msgCount;
// this.ptop = this.popHeight+7+'px';
// this.menuptop = this.popHeight+7+'px'
// console.log(this.statusBarHeight);
// if(this.msgCount == ''){
// this.isShowMsg = false
// }
// if(this.count>=99){
// this.count += '+';
// this.isMax = true
// }
},
methods: {
getStatusHight(){
rocNative.getStatusBarHeight({
__funcName: '__getStatusBarHeight'
})
},
goToPage(){
this.$router.push({
path: '/search'
})
// alert("000");
// this.$emit('setAppMsg',false)
// this.$emit('jumpToSS',false)
// this.pageBurialPoin({
// menuLevel:1,
// menuCode:'m_home',
// functionCode:'f_notification',
// actionCode:'c_notification',
// })
// rocNative.readMessage();
}
},
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '../../style/mixin.scss';
@import '../../style/global.scss';
html,body{
width: px2rem(375px);
height: 100%;
background-color: #F8F8F8;
}
.search-transparent{
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.5);
color: #fff;
}
.search-transparent::-webkit-input-placeholder{
color:#fff;
}
.white{
color: #fff;
}
.header-right{
width: px2rem(20px);
height: px2rem(20px);
position: relative;
margin-top:px2rem(5px);
float: right;
img{
width: 100%;
height: 100%;
display: block;
}
}
.bgFill{
background: inherit;
height: 20px;
}
.fs30{
font-size: px2rem(15px);
}
.gxy-study{
margin-right: px2rem(19px);
}
.gxy{
font-size: px2rem(25px);
margin: px2rem(25px) 0 px2rem(11px) 0;
}
.header{
width: 100%;
/*//height: px2rem(50px);*/
position: relative;
}
.fixed {
.search-menu{
position: fixed;
z-index: 110;
top:0;
left: 0;
}
.fixBox{
background: #44A99B;
height:px2rem(30px);
padding:0 px2rem(25px);
/* padding-top: px2rem(7px)*/
}
.bgFill{
background: #44A99B;
}
.search-transparent::-webkit-input-placeholder{
color:#666;
}
.search{
border-color:#ddd;
}
.info-count{
background: #FB5B52;
color: #fff
}
}
.fixBox{
padding:0 px2rem(25px);
height: px2rem(30px);
/* padding-top: px2rem(7px)*/
}
.search-menu{
width: 100%;
position: absolute;
}
.search{
width: px2rem(290px);
height: px2rem(30px);
border-radius: px2rem(19px);
float: left;
}
.input{
outline: none;
border: none;
float: left;
font-size: px2rem(13px);
margin: px2rem(6px) 0 px2rem(6px) px2rem(15px);
line-height: px2rem(18px);
width: 80%;
}
.search-img{
width: px2rem(16px);
height: px2rem(16px);
margin: px2rem(6px) px2rem(15px) px2rem(9px) 0;
float: right;
}
.info-count{
position:absolute;
top: -(px2rem(5px));
left: (px2rem(10px));
/*max-width: px2rem(25px);*/
padding:0 px2rem(3px);
height: px2rem(15px);
line-height: px2rem(15px);
border-radius: px2rem(15px);
text-align: center;
font-size:px2rem(12px);
font-weight: bold;
background-color: #fff;
color: RGBA(53, 134, 126, 1);
}
.num-min{
max-width: px2rem(25px);
min-width: px2rem(15px);
/*padding:0;*/
}
.num-max{
width: auto;
/* background-color: RGBA(251, 91, 82, 1);
color: #fff;*/
}
.hot-tag{
width: 100%;
height: px2rem(150px);
}
.hotTagTitle{
font-size: px2rem(18px);
padding: px2rem(73px) px2rem(15px);
float: left;
background-color: #fff;
}
.cource{
width: 100%;
height: px2rem(350px);
}
.font-title{
font-size: px2rem(18px);
padding: 0 0 px2rem(21px) px2rem(15px);
float: left;
width: 100%;
text-align: left;
}
.title{
font-size: px2rem(16px);
}
.cource-left{
float: left;
padding-left: px2rem(15px);
}
.need-left{
float: left;
padding: 0 0 px2rem(40px) px2rem(15px);
}
.cource-time{
float: left;
}
.cource-img{
width: px2rem(170px);
height: px2rem(96px);
margin-bottom: px2rem(10px);
}
.cource-more{
font-size: px2rem(15px);
color: #999999;
}
.need{
width: 100%;
height: px2rem(325px);
margin-top: px2rem(35px);
}
</style>
<template>
<div :class="searchFix?'header fixed' : 'header' " id="search-top" :style="{height:menuptop}">
<div class="search-menu">
<div :class="isTransparent?'search-transparent':'bgWhite'" class="search">
<input type="search" :class="isTransparent?'search-transparent':''" class="input" v-model="searchVal" :placeholder="placeholder" @click="goToPage"/>
<img v-if="searchFix" class="search-img" src='../../images/search-grey.png'>
<img v-else class="search-img" src='../../images/search-white.png'>
</div>
<div class="bgFill" :style="{height:ptop}"></div>
<!-- <div class="fixBox">
<div class="header-right" @click="goToPage">
<img v-if="searchFix" class="info" src='../../images/msg1.png'>
<img v-else class="info" src='../../images/msg1.png'>
<div :class="isMax?'num-max':'num-min'" class="info-count fs10" v-show="msgCount>0">{{msgCount>99?'99+':msgCount}}</div>
</div>
</div> -->
</div>
</div>
</template>
<script>
export default {
data(){
return {
placeholder: '即将上线,敬请期待',
disabled:'disabled',
searchVal:'',
isTransparent: true, //更改颜色 背景
isMax:false,//消息数量是否大于99
count:'',
isShowMsg:true,
ptop:0,
menuptop:0,
popHeight:0
}
},
props:{
msgCount:{
type:String,
default:''
},
statusBarHeight:{
type:Number,
default:0
},
searchFix:{
type:Boolean,
default:false,
}
},
watch:{
// searchFix:function(n){
// if(n){
// alert(this.searchFix)
// }
// }
},
created(){
let _this = this;
window.__getStatusBarHeight = function(parm){
//lert(parm.statusBarHeight)
if(window.__isAndroid){
_this.popHeight = parseInt(parm.statusBarHeight)/2.5
}else{
_this.popHeight = parm.statusBarHeight
}
_this.ptop = _this.popHeight+'px';
_this.menuptop = _this.popHeight+'px'
// alert(parm.statusBarHeight);
}
this.getStatusHight()
},
mounted(){
// this.getStatusHight();
// if(window.__isAndroid){
// this.popHeight = this.statusBarHeight/2
// }else{
// this.popHeight = this.statusBarHeight
// }
// this.count = this.msgCount;
// this.ptop = this.popHeight+7+'px';
// this.menuptop = this.popHeight+7+'px'
// console.log(this.statusBarHeight);
// if(this.msgCount == ''){
// this.isShowMsg = false
// }
// if(this.count>=99){
// this.count += '+';
// this.isMax = true
// }
},
methods: {
getStatusHight(){
rocNative.getStatusBarHeight({
__funcName: '__getStatusBarHeight'
})
},
goToPage(){
this.$router.push({
path: '/search'
})
// alert("000");
// this.$emit('setAppMsg',false)
// this.$emit('jumpToSS',false)
// this.pageBurialPoin({
// menuLevel:1,
// menuCode:'m_home',
// functionCode:'f_notification',
// actionCode:'c_notification',
// })
// rocNative.readMessage();
}
},
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '../../style/mixin.scss';
@import '../../style/global.scss';
html,body{
width: px2rem(375px);
height: 100%;
background-color: #F8F8F8;
}
.search-transparent{
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.5);
color: #fff;
}
.search-transparent::-webkit-input-placeholder{
color:#fff;
}
.white{
color: #fff;
}
.header-right{
width: px2rem(20px);
height: px2rem(20px);
position: relative;
margin-top:px2rem(5px);
float: right;
img{
width: 100%;
height: 100%;
display: block;
}
}
.bgFill{
background: inherit;
height: 20px;
}
.fs30{
font-size: px2rem(15px);
}
.gxy-study{
margin-right: px2rem(19px);
}
.gxy{
font-size: px2rem(25px);
margin: px2rem(25px) 0 px2rem(11px) 0;
}
.header{
width: 100%;
/*//height: px2rem(50px);*/
position: relative;
}
.fixed {
.search-menu{
position: fixed;
z-index: 110;
top:0;
left: 0;
}
.fixBox{
background: #44A99B;
height:px2rem(30px);
padding:0 px2rem(25px);
/* padding-top: px2rem(7px)*/
}
.bgFill{
background: #44A99B;
}
.search-transparent::-webkit-input-placeholder{
color:#666;
}
.search{
border-color:#ddd;
}
.info-count{
background: #FB5B52;
color: #fff
}
}
.fixBox{
padding:0 px2rem(25px);
height: px2rem(30px);
/* padding-top: px2rem(7px)*/
}
.search-menu{
width: 100%;
position: absolute;
}
.search{
width: px2rem(290px);
height: px2rem(30px);
border-radius: px2rem(19px);
float: left;
}
.input{
outline: none;
border: none;
float: left;
font-size: px2rem(13px);
margin: px2rem(6px) 0 px2rem(6px) px2rem(15px);
line-height: px2rem(18px);
width: 80%;
}
.search-img{
width: px2rem(16px);
height: px2rem(16px);
margin: px2rem(6px) px2rem(15px) px2rem(9px) 0;
float: right;
}
.info-count{
position:absolute;
top: -(px2rem(5px));
left: (px2rem(10px));
/*max-width: px2rem(25px);*/
padding:0 px2rem(3px);
height: px2rem(15px);
line-height: px2rem(15px);
border-radius: px2rem(15px);
text-align: center;
font-size:px2rem(12px);
font-weight: bold;
background-color: #fff;
color: RGBA(53, 134, 126, 1);
}
.num-min{
max-width: px2rem(25px);
min-width: px2rem(15px);
/*padding:0;*/
}
.num-max{
width: auto;
/* background-color: RGBA(251, 91, 82, 1);
color: #fff;*/
}
.hot-tag{
width: 100%;
height: px2rem(150px);
}
.hotTagTitle{
font-size: px2rem(18px);
padding: px2rem(73px) px2rem(15px);
float: left;
background-color: #fff;
}
.cource{
width: 100%;
height: px2rem(350px);
}
.font-title{
font-size: px2rem(18px);
padding: 0 0 px2rem(21px) px2rem(15px);
float: left;
width: 100%;
text-align: left;
}
.title{
font-size: px2rem(16px);
}
.cource-left{
float: left;
padding-left: px2rem(15px);
}
.need-left{
float: left;
padding: 0 0 px2rem(40px) px2rem(15px);
}
.cource-time{
float: left;
}
.cource-img{
width: px2rem(170px);
height: px2rem(96px);
margin-bottom: px2rem(10px);
}
.cource-more{
font-size: px2rem(15px);
color: #999999;
}
.need{
width: 100%;
height: px2rem(325px);
margin-top: px2rem(35px);
}
</style>
<template>
<div class="keep-learn">
<div class="border-bottom keep-learnbox">
<div class="learning-txt">
<div class="gray keepon-title">{{parmData.name || '糖尿病诊疗'}}</div>
<div class="keepon-txt">
<span class="gray fs24 keepon-right">已学习:{{parmData.day}}</span>
<span class="gray fs24 keepon-right">剩余:{{parmData.remanentCourseNum}}%</span>
<span class="gray fs24 continue-study" @click="continueStudy(parmData)">继续学习></span>
</div>
</div>
<span class="close-m">
<img @click="cancel" src="../../images/close.png"/>
</span>
</div>
</div>
</template>
<script>
// import { setEventByModuleCode } from '@/utils/index'
export default {
name: 'YqyHomeKeepon',
data(){
return {
isShow: true,
parmObj:{}
}
},
props:{
parmData:{
type:Object,
default:{}
},
},
mounted(){
// if(this.userMobile != ''){
// this.getData();
// }else{
// this.isShow = false;
// }
},
methods: {
continueStudy(item){
this.pageBurialPoin({
menuLevel:1,
menuCode:'m_home',
functionCode:'f_course',
actionCode:'c_play',
labelId:item.courseId,
labelValue :item.name,
})
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
});
this.isShow = false;
//this.$emit('hideKeepon',false)
},
cancel(){
this.$emit('hideKeepon',false)
this.pageBurialPoin({
menuLevel:1,
menuCode:'m_home',
functionCode:'f_course',
actionCode:'c_close',
//labelId:itemData.id,
//labelValue :itemData.name,
})
this.isShow = false
},
getData(){
let _this = this,
parm = {
token:_this.userToken,
setEntry: 'headers'
}
_this.GET('contents/courses/continueLearningCourse',parm).then(function(res){
if(res.code === '000000'){
_this.parmObj = res.data && res.data.continueLearningCourseModel || {};
if(_this.parmObj.remanentCourseNum == 0){
_this.isShow = false;
}else{
_this.isShow = _this.parmObj.showFlag ? true : false;
}
}
})
}
}
}
</script>
<style lang="scss" scoped>
@import '../../style/mixin.scss';
@import '../../style/global.scss';
.keep-learn{
width: 100%;
padding: 0 px2rem(15px);
margin-top: px2rem(15px);
.keep-learnbox{
padding: px2rem(10px);
position: relative;
}
.border-bottom{
width: 100%;
border-bottom: 1px solid RGBA(231, 231, 231, 1);
padding-bottom: px2rem(10px);
}
.keepon-title{
font-size: px2rem(14px);
color:#666;
line-height: px2rem(19px);
}
.keepon-txt{
margin-top:px2rem(5px);
line-height: px2rem(17px);
height: px2rem(17px);
span{
float: left;
font-size: px2rem(12px);
}
}
.continue-study{
color: RGBA(31, 121, 115, 1);
}
.keepon-right{
margin-right: px2rem(15px);
}
.learning-txt{
position: relative;
}
.close-m{
position: absolute;
width: px2rem(25px);
height: px2rem(25px);
display: inline-block;
right: px2rem(10px);
top:50%;
margin-top:-(px2rem(8px));
img{
width: 100%;
display: block;
}
}
}
</style>
<template>
<div class="keep-learn">
<div class="border-bottom keep-learnbox">
<div class="learning-txt">
<div class="gray keepon-title">{{parmData.name || '糖尿病诊疗'}}</div>
<div class="keepon-txt">
<span class="gray fs24 keepon-right">已学习:{{parmData.day}}</span>
<span class="gray fs24 keepon-right">剩余:{{parmData.remanentCourseNum}}%</span>
<span class="gray fs24 continue-study" @click="continueStudy(parmData)">继续学习></span>
</div>
</div>
<span class="close-m">
<img @click="cancel" src="../../images/close.png"/>
</span>
</div>
</div>
</template>
<script>
// import { setEventByModuleCode } from '@/utils/index'
export default {
name: 'YqyHomeKeepon',
data(){
return {
isShow: true,
parmObj:{}
}
},
props:{
parmData:{
type:Object,
default:{}
},
},
mounted(){
// if(this.userMobile != ''){
// this.getData();
// }else{
// this.isShow = false;
// }
},
methods: {
continueStudy(item){
this.pageBurialPoin({
menuLevel:1,
menuCode:'m_home',
functionCode:'f_course',
actionCode:'c_play',
labelId:item.courseId,
labelValue :item.name,
})
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
});
this.isShow = false;
//this.$emit('hideKeepon',false)
},
cancel(){
this.$emit('hideKeepon',false)
this.pageBurialPoin({
menuLevel:1,
menuCode:'m_home',
functionCode:'f_course',
actionCode:'c_close',
//labelId:itemData.id,
//labelValue :itemData.name,
})
this.isShow = false
},
getData(){
let _this = this,
parm = {
token:_this.userToken,
setEntry: 'headers'
}
_this.GET('contents/courses/continueLearningCourse',parm).then(function(res){
if(res.code === '000000'){
_this.parmObj = res.data && res.data.continueLearningCourseModel || {};
if(_this.parmObj.remanentCourseNum == 0){
_this.isShow = false;
}else{
_this.isShow = _this.parmObj.showFlag ? true : false;
}
}
})
}
}
}
</script>
<style lang="scss" scoped>
@import '../../style/mixin.scss';
@import '../../style/global.scss';
.keep-learn{
width: 100%;
padding: 0 px2rem(15px);
margin-top: px2rem(15px);
.keep-learnbox{
padding: px2rem(10px);
position: relative;
}
.border-bottom{
width: 100%;
border-bottom: 1px solid RGBA(231, 231, 231, 1);
padding-bottom: px2rem(10px);
}
.keepon-title{
font-size: px2rem(14px);
color:#666;
line-height: px2rem(19px);
}
.keepon-txt{
margin-top:px2rem(5px);
line-height: px2rem(17px);
height: px2rem(17px);
span{
float: left;
font-size: px2rem(12px);
}
}
.continue-study{
color: RGBA(31, 121, 115, 1);
}
.keepon-right{
margin-right: px2rem(15px);
}
.learning-txt{
position: relative;
}
.close-m{
position: absolute;
width: px2rem(25px);
height: px2rem(25px);
display: inline-block;
right: px2rem(10px);
top:50%;
margin-top:-(px2rem(8px));
img{
width: 100%;
display: block;
}
}
}
</style>
<template>
<transition :name="isShow ? 'evluatbox':''">
<div class="top-evaluat" v-if="isShow">
<div class="evaluat-info">
<span class="evaluat-icon">
<img :src='parmObj.avatarImageUrl'/>
</span>
<span class="evaluat-persent">您的学习速度战胜了本院内{{setStyle(parmObj.gradePKToHospital)}}%的医生</span>
</div>
<div class="evaluat-part" @click="goToPage">
<span class="part-throw"><img src='../../images/grey-throw.png'/></span>
<div class="part-item part-finish">
<div class="item-num">
<span class="fs16">{{parmObj.courseOverNumOfSelf}}</span><span class="fs15">/</span><span class="fs14">{{parmObj.courseOverNumOfHospital}}</span>
</div>
<div class="item-persent">
<span :style="'width:'+setStyle(parmObj.courseOverNumOfSelf/parmObj.courseOverNumOfHospital)+'%'"></span>
</div>
<div class="item-txt">已完成课程</div>
</div>
<div class="part-item part-pass">
<div class="item-num">
<span class="fs16">{{parmObj.examOverNumOfSelf}}</span><span class="fs15">/</span><span class="fs14">{{parmObj.examOverNumOfHospital}}</span>
</div>
<div class="item-persent">
<span :style="'width:'+setStyle(parmObj.examOverNumOfSelf/parmObj.examOverNumOfHospital)+'%'"></span>
</div>
<div class="item-txt">已通过考试</div>
</div>
<div class="part-item part-get">
<div class="item-num">
<span class="fs16">{{parmObj.certificateAcquireNumOfSelf}}</span><span class="fs15">/</span><span class="fs14">{{parmObj.certificateAcquireNumOfHospital}}</span>
</div>
<div class="item-persent">
<span :style="'width:'+setStyle(parmObj.certificateAcquireNumOfSelf/parmObj.certificateAcquireNumOfHospital)+'%'"></span>
</div>
<div class="item-txt">已获得证书</div>
</div>
</div>
<div class="push-up" @click="toggleFun">
<img src='../../images/push.png'/>
<span>收起</span>
</div>
</div>
</transition>
</template>
<script>
import { jumpEvaluatPage } from '@/utils/index'
export default {
props: {
isShowEvluat:{
default:false,
type:Boolean
},
parmData:{
type:Object,
default:{}
},
userToken:{
type:String,
default:''
}
},
data () {
return {
isShow:false,
parmObj:{}
//mockUrl:'http://sosoapi.yunqueyi.com/sosoapi-web/pass/mock/39/'
}
},
mounted(){
this.isShow = this.isShowEvluat;
this.parmObj = this.parmData
console.log(this.parmData)
},
methods: {
// 跳转到新的web界面
goToPage: function () {
let url = jumpEvaluatPage();
// rocNative.gotoNewWebActivity({
// pageUrl: url
// })
let itemData={
"title":"",
"imageUrl":"",
"appModuleInfo":{
"code":"M300",
"type":4,
"name":"wwww",
"paramFlag":1,
"paramList":[
{
"key":"pageUrl",
"value": url,
"type":4,
"seqNo":1
},{
"key":"showTitle",
"value": false,
"type":1,
"seqNo":2
},{
"key":"title",
"value": '',
"type":1,
"seqNo":3
}
]
}
};
rocNative.dispatchEventByModuleCode({
modeCode: itemData.appModuleInfo.code,
jsonString: itemData.appModuleInfo.paramList
})
this.pageBurialPoin({
menuLevel:1,
menuCode:'m_home',
functionCode:'f_gpranking',
actionCode:'c_person_gp',
// labelId:itemData.id,
// labelValue :itemData.name,
})
},
setStyle:function(num){
var str = '';
if(num == NaN){
return 0
}
num = num*100 + '';
if(num.indexOf(".")>-1){
num = num + '';
str = num.substring(0,num.indexOf(".") + 3);
}else{
str = num;
}
return str;
},
getData:function(){
let _this = this, para = {
sysCode: 27,
token: _this.userToken,
setEntry: 'headers'
}
this.GET('contents/gp/v1/homepage', para).then(res => {
if(res.code == '000000'){
_this.parmObj = res.data || {};
if(res.data.certificateAcquireNumOfSelf == 0 && res.data.courseOverNumOfSelf == 0 && res.data.examOverNumOfSelf == 0){
_this.isShow = false;
_this.$emit('evluatFun',{isPull:'2'});
}else{
_this.isShow = _this.parmObj.showFlag;
let isPullIndex = _this.isShow ? '1' : '2';
_this.$emit('evluatFun',{isPull:isPullIndex});
}
}else{
}
})
},
toggleFun:function(){
this.$emit('evluatFun',{isPull:'0'});
this.isShow = !this.isShow;
this.pageBurialPoin({
menuLevel:1,
menuCode:'m_home',
functionCode:'f_gpranking',
actionCode:'c_packup',
// labelId:itemData.id,
// labelValue :itemData.name,
})
}
}
}
</script>
<style lang="scss" scoped>
@import '../../style/mixin.scss';
@import '../../style/global.scss';
.evluatbox-leave-active,.evluatbox-enter-active{
transition: all 1s ease;
}
.evluatbox-leave-active,.evluatbox-enter{
height:0px !important;
}
.evluatbox-leave,.evluatbox-enter-active{
height: px2rem(225px);
}
.top-evaluat{
animation: myfirst 1.2s;
}
@keyframes myfirst
{
from {height: 0;}
to {height:px2rem(225px)}
}
.top-evaluat{
position: fixed;
z-index: 105;
left: 0;
top:0;
width: 100%;
height: px2rem(225px);
overflow:hidden;
@include bis('../../images/evaluatBg.png');
padding:0 px2rem(10px);
.evaluat-info{
margin-top: px2rem(33px);
overflow: hidden;
.evaluat-icon{
height: px2rem(26px);
width: px2rem(26px);
border-radius: 50%;
background: #D7E0EC;
display:inline-block;
position: relative;
float: left;
img{
position: absolute;
left: 0;
top:0;
height: px2rem(26px);
width: px2rem(26px);
display: inline-block;
border-radius: 50%;
}
}
.evaluat-persent{
margin-left: px2rem(5px);
font-size: px2rem(13px);
color:#AA813B;
height: px2rem(26px);
line-height: px2rem(26px);
display: inline-block;
float: left;
}
}
.push-up{
text-align: center;
height: px2rem(14px);
line-height: px2rem(14px);
margin-top:px2rem(23px);
span{
color: #A8997F;
font-size: px2rem(12px);
display: inline-block;
}
img{
width: px2rem(11px);
height: px2rem(11px);
display: inline-block;
}
}
.evaluat-part{
background: #fff;
border:px2rem(1px) solid RGBA(179, 139, 72, 0.45);
border-radius: px2rem(3px);
padding:px2rem(14px) 0 px2rem(14px) px2rem(14px);
margin-top: px2rem(15px);
position: relative;
.part-throw{
position: absolute;
display: inline-block;
width: px2rem(16px);
height: px2rem(16px);
top:50%;
right: px2rem(7px);;
margin-top: -(px2rem(8px));
img{
width: 100%;
height: 100%;
display: block;
}
}
.part-item{
width:px2rem(84px);
display: inline-block;
margin-right: px2rem(20px);
.item-num{
font-size: px2rem(16px);
font-weight: bold;
.fs16{
font-size: 16px;
}
.fs15{
font-size: 15px;
}
.fs14{
font-size: 14px;
}
}
.item-txt{
padding-top:px2rem(10px);
font-size: px2rem(13px);
color: #888
}
}
.part-get{
margin:0;
}
.part-finish .item-num{
.fs16{
color: RGBA(74, 135, 212, 1)
}
.fs15{
color: RGBA(74, 135, 212, 1)
}
.fs14{
color: RGBA(74, 135, 212, 0.6)
}
}
.part-pass .item-num{
.fs16{
color: #449284
}
.fs15{
color: #449284
}
.fs14{
color: RGBA(68, 146, 132, 0.6)
}
}
.part-get .item-num{
.fs16{
color: #CAA861
}
.fs15{
color: #CAA861
}
.fs14{
color: RGBA(202, 168, 97, 0.6)
}
}
.part-item .item-persent{
width: px2rem(84px);
height: px2rem(7px);
margin-top: px2rem(6px);
border: 1px solid #5890DD;
border-radius: px2rem(4px);
position: relative;
span{
position: absolute;
top:-(px2rem(1px));
left: 0;
width:0;
display: inline-block;
background: -webkit-linear-gradient(left, #8FC1E6, #5890DD);
background: -o-linear-gradient(right, #8FC1E6, #5890DD);
background: -moz-linear-gradient(right, #8FC1E6, #5890DD);
background: linear-gradient(to right, #8FC1E6, #5890DD);
height: px2rem(7px);
border-radius: px2rem(4px);
box-shadow: 0 px2rem(2px) px2rem(3px) RGBA(103, 153, 217, 0.3);
}
}
.part-pass .item-persent{
border-color: #449284;
span{
background: -webkit-linear-gradient(left, #8DC5BB, #449284);
background: -o-linear-gradient(right, #8DC5BB, #449284);
background: -moz-linear-gradient(right,#8DC5BB, #449284);
background: linear-gradient(to right, #8DC5BB, #449284);
box-shadow: 0 px2rem(2px) px2rem(3px) RGBA(94, 136, 128, 0.3);
}
}
.part-get .item-persent{
border-color: #CAA861;
span{
background: -webkit-linear-gradient(left, #F6DDA9,#CCAB65);
background: -o-linear-gradient(right, #F6DDA9,#CCAB65);
background: -moz-linear-gradient(right,#F6DDA9,#CCAB65);
background: linear-gradient(to right, #F6DDA9,#CCAB65);
box-shadow: 0 px2rem(2px) px2rem(3px) RGBA(207, 174, 106, 0.3);
}
}
}
}
</style>
<template>
<transition :name="isShow ? 'evluatbox':''">
<div class="top-evaluat" v-if="isShow">
<div class="evaluat-info">
<span class="evaluat-icon">
<img :src='parmObj.avatarImageUrl'/>
</span>
<span class="evaluat-persent">您的学习速度战胜了本院内{{setStyle(parmObj.gradePKToHospital)}}%的医生</span>
</div>
<div class="evaluat-part" @click="goToPage">
<span class="part-throw"><img src='../../images/grey-throw.png'/></span>
<div class="part-item part-finish">
<div class="item-num">
<span class="fs16">{{parmObj.courseOverNumOfSelf}}</span><span class="fs15">/</span><span class="fs14">{{parmObj.courseOverNumOfHospital}}</span>
</div>
<div class="item-persent">
<span :style="'width:'+setStyle(parmObj.courseOverNumOfSelf/parmObj.courseOverNumOfHospital)+'%'"></span>
</div>
<div class="item-txt">已完成课程</div>
</div>
<div class="part-item part-pass">
<div class="item-num">
<span class="fs16">{{parmObj.examOverNumOfSelf}}</span><span class="fs15">/</span><span class="fs14">{{parmObj.examOverNumOfHospital}}</span>
</div>
<div class="item-persent">
<span :style="'width:'+setStyle(parmObj.examOverNumOfSelf/parmObj.examOverNumOfHospital)+'%'"></span>
</div>
<div class="item-txt">已通过考试</div>
</div>
<div class="part-item part-get">
<div class="item-num">
<span class="fs16">{{parmObj.certificateAcquireNumOfSelf}}</span><span class="fs15">/</span><span class="fs14">{{parmObj.certificateAcquireNumOfHospital}}</span>
</div>
<div class="item-persent">
<span :style="'width:'+setStyle(parmObj.certificateAcquireNumOfSelf/parmObj.certificateAcquireNumOfHospital)+'%'"></span>
</div>
<div class="item-txt">已获得证书</div>
</div>
</div>
<div class="push-up" @click="toggleFun">
<img src='../../images/push.png'/>
<span>收起</span>
</div>
</div>
</transition>
</template>
<script>
import { jumpEvaluatPage } from '@/utils/index'
export default {
props: {
isShowEvluat:{
default:false,
type:Boolean
},
parmData:{
type:Object,
default:{}
},
userToken:{
type:String,
default:''
}
},
data () {
return {
isShow:false,
parmObj:{}
//mockUrl:'http://sosoapi.yunqueyi.com/sosoapi-web/pass/mock/39/'
}
},
mounted(){
this.isShow = this.isShowEvluat;
this.parmObj = this.parmData
console.log(this.parmData)
},
methods: {
// 跳转到新的web界面
goToPage: function () {
let url = jumpEvaluatPage();
// rocNative.gotoNewWebActivity({
// pageUrl: url
// })
let itemData={
"title":"",
"imageUrl":"",
"appModuleInfo":{
"code":"M300",
"type":4,
"name":"wwww",
"paramFlag":1,
"paramList":[
{
"key":"pageUrl",
"value": url,
"type":4,
"seqNo":1
},{
"key":"showTitle",
"value": false,
"type":1,
"seqNo":2
},{
"key":"title",
"value": '',
"type":1,
"seqNo":3
}
]
}
};
rocNative.dispatchEventByModuleCode({
modeCode: itemData.appModuleInfo.code,
jsonString: itemData.appModuleInfo.paramList
})
this.pageBurialPoin({
menuLevel:1,
menuCode:'m_home',
functionCode:'f_gpranking',
actionCode:'c_person_gp',
// labelId:itemData.id,
// labelValue :itemData.name,
})
},
setStyle:function(num){
var str = '';
if(num == NaN){
return 0
}
num = num*100 + '';
if(num.indexOf(".")>-1){
num = num + '';
str = num.substring(0,num.indexOf(".") + 3);
}else{
str = num;
}
return str;
},
getData:function(){
let _this = this, para = {
sysCode: 27,
token: _this.userToken,
setEntry: 'headers'
}
this.GET('contents/gp/v1/homepage', para).then(res => {
if(res.code == '000000'){
_this.parmObj = res.data || {};
if(res.data.certificateAcquireNumOfSelf == 0 && res.data.courseOverNumOfSelf == 0 && res.data.examOverNumOfSelf == 0){
_this.isShow = false;
_this.$emit('evluatFun',{isPull:'2'});
}else{
_this.isShow = _this.parmObj.showFlag;
let isPullIndex = _this.isShow ? '1' : '2';
_this.$emit('evluatFun',{isPull:isPullIndex});
}
}else{
}
})
},
toggleFun:function(){
this.$emit('evluatFun',{isPull:'0'});
this.isShow = !this.isShow;
this.pageBurialPoin({
menuLevel:1,
menuCode:'m_home',
functionCode:'f_gpranking',
actionCode:'c_packup',
// labelId:itemData.id,
// labelValue :itemData.name,
})
}
}
}
</script>
<style lang="scss" scoped>
@import '../../style/mixin.scss';
@import '../../style/global.scss';
.evluatbox-leave-active,.evluatbox-enter-active{
transition: all 1s ease;
}
.evluatbox-leave-active,.evluatbox-enter{
height:0px !important;
}
.evluatbox-leave,.evluatbox-enter-active{
height: px2rem(225px);
}
.top-evaluat{
animation: myfirst 1.2s;
}
@keyframes myfirst
{
from {height: 0;}
to {height:px2rem(225px)}
}
.top-evaluat{
position: fixed;
z-index: 105;
left: 0;
top:0;
width: 100%;
height: px2rem(225px);
overflow:hidden;
@include bis('../../images/evaluatBg.png');
padding:0 px2rem(10px);
.evaluat-info{
margin-top: px2rem(33px);
overflow: hidden;
.evaluat-icon{
height: px2rem(26px);
width: px2rem(26px);
border-radius: 50%;
background: #D7E0EC;
display:inline-block;
position: relative;
float: left;
img{
position: absolute;
left: 0;
top:0;
height: px2rem(26px);
width: px2rem(26px);
display: inline-block;
border-radius: 50%;
}
}
.evaluat-persent{
margin-left: px2rem(5px);
font-size: px2rem(13px);
color:#AA813B;
height: px2rem(26px);
line-height: px2rem(26px);
display: inline-block;
float: left;
}
}
.push-up{
text-align: center;
height: px2rem(14px);
line-height: px2rem(14px);
margin-top:px2rem(23px);
span{
color: #A8997F;
font-size: px2rem(12px);
display: inline-block;
}
img{
width: px2rem(11px);
height: px2rem(11px);
display: inline-block;
}
}
.evaluat-part{
background: #fff;
border:px2rem(1px) solid RGBA(179, 139, 72, 0.45);
border-radius: px2rem(3px);
padding:px2rem(14px) 0 px2rem(14px) px2rem(14px);
margin-top: px2rem(15px);
position: relative;
.part-throw{
position: absolute;
display: inline-block;
width: px2rem(16px);
height: px2rem(16px);
top:50%;
right: px2rem(7px);;
margin-top: -(px2rem(8px));
img{
width: 100%;
height: 100%;
display: block;
}
}
.part-item{
width:px2rem(84px);
display: inline-block;
margin-right: px2rem(20px);
.item-num{
font-size: px2rem(16px);
font-weight: bold;
.fs16{
font-size: 16px;
}
.fs15{
font-size: 15px;
}
.fs14{
font-size: 14px;
}
}
.item-txt{
padding-top:px2rem(10px);
font-size: px2rem(13px);
color: #888
}
}
.part-get{
margin:0;
}
.part-finish .item-num{
.fs16{
color: RGBA(74, 135, 212, 1)
}
.fs15{
color: RGBA(74, 135, 212, 1)
}
.fs14{
color: RGBA(74, 135, 212, 0.6)
}
}
.part-pass .item-num{
.fs16{
color: #449284
}
.fs15{
color: #449284
}
.fs14{
color: RGBA(68, 146, 132, 0.6)
}
}
.part-get .item-num{
.fs16{
color: #CAA861
}
.fs15{
color: #CAA861
}
.fs14{
color: RGBA(202, 168, 97, 0.6)
}
}
.part-item .item-persent{
width: px2rem(84px);
height: px2rem(7px);
margin-top: px2rem(6px);
border: 1px solid #5890DD;
border-radius: px2rem(4px);
position: relative;
span{
position: absolute;
top:-(px2rem(1px));
left: 0;
width:0;
display: inline-block;
background: -webkit-linear-gradient(left, #8FC1E6, #5890DD);
background: -o-linear-gradient(right, #8FC1E6, #5890DD);
background: -moz-linear-gradient(right, #8FC1E6, #5890DD);
background: linear-gradient(to right, #8FC1E6, #5890DD);
height: px2rem(7px);
border-radius: px2rem(4px);
box-shadow: 0 px2rem(2px) px2rem(3px) RGBA(103, 153, 217, 0.3);
}
}
.part-pass .item-persent{
border-color: #449284;
span{
background: -webkit-linear-gradient(left, #8DC5BB, #449284);
background: -o-linear-gradient(right, #8DC5BB, #449284);
background: -moz-linear-gradient(right,#8DC5BB, #449284);
background: linear-gradient(to right, #8DC5BB, #449284);
box-shadow: 0 px2rem(2px) px2rem(3px) RGBA(94, 136, 128, 0.3);
}
}
.part-get .item-persent{
border-color: #CAA861;
span{
background: -webkit-linear-gradient(left, #F6DDA9,#CCAB65);
background: -o-linear-gradient(right, #F6DDA9,#CCAB65);
background: -moz-linear-gradient(right,#F6DDA9,#CCAB65);
background: linear-gradient(to right, #F6DDA9,#CCAB65);
box-shadow: 0 px2rem(2px) px2rem(3px) RGBA(207, 174, 106, 0.3);
}
}
}
}
</style>
<template>
<div class="hot-teacher">
<div class="space-between">
<img class="img" src="../../images/Group21@2x.png"/>
</div>
<div class="teacher-item space-between">
<div class="tea-itemImg">
<img :src="resourceData.img"/>
</div>
<div class="five-text">
<div class="tea-itemname fw fs30">{{resourceData.name}}</div>
<div class="five-tag fs28 gray">{{resourceData.motto}}</div>
<div @click="btn" class="porter-btn white fs22">查看</div>
</div>
</div>
</div>
</template>
<script>
export default {
components: {
},
watch: {
},
props: {
resourceData: {
type: Object,
default:()=>{
return{
img: '../../images/Shape@2x.png',
name: '原来高血压',
motto: '北京大学人民医院'
}
}
}
},
data () {
return {
}
},
mounted(){
},
methods: {
fiveMinutesMore(){
console.log('fiveMinutesMore');
this.$emit('fiveMinutesMore')
},
btn(){
console.log('btn');
this.$emit('btn')
}
}
}
</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) px2rem(26px);
.img{
width: px2rem(109px);
height: px2rem(22px);
}
.five-more{
border: 1px solid RGBA(169, 174, 183, 1);
border-radius: px2rem(9px);
width: px2rem(40px);
height: px2rem(16px);
text-align: center;
line-height: px2rem(15px);
}
.teacher-item{
width: 100%;
height: px2rem(65px);
position: relative;
margin-top: px2rem(20px);
background: #F9FAFC;
&:not(:last-child){
border-bottom: 1px solid RGBA(240, 240, 240, 1);
}
.tea-itemimg{
width: px2rem(56px);
height: px2rem(63px);
border-radius: px2rem(3px);
}
.five-text{
width: px2rem(280px);
position: relative;
}
.tea-itemname{
color: RGBA(102, 102, 102, 1);
margin: px2rem(10px) 0 px2rem(6px);
}
.five-tag{
width: px2rem(235px);
height: px2rem(14px);
}
.porter-btn{
width: px2rem(42px);
height: px2rem(20px);
background: linear-gradient(to bottom, RGBA(143, 193, 230, 1), RGBA(88, 144, 221, 1));
border-radius: px2rem(14px);
text-align: center;
line-height: px2rem(20px);
position:absolute;
right: px2rem(10px);;
top: 50%;
margin-top:-(px2rem(10px));
}
}
}
</style>
<template>
<div class="hot-teacher">
<div class="space-between">
<img class="img" src="../../images/Group21@2x.png"/>
</div>
<div class="teacher-item space-between">
<div class="tea-itemImg">
<img :src="resourceData.img"/>
</div>
<div class="five-text">
<div class="tea-itemname fw fs30">{{resourceData.name}}</div>
<div class="five-tag fs28 gray">{{resourceData.motto}}</div>
<div @click="btn" class="porter-btn white fs22">查看</div>
</div>
</div>
</div>
</template>
<script>
export default {
components: {
},
watch: {
},
props: {
resourceData: {
type: Object,
default:()=>{
return{
img: '../../images/Shape@2x.png',
name: '原来高血压',
motto: '北京大学人民医院'
}
}
}
},
data () {
return {
}
},
mounted(){
},
methods: {
fiveMinutesMore(){
console.log('fiveMinutesMore');
this.$emit('fiveMinutesMore')
},
btn(){
console.log('btn');
this.$emit('btn')
}
}
}
</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) px2rem(26px);
.img{
width: px2rem(109px);
height: px2rem(22px);
}
.five-more{
border: 1px solid RGBA(169, 174, 183, 1);
border-radius: px2rem(9px);
width: px2rem(40px);
height: px2rem(16px);
text-align: center;
line-height: px2rem(15px);
}
.teacher-item{
width: 100%;
height: px2rem(65px);
position: relative;
margin-top: px2rem(20px);
background: #F9FAFC;
&:not(:last-child){
border-bottom: 1px solid RGBA(240, 240, 240, 1);
}
.tea-itemimg{
width: px2rem(56px);
height: px2rem(63px);
border-radius: px2rem(3px);
}
.five-text{
width: px2rem(280px);
position: relative;
}
.tea-itemname{
color: RGBA(102, 102, 102, 1);
margin: px2rem(10px) 0 px2rem(6px);
}
.five-tag{
width: px2rem(235px);
height: px2rem(14px);
}
.porter-btn{
width: px2rem(42px);
height: px2rem(20px);
background: linear-gradient(to bottom, RGBA(143, 193, 230, 1), RGBA(88, 144, 221, 1));
border-radius: px2rem(14px);
text-align: center;
line-height: px2rem(20px);
position:absolute;
right: px2rem(10px);;
top: 50%;
margin-top:-(px2rem(10px));
}
}
}
</style>
<template>
<div class="hotTag">
<div :style="{'text-align': direction}" class="hotTagTitle">{{title}}</div>
<div class="hotTagItem" :key="index" v-for="(item,index) in allTags">
<span class="itemName">{{item}}</span>
</div>
</div>
</template>
<script>
export default {
name: 'YqyHotLabel',
components: {
},
watch: {
},
props: {
allTags: {
type: Array,
default:()=>{
return ['a', '最新发布','在学人数', 'aaaaaa', '最新发布','在学人数', '最新发布','在学人数', '最新发布','在学人数', '最新发布']
}
},
direction: {
type: String,
default: 'left'
},
title: {
type: String,
default: '热门标签'
}
},
data () {
return {
}
},
mounted(){
},
methods: {
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '../../style/mixin.scss';
.hotTag{
width: 100%;
background-color: #fff;
padding: px2rem(60px) px2rem(15px) px2rem(26px);
margin-bottom: px2rem(6px);
}
.hotTagTitle{
font-size: px2rem(18px);
font-weight: bold;
}
.hotTagItem{
margin: px2rem(10px) px2rem(15px) 0 0;
display: inline-block;
.itemName{
background-color: RGBA(244, 247, 255, 1);
color: RGBA(121, 148, 237, 1);
padding: px2rem(2px) px2rem(6px);
font-size: px2rem(13pt);
}
}
</style>
<template>
<div class="hotTag">
<div :style="{'text-align': direction}" class="hotTagTitle">{{title}}</div>
<div class="hotTagItem" :key="index" v-for="(item,index) in allTags">
<span class="itemName">{{item}}</span>
</div>
</div>
</template>
<script>
export default {
name: 'YqyHotLabel',
components: {
},
watch: {
},
props: {
allTags: {
type: Array,
default:()=>{
return ['a', '最新发布','在学人数', 'aaaaaa', '最新发布','在学人数', '最新发布','在学人数', '最新发布','在学人数', '最新发布']
}
},
direction: {
type: String,
default: 'left'
},
title: {
type: String,
default: '热门标签'
}
},
data () {
return {
}
},
mounted(){
},
methods: {
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '../../style/mixin.scss';
.hotTag{
width: 100%;
background-color: #fff;
padding: px2rem(60px) px2rem(15px) px2rem(26px);
margin-bottom: px2rem(6px);
}
.hotTagTitle{
font-size: px2rem(18px);
font-weight: bold;
}
.hotTagItem{
margin: px2rem(10px) px2rem(15px) 0 0;
display: inline-block;
.itemName{
background-color: RGBA(244, 247, 255, 1);
color: RGBA(121, 148, 237, 1);
padding: px2rem(2px) px2rem(6px);
font-size: px2rem(13pt);
}
}
</style>
<template>
<div class="hot-teacher">
<div :style="{'text-align': direction}" class="title">{{title}}</div>
<div class="teacher-item" :key="index" v-for="(item,index) in hotTeachers">
<img class="tea-itemimg" :src="item.img"/>
<span class="tea-itemname">{{item.name}}</span>
<span class="tea-hospital">{{item.hospital}}</span>
</div>
</div>
</template>
<script>
export default {
name: 'YqyHotTeacher',
components: {
},
watch: {
},
props: {
hotTeachers: {
type: Array,
default:()=>{
return [
{
img: '../../images/Shape@2x.png',
name: '蒋立新',
hospital: '北京大学人民医院'
},
{
img: '../../images/Shape@2x.png',
name: '蒋立新',
hospital: '医院'
},
{
img: '../../images/Shape@2x.png',
name: '蒋立新',
hospital: '医院'
},
{
img: '../../images/Shape@2x.png',
name: '蒋立新',
hospital: '医院'
}
]
}
},
direction: {
type: String,
default: 'left'
},
title: {
type: String,
default: '热门标签'
}
},
data () {
return {
}
},
mounted(){
},
methods: {
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '../../style/mixin.scss';
.title{
font-size: px2rem(18px);
font-weight: bold;
}
.hot-teacher{
width: 100%;
background-color: #fff;
padding: 0 px2rem(15px) px2rem(26px);
.teacher-item{
font-size: px2rem(13pt);
margin: px2rem(10pt) px2rem(15pt) 0 0;
display: inline-block;
background-color: RGBA(244, 247, 255, 1);
border-radius: px2rem(16px);
padding: px2rem(8px) px2rem(10px);
position: relative;
.tea-itemimg{
width: px2rem(23px);
height: px2rem(23px);
border-radius: 50%;
position: absolute;
top: 10px;
}
.tea-itemname{
color: RGBA(102, 102, 102, 1);
padding: px2rem(2px) px2rem(6px);
font-size: px2rem(14pt);
margin-left: px2rem(24px);
}
.tea-hospital{
color: RGBA(153, 153, 153, 1);
font-size: px2rem(12pt);
}
}
}
</style>
<template>
<div class="hot-teacher">
<div :style="{'text-align': direction}" class="title">{{title}}</div>
<div class="teacher-item" :key="index" v-for="(item,index) in hotTeachers">
<img class="tea-itemimg" :src="item.img"/>
<span class="tea-itemname">{{item.name}}</span>
<span class="tea-hospital">{{item.hospital}}</span>
</div>
</div>
</template>
<script>
export default {
name: 'YqyHotTeacher',
components: {
},
watch: {
},
props: {
hotTeachers: {
type: Array,
default:()=>{
return [
{
img: '../../images/Shape@2x.png',
name: '蒋立新',
hospital: '北京大学人民医院'
},
{
img: '../../images/Shape@2x.png',
name: '蒋立新',
hospital: '医院'
},
{
img: '../../images/Shape@2x.png',
name: '蒋立新',
hospital: '医院'
},
{
img: '../../images/Shape@2x.png',
name: '蒋立新',
hospital: '医院'
}
]
}
},
direction: {
type: String,
default: 'left'
},
title: {
type: String,
default: '热门标签'
}
},
data () {
return {
}
},
mounted(){
},
methods: {
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '../../style/mixin.scss';
.title{
font-size: px2rem(18px);
font-weight: bold;
}
.hot-teacher{
width: 100%;
background-color: #fff;
padding: 0 px2rem(15px) px2rem(26px);
.teacher-item{
font-size: px2rem(13pt);
margin: px2rem(10pt) px2rem(15pt) 0 0;
display: inline-block;
background-color: RGBA(244, 247, 255, 1);
border-radius: px2rem(16px);
padding: px2rem(8px) px2rem(10px);
position: relative;
.tea-itemimg{
width: px2rem(23px);
height: px2rem(23px);
border-radius: 50%;
position: absolute;
top: 10px;
}
.tea-itemname{
color: RGBA(102, 102, 102, 1);
padding: px2rem(2px) px2rem(6px);
font-size: px2rem(14pt);
margin-left: px2rem(24px);
}
.tea-hospital{
color: RGBA(153, 153, 153, 1);
font-size: px2rem(12pt);
}
}
}
</style>
<template>
<div class="newClass">
<div :style="{'text-align': direction}" class="hotTagTitle">{{resourceData.title}}</div>
<mt-swipe :show-indicators="false" :auto="0">
<mt-swipe-item>
<img class="newClassImg" :src="resourceData.item[0].img"/>
<div class="fs32">{{resourceData.item[0].title}}</div>
<div class="space-between">
<div>
<span class="gray fs24">{{resourceData.item[0].time}}</span>
<span class="gray fs24">|</span>
<span class="gray fs24">{{resourceData.item[0].peopleCount}}人已学</span>
</div>
<div @click="collect(0)" v-if="!resourceData.item[0].isCollect" class="fs22 collect">收藏</div>
<div @click="collect(0)" v-else class="fs22 collect">已收藏</div>
</div>
</mt-swipe-item>
<mt-swipe-item v-if="resourceData.item[1]">
<img class="newClassImg" :src="resourceData.item[1].img"/>
<div class="fs32">{{resourceData.item[1].title}}</div>
<div class="space-between">
<div>
<span class="gray fs24">{{resourceData.item[1].time}}</span>
<span class="gray fs24">|</span>
<span class="gray fs24">{{resourceData.item[1].peopleCount}}人已学</span>
</div>
<div @click="collect(1)" v-if="!resourceData.item[1].isCollect" class="fs22 collect">收藏</div>
<div @click="collect(1)" v-else class="fs22 collect">已收藏</div>
</div>
</mt-swipe-item>
<mt-swipe-item v-if="resourceData.item[2]">
<img class="newClassImg" :src="resourceData.item[2].img"/>
<div class="fs32">{{resourceData.item[2].title}}</div>
<div class="space-between">
<div>
<span class="gray fs24">{{resourceData.item[2].time}}</span>
<span class="gray fs24">|</span>
<span class="gray fs24">{{resourceData.item[2].peopleCount}}人已学</span>
</div>
<div @click="collect(2)" v-if="!resourceData.item[2].isCollect" class="fs22 collect">收藏</div>
<div @click="collect(2)" v-else class="fs22 collect">已收藏</div>
</div>
</mt-swipe-item>
</mt-swipe>
</div>
</template>
<script>
import { Swipe, SwipeItem } from 'mint-ui';
export default {
name: 'YqyNewClass',
components: {
},
watch: {
},
props: {
resourceData: {
type: Object,
default:()=>{
return {
title: '新课上线',
item: [
{
img: '',
title: '1',
time: '刚刚',
peopleCount: 9,
isCollect: false
},
{
img: '',
title: '1',
time: '刚刚',
peopleCount: 9,
isCollect: false
},
{
img: '',
title: '1',
time: '刚刚',
peopleCount: 9,
isCollect: false
}
]
}
}
},
direction: {
type: String,
default: 'left'
}
},
data () {
return {
}
},
mounted(){
},
methods: {
collect(val){
this.resourceData.item[val].isCollect = !this.resourceData.item[val].isCollect;
console.log('collect',this.resourceData.item[val].isCollect,val);
this.$emit('collect',this.resourceData.item[val].isCollect, val)
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '../../style/mixin.scss';
@import '../../style/global.scss';
.newClass{
width: 100%;
height: px2rem(320px);
background-color: #fff;
padding: px2rem(15px) px2rem(15px) px2rem(26px);
margin-bottom: px2rem(6px);
}
.collect{
height: px2rem(18px);
background-color: RGBA(247, 248, 249, 1);
line-height: px2rem(18px);
color: RGBA(102, 102, 102, 1);
padding: 0 px2rem(4px);
}
.newClassImg{
width: px2rem(345px);
height: px2rem(191px);
}
.hotTagTitle{
font-size: px2rem(18px);
font-weight: bold;
margin-bottom: px2rem(15px);
}
.hotTagItem{
margin: px2rem(10px) px2rem(15px) 0 0;
display: inline-block;
.itemName{
background-color: RGBA(244, 247, 255, 1);
color: RGBA(121, 148, 237, 1);
padding: px2rem(2px) px2rem(6px);
font-size: px2rem(13pt);
}
}
</style>
<template>
<div class="newClass">
<div :style="{'text-align': direction}" class="hotTagTitle">{{resourceData.title}}</div>
<mt-swipe :show-indicators="false" :auto="0">
<mt-swipe-item>
<img class="newClassImg" :src="resourceData.item[0].img"/>
<div class="fs32">{{resourceData.item[0].title}}</div>
<div class="space-between">
<div>
<span class="gray fs24">{{resourceData.item[0].time}}</span>
<span class="gray fs24">|</span>
<span class="gray fs24">{{resourceData.item[0].peopleCount}}人已学</span>
</div>
<div @click="collect(0)" v-if="!resourceData.item[0].isCollect" class="fs22 collect">收藏</div>
<div @click="collect(0)" v-else class="fs22 collect">已收藏</div>
</div>
</mt-swipe-item>
<mt-swipe-item v-if="resourceData.item[1]">
<img class="newClassImg" :src="resourceData.item[1].img"/>
<div class="fs32">{{resourceData.item[1].title}}</div>
<div class="space-between">
<div>
<span class="gray fs24">{{resourceData.item[1].time}}</span>
<span class="gray fs24">|</span>
<span class="gray fs24">{{resourceData.item[1].peopleCount}}人已学</span>
</div>
<div @click="collect(1)" v-if="!resourceData.item[1].isCollect" class="fs22 collect">收藏</div>
<div @click="collect(1)" v-else class="fs22 collect">已收藏</div>
</div>
</mt-swipe-item>
<mt-swipe-item v-if="resourceData.item[2]">
<img class="newClassImg" :src="resourceData.item[2].img"/>
<div class="fs32">{{resourceData.item[2].title}}</div>
<div class="space-between">
<div>
<span class="gray fs24">{{resourceData.item[2].time}}</span>
<span class="gray fs24">|</span>
<span class="gray fs24">{{resourceData.item[2].peopleCount}}人已学</span>
</div>
<div @click="collect(2)" v-if="!resourceData.item[2].isCollect" class="fs22 collect">收藏</div>
<div @click="collect(2)" v-else class="fs22 collect">已收藏</div>
</div>
</mt-swipe-item>
</mt-swipe>
</div>
</template>
<script>
import { Swipe, SwipeItem } from 'mint-ui';
export default {
name: 'YqyNewClass',
components: {
},
watch: {
},
props: {
resourceData: {
type: Object,
default:()=>{
return {
title: '新课上线',
item: [
{
img: '',
title: '1',
time: '刚刚',
peopleCount: 9,
isCollect: false
},
{
img: '',
title: '1',
time: '刚刚',
peopleCount: 9,
isCollect: false
},
{
img: '',
title: '1',
time: '刚刚',
peopleCount: 9,
isCollect: false
}
]
}
}
},
direction: {
type: String,
default: 'left'
}
},
data () {
return {
}
},
mounted(){
},
methods: {
collect(val){
this.resourceData.item[val].isCollect = !this.resourceData.item[val].isCollect;
console.log('collect',this.resourceData.item[val].isCollect,val);
this.$emit('collect',this.resourceData.item[val].isCollect, val)
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '../../style/mixin.scss';
@import '../../style/global.scss';
.newClass{
width: 100%;
height: px2rem(320px);
background-color: #fff;
padding: px2rem(15px) px2rem(15px) px2rem(26px);
margin-bottom: px2rem(6px);
}
.collect{
height: px2rem(18px);
background-color: RGBA(247, 248, 249, 1);
line-height: px2rem(18px);
color: RGBA(102, 102, 102, 1);
padding: 0 px2rem(4px);
}
.newClassImg{
width: px2rem(345px);
height: px2rem(191px);
}
.hotTagTitle{
font-size: px2rem(18px);
font-weight: bold;
margin-bottom: px2rem(15px);
}
.hotTagItem{
margin: px2rem(10px) px2rem(15px) 0 0;
display: inline-block;
.itemName{
background-color: RGBA(244, 247, 255, 1);
color: RGBA(121, 148, 237, 1);
padding: px2rem(2px) px2rem(6px);
font-size: px2rem(13pt);
}
}
</style>
<template>
<div class="hello">
<div class="banner">
<img class="bannerLogo" src="../../images/Shape@2x.png"/>
<div class="fs28 center infoName">{{resourceData.name}}</div>
<div class="fs28 line center">
<span class="gray">{{resourceData.hospital}}</span>
<span class="gray">{{resourceData.rank}}</span>
<span class="gray">{{resourceData.type}}</span>>
</div>
<div class="studyCount">
<div class="fs28">
<div class="fs28">{{resourceData.studyCount}}</div>
<div class="fs24 gray">学习人数</div>
</div>
<div class="fs28">
<div class="fs28">{{resourceData.follower}}</div>
<div class="fs24 gray">关注人数</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
watch: {
},
props: {
resourceData: {
type: Object,
default:()=>{
return {
name: '蒋立新',
hospital: '阜外医院',
rank: '教授',
type: '主任医师',
studyCount: 8969,
follower: 8969
}
}
}
},
data () {
return {
}
},
mounted(){
},
methods: {
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '../../style/mixin.scss';
@import '../../style/global.scss';
html,body{
width: px2rem(375px);
height: 100%;
background-color: #F8F8F8;
}
.banner{
width: px2rem(335px);
height: px2rem(139px);
background-color: #fff;
position: absolute;
top: px2rem(165px);
left: px2rem(17px);
padding: px2rem(15px) px2rem(22px);
box-shadow: 0 px2rem(1px) px2rem(5px) RGBA(42, 94, 161, 0.15);
border-radius: px2rem(3px);
}
.infoName{
margin-top: px2rem(15px);
}
.line{
margin-top: px2rem(4px);
}
.fs28{
font-size: px2rem(14px);
}
.fs24{
font-size: px2rem(12px);
}
.gray{
color: RGBA(102, 102, 102, 1);
margin-top: px2rem(5px);
}
.bannerLogo{
width: px2rem(45px);
height: px2rem(45px);
border-radius: 50%;
margin: 0 px2rem(122px);
position: absolute;
top: px2rem(-20px);
}
.studyCount{
display: flex;
justify-content: space-between;
padding: 0 px2rem(33px);
margin-top: px2rem(15px);
}
</style>
<template>
<div class="hello">
<div class="banner">
<img class="bannerLogo" src="../../images/Shape@2x.png"/>
<div class="fs28 center infoName">{{resourceData.name}}</div>
<div class="fs28 line center">
<span class="gray">{{resourceData.hospital}}</span>
<span class="gray">{{resourceData.rank}}</span>
<span class="gray">{{resourceData.type}}</span>>
</div>
<div class="studyCount">
<div class="fs28">
<div class="fs28">{{resourceData.studyCount}}</div>
<div class="fs24 gray">学习人数</div>
</div>
<div class="fs28">
<div class="fs28">{{resourceData.follower}}</div>
<div class="fs24 gray">关注人数</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
watch: {
},
props: {
resourceData: {
type: Object,
default:()=>{
return {
name: '蒋立新',
hospital: '阜外医院',
rank: '教授',
type: '主任医师',
studyCount: 8969,
follower: 8969
}
}
}
},
data () {
return {
}
},
mounted(){
},
methods: {
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '../../style/mixin.scss';
@import '../../style/global.scss';
html,body{
width: px2rem(375px);
height: 100%;
background-color: #F8F8F8;
}
.banner{
width: px2rem(335px);
height: px2rem(139px);
background-color: #fff;
position: absolute;
top: px2rem(165px);
left: px2rem(17px);
padding: px2rem(15px) px2rem(22px);
box-shadow: 0 px2rem(1px) px2rem(5px) RGBA(42, 94, 161, 0.15);
border-radius: px2rem(3px);
}
.infoName{
margin-top: px2rem(15px);
}
.line{
margin-top: px2rem(4px);
}
.fs28{
font-size: px2rem(14px);
}
.fs24{
font-size: px2rem(12px);
}
.gray{
color: RGBA(102, 102, 102, 1);
margin-top: px2rem(5px);
}
.bannerLogo{
width: px2rem(45px);
height: px2rem(45px);
border-radius: 50%;
margin: 0 px2rem(122px);
position: absolute;
top: px2rem(-20px);
}
.studyCount{
display: flex;
justify-content: space-between;
padding: 0 px2rem(33px);
margin-top: px2rem(15px);
}
</style>
<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 :src="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>
<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 :src="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>
<section>
<GroupTitle groupNum="6" />
<div class="cource-teach">
<div class="couse-list">
<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)">
<img :src="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>
<ShowAllItem />
<NoMoreItem v-show="false" />
<SplitLine borderWidth="3px" />
</section>
</template>
<script>
//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 {
name: 'YqyTeacherList',
data() {
return {
list: [],
title: '最新课程',
pageNo: 1,
pageSize: 6,
parmData: []
}
},
components: {
GroupTitle,
NoMoreItem,
ShowAllItem,
SplitLine
},
mounted() {
this.getData()
//this.list = this.parmData;
},
props: {
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.parmData = 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>
<div class="cource-teach">
<div class="space-between cource-header">
<div :style="{'text-align': direction}" class="font-title">{{teacherData.title}}</div>
</div>
<div class="couse-list">
<div :class="index%2==1 ? 'course-item end-left' : 'course-item'" :key="index" v-for="(item,index) in cource">
<div class="course-pic">
<img src="../../images/552064153@2x.png" class="pic-tec" />
<span class="course-tag">高血压</span>
</div>
<p class="course-txt">
高血压伴糖尿病的规范化治疗
</p>
<div class="course-opt">
<span class="opt-info">刚刚 | 89人已学</span>
<span class="opt collect">
收藏
</span>
<span class="opt collected">
已收藏
</span>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'YqyTeacherList',
components: {
},
props:
{
teacherData: {
type: Object,
default: ()=>{
return {
title: '为您推荐',
hasSelect: true,
showMoreBtn: true,
selectOptions: [
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
],
firstOption: '综合',
options: [
{
isCheck: false,
title: '在学人数'
},
{
isCheck: false,
title: '最新发布'
}
]
}
}
},
hasPersonName: {
type: Boolean,
default: true
},
courceData: {
type: Object,
default:()=>{
return {
selected: '综合1',
hasHospital: true,
hasType: true,
ascending: true,
data: [
{
img: '../../images/Shape@2x.png',
name: '检查',
isLeft: true,
hospital: '阜外医院',
color: 'blue',
teacher: '小单',
count: 477,
type: '检查'
},
{
img: '../../images/Shape@2x.png',
name: '检查',
isLeft: true,
hospital: '阜外医院',
color: 'green',
teacher: '小单',
count: 477,
type: '检查'
},
{
img: '../../images/Shape@2x.png',
name: '检查',
isLeft: true,
hospital: '阜外医院',
color: 'pink',
teacher: '小单',
count: 477,
type: '检查'
},
{
img: '../../images/Shape@2x.png',
name: '检查',
isLeft: true,
hospital: '阜外医院',
color: 'yellow',
teacher: '小单',
count: 477,
type: '检查'
},
{
img: '../../images/Shape@2x.png',
name: '检查',
isLeft: true,
hospital: '阜外医院',
color: 'blue',
teacher: '小单',
count: 477,
type: '检查'
},
{
img: '../../images/Shape@2x.png',
name: '检查',
isLeft: true,
hospital: '阜外医院',
color: 'green',
teacher: '小单',
count: 477,
type: '检查'
},
{
img: '../../images/Shape@2x.png',
name: '检查',
isLeft: true,
hospital: '阜外医院',
color: 'pink',
teacher: '小单',
count: 477,
type: '检查'
},
{
img: '../../images/Shape@2x.png',
name: '检查',
isLeft: true,
hospital: '阜外医院',
color: 'yellow',
teacher: '小单',
count: 477,
type: '检查'
}
]
}
}
},
direction: {
type: String,
default: 'left'
}
},
watch: {
selected(val){
console.log('val',val);
this.$emit('selected',val)
}
},
data () {
return {
selected: 'A',
isStudy: false,
ascending: true,
cource: [
{
img: '../../images/Shape@2x.png',
name: '检查',
hospital: '阜外医院',
color: 'blue'
},
{
img: '../../images/Shape@2x.png',
name: '检查',
hospital: '阜外医院',
color: 'blue'
},
{
img: '../../images/Shape@2x.png',
name: '检查',
hospital: '阜外医院',
color: 'blue'
},
{
img: '../../images/Shape@2x.png',
name: '检查',
hospital: '阜外医院'
},
{
img: '../../images/Shape@2x.png',
name: '检查',
hospital: '阜外医院'
},
{
img: '../../images/Shape@2x.png',
name: '检查',
hospital: '阜外医院'
},
{
img: '../../images/Shape@2x.png',
name: '检查',
hospital: '阜外医院'
},
{
img: '../../images/Shape@2x.png',
name: '检查',
hospital: '阜外医院'
}
],
showMore: false,
options: [
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
]
}
},
created () {
},
mounted(){
this.flag();
},
methods: {
disable(val){
console.log('val',val);
},
teacherChange(){
console.log('teacherChange');
this.$emit('teacherChange')
},
teacherMore(){
console.log('teacherMore');
this.$emit('teacherMore')
},
firstOption(){
this.isStudy = false;
this.ascending = !this.ascending;
console.log('firstOption');
this.$emit('firstOption',this.ascending)
},
flag(){
let temp = this.courceData.data;
let fourCource = temp&&temp.slice(0,4);
console.log('fourCource',fourCource);
if(!this.showMore&&this.teacherData.showMoreBtn){
this.cource = fourCource;
}else{
this.cource = this.courceData.data;
}
},
showMoreFn(){
console.log('more',1);
this.showMore = !this.showMore;
this.flag();
},
collection(){
},
study(val){
this.isStudy = true;
console.log('val',val);
this.teacherData.options[val].isCheck=!this.teacherData.options[val].isCheck;
this.teacherData.options.filter((item,index)=>
index!==val
)[0].isCheck= false
this.$emit('study',val)
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '../../style/mixin.scss';
@import '../../style/global.scss';
.ellipsis{
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
width: px2rem(170px);
}
.couse-list{
overflow: hidden;
}
.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);
position: relative;
.pic-tec{
width: 100%;
display: block;
}
.course-tag{
position: absolute;
display: inline-block;
top:px2rem(5px);
left: px2rem(5px);
height: px2rem(16px);
color:#4A87D4;
padding: 0 px2rem(3px);
background: #C3DCFB;
font-size: px2rem(10px);
border-radius: px2rem(2px);
}
}
.course-txt{
margin-top: px2rem(5px);
font-size: px2rem(14px);
line-height: px2rem(19px);
color: #333;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
width: px2rem(170px);
}
.course-opt{
font-size: px2rem(12px);
margin-top: px2rem(6px);
.opt-info{
color:#999;
}
.opt{
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);
}
}
.font-title{
font-size: px2rem(18px);
padding: 0 0 px2rem(21px) px2rem(5px);
font-weight: bold;
}
.title{
font-size: px2rem(16px);
text-align: left;
width: px2rem(170px);
max-height: px2rem(20px);
}
</style>
<template>
<div class="hot-teacher">
<div :style="{'text-align': resourceData.direction}" class="title">{{resourceData.title}}</div>
<!--展示形式 左一 右二-->
<div class="teacher-item space-between">
<div class="category-left">
<img class="category-img1" :src="resourceData.item.pic1.right"/>
</div>
<div class="category-right">
<div class="right-img">
<img class="category-img" :src="resourceData.item.pic2.bg"/>
</div>
<div class="right-img mt5">
<img class="category-img" :src="resourceData.item.pic3.bg"/>
</div>
</div>
</div>
<di class="holder-img">
<img :src="resourceData.item.pic3.bg" class="category-img"/>
</di>
</div>
</template>
<script>
export default {
name: 'YqyHotTeacher',
components: {
},
watch: {
},
props: {
resourceData: {
type: Object,
default:()=>{
return {
title: '专题分类',
direction: 'left',
item: {
pic1:{
bg: 'RGBA(230, 243, 243, 1)',
title: '用医学知识 赢百万现金',
time: '每周四20:00开赛',
left: '../../images/Shape@2x.png',
right: '../../images/Shape@2x.png'
},
pic2:{
bg: '../../images/Shape@2x.png',
title: '心血管病高危人群早期筛查与综合干预',
left: '../../images/Shape@2x.png'
},
pic3:{
bg: '../../images/Shape@2x.png',
title: '心血管病高危人群早期筛查与综合干预',
left: '../../images/Shape@2x.png'
}
}
}
}
}
},
data () {
return {
}
},
mounted(){
},
methods: {
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '../../style/mixin.scss';
@import '../../style/global.scss';
.title{
font-size: px2rem(18px);
font-weight: bold;
margin-bottom: px2rem(15px);
}
.hot-teacher{
width: 100%;
margin-top: px2rem(15px);
padding: 0 px2rem(15px) px2rem(26px);
.teacher-item{
width: 100%;
height: px2rem(190px);
.category-left{
width: px2rem(170px);
height: px2rem(195px);
}
.category-img{
width: 100%;
height: 100%;
display: block;
}
.mt5{
margin-top: px2rem(5px);
}
.category-right{
width: px2rem(170px);
height: px2rem(190px);
.category-img{
width: 100%;
height: 100%;
}
.right-img{
width: px2rem(170px);
height: px2rem(95px);
}
}
}
.holder-img{
width: 100%;
height: px2rem(125px);
}
}
</style>
<template>
<div class="hot-teacher">
<div class="space-between">
<img class="img" src="../../images/mins.png"/>
<div @click="fiveMinutesMore" class="five-more gray fs11">
更多<img src="../../images/right-throw.png" class="thorw-icon"/>
</div>
</div>
<div class="teacher-item space-between" :key="index" v-for="(item,index) in hotTeachers">
<div class="teacher-itemimg">
<img :src="item.img"/>
</div>
<div class="five-text">
<div class="teacher-itemname fs14">{{item.name}}</div>
<div class="five-tag fs11">#心动时刻</div>
<img @click="video(index)" class="five-radio" src="../../images/play.png"/>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'YqyFiveMinutes',
components: {
},
watch: {
},
props: {
hotTeachers: {
type: Array,
default:()=>{
return [
{
img: '../../images/Shape@2x.png',
name: '原来高血压还能这么预防最有效!赶快来看看',
hospital: '北京大学人民医院'
},
{
img: '../../images/Shape@2x.png',
name: '蒋立新',
hospital: '医院'
},
{
img: '../../images/Shape@2x.png',
name: '蒋立新',
hospital: '医院'
},
{
img: '../../images/Shape@2x.png',
name: '蒋立新',
hospital: '医院'
}
]
}
}
},
data () {
return {
}
},
mounted(){
},
methods: {
fiveMinutesMore(){
console.log('fiveMinutesMore');
this.$emit('fiveMinutesMore')
},
video(val){
console.log('video',val);
this.$emit('video')
}
}
}
</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) px2rem(26px);
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(9px);
padding: px2rem(3px) px2rem(5px) px2rem(2px) 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(65px);
height: px2rem(65px);
border-radius: px2rem(3px);
}
.five-text{
width: px2rem(260px);
height: px2rem(38px);
}
.teacher-itemname{
color: RGBA(102, 102, 102, 1);
margin-bottom: px2rem(13px);
}
.five-tag{
width: px2rem(61px);
height: px2rem(17px);
border-radius: 0 px2rem(3px) px2rem(3px) px2rem(3px);
color: RGBA(191, 158, 21, 1);
background-color: RGBA(250, 229, 175, 1);
}
.five-radio{
width: px2rem(25px);
height: px2rem(25px);
border-radius: 50%;
position:absolute;
right: 0;
top: px2rem(46px);
}
}
}
</style>
<template>
<div class="hello">
<div class="header">
<div class="white gxy fs50">{{resourceData.title}}</div>
<div>
<span class="white fs30 gxyStudy">{{resourceData.studyCount.toLocaleString()}}人学习</span>
<span class="white fs30">{{resourceData.follower.toLocaleString()}}人关注</span>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'YqyHeaderTop',
components: {
},
props: {
resourceData: {
type: Object,
default:()=>{
return {
title: '高血压',
studyCount: 270000,
follower: 1
}
}
}
},
watch: {
message(val){
console.log('val',val);
}
},
data () {
return {
message: ''
}
},
mounted(){
},
methods: {
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '../../style/mixin.scss';
@import '../../style/global.scss';
html,body{
width: px2rem(375px);
height: 100%;
background-color: #F8F8F8;
}
.white{
color: #fff;
}
.fs30{
font-size: px2rem(15px);
}
.gxyStudy{
margin-right: px2rem(19px);
}
.gxy{
font-size: px2rem(25px);
margin: px2rem(25px) 0 px2rem(11px) 0;
}
.header{
width: 100%;
height: px2rem(213px);
background-image: url('http://pica-pro.oss-cn-shanghai.aliyuncs.com/teach/bg.png');
}
.hotTag{
width: 100%;
height: px2rem(150px);
}
.hotTagTitle{
font-size: px2rem(18px);
padding: px2rem(73px) px2rem(15px);
float: left;
background-color: #fff;
}
.cource{
width: 100%;
height: px2rem(350px);
}
.fontTitle{
font-size: px2rem(18px);
padding: 0 0 px2rem(21px) px2rem(15px);
float: left;
width: 100%;
text-align: left;
}
.title{
font-size: px2rem(16px);
}
.courceLeft{
float: left;
padding-left: px2rem(15px);
}
.needLeft{
float: left;
padding: 0 0 px2rem(40px) px2rem(15px);
}
.courceTime{
float: left;
}
.courceImg{
width: px2rem(170px);
height: px2rem(96px);
margin-bottom: px2rem(10px);
}
.courceMore{
font-size: px2rem(15px);
color: #999999;
}
.need{
width: 100%;
height: px2rem(325px);
margin-top: px2rem(35px);
}
</style>
<template>
<div class="hot-teacher">
<div class="title">
{{title}}
</div>
<div class="tea-list">
<div class="tea-listbox">
<div class="tea-item" :key="index" v-for="(item,index) in hotTeachers">
<div class="head-pic">
<img class="tea-itemimg" src="../../images/552064153@2x.png"/>
</div>
<span class="tea-itemname">{{item.name}}</span>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'YqyHotTeacher',
props: {
title:{
type:String,
default:'云鹊名师'
},
hotTeachers: {
type: Array,
default:()=>{
return [
{
img: '../../images/552064153@2x.png',
name: '蒋立新'
},
{
img: '../../images/head-test.png',
name: '蒋立新'
},
{
img: '../../images/head-test.png',
name: '蒋立新'
},
{
img: '../../images/head-test.png',
name: '蒋立新'
},
{
img: '../../images/head-test.png',
name: '蒋立新'
},
{
img: '../../images/head-test.png',
name: '蒋立新'
},
{
img: '../../images/head-test.png',
name: '蒋立新'
}
]
}
}
},
data () {
return {
}
},
mounted(){
},
methods: {
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '../../style/mixin.scss';
.hot-teacher{
width: 100%;
background-color: #fff;
padding: 0 0 px2rem(26px) px2rem(15px);
.title{
font-size: px2rem(18px);
padding: 0 0 px2rem(21px) px2rem(5px);
font-weight: bold;
}
.tea-list{
width: 100%;
overflow: hidden;
height: px2rem(75px);
overflow-x: scroll;
-webkit-tap-highlight-color:rgba(0,0,0,0);
outline: 0;
-webkit-overflow-scrolling : touch;
}
.tea-listbox{
width: 1100px;
clear: both;
}
.tea-item{
font-size: px2rem(13px);
margin: 0 px2rem(19px) 0 0;
display: inline-block;
position: relative;
float: left;
text-align: center;
.head-pic{
background: #ECECEC;
width: px2rem(50px);
height: px2rem(50px);
border-radius: 50%;
}
.tea-itemimg{
width: px2rem(39px);
height: px2rem(44px);
margin-top: px2rem(6px);
border-radius: 50%;
}
.tea-itemname{
color: RGBA(102, 102, 102, 1);
padding-top: px2rem(5px);
font-size: px2rem(13px);
line-height: px2rem(19px);
}
}
}
</style>
<template>
<div class="banner-box">
<div class="banner space-between">
<div :class="index+1==resourceData.length ?'banner-item item-end' : 'banner-item'" :key="index" v-for="(item,index) in resourceData">
<!-- <img class="bannerImg" :src="item.img"/> -->
<img class="banner-img" src="../../images/Shape@2x.png"/>
<span class="banner-text fs24">
{{item.name}}<i></i>
</span>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'YqyHomeBanner',
watch: {
},
props: {
resourceData: {
type: Array,
default:()=>{
return [
{img: '../../images/Shape@2x.png',
name: '微专业'},
{img: '../../images/Shape@2x.png',
name: '名师讲堂'},
{img: '../../images/Shape@2x.png',
name: '患者教育'},
{img: '../../images/Shape@2x.png',
name: '专项合作'},
{img: '../../images/Shape@2x.png',
name: '活动掠影'}
]
}
}
},
data () {
return {
}
},
mounted(){
},
methods: {
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '../../style/mixin.scss';
@import '../../style/global.scss';
html,body{
width: px2rem(375px);
height: px2rem(100%);
background-color: #F8F8F8;
}
.banner-box{
position: relative;
height: px2rem(47px);
padding:0 px2rem(15px);
}
.banner{
width: px2rem(345px);
height: px2rem(74px);
background-color: #fff;
position: absolute;
top:-(px2rem(27px));
padding: px2rem(15px) px2rem(10px);
box-shadow: 0 px2rem(1px) px2rem(5px) RGBA(42, 94, 161, 0.15);
border-radius: px2rem(3px);
}
.banner-item{
width: px2rem(50px);
display: inline-block;
position: relative;
margin-right: px2rem(18px);
text-align: center;
}
.item-end{
margin-right: 0
}
.banner-img{
min-width: px2rem(22px);
max-height: px2rem(20px);
margin: 0 auto;
display: block;
}
.banner-text{
display: inline-block;
position: relative;
font-size: px2rem(12px);
text-align: center;
}
.banner-text i{
width: px2rem(4px);
height: px2rem(4px);
display: inline-block;
background: #FB5B52;
border-radius: 100%;
position: absolute;
top:0;
right: -4px
}
</style>
<template>
<div class="space-between header">
<div :class="resourceData.isTransparent?'search-transparent':'bgWhite'" class="search">
<input type="search" :class="resourceData.isTransparent?'search-transparent':''" class="input" v-model="message" :placeholder="resourceData.placeholder"/>
<img class="search-img" src='../../images/Group2@2x.png'>
</div>
<div class="header-right">
<img class="info" src='../../images/msg1.png'>
<div :class="resourceData.isTransparent?'transparent':'not-transparent'" class="info-count fs10">{{resourceData.count}}</div>
</div>
</div>
</template>
<script>
export default {
name: 'header',
data () {
return {
message: ''
}
},
mounted(){
},
methods: {
},
props: {
resourceData: {
type: Object,
default:()=>{
return {
isTransparent: true,
placeholder: '请输入课程名称',
img: '../../images/msg1.png',
count: "10"
}
}
}
},
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '../../style/mixin.scss';
@import '../../style/global.scss';
html,body{
width: px2rem(375px);
height: 100%;
background-color: #F8F8F8;
}
.search-transparent{
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.5);
color: #fff;
}
.search-transparent::-webkit-input-placeholder{
color: #fff;
}
.white{
color: #fff;
}
.header-right{
width: px2rem(30px);
height: px2rem(30px);
position: relative;
}
.fs30{
font-size: px2rem(15px);
}
.gxy-study{
margin-right: px2rem(19px);
}
.gxy{
font-size: px2rem(25px);
margin: px2rem(25px) 0 px2rem(11px) 0;
}
.header{
width: 100%;
padding: 0 px2rem(25px) 0 px2rem(15px);
position: relative;
}
.search{
width: px2rem(290px);
height: px2rem(30px);
border-radius: px2rem(19px);
}
.input{
outline: none;
border: none;
float: left;
font-size: px2rem(13px);
margin: px2rem(6px) 0 px2rem(6px) px2rem(15px);
line-height: px2rem(18px);
width: 80%;
}
.search-img{
width: px2rem(16px);
height: px2rem(16px);
margin: px2rem(6px) px2rem(15px) px2rem(9px) 0;
float: right;
}
.info{
width: px2rem(20px);
height: px2rem(20px);
}
.info-count{
position:absolute;
top: 0;
left: px2rem(21px);
/*width: px2rem(15px);*/
padding:0 px2rem(3px);
height: px2rem(15px);
border-radius: 50%;
text-align: center;
line-height: px2rem(15px);
}
.transparent{
background-color: #fff;
color: RGBA(53, 134, 126, 1);
}
.not-transparent{
background-color: RGBA(251, 91, 82, 1);
color: #fff;
}
.hot-tag{
width: 100%;
height: px2rem(150px);
}
.hotTagTitle{
font-size: px2rem(18px);
padding: px2rem(73px) px2rem(15px);
float: left;
background-color: #fff;
}
.cource{
width: 100%;
height: px2rem(350px);
}
.font-title{
font-size: px2rem(18px);
padding: 0 0 px2rem(21px) px2rem(15px);
float: left;
width: 100%;
text-align: left;
}
.title{
font-size: px2rem(16px);
}
.cource-left{
float: left;
padding-left: px2rem(15px);
}
.need-left{
float: left;
padding: 0 0 px2rem(40px) px2rem(15px);
}
.cource-time{
float: left;
}
.cource-img{
width: px2rem(170px);
height: px2rem(96px);
margin-bottom: px2rem(10px);
}
.cource-more{
font-size: px2rem(15px);
color: #999999;
}
.need{
width: 100%;
height: px2rem(325px);
margin-top: px2rem(35px);
}
</style>
<template>
<div class="keep-learn">
<div v-show="isShow" class="border-bottom space-between keep-learnbox">
<div class="learning-txt">
<div class="gray keepon-title">{{resourceData.message}}</div>
<div>
<span class="gray fs24 keepon-right">已学习:{{resourceData.week}}</span>
<span class="gray fs24 keepon-right">剩余:{{resourceData.Remaining}}%</span>
<span class="gray fs24 continue-study" @click="continueStudy">继续学习></span>
</div>
</div>
<span class="close-m">
<img @click="cancel" src="../../images/close.png"/>
</span>
</div>
</div>
</template>
<script>
export default {
name: 'YqyHomeKeepon',
components: {
},
props: {
resourceData: {
type: Object,
default:()=>{
return {
message: '动态血压监测与高血压精准治疗该如何进行',
week: 2,
Remaining: 2
}
}
}
},
watch: {
},
data () {
return {
isShow: true
}
},
mounted(){
},
methods: {
continueStudy(){
console.log('continueStudy');
this.$emit('continueStudy')
},
cancel(){
console.log('cancel');
this.isShow = false;
this.$emit('cancel')
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '../../style/mixin.scss';
@import '../../style/global.scss';
.keep-learn{
width: 100%;
padding: 0 px2rem(15px);
margin-top: px2rem(15px);
.keep-learnbox{
padding: px2rem(10px);
position: relative;
}
.border-bottom{
width: 100%;
border-bottom: 1px solid RGBA(231, 231, 231, 1);
padding-bottom: px2rem(10px);
}
.keepon-title{
font-size: px2rem(14px);
}
.continue-study{
color: RGBA(31, 121, 115, 1);
}
.keepon-right{
margin-right: px2rem(15px);
}
.learning-txt{
position: relative;
}
.close-m{
position: absolute;
width: px2rem(25px);
height: px2rem(25px);
display: inline-block;
right: px2rem(10px);
top:50%;
margin-top:-(px2rem(8px));
img{
width: 100%;
display: block;
}
}
}
</style>
<template>
<div class="hot-teacher">
<div class="space-between">
<img class="img" src="../../images/Group21@2x.png"/>
</div>
<div class="teacher-item space-between">
<div class="tea-itemImg">
<img :src="resourceData.img"/>
</div>
<div class="five-text">
<div class="tea-itemname fw fs30">{{resourceData.name}}</div>
<div class="five-tag fs28 gray">{{resourceData.motto}}</div>
<div @click="btn" class="porter-btn white fs22">查看</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'YqyFiveMinutes',
components: {
},
watch: {
},
props: {
resourceData: {
type: Object,
default:()=>{
return{
img: '../../images/Shape@2x.png',
name: '原来高血压',
motto: '北京大学人民医院'
}
}
}
},
data () {
return {
}
},
mounted(){
},
methods: {
fiveMinutesMore(){
console.log('fiveMinutesMore');
this.$emit('fiveMinutesMore')
},
btn(){
console.log('btn');
this.$emit('btn')
}
}
}
</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) px2rem(26px);
.img{
width: px2rem(109px);
height: px2rem(22px);
}
.five-more{
border: 1px solid RGBA(169, 174, 183, 1);
border-radius: px2rem(9px);
width: px2rem(40px);
height: px2rem(16px);
text-align: center;
line-height: px2rem(15px);
}
.teacher-item{
width: 100%;
height: px2rem(65px);
position: relative;
margin-top: px2rem(20px);
background: #F9FAFC;
&:not(:last-child){
border-bottom: 1px solid RGBA(240, 240, 240, 1);
}
.tea-itemimg{
width: px2rem(56px);
height: px2rem(63px);
border-radius: px2rem(3px);
}
.five-text{
width: px2rem(280px);
position: relative;
}
.tea-itemname{
color: RGBA(102, 102, 102, 1);
margin: px2rem(10px) 0 px2rem(6px);
}
.five-tag{
width: px2rem(235px);
height: px2rem(14px);
}
.porter-btn{
width: px2rem(42px);
height: px2rem(20px);
background: linear-gradient(to bottom, RGBA(143, 193, 230, 1), RGBA(88, 144, 221, 1));
border-radius: px2rem(14px);
text-align: center;
line-height: px2rem(20px);
position:absolute;
right: px2rem(10px);;
top: 50%;
margin-top:-(px2rem(10px));
}
}
}
</style>
<template>
<div class="hotTag">
<div :style="{'text-align': direction}" class="hotTagTitle">{{title}}</div>
<div class="hotTagItem" :key="index" v-for="(item,index) in allTags">
<span class="itemName">{{item}}</span>
</div>
</div>
</template>
<script>
export default {
name: 'YqyHotLabel',
components: {
},
watch: {
},
props: {
allTags: {
type: Array,
default:()=>{
return ['a', '最新发布','在学人数', 'aaaaaa', '最新发布','在学人数', '最新发布','在学人数', '最新发布','在学人数', '最新发布']
}
},
direction: {
type: String,
default: 'left'
},
title: {
type: String,
default: '热门标签'
}
},
data () {
return {
}
},
mounted(){
},
methods: {
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '../../style/mixin.scss';
.hotTag{
width: 100%;
background-color: #fff;
padding: px2rem(60px) px2rem(15px) px2rem(26px);
margin-bottom: px2rem(6px);
}
.hotTagTitle{
font-size: px2rem(18px);
font-weight: bold;
}
.hotTagItem{
margin: px2rem(10px) px2rem(15px) 0 0;
display: inline-block;
.itemName{
background-color: RGBA(244, 247, 255, 1);
color: RGBA(121, 148, 237, 1);
padding: px2rem(2px) px2rem(6px);
font-size: px2rem(13pt);
}
}
</style>
<template>
<div class="hot-teacher">
<div :style="{'text-align': direction}" class="title">{{title}}</div>
<div class="teacher-item" :key="index" v-for="(item,index) in hotTeachers">
<img class="tea-itemimg" :src="item.img"/>
<span class="tea-itemname">{{item.name}}</span>
<span class="tea-hospital">{{item.hospital}}</span>
</div>
</div>
</template>
<script>
export default {
name: 'YqyHotTeacher',
components: {
},
watch: {
},
props: {
hotTeachers: {
type: Array,
default:()=>{
return [
{
img: '../../images/Shape@2x.png',
name: '蒋立新',
hospital: '北京大学人民医院'
},
{
img: '../../images/Shape@2x.png',
name: '蒋立新',
hospital: '医院'
},
{
img: '../../images/Shape@2x.png',
name: '蒋立新',
hospital: '医院'
},
{
img: '../../images/Shape@2x.png',
name: '蒋立新',
hospital: '医院'
}
]
}
},
direction: {
type: String,
default: 'left'
},
title: {
type: String,
default: '热门标签'
}
},
data () {
return {
}
},
mounted(){
},
methods: {
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '../../style/mixin.scss';
.title{
font-size: px2rem(18px);
font-weight: bold;
}
.hot-teacher{
width: 100%;
background-color: #fff;
padding: 0 px2rem(15px) px2rem(26px);
.teacher-item{
font-size: px2rem(13pt);
margin: px2rem(10pt) px2rem(15pt) 0 0;
display: inline-block;
background-color: RGBA(244, 247, 255, 1);
border-radius: px2rem(16px);
padding: px2rem(8px) px2rem(10px);
position: relative;
.tea-itemimg{
width: px2rem(23px);
height: px2rem(23px);
border-radius: 50%;
position: absolute;
top: 10px;
}
.tea-itemname{
color: RGBA(102, 102, 102, 1);
padding: px2rem(2px) px2rem(6px);
font-size: px2rem(14pt);
margin-left: px2rem(24px);
}
.tea-hospital{
color: RGBA(153, 153, 153, 1);
font-size: px2rem(12pt);
}
}
}
</style>
<template>
<div class="newClass">
<div :style="{'text-align': direction}" class="hotTagTitle">{{resourceData.title}}</div>
<mt-swipe :show-indicators="false" :auto="0">
<mt-swipe-item>
<img class="newClassImg" :src="resourceData.item[0].img"/>
<div class="fs32">{{resourceData.item[0].title}}</div>
<div class="space-between">
<div>
<span class="gray fs24">{{resourceData.item[0].time}}</span>
<span class="gray fs24">|</span>
<span class="gray fs24">{{resourceData.item[0].peopleCount}}人已学</span>
</div>
<div @click="collect(0)" v-if="!resourceData.item[0].isCollect" class="fs22 collect">收藏</div>
<div @click="collect(0)" v-else class="fs22 collect">已收藏</div>
</div>
</mt-swipe-item>
<mt-swipe-item v-if="resourceData.item[1]">
<img class="newClassImg" :src="resourceData.item[1].img"/>
<div class="fs32">{{resourceData.item[1].title}}</div>
<div class="space-between">
<div>
<span class="gray fs24">{{resourceData.item[1].time}}</span>
<span class="gray fs24">|</span>
<span class="gray fs24">{{resourceData.item[1].peopleCount}}人已学</span>
</div>
<div @click="collect(1)" v-if="!resourceData.item[1].isCollect" class="fs22 collect">收藏</div>
<div @click="collect(1)" v-else class="fs22 collect">已收藏</div>
</div>
</mt-swipe-item>
<mt-swipe-item v-if="resourceData.item[2]">
<img class="newClassImg" :src="resourceData.item[2].img"/>
<div class="fs32">{{resourceData.item[2].title}}</div>
<div class="space-between">
<div>
<span class="gray fs24">{{resourceData.item[2].time}}</span>
<span class="gray fs24">|</span>
<span class="gray fs24">{{resourceData.item[2].peopleCount}}人已学</span>
</div>
<div @click="collect(2)" v-if="!resourceData.item[2].isCollect" class="fs22 collect">收藏</div>
<div @click="collect(2)" v-else class="fs22 collect">已收藏</div>
</div>
</mt-swipe-item>
</mt-swipe>
</div>
</template>
<script>
import { Swipe, SwipeItem } from 'mint-ui';
export default {
name: 'YqyNewClass',
components: {
},
watch: {
},
props: {
resourceData: {
type: Object,
default:()=>{
return {
title: '新课上线',
item: [
{
img: '',
title: '1',
time: '刚刚',
peopleCount: 9,
isCollect: false
},
{
img: '',
title: '1',
time: '刚刚',
peopleCount: 9,
isCollect: false
},
{
img: '',
title: '1',
time: '刚刚',
peopleCount: 9,
isCollect: false
}
]
}
}
},
direction: {
type: String,
default: 'left'
}
},
data () {
return {
}
},
mounted(){
},
methods: {
collect(val){
this.resourceData.item[val].isCollect = !this.resourceData.item[val].isCollect;
console.log('collect',this.resourceData.item[val].isCollect,val);
this.$emit('collect',this.resourceData.item[val].isCollect, val)
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '../../style/mixin.scss';
@import '../../style/global.scss';
.newClass{
width: 100%;
height: px2rem(320px);
background-color: #fff;
padding: px2rem(15px) px2rem(15px) px2rem(26px);
margin-bottom: px2rem(6px);
}
.collect{
height: px2rem(18px);
background-color: RGBA(247, 248, 249, 1);
line-height: px2rem(18px);
color: RGBA(102, 102, 102, 1);
padding: 0 px2rem(4px);
}
.newClassImg{
width: px2rem(345px);
height: px2rem(191px);
}
.hotTagTitle{
font-size: px2rem(18px);
font-weight: bold;
margin-bottom: px2rem(15px);
}
.hotTagItem{
margin: px2rem(10px) px2rem(15px) 0 0;
display: inline-block;
.itemName{
background-color: RGBA(244, 247, 255, 1);
color: RGBA(121, 148, 237, 1);
padding: px2rem(2px) px2rem(6px);
font-size: px2rem(13pt);
}
}
</style>
<template>
<div class="hello">
<div class="banner">
<img class="bannerLogo" src="../../images/Shape@2x.png"/>
<div class="fs28 center infoName">{{resourceData.name}}</div>
<div class="fs28 line center">
<span class="gray">{{resourceData.hospital}}</span>
<span class="gray">{{resourceData.rank}}</span>
<span class="gray">{{resourceData.type}}</span>>
</div>
<div class="studyCount">
<div class="fs28">
<div class="fs28">{{resourceData.studyCount}}</div>
<div class="fs24 gray">学习人数</div>
</div>
<div class="fs28">
<div class="fs28">{{resourceData.follower}}</div>
<div class="fs24 gray">关注人数</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'banner',
watch: {
},
props: {
resourceData: {
type: Object,
default:()=>{
return {
name: '蒋立新',
hospital: '阜外医院',
rank: '教授',
type: '主任医师',
studyCount: 8969,
follower: 8969
}
}
}
},
data () {
return {
}
},
mounted(){
},
methods: {
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '../../style/mixin.scss';
@import '../../style/global.scss';
html,body{
width: px2rem(375px);
height: 100%;
background-color: #F8F8F8;
}
.banner{
width: px2rem(335px);
height: px2rem(139px);
background-color: #fff;
position: absolute;
top: px2rem(165px);
left: px2rem(17px);
padding: px2rem(15px) px2rem(22px);
box-shadow: 0 px2rem(1px) px2rem(5px) RGBA(42, 94, 161, 0.15);
border-radius: px2rem(3px);
}
.infoName{
margin-top: px2rem(15px);
}
.line{
margin-top: px2rem(4px);
}
.fs28{
font-size: px2rem(14px);
}
.fs24{
font-size: px2rem(12px);
}
.gray{
color: RGBA(102, 102, 102, 1);
margin-top: px2rem(5px);
}
.bannerLogo{
width: px2rem(45px);
height: px2rem(45px);
border-radius: 50%;
margin: 0 px2rem(122px);
position: absolute;
top: px2rem(-20px);
}
.studyCount{
display: flex;
justify-content: space-between;
padding: 0 px2rem(33px);
margin-top: px2rem(15px);
}
</style>
<template>
<div class="cource-teach">
<div class="space-between cource-header">
<div :style="{'text-align': direction}" class="title">{{teacherData.title}}</div>
</div>
<div class="couse-list">
<div :class="index%2==1 ? 'course-item end-left' : 'course-item'" :key="index" v-for="(item,index) in cource">
<div class="course-pic">
<img src="../../images/552064153@2x.png" class="pic-tec" />
<span class="course-tag">高血压</span>
</div>
<p class="course-txt">
高血压伴糖尿病的规范化治疗
</p>
<div class="course-opt">
<span class="opt-info">刚刚 | 89人已学</span>
<span class="opt collect">
收藏
</span>
<span class="opt collected">
已收藏
</span>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'YqyTeacherList',
components: {
},
props:
{
teacherData: {
type: Object,
default: ()=>{
return {
title: '最新课程',
hasSelect: true,
showMoreBtn: true,
selectOptions: [
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
],
firstOption: '综合',
options: [
{
isCheck: false,
title: '在学人数'
},
{
isCheck: false,
title: '最新发布'
}
]
}
}
},
hasPersonName: {
type: Boolean,
default: true
},
courceData: {
type: Object,
default:()=>{
return {
selected: '综合1',
hasHospital: true,
hasType: true,
ascending: true,
data: [
{
img: '../../images/Shape@2x.png',
name: '检查',
isLeft: true,
hospital: '阜外医院',
color: 'blue',
teacher: '小单',
count: 477,
type: '检查'
},
{
img: '../../images/Shape@2x.png',
name: '检查',
isLeft: true,
hospital: '阜外医院',
color: 'green',
teacher: '小单',
count: 477,
type: '检查'
},
{
img: '../../images/Shape@2x.png',
name: '检查',
isLeft: true,
hospital: '阜外医院',
color: 'pink',
teacher: '小单',
count: 477,
type: '检查'
},
{
img: '../../images/Shape@2x.png',
name: '检查',
isLeft: true,
hospital: '阜外医院',
color: 'yellow',
teacher: '小单',
count: 477,
type: '检查'
},
{
img: '../../images/Shape@2x.png',
name: '检查',
isLeft: true,
hospital: '阜外医院',
color: 'blue',
teacher: '小单',
count: 477,
type: '检查'
},
{
img: '../../images/Shape@2x.png',
name: '检查',
isLeft: true,
hospital: '阜外医院',
color: 'green',
teacher: '小单',
count: 477,
type: '检查'
},
{
img: '../../images/Shape@2x.png',
name: '检查',
isLeft: true,
hospital: '阜外医院',
color: 'pink',
teacher: '小单',
count: 477,
type: '检查'
},
{
img: '../../images/Shape@2x.png',
name: '检查',
isLeft: true,
hospital: '阜外医院',
color: 'yellow',
teacher: '小单',
count: 477,
type: '检查'
}
]
}
}
},
direction: {
type: String,
default: 'left'
}
},
watch: {
selected(val){
console.log('val',val);
this.$emit('selected',val)
}
},
data () {
return {
selected: 'A',
isStudy: false,
ascending: true,
cource: [
{
img: '../../images/Shape@2x.png',
name: '检查',
hospital: '阜外医院',
color: 'blue'
},
{
img: '../../images/Shape@2x.png',
name: '检查',
hospital: '阜外医院',
color: 'blue'
},
{
img: '../../images/Shape@2x.png',
name: '检查',
hospital: '阜外医院',
color: 'blue'
},
{
img: '../../images/Shape@2x.png',
name: '检查',
hospital: '阜外医院'
},
{
img: '../../images/Shape@2x.png',
name: '检查',
hospital: '阜外医院'
},
{
img: '../../images/Shape@2x.png',
name: '检查',
hospital: '阜外医院'
},
{
img: '../../images/Shape@2x.png',
name: '检查',
hospital: '阜外医院'
},
{
img: '../../images/Shape@2x.png',
name: '检查',
hospital: '阜外医院'
}
],
showMore: false,
options: [
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
]
}
},
created () {
},
mounted(){
this.flag();
},
methods: {
disable(val){
console.log('val',val);
},
teacherChange(){
console.log('teacherChange');
this.$emit('teacherChange')
},
teacherMore(){
console.log('teacherMore');
this.$emit('teacherMore')
},
firstOption(){
this.isStudy = false;
this.ascending = !this.ascending;
console.log('firstOption');
this.$emit('firstOption',this.ascending)
},
flag(){
let temp = this.courceData.data;
let fourCource = temp&&temp.slice(0,4);
console.log('fourCource',fourCource);
if(!this.showMore&&this.teacherData.showMoreBtn){
this.cource = fourCource;
}else{
this.cource = this.courceData.data;
}
},
showMoreFn(){
console.log('more',1);
this.showMore = !this.showMore;
this.flag();
},
collection(){
},
study(val){
this.isStudy = true;
console.log('val',val);
this.teacherData.options[val].isCheck=!this.teacherData.options[val].isCheck;
this.teacherData.options.filter((item,index)=>
index!==val
)[0].isCheck= false
this.$emit('study',val)
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<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;
}
.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);
position: relative;
.pic-tec{
width: 100%;
display: block;
}
.course-tag{
position: absolute;
display: inline-block;
top:px2rem(5px);
left: px2rem(5px);
height: px2rem(16px);
color:#4A87D4;
padding: 0 px2rem(3px);
background: #C3DCFB;
font-size: px2rem(10px);
border-radius: px2rem(2px);
}
}
.course-txt{
margin-top: px2rem(5px);
font-size: px2rem(14px);
line-height: px2rem(19px);
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);
.opt{
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);
padding: 0 0 px2rem(21px) px2rem(5px);
font-weight: bold;
}
</style>
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册