add view && refine css

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>
+

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>