0608

.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    ["env", {
+      "modules": false,
+      "targets": {
+        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
+      }
+    }],
+    "stage-2"
+  ],
+  "plugins": ["transform-vue-jsx", "transform-runtime"]
+}

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

.gitignore

@@ -0,0 +1,14 @@
+.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

@@ -0,0 +1,10 @@
+// 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": {}
+  }
+}

README.md

@@ -0,0 +1,21 @@
+# company
+
+> 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

@@ -0,0 +1,41 @@
+'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

@@ -0,0 +1,54 @@
+'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

@@ -0,0 +1,101 @@
+'use strict'
+const path = require('path')
+const config = require('../config')
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const packageConfig = require('../package.json')
+
+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'
+      })
+    } 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

@@ -0,0 +1,22 @@
+'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'
+  }
+}

build/webpack.base.conf.js

@@ -0,0 +1,83 @@
+'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)
+}
+
+
+
+module.exports = {
+  context: path.resolve(__dirname, '../'),
+  entry: {
+    app: './src/main.js'
+  },
+  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'],
+    alias: {
+      'vue$': 'vue/dist/vue.esm.js',
+      '@': resolve('src'),
+      'styles': resolve('src/assets/styles')
+    }
+  },
+  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'
+  }
+}

build/webpack.dev.conf.js

@@ -0,0 +1,95 @@
+'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: ['.*']
+      }
+    ])
+  ]
+})
+
+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

@@ -0,0 +1,145 @@
+'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: ['.*']
+      }
+    ])
+  ]
+})
+
+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

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

config/index.js

@@ -0,0 +1,69 @@
+'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

@@ -0,0 +1,4 @@
+'use strict'
+module.exports = {
+  NODE_ENV: '"production"'
+}

index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <meta name="keywords" content="智慧党建|智慧社区|网格化|市域社会|市域社会治理|码上监督|腾狮科技|山西腾狮|腾狮软件|山西腾狮科技有限公司" />
+    <meta name="description" content="智慧党建|智慧社区|网格化|市域社会|市域社会治理|码上监督|社区网格化管理|综治网格化管理|智慧社区|智慧政务|社区党建|安全生产网格化" />
+    <title>山西腾狮科技有限公司</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

package.json

@@ -0,0 +1,70 @@
+{
+  "name": "company",
+  "version": "1.0.0",
+  "description": "A Vue.js project",
+  "author": "dong_bo0602 <358256383@qq.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": {
+    "animate.css": "^4.1.1",
+    "axios": "^0.19.2",
+    "jquery": "^3.6.0",
+    "stylus": "^0.54.8",
+    "stylus-loader": "^3.0.2",
+    "vue": "^2.5.2",
+    "vue-awesome-swiper": "^2.6.7",
+    "vue-layer": "^1.2.0",
+    "vue-router": "^3.0.1",
+    "wowjs": "^1.1.3"
+  },
+  "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-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": "^1.1.4",
+    "friendly-errors-webpack-plugin": "^1.6.1",
+    "html-webpack-plugin": "^2.30.1",
+    "node-notifier": "^5.1.2",
+    "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-url": "^7.2.1",
+    "rimraf": "^2.6.0",
+    "semver": "^5.3.0",
+    "shelljs": "^0.7.6",
+    "uglifyjs-webpack-plugin": "^1.1.1",
+    "url-loader": "^0.5.8",
+    "vue-loader": "^13.3.0",
+    "vue-style-loader": "^3.0.1",
+    "vue-template-compiler": "^2.5.2",
+    "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/App.vue

@@ -0,0 +1,15 @@
+<template>
+  <div id="app">
+    <router-view/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'App'
+}
+</script>
+
+<style>
+
+</style>

src/assets/common/common.js

@@ -0,0 +1,6 @@
+var url = 'http://www.tenlion.com.cn/news/'
+var newsDetailUrl = 'http://www.tenlion.com.cn/'
+export default {
+  url,
+  newsDetailUrl
+}

src/assets/components/Footer.vue

@@ -0,0 +1,86 @@
+<template>
+    <div class="footer">
+      <div class="footer-content">
+        <div class="top">
+          <div class="footer-img">
+            <img src="@/assets/images/footer.jpg" alt="">
+          </div>
+          <div class="contact-info">
+            <p>联系电话：15504712111</p>
+            <p>传真号码：0351-5613022</p>
+            <p>公司网址：http://www.tenlion.com.cn</p>
+            <p>交通地址：山西省太原市小店区平阳路街道平阳路学府街126号汇都国际大厦B座5层</p>
+          </div>
+          <!--<div class="qr-code">-->
+            <!--<div class="qr-code-box">-->
+              <!--<img src="@/assets/images/APP.png" alt="">-->
+              <!--<p>公众号</p>-->
+            <!--</div>-->
+            <!--<div class="qr-code-box">-->
+              <!--<img src="@/assets/images/APP.png" alt="">-->
+              <!--<p>公众号</p>-->
+            <!--</div>-->
+          <!--</div>-->
+        </div>
+        <div class="bottom">Copyright© 2020 备案号：晋ICP备14004820号 <a href="javascript: void(0);">晋公网安备 14010502050897号</a></div>
+      </div>
+    </div>
+</template>
+
+<script>
+export default {
+  name: 'Footer'
+}
+</script>
+
+<style lang="stylus" rel="stylesheet/stylus" scoped>
+.footer
+  background #fff
+  .footer-content
+    width 1200px
+    margin 0 auto
+    .top
+      padding 20px 0
+      overflow hidden
+      border-bottom 1px solid #DDD
+      .footer-img
+        width 230px
+        height 150px
+        float left
+        img
+          width 100%
+          height 100%
+      .contact-info
+        float left
+        margin-left 100px
+        p
+          font-size 16px
+          line-height 35px
+          color #666
+      .qr-code
+        float right
+        .qr-code-box
+          display inline-block
+          width 80px
+          text-align center
+          margin-right 15px
+          padding-top 10px
+          &:last-child
+            margin-right 0
+          img
+            width 80px
+            height 80px
+            margin-bottom 10px
+          p
+            font-size 16px
+            color #666
+    .bottom
+      padding 15px 0
+      text-align center
+      font-size 16px
+      color #333
+      a
+        color #333
+        padding-left 20px
+        background url("../../assets/images/icon.png") no-repeat left center
+</style>

src/assets/components/Header.vue

@@ -0,0 +1,138 @@
+<template>
+    <div class="nav">
+      <div class="nav-container">
+        <div class="left">
+          <ul>
+            <router-link to="/" tag="li" :class="{active: this.$route.path == '/'}" title="首页">
+              <p>首页</p>
+              <span>HOME</span>
+            </router-link>
+            <router-link to="/Product" tag="li" :class="{active: this.$route.path == '/Product'}" title="产品中心">
+              <p>产品中心</p>
+              <span>PRODUCT</span>
+            </router-link>
+            <router-link to="/Programme" tag="li" :class="{active: this.$route.path == '/Programme'}" title="解决方案">
+              <p>解决方案</p>
+              <span>PROGRAMME</span>
+            </router-link>
+          </ul>
+        </div>
+        <router-link to="/" class="logo" tag="div">
+          <img src="@/assets/images/logo.png" alt="">
+        </router-link>
+        <div class="right">
+          <ul>
+            <router-link to="/NewsCenter" tag="li" :class="{active: this.$route.path == '/NewsCenter' || this.$route.path == '/NewsDetail/' + this.$route.params.id}" title="新闻中心">
+              <p>新闻中心</p>
+              <span>NEWS</span>
+            </router-link>
+            <router-link to="/Service" tag="li" :class="{active: this.$route.path == '/Service'}" title="服务和管理">
+              <p>服务和管理</p>
+              <span>SERVICE</span>
+            </router-link>
+            <router-link to="/About" tag="li" :class="{active: this.$route.path == '/About'}" title="关于腾狮">
+              <p>关于腾狮</p>
+              <span>ABOUT US</span>
+            </router-link>
+          </ul>
+        </div>
+      </div>
+    </div>
+</template>
+
+<script>
+export default {
+  name: 'Header'
+}
+</script>
+
+<style lang="stylus" rel="stylesheet/stylus" scoped>
+@import '~styles/style.styl'
+.nav
+  background #fff
+  .nav-container
+    width 1200px
+    margin 0 auto
+    position relative
+    &:after
+      content ''
+      display block
+      clear both
+    .left
+      float left
+      ul
+        &:after
+          content ''
+          display block
+          clear both
+        li
+          float left
+          text-align center
+          margin-right 110px
+          padding-top 30px
+          height 60px
+          cursor pointer
+          &:last-child
+            margin-right 0
+          &:hover
+            p
+              color $main-color
+            span
+              color $main-color
+          p
+            color #333
+            font-size 16px
+            font-weight bold
+          span
+            color #bbb
+            font-size 14px
+            font-weight bold
+          &.active
+            p
+              color $main-color
+            span
+              color $main-color
+    .right
+      float right
+      ul
+        &:after
+          content ''
+          display block
+          clear both
+        li
+          float left
+          text-align center
+          margin-right 110px
+          padding-top 30px
+          height 60px
+          cursor pointer
+          &:last-child
+            margin-right 0
+          &:hover
+            p
+              color $main-color
+            span
+              color $main-color
+          p
+            color #333
+            font-size 16px
+            font-weight bold
+          span
+            color #bbb
+            font-size 14px
+            font-weight bold
+          &.active
+            p
+              color $main-color
+            span
+              color $main-color
+    .logo
+      position absolute
+      top 50%
+      left 50%
+      transform translate(-50%, -50%)
+      cursor pointer
+      z-index 1000
+      img
+        width 225px
+</style>

src/assets/styles/reset.css

@@ -0,0 +1 @@
+@charset "utf-8";a,body,dd,div,dl,dt,em,form,h1,h2,h3,h4,h5,h6,img,input,li,ol,option,p,select,span,strong,table,td,textarea,th,ul,var{margin:0;padding:0}body,html{font:400 100% "微软雅黑",Arail,Tabhoma;text-align:left;color:#535353;-webkit-font-smoothing:antialiased;line-height:normal}ol,ul{list-style:none}img{border:0;vertical-align:top}input,select,textarea{outline:0}textarea{resize:none}table{border-collapse:collapse;border-spacing:0}em,strong,th,var{font-weight:400;font-style:normal}a{text-decoration:none;color:#555}a,input{-webkit-tap-highlight-color:transparent}[v-cloak]{display: none}

src/assets/styles/style.styl

@@ -0,0 +1 @@
+$main-color = #a64942

src/main.js

@@ -0,0 +1,24 @@
+// 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 App from './App'
+import router from './router'
+import VueAwesomeSwiper from 'vue-awesome-swiper'
+import 'styles/reset.css'
+import 'swiper/dist/css/swiper.css'
+import layer from 'vue-layer'
+import 'vue-layer/lib/vue-layer.css'
+import animate from 'animate.css'
+
+Vue.use(animate)
+Vue.prototype.$layer = layer(Vue);
+Vue.use(VueAwesomeSwiper)
+Vue.config.productionTip = false
+
+/* eslint-disable no-new */
+new Vue({
+  el: '#app',
+  router,
+  components: { App },
+  template: '<App/>'
+})

src/pages/About/About.vue

@@ -0,0 +1,374 @@
+<template>
+  <div style="background: #f1f1f1">
+    <Header></Header>
+    <div class="top-img">
+      <img :src="url + 'route/file/downloadfile/false/' + bannerId" alt="" v-if="bannerId">
+    </div>
+    <div class="tab">
+      <div class="page-title">关于腾狮</div>
+      <div class="tab-list">
+        <div class="tab-box" :class="{active: pager == idx}" v-for="(type,idx) in typeList" :key="idx" @click="changeType(type.newsDirectoriesId, idx, type.directoriesView)">{{type.directoriesName}}</div>
+      </div>
+    </div>
+    <div class="page-content">
+      <div class="title">
+        <h2>关于腾狮</h2>
+        <p>About Us</p>
+      </div>
+      <div v-if="isList">
+        <div class="product-list">
+          <ul>
+            <li class="wow animate__animated animate__fadeInUp" :data-wow-delay="0 + 0.2 * idx + 's'" v-for="(business,idx) in businessList" :ley="idx" @click="goDetail(business.templateRecordUrl)">
+              <div class="img-box">
+                <img :src="url + 'route/file/downloadfile/false/' + business.newsContentCoverList" alt="">
+              </div>
+              <p>{{business.newsContentTitle}}</p>
+            </li>
+          </ul>
+        </div>
+        <div class="pager" v-if="page.totalPage > 1">
+          <span @click="paging(page.page - 1)" v-if="page.page > 1">上一页</span>
+          <ul v-if="page.totalPage > 0 && page.totalPage <= 5">
+            <li v-for="cpage in page.totalPage" :class="{'active': page.page == cpage}" :key="cpage" @click="paging(cpage)">
+              {{cpage}}
+            </li>
+          </ul>
+          <ul v-if="page.totalPage > 5">
+            <li v-if="page.page < 3" v-for="cpage in 5" :class="{'active': page.page == cpage}" :key="cpage" @click="paging(cpage)">
+              {{cpage}}
+            </li>
+            <li v-if="page.page > page.totalPage - 2" v-for="cpage in 5" :class="{'active': page.page == (page.totalPage - 5 + cpage)}" :key="cpage" @click="paging(cpage)">
+              {{page.totalPage - 5 + cpage}}
+            </li>
+            <li v-if="page.page >= 3 && page.page <= page.totalPage - 2" v-for="cpage in 5" :class="{'active': page.page == (page.page - (3 - cpage))}" :key="cpage" @click="paging(cpage)">
+              {{page.page - (3 - cpage)}}
+            </li>
+          </ul>
+          <span @click="paging(page.page + 1)" v-if="page.page < page.totalPage">下一页</span>
+        </div>
+      </div>
+      <div class="news-detail" v-else v-html="newsContent"></div>
+    </div>
+    <div class="loading" v-if="isLoading">
+      <img src="@/assets/images/loading.gif" alt="">
+    </div>
+    <Footer></Footer>
+  </div>
+</template>
+
+<script>
+  import Header from '@/assets/components/Header'
+  import Footer from '@/assets/components/Footer'
+  import axios from 'axios'
+  import common from '@/assets/common/common'
+  import WOW from 'wowjs'
+  export default {
+    name: 'About',
+    components: {
+      Header,
+      Footer
+    },
+    data () {
+      return {
+        page: {
+          page: 1,
+          rows: 6,
+          totalPage: 1,
+          newsDirectoriesId: '',
+          newsDirectoriesParentId: 'f9160a53-04de-4392-b987-e6217695f601'
+        },
+        pager: 0,
+        url: common.url,
+        typeList: [],
+        businessList: [],
+        isLoading: false,
+        newsDetailUrl: common.newsDetailUrl,
+        isList: true,
+        newsContent: '',
+        bannerId: ''
+      }
+    },
+    methods: {
+      getBanner: function () {
+        var self = this
+        axios.get(self.url +'app/newsdirectories/listnewsdirectoriesrelease',{
+          params: {
+            directoriesParentId: '65d4768a-6f9a-4f6e-bb4b-260b98e0ea38'
+          }
+        }).then(function (res) {
+          for (var i = 0; i < res.data.length; i++) {
+            if (res.data[i].newsDirectoriesId == '512122a5-71f0-4a94-91aa-e5be409d6e50') {
+              self.bannerId = res.data[i].directoriesPhoto
+            }
+          }
+        })
+      },
+      getTypeList: function () {
+        var self = this
+        self.isLoading = true
+        axios.get(self.url + 'app/newsdirectories/listnewsdirectoriesrelease', {
+          params: {
+            directoriesParentId: 'f9160a53-04de-4392-b987-e6217695f601'
+          }
+        }).then(function (res) {
+          self.typeList = res.data
+          self.page.newsDirectoriesId = self.typeList[0].newsDirectoriesId
+          self.getBusinessList(self.typeList[0].directoriesView)
+        })
+      },
+      changeType: function (type,idx, view) {
+        this.pager = idx
+        this.page.page = 1
+        this.page.newsDirectoriesId = type
+        this.isLoading = true
+        this.getBusinessList(view)
+      },
+      getBusinessList: function (view) {
+        var self = this
+        axios.get(self.url + 'app/newscontent/listpagenewscontentrelease', {
+          params: self.page
+        }).then(function (res) {
+          if (view == '0') {
+            self.isList = false
+            if (res.data.rows.length > 0) {
+              self.getNewsDetail(res.data.rows[0].newsContentId)
+            } else {
+              self.$layer.msg('暂无数据')
+              self.newsContent = ''
+            }
+          } else {
+            self.isList = true
+            if (res.data.rows.length > 0) {
+              for (var i = 0; i < res.data.rows.length; i++) {
+                res.data.rows[i].newsContentCoverList = res.data.rows[i].newsContentCoverList[0].contentCoverId
+              }
+              self.businessList = res.data.rows
+              self.page.page = res.data.page
+              self.page.totalPage = Math.ceil(res.data.total / self.page.rows)
+              self.$nextTick(function () {
+                new WOW.WOW({live: true}).init()
+              })
+            } else {
+              self.$layer.msg('暂无数据')
+              self.productList = []
+            }
+          }
+          self.isLoading = false
+        })
+      },
+      goDetail: function (url) {
+        window.open(this.newsDetailUrl + url)
+      },
+      paging: function (page) {
+        this.page.page = page
+        this.isLoading = true
+        this.getBusinessList()
+      },
+      getNewsDetail: function (id) {
+        var self = this
+        axios.get(self.url + 'app/newscontent/getnewscontentbyidrelease/' + id).then(function (res) {
+          self.newsContent = res.data.newsContentContent
+        })
+      }
+    },
+    mounted: function () {
+      this.getBanner()
+      this.getTypeList()
+    }
+  }
+</script>
+
+<style lang="stylus" rel="stylesheet/stylus" scoped>
+  @import '~styles/style.styl'
+  .loading
+    position fixed
+    top 50%
+    left 50%
+    transform translate(-50%, -50%)
+    background rgba(255,255,255,0.6)
+    padding 30px
+    border-radius 10px
+    box-shadow 0 0 17px #DEDEDE
+  .top-img, .top-img img
+    width 100%
+    height 350px
+  .tab
+    width 1200px
+    margin -40px auto 0
+    overflow hidden
+    position relative
+    background #fff
+    box-shadow 0 0 17px #EEE
+    .page-title
+      float left
+      padding 10px 0
+      text-align center
+      font-weight bold
+      font-size 20px
+      background $main-color
+      width 150px
+      line-height 60px
+      color #fff
+      height 80px
+      box-sizing border-box
+    .tab-list
+      float left
+      padding 20px 0
+      overflow hidden
+      .tab-box
+        float left
+        border-right 1px solid #DDD
+        text-align center
+        line-height 40px
+        cursor pointer
+        font-size 16px
+        color #999
+        padding 0 20px
+        box-sizing border-box
+        position relative
+        &.active
+          color $main-color
+        &.active:after
+          content ''
+          display block
+          width 100%
+          height 5px
+          background $main-color
+          position absolute
+          bottom -20px
+          left 0
+          right 0
+  .page-content
+    width 1200px
+    margin 20px auto
+    padding 20px
+    box-sizing border-box
+    border-top 3px solid $main-color
+    background #fff
+    .title
+      padding-bottom 20px
+      position relative
+      &:after
+        content ''
+        display block
+        width 80px
+        height 2px
+        background $main-color
+        position absolute
+        bottom 0
+        left 0
+      h2
+        display inline-block
+        color $main-color
+        font-size 30px
+        margin-bottom 5px
+      p
+        font-size 14px
+        font-weight bold
+        color #999
+    .product-list
+      margin-top 20px
+      min-height 300px
+      ul
+        &:after
+          content ''
+          display block
+          clear both
+        li
+          float left
+          width 360px
+          margin-right 30px
+          margin-bottom 20px
+          cursor pointer
+          box-shadow 0 0 10px 0 hsla(0,0%,69%,.3)
+          &:hover
+            box-shadow 0 0 10px 0 hsla(0,0%,69%,.9)
+          &:nth-child(3n)
+            margin-right 0
+          .img-box
+            width 100%
+            height 270px
+            margin-bottom 5px
+            img
+              width 100%
+              height 100%
+          p
+            font-size 18px
+            text-align center
+            white-space nowrap
+            overflow hidden
+            text-overflow ellipsis
+            margin 10px 0
+            padding 0 10px
+    .news-detail
+      margin-top 20px
+      min-height 300px
+  .pager
+    width 100%
+    margin 0 auto 20px
+    padding-bottom 20px
+    text-align center
+    font-size 0
+    background #fff
+    span
+      display inline-block
+      padding 0 15px
+      line-height 25px
+      color #676767
+      border 1px solid #d2d2d2
+      font-size 14px
+      margin 0 5px
+      vertical-align middle
+      cursor pointer
+    ul
+      display inline-block
+      overflow hidden
+      vertical-align middle
+      li
+        width 45px
+        line-height 25px
+        float left
+        margin-right 10px
+        border 1px solid #d2d2d2
+        cursor pointer
+        text-align center
+        font-size 14px
+        color #676767
+        &.active
+          background $main-color
+          color #fff
+          border 1px solid $main-color
+        &:last-child
+          margin 0
+    input
+      width 50px
+      height 25px
+      border 1px solid #d2d2d2
+      text-align center
+      vertical-align middle
+    i
+      font-style normal
+      color #676767
+      font-size 14px
+      line-height 25px
+      display inline-block
+      vertical-align middle
+      margin 0 5px
+    button
+      cursor pointer
+      border none
+      outline none
+      background $main-color
+      width 50px
+      height 25px
+      vertical-align middle
+      color #fff
+      font-size 14px
+  .news-detail >>> p
+    font-size 18px
+    line-height 30px
+  .news-detail >>> img
+    display block
+    max-width 100%
+    margin 0 auto
+</style>

src/pages/Index/Index.vue

@@ -0,0 +1,82 @@
+<template>
+    <div>
+      <Header></Header>
+      <IndexSwiper :swiperList="swiperList"></IndexSwiper>
+      <Product :productList="productList"></Product>
+      <AboutUs></AboutUs>
+      <News :newsList="newsList"></News>
+      <Footer></Footer>
+    </div>
+</template>
+
+<script>
+import Header from '@/assets/components/Header'
+import Footer from '@/assets/components/Footer'
+import common from '@/assets/common/common'
+import IndexSwiper from './components/swiper'
+import Product from './components/Product'
+import AboutUs from './components/AboutUs'
+import News from './components/News'
+import axios from 'axios'
+export default {
+  name: 'Index',
+  components: {
+    Header,
+    IndexSwiper,
+    Product,
+    AboutUs,
+    News,
+    Footer
+  },
+  data () {
+    return {
+      url: common.url,
+      productList: [],
+      newsList: [],
+      swiperList: []
+    }
+  },
+  methods: {
+    getProduct: function () {
+      var self = this
+      axios.get(self.url + 'app/newscontent/listpagenewscontentrelease', {
+        params: {
+          page: 1,
+          rows: 3,
+          newsDirectoriesId: '',
+          newsDirectoriesParentId: 'd099acc5-ea2d-40cb-add1-26881aa2c657',
+          // directoriesParentId: 'd099acc5-ea2d-40cb-add1-26881aa2c657'
+        }
+      }).then(function (res) {
+        for (var i = 0; i < res.data.rows.length; i++) {
+          res.data.rows[i].newsContentCoverList = res.data.rows[i].newsContentCoverList[0].contentCoverId
+        }
+        self.productList = res.data.rows
+      })
+    },
+
+    getSwiper: function () {
+      var self = this
+      axios.get(self.url + 'app/newscontent/listpagenewscontentrelease', {
+        params: {
+          page: 1,
+          rows: 4,
+          newsDirectoriesId: '92dfb04c-8fbc-4227-8b99-c486e450dec2'
+        }
+      }).then(function (res) {
+        for (var i = 0; i < res.data.rows.length; i++) {
+          res.data.rows[i].newsContentCoverList = res.data.rows[i].newsContentCoverList[0].contentCoverId
+        }
+        self.swiperList = res.data.rows
+      })
+    }
+  },
+  mounted: function () {
+    this.getProduct()
+    this.getSwiper()
+  }
+}
+</script>
+
+<style lang="stylus" rel="stylesheet/stylus" scoped>
+</style>

src/pages/Index/components/AboutUs.vue

@@ -0,0 +1,84 @@
+<template>
+    <div class="about-us">
+      <div class="title">
+        <h2>关于我们</h2>
+        <p>ABOUT US</p>
+      </div>
+      <div class="content">
+        <div class="company-title">
+          <h2>山西腾狮科技</h2>
+          <p>山西腾狮科技有限公司是一家以软件开发、业务为主的科技型公司，成立于2014年，公司现有员工50余人，全部具有大专以上学历，公司位于国家级山西软件园内，被中华人民共和国信息产业部山西信息产业厅认定为高新软件企业，获得软件企业认证书和软件产品认证书。公司多年来致力于政务软件，行业管理软件，企业软件的开发，产品在全国范围内得到了广泛的应用，得到各行各业用户的一致认可和好评。</p>
+          <router-link to="/About" tag="button">查看更多</router-link>
+        </div>
+      </div>
+    </div>
+</template>
+
+<script>
+export default {
+  name: 'AboutUs'
+}
+</script>
+
+<style lang="stylus" rel="stylesheet/stylus" scoped>
+@import '~styles/style.styl'
+.about-us
+  padding 20px 0
+  width 1200px
+  margin 0 auto
+  .title
+    text-align center
+    h2
+      font-size 30px
+      color #333
+      display inline-block
+      position relative
+      &:before
+        content ''
+        display block
+        width 100px
+        height 2px
+        background #bbb
+        position absolute
+        top 50%
+        left -120px
+        margin-top -1px
+      &:after
+        content ''
+        display block
+        width 100px
+        height 2px
+        background #bbb
+        position absolute
+        top 50%
+        right -120px
+        margin-top -1px
+    p
+      font-size 14px
+      color #999
+      margin-top 5px
+  .company-title
+    text-align center
+    margin 10px 0
+    h2
+      display inline-block
+      font-size 20px
+      color $main-color
+      margin-bottom 10px
+    p
+      font-size 16px
+      line-height 28px
+      margin-left 65px
+      margin-right 65px
+      color #333
+    button
+      background none
+      border $main-color solid 1px
+      width 140px
+      height 40px
+      color $main-color
+      cursor pointer
+      margin-top 20px
+      font-size 16px
+      outline none
+</style>

src/pages/Index/components/News.vue

@@ -0,0 +1,170 @@
+<template>
+    <div class="container">
+      <div class="news">
+        <div class="title">
+          <h2>新闻中心</h2>
+          <p>News Center</p>
+        </div>
+        <div class="news-list">
+          <ul>
+            <li class="news-box wow animate__animated animate__bounceInUp"  :data-wow-delay="0 + 0.2 * idx + 's'" v-for="(news,idx) in newsList" :key="idx" @click="goDetail(news.templateRecordUrl)" :title="news.newsContentTitle">
+              <div class="news-img">
+                <img :src="url + 'route/file/downloadfile/false/' + news.newsContentCoverList" alt="">
+              </div>
+              <div class="news-info">
+                <h3>{{news.newsContentTitle}}</h3>
+                <p>{{news.newsContentSummary}}</p>
+              </div>
+            </li>
+          </ul>
+          <router-link to="/NewsCenter" tag="button">更多新闻</router-link>
+        </div>
+      </div>
+    </div>
+</template>
+
+<script>
+import common from '@/assets/common/common'
+import WOW from 'wowjs'
+import axios from "axios"
+import $ from 'jquery'
+export default {
+  name: 'News',
+  data () {
+    return {
+      url: common.url,
+      newsDetailUrl: common.newsDetailUrl,
+      newsList: []
+    }
+  },
+  methods: {
+    goDetail: function (url) {
+      window.open(this.newsDetailUrl + url)
+    },
+    getNews: function () {
+      var self = this
+      axios.get(self.url + 'app/newscontent/listpagenewscontentrelease', {
+        params: {
+          page: 1,
+          rows: 4,
+          newsDirectoriesId: '',
+          newsDirectoriesParentId: 'da703e9c-165e-41cf-8f33-01917b5a217d',
+          directoriesParentId: 'da703e9c-165e-41cf-8f33-01917b5a217d'
+        }
+      }).then(function (res) {
+        for (var i = 0; i < res.data.rows.length; i++) {
+          res.data.rows[i].newsContentCoverList = res.data.rows[i].newsContentCoverList[0].contentCoverId
+        }
+        self.newsList = res.data.rows
+        self.$nextTick(function () {
+          new WOW.WOW({live: true}).init()
+          $('.news-box').hover(function () {
+            $(this).addClass('animated animate__pulse')
+          }, function () {
+            $(this).removeClass('animated animate__pulse')
+          })
+        })
+      })
+    },
+  },
+  mounted: function () {
+    this.getNews()
+  }
+}
+</script>
+
+<style lang="stylus" rel="stylesheet/stylus" scoped>
+@import '~styles/style.styl'
+.container
+  background #f1f1f1
+  padding 20px 0
+  .news
+    width 1200px
+    margin 0 auto
+    .title
+      text-align center
+      h2
+        font-size 30px
+        color #333
+        display inline-block
+        position relative
+        &:before
+          content ''
+          display block
+          width 100px
+          height 2px
+          background #bbb
+          position absolute
+          top 50%
+          left -120px
+          margin-top -1px
+        &:after
+          content ''
+          display block
+          width 100px
+          height 2px
+          background #bbb
+          position absolute
+          top 50%
+          right -120px
+          margin-top -1px
+      p
+        font-size 14px
+        color #999
+        margin-top 5px
+    .news-list
+      margin-top 20px
+      ul
+        &:after
+          content ''
+          display block
+          clear both
+        li
+          float left
+          width 280px
+          margin-right 25px
+          background #fff
+          cursor pointer
+          box-shadow 0 0 10px 0 hsla(0,0%,69%,.3)
+          &:last-child
+            margin-right 0
+          &:hover
+            box-shadow 0 0 10px 0 hsla(0,0%,69%,.9)
+          .news-img
+            width 100%
+            height 210px
+            img
+              width 100%
+              height 100%
+          .news-info
+            padding 15px
+            h3
+              font-size 16px
+              font-weight normal
+              color #333
+              white-space nowrap
+              overflow hidden
+              text-overflow ellipsis
+            p
+              margin-top 8px
+              max-height 48px
+              line-height 24px
+              overflow hidden
+              text-overflow ellipsis
+              display -webkit-box
+              -webkit-line-clamp 2
+              -webkit-box-orient vertical
+              height 48px
+              color #999
+      button
+        display block
+        margin 20px auto 0
+        background none
+        border $main-color solid 1px
+        width 140px
+        height 40px
+        color $main-color
+        cursor pointer
+        font-size 16px
+        outline none
+</style>

src/pages/Index/components/Product.vue

@@ -0,0 +1,150 @@
+<template>
+    <div class="container">
+      <div class="main-business">
+        <div class="title">
+          <h2>产品介绍</h2>
+          <p>PRODUCT</p>
+        </div>
+        <div class="content">
+          <div class="info-box" v-for="(box,idx) in productList" :key="idx" v-show="idx == current" @click="goDetail(box.templateRecordUrl)">
+            <div class="info-img">
+              <img :src="url + 'route/file/downloadfile/false/' + box.newsContentCoverList" alt="">
+            </div>
+            <div class="info-text">
+              <h2>{{box.newsContentTitle}}</h2>
+              <p>{{box.newsContentSummary}}</p>
+              <button>查看更多</button>
+            </div>
+          </div>
+        </div>
+        <div class="tab-box">
+          <div class="tab" v-for="(tab, idx) in productList" :key="idx" :class="{active: idx == current}" @click="current = idx" :title="tab.newsContentTitle">{{tab.newsContentTitle}}</div>
+        </div>
+      </div>
+    </div>
+</template>
+
+<script>
+import common from '@/assets/common/common'
+export default {
+  name: 'MainBusiness',
+  props: {
+    productList: Array
+  },
+  data () {
+    return {
+      current: 0,
+      url: common.url,
+      newsDetailUrl: common.newsDetailUrl
+    }
+  },
+  methods: {
+    goDetail: function (url) {
+      window.open(this.newsDetailUrl + url)
+    }
+  }
+}
+</script>
+
+<style lang="stylus" rel="stylesheet/stylus" scoped>
+@import '~styles/style.styl'
+.container
+  background #f1f1f1
+  padding 20px 0
+  .main-business
+    width 1200px
+    margin 0 auto
+    .title
+      text-align center
+      h2
+        font-size 30px
+        color #333
+        display inline-block
+        position relative
+        &:before
+          content ''
+          display block
+          width 100px
+          height 2px
+          background #bbb
+          position absolute
+          top 50%
+          left -120px
+          margin-top -1px
+        &:after
+          content ''
+          display block
+          width 100px
+          height 2px
+          background #bbb
+          position absolute
+          top 50%
+          right -120px
+          margin-top -1px
+      p
+        font-size 14px
+        color #999
+        margin-top 5px
+    .content
+      padding 20px
+      background #fff
+      margin-top 10px
+      .info-box
+        overflow hidden
+        cursor pointer
+        .info-img
+          width 350px
+          height 260px
+          float left
+          img
+            width 100%
+            height 100%
+        .info-text
+          width 760px
+          float right
+          h2
+            line-height 70px
+            color #333
+            font-size 28px
+          p
+            margin-top 14px
+            font-size 16px
+            color #666
+            max-height 112px
+            line-height 28px
+            overflow hidden
+            text-overflow ellipsis
+            display -webkit-box
+            -webkit-line-clamp 4
+            -webkit-box-orient vertical
+            height 112px
+          button
+            background none
+            border $main-color solid 1px
+            width 140px
+            height 40px
+            color $main-color
+            cursor pointer
+            margin-top 20px
+            font-size 16px
+            outline none
+    .tab-box
+      overflow hidden
+      margin-top 15px
+      .tab
+        width 32%
+        margin-right 2%
+        height 60px
+        line-height 60px
+        background $main-color
+        cursor pointer
+        color #fff
+        float left
+        text-align center
+        font-size 18px
+        &:last-child
+          margin-right 0
+        &.active
+          background #fff
+          color $main-color
+</style>

src/pages/Index/components/swiper.vue

@@ -0,0 +1,60 @@
+<template>
+    <div class="swiper" ref="swiper">
+      <swiper :options="swiperOption">
+        <swiper-slide v-for="(img, idx) in swiperList" :key="idx">
+          <img :src="url + 'route/file/downloadfile/false/' + img.newsContentCoverList" alt="" class="swiper-img">
+        </swiper-slide>
+        <div class="swiper-button-prev" slot="button-prev" :style="{left: distance}"></div>
+        <div class="swiper-button-next" slot="button-next" :style="{right: distance}"></div>
+      </swiper>
+    </div>
+</template>
+
+<script>
+import common from '@/assets/common/common.js'
+export default {
+  name: 'IndexSwiper',
+  props: {
+    swiperList: Array
+  },
+  data () {
+    return {
+      swiperOption: {
+        autoplay: 3000,
+        pagination: '.swiper-pagination',
+        paginationClickable: true,
+        prevButton: '.swiper-button-prev',
+        nextButton: '.swiper-button-next',
+        loop: true
+      },
+      distance: '',
+      url: common.url
+    }
+  },
+  methods: {
+    btnPosition: function () {
+      var oWidth = this.$refs.swiper.offsetWidth
+      var oDistance = (oWidth - 1200) / 2
+      this.distance = oDistance + 'px'
+    }
+  },
+  mounted: function () {
+    this.btnPosition()
+  }
+}
+</script>
+
+<style lang="stylus" rel="stylesheet/stylus" scoped>
+.swiper, .swiper-img
+  width 100%
+  height 600px
+  position relative
+  .swiper-button-next
+    padding 20px 10px
+    background-color rgba(0,0,0,0.4)
+    margin-top -42px
+  .swiper-button-prev
+    padding 20px 10px
+    background-color rgba(0,0,0,0.4)
+    margin-top -42px
+</style>

src/pages/NewsCenter/NewsCenter.vue

@@ -0,0 +1,331 @@
+<template>
+    <div style="background: #f1f1f1">
+      <Header></Header>
+      <div class="top-img">
+        <img :src="url + 'route/file/downloadfile/false/' + bannerId" alt="" v-if="bannerId">
+      </div>
+      <div class="tab">
+        <div class="page-title">新闻中心</div>
+        <div class="tab-list">
+          <div class="tab-box" :class="{active: pager == idx}" v-for="(type,idx) in typeList" :key="idx" @click="changeType(type.newsDirectoriesId, idx, type.directoriesView)">{{type.directoriesName}}</div>
+        </div>
+      </div>
+      <div class="page-content">
+        <div class="content">
+          <ul>
+            <li class="wow animate__animated animate__fadeInRight" :data-wow-delay="0 + 0.2 * idx + 's'" v-for="(list,idx) in newsList" :key="idx" @click="goDetail(list.templateRecordUrl)">
+              <div class="img-box">
+                <img :src="url + 'route/file/downloadfile/false/' + list.newsContentCoverList" alt="">
+              </div>
+              <div class="news-info">
+                <h2>{{list.newsContentTitle}}</h2>
+                <span>{{list.newsContentPublishTime}}</span>
+                <p>{{list.newsContentSummary}}</p>
+                <button>查看详情</button>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="pager" v-if="page.totalPage > 1">
+        <span @click="paging(page.page - 1)" v-if="page.page > 1">上一页</span>
+        <ul v-if="page.totalPage > 0 && page.totalPage <= 5">
+          <li v-for="cpage in page.totalPage" :class="{'active': page.page == cpage}" :key="cpage" @click="paging(cpage)">
+            {{cpage}}
+          </li>
+        </ul>
+        <ul v-if="page.totalPage > 5">
+          <li v-if="page.page < 3" v-for="cpage in 5" :class="{'active': page.page == cpage}" :key="cpage" @click="paging(cpage)">
+            {{cpage}}
+          </li>
+          <li v-if="page.page > page.totalPage - 2" v-for="cpage in 5" :class="{'active': page.page == (page.totalPage - 5 + cpage)}" :key="cpage" @click="paging(cpage)">
+            {{page.totalPage - 5 + cpage}}
+          </li>
+          <li v-if="page.page >= 3 && page.page <= page.totalPage - 2" v-for="cpage in 5" :class="{'active': page.page == (page.page - (3 - cpage))}" :key="cpage" @click="paging(cpage)">
+            {{page.page - (3 - cpage)}}
+          </li>
+        </ul>
+        <span @click="paging(page.page + 1)" v-if="page.page < page.totalPage">下一页</span>
+      </div>
+      <div class="loading" v-if="isLoading">
+        <img src="@/assets/images/loading.gif" alt="">
+      </div>
+      <Footer></Footer>
+    </div>
+</template>
+
+<script>
+import Header from '@/assets/components/Header'
+import Footer from '@/assets/components/Footer'
+import axios from 'axios'
+import common from '@/assets/common/common'
+import WOW from 'wowjs'
+export default {
+  name: 'NewsCenter',
+  components: {
+    Header,
+    Footer
+  },
+  data () {
+    return {
+      pager: 0,
+      page: {
+        page: 1,
+        rows: 10,
+        totalPage: 1,
+        newsDirectoriesId: '',
+        newsDirectoriesParentId: 'da703e9c-165e-41cf-8f33-01917b5a217d'
+      },
+      url: common.url,
+      typeList: [],
+      newsList: [],
+      isLoading: false,
+      newsDetailUrl: common.newsDetailUrl,
+      bannerId: ''
+    }
+  },
+  methods: {
+    getBanner: function () {
+      var self = this
+      axios.get(self.url +'app/newsdirectories/listnewsdirectoriesrelease',{
+        params: {
+          directoriesParentId: '65d4768a-6f9a-4f6e-bb4b-260b98e0ea38'
+        }
+      }).then(function (res) {
+        for (var i = 0; i < res.data.length; i++) {
+          if (res.data[i].newsDirectoriesId == 'cda790bd-8905-481c-99b1-cd4486d1e5e5') {
+            self.bannerId = res.data[i].directoriesPhoto
+          }
+        }
+      })
+    },
+    getTypeList: function () {
+      var self = this
+      self.isLoading = true
+      axios.get(self.url + 'app/newsdirectories/listnewsdirectoriesrelease', {
+        params: {
+          directoriesParentId: 'da703e9c-165e-41cf-8f33-01917b5a217d'
+        }
+      }).then(function (res) {
+        self.typeList = res.data
+        self.page.newsDirectoriesId = self.typeList[0].newsDirectoriesId
+        self.getNewsList()
+      })
+    },
+    getNewsList: function (view) {
+      var self = this
+      axios.get(self.url + 'app/newscontent/listpagenewscontentrelease', {
+        params: self.page
+      }).then(function (res) {
+        if (view == '0' && self.newsList.length > 0) {
+          window.location.href = self.newsDetailUrl +  res.data.rows[0].templateRecordUrl
+        } else {
+          for (var i = 0; i < res.data.rows.length; i++) {
+            res.data.rows[i].newsContentCoverList = res.data.rows[i].newsContentCoverList[0].contentCoverId
+          }
+          self.newsList = res.data.rows
+          self.page.page = res.data.page
+          self.page.totalPage = Math.ceil(res.data.total / self.page.rows)
+          self.$nextTick(function () {
+            new WOW.WOW({live: true}).init()
+          })
+        }
+        self.isLoading = false
+      })
+    },
+    changeType: function (type,idx, view) {
+      this.pager = idx
+      this.page.newsDirectoriesId = type
+      this.page.page = 1
+      this.isLoading = true
+      this.getNewsList(view)
+    },
+    paging: function (page) {
+      this.page.page = page
+      this.isLoading = true
+      this.getNewsList()
+    },
+    goDetail: function (url) {
+      window.open(this.newsDetailUrl + url)
+    }
+  },
+  mounted: function () {
+    this.getBanner()
+    this.getTypeList()
+  }
+}
+</script>
+
+<style lang="stylus" rel="stylesheet/stylus" scoped>
+@import '~styles/style.styl'
+.loading
+  position fixed
+  top 50%
+  left 50%
+  transform translate(-50%, -50%)
+  background rgba(255,255,255,0.6)
+  padding 30px
+  border-radius 10px
+  box-shadow 0 0 17px #DEDEDE
+.top-img, .top-img img
+  width 100%
+  height 350px
+.tab
+  width 1200px
+  margin -40px auto 0
+  overflow hidden
+  position relative
+  background #fff
+  box-shadow 0 0 17px #EEE
+  .page-title
+    float left
+    padding 10px 0
+    text-align center
+    font-weight bold
+    font-size 20px
+    background $main-color
+    width 150px
+    line-height 60px
+    color #fff
+    height 80px
+    box-sizing border-box
+  .tab-list
+    float left
+    padding 20px 0
+    overflow hidden
+    .tab-box
+      float left
+      border-right 1px solid #DDD
+      text-align center
+      line-height 40px
+      cursor pointer
+      font-size 16px
+      color #999
+      padding 0 20px
+      box-sizing border-box
+      position relative
+      &.active
+        color $main-color
+      &.active:after
+        content ''
+        display block
+        width 100%
+        height 5px
+        background $main-color
+        position absolute
+        bottom -20px
+        left 0
+        right 0
+.page-content
+  width 1200px
+  min-height 500px
+  margin 20px auto
+  padding 20px
+  box-sizing border-box
+  border-top 3px solid $main-color
+  background #fff
+  .content
+    ul
+      li
+        cursor pointer
+        padding 15px 0
+        overflow hidden
+        border-bottom 1px solid #DDD
+        .img-box
+          width 280px
+          height 210px
+          float left
+          img
+            width 100%
+            height 100%
+        .news-info
+          width 850px
+          float right
+          h2
+            font-size 18px
+            color #333
+            padding 15px 0
+          span
+            font-size 16px
+            color #999
+          p
+            margin-top 15px
+            line-height 24px
+            overflow hidden
+            text-overflow ellipsis
+            display -webkit-box
+            -webkit-line-clamp 3
+            -webkit-box-orient vertical
+            font-size 14px
+            color #999
+          button
+            background none
+            outline none
+            border 1px solid #999
+            color #999
+            width 140px
+            height 40px
+            cursor pointer
+            margin-top 8px
+.pager
+  width 1200px
+  margin 0 auto 20px
+  padding-bottom 20px
+  text-align center
+  font-size 0
+  background #fff
+  span
+    display inline-block
+    padding 0 15px
+    line-height 25px
+    color #676767
+    border 1px solid #d2d2d2
+    font-size 14px
+    margin 0 5px
+    vertical-align middle
+    cursor pointer
+  ul
+    display inline-block
+    overflow hidden
+    vertical-align middle
+    li
+      width 45px
+      line-height 25px
+      float left
+      margin-right 10px
+      border 1px solid #d2d2d2
+      cursor pointer
+      text-align center
+      font-size 14px
+      color #676767
+      &.active
+        background $main-color
+        color #fff
+        border 1px solid $main-color
+      &:last-child
+        margin 0
+  input
+    width 50px
+    height 25px
+    border 1px solid #d2d2d2
+    text-align center
+    vertical-align middle
+  i
+    font-style normal
+    color #676767
+    font-size 14px
+    line-height 25px
+    display inline-block
+    vertical-align middle
+    margin 0 5px
+  button
+    cursor pointer
+    border none
+    outline none
+    background $main-color
+    width 50px
+    height 25px
+    vertical-align middle
+    color #fff
+    font-size 14px
+</style>

src/pages/NewsDetail/NewsDetail.vue

@@ -0,0 +1,79 @@
+<template>
+    <div style="background: #f1f1f1">
+      <Header></Header>
+      <div class="top-img">
+        <img src="@/assets/images/page-top.jpg" alt="">
+      </div>
+      <div class="news">
+        <div class="news-title">
+          <h1>饮用水水源地突发环境事件？温江区开展应急演练</h1>
+          <span>2020-07-27</span>
+        </div>
+        <div class="news-content">
+          <p>四川新闻网记者获悉，温江区在认真做好饮用水水源地保护巡查的同时，严格按照《成都市生态环境局关于开展全市集中式饮用水水源地环境问题排查工作的通知》要求，7月24日，温江区以饮用水水源地突发环境事件应急演练的方式，开展了一次应对突发环境事件的大练兵活动，着力形成全区各部门协同作战，进一步提升处置突发事件的应急能力，有效防范和遏制饮用水水源地等突发环境事件发生。</p>
+          <p>2020年7月24日13时20分，位于海峡科技园双新路某公司因管道老化破损，导致机油发生泄漏，对下游饮用水源保护区水质安全造成威胁。园区管委会、区应急管理局和区生态环境局接到报告后立即行动，分别针对现场和污染物流动走向开展前期工作。区生态环境局立即带领处置、监测人员和相关专家前往现场勘查监测，根据现场结果，立即向区政府报告。</p>
+          <p>按照区政府副区长路红星指示，立即启动应急预案，由区生态环境局局长柯震弟任现场指挥长，立即组织应急、水务、交通运输、公安、卫健、气象、农业农村等部门和所涉街道开展工作，同时向下游的双流生态环境局通报了情况。</p>
+          <p>演练在于常备无患，更在于确保温江生态环境，特别是饮用水源的安全。</p>
+          <p>因为，谁都不愿意发生事故，当事故真正发生，我们不会因不熟练而手忙脚乱。应急，要的就是态度和速度；应急，要的就是有序和有效。所以，在演练中各部门和街道，第一时间赶到集合地点，按照各自职能投入应急救援之中。人员、车辆、设备、器材和救援物资在最短的时间准备到位，无人及时机升空。一切紧张进行，但又有条不紊。按照参战人员的说法就是，这是一次真刀真枪的“实弹”演习，这是一次针对环境的大练兵。 演练结束后，温江区副区长路红星提出要求到，各部门和街道要认真总结演练的经验，审视不足，进一步完善应急体制机制，打造一支有实战经验的生态环境应急队伍，确保温江生态环境，特别是饮用水源的安全。</p>
+          <p>据悉，本次演练的突发环境事件等级设定为“较大饮用水源突发环境事件”，包括先期处置，信息报送，启动预案和应急响应，处置和应急终止。从演练开始到结束，持续大约2小时。本次应急演练由温江区人民政府主办，成都市温江生态环境局、温江区应急管理局、温江区天府街道办事处承办。（图片来源于成都市温江生态环境局）</p>
+        </div>
+      </div>
+      <Footer></Footer>
+    </div>
+</template>
+
+<script>
+import Header from '@/assets/components/Header'
+import Footer from '@/assets/components/Footer'
+import axios from 'axios'
+export default {
+  name: 'NewsDetail',
+  components: {
+    Header,
+    Footer
+  },
+  data () {
+    return {
+      newsContentId: ''
+    }
+  },
+  methods: {
+    getNewsContent: function () {
+      var self = this
+
+    }
+  },
+  mounted: function () {}
+}
+</script>
+
+<style lang="stylus" rel="stylesheet/stylus" scoped>
+.top-img, .top-img img
+  width 100%
+  height 300px
+.news
+  margin 20px auto
+  width 1200px
+  background #fff
+  padding 20px
+  box-sizing border-box
+  border-top 5px solid #0099da
+  .news-title
+    text-align center
+    padding-bottom 15px
+    border-bottom 1px solid #0099da
+    h1
+      font-size 20px
+      color #333
+      margin-bottom 15px
+    span
+      font-size 16px
+      color #999
+  .news-content
+    padding 20px 0
+    p
+      font-size 18px
+      line-height 40px
+      color #333
+      text-indent 32px
+</style>

src/pages/Product/Product.vue

@@ -0,0 +1,374 @@
+<template>
+    <div style="background: #f1f1f1">
+      <Header></Header>
+      <div class="top-img">
+        <img :src="url + 'route/file/downloadfile/false/' + bannerId" alt="" v-if="bannerId">
+      </div>
+      <div class="tab">
+        <div class="page-title">产品展示</div>
+        <div class="tab-list">
+          <div class="tab-box" :class="{active: pager == idx}" v-for="(type,idx) in typeList" :key="idx" @click="changeType(type.newsDirectoriesId, idx, type.directoriesView)">{{type.directoriesName}}</div>
+        </div>
+      </div>
+      <div class="page-content">
+        <div class="title">
+          <h2>产品展示</h2>
+          <p>Product</p>
+        </div>
+        <div v-if="isList">
+          <div class="product-list">
+            <ul v-if="!isLoading">
+              <li class="wow animate__animated animate__fadeInUp" :data-wow-delay="0 + 0.2 * idx + 's'" v-for="(product,idx) in productList" :ley="idx" @click="goDetail(product.templateRecordUrl)" :title="product.newsContentTitle">
+                <div class="img-box">
+                  <img :src="url + 'route/file/downloadfile/false/' + product.newsContentCoverList" alt="">
+                </div>
+                <p>{{product.newsContentTitle}}</p>
+              </li>
+            </ul>
+          </div>
+          <div class="pager" v-if="productList && productList.length > 0 && page.totalPage > 1">
+            <span @click="paging(page.page - 1)" v-if="page.page > 1">上一页</span>
+            <ul v-if="page.totalPage > 0 && page.totalPage <= 5">
+              <li v-for="cpage in page.totalPage" :class="{'active': page.page == cpage}" :key="cpage" @click="paging(cpage)">
+                {{cpage}}
+              </li>
+            </ul>
+            <ul v-if="page.totalPage > 5">
+              <li v-if="page.page < 3" v-for="cpage in 5" :class="{'active': page.page == cpage}" :key="cpage" @click="paging(cpage)">
+                {{cpage}}
+              </li>
+              <li v-if="page.page > page.totalPage - 2" v-for="cpage in 5" :class="{'active': page.page == (page.totalPage - 5 + cpage)}" :key="cpage" @click="paging(cpage)">
+                {{page.totalPage - 5 + cpage}}
+              </li>
+              <li v-if="page.page >= 3 && page.page <= page.totalPage - 2" v-for="cpage in 5" :class="{'active': page.page == (page.page - (3 - cpage))}" :key="cpage" @click="paging(cpage)">
+                {{page.page - (3 - cpage)}}
+              </li>
+            </ul>
+            <span @click="paging(page.page + 1)" v-if="page.page < page.totalPage">下一页</span>
+          </div>
+        </div>
+        <div class="news-detail" v-else v-html="newsContent"></div>
+      </div>
+      <div class="loading" v-if="isLoading">
+        <img src="@/assets/images/loading.gif" alt="">
+      </div>
+      <Footer></Footer>
+    </div>
+</template>
+
+<script>
+import Header from '@/assets/components/Header'
+import Footer from '@/assets/components/Footer'
+import axios from 'axios'
+import common from '@/assets/common/common'
+import WOW from 'wowjs'
+export default {
+  name: 'Product',
+  components: {
+    Header,
+    Footer
+  },
+  data () {
+    return {
+      page: {
+        page: 1,
+        rows: 6,
+        totalPage: 1,
+        newsDirectoriesId: '',
+        newsDirectoriesParentId: 'd099acc5-ea2d-40cb-add1-26881aa2c657'
+      },
+      pager: 0,
+      url: common.url,
+      typeList: [],
+      productList: [],
+      isLoading: false,
+      newsDetailUrl: common.newsDetailUrl,
+      isList: true,
+      newsContent: '',
+      bannerId: ''
+    }
+  },
+  methods: {
+    getBanner: function () {
+      var self = this
+      axios.get(self.url +'app/newsdirectories/listnewsdirectoriesrelease',{
+        params: {
+          directoriesParentId: '65d4768a-6f9a-4f6e-bb4b-260b98e0ea38'
+        }
+      }).then(function (res) {
+        for (var i = 0; i < res.data.length; i++) {
+          if (res.data[i].newsDirectoriesId == '3df3e516-c720-4ee9-855f-e214cb298756') {
+            self.bannerId = res.data[i].directoriesPhoto
+          }
+        }
+      })
+    },
+    getTypeList: function () {
+      var self = this
+      self.isLoading = true
+      axios.get(self.url + 'app/newsdirectories/listnewsdirectoriesrelease', {
+        params: {
+          directoriesParentId: 'd099acc5-ea2d-40cb-add1-26881aa2c657'
+        }
+      }).then(function (res) {
+        self.typeList = res.data
+        self.page.newsDirectoriesId = self.typeList[0].newsDirectoriesId
+        self.getProductList(self.typeList[0].directoriesView)
+      })
+    },
+    changeType: function (type, idx, view) {
+      this.pager = idx
+      this.page.page = 1
+      this.page.newsDirectoriesId = type
+      this.isLoading = true
+      this.getProductList(view)
+    },
+    getProductList: function (view) {
+      var self = this
+      axios.get(self.url + 'app/newscontent/listpagenewscontentrelease', {
+        params: self.page
+      }).then(function (res) {
+        if (view == '0') {
+          self.isList = false
+          if (res.rows.length > 0) {
+            self.getNewsDetail(res.data.rows[0].newsContentId)
+          } else {
+            self.$layer.msg('暂无数据')
+            self.newsContent = ''
+          }
+        } else {
+          self.isList = true
+          if (res.data.rows.length > 0) {
+            for (var i = 0; i < res.data.rows.length; i++) {
+              res.data.rows[i].newsContentCoverList = res.data.rows[i].newsContentCoverList[0].contentCoverId
+            }
+            self.productList = res.data.rows
+            self.page.page = res.data.page
+            self.page.totalPage = Math.ceil(res.data.total / self.page.rows)
+            self.$nextTick(function () {
+              new WOW.WOW({live: true}).init()
+            })
+          } else {
+            self.$layer.msg('暂无数据')
+            self.productList = []
+          }
+        }
+        self.isLoading = false
+      })
+    },
+    goDetail: function (url) {
+      window.open(this.newsDetailUrl + url)
+    },
+    paging: function (page) {
+      this.page.page = page
+      this.isLoading = true
+      this.getProductList()
+    },
+    getNewsDetail: function (id) {
+      var self = this
+      axios.get(self.url + 'app/newscontent/getnewscontentbyidrelease/' + id).then(function (res) {
+        self.newsContent = res.data.newsContentContent
+      })
+    }
+  },
+  mounted: function () {
+    this.getBanner()
+    this.getTypeList()
+  }
+}
+</script>
+
+<style lang="stylus" rel="stylesheet/stylus" scoped>
+@import '~styles/style.styl'
+.loading
+  position fixed
+  top 50%
+  left 50%
+  transform translate(-50%, -50%)
+  background rgba(255,255,255,0.6)
+  padding 30px
+  border-radius 10px
+  box-shadow 0 0 17px #DEDEDE
+.top-img, .top-img img
+  width 100%
+  height 350px
+.tab
+  width 1200px
+  margin -40px auto 0
+  overflow hidden
+  position relative
+  background #fff
+  box-shadow 0 0 17px #EEE
+  .page-title
+    float left
+    padding 10px 0
+    text-align center
+    font-weight bold
+    font-size 20px
+    background $main-color
+    width 150px
+    line-height 60px
+    color #fff
+    height 80px
+    box-sizing border-box
+  .tab-list
+    float left
+    padding 20px 0
+    overflow hidden
+    .tab-box
+      float left
+      border-right 1px solid #DDD
+      text-align center
+      line-height 40px
+      cursor pointer
+      font-size 16px
+      color #999
+      padding 0 20px
+      box-sizing border-box
+      position relative
+      &.active
+        color $main-color
+      &.active:after
+        content ''
+        display block
+        width 100%
+        height 5px
+        background $main-color
+        position absolute
+        bottom -20px
+        left 0
+        right 0
+.page-content
+  width 1200px
+  margin 20px auto
+  padding 20px
+  box-sizing border-box
+  border-top 3px solid $main-color
+  background #fff
+  .title
+    padding-bottom 20px
+    position relative
+    &:after
+      content ''
+      display block
+      width 80px
+      height 2px
+      background $main-color
+      position absolute
+      bottom 0
+      left 0
+    h2
+      display inline-block
+      color $main-color
+      font-size 30px
+      margin-bottom 5px
+    p
+      font-size 14px
+      font-weight bold
+      color #999
+  .product-list
+    min-height 300px
+    margin-top 20px
+    ul
+      &:after
+        content ''
+        display block
+        clear both
+      li
+        float left
+        width 360px
+        margin-right 30px
+        margin-bottom 20px
+        cursor pointer
+        box-shadow 0 0 10px 0 hsla(0,0%,69%,.3)
+        &:nth-child(3n)
+          margin-right 0
+        &:hover
+          box-shadow 0 0 10px 0 hsla(0,0%,69%,.9)
+        .img-box
+          width 100%
+          height 270px
+          margin-bottom 5px
+          img
+            width 100%
+            height 100%
+        p
+          font-size 18px
+          text-align center
+          white-space nowrap
+          overflow hidden
+          text-overflow ellipsis
+          margin 10px 0
+          padding 0 10px
+  .news-detail
+    margin-top 20px
+    min-height 300px
+.pager
+  width 100%
+  margin 0 auto 20px
+  padding-bottom 20px
+  text-align center
+  font-size 0
+  background #fff
+  span
+    display inline-block
+    padding 0 15px
+    line-height 25px
+    color #676767
+    border 1px solid #d2d2d2
+    font-size 14px
+    margin 0 5px
+    vertical-align middle
+    cursor pointer
+  ul
+    display inline-block
+    overflow hidden
+    vertical-align middle
+    li
+      width 45px
+      line-height 25px
+      float left
+      margin-right 10px
+      border 1px solid #d2d2d2
+      cursor pointer
+      text-align center
+      font-size 14px
+      color #676767
+      &.active
+        background $main-color
+        color #fff
+        border 1px solid $main-color
+      &:last-child
+        margin 0
+  input
+    width 50px
+    height 25px
+    border 1px solid #d2d2d2
+    text-align center
+    vertical-align middle
+  i
+    font-style normal
+    color #676767
+    font-size 14px
+    line-height 25px
+    display inline-block
+    vertical-align middle
+    margin 0 5px
+  button
+    cursor pointer
+    border none
+    outline none
+    background $main-color
+    width 50px
+    height 25px
+    vertical-align middle
+    color #fff
+    font-size 14px
+  .news-detail >>> p
+    font-size 18px
+    line-height 30px
+  .news-detail >>> img
+    display block
+    max-width 100%
+    margin 0 auto
+</style>

src/pages/Programme/Programme.vue

@@ -0,0 +1,364 @@
+<template>
+  <div style="background: #f1f1f1">
+    <Header></Header>
+    <div class="top-img">
+      <img :src="url + 'route/file/downloadfile/false/' + bannerId" alt="" v-if="bannerId">
+    </div>
+    <div class="tab">
+      <div class="page-title">解决方案</div>
+      <div class="tab-list">
+        <div class="tab-box" :class="{active: pager == idx}" v-for="(type,idx) in typeList" :key="idx" @click="changeType(type.newsDirectoriesId, idx, type.directoriesView)">{{type.directoriesName}}</div>
+      </div>
+    </div>
+    <div class="page-content">
+      <div class="title">
+        <h2>解决方案</h2>
+        <p>Programme</p>
+      </div>
+      <div v-if="isList">
+        <div class="product-list">
+          <ul>
+            <li class="wow animate__animated animate__fadeInUp" :data-wow-delay="0 + 0.2 * idx + 's'" v-for="(system,idx) in systemList" :ley="idx" @click="goDetail(system.templateRecordUrl)">
+              <div class="img-box">
+                <img :src="url + 'route/file/downloadfile/false/' + system.newsContentCoverList" alt="">
+              </div>
+              <p>{{system.newsContentTitle}}</p>
+            </li>
+          </ul>
+        </div>
+        <div class="pager" v-if="page.totalPage > 1">
+          <span @click="paging(page.page - 1)" v-if="page.page > 1">上一页</span>
+          <ul v-if="page.totalPage > 0 && page.totalPage <= 5">
+            <li v-for="cpage in page.totalPage" :class="{'active': page.page == cpage}" :key="cpage" @click="paging(cpage)">
+              {{cpage}}
+            </li>
+          </ul>
+          <ul v-if="page.totalPage > 5">
+            <li v-if="page.page < 3" v-for="cpage in 5" :class="{'active': page.page == cpage}" :key="cpage" @click="paging(cpage)">
+              {{cpage}}
+            </li>
+            <li v-if="page.page > page.totalPage - 2" v-for="cpage in 5" :class="{'active': page.page == (page.totalPage - 5 + cpage)}" :key="cpage" @click="paging(cpage)">
+              {{page.totalPage - 5 + cpage}}
+            </li>
+            <li v-if="page.page >= 3 && page.page <= page.totalPage - 2" v-for="cpage in 5" :class="{'active': page.page == (page.page - (3 - cpage))}" :key="cpage" @click="paging(cpage)">
+              {{page.page - (3 - cpage)}}
+            </li>
+          </ul>
+          <span @click="paging(page.page + 1)" v-if="page.page < page.totalPage">下一页</span>
+        </div>
+      </div>
+      <div class="news-detail" v-else v-html="newsContent"></div>
+    </div>
+    <div class="loading" v-if="isLoading">
+      <img src="@/assets/images/loading.gif" alt="">
+    </div>
+    <Footer></Footer>
+  </div>
+</template>
+
+<script>
+  import Header from '@/assets/components/Header'
+  import Footer from '@/assets/components/Footer'
+  import axios from 'axios'
+  import common from '@/assets/common/common'
+  import WOW from 'wowjs'
+  export default {
+    name: 'Programme',
+    components: {
+      Header,
+      Footer
+    },
+    data () {
+      return {
+        page: {
+          page: 1,
+          rows: 6,
+          totalPage: 1,
+          newsDirectoriesId: '',
+          newsDirectoriesParentId: '7b8445d8-33d6-42cb-8903-91bcf0690dfc'
+        },
+        pager: 0,
+        url: common.url,
+        typeList: [],
+        systemList: [],
+        isLoading: false,
+        newsDetailUrl: common.newsDetailUrl,
+        isList: true,
+        newsContent: '',
+        bannerId: ''
+      }
+    },
+    methods: {
+      getBanner: function () {
+        var self = this
+        axios.get(self.url +'app/newsdirectories/listnewsdirectoriesrelease',{
+          params: {
+            directoriesParentId: '65d4768a-6f9a-4f6e-bb4b-260b98e0ea38'
+          }
+        }).then(function (res) {
+          for (var i = 0; i < res.data.length; i++) {
+            if (res.data[i].newsDirectoriesId == '5e0edba6-7028-4a0e-b935-badbd23669e4') {
+              self.bannerId = res.data[i].directoriesPhoto
+            }
+          }
+        })
+      },
+      getTypeList: function () {
+        var self = this
+        self.isLoading = true
+        axios.get(self.url + 'app/newsdirectories/listnewsdirectoriesrelease', {
+          params: {
+            directoriesParentId: '7b8445d8-33d6-42cb-8903-91bcf0690dfc'
+          }
+        }).then(function (res) {
+          self.typeList = res.data
+          self.page.newsDirectoriesId = self.typeList[0].newsDirectoriesId
+          self.getSystemList(self.typeList[0].directoriesView)
+        })
+      },
+      changeType: function (type,idx,view) {
+        this.pager = idx
+        this.page.page = 1
+        this.isLoading = true
+        this.page.newsDirectoriesId = type
+        this.getSystemList(view)
+      },
+      getSystemList: function (view) {
+        var self = this
+        axios.get(self.url + 'app/newscontent/listpagenewscontentrelease', {
+          params: self.page
+        }).then(function (res) {
+          if (view == '0') {
+            self.isList = false
+            if (res.rows.length > 0) {
+              self.getNewsDetail(res.data.rows[0].newsContentId)
+            } else {
+              self.$layer.msg('暂无数据')
+              self.newsContent = ''
+            }
+          } else {
+            self.isList = true
+            if (res.data.rows.length > 0) {
+              for (var i = 0; i < res.data.rows.length; i++) {
+                res.data.rows[i].newsContentCoverList = res.data.rows[i].newsContentCoverList[0].contentCoverId
+              }
+              self.systemList = res.data.rows
+              self.page.page = res.data.page
+              self.page.totalPage = Math.ceil(res.data.total / self.page.rows)
+              self.$nextTick(function () {
+                new WOW.WOW({live: true}).init()
+              })
+            } else {
+              self.$layer.msg('暂无数据')
+              self.systemList = []
+            }
+          }
+          self.isLoading = false
+        })
+      },
+      goDetail: function (url) {
+        window.open(this.newsDetailUrl + url)
+      },
+      paging: function (page) {
+        this.page.page = page
+        this.isLoading = true
+        this.getSystemList()
+      },
+      getNewsDetail: function (id) {
+        var self = this
+        axios.get(self.url + 'app/newscontent/getnewscontentbyidrelease/' + id).then(function (res) {
+          self.newsContent = res.data.newsContentContent
+        })
+      }
+    },
+    mounted: function () {
+      this.getBanner()
+      this.getTypeList()
+    }
+  }
+</script>
+
+<style lang="stylus" rel="stylesheet/stylus" scoped>
+  @import '~styles/style.styl'
+  .loading
+    position fixed
+    top 50%
+    left 50%
+    transform translate(-50%, -50%)
+    background rgba(255,255,255,0.6)
+    padding 30px
+    border-radius 10px
+    box-shadow 0 0 17px #DEDEDE
+  .top-img, .top-img img
+    width 100%
+    height 350px
+  .tab
+    width 1200px
+    margin -40px auto 0
+    overflow hidden
+    position relative
+    background #fff
+    box-shadow 0 0 17px #EEE
+    .page-title
+      float left
+      padding 10px 0
+      text-align center
+      font-weight bold
+      font-size 20px
+      background $main-color
+      width 150px
+      line-height 60px
+      color #fff
+      height 80px
+      box-sizing border-box
+    .tab-list
+      float left
+      padding 20px 0
+      overflow hidden
+      .tab-box
+        float left
+        border-right 1px solid #DDD
+        text-align center
+        line-height 40px
+        cursor pointer
+        font-size 16px
+        color #999
+        padding 0 20px
+        box-sizing border-box
+        position relative
+        &.active
+          color $main-color
+        &.active:after
+          content ''
+          display block
+          width 100%
+          height 5px
+          background $main-color
+          position absolute
+          bottom -20px
+          left 0
+          right 0
+  .page-content
+    width 1200px
+    margin 20px auto
+    padding 20px
+    box-sizing border-box
+    border-top 3px solid $main-color
+    background #fff
+    .title
+      padding-bottom 20px
+      position relative
+      &:after
+        content ''
+        display block
+        width 80px
+        height 2px
+        background $main-color
+        position absolute
+        bottom 0
+        left 0
+      h2
+        display inline-block
+        color $main-color
+        font-size 30px
+        margin-bottom 5px
+      p
+        font-size 14px
+        font-weight bold
+        color #999
+    .product-list
+      margin-top 20px
+      min-height 300px
+      ul
+        &:after
+          content ''
+          display block
+          clear both
+        li
+          float left
+          width 360px
+          margin-right 30px
+          margin-bottom 20px
+          cursor pointer
+          box-shadow 0 0 10px 0 hsla(0,0%,69%,.3)
+          &:nth-child(3n)
+            margin-right 0
+          &:hover
+            box-shadow 0 0 10px 0 hsla(0,0%,69%,.9)
+          .img-box
+            width 100%
+            height 270px
+            margin-bottom 5px
+            img
+              width 100%
+              height 100%
+          p
+            font-size 18px
+            text-align center
+            white-space nowrap
+            overflow hidden
+            text-overflow ellipsis
+            margin 10px 0
+            padding 0 10px
+  .pager
+    width 100%
+    margin 0 auto 20px
+    padding-bottom 20px
+    text-align center
+    font-size 0
+    background #fff
+    span
+      display inline-block
+      padding 0 15px
+      line-height 25px
+      color #676767
+      border 1px solid #d2d2d2
+      font-size 14px
+      margin 0 5px
+      vertical-align middle
+      cursor pointer
+    ul
+      display inline-block
+      overflow hidden
+      vertical-align middle
+      li
+        width 45px
+        line-height 25px
+        float left
+        margin-right 10px
+        border 1px solid #d2d2d2
+        cursor pointer
+        text-align center
+        font-size 14px
+        color #676767
+        &.active
+          background $main-color
+          color #fff
+          border 1px solid $main-color
+        &:last-child
+          margin 0
+    input
+      width 50px
+      height 25px
+      border 1px solid #d2d2d2
+      text-align center
+      vertical-align middle
+    i
+      font-style normal
+      color #676767
+      font-size 14px
+      line-height 25px
+      display inline-block
+      vertical-align middle
+      margin 0 5px
+    button
+      cursor pointer
+      border none
+      outline none
+      background $main-color
+      width 50px
+      height 25px
+      vertical-align middle
+      color #fff
+      font-size 14px
+</style>

src/pages/Service/Service.vue

@@ -0,0 +1,370 @@
+<template>
+  <div style="background: #f1f1f1">
+    <Header></Header>
+    <div class="top-img">
+      <img :src="url + 'route/file/downloadfile/false/' + bannerId" alt="" v-if="bannerId">
+    </div>
+    <div class="tab">
+      <div class="page-title">服务和管理</div>
+      <div class="tab-list">
+        <div class="tab-box" :class="{active: pager == idx}" v-for="(type,idx) in typeList" :key="idx" @click="changeType(type.newsDirectoriesId, idx, type.directoriesView)">{{type.directoriesName}}</div>
+      </div>
+    </div>
+    <div class="page-content">
+      <div class="title">
+        <h2>服务和管理</h2>
+        <p>Service</p>
+      </div>
+      <div v-if="isList">
+        <div class="product-list">
+          <ul>
+            <li v-for="(service,idx) in serviceList" :ley="idx" @click="goDetail(service.templateRecordUrl)">
+              <div class="img-box">
+                <img :src="url + 'route/file/downloadfile/false/' + service.newsContentCoverList" alt="">
+              </div>
+              <p>{{service.newsContentTitle}}</p>
+            </li>
+          </ul>
+        </div>
+        <div class="pager">
+          <span @click="paging(page.page - 1)" v-if="page.page > 1">上一页</span>
+          <ul v-if="page.totalPage > 0 && page.totalPage <= 5">
+            <li v-for="cpage in page.totalPage" :class="{'active': page.page == cpage}" :key="cpage" @click="paging(cpage)">
+              {{cpage}}
+            </li>
+          </ul>
+          <ul v-if="page.totalPage > 5">
+            <li v-if="page.page < 3" v-for="cpage in 5" :class="{'active': page.page == cpage}" :key="cpage" @click="paging(cpage)">
+              {{cpage}}
+            </li>
+            <li v-if="page.page > page.totalPage - 2" v-for="cpage in 5" :class="{'active': page.page == (page.totalPage - 5 + cpage)}" :key="cpage" @click="paging(cpage)">
+              {{page.totalPage - 5 + cpage}}
+            </li>
+            <li v-if="page.page >= 3 && page.page <= page.totalPage - 2" v-for="cpage in 5" :class="{'active': page.page == (page.page - (3 - cpage))}" :key="cpage" @click="paging(cpage)">
+              {{page.page - (3 - cpage)}}
+            </li>
+          </ul>
+          <span @click="paging(page.page + 1)" v-if="page.page < page.totalPage">下一页</span>
+        </div>
+      </div>
+      <div class="news-detail" v-else v-html="newsContent"></div>
+    </div>
+    <div class="loading" v-if="isLoading">
+      <img src="@/assets/images/loading.gif" alt="">
+    </div>
+    <Footer></Footer>
+  </div>
+</template>
+
+<script>
+  import Header from '@/assets/components/Header'
+  import Footer from '@/assets/components/Footer'
+  import axios from 'axios'
+  import common from '@/assets/common/common'
+  export default {
+    name: 'Service',
+    components: {
+      Header,
+      Footer
+    },
+    data () {
+      return {
+        page: {
+          page: 1,
+          rows: 6,
+          totalPage: 1,
+          newsDirectoriesId: '',
+          newsDirectoriesParentId: '7fb56d22-a5c4-46f0-bfc1-3e9c809aca08'
+        },
+        pager: 0,
+        url: common.url,
+        typeList: [],
+        serviceList: [],
+        isLoading: false,
+        newsDetailUrl: common.newsDetailUrl,
+        isList: true,
+        newsContent: '',
+        bannerId: ''
+      }
+    },
+    methods: {
+      getBanner: function () {
+        var self = this
+        axios.get(self.url +'app/newsdirectories/listnewsdirectoriesrelease',{
+          params: {
+            directoriesParentId: '65d4768a-6f9a-4f6e-bb4b-260b98e0ea38'
+          }
+        }).then(function (res) {
+          for (var i = 0; i < res.data.length; i++) {
+            if (res.data[i].newsDirectoriesId == '4e58149f-2ff4-4f56-9548-002e23464dd6') {
+              self.bannerId = res.data[i].directoriesPhoto
+            }
+          }
+        })
+      },
+      getTypeList: function () {
+        var self = this
+        self.isLoading = true
+        axios.get(self.url + 'app/newsdirectories/listnewsdirectoriesrelease', {
+          params: {
+            directoriesParentId: '7fb56d22-a5c4-46f0-bfc1-3e9c809aca08'
+          }
+        }).then(function (res) {
+          self.typeList = res.data
+          self.page.newsDirectoriesId = self.typeList[0].newsDirectoriesId
+          self.getServiceList(self.typeList[0].directoriesView)
+        })
+      },
+      changeType: function (type,idx,view) {
+        this.pager = idx
+        this.page.page = 1
+        this.isLoading = true
+        this.page.newsDirectoriesId = type
+        this.getServiceList(view)
+      },
+      getServiceList: function (view) {
+        var self = this
+        axios.get(self.url + 'app/newscontent/listpagenewscontentrelease', {
+          params: self.page
+        }).then(function (res) {
+          if (view == '0') {
+            self.isList = false
+            if (res.data.rows.length > 0) {
+              self.getNewsDetail(res.data.rows[0].newsContentId)
+            } else {
+              self.$layer.msg('暂无数据')
+              self.newsContent = ''
+            }
+          } else {
+            self.isList = true
+            if (res.data.rows.length > 0) {
+              for (var i = 0; i < res.data.rows.length; i++) {
+                res.data.rows[i].newsContentCoverList = res.data.rows[i].newsContentCoverList[0].contentCoverId
+              }
+              self.serviceList = res.data.rows
+              self.page.page = res.data.page
+              self.page.totalPage = Math.ceil(res.data.total / self.page.rows)
+            } else {
+              self.$layer.msg('暂无数据')
+              self.serviceList = []
+            }
+          }
+          self.isLoading = false
+        })
+      },
+      goDetail: function (url) {
+        window.open(this.newsDetailUrl + url)
+      },
+      paging: function (page) {
+        this.page.page = page
+        this.isLoading = true
+        this.getServiceList()
+      },
+      getNewsDetail: function (id) {
+        var self = this
+        axios.get(self.url + 'app/newscontent/getnewscontentbyidrelease/' + id).then(function (res) {
+          self.newsContent = res.data.newsContentContent
+        })
+      }
+    },
+    mounted: function () {
+      this.getBanner()
+      this.getTypeList()
+    }
+  }
+</script>
+
+<style lang="stylus" rel="stylesheet/stylus" scoped>
+  @import '~styles/style.styl'
+  .loading
+    position fixed
+    top 50%
+    left 50%
+    transform translate(-50%, -50%)
+    background rgba(255,255,255,0.6)
+    padding 30px
+    border-radius 10px
+    box-shadow 0 0 17px #DEDEDE
+  .top-img, .top-img img
+    width 100%
+    height 350px
+  .tab
+    width 1200px
+    margin -40px auto 0
+    overflow hidden
+    position relative
+    background #fff
+    box-shadow 0 0 17px #EEE
+    .page-title
+      float left
+      padding 10px 0
+      text-align center
+      font-weight bold
+      font-size 20px
+      background $main-color
+      width 150px
+      line-height 60px
+      color #fff
+      height 80px
+      box-sizing border-box
+    .tab-list
+      float left
+      padding 20px 0
+      overflow hidden
+      .tab-box
+        float left
+        border-right 1px solid #DDD
+        text-align center
+        line-height 40px
+        cursor pointer
+        font-size 16px
+        color #999
+        padding 0 20px
+        box-sizing border-box
+        position relative
+        &.active
+          color $main-color
+        &.active:after
+          content ''
+          display block
+          width 100%
+          height 5px
+          background $main-color
+          position absolute
+          bottom -20px
+          left 0
+          right 0
+  .page-content
+    width 1200px
+    margin 20px auto
+    padding 20px
+    box-sizing border-box
+    border-top 3px solid $main-color
+    background #fff
+    .title
+      padding-bottom 20px
+      position relative
+      &:after
+        content ''
+        display block
+        width 80px
+        height 2px
+        background $main-color
+        position absolute
+        bottom 0
+        left 0
+      h2
+        display inline-block
+        color $main-color
+        font-size 30px
+        margin-bottom 5px
+      p
+        font-size 14px
+        font-weight bold
+        color #999
+    .product-list
+      margin-top 20px
+      min-height 300px
+      ul
+        &:after
+          content ''
+          display block
+          clear both
+        li
+          float left
+          width 360px
+          margin-right 30px
+          margin-bottom 20px
+          cursor pointer
+          box-shadow 0 0 10px 0 hsla(0,0%,69%,.3)
+          &:nth-child(3n)
+            margin-right 0
+          &:hover
+            box-shadow 0 0 10px 0 hsla(0,0%,69%,.9)
+          .img-box
+            width 100%
+            height 270px
+            margin-bottom 5px
+            img
+              width 100%
+              height 100%
+          p
+            font-size 18px
+            text-align center
+            white-space nowrap
+            overflow hidden
+            text-overflow ellipsis
+            margin 10px 0
+            padding 0 10px
+    .news-detail
+      margin-top 20px
+      min-height 300px
+  .pager
+    width 100%
+    margin 0 auto 20px
+    padding-bottom 20px
+    text-align center
+    font-size 0
+    background #fff
+    span
+      display inline-block
+      padding 0 15px
+      line-height 25px
+      color #676767
+      border 1px solid #d2d2d2
+      font-size 14px
+      margin 0 5px
+      vertical-align middle
+      cursor pointer
+    ul
+      display inline-block
+      overflow hidden
+      vertical-align middle
+      li
+        width 45px
+        line-height 25px
+        float left
+        margin-right 10px
+        border 1px solid #d2d2d2
+        cursor pointer
+        text-align center
+        font-size 14px
+        color #676767
+        &.active
+          background $main-color
+          color #fff
+          border 1px solid $main-color
+        &:last-child
+          margin 0
+    input
+      width 50px
+      height 25px
+      border 1px solid #d2d2d2
+      text-align center
+      vertical-align middle
+    i
+      font-style normal
+      color #676767
+      font-size 14px
+      line-height 25px
+      display inline-block
+      vertical-align middle
+      margin 0 5px
+    button
+      cursor pointer
+      border none
+      outline none
+      background $main-color
+      width 50px
+      height 25px
+      vertical-align middle
+      color #fff
+      font-size 14px
+  .news-detail >>> p
+      font-size 18px
+      line-height 30px
+  .news-detail >>> img
+      display block
+      max-width 100%
+      margin 0 auto
+</style>

src/router/index.js

@@ -0,0 +1,44 @@
+import Vue from 'vue'
+import Router from 'vue-router'
+import Index from '@/pages/Index/Index'
+import Product from '@/pages/Product/Product'
+import About from '@/pages/About/About'
+import Programme from '@/pages/Programme/Programme'
+import NewsCenter from '@/pages/NewsCenter/NewsCenter'
+import Service from '@/pages/Service/Service'
+Vue.use(Router)
+
+export default new Router({
+  routes: [
+    {
+      path: '/',
+      name: 'Index',
+      component: Index
+    },
+    {
+      path: '/Product',
+      name: 'Product',
+      component: Product
+    },
+    {
+      path: '/About',
+      name: 'About',
+      component: About
+    },
+    {
+      path: '/Programme',
+      name: 'Programme',
+      component: Programme
+    },
+    {
+      path: '/NewsCenter',
+      name: 'NewsCenter',
+      component: NewsCenter
+    },
+    {
+      path: '/Service',
+      name: 'Service',
+      component: Service
+    }
+  ]
+})