├── .babelrc ├── .editorconfig ├── .gitignore ├── .postcssrc.js ├── 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 ├── assets │ ├── css │ │ ├── bar.css │ │ ├── details.css │ │ ├── focus.css │ │ ├── home.css │ │ ├── ionicons.css │ │ └── weather.css │ ├── fonts │ │ ├── ionicons.eot │ │ ├── ionicons.svg │ │ ├── ionicons.ttf │ │ ├── ionicons.woff │ │ ├── weathericons-regular-webfont.eot │ │ ├── weathericons-regular-webfont.svg │ │ ├── weathericons-regular-webfont.ttf │ │ └── weathericons-regular-webfont.woff │ ├── life-icon.png │ ├── lv1.png │ ├── lv2.png │ ├── lv3.png │ ├── lv4.png │ ├── lv5.png │ ├── lv6.png │ ├── lv7.png │ └── weather-icon-414.png ├── components │ ├── Home.vue │ ├── bar.vue │ ├── card.vue │ ├── chooseCity.vue │ ├── details.vue │ ├── loading.vue │ ├── myfocus.vue │ └── pannel.vue ├── libs │ ├── cityCode.json │ ├── mixin.js │ └── mixin2.js ├── main.js ├── router │ └── index.js └── vuex │ ├── getters.js │ └── store.js └── static └── .gitkeep /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { "modules": false }], 4 | "stage-2" 5 | ], 6 | "plugins": ["transform-runtime"], 7 | "comments": false, 8 | "env": { 9 | "test": { 10 | "presets": ["env", "stage-2"], 11 | "plugins": [ "istanbul" ] 12 | } 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist/ 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-wfcast 2 | 3 | 这是基于vue2 + vue-router2 + vuex + axios 仿(中国天气预报)的一个webapp项目！主要想借此项目来学习vue,觉得光是看理论和别人的文章总结对vue理解感觉是一知半解，不够深刻。所以找网上找了相关的资料，自己动手写了这个demo, 4 | 页面的数据是通过调用接口和页面爬取回来的，页面icon和数据保持和线上的一致，如有冒犯请告知，项目仅供参考学习。 5 | 6 | ### 参考资料列表 7 | 8 | * [https://cn.vuejs.org/v2/api/](https://cn.vuejs.org/v2/api/)
9 | * [https://github.com/huang303513/Weather_Vue](https://github.com/huang303513/Weather_Vue)
10 | * [http://www.cnblogs.com/wisewrong/p/6558001.html](http://www.cnblogs.com/wisewrong/p/6558001.html)
11 | * [http://www.cnblogs.com/coco1s/p/4954063.html](http://www.cnblogs.com/coco1s/p/4954063.html)
12 | * [http://www.jianshu.com/p/dc9a79f6ceb7#](http://www.jianshu.com/p/dc9a79f6ceb7#)
13 | * [https://github.com/jokermonn/-Api/blob/master/CenterWeather.md](https://github.com/jokermonn/-Api/blob/master/CenterWeather.md) 14 | 15 | 16 | ### 部分截图 17 | 18 | ![主页](http://i1.piimg.com/591496/bdb92cd2db57c87b.png) 19 | ![主页](http://i1.piimg.com/591496/c2519c333c323dcf.png) 20 | ![主页](http://i1.piimg.com/591496/4d44f5e0cf31944b.png) 21 | 22 | ![我的关注](http://i1.piimg.com/591496/170539b0ea49bb32.png) 23 | 24 | ![我的关注](http://i1.piimg.com/591496/e62aa2499d39f94a.png) 25 | 26 | ![城市切换](http://i1.piimg.com/591496/654de14ec17109d0.png) 27 | 28 | ![详细空气指数](http://i1.piimg.com/591496/2c4744a95a4c7a74.png) 29 | 30 | ### 项目地址：（`git clone`） 31 | 32 | ```shell 33 | git clone https://github.com/moedong/vue-wfcast.git 34 | ``` 35 | 36 | ### 安装 37 | 38 | ``` 39 | npm install 40 | ``` 41 | 42 | ### 运行 43 | 44 | ``` 45 | npm run dev 46 | ``` 47 | 48 | ### 发布 49 | 50 | ``` 51 | npm run build 52 | ``` 53 | 54 | ### 技术栈 55 | 56 | 在此DEMO中使用了一下技术 57 | * vue2 58 | * vue-router2 59 | * vuex 60 | * webpack2 61 | * es6 62 | * axios 63 | * cheerio 64 | * echarts 65 | 66 | 67 | ### 目录结构 68 | 69 | 
70 | .
71 | ├── README.md           
72 | ├── build              // 构建服务和webpack配置
73 | ├── config             // 项目不同环境的配置
74 | ├── dist               // 项目build目录
75 | ├── index.html         // 项目入口文件
76 | ├── package.json       // 项目配置文件
77 | ├── src
78 | │   ├── assets         // css js 和图片资源
79 | │   ├── components     // 各种组件
80 | │   ├── libs           // 组件的公用模块
81 | │   ├── router         // 存放路由的文件夹
82 | │   ├── vuex          // 状态管理文件夹
83 | │   ├── App.Vue        // 模板文件入口
84 | │   └── main.js        // Webpack 预编译入口
85 | │   
86 | 
87 |
88 | 89 | ### 感谢 90 | 91 | 如果对于您有帮助 ，麻烦您使劲的给个Star吧 ！ ^_^ 92 | 93 | 94 | 95 | 96 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /build/check-versions.js: -------------------------------------------------------------------------------- 1 | var chalk = require('chalk') 2 | var semver = require('semver') 3 | var packageConfig = require('../package.json') 4 | 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 | name: 'npm', 17 | currentVersion: exec('npm --version'), 18 | versionRequirement: packageConfig.engines.npm 19 | } 20 | ] 21 | 22 | module.exports = function () { 23 | var warnings = [] 24 | for (var i = 0; i < versionRequirements.length; i++) { 25 | var mod = versionRequirements[i] 26 | if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) { 27 | warnings.push(mod.name + ': ' + 28 | chalk.red(mod.currentVersion) + ' should be ' + 29 | chalk.green(mod.versionRequirement) 30 | ) 31 | } 32 | } 33 | 34 | if (warnings.length) { 35 | console.log('') 36 | console.log(chalk.yellow('To use this template, you must update following to modules:')) 37 | console.log() 38 | for (var i = 0; i < warnings.length; i++) { 39 | var warning = warnings[i] 40 | console.log(' ' + warning) 41 | } 42 | console.log() 43 | process.exit(1) 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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: 8080, 27 | autoOpenBrowser: true, 28 | assetsSubDirectory: 'static', 29 | assetsPublicPath: '/', 30 | proxyTable: { 31 | '/iplookup': { 32 | target: 'http://int.dpool.sina.com.cn', 33 | changeOrigin: true, 34 | pathRewrite: { 35 | '^/iplookup': '/iplookup' 36 | } 37 | }, 38 | '/Heart': { 39 | target: 'http://tj.nineton.cn', 40 | changeOrigin: true, 41 | pathRewrite: { 42 | '^/Heart': '/Heart' 43 | } 44 | }, 45 | '/html': { 46 | target: 'http://waptianqi.2345.com', 47 | changeOrigin: true, 48 | pathRewrite: { 49 | '^/html': '' 50 | } 51 | }, 52 | '/t': { 53 | target: 'http://tianqi.2345.com', 54 | changeOrigin: true, 55 | pathRewrite: { 56 | '^/t': '/t' 57 | } 58 | }, 59 | '/weaoo': { 60 | target: 'http://www.weaoo.com', 61 | changeOrigin: true, 62 | pathRewrite: { 63 | '^/weaoo': '' 64 | } 65 | } 66 | 67 | }, 68 | // CSS Sourcemaps off by default because relative paths are "buggy" 69 | // with this option, according to the CSS-Loader README 70 | // (https://github.com/webpack/css-loader#sourcemaps) 71 | // In our experience, they generally work as expected, 72 | // just be aware of this issue when enabling this option. 73 | cssSourceMap: false 74 | } 75 | } 76 | -------------------------------------------------------------------------------- /config/prod.env.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | NODE_ENV: '"production"' 3 | } 4 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | my-project 6 | 7 | 8 | 9 | 10 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-wfcast", 3 | "version": "1.0.0", 4 | "description": "一个 基于vue2 + vue-router2 + vuex + axios 的天气预报小项目", 5 | "author": " moedong", 6 | "private": true, 7 | "scripts": { 8 | "dev": "node build/dev-server.js", 9 | "build": "node build/build.js" 10 | }, 11 | "dependencies": { 12 | "axios": "^0.16.0", 13 | "cheerio": "^0.22.0", 14 | "echarts": "^3.5.2", 15 | "vue": "^2.2.2", 16 | "vue-axios": "^2.0.1", 17 | "vue-router": "^2.2.0", 18 | "vuex": "^2.2.1" 19 | }, 20 | "devDependencies": { 21 | "autoprefixer": "^6.7.2", 22 | "babel-core": "^6.22.1", 23 | "babel-loader": "^6.2.10", 24 | "babel-plugin-transform-runtime": "^6.22.0", 25 | "babel-preset-env": "^1.2.1", 26 | "babel-preset-stage-2": "^6.22.0", 27 | "babel-register": "^6.22.0", 28 | "chalk": "^1.1.3", 29 | "connect-history-api-fallback": "^1.3.0", 30 | "copy-webpack-plugin": "^4.0.1", 31 | "css-loader": "^0.26.4", 32 | "eventsource-polyfill": "^0.9.6", 33 | "express": "^4.14.1", 34 | "extract-text-webpack-plugin": "^2.0.0", 35 | "file-loader": "^0.10.0", 36 | "friendly-errors-webpack-plugin": "^1.1.3", 37 | "function-bind": "^1.1.0", 38 | "html-webpack-plugin": "^2.28.0", 39 | "http-proxy-middleware": "^0.17.3", 40 | "opn": "^4.0.2", 41 | "optimize-css-assets-webpack-plugin": "^1.3.0", 42 | "ora": "^1.1.0", 43 | "rimraf": "^2.6.0", 44 | "semver": "^5.3.0", 45 | "style-loader": "^0.16.1", 46 | "stylus-loader": "^3.0.1", 47 | "url-loader": "^0.5.7", 48 | "vue-loader": "^11.1.4", 49 | "vue-style-loader": "^2.0.0", 50 | "vue-template-compiler": "^2.2.4", 51 | "webpack": "^2.2.1", 52 | "webpack-bundle-analyzer": "^2.2.1", 53 | "webpack-dev-middleware": "^1.10.0", 54 | "webpack-hot-middleware": "^2.16.1", 55 | "webpack-merge": "^2.6.1" 56 | }, 57 | "engines": { 58 | "node": ">= 4.0.0", 59 | "npm": ">= 3.0.0" 60 | }, 61 | "browserslist": [ 62 | "> 1%", 63 | "last 2 versions", 64 | "not ie <= 8" 65 | ] 66 | } 67 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 63 | 64 | 67 | 68 | -------------------------------------------------------------------------------- /src/assets/css/bar.css: -------------------------------------------------------------------------------- 1 | .bar { 2 | width:100%; 3 | position:fixed; 4 | left: 0; 5 | top:0; 6 | z-index: 10; 7 | height: 0.8rem; 8 | background-color: #f7f7f8; 9 | -webkit-backface-visibility: hidden; 10 | backface-visibility: hidden; 11 | } 12 | 13 | .title { 14 | position: absolute; 15 | display: block; 16 | width: 100%; 17 | padding: 0; 18 | font-size: 0.32rem; 19 | line-height: 0.8rem; 20 | color: #3d4145; 21 | text-align: center; 22 | white-space: nowrap; 23 | } 24 | .icon-menu{ 25 | position:absolute; 26 | right:0.2rem; 27 | top: 0.2rem; 28 | width:0.4rem; 29 | height: 0.4rem; 30 | background:url(../weather-icon-414.png) -0.2rem 0 no-repeat; 31 | background-size:8.28rem; 32 | } 33 | 34 | .arrow-left{ 35 | font-size: 0.32rem; 36 | line-height: 0.8rem; 37 | color: #3d4145; 38 | position:absolute; 39 | left:0.2rem; 40 | font-style:normal; 41 | z-index:999; 42 | } 43 | 44 | .ion-chevron-left:before,.ion-ios-arrow-left:before{width:0.2rem;display:inline-block;} -------------------------------------------------------------------------------- /src/assets/css/details.css: -------------------------------------------------------------------------------- 1 | .aqi-detail { 2 | margin:0.8rem 0 0.3rem; 3 | text-align:center; 4 | background:#fff 5 | } 6 | .aqi-detail .yt-release { 7 | padding-top:0.2rem; 8 | padding-left:0.2rem; 9 | text-align:left; 10 | font-size:0.24rem; 11 | color:#8d8d8d 12 | } 13 | .aqi-detail .btitle { 14 | color:#3e91e5; 15 | font-size:0.32rem; 16 | height:0.64rem; 17 | line-height:0.64rem; 18 | padding:0.5rem 0 0.3rem; 19 | border:none; 20 | } 21 | .aqi-detail .phrase{ 22 | text-align:center; 23 | zoom:1; 24 | margin-bottom:0.5rem; 25 | font-size: 0.6rem; 26 | } 27 | .aqi-detail .phrase .status{ 28 | height:1rem; 29 | line-height:1rem; 30 | font-size:0.6rem; 31 | color:#f80 32 | } 33 | .progress{ 34 | width:90%; 35 | height:1.5rem; 36 | margin:0 5% 0; 37 | background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAApIAAABACAMAAACeP2dZAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NDkxMSwgMjAxMy8xMC8yOS0xMTo0NzoxNiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDoyMUZENDQwNEY5QkFFMzExOTE0QkM5N0I1NDYyQTNBQyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpBNjRBMUFERDAwMkMxMUU0QkE2NEExMTMwOEI5REYzOSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpBNjRBMUFEQzAwMkMxMUU0QkE2NEExMTMwOEI5REYzOSIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1LjEgV2luZG93cyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjQxNjQxMTUzODAwNUU0MTE5RUQwOUZBMENERDdDMDE1IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjIxRkQ0NDA0RjlCQUUzMTE5MTRCQzk3QjU0NjJBM0FDIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+mHS+iQAAAQVQTFRFvb2939/flZWV9/f37+/vc3Nz5+fnf39/qqqqzs7OmZmZioqKoKCgs7Oz19fXxcXFb88Phtc2+fb3ldxOt+eH9Pvt2MTLhdYz+v32XwEf9O3vfdQnah85k11w7/rkgzZOYQAegTNL7uTn9vzwtYeVaw8r+/75vZOgdB44/fz8YAEfkk5jXAIg7fnhx+yiteaEikdcvumT/gIB/iENwOqWs4SSvpaihD1U8Ofq+/n6k9tLcdASfS1F+dEqdtEbZgclaM0DkEtgm2h6eNIeXAon7eHlcxs2g9YwZAMhye2lgDBI/h8M8frn8urtYgAe/gAA+9Eq/6ZBzAABlwRUZmZmZswA////fhzEfAAABUlJREFUeNrsm2mf0zYQxuXbrhNnu9DSUihHOQr0vm/oAT2ALG2VfP+Pgq84tusEz0iWtf0982KXF+iZZ2f+li1ZFlsEwqoQKAHifCDpCJH4DL3QqcNXEBLJQSM0ub0Q35efHHXALdSI8DIhMm+OzBobTnc5jGQYySKWdIeBrEPwhVbSPWCEKNcS4vry3GpY7OkwRCtD6TlItsYz62s4x+UgkmGeJ3XzHzHVoC87DllCiWxI6o0nyrWEuL68NIfCLbBMNRgiXpi5/SLzynRmfQ1nuRxE0pWBk7djIaVDdJjlFWzN4xyhRO5J6o2nybWFuL7iqtRe/VvNELXXae7Vz68J32xmjQ1nuRxCMpSyvFt4EfkaFFKqCRX2G5J640lyHSG2r2D3H6JymlQxRK+k3/JqMLO+hvNciuE03kC+MeHKSEmomOlX7o6k3niKXFeI68uRMtsedqBQqFfP8XHdxWp+NphZX8N5LsVgGrfpCPG2EMiFkpAj03A/rDeeItcV4vty6mXNsiyqgiGFG3gyT2b1hvNcDiGZ7tLU5SDVT4j86WeRMYXCTvl74ylyXSFlX/mN21UzxN0ISmXgzZJZQ8N5LoeQ3C3o2/8a/bBbbwrECkINSb3xZLlGSNnXqqqpqiHyk1ocyCDczpBZS8N5LvUimT8zBEvHWUXV1oU1SKr6SupNIMNglDsswrMYyeOFtQHJZVRd0/kSK7AJSUVfyUxzVbgUsaxSW4rk8cLagGR7Qs8sQlLNV1JjMQsYYVCuaS1F8nhhrULSUynchEhyfImGyFnASPQ1e8IYLKw+JN3dQink7zCUHphCrU2gzniy3H+RpPsqXtxE4VaPIW2lNJN5HpdDSC7qF7rFbBySfDkrp7loVmyhhqTeeLLcfl+M7at4yZ16ByrDLxShlFWzDWbW13CeSzG841E1YVk+sxIi2l0WlQemUENSbzxZrhHi+1p0jgyoGiKVMm1mmMRoZn0N57kUw3sP5WkiP6C+QI3rqyGfWyK+UHuHuz2eLNcIsX0l3UMsqoZopXTqP6LYKzeYWV/DeS7FgURLb+tE9Zt/0kZakD+LO2ldT57Q/hGwN54q12ab5yuQgdiFr26IUsqgPCoZLuqVgbnMGhvOcjmIpBfVZ+DI76oS2RnJE9oj2RtPldsLMX1lshWOuiFWKWMdpZhwP+CILZZLcXCZmS80M8bzbnkKO81UhFoL5d54olxLiOdL9JFUNETbkSwtR4mWUky3wDlaWI7Lg9tF+48pqDtUvZFsoeHx8/vS/PfxLU+YeU6X+EIRYVkASQSQRCCAJAJIIhA2IvkadCytqNUugSSQBJLQAZJAEkgCSSAJJIEkkASSQBJIAkkgCSSBEpAEkkASSAJJIHk+kHzjiwuXHm1U4scXeuJvTfH5Z2da4p/Z4t9zEetXxB83Hnx1mY7kWxdPNqrxwjIkz86ApA1IFnH71ikRyWevbzZAEkhOhuR6fe0bEpLv/roBkkByUiTX798kIHlHxxwJJIHk8fjh2/FIXtwASSA5OZLrT+6NRfK974EkkDSA5PVfxiL55wZIAkkDSK4/eHMkkheAJJA0guTbV0ci+Q6QBJJGkLx+ZSSSJ0ASSBpBcv0bkASSdiF5BTduIGkVkvevYnkDJO1a3oxdcX8EJIGkESS/Hr1VfgIkgaQBJB8+xwtFIGkVkrcIxy4uAUkgOTmSN04ph9N+ApJAcmIkn9wkHeH9EEd4geTER3gfUz90+BgfOgDJCT90+PKU8TnYp9/9/v9C8imQtAPJv36+e5nzhSICMUsASQSQRCCOxUsBBgD9eX1y/b8/3AAAAABJRU5ErkJggg==') no-repeat; 38 | background-size:auto 0.55rem 39 | } 40 | 41 | .progress .scale { 42 | position:relative; 43 | height:1.2rem; 44 | margin:0 5% 0 0; 45 | } 46 | .progress .cur { 47 | position:absolute; 48 | top:0.7rem; 49 | width:0.5rem; 50 | height:0.5rem; 51 | text-align:center; 52 | line-height:0.5rem; 53 | color:#fff; 54 | font-size:0.24rem; 55 | margin-left:-3%; 56 | } 57 | .aqi-lv1 .phrase { 58 | color:#6c0 59 | } 60 | .aqi-lv1 .progress .cur { 61 | background:url('../lv1.png') no-repeat; 62 | background-size:100% 100% 63 | } 64 | .lv1 { 65 | color:#6c0 66 | } 67 | .label-lv1 { 68 | color:#fff; 69 | background:#6c0 70 | } 71 | .aqi-lv2 .phrase { 72 | color:#fbd12a 73 | } 74 | .aqi-lv2 .progress .cur { 75 | background:url('../lv2.png') no-repeat; 76 | background-size:100% 100% 77 | } 78 | .lv2 { 79 | color:#fbd12a 80 | } 81 | .label-lv2 { 82 | color:#fff; 83 | background:#fbd12a 84 | } 85 | .aqi-lv3 .phrase { 86 | color:#ffa641 87 | } 88 | .aqi-lv3 .progress .cur { 89 | background:url('../lv3.png') no-repeat; 90 | background-size:100% 100% 91 | } 92 | .lv3 { 93 | color:#ffa641 94 | } 95 | .label-lv3 { 96 | color:#fff; 97 | background:#ffa641 98 | } 99 | .aqi-lv4 .phrase { 100 | color:#fe0000 101 | } 102 | .aqi-lv4 .progress .cur { 103 | background:url('../lv4.png') no-repeat; 104 | background-size:100% 100% 105 | } 106 | .lv4 { 107 | color:#fe0000 108 | } 109 | .label-lv4 { 110 | color:#fff; 111 | background:#fe0000 112 | } 113 | .aqi-lv5 .phrase { 114 | color:#cc0001 115 | } 116 | .aqi-lv5 .progress .cur { 117 | background:url('../lv5.png') no-repeat; 118 | background-size:100% 100% 119 | } 120 | .lv5 { 121 | color:#cc0001 122 | } 123 | .label-lv5 { 124 | color:#fff; 125 | background:#cc0001 126 | } 127 | .aqi-lv6 .phrase { 128 | color:#970454 129 | } 130 | .aqi-lv6 .progress .cur { 131 | background:url('../lv6.png') no-repeat; 132 | background-size:100% 100% 133 | } 134 | .lv6 { 135 | color:#970454 136 | } 137 | .label-lv6 { 138 | color:#fff; 139 | background:#970454 140 | } 141 | .aqi-lv7 .phrase { 142 | color:#62001e 143 | } 144 | .aqi-lv7 .progress .cur { 145 | background:url('../lv7.png') no-repeat; 146 | background-size:100% 100% 147 | } 148 | .lv7 { 149 | color:#62001e 150 | } 151 | .label-lv7 { 152 | color:#fff; 153 | background:#62001e 154 | } 155 | 156 | .aqi-detail .feature { 157 | margin:0.3rem 0.3rem 0; 158 | text-align:center; 159 | line-height:0.6rem; 160 | font-size:0.24rem; 161 | color:#8d8d8d; 162 | } 163 | .aqi-list-rukou{display:none;} 164 | 165 | .btitle{padding:0 0.2rem;font-size:0.37rem;line-height:0.70rem;border-bottom:1px solid #ededed} 166 | 167 | .mainFomites { 168 | margin-bottom:0.3rem; 169 | text-align:left; 170 | background:#fff 171 | } 172 | .mainFomites .bmeta { 173 | padding-bottom:0.8rem; 174 | overflow:hidden 175 | } 176 | .mainFomites .bmeta ul { 177 | margin-left:-1px; 178 | overflow:hidden; 179 | padding:0 0.2rem 180 | } 181 | .mainFomites .bmeta li { 182 | float:left; 183 | position:relative; 184 | width:47%; 185 | padding:0.3rem 0.1rem; 186 | border-bottom:1px solid #c1e3ec; 187 | -moz-box-sizing:border-box; 188 | -webkit-box-sizing:border-box; 189 | box-sizing:border-box; 190 | } 191 | .mainFomites .bmeta li:nth-child(odd) { 192 | margin-right:3% 193 | } 194 | .mainFomites .bmeta li:nth-child(even) { 195 | margin-left:3% 196 | } 197 | .mainFomites .bmeta li div { 198 | line-height:0.3rem; 199 | font-size:0.3rem 200 | } 201 | .mainFomites .bmeta li sub,.mainFomites .bmeta li sup { 202 | line-height:0.3 203 | } 204 | .mainFomites .bmeta li .key { 205 | float:left 206 | } 207 | .mainFomites .bmeta li .value { 208 | float:right; 209 | text-align:right 210 | } 211 | .mainFomites .bmeta li span { 212 | display:block; 213 | font-size:0.2rem; 214 | color:#a4a4a4 215 | } 216 | 217 | .Realtime_data { 218 | margin-bottom:0.55556rem; 219 | border-bottom:1px solid #e9e9e9; 220 | background:#fff 221 | } 222 | .Realtime_data .bmeta{ 223 | margin-top:0.3rem 224 | } 225 | .Realtime_data .list { 226 | width:100%; 227 | font-size:0.3rem 228 | } 229 | .Realtime_data .list th:nth-of-type(1),.Realtime_data .list th:nth-of-type(2) { 230 | text-align:left 231 | } 232 | .Realtime_data .list th:nth-of-type(3),.Realtime_data .list td:nth-of-type(3) { 233 | text-align:right 234 | } 235 | .Realtime_data .list td:nth-of-type(2) { 236 | text-align:center 237 | } 238 | .Realtime_data .list th { 239 | border-bottom:1px solid #dfedf7 240 | } 241 | .Realtime_data .list th { 242 | padding-top:0.2rem; 243 | padding-bottom:0.2rem; 244 | font-weight:normal; 245 | font-size:0.3rem; 246 | text-align: center; 247 | } 248 | .Realtime_data .list th:nth-of-type(1) { 249 | width:32%; 250 | padding-left:0.2rem 251 | } 252 | .Realtime_data .list th:nth-of-type(2) { 253 | width:40%; 254 | text-align:center; 255 | } 256 | .Realtime_data .list th:nth-of-type(3) { 257 | width:30% 258 | } 259 | .Realtime_data .list td { 260 | padding-top:0.2rem; 261 | padding-bottom:0.2rem 262 | } 263 | .Realtime_data .list td:nth-of-type(1) { 264 | padding-left:0.2rem 265 | } 266 | .Realtime_data .list td:nth-of-type(3) { 267 | padding-right:0.2rem 268 | } 269 | .Realtime_data_more{display:none;} -------------------------------------------------------------------------------- /src/assets/css/focus.css: -------------------------------------------------------------------------------- 1 | .wrapper{padding-top:0.8rem;} 2 | .header { 3 | background-color: #157bd2; 4 | color: #fff; 5 | } 6 | .header .btitle { 7 | position: relative; 8 | height: 0.8rem; 9 | line-height: 0.8rem; 10 | text-align: center; 11 | font-size: 0.42rem 12 | } 13 | .header .btitle .back{ 14 | float:left; 15 | color:#fff; 16 | width:1rem; 17 | font-size:0.36rem; 18 | padding-left:0.1rem; 19 | -webkit-box-align:center; 20 | display:-webkit-box; 21 | } 22 | .header .btitle .back::before{ 23 | content: ""; 24 | width:0.18rem; 25 | height:0.18rem; 26 | border:1px solid #fff; 27 | border-color:transparent transparent #fff #fff; 28 | transform:rotate(45deg); 29 | display: inline-block; 30 | } 31 | .search { 32 | background-color: #f1f1f1; 33 | padding: 0.3rem; 34 | position: relative; 35 | } 36 | .search .box { 37 | position: relative; 38 | background-color: #FFF; 39 | height: 0.8rem; 40 | line-height: 0.8rem; 41 | border-radius: 0.1rem; 42 | border:1px solid #ededed; 43 | box-sizing:content-box; 44 | overflow: hidden; 45 | font-size: 0.32rem; 46 | } 47 | .search .box input{ 48 | width: 70%; 49 | height: 0.8rem; 50 | line-height: 0.8rem; 51 | border:none; 52 | vertical-align: top; 53 | font-size: 0.32rem; 54 | padding-left:0.2rem; 55 | } 56 | .search .box .btn{ 57 | float: right; 58 | border-left: 1px solid #ededed; 59 | height:0.65rem; 60 | line-height: 0.65rem; 61 | padding:0 0.2rem; 62 | margin-top:0.07rem; 63 | } 64 | .city-list .btitle { 65 | color: #50a2f4; 66 | text-align: center; 67 | font-size: 0.32rem; 68 | height:0.8rem; 69 | line-height: 0.8rem; 70 | } 71 | .card { 72 | background: rgba(249, 249, 249, 0.5); 73 | box-shadow: 0 0.05rem 0.1rem rgba(0, 0, 0, 0.3); 74 | margin: 0.3rem; 75 | position: relative; 76 | border-radius: 0.1rem; 77 | font-size: 0.32rem; 78 | } 79 | .card-content-inner { 80 | padding: 0.25rem 0.35rem; 81 | position: relative; 82 | } 83 | .card-header { 84 | border-radius: 0.1rem 0.1rem 0 0; 85 | font-size: 0.35rem; 86 | 87 | } 88 | .card .svnicon01{margin:0;display:inline-block;vertical-align:middle;} 89 | .card-header, .card-footer { 90 | min-height:0.32rem; 91 | padding: 0.25rem 0.35rem; 92 | position: relative; 93 | box-sizing: border-box; 94 | display: -webkit-box; 95 | display: -webkit-flex; 96 | display: flex; 97 | -webkit-box-pack: justify; 98 | -webkit-justify-content: space-between; 99 | justify-content: space-between; 100 | -webkit-box-align: center; 101 | -webkit-align-items: center; 102 | align-items: center; 103 | border-bottom: 1px solid #e1e1e1; 104 | } 105 | .card-footer { 106 | border-radius: 0 0 0.1rem 0.1rem; 107 | color: #5f646e; 108 | border-top: 1px solid #e1e1e1; 109 | } 110 | .card-footer .on{color:#f80;} -------------------------------------------------------------------------------- /src/assets/css/home.css: -------------------------------------------------------------------------------- 1 | #weather .weather-cont{background-position:0 0;background-repeat:no-repeat;background-size:cover;position:relative;} 2 | .today-life-index{background:#fff;margin:0.2rem 0;} 3 | .today-life-index .btitle{padding:0 0.2rem;font-size:0.37rem;line-height:0.70rem;border-bottom:1px solid #ededed} 4 | .today-life-index .btitle a { 5 | float: right; 6 | color: #3097fd; 7 | font-size:0.25rem; 8 | } 9 | .today-life-index .btitle a:after { 10 | content: ""; 11 | display: inline-block; 12 | margin-left: 0.1rem; 13 | width:0.15rem; 14 | height:0.15rem; 15 | border-width:1px; 16 | border-style:solid; 17 | border-color:transparent #3097fd #3097fd transparent; 18 | transform:rotate(-45deg); 19 | } 20 | .life-icon-allergy1, .life-icon-allergy2, .life-icon-calendar, .life-icon-carwash1, .life-icon-carwash2, .life-icon-cloth1, .life-icon-cloth2, .life-icon-cloth3, .life-icon-cloth4, .life-icon-cold1, .life-icon-cold2, .life-icon-dressed1, .life-icon-dressed2, .life-icon-fishing1, .life-icon-fishing2, .life-icon-moring1, .life-icon-moring2, .life-icon-rain1, .life-icon-rain2, .life-icon-sun1, .life-icon-sun2, .life-icon-traffic1, .life-icon-traffic2 { 21 | background: url('../assets/life-icon.png'); 22 | background-size: 0.7rem auto; 23 | background-repeat: no-repeat; 24 | width: 0.9rem; 25 | height:0.7rem; 26 | } 27 | .today-life-index .bmeta dt,.today-life-index .bmeta dd{ 28 | display: -moz-box; 29 | display: -webkit-box; 30 | display: -webkit-flex; 31 | display: flex; 32 | } 33 | .today-life-index .bmeta dt div:first-of-type { 34 | border-right: 1px solid #ededed; 35 | } 36 | .today-life-index .bmeta dt div{ 37 | width: 50%; 38 | padding:0.2rem 0.3rem; 39 | display: -moz-box; 40 | display: -webkit-box; 41 | display: -webkit-flex; 42 | display: flex; 43 | -moz-box-align: center; 44 | -webkit-box-align: center; 45 | -webkit-align-items: center; 46 | align-items: center; 47 | -moz-box-sizing: border-box; 48 | -webkit-box-sizing: border-box; 49 | box-sizing: border-box; 50 | } 51 | .life-icon-cloth1 { 52 | background-position: 0 -3.7rem; 53 | } 54 | .life-icon-calendar{ 55 | background-position: 0 -1.5rem; 56 | } 57 | .today-life-index .bmeta dt p{color:#4e4e4e} 58 | .today-life-index .bmeta dt p span { 59 | font-size: 0.24rem; 60 | color: #8d8d8d; 61 | } 62 | .today-life-index .bmeta dd div { 63 | width: 33.33333%; 64 | padding:0.4rem 0.3rem; 65 | border: #ededed solid; 66 | border-width: 1px 1px 0 0; 67 | -webkit-box-align:center; 68 | -webkit-box-pack:center; 69 | text-align:center; 70 | } 71 | .today-life-index .bmeta dd span{ 72 | display:inline-block; 73 | } 74 | .today-life-index .bmeta dd p{ 75 | 76 | } 77 | .life-icon-rain1{ 78 | background-position: 0.1rem -12.6rem; 79 | } 80 | .life-icon-rain2{ 81 | background-position: 0.1rem -13.4rem; 82 | } 83 | .life-icon-cold2{ 84 | background-position: 0.1rem -7.45rem; 85 | } 86 | .life-icon-cold1{ 87 | background-position: 0.1rem -6.65rem; 88 | } 89 | .life-icon-allergy1{ 90 | background-position: 0.1rem 0; 91 | } 92 | .life-icon-allergy2{ 93 | background-position: 0.1rem -0.8rem; 94 | } 95 | .life-icon-moring1{ 96 | background-position: 0.1rem -11.2rem; 97 | } 98 | .life-icon-moring2{ 99 | background-position: 0.1rem -12rem; 100 | } 101 | .life-icon-dressed1{ 102 | background-position: 0.1rem -8.2rem; 103 | } 104 | .life-icon-dressed2{ 105 | background-position: 0.1rem -9rem; 106 | } 107 | .life-icon-sun1{ 108 | background-position: 0.1rem -14.1rem; 109 | } 110 | .life-icon-sun2{ 111 | background-position: 0.1rem -14.9rem; 112 | } 113 | .life-icon-carwash2{ 114 | background-position: 0.1rem -3rem; 115 | } 116 | .life-icon-carwash1{ 117 | background-position: 0.1rem -2.2rem; 118 | } 119 | .life-icon-traffic1{ 120 | background-position: 0.1rem -15.6rem; 121 | } 122 | .life-icon-traffic2{ 123 | background-position: 0.1rem -16.4rem; 124 | } 125 | .life-icon-fishing1{ 126 | background-position: 0.1rem -9.7rem; 127 | } 128 | .life-icon-fishing2{ 129 | background-position: 0.1rem -10.5rem; 130 | } -------------------------------------------------------------------------------- /src/assets/css/ionicons.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | /*! 3 | Ionicons, v2.0.0 4 | Created by Ben Sperry for the Ionic Framework, http://ionicons.com/ 5 | https://twitter.com/benjsperry https://twitter.com/ionicframework 6 | MIT License: https://github.com/driftyco/ionicons 7 | 8 | Android-style icons originally built by Google’s 9 | Material Design Icons: https://github.com/google/material-design-icons 10 | used under CC BY http://creativecommons.org/licenses/by/4.0/ 11 | Modified icons to fit ionicon’s grid from original. 12 | */ 13 | @font-face { font-family: "Ionicons"; src: url("../fonts/ionicons.eot?v=2.0.0"); src: url("../fonts/ionicons.eot?v=2.0.0#iefix") format("embedded-opentype"), url("../fonts/ionicons.ttf?v=2.0.0") format("truetype"), url("../fonts/ionicons.woff?v=2.0.0") format("woff"), url("../fonts/ionicons.svg?v=2.0.0#Ionicons") format("svg"); font-weight: normal; font-style: normal; } 14 | .ion, .ionicons, .ion-alert:before, .ion-alert-circled:before, .ion-android-add:before, .ion-android-add-circle:before, .ion-android-alarm-clock:before, .ion-android-alert:before, .ion-android-apps:before, .ion-android-archive:before, .ion-android-arrow-back:before, .ion-android-arrow-down:before, .ion-android-arrow-dropdown:before, .ion-android-arrow-dropdown-circle:before, .ion-android-arrow-dropleft:before, .ion-android-arrow-dropleft-circle:before, .ion-android-arrow-dropright:before, .ion-android-arrow-dropright-circle:before, .ion-android-arrow-dropup:before, .ion-android-arrow-dropup-circle:before, .ion-android-arrow-forward:before, .ion-android-arrow-up:before, .ion-android-attach:before, .ion-android-bar:before, .ion-android-bicycle:before, .ion-android-boat:before, .ion-android-bookmark:before, .ion-android-bulb:before, .ion-android-bus:before, .ion-android-calendar:before, .ion-android-call:before, .ion-android-camera:before, .ion-android-cancel:before, .ion-android-car:before, .ion-android-cart:before, .ion-android-chat:before, .ion-android-checkbox:before, .ion-android-checkbox-blank:before, .ion-android-checkbox-outline:before, .ion-android-checkbox-outline-blank:before, .ion-android-checkmark-circle:before, .ion-android-clipboard:before, .ion-android-close:before, .ion-android-cloud:before, .ion-android-cloud-circle:before, .ion-android-cloud-done:before, .ion-android-cloud-outline:before, .ion-android-color-palette:before, .ion-android-compass:before, .ion-android-contact:before, .ion-android-contacts:before, .ion-android-contract:before, .ion-android-create:before, .ion-android-delete:before, .ion-android-desktop:before, .ion-android-document:before, .ion-android-done:before, .ion-android-done-all:before, .ion-android-download:before, .ion-android-drafts:before, .ion-android-exit:before, .ion-android-expand:before, .ion-android-favorite:before, .ion-android-favorite-outline:before, .ion-android-film:before, .ion-android-folder:before, .ion-android-folder-open:before, .ion-android-funnel:before, .ion-android-globe:before, .ion-android-hand:before, .ion-android-hangout:before, .ion-android-happy:before, .ion-android-home:before, .ion-android-image:before, .ion-android-laptop:before, .ion-android-list:before, .ion-android-locate:before, .ion-android-lock:before, .ion-android-mail:before, .ion-android-map:before, .ion-android-menu:before, .ion-android-microphone:before, .ion-android-microphone-off:before, .ion-android-more-horizontal:before, .ion-android-more-vertical:before, .ion-android-navigate:before, .ion-android-notifications:before, .ion-android-notifications-none:before, .ion-android-notifications-off:before, .ion-android-open:before, .ion-android-options:before, .ion-android-people:before, .ion-android-person:before, .ion-android-person-add:before, .ion-android-phone-landscape:before, .ion-android-phone-portrait:before, .ion-android-pin:before, .ion-android-plane:before, .ion-android-playstore:before, .ion-android-print:before, .ion-android-radio-button-off:before, .ion-android-radio-button-on:before, .ion-android-refresh:before, .ion-android-remove:before, .ion-android-remove-circle:before, .ion-android-restaurant:before, .ion-android-sad:before, .ion-android-search:before, .ion-android-send:before, .ion-android-settings:before, .ion-android-share:before, .ion-android-share-alt:before, .ion-android-star:before, .ion-android-star-half:before, .ion-android-star-outline:before, .ion-android-stopwatch:before, .ion-android-subway:before, .ion-android-sunny:before, .ion-android-sync:before, .ion-android-textsms:before, .ion-android-time:before, .ion-android-train:before, .ion-android-unlock:before, .ion-android-upload:before, .ion-android-volume-down:before, .ion-android-volume-mute:before, .ion-android-volume-off:before, .ion-android-volume-up:before, .ion-android-walk:before, .ion-android-warning:before, .ion-android-watch:before, .ion-android-wifi:before, .ion-aperture:before, .ion-archive:before, .ion-arrow-down-a:before, .ion-arrow-down-b:before, .ion-arrow-down-c:before, .ion-arrow-expand:before, .ion-arrow-graph-down-left:before, .ion-arrow-graph-down-right:before, .ion-arrow-graph-up-left:before, .ion-arrow-graph-up-right:before, .ion-arrow-left-a:before, .ion-arrow-left-b:before, .ion-arrow-left-c:before, .ion-arrow-move:before, .ion-arrow-resize:before, .ion-arrow-return-left:before, .ion-arrow-return-right:before, .ion-arrow-right-a:before, .ion-arrow-right-b:before, .ion-arrow-right-c:before, .ion-arrow-shrink:before, .ion-arrow-swap:before, .ion-arrow-up-a:before, .ion-arrow-up-b:before, .ion-arrow-up-c:before, .ion-asterisk:before, .ion-at:before, .ion-backspace:before, .ion-backspace-outline:before, .ion-bag:before, .ion-battery-charging:before, .ion-battery-empty:before, .ion-battery-full:before, .ion-battery-half:before, .ion-battery-low:before, .ion-beaker:before, .ion-beer:before, .ion-bluetooth:before, .ion-bonfire:before, .ion-bookmark:before, .ion-bowtie:before, .ion-briefcase:before, .ion-bug:before, .ion-calculator:before, .ion-calendar:before, .ion-camera:before, .ion-card:before, .ion-cash:before, .ion-chatbox:before, .ion-chatbox-working:before, .ion-chatboxes:before, .ion-chatbubble:before, .ion-chatbubble-working:before, .ion-chatbubbles:before, .ion-checkmark:before, .ion-checkmark-circled:before, .ion-checkmark-round:before, .ion-chevron-down:before, .ion-chevron-left:before, .ion-chevron-right:before, .ion-chevron-up:before, .ion-clipboard:before, .ion-clock:before, .ion-close:before, .ion-close-circled:before, .ion-close-round:before, .ion-closed-captioning:before, .ion-cloud:before, .ion-code:before, .ion-code-download:before, .ion-code-working:before, .ion-coffee:before, .ion-compass:before, .ion-compose:before, .ion-connection-bars:before, .ion-contrast:before, .ion-crop:before, .ion-cube:before, .ion-disc:before, .ion-document:before, .ion-document-text:before, .ion-drag:before, .ion-earth:before, .ion-easel:before, .ion-edit:before, .ion-egg:before, .ion-eject:before, .ion-email:before, .ion-email-unread:before, .ion-erlenmeyer-flask:before, .ion-erlenmeyer-flask-bubbles:before, .ion-eye:before, .ion-eye-disabled:before, .ion-female:before, .ion-filing:before, .ion-film-marker:before, .ion-fireball:before, .ion-flag:before, .ion-flame:before, .ion-flash:before, .ion-flash-off:before, .ion-folder:before, .ion-fork:before, .ion-fork-repo:before, .ion-forward:before, .ion-funnel:before, .ion-gear-a:before, .ion-gear-b:before, .ion-grid:before, .ion-hammer:before, .ion-happy:before, .ion-happy-outline:before, .ion-headphone:before, .ion-heart:before, .ion-heart-broken:before, .ion-help:before, .ion-help-buoy:before, .ion-help-circled:before, .ion-home:before, .ion-icecream:before, .ion-image:before, .ion-images:before, .ion-information:before, .ion-information-circled:before, .ion-ionic:before, .ion-ios-alarm:before, .ion-ios-alarm-outline:before, .ion-ios-albums:before, .ion-ios-albums-outline:before, .ion-ios-americanfootball:before, .ion-ios-americanfootball-outline:before, .ion-ios-analytics:before, .ion-ios-analytics-outline:before, .ion-ios-arrow-back:before, .ion-ios-arrow-down:before, .ion-ios-arrow-forward:before, .ion-ios-arrow-left:before, .ion-ios-arrow-right:before, .ion-ios-arrow-thin-down:before, .ion-ios-arrow-thin-left:before, .ion-ios-arrow-thin-right:before, .ion-ios-arrow-thin-up:before, .ion-ios-arrow-up:before, .ion-ios-at:before, .ion-ios-at-outline:before, .ion-ios-barcode:before, .ion-ios-barcode-outline:before, .ion-ios-baseball:before, .ion-ios-baseball-outline:before, .ion-ios-basketball:before, .ion-ios-basketball-outline:before, .ion-ios-bell:before, .ion-ios-bell-outline:before, .ion-ios-body:before, .ion-ios-body-outline:before, .ion-ios-bolt:before, .ion-ios-bolt-outline:before, .ion-ios-book:before, .ion-ios-book-outline:before, .ion-ios-bookmarks:before, .ion-ios-bookmarks-outline:before, .ion-ios-box:before, .ion-ios-box-outline:before, .ion-ios-briefcase:before, .ion-ios-briefcase-outline:before, .ion-ios-browsers:before, .ion-ios-browsers-outline:before, .ion-ios-calculator:before, .ion-ios-calculator-outline:before, .ion-ios-calendar:before, .ion-ios-calendar-outline:before, .ion-ios-camera:before, .ion-ios-camera-outline:before, .ion-ios-cart:before, .ion-ios-cart-outline:before, .ion-ios-chatboxes:before, .ion-ios-chatboxes-outline:before, .ion-ios-chatbubble:before, .ion-ios-chatbubble-outline:before, .ion-ios-checkmark:before, .ion-ios-checkmark-empty:before, .ion-ios-checkmark-outline:before, .ion-ios-circle-filled:before, .ion-ios-circle-outline:before, .ion-ios-clock:before, .ion-ios-clock-outline:before, .ion-ios-close:before, .ion-ios-close-empty:before, .ion-ios-close-outline:before, .ion-ios-cloud:before, .ion-ios-cloud-download:before, .ion-ios-cloud-download-outline:before, .ion-ios-cloud-outline:before, .ion-ios-cloud-upload:before, .ion-ios-cloud-upload-outline:before, .ion-ios-cloudy:before, .ion-ios-cloudy-night:before, .ion-ios-cloudy-night-outline:before, .ion-ios-cloudy-outline:before, .ion-ios-cog:before, .ion-ios-cog-outline:before, .ion-ios-color-filter:before, .ion-ios-color-filter-outline:before, .ion-ios-color-wand:before, .ion-ios-color-wand-outline:before, .ion-ios-compose:before, .ion-ios-compose-outline:before, .ion-ios-contact:before, .ion-ios-contact-outline:before, .ion-ios-copy:before, .ion-ios-copy-outline:before, .ion-ios-crop:before, .ion-ios-crop-strong:before, .ion-ios-download:before, .ion-ios-download-outline:before, .ion-ios-drag:before, .ion-ios-email:before, .ion-ios-email-outline:before, .ion-ios-eye:before, .ion-ios-eye-outline:before, .ion-ios-fastforward:before, .ion-ios-fastforward-outline:before, .ion-ios-filing:before, .ion-ios-filing-outline:before, .ion-ios-film:before, .ion-ios-film-outline:before, .ion-ios-flag:before, .ion-ios-flag-outline:before, .ion-ios-flame:before, .ion-ios-flame-outline:before, .ion-ios-flask:before, .ion-ios-flask-outline:before, .ion-ios-flower:before, .ion-ios-flower-outline:before, .ion-ios-folder:before, .ion-ios-folder-outline:before, .ion-ios-football:before, .ion-ios-football-outline:before, .ion-ios-game-controller-a:before, .ion-ios-game-controller-a-outline:before, .ion-ios-game-controller-b:before, .ion-ios-game-controller-b-outline:before, .ion-ios-gear:before, .ion-ios-gear-outline:before, .ion-ios-glasses:before, .ion-ios-glasses-outline:before, .ion-ios-grid-view:before, .ion-ios-grid-view-outline:before, .ion-ios-heart:before, .ion-ios-heart-outline:before, .ion-ios-help:before, .ion-ios-help-empty:before, .ion-ios-help-outline:before, .ion-ios-home:before, .ion-ios-home-outline:before, .ion-ios-infinite:before, .ion-ios-infinite-outline:before, .ion-ios-information:before, .ion-ios-information-empty:before, .ion-ios-information-outline:before, .ion-ios-ionic-outline:before, .ion-ios-keypad:before, .ion-ios-keypad-outline:before, .ion-ios-lightbulb:before, .ion-ios-lightbulb-outline:before, .ion-ios-list:before, .ion-ios-list-outline:before, .ion-ios-location:before, .ion-ios-location-outline:before, .ion-ios-locked:before, .ion-ios-locked-outline:before, .ion-ios-loop:before, .ion-ios-loop-strong:before, .ion-ios-medical:before, .ion-ios-medical-outline:before, .ion-ios-medkit:before, .ion-ios-medkit-outline:before, .ion-ios-mic:before, .ion-ios-mic-off:before, .ion-ios-mic-outline:before, .ion-ios-minus:before, .ion-ios-minus-empty:before, .ion-ios-minus-outline:before, .ion-ios-monitor:before, .ion-ios-monitor-outline:before, .ion-ios-moon:before, .ion-ios-moon-outline:before, .ion-ios-more:before, .ion-ios-more-outline:before, .ion-ios-musical-note:before, .ion-ios-musical-notes:before, .ion-ios-navigate:before, .ion-ios-navigate-outline:before, .ion-ios-nutrition:before, .ion-ios-nutrition-outline:before, .ion-ios-paper:before, .ion-ios-paper-outline:before, .ion-ios-paperplane:before, .ion-ios-paperplane-outline:before, .ion-ios-partlysunny:before, .ion-ios-partlysunny-outline:before, .ion-ios-pause:before, .ion-ios-pause-outline:before, .ion-ios-paw:before, .ion-ios-paw-outline:before, .ion-ios-people:before, .ion-ios-people-outline:before, .ion-ios-person:before, .ion-ios-person-outline:before, .ion-ios-personadd:before, .ion-ios-personadd-outline:before, .ion-ios-photos:before, .ion-ios-photos-outline:before, .ion-ios-pie:before, .ion-ios-pie-outline:before, .ion-ios-pint:before, .ion-ios-pint-outline:before, .ion-ios-play:before, .ion-ios-play-outline:before, .ion-ios-plus:before, .ion-ios-plus-empty:before, .ion-ios-plus-outline:before, .ion-ios-pricetag:before, .ion-ios-pricetag-outline:before, .ion-ios-pricetags:before, .ion-ios-pricetags-outline:before, .ion-ios-printer:before, .ion-ios-printer-outline:before, .ion-ios-pulse:before, .ion-ios-pulse-strong:before, .ion-ios-rainy:before, .ion-ios-rainy-outline:before, .ion-ios-recording:before, .ion-ios-recording-outline:before, .ion-ios-redo:before, .ion-ios-redo-outline:before, .ion-ios-refresh:before, .ion-ios-refresh-empty:before, .ion-ios-refresh-outline:before, .ion-ios-reload:before, .ion-ios-reverse-camera:before, .ion-ios-reverse-camera-outline:before, .ion-ios-rewind:before, .ion-ios-rewind-outline:before, .ion-ios-rose:before, .ion-ios-rose-outline:before, .ion-ios-search:before, .ion-ios-search-strong:before, .ion-ios-settings:before, .ion-ios-settings-strong:before, .ion-ios-shuffle:before, .ion-ios-shuffle-strong:before, .ion-ios-skipbackward:before, .ion-ios-skipbackward-outline:before, .ion-ios-skipforward:before, .ion-ios-skipforward-outline:before, .ion-ios-snowy:before, .ion-ios-speedometer:before, .ion-ios-speedometer-outline:before, .ion-ios-star:before, .ion-ios-star-half:before, .ion-ios-star-outline:before, .ion-ios-stopwatch:before, .ion-ios-stopwatch-outline:before, .ion-ios-sunny:before, .ion-ios-sunny-outline:before, .ion-ios-telephone:before, .ion-ios-telephone-outline:before, .ion-ios-tennisball:before, .ion-ios-tennisball-outline:before, .ion-ios-thunderstorm:before, .ion-ios-thunderstorm-outline:before, .ion-ios-time:before, .ion-ios-time-outline:before, .ion-ios-timer:before, .ion-ios-timer-outline:before, .ion-ios-toggle:before, .ion-ios-toggle-outline:before, .ion-ios-trash:before, .ion-ios-trash-outline:before, .ion-ios-undo:before, .ion-ios-undo-outline:before, .ion-ios-unlocked:before, .ion-ios-unlocked-outline:before, .ion-ios-upload:before, .ion-ios-upload-outline:before, .ion-ios-videocam:before, .ion-ios-videocam-outline:before, .ion-ios-volume-high:before, .ion-ios-volume-low:before, .ion-ios-wineglass:before, .ion-ios-wineglass-outline:before, .ion-ios-world:before, .ion-ios-world-outline:before, .ion-ipad:before, .ion-iphone:before, .ion-ipod:before, .ion-jet:before, .ion-key:before, .ion-knife:before, .ion-laptop:before, .ion-leaf:before, .ion-levels:before, .ion-lightbulb:before, .ion-link:before, .ion-load-a:before, .ion-load-b:before, .ion-load-c:before, .ion-load-d:before, .ion-location:before, .ion-lock-combination:before, .ion-locked:before, .ion-log-in:before, .ion-log-out:before, .ion-loop:before, .ion-magnet:before, .ion-male:before, .ion-man:before, .ion-map:before, .ion-medkit:before, .ion-merge:before, .ion-mic-a:before, .ion-mic-b:before, .ion-mic-c:before, .ion-minus:before, .ion-minus-circled:before, .ion-minus-round:before, .ion-model-s:before, .ion-monitor:before, .ion-more:before, .ion-mouse:before, .ion-music-note:before, .ion-navicon:before, .ion-navicon-round:before, .ion-navigate:before, .ion-network:before, .ion-no-smoking:before, .ion-nuclear:before, .ion-outlet:before, .ion-paintbrush:before, .ion-paintbucket:before, .ion-paper-airplane:before, .ion-paperclip:before, .ion-pause:before, .ion-person:before, .ion-person-add:before, .ion-person-stalker:before, .ion-pie-graph:before, .ion-pin:before, .ion-pinpoint:before, .ion-pizza:before, .ion-plane:before, .ion-planet:before, .ion-play:before, .ion-playstation:before, .ion-plus:before, .ion-plus-circled:before, .ion-plus-round:before, .ion-podium:before, .ion-pound:before, .ion-power:before, .ion-pricetag:before, .ion-pricetags:before, .ion-printer:before, .ion-pull-request:before, .ion-qr-scanner:before, .ion-quote:before, .ion-radio-waves:before, .ion-record:before, .ion-refresh:before, .ion-reply:before, .ion-reply-all:before, .ion-ribbon-a:before, .ion-ribbon-b:before, .ion-sad:before, .ion-sad-outline:before, .ion-scissors:before, .ion-search:before, .ion-settings:before, .ion-share:before, .ion-shuffle:before, .ion-skip-backward:before, .ion-skip-forward:before, .ion-social-android:before, .ion-social-android-outline:before, .ion-social-angular:before, .ion-social-angular-outline:before, .ion-social-apple:before, .ion-social-apple-outline:before, .ion-social-bitcoin:before, .ion-social-bitcoin-outline:before, .ion-social-buffer:before, .ion-social-buffer-outline:before, .ion-social-chrome:before, .ion-social-chrome-outline:before, .ion-social-codepen:before, .ion-social-codepen-outline:before, .ion-social-css3:before, .ion-social-css3-outline:before, .ion-social-designernews:before, .ion-social-designernews-outline:before, .ion-social-dribbble:before, .ion-social-dribbble-outline:before, .ion-social-dropbox:before, .ion-social-dropbox-outline:before, .ion-social-euro:before, .ion-social-euro-outline:before, .ion-social-facebook:before, .ion-social-facebook-outline:before, .ion-social-foursquare:before, .ion-social-foursquare-outline:before, .ion-social-freebsd-devil:before, .ion-social-github:before, .ion-social-github-outline:before, .ion-social-google:before, .ion-social-google-outline:before, .ion-social-googleplus:before, .ion-social-googleplus-outline:before, .ion-social-hackernews:before, .ion-social-hackernews-outline:before, .ion-social-html5:before, .ion-social-html5-outline:before, .ion-social-instagram:before, .ion-social-instagram-outline:before, .ion-social-javascript:before, .ion-social-javascript-outline:before, .ion-social-linkedin:before, .ion-social-linkedin-outline:before, .ion-social-markdown:before, .ion-social-nodejs:before, .ion-social-octocat:before, .ion-social-pinterest:before, .ion-social-pinterest-outline:before, .ion-social-python:before, .ion-social-reddit:before, .ion-social-reddit-outline:before, .ion-social-rss:before, .ion-social-rss-outline:before, .ion-social-sass:before, .ion-social-skype:before, .ion-social-skype-outline:before, .ion-social-snapchat:before, .ion-social-snapchat-outline:before, .ion-social-tumblr:before, .ion-social-tumblr-outline:before, .ion-social-tux:before, .ion-social-twitch:before, .ion-social-twitch-outline:before, .ion-social-twitter:before, .ion-social-twitter-outline:before, .ion-social-usd:before, .ion-social-usd-outline:before, .ion-social-vimeo:before, .ion-social-vimeo-outline:before, .ion-social-whatsapp:before, .ion-social-whatsapp-outline:before, .ion-social-windows:before, .ion-social-windows-outline:before, .ion-social-wordpress:before, .ion-social-wordpress-outline:before, .ion-social-yahoo:before, .ion-social-yahoo-outline:before, .ion-social-yen:before, .ion-social-yen-outline:before, .ion-social-youtube:before, .ion-social-youtube-outline:before, .ion-soup-can:before, .ion-soup-can-outline:before, .ion-speakerphone:before, .ion-speedometer:before, .ion-spoon:before, .ion-star:before, .ion-stats-bars:before, .ion-steam:before, .ion-stop:before, .ion-thermometer:before, .ion-thumbsdown:before, .ion-thumbsup:before, .ion-toggle:before, .ion-toggle-filled:before, .ion-transgender:before, .ion-trash-a:before, .ion-trash-b:before, .ion-trophy:before, .ion-tshirt:before, .ion-tshirt-outline:before, .ion-umbrella:before, .ion-university:before, .ion-unlocked:before, .ion-upload:before, .ion-usb:before, .ion-videocamera:before, .ion-volume-high:before, .ion-volume-low:before, .ion-volume-medium:before, .ion-volume-mute:before, .ion-wand:before, .ion-waterdrop:before, .ion-wifi:before, .ion-wineglass:before, .ion-woman:before, .ion-wrench:before, .ion-xbox:before { display: inline-block; font-family: "Ionicons"; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; text-rendering: auto; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } 15 | 16 | .ion-alert:before { content: "\f101"; } 17 | 18 | .ion-alert-circled:before { content: "\f100"; } 19 | 20 | .ion-android-add:before { content: "\f2c7"; } 21 | 22 | .ion-android-add-circle:before { content: "\f359"; } 23 | 24 | .ion-android-alarm-clock:before { content: "\f35a"; } 25 | 26 | .ion-android-alert:before { content: "\f35b"; } 27 | 28 | .ion-android-apps:before { content: "\f35c"; } 29 | 30 | .ion-android-archive:before { content: "\f2c9"; } 31 | 32 | .ion-android-arrow-back:before { content: "\f2ca"; } 33 | 34 | .ion-android-arrow-down:before { content: "\f35d"; } 35 | 36 | .ion-android-arrow-dropdown:before { content: "\f35f"; } 37 | 38 | .ion-android-arrow-dropdown-circle:before { content: "\f35e"; } 39 | 40 | .ion-android-arrow-dropleft:before { content: "\f361"; } 41 | 42 | .ion-android-arrow-dropleft-circle:before { content: "\f360"; } 43 | 44 | .ion-android-arrow-dropright:before { content: "\f363"; } 45 | 46 | .ion-android-arrow-dropright-circle:before { content: "\f362"; } 47 | 48 | .ion-android-arrow-dropup:before { content: "\f365"; } 49 | 50 | .ion-android-arrow-dropup-circle:before { content: "\f364"; } 51 | 52 | .ion-android-arrow-forward:before { content: "\f30f"; } 53 | 54 | .ion-android-arrow-up:before { content: "\f366"; } 55 | 56 | .ion-android-attach:before { content: "\f367"; } 57 | 58 | .ion-android-bar:before { content: "\f368"; } 59 | 60 | .ion-android-bicycle:before { content: "\f369"; } 61 | 62 | .ion-android-boat:before { content: "\f36a"; } 63 | 64 | .ion-android-bookmark:before { content: "\f36b"; } 65 | 66 | .ion-android-bulb:before { content: "\f36c"; } 67 | 68 | .ion-android-bus:before { content: "\f36d"; } 69 | 70 | .ion-android-calendar:before { content: "\f2d1"; } 71 | 72 | .ion-android-call:before { content: "\f2d2"; } 73 | 74 | .ion-android-camera:before { content: "\f2d3"; } 75 | 76 | .ion-android-cancel:before { content: "\f36e"; } 77 | 78 | .ion-android-car:before { content: "\f36f"; } 79 | 80 | .ion-android-cart:before { content: "\f370"; } 81 | 82 | .ion-android-chat:before { content: "\f2d4"; } 83 | 84 | .ion-android-checkbox:before { content: "\f374"; } 85 | 86 | .ion-android-checkbox-blank:before { content: "\f371"; } 87 | 88 | .ion-android-checkbox-outline:before { content: "\f373"; } 89 | 90 | .ion-android-checkbox-outline-blank:before { content: "\f372"; } 91 | 92 | .ion-android-checkmark-circle:before { content: "\f375"; } 93 | 94 | .ion-android-clipboard:before { content: "\f376"; } 95 | 96 | .ion-android-close:before { content: "\f2d7"; } 97 | 98 | .ion-android-cloud:before { content: "\f37a"; } 99 | 100 | .ion-android-cloud-circle:before { content: "\f377"; } 101 | 102 | .ion-android-cloud-done:before { content: "\f378"; } 103 | 104 | .ion-android-cloud-outline:before { content: "\f379"; } 105 | 106 | .ion-android-color-palette:before { content: "\f37b"; } 107 | 108 | .ion-android-compass:before { content: "\f37c"; } 109 | 110 | .ion-android-contact:before { content: "\f2d8"; } 111 | 112 | .ion-android-contacts:before { content: "\f2d9"; } 113 | 114 | .ion-android-contract:before { content: "\f37d"; } 115 | 116 | .ion-android-create:before { content: "\f37e"; } 117 | 118 | .ion-android-delete:before { content: "\f37f"; } 119 | 120 | .ion-android-desktop:before { content: "\f380"; } 121 | 122 | .ion-android-document:before { content: "\f381"; } 123 | 124 | .ion-android-done:before { content: "\f383"; } 125 | 126 | .ion-android-done-all:before { content: "\f382"; } 127 | 128 | .ion-android-download:before { content: "\f2dd"; } 129 | 130 | .ion-android-drafts:before { content: "\f384"; } 131 | 132 | .ion-android-exit:before { content: "\f385"; } 133 | 134 | .ion-android-expand:before { content: "\f386"; } 135 | 136 | .ion-android-favorite:before { content: "\f388"; } 137 | 138 | .ion-android-favorite-outline:before { content: "\f387"; } 139 | 140 | .ion-android-film:before { content: "\f389"; } 141 | 142 | .ion-android-folder:before { content: "\f2e0"; } 143 | 144 | .ion-android-folder-open:before { content: "\f38a"; } 145 | 146 | .ion-android-funnel:before { content: "\f38b"; } 147 | 148 | .ion-android-globe:before { content: "\f38c"; } 149 | 150 | .ion-android-hand:before { content: "\f2e3"; } 151 | 152 | .ion-android-hangout:before { content: "\f38d"; } 153 | 154 | .ion-android-happy:before { content: "\f38e"; } 155 | 156 | .ion-android-home:before { content: "\f38f"; } 157 | 158 | .ion-android-image:before { content: "\f2e4"; } 159 | 160 | .ion-android-laptop:before { content: "\f390"; } 161 | 162 | .ion-android-list:before { content: "\f391"; } 163 | 164 | .ion-android-locate:before { content: "\f2e9"; } 165 | 166 | .ion-android-lock:before { content: "\f392"; } 167 | 168 | .ion-android-mail:before { content: "\f2eb"; } 169 | 170 | .ion-android-map:before { content: "\f393"; } 171 | 172 | .ion-android-menu:before { content: "\f394"; } 173 | 174 | .ion-android-microphone:before { content: "\f2ec"; } 175 | 176 | .ion-android-microphone-off:before { content: "\f395"; } 177 | 178 | .ion-android-more-horizontal:before { content: "\f396"; } 179 | 180 | .ion-android-more-vertical:before { content: "\f397"; } 181 | 182 | .ion-android-navigate:before { content: "\f398"; } 183 | 184 | .ion-android-notifications:before { content: "\f39b"; } 185 | 186 | .ion-android-notifications-none:before { content: "\f399"; } 187 | 188 | .ion-android-notifications-off:before { content: "\f39a"; } 189 | 190 | .ion-android-open:before { content: "\f39c"; } 191 | 192 | .ion-android-options:before { content: "\f39d"; } 193 | 194 | .ion-android-people:before { content: "\f39e"; } 195 | 196 | .ion-android-person:before { content: "\f3a0"; } 197 | 198 | .ion-android-person-add:before { content: "\f39f"; } 199 | 200 | .ion-android-phone-landscape:before { content: "\f3a1"; } 201 | 202 | .ion-android-phone-portrait:before { content: "\f3a2"; } 203 | 204 | .ion-android-pin:before { content: "\f3a3"; } 205 | 206 | .ion-android-plane:before { content: "\f3a4"; } 207 | 208 | .ion-android-playstore:before { content: "\f2f0"; } 209 | 210 | .ion-android-print:before { content: "\f3a5"; } 211 | 212 | .ion-android-radio-button-off:before { content: "\f3a6"; } 213 | 214 | .ion-android-radio-button-on:before { content: "\f3a7"; } 215 | 216 | .ion-android-refresh:before { content: "\f3a8"; } 217 | 218 | .ion-android-remove:before { content: "\f2f4"; } 219 | 220 | .ion-android-remove-circle:before { content: "\f3a9"; } 221 | 222 | .ion-android-restaurant:before { content: "\f3aa"; } 223 | 224 | .ion-android-sad:before { content: "\f3ab"; } 225 | 226 | .ion-android-search:before { content: "\f2f5"; } 227 | 228 | .ion-android-send:before { content: "\f2f6"; } 229 | 230 | .ion-android-settings:before { content: "\f2f7"; } 231 | 232 | .ion-android-share:before { content: "\f2f8"; } 233 | 234 | .ion-android-share-alt:before { content: "\f3ac"; } 235 | 236 | .ion-android-star:before { content: "\f2fc"; } 237 | 238 | .ion-android-star-half:before { content: "\f3ad"; } 239 | 240 | .ion-android-star-outline:before { content: "\f3ae"; } 241 | 242 | .ion-android-stopwatch:before { content: "\f2fd"; } 243 | 244 | .ion-android-subway:before { content: "\f3af"; } 245 | 246 | .ion-android-sunny:before { content: "\f3b0"; } 247 | 248 | .ion-android-sync:before { content: "\f3b1"; } 249 | 250 | .ion-android-textsms:before { content: "\f3b2"; } 251 | 252 | .ion-android-time:before { content: "\f3b3"; } 253 | 254 | .ion-android-train:before { content: "\f3b4"; } 255 | 256 | .ion-android-unlock:before { content: "\f3b5"; } 257 | 258 | .ion-android-upload:before { content: "\f3b6"; } 259 | 260 | .ion-android-volume-down:before { content: "\f3b7"; } 261 | 262 | .ion-android-volume-mute:before { content: "\f3b8"; } 263 | 264 | .ion-android-volume-off:before { content: "\f3b9"; } 265 | 266 | .ion-android-volume-up:before { content: "\f3ba"; } 267 | 268 | .ion-android-walk:before { content: "\f3bb"; } 269 | 270 | .ion-android-warning:before { content: "\f3bc"; } 271 | 272 | .ion-android-watch:before { content: "\f3bd"; } 273 | 274 | .ion-android-wifi:before { content: "\f305"; } 275 | 276 | .ion-aperture:before { content: "\f313"; } 277 | 278 | .ion-archive:before { content: "\f102"; } 279 | 280 | .ion-arrow-down-a:before { content: "\f103"; } 281 | 282 | .ion-arrow-down-b:before { content: "\f104"; } 283 | 284 | .ion-arrow-down-c:before { content: "\f105"; } 285 | 286 | .ion-arrow-expand:before { content: "\f25e"; } 287 | 288 | .ion-arrow-graph-down-left:before { content: "\f25f"; } 289 | 290 | .ion-arrow-graph-down-right:before { content: "\f260"; } 291 | 292 | .ion-arrow-graph-up-left:before { content: "\f261"; } 293 | 294 | .ion-arrow-graph-up-right:before { content: "\f262"; } 295 | 296 | .ion-arrow-left-a:before { content: "\f106"; } 297 | 298 | .ion-arrow-left-b:before { content: "\f107"; } 299 | 300 | .ion-arrow-left-c:before { content: "\f108"; } 301 | 302 | .ion-arrow-move:before { content: "\f263"; } 303 | 304 | .ion-arrow-resize:before { content: "\f264"; } 305 | 306 | .ion-arrow-return-left:before { content: "\f265"; } 307 | 308 | .ion-arrow-return-right:before { content: "\f266"; } 309 | 310 | .ion-arrow-right-a:before { content: "\f109"; } 311 | 312 | .ion-arrow-right-b:before { content: "\f10a"; } 313 | 314 | .ion-arrow-right-c:before { content: "\f10b"; } 315 | 316 | .ion-arrow-shrink:before { content: "\f267"; } 317 | 318 | .ion-arrow-swap:before { content: "\f268"; } 319 | 320 | .ion-arrow-up-a:before { content: "\f10c"; } 321 | 322 | .ion-arrow-up-b:before { content: "\f10d"; } 323 | 324 | .ion-arrow-up-c:before { content: "\f10e"; } 325 | 326 | .ion-asterisk:before { content: "\f314"; } 327 | 328 | .ion-at:before { content: "\f10f"; } 329 | 330 | .ion-backspace:before { content: "\f3bf"; } 331 | 332 | .ion-backspace-outline:before { content: "\f3be"; } 333 | 334 | .ion-bag:before { content: "\f110"; } 335 | 336 | .ion-battery-charging:before { content: "\f111"; } 337 | 338 | .ion-battery-empty:before { content: "\f112"; } 339 | 340 | .ion-battery-full:before { content: "\f113"; } 341 | 342 | .ion-battery-half:before { content: "\f114"; } 343 | 344 | .ion-battery-low:before { content: "\f115"; } 345 | 346 | .ion-beaker:before { content: "\f269"; } 347 | 348 | .ion-beer:before { content: "\f26a"; } 349 | 350 | .ion-bluetooth:before { content: "\f116"; } 351 | 352 | .ion-bonfire:before { content: "\f315"; } 353 | 354 | .ion-bookmark:before { content: "\f26b"; } 355 | 356 | .ion-bowtie:before { content: "\f3c0"; } 357 | 358 | .ion-briefcase:before { content: "\f26c"; } 359 | 360 | .ion-bug:before { content: "\f2be"; } 361 | 362 | .ion-calculator:before { content: "\f26d"; } 363 | 364 | .ion-calendar:before { content: "\f117"; } 365 | 366 | .ion-camera:before { content: "\f118"; } 367 | 368 | .ion-card:before { content: "\f119"; } 369 | 370 | .ion-cash:before { content: "\f316"; } 371 | 372 | .ion-chatbox:before { content: "\f11b"; } 373 | 374 | .ion-chatbox-working:before { content: "\f11a"; } 375 | 376 | .ion-chatboxes:before { content: "\f11c"; } 377 | 378 | .ion-chatbubble:before { content: "\f11e"; } 379 | 380 | .ion-chatbubble-working:before { content: "\f11d"; } 381 | 382 | .ion-chatbubbles:before { content: "\f11f"; } 383 | 384 | .ion-checkmark:before { content: "\f122"; } 385 | 386 | .ion-checkmark-circled:before { content: "\f120"; } 387 | 388 | .ion-checkmark-round:before { content: "\f121"; } 389 | 390 | .ion-chevron-down:before { content: "\f123"; } 391 | 392 | .ion-chevron-left:before { content: "\f124"; } 393 | 394 | .ion-chevron-right:before { content: "\f125"; } 395 | 396 | .ion-chevron-up:before { content: "\f126"; } 397 | 398 | .ion-clipboard:before { content: "\f127"; } 399 | 400 | .ion-clock:before { content: "\f26e"; } 401 | 402 | .ion-close:before { content: "\f12a"; } 403 | 404 | .ion-close-circled:before { content: "\f128"; } 405 | 406 | .ion-close-round:before { content: "\f129"; } 407 | 408 | .ion-closed-captioning:before { content: "\f317"; } 409 | 410 | .ion-cloud:before { content: "\f12b"; } 411 | 412 | .ion-code:before { content: "\f271"; } 413 | 414 | .ion-code-download:before { content: "\f26f"; } 415 | 416 | .ion-code-working:before { content: "\f270"; } 417 | 418 | .ion-coffee:before { content: "\f272"; } 419 | 420 | .ion-compass:before { content: "\f273"; } 421 | 422 | .ion-compose:before { content: "\f12c"; } 423 | 424 | .ion-connection-bars:before { content: "\f274"; } 425 | 426 | .ion-contrast:before { content: "\f275"; } 427 | 428 | .ion-crop:before { content: "\f3c1"; } 429 | 430 | .ion-cube:before { content: "\f318"; } 431 | 432 | .ion-disc:before { content: "\f12d"; } 433 | 434 | .ion-document:before { content: "\f12f"; } 435 | 436 | .ion-document-text:before { content: "\f12e"; } 437 | 438 | .ion-drag:before { content: "\f130"; } 439 | 440 | .ion-earth:before { content: "\f276"; } 441 | 442 | .ion-easel:before { content: "\f3c2"; } 443 | 444 | .ion-edit:before { content: "\f2bf"; } 445 | 446 | .ion-egg:before { content: "\f277"; } 447 | 448 | .ion-eject:before { content: "\f131"; } 449 | 450 | .ion-email:before { content: "\f132"; } 451 | 452 | .ion-email-unread:before { content: "\f3c3"; } 453 | 454 | .ion-erlenmeyer-flask:before { content: "\f3c5"; } 455 | 456 | .ion-erlenmeyer-flask-bubbles:before { content: "\f3c4"; } 457 | 458 | .ion-eye:before { content: "\f133"; } 459 | 460 | .ion-eye-disabled:before { content: "\f306"; } 461 | 462 | .ion-female:before { content: "\f278"; } 463 | 464 | .ion-filing:before { content: "\f134"; } 465 | 466 | .ion-film-marker:before { content: "\f135"; } 467 | 468 | .ion-fireball:before { content: "\f319"; } 469 | 470 | .ion-flag:before { content: "\f279"; } 471 | 472 | .ion-flame:before { content: "\f31a"; } 473 | 474 | .ion-flash:before { content: "\f137"; } 475 | 476 | .ion-flash-off:before { content: "\f136"; } 477 | 478 | .ion-folder:before { content: "\f139"; } 479 | 480 | .ion-fork:before { content: "\f27a"; } 481 | 482 | .ion-fork-repo:before { content: "\f2c0"; } 483 | 484 | .ion-forward:before { content: "\f13a"; } 485 | 486 | .ion-funnel:before { content: "\f31b"; } 487 | 488 | .ion-gear-a:before { content: "\f13d"; } 489 | 490 | .ion-gear-b:before { content: "\f13e"; } 491 | 492 | .ion-grid:before { content: "\f13f"; } 493 | 494 | .ion-hammer:before { content: "\f27b"; } 495 | 496 | .ion-happy:before { content: "\f31c"; } 497 | 498 | .ion-happy-outline:before { content: "\f3c6"; } 499 | 500 | .ion-headphone:before { content: "\f140"; } 501 | 502 | .ion-heart:before { content: "\f141"; } 503 | 504 | .ion-heart-broken:before { content: "\f31d"; } 505 | 506 | .ion-help:before { content: "\f143"; } 507 | 508 | .ion-help-buoy:before { content: "\f27c"; } 509 | 510 | .ion-help-circled:before { content: "\f142"; } 511 | 512 | .ion-home:before { content: "\f144"; } 513 | 514 | .ion-icecream:before { content: "\f27d"; } 515 | 516 | .ion-image:before { content: "\f147"; } 517 | 518 | .ion-images:before { content: "\f148"; } 519 | 520 | .ion-information:before { content: "\f14a"; } 521 | 522 | .ion-information-circled:before { content: "\f149"; } 523 | 524 | .ion-ionic:before { content: "\f14b"; } 525 | 526 | .ion-ios-alarm:before { content: "\f3c8"; } 527 | 528 | .ion-ios-alarm-outline:before { content: "\f3c7"; } 529 | 530 | .ion-ios-albums:before { content: "\f3ca"; } 531 | 532 | .ion-ios-albums-outline:before { content: "\f3c9"; } 533 | 534 | .ion-ios-americanfootball:before { content: "\f3cc"; } 535 | 536 | .ion-ios-americanfootball-outline:before { content: "\f3cb"; } 537 | 538 | .ion-ios-analytics:before { content: "\f3ce"; } 539 | 540 | .ion-ios-analytics-outline:before { content: "\f3cd"; } 541 | 542 | .ion-ios-arrow-back:before { content: "\f3cf"; } 543 | 544 | .ion-ios-arrow-down:before { content: "\f3d0"; } 545 | 546 | .ion-ios-arrow-forward:before { content: "\f3d1"; } 547 | 548 | .ion-ios-arrow-left:before { content: "\f3d2"; } 549 | 550 | .ion-ios-arrow-right:before { content: "\f3d3"; } 551 | 552 | .ion-ios-arrow-thin-down:before { content: "\f3d4"; } 553 | 554 | .ion-ios-arrow-thin-left:before { content: "\f3d5"; } 555 | 556 | .ion-ios-arrow-thin-right:before { content: "\f3d6"; } 557 | 558 | .ion-ios-arrow-thin-up:before { content: "\f3d7"; } 559 | 560 | .ion-ios-arrow-up:before { content: "\f3d8"; } 561 | 562 | .ion-ios-at:before { content: "\f3da"; } 563 | 564 | .ion-ios-at-outline:before { content: "\f3d9"; } 565 | 566 | .ion-ios-barcode:before { content: "\f3dc"; } 567 | 568 | .ion-ios-barcode-outline:before { content: "\f3db"; } 569 | 570 | .ion-ios-baseball:before { content: "\f3de"; } 571 | 572 | .ion-ios-baseball-outline:before { content: "\f3dd"; } 573 | 574 | .ion-ios-basketball:before { content: "\f3e0"; } 575 | 576 | .ion-ios-basketball-outline:before { content: "\f3df"; } 577 | 578 | .ion-ios-bell:before { content: "\f3e2"; } 579 | 580 | .ion-ios-bell-outline:before { content: "\f3e1"; } 581 | 582 | .ion-ios-body:before { content: "\f3e4"; } 583 | 584 | .ion-ios-body-outline:before { content: "\f3e3"; } 585 | 586 | .ion-ios-bolt:before { content: "\f3e6"; } 587 | 588 | .ion-ios-bolt-outline:before { content: "\f3e5"; } 589 | 590 | .ion-ios-book:before { content: "\f3e8"; } 591 | 592 | .ion-ios-book-outline:before { content: "\f3e7"; } 593 | 594 | .ion-ios-bookmarks:before { content: "\f3ea"; } 595 | 596 | .ion-ios-bookmarks-outline:before { content: "\f3e9"; } 597 | 598 | .ion-ios-box:before { content: "\f3ec"; } 599 | 600 | .ion-ios-box-outline:before { content: "\f3eb"; } 601 | 602 | .ion-ios-briefcase:before { content: "\f3ee"; } 603 | 604 | .ion-ios-briefcase-outline:before { content: "\f3ed"; } 605 | 606 | .ion-ios-browsers:before { content: "\f3f0"; } 607 | 608 | .ion-ios-browsers-outline:before { content: "\f3ef"; } 609 | 610 | .ion-ios-calculator:before { content: "\f3f2"; } 611 | 612 | .ion-ios-calculator-outline:before { content: "\f3f1"; } 613 | 614 | .ion-ios-calendar:before { content: "\f3f4"; } 615 | 616 | .ion-ios-calendar-outline:before { content: "\f3f3"; } 617 | 618 | .ion-ios-camera:before { content: "\f3f6"; } 619 | 620 | .ion-ios-camera-outline:before { content: "\f3f5"; } 621 | 622 | .ion-ios-cart:before { content: "\f3f8"; } 623 | 624 | .ion-ios-cart-outline:before { content: "\f3f7"; } 625 | 626 | .ion-ios-chatboxes:before { content: "\f3fa"; } 627 | 628 | .ion-ios-chatboxes-outline:before { content: "\f3f9"; } 629 | 630 | .ion-ios-chatbubble:before { content: "\f3fc"; } 631 | 632 | .ion-ios-chatbubble-outline:before { content: "\f3fb"; } 633 | 634 | .ion-ios-checkmark:before { content: "\f3ff"; } 635 | 636 | .ion-ios-checkmark-empty:before { content: "\f3fd"; } 637 | 638 | .ion-ios-checkmark-outline:before { content: "\f3fe"; } 639 | 640 | .ion-ios-circle-filled:before { content: "\f400"; } 641 | 642 | .ion-ios-circle-outline:before { content: "\f401"; } 643 | 644 | .ion-ios-clock:before { content: "\f403"; } 645 | 646 | .ion-ios-clock-outline:before { content: "\f402"; } 647 | 648 | .ion-ios-close:before { content: "\f406"; } 649 | 650 | .ion-ios-close-empty:before { content: "\f404"; } 651 | 652 | .ion-ios-close-outline:before { content: "\f405"; } 653 | 654 | .ion-ios-cloud:before { content: "\f40c"; } 655 | 656 | .ion-ios-cloud-download:before { content: "\f408"; } 657 | 658 | .ion-ios-cloud-download-outline:before { content: "\f407"; } 659 | 660 | .ion-ios-cloud-outline:before { content: "\f409"; } 661 | 662 | .ion-ios-cloud-upload:before { content: "\f40b"; } 663 | 664 | .ion-ios-cloud-upload-outline:before { content: "\f40a"; } 665 | 666 | .ion-ios-cloudy:before { content: "\f410"; } 667 | 668 | .ion-ios-cloudy-night:before { content: "\f40e"; } 669 | 670 | .ion-ios-cloudy-night-outline:before { content: "\f40d"; } 671 | 672 | .ion-ios-cloudy-outline:before { content: "\f40f"; } 673 | 674 | .ion-ios-cog:before { content: "\f412"; } 675 | 676 | .ion-ios-cog-outline:before { content: "\f411"; } 677 | 678 | .ion-ios-color-filter:before { content: "\f414"; } 679 | 680 | .ion-ios-color-filter-outline:before { content: "\f413"; } 681 | 682 | .ion-ios-color-wand:before { content: "\f416"; } 683 | 684 | .ion-ios-color-wand-outline:before { content: "\f415"; } 685 | 686 | .ion-ios-compose:before { content: "\f418"; } 687 | 688 | .ion-ios-compose-outline:before { content: "\f417"; } 689 | 690 | .ion-ios-contact:before { content: "\f41a"; } 691 | 692 | .ion-ios-contact-outline:before { content: "\f419"; } 693 | 694 | .ion-ios-copy:before { content: "\f41c"; } 695 | 696 | .ion-ios-copy-outline:before { content: "\f41b"; } 697 | 698 | .ion-ios-crop:before { content: "\f41e"; } 699 | 700 | .ion-ios-crop-strong:before { content: "\f41d"; } 701 | 702 | .ion-ios-download:before { content: "\f420"; } 703 | 704 | .ion-ios-download-outline:before { content: "\f41f"; } 705 | 706 | .ion-ios-drag:before { content: "\f421"; } 707 | 708 | .ion-ios-email:before { content: "\f423"; } 709 | 710 | .ion-ios-email-outline:before { content: "\f422"; } 711 | 712 | .ion-ios-eye:before { content: "\f425"; } 713 | 714 | .ion-ios-eye-outline:before { content: "\f424"; } 715 | 716 | .ion-ios-fastforward:before { content: "\f427"; } 717 | 718 | .ion-ios-fastforward-outline:before { content: "\f426"; } 719 | 720 | .ion-ios-filing:before { content: "\f429"; } 721 | 722 | .ion-ios-filing-outline:before { content: "\f428"; } 723 | 724 | .ion-ios-film:before { content: "\f42b"; } 725 | 726 | .ion-ios-film-outline:before { content: "\f42a"; } 727 | 728 | .ion-ios-flag:before { content: "\f42d"; } 729 | 730 | .ion-ios-flag-outline:before { content: "\f42c"; } 731 | 732 | .ion-ios-flame:before { content: "\f42f"; } 733 | 734 | .ion-ios-flame-outline:before { content: "\f42e"; } 735 | 736 | .ion-ios-flask:before { content: "\f431"; } 737 | 738 | .ion-ios-flask-outline:before { content: "\f430"; } 739 | 740 | .ion-ios-flower:before { content: "\f433"; } 741 | 742 | .ion-ios-flower-outline:before { content: "\f432"; } 743 | 744 | .ion-ios-folder:before { content: "\f435"; } 745 | 746 | .ion-ios-folder-outline:before { content: "\f434"; } 747 | 748 | .ion-ios-football:before { content: "\f437"; } 749 | 750 | .ion-ios-football-outline:before { content: "\f436"; } 751 | 752 | .ion-ios-game-controller-a:before { content: "\f439"; } 753 | 754 | .ion-ios-game-controller-a-outline:before { content: "\f438"; } 755 | 756 | .ion-ios-game-controller-b:before { content: "\f43b"; } 757 | 758 | .ion-ios-game-controller-b-outline:before { content: "\f43a"; } 759 | 760 | .ion-ios-gear:before { content: "\f43d"; } 761 | 762 | .ion-ios-gear-outline:before { content: "\f43c"; } 763 | 764 | .ion-ios-glasses:before { content: "\f43f"; } 765 | 766 | .ion-ios-glasses-outline:before { content: "\f43e"; } 767 | 768 | .ion-ios-grid-view:before { content: "\f441"; } 769 | 770 | .ion-ios-grid-view-outline:before { content: "\f440"; } 771 | 772 | .ion-ios-heart:before { content: "\f443"; } 773 | 774 | .ion-ios-heart-outline:before { content: "\f442"; } 775 | 776 | .ion-ios-help:before { content: "\f446"; } 777 | 778 | .ion-ios-help-empty:before { content: "\f444"; } 779 | 780 | .ion-ios-help-outline:before { content: "\f445"; } 781 | 782 | .ion-ios-home:before { content: "\f448"; } 783 | 784 | .ion-ios-home-outline:before { content: "\f447"; } 785 | 786 | .ion-ios-infinite:before { content: "\f44a"; } 787 | 788 | .ion-ios-infinite-outline:before { content: "\f449"; } 789 | 790 | .ion-ios-information:before { content: "\f44d"; } 791 | 792 | .ion-ios-information-empty:before { content: "\f44b"; } 793 | 794 | .ion-ios-information-outline:before { content: "\f44c"; } 795 | 796 | .ion-ios-ionic-outline:before { content: "\f44e"; } 797 | 798 | .ion-ios-keypad:before { content: "\f450"; } 799 | 800 | .ion-ios-keypad-outline:before { content: "\f44f"; } 801 | 802 | .ion-ios-lightbulb:before { content: "\f452"; } 803 | 804 | .ion-ios-lightbulb-outline:before { content: "\f451"; } 805 | 806 | .ion-ios-list:before { content: "\f454"; } 807 | 808 | .ion-ios-list-outline:before { content: "\f453"; } 809 | 810 | .ion-ios-location:before { content: "\f456"; } 811 | 812 | .ion-ios-location-outline:before { content: "\f455"; } 813 | 814 | .ion-ios-locked:before { content: "\f458"; } 815 | 816 | .ion-ios-locked-outline:before { content: "\f457"; } 817 | 818 | .ion-ios-loop:before { content: "\f45a"; } 819 | 820 | .ion-ios-loop-strong:before { content: "\f459"; } 821 | 822 | .ion-ios-medical:before { content: "\f45c"; } 823 | 824 | .ion-ios-medical-outline:before { content: "\f45b"; } 825 | 826 | .ion-ios-medkit:before { content: "\f45e"; } 827 | 828 | .ion-ios-medkit-outline:before { content: "\f45d"; } 829 | 830 | .ion-ios-mic:before { content: "\f461"; } 831 | 832 | .ion-ios-mic-off:before { content: "\f45f"; } 833 | 834 | .ion-ios-mic-outline:before { content: "\f460"; } 835 | 836 | .ion-ios-minus:before { content: "\f464"; } 837 | 838 | .ion-ios-minus-empty:before { content: "\f462"; } 839 | 840 | .ion-ios-minus-outline:before { content: "\f463"; } 841 | 842 | .ion-ios-monitor:before { content: "\f466"; } 843 | 844 | .ion-ios-monitor-outline:before { content: "\f465"; } 845 | 846 | .ion-ios-moon:before { content: "\f468"; } 847 | 848 | .ion-ios-moon-outline:before { content: "\f467"; } 849 | 850 | .ion-ios-more:before { content: "\f46a"; } 851 | 852 | .ion-ios-more-outline:before { content: "\f469"; } 853 | 854 | .ion-ios-musical-note:before { content: "\f46b"; } 855 | 856 | .ion-ios-musical-notes:before { content: "\f46c"; } 857 | 858 | .ion-ios-navigate:before { content: "\f46e"; } 859 | 860 | .ion-ios-navigate-outline:before { content: "\f46d"; } 861 | 862 | .ion-ios-nutrition:before { content: "\f470"; } 863 | 864 | .ion-ios-nutrition-outline:before { content: "\f46f"; } 865 | 866 | .ion-ios-paper:before { content: "\f472"; } 867 | 868 | .ion-ios-paper-outline:before { content: "\f471"; } 869 | 870 | .ion-ios-paperplane:before { content: "\f474"; } 871 | 872 | .ion-ios-paperplane-outline:before { content: "\f473"; } 873 | 874 | .ion-ios-partlysunny:before { content: "\f476"; } 875 | 876 | .ion-ios-partlysunny-outline:before { content: "\f475"; } 877 | 878 | .ion-ios-pause:before { content: "\f478"; } 879 | 880 | .ion-ios-pause-outline:before { content: "\f477"; } 881 | 882 | .ion-ios-paw:before { content: "\f47a"; } 883 | 884 | .ion-ios-paw-outline:before { content: "\f479"; } 885 | 886 | .ion-ios-people:before { content: "\f47c"; } 887 | 888 | .ion-ios-people-outline:before { content: "\f47b"; } 889 | 890 | .ion-ios-person:before { content: "\f47e"; } 891 | 892 | .ion-ios-person-outline:before { content: "\f47d"; } 893 | 894 | .ion-ios-personadd:before { content: "\f480"; } 895 | 896 | .ion-ios-personadd-outline:before { content: "\f47f"; } 897 | 898 | .ion-ios-photos:before { content: "\f482"; } 899 | 900 | .ion-ios-photos-outline:before { content: "\f481"; } 901 | 902 | .ion-ios-pie:before { content: "\f484"; } 903 | 904 | .ion-ios-pie-outline:before { content: "\f483"; } 905 | 906 | .ion-ios-pint:before { content: "\f486"; } 907 | 908 | .ion-ios-pint-outline:before { content: "\f485"; } 909 | 910 | .ion-ios-play:before { content: "\f488"; } 911 | 912 | .ion-ios-play-outline:before { content: "\f487"; } 913 | 914 | .ion-ios-plus:before { content: "\f48b"; } 915 | 916 | .ion-ios-plus-empty:before { content: "\f489"; } 917 | 918 | .ion-ios-plus-outline:before { content: "\f48a"; } 919 | 920 | .ion-ios-pricetag:before { content: "\f48d"; } 921 | 922 | .ion-ios-pricetag-outline:before { content: "\f48c"; } 923 | 924 | .ion-ios-pricetags:before { content: "\f48f"; } 925 | 926 | .ion-ios-pricetags-outline:before { content: "\f48e"; } 927 | 928 | .ion-ios-printer:before { content: "\f491"; } 929 | 930 | .ion-ios-printer-outline:before { content: "\f490"; } 931 | 932 | .ion-ios-pulse:before { content: "\f493"; } 933 | 934 | .ion-ios-pulse-strong:before { content: "\f492"; } 935 | 936 | .ion-ios-rainy:before { content: "\f495"; } 937 | 938 | .ion-ios-rainy-outline:before { content: "\f494"; } 939 | 940 | .ion-ios-recording:before { content: "\f497"; } 941 | 942 | .ion-ios-recording-outline:before { content: "\f496"; } 943 | 944 | .ion-ios-redo:before { content: "\f499"; } 945 | 946 | .ion-ios-redo-outline:before { content: "\f498"; } 947 | 948 | .ion-ios-refresh:before { content: "\f49c"; } 949 | 950 | .ion-ios-refresh-empty:before { content: "\f49a"; } 951 | 952 | .ion-ios-refresh-outline:before { content: "\f49b"; } 953 | 954 | .ion-ios-reload:before { content: "\f49d"; } 955 | 956 | .ion-ios-reverse-camera:before { content: "\f49f"; } 957 | 958 | .ion-ios-reverse-camera-outline:before { content: "\f49e"; } 959 | 960 | .ion-ios-rewind:before { content: "\f4a1"; } 961 | 962 | .ion-ios-rewind-outline:before { content: "\f4a0"; } 963 | 964 | .ion-ios-rose:before { content: "\f4a3"; } 965 | 966 | .ion-ios-rose-outline:before { content: "\f4a2"; } 967 | 968 | .ion-ios-search:before { content: "\f4a5"; } 969 | 970 | .ion-ios-search-strong:before { content: "\f4a4"; } 971 | 972 | .ion-ios-settings:before { content: "\f4a7"; } 973 | 974 | .ion-ios-settings-strong:before { content: "\f4a6"; } 975 | 976 | .ion-ios-shuffle:before { content: "\f4a9"; } 977 | 978 | .ion-ios-shuffle-strong:before { content: "\f4a8"; } 979 | 980 | .ion-ios-skipbackward:before { content: "\f4ab"; } 981 | 982 | .ion-ios-skipbackward-outline:before { content: "\f4aa"; } 983 | 984 | .ion-ios-skipforward:before { content: "\f4ad"; } 985 | 986 | .ion-ios-skipforward-outline:before { content: "\f4ac"; } 987 | 988 | .ion-ios-snowy:before { content: "\f4ae"; } 989 | 990 | .ion-ios-speedometer:before { content: "\f4b0"; } 991 | 992 | .ion-ios-speedometer-outline:before { content: "\f4af"; } 993 | 994 | .ion-ios-star:before { content: "\f4b3"; } 995 | 996 | .ion-ios-star-half:before { content: "\f4b1"; } 997 | 998 | .ion-ios-star-outline:before { content: "\f4b2"; } 999 | 1000 | .ion-ios-stopwatch:before { content: "\f4b5"; } 1001 | 1002 | .ion-ios-stopwatch-outline:before { content: "\f4b4"; } 1003 | 1004 | .ion-ios-sunny:before { content: "\f4b7"; } 1005 | 1006 | .ion-ios-sunny-outline:before { content: "\f4b6"; } 1007 | 1008 | .ion-ios-telephone:before { content: "\f4b9"; } 1009 | 1010 | .ion-ios-telephone-outline:before { content: "\f4b8"; } 1011 | 1012 | .ion-ios-tennisball:before { content: "\f4bb"; } 1013 | 1014 | .ion-ios-tennisball-outline:before { content: "\f4ba"; } 1015 | 1016 | .ion-ios-thunderstorm:before { content: "\f4bd"; } 1017 | 1018 | .ion-ios-thunderstorm-outline:before { content: "\f4bc"; } 1019 | 1020 | .ion-ios-time:before { content: "\f4bf"; } 1021 | 1022 | .ion-ios-time-outline:before { content: "\f4be"; } 1023 | 1024 | .ion-ios-timer:before { content: "\f4c1"; } 1025 | 1026 | .ion-ios-timer-outline:before { content: "\f4c0"; } 1027 | 1028 | .ion-ios-toggle:before { content: "\f4c3"; } 1029 | 1030 | .ion-ios-toggle-outline:before { content: "\f4c2"; } 1031 | 1032 | .ion-ios-trash:before { content: "\f4c5"; } 1033 | 1034 | .ion-ios-trash-outline:before { content: "\f4c4"; } 1035 | 1036 | .ion-ios-undo:before { content: "\f4c7"; } 1037 | 1038 | .ion-ios-undo-outline:before { content: "\f4c6"; } 1039 | 1040 | .ion-ios-unlocked:before { content: "\f4c9"; } 1041 | 1042 | .ion-ios-unlocked-outline:before { content: "\f4c8"; } 1043 | 1044 | .ion-ios-upload:before { content: "\f4cb"; } 1045 | 1046 | .ion-ios-upload-outline:before { content: "\f4ca"; } 1047 | 1048 | .ion-ios-videocam:before { content: "\f4cd"; } 1049 | 1050 | .ion-ios-videocam-outline:before { content: "\f4cc"; } 1051 | 1052 | .ion-ios-volume-high:before { content: "\f4ce"; } 1053 | 1054 | .ion-ios-volume-low:before { content: "\f4cf"; } 1055 | 1056 | .ion-ios-wineglass:before { content: "\f4d1"; } 1057 | 1058 | .ion-ios-wineglass-outline:before { content: "\f4d0"; } 1059 | 1060 | .ion-ios-world:before { content: "\f4d3"; } 1061 | 1062 | .ion-ios-world-outline:before { content: "\f4d2"; } 1063 | 1064 | .ion-ipad:before { content: "\f1f9"; } 1065 | 1066 | .ion-iphone:before { content: "\f1fa"; } 1067 | 1068 | .ion-ipod:before { content: "\f1fb"; } 1069 | 1070 | .ion-jet:before { content: "\f295"; } 1071 | 1072 | .ion-key:before { content: "\f296"; } 1073 | 1074 | .ion-knife:before { content: "\f297"; } 1075 | 1076 | .ion-laptop:before { content: "\f1fc"; } 1077 | 1078 | .ion-leaf:before { content: "\f1fd"; } 1079 | 1080 | .ion-levels:before { content: "\f298"; } 1081 | 1082 | .ion-lightbulb:before { content: "\f299"; } 1083 | 1084 | .ion-link:before { content: "\f1fe"; } 1085 | 1086 | .ion-load-a:before { content: "\f29a"; } 1087 | 1088 | .ion-load-b:before { content: "\f29b"; } 1089 | 1090 | .ion-load-c:before { content: "\f29c"; } 1091 | 1092 | .ion-load-d:before { content: "\f29d"; } 1093 | 1094 | .ion-location:before { content: "\f1ff"; } 1095 | 1096 | .ion-lock-combination:before { content: "\f4d4"; } 1097 | 1098 | .ion-locked:before { content: "\f200"; } 1099 | 1100 | .ion-log-in:before { content: "\f29e"; } 1101 | 1102 | .ion-log-out:before { content: "\f29f"; } 1103 | 1104 | .ion-loop:before { content: "\f201"; } 1105 | 1106 | .ion-magnet:before { content: "\f2a0"; } 1107 | 1108 | .ion-male:before { content: "\f2a1"; } 1109 | 1110 | .ion-man:before { content: "\f202"; } 1111 | 1112 | .ion-map:before { content: "\f203"; } 1113 | 1114 | .ion-medkit:before { content: "\f2a2"; } 1115 | 1116 | .ion-merge:before { content: "\f33f"; } 1117 | 1118 | .ion-mic-a:before { content: "\f204"; } 1119 | 1120 | .ion-mic-b:before { content: "\f205"; } 1121 | 1122 | .ion-mic-c:before { content: "\f206"; } 1123 | 1124 | .ion-minus:before { content: "\f209"; } 1125 | 1126 | .ion-minus-circled:before { content: "\f207"; } 1127 | 1128 | .ion-minus-round:before { content: "\f208"; } 1129 | 1130 | .ion-model-s:before { content: "\f2c1"; } 1131 | 1132 | .ion-monitor:before { content: "\f20a"; } 1133 | 1134 | .ion-more:before { content: "\f20b"; } 1135 | 1136 | .ion-mouse:before { content: "\f340"; } 1137 | 1138 | .ion-music-note:before { content: "\f20c"; } 1139 | 1140 | .ion-navicon:before { content: "\f20e"; } 1141 | 1142 | .ion-navicon-round:before { content: "\f20d"; } 1143 | 1144 | .ion-navigate:before { content: "\f2a3"; } 1145 | 1146 | .ion-network:before { content: "\f341"; } 1147 | 1148 | .ion-no-smoking:before { content: "\f2c2"; } 1149 | 1150 | .ion-nuclear:before { content: "\f2a4"; } 1151 | 1152 | .ion-outlet:before { content: "\f342"; } 1153 | 1154 | .ion-paintbrush:before { content: "\f4d5"; } 1155 | 1156 | .ion-paintbucket:before { content: "\f4d6"; } 1157 | 1158 | .ion-paper-airplane:before { content: "\f2c3"; } 1159 | 1160 | .ion-paperclip:before { content: "\f20f"; } 1161 | 1162 | .ion-pause:before { content: "\f210"; } 1163 | 1164 | .ion-person:before { content: "\f213"; } 1165 | 1166 | .ion-person-add:before { content: "\f211"; } 1167 | 1168 | .ion-person-stalker:before { content: "\f212"; } 1169 | 1170 | .ion-pie-graph:before { content: "\f2a5"; } 1171 | 1172 | .ion-pin:before { content: "\f2a6"; } 1173 | 1174 | .ion-pinpoint:before { content: "\f2a7"; } 1175 | 1176 | .ion-pizza:before { content: "\f2a8"; } 1177 | 1178 | .ion-plane:before { content: "\f214"; } 1179 | 1180 | .ion-planet:before { content: "\f343"; } 1181 | 1182 | .ion-play:before { content: "\f215"; } 1183 | 1184 | .ion-playstation:before { content: "\f30a"; } 1185 | 1186 | .ion-plus:before { content: "\f218"; } 1187 | 1188 | .ion-plus-circled:before { content: "\f216"; } 1189 | 1190 | .ion-plus-round:before { content: "\f217"; } 1191 | 1192 | .ion-podium:before { content: "\f344"; } 1193 | 1194 | .ion-pound:before { content: "\f219"; } 1195 | 1196 | .ion-power:before { content: "\f2a9"; } 1197 | 1198 | .ion-pricetag:before { content: "\f2aa"; } 1199 | 1200 | .ion-pricetags:before { content: "\f2ab"; } 1201 | 1202 | .ion-printer:before { content: "\f21a"; } 1203 | 1204 | .ion-pull-request:before { content: "\f345"; } 1205 | 1206 | .ion-qr-scanner:before { content: "\f346"; } 1207 | 1208 | .ion-quote:before { content: "\f347"; } 1209 | 1210 | .ion-radio-waves:before { content: "\f2ac"; } 1211 | 1212 | .ion-record:before { content: "\f21b"; } 1213 | 1214 | .ion-refresh:before { content: "\f21c"; } 1215 | 1216 | .ion-reply:before { content: "\f21e"; } 1217 | 1218 | .ion-reply-all:before { content: "\f21d"; } 1219 | 1220 | .ion-ribbon-a:before { content: "\f348"; } 1221 | 1222 | .ion-ribbon-b:before { content: "\f349"; } 1223 | 1224 | .ion-sad:before { content: "\f34a"; } 1225 | 1226 | .ion-sad-outline:before { content: "\f4d7"; } 1227 | 1228 | .ion-scissors:before { content: "\f34b"; } 1229 | 1230 | .ion-search:before { content: "\f21f"; } 1231 | 1232 | .ion-settings:before { content: "\f2ad"; } 1233 | 1234 | .ion-share:before { content: "\f220"; } 1235 | 1236 | .ion-shuffle:before { content: "\f221"; } 1237 | 1238 | .ion-skip-backward:before { content: "\f222"; } 1239 | 1240 | .ion-skip-forward:before { content: "\f223"; } 1241 | 1242 | .ion-social-android:before { content: "\f225"; } 1243 | 1244 | .ion-social-android-outline:before { content: "\f224"; } 1245 | 1246 | .ion-social-angular:before { content: "\f4d9"; } 1247 | 1248 | .ion-social-angular-outline:before { content: "\f4d8"; } 1249 | 1250 | .ion-social-apple:before { content: "\f227"; } 1251 | 1252 | .ion-social-apple-outline:before { content: "\f226"; } 1253 | 1254 | .ion-social-bitcoin:before { content: "\f2af"; } 1255 | 1256 | .ion-social-bitcoin-outline:before { content: "\f2ae"; } 1257 | 1258 | .ion-social-buffer:before { content: "\f229"; } 1259 | 1260 | .ion-social-buffer-outline:before { content: "\f228"; } 1261 | 1262 | .ion-social-chrome:before { content: "\f4db"; } 1263 | 1264 | .ion-social-chrome-outline:before { content: "\f4da"; } 1265 | 1266 | .ion-social-codepen:before { content: "\f4dd"; } 1267 | 1268 | .ion-social-codepen-outline:before { content: "\f4dc"; } 1269 | 1270 | .ion-social-css3:before { content: "\f4df"; } 1271 | 1272 | .ion-social-css3-outline:before { content: "\f4de"; } 1273 | 1274 | .ion-social-designernews:before { content: "\f22b"; } 1275 | 1276 | .ion-social-designernews-outline:before { content: "\f22a"; } 1277 | 1278 | .ion-social-dribbble:before { content: "\f22d"; } 1279 | 1280 | .ion-social-dribbble-outline:before { content: "\f22c"; } 1281 | 1282 | .ion-social-dropbox:before { content: "\f22f"; } 1283 | 1284 | .ion-social-dropbox-outline:before { content: "\f22e"; } 1285 | 1286 | .ion-social-euro:before { content: "\f4e1"; } 1287 | 1288 | .ion-social-euro-outline:before { content: "\f4e0"; } 1289 | 1290 | .ion-social-facebook:before { content: "\f231"; } 1291 | 1292 | .ion-social-facebook-outline:before { content: "\f230"; } 1293 | 1294 | .ion-social-foursquare:before { content: "\f34d"; } 1295 | 1296 | .ion-social-foursquare-outline:before { content: "\f34c"; } 1297 | 1298 | .ion-social-freebsd-devil:before { content: "\f2c4"; } 1299 | 1300 | .ion-social-github:before { content: "\f233"; } 1301 | 1302 | .ion-social-github-outline:before { content: "\f232"; } 1303 | 1304 | .ion-social-google:before { content: "\f34f"; } 1305 | 1306 | .ion-social-google-outline:before { content: "\f34e"; } 1307 | 1308 | .ion-social-googleplus:before { content: "\f235"; } 1309 | 1310 | .ion-social-googleplus-outline:before { content: "\f234"; } 1311 | 1312 | .ion-social-hackernews:before { content: "\f237"; } 1313 | 1314 | .ion-social-hackernews-outline:before { content: "\f236"; } 1315 | 1316 | .ion-social-html5:before { content: "\f4e3"; } 1317 | 1318 | .ion-social-html5-outline:before { content: "\f4e2"; } 1319 | 1320 | .ion-social-instagram:before { content: "\f351"; } 1321 | 1322 | .ion-social-instagram-outline:before { content: "\f350"; } 1323 | 1324 | .ion-social-javascript:before { content: "\f4e5"; } 1325 | 1326 | .ion-social-javascript-outline:before { content: "\f4e4"; } 1327 | 1328 | .ion-social-linkedin:before { content: "\f239"; } 1329 | 1330 | .ion-social-linkedin-outline:before { content: "\f238"; } 1331 | 1332 | .ion-social-markdown:before { content: "\f4e6"; } 1333 | 1334 | .ion-social-nodejs:before { content: "\f4e7"; } 1335 | 1336 | .ion-social-octocat:before { content: "\f4e8"; } 1337 | 1338 | .ion-social-pinterest:before { content: "\f2b1"; } 1339 | 1340 | .ion-social-pinterest-outline:before { content: "\f2b0"; } 1341 | 1342 | .ion-social-python:before { content: "\f4e9"; } 1343 | 1344 | .ion-social-reddit:before { content: "\f23b"; } 1345 | 1346 | .ion-social-reddit-outline:before { content: "\f23a"; } 1347 | 1348 | .ion-social-rss:before { content: "\f23d"; } 1349 | 1350 | .ion-social-rss-outline:before { content: "\f23c"; } 1351 | 1352 | .ion-social-sass:before { content: "\f4ea"; } 1353 | 1354 | .ion-social-skype:before { content: "\f23f"; } 1355 | 1356 | .ion-social-skype-outline:before { content: "\f23e"; } 1357 | 1358 | .ion-social-snapchat:before { content: "\f4ec"; } 1359 | 1360 | .ion-social-snapchat-outline:before { content: "\f4eb"; } 1361 | 1362 | .ion-social-tumblr:before { content: "\f241"; } 1363 | 1364 | .ion-social-tumblr-outline:before { content: "\f240"; } 1365 | 1366 | .ion-social-tux:before { content: "\f2c5"; } 1367 | 1368 | .ion-social-twitch:before { content: "\f4ee"; } 1369 | 1370 | .ion-social-twitch-outline:before { content: "\f4ed"; } 1371 | 1372 | .ion-social-twitter:before { content: "\f243"; } 1373 | 1374 | .ion-social-twitter-outline:before { content: "\f242"; } 1375 | 1376 | .ion-social-usd:before { content: "\f353"; } 1377 | 1378 | .ion-social-usd-outline:before { content: "\f352"; } 1379 | 1380 | .ion-social-vimeo:before { content: "\f245"; } 1381 | 1382 | .ion-social-vimeo-outline:before { content: "\f244"; } 1383 | 1384 | .ion-social-whatsapp:before { content: "\f4f0"; } 1385 | 1386 | .ion-social-whatsapp-outline:before { content: "\f4ef"; } 1387 | 1388 | .ion-social-windows:before { content: "\f247"; } 1389 | 1390 | .ion-social-windows-outline:before { content: "\f246"; } 1391 | 1392 | .ion-social-wordpress:before { content: "\f249"; } 1393 | 1394 | .ion-social-wordpress-outline:before { content: "\f248"; } 1395 | 1396 | .ion-social-yahoo:before { content: "\f24b"; } 1397 | 1398 | .ion-social-yahoo-outline:before { content: "\f24a"; } 1399 | 1400 | .ion-social-yen:before { content: "\f4f2"; } 1401 | 1402 | .ion-social-yen-outline:before { content: "\f4f1"; } 1403 | 1404 | .ion-social-youtube:before { content: "\f24d"; } 1405 | 1406 | .ion-social-youtube-outline:before { content: "\f24c"; } 1407 | 1408 | .ion-soup-can:before { content: "\f4f4"; } 1409 | 1410 | .ion-soup-can-outline:before { content: "\f4f3"; } 1411 | 1412 | .ion-speakerphone:before { content: "\f2b2"; } 1413 | 1414 | .ion-speedometer:before { content: "\f2b3"; } 1415 | 1416 | .ion-spoon:before { content: "\f2b4"; } 1417 | 1418 | .ion-star:before { content: "\f24e"; } 1419 | 1420 | .ion-stats-bars:before { content: "\f2b5"; } 1421 | 1422 | .ion-steam:before { content: "\f30b"; } 1423 | 1424 | .ion-stop:before { content: "\f24f"; } 1425 | 1426 | .ion-thermometer:before { content: "\f2b6"; } 1427 | 1428 | .ion-thumbsdown:before { content: "\f250"; } 1429 | 1430 | .ion-thumbsup:before { content: "\f251"; } 1431 | 1432 | .ion-toggle:before { content: "\f355"; } 1433 | 1434 | .ion-toggle-filled:before { content: "\f354"; } 1435 | 1436 | .ion-transgender:before { content: "\f4f5"; } 1437 | 1438 | .ion-trash-a:before { content: "\f252"; } 1439 | 1440 | .ion-trash-b:before { content: "\f253"; } 1441 | 1442 | .ion-trophy:before { content: "\f356"; } 1443 | 1444 | .ion-tshirt:before { content: "\f4f7"; } 1445 | 1446 | .ion-tshirt-outline:before { content: "\f4f6"; } 1447 | 1448 | .ion-umbrella:before { content: "\f2b7"; } 1449 | 1450 | .ion-university:before { content: "\f357"; } 1451 | 1452 | .ion-unlocked:before { content: "\f254"; } 1453 | 1454 | .ion-upload:before { content: "\f255"; } 1455 | 1456 | .ion-usb:before { content: "\f2b8"; } 1457 | 1458 | .ion-videocamera:before { content: "\f256"; } 1459 | 1460 | .ion-volume-high:before { content: "\f257"; } 1461 | 1462 | .ion-volume-low:before { content: "\f258"; } 1463 | 1464 | .ion-volume-medium:before { content: "\f259"; } 1465 | 1466 | .ion-volume-mute:before { content: "\f25a"; } 1467 | 1468 | .ion-wand:before { content: "\f358"; } 1469 | 1470 | .ion-waterdrop:before { content: "\f25b"; } 1471 | 1472 | .ion-wifi:before { content: "\f25c"; } 1473 | 1474 | .ion-wineglass:before { content: "\f2b9"; } 1475 | 1476 | .ion-woman:before { content: "\f25d"; } 1477 | 1478 | .ion-wrench:before { content: "\f2ba"; } 1479 | 1480 | .ion-xbox:before { content: "\f30c"; } 1481 | -------------------------------------------------------------------------------- /src/assets/fonts/ionicons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moedong/vue-wfcast/833cc62bd70b991d451579a8f9b7ae7bf676111c/src/assets/fonts/ionicons.eot -------------------------------------------------------------------------------- /src/assets/fonts/ionicons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moedong/vue-wfcast/833cc62bd70b991d451579a8f9b7ae7bf676111c/src/assets/fonts/ionicons.ttf -------------------------------------------------------------------------------- /src/assets/fonts/ionicons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moedong/vue-wfcast/833cc62bd70b991d451579a8f9b7ae7bf676111c/src/assets/fonts/ionicons.woff -------------------------------------------------------------------------------- /src/assets/fonts/weathericons-regular-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moedong/vue-wfcast/833cc62bd70b991d451579a8f9b7ae7bf676111c/src/assets/fonts/weathericons-regular-webfont.eot -------------------------------------------------------------------------------- /src/assets/fonts/weathericons-regular-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moedong/vue-wfcast/833cc62bd70b991d451579a8f9b7ae7bf676111c/src/assets/fonts/weathericons-regular-webfont.ttf -------------------------------------------------------------------------------- /src/assets/fonts/weathericons-regular-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moedong/vue-wfcast/833cc62bd70b991d451579a8f9b7ae7bf676111c/src/assets/fonts/weathericons-regular-webfont.woff -------------------------------------------------------------------------------- /src/assets/life-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moedong/vue-wfcast/833cc62bd70b991d451579a8f9b7ae7bf676111c/src/assets/life-icon.png -------------------------------------------------------------------------------- /src/assets/lv1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moedong/vue-wfcast/833cc62bd70b991d451579a8f9b7ae7bf676111c/src/assets/lv1.png -------------------------------------------------------------------------------- /src/assets/lv2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moedong/vue-wfcast/833cc62bd70b991d451579a8f9b7ae7bf676111c/src/assets/lv2.png -------------------------------------------------------------------------------- /src/assets/lv3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moedong/vue-wfcast/833cc62bd70b991d451579a8f9b7ae7bf676111c/src/assets/lv3.png -------------------------------------------------------------------------------- /src/assets/lv4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moedong/vue-wfcast/833cc62bd70b991d451579a8f9b7ae7bf676111c/src/assets/lv4.png -------------------------------------------------------------------------------- /src/assets/lv5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moedong/vue-wfcast/833cc62bd70b991d451579a8f9b7ae7bf676111c/src/assets/lv5.png -------------------------------------------------------------------------------- /src/assets/lv6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moedong/vue-wfcast/833cc62bd70b991d451579a8f9b7ae7bf676111c/src/assets/lv6.png -------------------------------------------------------------------------------- /src/assets/lv7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moedong/vue-wfcast/833cc62bd70b991d451579a8f9b7ae7bf676111c/src/assets/lv7.png -------------------------------------------------------------------------------- /src/assets/weather-icon-414.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moedong/vue-wfcast/833cc62bd70b991d451579a8f9b7ae7bf676111c/src/assets/weather-icon-414.png -------------------------------------------------------------------------------- /src/components/Home.vue: -------------------------------------------------------------------------------- 1 | 94 | 95 | 96 | 254 | 255 | -------------------------------------------------------------------------------- /src/components/bar.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 45 | 46 | -------------------------------------------------------------------------------- /src/components/card.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | -------------------------------------------------------------------------------- /src/components/chooseCity.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 47 | 48 | -------------------------------------------------------------------------------- /src/components/details.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 73 | 74 | -------------------------------------------------------------------------------- /src/components/loading.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 16 | 17 | -------------------------------------------------------------------------------- /src/components/myfocus.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 102 | 103 | -------------------------------------------------------------------------------- /src/components/pannel.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 27 | 28 | 67 | -------------------------------------------------------------------------------- /src/libs/mixin.js: -------------------------------------------------------------------------------- 1 | import cityCode from '../libs/cityCode.json'; 2 | import cheerio from 'cheerio'; 3 | 4 | 5 | export default { 6 | methods: { 7 | getCity(city){ 8 | var weathername = { 9 | "00": "晴", 10 | "01": "多云", 11 | "02": "阴", 12 | "03": "阵雨", 13 | "04": "雷阵雨", 14 | "05": "雷阵雨伴有冰雹", 15 | "06": "雨夹雪", 16 | "07": "小雨", 17 | "08": "中雨", 18 | "09": "大雨", 19 | 10 : "暴雨", 20 | 11 : "大暴雨", 21 | 12 : "特大暴雨", 22 | 13 : "阵雪", 23 | 14 : "小雪", 24 | 15 : "中雪", 25 | 16 : "大雪", 26 | 17 : "暴雪", 27 | 18 : "雾", 28 | 19 : "冻雨", 29 | 20 : "沙尘暴", 30 | 21 : "小到中雨", 31 | 22 : "中到大雨", 32 | 23 : "大到暴雨", 33 | 24 : "暴雨到大暴雨", 34 | 25 : "大暴雨到特大暴雨", 35 | 26 : "小到中雪", 36 | 27 : "中到大雪", 37 | 28 : "大到暴雪", 38 | 29 : "浮尘", 39 | 30 : "扬沙", 40 | 31 : "强沙尘暴", 41 | 53 : "霾", 42 | 99 : "无", 43 | 32 : "浓雾", 44 | 49 : "强浓雾", 45 | 54 : "中度霾", 46 | 55 : "重度霾", 47 | 56 : "严重霾", 48 | 57 : "大雾", 49 | 58 : "特强浓雾", 50 | 301 : "雨", 51 | 302 : "雪" 52 | }; 53 | var _this=this; 54 | _this.city=city; 55 | 56 | return new Promise(function(resolve, reject) { 57 | 58 | !city && _this.axios.get('/iplookup/iplookup.php?format=json') 59 | .then(function (response) { 60 | //console.log(response.data.city); 61 | _this.city=response.data.city; 62 | 63 | resolve(); 64 | 65 | }).catch(function (error) { 66 | console.log('网络出错1'); 67 | }); 68 | 69 | !!city && resolve(); 70 | 71 | }).then(function() { 72 | 73 | return new Promise(function(resolve, reject) { 74 | 75 | var code=cityCode.find((n) => n.cityName==_this.city); 76 | //console.log(_this.city); 77 | 78 | //几天的天气 79 | _this.axios.get('/Heart/index/all?city='+code.townID+'&language=&unit=&aqi=&alarm=&key=') 80 | .then(function (response) { 81 | 82 | //当天 83 | _this.currentdata=response.data.weather[0]; 84 | var time=new Date(_this.currentdata.last_update); 85 | _this.lastUpdate=time.getHours()+':'+time.getMinutes(); 86 | 87 | Object.keys(weathername).forEach(function(key,index){ 88 | if(weathername[key]==_this.currentdata.now.text){ 89 | _this.bgImage='background-image:url(http://i.tq121.com.cn/i/wap2016/news/d'+key+'.jpg)' 90 | } 91 | }); 92 | 93 | //未来6天 94 | _this.daysData=_this.currentdata.future.map(function(x,index){ 95 | var _x=x; 96 | _x.index=index; 97 | if(new Date(_x.date).getDay()==new Date().getDay()){ 98 | _x.day='今天'; 99 | 100 | } 101 | 102 | _x.code={'a':'svnicon01'}; 103 | Object.keys(weathername).forEach(function(key,index){ 104 | if(weathername[key]==_x.text.split('/')[0]){ 105 | _x.code.b="weather-"+key; 106 | } 107 | if(weathername[key]==_x.text.split('/')[1]){ 108 | _x.code.c="weather-n"+key; 109 | } 110 | }); 111 | return _x; 112 | }); 113 | 114 | _this.option.series[0].data=[],_this.option.series[1].data=[]; 115 | _this.currentdata.future.forEach(function(val,index,arr){ 116 | _this.option.series[0].data.push(val.high); 117 | _this.option.series[1].data.push(val.low); 118 | }); 119 | 120 | resolve(); 121 | 122 | }) 123 | .catch(function (error) { 124 | console.log('网络出错2'); 125 | }); 126 | }); 127 | 128 | }).then(function(){ 129 | 130 | return new Promise(function(resolve, reject) { 131 | 132 | var code=cityCode.find((n) => n.cityName==_this.city); 133 | 134 | //未来24小时天气 135 | _this.axios.get('/Heart/index/future24h?city='+code.townID) 136 | .then(function (response) { 137 | var hour24Data=response.data; 138 | _this.hoursData=hour24Data.hourly.map(function(x){ 139 | var _x=x; 140 | _x.time=new Date(_x.time).getHours(); 141 | Object.keys(weathername).forEach(function(key,index){ 142 | if(weathername[key]==_x.text && _x.time>=19 && _x.time<=24){ 143 | _x.code={'a':'svnicon01','b':"weather-n"+key}; 144 | }else if(weathername[key]==_x.text && _x.time>=0 && _x.time<=6){ 145 | _x.code={'a':'svnicon01','b':"weather-n"+key}; 146 | }else if(weathername[key]==_x.text){ 147 | _x.code={'a':'svnicon01','b':"weather-"+key}; 148 | } 149 | }); 150 | return _x; 151 | }); 152 | resolve(); 153 | }) 154 | .catch(function (error) { 155 | console.log('网络出错3'); 156 | }); 157 | 158 | }); 159 | 160 | }).then(function(){ 161 | 162 | return new Promise(function(resolve, reject) { 163 | 164 | //爬取页面 2345天气王 165 | _this.axios.get('/t/searchCity.php?q='+_this.city) 166 | .then(function (response) { 167 | _this.catchUrl1=response.data.res[0].href; // dongguan/59289.htm 168 | _this.catchCityName1=_this.catchUrl1.split("/")[1]; 169 | _this.catchCityCode1=response.data.res[0].href.replace(/\S*\/(\d+).htm/,"$1"); 170 | //console.log(_this.catchCode); 171 | }) 172 | .then(function () { 173 | 174 | _this.axios.get("/html/"+_this.catchCityName1+"-"+_this.catchCityCode1+'.htm') 175 | .then(function (response) { 176 | var $ = cheerio.load(response.data); 177 | _this.todayLife=$('.today-life-index .bmeta').html(); 178 | //console.log($('.today-life-index').html()); 179 | 180 | resolve(); 181 | 182 | }) 183 | .catch(function (error) { 184 | console.log('网络出错5'); 185 | }); 186 | }) 187 | .catch(function (error) { 188 | console.log('网络出错4'); 189 | }); 190 | 191 | }); 192 | 193 | }).then(function(){ 194 | 195 | return new Promise(function(resolve, reject) { 196 | 197 | //爬取页面 围观天气 198 | _this.axios.get('/weaoo/weaoo.php?a=searchAreas&'+'v='+_this.city) 199 | .then(function (response) { 200 | _this.catchUrl2=response.data[0].link; // dongguan/59289.htm 201 | _this.catchCityName2=_this.catchUrl2.split("-")[0]; 202 | _this.catchCityCode2=response.data[0].link.replace(/\S*-(\d+).html/,"$1"); 203 | //console.log(_this.catchCode); 204 | }) 205 | .then(function () { 206 | 207 | _this.axios.get("/weaoo/"+_this.catchUrl2) 208 | .then(function (response) { 209 | var $ = cheerio.load(response.data); 210 | _this.arroundData=$('.city-weather-list').html(); 211 | //console.log($('.today-life-index').html()); 212 | 213 | resolve(); 214 | }) 215 | .catch(function (error) { 216 | console.log('网络出错7'); 217 | }); 218 | }) 219 | .catch(function (error) { 220 | console.log('网络出错6'); 221 | }); 222 | }); 223 | 224 | }).catch(function(error) { 225 | console.log(error) 226 | }); 227 | }, 228 | get15days(){ 229 | 230 | } 231 | } 232 | } 233 | -------------------------------------------------------------------------------- /src/libs/mixin2.js: -------------------------------------------------------------------------------- 1 | 2 | import cityCode from '../libs/cityCode.json'; 3 | import cheerio from 'cheerio'; 4 | 5 | 6 | export default { 7 | methods: { 8 | getWeather(){ 9 | var weathername = { 10 | "00": "晴", 11 | "01": "多云", 12 | "02": "阴", 13 | "03": "阵雨", 14 | "04": "雷阵雨", 15 | "05": "雷阵雨伴有冰雹", 16 | "06": "雨夹雪", 17 | "07": "小雨", 18 | "08": "中雨", 19 | "09": "大雨", 20 | 10 : "暴雨", 21 | 11 : "大暴雨", 22 | 12 : "特大暴雨", 23 | 13 : "阵雪", 24 | 14 : "小雪", 25 | 15 : "中雪", 26 | 16 : "大雪", 27 | 17 : "暴雪", 28 | 18 : "雾", 29 | 19 : "冻雨", 30 | 20 : "沙尘暴", 31 | 21 : "小到中雨", 32 | 22 : "中到大雨", 33 | 23 : "大到暴雨", 34 | 24 : "暴雨到大暴雨", 35 | 25 : "大暴雨到特大暴雨", 36 | 26 : "小到中雪", 37 | 27 : "中到大雪", 38 | 28 : "大到暴雪", 39 | 29 : "浮尘", 40 | 30 : "扬沙", 41 | 31 : "强沙尘暴", 42 | 53 : "霾", 43 | 99 : "无", 44 | 32 : "浓雾", 45 | 49 : "强浓雾", 46 | 54 : "中度霾", 47 | 55 : "重度霾", 48 | 56 : "严重霾", 49 | 57 : "大雾", 50 | 58 : "特强浓雾", 51 | 301 : "雨", 52 | 302 : "雪" 53 | }; 54 | var _this=this; 55 | 56 | var code=cityCode.find((n) => n.cityName==_this.city); 57 | 58 | return new Promise(function (resolve, reject) { 59 | 60 | _this.axios.get('/Heart/index/all?city='+code.townID+'&language=&unit=&aqi=&alarm=&key=') 61 | .then(function (response) { 62 | 63 | //当天 64 | _this.currentdata=response.data.weather[0]; 65 | Object.keys(weathername).forEach(function(key,index){ 66 | if(weathername[key]==_this.currentdata.now.text){ 67 | _this.wicon="weather-"+key; 68 | } 69 | }); 70 | resolve(); 71 | 72 | }) 73 | .catch(function (error) { 74 | console.log(error); 75 | }); 76 | 77 | }); 78 | 79 | }, 80 | autoRefresh(){ 81 | var weathername = { 82 | "00": "晴", 83 | "01": "多云", 84 | "02": "阴", 85 | "03": "阵雨", 86 | "04": "雷阵雨", 87 | "05": "雷阵雨伴有冰雹", 88 | "06": "雨夹雪", 89 | "07": "小雨", 90 | "08": "中雨", 91 | "09": "大雨", 92 | 10 : "暴雨", 93 | 11 : "大暴雨", 94 | 12 : "特大暴雨", 95 | 13 : "阵雪", 96 | 14 : "小雪", 97 | 15 : "中雪", 98 | 16 : "大雪", 99 | 17 : "暴雪", 100 | 18 : "雾", 101 | 19 : "冻雨", 102 | 20 : "沙尘暴", 103 | 21 : "小到中雨", 104 | 22 : "中到大雨", 105 | 23 : "大到暴雨", 106 | 24 : "暴雨到大暴雨", 107 | 25 : "大暴雨到特大暴雨", 108 | 26 : "小到中雪", 109 | 27 : "中到大雪", 110 | 28 : "大到暴雪", 111 | 29 : "浮尘", 112 | 30 : "扬沙", 113 | 31 : "强沙尘暴", 114 | 53 : "霾", 115 | 99 : "无", 116 | 32 : "浓雾", 117 | 49 : "强浓雾", 118 | 54 : "中度霾", 119 | 55 : "重度霾", 120 | 56 : "严重霾", 121 | 57 : "大雾", 122 | 58 : "特强浓雾", 123 | 301 : "雨", 124 | 302 : "雪" 125 | }; 126 | var _this=this; 127 | 128 | return new Promise(function (resolve, reject) { 129 | 130 | 131 | if(_this.citys.length!=0) { 132 | 133 | setInterval(()=>{ //半个小时更新一次 134 | 135 | var array=[].concat(_this.citys); 136 | 137 | array.forEach(function(value,index,arr){ 138 | 139 | var code=cityCode.find((n) => n.cityName==value.city); 140 | 141 | !!value.autoRefresh && _this.axios.get('/Heart/index/all?city='+code.townID+'&language=&unit=&aqi=&alarm=&key=') 142 | .then(function (response) { 143 | 144 | //当天 145 | var currentdata=response.data.weather[0]; 146 | value.temperature=currentdata.future[0].high+'° ~ '+currentdata.future[0].high+'°'; 147 | Object.keys(weathername).forEach(function(key,index){ 148 | if(weathername[key]==currentdata.now.text){ 149 | value.wicon="weather-"+key; 150 | } 151 | }); 152 | var time=new Date(currentdata.last_update); 153 | value.lastUpdate=time.getHours()+':'+time.getMinutes(); 154 | 155 | _this.curCitys.push(value); 156 | console.log(index,value.city,'更新成功'); 157 | if(index==arr.length-1){resolve()} 158 | 159 | }) 160 | .catch(function (error) { 161 | console.log(error); 162 | }); 163 | 164 | }); 165 | 166 | },1800000); 167 | } 168 | 169 | }); 170 | 171 | } 172 | } 173 | } 174 | -------------------------------------------------------------------------------- /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 App from './App' 5 | import router from './router' 6 | import axios from 'axios' 7 | import VueAxios from 'vue-axios' 8 | import echarts from 'echarts' 9 | import store from './vuex/store' 10 | 11 | Vue.use(VueAxios, axios) 12 | Vue.prototype.$echarts = echarts; 13 | 14 | Vue.config.productionTip = false 15 | 16 | /* eslint-disable no-new */ 17 | new Vue({ 18 | el: '#app', 19 | router, 20 | store, 21 | template: '', 22 | components: { App } 23 | }) 24 | -------------------------------------------------------------------------------- /src/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Router from 'vue-router' 3 | import Home from '@/components/Home' 4 | import details from '@/components/details' 5 | import myfocus from '@/components/myfocus' 6 | import chooseCity from '@/components/chooseCity' 7 | 8 | Vue.use(Router) 9 | 10 | export default new Router({ 11 | routes: [ 12 | { 13 | path:'/', 14 | name: '天气预报v1.0', 15 | component: function (resolve) { 16 | require(['../components/Home'], resolve) 17 | } 18 | }, 19 | { 20 | path: '/myfocus', 21 | name: '我的关注', 22 | component: myfocus 23 | }, 24 | { 25 | path: '/chooseCity', 26 | name: '城市切换', 27 | component: chooseCity 28 | }, 29 | { 30 | path: '/details', 31 | name: '详细指数', 32 | component: details 33 | } 34 | ] 35 | }) 36 | -------------------------------------------------------------------------------- /src/vuex/getters.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 这个 getter 函数会返回 count 的值 3 | * 在 ES6 里你可以这样写 4 | * export const getCount = state => state.count 5 | */ 6 | const getCount = state => state.count 7 | 8 | const citys = state => state.citys 9 | 10 | const fatherDire = state => state.fatherDire 11 | 12 | const curDire = state => state.curDire 13 | 14 | 15 | 16 | export { getCount,citys,fatherDire,curDire} 17 | -------------------------------------------------------------------------------- /src/vuex/store.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Vuex from 'vuex' 3 | import * as getters from './getters' 4 | 5 | // 使用 vuex 6 | Vue.use(Vuex) 7 | 8 | 9 | export const STORAGE_KEY = 'citys' 10 | 11 | // for testing 12 | if (navigator.userAgent.indexOf('PhantomJS') > -1) { 13 | window.localStorage.clear() 14 | } 15 | 16 | // 创建一个对象来保存应用启动时的初始状态 17 | const state = { 18 | // TODO 放置初始状态 19 | count: 0, 20 | citys:JSON.parse(window.localStorage.getItem(STORAGE_KEY) || '[]'), 21 | fatherDire:'', 22 | curDire:'/' 23 | } 24 | 25 | // 创建一个对象存储一系列我们接下来要写的 mutation 函数 26 | const mutations = { 27 | // TODO 放置我们的状态变更函数 28 | addCity (state, datas) { 29 | state.citys.push(datas); 30 | window.localStorage.setItem(datas.city, JSON.stringify(datas)); 31 | //console.log(state.citys); 32 | }, 33 | deleteCity(state,{city}){ 34 | state.citys.splice(state.citys.indexOf(city), 1); 35 | window.localStorage.removeItem(city.city); 36 | }, 37 | refreshCity(state,curCitys){ 38 | 39 | state.citys.forEach(function(value,index,array){ 40 | array[index]=curCitys[index]; 41 | }); 42 | }, 43 | changeDire(state,{fpath,cpath}){ 44 | 45 | state.fatherDire=fpath; 46 | state.curDire=cpath; 47 | 48 | }, 49 | initCity (state) { 50 | var storage = window.localStorage; 51 | state.citys=[]; 52 | for (var i=2, len = storage.length; i < len; i++){ 53 | var key = storage.key(i); 54 | state.citys.push(JSON.parse(storage.getItem(key))); 55 | } 56 | } 57 | 58 | } 59 | 60 | // 整合初始状态和变更函数，我们就得到了我们所需的 store 61 | // 至此，这个 store 就可以链接到我们的应用中 62 | export default new Vuex.Store({ 63 | getters,state, mutations 64 | }) -------------------------------------------------------------------------------- /static/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moedong/vue-wfcast/833cc62bd70b991d451579a8f9b7ae7bf676111c/static/.gitkeep --------------------------------------------------------------------------------