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

代码整理

上级 49e9916b
......@@ -23,7 +23,9 @@
</script>
<style lang="scss">
@import './style/common';
// @import './style/common';
@import './style/global';
@import './style/mixin.scss';
.router-fade-enter-active, .router-fade-leave-active {
transition: opacity .1s;
}
......
<template>
<section class="back-top">
<div class="back-btn" @click="backTop">
<img src="../../images//backTop.png">
</div>
</section>
</template>
<script>
export default {
data() {
return {
objPoint: {}
};
},
props: {
burialPoint: {
default: "",
type: String
}
},
mounted() {
if (this.burialPoint == "activity") {
this.objPoint = {
menuLevel: 2,
menuFromCode: "m_home",
menuCode: "m_content_list",
functionCode: "f_activity",
actionCode: "c_top"
};
}
},
methods: {
backTop: function() {
if (this.burialPoint == "activity") {
this.pageBurialPoin(this.objPoint);
}
var osTop = document.documentElement.scrollTop || document.body.scrollTop;
if (osTop > 0) {
document.documentElement.scrollTop = document.body.scrollTop = 0;
}
}
}
};
</script>
<style lang="scss" scoped>
@import "../../style/mixin";
.back-btn {
position: fixed;
width: px2rem(35px);
height: px2rem(35px);
right: px2rem(15px);
z-index: 100;
bottom: px2rem(80px);
img {
width: 100%;
height: 100%;
display: block;
}
}
</style>
<template>
<div :class="searchFix?'header fixed' : 'header' " id="search-top" :style="{height:menuptop}">
<div class="search-menu">
<div class="bgFill" :style="{height:ptop}"></div>
<div class="fixBox">
<img
@click="goBackHome"
class="left-arror"
:style="{top: bPtop}"
src="../../images/left-icon-n.png"
>
<div :class="isTransparent?'search-transparent':'bgWhite'" class="search" @click="goSearch">
<span class="input" :class="isAndroid ? 'pd-top3': 'pd-top1'">{{placeholder}}</span>
<img class="search-img" src="../../images/search-grey.png">
<!-- <img class="search-img" src="../../images/search-white.png"> -->
</div>
</div>
</div>
</div>
</template>
<script>
import { getWebPageUrl } from "@/utils/index";
export default {
data() {
return {
placeholder: "搜索疾病、课程、讲师",
isTransparent: true, //更改颜色 背景
count: "",
ptop: 0,
bPtop: 0,
menuptop: 0,
popHeight: 0,
isAndroid: window.__isAndroid
};
},
props: {
statusBarHeight: {
type: Number,
default: 0
},
searchFix: {
type: Boolean,
default: false
}
},
created() {
let _this = this;
window.__getStatusBarHeight = function(parm) {
if (window.__isAndroid) {
_this.popHeight = parseInt(parm.statusBarHeight) / 2.5
} else {
_this.popHeight = parm.statusBarHeight;
}
_this.ptop = _this.popHeight + "px"
_this.bPtop = _this.popHeight + 2 + "px"
_this.menuptop = _this.popHeight + "px"
};
this.getStatusHight()
},
mounted() {},
methods: {
// 获取状态栏高度
getStatusHight() {
rocNative.getStatusBarHeight({
__funcName: "__getStatusBarHeight"
})
},
// 跳转到搜索项目
goSearch() {
let _this = this,
url = getWebPageUrl("sousuo/#/index");
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
});
},
// 返回到首页
goBackHome() {
rocNative.goBack()
}
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import "../../style/mixin.scss";
@import "../../style/global.scss";
html,
body {
width: px2rem(375px);
height: 100%;
background-color: #f8f8f8;
}
.search-transparent {
background: transparent;
// border: 1px solid rgba(255,255,255,0.6);
color: rgba(255,255,255,0.6);;
margin: px2rem(8px) 0 0 0;
margin-left: px2rem(20px);
}
.search-transparent::-webkit-input-placeholder {
color: #8E8F90;
}
.white {
color: #8E8F90;
}
.header-right {
width: px2rem(20px);
height: px2rem(20px);
position: relative;
margin-top: px2rem(13px);
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: #4cbba9;
height: px2rem(46px);
padding: 0 px2rem(25px);
/* padding-top: px2rem(7px)*/
}
.bgFill {
background: #4cbba9;
}
.search-transparent::-webkit-input-placeholder {
color: #fff;
}
.search {
border-color: #fff;
}
.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);
float: left;
text-align: left;
background:rgba(255,255,255,0.6);
box-shadow: 0 px2rem(2px) px2rem(7px) 0px rgba(0,0,0,0.06);
border-radius: px2rem(15px);
}
.input {
outline: none;
border: none;
float: left;
font-size: px2rem(13px);
margin: 0 0 0 px2rem(15px);
line-height: px2rem(28px);
width: 80%;
color: #8E8F90;
}
.search-img {
width: px2rem(13px);
height: px2rem(13px);
margin: px2rem(8px) px2rem(15px) 0 0;
float: right;
}
.search-img-left {
width: px2rem(13px);
height: px2rem(13px);
margin: px2rem(8px) px2rem(10px) 0 0;
float: left;
}
.info-count {
position: absolute;
top: -(px2rem(5px));
left: (px2rem(10px));
/*max-width: px2rem(25px);*/
padding: 0 px2rem(3px) 0 px2rem(2px);
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);
}
.left-arror {
position: absolute;
left: px2rem(6px);
top: px2rem(3px);
width: px2rem(25px);
height: px2rem(25px);
margin: px2rem(8px) px2rem(12px);
}
.pd-top3 {
padding-top: px2rem(3px);
}
.pd-top1 {
padding-top: px2rem(1px);
}
</style>
<template>
<div class="hot-lect">
<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"
:key="index"
@click="gotoDetail(item)"
>
<div class="lect-img">
<img v-lazy="item.doctorAvatarImg" :key="item.doctorAvatarImg">
<span class="disp-blc">
<span :class="{'andriod-name': isAndroid}">{{item.doctorName}}</span>
</span>
</div>
<span class="disp-blc lect-ks" :class="{'andr-mg': isAndroid}">{{item.department}}</span>
<span class="disp-blc study-num">{{item.joinNum | yLocalString}}人已学</span>
</div>
</div>
</div>
</div>
</template>
<script>
import { getWebPageUrl } from '@/utils'
import { teacher } from "../../utils/buryingPoint";
export default {
data() {
return {
title: "热门讲师",
list: [],
pageNo: 1,
pageSize: 10,
parmData: [],
isAndroid: true
};
},
beforeMount() {},
mounted() {
this.isAndroid = window.__isAndroid;
this.getData();
},
props: {
userToken: {
type: String,
default: ""
}
},
methods: {
// 跳转到详情页面
gotoDetail(item) {
// this.$router.push({
// path: "/teachersDetail",
// query: {
// id: item.doctorId
// }
// });
let paramList = [
{
id: 699,
key: "pageUrl",
value: getWebPageUrl('appl/#/teachersDetail') + '?id=' + item.doctorId + '&from=' + 'appHome',
// value: "https://uat-phome.yunqueyi.com/appl/#/teachersDetail",
type: 4,
seqNo: 1
}
];
rocNative.dispatchEventByModuleCode({
modeCode: 'M300',
jsonString: paramList
});
this.appBuryingPointEntrust({
...teacher,
labelId: item.doctorId,
labelValue: item.doctorName
});
},
//热门讲师
getData() {
let _this = this,
para = {
pageNo: 1,
pageSize: 6,
setEntry: "headers"
};
this.GET("contents/courseDoctor/v1/getHotTeacher", para).then(res => {
if (res.code == "000000") {
_this.parmData = (res.data && res.data.list) || [];
}
});
},
// 埋点
appBuryingPointEntrust(val) {
rocNative.appBuryingPointEntrust(val);
}
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import "../../style/mixin.scss";
@import "../../style/global.scss";
.hot-lect {
&-wrapper {
width: 100%;
overflow: hidden;
height: px2rem(125px);
overflow-x: scroll;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
outline: 0;
-webkit-overflow-scrolling: touch;
&-list {
display: flex;
flex-direction: columns;
margin-left: px2rem(12px);
width: px2rem(666px);
// height: px2rem(130px);
&-item {
display: inline-block;
width: px2rem(105px);
height: px2rem(115px);
margin: px2rem(3px);
text-align: center;
background: rgba(255, 255, 255, 1);
box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.07);
border-radius: px2rem(3px);
span {
width: 100%;
font-size: px2rem(12px);
}
}
}
}
.lect-img {
position: relative;
top: 0;
left: 0;
img {
width: px2rem(60px);
height: px2rem(60px);
margin-top: px2rem(7px);
border-radius: 50%;
}
span {
display: inline-block;
position: absolute;
left: px2rem(14px);
top: px2rem(27px);
font-size: px2rem(12px);
span {
width: px2rem(50px);
height: px2rem(15px);
line-height: px2rem(15px);
border-radius: px2rem(8px);
font-size: px2rem(13px);
color: #fff;
background: #ceae67;
}
}
}
}
.disp-blc {
display: block;
}
.hot-lect-wrapper-title {
display: block;
width: 100%;
margin-top: px2rem(10px);
padding: px2rem(15px);
font-size: px2rem(18px);
font-weight: 500;
color: #333;
}
.disp-blc.lect-ks {
position: relative;
left: 0;
top: px2rem(-6px);
font-size: px2rem(12px);
color: #666;
}
.andr-mg {
margin: px2rem(2px) 0;
}
.disp-blc.study-num {
position: relative;
left: 0;
top: px2rem(-8px);
font-size: px2rem(11px);
color: #999;
}
.andriod-name {
padding-top: px2rem(2px);
}
</style>
<template>
<section>
<article class="group-title">
<article v-show="showOrder" class="group-title-order">
<div @click="order(1, 'isLetterOrderDown', 'doctorFirstNameChar')"
:class="{'active': showOrderIndex === 1}" class="group-title-order-item">
<span>首字母</span>
<img class="first-name default" :src="sortDefaultImg" v-show="showOrderIndex !== 1"/>
<img class="first-name" :src="sortDownImg" v-show="isLetterOrderDown && showOrderIndex === 1"/>
<img class="first-name" :src="sortUpImg" v-show="!isLetterOrderDown && showOrderIndex === 1"/>
</div>
<div @click="order(2, 'isNewCourseOrderDown', 'newTime')"
:class="{'active': showOrderIndex === 2}" class="group-title-order-item">
<span class="new-course">时间</span>
<img class="new-course-default" :src="sortDefaultImg" v-show="showOrderIndex !== 2"/>
<img class="new-course-img" :src="sortDownImg" v-show="isNewCourseOrderDown && showOrderIndex === 2"/>
<img class="new-course-img" :src="sortUpImg" v-show="!isNewCourseOrderDown && showOrderIndex === 2"/>
</div>
<div @click="order(3, 'isResourceNumOrderDown', 'resourceNum')"
:class="{'active': showOrderIndex === 3}" class="group-title-order-item">
<span>课程数</span>
<img class="course-num default" :src="sortDefaultImg" v-show="showOrderIndex !== 3"/>
<img class="course-num" :src="sortDownImg" v-show="isResourceNumOrderDown && showOrderIndex === 3"/>
<img class="course-num" :src="sortUpImg" v-show="!isResourceNumOrderDown && showOrderIndex === 3"/>
</div>
<div @click="order(4, 'isHotOrderDown', 'totalNum')"
:class="{'active': showOrderIndex === 4}" class="group-title-order-item">
<span class="hot-degree-title">人气</span>
<img class="hot-degree default" :src="sortDefaultImg" v-show="showOrderIndex !== 4"/>
<img class="hot-degree" :src="sortDownImg" v-show="isHotOrderDown && showOrderIndex === 4"/>
<img class="hot-degree" :src="sortUpImg" v-show="!isHotOrderDown && showOrderIndex === 4"/>
</div>
</article>
</article>
</section>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
data() {
return {
showOrderIndex: 1,
isLetterOrderDown: true,
isNewCourseOrderDown: true,
isResourceNumOrderDown: true,
isHotOrderDown: true,
sortDefaultImg: require('../../images//sort-default.png'),
sortDownImg: require('../../images//sort-down.png'),
sortUpImg: require('../../images//sort-up.png')
}
},
props: {
groupTitle: {
type: String,
default: '课程'
},
isShowNum: {
type: Boolean,
default: true
},
groupNum: {
type: String,
default: "0"
},
showTitle: {
type: Boolean,
default: true
},
showOrder: {
type: Boolean,
default: true
}
},
methods: {
toggle() {
this.showTitle = !showTitle
this.showOrder = !showOrder
},
order(index, orderType, orderName) {
this.showOrderIndex = index
this[orderType] = !this[orderType]
this.$emit('order', orderName, this[orderType])
},
reset() {
this.showOrderIndex = 1
}
}
}
</script>
<style lang="scss" scoped>
@import '../../style/mixin.scss';
.group-title {
margin-left: px2rem(15px);
display: flex;
flex-direction: row;
&-order {
display: flex;
flex-direction: row;
padding: px2rem(10px) 0 px2rem(10px);
font-size: px2rem(13px);
&-item {
position: relative;
display: block;
width: px2rem(75px);
padding: px2rem(2px) px2rem(20px) px2rem(2px) px2rem(10px);
margin-right: px2rem(15px);
border: 1px solid #F6F6F6;
border-radius: px2rem(25px);
background: #F6F6F6;
img {
position: absolute;
top: px2rem(4px);
left: px2rem(63px);
height: px2rem(15px);
width: px2rem(15px);
}
}
}
.first-name {
left: px2rem(50px);
}
.first-name.default {
top: px2rem(6px);
left: px2rem(53px);
height: px2rem(10px);
width: px2rem(10px);
}
.new-course {
left: px2rem(50px);
margin-left: px2rem(8px);
}
.new-course-default {
top: px2rem(6px);
left: px2rem(48px);
height: px2rem(10px);
width: px2rem(10px);
}
.new-course-img {
top: px2rem(4px);
left: px2rem(46px);
height: px2rem(15px);
width: px2rem(15px);
}
.course-num {
left: px2rem(50px);
}
.course-num.default {
top: px2rem(6px);
left: px2rem(52px);
height: px2rem(10px);
width: px2rem(10px);
}
.hot-degree {
left: px2rem(45px);
}
.hot-degree-title {
margin-left: px2rem(8px);
}
.hot-degree.default {
top: px2rem(6px);
left: px2rem(47px);
height: px2rem(10px);
width: px2rem(10px);
}
.active {
color: #449284;
background:rgba(68,146,132,0.06);
border: 1px solid #449284;
span {
color: #449284;
}
}
&-title {
padding: 0 px2rem(15px);
&-main {
margin-right: px2rem(6px);
font-size: px2rem(18px);
font-weight: 500;
color: #28344C;
}
&-sub {
font-size: px2rem(15px);
font-weight: 400;
color: #999;
}
}
}
</style>
<template>
<section>
<article class="group-title">
<section class="group-title-order">
<div @click="selectedType(1)" class="group-title-order-item">
<span>{{selectedAreaName}}</span>
<img src="../../images//select-down.png">
</div>
<div @click="selectedType(2)" class="group-title-order-item">
<span>{{selectedLevelName}}</span>
<img src="../../images//select-down.png">
</div>
<div @click="selectedType(3)" class="group-title-order-item">
<span>{{selectedDepartName}}</span>
<img src="../../images//select-down.png">
</div>
</section>
</article>
</section>
</template>
<script>
export default {
data() {
return {
selectedTypeIndex: 1
};
},
props: {
selectedAreaName: {
type: String,
default: "全国"
},
selectedLevelName: {
type: String,
default: "全部等级"
},
selectedDepartName: {
type: String,
default: "全部科室"
}
},
computed: {},
watch: {},
methods: {
selectedType(index) {
this.selectedTypeIndex = index;
this.$emit("selectedType", index);
}
}
};
</script>
<style lang="scss" scoped>
@import "../../style/mixin.scss";
.group-title {
display: flex;
flex-direction: row;
margin: px2rem(6px) px2rem(25px) px2rem(4px);
&-order {
display: flex;
flex-direction: row;
width: px2rem(325px);
justify-content: space-between;
font-size: px2rem(13px);
&-item {
span {
font-size: px2rem(15px);
color: #333;
}
img {
position: relative;
top: px2rem(1px);
left: px2rem(-1px);
height: px2rem(11px);
width: px2rem(11px);
}
}
}
}
.active {
color: #449284;
}
</style>
<template>
<section class="group-title-title">
<span class="group-title-title-main">{{mainTitle}}</span>
<span class="group-title-title-sub">{{subTitle}}</span>
</section>
</template>
<script>
export default {
data() {
return {};
},
props: {
mainTitle: {
type: String,
default: "全部讲师"
},
subTitle: {
type: String,
default: "专业领域的资深专家"
}
}
};
</script>
<style lang="scss" scoped>
@import "../../style/mixin.scss";
.group-title {
height: px2rem(18px);
line-height: px2rem(18px);
&-title {
padding: px2rem(10px) px2rem(15px) 0;
&-main {
font-size: px2rem(18px);
font-weight: 500;
color: #28344c;
}
&-sub {
margin-left: px2rem(-4px);
font-size: px2rem(15px);
font-weight: 400;
color: #999;
}
}
}
</style>
<template>
<section>
<div class="font-style">
<div class="teach-opt">
<div class="teach-list">
<div
:class="index % 2 == 1 ? 'list-item mr0' : 'list-item'"
v-for="(item, index) in cParamData"
:key="index"
@click="gotoDetail(item)"
>
<div class="tea-img" :style="'background:'+ item.bgColor">
<!-- <img :src="item.doctorAvatarImg"> -->
<img :src="item.doctorImg">
<span class="learn-p">{{item.joinNum | yLocalString}}人已学</span>
<span class="learn-p-cnum">课程: 共{{item.resourceNum}}</span>
</div>
<div class="tea-txt">
<div class="tea-name">
<span>{{item.doctorName}}</span>
<span class="tea-department">{{item.department}}</span>
</div>
<div class="tea-position">{{item.doctorHospital}}</div>
</div>
</div>
<div class="no-content" v-show="!cParamData.length">
<img class="no-content-img" src="../../images//no-content.png" alt=" ">
<span class="no-content-desc">暂无相关内容</span>
</div>
</div>
</div>
</div>
</section>
</template>
<script>
import { getWebPageUrl } from '@/utils'
import { teacher } from "../../utils/buryingPoint";
import { mapGetters } from "vuex";
import YqyLecturerOrder from "@/components/business/yqy-lecturer-order";
export default {
data() {
return {
col: 1, //0综合,1人气,2资源数,3姓名首字母
dir: 2, //1:正序 2:逆序,
list: []
};
},
components: {
YqyLecturerOrder
},
props: {
parmData: {
type: Array,
default: () => []
}
},
mounted() {},
computed: {
cParamData() {
if (this.parmData && this.parmData.length) {
return this.randomBg(this.parmData);
} else {
return this.randomBg(this.list);
}
}
},
methods: {
// 跳转到详情页面
gotoDetail(item) {
// this.$router.push({
// path: "/teachersDetail",
// query: {
// id: item.doctorId
// }
// });
let paramList = [
{
id: 699,
key: "pageUrl",
value: getWebPageUrl('appl/#/teachersDetail') + '?id=' + item.doctorId + '&from=' + 'appHome',
// value: "https://uat-phome.yunqueyi.com/appl/#/teachersDetail",
type: 4,
seqNo: 1
}
];
rocNative.dispatchEventByModuleCode({
modeCode: 'M300',
jsonString: paramList
});
this.appBuryingPointEntrust({
...teacher,
labelId: item.doctorId,
labelValue: item.doctorName
});
},
// 随机生成背景颜色
randomBg(d) {
for (let i = 0; i < d.length; i++) {
if (i % 4 == 0) {
d[i].bgColor = "#EBF6F1";
} else if (i % 4 == 1) {
d[i].bgColor = "#EDF3FA";
} else if (i % 4 == 2) {
d[i].bgColor = "#F0F0FA";
} else if (i % 4 == 3) {
d[i].bgColor = "#F6EFE6";
}
}
return d;
},
// 埋点
appBuryingPointEntrust(val) {
rocNative.appBuryingPointEntrust(val);
}
}
};
</script>
<style>
body {
background: #fff;
}
</style>
<style lang="scss" scoped>
body {
background: #fff;
}
@import "../../style/mixin";
.no-content {
display: flex;
flex-direction: column;
margin: px2rem(40px) 0 px2rem(50px);
align-items: center;
img {
width: px2rem(125px);
height: px2rem(125px);
}
span {
height: px2rem(21px);
line-height: px2rem(21px);
font-size: px2rem(15px);
font-weight: 400;
color: rgba(153, 153, 153, 1);
}
}
.mint-header {
background-color: rgba($color: #000000, $alpha: 0);
}
.font-style {
width: 100%;
overflow: hidden;
@include sc(0.6rem, #666);
}
.teach-opt {
padding: 0 px2rem(15px) px2rem(15px) px2rem(15px);
.teach-title {
font-size: px2rem(18px);
// padding-bottom: px2rem(0px);
color: #333;
}
.teach-list {
margin-top: px2rem(-14px);
overflow: hidden;
}
.opt-span {
span {
color: #449284;
font-size: px2rem(13px);
display: inline-block;
vertical-align: middle;
height: px2rem(10px);
line-height: px2rem(10px);
img {
display: inline-block;
width: px2rem(15px);
height: px2rem(15px);
vertical-align: middle;
}
}
}
.list-item {
width: px2rem(170px);
margin-right: px2rem(5px);
margin-top: px2rem(15px);
border: 1px solid rgba(0, 0, 0, 0.02);
border-radius: 0 0 px2rem(3px) px2rem(3px);
float: left;
box-shadow: 0 px2rem(4px) px2rem(6px) RGBA(0, 0, 0, 0.06);
}
.mr0 {
margin-right: 0;
}
.tea-txt {
padding: px2rem(5px) px2rem(7px);
}
.tea-img {
width: px2rem(170px);
height: px2rem(83px);
position: relative;
border-radius: px2rem(3px) px2rem(3px) 0 0;
img {
width: 100%;
height: 100%;
display: block;
border-radius: px2rem(3px) px2rem(3px) 0 0;
}
.learn-p {
padding-left: px2rem(6px);
position: absolute;
width: 100%;
left: 0;
bottom: 0;
background: #333;
background: linear-gradient(
to right,
RGBA(0, 0, 0, 0.2),
RGBA(0, 0, 0, 0)
);
// background: linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0.34) 100%);
color: #fff;
font-size: px2rem(11px);
height: px2rem(20px);
line-height: px2rem(22px);
&-cnum {
position: absolute;
right: px2rem(8px);
bottom: 0;
color: #fff;
font-size: px2rem(11px);
height: px2rem(20px);
line-height: px2rem(22px);
}
}
}
.tea-name {
padding: 0;
color: #333;
font-size: px2rem(14px);
font-weight: 500;
}
.tea-department {
padding: 0;
color: #333;
font-size: px2rem(12px);
font-weight: 400;
}
.tea-position {
height: px2rem(30px);
font-size: px2rem(12px);
line-height: px2rem(15px);
color: #666;
font-weight: 400;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
}
}
.home-header {
height: px2rem(185px);
@include bis("../../images//headerTop.png");
.logo_img {
height: px2rem(85px);
width: px2rem(345px);
text-align: center;
}
}
.ellipsis-1 {
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
}
.ellipsis-2 {
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
}
</style>
<template>
<section>
<div class="font-style">
<div class="teach-opt">
<div class="teach-list">
<div
:class="index % 2 == 1 ? 'list-item mr0' : 'list-item ml15'"
v-for="(item, index) in cParamData"
:key="index"
@click="gotoDetail(item)"
>
<div class="tea-img" :style="'background:'+ item.bgColor">
<!-- <img :src="item.doctorAvatarImg"> -->
<img :src="item.doctorImg">
<span class="learn-p">{{item.joinNum | yLocalString}}人已学</span>
<span class="learn-p-cnum">课程: 共{{item.resourceNum}}</span>
</div>
<div class="tea-txt">
<div class="tea-name">
<span>{{item.doctorName}}</span>
<span class="tea-department">{{item.department | shortName(8)}}</span>
</div>
<div class="tea-position">{{item.doctorHospital}}</div>
</div>
</div>
<div class="no-content" v-show="!cParamData.length">
<img class="no-content-img" src="../../images//no-content.png" alt=" ">
<span class="no-content-desc">暂无相关内容</span>
</div>
</div>
</div>
</div>
</section>
</template>
<script>
import { getWebPageUrl } from '@/utils'
import { teacher } from "../../utils/buryingPoint";
import { mapGetters } from "vuex";
import YqyLecturerOrder from "@/components/business/yqy-lecturer-order";
export default {
data() {
return {
col: 1, //0综合,1人气,2资源数,3姓名首字母
dir: 2, //1:正序 2:逆序,
list: []
};
},
components: {
YqyLecturerOrder
},
props: {
parmData: {
type: Array,
default: () => []
}
},
mounted() {},
computed: {
cParamData() {
if (this.parmData && this.parmData.length) {
return this.randomBg(this.parmData);
} else {
return this.randomBg(this.list);
}
}
},
methods: {
// 跳转到详情页面
gotoDetail(item) {
// this.$router.push({
// path: "/teachersDetail",
// query: {
// id: item.doctorId
// }
// });
let paramList = [
{
id: 699,
key: "pageUrl",
value: getWebPageUrl('appl/#/teachersDetail') + '?id=' + item.doctorId + '&from=' + 'appHome',
// value: "https://uat-phome.yunqueyi.com/appl/#/teachersDetail",
type: 4,
seqNo: 1
}
];
rocNative.dispatchEventByModuleCode({
modeCode: 'M300',
jsonString: paramList
});
this.appBuryingPointEntrust({
...teacher,
labelId: item.doctorId,
labelValue: item.doctorName
});
},
// 随机生成背景颜色
randomBg(d) {
for (let i = 0; i < d.length; i++) {
if (i % 4 == 0) {
d[i].bgColor = "#EBF6F1";
} else if (i % 4 == 1) {
d[i].bgColor = "#EDF3FA";
} else if (i % 4 == 2) {
d[i].bgColor = "#F0F0FA";
} else if (i % 4 == 3) {
d[i].bgColor = "#F6EFE6";
}
}
return d;
},
// 埋点
appBuryingPointEntrust(val) {
rocNative.appBuryingPointEntrust(val);
}
}
};
</script>
<style>
body {
background: #fff;
}
</style>
<style lang="scss" scoped>
body {
background: #fff;
}
@import "../../style/mixin";
.no-content {
display: flex;
flex-direction: column;
margin: px2rem(40px) 0 px2rem(50px);
align-items: center;
img {
width: px2rem(125px);
height: px2rem(125px);
}
span {
height: px2rem(21px);
line-height: px2rem(21px);
font-size: px2rem(15px);
font-weight: 400;
color: rgba(153, 153, 153, 1);
}
}
.mint-header {
background-color: rgba($color: #000000, $alpha: 0);
}
.font-style {
width: 100%;
overflow: hidden;
@include sc(0.6rem, #666);
}
.teach-opt {
// padding: 0 px2rem(15px) px2rem(15px) px2rem(15px);
.teach-title {
font-size: px2rem(18px);
// padding-bottom: px2rem(0px);
color: #333;
}
.teach-list {
margin-top: px2rem(-14px);
overflow: hidden;
}
.opt-span {
span {
color: #449284;
font-size: px2rem(13px);
display: inline-block;
vertical-align: middle;
height: px2rem(10px);
line-height: px2rem(10px);
img {
display: inline-block;
width: px2rem(15px);
height: px2rem(15px);
vertical-align: middle;
}
}
}
.list-item {
width: px2rem(170px);
margin-right: px2rem(5px);
margin-top: px2rem(15px);
border: 1px solid rgba(0, 0, 0, 0.02);
border-radius: 0 0 px2rem(3px) px2rem(3px);
float: left;
box-shadow: 0 px2rem(4px) px2rem(6px) RGBA(0, 0, 0, 0.06);
}
.ml15 {
margin-left: px2rem(15px);
}
.mr0 {
margin-right: 0;
}
.tea-txt {
padding: px2rem(5px) px2rem(7px);
}
.tea-img {
width: px2rem(170px);
height: px2rem(83px);
position: relative;
border-radius: px2rem(3px) px2rem(3px) 0 0;
img {
width: 100%;
height: 100%;
display: block;
border-radius: px2rem(3px) px2rem(3px) 0 0;
}
.learn-p {
padding-left: px2rem(6px);
position: absolute;
width: 100%;
left: 0;
bottom: 0;
background: #333;
background: linear-gradient(
to right,
RGBA(0, 0, 0, 0.2),
RGBA(0, 0, 0, 0)
);
// background: linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0.34) 100%);
color: #fff;
font-size: px2rem(11px);
height: px2rem(20px);
line-height: px2rem(22px);
&-cnum {
position: absolute;
right: px2rem(8px);
bottom: 0;
color: #fff;
font-size: px2rem(11px);
height: px2rem(20px);
line-height: px2rem(22px);
}
}
}
.tea-name {
padding: 0;
color: #333;
font-size: px2rem(14px);
font-weight: 500;
}
.tea-department {
padding: 0;
color: #333;
font-size: px2rem(12px);
font-weight: 400;
}
.tea-position {
height: px2rem(30px);
font-size: px2rem(12px);
line-height: px2rem(15px);
color: #666;
font-weight: 400;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
}
}
.home-header {
height: px2rem(185px);
@include bis("../../images//headerTop.png");
.logo_img {
height: px2rem(85px);
width: px2rem(345px);
text-align: center;
}
}
.ellipsis-1 {
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
}
.ellipsis-2 {
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
}
</style>
<template>
<div class="wrapper" :class="{active:isScroll}">
<!-- <div class="status-bar"></div> -->
<div class="top-header" :class="{active:isScroll}">
<div class="content left-icon" @click="goBack()">
<img
v-if="!isScroll"
border="0"
src="https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/left-icon-white.png"
alt
>
<img
v-if="isScroll"
border="0"
src="https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/left-icon.png"
alt
>
</div>
<div v-if="isScroll && isJSJ" class="content title" :class="{active:isScroll}">讲师集</div>
<div v-if="isScroll && !isJSJ" class="content title" :class="{active:isScroll}">云鹊医讲师</div>
<!-- <div class="content right-icon" @click="share()">
<img v-if="!isScroll" border="0" src="https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/right-icon-white.png" alt="">
<img v-if="isScroll" border="0" src="https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/right-icon.png" alt="">
</div>-->
</div>
</div>
</template>
<script>
import { teacher_back } from "../../utils/buryingPoint.js";
// import {shareUrl} from '@/utils/index'
import { shareUrl } from "../../utils/index.js";
export default {
name: "MyHeader",
props: {
isOpacity: {
type: Boolean,
default: true
},
isScroll: {
type: Boolean,
default: false
},
isShare: {
type: Boolean,
default: true
},
doctorId: {
type: String,
default: ""
},
backMethod: {
type: String,
default: "native"
},
isJSJ: {
type: Boolean,
default: true
}
},
computed: {
topTitle2() {
return this.topTitle;
}
},
mounted() {},
methods: {
goBack() {
if (this.backMethod === "inner") {
this.$router.go(-1);
} else {
rocNative.goBack();
}
},
share() {
rocNative.shareWechat({
title1: "个人评价",
title2: "个人评价出现了喔",
shareUrl: `${shareUrl}gpr#/home` + "?doctorId=" + this.doctorId,
type: 6,
shareImageUrl:
"https://file.yunqueyi.com/logo.png?version=" + new Date().getTime(),
shareId: 0
});
this.buryingPointShare();
},
//返回
buryingPointBack: function() {
rocNative.appBuryingPointEntrust({
...teacher_back,
functionCode: "f_gpranking",
actionCode: "c_back",
labelValue: "返回",
createdTime: new Date().getTime()
});
},
//分享
buryingPointShare: function() {
rocNative.appBuryingPointEntrust({
...teacher_back,
functionCode: "f_gpranking",
actionCode: "c_share",
labelValue: "分享",
createdTime: new Date().getTime()
});
}
}
};
</script>
<style lang="scss" scoped>
@import "../../style/mixin";
.wrapper {
position: fixed;
top: 0;
width: 100%;
z-index: 100000000;
/**************表头******************/
.top-header {
display: flex;
display: -webkit-flex;
flex-direction: row;
// justify-content:center;//这个会整体居中,但是使用一些左右不等的margin时,会影响效果
align-items: center;
width: 100%;
height: px2rem(45px); //header高度
margin-top: px2rem(
25px
); ///////////statusbar高度!!!!!!!!!!!!!!!!!!!!!默认使用此高度
}
.top-header.active {
// margin-top:0;
border-bottom: px2rem(2px) solid #e7e7e7;
background-color: #fff;
}
.top-header .left-icon {
margin-left: px2rem(15px);
}
.top-header .title {
width: px2rem(116px);
height: px2rem(18px);
line-height: px2rem(18px);
margin-left: px2rem(90px);
text-align: center;
color: #fff;
font-size: px2rem(18px);
}
.top-header .title.active {
color: #000;
}
.top-header .right-icon {
margin-left: px2rem(95px);
}
.top-header .left-icon img,
.top-header .right-icon img {
display: block; //这样其外的div可以正好将其包裹住
width: px2rem(25px);
height: px2rem(25px);
}
}
.wrapper.active {
background-color: #fff;
}
</style>
\ No newline at end of file
<template>
<section class="back-top">
<div class="back-btn" @click="backTop">
<img src="../../images//backTop.png">
</div>
</section>
</template>
<script>
export default {
data() {
return {
objPoint: {}
};
},
props: {
burialPoint: {
default: "",
type: String
}
},
mounted() {
if (this.burialPoint == "activity") {
this.objPoint = {
menuLevel: 2,
menuFromCode: "m_home",
menuCode: "m_content_list",
functionCode: "f_activity",
actionCode: "c_top"
};
}
},
methods: {
backTop: function() {
if (this.burialPoint == "activity") {
this.pageBurialPoin(this.objPoint);
}
var osTop = document.documentElement.scrollTop || document.body.scrollTop;
if (osTop > 0) {
document.documentElement.scrollTop = document.body.scrollTop = 0;
}
}
}
};
</script>
<style lang="scss" scoped>
@import "../../style/mixin";
.back-btn {
position: fixed;
width: px2rem(35px);
height: px2rem(35px);
right: px2rem(15px);
z-index: 100;
bottom: px2rem(80px);
img {
width: 100%;
height: 100%;
display: block;
}
}
</style>
\ No newline at end of file
<template>
<div>
<back-header :isScroll="isScroll" :backMethod="backMethod" :isJSJ="isJSJ"></back-header>
<div class="teach-top">
<!-- <div class="teach-top" :class="{'pt150': isScroll}"> -->
<!-- <div class="back" v-if="isScroll" @click="backPre" style="flex-direction:row;width:100%;">
<img src="../../images//left-icon.png">
<img src="https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/left-icon.png">
<span style="padding-bottom:10px;">dddd</span>
</div>-->
<!-- <TopNav :bgColor="bgColor" :title="navTitle" :isNavFix="isNavFix" :burialPoint="pointStyle"></TopNav> -->
<div class="tc title">{{parmObj}}</div>
<div
class="tc count"
v-if="isShowCount"
>{{studyCount.toLocaleString()}}人学习&nbsp;&nbsp;&nbsp;&nbsp;{{followCount.toLocaleString()}}人关注</div>
</div>
</div>
</template>
<script>
import BackHeader from "../../components/teacher/back-header";
export default {
data() {
return {
bgColor: "#fff",
parmObj: ""
};
},
components: {
BackHeader
},
props: {
isShowCount: {
default: false,
type: Boolean
},
followCount: {
type: Number,
default: 0
},
studyCount: {
type: Number,
default: 0
},
statusBarHeight: {
type: Number,
default: 0
},
isScroll: {
type: Boolean,
default: false
},
backMethod: {
type: String,
default: "native"
},
isJSJ: {
type: Boolean,
default: true
}
},
mounted() {
this.parmObj = this.isShowCount ? "讲师集" : "云鹊医讲师";
},
methods: {
backPre() {
if (this.backMethod === "inner") {
this.$router.go(-1);
} else {
rocNative.goBack();
}
}
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import "../../style/mixin.scss";
@import "../../style/global.scss";
.pt150 {
margin-top: px2rem(150px);
}
.teach-top {
width: 100%;
height: px2rem(185px);
@include bis("../../images//headerTop.png");
.tc {
text-align: center;
}
.back {
position: fixed;
z-index: 110;
left: px2rem(18px);
top: px2rem(25px);
display: inline-block;
width: px2rem(50px);
height: px2rem(50px);
img {
width: px2rem(25px);
height: px2rem(25px);
}
}
.title {
font-size: px2rem(25px);
color: #fff;
padding: px2rem(55px) 0 px2rem(8px) 0;
font-weight: 500;
}
.count {
font-size: px2rem(15px);
line-height: px2rem(21px);
color: #fff;
}
}
</style>
\ No newline at end of file
<template>
<section :class="isNavFix ? 'nav-top fixed' : 'nav-top'">
<div class="nav-part" :style="'background:'+bgColor">
<div class="nav-title">
<span class="nav-back" @click="goBack">
<img src="https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/left-icon.png">
<!-- <img class="nav-back" src="../../images//grey-throw.png"/> -->
</span>
<!-- <span class="back" @click="goBack">
<img src="../../images//left-icon.png">
</span>-->
{{title}}
<!-- <span class="nav-share" @click="goShare">
<img src="../../images//Shape1@2x.png"/>
</span>-->
</div>
</div>
</section>
</template>
<script>
export default {
data() {
return {
// title:'测试',
content: "",
shareImageUrl: ""
};
},
props: {
bgColor: {
//背景色
type: String,
default: ""
},
title: {
//标题
type: String,
default: "暂无数据"
},
isNavFix: {
//是否fix定位
type: Boolean,
default: true
},
burialPoint: {
default: "",
type: String
},
backMethod: {
type: String,
default: "native" // inner native
}
},
mounted() {
if (this.burialPoint == "activity") {
this.objPoint = {
menuLevel: 2,
menuFromCode: "m_home",
menuCode: "m_content_list",
functionCode: "f_activity",
actionCode: "c_last"
};
}
},
methods: {
//返回
goBack() {
if (this.burialPoint == "activity") {
this.pageBurialPoin(this.objPoint);
}
if (this.backMethod === "inner") {
this.$router.back(-1);
} else {
rocNative.goBack();
}
//rocNative.backPreviousPage();
},
//分享
goShare() {
let url = location.hef,
_this = this;
rocNative.shareWechat({
url: url,
title: _this.title,
content: _this.content,
shareImageUrl: _this.shareImageUrl
});
}
}
};
</script>
<style lang="scss" scoped>
@import "../../style/mixin";
.back {
position: absolute;
left: px2rem(18px);
top: px2rem(25px);
display: inline-block;
width: px2rem(50px);
height: px2rem(50px);
img {
width: px2rem(25px);
height: px2rem(25px);
}
}
.nav-top {
height: px2rem(65px);
background: #fff;
color: #333;
position: relative;
z-index: 109;
.nav-back {
display: inline-block;
position: absolute;
left: px2rem(16px);
top: 0;
height: px2rem(25px);
width: px2rem(25px);
// -ms-transform: translate(180deg);
// -webkit-transform: (180deg);
// transform: rotate(180deg);
}
img {
display: block;
width: 100%;
height: 100%;
}
.nav-icon {
display: inline-block;
width: 50px;
height: 50px;
svg {
stroke: #000;
fill: #0000ff;
}
}
.nav-share {
position: absolute;
right: px2rem(8px);
top: 0;
height: px2rem(25px);
width: px2rem(25px);
}
.nav-title {
display: inline-block;
width: 100%;
/* padding:0 px2rem(33px);*/
position: relative;
}
.nav-part {
width: 100%;
font-size: px2rem(18px);
text-align: center;
padding: px2rem(30px) 0 px2rem(10px) 0;
/* height: px2rem(25px);*/
}
}
.fixed {
.nav-part {
position: fixed;
top: 0;
left: 0;
border-bottom: 1px solid #e7e7e7;
/* height: px2rem(25px);*/
}
}
</style>
\ No newline at end of file
import "@babel/polyfill";
// import "@babel/polyfill";
import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './router/router'
import store from './store/'
const mixins = require('@/utils/mixins');
import '@/utils/rem' // 引入自适应
import '@/utils/yqyServerRegister' // 移动端服务
import FastClick from 'fastclick'
import vueFilters from '@/utils/filter'
// 引入Mint
import Mint from 'mint-ui'
import 'mint-ui/lib/style.css'
// 引入ElementUI
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
// 可调试
// Vue.config.devtools = true;
// Vue.use(Logger, { prefix: new Date(), isDev: process.env.NODE_ENV === 'development', cLevel: 'debug' })
Vue.use(Mint)
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload, {
preLoad: 3,
// loading: './images//change.png',
// error: 'https://file.yunqueyi.com/File/course_doctor/2018-11/20/web_454.png',
error: require('./images/error.png'),
attempt: 1
// lazyComponent: true
})
Vue.use(ElementUI)
// 注册所有公用过滤器
for(let key in vueFilters) {
......
import App from '../App'
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')
const index = r => require.ensure([], () => r(require('../views/index')), 'index')
export default [{
path: '/',
component: App, //顶层路由,对应index.html
children: [ //二级路由。对应App.vue
//地址为空时跳转home页面
component: App,
children: [
{
path: '',
redirect: '/index'
},
// 首页城市列表页
{
path: '/index',
component: teachers
component: index
},
{
path: '/home',
component: teachers
},
{
path: '/activity',
component: activity
},
{
path: '/teachers',
component: teachers
},
{
path: '/teachersDetail',
component: teachersDetail
},
component: index
}
]
}]
......@@ -60,6 +60,8 @@ html,body{
height: 100%;
width: 100%;
background-color: #fff;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
}
.clear:after{
......
......@@ -24,62 +24,87 @@
.center{
text-align: center;
}
.line20{
margin-top: px2rem(10px);
.mt10{
margin-top: 10px;
}
.mb42{
margin-bottom: px2rem(21px);
.mt20{
margin-top: 20px;
}
.marginLR40{
margin: 0 px2rem(20px);
.mb10{
margin-bottom: 10px;
}
.fs10{
font-size: px2rem(10px);
.mb20{
margin-bottom: 20px;
}
.fs11{
font-size: px2rem(11px);
.pt10{
padding-top: 10px;
}
.fs13{
font-size: px2rem(13px);
.pt20{
padding-top: 10px;
}
.fs14{
font-size: px2rem(14px);
.pb10{
padding-bottom: 10px;
}
.pb20{
padding-bottom: 20px;
}
.fs22{
font-size: px2rem(11px);
.mLR10{
margin: 0 10px;
}
.fs24{
font-size: px2rem(12px);
.mLR20{
margin: 0 20px;
}
.fs26{
font-size: px2rem(13px);
.mTB10{
margin: 10px 0;
}
.fs28{
font-size: px2rem(14px);
.mTB20{
margin: 20px 0;
}
.fs32{
font-size: px2rem(16px);
.pLR10{
padding: 0 10px;
}
.fs30{
font-size: px2rem(15px);
.pLR20{
padding: 0 20px;
}
.fs50{
font-size: px2rem(25px);
.pTB10{
padding: 10px 0;
}
.pTB20{
padding: 20px 0;
}
.fs10{
font-size: 10px;
}
.fs11{
font-size: 11px;
}
.fs12{
font-size: 12px;
}
.fs13{
font-size: 13px;
}
.fs14{
font-size: 14px;
}
.fs15{
font-size: 15px;
}
.fs16{
font-size: 16px;
}
.fs25{
font-size: 25px;
}
.fw{
font-weight: 600;
}
//背景颜色
.bgWhite{
background-color: #fff;
}
//字体颜色
.gray{
color: RGBA(177, 181, 184, 1);
color: rgba(177, 181, 184, 1);
}
.white{
color: #fff;
}
.fs30{
font-size: px2rem(15px);
}
\ No newline at end of file
......@@ -69,7 +69,7 @@ $fc:#fff;
}
@function px2rem($px){
$rem: 37.5px;
@return ($px / $rem) + rem;
}
\ No newline at end of file
// @function px2rem($px){
// $rem: 37.5px;
// @return ($px / $rem) + rem;
// }
\ No newline at end of file
此差异已折叠。
此差异已折叠。
......@@ -104,13 +104,6 @@ export function arraySort(originData, isUp = true, sortedField, converFun) {
return sortedData
}
export function pageJumpUrl(){
let url = {
pageListUrl : 'https://test1-contents.yunqueyi.com/content_list',
detailUrl : 'https://test1-contents.yunqueyi.com/content_detail'
};
return url;
}
export function sortParmData(originData, orderCol, index) {
return originData.sort((a, b) => {
......
!function (e) {
var i = {}, t = {}, n = 0;
var stateChange;
e.rocNative = {
// 参数说明 e:回传回来的移动端服务名称; t:前端自己传递的回调JS方法
__nativeCall: function (e, t, n) {
// alert(t)
// alert(window[t])
// if( window[t] ){
// window[t](n)
// }
if(t == '__refresh'){
__refresh(n)
}
if(t == '__getUserInfo'){
__getUserInfo(n);
}
if(t == '__getStatusBarHeight'){
__getStatusBarHeight(n);
}
},
__callNative: function (t, a, o) {
"function" == typeof o && (n++ , i[n] = o);
var __funcName = a && a.__funcName ? a.__funcName : '__funcName__' + n
a && a.__funcName && delete a.__funcName
var param = a === undefined ? {} : a;
var r = JSON.stringify({
name: t,
callbackId: __funcName,
param: param
});
if (e.__rocAndroid) {
e.__rocAndroid.postMessage(r);
return true;
}
if (e.webkit && window.webkit.messageHandlers.rociOS) {
window.webkit.messageHandlers.rociOS.postMessage(r)
return true;
}
return false;
}, __onEvent: function (e, i) {
if (e && i && "function" == typeof i) {
(t[e] || (t[e] = [])).push(i)
}
}, __clearEvent: function (e) {
e && delete t[e]
}, __fireEvent: function (e, i) {
var n = t[e];
n && n.forEach(function (e) {
e(i)
})
}, on: function (e, i) {
rocNative.__onEvent(e, i)
}, off: function (e) {
rocNative.__clearEvent(e)
}
}, function () {
Array.prototype.slice.apply(arguments).forEach(function (i) {
e.rocNative[i] = function (t) {
return new Promise(function (n, a) {
e.rocNative.__callNative(i, t, function (e, i) {
null !== e ? a({ error: e, result: i }) : n(i)
}) ? void 0 : n({})
})
}
})
}("dispatchEventByModuleCode", "gotoAuthentication", "shareWechat", "backPreviousPage", "bindingWechat", "getDeviceInfo", "goBack", "appBuryingPointEntrust", "getAuthPermission", "getAppVersionCode", "getToken", "gotoNewActivity", "gotoNewActivityWithParams", "gotoNewWebActivity", "gotoYidianActivity", "readMessage", "openFiveMintusAudio", "getStatusBarSize", "showNativeDialog", "showNativeToast", "gotoViewTop", "appInit", "checkPermissions", "getStatusBarHeight","setTabMiniIcon","getUserInfo","pauseAudioView");
if (e.__rocAndroid) {
e.__isAndroid = true
e.__isIOS = false
e.__isWeb = false
} else if (e.webkit && window.webkit.messageHandlers.rociOS) {
e.__isAndroid = false
e.__isIOS = true
e.__isWeb = false
} else {
e.__isAndroid = false
e.__isIOS = false
e.__isWeb = true
}
if(window.__isIOS){
rocNative.appInit()
}
}(window);
<template>
<section>
<TopNav :bgColor="bgColor" :title="navTitle" :isNavFix="isNavFix" :burialPoint="pointStyle"></TopNav>
<!-- <teacherTop :backMethod="backMethod"></teacherTop> -->
<section class="activity-box">
<div class="activity-count">{{list.length}}个活动</div>
<div class="activity-list">
<div
class="activity-item"
v-for="(item,index) in list"
:key="index"
@click="goToPage(item)"
>
<img v-lazy="item.imageUrl" class="img" :key="item.imageUrl">
<!-- <div class="time">活动时间:9月3日-9月9日</div> -->
</div>
<div class="no-show" v-if="list.length.length == 0">暂无数据</div>
</div>
<BackTop v-if="isShowBackTop" :burialPoint="pointStyle"></BackTop>
</section>
</section>
</template>
<script>
import TopNav from "../../components/teacher/topNav";
import BackTop from "../../components/teacher/backTop";
import { activity_action } from "../../utils/buryingPoint";
import { deepCopy } from "../../utils";
export default {
data() {
return {
backMethod: "native",
tittle: "",
list: [],
bgColor: "#fff",
navTitle: " 专项合作",
isBorder: true,
isNavFix: true,
id: 1,
tabName: "活动",
tabList: [],
isShowBackTop: false,
pointStyle: "activity",
token: null
};
},
components: {
TopNav,
BackTop
},
created() {
let _this = this;
this.id = this.$route.query.categoryId || 1;
this.navTitle = this.id == 1 ? "专项合作" : "活动掠影";
window.__getUserInfo = function(parm) {
_this.token = parm.userToken;
_this.getTabData();
};
window.addEventListener("scroll", this.scrollFun);
if (window.__isWeb) {
this.getTabData();
}
window.__refresh = function() {
_this.getUserInfo();
}
this.getUserInfo();
},
mounted() {},
beforeDestroyed() {
window.removeEventListener("scroll", this.scrollFun);
},
methods: {
//获取版本号
getUserInfo() {
rocNative.getUserInfo({
__funcName: "__getUserInfo"
});
},
scrollFun() {
let scrollTop = document.documentElement.scrollTop;
this.isShowBackTop = scrollTop > 0 ? true : false;
},
goToPage(itemData) {
let paramList = deepCopy(this.setEventByModuleCode(itemData));
let isStrokeUrl =
paramList[0] &&
paramList[0]["value"] &&
paramList[0]["value"].indexOf("stroke.js") !== -1;
let strokeUrl = "";
if (isStrokeUrl) {
strokeUrl = paramList[0]["value"] + "&token=" + this.token;
paramList[0]["value"] = strokeUrl;
}
rocNative.dispatchEventByModuleCode({
modeCode: itemData.appModuleInfo.code,
jsonString: paramList
});
this.appBuryingPointEntrust({
...activity_action,
labelId: itemData.id,
functionCode: this.id == 1 ? "c_project" : "f_activity",
actionCode: this.id == 1 ? "c_project_tab" : "c_activity_tab",
labelValue: itemData.title,
createdTime: new Date().getTime()
});
},
// 埋点
appBuryingPointEntrust(val) {
rocNative.appBuryingPointEntrust(val);
},
//查询tab
getTabData() {
let _this = this,
parm = {
id: _this.id || 1,
setEntry: "headers",
token: _this.token
};
_this.GET("contents/contentList/tabById", parm).then(function(res) {
if (res.code === "000000") {
_this.navTitle = res.data.name || "";
_this.tabName = _this.tabList[0] || "";
// if(_this.tabList.length>0){
// _this.tabName = _this.tabList[0] || '';
// }
_this.getData();
} else {
//alert(res.message)
}
});
},
//查询内容
getData() {
let _this = this,
parm = {
id: _this.id,
tabName: _this.tabName,
setEntry: "headers",
token: _this.token
};
// if(_this.tabName != ''){
// parm.tabName = _this.tabName
// }
_this.GET("contents/contentList/contentById", parm).then(function(res) {
if (res.code === "000000") {
_this.list =
(res.data.contentList && res.data.contentList.contentList) || [];
}
});
}
}
};
</script>
<style lang="scss" scoped>
@import "../../style/mixin";
.activity-box {
padding: px2rem(15px);
background: #fff;
}
.no-show {
font-size: px2rem(15px);
color: #999;
text-align: center;
}
.activity-count {
color: #999;
font-size: px2rem(15px);
padding-bottom: px2rem(15px);
}
.activity-item {
// position: relative;
width: px2rem(345px);
max-height: px2rem(170px);
margin-bottom: px2rem(10px);
// box-shadow: 0 px2rem(2px) px2rem(6px) RGBA(42, 94, 161, 0.15);
display: block;
overflow: hidden;
.img {
width: 100%;
max-height: 100%;
}
.time {
position: absolute;
color: #fff;
height: px2rem(25px);
line-height: px2rem(25px);
background: RGBA(0, 0, 0, 0.1);
border-radius: 0 0 px2rem(5px) px2rem(5px);
width: 100%;
bottom: 0;
left: 0;
z-index: 10;
font-size: px2rem(14px);
padding-left: px2rem(5px);
}
}
</style>
<template>
<el-container style="height: 500px; border: 1px solid #eee">
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
<el-menu :default-openeds="['1', '3']">
<el-submenu index="1">
<template slot="title"><i class="el-icon-message"></i>Navigator One</template>
<el-menu-item-group>
<template slot="title">Group 1</template>
<el-menu-item index="1-1">Option 1</el-menu-item>
<el-menu-item index="1-2">Option 2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="Group 2">
<el-menu-item index="1-3">Option 3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">Option4</template>
<el-menu-item index="1-4-1">Option 4-1</el-menu-item>
</el-submenu>
</el-submenu>
<el-submenu index="2">
<template slot="title"><i class="el-icon-menu"></i>Navigator Two</template>
<el-menu-item-group>
<template slot="title">Group 1</template>
<el-menu-item index="2-1">Option 1</el-menu-item>
<el-menu-item index="2-2">Option 2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="Group 2">
<el-menu-item index="2-3">Option 3</el-menu-item>
</el-menu-item-group>
<el-submenu index="2-4">
<template slot="title">Option 4</template>
<el-menu-item index="2-4-1">Option 4-1</el-menu-item>
</el-submenu>
</el-submenu>
<el-submenu index="3">
<template slot="title"><i class="el-icon-setting"></i>Navigator Three</template>
<el-menu-item-group>
<template slot="title">Group 1</template>
<el-menu-item index="3-1">Option 1</el-menu-item>
<el-menu-item index="3-2">Option 2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="Group 2">
<el-menu-item index="3-3">Option 3</el-menu-item>
</el-menu-item-group>
<el-submenu index="3-4">
<template slot="title">Option 4</template>
<el-menu-item index="3-4-1">Option 4-1</el-menu-item>
</el-submenu>
</el-submenu>
</el-menu>
</el-aside>
<el-container>
<el-header style="text-align: right; font-size: 12px">
<el-dropdown>
<i class="el-icon-setting" style="margin-right: 15px"></i>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>View</el-dropdown-item>
<el-dropdown-item>Add</el-dropdown-item>
<el-dropdown-item>Delete</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<span>Tom</span>
</el-header>
<el-main>
<el-table :data="tableData">
<el-table-column prop="date" label="Date" width="140">
</el-table-column>
<el-table-column prop="name" label="Name" width="120">
</el-table-column>
<el-table-column prop="address" label="Address">
</el-table-column>
</el-table>
</el-main>
</el-container>
</el-container>
</template>
<style>
.el-header {
background-color: #B3C0D1;
color: #333;
line-height: 60px;
}
.el-aside {
color: #333;
}
</style>
<script>
export default {
data() {
const item = {
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
};
return {
tableData: Array(20).fill(item)
}
}
};
</script>
\ No newline at end of file
此差异已折叠。
<template>
<section class="font-style">
<teacherTop :topTitle="topTitle" :isScroll="isScroll" :isShowCount="isShowCount" :studyCount="studyCount" :followCount="followCount"></teacherTop>
<div class="teach-opt">
<div class="teach-title">讲师名录</div>
<div class="opt-span">
<span class="" @click="sortFun">人气
<img src="../../images/sort-u.png" v-if="dir == 1">
<img src="../../images/sort-d.png" v-if="dir == 2">
</span>
</div>
<div class="teach-list">
<div :class="index%2==1?'list-item mr0':'list-item'" v-for="(item, index) in list"
@click="goToDetail(item)" :key="index">
<div class="tea-img" :style="'background:'+ item.bgColor">
<img :src="item.doctorImg">
<span class="learn-p">{{item.joinNum | yLocalString}}人已学</span>
</div>
<div class="tea-txt">
<div class="tea-name">{{item.doctorName}}</div>
<div class="tea-position">
{{item.doctorHospital}}
</div>
</div>
</div>
</div>
</div>
</section>
</template>
<script>
import teacherTop from '../../components/teachers/teach-top-new';
import {teacher_back,fast_sicon,hot_teacher,screen,teacher,teacherother} from '../../utils/buryingPoint';
export default {
components:{
teacherTop
},
data(){
return {
topTitle: '讲师集',
isScroll:false,
token: '',
list:[],
isShowCount:true,
followCount:0,
studyCount:0,
col:1, //0综合,1人气,2资源数,3姓名首字母
dir:2,//1:正序 2:逆序
}
},
mounted(){
let _this = this
this.token = this.$route.query.userToken || this.$route.query.token
// this.getUserInfo()
this.getData();
// window.__getUserInfo = function(parm){
// // alert('in __getUserInfo')
// _this.token = parm.userToken || _this.$route.query.token;
// this.getData();
// }
window.__refresh = function(parm){
_this.getData();
}
window.addEventListener('scroll',this.handleScroll)
},
computed:{
},
methods:{
handleScroll:function(){
var scrollTop=window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
if(scrollTop > 25){
this.isScroll = true;
}else{
this.isScroll = false;
}
},
//获取版本号
getUserInfo(){
rocNative.getUserInfo({
__funcName: '__getUserInfo'
})
},
goToDetail(item){
let _this = this;
this.$router.push({
path: '/teachersDetail',
query:{
id: item.doctorId,
token: _this.token
}
})
this.appBuryingPointEntrust({
...teacher,
labelId: item.doctorId,
labelValue: item.doctorName
})
},
// 埋点
appBuryingPointEntrust(val) {
rocNative.appBuryingPointEntrust(val)
},
//排序
sortFun(){
this.dir = this.dir == 1 ? 2 : 1;
this.appBuryingPointEntrust({
...teacher,
labelId: this.dir,
labelValue: this.dir === 1 ? '升序' : '降序'
})
this.getData()
},
randomBg(d){
for(let i=0;i<d.length;i++){
if(i%4 == 0){
d[i].bgColor = '#EBF6F1'
}else if(i%4 == 1){
d[i].bgColor = '#EDF3FA'
}else if(i%4 == 2){
d[i].bgColor = '#F0F0FA'
}else if(i%4 == 3){
d[i].bgColor = '#F6EFE6'
}
}
/// console.log(d);
},
getData(){
let _this = this,
para = {
token: _this.token,
setEntry: 'headers'
}
let url = '/contents/courseDoctor/getAllTeacher/orderby/'+_this.col+'/dir/'+_this.dir
this.GET(url, para).then(res => {
if(res.code == '000000'){
_this.list = res.data.teacherList || [];
_this.list = _this.list.slice()
_this.followCount = res.data.followCount || 0;
_this.studyCount = res.data.studyCount || 0;
if(_this.list.length>0){
_this.randomBg(_this.list);
}
}
})
}
}
}
</script>
<style>
body{background: #fff}
</style>
<style lang="scss" scoped>
body{background: #fff}
@import '../../style/mixin';
.mint-header {
background-color: rgba($color: #000000, $alpha: 0)
}
.font-style {
width: 100%;
overflow: hidden;
@include sc(0.6rem, #666);
}
.teach-opt{
padding:px2rem(26px) px2rem(15px) px2rem(15px) px2rem(15px);
.teach-title{
font-size: px2rem(18px);
// padding-bottom: px2rem(0px);
color:#333;
}
.teach-list{
overflow: hidden;
}
.opt-span{
span{
color:#449284;
font-size: px2rem(13px);
display: inline-block;
vertical-align: middle;
height: px2rem(10px);
line-height: px2rem(10px);
img{
display: inline-block;
width: px2rem(15px);
height: px2rem(15px);
vertical-align: middle;
}
}
}
.list-item{
width: px2rem(170px);
margin-right: px2rem(5px);
margin-top: px2rem(15px);
border-radius: 0 0 px2rem(3px) px2rem(3px) ;
float: left;
box-shadow: 0 px2rem(4px) px2rem(6px) RGBA(0, 0, 0, 0.06);
}
.mr0{
margin-right: 0
}
.tea-txt{
padding:px2rem(5px) px2rem(7px) ;
}
.tea-img{
width: px2rem(170px);
height: px2rem(83px);
position: relative;
border-radius: px2rem(3px) px2rem(3px) 0 0 ;
img{
width: 100%;
height: 100%;
display: block;
border-radius: px2rem(3px) px2rem(3px) 0 0 ;
}
.learn-p{
padding-left: px2rem(5px);
position: absolute;
width: 100%;
left:0;
bottom: 0;
background: #333;
background: -webkit-linear-gradient(left, RGBA(0, 0, 0, 0.2),RGBA(0, 0, 0, 0));
background: -o-linear-gradient(right, RGBA(0, 0, 0, 0.2),RGBA(0, 0, 0, 0));
background: -moz-linear-gradient(right, RGBA(0, 0, 0, 0.2),RGBA(0, 0, 0, 0));
background: linear-gradient(to right, RGBA(0, 0, 0, 0.2),RGBA(0, 0, 0, 0));
color:#fff;
font-size: px2rem(11px);
height: px2rem(20px);
line-height: px2rem(20px);
}
}
.tea-name{
padding: 0;
color:#333;
font-size: px2rem(14px);
font-weight: 500;
}
.tea-position{
height: px2rem(30px);
font-size: px2rem(12px);
line-height: px2rem(15px);
color: #666;
font-weight: 400;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
}
}
.home-header {
height: px2rem(185px);
@include bis('../../images/headerTop.png');
.logo_img{
height: px2rem(85px);
width: px2rem(345px);
text-align: center;
}
}
</style>
\ No newline at end of file
此差异已折叠。
此差异已折叠。
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册