初始化，从云上丹寨拷过来代码

.babelrc

+{
+  "presets": [
+    [
+      "env",
+      {
+        "modules": false,
+        "targets": {
+          "browsers": [
+            "> 1%",
+            "last 2 versions",
+            "not ie <= 8"
+          ]
+        }
+      }
+    ],
+    "stage-2"
+  ],
+  "plugins": [
+    "transform-vue-jsx",
+    "transform-runtime",
+    [
+      "component",
+      [
+        {
+          "libraryName": "mint-ui",
+          "style": true
+        }
+      ]
+    ]
+  ]
+}
\ No newline at end of file

.editorconfig

+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

.gitignore

+.DS_Store
+node_modules/
+/dist/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln

.postcssrc.js

+// https://github.com/michael-ciniawsky/postcss-load-config
+
+module.exports = {
+  "plugins": {
+    "postcss-import": {},
+    "postcss-url": {},
+    // to edit target browsers: use "browserslist" field in package.json
+    "autoprefixer": {},
+    // "postcss-px2rem": {
+    //   remUnit: 75
+    // }
+  }
+}

README.md

+# wandasuinipai
+
+> A Vue.js project
+
+## Build Setup
+
+``` bash
+# install dependencies
+npm install
+
+# serve with hot reload at localhost:8080
+npm run dev
+
+# build for production with minification
+npm run build
+
+# build for production and view the bundle analyzer report
+npm run build --report
+```
+
+For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).

build/build.js

+'use strict'
+require('./check-versions')()
+
+process.env.NODE_ENV = 'production'
+
+const ora = require('ora')
+const rm = require('rimraf')
+const path = require('path')
+const chalk = require('chalk')
+const webpack = require('webpack')
+const config = require('../config')
+const webpackConfig = require('./webpack.prod.conf')
+
+const spinner = ora('building for production...')
+spinner.start()
+
+rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
+  if (err) throw err
+  webpack(webpackConfig, (err, stats) => {
+    spinner.stop()
+    if (err) throw err
+    process.stdout.write(stats.toString({
+      colors: true,
+      modules: false,
+      children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
+      chunks: false,
+      chunkModules: false
+    }) + '\n\n')
+
+    if (stats.hasErrors()) {
+      console.log(chalk.red('  Build failed with errors.\n'))
+      process.exit(1)
+    }
+
+    console.log(chalk.cyan('  Build complete.\n'))
+    console.log(chalk.yellow(
+      '  Tip: built files are meant to be served over an HTTP server.\n' +
+      '  Opening index.html over file:// won\'t work.\n'
+    ))
+  })
+})

build/check-versions.js

+'use strict'
+const chalk = require('chalk')
+const semver = require('semver')
+const packageConfig = require('../package.json')
+const shell = require('shelljs')
+
+function exec (cmd) {
+  return require('child_process').execSync(cmd).toString().trim()
+}
+
+const versionRequirements = [
+  {
+    name: 'node',
+    currentVersion: semver.clean(process.version),
+    versionRequirement: packageConfig.engines.node
+  }
+]
+
+if (shell.which('npm')) {
+  versionRequirements.push({
+    name: 'npm',
+    currentVersion: exec('npm --version'),
+    versionRequirement: packageConfig.engines.npm
+  })
+}
+
+module.exports = function () {
+  const warnings = []
+
+  for (let i = 0; i < versionRequirements.length; i++) {
+    const mod = versionRequirements[i]
+
+    if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
+      warnings.push(mod.name + ': ' +
+        chalk.red(mod.currentVersion) + ' should be ' +
+        chalk.green(mod.versionRequirement)
+      )
+    }
+  }
+
+  if (warnings.length) {
+    console.log('')
+    console.log(chalk.yellow('To use this template, you must update following to modules:'))
+    console.log()
+
+    for (let i = 0; i < warnings.length; i++) {
+      const warning = warnings[i]
+      console.log('  ' + warning)
+    }
+
+    console.log()
+    process.exit(1)
+  }
+}

build/utils.js

+'use strict'
+const path = require('path')
+const config = require('../config')
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const packageConfig = require('../package.json')
+
+
+var glob = require('glob')
+var HtmlWebpackPlugin = require('html-webpack-plugin')
+var PAGE_PATH = path.resolve(__dirname, '../src/pages')
+var merge = require('webpack-merge')
+
+//多入口配置
+exports.entries = function () {
+    var entryFiles = glob.sync(PAGE_PATH + '/*/*.js')
+    var map = {}
+    entryFiles.forEach((filePath) => {
+        var filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))
+        map[filename] = filePath
+    })
+    return map
+}
+
+//多页面输出配置
+exports.htmlPlugin = function () {
+    let entryHtml = glob.sync(PAGE_PATH + '/*/*.html')
+    let arr = []
+    entryHtml.forEach((filePath) => {
+        let filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))
+        let conf = {
+            template: filePath,
+            filename: filename + '.html',
+            chunks: [filename],
+            inject: true
+        }
+        if (process.env.NODE_ENV === 'production') {
+            conf = merge(conf, {
+                chunks: ['manifest', 'vendor', filename],
+                minify: {
+                    removeComments: true,
+                    collapseWhitespace: true,
+                    removeAttributeQuotes: true
+                },
+                chunksSortMode: 'dependency'
+            })
+        }
+        arr.push(new HtmlWebpackPlugin(conf))
+    })
+    return arr
+}
+
+exports.assetsPath = function (_path) {
+    const assetsSubDirectory = process.env.NODE_ENV === 'production'
+        ? config.build.assetsSubDirectory
+        : config.dev.assetsSubDirectory
+
+    return path.posix.join(assetsSubDirectory, _path)
+}
+
+exports.cssLoaders = function (options) {
+    options = options || {}
+
+    const cssLoader = {
+        loader: 'css-loader',
+        options: {
+            sourceMap: options.sourceMap
+        }
+    }
+
+    const postcssLoader = {
+        loader: 'postcss-loader',
+        options: {
+            sourceMap: options.sourceMap
+        }
+    }
+
+    // generate loader string to be used with extract text plugin
+    function generateLoaders(loader, loaderOptions) {
+        const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
+
+        if (loader) {
+            loaders.push({
+                loader: loader + '-loader',
+                options: Object.assign({}, loaderOptions, {
+                    sourceMap: options.sourceMap
+                })
+            })
+        }
+
+        // Extract CSS when that option is specified
+        // (which is the case during production build)
+        if (options.extract) {
+            return ExtractTextPlugin.extract({
+                use: loaders,
+                fallback: 'vue-style-loader',
+                publicPath: '../../'  //加我叫我加我加我加我
+            })
+        } else {
+            return ['vue-style-loader'].concat(loaders)
+        }
+    }
+
+    // https://vue-loader.vuejs.org/en/configurations/extract-css.html
+    return {
+        css: generateLoaders(),
+        postcss: generateLoaders(),
+        less: generateLoaders('less'),
+        sass: generateLoaders('sass', { indentedSyntax: true }),
+        scss: generateLoaders('sass'),
+        stylus: generateLoaders('stylus'),
+        styl: generateLoaders('stylus')
+    }
+}
+
+// Generate loaders for standalone style files (outside of .vue)
+exports.styleLoaders = function (options) {
+    const output = []
+    const loaders = exports.cssLoaders(options)
+
+    for (const extension in loaders) {
+        const loader = loaders[extension]
+        output.push({
+            test: new RegExp('\\.' + extension + '$'),
+            use: loader
+        })
+    }
+
+    return output
+}
+
+exports.createNotifierCallback = () => {
+    const notifier = require('node-notifier')
+
+    return (severity, errors) => {
+        if (severity !== 'error') return
+
+        const error = errors[0]
+        const filename = error.file && error.file.split('!').pop()
+
+        notifier.notify({
+            title: packageConfig.name,
+            message: severity + ': ' + error.name,
+            subtitle: filename || '',
+            icon: path.join(__dirname, 'logo.png')
+        })
+    }
+}

build/vue-loader.conf.js

+'use strict'
+const utils = require('./utils')
+const config = require('../config')
+const isProduction = process.env.NODE_ENV === 'production'
+const sourceMapEnabled = isProduction
+  ? config.build.productionSourceMap
+  : config.dev.cssSourceMap
+
+module.exports = {
+  loaders: utils.cssLoaders({
+    sourceMap: sourceMapEnabled,
+    extract: isProduction
+  }),
+  cssSourceMap: sourceMapEnabled,
+  cacheBusting: config.dev.cacheBusting,
+  transformToRequire: {
+    video: ['src', 'poster'],
+    source: 'src',
+    img: 'src',
+    image: 'xlink:href'
+  },
+  // 添加这句话
+  postcss: [require('postcss-px2rem')({remUnit: 75})]
+}

build/webpack.base.conf.js

+'use strict'
+const path = require('path')
+const utils = require('./utils')
+const config = require('../config')
+const vueLoaderConfig = require('./vue-loader.conf')
+
+
+function resolve(dir) {
+    return path.join(__dirname, '..', dir)
+}
+
+const vuxLoader = require('vux-loader')
+
+const webpackConfig = {
+    context: path.resolve(__dirname, '../'),
+    // entry: {
+    //     app: './src/main.js'
+    // },
+    entry: utils.entries(),
+    output: {
+        path: config.build.assetsRoot,
+        filename: '[name].js',
+        publicPath: process.env.NODE_ENV === 'production'
+            ? config.build.assetsPublicPath
+            : config.dev.assetsPublicPath
+    },
+    resolve: {
+        extensions: ['.js', '.vue', '.json','.less'],
+        alias: {
+            'vue$': 'vue/dist/vue.esm.js',
+            '@': resolve('src'),
+        }
+    },
+    module: {
+        rules: [
+            {
+                test: /\.vue$/,
+                loader: 'vue-loader',
+                options: vueLoaderConfig
+            },
+            {
+                test: /\.js$/,
+                loader: 'babel-loader',
+                include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
+            },
+            {
+                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
+                loader: 'url-loader',
+                options: {
+                    limit: 10000,
+                    name: utils.assetsPath('img/[name].[hash:7].[ext]')
+                }
+            },
+            {
+                test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
+                loader: 'url-loader',
+                options: {
+                    limit: 10000,
+                    name: utils.assetsPath('media/[name].[hash:7].[ext]')
+                }
+            },
+            {
+                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
+                loader: 'url-loader',
+                options: {
+                    limit: 10000,
+                    name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
+                }
+            }
+        ]
+    },
+    node: {
+        // prevent webpack from injecting useless setImmediate polyfill because Vue
+        // source contains it (although only uses it if it's native).
+        setImmediate: false,
+        // prevent webpack from injecting mocks to Node native modules
+        // that does not make sense for the client
+        dgram: 'empty',
+        fs: 'empty',
+        net: 'empty',
+        tls: 'empty',
+        child_process: 'empty'
+    }
+}
+
+
+module.exports = vuxLoader.merge(webpackConfig, { plugins: ['vux-ui'] }) 

build/webpack.dev.conf.js

+'use strict'
+const utils = require('./utils')
+const webpack = require('webpack')
+const config = require('../config')
+const merge = require('webpack-merge')
+const path = require('path')
+const baseWebpackConfig = require('./webpack.base.conf')
+const CopyWebpackPlugin = require('copy-webpack-plugin')
+// const HtmlWebpackPlugin = require('html-webpack-plugin')
+const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
+const portfinder = require('portfinder')
+
+const HOST = process.env.HOST
+const PORT = process.env.PORT && Number(process.env.PORT)
+
+const devWebpackConfig = merge(baseWebpackConfig, {
+    module: {
+        rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
+    },
+    // cheap-module-eval-source-map is faster for development
+    devtool: config.dev.devtool,
+
+    // these devServer options should be customized in /config/index.js
+    devServer: {
+        clientLogLevel: 'warning',
+        historyApiFallback: {
+            rewrites: [
+                { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
+            ],
+        },
+        hot: true,
+        contentBase: false, // since we use CopyWebpackPlugin.
+        compress: true,
+        host: HOST || config.dev.host,
+        port: PORT || config.dev.port,
+        open: config.dev.autoOpenBrowser,
+        overlay: config.dev.errorOverlay
+            ? { warnings: false, errors: true }
+            : false,
+        publicPath: config.dev.assetsPublicPath,
+        proxy: config.dev.proxyTable,
+        quiet: true, // necessary for FriendlyErrorsPlugin
+        watchOptions: {
+            poll: config.dev.poll,
+        }
+    },
+    plugins: [
+        new webpack.DefinePlugin({
+            'process.env': require('../config/dev.env')
+        }),
+        new webpack.HotModuleReplacementPlugin(),
+        new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
+        new webpack.NoEmitOnErrorsPlugin(),
+        // https://github.com/ampedandwired/html-webpack-plugin
+        // new HtmlWebpackPlugin({
+        //     filename: 'index.html',
+        //     template: 'index.html',
+        //     inject: true
+        // }),
+        // copy custom static assets
+        new CopyWebpackPlugin([
+            {
+                from: path.resolve(__dirname, '../static'),
+                to: config.dev.assetsSubDirectory,
+                ignore: ['.*']
+            }
+        ])
+    ].concat(utils.htmlPlugin())
+})
+
+module.exports = new Promise((resolve, reject) => {
+    portfinder.basePort = process.env.PORT || config.dev.port
+    portfinder.getPort((err, port) => {
+        if (err) {
+            reject(err)
+        } else {
+            // publish the new Port, necessary for e2e tests
+            process.env.PORT = port
+            // add port to devServer config
+            devWebpackConfig.devServer.port = port
+
+            // Add FriendlyErrorsPlugin
+            devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
+                compilationSuccessInfo: {
+                    messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
+                },
+                onErrors: config.dev.notifyOnErrors
+                    ? utils.createNotifierCallback()
+                    : undefined
+            }))
+
+            resolve(devWebpackConfig)
+        }
+    })
+})

build/webpack.prod.conf.js

+'use strict'
+const path = require('path')
+const utils = require('./utils')
+const webpack = require('webpack')
+const config = require('../config')
+const merge = require('webpack-merge')
+const baseWebpackConfig = require('./webpack.base.conf')
+const CopyWebpackPlugin = require('copy-webpack-plugin')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
+
+const env = require('../config/prod.env')
+
+const webpackConfig = merge(baseWebpackConfig, {
+    module: {
+        rules: utils.styleLoaders({
+            sourceMap: config.build.productionSourceMap,
+            extract: true,
+            usePostCSS: true
+        })
+    },
+    devtool: config.build.productionSourceMap ? config.build.devtool : false,
+    output: {
+        path: config.build.assetsRoot,
+        filename: utils.assetsPath('js/[name].[chunkhash].js'),
+        chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
+    },
+    plugins: [
+        // http://vuejs.github.io/vue-loader/en/workflow/production.html
+        new webpack.DefinePlugin({
+            'process.env': env
+        }),
+        new UglifyJsPlugin({
+            uglifyOptions: {
+                compress: {
+                    warnings: false
+                }
+            },
+            sourceMap: config.build.productionSourceMap,
+            parallel: true
+        }),
+        // extract css into its own file
+        new ExtractTextPlugin({
+            filename: utils.assetsPath('css/[name].[contenthash].css'),
+            // Setting the following option to `false` will not extract CSS from codesplit chunks.
+            // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
+            // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`, 
+            // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
+            allChunks: true,
+        }),
+        // Compress extracted CSS. We are using this plugin so that possible
+        // duplicated CSS from different components can be deduped.
+        new OptimizeCSSPlugin({
+            cssProcessorOptions: config.build.productionSourceMap
+                ? { safe: true, map: { inline: false } }
+                : { safe: true }
+        }),
+        // generate dist index.html with correct asset hash for caching.
+        // you can customize output by editing /index.html
+        // see https://github.com/ampedandwired/html-webpack-plugin
+        // new HtmlWebpackPlugin({
+        //     filename: config.build.index,
+        //     template: 'index.html',
+        //     inject: true,
+        //     minify: {
+        //         removeComments: true,
+        //         collapseWhitespace: true,
+        //         removeAttributeQuotes: true
+        //         // more options:
+        //         // https://github.com/kangax/html-minifier#options-quick-reference
+        //     },
+        //     // necessary to consistently work with multiple chunks via CommonsChunkPlugin
+        //     chunksSortMode: 'dependency'
+        // }),
+        // keep module.id stable when vendor modules does not change
+        new webpack.HashedModuleIdsPlugin(),
+        // enable scope hoisting
+        new webpack.optimize.ModuleConcatenationPlugin(),
+        // split vendor js into its own file
+        new webpack.optimize.CommonsChunkPlugin({
+            name: 'vendor',
+            minChunks(module) {
+                // any required modules inside node_modules are extracted to vendor
+                return (
+                    module.resource &&
+                    /\.js$/.test(module.resource) &&
+                    module.resource.indexOf(
+                        path.join(__dirname, '../node_modules')
+                    ) === 0
+                )
+            }
+        }),
+        // extract webpack runtime and module manifest to its own file in order to
+        // prevent vendor hash from being updated whenever app bundle is updated
+        new webpack.optimize.CommonsChunkPlugin({
+            name: 'manifest',
+            minChunks: Infinity
+        }),
+        // This instance extracts shared chunks from code splitted chunks and bundles them
+        // in a separate chunk, similar to the vendor chunk
+        // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
+        new webpack.optimize.CommonsChunkPlugin({
+            name: 'app',
+            async: 'vendor-async',
+            children: true,
+            minChunks: 3
+        }),
+
+        // copy custom static assets
+        new CopyWebpackPlugin([
+            {
+                from: path.resolve(__dirname, '../static'),
+                to: config.build.assetsSubDirectory,
+                ignore: ['.*']
+            }
+        ])
+    ].concat(utils.htmlPlugin())
+})
+
+if (config.build.productionGzip) {
+    const CompressionWebpackPlugin = require('compression-webpack-plugin')
+
+    webpackConfig.plugins.push(
+        new CompressionWebpackPlugin({
+            asset: '[path].gz[query]',
+            algorithm: 'gzip',
+            test: new RegExp(
+                '\\.(' +
+                config.build.productionGzipExtensions.join('|') +
+                ')$'
+            ),
+            threshold: 10240,
+            minRatio: 0.8
+        })
+    )
+}
+
+if (config.build.bundleAnalyzerReport) {
+    const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
+    webpackConfig.plugins.push(new BundleAnalyzerPlugin())
+}
+
+module.exports = webpackConfig

config/dev.env.js

+'use strict'
+const merge = require('webpack-merge')
+const prodEnv = require('./prod.env')
+
+module.exports = merge(prodEnv, {
+  NODE_ENV: '"development"'
+})

config/index.js

+'use strict'
+// Template version: 1.3.1
+// see http://vuejs-templates.github.io/webpack for documentation.
+
+const path = require('path')
+
+module.exports = {
+  dev: {
+
+    // Paths
+    assetsSubDirectory: 'static',
+    assetsPublicPath: '/',
+    proxyTable: {},
+
+    // Various Dev Server settings
+    host: 'localhost', // can be overwritten by process.env.HOST
+    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
+    autoOpenBrowser: false,
+    errorOverlay: true,
+    notifyOnErrors: true,
+    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
+
+    
+    /**
+     * Source Maps
+     */
+
+    // https://webpack.js.org/configuration/devtool/#development
+    devtool: 'cheap-module-eval-source-map',
+
+    // If you have problems debugging vue-files in devtools,
+    // set this to false - it *may* help
+    // https://vue-loader.vuejs.org/en/options.html#cachebusting
+    cacheBusting: true,
+
+    cssSourceMap: true
+  },
+
+  build: {
+    // Template for index.html
+    index: path.resolve(__dirname, '../dist/index.html'),
+
+    // Paths
+    assetsRoot: path.resolve(__dirname, '../dist'),
+    assetsSubDirectory: 'static',
+    assetsPublicPath: './',
+
+    /**
+     * Source Maps
+     */
+
+    productionSourceMap: true,
+    // https://webpack.js.org/configuration/devtool/#production
+    devtool: '#source-map',
+
+    // Gzip off by default as many popular static hosts such as
+    // Surge or Netlify already gzip all static assets for you.
+    // Before setting to `true`, make sure to:
+    // npm install --save-dev compression-webpack-plugin
+    productionGzip: false,
+    productionGzipExtensions: ['js', 'css'],
+
+    // Run the build command with an extra argument to
+    // View the bundle analyzer report after build finishes:
+    // `npm run build --report`
+    // Set to `true` or `false` to always turn it on or off
+    bundleAnalyzerReport: process.env.npm_config_report
+  }
+}

config/prod.env.js

+'use strict'
+module.exports = {
+  NODE_ENV: '"production"'
+}

package-lock.json

+{
+  "name": "wandasuinipai",
+  "version": "1.0.0",
+  "lockfileVersion": 1,
+  "requires": true,
+  "dependencies": {
+    "vconsole": {
+      "version": "3.2.0",
+      "resolved": "http://registry.npm.taobao.org/vconsole/download/vconsole-3.2.0.tgz",
+      "integrity": "sha1-lg4od9aFqVQ/XzDsBVpmqWrBW7U=",
+      "dev": true
+    }
+  }
+}

package.json

+{
+    "name": "wandasuinipai",
+    "version": "1.0.0",
+    "description": "A Vue.js project",
+    "author": "mamingqun <maxrocky@maxrocky.com>",
+    "private": true,
+    "scripts": {
+        "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
+        "start": "npm run dev",
+        "build": "node build/build.js"
+    },
+    "dependencies": {
+        "axios": "^0.18.0",
+        "fastclick": "^1.0.6",
+        "jquery": "^3.3.1",
+        "mint-ui": "^2.2.13",
+        "normalize.css": "^8.0.0",
+        "vue": "^2.5.2",
+        "vue-router": "^3.0.1",
+        "vue-waterfall-easy": "^2.4.1",
+        "vuex": "^3.0.1",
+        "vux": "^2.9.2",
+        "weixin-js-sdk": "^1.4.0-test"
+    },
+    "devDependencies": {
+        "autoprefixer": "^7.1.2",
+        "babel-core": "^6.22.1",
+        "babel-helper-vue-jsx-merge-props": "^2.0.3",
+        "babel-loader": "^7.1.1",
+        "babel-plugin-component": "^1.1.1",
+        "babel-plugin-syntax-jsx": "^6.18.0",
+        "babel-plugin-transform-runtime": "^6.22.0",
+        "babel-plugin-transform-vue-jsx": "^3.5.0",
+        "babel-preset-env": "^1.3.2",
+        "babel-preset-stage-2": "^6.22.0",
+        "chalk": "^2.0.1",
+        "copy-webpack-plugin": "^4.0.1",
+        "css-loader": "^0.28.0",
+        "extract-text-webpack-plugin": "^3.0.0",
+        "file-loader": "^2.0.0",
+        "friendly-errors-webpack-plugin": "^1.6.1",
+        "html-webpack-plugin": "^2.30.1",
+        "less": "^3.8.1",
+        "less-loader": "^4.1.0",
+        "node-notifier": "^5.1.2",
+        "node-sass": "^4.9.3",
+        "optimize-css-assets-webpack-plugin": "^3.2.0",
+        "ora": "^1.2.0",
+        "portfinder": "^1.0.13",
+        "postcss-import": "^11.0.0",
+        "postcss-loader": "^2.0.8",
+        "postcss-px2rem": "^0.3.0",
+        "postcss-url": "^7.2.1",
+        "rimraf": "^2.6.0",
+        "sass-loader": "^7.1.0",
+        "semver": "^5.3.0",
+        "shelljs": "^0.7.6",
+        "uglifyjs-webpack-plugin": "^1.1.1",
+        "url-loader": "^1.1.2",
+        "vconsole": "^3.2.0",
+        "vue-loader": "^13.3.0",
+        "vue-style-loader": "^3.0.1",
+        "vue-template-compiler": "^2.5.2",
+        "vux-loader": "^1.2.9",
+        "webpack": "^3.6.0",
+        "webpack-bundle-analyzer": "^2.9.0",
+        "webpack-dev-server": "^2.9.1",
+        "webpack-merge": "^4.1.0"
+    },
+    "engines": {
+        "node": ">= 6.0.0",
+        "npm": ">= 3.0.0"
+    },
+    "browserslist": [
+        "> 1%",
+        "last 2 versions",
+        "not ie <= 8"
+    ]
+}

src/components/CardPrize.vue

+<template>
+    <section class="prizeBox">
+        <div class="titileBox">
+            <!-- <div :class="['imgbox',type===1?'jinjiang':(type===2?'yinjiang':'tongjiang')]"></div> -->
+            <div :class="['imgbox',prizeIcon]"></div>
+            <p class="text">{{title}}</p>
+        </div>
+        <ul class="contentBox123" v-if="huojiangArr">
+            <li v-for="(item, index) in huojiangArr" :key="index">
+                <router-link tag="a" class="bigA" :to="{path:'/detail',query:{id:item.id}}">
+                    <div class="detailInfo">
+                        <div class="author">作者：{{item.nickname}}</div>
+                        <!-- <div class="title">作品：{{item.title}}</div> -->
+                    </div>
+                    <img :src="item.image" alt>
+                    <div class="pictureInfo">
+                        <div class="text">{{item.desc}}</div>
+                        <div class="dianzan">{{item.point_num}}</div>
+                    </div>
+                </router-link>
+            </li>
+        </ul>
+    </section>
+</template>
+
+<script>
+export default {
+    props: {
+        type: {
+            required: true
+        },
+        dataArr: {
+            required: true
+        },
+        title: {
+            type: String
+        }
+    },
+    data() {
+        return {};
+    },
+    computed: {
+        huojiangArr() {
+            var arr = [];
+            this.dataArr.forEach(ele => {
+                if (ele.award === this.type) {
+                    arr.push(ele);
+                }
+            });
+            return arr;
+        },
+        prizeIcon() {
+            var num = Number(this.type);
+            var name = '';
+            switch (num) {
+                case 1:
+                    name = 'prize1'
+                    break;
+                case 2:
+                    name = 'prize2'
+                    break;
+                case 3:
+                    name = 'prize3'
+                    break;
+                case 4:
+                    name = 'prize4'
+                    break;
+                case 5:
+                    name = 'prize5'
+                    break;
+                default:
+                    break;
+            }
+
+            return name;
+        }
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+.prizeBox {
+    width: 710px;
+    background: white;
+    border-radius: 5px;
+    margin: 0 auto;
+    box-shadow: 0px 0px 15px #888888;
+    margin-bottom: 50px;
+
+    .titileBox {
+        height: 145px;
+        padding-left: 26px;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+
+        .imgbox {
+            width: 82px;
+            height: 92px;
+        }
+
+        .prize1 {
+            background: url("~@/pages/index/assets/images/prize1.png") no-repeat;
+            background-size: 100% auto;
+        }
+
+        .prize2 {
+            background: url("~@/pages/index/assets/images/prize2.png") no-repeat;
+            background-size: 100% auto;
+        }
+
+        .prize3 {
+            background: url("~@/pages/index/assets/images/prize3.png") no-repeat;
+            background-size: 100% auto;
+        }
+
+        .prize4 {
+            background: url("~@/pages/index/assets/images/prize4.png") no-repeat;
+            background-size: 100% auto;
+        }
+
+        .prize5 {
+            background: url("~@/pages/index/assets/images/prize5.png") no-repeat;
+            background-size: 100% auto;
+        }
+
+        .jinjiang {
+            background: url("~@/pages/index/assets/images/jinjiang.png")
+                no-repeat;
+            background-size: 100% auto;
+        }
+
+        .yinjiang {
+            background: url("~@/pages/index/assets/images/yinjiang.png")
+                no-repeat;
+            background-size: 100% auto;
+        }
+
+        .tongjiang {
+            background: url("~@/pages/index/assets/images/tongjiang.png")
+                no-repeat;
+            background-size: 100% auto;
+        }
+
+        .text {
+            font-size: 48px;
+            font-weight: bold;
+            margin-left: 20px;
+        }
+    }
+
+    .contentBox123 {
+        li {
+            width: 678px;
+            margin: 0 auto;
+            position: relative;
+            margin-bottom: 15px;
+
+            .detailInfo {
+                height: 60px;
+                line-height: 60px;
+                display: flex;
+                flex-direction: row;
+                justify-content: flex-start;
+                align-items: center;
+                // background: red;
+
+                .author {
+                    width: 280px;
+                    font-size: 28px;
+                    color: black;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    padding-right: 10px;
+                }
+
+                .title {
+                    font-size: 28px;
+                    color: black;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                }
+            }
+
+            img {
+                width: 100%;
+            }
+            .pictureInfo {
+                height: 60px;
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+                justify-content: space-between;
+                padding-left: 20px;
+                padding-right: 20px;
+                position: absolute;
+                width: 100%;
+                bottom: 8px;
+                background: rgba($color: #000000, $alpha: 0.8);
+                color: white;
+
+                .text {
+                    font-size: 24px;
+                    max-width: 500px;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                }
+                .dianzan {
+                    font-size: 21px;
+                    height: 60px;
+                    line-height: 60px;
+                    position: relative;
+                }
+                .dianzan::before {
+                    content: "";
+                    display: block;
+                    width: 24px;
+                    height: 24px;
+                    background: url("~@/pages/index/assets/images/xinbai.png")
+                        no-repeat;
+                    background-size: 100% auto;
+                    position: absolute;
+                    left: -35px;
+                    top: 50%;
+                    margin-top: -12px;
+                }
+            }
+        }
+    }
+
+    .contentBox456 {
+        width: 678px;
+        height: 540px;
+        background: white;
+        margin: 0 auto 15px;
+        // display: inline-flex;
+
+        display: flex;
+        flex-direction: row;
+
+        overflow-x: scroll;
+        overflow-y: hidden;
+
+        img {
+            height: 100%;
+            width: auto;
+            // position:absolute;
+            // top:0;
+            // bottom:0;
+            // left:0;
+        }
+
+        li {
+            display: inline-block;
+            position: relative;
+
+            // width: 100%;
+
+            // padding-bottom:100%;
+            // float: left;
+            .abiaoqian {
+                position: absolute;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+            }
+        }
+
+        .pictureInfo {
+            height: 60px;
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: space-between;
+            padding-left: 20px;
+            padding-right: 20px;
+            position: absolute;
+            width: 100%;
+            bottom: 0;
+            background: rgba($color: #000000, $alpha: 0.8);
+            color: white;
+
+            .text {
+                font-size: 24px;
+                max-width: 500px;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+            .dianzan {
+                font-size: 21px;
+                height: 60px;
+                line-height: 60px;
+                position: relative;
+            }
+            .dianzan::before {
+                content: "";
+                display: block;
+                width: 24px;
+                height: 24px;
+                background: url("~@/pages/index/assets/images/xinbai.png")
+                    no-repeat;
+                background-size: 100% auto;
+                position: absolute;
+                left: -35px;
+                top: 50%;
+                margin-top: -12px;
+            }
+        }
+    }
+}
+</style>

src/components/Cardcommon.vue

+<template>
+    <div class="commonWrap">
+        <div class="commonCard">
+            <router-link
+                tag="div"
+                class="bigA"
+                :to="{path:'/detail',query:{id:dataV.id}}"
+                v-if="cartType==='detail'"
+            ></router-link>
+            <router-link tag="div" class="smallA" :to="{path:'/detail',query:{id:dataV.id}}"></router-link>
+            <div class="text" v-if="cartType === 'userCenter'">{{dataV.desc}}</div>
+            <div class="userInfoBox">
+                <section class="userInfo" v-if="cartType==='detail'">
+                    <div class="portraitWrap">
+                        <div class="portrait">
+                            <img :src="dataV.avatar" alt>
+                        </div>
+                    </div>
+                    <div class="userName">{{dataV.desc}}</div>
+                </section>
+                <div
+                    v-if="dataV.is_point"
+                    :class="['dianZan',cartType === 'userCenter'?'paddingleft':'' ]"
+                >{{dataV.point_num}}</div>
+                <div
+                    v-else
+                    :class="['dianZanKongxin',cartType === 'userCenter'?'paddingleft':'' ]"
+                >{{dataV.point_num}}</div>
+                <div class="shanchu" v-if="cartType === 'userCenter'" @click="deleteItme">删除</div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { MessageBox, Toast } from 'mint-ui';
+import axios from 'axios';
+export default {
+    name: 'Cardcommon',
+    props: {
+        dataV: {},
+        cartType: {
+            type: String,
+            default: 'detail'
+        },
+        xuhao: {
+            type: Boolean,
+            default: false
+        }
+    },
+    data() {
+        return {
+            src: null
+        };
+    },
+    created() {
+
+    },
+    computed: {
+        testImgSrc() {
+            var num = Number(this.picture);
+            var src = null;
+            switch (num) {
+                case 1:
+                    src = '../pages/index/assets/images/01.png';
+                    break;
+                case 2:
+                    src = '../pages/index/assets/images/02.png';
+                    break;
+                case 3:
+                    src = '../pages/index/assets/images/03.png';
+                    break;
+                default:
+                    src = '../pages/index/assets/images/01.png';
+                    break;
+            }
+            return src;
+        }
+    },
+    mounted() { },
+    methods: {
+        test() {
+            alert(123);
+        },
+        deleteItme() {
+            MessageBox.confirm('您确定删除此作品么?', '').then(action => {
+                if (action) {
+                    axios.post('/contest/user/image/del', {
+                        id: this.dataV.id
+                    }).then((res) => {
+                        console.log(res.data.code === 0);
+                        if (res.data.code === 0) {
+                            Toast({ message: '删除成功' });
+                            $eventbus.$emit('detelItem')
+                        } else {
+                            Toast({ message: '删除失败' });
+                        }
+                    }).catch((e) => {
+                        console.log(e);
+                    })
+                }
+            }).catch((err) => {
+            });
+        }
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+.commonWrap {
+    padding-bottom: 50px;
+}
+
+.commonCard {
+    width: 100%;
+    background: white;
+    // position: relative;
+    // position: relative;
+    // margin-bottom: 20px;
+    // padding-bottom: 20px;
+
+    .bigA {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+    }
+
+    .smallA {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 145px;
+    }
+
+    .imgBox {
+        img {
+            width: 100%;
+        }
+    }
+
+    .text {
+        color: black;
+        font-size: 27px;
+        padding-top: 15px;
+        // margin-bottom: 15px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        padding-left: 20px;
+        padding-right: 20px;
+    }
+
+    .userInfoBox {
+        box-sizing: content-box;
+        padding-left: 20px;
+        padding-right: 20px;
+        // padding-bottom: 18px;
+        height: 80px;
+
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+
+        .userInfo {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            // background: red;
+
+            .portraitWrap {
+                width: 50px;
+                height: 50px;
+
+                position: absolute;
+                bottom: 43px;
+                left: 50%;
+                transform: translate(-50%, 0);
+                // border-radius: 50%;
+                // overflow: hidden;
+            }
+
+            .portrait {
+                width: 76px;
+                height: 76px;
+                // border-radius: 50%;
+                // overflow: hidden;
+                position: relative;
+
+                img {
+                    width: 76px;
+                    height: 76px;
+                    border-radius: 50%;
+                    overflow: hidden;
+                    position: absolute;
+                    top: 50%;
+                    left: 50%;
+                    transform: translate(-50%, -50%);
+                    border: 4px solid white;
+                }
+            }
+
+            .userName {
+                font-size: 24px;
+                color: #666666;
+                margin-left: 12px;
+                height: 50px;
+                line-height: 50px;
+                max-width: 200px;
+                // background: yellow;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+        }
+
+        .dianZan {
+            color: #666666;
+            font-size: 20px;
+            position: relative;
+            height: 50px;
+            line-height: 50px;
+        }
+
+        .dianZan::before {
+            content: "";
+            display: block;
+            width: 24px;
+            height: 24px;
+            background: url("~@/pages/index/assets/images/xin.png") no-repeat;
+            background-size: 100% auto;
+            position: absolute;
+            left: -30px;
+            top: 50%;
+            margin-top: -12px;
+        }
+
+        .dianZanKongxin {
+            color: #666666;
+            font-size: 20px;
+            position: relative;
+            height: 50px;
+            line-height: 50px;
+        }
+
+        .dianZanKongxin::before {
+            content: "";
+            display: block;
+            width: 24px;
+            height: 24px;
+            background: url("~@/pages/index/assets/images/kongxin.png")
+                no-repeat;
+            background-size: 100% auto;
+            position: absolute;
+            left: -30px;
+            top: 50%;
+            margin-top: -12px;
+        }
+
+        .paddingleft {
+            margin-left: 30px;
+        }
+
+        .shanchu {
+            font-size: 25px;
+            color: #666666;
+        }
+    }
+
+    .xuhao {
+        width: 40px;
+        height: 40px;
+        line-height: 40px;
+        text-align: center;
+        font-size: 24px;
+        border-radius: 50%;
+        position: absolute;
+        top: 15px;
+        right: 15px;
+        background: white;
+    }
+}
+</style>

src/components/Fuceng.vue

+<template>
+    <div class="fuceng">
+        <div class="fucengBox">
+            <div class="close" @click="closeFuceng"></div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+
+        }
+    },
+    mounted() {
+        var modal = document.getElementsByClassName('fucengBox')[0];
+        modal.addEventListener('touchmove', function (e) {
+            e.preventDefault();
+        }, false)
+    },
+    methods: {
+        closeFuceng() {
+            // console.log(123123);
+            $eventbus.$emit('closeFuceng')
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.fuceng {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.7);
+    z-index: 1000000;
+
+    .fucengBox {
+        width: 9rem;
+        height: 12.5rem;
+        background: url("~@/pages/index/assets/images/Fuceng.png") no-repeat center;
+        background-size: contain;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+
+        .close {
+            width: 1.5rem;
+            height: 1.5rem;
+            position: absolute;
+            bottom: 30px;
+            left: 50%;
+            transform: translate(-50%, 0);
+        }
+    }
+}
+</style>
+

src/components/HelloWorld.vue

+<template>
+    <div class="hello">
+        <h1>我是首页</h1>
+        <h2>Essential Links</h2>
+        <ul>
+            <li>
+                <a href="https://vuejs.org" target="_blank">
+                    Core Docs
+                </a>
+            </li>
+            <li>
+                <a href="https://forum.vuejs.org" target="_blank">
+                    Forum
+                </a>
+            </li>
+            <li>
+                <a href="https://chat.vuejs.org" target="_blank">
+                    Community Chat
+                </a>
+            </li>
+            <li>
+                <a href="https://twitter.com/vuejs" target="_blank">
+                    Twitter
+                </a>
+            </li>
+            <br>
+            <li>
+                <a href="http://vuejs-templates.github.io/webpack/" target="_blank">
+                    Docs for This Template
+                </a>
+            </li>
+        </ul>
+        <h2>Ecosystem</h2>
+        <ul>
+            <li>
+                <a href="http://router.vuejs.org/" target="_blank">
+                    vue-router
+                </a>
+            </li>
+            <li>
+                <a href="http://vuex.vuejs.org/" target="_blank">
+                    vuex
+                </a>
+            </li>
+            <li>
+                <a href="http://vue-loader.vuejs.org/" target="_blank">
+                    vue-loader
+                </a>
+            </li>
+            <li>
+                <a href="https://github.com/vuejs/awesome-vue" target="_blank">
+                    awesome-vue
+                </a>
+            </li>
+        </ul>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'HelloWorld',
+    data() {
+        return {
+            msg: 'Welcome to Your Vue.js App'
+        };
+    }
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h1,
+h2 {
+    font-weight: normal;
+}
+ul {
+    list-style-type: none;
+    padding: 0;
+}
+li {
+    display: inline-block;
+    margin: 0 10px;
+}
+a {
+    color: #42b983;
+}
+</style>

src/components/PrizeBox.vue

+<template>
+    <div class="prizeList">
+        <div class="content">
+            <!-- <div class="titleBox">
+                <div class="title">
+                    <div class="mainTitle">
+                        获奖名单
+                    </div>
+                    <div class="subTitle">
+                        <div class="clock"></div>
+                        <div class="text">{{this.time}}</div>
+                    </div>
+                </div>
+                <ul class="listArr">
+                    <li>
+                        <div class="zuo zuoBig">名次</div>
+                        <div class="zhong zuoBig">用户</div>
+                        <div class="you zuoBig">点赞量</div>
+                    </li>
+                    <li v-for="(item, index) in huojiang" :key="index">
+                        <div class="zuo">{{item.num|prizeFilter}}</div>
+                        <div class="zhong">{{item.nickname}}</div>
+                        <div class="you">{{item.point_num}}</div>
+                    </li>
+                </ul>
+            </div> -->
+            <div class="newBox">
+                <div class="topBox123">
+                    <div class="title">
+                        <div class="mainTitle">
+                            获奖名单
+                        </div>
+                        <!-- <div class="subTitle">
+                            <div class="clock"></div>
+                            <div class="text">&nbsp;{{this.time}}</div>
+                        </div> -->
+                    </div>
+                </div>
+                <ul class="listArr">
+                    <li class="middleBox">
+                        <div class="wrap">
+                            <div class="zuo zuoBig">奖项</div>
+                            <div class="zhong zuoBig">作品</div>
+                            <!-- <div class="you zuoBig">获奖时点赞量</div> -->
+                        </div>
+                    </li>
+                    <li class="middleBox" v-for="(item, index) in huojiang" :key="index">
+                        <div class="wrap">
+                            <div class="zuo">{{item.num|prizeFilter}}</div>
+                            <div class="zhong">《{{item.desc}}》</div>
+                            <!-- <div class="you">{{item.point_num}}</div> -->
+                        </div>
+                    </li>
+                </ul>
+                <div class="bottomBox"></div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        huojiang: {},
+        time: {}
+    },
+    data() {
+        return {};
+    },
+    filters: {
+        prizeFilter(val) {
+            val = Number(val);
+            var name = null;
+            switch (val) {
+                case 1:
+                    name = '金奖';
+                    break;
+                case 2:
+                    name = '银奖';
+                    break;
+                case 3:
+                    name = '铜奖';
+                    break;
+                // case 5:
+                //     name = '铜奖';
+                //     break;
+                // case 8:
+                //     name = '入围奖';
+                //     break;
+                default:
+                    name = '';
+                    break;
+            }
+            return name;
+        }
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.prizeList {
+    width: 710px;
+    // height: 1450px;
+    background: white;
+    border-radius: 5px;
+    margin: 20px auto 30px;
+    box-shadow: 0px 0px 15px #888888;
+
+    .content {
+        width: 100%;
+        height: 100%;
+        // background: url('~@/pages/index/assets/images/borderBg.png') no-repeat;
+        // background-size: 100% auto;
+        padding: 1px;
+    }
+
+    .newBox {
+        .topBox123 {
+            height: 170px;
+            background: url('~@/pages/index/assets/images/topBar.png') no-repeat;
+            background-size: 100% auto;
+            padding: 1px;
+
+            .title {
+                .mainTitle {
+                    text-align: center;
+                    color: #544336;
+                    font-size: 40px;
+                    margin-top: 60px;
+                    margin-bottom: 10px;
+                    letter-spacing: 3px;
+                    font-weight: bold;
+                }
+
+                .subTitle {
+                    display: flex;
+                    flex-direction: row;
+                    justify-content: center;
+                    align-items: center;
+                    letter-spacing: 1px;
+                    margin-top: 15px;
+
+                    .clock {
+                        width: 18px;
+                        height: 18px;
+                        background: url('~@/pages/index/assets/images/shizhong.png')
+                            no-repeat;
+                        background-size: 100% 100%;
+                    }
+
+                    .text {
+                        font-size: 22px;
+                        position: relative;
+                        // top:-1px;
+                    }
+                }
+            }
+        }
+
+        .middleBox {
+            background: url('~@/pages/index/assets/images/middleBar.png')
+                repeat-y;
+            background-size: 100% auto;
+        }
+
+        .listArr {
+            // margin-top: 20px;
+
+            .wrap{
+                width: 580px;
+                display: flex;
+                flex-direction: row;
+                justify-content: space-around;
+                box-sizing: content-box;
+                margin: 0 auto;
+            }
+
+            li {
+                font-size: 26px;
+                padding-bottom: 20px;
+
+                .zuoBig {
+                    font-size: 30px;
+                    font-weight: bold;
+                    color: #544336;
+                    padding-bottom: 10px;
+                    box-sizing: content-box;
+                }
+
+                .zuo {
+                    width: 150px;
+                    // background: red;
+                    text-align: center;
+                }
+
+                .zhong {
+                    width: 300px;
+                    // background: green;
+                    text-align: center;
+                    white-space: nowrap;
+                }
+
+                .you {
+                    width: 210px;
+                    // background: yellow;
+                    text-align: center;
+                }
+            }
+        }
+
+        .bottomBox {
+            height: 75px;
+            background: url('~@/pages/index/assets/images/bottomBar.png')
+                no-repeat bottom;
+            background-size: 100% auto;
+        }
+    }
+}
+</style>

src/components/TypeBox.vue

+<template>
+    <div class="choiceBoxWrap">
+        <ul class="choiceBox">
+            <li :class="[activeNum===0?'active':'']" @click="changeActive(0)">全部</li>
+            <li :class="[activeNum===1?'active':'']" @click="changeActive(1)">建筑类</li>
+            <li :class="[activeNum===2?'active':'']" @click="changeActive(2)">生活类</li>
+            <li :class="[activeNum===3?'active':'']" @click="changeActive(3)">创意类</li>
+            <li :class="[activeNum===4?'active':'']" @click="changeActive(4)">老照片</li>
+            <li :class="[activeNum===5?'active':'']" @click="changeActive(5)">其他类</li>
+        </ul>
+    </div>
+</template>
+
+<script>
+export default{
+    props:{
+        boxType:{
+            type: String,
+            required: true
+        },
+        activeNum:{
+            type: Number,
+            required: true
+        }
+    },
+    data(){
+        return{
+            active: 0
+        }
+    },
+    methods:{
+        changeActive(num){
+            this.active = num;
+
+            $eventbus.$emit('changePhotoType',{
+                type: this.boxType,
+                num: num
+            });
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.choiceBoxWrap {
+    overflow: scroll;
+    .choiceBox {
+        width: 850px;
+        // height: 85px;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-around;
+        align-items: center;
+        margin-top: 10px;
+        // background: red;
+
+        li {
+            width: 114px;
+            height: 65px;
+            color: #999999;
+            line-height: 56px;
+            text-align: center;
+            font-size: 27px;
+            // border: 2px solid gray;
+            // border-radius: 14px;
+        }
+
+        li.active {
+            border: none;
+            color: #2156a5;
+            font-size: 31px;
+            font-weight: bold;
+            position: relative;
+            // background: #2156a5;    
+        }
+
+        li.active::after {
+            content: '';
+            display: block;
+            width: 28px;
+            border-bottom: 6px solid #2156a5;
+            position: absolute;
+            bottom: 0px;
+            left: 50%;
+            transform: translate(-50%,0);
+        }
+    }
+}
+</style>

src/modules/css/myreset.css

+*,
+::before,
+::after {
+    margin: 0;
+    padding: 0;
+    -webkit-tap-highlight-color: transparent;
+    /*清除点击默认的高亮效果*/
+    box-sizing: border-box;
+    -webkit-overflow-scrolling: touch;
+    /* user-select: none; */
+}
+
+html,
+body {
+    width: 100%;
+    height: 100%;
+    font-family: 'Helvetica','Helvetica Neue','STHeiti','Heiti SC','Arial','Verdana','Tahoma';
+    /* background: black; */
+}
+
+a {
+    text-decoration: none;
+}
+
+ul,li {
+    list-style: none;
+}
+
+/*清除浮动*/
+.c-l::before,
+.c-l::after {
+    content: ".";
+    display: block;
+    height: 0;
+    line-height: 0;
+    visibility: hidden;
+    clear: both;
+}
+
+.f-l{
+    float: left;
+}
+
+.f-r{
+    float: right;
+}
+
+.img-inner-box {
+    box-shadow: none !important;
+}
+
+.vue-waterfall-easy{
+    box-sizing: content-box;
+    padding-bottom: 30px;
+}
+
+
+.allLoaded {
+    font-size: 30px;
+    color: #cccccc;
+    text-align: center;
+    box-sizing: content-box;
+    padding: 20px;
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    height: 30px;
+}
\ No newline at end of file

src/modules/js/api.js

+
+// // api地址
+// var server = 'http://web-comment.canskj.cn/new';
+// var extra = '7';
+
+// //包装的地址
+// var wrapHref = 'http://web-comment.iyunfish.cn/relay/contest/h5/7';
+
+// //首页地址
+// var indexHref = 'http://web-comment.canskj.cn/relay/contest/h5/7';
+// // 个人中心地址
+// var userCenterHref = 'http://web-comment.canskj.cn/relay/contest/h5/newuser/7';
+
+// var shareImg = 'http://web-comment.canskj.cn/relay/contest/h5/static/share.jpg';
+
+
+
+// api地址
+var server = 'http://wanda-qj.iyunfish.com/new';
+var extra = '7';
+
+//防封包装的地址
+var wrapHref = 'http://wanda-qj.maxrocky.com/relay/contest/h5/7';
+
+//首页地址
+var indexHref = 'http://wanda-qj.iyunfish.com/relay/contest/h5/7';
+// 个人中心地址
+var userCenterHref = 'http://wanda-qj.iyunfish.com/relay/contest/h5/newuser/7';
+
+var shareImg = 'http://wanda-qj.iyunfish.com/relay/contest/h5/static/share.jpg';
+
+export default{
+    server,
+    extra,
+    userCenterHref,
+    indexHref,
+    shareImg,
+    wrapHref
+}
+
+
+
+// // api地址
+// var server = 'http://wanda-qj.maxrocky.com/new';
+// var extra = '7';
+
+// //首页地址
+// var indexHref = 'http://wanda-qj.maxrocky.com/relay/contest/h5/7';
+// // 个人中心地址
+// var userCenterHref = 'http://wanda-qj.maxrocky.com/relay/contest/h5/newuser/7';
+
+// var shareImg = 'http://wanda-qj.maxrocky.com/relay/contest/h5/static/share.jpg';
\ No newline at end of file

src/modules/js/flexible.js

+(function flexible (window, document) {
+  var docEl = document.documentElement
+  var dpr = window.devicePixelRatio || 1
+
+  // adjust body font size
+  function setBodyFontSize () {
+    if (document.body) {
+      document.body.style.fontSize = (12 * dpr) + 'px'
+    }
+    else {
+      document.addEventListener('DOMContentLoaded', setBodyFontSize)
+    }
+  }
+  setBodyFontSize();
+
+  // set 1rem = viewWidth / 10
+  function setRemUnit () {
+    var rem = docEl.clientWidth / 10
+    docEl.style.fontSize = rem + 'px'
+  }
+
+  setRemUnit()
+
+  // reset rem unit on page resize
+  window.addEventListener('resize', setRemUnit)
+  window.addEventListener('pageshow', function (e) {
+    if (e.persisted) {
+      setRemUnit()
+    }
+  })
+
+  // detect 0.5px supports
+  if (dpr >= 2) {
+    var fakeBody = document.createElement('body')
+    var testElement = document.createElement('div')
+    testElement.style.border = '.5px solid transparent'
+    fakeBody.appendChild(testElement)
+    docEl.appendChild(fakeBody)
+    if (testElement.offsetHeight === 1) {
+      docEl.classList.add('hairlines')
+    }
+    docEl.removeChild(fakeBody)
+  }
+}(window, document))

src/modules/store/index.js

+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex);
+
+export default new Vuex.Store({
+    state: {
+        viewDirection: '',
+        lastBoxScroll: 0,
+        renqiBoxScroll: 0,
+        huojiangBoxScroll:0,
+        userBoxScroll: 0,
+        activeInfo:'',
+        ruweiBoxScroll: 0
+    },
+    mutations: {
+        changeLastBoxScrollY(state, num) {
+            state.lastBoxScroll = num;
+        },
+        changeRenQiBoxScrollY(state, num) {
+            state.renqiBoxScroll = num;
+        },
+        changeHuojingBoxScrollY(state,num){
+            state.huojiangBoxScroll = num;
+        },
+        changeUserBoxScrollY(state, num) {
+            state.userBoxScroll = num;
+        },
+        changeActiveInfo(state, num) {
+            state.activeInfo = num;
+        },
+        changeRuweiBoxScrollY(state,num){
+            state.ruweiBoxScroll = num;
+        }
+    }
+})
\ No newline at end of file

src/pages/index/App.vue

+<template>
+    <div id="app">
+        <!-- <transition :name="direction" mode="out-in"> -->
+        <!--动态获得transition 的name值-->
+        <keep-alive>
+            <router-view class="app-view" wechat-title></router-view>
+        </keep-alive>
+        <!-- </transition> -->
+    </div>
+</template>
+
+<script>
+// import store from './store';
+import store from '../../modules/store';
+
+export default {
+    name: 'App',
+    data() {
+        return {
+            transitionName: 'transitionLeft'
+        };
+    },
+    store,
+    computed: {
+        direction() {
+            const viewDir = this.$store.state.viewDirection;
+            let tranName = '';
+
+            if (viewDir === 'left') {
+                tranName = 'view-out';
+            } else if (viewDir === 'right') {
+                tranName = 'view-in';
+            } else {
+                tranName = 'fade';
+            }
+
+            return tranName;
+        }
+    },
+    created() {
+        // this.hiddenBar();
+    },
+    mounted() {
+        var tar_userinfo = localStorage.getItem('tar_userinfo');
+        if (tar_userinfo) {
+            var tar_openid = localStorage.getItem('tar-uuid-129831');
+            tar.init({
+                tar_debug: !1,
+                tar_token: "3fcfe0ef160eb53266161898524e1708",
+                tar_tid: "129831",
+                tar_userinfo: [{
+                    openid: tar_openid                }]
+            })
+        } else {
+            tar.init({
+                tar_debug: !1,
+                tar_token: "3fcfe0ef160eb53266161898524e1708",
+                tar_tid: "129831",
+                tar_scope: "snsapi_base",
+                tar_appid: "wxfa065f3046ad9c21"
+            })
+        }
+    },
+    methods: {
+        hiddenBar() {
+            document.addEventListener("WeixinJSBridgeReady", function onBridgeReady() {
+                WeixinJSBridge.call("hideToolbar"); // 隐藏底部状态栏
+                // WeixinJSBridge.call("hideOptionMenu"); // 隐藏右上角的三个点的选项
+                // WeixinJSBridge.call("showToolbar"); // 显示底部状态栏
+                // WeixinJSBridge.call("showOptionMenu"); // 显示右上角的三个点的选项
+            });
+        },
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+#app {
+    height: 100%;
+}
+
+.img-inner-box {
+    box-shadow: none !important;
+}
+
+// .transitionBody {
+//     transition: all 0.4s ease-out; /*定义动画的时间和过渡效果*/
+// }
+// .transitionLeft-enter,
+// .transitionRight-leave-active {
+//     transform: translate(100%, 0); /*当左滑进入右滑进入过渡动画*/
+// }
+// .transitionLeft-leave-active,
+// .transitionRight-enter {
+//     -webkit-transform: translate(-100%, 0);
+//     transform: translate(-100%, 0);
+// }
+
+.fade-enter-active,
+.fade-leave-active {
+    transition: all 0.2s ease;
+}
+
+.fade-enter,
+.fade-leave-active {
+    opacity: 0;
+}
+
+.view-in-enter-active,
+.view-out-leave-active {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    // padding-top: px2rem($titbarHeight);
+    -webkit-animation-duration: 0.3s;
+    animation-duration: 0.3s;
+    -webkit-animation-fill-mode: both;
+    animation-fill-mode: both;
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+}
+
+.view-in-enter-active {
+    -webkit-animation-name: inRight;
+    animation-name: inRight;
+}
+
+.view-out-leave-active {
+    -webkit-animation-name: outLeft;
+    animation-name: outLeft;
+}
+
+// Mixins
+// Base Style
+* {
+    // -webkit-animation-duration: $AnimateDuration;
+    // animation-duration: $AnimateDuration;
+    -webkit-animation-fill-mode: both;
+    animation-fill-mode: both;
+
+    // Modifier for infinite repetition
+    &.infinite {
+        -webkit-animation-iteration-count: infinite;
+        animation-iteration-count: infinite;
+    }
+}
+
+// Slide
+@keyframes slideInLeft {
+    from {
+        -webkit-transform: translate3d(-100%, 0, 0);
+        transform: translate3d(-100%, 0, 0);
+        visibility: visible;
+    }
+
+    to {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+.slideInLeft {
+    -webkit-animation-name: slideInLeft;
+    animation-name: slideInLeft;
+}
+
+@keyframes slideInRight {
+    from {
+        -webkit-transform: translate3d(100%, 0, 0);
+        transform: translate3d(100%, 0, 0);
+        visibility: visible;
+    }
+
+    to {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+.slideInRight {
+    -webkit-animation-name: slideInRight;
+    animation-name: slideInRight;
+}
+
+@keyframes slideOutLeft {
+    from {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+
+    to {
+        visibility: hidden;
+        -webkit-transform: translate3d(-100%, 0, 0);
+        transform: translate3d(-100%, 0, 0);
+    }
+}
+
+.slideOutLeft {
+    -webkit-animation-name: slideOutLeft;
+    animation-name: slideOutLeft;
+}
+
+@keyframes slideOutRight {
+    from {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+
+    to {
+        visibility: hidden;
+        -webkit-transform: translate3d(100%, 0, 0);
+        transform: translate3d(100%, 0, 0);
+    }
+}
+
+.slideOutRight {
+    -webkit-animation-name: slideOutRight;
+    animation-name: slideOutRight;
+}
+
+@keyframes inRight {
+    0% {
+        -webkit-transform: translate3d(100%, 0, 0);
+        transform: translate3d(100%, 0, 0);
+    }
+
+    to {
+        -webkit-transform: translateZ(0);
+        transform: translateZ(0);
+    }
+}
+
+@keyframes outLeft {
+    0% {
+        -webkit-transform: translateZ(0);
+        transform: translateZ(0);
+    }
+
+    to {
+        -webkit-transform: translate3d(100%, 0, 0);
+        transform: translate3d(100%, 0, 0);
+    }
+}
+</style>
\ No newline at end of file

src/pages/index/index.html

+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
+  <title>云上丹寨 摄影月赛</title>
+  <script type="text/javascript" src="http://js.tarsocial.com/h5stat-2.1.1.vue.js"></script>
+</head>
+
+<body>
+  <div id="app"></div>
+  <!-- built files will be auto injected -->
+</body>
+
+</html>

src/pages/index/index.js

+// The Vue build version to load with the `import` command
+// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
+import Vue from 'vue'
+// import Vue from "vue/dist/vue.common.js";
+
+import App from './App'
+import router from './router'
+
+Vue.config.productionTip = false
+
+import 'normalize.css';
+import '@/modules/css/myreset.css';
+import '@/modules/js/flexible.js';
+
+import axios from 'axios';
+import api from '@/modules/js/api.js';
+axios.defaults.baseURL = api.server;
+axios.defaults.timeout = 10000;
+axios.defaults.headers.common['systemtype'] = api.extra;
+
+
+import fastclick from 'fastclick'
+fastclick.attach(document.body)
+
+
+// import VConsole from 'vconsole';
+// var vConsole = new VConsole();
+
+
+window.$eventbus = new Vue();
+
+// import store from './store';
+import store from '../../modules/store';
+
+import {
+  Actionsheet
+} from 'mint-ui';
+
+Vue.component(Actionsheet.name, Actionsheet);
+
+
+var _hmt = _hmt || [];
+(function () {
+  var hm = document.createElement("script");
+  hm.src = "https://hm.baidu.com/hm.js?9e7d7b9d4d2ff4da5330771a1b957aa1";
+  var s = document.getElementsByTagName("script")[0];
+  s.parentNode.insertBefore(hm, s);
+})();
+
+
+router.beforeEach((to, from, next) => {
+  const list = ['/', '/detail', '/imgup'] // 将需要切换效果的路由名称组成一个数组
+  const toName = to.path // 即将进入的路由名字
+  const fromName = from.path // 即将离开的路由名字
+  const toIndex = list.indexOf(toName) // 进入下标
+  const fromIndex = list.indexOf(fromName) // 离开下标
+  let direction = ''
+
+  if (toIndex > -1 && fromIndex > -1) { // 如果下标都存在
+    if (toIndex < fromIndex) { // 如果进入的下标小于离开的下标，那么是左滑
+      direction = 'left'
+    } else {
+      direction = 'right' // 如果进入的下标大于离开的下标，那么是右滑
+    }
+  }
+  store.state.viewDirection = direction //这里使用vuex进行赋值
+
+
+  if (_hmt) {
+    if (to.path) {
+      _hmt.push(['_trackPageview', '/#' + to.fullPath]);
+    }
+  }
+
+  return next()
+})
+
+
+Vue.prototype.$randomText = function () {
+  function RandomNumBoth(Min, Max) {
+    var Range = Max - Min;
+    var Rand = Math.random();
+    var num = Min + Math.round(Rand * Range);
+    return num;
+  }
+
+  var num = RandomNumBoth(1, 11);
+
+  var str = null;
+  switch (num) {
+    case 2:
+      str = '每月评奖，金奖1万元！';
+      break;
+    case 3:
+      str = '每月评奖，金奖1万元！';
+      break;
+    case 7:
+      str = '每月评奖，金奖1万元！';
+      break;
+    case 10:
+      str = '每月评奖，金奖1万元！';
+      break;
+    case 11:
+      str = '每月评奖，金奖1万元！';
+      break;
+    default:
+      str = '每月评奖，金奖1万元！';
+      break;
+  }
+
+  return str;
+}
+
+/* eslint-disable no-new */
+new Vue({
+  el: '#app',
+  router,
+  components: {
+    App
+  },
+  template: '<App/>'
+})

src/pages/index/router/index.js

+import Vue from 'vue'
+import Router from 'vue-router'
+import Shouye from '../Shouye'
+import Detail from '../../../components/Detail.vue'
+import ImgUp from '../ImgUp.vue';
+import Description from '../../../components/Description.vue';
+
+import Address from '../../user/Address.vue';
+
+Vue.use(Router);
+
+export default new Router({
+    routes: [
+        {
+            path: '/',
+            name: 'Shouye',
+            component: Shouye,
+        },
+        {
+            path: '/detail',
+            name: 'Detail',
+            component: Detail,
+        },
+        {
+            path: '/imgup',
+            name: 'ImgUp',
+            component: ImgUp
+        },
+        {
+            path: '/description',
+            name: 'Description',
+            component: Description
+        },
+        {
+            path: '/address',
+            name: 'Address',
+            component: Address
+        }
+    ]
+})

src/pages/index/store/index.js

+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex);
+
+export default new Vuex.Store({
+    state: {
+        viewDirection: '',
+        lastBoxScroll: 0,
+        renqiBoxScroll: 0,
+        huojiangBoxScroll:0,
+        ruweiBoxScroll: 0
+    },
+    mutations: {
+        changeLastBoxScrollY(state, num) {
+            state.lastBoxScroll = num;
+        },
+        changeRenQiBoxScrollY(state, num) {
+            state.renqiBoxScroll = num;
+        },
+        changeHuojingBoxScrollY(state,num){
+            state.huojiangBoxScroll = num;
+        },
+        changeRuweiBoxScrollY(state,num){
+            state.ruweiBoxScroll = num;
+        }
+    }
+})
\ No newline at end of file

src/pages/user/Address.vue

+<template>
+    <section class="mainWrap">
+        <group>
+            <x-input title="姓&nbsp;&nbsp;&nbsp;&nbsp;名:" v-model="realName" placeholder="姓名"></x-input>
+            <x-input title="手机号:" is-type="china-mobile" v-model="phoneNumber" placeholder="11位手机号"></x-input>
+            <x-textarea
+                title="地&nbsp;&nbsp;&nbsp;&nbsp;址:"
+                v-model="detailAddress"
+                placeholder="您的详细地址"
+            ></x-textarea>
+        </group>
+        <div class="textBox">
+            <p>说明:</p>
+            <p>此地址将作为您的奖品收货地址</p>
+            <p>请确认您的提交信息正确无误</p>
+            <p>如因填写信息错误导致未能收到奖品，责任自负哦~</p>
+        </div>
+        <div class="save" @click="save">保存</div>
+    </section>
+</template>
+
+<script>
+import { Group, XInput, XTextarea } from 'vux';
+import { MessageBox, Toast } from 'mint-ui';
+
+import axios from 'axios';
+import { clearTimeout } from 'timers';
+
+export default {
+    data() {
+        return {
+            realName: '',
+            phoneNumber: '',
+            detailAddress: '',
+            userId: '',
+            alertOnoff: false
+        };
+    },
+    created() {
+        // this.hiddenBar();
+        this.getUserInfo();
+    },
+    methods: {
+        getUserInfo() {
+            axios.get('/contest/user/info').then(res => {
+                this.realName = res.data.data.real_name.trim();
+                this.phoneNumber = res.data.data.mobile.trim();
+                this.detailAddress = res.data.data.address.trim();
+                this.userId = res.data.data.id;
+            });
+        },
+        save() {
+            if (!this.realName.trim()) {
+                Toast({ message: '姓名必须填写' });
+                return
+            }
+
+            if (!this.phoneNumber.trim()) {
+                Toast({ message: '手机号码必须填写' });
+                return
+            }
+
+            if (!this.detailAddress.trim()) {
+                Toast({ message: '地址必须填写' });
+                return
+            }
+
+            axios
+                .post('/contest/user/save', {
+                    address: this.detailAddress.trim(),
+                    real_name: this.realName.trim(),
+                    mobile: this.phoneNumber.trim(),
+                    id: this.userId
+                })
+                .then(res => {
+                    console.log(res);
+                    if (res.data.code === 0) {
+                        Toast({ message: '保存成功' });
+                        setTimeout(() => {
+                            if (location.href.includes('isIndex')) {
+                                this.$router.push({ path: '/imgup' });
+                            } else {
+                                this.$router.push({ path: '/' });
+                            }
+                        }, 500);
+                    } else {
+                        Toast({ message: '保存失败' });
+                    }
+                }).catch((err) => {
+                    console.log(err);
+                    Toast({ message: err.response.data.msg });
+                });
+        },
+        hiddenBar() {
+            document.addEventListener("WeixinJSBridgeReady", function onBridgeReady() {
+                WeixinJSBridge.call("hideToolbar"); // 隐藏底部状态栏
+                // WeixinJSBridge.call("hideOptionMenu"); // 隐藏右上角的三个点的选项
+                // WeixinJSBridge.call("showToolbar"); // 显示底部状态栏
+                // WeixinJSBridge.call("showOptionMenu"); // 显示右上角的三个点的选项
+            });
+        },
+    },
+    components: {
+        Group,
+        XInput,
+        XTextarea
+    }
+};
+</script>
+
+<style lang="less">
+// @import '~vux/src/styles/reset.less';
+
+.mainWrap {
+    background: #f5f5f5;
+    height: 100%;
+    overflow: hidden;
+
+    .weui-cell {
+        font-size: 34px !important;
+        padding: 24px !important;
+    }
+
+    .weui-cells {
+        margin-top: 0;
+    }
+
+    .vux-no-group-title {
+        margin-top: 0;
+    }
+
+    label {
+        width: 4em !important;
+    }
+
+    .weui_icon_clear {
+        font-size: 30px;
+    }
+
+    textarea::-webkit-input-placeholder,
+    input::-webkit-input-placeholder {
+        color: #aab2bd;
+        font-size: 32px;
+        text-align: left;
+    }
+
+    .textBox {
+        color: #ccc;
+        font-size: 30px;
+        line-height: 45px;
+        padding-left: 20px;
+        padding-top: 100px;
+    }
+
+    .save {
+        width: 100%;
+        height: 90px;
+        line-height: 90px;
+        text-align: center;
+        color: white;
+        position: absolute;
+        bottom: 0;
+        font-size: 38px;
+        background: #2459a8;
+    }
+}
+</style>

src/pages/user/Huzhao.vue

+<template>
+    <div class="mainbox">
+        <div class="goHome" @click="goHome"></div>
+        <div class="imgBox" v-if="imgUrl">
+            <img :src="imgUrl" alt>
+        </div>
+    </div>
+</template>
+
+<script>
+import axios from 'axios';
+import { Toast } from 'mint-ui';
+
+export default {
+    data() {
+        return {
+            imgUrl: null
+        }
+    },
+    created() {
+        this.getPassProt();
+        // this.hiddenBar();
+    },
+    methods: {
+        getPassProt() {
+            var self = this;
+            axios.get('/contest/user/passport').then(res => {
+
+                if (res.data.code === 0) {
+                    self.imgUrl = res.data.data
+                } else {
+                    Toast({
+                        message: '异常错误'
+                    });
+                }
+            }).catch((error) => {
+                Toast({
+                    message: error.response.data.msg
+                });
+            });
+        },
+        goHome() {
+            this.$router.push({ path: '/' });
+        },
+        hiddenBar() {
+            document.addEventListener("WeixinJSBridgeReady", function onBridgeReady() {
+                WeixinJSBridge.call("hideToolbar"); // 隐藏底部状态栏
+                // WeixinJSBridge.call("hideOptionMenu"); // 隐藏右上角的三个点的选项
+                // WeixinJSBridge.call("showToolbar"); // 显示底部状态栏
+                // WeixinJSBridge.call("showOptionMenu"); // 显示右上角的三个点的选项
+            });
+        },
+    }
+
+}
+</script>
+
+
+<style lang="scss" scoped>
+.mainbox {
+    width: 100%;
+    height: 100%;
+    background: #e1f2fe;
+
+    .goHome {
+        width: 56px;
+        height: 56px;
+        // background: url('~@/pages/index/assets/images/shuoming/gohome.png') no-repeat;
+        background: url("~@/pages/index/assets/images/colse.png") no-repeat;
+        background-size: contain;
+        position: absolute;
+        top: 60px;
+        right: 40px;
+    }
+
+    .imgBox {
+        width: 8.5rem;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+
+        img {
+            width: 100%;
+            height: auto;
+        }
+    }
+}
+</style>
+