├── static ├── .gitkeep └── lib │ └── flexible.js ├── src ├── components │ ├── utils │ │ ├── index.js │ │ ├── designPatterns.js │ │ ├── utils.js │ │ └── validataRules.js │ ├── gallery │ │ └── index.vue │ ├── loading │ │ ├── loading.gif │ │ └── index.vue │ ├── libs │ │ ├── font │ │ │ ├── icomoon.eot │ │ │ ├── icomoon.ttf │ │ │ ├── icomoon.woff │ │ │ ├── font.css │ │ │ └── icomoon.svg │ │ ├── js │ │ │ ├── flexible.js │ │ │ └── tween.js │ │ └── css │ │ │ └── grid.css │ ├── style │ │ ├── font │ │ │ ├── iconfont.eot │ │ │ ├── iconfont.ttf │ │ │ ├── iconfont.woff │ │ │ ├── iconfont.svg │ │ │ └── iconfont.scss │ │ ├── fontSize.scss │ │ ├── mixin.scss │ │ ├── color.scss │ │ ├── 1px.scss │ │ ├── grid.scss │ │ ├── animate.scss │ │ └── base.scss │ ├── swiper │ │ ├── index.js │ │ ├── swiper-item.vue │ │ └── swiper.vue │ ├── collapse │ │ ├── index.js │ │ ├── collapse.vue │ │ └── collapse-item.vue │ ├── swiperOut │ │ ├── index.js │ │ ├── swiper-out.vue │ │ └── swiper-out-item.vue │ ├── tag │ │ ├── index.vue │ │ └── style.scss │ ├── backtop │ │ ├── style.scss │ │ └── index.vue │ ├── page │ │ ├── style.scss │ │ └── index.vue │ ├── directives │ │ └── skeleton.js │ ├── select │ │ ├── style.scss │ │ └── index.vue │ ├── checkbox │ │ ├── index.vue │ │ └── style.scss │ ├── indicator │ │ ├── indicator.vue │ │ └── index.js │ ├── button │ │ ├── index.vue │ │ └── style.scss │ ├── confirm │ │ └── index.js │ ├── tip │ │ ├── tip.js │ │ └── tip.vue │ ├── head │ │ └── index.vue │ ├── cell │ │ └── index.vue │ ├── actionPanel │ │ └── index.vue │ ├── picker │ │ ├── style.scss │ │ ├── index.vue │ │ └── pickerItem.vue │ ├── dialog │ │ └── index.vue │ ├── messageCode │ │ └── index.vue │ ├── index.js │ ├── scroll │ │ └── index.vue │ ├── modal │ │ └── index.vue │ ├── popup │ │ └── index.vue │ ├── slideMenu │ │ └── index.vue │ ├── search │ │ ├── style.scss │ │ └── index.vue │ └── photoSwiper │ │ └── index.vue ├── App.vue ├── pages │ ├── tip │ │ └── tip.vue │ ├── slideMenu │ │ └── slideMenu.vue │ ├── index │ │ └── index.vue │ ├── loadmore │ │ └── loadmore.vue │ ├── swiperOut │ │ └── swiperOut.vue │ └── swiper │ │ └── swiper.vue ├── main.js └── router │ └── index.js ├── .eslintignore ├── config ├── prod.env.js ├── dev.env.js └── index.js ├── .editorconfig ├── .gitignore ├── .postcssrc.js ├── .babelrc ├── index.html ├── .eslintrc.js ├── README.md └── package.json /static/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/utils/index.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | build/*.js 2 | config/*.js 3 | -------------------------------------------------------------------------------- /config/prod.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | module.exports = { 3 | NODE_ENV: '"production"' 4 | } 5 | -------------------------------------------------------------------------------- /src/components/gallery/index.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /src/components/loading/loading.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webKity/r-ui/HEAD/src/components/loading/loading.gif -------------------------------------------------------------------------------- /src/components/libs/font/icomoon.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webKity/r-ui/HEAD/src/components/libs/font/icomoon.eot -------------------------------------------------------------------------------- /src/components/libs/font/icomoon.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webKity/r-ui/HEAD/src/components/libs/font/icomoon.ttf -------------------------------------------------------------------------------- /src/components/libs/font/icomoon.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webKity/r-ui/HEAD/src/components/libs/font/icomoon.woff -------------------------------------------------------------------------------- /src/components/style/font/iconfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webKity/r-ui/HEAD/src/components/style/font/iconfont.eot -------------------------------------------------------------------------------- /src/components/style/font/iconfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webKity/r-ui/HEAD/src/components/style/font/iconfont.ttf -------------------------------------------------------------------------------- /src/components/style/font/iconfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webKity/r-ui/HEAD/src/components/style/font/iconfont.woff -------------------------------------------------------------------------------- /src/components/swiper/index.js: -------------------------------------------------------------------------------- 1 | import rSwiper from './swiper.vue' 2 | import rSwiperItem from './swiper-item' 3 | 4 | export { 5 | rSwiper, 6 | rSwiperItem 7 | } 8 | -------------------------------------------------------------------------------- /src/components/collapse/index.js: -------------------------------------------------------------------------------- 1 | import rCollapse from './collapse.vue' 2 | import rCollapseItem from './collapse-item' 3 | 4 | export { 5 | rCollapse, 6 | rCollapseItem 7 | } 8 | -------------------------------------------------------------------------------- /src/components/swiperOut/index.js: -------------------------------------------------------------------------------- 1 | import rSwiperOut from './swiper-out.vue' 2 | import rSwiperOutItem from './swiper-out-item' 3 | 4 | export { 5 | rSwiperOut, 6 | rSwiperOutItem 7 | } 8 | -------------------------------------------------------------------------------- /config/dev.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const merge = require('webpack-merge') 3 | const prodEnv = require('./prod.env') 4 | 5 | module.exports = merge(prodEnv, { 6 | NODE_ENV: '"development"' 7 | }) 8 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 11 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist/ 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Editor directories and files 9 | .idea 10 | .vscode 11 | *.suo 12 | *.ntvs* 13 | *.njsproj 14 | *.sln 15 | -------------------------------------------------------------------------------- /.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | "plugins": { 5 | // to edit target browsers: use "browserslist" field in package.json 6 | "autoprefixer": {} 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /src/components/utils/designPatterns.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 获取单例模式函数 3 | * @param {*} fn 只执行一次的函数 4 | */ 5 | var getSingle = function (fn) { 6 | var result 7 | return function () { 8 | return result || ( result = fn .apply(this, arguments) ) 9 | } 10 | } 11 | 12 | export default { 13 | getSingle 14 | } -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { 4 | "modules": false, 5 | "targets": { 6 | "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] 7 | } 8 | }], 9 | "stage-2" 10 | ], 11 | "plugins": ["transform-runtime"], 12 | "env": { 13 | "test": { 14 | "presets": ["env", "stage-2"], 15 | "plugins": ["istanbul"] 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | r-ui 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/pages/tip/tip.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 16 | 17 | 23 | 24 | -------------------------------------------------------------------------------- /src/components/loading/index.vue: -------------------------------------------------------------------------------- 1 | 6 | 13 | 23 | -------------------------------------------------------------------------------- /src/components/tag/index.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 21 | 22 | 25 | -------------------------------------------------------------------------------- /src/components/swiper/swiper-item.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 21 | 22 | 31 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | // The Vue build version to load with the `import` command 2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias. 3 | import Vue from 'vue' 4 | import App from './App' 5 | import fastclick from 'fastclick' 6 | import router from './router' 7 | import tip from './components/tip/tip' 8 | import './components/style/font/iconfont.scss' 9 | 10 | Vue.config.productionTip = false 11 | Vue.use(tip) 12 | 13 | fastclick.attach(document.body) 14 | /* eslint-disable no-new */ 15 | new Vue({ 16 | el: '#app', 17 | router, 18 | template: '', 19 | components: { App } 20 | }) 21 | -------------------------------------------------------------------------------- /src/components/backtop/style.scss: -------------------------------------------------------------------------------- 1 | @import "../style/color.scss"; 2 | @import "../style/fontSize.scss"; 3 | @import "../style/mixin.scss"; 4 | 5 | .r-backtop{ 6 | position: absolute; 7 | @include px(right, 30); 8 | @include px(bottom, 130); 9 | @include px(width, 85); 10 | @include px(height, 85); 11 | @include px(border-radius, 43); 12 | @include px(padding-top, 8); 13 | box-sizing: border-box; 14 | overflow: hidden; 15 | background-color: rgba(0,0,0,.5); 16 | color: $whiteColor; 17 | text-align: center; 18 | @include linkSize; 19 | line-height: 1.3; 20 | i{ 21 | @include textSize; 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /src/components/page/style.scss: -------------------------------------------------------------------------------- 1 | @import "../style/color.scss"; 2 | @import "../style/fontSize.scss"; 3 | @import "../style/mixin.scss"; 4 | 5 | .r-page{ 6 | background-color: $lightGrayColor; 7 | @include one-screen; 8 | .r-page-head{ 9 | position: fixed; 10 | top:0; 11 | left:0; 12 | z-index: 2; 13 | width:100%; 14 | } 15 | .r-page-content{ 16 | @include one-screen; 17 | .r-page-wrap{ 18 | @include one-screen; 19 | @include overflow-scroll; 20 | } 21 | } 22 | .r-page-foot{ 23 | position: fixed; 24 | bottom:0; 25 | left:0; 26 | z-index: 1; 27 | width:100%; 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /src/components/directives/skeleton.js: -------------------------------------------------------------------------------- 1 | // 在main中：Vue.directive('skeleton', skeleton)全局注册使用 2 | import './../style/components/skeleton.css' 3 | 4 | export default { 5 | bind (el, binding, vnode) { 6 | el.className = el.className + ' r-skeleton' 7 | let coverEl = document.createElement('div') 8 | coverEl.className = 'r-skeleton-block' 9 | el.appendChild(coverEl) 10 | }, 11 | update (el, binding, vnode) { 12 | setTimeout(() => { 13 | el.className = el.className.replace(' r-skeleton', '') 14 | let skeletonEl = el.querySelector('.r-skeleton-block') 15 | if (skeletonEl) { 16 | el.removeChild(skeletonEl) 17 | } 18 | }, 500) 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /src/components/select/style.scss: -------------------------------------------------------------------------------- 1 | @import "./../style/color.scss"; 2 | @import "./../style/fontSize.scss"; 3 | @import "./../style/mixin.scss"; 4 | 5 | .r-select{ 6 | position: relative; 7 | width: 100%; 8 | @include v-middle; 9 | .r-select-label{ 10 | color: $lightBlackColor; 11 | @include px(padding-top, 5); 12 | @include px(padding-bottom, 5); 13 | @include textSize; 14 | span{ 15 | @include v-middle; 16 | } 17 | } 18 | .icon-dropdown{ 19 | @include px(margin-left, 5); 20 | } 21 | .r-select-options{ 22 | @include one-screen; 23 | opacity: 0; 24 | z-index: 1; 25 | option{ 26 | @include textSize; 27 | } 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | // https://eslint.org/docs/user-guide/configuring 2 | 3 | module.exports = { 4 | root: true, 5 | parser: 'babel-eslint', 6 | parserOptions: { 7 | sourceType: 'module' 8 | }, 9 | env: { 10 | browser: true, 11 | }, 12 | // https://github.com/standard/standard/blob/master/docs/RULES-en.md 13 | extends: 'standard', 14 | // required to lint *.vue files 15 | plugins: [ 16 | 'html' 17 | ], 18 | // add your custom rules here 19 | 'rules': { 20 | // allow paren-less arrow functions 21 | 'arrow-parens': 0, 22 | // allow async-await 23 | 'generator-star-spacing': 0, 24 | // allow debugger during development 25 | 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # r-ui 2 | 3 | > vue2.0 移动端UI组件 4 | 5 | ## V1.0.2 6 | 新增actionPanel\backtop\button\checkbox\confirm\dialog\head\loading\messageCode 7 | \modal\page\photoSwiper\picker\popup\scroll\search\select\tag\tip\video等组件 8 | 9 | ## V1.0.1 10 | 新增swiper 11 | 12 | ## V1.0.0 13 | 项目初始化 14 | 15 | ## Build Setup 16 | 17 | ``` bash 18 | # install dependencies 19 | npm install 20 | 21 | # serve with hot reload at localhost:8080 22 | npm run dev 23 | 24 | # build for production with minification 25 | npm run build 26 | 27 | # build for production and view the bundle analyzer report 28 | npm run build --report 29 | ``` 30 | 31 | For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader). 32 | -------------------------------------------------------------------------------- /src/components/checkbox/index.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 34 | 35 | 38 | -------------------------------------------------------------------------------- /src/components/indicator/indicator.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 24 | 25 | 40 | -------------------------------------------------------------------------------- /src/components/indicator/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import element from './indicator.vue' 3 | 4 | const IndicatorConstructor = Vue.extend(element) 5 | IndicatorConstructor.prototype.open = function () { 6 | document.body.appendChild(this.$el) 7 | this.visible = true 8 | } 9 | IndicatorConstructor.prototype.close = function () { 10 | this.visible = false 11 | this.$el.addEventListener('transitionend', removeDom) 12 | } 13 | 14 | let removeDom = event => { 15 | if (event.target.parentNode) { 16 | event.target.parentNode.removeChild(event.target) 17 | } 18 | } 19 | 20 | let Indicator = () => { 21 | let indicator = new IndicatorConstructor({ 22 | el: document.createElement('div') 23 | }) 24 | document.body.appendChild(indicator.$el) 25 | return indicator 26 | } 27 | Indicator.install = function () { 28 | Vue.prototype.$indicator = new Indicator() 29 | } 30 | 31 | export default Indicator 32 | -------------------------------------------------------------------------------- /src/pages/slideMenu/slideMenu.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 26 | 27 | 34 | -------------------------------------------------------------------------------- /src/components/swiperOut/swiper-out.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 33 | 34 | 41 | -------------------------------------------------------------------------------- /src/components/button/index.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 43 | 46 | -------------------------------------------------------------------------------- /src/components/checkbox/style.scss: -------------------------------------------------------------------------------- 1 | @import "../style/color.scss"; 2 | @import "../style/fontSize.scss"; 3 | @import "../style/mixin.scss"; 4 | 5 | .r-checkbox{ 6 | @include textSize; 7 | .r-checkbox-label{ 8 | color: $blackColor; 9 | @include px(padding-top, 30); 10 | @include px(padding-bottom, 30); 11 | @include px(margin-left, 25); 12 | } 13 | .r-checkbox-list{ 14 | .r-checkbox-item{ 15 | display: inline-block; 16 | @include px(padding-left, 30); 17 | @include px(padding-right, 30); 18 | @include px(padding-top, 20); 19 | @include px(padding-bottom, 20); 20 | @include px(border-radius, 12); 21 | @include px(margin-left, 25); 22 | @include px(margin-bottom, 25); 23 | background-color: $lightGrayColor; 24 | color: $darkGrayColor; 25 | @include px(padding-bottom, 20); 26 | } 27 | .active{ 28 | background-color: $primaryColor; 29 | color: $whiteColor; 30 | } 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /src/components/confirm/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import modal from './../modal' 3 | 4 | const ConfirmConstructor = Vue.extend(modal) 5 | ConfirmConstructor.prototype.close = function () { 6 | this.isShow = false 7 | this.$el.addEventListener('transitionend', removeDom) 8 | } 9 | let removeDom = event => { 10 | if (event.target.parentNode) { 11 | event.target.parentNode.removeChild(event.target) 12 | } 13 | } 14 | 15 | let createConfirm = () => { 16 | return new ConfirmConstructor({ 17 | el: document.createElement('div') 18 | }) 19 | } 20 | 21 | let Confirm = (contentHtml) => { 22 | let confirm = createConfirm() 23 | let content = confirm.$el.querySelector('.r-modal-content') 24 | content.innerHTML = contentHtml 25 | document.body.appendChild(confirm.$el) 26 | Vue.nextTick(function () { 27 | confirm.isShow = true 28 | }) 29 | return confirm 30 | } 31 | Confirm.install = function () { 32 | Vue.prototype.$confirm = Confirm 33 | } 34 | 35 | export default Confirm 36 | -------------------------------------------------------------------------------- /src/components/collapse/collapse.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 43 | -------------------------------------------------------------------------------- /src/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Router from 'vue-router' 3 | const Index = () => import('@/pages/index/index.vue') 4 | const SlideMenu = () => import('@/pages/slideMenu/slideMenu.vue') 5 | const Swiper = () => import('@/pages/swiper/swiper.vue') 6 | const Loadmore = () => import('@/pages/loadmore/loadmore.vue') 7 | const SwiperOut = () => import('@/pages/swiperOut/swiperOut.vue') 8 | const Tip = () => import('@/pages/tip/tip.vue') 9 | 10 | Vue.use(Router) 11 | 12 | let router = new Router({ 13 | routes: [ 14 | {path: '/', name: 'index', component: Index}, 15 | {path: '/slideMenu', name: 'slideMenu', component: SlideMenu}, 16 | {path: '/swiper', name: 'swiper', component: Swiper}, 17 | {path: '/loadmore', name: 'loadmore', component: Loadmore}, 18 | {path: '/swiperOut', name: 'swiperOut', component: SwiperOut}, 19 | {path: '/tip', name: 'tip', component: Tip} 20 | ] 21 | }) 22 | 23 | router.afterEach(function (to) { 24 | if (window.ga) { 25 | window.ga('set', 'page', to.fullPath) 26 | window.ga('send', 'pageview') 27 | } 28 | }) 29 | export default router 30 | -------------------------------------------------------------------------------- /src/components/style/fontSize.scss: -------------------------------------------------------------------------------- 1 | $linkSize: 12px; 2 | $smallSize: 13px; 3 | $textSize: 14px; 4 | $titleSize: 16px; 5 | $h6Size: 18px; 6 | $h5Size: 24px; 7 | $h4Size: 30px; 8 | $h3Size: 36px; 9 | $h2Size: 40px; 10 | $h1Size: 44px; 11 | $bigSize: 55px; 12 | 13 | @mixin font-dpr($font-size) { 14 | font-size: $font-size; 15 | [data-dpr="2"] & { 16 | font-size: $font-size * 2; 17 | } 18 | [data-dpr="3"] & { 19 | font-size: $font-size * 3; 20 | } 21 | } 22 | @mixin linkSize () { 23 | @include font-dpr($linkSize); 24 | } 25 | @mixin smallSize () { 26 | @include font-dpr($smallSize); 27 | } 28 | @mixin textSize () { 29 | @include font-dpr($textSize); 30 | } 31 | @mixin titleSize () { 32 | @include font-dpr($titleSize); 33 | } 34 | @mixin h6Size () { 35 | @include font-dpr($h6Size); 36 | } 37 | @mixin h5Size () { 38 | @include font-dpr($h5Size); 39 | } 40 | @mixin h4Size () { 41 | @include font-dpr($h4Size); 42 | } 43 | @mixin h3Size () { 44 | @include font-dpr($h3Size); 45 | } 46 | @mixin h2Size () { 47 | @include font-dpr($h2Size); 48 | } 49 | @mixin h1Size () { 50 | @include font-dpr($h1Size); 51 | } 52 | @mixin bigSize () { 53 | @include font-dpr($bigSize); 54 | } 55 | -------------------------------------------------------------------------------- /src/components/select/index.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 44 | 47 | -------------------------------------------------------------------------------- /src/components/tip/tip.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import element from './tip.vue' 3 | 4 | const TipConstructor = Vue.extend(element) 5 | let tipPool = [] 6 | 7 | TipConstructor.prototype.close = function () { 8 | this.visible = false 9 | returnAnInstance(this) 10 | } 11 | let getAnInstance = () => { 12 | if (tipPool.length > 0) { 13 | let instance = tipPool[0] 14 | tipPool.splice(0, 1) 15 | return instance 16 | } 17 | return new TipConstructor({ 18 | el: document.createElement('div') 19 | }) 20 | } 21 | let returnAnInstance = instance => { 22 | if (instance) { 23 | tipPool.push(instance) 24 | } 25 | } 26 | 27 | let Tip = (options = {}) => { 28 | let duration = options.duration || 2000 29 | 30 | let instance = getAnInstance() 31 | clearTimeout(instance.timer) 32 | instance.message = typeof options === 'string' ? options : options.message 33 | 34 | document.body.appendChild(instance.$el) 35 | Vue.nextTick(function () { 36 | instance.visible = true 37 | instance.timer = setTimeout(function () { 38 | instance.close() 39 | }, duration) 40 | }) 41 | return instance 42 | } 43 | Tip.install = function () { 44 | Vue.prototype.$tip = Tip 45 | } 46 | 47 | export default Tip 48 | -------------------------------------------------------------------------------- /src/components/style/mixin.scss: -------------------------------------------------------------------------------- 1 | @import "./color.scss"; 2 | 3 | @mixin box-sizing ($sizing) { 4 | -webkit-box-sizing:$sizing; 5 | -moz-box-sizing:$sizing; 6 | box-sizing:$sizing; 7 | } 8 | @mixin block-center () { 9 | width:$minWidth; 10 | margin-left:auto; 11 | margin-right: auto; 12 | box-sizing: border-box; 13 | } 14 | @mixin fixed-block { 15 | position: absolute; 16 | left:0; 17 | width:100%; 18 | padding:5px 10px; 19 | border:1px solid #f2f2f2; 20 | border-radius: 0px; 21 | background-color: $whiteColor; 22 | box-shadow: 0 5px 20px 0 rgba(0,0,0,0.1); 23 | z-index: 9999; 24 | } 25 | @mixin one-screen { 26 | position: absolute; 27 | left:0; 28 | top:0; 29 | width:100%; 30 | height:100%; 31 | overflow: hidden; 32 | } 33 | @mixin ellipsis { 34 | overflow: hidden; 35 | white-space: nowrap; 36 | text-overflow: ellipsis; 37 | } 38 | @mixin back-size { 39 | background-position: center; 40 | background-size: cover; 41 | } 42 | @mixin overflow-scroll { 43 | overflow: scroll; 44 | -webkit-overflow-scrolling: touch; 45 | } 46 | @mixin v-middle { 47 | display: inline-block; 48 | vertical-align: middle; 49 | } 50 | @mixin px($attr, $size) { 51 | #{$attr}: ($size / 75) + rem; 52 | } 53 | -------------------------------------------------------------------------------- /src/components/head/index.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 51 | -------------------------------------------------------------------------------- /src/components/backtop/index.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 54 | 55 | 58 | -------------------------------------------------------------------------------- /src/components/tip/tip.vue: -------------------------------------------------------------------------------- 1 | 8 | 21 | 54 | -------------------------------------------------------------------------------- /src/pages/index/index.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 29 | 30 | 49 | -------------------------------------------------------------------------------- /src/components/style/color.scss: -------------------------------------------------------------------------------- 1 | $colorDisparity: 10%; 2 | $bgColor: #efeff4; 3 | 4 | $whiteColor: #fff; 5 | 6 | $blackColor: #343434; 7 | $lightBlackColor: lighten($blackColor, $colorDisparity); 8 | 9 | $grayColor: #959595; 10 | $darkGrayColor: #656565; 11 | $lightGrayColor: #f7f7f7; 12 | 13 | $primaryColor: #ff6e5f; 14 | $darkPrimaryColor: darken($primaryColor, $colorDisparity); 15 | $lightPrimaryColor: lighten($primaryColor, $colorDisparity); 16 | 17 | $yellowColor: #edd758; 18 | $darkYellowColor: darken($yellowColor, $colorDisparity); 19 | $lightYellowColor: lighten($yellowColor, $colorDisparity); 20 | 21 | $redColor: #eb6877; 22 | $darkRedColor: darken($redColor, $colorDisparity); 23 | $lightRedColor: lighten($redColor, $colorDisparity); 24 | 25 | $greenColor: #13b5b1; 26 | $darkGreenColor: darken($greenColor, $colorDisparity); 27 | $lightGreenColor: #5cb934; 28 | 29 | $blueColor: #67c0ff; 30 | $darkBlueColor: darken($blueColor, $colorDisparity); 31 | $lightBlueColor: lighten($blueColor, $colorDisparity); 32 | 33 | $orangeColor: #ffa317; 34 | $darkOrangeColor: darken($orangeColor, $colorDisparity); 35 | $lightOrangeColor: lighten($orangeColor, $colorDisparity); 36 | 37 | $infoColor: #17a1e6; 38 | $darkInfoColor: darken($infoColor, $colorDisparity); 39 | $lightInfoColor: lighten($infoColor, $colorDisparity); 40 | 41 | $borderColor: #dee3ec; 42 | $lightBorderColor: #e2e6ee; 43 | $defaultBtnColor: #b4b4b4; 44 | -------------------------------------------------------------------------------- /src/components/cell/index.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 42 | 43 | 62 | -------------------------------------------------------------------------------- /src/components/tag/style.scss: -------------------------------------------------------------------------------- 1 | @import "./../style/color.scss"; 2 | @import "./../style/fontSize.scss"; 3 | @import "./../style/mixin.scss"; 4 | 5 | .r-tag{ 6 | @include linkSize; 7 | @include px(padding-left, 12); 8 | @include px(padding-right, 12); 9 | @include px(padding-top, 5); 10 | @include px(padding-bottom, 5); 11 | @include px(border-radius, 8); 12 | @include v-middle; 13 | line-height: 1; 14 | } 15 | .r-tag.round{ 16 | @include px(border-radius, 20); 17 | @include px(padding-left, 25); 18 | @include px(padding-right, 25); 19 | } 20 | .r-tag.default{ 21 | border:1px solid $borderColor; 22 | color: $grayColor; 23 | } 24 | .r-tag.yellow{ 25 | border:1px solid $yellowColor; 26 | color: $yellowColor; 27 | } 28 | .r-tag.green{ 29 | border:1px solid $greenColor; 30 | color: $greenColor; 31 | } 32 | .r-tag.light-green{ 33 | border:1px solid $lightGreenColor; 34 | color: $lightGreenColor; 35 | } 36 | .r-tag.primary{ 37 | border:1px solid $primaryColor; 38 | color: $primaryColor; 39 | } 40 | .r-tag.red{ 41 | border:1px solid $redColor; 42 | color: $redColor; 43 | } 44 | .r-tag.blue{ 45 | border:1px solid $blueColor; 46 | color: $blueColor; 47 | } 48 | .r-tag.orange{ 49 | border:1px solid $orangeColor; 50 | color: $orangeColor; 51 | } 52 | .r-tag.orange{ 53 | border:1px solid $orangeColor; 54 | color: $orangeColor; 55 | } 56 | .r-tag.info{ 57 | border:1px solid $infoColor; 58 | color: $infoColor; 59 | } 60 | -------------------------------------------------------------------------------- /src/components/utils/utils.js: -------------------------------------------------------------------------------- 1 | let utils = { 2 | getWindowInf () { 3 | let win = {} 4 | win.w = document.documentElement.clientWidth 5 | win.h = document.documentElement.clientHeight 6 | return win 7 | }, 8 | isClickCurentEl (className, el) { 9 | try { 10 | if (el.nodeType !== 'undefined' && el.nodeType !== 1 && el.nodeType !== 9) { 11 | console.error('isClickCurentEl：第二个参数不是DOM节点，请传入正确的DOM节点！') 12 | return false 13 | } 14 | while (el && el.nodeType !== 9) { 15 | if (el.className.indexOf(className) >= 0) return true 16 | el = el.parentNode 17 | } 18 | return false 19 | } catch (e) {} 20 | }, 21 | resizeImg (str, w, h, defaultImg = 'other/default-room.png') { 22 | if (!str) return defaultImg 23 | let oldImg = str.indexOf('?x-oss-process=') >= 0 ? str.split('?x-oss-process=')[0] : str 24 | let newImg = oldImg + '?x-oss-process=image/resize,m_fill,h_' + h + ',w_' + w 25 | return newImg 26 | }, 27 | formatDay (num) { 28 | if (num === 0) { 29 | return '星期天' 30 | } else if (num === 1) { 31 | return '星期一' 32 | } else if (num === 2) { 33 | return '星期二' 34 | } else if (num === 3) { 35 | return '星期三' 36 | } else if (num === 4) { 37 | return '星期四' 38 | } else if (num === 5) { 39 | return '星期五' 40 | } else if (num === 6) { 41 | return '星期六' 42 | } 43 | } 44 | } 45 | 46 | export default utils 47 | -------------------------------------------------------------------------------- /src/components/page/index.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 56 | 57 | 60 | -------------------------------------------------------------------------------- /config/index.js: -------------------------------------------------------------------------------- 1 | 2 | 'use strict' 3 | // Template version: 1.1.3 4 | // see http://vuejs-templates.github.io/webpack for documentation. 5 | 6 | const path = require('path') 7 | 8 | module.exports = { 9 | build: { 10 | env: require('./prod.env'), 11 | index: path.resolve(__dirname, '../dist/index.html'), 12 | assetsRoot: path.resolve(__dirname, '../dist'), 13 | assetsSubDirectory: 'static', 14 | assetsPublicPath: '/', 15 | productionSourceMap: true, 16 | // Gzip off by default as many popular static hosts such as 17 | // Surge or Netlify already gzip all static assets for you. 18 | // Before setting to `true`, make sure to: 19 | // npm install --save-dev compression-webpack-plugin 20 | productionGzip: false, 21 | productionGzipExtensions: ['js', 'css'], 22 | // Run the build command with an extra argument to 23 | // View the bundle analyzer report after build finishes: 24 | // `npm run build --report` 25 | // Set to `true` or `false` to always turn it on or off 26 | bundleAnalyzerReport: process.env.npm_config_report 27 | }, 28 | dev: { 29 | env: require('./dev.env'), 30 | port: process.env.PORT || 8080, 31 | autoOpenBrowser: true, 32 | assetsSubDirectory: 'static', 33 | assetsPublicPath: '/', 34 | proxyTable: {}, 35 | // CSS Sourcemaps off by default because relative paths are "buggy" 36 | // with this option, according to the CSS-Loader README 37 | // (https://github.com/webpack/css-loader#sourcemaps) 38 | // In our experience, they generally work as expected, 39 | // just be aware of this issue when enabling this option. 40 | cssSourceMap: false 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /src/components/libs/font/font.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'icomoon'; 3 | src: url('./icomoon.eot?itqgvn'); 4 | src: url('./icomoon.eot?itqgvn#iefix') format('embedded-opentype'), 5 | url('./icomoon.ttf?itqgvn') format('truetype'), 6 | url('./icomoon.woff?itqgvn') format('woff'), 7 | url('./icomoon.svg?itqgvn#icomoon') format('svg'); 8 | font-weight: normal; 9 | font-style: normal; 10 | } 11 | 12 | [class^="icon-"], [class*=" icon-"] { 13 | display: inline-block; 14 | vertical-align: middle; 15 | /* use !important to prevent issues with browser extensions that change fonts */ 16 | font-family: 'icomoon' !important; 17 | speak: none; 18 | font-style: normal; 19 | font-weight: normal; 20 | font-variant: normal; 21 | text-transform: none; 22 | line-height: 1; 23 | 24 | /* Better Font Rendering =========== */ 25 | -webkit-font-smoothing: antialiased; 26 | -moz-osx-font-smoothing: grayscale; 27 | } 28 | 29 | .icon-camera:before { 30 | content: "\e910"; 31 | } 32 | .icon-more:before { 33 | content: "\e900"; 34 | } 35 | .icon-top:before { 36 | content: "\e901"; 37 | } 38 | .icon-close:before { 39 | content: "\e902"; 40 | } 41 | .icon-tel-fill:before { 42 | content: "\e903"; 43 | } 44 | .icon-tel:before { 45 | content: "\e904"; 46 | } 47 | .icon-clear:before { 48 | content: "\e905"; 49 | } 50 | .icon-del:before { 51 | content: "\e906"; 52 | } 53 | .icon-clock:before { 54 | content: "\e907"; 55 | } 56 | .icon-search:before { 57 | content: "\e908"; 58 | } 59 | .icon-success:before { 60 | content: "\e909"; 61 | } 62 | .icon-dropdown:before { 63 | content: "\e90a"; 64 | } 65 | .icon-up:before { 66 | content: "\e90b"; 67 | } 68 | .icon-down:before { 69 | content: "\e90c"; 70 | } 71 | .icon-right:before { 72 | content: "\e90d"; 73 | } 74 | .icon-left:before { 75 | content: "\e90e"; 76 | } 77 | .icon-select:before { 78 | content: "\e90f"; 79 | } 80 | -------------------------------------------------------------------------------- /src/pages/loadmore/loadmore.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 55 | 56 | 69 | -------------------------------------------------------------------------------- /src/pages/swiperOut/swiperOut.vue: -------------------------------------------------------------------------------- 1 | 29 | 30 | 50 | 51 | 71 | -------------------------------------------------------------------------------- /src/components/actionPanel/index.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 58 | 59 | 84 | -------------------------------------------------------------------------------- /src/components/picker/style.scss: -------------------------------------------------------------------------------- 1 | @import "../style/color.scss"; 2 | @import "../style/fontSize.scss"; 3 | @import "../style/mixin.scss"; 4 | 5 | .r { 6 | &-picker { 7 | &-item { 8 | overflow: hidden; 9 | width: 100%; 10 | text-align: center; 11 | height: 220px; 12 | background: $whiteColor; 13 | position: relative; 14 | } 15 | &-ul { 16 | position: relative; 17 | } 18 | &-line, &-list, &-wheel { 19 | position: absolute; 20 | left: 0; 21 | right: 0; 22 | top: 93px; 23 | } 24 | &-line { 25 | z-index: 3; 26 | } 27 | &-list { 28 | z-index: 2; 29 | background: $whiteColor; 30 | } 31 | &-wheel { 32 | z-index: 1; 33 | } 34 | &-line { 35 | &:after, &:before { 36 | position: absolute; 37 | top: 0; 38 | content: ''; 39 | display: table; 40 | background: $borderColor; 41 | width: 100%; 42 | height: 1px; 43 | -webkit-transform: scaleY(0.5); 44 | transform: scaleY(0.5); 45 | -webkit-transform-origin: 0 0; 46 | transform-origin: 0 0; 47 | } 48 | &:before { 49 | bottom: -1px; 50 | top: auto; 51 | } 52 | } 53 | &-line, &-list { 54 | height: 34px; 55 | transform: translate3d(0px, 0px, 110px); 56 | } 57 | &-list { 58 | overflow: hidden; 59 | } 60 | &-list-item, &-wheel-item { 61 | white-space: nowrap; 62 | overflow: hidden; 63 | text-overflow: ellipsis; 64 | line-height: 34px; 65 | @include textSize; 66 | color: $blackColor; 67 | &.hidden { 68 | visibility: hidden; 69 | opacity: 0; 70 | } 71 | } 72 | &-wheel { 73 | transform-style: preserve-3d; 74 | perspective-origin:center center; 75 | height: 34px; 76 | &-item { 77 | backface-visibility: hidden; 78 | position: absolute; 79 | top: 0; 80 | width: 100%; 81 | color: $grayColor; 82 | } 83 | } 84 | } 85 | } 86 | -------------------------------------------------------------------------------- /src/components/dialog/index.vue: -------------------------------------------------------------------------------- 1 | 15 | 45 | 88 | -------------------------------------------------------------------------------- /src/components/style/1px.scss: -------------------------------------------------------------------------------- 1 | @import "./color.scss"; 2 | @import "./fontSize.scss"; 3 | @import "./mixin.scss"; 4 | 5 | @mixin setLine($c: $borderColor) { 6 | content: " "; 7 | position: absolute; 8 | left: 0; 9 | top: 0; 10 | width: 199%; 11 | height: 1px; 12 | border: 1px solid $c; 13 | color: $c; 14 | height: 194%; 15 | transform-origin: left top; 16 | transform: scale(0.5); 17 | } 18 | @mixin setTopLine($c: $borderColor) { 19 | content: " "; 20 | position: absolute; 21 | left: 0; 22 | top: 0; 23 | right: 0; 24 | width: 100%; 25 | height: 1px; 26 | border-top: 1px solid $c; 27 | color: $c; 28 | transform-origin: 0 0; 29 | transform: scaleY(0.5); 30 | } 31 | @mixin setBottomLine($c: $borderColor) { 32 | content: " "; 33 | position: absolute; 34 | left: 0; 35 | bottom: 0; 36 | right: 0; 37 | width: 100%; 38 | height: 1px; 39 | border-bottom: 1px solid $c; 40 | color: $c; 41 | transform-origin: 0 100%; 42 | transform: scaleY(0.5); 43 | } 44 | @mixin setLeftLine($c: $borderColor) { 45 | content: " "; 46 | position: absolute; 47 | left: 0; 48 | top: 0; 49 | width: 1px; 50 | bottom: 0; 51 | border-left: 1px solid $c; 52 | color: $c; 53 | transform-origin: 0 0; 54 | transform: scaleX(0.5); 55 | } 56 | @mixin setRightLine($c: $borderColor) { 57 | content: " "; 58 | position: absolute; 59 | right: 0; 60 | top: 0; 61 | width: 1px; 62 | bottom: 0; 63 | border-right: 1px solid $c; 64 | color: $c; 65 | transform-origin: 100% 0; 66 | transform: scaleX(0.5); 67 | } 68 | .r-1px, .r-1px-t, .r-1px-b, .r-1px-tb, .r-1px-l, .r-1px-r { 69 | position: relative; 70 | } 71 | .r-1px { 72 | &:before { 73 | @include setLine; 74 | } 75 | } 76 | .r-1px-t { 77 | &:before { 78 | @include setTopLine; 79 | } 80 | } 81 | .r-1px-b { 82 | &:after { 83 | @include setBottomLine; 84 | } 85 | } 86 | .r-1px-tb { 87 | &:before { 88 | @include setTopLine; 89 | } 90 | &:after { 91 | @include setBottomLine; 92 | } 93 | } 94 | .r-1px-l { 95 | &:before { 96 | @include setLeftLine; 97 | } 98 | } 99 | .r-1px-r { 100 | &:after { 101 | @include setRightLine; 102 | } 103 | } 104 | -------------------------------------------------------------------------------- /src/components/messageCode/index.vue: -------------------------------------------------------------------------------- 1 | 2 | 11 | 76 | 86 | -------------------------------------------------------------------------------- /src/components/utils/validataRules.js: -------------------------------------------------------------------------------- 1 | /* 2 | * 验证函数包含常用各种类型的验证正则 3 | * @update 2018/03/23 4 | * */ 5 | function Rules () { 6 | var self = this 7 | self.config = {} 8 | this.regRules = { 9 | isLetter: /[A-Za-z]/g, // 验证是否有字母 10 | isNum: /\d/g, // 验证是否有数字 11 | isInt: /^[1-9]*[1-9][0-9]*$/, // 验证是否是正整数 12 | isFloat: /^\d+\.?\d{0,1}$/, // 验证是是一位小数 13 | isDouble: /^\d+\.?\d{0,2}$/, // 验证是两位小数 14 | isChinese: /^[\u4e00-\u9fa5]{0,}$/, // 验证是否有汉字 15 | isChinesePunctuation: /[^uFF00-uFFFF]/g, // 验证是否有中文标点符号 16 | isTel: /^(\(\d{3,4}\)|\d{3,4}-)?\d{7,8}$/, // 验证是否是电话 17 | isPhone: /^0?1[3|4|5|6|7|8|9][0-9]\d{8}$/, // 验证是否是手机号 18 | isEmail: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/, // 验证是否是邮箱 19 | isPersonNum: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, // 验证是否是身份证 20 | isSpace: { // 验证是否有空格 21 | test: function (value) { 22 | return value.indexOf(' ') >= 0 23 | } 24 | }, 25 | isUnderline: { // 验证是否有下划线 26 | test: function (value) { 27 | return value.indexOf('_') >= 0 28 | } 29 | }, 30 | isMin: { 31 | test: function (value, length) { 32 | return value.length >= length 33 | } 34 | }, 35 | isMax: { 36 | test: function (value, length) { 37 | return value.length <= length 38 | } 39 | } 40 | } 41 | } 42 | /** 43 | * 添加规则函数 44 | * @param {*} key 规则名称 45 | * @param {*} obj 用于验证的正则表达式，或者是含有test方法的对象 46 | * @return {object} this: 该对象本身，方便链式调用，如：rules.addRule().validator() 47 | */ 48 | Rules.prototype.addRule = function (key, obj) { 49 | this.regRules[key] = obj 50 | return this 51 | } 52 | /** 53 | * 发起验证 54 | * @param {*} value 被校验的值 55 | * @param {*} reg 验证规则：规则是字符串则使用内置规则校验，否则判定为传入的是正则表达式，直接用该参数进行校验 56 | * @return {boolean} 验证结果：true验证通过，false验证失败 57 | */ 58 | Rules.prototype.validator = function (value, reg) { 59 | let result = false 60 | var isString = typeof reg === 'string' 61 | if (isString) { 62 | var arr = reg.split(':') 63 | if (arr.length > 1) { 64 | result = this.regRules[arr[0]].test(value, arr[1]) 65 | } else { 66 | result = this.regRules[reg].test(value) 67 | } 68 | } else { 69 | result = reg.test(value) 70 | } 71 | return result 72 | } 73 | 74 | export default new Rules() 75 | -------------------------------------------------------------------------------- /src/components/index.js: -------------------------------------------------------------------------------- 1 | import Page from './page' 2 | import Header from './head' 3 | import Cell from './cell' 4 | import {Swiper, SwiperItem} from './swiper' 5 | 6 | const install = function(Vue) { 7 | if (install.installed) return; 8 | 9 | Vue.component(Header.name, Header); 10 | Vue.component(Button.name, Button); 11 | Vue.component(Cell.name, Cell); 12 | Vue.component(CellSwipe.name, CellSwipe); 13 | Vue.component(Field.name, Field); 14 | Vue.component(Badge.name, Badge); 15 | Vue.component(Switch.name, Switch); 16 | Vue.component(Spinner.name, Spinner); 17 | Vue.component(TabItem.name, TabItem); 18 | Vue.component(TabContainerItem.name, TabContainerItem); 19 | Vue.component(TabContainer.name, TabContainer); 20 | Vue.component(Navbar.name, Navbar); 21 | Vue.component(Tabbar.name, Tabbar); 22 | Vue.component(Search.name, Search); 23 | Vue.component(Checklist.name, Checklist); 24 | Vue.component(Radio.name, Radio); 25 | Vue.component(Loadmore.name, Loadmore); 26 | Vue.component(Actionsheet.name, Actionsheet); 27 | Vue.component(Popup.name, Popup); 28 | Vue.component(Swipe.name, Swipe); 29 | Vue.component(SwipeItem.name, SwipeItem); 30 | Vue.component(Range.name, Range); 31 | Vue.component(Picker.name, Picker); 32 | Vue.component(Progress.name, Progress); 33 | Vue.component(DatetimePicker.name, DatetimePicker); 34 | Vue.component(IndexList.name, IndexList); 35 | Vue.component(IndexSection.name, IndexSection); 36 | Vue.component(PaletteButton.name, PaletteButton); 37 | Vue.use(InfiniteScroll); 38 | 39 | Vue.$messagebox = Vue.prototype.$messagebox = MessageBox; 40 | Vue.$toast = Vue.prototype.$toast = Toast; 41 | Vue.$indicator = Vue.prototype.$indicator = Indicator; 42 | }; 43 | 44 | // auto install 45 | if (typeof window !== 'undefined' && window.Vue) { 46 | install(window.Vue); 47 | }; 48 | 49 | module.exports = { 50 | install, 51 | version, 52 | Header, 53 | Button, 54 | Cell, 55 | CellSwipe, 56 | Field, 57 | Badge, 58 | Switch, 59 | Spinner, 60 | TabItem, 61 | TabContainerItem, 62 | TabContainer, 63 | Navbar, 64 | Tabbar, 65 | Search, 66 | Checklist, 67 | Radio, 68 | Loadmore, 69 | Actionsheet, 70 | Popup, 71 | Swipe, 72 | SwipeItem, 73 | Range, 74 | Picker, 75 | Progress, 76 | Toast, 77 | Indicator, 78 | MessageBox, 79 | InfiniteScroll, 80 | Lazyload, 81 | DatetimePicker, 82 | IndexList, 83 | IndexSection, 84 | PaletteButton 85 | }; 86 | -------------------------------------------------------------------------------- /src/pages/swiper/swiper.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | 50 | 51 | 65 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "m-ui", 3 | "version": "1.0.2", 4 | "description": "A Vue.js project", 5 | "author": "", 6 | "private": true, 7 | "scripts": { 8 | "dev": "node build/dev-server.js", 9 | "start": "npm run dev", 10 | "build": "node build/build.js", 11 | "lint": "eslint --ext .js,.vue src" 12 | }, 13 | "dependencies": { 14 | "fastclick": "^1.0.6", 15 | "node-sass": "^4.5.3", 16 | "popmotion": "^8.1.21", 17 | "ramda": "^0.25.0", 18 | "vue": "^2.5.2", 19 | "vue-router": "^3.0.1" 20 | }, 21 | "devDependencies": { 22 | "autoprefixer": "^7.1.2", 23 | "babel-core": "^6.22.1", 24 | "babel-eslint": "^7.1.1", 25 | "babel-loader": "^7.1.1", 26 | "babel-plugin-transform-runtime": "^6.22.0", 27 | "babel-preset-env": "^1.3.2", 28 | "babel-preset-stage-2": "^6.22.0", 29 | "babel-register": "^6.22.0", 30 | "chalk": "^2.0.1", 31 | "connect-history-api-fallback": "^1.3.0", 32 | "copy-webpack-plugin": "^4.0.1", 33 | "css-loader": "^0.28.0", 34 | "eslint": "^3.19.0", 35 | "eslint-config-standard": "^10.2.1", 36 | "eslint-friendly-formatter": "^3.0.0", 37 | "eslint-loader": "^1.7.1", 38 | "eslint-plugin-html": "^3.0.0", 39 | "eslint-plugin-import": "^2.7.0", 40 | "eslint-plugin-node": "^5.2.0", 41 | "eslint-plugin-promise": "^3.4.0", 42 | "eslint-plugin-standard": "^3.0.1", 43 | "eventsource-polyfill": "^0.9.6", 44 | "express": "^4.14.1", 45 | "extract-text-webpack-plugin": "^3.0.0", 46 | "file-loader": "^1.1.4", 47 | "friendly-errors-webpack-plugin": "^1.6.1", 48 | "html-webpack-plugin": "^2.30.1", 49 | "http-proxy-middleware": "^0.17.3", 50 | "opn": "^5.1.0", 51 | "optimize-css-assets-webpack-plugin": "^3.2.0", 52 | "ora": "^1.2.0", 53 | "portfinder": "^1.0.13", 54 | "rimraf": "^2.6.0", 55 | "sass-loader": "^6.0.6", 56 | "semver": "^5.3.0", 57 | "shelljs": "^0.7.6", 58 | "url-loader": "^0.5.8", 59 | "vue-loader": "^13.3.0", 60 | "vue-style-loader": "^3.0.1", 61 | "vue-template-compiler": "^2.5.2", 62 | "webpack": "^3.6.0", 63 | "webpack-bundle-analyzer": "^2.9.0", 64 | "webpack-dev-middleware": "^1.12.0", 65 | "webpack-hot-middleware": "^2.18.2", 66 | "webpack-merge": "^4.1.0" 67 | }, 68 | "engines": { 69 | "node": ">= 4.0.0", 70 | "npm": ">= 3.0.0" 71 | }, 72 | "browserslist": [ 73 | "> 1%", 74 | "last 2 versions", 75 | "not ie <= 8" 76 | ] 77 | } 78 | -------------------------------------------------------------------------------- /src/components/scroll/index.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 78 | 79 | 96 | -------------------------------------------------------------------------------- /src/components/swiperOut/swiper-out-item.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 78 | 79 | 98 | -------------------------------------------------------------------------------- /src/components/style/font/iconfont.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | 8 | Created by iconfont 9 | 10 | 11 | 12 | 13 | 21 | 22 | 23 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /src/components/button/style.scss: -------------------------------------------------------------------------------- 1 | @import "../style/color.scss"; 2 | @import "../style/fontSize.scss"; 3 | @import "../style/mixin.scss"; 4 | 5 | .r-button{ 6 | position: relative; 7 | outline: none; 8 | border: none; 9 | background-color: transparent; 10 | @include v-middle; 11 | &:active{ 12 | opacity: 0.5; 13 | } 14 | &:after { 15 | content: " "; 16 | width: 200%; 17 | height: 200%; 18 | position: absolute; 19 | top: 0; 20 | left: 0; 21 | transform: scale(.5); 22 | transform-origin: 0 0; 23 | box-sizing: border-box; 24 | } 25 | } 26 | .r-button.mini{ 27 | @include linkSize; 28 | @include px(padding-top, 10); 29 | @include px(padding-bottom, 10); 30 | @include px(padding-left, 7); 31 | @include px(padding-right, 7); 32 | } 33 | .r-button.normal{ 34 | @include textSize; 35 | @include px(padding-top, 22); 36 | @include px(padding-bottom, 22); 37 | @include px(padding-left, 45); 38 | @include px(padding-right, 45); 39 | } 40 | .r-button.big{ 41 | @include titleSize; 42 | @include px(padding-top, 30); 43 | @include px(padding-bottom, 30); 44 | @include px(padding-left, 50); 45 | @include px(padding-right, 50); 46 | } 47 | .r-button.radius{ 48 | @include px(border-radius, 10); 49 | } 50 | .r-button.round{ 51 | @include px(border-radius, 40); 52 | } 53 | .r-button.default{ 54 | color: $darkGrayColor; 55 | &:after { 56 | @include px(border-radius, 20); 57 | border: 1px solid $borderColor; 58 | } 59 | } 60 | .r-button.fill.default{ 61 | background-color: $lightGrayColor; 62 | color: $grayColor; 63 | } 64 | .r-button.primary{ 65 | color: $primaryColor; 66 | &:after { 67 | @include px(border-radius, 20); 68 | border: 1px solid $primaryColor; 69 | } 70 | } 71 | .r-button.fill.primary{ 72 | background-color: $primaryColor; 73 | color: $whiteColor; 74 | } 75 | .r-button.fill.red{ 76 | background-color: $darkRedColor; 77 | color: $whiteColor; 78 | } 79 | .r-button.blue{ 80 | color: $blueColor; 81 | &:after { 82 | @include px(border-radius, 20); 83 | border: 1px solid $blueColor; 84 | } 85 | } 86 | .r-button.yellow{ 87 | background: $yellowColor; 88 | color: $whiteColor; 89 | } 90 | .r-button.fill.blue{ 91 | background-color: $blueColor; 92 | color: $whiteColor; 93 | } 94 | .r-button.fill.white{ 95 | background-color: $whiteColor; 96 | color: $blackColor; 97 | } 98 | .r-button.fluid{ 99 | width: 100%; 100 | text-align: center; 101 | } 102 | .r-button[disabled]{ 103 | background-color: #d4d4d4!important; 104 | color: $whiteColor!important; 105 | border: none!important; 106 | } 107 | -------------------------------------------------------------------------------- /src/components/modal/index.vue: -------------------------------------------------------------------------------- 1 | 19 | 61 | 112 | -------------------------------------------------------------------------------- /src/components/style/font/iconfont.scss: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'ricon'; 3 | src: url(data:font/truetype;charset=utf-8;base64,AAEAAAANAIAAAwBQRkZUTYNE1e8AAAekAAAAHEdERUYAKQAMAAAHhAAAAB5PUy8yVuZIkQAAAVgAAABWY21hcOaw7fMAAAHIAAABUmdhc3D//wADAAAHfAAAAAhnbHlmfB3KGwAAAywAAAGQaGVhZBCn8twAAADcAAAANmhoZWEHmgOGAAABFAAAACRobXR4DoMBhAAAAbAAAAAWbG9jYQE+AKAAAAMcAAAADm1heHABFQBdAAABOAAAACBuYW1lKeYRVQAABLwAAAKIcG9zdNBD4s8AAAdEAAAAOAABAAAAAQAA7+Hg9F8PPPUACwQAAAAAANbQV3MAAAAA1tBXcwAs/+EDvAMYAAAACAACAAAAAAAAAAEAAAOA/4AAXAQAAAAAAAO8AAEAAAAAAAAAAAAAAAAAAAAFAAEAAAAGAFEABQAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQP4AZAABQAAAokCzAAAAI8CiQLMAAAB6wAyAQgAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABAAHjmpwOA/4AAXAOAAIAAAAABAAAAAAAABAAAAAAAAAABVQAAA+kALAQAAVgBRQAAAAAAAwAAAAMAAAAcAAEAAAAAAEwAAwABAAAAHAAEADAAAAAIAAgAAgAAAHjml+an//8AAAB45pfmp////4sZbRleAAEAAAAAAAAAAAAAAQYAAAEAAAAAAAAAAQIAAAACAAAAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHYAoADIAAAABQAs/+EDvAMYABMAKAAxAEQAUAAAAQYrASIOAh0BISc0LgIrARUhBRUXFA4DJyMnIQcjIi4DPQEXIgYUFjI2NCYXBgcGDwEOAR4BMyEyNicuAicBNTQ+AjsBMhYdAQEZGxpTEiUcEgOQAQoYJx6F/koCogEVHyMcDz4t/kksPxQyIBMIdwwSEhkSEowIBgUFCAICBA8OAW0XFgkFCQoG/qQFDxoVvB8pAh8BDBknGkxZDSAbEmGING4dJRcJAQGAgAETGyAOpz8RGhERGhF8GhYTEhkHEA0IGBoNIyQUAXfkCxgTDB0m4wAAAAABAVgAOgLGAsYAEwAAAQYUFwEWPgEmJwEuATcBPgEuAQcBbBQVATUHEQwBB/7LBgEGATYHAQwRBwGnEzIT/vEGAQ4RBgEPBQ4FARkGEQ4BBgAAAAABAUUAOgKzAsYAEwAAARYUBwEOAR4BNwE2NCcBJg4BFhcCggYG/ssHAQwRBwE1FRT+ygcRDAEGAYcFDgX+8QYRDgEGAQ8TMhMBGQYBDhEGAAAAEgDeAAEAAAAAAAAAFQAsAAEAAAAAAAEACABUAAEAAAAAAAIABwBtAAEAAAAAAAMACACHAAEAAAAAAAQACACiAAEAAAAAAAUACwDDAAEAAAAAAAYACADhAAEAAAAAAAoAKwFCAAEAAAAAAAsAEwGWAAMAAQQJAAAAKgAAAAMAAQQJAAEAEABCAAMAAQQJAAIADgBdAAMAAQQJAAMAEAB1AAMAAQQJAAQAEACQAAMAAQQJAAUAFgCrAAMAAQQJAAYAEADPAAMAAQQJAAoAVgDqAAMAAQQJAAsAJgFuAAoAQwByAGUAYQB0AGUAZAAgAGIAeQAgAGkAYwBvAG4AZgBvAG4AdAAKAAAKQ3JlYXRlZCBieSBpY29uZm9udAoAAGkAYwBvAG4AZgBvAG4AdAAAaWNvbmZvbnQAAFIAZQBnAHUAbABhAHIAAFJlZ3VsYXIAAGkAYwBvAG4AZgBvAG4AdAAAaWNvbmZvbnQAAGkAYwBvAG4AZgBvAG4AdAAAaWNvbmZvbnQAAFYAZQByAHMAaQBvAG4AIAAxAC4AMAAAVmVyc2lvbiAxLjAAAGkAYwBvAG4AZgBvAG4AdAAAaWNvbmZvbnQAAEcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAAcwB2AGcAMgB0AHQAZgAgAGYAcgBvAG0AIABGAG8AbgB0AGUAbABsAG8AIABwAHIAbwBqAGUAYwB0AC4AAEdlbmVyYXRlZCBieSBzdmcydHRmIGZyb20gRm9udGVsbG8gcHJvamVjdC4AAGgAdAB0AHAAOgAvAC8AZgBvAG4AdABlAGwAbABvAC4AYwBvAG0AAGh0dHA6Ly9mb250ZWxsby5jb20AAAIAAAAAAAAACgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABgAAAAEAAgBbAQIBAwRiYWNrBG1vcmUAAAAB//8AAgABAAAADAAAABYAAAACAAEAAwAFAAEABAAAAAIAAAAAAAAAAQAAAADVpCcIAAAAANbQV3MAAAAA1tBXcw==) format('truetype'); 4 | font-weight: normal; 5 | font-style: normal; 6 | } 7 | 8 | [class^="ricon"], [class*=" ricon"] { 9 | font-family:"ricon" !important; 10 | font-size:16px; 11 | font-style:normal; 12 | -webkit-font-smoothing: antialiased; 13 | -webkit-text-stroke-width: 0.2px; 14 | -moz-osx-font-smoothing: grayscale; 15 | } 16 | 17 | .ricon-back:before { content: "\e697"; } 18 | .ricon-more:before { content: "\e6a7"; } 19 | -------------------------------------------------------------------------------- /src/components/collapse/collapse-item.vue: -------------------------------------------------------------------------------- 1 | 26 | 81 | 94 | -------------------------------------------------------------------------------- /src/components/popup/index.vue: -------------------------------------------------------------------------------- 1 | 14 | 110 | 111 | 123 | -------------------------------------------------------------------------------- /src/components/slideMenu/index.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 106 | 107 | 128 | 129 | -------------------------------------------------------------------------------- /src/components/picker/index.vue: -------------------------------------------------------------------------------- 1 | 26 | 78 | 126 | -------------------------------------------------------------------------------- /src/components/search/style.scss: -------------------------------------------------------------------------------- 1 | @import "./../style/color.scss"; 2 | @import "./../style/fontSize.scss"; 3 | @import "./../style/mixin.scss"; 4 | @import "./../style/1px.scss"; 5 | 6 | .r-search{ 7 | width: 100%; 8 | background-color: $lightGrayColor; 9 | color: $darkGrayColor; 10 | @include textSize; 11 | @include px(border-radius, 10); 12 | overflow: hidden; 13 | .r-search-control{ 14 | position: relative; 15 | color: $grayColor; 16 | @include px(padding, 10); 17 | @include textSize; 18 | } 19 | .r-search-placeholder{ 20 | width: 85%; 21 | @include v-middle; 22 | border: none; 23 | background-color: transparent; 24 | box-sizing: border-box; 25 | color: $grayColor; 26 | } 27 | .head{ 28 | background-color: $whiteColor; 29 | @include px(padding-left, 20); 30 | .search-input{ 31 | @include px(padding-right, 20); 32 | .input{ 33 | outline:none; 34 | border: none; 35 | @include px(width, 485); 36 | @include px(height, 60); 37 | @include px(line-height, 60); 38 | @include px(padding-left, 10); 39 | @include px(padding-right, 10); 40 | @include px(margin-top, 15); 41 | @include px(margin-bottom, 15); 42 | box-sizing: border-box; 43 | float: left; 44 | } 45 | i{ 46 | float: left; 47 | color: $grayColor; 48 | @include h6Size; 49 | @include px(margin-top, 30); 50 | } 51 | } 52 | .search-cancle{ 53 | width: 100%; 54 | @include px(height, 90); 55 | color: $primaryColor; 56 | span{ 57 | width: 100%; 58 | @include px(height, 40); 59 | @include px(line-height, 40); 60 | @include px(margin-top, 25); 61 | text-align: center; 62 | display:inline-block; 63 | @extend .r-1px-l; 64 | } 65 | } 66 | } 67 | .r-search-content{ 68 | @include one-screen; 69 | position: fixed; 70 | background-color: $lightGrayColor; 71 | z-index: 9999; 72 | padding: 0; 73 | .result{ 74 | width: 100%; 75 | .tip{ 76 | @include px(padding, 20); 77 | @include px(margin-top, 20); 78 | .word{ 79 | color: $blackColor; 80 | } 81 | .icon{ 82 | width: 100%; 83 | text-align: right; 84 | @include h6Size; 85 | } 86 | } 87 | .list{ 88 | background-color: $whiteColor; 89 | @include px(padding-left, 20); 90 | @include px(padding-right, 20); 91 | @extend .r-1px-t; 92 | .item{ 93 | @include px(padding-top, 25); 94 | @include px(padding-bottom, 25); 95 | @extend .r-1px-b; 96 | color: $grayColor; 97 | } 98 | .last{ 99 | &:after{ 100 | border:none; 101 | } 102 | } 103 | } 104 | .b-border{ 105 | @extend .r-1px-b; 106 | } 107 | } 108 | } 109 | .r-search-input{ 110 | position: fixed; 111 | left:0; 112 | top:0; 113 | z-index: 9999; 114 | @include px(width, 540); 115 | @include px(height, 40); 116 | @include px(line-height, 40); 117 | @include px(padding-left, 10); 118 | @include px(padding-right, 10); 119 | @include px(margin-top, 25); 120 | @include px(margin-bottom, 25); 121 | @include px(margin-left, 70); 122 | color: $lightBlackColor; 123 | } 124 | } 125 | -------------------------------------------------------------------------------- /src/components/search/index.vue: -------------------------------------------------------------------------------- 1 | 46 | 47 | 128 | 129 | 132 | -------------------------------------------------------------------------------- /src/components/style/grid.scss: -------------------------------------------------------------------------------- 1 | .container-fluid { 2 | margin-left: auto; 3 | margin-right: auto; 4 | padding-left: 0px; 5 | padding-right: 0px; 6 | } 7 | 8 | .container-fluid::after { 9 | content: ""; 10 | display: table; 11 | clear: both; 12 | } 13 | 14 | .row { 15 | margin-right: -0px; 16 | margin-left: -0px; 17 | } 18 | 19 | .row::after { 20 | content: ""; 21 | display: table; 22 | clear: both; 23 | } 24 | 25 | @media (min-width: 320px) { 26 | .row { 27 | margin-right: -0px; 28 | margin-left: -0px; 29 | } 30 | } 31 | 32 | .col-xs, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 { 33 | position: relative; 34 | min-height: 1px; 35 | padding-right: 0px; 36 | padding-left: 0px; 37 | } 38 | 39 | @media (min-width: 320px) { 40 | .col-xs, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 { 41 | padding-right: 0px; 42 | padding-left: 0px; 43 | } 44 | } 45 | 46 | .col-xs-1 { 47 | float: left; 48 | width: 8.333333%; 49 | } 50 | 51 | .col-xs-2 { 52 | float: left; 53 | width: 16.666667%; 54 | } 55 | 56 | .col-xs-3 { 57 | float: left; 58 | width: 25%; 59 | } 60 | 61 | .col-xs-4 { 62 | float: left; 63 | width: 33.333333%; 64 | } 65 | 66 | .col-xs-5 { 67 | float: left; 68 | width: 41.666667%; 69 | } 70 | 71 | .col-xs-6 { 72 | float: left; 73 | width: 50%; 74 | } 75 | 76 | .col-xs-7 { 77 | float: left; 78 | width: 58.333333%; 79 | } 80 | 81 | .col-xs-8 { 82 | float: left; 83 | width: 66.666667%; 84 | } 85 | 86 | .col-xs-9 { 87 | float: left; 88 | width: 75%; 89 | } 90 | 91 | .col-xs-10 { 92 | float: left; 93 | width: 83.333333%; 94 | } 95 | 96 | .col-xs-11 { 97 | float: left; 98 | width: 91.666667%; 99 | } 100 | 101 | .col-xs-12 { 102 | float: left; 103 | width: 100%; 104 | } 105 | 106 | .pull-xs-0 { 107 | right: auto; 108 | } 109 | 110 | .pull-xs-1 { 111 | right: 8.333333%; 112 | } 113 | 114 | .pull-xs-2 { 115 | right: 16.666667%; 116 | } 117 | 118 | .pull-xs-3 { 119 | right: 25%; 120 | } 121 | 122 | .pull-xs-4 { 123 | right: 33.333333%; 124 | } 125 | 126 | .pull-xs-5 { 127 | right: 41.666667%; 128 | } 129 | 130 | .pull-xs-6 { 131 | right: 50%; 132 | } 133 | 134 | .pull-xs-7 { 135 | right: 58.333333%; 136 | } 137 | 138 | .pull-xs-8 { 139 | right: 66.666667%; 140 | } 141 | 142 | .pull-xs-9 { 143 | right: 75%; 144 | } 145 | 146 | .pull-xs-10 { 147 | right: 83.333333%; 148 | } 149 | 150 | .pull-xs-11 { 151 | right: 91.666667%; 152 | } 153 | 154 | .pull-xs-12 { 155 | right: 100%; 156 | } 157 | 158 | .push-xs-0 { 159 | left: auto; 160 | } 161 | 162 | .push-xs-1 { 163 | left: 8.333333%; 164 | } 165 | 166 | .push-xs-2 { 167 | left: 16.666667%; 168 | } 169 | 170 | .push-xs-3 { 171 | left: 25%; 172 | } 173 | 174 | .push-xs-4 { 175 | left: 33.333333%; 176 | } 177 | 178 | .push-xs-5 { 179 | left: 41.666667%; 180 | } 181 | 182 | .push-xs-6 { 183 | left: 50%; 184 | } 185 | 186 | .push-xs-7 { 187 | left: 58.333333%; 188 | } 189 | 190 | .push-xs-8 { 191 | left: 66.666667%; 192 | } 193 | 194 | .push-xs-9 { 195 | left: 75%; 196 | } 197 | 198 | .push-xs-10 { 199 | left: 83.333333%; 200 | } 201 | 202 | .push-xs-11 { 203 | left: 91.666667%; 204 | } 205 | 206 | .push-xs-12 { 207 | left: 100%; 208 | } 209 | 210 | .offset-xs-1 { 211 | margin-left: 8.333333%; 212 | } 213 | 214 | .offset-xs-2 { 215 | margin-left: 16.666667%; 216 | } 217 | 218 | .offset-xs-3 { 219 | margin-left: 25%; 220 | } 221 | 222 | .offset-xs-4 { 223 | margin-left: 33.333333%; 224 | } 225 | 226 | .offset-xs-5 { 227 | margin-left: 41.666667%; 228 | } 229 | 230 | .offset-xs-6 { 231 | margin-left: 50%; 232 | } 233 | 234 | .offset-xs-7 { 235 | margin-left: 58.333333%; 236 | } 237 | 238 | .offset-xs-8 { 239 | margin-left: 66.666667%; 240 | } 241 | 242 | .offset-xs-9 { 243 | margin-left: 75%; 244 | } 245 | 246 | .offset-xs-10 { 247 | margin-left: 83.333333%; 248 | } 249 | 250 | .offset-xs-11 { 251 | margin-left: 91.666667%; 252 | } 253 | -------------------------------------------------------------------------------- /src/components/libs/js/flexible.js: -------------------------------------------------------------------------------- 1 | ;(function(win, lib) { 2 | var doc = win.document; 3 | var docEl = doc.documentElement; 4 | var metaEl = doc.querySelector('meta[name="viewport"]'); 5 | var flexibleEl = doc.querySelector('meta[name="flexible"]'); 6 | var dpr = 0; 7 | var scale = 0; 8 | var tid; 9 | var flexible = lib.flexible || (lib.flexible = {}); 10 | 11 | if (metaEl) { 12 | console.warn('将根据已有的meta标签来设置缩放比例'); 13 | var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/); 14 | if (match) { 15 | scale = parseFloat(match[1]); 16 | dpr = parseInt(1 / scale); 17 | } 18 | } else if (flexibleEl) { 19 | var content = flexibleEl.getAttribute('content'); 20 | if (content) { 21 | var initialDpr = content.match(/initial\-dpr=([\d\.]+)/); 22 | var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/); 23 | if (initialDpr) { 24 | dpr = parseFloat(initialDpr[1]); 25 | scale = parseFloat((1 / dpr).toFixed(2)); 26 | } 27 | if (maximumDpr) { 28 | dpr = parseFloat(maximumDpr[1]); 29 | scale = parseFloat((1 / dpr).toFixed(2)); 30 | } 31 | } 32 | } 33 | 34 | if (!dpr && !scale) { 35 | var isAndroid = win.navigator.appVersion.match(/android/gi); 36 | var isIPhone = win.navigator.appVersion.match(/iphone/gi); 37 | var devicePixelRatio = win.devicePixelRatio; 38 | if (isIPhone) { 39 | // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案 40 | if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) { 41 | dpr = 3; 42 | } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){ 43 | dpr = 2; 44 | } else { 45 | dpr = 1; 46 | } 47 | } else { 48 | // 其他设备下，仍旧使用1倍的方案 49 | dpr = 1; 50 | } 51 | scale = 1 / dpr; 52 | } 53 | 54 | docEl.setAttribute('data-dpr', dpr); 55 | if (!metaEl) { 56 | metaEl = doc.createElement('meta'); 57 | metaEl.setAttribute('name', 'viewport'); 58 | metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no'); 59 | if (docEl.firstElementChild) { 60 | docEl.firstElementChild.appendChild(metaEl); 61 | } else { 62 | var wrap = doc.createElement('div'); 63 | wrap.appendChild(metaEl); 64 | doc.write(wrap.innerHTML); 65 | } 66 | } 67 | 68 | function refreshRem(){ 69 | var width = docEl.getBoundingClientRect().width; 70 | if (width / dpr > 540) { 71 | width = 540 * dpr; 72 | } 73 | var rem = width / 10; 74 | docEl.style.fontSize = rem + 'px'; 75 | flexible.rem = win.rem = rem; 76 | } 77 | 78 | win.addEventListener('resize', function() { 79 | clearTimeout(tid); 80 | tid = setTimeout(refreshRem, 300); 81 | }, false); 82 | win.addEventListener('pageshow', function(e) { 83 | if (e.persisted) { 84 | clearTimeout(tid); 85 | tid = setTimeout(refreshRem, 300); 86 | } 87 | }, false); 88 | 89 | if (doc.readyState === 'complete') { 90 | doc.body.style.fontSize = 12 * dpr + 'px'; 91 | } else { 92 | doc.addEventListener('DOMContentLoaded', function(e) { 93 | doc.body.style.fontSize = 12 * dpr + 'px'; 94 | }, false); 95 | } 96 | 97 | 98 | refreshRem(); 99 | 100 | flexible.dpr = win.dpr = dpr; 101 | flexible.refreshRem = refreshRem; 102 | flexible.rem2px = function(d) { 103 | var val = parseFloat(d) * this.rem; 104 | if (typeof d === 'string' && d.match(/rem$/)) { 105 | val += 'px'; 106 | } 107 | return val; 108 | } 109 | flexible.px2rem = function(d) { 110 | var val = parseFloat(d) / this.rem; 111 | if (typeof d === 'string' && d.match(/px$/)) { 112 | val += 'rem'; 113 | } 114 | return val; 115 | } 116 | 117 | })(window, window['lib'] || (window['lib'] = {})); 118 | -------------------------------------------------------------------------------- /static/lib/flexible.js: -------------------------------------------------------------------------------- 1 | ;(function(win, lib) { 2 | var doc = win.document; 3 | var docEl = doc.documentElement; 4 | var metaEl = doc.querySelector('meta[name="viewport"]'); 5 | var flexibleEl = doc.querySelector('meta[name="flexible"]'); 6 | var dpr = 0; 7 | var scale = 0; 8 | var tid; 9 | var flexible = lib.flexible || (lib.flexible = {}); 10 | 11 | if (metaEl) { 12 | console.warn('将根据已有的meta标签来设置缩放比例'); 13 | var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/); 14 | if (match) { 15 | scale = parseFloat(match[1]); 16 | dpr = parseInt(1 / scale); 17 | } 18 | } else if (flexibleEl) { 19 | var content = flexibleEl.getAttribute('content'); 20 | if (content) { 21 | var initialDpr = content.match(/initial\-dpr=([\d\.]+)/); 22 | var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/); 23 | if (initialDpr) { 24 | dpr = parseFloat(initialDpr[1]); 25 | scale = parseFloat((1 / dpr).toFixed(2)); 26 | } 27 | if (maximumDpr) { 28 | dpr = parseFloat(maximumDpr[1]); 29 | scale = parseFloat((1 / dpr).toFixed(2)); 30 | } 31 | } 32 | } 33 | 34 | if (!dpr && !scale) { 35 | var isAndroid = win.navigator.appVersion.match(/android/gi); 36 | var isIPhone = win.navigator.appVersion.match(/iphone/gi); 37 | var devicePixelRatio = win.devicePixelRatio; 38 | if (isIPhone) { 39 | // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案 40 | if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) { 41 | // dpr = 3; 42 | dpr = 1; 43 | } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){ 44 | // dpr = 2; 45 | dpr = 1; 46 | } else { 47 | dpr = 1; 48 | } 49 | } else { 50 | // 其他设备下，仍旧使用1倍的方案 51 | dpr = 1; 52 | } 53 | scale = 1 / dpr; 54 | } 55 | 56 | docEl.setAttribute('data-dpr', dpr); 57 | if (!metaEl) { 58 | metaEl = doc.createElement('meta'); 59 | metaEl.setAttribute('name', 'viewport'); 60 | metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no'); 61 | if (docEl.firstElementChild) { 62 | docEl.firstElementChild.appendChild(metaEl); 63 | } else { 64 | var wrap = doc.createElement('div'); 65 | wrap.appendChild(metaEl); 66 | doc.write(wrap.innerHTML); 67 | } 68 | } 69 | 70 | function refreshRem(){ 71 | var width = docEl.getBoundingClientRect().width; 72 | if (width / dpr > 540) { 73 | width = 540 * dpr; 74 | } 75 | var rem = width / 10; 76 | docEl.style.fontSize = rem + 'px'; 77 | flexible.rem = win.rem = rem; 78 | } 79 | 80 | win.addEventListener('resize', function() { 81 | clearTimeout(tid); 82 | tid = setTimeout(refreshRem, 300); 83 | }, false); 84 | win.addEventListener('pageshow', function(e) { 85 | if (e.persisted) { 86 | clearTimeout(tid); 87 | tid = setTimeout(refreshRem, 300); 88 | } 89 | }, false); 90 | 91 | if (doc.readyState === 'complete') { 92 | doc.body.style.fontSize = 12 * dpr + 'px'; 93 | } else { 94 | doc.addEventListener('DOMContentLoaded', function(e) { 95 | doc.body.style.fontSize = 12 * dpr + 'px'; 96 | }, false); 97 | } 98 | 99 | 100 | refreshRem(); 101 | 102 | flexible.dpr = win.dpr = dpr; 103 | flexible.refreshRem = refreshRem; 104 | flexible.rem2px = function(d) { 105 | var val = parseFloat(d) * this.rem; 106 | if (typeof d === 'string' && d.match(/rem$/)) { 107 | val += 'px'; 108 | } 109 | return val; 110 | } 111 | flexible.px2rem = function(d) { 112 | var val = parseFloat(d) / this.rem; 113 | if (typeof d === 'string' && d.match(/px$/)) { 114 | val += 'rem'; 115 | } 116 | return val; 117 | } 118 | 119 | })(window, window['lib'] || (window['lib'] = {})); 120 | -------------------------------------------------------------------------------- /src/components/style/animate.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /*! 4 | * animate.css -http://daneden.me/animate 5 | * Version - 3.5.2 6 | * Licensed under the MIT license - http://opensource.org/licenses/MIT 7 | * 8 | * Copyright (c) 2017 Daniel Eden 9 | */ 10 | 11 | .animated { 12 | animation-duration: 0.4s; 13 | animation-fill-mode: both; 14 | } 15 | 16 | .animated.infinite { 17 | animation-iteration-count: infinite; 18 | } 19 | 20 | .animated.hinge { 21 | animation-duration: 1s; 22 | } 23 | .animated.quick { 24 | animation-duration: 0.4s; 25 | } 26 | 27 | @keyframes fadeIn { 28 | from { 29 | will-change: transform; 30 | opacity: 0; 31 | } 32 | 33 | to { 34 | opacity: 1; 35 | } 36 | } 37 | .fadeIn { 38 | animation-timing-function: cubic-bezier(.42,0,.58,1); 39 | animation-name: fadeIn; 40 | } 41 | 42 | @keyframes fadeOut { 43 | from { 44 | will-change: transform; 45 | opacity: 1; 46 | } 47 | 48 | to { 49 | opacity: 0; 50 | } 51 | } 52 | .fadeOut { 53 | animation-timing-function: cubic-bezier(.42,0,.58,1); 54 | animation-name: fadeOut; 55 | } 56 | 57 | @keyframes slideInDown { 58 | from { 59 | will-change: transform; 60 | transform: translate(0, -100%); 61 | } 62 | 63 | to { 64 | transform: translate(0, 0); 65 | } 66 | } 67 | .slideInDown { 68 | animation-timing-function: cubic-bezier(.42,0,.58,1); 69 | animation-name: slideInDown; 70 | } 71 | 72 | @keyframes slideInLeft { 73 | from { 74 | will-change: transform; 75 | transform: translate(-100%, 0); 76 | visibility: visible; 77 | } 78 | 79 | to { 80 | transform: translate(0, 0); 81 | } 82 | } 83 | .slideInLeft { 84 | animation-timing-function: cubic-bezier(.42,0,.58,1); 85 | animation-name: slideInLeft; 86 | } 87 | 88 | @keyframes slideInRight { 89 | from { 90 | will-change: transform; 91 | -webkit-transform: translate(100%, 0); 92 | transform: translate(100%, 0); 93 | visibility: visible; 94 | } 95 | to { 96 | transform: translate(0, 0); 97 | } 98 | } 99 | .slideInRight { 100 | animation-timing-function: cubic-bezier(.42,0,.58,1); 101 | animation-name: slideInRight; 102 | } 103 | 104 | @keyframes slideInUp { 105 | from { 106 | will-change: transform; 107 | transform: translate(0, 100%); 108 | visibility: visible; 109 | } 110 | 111 | to { 112 | transform: translate(0, 0); 113 | } 114 | } 115 | .slideInUp { 116 | animation-timing-function: cubic-bezier(.42,0,.58,1); 117 | animation-name: slideInUp; 118 | } 119 | 120 | @keyframes slideOutDown { 121 | from { 122 | will-change: transform; 123 | transform: translate(0, 0); 124 | } 125 | 126 | to { 127 | will-change: transform; 128 | visibility: hidden; 129 | transform: translate(0, 100%); 130 | } 131 | } 132 | .slideOutDown { 133 | animation-timing-function: cubic-bezier(.42,0,.58,1); 134 | animation-name: slideOutDown; 135 | } 136 | 137 | @keyframes slideOutLeft { 138 | from { 139 | will-change: transform; 140 | transform: translate(0, 0); 141 | } 142 | 143 | to { 144 | visibility: hidden; 145 | transform: translate(-100%, 0); 146 | } 147 | } 148 | .slideOutLeft { 149 | animation-timing-function: cubic-bezier(.42,0,.58,1); 150 | animation-name: slideOutLeft; 151 | } 152 | 153 | @keyframes slideOutRight { 154 | from { 155 | will-change: transform; 156 | transform: translate(0, 0); 157 | } 158 | 159 | to { 160 | visibility: hidden; 161 | transform: translate(100%, 0); 162 | } 163 | } 164 | .slideOutRight { 165 | animation-timing-function: cubic-bezier(.42,0,.58,1); 166 | animation-name: slideOutRight; 167 | } 168 | 169 | @keyframes slideOutUp { 170 | from { 171 | will-change: transform; 172 | transform: translate(0, 0); 173 | } 174 | 175 | to { 176 | visibility: hidden; 177 | transform: translate(0, -100%); 178 | } 179 | } 180 | .slideOutUp { 181 | animation-timing-function: cubic-bezier(.42,0,.58,1); 182 | animation-name: slideOutUp; 183 | } 184 | 185 | .popIn { 186 | animation-timing-function: cubic-bezier(.42,0,.58,1); 187 | animation-name: popIn; 188 | } 189 | @keyframes popIn { 190 | 0% { 191 | will-change: transform; 192 | transform: scale3d(0, 0, 0); 193 | } 194 | 100% { 195 | transform: scale3d(1,1,1); 196 | } 197 | } 198 | 199 | .popOut { 200 | animation-timing-function: cubic-bezier(.42,0,.58,1); 201 | animation-name: popOut; 202 | } 203 | @keyframes popOut { 204 | 0% { 205 | will-change: transform; 206 | transform: scale3d(1,1,1); 207 | } 208 | 100% { 209 | transform: scale3d(0, 0, 0); 210 | } 211 | } 212 | -------------------------------------------------------------------------------- /src/components/libs/css/grid.css: -------------------------------------------------------------------------------- 1 | .container { 2 | margin-left: auto; 3 | margin-right: auto; 4 | padding-left: 0px; 5 | padding-right: 0px; 6 | } 7 | 8 | .container::after { 9 | content: ""; 10 | display: table; 11 | clear: both; 12 | } 13 | 14 | @media (min-width: 320px) { 15 | .container { 16 | width: 540px; 17 | max-width: 100%; 18 | } 19 | } 20 | 21 | .container-fluid { 22 | margin-left: auto; 23 | margin-right: auto; 24 | padding-left: 0px; 25 | padding-right: 0px; 26 | } 27 | 28 | .container-fluid::after { 29 | content: ""; 30 | display: table; 31 | clear: both; 32 | } 33 | 34 | .row { 35 | margin-right: -0px; 36 | margin-left: -0px; 37 | } 38 | 39 | .row::after { 40 | content: ""; 41 | display: table; 42 | clear: both; 43 | } 44 | 45 | @media (min-width: 320px) { 46 | .row { 47 | margin-right: -0px; 48 | margin-left: -0px; 49 | } 50 | } 51 | 52 | .col-xs, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-sm, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-md, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-xl, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 { 53 | position: relative; 54 | min-height: 1px; 55 | padding-right: 0px; 56 | padding-left: 0px; 57 | } 58 | 59 | @media (min-width: 320px) { 60 | .col-xs, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-sm, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-md, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-xl, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 { 61 | padding-right: 0px; 62 | padding-left: 0px; 63 | } 64 | } 65 | 66 | .col-xs-1 { 67 | float: left; 68 | width: 8.333333%; 69 | } 70 | 71 | .col-xs-2 { 72 | float: left; 73 | width: 16.666667%; 74 | } 75 | 76 | .col-xs-3 { 77 | float: left; 78 | width: 25%; 79 | } 80 | 81 | .col-xs-4 { 82 | float: left; 83 | width: 33.333333%; 84 | } 85 | 86 | .col-xs-5 { 87 | float: left; 88 | width: 41.666667%; 89 | } 90 | 91 | .col-xs-6 { 92 | float: left; 93 | width: 50%; 94 | } 95 | 96 | .col-xs-7 { 97 | float: left; 98 | width: 58.333333%; 99 | } 100 | 101 | .col-xs-8 { 102 | float: left; 103 | width: 66.666667%; 104 | } 105 | 106 | .col-xs-9 { 107 | float: left; 108 | width: 75%; 109 | } 110 | 111 | .col-xs-10 { 112 | float: left; 113 | width: 83.333333%; 114 | } 115 | 116 | .col-xs-11 { 117 | float: left; 118 | width: 91.666667%; 119 | } 120 | 121 | .col-xs-12 { 122 | float: left; 123 | width: 100%; 124 | } 125 | 126 | .pull-xs-0 { 127 | right: auto; 128 | } 129 | 130 | .pull-xs-1 { 131 | right: 8.333333%; 132 | } 133 | 134 | .pull-xs-2 { 135 | right: 16.666667%; 136 | } 137 | 138 | .pull-xs-3 { 139 | right: 25%; 140 | } 141 | 142 | .pull-xs-4 { 143 | right: 33.333333%; 144 | } 145 | 146 | .pull-xs-5 { 147 | right: 41.666667%; 148 | } 149 | 150 | .pull-xs-6 { 151 | right: 50%; 152 | } 153 | 154 | .pull-xs-7 { 155 | right: 58.333333%; 156 | } 157 | 158 | .pull-xs-8 { 159 | right: 66.666667%; 160 | } 161 | 162 | .pull-xs-9 { 163 | right: 75%; 164 | } 165 | 166 | .pull-xs-10 { 167 | right: 83.333333%; 168 | } 169 | 170 | .pull-xs-11 { 171 | right: 91.666667%; 172 | } 173 | 174 | .pull-xs-12 { 175 | right: 100%; 176 | } 177 | 178 | .push-xs-0 { 179 | left: auto; 180 | } 181 | 182 | .push-xs-1 { 183 | left: 8.333333%; 184 | } 185 | 186 | .push-xs-2 { 187 | left: 16.666667%; 188 | } 189 | 190 | .push-xs-3 { 191 | left: 25%; 192 | } 193 | 194 | .push-xs-4 { 195 | left: 33.333333%; 196 | } 197 | 198 | .push-xs-5 { 199 | left: 41.666667%; 200 | } 201 | 202 | .push-xs-6 { 203 | left: 50%; 204 | } 205 | 206 | .push-xs-7 { 207 | left: 58.333333%; 208 | } 209 | 210 | .push-xs-8 { 211 | left: 66.666667%; 212 | } 213 | 214 | .push-xs-9 { 215 | left: 75%; 216 | } 217 | 218 | .push-xs-10 { 219 | left: 83.333333%; 220 | } 221 | 222 | .push-xs-11 { 223 | left: 91.666667%; 224 | } 225 | 226 | .push-xs-12 { 227 | left: 100%; 228 | } 229 | 230 | .offset-xs-1 { 231 | margin-left: 8.333333%; 232 | } 233 | 234 | .offset-xs-2 { 235 | margin-left: 16.666667%; 236 | } 237 | 238 | .offset-xs-3 { 239 | margin-left: 25%; 240 | } 241 | 242 | .offset-xs-4 { 243 | margin-left: 33.333333%; 244 | } 245 | 246 | .offset-xs-5 { 247 | margin-left: 41.666667%; 248 | } 249 | 250 | .offset-xs-6 { 251 | margin-left: 50%; 252 | } 253 | 254 | .offset-xs-7 { 255 | margin-left: 58.333333%; 256 | } 257 | 258 | .offset-xs-8 { 259 | margin-left: 66.666667%; 260 | } 261 | 262 | .offset-xs-9 { 263 | margin-left: 75%; 264 | } 265 | 266 | .offset-xs-10 { 267 | margin-left: 83.333333%; 268 | } 269 | 270 | .offset-xs-11 { 271 | margin-left: 91.666667%; 272 | } 273 | -------------------------------------------------------------------------------- /src/components/photoSwiper/index.vue: -------------------------------------------------------------------------------- 1 | 35 | 36 | 141 | 142 | 185 | -------------------------------------------------------------------------------- /src/components/style/base.scss: -------------------------------------------------------------------------------- 1 | @import "./color.scss"; 2 | @import "./fontSize.scss"; 3 | @import "./mixin.scss"; 4 | *{ 5 | box-sizing:border-box; 6 | margin: 0; 7 | padding: 0; 8 | font-family: 'PingFang SC', 'Helvetica Neue', 'Helvetica', 'STHeitiSC-Light', 'Arial', sans-serif; 9 | } 10 | html { 11 | color: #222; 12 | font-size: 1em; 13 | line-height: 1.4; 14 | } 15 | input, textarea{ 16 | outline: none; 17 | } 18 | ::-moz-selection { 19 | background: #b3d4fc; 20 | text-shadow: none; 21 | } 22 | ::selection { 23 | background: #b3d4fc; 24 | text-shadow: none; 25 | } 26 | frame{ 27 | display: none!important; 28 | } 29 | hr { 30 | display: block; 31 | height: 1px; 32 | border: 0; 33 | border-top: 1px solid #ccc; 34 | margin: 1em 0; 35 | padding: 0; 36 | } 37 | audio, 38 | canvas, 39 | iframe, 40 | img, 41 | svg, 42 | video { 43 | vertical-align: middle; 44 | } 45 | fieldset { 46 | border: 0; 47 | margin: 0; 48 | padding: 0; 49 | } 50 | textarea { 51 | resize: vertical; 52 | } 53 | .browserupgrade { 54 | margin: 0.2em 0; 55 | background: #ccc; 56 | color: #000; 57 | padding: 0.2em 0; 58 | } 59 | .visuallyhidden { 60 | border: 0; 61 | -webkit-clip-path: inset(50%); 62 | clip-path: inset(50%); 63 | display: inline-block; 64 | height: 1px; 65 | margin: -1px; 66 | overflow: hidden; 67 | padding: 0; 68 | width: 1px; 69 | white-space: nowrap; 70 | } 71 | .visuallyhidden.focusable:active, 72 | .visuallyhidden.focusable:focus { 73 | clip: auto; 74 | -webkit-clip-path: none; 75 | clip-path: none; 76 | height: auto; 77 | margin: 0; 78 | overflow: visible; 79 | position: static; 80 | width: auto; 81 | white-space: inherit; 82 | } 83 | .invisible { 84 | visibility: hidden; 85 | } 86 | .clearfix:before, 87 | .clearfix:after { 88 | content: " "; 89 | display: table; 90 | } 91 | .clearfix:after { 92 | clear: both; 93 | } 94 | html { 95 | line-height: 1.15; /* 1 */ 96 | -ms-text-size-adjust: 100%; /* 2 */ 97 | -webkit-text-size-adjust: 100%; /* 2 */ 98 | } 99 | body { 100 | margin: 0; 101 | } 102 | article, 103 | aside, 104 | footer, 105 | header, 106 | nav, 107 | section { 108 | display: block; 109 | } 110 | h1 { 111 | font-size: 2em; 112 | margin: 0.67em 0; 113 | } 114 | figcaption, 115 | figure, 116 | main { /* 1 */ 117 | display: block; 118 | } 119 | figure { 120 | margin: 1em 40px; 121 | } 122 | hr { 123 | box-sizing: content-box; /* 1 */ 124 | height: 0; /* 1 */ 125 | overflow: visible; /* 2 */ 126 | } 127 | pre { 128 | font-family: monospace, monospace; /* 1 */ 129 | font-size: 1em; /* 2 */ 130 | } 131 | a { 132 | background-color: transparent; /* 1 */ 133 | -webkit-text-decoration-skip: objects; /* 2 */ 134 | } 135 | abbr[title] { 136 | border-bottom: none; /* 1 */ 137 | text-decoration: underline; /* 2 */ 138 | text-decoration: underline dotted; /* 2 */ 139 | } 140 | b, 141 | strong { 142 | font-weight: inherit; 143 | } 144 | b, 145 | strong { 146 | font-weight: bolder; 147 | } 148 | code, 149 | kbd, 150 | samp { 151 | font-family: monospace, monospace; /* 1 */ 152 | font-size: 1em; /* 2 */ 153 | } 154 | dfn { 155 | font-style: italic; 156 | } 157 | mark { 158 | background-color: #ff0; 159 | color: #000; 160 | } 161 | small { 162 | font-size: 80%; 163 | } 164 | sub, 165 | sup { 166 | font-size: 75%; 167 | line-height: 0; 168 | position: relative; 169 | vertical-align: baseline; 170 | } 171 | sub { 172 | bottom: -0.25em; 173 | } 174 | sup { 175 | top: -0.5em; 176 | } 177 | audio, 178 | video { 179 | display: inline-block; 180 | } 181 | audio:not([controls]) { 182 | display: none; 183 | height: 0; 184 | } 185 | img { 186 | border-style: none; 187 | } 188 | svg:not(:root) { 189 | overflow: hidden; 190 | } 191 | button, 192 | input, 193 | optgroup, 194 | select, 195 | textarea { 196 | font-family: sans-serif; /* 1 */ 197 | font-size: 100%; /* 1 */ 198 | line-height: 1.15; /* 1 */ 199 | margin: 0; /* 2 */ 200 | } 201 | button, 202 | input { /* 1 */ 203 | overflow: visible; 204 | } 205 | button, 206 | select { /* 1 */ 207 | text-transform: none; 208 | } 209 | button, 210 | html [type="button"], /* 1 */ 211 | [type="reset"], 212 | [type="submit"] { 213 | -webkit-appearance: button; /* 2 */ 214 | } 215 | button::-moz-focus-inner, 216 | [type="button"]::-moz-focus-inner, 217 | [type="reset"]::-moz-focus-inner, 218 | [type="submit"]::-moz-focus-inner { 219 | border-style: none; 220 | padding: 0; 221 | } 222 | button:-moz-focusring, 223 | [type="button"]:-moz-focusring, 224 | [type="reset"]:-moz-focusring, 225 | [type="submit"]:-moz-focusring { 226 | outline: 1px dotted ButtonText; 227 | } 228 | fieldset { 229 | padding: 0.35em 0.75em 0.625em; 230 | } 231 | legend { 232 | box-sizing: border-box; /* 1 */ 233 | color: inherit; /* 2 */ 234 | display: table; /* 1 */ 235 | max-width: 100%; /* 1 */ 236 | padding: 0; /* 3 */ 237 | white-space: normal; /* 1 */ 238 | } 239 | progress { 240 | display: inline-block; /* 1 */ 241 | vertical-align: baseline; /* 2 */ 242 | } 243 | textarea { 244 | overflow: auto; 245 | } 246 | [type="checkbox"], 247 | [type="radio"] { 248 | box-sizing: border-box; /* 1 */ 249 | padding: 0; /* 2 */ 250 | } 251 | [type="number"]::-webkit-inner-spin-button, 252 | [type="number"]::-webkit-outer-spin-button { 253 | height: auto; 254 | } 255 | [type="search"] { 256 | -webkit-appearance: textfield; /* 1 */ 257 | outline-offset: -2px; /* 2 */ 258 | } 259 | [type="search"]::-webkit-search-cancel-button, 260 | [type="search"]::-webkit-search-decoration { 261 | -webkit-appearance: none; 262 | } 263 | ::-webkit-file-upload-button { 264 | -webkit-appearance: button; /* 1 */ 265 | font: inherit; /* 2 */ 266 | } 267 | details, /* 1 */ 268 | menu { 269 | display: block; 270 | } 271 | summary { 272 | display: list-item; 273 | } 274 | canvas { 275 | display: inline-block; 276 | } 277 | template { 278 | display: none; 279 | } 280 | [hidden] { 281 | display: none; 282 | } 283 | -------------------------------------------------------------------------------- /src/components/swiper/swiper.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 187 | 188 | 211 | -------------------------------------------------------------------------------- /src/components/picker/pickerItem.vue: -------------------------------------------------------------------------------- 1 | 18 | 239 | 242 | -------------------------------------------------------------------------------- /src/components/libs/font/icomoon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Generated by IcoMoon 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /src/components/libs/js/tween.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Tween.js - Licensed under the MIT license 3 | * https://github.com/tweenjs/tween.js 4 | * ---------------------------------------------- 5 | * 6 | * See https://github.com/tweenjs/tween.js/graphs/contributors for the full list of contributors. 7 | * Thank you all, you're awesome! 8 | */ 9 | 10 | var TWEEN = TWEEN || (function () { 11 | 12 | var _tweens = []; 13 | 14 | return { 15 | 16 | getAll: function () { 17 | 18 | return _tweens; 19 | 20 | }, 21 | 22 | removeAll: function () { 23 | 24 | _tweens = []; 25 | 26 | }, 27 | 28 | add: function (tween) { 29 | 30 | _tweens.push(tween); 31 | 32 | }, 33 | 34 | remove: function (tween) { 35 | 36 | var i = _tweens.indexOf(tween); 37 | 38 | if (i !== -1) { 39 | _tweens.splice(i, 1); 40 | } 41 | 42 | }, 43 | 44 | update: function (time, preserve) { 45 | 46 | if (_tweens.length === 0) { 47 | return false; 48 | } 49 | 50 | var i = 0; 51 | 52 | if ( time !== undefined ) { 53 | // fix for iOS8 54 | time = typeof window !== 'undefined' && window.performance === undefined ? Date.now() : time; 55 | 56 | } else if ( typeof window !== 'undefined' && window.performance !== undefined && window.performance.now !== undefined ) { 57 | 58 | time = window.performance.now(); 59 | 60 | } else { 61 | 62 | time = Date.now(); 63 | 64 | } 65 | 66 | while (i < _tweens.length) { 67 | 68 | if (_tweens[i].update(time) || preserve) { 69 | i++; 70 | } else { 71 | _tweens.splice(i, 1); 72 | } 73 | 74 | } 75 | 76 | return true; 77 | 78 | } 79 | }; 80 | 81 | })(); 82 | 83 | 84 | // Include a performance.now polyfill. 85 | // In node.js, use process.hrtime. 86 | if (typeof (window) === 'undefined' && typeof (process) !== 'undefined') { 87 | TWEEN.now = function () { 88 | var time = process.hrtime(); 89 | 90 | // Convert [seconds, nanoseconds] to milliseconds. 91 | return time[0] * 1000 + time[1] / 1000000; 92 | }; 93 | } 94 | // In a browser, use window.performance.now if it is available. 95 | else if (typeof (window) !== 'undefined' && 96 | window.performance !== undefined && 97 | window.performance.now !== undefined) { 98 | // This must be bound, because directly assigning this function 99 | // leads to an invocation exception in Chrome. 100 | TWEEN.now = window.performance.now.bind(window.performance); 101 | } 102 | // Use Date.now if it is available. 103 | else if (Date.now !== undefined) { 104 | TWEEN.now = Date.now; 105 | } 106 | // Otherwise, use 'new Date().getTime()'. 107 | else { 108 | TWEEN.now = function () { 109 | return new Date().getTime(); 110 | }; 111 | } 112 | 113 | 114 | TWEEN.Tween = function (object) { 115 | 116 | var _object = object; 117 | var _valuesStart = {}; 118 | var _valuesEnd = {}; 119 | var _valuesStartRepeat = {}; 120 | var _duration = 1000; 121 | var _repeat = 0; 122 | var _repeatDelayTime; 123 | var _yoyo = false; 124 | var _isPlaying = false; 125 | var _reversed = false; 126 | var _delayTime = 0; 127 | var _startTime = null; 128 | var _easingFunction = TWEEN.Easing.Linear.None; 129 | var _interpolationFunction = TWEEN.Interpolation.Linear; 130 | var _chainedTweens = []; 131 | var _onStartCallback = null; 132 | var _onStartCallbackFired = false; 133 | var _onUpdateCallback = null; 134 | var _onCompleteCallback = null; 135 | var _onStopCallback = null; 136 | 137 | this.to = function (properties, duration) { 138 | 139 | _valuesEnd = properties; 140 | 141 | if (duration !== undefined) { 142 | _duration = duration; 143 | } 144 | 145 | return this; 146 | 147 | }; 148 | 149 | this.start = function (time) { 150 | 151 | TWEEN.add(this); 152 | 153 | _isPlaying = true; 154 | 155 | _onStartCallbackFired = false; 156 | 157 | _startTime = time !== undefined ? time : TWEEN.now(); 158 | _startTime += _delayTime; 159 | 160 | for (var property in _valuesEnd) { 161 | 162 | // Check if an Array was provided as property value 163 | if (_valuesEnd[property] instanceof Array) { 164 | 165 | if (_valuesEnd[property].length === 0) { 166 | continue; 167 | } 168 | 169 | // Create a local copy of the Array with the start value at the front 170 | _valuesEnd[property] = [_object[property]].concat(_valuesEnd[property]); 171 | 172 | } 173 | 174 | // If `to()` specifies a property that doesn't exist in the source object, 175 | // we should not set that property in the object 176 | if (_object[property] === undefined) { 177 | continue; 178 | } 179 | 180 | // Save the starting value. 181 | _valuesStart[property] = _object[property]; 182 | 183 | if ((_valuesStart[property] instanceof Array) === false) { 184 | _valuesStart[property] *= 1.0; // Ensures we're using numbers, not strings 185 | } 186 | 187 | _valuesStartRepeat[property] = _valuesStart[property] || 0; 188 | 189 | } 190 | 191 | return this; 192 | 193 | }; 194 | 195 | this.stop = function () { 196 | 197 | if (!_isPlaying) { 198 | return this; 199 | } 200 | 201 | TWEEN.remove(this); 202 | _isPlaying = false; 203 | 204 | if (_onStopCallback !== null) { 205 | _onStopCallback.call(_object, _object); 206 | } 207 | 208 | this.stopChainedTweens(); 209 | return this; 210 | 211 | }; 212 | 213 | this.end = function () { 214 | 215 | this.update(_startTime + _duration); 216 | return this; 217 | 218 | }; 219 | 220 | this.stopChainedTweens = function () { 221 | 222 | for (var i = 0, numChainedTweens = _chainedTweens.length; i < numChainedTweens; i++) { 223 | _chainedTweens[i].stop(); 224 | } 225 | 226 | }; 227 | 228 | this.delay = function (amount) { 229 | 230 | _delayTime = amount; 231 | return this; 232 | 233 | }; 234 | 235 | this.repeat = function (times) { 236 | 237 | _repeat = times; 238 | return this; 239 | 240 | }; 241 | 242 | this.repeatDelay = function (amount) { 243 | 244 | _repeatDelayTime = amount; 245 | return this; 246 | 247 | }; 248 | 249 | this.yoyo = function (yoyo) { 250 | 251 | _yoyo = yoyo; 252 | return this; 253 | 254 | }; 255 | 256 | 257 | this.easing = function (easing) { 258 | 259 | _easingFunction = easing; 260 | return this; 261 | 262 | }; 263 | 264 | this.interpolation = function (interpolation) { 265 | 266 | _interpolationFunction = interpolation; 267 | return this; 268 | 269 | }; 270 | 271 | this.chain = function () { 272 | 273 | _chainedTweens = arguments; 274 | return this; 275 | 276 | }; 277 | 278 | this.onStart = function (callback) { 279 | 280 | _onStartCallback = callback; 281 | return this; 282 | 283 | }; 284 | 285 | this.onUpdate = function (callback) { 286 | 287 | _onUpdateCallback = callback; 288 | return this; 289 | 290 | }; 291 | 292 | this.onComplete = function (callback) { 293 | 294 | _onCompleteCallback = callback; 295 | return this; 296 | 297 | }; 298 | 299 | this.onStop = function (callback) { 300 | 301 | _onStopCallback = callback; 302 | return this; 303 | 304 | }; 305 | 306 | this.update = function (time) { 307 | 308 | var property; 309 | var elapsed; 310 | var value; 311 | 312 | if (time < _startTime) { 313 | return true; 314 | } 315 | 316 | if (_onStartCallbackFired === false) { 317 | 318 | if (_onStartCallback !== null) { 319 | _onStartCallback.call(_object, _object); 320 | } 321 | 322 | _onStartCallbackFired = true; 323 | } 324 | 325 | elapsed = (time - _startTime) / _duration; 326 | elapsed = elapsed > 1 ? 1 : elapsed; 327 | 328 | value = _easingFunction(elapsed); 329 | 330 | for (property in _valuesEnd) { 331 | 332 | // Don't update properties that do not exist in the source object 333 | if (_valuesStart[property] === undefined) { 334 | continue; 335 | } 336 | 337 | var start = _valuesStart[property] || 0; 338 | var end = _valuesEnd[property]; 339 | 340 | if (end instanceof Array) { 341 | 342 | _object[property] = _interpolationFunction(end, value); 343 | 344 | } else { 345 | 346 | // Parses relative end values with start as base (e.g.: +10, -3) 347 | if (typeof (end) === 'string') { 348 | 349 | if (end.charAt(0) === '+' || end.charAt(0) === '-') { 350 | end = start + parseFloat(end); 351 | } else { 352 | end = parseFloat(end); 353 | } 354 | } 355 | 356 | // Protect against non numeric properties. 357 | if (typeof (end) === 'number') { 358 | _object[property] = start + (end - start) * value; 359 | } 360 | 361 | } 362 | 363 | } 364 | 365 | if (_onUpdateCallback !== null) { 366 | _onUpdateCallback.call(_object, value); 367 | } 368 | 369 | if (elapsed === 1) { 370 | 371 | if (_repeat > 0) { 372 | 373 | if (isFinite(_repeat)) { 374 | _repeat--; 375 | } 376 | 377 | // Reassign starting values, restart by making startTime = now 378 | for (property in _valuesStartRepeat) { 379 | 380 | if (typeof (_valuesEnd[property]) === 'string') { 381 | _valuesStartRepeat[property] = _valuesStartRepeat[property] + parseFloat(_valuesEnd[property]); 382 | } 383 | 384 | if (_yoyo) { 385 | var tmp = _valuesStartRepeat[property]; 386 | 387 | _valuesStartRepeat[property] = _valuesEnd[property]; 388 | _valuesEnd[property] = tmp; 389 | } 390 | 391 | _valuesStart[property] = _valuesStartRepeat[property]; 392 | 393 | } 394 | 395 | if (_yoyo) { 396 | _reversed = !_reversed; 397 | } 398 | 399 | if (_repeatDelayTime !== undefined) { 400 | _startTime = time + _repeatDelayTime; 401 | } else { 402 | _startTime = time + _delayTime; 403 | } 404 | 405 | return true; 406 | 407 | } else { 408 | 409 | if (_onCompleteCallback !== null) { 410 | 411 | _onCompleteCallback.call(_object, _object); 412 | } 413 | 414 | for (var i = 0, numChainedTweens = _chainedTweens.length; i < numChainedTweens; i++) { 415 | // Make the chained tweens start exactly at the time they should, 416 | // even if the `update()` method was called way past the duration of the tween 417 | _chainedTweens[i].start(_startTime + _duration); 418 | } 419 | 420 | return false; 421 | 422 | } 423 | 424 | } 425 | 426 | return true; 427 | 428 | }; 429 | 430 | }; 431 | 432 | 433 | TWEEN.Easing = { 434 | 435 | Linear: { 436 | 437 | None: function (k) { 438 | 439 | return k; 440 | 441 | } 442 | 443 | }, 444 | 445 | Quadratic: { 446 | 447 | In: function (k) { 448 | 449 | return k * k; 450 | 451 | }, 452 | 453 | Out: function (k) { 454 | 455 | return k * (2 - k); 456 | 457 | }, 458 | 459 | InOut: function (k) { 460 | 461 | if ((k *= 2) < 1) { 462 | return 0.5 * k * k; 463 | } 464 | 465 | return - 0.5 * (--k * (k - 2) - 1); 466 | 467 | } 468 | 469 | }, 470 | 471 | Cubic: { 472 | 473 | In: function (k) { 474 | 475 | return k * k * k; 476 | 477 | }, 478 | 479 | Out: function (k) { 480 | 481 | return --k * k * k + 1; 482 | 483 | }, 484 | 485 | InOut: function (k) { 486 | 487 | if ((k *= 2) < 1) { 488 | return 0.5 * k * k * k; 489 | } 490 | 491 | return 0.5 * ((k -= 2) * k * k + 2); 492 | 493 | } 494 | 495 | }, 496 | 497 | Quartic: { 498 | 499 | In: function (k) { 500 | 501 | return k * k * k * k; 502 | 503 | }, 504 | 505 | Out: function (k) { 506 | 507 | return 1 - (--k * k * k * k); 508 | 509 | }, 510 | 511 | InOut: function (k) { 512 | 513 | if ((k *= 2) < 1) { 514 | return 0.5 * k * k * k * k; 515 | } 516 | 517 | return - 0.5 * ((k -= 2) * k * k * k - 2); 518 | 519 | } 520 | 521 | }, 522 | 523 | Quintic: { 524 | 525 | In: function (k) { 526 | 527 | return k * k * k * k * k; 528 | 529 | }, 530 | 531 | Out: function (k) { 532 | 533 | return --k * k * k * k * k + 1; 534 | 535 | }, 536 | 537 | InOut: function (k) { 538 | 539 | if ((k *= 2) < 1) { 540 | return 0.5 * k * k * k * k * k; 541 | } 542 | 543 | return 0.5 * ((k -= 2) * k * k * k * k + 2); 544 | 545 | } 546 | 547 | }, 548 | 549 | Sinusoidal: { 550 | 551 | In: function (k) { 552 | 553 | return 1 - Math.cos(k * Math.PI / 2); 554 | 555 | }, 556 | 557 | Out: function (k) { 558 | 559 | return Math.sin(k * Math.PI / 2); 560 | 561 | }, 562 | 563 | InOut: function (k) { 564 | 565 | return 0.5 * (1 - Math.cos(Math.PI * k)); 566 | 567 | } 568 | 569 | }, 570 | 571 | Exponential: { 572 | 573 | In: function (k) { 574 | 575 | return k === 0 ? 0 : Math.pow(1024, k - 1); 576 | 577 | }, 578 | 579 | Out: function (k) { 580 | 581 | return k === 1 ? 1 : 1 - Math.pow(2, - 10 * k); 582 | 583 | }, 584 | 585 | InOut: function (k) { 586 | 587 | if (k === 0) { 588 | return 0; 589 | } 590 | 591 | if (k === 1) { 592 | return 1; 593 | } 594 | 595 | if ((k *= 2) < 1) { 596 | return 0.5 * Math.pow(1024, k - 1); 597 | } 598 | 599 | return 0.5 * (- Math.pow(2, - 10 * (k - 1)) + 2); 600 | 601 | } 602 | 603 | }, 604 | 605 | Circular: { 606 | 607 | In: function (k) { 608 | 609 | return 1 - Math.sqrt(1 - k * k); 610 | 611 | }, 612 | 613 | Out: function (k) { 614 | 615 | return Math.sqrt(1 - (--k * k)); 616 | 617 | }, 618 | 619 | InOut: function (k) { 620 | 621 | if ((k *= 2) < 1) { 622 | return - 0.5 * (Math.sqrt(1 - k * k) - 1); 623 | } 624 | 625 | return 0.5 * (Math.sqrt(1 - (k -= 2) * k) + 1); 626 | 627 | } 628 | 629 | }, 630 | 631 | Elastic: { 632 | 633 | In: function (k) { 634 | 635 | if (k === 0) { 636 | return 0; 637 | } 638 | 639 | if (k === 1) { 640 | return 1; 641 | } 642 | 643 | return -Math.pow(2, 10 * (k - 1)) * Math.sin((k - 1.1) * 5 * Math.PI); 644 | 645 | }, 646 | 647 | Out: function (k) { 648 | 649 | if (k === 0) { 650 | return 0; 651 | } 652 | 653 | if (k === 1) { 654 | return 1; 655 | } 656 | 657 | return Math.pow(2, -10 * k) * Math.sin((k - 0.1) * 5 * Math.PI) + 1; 658 | 659 | }, 660 | 661 | InOut: function (k) { 662 | 663 | if (k === 0) { 664 | return 0; 665 | } 666 | 667 | if (k === 1) { 668 | return 1; 669 | } 670 | 671 | k *= 2; 672 | 673 | if (k < 1) { 674 | return -0.5 * Math.pow(2, 10 * (k - 1)) * Math.sin((k - 1.1) * 5 * Math.PI); 675 | } 676 | 677 | return 0.5 * Math.pow(2, -10 * (k - 1)) * Math.sin((k - 1.1) * 5 * Math.PI) + 1; 678 | 679 | } 680 | 681 | }, 682 | 683 | Back: { 684 | 685 | In: function (k) { 686 | 687 | var s = 1.70158; 688 | 689 | return k * k * ((s + 1) * k - s); 690 | 691 | }, 692 | 693 | Out: function (k) { 694 | 695 | var s = 1.70158; 696 | 697 | return --k * k * ((s + 1) * k + s) + 1; 698 | 699 | }, 700 | 701 | InOut: function (k) { 702 | 703 | var s = 1.70158 * 1.525; 704 | 705 | if ((k *= 2) < 1) { 706 | return 0.5 * (k * k * ((s + 1) * k - s)); 707 | } 708 | 709 | return 0.5 * ((k -= 2) * k * ((s + 1) * k + s) + 2); 710 | 711 | } 712 | 713 | }, 714 | 715 | Bounce: { 716 | 717 | In: function (k) { 718 | 719 | return 1 - TWEEN.Easing.Bounce.Out(1 - k); 720 | 721 | }, 722 | 723 | Out: function (k) { 724 | 725 | if (k < (1 / 2.75)) { 726 | return 7.5625 * k * k; 727 | } else if (k < (2 / 2.75)) { 728 | return 7.5625 * (k -= (1.5 / 2.75)) * k + 0.75; 729 | } else if (k < (2.5 / 2.75)) { 730 | return 7.5625 * (k -= (2.25 / 2.75)) * k + 0.9375; 731 | } else { 732 | return 7.5625 * (k -= (2.625 / 2.75)) * k + 0.984375; 733 | } 734 | 735 | }, 736 | 737 | InOut: function (k) { 738 | 739 | if (k < 0.5) { 740 | return TWEEN.Easing.Bounce.In(k * 2) * 0.5; 741 | } 742 | 743 | return TWEEN.Easing.Bounce.Out(k * 2 - 1) * 0.5 + 0.5; 744 | 745 | } 746 | 747 | } 748 | 749 | }; 750 | 751 | TWEEN.Interpolation = { 752 | 753 | Linear: function (v, k) { 754 | 755 | var m = v.length - 1; 756 | var f = m * k; 757 | var i = Math.floor(f); 758 | var fn = TWEEN.Interpolation.Utils.Linear; 759 | 760 | if (k < 0) { 761 | return fn(v[0], v[1], f); 762 | } 763 | 764 | if (k > 1) { 765 | return fn(v[m], v[m - 1], m - f); 766 | } 767 | 768 | return fn(v[i], v[i + 1 > m ? m : i + 1], f - i); 769 | 770 | }, 771 | 772 | Bezier: function (v, k) { 773 | 774 | var b = 0; 775 | var n = v.length - 1; 776 | var pw = Math.pow; 777 | var bn = TWEEN.Interpolation.Utils.Bernstein; 778 | 779 | for (var i = 0; i <= n; i++) { 780 | b += pw(1 - k, n - i) * pw(k, i) * v[i] * bn(n, i); 781 | } 782 | 783 | return b; 784 | 785 | }, 786 | 787 | CatmullRom: function (v, k) { 788 | 789 | var m = v.length - 1; 790 | var f = m * k; 791 | var i = Math.floor(f); 792 | var fn = TWEEN.Interpolation.Utils.CatmullRom; 793 | 794 | if (v[0] === v[m]) { 795 | 796 | if (k < 0) { 797 | i = Math.floor(f = m * (1 + k)); 798 | } 799 | 800 | return fn(v[(i - 1 + m) % m], v[i], v[(i + 1) % m], v[(i + 2) % m], f - i); 801 | 802 | } else { 803 | 804 | if (k < 0) { 805 | return v[0] - (fn(v[0], v[0], v[1], v[1], -f) - v[0]); 806 | } 807 | 808 | if (k > 1) { 809 | return v[m] - (fn(v[m], v[m], v[m - 1], v[m - 1], f - m) - v[m]); 810 | } 811 | 812 | return fn(v[i ? i - 1 : 0], v[i], v[m < i + 1 ? m : i + 1], v[m < i + 2 ? m : i + 2], f - i); 813 | 814 | } 815 | 816 | }, 817 | 818 | Utils: { 819 | 820 | Linear: function (p0, p1, t) { 821 | 822 | return (p1 - p0) * t + p0; 823 | 824 | }, 825 | 826 | Bernstein: function (n, i) { 827 | 828 | var fc = TWEEN.Interpolation.Utils.Factorial; 829 | 830 | return fc(n) / fc(i) / fc(n - i); 831 | 832 | }, 833 | 834 | Factorial: (function () { 835 | 836 | var a = [1]; 837 | 838 | return function (n) { 839 | 840 | var s = 1; 841 | 842 | if (a[n]) { 843 | return a[n]; 844 | } 845 | 846 | for (var i = n; i > 1; i--) { 847 | s *= i; 848 | } 849 | 850 | a[n] = s; 851 | return s; 852 | 853 | }; 854 | 855 | })(), 856 | 857 | CatmullRom: function (p0, p1, p2, p3, t) { 858 | 859 | var v0 = (p2 - p0) * 0.5; 860 | var v1 = (p3 - p1) * 0.5; 861 | var t2 = t * t; 862 | var t3 = t * t2; 863 | 864 | return (2 * p1 - 2 * p2 + v0 + v1) * t3 + (- 3 * p1 + 3 * p2 - 2 * v0 - v1) * t2 + v0 * t + p1; 865 | 866 | } 867 | 868 | } 869 | 870 | }; 871 | 872 | export default TWEEN 873 | --------------------------------------------------------------------------------