讲师优化等

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-text">
-                <div class="leader-con">
-                    <span>{{item.name}}</span>
-                    <span class="leader-title">{{item.title}}</span>
-                </div>
-                <div class="address">{{item.hospital}}</div>
-            </div>
+  <div class="teacter-intro-container">
+    <div class="basic-title">讲师介绍</div>
+    <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>
+          <span class="leader-title">{{item.title}}</span>
         </div>
+        <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>
 export default {
-    props: {
-        doctorList: {
-            type: Array,
-            default: () => []
-        }
-    },
-    data() {
-        return {
-            
-        }
-    },
-    created() {
-
-    },
-    mounted() {
-        
-    },
-    methods: {
-        
+  props: {
+    doctorList: {
+      type: Array,
+      default: () => []
     }
-}
+  },
+  data() {
+    return {
+      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 {
-    margin: 30px 15px 0px;
-    .basic-title {
-        font-size: 18px;
-        line-height: 18px;
-        color: #373839;
-        font-weight: 700;
+  margin: 30px 15px 0px;
+  .basic-title {
+    font-size: 18px;
+    line-height: 18px;
+    color: #373839;
+    font-weight: 700;
+  }
+  .leader-info {
+    display: flex;
+    flex-direction: row;
+    margin-top: 16px;
+    padding-bottom: 16px;
+    img {
+      display: inline-block;
+      width: 44px;
+      height: 44px;
+      border-radius: 50%;
     }
-    .leader-info {
+    .leader-text {
+      flex: 1;
+      width: 100px;
+      margin-left: 16px;
+      margin-top: 6px;
+      .leader-con {
+        line-height: 14px;
         display: flex;
         flex-direction: row;
-        margin-top: 16px;
-        padding-bottom: 16px;
-        img {
-            display: inline-block;
-            width: 44px;
-            height: 44px;
-            border-radius: 50%;
+        white-space: nowrap;
+        span {
+          font-size: 16px;
+          color: #676869;
+        }
+        span:first-child {
+          font-size: 16px;
+          color: #373839;
+          font-weight: 700;
+          line-height: 1.1;
         }
-        .leader-text {
-            flex: 1;
-            width: 100px;
-            margin-left: 16px;
-            margin-top: 6px;
-            .leader-con {
-                line-height: 14px;
-                display: flex;
-                flex-direction: row;
-                white-space: nowrap;
-                span {
-                    font-size: 16px;
-                    color: #676869;
-                }
-                span:first-child {
-                    font-size: 16px;
-                    color: #373839;
-                    font-weight: 700;
-                    line-height: 1.1;
-                }
-                .leader-title {
-                    width: 220px;
-                    overflow : hidden;
-                    text-overflow: ellipsis;
-                    white-space:nowrap;
-                    line-height: 16px;
-                    margin-left: 10px;
-                }
-            }
-            .address {
-                margin-top: 5px;
-                font-size: 13px;
-                color: #979899;
-                width: 240px;
-                overflow : hidden;
-                text-overflow: ellipsis;
-                white-space:nowrap;
-            }
+        .leader-title {
+          width: 220px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          line-height: 16px;
+          margin-left: 10px;
         }
+      }
+      .address {
+        margin-top: 5px;
+        font-size: 13px;
+        color: #979899;
+        width: 240px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        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;
     }
+  }
 }
 </style>
\ No newline at end of file