diff --git a/src/assets/iconfont/iconfont.js b/src/assets/iconfont/iconfont.js
index b3394628d998f8fbd96e65d544e035487e64e848..67079a9351dfe88bafe87bb9cb2a50f5acab7b51 100644
--- a/src/assets/iconfont/iconfont.js
+++ b/src/assets/iconfont/iconfont.js
@@ -1,6 +1,12 @@
;(function(window) {
var svgSprite = '<svg>' +
+ '' +
+ '<symbol id="icon-tubiaoleixingzhengchang" viewBox="0 0 1024 1024">' +
+ '' +
+ '<path d="M64 448 320 448 320 960 64 960 64 448 64 448ZM704 256 960 256 960 960 704 960 704 256 704 256ZM384 64 640 64 640 960 384 960 384 64 384 64Z" ></path>' +
+ '' +
+ '</symbol>' +
'' +
'<symbol id="icon-zujian" viewBox="0 0 1024 1024">' +
'' +
diff --git a/src/components/Charts/keyboard2.vue b/src/components/Charts/keyboard2.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8ba505458a9a326a2b5532a08c6f1faedaa95d0f
--- /dev/null
+++ b/src/components/Charts/keyboard2.vue
@@ -0,0 +1,149 @@
+<template>
+ <div :class="className" :id="id" :style="{height:height,width:width}"></div>
+</template>
+<script>
+ // 引入 ECharts 主模å—
+ const echarts = require('echarts/lib/echarts');
+ // 引入柱状图
+ require('echarts/lib/chart/bar');
+ require('echarts/lib/chart/line');
+ // 引入æç¤ºæ¡†å’Œæ ‡é¢˜ç»„ä»¶
+ require('echarts/lib/component/tooltip');
+ require('echarts/lib/component/title');
+
+ require('echarts/lib/component/visualMap');
+ export default {
+ name: 'barPercent',
+ props: {
+ className: {
+ type: String,
+ default: 'bar-percent-chart'
+ },
+ id: {
+ type: String,
+ default: 'bar-percent-chart'
+ },
+ width: {
+ type: String,
+ default: '200px'
+ },
+ height: {
+ type: String,
+ default: '200px'
+ }
+ },
+ data() {
+ return {};
+ },
+ mounted() {
+ this.initBar();
+ },
+ methods: {
+ initBar() {
+ this.chart = echarts.init(document.getElementById(this.id));
+
+ const xAxisData = [];
+ const data = [];
+ const data2 = [];
+ for (let i = 0; i < 50; i++) {
+ xAxisData.push(i);
+ data.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5);
+ data2.push((Math.sin(i / 5) * (i / 5 + 10) + i / 6) * 3);
+ }
+ this.chart.setOption(
+ {
+ backgroundColor: '#08263a',
+ xAxis: [{
+ show: false,
+ data: xAxisData
+ }, {
+ show: false,
+ data: xAxisData
+ }],
+ visualMap: {
+ show: false,
+ min: 0,
+ max: 50,
+ dimension: 0,
+ inRange: {
+ color: ['#4a657a', '#308e92', '#b1cfa5', '#f5d69f', '#f5898b', '#ef5055']
+ }
+ },
+ yAxis: {
+ axisLine: {
+ show: false
+ },
+ axisLabel: {
+ textStyle: {
+ color: '#4a657a'
+ }
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: '#08263f'
+ }
+ },
+ axisTick: {
+ show: false
+ }
+ },
+ series: [{
+ name: 'back',
+ type: 'bar',
+ data: data2,
+ z: 1,
+ itemStyle: {
+ normal: {
+ opacity: 0.4,
+ barBorderRadius: 5,
+ shadowBlur: 3,
+ shadowColor: '#111'
+ }
+ }
+ }, {
+ name: 'Simulate Shadow',
+ type: 'line',
+ data,
+ z: 2,
+ showSymbol: false,
+ animationDelay: 0,
+ animationEasing: 'linear',
+ animationDuration: 1200,
+ lineStyle: {
+ normal: {
+ color: 'transparent'
+ }
+ },
+ areaStyle: {
+ normal: {
+ color: '#08263a',
+ shadowBlur: 50,
+ shadowColor: '#000'
+ }
+ }
+ }, {
+ name: 'front',
+ type: 'bar',
+ data,
+ xAxisIndex: 1,
+ z: 3,
+ itemStyle: {
+ normal: {
+ barBorderRadius: 5
+ }
+ }
+ }],
+ animationEasing: 'elasticOut',
+ animationEasingUpdate: 'elasticOut',
+ animationDelay(idx) {
+ return idx * 20;
+ },
+ animationDelayUpdate(idx) {
+ return idx * 20;
+ }
+ })
+ }
+ }
+ }
+</script>
diff --git a/src/components/Hamburger/index.vue b/src/components/Hamburger/index.vue
index 5361dd511fd657c03fa90d7dccd39224236d5c82..fc330374604c721466e19eab98c9952751d8e92c 100644
--- a/src/components/Hamburger/index.vue
+++ b/src/components/Hamburger/index.vue
@@ -1,8 +1,6 @@
<template>
<div>
- <svg @click="toggleClick" class="wscn-icon hamburger" :class="{'is-active':isActive}" aria-hidden="true">
- <use xlink:href="#icon-hamburger"></use>
- </svg>
+ <svg t="1492500959545" @click="toggleClick" class="wscn-icon hamburger" :class="{'is-active':isActive}" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1691" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><path d="M966.8023 568.849776 57.196677 568.849776c-31.397081 0-56.850799-25.452695-56.850799-56.850799l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 543.397081 998.200404 568.849776 966.8023 568.849776z" p-id="1692"></path><path d="M966.8023 881.527125 57.196677 881.527125c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 856.07443 998.200404 881.527125 966.8023 881.527125z" p-id="1693"></path><path d="M966.8023 256.17345 57.196677 256.17345c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.850799 56.850799-56.850799l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.850799l0 0C1023.653099 230.720755 998.200404 256.17345 966.8023 256.17345z" p-id="1694"></path></svg>
</div>
</template>
diff --git a/src/router/index.js b/src/router/index.js
index 0768f3c4bb564669ef17f43bb36d4bcf5a1fe7cc..2e5bd97d767c49e537fb77038a13a4e8eca07912 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -19,6 +19,12 @@ import reset from '../views/login/reset';
/* components*/
const Tinymce = resolve => require(['../views/components/tinymce'], resolve);
const Markdown = resolve => require(['../views/components/markdown'], resolve);
+const Jsoneditor = resolve => require(['../views/components/jsoneditor'], resolve);
+
+/* charts*/
+const KeyboardChart = resolve => require(['../views/charts/keyboard'], resolve);
+const KeyboardChart2 = resolve => require(['../views/charts/keyboard2'], resolve);
+
/* admin*/
// const AdminCreateUser = resolve => require(['../views/admin/createUser'], resolve);
@@ -52,14 +58,27 @@ export default new Router({
]
},
{
- path: '/admin',
+ path: '/components',
component: Layout,
redirect: 'noredirect',
name: '组件',
icon: 'zujian',
children: [
{ path: 'tinymce', component: Tinymce, name: '富文本编辑器' },
- { path: 'markdown', component: Markdown, name: 'Markdown' }
+ { path: 'markdown', component: Markdown, name: 'Markdown' },
+ { path: 'jsoneditor', component: Jsoneditor, name: 'json编辑器' }
+
+ ]
+ },
+ {
+ path: '/charts',
+ component: Layout,
+ redirect: 'noredirect',
+ name: '图表',
+ icon: 'tubiaoleixingzhengchang',
+ children: [
+ { path: 'keyboard', component: KeyboardChart, name: '键盘图表' },
+ { path: 'keyboard2', component: KeyboardChart2, name: '键盘图表2' }
]
},
diff --git a/src/styles/index.scss b/src/styles/index.scss
index c6beb1d314201afebc2ce5ce4a2037a224ddf8fc..d04b5dff0179571636d37038657b0a98adb16175 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -1,17 +1,17 @@
@import './btn.scss';
// @import './editor.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;
+ font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
//@include scrollBar;
}
-label{
+
+label {
font-weight: 700;
}
@@ -19,7 +19,9 @@ html {
box-sizing: border-box;
}
-*, *:before, *:after {
+*,
+*:before,
+*:after {
box-sizing: inherit;
}
@@ -68,21 +70,29 @@ a:hover {
display: block;
}
-.components-container{
+.components-container {
margin: 30px 50px;
+ position: relative;
}
-code{
- background: #eef1f6;
- padding: 20px 10px;
- margin-bottom: 20px;
- display: block;
+.editor-container .CodeMirror {
+ height: 100%!important;
}
-.fade-enter-active, .fade-leave-active {
+
+code {
+ background: #eef1f6;
+ padding: 20px 10px;
+ margin-bottom: 20px;
+ display: block;
+}
+
+.fade-enter-active,
+.fade-leave-active {
transition: all .2s ease
}
-.fade-enter, .fade-leave-active {
+.fade-enter,
+.fade-leave-active {
opacity: 0;
}
@@ -101,7 +111,6 @@ code{
// margin: 0 auto;
// }
//}
-
//main-containerå…¨å±€æ ·å¼
.app-container {
padding: 20px;
@@ -139,7 +148,6 @@ code{
.el-upload {
float: left;
width: 100px;
-
}
.el-upload-list {
float: left;
@@ -190,15 +198,18 @@ code{
}
}
-.link-type,.link-type:focus {
+.link-type,
+.link-type:focus {
color: #337ab7;
cursor: pointer;
- &:hover{
+ &:hover {
color: rgb(32, 160, 255);
}
}
-.publishedTag, .draftTag, .deletedTag {
+.publishedTag,
+.draftTag,
+.deletedTag {
color: #fff;
background-color: $panGreen;
line-height: 1;
@@ -242,7 +253,7 @@ code{
.el-checkbox {
margin: 0 20px 15px 0;
}
- .el-checkbox + .el-checkbox {
+ .el-checkbox+.el-checkbox {
margin-left: 0px;
}
}
@@ -272,8 +283,8 @@ code{
p {
display: inline-block;
}
- .el-collapse-item__content{
- padding-right:0px;
+ .el-collapse-item__content {
+ padding-right: 0px;
}
}
@@ -328,12 +339,14 @@ code{
margin-right: 8px;
}
}
-.small-padding{
- .cell{
+
+.small-padding {
+ .cell {
padding-left: 8px;
padding-right: 8px;
}
}
+
.status-col {
.cell {
padding: 0 10px;
@@ -348,7 +361,10 @@ code{
// margin-left: 0px!important;
//}
.no-border {
- .el-input-group__prepend, .el-input__inner, .el-date-editor__editor, .multiselect__tags {
+ .el-input-group__prepend,
+ .el-input__inner,
+ .el-date-editor__editor,
+ .multiselect__tags {
border: none;
}
}
@@ -384,7 +400,7 @@ code{
}
//暂时性解决diolag 问题 https://github.com/ElemeFE/element/issues/2461
-.el-dialog{
+.el-dialog {
transform: none;
left: 0;
position: relative;
diff --git a/src/views/charts/keyboard.vue b/src/views/charts/keyboard.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c5dd06e8a5ec91ddc18b563dc1f719689e0eb75b
--- /dev/null
+++ b/src/views/charts/keyboard.vue
@@ -0,0 +1,29 @@
+<template>
+ <div class="components-container" style='height:100vh'>
+ <div class='chart-container'>
+ <keyboardChart height='100%' width='100%' />
+ </div>
+
+ </div>
+</template>
+<script>
+ import keyboardChart from 'components/Charts/keyboard';
+
+ export default {
+ components: { keyboardChart },
+ data() {
+ return {
+
+ }
+ }
+ };
+</script>
+
+<style scoped>
+.chart-container{
+ position: relative;
+ width: 100%;
+ height: 100%;
+}
+</style>
+
diff --git a/src/views/charts/keyboard2.vue b/src/views/charts/keyboard2.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f459ac7b3f411499ccf9e52a4d8988823493368d
--- /dev/null
+++ b/src/views/charts/keyboard2.vue
@@ -0,0 +1,29 @@
+<template>
+ <div class="components-container" style='height:100vh'>
+ <div class='chart-container'>
+ <keyboardChart2 id='apple' height='100%' width='100%' />
+ </div>
+
+ </div>
+</template>
+<script>
+ import keyboardChart2 from 'components/Charts/keyboard2';
+
+ export default {
+ components: { keyboardChart2 },
+ data() {
+ return {
+
+ }
+ }
+ };
+</script>
+
+<style scoped>
+.chart-container{
+ position: relative;
+ width: 100%;
+ height: 100%;
+}
+</style>
+
diff --git a/src/views/charts/markdown.vue b/src/views/charts/markdown.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3bf5e1accb457f1b27e6532e165ad9175d78944a
--- /dev/null
+++ b/src/views/charts/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>
+
+
diff --git a/src/views/charts/tinymce.vue b/src/views/charts/tinymce.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a88bd91cbe52faed493313318f4dd5f8a80aac28
--- /dev/null
+++ b/src/views/charts/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>
+
+
diff --git a/src/views/components/404.vue b/src/views/components/404.vue
deleted file mode 100644
index d2b3ce3ceaabb3e48a710d417fa0ad2c0a1f4d32..0000000000000000000000000000000000000000
--- a/src/views/components/404.vue
+++ /dev/null
@@ -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>
diff --git a/src/views/components/dndlist.vue b/src/views/components/dndlist.vue
new file mode 100644
index 0000000000000000000000000000000000000000..bc84361d6c6751773727f45386f5f44d2254843c
--- /dev/null
+++ b/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>
+
+
diff --git a/src/views/components/jsoneditor.vue b/src/views/components/jsoneditor.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ca8142a59ffa778927f39482a1f6d81b4fbd417e
--- /dev/null
+++ b/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>
+
diff --git a/src/views/dashboard/default/index.vue b/src/views/dashboard/default/index.vue
index 745afa99f4d870770c6411efb06bc76cbb20bcf0..97b05fa6fc248cfb498c0adf4a0760d8e751e430 100644
--- a/src/views/dashboard/default/index.vue
+++ b/src/views/dashboard/default/index.vue
@@ -19,13 +19,12 @@
<script>
import { mapGetters } from 'vuex';
import PanThumb from 'components/PanThumb';
- import emptyGif from 'assets/gifs/business_fella.gif';
export default {
name: 'dashboard-default',
components: { PanThumb },
data() {
return {
- emptyGif
+ emptyGif: 'https://wpimg.wallstcn.com/0e03b7da-db9e-4819-ba10-9016ddfdaed3'
}
},
computed: {
diff --git a/src/views/error/401.vue b/src/views/error/401.vue
index a1fe9bc139939426e1646b4640627c0acd426d7d..3e95fa6f0236abe83a2c98466d71381ab0cd1920 100644
--- a/src/views/error/401.vue
+++ b/src/views/error/401.vue
@@ -27,12 +27,12 @@
</template>
<script>
import errGif from 'assets/401.gif';
- import ewizardClap from 'assets/gifs/wizard_clap.gif';
+
export default {
data() {
return {
errGif: errGif + '?' + +new Date(),
- ewizardClap,
+ ewizardClap: 'https://wpimg.wallstcn.com/007ef517-bafd-4066-aae4-6883632d9646',
dialogVisible: false
}
},