diff --git a/src/assets/style/public-class.scss b/src/assets/style/public-class.scss
index 275e3b16..b0b59636 100644
--- a/src/assets/style/public-class.scss
+++ b/src/assets/style/public-class.scss
@@ -17,50 +17,50 @@
 
 
 // 浮动相关
-.fl {
+.#{$prefix}-fl {
   float: left;
 }
-.fr {
+.#{$prefix}-fr {
   float: right;
 }
-.clearfix:before,
-.clearfix:after {
+.#{$prefix}-clearfix:before,
+.#{$prefix}-clearfix:after {
   display: table;
   content: "";
 }
-.clearfix:after {
+.#{$prefix}-clearfix:after {
   clear: both
 }
 
 // 边距相关
-.m {
+.#{$prefix}-m {
   margin: $margin;
 }
-.mt {
+.#{$prefix}-mt {
   margin-top: $margin;
 }
-.mr {
+.#{$prefix}-mr {
   margin-right: $margin;
 }
-.mb {
+.#{$prefix}-mb {
   margin-bottom: $margin;
 }
-.ml {
+.#{$prefix}-ml {
   margin-left: $margin;
 }
 
-.m-0 {
+.#{$prefix}-m-0 {
   margin: 0px;
 }
-.mt-0 {
+.#{$prefix}-mt-0 {
   margin-top: 0px;
 }
-.mr-0 {
+.#{$prefix}-mr-0 {
   margin-right: 0px;
 }
-.mb-0 {
+.#{$prefix}-mb-0 {
   margin-bottom: 0px;
 }
-.ml-0 {
+.#{$prefix}-ml-0 {
   margin-left: 0px;
 }
diff --git a/src/assets/style/public.scss b/src/assets/style/public.scss
index 6029ca0e..ddb15a4e 100644
--- a/src/assets/style/public.scss
+++ b/src/assets/style/public.scss
@@ -1,6 +1,9 @@
 @import '~@/assets/style/unit/_color.scss';
 @import '~@/assets/style/unit/_size.scss';
 
+// 工具类名统一前缀
+$prefix: dd;
+
 // 禁止用户选中 鼠标变为手形
 %unable-select {
   user-select: none;
diff --git a/src/components/demo/GithubLinkButton/index.vue b/src/components/demo/GithubLinkButton/index.vue
new file mode 100644
index 00000000..4e21d610
--- /dev/null
+++ b/src/components/demo/GithubLinkButton/index.vue
@@ -0,0 +1,51 @@
+<template>
+  <div>
+    <el-popover
+      ref="pop"
+      placement="top"
+      width="160"
+      v-model="popover.visible">
+      <p>访问 Github</p>
+      <div style="text-align: right; margin: 0">
+        <el-button size="mini" type="text" @click="popover.visible = false">取消</el-button>
+        <el-button type="primary" size="mini" @click="jump">确定</el-button>
+      </div>
+    </el-popover>
+    <el-button
+      v-popover:pop
+      v-bind="$attrs"
+      @click="popover.visible = true">
+      view in
+      <span class="fa fa-github"></span>
+    </el-button>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    name: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    url: {
+      type: String,
+      required: false,
+      default: 'https://github.com/FairyEver'
+    }
+  },
+  data () {
+    return {
+      popover: {
+        visible: false
+      }
+    }
+  },
+  methods: {
+    jump () {
+      window.open(this.url)
+    }
+  }
+}
+</script>
diff --git a/src/components/index.js b/src/components/index.js
index 091c4805..2e790bc9 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -31,6 +31,12 @@ Vue.component('GithubLink', resolve => {
   require(['@/components/demo/GithubLink'], resolve)
 })
 
+// 名称：github 链接按钮
+// 用途：本质上这就是一个 github 的链接
+Vue.component('GithubLinkButton', resolve => {
+  require(['@/components/demo/GithubLinkButton'], resolve)
+})
+
 // 名称：SimpleMDE markdown 编辑器
 // 用途：SimpleMDE markdown 编辑器
 Vue.component('SimpleMDE', resolve => {
diff --git a/src/pages/demo/plugins/clipboard-polyfill/demo.vue b/src/pages/demo/plugins/clipboard-polyfill/demo.vue
index 24bc2d6d..67879bd9 100644
--- a/src/pages/demo/plugins/clipboard-polyfill/demo.vue
+++ b/src/pages/demo/plugins/clipboard-polyfill/demo.vue
@@ -7,7 +7,7 @@
     </PageHeader>
     <el-row :gutter="10">
       <el-col :span="12">
-        <div class="mb">
+        <div class="dd-mb">
           <el-input v-model="text" style="width: 200px;"></el-input>
           <el-button @click="copyText()">将左侧输入框内的文字复制进剪贴板</el-button>
         </div>
@@ -15,12 +15,12 @@
       </el-col>
       <el-col :span="12">
         <el-alert
-          class="mb"
+          class="dd-mb"
           title="只有在 IE 浏览器下你才可以通过下面这两个按钮获取剪贴板数据"
           type="warning"
           show-icon>
         </el-alert>
-        <div class="mb">
+        <div class="dd-mb">
           <el-tooltip content="需要 IE 浏览器" placement="top">
             <el-button @click="readText">readText( )</el-button>
           </el-tooltip>
diff --git a/src/pages/demo/plugins/highlight/demo.vue b/src/pages/demo/plugins/highlight/demo.vue
index aa5f3397..ddfea647 100644
--- a/src/pages/demo/plugins/highlight/demo.vue
+++ b/src/pages/demo/plugins/highlight/demo.vue
@@ -1,24 +1,24 @@
 <template>
   <Container type="ghost">
-    <el-card class="mb">
+    <el-card class="dd-mb">
       <p slot="title">javascript</p>
       <Highlight :code="codeJavascript"></Highlight>
     </el-card>
     <el-row :gutter="10">
       <el-col :span="8">
-        <el-card class="mb">
+        <el-card class="dd-mb">
           <p slot="title">css</p>
           <Highlight :code="codeCSS"></Highlight>
         </el-card>
       </el-col>
       <el-col :span="8">
-        <el-card class="mb">
+        <el-card class="dd-mb">
           <p slot="title">scss</p>
           <Highlight :code="codeSCSS"></Highlight>
         </el-card>
       </el-col>
       <el-col :span="8">
-        <el-card class="mb">
+        <el-card class="dd-mb">
           <p slot="title">html</p>
           <Highlight :code="codeHTML"></Highlight>
         </el-card>
diff --git a/src/pages/demo/plugins/js-cookie/demo.vue b/src/pages/demo/plugins/js-cookie/demo.vue
index 8f4b3b7e..7a1cd407 100644
--- a/src/pages/demo/plugins/js-cookie/demo.vue
+++ b/src/pages/demo/plugins/js-cookie/demo.vue
@@ -1,18 +1,18 @@
 <template>
   <Container type="ghost">
-    <el-card class="mb">
+    <el-card class="dd-mb">
       <p slot="title">基本读写删</p>
       <el-button type="primary" @click="set('test-user-name', 'test-user')">set('test-user-name', 'normalValue')</el-button>
       <el-button type="info" @click="get('test-user-name')">get('test-user-name')</el-button>
       <el-button type="error" @click="remove('test-user-name')">remove('test-user-name')</el-button>
     </el-card>
-    <el-card class="mb">
+    <el-card class="dd-mb">
       <p slot="title">设置有效期</p>
       <el-button type="primary" @click="setExpires('test-user-pwd', '123456789', 1)">设置 'test-user-pwd' 有效期为一天</el-button>
       <el-button type="info" @click="get('test-user-pwd')">get('test-user-pwd')</el-button>
       <el-button type="error" @click="remove('test-user-pwd')">remove('test-user-pwd')</el-button>
     </el-card>
-    <el-card class="mb">
+    <el-card class="dd-mb">
       <p slot="title">获取所有可以获得的数据</p>
       <el-button type="info" @click="getAll">getAll</el-button>
     </el-card>
diff --git a/src/pages/demo/plugins/mock/ajax.vue b/src/pages/demo/plugins/mock/ajax.vue
index 88c6cc9e..76320878 100644
--- a/src/pages/demo/plugins/mock/ajax.vue
+++ b/src/pages/demo/plugins/mock/ajax.vue
@@ -4,7 +4,7 @@
       <div slot="header">
         <el-button @click="ajax">发送请求</el-button>
       </div>
-      <el-table v-bind="table" style="width: 100%" class="mb">
+      <el-table v-bind="table" style="width: 100%" class="dd-mb">
         <el-table-column
           v-for="(item, index) in table.columns"
           :key="index"
diff --git a/src/pages/demo/plugins/mock/componnets/MockDemoCard.vue b/src/pages/demo/plugins/mock/componnets/MockDemoCard.vue
index d0ef2093..2bbf9420 100644
--- a/src/pages/demo/plugins/mock/componnets/MockDemoCard.vue
+++ b/src/pages/demo/plugins/mock/componnets/MockDemoCard.vue
@@ -1,9 +1,9 @@
 <template>
-  <el-card class="mb">
-    <div slot="header" class="clearfix">
+  <el-card class="dd-mb">
+    <div slot="header" class="dd-clearfix">
       <el-button type="text" size="mini">{{title}}</el-button>
       <el-tooltip content="重新 mock 数据" placement="top-end">
-        <el-button type="primary" size="mini" @click="$emit('reload')" style="float: right;">刷新</el-button>
+        <el-button type="primary" size="mini" @click="$emit('reload')" class="dd-fr">刷新</el-button>
       </el-tooltip>
     </div>
     <el-row :gutter="10">
diff --git a/src/pages/demo/plugins/mock/demoDPD.vue b/src/pages/demo/plugins/mock/demoDPD.vue
index 4bf6a49c..734430c9 100644
--- a/src/pages/demo/plugins/mock/demoDPD.vue
+++ b/src/pages/demo/plugins/mock/demoDPD.vue
@@ -1,6 +1,6 @@
 <template>
   <Container type="ghost">
-    <el-card class="mb">
+    <el-card class="dd-mb">
       <Markdown url="/static/markdownFiles/article/mock演示页面介绍.md"></Markdown>
     </el-card>
     <MockDemoCard
diff --git a/src/pages/demo/plugins/mock/demoDTD.vue b/src/pages/demo/plugins/mock/demoDTD.vue
index b3fd17d6..6813868f 100644
--- a/src/pages/demo/plugins/mock/demoDTD.vue
+++ b/src/pages/demo/plugins/mock/demoDTD.vue
@@ -1,6 +1,6 @@
 <template>
   <Container type="ghost">
-    <el-card class="mb">
+    <el-card class="dd-mb">
       <Markdown url="/static/markdownFiles/article/mock演示页面介绍.md"></Markdown>
     </el-card>
     <MockDemoCard
diff --git a/src/pages/demo/plugins/papaParse/demo.vue b/src/pages/demo/plugins/papaParse/demo.vue
index 705c5e7b..82711f0d 100644
--- a/src/pages/demo/plugins/papaParse/demo.vue
+++ b/src/pages/demo/plugins/papaParse/demo.vue
@@ -7,7 +7,7 @@
     </PageHeader>
     <el-row :gutter="10">
       <el-col :span="4">
-        <div class="mb">
+        <div class="dd-mb">
           <el-button @click="download">下载演示CSV</el-button>
         </div>
         <el-upload :before-upload="handleUpload" action="default">
diff --git a/src/pages/demo/plugins/quill/demo.vue b/src/pages/demo/plugins/quill/demo.vue
index 30b24207..1337dc21 100644
--- a/src/pages/demo/plugins/quill/demo.vue
+++ b/src/pages/demo/plugins/quill/demo.vue
@@ -1,6 +1,6 @@
 <template>
   <Container type="ghost">
-    <el-card class="mb">
+    <el-card class="dd-mb">
       <QuillEditor
         style="min-height: 200px;"
         v-model="value"
diff --git a/src/pages/demo/plugins/vue-grid-layout/demo.vue b/src/pages/demo/plugins/vue-grid-layout/demo.vue
index 0056dccd..f04b1006 100644
--- a/src/pages/demo/plugins/vue-grid-layout/demo.vue
+++ b/src/pages/demo/plugins/vue-grid-layout/demo.vue
@@ -14,8 +14,12 @@
         <el-card>
           <el-tag size="mini" type="info" slot="header">Card {{item.i}}</el-tag>
           <template v-if="item.i === '0'">
-            <p>拖拽卡片调整位置</p>
-            <p>拖拽卡片右下角的手柄调整卡片大小</p>
+            <div class="dd-mb">拖拽卡片调整位置</div>
+            <div class="dd-mb">拖拽卡片右下角的手柄调整卡片大小</div>
+            <GithubLinkButton
+              url="https://github.com/jbaysolutions/vue-grid-layout"
+              type="success">
+            </GithubLinkButton>
           </template>
         </el-card>
       </GridItem>
@@ -29,16 +33,14 @@ export default {
     return {
       layout: {
         layout: [
-          {'x': 0, 'y': 0, 'w': 4, 'h': 5, 'i': '0'},
-          {'x': 2, 'y': 5, 'w': 2, 'h': 5, 'i': '1'},
-          {'x': 4, 'y': 0, 'w': 2, 'h': 5, 'i': '2'},
-          {'x': 6, 'y': 0, 'w': 4, 'h': 5, 'i': '3'},
-          {'x': 10, 'y': 0, 'w': 2, 'h': 10, 'i': '4'},
-          {'x': 10, 'y': 10, 'w': 2, 'h': 5, 'i': '5'},
-          {'x': 0, 'y': 5, 'w': 2, 'h': 5, 'i': '6'},
-          {'x': 0, 'y': 10, 'w': 8, 'h': 5, 'i': '7'},
-          {'x': 8, 'y': 10, 'w': 2, 'h': 5, 'i': '8'},
-          {'x': 4, 'y': 5, 'w': 6, 'h': 5, 'i': '9'}
+          {'x': 0, 'y': 0, 'w': 4, 'h': 10, 'i': '0'},
+          {'x': 4, 'y': 0, 'w': 2, 'h': 5, 'i': '1'},
+          {'x': 6, 'y': 0, 'w': 4, 'h': 5, 'i': '2'},
+          {'x': 10, 'y': 0, 'w': 2, 'h': 10, 'i': '3'},
+          {'x': 4, 'y': 5, 'w': 4, 'h': 5, 'i': '4'},
+          {'x': 8, 'y': 5, 'w': 2, 'h': 5, 'i': '5'},
+          {'x': 0, 'y': 10, 'w': 8, 'h': 5, 'i': '6'},
+          {'x': 8, 'y': 10, 'w': 4, 'h': 5, 'i': '7'}
         ],
         colNum: 12,
         rowHeight: 30,
@@ -55,7 +57,7 @@ export default {
     layoutUpdatedHandler (newLayout) {
       // console.log('layoutUpdatedHandler')
       newLayout.forEach(e => {
-        // console.log(`{'x': ${e.x}, 'y': ${e.y}, 'w': ${e.w}, 'h': ${e.h}, 'i': '${e.i}'},`)
+        console.log(`{'x': ${e.x}, 'y': ${e.y}, 'w': ${e.w}, 'h': ${e.h}, 'i': '${e.i}'},`)
       })
     },
     resizeHandler (i, newH, newW) {