init

src/views/components/404.vue

@@ -0,0 +1,61 @@
+<template>
+    <div class="errorpage-container"> 404
+        <splitPane v-on:resize="resize" split="vertical">
+            <template slot="paneL">
+                <div class="left-container"></div>
+            </template>
+            <template slot="paneR">
+                <splitPane split="horizontal">
+                    <template slot="paneL">
+                        <div class="top-container"></div>
+                    </template>
+                    <template slot="paneR">
+                        <div class="bottom-container">
+                        </div>
+                    </template>
+                </splitPane>
+            </template>
+        </splitPane>
+    </div>
+</template>
+
+
+<script>
+    import splitPane from 'components/SplitPane/SplitPane'
+    export default {
+      components: { splitPane },
+      methods: {
+        resize() {
+          console.log('resize')
+        }
+      }
+    };
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+    .errorpage-container{
+        position: relative;
+        height: 100vh;
+    }
+    .left-container {
+        background-color: #F38181;
+        height:100%;
+    }
+
+    .right-container {
+        background-color: #FCE38A;
+        height: 200px;
+    }
+
+    .top-container {
+        background-color: #FCE38A;
+        width: 100%;
+        height: 100%;
+    }
+
+    .bottom-container {
+        width: 100%;
+        background-color: #95E1D3;
+        height: 100%;
+
+    }
+</style>

src/views/components/markdown.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="components-container">
+    <code>公司做的后台主要是一个cms系统，公司也是已自媒体为核心的，所以富文本是后台很核心的功能。在选择富文本的过程中也走了不少的弯路，市面上常见的富文本都基本用过了，最终选择了tinymce</code>
+    <div class="editor-container">
+      <MdEditor  id='contentEditor' ref="contentEditor" v-model='content' :height="150"></MdEditor>
+    </div>
+  </div>
+</template>
+<script>
+    import MdEditor from 'components/MdEditor';
+
+    export default {
+      components: { MdEditor },
+      data() {
+        return {
+          content: 'Simplemde'
+        }
+      }
+    };
+</script>
+
+

src/views/components/tinymce.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="components-container">
+    <code>公司做的后台主要是一个cms系统，公司也是已自媒体为核心的，所以富文本是后台很核心的功能。在选择富文本的过程中也走了不少的弯路，市面上常见的富文本都基本用过了，最终选择了tinymce</code>
+    <div class="editor-container">
+      <Tinymce :height=200 ref="editor" v-model="content"></Tinymce>
+    </div>
+    <!--<div class='editor-content'>
+{{content}}
+    </div>-->
+  </div>
+</template>
+<script>
+    import Tinymce from 'components/Tinymce';
+
+    export default {
+      components: { Tinymce },
+      data() {
+        return {
+          content: 'Tinymce'
+        }
+      },
+      methods: {
+
+      }
+    };
+</script>
+
+