├── .babelrc ├── .editorconfig ├── .eslintrc.js ├── .gitignore ├── .prettierrc ├── .vscode └── settings.json ├── LICENSE ├── README.md ├── build ├── base.conf.js ├── build.prod.js ├── rem2px.js ├── webpack.dev.conf.js ├── webpack.dist.common.conf.js ├── webpack.dist.components.px.conf.js ├── webpack.dist.components.rem.conf.js └── webpack.dist.prod.conf.js ├── dist ├── lib.px │ ├── accordion │ │ └── index.js │ ├── actionsheet │ │ └── index.js │ ├── backtop │ │ └── index.js │ ├── badge │ │ └── index.js │ ├── button │ │ └── index.js │ ├── canvasboard │ │ └── index.js │ ├── cell │ │ └── index.js │ ├── checkbox │ │ └── index.js │ ├── checklist │ │ └── index.js │ ├── cityselect │ │ └── index.js │ ├── countdown │ │ └── index.js │ ├── countup │ │ └── index.js │ ├── datetime │ │ └── index.js │ ├── dialog │ │ └── index.js │ ├── flexbox │ │ └── index.js │ ├── grids │ │ └── index.js │ ├── icons │ │ └── index.js │ ├── imagepreview │ │ └── index.js │ ├── infinitescroll │ │ └── index.js │ ├── input │ │ └── index.js │ ├── keyboard │ │ └── index.js │ ├── layout │ │ └── index.js │ ├── lightbox │ │ └── index.js │ ├── list │ │ └── index.js │ ├── navbar │ │ └── index.js │ ├── picker │ │ └── index.js │ ├── popup │ │ └── index.js │ ├── preview │ │ └── index.js │ ├── progressbar │ │ └── index.js │ ├── pullrefresh │ │ └── index.js │ ├── radio │ │ └── index.js │ ├── rate │ │ └── index.js │ ├── rollnotice │ │ └── index.js │ ├── scrollnav │ │ └── index.js │ ├── scrolltab │ │ └── index.js │ ├── search │ │ └── index.js │ ├── sendcode │ │ └── index.js │ ├── slider │ │ └── index.js │ ├── spinner │ │ └── index.js │ ├── step │ │ └── index.js │ ├── switch │ │ └── index.js │ ├── tab │ │ └── index.js │ ├── tabbar │ │ └── index.js │ ├── textarea │ │ └── index.js │ └── timeline │ │ └── index.js ├── lib.rem │ ├── accordion │ │ └── index.js │ ├── actionsheet │ │ └── index.js │ ├── backtop │ │ └── index.js │ ├── badge │ │ └── index.js │ ├── button │ │ └── index.js │ ├── canvasboard │ │ └── index.js │ ├── cell │ │ └── index.js │ ├── checkbox │ │ └── index.js │ ├── checklist │ │ └── index.js │ ├── cityselect │ │ └── index.js │ ├── countdown │ │ └── index.js │ ├── countup │ │ └── index.js │ ├── datetime │ │ └── index.js │ ├── dialog │ │ └── index.js │ ├── flexbox │ │ └── index.js │ ├── grids │ │ └── index.js │ ├── icons │ │ └── index.js │ ├── imagepreview │ │ └── index.js │ ├── infinitescroll │ │ └── index.js │ ├── input │ │ └── index.js │ ├── keyboard │ │ └── index.js │ ├── layout │ │ └── index.js │ ├── lightbox │ │ └── index.js │ ├── list │ │ └── index.js │ ├── navbar │ │ └── index.js │ ├── picker │ │ └── index.js │ ├── popup │ │ └── index.js │ ├── preview │ │ └── index.js │ ├── progressbar │ │ └── index.js │ ├── pullrefresh │ │ └── index.js │ ├── radio │ │ └── index.js │ ├── rate │ │ └── index.js │ ├── rollnotice │ │ └── index.js │ ├── scrollnav │ │ └── index.js │ ├── scrolltab │ │ └── index.js │ ├── search │ │ └── index.js │ ├── sendcode │ │ └── index.js │ ├── slider │ │ └── index.js │ ├── spinner │ │ └── index.js │ ├── step │ │ └── index.js │ ├── switch │ │ └── index.js │ ├── tab │ │ └── index.js │ ├── tabbar │ │ └── index.js │ ├── textarea │ │ └── index.js │ └── timeline │ │ └── index.js ├── ydui.base.css ├── ydui.flexible.js ├── ydui.px.css ├── ydui.px.js ├── ydui.rem.css └── ydui.rem.js ├── example ├── app.vue ├── index.html ├── js │ └── ydui.flexible.js ├── main.js ├── routers │ ├── accordion.vue │ ├── actionsheet.vue │ ├── asidebar.vue │ ├── backtop.vue │ ├── badge.vue │ ├── button.vue │ ├── canvasboard.vue │ ├── cell.vue │ ├── checkbox.vue │ ├── checklist.vue │ ├── cityselect.vue │ ├── countdown.vue │ ├── countup.vue │ ├── cr.vue │ ├── datetime.vue │ ├── dialog.vue │ ├── flexbox.vue │ ├── grids.vue │ ├── icons.vue │ ├── imagepreview.vue │ ├── index.vue │ ├── input.vue │ ├── keyboard.vue │ ├── lightbox.vue │ ├── list.combination.vue │ ├── list.infinitescroll.vue │ ├── list.pullrefresh.vue │ ├── list.theme.vue │ ├── list.vue │ ├── navbar.vue │ ├── picker.vue │ ├── popup.vue │ ├── preview.vue │ ├── progressbar.vue │ ├── radio.vue │ ├── rate.vue │ ├── rollnotice.vue │ ├── scrollnav.vue │ ├── scrolltab.vue │ ├── search.vue │ ├── sendcode.vue │ ├── slider.vue │ ├── spinner.vue │ ├── step.vue │ ├── switch.vue │ ├── tab.vue │ ├── tabbar.vue │ └── timeline.vue └── styles │ └── demo.less ├── package.json └── src ├── components ├── accordion │ ├── index.js │ └── src │ │ ├── accordion-item.vue │ │ └── accordion.vue ├── actionsheet │ ├── index.js │ └── src │ │ └── actionsheet.vue ├── backtop │ ├── index.js │ └── src │ │ └── backtop.vue ├── badge │ ├── index.js │ └── src │ │ └── badge.vue ├── button │ ├── index.js │ └── src │ │ ├── button-group.vue │ │ └── button.vue ├── canvasboard │ ├── index.js │ └── src │ │ └── board.vue ├── cell │ ├── index.js │ └── src │ │ ├── cell-group.vue │ │ └── cell-item.vue ├── checkbox │ ├── index.js │ └── src │ │ ├── checkbox-group.vue │ │ └── checkbox.vue ├── checklist │ ├── index.js │ └── src │ │ ├── checklist-item.vue │ │ └── checklist.vue ├── cityselect │ ├── index.js │ └── src │ │ └── cityselect.vue ├── countdown │ ├── index.js │ └── src │ │ └── countdown.vue ├── countup │ ├── index.js │ └── src │ │ ├── countup.js │ │ └── countup.vue ├── datetime │ ├── index.js │ └── src │ │ ├── datetime.vue │ │ ├── picker.vue │ │ └── utils.js ├── dialog │ ├── index.js │ └── src │ │ ├── alert │ │ ├── alert.vue │ │ └── index.js │ │ ├── confirm │ │ ├── confirm.vue │ │ └── index.js │ │ ├── loading │ │ ├── index.js │ │ └── loading.vue │ │ ├── notify │ │ ├── index.js │ │ └── notify.vue │ │ └── toast │ │ ├── index.js │ │ └── toast.vue ├── flexbox │ ├── index.js │ └── src │ │ ├── flexbox-item.vue │ │ └── flexbox.vue ├── grids │ ├── index.js │ └── src │ │ ├── grids-group.vue │ │ └── grids-item.vue ├── icons │ ├── index.js │ └── src │ │ └── icons.vue ├── imagepreview │ ├── index.js │ └── src │ │ ├── box.vue │ │ ├── lightbox-tip.vue │ │ └── preview-img.vue ├── infinitescroll │ ├── index.js │ └── src │ │ ├── infinitescroll.vue │ │ └── loading.vue ├── input │ ├── index.js │ └── src │ │ └── input.vue ├── keyboard │ ├── index.js │ └── src │ │ └── keyboard.vue ├── layout │ ├── index.js │ └── src │ │ └── layout.vue ├── lightbox │ ├── index.js │ └── src │ │ ├── box.vue │ │ ├── lightbox-img.vue │ │ ├── lightbox-tip.vue │ │ ├── lightbox-txt.vue │ │ └── lightbox.vue ├── list │ ├── index.js │ └── src │ │ ├── list-item.vue │ │ ├── list-other.vue │ │ └── list-theme.vue ├── mask │ └── src │ │ └── mask.vue ├── navbar │ ├── index.js │ └── src │ │ ├── navbar-back-icon.vue │ │ ├── navbar-next-icon.vue │ │ └── navbar.vue ├── picker │ ├── index.js │ └── src │ │ └── picker.vue ├── popup │ ├── index.js │ └── src │ │ └── popup.vue ├── preview │ ├── index.js │ └── src │ │ ├── yd-preview-header.vue │ │ ├── yd-preview-item.vue │ │ └── yd-preview.vue ├── progressbar │ ├── index.js │ └── src │ │ └── progressbar.vue ├── pullrefresh │ ├── index.js │ └── src │ │ └── pullrefresh.vue ├── radio │ ├── index.js │ └── src │ │ ├── radio-group.vue │ │ └── radio.vue ├── rate │ ├── index.js │ └── src │ │ └── rate.vue ├── rollnotice │ ├── index.js │ └── src │ │ ├── rollnotice-item.vue │ │ └── rollnotice.vue ├── scroller │ ├── animate.js │ └── scroller.js ├── scrollnav │ ├── index.js │ └── src │ │ ├── scrollnav-panel.vue │ │ └── scrollnav.vue ├── scrolltab │ ├── index.js │ └── src │ │ ├── scrolltab-panel.vue │ │ └── scrolltab.vue ├── search │ ├── index.js │ └── src │ │ └── search.vue ├── sendcode │ ├── index.js │ └── src │ │ └── sendcode.vue ├── slider │ ├── index.js │ └── src │ │ ├── slider-item.vue │ │ └── slider.vue ├── spinner │ ├── index.js │ └── src │ │ └── spinner.vue ├── step │ ├── index.js │ └── src │ │ ├── step-item.vue │ │ └── step.vue ├── switch │ ├── index.js │ └── src │ │ └── switch.vue ├── tab │ ├── index.js │ └── src │ │ ├── tab-panel.vue │ │ └── tab.vue ├── tabbar │ ├── index.js │ └── src │ │ ├── tabbar-item.vue │ │ ├── tabbar-other.vue │ │ └── tabbar.vue ├── textarea │ ├── index.js │ └── src │ │ └── textarea.vue └── timeline │ ├── index.js │ └── src │ ├── timeline-item.vue │ └── timeline.vue ├── styles ├── base.less ├── common │ ├── iconfont.less │ ├── mixins.less │ ├── reset.less │ └── variables.less └── components │ ├── accordion.less │ ├── actionsheet.less │ ├── backtop.less │ ├── badge.less │ ├── button.less │ ├── canvasboard.less │ ├── cell.less │ ├── checkbox.less │ ├── checklist.less │ ├── cityselect.less │ ├── datetime.less │ ├── dialog.less │ ├── flexbox.less │ ├── grids.less │ ├── icons.less │ ├── infinitescroll.less │ ├── input.less │ ├── keyboard.less │ ├── layout.less │ ├── lightbox.less │ ├── list.less │ ├── mask.less │ ├── navbar.less │ ├── picker.less │ ├── popup.less │ ├── preview.less │ ├── progressbar.less │ ├── pullrefresh.less │ ├── radio.less │ ├── rate.less │ ├── rollnotice.less │ ├── scrollnav.less │ ├── scrolltab.less │ ├── search.less │ ├── slider.less │ ├── spinner.less │ ├── step.less │ ├── switch.less │ ├── tab.less │ ├── tabbar.less │ ├── textarea.less │ └── timeline.less ├── utils └── assist.js ├── ydui.flexible.js └── ydui.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["es2015"] 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | 3 | root = true 4 | 5 | [*] 6 | index_size = 2 7 | charset = utf-8 8 | end_of_line = lf 9 | indent_style = space 10 | insert_final_newline = true 11 | trim_trailing_whitespace = true 12 | 13 | [*.md] 14 | trim_trailing_whitespace = false 15 | 16 | [*.js] 17 | index_size = 4 18 | 19 | [*.less] 20 | index_size = 2 21 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true 5 | }, 6 | extends: ['plugin:vue/essential', 'eslint:recommended'], 7 | rules: { 8 | 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 9 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', 10 | //强制使用单引号 11 | quotes: ['error', 'single'] 12 | //强制不使用分号结尾 13 | // semi: ['error', 'never'] 14 | }, 15 | parserOptions: { 16 | parser: 'babel-eslint' 17 | } 18 | }; 19 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # 2 | #dist 3 | 4 | # Logs 5 | logs 6 | *.log 7 | npm-debug.log* 8 | yarn-debug.log* 9 | yarn-error.log* 10 | 11 | # Runtime data 12 | pids 13 | *.pid 14 | *.seed 15 | *.pid.lock 16 | 17 | # Directory for instrumented libs generated by jscoverage/JSCover 18 | lib-cov 19 | 20 | # Coverage directory used by tools like istanbul 21 | coverage 22 | 23 | # nyc test coverage 24 | .nyc_output 25 | 26 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 27 | .grunt 28 | 29 | # Bower dependency directory (https://bower.io/) 30 | bower_components 31 | 32 | # node-waf configuration 33 | .lock-wscript 34 | 35 | # Compiled binary addons (https://nodejs.org/api/addons.html) 36 | build/Release 37 | 38 | # Dependency directories 39 | node_modules/ 40 | jspm_packages/ 41 | 42 | # TypeScript v1 declaration files 43 | typings/ 44 | 45 | # Optional npm cache directory 46 | .npm 47 | 48 | # Optional eslint cache 49 | .eslintcache 50 | 51 | # Optional REPL history 52 | .node_repl_history 53 | 54 | # Output of 'npm pack' 55 | *.tgz 56 | 57 | # Yarn Integrity file 58 | .yarn-integrity 59 | 60 | # dotenv environment variables file 61 | .env 62 | 63 | # next.js build output 64 | .next 65 | package-lock.json 66 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 120, 3 | "tabWidth": 2, 4 | "useTabs": false, 5 | "singleQuote": true, 6 | "semi": true, 7 | 8 | "bracketSpacing": true, 9 | "eslintIntegration": true 10 | } 11 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | //.vue文件template格式化支持，并使用js-beautify-html插件 3 | "vetur.format.defaultFormatter.html": "js-beautify-html", 4 | //js-beautify-html格式化配置，属性强制换行 5 | "vetur.format.defaultFormatterOptions": { 6 | "js-beautify-html": { 7 | "wrap_attributes": "force-aligned" 8 | } 9 | }, 10 | //根据文件后缀名定义vue文件类型 11 | "files.associations": { 12 | "*.vue": "vue" 13 | }, 14 | //配置 ESLint 检查的文件类型 15 | "eslint.validate": [ 16 | "javascript", 17 | "javascriptreact", 18 | { 19 | "language": "vue", 20 | "autoFix": true 21 | } 22 | ], 23 | //保存时eslint自动修复错误 24 | "eslint.autoFixOnSave": true, 25 | //保存自动格式化 26 | "editor.formatOnSave": true 27 | } 28 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 wzf 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /build/base.conf.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | module: { 3 | loaders: [ 4 | { 5 | test: /\.vue$/, 6 | loader: 'vue', 7 | exclude: /node_modules/ 8 | }, 9 | { 10 | test: /\.js$/, 11 | loader: 'babel', 12 | exclude: /node_modules/ 13 | }, 14 | { 15 | test: /\.less$/, 16 | loader: 'style!css!less', 17 | exclude: /node_modules/ 18 | }, 19 | { 20 | test: /\.css$/, 21 | loader: 'style!css', 22 | exclude: /node_modules/ 23 | }, 24 | { 25 | test: /\.json$/, 26 | loader: 'json', 27 | exclude: /node_modules/ 28 | }, 29 | { 30 | test: /\.ttf/, 31 | loader: 'file', 32 | exclude: /node_modules/ 33 | } 34 | ] 35 | }, 36 | vue: { 37 | postcss: [ 38 | require('autoprefixer')({ 39 | browsers: ['Android >= 4', 'Explorer >= 10', 'iOS >= 6'], cascade: false 40 | }) 41 | ] 42 | } 43 | }; 44 | -------------------------------------------------------------------------------- /build/build.prod.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | var cleanCss = require('gulp-clean-css'); 3 | var rename = require('gulp-rename'); 4 | var through = require('through2'); 5 | 6 | var replaceRem2Px = function () { 7 | function fn(file, encoding, callback) { 8 | if (file.isNull()) { 9 | return callback(null, file); 10 | } 11 | 12 | if (file.isStream()) { 13 | return callback(createError(file, 'Streaming not supported')); 14 | } 15 | 16 | let text = file.contents.toString(); 17 | 18 | if (/\d*\.?\d+rem/.test(text)) { 19 | text = text.replace(/(\d*\.?\d+)rem/g, function (match, m1) { 20 | return parseInt(m1 * 50) + 'px'; 21 | }); 22 | } 23 | 24 | file.contents = new Buffer(text); 25 | callback(null, file); 26 | } 27 | 28 | return through.obj(fn); 29 | }; 30 | 31 | gulp.task('css:base', function () { 32 | gulp.src('../src/styles/base.less') 33 | .pipe(require('gulp-less')()) 34 | .pipe(cleanCss()) 35 | .pipe(rename('ydui.base.css')) 36 | .pipe(gulp.dest('../dist')); 37 | }); 38 | 39 | gulp.task('css:ydui', function () { 40 | gulp.src('../dist/ydui.rem.css') 41 | .pipe(require('ydui-rem2px')(50)) 42 | .pipe(cleanCss()) 43 | .pipe(rename('ydui.px.css')) 44 | .pipe(gulp.dest('../dist')); 45 | }); 46 | 47 | gulp.task('js:ydui', function () { 48 | gulp.src('../dist/ydui.rem.js') 49 | .pipe(replaceRem2Px()) 50 | .pipe(rename('ydui.px.js')) 51 | .pipe(gulp.dest('../dist')); 52 | }); 53 | 54 | gulp.task('flexible', function () { 55 | gulp.src('../src/ydui.flexible.js') 56 | .pipe(require('gulp-uglify')()) 57 | .pipe(gulp.dest('../dist')); 58 | }); 59 | 60 | gulp.task('default', ['css:base', 'css:ydui', 'js:ydui', 'flexible']); 61 | -------------------------------------------------------------------------------- /build/rem2px.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const postcss = require('postcss'); 4 | 5 | module.exports = postcss.plugin('vue-ydui-rem2px', function (size) { 6 | return function (css, result) { 7 | const oldCssText = css.toString(); 8 | let newCssText = ''; 9 | 10 | if (/\d*\.?\d+rem/.test(oldCssText)) { 11 | newCssText = oldCssText.replace(/(\d*\.?\d+)rem/g, function (match, m1) { 12 | return parseInt(m1 * size) + 'px'; 13 | }); 14 | } else { 15 | return oldCssText; 16 | } 17 | 18 | result.root = postcss.parse(newCssText); 19 | }; 20 | }); 21 | -------------------------------------------------------------------------------- /build/webpack.dev.conf.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const webpack = require('webpack'); 3 | const merge = require('webpack-merge'); 4 | const baseWebpackConfig = require('./base.conf'); 5 | 6 | module.exports = merge(baseWebpackConfig, { 7 | entry: { 8 | main: './example/main.js', 9 | vendors: ['vue', 'vue-router'] 10 | }, 11 | output: { 12 | path: path.join(__dirname, './dist'), 13 | publicPath: '/dist/', 14 | filename: '[name].js' 15 | }, 16 | plugins: [ 17 | new webpack.optimize.CommonsChunkPlugin({name: 'vendors', filename: 'vendors.js'}) 18 | ] 19 | }); 20 | -------------------------------------------------------------------------------- /build/webpack.dist.common.conf.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const webpack = require('webpack'); 3 | const merge = require('webpack-merge'); 4 | const baseWebpackConfig = require('./base.conf'); 5 | const pkg = require('../package.json'); 6 | 7 | module.exports = merge(baseWebpackConfig, { 8 | output: { 9 | path: path.join(__dirname, '../dist'), 10 | publicPath: '/dist/', 11 | filename: "[name].js", 12 | chunkFilename: "[name].js", 13 | library: 'ydui', 14 | libraryTarget: 'umd' 15 | }, 16 | externals: { 17 | vue: { 18 | commonjs: "vue", 19 | commonjs2: "vue", 20 | amd: "vue", 21 | root: "Vue" 22 | } 23 | }, 24 | plugins: [ 25 | new webpack.BannerPlugin(pkg.name + ' v' + pkg.version + ' by wzf/vue-ydui2 (c) ' + new Date().getFullYear() + ' Licensed ' + pkg.license), 26 | new webpack.optimize.UglifyJsPlugin({compress: {warnings: false}}), 27 | new webpack.optimize.OccurenceOrderPlugin() 28 | ] 29 | }); 30 | -------------------------------------------------------------------------------- /build/webpack.dist.prod.conf.js: -------------------------------------------------------------------------------- 1 | const merge = require('webpack-merge'); 2 | const ExtractTextPlugin = require('extract-text-webpack-plugin'); 3 | const distCommonWebpackConfig = require('./webpack.dist.common.conf'); 4 | 5 | module.exports = merge(distCommonWebpackConfig, { 6 | entry: { 7 | 'ydui.rem': './src/ydui.js' 8 | }, 9 | vue: { 10 | loaders: { 11 | less: ExtractTextPlugin.extract('css!less') 12 | } 13 | }, 14 | plugins: [ 15 | new ExtractTextPlugin('ydui.rem.css') 16 | ] 17 | }); 18 | -------------------------------------------------------------------------------- /dist/ydui.flexible.js: -------------------------------------------------------------------------------- 1 | !function(e){var t=e.document,n=t.documentElement,i="orientationchange"in e?"orientationchange":"resize",a=function e(){var t=n.getBoundingClientRect().width;return n.style.fontSize=5*Math.max(Math.min(t/750*20,11.2),8.55)+"px",e}();n.setAttribute("data-dpr",e.navigator.appVersion.match(/iphone/gi)?e.devicePixelRatio:1),/iP(hone|od|ad)/.test(e.navigator.userAgent)&&(t.documentElement.classList.add("ios"),parseInt(e.navigator.appVersion.match(/OS (\d+)_(\d+)_?(\d+)?/)[1],10)>=8&&t.documentElement.classList.add("hairline")),t.addEventListener&&(e.addEventListener(i,a,!1),t.addEventListener("DOMContentLoaded",a,!1))}(window); -------------------------------------------------------------------------------- /example/app.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 9 | -------------------------------------------------------------------------------- /example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Vue YDUI 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /example/js/ydui.flexible.js: -------------------------------------------------------------------------------- 1 | !function(e){var t=e.document,n=t.documentElement,i="orientationchange"in e?"orientationchange":"resize",a=function e(){var t=n.getBoundingClientRect().width;return n.style.fontSize=5*Math.max(Math.min(t/750*20,11.2),8.55)+"px",e}();n.setAttribute("data-dpr",e.navigator.appVersion.match(/iphone/gi)?e.devicePixelRatio:1),/iP(hone|od|ad)/.test(e.navigator.userAgent)&&(t.documentElement.classList.add("ios"),parseInt(e.navigator.appVersion.match(/OS (\d+)_(\d+)_?(\d+)?/)[1],10)>=8&&t.documentElement.classList.add("hairline")),t.addEventListener&&(e.addEventListener(i,a,!1),t.addEventListener("DOMContentLoaded",a,!1))}(window); -------------------------------------------------------------------------------- /example/routers/accordion.vue: -------------------------------------------------------------------------------- 1 | 56 | -------------------------------------------------------------------------------- /example/routers/actionsheet.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 58 | -------------------------------------------------------------------------------- /example/routers/asidebar.vue: -------------------------------------------------------------------------------- 1 | 15 | -------------------------------------------------------------------------------- /example/routers/backtop.vue: -------------------------------------------------------------------------------- 1 | 15 | -------------------------------------------------------------------------------- /example/routers/badge.vue: -------------------------------------------------------------------------------- 1 | 54 | -------------------------------------------------------------------------------- /example/routers/button.vue: -------------------------------------------------------------------------------- 1 | 35 | -------------------------------------------------------------------------------- /example/routers/cityselect.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 | 50 | -------------------------------------------------------------------------------- /example/routers/countdown.vue: -------------------------------------------------------------------------------- 1 | 46 | -------------------------------------------------------------------------------- /example/routers/cr.vue: -------------------------------------------------------------------------------- 1 | 17 | -------------------------------------------------------------------------------- /example/routers/icons.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 32 | -------------------------------------------------------------------------------- /example/routers/keyboard.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 45 | -------------------------------------------------------------------------------- /example/routers/lightbox.vue: -------------------------------------------------------------------------------- 1 | 35 | 36 | 45 | -------------------------------------------------------------------------------- /example/routers/list.vue: -------------------------------------------------------------------------------- 1 | 39 | -------------------------------------------------------------------------------- /example/routers/navbar.vue: -------------------------------------------------------------------------------- 1 | 52 | -------------------------------------------------------------------------------- /example/routers/picker.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 70 | -------------------------------------------------------------------------------- /example/routers/popup.vue: -------------------------------------------------------------------------------- 1 | 47 | 48 | 60 | -------------------------------------------------------------------------------- /example/routers/preview.vue: -------------------------------------------------------------------------------- 1 | 26 | 27 | 48 | -------------------------------------------------------------------------------- /example/routers/progressbar.vue: -------------------------------------------------------------------------------- 1 | 47 | 48 | 59 | -------------------------------------------------------------------------------- /example/routers/rate.vue: -------------------------------------------------------------------------------- 1 | 42 | 43 | 66 | -------------------------------------------------------------------------------- /example/routers/rollnotice.vue: -------------------------------------------------------------------------------- 1 | 49 | -------------------------------------------------------------------------------- /example/routers/scrollnav.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 41 | 42 | 53 | -------------------------------------------------------------------------------- /example/routers/scrolltab.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 36 | -------------------------------------------------------------------------------- /example/routers/search.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 52 | -------------------------------------------------------------------------------- /example/routers/sendcode.vue: -------------------------------------------------------------------------------- 1 | 39 | 40 | 68 | -------------------------------------------------------------------------------- /example/routers/slider.vue: -------------------------------------------------------------------------------- 1 | 35 | 36 | 43 | 44 | 45 | 51 | 52 | -------------------------------------------------------------------------------- /example/routers/step.vue: -------------------------------------------------------------------------------- 1 | 38 | -------------------------------------------------------------------------------- /example/routers/switch.vue: -------------------------------------------------------------------------------- 1 | 46 | 47 | 66 | -------------------------------------------------------------------------------- /example/routers/timeline.vue: -------------------------------------------------------------------------------- 1 | 31 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-ydui2", 3 | "description": "基于vue-ydui（A mobile components Library with Vue2.js.）升级的一套UI", 4 | "version": "1.2.6", 5 | "author": "wzf, ydcss.com", 6 | "main": "dist/ydui.rem.js", 7 | "style": "dist/ydui.rem.css", 8 | "keywords": [ 9 | "YDUI Touch", 10 | "ui", 11 | "ydui", 12 | "vue", 13 | "vue.js", 14 | "vue2.js", 15 | "component", 16 | "components", 17 | "framework", 18 | "vue2 ui", 19 | "vue2 components", 20 | "mobile", 21 | "mobile ui" 22 | ], 23 | "files": [ 24 | "dist" 25 | ], 26 | "homepage": "https://github.com/wzf/vue-ydui2.git", 27 | "repository": { 28 | "type": "git", 29 | "url": "https://github.com/wzf/vue-ydui2.git" 30 | }, 31 | "scripts": { 32 | "dev": "webpack-dev-server --content-base example/ --port 4321 --inline --hot --host 0.0.0.0 --config build/webpack.dev.conf.js", 33 | "build:rem:components": "webpack --config build/webpack.dist.components.rem.conf.js", 34 | "build:px:components": "webpack --config build/webpack.dist.components.px.conf.js", 35 | "build:prod": "webpack --config build/webpack.dist.prod.conf.js", 36 | "build": "npm run build:rem:components && npm run build:px:components && npm run build:prod && gulp --gulpfile build/build.prod.js" 37 | }, 38 | "devDependencies": { 39 | "autoprefixer": "^6.6.1", 40 | "axios": "^0.18.0", 41 | "babel-core": "^6.21.0", 42 | "babel-loader": "^6.2.10", 43 | "babel-preset-es2015": "^6.18.0", 44 | "css-loader": "^0.26.1", 45 | "extract-text-webpack-plugin": "^1.0.1", 46 | "file-loader": "^0.10.1", 47 | "gulp": "^3.9.1", 48 | "gulp-clean-css": "^2.3.2", 49 | "gulp-less": "^3.3.0", 50 | "gulp-rename": "^1.2.2", 51 | "gulp-uglify": "^2.0.1", 52 | "json-loader": "^0.5.4", 53 | "less": "^2.7.2", 54 | "less-loader": "^2.2.3", 55 | "postcss": "^5.2.14", 56 | "string-replace-webpack-plugin": "^0.1.3", 57 | "style-loader": "^0.13.1", 58 | "vue": "^2.5.2", 59 | "vue-loader": "^10.0.2", 60 | "vue-resource": "^1.5.1", 61 | "vue-router": "^2.1.1", 62 | "vue-template-compiler": "^2.5.2", 63 | "webpack": "^1.14.0", 64 | "webpack-dev-server": "1.16.3", 65 | "webpack-merge": "^2.4.0", 66 | "ydui-district": "^1.0.0", 67 | "ydui-rem2px": "^1.0.1" 68 | }, 69 | "license": "MIT", 70 | "dependencies": {} 71 | } 72 | -------------------------------------------------------------------------------- /src/components/accordion/index.js: -------------------------------------------------------------------------------- 1 | import Accordion from './src/accordion.vue'; 2 | import AccordionItem from './src/accordion-item.vue'; 3 | export {Accordion, AccordionItem}; 4 | -------------------------------------------------------------------------------- /src/components/accordion/src/accordion-item.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 81 | -------------------------------------------------------------------------------- /src/components/accordion/src/accordion.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 36 | 37 | 40 | -------------------------------------------------------------------------------- /src/components/actionsheet/index.js: -------------------------------------------------------------------------------- 1 | import ActionSheet from './src/actionsheet.vue'; 2 | export {ActionSheet}; 3 | -------------------------------------------------------------------------------- /src/components/actionsheet/src/actionsheet.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 67 | 68 | 71 | -------------------------------------------------------------------------------- /src/components/backtop/index.js: -------------------------------------------------------------------------------- 1 | import BackTop from './src/backtop.vue'; 2 | export {BackTop}; 3 | -------------------------------------------------------------------------------- /src/components/backtop/src/backtop.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 77 | 78 | 81 | -------------------------------------------------------------------------------- /src/components/badge/index.js: -------------------------------------------------------------------------------- 1 | import Badge from './src/badge.vue'; 2 | 3 | export {Badge}; 4 | -------------------------------------------------------------------------------- /src/components/badge/src/badge.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 56 | 57 | 60 | -------------------------------------------------------------------------------- /src/components/button/index.js: -------------------------------------------------------------------------------- 1 | import Button from './src/button.vue'; 2 | import ButtonGroup from './src/button-group.vue'; 3 | 4 | export {Button, ButtonGroup}; 5 | -------------------------------------------------------------------------------- /src/components/button/src/button-group.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | -------------------------------------------------------------------------------- /src/components/canvasboard/index.js: -------------------------------------------------------------------------------- 1 | import CanvasBoard from './src/board.vue'; 2 | 3 | export {CanvasBoard}; 4 | -------------------------------------------------------------------------------- /src/components/cell/index.js: -------------------------------------------------------------------------------- 1 | import CellItem from './src/cell-item.vue'; 2 | import CellGroup from './src/cell-group.vue'; 3 | 4 | export {CellItem, CellGroup}; 5 | -------------------------------------------------------------------------------- /src/components/cell/src/cell-group.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 19 | -------------------------------------------------------------------------------- /src/components/cell/src/cell-item.vue: -------------------------------------------------------------------------------- 1 | 41 | 42 | 70 | 71 | 74 | -------------------------------------------------------------------------------- /src/components/checkbox/index.js: -------------------------------------------------------------------------------- 1 | import CheckBox from './src/checkbox.vue'; 2 | import CheckBoxGroup from './src/checkbox-group.vue'; 3 | export {CheckBox, CheckBoxGroup}; 4 | -------------------------------------------------------------------------------- /src/components/checkbox/src/checkbox-group.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 61 | -------------------------------------------------------------------------------- /src/components/checklist/index.js: -------------------------------------------------------------------------------- 1 | import CheckList from './src/checklist.vue'; 2 | import CheckListItem from './src/checklist-item.vue'; 3 | export {CheckList, CheckListItem}; 4 | -------------------------------------------------------------------------------- /src/components/checklist/src/checklist-item.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 58 | -------------------------------------------------------------------------------- /src/components/cityselect/index.js: -------------------------------------------------------------------------------- 1 | import CitySelect from './src/cityselect.vue'; 2 | export {CitySelect}; 3 | -------------------------------------------------------------------------------- /src/components/countdown/index.js: -------------------------------------------------------------------------------- 1 | import CountDown from './src/countdown.vue'; 2 | export {CountDown}; 3 | -------------------------------------------------------------------------------- /src/components/countup/index.js: -------------------------------------------------------------------------------- 1 | import CountUp from './src/countup.vue'; 2 | export {CountUp}; 3 | -------------------------------------------------------------------------------- /src/components/datetime/index.js: -------------------------------------------------------------------------------- 1 | import DateTime from './src/datetime.vue'; 2 | export {DateTime}; 3 | -------------------------------------------------------------------------------- /src/components/dialog/index.js: -------------------------------------------------------------------------------- 1 | import Alert from './src/alert'; 2 | import Confirm from './src/confirm'; 3 | import Toast from './src/toast'; 4 | import Notify from './src/notify'; 5 | import Loading from './src/loading'; 6 | 7 | import ConfirmView from './src/confirm/confirm.vue'; 8 | 9 | export { Confirm, Alert, Toast, Notify, Loading, ConfirmView }; 10 | -------------------------------------------------------------------------------- /src/components/dialog/src/alert/alert.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 20 | 21 | 24 | -------------------------------------------------------------------------------- /src/components/dialog/src/alert/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import {pageScroll} from '../../../../utils/assist'; 3 | 4 | const AlertConstructor = Vue.extend(require('./alert.vue')); 5 | 6 | 7 | const instance = new AlertConstructor({ 8 | el: document.createElement('div') 9 | }); 10 | 11 | const hashChange = function () { 12 | pageScroll.unlock(); 13 | 14 | const el = instance.$el; 15 | el.parentNode && el.parentNode.removeChild(el); 16 | }; 17 | 18 | AlertConstructor.prototype.closeAlert = function () { 19 | pageScroll.unlock(); 20 | 21 | const el = instance.$el; 22 | el.parentNode && el.parentNode.removeChild(el); 23 | 24 | window.removeEventListener("hashchange", hashChange); 25 | 26 | typeof this.callback === 'function' && this.callback(); 27 | }; 28 | 29 | const Alert = (options = {}) => { 30 | instance.mes = options.mes; 31 | instance.callback = options.callback; 32 | 33 | window.addEventListener("hashchange", hashChange); 34 | 35 | document.body.appendChild(instance.$el); 36 | 37 | pageScroll.lock(); 38 | }; 39 | 40 | export default Alert; 41 | -------------------------------------------------------------------------------- /src/components/dialog/src/confirm/confirm.vue: -------------------------------------------------------------------------------- 1 | 32 | 33 | 46 | -------------------------------------------------------------------------------- /src/components/dialog/src/confirm/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import {pageScroll} from '../../../../utils/assist'; 3 | 4 | const ConfirmConstructor = Vue.extend(require('./confirm.vue')); 5 | 6 | const instance = new ConfirmConstructor({ 7 | el: document.createElement('div') 8 | }); 9 | 10 | const hashChange = function () { 11 | pageScroll.unlock(); 12 | 13 | const el = instance.$el; 14 | el.parentNode && el.parentNode.removeChild(el); 15 | }; 16 | 17 | ConfirmConstructor.prototype.closeConfirm = function (stay, callback) { 18 | let stopClose = true; 19 | 20 | if(typeof callback === 'function') { 21 | stopClose = callback(); 22 | if(stopClose === undefined) stopClose = true; 23 | } 24 | 25 | if(!stopClose || stay) return; 26 | 27 | pageScroll.unlock(); 28 | 29 | const el = instance.$el; 30 | el.parentNode && el.parentNode.removeChild(el); 31 | 32 | window.removeEventListener("hashchange", hashChange); 33 | }; 34 | 35 | const Confirm = (options = {}) => { 36 | instance.mes = options.mes || ''; 37 | instance.title = options.title || '提示'; 38 | instance.opts = options.opts; 39 | 40 | window.addEventListener("hashchange", hashChange); 41 | 42 | document.body.appendChild(instance.$el); 43 | 44 | pageScroll.lock(); 45 | }; 46 | 47 | export default Confirm; 48 | -------------------------------------------------------------------------------- /src/components/dialog/src/loading/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import {pageScroll} from '../../../../utils/assist'; 3 | 4 | const LoadingConstructor = Vue.extend(require('./loading.vue')); 5 | 6 | const instance = new LoadingConstructor({ 7 | el: document.createElement('div') 8 | }); 9 | 10 | LoadingConstructor.prototype.open = (title) => { 11 | instance.title = title || '正在加载'; 12 | 13 | document.body.appendChild(instance.$el); 14 | 15 | pageScroll.lock(); 16 | }; 17 | 18 | LoadingConstructor.prototype.close = function () { 19 | const el = instance.$el; 20 | el.parentNode && el.parentNode.removeChild(el); 21 | 22 | pageScroll.unlock(); 23 | }; 24 | 25 | export default { 26 | open: instance.open, 27 | close: instance.close 28 | }; 29 | 30 | -------------------------------------------------------------------------------- /src/components/dialog/src/loading/loading.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 17 | -------------------------------------------------------------------------------- /src/components/dialog/src/notify/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | 3 | const NotifyConstructor = Vue.extend(require('./notify.vue')); 4 | 5 | const instance = new NotifyConstructor({ 6 | el: document.createElement('div') 7 | }); 8 | 9 | let timer = null; 10 | let lock = false; 11 | 12 | NotifyConstructor.prototype.closeNotify = function () { 13 | instance.classes = 'yd-notify-out'; 14 | 15 | setTimeout(() => { 16 | const el = instance.$el; 17 | el.parentNode && el.parentNode.removeChild(el); 18 | lock = false; 19 | }, 150); 20 | 21 | typeof this.callback === 'function' && this.callback(); 22 | }; 23 | 24 | const Notify = (options = {}) => { 25 | instance.classes = ''; 26 | instance.mes = options.mes; 27 | instance.timeout = ~~options.timeout || 5000; 28 | instance.callback = options.callback; 29 | 30 | if (lock)return; 31 | lock = true; 32 | 33 | document.body.appendChild(instance.$el); 34 | 35 | instance.$el.addEventListener('click', () => { 36 | clearTimeout(timer); 37 | instance.closeNotify(); 38 | }); 39 | 40 | timer = setTimeout(() => { 41 | clearTimeout(timer); 42 | instance.closeNotify(); 43 | }, instance.timeout); 44 | }; 45 | 46 | export default Notify; 47 | -------------------------------------------------------------------------------- /src/components/dialog/src/notify/notify.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 19 | -------------------------------------------------------------------------------- /src/components/dialog/src/toast/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import { pageScroll } from '../../../../utils/assist'; 3 | 4 | const ToastConstructor = Vue.extend(require('./toast.vue')); 5 | 6 | const instance = new ToastConstructor({ 7 | el: document.createElement('div') 8 | }); 9 | 10 | ToastConstructor.prototype.closeToast = function() { 11 | const el = instance.$el; 12 | el.parentNode && el.parentNode.removeChild(el); 13 | 14 | pageScroll.unlock(); 15 | 16 | typeof this.callback === 'function' && this.callback(); 17 | }; 18 | 19 | let timer; 20 | 21 | // 点击隐藏 22 | instance.clickIconClose = () => { 23 | clearTimeout(timer); 24 | instance.closeToast(); 25 | }; 26 | 27 | const Toast = (options = {}) => { 28 | instance.mes = options.mes; 29 | instance.icon = options.icon; 30 | instance.timeout = ~~options.timeout || 2000; 31 | instance.callback = options.callback; 32 | 33 | document.body.appendChild(instance.$el); 34 | 35 | pageScroll.lock(); 36 | 37 | if (timer) { 38 | clearTimeout(timer); 39 | timer = null; 40 | } 41 | 42 | timer = setTimeout(() => { 43 | instance.closeToast(); 44 | }, instance.timeout + 100); 45 | }; 46 | 47 | export default Toast; 48 | -------------------------------------------------------------------------------- /src/components/dialog/src/toast/toast.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 33 | -------------------------------------------------------------------------------- /src/components/flexbox/index.js: -------------------------------------------------------------------------------- 1 | import FlexBox from './src/flexbox.vue'; 2 | import FlexBoxItem from './src/flexbox-item.vue'; 3 | export {FlexBox, FlexBoxItem}; 4 | -------------------------------------------------------------------------------- /src/components/flexbox/src/flexbox-item.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 31 | -------------------------------------------------------------------------------- /src/components/flexbox/src/flexbox.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 20 | 21 | 24 | -------------------------------------------------------------------------------- /src/components/grids/index.js: -------------------------------------------------------------------------------- 1 | import GridsItem from './src/grids-item.vue'; 2 | import GridsGroup from './src/grids-group.vue'; 3 | 4 | export {GridsItem, GridsGroup}; 5 | -------------------------------------------------------------------------------- /src/components/grids/src/grids-group.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 43 | -------------------------------------------------------------------------------- /src/components/grids/src/grids-item.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 52 | 53 | 56 | -------------------------------------------------------------------------------- /src/components/icons/index.js: -------------------------------------------------------------------------------- 1 | import Icons from './src/icons.vue'; 2 | export {Icons}; 3 | -------------------------------------------------------------------------------- /src/components/icons/src/icons.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 52 | 53 | 56 | -------------------------------------------------------------------------------- /src/components/imagepreview/index.js: -------------------------------------------------------------------------------- 1 | import ImagePreviewBox from './src/box.vue'; 2 | import ImagePreviewImg from './src/preview-img.vue'; 3 | 4 | const install = function(Vue) { 5 | const boxComponent = Vue.extend(ImagePreviewBox); 6 | const imgComponent = Vue.extend(ImagePreviewImg); 7 | 8 | // 添加vue扩展，方法名imagePreview 9 | Vue.prototype.$imagePreview = ({ index = 0, images }) => { 10 | let imageItems = images.map(img => { 11 | return new imgComponent({ 12 | el: document.createElement('div'), 13 | data: { 14 | src: img 15 | } 16 | }); 17 | }); 18 | const instance = new boxComponent({ 19 | el: document.createElement('div'), 20 | data: { 21 | index: index, 22 | currentIndex: index, 23 | imgItems: imageItems, 24 | txtHTML: /*mes[0] && mes[0].$el ? mes[0].$el.innerHTML :*/ '', 25 | closeText: '关闭' 26 | } 27 | }); 28 | 29 | document.body.appendChild(instance.$el); 30 | }; 31 | 32 | Vue.prototype.$closeImagePreview = () => { 33 | const instance = document.querySelector('.yd-lightbox-view'); 34 | if (instance) { 35 | document.body.removeChild(instance); 36 | } 37 | }; 38 | }; 39 | 40 | export default { install }; 41 | -------------------------------------------------------------------------------- /src/components/imagepreview/src/preview-img.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 16 | -------------------------------------------------------------------------------- /src/components/infinitescroll/index.js: -------------------------------------------------------------------------------- 1 | import InfiniteScroll from './src/infinitescroll.vue'; 2 | export {InfiniteScroll}; 3 | -------------------------------------------------------------------------------- /src/components/infinitescroll/src/loading.vue: -------------------------------------------------------------------------------- 1 | 25 | -------------------------------------------------------------------------------- /src/components/input/index.js: -------------------------------------------------------------------------------- 1 | import Input from './src/input.vue'; 2 | export {Input}; 3 | -------------------------------------------------------------------------------- /src/components/keyboard/index.js: -------------------------------------------------------------------------------- 1 | import KeyBoard from './src/keyboard.vue'; 2 | export {KeyBoard}; 3 | -------------------------------------------------------------------------------- /src/components/layout/index.js: -------------------------------------------------------------------------------- 1 | import Layout from './src/layout.vue'; 2 | export {Layout}; 3 | -------------------------------------------------------------------------------- /src/components/layout/src/layout.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | 36 | 37 | 40 | -------------------------------------------------------------------------------- /src/components/lightbox/index.js: -------------------------------------------------------------------------------- 1 | import LightBox from './src/lightbox.vue'; 2 | import LightBoxImg from './src/lightbox-img.vue'; 3 | import LightBoxTxt from './src/lightbox-txt.vue'; 4 | export {LightBox, LightBoxImg, LightBoxTxt}; 5 | -------------------------------------------------------------------------------- /src/components/lightbox/src/lightbox-img.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 14 | -------------------------------------------------------------------------------- /src/components/lightbox/src/lightbox-txt.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 16 | -------------------------------------------------------------------------------- /src/components/lightbox/src/lightbox.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 88 | 89 | 92 | -------------------------------------------------------------------------------- /src/components/list/index.js: -------------------------------------------------------------------------------- 1 | import ListTheme from './src/list-theme.vue'; 2 | import ListItem from './src/list-item.vue'; 3 | import ListOther from './src/list-other.vue'; 4 | 5 | export {ListTheme, ListItem, ListOther}; 6 | -------------------------------------------------------------------------------- /src/components/list/src/list-item.vue: -------------------------------------------------------------------------------- 1 | 36 | 37 | 52 | -------------------------------------------------------------------------------- /src/components/list/src/list-other.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | -------------------------------------------------------------------------------- /src/components/list/src/list-theme.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 25 | 26 | 29 | -------------------------------------------------------------------------------- /src/components/mask/src/mask.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 67 | 68 | 71 | -------------------------------------------------------------------------------- /src/components/navbar/index.js: -------------------------------------------------------------------------------- 1 | import NavBar from './src/navbar.vue'; 2 | import NavBarBackIcon from './src/navbar-back-icon.vue'; 3 | import NavBarNextIcon from './src/navbar-next-icon.vue'; 4 | 5 | export {NavBar, NavBarBackIcon, NavBarNextIcon}; 6 | -------------------------------------------------------------------------------- /src/components/navbar/src/navbar-back-icon.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 21 | -------------------------------------------------------------------------------- /src/components/navbar/src/navbar-next-icon.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 21 | -------------------------------------------------------------------------------- /src/components/navbar/src/navbar.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 66 | 67 | 70 | -------------------------------------------------------------------------------- /src/components/picker/index.js: -------------------------------------------------------------------------------- 1 | import Picker from './src/picker.vue'; 2 | export { Picker }; 3 | -------------------------------------------------------------------------------- /src/components/popup/index.js: -------------------------------------------------------------------------------- 1 | import Popup from './src/popup.vue'; 2 | export {Popup}; 3 | -------------------------------------------------------------------------------- /src/components/preview/index.js: -------------------------------------------------------------------------------- 1 | import Preview from './src/yd-preview.vue'; 2 | import PreviewHeader from './src/yd-preview-header.vue'; 3 | import PreviewItem from './src/yd-preview-item.vue'; 4 | 5 | export {Preview, PreviewHeader, PreviewItem} 6 | -------------------------------------------------------------------------------- /src/components/preview/src/yd-preview-header.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 13 | -------------------------------------------------------------------------------- /src/components/preview/src/yd-preview-item.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 13 | -------------------------------------------------------------------------------- /src/components/preview/src/yd-preview.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 30 | 31 | 34 | -------------------------------------------------------------------------------- /src/components/progressbar/index.js: -------------------------------------------------------------------------------- 1 | import ProgressBar from './src/progressbar.vue'; 2 | export {ProgressBar}; 3 | -------------------------------------------------------------------------------- /src/components/pullrefresh/index.js: -------------------------------------------------------------------------------- 1 | import PullRefresh from './src/pullrefresh.vue'; 2 | export {PullRefresh}; 3 | -------------------------------------------------------------------------------- /src/components/radio/index.js: -------------------------------------------------------------------------------- 1 | import Radio from './src/radio.vue'; 2 | import RadioGroup from './src/radio-group.vue'; 3 | export {Radio, RadioGroup}; 4 | -------------------------------------------------------------------------------- /src/components/radio/src/radio-group.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 68 | 69 | 72 | -------------------------------------------------------------------------------- /src/components/radio/src/radio.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 42 | -------------------------------------------------------------------------------- /src/components/rate/index.js: -------------------------------------------------------------------------------- 1 | import Rate from './src/rate.vue'; 2 | export {Rate}; 3 | -------------------------------------------------------------------------------- /src/components/rate/src/rate.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 92 | 93 | 96 | -------------------------------------------------------------------------------- /src/components/rollnotice/index.js: -------------------------------------------------------------------------------- 1 | import RollNotice from './src/rollnotice.vue'; 2 | import RollNoticeItem from './src/rollnotice-item.vue'; 3 | export {RollNotice, RollNoticeItem}; 4 | -------------------------------------------------------------------------------- /src/components/rollnotice/src/rollnotice-item.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 13 | -------------------------------------------------------------------------------- /src/components/scrollnav/index.js: -------------------------------------------------------------------------------- 1 | import ScrollNav from './src/scrollnav.vue'; 2 | import ScrollNavPanel from './src/scrollnav-panel.vue'; 3 | 4 | export {ScrollNav, ScrollNavPanel}; 5 | -------------------------------------------------------------------------------- /src/components/scrollnav/src/scrollnav-panel.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 18 | -------------------------------------------------------------------------------- /src/components/scrolltab/index.js: -------------------------------------------------------------------------------- 1 | import ScrollTab from './src/scrolltab.vue'; 2 | import ScrollTabPanel from './src/scrolltab-panel.vue'; 3 | 4 | export {ScrollTab, ScrollTabPanel}; 5 | -------------------------------------------------------------------------------- /src/components/scrolltab/src/scrolltab-panel.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 21 | -------------------------------------------------------------------------------- /src/components/search/index.js: -------------------------------------------------------------------------------- 1 | import Search from './src/search.vue'; 2 | export {Search}; 3 | -------------------------------------------------------------------------------- /src/components/sendcode/index.js: -------------------------------------------------------------------------------- 1 | import SendCode from './src/sendcode.vue'; 2 | export {SendCode}; 3 | -------------------------------------------------------------------------------- /src/components/slider/index.js: -------------------------------------------------------------------------------- 1 | import Slider from './src/slider.vue'; 2 | import SliderItem from './src/slider-item.vue'; 3 | 4 | export {Slider, SliderItem}; 5 | -------------------------------------------------------------------------------- /src/components/slider/src/slider-item.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 15 | -------------------------------------------------------------------------------- /src/components/spinner/index.js: -------------------------------------------------------------------------------- 1 | import Spinner from './src/spinner.vue'; 2 | export {Spinner}; 3 | -------------------------------------------------------------------------------- /src/components/step/index.js: -------------------------------------------------------------------------------- 1 | import Step from './src/step.vue'; 2 | import StepItem from './src/step-item.vue'; 3 | 4 | export {Step, StepItem}; 5 | -------------------------------------------------------------------------------- /src/components/step/src/step-item.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 43 | -------------------------------------------------------------------------------- /src/components/step/src/step.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 75 | 76 | 79 | -------------------------------------------------------------------------------- /src/components/switch/index.js: -------------------------------------------------------------------------------- 1 | import Switch from './src/switch.vue'; 2 | export {Switch}; 3 | -------------------------------------------------------------------------------- /src/components/switch/src/switch.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 72 | 73 | 76 | -------------------------------------------------------------------------------- /src/components/tab/index.js: -------------------------------------------------------------------------------- 1 | import Tab from './src/tab.vue'; 2 | import TabPanel from './src/tab-panel.vue'; 3 | 4 | export {Tab, TabPanel}; 5 | -------------------------------------------------------------------------------- /src/components/tab/src/tab-panel.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 92 | -------------------------------------------------------------------------------- /src/components/tabbar/index.js: -------------------------------------------------------------------------------- 1 | import TabBar from './src/tabbar.vue'; 2 | import TabBarItem from './src/tabbar-item.vue'; 3 | import TabBarOther from './src/tabbar-other.vue'; 4 | 5 | export {TabBar, TabBarItem, TabBarOther}; 6 | -------------------------------------------------------------------------------- /src/components/tabbar/src/tabbar-item.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 | 61 | -------------------------------------------------------------------------------- /src/components/tabbar/src/tabbar-other.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 24 | -------------------------------------------------------------------------------- /src/components/textarea/index.js: -------------------------------------------------------------------------------- 1 | import TextArea from './src/textarea.vue'; 2 | export {TextArea}; 3 | -------------------------------------------------------------------------------- /src/components/textarea/src/textarea.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 68 | 69 | 72 | -------------------------------------------------------------------------------- /src/components/timeline/index.js: -------------------------------------------------------------------------------- 1 | import TimeLine from './src/timeline.vue'; 2 | import TimeLineItem from './src/timeline-item.vue'; 3 | export {TimeLine, TimeLineItem}; 4 | -------------------------------------------------------------------------------- /src/components/timeline/src/timeline-item.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 18 | -------------------------------------------------------------------------------- /src/components/timeline/src/timeline.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 14 | 15 | 18 | -------------------------------------------------------------------------------- /src/styles/base.less: -------------------------------------------------------------------------------- 1 | @import "./common/variables"; 2 | @import "./common/reset"; 3 | @import "./common/iconfont"; 4 | 5 | .g-fix-ios-overflow-scrolling-bug { 6 | /* 针对IOS 修复 css overflow scroll bug */ 7 | -webkit-overflow-scrolling: auto !important; 8 | } 9 | 10 | .g-fix-ios-prevent-scroll { 11 | overflow: hidden !important; 12 | position: fixed; 13 | width: 100%; 14 | } 15 | -------------------------------------------------------------------------------- /src/styles/common/reset.less: -------------------------------------------------------------------------------- 1 | *, 2 | *:before, 3 | *:after { 4 | box-sizing: border-box; 5 | outline: none; 6 | } 7 | 8 | html, body { 9 | height: 100%; 10 | } 11 | 12 | body { 13 | background-color: @body-bg; 14 | font-size: 12px; 15 | -webkit-font-smoothing: antialiased; 16 | font-family: arial, sans-serif; 17 | } 18 | 19 | body, img, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td, iframe { 20 | margin: 0; 21 | padding: 0; 22 | } 23 | 24 | article, aside, details, figcaption, figure, footer, header, menu, nav, section, summary, time, mark, audio, video { 25 | display: block; 26 | margin: 0; 27 | padding: 0; 28 | } 29 | 30 | h1, h2, h3, h4, h5, h6 { 31 | font-size: 100%; 32 | } 33 | 34 | fieldset, img { 35 | border: 0; 36 | } 37 | 38 | address, caption, cite, dfn, em, th, var, i, em { 39 | font-style: normal; 40 | font-weight: normal; 41 | } 42 | 43 | ol, ul { 44 | list-style: none; 45 | } 46 | 47 | a { 48 | text-decoration: none; 49 | color: inherit; 50 | &:hover { 51 | text-decoration: none; 52 | } 53 | } 54 | 55 | a, label, button, input, select { 56 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 57 | } 58 | 59 | input, select, button { 60 | font: 100% tahoma, \5b8b\4f53, arial; 61 | vertical-align: baseline; 62 | border-radius: 0; 63 | background-color: transparent; 64 | } 65 | 66 | select { 67 | -webkit-appearance: none; 68 | -moz-appearance: none; 69 | } 70 | 71 | button::-moz-focus-inner, 72 | input[type="reset"]::-moz-focus-inner, 73 | input[type="button"]::-moz-focus-inner, 74 | input[type="submit"]::-moz-focus-inner, 75 | input[type="file"] > input[type="button"]::-moz-focus-inner { 76 | border: none; 77 | } 78 | 79 | input[type=checkbox], input[type=radio] { 80 | vertical-align: middle; 81 | } 82 | 83 | input[type="number"]::-webkit-outer-spin-button, 84 | input[type="number"]::-webkit-inner-spin-button { 85 | -webkit-appearance: none !important; 86 | -moz-appearance: none !important; 87 | margin: 0; 88 | } 89 | 90 | input:-webkit-autofill { 91 | -webkit-box-shadow: 0 0 0 1000px white inset; 92 | } 93 | 94 | textarea { 95 | outline: none; 96 | border-radius: 0; 97 | -webkit-appearance: none; 98 | -moz-appearance: none; 99 | overflow: auto; 100 | resize: none; 101 | font: 100% tahoma, \5b8b\4f53, arial; 102 | } 103 | -------------------------------------------------------------------------------- /src/styles/common/variables.less: -------------------------------------------------------------------------------- 1 | /** 2 | * Component: Variables 3 | * Description: Define all variables 4 | */ 5 | //======== 【Prefix】 ======== 6 | @css-prefix: yd; 7 | 8 | //======== 【iconfont】 ======== 9 | @iconfont-inlay: 'YDUI-INLAY'; 10 | 11 | //======== 【global】 ======== 12 | @base-zindex: 1; 13 | @body-bg: #f5f5f5; 14 | @body-padding-vertical: 0.24rem; 15 | @body-padding-bottom: 0.5rem; 16 | @line-color: #ececec; 17 | @line-high-color: #e4e4e4; 18 | @max-width: 750px; 19 | @min-width: 300px; 20 | 21 | //======== 【button】 ======== 22 | @btn-radius: 2px; 23 | @btn-fontsize: 0.24rem; 24 | @btn-height: 0.6rem; 25 | @btn-default-color: #fff; 26 | @btn-block-radius: 3px; 27 | @btn-block-fontsize: 0.3rem; 28 | @btn-block-height: 0.9rem; 29 | // @btn-block-margin-top: .5rem; 30 | @btn-block-margin-top: 0; 31 | @btn-primary-bg: #04be02; 32 | @btn-danger-bg: #ef4f4f; 33 | @btn-warning-bg: #ffb400; 34 | @btn-disabled-bg: #ccc; 35 | @btn-disabled-color: #f0f0f0; 36 | @btn-hollow-bg: #fff; 37 | @btn-hollow-color: #454545; 38 | @btn-hollow-border-color: #eaeaea; 39 | 40 | //======== 【cell】 ======== 41 | @cell-title-fontsize: 0.28rem; 42 | @cell-title-color: #888; 43 | @cell-height: 1rem; 44 | @cell-left-color: #555; 45 | @cell-left-fontsize: 0.28rem; 46 | @cell-right-color: #525252; 47 | @cell-right-fontsize: 0.26rem; 48 | @cell-input-color: #555; 49 | @cell-input-fontsize: 0.28rem; 50 | @cell-icon-fontsize: 0.38rem; 51 | @cell-select-color: #a9a9a9; 52 | @cell-select-fontsize: @cell-left-fontsize; 53 | @cell-arrow-color: #c9c9c9; 54 | @cell-arrow-fontsize: 0.28rem; 55 | 56 | //======== 【grids】 ======== 57 | @grids-fontsize: 0.28rem; 58 | @grids-color: #333; 59 | @grids-bg: #fff; 60 | @grids-padding-horizontal: 0.35rem; 61 | @grids-line-color: @line-color; 62 | @grids-line-high-color: @line-high-color; 63 | 64 | //======== 【navbar】 ======== 65 | @navbar-height: 0.9rem; 66 | @navbar-center-width: 50%; 67 | @navbar-item-fontsize: 0.26rem; 68 | @navbar-icon-fontsize: 0.3rem; 69 | @navbar-border-color: @line-high-color; 70 | 71 | //======== 【tabbar】 ======== 72 | @tabbar-bg: rgba(255, 255, 255, 0.96); 73 | @tabbar-border-color: @line-high-color; 74 | 75 | //======== 【actionsheet】 ======== 76 | @actionsheet-bg: #efeff4; 77 | @actionsheet-item-height: 1rem; 78 | @actionsheet-item-bg: #fff; 79 | @actionsheet-item-fontsize: 0.28rem; 80 | @actionsheet-item-color: #555; 81 | @actionsheet-item-border-color: @line-color; 82 | @actionsheet-action-height: 1rem; 83 | @actionsheet-action-bg: @actionsheet-item-bg; 84 | @actionsheet-action-fontsize: @actionsheet-item-fontsize; 85 | @actionsheet-action-color: @actionsheet-item-color; 86 | 87 | //======== 【tab】 ======== 88 | @tab-bg: #fff; 89 | @tab-height: 0.85rem; 90 | @tab-color: #585858; 91 | 92 | //======== 【badge】 ======== 93 | @badge-default-bg: #d0d0d0; 94 | @badge-default-color: #fff; 95 | @badge-primary-bg: #04be02; 96 | @badge-danger-bg: #ef4f4f; 97 | @badge-warning-bg: #ffb400; 98 | @badge-hollow-bg: #fbfbfb; 99 | @badge-hollow-color: #b2b2b2; 100 | -------------------------------------------------------------------------------- /src/styles/components/accordion.less: -------------------------------------------------------------------------------- 1 | @import "../common/variables"; 2 | @import "../common/mixins"; 3 | 4 | .@{css-prefix} { 5 | &-accordion { 6 | background-color: #fff; 7 | } 8 | 9 | &-accordion-head { 10 | display: flex; 11 | align-items: center; 12 | position: relative; 13 | user-select: none; 14 | padding: 0 .24rem; 15 | overflow: hidden; 16 | &:after { 17 | .bottom-line(@line-color); 18 | } 19 | &-content { 20 | flex: 1; 21 | display: flex; 22 | align-items: center; 23 | } 24 | &-arrow { 25 | overflow: hidden; 26 | height: 100%; 27 | min-height: 1rem; 28 | display: flex; 29 | align-items: center; 30 | &:after { 31 | content: ''; 32 | width: 0; 33 | height: 0; 34 | border-left: 5px solid transparent; 35 | border-right: 5px solid transparent; 36 | border-bottom: 7px solid #A0A0A0; 37 | display: block; 38 | transition: transform .1s linear; 39 | transform: rotate(-180deg); 40 | } 41 | &.@{css-prefix}-accordion-rotated:after { 42 | transform: rotate(0deg); 43 | } 44 | } 45 | } 46 | 47 | &-accordion-title { 48 | min-height: 1rem; 49 | display: flex; 50 | align-items: center; 51 | font-size: .28rem; 52 | color: #444; 53 | &-full { 54 | flex: 1; 55 | } 56 | } 57 | 58 | &-accordion-content { 59 | position: relative; 60 | overflow: hidden; 61 | transition: height .1s linear; 62 | &:after { 63 | .bottom-line(@line-color); 64 | } 65 | } 66 | } 67 | 68 | -------------------------------------------------------------------------------- /src/styles/components/actionsheet.less: -------------------------------------------------------------------------------- 1 | @import "../common/variables"; 2 | @import "../common/mixins"; 3 | 4 | .@{css-prefix} { 5 | &-actionsheet { 6 | text-align: center; 7 | position: fixed; 8 | bottom: 0; 9 | left: 0; 10 | width: 100%; 11 | z-index: @base-zindex * 1500 + 2; 12 | background-color: @actionsheet-bg; 13 | transform: translate(0, 100%); 14 | transition: transform .2s; 15 | &-active { 16 | transform: translate(0, 0); 17 | } 18 | } 19 | 20 | &-actionsheet-item { 21 | display: block; 22 | position: relative; 23 | font-size: @actionsheet-item-fontsize; 24 | color: @actionsheet-item-color; 25 | height: @actionsheet-item-height; 26 | line-height: @actionsheet-item-height; 27 | background-color: @actionsheet-item-bg; 28 | &:after { 29 | .bottom-line(@actionsheet-item-border-color, 2); 30 | } 31 | } 32 | 33 | &-actionsheet-action { 34 | display: block; 35 | margin-top: .15rem; 36 | font-size: @actionsheet-action-fontsize; 37 | color: @actionsheet-action-color; 38 | height: @actionsheet-action-height; 39 | line-height: @actionsheet-action-height; 40 | background-color: @actionsheet-action-bg; 41 | } 42 | } 43 | 44 | 45 | -------------------------------------------------------------------------------- /src/styles/components/backtop.less: -------------------------------------------------------------------------------- 1 | @import "../common/variables"; 2 | @import "../common/mixins"; 3 | 4 | .@{css-prefix} { 5 | &-backtop { 6 | position: fixed; 7 | display: flex; 8 | align-items: center; 9 | justify-content: center; 10 | z-index: @base-zindex * 1000; 11 | 12 | &-inlay { 13 | border: 1px solid #C0C0C0; 14 | width: 1rem; 15 | height: 1rem; 16 | border-radius: 50%; 17 | background-color: rgba(255, 255, 255, .85); 18 | 19 | &:after { 20 | font-family: @iconfont-inlay; 21 | content: '\E788'; 22 | font-size: .5rem; 23 | color: #C0C0C0; 24 | } 25 | } 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /src/styles/components/badge.less: -------------------------------------------------------------------------------- 1 | @import "../common/variables"; 2 | @import "../common/mixins"; 3 | 4 | .@{css-prefix} { 5 | &-badge { 6 | color: @badge-default-color; 7 | font-size: 12px; 8 | position: relative; 9 | display: inline-block; 10 | border-radius: 1000px; 11 | line-height: 1; 12 | padding: 3px 6px; 13 | white-space: nowrap; 14 | background-color: @badge-default-bg; 15 | transform-origin: center center; 16 | } 17 | 18 | &-badge-radius { 19 | border-radius: 2px; 20 | &:after { 21 | border-radius: 2px; 22 | } 23 | } 24 | 25 | &-badge-primary { 26 | background-color: @badge-primary-bg; 27 | color: #FFF; 28 | } 29 | 30 | &-badge-danger { 31 | background-color: @badge-danger-bg; 32 | color: #FFF; 33 | } 34 | 35 | &-badge-warning { 36 | background-color: @badge-warning-bg; 37 | color: #FFF; 38 | } 39 | 40 | &-badge-hollow { 41 | background-color: @badge-hollow-bg; 42 | color: @badge-hollow-color; 43 | &:after { 44 | content: ''; 45 | width: 200%; 46 | height: 200%; 47 | border: 1px solid @badge-hollow-color; 48 | position: absolute; 49 | top: 0; 50 | left: 0; 51 | border-radius: 1rem; 52 | transform-origin: 0 0; 53 | transform: scale(.5); 54 | } 55 | } 56 | 57 | &-badge-radius:after { 58 | border-radius: 2px; 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /src/styles/components/canvasboard.less: -------------------------------------------------------------------------------- 1 | @import "../common/variables"; 2 | @import "../common/mixins"; 3 | 4 | .@{css-prefix} { 5 | 6 | &-canvasboard { 7 | width: 100%; 8 | height: 100%; 9 | 10 | .board { 11 | 12 | } 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /src/styles/components/checkbox.less: -------------------------------------------------------------------------------- 1 | @import "../common/variables"; 2 | @import "../common/mixins"; 3 | 4 | .@{css-prefix} { 5 | &-checkbox { 6 | display: inline-block; 7 | padding-right: 10px; 8 | > input[type="checkbox"] { 9 | position: absolute; 10 | left: -9999em; 11 | &:checked + .@{css-prefix}-checkbox-icon { 12 | background-color: currentColor; 13 | border-color: currentColor; 14 | > i { 15 | transform: translate(-50%, -50%) rotate(45deg) scale(1); 16 | transition: all .2s ease-in-out; 17 | } 18 | } 19 | &:disabled ~ .@{css-prefix}-checkbox-text { 20 | color: #CCC; 21 | } 22 | &:disabled + .@{css-prefix}-checkbox-icon { 23 | border-color: #CCC; 24 | background-color: #F3F3F3; 25 | > i { 26 | border-color: #CCC; 27 | } 28 | } 29 | } 30 | } 31 | 32 | &-checkbox-icon { 33 | border: 1px solid #CCC; 34 | border-radius: 2px; 35 | display: inline-block; 36 | position: relative; 37 | z-index: 10; 38 | vertical-align: bottom; 39 | pointer-events: none; 40 | > i { 41 | content: ''; 42 | position: absolute; 43 | top: 45%; 44 | left: 50%; 45 | border: 2px solid #FFF; 46 | border-top: 0; 47 | border-left: 0; 48 | transform: translate(-50%, -50%) rotate(45deg) scale(0); 49 | } 50 | } 51 | 52 | &-checkbox-text { 53 | margin-left: 1px; 54 | font-size: 15px; 55 | color: #666; 56 | pointer-events: none; 57 | } 58 | 59 | &-checkbox-circle { 60 | .@{css-prefix}-checkbox-icon { 61 | border-radius: 50%; 62 | } 63 | } 64 | } 65 | 66 | -------------------------------------------------------------------------------- /src/styles/components/checklist.less: -------------------------------------------------------------------------------- 1 | @import "../common/variables"; 2 | @import "../common/mixins"; 3 | 4 | .@{css-prefix} { 5 | &-checklist { 6 | background-color: #fff; 7 | position: relative; 8 | z-index: 1; 9 | &:after { 10 | .bottom-line(@line-color); 11 | } 12 | } 13 | 14 | &-checklist-alignright { 15 | .@{css-prefix}-checklist-content { 16 | order: -1; 17 | } 18 | .@{css-prefix}-checklist-item-icon { 19 | margin-left: 0; 20 | } 21 | } 22 | 23 | &-checklist-item { 24 | display: flex; 25 | position: relative; 26 | z-index: 1; 27 | margin-left: 12px; 28 | &:not(:last-child):after { 29 | .bottom-line(@line-color); 30 | } 31 | } 32 | 33 | &-checklist-item-icon { 34 | display: flex; 35 | justify-content: center; 36 | align-items: center; 37 | padding: 12px; 38 | margin-left: -12px; 39 | > input[type="checkbox"] { 40 | position: absolute; 41 | left: -9999em; 42 | &:checked + .@{css-prefix}-checklist-icon { 43 | background-color: currentColor; 44 | border-color: currentColor; 45 | > i { 46 | transform: translate(-50%, -50%) rotate(45deg) scale(1); 47 | transition: all .2s ease-in-out; 48 | } 49 | } 50 | &:disabled + .@{css-prefix}-checklist-icon { 51 | border-color: #CCC; 52 | background-color: #F3F3F3; 53 | > i { 54 | border-color: #CCC; 55 | } 56 | } 57 | } 58 | } 59 | 60 | &-checklist-icon { 61 | border: 1px solid #CCC; 62 | border-radius: 100px; 63 | display: block; 64 | position: relative; 65 | z-index: 10; 66 | pointer-events: none; 67 | width: 20px; 68 | height: 20px; 69 | > i { 70 | width: 6px; 71 | height: 12px; 72 | content: ''; 73 | position: absolute; 74 | top: 45%; 75 | left: 50%; 76 | border: 2px solid #FFF; 77 | border-top: 0; 78 | border-left: 0; 79 | transform: translate(-50%, -50%) rotate(45deg) scale(0); 80 | } 81 | } 82 | 83 | &-checklist-content { 84 | flex: 1; 85 | position: relative; 86 | color: #333; 87 | padding-right: 12px; 88 | } 89 | } 90 | 91 | -------------------------------------------------------------------------------- /src/styles/components/datetime.less: -------------------------------------------------------------------------------- 1 | @import "../common/variables"; 2 | @import "../common/mixins"; 3 | 4 | @datetime-item-height: 38px; 5 | 6 | .@{css-prefix} { 7 | &-datetime { 8 | position: fixed; 9 | bottom: 0; 10 | left: 0; 11 | width: 100%; 12 | z-index: @base-zindex * 1500 + 2; 13 | background-color: #FFF; 14 | transform: translateY(100%); 15 | transition: transform .25s; 16 | touch-action: none; 17 | will-change: transform; 18 | 19 | &-active { 20 | transform: translateY(0); 21 | } 22 | 23 | &-placeholder { 24 | color: #A1A1A1; 25 | font-size: inherit; 26 | } 27 | } 28 | 29 | &-datetime-input { 30 | width: 100%; 31 | } 32 | 33 | &-datetime-head { 34 | display: flex; 35 | justify-content: space-between; 36 | position: relative; 37 | background-color: #FBFBFB; 38 | &:after { 39 | .bottom-line(@line-color); 40 | } 41 | > a { 42 | height: 43px; 43 | padding: 0 30px; 44 | font-size: 15px; 45 | display: flex; 46 | align-items: center; 47 | color: #555; 48 | } 49 | > a:last-child { 50 | color: #0BB20C; 51 | } 52 | } 53 | 54 | &-datetime-content { 55 | position: relative; 56 | width: 100%; 57 | height: @datetime-item-height * 7; 58 | overflow: hidden; 59 | display: flex; 60 | } 61 | 62 | &-datetime-item { 63 | font-size: 16px; 64 | height: 100%; 65 | position: relative; 66 | flex: 1; 67 | } 68 | 69 | &-datetime-item-content { 70 | > span { 71 | width: 100%; 72 | display: block; 73 | height: @datetime-item-height; 74 | line-height: @datetime-item-height; 75 | text-align: center; 76 | } 77 | } 78 | 79 | &-datetime-item-box { 80 | height: 100%; 81 | } 82 | 83 | &-datetime-shade, 84 | &-datetime-indicator { 85 | pointer-events: none; 86 | position: absolute; 87 | left: 0; 88 | top: 0; 89 | height: 100%; 90 | width: 100%; 91 | } 92 | 93 | &-datetime-shade { 94 | z-index: 3; 95 | transform: translateZ(0px); 96 | background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6)), linear-gradient(to top, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6)); 97 | background-position: top, bottom; 98 | background-size: 100% @datetime-item-height * 3; 99 | background-repeat: no-repeat; 100 | } 101 | 102 | &-datetime-indicator { 103 | z-index: 4; 104 | display: flex; 105 | justify-content: center; 106 | flex-direction: column; 107 | > span { 108 | display: block; 109 | width: 100%; 110 | height: @datetime-item-height; 111 | position: relative; 112 | &:after { 113 | .top-line(@line-color); 114 | } 115 | &:before { 116 | .bottom-line(@line-color); 117 | } 118 | } 119 | } 120 | } 121 | -------------------------------------------------------------------------------- /src/styles/components/flexbox.less: -------------------------------------------------------------------------------- 1 | @import "../common/variables"; 2 | 3 | .@{css-prefix} { 4 | &-flexbox { 5 | display: flex; 6 | align-items: center; 7 | &-horizontal { 8 | 9 | } 10 | &-vertical { 11 | flex-direction: column; 12 | height: 100%; 13 | .@{css-prefix}-flexbox-item { 14 | width: 100%; 15 | } 16 | } 17 | &-item { 18 | flex: 1; 19 | &-start { 20 | align-self: flex-start; 21 | justify-self: flex-end; 22 | } 23 | &-center { 24 | align-self: center; 25 | } 26 | &-end { 27 | align-self: flex-end; 28 | } 29 | } 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /src/styles/components/grids.less: -------------------------------------------------------------------------------- 1 | @import "../common/variables"; 2 | @import "../common/mixins"; 3 | 4 | .m-grids() { 5 | overflow: hidden; 6 | position: relative; 7 | background-color: @grids-bg; 8 | &:before { 9 | .bottom-line(@grids-line-high-color, 1); 10 | } 11 | } 12 | 13 | .@{css-prefix} { 14 | 15 | &-grids-2 { 16 | .m-grids(); 17 | .@{css-prefix}-grids-item { 18 | width: 50%; 19 | &:not(:nth-child(2n)):before { 20 | .right-line(@grids-line-color); 21 | } 22 | } 23 | } 24 | 25 | &-grids-3 { 26 | .m-grids(); 27 | .@{css-prefix}-grids-item { 28 | width: 33.333333%; 29 | &:not(:nth-child(3n)):before { 30 | .right-line(@grids-line-color); 31 | } 32 | } 33 | } 34 | 35 | &-grids-4 { 36 | .m-grids(); 37 | .@{css-prefix}-grids-item { 38 | width: 25%; 39 | &:not(:nth-child(4n)):before { 40 | .right-line(@grids-line-color); 41 | } 42 | } 43 | } 44 | 45 | &-grids-5 { 46 | .m-grids(); 47 | .@{css-prefix}-grids-item { 48 | width: 20%; 49 | &:not(:nth-child(5n)):before { 50 | .right-line(@grids-line-color); 51 | } 52 | } 53 | } 54 | 55 | &-grids-item { 56 | width: 25%; 57 | float: left; 58 | position: relative; 59 | z-index: 0; 60 | padding: @grids-padding-horizontal 0; 61 | font-size: @grids-fontsize; 62 | &-center { 63 | display: flex; 64 | justify-content: center; 65 | align-items: center; 66 | } 67 | &:after { 68 | .bottom-line(@grids-line-color); 69 | } 70 | } 71 | 72 | &-grids-icon { 73 | height: .68rem; 74 | display: flex; 75 | justify-content: center; 76 | align-items: center; 77 | * { 78 | &:after, &:before { 79 | font-size: .54rem; 80 | } 81 | } 82 | img { 83 | height: 70%; 84 | } 85 | } 86 | 87 | &-grids-txt { 88 | .text-overflow(center); 89 | color: @grids-color; 90 | padding: 0 .2rem; 91 | } 92 | 93 | &-gridstitle { 94 | padding: .15rem + .2rem @body-padding-vertical .1rem; 95 | font-size: @cell-title-fontsize; 96 | text-align: left; 97 | color: @cell-title-color; 98 | position: relative; 99 | z-index: 1; 100 | background-color: @body-bg; 101 | &:after { 102 | .bottom-line(@line-color, 3); 103 | } 104 | } 105 | } 106 | -------------------------------------------------------------------------------- /src/styles/components/infinitescroll.less: -------------------------------------------------------------------------------- 1 | @import "../common/variables"; 2 | 3 | .@{css-prefix} { 4 | &-list-loading { 5 | padding: .1rem 0; 6 | text-align: center; 7 | font-size: .26rem; 8 | color: #999; 9 | height: .66rem; 10 | box-sizing: content-box; 11 | &-box { 12 | height: .66rem; 13 | overflow: hidden; 14 | line-height: .66rem; 15 | } 16 | img { 17 | height: .66rem; 18 | display: inline-block; 19 | } 20 | svg { 21 | width: .66rem; 22 | height: .66rem; 23 | } 24 | } 25 | 26 | &-list-donetip { 27 | font-size: .24rem; 28 | text-align: center; 29 | padding: .25rem 0; 30 | color: #777; 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /src/styles/components/input.less: -------------------------------------------------------------------------------- 1 | @import "../common/variables"; 2 | @import "../common/mixins"; 3 | 4 | .@{css-prefix} { 5 | &-input { 6 | display: flex; 7 | width: 100%; 8 | height: 100%; 9 | align-items: center; 10 | 11 | > input { 12 | display: block; 13 | width: 100%; 14 | height: 100%; 15 | border: none; 16 | font-size: inherit; 17 | &::-webkit-search-cancel-button { 18 | -webkit-appearance: none; 19 | } 20 | } 21 | 22 | &-clear, 23 | &-error, 24 | &-warn, 25 | &-password, 26 | &-success { 27 | display: flex; 28 | align-items: center; 29 | &:after { 30 | font-family: @iconfont-inlay; 31 | } 32 | } 33 | 34 | &-clear { 35 | height: 100%; 36 | padding-right: .15rem; 37 | padding-left: .2rem; 38 | } 39 | 40 | &-clear { 41 | &:after { 42 | content: '\E60C'; 43 | color: #B2B2B2; 44 | font-size: .3rem; 45 | } 46 | } 47 | &-error { 48 | &:after { 49 | content: '\E614'; 50 | color: #F43530; 51 | font-size: .4rem; 52 | } 53 | } 54 | 55 | &-warn { 56 | &:after { 57 | content: '\E614'; 58 | color: #10AEFF; 59 | font-size: .4rem; 60 | } 61 | } 62 | 63 | &-success { 64 | &:after { 65 | content: '\E601'; 66 | color: #09BB07; 67 | font-size: .4rem; 68 | } 69 | } 70 | 71 | &-password { 72 | &:after { 73 | content: '\E77E'; 74 | color: #B2B2B2; 75 | font-size: .45rem; 76 | } 77 | &-open:after { 78 | content: '\E77D'; 79 | color: #434343; 80 | } 81 | } 82 | } 83 | } 84 | -------------------------------------------------------------------------------- /src/styles/components/layout.less: -------------------------------------------------------------------------------- 1 | @import "../common/variables"; 2 | 3 | .@{css-prefix} { 4 | &-view { 5 | margin: 0 auto; 6 | max-width: @max-width; 7 | min-width: @min-width; 8 | &:before { 9 | content: ''; 10 | display: block; 11 | width: 100%; 12 | height: @navbar-height; 13 | } 14 | &:after { 15 | content: ''; 16 | display: block; 17 | width: 100%; 18 | height: @body-padding-bottom * 3; 19 | } 20 | } 21 | 22 | &-flexview { 23 | height: 100%; 24 | display: flex; 25 | flex-direction: column; 26 | margin: 0 auto; 27 | max-width: @max-width; 28 | min-width: @min-width; 29 | } 30 | 31 | &-scrollview { 32 | width: 100%; 33 | height: 100%; 34 | flex: 1; 35 | overflow-y: auto; 36 | overflow-x: hidden; 37 | -webkit-overflow-scrolling: touch; 38 | position: relative; 39 | margin-bottom: -1px; 40 | 41 | &:after { 42 | content: ''; 43 | display: block; 44 | width: 100%; 45 | height: @body-padding-bottom; 46 | } 47 | } 48 | } 49 | 50 | .ios .@{css-prefix}-scrollview { 51 | margin-top: 1px; 52 | } 53 | 54 | .hairline .@{css-prefix}-scrollview { 55 | margin-top: 0.5px; 56 | } 57 | -------------------------------------------------------------------------------- /src/styles/components/lightbox.less: -------------------------------------------------------------------------------- 1 | @import "../common/variables"; 2 | @import "../common/mixins"; 3 | 4 | .@{css-prefix} { 5 | &-lightbox { 6 | position: fixed; 7 | top: 0; 8 | left: 0; 9 | right: 0; 10 | bottom: 0; 11 | z-index: @base-zindex * 1500 + 2; 12 | background-color: rgba(0, 0, 0, 1); 13 | 14 | &-head { 15 | display: flex; 16 | color: #FFF; 17 | height: .9rem; 18 | align-items: center; 19 | position: absolute; 20 | top: 0; 21 | left: 0; 22 | width: 100%; 23 | z-index: @base-zindex * 1500 + 3; 24 | background-color: rgba(0, 0, 0, 0.3); 25 | transform: translate(0, 0); 26 | transition: transform .2s; 27 | justify-content: space-between; 28 | > span { 29 | font-size: .24rem; 30 | padding-left: .24rem; 31 | } 32 | > a { 33 | padding-right: .24rem; 34 | font-size: 13px; 35 | } 36 | } 37 | 38 | &-img { 39 | display: flex; 40 | align-items: center; 41 | width: 100%; 42 | height: 100%; 43 | will-change: opacity; 44 | transform-origin: center center; 45 | transition: cubic-bezier(.4, 0, .22, 1); 46 | } 47 | 48 | &-foot { 49 | transform: translate(0, 0); 50 | transition: transform .2s; 51 | position: absolute; 52 | bottom: 0; 53 | left: 0; 54 | width: 100%; 55 | color: #fff; 56 | z-index: @base-zindex * 1500 + 2; 57 | background-color: rgba(0, 0, 0, 0.3); 58 | padding: .24rem; 59 | } 60 | 61 | &-scroller { 62 | -webkit-overflow-scrolling: touch; 63 | max-height: 2rem; 64 | overflow-y: auto; 65 | line-height: .34rem; 66 | } 67 | 68 | &-up-hide { 69 | transform: translate(0, -100%); 70 | } 71 | 72 | &-down-hide { 73 | transform: translate(0, 100%); 74 | } 75 | 76 | &-loading { 77 | width: 30px; 78 | height: 30px; 79 | position: absolute; 80 | top: 50%; 81 | left: 50%; 82 | z-index: 0; 83 | margin-left: -15px; 84 | margin-top: -15px; 85 | } 86 | 87 | &-tip { 88 | position: fixed; 89 | top: 0; 90 | left: 0; 91 | height: 100%; 92 | width: 100%; 93 | background-color: rgba(0, 0, 0, .85); 94 | z-index: @base-zindex * 1500 + 5; 95 | display: flex; 96 | align-items: center; 97 | justify-content: center; 98 | > img { 99 | width: 2.4rem; 100 | } 101 | } 102 | } 103 | } 104 | -------------------------------------------------------------------------------- /src/styles/components/mask.less: -------------------------------------------------------------------------------- 1 | @import "../common/variables"; 2 | @import "../common/mixins"; 3 | 4 | .@{css-prefix} { 5 | &-mask { 6 | position: fixed; 7 | bottom: 0; 8 | right: 0; 9 | left: 0; 10 | top: 0; 11 | display: flex; 12 | justify-content: center; 13 | align-items: center; 14 | pointer-events: none; 15 | transition: opacity .2s ease-in; 16 | opacity: 0; 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/styles/components/navbar.less: -------------------------------------------------------------------------------- 1 | @import "../common/variables"; 2 | @import "../common/mixins"; 3 | 4 | .@{css-prefix} { 5 | &-navbar { 6 | height: @navbar-height; 7 | position: relative; 8 | display: flex; 9 | z-index: 5; 10 | &:after { 11 | .bottom-line(currentColor); 12 | } 13 | 14 | &-fixed { 15 | position: fixed; 16 | top: 0; 17 | left: 0; 18 | width: 100%; 19 | z-index: @base-zindex * 100; 20 | } 21 | 22 | &-item { 23 | flex: 0 0 (100% - @navbar-center-width) / 2; 24 | padding: 0 @body-padding-vertical / 1.2; 25 | font-size: @navbar-item-fontsize; 26 | white-space: nowrap; 27 | overflow: hidden; 28 | display: flex; 29 | align-items: center; 30 | color: inherit; 31 | &:first-child { 32 | order: 1; 33 | margin-right: -(100% - @navbar-center-width) / 2; 34 | } 35 | &:last-child { 36 | order: 3; 37 | justify-content: flex-end; 38 | > a { 39 | justify-content: flex-end; 40 | } 41 | } 42 | > a { 43 | display: flex; 44 | align-items: center; 45 | height: @navbar-height; 46 | min-width: (100% - @navbar-center-width) / 2; /* for low version android */ 47 | flex: 1; 48 | } 49 | } 50 | 51 | &-center-box { 52 | order: 2; 53 | height: @navbar-height; 54 | width: @navbar-center-width; 55 | margin-left: (100% - @navbar-center-width) / 2; 56 | } 57 | 58 | &-center { 59 | width: 100%; 60 | display: flex; 61 | justify-content: center; 62 | align-items: center; 63 | height: inherit; 64 | &-title { 65 | white-space: nowrap; 66 | overflow: hidden; 67 | text-overflow: ellipsis; 68 | } 69 | img { 70 | height: 60%; 71 | } 72 | } 73 | } 74 | 75 | &-back-icon:before, 76 | &-next-icon:before { 77 | display: inline-block; 78 | font-family: @iconfont-inlay; 79 | font-size: @navbar-icon-fontsize; 80 | color: inherit; 81 | vertical-align: middle; 82 | margin-top: -.05rem; 83 | } 84 | 85 | &-back-icon:before { 86 | content: '\e607'; 87 | } 88 | 89 | &-next-icon:before { 90 | content: '\e608'; 91 | } 92 | } 93 | -------------------------------------------------------------------------------- /src/styles/components/picker.less: -------------------------------------------------------------------------------- 1 | @import '../common/variables'; 2 | @import '../common/mixins'; 3 | 4 | @picker-item-height: 38px; 5 | 6 | .@{css-prefix} { 7 | &-picker { 8 | position: fixed; 9 | bottom: 0; 10 | left: 0; 11 | width: 100%; 12 | z-index: @base-zindex * 1500 + 2; 13 | background-color: #fff; 14 | transform: translateY(100%); 15 | transition: transform 0.25s; 16 | touch-action: none; 17 | will-change: transform; 18 | 19 | &-active { 20 | transform: translateY(0); 21 | } 22 | 23 | &-placeholder { 24 | color: #a1a1a1; 25 | font-size: inherit; 26 | } 27 | } 28 | 29 | &-picker-head { 30 | display: flex; 31 | justify-content: space-between; 32 | position: relative; 33 | background-color: #fbfbfb; 34 | &:after { 35 | .bottom-line(@line-color); 36 | } 37 | > a { 38 | height: 43px; 39 | padding: 0 30px; 40 | font-size: 15px; 41 | display: flex; 42 | align-items: center; 43 | color: #555; 44 | } 45 | > a:last-child { 46 | color: #0bb20c; 47 | } 48 | } 49 | 50 | &-picker-content { 51 | position: relative; 52 | width: 100%; 53 | height: @picker-item-height * 7; 54 | overflow: hidden; 55 | display: flex; 56 | } 57 | 58 | &-picker-item { 59 | font-size: 16px; 60 | height: 100%; 61 | position: relative; 62 | flex: 1; 63 | } 64 | 65 | &-picker-item-content { 66 | > span { 67 | width: 100%; 68 | display: block; 69 | height: @picker-item-height; 70 | line-height: @picker-item-height; 71 | text-align: center; 72 | } 73 | } 74 | 75 | &-picker-item-box { 76 | height: 100%; 77 | } 78 | 79 | &-picker-shade, 80 | &-picker-indicator { 81 | pointer-events: none; 82 | position: absolute; 83 | left: 0; 84 | top: 0; 85 | height: 100%; 86 | width: 100%; 87 | } 88 | 89 | &-picker-shade { 90 | z-index: 3; 91 | transform: translateZ(0px); 92 | background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6)), 93 | linear-gradient(to top, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6)); 94 | background-position: top, bottom; 95 | background-size: 100% @picker-item-height * 3; 96 | background-repeat: no-repeat; 97 | } 98 | 99 | &-picker-indicator { 100 | z-index: 4; 101 | display: flex; 102 | justify-content: center; 103 | flex-direction: column; 104 | > span { 105 | display: block; 106 | width: 100%; 107 | height: @picker-item-height; 108 | position: relative; 109 | &:after { 110 | .top-line(@line-color); 111 | } 112 | &:before { 113 | .bottom-line(@line-color); 114 | } 115 | } 116 | } 117 | } 118 | -------------------------------------------------------------------------------- /src/styles/components/popup.less: -------------------------------------------------------------------------------- 1 | @import "../common/variables"; 2 | @import "../common/mixins"; 3 | 4 | .@{css-prefix} { 5 | &-popup { 6 | position: fixed; 7 | background-color: #FFF; 8 | z-index: @base-zindex * 1500 + 1; 9 | transition: transform .2s; 10 | pointer-events: none; 11 | display: flex; 12 | flex-direction: column; 13 | 14 | &-content { 15 | flex: 1; 16 | position: relative; 17 | overflow-y: auto; 18 | -webkit-overflow-scrolling: touch; 19 | } 20 | 21 | &-left { 22 | transform: translate(-100%, 0); 23 | left: 0; 24 | top: 0; 25 | height: 100%; 26 | } 27 | 28 | &-right { 29 | transform: translate(100%, 0); 30 | right: 0; 31 | top: 0; 32 | height: 100%; 33 | } 34 | 35 | &-bottom { 36 | transform: translate(0, 100%); 37 | right: 0; 38 | bottom: 0; 39 | } 40 | 41 | &-show { 42 | pointer-events: auto; 43 | transform: translate(0, 0); 44 | } 45 | 46 | &-center { 47 | z-index: @base-zindex * 1500 + 2; 48 | position: fixed; 49 | top: 50%; 50 | left: 50%; 51 | opacity: 0; 52 | transform: translate(-50%, -50%) scale(.95); 53 | transform-origin: 50% 50%; 54 | transition: transform .1s; 55 | pointer-events: none; 56 | * { 57 | pointer-events: none; 58 | } 59 | 60 | &.@{css-prefix}-popup-show { 61 | opacity: 1; 62 | transform: translate(-50%, -50%) scale(1); 63 | pointer-events: auto; 64 | * { 65 | pointer-events: auto; 66 | } 67 | } 68 | 69 | } 70 | } 71 | } 72 | -------------------------------------------------------------------------------- /src/styles/components/preview.less: -------------------------------------------------------------------------------- 1 | @import "../common/variables"; 2 | @import "../common/mixins"; 3 | 4 | .@{css-prefix} { 5 | &-preview { 6 | background-color: #fff; 7 | position: relative; 8 | z-index: 2; 9 | &:before { 10 | .top-line(@line-color); 11 | } 12 | &:after { 13 | .bottom-line(@line-color); 14 | } 15 | 16 | &-header { 17 | height: 1rem; 18 | display: flex; 19 | justify-content: space-between; 20 | align-items: center; 21 | margin-left: .24rem; 22 | padding-right: .24rem; 23 | position: relative; 24 | color: #999; 25 | font-size: .28rem; 26 | margin-bottom: .2rem; 27 | &:after { 28 | .bottom-line(@line-color); 29 | } 30 | > * { 31 | white-space: nowrap; 32 | overflow: hidden; 33 | text-overflow: ellipsis; 34 | display: block; 35 | flex: 1; 36 | &:first-child { 37 | margin-right: .2rem; 38 | } 39 | &:last-child { 40 | text-align: right; 41 | color: #333; 42 | font-size: .32rem; 43 | } 44 | } 45 | } 46 | 47 | &-item { 48 | padding: 0 .24rem; 49 | font-size: .27rem; 50 | color: #999; 51 | display: flex; 52 | padding-bottom: .15rem; 53 | > * { 54 | display: block; 55 | &:first-child { 56 | min-width: 1.1rem; 57 | text-align-last: justify; 58 | margin-right: .4rem; 59 | height: 100%; 60 | text-align: right; 61 | } 62 | &:last-child { 63 | word-break: normal; 64 | word-wrap: break-word; 65 | text-align: right; 66 | line-height: .45rem; 67 | flex: 1; 68 | } 69 | } 70 | } 71 | 72 | &-item:last-child { 73 | padding-bottom: .25rem; 74 | } 75 | 76 | &-footer { 77 | position: relative; 78 | display: flex; 79 | height: 1rem; 80 | align-items: center; 81 | font-size: .28rem; 82 | color: #999; 83 | margin-top: .1rem; 84 | > * { 85 | flex: 1; 86 | height: inherit; 87 | display: flex; 88 | align-items: center; 89 | position: relative; 90 | justify-content: center; 91 | &:not(:first-child):after { 92 | content: ''; 93 | position: absolute; 94 | top: 0; 95 | left: 0; 96 | .left-line(@line-color); 97 | } 98 | } 99 | &:before { 100 | .top-line(@line-color); 101 | } 102 | } 103 | } 104 | } 105 | -------------------------------------------------------------------------------- /src/styles/components/progressbar.less: -------------------------------------------------------------------------------- 1 | @import "../common/variables"; 2 | @import "../common/mixins"; 3 | 4 | .@{css-prefix} { 5 | &-progressbar { 6 | position: relative; 7 | color: #333; 8 | width: 100%; 9 | height: 100%; 10 | > svg { 11 | width: 100%; 12 | > path { 13 | transition: all 1s linear; 14 | } 15 | } 16 | &-content { 17 | position: absolute; 18 | top: 50%; 19 | left: 50%; 20 | font-size: .3rem; 21 | transform: translate(-50%, -50%); 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /src/styles/components/radio.less: -------------------------------------------------------------------------------- 1 | @import "../common/variables"; 2 | @import "../common/mixins"; 3 | 4 | .@{css-prefix} { 5 | &-radio { 6 | display: inline-block; 7 | padding-right: 10px; 8 | 9 | &-icon { 10 | border: 1px solid #CCC; 11 | border-radius: 50%; 12 | display: inline-block; 13 | position: relative; 14 | z-index: 10; 15 | vertical-align: bottom; 16 | pointer-events: none; 17 | > i { 18 | content: ''; 19 | position: absolute; 20 | left: 50%; 21 | top: 50%; 22 | border-radius: 50%; 23 | background-color: currentColor; 24 | opacity: 0; 25 | transform: translate(-50%, -50%) scale(.1); 26 | } 27 | } 28 | 29 | &-text { 30 | margin-left: 1px; 31 | font-size: 15px; 32 | color: #666; 33 | pointer-events: none; 34 | } 35 | 36 | > input[type="radio"] { 37 | position: absolute; 38 | left: -9999em; 39 | &:checked + .@{css-prefix}-radio-icon { 40 | border-color: currentColor; 41 | > i { 42 | opacity: 1; 43 | transform: translate(-50%, -50%) scale(1); 44 | transition: all .2s ease-in-out; 45 | } 46 | } 47 | &:disabled ~ .@{css-prefix}-radio-text { 48 | color: #CCC; 49 | } 50 | &:disabled + .@{css-prefix}-radio-icon { 51 | border-color: #CCC; 52 | background-color: #F3F3F3; 53 | > i { 54 | background-color: #CCC; 55 | } 56 | } 57 | } 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /src/styles/components/rate.less: -------------------------------------------------------------------------------- 1 | @import "../common/variables"; 2 | @import "../common/mixins"; 3 | 4 | .@{css-prefix} { 5 | &-rate { 6 | display: flex; 7 | align-items: center; 8 | a { 9 | &:after { 10 | content: '\E7AD'; 11 | font-family: @iconfont-inlay; 12 | font-size: inherit; 13 | color: inherit; 14 | } 15 | &.rate-active:after { 16 | content: '\E7AC'; 17 | } 18 | } 19 | &-text { 20 | color: #657180; 21 | margin-left: .1rem; 22 | font-size: .3rem; 23 | } 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src/styles/components/rollnotice.less: -------------------------------------------------------------------------------- 1 | @import "../common/variables"; 2 | 3 | .@{css-prefix} { 4 | &-rollnotice { 5 | overflow: hidden; 6 | width: 100%; 7 | background-color: #fff; 8 | 9 | &-box { 10 | height: inherit; 11 | } 12 | 13 | &-align { 14 | &-left { 15 | justify-content: flex-start; 16 | } 17 | 18 | &-right { 19 | justify-content: flex-end; 20 | } 21 | 22 | &-center { 23 | justify-content: center; 24 | } 25 | } 26 | 27 | &-item { 28 | height: inherit; 29 | display: flex; 30 | align-items: center; 31 | justify-content: inherit; 32 | } 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /src/styles/components/scrolltab.less: -------------------------------------------------------------------------------- 1 | @import "../common/variables"; 2 | @import "../common/mixins"; 3 | 4 | .@{css-prefix} { 5 | &-scrolltab { 6 | position: absolute; 7 | top: 0; 8 | left: 0; 9 | right: 0; 10 | bottom: 0; 11 | display: flex; 12 | &-nav { 13 | height: 100%; 14 | background-color: #F5F5F5; 15 | overflow-y: auto; 16 | -webkit-overflow-scrolling: touch; 17 | position: relative; 18 | z-index: 1; 19 | &:after { 20 | .right-line(#DFDFDF); 21 | } 22 | } 23 | 24 | 25 | &-item { 26 | padding: 0 .3rem; 27 | height: 1rem; 28 | display: flex; 29 | align-items: center; 30 | position: relative; 31 | z-index: 1; 32 | 33 | &:after { 34 | .bottom-line(#DFDFDF); 35 | } 36 | &:before { 37 | .right-line(#DFDFDF); 38 | } 39 | &:active { 40 | background: none; /* for firefox */ 41 | } 42 | } 43 | 44 | &-active { 45 | background-color: #FFF; 46 | &:before { 47 | .right-line(#FFF); 48 | } 49 | &:active { 50 | background-color: #FFF; 51 | } 52 | } 53 | 54 | &-icon { 55 | margin-right: .2rem; 56 | font-size: .32rem; 57 | display: flex; 58 | align-items: center; 59 | justify-content: center; 60 | > img { 61 | height: .4rem; 62 | display: inline-block; 63 | } 64 | } 65 | 66 | &-title { 67 | font-size: .3rem; 68 | color: #666; 69 | overflow-x: hidden; 70 | text-overflow: ellipsis; 71 | white-space: nowrap; 72 | max-width: 1.6rem; 73 | } 74 | 75 | &-content { 76 | height: 100%; 77 | background-color: #FFF; 78 | overflow-y: auto; 79 | -webkit-overflow-scrolling: touch; 80 | flex: 1; 81 | padding: 0 .24rem .24rem .24rem; 82 | position: relative; 83 | } 84 | 85 | &-content-title { 86 | font-size: .3rem; 87 | font-weight: normal; 88 | color: #555; 89 | display: block; 90 | padding-bottom: .1rem; 91 | padding-top: .32rem; 92 | margin-bottom: .2rem; 93 | position: relative; 94 | z-index: 1; 95 | &:after { 96 | .bottom-line(@line-high-color); 97 | } 98 | } 99 | } 100 | } 101 | -------------------------------------------------------------------------------- /src/styles/components/search.less: -------------------------------------------------------------------------------- 1 | @import "../common/variables"; 2 | @import "../common/mixins"; 3 | 4 | .@{css-prefix} { 5 | &-search { 6 | display: flex; 7 | flex-direction: column; 8 | 9 | &-fly { 10 | width: 100%; 11 | height: 100%; 12 | position: fixed; 13 | left: 0; 14 | z-index: @base-zindex * 1500; 15 | opacity: 0; 16 | pointer-events: none; 17 | } 18 | 19 | &-show { 20 | opacity: 1; 21 | pointer-events: auto; 22 | } 23 | } 24 | 25 | &-search-input { 26 | background-color: #EFEFF4; 27 | border-left: none; 28 | border-right: none; 29 | padding: 10px 0 10px 10px; 30 | position: relative; 31 | display: flex; 32 | &:after { 33 | .bottom-line(@line-color); 34 | } 35 | &:before { 36 | .top-line(@line-color); 37 | } 38 | > .search-input { 39 | width: 100%; 40 | height: 30px; 41 | background-color: #fff; 42 | border: none; 43 | border-radius: 3px; 44 | display: flex; 45 | align-items: center; 46 | margin-right: 10px; 47 | padding-top: 1px; 48 | overflow: hidden; 49 | 50 | .search-icon { 51 | display: flex; 52 | align-items: center; 53 | padding-left: 8px; 54 | padding-right: 5px; 55 | line-height: 28px; 56 | &:after { 57 | content: '\E626'; 58 | font-family: @iconfont-inlay; 59 | font-size: 15px; 60 | color: #B2B2B2; 61 | } 62 | } 63 | } 64 | > .cancel-text { 65 | display: block; 66 | white-space: nowrap; 67 | padding-left: 10px; 68 | height: 30px; 69 | line-height: 32px; 70 | color: #0BB20C; 71 | font-size: 14px; 72 | padding-right: 10px; 73 | margin-left: -10px; 74 | } 75 | } 76 | 77 | &-search-list { 78 | overflow: auto; 79 | flex: 1; 80 | background-color: #FFF; 81 | -webkit-overflow-scrolling: touch; 82 | 83 | &-item { 84 | position: relative; 85 | height: 45px; 86 | line-height: 45px; 87 | margin-left: 12px; 88 | padding-left: 4px; 89 | overflow: hidden; 90 | white-space: nowrap; 91 | padding-right: 12px; 92 | text-overflow: ellipsis; 93 | &:after { 94 | .bottom-line(@line-color); 95 | } 96 | } 97 | } 98 | } 99 | -------------------------------------------------------------------------------- /src/styles/components/slider.less: -------------------------------------------------------------------------------- 1 | @import "../common/variables"; 2 | @import "../common/mixins"; 3 | 4 | @keyframes yd-kf-opacity-in { 5 | 0% { 6 | opacity: 0; 7 | } 8 | 100% { 9 | opacity: 1; 10 | } 11 | } 12 | 13 | .@{css-prefix} { 14 | &-slider { 15 | width: 100%; 16 | overflow: hidden; 17 | position: relative; 18 | 19 | &-wrapper { 20 | display: flex; 21 | width: 100%; 22 | height: 100%; 23 | transform: translate3d(0px, 0px, 0px); 24 | position: relative; 25 | z-index: 1; 26 | align-items: center; 27 | transition-property: transform; 28 | &-vertical { 29 | flex-direction: column; 30 | } 31 | } 32 | 33 | &-item { 34 | width: 100%; 35 | height: 100%; 36 | flex-shrink: 0; 37 | a { 38 | display: block; 39 | } 40 | img { 41 | width: 100%; 42 | display: block; 43 | } 44 | } 45 | 46 | &-pagination { 47 | position: absolute; 48 | width: 100%; 49 | z-index: 2; 50 | left: 0; 51 | bottom: .1rem; 52 | pointer-events: none; 53 | display: flex; 54 | align-items: flex-end; 55 | justify-content: center; 56 | opacity: 0; 57 | animation: yd-kf-opacity-in .3s linear .4s forwards; 58 | 59 | &-vertical { 60 | width: 0; 61 | height: 100%; 62 | flex-direction: column; 63 | bottom: 0; 64 | left: auto; 65 | right: .1rem; 66 | justify-content: center; 67 | } 68 | 69 | &-item { 70 | margin: .05rem; 71 | width: 6px; 72 | height: 6px; 73 | display: inline-block; 74 | border-radius: 100%; 75 | 76 | &-active { 77 | width: 14px; 78 | border-radius: 100px; 79 | } 80 | } 81 | } 82 | } 83 | } 84 | 85 | -------------------------------------------------------------------------------- /src/styles/components/spinner.less: -------------------------------------------------------------------------------- 1 | @import "../common/variables"; 2 | @import "../common/mixins"; 3 | 4 | .@{css-prefix} { 5 | &-spinner { 6 | border-radius: 1px; 7 | display: inline-block; 8 | position: relative; 9 | overflow: hidden; 10 | > span { 11 | float: left; 12 | width: 25%; 13 | height: 100%; 14 | text-align: center; 15 | font-weight: bold; 16 | color: #666; 17 | letter-spacing: 0; 18 | position: relative; 19 | overflow: hidden; 20 | .tap-color(#FAFAFA, .95); 21 | > i:after { 22 | font-family: @iconfont-inlay; 23 | color: #777; 24 | font-size: .16rem; 25 | position: absolute; 26 | top: 50%; 27 | left: 50%; 28 | transform: translate(-45%, -40%); 29 | } 30 | &:last-child > i:after { 31 | content: '\E602'; 32 | } 33 | &:first-child > i:after { 34 | content: '\E60B'; 35 | } 36 | } 37 | > input { 38 | letter-spacing: 0; 39 | float: left; 40 | height: inherit; 41 | text-align: center; 42 | color: #666; 43 | border: none; 44 | font-size: .26rem; 45 | background-color: #FFF; 46 | } 47 | &-square { 48 | &:after { 49 | .top-line(@line-color, 5); 50 | top: 0; 51 | } 52 | &:before { 53 | .bottom-line(@line-color, 5); 54 | } 55 | > span { 56 | &:last-child { 57 | &:after { 58 | .right-line(@line-color, 5); 59 | } 60 | } 61 | &:first-child { 62 | &:before { 63 | .left-line(@line-color, 5); 64 | } 65 | } 66 | } 67 | } 68 | &-circle { 69 | > span { 70 | border-radius: 100px; 71 | display: block; 72 | background-color: #F5F5F5; 73 | } 74 | } 75 | } 76 | } 77 | 78 | -------------------------------------------------------------------------------- /src/styles/components/switch.less: -------------------------------------------------------------------------------- 1 | @import "../common/variables"; 2 | 3 | .@{css-prefix} { 4 | &-switch { 5 | position: relative; 6 | z-index: 10; 7 | display: block; 8 | width: 48px; 9 | height: 27px; 10 | left: 0; 11 | border: 1px solid #DFDFDF; 12 | border-radius: 16px; 13 | -webkit-appearance: none; 14 | 15 | &:before, &:after { 16 | content: ''; 17 | position: absolute; 18 | top: 0; 19 | left: 0; 20 | height: 25px; 21 | border-radius: 15px; 22 | transition: transform .3s; 23 | } 24 | 25 | &:before { 26 | width: 46px; 27 | background-color: #FDFDFD; 28 | } 29 | 30 | &:after { 31 | width: 25px; 32 | background-color: #FFF; 33 | box-shadow: 0 1px 3px rgba(0, 0, 0, .4); 34 | } 35 | 36 | &:checked { 37 | border-color: currentColor; 38 | background-color: currentColor; 39 | &:before { 40 | transform: scale(0); 41 | } 42 | &:after { 43 | transform: translateX(21px); 44 | } 45 | } 46 | 47 | &-small { 48 | width: 42px; 49 | height: 22px; 50 | &:before, &:after { 51 | height: 20px; 52 | } 53 | &:before { 54 | width: 40px; 55 | } 56 | &:after { 57 | width: 20px; 58 | } 59 | &:checked:after { 60 | transform: translateX(20px); 61 | } 62 | } 63 | 64 | &-large { 65 | width: 52px; 66 | height: 32px; 67 | &:before, &:after { 68 | height: 30px; 69 | } 70 | &:before { 71 | width: 50px; 72 | } 73 | &:after { 74 | width: 30px; 75 | } 76 | &:checked:after { 77 | transform: translateX(20px); 78 | } 79 | } 80 | 81 | &[disabled] { 82 | opacity: 0.5; 83 | } 84 | } 85 | } 86 | -------------------------------------------------------------------------------- /src/styles/components/tab.less: -------------------------------------------------------------------------------- 1 | @import "../common/variables"; 2 | @import "../common/mixins"; 3 | 4 | .@{css-prefix} { 5 | &-tab { 6 | &-box { 7 | overflow: auto; 8 | -webkit-overflow-scrolling: touch; 9 | } 10 | 11 | &-nav-nomal { 12 | .yd-tab-nav { 13 | display: flex; 14 | .yd-tab-nav-item { 15 | width: 1%; 16 | flex: 1; 17 | } 18 | } 19 | } 20 | 21 | &-nav-scoll { 22 | .yd-tab-nav { 23 | .yd-tab-nav-item { 24 | padding: 0 20px; 25 | display: inline-block; 26 | } 27 | } 28 | } 29 | 30 | &-nav { 31 | position: relative; 32 | z-index: 0; 33 | 34 | &:after { 35 | .bottom-line(currentColor, 3); 36 | } 37 | 38 | &-item { 39 | text-align: center; 40 | height: 100%; 41 | display: block; 42 | position: relative; 43 | 44 | &-label { 45 | color: inherit; 46 | display: inline-block; 47 | position: relative; 48 | } 49 | } 50 | 51 | .@{css-prefix}-tab-active { 52 | color: currentColor; 53 | &:before { 54 | content: ''; 55 | width: 70%; 56 | height: 2px; 57 | position: absolute; 58 | left: 50%; 59 | bottom: 0; 60 | margin-left: -35%; 61 | z-index: 4; 62 | background-color: currentColor; 63 | } 64 | } 65 | } 66 | 67 | &-panel { 68 | position: relative; 69 | overflow: hidden; 70 | 71 | &-item { 72 | width: 100%; 73 | position: absolute; 74 | top: 0; 75 | overflow: hidden; 76 | transform: translateX(-100%); 77 | 78 | &.@{css-prefix}-tab-active { 79 | position: relative; 80 | transition: transform .15s; 81 | transform: translateX(0); 82 | 83 | & ~ .@{css-prefix}-tab-panel-item { 84 | transform: translateX(100%); 85 | } 86 | } 87 | } 88 | } 89 | 90 | &-badge { 91 | position: absolute; 92 | top: 2px; 93 | z-index: 9; 94 | line-height: 0; 95 | } 96 | 97 | &-dot { 98 | position: absolute; 99 | top: -10px; 100 | > i { 101 | display: inline-block; 102 | width: 6px; 103 | height: 6px; 104 | border-radius: 100px; 105 | } 106 | } 107 | } 108 | } 109 | -------------------------------------------------------------------------------- /src/styles/components/tabbar.less: -------------------------------------------------------------------------------- 1 | @import "../common/variables"; 2 | @import "../common/mixins"; 3 | 4 | .@{css-prefix} { 5 | &-tabbar { 6 | width: 100%; 7 | position: relative; 8 | display: flex; 9 | align-items: center; 10 | &:after { 11 | .top-line(currentColor); 12 | } 13 | 14 | &-fixed { 15 | position: fixed; 16 | bottom: 0; 17 | left: 0; 18 | z-index: @base-zindex * 100; 19 | } 20 | 21 | &-item { 22 | flex: 1; 23 | height: 100%; 24 | display: flex; 25 | flex-direction: column; 26 | justify-content: center; 27 | align-items: center; 28 | } 29 | 30 | &-active { 31 | color: inherit; 32 | .@{css-prefix}-tabbar-icon { 33 | color: inherit; 34 | } 35 | } 36 | 37 | &-badge { 38 | position: absolute; 39 | top: -.1rem; 40 | left: 100%; 41 | z-index: 999; 42 | margin-left: -.15rem; 43 | } 44 | 45 | &-dot { 46 | display: block; 47 | width: 8px; 48 | height: 8px; 49 | background-color: #EF4F4F; 50 | border-radius: 50%; 51 | position: absolute; 52 | border: 1px solid #FFF; 53 | top: 0; 54 | left: 100%; 55 | z-index: 999; 56 | margin-left: -4px; 57 | } 58 | 59 | &-icon { 60 | display: flex; 61 | align-items: center; 62 | position: relative; 63 | img { 64 | height: inherit; 65 | } 66 | } 67 | 68 | &-txt { 69 | display: inline-block; 70 | font-size: inherit; 71 | } 72 | 73 | &-other { 74 | display: flex; 75 | height: 100%; 76 | align-items: center; 77 | img { 78 | display: block; 79 | } 80 | } 81 | } 82 | } 83 | -------------------------------------------------------------------------------- /src/styles/components/textarea.less: -------------------------------------------------------------------------------- 1 | @import "../common/variables"; 2 | 3 | .@{css-prefix} { 4 | &-textarea { 5 | padding: .2rem 0; 6 | background-color: #fff; 7 | width: 100%; 8 | 9 | > textarea { 10 | border: none; 11 | width: 100%; 12 | display: block; 13 | height: 1.5rem; 14 | font-size: .26rem; 15 | color: inherit; 16 | background-color: transparent; 17 | } 18 | 19 | &-readonly { 20 | opacity: .3; 21 | } 22 | 23 | &-counter { 24 | font-size: .28rem; 25 | color: #B2B2B2; 26 | text-align: right; 27 | padding-top: .06rem; 28 | } 29 | } 30 | } 31 | 32 | -------------------------------------------------------------------------------- /src/styles/components/timeline.less: -------------------------------------------------------------------------------- 1 | @import "../common/variables"; 2 | @import "../common/mixins"; 3 | 4 | .@{css-prefix} { 5 | &-timeline { 6 | background-color: #fff; 7 | font-size: 13px; 8 | color: #6e6e6e; 9 | overflow: hidden; 10 | position: relative; 11 | z-index: 1; 12 | &:after { 13 | .top-line(@line-color); 14 | } 15 | 16 | &-content { 17 | margin-left: 16px; 18 | border-left: 1px solid #E4E5E9; 19 | } 20 | 21 | &-item, 22 | &-custom-item { 23 | padding: 16px 12px 16px 0; 24 | margin-left: 16px; 25 | position: relative; 26 | &:not(:last-child):after { 27 | .bottom-line(@line-color); 28 | } 29 | 30 | .@{css-prefix}-timeline-icon { 31 | content: ''; 32 | position: absolute; 33 | z-index: 1; 34 | left: -16px; 35 | display: block; 36 | top: 19px; 37 | transform: translate(-50%, 0); 38 | } 39 | 40 | &:first-child { 41 | margin-top: 16px; 42 | padding-top: 0; 43 | color: #000; 44 | > .@{css-prefix}-timeline-icon { 45 | top: 3px; 46 | } 47 | } 48 | 49 | &:last-child:before { 50 | content: ''; 51 | width: 1px; 52 | height: 100%; 53 | background-color: #FFF; 54 | position: absolute; 55 | left: -17px; 56 | top: 19px; 57 | } 58 | } 59 | 60 | &-item { 61 | .@{css-prefix}-timeline-icon { 62 | width: 8px; 63 | height: 8px; 64 | border-radius: 99px; 65 | background-color: #E4E5E9; 66 | } 67 | &:first-child { 68 | > .@{css-prefix}-timeline-icon { 69 | background-color: #f23030; 70 | width: 10px; 71 | height: 10px; 72 | } 73 | &:before { 74 | content: ''; 75 | width: 16px; 76 | height: 16px; 77 | position: absolute; 78 | z-index: 0; 79 | top: 0; 80 | left: -24px; 81 | background-color: #FBBFBF; 82 | border-radius: 99px; 83 | } 84 | } 85 | } 86 | 87 | &-custom-item { 88 | &:first-child > .@{css-prefix}-timeline-icon { 89 | top: 0; 90 | } 91 | } 92 | } 93 | } 94 | -------------------------------------------------------------------------------- /src/ydui.flexible.js: -------------------------------------------------------------------------------- 1 | /** 2 | * YDUI 可伸缩布局方案 3 | * rem计算方式：设计图尺寸px / 100 = 实际rem 例: 100px = 1rem 4 | */ 5 | !function (window) { 6 | 7 | /* 设计图文档宽度 */ 8 | var docWidth = 750; 9 | 10 | var doc = window.document, 11 | docEl = doc.documentElement, 12 | resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'; 13 | 14 | var recalc = (function refreshRem () { 15 | var clientWidth = docEl.getBoundingClientRect().width; 16 | 17 | /* 8.55：小于320px不再缩小，11.2：大于420px不再放大 */ 18 | docEl.style.fontSize = Math.max(Math.min(20 * (clientWidth / docWidth), 11.2), 8.55) * 5 + 'px'; 19 | 20 | return refreshRem; 21 | })(); 22 | 23 | /* 添加倍屏标识，安卓倍屏为1 */ 24 | docEl.setAttribute('data-dpr', window.navigator.appVersion.match(/iphone/gi) ? window.devicePixelRatio : 1); 25 | 26 | if (/iP(hone|od|ad)/.test(window.navigator.userAgent)) { 27 | /* 添加IOS标识 */ 28 | doc.documentElement.classList.add('ios'); 29 | /* IOS8以上给html添加hairline样式，以便特殊处理 */ 30 | if (parseInt(window.navigator.appVersion.match(/OS (\d+)_(\d+)_?(\d+)?/)[1], 10) >= 8) 31 | doc.documentElement.classList.add('hairline'); 32 | } 33 | 34 | if (!doc.addEventListener) return; 35 | window.addEventListener(resizeEvt, recalc, false); 36 | doc.addEventListener('DOMContentLoaded', recalc, false); 37 | 38 | }(window); 39 | --------------------------------------------------------------------------------