From d20585a3f92c0f1d38c915fa8fc6032d0beadb9c Mon Sep 17 00:00:00 2001
From: Pan <panfree23@gmail.com>
Date: Fri, 17 Nov 2017 17:51:41 +0800
Subject: [PATCH] refactor:foramt views/component-demo
---
src/components/GithubCorner/index.vue | 2 +-
src/components/JsonEditor/index.vue | 5 +-
src/components/MarkdownEditor/index.vue | 9 +-
src/components/Screenfull/index.vue | 14 +-
src/components/SplitPane/Pane.vue | 44 ------
src/components/SplitPane/Resizer.vue | 72 ----------
src/components/SplitPane/index.vue | 111 ---------------
src/components/Tinymce/index.vue | 4 +-
src/icons/index.js | 6 +-
src/mock/login.js | 7 -
src/permission.js | 2 +-
src/router/index.js | 23 +--
src/store/modules/app.js | 2 +-
src/store/modules/user.js | 2 +-
src/styles/index.scss | 13 ++
src/utils/clipboard.js | 2 +-
src/views/components-demo/avatarUpload.vue | 11 +-
src/views/components-demo/backToTop.vue | 1 +
src/views/components-demo/countTo.vue | 49 ++++---
src/views/components-demo/dndList.vue | 1 +
src/views/components-demo/dropzone.vue | 3 +-
src/views/components-demo/jsonEditor.vue | 3 +-
src/views/components-demo/markdown.vue | 11 +-
src/views/components-demo/mixin.vue | 17 +--
src/views/components-demo/splitpane.vue | 29 ++--
src/views/components-demo/sticky.vue | 1 +
src/views/components-demo/tinymce.vue | 9 +-
.../dashboard/admin/components/BarChart.vue | 1 +
.../dashboard/admin/components/PanelGroup.vue | 131 ++++++++++++++++++
src/views/dashboard/admin/index.vue | 122 +---------------
src/views/dashboard/editor/index.vue | 4 +-
src/views/layout/components/Navbar.vue | 2 +-
.../layout/components/Sidebar/SidebarItem.vue | 2 +-
src/views/login/index.vue | 8 +-
src/views/svg-icons/index.vue | 12 +-
35 files changed, 289 insertions(+), 446 deletions(-)
delete mode 100644 src/components/SplitPane/Pane.vue
delete mode 100644 src/components/SplitPane/Resizer.vue
delete mode 100644 src/components/SplitPane/index.vue
create mode 100644 src/views/dashboard/admin/components/PanelGroup.vue
diff --git a/src/components/GithubCorner/index.vue b/src/components/GithubCorner/index.vue
index 63177403..8f09e9de 100644
--- a/src/components/GithubCorner/index.vue
+++ b/src/components/GithubCorner/index.vue
@@ -1,6 +1,6 @@
<template>
<a href="https://github.com/PanJiaChen/vue-element-admin" target="_blank" class="github-corner" aria-label="View source on Github">
- <svg width="80" height="80" viewBox="0 0 250 250" style="fill:#4AB7BD; color:#fff; position: absolute; top: 84px; border: 0; right: 0;"
+ <svg width="80" height="80" viewBox="0 0 250 250" style="fill:#40c9c6; color:#fff; position: absolute; top: 84px; border: 0; right: 0;"
aria-hidden="true">
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
<path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
diff --git a/src/components/JsonEditor/index.vue b/src/components/JsonEditor/index.vue
index dcb5ee2d..1f2b769a 100644
--- a/src/components/JsonEditor/index.vue
+++ b/src/components/JsonEditor/index.vue
@@ -1,6 +1,6 @@
<template>
- <div class='json-editor'>
- <textarea ref='textarea'></textarea>
+ <div class="json-editor">
+ <textarea ref="textarea"></textarea>
</div>
</template>
@@ -57,7 +57,6 @@ export default {
.CodeMirror {
height: 100%;
}
-
.json-editor .cm-s-rubyblue span.cm-string {
color: #F08047;
}
diff --git a/src/components/MarkdownEditor/index.vue b/src/components/MarkdownEditor/index.vue
index 5dacf4a3..cbec69a0 100644
--- a/src/components/MarkdownEditor/index.vue
+++ b/src/components/MarkdownEditor/index.vue
@@ -1,6 +1,6 @@
<template>
- <div class='simplemde-container' :style="{height:height+'px',zIndex:zIndex}">
- <textarea :id='id'>
+ <div class="simplemde-container" :style="{height:height+'px',zIndex:zIndex}">
+ <textarea :id="id">
</textarea>
</div>
</template>
@@ -15,8 +15,7 @@ export default {
props: {
value: String,
id: {
- type: String,
- default: 'markdown-editor'
+ type: String
},
autofocus: {
type: Boolean,
@@ -52,7 +51,7 @@ export default {
},
mounted() {
this.simplemde = new SimpleMDE({
- element: document.getElementById(this.id),
+ element: document.getElementById(this.id || 'markdown-editor-' + +new Date()),
autoDownloadFontAwesome: false,
autofocus: this.autofocus,
toolbar: this.toolbar,
diff --git a/src/components/Screenfull/index.vue b/src/components/Screenfull/index.vue
index 89d25817..56de914e 100644
--- a/src/components/Screenfull/index.vue
+++ b/src/components/Screenfull/index.vue
@@ -1,6 +1,16 @@
<template>
-<div>
- <svg t="1508738709248" @click='click' class="screenfull-svg" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2069" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><path d="M333.493443 428.647617 428.322206 333.832158 262.572184 168.045297 366.707916 64.444754 64.09683 64.444754 63.853283 366.570793 167.283957 262.460644Z" p-id="2070"></path><path d="M854.845439 760.133334 688.61037 593.95864 593.805144 688.764889 759.554142 854.56096 655.44604 958.161503 958.055079 958.161503 958.274066 656.035464Z" p-id="2071"></path><path d="M688.535669 428.550403 854.31025 262.801405 957.935352 366.921787 957.935352 64.34754 655.809313 64.081481 759.919463 167.535691 593.70793 333.731874Z" p-id="2072"></path><path d="M333.590658 594.033341 167.8171 759.804852 64.218604 655.67219 64.218604 958.270996 366.342596 958.502263 262.234493 855.071589 428.421466 688.86108Z" p-id="2073"></path></svg>
+ <div>
+ <svg t="1508738709248" @click='click' class="screenfull-svg" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+ p-id="2069" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32">
+ <path d="M333.493443 428.647617 428.322206 333.832158 262.572184 168.045297 366.707916 64.444754 64.09683 64.444754 63.853283 366.570793 167.283957 262.460644Z"
+ p-id="2070"></path>
+ <path d="M854.845439 760.133334 688.61037 593.95864 593.805144 688.764889 759.554142 854.56096 655.44604 958.161503 958.055079 958.161503 958.274066 656.035464Z"
+ p-id="2071"></path>
+ <path d="M688.535669 428.550403 854.31025 262.801405 957.935352 366.921787 957.935352 64.34754 655.809313 64.081481 759.919463 167.535691 593.70793 333.731874Z"
+ p-id="2072"></path>
+ <path d="M333.590658 594.033341 167.8171 759.804852 64.218604 655.67219 64.218604 958.270996 366.342596 958.502263 262.234493 855.071589 428.421466 688.86108Z"
+ p-id="2073"></path>
+ </svg>
</div>
</template>
diff --git a/src/components/SplitPane/Pane.vue b/src/components/SplitPane/Pane.vue
deleted file mode 100644
index d13d1286..00000000
--- a/src/components/SplitPane/Pane.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<template>
- <div :class="classes">
- <slot></slot>
- </div>
-</template>
-
-<script>
-export default {
- name: 'Pane',
- data() {
- const classes = ['Pane', this.$parent.split, 'className']
- return {
- classes: classes.join(' '),
- percent: 50
- }
- }
-}
-</script>
-
-<style scoped>
-.splitter-pane.vertical.splitter-paneL {
- position: absolute;
- left: 0px;
- height: 100%;
-}
-
-.splitter-pane.vertical.splitter-paneR {
- position: absolute;
- right: 0px;
- height: 100%;
-}
-
-.splitter-pane.horizontal.splitter-paneL {
- position: absolute;
- top: 0px;
- width: 100%;
-}
-
-.splitter-pane.horizontal.splitter-paneR {
- position: absolute;
- bottom: 0px;
- width: 100%;
-}
-</style>
diff --git a/src/components/SplitPane/Resizer.vue b/src/components/SplitPane/Resizer.vue
deleted file mode 100644
index 07b6fb3b..00000000
--- a/src/components/SplitPane/Resizer.vue
+++ /dev/null
@@ -1,72 +0,0 @@
-<template>
- <div :class="classes" @mousedown="onMouseDown"></div>
-</template>
-
-<script>
-export default {
- props: {
- split: {
- validator(value) {
- return ['vertical', 'horizontal'].indexOf(value) >= 0
- },
- required: true
- },
- onMouseDown: {
- type: Function,
- required: true
- }
- },
- data() {
- const classes = ['Resizer', this.split, 'className']
- return {
- classes: classes.join(' ')
- }
- }
-}
-</script>
-
-<style scoped>
-.Resizer {
- -moz-box-sizing: border-box;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- background: #000;
- position: absolute;
- opacity: .2;
- z-index: 1;
- /*-moz-background-clip: padding;*/
- /*-webkit-background-clip: padding;*/
- /*background-clip: padding-box;*/
-}
-/*.Resizer:hover {*/
-/*-webkit-transition: all 2s ease;*/
-/*transition: all 2s ease;*/
-/*}*/
-
-.Resizer.horizontal {
- height: 11px;
- margin: -5px 0;
- border-top: 5px solid rgba(255, 255, 255, 0);
- border-bottom: 5px solid rgba(255, 255, 255, 0);
- cursor: row-resize;
- width: 100%;
-}
-
-.Resizer.horizontal:hover {
- border-top: 5px solid rgba(0, 0, 0, 0.5);
- border-bottom: 5px solid rgba(0, 0, 0, 0.5);
-}
-
-.Resizer.vertical {
- width: 11px;
- height: 100%;
- border-left: 5px solid rgba(255, 255, 255, 0);
- border-right: 5px solid rgba(255, 255, 255, 0);
- cursor: col-resize;
-}
-
-.Resizer.vertical:hover {
- border-left: 5px solid rgba(0, 0, 0, 0.5);
- border-right: 5px solid rgba(0, 0, 0, 0.5);
-}
-</style>
diff --git a/src/components/SplitPane/index.vue b/src/components/SplitPane/index.vue
deleted file mode 100644
index 477405b6..00000000
--- a/src/components/SplitPane/index.vue
+++ /dev/null
@@ -1,111 +0,0 @@
-<template>
- <div ref :style="{ cursor, userSelect}" class="vue-splitter-container clearfix" @mouseup="onMouseUp" @mousemove="onMouseMove">
- <pane class="splitter-pane splitter-paneL" :split="split" :style="{ [type]: percent+'%'}">
- <slot name="paneL"></slot>
- </pane>
- <resizer :style="{ [resizeType]: percent+'%'}" :split="split" :onMouseDown="onMouseDown" @click="onClick"></resizer>
- <pane class="splitter-pane splitter-paneR" :split="split" :style="{ [type]: 100-percent+'%'}">
- <slot name="paneR"></slot>
- </pane>
- </div>
-</template>
-
-<script>
-import Resizer from './Resizer'
-import Pane from './Pane'
-export default {
- name: 'splitPane',
- components: { Resizer, Pane },
- props: {
- margin: {
- type: Number,
- default: 10
- },
- split: {
- validator(value) {
- return ['vertical', 'horizontal'].indexOf(value) >= 0
- },
- required: true
- }
- },
- data() {
- return {
- active: false,
- hasMoved: false,
- height: null,
- percent: 50,
- type: this.split === 'vertical' ? 'width' : 'height',
- resizeType: this.split === 'vertical' ? 'left' : 'top'
- }
- },
- computed: {
- userSelect() {
- return this.active ? 'none' : ''
- },
- cursor() {
- return this.active ? 'col-resize' : ''
- }
- },
- methods: {
- onClick() {
- if (!this.hasMoved) {
- this.percent = 50
- this.$emit('resize')
- }
- },
- onMouseDown() {
- this.active = true
- this.hasMoved = false
- },
- onMouseUp() {
- this.active = false
- },
- onMouseMove(e) {
- if (e.buttons === 0 || e.which === 0) {
- this.active = false
- }
- if (this.active) {
- let offset = 0
- let target = e.currentTarget
- if (this.split === 'vertical') {
- while (target) {
- offset += target.offsetLeft
- target = target.offsetParent
- }
- } else {
- while (target) {
- offset += target.offsetTop
- target = target.offsetParent
- }
- }
-
- const currentPage = this.split === 'vertical' ? e.pageX : e.pageY
- const targetOffset = this.split === 'vertical' ? e.currentTarget.offsetWidth : e.currentTarget.offsetHeight
- const percent = Math.floor(((currentPage - offset) / targetOffset) * 10000) / 100
- if (percent > this.margin && percent < 100 - this.margin) {
- this.percent = percent
- }
- this.$emit('resize')
- this.hasMoved = true
- }
- }
- }
-}
-</script>
-
-<style scoped>
-.clearfix:after {
- visibility: hidden;
- display: block;
- font-size: 0;
- content: " ";
- clear: both;
- height: 0;
-}
-
-.vue-splitter-container {
- height: 100%;
- /*display: flex;*/
- position: relative;
-}
-</style>
diff --git a/src/components/Tinymce/index.vue b/src/components/Tinymce/index.vue
index dadac94b..a06f00c8 100644
--- a/src/components/Tinymce/index.vue
+++ b/src/components/Tinymce/index.vue
@@ -1,6 +1,6 @@
<template>
- <div class='tinymce-container editor-container'>
- <textarea class='tinymce-textarea' :id="tinymceId"></textarea>
+ <div class="tinymce-container editor-container">
+ <textarea class="tinymce-textarea" :id="tinymceId"></textarea>
<div class="editor-custom-btn-container">
<editorImage color="#20a0ff" class="editor-upload-btn" @successCBK="imageSuccessCBK"></editorImage>
</div>
diff --git a/src/icons/index.js b/src/icons/index.js
index e66c6ea1..2d689240 100644
--- a/src/icons/index.js
+++ b/src/icons/index.js
@@ -1,12 +1,12 @@
import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// svg组件
-import generateIconsView from '@/views/svg-icons/generateIconsView.js'// just for views/icons , you can delete it
-// register globally
+import generateIconsView from '@/views/svg-icons/generateIconsView.js'// just for @/views/icons , you can delete it
+// register globally
Vue.component('svg-icon', SvgIcon)
const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./svg', false, /\.svg$/)
const iconMap = requireAll(req)
-generateIconsView.generate(iconMap) // just for views/icons , you can delete it
+generateIconsView.generate(iconMap) // just for @/views/icons , you can delete it
diff --git a/src/mock/login.js b/src/mock/login.js
index 00ce9bde..f1fa8384 100644
--- a/src/mock/login.js
+++ b/src/mock/login.js
@@ -14,13 +14,6 @@ const userMap = {
introduction: '我是编辑',
avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
name: 'Normal Editor'
- },
- developer: {
- role: ['develop'],
- token: 'develop',
- introduction: '我是开å‘',
- avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
- name: '工程师å°çŽ‹'
}
}
diff --git a/src/permission.js b/src/permission.js
index b7ce9b6c..b588f26d 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -11,8 +11,8 @@ function hasPermission(roles, permissionRoles) {
return roles.some(role => permissionRoles.indexOf(role) >= 0)
}
-// register global progress.
const whiteList = ['/login', '/authredirect']// ä¸é‡å®šå‘白åå•
+
router.beforeEach((to, from, next) => {
NProgress.start() // å¼€å¯Progress
if (getToken()) { // 判æ–是å¦æœ‰token
diff --git a/src/router/index.js b/src/router/index.js
index cac05cd0..6b1f237e 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -87,22 +87,23 @@ export const asyncRouterMap = [
{
path: '/components',
component: Layout,
+ name: 'component-demo',
meta: {
title: 'components',
icon: 'component'
},
children: [
- { path: 'tinymce', component: _import('components-demo/tinymce'), name: 'tinymce', meta: { title: 'tinymce' }},
- { path: 'markdown', component: _import('components-demo/markdown'), name: 'markdown', meta: { title: 'markdown' }},
- { path: 'json-editor', component: _import('components-demo/jsonEditor'), name: 'jsonEditor', meta: { title: 'jsonEditor' }},
- { path: 'dnd-list', component: _import('components-demo/dndList'), name: 'dndList', meta: { title: 'dndList' }},
- { path: 'splitpane', component: _import('components-demo/splitpane'), name: 'splitpane', meta: { title: 'splitPane' }},
- { path: 'avatar-upload', component: _import('components-demo/avatarUpload'), name: 'avatarUpload', meta: { title: 'avatarUpload' }},
- { path: 'dropzone', component: _import('components-demo/dropzone'), name: 'dropzone', meta: { title: 'dropzone' }},
- { path: 'sticky', component: _import('components-demo/sticky'), name: 'sticky', meta: { title: 'sticky' }},
- { path: 'count-to', component: _import('components-demo/countTo'), name: 'countTo', meta: { title: 'countTo' }},
- { path: 'mixin', component: _import('components-demo/mixin'), name: 'componentMixin', meta: { title: 'componentMixin' }},
- { path: 'back-to-top', component: _import('components-demo/backToTop'), name: 'backToTop', meta: { title: 'backToTop' }}
+ { path: 'tinymce', component: _import('components-demo/tinymce'), name: 'tinymce-demo', meta: { title: 'tinymce' }},
+ { path: 'markdown', component: _import('components-demo/markdown'), name: 'markdown-demo', meta: { title: 'markdown' }},
+ { path: 'json-editor', component: _import('components-demo/jsonEditor'), name: 'jsonEditor-demo', meta: { title: 'jsonEditor' }},
+ { path: 'dnd-list', component: _import('components-demo/dndList'), name: 'dndList-demo', meta: { title: 'dndList' }},
+ { path: 'splitpane', component: _import('components-demo/splitpane'), name: 'splitpane-demo', meta: { title: 'splitPane' }},
+ { path: 'avatar-upload', component: _import('components-demo/avatarUpload'), name: 'avatarUpload-demo', meta: { title: 'avatarUpload' }},
+ { path: 'dropzone', component: _import('components-demo/dropzone'), name: 'dropzone-demo', meta: { title: 'dropzone' }},
+ { path: 'sticky', component: _import('components-demo/sticky'), name: 'sticky-demo', meta: { title: 'sticky' }},
+ { path: 'count-to', component: _import('components-demo/countTo'), name: 'countTo-demo', meta: { title: 'countTo' }},
+ { path: 'mixin', component: _import('components-demo/mixin'), name: 'componentMixin-demo', meta: { title: 'componentMixin' }},
+ { path: 'back-to-top', component: _import('components-demo/backToTop'), name: 'backToTop-demo', meta: { title: 'backToTop' }}
]
},
diff --git a/src/store/modules/app.js b/src/store/modules/app.js
index f2c58489..21b4de01 100644
--- a/src/store/modules/app.js
+++ b/src/store/modules/app.js
@@ -50,7 +50,7 @@ const app = {
}
},
actions: {
- ToggleSideBar({ commit }) {
+ toggleSideBar({ commit }) {
commit('TOGGLE_SIDEBAR')
},
setLanguage({ commit }, language) {
diff --git a/src/store/modules/user.js b/src/store/modules/user.js
index 9c706978..1b23d1db 100644
--- a/src/store/modules/user.js
+++ b/src/store/modules/user.js
@@ -50,8 +50,8 @@ const user = {
return new Promise((resolve, reject) => {
loginByUsername(username, userInfo.password).then(response => {
const data = response.data
- setToken(response.data.token)
commit('SET_TOKEN', data.token)
+ setToken(response.data.token)
resolve()
}).catch(error => {
reject(error)
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 01b167b6..4e7ad775 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -110,6 +110,19 @@ code {
}
}
+.warn-content{
+ background: rgba(66,185,131,.1);
+ border-radius: 2px;
+ padding: 16px;
+ padding: 1rem;
+ line-height: 1.6rem;
+ word-spacing: .05rem;
+ a{
+ color: #42b983;
+ font-weight: 600;
+ }
+}
+
//main-containerå…¨å±€æ ·å¼
.app-container {
padding: 20px;
diff --git a/src/utils/clipboard.js b/src/utils/clipboard.js
index 882b1251..25295900 100644
--- a/src/utils/clipboard.js
+++ b/src/utils/clipboard.js
@@ -1,5 +1,5 @@
-import Clipboard from 'clipboard'
import Vue from 'vue'
+import Clipboard from 'clipboard'
function clipboardSuccess() {
Vue.prototype.$message({
diff --git a/src/views/components-demo/avatarUpload.vue b/src/views/components-demo/avatarUpload.vue
index c21bdc15..9a98ae21 100644
--- a/src/views/components-demo/avatarUpload.vue
+++ b/src/views/components-demo/avatarUpload.vue
@@ -1,15 +1,17 @@
<template>
<div class="components-container">
- <code>è¿™é‡Œæ ¸å¿ƒä»£ç 用的是<a class='link-type' href='//github.com/dai-siki/vue-image-crop-upload'> vue-image-crop-upload</a>
- 由于我在使用时它åªæœ‰vue@1版本，而且有些业务的需求耦åˆåˆ°ä¸ƒç‰›ç‰ç‰åŽŸå› å§ï¼Œè‡ªå·±æ”¹é€ 了一下，如果大家è¦ä½¿ç”¨çš„è¯ï¼Œä¼˜å…ˆè¿˜æ˜¯ä½¿ç”¨å®˜æ–¹component
+ <code>è¿™é‡Œæ ¸å¿ƒä»£ç 用的是
+ <a class="link-type" href="//github.com/dai-siki/vue-image-crop-upload"> vue-image-crop-upload</a>
+ 由于我在使用时它åªæœ‰vue@1版本，而且有些业务的需求耦åˆåˆ°ä¸ƒç‰›ç‰ç‰åŽŸå› å§ï¼Œè‡ªå·±æ”¹é€ 了一下，如果大家è¦ä½¿ç”¨çš„è¯ï¼Œä¼˜å…ˆè¿˜æ˜¯ä½¿ç”¨å®˜æ–¹component
</code>
- <pan-thumb :image='image'></pan-thumb>
+ <pan-thumb :image="image"></pan-thumb>
<el-button type="primary" icon="upload" style="position: absolute;bottom: 15px;margin-left: 40px;" @click="imagecropperShow=true">修改头åƒ
</el-button>
- <image-cropper :width="300" :height="300" url="https://httpbin.org/post" @close='close' @crop-upload-success="cropSuccess" :key="imagecropperKey" v-show="imagecropperShow"></image-cropper>
+ <image-cropper :width="300" :height="300" url="https://httpbin.org/post" @close='close' @crop-upload-success="cropSuccess"
+ :key="imagecropperKey" v-show="imagecropperShow"></image-cropper>
</div>
</template>
@@ -18,6 +20,7 @@ import ImageCropper from '@/components/ImageCropper'
import PanThumb from '@/components/PanThumb'
export default {
+ name: 'avatarUpload-demo',
components: { ImageCropper, PanThumb },
data() {
return {
diff --git a/src/views/components-demo/backToTop.vue b/src/views/components-demo/backToTop.vue
index 9407ca13..51d7879e 100644
--- a/src/views/components-demo/backToTop.vue
+++ b/src/views/components-demo/backToTop.vue
@@ -138,6 +138,7 @@
import BackToTop from '@/components/BackToTop'
export default {
+ name: 'backToTop-demo',
components: { BackToTop },
data() {
return {
diff --git a/src/views/components-demo/countTo.vue b/src/views/components-demo/countTo.vue
index c6a66bd3..b30204d9 100644
--- a/src/views/components-demo/countTo.vue
+++ b/src/views/components-demo/countTo.vue
@@ -1,23 +1,39 @@
<template>
<div class="components-container">
- <code> <a href='https://github.com/PanJiaChen/vue-countTo' target='_blank'>countTo component</a></code>
-
- <count-to ref='example' class='example' :start-val='_startVal' :end-val='_endVal' :duration='_duration' :decimals='_decimals'
- :separator='_separator' :prefix='_prefix' :suffix='_suffix' :autoplay='false'></count-to>
- <div style='margin-left: 25%;margin-top: 40px;'>
- <label class="label" for="startValInput">startVal: <input type="number" v-model.number='setStartVal' name='startValInput' /></label>
- <label class="label" for="endValInput">endVal: <input type="number" v-model.number='setEndVal' name='endVaInput' /></label>
- <label class="label" for="durationInput">duration: <input type="number" v-model.number='setDuration' name='durationInput' /></label>
- <div class="startBtn example-btn" @click='start'>开始</div>
- <div class="pause-resume-btn example-btn" @click='pauseResume'>æš‚åœ/æ¢å¤</div>
+ <p class="warn-content">
+ <a href="https://github.com/PanJiaChen/vue-countTo" target="_blank">countTo-component</a>
+ </p>
+ <count-to ref="example" class="example" :start-val="_startVal" :end-val="_endVal" :duration="_duration" :decimals="_decimals"
+ :separator="_separator" :prefix="_prefix" :suffix="_suffix" :autoplay="false"></count-to>
+ <div style="margin-left: 25%;margin-top: 40px;">
+ <label class="label" for="startValInput">startVal:
+ <input type="number" v-model.number="setStartVal" name="startValInput" />
+ </label>
+ <label class="label" for="endValInput">endVal:
+ <input type="number" v-model.number="setEndVal" name="endVaInput" />
+ </label>
+ <label class="label" for="durationInput">duration:
+ <input type="number" v-model.number="setDuration" name="durationInput" />
+ </label>
+ <div class="startBtn example-btn" @click="start">开始</div>
+ <div class="pause-resume-btn example-btn" @click="pauseResume">æš‚åœ/æ¢å¤</div>
<br/>
- <label class="label" for="decimalsInput">decimals: <input type="number" v-model.number='setDecimals' name='decimalsInput' /></label>
- <label class="label" for="separatorInput">separator: <input v-model='setSeparator' name='separatorInput' /></label>
- <label class="label" for="prefixInput">prefix: <input v-model='setPrefix' name='prefixInput' /></label>
- <label class="label" for="suffixInput">suffix: <input v-model='setSuffix' name='suffixInput' /></label>
+ <label class="label" for="decimalsInput">decimals:
+ <input type="number" v-model.number="setDecimals" name="decimalsInput" />
+ </label>
+ <label class="label" for="separatorInput">separator:
+ <input v-model="setSeparator" name="separatorInput" />
+ </label>
+ <label class="label" for="prefixInput">prefix:
+ <input v-model="setPrefix" name="prefixInput" />
+ </label>
+ <label class="label" for="suffixInput">suffix:
+ <input v-model="setSuffix" name="suffixInput" />
+ </label>
</div>
- <code><count-to :start-val='{{_startVal}}' :end-val='{{_endVal}}' :duration='{{_duration}}' :decimals='{{_decimals}}'
- :separator='{{_separator}}' :prefix='{{_prefix}}' :suffix='{{_suffix}}' :autoplay=false></code>
+ <code><count-to :start-val='{{_startVal}}' :end-val='{{_endVal}}' :duration='{{_duration}}'
+ :decimals='{{_decimals}}' :separator='{{_separator}}' :prefix='{{_prefix}}' :suffix='{{_suffix}}'
+ :autoplay=false></code>
</div>
</template>
@@ -25,6 +41,7 @@
import countTo from 'vue-count-to'
export default {
+ name: 'countTo-demo',
components: { countTo },
data() {
return {
diff --git a/src/views/components-demo/dndList.vue b/src/views/components-demo/dndList.vue
index 5f75503e..3d436390 100644
--- a/src/views/components-demo/dndList.vue
+++ b/src/views/components-demo/dndList.vue
@@ -12,6 +12,7 @@ import DndList from '@/components/DndList'
import { fetchList } from '@/api/article'
export default {
+ name: 'dnd-list-demo',
components: { DndList },
data() {
return {
diff --git a/src/views/components-demo/dropzone.vue b/src/views/components-demo/dropzone.vue
index 1496fe47..6af6ae2e 100644
--- a/src/views/components-demo/dropzone.vue
+++ b/src/views/components-demo/dropzone.vue
@@ -1,7 +1,7 @@
<template>
<div class="components-container">
<code>
- 基于<a class='link-type' href='https://github.com/rowanwins/vue-dropzone'> dropzone </a>å°è£… ,
+ 基于<a class="link-type" href="https://github.com/rowanwins/vue-dropzone"> dropzone </a>å°è£… ,
由于我å¸ä¸šåŠ¡æœ‰ç‰¹æ®Šéœ€æ±‚，而且è¦ä¼ 七牛 所以没用第三方 选择了自己å°è£…
</code>
<div class="editor-container">
@@ -14,6 +14,7 @@
import Dropzone from '@/components/Dropzone'
export default {
+ name: 'dropzone-demo',
components: { Dropzone },
methods: {
dropzoneS(file) {
diff --git a/src/views/components-demo/jsonEditor.vue b/src/views/components-demo/jsonEditor.vue
index 3bbbc34f..c3b12813 100644
--- a/src/views/components-demo/jsonEditor.vue
+++ b/src/views/components-demo/jsonEditor.vue
@@ -1,5 +1,5 @@
<template>
- <div class="components-container" style='height:100vh'>
+ <div class="components-container" style="height:100vh">
<code>JsonEditor is base on <a href="https://github.com/codemirror/CodeMirror" target="_blank">CodeMirrorr</a> , lint base on json-lint </code>
<div class="editor-container">
<json-editor ref="jsonEditor" v-model="value"></json-editor>
@@ -13,6 +13,7 @@ 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 {
+ name: 'jsonEditor-demo',
components: { JsonEditor },
data() {
return {
diff --git a/src/views/components-demo/markdown.vue b/src/views/components-demo/markdown.vue
index c02d43e2..59dbc25c 100644
--- a/src/views/components-demo/markdown.vue
+++ b/src/views/components-demo/markdown.vue
@@ -1,10 +1,14 @@
<template>
<div class="components-container">
- <code>Markdown 我们这里选用了 <a href="https://github.com/sparksuite/simplemde-markdown-editor" target="_blank">simplemde-markdown-editor</a> ，简å•çš„用vueå°è£…了一下<a target='_blank' href='https://segmentfault.com/a/1190000009762198#articleHeader14'> ç›¸å…³æ–‡ç« </a></code>
+ <code>Markdown 我们这里选用了
+ <a href="https://github.com/sparksuite/simplemde-markdown-editor" target="_blank">simplemde-markdown-editor</a> ，简å•çš„用vueå°è£…了一下
+ <a target="_blank" href="https://segmentfault.com/a/1190000009762198#articleHeader14">
+ ç›¸å…³æ–‡ç« </a>
+ </code>
<div class="editor-container">
- <markdown-editor id='contentEditor' ref="contentEditor" v-model='content' :height="300" :zIndex='20'></markdown-editor>
+ <markdown-editor id="contentEditor" ref="contentEditor" v-model="content" :height="300" :zIndex="20"></markdown-editor>
</div>
- <el-button @click='markdown2Html' style="margin-top:80px;" type="primary">转为HTML<i class="el-icon-document el-icon--right"></i></el-button>
+ <el-button @click="markdown2Html" style="margin-top:80px;" type="primary" icon="el-icon-document">转为HTML</el-button>
<div v-html="html"></div>
</div>
</template>
@@ -13,6 +17,7 @@
import MarkdownEditor from '@/components/MarkdownEditor'
export default {
+ name: 'markdown-demo',
components: { MarkdownEditor },
data() {
return {
diff --git a/src/views/components-demo/mixin.vue b/src/views/components-demo/mixin.vue
index 32d164f9..2181c1e2 100644
--- a/src/views/components-demo/mixin.vue
+++ b/src/views/components-demo/mixin.vue
@@ -1,22 +1,22 @@
<template>
<div class="components-container">
<el-row>
- <el-col :span="4" class='text-center'>
+ <el-col :span="4" class="text-center">
<router-link class="pan-btn blue-btn" to="/components/index">Components</router-link>
</el-col>
- <el-col :span="4" class='text-center'>
+ <el-col :span="4" class="text-center">
<router-link class="pan-btn light-blue-btn" to="/charts/index">Charts</router-link>
</el-col>
- <el-col :span="4" class='text-center'>
+ <el-col :span="4" class="text-center">
<router-link class="pan-btn pink-btn" to="/excel/download">Excel</router-link>
</el-col>
- <el-col :span="4" class='text-center'>
+ <el-col :span="4" class="text-center">
<router-link class="pan-btn green-btn" to="/example/table/complex-table">Table</router-link>
</el-col>
- <el-col :span="4" class='text-center'>
+ <el-col :span="4" class="text-center">
<router-link class="pan-btn tiffany-btn" to="/form/edit-form">Form</router-link>
</el-col>
- <el-col :span="4" class='text-center'>
+ <el-col :span="4" class="text-center">
<router-link class="pan-btn yellow-btn" to="/theme/index">Theme</router-link>
</el-col>
</el-row>
@@ -43,7 +43,7 @@
<span>图片hover效果</span>
</div>
<div class="component-item">
- <pan-thumb width='100px' height='100px' image='https://wpimg.wallstcn.com/577965b9-bb9e-4e02-9f0c-095b41417191'>
+ <pan-thumb width="100px" height="100px" image="https://wpimg.wallstcn.com/577965b9-bb9e-4e02-9f0c-095b41417191">
vue-element-admin
</pan-thumb>
</div>
@@ -67,7 +67,7 @@
<span>hover text</span>
</div>
<div class="component-item">
- <mallki className='mallki-text' text='vue-element-admin'></mallki>
+ <mallki className="mallki-text" text="vue-element-admin"></mallki>
</div>
</el-card>
</el-col>
@@ -83,6 +83,7 @@ import waves from '@/directive/waves/index.js' // 水波纹指令
import Mallki from '@/components/TextHoverEffect/Mallki'
export default {
+ name: 'componentMixin-demo',
components: {
PanThumb,
MdInput,
diff --git a/src/views/components-demo/splitpane.vue b/src/views/components-demo/splitpane.vue
index d60d4040..3bf989df 100644
--- a/src/views/components-demo/splitpane.vue
+++ b/src/views/components-demo/splitpane.vue
@@ -1,7 +1,7 @@
<template>
<div class="components-container">
- <code>splitPane å¦‚æžœä½ ç”¨è¿‡<a href='http://codepen.io/' target='_blank'> codepen</a>,<a href='https://jsfiddle.net/' target='_blank'> jsfiddle </a>å°±ä¸ä¼šé™Œç”Ÿäº†
- <a href='https://github.com/PanJiaChen/vue-split-pane' target='_blank'>项目地å€</a>
+ <code>splitPane å¦‚æžœä½ ç”¨è¿‡<a href="http://codepen.io/" target="_blank"> codepen</a>,<a href="https://jsfiddle.net/" target="_blank"> jsfiddle </a>å°±ä¸ä¼šé™Œç”Ÿäº†
+ <a href="https://github.com/PanJiaChen/vue-split-pane" target='_blank'>项目地å€</a>
</code>
<split-pane v-on:resize="resize" split="vertical">
<template slot="paneL">
@@ -26,6 +26,7 @@
import splitPane from 'vue-splitpane'
export default {
+ name: 'splitpane-demo',
components: { splitPane },
methods: {
resize() {
@@ -37,29 +38,29 @@ export default {
<style scoped>
.components-container {
- position: relative;
- height: 100vh;
+ position: relative;
+ height: 100vh;
}
.left-container {
- background-color: #F38181;
- height: 100%;
+ background-color: #F38181;
+ height: 100%;
}
.right-container {
- background-color: #FCE38A;
- height: 200px;
+ background-color: #FCE38A;
+ height: 200px;
}
.top-container {
- background-color: #FCE38A;
- width: 100%;
- height: 100%;
+ background-color: #FCE38A;
+ width: 100%;
+ height: 100%;
}
.bottom-container {
- width: 100%;
- background-color: #95E1D3;
- height: 100%;
+ width: 100%;
+ background-color: #95E1D3;
+ height: 100%;
}
</style>
diff --git a/src/views/components-demo/sticky.vue b/src/views/components-demo/sticky.vue
index 3c04c3a7..014d71fa 100644
--- a/src/views/components-demo/sticky.vue
+++ b/src/views/components-demo/sticky.vue
@@ -97,6 +97,7 @@
import Sticky from '@/components/Sticky'
export default {
+ name: 'sticky-demo',
components: { Sticky },
data() {
return {
diff --git a/src/views/components-demo/tinymce.vue b/src/views/components-demo/tinymce.vue
index a442599e..4f88f05e 100644
--- a/src/views/components-demo/tinymce.vue
+++ b/src/views/components-demo/tinymce.vue
@@ -1,10 +1,12 @@
<template>
<div class="components-container">
- <code>å…¬å¸åšçš„åŽå°ä¸»è¦æ˜¯ä¸€ä¸ªcms系统，公å¸ä¹Ÿæ˜¯ä»¥è‡ªåª’ä½“ä¸ºæ ¸å¿ƒçš„ï¼Œæ‰€ä»¥å¯Œæ–‡æœ¬æ˜¯åŽå°å¾ˆæ ¸å¿ƒçš„功能。在选择富文本的过程ä¸ä¹Ÿèµ°äº†ä¸å°‘的弯路，市é¢ä¸Šå¸¸è§çš„富文本都基本用过了，最终选择了Tinymce<a target='_blank' href='https://segmentfault.com/a/1190000009762198#articleHeader13'> ç›¸å…³æ–‡ç« </a> <a target='_blank' href='https://www.tinymce.com/'> 官网 </a></code>
+ <code>å…¬å¸åšçš„åŽå°ä¸»è¦æ˜¯ä¸€ä¸ªcms系统，公å¸ä¹Ÿæ˜¯ä»¥è‡ªåª’ä½“ä¸ºæ ¸å¿ƒçš„ï¼Œæ‰€ä»¥å¯Œæ–‡æœ¬æ˜¯åŽå°å¾ˆæ ¸å¿ƒçš„功能。在选择富文本的过程ä¸ä¹Ÿèµ°äº†ä¸å°‘的弯路，市é¢ä¸Šå¸¸è§çš„富文本都基本用过了，最终选择了Tinymce
+ <a target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/#/rich-editor">文档介ç»</a>
+ </code>
<div>
- <tinymce :height='200' v-model="content"></tinymce>
+ <tinymce :height="200" v-model="content"></tinymce>
</div>
- <div class='editor-content' v-html='content'></div>
+ <div class="editor-content" v-html="content"></div>
</div>
</template>
@@ -12,6 +14,7 @@
import Tinymce from '@/components/Tinymce'
export default {
+ name: 'tinymce-demo',
components: { Tinymce },
data() {
return {
diff --git a/src/views/dashboard/admin/components/BarChart.vue b/src/views/dashboard/admin/components/BarChart.vue
index 5719aebf..78e71a93 100644
--- a/src/views/dashboard/admin/components/BarChart.vue
+++ b/src/views/dashboard/admin/components/BarChart.vue
@@ -8,6 +8,7 @@ require('echarts/theme/macarons') // echarts 主题
import { debounce } from '@/utils'
const animationDuration = 6000
+
export default {
props: {
className: {
diff --git a/src/views/dashboard/admin/components/PanelGroup.vue b/src/views/dashboard/admin/components/PanelGroup.vue
new file mode 100644
index 00000000..9fa9ac7e
--- /dev/null
+++ b/src/views/dashboard/admin/components/PanelGroup.vue
@@ -0,0 +1,131 @@
+<template>
+ <el-row class="panel-group" :gutter="40">
+ <el-col :span="6">
+ <div class='card-panel' @click="handleSetLineChartData('newVisitis')">
+ <div class="card-panel-icon-wrapper icon-people">
+ <svg-icon icon-class="peoples" class-name="card-panel-icon" />
+ </div>
+ <div class="card-panel-description">
+ <div class="card-panel-text">New Visits</div>
+ <count-to class="card-panel-num" :startVal="0" :endVal="102400" :duration="3600"></count-to>
+ </div>
+ </div>
+ </el-col>
+ <el-col :span="6">
+ <div class="card-panel" @click="handleSetLineChartData('messages')">
+ <div class="card-panel-icon-wrapper icon-message">
+ <svg-icon icon-class="message" class-name="card-panel-icon" />
+ </div>
+ <div class="card-panel-description">
+ <div class="card-panel-text">Messages</div>
+ <count-to class="card-panel-num" :startVal="0" :endVal="81212" :duration="4000"></count-to>
+ </div>
+ </div>
+ </el-col>
+ <el-col :span="6">
+ <div class="card-panel" @click="handleSetLineChartData('purchases')">
+ <div class="card-panel-icon-wrapper icon-money">
+ <svg-icon icon-class="money" class-name="card-panel-icon" />
+ </div>
+ <div class="card-panel-description">
+ <div class="card-panel-text">Purchases</div>
+ <count-to class="card-panel-num" :startVal="0" :endVal="9280" :duration="4000"></count-to>
+ </div>
+ </div>
+ </el-col>
+ <el-col :span="6">
+ <div class="card-panel" @click="handleSetLineChartData('shoppings')">
+ <div class="card-panel-icon-wrapper icon-shoppingCard">
+ <svg-icon icon-class="shoppingCard" class-name="card-panel-icon" />
+ </div>
+ <div class="card-panel-description">
+ <div class="card-panel-text">Shoppings</div>
+ <count-to class="card-panel-num" :startVal="0" :endVal="13600" :duration="4600"></count-to>
+ </div>
+ </div>
+ </el-col>
+ </el-row>
+</template>
+
+<script>
+import CountTo from 'vue-count-to'
+
+export default {
+ components: {
+ CountTo
+ }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.panel-group {
+ margin-top: 20px;
+ .card-panel {
+ height: 108px;
+ cursor: pointer;
+ font-size: 12px;
+ position: relative;
+ overflow: hidden;
+ color: #666;
+ background: #fff;
+ box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+ border-color: rgba(0, 0, 0, .05);
+ &:hover {
+ .card-panel-icon-wrapper {
+ color: #fff;
+ }
+ .icon-people {
+ background: #40c9c6;
+ }
+ .icon-message {
+ background: #36a3f7;
+ }
+ .icon-money {
+ background: #f4516c;
+ }
+ .icon-shoppingCard {
+ background: #34bfa3
+ }
+ }
+ .icon-people {
+ color: #40c9c6;
+ }
+ .icon-message {
+ color: #36a3f7;
+ }
+ .icon-money {
+ color: #f4516c;
+ }
+ .icon-shoppingCard {
+ color: #34bfa3
+ }
+ .card-panel-icon-wrapper {
+ float: left;
+ margin: 14px 0 0 14px;
+ padding: 16px;
+ transition: all 0.38s ease-out;
+ border-radius: 6px;
+ }
+ .card-panel-icon {
+ float: left;
+ font-size: 48px;
+ }
+ .card-panel-description {
+ float: right;
+ font-weight: bold;
+ margin: 26px;
+ margin-left: 0px;
+ .card-panel-text {
+ line-height: 18px;
+ color: rgba(0, 0, 0, 0.45);
+ font-size: 16px;
+ margin-bottom: 12px;
+ }
+ .card-panel-num {
+ font-size: 20px;
+ }
+ }
+ }
+}
+
+</style>
diff --git a/src/views/dashboard/admin/index.vue b/src/views/dashboard/admin/index.vue
index 65285418..84b3e831 100644
--- a/src/views/dashboard/admin/index.vue
+++ b/src/views/dashboard/admin/index.vue
@@ -2,55 +2,10 @@
<div class="dashboard-editor-container">
<github-corner></github-corner>
- <el-row class="panel-group" :gutter="40">
- <el-col :span="6">
- <div class='card-panel' @click="handleSetLineChartData('newVisitis')">
- <div class="card-panel-icon-wrapper icon-people">
- <svg-icon icon-class="peoples" class-name="card-panel-icon" />
- </div>
- <div class='card-panel-description'>
- <div class='card-panel-text'>New Visits</div>
- <count-to class="card-panel-num" :startVal='0' :endVal='102400' :duration='3600'></count-to>
- </div>
- </div>
- </el-col>
- <el-col :span="6">
- <div class='card-panel' @click="handleSetLineChartData('messages')">
- <div class="card-panel-icon-wrapper icon-message">
- <svg-icon icon-class="message" class-name="card-panel-icon" />
- </div>
- <div class='card-panel-description'>
- <div class='card-panel-text'>Messages</div>
- <count-to class="card-panel-num" :startVal='0' :endVal='81212' :duration='4000'></count-to>
- </div>
- </div>
- </el-col>
- <el-col :span="6">
- <div class='card-panel' @click="handleSetLineChartData('purchases')">
- <div class="card-panel-icon-wrapper icon-money">
- <svg-icon icon-class="money" class-name="card-panel-icon" />
- </div>
- <div class='card-panel-description'>
- <div class='card-panel-text'>Purchases</div>
- <count-to class="card-panel-num" :startVal='0' :endVal='9280' :duration='4000'></count-to>
- </div>
- </div>
- </el-col>
- <el-col :span="6">
- <div class='card-panel' @click="handleSetLineChartData('shoppings')">
- <div class="card-panel-icon-wrapper icon-shoppingCard">
- <svg-icon icon-class="shoppingCard" class-name="card-panel-icon" />
- </div>
- <div class='card-panel-description'>
- <div class='card-panel-text'>Shoppings</div>
- <count-to class="card-panel-num" :startVal='0' :endVal='13600' :duration='4600'></count-to>
- </div>
- </div>
- </el-col>
- </el-row>
+ <panel-group></panel-group>
<el-row style="margin-top:30px;background:#fff;padding:15px 15px 0;">
- <line-chart :chart-data='lineChartData'></line-chart>
+ <line-chart :chart-data="lineChartData"></line-chart>
</el-row>
<el-row style="margin-top:30px;" :gutter="30">
@@ -87,8 +42,8 @@
</template>
<script>
-import CountTo from 'vue-count-to'
import GithubCorner from '@/components/GithubCorner'
+import PanelGroup from './components/PanelGroup'
import LineChart from './components/LineChart'
import RaddarChart from './components/RaddarChart'
import PieChart from './components/PieChart'
@@ -119,8 +74,8 @@ const lineChartData = {
export default {
name: 'dashboard-admin',
components: {
- CountTo,
GithubCorner,
+ PanelGroup,
LineChart,
RaddarChart,
PieChart,
@@ -146,75 +101,6 @@ export default {
.dashboard-editor-container {
padding: 30px;
background-color: rgb(240, 242, 245);
- .panel-group {
- margin-top: 20px;
- }
- .card-panel {
- height: 108px;
- cursor: pointer;
- font-size: 12px;
- position: relative;
- overflow: hidden;
- color: #666;
- background: #fff;
- box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
- border-color: rgba(0, 0, 0, .05);
- &:hover {
- .card-panel-icon-wrapper {
- color: #fff;
- }
- .icon-people {
- background: #36a3f7;
- }
- .icon-message {
- background: #f4516c;
- }
- .icon-money {
- background: #716aca;
- }
- .icon-shoppingCard {
- background: #34bfa3
- }
- }
- .icon-people {
- color: #36a3f7;
- }
- .icon-message {
- color: #f4516c;
- }
- .icon-money {
- color: #716aca;
- }
- .icon-shoppingCard {
- color: #34bfa3
- }
- .card-panel-icon-wrapper {
- float: left;
- margin: 14px 0 0 14px;
- padding: 16px;
- transition: all 0.38s ease-out;
- border-radius: 6px;
- }
- .card-panel-icon {
- float: left;
- font-size: 48px;
- }
- .card-panel-description {
- float: right;
- font-weight: bold;
- margin: 26px;
- margin-left: 0px;
- .card-panel-text {
- line-height: 18px;
- color: rgba(0, 0, 0, 0.45);
- font-size: 16px;
- margin-bottom: 12px;
- }
- .card-panel-num {
- font-size: 20px;
- }
- }
- }
.chart-wrapper {
background: #fff;
padding: 15px 15px 0;
diff --git a/src/views/dashboard/editor/index.vue b/src/views/dashboard/editor/index.vue
index 4ec2d16b..531c8067 100644
--- a/src/views/dashboard/editor/index.vue
+++ b/src/views/dashboard/editor/index.vue
@@ -7,11 +7,11 @@
<github-corner></github-corner>
<div class="info-container">
<span class="display_name">{{name}}</span>
- <span style='font-size:20px;padding-top:20px;display:inline-block;'>普通编辑dashboard</span>
+ <span style="font-size:20px;padding-top:20px;display:inline-block;">普通编辑dashboard</span>
</div>
</div>
<div>
- <img class='emptyGif' :src="emptyGif">
+ <img class="emptyGif" :src="emptyGif">
</div>
</div>
</template>
diff --git a/src/views/layout/components/Navbar.vue b/src/views/layout/components/Navbar.vue
index 229d6d1c..2e38703c 100644
--- a/src/views/layout/components/Navbar.vue
+++ b/src/views/layout/components/Navbar.vue
@@ -83,7 +83,7 @@ export default {
},
methods: {
toggleSideBar() {
- this.$store.dispatch('ToggleSideBar')
+ this.$store.dispatch('toggleSideBar')
},
handleSetLanguage(lang) {
this.$i18n.locale = lang
diff --git a/src/views/layout/components/Sidebar/SidebarItem.vue b/src/views/layout/components/Sidebar/SidebarItem.vue
index 5d07147c..3db3415a 100644
--- a/src/views/layout/components/Sidebar/SidebarItem.vue
+++ b/src/views/layout/components/Sidebar/SidebarItem.vue
@@ -9,7 +9,7 @@
</el-menu-item>
</router-link>
- <el-submenu v-if="!item.hidden&&item.children&&item.children.length>1" :index="item.name" :key='item.name'>
+ <el-submenu v-if="!item.hidden&&item.children&&item.children.length>1" :index="item.name||item.path" :key='item.name'>
<template slot="title">
<svg-icon v-if='item.meta&&item.meta.icon' :icon-class="item.meta.icon"></svg-icon>
<span v-if='item.meta&&item.meta.title'>{{generateTitle(item.meta.title)}}</span>
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index ddbbd820..fbddd66b 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -16,15 +16,15 @@
</span>
<el-input name="password" :type="pwdType" @keyup.enter.native="handleLogin" v-model="loginForm.password" autoComplete="on"
placeholder="密ç " />
- <span class='show-pwd' @click='showPwd'><svg-icon icon-class="eye" /></span>
+ <span class="show-pwd" @click="showPwd"><svg-icon icon-class="eye" /></span>
</el-form-item>
<el-button type="primary" style="width:100%;margin-bottom:30px;" :loading="loading" @click.native.prevent="handleLogin">登录</el-button>
- <div class='tips'>è´¦å·:admin 密ç éšä¾¿å¡«</div>
- <div class='tips'>è´¦å·:editor 密ç éšä¾¿å¡«</div>
+ <div class="tips">è´¦å·:admin 密ç éšä¾¿å¡«</div>
+ <div class="tips">è´¦å·:editor 密ç éšä¾¿å¡«</div>
- <el-button class='thirdparty-button' type="primary" @click='showDialog=true'>打开第三方登录</el-button>
+ <el-button class="thirdparty-button" type="primary" @click="showDialog=true">打开第三方登录</el-button>
</el-form>
<el-dialog title="第三方验è¯" :visible.sync="showDialog">
diff --git a/src/views/svg-icons/index.vue b/src/views/svg-icons/index.vue
index a3cdf892..19dff705 100644
--- a/src/views/svg-icons/index.vue
+++ b/src/views/svg-icons/index.vue
@@ -1,12 +1,15 @@
<template>
<div class="icons-container">
+ <p class="warn-content">
+ <a href="https://panjiachen.github.io/vue-element-admin-site/#/icon" target="_blank">æ·»åŠ å’Œä½¿ç”¨æ–¹å¼</a>
+ </p>
<div class="icons-wrapper">
- <div v-for='item of iconsMap' :key='item' @click='handleClipboard(generateIconCode(item),$event)'>
+ <div v-for="item of iconsMap" :key="item" @click="handleClipboard(generateIconCode(item),$event)">
<el-tooltip placement="top">
<div slot="content">
{{generateIconCode(item)}}
</div>
- <div class='icon-item'>
+ <div class="icon-item">
<svg-icon :icon-class="item" />
<span>{{item}}</span>
</div>
@@ -16,10 +19,9 @@
</div>
</template>
-
<script>
import icons from './generateIconsView'
-import clipboard from '@/utils/clipboard' // use clipboard directly
+import clipboard from '@/utils/clipboard'
export default {
name: 'icons',
@@ -47,7 +49,7 @@ export default {
<style rel="stylesheet/scss" lang="scss" scoped>
.icons-container {
- margin: 40px 20px 0;
+ margin: 10px 20px 0;
overflow: hidden;
.icons-wrapper {
margin: 0 auto;
--
GitLab