✨(release): 1.3.0

2022-07-20 13:26:50 +08:00 · 2022-07-20 13:26:50 +08:00 · e8fb49cd38
commit e8fb49cd38
parent f9bb4edcac
12 changed files with 124 additions and 92 deletions
--- a/package/component/package.json
+++ b/package/component/package.json
@ -1,6 +1,6 @@
 {
  "name": "@layui/layui-vue",
-  "version": "1.3.0-alpha.3",
+  "version": "1.3.0",
  "author": "就眠儀式",
  "license": "MIT",
  "description": "a component library for Vue 3 base on layui-vue",
--- a/package/component/script/build.es.ts
+++ b/package/component/script/build.es.ts
@ -37,6 +37,7 @@ const matchModule: string[] = [
  "tooltip",
  "page",
  "scroll",
+  "radio"
 ];

 export default (): UserConfigExport => {
--- a/package/component/src/component/checkbox/index.vue
+++ b/package/component/src/component/checkbox/index.vue
@ -17,7 +17,7 @@ export interface LayCheckboxProps {
  isIndeterminate?: boolean;
  modelValue?: boolean | Array<string | object>;
  disabled?: boolean;
-  size?: 'lg' | 'md' | 'sm' | 'xs';
+  size?: "lg" | "md" | "sm" | "xs";
 }

 const props = withDefaults(defineProps<LayCheckboxProps>(), {
@ -25,7 +25,7 @@ const props = withDefaults(defineProps<LayCheckboxProps>(), {
  modelValue: false,
  disabled: false,
  label: "",
-  size: "md"
+  size: "md",
 });

 const checkboxGroup: any = inject("checkboxGroup", {});
@ -124,7 +124,8 @@ const isDisabled = computed(() => {
      :lay-skin="skin"
    >
      <span class="layui-checkbox-label"
-        ><slot>{{ label }}</slot></span>
+        ><slot>{{ label }}</slot></span
+      >
      <lay-icon
        :type="
          props.isIndeterminate && isChecked
--- a/package/document-component/src/document/zh-CN/components/checkbox.md
+++ b/package/document-component/src/document/zh-CN/components/checkbox.md
@ -259,6 +259,8 @@ export default {
 | v-model             | 是否选中      | `true` `false`       |
 | isIndeterminate     | 半选状态      | `true` `false`       |
 | disabled            | 是否禁用      | `true` `false`       |
+| size                | 尺寸          | `lg` `md` `sm` `xs`         |
+

 :::

--- a/package/document-component/src/document/zh-CN/components/menu.md
+++ b/package/document-component/src/document/zh-CN/components/menu.md
@ -13,7 +13,7 @@
 ::: demo

 <template>
-  <lay-menu v-model:selectedKey="selectedKey" v-model:openKeys="openKeys1">
+  <lay-menu v-model:selected-key="selectedKey" v-model:open-keys="openKeys1">
    <lay-menu-item id="1">首页</lay-menu-item>
    <lay-menu-item id="2">首页</lay-menu-item>
    <lay-menu-item id="3">首页</lay-menu-item> 
@ -59,7 +59,7 @@ export default {
 ::: demo

 <template>
-  <lay-menu :selectedKey="selectedKey" @changeSelectedKey="changeSelectedKey" @changeOpenKeys="changeOpenKeys" v-model:openKeys="openKeys2" :tree="true">
+  <lay-menu :selected-key="selectedKey" @change-selected-Key="changeSelectedKey" @change-open-keys="changeOpenKeys" v-model:openKeys="openKeys2" :tree="true">
    <lay-menu-item id="1">首页</lay-menu-item>
    <lay-menu-item id="2">首页</lay-menu-item>
    <lay-menu-item id="3">首页</lay-menu-item> 
@ -115,7 +115,7 @@ export default {
 ::: demo

 <template>
-  <lay-menu :level="isLevel" v-model:selectedKey="selectedKey" inverted="true" v-model:openKeys="openKeys3" :tree="true">
+  <lay-menu :level="isLevel" v-model:selected-key="selectedKey" inverted="true" v-model:open-keys="openKeys3" :tree="true">
    <lay-menu-item id="1">首页</lay-menu-item>
    <lay-menu-item id="2">首页</lay-menu-item>
    <lay-menu-item id="3">首页</lay-menu-item> 
@ -164,7 +164,7 @@ export default {
 ::: demo

 <template>
-  <lay-menu v-model:selectedKey="selectedKey" theme="light" v-model:openKeys="openKeys4" :tree="true">
+  <lay-menu v-model:selected-key="selectedKey" theme="light" v-model:openKeys="openKeys4" :tree="true">
    <lay-menu-item id="1">
      <template #title>
        菜单
@ -233,7 +233,7 @@ export default {
 ::: demo

 <template>
-  <lay-menu v-model:selectedKey="selectedKey" v-model:openKeys="openKeys5" v-model:tree="isTree">
+  <lay-menu v-model:selected-key="selectedKey" v-model:open-keys="openKeys5" v-model:tree="isTree">
    <lay-menu-item id="1">
      <router-link to="">
        <lay-icon type="layui-icon-home"></lay-icon> 
@ -293,7 +293,7 @@ export default {
  <lay-switch v-model="collapse"></lay-switch>
  <br/>
  <br/>
-  <lay-menu v-model:selectedKey="selectedKey" v-model:tree="isTree" v-model:openKeys="openKeys6" :collapse="collapse">
+  <lay-menu v-model:selected-key="selectedKey" v-model:tree="isTree" v-model:open-keys="openKeys6" :collapse="collapse">
    <lay-menu-item id="1">
        <template #icon>
          <lay-icon type="layui-icon-home"></lay-icon> 
@ -431,12 +431,12 @@ export default {
 <template>
  <lay-switch v-model="collapse20"></lay-switch>&nbsp;&nbsp;
  <lay-switch v-model="active20">
-    <template #onswitch-icon>★</template>
-    <template #unswitch-icon>☀</template>
+    <template #onswitch-icon>亮</template>
+    <template #unswitch-icon>黑</template>
  </lay-switch>
  <br/>
  <br/>
-  <lay-menu v-model:selectedKey="selectedKey20" :theme="active20 ? 'dark' : 'light'" v-model:tree="isTree20" v-model:openKeys="openKeys20" :collapse="collapse20">
+  <lay-menu v-model:selected-key="selectedKey20" :theme="active20 ? 'dark' : 'light'" v-model:tree="isTree20" v-model:open-keys="openKeys20" :collapse="collapse20">
    <lay-menu-item id="1">
        <template #icon>
          <lay-icon type="layui-icon-home"></lay-icon> 
@ -599,7 +599,7 @@ export default {
 ::: demo

 <template>
-  <lay-menu v-model:selectedKey="selectedKey" :collapse-transition="collapseTransition" v-model:openKeys="openKeys7" v-model:tree="isTree">
+  <lay-menu v-model:selected-key="selectedKey" :collapse-transition="collapseTransition" v-model:open-keys="openKeys7" v-model:tree="isTree">
    <lay-menu-item id="1">
      <router-link to="">
        <lay-icon type="layui-icon-home"></lay-icon> 
@ -658,7 +658,7 @@ export default {
 ::: demo

 <template>
-  <lay-menu v-model:selectedKey="selectedKey" v-model:openKeys="openKeys7" v-model:tree="isTree">
+  <lay-menu v-model:selected-key="selectedKey" v-model:open-keys="openKeys7" v-model:tree="isTree">
    <lay-menu-item id="1">
      <router-link to="">
        <lay-icon type="layui-icon-home"></lay-icon> 
--- a/package/document-component/src/document/zh-CN/components/radio.md
+++ b/package/document-component/src/document/zh-CN/components/radio.md
@ -174,7 +174,7 @@ export default {
 | value   | 绑定值        | --     |
 | v-model | 选中值        | --     |
 | disabled   | 是否禁用    | `false`     |
-
+| size | 尺寸       | `lg` `md` `sm` `xs`         |
 :::

 ::: title Radio 事件
--- a/package/document-component/src/document/zh-CN/components/switch.md
+++ b/package/document-component/src/document/zh-CN/components/switch.md
@ -36,7 +36,7 @@ export default {
 ::: title 事件回调
 :::

-::: demo
+::: demo 通过 `change` 事件, 在操作后完成一些后续处理。

 <template>
  <lay-switch v-model="active2" @change="change"></lay-switch>
@ -67,7 +67,7 @@ export default {
 ::: title 禁用状态
 :::

-::: demo
+::: demo 通过 `disabled` 属性, 禁用开关操作。

 <template>
  <lay-switch v-model="active3" :disabled="disabled"></lay-switch>
@ -94,7 +94,7 @@ export default {
 ::: title 修改描述
 :::

-::: demo
+::: demo 通过 `onswitch-text` 与 `unswitch-text` 属性, 设置不同状态的描述文字。 

 <template>
  <lay-switch v-model="active4" onswitch-text="白天"  unswitch-text="夜间"></lay-switch>
@ -120,7 +120,7 @@ export default {
 ::: title 图标插槽
 :::

-::: demo
+::: demo 通过 `onswitch-icon` 与 `unswitch-icon` 属性, 设置不同状态的展示图标。 

 <template>
  <lay-switch v-model="active5">
@ -175,7 +175,7 @@ export default {
 ::: title 尺寸
 :::

-::: demo
+::: demo 通过 `size` 属性, 设置尺寸。

 <template>
  <div style='display:flex;align-items: flex-end;'>
--- a/package/document-component/src/document/zh-CN/components/table.md
+++ b/package/document-component/src/document/zh-CN/components/table.md
@ -13,7 +13,7 @@
 ::: demo 使用 `lay-table` 标签, 创建表格

 <template>
-  <lay-table :columns="columns1" :dataSource="dataSource1"></lay-table>
+  <lay-table :columns="columns1" :data-source="dataSource1"></lay-table>
 </template>

 <script>
@ -70,7 +70,7 @@ export default {
    <lay-radio v-model="size2" name="action" value="md">md</lay-radio>
    <lay-radio v-model="size2" name="action" value="lg">lg</lay-radio>
  </lay-form>
-  <lay-table :columns="columns2" :dataSource="dataSource2" :size="size2"></lay-table>
+  <lay-table :columns="columns2" :data-source="dataSource2" :size="size2"></lay-table>
 </template>

 <script>
@ -119,7 +119,7 @@ export default {
 ::: demo

 <template>
-  <lay-table :columns="columns3" :dataSource="dataSource3" :page="page3" @change="change3"></lay-table>
+  <lay-table :columns="columns3" :data-source="dataSource3" :page="page3" @change="change3"></lay-table>
 </template>

 <script>
@ -179,7 +179,7 @@ export default {
 ::: demo

 <template>
-  <lay-table :columns="columns4" :dataSource="dataSource4"></lay-table>
+  <lay-table :columns="columns4" :data-source="dataSource4"></lay-table>
 </template>

 <script>
@ -226,7 +226,7 @@ export default {
 ::: demo 当表格内容较多不能一次性完全展示时。

 <template>
-  <lay-table :columns="columns6" :dataSource="dataSource6">
+  <lay-table :columns="columns6" :data-source="dataSource6">
      <template v-slot:expand="{ data }"> 
        {{ data }} 
      </template>
@ -276,7 +276,7 @@ export default {
 ::: demo 树形数据的展示，当数据中有 children 字段时会自动展示为树形表格, 通过设置 indentSize 以控制每一层的缩进宽度, 使用 childrenColumnName 替换默认字段

 <template>
-  <lay-table :columns="columns7" :dataSource="dataSource7">
+  <lay-table :columns="columns7" :data-source="dataSource7">
    <template #score="{ data }">{{ data }}</template>
  </lay-table>
 </template>
@ -320,7 +320,7 @@ export default {
 ::: demo 设置 `height` 或者 `max-height` 即可实现

 <template>
-  <lay-table :columns="columns8" :dataSource="dataSource8" size="sm" max-height="300px"></lay-table>
+  <lay-table :columns="columns8" :data-source="dataSource8" size="sm" max-height="300px"></lay-table>
 </template>

 <script>
@ -380,7 +380,7 @@ export default {
 ::: demo 通过 `even` 属性, 开启斑马条纹, 默认为 false。

 <template>
-  <lay-table :columns="columns1" :dataSource="dataSource1" even></lay-table>
+  <lay-table :columns="columns1" :data-source="dataSource1" even></lay-table>
 </template>

 <script>
@ -434,7 +434,7 @@ export default {
 ::: demo 通过 `cellStyle` `rowStyle` `cellClassName` `rowClassName` 属性, 自定义单元格样式。

 <template>
-  <lay-table :columns="columns1" :dataSource="dataSource1" :cellStyle="cellStyle" :rowStyle="rowStyle"></lay-table>
+  <lay-table :columns="columns1" :data-source="dataSource1" :cell-style="cellStyle" :row-style="rowStyle"></lay-table>
 </template>

 <script>
@ -502,9 +502,9 @@ export default {
 ::: demo 通过 `skin` 属性, 切换 table 风格。

 <template>
-  <lay-table :columns="columns1" :dataSource="dataSource1" skin="line"></lay-table>
-  <lay-table :columns="columns1" :dataSource="dataSource1" skin="nob" :even="true"></lay-table>
-  <lay-table :columns="columns1" :dataSource="dataSource1" skin="row"></lay-table>
+  <lay-table :columns="columns1" :data-source="dataSource1" skin="line"></lay-table>
+  <lay-table :columns="columns1" :data-source="dataSource1" skin="nob" :even="true"></lay-table>
+  <lay-table :columns="columns1" :data-source="dataSource1" skin="row"></lay-table>
 </template>

 <script>
@ -558,7 +558,7 @@ export default {
 ::: demo 通过 `fixed` 属性实现列固定, 可选值为 `left` 与 `right`。

 <template>
-  <lay-table :columns="columns20" :dataSource="dataSource20"></lay-table>
+  <lay-table :columns="columns20" :data-source="dataSource20"></lay-table>
 </template>

 <script>
@ -619,7 +619,7 @@ export default {
 ::: demo 通过 `columns` 配置 `type:'number'` 开启序号列。

 <template>
-  <lay-table :columns="columns21" :dataSource="dataSource21"></lay-table>
+  <lay-table :columns="columns21" :data-source="dataSource21"></lay-table>
 </template>

 <script>
@ -679,7 +679,7 @@ export default {
 ::: demo 通过 `columns` 配置 `type:'checkbox'` 开启单选列。

 <template>
-  <lay-table :columns="columns23" :dataSource="dataSource23"></lay-table>
+  <lay-table :columns="columns23" :data-source="dataSource23"></lay-table>
 </template>

 <script>
@ -739,7 +739,7 @@ export default {
 ::: demo 通过 `columns` 配置 `type:'radio'` 开启单选列。

 <template>
-  <lay-table :columns="columns24" :dataSource="dataSource24" v-model:selectedKey="selectedKey24"></lay-table>
+  <lay-table :columns="columns24" :data-source="dataSource24" v-model:selected-key="selectedKey24"></lay-table>
 </template>

 <script>
@ -802,7 +802,7 @@ export default {
 ::: demo 通过 `columns` 配置 `type:'radio'` 开启单选列。

 <template>
-  <lay-table :columns="columns25" :dataSource="dataSource25"></lay-table>
+  <lay-table :columns="columns25" :data-source="dataSource25"></lay-table>
 </template>

 <script>
@ -855,7 +855,7 @@ export default {

 <template>
  <lay-button @click="changeDataSource22">更新数据</lay-button>
-  <lay-table :columns="columns22" :dataSource="dataSource22"></lay-table>
+  <lay-table :columns="columns22" :data-source="dataSource22"></lay-table>
 </template>

 <script>
@ -918,7 +918,7 @@ export default {
 ::: demo 通过 `columns` 配置 `totalRow` 开启行统计。

 <template>
-  <lay-table :columns="columns26" :dataSource="dataSource26"></lay-table>
+  <lay-table :columns="columns26" :data-source="dataSource26"></lay-table>
 </template>

 <script>
@ -977,7 +977,7 @@ export default {
 ::: demo

 <template>
-  <lay-table :columns="columns5" id="id" :expandIndex="1" :dataSource="dataSource5" v-model:selectedKeys="selectedKeys5" :checkbox="checkbox5" :default-toolbar="defaultToolbar5" @row="rowClick5">
+  <lay-table :columns="columns5" id="id" :expand-index="1" :data-source="dataSource5" v-model:selected-keys="selectedKeys5" :checkbox="checkbox5" :default-toolbar="defaultToolbar5" @row="rowClick5">
    <template v-slot:toolbar>
      <lay-button size="sm">新增</lay-button>
      <lay-button size="sm">删除</lay-button>
@ -1116,6 +1116,7 @@ export default {
 | cellClassName        | 列类名称 function(row, column, rowIndex, columnIndex)               | `string` `function`   | --    | -- |
 | rowClassName         | 行类名称 function(row, rowIndex)                | `string` `function`  | --   | -- |
 | skin                 | 风格                | `string` | --   | `line` `row` `nob` |
+| expand-index         | 展开所在列                | `number` | --   | -- |

 :::

--- a/package/document-component/src/document/zh-CN/guide/changelog.md
+++ b/package/document-component/src/document/zh-CN/guide/changelog.md
@ -14,7 +14,7 @@
      <ul> 
      <a name="1-3-0"></a> 
      <li> 
-        <h3>1.3.0 <span class="layui-badge-rim">2022-07-14</span></h3> 
+        <h3>1.3.0 <span class="layui-badge-rim">2022-07-20</span></h3> 
        <ul>         
          <li>[新增] input 组件 append 与 prepend 插槽。</li>
          <li>[新增] input 组件 password 属性, 开启密码模式。</li>
@ -29,6 +29,7 @@
          <li>[新增] date-picker 组件 年月日 范围选择, 重构代码。</li>
          <li>[新增] date-picker 组件 allow-clear 属性, 开启内容清空操作。</li>
          <li>[新增] date-picker 组件 readonly 属性, 开启只读模式。</li>
+          <li>[新增] checkbox 组件 size 属性, 用于设置 checkbox 尺寸。</li>
          <li>[新增] radio 组件 size 属性, 用于设置 radio 尺寸。</li>
          <li>[新增] switch 组件 size 属性, 用于设置 switch 尺寸。</li>
          <li>[修复] date-picker 组件 modelValue 属性, 空值报错。</li>
--- a/package/document-component/src/document/zh-CN/guide/member.md
+++ b/package/document-component/src/document/zh-CN/guide/member.md
@ -165,7 +165,7 @@
 :::

 ::: quote
-在 人 的 尺 度 里，世 界 既 无 始，也 无 终，唯 一 的 信 仰 是，总 有 人 认 得 你 站 在 暴 风 雪 里 的 样 子。
+他 们 让 layui-vue 变 得 更 好。
 :::

 ::: describe 
--- a/package/document-component/src/view/index.vue
+++ b/package/document-component/src/view/index.vue
@ -3,10 +3,7 @@
    <div class="site-banner">
      <div class="site-banner-main">
        <div class="site-zfj site-zfj-anim">
-          <img
-            src="../assets/logo-png.png"
-            style="width: 220px; border-radius: 10px"
-          />
+          <img src="../assets/logo-png.png" style="width: 220px; border-radius: 10px" />
        </div>
        <div class="layui-anim site-desc site-desc-anim">
          <p class="web-font-desc">layui - vue</p>
@ -16,49 +13,24 @@
          <router-link class="layui-inline site-down" to="/zh-CN/guide">
            Get Started
          </router-link>
-          <a
-            class="layui-inline site-down"
-            href="javascript:void(0);"
-            @click="changeTheme"
-          >
+          <a class="layui-inline site-down" href="javascript:void(0);" @click="changeTheme">
            {{ appStore.theme === "dark" ? "Turn Off" : "Turn On" }}
          </a>
        </div>
        <div class="site-version">
-          <span
-            >{{ t("home.version") }}：<cite class="site-showv">
+          <span>{{ t("home.version") }}：<cite class="site-showv">
              {{ version }}
-            </cite></span
-          >
-          <span
-            >{{ t("home.download") }}：<em class="site-showdowns"
-              >14,684</em
-            ></span
-          >
+            </cite></span>
+          <span>{{ t("home.download") }}：<em class="site-showdowns">16,684</em></span>
        </div>
        <div class="site-banner-other">
-          <a
-            href="https://gitee.com/layui-vue"
-            target="_blank"
-            rel="nofollow"
-            class="site-star"
-          >
-            <i class="layui-icon"></i> Star <cite id="getStars">1296</cite>
+          <a href="https://gitee.com/layui-vue" target="_blank" rel="nofollow" class="site-star">
+            <i class="layui-icon"></i> Star <cite id="getStars">1324</cite>
          </a>
-          <a
-            href="https://gitee.com/layui-vue"
-            target="_blank"
-            rel="nofollow"
-            class="site-fork"
-          >
+          <a href="https://gitee.com/layui-vue" target="_blank" rel="nofollow" class="site-fork">
            Gitee
          </a>
-          <a
-            href="https://github.com/layui-vue"
-            target="_blank"
-            rel="nofollow"
-            class="site-fork"
-          >
+          <a href="https://github.com/layui-vue" target="_blank" rel="nofollow" class="site-fork">
            Github
          </a>
        </div>
@ -75,7 +47,7 @@
        <lay-col :md="6" :sm="12" :xs="12">
          <div class="box">
            <h1 class="title">🐝 Small volume</h1>
-            <p class="details">only 8.5 MB.</p>
+            <p class="details">only 14.9 MB.</p>
          </div>
        </lay-col>
        <lay-col :md="6" :sm="12" :xs="12">
@ -92,6 +64,59 @@
        </lay-col>
      </lay-row>
    </div>
+    <div class="link-list">
+      <lay-row :space="30">
+        <lay-col :md="3">
+          <lay-tooltip content="layui" position="top">
+            <a style="height:40px;display:inline-block;" href="https://layui.gitee.io/v2" target="_blank">
+              <lay-avatar src="https://unpkg.com/outeres@0.0.6/img/layui/icon-1.png" style="border-radius:4px;"></lay-avatar>
+            </a>
+          </lay-tooltip>
+        </lay-col>
+        <lay-col :md="3">
+          <lay-tooltip content="furion" position="top">
+            <a style="height:40px;display:inline-block;" href="https://dotnetchina.gitee.io/furion" target="_blank">
+              <lay-avatar src="https://dotnetchina.gitee.io//furion/img/furionlogo.png" style="background:transparent;"></lay-avatar>
+            </a>
+          </lay-tooltip>
+        </lay-col>
+        <lay-col :md="3">
+          <lay-tooltip content="mybatis plus" position="top">
+            <a style="height:40px;display:inline-block;" href="https://baomidou.com" target="_blank">
+              <lay-avatar src="https://baomidou.com/img/logo.svg" style="background:transparent;"></lay-avatar>
+            </a>
+          </lay-tooltip>
+        </lay-col>
+        <lay-col :md="3">
+          <lay-tooltip content="aizuda" position="top">
+            <a style="height:40px;display:inline-block;" href="http://doc.aizuda.com" target="_blank">
+              <lay-avatar src="http://doc.aizuda.com//img/azd.png" style="background:transparent;"></lay-avatar>
+            </a>
+          </lay-tooltip>
+        </lay-col>
+        <lay-col :md="3">
+          <lay-tooltip content="lite-flow" position="top">
+            <a style="height:40px;display:inline-block;" href="https://liteflow.yomahub.com" target="_blank">
+              <lay-avatar src="https://liteflow.yomahub.com//img/logo.svg" style="background:transparent;"></lay-avatar>
+            </a>
+          </lay-tooltip>
+        </lay-col>
+        <lay-col :md="3">
+          <lay-tooltip content="cc-flow" position="top">
+            <a style="height:40px;display:inline-block;" href="http://ccflow.org/" target="_blank">
+              <lay-avatar src="https://portrait.gitee.com/uploads/avatars/namespace/289/868254_opencc_1578989593.png" style="background:transparent;"></lay-avatar>
+            </a>
+          </lay-tooltip>
+        </lay-col>
+        <lay-col :md="3">
+          <lay-tooltip content="pear-admin" position="top">
+            <a style="height:40px;display:inline-block;" href="http://www.pearadmin.com" target="_blank">
+              <lay-avatar src="https://portrait.gitee.com/uploads/avatars/namespace/2319/6958819_pear-admin_1643085106.png" style="background:transparent;"></lay-avatar>
+            </a>
+          </lay-tooltip>
+        </lay-col>
+      </lay-row>
+    </div>
    <div class="footer footer-index">
      <p>Released under the <a href="/index.html">MIT License</a>.</p>
      <p>Copyright © 2021-2022 layui-vue.com</p>
@ -295,25 +320,29 @@ body {
  padding: 50px 250px;
 }

+.link-list {
+  padding: 50px 250px;
+}
+
 .box {
+  background-color: #f9f9f9;
  border: 1px solid rgba(60, 60, 60, 0.12);
-  border-radius: 12px;
+  border-radius: 4px;
  padding: 24px;
  height: 100%;
-  background-color: #f9f9f9;
 }

 .box .title {
-  line-height: 24px;
  font-size: 16px;
  font-weight: 600;
+  line-height: 24px;
 }

 .box .details {
-  padding-top: 8px;
-  line-height: 24px;
  font-size: 14px;
+  padding-top: 8px;
  font-weight: 500;
+  line-height: 24px;
  color: rgba(60, 60, 60, 0.7);
 }

--- a/package/document-layer/index.html
+++ b/package/document-layer/index.html
@ -8,10 +8,7 @@
    <meta name="force-rendering" content="webkit" />
    <meta name="applicable-device" content="pc,mobile" />
    <meta name="author" content="Jmys <jmys1992@gmail.com>" />
-    <meta
-      name="keywords"
-      content="element-pro,pro-components,admin,element-plus,components,vue,ui"
-    />
+    <meta name="keywords" content="layui,layui-vue,vue,layer,layer-vue,ui,components"/>
    <link rel="icon" href="/favicon.ico" />
    <title>layer-vue 弹层解决方案</title>
    <!--preload-links-->