m8-framework-mcp 1.0.0 → 1.0.3

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

@@ -1,101 +0,0 @@
-# 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

@@ -1,252 +0,0 @@
-# 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

@@ -1,324 +0,0 @@
-# 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>