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

选择

上级 1aabd77c
无法预览此类型文件
<template>
<div :class="searchFix?'header fixed' : 'header' " id="search-top" :style="{height:menuptop}">
<div class="search-menu">
<div class="bgFill" :style="{height:ptop}"></div>
<div class="fixBox">
<div :class="isTransparent?'search-transparent':'bgWhite'" class="search" @click="goSearch">
<span class="input">{{placeholder}}</span>
<img class="search-img" src='../../images/search-white.png'>
</div>
<!-- <div class="header-right" @click="goToPage">
<img v-if="searchFix" class="info" src='../../images/msg1.png'>
<img v-else class="info" src='../../images/msg1.png'>
<div :class="isMax?'num-max':'num-min'" class="info-count fs10" v-show="msgCount>0">{{msgCount>99?'99+':msgCount}}</div>
</div> -->
</div>
</div>
</div>
</template>
<script>
import { jumpSearchUrl } from '@/utils/index'
export default {
data(){
return {
placeholder: '搜索疾病、课程、讲师',
disabled:'disabled',
searchVal:'',
isTransparent: true, //更改颜色 背景
isMax:false,//消息数量是否大于99
count:'',
isShowMsg:true,
ptop:0,
menuptop:0,
popHeight:0
}
},
props:{
msgCount:{
type:String,
default:''
},
statusBarHeight:{
type:Number,
default:0
},
searchFix:{
type:Boolean,
default:false,
}
},
watch:{
// searchFix:function(n){
// if(n){
// alert(this.searchFix)
// }
// }
},
created(){
let _this = this;
window.__getStatusBarHeight = function(parm){
//lert(parm.statusBarHeight)
if(window.__isAndroid){
_this.popHeight = parseInt(parm.statusBarHeight)/2.5
}else{
_this.popHeight = parm.statusBarHeight
}
_this.ptop = _this.popHeight+'px';
_this.menuptop = _this.popHeight+'px'
// alert(parm.statusBarHeight);
}
this.getStatusHight()
},
mounted(){
// this.getStatusHight();
// if(window.__isAndroid){
// this.popHeight = this.statusBarHeight/2
// }else{
// this.popHeight = this.statusBarHeight
// }
// this.count = this.msgCount;
// this.ptop = this.popHeight+7+'px';
// this.menuptop = this.popHeight+7+'px'
// console.log(this.statusBarHeight);
// if(this.msgCount == ''){
// this.isShowMsg = false
// }
// if(this.count>=99){
// this.count += '+';
// this.isMax = true
// }
},
methods: {
getStatusHight(){
rocNative.getStatusBarHeight({
__funcName: '__getStatusBarHeight'
})
},
goSearch(){
let _this = this,
url = jumpSearchUrl;
//alert(url)
let itemData={
"title":"",
"imageUrl":"",
"appModuleInfo":{
"code":"M300",
"type":4,
"name":"wwww",
"paramFlag":1,
"paramList":[
{
"key":"pageUrl",
"value": url,
"type":4,
"seqNo":1
},{
"key":"showTitle",
"value": false,
"type":1,
"seqNo":2
},{
"key":"title",
"value": '',
"type":1,
"seqNo":3
}
]
}
};
rocNative.dispatchEventByModuleCode({
modeCode: itemData.appModuleInfo.code,
jsonString: itemData.appModuleInfo.paramList
})
},
goToPage(){
// alert("000");
this.$emit('setAppMsg',false)
this.pageBurialPoin({
menuLevel:1,
menuCode:'m_home',
functionCode:'f_notification',
actionCode:'c_notification',
})
rocNative.readMessage();
}
},
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '../../style/mixin.scss';
@import '../../style/global.scss';
html,body{
width: px2rem(375px);
height: 100%;
background-color: #F8F8F8;
}
.search-transparent{
background: transparent;
border: 1px solid rgba(255, 255, 255, 1);
color: #fff;
margin: px2rem(8px) 0 0 0;
}
.search-transparent::-webkit-input-placeholder{
color:#fff;
}
.white{
color: #fff;
}
.header-right{
width: px2rem(20px);
height: px2rem(20px);
position: relative;
margin-top:px2rem(13px);
float: right;
img{
width: 100%;
height: 100%;
display: block;
}
}
.bgFill{
background: inherit;
height: 20px;
}
.fs30{
font-size: px2rem(15px);
}
.gxy-study{
margin-right: px2rem(19px);
}
.gxy{
font-size: px2rem(25px);
margin: px2rem(25px) 0 px2rem(11px) 0;
}
.header{
width: 100%;
/*//height: px2rem(50px);*/
position: relative;
}
.fixed {
.search-menu{
position: fixed;
z-index: 110;
top:0;
left: 0;
}
.fixBox{
background: #4CBBA9;
height:px2rem(46px);
padding:0 px2rem(25px);
/* padding-top: px2rem(7px)*/
}
.bgFill{
background: #4CBBA9;
}
.search-transparent::-webkit-input-placeholder{
color:#fff;
}
.search{
border-color:#fff;
}
.info-count{
background: #FB5B52;
color: #fff
}
}
.fixBox{
padding:0 px2rem(25px);
height: px2rem(30px);
/* padding-top: px2rem(7px)*/
}
.search-menu{
width: 100%;
position: absolute;
}
.search{
width: px2rem(290px);
height: px2rem(30px);
border-radius: px2rem(19px);
float: left;
text-align: left;
}
.input{
outline: none;
border: none;
float: left;
font-size: px2rem(13px);
margin: 0 0 0 px2rem(15px);
line-height: px2rem(28px);
width: 80%;
color: #fff;
}
.search-img{
width: px2rem(13px);
height: px2rem(13px);
margin: px2rem(8px) px2rem(10px) 0 0;
float: right;
}
.info-count{
position:absolute;
top: -(px2rem(5px));
left: (px2rem(10px));
/*max-width: px2rem(25px);*/
padding:0 px2rem(3px) 0 px2rem(2px);
height: px2rem(15px);
line-height: px2rem(15px);
border-radius: px2rem(15px);
text-align: center;
font-size:px2rem(12px);
/*font-weight: bold;*/
background-color: #fff;
color: RGBA(53, 134, 126, 1);
}
.num-min{
max-width: px2rem(25px);
min-width: px2rem(15px);
/*padding:0;*/
}
.num-max{
width: auto;
/* background-color: RGBA(251, 91, 82, 1);
color: #fff;*/
}
.hot-tag{
width: 100%;
height: px2rem(150px);
}
.hotTagTitle{
font-size: px2rem(18px);
padding: px2rem(73px) px2rem(15px);
float: left;
background-color: #fff;
}
.cource{
width: 100%;
height: px2rem(350px);
}
.font-title{
font-size: px2rem(18px);
padding: 0 0 px2rem(21px) px2rem(15px);
float: left;
width: 100%;
text-align: left;
}
.title{
font-size: px2rem(16px);
}
.cource-left{
float: left;
padding-left: px2rem(15px);
}
.need-left{
float: left;
padding: 0 0 px2rem(40px) px2rem(15px);
}
.cource-time{
float: left;
}
.cource-img{
width: px2rem(170px);
height: px2rem(96px);
margin-bottom: px2rem(10px);
}
.cource-more{
font-size: px2rem(15px);
color: #999999;
}
.need{
width: 100%;
height: px2rem(325px);
margin-top: px2rem(35px);
}
</style>
<template>
<section>
<article class="group-title">
<section class="group-title-order">
<div @click="selectedType(1)" class="group-title-order-item">
<span>全国</span><img src="../../images/lecturer/select-down.png"/>
</div>
<div @click="selectedType(2)" class="group-title-order-item">
<span>全部等级</span><img src="../../images/lecturer/select-down.png"/>
</div>
<div @click="selectedType(3)" class="group-title-order-item">
<span>全部科室</span><img src="../../images/lecturer/select-down.png"/>
</div>
</section>
</article>
<article class="lect-selection">
<section class="lect-selection-title">
<img src="../../images/lecturer/select-delete.png"/>
<span>选择地区</span>
<span class="no-content"></span>
</section>
<section class="lect-selection-content">
<div class="lect-selection-content-mask"></div>
<!-- 选择地区 -->
<article class="lect-selection-content-region">
</article>
<!-- 选择医院等级 -->
<article class="lect-selection-content-level">
</article>
<!-- 选择医院科室 -->
<article class="lect-selection-content-region">
</article>
</section>
</article>
</section>
</template>
<script>
export default {
data() {
return {
selectedTypeIndex: 1
}
},
props: {
},
computed: {
// ...mapGetters({
// // orderNum: 'orderNum'
// })
},
watch: {
// orderNum(val) {
// this.showOrderIndex = 1
// }
},
methods: {
selectedType(index) {
this.selectedTypeIndex = index
this.$emit('selectedType', index)
},
}
}
</script>
<style lang="scss" scoped>
@import '../../style/mixin.scss';
.lect-selection {
display: flex;
// position: fixed;
// top: 0;
// left: 0;
// right: 0;
// bottom: 0;
// background: #fff;
flex-direction: row;
margin: px2rem(33px) px2rem(15px) px2rem(13px);
&-title {
display: flex;
flex-direction: row;
width: px2rem(325px);
justify-content: space-between;
font-size: px2rem(13px);
img {
position: relative;
top: px2rem(1px);
left: px2rem(1px);
height: px2rem(25px);
width: px2rem(25px);
}
span {
font-size: px2rem(18px);
color: #333;
}
}
}
.group-title {
display: flex;
flex-direction: row;
margin: px2rem(4px) px2rem(25px) px2rem(6px);
&-order {
display: flex;
flex-direction: row;
width: px2rem(325px);
justify-content: space-between;
font-size: px2rem(13px);
&-item {
// display: inline-block;
// position: relative;
span {
font-size: px2rem(15px);
color: #333;
// margin-right: px2rem(30px);
}
img {
position: relative;
top: px2rem(1px);
left: px2rem(1px);
// top: px2rem(2px);
// left: px2rem(51px);
// padding-top: px2rem(10px);
height: px2rem(11px);
width: px2rem(11px);
}
}
}
}
.active {
color: #449284;
}
</style>
<template> <template>
<section> <section>
<article class="group-title"> <article class="group-title">
<article v-show="showOrder" class="group-title-order"> <section class="group-title-order">
<div @click="order(1)" class="group-title-order-item"> <div @click="selectedType(1)" class="group-title-order-item">
<span>全国</span><img src="../../images/lecturer/select-down.png"/> <span>全国</span><img src="../../images/lecturer/select-down.png"/>
</div> </div>
<div @click="order(2)" class="group-title-order-item"> <div @click="selectedType(2)" class="group-title-order-item">
<span>全部等级</span><img src="../../images/lecturer/select-down.png"/> <span>全部等级</span><img src="../../images/lecturer/select-down.png"/>
</div> </div>
<div @click="order(2)" class="group-title-order-item"> <div @click="selectedType(3)" class="group-title-order-item">
<span>全部科室</span><img src="../../images/lecturer/select-down.png"/> <span>全部科室</span><img src="../../images/lecturer/select-down.png"/>
</div> </div>
</section>
</article>
<article class="lect-selection">
<section class="lect-selection-title">
<img src="../../images/lecturer/select-delete.png"/>
<span>选择地区</span>
<span class="no-content"></span>
</section>
<section class="lect-selection-content">
<div class="lect-selection-content-mask"></div>
<!-- 选择地区 -->
<article class="lect-selection-content-region">
</article>
<!-- 选择医院等级 -->
<article class="lect-selection-content-level">
</article>
<!-- 选择医院科室 -->
<article class="lect-selection-content-region">
</article> </article>
</section>
</article> </article>
</section> </section>
</template> </template>
<script> <script>
import { mapGetters } from 'vuex'
export default { export default {
data() { data() {
return { return {
showOrderIndex: 1 selectedTypeIndex: 1
} }
}, },
props: { props: {
groupTitle: {
type: String,
default: '课程'
},
isShowNum: {
type: Boolean,
default: true
},
groupNum: {
type: String,
default: "0"
},
showTitle: {
type: Boolean,
default: true
},
showOrder: {
type: Boolean,
default: true
}
}, },
computed: { computed: {
...mapGetters({ // ...mapGetters({
orderNum: 'orderNum' // // orderNum: 'orderNum'
}) // })
}, },
watch: { watch: {
orderNum(val) { // orderNum(val) {
this.showOrderIndex = 1 // this.showOrderIndex = 1
} // }
}, },
methods: { methods: {
toggle() { selectedType(index) {
this.showTitle = !showTitle this.selectedTypeIndex = index
this.showOrder = !showOrder this.$emit('selectedType', index)
},
order(index) {
this.showOrderIndex = index
this.$emit('order', index)
}, },
// resetShowOrderIndex(){
// this.showOrderIndex = 1
// }
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import '../../style/mixin.scss'; @import '../../style/mixin.scss';
.lect-selection {
display: flex;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #fff;
flex-direction: row;
margin: px2rem(33px) px2rem(15px) px2rem(13px);
&-title {
display: flex;
flex-direction: row;
width: px2rem(325px);
justify-content: space-between;
font-size: px2rem(13px);
img {
position: relative;
top: px2rem(1px);
left: px2rem(1px);
height: px2rem(25px);
width: px2rem(25px);
}
span {
font-size: px2rem(18px);
color: #333;
}
}
}
.group-title { .group-title {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
...@@ -82,54 +107,24 @@ export default { ...@@ -82,54 +107,24 @@ export default {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
width: px2rem(325px); width: px2rem(325px);
// padding: px2rem(10px) 0 px2rem(10px);
justify-content: space-between; justify-content: space-between;
font-size: px2rem(13px); font-size: px2rem(13px);
&-item { &-item {
// display: inline-block;
// position: relative;
span { span {
font-size: px2rem(15px); font-size: px2rem(15px);
color: #333; color: #333;
// margin-right: px2rem(30px);
} }
img { img {
position: relative; position: relative;
top: px2rem(1px); top: px2rem(1px);
left: px2rem(1px); left: px2rem(1px);
// top: px2rem(2px);
// left: px2rem(51px);
// padding-top: px2rem(10px);
height: px2rem(11px); height: px2rem(11px);
width: px2rem(11px); width: px2rem(11px);
} }
} }
} }
.first-name { }
// left: px2rem(63px); .active {
} color: #449284;
.course-num {
left: px2rem(37px);
}
.hot-degree {
left: px2rem(25px);
}
.active {
color: #449284;
}
&-title {
padding: 0 px2rem(15px);
&-main {
margin-right: px2rem(6px);
font-size: px2rem(18px);
font-weight: 500;
color: #28344C;
}
&-sub {
font-size: px2rem(15px);
font-weight: 400;
color: #999;
}
}
} }
</style> </style>
...@@ -16,6 +16,8 @@ ...@@ -16,6 +16,8 @@
</div> </div>
</div> </div>
</div> </div>
</template> </template>
......
<template>
<div class="main-body" ref="wrapper">
<section class="home-header">
<div class="home-topMenu">
<YqyHomeHeader :msgCount="msgCount" :searchFix="searchFix"/>
</div>
<div class="swiper">
<mt-swipe :auto="3000" :speed="speedSwiper" :stopPropagation="prevent">
<mt-swipe-item v-for="(item, index) in listSwiper" :key="index" >
<img :src="item.imageUrl" @click="goLinkByswiper(item)"/>
</mt-swipe-item>
</mt-swipe>
</div>
</section>
<!-- 热门讲师 -->
<YqyHotLecturer/>
<!-- 全部讲师标题 -->
<YqyLecturerTitle/>
<!-- 全部讲师选择 -->
<!-- <YqyLecturerSelect/> -->
<!-- 全部讲师列表 -->
<YqyTeacherList/>
<!--返回顶部-->
<BackTop v-if="isShowBackTop"/>
</div>
</template>
<script>
import { Swipe, SwipeItem} from 'mint-ui';
import {mapState, mapMutations, mapActions} from 'vuex'
import BackTop from '@/homecom/components/common/backTop';
import YqyHomeHeader from '@/homecom/components/business-new/yqy-home-header';
import YqyLecturerTitle from '@/componentsn/business/yqy-lecturer-title';
import YqyLecturerSelect from '@/componentsn/business/yqy-lecturer-select';
import YqyHotLecturer from '@/componentsn/business/yqy-hot-lecturer';
import YqyTeacherList from '@/componentsn/business/yqy-teacher-list'
export default {
data(){
return {
prevent:true,
showNewCorse:false, // 是否显示新内容 默认不显示
isFixed:false,
isShowBackTop: false,
isShowEvluat:false, //是否显示下拉
evaluctObj:{}, //下拉数据
iconList:[], //icon数据
keeponData:{}, //继续学习
isShowKeep:false,
listCategory:[], //专题分类数据
yqDoctorList:[],//云雀名师数据
newsDatalist:[],//最新课程
fiveList:[],//五分钟医学院
adjustList:[],//为您推荐
isBodyPull:false,
speedSwiper:300,
stopPropagation:true,
isIntStyle:'',
listSwiper:[{
"imageUrl": require('../homecom/images/defaults/750420-1.png')
},{
"imageUrl": require('../homecom/images/defaults/750420-1.png')
},{
"imageUrl": require('../homecom/images/defaults/750420-1.png')
},{
"imageUrl": require('../homecom/images/defaults/750420-1.png')
},{
"imageUrl": require('../homecom/images/defaults/750420-1.png')
}],//轮播图数据
scrollTimer:null,
scrollTop:0,
hideNewCourse:true,
updateTotal:0,
msgCount:'10',
userToken:'',
searchFix:false,
statusBarHeight:0,
userMobile:'',
userToken:'',
isHeightFromApp:false,
isFirstPull:true,
updateStr:'',
isRefreshFromBack:false,
isRefrshMsg:false,
isFailSwiper:1,
isFailCatagory1:false,
isFailCatagory2:false,
isFailCatagory3:false,
isFailTeaches:false,
isFailFive:false,
adjustPageNo:1,
lecturerNewId:'',
lecturerAdId:'',
fromAdjustData:[],
}
},
components:{
Swipe,
SwipeItem,
BackTop,
YqyHomeHeader,
YqyLecturerTitle,
YqyLecturerSelect,
YqyHotLecturer,
YqyTeacherList,
},
beforeCreate() {
},
created () {
let _this = this;
_this.initAll()
_this.getUserInfo();
window.__refresh = function(params){
}
window.__getStatusBarHeight = function(parm){
// alert(JSON.stringify(parm))
_this.statusBarHeight = parm.statusBarHeight;
}
// alert("token之前");
window.__getUserInfo = function(parm){
// _this.systemType = parm.systemType;
// _this.appVersion = parm.appVersion;
// _this.token = parm.userToken;
// _this.userToken = parm.userToken;
// _this.userMobile = parm.userMobile;
// _this.initByToken(parm.userToken);
}
_this.getStatusHight()
// _this.initByToken('593F679F62964076AF1C7489DA3343ED');
},
beforeMount() {
},
mounted(){
window.addEventListener('scroll', this.scrollFun);
},
beforeDestroyed(){
window.removeEventListener('scroll', this.scrollFun)
},
watch:{
},
methods:{
// ...mapActions({
// 'setAdjustList': 'setAdjustList'
// }),
initAll(){
this.getSwiper()
this.getYqDoctorData()
},
//获取状态栏高度
getStatusHight(){
rocNative.getStatusBarHeight({
__funcName: '__getStatusBarHeight'
})
},
//获取用户信息及版本号等()
getUserInfo(){
rocNative.getUserInfo({
__funcName: '__getUserInfo'
})
},
//轮播图跳转
goLinkByswiper(itemData){
this.pageBurialPoin({
menuLevel:1,
menuCode:'m_home',
functionCode:'f_banner',
actionCode:'c_banner',
labelId:itemData.id,
labelValue:itemData.name
})
let paramList = this.setEventByModuleCode(itemData);
rocNative.dispatchEventByModuleCode({
modeCode: itemData.appModuleInfo.code,
jsonString: paramList
})
},
//热门讲师
getYqDoctorData(){
let _this = this,
para = {
pageNo:1,
pageSize:10,
setEntry: 'headers'
}
this.GET('contents/HomeLecturer/LecturerInformation', para).then(res => {
if(res.code == '000000'){
_this.yqDoctorList = res.data && res.data.pCourseDoctorModels || []
}
})
},
scrollEndFun(){
let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
// let newCourseTop = document.querySelector('#famus-teacher').offsetTop;
// let fivesTop = document.querySelector('#fiveBoxMenu').offsetTop;
},
scrollFun(){
let scrollTop = document.body.scrollTop || document.documentElement.scrollTop
// var clientHeight = document.querySelector('#famus-teacher').clientHeight;
// this.scrollTimer = setTimeout(this.scrollEndFun, 200);
// if(scrollTop > searchBox && scrollTop < adjustTop){
// console.log(scrollTop,searchBox);
// this.searchFix = true;
// }else{
// this.searchFix = false;
// }
},
// 获取轮播图数据
getSwiper(){
let _this = this,
para = {
category:1,
position:4,
setEntry: 'headers',
data:{
setEntry: 'headers'
}
}
this.GET('contents/HomeColumn/Information', para).then(res => {
if(res.code == '000000'){
_this.listSwiper = res.data.iconColumnInformationModels || [];
}
if( _this.listSwiper.length == 0){
_this.isFailSwiper += 1;
}
_this.isFailSwiper = _this.listSwiper.length == 0 ? 2 : 1 ;
})
},
},
}
</script>
<style>
.swiper .mint-swipe-indicators{
right: 6px;
top:50%;
bottom: inherit;
left:inherit;
width:10px;
text-align: center;
transform: translateX(0%);
transform: translateY(-50%);
}
.swiper .mint-swipe-item img{
width: 100%;
height: 100%;
}
.swiper .mint-swipe-indicator{
width:2px;
height: 8px;
background: #fff;
opacity: 0.4;
float: left;
margin-top:3px;
border-radius: 0;
}
.swiper .is-active{
opacity: 1;
}
.mint-loadmore-top .mint-loadmore-text{font-size: 12px;}
.banner-container.swiper-container-horizontal>.swiper-pagination-bullets{
width: 2px;
left: inherit;
transform: translateY(-50%);
position: absolute;
right: 6px;
top:50%;
}
.banner-container.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{
width: 2px;
height: 7px;
background: #fff;
margin:6px 0 0 0;
float: left;
opacity: 0.4;
}
.banner-container.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet-active{
opacity: 1
}
.banner-pagination{
width: 2px;
z-index: 100;
right: 10px;
top:10px;
position: absolute;
}
.swiper-pagination-bullet{
}
.swiper-slide img{
width: 100%;
height: 100%;
}
</style>
<style lang="scss" scoped>
@import '../style/mixin';
@import '../style/swiper.min.css';
.banner-container{
height: px2rem(210px)
}
.main-body{
position: relative;
}
.box-BG{
width: 100%;
height: 100%;
position: absolute;
top:0;
left: 0;
z-index: 10000
}
.mint-header {
background-color: rgba($color: #000000, $alpha: 0)
}
.font-style {
@include sc(0.6rem, #666);
}
.top-evaluat{
}
@keyframes myPullDown{
from {padding-top: 0;}
to {padding-top:px2rem(225px)}
}
@keyframes myPullUp{
from {padding-top: px2rem(225px);}
to {padding-top:0}
}
.pull-down{
-webkit-animation: myPullDown 1.2s;
animation: myPullDown 1.2s;
padding-top:px2rem(225px)
}
.pull-up{
-webkit-animation: myPullUp 1.2s;
animation: myPullUp 1.2s;
padding-top:0
}
.news-update{
display: block;
position: fixed;
background: #F9F6EF;
right: 0;
bottom: px2rem(140px);
height: px2rem(27px);
padding:0 px2rem(12px);;
line-height: px2rem(27px);
border:1px solid RGBA(162, 129, 60, 0.2);
font-size: px2rem(13px);
box-shadow: 0 px2rem(2px) px2rem(3px) RGBA(202, 168, 97, 0.4);
border-radius: px2rem(14px) 0 0 px2rem(14px);
z-index: 101;
.news-info{
color: #A2813C;
position: relative;
display: inline-block;
i{
position: absolute;
right: -(px2rem(6px));
top:px2rem(4px);
display: inline-block;
width: px2rem(4px);
height: px2rem(4px);
border-radius: 100%;
background: #F47A48
}
}
}
.home-topMenu{
width: 100%;
text-align:center;
top:0;
position: absolute;
z-index: 10;
}
.home-header {
height: px2rem(234px); // banner图片变高了
// height: px2rem(210px);
.swiper{
height: 100%;
/* @include bis('../../images/552064153@2x.png');*/
}
.logo_img{
height: px2rem(85px);
width: px2rem(345px);
text-align: center;
}
}
.home-body{
background: #fff
}
.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%;
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;
}
}
</style>
...@@ -16,10 +16,186 @@ ...@@ -16,10 +16,186 @@
<YqyHotLecturer/> <YqyHotLecturer/>
<!-- 全部讲师标题 --> <!-- 全部讲师标题 -->
<YqyLecturerTitle/> <YqyLecturerTitle/>
<!-- 全部讲师选择 --> <!-- 全部讲师选择 -->
<YqyLecturerSelect/> <!-- <YqyLecturerSelect/> -->
<section>
<article class="lect-selection">
<div class="lect-selection-content-mask"></div>
<section class="lect-selection-title">
<img src="../images/lecturer/select-delete.png"/>
<span>选择地区</span>
<span class="no-content"></span>
</section>
<article class="group-title">
<section class="group-title-order">
<div @click="selectedType(1)" class="group-title-order-item">
<span>全国</span><img src="../images/lecturer/select-down.png"/>
</div>
<div @click="selectedType(2)" class="group-title-order-item">
<span>全部等级</span><img src="../images/lecturer/select-down.png"/>
</div>
<div @click="selectedType(3)" class="group-title-order-item">
<span>全部科室</span><img src="../images/lecturer/select-down.png"/>
</div>
</section>
</article>
<section class="lect-selection-content">
<!-- 选择地区 -->
<article class="lect-selection-content-region" v-show="true">
<table style="width: 600px;">
<tr>
<td style="width: 33%">
<table>
<tr>
<td>111</td>
</tr>
<tr>
<td>111</td>
</tr>
<tr>
<td>111</td>
</tr>
<tr>
<td>111</td>
</tr>
<tr>
<td>111</td>
</tr>
<tr>
<td>111</td>
</tr>
<tr>
<td>111</td>
</tr>
<tr>
<td>111</td>
</tr>
<tr>
<td>111</td>
</tr>
<tr>
<td>111</td>
</tr>
<tr>
<td>111</td>
</tr>
<tr>
<td>111</td>
</tr>
<tr>
<td>111</td>
</tr>
<tr>
<td>111</td>
</tr>
<tr>
<td>111</td>
</tr>
<tr>
<td>111</td>
</tr>
<tr>
<td>111</td>
</tr>
<tr>
<td>111</td>
</tr>
<tr>
<td>111</td>
</tr>
<tr>
<td>111</td>
</tr>
</table>
</td>
<td style="width: 60%">
<table>
<tr>
<td>222</td>
</tr>
<tr>
<td>222</td>
</tr>
<tr>
<td>222</td>
</tr>
<tr>
<td>222</td>
</tr>
<tr>
<td>222</td>
</tr>
<tr>
<td>222</td>
</tr>
<tr>
<td>222</td>
</tr>
<tr>
<td>222</td>
</tr>
<tr>
<td>222</td>
</tr>
<tr>
<td>222</td>
</tr>
<tr>
<td>222</td>
</tr>
<tr>
<td>222</td>
</tr>
<tr>
<td>222</td>
</tr>
<tr>
<td>222</td>
</tr>
<tr>
<td>222</td>
</tr>
<tr>
<td>222</td>
</tr>
<tr>
<td>222</td>
</tr>
<tr>
<td>222</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- <article class="lect-selection-content-1">
<section class="lect-selection-content-title">
<span>北京</span>
<span class="no-content">五十环</span>
<img src="../images/lecturer/select-delete.png"/>
</section>
</article> -->
</article>
<!-- 选择医院等级 -->
<article class="lect-selection-content-level" v-show="false">
eee
</article>
<!-- 选择医院科室 -->
<article class="lect-selection-content-region" v-show="false">
rrr
</article>
</section>
</article>
</section>
<!-- 全部讲师列表 --> <!-- 全部讲师列表 -->
<YqyTeacherList/> <!-- <YqyTeacherList/> -->
<!--返回顶部--> <!--返回顶部-->
<BackTop v-if="isShowBackTop"/> <BackTop v-if="isShowBackTop"/>
...@@ -32,7 +208,7 @@ ...@@ -32,7 +208,7 @@
import { Swipe, SwipeItem} from 'mint-ui'; import { Swipe, SwipeItem} from 'mint-ui';
import {mapState, mapMutations, mapActions} from 'vuex' import {mapState, mapMutations, mapActions} from 'vuex'
import BackTop from '@/homecom/components/common/backTop'; import BackTop from '@/homecom/components/common/backTop';
import YqyHomeHeader from '@/homecom/components/business-new/yqy-home-header'; import YqyHomeHeader from '@/componentsn/business/yqy-home-header';
import YqyLecturerTitle from '@/componentsn/business/yqy-lecturer-title'; import YqyLecturerTitle from '@/componentsn/business/yqy-lecturer-title';
import YqyLecturerSelect from '@/componentsn/business/yqy-lecturer-select'; import YqyLecturerSelect from '@/componentsn/business/yqy-lecturer-select';
import YqyHotLecturer from '@/componentsn/business/yqy-hot-lecturer'; import YqyHotLecturer from '@/componentsn/business/yqy-hot-lecturer';
...@@ -40,6 +216,7 @@ import YqyTeacherList from '@/componentsn/business/yqy-teacher-list' ...@@ -40,6 +216,7 @@ import YqyTeacherList from '@/componentsn/business/yqy-teacher-list'
export default { export default {
data(){ data(){
return { return {
selectedTypeIndex: 1,
prevent:true, prevent:true,
showNewCorse:false, // 是否显示新内容 默认不显示 showNewCorse:false, // 是否显示新内容 默认不显示
isFixed:false, isFixed:false,
...@@ -155,6 +332,10 @@ export default { ...@@ -155,6 +332,10 @@ export default {
// ...mapActions({ // ...mapActions({
// 'setAdjustList': 'setAdjustList' // 'setAdjustList': 'setAdjustList'
// }), // }),
selectedType(index) {
this.selectedTypeIndex = index
// this.$emit('selectedType', index)
},
initAll(){ initAll(){
this.getSwiper() this.getSwiper()
...@@ -458,3 +639,108 @@ export default { ...@@ -458,3 +639,108 @@ export default {
} }
</style> </style>
<style lang="scss" scoped>
@import '../style/mixin.scss';
.lect-selection-content {
display: block;
position: absolute;
top: px2rem(150px);
z-index: 3;
background: #fff;
flex-direction: row;
&-title {
display: block;
flex-direction: row;
padding: px2rem(33px) px2rem(15px) px2rem(13px);
width: px2rem(375px);
justify-content: space-between;
font-size: px2rem(13px);
img {
position: relative;
top: px2rem(1px);
left: px2rem(1px);
height: px2rem(25px);
width: px2rem(25px);
}
span {
height: px2rem(18px);
font-size: px2rem(18px);
color: #333;
}
}
&-content-1 {
position: absolute;
top: px2rem(140px);
}
}
.lect-selection {
display: flex;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
background: #fff;
flex-direction: row;
&-title {
display: flex;
flex-direction: row;
padding: px2rem(33px) px2rem(15px) px2rem(13px);
width: px2rem(375px);
justify-content: space-between;
font-size: px2rem(13px);
img {
position: relative;
top: px2rem(1px);
left: px2rem(1px);
height: px2rem(25px);
width: px2rem(25px);
}
span {
height: px2rem(18px);
font-size: px2rem(18px);
color: #333;
}
}
&-content {
position: absolute;
top: px2rem(140px);
}
}
.group-title {
position: absolute;
top: px2rem(80px);
z-index: 2;
display: flex;
flex-direction: row;
margin: px2rem(4px) px2rem(25px) px2rem(6px);
&-order {
display: flex;
flex-direction: row;
width: px2rem(325px);
justify-content: space-between;
font-size: px2rem(13px);
&-item {
span {
font-size: px2rem(15px);
color: #333;
}
img {
position: relative;
top: px2rem(1px);
left: px2rem(1px);
height: px2rem(11px);
width: px2rem(11px);
}
}
}
}
.active {
color: #449284;
}
</style>
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册