fix(Demo): demo-block-control样式问题；代码展开/收起的操作区未遮挡语言的问题

fix #8 #9
xinlei3166 · Oct 21, 2021 · a6f0e55 · a6f0e55
1 parent daf93e9
commit a6f0e55
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 2 deletions.
diff --git a/components/Demo.vue b/components/Demo.vue
@@ -131,7 +131,8 @@ export default {
       const innerHeight = window.innerHeight || document.body.clientHeight
       fixedControl.value = bottom > innerHeight && top + 44 <= innerHeight
       control.value.style.left = fixedControl.value ? `${left}px` : '0'
-      control.value.style.width = `${demoBlock.value.offsetWidth}px`
+      const dv = fixedControl.value ? 1 : 2
+      control.value.style.width = `${demoBlock.value.offsetWidth - dv}px`
     }
     const scrollHandler = throttle(_scrollHandler, 200)
     const removeScrollHandler = () => {
@@ -154,6 +155,7 @@ export default {
       if (!val) {
         fixedControl.value = false
         control.value.style.left = '0'
+        control.value.style.width = `${demoBlock.value.offsetWidth - 2}px`
         removeScrollHandler()
         return
       }
@@ -253,7 +255,7 @@ export default {
   bottom: 0;
   /* width: calc(100% - 320px - 48px - 200px - 1px); */
   border-right: solid 1px #eaeefb;
-  z-index: 1;
+  z-index: 2;
 }
 
 .demo-block-control .control-icon {

diff --git a/docs/guide/card.md b/docs/guide/card.md
@@ -92,3 +92,30 @@ const title = ref<any>('vitepress-theme-demoblock')
 ```
 
 :::
+
+## 基础用法
+
+基础的卡片用法。
+
+:::demo 使用`size`、`style`属性来定义 Card 的样式。
+
+```vue
+<template>
+  <div class="card-wrap">
+    <div class="card">xxx</div>
+    <div class="card">xxx</div>
+    <div class="card">xxx</div>
+  </div>
+</template>
+```
+:::
+
+## 基础用法
+
+基础的卡片用法。
+
+:::demo 使用`size`、`style`属性来定义 Card 的样式。
+
+```vue
+```
+:::