add view

src/views/components/404.vue

@@ -1,61 +0,0 @@
-<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/dndlist.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="components-container">
+    <code>公司做的后台主要是一个cms系统，公司也是已自媒体为核心的，所以富文本是后台很核心的功能。在选择富文本的过程中也走了不少的弯路，市面上常见的富文本都基本用过了，最终选择了tinymce</code>
+    <div class="editor-container">
+       <TwoDndList :list1="list1" :list2="list2" :list1Title="头条列表" list2Title="文章池"></TwoDndList>
+    </div>
+    <!--<div class='editor-content'>
+{{content}}
+    </div>-->
+  </div>
+</template>
+<script>
+    import DndList from 'components/twoDndList'
+
+    export default {
+      components: { DndList },
+      data() {
+        return {
+          list1: [],
+          list2: []
+        }
+      },
+      methods: {
+
+      }
+    };
+</script>
+
+

src/views/components/jsoneditor.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="components-container" style='height:100vh'>
+    <code>有校验</code>
+    <div class="editor-container">
+      <json-editor ref="jsonEditor" v-model="value"></json-editor>
+    </div>
+  </div>
+</template>
+<script>
+    import jsonEditor from 'components/jsonEditor';
+    const jsonData = '[{"items":[{"market_type":"forexdata","symbol":"XAUUSD"},{"market_type":"forexdata","symbol":"UKOIL"},{"market_type":"forexdata","symbol":"CORN"}],"name":""},{"items":[{"market_type":"forexdata","symbol":"XAUUSD"},{"market_type":"forexdata","symbol":"XAGUSD"},{"market_type":"forexdata","symbol":"AUTD"},{"market_type":"forexdata","symbol":"AGTD"}],"name":"贵金属"},{"items":[{"market_type":"forexdata","symbol":"CORN"},{"market_type":"forexdata","symbol":"WHEAT"},{"market_type":"forexdata","symbol":"SOYBEAN"},{"market_type":"forexdata","symbol":"SUGAR"}],"name":"农产品"},{"items":[{"market_type":"forexdata","symbol":"UKOIL"},{"market_type":"forexdata","symbol":"USOIL"},{"market_type":"forexdata","symbol":"NGAS"}],"name":"能源化工"}]';
+    export default {
+      components: { jsonEditor },
+      data() {
+        return {
+          value: JSON.parse(jsonData)
+        }
+      }
+    };
+</script>
+
+<style scoped>
+.editor-container{
+    position: relative;
+    height: 100%;
+}
+</style>
+