Skip to content

P
pica.cloud.web-education-admin
提交 d26cdd04 编写于 作者: 杨广俊's avatar 杨广俊
浏览文件
操作

讲师集页面开发

上级 5d74c46b
展开全部 隐藏空白字符变更
内嵌 并排
正在显示 包含 923 行增加 和 91 行删除
src/componentsn/business/group-title.1.vue 0 → 100644
浏览文件 @ d26cdd04
<template>
<section>
<article class="group-title-title">
<span>{{groupTitle}}</span>
</article>
<article class="group-title">
<article v-show="showOrder" class="group-title-order">
<div @click="order(1)" class="group-title-order-item">
<span :class="{'active': showOrderIndex === 1}">按名首字母</span>
<img class="first-name" src="../../images/sousuo/sort-down.png" v-show="showOrderIndex === 1"/>
</div>
<div @click="order(2)" class="group-title-order-item">
<span :class="{'active': showOrderIndex === 2}">最新课程</span>
<img src="../../images/sousuo/sort-down.png" v-show="showOrderIndex === 2"/>
</div>
<div @click="order(3)" class="group-title-order-item">
<span :class="{'active': showOrderIndex === 3}">资源数</span>
<img class="course-num" src="../../images/sousuo/sort-down.png" v-show="showOrderIndex === 3"/>
</div>
<div @click="order(4)" class="group-title-order-item">
<span :class="{'active': showOrderIndex === 4}">热门</span>
<img class="hot-degree" src="../../images/sousuo/sort-down.png" v-show="showOrderIndex === 4"/>
</div>
</article>
</article>
</section>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
data() {
return {
showOrderIndex: 1
}
},
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: {
...mapGetters({
orderNum: 'orderNum'
})
},
watch: {
orderNum(val) {
this.showOrderIndex = 1
}
},
methods: {
toggle() {
this.showTitle = !showTitle
this.showOrder = !showOrder
},
order(index) {
this.showOrderIndex = index
this.$emit('order', index)
},
// resetShowOrderIndex(){
// this.showOrderIndex = 1
// }
}
}
</script>
<style lang="scss" scoped>
@import '../../style/mixin.scss';
.group-title {
margin-left: px2rem(15px);
display: flex;
flex-direction: row;
&-order {
display: flex;
flex-direction: row;
padding: px2rem(10px) 0 px2rem(10px);
font-size: px2rem(13px);
&-item {
position: relative;
span {
margin-right: px2rem(30px);
}
img {
position: absolute;
top: px2rem(2px);
left: px2rem(51px);
height: px2rem(15px);
width: px2rem(15px);
}
}
}
.first-name {
left: px2rem(63px);
}
.course-num {
left: px2rem(37px);
}
.hot-degree {
left: px2rem(25px);
}
.active {
color: #449284;
}
&-title {
padding: 0 px2rem(15px);
span {
font-size: px2rem(18px);
font-weight: 500;
color: #28344C;
}
}
}
</style>
src/componentsn/business/group-title.vue 0 → 100644
浏览文件 @ d26cdd04
<template>
<section>
<article class="group-title-title">
<span>{{groupTitle}}</span>
</article>
<article>
<select name="regionName" id="1">
<option value="1">上海</option>
<option value="2">北京</option>
<option value="3">广州</option>
</select>
</article>
<article class="group-title">
<article v-show="showOrder" class="group-title-order">
<div @click="order(1)" class="group-title-order-item">
<span :class="{'active': showOrderIndex === 1}">按名首字母</span>
<img class="first-name" src="../../images/sousuo/sort-down.png" v-show="showOrderIndex === 1"/>
</div>
<div @click="order(2)" class="group-title-order-item">
<span :class="{'active': showOrderIndex === 2}">最新课程</span>
<img src="../../images/sousuo/sort-down.png" v-show="showOrderIndex === 2"/>
</div>
<div @click="order(3)" class="group-title-order-item">
<span :class="{'active': showOrderIndex === 3}">资源数</span>
<img class="course-num" src="../../images/sousuo/sort-down.png" v-show="showOrderIndex === 3"/>
</div>
<div @click="order(4)" class="group-title-order-item">
<span :class="{'active': showOrderIndex === 4}">热门</span>
<img class="hot-degree" src="../../images/sousuo/sort-down.png" v-show="showOrderIndex === 4"/>
</div>
</article>
</article>
</section>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
data() {
return {
showOrderIndex: 1
}
},
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: {
...mapGetters({
orderNum: 'orderNum'
})
},
watch: {
orderNum(val) {
this.showOrderIndex = 1
}
},
methods: {
toggle() {
this.showTitle = !showTitle
this.showOrder = !showOrder
},
order(index) {
this.showOrderIndex = index
this.$emit('order', index)
},
// resetShowOrderIndex(){
// this.showOrderIndex = 1
// }
}
}
</script>
<style lang="scss" scoped>
@import '../../style/mixin.scss';
.group-title {
margin-left: px2rem(15px);
display: flex;
flex-direction: row;
&-order {
display: flex;
flex-direction: row;
padding: px2rem(10px) 0 px2rem(10px);
font-size: px2rem(13px);
&-item {
position: relative;
span {
margin-right: px2rem(30px);
}
img {
position: absolute;
top: px2rem(2px);
left: px2rem(51px);
height: px2rem(15px);
width: px2rem(15px);
}
}
}
.first-name {
left: px2rem(63px);
}
.course-num {
left: px2rem(37px);
}
.hot-degree {
left: px2rem(25px);
}
.active {
color: #449284;
}
&-title {
padding: 0 px2rem(15px);
span {
font-size: px2rem(18px);
font-weight: 500;
color: #28344C;
}
}
}
</style>
src/componentsn/business/teacher-list.1.vue 0 → 100644
浏览文件 @ d26cdd04
此差异已折叠。
src/componentsn/business/teacher-list.vue
浏览文件 @ d26cdd04
<template> <template>
<section> <section>
<GroupTitle groupTitle="讲师" :groupNum="groupNum" :showTitle="showTitle" :showOrder="showOrder" @order="orderAction"/> <GroupTitle groupTitle="全部讲师" :groupNum="groupNum" :showTitle="showTitle" :showOrder="showOrder" @order="orderAction"/>
<div class="font-style"> <div class="font-style">
<div class="teach-opt"> <div class="teach-opt">
<div class="teach-list"> <div class="teach-list">
...@@ -34,7 +34,7 @@ import { ...@@ -34,7 +34,7 @@ import {
m_search_result_lecturer_order, m_search_result_lecturer_order,
m_search_result_lecturer_top, m_search_result_lecturer_top,
} from '@/utils/buryingPoint' } from '@/utils/buryingPoint'
import GroupTitle from '@/components/business/group-title'; import GroupTitle from '@/componentsn/business/group-title';
export default { export default {
data() { data() {
return { return {
......
src/componentsn/business/yqy-hot-lecturer.1.vue 0 → 100644
浏览文件 @ d26cdd04
<template>
<div class="hot-teacher" id="hot-teacher-id">
<div class="titleTop">
<span class="title">{{title}}</span>
<!-- <div class="get-more gray fs11" @click="goToPage('','list')">
更多<img src="../../images/right-throw.png" class="thorw-icon"/>
</div> -->
</div>
<div class="tea-list">
<div class="tea-listbox">
<div class="tea-item" :key="index" v-for="(item,index) in parmData" @click="goToPage(item)">
<div class="head-pic">
<img class="tea-itemimg" v-lazy="item.avatarImageUrl"/>
</div>
<span class="tea-itemname">{{item.name}}</span>
</div>
</div>
</div>
</div>
</template>
<script>
// import { setEventByModuleCode } from '@/utils/index'
import { jumpWebPageUrl } from '@/utils/index'
export default {
data(){
return {
title:'热门讲师',
list: [],
pageNo: 1,
pageSize: 10,
parmData: []
}
},
beforeMount(){
},
mounted(){
this.getData();
},
props:{
userToken:{
type:String,
default:''
}
},
methods: {
//跳转
goToPage(item,parm){
let _this = this,
url = '',action_code = '',label_id = '';
if(parm == 'list'){
url = jumpWebPageUrl+'teachers?userToken='+_this.userToken;
action_code = 'c_more'
}else{
url = jumpWebPageUrl+'teachersDetail?id='+item.id+"&from=appHome&userToken="+_this.userToken
action_code = 'c_teacher';
label_id = item.id;
}
let itemData={
"title":"",
"imageUrl":"",
"appModuleInfo":{
"code":"M300",
"type":4,
"name":"wwww",
"paramFlag":1,
"paramList":[
{
"key":"pageUrl",
"value": url,
"type":4,
"seqNo":1
},{
"key":"showTitle",
"value": false,
"type":1,
"seqNo":2
},{
"key":"title",
"value": '',
"type":1,
"seqNo":3
}
]
}
};
rocNative.dispatchEventByModuleCode({
modeCode: itemData.appModuleInfo.code,
jsonString: itemData.appModuleInfo.paramList
})
this.pageBurialPoin({
menuLevel:1,
menuCode:'m_home',
functionCode:'f_teacher',
actionCode:action_code,
labelId:label_id,
labelValue :item.name,
})
},
getData(){
let _this = this,
para = {
pageNo: this.pageNo,
pageSize: this.pageSize,
token: this.userToken,
setEntry: 'headers'
}
this.GET('contents/HomeLecturer/LecturerInformation', para).then(res => {
if(res.code == '000000'){
_this.parmData = (res.data && res.data.pCourseDoctorModels || []).slice()
}
})
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '../../style/mixin.scss';
@import '../../style/global.scss';
.hot-teacher{
width: 100%;
background-color: #fff;
padding: px2rem(15px);
.titleTop{
padding: 0 px2rem(15px) px2rem(15px) 0;
overflow: hidden;
height: px2rem(40px);
}
.title{
font-size: px2rem(18px);
float: left;
font-weight: bold;
}
.get-more{
border: 1px solid RGBA(169, 174, 183, 0.5);
border-radius: px2rem(16px);
padding: 0 px2rem(5px) 0 px2rem(6px);
vertical-align: middle;
display: inline-block;
float: right;
margin-top:px2rem(3px);
height: px2rem(16px);
line-height: px2rem(16px);
}
.thorw-icon{
width: px2rem(8px);
height: px2rem(8px);
}
.tea-list{
width: 100%;
overflow: hidden;
height: px2rem(115px);
overflow-x: scroll;
-webkit-tap-highlight-color:rgba(0,0,0,0);
outline: 0;
-webkit-overflow-scrolling : touch;
}
.tea-listbox{
width: 1100px;
clear: both;
}
.tea-item {
width: px2rem(105px);
height: px2rem(115px);
font-size: px2rem(13px);
padding-left: px2rem(20px);
// margin: 0 px2rem(19px) 0 0;
display: inline-block;
// position: relative;
float: left;
text-align: center;
.head-pic {
background: #ECECEC;
width: px2rem(60px);
height: px2rem(60px);
border-radius: 50%;
text-align: center;
display: inline-block;
}
.tea-itemimg{
width: px2rem(60px);
height: px2rem(60px);
border-radius: 50%;
}
.tea-itemname{
color: RGBA(102, 102, 102, 1);
margin-top: px2rem(4px);
font-size: px2rem(13px);
line-height: px2rem(19px);
height: px2rem(19px);
display: inline-block;
}
}
}
</style>
src/componentsn/business/yqy-hot-lecturer.vue
浏览文件 @ d26cdd04
<template> <template>
<div class="hot-teacher" id="famus-teacher"> <div class="hot-lect">
<div class="titleTop"> <span class="hot-lect-wrapper-title">热门讲师</span>
<span class="title">{{title}}</span> <div class="hot-lect-wrapper">
<!-- <div class="get-more gray fs11" @click="goToPage('','list')"> <div class="hot-lect-wrapper-list" >
更多<img src="../../images/right-throw.png" class="thorw-icon"/> <div class="hot-lect-wrapper-list-item" v-for="(item,index) in parmData" @click="goToPage(item)" :key="index">
</div> --> <div class="lect-img">
</div> <img v-lazy="item.avatarImageUrl"/>
<div class="tea-list"> <span class="disp-blc">
<div class="tea-listbox"> <span>邓轩东</span>
<div class="tea-item" :key="index" v-for="(item,index) in parmData" @click="goToPage(item)"> </span>
<div class="head-pic">
<img class="tea-itemimg" v-lazy="item.avatarImageUrl"/>
</div> </div>
<span class="tea-itemname">{{item.name}}</span> <span class="disp-blc lect-ks">中医风湿免疫内科</span>
<span class="disp-blc study-num">477人已学</span>
</div> </div>
</div> </div>
</div> </div>
...@@ -21,7 +20,7 @@ ...@@ -21,7 +20,7 @@
<script> <script>
// import { setEventByModuleCode } from '@/utils/index' // import { setEventByModuleCode } from '@/utils/index'
import { jumpWebPageUrl } from '@/utils/index' import { jumpWebPageUrl } from '@/utils/index'
export default { export default {
data(){ data(){
return { return {
...@@ -124,78 +123,91 @@ export default { ...@@ -124,78 +123,91 @@ export default {
<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-teacher{ .hot-lect {
width: 100%; &-wrapper {
background-color: #fff; width: 100%;
padding: px2rem(15px); overflow: hidden;
.titleTop{ height: px2rem(115px);
padding: 0 px2rem(15px) px2rem(15px) 0; // margin: 0 px2rem(15px);
overflow: hidden; overflow-x: scroll;
height: px2rem(40px); -webkit-tap-highlight-color:rgba(0,0,0,0);
} outline: 0;
.title{ -webkit-overflow-scrolling : touch;
font-size: px2rem(18px); &-list {
float: left; display: flex;
font-weight: bold; flex-direction: columns;
} width: px2rem(1200px);
.get-more{ height: px2rem(133px);
border: 1px solid RGBA(169, 174, 183, 0.5); // margin: 0 px2rem(15px);
border-radius: px2rem(16px); // padding: px2rem(4px) px2rem(4px);
padding: 0 px2rem(5px) 0 px2rem(6px); &-item {
vertical-align: middle; display: inline-block;
display: inline-block; width: px2rem(105px);
float: right; height: px2rem(107px);
margin-top:px2rem(3px); margin: px2rem(3px);
height: px2rem(16px); text-align: center;
line-height: px2rem(16px); background:rgba(255,255,255,1);
} box-shadow: 0px 1px 6px 0px rgba(0,0,0,0.07);
.thorw-icon{ border-radius: px2rem(3px);
width: px2rem(8px); span {
height: px2rem(8px); 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;
}
}
}
} }
.tea-list{ .disp-blc {
display: block;
}
.hot-lect-wrapper-title {
display: block;
width: 100%; width: 100%;
overflow: hidden; padding: px2rem(15px);
height: px2rem(75px); font-size: px2rem(18px);
overflow-x: scroll; font-weight: 500;
-webkit-tap-highlight-color:rgba(0,0,0,0); color: #333;
outline: 0;
-webkit-overflow-scrolling : touch;
} }
.tea-listbox{ .disp-blc.lect-ks {
width: 1100px; position: relative;
clear: both; left: 0;
top: px2rem(-9px);
font-size: px2rem(12px);
color: #666;
} }
.tea-item{ .disp-blc.study-num {
font-size: px2rem(13px);
margin: 0 px2rem(19px) 0 0;
display: inline-block;
position: relative; position: relative;
float: left; left: 0;
text-align: center; top: px2rem(-10px);
.head-pic{ font-size: px2rem(11px);
background: #ECECEC; color: #999;
width: px2rem(50px);
height: px2rem(50px);
border-radius: 50%;
text-align: center;
}
.tea-itemimg{
width: px2rem(50px);
height: px2rem(50px);
border-radius: 50%;
}
.tea-itemname{
color: RGBA(102, 102, 102, 1);
margin-top: px2rem(4px);
font-size: px2rem(13px);
line-height: px2rem(19px);
height: px2rem(19px);
display: inline-block;
}
} }
}
</style> </style>
src/views/index.vue
浏览文件 @ d26cdd04
<template> <template>
<div class="main-body" ref="wrapper"> <div class="main-body" ref="wrapper">
<section :class="isIntStyle"> <section :class="isIntStyle">
<!-- <section class="home-header"> <section class="home-header">
<div class="home-topMenu"> <div class="home-topMenu">
<YqyHomeHeader :msgCount="msgCount" :searchFix="searchFix"/> <YqyHomeHeader :msgCount="msgCount" :searchFix="searchFix"/>
</div> </div>
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
</mt-swipe-item> </mt-swipe-item>
</mt-swipe> </mt-swipe>
</div> </div>
</section> --> </section>
<section class="home-body"> <section class="home-body">
<!--云雀名师--> <!--云雀名师-->
...@@ -220,12 +220,12 @@ export default { ...@@ -220,12 +220,12 @@ export default {
let scrollTop = document.body.scrollTop || document.documentElement.scrollTop let scrollTop = document.body.scrollTop || document.documentElement.scrollTop
// var clientHeight = document.querySelector('#famus-teacher').clientHeight; // var clientHeight = document.querySelector('#famus-teacher').clientHeight;
// this.scrollTimer = setTimeout(this.scrollEndFun, 200); // this.scrollTimer = setTimeout(this.scrollEndFun, 200);
if(scrollTop > searchBox && scrollTop < adjustTop){ // if(scrollTop > searchBox && scrollTop < adjustTop){
console.log(scrollTop,searchBox); // console.log(scrollTop,searchBox);
this.searchFix = true; // this.searchFix = true;
}else{ // }else{
this.searchFix = false; // this.searchFix = false;
} // }
}, },
// 获取轮播图数据 // 获取轮播图数据
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或