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

代码整理

上级 d2270388
无法预览此类型文件
<template> <template>
<section class="back-top"> <section class="back-top">
<div class="back-btn" @click="backTop"> <div class="back-btn" @click="backTop">
<img src="../../images/backTop.png"/> <img src="../../images//backTop.png">
</div> </div>
</section> </section>
</template> </template>
<script> <script>
export default { export default {
data(){ data() {
return{ return {
objPoint:{} objPoint: {}
} };
}, },
props:{ props: {
burialPoint:{ burialPoint: {
default:'', default: "",
type:String 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;
}
}
},
} }
},
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> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import '../../style/mixin'; @import "../../style/mixin";
.back-btn{ .back-btn {
position: fixed; position: fixed;
width: px2rem(35px); width: px2rem(35px);
height: px2rem(35px); height: px2rem(35px);
right: px2rem(15px); right: px2rem(15px);
z-index: 100; z-index: 100;
bottom: px2rem(80px);; bottom: px2rem(80px);
img{ img {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: block; display: block;
} }
} }
</style> </style>
...@@ -3,11 +3,16 @@ ...@@ -3,11 +3,16 @@
<div class="search-menu"> <div class="search-menu">
<div class="bgFill" :style="{height:ptop}"></div> <div class="bgFill" :style="{height:ptop}"></div>
<div class="fixBox"> <div class="fixBox">
<img @click="goBackHome" class="left-arror" :style="{top: bPtop}" src="../../images/lecturer/left-arror.png" alt=""> <img
@click="goBackHome"
class="left-arror"
:style="{top: bPtop}"
src="../../images//left-arror.png"
alt
>
<div :class="isTransparent?'search-transparent':'bgWhite'" class="search" @click="goSearch"> <div :class="isTransparent?'search-transparent':'bgWhite'" class="search" @click="goSearch">
<!-- <img class="search-img-left" src="../../images/search-white.png"> -->
<span class="input">{{placeholder}}</span> <span class="input">{{placeholder}}</span>
<img class="search-img" src="../../images/search-white.png"> <img class="search-img" src="../../images//search-white.png">
</div> </div>
</div> </div>
</div> </div>
...@@ -42,27 +47,31 @@ export default { ...@@ -42,27 +47,31 @@ export default {
let _this = this; let _this = this;
window.__getStatusBarHeight = function(parm) { window.__getStatusBarHeight = function(parm) {
if (window.__isAndroid) { if (window.__isAndroid) {
_this.popHeight = parseInt(parm.statusBarHeight) / 2.5; _this.popHeight = parseInt(parm.statusBarHeight) / 2.5
} else { } else {
_this.popHeight = parm.statusBarHeight; _this.popHeight = parm.statusBarHeight;
} }
_this.ptop = _this.popHeight + "px"; _this.ptop = _this.popHeight + "px"
_this.bPtop = _this.popHeight + 2 + "px" _this.bPtop = _this.popHeight + 2 + "px"
_this.menuptop = _this.popHeight + "px"; _this.menuptop = _this.popHeight + "px"
}; };
this.getStatusHight(); this.getStatusHight()
}, },
mounted() {}, mounted() {},
methods: { methods: {
// 获取状态栏高度
getStatusHight() { getStatusHight() {
rocNative.getStatusBarHeight({ rocNative.getStatusBarHeight({
__funcName: "__getStatusBarHeight" __funcName: "__getStatusBarHeight"
}); })
}, },
// 跳转到搜索项目
goSearch() { goSearch() {
let _this = this, let _this = this,
url = getWebPageUrl('sousuo/#/index'); url = getWebPageUrl("sousuo/#/index");
let itemData = { let itemData = {
title: "", title: "",
imageUrl: "", imageUrl: "",
...@@ -92,7 +101,7 @@ export default { ...@@ -92,7 +101,7 @@ export default {
} }
] ]
} }
}; }
rocNative.dispatchEventByModuleCode({ rocNative.dispatchEventByModuleCode({
modeCode: itemData.appModuleInfo.code, modeCode: itemData.appModuleInfo.code,
......
<template> <template>
<div class="hot-lect"> <div class="hot-lect">
<span class="hot-lect-wrapper-title">热门讲师</span> <span class="hot-lect-wrapper-title">热门讲师</span>
<div class="hot-lect-wrapper"> <div class="hot-lect-wrapper">
<div class="hot-lect-wrapper-list" > <div class="hot-lect-wrapper-list">
<div class="hot-lect-wrapper-list-item" <div
v-for="(item,index) in parmData" :key="index" class="hot-lect-wrapper-list-item"
@click="gotoDetail(item)"> v-for="(item,index) in parmData"
<div class="lect-img"> :key="index"
<img v-lazy="item.doctorAvatarImg" :key="item.doctorAvatarImg"/> @click="gotoDetail(item)"
<span class="disp-blc"> >
<span :class="{'andriod-name': isAndroid}">{{item.doctorName}}</span> <div class="lect-img">
</span> <img v-lazy="item.doctorAvatarImg" :key="item.doctorAvatarImg">
</div> <span class="disp-blc">
<span class="disp-blc lect-ks">{{item.department}}</span> <span :class="{'andriod-name': isAndroid}">{{item.doctorName}}</span>
<span class="disp-blc study-num">{{item.joinNum | yLocalString}}人已学</span> </span>
</div> </div>
</div> <span class="disp-blc lect-ks">{{item.department}}</span>
<span class="disp-blc study-num">{{item.joinNum | yLocalString}}人已学</span>
</div> </div>
</div>
</div> </div>
</div>
</template> </template>
<script> <script>
import { teacher } from '../../utils/buryingPoint'; import { teacher } from "../../utils/buryingPoint";
export default { export default {
data() { data() {
return { return {
title:'热门讲师', title: "热门讲师",
list: [], list: [],
pageNo: 1, pageNo: 1,
pageSize: 10, pageSize: 10,
parmData: [], parmData: [],
isAndroid: false isAndroid: false
};
},
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
} }
});
this.appBuryingPointEntrust({
...teacher,
labelId: item.doctorId,
labelValue: item.doctorName
});
}, },
beforeMount(){ //热门讲师
}, getData() {
mounted(){ let _this = this,
this.isAndroid = window.__isAndroid para = {
this.getData(); pageNo: 1,
}, pageSize: 6,
props:{ setEntry: "headers"
userToken:{ };
type:String, this.GET("contents/courseDoctor/v1/getHotTeacher", para).then(res => {
default:'' if (res.code == "000000") {
_this.parmData = (res.data && res.data.list) || [];
} }
});
}, },
methods: { // 埋点
// 跳转到详情页面 appBuryingPointEntrust(val) {
gotoDetail(item){ rocNative.appBuryingPointEntrust(val);
this.$router.push({
path: '/teachersDetail',
query: {
id: item.doctorId
}
})
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> </script>
<!-- Add "scoped" attribute to limit CSS to this component only --> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped> <style lang="scss" scoped>
@import '../../style/mixin.scss'; @import "../../style/mixin.scss";
@import '../../style/global.scss'; @import "../../style/global.scss";
.hot-lect { .hot-lect {
&-wrapper { &-wrapper {
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
height: px2rem(115px); height: px2rem(115px);
// margin: 0 px2rem(15px); overflow-x: scroll;
overflow-x: scroll; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color:rgba(0,0,0,0); outline: 0;
outline: 0; -webkit-overflow-scrolling: touch;
-webkit-overflow-scrolling : touch; &-list {
&-list { display: flex;
display: flex; flex-direction: columns;
flex-direction: columns; margin-left: px2rem(12px);
margin-left: px2rem(12px); width: px2rem(666px);
width: px2rem(666px); height: px2rem(133px);
height: px2rem(133px); &-item {
// margin: 0 px2rem(15px); display: inline-block;
// padding: px2rem(4px) px2rem(4px); width: px2rem(105px);
&-item { height: px2rem(107px);
display: inline-block; margin: px2rem(3px);
width: px2rem(105px); text-align: center;
height: px2rem(107px); background: rgba(255, 255, 255, 1);
margin: px2rem(3px); box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.07);
text-align: center; border-radius: px2rem(3px);
background:rgba(255,255,255,1); span {
box-shadow: 0px 1px 6px 0px rgba(0,0,0,0.07); width: 100%;
border-radius: px2rem(3px); font-size: px2rem(12px);
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(5px);
border-radius: 50%;
}
span {
display: inline-block;
position: absolute;
left: px2rem(14px);
top: px2rem(25px);
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%;
padding: px2rem(15px);
font-size: px2rem(18px);
font-weight: 500;
color: #333;
} }
.disp-blc.lect-ks { }
position: relative; .lect-img {
left: 0; position: relative;
top: px2rem(-8px); top: 0;
font-size: px2rem(12px); left: 0;
color: #666; img {
width: px2rem(60px);
height: px2rem(60px);
margin-top: px2rem(5px);
border-radius: 50%;
} }
.disp-blc.study-num { span {
position: relative; display: inline-block;
left: 0; position: absolute;
top: px2rem(-10px); left: px2rem(14px);
font-size: px2rem(11px); top: px2rem(25px);
color: #999; font-size: px2rem(12px);
} span {
.andriod-name { width: px2rem(50px);
padding-top: px2rem(2px); 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%;
padding: px2rem(15px);
font-size: px2rem(18px);
font-weight: 500;
color: #333;
}
.disp-blc.lect-ks {
position: relative;
left: 0;
top: px2rem(-8px);
font-size: px2rem(12px);
color: #666;
}
.disp-blc.study-num {
position: relative;
left: 0;
top: px2rem(-10px);
font-size: px2rem(11px);
color: #999;
}
.andriod-name {
padding-top: px2rem(2px);
}
</style> </style>
<template> <template>
<section> <section>
<!-- <article class="group-title-title">
<span class="group-title-title-main">{{groupTitle}}</span><span class="group-title-title-sub">专业领域的资深专家</span>
</article> -->
<article class="group-title"> <article class="group-title">
<article v-show="showOrder" class="group-title-order"> <article v-show="showOrder" class="group-title-order">
<div @click="order(1, 'isLetterOrderDown', 'doctorFirstNameChar')" <div @click="order(1, 'isLetterOrderDown', 'doctorFirstNameChar')"
:class="{'active': showOrderIndex === 1}" class="group-title-order-item"> :class="{'active': showOrderIndex === 1}" class="group-title-order-item">
<span>首字母</span> <span>首字母</span>
<img class="first-name default" src="../../images/lecturer/sort-default.png" v-show="showOrderIndex !== 1"/> <img class="first-name default" :src="sortDefaultImg" v-show="showOrderIndex !== 1"/>
<img class="first-name" src="../../images/lecturer/sort-down.png" v-show="isLetterOrderDown && showOrderIndex === 1"/> <img class="first-name" :src="sortDownImg" v-show="isLetterOrderDown && showOrderIndex === 1"/>
<img class="first-name" src="../../images/lecturer/sort-up.png" v-show="!isLetterOrderDown && showOrderIndex === 1"/> <img class="first-name" :src="sortUpImg" v-show="!isLetterOrderDown && showOrderIndex === 1"/>
</div> </div>
<div @click="order(2, 'isNewCourseOrderDown', 'newTime')" <div @click="order(2, 'isNewCourseOrderDown', 'newTime')"
:class="{'active': showOrderIndex === 2}" class="group-title-order-item"> :class="{'active': showOrderIndex === 2}" class="group-title-order-item">
<span class="new-course">时间</span> <span class="new-course">时间</span>
<img class="new-course-default" src="../../images/lecturer/sort-default.png" v-show="showOrderIndex !== 2"/> <img class="new-course-default" :src="sortDefaultImg" v-show="showOrderIndex !== 2"/>
<img class="new-course-img" src="../../images/lecturer/sort-down.png" v-show="isNewCourseOrderDown && showOrderIndex === 2"/> <img class="new-course-img" :src="sortDownImg" v-show="isNewCourseOrderDown && showOrderIndex === 2"/>
<img class="new-course-img" src="../../images/lecturer/sort-up.png" v-show="!isNewCourseOrderDown && showOrderIndex === 2"/> <img class="new-course-img" :src="sortUpImg" v-show="!isNewCourseOrderDown && showOrderIndex === 2"/>
</div> </div>
<div @click="order(3, 'isResourceNumOrderDown', 'resourceNum')" <div @click="order(3, 'isResourceNumOrderDown', 'resourceNum')"
:class="{'active': showOrderIndex === 3}" class="group-title-order-item"> :class="{'active': showOrderIndex === 3}" class="group-title-order-item">
<span>课程数</span> <span>课程数</span>
<img class="course-num default" src="../../images/lecturer/sort-default.png" v-show="showOrderIndex !== 3"/> <img class="course-num default" :src="sortDefaultImg" v-show="showOrderIndex !== 3"/>
<img class="course-num" src="../../images/lecturer/sort-down.png" v-show="isResourceNumOrderDown && showOrderIndex === 3"/> <img class="course-num" :src="sortDownImg" v-show="isResourceNumOrderDown && showOrderIndex === 3"/>
<img class="course-num" src="../../images/lecturer/sort-up.png" v-show="!isResourceNumOrderDown && showOrderIndex === 3"/> <img class="course-num" :src="sortUpImg" v-show="!isResourceNumOrderDown && showOrderIndex === 3"/>
</div> </div>
<div @click="order(4, 'isHotOrderDown', 'totalNum')" <div @click="order(4, 'isHotOrderDown', 'totalNum')"
:class="{'active': showOrderIndex === 4}" class="group-title-order-item"> :class="{'active': showOrderIndex === 4}" class="group-title-order-item">
<span class="hot-degree-title">人气</span> <span class="hot-degree-title">人气</span>
<img class="hot-degree default" src="../../images/lecturer/sort-default.png" v-show="showOrderIndex !== 4"/> <img class="hot-degree default" :src="sortDefaultImg" v-show="showOrderIndex !== 4"/>
<img class="hot-degree" src="../../images/lecturer/sort-down.png" v-show="isHotOrderDown && showOrderIndex === 4"/> <img class="hot-degree" :src="sortDownImg" v-show="isHotOrderDown && showOrderIndex === 4"/>
<img class="hot-degree" src="../../images/lecturer/sort-up.png" v-show="!isHotOrderDown && showOrderIndex === 4"/> <img class="hot-degree" :src="sortUpImg" v-show="!isHotOrderDown && showOrderIndex === 4"/>
</div> </div>
</article> </article>
</article> </article>
...@@ -48,6 +45,9 @@ export default { ...@@ -48,6 +45,9 @@ export default {
isNewCourseOrderDown: true, isNewCourseOrderDown: true,
isResourceNumOrderDown: true, isResourceNumOrderDown: true,
isHotOrderDown: true, isHotOrderDown: true,
sortDefaultImg: require('../../images//sort-default.png'),
sortDownImg: require('../../images//sort-down.png'),
sortUpImg: require('../../images//sort-up.png')
} }
}, },
props: { props: {
...@@ -109,10 +109,6 @@ export default { ...@@ -109,10 +109,6 @@ export default {
border: 1px solid #F6F6F6; border: 1px solid #F6F6F6;
border-radius: px2rem(25px); border-radius: px2rem(25px);
background: #F6F6F6; background: #F6F6F6;
// border: 1px solid #449284;
// span {
// // margin-right: px2rem(30px);
// }
img { img {
position: absolute; position: absolute;
top: px2rem(4px); top: px2rem(4px);
...@@ -127,7 +123,7 @@ export default { ...@@ -127,7 +123,7 @@ export default {
} }
.first-name.default { .first-name.default {
top: px2rem(6px); top: px2rem(6px);
left: px2rem(52px); left: px2rem(53px);
height: px2rem(10px); height: px2rem(10px);
width: px2rem(10px); width: px2rem(10px);
} }
......
<template> <template>
<mt-popup <mt-popup v-model="isShowSelection" position="top">
v-model="isShowSelection"
position="top"
>
<!-- <section v-show="isShowSelection" style="position:fixed;top:0;z-index:201;background:#fff;height:100%;overflow-x:auto;"> --> <!-- <section v-show="isShowSelection" style="position:fixed;top:0;z-index:201;background:#fff;height:100%;overflow-x:auto;"> -->
<article class="lect-selection"> <article class="lect-selection">
<section class="lect-selection-title"> <section class="lect-selection-title">
<img @click="closeSelectedPage" src="../../images/lecturer/select-delete.png"/> <img @click="closeSelectedPage" src="../../images//select-delete.png">
<span>{{selectedTitle}}</span> <span>{{selectedTitle}}</span>
<span class="no-content"></span> <span class="no-content"></span>
</section> </section>
</article> </article>
<article class="group-title"> <article class="group-title">
<section class="group-title-order"> <section class="group-title-order">
<div @click="selectedType(1)" class="group-title-order-item"> <div @click="selectedType(1)" class="group-title-order-item">
<span :class="{'active': selectedTypeIndex === 1}">{{selectedTitleTitle}}</span> <span :class="{'active': selectedTypeIndex === 1}">{{selectedTitleTitle}}</span>
<img v-show="selectedTypeIndex === 1" src="../../images/lecturer/select-up.png"/> <img v-show="selectedTypeIndex === 1" src="../../images//select-up.png">
<img v-show="selectedTypeIndex !== 1" src="../../images/lecturer/select-down.png"/> <img v-show="selectedTypeIndex !== 1" src="../../images//select-down.png">
</div> </div>
<div @click="selectedType(2)" class="group-title-order-item"> <div @click="selectedType(2)" class="group-title-order-item">
<span :class="{'active': selectedTypeIndex === 2}">{{selectedLevelName}}</span> <span :class="{'active': selectedTypeIndex === 2}">{{selectedLevelName}}</span>
<img v-show="selectedTypeIndex === 2" src="../../images/lecturer/select-up.png"/> <img v-show="selectedTypeIndex === 2" src="../../images//select-up.png">
<img v-show="selectedTypeIndex !== 2" src="../../images/lecturer/select-down.png"/> <img v-show="selectedTypeIndex !== 2" src="../../images//select-down.png">
</div> </div>
<div @click="selectedType(3)" class="group-title-order-item"> <div @click="selectedType(3)" class="group-title-order-item">
<span :class="{'active': selectedTypeIndex === 3}">{{selectedDepartName}}</span> <span :class="{'active': selectedTypeIndex === 3}">{{selectedDepartName}}</span>
<img v-show="selectedTypeIndex === 3" src="../../images/lecturer/select-up.png"/> <img v-show="selectedTypeIndex === 3" src="../../images//select-up.png">
<img v-show="selectedTypeIndex !== 3" src="../../images/lecturer/select-down.png"/> <img v-show="selectedTypeIndex !== 3" src="../../images//select-down.png">
</div> </div>
</section> </section>
</article> </article>
<section ref="tableWrapperRef" class="lect-selection-content"> <section ref="tableWrapperRef" class="lect-selection-content">
<article class="lect-selection-content-region" v-show="selectedTypeIndex === 1"> <article class="lect-selection-content-region" v-show="selectedTypeIndex === 1">
<table class="lect-selection-content-rp-tb"> <table class="lect-selection-content-rp-tb">
<tr> <tr>
<td style="width: 40%" > <td style="width: 40%">
<table class="lect-selection-content-rp-tb-left"> <table class="lect-selection-content-rp-tb-left">
<tr v-for="(item, index) in allAreaList" :class="{'bg-white': selectedAreaIndex === index}" @click="selectAreaAction(item, index)" :key="index"> <tr
<td >{{item.name}}</td> v-for="(item, index) in allAreaList"
</tr> :class="{'bg-white': selectedAreaIndex === index}"
</table> @click="selectAreaAction(item, index)"
</td> :key="index"
<td style="width: 4%"></td> >
<td class="lect-selection-content-rp-tb-tb" style="width: 55%" > <td>{{item.name}}</td>
<table > </tr>
<tr v-for="(item, index) in allAreaSubList" </table>
@click="selectAreaSubAction(item, index)" :key="index" </td>
> <td style="width: 4%"></td>
<td >{{item.name}}</td> <td class="lect-selection-content-rp-tb-tb" style="width: 55%">
<td style="text-align: right;"><img v-show="item.name && selectedAreaSubIndex === index" src="../../images/lecturer/select-selected.png"/></td> <table>
</tr> <tr
</table> v-for="(item, index) in allAreaSubList"
</td> @click="selectAreaSubAction(item, index)"
</tr> :key="index"
</table> >
</article> <td>{{item.name}}</td>
<article class="lect-selection-content-level" v-show="selectedTypeIndex === 2"> <td style="text-align: right;">
<table class="lect-selection-content-rp-tb"> <img
<tr> v-show="item.name && selectedAreaSubIndex === index"
<td class="lect-selection-content-rp-tb-tb-2" > src="../../images//select-selected.png"
<table> >
<tr @click="selectLevelAction(item, index)" v-for="(item, index) in allLevelList" :key="index"> </td>
<td >{{item.value}}</td> </tr>
<td style="text-align: right;"><img v-show="selectedLevelIndex === index" src="../../images/lecturer/select-selected.png"/></td> </table>
</tr> </td>
</table> </tr>
</td> </table>
</tr> </article>
</table> <article class="lect-selection-content-level" v-show="selectedTypeIndex === 2">
</article> <table class="lect-selection-content-rp-tb">
<article class="lect-selection-content-region" v-show="selectedTypeIndex === 3"> <tr>
<table class="lect-selection-content-rp-tb"> <td class="lect-selection-content-rp-tb-tb-2">
<tr> <table>
<td class="lect-selection-content-rp-tb-tb-2"> <tr
<table> @click="selectLevelAction(item, index)"
<tr @click="selectDepartAction(item, index)" v-for="(item, index) in allDepartList" :key="index"> v-for="(item, index) in allLevelList"
<td >{{item.name}}</td> :key="index"
<td style="text-align: right;"><img v-show="selectedDepartIndex === index" src="../../images/lecturer/select-selected.png"/></td> >
</tr> <td>{{item.value}}</td>
</table> <td style="text-align: right;">
</td> <img
</tr> v-show="selectedLevelIndex === index"
</table> src="../../images//select-selected.png"
</article> >
</section> </td>
</tr>
</table>
</td>
</tr>
</table>
</article>
<article class="lect-selection-content-region" v-show="selectedTypeIndex === 3">
<table class="lect-selection-content-rp-tb">
<tr>
<td class="lect-selection-content-rp-tb-tb-2">
<table>
<tr
@click="selectDepartAction(item, index)"
v-for="(item, index) in allDepartList"
:key="index"
>
<td>{{item.name}}</td>
<td style="text-align: right;">
<img
v-show="selectedDepartIndex === index"
src="../../images//select-selected.png"
>
</td>
</tr>
</table>
</td>
</tr>
</table>
</article>
</section>
<!-- </section> --> <!-- </section> -->
</mt-popup> </mt-popup>
</template> </template>
<script> <script>
// import {mapState, mapMutations, mapActions} from 'vuex'
// import BackTop from '@/homecom/components/common/backTop';
export default { export default {
data(){ data() {
return { return {
isShowSelection: false, isShowSelection: false,
parmDataDoctList: [], parmDataDoctList: [],
selectedTypeIndex: 1, selectedTypeIndex: 1,
allAreaList: [], allAreaList: [],
allAreaSubList: [], allAreaSubList: [],
allAreaListHandles: [], allAreaListHandles: [],
allLevelList: [], allLevelList: [],
allDepartList: [], allDepartList: [],
selectedAreaIndex: 0, selectedAreaIndex: 0,
selectedAreaSubIndex: 0, selectedAreaSubIndex: 0,
selectedLevelIndex: 0, selectedLevelIndex: 0,
selectedDepartIndex: 0, selectedDepartIndex: 0,
selectedTitleTitle: '全国', selectedTitleTitle: "全国",
selectedAreaName: '全国', selectedAreaName: "全国",
selectedAreaSubName: '', selectedAreaSubName: "",
selectedLevelName: '全部等级', selectedLevelName: "全部等级",
selectedDepartName: '全部科室', selectedDepartName: "全部科室",
provinceId: 0, provinceId: 0,
cProvinceId: 0, // 记录当前左边选择的省或者市 cProvinceId: 0, // 记录当前左边选择的省或者市
cityId: 0, cityId: 0,
countyId: 0, countyId: 0,
levelGrade : 0, levelGrade: 0,
departmentId: 0, departmentId: 0,
oldProvinceId: 0, oldProvinceId: 0,
oldCityId: 0, oldCityId: 0,
oldCountyId: 0, oldCountyId: 0,
oldSelectedAreaSubIndex: 0, oldSelectedAreaSubIndex: 0,
oldCProvinceId: -1, // 记录之前左边选择的省或者市 oldCProvinceId: -1 // 记录之前左边选择的省或者市
} };
}, },
props: { props: {},
// selectedTypeIndex: { computed: {
// type: Number, // isShowSelection() {
// default: 1 // return this.isShowSelection;
// }
},
computed: {
// isShowSelection() {
// return this.isShowSelection;
// },
selectedTitle() {
return this.selectedTypeIndex === 1 ? '选择地区' : this.selectedTypeIndex === 2 ? '选择等级' : '选择科室'
}
},
components:{
},
// computed: {
// selectedTitle() {
// return this.selectedTypeIndex === 1 ? '选择地区' : this.selectedTypeIndex === 2 ? '选择等级' : '选择科室'
// }
// }, // },
beforeCreate() { selectedTitle() {
}, return this.selectedTypeIndex === 1
created () { ? "选择地区"
this.initAll() : this.selectedTypeIndex === 2
}, ? "选择等级"
: "选择科室";
}
},
components: {},
beforeCreate() {},
created() {
this.initAll();
},
beforeMount() { beforeMount() {},
mounted() {},
},
mounted(){
},
beforeDestroyed(){ beforeDestroyed() {},
watch: {},
methods: {
show() {
this.isShowSelection = true;
}, },
watch:{ selectedTypeFromTitle(index) {
this.selectedTypeIndex = index;
this.isShowSelection = true;
},
closeSelectedPage() {
this.isShowSelection = false;
},
selectedType(index) {
this.selectedTypeIndex = index;
// this.$emit('selectedType', index)
}, },
methods:{ initAll() {
// ...mapActions({ // this.getSwiper()
// 'setAdjustList': 'setAdjustList' // this.getYqDoctorDataByCD()
// }), this.getAreas();
show() { this.getLevels();
this.isShowSelection = true this.getDeparts();
}, },
selectedTypeFromTitle(index) {
this.selectedTypeIndex = index
this.isShowSelection = true
},
closeSelectedPage() {
this.isShowSelection = false
},
selectedType(index) {
this.selectedTypeIndex = index
// this.$emit('selectedType', index)
},
initAll(){
// this.getSwiper()
// this.getYqDoctorDataByCD()
this.getAreas()
this.getLevels()
this.getDeparts()
},
//根据条件获取讲师列表
getYqDoctorDataByCD(){
let _this = this,
para = {
provinceId: this.provinceId,
cityId: this.cityId,
countyId: this.countyId,
levelGrade: this.levelGrade,
departmentId: this.departmentId,
setEntry: 'headers'
}
this.GET('contents/courseDoctor/v1/getAllTeacher', para).then(res => {
if(res.code == '000000'){
// _this.parmDataDoctList = res.data && res.data.list || []
let selTitle = this.selectedAreaSubName || this.selectedAreaName
if (selTitle === '全部'){
selTitle = this.selectedAreaName
}
this.selectedTitleTitle = selTitle
this.$emit('selectedData',
res.data && res.data.list || [],
selTitle,
this.selectedLevelName, this.selectedDepartName)
}
})
},
// 获取所有区域数据
getAreas() {
let param = {
setEntry: 'headers'
}
this.GET('contents/courseDoctor/listAreas', param).then(res => {
if(res.code == '000000'){
this.allAreaList = this.handleAreaData(res.data && res.data.list || [])
this.allAreaSubList = this.allAreaList[0].cities
}
})
},
// 寻找数据最大值,用于定义表格高度 //根据条件获取讲师列表
getMaxRowNum(orginAreaList) { getYqDoctorDataByCD() {
let maxRowNum = orginAreaList.length || 31 let _this = this,
orginAreaList.forEach((element, index) => { para = {
// if (element.length > maxRowNum){ provinceId: this.provinceId,
maxRowNum = element.cities.length > maxRowNum ? element.cities.length : maxRowNum cityId: this.cityId,
// } countyId: this.countyId,
}) levelGrade: this.levelGrade,
return maxRowNum departmentId: this.departmentId,
}, setEntry: "headers"
};
this.GET("contents/courseDoctor/v1/getAllTeacher", para).then(res => {
if (res.code == "000000") {
// _this.parmDataDoctList = res.data && res.data.list || []
let selTitle = this.selectedAreaSubName || this.selectedAreaName;
if (selTitle === "全部") {
selTitle = this.selectedAreaName;
}
this.selectedTitleTitle = selTitle;
this.$emit(
"selectedData",
(res.data && res.data.list) || [],
selTitle,
this.selectedLevelName,
this.selectedDepartName
);
}
});
},
// 获取所有区域数据
getAreas() {
let param = {
setEntry: "headers"
};
this.GET("contents/courseDoctor/listAreas", param).then(res => {
if (res.code == "000000") {
this.allAreaList = this.handleAreaData(
(res.data && res.data.list) || []
);
this.allAreaSubList = this.allAreaList[0].cities;
}
});
},
// 处理区域数据 // 寻找数据最大值,用于定义表格高度
handleAreaData (orginAreaList) { getMaxRowNum(orginAreaList) {
let handleList = [], maxRowNum = this.getMaxRowNum(orginAreaList); let maxRowNum = orginAreaList.length || 31;
orginAreaList.forEach((element, index) => { orginAreaList.forEach((element, index) => {
// debugger maxRowNum =
if( index === 0 ){ element.cities.length > maxRowNum ? element.cities.length : maxRowNum;
handleList.push({id: element.id, name: element.name, });
cities: this.decorateCitiesData({}, element.cities, maxRowNum + 1, false)}) return maxRowNum;
} else { },
handleList.push({id: element.id, name: element.name,
cities: this.decorateCitiesData({id: 0, name: '全部', provinceId: element.id}, element.cities, maxRowNum)})
}
});
handleList.unshift({id:'-1',name:'全国',cities: this.decorateCitiesData({id: 0, name: '全国', provinceId: 0}, [], maxRowNum)})
for (let i = orginAreaList.length; i < maxRowNum; i++) {
handleList.push({id:'',name:'',cities: []})
}
return handleList
},
// 装饰城市数据 // 处理区域数据
decorateCitiesData(appendInitData, cities, dataNum = 31, needAppend = true) { handleAreaData(orginAreaList) {
let appendCities = [], appendLength = dataNum - cities.length; let handleList = [],
if(needAppend){ maxRowNum = this.getMaxRowNum(orginAreaList);
appendCities.unshift(appendInitData) orginAreaList.forEach((element, index) => {
} if (index === 0) {
appendCities = appendCities.concat(cities) handleList.push({
for(let i = 0; i < appendLength; i ++){ id: element.id,
appendCities.push({id: '', name: '', provinceId: ''}) name: element.name,
} cities: this.decorateCitiesData(
return appendCities {},
}, element.cities,
maxRowNum + 1,
false
)
});
} else {
handleList.push({
id: element.id,
name: element.name,
cities: this.decorateCitiesData(
{ id: 0, name: "全部", provinceId: element.id },
element.cities,
maxRowNum
)
});
}
});
handleList.unshift({
id: "-1",
name: "全国",
cities: this.decorateCitiesData(
{ id: 0, name: "全国", provinceId: 0 },
[],
maxRowNum
)
});
// 获取医院等级 for (let i = orginAreaList.length; i < maxRowNum; i++) {
getLevels() { handleList.push({ id: "", name: "", cities: [] });
let param = { }
setEntry: 'headers' return handleList;
} },
this.GET('contents/courseDoctor/listLevels', param).then(res => {
if(res.code == '000000'){
this.allLevelList = res.data && res.data.list || []
this.allLevelList.unshift({no: 0, value: "全部等级"})
}
})
},
// 获取医院科室 // 装饰城市数据
getDeparts() { decorateCitiesData(
let param = { appendInitData,
setEntry: 'headers' cities,
} dataNum = 31,
this.GET('contents/courseDoctor/listDeparts', param).then(res => { needAppend = true
if(res.code == '000000'){ ) {
this.allDepartList = res.data && res.data.list || [] let appendCities = [],
this.allDepartList.unshift({id: 0, name: "全部科室"}) appendLength = dataNum - cities.length;
} if (needAppend) {
}) appendCities.unshift(appendInitData);
}, }
appendCities = appendCities.concat(cities);
for (let i = 0; i < appendLength; i++) {
appendCities.push({ id: "", name: "", provinceId: "" });
}
return appendCities;
},
// 选中省或直辖市 // 获取医院等级
selectAreaAction(item, index) { getLevels() {
if (item.name) { let param = {
this.cProvinceId = item.id setEntry: "headers"
this.selectedAreaIndex = index };
this.$refs.tableWrapperRef.scrollTop = 0 this.GET("contents/courseDoctor/listLevels", param).then(res => {
if (this.oldCProvinceId == item.id) { if (res.code == "000000") {
this.selectedAreaSubIndex = this.oldSelectedAreaSubIndex this.allLevelList = (res.data && res.data.list) || [];
} else { this.allLevelList.unshift({ no: 0, value: "全部等级" });
this.selectedAreaSubIndex = -1 }
} });
this.allAreaSubList = item.cities },
this.selectedAreaName = item.name
}
},
// 选中市或区 // 获取医院科室
selectAreaSubAction(item, index) { getDeparts() {
// this.selectedAreaIndex = index let param = {
// this.allAreaSubList = item.cities setEntry: "headers"
if(item.name){ };
this.selectedAreaSubName = item.name this.GET("contents/courseDoctor/listDeparts", param).then(res => {
this.selectedAreaSubIndex = index if (res.code == "000000") {
this.oldSelectedAreaSubIndex = index this.allDepartList = (res.data && res.data.list) || [];
this.oldCProvinceId = this.cProvinceId this.allDepartList.unshift({ id: 0, name: "全部科室" });
if(item.isMunicipality){ }
this.cityId = item.cityId || 0 });
this.countyId = item.id },
this.provinceId = item.provinceId
this.oldProvinceId = item.provinceId
this.oldCityId = item.cityId
this.oldCountyId = item.id
} else {
this.cityId = item.id
this.countyId = 0
this.provinceId = item.provinceId
this.oldProvinceId = item.provinceId
this.oldCityId = item.id
this.oldCountyId = 0
}
this.closeSelectedPage()
this.getYqDoctorDataByCD()
}
},
// 选中医院等级 // 选中省或直辖市
selectLevelAction(item, index) { selectAreaAction(item, index) {
this.selectedLevelIndex = index if (item.name) {
this.selectedLevelName = item.value this.cProvinceId = item.id;
this.levelGrade = item.no this.selectedAreaIndex = index;
this.closeSelectedPage() this.$refs.tableWrapperRef.scrollTop = 0;
this.getYqDoctorDataByCD() if (this.oldCProvinceId == item.id) {
}, this.selectedAreaSubIndex = this.oldSelectedAreaSubIndex;
} else {
this.selectedAreaSubIndex = -1;
}
this.allAreaSubList = item.cities;
this.selectedAreaName = item.name;
}
},
// 选中医院科室 // 选中市或区
selectDepartAction(item, index) { selectAreaSubAction(item, index) {
this.selectedDepartIndex = index // this.selectedAreaIndex = index
this.selectedDepartName = item.name // this.allAreaSubList = item.cities
this.departmentId = item.id if (item.name) {
this.closeSelectedPage() this.selectedAreaSubName = item.name;
this.getYqDoctorDataByCD() this.selectedAreaSubIndex = index;
this.oldSelectedAreaSubIndex = index;
this.oldCProvinceId = this.cProvinceId;
if (item.isMunicipality) {
this.cityId = item.cityId || 0;
this.countyId = item.id;
this.provinceId = item.provinceId;
this.oldProvinceId = item.provinceId;
this.oldCityId = item.cityId;
this.oldCountyId = item.id;
} else {
this.cityId = item.id;
this.countyId = 0;
this.provinceId = item.provinceId;
this.oldProvinceId = item.provinceId;
this.oldCityId = item.id;
this.oldCountyId = 0;
} }
this.closeSelectedPage();
this.getYqDoctorDataByCD();
}
},
// 选中医院等级
selectLevelAction(item, index) {
this.selectedLevelIndex = index;
this.selectedLevelName = item.value;
this.levelGrade = item.no;
this.closeSelectedPage();
this.getYqDoctorDataByCD();
}, },
}
// 选中医院科室
selectDepartAction(item, index) {
this.selectedDepartIndex = index;
this.selectedDepartName = item.name;
this.departmentId = item.id;
this.closeSelectedPage();
this.getYqDoctorDataByCD();
}
}
};
</script> </script>
<style> <style>
.mint-popup.mint-popup-top { .mint-popup.mint-popup-top {
height: 100%; height: 100%;
z-index: 2001; z-index: 2001;
/* overflow: auto; */ /* overflow: auto; */
} }
.swiper .mint-swipe-indicators{ .swiper .mint-swipe-indicators {
right: 6px; right: 6px;
top:50%; top: 50%;
bottom: inherit; bottom: inherit;
left:inherit; left: inherit;
width:10px; width: 10px;
text-align: center; text-align: center;
transform: translateX(0%); transform: translateX(0%);
transform: translateY(-50%); transform: translateY(-50%);
} }
.swiper .mint-swipe-item img{ .swiper .mint-swipe-item img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.swiper .mint-swipe-indicator{ .swiper .mint-swipe-indicator {
width:2px; width: 2px;
height: 8px; height: 8px;
background: #fff; background: #fff;
opacity: 0.4; opacity: 0.4;
float: left; float: left;
margin-top:3px; margin-top: 3px;
border-radius: 0; border-radius: 0;
} }
.swiper .is-active{ .swiper .is-active {
opacity: 1; opacity: 1;
} }
.mint-loadmore-top .mint-loadmore-text{font-size: 12px;} .mint-loadmore-top .mint-loadmore-text {
.banner-container.swiper-container-horizontal>.swiper-pagination-bullets{ font-size: 12px;
width: 2px; }
left: inherit; .banner-container.swiper-container-horizontal > .swiper-pagination-bullets {
transform: translateY(-50%); width: 2px;
position: absolute; left: inherit;
right: 6px; transform: translateY(-50%);
top:50%; position: absolute;
} right: 6px;
.banner-container.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{ top: 50%;
width: 2px; }
height: 7px; .banner-container.swiper-container-horizontal
background: #fff; > .swiper-pagination-bullets
margin:6px 0 0 0; .swiper-pagination-bullet {
float: left; width: 2px;
opacity: 0.4; height: 7px;
background: #fff;
} margin: 6px 0 0 0;
.banner-container.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet-active{ float: left;
opacity: 1 opacity: 0.4;
} }
.banner-container.swiper-container-horizontal
> .swiper-pagination-bullets
.swiper-pagination-bullet-active {
opacity: 1;
}
.banner-pagination{ .banner-pagination {
width: 2px; width: 2px;
z-index: 100; z-index: 100;
right: 10px; right: 10px;
top:10px; top: 10px;
position: absolute; position: absolute;
} }
/* .swiper-pagination-bullet{ /* .swiper-pagination-bullet{
} */ } */
.swiper-slide img{ .swiper-slide img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
</style> </style>
<style lang="scss" scoped> <style lang="scss" scoped>
@import '../../style/mixin'; @import "../../style/mixin";
@import '../../style/swiper.min.css'; @import "../../style/swiper.min.css";
.banner-container{ .banner-container {
height: px2rem(210px) height: px2rem(210px);
} }
.main-body{ .main-body {
position: relative; position: relative;
} }
.box-BG{ .box-BG {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: absolute; position: absolute;
top:0; top: 0;
left: 0; left: 0;
z-index: 10000 z-index: 10000;
} }
.mint-header { .mint-header {
background-color: rgba($color: #000000, $alpha: 0) background-color: rgba($color: #000000, $alpha: 0);
} }
.font-style { .font-style {
@include sc(0.6rem, #666); @include sc(0.6rem, #666);
} }
@keyframes myPullDown{ @keyframes myPullDown {
from {padding-top: 0;} from {
to {padding-top:px2rem(225px)} padding-top: 0;
} }
@keyframes myPullUp{ to {
from {padding-top: px2rem(225px);} padding-top: px2rem(225px);
to {padding-top:0} }
} }
.pull-down{ @keyframes myPullUp {
-webkit-animation: myPullDown 1.2s; from {
animation: myPullDown 1.2s; padding-top: px2rem(225px);
padding-top:px2rem(225px) }
} to {
.pull-up{ padding-top: 0;
-webkit-animation: myPullUp 1.2s; }
animation: myPullUp 1.2s; }
padding-top:0 .pull-down {
} -webkit-animation: myPullDown 1.2s;
.news-update{ animation: myPullDown 1.2s;
display: block; padding-top: px2rem(225px);
position: fixed; }
background: #F9F6EF; .pull-up {
right: 0; -webkit-animation: myPullUp 1.2s;
bottom: px2rem(140px); animation: myPullUp 1.2s;
height: px2rem(27px); padding-top: 0;
padding:0 px2rem(12px);; }
line-height: px2rem(27px); .news-update {
border:1px solid RGBA(162, 129, 60, 0.2); display: block;
font-size: px2rem(13px); position: fixed;
box-shadow: 0 px2rem(2px) px2rem(3px) RGBA(202, 168, 97, 0.4); background: #f9f6ef;
border-radius: px2rem(14px) 0 0 px2rem(14px); right: 0;
z-index: 101; bottom: px2rem(140px);
.news-info{ height: px2rem(27px);
color: #A2813C; padding: 0 px2rem(12px);
position: relative; line-height: px2rem(27px);
display: inline-block; border: 1px solid RGBA(162, 129, 60, 0.2);
i{ font-size: px2rem(13px);
position: absolute; box-shadow: 0 px2rem(2px) px2rem(3px) RGBA(202, 168, 97, 0.4);
right: -(px2rem(6px)); border-radius: px2rem(14px) 0 0 px2rem(14px);
top:px2rem(4px); z-index: 101;
display: inline-block; .news-info {
width: px2rem(4px); color: #a2813c;
height: px2rem(4px); position: relative;
border-radius: 100%; display: inline-block;
background: #F47A48 i {
} position: absolute;
} right: -(px2rem(6px));
top: px2rem(4px);
} display: inline-block;
.home-topMenu{ width: px2rem(4px);
width: 100%; height: px2rem(4px);
text-align:center; border-radius: 100%;
top:0; background: #f47a48;
position: absolute;
z-index: 10;
} }
}
}
.home-topMenu {
width: 100%;
text-align: center;
top: 0;
position: absolute;
z-index: 10;
}
.home-header { .home-header {
height: px2rem(234px); // banner图片变高了 height: px2rem(234px); // banner图片变高了
// height: px2rem(210px); // height: px2rem(210px);
.swiper{ .swiper {
height: 100%; height: 100%;
/* @include bis('../../images/552064153@2x.png');*/ /* @include bis('../../images/lect-bg.png');*/
} }
.logo_img{ .logo_img {
height: px2rem(85px); height: px2rem(85px);
width: px2rem(345px); width: px2rem(345px);
text-align: center; text-align: center;
} }
} }
.home-body{ .home-body {
background: #fff background: #fff;
} }
.pathologic-list{ .pathologic-list {
width: 100%;
height: px2rem(52px);
padding: 0 px2rem(15px);
margin-top: px2rem(15px);
.pathologic-item {
float: left;
width: 48%;
box-shadow: 0 px2rem(2px) px2rem(8px) rgba(49, 127, 119, 0.2);
border-radius: px2rem(3px);
background: #fff;
/* padding: px2rem(12px) 0 px2rem(12px) 0;*/
margin-right: 4%;
text-align: center;
.pathologic-icon {
height: px2rem(52px);
/* height: px2rem(20px);*/
img {
width: 100%; width: 100%;
height: px2rem(52px); height: px2rem(52px);
padding: 0 px2rem(15px); padding-bottom: px2rem(8px);
margin-top: px2rem(15px); vertical-align: middle;
.pathologic-item{ display: inline-block;
float: left; }
width: 48%;
box-shadow: 0 px2rem(2px) px2rem(8px) rgba(49, 127, 119, 0.2);
border-radius: px2rem(3px);
background: #fff;
/* padding: px2rem(12px) 0 px2rem(12px) 0;*/
margin-right: 4%;
text-align: center;
.pathologic-icon{
height: px2rem(52px);
/* height: px2rem(20px);*/
img{
width: 100%;
height: px2rem(52px);
padding-bottom: px2rem(8px);
vertical-align: middle;
display: inline-block;
}
}
.pathologic-txt{
font-size: px2rem(14px);
line-height: px2rem(20px);
font-weight: 700;
display: inline-block;
vertical-align: middle;
}
}
.clear{
clear: both;
}
} }
.pathologic-txt {
font-size: px2rem(14px);
line-height: px2rem(20px);
font-weight: 700;
display: inline-block;
vertical-align: middle;
}
}
.clear {
clear: both;
}
}
</style> </style>
<style lang="scss" scoped> <style lang="scss" scoped>
@import '../../style/mixin'; @import "../../style/mixin";
.lect-selection-content { .lect-selection-content {
width: px2rem(375px); width: px2rem(375px);
height: 81%; height: 81%;
overflow: auto; overflow: auto;
font-size: px2rem(14px); font-size: px2rem(14px);
color: #666666; color: #666666;
margin-right: px2rem(15px); margin-right: px2rem(15px);
width: px2rem(360px); width: px2rem(360px);
-webkit-overflow-scrolling : touch; -webkit-overflow-scrolling: touch;
overflow: auto; overflow: auto;
table { table {
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: collapse;
}
&-rp-tb {
padding: px2rem(4px) px2rem(15px);
&-left {
td {
padding-left: px2rem(15px);
border-bottom: 1px solid #f5f6f6;
}
background: #f5f6f6;
} }
&-rp-tb { tr {
padding: px2rem(4px) px2rem(15px); height: px2rem(40px);
&-left { line-height: px2rem(40px);
td { }
padding-left: px2rem(15px); td {
border-bottom: 1px solid #F5F6F6; height: px2rem(40px);
} img {
background: #F5F6F6; position: relative;
} top: px2rem(6px);
tr { left: 0;
height: px2rem(40px); width: 20px;
line-height: px2rem(40px); height: 20px;
} }
td {
height: px2rem(40px);
img {
position: relative;
top: px2rem(6px);
left: 0;
width: 20px;
height: 20px;
}
}
&-tb {
td {
padding-left: px2rem(8px);
border-bottom: 1px solid #f0f0f0;
}
}
&-tb-2 {
td {
padding-left: 0;
border-bottom: 1px solid #f0f0f0;
}
table {
width: 96%;
margin: 0 px2rem(15px);
}
}
} }
&-tb {
td {
padding-left: px2rem(8px);
border-bottom: 1px solid #f0f0f0;
}
}
&-tb-2 {
td {
padding-left: 0;
border-bottom: 1px solid #f0f0f0;
}
table {
width: 96%;
margin: 0 px2rem(15px);
}
}
}
} }
.lect-selection { .lect-selection {
...@@ -691,7 +737,7 @@ export default { ...@@ -691,7 +737,7 @@ export default {
color: #449284 !important; color: #449284 !important;
} }
.bg-white { .bg-white {
background: #fff; background: #fff;
} }
</style> </style>
...@@ -3,55 +3,55 @@ ...@@ -3,55 +3,55 @@
<article class="group-title"> <article class="group-title">
<section class="group-title-order"> <section class="group-title-order">
<div @click="selectedType(1)" class="group-title-order-item"> <div @click="selectedType(1)" class="group-title-order-item">
<span>{{selectedAreaName}}</span><img src="../../images/lecturer/select-down.png"/> <span>{{selectedAreaName}}</span>
<img src="../../images//select-down.png">
</div> </div>
<div @click="selectedType(2)" class="group-title-order-item"> <div @click="selectedType(2)" class="group-title-order-item">
<span>{{selectedLevelName}}</span><img src="../../images/lecturer/select-down.png"/> <span>{{selectedLevelName}}</span>
<img src="../../images//select-down.png">
</div> </div>
<div @click="selectedType(3)" class="group-title-order-item"> <div @click="selectedType(3)" class="group-title-order-item">
<span>{{selectedDepartName}}</span><img src="../../images/lecturer/select-down.png"/> <span>{{selectedDepartName}}</span>
<img src="../../images//select-down.png">
</div> </div>
</section> </section>
</article> </article>
</section> </section>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {
selectedTypeIndex: 1 selectedTypeIndex: 1
} };
}, },
props: { props: {
selectedAreaName: { selectedAreaName: {
type: String, type: String,
default: '全国' default: "全国"
}, },
selectedLevelName: { selectedLevelName: {
type: String, type: String,
default: '全部等级' default: "全部等级"
}, },
selectedDepartName: { selectedDepartName: {
type: String, type: String,
default: '全部科室' default: "全部科室"
} }
}, },
computed: { computed: {},
}, watch: {},
watch: {
},
methods: { methods: {
selectedType(index) { selectedType(index) {
this.selectedTypeIndex = index this.selectedTypeIndex = index;
this.$emit('selectedType', index) this.$emit("selectedType", index);
}, }
} }
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import '../../style/mixin.scss'; @import "../../style/mixin.scss";
.group-title { .group-title {
display: flex; display: flex;
...@@ -71,7 +71,7 @@ export default { ...@@ -71,7 +71,7 @@ export default {
img { img {
position: relative; position: relative;
top: px2rem(1px); top: px2rem(1px);
left: px2rem(1px); left: px2rem(-1px);
height: px2rem(11px); height: px2rem(11px);
width: px2rem(11px); width: px2rem(11px);
} }
......
<template> <template>
<section class="group-title-title"> <section class="group-title-title">
<span class="group-title-title-main">{{mainTitle}}</span><span class="group-title-title-sub">{{subTitle}}</span> <span class="group-title-title-main">{{mainTitle}}</span>
</section> <span class="group-title-title-sub">{{subTitle}}</span>
</section>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {};
}
}, },
props: { props: {
mainTitle: { mainTitle: {
type: String, type: String,
default: '全部讲师' default: "全部讲师"
}, },
subTitle: { subTitle: {
type: String, type: String,
default: '专业领域的资深专家' default: "专业领域的资深专家"
}, }
} }
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import '../../style/mixin.scss'; @import "../../style/mixin.scss";
.group-title { .group-title {
height: px2rem(18px); height: px2rem(18px);
line-height: px2rem(18px); line-height: px2rem(18px);
...@@ -34,7 +33,7 @@ export default { ...@@ -34,7 +33,7 @@ export default {
margin-right: px2rem(6px); margin-right: px2rem(6px);
font-size: px2rem(18px); font-size: px2rem(18px);
font-weight: 500; font-weight: 500;
color: #28344C; color: #28344c;
} }
&-sub { &-sub {
font-size: px2rem(15px); font-size: px2rem(15px);
......
<template> <template>
<section> <section>
<div class="font-style"> <div class="font-style">
<div class="teach-opt"> <div class="teach-opt">
<div class="teach-list"> <div class="teach-list">
<div :class="index % 2 == 1 ? 'list-item mr0' : 'list-item'" <div
v-for="(item, index) in cParamData" :key="index" :class="index % 2 == 1 ? 'list-item mr0' : 'list-item'"
@click="gotoDetail(item)"> v-for="(item, index) in cParamData"
<div class="tea-img" :style="'background:'+ item.bgColor"> :key="index"
<img :src="item.doctorAvatarImg"> @click="gotoDetail(item)"
<span class="learn-p">{{item.totalNum | yLocalString}}人已学</span> >
<span class="learn-p-cnum">课程: 共{{item.resourceNum}}</span> <div class="tea-img" :style="'background:'+ item.bgColor">
<!-- <span class="learn-p">{{item.joinNum | yLocalString}}人已学</span> --> <img :src="item.doctorAvatarImg">
</div> <span class="learn-p">{{item.totalNum | yLocalString}}人已学</span>
<div class="tea-txt"> <span class="learn-p-cnum">课程: 共{{item.resourceNum}}</span>
<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/lecturer/no-content.png" alt=" ">
<span class="no-content-desc">暂无相关内容</span>
</div>
</div> </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>
</div> </div>
</section> </section>
</template> </template>
<script> <script>
import { teacher } from '../../utils/buryingPoint'; import { teacher } from "../../utils/buryingPoint";
import { mapGetters } from 'vuex' import { mapGetters } from "vuex";
import YqyLecturerOrder from '@/components/business/yqy-lecturer-order'; import YqyLecturerOrder from "@/components/business/yqy-lecturer-order";
export default { export default {
data() { data() {
return { return {
topTitle: '讲师集', col: 1, //0综合,1人气,2资源数,3姓名首字母
token: '', dir: 2, //1:正序 2:逆序,
// list: [], list: []
isShowCount: true, };
followCount: 0, },
studyCount: 0, components: {
col: 1, //0综合,1人气,2资源数,3姓名首字母 YqyLecturerOrder
dir: 2, //1:正序 2:逆序, },
list: [], props: {
} parmData: {
}, type: Array,
components: { default: () => []
YqyLecturerOrder }
}, },
props: { mounted() {},
parmData: { computed: {
type: Array, cParamData() {
default: () => [] 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
} }
});
this.appBuryingPointEntrust({
...teacher,
labelId: item.doctorId,
labelValue: item.doctorName
});
}, },
mounted() {
}, // 随机生成背景颜色
computed: { randomBg(d) {
cParamData() { for (let i = 0; i < d.length; i++) {
if (this.parmData && this.parmData.length) { if (i % 4 == 0) {
return this.randomBg(this.parmData) d[i].bgColor = "#EBF6F1";
} else { } else if (i % 4 == 1) {
return this.randomBg(this.list) d[i].bgColor = "#EDF3FA";
} } else if (i % 4 == 2) {
d[i].bgColor = "#F0F0FA";
} else if (i % 4 == 3) {
d[i].bgColor = "#F6EFE6";
} }
}
return d;
}, },
methods: {
// 跳转到详情页面
gotoDetail(item){
this.$router.push({
path: '/teachersDetail',
query: {
id: item.doctorId
}
})
this.appBuryingPointEntrust({
...teacher,
labelId: item.doctorId,
labelValue: item.doctorName
})
},
// 随机生成背景颜色 // 埋点
randomBg(d) { appBuryingPointEntrust(val) {
for (let i = 0; i < d.length; i++) { rocNative.appBuryingPointEntrust(val);
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> </script>
<style> <style>
body { body {
background: #fff background: #fff;
} }
</style> </style>
<style lang="scss" scoped> <style lang="scss" scoped>
body { body {
background: #fff background: #fff;
} }
@import '../../style/mixin'; @import "../../style/mixin";
.no-content { .no-content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin: px2rem(40px) 0 px2rem(50px); margin: px2rem(40px) 0 px2rem(50px);
align-items: center; align-items: center;
img { img {
width: px2rem(125px); width: px2rem(125px);
height: px2rem(125px); height: px2rem(125px);
} }
span { span {
height: px2rem(21px); height: px2rem(21px);
line-height: px2rem(21px); line-height: px2rem(21px);
font-size: px2rem(15px); font-size: px2rem(15px);
font-weight: 400; font-weight: 400;
color:rgba(153,153,153,1); color: rgba(153, 153, 153, 1);
} }
} }
.mint-header { .mint-header {
background-color: rgba($color: #000000, $alpha: 0) background-color: rgba($color: #000000, $alpha: 0);
} }
.font-style { .font-style {
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
@include sc(0.6rem, #666); @include sc(0.6rem, #666);
} }
.teach-opt { .teach-opt {
padding: 0 px2rem(15px) px2rem(15px) px2rem(15px); padding: 0 px2rem(15px) px2rem(15px) px2rem(15px);
.teach-title { .teach-title {
font-size: px2rem(18px); font-size: px2rem(18px);
// padding-bottom: px2rem(0px); // padding-bottom: px2rem(0px);
color: #333; color: #333;
} }
.teach-list {
margin-top: px2rem(-14px);
overflow: hidden;
}
.opt-span { .teach-list {
span { margin-top: px2rem(-14px);
color: #449284; overflow: hidden;
font-size: px2rem(13px); }
display: inline-block;
vertical-align: middle;
height: px2rem(10px);
line-height: px2rem(10px);
img { .opt-span {
display: inline-block; span {
width: px2rem(15px); color: #449284;
height: px2rem(15px); font-size: px2rem(13px);
vertical-align: middle; display: inline-block;
} vertical-align: middle;
} height: px2rem(10px);
} line-height: px2rem(10px);
.list-item { img {
width: px2rem(170px); display: inline-block;
margin-right: px2rem(5px); width: px2rem(15px);
margin-top: px2rem(15px); height: px2rem(15px);
border: 1px solid rgba(0, 0, 0, 0.02); vertical-align: middle;
border-radius: 0 0 px2rem(3px) px2rem(3px); }
float: left;
box-shadow: 0 px2rem(4px) px2rem(6px) RGBA(0, 0, 0, 0.06);
} }
}
.mr0 { .list-item {
margin-right: 0 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);
}
.tea-txt { .mr0 {
padding: px2rem(5px) px2rem(7px); margin-right: 0;
} }
.tea-img { .tea-txt {
width: px2rem(170px); padding: px2rem(5px) px2rem(7px);
height: px2rem(83px); }
position: relative;
border-radius: px2rem(3px) px2rem(3px) 0 0;
img { .tea-img {
width: 100%; width: px2rem(170px);
height: 100%; height: px2rem(83px);
display: block; position: relative;
border-radius: px2rem(3px) px2rem(3px) 0 0; border-radius: px2rem(3px) px2rem(3px) 0 0;
}
.learn-p { img {
padding-left: px2rem(6px); width: 100%;
position: absolute; height: 100%;
width: 100%; display: block;
left: 0; border-radius: px2rem(3px) px2rem(3px) 0 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 { .learn-p {
padding: 0; padding-left: px2rem(6px);
color: #333; position: absolute;
font-size: px2rem(14px); width: 100%;
font-weight: 500; 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-department { .tea-name {
padding: 0; padding: 0;
color: #333; color: #333;
font-size: px2rem(12px); font-size: px2rem(14px);
font-weight: 400; font-weight: 500;
} }
.tea-position {
height: px2rem(30px); .tea-department {
font-size: px2rem(12px); padding: 0;
line-height: px2rem(15px); color: #333;
color: #666; font-size: px2rem(12px);
font-weight: 400; font-weight: 400;
overflow: hidden; }
text-overflow: ellipsis; .tea-position {
-webkit-line-clamp: 2; 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 { .home-header {
height: px2rem(185px); height: px2rem(185px);
@include bis('../../images/headerTop.png'); @include bis("../../images//headerTop.png");
.logo_img { .logo_img {
height: px2rem(85px); height: px2rem(85px);
width: px2rem(345px); width: px2rem(345px);
text-align: center; text-align: center;
} }
} }
.ellipsis-1 { .ellipsis-1 {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
} }
.ellipsis-2 { .ellipsis-2 {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
} }
</style> </style>
...@@ -114,16 +114,4 @@ ...@@ -114,16 +114,4 @@
<symbol viewBox="0 0 126 126" id="expired"><path fill="#9B9B9B" fill-rule="evenodd" d="M63 125.5c34.518 0 62.5-27.982 62.5-62.5S97.518.5 63 .5.5 28.482.5 63s27.982 62.5 62.5 62.5zM15.156 66.678l-3.073-1.258 2.868-1.674.248-3.31 2.478 2.21 3.225-.79-1.335 3.04 1.746 2.825-3.302-.33-2.147 2.533-.704-3.245zm4.07-24.55l-2.03-2.625 3.32-.015 1.87-2.744 1.04 3.153 3.187.93-2.677 1.964.1 3.32-2.695-1.94-3.124 1.122 1.01-3.163zm15.8-19.223l-.446-3.29 2.883 1.646 2.99-1.44-.674 3.25 2.294 2.4-3.3.363-1.573 2.924-1.363-3.027-3.267-.592 2.457-2.233zm23.296-8.75l1.258-3.072 1.674 2.868 3.31.248-2.21 2.478.79 3.225-3.04-1.335-2.825 1.746.33-3.302-2.533-2.147 3.245-.704zm24.55 4.072l2.625-2.032.015 3.32 2.744 1.87-3.153 1.04-.93 3.188-1.964-2.677-3.32.1 1.94-2.695-1.122-3.124 3.163 1.01zm27.972 39.095l3.073 1.258-2.868 1.674-.248 3.31-2.478-2.21-3.225.79 1.335-3.04-1.746-2.825 3.302.33 2.147-2.533.704 3.245zm-4.07 24.55l2.03 2.625-3.32.015-1.87 2.744-1.04-3.153-3.187-.93 2.677-1.964-.1-3.32 2.695 1.94 3.124-1.122-1.01 3.163zm-15.8 19.223l.446 3.29-2.883-1.646-2.99 1.44.674-3.25-2.294-2.4 3.3-.363 1.573-2.924 1.363 3.027 3.267.592-2.457 2.233zm-23.296 8.75l-1.258 3.072-1.674-2.868-3.31-.248 2.21-2.478-.79-3.225 3.04 1.335 2.825-1.746-.33 3.302 2.533 2.147-3.245.704zm-24.55-4.072l-2.625 2.032-.015-3.32-2.744-1.87 3.153-1.04.93-3.188 1.964 2.677 3.32-.1-1.94 2.695 1.122 3.124-3.163-1.01zM74.257 41.7a23.764 23.764 0 0 0-22.17.092 23.767 23.767 0 0 0-12.508 18.646l.995.1a22.767 22.767 0 0 1 11.983-17.863 22.764 22.764 0 0 1 21.238-.088l.462-.887zm11.387 22.436A22.764 22.764 0 0 1 74.313 82.1a22.767 22.767 0 0 1-21.5.696l-.44.897a23.767 23.767 0 0 0 22.44-.727A23.764 23.764 0 0 0 86.64 64.214l-.997-.078zM63 122.5C30.14 122.5 3.5 95.86 3.5 63S30.14 3.5 63 3.5s59.5 26.64 59.5 59.5-26.64 59.5-59.5 59.5zm14.127-71.148l1.14 1.975 3.388-1.956-1.14-1.974-3.388 1.956zm2.704-3.14l-1.055-1.83-3.388 1.956 1.056 1.83 3.388-1.957zm.237 8.232l3.388-1.956-1.14-1.974-3.388 1.956 1.14 1.974zm-6.89-8.715a24.73 24.73 0 0 0-.892-1.453 7.288 7.288 0 0 0-.79-.985c.31-.104.617-.227.924-.367a6.52 6.52 0 0 0 .842-.46c.13-.093.226-.12.285-.08.06.04.066.128.017.267a.653.653 0 0 0-.032.378c.03.113.09.253.187.42l.85 1.475 3.39-1.956a39.962 39.962 0 0 0-1.01-1.677c-.25-.383-.472-.665-.67-.847a13.33 13.33 0 0 0 1.857-.767c.19-.09.313-.107.374-.05.062.057.064.148.007.273-.09.2-.128.356-.117.47.01.114.06.247.147.4l.792 1.37c.24-.157.48-.318.718-.483a9.91 9.91 0 0 0 .673-.513l1.02 1.766c-.26.095-.52.204-.78.327-.262.123-.525.243-.79.36l4.655 8.063c.234-.17.46-.333.675-.486.217-.153.43-.318.643-.496l.912 1.58c-.21.085-.434.177-.672.278-.238.1-.534.243-.888.43-.354.185-.79.423-1.307.712a205.733 205.733 0 0 0-3.876 2.238c-.516.307-.943.567-1.28.78-.34.215-.615.402-.828.562-.212.16-.408.31-.586.45l-.912-1.58c.638-.24 1.29-.533 1.958-.882l-4.668-8.085a20.893 20.893 0 0 0-1.67 1.186l-1.02-1.767a21.623 21.623 0 0 0 1.862-.854zm14.762 2.285l3.387-1.956-2.124-3.68-3.388 1.956 2.124 3.68zm-1.45-10.332l-3.387 1.956 1.956 3.387 3.387-1.956-1.956-3.387zm2.11 11.67c.274.634.514 1.305.717 2.01.204.704.36 1.408.47 2.11.11.704.167 1.4.17 2.093a10.19 10.19 0 0 1-.17 1.94c-.51-.15-1.18-.14-2.008.024.213-.974.312-1.88.298-2.723a10.595 10.595 0 0 0-.37-2.558c-.23-.865-.573-1.77-1.028-2.72a48.398 48.398 0 0 0-1.714-3.208l-2.7-4.676a25.767 25.767 0 0 0-.875-1.42 21.753 21.753 0 0 0-.85-1.186c.525-.21 1.043-.45 1.554-.717.51-.267 1.112-.6 1.805-1a60.923 60.923 0 0 0 1.893-1.136 17.45 17.45 0 0 0 1.502-1.047c.137.364.325.787.565 1.267.24.48.517.99.83 1.53l7.535 13.054a6.1 6.1 0 0 1 .46.94.97.97 0 0 1-.036.756c-.115.25-.347.527-.698.832-.35.304-.864.688-1.54 1.15a3.186 3.186 0 0 0-.647-.858 4.97 4.97 0 0 0-1.038-.717 13.81 13.81 0 0 0 1.096-.55c.264-.152.45-.295.555-.43a.502.502 0 0 0 .108-.437 2.097 2.097 0 0 0-.243-.566l-2.172-3.762-3.47 2.004zm-1.954 7.223a6.16 6.16 0 0 0-1.466-.69 6.537 6.537 0 0 0-1.563-.332l.69-1.59a14.604 14.604 0 0 1 3.05.817l-.71 1.794zm-4.033-.027a2.137 2.137 0 0 0-.287.51 6.12 6.12 0 0 0-.26.872 23.78 23.78 0 0 0-.283 1.452c-.1.594-.225 1.34-.37 2.237a3.37 3.37 0 0 0-.92-.078 5.34 5.34 0 0 0-1.096.19 8.492 8.492 0 0 0 .812-2.41c.15-.843.175-1.782.077-2.816.39.034.75.034 1.08 0a8.61 8.61 0 0 0 1.06-.182c.14-.044.227-.04.26.017.03.056.007.126-.074.21zm-17.506-5.745c.68-.392 1.22-.72 1.624-.98.405-.26.798-.538 1.182-.834l1.044 1.81c-.426.19-.86.4-1.3.626a40.64 40.64 0 0 0-1.66.917l5.015 8.688c.21.36.354.684.435.97.082.285.043.584-.118.9-.16.313-.468.676-.924 1.086-.455.41-1.11.918-1.962 1.52a10.17 10.17 0 0 0-.84-.83 7.863 7.863 0 0 0-1.12-.836 20.7 20.7 0 0 0 1.457-.813c.36-.226.625-.43.797-.612.172-.183.262-.346.27-.49a.783.783 0 0 0-.117-.444l-4.68-8.105-4.448 2.568c-.846.488-1.512.886-2 1.195-.485.31-.936.6-1.35.877l-1.03-1.788c.236-.1.472-.204.706-.31.234-.108.484-.234.75-.38a93.69 93.69 0 0 0 2.035-1.132l4.45-2.568a106.39 106.39 0 0 0-1.3-2.202c-.33-.54-.576-.92-.74-1.138.35-.13.72-.29 1.105-.486.387-.194.696-.378.93-.55.192-.147.346-.176.462-.086.117.09.133.205.048.346a.79.79 0 0 0-.08.56c.044.186.098.335.162.446l1.2 2.08zm-1.79 11.537a25.633 25.633 0 0 0-1.934-1.475 35.97 35.97 0 0 0-2.03-1.31l1.267-1.644a38.25 38.25 0 0 1 2.034 1.195c.68.428 1.346.9 1.993 1.412l-1.33 1.822zm-12.53-7.01c.706.293 1.41.608 2.11.942.702.334 1.376.693 2.022 1.078l-1.13 2.12a56.81 56.81 0 0 0-2.01-1.152 41.097 41.097 0 0 0-2.06-1.044l1.067-1.945zM63 118.25c30.514 0 55.25-24.736 55.25-55.25S93.514 7.75 63 7.75 7.75 32.486 7.75 63 32.486 118.25 63 118.25zm-2.237-47.53c.262-.058.562-.097.9-.118.34-.02.753-.04 1.24-.063.52-.025 1.176-.163 1.964-.415.788-.25 1.72-.646 2.794-1.184 1.077-.536 2.303-1.235 3.682-2.096a87.9 87.9 0 0 0 4.634-3.133 10.2 10.2 0 0 0 .24 1.4c.098.378.23.74.394 1.09a321.96 321.96 0 0 1-4.068 2.362 69.403 69.403 0 0 1-3.052 1.65c-.88.445-1.643.802-2.29 1.074s-1.236.483-1.768.633c-.533.15-1.03.256-1.492.32-.462.063-.954.107-1.476.13-.62.046-1.087.126-1.4.24-.31.117-.536.344-.674.682-.123.33-.22.74-.286 1.232a18.89 18.89 0 0 0-.144 1.62 7.14 7.14 0 0 0-1.164-.31 9.118 9.118 0 0 0-1.23-.136c.132-.575.256-1.07.374-1.49.118-.42.23-.785.338-1.096.106-.31.212-.575.318-.793.105-.22.214-.407.326-.564l-3.66-6.34c-.582.337-1.08.634-1.495.892-.415.257-.75.498-1.01.722l-.972-1.684c.293-.132.648-.3 1.066-.505.42-.203.83-.42 1.23-.653a31.8 31.8 0 0 0 1.27-.775c.433-.277.775-.516 1.028-.718.14.4.292.778.46 1.134.17.355.413.81.733 1.364l3.193 5.53zm-15.907-.43l-2.712-4.7-5.425 3.133c-1.456.84-2.783 1.63-3.983 2.368-1.2.74-2.125 1.344-2.778 1.813l-1.237-2.14c.307-.14.708-.335 1.202-.583.494-.25 1.055-.54 1.684-.876a143.593 143.593 0 0 0 4.375-2.429 153.71 153.71 0 0 0 4.442-2.648c1.175-.734 2.054-1.315 2.638-1.745.15.357.367.813.652 1.37a42.88 42.88 0 0 0 1.05 1.915l1.848 3.2a32.46 32.46 0 0 0 1.93 2.96l-2.057 1.188-.72-1.247-9.395 5.424 3.072 5.32c.224.39.415.68.574.875.158.195.345.304.562.327.216.023.5-.045.853-.202.353-.157.838-.405 1.455-.743.876-.47 1.734-.942 2.577-1.42a68.054 68.054 0 0 0 2.465-1.465c.754-.453 1.335-.84 1.743-1.158.407-.318.686-.66.836-1.023.15-.364.185-.81.104-1.334a26.6 26.6 0 0 0-.45-2.124c.843.437 1.734.523 2.67.26.206 1.026.324 1.854.354 2.483.03.628-.083 1.184-.34 1.665-.258.48-.698.943-1.32 1.386-.623.443-1.495.988-2.617 1.636l-2.545 1.47c-.908.524-1.758.996-2.55 1.417-1.063.558-1.902.97-2.517 1.23-.615.264-1.123.368-1.524.313-.402-.055-.75-.274-1.045-.657-.297-.385-.652-.937-1.068-1.658l-3.444-5.965a27.726 27.726 0 0 0-1.155-1.855c-.337-.49-.602-.835-.793-1.04.37-.157.762-.342 1.176-.553.414-.212.79-.425 1.13-.64.185-.125.32-.144.41-.056.087.088.085.214-.005.377a.624.624 0 0 0-.105.394c.015.12.082.286.202.494l.384.665 9.396-5.424zM10.402 63c0-29.05 23.55-52.598 52.598-52.598 29.05 0 52.598 23.55 52.598 52.598 0 29.05-23.55 52.598-52.598 52.598-29.05 0-52.598-23.55-52.598-52.598z"></path></symbol> <symbol viewBox="0 0 126 126" id="expired"><path fill="#9B9B9B" fill-rule="evenodd" d="M63 125.5c34.518 0 62.5-27.982 62.5-62.5S97.518.5 63 .5.5 28.482.5 63s27.982 62.5 62.5 62.5zM15.156 66.678l-3.073-1.258 2.868-1.674.248-3.31 2.478 2.21 3.225-.79-1.335 3.04 1.746 2.825-3.302-.33-2.147 2.533-.704-3.245zm4.07-24.55l-2.03-2.625 3.32-.015 1.87-2.744 1.04 3.153 3.187.93-2.677 1.964.1 3.32-2.695-1.94-3.124 1.122 1.01-3.163zm15.8-19.223l-.446-3.29 2.883 1.646 2.99-1.44-.674 3.25 2.294 2.4-3.3.363-1.573 2.924-1.363-3.027-3.267-.592 2.457-2.233zm23.296-8.75l1.258-3.072 1.674 2.868 3.31.248-2.21 2.478.79 3.225-3.04-1.335-2.825 1.746.33-3.302-2.533-2.147 3.245-.704zm24.55 4.072l2.625-2.032.015 3.32 2.744 1.87-3.153 1.04-.93 3.188-1.964-2.677-3.32.1 1.94-2.695-1.122-3.124 3.163 1.01zm27.972 39.095l3.073 1.258-2.868 1.674-.248 3.31-2.478-2.21-3.225.79 1.335-3.04-1.746-2.825 3.302.33 2.147-2.533.704 3.245zm-4.07 24.55l2.03 2.625-3.32.015-1.87 2.744-1.04-3.153-3.187-.93 2.677-1.964-.1-3.32 2.695 1.94 3.124-1.122-1.01 3.163zm-15.8 19.223l.446 3.29-2.883-1.646-2.99 1.44.674-3.25-2.294-2.4 3.3-.363 1.573-2.924 1.363 3.027 3.267.592-2.457 2.233zm-23.296 8.75l-1.258 3.072-1.674-2.868-3.31-.248 2.21-2.478-.79-3.225 3.04 1.335 2.825-1.746-.33 3.302 2.533 2.147-3.245.704zm-24.55-4.072l-2.625 2.032-.015-3.32-2.744-1.87 3.153-1.04.93-3.188 1.964 2.677 3.32-.1-1.94 2.695 1.122 3.124-3.163-1.01zM74.257 41.7a23.764 23.764 0 0 0-22.17.092 23.767 23.767 0 0 0-12.508 18.646l.995.1a22.767 22.767 0 0 1 11.983-17.863 22.764 22.764 0 0 1 21.238-.088l.462-.887zm11.387 22.436A22.764 22.764 0 0 1 74.313 82.1a22.767 22.767 0 0 1-21.5.696l-.44.897a23.767 23.767 0 0 0 22.44-.727A23.764 23.764 0 0 0 86.64 64.214l-.997-.078zM63 122.5C30.14 122.5 3.5 95.86 3.5 63S30.14 3.5 63 3.5s59.5 26.64 59.5 59.5-26.64 59.5-59.5 59.5zm14.127-71.148l1.14 1.975 3.388-1.956-1.14-1.974-3.388 1.956zm2.704-3.14l-1.055-1.83-3.388 1.956 1.056 1.83 3.388-1.957zm.237 8.232l3.388-1.956-1.14-1.974-3.388 1.956 1.14 1.974zm-6.89-8.715a24.73 24.73 0 0 0-.892-1.453 7.288 7.288 0 0 0-.79-.985c.31-.104.617-.227.924-.367a6.52 6.52 0 0 0 .842-.46c.13-.093.226-.12.285-.08.06.04.066.128.017.267a.653.653 0 0 0-.032.378c.03.113.09.253.187.42l.85 1.475 3.39-1.956a39.962 39.962 0 0 0-1.01-1.677c-.25-.383-.472-.665-.67-.847a13.33 13.33 0 0 0 1.857-.767c.19-.09.313-.107.374-.05.062.057.064.148.007.273-.09.2-.128.356-.117.47.01.114.06.247.147.4l.792 1.37c.24-.157.48-.318.718-.483a9.91 9.91 0 0 0 .673-.513l1.02 1.766c-.26.095-.52.204-.78.327-.262.123-.525.243-.79.36l4.655 8.063c.234-.17.46-.333.675-.486.217-.153.43-.318.643-.496l.912 1.58c-.21.085-.434.177-.672.278-.238.1-.534.243-.888.43-.354.185-.79.423-1.307.712a205.733 205.733 0 0 0-3.876 2.238c-.516.307-.943.567-1.28.78-.34.215-.615.402-.828.562-.212.16-.408.31-.586.45l-.912-1.58c.638-.24 1.29-.533 1.958-.882l-4.668-8.085a20.893 20.893 0 0 0-1.67 1.186l-1.02-1.767a21.623 21.623 0 0 0 1.862-.854zm14.762 2.285l3.387-1.956-2.124-3.68-3.388 1.956 2.124 3.68zm-1.45-10.332l-3.387 1.956 1.956 3.387 3.387-1.956-1.956-3.387zm2.11 11.67c.274.634.514 1.305.717 2.01.204.704.36 1.408.47 2.11.11.704.167 1.4.17 2.093a10.19 10.19 0 0 1-.17 1.94c-.51-.15-1.18-.14-2.008.024.213-.974.312-1.88.298-2.723a10.595 10.595 0 0 0-.37-2.558c-.23-.865-.573-1.77-1.028-2.72a48.398 48.398 0 0 0-1.714-3.208l-2.7-4.676a25.767 25.767 0 0 0-.875-1.42 21.753 21.753 0 0 0-.85-1.186c.525-.21 1.043-.45 1.554-.717.51-.267 1.112-.6 1.805-1a60.923 60.923 0 0 0 1.893-1.136 17.45 17.45 0 0 0 1.502-1.047c.137.364.325.787.565 1.267.24.48.517.99.83 1.53l7.535 13.054a6.1 6.1 0 0 1 .46.94.97.97 0 0 1-.036.756c-.115.25-.347.527-.698.832-.35.304-.864.688-1.54 1.15a3.186 3.186 0 0 0-.647-.858 4.97 4.97 0 0 0-1.038-.717 13.81 13.81 0 0 0 1.096-.55c.264-.152.45-.295.555-.43a.502.502 0 0 0 .108-.437 2.097 2.097 0 0 0-.243-.566l-2.172-3.762-3.47 2.004zm-1.954 7.223a6.16 6.16 0 0 0-1.466-.69 6.537 6.537 0 0 0-1.563-.332l.69-1.59a14.604 14.604 0 0 1 3.05.817l-.71 1.794zm-4.033-.027a2.137 2.137 0 0 0-.287.51 6.12 6.12 0 0 0-.26.872 23.78 23.78 0 0 0-.283 1.452c-.1.594-.225 1.34-.37 2.237a3.37 3.37 0 0 0-.92-.078 5.34 5.34 0 0 0-1.096.19 8.492 8.492 0 0 0 .812-2.41c.15-.843.175-1.782.077-2.816.39.034.75.034 1.08 0a8.61 8.61 0 0 0 1.06-.182c.14-.044.227-.04.26.017.03.056.007.126-.074.21zm-17.506-5.745c.68-.392 1.22-.72 1.624-.98.405-.26.798-.538 1.182-.834l1.044 1.81c-.426.19-.86.4-1.3.626a40.64 40.64 0 0 0-1.66.917l5.015 8.688c.21.36.354.684.435.97.082.285.043.584-.118.9-.16.313-.468.676-.924 1.086-.455.41-1.11.918-1.962 1.52a10.17 10.17 0 0 0-.84-.83 7.863 7.863 0 0 0-1.12-.836 20.7 20.7 0 0 0 1.457-.813c.36-.226.625-.43.797-.612.172-.183.262-.346.27-.49a.783.783 0 0 0-.117-.444l-4.68-8.105-4.448 2.568c-.846.488-1.512.886-2 1.195-.485.31-.936.6-1.35.877l-1.03-1.788c.236-.1.472-.204.706-.31.234-.108.484-.234.75-.38a93.69 93.69 0 0 0 2.035-1.132l4.45-2.568a106.39 106.39 0 0 0-1.3-2.202c-.33-.54-.576-.92-.74-1.138.35-.13.72-.29 1.105-.486.387-.194.696-.378.93-.55.192-.147.346-.176.462-.086.117.09.133.205.048.346a.79.79 0 0 0-.08.56c.044.186.098.335.162.446l1.2 2.08zm-1.79 11.537a25.633 25.633 0 0 0-1.934-1.475 35.97 35.97 0 0 0-2.03-1.31l1.267-1.644a38.25 38.25 0 0 1 2.034 1.195c.68.428 1.346.9 1.993 1.412l-1.33 1.822zm-12.53-7.01c.706.293 1.41.608 2.11.942.702.334 1.376.693 2.022 1.078l-1.13 2.12a56.81 56.81 0 0 0-2.01-1.152 41.097 41.097 0 0 0-2.06-1.044l1.067-1.945zM63 118.25c30.514 0 55.25-24.736 55.25-55.25S93.514 7.75 63 7.75 7.75 32.486 7.75 63 32.486 118.25 63 118.25zm-2.237-47.53c.262-.058.562-.097.9-.118.34-.02.753-.04 1.24-.063.52-.025 1.176-.163 1.964-.415.788-.25 1.72-.646 2.794-1.184 1.077-.536 2.303-1.235 3.682-2.096a87.9 87.9 0 0 0 4.634-3.133 10.2 10.2 0 0 0 .24 1.4c.098.378.23.74.394 1.09a321.96 321.96 0 0 1-4.068 2.362 69.403 69.403 0 0 1-3.052 1.65c-.88.445-1.643.802-2.29 1.074s-1.236.483-1.768.633c-.533.15-1.03.256-1.492.32-.462.063-.954.107-1.476.13-.62.046-1.087.126-1.4.24-.31.117-.536.344-.674.682-.123.33-.22.74-.286 1.232a18.89 18.89 0 0 0-.144 1.62 7.14 7.14 0 0 0-1.164-.31 9.118 9.118 0 0 0-1.23-.136c.132-.575.256-1.07.374-1.49.118-.42.23-.785.338-1.096.106-.31.212-.575.318-.793.105-.22.214-.407.326-.564l-3.66-6.34c-.582.337-1.08.634-1.495.892-.415.257-.75.498-1.01.722l-.972-1.684c.293-.132.648-.3 1.066-.505.42-.203.83-.42 1.23-.653a31.8 31.8 0 0 0 1.27-.775c.433-.277.775-.516 1.028-.718.14.4.292.778.46 1.134.17.355.413.81.733 1.364l3.193 5.53zm-15.907-.43l-2.712-4.7-5.425 3.133c-1.456.84-2.783 1.63-3.983 2.368-1.2.74-2.125 1.344-2.778 1.813l-1.237-2.14c.307-.14.708-.335 1.202-.583.494-.25 1.055-.54 1.684-.876a143.593 143.593 0 0 0 4.375-2.429 153.71 153.71 0 0 0 4.442-2.648c1.175-.734 2.054-1.315 2.638-1.745.15.357.367.813.652 1.37a42.88 42.88 0 0 0 1.05 1.915l1.848 3.2a32.46 32.46 0 0 0 1.93 2.96l-2.057 1.188-.72-1.247-9.395 5.424 3.072 5.32c.224.39.415.68.574.875.158.195.345.304.562.327.216.023.5-.045.853-.202.353-.157.838-.405 1.455-.743.876-.47 1.734-.942 2.577-1.42a68.054 68.054 0 0 0 2.465-1.465c.754-.453 1.335-.84 1.743-1.158.407-.318.686-.66.836-1.023.15-.364.185-.81.104-1.334a26.6 26.6 0 0 0-.45-2.124c.843.437 1.734.523 2.67.26.206 1.026.324 1.854.354 2.483.03.628-.083 1.184-.34 1.665-.258.48-.698.943-1.32 1.386-.623.443-1.495.988-2.617 1.636l-2.545 1.47c-.908.524-1.758.996-2.55 1.417-1.063.558-1.902.97-2.517 1.23-.615.264-1.123.368-1.524.313-.402-.055-.75-.274-1.045-.657-.297-.385-.652-.937-1.068-1.658l-3.444-5.965a27.726 27.726 0 0 0-1.155-1.855c-.337-.49-.602-.835-.793-1.04.37-.157.762-.342 1.176-.553.414-.212.79-.425 1.13-.64.185-.125.32-.144.41-.056.087.088.085.214-.005.377a.624.624 0 0 0-.105.394c.015.12.082.286.202.494l.384.665 9.396-5.424zM10.402 63c0-29.05 23.55-52.598 52.598-52.598 29.05 0 52.598 23.55 52.598 52.598 0 29.05-23.55 52.598-52.598 52.598-29.05 0-52.598-23.55-52.598-52.598z"></path></symbol>
</defs> </defs>
</svg> </svg>
</template> </template>
\ No newline at end of file
<script>
export default {
}
</script>
<style lang="scss">
</style>
<template> <template>
<div class="wrapper" :class="{active:isScroll}"> <div class="wrapper" :class="{active:isScroll}">
<!-- <div class="status-bar"></div> --> <!-- <div class="status-bar"></div> -->
<div class="top-header" :class="{active:isScroll}"> <div class="top-header" :class="{active:isScroll}">
<div class="content left-icon" @click="goBack()"> <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
<img v-if="isScroll" border="0" src="https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/left-icon.png" alt=""> v-if="!isScroll"
</div> border="0"
<div v-if="isScroll && isJSJ" class="content title" :class="{active:isScroll}">讲师集</div> src="https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/left-icon-white.png"
<div v-if="isScroll && !isJSJ" class="content title" :class="{active:isScroll}">云鹊医讲师</div> alt
<!-- <div class="content right-icon" @click="share()"> >
<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-white.png" alt="">
<img v-if="isScroll" border="0" src="https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/right-icon.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>
</div> </div>
</div>
</template> </template>
<script> <script>
import {teacher_back} from '../../utils/buryingPoint.js'; import { teacher_back } from "../../utils/buryingPoint.js";
// import {shareUrl} from '@/utils/index' // import {shareUrl} from '@/utils/index'
import {shareUrl} from '../../utils/index.js' import { shareUrl } from "../../utils/index.js";
export default { export default {
name:'MyHeader', name: "MyHeader",
props:{ props: {
isOpacity:{ isOpacity: {
type:Boolean, type: Boolean,
default:true 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: { isScroll: {
topTitle2() { type: Boolean,
return this.topTitle default: false
}
}, },
mounted(){ isShare: {
type: Boolean,
default: true
}, },
methods:{ doctorId: {
// backPre(){ type: String,
// if(this.backMethod === 'inner') { default: ""
// this.$router.go(-1) },
// } else { backMethod: {
// rocNative.goBack() type: String,
// } default: "native"
// }, },
goBack(){ isJSJ: {
if(this.backMethod === 'inner') { type: Boolean,
this.$router.go(-1) default: true
} 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> computed: {
<style lang="scss" scoped> topTitle2() {
@import '../../style/mixin'; return this.topTitle;
.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; mounted() {},
// background-color:rgba(0,0,0,0.84); methods: {
// background-color:rgba(255,255,255,0.34) 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> </style>
\ No newline at end of file
<template> <template>
<section class="back-top"> <section class="back-top">
<div class="back-btn" @click="backTop"> <div class="back-btn" @click="backTop">
<img src="../../images/backTop.png"/> <img src="../../images//backTop.png">
</div> </div>
</section>
</section>
</template> </template>
<script> <script>
export default { export default {
data(){ data() {
return{ return {
objPoint:{} objPoint: {}
} };
}, },
props:{ props: {
burialPoint:{ burialPoint: {
default:'', default: "",
type:String 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;
}
}
},
} }
},
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> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import '../../style/mixin'; @import "../../style/mixin";
.back-btn{ .back-btn {
position: fixed; position: fixed;
width: px2rem(35px); width: px2rem(35px);
height: px2rem(35px); height: px2rem(35px);
right: px2rem(15px); right: px2rem(15px);
z-index: 100; z-index: 100;
bottom: px2rem(80px);; bottom: px2rem(80px);
img{ img {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: block; display: block;
} }
} }
</style> </style>
\ No newline at end of file
<template> <template>
<div> <div>
<back-header :isScroll="isScroll" :backMethod="backMethod" :isJSJ="isJSJ"></back-header> <back-header :isScroll="isScroll" :backMethod="backMethod" :isJSJ="isJSJ"></back-header>
<div class="teach-top"> <div class="teach-top">
<!-- <div class="teach-top" :class="{'pt150': isScroll}"> --> <!-- <div class="teach-top" :class="{'pt150': isScroll}"> -->
<!-- <div class="back" v-if="isScroll" @click="backPre" style="flex-direction:row;width:100%;"> <!-- <div class="back" v-if="isScroll" @click="backPre" style="flex-direction:row;width:100%;">
<img src="../../images/left-icon.png"> <img src="../../images//left-icon.png">
<img src="https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/left-icon.png"> <img src="https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/left-icon.png">
<span style="padding-bottom:10px;">dddd</span> <span style="padding-bottom:10px;">dddd</span>
</div> --> </div>-->
<!-- <TopNav :bgColor="bgColor" :title="navTitle" :isNavFix="isNavFix" :burialPoint="pointStyle"></TopNav> --> <!-- <TopNav :bgColor="bgColor" :title="navTitle" :isNavFix="isNavFix" :burialPoint="pointStyle"></TopNav> -->
<div class="tc title">{{parmObj}}</div> <div class="tc title">{{parmObj}}</div>
<div class="tc count" v-if="isShowCount">{{studyCount.toLocaleString()}}人学习&nbsp;&nbsp;&nbsp;&nbsp;{{followCount.toLocaleString()}}人关注</div> <div
class="tc count"
v-if="isShowCount"
>{{studyCount.toLocaleString()}}人学习&nbsp;&nbsp;&nbsp;&nbsp;{{followCount.toLocaleString()}}人关注</div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
// import BackHeader from '../../components/teachers/back-header'; import BackHeader from "../../components/teacher/back-header";
import BackHeader from '../../components/teacher/back-header';
export default { export default {
data () { data() {
return { return {
bgColor:'#fff', bgColor: "#fff",
parmObj:'' parmObj: ""
} };
},
components: {
BackHeader
}, },
components:{ props: {
BackHeader isShowCount: {
default: false,
type: Boolean
}, },
props:{ followCount: {
isShowCount: { type: Number,
default:false, default: 0
type:Boolean },
}, studyCount: {
followCount: { type: Number,
type:Number, default: 0
default:0 },
}, statusBarHeight: {
studyCount: { type: Number,
type:Number, default: 0
default:0 },
}, isScroll: {
statusBarHeight: { type: Boolean,
type:Number, default: false
default:0 },
}, backMethod: {
isScroll:{ type: String,
type: Boolean, default: "native"
default: false },
}, isJSJ: {
backMethod: { type: Boolean,
type: String, default: true
default: 'native' }
},
isJSJ: {
type: Boolean,
default: true
}
}, },
mounted(){ mounted() {
this.parmObj = this.isShowCount ? '讲师集' : '云鹊医讲师' this.parmObj = this.isShowCount ? "讲师集" : "云鹊医讲师";
}, },
methods: { methods: {
backPre(){ backPre() {
if(this.backMethod === 'inner') { if (this.backMethod === "inner") {
this.$router.go(-1) this.$router.go(-1);
} else { } else {
rocNative.goBack() rocNative.goBack();
} }
}, }
} }
} };
</script> </script>
<!-- Add "scoped" attribute to limit CSS to this component only --> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped> <style lang="scss" scoped>
@import '../../style/mixin.scss'; @import "../../style/mixin.scss";
@import '../../style/global.scss'; @import "../../style/global.scss";
.pt150 { .pt150 {
margin-top: px2rem(150px) margin-top: px2rem(150px);
} }
.teach-top{ .teach-top {
width: 100%; width: 100%;
height: px2rem(185px); height: px2rem(185px);
@include bis('../../images/headerTop.png'); @include bis("../../images//headerTop.png");
.tc{ .tc {
text-align: center; text-align: center;
} }
.back{ .back {
position: fixed; position: fixed;
z-index: 110; z-index: 110;
left:px2rem(18px); left: px2rem(18px);
top: px2rem(25px); top: px2rem(25px);
display: inline-block; display: inline-block;
width: px2rem(50px); width: px2rem(50px);
height: px2rem(50px); height: px2rem(50px);
img{ img {
width: px2rem(25px); width: px2rem(25px);
height: px2rem(25px); height: px2rem(25px);
} }
} }
.title{ .title {
font-size: px2rem(25px); font-size: px2rem(25px);
color: #fff; color: #fff;
padding: px2rem(55px) 0 px2rem(8px) 0; padding: px2rem(55px) 0 px2rem(8px) 0;
font-weight: 500 font-weight: 500;
} }
.count{ .count {
font-size: px2rem(15px); font-size: px2rem(15px);
line-height: px2rem(21px); line-height: px2rem(21px);
color: #fff; color: #fff;
......
<template> <template>
<section :class="isNavFix ? 'nav-top fixed' : 'nav-top'"> <section :class="isNavFix ? 'nav-top fixed' : 'nav-top'">
<div class="nav-part" :style="'background:'+bgColor"> <div class="nav-part" :style="'background:'+bgColor">
<div class="nav-title">
<div class="nav-title"> <span class="nav-back" @click="goBack">
<span class="nav-back" @click="goBack"> <img src="https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/left-icon.png">
<img src="https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/left-icon.png"/> <!-- <img class="nav-back" src="../../images//grey-throw.png"/> -->
<!-- <img class="nav-back" src="../../images/grey-throw.png"/> --> </span>
</span> <!-- <span class="back" @click="goBack">
<!-- <span class="back" @click="goBack"> <img src="../../images//left-icon.png">
<img src="../../images/left-icon.png"> </span>-->
</span> --> {{title}}
<!-- <span class="nav-share" @click="goShare">
{{title}} <img src="../../images//Shape1@2x.png"/>
<!-- <span class="nav-share" @click="goShare"> </span>-->
<img src="../../images/Shape1@2x.png"/> </div>
</span> --> </div>
</div> </section>
</div>
</section>
</template> </template>
<script> <script>
export default { export default {
data(){ data() {
return{ return {
// title:'测试', // title:'测试',
content:'', content: "",
shareImageUrl:'', shareImageUrl: ""
} };
}, },
props:{ props: {
bgColor:{//背景色 bgColor: {
type:String, //背景色
default:'' type: String,
}, default: ""
title:{//标题 },
type:String, title: {
default:'暂无数据' //标题
}, type: String,
isNavFix:{//是否fix定位 default: "暂无数据"
type:Boolean, },
default:true isNavFix: {
}, //是否fix定位
burialPoint:{ type: Boolean,
default:'', default: true
type:String },
}, burialPoint: {
backMethod: { default: "",
type: String, type: String
default: 'native' // inner native },
} backMethod: {
}, type: String,
mounted(){ default: "native" // inner native
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> mounted() {
@import '../../style/mixin'; if (this.burialPoint == "activity") {
.back{ this.objPoint = {
position: absolute; menuLevel: 2,
left:px2rem(18px); menuFromCode: "m_home",
top: px2rem(25px); menuCode: "m_content_list",
display: inline-block; functionCode: "f_activity",
width: px2rem(50px); actionCode: "c_last"
height: px2rem(50px); };
img {
width: px2rem(25px);
height: px2rem(25px);
}
} }
.nav-top{ },
height: px2rem(65px);
methods: {
background: #fff; //返回
color: #333; goBack() {
position: relative; if (this.burialPoint == "activity") {
z-index: 109; this.pageBurialPoin(this.objPoint);
.nav-back{ }
display: inline-block; if (this.backMethod === "inner") {
position: absolute; this.$router.back(-1);
left: px2rem(16px);; } else {
top: 0; rocNative.goBack();
height: px2rem(25px); }
width: px2rem(25px); //rocNative.backPreviousPage();
// -ms-transform: translate(180deg); },
// -webkit-transform: (180deg); //分享
// transform: rotate(180deg); goShare() {
} let url = location.hef,
img{ _this = this;
display: block; rocNative.shareWechat({
width: 100%; url: url,
height: 100% title: _this.title,
} content: _this.content,
.nav-icon{ shareImageUrl: _this.shareImageUrl
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; </script>
top:0; <style lang="scss" scoped>
left: 0; @import "../../style/mixin";
.back {
border-bottom: 1px solid #E7E7E7; position: absolute;
left: px2rem(18px);
/* height: px2rem(25px);*/ 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> </style>
\ No newline at end of file
src/images/left-icon.png

250 字节 | W: | H:

src/images/left-icon.png

181 字节 | W: | H:

src/images/left-icon.png
src/images/left-icon.png
src/images/left-icon.png
src/images/left-icon.png
  • 2-up
  • Swipe
  • Onion skin
...@@ -7,9 +7,7 @@ const mixins = require('@/utils/mixins'); ...@@ -7,9 +7,7 @@ const mixins = require('@/utils/mixins');
import '@/utils/rem' // 引入自适应 import '@/utils/rem' // 引入自适应
import '@/utils/yqyServerRegister' // 移动端服务 import '@/utils/yqyServerRegister' // 移动端服务
import FastClick from 'fastclick' import FastClick from 'fastclick'
// import Logger from './plugins/logger' // 日志插件 import vueFilters from '@/utils/filter'
// import Swiper from './plugins/swiper.min.js'
// 引入Mint // 引入Mint
import Mint from 'mint-ui' import Mint from 'mint-ui'
...@@ -23,21 +21,17 @@ Vue.use(Mint) ...@@ -23,21 +21,17 @@ Vue.use(Mint)
import VueLazyload from 'vue-lazyload' import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload, { Vue.use(VueLazyload, {
preLoad: 3, preLoad: 3,
// loading: 'images/change.png', // loading: './images//change.png',
// error: 'https://file.yunqueyi.com/File/course_doctor/2018-11/20/web_454.png', // error: 'https://file.yunqueyi.com/File/course_doctor/2018-11/20/web_454.png',
error: require('./images/error.png'), error: require('./images//error.png'),
attempt: 1 attempt: 1
// lazyComponent: true // lazyComponent: true
}) })
Vue.filter('yLocalString', function(value){ // 注册所有公用过滤器
var b = parseInt(value).toString(); for(let key in vueFilters) {
if (b === 'NaN') return 0; Vue.filter(key, vueFilters[key])
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(",");
})
if ('addEventListener' in document) { if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
......
import { formatTime } from './index' import { formatTime } from './index'
const vueFilter = { const vueFilter = {
// 通用状态过滤器
formatStatus: function(value) {
return !value ? '正常' : '停用'
},
formatNumber: function(num, precision, separator) { // 将数字转换成带千分位数字
formatNumber: function (num, precision, separator) {
var parts; var parts;
if (!isNaN(parseFloat(num)) && isFinite(num)) { if (!isNaN(parseFloat(num)) && isFinite(num)) {
num = Number(num); num = Number(num);
num = (typeof precision !== 'undefined' ? num.toFixed(precision) : num).toString(); num = (typeof precision !== 'undefined' ? num.toFixed(precision) : num).toString();
parts = num.split('.'); parts = num.split('.');
parts[0] = parts[0].toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1' + (separator || ',')); parts[0] = parts[0].toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1' + (separator || ','));
return parts.join('.'); return parts.join('.');
} }
return ''; return '';
} },
// 将数字转换成带千分位数字
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(",");
}
} }
export default vueFilter export default vueFilter
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
<img v-lazy="item.imageUrl" :key="item.imageUrl"> <img v-lazy="item.imageUrl" :key="item.imageUrl">
<span class="tag" v-show="item.structureName">{{item.structureName}}</span> <span class="tag" v-show="item.structureName">{{item.structureName}}</span>
<span class="line-play" @click.stop="goToPage(item)"> <span class="line-play" @click.stop="goToPage(item)">
<img src="../../images/grey-play.png"> <img src="../../images//grey-play.png">
</span> </span>
</div> </div>
<div class="line-name"> <div class="line-name">
...@@ -52,8 +52,8 @@ ...@@ -52,8 +52,8 @@
<div class="teach-title plr15">课程教学</div> <div class="teach-title plr15">课程教学</div>
<div class="opt-span plr15"> <div class="opt-span plr15">
<span class="" @click="sortFun">学习人数 <span class="" @click="sortFun">学习人数
<img src="../../images/sort-d.png" v-if="dir == 2"> <img src="../../images//sort-d.png" v-if="dir == 2">
<img src="../../images/sort-u.png" v-if="dir == 1"> <img src="../../images//sort-u.png" v-if="dir == 1">
</span> </span>
</div> </div>
<div class="teach-list plr15"> <div class="teach-list plr15">
...@@ -305,7 +305,7 @@ export default { ...@@ -305,7 +305,7 @@ export default {
left: 0; left: 0;
top:-(px2rem(64px)); top:-(px2rem(64px));
z-index: 10; z-index: 10;
@include bis('../../images/detaiBg.png'); @include bis('../../images//detaiBg.png');
.head-img{ .head-img{
width: px2rem(45px); width: px2rem(45px);
height: px2rem(45px); height: px2rem(45px);
...@@ -548,7 +548,7 @@ export default { ...@@ -548,7 +548,7 @@ export default {
} }
.home-header { .home-header {
height: px2rem(185px); height: px2rem(185px);
@include bis('../../images/headerTop.png'); @include bis('../../images//headerTop.png');
.logo_img{ .logo_img{
height: px2rem(85px); height: px2rem(85px);
width: px2rem(345px); width: px2rem(345px);
......
...@@ -68,15 +68,15 @@ export default { ...@@ -68,15 +68,15 @@ export default {
speedSwiper: 300, speedSwiper: 300,
//轮播图默认数据 //轮播图默认数据
listSwiper: [{ listSwiper: [{
"imageUrl": require('../../images/lecturer/750420-1.png') "imageUrl": require('../../images//banner-default.png')
},{ },{
"imageUrl": require('../../images/lecturer/750420-1.png') "imageUrl": require('../../images//banner-default.png')
},{ },{
"imageUrl": require('../../images/lecturer/750420-1.png') "imageUrl": require('../../images//banner-default.png')
},{ },{
"imageUrl": require('../../images/lecturer/750420-1.png') "imageUrl": require('../../images//banner-default.png')
},{ },{
"imageUrl": require('../../images/lecturer/750420-1.png') "imageUrl": require('../../images//banner-default.png')
}], }],
scrollTimer: null, scrollTimer: null,
scrollTop: 0, scrollTop: 0,
...@@ -473,7 +473,7 @@ export default { ...@@ -473,7 +473,7 @@ export default {
// height: px2rem(210px); // height: px2rem(210px);
.swiper{ .swiper{
height: 100%; height: 100%;
/* @include bis('../../../images/552064153@2x.png');*/ /* @include bis('../../../images//lect-bg.png');*/
} }
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册