refactor:views/components

src/components/MDinput/index.vue

@@ -164,6 +164,7 @@ export default {
       .material-input__icon {
         position: absolute;
         left: 0;
+        line-height: $font-size-base;
         color: $color-blue;
         top: $spacer;
         width: $index-has-icon;

src/router/index.js

@@ -95,18 +95,17 @@ export const asyncRouterMap = [
       icon: 'component'
     },
     children: [
-      { path: 'index', component: _import('components/index'), name: 'componentIndex', meta: { title: 'componentIndex' }},
+      { path: 'tinymce', component: _import('components-demo/tinymce'), name: 'tinymce', meta: { title: 'tinymce' }},
-      { path: 'tinymce', component: _import('components/tinymce'), name: 'tinymce', meta: { title: 'tinymce' }},
+      { path: 'markdown', component: _import('components-demo/markdown'), name: 'markdown', meta: { title: 'markdown' }},
-      { path: 'markdown', component: _import('components/markdown'), name: 'markdown', meta: { title: 'markdown' }},
+      { path: 'json-editor', component: _import('components-demo/jsonEditor'), name: 'jsonEditor', meta: { title: 'jsonEditor' }},
-      { path: 'json-editor', component: _import('components/jsonEditor'), name: 'jsonEditor', meta: { title: 'jsonEditor' }},
+      { path: 'dnd-list', component: _import('components-demo/dndList'), name: 'dndList', meta: { title: 'dndList' }},
-      { path: 'dnd-list', component: _import('components/dndList'), name: 'dndList', meta: { title: 'dndList' }},
+      { path: 'splitpane', component: _import('components-demo/splitpane'), name: 'splitpane', meta: { title: 'splitPane' }},
-      { path: 'splitpane', component: _import('components/splitpane'), name: 'splitpane', meta: { title: 'splitPane' }},
+      { path: 'avatar-upload', component: _import('components-demo/avatarUpload'), name: 'avatarUpload', meta: { title: 'avatarUpload' }},
-      { path: 'avatar-upload', component: _import('components/avatarUpload'), name: 'avatarUpload', meta: { title: 'avatarUpload' }},
+      { path: 'dropzone', component: _import('components-demo/dropzone'), name: 'dropzone', meta: { title: 'dropzone' }},
-      { path: 'dropzone', component: _import('components/dropzone'), name: 'dropzone', meta: { title: 'dropzone' }},
+      { path: 'sticky', component: _import('components-demo/sticky'), name: 'sticky', meta: { title: 'sticky' }},
-      { path: 'sticky', component: _import('components/sticky'), name: 'sticky', meta: { title: 'sticky' }},
+      { path: 'count-to', component: _import('components-demo/countTo'), name: 'countTo', meta: { title: 'countTo' }},
-      { path: 'count-to', component: _import('components/countTo'), name: 'countTo', meta: { title: 'countTo' }},
+      { path: 'mixin', component: _import('components-demo/mixin'), name: 'componentMixin', meta: { title: 'componentMixin' }},
-      { path: 'mixin', component: _import('components/mixin'), name: 'componentMixin', meta: { title: 'componentMixin' }},
+      { path: 'back-to-top', component: _import('components-demo/backToTop'), name: 'backToTop', meta: { title: 'backToTop' }}
-      { path: 'back-to-top', component: _import('components/backToTop'), name: 'backToTop', meta: { title: 'backToTop' }}
     ]
   },
 
@@ -235,7 +234,7 @@ export const asyncRouterMap = [
   {
     path: '/i18n',
     component: Layout,
-    children: [{ path: 'index', component: _import('i18n/index'), name: 'i18n', meta: { title: 'i18n', icon: 'international' }}]
+    children: [{ path: 'index', component: _import('i18n-demo/index'), name: 'i18n', meta: { title: 'i18n', icon: 'international' }}]
   },
 
   { path: '*', redirect: '/404', hidden: true }

src/views/components-demo/mixin.vue

@@ -0,0 +1,118 @@
+<template>
+  <div class="components-container">
+    <el-row>
+      <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'>
+        <router-link class="pan-btn light-blue-btn" to="/charts/index">Charts</router-link>
+      </el-col>
+      <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'>
+        <router-link class="pan-btn green-btn" to="/example/table/complex-table">Table</router-link>
+      </el-col>
+      <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'>
+        <router-link class="pan-btn yellow-btn" to="/theme/index">Theme</router-link>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="20" style="margin-top:50px;">
+      <el-col :span="6">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>Material Design 的input</span>
+          </div>
+          <div style="height:100px;">
+            <el-form :model="demo" :rules="demoRules">
+              <el-form-item prop="title">
+                <md-input icon="search" name="title" placeholder="输入标题" v-model="demo.title">标题</md-input>
+              </el-form-item>
+            </el-form>
+          </div>
+        </el-card>
+      </el-col>
+
+      <el-col :span="6">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>图片hover效果</span>
+          </div>
+          <div class="component-item">
+            <pan-thumb width='100px' height='100px' image='https://wpimg.wallstcn.com/577965b9-bb9e-4e02-9f0c-095b41417191'>
+              vue-element-admin
+            </pan-thumb>
+          </div>
+        </el-card>
+      </el-col>
+
+      <el-col :span="6">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>水波纹 waves v-directive</span>
+          </div>
+          <div class="component-item">
+            <el-button v-waves type="primary">水波纹效果</el-button>
+          </div>
+        </el-card>
+      </el-col>
+
+      <el-col :span="6">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>hover text</span>
+          </div>
+          <div class="component-item">
+            <mallki className='mallki-text' text='vue-element-admin'></mallki>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+
+  </div>
+</template>
+
+<script>
+import PanThumb from '@/components/PanThumb'
+import MdInput from '@/components/MDinput'
+import waves from '@/directive/waves/index.js' // 水波纹指令
+import Mallki from '@/components/TextHoverEffect/Mallki'
+
+export default {
+  components: {
+    PanThumb,
+    MdInput,
+    Mallki
+  },
+  directives: {
+    waves
+  },
+  data() {
+    const validate = (rule, value, callback) => {
+      if (value.length !== 6) {
+        callback(new Error('请输入六个字符'))
+      } else {
+        callback()
+      }
+    }
+    return {
+      demo: {
+        title: ''
+      },
+      demoRules: {
+        title: [{ required: true, trigger: 'change', validator: validate }]
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.component-item{
+  min-height: 100px;
+}
+</style>

src/views/components/index.vue

@@ -1,7 +0,0 @@
-<template>
-  <div class="components-container">
-    <code>这里暂时列出了自己在项目中用到的组件和一些自己封装的组件，如有补充可以提<a target='_blank' href='https://github.com/PanJiaChen/vue-element-admin/issues'> issue </a><br/>
-    我个人崇尚自己封装组件，因为很多组件会和业务后高度的耦合，而且第三方封装的组件灵活性可控性都不高，如有需要可以看楼主之前写过的一篇<a href='https://segmentfault.com/a/1190000009090836' target='_blank'>文章</a>
-    </code>
-  </div>
-</template>

src/views/components/mixin.vue

@@ -1,66 +0,0 @@
-<template>
-  <div class="components-container">
-    <div class='component-item'>
-      <el-form :model="demo" :rules="demoRules">
-        <el-form-item prop="title">
-          <md-input icon="search" name="title" placeholder="输入标题" v-model="demo.title">标题</md-input>
-        </el-form-item>
-      </el-form>
-      <code class='code-part'>Material Design 的input</code>
-    </div>
-
-    <div class='component-item'>
-      <pan-thumb image='https://wpimg.wallstcn.com/577965b9-bb9e-4e02-9f0c-095b41417191'>
-        上海花裤衩
-      </pan-thumb>
-      <code class='code-part'>图片hover效果</code>
-    </div>
-
-    <div class='component-item'>
-      <el-button v-waves type="primary">水波纹效果</el-button>
-      <code class='code-part'>水波纹 v-directive</code>
-    </div>
-  </div>
-</template>
-
-<script>
-import PanThumb from '@/components/PanThumb'
-import MdInput from '@/components/MDinput'
-import waves from '@/directive/waves/index.js' // 水波纹指令
-
-export default {
-  components: {
-    PanThumb,
-    MdInput
-  },
-  directives: {
-    waves
-  },
-  data() {
-    const validate = (rule, value, callback) => {
-      if (value.length !== 6) {
-        callback(new Error('请输入六个字符'))
-      } else {
-        callback()
-      }
-    }
-    return {
-      demo: {
-        title: ''
-      },
-      demoRules: {
-        title: [{ required: true, trigger: 'change', validator: validate }]
-      }
-    }
-  }
-}
-</script>
-
-<style scoped>
-.component-item{
-  margin-top: 100px;
-}
-.code-part{
-  margin-top: 20px;
-}
-</style>

src/views/dashboard/admin/components/BoxCard.vue

@@ -6,7 +6,7 @@
     <div style="position:relative;">
       <pan-thumb class="panThumb" :image="avatar"></pan-thumb>
       <mallki className='mallki-text' text='vue-element-admin'></mallki>
-      <div class='progress-item'>
+      <div style="padding-top:35px;" class='progress-item'>
         <span>Vue</span>
         <el-progress :percentage="70"></el-progress>
       </div>
@@ -18,6 +18,10 @@
         <span>Css</span>
         <el-progress :percentage="12"></el-progress>
       </div>
+       <div class='progress-item'>
+        <span>ESlint</span>
+        <el-progress :percentage="100" status="success"></el-progress>
+      </div>
     </div>
   </el-card>
 </template>
@@ -53,13 +57,7 @@ export default {
       }
       return statusMap[status]
     }
-  },
-  created() {
-
-  },
-  methods: {
   }
-
 }
 </script>
 
@@ -86,7 +84,7 @@ export default {
 }
 .mallki-text {
   position: absolute;
-  top: -10px;
+  top: 0px;
   right: 0px;
   font-size: 20px;
   font-weight: bold;
@@ -102,6 +100,9 @@ export default {
   background-color: #fff;
   margin: auto;
   box-shadow: none!important;
+  /deep/ .pan-info{
+    box-shadow: none!important;
+  }
 }
 .progress-item {
   margin-bottom: 10px;

src/views/dashboard/admin/components/PieChart.vue

@@ -54,9 +54,9 @@ export default {
           formatter: '{a} <br/>{b} : {c} ({d}%)'
         },
         legend: {
-          x: 'center',
+          left: 'center',
-          y: 'bottom',
+          bottom: '10',
-          data: ['industries', 'technology', 'forex', 'gold', 'forecasts', 'markets']
+          data: ['industries', 'technology', 'forex', 'gold', 'forecasts']
         },
         calculable: true,
         series: [
@@ -71,8 +71,7 @@ export default {
               { value: 240, name: 'technology' },
               { value: 149, name: 'forex' },
               { value: 100, name: 'gold' },
-              { value: 59, name: 'forecasts' },
+              { value: 59, name: 'forecasts' }
-              { value: 49, name: 'markets' }
             ],
             animationEasing: 'cubicInOut',
             animationDuration: 2600

src/views/dashboard/admin/components/RaddarChart.vue

@@ -58,8 +58,8 @@ export default {
           }
         },
         radar: {
-          radius: '70%',
+          radius: '66%',
-          center: ['50%', '44%'],
+          center: ['50%', '42%'],
           splitNumber: 8,
           splitArea: {
             areaStyle: {
@@ -81,8 +81,8 @@ export default {
           ]
         },
         legend: {
-          left: 0,
+          left: 'center',
-          bottom: 0,
+          bottom: '10',
           data: ['Allocated Budget', 'Expected Spending', 'Actual Spending']
         },
         series: [{

src/views/dashboard/admin/index.vue

@@ -1,29 +1,10 @@
 <template>
   <div class="dashboard-editor-container">
     <github-corner></github-corner>
-    <!-- <el-row class="btn-group">
+
-      <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'>
-        <router-link class="pan-btn light-blue-btn" to="/charts/index">Charts</router-link>
-      </el-col>
-      <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'>
-        <router-link class="pan-btn green-btn" to="/example/table/complex-table">Table</router-link>
-      </el-col>
-      <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'>
-        <router-link class="pan-btn yellow-btn" to="/theme/index">Theme</router-link>
-      </el-col>
-    </el-row> -->
     <el-row class="panel-group" :gutter="40">
       <el-col :span="6">
-        <div class='card-panel no-margin-left' @click="handleSetLineChartData('newVisitis')">
+        <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>
@@ -56,7 +37,7 @@
         </div>
       </el-col>
       <el-col :span="6">
-        <div class='card-panel  no-margin-right' @click="handleSetLineChartData('shoppings')">
+        <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>
@@ -72,9 +53,9 @@
       <line-chart :chart-data='lineChartData'></line-chart>
     </el-row>
 
-    <el-row style="margin-top:30px;">
+    <el-row style="margin-top:30px;" :gutter="30">
       <el-col :span="8">
-        <div class="chart-wrapper no-margin-left">
+        <div class="chart-wrapper">
           <raddar-chart></raddar-chart>
         </div>
       </el-col>
@@ -84,7 +65,7 @@
         </div>
       </el-col>
       <el-col :span="8">
-        <div class="chart-wrapper no-margin-right">
+        <div class="chart-wrapper">
           <bar-chart></bar-chart>
         </div>
       </el-col>
@@ -100,15 +81,11 @@
       <el-col :span="6">
         <box-card></box-card>
       </el-col>
-
     </el-row>
 
   </div>
 </template>
 
-
-
-
 <script>
 import CountTo from 'vue-count-to'
 import GithubCorner from '@/components/GithubCorner'
@@ -169,17 +146,10 @@ export default {
 .dashboard-editor-container {
   padding: 30px;
   background-color: rgb(240, 242, 245);
-  .no-margin-left {
-    margin-left: 0!important;
-  }
-  .no-margin-right {
-    margin-right: 0!important;
-  }
   .panel-group {
     margin-top: 20px;
   }
   .card-panel {
-    // margin: 0 25px;
     height: 108px;
     cursor: pointer;
     font-size: 12px;
@@ -247,11 +217,7 @@ export default {
   }
   .chart-wrapper {
     background: #fff;
-    margin: 0 15px;
     padding: 15px 15px 0;
   }
-  .btn-group {
-    margin-bottom: 60px;
-  }
 }
 </style>