5. 名医名方 - 专家 新增专家介绍

src/views/knowledge/DoctorCaseBefore.vue

@@ -13,12 +13,13 @@
       <div class="content-item" v-for="(item,index) in list" :key="index">
         <div class="en">{{item.pyCode}}</div>
         <div class="list">
-          <div
-            class="list-item"
-            @click="handleItem(item1)"
-            v-for="(item1,index1) in item.children"
-            :key="index1"
-          >{{item1.name}}</div>
+          <div class="list-item" v-for="(item1,index1) in item.children" :key="index1" @click="handleItem(item1)">
+            <el-popover v-if="item1.introduce" :title="item1.name" popper-class="scrollable" trigger="hover">
+              <div class="el-popover__content">{{ item1.introduce }}</div>
+              <div slot="reference">{{ item1.name }}</div>
+            </el-popover>
+            <div v-else>{{ item1.name }}</div>
+          </div>
         </div>
       </div>
     </div>
@@ -164,4 +165,23 @@ export default {
     }
   }
 }
+</style>
+<style lang="scss">
+.el-popover.scrollable {
+  display: flex;
+  flex-direction: column;
+  max-width: 30vmin;
+  max-height: 30vmin;
+  overflow: hidden;
+
+  padding-right: 0;
+  .el-popover__title, .el-popover__content { padding-right: 20px; }
+
+  .el-popover__title { flex: none;}
+
+  .el-popover__content {
+    flex: auto;
+    overflow-y: auto;
+  }
+}
 </style>