diff --git a/src/assets/iconfont/iconfont.js b/src/assets/iconfont/iconfont.js
index 966280ffd18777ba9f203f12dca089a6c4a6ed0e..acba8d0e82a2a7cfa3e91851b9c84b8923375d62 100644
--- a/src/assets/iconfont/iconfont.js
+++ b/src/assets/iconfont/iconfont.js
@@ -14,12 +14,30 @@
     '' +
     '</symbol>' +
     '' +
+    '<symbol id="icon-zonghe" viewBox="0 0 1024 1024">' +
+    '' +
+    '<path d="M770.56 460.8l250.88 0C998.4 220.16 803.84 25.6 563.2 2.56l0 250.88C668.16 273.92 750.08 355.84 770.56 460.8L770.56 460.8zM770.56 460.8"  ></path>' +
+    '' +
+    '<path d="M460.8 253.44 460.8 2.56C220.16 25.6 25.6 220.16 2.56 460.8l250.88 0C273.92 355.84 355.84 273.92 460.8 253.44L460.8 253.44zM460.8 253.44"  ></path>' +
+    '' +
+    '<path d="M563.2 770.56l0 250.88c243.2-23.04 435.2-217.6 460.8-460.8l-250.88 0C750.08 668.16 668.16 750.08 563.2 770.56L563.2 770.56zM563.2 770.56"  ></path>' +
+    '' +
+    '<path d="M253.44 563.2 2.56 563.2c23.04 243.2 217.6 435.2 460.8 460.8l0-250.88C355.84 750.08 273.92 668.16 253.44 563.2L253.44 563.2zM253.44 563.2"  ></path>' +
+    '' +
+    '</symbol>' +
+    '' +
     '<symbol id="icon-404" viewBox="0 0 1024 1024">' +
     '' +
     '<path d="M931.6 585.6l0 79c28.6-60.2 44.8-127.4 44.8-198.4C976.4 211 769.4 4 514.2 4S52 211 52 466.2c0 3.2 0.2 6.4 0.2 9.6l166-206 96.4 0L171.8 485.6l46.4 0 0-54.8 99.2-154.6 0 209.4 0 100 0 82.4-99.2 0 0-82.4L67.6 585.6c43 161 170.6 287.4 332.4 328.6-10.4 26.2-40.6 89.4-90.8 100.6-62.2 14 168.8 3.4 333.6-104.6 126.6-36.6 230.8-125.8 287.4-242.2l-97.6 0 0-82.4-166.2 0 0-87.2 0-12.8L666.4 476l166.2-206.2 94 0-140.4 215.8 46.4 0 0-59 99.2-154 0 213.2L931.8 585.6zM366.2 608c-4.8-11.2-7.2-23.2-7.2-36L359 357.6c0-12.8 2.4-24.8 7.2-36 4.8-11.2 11.4-21 19.6-29.2 8.2-8.2 18-14.8 29.2-19.6 11.2-4.8 23.2-7.2 36-7.2l81.6 0c12.8 0 24.8 2.4 36 7.2 11 4.8 20.6 11.2 28.8 19.2l-88.6 129.4 0-23c0-4.8-1.6-8.8-4.8-12-3.2-3.2-7.2-4.8-12-4.8-4.8 0-8.8 1.6-12 4.8-3.2 3.2-4.8 7.2-4.8 12l0 72L372.6 620C370.2 616.2 368 612.2 366.2 608zM624.4 572c0 12.8-2.4 24.8-7.2 36-4.8 11.2-11.4 21-19.6 29.2-8.2 8.2-18 14.8-29.2 19.6-11.2 4.8-23.2 7.2-36 7.2l-81.6 0c-12.8 0-24.8-2.4-36-7.2-11.2-4.8-21-11.4-29.2-19.6-3.6-3.6-7-7.8-10-12l99.2-144.6 0 50.6c0 4.8 1.6 8.8 4.8 12 3.2 3.2 7.2 4.8 12 4.8 4.8 0 8.8-1.6 12-4.8 3.2-3.2 4.8-7.2 4.8-12l0-99.6 92.6-135.2c6.6 7.4 12 15.8 16 25.2 4.8 11.2 7.2 23.2 7.2 36L624.2 572z"  ></path>' +
     '' +
     '</symbol>' +
     '' +
+    '<symbol id="icon-theme" viewBox="0 0 1024 1024">' +
+    '' +
+    '<path d="M788.00002 159.831491C756.00002 128 746 128 724.3801 128L642 128C642 128 576 188.923077 512 188.923077 448 188.923077 384 128 384 128L299.204802 128C276.629934 128 266 140.923077 245.847214 159.831491L81.582979 323.871735C70.243732 335.19552 52 371.692308 81.582979 408.655004 81.582979 408.655004 224.023667 540.29784 238.000003 541.53846L238.000003 835.076924C238.000003 868.452352 286.579 896 320 896L706 896C739.419808 896 788.00002 868.452352 788.00002 835.076924L788.00002 541.53846C802.145492 540.385864 942.448564 408.654992 942.448564 408.654992 974.00002 372 965.851264 334.883878 942.448584 311.513109L788.00002 159.831491Z"  ></path>' +
+    '' +
+    '</symbol>' +
+    '' +
     '<symbol id="icon-EXCEL" viewBox="0 0 1024 1024">' +
     '' +
     '<path d="M625.664 132.608V199.68h309.76v43.008h-309.76V312.32h309.76v43.008h-309.76v68.608h309.76v43.008h-309.76v68.608h309.76v43.008h-309.76v68.608h309.76v43.008h-309.76v68.096h309.76v43.008h-309.76v89.088H1024v-757.76h-398.336zM0 914.944L577.024 1024V0L0 109.056"  ></path>' +
diff --git a/src/router/index.js b/src/router/index.js
index 2bfd0d13d93d9e5d3a5b68efb3139c11072dd94d..a19fdbe73e05f346ac215649d3ce83571f31d807 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -39,13 +39,17 @@ const KeyboardChart2 = resolve => require(['../views/charts/keyboard2'], resolve
 const LineMarker = resolve => require(['../views/charts/line'], resolve);
 const MixChart = resolve => require(['../views/charts/mixchart'], resolve);
 
-/* excel*/
+/* error log*/
 const ErrorLog = resolve => require(['../views/errlog/index'], resolve);
 
 /* excel*/
 const ExcelDownload = resolve => require(['../views/excel/index'], resolve);
 
+/* theme*/
+const Theme = resolve => require(['../views/theme/index'], resolve);
 
+/* example*/
+const DynamicTable = resolve => require(['../views/example/dynamictable'], resolve);
 
 
 /* admin*/
@@ -86,7 +90,7 @@ export default new Router({
       name: '组件',
       icon: 'zujian',
       children: [
-        { path: 'index', component: componentsIndex, name: '介绍' },
+        { path: 'index', component: componentsIndex, name: '介绍 ' },
         { path: 'tinymce', component: Tinymce, name: '富文本编辑器' },
         { path: 'markdown', component: Markdown, name: 'Markdown' },
         { path: 'jsoneditor', component: JsonEditor, name: 'JSON编辑器' },
@@ -146,6 +150,27 @@ export default new Router({
         { path: 'download', component: ExcelDownload, name: '导出excel' }
       ]
     },
+    {
+      path: '/theme',
+      component: Layout,
+      redirect: 'noredirect',
+      name: 'theme',
+      icon: 'theme',
+      noDropdown: true,
+      children: [
+        { path: 'index', component: Theme, name: '换肤' }
+      ]
+    },
+    {
+      path: '/example',
+      component: Layout,
+      redirect: 'noredirect',
+      name: '综合实例',
+      icon: 'zonghe',
+      children: [
+        { path: 'dynamictable', component: DynamicTable, name: '动态table' }
+      ]
+    },
     // {
     //   path: '/admin',
     //   component: Layout,
diff --git a/src/styles/editor.scss b/src/styles/editor.scss
deleted file mode 100644
index de696c2d59ae421dfc5253cc89599617a51d3989..0000000000000000000000000000000000000000
--- a/src/styles/editor.scss
+++ /dev/null
@@ -1,348 +0,0 @@
-//富文本
-//移除 至static/tinymce/skins/lightgray.content.min.css
-  .small-size {
-    width: 800px;
-    margin: 0 auto;
-  }
-  img{
-    max-height: 300px;
-  }
-  .note-color .dropdown-menu li .btn-group{
-    &:first-child{
-      display: none;
-    }
-  }
-  //禁止图片缩放
-  .note-control-sizing {
-    display: none;
-  }
-  .panel-body {
-    $blue: #1478F0;
-    font-size: 16px;
-    line-height: 1.4em;
-    & > :last-child {
-      margin-bottom: 0;
-    }
-    img {
-      max-width: 100%;
-      display: block;
-      margin: 0 auto;
-    }
-    table {
-      width: 100% !important;
-    }
-    embed {
-      max-width: 100%;
-      margin-bottom: 30px;
-    }
-    p {
-      // margin-bottom: 1em;
-      text-align: justify;
-      word-break: break-all;
-    }
-    ul {
-      margin-bottom: 30px;
-    }
-    li {
-      margin-left: 20px;
-      margin-bottom: 30px;
-    }
-    a {
-      color: $blue;
-    }
-    hr {
-      margin: 1em auto;
-      border: none;
-      padding: 0;
-      width: 100%;
-      height: 1px;
-      background: #DCDCDC;
-    }
-    //add type.css start
-    blockquote p {
-      font-size: 16px;
-      letter-spacing: 1px;
-      line-height: 28px;
-      color: #333;
-    }
-    blockquote p:last-of-type {
-      margin-bottom: 0;
-    }
-    /* HTML5 媒体文件跟 img 保持一致 */
-    audio,
-    canvas,
-    video {
-      display: inline-block;
-      *display: inline;
-      *zoom: 1;
-    }
-    /* 要注意表单元素并不继承父级 font 的问题 */
-    button,
-    input,
-    select,
-    textarea {
-      font: 500 14px/1.8 'Hiragino Sans GB', Microsoft YaHei, sans-serif;
-    }
-    /* 去掉各Table  cell 的边距并让其边重合 */
-    table {
-      border-collapse: collapse;
-      border-spacing: 0;
-    }
-    /* IE bug fixed: th 不继承 text-align*/
-    th {
-      text-align: inherit;
-    }
-    /* 去除默认边框 */
-    fieldset,
-    img {
-      border: 0;
-    }
-    /* 解决 IE6-7 图片缩放锯齿问题 */
-    img {
-      -ms-interpolation-mode: bicubic;
-    }
-    /* ie6 7 8(q) bug 显示为行内表现 */
-    iframe {
-      display: block;
-    }
-    /* 块/段落引用 */
-    blockquote {
-      position: relative;
-      font-size: 16px;
-      letter-spacing: 1px;
-      line-height: 28px;
-      margin-bottom: 40px;
-      padding: 20px;
-      background: #f0f2f5;
-      &:before{
-          position: absolute;
-        content: " \300D";
-        top: 10px;
-        left: 2px;
-        -webkit-transform: rotate(180deg);
-        transform: rotate(180deg);
-        color: #333;
-      }
-      &:after{
-        position: absolute;
-        content: " \300D";
-        right: 6px;
-        bottom: 12px;
-        color: #333;
-      }
-    }
-    blockquote blockquote {
-      padding: 0 0 0 1em;
-      margin-left: 2em;
-      border-left: 3px solid $blue;
-    }
-    /* Firefox 以外，元素没有下划线，需添加 */
-    acronym,
-    abbr {
-      border-bottom: 1px dotted;
-      font-variant: normal;
-    }
-    /* 添加鼠标问号，进一步确保应用的语义是正确的（要知道，交互他们也有洁癖，如果你不去掉，那得多花点口舌） */
-    abbr {
-      cursor: help;
-    }
-    /* 一致的 del 样式 */
-    del {
-      text-decoration: line-through;
-    }
-    address,
-    caption,
-    cite,
-    code,
-    del,
-    em,
-    th,
-    var {
-      font-style: normal;
-      font-weight: 500;
-    }
-    em {
-      font-style: normal;
-      font-family: sans-serif;
-      font-weight: bold;
-    }
-    /* 对齐是排版最重要的因素, 别让什么都居中 */
-    caption,
-    th {
-      text-align: left;
-    }
-    q:before,
-    q:after {
-      content: '';
-    }
-    /* 统一上标和下标 */
-    sub,
-    sup {
-      font-size: 75%;
-      line-height: 0;
-      position: relative;
-      vertical-align: text-top;
-    }
-    :root sub,
-    :root sup {
-      vertical-align: baseline;
-      /* for ie9 and other mordern browsers */
-    }
-    sup {
-      top: -0.5em;
-    }
-    sub {
-      bottom: -0.25em;
-    }
-    /* 让链接在 hover 状态下显示下划线 */
-    a:hover {
-      text-decoration: underline;
-    }
-    /* 默认不显示下划线，保持页面简洁 */
-    ins,
-    a {
-      text-decoration: none;
-    }
-    u,
-    .typo-u {
-      text-decoration: underline;
-    }
-    /* 标记，类似于手写的荧光笔的作用 */
-    mark {
-      background: #fffdd1;
-    }
-    /* 代码片断 */
-    pre,
-    code {
-      font-family: "Courier New", Courier, monospace;
-    }
-    pre {
-      border: 1px solid #ddd;
-      border-left-width: 0.4em;
-      background: #fbfbfb;
-      padding: 10px;
-    }
-    /* 底部印刷体、版本等标记 */
-    small {
-      font-size: 12px;
-      color: #888;
-    }
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-      font-size: 18px;
-      font-weight: 700;
-      color: #1478f0;
-      border-left: 5px solid #1478f0;
-      padding-left: 10px;
-      margin: 30px 0;
-    }
-    h2 {
-      font-size: 1.2em;
-    }
-    /* 保证块/段落之间的空白隔行 */
-    .typo p,
-    .typo pre,
-    .typo ul,
-    .typo ol,
-    .typo dl,
-    .typo form,
-    .typo hr,
-    .typo table,
-    .typo-p,
-    .typo-pre,
-    .typo-ul,
-    .typo-ol,
-    .typo-dl,
-    .typo-form,
-    .typo-hr,
-    .typo-table {
-      margin-bottom: 15px;
-      line-height: 25px;
-    }
-    /* 标题应该更贴紧内容，并与其他块区分，margin 值要相应做优化 */
-    .typo h1,
-    .typo h2,
-    .typo h3,
-    .typo h4,
-    .typo h5,
-    .typo h6,
-    .typo-h1,
-    .typo-h2,
-    .typo-h3,
-    .typo-h4,
-    .typo-h5,
-    .typo-h6 {
-      margin-bottom: 0.4em;
-      line-height: 1.5;
-    }
-    .typo h1,
-    .typo-h1 {
-      font-size: 1.8em;
-    }
-    .typo h2,
-    .typo-h2 {
-      font-size: 1.6em;
-    }
-    .typo h3,
-    .typo-h3 {
-      font-size: 1.4em;
-    }
-    .typo h4,
-    .typo-h0 {
-      font-size: 1.2em;
-    }
-    .typo h5,
-    .typo h6,
-    .typo-h5,
-    .typo-h6 {
-      font-size: 1em;
-    }
-    /* 在文章中，应该还原 ul 和 ol 的样式 */
-    .typo ul,
-    .typo-ul {
-      margin-left: 1.3em;
-      list-style: disc;
-    }
-    .typo ol,
-    .typo-ol {
-      list-style: decimal;
-      margin-left: 1.9em;
-    }
-    .typo li ul,
-    .typo li ol,
-    .typo-ul ul,
-    .typo-ul ol,
-    .typo-ol ul,
-    .typo-ol ol {
-      margin-top: 0;
-      margin-bottom: 0;
-      margin-left: 2em;
-    }
-    .typo li ul,
-    .typo-ul ul,
-    .typo-ol ul {
-      list-style: circle;
-    }
-    /* 同 ul/ol，在文章中应用 table 基本格式 */
-    .typo table th,
-    .typo table td,
-    .typo-table th,
-    .typo-table td {
-      border: 1px solid #ddd;
-      padding: 5px 10px;
-    }
-    .typo table th,
-    .typo-table th {
-      background: #fbfbfb;
-    }
-    .typo table thead th,
-    .typo-table thead th {
-      background: #f1f1f1;
-    }
-  }
-
-
diff --git a/src/styles/element-ui.scss b/src/styles/element-ui.scss
new file mode 100644
index 0000000000000000000000000000000000000000..a6670d599cc5f4dd75243238a75051afc0c06c52
--- /dev/null
+++ b/src/styles/element-ui.scss
@@ -0,0 +1,61 @@
+ //覆盖一些element-ui样式
+.block-checkbox {
+  display: block;
+}
+
+.operation-container {
+  .cell {
+    padding: 10px !important;
+  }
+  .el-button {
+    &:nth-child(3) {
+      margin-top: 10px;
+      margin-left: 0px;
+    }
+    &:nth-child(4) {
+      margin-top: 10px;
+    }
+  }
+}
+
+.el-upload {
+  input[type="file"] {
+    display: none !important;
+  }
+}
+
+.el-upload__input {
+  display: none;
+}
+
+.cell {
+  .el-tag {
+    margin-right: 8px;
+  }
+}
+
+.small-padding {
+  .cell {
+    padding-left: 8px;
+    padding-right: 8px;
+  }
+}
+
+.status-col {
+  .cell {
+    padding: 0 10px;
+    text-align: center;
+    .el-tag {
+      margin-right: 0px;
+    }
+  }
+}
+
+//暂时性解决diolag 问题 https://github.com/ElemeFE/element/issues/2461
+.el-dialog {
+  transform: none;
+  left: 0;
+  position: relative;
+  margin: 0 auto;
+}
+
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 5e99cb98f4b12db8293bca1d85bf14a45250b050..802ba24adf3b6efe7356c43d0bd848eec9cf80a4 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -1,14 +1,11 @@
 @import './btn.scss';
-// @import './editor.scss';
+@import './element-ui.scss';
 @import "./mixin.scss";
 body {
-  //height: 100%;
-  //overflow-y: scroll;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
   font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
-  //@include scrollBar;
 }
 
 label {
@@ -66,17 +63,12 @@ a:hover {
   display: block;
 }
 
-.inlineBlock {
-  display: block;
-}
-
-.components-container {
-  margin: 30px 50px;
-  position: relative;
+.pointer {
+  cursor: pointer;
 }
 
-.editor-container .CodeMirror {
-  height: 100%!important;
+.inlineBlock {
+  display: block;
 }
 
 code {
@@ -103,77 +95,21 @@ code {
   opacity: 0;
 }
 
-//editor
-//.editor-placeholder {
-//  margin: 0 auto;
-//  display: block;
-//  .editor-placeholder-title {
-//    text-align: center;
-//    font-size: 20px;
-//    padding-bottom: 5px;
-//  }
-//  .editor-placeholder-image {
-//    display: block;
-//    max-height: 100px;
-//    margin: 0 auto;
-//  }
-//}
 //main-container全局样式
 .app-container {
   padding: 20px;
-  //min-height: 100%;
-}
-
-//element ui upload
-.upload-container {
-  .el-upload {
-    width: 100%;
-    .el-upload-dragger {
-      width: 100%;
-      height: 200px;
-    }
-  }
 }
-
-.singleImageUpload2.upload-container {
-  .el-upload {
-    width: 100%;
-    height: 100%;
-    .el-upload-dragger {
-      width: 100%;
-      height: 100%;
-      .el-icon-upload {
-        margin: 30% 0 16px;
-      }
-    }
-  }
-}
-
-.editor-video-upload {
-  @include clearfix;
-  margin-bottom: 10px;
-  .el-upload {
-    float: left;
-    width: 100px;
-  }
-  .el-upload-list {
-    float: left;
-    .el-upload-list__item:first-child {
-      margin-top: 0px;
-    }
-  }
-}
-
-.el-upload-list--picture-card {
-  float: left;
+.components-container {
+  margin: 30px 50px;
+  position: relative;
 }
-
 .pagination-container {
   margin-top: 30px;
 }
 
-.pointer {
-  cursor: pointer;
+
+.editor-container .CodeMirror {
+  height: 100%!important;
 }
 
 .wscn-icon {
@@ -274,26 +210,6 @@ code {
   }
 }
 
-//文章页textarea修改样式
-.article-textarea {
-  textarea {
-    padding-right: 40px;
-    resize: none;
-    border: none;
-    border-radius: 0px;
-    border-bottom: 1px solid #bfcbd9;
-  }
-}
-
-//实时新闻创建页特殊处理
-.recentNews-container {
-  p {
-    display: inline-block;
-  }
-  .el-collapse-item__content {
-    padding-right: 0px;
-  }
-}
 
 //refine vue-multiselect plugin
 .multiselect {
@@ -304,108 +220,6 @@ code {
   z-index: 1000 !important;
 }
 
-//reset element ui
-.block-checkbox {
-  display: block;
-}
-
-//上传页面不显示删除icon
-.mediaUpload-container {
-  .el-upload__btn-delete {
-    display: none !important;
-  }
-}
-
-.operation-container {
-  .cell {
-    padding: 10px !important;
-  }
-  .el-button {
-    &:nth-child(3) {
-      margin-top: 10px;
-      margin-left: 0px;
-    }
-    &:nth-child(4) {
-      margin-top: 10px;
-    }
-  }
-}
-
-.el-upload {
-  input[type="file"] {
-    display: none !important;
-  }
-}
-
-.el-upload__input {
-  display: none;
-}
-
-.cell {
-  .el-tag {
-    margin-right: 8px;
-  }
-}
-
-.small-padding {
-  .cell {
-    padding-left: 8px;
-    padding-right: 8px;
-  }
-}
-
-.status-col {
-  .cell {
-    padding: 0 10px;
-    text-align: center;
-    .el-tag {
-      margin-right: 0px;
-    }
-  }
-}
-
-//.el-form-item__content{
-//  margin-left: 0px!important;
-//}
-.no-border {
-  .el-input-group__prepend,
-  .el-input__inner,
-  .el-date-editor__editor,
-  .multiselect__tags {
-    border: none;
-  }
-}
-
-.el-select__tags {
-  max-width: 100% !important;
-}
-
-.small-space .el-form-item {
-  margin-bottom: 10px;
-}
-
-.no-padding {
-  .el-dropdown-menu__item {
-    padding: 0px;
-  }
-  .el-dropdown-menu {
-    padding: 0px;
-  }
-}
-
-.no-hover {
-  .el-dropdown-menu__item:not(.is-disabled):hover {
-    background-color: #fff;
-  }
-}
-
-.el-tooltip-fullwidth {
-  width: 100%;
-  .el-tooltip__rel {
-    width: 100%;
-  }
-}
-
 //暂时性解决diolag 问题 https://github.com/ElemeFE/element/issues/2461
 .el-dialog {
   transform: none;
diff --git a/src/styles/mixin.scss b/src/styles/mixin.scss
index fc61542b94943a71a6efec14b975f92b8ff4127a..4368917efde07f00f5807de89b356286f59e805c 100644
--- a/src/styles/mixin.scss
+++ b/src/styles/mixin.scss
@@ -54,4 +54,4 @@
     border-top: $transparent-border-style;
     border-bottom: $transparent-border-style;
   }
-}
\ No newline at end of file
+}
diff --git a/src/views/example/dynamictable.vue b/src/views/example/dynamictable.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b2b844fce0a79b46018b0dd82546f79443ec5a92
--- /dev/null
+++ b/src/views/example/dynamictable.vue
@@ -0,0 +1,39 @@
+<template>
+  <div class="app-container">
+    <div class="filter-container">
+    <el-checkbox-group v-model="formThead">
+        <el-checkbox label="apple">apple</el-checkbox>
+        <el-checkbox label="banana">banana</el-checkbox>
+        <el-checkbox label="orange">orange</el-checkbox>
+      </el-checkbox-group>
+    </div>
+    <el-table :data="tableData" style="width: 100%">
+      <el-table-column prop="name" label="名称" width="180">
+      </el-table-column>
+      <el-table-column :key='fruit' v-for='(fruit,index) in formThead' :label="fruit">
+        <template scope="scope">
+          {{scope.row.list[index].value}}
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+<script>
+
+
+export default {
+  data() {
+    return {
+      tableData: [{
+        name: '水果',
+        list: [{ name: 'apple', value: 10 }, { name: 'banana', value: 20 }, { name: 'orange', value: 20 }]
+      }, {
+        name: '水果2',
+        list: [{ name: 'apple2', value: 12 }, { name: 'banana2', value: 22 }, { name: 'orange', value: 20 }]
+      }],
+      formThead: ['apple', 'banana']
+    }
+  }
+};
+</script>
+
diff --git a/src/views/theme/index.vue b/src/views/theme/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2ee2b587ce4480b092e7a587f18d5a9a712a38e8
--- /dev/null
+++ b/src/views/theme/index.vue
@@ -0,0 +1,85 @@
+<template>
+  <div class="app-container">
+    <el-card class="box-card">
+      <div slot="header">
+        <span style="line-height: 36px;">偏好设置</span>
+      </div>
+
+      <div class="box-item">
+        <span class="field-label">换肤:</span>
+        <el-switch v-model="theme" on-text="" off-text="">
+        </el-switch>
+      </div>
+    </el-card>
+
+    <div class="block">
+      <span class="demonstration">Button: </span>
+      <span class="wrapper">
+        <el-button type="success">成功按钮</el-button>
+        <el-button type="warning">警告按钮</el-button>
+        <el-button type="danger">危险按钮</el-button>
+        <el-button type="info">信息按钮</el-button>
+       </span>
+    </div>
+
+    <div class="block">
+      <el-tag v-for="tag in tags" :type="tag.type">
+        {{tag.name}}
+      </el-tag>
+    </div>
+
+    <div class="block">
+      <el-alert title="成功提示的文案" type="success">
+      </el-alert>
+      <el-alert title="消息提示的文案" type="info">
+      </el-alert>
+      <el-alert title="警告提示的文案" type="warning">
+      </el-alert>
+      <el-alert title="错误提示的文案" type="error">
+      </el-alert>
+    </div>
+
+  </div>
+</template>
+
+
+<script>
+import { toggleClass } from 'utils';
+
+export default {
+  data() {
+    return {
+      theme: '',
+      tags: [
+          { name: '标签一', type: '' },
+          { name: '标签二', type: 'gray' },
+          { name: '标签三', type: 'primary' },
+          { name: '标签四', type: 'success' },
+          { name: '标签五', type: 'warning' },
+          { name: '标签六', type: 'danger' }
+      ],
+      inputVisible: false,
+      inputValue: ''
+    }
+  },
+  watch: {
+    theme() {
+      toggleClass(document.body, 'custom-theme')
+        //   this.$store.dispatch('setTheme', value);
+    }
+  },
+  methods: {
+
+  }
+};
+</script>
+
+<style scoped>
+.box-card{
+  width: 400px;
+  margin: 20px auto;
+}
+.block{
+  padding: 30px 24px;
+}
+</style>