m8-framework-mcp 1.0.0

package/docs/m8mpdoc-develop/018-EPUI/347/273/204/344/273/266/017-tooltip/346/226/207/345/255/227/346/217/220/347/244/272.md

@@ -0,0 +1,101 @@
+# Tooltip 提示信息
+
+移动端通过 alert 展示提示信息
+
+## 基础用法
+
+使用属性 content 设置提示内容
+
+```html
+<e-tooltip-m content="prompts info">
+    <e-button-m>展示提示信息</e-button-m>
+</e-tooltip-m>
+```
+
+## 设置 HTML 字符串
+
+content 属性可以设置为 HTML 字符串，若想要正确渲染字符串内容，需要设置 rawContent 属性为 `true`
+
+```html
+<e-tooltip-m rawContent content="<span>The content can be <strong>HTML</strong></span>">
+    <e-button-m>展示HTML信息</e-button-m>
+</e-tooltip-m>
+```
+
+## 禁用
+
+通过 `disabled` 属性禁用 tooltip 组件，禁用后不会触发事件，也不会展示 tooltip 内容。
+
+```html
+<e-tooltip-m disabled content="prompts info">
+    <e-button-m>禁用</e-button-m>
+</e-tooltip-m>
+```
+
+## 自定义内容
+
+通过 `content` 插槽自定义提示内容。
+
+```html
+<e-tooltip-m>
+    <template #content>
+        <span>Content</span>
+    </template>
+    <e-button-m>展示提示信息</e-button-m>
+</e-tooltip-m>
+```
+
+## API
+
+### Attributes
+
+| 属性名                    | 描述                                     | 类型    | 默认值  |
+| ------------------------- | ---------------------------------------- | ------- | ------- |
+| content                   | 显示内容，可以通过 slot#content 覆盖     | string  | -       |
+| raw-content               | 是否将 content 视为 HTML 字符串          | boolean | `false` |
+| visible / v-model:visible | 工具提示的可见性                         | boolean | `false` |
+| disabled                  | 工具提示是否被禁用                       | boolean | `false` |
+| show-after                | 出现延迟，以毫秒为单位                   | number  | `0`     |
+| hide-after                | 消失延迟，以毫秒为单位                   | number  | `0`     |
+| auto-close                | 自动隐藏工具提示的超时时间，以毫秒为单位 | number  | `0`     |
+| popper-class              | 工具提示弹出框的自定义类名               | string  | -       |
+| trigger                   | 工具提示被触发（显示）的方式             | `click` | `click` |
+
+### Slots
+
+| 属性名  | 描述           |
+| ------- | -------------- |
+| default | 提示框触发元素 |
+| content | 自定义弹框内容 |
+
+### Exposes
+
+| Name    | Description                                | Type                                              |
+| ------- | ------------------------------------------ | ------------------------------------------------- |
+| hide    | 隐藏弹框方法                               | `Function - (event?: Event \| undefined) => void` |
+| onOpen  | 暴露 onOpen 函数以管理 tooltip 的打开状态  | `Function - (event?: Event \| undefined) => void` |
+| onClose | 暴露 onClose 函数以管理 tooltip 的打开状态 | `Function - (event?: Event \| undefined) => void` |
+
+::: ifdef M84
+<iframe
+ src="//app.epoint.com.cn/m8mpdoc/showcase/m8.4/index.html#/modules/epshowcase/examples/e-tooltip-m"
+ frameborder=0
+ allowfullscreen class="ui-showcase-iframe">
+</iframe>
+::: endif
+
+<style>
+ .ui-showcase-iframe {
+    position: fixed;
+    right: 3.5vw;
+    top: 17%;
+    width: 375px;
+    height: 75vh;
+    box-shadow: 0 0 12px 6px #eee;
+    border-radius: 15px;
+ }
+ .main .markdown-body {
+    padding: 45px;
+    width: calc(97vw - 661px);
+}
+ </style>

package/docs/m8mpdoc-develop/018-EPUI/347/273/204/344/273/266/018-progress/350/277/233/345/272/246/346/235/241.md

@@ -0,0 +1,252 @@
+# Progress 进度条
+
+用于展示操作进度，告知用户当前状态和预期。
+
+## 线性进度条
+
+使用 `percentage` 属性设置百分比。这是**必需的**，必须在 `0-100` 之间。您可以通过设置 `format` 来自定义文本格式。
+
+```html
+<template>
+  <div class="demo-progress">
+    <e-progress-m :percentage="50" />
+    <e-progress-m :percentage="100" :format="format" />
+    <e-progress-m :percentage="100" status="success" />
+    <e-progress-m :percentage="100" status="warning" />
+    <e-progress-m :percentage="50" status="exception" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  const format = (percentage) =>
+    percentage === 100 ? "Full" : `${percentage}%`;
+</script>
+
+<style scoped>
+  .demo-progress .ep-progress--line {
+    margin-bottom: 15px;
+    width: 350px;
+  }
+</style>
+```
+
+## 内部百分比
+
+在这种情况下，百分比不占用额外的空间。
+
+`stroke-width` 属性决定了进度条的宽度，使用 `text-inside` 属性将描述放在进度条内部。
+
+```html
+<template>
+  <div class="demo-progress">
+    <e-progress-m :text-inside="true" :stroke-width="26" :percentage="70" />
+    <e-progress-m
+      :text-inside="true"
+      :stroke-width="24"
+      :percentage="100"
+      status="success"
+    />
+    <e-progress-m
+      :text-inside="true"
+      :stroke-width="22"
+      :percentage="80"
+      status="warning"
+    />
+    <e-progress-m
+      :text-inside="true"
+      :stroke-width="20"
+      :percentage="50"
+      status="exception"
+    />
+  </div>
+</template>
+
+<style scoped>
+  .demo-progress .ep-progress--line {
+    margin-bottom: 15px;
+    width: 350px;
+  }
+</style>
+```
+
+## 圆形进度条
+
+您可以指定 `type` 属性为 `circle` 以使用圆形进度条，使用 `width` 属性来改变圆的大小。
+
+也可以使用 `dashboard` 进阶为仪表盘进度条。
+
+```html
+<template>
+  <div class="demo-progress">
+    <e-progress-m type="circle" :percentage="0" />
+    <e-progress-m type="circle" :percentage="25" />
+    <e-progress-m type="circle" :percentage="100" status="success" />
+    <e-progress-m type="circle" :percentage="70" status="warning" />
+    <e-progress-m type="circle" :percentage="50" status="exception" />
+  </div>
+</template>
+<style scoped>
+  .demo-progress .ep-progress--line {
+    margin-bottom: 15px;
+    width: 350px;
+  }
+  .demo-progress .ep-progress--circle {
+    margin-right: 15px;
+  }
+</style>
+```
+
+## 不确定进度
+
+使用 `indeterminate` 属性来设置不确定的进度，使用 `duration` 来控制动画持续时间。
+
+```html
+<template>
+  <div class="demo-progress">
+    <e-progress-m :percentage="50" :indeterminate="true" />
+    <e-progress-m :percentage="100" :format="format" :indeterminate="true" />
+    <e-progress-m
+      :percentage="100"
+      status="success"
+      :indeterminate="true"
+      :duration="5"
+    />
+    <e-progress-m
+      :percentage="100"
+      status="warning"
+      :indeterminate="true"
+      :duration="1"
+    />
+    <e-progress-m :percentage="50" status="exception" :indeterminate="true" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  const format = (percentage) =>
+    percentage === 100 ? "Full" : `${percentage}%`;
+</script>
+<style scoped>
+  .demo-progress .ep-progress--line {
+    margin-bottom: 15px;
+    width: 350px;
+  }
+</style>
+```
+
+## 条纹进度
+
+使用 `striped` 属性来设置条纹进度。您可以使用 `striped-flow` 来使条纹流动，使用 `duration` 来控制动画持续时间。
+
+```html
+<template>
+  <div class="demo-progress">
+    <e-progress-m :percentage="50" :stroke-width="15" striped />
+    <e-progress-m
+      :percentage="30"
+      :stroke-width="15"
+      status="warning"
+      striped
+      striped-flow
+    />
+    <e-progress-m
+      :percentage="100"
+      :stroke-width="15"
+      status="success"
+      striped
+      striped-flow
+      :duration="10"
+    />
+    <e-progress-m
+      :percentage="percentage"
+      :stroke-width="15"
+      status="exception"
+      striped
+      striped-flow
+      :duration="duration"
+    />
+    <e-button-group>
+      <e-button :icon="Minus" @click="decrease" />
+      <e-button :icon="Plus" @click="increase" />
+    </e-button-group>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { computed, ref } from "vue";
+  import { Minus, Plus } from "@epoint-mfe/eui-components/eui-icons";
+
+  const percentage = ref<number>(70);
+  const duration = computed(() => Math.floor(percentage.value / 10));
+
+  const increase = () => {
+    percentage.value += 10;
+    if (percentage.value > 100) {
+      percentage.value = 100;
+    }
+  };
+  const decrease = () => {
+    percentage.value -= 10;
+    if (percentage.value < 0) {
+      percentage.value = 0;
+    }
+  };
+</script>
+
+<style scoped>
+  .demo-progress .ep-progress--line {
+    margin-bottom: 15px;
+    width: 350px;
+  }
+</style>
+```
+
+## API
+
+### Attributes
+
+| 属性名           | 描述                                                | 类型                                                                                                        | 默认值 |
+| -------------- | ---------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | ------- |
+| percentage     | 百分比，**必需**                                           | `number` - `(0-100)`                                                                                          | 0       |
+| type           | 进度条类型                                                 | `string` - 可选 `'line' \| 'circle' \| 'dashboard'`                                                                  | line    |
+| stroke-width   | 进度条宽度                                                 | `number`                                                                                                   | 6       |
+| text-inside    | 是否将百分比显示在进度条内部，仅当 `type` 为 'line' 时有效 | `boolean`                                                                                                  | false   |
+| status         | 进度条当前状态                                             | `string`- 可选`'success' \| 'exception' \| 'warning'`                                                              | —       |
+| indeterminate  | 设置不确定进度                                             | `boolean`                                                                                                  | false   |
+| duration       | 控制不确定进度或条纹流动进度的动画持续时间                 | `number`                                                                                                   | 3       |
+| color          | 进度条的背景颜色，覆盖 `status` 属性                       | `string` / `function``(percentage: number) => string` / `Array` - `{ color: string; percentage: number }[]` | ''      |
+| width          | 圆形进度条的画布宽度                                       | `number`                                                                                                   | 126     |
+| show-text      | 是否显示百分比                                             | `boolean`                                                                                                  | true    |
+| stroke-linecap | 圆形/仪表板类型进度条路径末端的形状                        | `string`-可选`'butt' \| 'round' \| 'square'`                                                                      | round   |
+| format         | 自定义文本格式                                             | `function``(percentage: number) => string`                                                                 | —       |
+| striped        | 进度条是否带条纹                                           | `boolean`                                                                                                  | false   |
+| striped-flow   | 条纹是否流动                                               | `boolean`                                                                                                  | false   |
+
+### Slots
+
+| 属性名    | 描述                         |
+| ------- | ----------------------------------- |
+| default | 自定义内容，参数为 `{ percentage }` |
+
+::: ifdef M84
+<iframe
+ src="//app.epoint.com.cn/m8mpdoc/showcase/m8.4/index.html#/modules/epshowcase/examples/e-progress-m"
+ frameborder=0
+ allowfullscreen class="ui-showcase-iframe">
+</iframe>
+::: endif
+
+<style>
+ .ui-showcase-iframe {
+    position: fixed;
+    right: 3.5vw;
+    top: 17%;
+    width: 375px;
+    height: 75vh;
+    box-shadow: 0 0 12px 6px #eee;
+    border-radius: 15px;
+ }
+ .main .markdown-body {
+    padding: 45px;
+    width: calc(97vw - 661px);
+}
+ </style>

package/docs/m8mpdoc-develop/018-EPUI/347/273/204/344/273/266/019-layout/345/270/203/345/261/200.md

@@ -0,0 +1,324 @@
+# Layout 布局
+
+通过基础的 24 分栏，迅速简便地创建布局。
+
+TIP
+
+组件默认使用 Flex 布局，不需要手动设置 `type="flex"`。
+
+请注意父容器避免使用 `inline` 相关样式，会导致组件宽度不能撑满。
+
+## 基础布局
+
+使用列创建基础网格布局。
+
+通过 `row` 和 `col` 组件，并通过 `col` 组件的 `span` 属性我们就可以自由地组合布局。
+
+```html
+<template>
+  <e-row-m>
+    <e-col-m :span="24"><div class="grid-content ep-bg-purple-dark" /></e-col-m>
+  </e-row-m>
+  <e-row-m>
+    <e-col-m :span="12"><div class="grid-content ep-bg-purple" /></e-col-m>
+    <e-col-m :span="12"><div class="grid-content ep-bg-purple-light" /></e-col-m>
+  </e-row-m>
+  <e-row-m>
+    <e-col-m :span="8"><div class="grid-content ep-bg-purple" /></e-col-m>
+    <e-col-m :span="8"><div class="grid-content ep-bg-purple-light" /></e-col-m>
+    <e-col-m :span="8"><div class="grid-content ep-bg-purple" /></e-col-m>
+  </e-row-m>
+  <e-row-m>
+    <e-col-m :span="6"><div class="grid-content ep-bg-purple" /></e-col-m>
+    <e-col-m :span="6"><div class="grid-content ep-bg-purple-light" /></e-col-m>
+    <e-col-m :span="6"><div class="grid-content ep-bg-purple" /></e-col-m>
+    <e-col-m :span="6"><div class="grid-content ep-bg-purple-light" /></e-col-m>
+  </e-row-m>
+  <e-row-m>
+    <e-col-m :span="4"><div class="grid-content ep-bg-purple" /></e-col-m>
+    <e-col-m :span="4"><div class="grid-content ep-bg-purple-light" /></e-col-m>
+    <e-col-m :span="4"><div class="grid-content ep-bg-purple" /></e-col-m>
+    <e-col-m :span="4"><div class="grid-content ep-bg-purple-light" /></e-col-m>
+    <e-col-m :span="4"><div class="grid-content ep-bg-purple" /></e-col-m>
+    <e-col-m :span="4"><div class="grid-content ep-bg-purple-light" /></e-col-m>
+  </e-row-m>
+</template>
+
+<style lang="scss" scoped>
+.ep-row {
+  margin-bottom: 20px;
+}
+.ep-row:last-child {
+  margin-bottom: 0;
+}
+.ep-col {
+  border-radius: 4px;
+}
+
+.grid-content {
+  border-radius: 4px;
+  min-height: 36px;
+}
+</style>
+```
+
+## 分栏间隔
+
+支持列间距。
+
+行提供 `gutter` 属性来指定列之间的间距，其默认值为 0。
+
+```html
+<template>
+  <e-row-m :gutter="20">
+    <e-col-m :span="6"><div class="grid-content ep-bg-purple" /></e-col-m>
+    <e-col-m :span="6"><div class="grid-content ep-bg-purple" /></e-col-m>
+    <e-col-m :span="6"><div class="grid-content ep-bg-purple" /></e-col-m>
+    <e-col-m :span="6"><div class="grid-content ep-bg-purple" /></e-col-m>
+  </e-row-m>
+</template>
+
+<style scoped>
+.ep-row {
+  margin-bottom: 20px;
+}
+.ep-row:last-child {
+  margin-bottom: 0;
+}
+.ep-col {
+  border-radius: 4px;
+}
+
+.grid-content {
+  border-radius: 4px;
+  min-height: 36px;
+}
+</style>
+```
+
+## 混合布局
+
+通过基础的 1/24 分栏任意扩展组合形成较为复杂的混合布局。
+
+```html
+<template>
+  <e-row-m :gutter="20">
+    <e-col-m :span="16"><div class="grid-content ep-bg-purple" /></e-col-m>
+    <e-col-m :span="8"><div class="grid-content ep-bg-purple" /></e-col-m>
+  </e-row-m>
+  <e-row-m :gutter="20">
+    <e-col-m :span="8"><div class="grid-content ep-bg-purple" /></e-col-m>
+    <e-col-m :span="8"><div class="grid-content ep-bg-purple" /></e-col-m>
+    <e-col-m :span="4"><div class="grid-content ep-bg-purple" /></e-col-m>
+    <e-col-m :span="4"><div class="grid-content ep-bg-purple" /></e-col-m>
+  </e-row-m>
+  <e-row-m :gutter="20">
+    <e-col-m :span="4"><div class="grid-content ep-bg-purple" /></e-col-m>
+    <e-col-m :span="16"><div class="grid-content ep-bg-purple" /></e-col-m>
+    <e-col-m :span="4"><div class="grid-content ep-bg-purple" /></e-col-m>
+  </e-row-m>
+</template>
+
+<style scoped>
+.ep-row {
+  margin-bottom: 20px;
+}
+.ep-row:last-child {
+  margin-bottom: 0;
+}
+.ep-col {
+  border-radius: 4px;
+}
+
+.grid-content {
+  border-radius: 4px;
+  min-height: 36px;
+}
+</style>
+```
+
+## 列偏移
+
+您可以指定列偏移量。
+
+通过制定 `col` 组件的 `offset` 属性可以指定分栏偏移的栏数。
+
+```html
+<template>
+  <e-row-m :gutter="20">
+    <e-col-m :span="6"><div class="grid-content ep-bg-purple" /></e-col-m>
+    <e-col-m :span="6" :offset="6"><div class="grid-content ep-bg-purple" /></e-col-m>
+  </e-row-m>
+  <e-row-m :gutter="20">
+    <e-col-m :span="6" :offset="6"><div class="grid-content ep-bg-purple" /></e-col-m>
+    <e-col-m :span="6" :offset="6"><div class="grid-content ep-bg-purple" /></e-col-m>
+  </e-row-m>
+  <e-row-m :gutter="20">
+    <e-col-m :span="12" :offset="6"><div class="grid-content ep-bg-purple" /></e-col-m>
+  </e-row-m>
+</template>
+
+<style scoped>
+.ep-row {
+  margin-bottom: 20px;
+}
+.ep-row:last-child {
+  margin-bottom: 0;
+}
+.ep-col {
+  border-radius: 4px;
+}
+
+.grid-content {
+  border-radius: 4px;
+  min-height: 36px;
+}
+</style>
+```
+
+## 对齐方式
+
+默认使用 flex 布局来对分栏进行灵活的对齐。
+
+您可以通过 `justify` 属性来定义子元素的排版方式，其取值为 start、center、end、space-between、space-around 或 space-evenly。
+
+```html
+<template>
+  <e-row-m class="row-bg">
+    <e-col-m :span="6"><div class="grid-content ep-bg-purple" /></e-col-m>
+    <e-col-m :span="6"><div class="grid-content ep-bg-purple-light" /></e-col-m>
+    <e-col-m :span="6"><div class="grid-content ep-bg-purple" /></e-col-m>
+  </e-row-m>
+  <e-row-m class="row-bg" justify="center">
+    <e-col-m :span="6"><div class="grid-content ep-bg-purple" /></e-col-m>
+    <e-col-m :span="6"><div class="grid-content ep-bg-purple-light" /></e-col-m>
+    <e-col-m :span="6"><div class="grid-content ep-bg-purple" /></e-col-m>
+  </e-row-m>
+  <e-row-m class="row-bg" justify="end">
+    <e-col-m :span="6"><div class="grid-content ep-bg-purple" /></e-col>
+    <e-col-m :span="6"><div class="grid-content ep-bg-purple-light" /> </e-col>
+    <e-col-m :span="6"><div class="grid-content ep-bg-purple" /></e-col>
+  </e-row-m>
+  <e-row-m class="row-bg" justify="space-between">
+    <e-col-m :span="6"><div class="grid-content ep-bg-purple" /></e-col-m>
+    <e-col-m :span="6"><div class="grid-content ep-bg-purple-light" /></e-col-m>
+    <e-col-m :span="6"><div class="grid-content ep-bg-purple" /></e-col-m>
+  </e-row-m>
+  <e-row-m class="row-bg" justify="space-around">
+    <e-col-m :span="6"><div class="grid-content ep-bg-purple" /></e-col-m>
+    <e-col-m :span="6"><div class="grid-content ep-bg-purple-light" /></e-col-m>
+    <e-col-m :span="6"><div class="grid-content ep-bg-purple" /></e-col-m>
+  </e-row-m>
+  <e-row-m class="row-bg" justify="space-evenly">
+    <e-col-m :span="6"><div class="grid-content ep-bg-purple" /></e-col-m>
+    <e-col-m :span="6"><div class="grid-content ep-bg-purple-light" /></e-col-m>
+    <e-col-m :span="6"><div class="grid-content ep-bg-purple" /></e-col-m>
+  </e-row-m>
+</template>
+
+<style scoped>
+.ep-row {
+  margin-bottom: 20px;
+}
+.ep-row:last-child {
+  margin-bottom: 0;
+}
+.ep-col {
+  border-radius: 4px;
+}
+
+.grid-content {
+  border-radius: 4px;
+  min-height: 36px;
+}
+</style>
+```
+
+## 响应式布局
+
+参照了 Bootstrap 的 响应式设计，预设了五个响应尺寸：xs、sm、md、lg 和 xl。
+
+```html
+<template>
+  <e-row-m :gutter="10">
+    <e-col-m :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content ep-bg-purple" /></e-col-m>
+    <e-col-m :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content ep-bg-purple-light" /></e-col-m>
+    <e-col-m :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content ep-bg-purple" /></e-col-m>
+    <e-col-m :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content ep-bg-purple-light" /></e-col-m>
+  </e-row-m>
+</template>
+
+<style scoped>
+.ep-col {
+  border-radius: 4px;
+}
+
+.grid-content {
+  border-radius: 4px;
+  min-height: 36px;
+}
+</style>
+
+```
+
+## Row API
+
+### Row Attributes
+
+| Name    | Description               | Type                                                         | Default |
+| :------ | :------------------------ | :----------------------------------------------------------- | :------ |
+| gutter  | 栅格间隔                  | `number`                                                     | 0       |
+| justify | flex 布局下的水平排列方式 | `enum`-`'start' \| 'end' \| 'center' \| 'space-around' \| 'space-between' \| 'space-evenly'` | start   |
+| align   | flex 布局下的垂直排列方式 | `enum`-`'top' \| 'middle' \| 'bottom'`                       | top     |
+
+### Row Slots
+
+| **Name** | Description    | Subtags |
+| :------- | :------------- | :------ |
+| Default  | 自定义默认内容 | Col     |
+
+## Col API
+
+### Col Attributes
+
+| Name   | Description                            | Type                                                         | Default |
+| :----- | :------------------------------------- | :----------------------------------------------------------- | :------ |
+| span   | 栅格占据的列数                         | `number`                                                     | 24      |
+| offset | 栅格左侧的间隔格数                     | `number`                                                     | 0       |
+| push   | 栅格向右移动格数                       | `number`                                                     | 0       |
+| pull   | 栅格向左移动格数                       | `number`                                                     | 0       |
+| xs     | `<768px` 响应式栅格数或者栅格属性对象  | `number` / `object`-`{span?: number, offset?: number, pull?: number, push?: number}` | —       |
+| sm     | `≥768px` 响应式栅格数或者栅格属性对象  | `number` / `object`-`{span?: number, offset?: number, pull?: number, push?: number}` | —       |
+| md     | `≥992px` 响应式栅格数或者栅格属性对象  | `number` / `object`-`{span?: number, offset?: number, pull?: number, push?: number}` | —       |
+| lg     | `≥1200px` 响应式栅格数或者栅格属性对象 | `number` / `object`-`{span?: number, offset?: number, pull?: number, push?: number}` | —       |
+| xl     | `≥1920px` 响应式栅格数或者栅格属性对象 | `number` / `object`-`{span?: number, offset?: number, pull?: number, push?: number}` | —       |
+
+### Col Slots
+
+| Name    | Description    |
+| :------ | :------------- |
+| Default | 自定义默认内容 |
+
+::: ifdef M84
+<iframe
+ src="//app.epoint.com.cn/m8mpdoc/showcase/m8.4/index.html#/modules/epshowcase/examples/e-layout-m"
+ frameborder=0
+ allowfullscreen class="ui-showcase-iframe">
+</iframe>
+::: endif
+
+<style>
+ .ui-showcase-iframe {
+    position: fixed;
+    right: 3.5vw;
+    top: 17%;
+    width: 375px;
+    height: 75vh;
+    box-shadow: 0 0 12px 6px #eee;
+    border-radius: 15px;
+ }
+ .main .markdown-body {
+    padding: 45px;
+    width: calc(97vw - 661px);
+}
+ </style>