讲师优化等

src/components/cme/teacter-intro.vue

 <template>
   <div class="teacter-intro-container">
     <div class="basic-title">讲师介绍</div>
-        <div class="leader-info" v-for="(item,index) in doctorList" :key="index">
-            <img :src="item.appImageUrl"/>
+    <div class="leader-info" v-for="(item,index) in current" :key="index">
+      <img :src="item.appImageUrl" />
       <div class="leader-text">
         <div class="leader-con">
           <span>{{item.name}}</span>
@@ -11,6 +11,11 @@
         <div class="address">{{item.hospital}}</div>
       </div>
     </div>
+    <div v-show="doctorList.length > 1" class="toggle-btn" @click="toggle">
+      <span class="btn">{{ isUp ? '展开更多' : '向上收起'}}</span>
+      <img v-if="isUp" src="../../images/cme/arrow-grey-down.png" />
+      <img v-if="!isUp" src="../../images/cme/arrow-grey-up.png" />
+    </div>
   </div>
 </template>
 <script>
@@ -23,19 +28,29 @@ export default {
   },
   data() {
     return {
-            
-        }
-    },
-    created() {
-
+      isUp: true,
+      one: [],
+      all: [],
+      current: []
+    };
   },
+  created() {},
   mounted() {
-        
+    this.one = this.doctorList.slice(0, 1);
+    this.current = this.one;
+    this.all = this.doctorList.slice(0);
   },
   methods: {
-        
+    toggle() {
+      this.isUp = !this.isUp;
+      if (this.isUp) {
+        this.current = this.one;
+      } else {
+        this.current = this.all;
       }
-}
+    }
+  }
+};
 </script>
 <style lang="less" scoped>
 .teacter-intro-container {
@@ -79,9 +94,9 @@ export default {
         }
         .leader-title {
           width: 220px;
-                    overflow : hidden;
+          overflow: hidden;
           text-overflow: ellipsis;
-                    white-space:nowrap;
+          white-space: nowrap;
           line-height: 16px;
           margin-left: 10px;
         }
@@ -91,10 +106,26 @@ export default {
         font-size: 13px;
         color: #979899;
         width: 240px;
-                overflow : hidden;
+        overflow: hidden;
         text-overflow: ellipsis;
-                white-space:nowrap;
+        white-space: nowrap;
+      }
+    }
+  }
+  .toggle-btn {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 20px;
+    & > span {
+      font-size: 14px;
+      color: #979899;
+      font-weight: 400;
     }
+    & > img {
+      width: 15px;
+      height: 15px;
     }
   }
 }