样式修改

src/pages/goods-detail/course-detail.vue

@@ -72,28 +72,33 @@
                     <div class="goods-menu clearfix" >
                       <div class="left-box">
                         <div class="left-box__body">
+                          <template v-for="(course, index) in courseItem.courseList">
                           <div
                             class="course-list-item"
-                            v-for="(course, index) in courseItem.courseList"
                             v-if="course.show == 1"
                             :key="index + 'two'"
                           >
-                            <div
-                              class="course-list-item__title"
-                              @click="openCourse(course)"
-                            >
-                              <i
-                                :class="{
-                                  'el-icon-caret-right': !course.showList,
-                                  'el-icon-caret-bottom': course.showList,
-                                }"
-                              ></i>
-                              {{ course.courseName }}
+                            <div class="doubles">
+                              <div
+                                class="course-list-item__title"
+                                @click="openCourse(course)"
+                              >
+                                <i
+                                  :class="{
+                                    'el-icon-caret-right': !course.showList,
+                                    'el-icon-caret-bottom': course.showList,
+                                  }"
+                                ></i>
+                                {{ course.courseName }}
+                              </div>
+                              <div v-if="courseItem.teaList && courseItem.teaList.length > 0" class="teacher_names">
+                                <div v-for="(tea, index) in courseItem.teaList" :key="index + 'three'" class="names"
+                                 :class="{nactive: teaIndex == index}" @click="switchTeacher(tea, index)">
+                                  {{ tea.aliasName }}
+                                </div>
+                                <!-- <el-button type="info" @click="switchTeacher(tea)" round>{{tea.aliasName}}</el-button> -->
+                              </div>
                             </div>
-                            <span v-if="courseItem.teaList && courseItem.teaList.length > 0" v-for="(tea, index) in courseItem.teaList" :key="index + 'three'">
-                              <el-button type="info" @click="switchTeacher(tea)" round>{{tea.aliasName}}</el-button>
-                              </span
-                            >
                             <template v-if="course.showList">
                               <div
                                 class="item"
@@ -244,6 +249,7 @@
                               </div>
                             </template>
                           </div>
+                          </template>
                         </div>
                       </div>
                       <div class="right-box">
@@ -579,6 +585,7 @@ export default {
       needOpen: true, //是否需要一进来展开第一章节
       menuIndex: [], //需要展开的章节索引值
       freeMenuList: [], //赠送题卷列表
+      teaIndex: 0,
     };
   },
   beforeDestroy() {
@@ -1546,7 +1553,8 @@ export default {
       });
     },
         //切换老师
-    switchTeacher(data){
+    switchTeacher(data, index){
+      this.teaIndex = index
         console.log(data,'data');
         this.goodsTeacher.forEach((item,index) => {
             if(item.teaList && item.teaList.length > 0){
@@ -1842,6 +1850,10 @@ export default {
                   padding: 16px;
                   background: #f5f7fa;
                   border-radius: 10px;
+                  .doubles {
+                    display: flex;
+                    align-items: center;
+                  }
                   &__title {
                     font-size: 18px;
                     color: #333;
@@ -2717,5 +2729,20 @@ export default {
       }
     }
   }
+
+// 老师名字样式
+.teacher_names {
+	display: flex;
+	margin-left: 20px;
+    .names {
+      font-size: 14px;
+      color: #666666;
+      margin-right: 10px;
+      cursor: pointer;
+      &.nactive {
+        color: #3F8DFD;
+      }
+    }
+  }
 }
 </style>

src/pages/person-center/my-course/index.vue

@@ -50,20 +50,29 @@
           >{{ item.name }}</el-button
         >
       </div>
-      <div  v-for="(courseItem, index) in goodsTeacher" :key="index">
-      <div v-for="(item, index) in courseItem.courseList" :key="index" v-show="item.subjectId === newActiveSubjectId || !newActiveSubjectId">
+      <div v-for="(courseItem, index) in goodsTeacher" :key="index + 'one'">
+      <div v-for="(item, index) in courseItem.courseList" :key="index + 'two'" v-show="item.subjectId === newActiveSubjectId || !newActiveSubjectId">
         <div v-if="item.show == 1">
-        <p class="firstTop hoverStyle" >
-          <span class="iconStyle">课</span
-          ><span class="titles">{{ item.courseName }}</span
-          ><span v-if="courseItem.teaList && courseItem.teaList.length > 0" v-for="(tea, index) in courseItem.teaList" :key="index">
-            <el-button type="info" @click="switchTeacher(tea)" round>{{tea.aliasName}}</el-button>
-            </span
-          ><span class="showHide" @click="changeStatus(item)"
-            ><span v-if="item.showStatus">收起∧</span
-            ><span v-else>展开∨</span></span
-          >
-        </p>
+        <div class="firstTop hoverStyle" >
+          <div class="doubles">
+            <span class="iconStyle">课</span>
+            <span class="titles">{{ item.courseName }}</span>
+            <!-- <span v-if="courseItem.teaList && courseItem.teaList.length > 0" v-for="(tea, index) in courseItem.teaList" :key="index">
+              <el-button type="info" @click="switchTeacher(tea)" round>{{tea.aliasName}}</el-button>
+            </span> -->
+            <span v-if="courseItem.teaList && courseItem.teaList.length > 0" class="teacher_names">
+              <span v-for="(tea, lindex) in courseItem.teaList" :key="lindex + 'three'" class="names"
+                :class="{nactive: teaIndex == lindex}" @click="switchTeacher(tea, lindex)">
+                {{ tea.aliasName }}
+              </span>
+            </span>
+          </div>
+          
+          <span class="showHide" @click="changeStatus(item)">
+            <span v-if="item.showStatus">收起∧</span>
+            <span v-else>展开∨</span>
+          </span>
+        </div>
         <div
           v-if="item.children && item.children.length > 0 && item.showStatus"
         >
@@ -644,6 +653,7 @@ export default {
       subjectList: [], //当前商品课程科目汇总
       newActiveSubjectId: "", //当前选中ID
       businessData: {},
+      teaIndex: 0,
     };
   },
   computed: {
@@ -811,6 +821,7 @@ export default {
     //切换老师
     switchTeacher(data){
         console.log(data,'data');
+        this.teaIndex = index
         this.goodsTeacher.forEach((item,index) => {
             if(item.teaList && item.teaList.length > 0){
                let list = item.teaList.filter(x => x.aliasName == data.aliasName)
@@ -1671,6 +1682,13 @@ export default {
 .firstTop {
   padding: 24px 0px;
   // margin: 24px 0px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  .doubles {
+    display: flex;
+    align-items: center;
+  }
   .iconStyle {
     background-color: #3f8dfd;
     color: #fff;
@@ -1767,4 +1785,18 @@ export default {
   display: inline-block;
   vertical-align: middle;
 }
+// 老师名字样式
+.teacher_names {
+	display: flex;
+	margin-left: 20px;
+    .names {
+      font-size: 14px;
+      color: #666666;
+      margin-right: 10px;
+      cursor: pointer;
+      &.nactive {
+        color: #3F8DFD;
+      }
+    }
+  }
 </style>