├── static
    └── .gitkeep
├── config
    ├── prod.env.js
    ├── dev.env.js
    └── index.js
├── src
    ├── assets
    │   ├── logo.png
    │   ├── images
    │   │   ├── 1.png
    │   │   ├── 2.png
    │   │   ├── 3.png
    │   │   └── 4.png
    │   ├── banks
    │   │   └── banks.png
    │   └── slideShow
    │   │   ├── pic1.jpg
    │   │   ├── pic2.jpg
    │   │   ├── pic3.jpg
    │   │   └── pic4.jpg
    ├── eventBus.js
    ├── main.js
    ├── router
    │   └── index.js
    ├── components
    │   ├── base
    │   │   ├── chooser.vue
    │   │   ├── pagenation.vue
    │   │   ├── dialog.vue
    │   │   ├── multiplyChooser.vue
    │   │   ├── counter.vue
    │   │   ├── selection.vue
    │   │   └── datepicker.vue
    │   ├── checkOrder.vue
    │   ├── HelloWorld.vue
    │   ├── regForm.vue
    │   ├── logForm.vue
    │   ├── slideShow.vue
    │   ├── bankChooser.vue
    │   └── layout.vue
    ├── pages
    │   ├── detail
    │   │   ├── forecast.vue
    │   │   ├── analysis.vue
    │   │   ├── count.vue
    │   │   └── publish.vue
    │   ├── detail.vue
    │   ├── orderList.vue
    │   └── index.vue
    ├── mock
    │   └── mock.js
    └── App.vue
├── .babelrc
├── .gitignore
├── index.html
├── README.md
└── package.json


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


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


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fishenal/vuejs-demo-project/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/src/eventBus.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | 
3 | const eventBus = new Vue()
4 | 
5 | export { eventBus }
6 | 


--------------------------------------------------------------------------------
/src/assets/images/1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fishenal/vuejs-demo-project/HEAD/src/assets/images/1.png


--------------------------------------------------------------------------------
/src/assets/images/2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fishenal/vuejs-demo-project/HEAD/src/assets/images/2.png


--------------------------------------------------------------------------------
/src/assets/images/3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fishenal/vuejs-demo-project/HEAD/src/assets/images/3.png


--------------------------------------------------------------------------------
/src/assets/images/4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fishenal/vuejs-demo-project/HEAD/src/assets/images/4.png


--------------------------------------------------------------------------------
/src/assets/banks/banks.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fishenal/vuejs-demo-project/HEAD/src/assets/banks/banks.png


--------------------------------------------------------------------------------
/src/assets/slideShow/pic1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fishenal/vuejs-demo-project/HEAD/src/assets/slideShow/pic1.jpg


--------------------------------------------------------------------------------
/src/assets/slideShow/pic2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fishenal/vuejs-demo-project/HEAD/src/assets/slideShow/pic2.jpg


--------------------------------------------------------------------------------
/src/assets/slideShow/pic3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fishenal/vuejs-demo-project/HEAD/src/assets/slideShow/pic3.jpg


--------------------------------------------------------------------------------
/src/assets/slideShow/pic4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fishenal/vuejs-demo-project/HEAD/src/assets/slideShow/pic4.jpg


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [
 3 |     ["env", {
 4 |       "modules": false
 5 |     }],
 6 |     "stage-2"
 7 |   ],
 8 |   "plugins": ["transform-runtime"]
 9 | }
10 | 


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


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules/
 3 | /dist/
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | 
 8 | # Editor directories and files
 9 | .idea
10 | .vscode
11 | *.suo
12 | *.ntvs*
13 | *.njsproj
14 | *.sln
15 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 6 |     <title>my-project</title>
 7 |   </head>
 8 |   <body>
 9 |     <div id="app"></div>
10 |     <!-- built files will be auto injected -->
11 |   </body>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/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 mock from './mock/mock'
 7 | Vue.config.productionTip = false
 8 | 
 9 | /* eslint-disable no-new */
10 | new Vue({
11 |   el: '#app',
12 |   router,
13 |   template: '<App/>',
14 |   components: { App }
15 | })
16 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | #此项目使用说明
 2 | 
 3 | 1. 确保安装了nodejs，以及版本"node": ">= 4.0.0", "npm": ">= 3.0.0"
 4 | 2. 在终端里运行
 5 | ```
 6 | 	npm install --registry=https://registry.npm.taobao.org
 7 | ```
 8 | 3. 运行下面命令启动项目
 9 | ```
10 | 	npm run start
11 | ```
12 | * 注意终端里的端口提示，新版模板采用了自动寻找端口功能，端口由8080叠加
13 | 
14 | 4. 运行下面命令打包项目
15 | ```
16 | 	npm run build
17 | ```
18 | 
19 | #2017.12更新, 与旧版对比
20 | 
21 | 1. 基于最新的vue init webpack xxx 的空白模板
22 | 2. 摒弃vue-resource， 采用axios替代
23 | 3. 放弃dev-server和express搭建模拟数据服务的方式，采用mock.js替代
24 | 4. 去除store层的使用
25 | 5. 使用vue-carousel，取代原来的幻灯片组件
26 | 6. 一些样式上的美化
27 | 7. router-link 改用name


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Router from 'vue-router'
 3 | 
 4 | import IndexPage from '@/pages/index'
 5 | import DetailPage from '@/pages/detail'
 6 | import OrderListPage from '@/pages/orderList'
 7 | import DetailAnaPage from '@/pages/detail/analysis'
 8 | import DetailCouPage from '@/pages/detail/count'
 9 | import DetailForPage from '@/pages/detail/forecast'
10 | import DetailPubPage from '@/pages/detail/publish'
11 | 
12 | Vue.use(Router)
13 | 
14 | export default new Router({
15 | 	routes: [
16 | 		{
17 | 			path: '/',
18 | 			name: 'index',
19 | 			component: IndexPage
20 | 		},
21 | 		{
22 | 			path: '/orderList',
23 | 			name: 'orderList',
24 | 			component: OrderListPage
25 | 		},
26 | 		{
27 | 			path: '/detail',
28 | 			component: DetailPage,
29 | 			redirect: '/detail/analysis',
30 | 			children: [
31 | 				{
32 | 					path: 'analysis',
33 | 					name: 'analysis',
34 | 					component: DetailAnaPage
35 | 				},
36 | 				{
37 | 					path: 'count',
38 | 					name: 'count',
39 | 					component: DetailCouPage
40 | 				},
41 | 				{
42 | 					path: 'forecast',
43 | 					name: 'forecast',
44 | 					component: DetailForPage
45 | 				},
46 | 				{
47 | 					path: 'publish',
48 | 					name: 'publish',
49 | 					component: DetailPubPage
50 | 				}
51 | 			]
52 | 		}
53 | 	]
54 | })
55 | 


--------------------------------------------------------------------------------
/src/components/base/chooser.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="chooser-component">
 3 |         <ul class="chooser-list">
 4 |           <li
 5 |           v-for="(item, index) in selections"
 6 |           @click="chosenSelection(index)"
 7 |           :title="item.label"
 8 |           :class="{active:index === nowIndex}"
 9 |           >{{ item.label }}</li>
10 |         </ul>
11 |       </div>
12 |     </div>
13 | </template>
14 | 
15 | <script>
16 | export default {
17 |   props: {
18 |     selections: {
19 |       type: Array,
20 |       default: [{
21 |         label: 'test',
22 |         value: 0
23 |       }]
24 |     }
25 |   },
26 |   data () {
27 |     return {
28 |       nowIndex: 0
29 |     }
30 |   },
31 |   methods: {
32 |     chosenSelection (index) {
33 |       this.nowIndex = index
34 |       this.$emit('on-change', this.selections[index])
35 |     }
36 |   }
37 | }
38 | </script>
39 | 
40 | <style scoped>
41 | .chooser-component {
42 |   position: relative;
43 |   display: inline-block;
44 | }
45 | .chooser-list li{
46 |   display: inline-block;
47 |   border: 1px solid #e3e3e3;
48 |   height: 25px;
49 |   line-height: 25px;
50 |   padding: 0 8px;
51 |   margin-right: 5px;
52 |   border-radius: 3px;
53 |   text-align: center;
54 |   cursor: pointer;
55 | }
56 | .chooser-list li.active {
57 |   border-color: #4fc08d;
58 |   background: #4fc08d;
59 |   color: #fff;
60 | }
61 | </style>
62 | 


--------------------------------------------------------------------------------
/src/components/base/pagenation.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="pagenation-component">
 3 |       <ul class="page-numbers">
 4 |         <li class="page-links"
 5 |         v-for="p in pages"
 6 |         :class="{active:current === p}"
 7 |         @click="change(p)">{{ p + 1 }}</li>
 8 |       </ul>
 9 |     </div>
10 | </template>
11 | 
12 | <script>
13 | export default {
14 |   props: {
15 |     total: Number,
16 |     pageSize: Number
17 |   },
18 |   computed: {
19 |     pages () {
20 |       let pages = []
21 |       for(let i = 0; i < Math.ceil(this.total / this.pageSize); i ++) {
22 |         pages.push(i)
23 |       }
24 |       return pages
25 |     }
26 |   },
27 |   data () {
28 |     return {
29 |       current: 0
30 |     }
31 |   },
32 |   methods: {
33 |     change (p) {
34 |       this.current = p
35 |       this.$emit('on-change', this.current)
36 |     }
37 |   }
38 | }
39 | </script>
40 | 
41 | <style scoped>
42 | .pagenation-component {
43 |   display: inline-block;
44 |   vertical-align: middle;
45 | }
46 | .page-links {
47 |   display: inline-block;
48 |   border: 1px solid #e3e3e3;
49 |   text-align: center;
50 |   height: 30px;
51 |   line-height: 30px;
52 |   width: 30px;
53 |   background: #fff;
54 |   cursor: pointer;
55 | }
56 | .page-numbers {
57 |   display: inline-block;
58 | }
59 | .page-numbers li.active,
60 | .page-links:hover {
61 |   background: #4fc08d;
62 |   color: #fff;
63 | }
64 | </style>
65 | 


--------------------------------------------------------------------------------
/src/components/checkOrder.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <this-dialog :is-show="isShowCheckDialog" @on-close="checkStatus">
 4 |       请检查你的支付状态！
 5 |       <div class="button" @click="checkStatus">
 6 |         支付成功
 7 |       </div>
 8 |       <div class="button" @click="checkStatus">
 9 |         支付失败
10 |       </div>
11 |     </this-dialog>
12 |     <this-dialog :is-show="isShowSuccessDialog" @on-close="toOrderList">
13 |       购买成功！
14 |     </this-dialog>
15 |     <this-dialog :is-show="isShowFailDialog" @on-close="toOrderList">
16 |       购买失败！
17 |     </this-dialog>
18 |   </div>
19 | </template>
20 | 
21 | <script>
22 | import Dialog from './base/dialog'
23 | import axios from 'axios'
24 | export default {
25 |   components: {
26 |     thisDialog: Dialog
27 |   },
28 |   props: {
29 |     isShowCheckDialog: {
30 |       type: Boolean,
31 |       default: false
32 |     },
33 |     orderId: {
34 |       type: [String, Number]
35 |     }
36 |   },
37 |   data () {
38 |     return {
39 |       isShowSuccessDialog: false,
40 |       isShowFailDialog: false
41 |     }
42 |   },
43 |   methods: {
44 |     checkStatus () {
45 |       axios.post('/api/checkOrder', {
46 |         orderId: this.orderId
47 |       })
48 |       .then((res) => {
49 |         this.isShowSuccessDialog = true
50 |         this.$emit('on-close-check-dialog')
51 |       })
52 |       .catch((err) => {
53 |         this.isShowFailDialog = true
54 |         this.$emit('on-close-check-dialog')
55 |       })
56 |     },
57 |     toOrderList () {
58 |       this.$router.push({path: '/orderList'})
59 |     }
60 |   }
61 | }
62 | </script>
63 | 
64 | <!-- Add "scoped" attribute to limit CSS to this component only -->
65 | <style scoped>
66 | 
67 | </style>
68 | 


--------------------------------------------------------------------------------
/src/components/base/dialog.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div class="dialog-wrap">
 4 |       <div class="dialog-cover"  v-if="isShow" @click="closeMyself"></div>
 5 |       <transition name="drop">
 6 |         <div class="dialog-content"  v-if="isShow">
 7 |           <p class="dialog-close" @click="closeMyself">x</p>
 8 |           <slot>empty</slot>
 9 |         </div>
10 |       </transition>
11 |     </div>
12 |   </div>
13 | </template>
14 | 
15 | <script>
16 | export default {
17 |   props: {
18 |     isShow: {
19 |       type: Boolean,
20 |       default: false
21 |     }
22 |   },
23 |   data () {
24 |     return {
25 |       
26 |     }
27 |   },
28 |   methods: {
29 |     closeMyself () {
30 |       this.$emit('on-close')
31 |     }
32 |   }
33 | }
34 | </script>
35 | 
36 | <style scoped>
37 | .drop-enter-active {
38 |   transition: all .5s ease;
39 | }
40 | .drop-leave-active {
41 |   transition: all .3s ease;
42 | }
43 | .drop-enter {
44 |   transform: translateY(-500px);
45 | }
46 | .drop-leave-active {
47 |   transform: translateY(-500px);
48 | }
49 | 
50 | .dialog-wrap {
51 |   position: fixed;
52 |   width: 100%;
53 |   height: 100%;
54 | }
55 | .dialog-cover {
56 |   background: #000;
57 |   opacity: .3;
58 |   position: fixed;
59 |   z-index: 5;
60 |   top: 0;
61 |   left: 0;
62 |   width: 100%;
63 |   height: 100%;
64 | }
65 | .dialog-content {
66 |   width: 50%;
67 |   position: fixed;
68 |   overflow: auto;
69 |   background: #fff;
70 |   top: 20%;
71 |   left: 50%;
72 |   margin-left: -25%;
73 |   z-index: 10;
74 |   border-radius: 10px;
75 |   padding: 2%;
76 |   line-height: 1.6;
77 | }
78 | .dialog-close {
79 |   position: absolute;
80 |   right: 5px;
81 |   top: 5px;
82 |   width: 20px;
83 |   height: 20px;
84 |   text-align: center;
85 |   cursor: pointer;
86 | }
87 | .dialog-close:hover {
88 |   color: #4fc08d;
89 | }
90 | </style>
91 | 


--------------------------------------------------------------------------------
/src/components/base/multiplyChooser.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="chooser-component">
 3 |         <ul class="chooser-list">
 4 |           <li
 5 |           v-for="(item, index) in selections"
 6 |           @click="toggleSelection(index)"
 7 |           :title="item.label"
 8 |           :class="{active: checkActive(index)}"
 9 |           >{{ item.label }}</li>
10 |         </ul>
11 |       </div>
12 |     </div>
13 | </template>
14 | 
15 | <script>
16 | import _ from 'lodash'
17 | export default {
18 |   props: {
19 |     selections: {
20 |       type: Array,
21 |       default: [{
22 |         label: 'test',
23 |         value: 0
24 |       }]
25 |     }
26 |   },
27 |   data () {
28 |     return {
29 |       nowIndexes: [0]
30 |     }
31 |   },
32 |   methods: {
33 |     toggleSelection (index) {
34 |       if (this.nowIndexes.indexOf(index) === -1) {
35 |         this.nowIndexes.push(index)  
36 |       }
37 |       else {
38 |         this.nowIndexes = _.remove(this.nowIndexes, (idx) => {
39 |           return idx !== index
40 |         })
41 |       }
42 |       let nowObjArray = _.map(this.nowIndexes, (idx) => {
43 |         return this.selections[idx]
44 |       })
45 |       this.$emit('on-change', nowObjArray)
46 |     },
47 |     checkActive (index) {
48 |       return this.nowIndexes.indexOf(index) !== -1
49 |     }
50 |   }
51 | }
52 | </script>
53 | 
54 | <style scoped>
55 | .chooser-component {
56 |   position: relative;
57 |   display: inline-block;
58 | }
59 | .chooser-list li{
60 |   display: inline-block;
61 |   border: 1px solid #e3e3e3;
62 |   height: 25px;
63 |   line-height: 25px;
64 |   padding: 0 8px;
65 |   margin-right: 5px;
66 |   border-radius: 3px;
67 |   text-align: center;
68 |   cursor: pointer;
69 | }
70 | .chooser-list li.active {
71 |   border-color: #4fc08d;
72 |   background: #4fc08d;
73 |   color: #fff;
74 | }
75 | </style>
76 | 


--------------------------------------------------------------------------------
/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="hello">
 3 |     <h1>{{ msg }}</h1>
 4 |     <h2>Essential Links</h2>
 5 |     <ul>
 6 |       <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
 7 |       <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
 8 |       <li><a href="https://chat.vuejs.org" target="_blank">Community Chat</a></li>
 9 |       <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
10 |       <br>
11 |       <li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li>
12 |     </ul>
13 |     <h2>Ecosystem</h2>
14 |     <ul>
15 |       <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
16 |       <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
17 |       <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
18 |       <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
19 |     </ul>
20 |   </div>
21 | </template>
22 | 
23 | <script>
24 | import Axios from 'axios'
25 | export default {
26 |   name: 'HelloWorld',
27 |   data () {
28 |     return {
29 |       msg: 'Welcome to Your Vue.js App'
30 |     }
31 |   },
32 |   mounted () {
33 |     console.log(Axios)
34 |     Axios.post('/api/user', {
35 |       firstName: 'Fred',
36 |       lastName: 'Flintstone'
37 |     })
38 |     .then(function (response) {
39 |       console.log(response);
40 |     })
41 |     .catch(function (error) {
42 |       console.log(error);
43 |     });
44 |   }
45 | }
46 | </script>
47 | 
48 | <!-- Add "scoped" attribute to limit CSS to this component only -->
49 | <style scoped>
50 | h1, h2 {
51 |   font-weight: normal;
52 | }
53 | ul {
54 |   list-style-type: none;
55 |   padding: 0;
56 | }
57 | li {
58 |   display: inline-block;
59 |   margin: 0 10px;
60 | }
61 | a {
62 |   color: #42b983;
63 | }
64 | </style>
65 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "new_Vuejs_Demo_project",
 3 |   "version": "2.0.0",
 4 |   "description": "A Vue.js project",
 5 |   "author": "fishenal / yudonghan",
 6 |   "private": true,
 7 |   "scripts": {
 8 |     "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
 9 |     "start": "npm run dev",
10 |     "build": "node build/build.js"
11 |   },
12 |   "dependencies": {
13 |     "axios": "^0.17.1",
14 |     "lodash": "^4.17.4",
15 |     "vue": "^2.5.2",
16 |     "vue-carousel": "^0.6.5",
17 |     "vue-router": "^3.0.1"
18 |   },
19 |   "devDependencies": {
20 |     "autoprefixer": "^7.1.2",
21 |     "babel-core": "^6.22.1",
22 |     "babel-loader": "^7.1.1",
23 |     "babel-plugin-transform-runtime": "^6.22.0",
24 |     "babel-preset-env": "^1.3.2",
25 |     "babel-preset-stage-2": "^6.22.0",
26 |     "chalk": "^2.0.1",
27 |     "copy-webpack-plugin": "^4.0.1",
28 |     "css-loader": "^0.28.0",
29 |     "eventsource-polyfill": "^0.9.6",
30 |     "extract-text-webpack-plugin": "^3.0.0",
31 |     "file-loader": "^1.1.4",
32 |     "friendly-errors-webpack-plugin": "^1.6.1",
33 |     "html-webpack-plugin": "^2.30.1",
34 |     "mockjs": "^1.0.1-beta3",
35 |     "node-notifier": "^5.1.2",
36 |     "optimize-css-assets-webpack-plugin": "^3.2.0",
37 |     "ora": "^1.2.0",
38 |     "portfinder": "^1.0.13",
39 |     "postcss-import": "^11.0.0",
40 |     "postcss-loader": "^2.0.8",
41 |     "rimraf": "^2.6.0",
42 |     "semver": "^5.3.0",
43 |     "shelljs": "^0.7.6",
44 |     "uglifyjs-webpack-plugin": "^1.1.1",
45 |     "url-loader": "^0.5.8",
46 |     "vue-loader": "^13.3.0",
47 |     "vue-style-loader": "^3.0.1",
48 |     "vue-template-compiler": "^2.5.2",
49 |     "webpack": "^3.6.0",
50 |     "webpack-bundle-analyzer": "^2.9.0",
51 |     "webpack-dev-server": "^2.9.1",
52 |     "webpack-merge": "^4.1.0"
53 |   },
54 |   "engines": {
55 |     "node": ">= 4.0.0",
56 |     "npm": ">= 3.0.0"
57 |   },
58 |   "browserslist": [
59 |     "> 1%",
60 |     "last 2 versions",
61 |     "not ie <= 8"
62 |   ]
63 | }


--------------------------------------------------------------------------------
/src/components/base/counter.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="counter-component">
 3 |       <div class="counter-btn" @click="minus"> - </div>
 4 |       <div class="counter-show">
 5 |         <input type="text" v-model="number" @keyup="fixNumber">
 6 |       </div>
 7 |       <div class="counter-btn" @click="add"> + </div>
 8 |     </div>
 9 | </template>
10 | 
11 | <script>
12 | export default {
13 |   props: {
14 |     max: {
15 |       type: Number,
16 |       default: 5
17 |     },
18 |     min: {
19 |       type: Number,
20 |       default: 1
21 |     }
22 |   },
23 |   data () {
24 |     return {
25 |       number: this.min
26 |     }
27 |   },
28 |   watch: {
29 |     number () {
30 |       this.$emit('on-change', this.number)
31 |     }
32 |   },
33 |   methods: {
34 |     fixNumber () {
35 |       let fix
36 |       if (typeof this.number === 'string') {
37 |         fix = Number(this.number.replace(/\D/g, ''))
38 |       }
39 |       else {
40 |         fix = this.number
41 |       }
42 |       if (fix > this.max || fix < this.min) {
43 |         fix = this.min
44 |       }
45 |       this.number = fix
46 |     },
47 |     minus () {
48 |       if (this.number <= this.min) {
49 |         return
50 |       }
51 |       this.number --
52 |     },
53 |     add () {
54 |       if (this.number >= this.max) {
55 |         return
56 |       }
57 |       this.number ++
58 |     }
59 |   }
60 | }
61 | </script>
62 | 
63 | <style scoped>
64 | .counter-component {
65 |   position: relative;
66 |   display: inline-block;
67 |   overflow: hidden;
68 |   vertical-align: middle;
69 | }
70 | .counter-show {
71 |   float: left;
72 | }
73 | .counter-show input {
74 |   border: none;
75 |   border-top: 1px solid #e3e3e3;
76 |   border-bottom: 1px solid #e3e3e3;
77 |   height: 23px;
78 |   line-height: 23px;
79 |   width: 30px;
80 |   outline: none;
81 |   text-indent: 4px;
82 | }
83 | .counter-btn {
84 |   border: 1px solid #e3e3e3;
85 |   float: left;
86 |   height: 25px;
87 |   line-height: 25px;
88 |   width: 25px;
89 |   text-align: center;
90 |   cursor: pointer;
91 | }
92 | .counter-btn:hover {
93 |   border-color: #4fc08d;
94 |   background: #4fc08d;
95 |   color: #fff;
96 | }
97 | 
98 | </style>
99 | 


--------------------------------------------------------------------------------
/src/components/regForm.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="login-form">
  3 |     <div class="g-form">
  4 |       <div class="g-form-line" v-for="formLine in formData">
  5 |         <span class="g-form-label">{{ formLine.label }}：</span>
  6 |         <div class="g-form-input">
  7 |           <input type="text" 
  8 |           v-model="formLine.model" placeholder="请输入用户名">
  9 |         </div>
 10 |       </div>
 11 |       <div class="g-form-line">
 12 |         <div class="g-form-btn">
 13 |           <a class="button" @click="onLogin">登录</a>
 14 |         </div>
 15 |       </div>
 16 |     </div>
 17 |   </div>
 18 | </template>
 19 | 
 20 | <script>
 21 | export default {
 22 |   props: {
 23 |     'isShow': 'boolean'
 24 |   },
 25 |   data () {
 26 |     return {
 27 |       
 28 |     }
 29 |   },
 30 |   computed: {
 31 |     userErrors () {
 32 |       let status, errorText
 33 |       if (!/@/g.test(this.usernameModel)) {
 34 |         status = false
 35 |         errorText = '必须包含@'
 36 |       }
 37 |       else {
 38 |         status = true
 39 |         errorText = ''
 40 |       }
 41 |       return {
 42 |         status,
 43 |         errorText
 44 |       }
 45 |     },
 46 |     passwordErrors () {
 47 |       let status, errorText
 48 |       if (!/@/g.test(this.usernameModel)) {
 49 |         status = false
 50 |         errorText = '必须包含@'
 51 |       }
 52 |       else {
 53 |         status = true
 54 |         errorText = ''
 55 |       }
 56 |       return {
 57 |         status,
 58 |         errorText
 59 |       }
 60 |     }
 61 |   },
 62 |   methods: {
 63 |     closeMyself () {
 64 |       this.$emit('on-close')
 65 |     }
 66 |   }
 67 | }
 68 | </script>
 69 | 
 70 | <!-- Add "scoped" attribute to limit CSS to this component only -->
 71 | <style scoped>
 72 | .dialog-wrap {
 73 |   position: fixed;
 74 |   width: 100%;
 75 |   height: 100%;
 76 | }
 77 | .dialog-cover {
 78 |   background: #000;
 79 |   opacity: .3;
 80 |   position: fixed;
 81 |   z-index: 5;
 82 |   top: 0;
 83 |   left: 0;
 84 |   width: 100%;
 85 |   height: 100%;
 86 | }
 87 | .dialog-content {
 88 |   width: 50%;
 89 |   position: fixed;
 90 |   max-height: 50%;
 91 |   overflow: auto;
 92 |   background: #fff;
 93 |   top: 20%;
 94 |   left: 50%;
 95 |   margin-left: -25%;
 96 |   z-index: 10;
 97 |   border: 2px solid #464068;
 98 |   padding: 2%;
 99 |   line-height: 1.6;
100 | }
101 | .dialog-close {
102 |   position: absolute;
103 |   right: 5px;
104 |   top: 5px;
105 |   width: 20px;
106 |   height: 20px;
107 |   text-align: center;
108 |   cursor: pointer;
109 | }
110 | .dialog-close:hover {
111 |   color: #4fc08d;
112 | }
113 | </style>
114 | 


--------------------------------------------------------------------------------
/src/components/logForm.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="login-form">
  3 |     <div class="g-form">
  4 |       <div class="g-form-line">
  5 |         <span class="g-form-label">用户名：</span>
  6 |         <div class="g-form-input">
  7 |           <input type="text" 
  8 |           v-model="usernameModel" placeholder="请输入用户名">
  9 |         </div>
 10 |         <span class="g-form-error">{{ userErrors.errorText }}</span>
 11 |       </div>
 12 |       <div class="g-form-line">
 13 |         <span class="g-form-label">密码：</span>
 14 |         <div class="g-form-input">
 15 |           <input type="password" 
 16 |           v-model="passwordModel" placeholder="请输入密码">
 17 |         </div>
 18 |         <span class="g-form-error">{{ passwordErrors.errorText }}</span>
 19 |       </div>
 20 |       <div class="g-form-line">
 21 |         <div class="g-form-btn">
 22 |           <a class="button" @click="onLogin">登录</a>
 23 |         </div>
 24 |       </div>
 25 |       <p>{{ errorText }}</p>
 26 |     </div>
 27 |   </div>
 28 | </template>
 29 | 
 30 | <script>
 31 | export default {
 32 |   data () {
 33 |     return {
 34 |       usernameModel: '',
 35 |       passwordModel: '',
 36 |       errorText: ''
 37 |     }
 38 |   },
 39 |   computed: {
 40 |     userErrors () {
 41 |       let errorText, status
 42 |       if (!/@/g.test(this.usernameModel)) {
 43 |         status = false
 44 |         errorText = '不包含@'
 45 |       }
 46 |       else {
 47 |         status = true
 48 |         errorText = ''
 49 |       }
 50 |       if (!this.userFlag) {
 51 |         errorText = ''
 52 |         this.userFlag = true
 53 |       }
 54 |       return {
 55 |         status,
 56 |         errorText
 57 |       }
 58 |     },
 59 |     passwordErrors () {
 60 |       let errorText, status
 61 |       if (!/^\w{1,6}$/g.test(this.passwordModel)) {
 62 |         status = false
 63 |         errorText = '密码不是1-6位'
 64 |       }
 65 |       else {
 66 |         status = true
 67 |         errorText = ''
 68 |       }
 69 |       if (!this.passwordFlag) {
 70 |         errorText = ''
 71 |         this.passwordFlag = true
 72 |       }
 73 |       return {
 74 |         status,
 75 |         errorText
 76 |       }
 77 |     }
 78 |   },
 79 |   methods: {
 80 |     onLogin () {
 81 |       if (!this.userErrors.status || !this.passwordErrors.status) {
 82 |         this.errorText = '部分选项未通过'
 83 |       }
 84 |       else {
 85 |         this.errorText = ''
 86 |         this.$http.get('api/login')
 87 |         .then((res) => {
 88 |           this.$emit('has-log', res.data)
 89 |         }, (error) => {
 90 |           console.log(error)
 91 |         })
 92 |       }
 93 |     }
 94 |   }
 95 | }
 96 | </script>
 97 | 
 98 | <!-- Add "scoped" attribute to limit CSS to this component only -->
 99 | <style scoped>
100 | 
101 | </style>
102 | 


--------------------------------------------------------------------------------
/src/components/base/selection.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="selection-component">
  3 |       <div class="selection-show" @click="toggleDrop">
  4 |         <span>{{ selections[nowIndex].label }}</span>
  5 |         <div class="arrow"></div>
  6 |       </div>
  7 |       <div class="selection-list" v-if="isDrop">
  8 |         <ul>
  9 |           <li v-for="(item, index) in selections" @click="chooseSelection(index)">{{ item.label }}</li>
 10 |         </ul>
 11 |       </div>
 12 |     </div>
 13 | </template>
 14 | 
 15 | <script>
 16 | import { eventBus } from '../../eventBus'
 17 | export default {
 18 |   props: {
 19 |     selections: {
 20 |       type: Array,
 21 |       default: [{
 22 |         label: 'test',
 23 |         value: 0
 24 |       }]
 25 |     }
 26 |   },
 27 |   data () {
 28 |     return {
 29 |       isDrop: false,
 30 |       nowIndex: 0
 31 |     }
 32 |   },
 33 |   mounted () {
 34 |     eventBus.$on('reset-status', () => {
 35 |       console.log(123)
 36 |       this.isDrop = false
 37 |     })
 38 |   },
 39 |   methods: {
 40 |     toggleDrop (event) {
 41 |       event.stopPropagation()
 42 |       this.isDrop = !this.isDrop
 43 |       if (!this.isDrop) {
 44 |         eventBus.$emit('reset-status')
 45 |       }
 46 |     },
 47 |     chooseSelection (index) {
 48 |       this.nowIndex = index
 49 |       eventBus.$emit('reset-status')
 50 |       this.$emit('on-change', this.selections[this.nowIndex])
 51 |     }
 52 |   }
 53 | }
 54 | </script>
 55 | 
 56 | <style scoped>
 57 | .selection-component {
 58 |   position: relative;
 59 |   display: inline-block;
 60 | }
 61 | .selection-show {
 62 |   border: 1px solid #e3e3e3;
 63 |   padding: 0 20px 0 10px;
 64 |   display: inline-block;
 65 |   position: relative;
 66 |   cursor: pointer;
 67 |   height: 25px;
 68 |   line-height: 25px;
 69 |   border-radius: 3px;
 70 |   background: #fff;
 71 | }
 72 | .selection-show .arrow {
 73 |   display: inline-block;
 74 |   border-left: 4px solid transparent;
 75 |   border-right: 4px solid transparent;
 76 |   border-top: 5px solid #e3e3e3;
 77 |   width: 0;
 78 |   height: 0;
 79 |   margin-top: -1px;
 80 |   margin-left: 6px;
 81 |   margin-right: -14px;
 82 |   vertical-align: middle;
 83 | }
 84 | .selection-list {
 85 |   display: inline-block;
 86 |   position: absolute;
 87 |   left: 0;
 88 |   top: 25px;
 89 |   width: 100%;
 90 |   background: #fff;
 91 |   border-top: 1px solid #e3e3e3;
 92 |   border-bottom: 1px solid #e3e3e3;
 93 |   z-index: 5;
 94 | }
 95 | .selection-list li {
 96 |   padding: 5px 15px 5px 10px;
 97 |   border-left: 1px solid #e3e3e3;
 98 |   border-right: 1px solid #e3e3e3;
 99 |   cursor: pointer;
100 |   background: #fff;
101 |   white-space: nowrap;
102 |   overflow: hidden;
103 |   text-overflow: ellipsis;
104 | 
105 | }
106 | .selection-list li:hover {
107 |   background: #e3e3e3;
108 | }
109 | </style>
110 | 


--------------------------------------------------------------------------------
/config/index.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | // Template version: 1.2.5
 3 | // see http://vuejs-templates.github.io/webpack for documentation.
 4 | 
 5 | const path = require('path')
 6 | 
 7 | module.exports = {
 8 |   dev: {
 9 | 
10 |     // Paths
11 |     assetsSubDirectory: 'static',
12 |     assetsPublicPath: '/',
13 |     proxyTable: {},
14 | 
15 |     // Various Dev Server settings
16 |     host: 'localhost', // can be overwritten by process.env.HOST
17 |     port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
18 |     autoOpenBrowser: false,
19 |     errorOverlay: true,
20 |     notifyOnErrors: true,
21 |     poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
22 | 
23 |     // Use Eslint Loader?
24 |     // If true, your code will be linted during bundling and
25 |     // linting errors and warnings will be shown in the console.
26 |     useEslint: true,
27 |     // If true, eslint errors and warnings will also be shown in the error overlay
28 |     // in the browser.
29 |     showEslintErrorsInOverlay: false,
30 | 
31 |     /**
32 |      * Source Maps
33 |      */
34 | 
35 |     // https://webpack.js.org/configuration/devtool/#development
36 |     devtool: 'eval-source-map',
37 | 
38 |     // If you have problems debugging vue-files in devtools,
39 |     // set this to false - it *may* help
40 |     // https://vue-loader.vuejs.org/en/options.html#cachebusting
41 |     cacheBusting: true,
42 | 
43 |     // CSS Sourcemaps off by default because relative paths are "buggy"
44 |     // with this option, according to the CSS-Loader README
45 |     // (https://github.com/webpack/css-loader#sourcemaps)
46 |     // In our experience, they generally work as expected,
47 |     // just be aware of this issue when enabling this option.
48 |     cssSourceMap: false,
49 |   },
50 | 
51 |   build: {
52 |     // Template for index.html
53 |     index: path.resolve(__dirname, '../dist/index.html'),
54 | 
55 |     // Paths
56 |     assetsRoot: path.resolve(__dirname, '../dist'),
57 |     assetsSubDirectory: 'static',
58 |     assetsPublicPath: '/',
59 | 
60 |     /**
61 |      * Source Maps
62 |      */
63 | 
64 |     productionSourceMap: true,
65 |     // https://webpack.js.org/configuration/devtool/#production
66 |     devtool: '#source-map',
67 | 
68 |     // Gzip off by default as many popular static hosts such as
69 |     // Surge or Netlify already gzip all static assets for you.
70 |     // Before setting to `true`, make sure to:
71 |     // npm install --save-dev compression-webpack-plugin
72 |     productionGzip: false,
73 |     productionGzipExtensions: ['js', 'css'],
74 | 
75 |     // Run the build command with an extra argument to
76 |     // View the bundle analyzer report after build finishes:
77 |     // `npm run build --report`
78 |     // Set to `true` or `false` to always turn it on or off
79 |     bundleAnalyzerReport: process.env.npm_config_report
80 |   }
81 | }
82 | 


--------------------------------------------------------------------------------
/src/pages/detail/forecast.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="sales-board">
 3 |       <div class="sales-board-intro">
 4 |         <h2>数据预测</h2>
 5 |         <p>未来，大数据会变得越来越重要，其核心应用预测也会成为互联网行业以及产业变革的重要力量，我们很有必要对数据预测及其分析方法进行全面且深入的了解。在这一点上，《大数据预测》是本很好的读物，适合大数据所有相关行业的人阅读。</p>
 6 |       </div>
 7 |       <div class="sales-board-form">
 8 |           <div class="sales-board-line">
 9 |               <div class="sales-board-line-left">
10 |                   购买数量：
11 |               </div>
12 |               <div class="sales-board-line-right">
13 |                   <v-counter :max="100" :min="20"></v-counter>
14 |               </div>
15 |           </div>
16 |           <div class="sales-board-line">
17 |               <div class="sales-board-line-left">
18 |                   媒介：
19 |               </div>
20 |               <div class="sales-board-line-right">
21 |                   <v-mul-chooser :selections="versionList"></v-mul-chooser>
22 |               </div>
23 |           </div>
24 |           <div class="sales-board-line">
25 |               <div class="sales-board-line-left">
26 |                   有效时间：
27 |               </div>
28 |               <div class="sales-board-line-right">
29 |                   一年
30 |               </div>
31 |           </div>
32 |           <div class="sales-board-line">
33 |               <div class="sales-board-line-left">
34 |                   总价：
35 |               </div>
36 |               <div class="sales-board-line-right">
37 |                   500 元
38 |               </div>
39 |           </div>
40 |           <div class="sales-board-line">
41 |               <div class="sales-board-line-left">&nbsp;</div>
42 |               <div class="sales-board-line-right">
43 |                   <div class="button">
44 |                     立即购买
45 |                   </div>
46 |               </div>
47 |           </div>
48 |       </div>
49 |       <div class="sales-board-des">
50 |         <h2>产品说明</h2>
51 |         <p>2020年的一天，在你驱车前往公司的路上，导航系统通过预测交通流量，会自动帮你选择一条最合适的交通路线；车内推荐系统会根据你的饮食习惯预测你可能会喜欢吃什么，并推荐沿途的早餐店；你的电子社交助理已经为你自动选择了你可能感兴趣的社交网信息；当车内系统预测到你驾车有些分心时，座椅会自动震动进行提醒……
52 | 以上这些情景不是科幻大片独有的，它们有的已经或会在未来的某一天成为现实。而这一切所倚靠的就是预测分析技术。
53 | 大数据时代下，作为其核心，预测分析已在商业和社会中得到广泛应用。随着越来越多的数据被记录和整理，未来预测分析必定会成为所有领域的关键技术。
54 | 作为预测分析领域的专家，埃里克·西格尔博士深谙预测分析界已经实现和正在发生的事情、面临的问题和将来可能的前景。在《大数据预测》一书中，他结合预测分析的应用实例，对其进行了深入、细致且全面的解读。
55 | 关于预测分析，你想了解的全部，你的生活以及这个世界会因为预测分析改变到什么程度，《大数据预测》都会告诉你。</p>
56 |       </div>
57 |   </div>
58 | </template>
59 | 
60 | <script>
61 | import VCounter from '../../components/base/counter'
62 | import VMulChooser from '../../components/base/multiplyChooser'
63 | export default {
64 |   components: {
65 |     VCounter,
66 |     VMulChooser
67 |   },
68 |   data () {
69 |     return {
70 |       versionList: [
71 |         {
72 |           label: '纸质报告',
73 |           value: 0
74 |         },
75 |         {
76 |           label: 'pdf',
77 |           value: 1
78 |         },
79 |         {
80 |           label: '页面报告',
81 |           value: 2
82 |         },
83 |         {
84 |           label: '邮件',
85 |           value: 3
86 |         }
87 |       ]
88 |     }
89 |   }
90 | }
91 | </script>
92 | 
93 | <!-- Add "scoped" attribute to limit CSS to this component only -->
94 | <style scoped>
95 | 
96 | </style>
97 | 


--------------------------------------------------------------------------------
/src/components/slideShow.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="slide-show" @mouseover="clearInv" @mouseout="runInv">
  3 |     <div class="slide-img">
  4 |       <a :href="slides[nowIndex].href">
  5 |         <transition name="slide-trans">
  6 |           <img v-if="isShow" :src="slides[nowIndex].src">
  7 |         </transition>
  8 |         <transition name="slide-trans-old">
  9 |           <img v-if="!isShow" :src="slides[nowIndex].src">
 10 |         </transition>
 11 |       </a>
 12 |     </div>
 13 |     <h2>{{ slides[nowIndex].title }}</h2>
 14 |     <ul class="slide-pages">
 15 |       <li @click="goto(prevIndex)">&lt;</li>
 16 |       <li v-for="(item, index) in slides"
 17 |       @click="goto(index)"
 18 |       >
 19 |         <a :class="{on: index === nowIndex}">{{ index + 1 }}</a>
 20 |       </li>
 21 |       <li @click="goto(nextIndex)">&gt;</li>
 22 |     </ul>
 23 |   </div>
 24 | </template>
 25 | 
 26 | <script>
 27 | export default {
 28 |   props: {
 29 |     slides: {
 30 |       type: Array,
 31 |       default: []
 32 |     },
 33 |     inv: {
 34 |       type: Number,
 35 |       default: 1000
 36 |     }
 37 |   },
 38 |   data () {
 39 |     return {
 40 |       nowIndex: 0,
 41 |       isShow: true
 42 |     }
 43 |   },
 44 |   computed: {
 45 |     prevIndex () {
 46 |       if (this.nowIndex === 0) {
 47 |         return this.slides.length - 1
 48 |       }
 49 |       else {
 50 |         return this.nowIndex - 1
 51 |       } 
 52 |     },
 53 |     nextIndex () {
 54 |       if (this.nowIndex === this.slides.length - 1) {
 55 |         return 0
 56 |       }
 57 |       else {
 58 |         return this.nowIndex + 1
 59 |       }
 60 |     }
 61 |   },
 62 |   methods: {
 63 |     goto (index) {
 64 |       this.isShow = false
 65 |       setTimeout(() => {
 66 |         this.isShow = true
 67 |         this.nowIndex = index
 68 |       }, 10)
 69 |     },
 70 |     runInv () {
 71 |       this.invId = setInterval(() => {
 72 |         this.goto(this.nextIndex)
 73 |       }, this.inv)
 74 |     },
 75 |     clearInv () {
 76 |       clearInterval(this.invId)
 77 |     }
 78 |   },
 79 |   mounted () {
 80 |     this.runInv();
 81 |   }
 82 | }
 83 | </script>
 84 | 
 85 | <style scoped>
 86 | .slide-trans-enter-active {
 87 |   transition: all .5s;
 88 | }
 89 | .slide-trans-enter {
 90 |   transform: translateX(900px);
 91 | }
 92 | .slide-trans-old-leave-active {
 93 |   transition: all .5s;
 94 |   transform: translateX(-900px);
 95 | }
 96 | .slide-show {
 97 |   position: relative;
 98 |   margin: 15px 15px 15px 0;
 99 |   width: 900px;
100 |   height: 500px;
101 |   overflow: hidden;
102 | }
103 | .slide-show h2 {
104 |   position: absolute;
105 |   width: 100%;
106 |   height: 100%;
107 |   color: #fff;
108 |   background: #000;
109 |   opacity: .5;
110 |   bottom: 0;
111 |   height: 30px;
112 |   text-align: left;
113 |   padding-left: 15px;
114 | }
115 | .slide-img {
116 |   width: 100%;
117 | }
118 | .slide-img img {
119 |   width: 100%;
120 |   position: absolute;
121 |   top: 0;
122 | }
123 | .slide-pages {
124 |   position: absolute;
125 |   bottom: 10px;
126 |   right: 15px;
127 | }
128 | .slide-pages li {
129 |   display: inline-block;
130 |   padding: 0 10px;
131 |   cursor: pointer;
132 |   color: #fff;
133 | }
134 | .slide-pages li .on {
135 |   text-decoration: underline;
136 | }
137 | </style>
138 | 


--------------------------------------------------------------------------------
/src/components/bankChooser.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="chooser-component">
  3 |     <ul class="chooser-list">
  4 |       <li
  5 |       v-for="(item, index) in banks"
  6 |       @click="chooseSelection(index)"
  7 |       :title="item.label"
  8 |       :class="[item.name, {active: index === nowIndex}]"
  9 |       ></li>
 10 |     </ul>
 11 |   </div>
 12 | </template>
 13 | 
 14 | <script>
 15 | export default {
 16 |   data () {
 17 |     return {
 18 |       nowIndex: 0,
 19 |       banks: [
 20 |           {
 21 |               id: 201,
 22 |               label: '招商银行',
 23 |               name: 'zhaoshang'
 24 |           },
 25 |           {
 26 |               id: 301,
 27 |               label: '中国建设银行',
 28 |               name: 'jianshe'
 29 |           },
 30 |           {
 31 |               id: 601,
 32 |               label: '浦发银行',
 33 |               name: 'pufa'
 34 |           },
 35 |           {
 36 |               id: 1101,
 37 |               label: '交通银行',
 38 |               name: 'jiaotong'
 39 |           },
 40 |           {
 41 |               id: 101,
 42 |               label: '中国工商银行',
 43 |               name: 'gongshang'
 44 |           },
 45 |           {
 46 |               id: 401,
 47 |               label: '中国农业银行',
 48 |               name: 'nongye'
 49 |           },
 50 |           {
 51 |               id: 1201,
 52 |               label: '中国银行',
 53 |               name: 'zhongguo'
 54 |           },
 55 |           {
 56 |               id: 501,
 57 |               label: '中信银行',
 58 |               name: 'zhongxin'
 59 |           }
 60 |       ]
 61 |     }
 62 |   },
 63 |   methods: {
 64 |     chooseSelection (index) {
 65 |       this.nowIndex = index
 66 |       this.$emit('on-change', this.banks[index])
 67 |     }
 68 |   }
 69 | }
 70 | </script>
 71 | 
 72 | <!-- Add "scoped" attribute to limit CSS to this component only -->
 73 | <style scoped>
 74 | .chooser-component {
 75 |   position: relative;
 76 |   display: inline-block;
 77 | }
 78 | .chooser-list li.active {
 79 |   border: 1px solid #4fc08d;
 80 | }
 81 | .chooser-list li { 
 82 |     display: inline-block;
 83 |     width: 117px;
 84 |     height: 32px;
 85 |     background-image: url(../assets/banks/banks.png);
 86 |     background-repeat: no-repeat;
 87 |     margin: 5px;
 88 |     border: 1px solid #e3e3e3;
 89 |     cursor: pointer;
 90 | }
 91 | .zhaoshang {
 92 |     background-position: -2160px 0;
 93 | }
 94 | .jianshe {
 95 |     background-position: -720px 0;
 96 | }
 97 | .pufa {
 98 |     background-position: -1800px 0;
 99 | }
100 | .jiaotong {
101 |     background-position: -3120px 0;
102 | }
103 | .minsheng {
104 |     background-position: -2760px 0;
105 | }
106 | .pingan {
107 |     background-position: -2400px 0;
108 | }
109 | .beijing {
110 |     background-position: -960px 0;
111 | }
112 | .xingye {
113 |     background-position: 0 0;
114 | }
115 | .shanghai {
116 |     background-position: -1560px 0;
117 | }
118 | .guangfa {
119 |     background-position: -840px 0;
120 | }
121 | .gongshang {
122 |     background-position: -2640px 0;
123 | }
124 | .nongye {
125 |     background-position: -1680px 0;
126 | }
127 | .guangda {
128 |     background-position: -2280px 0;
129 | }
130 | .zhongguo {
131 |     background-position: -2520px 0;
132 | }
133 | .zhongxin {
134 |     background-position: -480px 0;
135 | }
136 | .chuxu {
137 |     background-position: -120px 0;
138 | }
139 | .bnongshang {
140 |     background-position: -1440px 0;
141 | }
142 | .huaxia {
143 |     background-position: -2040px 0;
144 | }
145 | .snongshang {
146 |     background-position: -2880px 0;
147 | }
148 | 
149 | .baifubao {
150 |     background-position: -1320px 0;
151 | }
152 | </style>
153 | 


--------------------------------------------------------------------------------
/src/mock/mock.js:
--------------------------------------------------------------------------------
  1 | import Mock from 'mockjs'
  2 | 
  3 | Mock.mock(/getNewsList/, {
  4 |     'list|5': [{
  5 |         'url': '@url',
  6 |         'title': '@ctitle(5, 20)'
  7 |     }]
  8 | })
  9 | function getRImg () {
 10 | 	return Mock.Random.image('700x300', Mock.Random.hex())
 11 | }
 12 | Mock.mock(/getSlides/, [
 13 |     {
 14 |       src: getRImg (),
 15 |       title: '@ctitle(4, 12)',
 16 |       ky: 1,
 17 |       toKey: 'analysis'
 18 |     },
 19 |     {
 20 |       src: getRImg (),
 21 |       title: '@ctitle(4, 12)',
 22 |       ky: 2,
 23 |       toKey: 'count'
 24 |     },
 25 |     {
 26 |       src: getRImg (),
 27 |       title: '@ctitle(4, 12)',
 28 |       ky: 3,
 29 |       toKey: 'publish'
 30 |     },
 31 |     {
 32 |       src: getRImg (),
 33 |       title: '@ctitle(4, 12)',
 34 |       ky: 4,
 35 |       toKey: 'forecast'
 36 |     }
 37 | ])
 38 | 
 39 | Mock.mock(/getPrice/, {
 40 | 	'number|1-100': 100 
 41 | })
 42 | Mock.mock(/createOrder/, 'number|1-100')
 43 | 
 44 | Mock.mock(/getBoardList/, [
 45 |         {
 46 |           title: '@ctitle(4)',
 47 |           description: '@ctitle(8, 12)',
 48 |           id: 'car',
 49 |           toKey: 'analysis',
 50 |           saleout: '@boolean'
 51 |         },
 52 |         {
 53 |           title: '@ctitle(4)',
 54 |           description: '@ctitle(8, 12)',
 55 |           id: 'earth',
 56 |           toKey: 'count',
 57 |           saleout: '@boolean'
 58 |         },
 59 |         {
 60 |           title: '@ctitle(4)',
 61 |           description: '@ctitle(8, 12)',
 62 |           id: 'loud',
 63 |           toKey: 'forecast',
 64 |           saleout: '@boolean'
 65 |         },
 66 |         {
 67 |           title: '@ctitle(4)',
 68 |           description: '@ctitle(8, 12)',
 69 |           id: 'hill',
 70 |           toKey: 'publish',
 71 |           saleout: '@boolean'
 72 |         }
 73 | ])
 74 | 
 75 | Mock.mock(/getProductList/, {
 76 |         pc: {
 77 |           title: 'PC产品',
 78 |           list: [
 79 |             {
 80 |               name: '@ctitle(4)',
 81 |               url: '@url',
 82 |               hot: '@boolean'
 83 |             },
 84 |             {
 85 |               name: '@ctitle(4)',
 86 |               url: '@url',
 87 |               hot: '@boolean'
 88 |             },
 89 |             {
 90 |               name: '@ctitle(4)',
 91 |               url: '@url',
 92 |               hot: '@boolean'
 93 |             },
 94 |             {
 95 |               name: '@ctitle(4)',
 96 |               url: '@url',
 97 |               hot: '@boolean'
 98 |             }
 99 |           ]
100 |         },
101 |         app: {
102 |           title: '手机应用类',
103 |           last: true,
104 |           list: [
105 |             {
106 |               name: '@ctitle(4)',
107 |               url: '@url',
108 |               hot: '@boolean'
109 |             },
110 |             {
111 |               name: '@ctitle(4)',
112 |               url: '@url',
113 |               hot: '@boolean'
114 |             },
115 |             {
116 |               name: '@ctitle(4)',
117 |               url: '@url',
118 |               hot: '@boolean'
119 |             },
120 |             {
121 |               name: '@ctitle(4)',
122 |               url: '@url',
123 |               hot: '@boolean'
124 |             }
125 |           ]
126 |         }
127 | })
128 | Mock.mock(/getTableData/, {
129 |     "total": 25,
130 |     "list|25": [
131 |       {
132 |         "orderId": "@id",
133 |         "product": "@ctitle(4)",
134 |         "version": "@ctitle(3)",
135 |         "period": "@integer(1,5)年",
136 |         "buyNum": "@integer(1,8)",
137 |         "date": "@date()",
138 |         "amount": "@integer(100, 500)元"
139 |       }
140 |     ]
141 | })


--------------------------------------------------------------------------------
/src/pages/detail.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="detail-wrap">
  3 |     <div class="detail-left">
  4 |       <div class="product-board">
  5 |         <img :src="productIcon">
  6 |         <ul>
  7 |           <router-link v-for="item in products" :to="{ path: item.path }" tag="li" active-class="active" :key="item.path">
  8 |             {{ item.name }}
  9 |           </router-link>
 10 |         </ul>
 11 |       </div>
 12 |     </div>
 13 |     <div class="detail-right">
 14 |       <keep-alive>
 15 |         <router-view></router-view>
 16 |       </keep-alive>
 17 |     </div>
 18 |   </div>
 19 | </template>
 20 | 
 21 | <script>
 22 | export default {
 23 |   data () {
 24 |     return {
 25 |       products: [
 26 |         {
 27 |           name: '数据统计',
 28 |           path: 'count',
 29 |           icon: require('../assets/images/1.png'),
 30 |           active: false
 31 |         },
 32 |         {
 33 |           name: '数据预测',
 34 |           path: 'forecast',
 35 |           active: false
 36 |         },
 37 |         {
 38 |           name: '流量分析',
 39 |           path: 'analysis',
 40 |           active: false
 41 |         },
 42 |         {
 43 |           name: '广告发布',
 44 |           path: 'publish',
 45 |           active: false
 46 |         }
 47 |       ],
 48 |       imgMap: {
 49 |         '/detail/count': require("../assets/images/1.png"),
 50 |         '/detail/forecast': require("../assets/images/2.png"),
 51 |         '/detail/analysis': require("../assets/images/3.png"),
 52 |         '/detail/publish': require("../assets/images/4.png")
 53 |       }
 54 |     }
 55 |   },
 56 |   computed: {
 57 |     productIcon () {
 58 |       return this.imgMap[this.$route.path]
 59 |     }
 60 |   }
 61 | }
 62 | </script>
 63 | 
 64 | <style>
 65 | .detail-wrap {
 66 |   width: 1200px;
 67 |   margin: 0 auto;
 68 |   overflow: hidden;
 69 |   padding-top: 20px;
 70 | }
 71 | .detail-left {
 72 |   float: left;
 73 |   width: 200px;
 74 |   text-align: center;
 75 | }
 76 | .detail-right {
 77 |   float: left;
 78 |   width: 980px;
 79 |   margin-left: 20px;
 80 | }
 81 | .product-board {
 82 |   background: #fff;
 83 |   padding: 20px 0;
 84 | }
 85 | .product-board ul {
 86 |   margin-top: 20px;
 87 | }
 88 | .product-board li {
 89 |   text-align: left;
 90 |   padding: 10px 15px;
 91 |   cursor: pointer;
 92 | }
 93 | .product-board li.active,
 94 | .product-board li:hover {
 95 |   background: #4fc08d;
 96 |   color: #fff;
 97 | }
 98 | .product-board li a {
 99 |   display: block;
100 | }
101 | .sales-board {
102 |   background: #fff;
103 | }
104 | .sales-board-form {
105 | 
106 | }
107 | .sales-board-intro h2 {
108 |   font-size: 20px;
109 |   padding: 20px;
110 | }
111 | .sales-board-intro p {
112 |   background: #f7fcff;
113 |   padding: 10px 20px;
114 |   color: #999;
115 |   line-height: 1.8;
116 | }
117 | .sales-board-form {
118 |   padding: 30px 20px;
119 |   font-size: 14px;
120 | }
121 | .sales-board-line {
122 |   clear: both;
123 |   padding-bottom: 20px;
124 | }
125 | .sales-board-line-left {
126 |     display: inline-block;
127 |     width: 100px;
128 | }
129 | .sales-board-line-right {
130 |     display: inline-block;
131 |     width: 75%;
132 | }
133 | .sales-board-des {
134 |   border-top: 20px solid #f0f2f5;
135 |   padding: 15px 20px;
136 | }
137 | .sales-board-des p {
138 |   line-height: 1.6;
139 | }
140 | .sales-board-des h2 {
141 |   font-size: 20px;
142 |   padding-bottom: 15px;
143 | }
144 | .sales-board-des h3 {
145 |   font-size: 18px;
146 |   font-weight: bold;
147 |   padding: 20px 0 10px 0;
148 | }
149 | .sales-board-des li {
150 |   padding: 5px 0;
151 | }
152 | .sales-board-table {
153 |   width: 100%;
154 |   margin-top: 20px;
155 | }
156 | .sales-board-table th {
157 |   background: #4fc08d;
158 |   color: #fff;
159 | }
160 | .sales-board-table td {
161 |     border: 1px solid #f0f2f5;
162 |     padding: 15px;
163 | }
164 | </style>
165 | 


--------------------------------------------------------------------------------
/src/pages/orderList.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="order-wrap">
  3 |     <h3>您的产品</h3>
  4 |     <div class="order-list-choose">
  5 |       <div class="order-list-option">
  6 |         选择产品：
  7 |         <v-selection :selections="products" @on-change="productChange"></v-selection>
  8 |       </div>
  9 |       <div class="order-list-option">
 10 |         日期：
 11 |         <v-date-picker @on-change="getStartDate"></v-date-picker>
 12 |       </div>
 13 |       <div class="order-list-option">
 14 |         关键词：
 15 |         <input type="text" v-model.lazy="query" class="order-query">
 16 |       </div>
 17 |     </div>
 18 |     <div class="order-list-table">
 19 |       <table>
 20 |         <tr>
 21 |           <th v-for="head in tableHeads" @click="changeOrderType(head)" :class="{active:head.active}">{{ head.label }}</th>
 22 |         </tr>
 23 |         <tr v-for="item in tableData" :key="item.period">
 24 |           <td v-for="head in tableHeads">{{ item[head.key] }}</td>
 25 |         </tr>
 26 |       </table>
 27 |       <div class="table-pagenation">
 28 |         <!-- <v-pagenation :total="total" :pageSize="pageSize" @on-change="pageChange"></v-pagenation>   -->
 29 |       </div>
 30 |     </div>
 31 |   </div>
 32 | </template>
 33 | <script>
 34 | import VSelection from '@/components/base/selection'
 35 | import VDatePicker from '@/components/base/datepicker'
 36 | import VPagenation from '@/components/base/pagenation'
 37 | import axios from 'axios'
 38 | import _ from 'lodash'
 39 | export default {
 40 |   components: {
 41 |     VSelection,
 42 |     VDatePicker,
 43 |     VPagenation
 44 |   },
 45 |   data () {
 46 |     return {
 47 |       query: '',
 48 |       productId: 0,
 49 |       startDate: '',
 50 |       endDate: '',
 51 |       products: [
 52 |         {
 53 |           label: '数据统计',
 54 |           value: 0
 55 |         },
 56 |         {
 57 |           label: '数据预测',
 58 |           value: 1
 59 |         },
 60 |         {
 61 |           label: '流量分析',
 62 |           value: 2
 63 |         },
 64 |         {
 65 |           label: '广告发布',
 66 |           value: 3
 67 |         }
 68 |       ],
 69 |       tableHeads: [
 70 |         {
 71 |           label: '订单号',
 72 |           key: 'orderId'
 73 |         },
 74 |         {
 75 |           label: '购买产品',
 76 |           key: 'product'
 77 |         },
 78 |         {
 79 |           label: '版本类型',
 80 |           key: 'version'
 81 |         },
 82 |         {
 83 |           label: '有效时间',
 84 |           key: 'period'
 85 |         },
 86 |         {
 87 |           label: '购买日期',
 88 |           key: 'date'
 89 |         },
 90 |         {
 91 |           label: '数量',
 92 |           key: 'buyNum'
 93 |         },
 94 |         {
 95 |           label: '总价',
 96 |           key: 'amount'
 97 |         }
 98 |       ],
 99 |       tableData: [],
100 |       pageSize: 10,
101 |       offset: 0
102 |     }
103 |   },
104 |   methods: {
105 |     pageChange () {},
106 |     productChange () {},
107 |     changeOrderType () {},
108 |     getStartDate () {}
109 |   },
110 |   mounted () {
111 |     axios.post('api/getTableData')
112 |     .then((res) => {
113 |       console.log(res)
114 |       this.tableData = res.data.list
115 |     })
116 |     .catch((error) => {
117 |       console.log(error)
118 |     })
119 |   }
120 | }
121 | </script>
122 | 
123 | <style scoped>
124 | .order-wrap {
125 |   width: 1000px;
126 |   min-height: 800px;
127 |   margin: 20px auto;
128 |   overflow: hidden;
129 | }
130 | .order-wrap h3 {
131 |   font-size: 20px;
132 |   font-weight: bold;
133 |   margin-bottom: 20px;
134 | }
135 | .order-query {
136 |   height: 25px;
137 |   line-height: 25px;
138 |   border: 1px solid #e3e3e3;
139 |   outline: none;
140 |   text-indent: 10px;
141 | }
142 | .order-list-option {
143 |   display: inline-block;
144 |   padding-left: 15px;
145 | }
146 | .order-list-option:first-child {
147 |   padding-left: 0;
148 | }
149 | .order-list-table {
150 |   margin-top: 20px;
151 | }
152 | .order-list-table table {
153 |   width: 100%;
154 |   background: #fff;
155 | }
156 | .order-list-table td,
157 | .order-list-table th {
158 |   border: 1px solid #e3e3e3;
159 |   text-align: center;
160 |   padding: 10px 0;
161 | }
162 | .order-list-table th {
163 |   background: #4fc08d;
164 |   color: #fff;
165 |   border: 1px solid #4fc08d;
166 |   cursor: pointer;
167 | }
168 | .order-list-table th.active {
169 |   background: #35495e;
170 | }
171 | .table-pagenation {
172 |   padding: 15px;
173 |   text-align: right;
174 | }
175 | </style>
176 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <div class="app-head">
  4 |       <div class="app-head-inner">
  5 |         <router-link :to="{name: 'index'}" class="head-logo">
  6 |           <img src="./assets/logo.png">
  7 |         </router-link>
  8 |         <div class="head-nav">
  9 |           <ul class="nav-list">
 10 |             <li @click="showDialog('isShowLogin')">登录</li>
 11 |             <li class="nav-pile">|</li>
 12 |             <li @click="showDialog('isShowReg')">注册</li>
 13 |             <li class="nav-pile">|</li>
 14 |             <li @click="showDialog('isShowAbout')">关于</li>
 15 |           </ul>
 16 |         </div>  
 17 |       </div>
 18 |     </div>
 19 |     <div class="container">
 20 |       <keep-alive>
 21 |         <router-view></router-view>
 22 |       </keep-alive>
 23 |     </div>
 24 |     <div class="app-foot">
 25 |       <p>© 2016 fishenal MIT</p>
 26 |     </div>
 27 |     <this-dialog :is-show="isShowAbout" @on-close="hideDialog('isShowAbout')">
 28 |       <p>本报告在调研数据的基础上，采用定性与定量相结合的方式深入分析了专车市场发展的驱动因素与阻碍因素、专车市场背后的产业格局、专车企业的竞争格局、用户对专车市场的依赖程度、专车对其他交通工具运力的补充效应等，通过这五个章节的研究反映专车市场的发展态势和面临的问题。报告力求客观、深入、准确地反映中国专车市场发展情况，为政府、企事业单位和社会各界提供决策依据。 </p>
 29 |     </this-dialog>
 30 |     <this-dialog :is-show="isShowLogin" @on-close="hideDialog('isShowLogin')">
 31 |       <login-form @on-success="" @on-error=""></login-form>
 32 |     </this-dialog>
 33 |   </div>
 34 | </template>
 35 | 
 36 | <script>
 37 | import ThisDialog from '@/components/base/dialog'
 38 | import LoginForm from '@/components/logForm'
 39 | 
 40 | export default {
 41 |   name: 'app',
 42 |   components: {
 43 |     ThisDialog,
 44 |     LoginForm
 45 |   },
 46 |   data: function () {
 47 |     return {
 48 |       isShowAbout: false,
 49 |       isShowLogin: false,
 50 |       isShowReg: false
 51 |     }
 52 |   },
 53 |   methods: {
 54 |     showDialog (param) {
 55 |       this[param] = true
 56 |     },
 57 |     hideDialog (param) {
 58 |       this[param] = false
 59 |     }
 60 |   }
 61 | }
 62 | </script>
 63 | 
 64 | <style>
 65 | /* http://meyerweb.com/eric/tools/css/reset/ 
 66 |    v2.0 | 20110126
 67 |    License: none (public domain)
 68 | */
 69 | 
 70 | html, body, div, span, applet, object, iframe,
 71 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 72 | a, abbr, acronym, address, big, cite, code,
 73 | del, dfn, em, img, ins, kbd, q, s, samp,
 74 | small, strike, strong, sub, sup, tt, var,
 75 | b, u, i, center,
 76 | dl, dt, dd, ol, ul, li,
 77 | fieldset, form, label, legend,
 78 | table, caption, tbody, tfoot, thead, tr, th, td,
 79 | article, aside, canvas, details, embed, 
 80 | figure, figcaption, footer, header, hgroup, 
 81 | menu, nav, output, ruby, section, summary,
 82 | time, mark, audio, video {
 83 |   margin: 0;
 84 |   padding: 0;
 85 |   border: 0;
 86 |   font-size: 100%;
 87 |   font: inherit;
 88 |   vertical-align: baseline;
 89 | }
 90 | /* HTML5 display-role reset for older browsers */
 91 | article, aside, details, figcaption, figure, 
 92 | footer, header, hgroup, menu, nav, section {
 93 |   display: block;
 94 | }
 95 | body {
 96 |   line-height: 1;
 97 | }
 98 | ol, ul {
 99 |   list-style: none;
100 | }
101 | blockquote, q {
102 |   quotes: none;
103 | }
104 | blockquote:before, blockquote:after,
105 | q:before, q:after {
106 |   content: '';
107 |   content: none;
108 | }
109 | table {
110 |   border-collapse: collapse;
111 |   border-spacing: 0;
112 | }
113 | a {
114 |   color: inherit;
115 |   text-decoration: none;
116 | }
117 | body {
118 |   background: #f0f2f5;
119 |   font-family: "Helvetica Neue",Helvetica,Arial,"Hiragino Sans GB","Hiragino Sans GB W3","Microsoft YaHei UI","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;
120 |   font-size: 14px;
121 |   color: #444;
122 | }
123 | .app-head {
124 |   background: #363636;
125 |   color: #b2b2b2;
126 |   height: 90px;
127 |   line-height: 90px;
128 |   width: 100%;
129 | }
130 | .app-head-inner {
131 |   width: 1000px;
132 |   margin: 0 auto;
133 | }
134 | .head-logo {
135 |   float: left;
136 |   margin-top: 20px;
137 | }
138 | .head-logo img {
139 |   width: 50px;
140 | }
141 | .head-nav {
142 |   float: right;
143 | }
144 | .head-nav ul {
145 |   overflow: hidden;
146 | }
147 | .head-nav li {
148 |   cursor: pointer;
149 |   float: left;
150 | }
151 | .nav-pile {
152 |   padding: 0 10px;
153 | }
154 | .app-foot {
155 |   text-align: center;
156 |   height: 80px;
157 |   width: 100%;
158 |   line-height: 80px;
159 |   background: #e3e4e8;
160 |   clear: both;
161 |   margin-top: 30px;
162 | }
163 | .container {
164 |   width: 1000px;
165 |   margin: 0 auto;
166 | }
167 | .hr {
168 |   height: 1px;
169 |   width: 100%;
170 |   background: #ddd;
171 | }
172 | .button {
173 |   background: #4fc08d;
174 |   color: #fff;
175 |   display: inline-block;
176 |   padding: 10px 20px;
177 |   cursor: pointer;
178 |   border-radius: 5px;
179 | }
180 | .button:hover {
181 |   background: #4fc08d;
182 | }
183 | .g-form {
184 | 
185 | }
186 | .g-form-line {
187 |   padding: 15px 0;
188 | }
189 | .g-form-label {
190 |   width: 100px;
191 |   font-size: 16px;
192 |   display: inline-block;
193 | }
194 | .g-form-input {
195 |   display: inline-block;
196 | }
197 | .g-form-input input {
198 |   height: 30px;
199 |   width: 200px;
200 |   line-height: 30px;
201 |   vertical-align: middle;
202 |   padding: 0 10px;
203 |   border: 1px solid #ccc;
204 | }
205 | .g-form-btn {
206 |   padding-left: 100px;
207 | }
208 | </style>
209 | 


--------------------------------------------------------------------------------
/src/pages/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="index-wrap">
  3 |     <div class="index-left">
  4 |       <div class="index-left-block">
  5 |         <h2>全部产品</h2>
  6 |         <template v-for="product in productList">
  7 |           <h3>{{ product.title}}</h3>
  8 |           <ul>
  9 |             <li v-for="item in product.list">
 10 |               <a :href="item.url">{{ item.name }}</a>
 11 |               <span v-if="item.hot" class="hot-tag">HOT</span>
 12 |             </li>
 13 |           </ul>
 14 |           <div v-if="!product.last" class="hr"></div>
 15 |         </template>
 16 |       </div>
 17 |       <div class="index-left-block lastest-news">
 18 |         <h2>最新消息</h2>
 19 |         <ul>
 20 |           <li v-for="item in newsList">
 21 |             <a :href="item.url" class="new-item">{{ item.title }}</a>
 22 |           </li>
 23 |         </ul>
 24 |       </div>
 25 |     </div>
 26 |     <div class="index-right">
 27 |       <carousel :navigationEnabled="true" :perPage="1" :autoplay="true">
 28 |         <slide v-for="slide in slides" :key="slide.ky">
 29 |           <router-link :to="{name: slide.toKey}">
 30 |             <img :src="slide.src">
 31 |           </router-link>
 32 |         </slide>
 33 |       </carousel>
 34 |       <div class="index-board-list">
 35 |         <div
 36 |         class="index-board-item"
 37 |         v-for="(item, index) in boardList"
 38 |         :class="[{'line-last' : index % 2 !== 0}, 'index-board-' + item.id]">
 39 |           <div class="index-board-item-inner" >
 40 |             <h2>{{ item.title }}</h2>
 41 |             <p>{{ item.description }}</p>
 42 |             <div class="index-board-button">
 43 |               <router-link class="button" :to="{name: item.toKey}">立即购买</router-link>
 44 |             </div>  
 45 |           </div>
 46 |         </div>
 47 |       </div>
 48 |     </div>
 49 |   </div>
 50 | </template>
 51 | 
 52 | <script>
 53 | import { Carousel, Slide } from 'vue-carousel'
 54 | import axios from 'axios'
 55 | export default {
 56 |   components: {
 57 |     Carousel,
 58 |     Slide
 59 |   },
 60 |   mounted () {
 61 |     axios.get('api/getNewsList')
 62 |     .then((res) => {
 63 |       console.log(res)
 64 |       this.newsList = res.data.list
 65 |     })
 66 |     .catch((error) => {
 67 |       console.log(error)
 68 |     })
 69 |     axios.get('api/getBoardList')
 70 |     .then((res) => {
 71 |       console.log(res)
 72 |       this.boardList = res.data
 73 |     })
 74 |     .catch((error) => {
 75 |       console.log(error)
 76 |     })
 77 |     axios.get('api/getProductList')
 78 |     .then((res) => {
 79 |       console.log(res)
 80 |       this.productList = res.data
 81 |     })
 82 |     .catch((error) => {
 83 |       console.log(error)
 84 |     })
 85 |     axios.get('api/getSlides')
 86 |     .then((res) => {
 87 |       console.log(res)
 88 |       this.slides = res.data
 89 |     })
 90 |     .catch((error) => {
 91 |       console.log(error)
 92 |     })
 93 |   },
 94 |   data () {
 95 |     return {
 96 |       slides: null,
 97 |       boardList: null,
 98 |       newsList: [],
 99 |       productList: null
100 |     }
101 |   }
102 | }
103 | </script>
104 | 
105 | <style>
106 | .index-wrap {
107 |   width: 1000px;
108 |   margin: 0 auto;
109 |   overflow: hidden;
110 | }
111 | .index-left {
112 |   float: left;
113 |   width: 30%;
114 |   text-align: left;
115 | }
116 | .index-right {
117 |   float: left;
118 |   width: 70%;
119 | }
120 | .index-left-block {
121 |   margin: 0 15px 15px 15px;
122 |   background: #fff;
123 |   box-shadow: 0 0 1px #ddd;
124 |   border-radius: 10px;
125 | }
126 | .index-left-block .hr {
127 |   margin-bottom: 20px;
128 | }
129 | .index-left-block h2 {
130 |   background: #4fc08d;
131 |   color: #fff;
132 |   padding: 10px 15px;
133 |   margin-bottom: 20px;
134 | }
135 | .index-left-block h3 {
136 |   padding: 0 15px 5px 15px;
137 |   font-weight: bold;
138 |   color: #222;
139 | }
140 | .index-left-block ul {
141 |   padding: 10px 15px;
142 | }
143 | .index-left-block li {
144 |   padding: 5px;
145 | }
146 | .index-board-list {
147 |   overflow: hidden;
148 | }
149 | .index-board-item {
150 |   float: left;
151 |   width: 43%;
152 |   background: #fff;
153 |   box-shadow: 0 0 1px #ddd;
154 |   padding: 3%;
155 |   margin-right: 2%;
156 |   margin-bottom: 20px;
157 |   border-radius: 0 0 10px 10px;
158 | }
159 | .index-board-item-inner {
160 |   min-height: 125px;
161 |   padding-left: 120px;
162 |   line-height: 1.6;
163 | }
164 | .index-board-car .index-board-item-inner{
165 |   background: url(../assets/images/1.png) no-repeat;
166 | }
167 | .index-board-loud .index-board-item-inner{
168 |   background: url(../assets/images/2.png) no-repeat;
169 | }
170 | .index-board-earth .index-board-item-inner{
171 |   background: url(../assets/images/3.png) no-repeat;
172 | }
173 | .index-board-hill .index-board-item-inner{
174 |   background: url(../assets/images/4.png) no-repeat;
175 | }
176 | .index-board-item h2 {
177 |   font-size: 18px;
178 |   font-weight: bold;
179 |   color: #000;
180 |   margin-bottom: 15px;
181 | }
182 | .line-last {
183 |   margin-right: 0;
184 | }
185 | .index-board-button {
186 |   margin-top: 20px;
187 | }
188 | .lastest-news {
189 |   min-height: 512px;
190 | }
191 | .hot-tag {
192 |   background: #c04fb1;
193 |   color: #fff;
194 |   font-size: 12px;
195 |   padding: 0 5px;
196 | }
197 | .new-item {
198 |   display: inline-block;
199 |   width: 230px;
200 |   overflow: hidden;
201 |   text-overflow: ellipsis;
202 |   white-space: nowrap;
203 | }
204 | .VueCarousel {
205 |   margin-bottom: 10px;
206 | }
207 | .VueCarousel-slide {
208 |   position: relative;
209 |   color: #fff;
210 |   font-family: Arial;
211 |   font-size: 24px;
212 |   text-align: center;
213 |   min-height: 100px;
214 |   width: 100%;
215 | }
216 | .VueCarousel-slide img {
217 |   width: 100%;
218 | }
219 | .VueCarousel-navigation-prev {
220 |   left: 30px !important;
221 | }
222 | .VueCarousel-navigation-next {
223 |   right: 30px !important;
224 | }
225 | .VueCarousel-pagination {
226 |   position: absolute;
227 |   bottom: 10px;
228 |   z-index: 9;
229 | }
230 | </style>
231 | 


--------------------------------------------------------------------------------
/src/components/layout.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div @click="clearComponentStatus">
  3 |     <div class="app-head">
  4 |       <div class="app-head-inner">
  5 |         <router-link :to="{path: '/'}">
  6 |           <img src="../assets/logo.png">
  7 |         </router-link>
  8 |         <div class="head-nav">
  9 |           <ul class="nav-list">
 10 |             <li> {{ username }}</li>
 11 |             <li v-if="username!== ''" class="nav-pile">|</li>
 12 |             <li v-if="username!== ''" @click="quit">退出</li>
 13 |             <li v-if="username=== ''" @click="logClick">登录</li>
 14 |             <li class="nav-pile">|</li>
 15 |             <li v-if="username=== ''" @click="regClick">注册</li>
 16 |             <li v-if="username=== ''" class="nav-pile">|</li>
 17 |             <li @click="aboutClick">关于</li>
 18 |           </ul>
 19 |         </div>  
 20 |       </div>
 21 |     </div>
 22 |     <div class="container">
 23 |       <keep-alive>
 24 |         <router-view></router-view>
 25 |       </keep-alive>
 26 |     </div>
 27 |     <div class="app-foot">
 28 |       <p>© 2016 fishenal MIT</p>
 29 |     </div>
 30 |     <my-dialog :is-show="isShowAboutDialog" @on-close="closeDialog('isShowAboutDialog')">
 31 |       <p>本报告在调研数据的基础上，采用定性与定量相结合的方式深入分析了专车市场发展的驱动因素与阻碍因素、专车市场背后的产业格局、专车企业的竞争格局、用户对专车市场的依赖程度、专车对其他交通工具运力的补充效应等，通过这五个章节的研究反映专车市场的发展态势和面临的问题。报告力求客观、深入、准确地反映中国专车市场发展情况，为政府、企事业单位和社会各界提供决策依据。 </p>
 32 |     </my-dialog>
 33 |     
 34 |     <my-dialog :is-show="isShowLogDialog" @on-close="closeDialog('isShowLogDialog')">
 35 |       <log-form @has-log="onSuccessLog"></log-form>
 36 |     </my-dialog>
 37 | 
 38 |     <my-dialog :is-show="isShowRegDialog" @on-close="closeDialog('isShowRegDialog')">
 39 |       <reg-form></reg-form>
 40 |     </my-dialog>
 41 |   </div>
 42 | </template>
 43 | 
 44 | <script>
 45 | import Dialog from './base/dialog'
 46 | import LogForm from './logForm'
 47 | import RegForm from './regForm'
 48 | import { eventBus } from '../eventBus'
 49 | export default {
 50 |   components: {
 51 |     MyDialog: Dialog,
 52 |     LogForm,
 53 |     RegForm
 54 |   },
 55 |   data () {
 56 |     return {
 57 |       isShowAboutDialog: false,
 58 |       isShowLogDialog: false,
 59 |       isShowRegDialog: false,
 60 |       username: ''
 61 |     }
 62 |   },
 63 |   methods: {
 64 |     aboutClick () {
 65 |       this.isShowAboutDialog = true
 66 |     },
 67 |     logClick () {
 68 |       this.isShowLogDialog = true
 69 |     },
 70 |     regClick () {
 71 |       this.isShowRegDialog = true
 72 |     },
 73 |     closeDialog (attr) {
 74 |       this[attr] = false
 75 |     },
 76 |     onSuccessLog (data) {
 77 |       this.closeDialog ('isShowLogDialog')
 78 |       this.username = data.username
 79 |     },
 80 |     clearComponentStatus () {
 81 |       eventBus.$emit('reset-status')
 82 |       // console.log(el)
 83 |     }
 84 |   }
 85 | }
 86 | </script>
 87 | 
 88 | <style>
 89 | /* http://meyerweb.com/eric/tools/css/reset/ 
 90 |    v2.0 | 20110126
 91 |    License: none (public domain)
 92 | */
 93 | 
 94 | html, body, div, span, applet, object, iframe,
 95 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 96 | a, abbr, acronym, address, big, cite, code,
 97 | del, dfn, em, img, ins, kbd, q, s, samp,
 98 | small, strike, strong, sub, sup, tt, var,
 99 | b, u, i, center,
100 | dl, dt, dd, ol, ul, li,
101 | fieldset, form, label, legend,
102 | table, caption, tbody, tfoot, thead, tr, th, td,
103 | article, aside, canvas, details, embed, 
104 | figure, figcaption, footer, header, hgroup, 
105 | menu, nav, output, ruby, section, summary,
106 | time, mark, audio, video {
107 |   margin: 0;
108 |   padding: 0;
109 |   border: 0;
110 |   font-size: 100%;
111 |   font: inherit;
112 |   vertical-align: baseline;
113 | }
114 | /* HTML5 display-role reset for older browsers */
115 | article, aside, details, figcaption, figure, 
116 | footer, header, hgroup, menu, nav, section {
117 |   display: block;
118 | }
119 | body {
120 |   line-height: 1;
121 | }
122 | ol, ul {
123 |   list-style: none;
124 | }
125 | blockquote, q {
126 |   quotes: none;
127 | }
128 | blockquote:before, blockquote:after,
129 | q:before, q:after {
130 |   content: '';
131 |   content: none;
132 | }
133 | table {
134 |   border-collapse: collapse;
135 |   border-spacing: 0;
136 | }
137 | a {
138 |   color: inherit;
139 |   text-decoration: none;
140 | }
141 | body {
142 |   background: #f0f2f5;
143 |   font-family: "Helvetica Neue",Helvetica,Arial,"Hiragino Sans GB","Hiragino Sans GB W3","Microsoft YaHei UI","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;
144 |   font-size: 14px;
145 |   color: #444;
146 | }
147 | .app-head {
148 |   background: #363636;
149 |   color: #b2b2b2;
150 |   height: 90px;
151 |   line-height: 90px;
152 |   width: 100%;
153 | }
154 | .app-head-inner {
155 |   width: 1200px;
156 |   margin: 0 auto;
157 | }
158 | .head-logo {
159 |   float: left;
160 | }
161 | .app-head-inner img {
162 |   width: 50px;
163 |   margin-top: 20px;
164 | }
165 | .head-nav {
166 |   float: right;
167 | }
168 | .head-nav ul {
169 |   overflow: hidden;
170 | }
171 | .head-nav li {
172 |   cursor: pointer;
173 |   float: left;
174 | }
175 | .nav-pile {
176 |   padding: 0 10px;
177 | }
178 | .app-foot {
179 |   text-align: center;
180 |   height: 80px;
181 |   width: 100%;
182 |   line-height: 80px;
183 |   background: #e3e4e8;
184 |   clear: both;
185 |   margin-top: 30px;
186 | }
187 | .container {
188 |   width: 1200px;
189 |   margin: 0 auto;
190 | }
191 | .hr {
192 |   height: 1px;
193 |   width: 100%;
194 |   background: #ddd;
195 | }
196 | .button {
197 |   background: #4fc08d;
198 |   color: #fff;
199 |   display: inline-block;
200 |   padding: 10px 20px;
201 |   cursor: pointer;
202 | }
203 | .button:hover {
204 |   background: #4fc08d;
205 | }
206 | .g-form {
207 | 
208 | }
209 | .g-form-line {
210 |   padding: 15px 0;
211 | }
212 | .g-form-label {
213 |   width: 100px;
214 |   font-size: 16px;
215 |   display: inline-block;
216 | }
217 | .g-form-input {
218 |   display: inline-block;
219 | }
220 | .g-form-input input {
221 |   height: 30px;
222 |   width: 200px;
223 |   line-height: 30px;
224 |   vertical-align: middle;
225 |   padding: 0 10px;
226 |   border: 1px solid #ccc;
227 | }
228 | .g-form-btn {
229 |   padding-left: 100px;
230 | }
231 | .g-form-error {
232 |   color: red;
233 |   padding-left: 15px;
234 | }
235 | </style>
236 | 


--------------------------------------------------------------------------------
/src/pages/detail/analysis.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="sales-board">
  3 |       <div class="sales-board-intro">
  4 |         <h2>流量分析</h2>
  5 |         <p>是指在获得网站访问量基本数据的情况下对有关数据进行统计、分析，从中发现用户访问网站的规律，并将这些规律与网络营销策略等相结合，从而发现目前网络营销活动中可能存在的问题，并为进一步修正或重新制定网络营销策略提供依据。当然这样的定义是站在网络营销管理的角度来考虑的</p>
  6 |       </div>
  7 |       <div class="sales-board-form">
  8 |           <div class="sales-board-line">
  9 |               <div class="sales-board-line-left">
 10 |                   购买数量：
 11 |               </div>
 12 |               <div class="sales-board-line-right">
 13 |                 <v-counter @on-change="onParamChange('buyNum', $event)"></v-counter>
 14 |               </div>
 15 |           </div>
 16 |           <div class="sales-board-line">
 17 |               <div class="sales-board-line-left">
 18 |                   产品类型：
 19 |               </div>
 20 |               <div class="sales-board-line-right">
 21 |                   <v-selection :selections="buyTypes" @on-change="onParamChange('buyType', $event)"></v-selection>
 22 |               </div>
 23 |           </div>
 24 |           <div class="sales-board-line">
 25 |               <div class="sales-board-line-left">
 26 |                   有效时间：
 27 |               </div>
 28 |               <div class="sales-board-line-right">
 29 |                   <v-chooser
 30 |                   :selections="periodList"
 31 |                   @on-change="onParamChange('period', $event)"></v-chooser>
 32 |               </div>
 33 |           </div>
 34 |           <div class="sales-board-line">
 35 |               <div class="sales-board-line-left">
 36 |                   产品版本：
 37 |               </div>
 38 |               <div class="sales-board-line-right">
 39 |                   <v-mul-chooser
 40 |                   :selections="versionList"
 41 |                   @on-change="onParamChange('versions', $event)"></v-mul-chooser>
 42 |               </div>
 43 |           </div>
 44 |           <div class="sales-board-line">
 45 |               <div class="sales-board-line-left">
 46 |                   总价：
 47 |               </div>
 48 |               <div class="sales-board-line-right">
 49 |                   {{ price }} 元
 50 |               </div>
 51 |           </div>
 52 |           <div class="sales-board-line">
 53 |               <div class="sales-board-line-left">&nbsp;</div>
 54 |               <div class="sales-board-line-right">
 55 |                   <div class="button" @click="showPayDialog">
 56 |                     立即购买
 57 |                   </div>
 58 |               </div>
 59 |           </div>
 60 |       </div>
 61 |       <div class="sales-board-des">
 62 |         <h2>产品说明</h2>
 63 |         <p>网站访问统计分析报告的基础数据源于网站流量统计信息，但其价值远高于原始数据资料。专业的网站访问统计分析报告对网络营销的价值，正如专业的财务分析报告对企业经营策略的价值。</p>
 64 | 
 65 |         <h3>用户行为指标</h3>
 66 |         <ul>
 67 |           <li>用户行为指标主要反映用户是如何来到网站的、在网站上停留了多长时间、访问了哪些页面等，主要的统计指标包括：</li>
 68 |           <li>用户在网站的停留时间；</li>
 69 |           <li>用户来源网站（也叫“引导网站”）；</li>
 70 |           <li>用户所使用的搜索引擎及其关键词；</li>
 71 |           <li>在不同时段的用户访问量情况等。</li>
 72 |         </ul>
 73 | 
 74 |         <h3>浏览网站方式</h3>
 75 |         <ul>
 76 |           <li>用户上网设备类型</li>
 77 |           <li>用户浏览器的名称和版本</li>
 78 |           <li>访问者电脑分辨率显示模式</li>
 79 |           <li>用户所使用的操作系统名称和版本</li>
 80 |           <li>用户所在地理区域分布状况等</li>
 81 |         </ul>
 82 |       </div>
 83 |       <my-dialog :is-show="isShowPayDialog" @on-close="hidePayDialog">
 84 |         <table class="buy-dialog-table">
 85 |           <tr>
 86 |             <th>购买数量</th>
 87 |             <th>产品类型</th>
 88 |             <th>有效时间</th>
 89 |             <th>产品版本</th>
 90 |             <th>总价</th>
 91 |           </tr>
 92 |           <tr>
 93 |             <td>{{ buyNum }}</td>
 94 |             <td>{{ buyType.label }}</td>
 95 |             <td>{{ period.label }}</td>
 96 |             <td>
 97 |               <span v-for="item in versions">{{ item.label }}</span>
 98 |             </td>
 99 |             <td>{{ price }}</td>
100 |           </tr>
101 |         </table>
102 |         <h3 class="buy-dialog-title">请选择银行</h3>
103 |         <bank-chooser @on-change="onChangeBanks"></bank-chooser>
104 |         <div class="button buy-dialog-btn" @click="confirmBuy">
105 |           确认购买
106 |         </div>
107 |       </my-dialog>
108 |       <my-dialog :is-show="isShowErrDialog" @on-close="hideErrDialog">
109 |         支付失败！
110 |       </my-dialog>
111 |       <check-order :is-show-check-dialog="isShowCheckOrder" :order-id="orderId" @on-close-check-dialog="hideCheckOrder"></check-order>
112 |   </div>
113 | </template>
114 | 
115 | <script>
116 | import VSelection from '../../components/base/selection'
117 | import VCounter from '../../components/base/counter'
118 | import VChooser from '../../components/base/chooser'
119 | import VMulChooser from '../../components/base/multiplyChooser'
120 | import Dialog from '../../components/base/dialog'
121 | import BankChooser from '../../components/bankChooser'
122 | import CheckOrder from '../../components/checkOrder'
123 | import _ from 'lodash'
124 | import axios from 'axios'
125 | export default {
126 |   components: {
127 |     VSelection,
128 |     VCounter,
129 |     VChooser,
130 |     VMulChooser,
131 |     MyDialog: Dialog,
132 |     BankChooser,
133 |     CheckOrder
134 |   },
135 |   data () {
136 |     return {
137 |       buyNum: 0,
138 |       buyType: {},
139 |       versions: [],
140 |       period: {},
141 |       price: 0,
142 |       versionList: [
143 |         {
144 |           label: '客户版',
145 |           value: 0
146 |         },
147 |         {
148 |           label: '代理商版',
149 |           value: 1
150 |         },
151 |         {
152 |           label: '专家版',
153 |           value: 2
154 |         }
155 |       ],
156 |       periodList: [
157 |         {
158 |           label: '半年',
159 |           value: 0
160 |         },
161 |         {
162 |           label: '一年',
163 |           value: 1
164 |         },
165 |         {
166 |           label: '三年',
167 |           value: 2
168 |         }
169 |       ],
170 |       buyTypes: [
171 |         {
172 |           label: '入门版',
173 |           value: 0
174 |         },
175 |         {
176 |           label: '中级版',
177 |           value: 1
178 |         },
179 |         {
180 |           label: '高级版',
181 |           value: 2
182 |         }
183 |       ],
184 |       isShowPayDialog: false,
185 |       bankId: null,
186 |       orderId: null,
187 |       isShowCheckOrder: false,
188 |       isShowErrDialog: false
189 |     }
190 |   },
191 |   methods: {
192 |     onParamChange (attr, val) {
193 |       this[attr] = val
194 |       this.getPrice()
195 |     },
196 |     getPrice () {
197 |       let buyVersionsArray = _.map(this.versions, (item) => {
198 |         return item.value
199 |       })
200 |       let reqParams = {
201 |         buyNumber: this.buyNum,
202 |         buyType: this.buyType.value,
203 |         period: this.period.value,
204 |         version: buyVersionsArray.join(',')
205 |       }
206 |       axios.post('/api/getPrice', reqParams)
207 |       .then((res) => {
208 |         this.price = res.data.number
209 |       })
210 |     },
211 |     showPayDialog () {
212 |       this.isShowPayDialog = true
213 |     },
214 |     hidePayDialog () {
215 |       this.isShowPayDialog = false
216 |     },
217 |     hideErrDialog () {
218 |       this.isShowErrDialog = false
219 |     },
220 |     hideCheckOrder () {
221 |       this.isShowCheckOrder = false
222 |     },
223 |     onChangeBanks (bankObj) {
224 |       this.bankId = bankObj.id
225 |     },
226 |     confirmBuy () {
227 |       let buyVersionsArray = _.map(this.versions, (item) => {
228 |         return item.value
229 |       })
230 |       let reqParams = {
231 |         buyNumber: this.buyNum,
232 |         buyType: this.buyType.value,
233 |         period: this.period.value,
234 |         version: buyVersionsArray.join(','),
235 |         bankId: this.bankId
236 |       }
237 |       axios.post('/api/createOrder', reqParams)
238 |       .then((res) => {
239 |         this.orderId = res.data.orderId
240 |         this.isShowCheckOrder = true
241 |         this.isShowPayDialog = false
242 |       })
243 |       .catch((err) => {
244 |         this.isShowBuyDialog = false
245 |         this.isShowErrDialog = true
246 |       })
247 |     }
248 |   },
249 |   mounted () {
250 |     this.buyNum = 1
251 |     this.buyType = this.buyTypes[0]
252 |     this.versions = [this.versionList[0]]
253 |     this.period = this.periodList[0]
254 |     this.getPrice()
255 |   }
256 | }
257 | </script>
258 | 
259 | <!-- Add "scoped" attribute to limit CSS to this component only -->
260 | <style scoped>
261 | .buy-dialog-title {
262 |   font-size: 16px;
263 |   font-weight: bold;
264 | }
265 | .buy-dialog-btn {
266 |   margin-top: 20px;
267 | }
268 | .buy-dialog-table {
269 |   width: 100%;
270 |   margin-bottom: 20px;
271 | }
272 | .buy-dialog-table td,
273 | .buy-dialog-table th{
274 |   border: 1px solid #e3e3e3;
275 |   text-align: center;
276 |   padding: 5px 0;
277 | }
278 | .buy-dialog-table th {
279 |   background: #4fc08d;
280 |   color: #fff;
281 |   border: 1px solid #4fc08d;
282 | }
283 | </style>
284 | 


--------------------------------------------------------------------------------
/src/components/base/datepicker.vue:
--------------------------------------------------------------------------------
  1 | <style scoped>
  2 | .datetime-picker {
  3 |     position: relative;
  4 |     display: inline-block;
  5 |     font-family: "Segoe UI","Lucida Grande",Helvetica,Arial,"Microsoft YaHei";
  6 |     -webkit-font-smoothing: antialiased;
  7 |     color: #333;
  8 | }
  9 | 
 10 | .datetime-picker * {
 11 |     box-sizing: border-box;
 12 | }
 13 | 
 14 | .datetime-picker input {
 15 |     width: 100%;
 16 |     padding: 5px 10px;
 17 |     height: 30px;
 18 |     outline: 0 none;
 19 |     border: 1px solid #ccc;
 20 |     font-size: 13px;
 21 | }
 22 | 
 23 | .datetime-picker .picker-wrap {
 24 |     position: absolute;
 25 |     z-index: 1000;
 26 |     width: 238px;
 27 |     height: 280px;
 28 |     margin-top: 2px;
 29 |     background-color: #fff;
 30 |     box-shadow: 0 0 6px #ccc;
 31 | }
 32 | 
 33 | .datetime-picker table {
 34 |     width: 100%;
 35 |     border-collapse: collapse;
 36 |     border-spacing: 0;
 37 |     text-align: center;
 38 |     font-size: 13px;
 39 | }
 40 | 
 41 | .datetime-picker tr {
 42 |     height: 34px;
 43 |     border: 0 none;
 44 | }
 45 | 
 46 | .datetime-picker th, .datetime-picker td {
 47 |     user-select: none;
 48 |     width: 34px;
 49 |     height: 34px;
 50 |     padding: 0;
 51 |     border: 0 none;
 52 |     line-height: 34px;
 53 |     text-align: center;
 54 | }
 55 | 
 56 | .datetime-picker td {
 57 |     cursor: pointer;
 58 | }
 59 | 
 60 | .datetime-picker td:hover {
 61 |     background-color: #f0f0f0;
 62 | }
 63 | 
 64 | .datetime-picker td.date-pass, .datetime-picker td.date-future {
 65 |     color: #aaa;
 66 | }
 67 | 
 68 | .datetime-picker td.date-active {
 69 |     background-color: #ececec;
 70 |     color: #3bb4f2;
 71 | }
 72 | 
 73 | .datetime-picker .date-head {
 74 |     background-color: #3bb4f2;
 75 |     text-align: center;
 76 |     color: #fff;
 77 |     font-size: 14px;
 78 | }
 79 | 
 80 | .datetime-picker .date-days {
 81 |     color: #3bb4f2;
 82 |     font-size: 14px;
 83 | }
 84 | 
 85 | .datetime-picker .show-year {
 86 |     display: inline-block;
 87 |     min-width: 62px;
 88 |     vertical-align: middle;
 89 | }
 90 | 
 91 | .datetime-picker .show-month {
 92 |     display: inline-block;
 93 |     min-width: 28px;
 94 |     vertical-align: middle;
 95 | }
 96 | 
 97 | .datetime-picker .btn-prev,
 98 | .datetime-picker .btn-next {
 99 |     cursor: pointer;
100 |     display: inline-block;
101 |     padding: 0 10px;
102 |     vertical-align: middle;
103 | }
104 | 
105 | .datetime-picker .btn-prev:hover,
106 | .datetime-picker .btn-next:hover {
107 |     background: rgba(16, 160, 234, 0.5);
108 | }
109 | </style>
110 | 
111 | <template>
112 |     <div class="datetime-picker" :style="{ width: width }">
113 |         <input
114 |             type="text"
115 |             :style="styleObj"
116 |             :readonly="readonly"
117 |             v-model="showValue"
118 |             @click="show = !show">
119 |         <div class="picker-wrap" v-show="show">
120 |             <table class="date-picker">
121 |                 <thead>
122 |                     <tr class="date-head">
123 |                         <th colspan="4">
124 |                             <span class="btn-prev" @click="yearClick(-1)">&lt;</span>
125 |                             <span class="show-year">{{now.getFullYear()}}</span>
126 |                             <span class="btn-next" @click="yearClick(1)">&gt;</span>
127 |                         </th>
128 |                         <th colspan="3">
129 |                             <span class="btn-prev" @click="monthClick(-1)">&lt;</span>
130 |                             <span class="show-month">{{months[now.getMonth()]}}</span>
131 |                             <span class="btn-next" @click="monthClick(1)">&gt;</span>
132 |                         </th>
133 |                     </tr>
134 |                     <tr class="date-days">
135 |                         <th v-for="day in days">{{day}}</th>
136 |                     </tr>
137 |                 </thead>
138 |                 <tbody>
139 |                     <tr v-for="i in 6">
140 |                         <td v-for="j in 7"
141 |                             :class="date[i * 7 + j] && date[i * 7 + j].status"
142 |                             :date="date[i * 7 + j] && date[i * 7 + j].date"
143 |                             @click="pickDate(i * 7 + j)">{{date[i * 7 + j] && date[i * 7 + j].text}}</td>
144 |                     </tr>
145 |                 </tbody>
146 |             </table>
147 |         </div>
148 |     </div>
149 | </template>
150 | 
151 | <script>
152 |     export default {
153 |         props: {
154 |             width: { type: String, default: '238px' },
155 |             readonly: { type: Boolean, default: false },
156 |             value: { type: String, default: '' },
157 |             format: { type: String, default: 'YYYY-MM-DD' },
158 |             styleObj: {type: Object, default: null}
159 |         },
160 |         data () {
161 |             return {
162 |                 show: false,
163 |                 showValue: '',
164 |                 days: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
165 |                 months: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
166 |                 date: [],
167 |                 now: new Date()
168 |             };
169 |         },
170 |         watch: {
171 |             now () {
172 |                 this.update();
173 |             },
174 |             show () {
175 |                 this.update();
176 |             }
177 |         },
178 |         methods: {
179 |             close () {
180 |                 this.show = false;
181 |             },
182 |             update () {
183 |                 var arr = [];
184 |                 var time = new Date(this.now);
185 |                 time.setMonth(time.getMonth(), 1);           // the first day
186 |                 var curFirstDay = time.getDay();
187 |                 curFirstDay === 0 && (curFirstDay = 7);
188 |                 time.setDate(0);                             // the last day
189 |                 var lastDayCount = time.getDate();
190 |                 for (let i = curFirstDay; i > 0; i--) {
191 |                     arr.push({
192 |                         text: lastDayCount - i + 1,
193 |                         time: new Date(time.getFullYear(), time.getMonth(), lastDayCount - i + 1),
194 |                         status: 'date-pass'
195 |                     });
196 |                 }
197 | 
198 |                 time.setMonth(time.getMonth() + 2, 0);       // the last day of this month
199 |                 var curDayCount = time.getDate();
200 |                 time.setDate(1);                             // fix bug when month change
201 |                 var value = this.value || this.stringify(new Date());
202 |                 for (let i = 0; i < curDayCount; i++) {
203 |                     let tmpTime = new Date(time.getFullYear(), time.getMonth(), i + 1);
204 |                     let status = '';
205 |                     this.stringify(tmpTime) === value && (status = 'date-active');
206 |                     arr.push({
207 |                         text: i + 1,
208 |                         time: tmpTime,
209 |                         status: status
210 |                     });
211 |                 }
212 | 
213 |                 var j = 1;
214 |                 while (arr.length < 42) {
215 |                     arr.push({
216 |                         text: j,
217 |                         time: new Date(time.getFullYear(), time.getMonth() + 1, j),
218 |                         status: 'date-future'
219 |                     });
220 |                     j++;
221 |                 }
222 |                 this.date = arr;
223 |             },
224 |             yearClick (flag) {
225 |                 this.now.setFullYear(this.now.getFullYear() + flag);
226 |                 this.now = new Date(this.now);
227 |             },
228 |             monthClick (flag) {
229 |                 this.now.setMonth(this.now.getMonth() + flag);
230 |                 this.now = new Date(this.now);
231 |             },
232 |             pickDate (index) {
233 |                 this.show = false;
234 |                 this.now = new Date(this.date[index].time);
235 |                 this.showValue = this.stringify();
236 |                 this.$emit('on-change', this.showValue);
237 |             },
238 |             parse (str) {
239 |                 var time = new Date(str);
240 |                 return isNaN(time.getTime()) ? null : time;
241 |             },
242 |             stringify (time = this.now, format = this.format) {
243 |                 var year = time.getFullYear();
244 |                 var month = time.getMonth() + 1;
245 |                 var date = time.getDate();
246 |                 var monthName = this.months[time.getMonth()];
247 | 
248 |                 var map = {
249 |                     YYYY: year,
250 |                     MMM: monthName,
251 |                     MM: ('0' + month).slice(-2),
252 |                     M: month,
253 |                     DD: ('0' + date).slice(-2),
254 |                     D: date
255 |                 };
256 |                 return format.replace(/Y+|M+|D+/g, function (str) {
257 |                     return map[str];
258 |                 });
259 |             },
260 |             leave (e) {
261 |                 if (!this.$el.contains(e.target)) {
262 |                     this.close();
263 |                 }
264 |             }
265 |         },
266 |         mounted () {
267 |             this.now = this.parse(this.value) || new Date();
268 |             document.addEventListener('click', this.leave, false);
269 |         },
270 |         beforeDestroy () {
271 |             document.removeEventListener('click', this.leave, false);
272 |         }
273 |     };
274 | </script>


--------------------------------------------------------------------------------
/src/pages/detail/count.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="sales-board">
  3 |       <div class="sales-board-intro">
  4 |         <h2>数据统计</h2>
  5 |         <p>历史资料、科学实验、检验、统计等所获得的和用于科学研究、技术设计、查证、决策等的数值加以统计为解决方案做前期准备。</p>
  6 |       </div>
  7 |       <div class="sales-board-form">
  8 |           <div class="sales-board-line">
  9 |               <div class="sales-board-line-left">
 10 |                   产品类型：
 11 |               </div>
 12 |               <div class="sales-board-line-right">
 13 |                   <v-chooser :selections="buyTypes"></v-chooser>
 14 |               </div>
 15 |           </div>
 16 |           <div class="sales-board-line">
 17 |               <div class="sales-board-line-left">
 18 |                   适用地区：
 19 |               </div>
 20 |               <div class="sales-board-line-right">
 21 |                   <v-selection :selections="districts"></v-selection>
 22 |               </div>
 23 |           </div>
 24 |           <div class="sales-board-line">
 25 |               <div class="sales-board-line-left">
 26 |                   有效时间：
 27 |               </div>
 28 |               <div class="sales-board-line-right">
 29 |                   半年
 30 |               </div>
 31 |           </div>
 32 |           <div class="sales-board-line">
 33 |               <div class="sales-board-line-left">
 34 |                   总价：
 35 |               </div>
 36 |               <div class="sales-board-line-right">
 37 |                   500 元
 38 |               </div>
 39 |           </div>
 40 |           <div class="sales-board-line">
 41 |               <div class="sales-board-line-left">&nbsp;</div>
 42 |               <div class="sales-board-line-right">
 43 |                   <div class="button">
 44 |                     立即购买
 45 |                   </div>
 46 |               </div>
 47 |           </div>
 48 |       </div>
 49 |       <div class="sales-board-des">
 50 |         <h2>产品说明</h2>
 51 |         <p>历史资料、科学实验、检验、统计等所获得的和用于科学研究、技术设计、查证、决策等的数值加以统计为解决方案做前期准备。</p>
 52 | 
 53 |         <table class="sales-board-table">
 54 |           <tbody>
 55 |               <tr class="ui-table-row">
 56 |                   <td class="col-first">
 57 |                       <div class="intro-pic">
 58 |                           <label>安全安保</label>
 59 |                       </div>
 60 |                   </td>
 61 |                   <td>
 62 |                       <div class="intro-pic">
 63 |                           <label>办公文教</label>
 64 |                       </div>
 65 |                   </td>
 66 |                   <td>
 67 |                       <div class="intro-pic">
 68 |                           <label>彩票</label>
 69 |                       </div>
 70 |                   </td>
 71 |                   <td>
 72 |                       <div class="intro-pic">
 73 |                           <label>车辆物流</label>
 74 |                       </div>
 75 |                   </td>
 76 |                   <td>
 77 |                       <div class="intro-pic">
 78 |                           <label>成人用品</label>
 79 |                       </div>
 80 |                   </td>
 81 |                   <td>
 82 |                       <div class="intro-pic">
 83 |                           <label>出版传媒</label>
 84 |                       </div>
 85 |                   </td>
 86 |                   <td>
 87 |                       <div class="intro-pic">
 88 |                           <label>电脑硬件</label>
 89 |                       </div>
 90 |                   </td>
 91 |               </tr>
 92 |               <tr class="ui-table-row">
 93 |                   <td class="col-first">
 94 |                       <div class="intro-pic">
 95 |                           <label>电子电工</label>
 96 |                       </div>
 97 |                   </td>
 98 |                   <td>
 99 |                       <div class="intro-pic">
100 |                           <label>房地产建筑装修</label>
101 |                       </div>
102 |                   </td>
103 |                   <td>
104 |                       <div class="intro-pic">
105 |                           <label>分类平台</label>
106 |                       </div>
107 |                   </td>
108 |                   <td>
109 |                       <div class="intro-pic">
110 |                           <label>服装鞋帽</label>
111 |                       </div>
112 |                   </td>
113 |                   <td>
114 |                       <div class="intro-pic">
115 |                           <label>箱包饰品</label>
116 |                       </div>
117 |                   </td>
118 |                   <td>
119 |                       <div class="intro-pic">
120 |                           <label>化工原料制品</label>
121 |                       </div>
122 |                   </td>
123 |                   <td>
124 |                       <div class="intro-pic">
125 |                           <label>机械设备</label>
126 |                       </div>
127 |                   </td>
128 |               </tr>
129 |               <tr class="ui-table-row">
130 |                   <td class="col-first">
131 |                       <div class="intro-pic">
132 |                           <label>家庭日用品</label>
133 |                       </div>
134 |                   </td>
135 |                   <td>
136 |                       <div class="intro-pic">
137 |                           <label>家用电器</label>
138 |                       </div>
139 |                   </td>
140 |                   <td>
141 |                       <div class="intro-pic">
142 |                           <label>教育培训</label>
143 |                       </div>
144 |                   </td>
145 |                   <td>
146 |                       <div class="intro-pic">
147 |                           <label>节能环保</label>
148 |                       </div>
149 |                   </td>
150 |                   <td>
151 |                       <div class="intro-pic">
152 |                           <label>金融服务</label>
153 |                       </div>
154 |                   </td>
155 |                   <td>
156 |                       <div class="intro-pic">
157 |                           <label>礼品</label>
158 |                       </div>
159 |                   </td>
160 |                   <td>
161 |                       <div class="intro-pic">
162 |                           <label>旅游住宿</label>
163 |                       </div>
164 |                   </td>
165 |               </tr>
166 |               <tr class="ui-table-row">
167 |                   <td class="col-first">
168 |                       <div class="intro-pic">
169 |                           <label>美容化妆</label>
170 |                       </div>
171 |                   </td>
172 |                   <td>
173 |                       <div class="intro-pic">
174 |                           <label>母婴护理</label>
175 |                       </div>
176 |                   </td>
177 |                   <td>
178 |                       <div class="intro-pic">
179 |                           <label>农林牧渔</label>
180 |                       </div>
181 |                   </td>
182 |                   <td>
183 |                       <div class="intro-pic">
184 |                           <label>软件</label>
185 |                       </div>
186 |                   </td>
187 |                   <td>
188 |                       <div class="intro-pic">
189 |                           <label>商务服务</label>
190 |                       </div>
191 |                   </td>
192 |                   <td>
193 |                       <div class="intro-pic">
194 |                           <label>生活服务</label>
195 |                       </div>
196 |                   </td>
197 |                   <td>
198 |                       <div class="intro-pic">
199 |                           <label>食品保健品</label>
200 |                       </div>
201 |                   </td>
202 |               </tr>
203 |               <tr class="ui-table-row">
204 |                   <td class="col-first">
205 |                       <div class="intro-pic">
206 |                           <label>手机数码</label>
207 |                       </div>
208 |                   </td>
209 |                   <td>
210 |                       <div class="intro-pic">
211 |                           <label>通讯服务设备</label>
212 |                       </div>
213 |                   </td>
214 |                   <td>
215 |                       <div class="intro-pic">
216 |                           <label>网络服务</label>
217 |                       </div>
218 |                   </td>
219 |                   <td>
220 |                       <div class="intro-pic">
221 |                           <label>医疗服务</label>
222 |                       </div>
223 |                   </td>
224 |                   <td>
225 |                       <div class="intro-pic">
226 |                           <label>游戏</label>
227 |                       </div>
228 |                   </td>
229 |                   <td>
230 |                       <div class="intro-pic">
231 |                           <label>运动休闲娱乐</label>
232 |                       </div>
233 |                   </td>
234 |                   <td>
235 |                       <div class="intro-pic">
236 |                           <label>招商加盟</label>
237 |                       </div>
238 |                   </td>
239 |               </tr>
240 |           </tbody>
241 |       </table>
242 |       </div>
243 |   </div>
244 | </template>
245 | 
246 | <script>
247 | import VSelection from '../../components/base/selection'
248 | import VChooser from '../../components/base/chooser'
249 | export default {
250 |   components: {
251 |     VChooser,
252 |     VSelection
253 |   },
254 |   data () {
255 |     return {
256 |       buyTypes: [
257 |         {
258 |           label: '红色版',
259 |           value: 0
260 |         },
261 |         {
262 |           label: '绿色版',
263 |           value: 1
264 |         },
265 |         {
266 |           label: '紫色版',
267 |           value: 2
268 |         }
269 |       ],
270 |       districts: [
271 |         {
272 |           label: '北京',
273 |           value: 0
274 |         },
275 |         {
276 |           label: '上海',
277 |           value: 1
278 |         },
279 |         {
280 |           label: '广州',
281 |           value: 2
282 |         },
283 |         {
284 |           label: '天津',
285 |           value: 3
286 |         },
287 |         {
288 |           label: '武汉',
289 |           value: 4
290 |         },
291 |         {
292 |           label: '重庆',
293 |           value: 5
294 |         },
295 |       ]
296 |     }
297 |   }
298 | }
299 | </script>
300 | 
301 | <!-- Add "scoped" attribute to limit CSS to this component only -->
302 | <style scoped>
303 | 
304 | </style>
305 | 


--------------------------------------------------------------------------------
/src/pages/detail/publish.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="sales-board">
  3 |       <div class="sales-board-intro">
  4 |         <h2>广告发布</h2>
  5 |         <p>广告活动按照广告计划执行，到完成广告创作并形成广告作品之后，经过广告主的最后审核同意，即可送到预定的媒介发布刊播。这项工作一般由媒介部门的有关专业人员负责，他们的任务就是专门负责与有关媒介单位接洽，安排有关广告的发播事宜，并对发播质量实施监督。</p>
  6 |       </div>
  7 |       <div class="sales-board-form">
  8 |           <div class="sales-board-line">
  9 |               <div class="sales-board-line-left">
 10 |                   购买数量：
 11 |               </div>
 12 |               <div class="sales-board-line-right">
 13 |                   <v-counter :max="100" :min="20"></v-counter>
 14 |               </div>
 15 |           </div>
 16 |           <div class="sales-board-line">
 17 |               <div class="sales-board-line-left">
 18 |                   行业：
 19 |               </div>
 20 |               <div class="sales-board-line-right">
 21 |                   <v-selection :selections="tradeList"></v-selection>
 22 |               </div>
 23 |           </div>
 24 |           <div class="sales-board-line">
 25 |               <div class="sales-board-line-left">
 26 |                   产品版本：
 27 |               </div>
 28 |               <div class="sales-board-line-right">
 29 |                   <v-mul-chooser :selections="versionList"></v-mul-chooser>
 30 |               </div>
 31 |           </div>
 32 |           <div class="sales-board-line">
 33 |               <div class="sales-board-line-left">
 34 |                   有效时间：
 35 |               </div>
 36 |               <div class="sales-board-line-right">
 37 |                   半年
 38 |               </div>
 39 |           </div>
 40 |           <div class="sales-board-line">
 41 |               <div class="sales-board-line-left">
 42 |                   总价：
 43 |               </div>
 44 |               <div class="sales-board-line-right">
 45 |                   500 元
 46 |               </div>
 47 |           </div>
 48 |           <div class="sales-board-line">
 49 |               <div class="sales-board-line-left">&nbsp;</div>
 50 |               <div class="sales-board-line-right">
 51 |                   <div class="button">
 52 |                     立即购买
 53 |                   </div>
 54 |               </div>
 55 |           </div>
 56 |       </div>
 57 |       <div class="sales-board-des">
 58 |         <h2>产品说明</h2>
 59 |         <p>广告活动按照广告计划执行，到完成广告创作并形成广告作品之后，经过广告主的最后审核同意，即可送到预定的媒介发布刊播。这项工作一般由媒介部门的有关专业人员负责，他们的任务就是专门负责与有关媒介单位接洽，安排有关广告的发播事宜，并对发播质量实施监督。</p>
 60 | 
 61 |         <table class="sales-board-table">
 62 |           <tbody>
 63 |               <tr class="ui-table-row">
 64 |                   <td class="col-first">
 65 |                       <div class="intro-pic">
 66 |                           <label>安全安保</label>
 67 |                       </div>
 68 |                   </td>
 69 |                   <td>
 70 |                       <div class="intro-pic">
 71 |                           <label>办公文教</label>
 72 |                       </div>
 73 |                   </td>
 74 |                   <td>
 75 |                       <div class="intro-pic">
 76 |                           <label>彩票</label>
 77 |                       </div>
 78 |                   </td>
 79 |                   <td>
 80 |                       <div class="intro-pic">
 81 |                           <label>车辆物流</label>
 82 |                       </div>
 83 |                   </td>
 84 |                   <td>
 85 |                       <div class="intro-pic">
 86 |                           <label>成人用品</label>
 87 |                       </div>
 88 |                   </td>
 89 |                   <td>
 90 |                       <div class="intro-pic">
 91 |                           <label>出版传媒</label>
 92 |                       </div>
 93 |                   </td>
 94 |                   <td>
 95 |                       <div class="intro-pic">
 96 |                           <label>电脑硬件</label>
 97 |                       </div>
 98 |                   </td>
 99 |               </tr>
100 |               <tr class="ui-table-row">
101 |                   <td class="col-first">
102 |                       <div class="intro-pic">
103 |                           <label>电子电工</label>
104 |                       </div>
105 |                   </td>
106 |                   <td>
107 |                       <div class="intro-pic">
108 |                           <label>房地产建筑装修</label>
109 |                       </div>
110 |                   </td>
111 |                   <td>
112 |                       <div class="intro-pic">
113 |                           <label>分类平台</label>
114 |                       </div>
115 |                   </td>
116 |                   <td>
117 |                       <div class="intro-pic">
118 |                           <label>服装鞋帽</label>
119 |                       </div>
120 |                   </td>
121 |                   <td>
122 |                       <div class="intro-pic">
123 |                           <label>箱包饰品</label>
124 |                       </div>
125 |                   </td>
126 |                   <td>
127 |                       <div class="intro-pic">
128 |                           <label>化工原料制品</label>
129 |                       </div>
130 |                   </td>
131 |                   <td>
132 |                       <div class="intro-pic">
133 |                           <label>机械设备</label>
134 |                       </div>
135 |                   </td>
136 |               </tr>
137 |               <tr class="ui-table-row">
138 |                   <td class="col-first">
139 |                       <div class="intro-pic">
140 |                           <label>家庭日用品</label>
141 |                       </div>
142 |                   </td>
143 |                   <td>
144 |                       <div class="intro-pic">
145 |                           <label>家用电器</label>
146 |                       </div>
147 |                   </td>
148 |                   <td>
149 |                       <div class="intro-pic">
150 |                           <label>教育培训</label>
151 |                       </div>
152 |                   </td>
153 |                   <td>
154 |                       <div class="intro-pic">
155 |                           <label>节能环保</label>
156 |                       </div>
157 |                   </td>
158 |                   <td>
159 |                       <div class="intro-pic">
160 |                           <label>金融服务</label>
161 |                       </div>
162 |                   </td>
163 |                   <td>
164 |                       <div class="intro-pic">
165 |                           <label>礼品</label>
166 |                       </div>
167 |                   </td>
168 |                   <td>
169 |                       <div class="intro-pic">
170 |                           <label>旅游住宿</label>
171 |                       </div>
172 |                   </td>
173 |               </tr>
174 |               <tr class="ui-table-row">
175 |                   <td class="col-first">
176 |                       <div class="intro-pic">
177 |                           <label>美容化妆</label>
178 |                       </div>
179 |                   </td>
180 |                   <td>
181 |                       <div class="intro-pic">
182 |                           <label>母婴护理</label>
183 |                       </div>
184 |                   </td>
185 |                   <td>
186 |                       <div class="intro-pic">
187 |                           <label>农林牧渔</label>
188 |                       </div>
189 |                   </td>
190 |                   <td>
191 |                       <div class="intro-pic">
192 |                           <label>软件</label>
193 |                       </div>
194 |                   </td>
195 |                   <td>
196 |                       <div class="intro-pic">
197 |                           <label>商务服务</label>
198 |                       </div>
199 |                   </td>
200 |                   <td>
201 |                       <div class="intro-pic">
202 |                           <label>生活服务</label>
203 |                       </div>
204 |                   </td>
205 |                   <td>
206 |                       <div class="intro-pic">
207 |                           <label>食品保健品</label>
208 |                       </div>
209 |                   </td>
210 |               </tr>
211 |               <tr class="ui-table-row">
212 |                   <td class="col-first">
213 |                       <div class="intro-pic">
214 |                           <label>手机数码</label>
215 |                       </div>
216 |                   </td>
217 |                   <td>
218 |                       <div class="intro-pic">
219 |                           <label>通讯服务设备</label>
220 |                       </div>
221 |                   </td>
222 |                   <td>
223 |                       <div class="intro-pic">
224 |                           <label>网络服务</label>
225 |                       </div>
226 |                   </td>
227 |                   <td>
228 |                       <div class="intro-pic">
229 |                           <label>医疗服务</label>
230 |                       </div>
231 |                   </td>
232 |                   <td>
233 |                       <div class="intro-pic">
234 |                           <label>游戏</label>
235 |                       </div>
236 |                   </td>
237 |                   <td>
238 |                       <div class="intro-pic">
239 |                           <label>运动休闲娱乐</label>
240 |                       </div>
241 |                   </td>
242 |                   <td>
243 |                       <div class="intro-pic">
244 |                           <label>招商加盟</label>
245 |                       </div>
246 |                   </td>
247 |               </tr>
248 |           </tbody>
249 |       </table>
250 |       </div>
251 |   </div>
252 | </template>
253 | 
254 | <script>
255 | import VSelection from '../../components/base/selection'
256 | import VCounter from '../../components/base/counter'
257 | import VMulChooser from '../../components/base/multiplyChooser'
258 | export default {
259 |   components: {
260 |     VSelection,
261 |     VCounter,
262 |     VMulChooser
263 |   },
264 |   data () {
265 |     return {
266 |       tradeList: [
267 |         {
268 |           label: '出版业',
269 |           value: 0
270 |         },
271 |         {
272 |           label: '媒体',
273 |           value: 1
274 |         },
275 |         {
276 |           label: '金融',
277 |           value: 2
278 |         },
279 |         {
280 |           label: '互联网',
281 |           value: 3
282 |         },
283 |         {
284 |           label: '游戏',
285 |           value: 4
286 |         }
287 |       ],
288 |       versionList: [
289 |         {
290 |           label: '初级版',
291 |           value: 0
292 |         },
293 |         {
294 |           label: '中级版',
295 |           value: 1
296 |         },
297 |         {
298 |           label: '高级版',
299 |           value: 2
300 |         },
301 |         {
302 |           label: '专家版',
303 |           value: 3
304 |         }
305 |       ]
306 |     }
307 |   }
308 | }
309 | </script>
310 | 
311 | <!-- Add "scoped" attribute to limit CSS to this component only -->
312 | <style>
313 | 
314 | </style>
315 | 


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