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

test1

上级 cbb4ed3c
......@@ -3,7 +3,9 @@
<span class="hot-lect-wrapper-title">热门讲师</span>
<div class="hot-lect-wrapper">
<div class="hot-lect-wrapper-list" >
<div class="hot-lect-wrapper-list-item" v-for="(item,index) in parmData" @click="goToPage(item)" :key="index">
<div class="hot-lect-wrapper-list-item"
v-for="(item,index) in parmData" :key="index"
@click="gotoDetail(item)">
<div class="lect-img">
<img v-lazy="item.doctorAvatarImg"/>
<span class="disp-blc">
......@@ -20,9 +22,10 @@
<script>
// import { setEventByModuleCode } from '@/utils/index'
import { teacher } from '../../utils/buryingPoint';
import { jumpWebPageUrl } from '@/utils/index'
export default {
data(){
data() {
return {
title:'热门讲师',
list: [],
......@@ -44,43 +47,18 @@ export default {
},
methods: {
//跳转
goToPage(item){
let _this = this,
url = jumpWebPageUrl+'appl/#/teachersDetail?id='+item.doctorId+"&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
}
]
// 跳转到详情页面
gotoDetail(item){
this.$router.push({
path: '/teachersDetail',
query: {
id: item.doctorId
}
};
rocNative.dispatchEventByModuleCode({
modeCode: itemData.appModuleInfo.code,
jsonString: itemData.appModuleInfo.paramList
})
this.appBuryingPointEntrust({
...teacher,
labelId: item.doctorId,
labelValue: item.doctorName
})
},
......@@ -98,7 +76,11 @@ export default {
}
})
}
},
// 埋点
appBuryingPointEntrust(val) {
rocNative.appBuryingPointEntrust(val)
},
}
}
</script>
......
......@@ -5,7 +5,7 @@
<div class="teach-list">
<div :class="index % 2 == 1 ? 'list-item mr0' : 'list-item'"
v-for="(item, index) in cParamData" :key="index"
@click="goToPage(item)">
@click="gotoDetail(item)">
<div class="tea-img" :style="'background:'+ item.bgColor">
<img :src="item.doctorAvatarImg">
<span class="learn-p">{{item.totalNum | formatNumber}}人已学</span>
......@@ -33,6 +33,7 @@
</template>
<script>
import { teacher } from '../../utils/buryingPoint';
import { mapGetters } from 'vuex'
import { jumpWebPageUrl } from '@/utils/index'
......@@ -69,8 +70,8 @@ export default {
},
computed: {
...mapGetters({
cSearchText: 'cSearchText',
userInfo: 'userInfo',
// cSearchText: 'cSearchText',
// userInfo: 'userInfo',
}),
cParamData() {
if (this.parmData && this.parmData.length) {
......@@ -83,46 +84,22 @@ export default {
watch: {
},
methods: {
//跳转
goToPage(item){
let _this = this,
url = jumpWebPageUrl+'appl/#/teachersDetail?id='+item.doctorId+"&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
}
]
// 跳转到详情页面
gotoDetail(item){
this.$router.push({
path: '/teachersDetail',
query: {
id: item.doctorId
}
};
rocNative.dispatchEventByModuleCode({
modeCode: itemData.appModuleInfo.code,
jsonString: itemData.appModuleInfo.paramList
})
this.appBuryingPointEntrust({
...teacher,
labelId: item.doctorId,
labelValue: item.doctorName
})
},
// 随机生成背景颜色
randomBg(d) {
for (let i = 0; i < d.length; i++) {
if (i % 4 == 0) {
......@@ -137,6 +114,11 @@ export default {
}
return d
},
// 埋点
appBuryingPointEntrust(val) {
rocNative.appBuryingPointEntrust(val)
},
}
}
</script>
......
......@@ -24,6 +24,14 @@ Vue.use(VueLazyload, {
// lazyComponent: true
})
Vue.filter('yLocalString', function(value){
var b = parseInt(value).toString();
if (b === 'NaN') return 0;
var len = b.length;
if (len <= 3) { return b; }
var r = len % 3;
return r > 0 ? b.slice(0, r) + "," + b.slice(r, len).match(/\d{3}/g).join(",") : b.slice(r, len).match(/\d{3}/g).join(",");
})
Vue.filter('formatNumber', function(num, precision, separator) {
var parts;
if (!isNaN(parseFloat(num)) && isFinite(num)) {
......
import App from '../App'
const index = r => require.ensure([], () => r(require('../views/index')), 'search')
const result = r => require.ensure([], () => r(require('../views/result')), 'result')
// const details = r => require.ensure([], () => r(require('../views/teacher-details')), 'details')
export default [{
path: '/',
component: App, //顶层路由,对应index.html
children: [
{
path: '',
redirect: '/index'
},
{
path: '/home',
component: index
},
{
path: '/index',
component: index
}
]
}]
import App from '../App'
const index = r => require.ensure([], () => r(require('../views/index')), 'search')
const result = r => require.ensure([], () => r(require('../views/result')), 'result')
// const details = r => require.ensure([], () => r(require('../views/teacher-details')), 'details')
const activity = r => require.ensure([], () => r(require('../views/activity/activity')), 'activity')
// const teachers = r => require.ensure([], () => r(require('../views/index')), 'teachers')
const teachers = r => require.ensure([], () => r(require('../views/teachers/index')), 'teachers')
const teachersDetail = r => require.ensure([], () => r(require('../views/teachers/detail')), 'teachersDetail')
export default [{
path: '/',
component: App, //顶层路由,对应index.html
children: [
children: [ //二级路由。对应App.vue
//地址为空时跳转home页面
{
path: '',
redirect: '/index'
redirect: '/activity'
},
//首页城市列表页
// {
// path: '/home',
// component: home
// },
{
path: '/home',
component: index
path: '/activity',
component: activity
},
{
path: '/index',
component: index
}
path: '/teachers',
component: teachers
},
{
path: '/teachersDetail',
component: teachersDetail
},
]
}]
<template>
<div>
<transition name="router-fade" mode="out-in">
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
</transition>
<transition name="router-fade" mode="out-in">
<router-view v-if="!$route.meta.keepAlive"></router-view>
</transition>
<svg-icon></svg-icon>
</div>
</template>
<script>
import svgIcon from './components/common/svg';
export default {
components:{
svgIcon
},
}
</script>
<style lang="scss">
@import './style/common';
.router-fade-enter-active, .router-fade-leave-active {
transition: opacity .3s;
}
.router-fade-enter, .router-fade-leave-active {
opacity: 0;
}
</style>
<template>
<div class="cource-teach" id="adjust-u">
<div :class="isFixed ? 'cource-header fixed' : 'cource-header'" :style="{paddingTop:ptop,height:menuHeight}">
<div class="font-title" :style="{top:isFixed?ptop:'0'}">
{{title}}
</div>
</div>
<div>
<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 v-lazy="item.appIndexCourseUrl" 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:1,
isDisabled:false,
pageSize:10,
title:'为您推荐',
isCollected:'',
allLoaded:true,
loading:false,//是否滚动加载
isLoading:false,//加载中
noMore:false,
clientHeight:'auto',
isShowLoading:true,
menuHeight:0,
ptop:0,
}
},
props:{
isFixed:{
default:false,
type:Boolean
},
statusBarHeight:{
type:Number,
default:0
},
parmData:{
type:Array,
default:[]
},
},
mounted(){
///alert(this.statusBarHeight);
this.list = this.parmData;
this.menuHeight = this.statusBarHeight + 7 + 40 + "px";
this.ptop = this.statusBarHeight + "px";
// this.getData();
},
components:{
// LOADING
},
methods: {
//跳转
goToPage(item){
this.pageBurialPoin({
menuLevel:1,
menuCode:'m_home',
functionCode:'f_recommend',
actionCode:'c_course',
labelId:item.id,
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.id}`,
"type":1,
"seqNo":2
}
]
}
};
let paramList = this.setEventByModuleCode(itemData);
rocNative.dispatchEventByModuleCode({
modeCode: itemData.appModuleInfo.code,
jsonString: paramList
})
},
//滑动加载更多
loadMore(){
let _this = this;
if(!_this.noMore){
_this.pageNo += 1;
_this.isLoading = true;
this.loading = true;
//埋点
this.pageBurialPoin({
menuLevel:1,
menuCode:'m_home',
functionCode:'f_recommend',
actionCode:'c_load_more'
})
setTimeout(()=>{
_this.getData('loadMore');
},500)
}
},
//收藏 取消收藏
collectFun(status,id,name){
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'
}
/// alert(this.token)
_this.POST('contents/favors',parm).then(function(res){
if(res.code === '000000'){
status = status == 1 ? 2 : 1;
_this.handelData(id,status);
}
})
},
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.token,
setEntry: 'headers'
}
_this.GET('contents/courses/recommendCourseList',parm).then(function(res){
if(res.code === '000000'){
if(res.data == null || !res.data){
res.data = [];
_this.isLoading = false;
_this.noMore = true;
_this.loading = true;
}else{
_this.isLoading = true;
_this.noMore = false;
_this.loading = false;
}
if(type == 'loadMore'){
_this.list = [..._this.list ,...res.data];
}else{
_this.list = res.data || [];
}
}
///_this.clientHeight = 'auto'
},function(){
_this.isLoading = false;
_this.noMore = false;
_this.loading = false;
})
}
}
}
</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);
}
.cource-header{
/* margin: 0 0 px2rem(11px) 0;*/
overflow: hidden;
.font-title{
line-height: px2rem(40px);
height: px2rem(40px);
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{
.font-title{
position: fixed;
top:0;
left: 0;
width: 100%;
background: #fff;
z-index: 112;
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%;
display: block;
border-radius: px2rem(3px);
}
.course-tag{
position: absolute;
display: inline-block;
top:px2rem(5px);
left: px2rem(5px);
line-height: px2rem(14px);
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;
}
.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" v-lazy="leftObj.imageUrl"/>
</div>
<div class="category-right">
<div class="right-img" @click="goToPage(rightTop)">
<img class="category-img" v-lazy="rightTop.imageUrl"/>
</div>
<div class="right-img mt5" @click="goToPage(rightBottom)">
<img class="category-img" v-lazy="rightBottom.imageUrl"/>
</div>
</div>
</div>
<div class="holder-img" @click="goToPage(rightBp)">
<img v-lazy="rightBp.imageUrl" class="category-img"/>
</div>
</div>
</template>
<script>
// import { setEventByModuleCode } from '@/utils/index'
export default {
data(){
return{
list:[],
leftObj:{},
rightTop:{},
rightBottom:{},
rightBp:{},
title:'专题分类'
}
},
mounted(){
// this.getData();
this.list = this.parmData;
this.leftObj = this.list[0] || {};
this.rightTop = this.list[1] || {};
this.rightBottom = this.list[2] || {};
this.rightBp = this.list[3] || {};
},
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="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 list" @click="goToPage(item)">
<div class="head-pic">
<img class="tea-itemimg" v-lazy="item.avatarImageUrl"/>
</div>
<span class="tea-itemname">{{item.name}}</span>
</div>
</div>
</div>
</div>
</template>
<script>
// import { setEventByModuleCode } from '@/utils/index'
export default {
data(){
return {
title:'云鹊名师',
list:[],
pageNo:1,
pageSize:10
}
},
mounted(){
this.list = this.parmData
//this.getData();
},
props:{
parmData:{
type:Array,
default:[]
},
// userToken:{
// type:String,
// default:''
// }
},
methods: {
//跳转
goToPage(item,parm){
console.log(item);
let _this = this;
let url = location.host+'/#/'
if(parm == 'list'){
rocNative.gotoNewWebActivity({
url: 'http://10.177.10.231:8000/#/teachers'
})
// this.$router.push({
// path: '/teachers',
// query:{
// userToken:_this.userToken
// }
// })
}else{
rocNative.gotoNewWebActivity({
url: 'http://10.177.10.231:8000/#/teachersDetail?id='+item.id
})
// this.$router.push({
// path: '/teachersDetail',
// query:{
// id:item.id,
// userToken:_this.userToken
// }
// })
}
// let obj = {}
// let keyName = '',
// val = '',
// classNameVal = '';
// if(parm == 'list'){
// obj = {
// menuLevel:1,
// menuCode:'m_home',
// functionCode:'f_teacher',
// actionCode: 'c_more',
// }
// keyName = '';
// val = '';
// classNameVal = 'com.picahealth.yunque.activitys.experienceshare.ExperienceShareDetailActivity###SharedExperienceViewController'
// }else{
// obj = {
// menuLevel:1,
// menuCode:'m_home',
// functionCode:'f_teacher',
// actionCode:'c_teacher',
// labelId:item.id,
// labelValue:item.name,
// }
// keyName = 'id';
// val = item.id;
// classNameVal = 'com.picahealth.yunque.activitys.playvideo.PlayVideoFullScrenActivity###VideoPlayerViewController'
// }
// this.pageBurialPoin(obj)
// let itemData = {
// "title":item.name,
// "imageUrl":"",
// "appModuleInfo":{
// "code":"M200",
// "type":4,
// "name":"名师风采个人展示",
// "paramFlag":1,
// "paramList":[
// {
// "key":"className",
// "value":classNameVal,
// "type":4,
// "seqNo":1
// },
// {
// "key":keyName,
// "value":`${val}`,
// "type":1,
// "seqNo":2
// }
// ]
// }
// };
// let paramList = this.setEventByModuleCode(itemData);
// rocNative.dispatchEventByModuleCode({
// modeCode: itemData.appModuleInfo.code,
// jsonString: paramList
// })
},
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);
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==list.length ?'banner-item item-end' : 'banner-item'" :key="index" v-for="(item,index) in list" @click="goToPage(item)">
<img class="banner-img" v-lazy="item.imageUrl"/>
<span class="banner-text fs24">
{{item.name}}
<!-- <i></i> -->
</span>
</div>
</div>
</div>
</template>
<script>
// import { setEventByModuleCode } from '@/utils/index'
export default {
name: 'YqyHomeBanner',
data(){
return {
list:[],
}
},
mounted(){
this.list = this.parmData;
// this.getData();
},
props:{
parmData:{
type:Array,
default:[]
},
},
methods: {
goToPage(itemData){
this.pageBurialPoin({
menuLevel:1,
menuCode:'m_home',
functionCode:'f_icon',
actionCode:'c_icon_files',
labelId:itemData.id,
labelValue:itemData.name,
})
let paramList = this.setEventByModuleCode(itemData);
if(itemData.appModuleInfo && itemData.appModuleInfo.code != 'M400'){
rocNative.dispatchEventByModuleCode({
modeCode: itemData.appModuleInfo.code,
jsonString: paramList
})
}
}
},
}
</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);
}
.banner-item{
width: px2rem(50px);
display: inline-block;
margin-right: px2rem(18px);
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" :style="{paddingTop:ptop}">
<!-- <div :class="isTransparent?'search-transparent':'bgWhite'" class="search">
<input type="search" :class="isTransparent?'search-transparent':''" class="input" v-model="searchVal" :placeholder="placeholder" :disabled="disabled" />
<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="header-right" @click="goToPage">
<img v-if="searchFix" class="info" src='../../images/msg2.png'>
<img v-else class="info" src='../../images/msg1.png'>
<div :class="isMax?'num-max':'num-min'" class="info-count fs10" v-show="isShowMsg">{{count}}</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,
}
},
props:{
msgCount:{
type:String,
default:''
},
statusBarHeight:{
type:Number,
default:0
},
searchFix:{
type:Boolean,
default:false,
}
},
mounted(){
this.count = this.msgCount;
this.ptop = this.statusBarHeight+7+'px';
this.menuptop = this.statusBarHeight+7+43+'px'
// console.log(this.statusBarHeight);
if(this.msgCount == ''){
this.isShowMsg = false
}
if(this.count>=99){
this.count += '+';
this.isMax = true
}
},
methods: {
goToPage(){
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;
}
}
.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{
background: #fff;
position: fixed;
z-index: 110;
top:0;
left: 0;
padding:px2rem(10px) px2rem(25px) px2rem(13px) px2rem(15px);
}
.search-transparent::-webkit-input-placeholder{
color:#666;
}
.search{
border-color:#ddd;
}
.info-count{
background: #FB5B52;
color: #fff
}
}
.search-menu{
padding: 0 px2rem(25px) 0 px2rem(15px);
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{
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:itemData.id,
//labelValue:itemData.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.id}`,
"type":1,
"seqNo":2
}
]
}
};
let paramList = this.setEventByModuleCode(itemData);
rocNative.dispatchEventByModuleCode({
modeCode: itemData.appModuleInfo.code,
jsonString: paramList
});
this.isShow = false;
},
cancel(){
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 v-lazy='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;
console.log(this.isShowEvluat)
},
methods: {
// 跳转到新的web界面
goToPage: function () {
let url =jumpEvaluatPage();
rocNative.gotoNewWebActivity({
pageUrl: url
})
},
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;
if(!_this.isShow){
rocNative.setTabMiniIcon({
tabIndex:3,
iconTitle:'学习评价',
iconColor:'',
isSet:true
})
}
let isPullIndex = _this.isShow ? '1' : '2';
_this.$emit('evluatFun',{isPull:isPullIndex});
}
}
})
},
toggleFun:function(){
this.$emit('evluatFun',{isPull:'0'});
this.isShow = !this.isShow;
}
}
}
</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);
.evaluat-icon{
height: px2rem(26px);
width: px2rem(26px);
border-radius: 50%;
background: #D7E0EC;
display: inline-block;
vertical-align: middle;
img{
margin-top:px2rem(3px);
height: px2rem(23px);
width: px2rem(23px);
display: inline-block;
border-radius: 50%;
}
}
.evaluat-persent{
font-size: px2rem(13px);
color:#AA813B;
}
}
.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 v-lazy="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="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" v-lazy="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" v-lazy="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" v-lazy="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" v-lazy="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.toLocaleString()}}</div>
<div class="fs24 gray">学习人数</div>
</div>
<div class="fs28">
<div class="fs28">{{resourceData.follower.toLocaleString()}}</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" id="new-course">
<div class="space-between cource-header" >
<div class="title" >{{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 list">
<div class="course-pic" @click="goToPage(item)">
<img v-lazy="item.appIndexCourseUrl" 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.whetherFavors==2?'收藏':'已收藏'}}
</span>
</div>
</div>
</div>
<div v-if="list.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:[]
},
},
methods: {
//跳转
goToPage(item){
this.pageBurialPoin({
menuLevel:1,
menuCode:'m_home',
functionCode:'f_new_course',
actionCode:'c_course',
labelId:item.id,
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.id}`,
"type":1,
"seqNo":2
}
]
}
};
let paramList = this.setEventByModuleCode(itemData);
rocNative.dispatchEventByModuleCode({
modeCode: itemData.appModuleInfo.code,
jsonString: paramList
})
},
//收藏 取消收藏
collectFun(status,id){
this.pageBurialPoin({
menuLevel:1,
menuCode:'m_home',
functionCode:'f_new_course',
actionCode:'c_collect',
labelId:id,
/// labelValue:item.name,
})
let _this = this,
parm = {
token:this.userToken,
type:status,
courseId:id,
setEntry: 'headers'
}
_this.POST('contents/favors',parm).then(function(res){
if(res.code === '000000'){
status = status == 1 ? 2 : 1;
_this.handelData(id,status);
}
})
},
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(){
//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;
}
.noSource{
text-align: center;
font-size: px2rem(15px);
padding:px2rem(13px) 0;
}
.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(14px);
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;
}
</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" v-lazy="resourceData.item.pic1.right"/>
</div>
<div class="category-right">
<div class="right-img">
<img class="category-img" v-lazy="resourceData.item.pic2.bg"/>
</div>
<div class="right-img mt5">
<img class="category-img" v-lazy="resourceData.item.pic3.bg"/>
</div>
</div>
</div>
<di class="holder-img">
<img v-lazy="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 v-lazy="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" v-lazy="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 v-lazy="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" v-lazy="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" v-lazy="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" v-lazy="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" v-lazy="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>
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册