diff --git a/docs/zh/components/container.md b/docs/zh/components/container.md
index 974583fe..36583a16 100644
--- a/docs/zh/components/container.md
+++ b/docs/zh/components/container.md
@@ -277,7 +277,7 @@ ghost 模式适合对页面有定制需求的用户，此模式生成一个没
 
 ## 注
 
-本文插图为 [@FairyEver](https://github.com/FairyEver) 为此文档设计，未经授权不得转载或者修改使用
+本文插图为 [@FairyEver](https://github.com/FairyEver) 专为此文档设计，未经授权不得转载或者修改使用
 
 ![](http://fairyever.qiniudn.com/2018-07-22-Snip20180722_2.png)
 
diff --git a/docs/zh/others/css.md b/docs/zh/others/css.md
index fa9feac5..8e5ff929 100644
--- a/docs/zh/others/css.md
+++ b/docs/zh/others/css.md
@@ -1,5 +1,17 @@
 # CSS 工具类
 
+## 样式
+
+| 类名 | 效果 |
+| --- | --- |
+| `.d2-card` | 将该 class 添加至 el-card 组件上使其有跟随主题变化的样式 |
+
+`.d2-card` 示例
+
+``` vue
+<el-card shadow="never" class="d2-card"></el-card>
+```
+
 ## 文字
 
 | 类名 | 效果 |
diff --git a/src/assets/style/theme/theme-base.scss.REMOVED.git-id b/src/assets/style/theme/theme-base.scss.REMOVED.git-id
index 576c2be6..e05e9018 100644
--- a/src/assets/style/theme/theme-base.scss.REMOVED.git-id
+++ b/src/assets/style/theme/theme-base.scss.REMOVED.git-id
@@ -1 +1 @@
-ae3bb618b4174f42e284453d1cd623e5f076862a
\ No newline at end of file
+e8bc36218d0778ed548d888e1fdf30405ccd2da4
\ No newline at end of file
diff --git a/src/assets/style/theme/theme.scss.REMOVED.git-id b/src/assets/style/theme/theme.scss.REMOVED.git-id
index 09862328..1f2b5ba2 100644
--- a/src/assets/style/theme/theme.scss.REMOVED.git-id
+++ b/src/assets/style/theme/theme.scss.REMOVED.git-id
@@ -1 +1 @@
-6113c4d47cf82202af858d0e14f7bd7bab4b4500
\ No newline at end of file
+d7807eecc7082d138c70f222eb3834c6ad63c366
\ No newline at end of file
diff --git a/src/menu/modules/demo-playground.js b/src/menu/modules/demo-playground.js
index 328e0540..9c1d6497 100644
--- a/src/menu/modules/demo-playground.js
+++ b/src/menu/modules/demo-playground.js
@@ -26,6 +26,7 @@ export default {
     { path: `${pre}fullscreen`, title: '全屏', icon: 'arrows-alt' },
     { path: `${pre}gray`, title: '灰度模式', icon: 'eye' },
     { path: `${pre}db`, title: '数据持久化', icon: 'database' },
+    { path: `${pre}env`, title: '环境信息', icon: 'microchip' },
     { path: `${pre}ua`, title: '浏览器信息', icon: 'info-circle' }
   ])('/demo/playground/')
 }
diff --git a/src/menu/modules/demo-plugins.js b/src/menu/modules/demo-plugins.js
index 848cddaf..22105b1f 100644
--- a/src/menu/modules/demo-plugins.js
+++ b/src/menu/modules/demo-plugins.js
@@ -50,7 +50,6 @@ export default {
         { path: `${pre}better-scroll/to`, title: '滚动定位' }
       ]
     },
-    { path: `${pre}build`, title: '环境区分', icon: 'database' },
     { path: `${pre}clipboard-polyfill`, title: '剪贴板访问', icon: 'clipboard' },
     { path: `${pre}day`, title: '日期计算', icon: 'clock-o' },
     { path: `${pre}js-cookie`, title: 'Cookie 读写', icon: 'asterisk' }
diff --git a/src/pages/demo/components/container/ghost-bs.vue b/src/pages/demo/components/container/ghost-bs.vue
index fa3179d0..36c25b06 100644
--- a/src/pages/demo/components/container/ghost-bs.vue
+++ b/src/pages/demo/components/container/ghost-bs.vue
@@ -2,7 +2,7 @@
   <d2-container type="ghost" scroll>
     <template slot="header">Header</template>
     <div class="d2-pt d2-pb">
-      <el-card shadow="never" style="width: 400px;">
+      <el-card shadow="never" class="d2-card" style="width: 400px;">
         <d2-demo-article/>
       </el-card>
     </div>
diff --git a/src/pages/demo/components/container/ghost-slot.vue b/src/pages/demo/components/container/ghost-slot.vue
index 5a8430d2..831594da 100644
--- a/src/pages/demo/components/container/ghost-slot.vue
+++ b/src/pages/demo/components/container/ghost-slot.vue
@@ -2,7 +2,7 @@
   <d2-container type="ghost">
     <template slot="header">Header</template>
     <div class="d2-pt d2-pb">
-      <el-card shadow="never" style="width: 400px;">
+      <el-card shadow="never" class="d2-card" style="width: 400px;">
         <d2-demo-article/>
       </el-card>
     </div>
diff --git a/src/pages/demo/components/container/ghost.vue b/src/pages/demo/components/container/ghost.vue
index 651ee9c5..2c9872c3 100644
--- a/src/pages/demo/components/container/ghost.vue
+++ b/src/pages/demo/components/container/ghost.vue
@@ -1,7 +1,7 @@
 <template>
   <d2-container type="ghost">
     <div class="d2-pt d2-pb">
-      <el-card shadow="never" style="width: 400px;">
+      <el-card shadow="never" class="d2-card" style="width: 400px;">
         <d2-demo-article/>
       </el-card>
     </div>
diff --git a/src/pages/demo/components/countup/index.vue b/src/pages/demo/components/countup/index.vue
index 186027ac..72457916 100644
--- a/src/pages/demo/components/countup/index.vue
+++ b/src/pages/demo/components/countup/index.vue
@@ -3,7 +3,7 @@
     <template slot="header">数字动画组件</template>
     <el-row :gutter="20">
       <el-col :span="6">
-        <el-card shadow="never" class="d2-mb">
+        <el-card shadow="never" class="d2-card d2-mb">
           <p slot="title">只设置目标数字</p>
           <div class="group">
             <d2-count-up :end="100"/>
@@ -11,7 +11,7 @@
         </el-card>
       </el-col>
       <el-col :span="6">
-        <el-card shadow="never" class="d2-mb">
+        <el-card shadow="never" class="d2-card d2-mb">
           <p slot="title">设置起止数值</p>
           <div class="group">
             <d2-count-up :start="14" :end="100"/>
@@ -19,7 +19,7 @@
         </el-card>
       </el-col>
       <el-col :span="6">
-        <el-card shadow="never" class="d2-mb">
+        <el-card shadow="never" class="d2-card d2-mb">
           <p slot="title">小数位数</p>
           <div class="group">
             <d2-count-up :end="100" :decimals="2"/>
@@ -27,7 +27,7 @@
         </el-card>
       </el-col>
       <el-col :span="6">
-        <el-card shadow="never" class="d2-mb">
+        <el-card shadow="never" class="d2-card d2-mb">
           <p slot="title">动画时长</p>
           <div class="group">
             <d2-count-up :end="100" :duration="6"/>
@@ -35,7 +35,7 @@
         </el-card>
       </el-col>
       <el-col :span="6">
-        <el-card shadow="never">
+        <el-card shadow="never" class="d2-card">
           <p slot="title">回调函数</p>
           <div class="group">
             <d2-count-up :end="100" :callback="() => {className = 'end'}" :class="className"/>
@@ -43,7 +43,7 @@
         </el-card>
       </el-col>
       <el-col :span="6">
-        <el-card shadow="never" class="d2-mb-0">
+        <el-card shadow="never" class="d2-card d2-mb-0">
           <p slot="title">结束一秒后更新数值</p>
           <div class="group">
             <d2-count-up :end="end" :callback="update"/>
diff --git a/src/pages/demo/components/editor-quill/index.vue b/src/pages/demo/components/editor-quill/index.vue
index fe4a1cc0..a19b59f1 100644
--- a/src/pages/demo/components/editor-quill/index.vue
+++ b/src/pages/demo/components/editor-quill/index.vue
@@ -7,7 +7,7 @@
       @text-change="textChangeHandler"
       @selection-change="selectionChangeHandler"
       @editor-change="editorChangeHandler"/>
-    <el-card shadow="never" class="d2-mt">
+    <el-card shadow="never" class="d2-card d2-mt">
       <d2-highlight :code="value" format-html/>
     </el-card>
   </d2-container>
diff --git a/src/pages/demo/components/editor-simpleMDE/index.vue b/src/pages/demo/components/editor-simpleMDE/index.vue
index e36049ee..b9c99560 100644
--- a/src/pages/demo/components/editor-simpleMDE/index.vue
+++ b/src/pages/demo/components/editor-simpleMDE/index.vue
@@ -4,7 +4,7 @@
     <d2-mde
       v-model="text"
       class="mde"/>
-    <el-card shadow="never">
+    <el-card shadow="never" class="d2-card">
       <pre>{{text}}</pre>
     </el-card>
   </d2-container>
diff --git a/src/pages/demo/components/highlight/index.vue b/src/pages/demo/components/highlight/index.vue
index ea77e68a..b6daa6f1 100644
--- a/src/pages/demo/components/highlight/index.vue
+++ b/src/pages/demo/components/highlight/index.vue
@@ -1,19 +1,19 @@
 <template>
   <d2-container>
     <template slot="header">代码高亮组件</template>
-    <el-card shadow="never" class="d2-mb">
+    <el-card shadow="never" class="d2-card d2-mb">
       <p slot="title">javascript</p>
       <d2-highlight :code="codeJavascript"/>
     </el-card>
-    <el-card shadow="never" class="d2-mb">
+    <el-card shadow="never" class="d2-card d2-mb">
       <p slot="title">css</p>
       <d2-highlight :code="codeCSS"/>
     </el-card>
-    <el-card shadow="never" class="d2-mb">
+    <el-card shadow="never" class="d2-card d2-mb">
       <p slot="title">scss</p>
       <d2-highlight :code="codeSCSS"/>
     </el-card>
-    <el-card shadow="never">
+    <el-card shadow="never" class="d2-card">
       <p slot="title">html</p>
       <d2-highlight :code="codeHTML"/>
     </el-card>
diff --git a/src/pages/demo/components/layout/grid.vue b/src/pages/demo/components/layout/grid.vue
index f156e0f4..ebebce1a 100644
--- a/src/pages/demo/components/layout/grid.vue
+++ b/src/pages/demo/components/layout/grid.vue
@@ -11,7 +11,7 @@
         @move="moveHandler"
         @resized="resizedHandler"
         @moved="movedHandler">
-        <el-card shadow="never">
+        <el-card shadow="never" class="d2-card">
           <el-tag size="mini" type="info" slot="header">Card {{item.i}}</el-tag>
           <template v-if="item.i === '0'">
             <div class="d2-mb">拖拽卡片调整位置</div>
diff --git a/src/pages/demo/element/basic-typography/index.vue b/src/pages/demo/element/basic-typography/index.vue
index 30282081..ebc53420 100644
--- a/src/pages/demo/element/basic-typography/index.vue
+++ b/src/pages/demo/element/basic-typography/index.vue
@@ -4,19 +4,19 @@
     <h1 class="d2-mt-0">中文字体</h1>
     <el-row :gutter="10">
       <el-col :span="6">
-        <el-card shadow="never">
+        <el-card shadow="never" class="d2-card">
           <template slot="header">PingFang SC</template>
           <p class="basic-typography-text typography-style-1">和畅惠风</p>
         </el-card>
       </el-col>
       <el-col :span="6">
-        <el-card shadow="never">
+        <el-card shadow="never" class="d2-card">
           <template slot="header">Hiragino Sans GB</template>
           <p class="basic-typography-text typography-style-2">和畅惠风</p>
         </el-card>
       </el-col>
       <el-col :span="6">
-        <el-card shadow="never">
+        <el-card shadow="never" class="d2-card">
           <template slot="header">Microsoft YaHei</template>
           <p class="basic-typography-text typography-style-3">和畅惠风</p>
         </el-card>
@@ -26,19 +26,19 @@
     <h1>英文／数字字体</h1>
     <el-row :gutter="10">
       <el-col :span="6">
-        <el-card shadow="never">
+        <el-card shadow="never" class="d2-card">
           <template slot="header">Helvetica Neue</template>
           <p class="basic-typography-text typography-style-4">RGag</p>
         </el-card>
       </el-col>
       <el-col :span="6">
-        <el-card shadow="never">
+        <el-card shadow="never" class="d2-card">
           <template slot="header">Helvetica</template>
           <p class="basic-typography-text typography-style-5">RGag</p>
         </el-card>
       </el-col>
       <el-col :span="6">
-        <el-card shadow="never">
+        <el-card shadow="never" class="d2-card">
           <template slot="header">Arial</template>
           <p class="basic-typography-text typography-style-6">RGag</p>
         </el-card>
diff --git a/src/pages/demo/element/data-table/index.vue b/src/pages/demo/element/data-table/index.vue
index cd7fd8cf..9ea11691 100644
--- a/src/pages/demo/element/data-table/index.vue
+++ b/src/pages/demo/element/data-table/index.vue
@@ -1,26 +1,31 @@
 <template>
-  <d2-container>
+  <d2-container type="ghost">
+    <template slot="header">表格组件</template>
+    <div class="d2-mt d2-mr">
 
-    <h1 class="d2-mt-0">基础用法</h1>
-    <el-table
-      :data="tableData"
-      style="width: 100%">
-      <el-table-column
-        prop="date"
-        label="日期"
-        width="180">
-      </el-table-column>
-      <el-table-column
-        prop="name"
-        label="姓名"
-        width="180">
-      </el-table-column>
-      <el-table-column
-        prop="address"
-        label="地址">
-      </el-table-column>
-    </el-table>
+      <el-card shadow="never" class="d2-card">
+        <template slot="header">基础用法</template>
+        <el-table
+          :data="tableData"
+          style="width: 100%">
+          <el-table-column
+            prop="date"
+            label="日期"
+            width="180">
+          </el-table-column>
+          <el-table-column
+            prop="name"
+            label="姓名"
+            width="180">
+          </el-table-column>
+          <el-table-column
+            prop="address"
+            label="地址">
+          </el-table-column>
+        </el-table>
+      </el-card>
 
+    </div>
   </d2-container>
 </template>
 
diff --git a/src/pages/demo/playground/env/index.vue b/src/pages/demo/playground/env/index.vue
new file mode 100644
index 00000000..719b4a8f
--- /dev/null
+++ b/src/pages/demo/playground/env/index.vue
@@ -0,0 +1,9 @@
+<template>
+  <d2-container type="card">
+    <template slot="header">环境信息</template>
+    <el-alert
+      :title="`this.$env = ${$env}`"
+      type="info">
+    </el-alert>
+  </d2-container>
+</template>
diff --git a/src/pages/demo/plugins/build/index.vue b/src/pages/demo/plugins/build/index.vue
deleted file mode 100644
index 52246673..00000000
--- a/src/pages/demo/plugins/build/index.vue
+++ /dev/null
@@ -1,6 +0,0 @@
-<template>
-  <d2-container>
-    <template slot="header">环境区分</template>
-    <p>当前是{{$env === 'development' ? '开发' : '生产'}}环境</p>
-  </d2-container>
-</template>
diff --git a/src/pages/demo/plugins/day/index.vue b/src/pages/demo/plugins/day/index.vue
index fa8f52f5..7a762317 100644
--- a/src/pages/demo/plugins/day/index.vue
+++ b/src/pages/demo/plugins/day/index.vue
@@ -3,59 +3,59 @@
     <template slot="header">日期计算</template>
     <h1 class="d2-mt-0">解析</h1>
     <el-row :gutter="20" class="d2-mt">
-      <el-col :span="6"><el-card shadow="never" class="d2-mb"><d2-highlight slot="header" :code="`// 当前时间\ndayjs()`"/>{{dayjs()}}</el-card></el-col>
-      <el-col :span="6"><el-card shadow="never" class="d2-mb"><d2-highlight slot="header" :code="`// 时间字符串\ndayjs('1995-12-25')`"/>{{dayjs('1995-12-25')}}</el-card></el-col>
-      <el-col :span="6"><el-card shadow="never" class="d2-mb"><d2-highlight slot="header" :code="`// Unix 时间戳 (毫秒)\ndayjs(1318781876406)`"/>{{dayjs(1318781876406)}}</el-card></el-col>
-      <el-col :span="6"><el-card shadow="never" class="d2-mb"><d2-highlight slot="header" :code="`// Date 对象\ndayjs(new Date(2018, 8, 18))`"/>{{dayjs(new Date(2018, 8, 18))}}</el-card></el-col>
-      <el-col :span="6"><el-card shadow="never"><d2-highlight slot="header" :code="`// 复制\ndayjs().clone()`"/>{{dayjs().clone()}}</el-card></el-col>
-      <el-col :span="6"><el-card shadow="never"><d2-highlight slot="header" :code="`// 检测是否是一个有效的时间\ndayjs().isValid()`"/>{{dayjs().isValid()}}</el-card></el-col>
+      <el-col :span="6"><el-card shadow="never" class="d2-card d2-mb"><d2-highlight slot="header" :code="`// 当前时间\ndayjs()`"/>{{dayjs()}}</el-card></el-col>
+      <el-col :span="6"><el-card shadow="never" class="d2-card d2-mb"><d2-highlight slot="header" :code="`// 时间字符串\ndayjs('1995-12-25')`"/>{{dayjs('1995-12-25')}}</el-card></el-col>
+      <el-col :span="6"><el-card shadow="never" class="d2-card d2-mb"><d2-highlight slot="header" :code="`// Unix 时间戳 (毫秒)\ndayjs(1318781876406)`"/>{{dayjs(1318781876406)}}</el-card></el-col>
+      <el-col :span="6"><el-card shadow="never" class="d2-card d2-mb"><d2-highlight slot="header" :code="`// Date 对象\ndayjs(new Date(2018, 8, 18))`"/>{{dayjs(new Date(2018, 8, 18))}}</el-card></el-col>
+      <el-col :span="6"><el-card shadow="never" class="d2-card"><d2-highlight slot="header" :code="`// 复制\ndayjs().clone()`"/>{{dayjs().clone()}}</el-card></el-col>
+      <el-col :span="6"><el-card shadow="never" class="d2-card"><d2-highlight slot="header" :code="`// 检测是否是一个有效的时间\ndayjs().isValid()`"/>{{dayjs().isValid()}}</el-card></el-col>
     </el-row>
     <h1>获取</h1>
     <el-row :gutter="20" class="d2-mt">
-      <el-col :span="6"><el-card shadow="never" class="d2-mb"><d2-highlight slot="header" :code="`// 获取年\ndayjs().year()`"/>{{dayjs().year()}}</el-card></el-col>
-      <el-col :span="6"><el-card shadow="never" class="d2-mb"><d2-highlight slot="header" :code="`// 获取月\ndayjs().month()`"/>{{dayjs().month()}}</el-card></el-col>
-      <el-col :span="6"><el-card shadow="never" class="d2-mb"><d2-highlight slot="header" :code="`// 获取日\ndayjs().date()`"/>{{dayjs().date()}}</el-card></el-col>
-      <el-col :span="6"><el-card shadow="never" class="d2-mb"><d2-highlight slot="header" :code="`// 获取星期\ndayjs().day()`"/>{{dayjs().day()}}</el-card></el-col>
-      <el-col :span="6"><el-card shadow="never"><d2-highlight slot="header" :code="`// 获取小时\ndayjs().hour()`"/>{{dayjs().hour()}}</el-card></el-col>
-      <el-col :span="6"><el-card shadow="never"><d2-highlight slot="header" :code="`// 获取分钟\ndayjs().minute()`"/>{{dayjs().minute()}}</el-card></el-col>
-      <el-col :span="6"><el-card shadow="never"><d2-highlight slot="header" :code="`// 获取秒\ndayjs().second()`"/>{{dayjs().second()}}</el-card></el-col>
-      <el-col :span="6"><el-card shadow="never"><d2-highlight slot="header" :code="`// 获取毫秒\ndayjs().millisecond()`"/>{{dayjs().millisecond()}}</el-card></el-col>
+      <el-col :span="6"><el-card shadow="never" class="d2-card d2-mb"><d2-highlight slot="header" :code="`// 获取年\ndayjs().year()`"/>{{dayjs().year()}}</el-card></el-col>
+      <el-col :span="6"><el-card shadow="never" class="d2-card d2-mb"><d2-highlight slot="header" :code="`// 获取月\ndayjs().month()`"/>{{dayjs().month()}}</el-card></el-col>
+      <el-col :span="6"><el-card shadow="never" class="d2-card d2-mb"><d2-highlight slot="header" :code="`// 获取日\ndayjs().date()`"/>{{dayjs().date()}}</el-card></el-col>
+      <el-col :span="6"><el-card shadow="never" class="d2-card d2-mb"><d2-highlight slot="header" :code="`// 获取星期\ndayjs().day()`"/>{{dayjs().day()}}</el-card></el-col>
+      <el-col :span="6"><el-card shadow="never" class="d2-card"><d2-highlight slot="header" :code="`// 获取小时\ndayjs().hour()`"/>{{dayjs().hour()}}</el-card></el-col>
+      <el-col :span="6"><el-card shadow="never" class="d2-card"><d2-highlight slot="header" :code="`// 获取分钟\ndayjs().minute()`"/>{{dayjs().minute()}}</el-card></el-col>
+      <el-col :span="6"><el-card shadow="never" class="d2-card"><d2-highlight slot="header" :code="`// 获取秒\ndayjs().second()`"/>{{dayjs().second()}}</el-card></el-col>
+      <el-col :span="6"><el-card shadow="never" class="d2-card"><d2-highlight slot="header" :code="`// 获取毫秒\ndayjs().millisecond()`"/>{{dayjs().millisecond()}}</el-card></el-col>
     </el-row>
     <h1>设置</h1>
     <el-row :gutter="20" class="d2-mt">
-      <el-col :span="8"><el-card shadow="never"><d2-highlight slot="header" :code="`// 设置月份\ndayjs().set('month', 6).month()`"/>{{dayjs().set('month', 6).month()}}</el-card></el-col>
-      <el-col :span="8"><el-card shadow="never"><d2-highlight slot="header" :code="`// 设置秒\ndayjs().set('second', 30).second()`"/>{{dayjs().set('second', 30).second()}}</el-card></el-col>
-      <el-col :span="8"><el-card shadow="never"><d2-highlight slot="header" :code="`// 设置小时\ndayjs().set('hour', 4).hour()`"/>{{dayjs().set('hour', 4).hour()}}</el-card></el-col>
+      <el-col :span="8"><el-card shadow="never" class="d2-card"><d2-highlight slot="header" :code="`// 设置月份\ndayjs().set('month', 6).month()`"/>{{dayjs().set('month', 6).month()}}</el-card></el-col>
+      <el-col :span="8"><el-card shadow="never" class="d2-card"><d2-highlight slot="header" :code="`// 设置秒\ndayjs().set('second', 30).second()`"/>{{dayjs().set('second', 30).second()}}</el-card></el-col>
+      <el-col :span="8"><el-card shadow="never" class="d2-card"><d2-highlight slot="header" :code="`// 设置小时\ndayjs().set('hour', 4).hour()`"/>{{dayjs().set('hour', 4).hour()}}</el-card></el-col>
     </el-row>
     <h1>操作</h1>
     <el-row :gutter="20" class="d2-mt">
-      <el-col :span="12"><el-card shadow="never" class="d2-mb"><d2-highlight slot="header" :code="`// 增加\ndayjs().add(1, 'day').format('YYYY年M月D日 HH:mm:ss')`"/>{{dayjs().add(1, 'day').format('YYYY年M月D日 HH:mm:ss')}}</el-card></el-col>
-      <el-col :span="12"><el-card shadow="never" class="d2-mb"><d2-highlight slot="header" :code="`// 减少\ndayjs().subtract(7, 'year').format('YYYY年M月D日 HH:mm:ss')`"/>{{dayjs().subtract(7, 'year').format('YYYY年M月D日 HH:mm:ss')}}</el-card></el-col>
-      <el-col :span="12"><el-card shadow="never"><d2-highlight slot="header" :code="`// 开头时间\ndayjs().startOf('year').format('YYYY年M月D日 HH:mm:ss')`"/>{{dayjs().startOf('year').format('YYYY年M月D日 HH:mm:ss')}}</el-card></el-col>
-      <el-col :span="12"><el-card shadow="never"><d2-highlight slot="header" :code="`// 末尾时间\ndayjs().endOf('month').format('YYYY年M月D日 HH:mm:ss')`"/>{{dayjs().endOf('month').format('YYYY年M月D日 HH:mm:ss')}}</el-card></el-col>
+      <el-col :span="12"><el-card shadow="never" class="d2-card d2-mb"><d2-highlight slot="header" :code="`// 增加\ndayjs().add(1, 'day').format('YYYY年M月D日 HH:mm:ss')`"/>{{dayjs().add(1, 'day').format('YYYY年M月D日 HH:mm:ss')}}</el-card></el-col>
+      <el-col :span="12"><el-card shadow="never" class="d2-card d2-mb"><d2-highlight slot="header" :code="`// 减少\ndayjs().subtract(7, 'year').format('YYYY年M月D日 HH:mm:ss')`"/>{{dayjs().subtract(7, 'year').format('YYYY年M月D日 HH:mm:ss')}}</el-card></el-col>
+      <el-col :span="12"><el-card shadow="never" class="d2-card"><d2-highlight slot="header" :code="`// 开头时间\ndayjs().startOf('year').format('YYYY年M月D日 HH:mm:ss')`"/>{{dayjs().startOf('year').format('YYYY年M月D日 HH:mm:ss')}}</el-card></el-col>
+      <el-col :span="12"><el-card shadow="never" class="d2-card"><d2-highlight slot="header" :code="`// 末尾时间\ndayjs().endOf('month').format('YYYY年M月D日 HH:mm:ss')`"/>{{dayjs().endOf('month').format('YYYY年M月D日 HH:mm:ss')}}</el-card></el-col>
     </el-row>
     <h1>显示</h1>
     <el-row :gutter="20" class="d2-mt">
-      <el-col :span="12"><el-card shadow="never" class="d2-mb"><d2-highlight slot="header" :code="`// 格式化\ndayjs().format('YYYY-M-D HH:mm:ss')`"/>{{dayjs().format('YYYY-M-D HH:mm:ss')}}</el-card></el-col>
-      <el-col :span="12"><el-card shadow="never" class="d2-mb"><d2-highlight slot="header" :code="`// 时间差\ndayjs().diff(dayjs().subtract(1, 'day'), 'days')`"/>{{dayjs().diff(dayjs().subtract(1, 'day'), 'days')}}</el-card></el-col>
-      <el-col :span="12"><el-card shadow="never" class="d2-mb"><d2-highlight slot="header" :code="`// Unix 时间戳 (毫秒)\ndayjs().valueOf()`"/>{{dayjs().valueOf()}}</el-card></el-col>
-      <el-col :span="12"><el-card shadow="never" class="d2-mb"><d2-highlight slot="header" :code="`// Unix 时间戳 (秒)\ndayjs().unix()`"/>{{dayjs().unix()}}</el-card></el-col>
-      <el-col :span="12"><el-card shadow="never" class="d2-mb"><d2-highlight slot="header" :code="`// 天数 (月)\ndayjs().daysInMonth()`"/>{{dayjs().daysInMonth()}}</el-card></el-col>
-      <el-col :span="12"><el-card shadow="never" class="d2-mb"><d2-highlight slot="header" :code="`// Date 对象\ndayjs().toDate()`"/>{{dayjs().toDate()}}</el-card></el-col>
-      <el-col :span="12"><el-card shadow="never" class="d2-mb"><d2-highlight slot="header" :code="`// 数组\ndayjs().toArray()`"/>{{dayjs().toArray()}}</el-card></el-col>
-      <el-col :span="12"><el-card shadow="never" class="d2-mb"><d2-highlight slot="header" :code="`// 序列化 Dayjs 对象时会返回 ISO 8601 格式的字符串\ndayjs().toJSON()`"/>{{dayjs().toJSON()}}</el-card></el-col>
-      <el-col :span="12"><el-card shadow="never" class="d2-mb"><d2-highlight slot="header" :code="`// ISO 8601 字符串\ndayjs().toISOString()`"/>{{dayjs().toISOString()}}</el-card></el-col>
-      <el-col :span="12"><el-card shadow="never" class="d2-mb"><d2-highlight slot="header" :code="`// 字符串\ndayjs().toString()`"/>{{dayjs().toString()}}</el-card></el-col>
-      <el-col :span="24"><el-card shadow="never"><d2-highlight slot="header" :code="`// 对象\ndayjs().toObject()`"/>{{dayjs().toObject()}}</el-card></el-col>
+      <el-col :span="12"><el-card shadow="never" class="d2-card d2-mb"><d2-highlight slot="header" :code="`// 格式化\ndayjs().format('YYYY-M-D HH:mm:ss')`"/>{{dayjs().format('YYYY-M-D HH:mm:ss')}}</el-card></el-col>
+      <el-col :span="12"><el-card shadow="never" class="d2-card d2-mb"><d2-highlight slot="header" :code="`// 时间差\ndayjs().diff(dayjs().subtract(1, 'day'), 'days')`"/>{{dayjs().diff(dayjs().subtract(1, 'day'), 'days')}}</el-card></el-col>
+      <el-col :span="12"><el-card shadow="never" class="d2-card d2-mb"><d2-highlight slot="header" :code="`// Unix 时间戳 (毫秒)\ndayjs().valueOf()`"/>{{dayjs().valueOf()}}</el-card></el-col>
+      <el-col :span="12"><el-card shadow="never" class="d2-card d2-mb"><d2-highlight slot="header" :code="`// Unix 时间戳 (秒)\ndayjs().unix()`"/>{{dayjs().unix()}}</el-card></el-col>
+      <el-col :span="12"><el-card shadow="never" class="d2-card d2-mb"><d2-highlight slot="header" :code="`// 天数 (月)\ndayjs().daysInMonth()`"/>{{dayjs().daysInMonth()}}</el-card></el-col>
+      <el-col :span="12"><el-card shadow="never" class="d2-card d2-mb"><d2-highlight slot="header" :code="`// Date 对象\ndayjs().toDate()`"/>{{dayjs().toDate()}}</el-card></el-col>
+      <el-col :span="12"><el-card shadow="never" class="d2-card d2-mb"><d2-highlight slot="header" :code="`// 数组\ndayjs().toArray()`"/>{{dayjs().toArray()}}</el-card></el-col>
+      <el-col :span="12"><el-card shadow="never" class="d2-card d2-mb"><d2-highlight slot="header" :code="`// 序列化 Dayjs 对象时会返回 ISO 8601 格式的字符串\ndayjs().toJSON()`"/>{{dayjs().toJSON()}}</el-card></el-col>
+      <el-col :span="12"><el-card shadow="never" class="d2-card d2-mb"><d2-highlight slot="header" :code="`// ISO 8601 字符串\ndayjs().toISOString()`"/>{{dayjs().toISOString()}}</el-card></el-col>
+      <el-col :span="12"><el-card shadow="never" class="d2-card d2-mb"><d2-highlight slot="header" :code="`// 字符串\ndayjs().toString()`"/>{{dayjs().toString()}}</el-card></el-col>
+      <el-col :span="24"><el-card shadow="never" class="d2-card"><d2-highlight slot="header" :code="`// 对象\ndayjs().toObject()`"/>{{dayjs().toObject()}}</el-card></el-col>
     </el-row>
     <h1>查询</h1>
     <el-row :gutter="20" class="d2-mt">
-      <el-col :span="12"><el-card shadow="never" class="d2-mb"><d2-highlight slot="header" :code="`// 是否之前\ndayjs().isBefore(dayjs().add(1, 'day'))`"/>{{dayjs().isBefore(dayjs().add(1, 'day'))}}</el-card></el-col>
-      <el-col :span="12"><el-card shadow="never" class="d2-mb"><d2-highlight slot="header" :code="`// 是否之前\ndayjs().isBefore(dayjs().subtract(1, 'day'))`"/>{{dayjs().isBefore(dayjs().subtract(1, 'day'))}}</el-card></el-col>
-      <el-col :span="12"><el-card shadow="never" class="d2-mb"><d2-highlight slot="header" :code="`// 是否相同\ndayjs().isSame(dayjs())`"/>{{dayjs().isSame(dayjs())}}</el-card></el-col>
-      <el-col :span="12"><el-card shadow="never" class="d2-mb"><d2-highlight slot="header" :code="`// 是否相同\ndayjs().isSame(dayjs().add(1, 'day'))`"/>{{dayjs().isSame(dayjs().add(1, 'day'))}}</el-card></el-col>
-      <el-col :span="12"><el-card shadow="never"><d2-highlight slot="header" :code="`// 是否之后\ndayjs().isAfter(dayjs().add(1, 'day'))`"/>{{dayjs().isAfter(dayjs().add(1, 'day'))}}</el-card></el-col>
-      <el-col :span="12"><el-card shadow="never"><d2-highlight slot="header" :code="`// 是否之后\ndayjs().isAfter(dayjs().subtract(1, 'day'))`"/>{{dayjs().isAfter(dayjs().subtract(1, 'day'))}}</el-card></el-col>
+      <el-col :span="12"><el-card shadow="never" class="d2-card d2-mb"><d2-highlight slot="header" :code="`// 是否之前\ndayjs().isBefore(dayjs().add(1, 'day'))`"/>{{dayjs().isBefore(dayjs().add(1, 'day'))}}</el-card></el-col>
+      <el-col :span="12"><el-card shadow="never" class="d2-card d2-mb"><d2-highlight slot="header" :code="`// 是否之前\ndayjs().isBefore(dayjs().subtract(1, 'day'))`"/>{{dayjs().isBefore(dayjs().subtract(1, 'day'))}}</el-card></el-col>
+      <el-col :span="12"><el-card shadow="never" class="d2-card d2-mb"><d2-highlight slot="header" :code="`// 是否相同\ndayjs().isSame(dayjs())`"/>{{dayjs().isSame(dayjs())}}</el-card></el-col>
+      <el-col :span="12"><el-card shadow="never" class="d2-card d2-mb"><d2-highlight slot="header" :code="`// 是否相同\ndayjs().isSame(dayjs().add(1, 'day'))`"/>{{dayjs().isSame(dayjs().add(1, 'day'))}}</el-card></el-col>
+      <el-col :span="12"><el-card shadow="never" class="d2-card"><d2-highlight slot="header" :code="`// 是否之后\ndayjs().isAfter(dayjs().add(1, 'day'))`"/>{{dayjs().isAfter(dayjs().add(1, 'day'))}}</el-card></el-col>
+      <el-col :span="12"><el-card shadow="never" class="d2-card"><d2-highlight slot="header" :code="`// 是否之后\ndayjs().isAfter(dayjs().subtract(1, 'day'))`"/>{{dayjs().isAfter(dayjs().subtract(1, 'day'))}}</el-card></el-col>
     </el-row>
     <d2-link-btn slot="footer" title="依赖" link="https://github.com/iamkun/dayjs"/>
   </d2-container>
diff --git a/src/pages/demo/plugins/mock/components/d2-demo-mock-card.vue b/src/pages/demo/plugins/mock/components/d2-demo-mock-card.vue
index 2b3aabd4..b8f5cd2b 100644
--- a/src/pages/demo/plugins/mock/components/d2-demo-mock-card.vue
+++ b/src/pages/demo/plugins/mock/components/d2-demo-mock-card.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-card shadow="never" class="d2-mb">
+  <el-card shadow="never" class="d2-card d2-mb">
     <div slot="header" class="d2-clearfix">
       <el-button type="text" size="mini">{{title}}</el-button>
       <el-tooltip content="重新 mock 数据" placement="top-end">
diff --git a/src/router/routes.js.REMOVED.git-id b/src/router/routes.js.REMOVED.git-id
index 9d1ea352..07c62191 100644
--- a/src/router/routes.js.REMOVED.git-id
+++ b/src/router/routes.js.REMOVED.git-id
@@ -1 +1 @@
-778f82e9fa1924d95e2ffc6766eeefe0b17f09a3
\ No newline at end of file
+d7908a30f437509d8a39a3e966cc0534b4bd81c2
\ No newline at end of file