选择组件

src/componentsn/business/yqy-lecturer-order.vue

 <template>
   <section>
-    <article class="group-title-title">
+    <!-- <article class="group-title-title">
       <span class="group-title-title-main">{{groupTitle}}</span><span class="group-title-title-sub">专业领域的资深专家</span>
-    </article>
-    <article>
-      <select name="regionName" id="1">
-        <option value="1">上海</option>
-        <option value="2">北京</option>
-        <option value="3">广州</option>
-      </select>
-    </article>
+    </article> -->
     <article class="group-title">
         <article v-show="showOrder" class="group-title-order">
           <div @click="order(1)" class="group-title-order-item">

src/componentsn/business/yqy-lecturer-select.vue

+<template>
+  <section>
+    <article class="group-title">
+        <article v-show="showOrder" class="group-title-order">
+          <div @click="order(1)" class="group-title-order-item">
+            <span>按名首字母</span>
+            <img class="first-name" src="../../images/sousuo/sort-down.png"/>
+          </div>
+          <div @click="order(2)" class="group-title-order-item">
+            <span>最新课程</span>
+            <img src="../../images/sousuo/sort-down.png"/>
+          </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);
+    &-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>

src/componentsn/business/yqy-lecturer-title.vue

+<template>
+    <section class="group-title-title">
+      <span class="group-title-title-main">{{mainTitle}}</span><span class="group-title-title-sub">{{subTitle}}</span>
+    </section>
+</template>
+<script>
+export default {
+  data() {
+      return {
+
+      }
+  },
+  props: {
+    mainTitle: {
+      type: String,
+      default: '全部讲师'
+    },
+    subTitle: {
+      type: String,
+      default: '专业领域的资深专家'
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../style/mixin.scss';
+.group-title {
+  height: px2rem(18px);
+  line-height: px2rem(18px);
+  &-title {
+    padding: px2rem(10px) px2rem(15px) 0;
+    &-main {
+      margin-right: px2rem(6px);
+      font-size: px2rem(18px);
+      font-weight: 500;
+      color: #28344C;
+    }
+    &-sub {
+      font-size: px2rem(15px);
+      font-weight: 400;
+      color: #999;
+    }
+  }
+}
+</style>

src/componentsn/business/yqy-teacher-list.vue

 <template>
 <section>
-    <GroupTitle groupTitle="全部讲师" :groupNum="groupNum" :showTitle="showTitle" :showOrder="showOrder" @order="orderAction"/>
+    <YqyLecturerOrder groupTitle="全部讲师" :groupNum="groupNum" :showTitle="showTitle" :showOrder="showOrder" @order="orderAction"/>
     <div class="font-style">
         <div class="teach-opt">
             <div class="teach-list">
@@ -35,7 +35,7 @@ import {
     m_search_result_lecturer_top,
     } from '@/utils/buryingPoint'
 // import GroupTitle from '@/componentsn/business/group-title';
-import GroupTitle from '@/componentsn/business/yqy-lecturer-order';
+import YqyLecturerOrder from '@/componentsn/business/yqy-lecturer-order';
 export default {
     data() {
         return {
@@ -71,7 +71,7 @@ export default {
         }
     },
     components: {
-        GroupTitle
+        YqyLecturerOrder
     },
     props: {
         parmData: {

src/views/index.vue

 <template>
     <div class="main-body" ref="wrapper">
-            <section :class="isIntStyle">
-                <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>
-                <section class="home-body">
-
-                    <!--云雀名师-->
-                    <YqyHotLecturer/>
-
-                    <TeacherList/>
-                    <!--返回顶部-->
-                    <!-- <BackTop v-if="isShowBackTop"/> -->
-                </section>
-            </section>
+        <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"/>
@@ -32,19 +29,21 @@
 </template>
 
 <script>
-import { Swipe, SwipeItem ,Header} from 'mint-ui';
+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 TeacherList from '@/componentsn/business/yqy-teacher-list'
+import YqyTeacherList from '@/componentsn/business/yqy-teacher-list'
 export default {
     data(){
         return {
             prevent:true,
             showNewCorse:false, // 是否显示新内容 默认不显示
             isFixed:false,
-            isShowBackTop:false,
+            isShowBackTop: false,
             isShowEvluat:false, //是否显示下拉
             evaluctObj:{}, //下拉数据
             iconList:[], //icon数据
@@ -98,13 +97,14 @@ export default {
         }
     },
     components:{
-        Header,
         Swipe,
         SwipeItem,
         BackTop,
         YqyHomeHeader,
+        YqyLecturerTitle,
+        YqyLecturerSelect,
         YqyHotLecturer,
-        TeacherList,
+        YqyTeacherList,
     },
     beforeCreate() {
     },