样式修改

src/pages/course-detail/index.vue

@@ -69,9 +69,10 @@
                           </div>
                           <!-- 章节目录 -->
                           <template v-if="tab.name == '1'">
-                            <div v-if="teacherList && teacherList.length > 0">
-                              <el-button v-for="(tea, index) in teacherList" :key="index" type="info" @click="activeFunc(tea.courseId)" round>
-                                {{tea.aliasName}}</el-button>
+                            <div v-if="teacherList && teacherList.length > 0" class="teacherList_name">
+                              <div v-for="(tea, index) in teacherList" :key="index" class="names" :class="{nactive: teaIndex == index}" @click="activeFunc(tea.courseId, index)">
+                                主讲：{{tea.aliasName}}
+                              </div>
                             </div>
                             <div class="right-box__body">
                               <div
@@ -2605,12 +2606,11 @@
           }}</span>
         </div>
       </div>
-      <div  v-for="(courseItem, index) in goodsTeacher" :key="index">
+      <div v-for="(courseItem, index) in goodsTeacher" :key="index + 'one'">
       <div class="height_style">
+        <div v-for="(item, index) in courseItem.courseList" :key="index + 'two'">
         <div
-          v-for="(item, index) in courseItem.courseList"
           v-if="item.show == 1"
-          :key="index"
           class="list_style"
           :style="
             index % 2 != 1
@@ -2622,10 +2622,16 @@
           <span style="font-weight: bold; font-size: 16px">{{
             item.courseName
           }}</span>
-          <span v-if="courseItem.teaList && courseItem.teaList.length > 0" v-for="(tea, index) in courseItem.teaList" :key="index">
+          <!-- <span v-if="courseItem.teaList && courseItem.teaList.length > 0" v-for="(tea, index) in courseItem.teaList" :key="index">
             <el-button type="info" round>{{tea.aliasName}}</el-button>
-            </span
-          >
+          </span> -->
+          <!--  @click="switchTeacher(item.courseId, cindex)"-->
+          <span v-if="courseItem.teaList && courseItem.teaList.length > 0" class="teacher_names">
+            <span v-for="(tea, cindex) in courseItem.teaList" :key="cindex + 'three'" class="names"  >
+              主讲：{{ tea.aliasName }}
+            </span>
+          </span>
+        </div>
         </div>
       </div>
       </div>
@@ -2987,6 +2993,7 @@ export default {
       disCard: false, // 身份证是否禁止输入
       clickSectionItem: {}, // 点击节的内容
       courseTotal: 0, 
+      teaIndex: 0,
     };
   },
   computed: {
@@ -3186,7 +3193,9 @@ export default {
     /**
      * 确定选中
      */
-    activeFunc(item) {
+    activeFunc(item, index) {
+      console.log('------', item, index)
+      this.teaIndex = index || 0
       this.courseId = item;
       this.courseChange();
       this.dialogVisible = false;
@@ -8568,12 +8577,13 @@ export default {
   overflow-y: auto;
 }
 .list_style {
-  height: 60px;
+  height: 62px;
   color: #222;
   line-height: 58px;
   padding: 0px 16px;
   cursor: pointer;
   transition: all 0.2s;
+  display: flex;
   &:hover {
     background-color: rgba(63, 141, 253, 0.3) !important;
   }
@@ -8584,4 +8594,39 @@ export default {
   line-height: 58px;
   padding: 0px 16px;
 }
+// 老师名字样式
+.teacher_names {
+	display: flex;
+	margin-left: 20px;
+    .names {
+      font-size: 13px;
+      color: #666666;
+      margin-right: 12px;
+      cursor: pointer;
+      // background: #F8F8F8;
+      border-radius: 4px;
+      padding: 3px 6px;
+      &.nactive {
+        color: #3F8DFD;
+        background: #F2F7FF;
+      }
+    }
+  }
+.teacherList_name {
+  display: flex;
+	margin-left: 20px;
+  margin-top: 10px;
+  .names {
+    font-size: 13px;
+    color: #383838;
+    margin-right: 8px;
+    cursor: pointer;
+    background: #818181;
+    border-radius: 4px;
+    padding: 3px 6px;
+    &.nactive {
+      background: #CCCCCC;
+    }
+  }
+}
 </style>

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

@@ -94,7 +94,7 @@
                               <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 }}
+                                  主讲：{{ tea.aliasName }}
                                 </div>
                                 <!-- <el-button type="info" @click="switchTeacher(tea)" round>{{tea.aliasName}}</el-button> -->
                               </div>
@@ -2735,12 +2735,16 @@ export default {
 	display: flex;
 	margin-left: 20px;
     .names {
-      font-size: 14px;
+      font-size: 13px;
       color: #666666;
-      margin-right: 10px;
+      margin-right: 12px;
       cursor: pointer;
+      background: #F8F8F8;
+      border-radius: 4px;
+      padding: 3px 6px;
       &.nactive {
         color: #3F8DFD;
+        background: #F2F7FF;
       }
     }
   }

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

@@ -60,12 +60,12 @@
             <!-- <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"
+            <div v-if="courseItem.teaList && courseItem.teaList.length > 0" class="teacher_names">
+              <div v-for="(tea, lindex) in courseItem.teaList" :key="lindex + 'three'" class="names"
                 :class="{nactive: teaIndex == lindex}" @click="switchTeacher(tea, lindex)">
-                {{ tea.aliasName }}
-              </span>
-            </span>
+                主讲：{{ tea.aliasName }}
+              </div>
+            </div>
           </div>
           
           <span class="showHide" @click="changeStatus(item)">
@@ -819,7 +819,7 @@ export default {
       });
     },
     //切换老师
-    switchTeacher(data){
+    switchTeacher(data, index){
         console.log(data,'data');
         this.teaIndex = index
         this.goodsTeacher.forEach((item,index) => {
@@ -1790,12 +1790,16 @@ export default {
 	display: flex;
 	margin-left: 20px;
     .names {
-      font-size: 14px;
+      font-size: 13px;
       color: #666666;
-      margin-right: 10px;
+      margin-right: 12px;
       cursor: pointer;
+      background: #F8F8F8;
+      border-radius: 4px;
+      padding: 3px 6px;
       &.nactive {
         color: #3F8DFD;
+        background: #F2F7FF;
       }
     }
   }