├── static
    ├── .gitkeep
    ├── images
    │   ├── b_header.jpg
    │   ├── b_header2.jpg
    │   └── b_header3.jpg
    └── css
    │   └── main.css
├── config
    ├── prod.env.js
    ├── dev.env.js
    └── index.js
├── .gitignore
├── src
    ├── assets
    │   └── logo.png
    ├── App.vue
    ├── components
    │   ├── common
    │   │   ├── Home.vue
    │   │   ├── pageTitle.vue
    │   │   ├── Sidebar.vue
    │   │   ├── sidebar.vue
    │   │   ├── Header.vue
    │   │   └── header.vue
    │   ├── page
    │   │   ├── TodoListPage.vue
    │   │   ├── MarkdownPage.vue
    │   │   ├── BasicCharts.vue
    │   │   ├── EditorPage.vue
    │   │   ├── FormLayouts.vue
    │   │   ├── BasicTables.vue
    │   │   ├── DashBoard.vue
    │   │   └── FormInput.vue
    │   ├── forms
    │   │   ├── topLayoutForm.vue
    │   │   ├── leftLayoutForm.vue
    │   │   ├── rightLayoutForm.vue
    │   │   └── inlineForm.vue
    │   ├── tables
    │   │   ├── hoverRow.vue
    │   │   ├── stripedRow.vue
    │   │   ├── borderTable.vue
    │   │   ├── fixedColumnTable.vue
    │   │   ├── fixedHeaderTable.vue
    │   │   └── condensedTable.vue
    │   ├── message
    │   │   └── MessageList.vue
    │   ├── todoList
    │   │   └── TodoList.vue
    │   └── charts
    │   │   ├── radarChart.vue
    │   │   ├── pieChart.vue
    │   │   ├── funnelChart.vue
    │   │   ├── lineChart.vue
    │   │   └── barChart.vue
    ├── main.js
    └── router
    │   └── index.js
├── .editorconfig
├── .postcssrc.js
├── .babelrc
├── index.html
├── README.md
└── package.json


/static/.gitkeep:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/config/prod.env.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   NODE_ENV: '"production"'
3 | }
4 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules/
3 | dist/
4 | npm-debug.log
5 | yarn-error.log
6 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shenghy/jspangAdmin/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/static/images/b_header.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shenghy/jspangAdmin/HEAD/static/images/b_header.jpg


--------------------------------------------------------------------------------
/static/images/b_header2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shenghy/jspangAdmin/HEAD/static/images/b_header2.jpg


--------------------------------------------------------------------------------
/static/images/b_header3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shenghy/jspangAdmin/HEAD/static/images/b_header3.jpg


--------------------------------------------------------------------------------
/config/dev.env.js:
--------------------------------------------------------------------------------
1 | var merge = require('webpack-merge')
2 | var prodEnv = require('./prod.env')
3 | 
4 | module.exports = merge(prodEnv, {
5 |   NODE_ENV: '"development"'
6 | })
7 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 


--------------------------------------------------------------------------------
/.postcssrc.js:
--------------------------------------------------------------------------------
1 | // https://github.com/michael-ciniawsky/postcss-load-config
2 | 
3 | module.exports = {
4 |   "plugins": {
5 |     // to edit target browsers: use "browserlist" field in package.json
6 |     "autoprefixer": {}
7 |   }
8 | }
9 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <router-view></router-view>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   name: 'app'
10 | }
11 | </script>
12 | 
13 | <style>
14 |   @import "../static/css/main.css"
15 | </style>
16 | 


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [
 3 |     ["env", { "modules": false }],
 4 |     "stage-2"
 5 |   ],
 6 |   "plugins": ["transform-runtime"],
 7 |   "comments": false,
 8 |   "env": {
 9 |     "test": {
10 |       "presets": ["env", "stage-2"],
11 |       "plugins": [ "istanbul" ]
12 |     }
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>pangadmin</title>
 6 |     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
 7 |   </head>
 8 |   <body>
 9 |     <div id="app"></div>
10 |     <!-- built files will be auto injected -->
11 |   </body>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/src/components/common/Home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="wrapper">
 3 |         <v-head></v-head>
 4 |          <v-sidebar></v-sidebar>
 5 |         
 6 |         <div class="content">
 7 |             <transition name="move" mode="out-in"><router-view></router-view></transition>
 8 |         </div>
 9 |     </div>
10 | </template>
11 | 
12 | <script>
13 |     import vHead from './Header.vue';
14 |     import vSidebar from './Sidebar.vue';
15 |     export default {
16 |         components:{
17 |             vHead, vSidebar
18 |         }
19 |     }
20 | </script>
21 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | // The Vue build version to load with the `import` command
 2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 3 | import Vue from 'vue';
 4 | import App from './App';
 5 | import router from './router';
 6 | import ElementUI from 'element-ui';
 7 | //引入element-ui的默认CSS样式
 8 | import 'element-ui/lib/theme-default/index.css';
 9 | 
10 | 
11 | Vue.use(ElementUI);
12 | Vue.config.productionTip = false
13 | 
14 | 
15 | 
16 | 
17 | /* eslint-disable no-new */
18 | new Vue({
19 |   el: '#app',
20 |   router,
21 |   template: '<App/>',
22 |   components: { App },
23 |   beforeCreate:function(){
24 |     console.log('beforeCreated.....');
25 |   }
26 | })
27 | 


--------------------------------------------------------------------------------
/src/components/common/pageTitle.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="pageTitle">
 3 |         <div class="pt-left"><h2>{{vtitle.toUpperCase()}}</h2></div>
 4 |         <div class="pt-right">
 5 |             <span class="pt-Home"><router-link to="DashBoard">Home</router-link></span>
 6 |             <span class="pt-line"> / </span>
 7 |             <span class="pt-page">{{vtitle}}</span>
 8 |         </div>
 9 |     </div>
10 | </template>
11 | <script>
12 |     export default {
13 |        props:['vtitle']
14 |     }
15 | </script>
16 | <style scoped>
17 |     .pageTitle{
18 |         clear:both;
19 |         height:55px;
20 |       
21 |     }
22 |     .pt-left{
23 |         float:left;
24 |     }
25 |     .pt-right{
26 |         float:right;
27 |     }
28 |     .pt-Home{
29 |         font-size:20px;
30 |     }
31 |     .pt-line{
32 |         color:#ccc;
33 |     }
34 |     a{
35 |         color:#209e91;
36 |     }
37 | </style>
38 | 


--------------------------------------------------------------------------------
/static/css/main.css:
--------------------------------------------------------------------------------
 1 | *{margin:0;padding:0;}
 2 | html,body,#app,.wrapper{
 3 |     width:100%;
 4 |     height:100%;
 5 |     overflow: hidden;
 6 |     
 7 | }
 8 | body{
 9 |     font-family:"Helvetica Neue",Helvetica, "Microsoft YaHei", Arial, STHeiTi, sans-serif;
10 |     color:#777777;
11 | }
12 | a{text-decoration: none}
13 | 
14 | .el-badge__content{
15 |     border:0px !important;
16 | }
17 | .content{
18 |     background: none repeat scroll 0 0 #f0f3f4;
19 |     position: absolute;
20 |     left: 200px;
21 |     right: 0;
22 |     top: 66px;
23 |     bottom:0;
24 |     width: auto;
25 |     padding:25px 40px 25px 40px;
26 |     box-sizing: border-box;
27 |     overflow-y: scroll;
28 | }
29 | .clear{
30 |     width:100%;
31 |     height:0px;
32 |     clear:both;
33 | }
34 | .ql-editor{
35 |     background-color: #fff;
36 |       min-height: 20em;
37 |       padding-bottom: 1em;
38 |     max-height: 25em;
39 | }
40 | .ql-toolbar{
41 |     background-color: #fff;
42 | }


--------------------------------------------------------------------------------
/src/components/page/TodoListPage.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div >
 3 |         <v-pageTitle vtitle="To Do List"></v-pageTitle>
 4 | 
 5 | 
 6 |         <el-row :gutter="20">
 7 |             <el-col :span="12" :offset="6">
 8 |                 <el-card class="box-card">
 9 |                    <TodoList></TodoList>
10 |                 </el-card>
11 |             </el-col>
12 |            
13 |             
14 |         </el-row>
15 | 
16 | 
17 | 
18 |         
19 | 
20 | 
21 |     </div>
22 | 
23 | 
24 | 
25 | </template>
26 | 
27 | <script>
28 |     import vPageTitle from '../common/pageTitle.vue';
29 |     import TodoList from '../todoList/TodoList.vue';
30 |     
31 |     
32 | 
33 |    
34 |     export default {
35 |         components:{
36 |             vPageTitle,TodoList
37 |         }
38 |         
39 |         
40 |         
41 |         
42 |     }
43 | </script>
44 | 
45 | <style>
46 |     .el-col{
47 |         margin-bottom:16px;
48 |     }
49 |  
50 |     
51 | </style>


--------------------------------------------------------------------------------
/src/components/forms/topLayoutForm.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |    <div>
 3 |     <el-form  label-position="top" label-width="80px" :model="formLabelAlign">
 4 |         <el-form-item label="名称">
 5 |             <el-input v-model="formLabelAlign.name"></el-input>
 6 |         </el-form-item>
 7 |         <el-form-item label="活动区域">
 8 |             <el-input v-model="formLabelAlign.region"></el-input>
 9 |         </el-form-item>
10 |         <el-form-item label="活动形式">
11 |             <el-input v-model="formLabelAlign.type"></el-input>
12 |         </el-form-item>
13 |     </el-form>
14 |     </div>
15 | 
16 | </template>
17 | <script>
18 |     export default {
19 |     data() {
20 |       return {
21 |        formLabelAlign: {
22 |           name: '',
23 |           region: '',
24 |           type: ''
25 |         }
26 |       }
27 |     },
28 |     methods: {
29 |       onSubmit() {
30 |         console.log('submit!');
31 |       }
32 |     }
33 |   }
34 | </script>
35 | <style scoped>
36 |     
37 | </style>
38 | 


--------------------------------------------------------------------------------
/src/components/forms/leftLayoutForm.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <el-form  label-position="left" label-width="80px" :model="formLabelAlign">
 4 |         <el-form-item label="名称">
 5 |             <el-input v-model="formLabelAlign.name"></el-input>
 6 |         </el-form-item>
 7 |         <el-form-item label="活动区域">
 8 |             <el-input v-model="formLabelAlign.region"></el-input>
 9 |         </el-form-item>
10 |         <el-form-item label="活动形式">
11 |             <el-input v-model="formLabelAlign.type"></el-input>
12 |         </el-form-item>
13 |          <el-form-item label="活动人员">
14 |             <el-input v-model="formLabelAlign.user"></el-input>
15 |         </el-form-item>
16 |     </el-form>
17 | </div>
18 | 
19 | </template>
20 | <script>
21 |     export default {
22 |     data() {
23 |       return {
24 |        formLabelAlign: {
25 |           name: '',
26 |           region: '',
27 |           type: '',
28 |           user:''
29 |         }
30 |       }
31 |     },
32 |     methods: {
33 |       onSubmit() {
34 |         console.log('submit!');
35 |       }
36 |     }
37 |   }
38 | </script>
39 | <style scoped>
40 |     
41 | </style>
42 | 


--------------------------------------------------------------------------------
/src/components/forms/rightLayoutForm.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <el-form  label-position="right" label-width="80px" :model="formLabelAlign">
 4 |         <el-form-item label="名称">
 5 |             <el-input v-model="formLabelAlign.name"></el-input>
 6 |         </el-form-item>
 7 |         <el-form-item label="活动区域">
 8 |             <el-input v-model="formLabelAlign.region"></el-input>
 9 |         </el-form-item>
10 |         <el-form-item label="活动形式">
11 |             <el-input v-model="formLabelAlign.type"></el-input>
12 |         </el-form-item>
13 |         <el-form-item label="活动人员">
14 |             <el-input v-model="formLabelAlign.user"></el-input>
15 |         </el-form-item>
16 |     </el-form>
17 | </div>
18 | 
19 | </template>
20 | <script>
21 |     export default {
22 |     data() {
23 |       return {
24 |        formLabelAlign: {
25 |           name: '',
26 |           region: '',
27 |           type: '',
28 |           user:''
29 |         }
30 |       }
31 |     },
32 |     methods: {
33 |       onSubmit() {
34 |         console.log('submit!');
35 |       }
36 |     }
37 |   }
38 | </script>
39 | <style scoped>
40 |     
41 | </style>
42 | 


--------------------------------------------------------------------------------
/src/components/forms/inlineForm.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |    <el-form :inline="true" :model="formInline" class="demo-form-inline">
 3 |     <el-form-item label="审批人">
 4 |         <el-input v-model="formInline.user" placeholder="审批人"></el-input>
 5 |     </el-form-item>
 6 |     <el-form-item label="审批事项">
 7 |         <el-input v-model="formInline.option" placeholder="审批事项"></el-input>
 8 |     </el-form-item>
 9 |     <el-form-item label="活动区域">
10 |         <el-select v-model="formInline.region" placeholder="活动区域">
11 |         <el-option label="区域一" value="shanghai"></el-option>
12 |         <el-option label="区域二" value="beijing"></el-option>
13 |         </el-select>
14 |     </el-form-item><el-form-item>
15 |         <el-button type="success" @click="onSubmit">查询</el-button>
16 |     </el-form-item>
17 |     </el-form>
18 | </template>
19 | <script>
20 |     export default {
21 |     data() {
22 |       return {
23 |         formInline: {
24 |           user: '',
25 |           region: '',
26 |           option:''
27 |         }
28 |       }
29 |     },
30 |     methods: {
31 |       onSubmit() {
32 |         console.log('submit!');
33 |       }
34 |     }
35 |   }
36 | </script>
37 | <style scoped>
38 |     
39 | </style>
40 | 


--------------------------------------------------------------------------------
/src/components/tables/hoverRow.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |    <el-table :data="tableData" style="width: 100%">
 3 |       <el-table-column prop="Browser"  label="Browser"  width="180"></el-table-column>
 4 |       <el-table-column prop="Visits" label="Visits" width="180"></el-table-column>
 5 |       <el-table-column prop="Purchases" label="Purchases" width="180"> </el-table-column>
 6 |       <el-table-column prop="co" label="%" align="right"> </el-table-column>
 7 |     </el-table>
 8 | </template>
 9 | 
10 | <script>
11 |     export default {
12 |       data() {
13 |         return {
14 |           tableData: [{
15 |             Browser: 'Google Chrome',
16 |             Visits: '13,392',
17 |             Purchases: '4,214',
18 |             co:'50%'
19 |           }, {
20 |             Browser: 'Mozilla Firefox',
21 |             Visits: '7,873',
22 |             Purchases: '3,031',
23 |             co:'28%'
24 |           }, {
25 |            Browser: 'Internet Explorer',
26 |             Visits: '5,890',
27 |             Purchases: '2,102',
28 |             co:'17%'
29 |           }, {
30 |             Browser: 'Safari',
31 |             Visits: '4,001',
32 |             Purchases: '1,001',
33 |             co:'14%'
34 |           }]
35 |         }
36 |       }
37 |     }
38 | </script>
39 | <style scoped>
40 |     
41 | </style>
42 | 


--------------------------------------------------------------------------------
/src/components/tables/stripedRow.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |    <el-table :data="tableData" style="width: 100%" stripe>
 3 |       <el-table-column prop="Browser"  label="Browser"  width="180"></el-table-column>
 4 |       <el-table-column prop="Visits" label="Visits" width="180"></el-table-column>
 5 |       <el-table-column prop="Purchases" label="Purchases" width="180"> </el-table-column>
 6 |       <el-table-column prop="co" label="%" align="right"> </el-table-column>
 7 |     </el-table>
 8 | </template>
 9 | 
10 | <script>
11 |     export default {
12 |       data() {
13 |         return {
14 |           tableData: [{
15 |             Browser: 'Google Chrome',
16 |             Visits: '13,392',
17 |             Purchases: '4,214',
18 |             co:'50%'
19 |           }, {
20 |             Browser: 'Mozilla Firefox',
21 |             Visits: '7,873',
22 |             Purchases: '3,031',
23 |             co:'28%'
24 |           }, {
25 |            Browser: 'Internet Explorer',
26 |             Visits: '5,890',
27 |             Purchases: '2,102',
28 |             co:'17%'
29 |           }, {
30 |             Browser: 'Safari',
31 |             Visits: '4,001',
32 |             Purchases: '1,001',
33 |             co:'14%'
34 |           }]
35 |         }
36 |       }
37 |     }
38 | </script>
39 | <style scoped>
40 |     
41 | </style>
42 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # jspangAdmin
 2 | 
 3 | > 一个建立在Vue2.0框架基础上的后台管理系统，它包含了后台所用的前端样式和常用组件。它可以快速的帮你搭建基于Vue的后台管理系统。
 4 | ## 相关技术
 5 | Vue-cli + element + eCharts
 6 | ## Demo（案例预览）
 7 | [Demo](http://jspang.com/jspangAdmin)
 8 | 
 9 | ## image（图片）
10 | ### 后台首页（DashBoard）
11 | ![jspangAdmin](http://7xjyw1.com1.z0.glb.clouddn.com/jspangadmin01.png)
12 | ### 基本图标（charts）
13 | ![jspangAdmin](http://7xjyw1.com1.z0.glb.clouddn.com/jspangadmin02.png)
14 | ### 表单页面（Form Elements）
15 | ![jspangAdmin](http://7xjyw1.com1.z0.glb.clouddn.com/jspangadmin03.png)
16 | ### 表格（Tables）
17 | ![jspangAdmin](http://7xjyw1.com1.z0.glb.clouddn.com/jspangadmin04.png)
18 | ### MarkDown编辑和解析（MarkDown）
19 | ![jspangAdmin](http://7xjyw1.com1.z0.glb.clouddn.com/jspangadmin05.png)
20 | ### 任务表单（To Do List）
21 | ![jspangAdmin](http://7xjyw1.com1.z0.glb.clouddn.com/jspangadmin06.png)
22 | ## Build Setup（使用搭建步骤）
23 | ``` bash
24 | # install dependencies（安装）
25 | npm install
26 | 
27 | # serve with hot reload at localhost:8080（运行）
28 | npm run dev
29 | 
30 | # build for production with minification（打包）
31 | npm run build
32 | 
33 | # build for production and view the bundle analyzer report
34 | npm run build --report
35 | ```
36 | 
37 | For detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
38 | 


--------------------------------------------------------------------------------
/config/index.js:
--------------------------------------------------------------------------------
 1 | // see http://vuejs-templates.github.io/webpack for documentation.
 2 | var path = require('path')
 3 | 
 4 | module.exports = {
 5 |   build: {
 6 |     env: require('./prod.env'),
 7 |     index: path.resolve(__dirname, '../dist/index.html'),
 8 |     assetsRoot: path.resolve(__dirname, '../dist'),
 9 |     assetsSubDirectory: 'static',
10 |     assetsPublicPath: './',
11 |     productionSourceMap: false,
12 |     // Gzip off by default as many popular static hosts such as
13 |     // Surge or Netlify already gzip all static assets for you.
14 |     // Before setting to `true`, make sure to:
15 |     // npm install --save-dev compression-webpack-plugin
16 |     productionGzip: false,
17 |     productionGzipExtensions: ['js', 'css'],
18 |     // Run the build command with an extra argument to
19 |     // View the bundle analyzer report after build finishes:
20 |     // `npm run build --report`
21 |     // Set to `true` or `false` to always turn it on or off
22 |     bundleAnalyzerReport: process.env.npm_config_report
23 |   },
24 |   dev: {
25 |     env: require('./dev.env'),
26 |     port: 8080,
27 |     autoOpenBrowser: true,
28 |     assetsSubDirectory: 'static',
29 |     assetsPublicPath: '/',
30 |     proxyTable: {},
31 |     // CSS Sourcemaps off by default because relative paths are "buggy"
32 |     // with this option, according to the CSS-Loader README
33 |     // (https://github.com/webpack/css-loader#sourcemaps)
34 |     // In our experience, they generally work as expected,
35 |     // just be aware of this issue when enabling this option.
36 |     cssSourceMap: false
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import Router from 'vue-router';
 3 | import Home from '@/components/common/Home';
 4 | import DashBoard from '@/components/page/DashBoard';
 5 | import AmCharts from '@/components/page/BasicCharts';
 6 | import FormInput from '@/components/page/FormInput';
 7 | import FormLayouts from '@/components/page/FormLayouts';
 8 | import BasicTables from '@/components/page/BasicTables';
 9 | import EditorPage from '@/components/page/EditorPage';
10 | import MarkdownPage from '@/components/page/MarkdownPage';
11 | import TodoList from '@/components/page/TodoListPage';
12 | 
13 | Vue.use(Router)
14 | 
15 | export default new Router({
16 |   mode:'history',
17 |   base:__dirname,
18 |   routes: [
19 |     {
20 |       path: '/',
21 |       component: Home,
22 |       children:[
23 |         {
24 |           path:'',
25 |           component:DashBoard
26 |         },{
27 |           path:'/DashBoard',
28 |           component:DashBoard
29 |         },{
30 |           path:'/EditorPage',
31 |           component:EditorPage
32 |         },{
33 |           path:'/MarkdownPage',
34 |           component:MarkdownPage
35 |         },{
36 |           path:'/BasicCharts',
37 |           component:AmCharts
38 |         },{
39 |           path:'/FormInput',
40 |           component:FormInput
41 |         },{
42 |           path:'/FormLayouts',
43 |           component:FormLayouts
44 |         },{
45 |           path:'/BasicTables',
46 |           component:BasicTables
47 |         },{
48 |           path:'/TodoList',
49 |           component:TodoList
50 |         }
51 |         
52 | 
53 |       ]
54 |     }
55 |   ]
56 | })
57 | 


--------------------------------------------------------------------------------
/src/components/tables/borderTable.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |    <el-table :data="tableData" style="width: 100%" border stripe>
 3 |       <el-table-column prop="id"  label="ID"  width="80"></el-table-column>
 4 |       <el-table-column prop="userName" label="NAME" width="180"></el-table-column>
 5 |       <el-table-column prop="age" label="AGE" width="80"> </el-table-column>
 6 |       <el-table-column prop="ability" label="ABILITY"> </el-table-column>
 7 |       <el-table-column prop="value" label="VALUE" align="right"> </el-table-column>
 8 |     </el-table>
 9 | </template>
10 | 
11 | <script>
12 |     export default {
13 |       data() {
14 |         return {
15 |           tableData: [{
16 |             id:1,
17 |             userName: 'JSpang',
18 |             age: '30',
19 |             ability: 'HTML5,PHP',
20 |             value:'80%'
21 |           }, {
22 |             id:2,
23 |             userName: 'King',
24 |             age: '28',
25 |             ability: 'Web,PHP',
26 |             value:'70%'
27 |           }, {
28 |             id:3,
29 |             userName: 'Panda',
30 |             age: '30',
31 |             ability: 'PHP,MySql',
32 |             value:'60%'
33 |           }, {
34 |             id:4,
35 |             userName: 'HaiPu',
36 |             age: '35',
37 |             ability: 'Web,DB',
38 |             value:'80%'
39 |           }, {
40 |             id:3,
41 |             userName: 'Panda',
42 |             age: '30',
43 |             ability: 'PHP,MySql',
44 |             value:'60%'
45 |           }, {
46 |             id:4,
47 |             userName: 'HaiPu',
48 |             age: '35',
49 |             ability: 'Web,DB',
50 |             value:'80%'
51 |           }, {
52 |             id:3,
53 |             userName: 'Panda',
54 |             age: '30',
55 |             ability: 'PHP,MySql',
56 |             value:'60%'
57 |           }]
58 |         }
59 |       }
60 |     }
61 | </script>
62 | <style scoped>
63 |     
64 | </style>
65 | 


--------------------------------------------------------------------------------
/src/components/tables/fixedColumnTable.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |    <el-table :data="tableData" style="width: 100%" border stripe>
 3 |       <el-table-column fixed prop="id"  label="ID"  width="80"></el-table-column>
 4 |       <el-table-column prop="userName" label="NAME" width="180"></el-table-column>
 5 |       <el-table-column prop="age" label="AGE"  width="80"> </el-table-column>
 6 |       <el-table-column prop="ability" label="ABILITY" width="300"> </el-table-column>
 7 |       <el-table-column prop="Education" label="EDUCATION" width="200" > </el-table-column>
 8 |       <el-table-column prop="wages" label="WAGES"  width="180"> </el-table-column>
 9 |       <el-table-column prop="value" label="VALUE"  width="180" align="right"> </el-table-column>
10 |     </el-table>
11 | </template>
12 | 
13 | <script>
14 |     export default {
15 |       data() {
16 |         return {
17 |           tableData: [{
18 |             id:1,
19 |             userName: 'JSpang',
20 |             age: '30',
21 |             ability: 'Web,HTML5,PHP',
22 |             Education:'University',
23 |             wages:'$821',
24 |             value:'80%'
25 |           }, {
26 |             id:2,
27 |             userName: 'King',
28 |             age: '28',
29 |             ability: 'Web,PHP',
30 |             Education:'University',
31 |             wages:'$864',
32 |             value:'70%'
33 |           }, {
34 |             id:3,
35 |             userName: 'Panda',
36 |             age: '30',
37 |             ability: 'PHP,MySql',
38 |             Education:'University',
39 |             wages:'$244',
40 |             value:'60%'
41 |           }, {
42 |             id:4,
43 |             userName: 'HaiPu',
44 |             age: '35',
45 |             ability: 'Web,HTML5,PHP,DB',
46 |             Education:'University',
47 |             wages:'$952',
48 |             value:'80%'
49 |           }]
50 |         }
51 |       }
52 |     }
53 | </script>
54 | <style scoped>
55 |     
56 | </style>
57 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "pangadmin",
 3 |   "version": "1.0.0",
 4 |   "description": "A Vue.js project",
 5 |   "author": "ShengHongYu <web0432@126.com>",
 6 |   "private": true,
 7 |   "scripts": {
 8 |     "dev": "node build/dev-server.js",
 9 |     "build": "node build/build.js"
10 |   },
11 |   "dependencies": {
12 |     "element-ui": "^1.2.3",
13 |     "vue": "^2.2.1",
14 |     "vue-echarts-v3": "^1.0.3",
15 |     "vue-markdown": "^2.1.3",
16 |     "vue-quill-editor": "^1.1.1",
17 |     "vue-router": "^2.2.0",
18 |     "vue-simplemde": "^0.3.7"
19 |   },
20 |   "devDependencies": {
21 |     "autoprefixer": "^6.7.2",
22 |     "babel-core": "^6.22.1",
23 |     "babel-loader": "^6.2.10",
24 |     "babel-plugin-transform-runtime": "^6.22.0",
25 |     "babel-preset-env": "^1.2.1",
26 |     "babel-preset-stage-2": "^6.22.0",
27 |     "babel-register": "^6.22.0",
28 |     "chalk": "^1.1.3",
29 |     "connect-history-api-fallback": "^1.3.0",
30 |     "copy-webpack-plugin": "^4.0.1",
31 |     "css-loader": "^0.26.1",
32 |     "eventsource-polyfill": "^0.9.6",
33 |     "express": "^4.14.1",
34 |     "extract-text-webpack-plugin": "^2.0.0",
35 |     "file-loader": "^0.10.0",
36 |     "friendly-errors-webpack-plugin": "^1.1.3",
37 |     "function-bind": "^1.1.0",
38 |     "html-webpack-plugin": "^2.28.0",
39 |     "http-proxy-middleware": "^0.17.3",
40 |     "webpack-bundle-analyzer": "^2.2.1",
41 |     "semver": "^5.3.0",
42 |     "opn": "^4.0.2",
43 |     "optimize-css-assets-webpack-plugin": "^1.3.0",
44 |     "ora": "^1.1.0",
45 |     "rimraf": "^2.6.0",
46 |     "url-loader": "^0.5.7",
47 |     "vue-loader": "^11.1.4",
48 |     "vue-style-loader": "^2.0.0",
49 |     "vue-template-compiler": "^2.2.1",
50 |     "webpack": "^2.2.1",
51 |     "webpack-dev-middleware": "^1.10.0",
52 |     "webpack-hot-middleware": "^2.16.1",
53 |     "webpack-merge": "^2.6.1"
54 |   },
55 |   "engines": {
56 |     "node": ">= 4.0.0",
57 |     "npm": ">= 3.0.0"
58 |   },
59 |   "browserslist": [
60 |     "> 1%",
61 |     "last 2 versions",
62 |     "not ie <= 8"
63 |   ]
64 | }
65 | 


--------------------------------------------------------------------------------
/src/components/page/MarkdownPage.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div >
 3 |         <v-pageTitle vtitle="Markdown"></v-pageTitle>
 4 | 
 5 |         
 6 |         <el-row :gutter="20">
 7 |             <el-col :xs="24" :sm="24" :md="12" :lg="12">
 8 |                 <el-card class="box-card">
 9 |                      <markdown-editor v-model="source" ref="markdownEditor"></markdown-editor>
10 |                 </el-card>
11 |             </el-col>
12 |             <el-col :xs="24" :sm="24" :md="12" :lg="12">
13 |                 <el-card class="box-card">
14 |                     <div>预览效果：</div>
15 |                     <vue-markdown class="result-html full-height" :watches="['show','html','breaks','linkify','emoji','typographer','toc']"
16 |                     :source="source" :show="show" :html="html" :breaks="breaks" :linkify="linkify"
17 |                     :emoji="emoji" :typographer="typographer" :toc="toc"
18 |                     toc-id="toc"></vue-markdown>
19 |                     <pre>
20 |                        
21 |                     </pre>
22 |                 </el-card>
23 |             </el-col>
24 | 
25 |             
26 |         </el-row>
27 | 
28 | 
29 | 
30 | 
31 | 
32 | 
33 | 
34 | 
35 |        
36 | 
37 |     </div>
38 | 
39 | 
40 | 
41 | </template>
42 | 
43 | <script>
44 |     import vPageTitle from '../common/pageTitle.vue';
45 |     import VueMarkdown from 'vue-markdown';
46 |     import { markdownEditor } from 'vue-simplemde'
47 |    
48 | 
49 |   
50 | 
51 |     export default {
52 |         components:{
53 |             vPageTitle,VueMarkdown,markdownEditor
54 |         },
55 |         data(){
56 |             return{
57 |                 source: "## 可以开始编写您的Markdown文档了！",
58 |                 show: true,
59 |                 html: true,
60 |                 breaks: true,
61 |                 linkify: true,
62 |                 emoji: true,
63 |                 typographer: true,
64 |                 toc: false
65 |             }
66 |         },
67 |         methods: {      
68 |         }
69 |     }
70 | </script>
71 | 
72 | <style scoped>
73 | 
74 |    .box-card{
75 |        line-height:40px;
76 |    }
77 |    
78 |  
79 |     
80 | </style>


--------------------------------------------------------------------------------
/src/components/tables/fixedHeaderTable.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |    <el-table :data="tableData" style="width: 100%" border stripe height="250">
 3 |       <el-table-column prop="id"  label="ID"  width="80"></el-table-column>
 4 |       <el-table-column prop="userName" label="NAME" width="180"></el-table-column>
 5 |       <el-table-column prop="age" label="AGE" width="80"> </el-table-column>
 6 |       <el-table-column prop="ability" label="ABILITY"> </el-table-column>
 7 |       <el-table-column prop="value" label="VALUE" align="right"> </el-table-column>
 8 |     </el-table>
 9 | </template>
10 | 
11 | <script>
12 |     export default {
13 |       data() {
14 |         return {
15 |           tableData: [{
16 |             id:1,
17 |             userName: 'JSpang',
18 |             age: '30',
19 |             ability: 'Web,HTML5,PHP',
20 |             value:'80%'
21 |           }, {
22 |             id:2,
23 |             userName: 'King',
24 |             age: '28',
25 |             ability: 'Web,PHP',
26 |             value:'70%'
27 |           }, {
28 |             id:3,
29 |             userName: 'Panda',
30 |             age: '30',
31 |             ability: 'PHP,MySql',
32 |             value:'60%'
33 |           }, {
34 |             id:4,
35 |             userName: 'Panda',
36 |             age: '30',
37 |             ability: 'PHP,MySql',
38 |             value:'60%'
39 |           },{
40 |             id:5,
41 |             userName: 'Panda',
42 |             age: '30',
43 |             ability: 'PHP,MySql',
44 |             value:'60%'
45 |           },{
46 |             id:6,
47 |             userName: 'Panda',
48 |             age: '30',
49 |             ability: 'PHP,MySql',
50 |             value:'60%'
51 |           },{
52 |             id:7,
53 |             userName: 'Panda',
54 |             age: '30',
55 |             ability: 'PHP,MySql',
56 |             value:'60%'
57 |           },{
58 |             id:8,
59 |             userName: 'HaiPu',
60 |             age: '35',
61 |             ability: 'Web,HTML5,PHP,DB',
62 |             value:'80%'
63 |           }]
64 |         }
65 |       }
66 |     }
67 | </script>
68 | <style scoped>
69 |     
70 | </style>
71 | 


--------------------------------------------------------------------------------
/src/components/page/BasicCharts.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div >
 3 |         <v-pageTitle vtitle="BasicCharts"></v-pageTitle>
 4 | 
 5 | 
 6 |         <el-row :gutter="20">
 7 |             <el-col :xs="24" :sm="24" :md="8" :lg="8">
 8 |                 <el-card class="box-card">
 9 |                     <barChart></barChart>
10 |                 </el-card>
11 |             </el-col>
12 |             <el-col :xs="24" :sm="24" :md="8" :lg="8">
13 |                 <el-card class="box-card">
14 |                     <lineChart></lineChart>
15 |                 </el-card>
16 |             </el-col>
17 |             <el-col :xs="24" :sm="24" :md="8" :lg="8">
18 |                 <el-card class="box-card">
19 |                    <radarChart></radarChart>
20 |                 </el-card>
21 |             </el-col>
22 |         </el-row>
23 | 
24 |         <el-row :gutter="20">
25 |             <el-col :xs="24" :sm="24" :md="12" :lg="12">
26 |                 <el-card class="box-card">
27 |                     <pieChart></pieChart>
28 |                 </el-card>
29 |             </el-col>
30 |             <el-col :xs="24" :sm="24" :md="12" :lg="12">
31 |                 <el-card class="box-card">
32 |                     <funnelChart></funnelChart>
33 |                 </el-card>
34 |             </el-col>
35 |             
36 |         </el-row>
37 | 
38 | 
39 | 
40 |         
41 | 
42 | 
43 |     </div>
44 | 
45 | 
46 | 
47 | </template>
48 | 
49 | <script>
50 |     import vPageTitle from '../common/pageTitle.vue';
51 |     import barChart from '../charts/barChart.vue';
52 |     import pieChart from '../charts/pieChart.vue';
53 |     import lineChart from '../charts/lineChart.vue';
54 |     import radarChart from '../charts/radarChart.vue';
55 |     import funnelChart from '../charts/funnelChart.vue';
56 |    
57 |     export default {
58 |         components:{
59 |             vPageTitle,barChart,pieChart,lineChart,radarChart,funnelChart
60 |         },
61 |         methods: {      
62 |         }
63 |     }
64 | </script>
65 | 
66 | <style scoped>
67 |     .el-col{
68 |         margin-bottom:16px;
69 |     }
70 |     .material-icons{
71 |         font-size:80px;
72 |         color:#ddd;
73 |     }
74 |    
75 |     .cart-string{
76 |         height:100px;
77 |         padding-top:10px;
78 |         font-size:1.1rem;
79 |         
80 |     }
81 |     
82 |  
83 |     
84 | </style>


--------------------------------------------------------------------------------
/src/components/page/EditorPage.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div >
 3 |         <v-pageTitle vtitle="EditorPage"></v-pageTitle>
 4 | 
 5 | 
 6 |         <!-- use with components - bidirectional data binding（双向数据绑定） -->
 7 |         <quill-editor ref="myTextEditor"
 8 |                     v-model="content"
 9 |                     :config="editorOption"
10 |                     @blur="onEditorBlur($event)"
11 |                     @focus="onEditorFocus($event)"
12 |                     @ready="onEditorReady($event)">
13 |         </quill-editor>
14 | 
15 |          <div class="html ql-editor" v-html="content"></div>
16 | 
17 | 
18 | 
19 |         
20 | 
21 | 
22 |     </div>
23 | 
24 | 
25 | 
26 | </template>
27 | 
28 | <script>
29 |     import vPageTitle from '../common/pageTitle.vue';
30 |     import { quillEditor } from 'vue-quill-editor';
31 |     
32 | 
33 |     
34 |    
35 |     export default {
36 |         components:{
37 |             vPageTitle,quillEditor
38 |         },
39 |         data(){
40 |             return{
41 |                 content:'<h2>JSPangAdmin 是一个由Vue2为框架开发的后台管理系统。</h2><h3>你可以随意的使用并编辑它，希望可以帮助前端开发者减轻开发步骤，让大家有时间泡妞和享受生活。</h3>',
42 |                 editorOption: {}
43 |             }
44 |         },
45 |         methods: {  
46 |              onEditorBlur(editor) {
47 |                     console.log('editor blur!', editor)
48 |                 },
49 |                 onEditorFocus(editor) {
50 |                     console.log('editor focus!', editor)
51 |                 },
52 |                 onEditorReady(editor) {
53 |                     console.log('editor ready!', editor)
54 |                 }    
55 |         },
56 |         computed: {
57 |             editor() {
58 |                 return this.$refs.myTextEditor.quillEditor;
59 |             }
60 |         }
61 |     }
62 | </script>
63 | 
64 | <style scoped>
65 |     .el-col{
66 |         margin-bottom:16px;
67 |     }
68 |     .material-icons{
69 |         font-size:80px;
70 |         color:#ddd;
71 |     }
72 |    
73 |     .ql-container .ql-editor {
74 |         min-height: 20em;
75 |         padding-bottom: 1em;
76 |         max-height: 25em;
77 |         
78 |     }
79 |     .html {
80 |         height: 9em;
81 |         overflow-y: auto;
82 |         border: 1px solid #ccc;
83 |         border-top: none;
84 |         resize: vertical;
85 |         background-color:#fff;
86 |     }
87 |  
88 |     
89 | </style>


--------------------------------------------------------------------------------
/src/components/message/MessageList.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div >
 3 |         <ul class="messageList">
 4 |             <li v-for="message in messages">
 5 |                 <span><img :src="message.header" /></span>
 6 |                 <span class="message_name">{{message.name}}</span>
 7 |                 <span class="ms-content">{{message.content}}</span>
 8 |             </li>
 9 |         
10 |         </ul>
11 | 
12 |     </div>
13 | </template>
14 | 
15 | <script>
16 |     export default {
17 |         components:{
18 |            
19 |         },
20 |          data() {
21 |             return {
22 |                
23 |                 messages:[
24 |                     {header:'../../static/images/b_header2.jpg',name:'JSPang',content:'我有一个Style样式需要您帮忙处理以下。',time:'3'},
25 |                     {header:'../../static/images/b_header3.jpg',name:'Panda',content:'中午一起吃个饭吧，我请客。',time:'15'},
26 |                     {header:'../../static/images/b_header.jpg',name:'LinDa',content:'需要处理一下POP展示的白边样式。',time:'18'},
27 |                     {header:'../../static/images/b_header2.jpg',name:'JSPang',content:'下午3点开需求会议，准时参加。',time:'24'},
28 |                     {header:'../../static/images/b_header3.jpg',name:'JSPang',content:'晚上我开车送你回家，你请我吃晚饭。',time:'45'}
29 |                 ]
30 |             }
31 |         },
32 |         methods: {      
33 |         }
34 |     }
35 | </script>
36 | 
37 | <style scoped>
38 |    
39 |     .messageList{
40 |         list-style:none;
41 |     }
42 |     .messageList li{
43 |         clear:both;
44 |         border-bottom:1px solid #ccc;
45 |         padding:10px;
46 |         height:auto;
47 |         overflow:hidden;
48 |         cursor:pointer;
49 |     }
50 |     .messageList span{
51 |         display:block;
52 |         float:left;
53 |         margin-right:5px;
54 |         height:auto;
55 |     }
56 |     .messageList img{
57 |         transition:all 0.5s; 
58 |         -moz-transition:all 0.5s; 
59 |         -o-transition:all 0.5s; 
60 |         -ms-transition:all 0.5s; 
61 |         -webkit-transition:all 0.5s; 
62 |         width:50px;
63 |         border-radius:50%;
64 |     }
65 |     .messageList li:hover img{
66 |        
67 |         width:55px;
68 |       
69 |     }
70 |     .messageList .ms-content{
71 |         width:70%;
72 |         font-size:12px;
73 |         margin-top:6px;
74 |     }
75 |     .messageList .message_name{
76 |         color:#4cb1a7;
77 |     }
78 |  
79 |     
80 | </style>


--------------------------------------------------------------------------------
/src/components/page/FormLayouts.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div >
 3 |         <v-pageTitle vtitle="FormLayouts"></v-pageTitle>
 4 | 
 5 | 
 6 |        
 7 |         <el-row>
 8 |             <el-col :span="24">
 9 |                 <el-card class="box-card">
10 |                     InlineForm-行布局
11 |                     <hr>
12 |                     <inlineForm></inlineForm>
13 |                 </el-card>
14 |             </el-col>
15 |         </el-row>
16 | 
17 |         <el-row :gutter="20">
18 |             <el-col :xs="24" :sm="24" :md="8" :lg="8">
19 |                 <el-card class="box-card card-a">
20 |                     Right Layout Form
21 |                     <hr>
22 |                     <rightLayoutForm></rightLayoutForm>
23 |                 </el-card>
24 |             </el-col>
25 |              <el-col :xs="24" :sm="24" :md="8" :lg="8">
26 |                 <el-card class="box-card card-a">
27 |                     Left Layout Form
28 |                     <hr>
29 |                     <leftLayoutForm></leftLayoutForm>
30 |                 </el-card>
31 |             </el-col>
32 |              <el-col :xs="24" :sm="24" :md="8" :lg="8">
33 |                 <el-card class="box-card card-a">
34 |                     Top Layout Form
35 |                     <hr>
36 |                     <topLayoutForm></topLayoutForm>
37 |                 </el-card>
38 |             </el-col>
39 |         </el-row>
40 | 
41 | 
42 |         
43 | 
44 | 
45 |     </div>
46 | 
47 | 
48 | 
49 | </template>
50 | 
51 | <script>
52 |     import vPageTitle from '../common/pageTitle.vue';
53 |     import inlineForm from '../forms/inlineForm.vue';
54 |     import rightLayoutForm from '../forms/rightLayoutForm.vue';
55 |     import leftLayoutForm from '../forms/leftLayoutForm.vue';
56 |     import topLayoutForm from '../forms/topLayoutForm.vue';
57 |    
58 |    
59 |     export default {
60 |         components:{
61 |             vPageTitle,inlineForm,rightLayoutForm,leftLayoutForm,topLayoutForm
62 |         },
63 |         methods: {      
64 |         }
65 |     }
66 | </script>
67 | 
68 | <style scoped>
69 |     .el-col{
70 |         margin-bottom:16px;
71 |     }
72 |     .box-card{
73 |         font-size:12px;
74 |     }
75 |     .box-card hr{
76 |         height:1px;
77 |         border:none;
78 |         border-top:1px  dashed #ccc;
79 |         margin-bottom:10px;
80 |         margin-top:6px;
81 |     }
82 |     .card-a{
83 |         height:300px;
84 |     }
85 |    
86 |     
87 |  
88 |     
89 | </style>


--------------------------------------------------------------------------------
/src/components/todoList/TodoList.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |    
 3 |       
 4 | <div>
 5 |      <input class="my-input" v-model="inputContent" placeholder="Take to do"  v-on:keyup.enter="onEnter"/>
 6 |      <ul class="todolist">
 7 |          <li v-for="list in listContents">
 8 |                {{list.content}}
 9 |           </li>
10 |       </ul>
11 | </div>
12 | 
13 | 
14 | </template>
15 | 
16 | <script>
17 |     import vPageTitle from '../common/pageTitle.vue';
18 |     
19 |     
20 | 
21 |    
22 |     export default {
23 |         components:{
24 |             vPageTitle
25 |         },
26 |         data(){
27 |             return{
28 |                 inputContent:'',
29 |                 listContents:[
30 |                     {content:'What do you think?',isDone:false},
31 |                     {content:'Have fun with blue admin',isDone:false},
32 |                     {content:'Write email to business cat',isDone:false},
33 |                     {content:'Get in touch with jspang team',isDone:false},
34 |                     {content:'Ei cum soleet appareat,ex est graeci medioc',isDone:false},
35 |                     {content:'Simaul erroribus ad usu',isDone:false},
36 |                     {content:'Vim an eius ocurreret abhorreant,id name a',isDone:false}
37 |                     
38 |                 ]
39 |             }
40 |         },
41 |         
42 |         methods: {
43 |             onEnter:function(){
44 |                 
45 |                 if(this.inputContent!=''){
46 |                  
47 |                     var listContent={content:this.inputContent,isDone:true};
48 |                     this.listContents.splice(0,0,listContent);
49 |                     this.inputContent='';
50 |                 }
51 |             }
52 |         }
53 |     }
54 | </script>
55 | 
56 | <style>
57 |     .el-col{
58 |         margin-bottom:16px;
59 |     }
60 |     .todolist{
61 |         margin-top:5px;
62 |         list-style:none;
63 |         border:1px solid #ccc;
64 |         border-radius:6px;
65 |     }
66 |     .todolist li{
67 |         transition:all 0.5s; 
68 |         -moz-transition:all 0.5s; 
69 |         -o-transition:all 0.5s; 
70 |         -webkit-transition:all 0.5s; 
71 |         line-height:20px;
72 |         padding:10px;
73 |         border-bottom:1px solid #ccc;
74 |         cursor:pointer;
75 |         border-left:5px solid #209e91;
76 |         text-align:left;
77 |     }
78 |     .todolist li:nth-child(2n){
79 |           border-left:5px solid #0e8174;
80 |     }
81 | 
82 |     .todolist li:hover{
83 |         border-left:30px solid #209e91;
84 |         background-color:#eee;
85 |     }
86 |     .my-input{
87 |         line-height:28px;
88 |         border:1px solid #ccc;
89 |         border-radius:6px;
90 |         width:98%;
91 |         padding:5px;
92 |     }
93 |     
94 |  
95 |     
96 | </style>


--------------------------------------------------------------------------------
/src/components/charts/radarChart.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="c-charts" >
 3 |         <IEcharts :option="radar"  ></IEcharts>
 4 |     </div>
 5 | 
 6 | 
 7 | 
 8 | </template>
 9 | 
10 | <script>
11 |     import vPageTitle from '../common/pageTitle.vue';
12 |     import IEcharts from 'vue-echarts-v3';
13 |     export default {
14 |         components:{
15 |             vPageTitle,IEcharts
16 |         },
17 |         data: () => ({
18 |             radar: {
19 |                     title: {
20 |                         text: ''
21 |                     },
22 |                    
23 |                     tooltip: {
24 |                          
25 |                     },
26 |                     legend: {
27 |                         data: ['预算分配', '实际开销']
28 |                     },
29 |                     radar: {
30 |                         // shape: 'circle',
31 |                         
32 |                         indicator: [
33 |                         { name: '销售', max: 6500},
34 |                         { name: '管理', max: 16000},
35 |                         { name: '信息技术', max: 30000},
36 |                         { name: '客服', max: 38000},
37 |                         { name: '研发', max: 52000},
38 |                         { name: '市场', max: 25000},
39 |                         { name: '测试', max: 25000}
40 |                         ]
41 |                     },
42 |                     series: [{
43 |                         name: '预算 vs 开销（Budget vs spending）',
44 |                         type: 'radar',
45 |                         areaStyle: {normal: {}},
46 |                         data : [
47 |                             {
48 |                                itemStyle:{normal:{ color:'rgba(87, 188, 218, 0.4)'}},
49 |                                 value : [4300, 10000, 28000, 35000, 50000, 19000,20000],
50 |                                 name : '预算分配'
51 |                             },
52 |                             {
53 |                                 itemStyle:{normal:{ color:'rgba(236, 119, 119, 0.7)'}},
54 |                                 value : [5000, 14000, 28000, 31000, 42000, 21000,16000],
55 |                                 name : '实际开销'
56 |                             }
57 |                         ]
58 |                     }]
59 |                 }
60 |             }),
61 | 
62 |             methods: {
63 |             
64 |                
65 |             }
66 |     }
67 | </script>
68 | 
69 | <style scoped>
70 |     .el-col{
71 |         margin-bottom:16px;
72 |     }
73 |     .material-icons{
74 |         font-size:80px;
75 |         color:#ddd;
76 |     }
77 |    
78 |     .cart-string{
79 |         height:100px;
80 |         padding-top:10px;
81 |         font-size:1.1rem;
82 |         
83 |     }
84 |     .c-charts{
85 |         height:400px;
86 |         width:100%;
87 |     }
88 |  
89 |     
90 | </style>


--------------------------------------------------------------------------------
/src/components/tables/condensedTable.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |    <el-table :data="tableData" style="width: 100%"   :row-class-name="tableRowClassName">
 3 |       <el-table-column prop="id"  label="ID"  width="80"></el-table-column>
 4 |       <el-table-column prop="userName" label="NAME" width="180"></el-table-column>
 5 |       <el-table-column prop="age" label="AGE" width="80"> </el-table-column>
 6 |       <el-table-column prop="ability" label="ABILITY"> </el-table-column>
 7 |       <el-table-column prop="value" label="VALUE" align="right"> </el-table-column>
 8 |     </el-table>
 9 | </template>
10 | 
11 | 
12 | <style>
13 | 
14 |   .el-table .condensed-row1{
15 |        background-color: #62bbb1;
16 |   }
17 |   .el-table .condensed-row2{
18 |        background-color: #b1ce4c;
19 |   }
20 |   .el-table .condensed-row3{
21 |        background-color: #e8cd5f;
22 |   }
23 |   .el-table .condensed-row4{
24 |        background-color: #ef8888;
25 |   }
26 |   
27 | </style>
28 | 
29 | <script>
30 |     export default {
31 |       methods: {
32 |           tableRowClassName(row, index) {
33 |             if (index == 0) {
34 |               return 'condensed-row1';
35 |             } else if (index == 1 || index == 4) {
36 |               return 'condensed-row2';
37 |             }else if (index == 2 || index == 5) {
38 |               return 'condensed-row3';
39 |             }else if (index == 3 || index == 6) {
40 |               return 'condensed-row4';
41 |             }
42 |             
43 |             return '';
44 |           }
45 |         },
46 |       data() {
47 |         return {
48 |           tableData: [{
49 |             id:1,
50 |             userName: 'JSpang',
51 |             age: '30',
52 |             ability: 'Web,HTML5,PHP',
53 |             value:'80%'
54 |           }, {
55 |             id:2,
56 |             userName: 'King',
57 |             age: '28',
58 |             ability: 'Web,PHP',
59 |             value:'70%'
60 |           }, {
61 |             id:3,
62 |             userName: 'Panda',
63 |             age: '30',
64 |             ability: 'PHP,MySql',
65 |             value:'60%'
66 |           }, {
67 |             id:4,
68 |             userName: 'HaiPu',
69 |             age: '35',
70 |             ability: 'Web,HTML5,PHP,DB',
71 |             value:'80%'
72 |           }, {
73 |             id:2,
74 |             userName: 'King',
75 |             age: '28',
76 |             ability: 'Web,PHP',
77 |             value:'70%'
78 |           }, {
79 |             id:3,
80 |             userName: 'Panda',
81 |             age: '30',
82 |             ability: 'PHP,MySql',
83 |             value:'60%'
84 |           }, {
85 |             id:4,
86 |             userName: 'HaiPu',
87 |             age: '35',
88 |             ability: 'Web,HTML5,PHP,DB',
89 |             value:'80%'
90 |           }]
91 |         }
92 |       }
93 |     }
94 | </script>
95 | 
96 | 


--------------------------------------------------------------------------------
/src/components/common/Sidebar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="sidebar">
 3 |         <el-menu :default-active="onRoutes" class="el-menu-vertical-demo" theme="dark" unique-opened router>
 4 |             <el-menu-item index="DashBoard">
 5 |                
 6 |                     <span class="sb-icon"><i class="material-icons">home</i></span>
 7 |                     <span class="sb-cn">DashBoard</span>
 8 |             </el-menu-item>
 9 | 
10 |             <el-submenu index="2">
11 |                 <template slot="title">
12 |                
13 |                     <span class="sb-icon"><i class="material-icons">perm_data_setting</i></span>
14 |                     <span class="sb-cn">Components</span>
15 |                  
16 |                 </template>
17 |                 <el-menu-item index="EditorPage">Editor</el-menu-item>
18 |                 <el-menu-item index="MarkdownPage">Markdown</el-menu-item>
19 |                 <el-menu-item index="TodoList">TodoList</el-menu-item>
20 |                      
21 |                 
22 |             </el-submenu>
23 | 
24 |             <el-submenu index="3">
25 |                 <template slot="title">
26 |                     <span class="sb-icon"><i class="material-icons">pie_chart</i></span>
27 |                     <span class="sb-cn">charts</span>
28 |                 </template>
29 |                 <el-menu-item index="BasicCharts"> BasicCharts</el-menu-item>
30 |             </el-submenu>
31 | 
32 |             <el-submenu index="4">
33 |                 <template slot="title">
34 |                     <span class="sb-icon"><i class="material-icons">content_paste</i></span>
35 |                     <span class="sb-cn">Form Elements</span>
36 |                 </template>
37 |                 <el-menu-item index="FormInput"> Form Inputs</el-menu-item>
38 |                 <el-menu-item index="FormLayouts">  Form Layouts</el-menu-item>
39 |             </el-submenu>
40 | 
41 |              <el-submenu index="5">
42 |                 <template slot="title">
43 |                     <span class="sb-icon"><i class="material-icons">border_all</i></span>
44 |                     <span class="sb-cn">Tables</span>
45 |                 </template>
46 |                 <el-menu-item index="BasicTables"> Basic Tables</el-menu-item>
47 |                 
48 |             </el-submenu>
49 | 
50 | 
51 |  
52 | 
53 |  
54 |             
55 |         </el-menu>
56 |     </div>
57 | </template>
58 | <script>
59 |     export default {
60 |         computed:{
61 |             onRoutes(){
62 |                 return this.$route.path.replace('/','');
63 |             }
64 |         }
65 |     }
66 | </script>
67 | <style scoped>
68 |     .sidebar{
69 |         display: block;
70 |         position: absolute;
71 |         width: 200px;
72 |         left: 0;
73 |         top: 66px;
74 |         bottom:0;
75 |         background: #324157;
76 |        
77 |     }
78 |     .sidebar > ul {
79 |         height:100%;
80 |     }
81 | 
82 |    .el-menu-item, .el-submenu__title{
83 |        font-size:14px;
84 |      
85 |    }
86 |    
87 |     .material-icons {font-size:12px;}
88 | </style>
89 | 


--------------------------------------------------------------------------------
/src/components/common/sidebar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="sidebar">
 3 |         <el-menu :default-active="onRoutes" class="el-menu-vertical-demo" theme="dark" unique-opened router>
 4 |             <el-menu-item index="DashBoard">
 5 |                
 6 |                     <span class="sb-icon"><i class="material-icons">home</i></span>
 7 |                     <span class="sb-cn">DashBoard</span>
 8 |             </el-menu-item>
 9 | 
10 |             <el-submenu index="2">
11 |                 <template slot="title">
12 |                
13 |                     <span class="sb-icon"><i class="material-icons">perm_data_setting</i></span>
14 |                     <span class="sb-cn">Components</span>
15 |                  
16 |                 </template>
17 |                 <el-menu-item index="EditorPage">Editor</el-menu-item>
18 |                 <el-menu-item index="MarkdownPage">Markdown</el-menu-item>
19 |                 <el-menu-item index="TodoList">TodoList</el-menu-item>
20 |                      
21 |                 
22 |             </el-submenu>
23 | 
24 |             <el-submenu index="3">
25 |                 <template slot="title">
26 |                     <span class="sb-icon"><i class="material-icons">pie_chart</i></span>
27 |                     <span class="sb-cn">charts</span>
28 |                 </template>
29 |                 <el-menu-item index="BasicCharts"> BasicCharts</el-menu-item>
30 |             </el-submenu>
31 | 
32 |             <el-submenu index="4">
33 |                 <template slot="title">
34 |                     <span class="sb-icon"><i class="material-icons">content_paste</i></span>
35 |                     <span class="sb-cn">Form Elements</span>
36 |                 </template>
37 |                 <el-menu-item index="FormInput"> Form Inputs</el-menu-item>
38 |                 <el-menu-item index="FormLayouts">  Form Layouts</el-menu-item>
39 |             </el-submenu>
40 | 
41 |              <el-submenu index="5">
42 |                 <template slot="title">
43 |                     <span class="sb-icon"><i class="material-icons">border_all</i></span>
44 |                     <span class="sb-cn">Tables</span>
45 |                 </template>
46 |                 <el-menu-item index="BasicTables"> Basic Tables</el-menu-item>
47 |                 
48 |             </el-submenu>
49 | 
50 | 
51 |  
52 | 
53 |  
54 |             
55 |         </el-menu>
56 |     </div>
57 | </template>
58 | <script>
59 |     export default {
60 |         computed:{
61 |             onRoutes(){
62 |                 return this.$route.path.replace('/','');
63 |             }
64 |         }
65 |     }
66 | </script>
67 | <style scoped>
68 |     .sidebar{
69 |         display: block;
70 |         position: absolute;
71 |         width: 200px;
72 |         left: 0;
73 |         top: 66px;
74 |         bottom:0;
75 |         background: #324157;
76 |        
77 |     }
78 |     .sidebar > ul {
79 |         height:100%;
80 |     }
81 | 
82 |    .el-menu-item, .el-submenu__title{
83 |        font-size:14px;
84 |      
85 |    }
86 |    
87 |     .material-icons {font-size:12px;}
88 | </style>
89 | 


--------------------------------------------------------------------------------
/src/components/page/BasicTables.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div >
  3 |         <v-pageTitle vtitle="BasicTables"></v-pageTitle>
  4 | 
  5 | 
  6 |          <el-row :gutter="20">
  7 |             <el-col :xs="24" :sm="24" :md="12" :lg="12">
  8 |                 <el-card class="box-card">
  9 |                    HOVER ROWS
 10 |                    <hr>
 11 |                    <hoverRow></hoverRow>
 12 |                 </el-card>
 13 |             </el-col>
 14 |              <el-col :xs="24" :sm="24" :md="12" :lg="12">
 15 |                 <el-card class="box-card">
 16 |                    STRIPED  ROWS
 17 |                    <hr>
 18 |                    <stripedRow></stripedRow>
 19 |                 </el-card>
 20 |             </el-col>
 21 |             
 22 |             
 23 |         </el-row>
 24 | 
 25 | 
 26 |         <el-row :gutter="20">
 27 |             <el-col :xs="24" :sm="24" :md="12" :lg="12">
 28 |                 <el-card class="box-card">
 29 |                   BORDERED TABLE
 30 |                    <hr>
 31 |                    <borderTable></borderTable>
 32 |                 </el-card>
 33 |             </el-col>
 34 | 
 35 | 
 36 |              <el-col :xs="24" :sm="24" :md="12" :lg="12">
 37 |                 <el-card class="box-card">
 38 |                   CONDENSED TABLE
 39 |                    <hr>
 40 |                    <condensedTable></condensedTable>
 41 |                 </el-card>
 42 |             </el-col>
 43 |              
 44 |             
 45 |             
 46 |         </el-row>
 47 | 
 48 |         
 49 |         <el-row :gutter="20">
 50 |             <el-col :xs="24" :sm="24" :md="12" :lg="12">
 51 |                 <el-card class="box-card">
 52 |                   FIXED HEADER TABLE
 53 |                    <hr>
 54 |                    <fixedHeaderTable></fixedHeaderTable>
 55 |                 </el-card>
 56 |             </el-col>
 57 | 
 58 | 
 59 |              <el-col :xs="24" :sm="24" :md="12" :lg="12">
 60 |                 <el-card class="box-card">
 61 |                   FIXED COLUMN TABLE
 62 |                    <hr>
 63 |                    <fixedColumnTable></fixedColumnTable>
 64 |                 </el-card>
 65 |             </el-col>
 66 |              
 67 |             
 68 |             
 69 |         </el-row>
 70 | 
 71 | 
 72 |         
 73 | 
 74 | 
 75 |     </div>
 76 | 
 77 | 
 78 | 
 79 | </template>
 80 | 
 81 | <script>
 82 |     import vPageTitle from '../common/pageTitle.vue';
 83 |     import hoverRow from '../tables/hoverRow.vue';
 84 |     import stripedRow from '../tables/stripedRow.vue';
 85 |     import borderTable from '../tables/borderTable.vue';
 86 |     import condensedTable from '../tables/condensedTable.vue';
 87 |     import fixedHeaderTable from '../tables/fixedHeaderTable.vue';
 88 |     import fixedColumnTable from '../tables/fixedColumnTable.vue';
 89 |     
 90 |    
 91 |     export default {
 92 |         components:{
 93 |             vPageTitle,hoverRow,stripedRow,borderTable,condensedTable,fixedHeaderTable,fixedColumnTable
 94 |         },
 95 |         methods: {      
 96 |         }
 97 |     }
 98 | </script>
 99 | 
100 | <style scoped>
101 |     .el-col{
102 |         margin-bottom:16px;
103 |     }
104 |     .box-card{
105 |         font-size:12px;
106 |     }
107 |     .box-card hr{
108 |         height:1px;
109 |         border:none;
110 |         border-top:1px  dashed #ccc;
111 |         margin-bottom:10px;
112 |         margin-top:6px;
113 |     }
114 | 
115 | 
116 |     
117 |  
118 |     
119 | </style>


--------------------------------------------------------------------------------
/src/components/charts/pieChart.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="c-charts" >
  3 |         <IEcharts :option="pie"  ></IEcharts>
  4 |     </div>
  5 | 
  6 | 
  7 | 
  8 | </template>
  9 | 
 10 | <script>
 11 |     import vPageTitle from '../common/pageTitle.vue';
 12 |     import IEcharts from 'vue-echarts-v3';
 13 |     export default {
 14 |         components:{
 15 |             vPageTitle,IEcharts
 16 |         },
 17 |         data: () => ({
 18 |             pie:{
 19 |                 tooltip: {
 20 |                     trigger: 'item',
 21 |                     formatter: "{a} <br/>{b}: {c} ({d}%)"
 22 |                 },
 23 |                 legend: {
 24 |                     orient: 'vertical',
 25 |                     x: 'left',
 26 |                     data:['直达','营销广告','搜索引擎','邮件营销','联盟广告','视频广告','百度','谷歌','必应','其他']
 27 |                 },
 28 |                 series: [
 29 |                     {
 30 |                         name:'访问来源',
 31 |                         type:'pie',
 32 |                         selectedMode: 'single',
 33 |                         radius: [0, '50%'],
 34 | 
 35 |                         label: {
 36 |                             normal: {
 37 |                                 position: 'inner'
 38 |                             }
 39 |                         },
 40 |                         labelLine: {
 41 |                             normal: {
 42 |                                 show: false
 43 |                             }
 44 |                         },
 45 |                         data:[
 46 |                             {value:335,name:'直达',selected:true,itemStyle:{normal:{color:'#4cb1a7'}}},
 47 |                             {value:679,
 48 |                              name:'营销广告',
 49 |                              itemStyle:{
 50 |                                  normal:{
 51 |                                  color:'#ec7777'
 52 |                                  }
 53 |                              }
 54 |                              },
 55 |                             {value:1548,
 56 |                              name:'搜索引擎',
 57 |                              itemStyle:{
 58 |                                  normal:{
 59 |                                  color:'#e5c649'
 60 |                                  }
 61 |                                 }
 62 |                              }
 63 |                         ]
 64 |                     },
 65 |                     {
 66 |                         name:'访问来源',
 67 |                         type:'pie',
 68 |                         radius: ['60%', '90%'],
 69 | 
 70 |                         data:[
 71 |                             {value:335, name:'直达',itemStyle:{normal:{color:'#4cb1a7'}}},
 72 |                             {value:310, name:'邮件营销',itemStyle:{normal:{color:'#ec7777'}}},
 73 |                             {value:234, name:'联盟广告',itemStyle:{normal:{color:'#e5c649'}}},
 74 |                             {value:135, name:'视频广告',itemStyle:{normal:{color:'#a6c733'}}},
 75 |                             {value:1048, name:'百度',itemStyle:{normal:{color:'#57bcda'}}},
 76 |                             {value:251, name:'谷歌',itemStyle:{normal:{color:'#489e95'}}},
 77 |                             {value:147, name:'必应',itemStyle:{normal:{color:'#ecd77f'}}},
 78 |                             {value:102, name:'其他',itemStyle:{normal:{color:'#94b033'}}}
 79 |                         ]
 80 |                     }
 81 |                 ]
 82 |             }
 83 |             }),
 84 | 
 85 |             methods: {
 86 |             
 87 |                
 88 |             }
 89 |     }
 90 | </script>
 91 | 
 92 | <style scoped>
 93 |     .el-col{
 94 |         margin-bottom:16px;
 95 |     }
 96 |     .material-icons{
 97 |         font-size:80px;
 98 |         color:#ddd;
 99 |     }
100 |    
101 |     .cart-string{
102 |         height:100px;
103 |         padding-top:10px;
104 |         font-size:1.1rem;
105 |         
106 |     }
107 |     .c-charts{
108 |         height:400px;
109 |         width:100%;
110 |     }
111 |     
112 | </style>


--------------------------------------------------------------------------------
/src/components/charts/funnelChart.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="c-charts" >
  3 |         <IEcharts :option="funnel"  ></IEcharts>
  4 |     </div>
  5 | 
  6 | 
  7 | 
  8 | </template>
  9 | 
 10 | <script>
 11 |     import vPageTitle from '../common/pageTitle.vue';
 12 |     import IEcharts from 'vue-echarts-v3';
 13 |     export default {
 14 |         components:{
 15 |             vPageTitle,IEcharts
 16 |         },
 17 |         data: () => ({
 18 |             funnel:{
 19 |                     title: {
 20 |                         text: '',
 21 |                       
 22 |                     },
 23 |                     tooltip: {
 24 |                         trigger: 'item',
 25 |                         formatter: "{a} <br/>{b} : {c}%"
 26 |                     },
 27 |                     toolbox: {
 28 |                         feature: {
 29 |                            
 30 |                         }
 31 |                     },
 32 |                     legend: {
 33 |                         orient: 'vertical',
 34 |                          x: 'left',
 35 |                         data: ['展现','点击','访问','咨询','订单']
 36 |                     },
 37 |                     calculable: true,
 38 |                     series: [
 39 |                         {
 40 |                             name:'漏斗图',
 41 |                             type:'funnel',
 42 |                             left: '20%',
 43 |                             top: 70,
 44 |                             //x2: 80,
 45 |                             bottom: 30,
 46 |                             width: '70%',
 47 |                             // height: {totalHeight} - y - y2,
 48 |                             min: 0,
 49 |                             max: 100,
 50 |                             minSize: '0%',
 51 |                             maxSize: '100%',
 52 |                             sort: 'descending',
 53 |                             gap: 2,
 54 |                             label: {
 55 |                                 normal: {
 56 |                                     show: true,
 57 |                                     position: 'inside'
 58 |                                 },
 59 |                                 emphasis: {
 60 |                                     textStyle: {
 61 |                                         fontSize: 20
 62 |                                     }
 63 |                                 }
 64 |                             },
 65 |                             labelLine: {
 66 |                                 normal: {
 67 |                                     length: 10,
 68 |                                     lineStyle: {
 69 |                                         width: 1,
 70 |                                         type: 'solid'
 71 |                                     }
 72 |                                 }
 73 |                             },
 74 |                             itemStyle: {
 75 |                                 normal: {
 76 |                                     borderColor: '#fff',
 77 |                                     borderWidth: 1
 78 |                                 }
 79 |                             },
 80 |                             data: [
 81 |                                 {value: 60, name: '访问',itemStyle:{normal:{color:'#4cb1a7'}}},
 82 |                                 {value: 40, name: '咨询',itemStyle:{normal:{color:'#57bcda'}}},
 83 |                                 {value: 20, name: '订单',itemStyle:{normal:{color:'#e5c649'}}},
 84 |                                 {value: 80, name: '点击',itemStyle:{normal:{color:'#ec7777'}}},
 85 |                                 {value: 100, name: '展现',itemStyle:{normal:{color:'#489e95'}}}
 86 |                             ]
 87 |                         }
 88 |                     ]
 89 |                 }
 90 |             }),
 91 | 
 92 |             methods: {
 93 |             
 94 |                
 95 |             }
 96 |     }
 97 | </script>
 98 | 
 99 | <style scoped>
100 |     .el-col{
101 |         margin-bottom:16px;
102 |     }
103 |     .material-icons{
104 |         font-size:80px;
105 |         color:#ddd;
106 |     }
107 |    
108 |     .cart-string{
109 |         height:100px;
110 |         padding-top:10px;
111 |         font-size:1.1rem;
112 |         
113 |     }
114 |     .c-charts{
115 |         height:400px;
116 |         width:100%;
117 |     }
118 |  
119 |     
120 | </style>


--------------------------------------------------------------------------------
/src/components/charts/lineChart.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="c-charts" >
  3 |         <IEcharts :option="line"  ></IEcharts>
  4 |     </div>
  5 | 
  6 | 
  7 | 
  8 | </template>
  9 | 
 10 | <script>
 11 |     import vPageTitle from '../common/pageTitle.vue';
 12 |     import IEcharts from 'vue-echarts-v3';
 13 |     export default {
 14 |         components:{
 15 |             vPageTitle,IEcharts
 16 |         },
 17 |         data: () => ({
 18 |             line: {
 19 |                     title: {
 20 |                         text: ''
 21 |                     },
 22 |                     tooltip : {
 23 |                         trigger: 'axis'
 24 |                     },
 25 |                     legend: {
 26 |                         data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
 27 |                     },
 28 |                     
 29 |                     grid: {
 30 |                         left: '1%',
 31 |                         right: '3%',
 32 |                         bottom: '3%',
 33 |                         containLabel: true,
 34 |                         show:true
 35 |                     },
 36 |                     xAxis : [
 37 |                         {
 38 |                             type : 'category',
 39 |                             boundaryGap : false,
 40 |                             data : ['周一','周二','周三','周四','周五','周六','周日'],
 41 |                             axisLine:{lineStyle:{color:'#999'}},
 42 |                             splitLine:{show:true,lineStyle:{color:'#ddd'}}
 43 |                         }
 44 |                     ],
 45 |                     yAxis : [
 46 |                         {
 47 |                             type : 'value',
 48 |                             axisLine:{lineStyle:{color:'#999'}},
 49 |                             splitLine:{lineStyle:{color:'#ddd'}}
 50 | 
 51 |                         }
 52 |                     ],
 53 |                     series : [
 54 |                         {
 55 |                             itemStyle:{normal:{ color:'#96d6e8'}},
 56 |                             name:'邮件营销',
 57 |                             type:'line',
 58 |                             stack: '总量',
 59 |                             areaStyle: {normal: {}},
 60 |                             data:[120, 132, 101, 134, 90, 230, 210]
 61 |                         },
 62 |                         {
 63 |                             itemStyle:{normal:{ color:'#e6d385'}},
 64 |                             name:'联盟广告',
 65 |                             type:'line',
 66 |                             stack: '总量',
 67 |                             areaStyle: {normal: {}},
 68 |                             data:[220, 182, 191, 234, 290, 330, 310]
 69 |                         },
 70 |                         {
 71 |                             itemStyle:{normal:{ color:'#f4abab'}},
 72 |                             name:'视频广告',
 73 |                             type:'line',
 74 |                             stack: '总量',
 75 |                             areaStyle: {normal: {}},
 76 |                             data:[150, 232, 201, 154, 190, 330, 410]
 77 |                         },
 78 |                         {
 79 |                             itemStyle:{normal:{ color:'#a6c733'}},
 80 |                             name:'直接访问',
 81 |                             type:'line',
 82 |                             stack: '总量',
 83 |                             areaStyle: {normal: {}},
 84 |                             data:[320, 332, 301, 334, 390, 330, 320]
 85 |                         },
 86 |                         {
 87 |                             itemStyle:{normal:{ color:'#4cb1a7'}},
 88 |                             name:'搜索引擎',
 89 |                             type:'line',
 90 |                             stack: '总量',
 91 |                             label: {
 92 |                                 normal: {
 93 |                                     show: true,
 94 |                                     position: 'top'
 95 |                                 }
 96 |                             },
 97 |                             areaStyle: {normal: {}},
 98 |                             data:[820, 932, 901, 934, 1290, 1330, 1320]
 99 |                         }
100 |                     ]
101 |                 }  
102 |             }),
103 | 
104 |             methods: {
105 |             
106 |                
107 |             }
108 |     }
109 | </script>
110 | 
111 | <style scoped>
112 |     .el-col{
113 |         margin-bottom:16px;
114 |     }
115 |     .material-icons{
116 |         font-size:80px;
117 |         color:#ddd;
118 |     }
119 |    
120 |     .cart-string{
121 |         height:100px;
122 |         padding-top:10px;
123 |         font-size:1.1rem;
124 |         
125 |     }
126 |     .c-charts{
127 |         height:400px;
128 |         width:100%;
129 |     }
130 |  
131 |     
132 | </style>


--------------------------------------------------------------------------------
/src/components/charts/barChart.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="c-charts" >
  3 |         <IEcharts :option="bar"  ></IEcharts>
  4 |     </div>
  5 | 
  6 | 
  7 | 
  8 | </template>
  9 | 
 10 | <script>
 11 |     import vPageTitle from '../common/pageTitle.vue';
 12 |     import IEcharts from 'vue-echarts-v3';
 13 |     export default {
 14 |         components:{
 15 |             vPageTitle,IEcharts
 16 |         },
 17 |         data: () => ({
 18 |             bar: {
 19 |                 tooltip : {
 20 |                     trigger: 'axis',
 21 |                     axisPointer : {            // 坐标轴指示器，坐标轴触发有效
 22 |                         type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
 23 |                     }
 24 |                 },
 25 |                 legend: {
 26 |                     data: ['直接访问','联盟广告','视频广告','搜索引擎']
 27 |                 },
 28 |                 grid: {
 29 |                     x:'10%',
 30 |                     y:'10%',
 31 |                     width:'85%',
 32 |                     show:true,
 33 |                   
 34 |                 },
 35 |                 xAxis:  {
 36 |                     type: 'value',
 37 |                     axisLine:{
 38 |                         lineStyle:{
 39 |                             color:'#999'
 40 |                         }
 41 |                     },
 42 |                     splitLine:{
 43 |                         lineStyle:{
 44 |                             color:'#ddd'
 45 |                         }
 46 |                     }
 47 |                    
 48 |                 },
 49 |                 yAxis: {
 50 |                     type: 'category',
 51 |                     data: ['周一','周二','周三','周四','周五','周六','周日'],
 52 |                      axisLine:{
 53 |                         lineStyle:{
 54 |                             color:'#999'
 55 |                         }
 56 |                     },
 57 |                     splitLine:{
 58 |                         show:true, 
 59 |                         lineStyle:{
 60 |                             color:'#ddd'
 61 |                         }
 62 |                     }
 63 |                     
 64 |                 },
 65 |                 series: [
 66 |                     {
 67 |                         itemStyle:{
 68 |                             normal:{
 69 |                                 color:'#63bbb2',
 70 |                                 opacity:0.9
 71 |                             }
 72 |                         },
 73 |                         
 74 |                         
 75 |                         name: '直接访问',
 76 |                         type: 'bar',
 77 |                         stack: '总量',
 78 |                         label: {
 79 |                             normal: {
 80 |                                 show: true,
 81 |                                 position: 'insideRight'
 82 |                             }
 83 |                         },
 84 |                         data: [320, 302, 301, 334, 390, 330, 320]
 85 |                     },
 86 |                    
 87 |                     {
 88 |                         itemStyle:{
 89 |                             normal:{
 90 |                                 color:'#ef8989',
 91 |                                 opacity:0.9
 92 |                             }
 93 |                         },
 94 |                         name: '联盟广告',
 95 |                         type: 'bar',
 96 |                         stack: '总量',
 97 |                         label: {
 98 |                             normal: {
 99 |                                 show: true,
100 |                                 position: 'insideRight'
101 |                             }
102 |                         },
103 |                         data: [220, 182, 191, 234, 290, 330, 310]
104 |                     },
105 |                     {
106 |                         itemStyle:{
107 |                             normal:{
108 |                                 color:'#6cc5df',
109 |                                 opacity:0.9
110 |                             }
111 |                         },
112 |                         name: '视频广告',
113 |                         type: 'bar',
114 |                         stack: '总量',
115 |                         label: {
116 |                             normal: {
117 |                                 show: true,
118 |                                 position: 'insideRight'
119 |                             }
120 |                         },
121 |                         data: [530, 600, 301, 554, 490, 330, 710]
122 |                     },
123 |                     {
124 |                         itemStyle:{
125 |                             normal:{
126 |                                 color:'#b1ce4d',
127 |                                 opacity:0.9
128 |                             }
129 |                         },
130 |                         name: '搜索引擎',
131 |                         type: 'bar',
132 |                         stack: '总量',
133 |                         label: {
134 |                             normal: {
135 |                                 show: true,
136 |                                 position: 'insideRight'
137 |                             }
138 |                         },
139 |                         data: [820, 832, 901, 934, 1290, 1330, 1320]
140 |                     }
141 |                 ]
142 |             }
143 |             }),
144 | 
145 |             methods: {
146 |             
147 |                
148 |             }
149 |     }
150 | </script>
151 | 
152 | <style scoped>
153 |     .el-col{
154 |         margin-bottom:16px;
155 |     }
156 |     .material-icons{
157 |         font-size:80px;
158 |         color:#ddd;
159 |     }
160 |    
161 |     .cart-string{
162 |         height:100px;
163 |         padding-top:10px;
164 |         font-size:1.1rem;
165 |         
166 |     }
167 |     .c-charts{
168 |         height:400px;
169 |         width:100%;
170 |     }
171 |  
172 |     
173 | </style>


--------------------------------------------------------------------------------
/src/components/page/DashBoard.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div >
  3 |         <v-pageTitle vtitle="DashBoard"></v-pageTitle>
  4 | 
  5 |         <div class="clear"></div>
  6 | 
  7 |         <el-row :gutter="20">
  8 | 
  9 |             <el-col :xs="12" :sm="12" :md="12" :lg="6">
 10 |                 <el-card class="box-card">
 11 |                    <el-row :gutter="6">
 12 |                     <el-col :xs="24" :sm="8" :md="8" :lg="8">
 13 |                         <el-progress type="circle" :percentage="67" :width="80"></el-progress>
 14 |                     </el-col>
 15 |                     <el-col :xs="24" :sm="11" :md="12" :lg="12">
 16 |                         <div class="cart-string"> 
 17 |                         <span>New Visits</span>
 18 |                         <span><h2>57,820</h2></span>
 19 |                         </div>
 20 |                     </el-col>
 21 |                     <el-col :xs="24" :sm="5" :md="4" :lg="4">
 22 |                         <div>
 23 |                             <i class="material-icons">person_outline</i>
 24 |                         </div>
 25 |                     </el-col>
 26 |                    </el-row>
 27 |                 </el-card>
 28 |             </el-col>
 29 | 
 30 |             <el-col :xs="12" :sm="12" :md="12" :lg="6">
 31 |                 <el-card class="box-card">
 32 |                    <el-row :gutter="6">
 33 |                     <el-col :xs="24" :sm="8" :md="8" :lg="8">
 34 |                         <div> <el-progress type="circle" :percentage="81" :width="80"></el-progress></div>
 35 |                     </el-col>
 36 |                     <el-col :xs="24" :sm="11" :md="12" :lg="12">
 37 |                         <div class="cart-string"> 
 38 |                         <span>Purchases</span>
 39 |                         <span><h2>$1,680</h2></span>
 40 |                         </div>
 41 |                     </el-col>
 42 |                     <el-col :xs="24" :sm="5" :md="4" :lg="4">
 43 |                         <div>
 44 |                             <i class="material-icons">attach_money</i>
 45 |                         </div>
 46 |                     </el-col>
 47 |                    </el-row>
 48 |                 </el-card>
 49 |             </el-col>
 50 | 
 51 |             <el-col :xs="12" :sm="12" :md="12" :lg="6">
 52 |                 <el-card class="box-card">
 53 |                    <el-row :gutter="6">
 54 |                     <el-col :xs="24" :sm="8" :md="8" :lg="8">
 55 |                         <div> <el-progress type="circle" :percentage="30" :width="80"></el-progress></div>
 56 |                     </el-col>
 57 |                     <el-col :xs="24" :sm="11" :md="12" :lg="12">
 58 |                         <div class="cart-string"> 
 59 |                         <span>Active Users</span>
 60 |                         <span><h2>157,820</h2></span>
 61 |                         </div>
 62 |                     </el-col>
 63 |                     <el-col :xs="24" :sm="5" :md="4" :lg="4">
 64 |                         <div>
 65 |                             <i class="material-icons">touch_app</i>
 66 |                         </div>
 67 |                     </el-col>
 68 |                    </el-row>
 69 |                 </el-card>
 70 |             </el-col>
 71 | 
 72 | 
 73 |             <el-col :xs="12" :sm="12" :md="12" :lg="6">
 74 |                 <el-card class="box-card">
 75 |                    <el-row :gutter="6">
 76 |                     <el-col :xs="24" :sm="8" :md="8" :lg="8">
 77 |                         <div> <el-progress type="circle" :percentage="88" :width="80"></el-progress></div>
 78 |                     </el-col>
 79 |                     <el-col :xs="24" :sm="11" :md="12" :lg="12">
 80 |                         <div class="cart-string"> 
 81 |                         <span>Returned</span>
 82 |                         <span><h2>32,645</h2></span>
 83 |                         </div>
 84 |                     </el-col>
 85 |                     <el-col :xs="24" :sm="5" :md="4" :lg="4">
 86 |                         <div>
 87 |                             <i class="material-icons">replay</i>
 88 |                         </div>
 89 |                     </el-col>
 90 |                    </el-row>
 91 |                 </el-card>
 92 |             </el-col>
 93 |         </el-row>
 94 | 
 95 | 
 96 | 
 97 |         <el-row :gutter="20">
 98 |             <el-col :xs="24" :sm="24" :md="24" :lg="12">
 99 |                 <el-card class="box-chart">
100 |                     <pieChart></pieChart>
101 |                 </el-card>
102 |             </el-col>
103 |             <el-col :xs="24" :sm="24" :md="24" :lg="12">
104 |                 <el-card class="box-chart">
105 |                     <lineChart></lineChart>
106 |                 </el-card>
107 |             </el-col>
108 |             
109 |         </el-row>
110 | 
111 | 
112 | 
113 |         <!--todoList  & mail & table-->
114 |         <el-row :gutter="20">
115 |             <el-col :xs="24" :sm="24" :md="24" :lg="8">
116 |                 <el-card class="box-list">
117 |                     To Do List<hr>
118 |                     <TodoList></TodoList>
119 |                 </el-card>
120 |             </el-col>
121 |             <el-col :xs="24" :sm="24" :md="24" :lg="10">
122 |                 <el-card class="box-list">
123 |                      BORDERED TABLE
124 |                    <hr>
125 |                    <borderTable></borderTable>
126 |                 </el-card>
127 |             </el-col>
128 | 
129 |             <el-col :xs="24" :sm="24" :md="24" :lg="6">
130 |                 <el-card class="box-list">
131 |                      Message List
132 |                    <hr>
133 |                    <MessageList></MessageList>
134 |                 </el-card>
135 |             </el-col>
136 |             
137 |         </el-row>
138 | 
139 |     </div>
140 | 
141 | 
142 | 
143 | </template>
144 | 
145 | <script>
146 |     import vPageTitle from '../common/pageTitle.vue';
147 |     import barChart from '../charts/barChart.vue';
148 |     import pieChart from '../charts/pieChart.vue';
149 |     import lineChart from '../charts/lineChart.vue';
150 |     import radarChart from '../charts/radarChart.vue';
151 |     import funnelChart from '../charts/funnelChart.vue';
152 |     import TodoList from '../todoList/TodoList.vue';
153 |     import borderTable from '../tables/borderTable.vue';
154 |     import MessageList from '../message/MessageList.vue';
155 |     export default {
156 |         data(){
157 |            return{
158 |               //percentage:10
159 |            }
160 |         },
161 |         components:{
162 |             vPageTitle,barChart,pieChart,lineChart,radarChart,funnelChart,TodoList,borderTable,MessageList
163 |         }
164 |     }
165 | </script>
166 | 
167 | <style scoped>
168 |     .el-col{
169 |         margin-bottom:16px;
170 |         text-align:center;
171 |     }
172 |     .material-icons{
173 |         font-size:80px;
174 |         color:#ddd;
175 |     }
176 |     .box-card{
177 |         height:110px;
178 |     } 
179 |     .cart-string{
180 |         height:100px;
181 |         padding-top:10px;
182 |         font-size:1.1rem;
183 |         
184 |     }
185 |     .box-chart{
186 |         height:420px;
187 |     }
188 |     .box-list{
189 |         height:auto;
190 |         text-align:left;
191 |     }
192 |     .box-list hr{
193 |         height:1px;
194 |         border:none;
195 |         border-top:1px  dashed #ccc;
196 |         margin-bottom:5px;
197 |         margin-top:6px;
198 | 
199 |     }
200 | </style>


--------------------------------------------------------------------------------
/src/components/common/Header.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="header">
  3 |         <el-row :gutter="10">
  4 |             <!--Logo area-->
  5 |             <el-col :xs="12" :sm="12" :md="4">
  6 |                 <div class="logo">  
  7 |                     <span class="logo_prefix">JSPang</span><span class="logo_suffix">Admin</span>
  8 |                 </div>
  9 |             </el-col>
 10 | 
 11 |             <!--Search area-->    
 12 |             <el-col :xs="12" :sm="12" :md="8">
 13 |                 <div class="search">
 14 |                     <el-input
 15 |                         size="small"
 16 |                         placeholder="Search for...">
 17 |                         <el-button slot="append" icon="search"></el-button>
 18 |                     </el-input>
 19 |                 </div> 
 20 |             </el-col>
 21 |             <!-- header right area-->
 22 |             <el-col :xs="24" :sm="12" :md="4">
 23 |                 <div class="website">
 24 |                     <span>Website:</span>
 25 |                     <span>www.jspang.com</span>
 26 |                 </div>
 27 |             </el-col>
 28 |  
 29 | 
 30 |            <el-col :xs="8" :sm="8" :md="{span:2,offset: 4}" >
 31 |                 <div class="header-right">
 32 |                    <el-col :span="10">
 33 | 
 34 |                         <!--这是消息的下拉列表 用了element里的 dropdown组件-->                
 35 |                         <el-dropdown menu-align="start" >
 36 |                             <span>
 37 |                                 <el-badge :value="5" class="item">
 38 |                                     <i class="el-icon-message"></i>
 39 |                                 </el-badge>
 40 |                             </span>
 41 |                             <el-dropdown-menu slot="dropdown" >
 42 |                                 <el-dropdown-item >
 43 |                                 <span class="pop-title">You have new messages! </span>
 44 |                                 </el-dropdown-item>
 45 | 
 46 |                                 <el-dropdown-item  v-for="dialog in dialogs" :key="dialog.time" divided>
 47 |                                     <div class="pop-div">
 48 |                                         <span class="pop-image">
 49 |                                             <img :src="dialog.header" width="50px" >
 50 |                                         </span>
 51 |                                         <span class="pop-content">
 52 |                                         {{dialog.content}}
 53 |                                         </span>
 54 |                                         <span class="pop-time">
 55 |                                             {{dialog.time}}分钟前
 56 |                                         </span>
 57 |                                     </div>
 58 |                                 </el-dropdown-item>
 59 |                             </el-dropdown-menu>
 60 |                         </el-dropdown>
 61 |                      </el-col>    
 62 |                     <el-col :span="8">  
 63 |                         <el-dropdown menu-align="start"  >
 64 |                             <span >
 65 |                                 <el-badge :value="3" class="item">
 66 |                                     <i class="el-icon-date"></i>
 67 |                                 </el-badge>
 68 |                             </span>
 69 |                             <el-dropdown-menu slot="dropdown" >
 70 |                                 <el-dropdown-item >
 71 |                                 <span class="pop-title">You have new tasks! </span>
 72 |                                 </el-dropdown-item>
 73 |                                 <el-dropdown-item v-for="task in tasks" :key="task.id" divided>
 74 |                                     <div class="task-div">
 75 |                                         <span class="task-span task-tag">
 76 |                                         <el-tag type="danger" v-if="task.rank==1">紧急</el-tag>
 77 |                                         <el-tag type="warning" v-if="task.rank==2">重要</el-tag>
 78 |                                         <el-tag type="success" v-if="task.rank==3">正常</el-tag>
 79 |                                         </span>
 80 |                                         <span class="task-span task-content">
 81 |                                         {{task.content}}<br/>
 82 |                                         <span class="task-time">截止：{{task.overTime}}</span>
 83 |                                         </span>
 84 |                                         
 85 |                                         <span class="task-span task-btn"><el-button type="primary" size="mini">完成</el-button></span>
 86 |                                     </div>
 87 |                                 </el-dropdown-item>
 88 | 
 89 |                             </el-dropdown-menu>
 90 |                         </el-dropdown>
 91 |                      </el-col>   
 92 | 
 93 | 
 94 |                 </div>
 95 |             
 96 |          </el-col>
 97 | 
 98 | 
 99 |          <el-col :xs="8" :sm="8" :md="2" >
100 |             <div class="user-header">
101 |                 <el-dropdown trigger="click" menu-align="start">
102 |                     <img src="../../../static/images/b_header.jpg" width="50px" />
103 |                     <el-dropdown-menu slot="dropdown">
104 |                         <el-dropdown-item >
105 |                             <div class="setting-div">
106 |                                 <span class="setting-icon"><i class="material-icons">account_box</i></span> 
107 |                                 <span class="setting-string"> Profile  个人</span>
108 |                             </div>
109 |                         </el-dropdown-item>
110 |                         <el-dropdown-item divided>
111 |                             <div class="setting-div">
112 |                                 <span class="setting-icon"><i class="material-icons">settings</i></span> 
113 |                                 <span class="setting-string"> Settings  设置</span>
114 |                             </div>
115 |                          
116 |                         </el-dropdown-item>
117 |                         <el-dropdown-item divided>
118 |                             <div class="setting-div">
119 |                                 <span class="setting-icon"><i class="material-icons">assignment_return</i></span> 
120 |                                 <span class="setting-string"> Sign out  退出</span>
121 |                             </div>
122 |                             
123 |                         </el-dropdown-item>
124 |                         
125 |                     </el-dropdown-menu>
126 |                 </el-dropdown>
127 | 
128 | 
129 |             </div>
130 | 
131 | 
132 |          </el-col>
133 |         </el-row>
134 | 
135 | 
136 |       
137 | 
138 | 
139 |     </div>
140 |     
141 | 
142 | 
143 | 
144 | </template>
145 | 
146 | <script>
147 |     export default {
148 |         data() {
149 |             return {
150 |                 name: 'linxin',
151 |                 dialogs:[
152 |                     {header:'../../static/images/b_header2.jpg',content:'我有一个Style样式需要您帮忙处理以下。',time:'3'},
153 |                     {header:'../../static/images/b_header3.jpg',content:'中午一起吃个饭吧，我请客。',time:'15'},
154 |                     {header:'../../static/images/b_header.jpg',content:'需要处理一下POP展示的白边样式。',time:'18'},
155 |                     {header:'../../static/images/b_header2.jpg',content:'下午3点开需求会议，准时参加。',time:'24'},
156 |                     {header:'../../static/images/b_header3.jpg',content:'晚上我开车送你回家，你请我吃晚饭。',time:'45'},
157 |                 ],
158 |                 tasks:[
159 |                     {id:1,rank:1,content:'完成JSPangAdmin头部头部组件的编写。',overTime:'2017/3/9'},
160 |                     {id:2,rank:2,content:'完成GitHub仓库的初始化工作。',overTime:'2017/3/15'},
161 |                     {id:3,rank:3,content:'在阿里云进行网站备案，完成后通知组长。',overTime:'2017/3/20'}
162 |                     
163 |                 ]
164 |             }
165 |         },
166 |         methods:{
167 |             
168 |         }
169 |     }
170 | </script>
171 | <style scoped>
172 |     .header {
173 |         position: fixed;
174 |         box-sizing: border-box;
175 |         width: 100%;
176 |         height:66px;
177 |        
178 |         font-size: 14px;
179 |         line-height: 66px;
180 |         background-color:#324157;
181 |         box-shadow:2px 0 3px rgba(0,0,0,.5);
182 |         z-index:1000;
183 |         padding:0 32px 0 40px;
184 |         overflow:hidden;
185 |        
186 |     }
187 |     .header .logo{
188 |         float: left;
189 |         cursor:pointer;
190 |         font-size: 22px;
191 |     }
192 |     .logo_prefix{
193 |         color:#209e91;
194 |     }
195 |     .logo_suffix{
196 |         color:#fff;
197 |     }
198 |     .header .search{
199 |         float: left;
200 |         color:#fff;
201 |         font-size:14px;
202 |     }
203 |     .website span{
204 |         display:inline-block;
205 |         color:#209e91;
206 |     }
207 |     .website span:first-child{
208 |         color:#fff;
209 |     }
210 |     .header-right{
211 |         padding-top:25px;
212 |         line-height:10px;
213 |     }
214 |     .header-right span{
215 |         display:inline-block;
216 |         margin-left:14px;
217 |         font-size:18px;
218 |         color:#fff;
219 |         line-height:1px;
220 |         height:18px;
221 |         cursor:pointer;
222 | 
223 |     }
224 |     .header-right span:hover{
225 |         color:#209e91;
226 | 
227 |     }
228 |     .user-header{
229 |         line-height:10px;
230 |         padding-top:7px;
231 |         font-size:12px;
232 |     }
233 |     .user-header img{
234 |         border-radius:50%;
235 |         cursor:pointer;
236 |     }
237 |     .pop-image{
238 |         display:block;
239 |         float:left;
240 |     }
241 |     .pop-image img{
242 |         border-radius:50%;
243 |     }
244 |     .pop-div{
245 |         height:55px;
246 |         clear:both;
247 |     }
248 |     .pop-content{
249 |         display:block;
250 |         font-size:12px;
251 |         line-height:14px;
252 |         padding-top:15px;
253 |         margin-left:60px;
254 |     }
255 |     .pop-time{
256 |         display:block;
257 |         float:right;
258 |         font-size:10px;
259 |         color:#ccc;
260 | 
261 |     }
262 |     .pop-title{
263 |         font-size:12px;
264 |         color:#209e91;
265 |     }
266 |     .task-div{
267 |         clear:both;
268 |         height:55px;
269 |     }
270 |     .task-span{
271 |         display:block;
272 |         float:left;
273 |         font-size:12px
274 |     }
275 |     
276 |     .task-content{  
277 |         width:160px;
278 |         line-height:16px;
279 |         margin-left:10px;
280 |         padding:5px;
281 |     }
282 |     .task-time{
283 |         clear:both;
284 |         float:right;
285 |         color:#ccc;
286 |         
287 |     }
288 |     .setting-div{
289 |         height:30px;
290 |         line-height:30px;
291 |         clear:both;
292 |     }
293 |     .setting-div span{
294 |         display:block;
295 |         float:left;
296 |         font-size:12px;
297 |     }
298 |     .setting-icon{
299 |         padding-top:3px;
300 |         padding-right:3px;
301 |     }
302 |     
303 | 
304 | 
305 | </style>
306 | 


--------------------------------------------------------------------------------
/src/components/common/header.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="header">
  3 |         <el-row :gutter="10">
  4 |             <!--Logo area-->
  5 |             <el-col :xs="12" :sm="12" :md="4">
  6 |                 <div class="logo">  
  7 |                     <span class="logo_prefix">JSPang</span><span class="logo_suffix">Admin</span>
  8 |                 </div>
  9 |             </el-col>
 10 | 
 11 |             <!--Search area-->    
 12 |             <el-col :xs="12" :sm="12" :md="8">
 13 |                 <div class="search">
 14 |                     <el-input
 15 |                         size="small"
 16 |                         placeholder="Search for...">
 17 |                         <el-button slot="append" icon="search"></el-button>
 18 |                     </el-input>
 19 |                 </div> 
 20 |             </el-col>
 21 |             <!-- header right area-->
 22 |             <el-col :xs="24" :sm="12" :md="4">
 23 |                 <div class="website">
 24 |                     <span>Website:</span>
 25 |                     <span>www.jspang.com</span>
 26 |                 </div>
 27 |             </el-col>
 28 |  
 29 | 
 30 |            <el-col :xs="8" :sm="8" :md="{span:2,offset: 4}" >
 31 |                 <div class="header-right">
 32 |                    <el-col :span="10">
 33 | 
 34 |                         <!--这是消息的下拉列表 用了element里的 dropdown组件-->                
 35 |                         <el-dropdown menu-align="start" >
 36 |                             <span>
 37 |                                 <el-badge :value="5" class="item">
 38 |                                     <i class="el-icon-message"></i>
 39 |                                 </el-badge>
 40 |                             </span>
 41 |                             <el-dropdown-menu slot="dropdown" >
 42 |                                 <el-dropdown-item >
 43 |                                 <span class="pop-title">You have new messages! </span>
 44 |                                 </el-dropdown-item>
 45 | 
 46 |                                 <el-dropdown-item  v-for="dialog in dialogs" :key="dialog.time" divided>
 47 |                                     <div class="pop-div">
 48 |                                         <span class="pop-image">
 49 |                                             <img :src="dialog.header" width="50px" >
 50 |                                         </span>
 51 |                                         <span class="pop-content">
 52 |                                         {{dialog.content}}
 53 |                                         </span>
 54 |                                         <span class="pop-time">
 55 |                                             {{dialog.time}}分钟前
 56 |                                         </span>
 57 |                                     </div>
 58 |                                 </el-dropdown-item>
 59 |                             </el-dropdown-menu>
 60 |                         </el-dropdown>
 61 |                      </el-col>    
 62 |                     <el-col :span="8">  
 63 |                         <el-dropdown menu-align="start"  >
 64 |                             <span >
 65 |                                 <el-badge :value="3" class="item">
 66 |                                     <i class="el-icon-date"></i>
 67 |                                 </el-badge>
 68 |                             </span>
 69 |                             <el-dropdown-menu slot="dropdown" >
 70 |                                 <el-dropdown-item >
 71 |                                 <span class="pop-title">You have new tasks! </span>
 72 |                                 </el-dropdown-item>
 73 |                                 <el-dropdown-item v-for="task in tasks" :key="task.id" divided>
 74 |                                     <div class="task-div">
 75 |                                         <span class="task-span task-tag">
 76 |                                         <el-tag type="danger" v-if="task.rank==1">紧急</el-tag>
 77 |                                         <el-tag type="warning" v-if="task.rank==2">重要</el-tag>
 78 |                                         <el-tag type="success" v-if="task.rank==3">正常</el-tag>
 79 |                                         </span>
 80 |                                         <span class="task-span task-content">
 81 |                                         {{task.content}}<br/>
 82 |                                         <span class="task-time">截止：{{task.overTime}}</span>
 83 |                                         </span>
 84 |                                         
 85 |                                         <span class="task-span task-btn"><el-button type="primary" size="mini">完成</el-button></span>
 86 |                                     </div>
 87 |                                 </el-dropdown-item>
 88 | 
 89 |                             </el-dropdown-menu>
 90 |                         </el-dropdown>
 91 |                      </el-col>   
 92 | 
 93 | 
 94 |                 </div>
 95 |             
 96 |          </el-col>
 97 | 
 98 | 
 99 |          <el-col :xs="8" :sm="8" :md="2" >
100 |             <div class="user-header">
101 |                 <el-dropdown trigger="click" menu-align="start">
102 |                     <img src="../../../static/images/b_header.jpg" width="50px" />
103 |                     <el-dropdown-menu slot="dropdown">
104 |                         <el-dropdown-item >
105 |                             <div class="setting-div">
106 |                                 <span class="setting-icon"><i class="material-icons">account_box</i></span> 
107 |                                 <span class="setting-string"> Profile  个人</span>
108 |                             </div>
109 |                         </el-dropdown-item>
110 |                         <el-dropdown-item divided>
111 |                             <div class="setting-div">
112 |                                 <span class="setting-icon"><i class="material-icons">settings</i></span> 
113 |                                 <span class="setting-string"> Settings  设置</span>
114 |                             </div>
115 |                          
116 |                         </el-dropdown-item>
117 |                         <el-dropdown-item divided>
118 |                             <div class="setting-div">
119 |                                 <span class="setting-icon"><i class="material-icons">assignment_return</i></span> 
120 |                                 <span class="setting-string"> Sign out  退出</span>
121 |                             </div>
122 |                             
123 |                         </el-dropdown-item>
124 |                         
125 |                     </el-dropdown-menu>
126 |                 </el-dropdown>
127 | 
128 | 
129 |             </div>
130 | 
131 | 
132 |          </el-col>
133 |         </el-row>
134 | 
135 | 
136 |       
137 | 
138 | 
139 |     </div>
140 |     
141 | 
142 | 
143 | 
144 | </template>
145 | 
146 | <script>
147 |     export default {
148 |         data() {
149 |             return {
150 |                 name: 'linxin',
151 |                 dialogs:[
152 |                     {header:'../../static/images/b_header2.jpg',content:'我有一个Style样式需要您帮忙处理以下。',time:'3'},
153 |                     {header:'../../static/images/b_header3.jpg',content:'中午一起吃个饭吧，我请客。',time:'15'},
154 |                     {header:'../../static/images/b_header.jpg',content:'需要处理一下POP展示的白边样式。',time:'18'},
155 |                     {header:'../../static/images/b_header2.jpg',content:'下午3点开需求会议，准时参加。',time:'24'},
156 |                     {header:'../../static/images/b_header3.jpg',content:'晚上我开车送你回家，你请我吃晚饭。',time:'45'},
157 |                 ],
158 |                 tasks:[
159 |                     {id:1,rank:1,content:'完成JSPangAdmin头部头部组件的编写。',overTime:'2017/3/9'},
160 |                     {id:2,rank:2,content:'完成GitHub仓库的初始化工作。',overTime:'2017/3/15'},
161 |                     {id:3,rank:3,content:'在阿里云进行网站备案，完成后通知组长。',overTime:'2017/3/20'}
162 |                     
163 |                 ]
164 |             }
165 |         },
166 |         methods:{
167 |             
168 |         }
169 |     }
170 | </script>
171 | <style scoped>
172 |     .header {
173 |         position: fixed;
174 |         box-sizing: border-box;
175 |         width: 100%;
176 |         height:66px;
177 |        
178 |         font-size: 14px;
179 |         line-height: 66px;
180 |         background-color:#324157;
181 |         box-shadow:2px 0 3px rgba(0,0,0,.5);
182 |         z-index:1000;
183 |         padding:0 32px 0 40px;
184 |         overflow:hidden;
185 |        
186 |     }
187 |     .header .logo{
188 |         float: left;
189 |         cursor:pointer;
190 |         font-size: 22px;
191 |     }
192 |     .logo_prefix{
193 |         color:#209e91;
194 |     }
195 |     .logo_suffix{
196 |         color:#fff;
197 |     }
198 |     .header .search{
199 |         float: left;
200 |         color:#fff;
201 |         font-size:14px;
202 |     }
203 |     .website span{
204 |         display:inline-block;
205 |         color:#209e91;
206 |     }
207 |     .website span:first-child{
208 |         color:#fff;
209 |     }
210 |     .header-right{
211 |         padding-top:25px;
212 |         line-height:10px;
213 |     }
214 |     .header-right span{
215 |         display:inline-block;
216 |         margin-left:14px;
217 |         font-size:18px;
218 |         color:#fff;
219 |         line-height:1px;
220 |         height:18px;
221 |         cursor:pointer;
222 | 
223 |     }
224 |     .header-right span:hover{
225 |         color:#209e91;
226 | 
227 |     }
228 |     .user-header{
229 |         line-height:10px;
230 |         padding-top:7px;
231 |         font-size:12px;
232 |     }
233 |     .user-header img{
234 |         border-radius:50%;
235 |         cursor:pointer;
236 |     }
237 |     .pop-image{
238 |         display:block;
239 |         float:left;
240 |     }
241 |     .pop-image img{
242 |         border-radius:50%;
243 |     }
244 |     .pop-div{
245 |         height:55px;
246 |         clear:both;
247 |     }
248 |     .pop-content{
249 |         display:block;
250 |         font-size:12px;
251 |         line-height:14px;
252 |         padding-top:15px;
253 |         margin-left:60px;
254 |     }
255 |     .pop-time{
256 |         display:block;
257 |         float:right;
258 |         font-size:10px;
259 |         color:#ccc;
260 | 
261 |     }
262 |     .pop-title{
263 |         font-size:12px;
264 |         color:#209e91;
265 |     }
266 |     .task-div{
267 |         clear:both;
268 |         height:55px;
269 |     }
270 |     .task-span{
271 |         display:block;
272 |         float:left;
273 |         font-size:12px
274 |     }
275 |     
276 |     .task-content{  
277 |         width:160px;
278 |         line-height:16px;
279 |         margin-left:10px;
280 |         padding:5px;
281 |     }
282 |     .task-time{
283 |         clear:both;
284 |         float:right;
285 |         color:#ccc;
286 |         
287 |     }
288 |     .setting-div{
289 |         height:30px;
290 |         line-height:30px;
291 |         clear:both;
292 |     }
293 |     .setting-div span{
294 |         display:block;
295 |         float:left;
296 |         font-size:12px;
297 |     }
298 |     .setting-icon{
299 |         padding-top:3px;
300 |         padding-right:3px;
301 |     }
302 |     
303 | 
304 | 
305 | </style>
306 | 


--------------------------------------------------------------------------------
/src/components/page/FormInput.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div >
  3 |         <v-pageTitle vtitle="FormInput"></v-pageTitle>
  4 | 
  5 | 
  6 |         <el-row :gutter="20">
  7 |             <el-col :xs="24" :sm="24" :md="12" :lg="12">
  8 |                 <el-card class="box-card">
  9 |                   STANDARD FIELDS
 10 |                   <hr>
 11 |                   Text
 12 |                   <el-input  placeholder="请输入内容"></el-input>
 13 |                   With Icon
 14 |                   <el-input placeholder="带图标的文本框" icon="search" ></el-input>
 15 |                   Disabled Input
 16 |                   <el-input  placeholder="请输入内容" :disabled="true"></el-input>
 17 |                   Textarea
 18 |                   <el-input type="textarea" :rows="4"placeholder="请输入内容"></el-input>
 19 |                   Small Input
 20 |                   <el-input size="small" placeholder="请输入内容"></el-input>
 21 |                   Large Input
 22 |                   <el-input size="large" placeholder="请输入内容"></el-input>
 23 |                   <br/><br/>
 24 |                 </el-card>
 25 |             </el-col>
 26 | 
 27 | 
 28 | 
 29 |             <el-col :xs="24" :sm="24" :md="12" :lg="12">
 30 |                 <el-card class="box-card">
 31 |                     EXAMPLE FORM
 32 |                   <hr>
 33 |                     <el-form ref="form" label-width="80px">
 34 |                         <el-form-item label="活动名称">
 35 |                             <el-input></el-input>
 36 |                         </el-form-item>
 37 |                         
 38 |                         <el-form-item label="活动时间">
 39 |                             <el-col :span="12">
 40 |                             <el-date-picker type="date" placeholder="选择日期"  style="width: 99%;"></el-date-picker>
 41 |                             </el-col>
 42 |                             
 43 |                             <el-col :span="12">
 44 |                             <el-time-picker type="fixed-time" placeholder="选择时间"  style="width: 100%;"></el-time-picker>
 45 |                             </el-col>
 46 |                         </el-form-item>
 47 |                         <el-form-item label="活动性质">
 48 |                             <el-checkbox-group >
 49 |                             <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
 50 |                             <el-checkbox label="地推活动" name="type"></el-checkbox>
 51 |                             </el-checkbox-group>
 52 |                         </el-form-item>
 53 |                         <el-form-item>
 54 |                             <el-button  >立即创建</el-button>
 55 |                             <el-button>取消</el-button>
 56 |                         </el-form-item>
 57 |                         </el-form>
 58 | 
 59 | 
 60 | 
 61 | 
 62 |                 </el-card>
 63 |             </el-col>
 64 | 
 65 | 
 66 | 
 67 | 
 68 |             <el-col :xs="24" :sm="24" :md="12" :lg="12">
 69 |                 <el-card class="box-card">
 70 |                   Time PICKER
 71 |                   <hr>
 72 |                   
 73 |                         <el-time-select v-model="time1" style="width: 100%;" :picker-options="{start: '08:30',step: '00:15',end: '18:30'}" placeholder="选择时间">
 74 |                         </el-time-select><br/><br/>
 75 |                    
 76 |                 <el-time-select
 77 |                     placeholder="起始时间"
 78 |                     style="width: 49%;"
 79 |                     v-model="startTime"
 80 |                     :picker-options="{
 81 |                     start: '08:30',
 82 |                     step: '00:15',
 83 |                     end: '18:30'
 84 |                     }">
 85 |                 </el-time-select>
 86 |                 <el-time-select
 87 |                     placeholder="结束时间"
 88 |                     v-model="endTime"
 89 |                     style="width: 49%;"
 90 |                     :picker-options="{
 91 |                     start: '08:30',
 92 |                     step: '00:15',
 93 |                     end: '18:30',
 94 |                     minTime: startTime
 95 |                     }">
 96 |                 </el-time-select><br/><br/>
 97 |                    
 98 | 
 99 |                 </el-card>
100 |             </el-col>
101 |         </el-row>
102 | 
103 |         <el-row :gutter="20">
104 |              <el-col :xs="24" :sm="24" :md="12" :lg="12">
105 |                 <el-card class="box-card">
106 |                     SELECTS
107 |                   <hr>
108 |                   正常选项
109 |                    <el-select v-model="value1" placeholder="请选择" style="width:100%;">
110 |                         <el-option
111 |                         v-for="item in options1" :key="item.value"
112 |                         :label="item.label"
113 |                         :value="item.value">
114 |                         </el-option>
115 |                     </el-select>
116 |                   有禁用选项
117 |                     <el-select v-model="value2" placeholder="请选择" style="width:100%;">
118 |                         <el-option
119 |                         v-for="item in options2" :key="item.value"
120 |                         :label="item.label"
121 |                         :value="item.value"
122 |                         :disabled="item.disabled">
123 |                         </el-option>
124 |                     </el-select>
125 |                   禁用 
126 |                     <el-select v-model="value1" placeholder="请选择" style="width:100%;" disabled >
127 |                         <el-option
128 |                         v-for="item in options1" :key="item.value"
129 |                         :label="item.label"
130 |                         :value="item.value">
131 |                         </el-option>
132 |                     </el-select>
133 |                   多选
134 |                     <el-select v-model="value3" multiple placeholder="请选择" style="width:100%;">
135 |                         <el-option
136 |                         v-for="item in options1" :key="item.value"
137 |                         :label="item.label"
138 |                         :value="item.value">
139 |                         </el-option>
140 |                     </el-select>
141 |                   分组
142 |                      <el-select v-model="value4" placeholder="请选择" style="width:100%;">
143 |                         <el-option-group
144 |                         v-for="group in options3" :key="group.label"
145 |                         :label="group.label">
146 |                         <el-option
147 |                             v-for="item in group.options" :key="item.label"
148 |                             :label="item.label"
149 |                             :value="item.value">
150 |                         </el-option>
151 |                         </el-option-group>
152 |                     </el-select>
153 | 
154 |                 </el-card>
155 |             </el-col>
156 | 
157 | 
158 | 
159 |              <el-col :xs="24" :sm="24" :md="12" :lg="12">
160 |                 <el-card class="box-card">
161 |                    INPUT GROUPS
162 |                   <hr>
163 |                     <div>
164 |                     <el-input placeholder="请输入内容" >
165 |                         <template slot="prepend">Http://</template>
166 |                     </el-input>
167 |                     </div>
168 |                     <div style="margin-top: 15px;">
169 |                     <el-input placeholder="请输入内容" >
170 |                         <template slot="append">.com</template>
171 |                     </el-input>
172 |                     </div>
173 |                     <div style="margin-top: 15px;">
174 |                     <el-input placeholder="请输入内容">
175 |                         <el-select v-model="select"  slot="prepend">
176 |                         <el-option label="餐厅名" value="1"></el-option>
177 |                         <el-option label="订单号" value="2"></el-option>
178 |                         <el-option label="用户电话" value="3"></el-option>
179 |                         </el-select>
180 |                         <el-button slot="append" icon="search"></el-button>
181 |                     </el-input>
182 |                     </div>
183 | 
184 | 
185 |                 </el-card>
186 |             </el-col>
187 | 
188 | 
189 |             <el-col :xs="24" :sm="24" :md="12" :lg="12">
190 |                 <el-card class="box-card">
191 |                    RATE
192 |                   <hr>
193 |                 用户打分
194 |                 <el-rate v-model="value5"></el-rate>
195 |                 只读分数
196 |                 <el-rate
197 |                 v-model="value6"
198 |                 disabled
199 |                 show-text
200 |                 text-color="#ff9900"
201 |                 text-template="{value}">
202 |                 </el-rate>
203 | 
204 |                 </el-card>
205 |             </el-col>
206 |             
207 |         </el-row>
208 | 
209 | 
210 |     </div>
211 | 
212 | 
213 | 
214 | </template>
215 | 
216 | <script>
217 |     import vPageTitle from '../common/pageTitle.vue';
218 |    
219 |    
220 |     export default {
221 |         data(){
222 |             return{
223 |                 time1:'',
224 |                 startTime: '',
225 |                 endTime: '',
226 |                 value1:'',
227 |                 value2:'',
228 |                 value3:[],
229 |                 value4:'',
230 |                 value5:null,
231 |                 value6:3.7,
232 |                 select: '',
233 |                 options1: [{value: '选项1',label: '黄金糕'},
234 |                            {value: '选项2',label: '双皮奶'}, 
235 |                            {value: '选项3',label: '蚵仔煎'}, 
236 |                            {value: '选项4',label: '龙须面'},
237 |                            {value: '选项5',label: '北京烤鸭'}],
238 |                 options2: [{value: '选项1',label: '黄金糕'},
239 |                            {value: '选项2',label: '双皮奶',disabled: true}, 
240 |                            {value: '选项3',label: '蚵仔煎'}, 
241 |                            {value: '选项4',label: '龙须面'},
242 |                            {value: '选项5',label: '北京烤鸭'}],
243 |                  options3: [{
244 |                             label: '热门城市',
245 |                             options: [{
246 |                                 value: 'Shanghai',
247 |                                 label: '上海'
248 |                             }, {
249 |                                 value: 'Beijing',
250 |                                 label: '北京'
251 |                             }]
252 |                             }, {
253 |                             label: '城市名',
254 |                             options: [{
255 |                                 value: 'Chengdu',
256 |                                 label: '成都'
257 |                             }, {
258 |                                 value: 'Shenzhen',
259 |                                 label: '深圳'
260 |                             }, {
261 |                                 value: 'Guangzhou',
262 |                                 label: '广州'
263 |                             }, {
264 |                                 value: 'Dalian',
265 |                                 label: '大连'
266 |                             }]
267 |                             }],
268 |                 
269 |             };
270 |         },
271 |         components:{
272 |             vPageTitle
273 |         },
274 |         methods: {      
275 |         }
276 |     }
277 | </script>
278 | 
279 | 
280 | 
281 | 
282 | <style scoped>
283 |     .el-col{
284 |         margin-bottom:16px;
285 |     }
286 |     .material-icons{
287 |         font-size:80px;
288 |         color:#ddd;
289 |     }
290 |    
291 |     .cart-string{
292 |         height:100px;
293 |         padding-top:10px;
294 |         font-size:1.1rem;
295 |         
296 |     }
297 |     .box-card{
298 |         font-size:12px;
299 |         line-height:26px;
300 |     }
301 |     .box-card hr{
302 |         height:1px;
303 |         border:none;
304 |         border-top:1px  dashed #ccc;
305 |         margin-bottom:10px;
306 |     }
307 |     .el-select .el-input {
308 |     width: 140px;
309 |      }
310 |     
311 |  
312 |     
313 | </style>


--------------------------------------------------------------------------------