简介部分

src/components/course/brief-intro.vue

+<template>
+  <div class="brief-intro-wrapper">
+    <TeacherIntro :doctorList="doctorList"></TeacherIntro>
+    <CourseIntro></CourseIntro>
+    <CourseHarvest></CourseHarvest>
+  </div>
+</template>
+<script>
+import TeacherIntro from "@/components/course/course-teacher";
+import CourseIntro from "@/components/course/course-intro";
+import CourseHarvest from "@/components/course/course-harvest";
+export default {
+  components: {
+    TeacherIntro,
+    CourseIntro,
+    CourseHarvest,
+  },
+  data() {
+    return {
+      doctorList: [
+        {
+          id: 973,
+          name: "左力",
+          appImageUrl:
+            "https://file.yunqueyi.com/image/png/2020/07/24/20200724175216870-82aae111.png",
+          avatarImageUrl:
+            "https://file.yunqueyi.com/image/png/2020/07/24/20200724175216870-82aae111.png",
+          hospital: "北京大学人民医院",
+          title: "主任医师",
+          info: ""
+        },
+        {
+          id: 973,
+          name: "左力",
+          appImageUrl:
+            "https://file.yunqueyi.com/image/png/2020/07/24/20200724175216870-82aae111.png",
+          avatarImageUrl:
+            "https://file.yunqueyi.com/image/png/2020/07/24/20200724175216870-82aae111.png",
+          hospital: "北京大学人民医院",
+          title: "主任医师",
+          info: ""
+        },
+      ]
+    };
+  }
+};
+</script>
+<style lang="scss" scoped>
+@import "../../style/mixin";
+.brief-intro-wrapper {
+}
+</style>
\ No newline at end of file

src/components/course/common-title.vue

+<template>
+  <span class="common-title-wrapper">{{title}}</span>
+</template>
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      default: "课程简介"
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import "../../style/mixin";
+.common-title-wrapper {
+  display: inline-block;
+  height: px2rem(18px);
+  line-height: px2rem(18px);
+  margin: px2rem(30px) px2rem(15px) px2rem(15px);
+  font-size: px2rem(18px);
+  font-weight: 700;
+  color: #373839;
+}
+</style>
\ No newline at end of file

src/components/course/course-covers.vue

@@ -62,5 +62,10 @@ export default {
     text-align: center;
     font-size: px2rem(15px);
   }
+  .course-button-group {
+    display: flex; 
+    align-items: center;
+    justify-content:center;    
+  }
 }
 </style>
\ No newline at end of file

src/components/course/course-harvest.vue

+<template>
+  <div class="course-harvest-wrapper">
+    <CommonTitle :title="title"></CommonTitle>
+    <ul class="list-wrapper">
+      <li class="item">
+        <span class="name">卫计委《基层全科诊断资质》证书</span>
+        <span class="btn">查看</span>
+      </li>
+      <li class="item">
+        <span class="name">卫计委《基层全科诊断资质》证书</span>
+        <span class="btn">查看</span>
+      </li>
+      <li class="item">
+        <span class="name">卫计委《基层全科诊断资质》证书</span>
+        <span class="btn">查看</span>
+      </li>
+    </ul>
+  </div>
+</template>
+<script>
+import CommonTitle from "@/components/course/common-title"
+export default {
+  components: {
+    CommonTitle
+  },
+  data() {
+    return {
+      title: "学习收获"
+    }
+  },
+}
+</script>
+<style lang="scss" scoped>
+@import "../../style/mixin";
+.course-harvest-wrapper {
+  .list-wrapper {
+    .item {
+      display: flex;
+      justify-content: space-between;
+      height: px2rem(65px);
+      line-height: px2rem(65px);
+      margin: 0 px2rem(15px);
+      align-items: center;
+      border-bottom: 1px solid #E7E8E9;
+      .name {
+        font-size: px2rem(15px);
+        font-weight: 700;
+        color: #333333;
+      }
+      .btn {
+        display: inline-block;
+        height: px2rem(25px);
+        line-height: px2rem(25px);
+        font-size: px2rem(12px);
+        font-weight: 700;
+        padding: 0 px2rem(18px);
+        color: #449284;
+        border-radius: px2rem(15px);
+        border:1px solid rgba(68, 146, 132, 0.45);
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file

src/components/course/course-intro.vue

+<template>
+  <div class="course-intro-wrapper">
+    <CommonTitle></CommonTitle>
+    <div class="body">
+      <span class="content" :class="{'ellipsis': isUp}">{{content}}</span>
+      <div class="toggle-btn" @click="isUp=!isUp">
+        <span class="action">{{ isUp ? "详情" : "收起"}}</span>
+        <img v-show="isUp" src="../../images/down.png" alt="">
+        <img v-show="!isUp" src="../../images/up.png" alt="">
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import CommonTitle from "@/components/course/common-title"
+export default {
+  components: {
+    CommonTitle
+  },
+  props: {
+    content: {
+      type: String,
+      default: "本课程从三级本课程从三级本课程从1级本课课程从三级本课程从1级本课课程从三级本课程从1级本课程从三级本本课程本课b从三级本课程从三级本课程从1级本课程从三级本课程从三级本课程从三级"
+    }
+  },
+  data() {
+    return {
+      isUp: true
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+@import "../../style/mixin";
+.course-intro-wrapper {
+  .body {
+    position: relative;
+    color: #676869;
+    font-size: px2rem(14px);
+    padding: 0 px2rem(15px);
+    .content {
+      display: block;
+      text-align: justify;
+      &.ellipsis {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 3;
+        -webkit-box-orient: vertical;
+        white-space: normal;
+      }
+    }
+    .toggle-btn {
+      // background: #fff;
+      position: absolute;
+      right: px2rem(15px);
+      bottom: 0;
+      display: flex;
+      align-items: center;
+      padding-left: px2rem(30px);
+      background: -webkit-linear-gradient(left, transparent, #fff 30%);
+      img {
+        position: relative;
+        top: px2rem(1px);
+        margin-left: px2rem(6px);
+        width: px2rem(12px);
+        height: px2rem(7px);
+      }
+      .action {
+        color: #449284;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file

src/components/course/course-teacher.vue

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

src/style/global.scss

@@ -179,9 +179,4 @@
         font-size: 17px;
         color: #449284;
     }
-}
-.course-button-group {
-    display: flex; 
-    align-items: center;
-    justify-content:center;    
 }
\ No newline at end of file

src/views/test-components.vue

@@ -15,8 +15,9 @@
       <CourseButton type="plain"></CourseButton>
       <CourseButton></CourseButton>
     </div> -->
-    <CourseCovers></CourseCovers>
+    <!-- <CourseCovers></CourseCovers> -->
     <!-- <div @click="testDialog">testDialog</div> -->
+    <BriefIntro></BriefIntro>
   </div>
 </template>
 <script>
@@ -26,6 +27,7 @@ import CommonBottomInfo from "@/components/cme/common-bottom-info";
 import CommonErrorTips from "@/components/course/common-error-tips";
 import CourseButton from "@/components/course/course-button";
 import CourseCovers from "@/components/course/course-covers";
+import BriefIntro from "@/components/course/brief-intro";
 
 export default {
   data() {
@@ -37,13 +39,14 @@ export default {
     // CommonButton,
     // CommonDialog,
     // CommonBottomInfo,
-    CommonErrorTips,
-    CourseButton,
-    CourseCovers
+    // CommonErrorTips,
+    // CourseButton,
+    // CourseCovers,
+    BriefIntro
   },
   mounted() {
     // Toast
-    this.$toast({message: '展示图片', duration: 3000 });
+    // this.$toast({message: '展示图片', duration: 3000 });
   },
 
   beforeDestroyed() {},
@@ -68,7 +71,7 @@ export default {
 <style lang="scss" scoped>
 @import "../style/mixin";
 .test-container {
-  background: rgba($color: #000000, $alpha: 0.8);
+  // background: rgba($color: #000000, $alpha: 0.8);
 }
 </style>