讲师样式优化

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;
     }
   }
 }

src/utils/env-config.js

@@ -8,19 +8,19 @@ export const envConfig = {
     // baseUrl: 'http://10.177.15.180:10202/',
     // baseUrl: 'http://192.168.140.14:10201/',
 
-    // apiUrl: 'https://dev-api.yunqueyi.com/',
-    // webPageUrl: 'https://dev-phome.yunqueyi.com/',
-    // baseUrl: 'https://dev-sc.yunqueyi.com/',
-    // hactiveUrl: 'https://dev-hactive.yunqueyi.com',
-    // fileUrl: 'https://dev-www.yunqueyi.com',
-    // appId: 'wxf4e66242d31c81c2', // 用于微信授权登录
-
-    baseUrl: 'https://test1-sc.yunqueyi.com/',
-    apiUrl: 'https://test1-api.yunqueyi.com/',
-    webPageUrl: 'https://test1-phome.yunqueyi.com/',
+    apiUrl: 'https://dev-api.yunqueyi.com/',
+    webPageUrl: 'https://dev-phome.yunqueyi.com/',
+    baseUrl: 'https://dev-sc.yunqueyi.com/',
     hactiveUrl: 'https://dev-hactive.yunqueyi.com',
-    fileUrl: 'https://test1-www.yunqueyi.com',
-    appId: 'wxcaad75b7fff5659c', // 用于微信授权登录
+    fileUrl: 'https://dev-www.yunqueyi.com',
+    appId: 'wxf4e66242d31c81c2', // 用于微信授权登录
+
+    // baseUrl: 'https://test1-sc.yunqueyi.com/',
+    // apiUrl: 'https://test1-api.yunqueyi.com/',
+    // webPageUrl: 'https://test1-phome.yunqueyi.com/',
+    // hactiveUrl: 'https://dev-hactive.yunqueyi.com',
+    // fileUrl: 'https://test1-www.yunqueyi.com',
+    // appId: 'wxcaad75b7fff5659c', // 用于微信授权登录
 
     // baseUrl: 'https://uat-sc.yunqueyi.com/',
     // apiUrl: 'https://uat-api.yunqueyi.com/',