add && refine

src/views/components/mixin.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="components-container">
+    <div class='component-item'>
+      <MDinput name="name" v-model="title" required :maxlength="100">
+                标题
+      </MDinput>
+      <code class='code-part'>Material Design 的input</code>
+    </div>
+
+    <div class='component-item'>
+     <PanThumb image='https://wpimg.wallstcn.com/577965b9-bb9e-4e02-9f0c-095b41417191'>
+        上海花裤衩
+    </PanThumb>
+      <code  class='code-part'>图片hover效果</code>
+    </div>
+  </div>
+</template>
+<script>
+    import MDinput from 'components/MDinput';
+    import PanThumb from 'components/PanThumb';
+
+    export default {
+      components: { MDinput, PanThumb },
+      data() {
+        return {
+          title: ''
+        }
+      }
+    };
+</script>
+
+<style scoped>
+.component-item{
+  margin-top: 100px;
+}
+.code-part{
+  margin-top: 20px;
+}
+</style>