├── README.md └── myDemo ├── .babelrc ├── .editorconfig ├── .gitignore ├── .postcssrc.js ├── .project ├── README.md ├── build ├── build.js ├── check-versions.js ├── dev-client.js ├── dev-server.js ├── utils.js ├── vue-loader.conf.js ├── webpack.base.conf.js ├── webpack.dev.conf.js └── webpack.prod.conf.js ├── config ├── dev.env.js ├── index.js └── prod.env.js ├── index.html ├── package.json ├── src ├── App.vue ├── api │ ├── a.js │ ├── config.js │ ├── data.js │ └── jsonp.js ├── assets │ └── logo.png ├── common │ └── js │ │ ├── qrcode.js │ │ └── test.js ├── components │ ├── Hello.vue │ ├── Tab.vue │ ├── Tabs.vue │ ├── Title.vue │ ├── Toast.js │ ├── Toast.vue │ ├── bottom.vue │ ├── exif.js │ ├── noticeTip.js │ ├── noticeTip.vue │ ├── photoview │ │ ├── exif.js │ │ └── photoview.vue │ ├── select.vue │ ├── transition.vue │ ├── upload.vue │ └── vuex │ │ ├── a.vue │ │ └── b.vue ├── main.js ├── pages │ ├── TabView.vue │ ├── amap.vue │ ├── bottomView.vue │ ├── data.json │ ├── jsonp.vue │ ├── keepAlive.vue │ ├── keepAlive1.vue │ ├── keepAlive2.vue │ ├── noticeTipView.vue │ ├── photo.vue │ ├── qrcode │ │ └── qrcode.vue │ ├── selectView.vue │ ├── test.vue │ ├── titleView.vue │ ├── toastView.vue │ ├── transition.vue │ └── vuex.vue ├── router │ └── index.js ├── store │ ├── actions.js │ ├── getters.js │ ├── index.js │ ├── mutation-types.js │ ├── mutations.js │ └── state.js └── store11 │ ├── actions.js │ ├── getters.js │ ├── index.js │ ├── mutations-types.js │ ├── mutations.js │ └── state.js └── static ├── .gitkeep ├── css ├── MyIcon │ ├── iconfont.css │ ├── iconfont.eot │ ├── iconfont.svg │ ├── iconfont.ttf │ └── iconfont.woff ├── common.css ├── global.css └── iconfont.css ├── images ├── chooseBg.png ├── code.png ├── connectionless.png ├── failure.png └── success.png └── js ├── qrcode.js └── vconsole.min.js /README.md: -------------------------------------------------------------------------------- 1 | # Vue2.0ComponentDemo 2 | 这个是vue2.0ui组件 和 功能组件案例 后期还会继续加上的一些组件的 3 | 4 | # vue2.0的ui组件和功能组件 5 | vue2.0组件功能和组件ui制作（包括实现制作二维码，图片上传，调用相机拍照功能，组件ui等等） 6 | 后续会继续更新 需要优化内容可以留言 7 | + 8 | + 9 | +如何使用 10 | +1、需要下载依赖npm install 11 | +2、需要运行npm run dev 12 | +3、打包命令npm run build 13 | + 14 | +里面有 15 | +1、图片上传案例拍照功能案例 16 | +2、生成二维码功能案例 17 | +3、使用高德地图案例 18 | +4、使用vuex案例 19 | +5、使用jsonp案例 20 | +6、app底部ui组件 21 | +7、提示ui案例 22 | +8、tab组件ui案例 23 | +9、vue页面切换时候有滑动效果案例 24 | -------------------------------------------------------------------------------- /myDemo/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { 4 | "modules": false, 5 | "targets": { 6 | "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] 7 | } 8 | }], 9 | "stage-2" 10 | ], 11 | "plugins": ["transform-runtime"], 12 | "env": { 13 | "test": { 14 | "presets": ["env", "stage-2"], 15 | "plugins": ["istanbul"] 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /myDemo/.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /myDemo/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist/ 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Editor directories and files 9 | .idea 10 | *.suo 11 | *.ntvs* 12 | *.njsproj 13 | *.sln 14 | -------------------------------------------------------------------------------- /myDemo/.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | "plugins": { 5 | // to edit target browsers: use "browserlist" field in package.json 6 | "autoprefixer": {} 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /myDemo/.project: -------------------------------------------------------------------------------- 1 | 2 | 3 | myDemo 4 | 5 | 6 | 7 | 8 | 9 | com.aptana.editor.php.aptanaPhpBuilder 10 | 11 | 12 | 13 | 14 | com.aptana.ide.core.unifiedBuilder 15 | 16 | 17 | 18 | 19 | 20 | com.aptana.projects.webnature 21 | com.aptana.editor.php.phpNature 22 | 23 | 24 | -------------------------------------------------------------------------------- /myDemo/README.md: -------------------------------------------------------------------------------- 1 | # photo 2 | 3 | > A Vue.js project 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | npm install 10 | 11 | # serve with hot reload at localhost:8080 12 | npm run dev 13 | 14 | # build for production with minification 15 | npm run build 16 | 17 | # build for production and view the bundle analyzer report 18 | npm run build --report 19 | ``` 20 | 21 | For detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader). 22 | -------------------------------------------------------------------------------- /myDemo/build/build.js: -------------------------------------------------------------------------------- 1 | require('./check-versions')() 2 | 3 | process.env.NODE_ENV = 'production' 4 | 5 | var ora = require('ora') 6 | var rm = require('rimraf') 7 | var path = require('path') 8 | var chalk = require('chalk') 9 | var webpack = require('webpack') 10 | var config = require('../config') 11 | var webpackConfig = require('./webpack.prod.conf') 12 | 13 | var spinner = ora('building for production...') 14 | spinner.start() 15 | 16 | rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => { 17 | if (err) throw err 18 | webpack(webpackConfig, function (err, stats) { 19 | spinner.stop() 20 | if (err) throw err 21 | process.stdout.write(stats.toString({ 22 | colors: true, 23 | modules: false, 24 | children: false, 25 | chunks: false, 26 | chunkModules: false 27 | }) + '\n\n') 28 | 29 | console.log(chalk.cyan(' Build complete.\n')) 30 | console.log(chalk.yellow( 31 | ' Tip: built files are meant to be served over an HTTP server.\n' + 32 | ' Opening index.html over file:// won\'t work.\n' 33 | )) 34 | }) 35 | }) 36 | -------------------------------------------------------------------------------- /myDemo/build/check-versions.js: -------------------------------------------------------------------------------- 1 | var chalk = require('chalk') 2 | var semver = require('semver') 3 | var packageConfig = require('../package.json') 4 | var shell = require('shelljs') 5 | function exec (cmd) { 6 | return require('child_process').execSync(cmd).toString().trim() 7 | } 8 | 9 | var versionRequirements = [ 10 | { 11 | name: 'node', 12 | currentVersion: semver.clean(process.version), 13 | versionRequirement: packageConfig.engines.node 14 | }, 15 | ] 16 | 17 | if (shell.which('npm')) { 18 | versionRequirements.push({ 19 | name: 'npm', 20 | currentVersion: exec('npm --version'), 21 | versionRequirement: packageConfig.engines.npm 22 | }) 23 | } 24 | 25 | module.exports = function () { 26 | var warnings = [] 27 | for (var i = 0; i < versionRequirements.length; i++) { 28 | var mod = versionRequirements[i] 29 | if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) { 30 | warnings.push(mod.name + ': ' + 31 | chalk.red(mod.currentVersion) + ' should be ' + 32 | chalk.green(mod.versionRequirement) 33 | ) 34 | } 35 | } 36 | 37 | if (warnings.length) { 38 | console.log('') 39 | console.log(chalk.yellow('To use this template, you must update following to modules:')) 40 | console.log() 41 | for (var i = 0; i < warnings.length; i++) { 42 | var warning = warnings[i] 43 | console.log(' ' + warning) 44 | } 45 | console.log() 46 | process.exit(1) 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /myDemo/build/dev-client.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | require('eventsource-polyfill') 3 | var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true') 4 | 5 | hotClient.subscribe(function (event) { 6 | if (event.action === 'reload') { 7 | window.location.reload() 8 | } 9 | }) 10 | -------------------------------------------------------------------------------- /myDemo/build/dev-server.js: -------------------------------------------------------------------------------- 1 | require('./check-versions')() 2 | 3 | var config = require('../config') 4 | if (!process.env.NODE_ENV) { 5 | process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV) 6 | } 7 | 8 | var opn = require('opn') 9 | var path = require('path') 10 | var express = require('express') 11 | var webpack = require('webpack') 12 | var proxyMiddleware = require('http-proxy-middleware') 13 | var webpackConfig = require('./webpack.dev.conf') 14 | 15 | // default port where dev server listens for incoming traffic 16 | var port = process.env.PORT || config.dev.port 17 | // automatically open browser, if not set will be false 18 | var autoOpenBrowser = !!config.dev.autoOpenBrowser 19 | // Define HTTP proxies to your custom API backend 20 | // https://github.com/chimurai/http-proxy-middleware 21 | var proxyTable = config.dev.proxyTable 22 | 23 | var app = express() 24 | var compiler = webpack(webpackConfig) 25 | 26 | var devMiddleware = require('webpack-dev-middleware')(compiler, { 27 | publicPath: webpackConfig.output.publicPath, 28 | quiet: true 29 | }) 30 | 31 | var hotMiddleware = require('webpack-hot-middleware')(compiler, { 32 | log: () => {} 33 | }) 34 | // force page reload when html-webpack-plugin template changes 35 | compiler.plugin('compilation', function (compilation) { 36 | compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) { 37 | hotMiddleware.publish({ action: 'reload' }) 38 | cb() 39 | }) 40 | }) 41 | 42 | // proxy api requests 43 | Object.keys(proxyTable).forEach(function (context) { 44 | var options = proxyTable[context] 45 | if (typeof options === 'string') { 46 | options = { target: options } 47 | } 48 | app.use(proxyMiddleware(options.filter || context, options)) 49 | }) 50 | 51 | // handle fallback for HTML5 history API 52 | app.use(require('connect-history-api-fallback')()) 53 | 54 | // serve webpack bundle output 55 | app.use(devMiddleware) 56 | 57 | // enable hot-reload and state-preserving 58 | // compilation error display 59 | app.use(hotMiddleware) 60 | 61 | // serve pure static assets 62 | var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory) 63 | app.use(staticPath, express.static('./static')) 64 | 65 | var uri = 'http://localhost:' + port 66 | 67 | var _resolve 68 | var readyPromise = new Promise(resolve => { 69 | _resolve = resolve 70 | }) 71 | 72 | console.log('> Starting dev server...') 73 | devMiddleware.waitUntilValid(() => { 74 | console.log('> Listening at ' + uri + '\n') 75 | // when env is testing, don't need open it 76 | if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') { 77 | opn(uri) 78 | } 79 | _resolve() 80 | }) 81 | 82 | var server = app.listen(port) 83 | 84 | module.exports = { 85 | ready: readyPromise, 86 | close: () => { 87 | server.close() 88 | } 89 | } 90 | -------------------------------------------------------------------------------- /myDemo/build/utils.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var config = require('../config') 3 | var ExtractTextPlugin = require('extract-text-webpack-plugin') 4 | 5 | exports.assetsPath = function (_path) { 6 | var assetsSubDirectory = process.env.NODE_ENV === 'production' 7 | ? config.build.assetsSubDirectory 8 | : config.dev.assetsSubDirectory 9 | return path.posix.join(assetsSubDirectory, _path) 10 | } 11 | 12 | exports.cssLoaders = function (options) { 13 | options = options || {} 14 | 15 | var cssLoader = { 16 | loader: 'css-loader', 17 | options: { 18 | minimize: process.env.NODE_ENV === 'production', 19 | sourceMap: options.sourceMap 20 | } 21 | } 22 | 23 | // generate loader string to be used with extract text plugin 24 | function generateLoaders (loader, loaderOptions) { 25 | var loaders = [cssLoader] 26 | if (loader) { 27 | loaders.push({ 28 | loader: loader + '-loader', 29 | options: Object.assign({}, loaderOptions, { 30 | sourceMap: options.sourceMap 31 | }) 32 | }) 33 | } 34 | 35 | // Extract CSS when that option is specified 36 | // (which is the case during production build) 37 | if (options.extract) { 38 | return ExtractTextPlugin.extract({ 39 | use: loaders, 40 | fallback: 'vue-style-loader' 41 | }) 42 | } else { 43 | return ['vue-style-loader'].concat(loaders) 44 | } 45 | } 46 | 47 | // https://vue-loader.vuejs.org/en/configurations/extract-css.html 48 | return { 49 | css: generateLoaders(), 50 | postcss: generateLoaders(), 51 | less: generateLoaders('less'), 52 | sass: generateLoaders('sass', { indentedSyntax: true }), 53 | scss: generateLoaders('sass'), 54 | stylus: generateLoaders('stylus'), 55 | styl: generateLoaders('stylus') 56 | } 57 | } 58 | 59 | // Generate loaders for standalone style files (outside of .vue) 60 | exports.styleLoaders = function (options) { 61 | var output = [] 62 | var loaders = exports.cssLoaders(options) 63 | for (var extension in loaders) { 64 | var loader = loaders[extension] 65 | output.push({ 66 | test: new RegExp('\\.' + extension + '$'), 67 | use: loader 68 | }) 69 | } 70 | return output 71 | } 72 | -------------------------------------------------------------------------------- /myDemo/build/vue-loader.conf.js: -------------------------------------------------------------------------------- 1 | var utils = require('./utils') 2 | var config = require('../config') 3 | var isProduction = process.env.NODE_ENV === 'production' 4 | 5 | module.exports = { 6 | loaders: utils.cssLoaders({ 7 | sourceMap: isProduction 8 | ? config.build.productionSourceMap 9 | : config.dev.cssSourceMap, 10 | extract: isProduction 11 | }) 12 | } 13 | -------------------------------------------------------------------------------- /myDemo/build/webpack.base.conf.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var utils = require('./utils') 3 | var config = require('../config') 4 | var vueLoaderConfig = require('./vue-loader.conf') 5 | 6 | function resolve (dir) { 7 | return path.join(__dirname, '..', dir) 8 | } 9 | 10 | module.exports = { 11 | entry: { 12 | app: './src/main.js' 13 | }, 14 | output: { 15 | path: config.build.assetsRoot, 16 | filename: '[name].js', 17 | publicPath: process.env.NODE_ENV === 'production' 18 | ? config.build.assetsPublicPath 19 | : config.dev.assetsPublicPath 20 | }, 21 | resolve: { 22 | extensions: ['.js', '.vue', '.json'], 23 | alias: { 24 | 'vue$': 'vue/dist/vue.esm.js', 25 | '@': resolve('src') 26 | } 27 | }, 28 | module: { 29 | rules: [ 30 | { 31 | test: /\.vue$/, 32 | loader: 'vue-loader', 33 | options: vueLoaderConfig 34 | }, 35 | { 36 | test: /\.js$/, 37 | loader: 'babel-loader', 38 | include: [resolve('src'), resolve('test')] 39 | }, 40 | { 41 | test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, 42 | loader: 'url-loader', 43 | options: { 44 | limit: 10000, 45 | name: utils.assetsPath('img/[name].[hash:7].[ext]') 46 | } 47 | }, 48 | { 49 | test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, 50 | loader: 'url-loader', 51 | options: { 52 | limit: 10000, 53 | name: utils.assetsPath('fonts/[name].[hash:7].[ext]') 54 | } 55 | } 56 | ] 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /myDemo/build/webpack.dev.conf.js: -------------------------------------------------------------------------------- 1 | var utils = require('./utils') 2 | var webpack = require('webpack') 3 | var config = require('../config') 4 | var merge = require('webpack-merge') 5 | var baseWebpackConfig = require('./webpack.base.conf') 6 | var HtmlWebpackPlugin = require('html-webpack-plugin') 7 | var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin') 8 | 9 | // add hot-reload related code to entry chunks 10 | Object.keys(baseWebpackConfig.entry).forEach(function (name) { 11 | baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name]) 12 | }) 13 | 14 | module.exports = merge(baseWebpackConfig, { 15 | module: { 16 | rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap }) 17 | }, 18 | // cheap-module-eval-source-map is faster for development 19 | devtool: '#cheap-module-eval-source-map', 20 | plugins: [ 21 | new webpack.DefinePlugin({ 22 | 'process.env': config.dev.env 23 | }), 24 | // https://github.com/glenjamin/webpack-hot-middleware#installation--usage 25 | new webpack.HotModuleReplacementPlugin(), 26 | new webpack.NoEmitOnErrorsPlugin(), 27 | // https://github.com/ampedandwired/html-webpack-plugin 28 | new HtmlWebpackPlugin({ 29 | filename: 'index.html', 30 | template: 'index.html', 31 | inject: true 32 | }), 33 | new FriendlyErrorsPlugin() 34 | ] 35 | }) 36 | -------------------------------------------------------------------------------- /myDemo/build/webpack.prod.conf.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var utils = require('./utils') 3 | var webpack = require('webpack') 4 | var config = require('../config') 5 | var merge = require('webpack-merge') 6 | var baseWebpackConfig = require('./webpack.base.conf') 7 | var CopyWebpackPlugin = require('copy-webpack-plugin') 8 | var HtmlWebpackPlugin = require('html-webpack-plugin') 9 | var ExtractTextPlugin = require('extract-text-webpack-plugin') 10 | var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin') 11 | 12 | var env = config.build.env 13 | 14 | var webpackConfig = merge(baseWebpackConfig, { 15 | module: { 16 | rules: utils.styleLoaders({ 17 | sourceMap: config.build.productionSourceMap, 18 | extract: true 19 | }) 20 | }, 21 | devtool: config.build.productionSourceMap ? '#source-map' : false, 22 | output: { 23 | path: config.build.assetsRoot, 24 | filename: utils.assetsPath('js/[name].[chunkhash].js'), 25 | chunkFilename: utils.assetsPath('js/[id].[chunkhash].js') 26 | }, 27 | plugins: [ 28 | // http://vuejs.github.io/vue-loader/en/workflow/production.html 29 | new webpack.DefinePlugin({ 30 | 'process.env': env 31 | }), 32 | new webpack.optimize.UglifyJsPlugin({ 33 | compress: { 34 | warnings: false 35 | }, 36 | sourceMap: true 37 | }), 38 | // extract css into its own file 39 | new ExtractTextPlugin({ 40 | filename: utils.assetsPath('css/[name].[contenthash].css') 41 | }), 42 | // Compress extracted CSS. We are using this plugin so that possible 43 | // duplicated CSS from different components can be deduped. 44 | new OptimizeCSSPlugin({ 45 | cssProcessorOptions: { 46 | safe: true 47 | } 48 | }), 49 | // generate dist index.html with correct asset hash for caching. 50 | // you can customize output by editing /index.html 51 | // see https://github.com/ampedandwired/html-webpack-plugin 52 | new HtmlWebpackPlugin({ 53 | filename: config.build.index, 54 | template: 'index.html', 55 | inject: true, 56 | minify: { 57 | removeComments: true, 58 | collapseWhitespace: true, 59 | removeAttributeQuotes: true 60 | // more options: 61 | // https://github.com/kangax/html-minifier#options-quick-reference 62 | }, 63 | // necessary to consistently work with multiple chunks via CommonsChunkPlugin 64 | chunksSortMode: 'dependency' 65 | }), 66 | // split vendor js into its own file 67 | new webpack.optimize.CommonsChunkPlugin({ 68 | name: 'vendor', 69 | minChunks: function (module, count) { 70 | // any required modules inside node_modules are extracted to vendor 71 | return ( 72 | module.resource && 73 | /\.js$/.test(module.resource) && 74 | module.resource.indexOf( 75 | path.join(__dirname, '../node_modules') 76 | ) === 0 77 | ) 78 | } 79 | }), 80 | // extract webpack runtime and module manifest to its own file in order to 81 | // prevent vendor hash from being updated whenever app bundle is updated 82 | new webpack.optimize.CommonsChunkPlugin({ 83 | name: 'manifest', 84 | chunks: ['vendor'] 85 | }), 86 | // copy custom static assets 87 | new CopyWebpackPlugin([ 88 | { 89 | from: path.resolve(__dirname, '../static'), 90 | to: config.build.assetsSubDirectory, 91 | ignore: ['.*'] 92 | } 93 | ]) 94 | ] 95 | }) 96 | 97 | if (config.build.productionGzip) { 98 | var CompressionWebpackPlugin = require('compression-webpack-plugin') 99 | 100 | webpackConfig.plugins.push( 101 | new CompressionWebpackPlugin({ 102 | asset: '[path].gz[query]', 103 | algorithm: 'gzip', 104 | test: new RegExp( 105 | '\\.(' + 106 | config.build.productionGzipExtensions.join('|') + 107 | ')$' 108 | ), 109 | threshold: 10240, 110 | minRatio: 0.8 111 | }) 112 | ) 113 | } 114 | 115 | if (config.build.bundleAnalyzerReport) { 116 | var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin 117 | webpackConfig.plugins.push(new BundleAnalyzerPlugin()) 118 | } 119 | 120 | module.exports = webpackConfig 121 | -------------------------------------------------------------------------------- /myDemo/config/dev.env.js: -------------------------------------------------------------------------------- 1 | var merge = require('webpack-merge') 2 | var prodEnv = require('./prod.env') 3 | 4 | module.exports = merge(prodEnv, { 5 | NODE_ENV: '"development"' 6 | }) 7 | -------------------------------------------------------------------------------- /myDemo/config/index.js: -------------------------------------------------------------------------------- 1 | // see http://vuejs-templates.github.io/webpack for documentation. 2 | var path = require('path') 3 | 4 | module.exports = { 5 | build: { 6 | env: require('./prod.env'), 7 | index: path.resolve(__dirname, '../dist/index.html'), 8 | assetsRoot: path.resolve(__dirname, '../dist'), 9 | assetsSubDirectory: 'static', 10 | assetsPublicPath: '/', 11 | productionSourceMap: true, 12 | // Gzip off by default as many popular static hosts such as 13 | // Surge or Netlify already gzip all static assets for you. 14 | // Before setting to `true`, make sure to: 15 | // npm install --save-dev compression-webpack-plugin 16 | productionGzip: false, 17 | productionGzipExtensions: ['js', 'css'], 18 | // Run the build command with an extra argument to 19 | // View the bundle analyzer report after build finishes: 20 | // `npm run build --report` 21 | // Set to `true` or `false` to always turn it on or off 22 | bundleAnalyzerReport: process.env.npm_config_report 23 | }, 24 | dev: { 25 | env: require('./dev.env'), 26 | port: 8081, 27 | autoOpenBrowser: true, 28 | assetsSubDirectory: 'static', 29 | assetsPublicPath: '/', 30 | proxyTable: {}, 31 | // CSS Sourcemaps off by default because relative paths are "buggy" 32 | // with this option, according to the CSS-Loader README 33 | // (https://github.com/webpack/css-loader#sourcemaps) 34 | // In our experience, they generally work as expected, 35 | // just be aware of this issue when enabling this option. 36 | cssSourceMap: false 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /myDemo/config/prod.env.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | NODE_ENV: '"production"' 3 | } 4 | -------------------------------------------------------------------------------- /myDemo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | photo 8 | 9 | 10 | 11 | 12 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /myDemo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "photo", 3 | "version": "1.0.0", 4 | "description": "A Vue.js project", 5 | "author": "", 6 | "private": true, 7 | "scripts": { 8 | "dev": "node build/dev-server.js", 9 | "start": "node build/dev-server.js", 10 | "build": "node build/build.js" 11 | }, 12 | "dependencies": { 13 | "echarts": "^3.6.2", 14 | "jsonp": "^0.2.1", 15 | "less": "^2.7.2", 16 | "less-loader": "^4.0.4", 17 | "mint-ui": "^2.2.9", 18 | "vconsole": "^2.5.2", 19 | "vue": "^2.3.3", 20 | "vue-amap": "^0.2.9", 21 | "vue-qart": "^2.0.7", 22 | "vue-resource": "^1.3.4", 23 | "vue-router": "^2.3.1", 24 | "vuex": "^2.3.1" 25 | }, 26 | "devDependencies": { 27 | "autoprefixer": "^6.7.2", 28 | "babel-core": "^6.22.1", 29 | "babel-loader": "^6.2.10", 30 | "babel-plugin-transform-runtime": "^6.22.0", 31 | "babel-preset-env": "^1.3.2", 32 | "babel-preset-stage-2": "^6.22.0", 33 | "babel-register": "^6.22.0", 34 | "chalk": "^1.1.3", 35 | "connect-history-api-fallback": "^1.3.0", 36 | "copy-webpack-plugin": "^4.0.1", 37 | "css-loader": "^0.28.0", 38 | "eventsource-polyfill": "^0.9.6", 39 | "express": "^4.14.1", 40 | "extract-text-webpack-plugin": "^2.0.0", 41 | "file-loader": "^0.11.1", 42 | "friendly-errors-webpack-plugin": "^1.1.3", 43 | "html-webpack-plugin": "^2.28.0", 44 | "http-proxy-middleware": "^0.17.3", 45 | "webpack-bundle-analyzer": "^2.2.1", 46 | "semver": "^5.3.0", 47 | "shelljs": "^0.7.6", 48 | "opn": "^4.0.2", 49 | "optimize-css-assets-webpack-plugin": "^1.3.0", 50 | "ora": "^1.2.0", 51 | "rimraf": "^2.6.0", 52 | "url-loader": "^0.5.8", 53 | "vue-loader": "^12.1.0", 54 | "vue-style-loader": "^3.0.1", 55 | "vue-template-compiler": "^2.3.3", 56 | "webpack": "^2.6.1", 57 | "webpack-dev-middleware": "^1.10.0", 58 | "webpack-hot-middleware": "^2.18.0", 59 | "webpack-merge": "^4.1.0" 60 | }, 61 | "engines": { 62 | "node": ">= 4.0.0", 63 | "npm": ">= 3.0.0" 64 | }, 65 | "browserslist": [ 66 | "> 1%", 67 | "last 2 versions", 68 | "not ie <= 8" 69 | ] 70 | } 71 | -------------------------------------------------------------------------------- /myDemo/src/App.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 14 | 15 | 25 | -------------------------------------------------------------------------------- /myDemo/src/api/a.js: -------------------------------------------------------------------------------- 1 | import jsonp from './jsonp' 2 | import {commonParams, options} from './config' 3 | 4 | export function getRecommend() { 5 | const url = 'https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg' 6 | 7 | const data = Object.assign({}, commonParams, { 8 | platform: 'h5', 9 | uin: 0, 10 | needNewCode: 1 11 | }) 12 | 13 | return jsonp(url, data, options) 14 | } 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /myDemo/src/api/config.js: -------------------------------------------------------------------------------- 1 | export const commonParams = { 2 | g_tk: 1928093487, 3 | inCharset: 'utf-8', 4 | outCharset: 'utf-8', 5 | notice: 0, 6 | format: 'jsonp' 7 | } 8 | 9 | export const options = { 10 | param: 'jsonpCallback' 11 | } 12 | 13 | export const ERR_OK = 0 -------------------------------------------------------------------------------- /myDemo/src/api/data.js: -------------------------------------------------------------------------------- 1 | export default { 2 | abc: [{'code': 'a', 'index':'1'},{'code': 'b', 'index': '2'},{'code': 'c', 'index': '3'},] 3 | } -------------------------------------------------------------------------------- /myDemo/src/api/jsonp.js: -------------------------------------------------------------------------------- 1 | import originJSONP from 'jsonp' 2 | 3 | export default function jsonp(url, data, option){ 4 | url += (url.indexOf('?')<0 ? '?' : '&') + param(data) 5 | return new Promise((resolve,reject) => { 6 | originJSONP(url, option, (err, data) => { 7 | if(!err){ 8 | resolve(data) 9 | } else{ 10 | reject(data) 11 | } 12 | }) 13 | }) 14 | } 15 | function param(data) { 16 | let url = '' 17 | for (var k in data) { 18 | let value = data[k] !== undefined ? data[k] : '' 19 | url += '&' + k + '=' + encodeURIComponent(value) 20 | } 21 | return url ? url.substring(1) : '' 22 | } 23 | -------------------------------------------------------------------------------- /myDemo/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fongdaBoy/Vue2.0ComponentDemo/bb845b26f62483ade700a7b229ed17f56fe8e45d/myDemo/src/assets/logo.png -------------------------------------------------------------------------------- /myDemo/src/common/js/test.js: -------------------------------------------------------------------------------- 1 | export function a() { 2 | alert(1) 3 | } 4 | // QRCode.prototype.a= function() { 5 | 6 | // } -------------------------------------------------------------------------------- /myDemo/src/components/Hello.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 33 | 34 | 53 | -------------------------------------------------------------------------------- /myDemo/src/components/Tab.vue: -------------------------------------------------------------------------------- 1 | 6 | 20 | -------------------------------------------------------------------------------- /myDemo/src/components/Tabs.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 66 | -------------------------------------------------------------------------------- /myDemo/src/components/Title.vue: -------------------------------------------------------------------------------- 1 | 33 | 155 | 156 | 224 | 225 | 226 | 366 | -------------------------------------------------------------------------------- /myDemo/src/components/Toast.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | 3 | const Toast = Vue.extend(require('./toast.vue')); 4 | let toastPool = []; 5 | 6 | let getAnInstange = function(){ 7 | if(toastPool.length>0){ 8 | let instance = toastPool[0]; 9 | toastPool.splice(0,1); 10 | return instance; 11 | } 12 | return new Toast({ 13 | el: document.createElement('div') 14 | }) 15 | }; 16 | 17 | let returnAnInstance =function(instance){ 18 | if(instance){ 19 | toastPool.push(instance); 20 | } 21 | }; 22 | 23 | let removeDom = event => { 24 | if (event) { 25 | document.body.removeChild(event); 26 | } 27 | }; 28 | 29 | Toast.prototype.close = function() { 30 | this.visible = false; 31 | removeDom(this.$el); 32 | this.closed = true; 33 | returnAnInstance(this); 34 | }; 35 | 36 | export default function(options){ 37 | options =options ||{}; 38 | let message,duration,type; 39 | if(typeof(options) === 'string'){ 40 | message = options; 41 | duration = 3000 42 | type = "success" 43 | }else{ 44 | message = options.message; 45 | duration = options.duration 46 | type = options.type 47 | } 48 | 49 | let instance = getAnInstange() 50 | instance.closed = false; 51 | clearTimeout(instance.timer); 52 | instance.message = message; 53 | instance.type = type; 54 | document.body.appendChild(instance.$el); 55 | Vue.nextTick(function(){ 56 | 57 | instance.$el.removeEventListener('transitionend', removeDom); 58 | instance.timer=setTimeout(()=>{ 59 | if (instance.closed) return; 60 | instance.close(); 61 | },duration) 62 | }) 63 | } -------------------------------------------------------------------------------- /myDemo/src/components/Toast.vue: -------------------------------------------------------------------------------- 1 | 13 | 22 | 25 | -------------------------------------------------------------------------------- /myDemo/src/components/bottom.vue: -------------------------------------------------------------------------------- 1 | 13 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /myDemo/src/components/exif.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 3 | var debug = false; 4 | 5 | var root = this; 6 | 7 | var EXIF = function(obj) { 8 | if (obj instanceof EXIF) return obj; 9 | if (!(this instanceof EXIF)) return new EXIF(obj); 10 | this.EXIFwrapped = obj; 11 | }; 12 | 13 | if (typeof exports !== 'undefined') { 14 | if (typeof module !== 'undefined' && module.exports) { 15 | exports = module.exports = EXIF; 16 | } 17 | exports.EXIF = EXIF; 18 | } else { 19 | root.EXIF = EXIF; 20 | } 21 | 22 | var ExifTags = EXIF.Tags = { 23 | 24 | // version tags 25 | 0x9000 : "ExifVersion", // EXIF version 26 | 0xA000 : "FlashpixVersion", // Flashpix format version 27 | 28 | // colorspace tags 29 | 0xA001 : "ColorSpace", // Color space information tag 30 | 31 | // image configuration 32 | 0xA002 : "PixelXDimension", // Valid width of meaningful image 33 | 0xA003 : "PixelYDimension", // Valid height of meaningful image 34 | 0x9101 : "ComponentsConfiguration", // Information about channels 35 | 0x9102 : "CompressedBitsPerPixel", // Compressed bits per pixel 36 | 37 | // user information 38 | 0x927C : "MakerNote", // Any desired information written by the manufacturer 39 | 0x9286 : "UserComment", // Comments by user 40 | 41 | // related file 42 | 0xA004 : "RelatedSoundFile", // Name of related sound file 43 | 44 | // date and time 45 | 0x9003 : "DateTimeOriginal", // Date and time when the original image was generated 46 | 0x9004 : "DateTimeDigitized", // Date and time when the image was stored digitally 47 | 0x9290 : "SubsecTime", // Fractions of seconds for DateTime 48 | 0x9291 : "SubsecTimeOriginal", // Fractions of seconds for DateTimeOriginal 49 | 0x9292 : "SubsecTimeDigitized", // Fractions of seconds for DateTimeDigitized 50 | 51 | // picture-taking conditions 52 | 0x829A : "ExposureTime", // Exposure time (in seconds) 53 | 0x829D : "FNumber", // F number 54 | 0x8822 : "ExposureProgram", // Exposure program 55 | 0x8824 : "SpectralSensitivity", // Spectral sensitivity 56 | 0x8827 : "ISOSpeedRatings", // ISO speed rating 57 | 0x8828 : "OECF", // Optoelectric conversion factor 58 | 0x9201 : "ShutterSpeedValue", // Shutter speed 59 | 0x9202 : "ApertureValue", // Lens aperture 60 | 0x9203 : "BrightnessValue", // Value of brightness 61 | 0x9204 : "ExposureBias", // Exposure bias 62 | 0x9205 : "MaxApertureValue", // Smallest F number of lens 63 | 0x9206 : "SubjectDistance", // Distance to subject in meters 64 | 0x9207 : "MeteringMode", // Metering mode 65 | 0x9208 : "LightSource", // Kind of light source 66 | 0x9209 : "Flash", // Flash status 67 | 0x9214 : "SubjectArea", // Location and area of main subject 68 | 0x920A : "FocalLength", // Focal length of the lens in mm 69 | 0xA20B : "FlashEnergy", // Strobe energy in BCPS 70 | 0xA20C : "SpatialFrequencyResponse", // 71 | 0xA20E : "FocalPlaneXResolution", // Number of pixels in width direction per FocalPlaneResolutionUnit 72 | 0xA20F : "FocalPlaneYResolution", // Number of pixels in height direction per FocalPlaneResolutionUnit 73 | 0xA210 : "FocalPlaneResolutionUnit", // Unit for measuring FocalPlaneXResolution and FocalPlaneYResolution 74 | 0xA214 : "SubjectLocation", // Location of subject in image 75 | 0xA215 : "ExposureIndex", // Exposure index selected on camera 76 | 0xA217 : "SensingMethod", // Image sensor type 77 | 0xA300 : "FileSource", // Image source (3 == DSC) 78 | 0xA301 : "SceneType", // Scene type (1 == directly photographed) 79 | 0xA302 : "CFAPattern", // Color filter array geometric pattern 80 | 0xA401 : "CustomRendered", // Special processing 81 | 0xA402 : "ExposureMode", // Exposure mode 82 | 0xA403 : "WhiteBalance", // 1 = auto white balance, 2 = manual 83 | 0xA404 : "DigitalZoomRation", // Digital zoom ratio 84 | 0xA405 : "FocalLengthIn35mmFilm", // Equivalent foacl length assuming 35mm film camera (in mm) 85 | 0xA406 : "SceneCaptureType", // Type of scene 86 | 0xA407 : "GainControl", // Degree of overall image gain adjustment 87 | 0xA408 : "Contrast", // Direction of contrast processing applied by camera 88 | 0xA409 : "Saturation", // Direction of saturation processing applied by camera 89 | 0xA40A : "Sharpness", // Direction of sharpness processing applied by camera 90 | 0xA40B : "DeviceSettingDescription", // 91 | 0xA40C : "SubjectDistanceRange", // Distance to subject 92 | 93 | // other tags 94 | 0xA005 : "InteroperabilityIFDPointer", 95 | 0xA420 : "ImageUniqueID" // Identifier assigned uniquely to each image 96 | }; 97 | 98 | var TiffTags = EXIF.TiffTags = { 99 | 0x0100 : "ImageWidth", 100 | 0x0101 : "ImageHeight", 101 | 0x8769 : "ExifIFDPointer", 102 | 0x8825 : "GPSInfoIFDPointer", 103 | 0xA005 : "InteroperabilityIFDPointer", 104 | 0x0102 : "BitsPerSample", 105 | 0x0103 : "Compression", 106 | 0x0106 : "PhotometricInterpretation", 107 | 0x0112 : "Orientation", 108 | 0x0115 : "SamplesPerPixel", 109 | 0x011C : "PlanarConfiguration", 110 | 0x0212 : "YCbCrSubSampling", 111 | 0x0213 : "YCbCrPositioning", 112 | 0x011A : "XResolution", 113 | 0x011B : "YResolution", 114 | 0x0128 : "ResolutionUnit", 115 | 0x0111 : "StripOffsets", 116 | 0x0116 : "RowsPerStrip", 117 | 0x0117 : "StripByteCounts", 118 | 0x0201 : "JPEGInterchangeFormat", 119 | 0x0202 : "JPEGInterchangeFormatLength", 120 | 0x012D : "TransferFunction", 121 | 0x013E : "WhitePoint", 122 | 0x013F : "PrimaryChromaticities", 123 | 0x0211 : "YCbCrCoefficients", 124 | 0x0214 : "ReferenceBlackWhite", 125 | 0x0132 : "DateTime", 126 | 0x010E : "ImageDescription", 127 | 0x010F : "Make", 128 | 0x0110 : "Model", 129 | 0x0131 : "Software", 130 | 0x013B : "Artist", 131 | 0x8298 : "Copyright" 132 | }; 133 | 134 | var GPSTags = EXIF.GPSTags = { 135 | 0x0000 : "GPSVersionID", 136 | 0x0001 : "GPSLatitudeRef", 137 | 0x0002 : "GPSLatitude", 138 | 0x0003 : "GPSLongitudeRef", 139 | 0x0004 : "GPSLongitude", 140 | 0x0005 : "GPSAltitudeRef", 141 | 0x0006 : "GPSAltitude", 142 | 0x0007 : "GPSTimeStamp", 143 | 0x0008 : "GPSSatellites", 144 | 0x0009 : "GPSStatus", 145 | 0x000A : "GPSMeasureMode", 146 | 0x000B : "GPSDOP", 147 | 0x000C : "GPSSpeedRef", 148 | 0x000D : "GPSSpeed", 149 | 0x000E : "GPSTrackRef", 150 | 0x000F : "GPSTrack", 151 | 0x0010 : "GPSImgDirectionRef", 152 | 0x0011 : "GPSImgDirection", 153 | 0x0012 : "GPSMapDatum", 154 | 0x0013 : "GPSDestLatitudeRef", 155 | 0x0014 : "GPSDestLatitude", 156 | 0x0015 : "GPSDestLongitudeRef", 157 | 0x0016 : "GPSDestLongitude", 158 | 0x0017 : "GPSDestBearingRef", 159 | 0x0018 : "GPSDestBearing", 160 | 0x0019 : "GPSDestDistanceRef", 161 | 0x001A : "GPSDestDistance", 162 | 0x001B : "GPSProcessingMethod", 163 | 0x001C : "GPSAreaInformation", 164 | 0x001D : "GPSDateStamp", 165 | 0x001E : "GPSDifferential" 166 | }; 167 | 168 | var StringValues = EXIF.StringValues = { 169 | ExposureProgram : { 170 | 0 : "Not defined", 171 | 1 : "Manual", 172 | 2 : "Normal program", 173 | 3 : "Aperture priority", 174 | 4 : "Shutter priority", 175 | 5 : "Creative program", 176 | 6 : "Action program", 177 | 7 : "Portrait mode", 178 | 8 : "Landscape mode" 179 | }, 180 | MeteringMode : { 181 | 0 : "Unknown", 182 | 1 : "Average", 183 | 2 : "CenterWeightedAverage", 184 | 3 : "Spot", 185 | 4 : "MultiSpot", 186 | 5 : "Pattern", 187 | 6 : "Partial", 188 | 255 : "Other" 189 | }, 190 | LightSource : { 191 | 0 : "Unknown", 192 | 1 : "Daylight", 193 | 2 : "Fluorescent", 194 | 3 : "Tungsten (incandescent light)", 195 | 4 : "Flash", 196 | 9 : "Fine weather", 197 | 10 : "Cloudy weather", 198 | 11 : "Shade", 199 | 12 : "Daylight fluorescent (D 5700 - 7100K)", 200 | 13 : "Day white fluorescent (N 4600 - 5400K)", 201 | 14 : "Cool white fluorescent (W 3900 - 4500K)", 202 | 15 : "White fluorescent (WW 3200 - 3700K)", 203 | 17 : "Standard light A", 204 | 18 : "Standard light B", 205 | 19 : "Standard light C", 206 | 20 : "D55", 207 | 21 : "D65", 208 | 22 : "D75", 209 | 23 : "D50", 210 | 24 : "ISO studio tungsten", 211 | 255 : "Other" 212 | }, 213 | Flash : { 214 | 0x0000 : "Flash did not fire", 215 | 0x0001 : "Flash fired", 216 | 0x0005 : "Strobe return light not detected", 217 | 0x0007 : "Strobe return light detected", 218 | 0x0009 : "Flash fired, compulsory flash mode", 219 | 0x000D : "Flash fired, compulsory flash mode, return light not detected", 220 | 0x000F : "Flash fired, compulsory flash mode, return light detected", 221 | 0x0010 : "Flash did not fire, compulsory flash mode", 222 | 0x0018 : "Flash did not fire, auto mode", 223 | 0x0019 : "Flash fired, auto mode", 224 | 0x001D : "Flash fired, auto mode, return light not detected", 225 | 0x001F : "Flash fired, auto mode, return light detected", 226 | 0x0020 : "No flash function", 227 | 0x0041 : "Flash fired, red-eye reduction mode", 228 | 0x0045 : "Flash fired, red-eye reduction mode, return light not detected", 229 | 0x0047 : "Flash fired, red-eye reduction mode, return light detected", 230 | 0x0049 : "Flash fired, compulsory flash mode, red-eye reduction mode", 231 | 0x004D : "Flash fired, compulsory flash mode, red-eye reduction mode, return light not detected", 232 | 0x004F : "Flash fired, compulsory flash mode, red-eye reduction mode, return light detected", 233 | 0x0059 : "Flash fired, auto mode, red-eye reduction mode", 234 | 0x005D : "Flash fired, auto mode, return light not detected, red-eye reduction mode", 235 | 0x005F : "Flash fired, auto mode, return light detected, red-eye reduction mode" 236 | }, 237 | SensingMethod : { 238 | 1 : "Not defined", 239 | 2 : "One-chip color area sensor", 240 | 3 : "Two-chip color area sensor", 241 | 4 : "Three-chip color area sensor", 242 | 5 : "Color sequential area sensor", 243 | 7 : "Trilinear sensor", 244 | 8 : "Color sequential linear sensor" 245 | }, 246 | SceneCaptureType : { 247 | 0 : "Standard", 248 | 1 : "Landscape", 249 | 2 : "Portrait", 250 | 3 : "Night scene" 251 | }, 252 | SceneType : { 253 | 1 : "Directly photographed" 254 | }, 255 | CustomRendered : { 256 | 0 : "Normal process", 257 | 1 : "Custom process" 258 | }, 259 | WhiteBalance : { 260 | 0 : "Auto white balance", 261 | 1 : "Manual white balance" 262 | }, 263 | GainControl : { 264 | 0 : "None", 265 | 1 : "Low gain up", 266 | 2 : "High gain up", 267 | 3 : "Low gain down", 268 | 4 : "High gain down" 269 | }, 270 | Contrast : { 271 | 0 : "Normal", 272 | 1 : "Soft", 273 | 2 : "Hard" 274 | }, 275 | Saturation : { 276 | 0 : "Normal", 277 | 1 : "Low saturation", 278 | 2 : "High saturation" 279 | }, 280 | Sharpness : { 281 | 0 : "Normal", 282 | 1 : "Soft", 283 | 2 : "Hard" 284 | }, 285 | SubjectDistanceRange : { 286 | 0 : "Unknown", 287 | 1 : "Macro", 288 | 2 : "Close view", 289 | 3 : "Distant view" 290 | }, 291 | FileSource : { 292 | 3 : "DSC" 293 | }, 294 | 295 | Components : { 296 | 0 : "", 297 | 1 : "Y", 298 | 2 : "Cb", 299 | 3 : "Cr", 300 | 4 : "R", 301 | 5 : "G", 302 | 6 : "B" 303 | } 304 | }; 305 | 306 | function addEvent(element, event, handler) { 307 | if (element.addEventListener) { 308 | element.addEventListener(event, handler, false); 309 | } else if (element.attachEvent) { 310 | element.attachEvent("on" + event, handler); 311 | } 312 | } 313 | 314 | function imageHasData(img) { 315 | return !!(img.exifdata); 316 | } 317 | 318 | 319 | function base64ToArrayBuffer(base64, contentType) { 320 | contentType = contentType || base64.match(/^data\:([^\;]+)\;base64,/mi)[1] || ''; // e.g. 'data:image/jpeg;base64,...' => 'image/jpeg' 321 | base64 = base64.replace(/^data\:([^\;]+)\;base64,/gmi, ''); 322 | var binary = atob(base64); 323 | var len = binary.length; 324 | var buffer = new ArrayBuffer(len); 325 | var view = new Uint8Array(buffer); 326 | for (var i = 0; i < len; i++) { 327 | view[i] = binary.charCodeAt(i); 328 | } 329 | return buffer; 330 | } 331 | 332 | function objectURLToBlob(url, callback) { 333 | var http = new XMLHttpRequest(); 334 | http.open("GET", url, true); 335 | http.responseType = "blob"; 336 | http.onload = function(e) { 337 | if (this.status == 200 || this.status === 0) { 338 | callback(this.response); 339 | } 340 | }; 341 | http.send(); 342 | } 343 | 344 | function getImageData(img, callback) { 345 | function handleBinaryFile(binFile) { 346 | var data = findEXIFinJPEG(binFile); 347 | var iptcdata = findIPTCinJPEG(binFile); 348 | img.exifdata = data || {}; 349 | img.iptcdata = iptcdata || {}; 350 | if (callback) { 351 | callback.call(img); 352 | } 353 | } 354 | 355 | if (img.src) { 356 | if (/^data\:/i.test(img.src)) { // Data URI 357 | var arrayBuffer = base64ToArrayBuffer(img.src); 358 | handleBinaryFile(arrayBuffer); 359 | 360 | } else if (/^blob\:/i.test(img.src)) { // Object URL 361 | var fileReader = new FileReader(); 362 | fileReader.onload = function(e) { 363 | handleBinaryFile(e.target.result); 364 | }; 365 | objectURLToBlob(img.src, function (blob) { 366 | fileReader.readAsArrayBuffer(blob); 367 | }); 368 | } else { 369 | var http = new XMLHttpRequest(); 370 | http.onload = function() { 371 | if (this.status == 200 || this.status === 0) { 372 | handleBinaryFile(http.response); 373 | } else { 374 | throw "Could not load image"; 375 | } 376 | http = null; 377 | }; 378 | http.open("GET", img.src, true); 379 | http.responseType = "arraybuffer"; 380 | http.send(null); 381 | } 382 | } else if (window.FileReader && (img instanceof window.Blob || img instanceof window.File)) { 383 | var fileReader = new FileReader(); 384 | fileReader.onload = function(e) { 385 | if (debug) console.log("Got file of length " + e.target.result.byteLength); 386 | handleBinaryFile(e.target.result); 387 | }; 388 | 389 | fileReader.readAsArrayBuffer(img); 390 | } 391 | } 392 | 393 | function findEXIFinJPEG(file) { 394 | var dataView = new DataView(file); 395 | 396 | if (debug) console.log("Got file of length " + file.byteLength); 397 | if ((dataView.getUint8(0) != 0xFF) || (dataView.getUint8(1) != 0xD8)) { 398 | if (debug) console.log("Not a valid JPEG"); 399 | return false; // not a valid jpeg 400 | } 401 | 402 | var offset = 2, 403 | length = file.byteLength, 404 | marker; 405 | 406 | while (offset < length) { 407 | if (dataView.getUint8(offset) != 0xFF) { 408 | if (debug) console.log("Not a valid marker at offset " + offset + ", found: " + dataView.getUint8(offset)); 409 | return false; // not a valid marker, something is wrong 410 | } 411 | 412 | marker = dataView.getUint8(offset + 1); 413 | if (debug) console.log(marker); 414 | 415 | // we could implement handling for other markers here, 416 | // but we're only looking for 0xFFE1 for EXIF data 417 | 418 | if (marker == 225) { 419 | if (debug) console.log("Found 0xFFE1 marker"); 420 | 421 | return readEXIFData(dataView, offset + 4, dataView.getUint16(offset + 2) - 2); 422 | 423 | // offset += 2 + file.getShortAt(offset+2, true); 424 | 425 | } else { 426 | offset += 2 + dataView.getUint16(offset+2); 427 | } 428 | 429 | } 430 | 431 | } 432 | 433 | function findIPTCinJPEG(file) { 434 | var dataView = new DataView(file); 435 | 436 | if (debug) console.log("Got file of length " + file.byteLength); 437 | if ((dataView.getUint8(0) != 0xFF) || (dataView.getUint8(1) != 0xD8)) { 438 | if (debug) console.log("Not a valid JPEG"); 439 | return false; // not a valid jpeg 440 | } 441 | 442 | var offset = 2, 443 | length = file.byteLength; 444 | 445 | 446 | var isFieldSegmentStart = function(dataView, offset){ 447 | return ( 448 | dataView.getUint8(offset) === 0x38 && 449 | dataView.getUint8(offset+1) === 0x42 && 450 | dataView.getUint8(offset+2) === 0x49 && 451 | dataView.getUint8(offset+3) === 0x4D && 452 | dataView.getUint8(offset+4) === 0x04 && 453 | dataView.getUint8(offset+5) === 0x04 454 | ); 455 | }; 456 | 457 | while (offset < length) { 458 | 459 | if ( isFieldSegmentStart(dataView, offset )){ 460 | 461 | // Get the length of the name header (which is padded to an even number of bytes) 462 | var nameHeaderLength = dataView.getUint8(offset+7); 463 | if(nameHeaderLength % 2 !== 0) nameHeaderLength += 1; 464 | // Check for pre photoshop 6 format 465 | if(nameHeaderLength === 0) { 466 | // Always 4 467 | nameHeaderLength = 4; 468 | } 469 | 470 | var startOffset = offset + 8 + nameHeaderLength; 471 | var sectionLength = dataView.getUint16(offset + 6 + nameHeaderLength); 472 | 473 | return readIPTCData(file, startOffset, sectionLength); 474 | 475 | break; 476 | 477 | } 478 | 479 | 480 | // Not the marker, continue searching 481 | offset++; 482 | 483 | } 484 | 485 | } 486 | var IptcFieldMap = { 487 | 0x78 : 'caption', 488 | 0x6E : 'credit', 489 | 0x19 : 'keywords', 490 | 0x37 : 'dateCreated', 491 | 0x50 : 'byline', 492 | 0x55 : 'bylineTitle', 493 | 0x7A : 'captionWriter', 494 | 0x69 : 'headline', 495 | 0x74 : 'copyright', 496 | 0x0F : 'category' 497 | }; 498 | function readIPTCData(file, startOffset, sectionLength){ 499 | var dataView = new DataView(file); 500 | var data = {}; 501 | var fieldValue, fieldName, dataSize, segmentType, segmentSize; 502 | var segmentStartPos = startOffset; 503 | while(segmentStartPos < startOffset+sectionLength) { 504 | if(dataView.getUint8(segmentStartPos) === 0x1C && dataView.getUint8(segmentStartPos+1) === 0x02){ 505 | segmentType = dataView.getUint8(segmentStartPos+2); 506 | if(segmentType in IptcFieldMap) { 507 | dataSize = dataView.getInt16(segmentStartPos+3); 508 | segmentSize = dataSize + 5; 509 | fieldName = IptcFieldMap[segmentType]; 510 | fieldValue = getStringFromDB(dataView, segmentStartPos+5, dataSize); 511 | // Check if we already stored a value with this name 512 | if(data.hasOwnProperty(fieldName)) { 513 | // Value already stored with this name, create multivalue field 514 | if(data[fieldName] instanceof Array) { 515 | data[fieldName].push(fieldValue); 516 | } 517 | else { 518 | data[fieldName] = [data[fieldName], fieldValue]; 519 | } 520 | } 521 | else { 522 | data[fieldName] = fieldValue; 523 | } 524 | } 525 | 526 | } 527 | segmentStartPos++; 528 | } 529 | return data; 530 | } 531 | 532 | 533 | 534 | function readTags(file, tiffStart, dirStart, strings, bigEnd) { 535 | var entries = file.getUint16(dirStart, !bigEnd), 536 | tags = {}, 537 | entryOffset, tag, 538 | i; 539 | 540 | for (i=0;i 4 ? valueOffset : (entryOffset + 8); 565 | vals = []; 566 | for (n=0;n 4 ? valueOffset : (entryOffset + 8); 574 | return getStringFromDB(file, offset, numValues-1); 575 | 576 | case 3: // short, 16 bit int 577 | if (numValues == 1) { 578 | return file.getUint16(entryOffset + 8, !bigEnd); 579 | } else { 580 | offset = numValues > 2 ? valueOffset : (entryOffset + 8); 581 | vals = []; 582 | for (n=0;n { 11 | if (event) { 12 | document.body.removeChild(event); 13 | } 14 | }; 15 | Notice.prototype.close = function() { 16 | removeDom(this.$el); 17 | } 18 | export default function(options){ 19 | options =options ||{}; 20 | let message,duration,type,color,backgroundColor; 21 | if(typeof(options) === 'string'){ 22 | message = options; 23 | duration = 3000 24 | type = "top" 25 | color = '#fff' 26 | backgroundColor = '#FFBB2B' 27 | }else{ 28 | message = options.message || '这里填写信息' 29 | duration = options.duration || '3000' 30 | type = options.type || 'top' 31 | color = options.color || '#fff' 32 | backgroundColor = options.backgroundColor || '#FFBB2B' 33 | } 34 | let instance = b() 35 | instance.closed = false; 36 | clearTimeout(instance.timer); 37 | instance.message = message; 38 | instance.type = type; 39 | instance.duration = duration; 40 | instance.color = color; 41 | instance.backgroundColor = backgroundColor; 42 | instance.tipStyle={color:color,backgroundColor:backgroundColor} 43 | 44 | document.body.appendChild(instance.$el); 45 | if(type=='top'){ 46 | 47 | }else{ 48 | Vue.nextTick(function() { 49 | instance.$el.removeEventListener('transitionend', removeDom); 50 | instance.timer = setTimeout(()=> { 51 | instance.close() 52 | },duration) 53 | }) 54 | } 55 | 56 | } -------------------------------------------------------------------------------- /myDemo/src/components/noticeTip.vue: -------------------------------------------------------------------------------- 1 | 16 | 33 | -------------------------------------------------------------------------------- /myDemo/src/components/photoview/exif.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 3 | var debug = false; 4 | 5 | var root = this; 6 | 7 | var EXIF = function(obj) { 8 | if (obj instanceof EXIF) return obj; 9 | if (!(this instanceof EXIF)) return new EXIF(obj); 10 | this.EXIFwrapped = obj; 11 | }; 12 | 13 | if (typeof exports !== 'undefined') { 14 | if (typeof module !== 'undefined' && module.exports) { 15 | exports = module.exports = EXIF; 16 | } 17 | exports.EXIF = EXIF; 18 | } else { 19 | root.EXIF = EXIF; 20 | } 21 | 22 | var ExifTags = EXIF.Tags = { 23 | 24 | // version tags 25 | 0x9000 : "ExifVersion", // EXIF version 26 | 0xA000 : "FlashpixVersion", // Flashpix format version 27 | 28 | // colorspace tags 29 | 0xA001 : "ColorSpace", // Color space information tag 30 | 31 | // image configuration 32 | 0xA002 : "PixelXDimension", // Valid width of meaningful image 33 | 0xA003 : "PixelYDimension", // Valid height of meaningful image 34 | 0x9101 : "ComponentsConfiguration", // Information about channels 35 | 0x9102 : "CompressedBitsPerPixel", // Compressed bits per pixel 36 | 37 | // user information 38 | 0x927C : "MakerNote", // Any desired information written by the manufacturer 39 | 0x9286 : "UserComment", // Comments by user 40 | 41 | // related file 42 | 0xA004 : "RelatedSoundFile", // Name of related sound file 43 | 44 | // date and time 45 | 0x9003 : "DateTimeOriginal", // Date and time when the original image was generated 46 | 0x9004 : "DateTimeDigitized", // Date and time when the image was stored digitally 47 | 0x9290 : "SubsecTime", // Fractions of seconds for DateTime 48 | 0x9291 : "SubsecTimeOriginal", // Fractions of seconds for DateTimeOriginal 49 | 0x9292 : "SubsecTimeDigitized", // Fractions of seconds for DateTimeDigitized 50 | 51 | // picture-taking conditions 52 | 0x829A : "ExposureTime", // Exposure time (in seconds) 53 | 0x829D : "FNumber", // F number 54 | 0x8822 : "ExposureProgram", // Exposure program 55 | 0x8824 : "SpectralSensitivity", // Spectral sensitivity 56 | 0x8827 : "ISOSpeedRatings", // ISO speed rating 57 | 0x8828 : "OECF", // Optoelectric conversion factor 58 | 0x9201 : "ShutterSpeedValue", // Shutter speed 59 | 0x9202 : "ApertureValue", // Lens aperture 60 | 0x9203 : "BrightnessValue", // Value of brightness 61 | 0x9204 : "ExposureBias", // Exposure bias 62 | 0x9205 : "MaxApertureValue", // Smallest F number of lens 63 | 0x9206 : "SubjectDistance", // Distance to subject in meters 64 | 0x9207 : "MeteringMode", // Metering mode 65 | 0x9208 : "LightSource", // Kind of light source 66 | 0x9209 : "Flash", // Flash status 67 | 0x9214 : "SubjectArea", // Location and area of main subject 68 | 0x920A : "FocalLength", // Focal length of the lens in mm 69 | 0xA20B : "FlashEnergy", // Strobe energy in BCPS 70 | 0xA20C : "SpatialFrequencyResponse", // 71 | 0xA20E : "FocalPlaneXResolution", // Number of pixels in width direction per FocalPlaneResolutionUnit 72 | 0xA20F : "FocalPlaneYResolution", // Number of pixels in height direction per FocalPlaneResolutionUnit 73 | 0xA210 : "FocalPlaneResolutionUnit", // Unit for measuring FocalPlaneXResolution and FocalPlaneYResolution 74 | 0xA214 : "SubjectLocation", // Location of subject in image 75 | 0xA215 : "ExposureIndex", // Exposure index selected on camera 76 | 0xA217 : "SensingMethod", // Image sensor type 77 | 0xA300 : "FileSource", // Image source (3 == DSC) 78 | 0xA301 : "SceneType", // Scene type (1 == directly photographed) 79 | 0xA302 : "CFAPattern", // Color filter array geometric pattern 80 | 0xA401 : "CustomRendered", // Special processing 81 | 0xA402 : "ExposureMode", // Exposure mode 82 | 0xA403 : "WhiteBalance", // 1 = auto white balance, 2 = manual 83 | 0xA404 : "DigitalZoomRation", // Digital zoom ratio 84 | 0xA405 : "FocalLengthIn35mmFilm", // Equivalent foacl length assuming 35mm film camera (in mm) 85 | 0xA406 : "SceneCaptureType", // Type of scene 86 | 0xA407 : "GainControl", // Degree of overall image gain adjustment 87 | 0xA408 : "Contrast", // Direction of contrast processing applied by camera 88 | 0xA409 : "Saturation", // Direction of saturation processing applied by camera 89 | 0xA40A : "Sharpness", // Direction of sharpness processing applied by camera 90 | 0xA40B : "DeviceSettingDescription", // 91 | 0xA40C : "SubjectDistanceRange", // Distance to subject 92 | 93 | // other tags 94 | 0xA005 : "InteroperabilityIFDPointer", 95 | 0xA420 : "ImageUniqueID" // Identifier assigned uniquely to each image 96 | }; 97 | 98 | var TiffTags = EXIF.TiffTags = { 99 | 0x0100 : "ImageWidth", 100 | 0x0101 : "ImageHeight", 101 | 0x8769 : "ExifIFDPointer", 102 | 0x8825 : "GPSInfoIFDPointer", 103 | 0xA005 : "InteroperabilityIFDPointer", 104 | 0x0102 : "BitsPerSample", 105 | 0x0103 : "Compression", 106 | 0x0106 : "PhotometricInterpretation", 107 | 0x0112 : "Orientation", 108 | 0x0115 : "SamplesPerPixel", 109 | 0x011C : "PlanarConfiguration", 110 | 0x0212 : "YCbCrSubSampling", 111 | 0x0213 : "YCbCrPositioning", 112 | 0x011A : "XResolution", 113 | 0x011B : "YResolution", 114 | 0x0128 : "ResolutionUnit", 115 | 0x0111 : "StripOffsets", 116 | 0x0116 : "RowsPerStrip", 117 | 0x0117 : "StripByteCounts", 118 | 0x0201 : "JPEGInterchangeFormat", 119 | 0x0202 : "JPEGInterchangeFormatLength", 120 | 0x012D : "TransferFunction", 121 | 0x013E : "WhitePoint", 122 | 0x013F : "PrimaryChromaticities", 123 | 0x0211 : "YCbCrCoefficients", 124 | 0x0214 : "ReferenceBlackWhite", 125 | 0x0132 : "DateTime", 126 | 0x010E : "ImageDescription", 127 | 0x010F : "Make", 128 | 0x0110 : "Model", 129 | 0x0131 : "Software", 130 | 0x013B : "Artist", 131 | 0x8298 : "Copyright" 132 | }; 133 | 134 | var GPSTags = EXIF.GPSTags = { 135 | 0x0000 : "GPSVersionID", 136 | 0x0001 : "GPSLatitudeRef", 137 | 0x0002 : "GPSLatitude", 138 | 0x0003 : "GPSLongitudeRef", 139 | 0x0004 : "GPSLongitude", 140 | 0x0005 : "GPSAltitudeRef", 141 | 0x0006 : "GPSAltitude", 142 | 0x0007 : "GPSTimeStamp", 143 | 0x0008 : "GPSSatellites", 144 | 0x0009 : "GPSStatus", 145 | 0x000A : "GPSMeasureMode", 146 | 0x000B : "GPSDOP", 147 | 0x000C : "GPSSpeedRef", 148 | 0x000D : "GPSSpeed", 149 | 0x000E : "GPSTrackRef", 150 | 0x000F : "GPSTrack", 151 | 0x0010 : "GPSImgDirectionRef", 152 | 0x0011 : "GPSImgDirection", 153 | 0x0012 : "GPSMapDatum", 154 | 0x0013 : "GPSDestLatitudeRef", 155 | 0x0014 : "GPSDestLatitude", 156 | 0x0015 : "GPSDestLongitudeRef", 157 | 0x0016 : "GPSDestLongitude", 158 | 0x0017 : "GPSDestBearingRef", 159 | 0x0018 : "GPSDestBearing", 160 | 0x0019 : "GPSDestDistanceRef", 161 | 0x001A : "GPSDestDistance", 162 | 0x001B : "GPSProcessingMethod", 163 | 0x001C : "GPSAreaInformation", 164 | 0x001D : "GPSDateStamp", 165 | 0x001E : "GPSDifferential" 166 | }; 167 | 168 | var StringValues = EXIF.StringValues = { 169 | ExposureProgram : { 170 | 0 : "Not defined", 171 | 1 : "Manual", 172 | 2 : "Normal program", 173 | 3 : "Aperture priority", 174 | 4 : "Shutter priority", 175 | 5 : "Creative program", 176 | 6 : "Action program", 177 | 7 : "Portrait mode", 178 | 8 : "Landscape mode" 179 | }, 180 | MeteringMode : { 181 | 0 : "Unknown", 182 | 1 : "Average", 183 | 2 : "CenterWeightedAverage", 184 | 3 : "Spot", 185 | 4 : "MultiSpot", 186 | 5 : "Pattern", 187 | 6 : "Partial", 188 | 255 : "Other" 189 | }, 190 | LightSource : { 191 | 0 : "Unknown", 192 | 1 : "Daylight", 193 | 2 : "Fluorescent", 194 | 3 : "Tungsten (incandescent light)", 195 | 4 : "Flash", 196 | 9 : "Fine weather", 197 | 10 : "Cloudy weather", 198 | 11 : "Shade", 199 | 12 : "Daylight fluorescent (D 5700 - 7100K)", 200 | 13 : "Day white fluorescent (N 4600 - 5400K)", 201 | 14 : "Cool white fluorescent (W 3900 - 4500K)", 202 | 15 : "White fluorescent (WW 3200 - 3700K)", 203 | 17 : "Standard light A", 204 | 18 : "Standard light B", 205 | 19 : "Standard light C", 206 | 20 : "D55", 207 | 21 : "D65", 208 | 22 : "D75", 209 | 23 : "D50", 210 | 24 : "ISO studio tungsten", 211 | 255 : "Other" 212 | }, 213 | Flash : { 214 | 0x0000 : "Flash did not fire", 215 | 0x0001 : "Flash fired", 216 | 0x0005 : "Strobe return light not detected", 217 | 0x0007 : "Strobe return light detected", 218 | 0x0009 : "Flash fired, compulsory flash mode", 219 | 0x000D : "Flash fired, compulsory flash mode, return light not detected", 220 | 0x000F : "Flash fired, compulsory flash mode, return light detected", 221 | 0x0010 : "Flash did not fire, compulsory flash mode", 222 | 0x0018 : "Flash did not fire, auto mode", 223 | 0x0019 : "Flash fired, auto mode", 224 | 0x001D : "Flash fired, auto mode, return light not detected", 225 | 0x001F : "Flash fired, auto mode, return light detected", 226 | 0x0020 : "No flash function", 227 | 0x0041 : "Flash fired, red-eye reduction mode", 228 | 0x0045 : "Flash fired, red-eye reduction mode, return light not detected", 229 | 0x0047 : "Flash fired, red-eye reduction mode, return light detected", 230 | 0x0049 : "Flash fired, compulsory flash mode, red-eye reduction mode", 231 | 0x004D : "Flash fired, compulsory flash mode, red-eye reduction mode, return light not detected", 232 | 0x004F : "Flash fired, compulsory flash mode, red-eye reduction mode, return light detected", 233 | 0x0059 : "Flash fired, auto mode, red-eye reduction mode", 234 | 0x005D : "Flash fired, auto mode, return light not detected, red-eye reduction mode", 235 | 0x005F : "Flash fired, auto mode, return light detected, red-eye reduction mode" 236 | }, 237 | SensingMethod : { 238 | 1 : "Not defined", 239 | 2 : "One-chip color area sensor", 240 | 3 : "Two-chip color area sensor", 241 | 4 : "Three-chip color area sensor", 242 | 5 : "Color sequential area sensor", 243 | 7 : "Trilinear sensor", 244 | 8 : "Color sequential linear sensor" 245 | }, 246 | SceneCaptureType : { 247 | 0 : "Standard", 248 | 1 : "Landscape", 249 | 2 : "Portrait", 250 | 3 : "Night scene" 251 | }, 252 | SceneType : { 253 | 1 : "Directly photographed" 254 | }, 255 | CustomRendered : { 256 | 0 : "Normal process", 257 | 1 : "Custom process" 258 | }, 259 | WhiteBalance : { 260 | 0 : "Auto white balance", 261 | 1 : "Manual white balance" 262 | }, 263 | GainControl : { 264 | 0 : "None", 265 | 1 : "Low gain up", 266 | 2 : "High gain up", 267 | 3 : "Low gain down", 268 | 4 : "High gain down" 269 | }, 270 | Contrast : { 271 | 0 : "Normal", 272 | 1 : "Soft", 273 | 2 : "Hard" 274 | }, 275 | Saturation : { 276 | 0 : "Normal", 277 | 1 : "Low saturation", 278 | 2 : "High saturation" 279 | }, 280 | Sharpness : { 281 | 0 : "Normal", 282 | 1 : "Soft", 283 | 2 : "Hard" 284 | }, 285 | SubjectDistanceRange : { 286 | 0 : "Unknown", 287 | 1 : "Macro", 288 | 2 : "Close view", 289 | 3 : "Distant view" 290 | }, 291 | FileSource : { 292 | 3 : "DSC" 293 | }, 294 | 295 | Components : { 296 | 0 : "", 297 | 1 : "Y", 298 | 2 : "Cb", 299 | 3 : "Cr", 300 | 4 : "R", 301 | 5 : "G", 302 | 6 : "B" 303 | } 304 | }; 305 | 306 | function addEvent(element, event, handler) { 307 | if (element.addEventListener) { 308 | element.addEventListener(event, handler, false); 309 | } else if (element.attachEvent) { 310 | element.attachEvent("on" + event, handler); 311 | } 312 | } 313 | 314 | function imageHasData(img) { 315 | return !!(img.exifdata); 316 | } 317 | 318 | 319 | function base64ToArrayBuffer(base64, contentType) { 320 | contentType = contentType || base64.match(/^data\:([^\;]+)\;base64,/mi)[1] || ''; // e.g. 'data:image/jpeg;base64,...' => 'image/jpeg' 321 | base64 = base64.replace(/^data\:([^\;]+)\;base64,/gmi, ''); 322 | var binary = atob(base64); 323 | var len = binary.length; 324 | var buffer = new ArrayBuffer(len); 325 | var view = new Uint8Array(buffer); 326 | for (var i = 0; i < len; i++) { 327 | view[i] = binary.charCodeAt(i); 328 | } 329 | return buffer; 330 | } 331 | 332 | function objectURLToBlob(url, callback) { 333 | var http = new XMLHttpRequest(); 334 | http.open("GET", url, true); 335 | http.responseType = "blob"; 336 | http.onload = function(e) { 337 | if (this.status == 200 || this.status === 0) { 338 | callback(this.response); 339 | } 340 | }; 341 | http.send(); 342 | } 343 | 344 | function getImageData(img, callback) { 345 | function handleBinaryFile(binFile) { 346 | var data = findEXIFinJPEG(binFile); 347 | var iptcdata = findIPTCinJPEG(binFile); 348 | img.exifdata = data || {}; 349 | img.iptcdata = iptcdata || {}; 350 | if (callback) { 351 | callback.call(img); 352 | } 353 | } 354 | 355 | if (img.src) { 356 | if (/^data\:/i.test(img.src)) { // Data URI 357 | var arrayBuffer = base64ToArrayBuffer(img.src); 358 | handleBinaryFile(arrayBuffer); 359 | 360 | } else if (/^blob\:/i.test(img.src)) { // Object URL 361 | var fileReader = new FileReader(); 362 | fileReader.onload = function(e) { 363 | handleBinaryFile(e.target.result); 364 | }; 365 | objectURLToBlob(img.src, function (blob) { 366 | fileReader.readAsArrayBuffer(blob); 367 | }); 368 | } else { 369 | var http = new XMLHttpRequest(); 370 | http.onload = function() { 371 | if (this.status == 200 || this.status === 0) { 372 | handleBinaryFile(http.response); 373 | } else { 374 | throw "Could not load image"; 375 | } 376 | http = null; 377 | }; 378 | http.open("GET", img.src, true); 379 | http.responseType = "arraybuffer"; 380 | http.send(null); 381 | } 382 | } else if (window.FileReader && (img instanceof window.Blob || img instanceof window.File)) { 383 | var fileReader = new FileReader(); 384 | fileReader.onload = function(e) { 385 | if (debug) console.log("Got file of length " + e.target.result.byteLength); 386 | handleBinaryFile(e.target.result); 387 | }; 388 | 389 | fileReader.readAsArrayBuffer(img); 390 | } 391 | } 392 | 393 | function findEXIFinJPEG(file) { 394 | var dataView = new DataView(file); 395 | 396 | if (debug) console.log("Got file of length " + file.byteLength); 397 | if ((dataView.getUint8(0) != 0xFF) || (dataView.getUint8(1) != 0xD8)) { 398 | if (debug) console.log("Not a valid JPEG"); 399 | return false; // not a valid jpeg 400 | } 401 | 402 | var offset = 2, 403 | length = file.byteLength, 404 | marker; 405 | 406 | while (offset < length) { 407 | if (dataView.getUint8(offset) != 0xFF) { 408 | if (debug) console.log("Not a valid marker at offset " + offset + ", found: " + dataView.getUint8(offset)); 409 | return false; // not a valid marker, something is wrong 410 | } 411 | 412 | marker = dataView.getUint8(offset + 1); 413 | if (debug) console.log(marker); 414 | 415 | // we could implement handling for other markers here, 416 | // but we're only looking for 0xFFE1 for EXIF data 417 | 418 | if (marker == 225) { 419 | if (debug) console.log("Found 0xFFE1 marker"); 420 | 421 | return readEXIFData(dataView, offset + 4, dataView.getUint16(offset + 2) - 2); 422 | 423 | // offset += 2 + file.getShortAt(offset+2, true); 424 | 425 | } else { 426 | offset += 2 + dataView.getUint16(offset+2); 427 | } 428 | 429 | } 430 | 431 | } 432 | 433 | function findIPTCinJPEG(file) { 434 | var dataView = new DataView(file); 435 | 436 | if (debug) console.log("Got file of length " + file.byteLength); 437 | if ((dataView.getUint8(0) != 0xFF) || (dataView.getUint8(1) != 0xD8)) { 438 | if (debug) console.log("Not a valid JPEG"); 439 | return false; // not a valid jpeg 440 | } 441 | 442 | var offset = 2, 443 | length = file.byteLength; 444 | 445 | 446 | var isFieldSegmentStart = function(dataView, offset){ 447 | return ( 448 | dataView.getUint8(offset) === 0x38 && 449 | dataView.getUint8(offset+1) === 0x42 && 450 | dataView.getUint8(offset+2) === 0x49 && 451 | dataView.getUint8(offset+3) === 0x4D && 452 | dataView.getUint8(offset+4) === 0x04 && 453 | dataView.getUint8(offset+5) === 0x04 454 | ); 455 | }; 456 | 457 | while (offset < length) { 458 | 459 | if ( isFieldSegmentStart(dataView, offset )){ 460 | 461 | // Get the length of the name header (which is padded to an even number of bytes) 462 | var nameHeaderLength = dataView.getUint8(offset+7); 463 | if(nameHeaderLength % 2 !== 0) nameHeaderLength += 1; 464 | // Check for pre photoshop 6 format 465 | if(nameHeaderLength === 0) { 466 | // Always 4 467 | nameHeaderLength = 4; 468 | } 469 | 470 | var startOffset = offset + 8 + nameHeaderLength; 471 | var sectionLength = dataView.getUint16(offset + 6 + nameHeaderLength); 472 | 473 | return readIPTCData(file, startOffset, sectionLength); 474 | 475 | break; 476 | 477 | } 478 | 479 | 480 | // Not the marker, continue searching 481 | offset++; 482 | 483 | } 484 | 485 | } 486 | var IptcFieldMap = { 487 | 0x78 : 'caption', 488 | 0x6E : 'credit', 489 | 0x19 : 'keywords', 490 | 0x37 : 'dateCreated', 491 | 0x50 : 'byline', 492 | 0x55 : 'bylineTitle', 493 | 0x7A : 'captionWriter', 494 | 0x69 : 'headline', 495 | 0x74 : 'copyright', 496 | 0x0F : 'category' 497 | }; 498 | function readIPTCData(file, startOffset, sectionLength){ 499 | var dataView = new DataView(file); 500 | var data = {}; 501 | var fieldValue, fieldName, dataSize, segmentType, segmentSize; 502 | var segmentStartPos = startOffset; 503 | while(segmentStartPos < startOffset+sectionLength) { 504 | if(dataView.getUint8(segmentStartPos) === 0x1C && dataView.getUint8(segmentStartPos+1) === 0x02){ 505 | segmentType = dataView.getUint8(segmentStartPos+2); 506 | if(segmentType in IptcFieldMap) { 507 | dataSize = dataView.getInt16(segmentStartPos+3); 508 | segmentSize = dataSize + 5; 509 | fieldName = IptcFieldMap[segmentType]; 510 | fieldValue = getStringFromDB(dataView, segmentStartPos+5, dataSize); 511 | // Check if we already stored a value with this name 512 | if(data.hasOwnProperty(fieldName)) { 513 | // Value already stored with this name, create multivalue field 514 | if(data[fieldName] instanceof Array) { 515 | data[fieldName].push(fieldValue); 516 | } 517 | else { 518 | data[fieldName] = [data[fieldName], fieldValue]; 519 | } 520 | } 521 | else { 522 | data[fieldName] = fieldValue; 523 | } 524 | } 525 | 526 | } 527 | segmentStartPos++; 528 | } 529 | return data; 530 | } 531 | 532 | 533 | 534 | function readTags(file, tiffStart, dirStart, strings, bigEnd) { 535 | var entries = file.getUint16(dirStart, !bigEnd), 536 | tags = {}, 537 | entryOffset, tag, 538 | i; 539 | 540 | for (i=0;i 4 ? valueOffset : (entryOffset + 8); 565 | vals = []; 566 | for (n=0;n 4 ? valueOffset : (entryOffset + 8); 574 | return getStringFromDB(file, offset, numValues-1); 575 | 576 | case 3: // short, 16 bit int 577 | if (numValues == 1) { 578 | return file.getUint16(entryOffset + 8, !bigEnd); 579 | } else { 580 | offset = numValues > 2 ? valueOffset : (entryOffset + 8); 581 | vals = []; 582 | for (n=0;n 2 |
3 |
4 |
5 |
6 |
7 |
8 | 9 | 10 |
11 |
12 |
13 | 14 | 15 | 189 | 190 | 212 | -------------------------------------------------------------------------------- /myDemo/src/components/select.vue: -------------------------------------------------------------------------------- 1 | 13 | 34 | 35 | -------------------------------------------------------------------------------- /myDemo/src/components/transition.vue: -------------------------------------------------------------------------------- 1 | 6 | 21 | -------------------------------------------------------------------------------- /myDemo/src/components/upload.vue: -------------------------------------------------------------------------------- 1 | 8 | 175 | -------------------------------------------------------------------------------- /myDemo/src/components/vuex/a.vue: -------------------------------------------------------------------------------- 1 | 6 | 32 | -------------------------------------------------------------------------------- /myDemo/src/components/vuex/b.vue: -------------------------------------------------------------------------------- 1 | 7 | 33 | -------------------------------------------------------------------------------- /myDemo/src/main.js: -------------------------------------------------------------------------------- 1 | // The Vue build version to load with the `import` command 2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias. 3 | import Vue from 'vue' 4 | // import AMap from 'vue-amap' 5 | import App from './App' 6 | import router from './router' 7 | import VueResource from "vue-resource" 8 | import store from './store' 9 | Vue.config.productionTip = false 10 | 11 | /* eslint-disable no-new */ 12 | Vue.use(VueResource) 13 | // Vue.use(AMap) 14 | // AMap.initAMapApiLoader({ 15 | // key: 'your amap key', 16 | // plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'] 17 | // }); 18 | new Vue({ 19 | el: '#app', 20 | router, 21 | store, 22 | template: '', 23 | components: { App } 24 | }) 25 | -------------------------------------------------------------------------------- /myDemo/src/pages/TabView.vue: -------------------------------------------------------------------------------- 1 | 25 | 26 | 53 | -------------------------------------------------------------------------------- /myDemo/src/pages/amap.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | -------------------------------------------------------------------------------- /myDemo/src/pages/bottomView.vue: -------------------------------------------------------------------------------- 1 | 8 | 22 | 23 | 26 | -------------------------------------------------------------------------------- /myDemo/src/pages/data.json: -------------------------------------------------------------------------------- 1 | { 2 | "faanga":"123" 3 | } -------------------------------------------------------------------------------- /myDemo/src/pages/jsonp.vue: -------------------------------------------------------------------------------- 1 | 6 | 49 | -------------------------------------------------------------------------------- /myDemo/src/pages/keepAlive.vue: -------------------------------------------------------------------------------- 1 | 15 | 33 | -------------------------------------------------------------------------------- /myDemo/src/pages/keepAlive1.vue: -------------------------------------------------------------------------------- 1 | 18 | 52 | -------------------------------------------------------------------------------- /myDemo/src/pages/keepAlive2.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /myDemo/src/pages/noticeTipView.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 39 | 44 | -------------------------------------------------------------------------------- /myDemo/src/pages/photo.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 23 | 24 | 27 | -------------------------------------------------------------------------------- /myDemo/src/pages/qrcode/qrcode.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 51 | 52 | -------------------------------------------------------------------------------- /myDemo/src/pages/selectView.vue: -------------------------------------------------------------------------------- 1 | 11 | -------------------------------------------------------------------------------- /myDemo/src/pages/test.vue: -------------------------------------------------------------------------------- 1 | 17 | 32 | -------------------------------------------------------------------------------- /myDemo/src/pages/titleView.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /myDemo/src/pages/toastView.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 42 | 47 | -------------------------------------------------------------------------------- /myDemo/src/pages/transition.vue: -------------------------------------------------------------------------------- 1 | 10 | 28 | -------------------------------------------------------------------------------- /myDemo/src/pages/vuex.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 40 | 41 | -------------------------------------------------------------------------------- /myDemo/src/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Router from 'vue-router' 3 | import hello from '@/components/Hello' 4 | import test from '@/pages/test' 5 | import photo from '@/pages/photo' 6 | import qrcode from '@/pages/qrcode/qrcode' 7 | import vuex from '@/pages/vuex' 8 | import jsonp from '@/pages/jsonp' 9 | import amap from '@/pages/amap' 10 | import bottomView from '@/pages/bottomView' 11 | import transition from '@/pages/transition' 12 | import toastView from '@/pages/toastView' 13 | import noticeTipView from '@/pages/noticeTipView' 14 | import TabView from '@/pages/TabView' 15 | import titleView from '@/pages/titleView' 16 | import selectView from '@/pages/selectView' 17 | import Mint from 'mint-ui' 18 | import keepAlive from '@/pages/keepAlive' 19 | import keepAlive1 from '@/pages/keepAlive1' 20 | import keepAlive2 from '@/pages/keepAlive2' 21 | 22 | Vue.use(Router) 23 | Vue.use(Mint) 24 | export default new Router({ 25 | mode: 'history', 26 | routes: [ 27 | { 28 | path: '/', 29 | name: 'hello', 30 | component: hello 31 | }, 32 | { 33 | path: '/qrcode', 34 | name: 'qrcode', 35 | component: qrcode 36 | }, 37 | { 38 | path: '/photo', 39 | name: 'photo', 40 | component: photo 41 | }, 42 | { 43 | path: '/vuex', 44 | name: 'vuex', 45 | component: vuex 46 | }, 47 | { 48 | path: '/jsonp', 49 | name: 'jsonp', 50 | component: jsonp 51 | }, 52 | { 53 | path: '/test', 54 | name: 'test', 55 | component: test 56 | }, 57 | { 58 | path: '/amap', 59 | name: 'amap', 60 | component: amap 61 | }, 62 | { 63 | path: '/bottomView', 64 | name: 'bottomView', 65 | component: bottomView 66 | }, 67 | { 68 | path: '/transition', 69 | name: 'transition', 70 | component: transition 71 | }, 72 | { 73 | path: '/toastView', 74 | name: 'toastView', 75 | component: toastView 76 | }, 77 | { 78 | path: '/noticeTipView', 79 | name: 'noticeTipView', 80 | component: noticeTipView 81 | }, 82 | { 83 | path: '/TabView', 84 | name: 'TabView', 85 | component: TabView 86 | }, 87 | { 88 | path: '/titleView', 89 | name: 'titleView', 90 | component: titleView 91 | }, 92 | { 93 | path: '/selectView', 94 | name: 'selectView', 95 | component: selectView 96 | }, 97 | { 98 | path: '/keepAlive', 99 | name: 'keepAlive', 100 | component: keepAlive, 101 | 102 | children: [ 103 | { 104 | path:'/keepAlive1', 105 | name:'keepAlive1', 106 | component: keepAlive1, 107 | meta: { 108 | title: 'keepAlive1', 109 | keepAlive: true 110 | } 111 | }, 112 | { 113 | path:'/keepAlive2', 114 | name:'keepAlive2', 115 | component: keepAlive2 116 | } 117 | ] 118 | } 119 | ] 120 | }) 121 | -------------------------------------------------------------------------------- /myDemo/src/store/actions.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fongdaBoy/Vue2.0ComponentDemo/bb845b26f62483ade700a7b229ed17f56fe8e45d/myDemo/src/store/actions.js -------------------------------------------------------------------------------- /myDemo/src/store/getters.js: -------------------------------------------------------------------------------- 1 | export const a = state => state.a -------------------------------------------------------------------------------- /myDemo/src/store/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Vuex from 'vuex' 3 | import * as actions from './actions' 4 | import * as getters from './getters' 5 | import state from './state' 6 | import mutations from './mutations' 7 | // import createLogger from 'vuex/dist/logger' 8 | 9 | Vue.use(Vuex) 10 | 11 | const debug = process.env.NODE_ENV !== 'production' 12 | 13 | export default new Vuex.Store({ 14 | actions, 15 | getters, 16 | state, 17 | mutations, 18 | // strict: debug, 19 | // plugins: debug ? [createLogger()] : [] 20 | }) -------------------------------------------------------------------------------- /myDemo/src/store/mutation-types.js: -------------------------------------------------------------------------------- 1 | export const SET_A = 'SET_A' -------------------------------------------------------------------------------- /myDemo/src/store/mutations.js: -------------------------------------------------------------------------------- 1 | import * as types from './mutation-types' 2 | 3 | const mutations = { 4 | [types.SET_A](state,a){ 5 | state.a = a 6 | } 7 | } 8 | export default mutations -------------------------------------------------------------------------------- /myDemo/src/store/state.js: -------------------------------------------------------------------------------- 1 | const state = { 2 | a:'' 3 | } 4 | export default state -------------------------------------------------------------------------------- /myDemo/src/store11/actions.js: -------------------------------------------------------------------------------- 1 | // import * as types from './mutations-types' 2 | -------------------------------------------------------------------------------- /myDemo/src/store11/getters.js: -------------------------------------------------------------------------------- 1 | export const a = state => state.a -------------------------------------------------------------------------------- /myDemo/src/store11/index.js: -------------------------------------------------------------------------------- 1 | // import Vue from 'vue' 2 | // import Vuex from 'vuex' 3 | // import * as actions from './actions' 4 | // import * as getters from './getters' 5 | // import state from './state' 6 | // import mutations from './mutations' 7 | // import createLogger from 'vuex/dist/logger' 8 | 9 | // Vue.use(Vuex) 10 | // const debug = process.env.NODE_ENV !== 'production' 11 | // export default new Vuex.Store({ 12 | // actions, 13 | // getters, 14 | // state, 15 | // mutations, 16 | // strict: debug, 17 | // plugins: debug ? [createLogger()] : [] 18 | // }) 19 | import Vue from 'vue' 20 | import Vuex from 'vuex' 21 | import state from './state'; 22 | import mutations from './mutations'; 23 | import getters from './getters'; 24 | import actions from './actions'; 25 | 26 | Vue.use(Vuex) 27 | export default new Vuex.Store({ 28 | state, 29 | mutations, 30 | getters, 31 | actions 32 | }) 33 | 34 | -------------------------------------------------------------------------------- /myDemo/src/store11/mutations-types.js: -------------------------------------------------------------------------------- 1 | export const SET_A = 'SET_A' -------------------------------------------------------------------------------- /myDemo/src/store11/mutations.js: -------------------------------------------------------------------------------- 1 | import * as types from './mutations-types' 2 | 3 | const mutations = { 4 | [types.SET_A](state, a) { 5 | state.a = a 6 | } 7 | } 8 | export default mutations -------------------------------------------------------------------------------- /myDemo/src/store11/state.js: -------------------------------------------------------------------------------- 1 | const state = { 2 | a: {} 3 | } 4 | export default state -------------------------------------------------------------------------------- /myDemo/static/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fongdaBoy/Vue2.0ComponentDemo/bb845b26f62483ade700a7b229ed17f56fe8e45d/myDemo/static/.gitkeep -------------------------------------------------------------------------------- /myDemo/static/css/MyIcon/iconfont.css: -------------------------------------------------------------------------------- 1 | 2 | @font-face {font-family: "iconfont"; 3 | src: url('iconfont.eot?t=1499743157376'); /* IE9*/ 4 | src: url('iconfont.eot?t=1499743157376#iefix') format('embedded-opentype'), /* IE6-IE8 */ 5 | url('iconfont.woff?t=1499743157376') format('woff'), /* chrome, firefox */ 6 | url('iconfont.ttf?t=1499743157376') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ 7 | url('iconfont.svg?t=1499743157376#iconfont') format('svg'); /* iOS 4.1- */ 8 | } 9 | 10 | .iconfont { 11 | font-family:"iconfont" !important; 12 | font-size:16px; 13 | font-style:normal; 14 | -webkit-font-smoothing: antialiased; 15 | -moz-osx-font-smoothing: grayscale; 16 | } 17 | 18 | .icon-play:before { content: "\e600"; } 19 | 20 | .icon-shezhi:before { content: "\e64b"; } 21 | 22 | .icon-shijian:before { content: "\e64d"; } 23 | 24 | .icon-shouhuodizhi:before { content: "\e64e"; } 25 | 26 | .icon-shouye:before { content: "\e64f"; } 27 | 28 | .icon-wodedingdan:before { content: "\e655"; } 29 | 30 | -------------------------------------------------------------------------------- /myDemo/static/css/MyIcon/iconfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fongdaBoy/Vue2.0ComponentDemo/bb845b26f62483ade700a7b229ed17f56fe8e45d/myDemo/static/css/MyIcon/iconfont.eot -------------------------------------------------------------------------------- /myDemo/static/css/MyIcon/iconfont.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Created by FontForge 20120731 at Tue Jul 11 11:19:17 2017 6 | By admin 7 | 8 | 9 | 10 | 24 | 26 | 28 | 30 | 32 | 34 | 38 | 41 | 46 | 49 | 54 | 57 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /myDemo/static/css/MyIcon/iconfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fongdaBoy/Vue2.0ComponentDemo/bb845b26f62483ade700a7b229ed17f56fe8e45d/myDemo/static/css/MyIcon/iconfont.ttf -------------------------------------------------------------------------------- /myDemo/static/css/MyIcon/iconfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fongdaBoy/Vue2.0ComponentDemo/bb845b26f62483ade700a7b229ed17f56fe8e45d/myDemo/static/css/MyIcon/iconfont.woff -------------------------------------------------------------------------------- /myDemo/static/css/common.css: -------------------------------------------------------------------------------- 1 | *{ 2 | padding:0; 3 | margin:0; 4 | list-style: none; 5 | -webkit-overflow-scrolling: touch; 6 | -webkit-user-select: none; 7 | } 8 | body{ 9 | background-color: #f0f5f9; 10 | } 11 | .hello div{ 12 | width: 100%; 13 | background: #fff; 14 | } 15 | /*border*/ 16 | .bor-bot{ 17 | background-image:url(../images/xianbot.png); 18 | background-position: bottom; 19 | background-size: 1px; 20 | background-repeat: repeat-x; 21 | padding-bottom: 1px; 22 | } 23 | .bor-top{ 24 | background-image:url(../images/xiantop.png); 25 | background-position: top; 26 | background-size: 1px; 27 | background-repeat: repeat-x; 28 | padding-bottom: 1px; 29 | } 30 | .bor-left{ 31 | background-image:url(../images/left.png); 32 | background-position: left; 33 | background-size: 1px; 34 | background-repeat: repeat-y; 35 | padding-left: 1px; 36 | } 37 | .bor-right{ 38 | background-image:url(../images/right.png); 39 | background-position: right; 40 | background-size: 1px; 41 | background-repeat: repeat-y; 42 | padding-right: 1px; 43 | } 44 | .btn, .mask { 45 | width: 100%; 46 | /*cursor: pointer;*/ 47 | } 48 | /*按钮样式*/ 49 | .btn { 50 | font-size: 0.75rem; 51 | height: 2.25rem; 52 | border-radius: 0.2rem; 53 | text-align: center; 54 | display: block; 55 | user-select: none; 56 | outline-style: none; 57 | padding: 0; 58 | } 59 | .btn.primary { 60 | background-color: #0ae; 61 | color: #fff; 62 | border: 1px solid #0ae; 63 | width: 92%; 64 | margin: 0 4%; 65 | } 66 | .btn.secondary { 67 | background-color: #fff; 68 | color: #666; 69 | border: 1px solid #ddd; 70 | position: relative; 71 | border: none; 72 | width: 92%; 73 | margin: 0 4%; 74 | } 75 | .btn.secondary:before { 76 | content: ''; 77 | position: absolute; 78 | border-radius: 0.2rem; 79 | top: 0; 80 | left: 0; 81 | border: 1px solid #ddd; 82 | width: 200%; 83 | height: 200%; 84 | -webkit-transform: scale(.5); 85 | transform: scale(.5); 86 | -webkit-transform-origin: left top; 87 | transform-origin: left top; 88 | } 89 | .btn.disabled, .btn.disabled.active, .btn.disabled:active { 90 | background-color: #e8e8f0; 91 | border: 1px solid #e8e8f0; 92 | } 93 | .btn.disabled { 94 | color: #d2d2d2; 95 | cursor: not-allowed; 96 | } 97 | .btn.outline { 98 | font-size: 0.5rem; 99 | background-color: #fff; 100 | color: #0ae; 101 | border: 1px solid #0ae; 102 | height: 1.5rem; 103 | line-height: 2.14286em; 104 | border-radius: 0.3rem; 105 | width: auto; 106 | display: inline-block; 107 | padding-left: 0.5rem; 108 | padding-right: 0.5rem; 109 | } 110 | .btn.warning { 111 | background-color: #fff; 112 | color: #f4333c; 113 | border: 1px solid #ddd; 114 | border-radius: 0; 115 | } 116 | .btn.bottom { 117 | background-color: #fff; 118 | color: #0ae; 119 | border: 1px solid #ddd; 120 | border-radius: 0; 121 | } 122 | .btn.bottom.active:before, .btn.bottom:active:before, .btn.bottom:before, .btn.warning.active:before, .btn.warning.disabled.active:before, .btn.warning.disabled:active:before, .btn.warning.disabled:before, .btn.warning:active:before, .btn.warning:before { 123 | content: ''; 124 | position: absolute; 125 | background-color: #e5e5e5; 126 | top: 0; 127 | left: 0; 128 | right: 0; 129 | height: 1px; 130 | -webkit-transform: scaleY(.5); 131 | transform: scaleY(.5); 132 | -webkit-transform-origin: top center; 133 | transform-origin: top center; 134 | } 135 | .btn.bottom.active:after, .btn.bottom:active:after, .btn.bottom:after, .btn.warning.active:after, .btn.warning.disabled.active:after, .btn.warning.disabled:active:after, .btn.warning.disabled:after, .btn.warning:active:after, .btn.warning:after { 136 | content: ''; 137 | position: absolute; 138 | background-color: #e5e5e5; 139 | bottom: 0; 140 | left: 0; 141 | right: 0; 142 | height: 1px; 143 | -webkit-transform: scaleY(.5); 144 | transform: scaleY(.5); 145 | -webkit-transform-origin: bottom center; 146 | transform-origin: bottom center; 147 | } 148 | .btn.warning.disabled { 149 | color: #d2d2d2; 150 | } 151 | /*loading*/ 152 | .toast { 153 | font-size: 13px; 154 | } 155 | .toast { 156 | position: fixed; 157 | opacity: 0.9; 158 | width: 8.07692em; 159 | height: 8.07692em; 160 | top: 17.3077em; 161 | left: 50%; 162 | -webkit-transform: translate(-50%); 163 | transform: translate(-50%); 164 | border-radius: .769231em; 165 | background-color: #1f2337; 166 | z-index: 999999; 167 | } 168 | .toast>.loading { 169 | -webkit-animation-name: a; 170 | animation-name: a; 171 | -webkit-animation-duration: 1s; 172 | animation-duration: 1s; 173 | -webkit-animation-iteration-count: infinite; 174 | animation-iteration-count: infinite; 175 | -webkit-animation-timing-function: step-end; 176 | animation-timing-function: step-end; 177 | background-image:url("../images/loading.gif"); 178 | background-position: 50%; 179 | background-size: 75%; 180 | background-repeat: no-repeat; 181 | } 182 | .toast>.icon{ 183 | font-size: 3.15385em; 184 | color: #fff; 185 | width: 1em; 186 | height: 1em; 187 | line-height: 1em; 188 | position: absolute; 189 | top: .42683em; 190 | left: 0; 191 | right: 0; 192 | margin: auto; 193 | -webkit-border-radius: 50%; 194 | -moz-border-radius: 50%; 195 | border-radius: 50%; 196 | border: none; 197 | } 198 | .toast>.icon>img { 199 | width: 1em; 200 | height: 1em; 201 | font-style: normal; 202 | -webkit-font-smoothing: antialiased; 203 | -webkit-text-stroke-width: .2px; 204 | -moz-osx-font-smoothing: grayscale; 205 | -webkit-border-radius: 50%; 206 | -moz-border-radius: 50%; 207 | border-radius: 50%; 208 | border: none; 209 | } 210 | .toast>.message { 211 | color: #fff; 212 | position: absolute; 213 | text-align: center; 214 | top: 5.38462em; 215 | left: .769231em; 216 | right: .769231em; 217 | margin: auto; 218 | font-size: 1em; 219 | } 220 | /*弹窗*/ 221 | .alert { 222 | border-radius: .625em; 223 | overflow: hidden; 224 | background: #fff; 225 | width: 19.5625em; 226 | height: auto; 227 | position: fixed; 228 | top: 12.3125em; 229 | left: 50%; 230 | -webkit-transform: translate(-50%); 231 | transform: translate(-50%); 232 | z-index: 999999; 233 | border: 1px solid #e5e5e5; 234 | } 235 | .alert>p{ 236 | display: block; 237 | -webkit-margin-before: 1em; 238 | -webkit-margin-after: 1em; 239 | -webkit-margin-start: 0px; 240 | -webkit-margin-end: 0px; 241 | } 242 | .alert>.message { 243 | font-size: 1em; 244 | color: #333; 245 | text-align: center; 246 | margin: 1.0625em .984375em 1.625em; 247 | line-height: 1; 248 | } 249 | .alert>.btn-group { 250 | height: auto; 251 | width: 100%; 252 | font-size: 1.0625em; 253 | box-sizing: border-box; 254 | } 255 | .alert>.btn-group.col-2>.btn:first-child { 256 | color: #a5a5a5; 257 | } 258 | .alert>.btn-group.col-2>.btn { 259 | width: 50%; 260 | } 261 | .alert>.btn-group>.btn { 262 | position: relative; 263 | border: none; 264 | float: left; 265 | font-size: 1em; 266 | margin: 0; 267 | } 268 | .alert>.btn-group.col-2>.btn:last-child { 269 | color: #0ae; 270 | } 271 | 272 | @media only screen and (max-width: 413px) and (min-width: 375px){ 273 | .alert { 274 | font-size: 16px; 275 | } 276 | } 277 | 278 | /*遮盖层*/ 279 | .mask{ 280 | background-color: #000; 281 | opacity: .2; 282 | position: fixed; 283 | height: 100%; 284 | left: 0; 285 | right: 0; 286 | top: 0; 287 | /* bottom: 0; */ 288 | z-index: 999998; 289 | moz-user-select: -moz-none; 290 | -moz-user-select: none; 291 | -o-user-select:none; 292 | -khtml-user-select:none; 293 | -webkit-user-select:none; 294 | -ms-user-select:none; 295 | user-select:none; 296 | } 297 | 298 | 299 | 300 | 301 | /*title*/ 302 | .navbar { 303 | position: relative; 304 | height: 3.14286em; 305 | line-height: 3.14286em; 306 | width: 100%; 307 | top: 0; 308 | background-color: #fff; 309 | text-align: center; 310 | margin-bottom: -1px; 311 | z-index: 99999; 312 | } 313 | /*.navbar:after {*/ 314 | /*content: '';*/ 315 | /*position: absolute;*/ 316 | /*background-color: #f5f5f9;*/ 317 | /*bottom: 0;*/ 318 | /*left: 0;*/ 319 | /*right: 0;*/ 320 | /*height: 1px;*/ 321 | /*-webkit-transform: scaleY(.5);*/ 322 | /*transform: scaleY(.5);*/ 323 | /*-webkit-transform-origin: bottom center;*/ 324 | /*transform-origin: bottom center;*/ 325 | /*}*/ 326 | .navbar>.left { 327 | left: 0; 328 | } 329 | .navbar>.left, .navbar>.right { 330 | font-size: 1em; 331 | color: #333; 332 | position: absolute; 333 | top: 0; 334 | bottom: 0; 335 | margin: auto; 336 | padding-left: 1.07143em; 337 | padding-right: 1.07143em; 338 | } 339 | .navbar>.right { 340 | right: 0; 341 | } 342 | 343 | @media only screen and (max-width: 413px) and (min-width: 375px){ 344 | .agree-it, .agreement, .checkbox, .navbar-wrapper, .search-wrapper { 345 | font-size: 14px; 346 | } 347 | } 348 | /*actionSheet*/ 349 | @media only screen and (max-width: 413px) and (min-width: 375px){ 350 | .actionsheet-wrapper>.actionsheet { 351 | font-size: 14px; 352 | } 353 | } 354 | .actionsheet-wrapper>.actionsheet { 355 | position: fixed; 356 | left: 0; 357 | right: 0; 358 | bottom: 0; 359 | width: 100%; 360 | background-color: #f1f1f4; 361 | z-index: 999999; 362 | } 363 | .actionsheet-wrapper>.actionsheet>.tips { 364 | background-color: #fff; 365 | text-align: center; 366 | font-size: 1em; 367 | color: #a5a5a5; 368 | width: 84%; 369 | height: 3.92857em; 370 | line-height: 1.4; 371 | display: block; 372 | margin: 0; 373 | padding-top: 1.42857em; 374 | padding-left: 8%; 375 | padding-right: 8%; 376 | } 377 | .actionsheet-wrapper>.actionsheet>.btn.bottom { 378 | color: #333; 379 | } 380 | .actionsheet-wrapper>.actionsheet>.btn:last-child, .actionsheet-wrapper>.actionsheet>.btn:nth-child(2) { 381 | position: relative; 382 | } 383 | .actionsheet-wrapper>.actionsheet>.btn { 384 | position: relative; 385 | height: 2.94444em; 386 | } 387 | /*ModelView*/ 388 | @media only screen and (max-width: 413px) and (min-width: 375px){ 389 | .modal { 390 | font-size: 14px; 391 | } 392 | } 393 | 394 | .modal { 395 | background-color: #fff; 396 | position: fixed; 397 | left: 2.14286em; 398 | right: 2.14286em; 399 | top: 22.2%; 400 | margin: auto; 401 | border-radius: .285714em; 402 | text-align: center; 403 | z-index: 999999; 404 | } 405 | .modal .message { 406 | padding: 0 10px; 407 | } 408 | .modal .close{ 409 | position: absolute; 410 | margin-left: 92%; 411 | width: 0.5rem; 412 | height: 1.5rem; 413 | } 414 | .modal .title{ 415 | text-align: center; 416 | width: 100%; 417 | float: left; 418 | height: 1.5rem; 419 | font-size: 0.85rem; 420 | } 421 | .btn.primary { 422 | margin-bottom: 10px; 423 | } 424 | /*card 样式*/ 425 | .card { 426 | position: relative; 427 | background-color: #fff; 428 | padding-left: 0.9375em; 429 | padding-top: 0.9375em; 430 | padding-bottom: 0.9375em; 431 | font-size: 16px; 432 | text-align: center; 433 | } 434 | .card:after, .card:before { 435 | content: " "; 436 | position: absolute; 437 | background-color: #e5e5e5; 438 | left: 0; 439 | right: 0; 440 | height: 1px; 441 | } 442 | .card:before { 443 | top: 0; 444 | -webkit-transform: scaleY(.5); 445 | transform: scaleY(.5); 446 | -webkit-transform-origin: top center; 447 | transform-origin: top center; 448 | } 449 | .card>.header { 450 | position: relative; 451 | font-size: 0.75em; 452 | padding-bottom: 0.83333em; 453 | color: #666; 454 | } 455 | .card>.header:after { 456 | content: " "; 457 | position: absolute; 458 | background-color: #e5e5e5; 459 | left: 0; 460 | right: 0; 461 | bottom: 0; 462 | height: 1px; 463 | -webkit-transform: scaleY(.5); 464 | transform: scaleY(.5); 465 | -webkit-transform-origin: bottom center; 466 | transform-origin: bottom center; 467 | } 468 | .card>.body { 469 | font-size: 1em; 470 | margin-top: 0.9375em; 471 | margin-right: 0.9375em; 472 | } 473 | .card:after, .card:before { 474 | content: " "; 475 | position: absolute; 476 | background-color: #e5e5e5; 477 | left: 0; 478 | right: 0; 479 | height: 1px; 480 | } 481 | .card.thumbnail { 482 | background-color: #f5f5f9; 483 | padding-bottom: 1.25em; 484 | border-width: 0; 485 | } 486 | .card>.body>.title { 487 | font-size: 1em; 488 | color: #333; 489 | } 490 | .card>.body>.content { 491 | font-size: 0.875em; 492 | margin-top: 0.71429em; 493 | color: #666; 494 | line-height: 1.5; 495 | } 496 | .card>.body>.tips { 497 | color: #a5a5a5; 498 | font-size: 0.75em; 499 | margin-top: 1.25em; 500 | } 501 | .card>.body>.link, .card>.body>.link>a { 502 | font-size: 0.875em; 503 | margin-top: 1.07143em; 504 | color: #0ae; 505 | text-decoration: none; 506 | } 507 | .card>.body>img { 508 | font-size: 1em; 509 | width: 100%; 510 | height: auto; 511 | margin-top: 1.25em; 512 | } 513 | /*switch*/ 514 | .switch { 515 | position: relative; 516 | display: inline-block; 517 | width: 3em; 518 | height: 1.75em; 519 | vertical-align: middle; 520 | font-size:20px; 521 | text-align: center; 522 | } 523 | .switch>input[type=checkbox] { 524 | font-size: 1em; 525 | position: absolute; 526 | display: block; 527 | top: 0; 528 | left: 0; 529 | opacity: 0; 530 | z-index: 2; 531 | width: 33.33%; 532 | height: 66.66%; 533 | -webkit-transform: scale(3,1.5); 534 | transform: scale(3,1.5); 535 | -webkit-transform-origin: 0 0; 536 | transform-origin: 0 0; 537 | } 538 | .switch>input[type=checkbox]:checked+.slider { 539 | background-color: #0ae; 540 | } 541 | .switch>.slider, .switch>.slider:before { 542 | position: absolute; 543 | -webkit-transition: .4s; 544 | transition: .4s; 545 | } 546 | .switch>input[type=checkbox]:checked+.slider:before { 547 | -webkit-transform: translateX(1.3em); 548 | transform: translateX(1.3em); 549 | } 550 | .switch>.slider { 551 | font-size: 1em; 552 | cursor: pointer; 553 | top: 0; 554 | left: 0; 555 | right: 0; 556 | bottom: 0; 557 | background-color: #ddd; 558 | border-radius: 1.75em; 559 | z-index: 1; 560 | } 561 | .switch>.slider:before { 562 | position: absolute; 563 | content: ""; 564 | height: 1.65em; 565 | width: 1.6em; 566 | left: 1px; 567 | right: 1px; 568 | top: 1px; 569 | bottom: 1px; 570 | background-color: #fff; 571 | -webkit-transition: .4s; 572 | transition: .4s; 573 | border-radius: 50%; 574 | } 575 | /*keyboard*/ 576 | .mask.transparent { 577 | background-color: hsla(0,0%,100%,0); 578 | } 579 | .input-box { 580 | background-color: #fff; 581 | height: 2.93333em; 582 | line-height: 2.93333em; 583 | width: 100%; 584 | text-align: left; 585 | color: #333; 586 | display: -webkit-box; 587 | display: -ms-flexbox; 588 | display: flex; 589 | -webkit-box-align: center; 590 | -ms-flex-align: center; 591 | align-items: center; 592 | position: relative; 593 | font-size: 15px; 594 | } 595 | .addon.left { 596 | position: relative; 597 | margin: 0; 598 | vertical-align: middle; 599 | } 600 | .addon { 601 | top: 0; 602 | bottom: 0; 603 | right: .5em; 604 | } 605 | @media only screen and (max-width: 413px) and (min-width: 375px){ 606 | .plate { 607 | font-size: 15px; 608 | } 609 | } 610 | .plate { 611 | color: #333; 612 | position: relative; 613 | -webkit-user-select: none; 614 | -moz-user-select: none; 615 | -ms-user-select: none; 616 | user-select: none; 617 | } 618 | .plate:after { 619 | content: " "; 620 | display: inline-block; 621 | margin-left: 0.8em; 622 | margin-top: 50%; 623 | -webkit-transform: rotate(-45deg) translateY(-50%); 624 | transform: rotate(-45deg) translateY(-50%); 625 | border-color: transparent transparent #0ae #0ae; 626 | border-style: solid; 627 | border-width: 0.33333em; 628 | } 629 | .keyboard { 630 | position: fixed; 631 | bottom: 0; 632 | left: 0; 633 | right: 0; 634 | width: 100%; 635 | height: auto; 636 | background-color: rgba(195,199,207,.75); 637 | text-align: left; 638 | -webkit-user-select: none; 639 | -moz-user-select: none; 640 | -ms-user-select: none; 641 | user-select: none; 642 | z-index: 999999; 643 | font-size: 22.5px; 644 | } 645 | /*.keyboard>.keys:first-of-type { 646 | margin-top: 0.44444em; 647 | }*/ 648 | .keyboard>.keys { 649 | /* margin-top: 0.53333em;*/ 650 | position: relative; 651 | display: inline-block; 652 | width: 33%; 653 | } 654 | .keyboard>.keys>.key.upper { 655 | width: 11.2%; 656 | margin-right: 0.62222em; 657 | } 658 | .keyboard>.keys>.key.disabled, 659 | .keyboard>.keys>.key:disabled { 660 | background-color: rgba(0,0,0,.5); 661 | color: #fff; 662 | } 663 | .keyboard>.keys>.key { 664 | font-size: 1em; 665 | display: inline-block; 666 | background-color: #fff; 667 | /* box-shadow: 0 2px 0 0 rgba(0,0,0,.35);*/ 668 | width: 100%; 669 | /* height: 1.86667em;*/ 670 | height: 2.3em; 671 | /* border-radius: 0.13333em;*/ 672 | line-height: 2.3em; 673 | color: #000; 674 | text-align: center; 675 | /*margin-right: 0.26667em;*/ 676 | -webkit-user-select: none; 677 | -moz-user-select: none; 678 | -ms-user-select: none; 679 | user-select: none; 680 | outline-style: none; 681 | cursor: pointer; 682 | border-style: none; 683 | } 684 | .key:active{ 685 | background-color: #0ae; 686 | } 687 | .icon-delete{ 688 | text-align: center; 689 | } 690 | .icon-delete:before { 691 | content: "删除"; 692 | } 693 | /*.key:before { 694 | content: ''; 695 | position: absolute; 696 | top: 0; 697 | left: 0; 698 | border-radius: 0; 699 | border: 1px solid #e5e5e5; 700 | width: 200%; 701 | height: 200%; 702 | -webkit-transform: scale(.5); 703 | transform: scale(.5); 704 | -webkit-transform-origin: left top; 705 | transform-origin: left top; 706 | }*/ 707 | /*popup*/ 708 | .popup{ 709 | width: 100%; 710 | height: 100%; 711 | position: fixed; 712 | top: 0; 713 | z-index:999999; 714 | background-color: #f0f5f9; 715 | } 716 | @media only screen and (max-width: 413px) and (min-width: 375px){ 717 | .popup{ 718 | font-size: 14px; 719 | } 720 | } 721 | .popup .title{ 722 | background: #fff; 723 | height: 3.14286em; 724 | line-height: 3.14286em; 725 | border: none; 726 | } 727 | .popup .left{ 728 | font-size: 1em; 729 | color: #333; 730 | position: absolute; 731 | top: 0; 732 | bottom: 0; 733 | padding-left: 1.07143em; 734 | padding-right: 1.07143em; 735 | } 736 | /*tabs*/ 737 | @media only screen and (max-width: 413px) and (min-width: 375px){ 738 | .tabs { 739 | font-size: 16px; 740 | } 741 | } 742 | .tabs { 743 | height: 2.75em; 744 | line-height: 2.75em; 745 | display: -webkit-box; 746 | display: -ms-flexbox; 747 | display: flex; 748 | -webkit-box-align: center; 749 | -ms-flex-align: center; 750 | align-items: center; 751 | background-color: #fff; 752 | } 753 | .tabs.normal>.tab.active { 754 | position: relative; 755 | color: #0ae; 756 | } 757 | .tabs.col-3>.tab { 758 | width: 33.33333%; 759 | } 760 | .tabs.normal>.tab { 761 | position: relative; 762 | background-color: #fff; 763 | height: 2.75em; 764 | color: #333; 765 | line-height: 2.75em; 766 | } 767 | .tabs>.tab { 768 | text-align: center; 769 | -webkit-user-select: none; 770 | -moz-user-select: none; 771 | -ms-user-select: none; 772 | user-select: none; 773 | font-size: 1em; 774 | cursor: pointer; 775 | } 776 | .tabs.normal>.tab:after { 777 | content: ''; 778 | position: absolute; 779 | background-color: #e5e5e5; 780 | bottom: 0; 781 | left: 0; 782 | right: 0; 783 | height: 1px; 784 | -webkit-transform: scaleY(.5); 785 | transform: scaleY(.5); 786 | -webkit-transform-origin: bottom center; 787 | transform-origin: bottom center; 788 | } 789 | .tabs.normal>.tab.active:after { 790 | content: ''; 791 | position: absolute; 792 | background-color: #0ae; 793 | bottom: 0; 794 | left: 0; 795 | right: 0; 796 | height: .375em; 797 | -webkit-transform: scaleY(.5); 798 | transform: scaleY(.5); 799 | -webkit-transform-origin: bottom center; 800 | transform-origin: bottom center; 801 | } 802 | /*底部样式1px*/ 803 | .bot:after { 804 | content: ''; 805 | position: absolute; 806 | background-color: #f5f5f9; 807 | bottom: 0; 808 | left: 0; 809 | right: 0; 810 | height: 1px; 811 | -webkit-transform: scaleY(.5); 812 | transform: scaleY(.5); 813 | -webkit-transform-origin: bottom center; 814 | transform-origin: bottom center; 815 | } 816 | 817 | 818 | /*时间控件*/ 819 | 820 | .mint-datetime { 821 | width: 100%; 822 | } 823 | .paco-datetime-picker .picker-toolbar { 824 | width: 100%; 825 | height: 2.5rem; 826 | background-color: #38adff; 827 | border-bottom: solid 1px #26a2ff; 828 | z-index:9999; 829 | } 830 | .paco-datetime-picker .picker-item { 831 | padding: 0 2.2rem; 832 | white-space: nowrap; 833 | position: relative; 834 | overflow: hidden; 835 | text-overflow: ellipsis; 836 | color: #707274; 837 | left: 0; 838 | top: 0; 839 | width: 100%; 840 | box-sizing: border-box; 841 | -webkit-transition-duration: .3s; 842 | transition-duration: .3s; 843 | -webkit-backface-visibility: hidden; 844 | backface-visibility: hidden; 845 | text-align: left; 846 | } 847 | .paco-datetime-picker .picker-items { 848 | width: 100%; 849 | display: -webkit-box; 850 | /* display: flex; */ 851 | -webkit-box-pack: center; 852 | -ms-flex-pack: center; 853 | justify-content: center; 854 | padding: 0; 855 | text-align: right; 856 | font-size: 0.8rem; 857 | position: relative; 858 | } 859 | .paco-datetime-prompt { 860 | display: inline-block; 861 | text-align: left; 862 | color: #ffffff; 863 | margin-left: 0.675rem; 864 | margin-top: 0.425rem; 865 | margin-bottom: 0.875rem; 866 | } 867 | .paco-datetime-action { 868 | display: inline-block; 869 | width: 1.3rem; 870 | text-align: center; 871 | line-height: 1.3rem; 872 | color: #ffffff; 873 | margin-left: 1.1rem; 874 | margin-right: 0.75rem; 875 | margin-top: 0.6rem; 876 | margin-bottom: 0.6rem; 877 | } 878 | .paco-datetime-left { 879 | float: left; 880 | } 881 | .paco-datetime-right { 882 | float: right; 883 | } 884 | 885 | /*inputBtn*/ 886 | .inputBtn{ 887 | border: none; 888 | background:#38a6a6; 889 | border-radius:20px; 890 | /*width:3rem;*/ 891 | padding: 0 0.75rem; 892 | height:1rem; 893 | 894 | font-size:0.5rem; 895 | color:#ffffff; 896 | letter-spacing:0; 897 | text-align:center; 898 | line-height: 1rem; 899 | } 900 | 901 | /* 底部样式 bottom*/ 902 | .fd-bottom .bottom{ 903 | position: absolute; 904 | bottom: 0; 905 | height: 49px; 906 | width: 100%; 907 | background: white; 908 | z-index: 999; 909 | } 910 | .fd-bottom .bottom ul{ 911 | display: flex; 912 | height: 49px; 913 | } 914 | .fd-bottom .bottom .ul-one li{ 915 | flex: 1; 916 | text-align: center; 917 | color: #A2A9B0; 918 | display: flex; 919 | flex-direction: column; 920 | } 921 | .fd-bottom .bottom .ul-one li.active{ 922 | color:#2CA9FF; 923 | } 924 | .fd-bottom .bottom .ul-one .iconSpan{ 925 | font-size: 24px; 926 | } 927 | .fd-bottom .bottom .ul-one .textSpan{ 928 | font-size: 10px; 929 | line-height: 10px; 930 | } 931 | .fd-bottom .bottom .ul-two li{ 932 | flex: 1; 933 | text-align: center; 934 | line-height: 49px; 935 | color: #656B6F; 936 | } 937 | .fd-bottom .bottom .ul-two li.active{ 938 | color:#2CA9FF; 939 | } 940 | .fd-bottom .bottom .ul-two .iconSpan{ 941 | font-size: 24px; 942 | } 943 | .fd-bottom .bottom .ul-two .textSpan{ 944 | font-size: 15px; 945 | line-height: 49px; 946 | } 947 | .fd-bottom .bottom .ul-three li { 948 | flex: 1; 949 | text-align: center; 950 | line-height: 49px; 951 | color: #656B6F; 952 | } 953 | .fd-bottom .bottom .ul-three li.active{ 954 | color:white; 955 | background: #2CA9FF; 956 | } 957 | // 提示组件 noticeTip 958 | .fd-noticeTip{ 959 | display: flex; 960 | justify-content:center; 961 | } 962 | .fd-noticeTip .center-p{ 963 | position: absolute; 964 | top: 0; 965 | bottom: 0; 966 | margin: auto; 967 | font-size: 0.7rem; 968 | height: 1.5rem; 969 | border-radius:0.75rem; 970 | color: white; 971 | background: #FFBB2B; 972 | line-height: 1.5rem; 973 | padding: 0 1rem; 974 | z-index: 999; 975 | } 976 | .fd-noticeTip .top-noticeTip{ 977 | display: flex; 978 | font-size: .7rem; 979 | position: absolute; 980 | top: 2.2rem; 981 | line-height: 2.2rem44px; 982 | background: #f7e4d3; 983 | color: #A2A9B0; 984 | width: 100%; 985 | z-index: 999; 986 | } 987 | .fd-noticeTip .top-noticeTip p{ 988 | width: 100%; 989 | text-align: left; 990 | padding-left: 0.75rem; 991 | } 992 | .fd-noticeTip .top-noticeTip span{ 993 | padding-right: .75rem; 994 | width: 1.1rem; 995 | } 996 | .fd-noticeTip .bottom-p{ 997 | font-size: .7rem; 998 | position: absolute; 999 | bottom: 0; 1000 | width: 100%; 1001 | background: #f7e4d3; 1002 | color: #A2A9B0; 1003 | z-index: 999; 1004 | } -------------------------------------------------------------------------------- /myDemo/static/css/global.css: -------------------------------------------------------------------------------- 1 | body,p,dl,dd,h1,h2,h3,h4,h5,h6{margin:0;} 2 | a{text-decoration:none;} 3 | img{border:none; vertical-align:top;} 4 | ol,ul{margin:0;padding:0;list-style:none;} 5 | /*根据媒体窗口大小自更改字体大小*/ 6 | @media only screen and (max-width: 960px), only screen and (max-device-width:960px) { 7 | html,body { 8 | font-size:33px; 9 | } 10 | } 11 | @media only screen and (max-width: 800px), only screen and (max-device-width:800px) { 12 | html,body { 13 | font-size:27.5px; 14 | } 15 | } 16 | @media only screen and (max-width: 720px), only screen and (max-device-width:720px) { 17 | html,body { 18 | font-size:24.75px; 19 | } 20 | } 21 | @media only screen and (max-width: 640px), only screen and (max-device-width:640px) { 22 | html,body { 23 | font-size:22px; 24 | } 25 | } 26 | @media only screen and (max-width: 600px), only screen and (max-device-width:600px) { 27 | html,body { 28 | font-size:20.625px; 29 | } 30 | } 31 | @media only screen and (max-width: 540px), only screen and (max-device-width:540px) { 32 | html,body { 33 | font-size:18.5625px; 34 | } 35 | } 36 | @media only screen and (max-width: 480px), only screen and (max-device-width:480px) { 37 | html,body { 38 | font-size:16.5px; 39 | } 40 | } 41 | @media only screen and (max-width: 414px), only screen and (max-device-width:414px) { 42 | html,body { 43 | font-size:14.23125px; 44 | } 45 | } 46 | @media only screen and (max-width: 400px), only screen and (max-device-width:400px) { 47 | html,body { 48 | font-size:13.75px; 49 | } 50 | } 51 | @media only screen and (max-width: 375px), only screen and (max-device-width:375px) { 52 | html,body { 53 | font-size:12.890625px; 54 | } 55 | } 56 | @media only screen and (max-width: 360px), only screen and (max-device-width:360px) { 57 | html,body { 58 | font-size:12.375px; 59 | } 60 | } 61 | @media only screen and (max-width: 320px), only screen and (max-device-width:320px) { 62 | html,body { 63 | font-size:11px; 64 | } 65 | } 66 | .container-fuild{width:100%;padding:0.5rem 1rem 3rem;box-sizing:border-box;overflow:hidden;} 67 | 68 | /*box-fiex*/ 69 | .box-flex{width:100%;display:-moz-box;display:-webkit-box;display:box;overflow:hidden;} 70 | .box-flex>a{-moz-box-flex:1.0;-webkit-box-flex:1.0;box-flex:1.0;display:block;} 71 | .box-flex>li{-moz-box-flex:1.0;-webkit-box-flex:1.0;box-flex:1.0;} 72 | .box-flex>p{-moz-box-flex:1.0;-webkit-box-flex:1.0;box-flex:1.0;} 73 | /*清除安卓系统手机点击的外边框*/ 74 | a,button,input,li,span,textarea{-webkit-tap-highlight-color:rgba(255,0,0,0);outline:none;} 75 | /*伪类清除浮动*/ 76 | .clearfix:after {content: "";display:block;height: 0; clear: both; visibility: hidden; } 77 | /*清除滚动条*/ 78 | ::-webkit-scrollbar{width:0;height:0;} 79 | /*清除底部遮挡*/ 80 | #clear_bianju{width:100%;height:1px;padding-bottom:5.5rem;} 81 | /*全局背景样式*/ 82 | html{height:100%;} 83 | /*body{height:100%;font:1.2rem/1.8rem STXihei;color:#333333;}*/ 84 | body{font:1.2rem/1.8rem STXihei;color:#333333;} 85 | -------------------------------------------------------------------------------- /myDemo/static/css/iconfont.css: -------------------------------------------------------------------------------- 1 | 2 | @font-face {font-family: "iconfont"; 3 | src: url('iconfont.eot?t=1499743157376'); /* IE9*/ 4 | src: url('iconfont.eot?t=1499743157376#iefix') format('embedded-opentype'), /* IE6-IE8 */ 5 | url('iconfont.woff?t=1499743157376') format('woff'), /* chrome, firefox */ 6 | url('iconfont.ttf?t=1499743157376') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ 7 | url('iconfont.svg?t=1499743157376#iconfont') format('svg'); /* iOS 4.1- */ 8 | } 9 | 10 | .iconfont { 11 | font-family:"iconfont" !important; 12 | font-size:16px; 13 | font-style:normal; 14 | -webkit-font-smoothing: antialiased; 15 | -moz-osx-font-smoothing: grayscale; 16 | } 17 | 18 | .icon-play:before { content: "\e600"; } 19 | 20 | .icon-shezhi:before { content: "\e64b"; } 21 | 22 | .icon-shijian:before { content: "\e64d"; } 23 | 24 | .icon-shouhuodizhi:before { content: "\e64e"; } 25 | 26 | .icon-shouye:before { content: "\e64f"; } 27 | 28 | .icon-wodedingdan:before { content: "\e655"; } -------------------------------------------------------------------------------- /myDemo/static/images/chooseBg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fongdaBoy/Vue2.0ComponentDemo/bb845b26f62483ade700a7b229ed17f56fe8e45d/myDemo/static/images/chooseBg.png -------------------------------------------------------------------------------- /myDemo/static/images/code.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fongdaBoy/Vue2.0ComponentDemo/bb845b26f62483ade700a7b229ed17f56fe8e45d/myDemo/static/images/code.png -------------------------------------------------------------------------------- /myDemo/static/images/connectionless.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fongdaBoy/Vue2.0ComponentDemo/bb845b26f62483ade700a7b229ed17f56fe8e45d/myDemo/static/images/connectionless.png -------------------------------------------------------------------------------- /myDemo/static/images/failure.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fongdaBoy/Vue2.0ComponentDemo/bb845b26f62483ade700a7b229ed17f56fe8e45d/myDemo/static/images/failure.png -------------------------------------------------------------------------------- /myDemo/static/images/success.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fongdaBoy/Vue2.0ComponentDemo/bb845b26f62483ade700a7b229ed17f56fe8e45d/myDemo/static/images/success.png --------------------------------------------------------------------------------