├── .babelrc
├── .editorconfig
├── .gitignore
├── .postcssrc.js
├── README.md
├── build
    ├── build.js
    ├── check-versions.js
    ├── logo.png
    ├── utils.js
    ├── vue-loader.conf.js
    ├── webpack.base.conf.js
    ├── webpack.dev.conf.js
    └── webpack.prod.conf.js
├── config
    ├── dev.env.js
    ├── index.js
    └── prod.env.js
├── index.html
├── package.json
├── src
    ├── App.vue
    ├── assets
    │   ├── css
    │   │   └── main.less
    │   └── img
    │   │   ├── delete.png
    │   │   ├── det-file.png
    │   │   ├── det-write.png
    │   │   ├── dis-1.png
    │   │   ├── dis-2.png
    │   │   ├── dis-22.png
    │   │   ├── editor.png
    │   │   ├── foot1-1020.png
    │   │   ├── foot2-1020.png
    │   │   ├── foot3-1020.png
    │   │   ├── icon.png
    │   │   ├── icon_login_code.png
    │   │   ├── icon_login_password.png
    │   │   ├── icon_login_password_again.png
    │   │   ├── icon_login_user.png
    │   │   ├── logo.png
    │   │   ├── per-bg.jpg
    │   │   ├── per-in.png
    │   │   ├── top_bg.jpg
    │   │   └── up.png
    ├── components
    │   ├── api.js
    │   ├── load
    │   │   ├── index.js
    │   │   └── load.vue
    │   └── tip
    │   │   ├── index.js
    │   │   └── tip.vue
    ├── main.js
    ├── mock
    │   ├── game.js
    │   └── index.js
    ├── router
    │   └── index.js
    └── view
    │   ├── detail.vue
    │   ├── edit.vue
    │   ├── index.vue
    │   ├── login.vue
    │   ├── myRemind.vue
    │   ├── myReply.vue
    │   ├── myWrite.vue
    │   ├── newThread.vue
    │   ├── systemMessage.vue
    │   └── userCenter.vue
└── static
    └── .gitkeep


/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [
 3 |     ["env", {
 4 |       "modules": false,
 5 |       "targets": {
 6 |       "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
 7 |       }
 8 |     }],
 9 |     "stage-2"
10 |   ],
11 |   "plugins": ["transform-runtime",["component",[
12 |     {"libraryName":"mint-ui","style":true}
13 |   ]]],
14 |   "env": {
15 |     "test": {
16 |       "presets": ["env", "stage-2"],
17 |       "plugins": ["istanbul"]
18 |     }
19 |   }
20 | }
21 | 


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


--------------------------------------------------------------------------------
/.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 | 


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


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-mintUI-demo
 2 | 
 3 | > 利用vue2、mockjs实现前后分离，开发时vue-cli proxyTable 可以解决开发环境的跨域问题，所以针对没有接口数据时采用mockjs方法，有接口时采用修改vue-cli的config文件里index.js的参数proxyTable来开发。
 4 | 
 5 | > UI采用的是[Mint UI](http://mint-ui.github.io/#!/zh-cn)，基于 Vue.js 的移动端组件库
 6 | 
 7 | > 要想统一处理所有http请求和响应，就得用上 axios 的拦截器。通过配置http response inteceptor，当后端接口返回-555 （未授权），让用户重新登录。
 8 | 
 9 | ```code
10 | axios.interceptors.request.use(function (config) {
11 |     return config;
12 | }, function (error) {
13 |     return Promise.reject(error);
14 | });
15 | 
16 | //请求完成
17 | axios.interceptors.response.use(function (response) {
18 |     if(response.data.code == -555){
19 |         //未登录
20 |         router.replace({
21 |             path: 'login',
22 |             query: {path: router.currentRoute.fullPath.slice(1)}
23 |         })
24 |     }
25 |     return response;
26 | }, function (error) {
27 |     return Promise.reject(error);
28 | });
29 | ```
30 | 
31 | 通过上面这两步，就可以在前端实现登录拦截了。登出功能也就很简单，只需要把当前token清除，再跳转到首页即可。
32 | 
33 | > 如果对您有帮助，您可以点右上角 "Star" 支持一下 谢谢！ ^_^
34 | 
35 | # 说明 
36 | 
37 | 因该例子是以公司项目开发的，并没完全做完，所以仅提供学习参考。
38 | 
39 | ## 技术栈
40 | 
41 | > vue </br>
42 | 
43 | > vue-router </br>
44 | 
45 | > axios </br>
46 | 
47 | > mockjs </br>
48 | 
49 | > webpack </br>
50 | 
51 | ## 执行命令
52 | 
53 | 通过npm安装本地服务第三方依赖模块(需要已安装Node.js)，使用npm安装依赖模块可能会很慢，建议换成cnpm<br/>
54 | 
55 | npm install -g cnpm --registry=http://registry.npm.taobao.org<br/>
56 | 
57 | > cnpm install </br>
58 | 
59 | > npm run dev </br>
60 | 
61 | > npm run build </br>
62 | 
63 | 


--------------------------------------------------------------------------------
/build/build.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | require('./check-versions')()
 3 | 
 4 | process.env.NODE_ENV = 'production'
 5 | 
 6 | const ora = require('ora')
 7 | const rm = require('rimraf')
 8 | const path = require('path')
 9 | const chalk = require('chalk')
10 | const webpack = require('webpack')
11 | const config = require('../config')
12 | const webpackConfig = require('./webpack.prod.conf')
13 | 
14 | const spinner = ora('building for production...')
15 | spinner.start()
16 | 
17 | rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
18 |   if (err) throw err
19 |   webpack(webpackConfig, (err, stats) => {
20 |     spinner.stop()
21 |     if (err) throw err
22 |     process.stdout.write(stats.toString({
23 |       colors: true,
24 |       modules: false,
25 |       children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
26 |       chunks: false,
27 |       chunkModules: false
28 |     }) + '\n\n')
29 | 
30 |     if (stats.hasErrors()) {
31 |       console.log(chalk.red('  Build failed with errors.\n'))
32 |       process.exit(1)
33 |     }
34 | 
35 |     console.log(chalk.cyan('  Build complete.\n'))
36 |     console.log(chalk.yellow(
37 |       '  Tip: built files are meant to be served over an HTTP server.\n' +
38 |       '  Opening index.html over file:// won\'t work.\n'
39 |     ))
40 |   })
41 | })
42 | 


--------------------------------------------------------------------------------
/build/check-versions.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | const chalk = require('chalk')
 3 | const semver = require('semver')
 4 | const packageConfig = require('../package.json')
 5 | const shell = require('shelljs')
 6 | 
 7 | function exec (cmd) {
 8 |   return require('child_process').execSync(cmd).toString().trim()
 9 | }
10 | 
11 | const versionRequirements = [
12 |   {
13 |     name: 'node',
14 |     currentVersion: semver.clean(process.version),
15 |     versionRequirement: packageConfig.engines.node
16 |   }
17 | ]
18 | 
19 | if (shell.which('npm')) {
20 |   versionRequirements.push({
21 |     name: 'npm',
22 |     currentVersion: exec('npm --version'),
23 |     versionRequirement: packageConfig.engines.npm
24 |   })
25 | }
26 | 
27 | module.exports = function () {
28 |   const warnings = []
29 | 
30 |   for (let i = 0; i < versionRequirements.length; i++) {
31 |     const mod = versionRequirements[i]
32 | 
33 |     if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
34 |       warnings.push(mod.name + ': ' +
35 |         chalk.red(mod.currentVersion) + ' should be ' +
36 |         chalk.green(mod.versionRequirement)
37 |       )
38 |     }
39 |   }
40 | 
41 |   if (warnings.length) {
42 |     console.log('')
43 |     console.log(chalk.yellow('To use this template, you must update following to modules:'))
44 |     console.log()
45 | 
46 |     for (let i = 0; i < warnings.length; i++) {
47 |       const warning = warnings[i]
48 |       console.log('  ' + warning)
49 |     }
50 | 
51 |     console.log()
52 |     process.exit(1)
53 |   }
54 | }
55 | 


--------------------------------------------------------------------------------
/build/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/galan99/vue-mintUI-demo/4c6b247bbc04cdcaca2462e9adc74b0c72a324f4/build/logo.png


--------------------------------------------------------------------------------
/build/utils.js:
--------------------------------------------------------------------------------
  1 | 'use strict'
  2 | const path = require('path')
  3 | const config = require('../config')
  4 | const ExtractTextPlugin = require('extract-text-webpack-plugin')
  5 | const packageConfig = require('../package.json')
  6 | 
  7 | exports.assetsPath = function (_path) {
  8 |   const assetsSubDirectory = process.env.NODE_ENV === 'production'
  9 |     ? config.build.assetsSubDirectory
 10 |     : config.dev.assetsSubDirectory
 11 | 
 12 |   return path.posix.join(assetsSubDirectory, _path)
 13 | }
 14 | 
 15 | exports.cssLoaders = function (options) {
 16 |   options = options || {}
 17 | 
 18 |   const cssLoader = {
 19 |     loader: 'css-loader',
 20 |     options: {
 21 |       sourceMap: options.sourceMap
 22 |     }
 23 |   }
 24 | 
 25 |   const postcssLoader = {
 26 |     loader: 'postcss-loader',
 27 |     options: {
 28 |       sourceMap: options.sourceMap
 29 |     }
 30 |   }
 31 | 
 32 |   // generate loader string to be used with extract text plugin
 33 |   function generateLoaders (loader, loaderOptions) {
 34 |     const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
 35 | 
 36 |     if (loader) {
 37 |       loaders.push({
 38 |         loader: loader + '-loader',
 39 |         options: Object.assign({}, loaderOptions, {
 40 |           sourceMap: options.sourceMap
 41 |         })
 42 |       })
 43 |     }
 44 | 
 45 |     // Extract CSS when that option is specified
 46 |     // (which is the case during production build)
 47 |     if (options.extract) {
 48 |       return ExtractTextPlugin.extract({
 49 |         use: loaders,
 50 |         fallback: 'vue-style-loader'
 51 |       })
 52 |     } else {
 53 |       return ['vue-style-loader'].concat(loaders)
 54 |     }
 55 |   }
 56 | 
 57 |   // https://vue-loader.vuejs.org/en/configurations/extract-css.html
 58 |   return {
 59 |     css: generateLoaders(),
 60 |     postcss: generateLoaders(),
 61 |     less: generateLoaders('less'),
 62 |     sass: generateLoaders('sass', { indentedSyntax: true }),
 63 |     scss: generateLoaders('sass'),
 64 |     stylus: generateLoaders('stylus'),
 65 |     styl: generateLoaders('stylus')
 66 |   }
 67 | }
 68 | 
 69 | // Generate loaders for standalone style files (outside of .vue)
 70 | exports.styleLoaders = function (options) {
 71 |   const output = []
 72 |   const loaders = exports.cssLoaders(options)
 73 | 
 74 |   for (const extension in loaders) {
 75 |     const loader = loaders[extension]
 76 |     output.push({
 77 |       test: new RegExp('\\.' + extension + '$'),
 78 |       use: loader
 79 |     })
 80 |   }
 81 | 
 82 |   return output
 83 | }
 84 | 
 85 | exports.createNotifierCallback = () => {
 86 |   const notifier = require('node-notifier')
 87 | 
 88 |   return (severity, errors) => {
 89 |     if (severity !== 'error') return
 90 | 
 91 |     const error = errors[0]
 92 |     const filename = error.file && error.file.split('!').pop()
 93 | 
 94 |     notifier.notify({
 95 |       title: packageConfig.name,
 96 |       message: severity + ': ' + error.name,
 97 |       subtitle: filename || '',
 98 |       icon: path.join(__dirname, 'logo.png')
 99 |     })
100 |   }
101 | }
102 | 


--------------------------------------------------------------------------------
/build/vue-loader.conf.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | const utils = require('./utils')
 3 | const config = require('../config')
 4 | const isProduction = process.env.NODE_ENV === 'production'
 5 | const sourceMapEnabled = isProduction
 6 |   ? config.build.productionSourceMap
 7 |   : config.dev.cssSourceMap
 8 | 
 9 | module.exports = {
10 |   loaders: utils.cssLoaders({
11 |     sourceMap: sourceMapEnabled,
12 |     extract: isProduction
13 |   }),
14 |   cssSourceMap: sourceMapEnabled,
15 |   cacheBusting: config.dev.cacheBusting,
16 |   transformToRequire: {
17 |     video: ['src', 'poster'],
18 |     source: 'src',
19 |     img: 'src',
20 |     image: 'xlink:href'
21 |   }
22 | }
23 | 


--------------------------------------------------------------------------------
/build/webpack.base.conf.js:
--------------------------------------------------------------------------------
  1 | 'use strict'
  2 | const path = require('path')
  3 | const utils = require('./utils')
  4 | const config = require('../config')
  5 | const vueLoaderConfig = require('./vue-loader.conf')
  6 | 
  7 | 
  8 | function resolve (dir) {
  9 |   return path.join(__dirname, '..', dir)
 10 | }
 11 | 
 12 | 
 13 | module.exports = {
 14 |   context: path.resolve(__dirname, '../'),
 15 |   entry: {
 16 |     app: './src/main.js'
 17 |   },
 18 |   output: {
 19 |     path: config.build.assetsRoot,
 20 |     filename: '[name].js',
 21 |     publicPath: process.env.NODE_ENV === 'production'
 22 |       ? config.build.assetsPublicPath
 23 |       : config.dev.assetsPublicPath
 24 |   },
 25 |   resolve: {
 26 |     extensions: ['.js', '.vue', '.json','.less'],
 27 |     modules: [
 28 |       resolve('src'),
 29 |       resolve('node_modules')
 30 |     ],
 31 |     alias: {
 32 |       'vue$': 'vue/dist/vue.common.js',
 33 |       'src': resolve('src'),
 34 |       'assets': resolve('src/assets'),
 35 |       'components': resolve('src/components')
 36 |     }
 37 |   },
 38 |   module: {
 39 |     loaders: [
 40 |       {
 41 |           test: /\.js$/,
 42 |           exclude: /(node_modules|bower_components)/,
 43 |           loader: 'babel',
 44 |           query: {
 45 |               presets: ['es2015']
 46 |           }
 47 |       }
 48 |     ],
 49 |     rules: [
 50 |       {
 51 |         test: /\.vue$/,
 52 |         loader: 'vue-loader',
 53 |         options: vueLoaderConfig
 54 |       },
 55 |       {
 56 |         test: /\.js$/,
 57 |         loader: 'babel-loader',
 58 |         include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
 59 |       },
 60 |       {
 61 |         test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
 62 |         loader: 'url-loader',
 63 |         options: {
 64 |           limit: 10000,
 65 |           name: utils.assetsPath('img/[name].[ext]')
 66 |         }
 67 |       },
 68 |       {
 69 |         test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
 70 |         loader: 'url-loader',
 71 |         options: {
 72 |           limit: 10000,
 73 |           name: utils.assetsPath('media/[name].[ext]')
 74 |         }
 75 |       },
 76 |       {
 77 |         test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
 78 |         loader: 'url-loader',
 79 |         options: {
 80 |           limit: 10000,
 81 |           name: utils.assetsPath('fonts/[name].[ext]')
 82 |         }
 83 |       }
 84 |     ]
 85 |   },
 86 |   node: {
 87 |     // prevent webpack from injecting useless setImmediate polyfill because Vue
 88 |     // source contains it (although only uses it if it's native).
 89 |     setImmediate: false,
 90 |     // prevent webpack from injecting mocks to Node native modules
 91 |     // that does not make sense for the client
 92 |     dgram: 'empty',
 93 |     fs: 'empty',
 94 |     net: 'empty',
 95 |     tls: 'empty',
 96 |     child_process: 'empty'
 97 |   },
 98 | }
 99 | 
100 | 
101 | 


--------------------------------------------------------------------------------
/build/webpack.dev.conf.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | const utils = require('./utils')
 3 | const webpack = require('webpack')
 4 | const config = require('../config')
 5 | const merge = require('webpack-merge')
 6 | const path = require('path')
 7 | const baseWebpackConfig = require('./webpack.base.conf')
 8 | const CopyWebpackPlugin = require('copy-webpack-plugin')
 9 | const HtmlWebpackPlugin = require('html-webpack-plugin')
10 | const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
11 | const portfinder = require('portfinder')
12 | 
13 | const HOST = process.env.HOST
14 | const PORT = process.env.PORT && Number(process.env.PORT)
15 | 
16 | const devWebpackConfig = merge(baseWebpackConfig, {
17 |   module: {
18 |     rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
19 |   },
20 |   // cheap-module-eval-source-map is faster for development
21 |   devtool: config.dev.devtool,
22 | 
23 |   // these devServer options should be customized in /config/index.js
24 |   devServer: {
25 |     clientLogLevel: 'warning',
26 |     historyApiFallback: {
27 |       rewrites: [
28 |         { from: /.*/, to: path.join(config.dev.assetsPublicPath, 'index.html') },
29 |       ],
30 |     },
31 |     hot: true,
32 |     contentBase: false, // since we use CopyWebpackPlugin.
33 |     compress: true,
34 |     host: HOST || config.dev.host,
35 |     port: PORT || config.dev.port,
36 |     open: config.dev.autoOpenBrowser,
37 |     overlay: config.dev.errorOverlay
38 |       ? { warnings: false, errors: true }
39 |       : false,
40 |     publicPath: config.dev.assetsPublicPath,
41 |     proxy: config.dev.proxyTable,
42 |     quiet: true, // necessary for FriendlyErrorsPlugin
43 |     watchOptions: {
44 |       poll: config.dev.poll,
45 |     }
46 |   },
47 |   plugins: [
48 |     new webpack.DefinePlugin({
49 |       'process.env': require('../config/dev.env')
50 |     }),
51 |     new webpack.HotModuleReplacementPlugin(),
52 |     new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
53 |     new webpack.NoEmitOnErrorsPlugin(),
54 |     // https://github.com/ampedandwired/html-webpack-plugin
55 |     new HtmlWebpackPlugin({
56 |       filename: 'index.html',
57 |       template: 'index.html',
58 |       inject: true
59 |     }),
60 |     // copy custom static assets
61 |     new CopyWebpackPlugin([
62 |       {
63 |         from: path.resolve(__dirname, '../static'),
64 |         to: config.dev.assetsSubDirectory,
65 |         ignore: ['.*']
66 |       }
67 |     ])
68 |   ]
69 | })
70 | 
71 | module.exports = new Promise((resolve, reject) => {
72 |   portfinder.basePort = process.env.PORT || config.dev.port
73 |   portfinder.getPort((err, port) => {
74 |     if (err) {
75 |       reject(err)
76 |     } else {
77 |       // publish the new Port, necessary for e2e tests
78 |       process.env.PORT = port
79 |       // add port to devServer config
80 |       devWebpackConfig.devServer.port = port
81 | 
82 |       // Add FriendlyErrorsPlugin
83 |       devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
84 |         compilationSuccessInfo: {
85 |           messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
86 |         },
87 |         onErrors: config.dev.notifyOnErrors
88 |         ? utils.createNotifierCallback()
89 |         : undefined
90 |       }))
91 | 
92 |       resolve(devWebpackConfig)
93 |     }
94 |   })
95 | })
96 | 


--------------------------------------------------------------------------------
/build/webpack.prod.conf.js:
--------------------------------------------------------------------------------
  1 | 'use strict'
  2 | const path = require('path')
  3 | const utils = require('./utils')
  4 | const webpack = require('webpack')
  5 | const config = require('../config')
  6 | const merge = require('webpack-merge')
  7 | const baseWebpackConfig = require('./webpack.base.conf')
  8 | const CopyWebpackPlugin = require('copy-webpack-plugin')
  9 | const HtmlWebpackPlugin = require('html-webpack-plugin')
 10 | const ExtractTextPlugin = require('extract-text-webpack-plugin')
 11 | const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
 12 | const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
 13 | 
 14 | const env = require('../config/prod.env')
 15 | 
 16 | const webpackConfig = merge(baseWebpackConfig, {
 17 |   module: {
 18 |     rules: utils.styleLoaders({
 19 |       sourceMap: config.build.productionSourceMap,
 20 |       extract: true,
 21 |       usePostCSS: true
 22 |     })
 23 |   },
 24 |   devtool: config.build.productionSourceMap ? config.build.devtool : false,
 25 |   output: {
 26 |     path: config.build.assetsRoot,
 27 |     filename: utils.assetsPath('js/[name].[chunkhash].js'),
 28 |     chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
 29 |   },
 30 |   plugins: [
 31 |     // http://vuejs.github.io/vue-loader/en/workflow/production.html
 32 |     new webpack.DefinePlugin({
 33 |       'process.env': env
 34 |     }),
 35 |     new UglifyJsPlugin({
 36 |       uglifyOptions: {
 37 |         compress: {
 38 |           warnings: false
 39 |         }
 40 |       },
 41 |       sourceMap: config.build.productionSourceMap,
 42 |       parallel: true
 43 |     }),
 44 |     // extract css into its own file
 45 |     new ExtractTextPlugin({
 46 |       filename: utils.assetsPath('css/[name].[contenthash].css'),
 47 |       // Setting the following option to `false` will not extract CSS from codesplit chunks.
 48 |       // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
 49 |       // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`, 
 50 |       // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
 51 |       allChunks: true,
 52 |     }),
 53 |     // Compress extracted CSS. We are using this plugin so that possible
 54 |     // duplicated CSS from different components can be deduped.
 55 |     new OptimizeCSSPlugin({
 56 |       cssProcessorOptions: config.build.productionSourceMap
 57 |         ? { safe: true, map: { inline: false } }
 58 |         : { safe: true }
 59 |     }),
 60 |     // generate dist index.html with correct asset hash for caching.
 61 |     // you can customize output by editing /index.html
 62 |     // see https://github.com/ampedandwired/html-webpack-plugin
 63 |     new HtmlWebpackPlugin({
 64 |       filename: config.build.index,
 65 |       template: 'index.html',
 66 |       inject: true,
 67 |       minify: {
 68 |         removeComments: true,
 69 |         collapseWhitespace: true,
 70 |         removeAttributeQuotes: true
 71 |         // more options:
 72 |         // https://github.com/kangax/html-minifier#options-quick-reference
 73 |       },
 74 |       // necessary to consistently work with multiple chunks via CommonsChunkPlugin
 75 |       chunksSortMode: 'dependency'
 76 |     }),
 77 |     // keep module.id stable when vendor modules does not change
 78 |     new webpack.HashedModuleIdsPlugin(),
 79 |     // enable scope hoisting
 80 |     new webpack.optimize.ModuleConcatenationPlugin(),
 81 |     // split vendor js into its own file
 82 |     new webpack.optimize.CommonsChunkPlugin({
 83 |       name: 'vendor',
 84 |       minChunks (module) {
 85 |         // any required modules inside node_modules are extracted to vendor
 86 |         return (
 87 |           module.resource &&
 88 |           /\.js$/.test(module.resource) &&
 89 |           module.resource.indexOf(
 90 |             path.join(__dirname, '../node_modules')
 91 |           ) === 0
 92 |         )
 93 |       }
 94 |     }),
 95 |     // extract webpack runtime and module manifest to its own file in order to
 96 |     // prevent vendor hash from being updated whenever app bundle is updated
 97 |     new webpack.optimize.CommonsChunkPlugin({
 98 |       name: 'manifest',
 99 |       minChunks: Infinity
100 |     }),
101 |     // This instance extracts shared chunks from code splitted chunks and bundles them
102 |     // in a separate chunk, similar to the vendor chunk
103 |     // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
104 |     new webpack.optimize.CommonsChunkPlugin({
105 |       name: 'app',
106 |       async: 'vendor-async',
107 |       children: true,
108 |       minChunks: 3
109 |     }),
110 | 
111 |     // copy custom static assets
112 |     new CopyWebpackPlugin([
113 |       {
114 |         from: path.resolve(__dirname, '../static'),
115 |         to: config.build.assetsSubDirectory,
116 |         ignore: ['.*']
117 |       }
118 |     ])
119 |   ]
120 | })
121 | 
122 | if (config.build.productionGzip) {
123 |   const CompressionWebpackPlugin = require('compression-webpack-plugin')
124 | 
125 |   webpackConfig.plugins.push(
126 |     new CompressionWebpackPlugin({
127 |       asset: '[path].gz[query]',
128 |       algorithm: 'gzip',
129 |       test: new RegExp(
130 |         '\\.(' +
131 |         config.build.productionGzipExtensions.join('|') +
132 |         ')$'
133 |       ),
134 |       threshold: 10240,
135 |       minRatio: 0.8
136 |     })
137 |   )
138 | }
139 | 
140 | if (config.build.bundleAnalyzerReport) {
141 |   const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
142 |   webpackConfig.plugins.push(new BundleAnalyzerPlugin())
143 | }
144 | 
145 | module.exports = webpackConfig
146 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/config/index.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | // Template version: 1.2.8
 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 |         '/config': {
15 |             target: 'http://192.168.4.124:9900',
16 |             changeOrigin: true,
17 |             pathRewrite: {
18 |                 '^/config': '/config'
19 |             }, /*headers: {
20 |              'Cookie': 'SID=810q3nmoi5mfp8geb9bkm9jql0;' //这里可以设置cookies, 也可以不设置
21 |              }*/
22 |         }, 
23 |     },
24 | 
25 |     // Various Dev Server settings
26 |     host: 'localhost', // can be overwritten by process.env.HOST
27 |     port: 7777, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
28 |     autoOpenBrowser: true,
29 |     errorOverlay: true,
30 |     notifyOnErrors: true,
31 |     poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
32 | 
33 |     
34 |     /**
35 |      * Source Maps
36 |      */
37 | 
38 |     // https://webpack.js.org/configuration/devtool/#development
39 |     devtool: 'cheap-module-eval-source-map',
40 | 
41 |     // If you have problems debugging vue-files in devtools,
42 |     // set this to false - it *may* help
43 |     // https://vue-loader.vuejs.org/en/options.html#cachebusting
44 |     cacheBusting: true,
45 | 
46 |     cssSourceMap: true,
47 |   },
48 | 
49 |   build: {
50 |     // Template for index.html
51 |     index: path.resolve(__dirname, '../dist/index.html'),
52 | 
53 |     // Paths
54 |     assetsRoot: path.resolve(__dirname, '../dist'),
55 |     assetsSubDirectory: 'static',
56 |     assetsPublicPath: './',
57 | 
58 |     /**
59 |      * Source Maps
60 |      */
61 | 
62 |     productionSourceMap: false,
63 |     // https://webpack.js.org/configuration/devtool/#production
64 |     devtool: '#source-map',
65 | 
66 |     // Gzip off by default as many popular static hosts such as
67 |     // Surge or Netlify already gzip all static assets for you.
68 |     // Before setting to `true`, make sure to:
69 |     // npm install --save-dev compression-webpack-plugin
70 |     productionGzip: false,
71 |     productionGzipExtensions: ['js', 'css'],
72 | 
73 |     // Run the build command with an extra argument to
74 |     // View the bundle analyzer report after build finishes:
75 |     // `npm run build --report`
76 |     // Set to `true` or `false` to always turn it on or off
77 |     bundleAnalyzerReport: process.env.npm_config_report
78 |   }
79 | }
80 | 


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


--------------------------------------------------------------------------------
/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, maximum-scale=1, minimum-scale=1, user-scalable=no">
 6 |     <meta content="telephone=no" name="format-detection" />
 7 |     <meta name="keywords" content="" />
 8 |     <meta name="description" content="" />
 9 |     <title>微信社区</title>
10 |   </head>
11 |   <body>
12 |     <div id="app"></div>
13 |     <!-- built files will be auto injected -->
14 |   </body>
15 | </html>
16 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "shequ",
 3 |   "version": "1.0.0",
 4 |   "description": "A Vue.js project",
 5 |   "author": "galan.wang <619531862@qq.com>",
 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 |     "less": "^2.7.3",
15 |     "less-loader": "^4.0.5",
16 |     "mint-ui": "^2.2.13",
17 |     "mockjs": "^1.0.1-beta3",
18 |     "vue": "^2.5.2",
19 |     "vue-router": "^3.0.1"
20 |   },
21 |   "devDependencies": {
22 |     "autoprefixer": "^7.1.2",
23 |     "babel-core": "^6.22.1",
24 |     "babel-helper-vue-jsx-merge-props": "^2.0.3",
25 |     "babel-loader": "^7.1.1",
26 |     "babel-plugin-component": "^1.0.0",
27 |     "babel-plugin-syntax-jsx": "^6.18.0",
28 |     "babel-plugin-transform-runtime": "^6.22.0",
29 |     "babel-plugin-transform-vue-jsx": "^3.5.0",
30 |     "babel-preset-env": "^1.3.2",
31 |     "babel-preset-es2015": "^6.24.1",
32 |     "babel-preset-stage-2": "^6.22.0",
33 |     "chalk": "^2.0.1",
34 |     "copy-webpack-plugin": "^4.0.1",
35 |     "css-loader": "^0.28.0",
36 |     "extract-text-webpack-plugin": "^3.0.0",
37 |     "file-loader": "^1.1.4",
38 |     "friendly-errors-webpack-plugin": "^1.6.1",
39 |     "html-webpack-plugin": "^2.30.1",
40 |     "node-notifier": "^5.1.2",
41 |     "optimize-css-assets-webpack-plugin": "^3.2.0",
42 |     "ora": "^1.2.0",
43 |     "portfinder": "^1.0.13",
44 |     "postcss-import": "^11.0.0",
45 |     "postcss-loader": "^2.0.8",
46 |     "postcss-url": "^7.2.1",
47 |     "rimraf": "^2.6.0",
48 |     "semver": "^5.3.0",
49 |     "shelljs": "^0.7.6",
50 |     "uglifyjs-webpack-plugin": "^1.1.1",
51 |     "url-loader": "^0.5.8",
52 |     "vue-loader": "^13.3.0",
53 |     "vue-style-loader": "^3.0.1",
54 |     "vue-template-compiler": "^2.5.2",
55 |     "webpack": "^3.6.0",
56 |     "webpack-bundle-analyzer": "^2.9.0",
57 |     "webpack-dev-server": "^2.9.1",
58 |     "webpack-merge": "^4.1.0"
59 |   },
60 |   "engines": {
61 |     "node": ">= 6.0.0",
62 |     "npm": ">= 3.0.0"
63 |   },
64 |   "browserslist": [
65 |     "> 1%",
66 |     "last 2 versions",
67 |     "not ie <= 8"
68 |   ]
69 | }
70 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <router-view/>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   name: 'app',
10 | }
11 | </script>
12 | <style>
13 |     /* 通用样式引入 */
14 |     @import "assets/css/main.less";
15 |     body{
16 |       max-width: 640px;
17 |       margin: 0 auto;
18 |       background: rgb(255,255,255);
19 |       overflow-x: hidden;
20 |       padding: 0;
21 |       width:6.4rem;
22 |     }
23 |     #app{
24 |       position: relative;    
25 |     }
26 |     .m-tag{
27 |       display: inline-block;
28 |       padding: 0 .1rem;
29 |       color: #fff;
30 |       line-height: .32rem;
31 |       margin-left: .08rem;
32 |       border-radius: .03rem;
33 |       vertical-align: middle;
34 |       font-size: .2rem;
35 |     }
36 | </style>
37 | 


--------------------------------------------------------------------------------
/src/assets/css/main.less:
--------------------------------------------------------------------------------
  1 | body,div,span,h1,h2,h3,h4,h5,h6,p,a,code,em,img,q,small,blockquote,strong,dd,dl,dt,li,ol,ul,form,label,table,tbody,tr,th,td,input{margin:0;padding:0;border:0}
  2 | body{font-size:.28rem;max-width:1080px;margin:0 auto;background:#f6f6f6;font-family:'STHeiti','Microsoft YaHei',Helvetica,Arial,sans-serif;-webkit-tap-highlight-color:rgba(0,0,0,0)}
  3 | h1,h3,h4,h5,h6,h2{font-weight: normal;}
  4 | em,b,s{font-style: normal;}
  5 | a,a:active,a:hover,a:focus,a:visited{text-decoration:none}
  6 | a,img{-webkit-touch-callout:none}
  7 | li{list-style:none}
  8 | textarea,input[type="password"],input[type="text"]{resize:none;outline:0;-webkit-appearance:none;white-space:pre-wrap;word-wrap:break-word;background:#fff}
  9 | .clearfix:after{display:block;clear:both;content:"";visibility:hidden;height:0}
 10 | html{-webkit-text-size-adjust: 100%;}
 11 | body{width:7.5rem}
 12 | input {
 13 |     -webkit-appearance: none;
 14 |     -webkit-tap-highlight-color: transparent;
 15 | }
 16 | img { 
 17 |     max-width: 100%; 
 18 |     border:none; 
 19 |     vertical-align:middle; 
 20 | }
 21 | /*box*/
 22 | .dbox{
 23 |     display: -webkit-box;
 24 |     display: box;
 25 |     display: -webkit-flex;
 26 |     display: flex;
 27 | }
 28 | .box-justify {
 29 |     display: -webkit-box;
 30 |     display: box;
 31 |     display: -webkit-flex;
 32 |     display: flex;
 33 |     -webkit-box-pack: justify;
 34 |     box-pack: justify;
 35 |     -webkit-justify-content: space-between;
 36 |     justify-content: space-between;
 37 | }
 38 | .box-center {
 39 |     display: -webkit-box;
 40 |     display: box;
 41 |     display: -webkit-flex;
 42 |     display: flex;
 43 |     -webkit-box-pack: center;
 44 |     box-pack: center;
 45 |     -webkit-justify-content: center;
 46 |     justify-content: center;
 47 | }
 48 | .flex {
 49 |     -webkit-box-flex: 1;
 50 |     box-flex: 1;
 51 |     -webkit-flex: 1;
 52 |     flex: 1;   
 53 | }
 54 | .elli{
 55 |     text-overflow: ellipsis;
 56 |     white-space: nowrap;
 57 |     overflow: hidden;
 58 | }
 59 | 
 60 | /*load*/
 61 | .zz{
 62 |     position: absolute;
 63 |     left: 0;
 64 |     top: 0;
 65 |     right: 0;
 66 |     bottom: 0;
 67 |     background: rgba(0,0,0,.5);
 68 |     z-index: 9999;
 69 | }
 70 | .zz>p{
 71 |     position: absolute;
 72 |     left: 0;
 73 |     top: 35%;
 74 |     width: 100%;
 75 |     text-align: center;
 76 |     color: #fff;
 77 | }
 78 | 
 79 | .loading{
 80 |     width: 30px;
 81 |     height: 30px;
 82 |     border: 1px #fff solid;
 83 |     border-radius: 50%;
 84 |     -webkit-animation: rotation 1s ease-in-out infinite;
 85 |     -moz-animation: rotation 1s ease-in-out infinite;
 86 |     animation: rotation 1s ease-in-out infinite;
 87 |     margin: 130px auto;
 88 | }
 89 | .loading:after{
 90 |     width: 5px;
 91 |     height: 5px;
 92 |     background-color: rgba(255,255,255,1);
 93 |     border-radius: 100%;
 94 |     position: absolute;
 95 |     content: "";
 96 | }
 97 | @-webkit-keyframes rotation{
 98 |     0%{-webkit-transform: rotate(0deg);}
 99 |     100%{-webkit-transform: rotate(360deg);}
100 | }
101 | @keyframes rotation{
102 |     0%{transform: rotate(0deg);}
103 |     100%{transform: rotate(360deg);}
104 | }
105 | 
106 | /*提示语*/
107 | .cmTips{
108 |     position:fixed;
109 |     left:0;
110 |     right:0;
111 |     top:10px;
112 |     z-index:99;
113 |     padding:20px 20px 5px;
114 |     text-align:center;
115 |     z-index:99999;
116 |     color:#fff;
117 |     overflow:hidden;
118 |     display:-webkit-box;
119 |     display:box;
120 |     -webkit-transform:translateY(-100%);
121 |     transform:translateY(-100%);
122 |     -webkit-transition-delay:1s;
123 |     transition-delay: 1s;
124 |     -webkit-transition-duration:.5s;
125 |     transition-duration:.5s;
126 |     -webkit-transition-duration:500ms;
127 |     transition-duration:500ms;
128 | }
129 | .cmTips p{
130 |     min-width:150px;
131 |     padding:5px 20px;
132 |     margin:0 auto;
133 |     border-radius:5px;
134 |     box-shadow:0 1px 2px rgba(0,0,0,.8);
135 |     background:rgba(0,0,0,.8);
136 |     font-size:14px;
137 |     line-height:30px;
138 | }
139 | .cmTips{-webkit-animation:tips .5s linear both,tipsHide .5s 3s linear forwards;/*animation:tips .5s linear both,tipsHide .5s 3s linear forwards;*/}
140 | @-webkit-keyframes tips{from {-webkit-transform:translateY(-100%);opacity:0}to { -webkit-transform:translateY(0%);opacity:1;}}
141 | @keyframes tips{from{-webkit-transform:translateY(-100%);opacity:0}to{ -webkit-transform:translateY(0%);opacity:1;}}
142 | @-webkit-keyframes tipsHide{from{-webkit-transform:translateY(0%);opacity:1}to{-webkit-transform:translateY(-100%);opacity:0;}}
143 | @keyframes tipsHide{from{-webkit-transform:translateY(0%);opacity:1}to{-webkit-transform:translateY(-100%);opacity:0;}}
144 | 
145 | .page-infinite-loading,.nomore{
146 |     text-align: center;
147 |     height: 50px;
148 |     line-height: 50px;
149 |     color:#666;   
150 | }
151 | .page-infinite-loading .mint-spinner-fading-circle{
152 |     display: inline-block;
153 |     vertical-align: middle;
154 |     margin-right: 8px;
155 | }
156 | body,html{
157 |     -webkit-overflow-scrolling: touch;
158 | }
159 | .mint-toast{
160 |     min-width: 3rem;
161 | }


--------------------------------------------------------------------------------
/src/assets/img/delete.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/galan99/vue-mintUI-demo/4c6b247bbc04cdcaca2462e9adc74b0c72a324f4/src/assets/img/delete.png


--------------------------------------------------------------------------------
/src/assets/img/det-file.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/galan99/vue-mintUI-demo/4c6b247bbc04cdcaca2462e9adc74b0c72a324f4/src/assets/img/det-file.png


--------------------------------------------------------------------------------
/src/assets/img/det-write.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/galan99/vue-mintUI-demo/4c6b247bbc04cdcaca2462e9adc74b0c72a324f4/src/assets/img/det-write.png


--------------------------------------------------------------------------------
/src/assets/img/dis-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/galan99/vue-mintUI-demo/4c6b247bbc04cdcaca2462e9adc74b0c72a324f4/src/assets/img/dis-1.png


--------------------------------------------------------------------------------
/src/assets/img/dis-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/galan99/vue-mintUI-demo/4c6b247bbc04cdcaca2462e9adc74b0c72a324f4/src/assets/img/dis-2.png


--------------------------------------------------------------------------------
/src/assets/img/dis-22.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/galan99/vue-mintUI-demo/4c6b247bbc04cdcaca2462e9adc74b0c72a324f4/src/assets/img/dis-22.png


--------------------------------------------------------------------------------
/src/assets/img/editor.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/galan99/vue-mintUI-demo/4c6b247bbc04cdcaca2462e9adc74b0c72a324f4/src/assets/img/editor.png


--------------------------------------------------------------------------------
/src/assets/img/foot1-1020.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/galan99/vue-mintUI-demo/4c6b247bbc04cdcaca2462e9adc74b0c72a324f4/src/assets/img/foot1-1020.png


--------------------------------------------------------------------------------
/src/assets/img/foot2-1020.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/galan99/vue-mintUI-demo/4c6b247bbc04cdcaca2462e9adc74b0c72a324f4/src/assets/img/foot2-1020.png


--------------------------------------------------------------------------------
/src/assets/img/foot3-1020.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/galan99/vue-mintUI-demo/4c6b247bbc04cdcaca2462e9adc74b0c72a324f4/src/assets/img/foot3-1020.png


--------------------------------------------------------------------------------
/src/assets/img/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/galan99/vue-mintUI-demo/4c6b247bbc04cdcaca2462e9adc74b0c72a324f4/src/assets/img/icon.png


--------------------------------------------------------------------------------
/src/assets/img/icon_login_code.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/galan99/vue-mintUI-demo/4c6b247bbc04cdcaca2462e9adc74b0c72a324f4/src/assets/img/icon_login_code.png


--------------------------------------------------------------------------------
/src/assets/img/icon_login_password.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/galan99/vue-mintUI-demo/4c6b247bbc04cdcaca2462e9adc74b0c72a324f4/src/assets/img/icon_login_password.png


--------------------------------------------------------------------------------
/src/assets/img/icon_login_password_again.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/galan99/vue-mintUI-demo/4c6b247bbc04cdcaca2462e9adc74b0c72a324f4/src/assets/img/icon_login_password_again.png


--------------------------------------------------------------------------------
/src/assets/img/icon_login_user.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/galan99/vue-mintUI-demo/4c6b247bbc04cdcaca2462e9adc74b0c72a324f4/src/assets/img/icon_login_user.png


--------------------------------------------------------------------------------
/src/assets/img/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/galan99/vue-mintUI-demo/4c6b247bbc04cdcaca2462e9adc74b0c72a324f4/src/assets/img/logo.png


--------------------------------------------------------------------------------
/src/assets/img/per-bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/galan99/vue-mintUI-demo/4c6b247bbc04cdcaca2462e9adc74b0c72a324f4/src/assets/img/per-bg.jpg


--------------------------------------------------------------------------------
/src/assets/img/per-in.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/galan99/vue-mintUI-demo/4c6b247bbc04cdcaca2462e9adc74b0c72a324f4/src/assets/img/per-in.png


--------------------------------------------------------------------------------
/src/assets/img/top_bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/galan99/vue-mintUI-demo/4c6b247bbc04cdcaca2462e9adc74b0c72a324f4/src/assets/img/top_bg.jpg


--------------------------------------------------------------------------------
/src/assets/img/up.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/galan99/vue-mintUI-demo/4c6b247bbc04cdcaca2462e9adc74b0c72a324f4/src/assets/img/up.png


--------------------------------------------------------------------------------
/src/components/api.js:
--------------------------------------------------------------------------------
 1 | /*
 2 | *author:anlen.wang
 3 | *day:2018-01-05
 4 | */
 5 | import Vue from 'vue';
 6 | import Qs from 'qs';
 7 | import axios from 'axios';
 8 | import router from '../router'
 9 | 
10 | 
11 | //开始请求
12 | axios.interceptors.request.use(function (config) {
13 |     return config;
14 | }, function (error) {
15 |     return Promise.reject(error);
16 | });
17 | 
18 | //请求完成
19 | axios.interceptors.response.use(function (response) {
20 |     if(response.data.code == -555){
21 |         //未登录
22 |         router.replace({
23 |             path: 'login',
24 |             query: {path: router.currentRoute.fullPath.slice(1)}
25 |         })
26 |     }
27 |     if(response.data.code==0){
28 |         //console.log('请求完成')
29 |     }
30 |     return response;
31 | }, function (error) {
32 |     return Promise.reject(error);
33 | });
34 | 
35 | 
36 | export const Ajax= (...rest) => {
37 | 
38 |     function checkStatus(response) {
39 |         if(response.data.code!=0 && response.data.msg){
40 |             console.log(response.data.msg);
41 |         }
42 |         return response.data
43 |     }
44 | 
45 |     function checkCode(res) {
46 |         alert('请求出错，请稍后再试！');
47 |         return res
48 |     }
49 | 
50 |     let data=rest[2];
51 |     let headers={'X-Requested-With': 'XMLHttpRequest'};
52 |     let json={};
53 | 
54 |     if(rest[0].toLowerCase()!='get'){
55 |         data= rest.length == 3 ? Qs.stringify(data) : data;
56 |         headers= {
57 |             'X-Requested-With': 'XMLHttpRequest',
58 |             'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
59 |         };
60 |         json.data=data;
61 |     }else{
62 |         //data.t=new Date().getTime(); //去除get缓存
63 |         json.params=data;
64 |     }
65 | 
66 |     
67 |     json.method=rest[0]; // 请求方式
68 |     json.url=rest[1]; // 请求的地址
69 |     json.timeout= 80000; // 超时时间, 单位毫秒
70 |     json.headers=headers;
71 | 
72 |     return axios(json).then(checkStatus).catch(checkCode);
73 | 
74 | }
75 | 
76 | /*
77 | ajax使用
78 | async comeIn(){
79 |     let postData = {
80 |         page: this.curPage, 
81 |         pageSize: this.pageSize,
82 |         sort: this.sort,
83 |     };
84 |     const data=await Ajax('get',`${this.$url}wpk/popups/list`,postData);
85 |     if(data.code==0){
86 | 
87 |     }
88 | }
89 | */


--------------------------------------------------------------------------------
/src/components/load/index.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Created by anlen.wang on 2018/1/4.
 3 |  */
 4 | import MyLoad from './load.vue'
 5 | const Loading = {
 6 |     install: function(Vue){
 7 |         Vue.component('Loading',MyLoad)
 8 |     }
 9 | }
10 | 
11 | // 导出组件
12 | export default Loading
13 | 


--------------------------------------------------------------------------------
/src/components/load/load.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <section class="zz" id="loading" v-if="loading">
 3 |     <div class="loading"></div>
 4 |   </section>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   name: 'load',
10 |   props:['loading'],
11 | }
12 | </script>
13 | 
14 | <style scoped lang="less" type="text/less" rel="stylesheet/less">
15 | 
16 | </style>
17 | 


--------------------------------------------------------------------------------
/src/components/tip/index.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Created by anlen.wang on 2018/1/4.
 3 |  */
 4 | import MyTip from './tip.vue'
 5 | const Tip = {
 6 |     install: function(Vue){
 7 |         Vue.component('Tip',MyTip)
 8 |     }
 9 | }
10 | 
11 | // 导出组件
12 | export default Tip
13 | 


--------------------------------------------------------------------------------
/src/components/tip/tip.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <section id="cmTips" class="cmTips" v-show="msgKg">
 3 |       <p>{{msg}}</p>
 4 |   </section>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   name: 'tip',
10 |   props:['msg'],
11 |   data() {
12 |       return {
13 |           timer: null,
14 |           msgKg:false,
15 |       };
16 |   },
17 |   watch: {
18 |     'msg':function(val, oldVal){
19 |         console.log(val)        
20 |         if(val||oldVal){
21 |           this.msgKg = true;
22 |           if (this.timer) {
23 |               clearInterval(this.timer);
24 |           }
25 |           this.timer = setTimeout(() => {
26 |               console.log(this)
27 |               this.msgKg = false;
28 |           }, 1000);
29 |         }
30 |     }
31 |   },
32 | }
33 | </script>
34 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App'
 3 | import router from './router'
 4 | //import 'mint-ui/lib/style.css';
 5 | 
 6 | //按需加载mint-ui组件
 7 | import { Toast,Indicator,Spinner,InfiniteScroll } from 'mint-ui';
 8 | window.Toast= Toast;
 9 | window.Indicator= Indicator;
10 | Vue.component(Spinner.name, Spinner);
11 | Vue.use(InfiniteScroll);
12 | 
13 | import {Ajax} from './components/api'
14 | Vue.prototype.$ajax = Ajax;
15 | 
16 | //添加mockjs拦截请求，模拟返回服务器数据
17 | if(process.env.NODE_ENV === 'development') {
18 |   require('./mock/index.js');
19 | }
20 | 
21 | Vue.config.productionTip = false
22 | 
23 | 
24 | /* 同级组件通信通道Bus ，将Bus注册为全局事件 */
25 | const EventBus = new Vue();
26 | Object.defineProperties(Vue.prototype, {
27 |     $bus: {
28 |         get: function () {
29 |             return EventBus
30 |         }
31 |     }
32 | });
33 | 
34 | /* 配置请求域名 */
35 | let $url = '';
36 | let $http = document.location.protocol + "//";
37 | let $host = window.location.host;
38 | if (location.href.indexOf('//localhost') != -1) {
39 |     //本地接口地址
40 |     $url = '';
41 | } else if (location.href.indexOf('//192.168') != -1) {
42 |     //测试接口地址
43 |     $url = $http + $host + "/";
44 | } else {
45 |     // 线上接口地址
46 |     $url = $http + $host + "/";
47 | }
48 | Vue.prototype.$url = $url;
49 | 
50 | /* eslint-disable no-new */
51 | new Vue({
52 |   created(){
53 | 	var devieWidth= Math.min(640,document.documentElement.clientWidth,document.documentElement.clientHeight);
54 | 	var fonSize= devieWidth > 1080 ? 144 : devieWidth / 6.4;
55 | 	document.documentElement.style.fontSize=fonSize+'px';
56 |   },
57 |   el: '#app',
58 |   router,
59 |   template: '<App/>',
60 |   components: { App }
61 | })
62 | 


--------------------------------------------------------------------------------
/src/mock/game.js:
--------------------------------------------------------------------------------
 1 | export const gameList = [
 2 |     {
 3 |         path: '/sdk-game-data/player-data/index',
 4 |         data: {
 5 |                 "code": 0,
 6 |                 "msg": "操作成功",
 7 |                 "data": {
 8 |                     "count": 373,
 9 |                     "curPage": 1,
10 |                     "totalPage": 25,
11 |                     "pageSize": 15,
12 |                     "items|2-10": [
13 |                         {
14 |                             "id":1,
15 |                             "player_id":"1",
16 |                             "fid":229,
17 |                             "game_id":2,
18 |                             "created":'@datetime',
19 |                             "updated":'@datetime',
20 |                             "field_data|15":[
21 |                                 {
22 |                                     "field_name":"field1",
23 |                                     "alias":"field1",
24 |                                     "notes":"星星数",
25 |                                     "icon":"http://192.168.4.124:930/wpk/0/image/b40/0c7/944/b4000c7a9446de87fdf2938aedaa6f02.jpg",
26 |                                     "is_rank|0-1":0,
27 |                                     "rank_num|1-100":20,
28 |                                     "show_type|0-2":1,
29 |                                     "value":"100"
30 |                                 },
31 |                             ],
32 |                             "g_name":'游戏@cname',
33 |                             "f_name":'游戏@cname'
34 |                         }
35 |                     ],
36 |                     "config":{
37 |                         "fieldList":[
38 |                                 "field_name1",
39 |                                 "field_name2",
40 |                                 "field_name3",
41 |                                 "field_name4",
42 |                         ],
43 |                         "gidList":{
44 |                                 "2":"地铁跑酷",
45 |                                 "3":"乱斗之王",
46 |                                 "4":"苍穹变",
47 |                                 "5":"神庙逃亡2",
48 |                                 "8":"南瓜先生大冒险",
49 |                                 "9":"英雄永不灭",
50 |                                 "10":"水果忍者",
51 |                                 "12":"快乐点点消",
52 |                         },
53 |                         "fidList":{
54 |                                 "0":"乐逗游戏",
55 |                                 "229":"三剑豪",
56 |                                 "250":"烈焰遮天",
57 |                                 "299":"地铁跑酷",
58 |                                 "302":"苍穹变",
59 |                                 "307":"纪念碑谷",
60 |                                 "308":"乱斗之王",
61 |                         },
62 |                         "is_rank":[
63 |                                 {"id":"0","name":"否"},
64 |                                 {"id":"1","name":"是"}
65 |                         ],
66 |                         "show_type":[
67 |                                 {"id":"0","name":"不展示"},
68 |                                 {"id":"1","name":"文字"},
69 |                                 {"id":"2","name":"图片"}
70 |                              ],                                                                 
71 |                         },
72 |                     "next": 1
73 |               }
74 |         }
75 |     }
76 | ]


--------------------------------------------------------------------------------
/src/mock/index.js:
--------------------------------------------------------------------------------
 1 | /*
 2 | *author:anlen.wang
 3 | *day:2018-01-08
 4 | 
 5 | 	使用方法
 6 | 	let postData={'mobile':13512345123}
 7 | 	this.$axios.post('/sdk-game-data/player-data/index',postData).then((data)=>{
 8 | 		console.log(data)
 9 | 	})
10 | */
11 | import Vue from 'vue';
12 | import qs from 'qs';
13 | import axios from 'axios';
14 | import Mock from 'mockjs';
15 | import {gameList} from './game.js';
16 | 
17 | let data = [].concat(gameList);
18 | 
19 | data.forEach(function(res){
20 |     Mock.mock(res.path, res.data);
21 | });
22 | 
23 | 
24 | axios.defaults.timeout = 5000;
25 | 
26 | //POST传参序列化
27 | axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
28 | axios.interceptors.request.use((config) => {
29 |   if(config.method  === 'post'){
30 |     config.data = qs.stringify(config.data);
31 |   }
32 |   return config;
33 | },(error) =>{
34 |    alert("错误的传参");
35 |   return Promise.reject(error);
36 | });
37 | 
38 | Vue.prototype.$axios = axios;
39 | 
40 | 
41 | export default Vue;
42 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Router from 'vue-router'
 3 | 
 4 | Vue.use(Router)
 5 | 
 6 | const router = new Router({
 7 |     /*mode: 'history',*/
 8 |     routes: [
 9 |         {
10 |           path: "*",
11 |           redirect: "/"
12 |         },
13 |         {
14 |             path: '/',
15 |             redirect: '/index'
16 |         },
17 |         {
18 |             path: '/index',
19 |             component: resolve => require(['../view/index.vue'], resolve) //首页
20 |         },
21 |         {
22 |             path: '/detail',
23 |             component: resolve => require(['../view/detail.vue'], resolve) //详情页
24 |         },
25 |         {
26 |             path: '/new',
27 |             component: resolve => require(['../view/newThread.vue'], resolve) //创建帖子
28 |         },
29 |         {
30 |             path: '/login',
31 |             component: resolve => require(['../view/login.vue'], resolve) //登录
32 |         },
33 |         {
34 |             path: '/center',
35 |             component: resolve => require(['../view/userCenter.vue'], resolve) //个人中心
36 |         },
37 |         {
38 |             path: '/edit',
39 |             component: resolve => require(['../view/edit.vue'], resolve) //编辑信息
40 |         },
41 |         {
42 |             path: '/myRemind',
43 |             component: resolve => require(['../view/myRemind.vue'], resolve) //提醒-我的回复
44 |         },
45 |         {
46 |             path: '/systemMessage',
47 |             component: resolve => require(['../view/systemMessage.vue'], resolve) //提醒-系统消息
48 |         },
49 |         {
50 |             path: '/myWrite',
51 |             component: resolve => require(['../view/myWrite.vue'], resolve) //我的讨论-发表
52 |         },
53 |         {
54 |             path: '/myReply',
55 |             component: resolve => require(['../view/myReply.vue'], resolve) //我的讨论-回复
56 |         },
57 |              
58 |     ]
59 | })
60 | 
61 | router.beforeEach((to, from, next) => {
62 |     /*next({
63 |         path: '/login',
64 |         query: {redirect: to.fullPath} // 将跳转的路由path作为参数，登录成功后跳转到该路由
65 |     })*/
66 |     next();
67 | })
68 | 
69 | export default router;
70 | 


--------------------------------------------------------------------------------
/src/view/detail.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="detail">
  3 |     <div >
  4 |       <div class="d_content" id="scroller">
  5 |         <div class="d_con_mc">
  6 |           <div class="d_conmc_mt dbox">
  7 |             <a data-href="/Forum/userCenter?fid=229&amp;uid=353311">
  8 |               <img class="d_conmc_pic" src="http://dl.gamdream.com/bbs/attachment/album/201607/21/5091691.jpg">
  9 |             </a>
 10 |             <div class="d_conmc_mtcon flex elli">
 11 |               <span class="ft32">三剑豪大大</span>                 
 12 |               <em class="m-tag m-tagposter" style="background:#1497f1;">楼主</em>
 13 |               <em class="m-tag" style="background:#FF823F;">版主</em>
 14 |               <p>2017-12-26 17:49</p>
 15 |             </div>
 16 |           </div>
 17 |           <div class="d_conmc_mc">
 18 |             <h3 class="t">关于《三剑豪》近期调整公告，请大侠们知晓</h3> 
 19 |             <div class="datebox" date-list="">
 20 |                 各位大侠：<br>
 21 |                 <br>
 22 |                 &nbsp; &nbsp; 由于服务器优化，原定于每周四《三剑豪》的更新暂时停止，同样每周一新服也暂停开放，等服务器优化好后我们再操作。活动本周四会在上周的基础上做一波累加活动，请大侠们留意，感谢支持！<br>
 23 |             </div>
 24 |           </div>
 25 |         </div>
 26 | 
 27 | 
 28 |         <div class="d_con_list">
 29 |           <ul class="d_clist_mc">
 30 |             <li pid="32938135" v-for="i in 3">
 31 |               <a data-href="/Forum/userCenter?fid=229&amp;uid=205082461">
 32 |                 <img class="d_clist_pic" src="http://dl.gamdream.com/noavatar.jpg">
 33 |               </a>
 34 |               <div class="d_clistmian flex">
 35 |                 <div class="li_build">
 36 |                   <div class="li_text_1">
 37 |                     <p class="li_text_p">
 38 |                       <span class="ft30">guanguihong0614</span>
 39 |                     </p>
 40 |                     <span class="li_floor">7楼</span>
 41 |                   </div>
 42 |                 </div>
 43 |                 <div class="datebox" date-list="">
 44 |                   <div class="grey quote">
 45 |                     <blockquote>
 46 |                       引用: MM135869 发表于 2017-12-27 17:20<br>
 47 |                       感觉像关服？
 48 |                     </blockquote>
 49 |                   </div>
 50 |                   <br>
 51 |                   这是要倒闭的节奏！                 
 52 |                 </div>
 53 |                 <p class="li_text_3"><span>2017-12-28 08:18</span><a class="li_write" href="javascript:;"></a></p>
 54 |               </div>            
 55 |             </li>
 56 |           </ul>
 57 |         </div>
 58 |       </div>
 59 | 
 60 |       <!--底部点赞 回复-->
 61 |       <div class="de_gowrite">
 62 |         <a href="javascript:;">
 63 |           <span class="writebtn_l"><s></s><em>0</em></span>
 64 |           <span class="writebtn_r"><s></s><em>14</em></span>
 65 |         </a>
 66 |       </div>
 67 |     </div>
 68 |     
 69 |     <!--回复-->
 70 |     <div class="d_write">     
 71 |       <div class="d_w_bj"></div>
 72 |       <div class="d_w_con">
 73 |         <p class="d_w_mt">
 74 |           <a class="d_w_false" href="javascript:;">取消</a>
 75 |           <a class="d_w_sure mt-btn" style="float:right;" href="javascript:;">发送</a>
 76 |         </p>
 77 |         <div class="d_w_mc">
 78 |           <textarea placeholder="我来说一句"></textarea>
 79 |           <div class="mc_file">
 80 |             <span class="wt_img"><img src="http://dl.gamdream.com/bbs/attachment/album/201607/21/5091691.jpg" alt=""><i class="del"></i></span>     
 81 |             <a class="file_btn" href="javascript:;"><input id="uploadInput" type="file"><em class="file_num" date-num="1">可上传1张</em></a>
 82 |           </div>
 83 |         </div>
 84 |       </div>    
 85 |     </div>  
 86 |   </div>
 87 | </template>
 88 | 
 89 | <script>
 90 | export default {
 91 |   name: 'detail',
 92 |   data () {
 93 |     return {
 94 |       msg: 'Welcome to Your Vue.js App'
 95 |     }
 96 |   },
 97 |   mounted(){
 98 |     document.querySelector('#scroller').style.height=document.documentElement.clientHeight + 'px';
 99 |   },
100 |   destroyed (){
101 |     console.log('跳出详情页')
102 |     //document.querySelector('body').style.height='auto';
103 |   },
104 |   methods: {
105 |     goIndex (){
106 |       this.$router.push('/index')
107 |     },
108 |   }
109 | }
110 | </script>
111 | 
112 | <style scoped lang="less" type="text/less" rel="stylesheet/less">
113 |   .detail{
114 |     position: relative;
115 |     height: 100%;
116 |     overflow: hidden;
117 |   }
118 |   .d_content {
119 |     padding: 0px 0 1.05rem;
120 |     box-sizing: border-box;
121 |     height: 100%;
122 |     overflow: auto;
123 |     position: relative;
124 |     -webkit-overflow-scrolling: touch;
125 |     box-sizing: border-box;
126 |   }
127 |   .d_con_mc{
128 |     padding: 0 .2rem;
129 |     font-size: .26rem;
130 |   }
131 |   .d_conmc_mt {
132 |     padding: .3rem 0 .15rem;
133 |     color: #a0a0a0;
134 |     .ft32{
135 |       font-size:.32rem;
136 |       color:#333;
137 |       vertical-align: middle
138 |     }
139 |   }
140 |   .d_conmc_pic,.d_clist_pic{
141 |     border-radius: .05rem;
142 |     width: .72rem;
143 |     height: .72rem;
144 |     margin-right: .16rem;
145 |   }
146 |   .d_conmc_mc {
147 |     line-height: .54rem;
148 |     word-break: break-all;
149 |     word-wrap: break-word;
150 |     .t{
151 |       font-size: .36rem;
152 |       color: #333;
153 |       padding: .05rem 0 .2rem;
154 |     }
155 |     .datebox{
156 |       padding: 0 0 .3rem;
157 |       font-size: .3rem;
158 |       color: #444;
159 |       line-height: 1.6;
160 |       overflow-x: hidden;
161 |     }
162 |   }
163 |   .d_con_list {
164 |     padding: 0 .3rem;
165 |     font-size: .28rem;
166 |     color: #898989;
167 |     border-top: 1px solid #e8e8e8;
168 |     .d_clist_mc li{
169 |       &:first-child{
170 |         border:none;
171 |       }
172 |       display: -webkit-box;
173 |       display: box;
174 |       border-top: 1px solid #e8e8e8;
175 |       padding: .26rem 0 0px;
176 |       line-height: 1;
177 |     }
178 |   }
179 |   .d_clist_mc .li_text_1 {
180 |     position: relative;
181 |   }
182 |   .li_floor {
183 |       position: absolute;
184 |       right: 0px;
185 |       top: .06rem;
186 |       font-size: .26rem;
187 |   }
188 |   .d_clistmian {
189 |     padding-bottom: .25rem;
190 |     .datebox {
191 |       padding: .3rem 0 0px;
192 |       color: #333;
193 |       line-height: 1.4;
194 |       word-break: break-all;
195 |       word-wrap: break-word;
196 |     }
197 |   }
198 |   .quote{
199 |     border:1px dashed #D7D7D7;
200 |     line-height: .4rem;
201 |     padding: .05rem .16rem;
202 |     margin-bottom: .15rem;
203 |     font-size: .26rem!important;
204 |     color: #898989!important;
205 |   }
206 |   .li_text_3 {
207 |     overflow: hidden;
208 |     zoom: 1;
209 |     line-height:.6rem;
210 |     font-size: .26rem;
211 |     a{
212 |       float: right;
213 |       width: 1rem;
214 |       height:.6rem;
215 |       background: url(../assets/img/dis-22.png) no-repeat;
216 |       background-size: .34rem auto;
217 |       background-position: .68rem .16rem;
218 |     }
219 |   }
220 |   .de_gowrite {
221 |     position: absolute;
222 |     left: 0;
223 |     bottom: 0;
224 |     right: 0;
225 |     padding: .2rem;
226 |     height: .62rem;
227 |     border-top: 1px solid #e8e8e8;
228 |     background: #fff;
229 |     z-index: 3;
230 |     span{
231 |       float: left;
232 |       width: 48%;
233 |       border: 1px solid #e8e8e8;
234 |       background: #fafafa;
235 |       line-height: .62rem;
236 |       text-align: center;
237 |       box-sizing: border-box;
238 |       border-radius: .04rem;
239 |       color: #898989;
240 |       font-size: .3rem;
241 |     }
242 |     .writebtn_r{
243 |       float: right;
244 |       s{
245 |         background-position: 0 -.64rem;
246 |       }
247 |     }
248 |   }
249 |   .de_gowrite s {
250 |     display: inline-block;
251 |     width: .36rem;
252 |     height: .32rem;
253 |     background: url(../assets/img/det-write.png) 0 1px no-repeat;
254 |     background-size: 100% auto;
255 |     margin-right: .08rem;
256 |     vertical-align: -.06rem;
257 |   }
258 | 
259 |   .d_write {
260 |       width: 100%;
261 |       position: absolute;
262 |       top: 0;
263 |       left: 100%;
264 |       height: 100%;
265 |       font-size:.28rem;
266 |       overflow: hidden;
267 |       -webkit-transition: all .3s linear;
268 |       transition: all .3s linear;
269 |       z-index: 50;
270 |       &.active {
271 |           left: 0;
272 |           display: block;
273 |       }
274 |   }
275 |   .d_write .d_w_bj {
276 |       background: rgba(0,0,0,.75);
277 |       width: 100%;
278 |       position: absolute;
279 |       left: 0;
280 |       top: 0;
281 |       height: 100%;
282 |       z-index: 3;
283 |       display: block;
284 |   }
285 |   .d_write .d_w_con {
286 |       position: absolute;
287 |       z-index: 50;
288 |       background: #fff;
289 |       width: 100%;
290 |       top: 0;
291 |       left: 0;
292 |       right: 0;
293 |       z-index: 4;
294 |       padding: 0 .35rem .3rem;
295 |       box-sizing: border-box;
296 |   }
297 |   .d_w_mt {
298 |     overflow: hidden;
299 |     zoom: 1;
300 |     a {
301 |         float: left;
302 |         line-height: 2;
303 |         padding: .1rem .18rem;
304 |         color: #333;
305 |     }
306 |     .d_w_sure{
307 |       float: right;
308 |     }
309 |   }
310 |   .d_w_mc {
311 |       border: 1px solid #e8e8e8;
312 |       background: #fff;
313 |       border-radius: .06rem;
314 |       padding: .15rem;
315 |       textarea {
316 |         border: none;
317 |         background: none;
318 |         font-size: .3rem;
319 |         line-height: 1.4;
320 |         width: 100%;
321 |         outline: none;
322 |         resize: none;
323 |         min-height: 1.8rem;
324 |         overflow: auto;
325 |     }
326 |     .mc_file{
327 |       border-top: 1px dashed #cfcfcf;
328 |       padding: .2rem 0 .05rem;
329 |       margin-right: -.05rem;
330 |       display: -webkit-box;
331 |       display: box;
332 |       border: none;
333 |       .file_btn{
334 |         display: inline-block;
335 |         width: 1.08rem;
336 |         height: 1.08rem;
337 |         background: url(../assets/img/det-file.png) 0 0 no-repeat;
338 |         background-size: 100%;
339 |         position: relative;
340 |       }
341 |       input{
342 |         position: absolute;
343 |         width: 100%;
344 |         height: 100%;
345 |         opacity: 0;
346 |         filter: alpha(opacity=0);
347 |       }
348 |       em{
349 |         display: block;
350 |         margin: 0 auto;
351 |         padding: .75rem 0 0;
352 |         font-size: .2rem;
353 |         color: #999;
354 |         text-align: center;
355 |       }
356 |       .wt_img {
357 |           display: inline-block;
358 |           position: relative;
359 |           vertical-align: top;
360 |           margin: 0 .42rem .3rem 0;
361 |           img{
362 |             width: 1.08rem;
363 |             height: 1.08rem;
364 |             border-radius:.06rem;
365 |           }
366 |       }
367 |     }
368 |   }
369 |   .del{
370 |     position: absolute;
371 |     right: -.24rem;
372 |     top: -.24rem;
373 |     width: .44rem;
374 |     height: .44rem;
375 |     background: url(../assets/img/delete.png) 0 0 no-repeat;
376 |     background-size: 100% auto;
377 |   }
378 | </style>
379 | 


--------------------------------------------------------------------------------
/src/view/edit.vue:
--------------------------------------------------------------------------------
  1 | <!--编辑个人中心-->
  2 | <template>
  3 |   <div class="edit">
  4 |     <ul class="per_mc">     
  5 |       <li class="per_m_pic_2">        
  6 |           <span class="pic_box">
  7 |             <img class="per_people" src="http://dl.gamdream.com/bbs/attachment/album/201607/21/5061901.jpg">
  8 |             <input type="file" class="file_pic" id="uploadInput">
  9 |             <em class="pic_text">点击上传头像</em>
 10 |           </span>       
 11 |       </li>
 12 |       <li>
 13 |         <a href="javascript:;" class="per_m_name"  @click="edit('name')">
 14 |           <p>昵称</p>
 15 |           <p class="per_rcon"><span class="per_rname">别瞅我1</span><i class="icos"></i></p>
 16 |         </a>
 17 |       </li>
 18 |       <li>
 19 |         <a href="javascript:;" class="per_m_sex" @click="showSex = true">
 20 |           <p>性别</p>
 21 |           <p class="per_rcon">
 22 |             <span class="per_rsex">男</span>
 23 |             <i class="icos"></i>
 24 |           </p>
 25 |         </a>
 26 |       </li>
 27 |       <li>
 28 |         <a href="javascript:;" class="per_m_time" @click="edit('time')">
 29 |           <p>生日</p>
 30 |           <p class="per_rcon"><span class="per_rtime">1990-5-1</span><i class="icos"></i></p>
 31 |         </a>
 32 |       </li>
 33 |       <li>
 34 |         <a href="javascript:;" class="per_m_city" @click="edit('city')">
 35 |           <p>城市</p>
 36 |           <p class="per_rcon"><span class="per_rcity">广东省 深圳市</span><i class="icos"></i></p>
 37 |         </a>
 38 |       </li>                   
 39 |     </ul>
 40 | 
 41 |     <!--编辑性别-->
 42 |     <div class="per_tan" v-show="showSex">
 43 |       <div class="per_tanbox">
 44 |         <input type="radio" name="sexSelect" id="sir" value="1" style="display:none">
 45 |         <label for="sir" class="labels" value="1" @click="saveSex(1)">男</label>
 46 |         <input type="radio" name="sexSelect" id="miss" value="2" style="display:none">
 47 |         <label for="sir" class="labels" value="2" @click="saveSex(2)">女</label>
 48 |       </div>
 49 |       <p class="per_tanfalse" @click="showSex = false">取消</p>
 50 |     </div>
 51 | 
 52 |     <div class="per_layer" :class="{'active':showEdit}">
 53 |       <div class="play_mt dbox">
 54 |         <a class="m-back" href="javascript:;" @click="showEdit=false"><i></i></a>
 55 |         <h3 class="flex play_mttit">修改{{editText}}</h3>
 56 |         <a class="mt-btn" href="javascript:;" @click="sub">保存</a>
 57 |       </div>
 58 |             
 59 |       <div class="play_mc">
 60 |         <!--编辑昵称-->
 61 |         <div class="nick_name" id="nick_name" v-show="editType=='name'">
 62 |           <p class="nick_ins"><input type="text" placeholder="请输入昵称" v-model="nickname"></p>
 63 |         </div>
 64 |         <!--编辑生日-->
 65 |         <div class="nick_time" id="nick_time" v-show="editType=='time'">
 66 |           <p class="nick_sles">
 67 |             <select></select>
 68 |             <span>年</span>
 69 |           </p>
 70 |           <p class="nick_sles">
 71 |             <select>
 72 |             </select>
 73 |             <span>月</span>
 74 |           </p>
 75 |           <p class="nick_sles">
 76 |             <select>
 77 |             </select>
 78 |             <span>日</span>
 79 |           </p>
 80 |         </div>
 81 |         
 82 |         <!--编辑城市-->
 83 |         <div class="nick_city" id="nick_city" v-show="editType=='city'">
 84 |           <p class="nick_sles">
 85 |             <select>
 86 |               <option>广东</option>                    
 87 |             </select>           
 88 |           </p>
 89 |           <p class="nick_sles">
 90 |             <select>
 91 |               <option>深圳</option> 
 92 |             </select>         
 93 |           </p>          
 94 |         </div>
 95 |           
 96 |         </div>
 97 |     </div>
 98 | 
 99 |   </div>
100 | </template>
101 | 
102 | <script>
103 | export default {
104 |   name: 'new',
105 |   components: {
106 | 
107 |   },
108 |   data () {
109 |     return {
110 |       load:true,
111 |       moreTip:'正在加载',
112 |       loadshow: false,
113 |       loadtext: '加载中',
114 |       showSex:false,
115 |       showEdit:false,
116 |       editText:'生日',//生日 ，城市，昵称
117 |       editType:'',
118 |       nickname:'',
119 | 
120 |     }
121 |   },
122 |   created () {
123 |     let that = this;
124 |   },
125 |   mounted(){
126 |     document.querySelector('.edit').style.height = document.documentElement.clientHeight+'px';
127 |   },
128 |   methods: {
129 |     edit(type){
130 |       this.showEdit = true;
131 |       this.editType = type;
132 |       if(type=='name'){
133 |         this.editText = '昵称'
134 |       }
135 |       if(type=='time'){
136 |         this.editText = '生日'
137 |       }
138 |       if(type=='city'){
139 |         this.editText = '城市'
140 |       }
141 |     },
142 |     sub(){
143 |       console.log('保存生日等')
144 |       this.showEdit = false;
145 |     },
146 |     saveSex(val){
147 |       console.log('保存性别'+val)
148 |       this.showSex = false;
149 |     },
150 |   },
151 | }
152 | </script>
153 | 
154 | 
155 | <style scoped lang="less" type="text/less" rel="stylesheet/less">
156 |   .edit{
157 |     background: #f3f3f3;
158 |   }
159 |   .icos{
160 |     width: .18rem;
161 |     height: .31rem;
162 |     background: url(../assets/img/per-in.png) 0 0 no-repeat;
163 |     background-size: 100%;
164 |     vertical-align: -.04rem;
165 |     margin-left: .12rem;
166 |     position: relative;
167 |     display: inline-block;
168 |   }
169 |   .per_mc{
170 |     li{
171 |       a{
172 |         vertical-align: middle;
173 |         font-size: .3rem;
174 |         color: #898989;
175 |         padding: .1rem .3rem;
176 |         line-height: .8rem;
177 |         height: .8rem;
178 |         background: #fff;
179 |         display: block;
180 |         overflow: hidden;
181 |         position: relative;
182 |         border-bottom:1px solid #e8e8e8;
183 |       }
184 |       p{
185 |         float: left;
186 |       }
187 |       .per_rcon{
188 |         float: right;
189 |       }
190 |     }
191 |     .per_m_pic_2 {
192 |         background: #f3f3f3;
193 |         padding: .48rem 0;
194 |         text-align: center;
195 |         border-bottom:1px solid #e8e8e8;
196 |         span{
197 |           display: inline-block;
198 |           width: 2rem;
199 |           height: 2rem;
200 |           position: relative;
201 |         }
202 |         img{
203 |           width: 100%;
204 |           height: 100%;
205 |           border-radius: .1rem;
206 |         }
207 |         input{
208 |           width: 100%;
209 |           height: 100%;
210 |           z-index: 10;
211 |           opacity: 0;
212 |           position: absolute;
213 |           left: 0;
214 |           top: 0;
215 |         }
216 |         em{
217 |           position: absolute;
218 |           font-size: .26rem;
219 |           color: #fff;
220 |           height: .50rem;
221 |           line-height: .50rem;
222 |           width: 100%;
223 |           left: 0px;
224 |           bottom: 0px;
225 |           background: rgba(0,0,0,.3);
226 |           border-bottom-right-radius: .1rem;
227 |           border-bottom-left-radius: .1rem;
228 |         }
229 |     }
230 |   }
231 | 
232 |   .per_tan {
233 |     position:fixed;
234 |     left:0;
235 |     top:0;
236 |     width:100%;
237 |     height:100%;
238 |     background:rgba(0,0,0,.75);
239 |     font-size:.32rem;
240 |     line-height:.80rem;
241 |     text-align: center;
242 |     padding:4.5rem .2rem;
243 |     box-sizing: border-box;
244 |   }
245 |   .per_tan label {
246 |     display:block;
247 |   }
248 |   .per_tan .per_tanbox label:nth-of-type(1) {
249 |     border-bottom:1px solid #e1e2e3;
250 |   }
251 |   .per_tan .per_tanbox,.per_tan .per_tanfalse {
252 |     background:#fff;
253 |     border-radius:.08rem;
254 |     margin-bottom: .30rem;
255 |   }
256 |   .per_layer {
257 |     position:fixed;
258 |     left:0;
259 |     top:0;
260 |     right:0;
261 |     width:100%;
262 |     height:100%;
263 |     background:#f3f3f3;
264 |     -webkit-transition: all .3s linear;
265 |     transition: all .3s linear;
266 |     -webkit-transform:translateX(100%);
267 |     transform:translateX(100%);
268 |     z-index: 100;
269 |   }
270 |   .per_layer.active {
271 |     -webkit-transform:translateX(0);
272 |     transform:translateX(0);
273 |   }
274 |   .per_layer .nick_name,.per_layer .nick_time,.per_layer .nick_city {
275 |     //display: none;
276 |   }
277 |   .per_layer .nick_ins {
278 |     padding:.20rem 0;
279 |   }
280 |   .per_layer .nick_ins input {
281 |     width:100%;
282 |     background:#fff;
283 |     -webkit-tap-highlight-color: rgba(255,0,0,0);
284 |     -webkit-appearance: none;
285 |     border:none;
286 |     border-top:1px solid #e1e2e3;
287 |     border-bottom:1px solid #e1e2e3;
288 |     height:.40rem;
289 |     line-height: .40rem;
290 |     font-size:.32rem;
291 |     padding:.20rem;
292 |   }
293 |   .per_layer .nick_sles {
294 |     height:.80rem;
295 |     line-height:.80rem;
296 |     margin-bottom:.20rem;
297 |     font-size:.32rem;
298 |     background:#fff;
299 |     position:relative;
300 |     overflow: hidden;
301 |     text-align:right;
302 |     padding-right:.30rem;
303 |   }
304 |   .per_layer .nick_sles select {
305 |     width:100%;
306 |     font-size:.32rem;
307 |     -webkit-appearance:none;
308 |     appearance:none;
309 |     border:none;
310 |     position:absolute;
311 |     left:0;
312 |     top:0;
313 |     height:.80rem;
314 |     padding-left:.20rem;
315 |     text-align: left;
316 |     background:none;
317 |     box-sizing:border-box;
318 |   }
319 |   .per_layer .nick_time,.per_layer .nick_city {
320 |     padding-top:.20rem;
321 |   }
322 |   .play_mt {
323 |     background: #fff;
324 |     border-bottom: 1px solid #e8e8e8;
325 |     height: .86rem;
326 |     line-height: .86rem;
327 |     text-align: center;
328 |     color: #333;
329 |     position: relative;
330 |     h3{
331 |       font-size: .36rem;
332 |     }
333 |     .mt-btn {
334 |       font-size: .32rem;
335 |       padding: 0 .20rem;
336 |       display: inline-block;
337 |       color: #333;
338 |     }
339 |   }
340 |   .m-back {
341 |     display: inline-block;
342 |     padding: 0 .52rem 0 .30rem;
343 |     height: 100%;
344 |     i{
345 |       display: inline-block;
346 |       width: .18rem;
347 |       height: .31rem;
348 |       background: url(../assets/img/per-in.png) 0 0 no-repeat;
349 |       background-size: 100%;
350 |       vertical-align: middle;
351 |       -webkit-transform:rotate(180deg);
352 |       transform:rotate(180deg);
353 |     }
354 |   }
355 | </style>
356 | 


--------------------------------------------------------------------------------
/src/view/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="index">
  3 |     <!--主体-->
  4 |     <div class="content"
  5 |       v-infinite-scroll="loadMore"
  6 |       infinite-scroll-disabled="loading"
  7 |       infinite-scroll-distance="50">
  8 |       <div class="mt">
  9 |         <div class="head dbox">
 10 |           <img class="log" src="../assets/img/icon.png">
 11 |           <div class="text flex">
 12 |             <h3>三剑壕</h3>
 13 |             <p>
 14 |               帖子<em>666</em>今日<em>61</em>
 15 |             </p>
 16 |           </div>
 17 |         </div>
 18 |         <ul class="info">
 19 |           <li class="elli"><i></i><span>关于《三剑豪》近期调整公告，请大侠们知晓请大侠们知晓</span></li>
 20 |           <li class="elli"><i></i><span>关于《三剑豪》近期调整公告，请大侠们知晓</span></li>
 21 |           <li class="elli"><i></i><span>关于《三剑豪》近期调整公告，请大侠们知晓</span></li>
 22 |         </ul>
 23 |       </div>
 24 |       <div class="mc page-infinite-wrapper">
 25 |         <ul class="mtz-list">
 26 |           <li class="mtz-item" v-for="item in list">
 27 |             <div class="mtz-iteam-mt dbox">
 28 |               <a href="javascript:;">
 29 |                 <i></i>
 30 |                 <img class="people" src="../assets/img/icon.png">
 31 |               </a>
 32 |               <a href="javascript:;" class="flex">
 33 |                 <h3 class="name"><span>sjh2017sjh</span><em class="m-tag" style="background:#FF823F;">版主</em></h3>
 34 |                 <p class="date">昨天 10:33</p>
 35 |               </a>
 36 |             </div>
 37 |             <a data-href="/Forum/threadDetail?fid=229&amp;tid=8260275">
 38 |               <div class="mtz-iteam-mc">
 39 |                 <h3 class="tit">新区321联盟战的问题，麻烦大大反应一下</h3>
 40 |                 <p class="text">现在这个三剑豪每次开新区真真玩的人有多少你们后台数据库看不出来吗？一个新区活跃的玩家基本能凑够一个联</p>
 41 |                 <div class="image dbox datebox">
 42 |                   <p class="medias_item" v-for="i in 3">
 43 |                     <img class="test-lazyload" src="http://gimg.gamdream.com/bbs/attachment//forum/201801/03/131434bx7xk4ix1fsnritn.png"></p>
 44 |                   <p class="medias_num" date-list="http://gimg.gamdream.com/bbs/attachment//forum/201801/03/131434bx7xk4ix1fsnritn.png;http://gimg.gamdream.com/bbs/attachment//forum/201801/03/131442dhgqfgwhxpgpntxy.png;http://gimg.gamdream.com/bbs/attachment//forum/201801/03/131450ok875qyppfmpmksy.png" style="display:none;"></p>
 45 |                 </div>
 46 |                 <p class="page_zan"><span class="ico2">3评论</span></p>
 47 |               </div>
 48 |             </a>
 49 |           </li>
 50 |         </ul>
 51 |         <p class="page-infinite-loading" v-show="loading" v-if="!nomore">
 52 |           <mt-spinner type="fading-circle"></mt-spinner>加载中...
 53 |         </p>
 54 |         <p class="nomore" v-if="nomore">没有更多了哦</p>
 55 |       </div>
 56 |     </div>
 57 |     
 58 |     <!--footer-->
 59 |     <footer class="cmm-foot">
 60 |       <a class="activityren" data-href="/Forum/activeUser?fid=229" style="display:none;"><i></i>互动达人</a>
 61 |       <p class="text"><a data-href="/Forum/newThread?fid=229&amp;fup=229&amp;typeid=0"></a></p>
 62 |       <a class="login" data-href="/Forum/userCenter?fid=229&amp;myUid=167084"><i class="loginIoc"><em class="ico0122"></em></i>个人中心</a>
 63 |     </footer>
 64 | 
 65 |   </div>
 66 | </template>
 67 | 
 68 | <script>
 69 | //import { Spinner} from 'mint-ui';
 70 | 
 71 | export default {
 72 |   name: 'index',
 73 |   components: {
 74 |     //Spinner
 75 |   },
 76 |   data () {
 77 |     return {
 78 |       load:true,
 79 |       list:[1,2,3,4,5],
 80 |       loading:false,
 81 |       nomore:false,
 82 |     }
 83 |   },
 84 |   created () {
 85 |     let that = this
 86 |     Toast({
 87 |       message:'提示消息',
 88 |       position:'top'
 89 |     });
 90 |     console.log(this.$route.path.slice(1))
 91 | 
 92 |     this.getData();
 93 |   },
 94 |   mounted(){
 95 |     let bodyHeight = document.documentElement.clientHeight,
 96 |         topHeight = document.querySelector('.mt').offsetHeight,
 97 |         footHeight = document.querySelector('.cmm-foot').offsetHeight;
 98 |     document.querySelector('.content').style.height = bodyHeight-footHeight + 'px';
 99 |   },
100 |   methods: {
101 |     getData (){
102 |       Indicator.open('加载中...');
103 |       let postData={'mobile':13512345123}
104 |       this.$axios.get('/sdk-game-data/player-data/index',postData).then((data)=>{
105 |         console.log(data)
106 |       })
107 |       /*this.$ajax('get',`${this.$url}config/list`,postData).then((data)=>{
108 |         setTimeout( () => {
109 |           Indicator.close();
110 |         },2000)
111 |         
112 |         if(data.code == 0){               
113 |           
114 |         }
115 |       });*/
116 |     },
117 |     openMsg (val){
118 | 
119 |     },
120 |     loadMore() {
121 |       this.loading = true;
122 |       setTimeout(() => {
123 |         let last = this.list[this.list.length - 1];
124 |         for (let i = 1; i <= 5; i++) {
125 |           this.list.push(last + i);
126 |         }
127 |         this.loading = false;
128 |       }, 2500);
129 |     }
130 |   },
131 | }
132 | </script>
133 | <style scoped lang="less" type="text/less" rel="stylesheet/less">
134 |   .content{
135 |     padding-bottom:.2rem;
136 |     background: #fff;
137 |     overflow: scroll;
138 |     box-sizing: border-box;
139 |   }  
140 |   .mt{   
141 |     .head{
142 |       padding:.26rem;
143 |       color: #fff;
144 |       background:url(../assets/img/top_bg.jpg) no-repeat;
145 |       background-size:100% auto;
146 |       .text{
147 |         font-size: .24rem;
148 |         h3{
149 |           font-size: .32rem;
150 |           line-height: .70rem;
151 |           padding-bottom: .05rem;
152 |         }
153 |         em{
154 |           margin-right:.3rem;
155 |           margin-left:2px;
156 |         }       
157 |       }
158 |     }
159 |     .log{
160 |       width: 1.16rem;
161 |       height: 1.16rem;
162 |       border-radius:.06rem;
163 |       margin-right:.2rem;
164 |     }
165 |     .info{
166 |       border-bottom:1px solid #e5e5e5;
167 |       padding:.12rem 0;
168 |       li{
169 |         color: #333;
170 |         font-size: .28rem;
171 |         line-height: .3rem;
172 |         padding: .1rem .25rem;
173 |         i{
174 |           display: inline-block;
175 |           width: .3rem;
176 |           height: .3rem;
177 |           background: url(../assets/img/up.png) no-repeat;
178 |           background-size:100% auto;
179 |           vertical-align: middle;
180 |           margin-right:.1rem;
181 |         }
182 |         span{
183 |           vertical-align: middle;
184 |         }
185 |       }
186 |     }
187 |   }
188 |   .mc{
189 |     padding: .08rem 0px 0;
190 |     background: #f3f3f3;    
191 |     .mtz-item{
192 |       border: 1px solid #e8e8e8;
193 |       margin-bottom: .08rem;
194 |       background: #fff;
195 |       padding: .15rem .25rem;
196 |       a{
197 |         line-height: .38rem;
198 |         color: #888;
199 |         font-size: .3rem;
200 |         word-wrap: break-word;
201 |         word-break: break-all;
202 |       }      
203 |       .mtz-iteam-mc{
204 |         .tit{
205 |           font-size: .32rem;
206 |           color: #333;
207 |           padding: .12rem 0 0;
208 |           text-overflow: ellipsis;
209 |           white-space: nowrap;
210 |           overflow: hidden;
211 |         }
212 |         .text{
213 |           padding-top: .12rem;
214 |           text-overflow: -o-ellipsis-lastline;
215 |           overflow: hidden;
216 |           text-overflow: ellipsis;
217 |           display: -webkit-box;
218 |           -webkit-line-clamp: 2;
219 |           -webkit-box-orient: vertical;
220 |         }
221 |         .image{
222 |           position: relative;
223 |           padding-top: .15rem;
224 |           .medias_item{
225 |             width: 1.9rem;
226 |             height: 1.9rem;
227 |             margin-right: .1rem;
228 |             overflow: hidden;
229 |             background: #999;
230 |           }
231 |           img{
232 |             width:100%;
233 |             max-width: none;
234 |           }
235 |         }
236 |         .page_zan {
237 |             padding: .15rem 0 .1rem;
238 |             text-align: right;
239 |             font-size: .28rem;
240 |             color: #a0a0a0;
241 |             span{
242 |               display: inline-block;
243 |               margin-left: .34rem;
244 |               width: auto;
245 |               height: auto;              
246 |               padding: 0 0 0 .44rem;              
247 |               background: url(../assets/img/dis-2.png) 0 0 no-repeat;
248 |               background-position: 0 .04rem;
249 |               background-size:.34rem auto;
250 |               vertical-align: -.3rem;
251 |             }
252 |         }
253 |       }
254 |     }
255 |     .mtz-iteam-mt{      
256 |       .name{
257 |         color: #333;
258 |         font-size: .28rem;
259 |         vertical-align: middle;
260 |         span{
261 |           vertical-align: middle;
262 |         }
263 |       }
264 |       .date{
265 |         font-size: .24rem;
266 |       }
267 |     }
268 |     .people{
269 |       border-radius: .05rem;
270 |       width: .72rem;
271 |       height: .72rem;
272 |       margin-right: .16rem;
273 |     }
274 |   }
275 | 
276 |   .cmm-foot{
277 |     position: fixed;
278 |     width:6.4rem;
279 |     left: 50%;
280 |     margin-left:-3.2rem;
281 |     bottom: 0;
282 |     background: #fff;
283 |     padding: .1rem 0;
284 |     border-top:1px solid #d0d0d0;
285 |     line-height: 1;
286 |     a{
287 |       padding: 0 .55rem;
288 |       width: 1rem;
289 |       font-size: .24rem;
290 |       color: #808080;
291 |       text-align: center;
292 |       i{
293 |         display: block;
294 |         margin: .05rem auto .08rem;
295 |         width: .5rem;
296 |         height: .41rem;
297 |         background: url(../assets/img/foot1-1020.png) no-repeat;
298 |         background-size: 100% auto;
299 |       }
300 |     }
301 |     .text{
302 |       background: #7a9de1;
303 |       width: 2.14rem;
304 |       height:.8rem;
305 |       float: left;
306 |       border-radius:.1rem;
307 |       margin-left:2rem;
308 |       a{
309 |         display: block;
310 |         height: 100%;
311 |         background: url(../assets/img/foot2-1020.png) center no-repeat;
312 |         background-size: .43rem auto;
313 |       }
314 |     }
315 |     .activityren{
316 |       float: left;
317 |     }
318 |     .login{
319 |       float: right;
320 |       i{
321 |         background-image: url(../assets/img/foot3-1020.png);
322 |       }
323 |     }
324 |   }
325 | </style>
326 | 


--------------------------------------------------------------------------------
/src/view/login.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="page">
  3 |         <div class="logo"><img src="../assets/img/logo.png"></div>
  4 |         <div class="container">
  5 |             <div class="cont_login" v-show="loginkg">
  6 |                 <div class="login_nav clearfix">
  7 |                     <a :class="{cur:type == 'phone'}" href="javascript:void(0);" @click="tab('phone')">手机号快速登录</a>
  8 |                     <a :class="{cur:type == 'zhang'}" href="javascript:void(0);" @click="tab('zhang')">账号登录</a>
  9 |                 </div>
 10 |                 <!--用户登录-->
 11 |                 <div class="login_form">
 12 |                     <!--手机号快速登录-->
 13 |                     <div class="login_box"  v-show="type == 'phone'">
 14 |                         <div class="input_box">
 15 |                             <input v-model="phoneName" class="input input_phone mobile" id="login_phone" type="text" placeholder="手机号" maxlength="11">
 16 |                         </div>
 17 |                         <div class="input_box">
 18 |                             <input v-model="phoneCode" class="input input_code" id="login_code" type="number" placeholder="验证码" oninput="if(value.length>10)value=value.slice(0,10)">
 19 |                             <a href="javascript:void(0);" class="getCode" :class="{gray:loginCodeTxt!='获取验证码'}" id="login_get_code" tid="0" @click="getCode('login')">{{loginCodeTxt}}</a>
 20 |                         </div>
 21 |                         <div>
 22 |                             <a href="javascript:void(0);" class="btn btn_login" id="login_by_phone" @click="phoneLogin">快速登录</a>
 23 |                         </div>
 24 |                     </div>
 25 |                     <!--账号密码登录-->
 26 |                     <div class="login_box" v-show="type == 'zhang'">
 27 |                         <div class="input_box">
 28 |                             <input v-model="zhangName" class="input input_phone" id="login_user" type="text" placeholder="手机号/账号" maxlength="36">
 29 |                         </div>
 30 |                         <div class="input_box">
 31 |                             <input v-model="zhangPass" class="input input_password" id="login_pass" type="password" placeholder="密码" maxlength="36">
 32 |                         </div>
 33 |                         <div>
 34 |                             <a href="javascript:void(0);" class="btn btn_login" id="login_by_user" @click="zhangLogin">登录</a>
 35 |                         </div>
 36 |                     </div>
 37 |                     <div class="atten">
 38 |                         <a href="javascript:void(0);" class="fgt_pass" @click="findpass">忘记密码?</a>
 39 |                     </div>
 40 |                 </div>
 41 |             </div>
 42 |             <!--确认密码-->
 43 |             <div class="cont_checkPass" v-show="passKgTwo">
 44 |                 <div class="cont_title">欢迎您加入</div>
 45 |                 <div class="checkPass_form">
 46 |                     <div class="input_box">
 47 |                         <input v-model="findPass" class="input input_password" id="set_password_1" type="password" placeholder="输入密码" maxlength="36">
 48 |                     </div>
 49 |                     <div class="input_box">
 50 |                         <input v-model="findPassAgain" class="input input_password_again" id="set_password_2" type="password" placeholder="再次输入密码" maxlength="36">
 51 |                     </div>
 52 |                     <div>
 53 |                         <a href="javascript:void(0);" class="btn btn_sure" id="setPass" @click="findLast">完成</a>
 54 |                     </div>
 55 |                 </div>
 56 |             </div>
 57 |             <!--手机号召回密码-->
 58 |             <div class="cont_forget" v-show="passKgOne">
 59 |                 <div class="cont_title">找回密码</div>
 60 |                 <div class="forget_form">
 61 |                     <div class="input_box">
 62 |                         <input v-model="findName" class="input input_phone mobile" id="forget_phone" type="text" placeholder="手机号" maxlength="11">
 63 |                     </div>
 64 |                     <div class="input_box">
 65 |                         <input v-model="findCode" class="input input_code" type="number" id="forget_code" placeholder="验证码" oninput="if(value.length>10)value=value.slice(0,10)">
 66 |                         <a href="javascript:void(0);" class="getCode" :class="{gray:findCodeTxt!='获取验证码'}" id="forget_get_code" tid="1" @click="getCode('find')">{{findCodeTxt}}</a>
 67 |                     </div>
 68 |                     <div>
 69 |                         <a href="javascript:void(0);" class="btn btn_next" @click="findNext">下一步</a>
 70 |                     </div>
 71 |                     <div class="atten">
 72 |                         已经<a href="javascript:void(0);" class="goLogin" @click="goLogin">账号登录</a>
 73 |                     </div>
 74 |                 </div>
 75 |             </div>
 76 |         </div>
 77 |         <!-- <toast type="text" :time="3000" position="top" :text="toastTip" v-model="toasShow"></toast>
 78 |         <loading :show="loadshow" text="加载中"></loading> -->
 79 |     </div>
 80 | </template>
 81 | 
 82 | <script>
 83 | 
 84 | let regMobile=/^1[34578]\d{9}$/;
 85 | export default {
 86 |   name: 'new',
 87 |   components: {
 88 |     
 89 |   },
 90 |   data () {
 91 |     return {
 92 |       toastTip:'',//提示文字
 93 |       toasShow:false,//
 94 |       loadshow: false,
 95 |       loginCodeTxt:'获取验证码',
 96 |       findCodeTxt:'获取验证码',
 97 |       type:'phone',//切换登录方式 phone zhang
 98 |       phoneName:'',
 99 |       phoneCode:'',
100 |       zhangName:'',
101 |       zhangPass:'',
102 |       findPass:'',
103 |       findPassAgain:'',
104 |       findName:'',
105 |       findCode:'',
106 |       loginkg:true,
107 |       passKgOne:false,
108 |       passKgTwo:false,
109 |       loginTimer:null,
110 |       findTimer:null,
111 |       routerType:this.$route.query.type,//上个路由
112 |     }
113 |   },
114 |   destroyed (){
115 |     clearInterval(this.loginTimer)
116 |     clearInterval(this.findTimer)
117 |   },
118 |   created () {
119 |     let that = this;
120 |     console.log(this.routerType)   
121 |   },
122 |   methods: {
123 |     tab(val){
124 |       this.type = val;
125 |     },
126 |     //登录验证码  找回密码验证
127 |     getCode(type){
128 |       if(type == 'login'){
129 |         if(!this.phoneName.match(regMobile)){
130 |           Toast({
131 |             message:'请输入正确手机号',
132 |             position:'top'
133 |           })
134 |           return false
135 |         }
136 |         
137 |         if(this.loginCodeTxt!='获取验证码'){
138 |           return false;
139 |         }
140 | 
141 |         this.loadshow = true;
142 |         let num = 60;
143 |         this.loginCodeTxt = `获取验证码(${num}s)` 
144 |         let postData={'mobile':this.phoneName}
145 |         this.$ajax('get',`${this.$url}config/list`,postData).then((data)=>{
146 |           this.loadshow = false;
147 |           if(data.code == 0){               
148 |             this.loginTimer= setInterval( ()=>{
149 |               this.loginCodeTxt = `获取验证码(${num}s)`
150 |               if(num<=0){
151 |                 clearInterval(this.loginTimer)
152 |                 this.loginCodeTxt = `获取验证码`
153 |               }
154 |               num--   
155 |             },1000)
156 |           }
157 |         });
158 |         
159 |       }else{
160 |         if(!this.findName.match(regMobile)){
161 |           Toast({
162 |             message:'请输入正确手机号',
163 |             position:'top'
164 |           })
165 |           return false
166 |         }
167 | 
168 |         if(this.findCodeTxt!='获取验证码'){
169 |           return false;
170 |         }
171 | 
172 |         this.loadshow = true;
173 |         let num = 60;
174 |         this.findCodeTxt = `获取验证码(${num}s)` 
175 |         let postData={'mobile':this.phoneName}
176 |         this.$ajax('get',`${this.$url}config/list`,postData).then((data)=>{
177 |           this.loadshow = false;
178 |           if(data.code == 0){               
179 |             this.findTimer= setInterval( ()=>{
180 |               this.findCodeTxt = `获取验证码(${num}s)`
181 |               if(num<=0){
182 |                 clearInterval(this.findTimer)
183 |                 this.findCodeTxt = `获取验证码`
184 |               }
185 |               num--   
186 |             },1000)
187 |           }
188 |         });
189 |       }
190 |     },
191 |     phoneLogin(){
192 |       //快速登录
193 |       if(!this.phoneName.match(regMobile)){
194 |         Toast({
195 |           message:'请输入正确手机号',
196 |           position:'top',
197 |         })
198 |         return false
199 |       }
200 |       if(!this.phoneCode){
201 |         Toast({
202 |           message:'请输入验证码',
203 |           position:'top'
204 |         })
205 |         return false
206 |       }
207 |       console.log('快速登录')
208 |     },
209 |     zhangLogin(){
210 |       //账号登录
211 |       if(!this.zhangName){
212 |         Toast({
213 |           message:'请输入账号',
214 |           position:'top'
215 |         })
216 |         return false
217 |       }
218 |       if(!this.zhangPass){
219 |         Toast({
220 |           message:'请输入密码',
221 |           position:'top'
222 |         })
223 |         return false
224 |       }
225 |       console.log('账号登录')
226 |     },
227 |     findpass(){
228 |       //去找密码
229 |       this.loginkg = false;
230 |       this.passKgOne = true;
231 |     },
232 |     findNext(){
233 |       //找回密码 下一步
234 |       if(!this.findName.match(regMobile)){
235 |         Toast({
236 |           message:'请输入正确手机号',
237 |           position:'top'
238 |         })
239 |         return false
240 |       }
241 |       if(!this.findCode){
242 |         Toast({
243 |           message:'请输入验证码',
244 |           position:'top'
245 |         })
246 |         return false
247 |       }
248 |       console.log('找回密码')
249 |       this.passKgOne = false;
250 |       this.passKgTwo = true;
251 |     },
252 |     findLast(){
253 |       //设置密码完成
254 |       if(!this.findPass){
255 |         Toast({
256 |           message:'请输入密码',
257 |           position:'top'
258 |         })
259 |         return false
260 |       }
261 |       if(this.findPassAgain!=this.findPass){
262 |         Toast({
263 |           message:'两次密码不一致',
264 |           position:'top'
265 |         })
266 |         return false
267 |       }
268 |       this.passKgTwo = false;
269 |       this.loginkg = true;
270 |       this.type = 'zhang';
271 |     },
272 |     goLogin(){
273 |       //去登陆
274 |       this.passKgOne = false;
275 |       this.loginkg = true;
276 |       this.type = 'zhang';
277 |     },
278 | 
279 |   },
280 | }
281 | </script>
282 | 
283 | 
284 | <style scoped lang="less" type="text/less" rel="stylesheet/less">
285 | .page {
286 |   width: 6.4rem;
287 |   margin: 0 auto;
288 |   padding-top: 0.5rem;
289 | }
290 | 
291 | .page .logo {
292 |   width: 2.4rem;
293 |   margin: 0 auto;
294 | }
295 | 
296 | .page .container {
297 |   padding: 0 0.6rem;
298 | }
299 | 
300 | .input_box {
301 |   position: relative;
302 | }
303 | 
304 | .input_box::after {
305 |   position: absolute;
306 |   width: 1px;
307 |   height: 0.22rem;
308 |   background-color: #bdd4ea;
309 |   content: " ";
310 |   top: 0.28rem;
311 |   left: 0.95rem;
312 | }
313 | 
314 | .input {
315 |   width: 100%;
316 |   height: 0.7rem;
317 |   border: 1px solid #81c4fa;
318 |   border-radius: 0.35rem;
319 |   margin-bottom: 0.24rem;
320 |   font-size: 0.28rem;
321 |   color: #333;
322 |   position: relative;
323 |   padding-left: 1.2rem;
324 |   box-sizing: border-box;
325 |   background: #fff no-repeat 0.35rem center;
326 |   background-size: 0.29rem auto;
327 |   outline: none;
328 | }
329 | 
330 | .input::-webkit-input-placeholder {
331 |   color: #b3b3b3;
332 | }
333 | 
334 | .input_phone {
335 |   background-image: url("../assets/img/icon_login_user.png");
336 | }
337 | 
338 | .input_code {
339 |   background-image: url("../assets/img/icon_login_code.png");
340 | }
341 | 
342 | .input_password {
343 |   background-image: url("../assets/img/icon_login_password.png");
344 | }
345 | 
346 | .input_password_again {
347 |   background-image: url("../assets/img/icon_login_password_again.png");
348 | }
349 | 
350 | .btn {
351 |   display: block;
352 |   width: 100%;
353 |   height: 0.78rem;
354 |   border: 0.01rem solid #2384de;
355 |   background: -webkit-gradient(linear, 0 0, 0 bottom, from(#4bb0ff), to(#2b99ff));
356 |   border-radius: 0.4rem;
357 |   line-height: 0.8rem;
358 |   text-align: center;
359 |   font-size: 0.32rem;
360 |   color: #fff;
361 |   box-shadow: 0 1px 0.1rem #2b99ff;
362 | }
363 | 
364 | .btn:active {
365 |   opacity: 0.9;
366 | }
367 | 
368 | .cont_login {
369 |   margin-top: 0.5rem;
370 | }
371 | 
372 | .cont_login .login_nav a {
373 |   line-height: 0.72rem;
374 |   display: block;
375 |   float: left;
376 |   width: 50%;
377 |   text-align: center;
378 |   font-size: 0.3rem;
379 |   color: #9a9a9a;
380 |   border-bottom: 0.04rem solid #ccc;
381 | }
382 | 
383 | .cont_login .login_nav .cur {
384 |   color: #36a0ff;
385 |   border-bottom: 0.04rem solid #36a0ff;
386 | }
387 | 
388 | .cont_login .login_form {
389 |   margin-top: 0.4rem;
390 | }
391 | 
392 | .container .atten {
393 |   margin-top: 0.5rem;
394 |   text-align: center;
395 |   font-size: 0.3rem;
396 |   color: #a9a9a9;
397 | }
398 | 
399 | .container .atten a {
400 |   color: #55afff;
401 | }
402 | 
403 | .getCode {
404 |   font-size: 0.24rem;
405 |   color: #43aaff;
406 |   position: absolute;
407 |   top: 0.12rem;
408 |   right: 0.2rem;
409 |   padding: .1rem;
410 | }
411 | 
412 | .gray {
413 |   color: gray;
414 | }
415 | 
416 | .cont_title {
417 |   text-align: center;
418 |   font-size: 0.52rem;
419 |   color: #195ec6;
420 |   margin: 0.1rem 0 0.5rem;
421 | }
422 | </style>
423 | 


--------------------------------------------------------------------------------
/src/view/myRemind.vue:
--------------------------------------------------------------------------------
  1 | <!--系统消息-我的回复-->
  2 | <template>
  3 |   <div class="system">
  4 |     <div class="tab dbox">
  5 |       <span class="active flex">回复我的</span>
  6 |       <span class="flex">系统消息</span>
  7 |     </div>
  8 |     <ul class="mremind">
  9 |       <li>
 10 |         <div class="mt dbox">
 11 |           <a class="pic" href="javascript:;"><img src="http://dfs.idreamsky.com/group1/M00/08/12/ChQUUFeQob-AOuN3AAA2BARMPkw2691500"></a>
 12 |           <a class="flex" href="javascript:">
 13 |             <h3>浪子i</h3>
 14 |             <p>05-23 16:38</p>
 15 |           </a>
 16 |         </div>
 17 |         <a class="mc" href="javascript:">
 18 |           <p class="text_mt">我们可以做朋友吗</p>
 19 |           <div class="text_mc">
 20 |             <i></i>
 21 |             <p class="elli">回复我的帖子：来咯哦哦摸摸哦哦弄</p>         
 22 |           </div>
 23 |         </a>
 24 |       </li>
 25 |     </ul>
 26 |   </div>
 27 | </template>
 28 | 
 29 | <script>
 30 | export default {
 31 |   name: 'new',
 32 |   components: {
 33 |   },
 34 |   data () {
 35 |     return {
 36 |       load:true,
 37 |       moreTip:'正在加载',
 38 |       loadshow: false,
 39 |       loadtext: '加载中',
 40 |     }
 41 |   },
 42 |   created () {
 43 |     let that = this;
 44 |   },
 45 |   mounted(){
 46 |     //document.querySelector('.edit').style.height = document.documentElement.clientHeight+'px';
 47 |   },
 48 |   methods: {
 49 |     
 50 |   },
 51 | }
 52 | </script>
 53 | 
 54 | 
 55 | <style scoped lang="less" type="text/less" rel="stylesheet/less">
 56 |   .tab{
 57 |     border-bottom: 1px solid #e9e9e9;
 58 |     .active{
 59 |       color: #23a8b7;
 60 |       border-color: #23a8b7;
 61 |     }
 62 |     span{
 63 |       display: block;
 64 |       text-align: center;
 65 |       height: .84rem;
 66 |       line-height: .84rem;
 67 |       color: #848484;
 68 |       font-size: .30rem;
 69 |       border-bottom: .07rem solid #fff;
 70 |     }
 71 |   }
 72 |   .mremind {
 73 |     padding: 0 .30rem;
 74 |     font-size: .30rem;
 75 |     li{
 76 |       padding-bottom: .10rem;
 77 |       .mt{
 78 |         padding: .25rem 0 .15rem;
 79 |         a{
 80 |           display: block;
 81 |           color: #898989;
 82 |           font-size: .26rem;
 83 |           line-height: 1;
 84 |         }       
 85 |         img{
 86 |           width: .72rem;
 87 |           height: .72rem;
 88 |           border-radius: .06rem;
 89 |           margin-right: .30rem;
 90 |         }
 91 |         h3{
 92 |           font-size: .30rem;
 93 |           padding-bottom: .16rem;
 94 |         }
 95 |       }
 96 |       .mc{
 97 |         display: block;
 98 |         color: #333;
 99 |         line-height: .44rem;
100 |       }
101 |       .text_mt {
102 |           margin-bottom: .16rem;
103 |           padding: 0;
104 |       }
105 |       .text_mc {
106 |           color: #9a9a9a;
107 |           font-size: .26rem;
108 |           position: relative;
109 |           height: .66rem;
110 |           line-height: .66rem;
111 |           background: #e8eaec;
112 |           border-radius: .08rem;
113 |           padding-left: .16rem;
114 |           i {
115 |             position: absolute;
116 |             top: -13px;
117 |             left: .2rem;
118 |             width: 0;
119 |             height: 0;
120 |             overflow: hidden;
121 |             border-style: dashed solid dashed;
122 |             border-color: transparent transparent #e8eaec;
123 |             border-width: 7px;
124 |           }
125 |       }
126 |     }
127 |   }
128 |   
129 | </style>
130 | 


--------------------------------------------------------------------------------
/src/view/myReply.vue:
--------------------------------------------------------------------------------
  1 | <!--我的讨论-回复-->
  2 | <template>
  3 |   <div class="system">
  4 |     <nav class="tabtop">
  5 |       <ul class="dbox">
  6 |         <li class="flex tab">发表<span>1</span></li>
  7 |         <li class="flex tab active">回复<span>10</span></li>
  8 |       </ul>
  9 |     </nav>
 10 |     <div class="cm-main">
 11 |       <ul class="discuss-list">           
 12 |         <li>              
 13 |           <a href="javascript:;" class="block">
 14 |             <h3 class="elli">创新坦克对战手游《坦克大战OL》5月25日二测开启</h3>
 15 |           </a>
 16 |           <section class="dbox">                
 17 |             <p class="flex"><span class="elli max">哈哈还差哈哈还差哈哈还差哈哈还差</span></p>
 18 |             <p class="flex"><em>2016-07-19 19:42</em></p>
 19 |           </section>
 20 |         </li>
 21 |       </ul>
 22 |     </div>
 23 |   </div>
 24 | </template>
 25 | 
 26 | <script>
 27 | 
 28 | export default {
 29 |   name: 'new',
 30 |   components: {
 31 | 
 32 |   },
 33 |   data () {
 34 |     return {
 35 |       load:true,
 36 |       moreTip:'正在加载',
 37 |       loadshow: false,
 38 |       loadtext: '加载中',
 39 |     }
 40 |   },
 41 |   created () {
 42 |     let that = this;
 43 |   },
 44 |   mounted(){
 45 |     //document.querySelector('.edit').style.height = document.documentElement.clientHeight+'px';
 46 |   },
 47 |   methods: {
 48 |     
 49 |   },
 50 | }
 51 | </script>
 52 | 
 53 | 
 54 | <style scoped lang="less" type="text/less" rel="stylesheet/less">
 55 |   .icos{
 56 |     //background: url(../assets/img/per-in.png) 0 0 no-repeat;
 57 |   }
 58 |   .tabtop{
 59 |     position: fixed;
 60 |     width: 6.4rem;
 61 |     left: 50%;
 62 |     margin-left: -3.2rem;
 63 |     right: 0;
 64 |     top: 0;
 65 |     z-index: 99;
 66 |     overflow: hidden;
 67 |     box-sizing: border-box;
 68 |     height: .82rem;
 69 |     line-height: .81rem;
 70 |     background-color: rgba(255,255,255,1);
 71 |     text-align: center;
 72 |     font-size: .3rem;
 73 |     color: #353535;
 74 |     .active{
 75 |       border-bottom-color: #f48400;
 76 |       color: #f48400;
 77 |     }
 78 |     li{
 79 |       border-bottom: 1px solid rgb(232,232,232);
 80 |     }
 81 |   }
 82 |   .cm-main{
 83 |     padding-top:.82rem;
 84 |   }
 85 |   .discuss-list{
 86 |     padding:0 .3rem;
 87 |     li{
 88 |       padding: .2rem 0;
 89 |       font-size: .26rem;
 90 |       line-height: 1;
 91 |       border-bottom: 1px solid #e8e8e8;
 92 |       a{
 93 |         display: block;
 94 |         color: #333;
 95 |       }
 96 |       h3{
 97 |         font-size: .32rem;
 98 |         line-height: .52rem;
 99 |         padding-bottom: .10rem;
100 |       }
101 |       .flex:last-child{
102 |         text-align: right;
103 |       }
104 |       .dbox{
105 |         color: #a0a0a0;
106 |         font-size: .26rem;
107 |       }
108 |       .icos{
109 |         margin-right: .30rem;
110 |         color: #a0a0a0;
111 |         font-size: .24rem;       
112 |         i{
113 |           display: inline-block;
114 |           margin-right: .04rem;
115 |           width: .29rem;
116 |           height: .26rem;
117 |           background: url(../assets/img/dis-1.png) no-repeat;
118 |           background-size: 100%;
119 |           vertical-align: -.03rem;
120 |         }
121 |       }
122 |       .ico2 i{
123 |         background-image: url(../assets/img/dis-2.png);
124 |       }
125 |       .max{
126 |         display: inline-block;
127 |         max-width: 3.3rem;
128 |       }
129 |     }
130 |   }
131 |   
132 | </style>
133 | 


--------------------------------------------------------------------------------
/src/view/myWrite.vue:
--------------------------------------------------------------------------------
  1 | <!--我的讨论-发表-->
  2 | <template>
  3 |   <div class="system">
  4 |     <nav class="tabtop">
  5 |       <ul class="dbox">
  6 |         <li class="flex tab active">发表<span>1</span></li>
  7 |         <li class="flex tab">回复<span>10</span></li>
  8 |       </ul>
  9 |     </nav>
 10 |     <div class="cm-main">
 11 |       <ul class="discuss-list">           
 12 |         <li>              
 13 |           <a href="javascript:;" class="block">
 14 |             <h3 class="elli">可嗯哦哦摸摸哦哦弄</h3>
 15 |             <section class="dbox">                
 16 |               <p class="flex"><em>2016-05-23 16:37</em></p>
 17 |               <p class="flex">
 18 |                 <span class="icos ico1"><i></i>0</span>
 19 |                 <span class="icos ico2"><i></i>1</span>
 20 |               </p>
 21 |             </section>
 22 |           </a>
 23 |         </li>
 24 |       </ul>
 25 |     </div>
 26 |   </div>
 27 | </template>
 28 | 
 29 | <script>
 30 | export default {
 31 |   name: 'new',
 32 |   components: {
 33 | 
 34 |   },
 35 |   data () {
 36 |     return {
 37 |       load:true,
 38 |       moreTip:'正在加载',
 39 |       loadshow: false,
 40 |       loadtext: '加载中',
 41 |     }
 42 |   },
 43 |   created () {
 44 |     let that = this;
 45 |   },
 46 |   mounted(){
 47 |     //document.querySelector('.edit').style.height = document.documentElement.clientHeight+'px';
 48 |   },
 49 |   methods: {
 50 |     
 51 |   },
 52 | }
 53 | </script>
 54 | 
 55 | 
 56 | <style scoped lang="less" type="text/less" rel="stylesheet/less">
 57 |   .icos{
 58 |     //background: url(../assets/img/per-in.png) 0 0 no-repeat;
 59 |   }
 60 |   .tabtop{
 61 |     position: fixed;
 62 |     width: 6.4rem;
 63 |     left: 50%;
 64 |     margin-left: -3.2rem;
 65 |     right: 0;
 66 |     top: 0;
 67 |     z-index: 99;
 68 |     overflow: hidden;
 69 |     box-sizing: border-box;
 70 |     height: .82rem;
 71 |     line-height: .81rem;
 72 |     background-color: rgba(255,255,255,1);
 73 |     text-align: center;
 74 |     font-size: .3rem;
 75 |     color: #353535;
 76 |     .active{
 77 |       border-bottom-color: #f48400;
 78 |       color: #f48400;
 79 |     }
 80 |     li{
 81 |       border-bottom: 1px solid rgb(232,232,232);
 82 |     }
 83 |   }
 84 |   .cm-main{
 85 |     padding-top:.82rem;
 86 |   }
 87 |   .discuss-list{
 88 |     padding:0 .3rem;
 89 |     li{
 90 |       padding: .2rem 0;
 91 |       font-size: .26rem;
 92 |       line-height: 1;
 93 |       border-bottom: 1px solid #e8e8e8;
 94 |       a{
 95 |         display: block;
 96 |         color: #333;
 97 |       }
 98 |       h3{
 99 |         font-size: .32rem;
100 |         line-height: .52rem;
101 |         padding-bottom: .10rem;
102 |       }
103 |       .flex:last-child{
104 |         text-align: right;
105 |       }
106 |       .dbox{
107 |         color: #a0a0a0;
108 |         font-size: .26rem;
109 |       }
110 |       .icos{
111 |         margin-right: .30rem;
112 |         color: #a0a0a0;
113 |         font-size: .24rem;       
114 |         i{
115 |           display: inline-block;
116 |           margin-right: .04rem;
117 |           width: .29rem;
118 |           height: .26rem;
119 |           background: url(../assets/img/dis-1.png) no-repeat;
120 |           background-size: 100%;
121 |           vertical-align: -.03rem;
122 |         }
123 |       }
124 |       .ico2 i{
125 |         background-image: url(../assets/img/dis-2.png);
126 |       }
127 |     }
128 |   }
129 |   
130 | </style>
131 | 


--------------------------------------------------------------------------------
/src/view/newThread.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="new-detail">
  3 |     <input type="text" placeholder="请输入帖子标题（可选）">
  4 |     <div class="new_writes">
  5 |       <textarea placeholder="请输入帖子内容"></textarea>
  6 |       <div class="mc_file">
  7 |         <span class="wt_img"><img src="http://dl.gamdream.com/bbs/attachment/album/201607/21/5091691.jpg" alt=""><i class="del"></i></span>
  8 |         <a class="file_btn" href="javascript:;"><input id="uploadInput" type="file"><em class="file_num" date-num="5">可上传4张</em></a>
  9 |       </div>            
 10 |     </div>
 11 |     <div class="new_writes_btn"><a class="mt-btn" href="javascript:;">发表帖子</a></div>
 12 |   </div>
 13 | </template>
 14 | 
 15 | <script>
 16 | export default {
 17 |   name: 'new',
 18 |   components: {
 19 |   },
 20 |   data () {
 21 |     return {
 22 |       load:true,
 23 |       moreTip:'正在加载',
 24 |       loadshow: false,
 25 |       loadtext: '加载中'
 26 |     }
 27 |   },
 28 |   created () {
 29 |     let that = this;
 30 |   },
 31 |   methods: {
 32 | 
 33 |   },
 34 | }
 35 | </script>
 36 | 
 37 | 
 38 | <style scoped lang="less" type="text/less" rel="stylesheet/less">
 39 |   .new-detail{
 40 |     padding:.2rem;
 41 |   }
 42 |   .new-detail input {
 43 |     height: .66rem;
 44 |     line-height: .66rem;
 45 |     background: #fff;
 46 |     width: 100%;
 47 |     font-size: .3rem;
 48 |     border: 1px solid #e8e8e8;
 49 |     padding-left: .16rem;
 50 |     box-sizing: border-box;
 51 |     border-radius: .06rem;
 52 |     margin-bottom: .2rem;
 53 |     outline: none;
 54 |   }
 55 |   .new_writes {
 56 |     border: 1px solid #e8e8e8;
 57 |     border-radius: .05rem;
 58 |     padding-bottom: .2rem;
 59 |   }
 60 |   .new_writes textarea{
 61 |     width: 100%;
 62 |     font-size: .3rem;
 63 |     line-height: 1.2;
 64 |     height: 2.5rem;
 65 |     padding: .16rem;
 66 |     resize: none;
 67 |     border: none;
 68 |     background: #fff;
 69 |     margin: 0;
 70 |     box-sizing: border-box;
 71 |     border-radius: .06rem;
 72 |   }
 73 |   .new_writes_btn {
 74 |       text-align: right;
 75 |       padding: .2rem 0;
 76 |       a{
 77 |         padding: 0 .2rem;
 78 |         display: inline-block;
 79 |         background: #42bd41;
 80 |         border-radius: .05rem;
 81 |         width: 1.7rem;
 82 |         color: #fff;
 83 |         font-size: .3rem;        
 84 |         line-height: .7rem;
 85 |         text-align: center;
 86 |       }
 87 |   }
 88 |   .mc_file{
 89 |       padding: .2rem .2rem 0;
 90 |       display: -webkit-box;
 91 |       display: box;
 92 |       margin-right: -.4rem;
 93 |       .file_btn{
 94 |         display: inline-block;
 95 |         width: 1.08rem;
 96 |         height: 1.08rem;
 97 |         background: url(../assets/img/det-file.png) 0 0 no-repeat;
 98 |         background-size: 100%;
 99 |         position: relative;
100 |       }
101 |       input{
102 |         position: absolute;
103 |         width: 100%;
104 |         height: 100%;
105 |         opacity: 0;
106 |         filter: alpha(opacity=0);
107 |       }
108 |       em{
109 |         display: block;
110 |         margin: 0 auto;
111 |         padding: .75rem 0 0;
112 |         font-size: .2rem;
113 |         color: #999;
114 |         text-align: center;
115 |       }
116 |       .wt_img {
117 |           display: inline-block;
118 |           position: relative;
119 |           vertical-align: top;
120 |           margin: 0 .35rem .3rem 0;
121 |           img{
122 |             width: 1.08rem;
123 |             height: 1.08rem;
124 |             border-radius:.06rem;
125 |           }
126 |       }
127 |   }
128 |   .del{
129 |     position: absolute;
130 |     right: -.24rem;
131 |     top: -.24rem;
132 |     width: .44rem;
133 |     height: .44rem;
134 |     background: url(../assets/img/delete.png) 0 0 no-repeat;
135 |     background-size: 100% auto;
136 |   }
137 | </style>
138 | 


--------------------------------------------------------------------------------
/src/view/systemMessage.vue:
--------------------------------------------------------------------------------
  1 | <!--系统消息-系统消息-->
  2 | <template>
  3 |   <div class="system">
  4 |     <div class="tab dbox">
  5 |       <span class="flex">回复我的</span>
  6 |       <span class="active flex">系统消息</span>
  7 |     </div>
  8 |     <ul class="mremind">
  9 |       <li>
 10 |         <div class="mt dbox">
 11 |           <a class="pic" href="javascript:;"><img src="http://dfs.idreamsky.com/group1/M00/08/12/ChQUUFeQob-AOuN3AAA2BARMPkw2691500"></a>
 12 |           <a class="flex" href="javascript:">
 13 |             <h3>浪子i</h3>
 14 |             <p>05-23 16:38</p>
 15 |           </a>
 16 |         </div>
 17 |         <a class="mc" href="javascript:">
 18 |           <p class="text_mt">我们可以做朋友吗</p>
 19 |           <div class="text_mc">
 20 |             <i></i>
 21 |             <p class="elli">回复我的帖子：来咯哦哦摸摸哦哦弄</p>         
 22 |           </div>
 23 |         </a>
 24 |       </li>
 25 |     </ul>
 26 |   </div>
 27 | </template>
 28 | 
 29 | <script>
 30 | export default {
 31 |   name: 'new',
 32 |   components: {
 33 |     
 34 |   },
 35 |   data () {
 36 |     return {
 37 |       load:true,
 38 |       moreTip:'正在加载',
 39 |       loadshow: false,
 40 |       loadtext: '加载中',
 41 |     }
 42 |   },
 43 |   created () {
 44 |     let that = this;
 45 |   },
 46 |   mounted(){
 47 |     //document.querySelector('.edit').style.height = document.documentElement.clientHeight+'px';
 48 |   },
 49 |   methods: {
 50 |     
 51 |   },
 52 | }
 53 | </script>
 54 | 
 55 | 
 56 | <style scoped lang="less" type="text/less" rel="stylesheet/less">
 57 |   .tab{
 58 |     border-bottom: 1px solid #e9e9e9;
 59 |     .active{
 60 |       color: #23a8b7;
 61 |       border-color: #23a8b7;
 62 |     }
 63 |     span{
 64 |       display: block;
 65 |       text-align: center;
 66 |       height: .84rem;
 67 |       line-height: .84rem;
 68 |       color: #848484;
 69 |       font-size: .30rem;
 70 |       border-bottom: .07rem solid #fff;
 71 |     }
 72 |   }
 73 |   .mremind {
 74 |     padding: 0 .30rem;
 75 |     font-size: .30rem;
 76 |     li{
 77 |       padding-bottom: .10rem;
 78 |       .mt{
 79 |         padding: .25rem 0 .15rem;
 80 |         a{
 81 |           display: block;
 82 |           color: #898989;
 83 |           font-size: .26rem;
 84 |           line-height: 1;
 85 |         }       
 86 |         img{
 87 |           width: .72rem;
 88 |           height: .72rem;
 89 |           border-radius: .06rem;
 90 |           margin-right: .30rem;
 91 |         }
 92 |         h3{
 93 |           font-size: .30rem;
 94 |           padding-bottom: .16rem;
 95 |         }
 96 |       }
 97 |       .mc{
 98 |         display: block;
 99 |         color: #333;
100 |         line-height: .44rem;
101 |       }
102 |       .text_mt {
103 |           margin-bottom: .16rem;
104 |           padding: 0;
105 |       }
106 |       .text_mc {
107 |           color: #9a9a9a;
108 |           font-size: .26rem;
109 |           position: relative;
110 |           height: .66rem;
111 |           line-height: .66rem;
112 |           background: #e8eaec;
113 |           border-radius: .08rem;
114 |           padding-left: .16rem;
115 |           i {
116 |             position: absolute;
117 |             top: -13px;
118 |             left: .2rem;
119 |             width: 0;
120 |             height: 0;
121 |             overflow: hidden;
122 |             border-style: dashed solid dashed;
123 |             border-color: transparent transparent #e8eaec;
124 |             border-width: 7px;
125 |           }
126 |       }
127 |     }
128 |   }
129 |   
130 | </style>
131 | 


--------------------------------------------------------------------------------
/src/view/userCenter.vue:
--------------------------------------------------------------------------------
  1 | <!--个人中心-->
  2 | <template>
  3 |   <div class="center">
  4 |     <div class="mt dbox">
  5 |       <div class="img">
  6 |         <img src="http://dl.gamdream.com/bbs/attachment/album/201607/21/5061901.jpg"/>
  7 |       </div>
  8 |       <div class="info flex">
  9 |         <p class="name"><span>别瞅我1</span></p>
 10 |         <p class="more">
 11 |           <span class="age">29岁</span>
 12 |           <span>广东省 深圳市</span>
 13 |         </p>
 14 |         <a class="edit" href="javascript:;" @click="goEdit"><i></i>编辑资料</a>
 15 |       </div>
 16 |     </div>
 17 |     <div class="mc">
 18 |       <ul>
 19 |         <li>
 20 |           <p>我的讨论<span>0</span></p>
 21 |           <i class="icos"></i>
 22 |         </li>
 23 |         <li>
 24 |           <p>我的提醒</p>
 25 |           <em class="redtip"></em>
 26 |           <i class="icos"></i>
 27 |         </li>
 28 |         <li>
 29 |           <p>退出</p>
 30 |         </li>
 31 |       </ul>
 32 |     </div>
 33 |   </div>
 34 | </template>
 35 | 
 36 | <script>
 37 | export default {
 38 |   name: 'new',
 39 |   components: {
 40 |     
 41 |   },
 42 |   data () {
 43 |     return {
 44 |       load:true,
 45 |       moreTip:'正在加载',
 46 |       loadshow: false,
 47 |       loadtext: '加载中'
 48 |     }
 49 |   },
 50 |   created () {
 51 |     let that = this;
 52 |   },
 53 |   methods: {
 54 |     goEdit(){
 55 |       this.$router.push('/edit')
 56 |     }
 57 |   },
 58 | }
 59 | </script>
 60 | 
 61 | 
 62 | <style scoped lang="less" type="text/less" rel="stylesheet/less">
 63 |   .mt{
 64 |     padding: 2.2rem .3rem 0;
 65 |     height: 2rem;
 66 |     background: url(../assets/img/per-bg.jpg) no-repeat;
 67 |     background-size: 100% auto;
 68 |     font-size: .24rem;
 69 |     color: #fff;
 70 |     line-height: 1;
 71 |     position: relative;
 72 |     .img img{
 73 |       width: 1.6rem;
 74 |       height: 1.6rem;
 75 |       border-radius: .08rem;
 76 |       margin-right: .2rem;
 77 |     }
 78 |     .name{
 79 |       span{
 80 |         font-size: .32rem;
 81 |       }
 82 |     }
 83 |     .more{
 84 |       padding: .15rem 0 .25rem;
 85 |       overflow: hidden;
 86 |       .age{
 87 |         margin-right:.18rem;
 88 |       }
 89 |     }
 90 |     .edit{
 91 |       position: absolute;
 92 |       left: 2.10rem;
 93 |       bottom: .40rem;
 94 |       width: 1.70rem;
 95 |       height: .56rem;
 96 |       line-height: .56rem;
 97 |       text-align: center;
 98 |       background: #f2eff6;
 99 |       border-radius: .08rem;
100 |       font-size: .26rem;
101 |       color: #333;
102 |       i{
103 |         display: inline-block;
104 |         background: url(../assets/img/editor.png) no-repeat;
105 |         width: .33rem;
106 |         height: .30rem;
107 |         vertical-align: -.04rem;
108 |         margin-right: .04rem
109 |       }
110 |     }
111 |   }
112 |   .mc{
113 |     li{
114 |       vertical-align: middle;
115 |       font-size: .30rem;
116 |       color: #898989;
117 |       border-bottom:1px solid #e8e8e8;
118 |       padding: .10px .30rem;
119 |       line-height: .80rem;
120 |       height: .80rem;
121 |       background: #fff;
122 |       display: block;
123 |       overflow: hidden;
124 |       position: relative;
125 |       p{
126 |         float: left;
127 |         span{
128 |           margin-left: .12rem;
129 |           color: #333;
130 |         }
131 |       }
132 |       .icos{
133 |         position: absolute;
134 |         right: .30rem;
135 |         top: 50%;
136 |         margin-top: -.16rem;
137 |         width: .18rem;
138 |         height: .31rem;
139 |         background: url(../assets/img/per-in.png) 0 0 no-repeat;
140 |         background-size: 100%;
141 |         vertical-align: -.04rem;
142 |         margin-left: .12rem;
143 |       }
144 |       .redtip{
145 |         width: .18rem;
146 |         height: .18rem;
147 |         border-radius: 50%;
148 |         background: #ff5f5f;
149 |         position: absolute;
150 |         right: 0;
151 |         top: 50%;
152 |         margin: -.09rem .60rem 0 0;
153 |       }
154 |     }
155 |   }
156 | </style>
157 | 


--------------------------------------------------------------------------------
/static/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/galan99/vue-mintUI-demo/4c6b247bbc04cdcaca2462e9adc74b0c72a324f4/static/.gitkeep


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