修改demo组件

packages/other/demo-block/src/main.vue

@@ -3,15 +3,21 @@
     <h2 v-if="$slots.title" >
       <slot name="title"/>
     </h2>
-    <p v-if="$slots.descript" >
+    <div v-if="$slots.descript" class="descript" >
       <slot name="descript"/>
-    </p>
+    </div>
     <div class="demo-content">
        <slot />
+       <div v-if="showCode" :class="[hoverControl ? 'hover' : '',]" class="footer" @mouseenter="hoverControl = true" @mouseleave="hoverControl = false" @click="showCode = !showCode">
+        <i :class="footerIcon"/>
+        <transition name="fade">
+          <span v-if="hover"><span class="label">{{ footerLabel }}</span></span>
+        </transition>
+      </div>
       <div v-if="showCode" class="demo-code">
         <slot name="code" class="code" />
       </div>
-      <div>
+      <div v-if="$slots.code" >
         <div :class="[hoverControl ? 'hover' : '',]" class="footer" @mouseenter="hoverControl = true" @mouseleave="hoverControl = false" @click="showCode = !showCode">
           <i :class="footerIcon"/>
           <transition name="fade">
@@ -48,17 +54,21 @@ export default {
 
 <style lang="scss" scoped>
 .demo-block{
+  overflow: auto;
+  margin-bottom: 20px;
   ::v-deep .el-card__body{
     padding: 0;
   }
   &.hover{
-    .demo-content{
-      box-shadow: 0 0 8px 0 rgb(232 237 250 / 60%), 0 2px 4px 0 rgb(232 237 250 / 50%);
-    }
+    box-shadow: 0 0 8px 0 rgb(232 237 250 / 60%), 0 2px 4px 0 rgb(232 237 250 / 50%);
     .footer{
       transform: translateX(-30px);
     }
   }
+  .descript{
+    white-space: pre-wrap;
+    margin: 10px 0;
+  }
   .demo-code{
     background: #ebebeb;
     padding: 10px;