diff --git a/src/assets/style/fixed/base.scss b/src/assets/style/fixed/base.scss
index 5fc4354c..559bd2a1 100644
--- a/src/assets/style/fixed/base.scss
+++ b/src/assets/style/fixed/base.scss
@@ -7,4 +7,8 @@ body {
 pre {
   margin: 0px;
   border-radius: $border-radius;
+}
+
+a {
+  text-decoration: none;
 }
\ No newline at end of file
diff --git a/src/assets/style/public-class.scss b/src/assets/style/public-class.scss
index 81fe76c8..e9dc86b9 100644
--- a/src/assets/style/public-class.scss
+++ b/src/assets/style/public-class.scss
@@ -23,6 +23,12 @@ html, body {
   }
 }
 
+.fl {
+  float: left;
+}
+.fr {
+  float: right;
+}
 .clearfix:before,
 .clearfix:after {
   display: table;
diff --git a/src/components/demo/GithubLink/index.vue b/src/components/demo/GithubLink/index.vue
index f6ee0ab1..3c4734a0 100644
--- a/src/components/demo/GithubLink/index.vue
+++ b/src/components/demo/GithubLink/index.vue
@@ -1,6 +1,6 @@
 <template>
   <el-tooltip :content="url" :placement="tooltipPlacement">
-    <a :href="url" target="_blank">
+    <a :href="url" target="_blank" class="link">
       View in Github
       <span class="fa fa-github"></span>
     </a>
@@ -20,3 +20,10 @@ export default {
 }
 </script>
 
+<style lang="scss" scoped>
+@import '~@/assets/style/unit/_color.scss';
+.link {
+  color: $color-primary;
+}
+</style>
+
diff --git a/src/components/demo/PageHeader/index.vue b/src/components/demo/PageHeader/index.vue
new file mode 100644
index 00000000..0859ba59
--- /dev/null
+++ b/src/components/demo/PageHeader/index.vue
@@ -0,0 +1,23 @@
+<template>
+  <div class="clearfix">
+    <span class="fl">{{title}}</span>
+    <span class="fr"><GithubLink :url="url"></GithubLink></span>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    url: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    title: {
+      type: String,
+      required: false,
+      default: ''
+    }
+  }
+}
+</script>
diff --git a/src/components/index.js b/src/components/index.js
index 6b68cde0..e422b70a 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -48,3 +48,9 @@ Vue.component('CountUp', resolve => {
 Vue.component('Highlight', resolve => {
   require(['@/components/core/Highlight/index.vue'], resolve)
 })
+
+// 名称：页面Header
+// 用途：页面Header
+Vue.component('PageHeader', resolve => {
+  require(['@/components/demo/PageHeader/index.vue'], resolve)
+})
diff --git a/src/pages/demo/plugins/clipboard-polyfill/demo.vue b/src/pages/demo/plugins/clipboard-polyfill/demo.vue
index 827b428c..24bc2d6d 100644
--- a/src/pages/demo/plugins/clipboard-polyfill/demo.vue
+++ b/src/pages/demo/plugins/clipboard-polyfill/demo.vue
@@ -1,6 +1,10 @@
 <template>
   <Container>
-    <GithubLink url="https://github.com/lgarron/clipboard-polyfill"></GithubLink>
+    <PageHeader
+      slot="header"
+      title="基本示例"
+      url="https://github.com/lgarron/clipboard-polyfill">
+    </PageHeader>
     <el-row :gutter="10">
       <el-col :span="12">
         <div class="mb">
diff --git a/src/pages/demo/plugins/clipboard-polyfill/readme.vue b/src/pages/demo/plugins/clipboard-polyfill/readme.vue
index f2452d51..b216c1cf 100644
--- a/src/pages/demo/plugins/clipboard-polyfill/readme.vue
+++ b/src/pages/demo/plugins/clipboard-polyfill/readme.vue
@@ -1,7 +1,10 @@
 <template>
   <Container>
-    <p slot="title">README.md</p>
-    <p slot="more"><GithubLink url="https://github.com/lgarron/clipboard-polyfill"></GithubLink></p>
+    <PageHeader
+      slot="header"
+      title="README.md"
+      url="https://github.com/lgarron/clipboard-polyfill">
+    </PageHeader>
     <div>
       <Markdown url="https://raw.githubusercontent.com/lgarron/clipboard-polyfill/master/README.md"></Markdown>
     </div>
diff --git a/src/pages/demo/plugins/countup/demo.vue b/src/pages/demo/plugins/countup/demo.vue
index 5bfed81e..c4de9597 100644
--- a/src/pages/demo/plugins/countup/demo.vue
+++ b/src/pages/demo/plugins/countup/demo.vue
@@ -1,40 +1,52 @@
 <template>
-  <Container type="ghost" class="demo-plugin-countup-demo">
+  <Container type="ghost" class="page">
     <el-row :gutter="10">
       <el-col :span="6">
         <el-card>
           <p slot="title">只设置目标数字</p>
-          <CountUp :end="100"></CountUp>
+          <div class="group">
+            <CountUp :end="100"></CountUp>  
+          </div>
         </el-card>
       </el-col>
       <el-col :span="6">
         <el-card>
           <p slot="title">设置起止数值</p>
-          <CountUp :start="14" :end="100"></CountUp>
+          <div class="group">
+            <CountUp :start="14" :end="100"></CountUp>
+          </div>
         </el-card>
       </el-col>
       <el-col :span="6">
         <el-card>
           <p slot="title">小数位数</p>
-          <CountUp :end="100.00" :decimals="2"></CountUp>
+          <div class="group">
+            <CountUp :end="100.00" :decimals="2"></CountUp>  
+          </div>
         </el-card>
       </el-col>
       <el-col :span="6">
         <el-card>
           <p slot="title">动画时长</p>
-          <CountUp :end="100" :duration="6"></CountUp>
+          <div class="group">
+            <CountUp :end="100" :duration="6"></CountUp>
+          </div>
         </el-card>
       </el-col>
       <el-col :span="6">
         <el-card>
           <p slot="title">回调函数</p>
-          <CountUp :end="100" :callback="() => {className = 'end'}" :class="className"></CountUp>
+          <div class="group">
+            <CountUp :end="100" :callback="() => {className = 'end'}" :class="className"></CountUp>
+          </div>
         </el-card>
       </el-col>
       <el-col :span="6">
         <el-card>
           <p slot="title">结束一秒后更新数值</p>
-          <CountUp :end="end" :callback="update"></CountUp>
+          <div class="group">
+            <CountUp :end="end" :callback="update"></CountUp>
+          </div>
         </el-card>
       </el-col>
     </el-row>
@@ -62,18 +74,18 @@ export default {
 </script>
 
 
-<style lang="scss">
+<style lang="scss" scoped>
 @import '~@/assets/style/public.scss';
-.demo-plugin-countup-demo {
+.page {
   .el-card {
     @extend %unable-select;
     margin-bottom: 10px;
-    .el-card__body {
+    .group {
       display: flex;
       justify-content: center;
       align-items: center;
       span {
-        font-size: 40px;
+        font-size: 60px;
         &.end {
           padding: 0px 20px;
           border-radius: $border-radius;
diff --git a/src/pages/demo/plugins/countup/readme.vue b/src/pages/demo/plugins/countup/readme.vue
index c665778c..a8de2393 100644
--- a/src/pages/demo/plugins/countup/readme.vue
+++ b/src/pages/demo/plugins/countup/readme.vue
@@ -1,7 +1,10 @@
 <template>
   <Container>
-    <p slot="title">README.md</p>
-    <p slot="more"><GithubLink url="https://github.com/inorganik/countUp.js"></GithubLink></p>
+    <PageHeader
+      slot="header"
+      title="README.md"
+      url="https://github.com/inorganik/countUp.js">
+    </PageHeader>
     <div>
       <Markdown url="https://raw.githubusercontent.com/inorganik/countUp.js/master/README.md"></Markdown>
     </div>
diff --git a/src/pages/demo/plugins/highlight/readme.vue b/src/pages/demo/plugins/highlight/readme.vue
index 2889a9c0..d2bd826f 100644
--- a/src/pages/demo/plugins/highlight/readme.vue
+++ b/src/pages/demo/plugins/highlight/readme.vue
@@ -1,7 +1,10 @@
 <template>
   <Container>
-    <p slot="title">README.md</p>
-    <p slot="more"><GithubLink url="https://github.com/isagalaev/highlight.js"></GithubLink></p>
+    <PageHeader
+      slot="header"
+      title="README.md"
+      url="https://github.com/isagalaev/highlight.js">
+    </PageHeader>
     <div>
       <Markdown url="https://raw.githubusercontent.com/isagalaev/highlight.js/master/README.md"></Markdown>
     </div>
diff --git a/src/pages/demo/plugins/js-cookie/readme.vue b/src/pages/demo/plugins/js-cookie/readme.vue
index ac07572f..9a9c6004 100644
--- a/src/pages/demo/plugins/js-cookie/readme.vue
+++ b/src/pages/demo/plugins/js-cookie/readme.vue
@@ -1,7 +1,10 @@
 <template>
   <Container>
-    <p slot="title">README.md</p>
-    <p slot="more"><GithubLink url="https://github.com/js-cookie/js-cookie"></GithubLink></p>
+    <PageHeader
+      slot="header"
+      title="README.md"
+      url="https://github.com/js-cookie/js-cookie">
+    </PageHeader>
     <div>
       <Markdown url="https://raw.githubusercontent.com/js-cookie/js-cookie/master/README.md"></Markdown>
     </div>
diff --git a/src/pages/demo/plugins/marked/readme.vue b/src/pages/demo/plugins/marked/readme.vue
index ec897bf0..51a03ed7 100644
--- a/src/pages/demo/plugins/marked/readme.vue
+++ b/src/pages/demo/plugins/marked/readme.vue
@@ -1,7 +1,10 @@
 <template>
   <Container>
-    <p slot="title">README.md</p>
-    <p slot="more"><GithubLink url="https://github.com/chjj/marked"></GithubLink></p>
+    <PageHeader
+      slot="header"
+      title="README.md"
+      url="https://github.com/chjj/marked">
+    </PageHeader>
     <Markdown url="https://raw.githubusercontent.com/chjj/marked/master/README.md"></Markdown>
   </Container>
 </template>
\ No newline at end of file
diff --git a/src/pages/demo/plugins/mock/grammaticalNorm.vue b/src/pages/demo/plugins/mock/grammaticalNorm.vue
index 8ef97fed..51122ab3 100644
--- a/src/pages/demo/plugins/mock/grammaticalNorm.vue
+++ b/src/pages/demo/plugins/mock/grammaticalNorm.vue
@@ -1,5 +1,10 @@
 <template>
   <Container>
+    <PageHeader
+      slot="header"
+      title="mock语法规范"
+      url="https://github.com/nuysoft/Mock">
+    </PageHeader>
     <Markdown url="/static/markdownFiles/article/mock语法规范.md"></Markdown>
   </Container>
 </template>
\ No newline at end of file
diff --git a/src/pages/demo/plugins/mock/readme.vue b/src/pages/demo/plugins/mock/readme.vue
index 5680195b..5242b332 100644
--- a/src/pages/demo/plugins/mock/readme.vue
+++ b/src/pages/demo/plugins/mock/readme.vue
@@ -1,7 +1,10 @@
 <template>
   <Container>
-    <p slot="title">README.md</p>
-    <p slot="more"><GithubLink url="https://github.com/nuysoft/Mock"></GithubLink></p>
+    <PageHeader
+      slot="header"
+      title="README.md"
+      url="https://github.com/nuysoft/Mock">
+    </PageHeader>
     <Markdown url="https://raw.githubusercontent.com/nuysoft/Mock/refactoring/README.md"></Markdown>
   </Container>
 </template>
\ No newline at end of file
diff --git a/src/pages/demo/plugins/papaParse/demo.vue b/src/pages/demo/plugins/papaParse/demo.vue
index cbf68397..6820436b 100644
--- a/src/pages/demo/plugins/papaParse/demo.vue
+++ b/src/pages/demo/plugins/papaParse/demo.vue
@@ -1,7 +1,10 @@
 <template>
   <Container>
-    <!-- <template slot="title">演示</tempalte> -->
-    <p slot="more"><GithubLink url="https://github.com/mholt/PapaParse"></GithubLink></p>
+    <PageHeader
+      slot="header"
+      title="基本示例"
+      url="https://github.com/mholt/PapaParse">
+    </PageHeader>
     <el-upload
       :before-upload="handleUpload"
       action="default">
diff --git a/src/pages/demo/plugins/papaParse/readme.vue b/src/pages/demo/plugins/papaParse/readme.vue
index 1eecaa1d..398365d1 100644
--- a/src/pages/demo/plugins/papaParse/readme.vue
+++ b/src/pages/demo/plugins/papaParse/readme.vue
@@ -1,7 +1,10 @@
 <template>
   <Container>
-    <p slot="title">README.md</p>
-    <p slot="more"><GithubLink url="https://github.com/mholt/PapaParse"></GithubLink></p>
+    <PageHeader
+      slot="header"
+      title="README.md"
+      url="https://github.com/mholt/PapaParse">
+    </PageHeader>
     <Markdown url="https://raw.githubusercontent.com/mholt/PapaParse/master/README.md"></Markdown>
   </Container>
 </template>
\ No newline at end of file
diff --git a/src/pages/demo/plugins/simpleMDE/demo.vue b/src/pages/demo/plugins/simpleMDE/demo.vue
index 09218fee..fe1fae68 100644
--- a/src/pages/demo/plugins/simpleMDE/demo.vue
+++ b/src/pages/demo/plugins/simpleMDE/demo.vue
@@ -1,7 +1,10 @@
 <template>
   <Container>
-    <!-- <template slot="title">演示</tempalte> -->
-    <p slot="more"><GithubLink url="https://github.com/sparksuite/simplemde-markdown-editor"></GithubLink></p>
+    <PageHeader
+      slot="header"
+      title="基本示例"
+      url="https://github.com/sparksuite/simplemde-markdown-editor">
+    </PageHeader>
     <div style="margin-bottom: -16px;">
       <SimpleMDE></SimpleMDE>
     </div>
diff --git a/src/pages/demo/plugins/simpleMDE/readme.vue b/src/pages/demo/plugins/simpleMDE/readme.vue
index f17a751a..15402f14 100644
--- a/src/pages/demo/plugins/simpleMDE/readme.vue
+++ b/src/pages/demo/plugins/simpleMDE/readme.vue
@@ -1,7 +1,10 @@
 <template>
   <Container>
-    <p slot="title">README.md</p>
-    <p slot="more"><GithubLink url="https://github.com/sparksuite/simplemde-markdown-editor"></GithubLink></p>
+    <PageHeader
+      slot="header"
+      title="README.md"
+      url="https://github.com/sparksuite/simplemde-markdown-editor">
+    </PageHeader>
     <Markdown url="https://raw.githubusercontent.com/sparksuite/simplemde-markdown-editor/master/README.md"></Markdown>
   </Container>
 </template>
\ No newline at end of file
diff --git a/src/pages/demo/plugins/vue-grid-layout/readme.vue b/src/pages/demo/plugins/vue-grid-layout/readme.vue
index 49597f08..7e47dfb3 100644
--- a/src/pages/demo/plugins/vue-grid-layout/readme.vue
+++ b/src/pages/demo/plugins/vue-grid-layout/readme.vue
@@ -1,7 +1,10 @@
 <template>
   <Container>
-    <p slot="title">README.md</p>
-    <p slot="more"><GithubLink url="https://github.com/jbaysolutions/vue-grid-layout"></GithubLink></p>
+    <PageHeader
+      slot="header"
+      title="README.md"
+      url="https://github.com/jbaysolutions/vue-grid-layout">
+    </PageHeader>
     <Markdown url="https://raw.githubusercontent.com/jbaysolutions/vue-grid-layout/master/README.md"></Markdown>
   </Container>
 </template>
\ No newline at end of file
diff --git a/src/pages/demo/plugins/vue-splitpane/demo.vue b/src/pages/demo/plugins/vue-splitpane/demo.vue
index 3b6ca388..396c453c 100644
--- a/src/pages/demo/plugins/vue-splitpane/demo.vue
+++ b/src/pages/demo/plugins/vue-splitpane/demo.vue
@@ -1,7 +1,10 @@
 <template>
   <Container>
-    <!-- <template slot="title">演示</tempalte> -->
-    <p slot="more"><GithubLink url="https://github.com/PanJiaChen/vue-split-pane"></GithubLink></p>
+    <PageHeader
+      slot="header"
+      title="基本示例"
+      url="https://github.com/PanJiaChen/vue-split-pane">
+    </PageHeader>
     <div style="height: 400px; margin: -16px;">
       <SplitPane :min-percent='20' :default-percent='30' split="vertical">
         <template slot="paneL"><div style="margin: 10px;">左</div></template>
diff --git a/src/pages/demo/plugins/vue-splitpane/readme.vue b/src/pages/demo/plugins/vue-splitpane/readme.vue
index fe07d336..21d9813d 100644
--- a/src/pages/demo/plugins/vue-splitpane/readme.vue
+++ b/src/pages/demo/plugins/vue-splitpane/readme.vue
@@ -1,7 +1,10 @@
 <template>
   <Container>
-    <p slot="title">README.md</p>
-    <p slot="more"><GithubLink url="https://github.com/PanJiaChen/vue-split-pane"></GithubLink></p>
+    <PageHeader
+      slot="header"
+      title="README.md"
+      url="https://github.com/PanJiaChen/vue-split-pane">
+    </PageHeader>
     <Markdown url="https://raw.githubusercontent.com/PanJiaChen/vue-split-pane/master/README.md"></Markdown>
   </Container>
 </template>
\ No newline at end of file