初始项目

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "liveServer.settings.port": 5501
+}

back/.babelrc

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

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

back/.eslintignore

@@ -0,0 +1,5 @@
+/build/
+/config/
+/dist/
+/*.js
+/test/unit/coverage/

back/.eslintrc.js

@@ -0,0 +1,29 @@
+// https://eslint.org/docs/user-guide/configuring
+
+module.exports = {
+  root: true,
+  parserOptions: {
+    parser: 'babel-eslint'
+  },
+  env: {
+    browser: true,
+  },
+  extends: [
+    // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
+    // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
+    'plugin:vue/essential', 
+    // https://github.com/standard/standard/blob/master/docs/RULES-en.md
+    'standard'
+  ],
+  // required to lint *.vue files
+  plugins: [
+    'vue'
+  ],
+  // add your custom rules here
+  rules: {
+    // allow async-await
+    'generator-star-spacing': 'off',
+    // allow debugger during development
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
+  }
+}

back/.gitignore

@@ -0,0 +1,17 @@
+.DS_Store
+node_modules/
+/dist/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+/test/unit/coverage/
+/test/e2e/reports/
+selenium-debug.log
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln

back/.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": {}
+  }
+}

back/README.md

@@ -0,0 +1,30 @@
+# bigscene
+
+> 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
+
+# run unit tests
+npm run unit
+
+# run e2e tests
+npm run e2e
+
+# run all tests
+npm test
+```
+
+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).

back/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'
+    ))
+  })
+})

back/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)
+  }
+}

back/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')
+    })
+  }
+}

back/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'
+  }
+}

back/build/webpack.base.conf.js

@@ -0,0 +1,92 @@
+'use strict'
+const path = require('path')
+const utils = require('./utils')
+const config = require('../config')
+const vueLoaderConfig = require('./vue-loader.conf')
+
+function resolve (dir) {
+  return path.join(__dirname, '..', dir)
+}
+
+const createLintingRule = () => ({
+  test: /\.(js|vue)$/,
+  loader: 'eslint-loader',
+  enforce: 'pre',
+  include: [resolve('src'), resolve('test')],
+  options: {
+    formatter: require('eslint-friendly-formatter'),
+    emitWarning: !config.dev.showEslintErrorsInOverlay
+  }
+})
+
+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'),
+    }
+  },
+  module: {
+    rules: [
+      ...(config.dev.useEslint ? [createLintingRule()] : []),
+      {
+        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'
+  }
+}

back/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)
+    }
+  })
+})

back/build/webpack.prod.conf.js

@@ -0,0 +1,149 @@
+'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 = process.env.NODE_ENV === 'testing'
+  ? require('../config/test.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: process.env.NODE_ENV === 'testing'
+        ? 'index.html'
+        : 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

back/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"'
+})

back/config/index.js

@@ -0,0 +1,77 @@
+'use strict'
+// Template version: 1.3.1
+// see http://vuejs-templates.github.io/webpack for documentation.
+
+const path = require('path')
+var proxyConfig = require('./proxyConfig')
+
+module.exports = {
+  dev: {
+
+    // Paths
+    assetsSubDirectory: 'static',
+    assetsPublicPath: '/',
+    proxyTable: proxyConfig.proxy,
+
+    // 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-
+
+    // Use Eslint Loader?
+    // If true, your code will be linted during bundling and
+    // linting errors and warnings will be shown in the console.
+    useEslint: true,
+    // If true, eslint errors and warnings will also be shown in the error overlay
+    // in the browser.
+    showEslintErrorsInOverlay: false,
+
+    /**
+     * 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
+  }
+}

back/config/prod.env.js

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

back/config/proxyConfig.js

@@ -0,0 +1,12 @@
+module.exports = {
+  proxy: {
+    '/apis': {    //将www.exaple.com印射为/apis
+      target: 'http://localhost:3000',  // 接口域名
+      secure: false,  // 如果是https接口，需要配置这个参数
+      changeOrigin: true,  //是否跨域
+      pathRewrite: {
+        '^/apis': ''   //需要rewrite的,
+      }
+    }
+  }
+}

back/config/test.env.js

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

back/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>bigscene</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

back/package.json

@@ -0,0 +1,89 @@
+{
+  "name": "bigscene",
+  "version": "1.0.0",
+  "description": "A Vue.js project",
+  "author": "zhibin <854556519@qq.com>",
+  "private": true,
+  "scripts": {
+    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
+    "start": "npm run dev",
+    "unit": "jest --config test/unit/jest.conf.js --coverage",
+    "e2e": "node test/e2e/runner.js",
+    "test": "npm run unit && npm run e2e",
+    "lint": "eslint --ext .js,.vue src test/unit test/e2e/specs",
+    "build": "node build/build.js"
+  },
+  "dependencies": {
+    "axios": "^0.18.0",
+    "element-ui": "^2.4.8",
+    "vue": "^2.5.2",
+    "vue-router": "^3.0.1"
+  },
+  "devDependencies": {
+    "autoprefixer": "^7.1.2",
+    "babel-core": "^6.22.1",
+    "babel-eslint": "^8.2.1",
+    "babel-helper-vue-jsx-merge-props": "^2.0.3",
+    "babel-jest": "^21.0.2",
+    "babel-loader": "^7.1.1",
+    "babel-plugin-dynamic-import-node": "^1.2.0",
+    "babel-plugin-syntax-jsx": "^6.18.0",
+    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.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",
+    "babel-register": "^6.22.0",
+    "chalk": "^2.0.1",
+    "chromedriver": "^2.27.2",
+    "copy-webpack-plugin": "^4.0.1",
+    "cross-spawn": "^5.0.1",
+    "css-loader": "^0.28.0",
+    "eslint": "^4.15.0",
+    "eslint-config-standard": "^10.2.1",
+    "eslint-friendly-formatter": "^3.0.0",
+    "eslint-loader": "^1.7.1",
+    "eslint-plugin-import": "^2.7.0",
+    "eslint-plugin-node": "^5.2.0",
+    "eslint-plugin-promise": "^3.4.0",
+    "eslint-plugin-standard": "^3.0.1",
+    "eslint-plugin-vue": "^4.0.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",
+    "jest": "^22.0.4",
+    "jest-serializer-vue": "^0.3.0",
+    "nightwatch": "^0.9.12",
+    "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",
+    "selenium-server": "^3.0.1",
+    "semver": "^5.3.0",
+    "shelljs": "^0.7.6",
+    "uglifyjs-webpack-plugin": "^1.1.1",
+    "url-loader": "^0.5.8",
+    "vue-jest": "^1.0.2",
+    "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"
+  ]
+}

back/src/App.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="app">
+    <router-view/>
+  </div>
+</template>
+
+<script>
+import 'element-ui/lib/theme-chalk/index.css'
+import '@/assets/css/public.css'
+
+export default {
+  name: 'App'
+}
+</script>
+
+<style scoped>
+.app {
+  max-width: 1680px;
+  margin: 0 auto;
+}
+</style>

back/src/assets/css/public.css

@@ -0,0 +1,42 @@
+* {
+  margin: 0;
+  padding: 0;
+}
+
+a {
+  color: #409eff;
+  text-decoration: none;
+  cursor: pointer;
+  font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif;
+  font-weight: 400;
+  -webkit-font-smoothing: antialiased;
+  font-size: 14px;
+}
+
+.button {
+  
+    display: inline-block;
+    line-height: 1;
+    white-space: nowrap;
+    cursor: pointer;
+    background: #fff;
+    border: 1px solid #dcdfe6;
+    border-color: #dcdfe6;
+    color: #606266;
+    -webkit-appearance: none;
+    text-align: center;
+    box-sizing: border-box;
+    outline: none;
+    margin: 0;
+    transition: .1s;
+    font-weight: 500;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    padding: 12px 20px;
+    font-size: 14px;
+    border-radius: 4px;
+    color: #fff;
+    background-color: #409eff;
+    border-color: #409eff;
+}

back/src/components/HelloWorld.vue

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

back/src/main.js

@@ -0,0 +1,20 @@
+// 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 ElementUI from 'element-ui'
+import { configure } from '@/util/http'
+
+Vue.config.productionTip = false
+
+Vue.use(ElementUI)
+configure(Vue, router, ElementUI)
+
+/* eslint-disable no-new */
+new Vue({
+  el: '#app',
+  router,
+  components: { App },
+  template: '<App/>'
+})

back/src/pages/add/index.vue

@@ -0,0 +1,164 @@
+<template>
+  <el-form ref="form" label-width="80px" class="add-frome">
+    <el-form-item label="场景名称">
+      <el-input v-model="name"></el-input>
+    </el-form-item>
+
+    <el-form-item label="配置地址">
+      <el-input v-model="url"></el-input>
+    </el-form-item>
+
+    <el-form-item label="场景文件">
+      <input id="fileFolder" name="fileFolder" type="file" webkitdirectory @change="changeHandle($event)">
+    </el-form-item>
+
+    <el-form-item label="上传状态">
+      <span>{{msg}}</span>
+    </el-form-item>
+
+    <el-form-item>
+      <el-button type="primary" @click="onSubmit" :disabled="uploading">立即创建</el-button>
+      <el-button @click="$router.back()">取消</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+<script>
+
+function onbeforeunload () {
+  let str = '上传尚未成功，关闭页面后可能导致大场景出现未知错误，确认要关闭吗？'
+  return str
+}
+
+export default {
+  data () {
+    return {
+      name: '',
+      url: '',
+      files: [],
+      msg: '暂未上传',
+      uploading: false,
+      maxUploadCount: 500
+    }
+  },
+  methods: {
+    changeHandle (ev) {
+      this.files = ev.target.files
+    },
+
+    async onSubmit () {
+      this.name = this.name.trim()
+      this.uploading = true
+
+      if (!this.name) {
+        return this.$message({
+          type: 'error',
+          message: '场景名称为必填项'
+        })
+      } else if (this.files.length === 0) {
+        return this.$message({
+          type: 'error',
+          message: '请上传场景需要的文件'
+        })
+      }
+
+      try {
+        await this.createScene()
+        await this.uploadFiles()
+        await this.tranform()
+        this.$router.back()
+      } catch (e) {
+        console.error(e)
+        this.uploading = false
+      }
+    },
+
+    async createScene () {
+      await this.$http.post('addscene', {
+        name: this.name
+      })
+
+      this.msg = '成功创建场景，准备上传'
+    },
+
+    uploadFiles (cb) {
+      let files = this.files
+      let maxCount = this.maxUploadCount
+      let currCount = 0
+      let task = []
+      let successCount = 0
+
+      return new Promise((resolve, reject) => {
+        let ctrl = () => {
+          console.log(currCount, files.length)
+          for (; task.length < maxCount && currCount < files.length; currCount++) {
+            let count = currCount
+            let index = task.length
+            task[index] = this.uploadFile(files[currCount])
+              .then(() => success(index, count))
+              .catch(() => error(index, count))
+          }
+        }
+
+        let success = (index) => {
+          ++successCount
+          let prg = (successCount / files.length) * 100
+          this.msg = `已成功上传${prg.toFixed(2)}%`
+
+          if (successCount !== files.length) {
+            task.splice(index, 1)
+            ctrl()
+          } else {
+            resolve()
+          }
+        }
+
+        let error = (index, errIndex) => {
+          task[index] = this.uploadFile(files[errIndex])
+            .then(() => success(index, errIndex))
+            .catch(() => error(index, errIndex))
+        }
+
+        ctrl()
+      })
+    },
+
+    uploadFile (file) {
+      let formData = new FormData()
+      let paths = file.webkitRelativePath.split('/')
+      paths = paths.slice(1, paths.length - 1)
+
+      formData.append('name', this.name)
+      formData.append('dir', paths.join('/'))
+      formData.append('file', file)
+
+      return this.$http.post(
+        '/uploadFile',
+        formData,
+        {'Content-Type': 'multipart/form-data'}
+      )
+    },
+
+    async tranform () {
+      this.msg = '上传成功，核心文件转换中'
+      await this.$http.post('/transform', {name: this.name, url: this.url})
+      this.msg = '转换成功，已生成场景'
+    }
+  },
+  watch: {
+    uploading (newVal) {
+      if (newVal) {
+        window.onbeforeunload = onbeforeunload
+      } else {
+        window.onbeforeunload = null
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.add-frome {
+  max-width: 560px;
+  margin: 20px auto;
+}
+</style>

back/src/pages/list/index.vue

@@ -0,0 +1,50 @@
+<template>
+  <div>
+    <router-link :to="{name: 'add'}" class="button">添加场景</router-link>
+    <div style="width: 300px; display: inline-block">
+      <el-input placeholder="输入编码生成someData" v-model="url">
+        <template slot="append">
+          <a :href="'/getSomeData?url=https://my.matterportvr.cn/api/player/models/'+url+'/?format=json'" target="_block">生成</a>
+        </template>
+      </el-input>
+    </div>
+
+    <el-table :data="scenes" style="width: 100%">
+      <el-table-column prop="name" label="场景">
+      </el-table-column>
+       <el-table-column fixed="right" label="操作" width="200">
+      <template slot-scope="scope">
+        <a :href="scope.row.query" target="_blank">查看</a>
+        <a :href="scope.row.edit" target="_blank">编辑</a>
+        <a @click="delScene(scope.row.name)" target="_blank">删除</a>
+      </template>
+    </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'list',
+  data () {
+    return {
+      scenes: [],
+      url: ''
+    }
+  },
+  async created () {
+    this.getScenes()
+  },
+  methods: {
+    async getScenes () {
+      this.scenes = (await this.$http.get('/list')).content
+    },
+    async delScene (name) {
+      if (confirm('删除后将无法恢复！你确定要删除这个场景吗?')) {
+        await this.$http.post('/delscene', {name})
+        this.getScenes()
+      }
+    }
+  }
+}
+</script>

back/src/router/index.js

@@ -0,0 +1,20 @@
+import Vue from 'vue'
+import Router from 'vue-router'
+import List from '@/pages/list'
+import Add from '@/pages/add'
+
+Vue.use(Router)
+
+export default new Router({
+  routes: [
+    {
+      path: '/',
+      name: 'List',
+      component: List
+    }, {
+      path: '/add',
+      name: 'add',
+      component: Add
+    }
+  ]
+})

back/src/util/http.js

@@ -0,0 +1,80 @@
+import axios from 'axios'
+
+// const root = '/apis'
+const root = '/'
+// 配置请求域名
+axios.defaults.baseURL = root
+
+const configure = (Vue, router, { Message }) => {
+  axios.interceptors.request.use(function (config) {
+    // config.data = qs.stringify(config.data)
+    return config
+  }, function (error) {
+    // 对请求错误做些什么
+    return Promise.reject(error)
+  })
+
+  // 配置response拦截器
+  axios.interceptors.response.use(
+    response => {
+      let data = response.data
+      let code = Number(data)
+
+      if (data.code !== 200) {
+        Message({
+          type: 'error',
+          message: data.msg
+        })
+
+        return Promise.reject(data)
+      }
+
+      switch (code) {
+        case -100:
+          break
+        case -10:
+          Message({
+            type: 'error',
+            message: '登陆状态失效，请重新登陆'
+          })
+          router.replace({
+            name: 'login'
+          })
+          break
+
+        case -101:
+          Message({
+            type: 'error',
+            message: '服务器异常，请稍后再试！'
+          })
+          break
+
+        case -102:
+          Message({
+            type: 'error',
+            message: '缺少必要参数！'
+          })
+          break
+      }
+      return data
+    },
+    error => {
+      if (error.response) {
+        switch (error.response.status) {
+          case 500:
+            Message({
+              customClass: 'system-err',
+              type: 'error',
+              message: '服务器错误!'
+            })
+            break
+        }
+      }
+      return Promise.reject(error.response.data)
+    }
+  )
+  Vue.prototype.$http = axios
+}
+
+export default axios
+export { configure, root }

back/test/e2e/custom-assertions/elementCount.js

@@ -0,0 +1,27 @@
+// A custom Nightwatch assertion.
+// The assertion name is the filename.
+// Example usage:
+//
+//   browser.assert.elementCount(selector, count)
+//
+// For more information on custom assertions see:
+// http://nightwatchjs.org/guide#writing-custom-assertions
+
+exports.assertion = function (selector, count) {
+  this.message = 'Testing if element <' + selector + '> has count: ' + count
+  this.expected = count
+  this.pass = function (val) {
+    return val === this.expected
+  }
+  this.value = function (res) {
+    return res.value
+  }
+  this.command = function (cb) {
+    var self = this
+    return this.api.execute(function (selector) {
+      return document.querySelectorAll(selector).length
+    }, [selector], function (res) {
+      cb.call(self, res)
+    })
+  }
+}

back/test/e2e/nightwatch.conf.js

@@ -0,0 +1,46 @@
+require('babel-register')
+var config = require('../../config')
+
+// http://nightwatchjs.org/gettingstarted#settings-file
+module.exports = {
+  src_folders: ['test/e2e/specs'],
+  output_folder: 'test/e2e/reports',
+  custom_assertions_path: ['test/e2e/custom-assertions'],
+
+  selenium: {
+    start_process: true,
+    server_path: require('selenium-server').path,
+    host: '127.0.0.1',
+    port: 4444,
+    cli_args: {
+      'webdriver.chrome.driver': require('chromedriver').path
+    }
+  },
+
+  test_settings: {
+    default: {
+      selenium_port: 4444,
+      selenium_host: 'localhost',
+      silent: true,
+      globals: {
+        devServerURL: 'http://localhost:' + (process.env.PORT || config.dev.port)
+      }
+    },
+
+    chrome: {
+      desiredCapabilities: {
+        browserName: 'chrome',
+        javascriptEnabled: true,
+        acceptSslCerts: true
+      }
+    },
+
+    firefox: {
+      desiredCapabilities: {
+        browserName: 'firefox',
+        javascriptEnabled: true,
+        acceptSslCerts: true
+      }
+    }
+  }
+}

back/test/e2e/runner.js

@@ -0,0 +1,48 @@
+// 1. start the dev server using production config
+process.env.NODE_ENV = 'testing'
+
+const webpack = require('webpack')
+const DevServer = require('webpack-dev-server')
+
+const webpackConfig = require('../../build/webpack.prod.conf')
+const devConfigPromise = require('../../build/webpack.dev.conf')
+
+let server
+
+devConfigPromise.then(devConfig => {
+  const devServerOptions = devConfig.devServer
+  const compiler = webpack(webpackConfig)
+  server = new DevServer(compiler, devServerOptions)
+  const port = devServerOptions.port
+  const host = devServerOptions.host
+  return server.listen(port, host)
+})
+.then(() => {
+  // 2. run the nightwatch test suite against it
+  // to run in additional browsers:
+  //    1. add an entry in test/e2e/nightwatch.conf.js under "test_settings"
+  //    2. add it to the --env flag below
+  // or override the environment flag, for example: `npm run e2e -- --env chrome,firefox`
+  // For more information on Nightwatch's config file, see
+  // http://nightwatchjs.org/guide#settings-file
+  let opts = process.argv.slice(2)
+  if (opts.indexOf('--config') === -1) {
+    opts = opts.concat(['--config', 'test/e2e/nightwatch.conf.js'])
+  }
+  if (opts.indexOf('--env') === -1) {
+    opts = opts.concat(['--env', 'chrome'])
+  }
+
+  const spawn = require('cross-spawn')
+  const runner = spawn('./node_modules/.bin/nightwatch', opts, { stdio: 'inherit' })
+
+  runner.on('exit', function (code) {
+    server.close()
+    process.exit(code)
+  })
+
+  runner.on('error', function (err) {
+    server.close()
+    throw err
+  })
+})

back/test/e2e/specs/test.js

@@ -0,0 +1,19 @@
+// For authoring Nightwatch tests, see
+// http://nightwatchjs.org/guide#usage
+
+module.exports = {
+  'default e2e tests': function (browser) {
+    // automatically uses dev Server port from /config.index.js
+    // default: http://localhost:8080
+    // see nightwatch.conf.js
+    const devServer = browser.globals.devServerURL
+
+    browser
+      .url(devServer)
+      .waitForElementVisible('#app', 5000)
+      .assert.elementPresent('.hello')
+      .assert.containsText('h1', 'Welcome to Your Vue.js App')
+      .assert.elementCount('img', 1)
+      .end()
+  }
+}

back/test/unit/.eslintrc

@@ -0,0 +1,7 @@
+{
+  "env": { 
+    "jest": true
+  },
+  "globals": { 
+  }
+}

back/test/unit/jest.conf.js

@@ -0,0 +1,30 @@
+const path = require('path')
+
+module.exports = {
+  rootDir: path.resolve(__dirname, '../../'),
+  moduleFileExtensions: [
+    'js',
+    'json',
+    'vue'
+  ],
+  moduleNameMapper: {
+    '^@/(.*)$': '<rootDir>/src/$1'
+  },
+  transform: {
+    '^.+\\.js$': '<rootDir>/node_modules/babel-jest',
+    '.*\\.(vue)$': '<rootDir>/node_modules/vue-jest'
+  },
+  testPathIgnorePatterns: [
+    '<rootDir>/test/e2e'
+  ],
+  snapshotSerializers: ['<rootDir>/node_modules/jest-serializer-vue'],
+  setupFiles: ['<rootDir>/test/unit/setup'],
+  mapCoverage: true,
+  coverageDirectory: '<rootDir>/test/unit/coverage',
+  collectCoverageFrom: [
+    'src/**/*.{js,vue}',
+    '!src/main.js',
+    '!src/router/index.js',
+    '!**/node_modules/**'
+  ]
+}

back/test/unit/setup.js

@@ -0,0 +1,3 @@
+import Vue from 'vue'
+
+Vue.config.productionTip = false

back/test/unit/specs/HelloWorld.spec.js

@@ -0,0 +1,11 @@
+import Vue from 'vue'
+import HelloWorld from '@/components/HelloWorld'
+
+describe('HelloWorld.vue', () => {
+  it('should render correct contents', () => {
+    const Constructor = Vue.extend(HelloWorld)
+    const vm = new Constructor().$mount()
+    expect(vm.$el.querySelector('.hello h1').textContent)
+      .toEqual('Welcome to Your Vue.js App')
+  })
+})

service/.vscode/launch.json

@@ -0,0 +1,14 @@
+{
+  // 使用 IntelliSense 了解相关属性。 
+  // 悬停以查看现有属性的描述。
+  // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "启动程序",
+      "program": "${workspaceFolder}\\app.js"
+    }
+  ]
+}

service/app.js

@@ -0,0 +1,32 @@
+const Koa = require('koa');
+const bodyParser = require('koa-bodyparser');
+const session = require('koa-session-minimal');
+const static = require('koa-static');
+const path = require('path');
+const sys = require('./config/sys.json');
+const router = require('./router');
+
+const app = new Koa();
+const cookie = {
+  maxAge: sys.session.max_age,
+  path: sys.session.path,
+  domain: sys.session.domain,
+  httpOnly: sys.session.http_only
+}
+
+
+app.use(bodyParser({
+  formLimit: '1000000kb',
+  jsonLimit: '1000000kb'
+}));
+app.use(session({
+  key: sys.session.key,
+  cookie: cookie
+}));
+app.use(router.routes());
+app.use(router.allowedMethods());
+app.use(static(path.join(__dirname, sys.static_dir), {handle: true}));
+
+app.listen(sys.port, () => {
+    console.log(`${sys.pro_name} is starting at port ${sys.port}`);
+});

service/config/sys.json

@@ -0,0 +1,25 @@
+{
+  "static_dir": "/static",
+  "scene_dir": "/data",
+  "session": {
+    "host": "localhost",
+    "key": "session key",
+    "path": "/",
+    "max_age": 86400000,
+    "http_only": false,
+    "domain": null
+  },
+  "mail": {
+    "service": "qq",
+    "account": "854556519@qq.com",
+    "pass": "gjoiykrnepbabebi"
+  },
+  "debug": true,
+  "pro_name": "bigscene",
+  "err_sendee": "854556519@qq.com",
+  "protocol": "http",
+  "host": "47.107.252.54:85",
+  "port": 85,
+  "scene_query": "SuperTwo/index.html",
+  "scene_edit": "/edit.html"
+}

service/intercept/error.js

@@ -0,0 +1,59 @@
+const mailSend = require('../util/mailSend');
+const sys = require('../config/sys');
+
+let api, adminMail;
+
+class OwnError extends Error {
+  constructor(msg = '', code = 400, additional = undefined) {
+    super();
+    this.msg = msg;
+    this.code = code;
+    this.additional = additional;
+  }
+}
+
+function err(msg, code, additional) {
+  throw (new OwnError(msg, code, additional));
+}
+
+async function error(ctx, next) {
+  try {
+    ctx[api] = err;
+    await next()
+  } catch (e) {
+    let body;
+
+    if (e instanceof OwnError) {
+      ctx.status = e.code
+      body = {
+        msg: e.msg,
+        content: e.additional
+      }
+    } else {
+      ctx.status = 500
+      body = {code: 500, msg: '系统发生错误，请稍后再试！'};
+
+      if (!sys.debug && adminMail) {
+        await mailSend({
+            to: adminMail,
+            subject: '4维时代错误提醒',
+            html: `<h1>${e.message}</h1><div>${e.stack ? e.stack.replace(/\n/ig, '<br>') : e}</div>`
+        });
+      } else {
+        throw e;
+      }
+    }
+
+    ctx.body = body;
+  }
+}
+
+
+function init(_api = 'error', _adminMail) {
+  api = _api;
+  adminMail = _adminMail;
+
+  return error;
+}
+
+module.exports = exports = init;

service/intercept/permission.js

@@ -0,0 +1,8 @@
+async function permission(ctx, next) {
+  if (ctx.session.user) {
+    return ctx.error('请登陆后在执行此操作!', 401);
+  }
+  await next();
+}
+
+module.exports = exports = permission;

service/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "fdageserver",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "async": "^2.6.1",
+    "busboy": "^0.2.14",
+    "koa": "^2.5.1",
+    "koa-bodyparser": "^4.2.1",
+    "koa-router": "^7.4.0",
+    "koa-session-minimal": "^3.0.4",
+    "koa-static": "^5.0.0",
+    "nodemailer": "^4.6.7",
+    "qiniu": "^7.2.1",
+    "request": "^2.88.0"
+  }
+}

service/router/data2.js

@@ -0,0 +1 @@
+{}

service/router/index.js

@@ -0,0 +1,17 @@
+const Router = require('koa-router');
+const sys = require('../config/sys.json');
+const error = require('../intercept/error');
+const router = new Router();
+const roter_modulars = [
+  require('./scene')
+];
+
+router.use(error('error', sys.err_sendee));
+// router.use(permission);
+
+
+for (modular of roter_modulars) {
+  router.use(modular.path || '', modular.router.routes(), modular.router.allowedMethods());
+}
+
+module.exports = router;

service/router/scene.js

@@ -0,0 +1,460 @@
+const Router = require('koa-router');
+const fs = require('fs');
+const path = require('path');
+const url = require('url');
+const request = require('request')
+const router = new Router();
+const sys = require('../config/sys')
+const sceneDir = path.join(__dirname, '../', sys.static_dir, sys.scene_dir)
+const uploadFile = require('../util/upload')
+const copyDir = require('../util/copydir')
+const upqiniu = require('../util/upqiniu')
+
+// 获取一个文件夹所有第一子文件夹
+function getFiles() {
+  return new Promise((resolve, reject) => {
+    fs.readdir(sceneDir, (err, files) => {
+      if (err) {
+        reject(err)
+      } else {
+        resolve(files)
+      }
+    })
+  })
+}
+
+// 删除文件夹所有文件
+function deleteFolder(dir) {
+  var files = [];
+  if (fs.existsSync(dir)) {
+    files = fs.readdirSync(dir);
+    files.forEach(function (file, index) {
+      var curPath = dir + "/" + file;
+      if (fs.statSync(curPath).isDirectory()) { // recurse
+        deleteFolder(curPath);
+      } else {
+        fs.unlinkSync(curPath);
+      }
+    });
+    fs.rmdirSync(dir);
+  }
+}
+
+// 清除一个json复合正则的字段
+function clearRgFileds(obj, rg) {
+  let type = Object.prototype.toString.call(obj)
+  if (type === '[object Object]') {
+    for (let key in obj) filter(obj[key], key)
+  } else if (type === '[object Array]') {
+    for (let i = 0; i < obj.length; i++) filter(obj[i], i)
+  }
+
+  function filter (filed, key) {
+    let filedType = Object.prototype.toString.call(obj[key])
+    if (filedType === '[object Object]' || filedType === '[object Array]') {
+      clearRgFileds(obj[key], rg)
+    } else if (filed && rg.test(filed.toString())) {
+      if (type === '[object Object]') {
+        delete obj[key]
+      } else {
+        obj.splice(key, 1)
+      }
+    }
+  }
+}
+
+
+async function savehots(hots = {}, name) {
+  let dataFile = 'data2.js'
+  let dataPath = path.join(sceneDir, name, dataFile)
+  let infoFile = 'hot/js/data.js'
+  let infoPath = path.join(sceneDir, name, infoFile)
+  let data = JSON.parse(fs.readFileSync(dataPath))
+  let hotJSON = {}
+  let infoJSON = {}
+
+  Object.keys(hots).forEach(hotKey => {
+    hotJSON[hotKey] = {
+      position: hots[hotKey].position,
+      rotation: hots[hotKey].rotation,
+      link: `//www.4dmodel.com/SuperTwo/hot_online/index.html?m=${hotKey}`
+    }
+
+    infoJSON[hotKey] = hots[hotKey].infoAttribute || ({
+      title: '',
+      content: '',
+      iframes: [],
+      modules: [],
+      images: [],
+      videos: []
+    })
+  })
+
+  data.hots = hotJSON
+
+  fs.writeFileSync(dataPath, JSON.stringify(data))
+  fs.writeFileSync(infoPath, JSON.stringify(infoJSON))
+
+  await upqiniu(name, dataFile)
+  await upqiniu(name, infoFile)
+}
+
+async function saveGuide(guides = [], name) {
+  let dataFile = 'data2.js'
+  let someFile = 'someData.json'
+  let dataPath = path.join(sceneDir, name, dataFile)
+  let somDataPath = path.join(sceneDir, name, someFile)
+  let data = JSON.parse(fs.readFileSync(dataPath));
+  let somData = JSON.parse(fs.readFileSync(somDataPath))
+  let audio = {}
+  let images = []
+
+  somData.model.images.forEach(i => i && (i.thumbnail_signed_src || images.push(i)))
+  guides.forEach(i => i.thumbnail_signed_src && images.push(i))
+  
+
+images.forEach(guide => {
+    try {
+      audio[JSON.parse(guide.metadata).scan_id] = {
+        time: 40000
+      }
+    } catch (e) {
+      
+    }
+  })
+
+  somData.model.images = images
+  data.audio = audio
+  fs.writeFileSync(somDataPath, JSON.stringify(somData))
+  fs.writeFileSync(dataPath, JSON.stringify(data))
+
+  await upqiniu(name, dataFile)
+  await upqiniu(name, someFile)
+}
+
+async function saveMusics(musics = {}, name) {
+  let dataFile = 'data2.js'
+  let dataPath = path.join(sceneDir, name, dataFile)
+  let data = JSON.parse(fs.readFileSync(dataPath));
+
+  data.tourAudio = musics
+
+  fs.writeFileSync(dataPath, JSON.stringify(data))
+  
+  await upqiniu(name, dataFile)
+}
+
+async function saveInfo(info, name) {
+  let dataFile = 'data2.js'
+  let someFile = 'someData.json'
+  let dataPath = path.join(sceneDir, name, dataFile)
+  let data = JSON.parse(fs.readFileSync(dataPath));
+  let somDataPath = path.join(sceneDir, name, someFile);
+  let somData = JSON.parse(fs.readFileSync(somDataPath));
+
+  
+  somData.model.name = info.name
+  somData.model.summary = info.summary
+  somData.model.camera_start = info.camera_start
+
+  Object.keys(info).forEach(key => {
+    somData[key] = info[key]
+  })
+
+  // somData.backgroundMusic = info.backgroundMusic
+  // somData.hoticon = info.hoticon
+  somData.loadlogo = info.loadlogo === "true" ? true : false
+
+  data.weixinDesc = info.weixinDesc
+
+  fs.writeFileSync(somDataPath, JSON.stringify(somData))
+  fs.writeFileSync(dataPath, JSON.stringify(data))
+
+  await upqiniu(name, dataFile)
+  await upqiniu(name, someFile)
+}
+
+// 添加场景
+router.post('/addscene', async ctx => {
+  let name = ctx.request.body.name
+  let files = await getFiles()
+  let index = files.findIndex(file => file === name)
+
+  if (~index) {
+    return ctx.body = {
+      msg: '该场景已存在，请更改场景名称', 
+      code: 500
+    }
+  }
+
+  await new Promise((resolve, reject) => {
+    fs.mkdir(path.join(sceneDir, name), err => {
+      if (err) {
+        reject(err)
+      } else {
+        resolve()
+      }
+    })
+  })
+  
+  ctx.body = {
+    content: '成功创建场景',
+    code: 200
+  }
+})
+
+// 删除场景
+router.post('/delscene', async ctx => {
+  let dir = path.join(sceneDir, ctx.request.body.name)
+  deleteFolder(dir)
+
+  ctx.body = {
+    code: 200
+  }
+})
+
+// 获取所有场景
+router.get('/list', async ctx => {
+  let files = await getFiles()
+
+  let content = files.map(file => {
+    let name = ''
+    try {
+      let somedata = JSON.parse(fs.readFileSync(path.join(sceneDir, file, 'someData.json')))
+      name = somedata.name || somedata.model.name
+      
+    } catch (e) {
+    }
+
+    return {
+      name: file,
+      title: name,
+      query: url.format({
+        protocol: sys.protocol,
+        host: 'www.4dmodel.com',
+        port: sys.port,
+        pathname: sys.scene_query,
+        query: {m: file}
+      }),
+      edit: url.format({
+        protocol: sys.protocol,
+        host: sys.host,
+        port: sys.port,
+        pathname: sys.scene_edit,
+        query: { m: file }
+      })
+    }
+  })
+  
+  ctx.body = {
+    content,
+    code: 200
+  }
+})
+
+// 转化运行场景需要的参数
+router.post('/transform', async ctx => {
+  let url = ctx.request.body.url
+  let modelDataUrl = path.join(sceneDir, ctx.request.body.name, 'modeldata.js')
+  let someDataUrl = path.join(sceneDir, ctx.request.body.name, 'someData.json')
+  let readFile
+  let transformData
+
+  if (fs.existsSync(someDataUrl)) {
+    readFile = 'someData.json'
+    transformData = fs.readFileSync(someDataUrl)
+  } else if (fs.existsSync(modelDataUrl)) {
+    readFile = 'modeldata.js'
+    transformData = fs.readFileSync(modelDataUrl)
+  } else {
+    transformData = await new Promise((resolve, reject) => {
+      request(url, function(err, res, body) {
+        if (err) {
+          reject(err)
+        } else {
+          resolve(body)
+        }
+      })
+    })
+
+    readFile = url
+  }
+
+  if (!transformData) {
+    return ctx.body = {
+      msg: '该场景缺少核心启动文件！',
+      code: 500
+    }
+  }
+
+  try {
+    transformData = JSON.parse(transformData)
+  } catch (e) {
+    return ctx.body = {
+      code: 500,
+      msg: readFile + '不是有效的json格式文件！'
+    }
+  }
+
+  transformData = transformSomeData(transformData)
+  transformData.model.sid = ctx.request.body.name
+
+  let hotUrl = path.join(sceneDir, ctx.request.body.name, 'hot')
+  if (!fs.existsSync(hotUrl)) {
+    await new Promise((resolve, reject) => {
+      copyDir(path.join(__dirname, '../', sys.static_dir, './hottemp'), hotUrl, resolve)
+    })
+  }
+
+  let dataPath = path.join(sceneDir, ctx.request.body.name, 'data2.js')
+  fs.writeFileSync(dataPath, '{}')
+
+  await upqiniu(ctx.request.body.name, 'data2.js')
+
+  fs.writeFileSync(someDataUrl, JSON.stringify(transformData))
+
+  await upqiniu(ctx.request.body.name, 'someData.json')
+
+  ctx.body = { code: 200 }
+})
+
+
+// 保存配置
+router.post('/savesetting', async ctx => {
+  let { name, hots, guides = [], info, tourAudio = {} } = ctx.request.body
+
+  if (!guides.length) {
+    let ret = []
+    for (let key in guides) {
+      ret.push(guides[key])
+    }
+    guides = ret
+  }
+
+  await saveGuide(guides, name)
+  await savehots(hots, name)
+  await saveInfo(info, name)
+  await saveMusics(tourAudio, name)
+
+  ctx.body = {
+    code: 200, 
+    msg: '修改成功!'
+  }
+})
+
+// 上传文件
+router.post('/uploadFile', async ctx => {
+  let result = await uploadFile(ctx, sceneDir);
+  let file = result.file.substr(('/'+result.name+'/').length);
+  let qiniuLocal = await upqiniu(result.name, file);
+
+  ctx.body = {
+    code: 200,
+    msg: '文件上传成功',
+    content: qiniuLocal
+  }
+})
+
+
+router.get('/getSomeData', async ctx => {
+  let url = ctx.request.query.url
+  let data = await new Promise((resolve, reject) => {
+    request(url, function (err, res, body) {
+      if (err) {
+        reject(err)
+      } else {
+        resolve(body)
+      }
+    })
+  })
+
+  try {
+    transformData = transformSomeData(JSON.parse(data))
+  } catch (e) {
+    return ctx.body = {
+      code: 500,
+      msg: url + '不是有效的json格式文件！'
+    }
+  }
+
+  ctx.body = transformData
+})
+
+
+
+function transformSomeData(transformData) {
+
+  if (!transformData.model) {
+    transformData = {
+      model: transformData
+    }
+    delete transformData.model.icon
+    delete transformData.model.camera_start
+    transformData.model.address = JSON.stringify(transformData.model.address)
+  }
+
+  clearRgFileds(transformData, /\/\//)
+
+  let delFileds = [
+    'enable_social_sharing', 'social_sharing_enabled', 'account_social_sharing_default',
+    'owner', 'address', 'is_vr', 'vision_version', 'created', 'unit_type', 'owner'
+  ]
+  let assigFileds = {
+    files: {
+      templates: ['data/{{number}}/{{filename}}']
+    },
+
+  }
+
+  delFileds.forEach(filed => {
+    delete transformData[filed]
+    delete transformData.model[filed]
+  })
+  Object.keys(assigFileds).forEach(filed => transformData[filed] = assigFileds[filed])
+
+  if (!transformData.model.camera_start) {
+    for (let i = 0; i < transformData.model.images.length; i++) {
+      let metadata = JSON.parse(transformData.model.images[0].metadata)
+
+      if (metadata.scan_id) {
+        transformData.model.camera_start = {
+          camera: {
+            "zoom": -1,
+            "quaternion": [
+              metadata.camera_quaternion.x,
+              metadata.camera_quaternion.y,
+              metadata.camera_quaternion.z,
+              metadata.camera_quaternion.w
+            ]
+          },
+          pano: {
+            "uuid": metadata.scan_id
+          },
+          "mode": 0
+        }
+        break;
+      }
+    }
+
+  }
+
+  let deufaltPlayer = {
+    "presented_by": true,
+    "highlight_reel": true,
+    "floor_plan": true,
+    "tour_buttons": true,
+    "dollhouse": true,
+    "fast_transitions": false,
+    "autoplay": false,
+  }
+
+  transformData.model.player_options = transformData.model.player_options || {};
+  Object.keys(deufaltPlayer).forEach(key => transformData.model.player_options[key] = deufaltPlayer[key])
+
+  transformData.model.images = [transformData.model.images[0]]
+
+  return transformData
+}
+
+
+module.exports = exports = {router};

service/static/backup/edit.html

@@ -0,0 +1,965 @@
+<!doctype html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+        <title>四维时代</title>
+        <meta name="description" content="3D camera">
+        <meta property="og:title" content="3D camera">
+        <meta property="og:description" content="3D Showcase">
+        <meta property="og:image:type" content="image/jpg">
+        <meta property="og:image:width" content="1920">
+        <meta property="og:image:height" content="1080">
+        <link rel="icon" type="image/png" sizes="32x32" href="images/icons/favicon.png" class="keep">
+		<link rel="stylesheet" href="css/oldVer/main0.css">
+        <link rel="stylesheet" href="css/main.css">
+        <link rel="stylesheet" href="css/lzb.css">
+        <script>
+        var number=window.location.href.substring(window.location.href.indexOf("=")+1);
+        if(number.indexOf("&")!=-1)
+        {
+            number = number.substring(0,number.indexOf("&"));
+        }
+        if(number.indexOf("#")!=-1)
+        {
+            number = number.substring(0,number.indexOf("#"));
+        } 
+        </script>
+        <script class="build keep">
+            // Safari and Android does not support performance.timing.navigationStart :(
+            if (window.performance) {
+                window.navigationStart = window.performance.timing.navigationStart;
+            } else {
+                window.navigationStart = Date.now() + 300;
+            }
+        </script>
+		
+    </head>
+    <body>
+        <div id="popup">
+            <div class="popup-content">
+                
+            </div>
+            <div id="closepop">close</div>
+        </div>
+		<div class="sidecontent" style="width:35%">
+			<h1><span class="side-client-close">关闭</span></h1>
+			<img id="sideimg" style="width:90%"/><br>
+			<p id="text">
+			</p>
+		</div>
+        <div id="gui-thumb" style="display: none;"></div>
+        <div id="player" style="display: none;"></div>
+        <div id="gui-parent">
+            <div id="memory-info" style="display:none; position:fixed; right:10px; top:10px; background-color:#eeeeee; color:#222222; padding:3px 10px 3px 10px; font-size:100%;">
+                GPU memory used: <span id="memory-gpu"></span>
+            </div>
+            <div id="gui-loading" class="message-outer darkGlass" style="display: none;">
+                <h2 class="model-title"></h2>
+                <div class="message-inner">
+                    <div class="progressbar" data-perc="100">
+                        <div class="label"><div class="perc">0%</div></div>
+                        <div class="bar"><span></span></div>
+                    </div>
+                    <div id="loaderCoBrand">
+                        <div class="vert-align">
+                            <!-- <p>加载中</p> -->
+                            <h2 id="loaderCoBrandName">四维时代提供技术支持</h2>
+                        </div>
+                    </div>
+                    <div class="bottom-logo">
+                        <div class="img"></div>
+                    </div>
+                    <div class="specialPower">
+                        <span class="powered-by">{[{ POWERED_BY }]}</span>
+                        &#xA0;<div class="img"></div>
+                    </div>
+                </div>
+            </div>
+            <div id="gui" style="display: none;">
+                <div class="pinTop left">
+                    <div id="model-title">
+                        <div class="title-row">
+                            <div id="title-toggle" >
+                                <a>
+                                    <i class="icon icon-dpad-left"></i>
+                                </a>
+                            </div>
+                            <div id="title-container-wrapper" rel="tooltip" data-placement="bottom" data-html="true">
+                                <div class="title-container  meta-toggle">
+                                    <div class="co-brand">
+                                        {[{ PRESENTED_BY }]}<span class="title" id="cobrandTitle"></span>
+                                    </div>
+                                    <!-- <a id="more-hint">
+                                        {[{ MORE }]}&#xA0;<i class="icon icon-dpad-down"></i>
+                                    </a> -->
+                                    <!-- <a id="less-hint">
+                                        {[{ LESS }]}&#xA0;<i class="icon icon-dpad-up"></i>
+                                    </a> -->
+                                    <div id="title-logo" >
+                                        <i ></i>
+                                    </div>
+                                    <div id="gui-name" class="titleText"></div>
+                                    <a id="more-hint"><i class="icon icon-dpad-down"></i></a>
+                                    <a id="less-hint"><i class="icon icon-dpad-up"></i></a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div id="meta-info-wrapper">
+                        <div id="meta-info" class="darkGlass">
+                            <div id="meta-description"></div>
+                            <div class="contact-info">
+                                <i class="icon icon-user pull-left"></i>
+                                &#xA0;<div id="contact-data"></div>
+                            </div>
+                            <div class="address">
+                                <i class="icon icon-pin"></i>
+                                <span id="addressTxt"></span>
+                            </div>
+                            <div id="tag-toggles" class="menu-toggles hidden">
+                                <span>{[{ MATTERTAG_CONTENT }]}</span>
+                                <div id="tag-inputs" class="menu-radios">
+                                    <div id="show-tag" class="menu-radio-show">
+                                        <input id="radio-tag-show" type="radio" name="tags" value="show">
+                                        <label for="radio-tag-show">{[{ SHOW }]}</label>
+                                    </div>
+                                    <div id="hide-tag" class="menu-radio-hide">
+                                        <input id="radio-tag-hide" type="radio" name="tags" value="hide">
+                                        <label for="radio-tag-hide">{[{ HIDE }]}</label>
+                                    </div>
+                                </div>
+                            </div>
+                            <div id="labels-toggles" class="menu-toggles hidden">
+                                <span>Labels</span>
+                                <div id="labels-inputs" class="menu-radios">
+                                    <div id="show-label" class="menu-radio-show">
+                                        <input id="radio-labels-show" type="radio" name="labels" value="show">
+                                        <label for="radio-labels-show">Show</label>
+                                    </div>
+                                    <div id="hide-label" class="menu-radio-hide">
+                                        <input id="radio-labels-hide" type="radio" name="labels" value="hide">
+                                        <label for="radio-labels-hide">Hide</label>
+                                    </div>
+                                </div>
+                            </div>
+                            <div id="share-origin" class="hidden">
+                                <hr>
+                                <div>
+                                    <i class="icon icon-ext-link"></i>
+                                    <div id="share-link-wrapper"></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="pinBottom-container">
+                    <div class="pinBottom center">
+                        <div id="view-controllers">
+                            <!-- <div id="gui-modes-dollhouse" class="darkGlass">
+                                <span class="mode">{[{ DOLLHOUSE }]}</span>
+                            </div> -->
+                            <!-- <div id="gui-modes-floorplan" class="darkGlass">
+                                <span class="mode">{[{ FLOOR_PLAN }]}</span>
+                            </div> -->
+                        </div>
+                    </div>
+                    <!-- <div class="pinBottom zoomPanel">
+                        <div id="gui-zoomin" class="buttonZoom buttonZoomIn buttonZoomEnabled" data-placement="top">
+                            <div class="buttonZoomContent">
+                                <a>
+                                    <i rel="tooltip" title="{[{ ZOOM_IN }]}" class="icon icon-plus"></i>
+                                </a>
+                            </div>
+                        </div>
+                        <div id="gui-zoomout" class="buttonZoom buttonZoomOut buttonZoomEnabled" data-placement="top">
+                            <div class="buttonZoomContent">
+                                <a>
+                                    <i rel="tooltip" title="{[{ ZOOM_OUT }]}" class="icon icon-minus"></i>
+                                </a>
+                            </div>
+                        </div>
+                    </div> -->
+                    <div class="pinBottom left">
+                        <div class="viewContainer">
+                            <!-- <div id="pullTab" class="ui-icon darkGlass">
+                                <a>
+                                    <i rel="tooltip" title="{[{ OPEN_HIGHLIGHTS }]}" class="icon icon-dpad-up"></i>
+                                </a>
+                            </div> -->
+                            <div id="previous" class="previous desktop-only ui-icon" style="display: none;">
+                                <a>
+                                    <img rel="tooltip" title="" src="images/play.png" width="24" height="24" data-original-title="播放">
+                                </a>
+                            </div>
+                            <div id="play" class="ui-icon" rel="tooltip" data-original-title="播放">
+                                <a>
+                                    <img  title="" src="images/play.png" width="24" height="24" >
+                                </a>
+                            </div>
+                            <div id="pause" class="ui-icon" style="display: none;">
+                                <a>
+                                    <img rel="tooltip" title="" src="images/pause.png" width="24" height="24" data-original-title="暂停">
+                                </a>
+                            </div>
+                            <div id="next" class="next desktop-only ui-icon wide" style="display: none;">
+                                <a>
+                                    <i rel="tooltip" title="" class="icon icon-dpad-right" data-original-title="下一个"></i>
+                                </a>
+                            </div>
+                            <!-- <div id="gui-modes-inside" class="ui-icon">
+                                <a>
+                                    <i rel="tooltip" title="{[{ EXPLORE_3D_SPACE }]}" class="icon icon-inside"></i>
+                                </a>
+                            </div> -->
+                            <!-- <div id="gui-modes-outside" class="ui-icon">
+                                <a>
+                                    <i rel="tooltip" title="{[{ VIEW_DOLLHOUSE }]}" class="icon icon-dollhouse"></i>
+                                </a>
+                            </div> -->
+                            <div id="gui-modes-map" class="ui-icon double active" >
+                                <div data-original-title="导览" id="pullTab" rel="tooltip" title="" >
+                                    <img class="icon icon-inside" src="images/auto.png" title="navigation icon" />
+                                </div>
+                                <div data-original-title="全景漫游" id="gui-modes-inside" rel="tooltip" title=""  class="">
+                                    <img class="icon icon-inside" src="images/inside.png" title="navigation icon" />
+                                </div>
+                                <div data-original-title="迷你模型" id="gui-modes-dollhouse" rel="tooltip" title="" class="" >
+                                    <img class="icon icon-inside" src="images/dollhouse.png" title="navigation icon" />
+                                </div>
+                                <div data-original-title="俯视图" id="gui-modes-floorplan" rel="tooltip" title="" >
+                                    <img class="icon icon-inside" src="images/floor.png" title="navigation icon" />
+                                </div>
+                                <div data-original-title="消除外壳" id="gui-remove-face" rel="tooltip" title="" style="display: none; float: left;">
+                                    <img class="icon icon-inside" src="images/face.jpg" title="navigation icon" />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="pinBottom right hideTarget">
+                        <div class="rightViewContainer">
+                            <div class="gui-floor">
+                                <div class="gui-floor-title"></div>
+                                <span class="gui-floor-number"></span>
+                                <i class="icon icon-dpad-up"></i>
+                                <div class="container"></div>
+                            </div>
+							<div id="volume" class="ui-icon wide">
+								<a>
+									<img src="images/Volume btn_on.png" width="24" height="24" >
+								</a>
+							</div>
+                            <div id="vr" class="ui-icon wide hidden">
+                                <a>
+                                    <i rel="tooltip" title="{[{ VIEW_IN_VR }]}" class="icon icon-webvr"></i>
+                                </a>
+                            </div>
+                            <div id="sharing" class="ui-icon wide hidden">
+                                <a>
+                                    <i rel="tooltip" title="{[{ SOCIAL_SHARING }]}" class="icon icon-share"></i>
+                                </a>
+                            </div>
+                            <div id="gui-fullscreen" class="ui-icon wide" data-placement="top" rel="tooltip" title="{[{ VIEW_FULLSCREEN }]}">
+                                <a>
+                                    <i  class="icon icon-fullscreen"></i>
+                                </a>
+                            </div>
+                            <div id="gui-fullscreen-exit" class="ui-icon wide" data-placement="top" rel="tooltip" title="{[{ EXIT_FULLSCREEN }]}"  style="display: none;">
+                                <a>
+                                    <i class="icon icon-fullscreen-exit"></i>
+                                </a>
+                            </div>
+                            <div class="pull-right terms terms2">
+                                <a>{[{ TERMS }]}</a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div id="drawer-container">
+                    <div id="drawer" class="fullWidth">
+                        <div class="frame-container darkGlass">
+                            <div id="scrollFrame" class="frame">
+                                <ul id="thumb-container" class="slidee"></ul>
+                            </div>
+                            <div class="scrollbar" id="scroller">
+                                <div class="handle"></div>
+                            </div>
+                        </div>
+                    </div>
+                    <div id="playHead">
+                        <div id="status">
+                            <span class="curIdx">1</span>
+                            of <span class="totalSteps"></span>
+                        </div>
+                        <div id="progressBar"></div>
+                    </div>
+                </div>
+                <div id="myCompany" style="width:100%;position:absolute;bottom:5px;text-align:center;line-height:1;font-size:12px;font-family: '微软雅黑';font-weight:580;color: rgba(255, 255, 255, 0.8);">
+                    四维时代提供技术支持
+                </div>
+            </div>
+            <div class="webvr-popup" style="display:none">
+                <div class="messaging">
+                    <div class="page p1">
+                        <div class="title">{[{ WEBVR_FOR_DAYDREAM }]}</div>
+                        <img class="image device-headset-side">
+                        <div class="enter-button">{[{ WEBVR_ENTER_WEBVR }]}</div>
+                        <span class="hrule"></span>
+                        <div class="alt-help">
+                            <span class="open-with-app">{[{ VR_APP_OPEN }]}</span>
+                        </div>
+                    </div>
+                    <div class="page p2 hidden">
+                        <div class="title">{[{ VR_WHAT_YOU_NEED }]}</div>
+                        <ul class="tabs">
+                            <li class="tabbutton" id="tabcardboard">{[{ VR_GOOGLE_CARDBOARD }]}</li>
+                            <li class="tabbutton" id="tabdaydream">{[{ VR_GOOGLE_DAYDREAM }]}</li>
+                            <li class="tabbutton" id="tabnative">{[{ VR_APP }]}</li>
+                        </ul>
+                        <div class="tab-content webvr">
+                            <img class="image device-headset">
+                            <span class="detail headset">
+                                <u>{[{ VR_GOOGLE_CARDBOARD }]}</u>
+                            </span>
+                            <img class="image device-phone">
+                            <span class="detail phone">
+                                <p>
+                                    <b>
+                                        <u>{[{ VR_COMPATIBLE_ANDROID }]}</u>
+                                    </b>
+                                </p>
+                                <p>{[{ VR_ANDROID_DETAIL }]}</p>
+                            </span>
+                            <div class="detail daydream-label">{[{ VR_NEED_DAYDREAM }]}</div>
+                        </div>
+                        <div class="tab-content native hidden">
+                            <div class="badge-label">{[{ VR_APP_FOR_ANDROID }]}</div>
+                            <span>
+                                <img class="image badge-cardboard">
+                                <img class="image badge-oculus">
+                            </span>
+                        </div>
+                    </div>
+                </div>
+                <div class="close">
+                    <a>
+                        <i class="icon icon-close"></i>
+                    </a>
+                </div>
+                <div class="footer">
+                    <div class="help">
+                        <a>{[{ HELP }]}</a>
+                    </div>
+                    <div>|</div>
+                    <div class="terms">
+                        <a>{[{ MATTERPORT_TERMS }]}</a>
+                    </div>
+                    <!-- <img src="images/glyph.svg"> -->
+                </div>
+            </div>
+            <div id="gui-spinner" style="display: none;">
+                <div class="gui-spinner-icon"></div>
+            </div>
+            <div id="gui-message" class="message-outer darkGlass" style="display: none;">
+                <h2 class="model-title"></h2>
+                <div class="message-inner">
+                    <div class="message-content">
+                        <a id="button-play">
+                            <i class="icon icon-play"></i>
+                        </a>
+                        <div class="explore">{[{ EXPLORE_3D_SPACE }]}</div>
+                    </div>
+                </div>
+                <div class="bottom-logo">
+                    <div class="img onlyLogo"></div>
+                </div>
+            </div>
+            <div id="share-modal">
+                <div class="title">{[{ SOCIAL_SHARING }]}</div>
+                <div id="share-outer">
+                    <div class="share-to">{[{ SHARE_TO }]}</div>
+                    <div class="share-images">
+                        <a id="facebook-share">
+                            <div class="share-button">
+                                <span class="faceBookLink">
+                                    <i class="icon icon-facebook"></i>
+                                </span>
+                            </div>
+                        </a>
+                        <a id="twitter-share">
+                            <div class="share-button">
+                                <span class="twitterLink">
+                                    <i class="icon icon-twitter"></i>
+                                </span>
+                            </div>
+                        </a>
+                        <a id="mail-share">
+                            <div class="share-button">
+                                <span class="mailLink">
+                                    <i class="icon icon-email"></i>
+                                </span>
+                            </div>
+                        </a>
+                    </div>
+                    <div class="direct-link">{[{ SHARE_LINK }]}</div>
+                    <div id="share-url">
+                        <span id="share-url-text"></span>
+                    </div>
+                    <div id="copy-success" class="hidden">
+                        <span id="copy-success-text">{[{ SHARE_COPIED }]}</span>
+                    </div>
+                </div>
+                <div id="share-close" class="close">
+                    <i class="icon icon-close"></i>
+                </div>
+            </div>
+            <div id="terms-modal" class="fadeOut">
+                <div id="terms-text"></div>
+                <div class="close">
+                    <a>
+                        <i class="icon icon-close"></i>
+                    </a>
+                </div>
+            </div>
+            <div class="gui-error message-outer" style="display: none;">
+                <div class="message-inner">
+                    <div class="message-content">
+                        <div class="error-problem-text"></div>
+                        <div class="error-solution-text"></div>
+                        <div class="error-explanation"></div>
+                        <div class="error-actions"></div>
+                    </div>
+                </div>
+            </div>
+            <div id="help-dialog" class="nav-help-dialog">
+                <div class="nav-help-elements">
+                    <div class="help-tabs">
+                        <div class="navigation-tab">
+                            <span>{[{ HELP_NAVIGATION_TAB }]}</span>
+                        </div>
+                        <div class="more-help-tab">
+                            <span>{[{ HELP_MORE_HELP_TAB }]}</span>
+                        </div>
+                    </div>
+                </div>
+                <div id="navigation-help-wrapper">
+                    <div id="navigation-help" class="help outer">
+                        <div class="interactions left">
+                            <h2 class="top-info"></h2>
+                            <img class="big-image">
+                            <hr>
+                            <div class="bottom-info"></div>
+                            <img class="keyboard">
+                        </div>
+                        <div class="interactions middle">
+                            <h2 class="top-info"></h2>
+                            <img class="big-image">
+                            <hr>
+                            <div class="bottom-info"></div>
+                            <img class="keyboard">
+                        </div>
+                        <div class="interactions right">
+                            <h2 class="top-info"></h2>
+                            <img class="big-image">
+                            <hr>
+                            <div class="bottom-info"></div>
+                            <img class="keyboard">
+                        </div>
+                    </div>
+                </div>
+                <div id="more-help-wrapper">
+                    <div id="more-help">
+                        <div class="ui-instructions more-help-hlr">
+                            <h2 class="top-info"></h2>
+                            <img class="big-image">
+                            <div class="bottom-info"></div>
+                        </div>
+                        <div class="ui-instructions more-help-tour">
+                            <h2 class="top-info"></h2>
+                            <img class="big-image">
+                            <div class="bottom-info"></div>
+                        </div>
+                        <div class="ui-instructions more-help-dollhouse">
+                            <h2 class="top-info"></h2>
+                            <img class="big-image">
+                            <div class="bottom-info"></div>
+                        </div>
+                        <div class="ui-instructions more-help-inside">
+                            <h2 class="top-info"></h2>
+                            <img class="big-image">
+                            <div class="bottom-info"></div>
+                        </div>
+                        <div class="ui-instructions more-help-360">
+                            <h2 class="top-info"></h2>
+                            <img class="big-image">
+                            <div class="bottom-info"></div>
+                        </div>
+                        <div class="ui-instructions more-help-floors">
+                            <h2 class="top-info"></h2>
+                            <img class="big-image">
+                            <div class="bottom-info"></div>
+                        </div>
+                        <div class="ui-instructions more-help-tag">
+                            <h2 class="top-info"></h2>
+                            <img class="big-image">
+                            <div class="bottom-info"></div>
+                        </div>
+                        <div class="ui-instructions more-help-vr">
+                            <h2 class="top-info"></h2>
+                            <img class="big-image">
+                            <div class="bottom-info"></div>
+                        </div>
+                        <div class="ui-instructions more-help-fullscreen">
+                            <h2 class="top-info"></h2>
+                            <img class="big-image">
+                            <div class="bottom-info"></div>
+                        </div>
+                        <div class="ui-instructions more-help-zoom">
+                            <h2 class="top-info"></h2>
+                            <img class="big-image">
+                            <div class="bottom-info"></div>
+                        </div>
+                    </div>
+                </div>
+                <div class="close">
+                    <a>
+                        <i class="icon icon-close"></i>
+                    </a>
+                </div>
+            </div>
+            <div id="vr-modal" class="vr-popup">
+                <div class="title">{[{ VR_VIEW_SPACE }]}</div>
+                <div class="outer">
+                    <div class="inner">
+                        <h3 class="vr-popup-title">
+                            <span class="show-supported p1">
+                                <p class="center">{[{ VR_SHOW_SUPPORTED }]}</p>
+                            </span>
+                            <span class="show-unsupported p1">{[{ VR_SHOW_UNSUPPORTED }]}</span>
+                            <span class="show-ios p1">
+                                {[{ VR_SHOW_IOS_1 }]}<br>
+                                <br>
+                            </span>
+                            <span class="show-ios p2">{[{ VR_WHAT_YOU_NEED }]}</span>
+                        </h3>
+                        <div class="vr-images">
+                            <div class="img-container cardboard first">
+                                <img class="vr-sm-image first">
+                                <div class="vr-img-caption first">
+                                    <span class="show-supported show-desktop show-ios p1">
+                                        <b class="cardboard">{[{ VR_GOOGLE_CARDBOARD }]}</b>
+                                        <b class="gearvr hidden">{[{ VR_SAMSUNG_GEAR_VR }]}</b>
+                                    </span>
+                                    <span class="show-supported show-unsupported show-desktop p2">{[{ VR_NEED_CARDBOARD }]}</span>
+                                    <span class="show-supported show-unsupported show-desktop p3">{[{ VR_NEED_SAMSUNG }]}</span>
+                                    <span class="show-ios p2">
+                                        <b>{[{ VR_GOOGLE_CARDBOARD }]}</b>
+                                        <br>
+                                        <br>
+                                    </span>
+                                </div>
+                            </div>
+                            <div class="front-close">
+                                <span class="front-close-x">&#x2715;</span>
+                            </div>
+                            <div class="img-container gearvr second">
+                                <img class="vr-sm-image second">
+                                <div class="vr-img-caption second">
+                                    <span class="show-supported show-desktop p1">
+                                        <b>{[{ VR_SAMSUNG_GEAR_VR }]}</b>
+                                    </span>
+                                    <span class="show-supported p2">
+                                        <p>
+                                            <b>{[{ VR_COMPATIBLE_ANDROID }]}</b>
+                                        </p>
+                                        <p>{[{ VR_ANDROID_DETAIL }]}</p>
+                                    </span>
+                                    <span class="show-desktop p2">
+                                        <p>
+                                            <b>{[{ VR_COMPATIBLE_IPHONES_1 }]}</b>
+                                        </p>
+                                        <p>{[{ VR_COMPATIBLE_IPHONES_2 }]}</p>
+                                    </span>
+                                    <span class="show-ios p2">
+                                        <p>
+                                            <b b id="vr-compatible-iphones-3">{[{ VR_COMPATIBLE_IPHONES_3 }]}</b>
+                                        </p>
+                                        <p id="vr-compatible-iphones-2b">{[{ VR_COMPATIBLE_IPHONES_2 }]}</p>
+                                    </span>
+                                    <span class="show-unsupported p1 p2">
+                                        <p>
+                                            <b>{[{ VR_COMPATIBLE_ANDROID }]}</b>
+                                        </p>
+                                        <p>{[{ VR_ANDROID_DETAIL }]}</p>
+                                    </span>
+                                    <span class="show-supported show-unsupported show-desktop p3">
+                                        <p>
+                                            <b>{[{ VR_COMPATIBLE_SAMSUNG }]}</b>
+                                        </p>
+                                        <p>{[{ VR_SAMSUNG_DETAIL }]}</p>
+                                    </span>
+                                </div>
+                            </div>
+                            <div class="img-container third">
+                                <img class="vr-sm-image third">
+                                <div class="vr-img-caption third">
+                                    <span class="show-supported show-unsupported show-ios p2">
+                                        <p>
+                                            <b>{[{ VR_APP_FOR_CARDBOARD }]}</b>
+                                        </p>
+                                        <p>
+                                            <a class="cardboardLink">{[{ VR_DOWNLOAD_HERE }]}</a>
+                                        </p>
+                                    </span>
+                                    <span class="show-desktop p2">
+                                        <p>
+                                            <b>{[{ VR_ANDROID_DVICES }]}</b>
+                                        </p>
+                                        <p>{[{ VR_ANDROID_DETAIL }]}</p>
+                                    </span>
+                                    <span class="show-supported show-unsupported p3">
+                                        <p>
+                                            <b>{[{ VR_APP_FOR_SAMSUNG }]}</b>
+                                        </p>
+                                        <p>
+                                            <a class="gearLink">{[{ VR_DOWNLOAD_HERE }]}</a>
+                                        </p>
+                                    </span>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="vr-popup-body">
+                            <span class="show-supported p1">
+                                <p>
+                                    <i>{[{ VR_REQUIRE_HEADSET }]}</i>
+                                </p>
+                                <br>
+                                <p>
+                                    <i>{[{ VR_REDIRECT_TO_STORE }]}</i>
+                                </p>
+                                <br>
+                                <p class="improper-embed hidden">
+                                    <i>{[{ VR_IMPROPER_EMBED }]}</i>
+                                </p>
+                            </span>
+                            <span class="show-ios p1">
+                                <p>
+                                    <i id="show-ios-2">{[{ VR_SHOW_IOS_2 }]}</i>
+                                </p>
+                            </span>
+                            <span class="show-desktop p1">
+                                <p></p>
+                                <h3>{[{ VR_OPEN_ANDROID_LINK }]}</h3>
+                                <p>
+                                    <br>
+                                </p>
+                                <p class="logo-button">
+                                    <span class="modelLink"></span>
+                                </p>
+                                <br>
+                                <br>
+                                <p></p>
+                                <h3>{[{ VR_ANDROID_OPTIONS }]}</h3>
+                                <p></p>
+                            </span>
+                        </div>
+                    </div>
+                    <div class="vr-buttons">
+                        <div class="next-button"></div>
+                        <div class="prev-button">{[{ VR_PREVIOUS_CAPS }]}</div>
+                        <div class="vr-arrows prev-container">
+                            <!-- <img class="prev-arrow" src="images/arrow.png"> -->
+                        </div>
+                        <div class="vr-arrows next-container">
+                            <!-- <img class="next-arrow" src="images/arrow.png"> -->
+                        </div>
+                    </div>
+                    <div class="vr-page"></div>
+                    <div class="close">
+                        <a>
+                            <i class="icon icon-close"></i>
+                        </a>
+                    </div>
+                </div>
+            </div>
+            <div id="quick-blackout" class="quick"></div>
+            <div id="quick-logo" class="quick-brand">
+                <!-- <img src="images/powered-by-4dage.svg"> -->
+            </div>
+            <div id="hover-top" class="hover-row"></div>
+            <div id="hover-bottom" class="hover-row"></div>
+            <div id="call-to-action">
+                <div id="pause-overlay">
+                    <div id="pause-icon">
+                        <a>
+                            <i class="icon icon-pause"></i>
+                        </a>
+                    </div>
+                </div>
+                <div id="interaction-modal">
+                    <div id="interaction-modal-inner">
+                        <!-- <div class="tour-title">
+                            <span class="desktop-title">{[{ DESKTOP_SHORT_CTA }]}</span>
+                            <span class="mobile-title">{[{ MOBILE_SHORT_CTA }]}</span>
+                        </div>
+                        <div class="interaction left">
+                            <h2 class="top-info"></h2>
+                            <img class="big-image">
+                            <hr>
+                            <img class="keyboard">
+                        </div>
+                        <div class="interaction middle">
+                            <h2 class="top-info"></h2>
+                            <img class="big-image">
+                            <hr>
+                            <img class="keyboard">
+                        </div>
+                        <div class="interaction right">
+                            <h2 class="top-info"></h2>
+                            <img class="big-image">
+                            <hr>
+                            <img class="keyboard">
+                        </div> -->
+                        <div class="nav-icon">
+                            <img src="images/pc_step1.png" class="icon" title="navigation icon" data-page="1">
+                            <div class="nav-help-button">
+                                <div class="next-button nav-help-page" data-id="plus" ></div>
+                                <div class="prev-button nav-help-page"></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div id="tag-billboards"></div>
+            <!--[if lte IE 9]>
+             <div class="gui-error message-outer darkGlass">
+             <div class='message-inner'>
+             <div class='message-content' style='font-family: Helvetica Neue, sans-serif;'>
+             <div class="error-problem-text">Browser not supported.</div>
+             <div class="error-solution-text">Install a new browser to explore in 3D.</div>
+             <div class="error-actions">For Matterport 3D Showcase support,
+             <a class="link" target="_blank" href="https://matterportsupport.zendesk.com/hc/en-us/articles/208220058-Showcase-System-Requirements">see our troubleshooting guide</a>
+             </div>
+             </div>
+             </div>
+             </div>
+             <![endif]-->
+        </div>
+
+        <!-- 编辑界面 -->
+        <div class="edit-wrap">
+            <div class="edit-poer-tabs" id="oper-tabs">
+                <a class="active" show-tab="hot">热点</a>
+                <a show-tab="guide">导览</a>
+                <a show-tab="info">其他</a>
+            </div>
+
+            <div class="edit-header" data-tab="hot">
+                <div id="addHot">
+                    <div>
+                        <a class="save-hot-btn">添加热点</a>
+                        <a style="display:none">输出新热点</a>
+                        <a style="display:none">添加路径</a>
+                    </div>
+                    <textarea spellcheck="false" style="display: none"></textarea>
+                </div>
+            </div>
+            <ul class="edit-bg" data-tab="hot">
+                <li class="edit-hot">
+                    <ul class="edit-hot-num">
+                    </ul>
+                </li>
+            </ul>
+
+            <div class="edit-header" data-tab="guide">
+                <div id="addHot">
+                    <div>
+                        <a style="display:none">添加热点</a>
+                        <a style="display:none">输出新热点</a>
+                        <a class="save-hot-btn">添加导览</a>
+                    </div>
+                    <textarea spellcheck="false" style="display: none"></textarea>
+                </div>
+            </div>
+
+            <ul class="edit-bg guide-list" data-tab="guide" id="guide-list">
+            </ul>
+
+            <div class="edit-bg edit-info" data-tab="info">
+                <div>
+                    <span>名称</span>
+                    <input type="text" id="info-name">
+                </div>
+                <div>
+                    <span>简介</span>
+                    <textarea id="info-summary"></textarea>
+                </div>
+                <div>
+                    <span>分享文字</span>
+                    <textarea id="share-summary"></textarea>
+                </div>
+                <div>
+                    <span>背景音乐</span>
+                    <div>
+                        <input type="file" id="upload-bgm"><p>上传音乐</p>
+                        <a target="_blank" id="query-bgm">查看</a>
+                    </div>
+                </div>
+                <div>
+                    <span>第一位置</span>
+                    <button id="camera-start">设置为当前</button>
+                </div>
+                <div>
+                    <span>热点图标</span>
+                    <select id="hoticon">
+                        <option value='{"default":"https://super.4dage.com/images/4dagePoint2.png","higt":"https://super.4dage.com/images/4dagePoint.png"}'>图标2</option>
+                        <option value='{"default":"https://super.4dage.com/images/point2.png","higt":"https://super.4dage.com/images/point2_light.png"}'>图标1</option>
+                    </select>
+                </div>
+                <div>
+                    <label><input name="loadlogo" class="editCheckbox" type="checkbox" value="loadlogo" id="loadlogo" />隐藏公司logo </label>
+                </div>
+                <div>
+                    <label><input name="g_specialScene" class="editCheckbox"  type="checkbox" value="g_specialScene" id="g_specialScene" />特殊大场景 <i class="colorRed">（请慎重选择）</i> </label>
+                </div>
+                <div>
+                    <label><input name="twoData" class="editCheckbox"  type="checkbox" value="twoData" id="twoData" />启动二代数据 <i class="colorRed">（请慎重选择）</i> </label>
+                </div>
+            </div>
+
+            <div class="edit-save">
+                <button>
+                    <span>
+                        保存
+                    </span>
+                </button>
+            </div>
+        </div>
+    
+        <div class="edit-function-wrap">
+            <div class="edit-function-con">
+                <a class="submit" id="edit-submit">保存</a>
+                <div class="edit-function-header">
+                    <a data-tab="text">文字</a>
+                    <a data-tab="image">图片</a>
+                    <a data-tab="video">视频</a>
+                    <a data-tab="module">模型</a>
+                    <a data-tab="iframe">网页</a>
+                    <a data-tab="music">音乐</a>
+                </div>
+                <div class="edit-function-body">
+
+                    <div data-label="image">
+                        <div class="edit-fun-images" type="image">
+                            <a><input type="file"></a>
+                        </div>
+                    </div>
+
+                    <div data-label="text" class="edit-fun-text">
+                        <label>
+                            <span>热点标题:</span>
+                            <input type="text" id="edit-title">
+                        </label>
+                        <label>
+                            <span>热点内容:</span>
+                            <textarea name="" id="edit-content"></textarea>
+                        </label>
+                    </div>
+
+                    <div data-label="video">
+                        <div class="fun-view-video">
+                            <video></video>
+                            <span>+</span>
+                        </div>
+                        <div class="edit-fun-images" type="video">
+                            <a><input type="file"></a>
+                        </div>
+                    </div>
+
+                    <div data-label="iframe" class="edit-fun-text">
+                        <div class="func-edit-items" id="edit-iframes">
+                            <label><span>热点网页: </span><input type="text"></label> 
+                        </div>
+                        <a class="insert-bottom" attr-label="网页">新增</a>
+                    </div>
+
+                    <div data-label="module" class="edit-fun-text">
+                        <div class="func-edit-items"id="edit-modules">
+                            <label><span>热点模型: </span><input type="text"></label>
+                        </div>
+                        <a class="insert-bottom" attr-label="模型">新增</a>
+                    </div>
+
+                    <div data-label="music" class="edit-fun-text">
+                        <div class="func-edit-items" id="edit-miusc">
+                            <label><span>背景音乐: </span><input type="file"></label>
+                            <a target="_blank">查看</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- 钟文的编辑窗口 -->
+        
+
+		<script>
+			var log = window.location.href.substring(window.location.href.indexOf("?")+1).indexOf('log')>-1;
+ 			if(log){ 
+				var textarea = document.createElement('textarea');
+				textarea.id = "consoleLog";
+				textarea.style.width="120px";
+				textarea.style.height="150px";
+				textarea.style.position="absolute";
+				textarea.style.left = "0px";
+				textarea.style.bottom = "100px";
+				textarea.style['z-index']="100";
+				textarea.style['font-size'] = "14px";
+				textarea.style.color = "black";
+				document.getElementsByTagName("body")[0].appendChild(textarea);
+				console.oldLog = console.log;
+				console.log = function(str) {
+				  console.oldLog(str);
+				  var t = document.getElementById("consoleLog").innerHTML;
+				  document.getElementById("consoleLog").innerHTML  = str +"\n" + t;
+				} 
+				
+				console.olderror = console.error;
+				console.error = function(str) {
+				  console.olderror(str);
+				  var t = document.getElementById("consoleLog").innerHTML;
+				  document.getElementById("consoleLog").innerHTML  = str +"\n" + t;
+				} 
+				
+				console.oldwarn = console.warn;
+				console.warn = function(str) {
+				  console.oldwarn(str);
+				  var t = document.getElementById("consoleLog").innerHTML;
+				  document.getElementById("consoleLog").innerHTML  = str +"\n" + t;
+				} 
+			
+				console.olddebug  = console.debug ;
+				console.debug  = function(str) {
+				  console.olddebug (str);
+				  var t = document.getElementById("consoleLog").innerHTML;
+				  document.getElementById("consoleLog").innerHTML  = str +"\n" + t;
+				} 
+			
+				console.oldinfo  = console.info ;
+				console.info  = function(str) {
+				  console.oldinfo (str);
+				  document.getElementById("consoleLog").innerHTML += str +"\n";
+				} 
+			}
+		</script>
+		 
+        <script src="js/lib/jquery-2.1.1.min.js" class="build keep"></script>
+        <script src="js/lib/player-0.0.12.min.js" class="build keep"></script>
+        <script src="js/myShow-edit.js"></script>
+        <script src="js/SpecialScene.js"></script>
+        <script src="js/manage.js"></script>
+        <script src="js/edit.js"></script>
+        <script src="js/main_2018.js"></script>
+    </body>
+	
+</html>

service/static/backup/edit.js

@@ -0,0 +1,936 @@
+
+//编辑界面
+var EditingInterface = function (n) {
+	this.n = n;
+	//功能按钮
+	this.mainBtn = $(".edit-hot-active"),
+		//创建编辑热点的功能
+		this.editHot = new EditHot(),
+		//创建二级编辑的界面
+		// this.editFun = new EditFun();
+		//初始化所有基本元素和功能
+		this.initiate();
+
+	loadInfoAttrites()
+}
+//初始化界面
+EditingInterface.prototype.initiate = function () {
+	$(".edit-wrap").fadeIn();
+	this.editHot.init(this.n);
+	this.onClick();
+	// this.editFun.init();
+}
+EditingInterface.prototype.onClick = function () {
+	var that = this;
+	this.mainBtn.on("mousedown touchstart", function () {
+		g_HotStatus = g_HotStatus == "add" ? null : "add";
+		switch (g_HotStatus) {
+			case "add":
+				$("#player").css("cursor", "cell");
+				break
+		}
+	})
+}
+
+//一级编辑界面，编辑热点的功能
+var EditHot = function () {
+	this.ele = $(".edit-hot-num"),
+		this.dataL = null,		//获取最新创建热点的索引
+		this.children = null; 	//创建的热点信息
+}
+
+EditHot.prototype.creatDom = function (index) {
+	return "<li id='ggg_s" + index + "'>"
+		+ "<div class='edit-hotTitle'>"
+		+ "<span>热点<i class='edit-hotTitle-i'></i></span>"
+		+ "<div class='edit-remHot' data-id  data-name >删除</div>"
+		+ "</div>"
+		+ "<div class='edit-content'>"
+		+ "<div class='edit-hot-data'>"
+		+ "<div>"
+		+ "<p>position:</p>"
+		+ "<p>x:<span class='edit-hot-data-p-x'></span></p>"
+		+ "<p>y:<span class='edit-hot-data-p-y'></span></p>"
+		+ "<p>z:<span class='edit-hot-data-p-z'></span></p>"
+		+ "<p>rotation:</p>"
+		+ "<p>x:<span class='edit-hot-data-r-x'></span></p>"
+		+ "<p>y:<span class='edit-hot-data-r-y'></span></p>"
+		+ "<p>z:<span class='edit-hot-data-r-z'></span></p>"
+		+ "</div>"
+		+ "<div class='edit-hot-editor'>"
+		+ '<div><span>编辑热点</span></div>'
+		+ "</div>"
+		+ "</div>"
+		+ "</div>"
+		+ "</li>"
+}
+
+//打开页面初始化编辑界面
+EditHot.prototype.init = function (n) {
+	for (var i = 0; i < g_HotMeshes.length; i++) {
+		this.ele.append(this.addHotList(g_HotMeshes, i));
+		this.fillText(i);
+		this.hotAn(i);
+		if (n) this.remHot(n, i), this.clickEdithotBtn(i);
+	}
+	document.querySelector(".edit-wrap").addEventListener("mousewheel", function (event) {
+		event.stopPropagation()
+	});
+}
+EditHot.prototype.fillText = function (index) {
+	var target = this.ele.children("#ggg_s" + index);
+	target.find(".edit-hotTitle-i").text(index + 1);
+	target.find(".edit-remHot").attr({ "data-id": g_HotMeshes[index].id, "data-name": g_HotMeshes[index].name });
+	target.find(".edit-hot-data-p-x").text(g_HotMeshes[index].position.x);
+	target.find(".edit-hot-data-p-y").text(g_HotMeshes[index].position.y);
+	target.find(".edit-hot-data-p-z").text(g_HotMeshes[index].position.z);
+	target.find(".edit-hot-data-r-x").text(g_HotMeshes[index].rotation.x);
+	target.find(".edit-hot-data-r-y").text(g_HotMeshes[index].rotation.y);
+	target.find(".edit-hot-data-r-z").text(g_HotMeshes[index].rotation.z);
+
+	if (target[0]) {
+		target[0].hotAttribute = g_HotMeshes[index]
+		target.attr('data-spid', g_HotMeshes[index].belongHot.sid)
+	}
+
+}
+EditHot.prototype.hotAn = function (index) {
+	let $li = $(".edit-hot-num > #ggg_s" + index)
+
+	$li.find('.edit-hotTitle').on("click", function () {
+		var next = $(this).next();
+		if (next.height() == 0) {
+			next.css("height", "155px");
+		} else {
+			next.css("height", "0");
+		}
+	})
+
+	$li.find('.edit-remHot').on("click", function (ev) {
+		ev.stopPropagation()
+		$li.remove()
+	})
+}
+EditHot.prototype.addHotList = function (data, index) {
+	if (!data) return;
+	this.dataL = data.length - 1;
+	this.ele.append(this.creatDom(index));
+
+	this.fillText(this.dataL);
+}
+//删除热点
+EditHot.prototype.remHot = function (index, thisScene) {
+	var deleteHot = $(".edit-remHot").eq(index), hotId, hotName;
+	deleteHot.on("click", function () {
+		hotId = $(this).attr("data-id");
+		hotName = $(this).attr("data-name");
+		for (var i = 0; i < g_HotMeshes.length; i++) {
+			if (g_HotMeshes[i].id == hotId) {
+				//在场景中删除这个热点模型
+				thisScene.sceneRenderer.scene.remove(g_HotMeshes[i]);
+				g_HotMeshes[i].visible = false;
+				//如果热点数据中有这个热点数据就删除
+				// if(g_newHot && g_newHot.hasOwnProperty(hotName)){
+				// 	delete g_newHot[hotName];
+				// }
+				g_HotMeshes.splice(i, 1);
+				console.log("删除成功：" + hotId);
+				$(this).closest("li").remove();
+			}
+		}
+
+	})
+}
+//点击编辑热点弹出二级编辑框
+EditHot.prototype.clickEdithotBtn = function (index) {
+	$("#ggg_s" + index + " .edit-hot-editor").on("click", function () {
+		showHotEdit(index)
+	})
+}
+
+//二级编辑界面，主要编辑功能，热点功能
+var EditFun = function () { }
+EditFun.prototype.init = function () {
+	this.addFun("addImg", "添加图片", this.addImg);
+	this.addFun("addText", "添加文字", this.addText);
+	this.addFun("addVideo", "添加视频", this.addVideo);
+	this.saveBtn();
+}
+//添加功能
+EditFun.prototype.addFun = function (className, text, fn) {
+	var creatDom = '<li class=edit-function-' + className + '><div><span>' + text + '</span><div></li>';
+	$(".edit-function-console").append(creatDom);
+	fn(className);
+}
+//保存按钮
+EditFun.prototype.saveBtn = function () {
+	$(".edit-function-save").on("click", function () {
+		$(".edit-function-wrap").hide();
+	})
+}
+//添加图片
+EditFun.prototype.addImg = function (className) {
+	var files = ["js/webuploader.html5only.min.js" + manage.time, "js/diyUpload.js" + manage.time, "css/diyUpload.css" + manage.time],
+		imgText = '<div id="test" ></div>';
+	$(".edit-function-" + className).attr("id", "box").append(imgText).children('div').eq(0).hide();
+	manage.LoadJs(files, function () {
+		$('#test').diyUpload({
+			url: '',
+			success: function (data) {
+				console.info(data);
+			},
+			error: function (err) {
+				console.info(err);
+			},
+			buttonText: '添加图片'
+		});
+	});
+}
+//添加文字
+EditFun.prototype.addText = function (className) {
+	var textBtn = $(".edit-function-" + className),
+		richText = '<div class="richText"><div id="toolbar">\
+			            <span>Size:</span>\
+			            <select id="size">\
+			                <option value="3">3</option>\
+			                <option value="4">4</option>\
+			                <option value="5">5</option>\
+			                <option value="6">6</option>\
+			                <option value="7">7</option>\
+			            </select>\
+			            <span>Color:</span>\
+			            <select id="color">\
+			                <option value="black" style="color:black">Black</option>\
+			                <option value="gray" style="color:gray">Gray</option>\
+			                <option value="brown" style="color:brown">Brown</option>\
+			                <option value="red" style="color:red">Red</option>\
+			                <option value="pink" style="color:pink">Pink</option>\
+			                <option value="yellow" style="color:yellow">Yellow</option>\
+			                <option value="orange" style="color:orange">Orange</option>\
+			                <option value="blue" style="color:blue">Blue</option>\
+			                <option value="Green" style="color:green">Green</option>\
+			            </select>\
+			            <span><strong>B</strong></span>\
+			            <input type="checkbox" id="bold">\
+			            <span style="text-decoration:underline">U</span>\
+			            <input type="checkbox" id="underline">\
+			        </div>\
+			       <div class="edit-F-text" contenteditable="true"></div></div>';
+	textBtn.append(richText);
+	textBtn.children("div").eq(0).on("click", function () {
+		var richTextAn = $(this).next();
+		if (richTextAn.height() == 0) {
+			richTextAn.height("350px");
+		} else {
+			richTextAn.height("0");
+		}
+	})
+	$(".edit-F-text").on("keydown", function (event) {
+		event.stopPropagation()
+	});
+	function addEvent(id, obj) {
+		$('.richText').find(id).on("change", function () {
+			$('.edit-F-text').focus();
+			switch (obj[0]) {
+				case "FontSize":
+					obj[2] = parseInt($('#size').val());
+					break;
+				case "ForeColor":
+					obj[2] = $('#color').val();
+					break;
+
+			}
+			document.execCommand(obj[0], obj[1], obj[2]);
+		});
+	}
+	addEvent("#size", ["FontSize", false]);
+	addEvent("#color", ["ForeColor", false]);
+	addEvent("#bold", ["Bold"]);
+	addEvent("#underline", ["Underline"]);
+
+}
+//添加视频
+EditFun.prototype.addVideo = function (className) {
+	console.log(className);
+}
+
+
+
+//点击屏幕判断当前处于什么编辑状态，因为需要获取场景的n对象和r对象，所有把这些方法放在main.js里点击屏幕事件里执行
+var DownInterface = function () {
+	this.editHot = new EditHot();
+}
+DownInterface.prototype.state = function (that, Hot) {
+	switch (g_HotStatus) {
+		case "add":
+			this.addHot(that, Hot, function (thisScene) {
+				this.editHot.addHotList(g_HotMeshes, g_HotMeshes.length - 1);
+				this.editHot.hotAn(this.editHot.dataL);
+				this.editHot.remHot(this.editHot.dataL, thisScene);
+				this.editHot.clickEdithotBtn(this.editHot.dataL);
+			});
+			break;
+		case "delete":
+			break;
+
+	}
+}
+
+
+
+//添加热点模型
+DownInterface.prototype.addHot = function (that, Hot, fn) {
+	var position = that.reticule.position.toArray();
+	var rotation = that.reticule.rotation.toArray().slice(0, 3);
+	var sid = g_HotMeshes.length > 0 ? "sprite_" + (parseInt(g_HotMeshes[g_HotMeshes.length - 1].name.substring(7)) + 1) : "sprite_" + g_HotMeshes.length;
+	var hot = new Hot(sid, { position: position, rotation: rotation, size: 1.05 }, that.model);
+	//g_newHot.push(hot);
+	that.model.hots[sid] = hot;
+	//$('#addHot textarea')[0].value+=('添加热点：\r"'+sid  + '":{ "position":['+position+'], "rotation":['+rotation+']},\r');
+	//logData('添加热点：\r"'+sid  + '":{ "position":['+position+'], "rotation":['+rotation+']},\r')
+	g_HotStatus = false;
+	that.mouseCouldBeClickToMove = false;
+	$("#player").css("cursor", "");
+	//添加完热点之后的回调函数
+	if (g_HotMeshes && g_newHot.length === g_newHot.length++) {
+		var thisScene = that;
+		fn && fn.call(this, thisScene);
+	}
+}
+
+// 加载所有热点的信息
+function loadInfoAttrites() {
+	$.ajax(g_Prefix + "data/" + window.number + "/hot/js/data.js" + "?" + Date.now(), { dataType: "json" })
+		.then(function (infos) {
+			Object.keys(infos).forEach(function (key) {
+				$('.edit-hot-num > li[data-spid="' + key + '"]')[0] && ($('.edit-hot-num > li[data-spid="' + key + '"]')[0].infoAttribute = infos[key])
+			})
+		})
+}
+
+(function () {
+	// 热点tab切换
+	var $heads = $('.edit-function-header a')
+	var $body = $('.edit-function-body > div')
+
+	$heads.on('click', function () {
+		$body.hide().removeClass('active');
+		$heads.removeClass('active')
+
+		$(this).addClass('active')
+		$('.edit-function-body > div[data-label="' + $(this).attr('data-tab') + '"]')
+			.show()
+			.addClass('active')
+	})
+
+	$heads.eq(0).trigger('click')
+
+
+	// 输入框阻止事件
+	$('#edit-title,#edit-content,.func-edit-items,#info-name,#info-summary,#share-summary').on('keydown', function (ev) {
+		ev.stopPropagation();
+	})
+
+
+	// 模型与网页加载
+	$('.insert-bottom').on('click', function () {
+		$(this).prev().append('<label><span>热点' + $(this).attr('attr-label') + ': </span><input type="text"></label>')
+	})
+})();
+
+
+(function () {
+	// 视频预览控制
+	var $videoLayout = $('.fun-view-video')
+	$videoLayout.find('span').on('click', function () {
+		$videoLayout.hide();
+		$videoLayout.find('video').attr('src', '')[0].pause()
+	})
+
+
+	// 图片加载回调
+	function imageSuccess(file) {
+		if (!/image\/\w+/.test(file.type)) {
+			alert("文件必须为图片！");
+			return false;
+		}
+
+		var img = new Image()
+		img.src = URL.createObjectURL(file);
+		return img
+	}
+
+	// 视频加载回调
+	function videoSuccess(file, $elayout) {
+		if (!/video\/\w+/.test(file.type)) {
+			alert("视频必须为map4格式！");
+			return false;
+		}
+
+		$elayout.append('<span class="upload-thum">上传封面<i><input type="file"></i></span>')
+
+		return '<img src="./images/play.png" class="play-video" videoURL="' + URL.createObjectURL(file) + '">'
+	}
+
+	// 视频封面回调
+	function thumSuccess(file, $elayout) {
+		if (!/image\/\w+/.test(file.type)) {
+			alert("文件必须为图片！");
+			return false;
+		}
+
+		$elayout.parent().find('img').attr('src', URL.createObjectURL(file))
+	}
+
+	// 图片与视频加载
+	function fileHandle() {
+		var $seft = $(this)
+		var $layout = $seft.parent()
+		var $elayout = $layout.parent()
+		var $pplayout = $elayout.parent()
+		var type = $pplayout.attr('type')
+		var $close = $(document.createElement('span'))
+		var file = file = this.files[0];
+		var fnc = type === 'image' ? imageSuccess :
+			type === 'video' ? videoSuccess : thumSuccess
+		var $dom = fnc(file, $elayout)
+
+
+		if (type === 'image' || type === 'video') {
+			if (!$dom) return $seft.val('')
+			$layout.append($close)
+			$layout.addClass('result')
+
+			var $addLayout = $(document.createElement('a'))
+			var $addInput = $('<input type="file">')
+			$addLayout.append($addInput)
+			var $din = $(document.createElement('div'));
+			$din.append($addLayout)
+			$elayout.parent().append($din)
+			$layout.append($dom)
+		}
+	}
+
+
+	// 图片与视频加载
+	$('.edit-fun-images').on('change', function (ev) {
+		if (ev.target.tagName.toUpperCase() === 'INPUT') {
+			fileHandle.call(ev.target)
+		}
+	})
+
+	$('.edit-fun-images').on('click', function (ev) {
+		var $tag = $(ev.target)
+		var tagName = ev.target.tagName.toUpperCase()
+		if (tagName === 'SPAN') {
+			var $resf = $(ev.target)
+			$resf.parent().parent().remove()
+		} else if (tagName === 'IMG' && $tag.hasClass('play-video')) {
+			$videoLayout
+				.css('display', 'flex')
+				.find('video')
+				.attr('src', $tag.attr('videoURL'))[0]
+				.play()
+		}
+	})
+})();
+
+function showHotEdit(index) {
+	var $layout = $(".edit-function-wrap")
+	$layout.css("display", "flex")
+	$layout[0].targetDOM = $(".edit-hot-num > li").eq(index)[0];
+	var info = $layout[0].targetDOM.infoAttribute || {}
+
+	info.title = info.title || ''
+	info.content = info.content || ''
+	info.iframe = info.iframe || []
+	info.model = info.model || []
+	info.images = info.images || []
+	info.video = info.video || []
+
+
+	var iframesHTML = info.iframe.map(function (iframe) {
+		return '<label><span>热点网页: </span><input type="text" value="' + iframe + '"></label>'
+	})
+
+	var modulesHTML = info.model.map(function (module) {
+		return '<label><span>热点模型: </span><input type="text" value="' + module + '"></label>'
+	})
+
+	var imagesHTML = info.images.map(function (image) {
+		return '<div><a class="hasHover result success"><span></span><img src="//' + image + '"></a></div>'
+	})
+
+	var videosHTML = info.video.map(function (ly) {
+		return '<div><a class="hasHover result success"><span></span><img class="play-video" videoURL="//' + ly.url + '" src="//' + ly.img + '"></a><span class="upload-thum success result" attr-thum="' + ly.img + '">上传封面<i><input type="file"></i></span></div>'
+	})
+
+	imagesHTML.push('<div><a><input type="file"></a></div>')
+	videosHTML.push('<div><a><input type="file"></a></div>')
+
+	$('#edit-iframes').html(iframesHTML.join(''))
+	$('#edit-modules').html(modulesHTML.join(''))
+	$('.edit-fun-images[type="image"]').html(imagesHTML.join(''))
+	$('.edit-fun-images[type="video"]').html(videosHTML.join(''))
+	$('#edit-title').val(info.title)
+	$('#edit-content').val(info.content)
+	if (info.backgroundMusic) {
+		$('#edit-miusc input').attr('src', info.backgroundMusic)
+		$('#edit-miusc a').show().attr('href', '//'+info.backgroundMusic)
+	} else {
+		$('#edit-miusc a').hide()
+	}
+}
+
+// 保存热点信息
+(function () {
+	var $layout = $(".edit-function-wrap")
+
+	$('#edit-submit').on('click', function () {
+		$layout.addClass('loadding')
+		var args = {}
+		var $title = $('#edit-title')
+		var $content = $('#edit-content')
+		var $images = $('.edit-fun-images[type="image"] a.result')
+		var $videos = $('.edit-fun-images[type="video"] a.result')
+		var $thums = $('.edit-fun-images[type="video"] .upload-thum')
+		var $iframes = $('#edit-iframes input')
+		var $modules = $('#edit-modules input')
+
+		new Promise(function (resolve, reject) {
+			upload($images, 'images', resolve)
+		}).then(function (imgUrls) {
+			args.images = imgUrls
+			return new Promise(function (resolve, reject) {
+				upload($videos, 'images', resolve)
+			})
+		}).then(function (videoUrls) {
+			args.video = videoUrls
+			return new Promise(function (resolve, reject) {
+				upload($thums, 'images', resolve)
+			})
+		}).then(function (thums) {
+			args.video = args.video.map(function (video, index) {
+				return {
+					url: video,
+					img: thums[index]
+				}
+			})
+		}).then(function () {
+			var $miusc = $('#edit-miusc input')
+
+			console.log($miusc)
+			if ($miusc[0].files.length > 0) {
+				return new Promise(function (resolve) {
+					upload($('#edit-miusc'), 'miusc', function(res) {
+						resolve(res[0])
+					})
+				})
+			} else {
+				return $miusc.attr('src')
+			}
+		}).then(function (src) {
+			args.backgroundMusic = src
+		})
+		.then(function () {
+			args.title = $title.val()
+			args.content = $content.val()
+
+			var iframes = []
+			for (var i = 0; i < $iframes.length; i++) {
+				var iframe = $iframes.eq(i).val()
+				iframe && iframes.push(iframe)
+			}
+			args.iframe = iframes
+
+			var modules = []
+			for (var i = 0; i < $modules.length; i++) {
+				var module = $modules.eq(i).val()
+				module && modules.push(module)
+			}
+			args.model = modules
+
+			return args
+		}).then(function (args) {
+			$layout[0].targetDOM.infoAttribute = args
+			$layout.removeClass('loadding')
+			$layout.hide()
+		})
+	})
+
+	function upload($files, type, cb) {
+		var length = $files.length
+		var rcount = 0
+		var result = []
+
+		Array.from($files).forEach(function (dFile) {
+			console.log(dFile.files)
+			var $file = $(dFile)
+			var $image = $file.find('img')
+
+			if ($file.hasClass('success')) {
+				if ($file.attr('attr-thum')) {
+					result.push($file.attr('attr-thum'))
+				} else if ($image.attr('videoURL')) {
+					result.push($image.attr('videoURL'))
+				} else {
+					result.push($image.attr('src'))
+				}
+				return success(++rcount);
+			} else {
+				dFile = $file.find('input')[0]
+			}
+
+			var file = dFile.files[0]
+			if (!file) return success(++rcount);
+
+			var formData = new FormData()
+
+			formData.append('name', number)
+			formData.append('dir', 'hot/' + type)
+			formData.append('random', true)
+			formData.append('file', file)
+
+
+			$.ajax({
+				url: '/uploadFile',
+				data: formData,
+				dataType: 'json',
+				type: 'POST',
+				cache: false,//上传文件无需缓存
+				processData: false,//用于对data参数进行序列化处理 这里必须false
+				contentType: false, //必须
+				success: function (rs) {
+					if (rs.code === 200) {
+						result.push(rs.content)
+					}
+					success(++rcount)
+				}
+			})
+		})
+
+
+		function success() {
+			if (rcount === length) {
+				cb(result)
+			}
+		}
+
+		success()
+	}
+})();
+
+
+// 上传导览
+function uploadGuide(urlData, guide) {
+	var bytes = window.atob(urlData.split(',')[1]);        //去掉url的头，并转换为byte  
+	//处理异常,将ascii码小于0的转换为大于0  
+	var ab = new ArrayBuffer(bytes.length);
+	var ia = new Uint8Array(ab);
+	for (var i = 0; i < bytes.length; i++) {
+		ia[i] = bytes.charCodeAt(i);
+	}
+
+	var blob = new Blob([ab], { type: 'image/jpeg' });
+	var formData = new FormData()
+	formData.append('name', number)
+	formData.append('dir', 'hot/images')
+	formData.append('random', true)
+	formData.append('file', blob)
+
+	$.ajax({
+		url: '/uploadFile',
+		data: formData,
+		dataType: 'json',
+		type: 'POST',
+		cache: false,//上传文件无需缓存
+		processData: false,//用于对data参数进行序列化处理 这里必须false
+		contentType: false, //必须
+		success: function (rs) {
+			if (rs.code === 200) {
+				var sid = rs.content.substring(rs.content.lastIndexOf('/') + 1, rs.content.lastIndexOf('.'))
+				var thumbnail_signed_src = rs.content
+				var args = JSON.parse("{" + guide + "}")
+
+				args.sid = sid
+				args.name = sid
+				args.thumbnail_signed_src = thumbnail_signed_src
+				args.metadata = JSON.stringify({
+					camera_mode: 0,
+					camera_position: {
+						x: args.metadata.camera_position[0],
+						y: args.metadata.camera_position[1],
+						z: args.metadata.camera_position[2]
+					},
+					camera_quaternion: {
+						x: args.metadata.camera_quaternion[3],
+						y: args.metadata.camera_quaternion[0],
+						z: args.metadata.camera_quaternion[1],
+						w: args.metadata.camera_quaternion[2]
+					},
+					ortho_zoom: -1,
+					scan_id: args.metadata.scan_id,
+					final_angle: 110,
+					is_ortho: false
+				})
+
+				console.log(args)
+
+				var $li = $('<li><span><img src="//' + args.thumbnail_signed_src + '"></span><input type="text" data-oper="change-name" value="' + args.name + '"> <a data-oper="delete">删除</a></li>')
+				$li[0].data = args
+
+				$('#guide-list').append($li)
+			}
+		}
+	})
+
+}
+
+
+// 热点 导览选项卡切换
+(function () {
+	var $heads = $('#oper-tabs a')
+	var $bodys = $(Array.from($heads).map(function ($item) {
+		return get$dom($item.getAttribute('show-tab'))
+	}).join(','))
+
+	function get$dom(attr) {
+		attr = '[data-tab="' + attr + '"]'
+		return '.edit-bg' + attr + ',.edit-header' + attr
+	}
+
+	$heads.on('click', function () {
+		var $active = $(get$dom($(this).attr('show-tab')))
+		$bodys.removeClass('active')
+		$heads.removeClass('active')
+		$(this).addClass('active')
+		$active.addClass('active')
+	}).eq(0).trigger('click');
+})();
+
+// 导览列表，并注册事件
+(function () {
+	var $list = $('#guide-list')
+
+	$.ajax(g_Prefix + "data/" + window.number + "/someData.json" + "?" + Date.now(), { dataType: "json" })
+		.done(function (data) {
+			var $lis = []
+			data.model.images.forEach(function (i) {
+				if (i.thumbnail_signed_src) {
+					var $li = $('<li><span><img src="//' + i.thumbnail_signed_src + '"></span><input type="text" data-oper="change-name" value="' + i.name + '"><a data-oper="delete">删除</a></li>')
+					$li[0].data = i
+					$lis.push($li)
+				}
+			})
+			$list.append($lis)
+
+			$.ajax(g_Prefix + "data/" + window.number + "/data2.js" + "?" + Date.now(), { dataType: "json" })
+				.done(function (data2) {
+					initInfo(data, data2)
+				})
+
+		})
+
+
+	$list.on('click', function (ev) {
+		var $seft = $(ev.target)
+		if ($seft.attr('data-oper') === 'delete') {
+			$seft.parent().remove();
+		}
+	}).on('change', function (ev) {
+		var $seft = $(ev.target)
+		if ($seft.attr('data-oper') === 'change-name') {
+			$seft.parent()[0].data.name = $seft.val()
+		}
+	}).on('keydown', function (ev) {
+		ev.stopPropagation()
+	})
+})();
+
+
+$('.edit-save button').on('click', function () {
+	var guides = Array.from($('#guide-list li')).map(function (dom) {
+		return dom.data
+	})
+	var hots = {}
+	Array.from($('.edit-hot-num > li')).forEach(function (dom) {
+		hots[dom.hotAttribute.belongHot.sid] = {
+			position: {
+				x: dom.hotAttribute.position.x,
+				y: dom.hotAttribute.position.y,
+				z: dom.hotAttribute.position.z
+			},
+			rotation: {
+				x: dom.hotAttribute.rotation.x,
+				y: dom.hotAttribute.rotation.y,
+				z: dom.hotAttribute.rotation.z
+			},
+			infoAttribute: dom.infoAttribute
+		}
+	})
+
+	var info = {
+		name: $('#info-name').val(),
+		summary: $('#info-summary').val(),
+		backgroundMusic: $('#query-bgm').attr('href'),
+		hoticon: JSON.parse($('#hoticon').val()),
+		camera_start: $('#camera-start')[0].data,
+		loadlogo: $("#loadlogo").is(':checked'),
+		special: $("#g_specialScene").is(':checked'),
+		vision_version : $("#twoData").is(':checked') ? "1.1.562.17209" : false
+	}
+
+	info.weixinDesc = $('#share-summary').val();
+	$.ajax({
+		method: 'POST',
+		url: '/savesetting',
+		data: {
+			hots: hots,
+			name: number,
+			guides: guides,
+			info: info
+		},
+		success: function (data) {
+			if (data.code === 200) {
+				alert('修改成功')
+				location.reload()
+			}
+		}
+	})
+});
+
+
+
+
+
+// 其他信息初始化
+function initInfo(data, data2) {
+	var $options = $('#hoticon option');
+	var $loadlogo = $("#loadlogo");
+	var $g_specialScene = $("#g_specialScene");
+	var $twoData = $("#twoData");
+
+	$('#info-name').val(data.model.name)
+	$('#info-summary').val(data.model.summary)
+	$('#share-summary').val(data2.weixinDesc)
+
+	for (var i = 0; i < $options.length; i++) {
+		if ($options.eq(i).val() === JSON.stringify(data.hoticon)) {
+			$options.eq(i).attr("selected", true);
+		}
+	}
+
+	if (data.backgroundMusic) {
+		$('#query-bgm').attr('href', '//' + data.backgroundMusic)
+		$('#upload-bgm + p').html('替换音乐')
+	} else {
+		$('#query-bgm').hide()
+		$('#upload-bgm + p').html('上传音乐')
+	}
+
+	$('#camera-start')[0].data = data.model.camera_start;
+
+	//隐藏公司logo
+	if (data.loadlogo) {
+		$loadlogo[0].checked = true
+		showLogo();
+	}
+
+	//特殊大场景
+	if (data.special === "true" || data.model.special) {
+		$g_specialScene[0].checked = true 
+	}
+
+	//启动二代的数据
+	if (data.vision_version === "1.1.562.17209" || data.model.vision_version) {
+		$twoData[0].checked = true 
+	}
+	
+
+}
+
+
+
+// 音乐上传
+$('#upload-bgm').on('change', function () {
+	var file = this.files[0];
+	if (!/audio\/\w+/.test(file.type)) {
+		alert("文件必须为音乐！");
+		return false;
+	}
+
+	var formData = new FormData()
+	formData.append('name', number)
+	formData.append('dir', 'audio')
+	formData.append('random', true)
+	formData.append('file', file)
+
+	$.ajax({
+		url: '/uploadFile',
+		data: formData,
+		dataType: 'json',
+		type: 'POST',
+		cache: false,//上传文件无需缓存
+		processData: false,//用于对data参数进行序列化处理 这里必须false
+		contentType: false, //必须
+		success: function (rs) {
+			if (rs.code === 200) {
+				$('#query-bgm').attr('href', rs.content)
+				$('#upload-bgm + p').html('替换音乐')
+			}
+		}
+	})
+})
+
+// 修改场景名称  添加初始位置   添加背景音乐  修改导览得名称 
+
+function getSeft(seft) {
+	$('#camera-start').on('click', function () {
+		var snap = JSON.parse("{" + seft.getSnapAngleInfo() + "}")
+		this.data.camera.quaternion = snap.metadata.camera_quaternion
+		this.data.pano.uuid = snap.metadata.scan_id
+	})
+}
+
+
+
+
+
+
+
+
+
+
+function editHotPanel() {//如果是编辑状态
+	$('#addHot').css("display", "block");
+
+	$('#addHot>div a:nth-child(1)').on("click", function () {//点击添加热点
+		g_HotStatus = "add";
+		$("#player").css("cursor", "cell");
+	})
+
+	$('#addHot>div a:nth-child(2)').on("click", function () {//点击输出新热点
+		var str = ""
+		for (var i = 0; i < g_newHot.length; i++) {
+			str += ('"' + g_newHot[i].sid + '":{ "position":[' + g_newHot[i].position + '], "rotation":[' + g_newHot[i].rotation + ']},\r');
+		}
+		if (str == "") logData("没有添加新热点")
+		else logData(str)
+	})
+
+	$('#addHot>div a:nth-child(3)').on("click", function () {//点击截取视图
+		var ev = document.createEvent("MouseEvent");//"MouseEvent"
+		ev.initMouseEvent("snapshotBegin", true, true, document.defaultView, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
+		window.dispatchEvent(ev);
+	})
+
+
+	$('#addHot textarea').on("mousewheel", function (e) {
+		e.stopPropagation();
+	})
+	
+	window.logData = function (v) {
+		$('#addHot textarea')[0].value += (v + "\r");
+		$('#addHot textarea')[0].scrollTop = $('#addHot textarea')[0].scrollHeight;
+	}
+}

service/static/backup/lzb.css

@@ -0,0 +1,576 @@
+
+
+/*钟文的编辑窗口*/
+.edit-poer-tabs{ 
+    width: 100%;
+    pointer-events: all;
+    cursor: pointer;
+    color: #fefefe;
+    z-index:999;
+    display: flex;
+} 
+.edit-poer-tabs a{
+    line-height: 50px;
+    flex: 1;
+    text-align: center;
+    background: #ededed;
+    color: #000;
+    border-right: 1px solid #fff;
+    transition: all 0.2s;
+}
+
+.edit-poer-tabs a.active {
+    background-color: rgba(83,220,255,.7);
+    color: #333
+}
+
+#addHot a:hover{ 
+    background: #4c90eb; 
+    color:#fff;
+}
+#addHot textarea{
+    width:100%; 
+    resize: vertical; 
+    height:300px;
+    color: #444;
+    font-size: 14px;
+    padding: 4px;
+    word-wrap: break-word;
+    white-space: nowrap;
+    font-weight: bold;
+    opacity:0.9;
+}
+
+#addHot > div {
+    display: flex;
+}
+
+.save-hot-btn {
+    background-color: rgba(83,220,255,.7);
+    color: #333;
+    height: 50px;
+    line-height: 50px;
+    text-align: center;
+    cursor: pointer;
+    flex: 1;
+}
+
+.edit-header {
+    margin: 5px 0;
+}
+
+.edit-header,.edit-bg {
+    display: none
+}
+
+.edit-header.active,.edit-bg.active {
+    display: block
+}
+
+.guide-list li {
+    display: flex;
+    margin-bottom: 5px;
+    justify-content: space-between;
+    align-items: center;
+    background: rgba(83,220,255,.7);
+    padding: 5px;
+}
+
+.guide-list li input {
+    color: #333;
+    background: transparent;
+    border: none;
+    border-bottom: 1px solid #333;
+    font-size: 16px;
+    outline: none;
+    width: 50%;
+    text-align: center;
+}
+
+.guide-list span {
+    width: 100px;
+    height: auto;
+    flex: 0 0 auto;
+}
+
+.guide-list span img {
+    width: 100%;
+}
+
+.guide-list a {
+    flex: 0 0 auto;
+    font-size: 14px;
+    color: #333;
+}
+
+.edit-info {
+    color: #333;
+    display: none;
+    padding: 15px;
+}
+
+.edit-info.active {
+    display: block;
+}
+
+.edit-info > div {
+    display: flex;
+    margin-bottom: 25px;
+    overflow: hidden;
+    align-items: center;
+}
+
+.edit-info > div span {
+    flex: 0 0 80px;
+    color: inherit;
+    padding-right: 15px;
+}
+
+.edit-info > div > input, .edit-info div > button {
+    flex: 1;
+    color: inherit;
+}
+
+.edit-info > div > textarea {
+    border: 1px solid #333;
+    flex: 1;
+    height: 100px;
+    padding: 10px;
+}
+
+.edit-info > div > input {
+    border: none;
+    border-bottom: 1px solid #333;
+    line-height: 30px;
+    outline: none;
+    text-align: center;
+}
+
+.edit-info > div > select {
+    height: 36px;
+    border: 1px solid #333;
+    flex: 1;
+}
+
+.edit-info > div input[type="file"] {
+    opacity: 0;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+    cursor: pointer;
+}
+
+.edit-info > div div {
+    position: relative;
+    flex: 1;
+}
+
+.edit-info > div p {
+    line-height: 30px;
+    color: inherit;
+    text-align: center;
+    flex: 1;
+}
+
+.edit-info > div a {
+    position: absolute;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    width: 40px;
+    text-align: center;
+    cursor: pointer;
+    color: #00a2d4;
+    line-height: 30px;
+    z-index: 5;
+}
+
+ /*edit*/
+ .edit-wrap {
+    position: absolute;
+    display: none;
+    width: 320px;
+    height: 94%;
+    min-height: 500px;
+    background: rgba(255,255,255,1);
+    right: 0;
+    top: 0;
+    overflow-y: scroll;
+}
+ul.edit-bg{
+    background: rgba(245,245,245,0.9);
+    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+}
+.edit-hot .edit-hot-active {
+    display: inline-block;
+    height: 80px;
+    margin: 4%;
+    background: rgba(255,255,255,0.8);
+    border: 3px solid rgba(83,220,255,.2);
+    width: 92%;
+    position: relative;
+    overflow:hidden;
+}
+.edit-hot .edit-hot-active span {
+    color: #000;
+    font-size: 25px;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%,-50%);
+    letter-spacing: 2px;
+}
+.edit-hot-active:after{
+    content:"";
+    height: 100%;
+    width: 100%;
+    display: block;
+    background: rgba(0,0,0,0.5);
+    position: absolute;
+    top: 100%;
+}
+
+.edit-hot-active:before{
+    content:"+";
+    display: flex;
+    height: 60px;
+    width: 60px;
+    border: solid 5px #fff;
+    border-radius: 30px;
+    font-size: 30px;
+    position: absolute;
+    justify-content: center;
+    align-items: center;
+    font-weight: bold;
+    left: 0;
+    right: 0;
+    margin: auto;
+    top: 0;
+    bottom: 0;
+    opacity: 0;
+}
+ .edit-add-hot:hover  .edit-hot-active:after{  top:0; transition:top 0.3s  cubic-bezier(0.68, -0.55, 0.265, 1.55)}
+ .edit-add-hot:hover  .edit-hot-active:before{ opacity: 1; z-index: 2; color:#fff; }
+.followMouse{ position: absolute; text-shadow:0 0 5px #333; color: #fff; font-weight: bold; font-size: 18px;}
+.edit-hot-num{ overflow-x: hidden; color:#333;  }
+.edit-hotTitle{ display: flex; justify-content: space-between; cursor: pointer; background: rgba(83,220,255,.7); height: 30px; padding: 0 4%; line-height: 30px; margin-bottom: 5px;}
+.edit-content{  height: 0;  overflow:hidden; transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
+.edit-hot-data{ display:flex; justify-content: space-between;  }
+.edit-hot-data > div{ max-width:60%; }
+.edit-hot-data p{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
+.edit-hot-editor{ width: 40%; background :rgba(83,220,255,.4);}
+.edit-hot-editor > div{ height: 80%; margin: 10%;background: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; cursor: pointer;}
+.edit-hot-editor > div:hover{ color: rgba(83,220,255,.7); }
+.edit-remHot:hover{ color: red; }
+.edit-save, .edit-function-save {height: 6%; background: rgba(83,220,255,.2); cursor: pointer; }
+.edit-save button, .edit-function-save button{ background: #fff; border: 0; width:92%; margin: 2% 4%; height: 40px;  }
+.edit-save button span, .edit-function-save button span{ color: #000; font-size: 16px; }
+
+/*edit-function*/
+.edit-function-wrap{ position: fixed; z-index: 100; width: 100%; height: 100%; top: 0; left: 0; display: none; justify-content: center; align-items: center;
+    /* display: none; */
+}
+.edit-function-con{ width: 90%; height: 90%;  display: flex; justify-content: space-between;}
+.edit-function-right{ width: 20%; border: 1px solid rgba(83,220,255,.7); background: #f5f5f5;}
+.edit-function-console{ height: 94%; }
+.edit-function-console >li{ flex-direction: column; padding: 3px; background: rgba(83,220,255,.2); color: #000; display:flex; justify-content: center; align-items: center;}
+.edit-function-console >li > div:first-child,.webuploader-pick{ width: 90%; height: 80%; background: #fff; text-align: center; line-height: 31px; font-size: 20px; cursor: pointer;}
+.webuploader-container{position: relative;}
+.webuploader-pick{height: 30px; width: 300px;}
+.edit-function-left{ width: 80%; background: rgba(52,52,52,0.8); overflow-x: hidden;}
+.edit-F-img{ height: 300px; text-align: center;}
+.edit-F-img img{ height: 100%; max-width: 100%; }
+.edit-function-console li div:first-child:hover{background: #00a2d4;}
+.edit-F-text{ background: #fff; color: #000; height: 300px; width: 100%; margin-top: 5px; max-width: 333px;}
+.richText{height: 0; overflow: hidden; transition: all 0.3s;}
+
+.edit-function-wrap.loadding::after {
+    content: '';
+    background: url('../images/loadding.gif') no-repeat center center;
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    color: #fff;
+    background-color: rgba(0,0,0,0.9);
+}
+
+.edit-function-con {
+    flex-direction: column;
+    position: relative;
+}
+
+.submit {
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 100px;
+    height: 40px;
+    background-color: #fff;
+    text-decoration: none;
+    font-size: 16px;
+    color: #222;
+    line-height: 40px;
+    text-align: center;
+}
+
+.submit:hover {
+    background-color: #00a2d4;
+    color: #fff !important;
+}
+
+.edit-function-header {
+    height: 40px;
+    flex: 0 0 auto;
+}
+
+.edit-function-header a {
+    float: left;
+    width: 100px;
+    height: 100%;
+    text-align: center;
+    background-color: #fff;
+    text-decoration: none;
+    font-size: 14px;
+    color: #222;
+    line-height: 40px;
+    margin-right: 15px;
+}
+
+
+.edit-function-header a:hover,
+.edit-function-header a.active {
+    background: #00a2d4;
+    color: #fff;
+}
+
+.edit-function-body {
+    flex: 1;
+    background: rgba(0,0,0,0.9);
+}
+
+.edit-function-body > div {
+    width: 100%;
+    height: 100%;
+    padding: 20px;
+}
+
+.edit-function-body > div.activve {
+    display: block;
+}
+
+.edit-fun-images {
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+}
+
+.edit-fun-images > div {
+    display: inline-block;
+    vertical-align: top;
+}
+
+.edit-fun-images .upload-thum {
+    display: block;
+    position: relative;
+    text-align: center;
+}
+
+.edit-fun-images a {
+    width: 100px;
+    height: 100px;
+    border: 1px dashed #fff;
+    color: #fff;
+    text-align: center;
+    position: relative;
+    display: inline-block;
+    margin: 10px;
+    line-height: 90px;
+    font-size: 30px;
+    font-weight: 300;
+}
+
+.edit-fun-images a::after {
+    content: '+'
+}
+
+.edit-fun-images input {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    z-index: 1;
+    cursor: pointer;
+}
+
+.edit-fun-images a.result::after {
+    content: ''
+}
+
+.edit-fun-images a.result > input {
+    z-index: -1;
+}
+
+.edit-fun-images a.result > img {
+    max-width: 100%;
+    max-height: 100%;
+}
+
+.edit-fun-images a.result > span {
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 20px;
+    height: 20px;
+    line-height: 20px;
+    transform: rotateZ(45deg)
+}
+
+.edit-fun-images a.result > span::after {
+    content: '+'
+}
+
+.edit-fun-text {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.edit-fun-text label {
+    display: block;
+    padding-left: 80px;
+    position: relative;
+    margin-bottom: 20px;
+    max-width: 500px;
+    width: 100%;
+}
+
+.edit-fun-text label span {
+    position: absolute;
+    left: 0;
+    top: 0;
+    line-height: 30px;
+}
+
+.edit-fun-text label input {
+    width: 100%;
+    line-height: 30px;
+    border-radius: 4px;
+    height: 30px;
+    border: 1px solid #c2c2c2;
+    color: #222;
+}
+
+
+.edit-fun-text label textarea {
+    width: 100%;
+    color: #222;
+    height: 300px;
+}
+
+.fun-view-video {
+    position: fixed;
+    z-index: 99999;
+    width: 100%;
+    height: 100%;
+    background: rgba(0,0,0,0.9);
+    /* display: flex; */
+    align-items: center;
+    justify-content: center;
+    left: 0;
+    top: 0;
+    display: none;
+}
+
+.fun-view-video span {
+    position: absolute;
+    right: 0;
+    top: 0;
+    transform: rotate(45deg);
+    font-size: 40px;
+    font-weight: 300;
+    color: #fff;
+    cursor: pointer;
+}
+
+.fun-view-video video {
+    max-width: 90%;
+    max-height: 90%;
+}
+
+.func-edit-items {
+    max-width: 500px;
+    width: 100%;
+}
+
+.insert-bottom {
+    display: inline-block;
+    line-height: 1;
+    white-space: nowrap;
+    cursor: pointer;
+    background: #fff;
+    border: 1px solid #dcdfe6;
+    border-color: #dcdfe6;
+    color: #606266;
+    -webkit-appearance: none;
+    text-align: center;
+    box-sizing: border-box;
+    outline: none;
+    margin: 0;
+    transition: .1s;
+    font-weight: 500;
+    color: #fff !important;
+    background-color: #409eff;
+    border-color: #409eff;
+    padding: 12px 20px;
+    font-size: 14px;
+    border-radius: 4px;
+}
+
+.editable, .display {
+    resize: vertical;
+    overflow: auto;
+    border: 1px solid silver;
+    border-radius: 5px;
+    min-height: 400px;
+    padding: 1em;
+    margin-top: 20px;
+}
+#toolbar {
+    margin-top: 5px;
+    border: 1px solid silver;
+    padding: 5px;
+    background-color: #F2F2F2;
+    border-radius: 5px;
+}
+
+.editable {
+    box-shadow: inset 0 0 10px silver;
+}
+
+.webuploader-element-invisible {
+    position: absolute !important;
+    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
+    clip: rect(1px,1px,1px,1px);
+}
+.webuploader-pick-hover {
+    background: #00a2d4;
+}
+.webuploader-pick-disable {
+    opacity: 0.6;
+    pointer-events:none;
+}
+li{ display: block; }
+.editCheckbox{
+    vertical-align: middle;
+    margin-right: 10px;
+}
+.edit-bg .colorRed{
+    color: red;
+}

service/static/css-bak/cropper.min.css

@@ -0,0 +1,252 @@
+/*!
+ * Cropper v3.1.3
+ * https://github.com/fengyuanchen/cropper
+ *
+ * Copyright (c) 2014-2017 Chen Fengyuan
+ * Released under the MIT license
+ *
+ * Date: 2017-10-21T10:03:37.133Z
+ */.cropper-container {
+ direction:ltr;
+ font-size:0;
+ line-height:0;
+ position:relative;
+ -ms-touch-action:none;
+ touch-action:none;
+ -webkit-user-select:none;
+ -moz-user-select:none;
+ -ms-user-select:none;
+ user-select:none
+}
+.cropper-container img {
+ display:block;
+ height:100%;
+ image-orientation:0deg;
+ max-height:none!important;
+ max-width:none!important;
+ min-height:0!important;
+ min-width:0!important;
+ width:100%
+}
+.cropper-canvas,.cropper-crop-box,.cropper-drag-box,.cropper-modal,.cropper-wrap-box {
+ bottom:0;
+ left:0;
+ position:absolute;
+ right:0;
+ top:0
+}
+.cropper-canvas,.cropper-wrap-box {
+ overflow:hidden
+}
+.cropper-drag-box {
+ background-color:#fff;
+ opacity:0
+}
+.cropper-modal {
+ background-color:#000;
+ opacity:.5
+}
+.cropper-view-box {
+ display:block;
+ height:100%;
+ outline-color:rgba(51,153,255,.75);
+ outline:1px solid #39f;
+ overflow:hidden;
+ width:100%
+}
+.cropper-dashed {
+ border:0 dashed #eee;
+ display:block;
+ opacity:.5;
+ position:absolute
+}
+.cropper-dashed.dashed-h {
+ border-bottom-width:1px;
+ border-top-width:1px;
+ height:33.33333%;
+ left:0;
+ top:33.33333%;
+ width:100%
+}
+.cropper-dashed.dashed-v {
+ border-left-width:1px;
+ border-right-width:1px;
+ height:100%;
+ left:33.33333%;
+ top:0;
+ width:33.33333%
+}
+.cropper-center {
+ display:block;
+ height:0;
+ left:50%;
+ opacity:.75;
+ position:absolute;
+ top:50%;
+ width:0
+}
+.cropper-center:after,.cropper-center:before {
+ background-color:#eee;
+ content:" ";
+ display:block;
+ position:absolute
+}
+.cropper-center:before {
+ height:1px;
+ left:-3px;
+ top:0;
+ width:7px
+}
+.cropper-center:after {
+ height:7px;
+ left:0;
+ top:-3px;
+ width:1px
+}
+.cropper-face,.cropper-line,.cropper-point {
+ display:block;
+ height:100%;
+ opacity:.1;
+ position:absolute;
+ width:100%
+}
+.cropper-face {
+ background-color:#fff;
+ left:0;
+ top:0
+}
+.cropper-line {
+ background-color:#39f
+}
+.cropper-line.line-e {
+ cursor:e-resize;
+ right:-3px;
+ top:0;
+ width:5px
+}
+.cropper-line.line-n {
+ cursor:n-resize;
+ height:5px;
+ left:0;
+ top:-3px
+}
+.cropper-line.line-w {
+ cursor:w-resize;
+ left:-3px;
+ top:0;
+ width:5px
+}
+.cropper-line.line-s {
+ bottom:-3px;
+ cursor:s-resize;
+ height:5px;
+ left:0
+}
+.cropper-point {
+ background-color:#39f;
+ height:5px;
+ opacity:.75;
+ width:5px
+}
+.cropper-point.point-e {
+ cursor:e-resize;
+ margin-top:-3px;
+ right:-3px;
+ top:50%
+}
+.cropper-point.point-n {
+ cursor:n-resize;
+ left:50%;
+ margin-left:-3px;
+ top:-3px
+}
+.cropper-point.point-w {
+ cursor:w-resize;
+ left:-3px;
+ margin-top:-3px;
+ top:50%
+}
+.cropper-point.point-s {
+ bottom:-3px;
+ cursor:s-resize;
+ left:50%;
+ margin-left:-3px
+}
+.cropper-point.point-ne {
+ cursor:ne-resize;
+ right:-3px;
+ top:-3px
+}
+.cropper-point.point-nw {
+ cursor:nw-resize;
+ left:-3px;
+ top:-3px
+}
+.cropper-point.point-sw {
+ bottom:-3px;
+ cursor:sw-resize;
+ left:-3px
+}
+.cropper-point.point-se {
+ bottom:-3px;
+ cursor:se-resize;
+ height:20px;
+ opacity:1;
+ right:-3px;
+ width:20px
+}
+@media (min-width:768px) {
+ .cropper-point.point-se {
+  height:15px;
+  width:15px
+ }
+}
+@media (min-width:992px) {
+ .cropper-point.point-se {
+  height:10px;
+  width:10px
+ }
+}
+@media (min-width:1200px) {
+ .cropper-point.point-se {
+  height:5px;
+  opacity:.75;
+  width:5px
+ }
+}
+.cropper-point.point-se:before {
+ background-color:#39f;
+ bottom:-50%;
+ content:" ";
+ display:block;
+ height:200%;
+ opacity:0;
+ position:absolute;
+ right:-50%;
+ width:200%
+}
+.cropper-invisible {
+ opacity:0
+}
+.cropper-bg {
+ background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC")
+}
+.cropper-hide {
+ display:block;
+ height:0;
+ position:absolute;
+ width:0
+}
+.cropper-hidden {
+ display:none!important
+}
+.cropper-move {
+ cursor:move
+}
+.cropper-crop {
+ cursor:crosshair
+}
+.cropper-disabled .cropper-drag-box,.cropper-disabled .cropper-face,.cropper-disabled .cropper-line,.cropper-disabled .cropper-point {
+ cursor:not-allowed
+}
+/*# sourceMappingURL=cropper.min.css.map */

service/static/css-bak/diyUpload.css

@@ -0,0 +1,129 @@
+@charset "utf-8";
+/* CSS Document*/
+.parentFileBox {
+	width:auto;
+	height:auto;
+	overflow:hidden;
+	position:relative;
+}
+.parentFileBox>.fileBoxUl {
+	position:relative;
+	width:100%;
+	height:auto;
+	overflow:hidden;
+	padding-bottom:5px;
+}
+.parentFileBox>.fileBoxUl>li {
+	float:left;
+	border:1px solid #09F;
+	border-radius:5px;
+	width:95px;
+	height:95px;
+	margin-top:5px;
+	margin-left:5px;
+	overflow:hidden;
+	position:relative;
+	background-color:#099;
+}
+.parentFileBox>.fileBoxUl>li>.viewThumb {
+	position:absolute;
+	top:0;
+	left:0;
+	width:95px;
+	height:95px;
+	overflow:hidden;
+}
+.parentFileBox>.fileBoxUl>li>.viewThumb>img {
+	width:100%;
+	height:100%;
+}
+.parentFileBox>.fileBoxUl>li>.diyCancel,.parentFileBox>.fileBoxUl>li>.diySuccess {
+	position:absolute;
+	width:20px;
+	height:20px;
+	top:2px;
+	right:2px;
+	cursor:pointer;
+	display:none;
+	background-size: 100% !important; 
+}
+.parentFileBox>.fileBoxUl>li>.diyCancel {
+	background:url(../images/edit/x_alt.png) left top no-repeat;
+}
+.parentFileBox>.fileBoxUl>li>.diySuccess {
+	background:url(../images/edit/check_alt.png)  left top  no-repeat;
+	cursor:default;
+}
+.parentFileBox>.fileBoxUl>li>.diyFileName {
+	position:absolute;
+	bottom:0px;
+	left:0px;
+	width:100%;
+	height:15px;
+	line-height:15px;
+	text-align:center;
+	color:#fff;
+	font-size:12px;
+	display:none;
+	background:url(../images/edit/bgblack.png);
+}
+.parentFileBox>.fileBoxUl>li>.diyBar {
+	top:0;
+	left:0;
+	position: absolute;
+	width: 95px;
+	height: 95px;
+	line-height:150px;
+	background:url(../images/edit/bgblack.png);
+	display:none;
+}
+.parentFileBox>.fileBoxUl>li>.diyBar>.diyProgressText {
+	font-size:14px;
+	text-align:center;
+	color:#FFF;
+	position:relative;
+	z-index:99;
+}
+.parentFileBox>.fileBoxUl>li>.diyBar>.diyProgress {
+	position:absolute;
+	left:0;
+	top:42%;
+	height:24px;
+	width:100%;
+	background-color:#09F;
+	filter:alpha(opacity=70);
+	-moz-opacity:0.7;
+	opacity:0.7;
+	z-index:97;
+}
+.parentFileBox>.diyButton {
+	width:100%;
+	margin-top:5px;
+	margin-bottom:5px;
+	height:20px;
+	line-height:20px;
+	text-align:center;
+}
+.parentFileBox>.diyButton>a {
+	padding:5px 10px 5px 10px;
+	background-color:#09C;
+	color:#FFF;
+	font-size:12px;
+	text-decoration:none;
+	border-radius:3px;
+}
+.parentFileBox>.diyButton>a:hover {
+	background-color:#0CC;
+	color:#F30;
+}
+.parentFileBox>.fileBoxUl>li:hover {
+	-moz-box-shadow: 3px 3px 4px #ccc;
+	-webkit-box-shadow: 3px 3px 4px #ccc;
+	box-shadow: 3px 3px 4px #ccc;
+}
+.parentFileBox>.fileBoxUl>.diyUploadHover:hover .diyCancel {
+	display:block;
+}
+.parentFileBox>.fileBoxUl>li:hover .diyFileName {
+	display:block;
+}

service/static/css-bak/oldVer/main0.css

@@ -0,0 +1,291 @@
+.sidecontent{position:fixed;left:-750px;width:auto;display:none;background:rgba(0,0,0,0.8);top:70px;height: 100%;color: rgba(255,255,255,1);}
+.sidecontent h1{font-size:14px;width:90%;margin:0px auto;text-align:center;height:50px;line-height:50px;position:relative;}
+.sidecontent h1 span{font-size:12px;font-weight:normal;position:absolute;right:-10px;cursor:pointer;border:#ebebeb solid 1px;width:40px;height:40px;line-height:40px;border-radius:20px;text-align:center;}
+#text
+{
+    float:left;
+	width:auto;
+	font-size:18px;
+	letter-spacing:2px;
+	margin:30px;
+	max-width:600px;
+	height:500px;
+	max-height:630px;
+	line-height:22px;
+	font-family:"宋体";
+}
+#sideimg{margin:5px 20px 30px 10px;float:left;}
+
+#gui-modes-map div img
+{
+	width:48px;
+	height:48px;
+}
+
+ 
+
+iframe{
+	border: none;
+}
+
+
+#popup {
+	z-index: 20;
+	text-align: center;
+	padding: 0;
+	position: relative;
+	width: 100%;
+	height: 100%;
+	/* margin: 80px auto; */
+	display: none;
+	overflow-x: hidden;
+	transition: opacity 0.3s;
+	opacity: 1;
+	z-index: 101;
+	background:  rgba(52,52,52,0.8);
+}
+#id1{ width: 70%; height: 99.5%;}
+#popup.wait{
+	pointer-events:none;
+	opacity:0.1; 
+}
+#closepop {
+	background: url(../../images/close1.png) no-repeat;
+	width: 50px;
+	height: 50px;
+	cursor: pointer;
+	position: absolute;
+	right: 30px;
+	top: 30px;
+	text-indent: -999em;
+	background-size: 100% 100%;
+}
+.specialTitle{bottom:65%;
+    width: 100%;
+    padding: 0 25px;
+    display: block;
+    font-family: OpenSans,'Helvetica Neue',sans-serif;
+    text-align: center;
+    font-size: 40px;
+    font-weight: 100;
+    letter-spacing: .75px;
+    text-shadow: 0 0 10px rgba(15,16,17,1);
+    color: rgba(255,255,255,1);
+    margin: 0;
+    position: absolute;
+    hyphens: auto;
+    word-wrap: break-word;
+    line-height: 45px;}
+	.dropdown {position: relative;display: inline-block;float: right;height: 40px;line-height: 40px;right: 10px;}
+    .floor{ width: 100px;text-align: center;display: block;height: 30px;background: rgba(0,0,0,0.4);line-height: 30px;margin-top: 10px;cursor: pointer;}
+    .dropdown-content {display: none;position: absolute;background: rgba(0,0,0,0.6);min-width: 100px;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);text-align:center;}
+    .dropdown:hover .dropdown-content {display: block;}
+    a{text-decoration:none;}
+	#YY,#SZZ{display:none;}
+ @media only screen and (max-width:487px){
+           .dropdown {height: 30px;line-height: 30px;right:5px;}
+           .floor {width: 80px;height: 20px;line-height: 20px;margin-top: 5px;}
+          .dropdown-content{min-width: 80px;}	
+           }
+@media screen and (max-width: 1600px) {
+ 
+	/*#popup {
+		width: 816px;
+		height: 510px;
+		margin: -255px auto auto -408px;
+	}*/
+	.specialTitle{
+	bottom:65%;
+    font-size: 34px;
+	}
+}
+
+@media screen and (max-width: 1400px) {
+ 
+	/*#popup {
+		width: 714px;
+		height: 446px;
+		margin: -223px auto auto -357px;
+	}*/
+	.specialTitle {
+    bottom: 65%;
+    font-size: 30px;
+    }
+}
+
+@media screen and (max-width: 1200px) {
+ 
+	#closepop{
+		width: 40px;
+		height: 40px;
+		top: 20px;
+		right: 20px;
+	}
+	.specialTitle {
+    bottom: 66%;
+    font-size: 26px;
+    }
+}
+ 
+@media screen and (max-width: 768px) {
+ 
+	.specialTitle {
+     bottom: 62%;
+     font-size: 26px;
+	 line-height:40px;
+    }
+	#special-gui-name{display:none;}
+}
+@media screen and  (max-width: 736px){
+
+	#model-title{
+		height: 42px;
+	}
+	#title-toggle{
+		padding-top: 18px;
+		height: 42px;
+	}
+	.title-container{
+		padding: 16px 10px 6px;
+		height:42px;
+		width: 259px;
+	}
+	#gui-name{
+		font-size: 16px;
+		line-height:16px;
+	}
+	.pinTop{top:8px;}
+	#model-title {
+    width: 70%;
+}
+}
+@media screen and  (max-width:667px){
+	#id1{ width: 96%;}
+	#closepop{
+		width: 36px;
+		height: 36px;
+		top: 20px;
+	}
+
+	#model-title{
+		height: 40px;
+	}
+	#title-toggle{
+		padding-top: 17px;
+		height: 40px;
+	}
+	.title-container{
+		padding: 16px 10px 6px;
+		height:40px;
+		width: 240px;
+	}
+	#gui-name{
+		font-size: 15px;
+		line-height:15px;
+	}
+	#musicImg .fa-2x {
+        font-size: 1.5em;
+    }
+	.pinTop{top:8px;}
+	#model-title {
+    width: 70%;
+}
+}
+@media screen and  (max-width:568px){
+
+	#model-title{
+		height: 38px;
+	}
+	#title-toggle{
+		padding-top: 17px;
+		height: 38px;
+	}
+	.title-container{
+		padding: 16px 10px 6px;
+		height:38px;
+		width: 220px;
+	}
+	#gui-name{
+		font-size: 14px;
+		line-height:14px;
+	}
+	#musicImg .fa-2x {
+        font-size: 1.5em;
+    }
+	.pinTop{top:8px;}
+	#model-title {
+    width: 70%;
+}
+}
+@media screen and (max-width:414px) {
+
+	#model-title{
+		height: 40px;
+	}
+	#title-toggle{
+		padding-top: 17px;
+		height: 40px;
+	}
+	.title-container{
+		padding: 16px 10px 6px;
+		height:40px;
+		width: 220px;
+	}
+	#gui-name{
+		font-size: 16px;
+		line-height:16px;
+	}
+	#model-title {
+    width: 70%;
+}
+}
+@media screen and (max-width:375px) {
+
+	#model-title{
+		height: 38px;
+	}
+	#title-toggle{
+		padding-top: 17px;
+		height: 38px;
+	}
+	.title-container{
+		padding: 16px 10px 6px;
+		height:38px;
+		width: 220px;
+	}
+	#gui-name{
+		font-size: 15px;
+		line-height:15px;
+	}
+	.pinTop{top:5px;}	
+	#model-title {
+    width: 70%;
+}
+}
+@media screen and (max-width:320px) {
+	/*#popup {
+		width: 200px;
+        height: 380px;
+        margin: -200px auto auto -100px;
+	}*/
+	#model-title{
+		height: 36px;
+	}
+	#title-toggle{
+		padding-top: 16px;
+		height: 36px;
+	}
+	.title-container{
+		padding: 16px 10px 6px;
+		height:36px;
+		width: 200px;
+	}
+	#gui-name{
+		font-size: 14px;
+		line-height:14px;
+	}
+	.pinTop{top:0px;}
+	#model-title {
+    width: 70%;
+}
+}

service/static/css-bak/oldVer/main0.css.bak

@@ -0,0 +1,339 @@
+.sidecontent{position:fixed;left:-750px;width:auto;display:none;background:rgba(0,0,0,0.8);top:70px;height: 100%;color: rgba(255,255,255,1);}
+.sidecontent h1{font-size:14px;width:90%;margin:0px auto;text-align:center;height:50px;line-height:50px;position:relative;}
+.sidecontent h1 span{font-size:12px;font-weight:normal;position:absolute;right:-10px;cursor:pointer;border:#ebebeb solid 1px;width:40px;height:40px;line-height:40px;border-radius:20px;text-align:center;}
+#text
+{
+    float:left;
+	width:auto;
+	font-size:18px;
+	letter-spacing:2px;
+	margin:30px;
+	max-width:600px;
+	height:500px;
+	max-height:630px;
+	line-height:22px;
+	font-family:"宋体";
+}
+#sideimg{margin:5px 20px 30px 10px;float:left;}
+
+#gui-modes-map div img
+{
+	width:48px;
+	height:48px;
+}
+
+ 
+
+iframe{
+	border: none;
+}
+
+
+#popup {
+	z-index: 20;
+	text-align: center;
+	padding: 0;
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	width: 960px;
+	height: 580px;
+	margin: -290px auto auto -480px;
+	display: none;
+	overflow-y: hidden;
+	transition: opacity 0.2s;
+	opacity: 1;
+}
+#popup.wait{
+	pointer-events:none;
+	opacity:0.1; 
+}
+#closepop {
+	background: url(../../images/close1.png) no-repeat;
+    width: 40px;
+    height: 40px;
+    cursor: pointer;
+    position: absolute;
+    right: 0px;
+    top: -3px;
+    text-indent: -999em;
+}
+.specialTitle{bottom:65%;
+    width: 100%;
+    padding: 0 25px;
+    display: block;
+    font-family: OpenSans,'Helvetica Neue',sans-serif;
+    text-align: center;
+    font-size: 40px;
+    font-weight: 100;
+    letter-spacing: .75px;
+    text-shadow: 0 0 10px rgba(15,16,17,1);
+    color: rgba(255,255,255,1);
+    margin: 0;
+    position: absolute;
+    hyphens: auto;
+    word-wrap: break-word;
+    line-height: 45px;}
+	.dropdown {position: relative;display: inline-block;float: right;height: 40px;line-height: 40px;right: 10px;}
+    .floor{ width: 100px;text-align: center;display: block;height: 30px;background: rgba(0,0,0,0.4);line-height: 30px;margin-top: 10px;cursor: pointer;}
+    .dropdown-content {display: none;position: absolute;background: rgba(0,0,0,0.6);min-width: 100px;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);text-align:center;}
+    .dropdown:hover .dropdown-content {display: block;}
+    a{text-decoration:none;}
+	#YY,#SZZ{display:none;}
+ @media only screen and (max-width:487px){
+           .dropdown {height: 30px;line-height: 30px;right:5px;}
+           .floor {width: 80px;height: 20px;line-height: 20px;margin-top: 5px;}
+          .dropdown-content{min-width: 80px;}	
+           }
+@media screen and (max-width: 1600px) {
+ 
+	#popup {
+		width: 816px;
+		height: 510px;
+		margin: -255px auto auto -408px;
+	}
+	.specialTitle{
+	bottom:65%;
+    font-size: 34px;
+	}
+}
+
+@media screen and (max-width: 1400px) {
+ 
+	#popup {
+		width: 714px;
+		height: 446px;
+		margin: -223px auto auto -357px;
+	}
+	.specialTitle {
+    bottom: 65%;
+    font-size: 30px;
+    }
+}
+
+@media screen and (max-width: 1200px) {
+ 
+	#popup {
+		width: 700px;
+		height: 422px;
+		margin: -211px auto auto -350px;
+	}
+	.specialTitle {
+    bottom: 66%;
+    font-size: 26px;
+    }
+}
+
+/* @media screen and (max-width: 1024px) { */
+ 
+	/* #popup { */
+		/* width: 700px; */
+		/* height: 438px; */
+		/* margin: -219px auto auto -350px; */
+	/* } */
+/* } */
+@media screen and (max-width: 768px) {
+ 
+	#popup {
+		width:600px;
+		height:720px;
+		margin: -360px auto auto -300px;
+	}
+	.specialTitle {
+     bottom: 62%;
+     font-size: 26px;
+	 line-height:40px;
+    }
+	#special-gui-name{display:none;}
+}
+@media screen and (min-width:669px) and (max-width: 736px){
+	#popup {
+		width:500px;
+		height:260px;
+		margin: -130px auto auto -250px;
+	}
+	#closepop{
+		width: 32px;
+        height: 32px;
+		background-size: contain;
+		right: 0px;
+	}
+	#model-title{
+		height: 42px;
+	}
+	#title-toggle{
+		padding-top: 18px;
+		height: 42px;
+	}
+	.title-container{
+		padding: 16px 10px 6px;
+		height:42px;
+		width: 259px;
+	}
+	#gui-name{
+		font-size: 16px;
+		line-height:16px;
+	}
+	.pinTop{top:8px;}
+	#model-title {
+    width: 70%;
+}
+}
+@media screen and (min-width:569px) and (max-width:667px){
+	#popup {
+		width:420px;
+		height:230px;
+		margin: -115px auto auto -210px;
+	}
+	#closepop{
+		width: 30px;
+        height: 30px;
+		background-size: contain;
+		right: 0px;
+	}
+	#model-title{
+		height: 40px;
+	}
+	#title-toggle{
+		padding-top: 17px;
+		height: 40px;
+	}
+	.title-container{
+		padding: 16px 10px 6px;
+		height:40px;
+		width: 240px;
+	}
+	#gui-name{
+		font-size: 15px;
+		line-height:15px;
+	}
+	#musicImg .fa-2x {
+        font-size: 1.5em;
+    }
+	.pinTop{top:8px;}
+	#model-title {
+    width: 70%;
+}
+}
+@media screen and (min-width:447px) and (max-width:568px){
+	#popup {
+		width:340px;
+		height:170px;
+		margin: -85px auto auto -170px;
+	}
+	#closepop{
+		width: 30px;
+        height: 30px;
+		background-size: contain;
+		right: 0px;
+	}
+	#model-title{
+		height: 38px;
+	}
+	#title-toggle{
+		padding-top: 17px;
+		height: 38px;
+	}
+	.title-container{
+		padding: 16px 10px 6px;
+		height:38px;
+		width: 220px;
+	}
+	#gui-name{
+		font-size: 14px;
+		line-height:14px;
+	}
+	#musicImg .fa-2x {
+        font-size: 1.5em;
+    }
+	.pinTop{top:8px;}
+	#model-title {
+    width: 70%;
+}
+}
+@media screen and (max-width:414px) {
+	#popup {
+		width: 280px;
+        height: 520px;
+        margin: -260px auto auto -140px;
+	}
+	#closepop{
+		width: 30px;
+        height: 30px;
+		background-size: contain;
+		right: 0px;
+	}
+	#model-title{
+		height: 40px;
+	}
+	#title-toggle{
+		padding-top: 17px;
+		height: 40px;
+	}
+	.title-container{
+		padding: 16px 10px 6px;
+		height:40px;
+		width: 220px;
+	}
+	#gui-name{
+		font-size: 16px;
+		line-height:16px;
+	}
+	#model-title {
+    width: 70%;
+}
+}
+@media screen and (max-width:375px) {
+	#popup {
+		width: 252px;
+        height: 490px;
+        margin: -245px auto auto -126px;
+	}
+	#model-title{
+		height: 38px;
+	}
+	#title-toggle{
+		padding-top: 17px;
+		height: 38px;
+	}
+	.title-container{
+		padding: 16px 10px 6px;
+		height:38px;
+		width: 220px;
+	}
+	#gui-name{
+		font-size: 15px;
+		line-height:15px;
+	}
+	.pinTop{top:5px;}	
+	#model-title {
+    width: 70%;
+}
+}
+@media screen and (max-width:320px) {
+	#popup {
+		width: 200px;
+        height: 380px;
+        margin: -200px auto auto -100px;
+	}
+	#model-title{
+		height: 36px;
+	}
+	#title-toggle{
+		padding-top: 16px;
+		height: 36px;
+	}
+	.title-container{
+		padding: 16px 10px 6px;
+		height:36px;
+		width: 200px;
+	}
+	#gui-name{
+		font-size: 14px;
+		line-height:14px;
+	}
+	.pinTop{top:0px;}
+	#model-title {
+    width: 70%;
+}
+}

service/static/css-bak/oldVer/video-js.css

@@ -0,0 +1,770 @@
+/*!
+Video.js Default Styles (http://videojs.com)
+Version 4.5.1
+Create your own skin at http://designer.videojs.com
+*/
+/* SKIN
+================================================================================
+The main class name for all skin-specific styles. To make your own skin,
+replace all occurances of 'vjs-default-skin' with a new name. Then add your new
+skin name to your video tag instead of the default skin.
+e.g. <video class="video-js my-skin-name">
+*/
+.vjs-default-skin {
+  color: #cccccc;
+}
+/* Custom Icon Font
+--------------------------------------------------------------------------------
+The control icons are from a custom font. Each icon corresponds to a character
+(e.g. "\e001"). Font icons allow for easy scaling and coloring of icons.
+*/
+@font-face {
+  font-family: 'VideoJS';
+  src: url('font/vjs.eot');
+  src: url('font/vjs.eot?#iefix') format('embedded-opentype'), url('font/vjs.woff') format('woff'), url('font/vjs.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+/* Base UI Component Classes
+--------------------------------------------------------------------------------
+*/
+/* Slider - used for Volume bar and Seek bar */
+.vjs-default-skin .vjs-slider {
+  /* Replace browser focus hightlight with handle highlight */
+  outline: 0;
+  position: relative;
+  cursor: pointer;
+  padding: 0;
+  /* background-color-with-alpha */
+  background-color: #333333;
+  background-color: rgba(51, 51, 51, 0.9);
+}
+.vjs-default-skin .vjs-slider:focus {
+  /* box-shadow */
+  -webkit-box-shadow: 0 0 2em #ffffff;
+  -moz-box-shadow: 0 0 2em #ffffff;
+  box-shadow: 0 0 2em #ffffff;
+}
+.vjs-default-skin .vjs-slider-handle {
+  position: absolute;
+  /* Needed for IE6 */
+  left: 0;
+  top: 0;
+}
+.vjs-default-skin .vjs-slider-handle:before {
+  content: "\e009";
+  font-family: VideoJS;
+  font-size: 1em;
+  line-height: 1;
+  text-align: center;
+  text-shadow: 0em 0em 1em #fff;
+  position: absolute;
+  top: 0;
+  left: 0;
+  /* Rotate the square icon to make a diamond */
+  /* transform */
+  -webkit-transform: rotate(-45deg);
+  -moz-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  -o-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+}
+/* Control Bar
+--------------------------------------------------------------------------------
+The default control bar that is a container for most of the controls.
+*/
+.vjs-default-skin .vjs-control-bar {
+  /* Start hidden */
+  display: none;
+  position: absolute;
+  /* Place control bar at the bottom of the player box/video.
+     If you want more margin below the control bar, add more height. */
+  bottom: 0;
+  /* Use left/right to stretch to 100% width of player div */
+  left: 0;
+  right: 0;
+  /* Height includes any margin you want above or below control items */
+  height: 3.0em;
+  /* background-color-with-alpha */
+  background-color: #07141e;
+  background-color: rgba(7, 20, 30, 0.7);
+}
+/* Show the control bar only once the video has started playing */
+.vjs-default-skin.vjs-has-started .vjs-control-bar {
+  display: block;
+  /* Visibility needed to make sure things hide in older browsers too. */
+
+  visibility: visible;
+  opacity: 1;
+  /* transition */
+  -webkit-transition: visibility 0.1s, opacity 0.1s;
+  -moz-transition: visibility 0.1s, opacity 0.1s;
+  -o-transition: visibility 0.1s, opacity 0.1s;
+  transition: visibility 0.1s, opacity 0.1s;
+}
+/* Hide the control bar when the video is playing and the user is inactive  */
+.vjs-default-skin.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
+  display: block;
+  visibility: hidden;
+  opacity: 0;
+  /* transition */
+  -webkit-transition: visibility 1s, opacity 1s;
+  -moz-transition: visibility 1s, opacity 1s;
+  -o-transition: visibility 1s, opacity 1s;
+  transition: visibility 1s, opacity 1s;
+}
+.vjs-default-skin.vjs-controls-disabled .vjs-control-bar {
+  display: none;
+}
+.vjs-default-skin.vjs-using-native-controls .vjs-control-bar {
+  display: none;
+}
+/* IE8 is flakey with fonts, and you have to change the actual content to force
+fonts to show/hide properly.
+  - "\9" IE8 hack didn't work for this
+  - Found in XP IE8 from http://modern.ie. Does not show up in "IE8 mode" in IE9
+*/
+@media \0screen {
+  .vjs-default-skin.vjs-user-inactive.vjs-playing .vjs-control-bar :before {
+    content: "";
+  }
+}
+/* General styles for individual controls. */
+.vjs-default-skin .vjs-control {
+  outline: none;
+  position: relative;
+  float: left;
+  text-align: center;
+  margin: 0;
+  padding: 0;
+  height: 3.0em;
+  width: 4em;
+}
+/* FontAwsome button icons */
+.vjs-default-skin .vjs-control:before {
+  font-family: VideoJS;
+  font-size: 1.5em;
+  line-height: 2;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
+}
+/* Replacement for focus outline */
+.vjs-default-skin .vjs-control:focus:before,
+.vjs-default-skin .vjs-control:hover:before {
+  text-shadow: 0em 0em 1em #ffffff;
+}
+.vjs-default-skin .vjs-control:focus {
+  /*  outline: 0; */
+  /* keyboard-only users cannot see the focus on several of the UI elements when
+  this is set to 0 */
+
+}
+/* Hide control text visually, but have it available for screenreaders */
+.vjs-default-skin .vjs-control-text {
+  /* hide-visually */
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+/* Play/Pause
+--------------------------------------------------------------------------------
+*/
+.vjs-default-skin .vjs-play-control {
+  width: 5em;
+  cursor: pointer;
+}
+.vjs-default-skin .vjs-play-control:before {
+  content: "\e001";
+}
+.vjs-default-skin.vjs-playing .vjs-play-control:before {
+  content: "\e002";
+}
+/* Volume/Mute
+-------------------------------------------------------------------------------- */
+.vjs-default-skin .vjs-mute-control,
+.vjs-default-skin .vjs-volume-menu-button {
+  cursor: pointer;
+  float: right;
+}
+.vjs-default-skin .vjs-mute-control:before,
+.vjs-default-skin .vjs-volume-menu-button:before {
+  content: "\e006";
+}
+.vjs-default-skin .vjs-mute-control.vjs-vol-0:before,
+.vjs-default-skin .vjs-volume-menu-button.vjs-vol-0:before {
+  content: "\e003";
+}
+.vjs-default-skin .vjs-mute-control.vjs-vol-1:before,
+.vjs-default-skin .vjs-volume-menu-button.vjs-vol-1:before {
+  content: "\e004";
+}
+.vjs-default-skin .vjs-mute-control.vjs-vol-2:before,
+.vjs-default-skin .vjs-volume-menu-button.vjs-vol-2:before {
+  content: "\e005";
+}
+.vjs-default-skin .vjs-volume-control {
+  width: 5em;
+  float: right;
+}
+.vjs-default-skin .vjs-volume-bar {
+  width: 5em;
+  height: 0.6em;
+  margin: 1.1em auto 0;
+}
+.vjs-default-skin .vjs-volume-menu-button .vjs-menu-content {
+  height: 2.9em;
+}
+.vjs-default-skin .vjs-volume-level {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 0.5em;
+  background: #66a8cc url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAP0lEQVQIHWWMAQoAIAgDR/QJ/Ub//04+w7ZICBwcOg5FZi5iBB82AGzixEglJrd4TVK5XUJpskSTEvpdFzX9AB2pGziSQcvAAAAAAElFTkSuQmCC) -50% 0 repeat;
+}
+.vjs-default-skin .vjs-volume-bar .vjs-volume-handle {
+  width: 0.5em;
+  height: 0.5em;
+}
+.vjs-default-skin .vjs-volume-handle:before {
+  font-size: 0.9em;
+  top: -0.2em;
+  left: -0.2em;
+  width: 1em;
+  height: 1em;
+}
+.vjs-default-skin .vjs-volume-menu-button .vjs-menu .vjs-menu-content {
+  width: 6em;
+  left: -4em;
+}
+/* Progress
+--------------------------------------------------------------------------------
+*/
+.vjs-default-skin .vjs-progress-control {
+  position: absolute;
+  left: 0;
+  right: 0;
+  width: auto;
+  font-size: 0.3em;
+  height: 1em;
+  /* Set above the rest of the controls. */
+  top: -1em;
+  /* Shrink the bar slower than it grows. */
+  /* transition */
+  -webkit-transition: all 0.4s;
+  -moz-transition: all 0.4s;
+  -o-transition: all 0.4s;
+  transition: all 0.4s;
+}
+/* On hover, make the progress bar grow to something that's more clickable.
+    This simply changes the overall font for the progress bar, and this
+    updates both the em-based widths and heights, as wells as the icon font */
+.vjs-default-skin:hover .vjs-progress-control {
+  font-size: .9em;
+  /* Even though we're not changing the top/height, we need to include them in
+      the transition so they're handled correctly. */
+
+  /* transition */
+  -webkit-transition: all 0.2s;
+  -moz-transition: all 0.2s;
+  -o-transition: all 0.2s;
+  transition: all 0.2s;
+}
+/* Box containing play and load progresses. Also acts as seek scrubber. */
+.vjs-default-skin .vjs-progress-holder {
+  height: 100%;
+}
+/* Progress Bars */
+.vjs-default-skin .vjs-progress-holder .vjs-play-progress,
+.vjs-default-skin .vjs-progress-holder .vjs-load-progress {
+  position: absolute;
+  display: block;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  /* Needed for IE6 */
+  left: 0;
+  top: 0;
+}
+.vjs-default-skin .vjs-play-progress {
+  /*
+    Using a data URI to create the white diagonal lines with a transparent
+      background. Surprisingly works in IE8.
+      Created using http://www.patternify.com
+    Changing the first color value will change the bar color.
+    Also using a paralax effect to make the lines move backwards.
+      The -50% left position makes that happen.
+  */
+
+  background: #66a8cc url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAP0lEQVQIHWWMAQoAIAgDR/QJ/Ub//04+w7ZICBwcOg5FZi5iBB82AGzixEglJrd4TVK5XUJpskSTEvpdFzX9AB2pGziSQcvAAAAAAElFTkSuQmCC) -50% 0 repeat;
+}
+.vjs-default-skin .vjs-load-progress {
+  background: #646464 /* IE8- Fallback */;
+  background: rgba(255, 255, 255, 0.4);
+}
+.vjs-default-skin .vjs-seek-handle {
+  width: 1.5em;
+  height: 100%;
+}
+.vjs-default-skin .vjs-seek-handle:before {
+  padding-top: 0.1em /* Minor adjustment */;
+}
+/* Time Display
+--------------------------------------------------------------------------------
+*/
+.vjs-default-skin .vjs-time-controls {
+  font-size: 1em;
+  /* Align vertically by making the line height the same as the control bar */
+  line-height: 3em;
+}
+.vjs-default-skin .vjs-current-time {
+  float: left;
+}
+.vjs-default-skin .vjs-duration {
+  float: left;
+}
+/* Remaining time is in the HTML, but not included in default design */
+.vjs-default-skin .vjs-remaining-time {
+  display: none;
+  float: left;
+}
+.vjs-time-divider {
+  float: left;
+  line-height: 3em;
+}
+/* Fullscreen
+--------------------------------------------------------------------------------
+*/
+.vjs-default-skin .vjs-fullscreen-control {
+  width: 3.8em;
+  cursor: pointer;
+  float: right;
+}
+.vjs-default-skin .vjs-fullscreen-control:before {
+  content: "\e000";
+}
+/* Switch to the exit icon when the player is in fullscreen */
+.vjs-default-skin.vjs-fullscreen .vjs-fullscreen-control:before {
+  content: "\e00b";
+}
+/* Big Play Button (play button at start)
+--------------------------------------------------------------------------------
+Positioning of the play button in the center or other corners can be done more
+easily in the skin designer. http://designer.videojs.com/
+*/
+.vjs-default-skin .vjs-big-play-button {
+  left: 0.5em;
+  top: 0.5em;
+  font-size: 3em;
+  display: block;
+  z-index: 2;
+  position: absolute;
+  width: 4em;
+  height: 2.6em;
+  text-align: center;
+  vertical-align: middle;
+  cursor: pointer;
+  opacity: 1;
+  /* Need a slightly gray bg so it can be seen on black backgrounds */
+  /* background-color-with-alpha */
+  background-color: #07141e;
+  background-color: rgba(7, 20, 30, 0.7);
+  border: 0.1em solid #3b4249;
+  /* border-radius */
+  -webkit-border-radius: 0.8em;
+  -moz-border-radius: 0.8em;
+  border-radius: 0.8em;
+  /* box-shadow */
+  -webkit-box-shadow: 0px 0px 1em rgba(255, 255, 255, 0.25);
+  -moz-box-shadow: 0px 0px 1em rgba(255, 255, 255, 0.25);
+  box-shadow: 0px 0px 1em rgba(255, 255, 255, 0.25);
+  /* transition */
+  -webkit-transition: all 0.4s;
+  -moz-transition: all 0.4s;
+  -o-transition: all 0.4s;
+  transition: all 0.4s;
+}
+/* Optionally center */
+.vjs-default-skin.vjs-big-play-centered .vjs-big-play-button {
+  /* Center it horizontally */
+  left: 50%;
+  margin-left: -2.1em;
+  /* Center it vertically */
+  top: 50%;
+  margin-top: -1.4000000000000001em;
+}
+/* Hide if controls are disabled */
+.vjs-default-skin.vjs-controls-disabled .vjs-big-play-button {
+  display: none;
+}
+/* Hide when video starts playing */
+.vjs-default-skin.vjs-has-started .vjs-big-play-button {
+  display: none;
+}
+/* Hide on mobile devices. Remove when we stop using native controls
+    by default on mobile  */
+.vjs-default-skin.vjs-using-native-controls .vjs-big-play-button {
+  display: none;
+}
+.vjs-default-skin:hover .vjs-big-play-button,
+.vjs-default-skin .vjs-big-play-button:focus {
+  outline: 0;
+  border-color: #fff;
+  /* IE8 needs a non-glow hover state */
+  background-color: #505050;
+  background-color: rgba(50, 50, 50, 0.75);
+  /* box-shadow */
+  -webkit-box-shadow: 0 0 3em #ffffff;
+  -moz-box-shadow: 0 0 3em #ffffff;
+  box-shadow: 0 0 3em #ffffff;
+  /* transition */
+  -webkit-transition: all 0s;
+  -moz-transition: all 0s;
+  -o-transition: all 0s;
+  transition: all 0s;
+}
+.vjs-default-skin .vjs-big-play-button:before {
+  content: "\e001";
+  font-family: VideoJS;
+  /* In order to center the play icon vertically we need to set the line height
+     to the same as the button height */
+
+  line-height: 2.6em;
+  text-shadow: 0.05em 0.05em 0.1em #000;
+  text-align: center /* Needed for IE8 */;
+  position: absolute;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+/* Loading Spinner
+--------------------------------------------------------------------------------
+*/
+.vjs-loading-spinner {
+  display: none;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  font-size: 4em;
+  line-height: 1;
+  width: 1em;
+  height: 1em;
+  margin-left: -0.5em;
+  margin-top: -0.5em;
+  opacity: 0.75;
+  /* animation */
+  -webkit-animation: spin 1.5s infinite linear;
+  -moz-animation: spin 1.5s infinite linear;
+  -o-animation: spin 1.5s infinite linear;
+  animation: spin 1.5s infinite linear;
+}
+.vjs-default-skin .vjs-loading-spinner:before {
+  content: "\e01e";
+  font-family: VideoJS;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 1em;
+  height: 1em;
+  text-align: center;
+  text-shadow: 0em 0em 0.1em #000;
+}
+@-moz-keyframes spin {
+  0% {
+    -moz-transform: rotate(0deg);
+  }
+  100% {
+    -moz-transform: rotate(359deg);
+  }
+}
+@-webkit-keyframes spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(359deg);
+  }
+}
+@-o-keyframes spin {
+  0% {
+    -o-transform: rotate(0deg);
+  }
+  100% {
+    -o-transform: rotate(359deg);
+  }
+}
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(359deg);
+  }
+}
+/* Menu Buttons (Captions/Subtitles/etc.)
+--------------------------------------------------------------------------------
+*/
+.vjs-default-skin .vjs-menu-button {
+  float: right;
+  cursor: pointer;
+}
+.vjs-default-skin .vjs-menu {
+  display: none;
+  position: absolute;
+  bottom: 0;
+  left: 0em;
+  /* (Width of vjs-menu - width of button) / 2 */
+
+  width: 0em;
+  height: 0em;
+  margin-bottom: 3em;
+  border-left: 2em solid transparent;
+  border-right: 2em solid transparent;
+  border-top: 1.55em solid #000000;
+  /* Same width top as ul bottom */
+
+  border-top-color: rgba(7, 40, 50, 0.5);
+  /* Same as ul background */
+
+}
+/* Button Pop-up Menu */
+.vjs-default-skin .vjs-menu-button .vjs-menu .vjs-menu-content {
+  display: block;
+  padding: 0;
+  margin: 0;
+  position: absolute;
+  width: 10em;
+  bottom: 1.5em;
+  /* Same bottom as vjs-menu border-top */
+
+  max-height: 15em;
+  overflow: auto;
+  left: -5em;
+  /* Width of menu - width of button / 2 */
+
+  /* background-color-with-alpha */
+  background-color: #07141e;
+  background-color: rgba(7, 20, 30, 0.7);
+  /* box-shadow */
+  -webkit-box-shadow: -0.2em -0.2em 0.3em rgba(255, 255, 255, 0.2);
+  -moz-box-shadow: -0.2em -0.2em 0.3em rgba(255, 255, 255, 0.2);
+  box-shadow: -0.2em -0.2em 0.3em rgba(255, 255, 255, 0.2);
+}
+.vjs-default-skin .vjs-menu-button:hover .vjs-menu {
+  display: block;
+}
+.vjs-default-skin .vjs-menu-button ul li {
+  list-style: none;
+  margin: 0;
+  padding: 0.3em 0 0.3em 0;
+  line-height: 1.4em;
+  font-size: 1.2em;
+  text-align: center;
+  text-transform: lowercase;
+}
+.vjs-default-skin .vjs-menu-button ul li.vjs-selected {
+  background-color: #000;
+}
+.vjs-default-skin .vjs-menu-button ul li:focus,
+.vjs-default-skin .vjs-menu-button ul li:hover,
+.vjs-default-skin .vjs-menu-button ul li.vjs-selected:focus,
+.vjs-default-skin .vjs-menu-button ul li.vjs-selected:hover {
+  outline: 0;
+  color: #111;
+  /* background-color-with-alpha */
+  background-color: #ffffff;
+  background-color: rgba(255, 255, 255, 0.75);
+  /* box-shadow */
+  -webkit-box-shadow: 0 0 1em #ffffff;
+  -moz-box-shadow: 0 0 1em #ffffff;
+  box-shadow: 0 0 1em #ffffff;
+}
+.vjs-default-skin .vjs-menu-button ul li.vjs-menu-title {
+  text-align: center;
+  text-transform: uppercase;
+  font-size: 1em;
+  line-height: 2em;
+  padding: 0;
+  margin: 0 0 0.3em 0;
+  font-weight: bold;
+  cursor: default;
+}
+/* Subtitles Button */
+.vjs-default-skin .vjs-subtitles-button:before {
+  content: "\e00c";
+}
+/* Captions Button */
+.vjs-default-skin .vjs-captions-button:before {
+  content: "\e008";
+}
+/* Replacement for focus outline */
+.vjs-default-skin .vjs-captions-button:focus .vjs-control-content:before,
+.vjs-default-skin .vjs-captions-button:hover .vjs-control-content:before {
+  /* box-shadow */
+  -webkit-box-shadow: 0 0 1em #ffffff;
+  -moz-box-shadow: 0 0 1em #ffffff;
+  box-shadow: 0 0 1em #ffffff;
+}
+/*
+REQUIRED STYLES (be careful overriding)
+================================================================================
+When loading the player, the video tag is replaced with a DIV,
+that will hold the video tag or object tag for other playback methods.
+The div contains the video playback element (Flash or HTML5) and controls,
+and sets the width and height of the video.
+
+** If you want to add some kind of border/padding (e.g. a frame), or special
+positioning, use another containing element. Otherwise you risk messing up
+control positioning and full window mode. **
+*/
+.video-js {
+  background-color: #000;
+  position: relative;
+  padding: 0;
+  /* Start with 10px for base font size so other dimensions can be em based and
+     easily calculable. */
+
+  font-size: 10px;
+  /* Allow poster to be vertially aligned. */
+
+  vertical-align: middle;
+  /*  display: table-cell; */
+  /*This works in Safari but not Firefox.*/
+
+  /* Provide some basic defaults for fonts */
+
+  font-weight: normal;
+  font-style: normal;
+  /* Avoiding helvetica: issue #376 */
+
+  font-family: Arial, sans-serif;
+  /* Turn off user selection (text highlighting) by default.
+     The majority of player components will not be text blocks.
+     Text areas will need to turn user selection back on. */
+
+  /* user-select */
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+/* Playback technology elements expand to the width/height of the containing div
+    <video> or <object> */
+.video-js .vjs-tech {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+/* Fix for Firefox 9 fullscreen (only if it is enabled). Not needed when
+   checking fullScreenEnabled. */
+.video-js:-moz-full-screen {
+  position: absolute;
+}
+/* Fullscreen Styles */
+body.vjs-full-window {
+  padding: 0;
+  margin: 0;
+  height: 100%;
+  /* Fix for IE6 full-window. http://www.cssplay.co.uk/layouts/fixed.html */
+  overflow-y: auto;
+}
+.video-js.vjs-fullscreen {
+  position: fixed;
+  overflow: hidden;
+  z-index: 1000;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  width: 100% !important;
+  height: 100% !important;
+  /* IE6 full-window (underscore hack) */
+  _position: absolute;
+}
+.video-js:-webkit-full-screen {
+  width: 100% !important;
+  height: 100% !important;
+}
+.video-js.vjs-fullscreen.vjs-user-inactive {
+  cursor: none;
+}
+/* Poster Styles */
+.vjs-poster {
+  background-repeat: no-repeat;
+  background-position: 50% 50%;
+  background-size: contain;
+  cursor: pointer;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  position: relative;
+  width: 100%;
+}
+.vjs-poster img {
+  display: block;
+  margin: 0 auto;
+  max-height: 100%;
+  padding: 0;
+  width: 100%;
+}
+/* Hide the poster when native controls are used otherwise it covers them */
+.video-js.vjs-using-native-controls .vjs-poster {
+  display: none;
+}
+/* Text Track Styles */
+/* Overall track holder for both captions and subtitles */
+.video-js .vjs-text-track-display {
+  text-align: center;
+  position: absolute;
+  bottom: 4em;
+  /* Leave padding on left and right */
+  left: 1em;
+  right: 1em;
+}
+/* Move captions down when controls aren't being shown */
+.video-js.vjs-user-inactive.vjs-playing .vjs-text-track-display {
+  bottom: 1em;
+}
+/* Individual tracks */
+.video-js .vjs-text-track {
+  display: none;
+  font-size: 1.4em;
+  text-align: center;
+  margin-bottom: 0.1em;
+  /* Transparent black background, or fallback to all black (oldIE) */
+  /* background-color-with-alpha */
+  background-color: #000000;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+.video-js .vjs-subtitles {
+  color: #ffffff /* Subtitles are white */;
+}
+.video-js .vjs-captions {
+  color: #ffcc66 /* Captions are yellow */;
+}
+.vjs-tt-cue {
+  display: block;
+}
+/* Hide disabled or unsupported controls */
+.vjs-default-skin .vjs-hidden {
+  display: none;
+}
+.vjs-lock-showing {
+  display: block !important;
+  opacity: 1;
+  visibility: visible;
+}
+/* -----------------------------------------------------------------------------
+The original source of this file lives at
+https://github.com/videojs/video.js/blob/master/src/css/video-js.less */

service/static/css-bak/popupwindow.css

@@ -0,0 +1,284 @@
+button::-moz-focus-inner,input[type="reset"]::-moz-focus-inner,input[type="button"]::-moz-focus-inner,input[type="submit"]::-moz-focus-inner,input[type="file"] > input[type="button"]::-moz-focus-inner {border-color: transparent;}
+input:required:invalid {box-shadow: none;}
+.footer-btn-double{ display: none; }
+.dialog,
+.dialog__overlay {
+	width: 100%;
+	height: 100vh;
+	top: 0;
+	left: 0;
+	z-index: 11;
+}
+.dialog-2,.dialog__overlay{ z-index: 999; }
+.dialog {
+	font-family: "Microsoft YaHei";
+    letter-spacing: 0.02em;
+	position: fixed;
+	display: -webkit-flex;
+	display: flex;
+	-webkit-align-items: center;
+	align-items: center;
+	-webkit-justify-content: center;
+	justify-content: center;
+	pointer-events: none;
+}
+
+.dialog__overlay {
+	position: absolute;
+	z-index: 1;
+	background: rgba(55, 58, 71, 0.9);
+	opacity: 0;
+	-webkit-transition: opacity 0.3s;
+	transition: opacity 0.3s;
+	-webkit-backface-visibility: hidden;
+}
+
+.dialog--open .dialog__overlay {
+	opacity: 0.5;
+	pointer-events: auto;
+}
+
+.dialog__content {
+	text-align: center;
+	position: relative;
+	z-index: 5;
+	opacity: 0;
+	font-size: 75px;
+}
+
+.dialog--open .dialog__content {
+	pointer-events: auto;
+}
+
+.dialog.dialog--open .dialog__content,
+.dialog.dialog--close .dialog__content {
+	-webkit-animation-duration: 1s;
+	animation-duration: 1s;
+	-webkit-animation-timing-function: linear;
+	animation-timing-function: linear;
+	-webkit-animation-fill-mode: forwards;
+	animation-fill-mode: forwards;
+}
+
+.dialog.dialog--open .dialog__content {
+	-webkit-animation-name: anim-open;
+	animation-name: anim-open;
+}
+
+.dialog.dialog--close .dialog__content {
+	-webkit-animation-name: anim-close;
+	animation-name: anim-close;
+	-webkit-animation-duration: 0.3s;
+	animation-duration: 0.3s;
+	-webkit-animation-timing-function: ease-out;
+	animation-timing-function: ease-out;
+}
+
+.dialog--open .password,.dialog--open .password2{ display: block; }
+.password,.password2{ display: none; }
+
+
+/*弹出提示框的样式*/
+.prompt-popup a{
+	text-decoration: none;
+	color:white;
+}
+
+.prompt-popup{
+	z-index: 999;
+	width: 6.666667em;
+	height: 3.853333em;
+	color: #333333;
+	border-radius:5px;
+	-moz-border-radius:5px;
+	-webkit-border-radius:5px;	
+	background: white;
+	position: relative;
+	padding: 0 0.666667em;
+ 
+}
+.prompt-title{
+	display: flex;
+	display: -webkit-flex;
+	padding-top: 0.666667em;
+}
+.footer-btn-single span, .prompt-second-pg { font-size: 0.186667em; }
+.prompt-title a{
+	font-size:0.186667em;
+}
+.prompt-title h2{
+	font-size: 0.32em;
+	font-weight:600;
+	margin: 0px;
+}
+.prompt-second{padding-left: 0.066667em; font-size: 0.186667rem;}
+.prompt-main{
+	margin-top: 0.266667em;
+	height: 1.0em;
+	display: flex;
+	display: -webkit-flex;
+	align-items: center;
+	border-bottom: 2px solid #eeeeee;
+	border-top: 2px solid #eeeeee;
+	font-weight: bold;
+}
+.prompt-main span{ font-size: 0.186667em; }
+.prompt-title-close{position: absolute; top: 0.2em; display: flex;right: 0.2em;}
+.prompt-footer{
+	height: 1.12em;
+	display: flex;
+	display: -webkit-flex;
+	justify-content: center;
+	align-items: flex-end;
+}
+.prompt-footer a{
+	width: 1.6em;
+	height: 0.64em;
+	background:  #09e1c0;
+	line-height: 0.64em;
+	display: inline-flex;
+	justify-content:center;
+}
+.prompt-footer a:hover{
+	background: #45edd3;
+}
+.footer-btn-back{ background: #ccc !important; }
+.footer-btn-back span{font-size:0.186667em;}
+.footer-btn-confirm span{font-size:0.186667em;}
+.footer-btn-confirm{ margin-left: 0.266667em; }
+
+
+/* Content */
+@-webkit-keyframes anim-open {
+	0% { opacity: 0; -webkit-transform: matrix3d(0.7, 0, 0, 0, 0, 0.7, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.7, 0, 0, 0, 0, 0.7, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	2.083333% { -webkit-transform: matrix3d(0.75266, 0, 0, 0, 0, 0.76342, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.75266, 0, 0, 0, 0, 0.76342, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	4.166667% { -webkit-transform: matrix3d(0.81071, 0, 0, 0, 0, 0.84545, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.81071, 0, 0, 0, 0, 0.84545, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	6.25% { -webkit-transform: matrix3d(0.86808, 0, 0, 0, 0, 0.9286, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.86808, 0, 0, 0, 0, 0.9286, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	8.333333% { -webkit-transform: matrix3d(0.92038, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.92038, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	10.416667% { -webkit-transform: matrix3d(0.96482, 0, 0, 0, 0, 1.05202, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.96482, 0, 0, 0, 0, 1.05202, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	12.5% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1.08204, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1.08204, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	14.583333% { -webkit-transform: matrix3d(1.02563, 0, 0, 0, 0, 1.09149, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.02563, 0, 0, 0, 0, 1.09149, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	16.666667% { -webkit-transform: matrix3d(1.04227, 0, 0, 0, 0, 1.08453, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.04227, 0, 0, 0, 0, 1.08453, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	18.75% { -webkit-transform: matrix3d(1.05102, 0, 0, 0, 0, 1.06666, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.05102, 0, 0, 0, 0, 1.06666, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	20.833333% { -webkit-transform: matrix3d(1.05334, 0, 0, 0, 0, 1.04355, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.05334, 0, 0, 0, 0, 1.04355, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	22.916667% { -webkit-transform: matrix3d(1.05078, 0, 0, 0, 0, 1.02012, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.05078, 0, 0, 0, 0, 1.02012, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	25% { -webkit-transform: matrix3d(1.04487, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.04487, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	27.083333% { -webkit-transform: matrix3d(1.03699, 0, 0, 0, 0, 0.98534, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.03699, 0, 0, 0, 0, 0.98534, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	29.166667% { -webkit-transform: matrix3d(1.02831, 0, 0, 0, 0, 0.97688, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.02831, 0, 0, 0, 0, 0.97688, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	31.25% { -webkit-transform: matrix3d(1.01973, 0, 0, 0, 0, 0.97422, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.01973, 0, 0, 0, 0, 0.97422, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	33.333333% { -webkit-transform: matrix3d(1.01191, 0, 0, 0, 0, 0.97618, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.01191, 0, 0, 0, 0, 0.97618, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	35.416667% { -webkit-transform: matrix3d(1.00526, 0, 0, 0, 0, 0.98122, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00526, 0, 0, 0, 0, 0.98122, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	37.5% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 0.98773, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 0.98773, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	39.583333% { -webkit-transform: matrix3d(0.99617, 0, 0, 0, 0, 0.99433, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99617, 0, 0, 0, 0, 0.99433, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	41.666667% { -webkit-transform: matrix3d(0.99368, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99368, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	43.75% { -webkit-transform: matrix3d(0.99237, 0, 0, 0, 0, 1.00413, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99237, 0, 0, 0, 0, 1.00413, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	45.833333% { -webkit-transform: matrix3d(0.99202, 0, 0, 0, 0, 1.00651, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99202, 0, 0, 0, 0, 1.00651, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	47.916667% { -webkit-transform: matrix3d(0.99241, 0, 0, 0, 0, 1.00726, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99241, 0, 0, 0, 0, 1.00726, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	50% { opacity: 1; -webkit-transform: matrix3d(0.99329, 0, 0, 0, 0, 1.00671, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99329, 0, 0, 0, 0, 1.00671, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	52.083333% { -webkit-transform: matrix3d(0.99447, 0, 0, 0, 0, 1.00529, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99447, 0, 0, 0, 0, 1.00529, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	54.166667% { -webkit-transform: matrix3d(0.99577, 0, 0, 0, 0, 1.00346, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99577, 0, 0, 0, 0, 1.00346, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	56.25% { -webkit-transform: matrix3d(0.99705, 0, 0, 0, 0, 1.0016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99705, 0, 0, 0, 0, 1.0016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	58.333333% { -webkit-transform: matrix3d(0.99822, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99822, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	60.416667% { -webkit-transform: matrix3d(0.99921, 0, 0, 0, 0, 0.99884, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99921, 0, 0, 0, 0, 0.99884, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	62.5% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 0.99816, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 0.99816, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	64.583333% { -webkit-transform: matrix3d(1.00057, 0, 0, 0, 0, 0.99795, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00057, 0, 0, 0, 0, 0.99795, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	66.666667% { -webkit-transform: matrix3d(1.00095, 0, 0, 0, 0, 0.99811, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00095, 0, 0, 0, 0, 0.99811, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	68.75% { -webkit-transform: matrix3d(1.00114, 0, 0, 0, 0, 0.99851, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00114, 0, 0, 0, 0, 0.99851, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	70.833333% { -webkit-transform: matrix3d(1.00119, 0, 0, 0, 0, 0.99903, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00119, 0, 0, 0, 0, 0.99903, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	72.916667% { -webkit-transform: matrix3d(1.00114, 0, 0, 0, 0, 0.99955, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00114, 0, 0, 0, 0, 0.99955, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	75% { -webkit-transform: matrix3d(1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	77.083333% { -webkit-transform: matrix3d(1.00083, 0, 0, 0, 0, 1.00033, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00083, 0, 0, 0, 0, 1.00033, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	79.166667% { -webkit-transform: matrix3d(1.00063, 0, 0, 0, 0, 1.00052, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00063, 0, 0, 0, 0, 1.00052, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	81.25% { -webkit-transform: matrix3d(1.00044, 0, 0, 0, 0, 1.00058, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00044, 0, 0, 0, 0, 1.00058, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	83.333333% { -webkit-transform: matrix3d(1.00027, 0, 0, 0, 0, 1.00053, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00027, 0, 0, 0, 0, 1.00053, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	85.416667% { -webkit-transform: matrix3d(1.00012, 0, 0, 0, 0, 1.00042, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00012, 0, 0, 0, 0, 1.00042, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	87.5% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1.00027, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1.00027, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	89.583333% { -webkit-transform: matrix3d(0.99991, 0, 0, 0, 0, 1.00013, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99991, 0, 0, 0, 0, 1.00013, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	91.666667% { -webkit-transform: matrix3d(0.99986, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99986, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	93.75% { -webkit-transform: matrix3d(0.99983, 0, 0, 0, 0, 0.99991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99983, 0, 0, 0, 0, 0.99991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	95.833333% { -webkit-transform: matrix3d(0.99982, 0, 0, 0, 0, 0.99985, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99982, 0, 0, 0, 0, 0.99985, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	97.916667% { -webkit-transform: matrix3d(0.99983, 0, 0, 0, 0, 0.99984, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99983, 0, 0, 0, 0, 0.99984, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	100% { opacity: 1; -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+}
+
+@keyframes anim-open {
+	0% { opacity: 0; -webkit-transform: matrix3d(0.7, 0, 0, 0, 0, 0.7, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.7, 0, 0, 0, 0, 0.7, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	2.083333% { -webkit-transform: matrix3d(0.75266, 0, 0, 0, 0, 0.76342, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.75266, 0, 0, 0, 0, 0.76342, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	4.166667% { -webkit-transform: matrix3d(0.81071, 0, 0, 0, 0, 0.84545, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.81071, 0, 0, 0, 0, 0.84545, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	6.25% { -webkit-transform: matrix3d(0.86808, 0, 0, 0, 0, 0.9286, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.86808, 0, 0, 0, 0, 0.9286, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	8.333333% { -webkit-transform: matrix3d(0.92038, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.92038, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	10.416667% { -webkit-transform: matrix3d(0.96482, 0, 0, 0, 0, 1.05202, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.96482, 0, 0, 0, 0, 1.05202, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	12.5% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1.08204, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1.08204, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	14.583333% { -webkit-transform: matrix3d(1.02563, 0, 0, 0, 0, 1.09149, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.02563, 0, 0, 0, 0, 1.09149, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	16.666667% { -webkit-transform: matrix3d(1.04227, 0, 0, 0, 0, 1.08453, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.04227, 0, 0, 0, 0, 1.08453, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	18.75% { -webkit-transform: matrix3d(1.05102, 0, 0, 0, 0, 1.06666, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.05102, 0, 0, 0, 0, 1.06666, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	20.833333% { -webkit-transform: matrix3d(1.05334, 0, 0, 0, 0, 1.04355, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.05334, 0, 0, 0, 0, 1.04355, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	22.916667% { -webkit-transform: matrix3d(1.05078, 0, 0, 0, 0, 1.02012, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.05078, 0, 0, 0, 0, 1.02012, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	25% { -webkit-transform: matrix3d(1.04487, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.04487, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	27.083333% { -webkit-transform: matrix3d(1.03699, 0, 0, 0, 0, 0.98534, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.03699, 0, 0, 0, 0, 0.98534, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	29.166667% { -webkit-transform: matrix3d(1.02831, 0, 0, 0, 0, 0.97688, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.02831, 0, 0, 0, 0, 0.97688, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	31.25% { -webkit-transform: matrix3d(1.01973, 0, 0, 0, 0, 0.97422, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.01973, 0, 0, 0, 0, 0.97422, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	33.333333% { -webkit-transform: matrix3d(1.01191, 0, 0, 0, 0, 0.97618, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.01191, 0, 0, 0, 0, 0.97618, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	35.416667% { -webkit-transform: matrix3d(1.00526, 0, 0, 0, 0, 0.98122, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00526, 0, 0, 0, 0, 0.98122, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+
+	37.5% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 0.98773, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 0.98773, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	39.583333% { -webkit-transform: matrix3d(0.99617, 0, 0, 0, 0, 0.99433, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99617, 0, 0, 0, 0, 0.99433, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	41.666667% { -webkit-transform: matrix3d(0.99368, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99368, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	43.75% { -webkit-transform: matrix3d(0.99237, 0, 0, 0, 0, 1.00413, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99237, 0, 0, 0, 0, 1.00413, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	45.833333% { -webkit-transform: matrix3d(0.99202, 0, 0, 0, 0, 1.00651, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99202, 0, 0, 0, 0, 1.00651, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	47.916667% { -webkit-transform: matrix3d(0.99241, 0, 0, 0, 0, 1.00726, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99241, 0, 0, 0, 0, 1.00726, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	50% { opacity: 1; -webkit-transform: matrix3d(0.99329, 0, 0, 0, 0, 1.00671, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99329, 0, 0, 0, 0, 1.00671, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	52.083333% { -webkit-transform: matrix3d(0.99447, 0, 0, 0, 0, 1.00529, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99447, 0, 0, 0, 0, 1.00529, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	54.166667% { -webkit-transform: matrix3d(0.99577, 0, 0, 0, 0, 1.00346, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99577, 0, 0, 0, 0, 1.00346, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	56.25% { -webkit-transform: matrix3d(0.99705, 0, 0, 0, 0, 1.0016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99705, 0, 0, 0, 0, 1.0016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	58.333333% { -webkit-transform: matrix3d(0.99822, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99822, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	60.416667% { -webkit-transform: matrix3d(0.99921, 0, 0, 0, 0, 0.99884, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99921, 0, 0, 0, 0, 0.99884, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	62.5% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 0.99816, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 0.99816, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	64.583333% { -webkit-transform: matrix3d(1.00057, 0, 0, 0, 0, 0.99795, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00057, 0, 0, 0, 0, 0.99795, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	66.666667% { -webkit-transform: matrix3d(1.00095, 0, 0, 0, 0, 0.99811, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00095, 0, 0, 0, 0, 0.99811, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	68.75% { -webkit-transform: matrix3d(1.00114, 0, 0, 0, 0, 0.99851, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00114, 0, 0, 0, 0, 0.99851, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	70.833333% { -webkit-transform: matrix3d(1.00119, 0, 0, 0, 0, 0.99903, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00119, 0, 0, 0, 0, 0.99903, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	72.916667% { -webkit-transform: matrix3d(1.00114, 0, 0, 0, 0, 0.99955, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00114, 0, 0, 0, 0, 0.99955, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	75% { -webkit-transform: matrix3d(1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	77.083333% { -webkit-transform: matrix3d(1.00083, 0, 0, 0, 0, 1.00033, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00083, 0, 0, 0, 0, 1.00033, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	79.166667% { -webkit-transform: matrix3d(1.00063, 0, 0, 0, 0, 1.00052, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00063, 0, 0, 0, 0, 1.00052, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	81.25% { -webkit-transform: matrix3d(1.00044, 0, 0, 0, 0, 1.00058, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00044, 0, 0, 0, 0, 1.00058, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	83.333333% { -webkit-transform: matrix3d(1.00027, 0, 0, 0, 0, 1.00053, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00027, 0, 0, 0, 0, 1.00053, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	85.416667% { -webkit-transform: matrix3d(1.00012, 0, 0, 0, 0, 1.00042, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00012, 0, 0, 0, 0, 1.00042, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	87.5% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1.00027, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1.00027, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	89.583333% { -webkit-transform: matrix3d(0.99991, 0, 0, 0, 0, 1.00013, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99991, 0, 0, 0, 0, 1.00013, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	91.666667% { -webkit-transform: matrix3d(0.99986, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99986, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	93.75% { -webkit-transform: matrix3d(0.99983, 0, 0, 0, 0, 0.99991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99983, 0, 0, 0, 0, 0.99991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	95.833333% { -webkit-transform: matrix3d(0.99982, 0, 0, 0, 0, 0.99985, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99982, 0, 0, 0, 0, 0.99985, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	97.916667% { -webkit-transform: matrix3d(0.99983, 0, 0, 0, 0, 0.99984, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99983, 0, 0, 0, 0, 0.99984, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+	100% { opacity: 1; -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+}
+
+@-webkit-keyframes anim-close {
+	0% { opacity: 1; }
+	100% { opacity: 0; -webkit-transform: scale3d(0.8, 0.8, 1); }
+}
+
+@keyframes anim-close {
+	0% { opacity: 1; }
+	100% { opacity: 0; -webkit-transform: scale3d(0.8, 0.8, 1); transform: scale3d(0.8, 0.8, 1); }
+}
+
+@media screen and (min-width: 1705px)  and  (max-width: 1805px) {
+  .dialog__content{font-size: 72px;}
+}
+@media screen and (min-width: 1605px)  and  (max-width: 1705px) {
+  .dialog__content{font-size: 68px;}
+}
+@media screen and (min-width: 1505px)  and  (max-width: 1605px) {
+  .dialog__content{font-size: 65px;}
+}
+@media screen and (min-width: 1405px)  and  (max-width: 1505px) {
+  .dialog__content{font-size: 61px;}
+}
+@media screen and (min-width: 1305px)  and  (max-width: 1405px) {
+  .dialog__content{font-size: 58px;}
+}
+@media screen and  (max-width: 1305px) {
+  .dialog__content{font-size: 55px;}
+}

service/static/css-bak/toolBox.css

@@ -0,0 +1,803 @@
+@font-face {font-family: "SourceHanSansCN";src: url("../fonts/SourceHanSansCN.woff2") format("woff2"),url("../fonts/SourceHanSansCN.woff") format("woff"),url("../fonts/SourceHanSansCN.ttf") format("truetype");font-weight: normal;font-style: normal;}
+/* html,body{height: 100%;width: 100%;margin: 0px;padding: 0px;overflow: hidden;font-size: 75px;}
+@media screen and (min-width: 1705px)  and  (max-width: 1805px) {
+  html{font-size: 72px;}
+}
+@media screen and (min-width: 1605px)  and  (max-width: 1705px) {
+  html{font-size: 68px;}
+}
+@media screen and (min-width: 1505px)  and  (max-width: 1605px) {
+  html{font-size: 65px;}
+}
+@media screen and (min-width: 1405px)  and  (max-width: 1505px) {
+  html{font-size: 61px;}
+}
+@media screen and (min-width: 1305px)  and  (max-width: 1405px) {
+  html{font-size: 58px;}
+}
+@media screen and  (max-width: 1305px) {
+  html{font-size: 55px;}
+  }
+} */
+
+ html,body{height: 100%;width: 100%;margin: 0px;padding: 0px;overflow: hidden; }
+
+
+
+*{box-sizing: border-box; font-family:OpenSans, "Microsoft YaHei";   background-size: contain;  background-repeat: no-repeat; background-position: center center; }
+.editor a{text-decoration: none;color:#333333;}
+.editor ul li{display: inline-block;list-style: none; width:100%}
+.editor ul{margin: 0px;padding: 0px;}
+.editor input,textarea{font: 14px "Microsoft YaHei";}
+.editor input[type="text"]:focus{border: 1px solid #09e1c0;}
+
+.scrollBox{width: 282px;height: 100%;}
+.scrollBox:nth-child(n+3){display: none;}
+.introduce-top{color: white;font-family:"Microsoft YaHei"; font-size:14px;margin:10px 0 0 10px;z-index:60;position: absolute;left: 0;top: 0;width: auto;height: 48px;}
+.introduce-top .introduce-button{padding-right: 25px;filter: drop-shadow(0px 1px 1px rgba(153,153,153,1));border-radius: 5px;background: url("../images/introduce_close.png") no-repeat;background-size: 16px; transition:background-color 0.3s; background-position:100% 50%;padding-left:0px;width:100%;height:48px;display:flex;display:-webkit-flex;font-size:16px;align-items:center; cursor:pointer;}
+.introduce-button a{display: inline-block;}
+.introduce-button .introduce-button-fImg{width: 30px;height: auto;margin-right:6px;}
+.introduce-button .introduce-button-lImg{width:1px;height:auto;margin-right:5px;}
+.introduce-top.open .introduce-button{background-image:url("../images/introduce_open.png")}
+.introduce-top .addIntroduce-bg{background: url("../images/introduce_close.png") no-repeat rgba(0,0,0,0.45);background-size: 16px;background-position:94% 50%;}
+.introduce-top .introduce-button span{margin-left:6px;letter-spacing:1px; font-weight:600;font-size:16px;margin-top: 2px;}
+.introduce-top .introduce-detailBox h3{font-size:12px; margin-bottom: 13px; font-weight:600;}
+.introduce-top .introduce-detailBox span{    line-height: 22px;text-align: justify;word-break: break-all;color: white;}
+.introduce-top .introduce-detailBox{position: absolute;border-radius: 3px;max-height:0px;width:320px;margin-top:5px;margin-left:41px;overflow:hidden;transition:max-height 0.25s ease-out;transform: translate3d(0, 0, 0);}
+.introduce-top.open .introduce-detailBox{max-height: 600px;}
+.introduce-top .introduce-detail{text-align:justify;width:100%;letter-spacing:1px;word-wrap: break-word;padding:14px 12px 14px 14px;background:rgba(0,0,0,0.2);}
+.introduce-top .introduce-detail p{text-align: justify;font-weight:400;line-height: 22px;word-break: break-all;color: white;}
+.bgNone{background: none !important;}
+.divNone{display: none !important;}
+ 
+.introduce-top .introduce-detail a,  #hotspot a{ text-decoration: underline !important; color:#fff !important;  margin: 0 2px !important; padding: 0 !important;       }
+.introduce-top .introduce-detail a *{color:#fff !important; }
+/* #hotspot .picBottom a,#hotspot .picRight a,#hotspot .formInfo a{color:#2d2d2d !important;}   */
+.introduce-top .introduce-detail a:hover,  #hotspot a:hover{color:#09e1c0 !important;}
+.introduce-top .introduce-detail a:hover *,  #hotspot a:hover *{color:#09e1c0 !important;}
+
+.toolTop{width: 282px;height: 48px;background: #5a45df;position: absolute;top: 0px;right: 0px;z-index: 150;display: flex;display: -webkit-flex;justify-content: space-between;align-items: center;}
+.toolTop>div:nth-child(2){display:flex;display:-webkit-flex;align-items:center;font-size:16px;font-weight:bold;  overflow: hidden;}
+.toolTop>div:nth-child(2)>*{ 
+   white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.toolTop-button{display:flex;display:-webkit-flex;width:282px;}
+.toolTop-button>div{opacity:0.7;cursor: pointer;display:flex;display:-webkit-flex;width:94px;height:48px;align-items:center;justify-content:center;}
+.toolTop-button>div:hover{opacity:1;}
+.toolTop-button span{margin-left:5px;font-size:16px;color:#fafafa;}
+.editor{letter-spacing:0.1em;z-index:140;font: 14px "Microsoft YaHei";font-weight:400;color: #333333;width: 282px;height: 100%;background: #f5f5f5;position: absolute;right: 0px;top: 0px;padding-top:48px;box-shadow: 0px 0px 6px #666;-webkit-box-shadow: 0px 0px 6px #666;-moz-box-shadow: 0px 0px 6px #666;}
+.toolBox,.informationBox, .hotPointBox,.styleZBox{margin-top:48px;height:calc(100% - 106px);width:calc(100% + 12px);overflow-y:auto;overflow-x:hidden;    }
+.toolContent,.hotPoint_content,.information_content,.styleZ_content{position: relative; width: 282px;}
+.toolBox_Top{position: absolute;right: 0px;width: 100%;display: flex;display: -webkit-flex;border-bottom:1px solid #ddd;}
+.styleZ_content h3{font-size: 14px;font-weight:normal;margin:20px;}
+.styleZ_content>ul{display:flex;display:-webkit-flex;flex-direction:column;padding:0px 20px;}
+.styleZ_content>ul li{cursor: pointer;display:flex;display:-webkit-flex;justify-content:space-between;align-items:center;margin-bottom:10px;border:1px solid #ddd;border-radius:6px;padding:5px;}
+.styleZ-select{position:relative;width:46%;display:flex;display:-webkit-flex;justify-content:center;}
+.styleZ-select:before{content:"";position:absolute;top:50%;margin-top:-6px;left:15px;width:14px;height:14px;border-radius:7px;border:1px solid #ddd;}
+.styleZ_content>ul li:hover{background: #fafafa;}
+.styleZ_content>ul li.active{background:white;border-color:#09e1c0;}
+.styleZ_content>ul li.active .styleZ-select:before{background:#09e1c0;border-color:#09e1c0;}
+.styleZ_content>ul li.active .styleZ-select:after{content:"";position:absolute;top:50%;margin-top:-2.5px;left:18.5px;width:6px;height:6px;border-radius:7px;background:white;}
+.toolBox_Top input{background: #fff !important;transition:background 0.1s;letter-spacing:0.1em;display: inline-block;width: 25%;height: 48px;color: #999999;font: 16px initial;background: white;outline: none;-webkit-appearance: none;-moz-appearance: none;-o-appearance: none;appearance: none;border:none;cursor: pointer;}
+.toolBox_Top input:hover,.toolBox-Top-input{background: #fafafa !important;color:#333333 !important;}
+.toolBox_Top .toolBox_nav{position: relative;width: 100%;height: 100%;display: flex;display: -webkit-flex;}
+.toolBox_Top .toolBox_nav:before{content: "";background: #09e1c0;height: 2px;width:25%;position: absolute;bottom:0px;left:0px;transition:left 0.26s ease-out;}
+.toolBox_Top .toolBox_nav-left0:before{left: 0px;}
+.toolBox_Top .toolBox_nav-left1:before{left: 25%;}
+.toolBox_Top .toolBox_nav-left2:before{left: 50%;}
+.toolBox_Top .toolBox_nav-left3:before{left: 75%;}
+.function{width: 282px;height: 48px;border-top: 1px solid #cccccc;border-bottom: 1px solid #ddd;margin-top: 20px;}
+.function ul{display: flex;display: -webkit-flex;}
+.function li{width: 94px;height: 48px;display: flex;display: -webkit-flex;justify-content: center;align-items: center;}
+.function li img{vertical-align:baseline;}
+.function li>a{color: #333;display:  flex;display: -webkit-flex;justify-content:  center;align-items:  center;}
+.function li:hover{opacity:0.7;}
+.function li:nth-child(1) span,.function li:nth-child(2) span{padding-left: 5px;}
+#export{display: inline-block;width: 60px;height: 28px;border:none;border-radius: 2px;-webkit-border-radius: 2px;-moz-border-radius: 2px;color: white;background: #09e1c0;text-align: center;line-height: 28px;}
+#export:hover{background: #22f0d0;}
+#draw_Tools a{position:relative;}
+#draw_Tools a:before{position:absolute;top:0px;left:0px;content:"";width:60px;height:60px;transition:border 0.2s ease-in-out;}
+.draw_Tools-a:before{border:1px solid #09e1c0;}
+.Basic_drawing ul{padding-top: 20px;display: flex;display: -webkit-flex;}
+.Basic_drawing ul li{width: 33%;display: flex;display: -webkit-flex;flex-direction: column;align-items: center;}
+.doors_windows{border-bottom: 1px solid #ddd;padding-bottom: 18px;}
+.doors_windows ul{display: flex;display: -webkit-flex;flex-wrap: wrap;}
+.doors_windows ul li{width: 33%;display: flex;display: -webkit-flex;flex-direction: column;align-items: center;padding-top: 16px;}
+.Basic_drawing span,.doors_windows span{letter-spacing: 2px;margin-top: 8px;color: #333;}
+.controlBox{padding-top:28px;width: 282px;height:80px;border-bottom: 1px solid #cccccc;transition: all 1s linear;display: none;opacity: 0;}
+#controlName{padding-left: 20px;font-size: 16px;}
+.controlBox a{position: absolute;right: 20px;color:#cccccc;}
+.controlBox a:hover{color:#999999;}
+#pjtName{width: 100%;}
+#edit2Box,#edit1Box{width: 100%;height: 84px;position:relative;background: white;}
+#edit2,#edit1{width:100%;height:100%;overflow: hidden;border: 1px solid white;}
+#edit2Box .w-e-toolbar,#edit1Box .w-e-toolbar{position:absolute;bottom: 4px;right: 4px;padding: 0px;width: 20px;height: 20px;}
+#edit2Box .w-e-menu,#edit1Box .w-e-menu{padding: 0px;}
+#edit2Box .w-e-text,#edit1Box .w-e-text{width: calc(100% + 20px) !important;word-break: break-all;overflow-y: scroll;padding: 0px 30px 0px 10px; -webkit-user-select:auto;}
+#edit2Box .w-e-text *,#edit1Box .w-e-text *{-webkit-user-select:text;} 
+
+#edit2Box .w-e-icon-link,#edit1Box .w-e-icon-link{position:relative;display: block;width: 20px;height: 20px;}
+#edit2Box .w-e-text a,#edit1Box .w-e-text a{color:#079eec;text-decoration:underline;}
+#edit2Box .w-e-text-container,#edit1Box .w-e-text-container{position: static;}
+#edit2Box .w-e-icon-link:before,#edit1Box .w-e-icon-link:before{background: url("../images/linkBtn.png") no-repeat center;width: 20px;height: 20px;position: absolute;top: 0px;left: 0px;background-size: cover;}
+#edit2Box .w-e-text-container .w-e-panel-container,#edit1Box .w-e-text-container .w-e-panel-container{box-shadow: 1px 1px 2px #ccc;z-index: 99;top: 92px;}
+#edit2Box .addLink-content-row,#edit1Box .addLink-content-row{display:flex;display:-webkit-flex;justify-content:space-between;font-size:14px;height: 25px;}
+#edit2Box .addLink-content-row span,#edit1Box .addLink-content-row span{color:#999;}
+#edit2Box .addLink-content input,#edit1Box .addLink-content input{height:28px;border:1px solid #09e1c0;margin:0px 0px 6px}
+#edit2Box h5,#edit1Box h5{font-size:12px;font-weight:normal;color:#999;margin-bottom:20px;}
+#edit2Box .addLink-cancel,#edit1Box .addLink-cancel{width:75px;height:28px;background:#ccc;border-radius:0px;color:white;margin-left:10px}
+#edit2Box .addLink-cancel:hover,#edit1Box .addLink-cancel:hover{background: #d1d1d1;}
+#edit2Box .w-e-button-container,#edit1Box .w-e-button-container{display:flex;display:-webkit-flex;justify-content:flex-end;}
+#edit1Box .w-e-panel-tab-content:after,#edit2Box .w-e-panel-tab-content:after{position:absolute;width:0px;height:0px;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:14px solid #777;top:-46px;right:15px;content:"";}
+
+
+/* 画墙一栏*/
+
+.information-subDiv{padding: 20px 0px;margin: 0px 20px;border-bottom: 1px solid #ddd;}
+.editor .information-subDiv ul li{display:flex;display:-webkit-flex;justify-content: space-between;}
+.information-subDiv:first-child li{flex-direction:column;margin-bottom: 20px;}
+.information-subDiv:first-child span{margin-bottom: 6px;}
+.information-subDiv:last-child{ border-bottom:  none;}
+.information-subDiv:last-child li:first-child{margin-bottom:4px;}
+.information_input{width: 282px;}
+.information_input input[type="file"]{position: relative;display: none;}
+.information_input input{width: 160px;height: 28px;font-size: 14px;outline: none;-webkit-appearance: none;-moz-appearance: none;-o-appearance: none;appearance: none;border: 1px solid white;color: #999999;}
+.information_input input::placeholder{font-size: 14px;color:#cccccc;}
+.information_input input:-ms-input-placeholder{font-size: 14px;color:#cccccc;}
+.information_input input::-ms-input-placeholder{font-size: 14px;color:#cccccc;}
+.information_input input[type="button"]{width: 60px;height: 28px;border:none;border-radius: 2px;-webkit-border-radius: 2px;-moz-border-radius: 2px;color: white;background: #09e1c0;text-align: center;font-size: 14px;cursor: pointer;margin-top:10px;}
+.information_input input[type="button"]:hover{background: #22f0d0;}
+.information_show ul{display: flex;display: -webkit-flex;flex-direction: column;padding: 20px 0px;margin: 0 20px;}
+.information_show ul li{height: 28px;display: flex;display: -webkit-flex;justify-content: space-between;align-items: center;}
+.information_input .right{    position: relative; width: 160px;  font-size: 14px;line-height: 28px;} 
+.information_input input, .information_input label{outline: none;background-color:#fff;padding: 0 10px;color: #999999;}
+.close_linkDiv{position: absolute;bottom: 10px;right: 10px;width: 75px;height: 28px;cursor: pointer;z-index: 99999;}
+#setEntry .ImgPreview{height:80px;}
+.information_input label{cursor:pointer;}
+.show_title{padding-left: 0 !important;}
+.show_data{color: #999999;display: flex;display: -webkit-flex;flex-direction: row-reverse;}
+.show_count{color: #999}
+.show_data span{padding-right: 5px;}
+/* 信息一栏*/.hotPointBox{overflow-y:hidden} 
+#ok{width:100%;height: 48px;display:none;text-align:center;line-height:48px;cursor:pointer;background: #09e1c0;color:#fff;}
+#ok:hover{background: #14ebca}
+.hotPoint_content{height: 100%;}
+.hotPoint_content .point>*{height: 40px;display: flex;display: -webkit-flex;width: 282px;align-items:center;justify-content: space-between;border-bottom: 1px #ddd solid;padding-left: 20px;color: #999;/* opacity: 0.6;*/cursor: pointer;display:none;background:#fafafa;}
+.hotPoint_content #listPoint{display:flex;-webkit-box-flex: 1;}
+.hotPoint_content #listPoint>*{display:flex;}
+.hotPoint_content #listPoint>div:first-child{border-right:1px solid #eeeeee;}
+.hotPoint_content #listPoint>div:hover{background: #fff;}
+.hotPoint_content .point>* div{display: flex;display: -webkit-flex;align-items: center;}
+.hotPoint_content .point>* span{padding-left: 5px;}
+.hotPoint_content .point>* a{padding-right: 20px;}
+/* .hotPoint_content .point>*:hover{opacity: 1;}*/
+#snap{padding:20px 0px;display: flex;display: -webkit-flex;align-items: center;flex-direction: column;}
+#hotPoint_button{background: #09e1c0;height: 48px;display: flex;display: -webkit-flex;width:242px;align-items: center;justify-content: center;color: white;cursor: pointer;transition: background 0.2s;}
+#hotPoint_button.unable{pointer-events: none;/* opacity:0.5;*/cursor:default;background: #ddd;}
+#hotPoint_button span{padding-left: 5px;}
+#hotPoint_button:hover{background: #14ebca;}
+#hotPoint_input{display:none;width: 282px;border-bottom: 1px #ddd solid; max-height: 800px;transition: max-height .3s; overflow: hidden;}
+#hotPoint_input #change{display:flex;-webkit-box-flex: 1;text-align:center;border-bottom:1px solid #ddd;height:40px;width:100%;}
+#hotPoint_input #change>div{cursor:pointer;width: 100%;height: 100%;line-height: 40px;}
+#hotPoint_input #change>div:first-child{border-right:1px solid #eeeeee;}
+#hotPoint_input #change>div:hover{background: #fff;}
+#hotPoint_input>ul{padding:8px 20px 15px;display: flex;display: -webkit-flex;flex-wrap: wrap;background: #eee;}
+.hotPoint-title{position: relative;}
+.hotPoint-title:after{position: absolute;top: 0px;right: -10px;content: "*";color:#f56c6c;}
+#hotPoint_input>ul>li{position: relative;padding: 5px 0;line-height:30px;display: flex;display: -webkit-flex;flex-basis: 100%;align-items:center;justify-content: space-between;align-items: flex-start;}
+#hotPoint_input>ul>li.warn input{border: 1px solid #f56c6c;}
+#hotPoint_input>ul>li.warn input::placeholder{color: #f56c6c !important;}
+.redPoint{position:relative;}
+.hotPoint_content .redPoint:after{position: absolute;top: 0px;left: 32px;content: "*";color:#f56c6c;}
+.information_input .redPoint:after{position: absolute;top: 0px;left: 62.5px;content: "*";color:#f56c6c;}
+#type .redPoint:after{left:32px}
+#hotPoint_input .unComplete{display:none; color:#f56c6c;font-size: 0.9em;position: absolute;bottom: 12px;right: 10px;}
+.information_input .unComplete{display: none;color:#f56c6c;font-size: 0.9em;position: absolute;bottom: 16px;right: 28px;}
+#project-name2:before{position:absolute;right:0px;top:2px;content:""attr(data-size)"";color:#999;}
+#project-intro2{position:relative;}
+#project-intro2:before{position:absolute;right:0px;top:2px;content:""attr(data-size)"";color:#999;}
+#project-name1,#project-intro1{position:relative;width:100%;}
+#project-name1:before,#project-intro1:before{position:absolute;right:0px;top:2px;content:""attr(data-size)"";color:#999;}
+
+#hotPoint_input>ul>li span{margin-top:5px;}
+#hotPoint_input input[type="file"]{position: relative;display: none;}
+*{outline:none}
+#hotPoint_input input.white,textarea.white{font-size: 14px;outline: none;-webkit-appearance: none;-moz-appearance: none;-o-appearance: none;appearance: none;border: 1px solid white;color: #999999;resize: vertical;}
+#hotPoint_input .ImgPreview,.information_input .ImgPreview{width:160px;height:114px;background-repeat: no-repeat;background-position: center center; margin-top: 10px;background-size: contain;/* border: 1px solid white;*/}
+#showInformation{height:80px;position:  relative;}
+.showInformation-error:after{content:"";width:100%;height:100%;position:absolute;left:0;top:0;background:url("../images/pic_error.png") no-repeat center;}
+#hotPoint_input>ul>li:nth-child(n+6){padding:0px}
+#select{display: inline-block;position:relative;background:#eee;}
+#select .showStyle{background:#eee;position:absolute;top:0px;left:0px;display:flex;display:-webkit-flex;justify-content:space-between;align-items:center;width:160px;height:30px;}
+#select .showStyle>div:first-child{display:flex;display:-webkit-flex;align-items:center;}
+#select .showStyle>div:first-child img{margin-top:-1px}
+#hotPoint_input>ul>li:nth-child(5){margin-top:-11px;}
+#hotPoint_input>ul>li:nth-child(6){margin-top:-8px;}
+#select .showStyle p{margin-left:5px;      cursor: default;}
+#styleBtn{opacity: 0.7;width:16px;height:16px;background:url("../images/styleBtn.png") no-repeat;cursor: pointer;}
+#styleBtn:hover{opacity: 1;}
+#select ul{display: none;padding:10px 30px 15px 10px;font-size:12px;width: 160px;z-index: 15;position:absolute;background: white;box-shadow: 0px 1px 6px 1px rgba(51,51,51,0.3);-webkit-box-shadow: 0px 1px 6px 1px rgba(51,51,51,0.3);-moz-box-shadow:0px 1px 6px 1px rgba(51,51,51,0.3);left:0px;top:30px;flex-wrap:wrap;}
+#select ul li:nth-child(3),#select ul li:nth-child(4){margin-top:20px}
+#select ul li:nth-child(3):after{position:absolute;content:"";top:-10px;left:0px;width:140px;height:1px;background:#ddd;}
+#select ul li span{margin-top:2px;}
+#select.open #styleBtn{opacity: 0.7;}
+#select.open ul{display:flex;display:-webkit-flex;}
+#select ul li{ margin-right: 2px;cursor: pointer;display:flex;display:-webkit-flex;flex-direction:column; padding-top: 4px;align-items:center; width:46px; height:61px;position:relative;/* float: left; */}#select ul li:before{position:absolute;content:"";left:0px;top:0px; width:46px;height:64px;}#select ul li:hover:before{border:1px solid #ddd;}
+#select span{line-height:15px;}
+.information_input>ul>li:nth-child(4):before{position:absolute;content:"标志大小";bottom:17px;left:20px;}
+#hotPoint_input>ul>li:nth-child(1){line-height:20px}
+#hotPoint_input>ul>li:nth-child(4){line-height:16px}
+.hotPoint_content .point>div.chosen{color:#333;background:#fff;}
+.hotPoint_content .point .coordinate{background-image:url(../images/coordinate2.png);height: 16px;width: 16px;}
+.hotPoint_content .point>div.chosen .coordinate{background-image:url(../images/coordinate.png);}
+.hotPoint_content .point .delete{/* height:46px;width:46px;background-repeat: no-repeat;background-position: center center;background-image:url(../images/coordinateClose.png);background-size: initial;*/border-radius: 7px;height: 14px;width: 14px;margin-right: 14px;padding: 2px;font-size: 12px;background:transparent;transition: background 0.3s;}
+.hotPoint_content .point>div .delete::before{font-family: "FontAwesome";content: "\f00d";color: #bababa;transition: color 0.3s;}
+.hotPoint_content .point>div .delete:hover{background: #ccc;}
+.hotPoint_content .point>div.chosen .delete::before{color: #808080;}
+.hotPoint_content .point>div .delete:hover::before{color: #fff;}
+#snapPoint>div:first-child{border-top: 1px #ddd solid;margin-top:20px;} 
+#snapPoint>div:hover{background: #fff;}
+.selectButton{background: url("../images/styleButton2.png") white no-repeat;background-position:92% 50%;}
+#hotPoint_input textarea,#hotPoint_input li input,#hotPoint_input #select, #hotPoint_input label,#hotPoint_input li .right,.information_input label{width: 160px;height: 28px;line-height:28px;padding:0 8px;max-height:500px;/* overflow:auto;*//* overflow:hidden;*/border:none;}
+
+#hotPoint_input textarea{width: 160px;height: 56px;line-height:22px;padding:0 8px;background-color:#fafafa;max-height:500px;/* overflow:auto;*//* overflow:hidden;*/border:none;}
+#hotPoint_input textarea.focus,#hotPoint_input li input.white:focus{background:#fff;color:#333;border: 1px solid #09e1c0;}
+label.btn{cursor:pointer;display: inline-block;background:#09e1c0;color: #fff;text-align: center;transition: background 0.2s;letter-spacing:0.05em;}
+label.btn:hover{background:#14ebca;color:#fff;}
+#hotPoint_input label:hover,.information_input label:hover{background: #09cbae;}
+#hotPoint_input input::placeholder{font-size: 14px;color:#cccccc;}
+#hotPoint_input input:-ms-input-placeholder{font-size: 14px;color:#cccccc;}
+#hotPoint_input input::-ms-input-placeholder{font-size: 14px;color:#cccccc;}
+#hotPoint_input #hotPoint_sumbit{width: 60px;height: 28px;border:none;border-radius: 2px;-webkit-border-radius: 2px;-moz-border-radius: 2px;color: white;background: #09e1c0;text-align: center;font-size: 14px;cursor: pointer;}
+#hotPoint_input input[type="button"]:hover{background: #22f0d0;}
+.hotPoint_list{position:relative;    overflow-y: auto; overflow-x: hidden; height: calc(100% - 88px);}
+.hotPoint_list #list{/* position:absolute;*/width: 100%;flex-direction: column-reverse; border-top:1px solid #ddd;}
+.hotPoint_list #list>li{/* position:absolute;*/padding-left: 20px;display:flex;display:-webkit-flex;justify-content: flex-start;align-items: center; width: 282px;height: 48px;border-bottom: 1px solid #ddd;cursor: pointer;background: #fafafa;transition: background 0.1s;position:  relative;}
+.hotPoint_list #list>li:before{position:absolute;content:"";width:0px;height:48px;background:#09e1c0;left:0px;top:-1px;transition: width 0.2s;}
+.hotPoint_list #list>li.open:before{ width:8px !important;}
+.hotPoint_list #list>li{ background:#fff;}
+.hotPoint_list #list>li.open{  }
+.hotPoint_list #list>li:hover{background:#eee;} 
+.hotPoint_list #list div{/* display: flex;display: -webkit-flex;*/align-items: center;}
+.hotPoint_list #list>li span{padding-left: 5px;font-weight:bold;  white-space: nowrap;  overflow: hidden; text-overflow: ellipsis;}
+.hotPoint_list #list>li .delete{position: absolute;top: 0px;right: 0px;height: 48px;width: 48px;background-repeat: no-repeat;background-position: center center;background-image: url(../images/del.png);background-size: initial;}
+.hotPoint_list #list>li .delete:hover{background-color:rgba(175, 175, 175, 0.1);}
+.hotPoint_list #list>li .DelConfirm{font-size: 12px;position: absolute;width:60px;z-index: 100;background: #fff;height: 56px;border-radius: 2px;box-shadow: 0 1px 6px 0px rgba(153, 153, 153, 1);text-align: center;line-height: 28px;right: 40px;opacity:0;transform: translateX(15px) scale(0,0);transform-origin:right;transition: transform 0.1s,opacity 0.1s;}
+.hotPoint_list #list>li .DelConfirm.open{opacity:1;transform: translateX(0px) scale(1, 1);}
+/*#list>li .DelConfirm:after{content: '';width: 0;height: 0;border-top: 5px solid transparent;border-left: 8px solid #ffffff;border-bottom: 5px solid transparent;position: absolute;right: -8px;top: 25px;color: #999;}*/
+.hotPoint_list #list>li .DelConfirm>div{height:50%;}
+.hotPoint_list #list>li .DelConfirm>div:hover{background:#eee;}
+.hotPoint_list #list>li .DelConfirm .DelYes{color: rgba(224, 82, 71, 1);}
+.hotPoint_list #list>li div.left{     flex: auto;    max-width: 80%;display: flex;display: -webkit-flex;}
+#information_file{display:none;position:relative;}
+.information_show_div{display:flex;display:-webkit-flex;justify-content:space-between;padding:10px 0px 20px;}
+.information_show_div span{padding-left:20px;line-height: 24px;}
+
+.information_show_div label{width:160px;height:28px;line-height:30px;cursor:pointer;display: inline-block;background:#09e1c0;color: #fff;text-align: center;transition: background 0.2s;letter-spacing:0.05em;}
+
+input::-webkit-input-placeholder, textarea::-webkit-input-placeholder{color: #999 !important;font-weight:normal !important;}
+input:-moz-placeholder, textarea:-moz-placeholder{color:#999 !important;font-weight:normal !important;}
+input::-moz-placeholder, textarea::-moz-placeholder{color:#999 !important;font-weight:normal !important;}
+input:-ms-input-placeholder, textarea:-ms-input-placeholder{color:#999 !important;font-weight:normal !important;} 
+
+.Zprompt-popupBox{ font-family: "Microsoft YaHei"; position:absolute;top:0px;left:0px;background:rgba(0,0,0,0.3);width:100%;height:100%;z-index:200;overflow:auto;}
+.Zprompt-popupBox .center{position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);}
+.Zprompt-popup{padding: 0px;width:600px;height:289px;font-size:14px;box-shadow:0 0 5px #ccc;-moz-box-shadow:0 0 5px #ccc;-webkit-box-shadow:0 0 5px #ccc;color:#333;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background:#fff;}
+.Zprompt-title{width:600px;display:flex;display:-webkit-flex;justify-content:space-between}
+.Zprompt-title a{text-decoration:none;height:20px;width:16px;opacity: 0.7;margin:10px}
+.Zprompt-title a:hover{opacity: 1}
+.Zprompt-title h2{padding-top:45px;padding-left:50px;font-size:24px;font-weight:600;margin:0}
+.Zprompt-main-false{margin-top:15px;width:598px;height:75px;display:flex;display:-webkit-flex;align-items:center;padding-left:49px;margin-left:1px;border-bottom:2px solid #eee;border-top:2px solid #eee;font-weight:700}
+.Zprompt-main-false span{padding-left:10px;font-weight:normal;letter-spacing:1px;}
+.Zprompt-footer{width:600px;height:95px;display:flex;display:-webkit-flex;justify-content:center;align-items:flex-end}
+.Zprompt-footer a{width:120px;height:48px;background:#09e1c0;text-align:center;line-height:48px;color: white;    margin: 0 10px;}
+.Zprompt-footer a:hover{background:#01dab9}
+.Zprompt-footer a.btn1{background:#c5c5c5}
+.Zprompt-footer a.btn1:hover{background:#b1b1b1}
+
+@keyframes flash {
+  0% {  
+	opacity:0;
+  } 
+  20% { 
+	opacity:1;
+  }
+   60% { 
+
+	opacity:1;
+  }
+   100% { 
+	opacity:0;
+  } 
+} 
+.Zprompt-popupBox #Zinfo{    width: 100px; height: 140px; opacity:0;}
+.Zprompt-popupBox #Zinfo.animate{  animation: flash 1s; -webkit-animation: flash 1s; animation-iteration-count:1; } 
+.Zprompt-popupBox #Zinfo .Zimg{    width: 100%; height: 100px;  background-image:url(../images/stips.png);  
+background-repeat: no-repeat;
+background-position: center center;}
+.Zprompt-popupBox #Zinfo .Ztitle{   text-align: center;  font-size: 16px;  letter-spacing:1px;   text-shadow: 2px 2px 6px rgba(27, 27, 27, 0.81);}
+.myAccount-cutAvatar{display: none;position:absolute;top:0px;left:0px;background:rgba(0,0,0,0.3);width:100%;height:100%;z-index:200;overflow:auto;}
+.myAccount-cutAvatar .myAccount-cutAvatar-inner {width:600px;height:543px;position:absolute;background:white;left:50%;top:50%;margin-left:-300px;margin-top:-272px;}
+.myAccount-cutAvatar .myAccount-cutAvatar-top {width:100%;height:95px;border-bottom:2px solid #eeeeee;font-size:24px;display:flex;display:-webkit-flex;justify-content:space-between;}
+.myAccount-cutAvatar .myAccount-cutAvatar-top span {margin-top:40px;margin-left:50px;color: #333;font-weight: bold;}
+.myAccount-cutAvatar .myAccount-cutAvatar-top a {margin:10px;height: 16px;width: 16px;line-height: 1px;opacity: 0.7;}
+.myAccount-cutAvatar .myAccount-cutAvatar-top a:hover{opacity: 1} 
+.myAccount-cutAvatar .myAccount-cutAvatar-main {width:100%;}
+.myAccount-cutAvatar .myAccount-cutAvatar-main {display:flex;display:-webkit-flex;padding:40px 0px 0px 50px;}
+.myAccount-cutAvatar .myAccount-cutAvatar-main>div:first-child {width:500px;height:300px;background:#eeeeee;display:flex;display:-webkit-flex;justify-content:center;align-items:center;}
+.myAccount-cutAvatar .myAccount-cutAvatar-main>div:first-child img {max-width:500px;height:auto;max-height:300px;}
+.myAccount-cutAvatar .myAccount-cutAvatar-inner>div:last-child {text-align:center;}
+.myAccount-cutAvatar input {background:#09e1c0;color:white;width:122px;height:50px;font-size:14px;cursor:pointer;border:1px solid white;outline:none;}
+#discrib .preholder{text-align:center;}
+
+
+
+
+
+#hotPoint_input .project-name,#hotPoint_input .project-intro{
+  flex-direction:column;
+
+  line-height: normal;
+
+}
+#hotPoint_input .project-name input,#hotPoint_input .project-intro>div,   .project-intro{
+  width:100%;
+}
+#hotPoint_input .project-name>span,#hotPoint_input .project-intro>span{
+  margin-bottom: 8px;
+}
+
+#hotPoint_input .project-intro{
+  margin:8px 0px 10px
+}
+.information_input .project-name,.information_input .project-intro{
+   flex-direction:column;
+
+   padding: 6px 0px 10px;
+   line-height: normal;
+}
+ 
+.information_input .project-name input,.information_input .project-intro>div{
+  width:calc( 100% - 40px );
+  margin-left:20px;
+  margin-top: 5px;
+}
+.information_input .project-intro{
+ margin:0px;
+}
+#type{
+     flex-direction:column;
+   width:100%;
+   position: relative;
+   margin: 0px;
+}
+#type a{
+    width:100%;
+}
+
+.noteBox{z-index: 999;display: none;width: 282px;height: 126px;background: white;padding: 20px 0px 0px 20px;opacity: 0;transition: opacity 0.5s ease;position: absolute;}
+.noteBox-row{display: flex;display: -webkit-flex;font-size: 14px;margin-bottom: 10px;}
+.noteBox-row h3{font-size: 14px;color: #333;}
+#noteInput_text{width: 242px;height: 28px;border: 1px solid #ccc;color: #333;padding-left: 10px;}
+.noteBox-row:last-child{justify-content: flex-end;margin-right: 20px;}
+.noteBox-ok{border-radius: 2px;cursor: pointer;width: 32px;height: 20px;color: white;background: #09e1c0;font-size: 12px;display: flex;display: -webkit-flex;justify-content: center;align-items: center;}
+.noteBox-cancel{border-radius: 2px;cursor: pointer;width: 20px;height: 20px;background: #f56c6c;display: flex;display: -webkit-flex;justify-content: center;align-items: center;margin-left: 6px;}
+.noteBox.show{display: block;}
+.noteBox.active{opacity: 1;}
+
+.sizeWaring:before{color:#f56c6c !important;}
+.empty_warn{border:1px solid #f56c6c !important;color: #f56c6c !important;}
+.empty_warn::placeholder{color: #f56c6c !important;}
+
+.hide{ display:none;}
+.unable{pointer-events:none;  opacity:0.5;  }
+
+
+.editor .Main{ 
+	height:20px;
+	align-items: center;
+    display: flex;
+    justify-content: space-between;
+} 
+.editor .Main .scrollBar {
+    position: relative;
+    width: calc(96% - 45px);
+    height: 4px;
+    background-color: #c7c7c7;
+    cursor: pointer;
+}
+.editor .scrollBar .scroll_Track {
+	width: 0px;
+    height: 4px;
+    background-color: #09e1c0;
+}
+.editor .scrollBar .scroll_Thumb {
+	height: 12px;
+    width: 14px;
+    background-color: #919191;
+    /*-webkit-border-radius: 8px;
+    -moz-border-radius: 8px;
+    border-radius: 4px;
+     -webkit-box-shadow: 0px 0px 5px #74b5f5;
+    -moz-box-shadow: 0px 0px 5px #74b5f5;
+    box-shadow: 0px 0px 4px #74b5f5; */
+    position: absolute;
+    margin-top: -8px;
+    cursor: pointer;
+    -webkit-user-select: none;
+}
+.editor .BarTxt {
+	position:relative;
+	width:40px;
+}
+.editor .BarTxt .scrollBarTxt{
+    width: 100%;
+    text-align: center;
+    height: 20px;
+    border: 0;
+    /* border-radius: 4px; */
+    padding: 4px 0;
+    text-align: center;
+    color: #fff;
+    background: #919191;
+    font-size: 12px;
+}
+.editor #floorLogoSize {
+    font-size: 12px;
+    width: 160px;
+}
+.editor #floorLogoSize .slider{
+	float: left;
+    width: 100%;
+}
+
+.editor #scenePSD span{
+	line-height: 24px;
+}
+.editor #scenePSD ul.MenuOptions{
+	width: 100%;
+    overflow: hidden; 
+    background: #fff; 
+    padding: 0px;
+    cursor: pointer;
+    flex-direction: row;
+    align-items: center;
+    
+}
+.editor #scenePSD .MenuOptions li{
+	float: left; 
+	text-align:center;
+	line-height: 28px;
+	font-size:14px;
+	display:inline-block; 
+	color:#999;
+	transition:color 0.1s;
+}
+ 
+
+
+.editor .MenuOptions li.chosen{
+	background-color:#09e1c0;
+	color:#fff !important
+} 
+.editor .MenuOptions li:hover{
+	color: #333;
+}
+.editor .MenuOptions li.chosen:hover{
+	background-color:#09e1c0;
+	color:#fff;
+
+}
+
+.editor .quarterCell{
+	width: 25%;
+} 
+.editor .thirdCell{
+	width: 33.33%;
+}
+.editor .halfCell{
+	width: 50%;
+}
+
+.editor  a.button{
+	width: 100%;
+    height: 30px;
+    background: #0ed8b9;
+    display: inline-block;
+    margin-top: 10px;
+    text-align: center;
+    color: #fff; 
+}
+.editor  a.button:hover{
+	background:#04c7a9;
+}
+.editor  a.button:active{
+	background:#05a089;
+}
+
+
+.editor  #scenePSD .word{
+	margin-top:10px; 
+}
+.editor  #scenePSD .word>*{
+	float:left;
+}
+.editor  #scenePSD .word input{
+	/* width: 75%;  */
+	width:100%;
+}
+ 
+			
+img{
+	pointer-events:none;
+}
+
+ 
+
+ 
+
+
+
+.editor .selection{
+    display: block;
+    position: relative;
+    height: 30px;
+    overflow: hidden;
+    color: #000;
+    padding-right: 40px;
+    padding-left: 10px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    background: #fff;
+    cursor: pointer;
+    outline: none;
+    line-height: 30px;
+	transition-duration:0.1s;
+	border: 1px solid white;
+}
+.editor  .selection:after{
+	content: "\f0d7";
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 30px;
+    height: 30px;
+    font-family: FontAwesome;
+    text-align: center;
+    line-height: 30px;
+}
+.editor  .selection.focus{ 
+	color:#555;
+}
+.editor  ul.listOptions{
+	position: absolute;
+    left: 0px;
+    top: 56px;
+    z-index: 100;
+    width: 100%;
+    overflow: hidden; 
+    color: #9b9b9b;
+    background: #fff;
+    box-shadow: 0 5px 5px rgba(0,0,0,.3);
+	padding:0;
+	margin:0;
+	cursor:pointer;
+} 
+.editor  ul.listOptions>li{
+	height: 30px;
+    list-style-type: none;
+    color: #9b9b9b;
+    padding: 0 10px;
+    line-height: 30px;
+ /*    overflow: hidden; */
+    width:100%;
+    white-space: nowrap; 
+    margin: 0px;
+} 
+.editor  ul.listOptions>li.hover{
+    background: #fafafa;
+}
+
+#hotspot{
+	position: absolute;
+	height: 100%;
+	 
+	touch-action: none;
+	-webkit-user-select: none;
+	-webkit-user-drag: none;
+	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+	bottom:0;
+	left: 0;
+	pointer-events: none;
+	z-index:99;
+	transition:opacity 0.1s;
+}
+#hotspot *{
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+	-webkit-font-smoothing: antialiased;
+}		
+ 
+
+#hotspot>*{
+	pointer-events: all;
+	position:absolute;
+	display: block; 
+	
+}
+
+  
+
+#hotspot >.markspot{
+	background-image: url(../images/markspotAll.png);
+	background-size: cover;
+	background-repeat: no-repeat;
+	background-position: center -76px;
+	width: 60px;
+	height: 76px;
+	margin-left: -32px;
+	margin-top: -62px;
+	cursor: -webkit-grab;
+} 
+#hotspot >.markspot.zero{
+	background-position: center 0;
+}
+#hotspot >.markspot.two{
+	background-position: center -152px;
+}
+
+
+ 
+
+
+.editor .hotPoint_list{
+	width: calc(100% + 12px);/* 滑动条隐藏 */
+}
+ 
+.editor .hotPoint_list #list>li div.left>img{
+	width:24px;
+}
+
+.editor #select .showStyle>div:first-child > img{
+	width:20px;
+}
+.editor #select ul li > img{
+	width:40px;
+	height: auto;
+	display: block;
+}
+ 
+.warning-border{
+	border: 1px solid #f56c6c !important;
+}
+ 
+ 
+ 
+ 
+ @keyframes flash{
+  0% {
+    opacity: 0; }
+  1% {
+    opacity: 1; }
+  30% {
+    opacity: 1; }
+  100% {
+    opacity: 0; } 
+ }
+ #webgl .snapshotFlash{
+	opacity: 0;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: -1;
+    background: #ffffff;
+    pointer-events: none;
+ }
+ #webgl .snapshotFlash.active{
+	z-index: 100;
+	-webkit-animation-name:flash;
+	animation-name:flash;
+	-webkit-animation-duration:1s;
+	animation-duration:1s;
+	-webkit-animation-fill-mode:both;
+	animation-fill-mode:both;
+}
+
+#webgl .snapshotGui{
+	position:absolute; 
+    z-index: 100;
+	width: calc(94% - 80px);
+    height: calc(85% - 80px);
+    border: 1px solid rgba(255,255,255,0.5); 
+    left: calc(3% + 40px);
+    top: calc(3% + 80px);
+	pointer-events: none;
+	opacity:0;
+	transition: opacity 0.3s,
+				border 0.3s;
+	
+}
+#webgl .snapshotGui .corner{
+	width:100px;
+	height:100px;
+	position:absolute;
+	transition:opacity 0.3s;
+	opacity: 0.5;
+}
+#webgl .snapshotGui.highLight .corner{
+	opacity: 0.8;
+}
+#webgl .snapshotGui.highLight{
+	border: 1px solid rgba(255,255,255,0.8); 
+}
+#webgl .snapshotGui .corner.leftTop{
+	border-top:4px solid #fff;
+	border-left:4px solid #fff;
+	left:-40px;
+	top:-40px;
+}
+#webgl .snapshotGui .corner.rightTop{
+	border-top:4px solid #fff;
+	border-right:4px solid #fff;
+	right:-40px;
+	top:-40px;
+}
+#webgl .snapshotGui .corner.leftBott{
+	border-left:4px solid #fff;
+	border-bottom:4px solid #fff;
+	left:-40px;
+	bottom:-40px;
+}
+#webgl .snapshotGui .corner.rightBott{
+	border-right: 4px solid #fff;
+    border-bottom: 4px solid #fff;
+    right: -40px;
+    bottom: -40px;
+}
+ 
+#webgl .snapshotGui .confirmSnap{
+	background: rgba(9, 225, 192, 0.9);
+    color: #fff;
+    border-radius: 5px;
+    /* margin: 0 auto; */
+    bottom: 20px;
+    position: absolute;
+    width: 220px;
+    letter-spacing: 0.1em;
+    height: 48px;
+    text-align: center;
+    line-height: 48px;
+    font-size: 16px;
+    font-weight: 100;
+    left: calc(50% - 110px);
+    font-family: SourceHanSansCN;
+	pointer-events: all;
+	cursor:pointer;
+	transition:background 0.2s;
+}
+#webgl .snapshotGui .confirmSnap:hover{
+	background:rgba(9, 225, 192, 0.78)  /* #14ebca */
+}
+
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 

service/static/css-bak/toolBox.css.bak

@@ -0,0 +1,803 @@
+@font-face {font-family: "SourceHanSansCN";src: url("../fonts/SourceHanSansCN.woff2") format("woff2"),url("../fonts/SourceHanSansCN.woff") format("woff"),url("../fonts/SourceHanSansCN.ttf") format("truetype");font-weight: normal;font-style: normal;}*/
+/* html,body{height: 100%;width: 100%;margin: 0px;padding: 0px;overflow: hidden;font-size: 75px;}
+@media screen and (min-width: 1705px)  and  (max-width: 1805px) {
+  html{font-size: 72px;}
+}
+@media screen and (min-width: 1605px)  and  (max-width: 1705px) {
+  html{font-size: 68px;}
+}
+@media screen and (min-width: 1505px)  and  (max-width: 1605px) {
+  html{font-size: 65px;}
+}
+@media screen and (min-width: 1405px)  and  (max-width: 1505px) {
+  html{font-size: 61px;}
+}
+@media screen and (min-width: 1305px)  and  (max-width: 1405px) {
+  html{font-size: 58px;}
+}
+@media screen and  (max-width: 1305px) {
+  html{font-size: 55px;}
+  }
+} */
+
+ html,body{height: 100%;width: 100%;margin: 0px;padding: 0px;overflow: hidden; }
+
+
+
+*{box-sizing: border-box; font-family:OpenSans, "Microsoft YaHei";   background-size: contain;  background-repeat: no-repeat; background-position: center center; }
+.editor a{text-decoration: none;color:#333333;}
+.editor ul li{display: inline-block;list-style: none; width:100%}
+.editor ul{margin: 0px;padding: 0px;}
+.editor input,textarea{font: 14px "Microsoft YaHei";}
+.editor input[type="text"]:focus{border: 1px solid #09e1c0;}
+
+.scrollBox{width: 282px;height: 100%;}
+.scrollBox:nth-child(n+3){display: none;}
+.introduce-top{color: white;font-family:"Microsoft YaHei"; font-size:14px;margin:10px 0 0 10px;z-index:60;position: absolute;left: 0;top: 0;width: auto;height: 48px;}
+.introduce-top .introduce-button{padding-right: 25px;filter: drop-shadow(0px 1px 1px rgba(153,153,153,1));border-radius: 5px;background: url("../images/introduce_close.png") no-repeat;background-size: 16px; transition:background-color 0.3s; background-position:100% 50%;padding-left:0px;width:100%;height:48px;display:flex;display:-webkit-flex;font-size:16px;align-items:center; cursor:pointer;}
+.introduce-button a{display: inline-block;}
+.introduce-button .introduce-button-fImg{width: 30px;height: auto;margin-right:6px;}
+.introduce-button .introduce-button-lImg{width:1px;height:auto;margin-right:5px;}
+.introduce-top.open .introduce-button{background-image:url("../images/introduce_open.png")}
+.introduce-top .addIntroduce-bg{background: url("../images/introduce_close.png") no-repeat rgba(0,0,0,0.45);background-size: 16px;background-position:94% 50%;}
+.introduce-top .introduce-button span{margin-left:6px;letter-spacing:1px; font-weight:600;font-size:16px;margin-top: 2px;}
+.introduce-top .introduce-detailBox h3{font-size:12px; margin-bottom: 13px; font-weight:600;}
+.introduce-top .introduce-detailBox span{    line-height: 22px;text-align: justify;word-break: break-all;color: white;}
+.introduce-top .introduce-detailBox{position: absolute;border-radius: 3px;max-height:0px;width:320px;margin-top:5px;margin-left:41px;overflow:hidden;transition:max-height 0.25s ease-out;transform: translate3d(0, 0, 0);}
+.introduce-top.open .introduce-detailBox{max-height: 600px;}
+.introduce-top .introduce-detail{text-align:justify;width:100%;letter-spacing:1px;word-wrap: break-word;padding:14px 12px 14px 14px;background:rgba(0,0,0,0.2);}
+.introduce-top .introduce-detail p{text-align: justify;font-weight:400;line-height: 22px;word-break: break-all;color: white;}
+.bgNone{background: none !important;}
+.divNone{display: none !important;}
+ 
+.introduce-top .introduce-detail a,  #hotspot a{ text-decoration: underline !important; color:#fff !important;  margin: 0 2px !important; padding: 0 !important;       }
+.introduce-top .introduce-detail a *{color:#fff !important; }
+/* #hotspot .picBottom a,#hotspot .picRight a,#hotspot .formInfo a{color:#2d2d2d !important;}   */
+.introduce-top .introduce-detail a:hover,  #hotspot a:hover{color:#09e1c0 !important;}
+.introduce-top .introduce-detail a:hover *,  #hotspot a:hover *{color:#09e1c0 !important;}
+
+.toolTop{width: 282px;height: 48px;background: #5a45df;position: absolute;top: 0px;right: 0px;z-index: 150;display: flex;display: -webkit-flex;justify-content: space-between;align-items: center;}
+.toolTop>div:nth-child(2){display:flex;display:-webkit-flex;align-items:center;font-size:16px;font-weight:bold;  overflow: hidden;}
+.toolTop>div:nth-child(2)>*{ 
+   white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.toolTop-button{display:flex;display:-webkit-flex;width:282px;}
+.toolTop-button>div{opacity:0.7;cursor: pointer;display:flex;display:-webkit-flex;width:94px;height:48px;align-items:center;justify-content:center;}
+.toolTop-button>div:hover{opacity:1;}
+.toolTop-button span{margin-left:5px;font-size:16px;color:#fafafa;}
+.editor{letter-spacing:0.1em;z-index:140;font: 14px "Microsoft YaHei";font-weight:400;color: #333333;width: 282px;height: 100%;background: #f5f5f5;position: absolute;right: 0px;top: 0px;padding-top:48px;box-shadow: 0px 0px 6px #666;-webkit-box-shadow: 0px 0px 6px #666;-moz-box-shadow: 0px 0px 6px #666;}
+.toolBox,.informationBox, .hotPointBox,.styleZBox{margin-top:48px;height:calc(100% - 106px);width:calc(100% + 12px);overflow-y:auto;overflow-x:hidden;    }
+.toolContent,.hotPoint_content,.information_content,.styleZ_content{position: relative; width: 282px;}
+.toolBox_Top{position: absolute;right: 0px;width: 100%;display: flex;display: -webkit-flex;border-bottom:1px solid #ddd;}
+.styleZ_content h3{font-size: 14px;font-weight:normal;margin:20px;}
+.styleZ_content>ul{display:flex;display:-webkit-flex;flex-direction:column;padding:0px 20px;}
+.styleZ_content>ul li{cursor: pointer;display:flex;display:-webkit-flex;justify-content:space-between;align-items:center;margin-bottom:10px;border:1px solid #ddd;border-radius:6px;padding:5px;}
+.styleZ-select{position:relative;width:46%;display:flex;display:-webkit-flex;justify-content:center;}
+.styleZ-select:before{content:"";position:absolute;top:50%;margin-top:-6px;left:15px;width:14px;height:14px;border-radius:7px;border:1px solid #ddd;}
+.styleZ_content>ul li:hover{background: #fafafa;}
+.styleZ_content>ul li.active{background:white;border-color:#09e1c0;}
+.styleZ_content>ul li.active .styleZ-select:before{background:#09e1c0;border-color:#09e1c0;}
+.styleZ_content>ul li.active .styleZ-select:after{content:"";position:absolute;top:50%;margin-top:-2.5px;left:18.5px;width:6px;height:6px;border-radius:7px;background:white;}
+.toolBox_Top input{background: #fff !important;transition:background 0.1s;letter-spacing:0.1em;display: inline-block;width: 25%;height: 48px;color: #999999;font: 16px initial;background: white;outline: none;-webkit-appearance: none;-moz-appearance: none;-o-appearance: none;appearance: none;border:none;cursor: pointer;}
+.toolBox_Top input:hover,.toolBox-Top-input{background: #fafafa !important;color:#333333 !important;}
+.toolBox_Top .toolBox_nav{position: relative;width: 100%;height: 100%;display: flex;display: -webkit-flex;}
+.toolBox_Top .toolBox_nav:before{content: "";background: #09e1c0;height: 2px;width:25%;position: absolute;bottom:0px;left:0px;transition:left 0.26s ease-out;}
+.toolBox_Top .toolBox_nav-left0:before{left: 0px;}
+.toolBox_Top .toolBox_nav-left1:before{left: 25%;}
+.toolBox_Top .toolBox_nav-left2:before{left: 50%;}
+.toolBox_Top .toolBox_nav-left3:before{left: 75%;}
+.function{width: 282px;height: 48px;border-top: 1px solid #cccccc;border-bottom: 1px solid #ddd;margin-top: 20px;}
+.function ul{display: flex;display: -webkit-flex;}
+.function li{width: 94px;height: 48px;display: flex;display: -webkit-flex;justify-content: center;align-items: center;}
+.function li img{vertical-align:baseline;}
+.function li>a{color: #333;display:  flex;display: -webkit-flex;justify-content:  center;align-items:  center;}
+.function li:hover{opacity:0.7;}
+.function li:nth-child(1) span,.function li:nth-child(2) span{padding-left: 5px;}
+#export{display: inline-block;width: 60px;height: 28px;border:none;border-radius: 2px;-webkit-border-radius: 2px;-moz-border-radius: 2px;color: white;background: #09e1c0;text-align: center;line-height: 28px;}
+#export:hover{background: #22f0d0;}
+#draw_Tools a{position:relative;}
+#draw_Tools a:before{position:absolute;top:0px;left:0px;content:"";width:60px;height:60px;transition:border 0.2s ease-in-out;}
+.draw_Tools-a:before{border:1px solid #09e1c0;}
+.Basic_drawing ul{padding-top: 20px;display: flex;display: -webkit-flex;}
+.Basic_drawing ul li{width: 33%;display: flex;display: -webkit-flex;flex-direction: column;align-items: center;}
+.doors_windows{border-bottom: 1px solid #ddd;padding-bottom: 18px;}
+.doors_windows ul{display: flex;display: -webkit-flex;flex-wrap: wrap;}
+.doors_windows ul li{width: 33%;display: flex;display: -webkit-flex;flex-direction: column;align-items: center;padding-top: 16px;}
+.Basic_drawing span,.doors_windows span{letter-spacing: 2px;margin-top: 8px;color: #333;}
+.controlBox{padding-top:28px;width: 282px;height:80px;border-bottom: 1px solid #cccccc;transition: all 1s linear;display: none;opacity: 0;}
+#controlName{padding-left: 20px;font-size: 16px;}
+.controlBox a{position: absolute;right: 20px;color:#cccccc;}
+.controlBox a:hover{color:#999999;}
+#pjtName{width: 100%;}
+#edit2Box,#edit1Box{width: 100%;height: 84px;position:relative;background: white;}
+#edit2,#edit1{width:100%;height:100%;overflow: hidden;border: 1px solid white;}
+#edit2Box .w-e-toolbar,#edit1Box .w-e-toolbar{position:absolute;bottom: 4px;right: 4px;padding: 0px;width: 20px;height: 20px;}
+#edit2Box .w-e-menu,#edit1Box .w-e-menu{padding: 0px;}
+#edit2Box .w-e-text,#edit1Box .w-e-text{width: calc(100% + 20px) !important;word-break: break-all;overflow-y: scroll;padding: 0px 30px 0px 10px; -webkit-user-select:auto;}
+#edit2Box .w-e-text *,#edit1Box .w-e-text *{-webkit-user-select:text;} 
+
+#edit2Box .w-e-icon-link,#edit1Box .w-e-icon-link{position:relative;display: block;width: 20px;height: 20px;}
+#edit2Box .w-e-text a,#edit1Box .w-e-text a{color:#079eec;text-decoration:underline;}
+#edit2Box .w-e-text-container,#edit1Box .w-e-text-container{position: static;}
+#edit2Box .w-e-icon-link:before,#edit1Box .w-e-icon-link:before{background: url("../images/linkBtn.png") no-repeat center;width: 20px;height: 20px;position: absolute;top: 0px;left: 0px;background-size: cover;}
+#edit2Box .w-e-text-container .w-e-panel-container,#edit1Box .w-e-text-container .w-e-panel-container{box-shadow: 1px 1px 2px #ccc;z-index: 99;top: 92px;}
+#edit2Box .addLink-content-row,#edit1Box .addLink-content-row{display:flex;display:-webkit-flex;justify-content:space-between;font-size:14px;height: 25px;}
+#edit2Box .addLink-content-row span,#edit1Box .addLink-content-row span{color:#999;}
+#edit2Box .addLink-content input,#edit1Box .addLink-content input{height:28px;border:1px solid #09e1c0;margin:0px 0px 6px}
+#edit2Box h5,#edit1Box h5{font-size:12px;font-weight:normal;color:#999;margin-bottom:20px;}
+#edit2Box .addLink-cancel,#edit1Box .addLink-cancel{width:75px;height:28px;background:#ccc;border-radius:0px;color:white;margin-left:10px}
+#edit2Box .addLink-cancel:hover,#edit1Box .addLink-cancel:hover{background: #d1d1d1;}
+#edit2Box .w-e-button-container,#edit1Box .w-e-button-container{display:flex;display:-webkit-flex;justify-content:flex-end;}
+#edit1Box .w-e-panel-tab-content:after,#edit2Box .w-e-panel-tab-content:after{position:absolute;width:0px;height:0px;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:14px solid #777;top:-46px;right:15px;content:"";}
+
+
+/* 画墙一栏*/
+
+.information-subDiv{padding: 20px 0px;margin: 0px 20px;border-bottom: 1px solid #ddd;}
+.editor .information-subDiv ul li{display:flex;display:-webkit-flex;justify-content: space-between;}
+.information-subDiv:first-child li{flex-direction:column;margin-bottom: 20px;}
+.information-subDiv:first-child span{margin-bottom: 6px;}
+.information-subDiv:last-child{ border-bottom:  none;}
+.information-subDiv:last-child li:first-child{margin-bottom:4px;}
+.information_input{width: 282px;}
+.information_input input[type="file"]{position: relative;display: none;}
+.information_input input{width: 160px;height: 28px;font-size: 14px;outline: none;-webkit-appearance: none;-moz-appearance: none;-o-appearance: none;appearance: none;border: 1px solid white;color: #999999;}
+.information_input input::placeholder{font-size: 14px;color:#cccccc;}
+.information_input input:-ms-input-placeholder{font-size: 14px;color:#cccccc;}
+.information_input input::-ms-input-placeholder{font-size: 14px;color:#cccccc;}
+.information_input input[type="button"]{width: 60px;height: 28px;border:none;border-radius: 2px;-webkit-border-radius: 2px;-moz-border-radius: 2px;color: white;background: #09e1c0;text-align: center;font-size: 14px;cursor: pointer;margin-top:10px;}
+.information_input input[type="button"]:hover{background: #22f0d0;}
+.information_show ul{display: flex;display: -webkit-flex;flex-direction: column;padding: 20px 0px;margin: 0 20px;}
+.information_show ul li{height: 28px;display: flex;display: -webkit-flex;justify-content: space-between;align-items: center;}
+.information_input .right{    position: relative; width: 160px;  font-size: 14px;line-height: 28px;} 
+.information_input input, .information_input label{outline: none;background-color:#fff;padding: 0 10px;color: #999999;}
+.close_linkDiv{position: absolute;bottom: 10px;right: 10px;width: 75px;height: 28px;cursor: pointer;z-index: 99999;}
+#setEntry .ImgPreview{height:80px;}
+.information_input label{cursor:pointer;}
+.show_title{padding-left: 0 !important;}
+.show_data{color: #999999;display: flex;display: -webkit-flex;flex-direction: row-reverse;}
+.show_count{color: #999}
+.show_data span{padding-right: 5px;}
+/* 信息一栏*/.hotPointBox{overflow-y:hidden} 
+#ok{width:100%;height: 48px;display:none;text-align:center;line-height:48px;cursor:pointer;background: #09e1c0;color:#fff;}
+#ok:hover{background: #14ebca}
+.hotPoint_content{height: 100%;}
+.hotPoint_content .point>*{height: 40px;display: flex;display: -webkit-flex;width: 282px;align-items:center;justify-content: space-between;border-bottom: 1px #ddd solid;padding-left: 20px;color: #999;/* opacity: 0.6;*/cursor: pointer;display:none;background:#fafafa;}
+.hotPoint_content #listPoint{display:flex;-webkit-box-flex: 1;}
+.hotPoint_content #listPoint>*{display:flex;}
+.hotPoint_content #listPoint>div:first-child{border-right:1px solid #eeeeee;}
+.hotPoint_content #listPoint>div:hover{background: #fff;}
+.hotPoint_content .point>* div{display: flex;display: -webkit-flex;align-items: center;}
+.hotPoint_content .point>* span{padding-left: 5px;}
+.hotPoint_content .point>* a{padding-right: 20px;}
+/* .hotPoint_content .point>*:hover{opacity: 1;}*/
+#snap{padding:20px 0px;display: flex;display: -webkit-flex;align-items: center;flex-direction: column;}
+#hotPoint_button{background: #09e1c0;height: 48px;display: flex;display: -webkit-flex;width:242px;align-items: center;justify-content: center;color: white;cursor: pointer;transition: background 0.2s;}
+#hotPoint_button.unable{pointer-events: none;/* opacity:0.5;*/cursor:default;background: #ddd;}
+#hotPoint_button span{padding-left: 5px;}
+#hotPoint_button:hover{background: #14ebca;}
+#hotPoint_input{display:none;width: 282px;border-bottom: 1px #ddd solid; max-height: 800px;transition: max-height .3s; overflow: hidden;}
+#hotPoint_input #change{display:flex;-webkit-box-flex: 1;text-align:center;border-bottom:1px solid #ddd;height:40px;width:100%;}
+#hotPoint_input #change>div{cursor:pointer;width: 100%;height: 100%;line-height: 40px;}
+#hotPoint_input #change>div:first-child{border-right:1px solid #eeeeee;}
+#hotPoint_input #change>div:hover{background: #fff;}
+#hotPoint_input>ul{padding:8px 20px 15px;display: flex;display: -webkit-flex;flex-wrap: wrap;background: #eee;}
+.hotPoint-title{position: relative;}
+.hotPoint-title:after{position: absolute;top: 0px;right: -10px;content: "*";color:#f56c6c;}
+#hotPoint_input>ul>li{position: relative;padding: 5px 0;line-height:30px;display: flex;display: -webkit-flex;flex-basis: 100%;align-items:center;justify-content: space-between;align-items: flex-start;}
+#hotPoint_input>ul>li.warn input{border: 1px solid #f56c6c;}
+#hotPoint_input>ul>li.warn input::placeholder{color: #f56c6c !important;}
+.redPoint{position:relative;}
+.hotPoint_content .redPoint:after{position: absolute;top: 0px;left: 32px;content: "*";color:#f56c6c;}
+.information_input .redPoint:after{position: absolute;top: 0px;left: 62.5px;content: "*";color:#f56c6c;}
+#type .redPoint:after{left:32px}
+#hotPoint_input .unComplete{display:none; color:#f56c6c;font-size: 0.9em;position: absolute;bottom: 12px;right: 10px;}
+.information_input .unComplete{display: none;color:#f56c6c;font-size: 0.9em;position: absolute;bottom: 16px;right: 28px;}
+#project-name2:before{position:absolute;right:0px;top:2px;content:""attr(data-size)"";color:#999;}
+#project-intro2{position:relative;}
+#project-intro2:before{position:absolute;right:0px;top:2px;content:""attr(data-size)"";color:#999;}
+#project-name1,#project-intro1{position:relative;width:100%;}
+#project-name1:before,#project-intro1:before{position:absolute;right:0px;top:2px;content:""attr(data-size)"";color:#999;}
+
+#hotPoint_input>ul>li span{margin-top:5px;}
+#hotPoint_input input[type="file"]{position: relative;display: none;}
+*{outline:none}
+#hotPoint_input input.white,textarea.white{font-size: 14px;outline: none;-webkit-appearance: none;-moz-appearance: none;-o-appearance: none;appearance: none;border: 1px solid white;color: #999999;resize: vertical;}
+#hotPoint_input .ImgPreview,.information_input .ImgPreview{width:160px;height:114px;background-repeat: no-repeat;background-position: center center; margin-top: 10px;background-size: contain;/* border: 1px solid white;*/}
+#showInformation{height:80px;position:  relative;}
+.showInformation-error:after{content:"";width:100%;height:100%;position:absolute;left:0;top:0;background:url("../images/pic_error.png") no-repeat center;}
+#hotPoint_input>ul>li:nth-child(n+6){padding:0px}
+#select{display: inline-block;position:relative;background:#eee;}
+#select .showStyle{background:#eee;position:absolute;top:0px;left:0px;display:flex;display:-webkit-flex;justify-content:space-between;align-items:center;width:160px;height:30px;}
+#select .showStyle>div:first-child{display:flex;display:-webkit-flex;align-items:center;}
+#select .showStyle>div:first-child img{margin-top:-1px}
+#hotPoint_input>ul>li:nth-child(5){margin-top:-11px;}
+#hotPoint_input>ul>li:nth-child(6){margin-top:-8px;}
+#select .showStyle p{margin-left:5px;      cursor: default;}
+#styleBtn{opacity: 0.7;width:16px;height:16px;background:url("../images/styleBtn.png") no-repeat;cursor: pointer;}
+#styleBtn:hover{opacity: 1;}
+#select ul{display: none;padding:10px 30px 15px 10px;font-size:12px;width: 160px;z-index: 15;position:absolute;background: white;box-shadow: 0px 1px 6px 1px rgba(51,51,51,0.3);-webkit-box-shadow: 0px 1px 6px 1px rgba(51,51,51,0.3);-moz-box-shadow:0px 1px 6px 1px rgba(51,51,51,0.3);left:0px;top:30px;flex-wrap:wrap;}
+#select ul li:nth-child(3),#select ul li:nth-child(4){margin-top:20px}
+#select ul li:nth-child(3):after{position:absolute;content:"";top:-10px;left:0px;width:140px;height:1px;background:#ddd;}
+#select ul li span{margin-top:2px;}
+#select.open #styleBtn{opacity: 0.7;}
+#select.open ul{display:flex;display:-webkit-flex;}
+#select ul li{ margin-right: 2px;cursor: pointer;display:flex;display:-webkit-flex;flex-direction:column; padding-top: 4px;align-items:center; width:46px; height:61px;position:relative;/* float: left; */}#select ul li:before{position:absolute;content:"";left:0px;top:0px; width:46px;height:64px;}#select ul li:hover:before{border:1px solid #ddd;}
+#select span{line-height:15px;}
+.information_input>ul>li:nth-child(4):before{position:absolute;content:"标志大小";bottom:17px;left:20px;}
+#hotPoint_input>ul>li:nth-child(1){line-height:20px}
+#hotPoint_input>ul>li:nth-child(4){line-height:16px}
+.hotPoint_content .point>div.chosen{color:#333;background:#fff;}
+.hotPoint_content .point .coordinate{background-image:url(../images/coordinate2.png);height: 16px;width: 16px;}
+.hotPoint_content .point>div.chosen .coordinate{background-image:url(../images/coordinate.png);}
+.hotPoint_content .point .delete{/* height:46px;width:46px;background-repeat: no-repeat;background-position: center center;background-image:url(../images/coordinateClose.png);background-size: initial;*/border-radius: 7px;height: 14px;width: 14px;margin-right: 14px;padding: 2px;font-size: 12px;background:transparent;transition: background 0.3s;}
+.hotPoint_content .point>div .delete::before{font-family: "FontAwesome";content: "\f00d";color: #bababa;transition: color 0.3s;}
+.hotPoint_content .point>div .delete:hover{background: #ccc;}
+.hotPoint_content .point>div.chosen .delete::before{color: #808080;}
+.hotPoint_content .point>div .delete:hover::before{color: #fff;}
+#snapPoint>div:first-child{border-top: 1px #ddd solid;margin-top:20px;} 
+#snapPoint>div:hover{background: #fff;}
+.selectButton{background: url("../images/styleButton2.png") white no-repeat;background-position:92% 50%;}
+#hotPoint_input textarea,#hotPoint_input li input,#hotPoint_input #select, #hotPoint_input label,#hotPoint_input li .right,.information_input label{width: 160px;height: 28px;line-height:28px;padding:0 8px;max-height:500px;/* overflow:auto;*//* overflow:hidden;*/border:none;}
+
+#hotPoint_input textarea{width: 160px;height: 56px;line-height:22px;padding:0 8px;background-color:#fafafa;max-height:500px;/* overflow:auto;*//* overflow:hidden;*/border:none;}
+#hotPoint_input textarea.focus,#hotPoint_input li input.white:focus{background:#fff;color:#333;border: 1px solid #09e1c0;}
+label.btn{cursor:pointer;display: inline-block;background:#09e1c0;color: #fff;text-align: center;transition: background 0.2s;letter-spacing:0.05em;}
+label.btn:hover{background:#14ebca;color:#fff;}
+#hotPoint_input label:hover,.information_input label:hover{background: #09cbae;}
+#hotPoint_input input::placeholder{font-size: 14px;color:#cccccc;}
+#hotPoint_input input:-ms-input-placeholder{font-size: 14px;color:#cccccc;}
+#hotPoint_input input::-ms-input-placeholder{font-size: 14px;color:#cccccc;}
+#hotPoint_input #hotPoint_sumbit{width: 60px;height: 28px;border:none;border-radius: 2px;-webkit-border-radius: 2px;-moz-border-radius: 2px;color: white;background: #09e1c0;text-align: center;font-size: 14px;cursor: pointer;}
+#hotPoint_input input[type="button"]:hover{background: #22f0d0;}
+.hotPoint_list{position:relative;    overflow-y: auto; overflow-x: hidden; height: calc(100% - 88px);}
+.hotPoint_list #list{/* position:absolute;*/width: 100%;flex-direction: column-reverse; border-top:1px solid #ddd;}
+.hotPoint_list #list>li{/* position:absolute;*/padding-left: 20px;display:flex;display:-webkit-flex;justify-content: flex-start;align-items: center; width: 282px;height: 48px;border-bottom: 1px solid #ddd;cursor: pointer;background: #fafafa;transition: background 0.1s;position:  relative;}
+.hotPoint_list #list>li:before{position:absolute;content:"";width:0px;height:48px;background:#09e1c0;left:0px;top:-1px;transition: width 0.2s;}
+.hotPoint_list #list>li.open:before{ width:8px !important;}
+.hotPoint_list #list>li{ background:#fff;}
+.hotPoint_list #list>li.open{  }
+.hotPoint_list #list>li:hover{background:#eee;} 
+.hotPoint_list #list div{/* display: flex;display: -webkit-flex;*/align-items: center;}
+.hotPoint_list #list>li span{padding-left: 5px;font-weight:bold;  white-space: nowrap;  overflow: hidden; text-overflow: ellipsis;}
+.hotPoint_list #list>li .delete{position: absolute;top: 0px;right: 0px;height: 48px;width: 48px;background-repeat: no-repeat;background-position: center center;background-image: url(../images/del.png);background-size: initial;}
+.hotPoint_list #list>li .delete:hover{background-color:rgba(175, 175, 175, 0.1);}
+.hotPoint_list #list>li .DelConfirm{font-size: 12px;position: absolute;width:60px;z-index: 100;background: #fff;height: 56px;border-radius: 2px;box-shadow: 0 1px 6px 0px rgba(153, 153, 153, 1);text-align: center;line-height: 28px;right: 40px;opacity:0;transform: translateX(15px) scale(0,0);transform-origin:right;transition: transform 0.1s,opacity 0.1s;}
+.hotPoint_list #list>li .DelConfirm.open{opacity:1;transform: translateX(0px) scale(1, 1);}
+/*#list>li .DelConfirm:after{content: '';width: 0;height: 0;border-top: 5px solid transparent;border-left: 8px solid #ffffff;border-bottom: 5px solid transparent;position: absolute;right: -8px;top: 25px;color: #999;}*/
+.hotPoint_list #list>li .DelConfirm>div{height:50%;}
+.hotPoint_list #list>li .DelConfirm>div:hover{background:#eee;}
+.hotPoint_list #list>li .DelConfirm .DelYes{color: rgba(224, 82, 71, 1);}
+.hotPoint_list #list>li div.left{     flex: auto;    max-width: 80%;display: flex;display: -webkit-flex;}
+#information_file{display:none;position:relative;}
+.information_show_div{display:flex;display:-webkit-flex;justify-content:space-between;padding:10px 0px 20px;}
+.information_show_div span{padding-left:20px;line-height: 24px;}
+
+.information_show_div label{width:160px;height:28px;line-height:30px;cursor:pointer;display: inline-block;background:#09e1c0;color: #fff;text-align: center;transition: background 0.2s;letter-spacing:0.05em;}
+
+input::-webkit-input-placeholder, textarea::-webkit-input-placeholder{color: #999 !important;font-weight:normal !important;}
+input:-moz-placeholder, textarea:-moz-placeholder{color:#999 !important;font-weight:normal !important;}
+input::-moz-placeholder, textarea::-moz-placeholder{color:#999 !important;font-weight:normal !important;}
+input:-ms-input-placeholder, textarea:-ms-input-placeholder{color:#999 !important;font-weight:normal !important;} 
+
+.Zprompt-popupBox{ font-family: "Microsoft YaHei"; position:absolute;top:0px;left:0px;background:rgba(0,0,0,0.3);width:100%;height:100%;z-index:200;overflow:auto;}
+.Zprompt-popupBox .center{position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);}
+.Zprompt-popup{padding: 0px;width:600px;height:289px;font-size:14px;box-shadow:0 0 5px #ccc;-moz-box-shadow:0 0 5px #ccc;-webkit-box-shadow:0 0 5px #ccc;color:#333;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background:#fff;}
+.Zprompt-title{width:600px;display:flex;display:-webkit-flex;justify-content:space-between}
+.Zprompt-title a{text-decoration:none;height:20px;width:16px;opacity: 0.7;margin:10px}
+.Zprompt-title a:hover{opacity: 1}
+.Zprompt-title h2{padding-top:45px;padding-left:50px;font-size:24px;font-weight:600;margin:0}
+.Zprompt-main-false{margin-top:15px;width:598px;height:75px;display:flex;display:-webkit-flex;align-items:center;padding-left:49px;margin-left:1px;border-bottom:2px solid #eee;border-top:2px solid #eee;font-weight:700}
+.Zprompt-main-false span{padding-left:10px;font-weight:normal;letter-spacing:1px;}
+.Zprompt-footer{width:600px;height:95px;display:flex;display:-webkit-flex;justify-content:center;align-items:flex-end}
+.Zprompt-footer a{width:120px;height:48px;background:#09e1c0;text-align:center;line-height:48px;color: white;    margin: 0 10px;}
+.Zprompt-footer a:hover{background:#01dab9}
+.Zprompt-footer a.btn1{background:#c5c5c5}
+.Zprompt-footer a.btn1:hover{background:#b1b1b1}
+
+@keyframes flash {
+  0% {  
+	opacity:0;
+  } 
+  20% { 
+	opacity:1;
+  }
+   60% { 
+
+	opacity:1;
+  }
+   100% { 
+	opacity:0;
+  } 
+} 
+.Zprompt-popupBox #Zinfo{    width: 100px; height: 140px; opacity:0;}
+.Zprompt-popupBox #Zinfo.animate{  animation: flash 1s; -webkit-animation: flash 1s; animation-iteration-count:1; } 
+.Zprompt-popupBox #Zinfo .Zimg{    width: 100%; height: 100px;  background-image:url(../images/stips.png);  
+background-repeat: no-repeat;
+background-position: center center;}
+.Zprompt-popupBox #Zinfo .Ztitle{   text-align: center;  font-size: 16px;  letter-spacing:1px;   text-shadow: 2px 2px 6px rgba(27, 27, 27, 0.81);}
+.myAccount-cutAvatar{display: none;position:absolute;top:0px;left:0px;background:rgba(0,0,0,0.3);width:100%;height:100%;z-index:200;overflow:auto;}
+.myAccount-cutAvatar .myAccount-cutAvatar-inner {width:600px;height:543px;position:absolute;background:white;left:50%;top:50%;margin-left:-300px;margin-top:-272px;}
+.myAccount-cutAvatar .myAccount-cutAvatar-top {width:100%;height:95px;border-bottom:2px solid #eeeeee;font-size:24px;display:flex;display:-webkit-flex;justify-content:space-between;}
+.myAccount-cutAvatar .myAccount-cutAvatar-top span {margin-top:40px;margin-left:50px;color: #333;font-weight: bold;}
+.myAccount-cutAvatar .myAccount-cutAvatar-top a {margin:10px;height: 16px;width: 16px;line-height: 1px;opacity: 0.7;}
+.myAccount-cutAvatar .myAccount-cutAvatar-top a:hover{opacity: 1} 
+.myAccount-cutAvatar .myAccount-cutAvatar-main {width:100%;}
+.myAccount-cutAvatar .myAccount-cutAvatar-main {display:flex;display:-webkit-flex;padding:40px 0px 0px 50px;}
+.myAccount-cutAvatar .myAccount-cutAvatar-main>div:first-child {width:500px;height:300px;background:#eeeeee;display:flex;display:-webkit-flex;justify-content:center;align-items:center;}
+.myAccount-cutAvatar .myAccount-cutAvatar-main>div:first-child img {max-width:500px;height:auto;max-height:300px;}
+.myAccount-cutAvatar .myAccount-cutAvatar-inner>div:last-child {text-align:center;}
+.myAccount-cutAvatar input {background:#09e1c0;color:white;width:122px;height:50px;font-size:14px;cursor:pointer;border:1px solid white;outline:none;}
+#discrib .preholder{text-align:center;}
+
+
+
+
+
+#hotPoint_input .project-name,#hotPoint_input .project-intro{
+  flex-direction:column;
+
+  line-height: normal;
+
+}
+#hotPoint_input .project-name input,#hotPoint_input .project-intro>div,   .project-intro{
+  width:100%;
+}
+#hotPoint_input .project-name>span,#hotPoint_input .project-intro>span{
+  margin-bottom: 8px;
+}
+
+#hotPoint_input .project-intro{
+  margin:8px 0px 10px
+}
+.information_input .project-name,.information_input .project-intro{
+   flex-direction:column;
+
+   padding: 6px 0px 10px;
+   line-height: normal;
+}
+ 
+.information_input .project-name input,.information_input .project-intro>div{
+  width:calc( 100% - 40px );
+  margin-left:20px;
+  margin-top: 5px;
+}
+.information_input .project-intro{
+ margin:0px;
+}
+#type{
+     flex-direction:column;
+   width:100%;
+   position: relative;
+   margin: 0px;
+}
+#type a{
+    width:100%;
+}
+
+.noteBox{z-index: 999;display: none;width: 282px;height: 126px;background: white;padding: 20px 0px 0px 20px;opacity: 0;transition: opacity 0.5s ease;position: absolute;}
+.noteBox-row{display: flex;display: -webkit-flex;font-size: 14px;margin-bottom: 10px;}
+.noteBox-row h3{font-size: 14px;color: #333;}
+#noteInput_text{width: 242px;height: 28px;border: 1px solid #ccc;color: #333;padding-left: 10px;}
+.noteBox-row:last-child{justify-content: flex-end;margin-right: 20px;}
+.noteBox-ok{border-radius: 2px;cursor: pointer;width: 32px;height: 20px;color: white;background: #09e1c0;font-size: 12px;display: flex;display: -webkit-flex;justify-content: center;align-items: center;}
+.noteBox-cancel{border-radius: 2px;cursor: pointer;width: 20px;height: 20px;background: #f56c6c;display: flex;display: -webkit-flex;justify-content: center;align-items: center;margin-left: 6px;}
+.noteBox.show{display: block;}
+.noteBox.active{opacity: 1;}
+
+.sizeWaring:before{color:#f56c6c !important;}
+.empty_warn{border:1px solid #f56c6c !important;color: #f56c6c !important;}
+.empty_warn::placeholder{color: #f56c6c !important;}
+
+.hide{ display:none;}
+.unable{pointer-events:none;  opacity:0.5;  }
+
+
+.editor .Main{ 
+	height:20px;
+	align-items: center;
+    display: flex;
+    justify-content: space-between;
+} 
+.editor .Main .scrollBar {
+    position: relative;
+    width: calc(96% - 45px);
+    height: 4px;
+    background-color: #c7c7c7;
+    cursor: pointer;
+}
+.editor .scrollBar .scroll_Track {
+	width: 0px;
+    height: 4px;
+    background-color: #09e1c0;
+}
+.editor .scrollBar .scroll_Thumb {
+	height: 12px;
+    width: 14px;
+    background-color: #919191;
+    /*-webkit-border-radius: 8px;
+    -moz-border-radius: 8px;
+    border-radius: 4px;
+     -webkit-box-shadow: 0px 0px 5px #74b5f5;
+    -moz-box-shadow: 0px 0px 5px #74b5f5;
+    box-shadow: 0px 0px 4px #74b5f5; */
+    position: absolute;
+    margin-top: -8px;
+    cursor: pointer;
+    -webkit-user-select: none;
+}
+.editor .BarTxt {
+	position:relative;
+	width:40px;
+}
+.editor .BarTxt .scrollBarTxt{
+    width: 100%;
+    text-align: center;
+    height: 20px;
+    border: 0;
+    /* border-radius: 4px; */
+    padding: 4px 0;
+    text-align: center;
+    color: #fff;
+    background: #919191;
+    font-size: 12px;
+}
+.editor #floorLogoSize {
+    font-size: 12px;
+    width: 160px;
+}
+.editor #floorLogoSize .slider{
+	float: left;
+    width: 100%;
+}
+
+.editor #scenePSD span{
+	line-height: 24px;
+}
+.editor #scenePSD ul.MenuOptions{
+	width: 100%;
+    overflow: hidden; 
+    background: #fff; 
+    padding: 0px;
+    cursor: pointer;
+    flex-direction: row;
+    align-items: center;
+    
+}
+.editor #scenePSD .MenuOptions li{
+	float: left; 
+	text-align:center;
+	line-height: 28px;
+	font-size:14px;
+	display:inline-block; 
+	color:#999;
+	transition:color 0.1s;
+}
+ 
+
+
+.editor .MenuOptions li.chosen{
+	background-color:#09e1c0;
+	color:#fff !important
+} 
+.editor .MenuOptions li:hover{
+	color: #333;
+}
+.editor .MenuOptions li.chosen:hover{
+	background-color:#09e1c0;
+	color:#fff;
+
+}
+
+.editor .quarterCell{
+	width: 25%;
+} 
+.editor .thirdCell{
+	width: 33.33%;
+}
+.editor .halfCell{
+	width: 50%;
+}
+
+.editor  a.button{
+	width: 100%;
+    height: 30px;
+    background: #0ed8b9;
+    display: inline-block;
+    margin-top: 10px;
+    text-align: center;
+    color: #fff; 
+}
+.editor  a.button:hover{
+	background:#04c7a9;
+}
+.editor  a.button:active{
+	background:#05a089;
+}
+
+
+.editor  #scenePSD .word{
+	margin-top:10px; 
+}
+.editor  #scenePSD .word>*{
+	float:left;
+}
+.editor  #scenePSD .word input{
+	/* width: 75%;  */
+	width:100%;
+}
+ 
+			
+img{
+	pointer-events:none;
+}
+
+ 
+
+ 
+
+
+
+.editor .selection{
+    display: block;
+    position: relative;
+    height: 30px;
+    overflow: hidden;
+    color: #000;
+    padding-right: 40px;
+    padding-left: 10px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    background: #fff;
+    cursor: pointer;
+    outline: none;
+    line-height: 30px;
+	transition-duration:0.1s;
+	border: 1px solid white;
+}
+.editor  .selection:after{
+	content: "\f0d7";
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 30px;
+    height: 30px;
+    font-family: FontAwesome;
+    text-align: center;
+    line-height: 30px;
+}
+.editor  .selection.focus{ 
+	color:#555;
+}
+.editor  ul.listOptions{
+	position: absolute;
+    left: 0px;
+    top: 56px;
+    z-index: 100;
+    width: 100%;
+    overflow: hidden; 
+    color: #9b9b9b;
+    background: #fff;
+    box-shadow: 0 5px 5px rgba(0,0,0,.3);
+	padding:0;
+	margin:0;
+	cursor:pointer;
+} 
+.editor  ul.listOptions>li{
+	height: 30px;
+    list-style-type: none;
+    color: #9b9b9b;
+    padding: 0 10px;
+    line-height: 30px;
+ /*    overflow: hidden; */
+    width:100%;
+    white-space: nowrap; 
+    margin: 0px;
+} 
+.editor  ul.listOptions>li.hover{
+    background: #fafafa;
+}
+
+#hotspot{
+	position: absolute;
+	height: 100%;
+	 
+	touch-action: none;
+	-webkit-user-select: none;
+	-webkit-user-drag: none;
+	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+	bottom:0;
+	left: 0;
+	pointer-events: none;
+	z-index:99;
+	transition:opacity 0.1s;
+}
+#hotspot *{
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+	-webkit-font-smoothing: antialiased;
+}		
+ 
+
+#hotspot>*{
+	pointer-events: all;
+	position:absolute;
+	display: block; 
+	
+}
+
+  
+
+#hotspot >.markspot{
+	background-image: url(../images/markspotAll.png);
+	background-size: cover;
+	background-repeat: no-repeat;
+	background-position: center -76px;
+	width: 60px;
+	height: 76px;
+	margin-left: -32px;
+	margin-top: -62px;
+	cursor: -webkit-grab;
+} 
+#hotspot >.markspot.zero{
+	background-position: center 0;
+}
+#hotspot >.markspot.two{
+	background-position: center -152px;
+}
+
+
+ 
+
+
+.editor .hotPoint_list{
+	width: calc(100% + 12px);/* 滑动条隐藏 */
+}
+ 
+.editor .hotPoint_list #list>li div.left>img{
+	width:24px;
+}
+
+.editor #select .showStyle>div:first-child > img{
+	width:20px;
+}
+.editor #select ul li > img{
+	width:40px;
+	height: auto;
+	display: block;
+}
+ 
+.warning-border{
+	border: 1px solid #f56c6c !important;
+}
+ 
+ 
+ 
+ 
+ @keyframes flash{
+  0% {
+    opacity: 0; }
+  1% {
+    opacity: 1; }
+  30% {
+    opacity: 1; }
+  100% {
+    opacity: 0; } 
+ }
+ #webgl .snapshotFlash{
+	opacity: 0;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: -1;
+    background: #ffffff;
+    pointer-events: none;
+ }
+ #webgl .snapshotFlash.active{
+	z-index: 100;
+	-webkit-animation-name:flash;
+	animation-name:flash;
+	-webkit-animation-duration:1s;
+	animation-duration:1s;
+	-webkit-animation-fill-mode:both;
+	animation-fill-mode:both;
+}
+
+#webgl .snapshotGui{
+	position:absolute; 
+    z-index: 100;
+	width: calc(94% - 80px);
+    height: calc(85% - 80px);
+    border: 1px solid rgba(255,255,255,0.5); 
+    left: calc(3% + 40px);
+    top: calc(3% + 80px);
+	pointer-events: none;
+	opacity:0;
+	transition: opacity 0.3s,
+				border 0.3s;
+	
+}
+#webgl .snapshotGui .corner{
+	width:100px;
+	height:100px;
+	position:absolute;
+	transition:opacity 0.3s;
+	opacity: 0.5;
+}
+#webgl .snapshotGui.highLight .corner{
+	opacity: 0.8;
+}
+#webgl .snapshotGui.highLight{
+	border: 1px solid rgba(255,255,255,0.8); 
+}
+#webgl .snapshotGui .corner.leftTop{
+	border-top:4px solid #fff;
+	border-left:4px solid #fff;
+	left:-40px;
+	top:-40px;
+}
+#webgl .snapshotGui .corner.rightTop{
+	border-top:4px solid #fff;
+	border-right:4px solid #fff;
+	right:-40px;
+	top:-40px;
+}
+#webgl .snapshotGui .corner.leftBott{
+	border-left:4px solid #fff;
+	border-bottom:4px solid #fff;
+	left:-40px;
+	bottom:-40px;
+}
+#webgl .snapshotGui .corner.rightBott{
+	border-right: 4px solid #fff;
+    border-bottom: 4px solid #fff;
+    right: -40px;
+    bottom: -40px;
+}
+ 
+#webgl .snapshotGui .confirmSnap{
+	background: rgba(9, 225, 192, 0.9);
+    color: #fff;
+    border-radius: 5px;
+    /* margin: 0 auto; */
+    bottom: 20px;
+    position: absolute;
+    width: 220px;
+    letter-spacing: 0.1em;
+    height: 48px;
+    text-align: center;
+    line-height: 48px;
+    font-size: 16px;
+    font-weight: 100;
+    left: calc(50% - 110px);
+    font-family: SourceHanSansCN;
+	pointer-events: all;
+	cursor:pointer;
+	transition:background 0.2s;
+}
+#webgl .snapshotGui .confirmSnap:hover{
+	background:rgba(9, 225, 192, 0.78)  /* #14ebca */
+}
+
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 

service/static/css/cropper.min.css

@@ -0,0 +1,252 @@
+/*!
+ * Cropper v3.1.3
+ * https://github.com/fengyuanchen/cropper
+ *
+ * Copyright (c) 2014-2017 Chen Fengyuan
+ * Released under the MIT license
+ *
+ * Date: 2017-10-21T10:03:37.133Z
+ */.cropper-container {
+ direction:ltr;
+ font-size:0;
+ line-height:0;
+ position:relative;
+ -ms-touch-action:none;
+ touch-action:none;
+ -webkit-user-select:none;
+ -moz-user-select:none;
+ -ms-user-select:none;
+ user-select:none
+}
+.cropper-container img {
+ display:block;
+ height:100%;
+ image-orientation:0deg;
+ max-height:none!important;
+ max-width:none!important;
+ min-height:0!important;
+ min-width:0!important;
+ width:100%
+}
+.cropper-canvas,.cropper-crop-box,.cropper-drag-box,.cropper-modal,.cropper-wrap-box {
+ bottom:0;
+ left:0;
+ position:absolute;
+ right:0;
+ top:0
+}
+.cropper-canvas,.cropper-wrap-box {
+ overflow:hidden
+}
+.cropper-drag-box {
+ background-color:#fff;
+ opacity:0
+}
+.cropper-modal {
+ background-color:#000;
+ opacity:.5
+}
+.cropper-view-box {
+ display:block;
+ height:100%;
+ outline-color:rgba(51,153,255,.75);
+ outline:1px solid #39f;
+ overflow:hidden;
+ width:100%
+}
+.cropper-dashed {
+ border:0 dashed #eee;
+ display:block;
+ opacity:.5;
+ position:absolute
+}
+.cropper-dashed.dashed-h {
+ border-bottom-width:1px;
+ border-top-width:1px;
+ height:33.33333%;
+ left:0;
+ top:33.33333%;
+ width:100%
+}
+.cropper-dashed.dashed-v {
+ border-left-width:1px;
+ border-right-width:1px;
+ height:100%;
+ left:33.33333%;
+ top:0;
+ width:33.33333%
+}
+.cropper-center {
+ display:block;
+ height:0;
+ left:50%;
+ opacity:.75;
+ position:absolute;
+ top:50%;
+ width:0
+}
+.cropper-center:after,.cropper-center:before {
+ background-color:#eee;
+ content:" ";
+ display:block;
+ position:absolute
+}
+.cropper-center:before {
+ height:1px;
+ left:-3px;
+ top:0;
+ width:7px
+}
+.cropper-center:after {
+ height:7px;
+ left:0;
+ top:-3px;
+ width:1px
+}
+.cropper-face,.cropper-line,.cropper-point {
+ display:block;
+ height:100%;
+ opacity:.1;
+ position:absolute;
+ width:100%
+}
+.cropper-face {
+ background-color:#fff;
+ left:0;
+ top:0
+}
+.cropper-line {
+ background-color:#39f
+}
+.cropper-line.line-e {
+ cursor:e-resize;
+ right:-3px;
+ top:0;
+ width:5px
+}
+.cropper-line.line-n {
+ cursor:n-resize;
+ height:5px;
+ left:0;
+ top:-3px
+}
+.cropper-line.line-w {
+ cursor:w-resize;
+ left:-3px;
+ top:0;
+ width:5px
+}
+.cropper-line.line-s {
+ bottom:-3px;
+ cursor:s-resize;
+ height:5px;
+ left:0
+}
+.cropper-point {
+ background-color:#39f;
+ height:5px;
+ opacity:.75;
+ width:5px
+}
+.cropper-point.point-e {
+ cursor:e-resize;
+ margin-top:-3px;
+ right:-3px;
+ top:50%
+}
+.cropper-point.point-n {
+ cursor:n-resize;
+ left:50%;
+ margin-left:-3px;
+ top:-3px
+}
+.cropper-point.point-w {
+ cursor:w-resize;
+ left:-3px;
+ margin-top:-3px;
+ top:50%
+}
+.cropper-point.point-s {
+ bottom:-3px;
+ cursor:s-resize;
+ left:50%;
+ margin-left:-3px
+}
+.cropper-point.point-ne {
+ cursor:ne-resize;
+ right:-3px;
+ top:-3px
+}
+.cropper-point.point-nw {
+ cursor:nw-resize;
+ left:-3px;
+ top:-3px
+}
+.cropper-point.point-sw {
+ bottom:-3px;
+ cursor:sw-resize;
+ left:-3px
+}
+.cropper-point.point-se {
+ bottom:-3px;
+ cursor:se-resize;
+ height:20px;
+ opacity:1;
+ right:-3px;
+ width:20px
+}
+@media (min-width:768px) {
+ .cropper-point.point-se {
+  height:15px;
+  width:15px
+ }
+}
+@media (min-width:992px) {
+ .cropper-point.point-se {
+  height:10px;
+  width:10px
+ }
+}
+@media (min-width:1200px) {
+ .cropper-point.point-se {
+  height:5px;
+  opacity:.75;
+  width:5px
+ }
+}
+.cropper-point.point-se:before {
+ background-color:#39f;
+ bottom:-50%;
+ content:" ";
+ display:block;
+ height:200%;
+ opacity:0;
+ position:absolute;
+ right:-50%;
+ width:200%
+}
+.cropper-invisible {
+ opacity:0
+}
+.cropper-bg {
+ background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC")
+}
+.cropper-hide {
+ display:block;
+ height:0;
+ position:absolute;
+ width:0
+}
+.cropper-hidden {
+ display:none!important
+}
+.cropper-move {
+ cursor:move
+}
+.cropper-crop {
+ cursor:crosshair
+}
+.cropper-disabled .cropper-drag-box,.cropper-disabled .cropper-face,.cropper-disabled .cropper-line,.cropper-disabled .cropper-point {
+ cursor:not-allowed
+}
+/*# sourceMappingURL=cropper.min.css.map */

service/static/css/diyUpload.css

@@ -0,0 +1,129 @@
+@charset "utf-8";
+/* CSS Document*/
+.parentFileBox {
+	width:auto;
+	height:auto;
+	overflow:hidden;
+	position:relative;
+}
+.parentFileBox>.fileBoxUl {
+	position:relative;
+	width:100%;
+	height:auto;
+	overflow:hidden;
+	padding-bottom:5px;
+}
+.parentFileBox>.fileBoxUl>li {
+	float:left;
+	border:1px solid #09F;
+	border-radius:5px;
+	width:95px;
+	height:95px;
+	margin-top:5px;
+	margin-left:5px;
+	overflow:hidden;
+	position:relative;
+	background-color:#099;
+}
+.parentFileBox>.fileBoxUl>li>.viewThumb {
+	position:absolute;
+	top:0;
+	left:0;
+	width:95px;
+	height:95px;
+	overflow:hidden;
+}
+.parentFileBox>.fileBoxUl>li>.viewThumb>img {
+	width:100%;
+	height:100%;
+}
+.parentFileBox>.fileBoxUl>li>.diyCancel,.parentFileBox>.fileBoxUl>li>.diySuccess {
+	position:absolute;
+	width:20px;
+	height:20px;
+	top:2px;
+	right:2px;
+	cursor:pointer;
+	display:none;
+	background-size: 100% !important; 
+}
+.parentFileBox>.fileBoxUl>li>.diyCancel {
+	background:url(../images/edit/x_alt.png) left top no-repeat;
+}
+.parentFileBox>.fileBoxUl>li>.diySuccess {
+	background:url(../images/edit/check_alt.png)  left top  no-repeat;
+	cursor:default;
+}
+.parentFileBox>.fileBoxUl>li>.diyFileName {
+	position:absolute;
+	bottom:0px;
+	left:0px;
+	width:100%;
+	height:15px;
+	line-height:15px;
+	text-align:center;
+	color:#fff;
+	font-size:12px;
+	display:none;
+	background:url(../images/edit/bgblack.png);
+}
+.parentFileBox>.fileBoxUl>li>.diyBar {
+	top:0;
+	left:0;
+	position: absolute;
+	width: 95px;
+	height: 95px;
+	line-height:150px;
+	background:url(../images/edit/bgblack.png);
+	display:none;
+}
+.parentFileBox>.fileBoxUl>li>.diyBar>.diyProgressText {
+	font-size:14px;
+	text-align:center;
+	color:#FFF;
+	position:relative;
+	z-index:99;
+}
+.parentFileBox>.fileBoxUl>li>.diyBar>.diyProgress {
+	position:absolute;
+	left:0;
+	top:42%;
+	height:24px;
+	width:100%;
+	background-color:#09F;
+	filter:alpha(opacity=70);
+	-moz-opacity:0.7;
+	opacity:0.7;
+	z-index:97;
+}
+.parentFileBox>.diyButton {
+	width:100%;
+	margin-top:5px;
+	margin-bottom:5px;
+	height:20px;
+	line-height:20px;
+	text-align:center;
+}
+.parentFileBox>.diyButton>a {
+	padding:5px 10px 5px 10px;
+	background-color:#09C;
+	color:#FFF;
+	font-size:12px;
+	text-decoration:none;
+	border-radius:3px;
+}
+.parentFileBox>.diyButton>a:hover {
+	background-color:#0CC;
+	color:#F30;
+}
+.parentFileBox>.fileBoxUl>li:hover {
+	-moz-box-shadow: 3px 3px 4px #ccc;
+	-webkit-box-shadow: 3px 3px 4px #ccc;
+	box-shadow: 3px 3px 4px #ccc;
+}
+.parentFileBox>.fileBoxUl>.diyUploadHover:hover .diyCancel {
+	display:block;
+}
+.parentFileBox>.fileBoxUl>li:hover .diyFileName {
+	display:block;
+}