├── .gitignore ├── src ├── scripts │ ├── app.js │ ├── views │ │ ├── search.art │ │ ├── position.art │ │ ├── layout.art │ │ ├── position-list.art │ │ └── profile.art │ ├── app-profile.js │ ├── app-search.js │ ├── models │ │ └── postion.js │ ├── controllers │ │ ├── search.js │ │ ├── profile.js │ │ ├── index.js │ │ ├── detail.js │ │ └── positions.js │ └── router │ │ └── index.js ├── styles │ ├── app-search.scss │ ├── app-profile.scss │ ├── yo │ │ ├── lib │ │ │ ├── component │ │ │ │ ├── popup.scss │ │ │ │ ├── alert.scss │ │ │ │ ├── confirm.scss │ │ │ │ ├── rating.scss │ │ │ │ ├── switch.scss │ │ │ │ ├── toast.scss │ │ │ │ ├── picker.scss │ │ │ │ ├── range.scss │ │ │ │ ├── inputnumber.scss │ │ │ │ ├── swipemenu.scss │ │ │ │ ├── dialog.scss │ │ │ │ ├── grouplist.scss │ │ │ │ ├── loading.scss │ │ │ │ ├── list.scss │ │ │ │ ├── actionsheet.scss │ │ │ │ ├── calendar.scss │ │ │ │ ├── popupdatetimepicker.scss │ │ │ │ ├── datetimepicker.scss │ │ │ │ ├── swipemenulist.scss │ │ │ │ ├── suggest.scss │ │ │ │ ├── popuppicker.scss │ │ │ │ ├── scroller.scss │ │ │ │ ├── modal.scss │ │ │ │ ├── carousel.scss │ │ │ │ └── multilist.scss │ │ │ ├── ani │ │ │ │ ├── classes.scss │ │ │ │ ├── fade-in.scss │ │ │ │ ├── fade-out.scss │ │ │ │ ├── flash.scss │ │ │ │ ├── zoom-in.scss │ │ │ │ ├── rotate.scss │ │ │ │ ├── zoom-out.scss │ │ │ │ ├── roll-out-left.scss │ │ │ │ ├── roll-out-right.scss │ │ │ │ ├── fade-in-up.scss │ │ │ │ ├── fade-out-up.scss │ │ │ │ ├── pulse.scss │ │ │ │ ├── fade-in-down.scss │ │ │ │ ├── fade-in-left.scss │ │ │ │ ├── fade-in-right.scss │ │ │ │ ├── fade-out-down.scss │ │ │ │ ├── fade-out-left.scss │ │ │ │ ├── fade-out-right.scss │ │ │ │ ├── roll-in-left.scss │ │ │ │ ├── roll-in-right.scss │ │ │ │ ├── rotate-out.scss │ │ │ │ ├── speed-out-left.scss │ │ │ │ ├── speed-out-right.scss │ │ │ │ ├── rotate-in.scss │ │ │ │ ├── rotate-out-up-left.scss │ │ │ │ ├── rotate-out-down-left.scss │ │ │ │ ├── rotate-out-up-right.scss │ │ │ │ ├── elastic-out.scss │ │ │ │ ├── rotate-out-down-right.scss │ │ │ │ ├── rotate-in-up-left.scss │ │ │ │ ├── zoom-out-left.scss │ │ │ │ ├── elastic-out-up.scss │ │ │ │ ├── rotate-in-up-right.scss │ │ │ │ ├── zoom-out-right.scss │ │ │ │ ├── rotate-in-down-left.scss │ │ │ │ ├── shake.scss │ │ │ │ ├── elastic-out-down.scss │ │ │ │ ├── elastic-out-left.scss │ │ │ │ ├── rotate-in-down-right.scss │ │ │ │ ├── elastic-out-right.scss │ │ │ │ ├── flip-out-x.scss │ │ │ │ ├── flip-out-y.scss │ │ │ │ ├── swing.scss │ │ │ │ ├── zoom-in-up.scss │ │ │ │ ├── speed-in-left.scss │ │ │ │ ├── zoom-in-down.scss │ │ │ │ ├── speed-in-right.scss │ │ │ │ ├── zoom-in-left.scss │ │ │ │ ├── zoom-in-right.scss │ │ │ │ ├── elastic-in-up.scss │ │ │ │ ├── elastic-in-left.scss │ │ │ │ ├── elastic-in-right.scss │ │ │ │ ├── zoom-out-up.scss │ │ │ │ ├── elastic-x.scss │ │ │ │ ├── elastic-y.scss │ │ │ │ ├── zoom-out-down.scss │ │ │ │ ├── sling.scss │ │ │ │ ├── stretch.scss │ │ │ │ ├── extrusion.scss │ │ │ │ ├── elastic-in.scss │ │ │ │ ├── elastic-in-down.scss │ │ │ │ ├── flip.scss │ │ │ │ ├── wobble.scss │ │ │ │ ├── hinge.scss │ │ │ │ ├── flip-in-x.scss │ │ │ │ ├── flip-in-y.scss │ │ │ │ └── README.md │ │ │ ├── core │ │ │ │ ├── merge-extra.scss │ │ │ │ ├── classes │ │ │ │ │ ├── _border-radius.scss │ │ │ │ │ ├── _overflow.scss │ │ │ │ │ ├── _fullscreen.scss │ │ │ │ │ ├── _responsive.scss │ │ │ │ │ ├── _prefix.scss │ │ │ │ │ ├── _fixed-scale.scss │ │ │ │ │ ├── _clearfix.scss │ │ │ │ │ ├── _clearspace.scss │ │ │ │ │ ├── _align.scss │ │ │ │ │ ├── _calc.scss │ │ │ │ │ ├── _shape.scss │ │ │ │ │ ├── _transition.scss │ │ │ │ │ ├── _iconfont.scss │ │ │ │ │ ├── _user-interface.scss │ │ │ │ │ ├── _text.scss │ │ │ │ │ ├── _border.scss │ │ │ │ │ ├── _transform.scss │ │ │ │ │ ├── _background.scss │ │ │ │ │ └── _animation.scss │ │ │ │ ├── classes.scss │ │ │ │ └── base.scss │ │ │ ├── layout │ │ │ │ ├── yo-root.scss │ │ │ │ ├── yo-column.scss │ │ │ │ ├── yo-align.scss │ │ │ │ └── yo-flex.scss │ │ │ ├── fragment │ │ │ │ ├── yo-popup.scss │ │ │ │ ├── yo-toast.scss │ │ │ │ ├── yo-modal.scss │ │ │ │ ├── yo-rating.scss │ │ │ │ ├── yo-proportion.scss │ │ │ │ ├── yo-swipemenu.scss │ │ │ │ ├── yo-breadcrumb.scss │ │ │ │ └── yo-vcode.scss │ │ │ └── element │ │ │ │ ├── yo-loadtip.scss │ │ │ │ ├── yo-loading.scss │ │ │ │ ├── yo-switch.scss │ │ │ │ └── yo-badge.scss │ │ └── usage │ │ │ ├── component │ │ │ ├── touchable.scss │ │ │ ├── alert.scss │ │ │ ├── calendar.scss │ │ │ ├── list.scss │ │ │ ├── modal.scss │ │ │ ├── popup.scss │ │ │ ├── range.scss │ │ │ ├── toast.scss │ │ │ ├── carousel.scss │ │ │ ├── confirm.scss │ │ │ ├── dialog.scss │ │ │ ├── loading.scss │ │ │ ├── picker.scss │ │ │ ├── rating.scss │ │ │ ├── scroller.scss │ │ │ ├── suggest.scss │ │ │ ├── switch.scss │ │ │ ├── actionsheet.scss │ │ │ ├── grouplist.scss │ │ │ ├── multilist.scss │ │ │ ├── popuppicker.scss │ │ │ ├── swipemenu.scss │ │ │ ├── inputnumber.scss │ │ │ ├── swipemenulist.scss │ │ │ ├── datetimepicker.scss │ │ │ └── popupdatetimepicker.scss │ │ │ ├── element │ │ │ ├── yo-btn.scss │ │ │ ├── yo-badge.scss │ │ │ ├── yo-range.scss │ │ │ ├── yo-switch.scss │ │ │ ├── yo-checked.scss │ │ │ ├── yo-loading.scss │ │ │ └── yo-loadtip.scss │ │ │ ├── fragment │ │ │ ├── yo-card.scss │ │ │ ├── yo-list.scss │ │ │ ├── yo-tab.scss │ │ │ ├── yo-group.scss │ │ │ ├── yo-modal.scss │ │ │ ├── yo-popup.scss │ │ │ ├── yo-table.scss │ │ │ ├── yo-toast.scss │ │ │ ├── yo-vcode.scss │ │ │ ├── yo-dialog.scss │ │ │ ├── yo-header.scss │ │ │ ├── yo-number.scss │ │ │ ├── yo-picker.scss │ │ │ ├── yo-rating.scss │ │ │ ├── yo-search.scss │ │ │ ├── yo-suggest.scss │ │ │ ├── yo-toolbar.scss │ │ │ ├── yo-calendar.scss │ │ │ ├── yo-carousel.scss │ │ │ ├── yo-swipemenu.scss │ │ │ ├── yo-timeline.scss │ │ │ ├── yo-breadcrumb.scss │ │ │ ├── yo-proportion.scss │ │ │ └── yo-actionsheet.scss │ │ │ ├── layout │ │ │ ├── yo-align.scss │ │ │ ├── yo-flex.scss │ │ │ ├── yo-root.scss │ │ │ └── yo-column.scss │ │ │ └── core │ │ │ ├── extra.scss │ │ │ ├── reset.scss │ │ │ └── config.scss │ ├── modules │ │ ├── cover-lagou.scss │ │ ├── common.scss │ │ ├── profile.scss │ │ ├── index.scss │ │ └── position.scss │ └── app.scss ├── .DS_Store ├── assets │ ├── .DS_Store │ ├── icons │ │ ├── iconfont.ttf │ │ └── iconfont.woff │ └── images │ │ ├── arrow.png │ │ └── ajax-loader.gif ├── index.html ├── search.html ├── profile.html └── config │ ├── gulpfile-build.js │ └── gulpfile-dev.js ├── dev ├── styles │ ├── app-search.css │ ├── app-profile.css │ └── modules │ │ ├── common.css │ │ └── index.css ├── assets │ ├── icons │ │ ├── iconfont.ttf │ │ └── iconfont.woff │ └── images │ │ ├── arrow.png │ │ └── ajax-loader.gif ├── index.html ├── search.html ├── profile.html └── scripts │ ├── app-search.js │ └── app-profile.js ├── .DS_Store ├── README.md ├── position.html ├── package.json ├── note.txt └── position.scss /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /src/scripts/app.js: -------------------------------------------------------------------------------- 1 | // 引入路由 2 | import "./router/" -------------------------------------------------------------------------------- /src/scripts/views/search.art: -------------------------------------------------------------------------------- 1 |
search
-------------------------------------------------------------------------------- /src/scripts/app-profile.js: -------------------------------------------------------------------------------- 1 | $('#root').html('profile') -------------------------------------------------------------------------------- /src/scripts/app-search.js: -------------------------------------------------------------------------------- 1 | $('#root').html('search') -------------------------------------------------------------------------------- /dev/styles/app-search.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: red; } 3 | -------------------------------------------------------------------------------- /src/styles/app-search.scss: -------------------------------------------------------------------------------- 1 | body { 2 | background: red; 3 | } -------------------------------------------------------------------------------- /dev/styles/app-profile.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: green; } 3 | -------------------------------------------------------------------------------- /src/styles/app-profile.scss: -------------------------------------------------------------------------------- 1 | body { 2 | background: green; 3 | } -------------------------------------------------------------------------------- /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lurongtao/gp15-m-website/HEAD/.DS_Store -------------------------------------------------------------------------------- /src/styles/yo/lib/component/popup.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "./modal"; 3 | -------------------------------------------------------------------------------- /src/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lurongtao/gp15-m-website/HEAD/src/.DS_Store -------------------------------------------------------------------------------- /src/styles/yo/lib/component/alert.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "./dialog"; 3 | -------------------------------------------------------------------------------- /src/styles/yo/lib/component/confirm.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "./dialog"; 3 | -------------------------------------------------------------------------------- /src/styles/yo/lib/component/rating.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "../fragment/yo-rating"; -------------------------------------------------------------------------------- /src/styles/yo/lib/component/switch.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "../element/yo-switch"; -------------------------------------------------------------------------------- /src/styles/yo/lib/component/toast.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "../fragment/yo-toast"; -------------------------------------------------------------------------------- /src/styles/yo/lib/component/picker.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "../fragment/yo-picker"; 3 | -------------------------------------------------------------------------------- /src/styles/yo/lib/component/range.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "../element/yo-range"; 3 | -------------------------------------------------------------------------------- /src/styles/yo/usage/component/touchable.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "../core/reset"; 3 | -------------------------------------------------------------------------------- /src/assets/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lurongtao/gp15-m-website/HEAD/src/assets/.DS_Store -------------------------------------------------------------------------------- /src/styles/yo/lib/component/inputnumber.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "../fragment/yo-number"; 3 | -------------------------------------------------------------------------------- /src/styles/yo/lib/component/swipemenu.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "../fragment/yo-swipemenu"; -------------------------------------------------------------------------------- /dev/assets/icons/iconfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lurongtao/gp15-m-website/HEAD/dev/assets/icons/iconfont.ttf -------------------------------------------------------------------------------- /dev/assets/images/arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lurongtao/gp15-m-website/HEAD/dev/assets/images/arrow.png -------------------------------------------------------------------------------- /src/assets/icons/iconfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lurongtao/gp15-m-website/HEAD/src/assets/icons/iconfont.ttf -------------------------------------------------------------------------------- /src/assets/images/arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lurongtao/gp15-m-website/HEAD/src/assets/images/arrow.png -------------------------------------------------------------------------------- /src/styles/yo/lib/component/dialog.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "./modal"; 3 | @import "../fragment/yo-dialog"; -------------------------------------------------------------------------------- /src/styles/yo/lib/component/grouplist.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "./list"; 3 | @import "../fragment/yo-group"; -------------------------------------------------------------------------------- /src/styles/yo/lib/component/loading.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "./modal"; 3 | @import "../element/yo-loading"; -------------------------------------------------------------------------------- /dev/assets/icons/iconfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lurongtao/gp15-m-website/HEAD/dev/assets/icons/iconfont.woff -------------------------------------------------------------------------------- /src/assets/icons/iconfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lurongtao/gp15-m-website/HEAD/src/assets/icons/iconfont.woff -------------------------------------------------------------------------------- /src/styles/yo/lib/component/list.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "./scroller"; 3 | @import "../fragment/yo-list"; 4 | -------------------------------------------------------------------------------- /dev/assets/images/ajax-loader.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lurongtao/gp15-m-website/HEAD/dev/assets/images/ajax-loader.gif -------------------------------------------------------------------------------- /src/assets/images/ajax-loader.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lurongtao/gp15-m-website/HEAD/src/assets/images/ajax-loader.gif -------------------------------------------------------------------------------- /src/styles/yo/lib/component/actionsheet.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "./modal"; 3 | @import "../fragment/yo-actionsheet"; -------------------------------------------------------------------------------- /src/styles/yo/lib/component/calendar.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "./grouplist"; 3 | @import "../fragment/yo-calendar"; -------------------------------------------------------------------------------- /src/styles/yo/usage/component/alert.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "../core/reset"; 3 | @import "../../lib/component/alert"; -------------------------------------------------------------------------------- /src/styles/yo/usage/component/calendar.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "../core/reset"; 3 | @import "../../lib/component/calendar"; -------------------------------------------------------------------------------- /src/styles/yo/usage/component/list.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "../core/reset"; 3 | @import "../../lib/component/list"; 4 | -------------------------------------------------------------------------------- /src/styles/yo/usage/component/modal.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "../core/reset"; 3 | @import "../../lib/component/modal"; 4 | -------------------------------------------------------------------------------- /src/styles/yo/usage/component/popup.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "../core/reset"; 3 | @import "../../lib/component/popup"; 4 | -------------------------------------------------------------------------------- /src/styles/yo/usage/component/range.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "../core/reset"; 3 | @import "../../lib/component/range"; 4 | -------------------------------------------------------------------------------- /src/styles/yo/usage/component/toast.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "../core/reset"; 3 | @import "../../lib/component/toast"; 4 | -------------------------------------------------------------------------------- /src/styles/yo/usage/component/carousel.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "../core/reset"; 3 | @import "../../lib/component/carousel"; 4 | -------------------------------------------------------------------------------- /src/styles/yo/usage/component/confirm.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "../core/reset"; 3 | @import "../../lib/component/confirm"; 4 | -------------------------------------------------------------------------------- /src/styles/yo/usage/component/dialog.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "../core/reset"; 3 | @import "../../lib/component/dialog"; 4 | -------------------------------------------------------------------------------- /src/styles/yo/usage/component/loading.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "../core/reset"; 3 | @import "../../lib/component/loading"; 4 | -------------------------------------------------------------------------------- /src/styles/yo/usage/component/picker.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "../core/reset"; 3 | @import "../../lib/component/picker"; 4 | -------------------------------------------------------------------------------- /src/styles/yo/usage/component/rating.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "../core/reset"; 3 | @import "../../lib/component/rating"; 4 | -------------------------------------------------------------------------------- /src/styles/yo/usage/component/scroller.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "../core/reset"; 3 | @import "../../lib/component/scroller"; 4 | -------------------------------------------------------------------------------- /src/styles/yo/usage/component/suggest.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "../core/reset"; 3 | @import "../../lib/component/suggest"; 4 | -------------------------------------------------------------------------------- /src/styles/yo/usage/component/switch.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "../core/reset"; 3 | @import "../../lib/component/switch"; 4 | -------------------------------------------------------------------------------- /src/styles/yo/usage/component/actionsheet.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "../core/reset"; 3 | @import "../../lib/component/actionsheet"; -------------------------------------------------------------------------------- /src/styles/yo/usage/component/grouplist.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "../core/reset"; 3 | @import "../../lib/component/grouplist"; 4 | -------------------------------------------------------------------------------- /src/styles/yo/usage/component/multilist.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "../core/reset"; 3 | @import "../../lib/component/multilist"; 4 | -------------------------------------------------------------------------------- /src/styles/yo/usage/component/popuppicker.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "../core/reset"; 3 | @import "../../lib/component/popuppicker"; -------------------------------------------------------------------------------- /src/styles/yo/usage/component/swipemenu.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "../core/reset"; 3 | @import "../../lib/component/swipemenu"; 4 | -------------------------------------------------------------------------------- /src/styles/yo/usage/element/yo-btn.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "../../lib/element/yo-btn"; 3 | 4 | /** 5 | * yo-btn通用或全局扩展 6 | */ 7 | -------------------------------------------------------------------------------- /src/styles/yo/usage/component/inputnumber.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "../core/reset"; 3 | @import "../../lib/component/inputnumber"; 4 | -------------------------------------------------------------------------------- /src/styles/yo/usage/component/swipemenulist.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "../core/reset"; 3 | @import "../../lib/component/swipemenulist"; 4 | -------------------------------------------------------------------------------- /src/styles/yo/usage/fragment/yo-card.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "../../lib/fragment/yo-card"; 3 | 4 | /** 5 | * yo-card通用或全局扩展 6 | */ 7 | -------------------------------------------------------------------------------- /src/styles/yo/usage/fragment/yo-list.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "../../lib/fragment/yo-list"; 3 | 4 | /** 5 | * yo-list通用或全局扩展 6 | */ 7 | -------------------------------------------------------------------------------- /src/styles/yo/usage/fragment/yo-tab.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "../../lib/fragment/yo-tab"; 3 | 4 | /** 5 | * yo-tab通用或全局扩展 6 | */ 7 | -------------------------------------------------------------------------------- /src/styles/yo/usage/layout/yo-align.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "../../lib/layout/yo-align"; 3 | 4 | /** 5 | * yo-align通用或全局扩展 6 | */ 7 | -------------------------------------------------------------------------------- /src/styles/yo/usage/layout/yo-flex.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "../../lib/layout/yo-flex"; 3 | 4 | /** 5 | * yo-flex通用或全局扩展 6 | */ 7 | -------------------------------------------------------------------------------- /src/styles/yo/usage/layout/yo-root.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "../../lib/layout/yo-root"; 3 | 4 | /** 5 | * yo-root通用或全局扩展 6 | */ 7 | -------------------------------------------------------------------------------- /src/styles/modules/cover-lagou.scss: -------------------------------------------------------------------------------- 1 | html, body { 2 | font-size: 65.5%; 3 | color: #333333; 4 | overflow-y: scroll; 5 | background: #fff; 6 | } -------------------------------------------------------------------------------- /src/styles/yo/usage/component/datetimepicker.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "../core/reset"; 3 | @import "../../lib/component/datetimepicker"; 4 | -------------------------------------------------------------------------------- /src/styles/yo/usage/element/yo-badge.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "../../lib/element/yo-badge"; 3 | 4 | /** 5 | * yo-badge通用或全局扩展 6 | */ 7 | -------------------------------------------------------------------------------- /src/styles/yo/usage/element/yo-range.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "../../lib/element/yo-range"; 3 | 4 | /** 5 | * yo-range通用或全局扩展 6 | */ 7 | -------------------------------------------------------------------------------- /src/styles/yo/usage/element/yo-switch.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "../../lib/element/yo-switch"; 3 | 4 | /** 5 | * yo-switch通用或全局扩展 6 | */ 7 | -------------------------------------------------------------------------------- /src/styles/yo/usage/fragment/yo-group.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "../../lib/fragment/yo-group"; 3 | 4 | /** 5 | * yo-group通用或全局扩展 6 | */ 7 | -------------------------------------------------------------------------------- /src/styles/yo/usage/fragment/yo-modal.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "../../lib/fragment/yo-modal"; 3 | 4 | /** 5 | * yo-modal通用或全局扩展 6 | */ 7 | -------------------------------------------------------------------------------- /src/styles/yo/usage/fragment/yo-popup.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "../../lib/fragment/yo-popup"; 3 | 4 | /** 5 | * yo-popup通用或全局扩展 6 | */ 7 | -------------------------------------------------------------------------------- /src/styles/yo/usage/fragment/yo-table.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "../../lib/fragment/yo-table"; 3 | 4 | /** 5 | * yo-table通用或全局扩展 6 | */ 7 | -------------------------------------------------------------------------------- /src/styles/yo/usage/fragment/yo-toast.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "../../lib/fragment/yo-toast"; 3 | 4 | /** 5 | * yo-toast通用或全局扩展 6 | */ 7 | -------------------------------------------------------------------------------- /src/styles/yo/usage/fragment/yo-vcode.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "../../lib/fragment/yo-vcode"; 3 | 4 | /** 5 | * yo-vcode通用或全局扩展 6 | */ 7 | -------------------------------------------------------------------------------- /src/styles/yo/usage/layout/yo-column.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "../../lib/layout/yo-column"; 3 | 4 | /** 5 | * yo-column通用或全局扩展 6 | */ 7 | -------------------------------------------------------------------------------- /src/styles/yo/usage/component/popupdatetimepicker.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "../core/reset"; 3 | @import "../../lib/component/popupdatetimepicker"; -------------------------------------------------------------------------------- /src/styles/yo/usage/element/yo-checked.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "../../lib/element/yo-checked"; 3 | 4 | /** 5 | * yo-checked通用或全局扩展 6 | */ 7 | -------------------------------------------------------------------------------- /src/styles/yo/usage/element/yo-loading.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "../../lib/element/yo-loading"; 3 | 4 | /** 5 | * yo-loading通用或全局扩展 6 | */ 7 | -------------------------------------------------------------------------------- /src/styles/yo/usage/element/yo-loadtip.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "../../lib/element/yo-loadtip"; 3 | 4 | /** 5 | * yo-loadtip通用或全局扩展 6 | */ 7 | -------------------------------------------------------------------------------- /src/styles/yo/usage/fragment/yo-dialog.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "../../lib/fragment/yo-dialog"; 3 | 4 | /** 5 | * yo-dialog通用或全局扩展 6 | */ 7 | -------------------------------------------------------------------------------- /src/styles/yo/usage/fragment/yo-header.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "../../lib/fragment/yo-header"; 3 | 4 | /** 5 | * yo-header通用或全局扩展 6 | */ 7 | -------------------------------------------------------------------------------- /src/styles/yo/usage/fragment/yo-number.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "../../lib/fragment/yo-number"; 3 | 4 | /** 5 | * yo-number通用或全局扩展 6 | */ 7 | -------------------------------------------------------------------------------- /src/styles/yo/usage/fragment/yo-picker.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "../../lib/fragment/yo-picker"; 3 | 4 | /** 5 | * yo-picker通用或全局扩展 6 | */ 7 | -------------------------------------------------------------------------------- /src/styles/yo/usage/fragment/yo-rating.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "../../lib/fragment/yo-rating"; 3 | 4 | /** 5 | * yo-rating通用或全局扩展 6 | */ 7 | -------------------------------------------------------------------------------- /src/styles/yo/usage/fragment/yo-search.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "../../lib/fragment/yo-search"; 3 | 4 | /** 5 | * yo-search通用或全局扩展 6 | */ 7 | -------------------------------------------------------------------------------- /src/styles/yo/usage/fragment/yo-suggest.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "../../lib/fragment/yo-suggest"; 3 | 4 | /** 5 | * yo-suggest通用或全局扩展 6 | */ 7 | -------------------------------------------------------------------------------- /src/styles/yo/usage/fragment/yo-toolbar.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "../../lib/fragment/yo-toolbar"; 3 | 4 | /** 5 | * yo-toolbar通用或全局扩展 6 | */ 7 | -------------------------------------------------------------------------------- /src/scripts/models/postion.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | get({start=0, count=10}) { 3 | return $.ajax({ 4 | url: `/api/position` 5 | }) 6 | } 7 | } -------------------------------------------------------------------------------- /src/styles/yo/usage/fragment/yo-calendar.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "../../lib/fragment/yo-calendar"; 3 | 4 | /** 5 | * yo-calendar通用或全局扩展 6 | */ 7 | -------------------------------------------------------------------------------- /src/styles/yo/usage/fragment/yo-carousel.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "../../lib/fragment/yo-carousel"; 3 | 4 | /** 5 | * yo-carousel通用或全局扩展 6 | */ 7 | -------------------------------------------------------------------------------- /src/styles/yo/usage/fragment/yo-swipemenu.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "../../lib/fragment/yo-swipemenu"; 3 | 4 | /** 5 | * yo-swipemenu通用或全局扩展 6 | */ 7 | -------------------------------------------------------------------------------- /src/styles/yo/usage/fragment/yo-timeline.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "../../lib/fragment/yo-timeline"; 3 | 4 | /** 5 | * yo-timeline通用或全局扩展 6 | */ 7 | -------------------------------------------------------------------------------- /src/styles/yo/lib/component/popupdatetimepicker.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "./modal"; 3 | @import "../fragment/yo-popup"; 4 | @import "./datetimepicker"; 5 | -------------------------------------------------------------------------------- /src/styles/yo/usage/fragment/yo-breadcrumb.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "../../lib/fragment/yo-breadcrumb"; 3 | 4 | /** 5 | * yo-breadcrumb通用或全局扩展 6 | */ 7 | -------------------------------------------------------------------------------- /src/styles/yo/usage/fragment/yo-proportion.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "../../lib/fragment/yo-proportion"; 3 | 4 | /** 5 | * yo-proportion通用或全局扩展 6 | */ 7 | -------------------------------------------------------------------------------- /src/styles/yo/usage/fragment/yo-actionsheet.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "../../lib/fragment/yo-actionsheet"; 3 | 4 | /** 5 | * yo-actionsheet通用或全局扩展 6 | */ 7 | -------------------------------------------------------------------------------- /src/styles/yo/usage/core/extra.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | /** 3 | * Yo框架全局base定义 4 | * 本文件与variables不同地方在于，这里所定义的map可以使用在variables和任何地方 5 | * lib中map使用“_”开头，本文件中不使用"_" 6 | * base ⇌ extra 7 | */ -------------------------------------------------------------------------------- /src/styles/yo/usage/core/reset.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "extra"; 3 | @import "../../lib/core/merge-extra"; 4 | @import "config"; 5 | @import "../../lib/core/merge-config"; 6 | @import "../../lib/core/reset"; -------------------------------------------------------------------------------- /dev/styles/modules/common.css: -------------------------------------------------------------------------------- 1 | #root { 2 | height: 100%; } 3 | 4 | @font-face { 5 | font-family: 'yofont'; 6 | src: url("/assets/icons/iconfont.woff") format("woff"), url("/assets/icons/iconfont.ttf") format("truetype"); } 7 | -------------------------------------------------------------------------------- /src/scripts/controllers/search.js: -------------------------------------------------------------------------------- 1 | import searchView from '../views/search.art' 2 | 3 | class Search { 4 | render() { 5 | let html = searchView() 6 | $('main').html(html) 7 | } 8 | } 9 | 10 | export default new Search() -------------------------------------------------------------------------------- /src/styles/yo/lib/component/datetimepicker.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "./picker"; 3 | 4 | .yo-datetimepicker { 5 | @include flexbox; 6 | width: 100%; 7 | > .yo-picker { 8 | @include flex; 9 | } 10 | } -------------------------------------------------------------------------------- /src/styles/yo/usage/core/config.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | /** 3 | * Yo框架全局Variables 4 | * Yo基础变量map，如果不想定义某属性，将其value设置为null； 5 | * Yo仅使用2种长度单位：px用于边框，rem用于除边框之外的所有地方 6 | * variables中map使用“_”开头，本文件中不使用"_" 7 | * variables ⇌ config 8 | */ -------------------------------------------------------------------------------- /src/styles/app.scss: -------------------------------------------------------------------------------- 1 | @import './modules/lagou.scss'; 2 | @import './yo/usage/core/reset.scss'; 3 | 4 | @import './modules/common.scss'; 5 | @import './modules/index.scss'; 6 | @import './modules/position.scss'; 7 | @import './modules/profile.scss'; -------------------------------------------------------------------------------- /src/styles/modules/common.scss: -------------------------------------------------------------------------------- 1 | #root { 2 | height: 100%; 3 | } 4 | 5 | @font-face { 6 | font-family: 'yofont'; 7 | src: url('/assets/icons/iconfont.woff') format('woff'), 8 | url('/assets/icons/iconfont.ttf') format('truetype'); 9 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/component/swipemenulist.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "./swipemenu"; 3 | @import "./list"; 4 | 5 | .yo-list .item.swipemenu-list-item { 6 | padding: 0; 7 | } 8 | 9 | .swipemenu-list-menu { 10 | width: 100%; 11 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/component/suggest.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "../fragment/yo-list"; 3 | @import "../fragment/yo-suggest"; 4 | @import "../component/scroller"; 5 | 6 | .yo-suggest { 7 | .cancel-btn-touch, .icon-touch { 8 | opacity: .5; 9 | } 10 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/component/popuppicker.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "./modal"; 3 | @import "../fragment/yo-popup"; 4 | @import "./picker"; 5 | 6 | .yo-popup-picker { 7 | > .bd { 8 | @include flexbox; 9 | } 10 | .yo-picker { 11 | @include flex; 12 | } 13 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/component/scroller.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "../element/yo-loadtip"; 3 | 4 | .yo-load { 5 | @include align; 6 | position: absolute; 7 | width: 100%; 8 | @include transform(translate(0, 0)); 9 | } 10 | 11 | .yo-scroller-fullscreen { 12 | @include fullscreen(); 13 | } -------------------------------------------------------------------------------- /src/scripts/controllers/profile.js: -------------------------------------------------------------------------------- 1 | import _ from 'lodash' 2 | import profileView from '../views/profile.art' 3 | 4 | class Profile { 5 | render() { 6 | let html = profileView({}) 7 | $('main').html(html) 8 | } 9 | } 10 | 11 | export default new Profile() 12 | 13 | console.log(_.chunk(['a', 'b', 'c', 'd'], 2)) -------------------------------------------------------------------------------- /src/styles/yo/lib/component/modal.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "../fragment/yo-modal"; 3 | @import "../ani/fade-in"; 4 | @import "../ani/fade-out"; 5 | @import "../ani/zoom-in"; 6 | @import "../ani/zoom-out"; 7 | @import "../ani/fade-in-up"; 8 | @import "../ani/fade-out-down"; 9 | @import "../ani/fade-in-down"; 10 | @import "../ani/fade-out-up"; 11 | -------------------------------------------------------------------------------- /src/scripts/views/position.art: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 | 下拉刷新... 5 |
6 | 10 | 11 |
12 | 13 | 上拉加载更多... 14 |
15 |
-------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 0、架构 2 | - 前后端分离 3 | - RMVC 4 | - art-template 5 | 6 | # 1、工程化： gulp 7 | - v4.x 8 | - webserver: gulp-connect 9 | - packcss: gulp-sass, node-sass 10 | - packjs: gulp-webstream 11 | 12 | # 2、移动端布局 13 | - 100%布局：flexbox 14 | - yo 15 | - 1px border 16 | 17 | # 3、第三方库 18 | - better-scroll 19 | - zepto 20 | 21 | # 4、路由 22 | - 自定义的hash路由 23 | 24 | # 5、build 25 | - build(gulp-rev, gulp-rev-collector) 26 | -------------------------------------------------------------------------------- /src/scripts/controllers/index.js: -------------------------------------------------------------------------------- 1 | const layoutView = require('../views/layout.art') 2 | 3 | class Index { 4 | bindClick() { 5 | // 页面切换 6 | location.hash = $(this).attr('data-to') 7 | } 8 | 9 | render() { 10 | const html = layoutView() 11 | 12 | $('#root').html(html) 13 | 14 | // 绑定事件 15 | $('footer li').on('click', this.bindClick) 16 | } 17 | } 18 | 19 | export default new Index() -------------------------------------------------------------------------------- /src/scripts/views/layout.art: -------------------------------------------------------------------------------- 1 |
2 |
拉勾网
3 |
4 |
5 | 12 |
-------------------------------------------------------------------------------- /src/styles/yo/lib/ani/classes.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | /** 3 | * Yo框架动画解决方案 4 | * Yo内置了超过60种动画形态，不同的动画可以任意组合 5 | */ 6 | 7 | 8 | // 定义动画基本特性 9 | .ani { 10 | // 定义动画的持续时间 11 | @include animation-duration(1s); 12 | // 定义动画运行完成之后的状态 13 | @include animation-fill-mode(both); 14 | } 15 | 16 | .ani.infinite { 17 | //定义动画无限循环 18 | @include animation-iteration-count(infinite); 19 | } -------------------------------------------------------------------------------- /dev/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | M-Website 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | -------------------------------------------------------------------------------- /position.html: -------------------------------------------------------------------------------- 1 |
2 | 8 |
9 | 20 |
21 |
-------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | M-Website 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | -------------------------------------------------------------------------------- /src/styles/yo/lib/core/merge-extra.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "base"; 3 | /** 4 | * 合并base和extra中的同类base map 5 | * 用以解决业务方升级Yo时需比base和extra的一致性 6 | * 当extra为空时，base map将以base文件里的定义作为默认值 7 | * 当extra不为空时，base map使用extra文件里的定义 8 | */ 9 | 10 | // 合并base和extra中的base map 11 | // 因为base map会在variables中引用，所以无法将merge动作放到会引用该map的其它map之后 12 | @if global-variable-exists(base) { 13 | $base: map-merge($_base, $base) !global; 14 | } @else { 15 | $base: $_base !global; 16 | } -------------------------------------------------------------------------------- /dev/search.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | M-Website 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | -------------------------------------------------------------------------------- /src/search.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | M-Website 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | -------------------------------------------------------------------------------- /dev/profile.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | M-Website 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | -------------------------------------------------------------------------------- /src/profile.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | M-Website 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | -------------------------------------------------------------------------------- /src/styles/yo/lib/core/classes/_border-radius.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | /** 3 | * @module 背景与边框 4 | * @description 定义圆角，用于修复某些安卓机型上“圆角+边框+背景”，背景溢出的情况 5 | * @method border-radius 6 | * @version 1.6.0 7 | * @param {Length} $border-radius 指定元素的圆角半径，取值与`border-radius`属性一致 <1.6.0> 8 | */ 9 | @mixin border-radius($border-radius...) { 10 | border-radius: $border-radius; 11 | // 之所以会这样是因为这些机型的背景是从边框处开始渲染，所以只需要改成从padding处渲染即可 12 | @include background-clip(padding-box !important); 13 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/core/classes/_overflow.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | /** 3 | * @module 常用方法 4 | * @description 定义是否有滚动条 5 | * @method overflow 6 | * @version 1.0.0 7 | * @param {String} $overflow 取值与最新原生语法一致，默认值：auto <1.0.0> 8 | */ 9 | @mixin overflow($overflow: auto) { 10 | @if $overflow == auto { 11 | overflow: auto; 12 | // 移除此条规则，防止iOS8.0+ webview崩溃 13 | -webkit-overflow-scrolling: touch; 14 | } @else { 15 | overflow: $overflow; 16 | } 17 | } -------------------------------------------------------------------------------- /src/styles/modules/profile.scss: -------------------------------------------------------------------------------- 1 | .profile-container { 2 | > div:first-child { 3 | height: 0; 4 | font-size: 0; 5 | padding-bottom: 74.93333%; 6 | img { 7 | width: 100%; 8 | } 9 | } 10 | 11 | > div:last-child { 12 | ul { 13 | display: flex; 14 | flex-wrap: wrap; 15 | padding-right: .1rem; 16 | li { 17 | width: 50%; 18 | padding: .1rem 0 0 .1rem; 19 | img { 20 | width: 100%; 21 | } 22 | } 23 | } 24 | } 25 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/ani/fade-in.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | 4 | /** 5 | * @module fade 6 | * @description 定义淡入动画 7 | * @method fade-in 8 | */ 9 | @-webkit-keyframes fade-in { 10 | 0% { 11 | opacity: 0; 12 | } 13 | 100% { 14 | opacity: 1; 15 | } 16 | } 17 | @keyframes fade-in { 18 | 0% { 19 | opacity: 0; 20 | } 21 | 100% { 22 | opacity: 1; 23 | } 24 | } 25 | 26 | .ani.fade-in { 27 | -webkit-animation-name: fade-in; 28 | animation-name: fade-in; 29 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/core/classes/_fullscreen.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | /** 3 | * @module 常用方法 4 | * @description 生成全屏方法 5 | * @method fullscreen 6 | * @version 1.7.0 7 | * @param {Integer} $z-index 指定层叠级别 <1.7.0> 8 | * @param {Keywords} $position 指定定位方式，取除`static | relative`之外的值，默认值：absolute <1.8.5> 9 | */ 10 | @mixin fullscreen($z-index: null, $position: absolute) { 11 | position: $position; 12 | z-index: $z-index; 13 | top: 0; 14 | right: 0; 15 | bottom: 0; 16 | left: 0; 17 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/ani/fade-out.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | 4 | /** 5 | * @module fade 6 | * @description 定义淡出动画 7 | * @method fade-out 8 | */ 9 | @-webkit-keyframes fade-out { 10 | 0% { 11 | opacity: 1; 12 | } 13 | 100% { 14 | opacity: 0; 15 | } 16 | } 17 | @keyframes fade-out { 18 | 0% { 19 | opacity: 1; 20 | } 21 | 100% { 22 | opacity: 0; 23 | } 24 | } 25 | 26 | .ani.fade-out { 27 | -webkit-animation-name: fade-out; 28 | animation-name: fade-out; 29 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/core/classes/_responsive.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | /** 3 | * @module 常用方法 4 | * @description 定义响应式方案 5 | * @method responsive 6 | * @version 1.0.0 7 | * @param {String} $media 指定媒体查询条件，取值为`config`文件map `media-types`中的值 <1.0.0> 8 | */ 9 | @mixin responsive($media) { 10 | @if not map-has-key($media-types, $media) { 11 | @warn "#{$media} is not a known media type. Using portrait instead."; 12 | $media: portrait; 13 | } 14 | @media #{map-get($media-types, $media)} { 15 | @content; 16 | } 17 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/ani/flash.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | 4 | /** 5 | * @module other 6 | * @description 定义闪烁动画 7 | * @method flash 8 | */ 9 | @-webkit-keyframes flash { 10 | 0%, 11 | 50%, 12 | 100% { 13 | opacity: 1; 14 | } 15 | 25%, 16 | 75% { 17 | opacity: 0; 18 | } 19 | } 20 | @keyframes flash { 21 | 0%, 22 | 50%, 23 | 100% { 24 | opacity: 1; 25 | } 26 | 25%, 27 | 75% { 28 | opacity: 0; 29 | } 30 | } 31 | 32 | .ani.flash { 33 | -webkit-animation-name: flash; 34 | animation-name: flash; 35 | } -------------------------------------------------------------------------------- /src/scripts/views/position-list.art: -------------------------------------------------------------------------------- 1 | {{each list}} 2 |
  • 3 | 4 |
    5 |

    {{$value.positionName}}

    6 |

    7 | 8 | {{$value.companyName}} 9 | 10 | {{$value.salary}} 11 |

    12 |

    {{$value.createTime}}

    13 |
    14 |
    • 15 | {{/each}} -------------------------------------------------------------------------------- /src/styles/yo/lib/ani/zoom-in.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | 4 | /** 5 | * @module zoom 6 | * @description 定义放大进入动画 7 | * @method zoom-in 8 | */ 9 | @-webkit-keyframes zoom-in { 10 | 0% { 11 | opacity: 0; 12 | -webkit-transform: scale3d(.3, .3, .3); 13 | } 14 | 50% { 15 | opacity: 1; 16 | } 17 | } 18 | @keyframes zoom-in { 19 | 0% { 20 | opacity: 0; 21 | transform: scale3d(.3, .3, .3); 22 | } 23 | 50% { 24 | opacity: 1; 25 | } 26 | } 27 | 28 | .ani.zoom-in { 29 | -webkit-animation-name: zoom-in; 30 | animation-name: zoom-in; 31 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/ani/rotate.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | 4 | /** 5 | * @module rotate 6 | * @description 定义旋转动画 7 | * @method rotate 8 | */ 9 | @-webkit-keyframes rotate { 10 | from { 11 | -webkit-transform: rotatez(0); 12 | } 13 | to { 14 | -webkit-transform: rotatez(360deg); 15 | } 16 | } 17 | @keyframes rotate { 18 | from { 19 | transform: rotatez(0); 20 | } 21 | to { 22 | transform: rotatez(360deg); 23 | } 24 | } 25 | 26 | .ani.rotate { 27 | -webkit-animation-name: rotate; 28 | animation-name: rotate; 29 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/core/classes/_prefix.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | /** 3 | * @module 常用方法 4 | * @description 给需要的属性加厂家前缀 5 | * @method prefix 6 | * @version 1.0.0 7 | * @param {String} $property 指定属性 <1.0.0> 8 | * @param {String} $value 指定属性值 <1.0.0> 9 | * @skip 10 | */ 11 | @mixin prefix($property, $value) { 12 | // 老式浏览器 13 | // 是否开启厂商前缀支持 14 | @if map-get($setting, is-vendor-prefix) { 15 | // 遍历输出厂商代码 16 | @each $vendor in map-get($setting, vendor-prefix) { 17 | #{$vendor}#{$property}: $value; 18 | } 19 | } 20 | // 现代浏览器（支持最新草案） 21 | #{$property}: $value; 22 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/core/classes/_fixed-scale.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | /** 3 | * @module 常用方法 4 | * @description 在自适应宽度情况下，确保内容元素的宽高比固定，比如：实现随屏幕大小而变化的正方形。 5 | * @method fixed-scale 6 | * @version 3.0.10 7 | * @param {Length} $width 默认值：100%。用以指定内容元素的初始宽度，由于尺寸需动态变化，不要使用固定单位 <3.0.10> 8 | * @param {Length} $scale 默认值：1/1，即正方形。用以指定内容元素的宽度高比 <3.0.10> 9 | */ 10 | @mixin fixed-scale($width: 100%, $scale: 1/1) { 11 | position: relative; 12 | width: $width; 13 | padding-bottom: $width / $scale; 14 | > .cont { 15 | position: absolute; 16 | top: 0; 17 | left: 0; 18 | width: 100%; 19 | } 20 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/core/classes/_clearfix.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | /** 3 | * @module 常用方法 4 | * @description 清除浮动方案 5 | * @method clearfix 6 | * @version 1.0.0 7 | * @param {String} $type 指定清除浮动的方式，包括：pseudo-element | bfc，默认值：pseudo-element <1.8.5> 8 | */ 9 | @mixin clearfix($type: pseudo-element) { 10 | @if $type == pseudo-element { 11 | // 创建伪元素用以清除自身浮动 12 | &::after{ 13 | display: block; 14 | overflow: hidden; 15 | clear: both; 16 | height: 0; 17 | content: "\0020"; 18 | } 19 | } @else { 20 | // 创建BFC用以清除自身浮动 21 | overflow: hidden; 22 | } 23 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/ani/zoom-out.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | 4 | /** 5 | * @module zoom 6 | * @description 定义缩小退出动画 7 | * @method zoom-out 8 | */ 9 | @-webkit-keyframes zoom-out { 10 | 0% { 11 | opacity: 1; 12 | } 13 | 50% { 14 | opacity: 0; 15 | -webkit-transform: scale3d(.3, .3, .3); 16 | } 17 | 100% { 18 | opacity: 0; 19 | } 20 | } 21 | @keyframes zoom-out { 22 | 0% { 23 | opacity: 1; 24 | } 25 | 50% { 26 | opacity: 0; 27 | transform: scale3d(.3, .3, .3); 28 | } 29 | 100% { 30 | opacity: 0; 31 | } 32 | } 33 | 34 | .ani.zoom-out { 35 | -webkit-animation-name: zoom-out; 36 | animation-name: zoom-out; 37 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/ani/roll-out-left.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | 4 | /** 5 | * @module roll 6 | * @description 定义从左侧翻滚出去动画 7 | * @method roll-out-left 8 | */ 9 | @-webkit-keyframes roll-out-left { 10 | 0% { 11 | opacity: 1; 12 | } 13 | 100% { 14 | opacity: 0; 15 | -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); 16 | } 17 | } 18 | @keyframes roll-out-left { 19 | 0% { 20 | opacity: 1; 21 | } 22 | 100% { 23 | opacity: 0; 24 | transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); 25 | } 26 | } 27 | 28 | .ani.roll-out-left { 29 | -webkit-animation-name: roll-out-left; 30 | animation-name: roll-out-left; 31 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/ani/roll-out-right.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | 4 | /** 5 | * @module roll 6 | * @description 定义从右侧翻滚出去动画 7 | * @method roll-out-right 8 | */ 9 | @-webkit-keyframes roll-out-right { 10 | 0% { 11 | opacity: 1; 12 | } 13 | 100% { 14 | opacity: 0; 15 | -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); 16 | } 17 | } 18 | @keyframes roll-out-right { 19 | 0% { 20 | opacity: 1; 21 | } 22 | 100% { 23 | opacity: 0; 24 | transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); 25 | } 26 | } 27 | 28 | .ani.roll-out-right { 29 | -webkit-animation-name: roll-out-right; 30 | animation-name: roll-out-right; 31 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/ani/fade-in-up.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | 4 | /** 5 | * @module fade 6 | * @description 定义淡入升起动画 7 | * @method fade-in-up 8 | */ 9 | @-webkit-keyframes fade-in-up { 10 | 0% { 11 | opacity: 0; 12 | -webkit-transform: translate3d(0, 100%, 0); 13 | } 14 | 100% { 15 | opacity: 1; 16 | -webkit-transform: translate3d(0, 0, 0) 17 | } 18 | } 19 | @keyframes fade-in-up { 20 | 0% { 21 | opacity: 0; 22 | transform: translate3d(0, 100%, 0); 23 | } 24 | 100% { 25 | opacity: 1; 26 | transform: translate3d(0, 0, 0) 27 | } 28 | } 29 | 30 | .ani.fade-in-up { 31 | -webkit-animation-name: fade-in-up; 32 | animation-name: fade-in-up; 33 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/ani/fade-out-up.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | 4 | /** 5 | * @module fade 6 | * @description 定义从上面淡出动画 7 | * @method fade-out-up 8 | */ 9 | @-webkit-keyframes fade-out-up { 10 | 0% { 11 | opacity: 1; 12 | -webkit-transform: translate3d(0, 0, 0); 13 | } 14 | 100% { 15 | opacity: 0; 16 | -webkit-transform: translate3d(0, -100%, 0) 17 | } 18 | } 19 | @keyframes fade-out-up { 20 | 0% { 21 | opacity: 1; 22 | transform: translate3d(0, 0, 0); 23 | } 24 | 100% { 25 | opacity: 0; 26 | transform: translate3d(0, -100%, 0) 27 | } 28 | } 29 | 30 | .ani.fade-out-up { 31 | -webkit-animation-name: fade-out-up; 32 | animation-name: fade-out-up; 33 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/ani/pulse.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | 4 | /** 5 | * @module other 6 | * @description 定义脉冲动画 7 | * @method pulse 8 | */ 9 | @-webkit-keyframes pulse { 10 | 0% { 11 | -webkit-transform: scale3d(1, 1, 1); 12 | } 13 | 50% { 14 | -webkit-transform: scale3d(1.05, 1.05, 1.05); 15 | } 16 | 100% { 17 | -webkit-transform: scale3d(1, 1, 1); 18 | } 19 | } 20 | @keyframes pulse { 21 | 0% { 22 | transform: scale3d(1, 1, 1); 23 | } 24 | 50% { 25 | transform: scale3d(1.05, 1.05, 1.05); 26 | } 27 | 100% { 28 | transform: scale3d(1, 1, 1); 29 | } 30 | } 31 | 32 | .ani.pulse { 33 | -webkit-animation-name: pulse; 34 | animation-name: pulse; 35 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/ani/fade-in-down.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | 4 | /** 5 | * @module fade 6 | * @description 定义淡入落下动画 7 | * @method fade-in-down 8 | */ 9 | @-webkit-keyframes fade-in-down { 10 | 0% { 11 | opacity: 0; 12 | -webkit-transform: translate3d(0, -100%, 0); 13 | } 14 | 100% { 15 | opacity: 1; 16 | -webkit-transform: translate3d(0, 0, 0) 17 | } 18 | } 19 | @keyframes fade-in-down { 20 | 0% { 21 | opacity: 0; 22 | transform: translate3d(0, -100%, 0); 23 | } 24 | 100% { 25 | opacity: 1; 26 | transform: translate3d(0, 0, 0) 27 | } 28 | } 29 | 30 | .ani.fade-in-down { 31 | -webkit-animation-name: fade-in-down; 32 | animation-name: fade-in-down; 33 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/ani/fade-in-left.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | 4 | /** 5 | * @module fade 6 | * @description 定义从左侧淡入动画 7 | * @method fade-in-left 8 | */ 9 | @-webkit-keyframes fade-in-left { 10 | 0% { 11 | opacity: 0; 12 | -webkit-transform: translate3d(-100%, 0, 0); 13 | } 14 | 100% { 15 | opacity: 1; 16 | -webkit-transform: translate3d(0, 0, 0) 17 | } 18 | } 19 | @keyframes fade-in-left { 20 | 0% { 21 | opacity: 0; 22 | transform: translate3d(-100%, 0, 0); 23 | } 24 | 100% { 25 | opacity: 1; 26 | transform: translate3d(0, 0, 0) 27 | } 28 | } 29 | 30 | .ani.fade-in-left { 31 | -webkit-animation-name: fade-in-left; 32 | animation-name: fade-in-left; 33 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/ani/fade-in-right.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | 4 | /** 5 | * @module fade 6 | * @description 定义从右侧淡入动画 7 | * @method fade-in-right 8 | */ 9 | @-webkit-keyframes fade-in-right { 10 | 0% { 11 | opacity: 0; 12 | -webkit-transform: translate3d(100%, 0, 0); 13 | } 14 | 100% { 15 | opacity: 1; 16 | -webkit-transform: translate3d(0, 0, 0) 17 | } 18 | } 19 | @keyframes fade-in-right { 20 | 0% { 21 | opacity: 0; 22 | transform: translate3d(100%, 0, 0); 23 | } 24 | 100% { 25 | opacity: 1; 26 | transform: translate3d(0, 0, 0) 27 | } 28 | } 29 | 30 | .ani.fade-in-right { 31 | -webkit-animation-name: fade-in-right; 32 | animation-name: fade-in-right; 33 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/ani/fade-out-down.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | 4 | /** 5 | * @module fade 6 | * @description 定义从下面淡出动画 7 | * @method fade-out-down 8 | */ 9 | @-webkit-keyframes fade-out-down { 10 | 0% { 11 | opacity: 1; 12 | -webkit-transform: translate3d(0, 0, 0); 13 | } 14 | 100% { 15 | opacity: 0; 16 | -webkit-transform: translate3d(0, 100%, 0) 17 | } 18 | } 19 | @keyframes fade-out-down { 20 | 0% { 21 | opacity: 1; 22 | transform: translate3d(0, 0, 0); 23 | } 24 | 100% { 25 | opacity: 0; 26 | transform: translate3d(0, 100%, 0) 27 | } 28 | } 29 | 30 | .ani.fade-out-down { 31 | -webkit-animation-name: fade-out-down; 32 | animation-name: fade-out-down; 33 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/ani/fade-out-left.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | 4 | /** 5 | * @module fade 6 | * @description 定义从左侧淡出动画 7 | * @method fade-out-left 8 | */ 9 | @-webkit-keyframes fade-out-left { 10 | 0% { 11 | opacity: 1; 12 | -webkit-transform: translate3d(0, 0, 0); 13 | } 14 | 100% { 15 | opacity: 0; 16 | -webkit-transform: translate3d(-100%, 0, 0) 17 | } 18 | } 19 | @keyframes fade-out-left { 20 | 0% { 21 | opacity: 1; 22 | transform: translate3d(0, 0, 0); 23 | } 24 | 100% { 25 | opacity: 0; 26 | transform: translate3d(-100%, 0, 0) 27 | } 28 | } 29 | 30 | .ani.fade-out-left { 31 | -webkit-animation-name: fade-out-left; 32 | animation-name: fade-out-left; 33 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/ani/fade-out-right.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | 4 | /** 5 | * @module fade 6 | * @description 定义从右侧淡出动画 7 | * @method fade-out-right 8 | */ 9 | @-webkit-keyframes fade-out-right { 10 | 0% { 11 | opacity: 1; 12 | -webkit-transform: translate3d(0, 0, 0); 13 | } 14 | 100% { 15 | opacity: 0; 16 | -webkit-transform: translate3d(100%, 0, 0) 17 | } 18 | } 19 | @keyframes fade-out-right { 20 | 0% { 21 | opacity: 1; 22 | transform: translate3d(0, 0, 0); 23 | } 24 | 100% { 25 | opacity: 0; 26 | transform: translate3d(100%, 0, 0) 27 | } 28 | } 29 | 30 | .ani.fade-out-right { 31 | -webkit-animation-name: fade-out-right; 32 | animation-name: fade-out-right; 33 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/ani/roll-in-left.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | 4 | /** 5 | * @module roll 6 | * @description 定义从左侧翻滚进入动画 7 | * @method roll-in-left 8 | */ 9 | @-webkit-keyframes roll-in-left { 10 | 0% { 11 | opacity: 0; 12 | -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); 13 | } 14 | 100% { 15 | opacity: 1; 16 | -webkit-transform: none; 17 | } 18 | } 19 | @keyframes roll-in-left { 20 | 0% { 21 | opacity: 0; 22 | transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); 23 | } 24 | 100% { 25 | opacity: 1; 26 | transform: none; 27 | } 28 | } 29 | 30 | .ani.roll-in-left { 31 | -webkit-animation-name: roll-in-left; 32 | animation-name: roll-in-left; 33 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/ani/roll-in-right.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | 4 | /** 5 | * @module roll 6 | * @description 定义从右侧翻滚进入动画 7 | * @method roll-in-righ 8 | */ 9 | @-webkit-keyframes roll-in-right { 10 | 0% { 11 | opacity: 0; 12 | -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); 13 | } 14 | 100% { 15 | opacity: 1; 16 | -webkit-transform: none; 17 | } 18 | } 19 | @keyframes roll-in-right { 20 | 0% { 21 | opacity: 0; 22 | transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); 23 | } 24 | 100% { 25 | opacity: 1; 26 | transform: none; 27 | } 28 | } 29 | 30 | .ani.roll-in-right { 31 | -webkit-animation-name: roll-in-right; 32 | animation-name: roll-in-right; 33 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/core/classes/_clearspace.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | /** 3 | * @module 常用方法 4 | * @description 清除行内级元素间间隙方案 5 | * @method clearspace 6 | * @version 3.0.3 7 | * @param {Length} $font-size 指定子元素字号，默认值：.14rem <3.0.3> 8 | * @example 9 | * .demo { 10 | * @include clearspace; 11 | * } 12 | * 13 | *
    14 | * 1 15 | * 2 16 | * 3 17 | *
    18 | */ 19 | @mixin clearspace($font-size: .14rem) { 20 | font-size: 0; 21 | font-family: arial; 22 | > .item { 23 | display: inline-block; 24 | font-size: $font-size; 25 | font-family: map-get($base, font-family); 26 | } 27 | } -------------------------------------------------------------------------------- /src/scripts/controllers/detail.js: -------------------------------------------------------------------------------- 1 | import detailView from '../views/detail.art' 2 | // import '../../styles/modules/cover-lagou.scss' 3 | 4 | class Detail { 5 | render() { 6 | let html = detailView() 7 | 8 | $('#root').html(html) 9 | 10 | $('#header').on('click', () => { 11 | location.hash = 'position' 12 | }) 13 | 14 | // js 15 | $('html').css({ 16 | 'font-size': '65.5%', 17 | 'background': '#fff', 18 | 'overflow-y': 'scroll' 19 | }) 20 | $('body').css({ 21 | 'overflow-y': 'scroll' 22 | }) 23 | 24 | // 获取id 25 | let hash = location.hash 26 | let reg = RegExp('(\\d+)$', 'g') 27 | let id = reg.exec(hash) 28 | console.log(id[1]) 29 | } 30 | } 31 | 32 | export default new Detail() -------------------------------------------------------------------------------- /src/styles/yo/lib/ani/rotate-out.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | 4 | /** 5 | * @module rotate 6 | * @description 定义旋转退出动画 7 | * @method rotate-out 8 | */ 9 | @-webkit-keyframes rotate-out { 10 | 0% { 11 | -webkit-transform-origin: center; 12 | opacity: 1; 13 | } 14 | 100% { 15 | -webkit-transform-origin: center; 16 | -webkit-transform: rotate3d(0, 0, 1, 200deg); 17 | opacity: 0; 18 | } 19 | } 20 | @keyframes rotate-out { 21 | 0% { 22 | transform-origin: center; 23 | opacity: 1; 24 | } 25 | 100% { 26 | transform-origin: center; 27 | transform: rotate3d(0, 0, 1, 200deg); 28 | opacity: 0; 29 | } 30 | } 31 | 32 | .ani.rotate-out { 33 | -webkit-animation-name: rotate-out; 34 | animation-name: rotate-out; 35 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/ani/speed-out-left.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | 4 | /** 5 | * @module speed 6 | * @description 定义从左侧快速出去动画 7 | * @method speed-out-left 8 | */ 9 | @-webkit-keyframes speed-out-left { 10 | 0% { 11 | opacity: 1; 12 | } 13 | 100% { 14 | -webkit-transform: translate3d(-100%, 0, 0) skewX(-30deg); 15 | opacity: 0; 16 | } 17 | } 18 | @keyframes speed-out-left { 19 | 0% { 20 | opacity: 1; 21 | } 22 | 100% { 23 | transform: translate3d(-100%, 0, 0) skewX(-30deg); 24 | opacity: 0; 25 | } 26 | } 27 | 28 | .ani.speed-out-left { 29 | -webkit-animation-timing-function: ease-in; 30 | animation-timing-function: ease-in; 31 | -webkit-animation-name: speed-out-left; 32 | animation-name: speed-out-left; 33 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/ani/speed-out-right.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | 4 | /** 5 | * @module speed 6 | * @description 定义从右侧快速出去动画 7 | * @method speed-out-right 8 | */ 9 | @-webkit-keyframes speed-out-right { 10 | 0% { 11 | opacity: 1; 12 | } 13 | 100% { 14 | -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); 15 | opacity: 0; 16 | } 17 | } 18 | @keyframes speed-out-right { 19 | 0% { 20 | opacity: 1; 21 | } 22 | 100% { 23 | transform: translate3d(100%, 0, 0) skewX(30deg); 24 | opacity: 0; 25 | } 26 | } 27 | 28 | .ani.speed-out-right { 29 | -webkit-animation-timing-function: ease-in; 30 | animation-timing-function: ease-in; 31 | -webkit-animation-name: speed-out-right; 32 | animation-name: speed-out-right; 33 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/core/classes.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | /** 3 | * Yo框架全局基础方法 4 | * 包括响应式方案，CSS3兼容性方案，厂商前缀方案，iconfont方案，flex布局等全局方法 5 | */ 6 | 7 | @import "classes/prefix"; 8 | @import "classes/iconfont"; 9 | @import "classes/calc"; 10 | @import "classes/responsive"; 11 | @import "classes/clearfix"; 12 | @import "classes/clearspace"; 13 | @import "classes/align"; 14 | @import "classes/overflow"; 15 | @import "classes/fullscreen"; 16 | @import "classes/user-interface"; 17 | @import "classes/background"; 18 | @import "classes/border"; 19 | @import "classes/border-radius"; 20 | @import "classes/transform"; 21 | @import "classes/animation"; 22 | @import "classes/transition"; 23 | @import "classes/flex"; 24 | @import "classes/shape"; 25 | @import "classes/fixed-scale"; 26 | @import "classes/text"; -------------------------------------------------------------------------------- /src/scripts/views/profile.art: -------------------------------------------------------------------------------- 1 |
    2 |
    3 | 4 |
    5 |
    6 | 20 |
    21 |
    -------------------------------------------------------------------------------- /src/styles/yo/lib/ani/rotate-in.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | 4 | /** 5 | * @module rotate 6 | * @description 定义旋转进入动画 7 | * @method rotate-in 8 | */ 9 | @-webkit-keyframes rotate-in { 10 | 0% { 11 | -webkit-transform-origin: center; 12 | -webkit-transform: rotate3d(0, 0, 1, -200deg); 13 | opacity: 0; 14 | } 15 | 100% { 16 | -webkit-transform-origin: center; 17 | -webkit-transform: none; 18 | opacity: 1; 19 | } 20 | } 21 | @keyframes rotate-in { 22 | 0% { 23 | transform-origin: center; 24 | transform: rotate3d(0, 0, 1, -200deg); 25 | opacity: 0; 26 | } 27 | 100% { 28 | transform-origin: center; 29 | transform: none; 30 | opacity: 1; 31 | } 32 | } 33 | 34 | .ani.rotate-in { 35 | -webkit-animation-name: rotate-in; 36 | animation-name: rotate-in; 37 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/core/classes/_align.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | /** 3 | * @module 常用方法 4 | * @description 描述元素内容在横、纵方向上的对齐方式，默认为水平垂直居中对齐 5 | * @method align 6 | * @version 2.0.0 7 | * @param {String} $flexbox 元素布局方式，可选值：flex | inline-flex，默认值：flex <2.0.0> 8 | * @param {Keyword} $justify-content 元素内容的水平对齐方式，取值与`justify-content`属性一致，默认值：center <2.0.0> 9 | * @param {Keyword} $align-items 元素内容的垂直对齐方式，取值与`align-items`属性一致，默认值：center <2.0.0> 10 | * @example 11 | * .demo { 12 | * @include align; 13 | * } 14 | * 15 | *
    16 | * 未知尺寸图片居中 17 | *
    18 | */ 19 | @mixin align($flexbox: flex, $justify-content: center, $align-items: center) { 20 | @include flexbox($flexbox); 21 | @include justify-content($justify-content); 22 | @include align-items($align-items); 23 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/ani/rotate-out-up-left.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | 4 | /** 5 | * @module rotate 6 | * @description 定义旋转从左向上退出动画 7 | * @method rotate-out-up-left 8 | */ 9 | @-webkit-keyframes rotate-out-up-left { 10 | 0% { 11 | -webkit-transform-origin: left bottom; 12 | opacity: 1; 13 | } 14 | 100% { 15 | -webkit-transform-origin: left bottom; 16 | -webkit-transform: rotate3d(0, 0, 1, -90deg); 17 | opacity: 0; 18 | } 19 | } 20 | @keyframes rotate-out-up-left { 21 | 0% { 22 | transform-origin: left bottom; 23 | opacity: 1; 24 | } 25 | 100% { 26 | transform-origin: left bottom; 27 | transform: rotate3d(0, 0, 1, -90deg); 28 | opacity: 0; 29 | } 30 | } 31 | 32 | .ani.rotate-out-up-left { 33 | -webkit-animation-name: rotate-out-up-left; 34 | animation-name: rotate-out-up-left; 35 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/ani/rotate-out-down-left.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | 4 | /** 5 | * @module rotate 6 | * @description 定义旋转从左往下退出动画 7 | * @method rotate-out-down-left 8 | */ 9 | @-webkit-keyframes rotate-out-down-left { 10 | 0% { 11 | -webkit-transform-origin: left bottom; 12 | opacity: 1; 13 | } 14 | 100% { 15 | -webkit-transform-origin: left bottom; 16 | -webkit-transform: rotate3d(0, 0, 1, 90deg); 17 | opacity: 0; 18 | } 19 | } 20 | @keyframes rotate-out-down-left { 21 | 0% { 22 | transform-origin: left bottom; 23 | opacity: 1; 24 | } 25 | 100% { 26 | transform-origin: left bottom; 27 | transform: rotate3d(0, 0, 1, 90deg); 28 | opacity: 0; 29 | } 30 | } 31 | 32 | .ani.rotate-out-down-left { 33 | -webkit-animation-name: rotate-out-down-left; 34 | animation-name: rotate-out-down-left; 35 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/ani/rotate-out-up-right.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | 4 | /** 5 | * @module rotate 6 | * @description 定义旋转从右向上退出动画 7 | * @method rotate-out-up-right 8 | */ 9 | @-webkit-keyframes rotate-out-up-right { 10 | 0% { 11 | -webkit-transform-origin: right bottom; 12 | opacity: 1; 13 | } 14 | 100% { 15 | -webkit-transform-origin: right bottom; 16 | -webkit-transform: rotate3d(0, 0, 1, 90deg); 17 | opacity: 0; 18 | } 19 | } 20 | @keyframes rotate-out-up-right { 21 | 0% { 22 | transform-origin: right bottom; 23 | opacity: 1; 24 | } 25 | 100% { 26 | transform-origin: right bottom; 27 | transform: rotate3d(0, 0, 1, 90deg); 28 | opacity: 0; 29 | } 30 | } 31 | 32 | .ani.rotate-out-up-right { 33 | -webkit-animation-name: rotate-out-up-right; 34 | animation-name: rotate-out-up-right; 35 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/ani/elastic-out.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | 4 | /** 5 | * @module elastic 6 | * @description 定义弹性移出动画 7 | * @method elastic-out 8 | */ 9 | @-webkit-keyframes elastic-out { 10 | 20% { 11 | -webkit-transform: scale3d(.9, .9, .9); 12 | } 13 | 50%, 14 | 55% { 15 | opacity: 1; 16 | -webkit-transform: scale3d(1.1, 1.1, 1.1); 17 | } 18 | 100% { 19 | opacity: 0; 20 | -webkit-transform: scale3d(.3, .3, .3); 21 | } 22 | } 23 | @keyframes elastic-out { 24 | 20% { 25 | transform: scale3d(.9, .9, .9); 26 | } 27 | 50%, 28 | 55% { 29 | opacity: 1; 30 | transform: scale3d(1.1, 1.1, 1.1); 31 | } 32 | 100% { 33 | opacity: 0; 34 | transform: scale3d(.3, .3, .3); 35 | } 36 | } 37 | 38 | .ani.elastic-out { 39 | -webkit-animation-name: elastic-out; 40 | animation-name: elastic-out; 41 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/ani/rotate-out-down-right.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | 4 | /** 5 | * @module rotate 6 | * @description 定义旋转从右往下退出动画 7 | * @method rotate-out-down-right 8 | */ 9 | @-webkit-keyframes rotate-out-down-right { 10 | 0% { 11 | -webkit-transform-origin: right bottom; 12 | opacity: 1; 13 | } 14 | 100% { 15 | -webkit-transform-origin: right bottom; 16 | -webkit-transform: rotate3d(0, 0, 1, -90deg); 17 | opacity: 0; 18 | } 19 | } 20 | @keyframes rotate-out-down-right { 21 | 0% { 22 | transform-origin: right bottom; 23 | opacity: 1; 24 | } 25 | 100% { 26 | transform-origin: right bottom; 27 | transform: rotate3d(0, 0, 1, -90deg); 28 | opacity: 0; 29 | } 30 | } 31 | 32 | .ani.rotate-out-down-right { 33 | -webkit-animation-name: rotate-out-down-right; 34 | animation-name: rotate-out-down-right; 35 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/core/classes/_calc.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | /** 3 | * @module 常用方法 4 | * @description 四则运算(系统要求：iOS6.0+,Android4.4+) 5 | * @method calc 6 | * @version 1.7.0 7 | * @param {String} $property 指定需要进行计算的CSS属性 <1.7.0> 8 | * @param {String} $value 与原生CSS语法一致，区别在于需要使用引号包裹表达式 <1.7.0> 9 | * @example 10 | * .calc { 11 | * @include calc(width, "100% - 100px"); 12 | * } 13 | * 14 | *
    四则运算
    15 | */ 16 | @mixin calc($property, $value) { 17 | // 是否开启厂商前缀支持 18 | @if map-get($setting, is-vendor-prefix) { 19 | // 遍历输出厂商代码 20 | @each $vendor in map-get($setting, vendor-prefix) { 21 | // 输出所有厂商前缀（IE9.0+支持标准写法，更早版本不支持该函数） 22 | @if $vendor != -ms- { 23 | #{$property}: #{$vendor}calc(#{$value}); 24 | } 25 | } 26 | } 27 | #{$property}: calc(#{$value}); 28 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/ani/rotate-in-up-left.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | 4 | /** 5 | * @module rotate 6 | * @description 定义旋转从左向上进入动画 7 | * @method rotate-in-up-left 8 | */ 9 | @-webkit-keyframes rotate-in-up-left { 10 | 0% { 11 | -webkit-transform-origin: left bottom; 12 | -webkit-transform: rotate3d(0, 0, 1, 45deg); 13 | opacity: 0; 14 | } 15 | 100% { 16 | -webkit-transform-origin: left bottom; 17 | -webkit-transform: none; 18 | opacity: 1; 19 | } 20 | } 21 | @keyframes rotate-in-up-left { 22 | 0% { 23 | transform-origin: left bottom; 24 | transform: rotate3d(0, 0, 1, 45deg); 25 | opacity: 0; 26 | } 27 | 100% { 28 | transform-origin: left bottom; 29 | transform: none; 30 | opacity: 1; 31 | } 32 | } 33 | 34 | .ani.rotate-in-up-left { 35 | -webkit-animation-name: rotate-in-up-left; 36 | animation-name: rotate-in-up-left; 37 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/ani/zoom-out-left.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | 4 | /** 5 | * @module zoom 6 | * @description 定义从左往右缩小退出动画 7 | * @method zoom-out-left 8 | */ 9 | @-webkit-keyframes zoom-out-left { 10 | 40% { 11 | opacity: 1; 12 | -webkit-transform: scale3d(.475, .475, .475) translate3d(45px, 0, 0); 13 | } 14 | 100% { 15 | opacity: 0; 16 | -webkit-transform: scale(.1) translate3d(-2000px, 0, 0); 17 | -webkit-transform-origin: left center; 18 | } 19 | } 20 | @keyframes zoom-out-left { 21 | 40% { 22 | opacity: 1; 23 | transform: scale3d(.475, .475, .475) translate3d(45px, 0, 0); 24 | } 25 | 100% { 26 | opacity: 0; 27 | transform: scale(.1) translate3d(-2000px, 0, 0); 28 | transform-origin: left center; 29 | } 30 | } 31 | 32 | .ani.zoom-out-left { 33 | -webkit-animation-name: zoom-out-left; 34 | animation-name: zoom-out-left; 35 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/ani/elastic-out-up.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | 4 | /** 5 | * @module elastic 6 | * @description 定义弹性向上移出动画 7 | * @method elastic-out-up 8 | */ 9 | @-webkit-keyframes elastic-out-up { 10 | 20% { 11 | -webkit-transform: translate3d(0, -10px, 0); 12 | } 13 | 40%, 14 | 45% { 15 | opacity: 1; 16 | -webkit-transform: translate3d(0, 20px, 0); 17 | } 18 | 100% { 19 | opacity: 0; 20 | -webkit-transform: translate3d(0, -100%, 0); 21 | } 22 | } 23 | @keyframes elastic-out-up { 24 | 20% { 25 | transform: translate3d(0, -10px, 0); 26 | } 27 | 40%, 28 | 45% { 29 | opacity: 1; 30 | transform: translate3d(0, 20px, 0); 31 | } 32 | 100% { 33 | opacity: 0; 34 | transform: translate3d(0, -100%, 0); 35 | } 36 | } 37 | 38 | .ani.elastic-out-up { 39 | -webkit-animation-name: elastic-out-up; 40 | animation-name: elastic-out-up; 41 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/ani/rotate-in-up-right.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | 4 | /** 5 | * @module rotate 6 | * @description 定义旋转从右向上进入动画 7 | * @method rotate-in-up-right 8 | */ 9 | @-webkit-keyframes rotate-in-up-right { 10 | 0% { 11 | -webkit-transform-origin: right bottom; 12 | -webkit-transform: rotate3d(0, 0, 1, -45deg); 13 | opacity: 0; 14 | } 15 | 100% { 16 | -webkit-transform-origin: right bottom; 17 | -webkit-transform: none; 18 | opacity: 1; 19 | } 20 | } 21 | @keyframes rotate-in-up-right { 22 | 0% { 23 | transform-origin: right bottom; 24 | transform: rotate3d(0, 0, 1, -45deg); 25 | opacity: 0; 26 | } 27 | 100% { 28 | transform-origin: right bottom; 29 | transform: none; 30 | opacity: 1; 31 | } 32 | } 33 | 34 | .ani.rotate-in-up-right { 35 | -webkit-animation-name: rotate-in-up-right; 36 | animation-name: rotate-in-up-right; 37 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/ani/zoom-out-right.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | 4 | /** 5 | * @module zoom 6 | * @description 定义从右往左缩小退出动画 7 | * @method zoom-out-right 8 | */ 9 | @-webkit-keyframes zoom-out-right { 10 | 40% { 11 | opacity: 1; 12 | -webkit-transform: scale3d(.475, .475, .475) translate3d(-45px, 0, 0); 13 | } 14 | 100% { 15 | opacity: 0; 16 | -webkit-transform: scale(.1) translate3d(2000px, 0, 0); 17 | -webkit-transform-origin: right center; 18 | } 19 | } 20 | @keyframes zoom-out-right { 21 | 40% { 22 | opacity: 1; 23 | transform: scale3d(.475, .475, .475) translate3d(-45px, 0, 0); 24 | } 25 | 100% { 26 | opacity: 0; 27 | transform: scale(.1) translate3d(2000px, 0, 0); 28 | transform-origin: right center; 29 | } 30 | } 31 | 32 | .ani.zoom-out-right { 33 | -webkit-animation-name: zoom-out-right; 34 | animation-name: zoom-out-right; 35 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/ani/rotate-in-down-left.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | 4 | /** 5 | * @module rotate 6 | * @description 定义旋转从左向下进入动画 7 | * @method rotate-in-down-left 8 | */ 9 | @-webkit-keyframes rotate-in-down-left { 10 | 0% { 11 | -webkit-transform-origin: left bottom; 12 | -webkit-transform: rotate3d(0, 0, 1, -45deg); 13 | opacity: 0; 14 | } 15 | 100% { 16 | -webkit-transform-origin: left bottom; 17 | -webkit-transform: none; 18 | opacity: 1; 19 | } 20 | } 21 | @keyframes rotate-in-down-left { 22 | 0% { 23 | transform-origin: left bottom; 24 | transform: rotate3d(0, 0, 1, -45deg); 25 | opacity: 0; 26 | } 27 | 100% { 28 | transform-origin: left bottom; 29 | transform: none; 30 | opacity: 1; 31 | } 32 | } 33 | 34 | .ani.rotate-in-down-left { 35 | -webkit-animation-name: rotate-in-down-left; 36 | animation-name: rotate-in-down-left; 37 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/ani/shake.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | 4 | /** 5 | * @module other 6 | * @description 定义摇动动画 7 | * @method shake 8 | */ 9 | @-webkit-keyframes shake { 10 | 0%, 11 | 100% { 12 | -webkit-transform: translate3d(0, 0, 0); 13 | } 14 | 10%, 15 | 30%, 16 | 50%, 17 | 70%, 18 | 90% { 19 | -webkit-transform: translate3d(-10px, 0, 0); 20 | } 21 | 20%, 22 | 40%, 23 | 60%, 24 | 80% { 25 | -webkit-transform: translate3d(10px, 0, 0); 26 | } 27 | } 28 | @keyframes shake { 29 | 0%, 30 | 100% { 31 | transform: translate3d(0, 0, 0); 32 | } 33 | 10%, 34 | 30%, 35 | 50%, 36 | 70%, 37 | 90% { 38 | transform: translate3d(-10px, 0, 0); 39 | } 40 | 20%, 41 | 40%, 42 | 60%, 43 | 80% { 44 | transform: translate3d(10px, 0, 0); 45 | } 46 | } 47 | 48 | .ani.shake { 49 | -webkit-animation-name: shake; 50 | animation-name: shake; 51 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/ani/elastic-out-down.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | 4 | /** 5 | * @module elastic 6 | * @description 定义弹性向下移出动画 7 | * @method elastic-out-down 8 | */ 9 | @-webkit-keyframes elastic-out-down { 10 | 20% { 11 | -webkit-transform: translate3d(0, 10px, 0); 12 | } 13 | 40%, 14 | 45% { 15 | opacity: 1; 16 | -webkit-transform: translate3d(0, -20px, 0); 17 | } 18 | 100% { 19 | opacity: 0; 20 | -webkit-transform: translate3d(0, 100%, 0); 21 | } 22 | } 23 | @keyframes elastic-out-down { 24 | 20% { 25 | transform: translate3d(0, 10px, 0); 26 | } 27 | 40%, 28 | 45% { 29 | opacity: 1; 30 | transform: translate3d(0, -20px, 0); 31 | } 32 | 100% { 33 | opacity: 0; 34 | transform: translate3d(0, 100%, 0); 35 | } 36 | } 37 | 38 | .ani.elastic-out-down { 39 | -webkit-animation-name: elastic-out-down; 40 | animation-name: elastic-out-down; 41 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/ani/elastic-out-left.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | 4 | /** 5 | * @module elastic 6 | * @description 定义弹性向左移出动画 7 | * @method elastic-out-left 8 | */ 9 | @-webkit-keyframes elastic-out-left { 10 | 20% { 11 | -webkit-transform: translate3d(-10px, 0, 0); 12 | } 13 | 40%, 14 | 45% { 15 | opacity: 1; 16 | -webkit-transform: translate3d(20px, 0, 0); 17 | } 18 | 100% { 19 | opacity: 0; 20 | -webkit-transform: translate3d(-100%, 0, 0); 21 | } 22 | } 23 | @keyframes elastic-out-left { 24 | 20% { 25 | transform: translate3d(-10px, 0, 0); 26 | } 27 | 40%, 28 | 45% { 29 | opacity: 1; 30 | transform: translate3d(20px, 0, 0); 31 | } 32 | 100% { 33 | opacity: 0; 34 | transform: translate3d(-100%, 0, 0); 35 | } 36 | } 37 | 38 | .ani.elastic-out-left { 39 | -webkit-animation-name: elastic-out-left; 40 | animation-name: elastic-out-left; 41 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/ani/rotate-in-down-right.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | 4 | /** 5 | * @module rotate 6 | * @description 定义旋转从右向下进入动画 7 | * @method rotate-in-down-right 8 | */ 9 | @-webkit-keyframes rotate-in-down-right { 10 | 0% { 11 | -webkit-transform-origin: right bottom; 12 | -webkit-transform: rotate3d(0, 0, 1, 45deg); 13 | opacity: 0; 14 | } 15 | 100% { 16 | -webkit-transform-origin: right bottom; 17 | -webkit-transform: none; 18 | opacity: 1; 19 | } 20 | } 21 | @keyframes rotate-in-down-right { 22 | 0% { 23 | transform-origin: right bottom; 24 | transform: rotate3d(0, 0, 1, 45deg); 25 | opacity: 0; 26 | } 27 | 100% { 28 | transform-origin: right bottom; 29 | transform: none; 30 | opacity: 1; 31 | } 32 | } 33 | 34 | .ani.rotate-in-down-right { 35 | -webkit-animation-name: rotate-in-down-right; 36 | animation-name: rotate-in-down-right; 37 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/ani/elastic-out-right.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | 4 | /** 5 | * @module elastic 6 | * @description 定义弹性向右移出动画 7 | * @method elastic-out-right 8 | */ 9 | @-webkit-keyframes elastic-out-right { 10 | 20% { 11 | -webkit-transform: translate3d(10px, 0, 0); 12 | } 13 | 40%, 14 | 45% { 15 | opacity: 1; 16 | -webkit-transform: translate3d(-20px, 0, 0); 17 | } 18 | 100% { 19 | opacity: 0; 20 | -webkit-transform: translate3d(100%, 0, 0); 21 | } 22 | } 23 | @keyframes elastic-out-right { 24 | 20% { 25 | transform: translate3d(10px, 0, 0); 26 | } 27 | 40%, 28 | 45% { 29 | opacity: 1; 30 | transform: translate3d(-20px, 0, 0); 31 | } 32 | 100% { 33 | opacity: 0; 34 | transform: translate3d(100%, 0, 0); 35 | } 36 | } 37 | 38 | .ani.elastic-out-right { 39 | -webkit-animation-name: elastic-out-right; 40 | animation-name: elastic-out-right; 41 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/core/classes/_shape.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | /** 3 | * @module 形状 4 | * @description 生成矩形方法 5 | * @method rect 6 | * @version 1.0.0 7 | * @param {Length} $width 定义矩形的长度 <1.0.0> 8 | * @param {Length} $height 定义矩形的高度 <1.0.0> 9 | */ 10 | @mixin rect($width, $height) { 11 | width: $width; 12 | height: $height; 13 | } 14 | 15 | /** 16 | * @module 形状 17 | * @description 生成正方形方法 18 | * @method square 19 | * @version 1.0.0 20 | * @param {Length} $size 定义正方形的边长 <1.0.0> 21 | */ 22 | @mixin square($size) { 23 | width: $size; 24 | height: $size; 25 | } 26 | 27 | /** 28 | * @module 形状 29 | * @description 生成圆形方法 30 | * @method circle 31 | * @version 1.0.0 32 | * @param {Length} $size 定义圆的半径长度 <1.0.0> 33 | * @param {Length} $radius 定义圆的圆角半径长度 <1.0.0> 34 | */ 35 | @mixin circle($size, $radius: 50%) { 36 | @include square($size); 37 | @include border-radius($radius); 38 | } -------------------------------------------------------------------------------- /src/styles/modules/index.scss: -------------------------------------------------------------------------------- 1 | .index-container { 2 | display: flex; 3 | flex-direction: column; 4 | height: 100%; 5 | 6 | header { 7 | height: .44rem; 8 | background: #00b38a; 9 | font-size: .18rem; 10 | text-align: center; 11 | line-height: .44rem; 12 | color: #fff; 13 | } 14 | 15 | main { 16 | flex: 1; 17 | overflow-y: scroll; 18 | } 19 | 20 | footer { 21 | height: .44rem; 22 | ul { 23 | height: 100%; 24 | display: flex; 25 | li { 26 | flex: 1; 27 | background: #f6f6f6; 28 | text-align: center; 29 | line-height: .44rem; 30 | font-size: .18rem; 31 | display: flex; 32 | align-items: center; 33 | justify-content: center; 34 | color: #c2cfcc; 35 | span { 36 | font-size: .2rem; 37 | } 38 | &.active { 39 | background: #e7f3f0; 40 | color: #00b38a; 41 | } 42 | } 43 | } 44 | } 45 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/ani/flip-out-x.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | 4 | /** 5 | * @module flip 6 | * @description 定义翻转动画 7 | * @method flip-out-x 8 | */ 9 | @-webkit-keyframes flip-out-x { 10 | 0% { 11 | -webkit-transform: perspective(400px); 12 | } 13 | 30% { 14 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 15 | opacity: 1; 16 | } 17 | 100% { 18 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 19 | opacity: 0; 20 | } 21 | } 22 | @keyframes flip-out-x { 23 | 0% { 24 | transform: perspective(400px); 25 | } 26 | 30% { 27 | transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 28 | opacity: 1; 29 | } 30 | 100% { 31 | transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 32 | opacity: 0; 33 | } 34 | } 35 | 36 | .ani.flip-out-x { 37 | -webkit-backface-visibility: visible; 38 | backface-visibility: visible; 39 | -webkit-animation-name: flip-out-x; 40 | animation-name: flip-out-x; 41 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/ani/flip-out-y.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | 4 | /** 5 | * @module flip 6 | * @description 定义翻转动画 7 | * @method flip-out-y 8 | */ 9 | @-webkit-keyframes flip-out-y { 10 | 0% { 11 | -webkit-transform: perspective(400px); 12 | } 13 | 30% { 14 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); 15 | opacity: 1; 16 | } 17 | 100% { 18 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 19 | opacity: 0; 20 | } 21 | } 22 | @keyframes flip-out-y { 23 | 0% { 24 | transform: perspective(400px); 25 | } 26 | 30% { 27 | transform: perspective(400px) rotate3d(0, 1, 0, -15deg); 28 | opacity: 1; 29 | } 30 | 100% { 31 | transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 32 | opacity: 0; 33 | } 34 | } 35 | 36 | .ani.flip-out-y { 37 | -webkit-backface-visibility: visible; 38 | backface-visibility: visible; 39 | -webkit-animation-name: flip-out-y; 40 | animation-name: flip-out-y; 41 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/core/classes/_transition.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | /** 3 | * @module Transition 4 | * @description 定义补间 5 | * @method transition 6 | * @version 1.0.0 7 | * @param {String} $transition 取值与原生语法一致 <1.0.0> 8 | */ 9 | @mixin transition($transition...){ 10 | $prefix-properties: transform, transform-origin; 11 | $vendor-list: (); 12 | 13 | @if map-get($setting, is-vendor-prefix) { 14 | @each $vendor in map-get($setting, vendor-prefix) { 15 | @for $i from 1 through length($transition) { 16 | @if index($prefix-properties, nth(nth($transition, $i), 1)) { 17 | $vendor-list: join($vendor-list, #{$vendor}#{nth($transition, $i)}, comma); 18 | } @else { 19 | $vendor-list: join($vendor-list, #{nth($transition, $i)}, comma); 20 | } 21 | } 22 | #{$vendor}transition: $vendor-list; 23 | } 24 | } 25 | 26 | transition: $transition; 27 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/ani/swing.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | 4 | /** 5 | * @module other 6 | * @description 定义晃动动画 7 | * @method swing 8 | */ 9 | @-webkit-keyframes swing { 10 | 20% { 11 | -webkit-transform: rotate3d(0, 0, 1, 15deg); 12 | } 13 | 40% { 14 | -webkit-transform: rotate3d(0, 0, 1, -10deg); 15 | } 16 | 60% { 17 | -webkit-transform: rotate3d(0, 0, 1, 5deg); 18 | } 19 | 80% { 20 | -webkit-transform: rotate3d(0, 0, 1, -5deg); 21 | } 22 | 100% { 23 | -webkit-transform: rotate3d(0, 0, 1, 0deg); 24 | } 25 | } 26 | @keyframes swing { 27 | 20% { 28 | transform: rotate3d(0, 0, 1, 15deg); 29 | } 30 | 40% { 31 | transform: rotate3d(0, 0, 1, -10deg); 32 | } 33 | 60% { 34 | transform: rotate3d(0, 0, 1, 5deg); 35 | } 36 | 80% { 37 | transform: rotate3d(0, 0, 1, -5deg); 38 | } 39 | 100% { 40 | transform: rotate3d(0, 0, 1, 0deg); 41 | } 42 | } 43 | 44 | .ani.swing { 45 | -webkit-animation-name: swing; 46 | animation-name: swing; 47 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gp-15", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "start": "npx gulp -f src/config/gulpfile-dev.js", 8 | "build": "npx gulp -f src/config/gulpfile-build.js", 9 | "test": "echo \"Error: no test specified\" && exit 1" 10 | }, 11 | "keywords": [], 12 | "author": "", 13 | "license": "ISC", 14 | "devDependencies": { 15 | "gulp": "^4.0.2", 16 | "gulp-clean-css": "^4.2.0", 17 | "gulp-connect": "^5.7.0", 18 | "gulp-rev": "^9.0.0", 19 | "gulp-rev-collector": "^1.3.1", 20 | "gulp-sass": "^4.0.2", 21 | "http-proxy-middleware": "^0.20.0", 22 | "node-sass": "^4.12.0", 23 | "webpack-stream": "^5.2.1" 24 | }, 25 | "dependencies": { 26 | "art-template": "^4.13.2", 27 | "art-template-loader": "^1.4.3", 28 | "better-scroll": "^1.15.2", 29 | "css-loader": "^3.2.0", 30 | "lodash": "^4.17.15", 31 | "sass-loader": "^8.0.0", 32 | "string-loader": "0.0.1", 33 | "style-loader": "^1.0.0" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /dev/styles/modules/index.css: -------------------------------------------------------------------------------- 1 | .index-container { 2 | display: flex; 3 | flex-direction: column; 4 | height: 100%; } 5 | .index-container header { 6 | height: .44rem; 7 | background: #00b38a; 8 | font-size: .18rem; 9 | text-align: center; 10 | line-height: .44rem; 11 | color: #fff; } 12 | .index-container main { 13 | flex: 1; 14 | overflow-y: scroll; } 15 | .index-container footer { 16 | height: .44rem; } 17 | .index-container footer ul { 18 | height: 100%; 19 | display: flex; } 20 | .index-container footer ul li { 21 | flex: 1; 22 | background: #f6f6f6; 23 | text-align: center; 24 | line-height: .44rem; 25 | font-size: .18rem; 26 | display: flex; 27 | align-items: center; 28 | justify-content: center; 29 | color: #c2cfcc; } 30 | .index-container footer ul li span { 31 | font-size: .2rem; } 32 | .index-container footer ul li.active { 33 | background: #e7f3f0; 34 | color: #00b38a; } 35 | -------------------------------------------------------------------------------- /src/styles/yo/lib/core/classes/_iconfont.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | /** 3 | * @module 常用方法 4 | * @description 定义字体图标 5 | * @method _iconfont 6 | * @version 1.0.0 7 | * @skip 8 | */ 9 | @mixin iconfont() { 10 | // 是否开启图标字体 11 | @if map-get($ico, is-use) { 12 | @font-face { 13 | font-family: map-get($ico, font-name); 14 | src: 15 | // 现代浏览器 16 | url(#{map-get($ico,font-path)}#{map-get($ico,font-name)}.woff) format("woff"), 17 | // Android2.2+ 18 | url(#{map-get($ico,font-path)}#{map-get($ico,font-name)}.ttf) format("truetype"); 19 | } 20 | .yo-ico { 21 | font-family: map-get($ico, font-name) !important; 22 | font-style: normal; 23 | -webkit-font-smoothing: antialiased; 24 | // PC端chrome有锯齿问题，Mobile不需要 25 | // -webkit-text-stroke-width: .1px; 26 | -moz-osx-font-smoothing: grayscale; 27 | vertical-align: middle; 28 | } 29 | } 30 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/layout/yo-root.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | 3 | // 定义常见根节点布局 4 | @mixin _root { 5 | @include fullscreen; 6 | background-color: map-get($root, bgcolor); 7 | } 8 | 9 | /** 10 | * @module layout 11 | * @method yo-root 12 | * @version 3.0.0 13 | * @description 构造页面中的根节点布局，默认为全屏 14 | * @demo http://ued.qunar.com/hy2/yo/demo/src/html/layout/yo-root.html 15 | * @param {String} $name 定义扩展名称 <3.0.0> 16 | * @param {Color} $bgcolor 指定背景色 <3.0.0> 17 | */ 18 | 19 | @mixin yo-root( 20 | $name: default, 21 | $bgcolor: default) { 22 | // 区别是否新增实例还是修改本身 23 | $name: if($name == default, "", "-#{$name}"); 24 | // 如果值为default，则取config的定义 25 | @if $bgcolor == default { 26 | $bgcolor: map-get($root, bgcolor); 27 | } 28 | .yo-root#{$name} { 29 | // 如果$bgcolor不等于config预设，则重绘背景色 30 | @if $bgcolor != map-get($root, bgcolor) { 31 | background-color: $bgcolor; 32 | } 33 | // 增量扩展 34 | @content; 35 | } 36 | } 37 | 38 | // 调用本文件时载入根节点默认布局基础构造 39 | .yo-root { 40 | @include _root; 41 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/ani/zoom-in-up.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | 4 | /** 5 | * @module zoom 6 | * @description 定义放大上升进入动画 7 | * @method zoom-in-up 8 | */ 9 | @-webkit-keyframes zoom-in-up { 10 | 0% { 11 | opacity: 0; 12 | -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); 13 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 14 | } 15 | 60% { 16 | opacity: 1; 17 | -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 18 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 19 | } 20 | } 21 | @keyframes zoom-in-up { 22 | 0% { 23 | opacity: 0; 24 | transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); 25 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 26 | } 27 | 60% { 28 | opacity: 1; 29 | transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 30 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 31 | } 32 | } 33 | 34 | .ani.zoom-in-up { 35 | -webkit-animation-name: zoom-in-up; 36 | animation-name: zoom-in-up; 37 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/ani/speed-in-left.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | 4 | /** 5 | * @module speed 6 | * @description 定义从左侧快速进入动画 7 | * @method speed-in-left 8 | */ 9 | @-webkit-keyframes speed-in-left { 10 | 0% { 11 | -webkit-transform: translate3d(-100%, 0, 0) skewX(30deg); 12 | opacity: 0; 13 | } 14 | 60% { 15 | -webkit-transform: skewX(-20deg); 16 | opacity: 1; 17 | } 18 | 80% { 19 | -webkit-transform: skewX(5deg); 20 | opacity: 1; 21 | } 22 | 100% { 23 | -webkit-transform: none; 24 | opacity: 1; 25 | } 26 | } 27 | @keyframes speed-in-left { 28 | 0% { 29 | transform: translate3d(-100%, 0, 0) skewX(30deg); 30 | opacity: 0; 31 | } 32 | 60% { 33 | transform: skewX(-20deg); 34 | opacity: 1; 35 | } 36 | 80% { 37 | transform: skewX(5deg); 38 | opacity: 1; 39 | } 40 | 100% { 41 | transform: none; 42 | opacity: 1; 43 | } 44 | } 45 | 46 | .ani.speed-in-left { 47 | -webkit-animation-timing-function: ease-out; 48 | animation-timing-function: ease-out; 49 | -webkit-animation-name: speed-in-left; 50 | animation-name: speed-in-left; 51 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/ani/zoom-in-down.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | 4 | /** 5 | * @module zoom 6 | * @description 定义放大下降进入动画 7 | * @method zoom-in-down 8 | */ 9 | @-webkit-keyframes zoom-in-down { 10 | 0% { 11 | opacity: 0; 12 | -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); 13 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 14 | } 15 | 60% { 16 | opacity: 1; 17 | -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); 18 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 19 | } 20 | } 21 | @keyframes zoom-in-down { 22 | 0% { 23 | opacity: 0; 24 | transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); 25 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 26 | } 27 | 60% { 28 | opacity: 1; 29 | transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); 30 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 31 | } 32 | } 33 | 34 | .ani.zoom-in-down { 35 | -webkit-animation-name: zoom-in-down; 36 | animation-name: zoom-in-down; 37 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/ani/speed-in-right.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | 4 | /** 5 | * @module speed 6 | * @description 定义从右侧快速进入动画 7 | * @method speed-in-right 8 | */ 9 | @-webkit-keyframes speed-in-right { 10 | 0% { 11 | -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); 12 | opacity: 0; 13 | } 14 | 60% { 15 | -webkit-transform: skewX(20deg); 16 | opacity: 1; 17 | } 18 | 80% { 19 | -webkit-transform: skewX(-5deg); 20 | opacity: 1; 21 | } 22 | 100% { 23 | -webkit-transform: none; 24 | opacity: 1; 25 | } 26 | } 27 | @keyframes speed-in-right { 28 | 0% { 29 | transform: translate3d(100%, 0, 0) skewX(-30deg); 30 | opacity: 0; 31 | } 32 | 60% { 33 | transform: skewX(20deg); 34 | opacity: 1; 35 | } 36 | 80% { 37 | transform: skewX(-5deg); 38 | opacity: 1; 39 | } 40 | 100% { 41 | transform: none; 42 | opacity: 1; 43 | } 44 | } 45 | 46 | .ani.speed-in-right { 47 | -webkit-animation-timing-function: ease-out; 48 | animation-timing-function: ease-out; 49 | -webkit-animation-name: speed-in-right; 50 | animation-name: speed-in-right; 51 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/ani/zoom-in-left.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | 4 | /** 5 | * @module speed 6 | * @description 定义从左侧放大进入动画 7 | * @method speed-in-left 8 | */ 9 | @-webkit-keyframes zoom-in-left { 10 | 0% { 11 | opacity: 0; 12 | -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); 13 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 14 | } 15 | 60% { 16 | opacity: 1; 17 | -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); 18 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 19 | } 20 | } 21 | @keyframes zoom-in-left { 22 | 0% { 23 | opacity: 0; 24 | transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); 25 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 26 | } 27 | 60% { 28 | opacity: 1; 29 | transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); 30 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 31 | } 32 | } 33 | 34 | .ani.zoom-in-left { 35 | -webkit-animation-name: zoom-in-left; 36 | animation-name: zoom-in-left; 37 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/ani/zoom-in-right.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | 4 | /** 5 | * @module zoom 6 | * @description 定义从右侧放大进入动画 7 | * @method zoom-in-right 8 | */ 9 | @-webkit-keyframes zoom-in-right { 10 | 0% { 11 | opacity: 0; 12 | -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); 13 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 14 | } 15 | 60% { 16 | opacity: 1; 17 | -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); 18 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 19 | } 20 | } 21 | @keyframes zoom-in-right { 22 | 0% { 23 | opacity: 0; 24 | transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); 25 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 26 | } 27 | 60% { 28 | opacity: 1; 29 | transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); 30 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 31 | } 32 | } 33 | 34 | .ani.zoom-in-right { 35 | -webkit-animation-name: zoom-in-right; 36 | animation-name: zoom-in-right; 37 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/ani/elastic-in-up.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | 4 | /** 5 | * @module elastic 6 | * @description 定义弹性升起动画 7 | * @method elastic-in-up 8 | */ 9 | @-webkit-keyframes elastic-in-up { 10 | 0% { 11 | opacity: 0; 12 | -webkit-transform: translate3d(0, 100%, 0); 13 | } 14 | 60% { 15 | opacity: 1; 16 | -webkit-transform: translate3d(0, -25px, 0); 17 | } 18 | 75% { 19 | -webkit-transform: translate3d(0, 10px, 0); 20 | } 21 | 90% { 22 | -webkit-transform: translate3d(0, -5px, 0); 23 | } 24 | 100% { 25 | -webkit-transform: translate3d(0, 0, 0); 26 | } 27 | } 28 | @keyframes elastic-in-up { 29 | 0% { 30 | opacity: 0; 31 | transform: translate3d(0, 100%, 0); 32 | } 33 | 60% { 34 | opacity: 1; 35 | transform: translate3d(0, -25px, 0); 36 | } 37 | 75% { 38 | transform: translate3d(0, 10px, 0); 39 | } 40 | 90% { 41 | transform: translate3d(0, -5px, 0); 42 | } 43 | 100% { 44 | transform: translate3d(0, 0, 0); 45 | } 46 | } 47 | 48 | .ani.elastic-in-up { 49 | -webkit-animation-name: elastic-in-up; 50 | animation-name: elastic-in-up; 51 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/ani/elastic-in-left.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | 4 | /** 5 | * @module elastic 6 | * @description 定义从左侧弹性进入动画 7 | * @method elastic-in-left 8 | */ 9 | @-webkit-keyframes elastic-in-left { 10 | 0% { 11 | opacity: 0; 12 | -webkit-transform: translate3d(-100%, 0, 0); 13 | } 14 | 60% { 15 | opacity: 1; 16 | -webkit-transform: translate3d(25px, 0, 0); 17 | } 18 | 75% { 19 | -webkit-transform: translate3d(-10px, 0, 0); 20 | } 21 | 90% { 22 | -webkit-transform: translate3d(5px, 0, 0); 23 | } 24 | 100% { 25 | -webkit-transform: translate3d(0, 0, 0); 26 | } 27 | } 28 | @keyframes elastic-in-left { 29 | 0% { 30 | opacity: 0; 31 | transform: translate3d(-100%, 0, 0); 32 | } 33 | 60% { 34 | opacity: 1; 35 | transform: translate3d(25px, 0, 0); 36 | } 37 | 75% { 38 | transform: translate3d(-10px, 0, 0); 39 | } 40 | 90% { 41 | transform: translate3d(5px, 0, 0); 42 | } 43 | 100% { 44 | transform: translate3d(0, 0, 0); 45 | } 46 | } 47 | 48 | .ani.elastic-in-left { 49 | -webkit-animation-name: elastic-in-left; 50 | animation-name: elastic-in-left; 51 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/ani/elastic-in-right.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | 4 | /** 5 | * @module elastic 6 | * @description 定义从右侧弹性进入动画 7 | * @method elastic-in-right 8 | */ 9 | @-webkit-keyframes elastic-in-right { 10 | 0% { 11 | opacity: 0; 12 | -webkit-transform: translate3d(100%, 0, 0); 13 | } 14 | 60% { 15 | opacity: 1; 16 | -webkit-transform: translate3d(-25px, 0, 0); 17 | } 18 | 75% { 19 | -webkit-transform: translate3d(10px, 0, 0); 20 | } 21 | 90% { 22 | -webkit-transform: translate3d(-5px, 0, 0); 23 | } 24 | 100% { 25 | -webkit-transform: translate3d(0, 0, 0); 26 | } 27 | } 28 | @keyframes elastic-in-right { 29 | 0% { 30 | opacity: 0; 31 | transform: translate3d(100%, 0, 0); 32 | } 33 | 60% { 34 | opacity: 1; 35 | transform: translate3d(-25px, 0, 0); 36 | } 37 | 75% { 38 | transform: translate3d(10px, 0, 0); 39 | } 40 | 90% { 41 | transform: translate3d(-5px, 0, 0); 42 | } 43 | 100% { 44 | transform: translate3d(0, 0, 0); 45 | } 46 | } 47 | 48 | .ani.elastic-in-right { 49 | -webkit-animation-name: elastic-in-right; 50 | animation-name: elastic-in-right; 51 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/ani/zoom-out-up.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | 4 | /** 5 | * @module zoom 6 | * @description 定义上升缩小退出动画 7 | * @method zoom-out-up 8 | */ 9 | @-webkit-keyframes zoom-out-up { 10 | 40% { 11 | opacity: 1; 12 | -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); 13 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 14 | } 15 | 100% { 16 | opacity: 0; 17 | -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); 18 | -webkit-transform-origin: center bottom; 19 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 20 | } 21 | } 22 | @keyframes zoom-out-up { 23 | 40% { 24 | opacity: 1; 25 | transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); 26 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 27 | } 28 | 100% { 29 | opacity: 0; 30 | transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); 31 | transform-origin: center bottom; 32 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 33 | } 34 | } 35 | 36 | .ani.zoom-out-up { 37 | -webkit-animation-name: zoom-out-up; 38 | animation-name: zoom-out-up; 39 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/ani/elastic-x.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | 4 | /** 5 | * @module elastic 6 | * @description 定义X轴弹性动画 7 | * @method elastic-x 8 | */ 9 | @-webkit-keyframes elastic-x { 10 | 0%, 11 | 20%, 12 | 100% { 13 | -webkit-transform: translate3d(0, 0, 0); 14 | } 15 | 30% { 16 | -webkit-transform: translate3d(20px, 0, 0); 17 | } 18 | 50% { 19 | -webkit-transform: translate3d(-20px, 0, 0); 20 | } 21 | 65% { 22 | -webkit-transform: translate3d(10px, 0, 0); 23 | } 24 | 80% { 25 | -webkit-transform: translate3d(-10px, 0, 0); 26 | } 27 | 90% { 28 | -webkit-transform: translate3d(5px, 0, 0); 29 | } 30 | } 31 | @keyframes elastic-x { 32 | 0%, 33 | 20%, 34 | 100% { 35 | transform: translate3d(0, 0, 0); 36 | } 37 | 30% { 38 | transform: translate3d(20px, 0, 0); 39 | } 40 | 50% { 41 | transform: translate3d(-20px, 0, 0); 42 | } 43 | 65% { 44 | transform: translate3d(10px, 0, 0); 45 | } 46 | 80% { 47 | transform: translate3d(-10px, 0, 0); 48 | } 49 | 90% { 50 | transform: translate3d(5px, 0, 0); 51 | } 52 | } 53 | 54 | .ani.elastic-x { 55 | -webkit-animation-name: elastic-x; 56 | animation-name: elastic-x; 57 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/ani/elastic-y.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | 4 | /** 5 | * @module elastic 6 | * @description 定义Y轴弹性动画 7 | * @method elastic-y 8 | */ 9 | @-webkit-keyframes elastic-y { 10 | 0%, 11 | 20%, 12 | 100% { 13 | -webkit-transform: translate3d(0, 0, 0); 14 | } 15 | 30% { 16 | -webkit-transform: translate3d(0, 20px, 0); 17 | } 18 | 50% { 19 | -webkit-transform: translate3d(0, -20px, 0); 20 | } 21 | 65% { 22 | -webkit-transform: translate3d(0, 10px, 0); 23 | } 24 | 80% { 25 | -webkit-transform: translate3d(0, -10px, 0); 26 | } 27 | 90% { 28 | -webkit-transform: translate3d(0, 5px, 0); 29 | } 30 | } 31 | @keyframes elastic-y { 32 | 0%, 33 | 20%, 34 | 100% { 35 | transform: translate3d(0, 0, 0); 36 | } 37 | 30% { 38 | transform: translate3d(0, 20px, 0); 39 | } 40 | 50% { 41 | transform: translate3d(0, -20px, 0); 42 | } 43 | 65% { 44 | transform: translate3d(0, 10px, 0); 45 | } 46 | 80% { 47 | transform: translate3d(0, -10px, 0); 48 | } 49 | 90% { 50 | transform: translate3d(0, 5px, 0); 51 | } 52 | } 53 | 54 | .ani.elastic-y { 55 | -webkit-animation-name: elastic-y; 56 | animation-name: elastic-y; 57 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/ani/zoom-out-down.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | 4 | /** 5 | * @module zoom 6 | * @description 定义下降缩小退出动画 7 | * @method zoom-out-down 8 | */ 9 | @-webkit-keyframes zoom-out-down { 10 | 40% { 11 | opacity: 1; 12 | -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 13 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 14 | } 15 | 100% { 16 | opacity: 0; 17 | -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); 18 | -webkit-transform-origin: center bottom; 19 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 20 | } 21 | } 22 | @keyframes zoom-out-down { 23 | 40% { 24 | opacity: 1; 25 | transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 26 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 27 | } 28 | 100% { 29 | opacity: 0; 30 | transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); 31 | transform-origin: center bottom; 32 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 33 | } 34 | } 35 | 36 | .ani.zoom-out-down { 37 | -webkit-animation-name: zoom-out-down; 38 | animation-name: zoom-out-down; 39 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/core/classes/_user-interface.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | /** 3 | * @module 用户界面 4 | * @description 定义使用何种滤镜 5 | * @method filter 6 | * @version 1.7.0 7 | * @param {String} $filter 取值与`filter`属性一致 <1.7.0> 8 | */ 9 | @mixin filter($filter...) { 10 | @include prefix(filter, $filter); 11 | } 12 | 13 | /** 14 | * @module 用户界面 15 | * @description 定义UA默认外观 16 | * @method appearance 17 | * @version 1.0.0 18 | * @param {String} $appearance 取值与`appearance`属性一致，默认值：none <1.0.0> 19 | */ 20 | @mixin appearance($appearance: none) { 21 | @include prefix(appearance, $appearance); 22 | } 23 | 24 | /** 25 | * @module 用户界面 26 | * @description 定义如何选中内容 27 | * @method user-select 28 | * @version 1.0.0 29 | * @param {String} $user-select 取值与`user-select`属性一致，默认值：none <1.0.0> 30 | */ 31 | @mixin user-select($user-select: none) { 32 | @include prefix(user-select, $user-select); 33 | } 34 | 35 | /** 36 | * @module 用户界面 37 | * @description 定义盒模型 38 | * @method box-sizing 39 | * @version 1.0.0 40 | * @param {String} $box-sizing 指定盒模型类型，取值与`box-sizing`属性一致，默认值：border-box <1.0.0> 41 | */ 42 | @mixin box-sizing($box-sizing: border-box) { 43 | @include prefix(box-sizing, $box-sizing); 44 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/layout/yo-column.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | 3 | // 定义常见横向弹性布局 4 | @mixin _column { 5 | @include flexbox; 6 | @if map-get($column, size) == cover { 7 | @include fullscreen; 8 | } 9 | > .item { 10 | display: block; 11 | } 12 | > .flex { 13 | @include flex; 14 | } 15 | } 16 | 17 | /** 18 | * @module layout 19 | * @method yo-column 20 | * @version 3.0.0 21 | * @description 构造弹性布局使用方法，可以是横向和纵向 22 | * @demo http://ued.qunar.com/hy2/yo/demo/src/html/layout/yo-column.html 23 | * @param {String} $name 定义扩展名称 <3.0.0> 24 | * @param {String} $size 指定容器的大小，取值：[auto|cover] <3.0.0> 25 | */ 26 | 27 | @mixin yo-column( 28 | $name: default, 29 | $size: default) { 30 | // 区别是否新增实例还是修改本身 31 | $name: if($name == default, "", "-#{$name}"); 32 | // 如果值为default，则取config的定义 33 | @if $size == default { 34 | $size: map-get($column, size); 35 | } 36 | .yo-column#{$name} { 37 | @if $size != map-get($column, size) and $size == cover { 38 | @include fullscreen; 39 | } 40 | // 增量扩展 41 | @content; 42 | } 43 | } 44 | 45 | // 调用本文件时载入弹性布局基础构造 46 | .yo-column { 47 | @include _column; 48 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/ani/sling.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | 4 | /** 5 | * @module other 6 | * @description 定义吊索动画 7 | * @method sling 8 | */ 9 | @-webkit-keyframes sling { 10 | 0% { 11 | -webkit-transform: scale3d(1, 1, 1); 12 | } 13 | 10%, 14 | 20% { 15 | -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); 16 | } 17 | 30%, 18 | 50%, 19 | 70%, 20 | 90% { 21 | -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); 22 | } 23 | 40%, 24 | 60%, 25 | 80% { 26 | -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); 27 | } 28 | 100% { 29 | -webkit-transform: scale3d(1, 1, 1); 30 | } 31 | } 32 | @keyframes sling { 33 | 0% { 34 | transform: scale3d(1, 1, 1); 35 | } 36 | 10%, 37 | 20% { 38 | transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); 39 | } 40 | 30%, 41 | 50%, 42 | 70%, 43 | 90% { 44 | transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); 45 | } 46 | 40%, 47 | 60%, 48 | 80% { 49 | transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); 50 | } 51 | 100% { 52 | transform: scale3d(1, 1, 1); 53 | } 54 | } 55 | 56 | .ani.sling { 57 | -webkit-animation-name: sling; 58 | animation-name: sling; 59 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/ani/stretch.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | 4 | /** 5 | * @module other 6 | * @description 定义橡皮圈拉伸回弹动画 7 | * @method stretch 8 | */ 9 | @-webkit-keyframes stretch { 10 | 0% { 11 | -webkit-transform: scale3d(1, 1, 1); 12 | } 13 | 30% { 14 | -webkit-transform: scale3d(1.25, .75, 1); 15 | } 16 | 40% { 17 | -webkit-transform: scale3d(.75, 1.25, 1); 18 | } 19 | 50% { 20 | -webkit-transform: scale3d(1.15, .85, 1); 21 | } 22 | 65% { 23 | -webkit-transform: scale3d(.95, 1.05, 1); 24 | } 25 | 75% { 26 | -webkit-transform: scale3d(1.05, .95, 1); 27 | } 28 | 100% { 29 | -webkit-transform: scale3d(1, 1, 1); 30 | } 31 | } 32 | @keyframes stretch { 33 | 0% { 34 | transform: scale3d(1, 1, 1); 35 | } 36 | 30% { 37 | transform: scale3d(1.25, .75, 1); 38 | } 39 | 40% { 40 | transform: scale3d(.75, 1.25, 1); 41 | } 42 | 50% { 43 | transform: scale3d(1.15, .85, 1); 44 | } 45 | 65% { 46 | transform: scale3d(.95, 1.05, 1); 47 | } 48 | 75% { 49 | transform: scale3d(1.05, .95, 1); 50 | } 51 | 100% { 52 | transform: scale3d(1, 1, 1); 53 | } 54 | } 55 | 56 | .ani.stretch { 57 | -webkit-animation-name: stretch; 58 | animation-name: stretch; 59 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/ani/extrusion.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | 4 | /** 5 | * @module other 6 | * @description 定义橡皮圈挤压回弹动画 7 | * @method extrusion 8 | */ 9 | @-webkit-keyframes extrusion { 10 | 0% { 11 | -webkit-transform: scale3d(1, 1, 1); 12 | } 13 | 30% { 14 | -webkit-transform: scale3d(.65, 1.35, 1); 15 | } 16 | 40% { 17 | -webkit-transform: scale3d(1.35, .65, 1); 18 | } 19 | 50% { 20 | -webkit-transform: scale3d(.85, 1.15, 1); 21 | } 22 | 65% { 23 | -webkit-transform: scale3d(1.05, .95, 1); 24 | } 25 | 75% { 26 | -webkit-transform: scale3d(.95, 1.05, 1); 27 | } 28 | 100% { 29 | -webkit-transform: scale3d(1, 1, 1); 30 | } 31 | } 32 | @keyframes extrusion { 33 | 0% { 34 | transform: scale3d(1, 1, 1); 35 | } 36 | 30% { 37 | transform: scale3d(.65, 1.35, 1); 38 | } 39 | 40% { 40 | transform: scale3d(1.35, .65, 1); 41 | } 42 | 50% { 43 | transform: scale3d(.85, 1.15, 1); 44 | } 45 | 65% { 46 | transform: scale3d(1.05, .95, 1); 47 | } 48 | 75% { 49 | transform: scale3d(.95, 1.05, 1); 50 | } 51 | 100% { 52 | transform: scale3d(1, 1, 1); 53 | } 54 | } 55 | 56 | .ani.extrusion { 57 | -webkit-animation-name: extrusion; 58 | animation-name: extrusion; 59 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/ani/elastic-in.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | 4 | /** 5 | * @module elastic 6 | * @description 定义弹性进入动画 7 | * @method elastic-in 8 | */ 9 | @-webkit-keyframes elastic-in { 10 | 0% { 11 | opacity: 0; 12 | -webkit-transform: scale3d(.3, .3, .3); 13 | } 14 | 20% { 15 | -webkit-transform: scale3d(1.1, 1.1, 1.1); 16 | } 17 | 40% { 18 | -webkit-transform: scale3d(.9, .9, .9); 19 | } 20 | 60% { 21 | opacity: 1; 22 | -webkit-transform: scale3d(1.03, 1.03, 1.03); 23 | } 24 | 80% { 25 | -webkit-transform: scale3d(.97, .97, .97); 26 | } 27 | 100% { 28 | opacity: 1; 29 | -webkit-transform: scale3d(1, 1, 1); 30 | } 31 | } 32 | @keyframes elastic-in { 33 | 0% { 34 | opacity: 0; 35 | transform: scale3d(.3, .3, .3); 36 | } 37 | 20% { 38 | transform: scale3d(1.1, 1.1, 1.1); 39 | } 40 | 40% { 41 | transform: scale3d(.9, .9, .9); 42 | } 43 | 60% { 44 | opacity: 1; 45 | transform: scale3d(1.03, 1.03, 1.03); 46 | } 47 | 80% { 48 | transform: scale3d(.97, .97, .97); 49 | } 50 | 100% { 51 | opacity: 1; 52 | transform: scale3d(1, 1, 1); 53 | } 54 | } 55 | 56 | .ani.elastic-in { 57 | -webkit-animation-name: elastic-in; 58 | animation-name: elastic-in; 59 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/ani/elastic-in-down.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | 4 | /** 5 | * @module elastic 6 | * @description 定义弹性下落动画 7 | * @method elastic-in-down 8 | * @demo http://ued.qunar.com/mobile/yo/demo/animate/ani-text.html 9 | * @example
    该元素将会被应用elastic-in-down动画
    10 | */ 11 | @-webkit-keyframes elastic-in-down { 12 | 0% { 13 | opacity: 0; 14 | -webkit-transform: translate3d(0, -100%, 0); 15 | } 16 | 60% { 17 | opacity: 1; 18 | -webkit-transform: translate3d(0, 25px, 0); 19 | } 20 | 75% { 21 | -webkit-transform: translate3d(0, -10px, 0); 22 | } 23 | 90% { 24 | -webkit-transform: translate3d(0, 5px, 0); 25 | } 26 | 100% { 27 | -webkit-transform: translate3d(0, 0, 0); 28 | } 29 | } 30 | @keyframes elastic-in-down { 31 | 0% { 32 | opacity: 0; 33 | transform: translate3d(0, -100%, 0); 34 | } 35 | 60% { 36 | opacity: 1; 37 | transform: translate3d(0, 25px, 0); 38 | } 39 | 75% { 40 | transform: translate3d(0, -10px, 0); 41 | } 42 | 90% { 43 | transform: translate3d(0, 5px, 0); 44 | } 45 | 100% { 46 | transform: translate3d(0, 0, 0); 47 | } 48 | } 49 | 50 | .ani.elastic-in-down { 51 | -webkit-animation-name: elastic-in-down; 52 | animation-name: elastic-in-down; 53 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/ani/flip.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | 4 | /** 5 | * @module flip 6 | * @description 定义翻转动画 7 | * @method flip 8 | */ 9 | @-webkit-keyframes flip { 10 | 0% { 11 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); 12 | } 13 | 40% { 14 | -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); 15 | } 16 | 50% { 17 | -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); 18 | } 19 | 80% { 20 | -webkit-transform: perspective(400px) scale3d(.9, .9, .9); 21 | } 22 | 100% { 23 | -webkit-transform: perspective(400px); 24 | } 25 | } 26 | @keyframes flip { 27 | 0% { 28 | transform: perspective(400px) rotate3d(0, 1, 0, -360deg); 29 | } 30 | 40% { 31 | transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); 32 | } 33 | 50% { 34 | transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); 35 | } 36 | 80% { 37 | transform: perspective(400px) scale3d(.9, .9, .9); 38 | } 39 | 100% { 40 | transform: perspective(400px); 41 | } 42 | } 43 | 44 | .ani.flip { 45 | -webkit-backface-visibility: visible; 46 | backface-visibility: visible; 47 | -webkit-animation-name: flip; 48 | animation-name: flip; 49 | } -------------------------------------------------------------------------------- /note.txt: -------------------------------------------------------------------------------- 1 | http://aui.github.io/art-template/docs/api.html 2 | 3 | -- art-template + webpack 4 | 1、npm i art-template art-template-loader 5 | 2、配置 6 | module: { 7 | rules: [ 8 | { 9 | test: /\.art$/, 10 | loader: "art-template-loader" 11 | } 12 | ] 13 | } 14 | 3、使用 15 | const layoutView = require('./views/layout.art') 16 | 17 | console.log(layoutView({ 18 | name: 'yangli' 19 | })) 20 | 21 | 2019-09-29 22 | RMVC: 23 | R-Router 24 | M-Model 25 | V-View 26 | C-Controller 27 | 28 | 适配方案： 29 | 100%布局 30 | rem: 单位 root(html) em 31 | 32 | filezilla 33 | 34 | DPR: device pixel radio 逻辑像素/物理像素 35 | retina 屏 36 | 37 | http://ustbhuangyi.github.io/better-scroll/doc/api.html 38 | 39 | 2019-10-08 40 | M站： 41 | 0、架构 42 | - 前后端分离 43 | - RMVC 44 | - art-template 45 | 46 | 1、工程化： gulp 47 | - v4.x 48 | - webserver: gulp-connect 49 | - packcss: gulp-sass, node-sass 50 | - packjs: gulp-webstream 51 | 52 | 2、移动端布局 53 | - 100%布局：flexbox 54 | - yo 55 | - 1px border 56 | 57 | 3、第三方库 58 | - better-scroll 59 | - zepto 60 | 61 | 4、路由 62 | 63 | 64 | // hello-there kebab-case 65 | // helloThere camelCase 66 | // HelloThere pascalCase 67 | 68 | insomina 69 | 70 | 71 | 2019-10-09 72 | 1. 100%布局（流式布局） 73 | 2. Rem布局（等比缩放布局） 74 | 3. 响应式布局 75 | 76 | 2019-10-10 77 | browser-sync 78 | 79 | browser-sync start -s -f **/* --directory 80 | 81 | https://www.bootcdn.cn/jquery/ 82 | 83 | 单页面应用(single page application): SPA 84 | 多页面应用(multiple page application): MPA -------------------------------------------------------------------------------- /src/styles/yo/lib/ani/wobble.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | 4 | /** 5 | * @module other 6 | * @description 定义摆动动画 7 | * @method wobble 8 | */ 9 | @-webkit-keyframes wobble { 10 | 0% { 11 | -webkit-transform: none; 12 | } 13 | 15% { 14 | -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); 15 | } 16 | 30% { 17 | -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); 18 | } 19 | 45% { 20 | -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); 21 | } 22 | 60% { 23 | -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); 24 | } 25 | 75% { 26 | -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); 27 | } 28 | 100% { 29 | -webkit-transform: none; 30 | } 31 | } 32 | @keyframes wobble { 33 | 0% { 34 | transform: none; 35 | } 36 | 15% { 37 | transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); 38 | } 39 | 30% { 40 | transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); 41 | } 42 | 45% { 43 | transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); 44 | } 45 | 60% { 46 | transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); 47 | } 48 | 75% { 49 | transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); 50 | } 51 | 100% { 52 | transform: none; 53 | } 54 | } 55 | 56 | .ani.wobble { 57 | -webkit-animation-name: wobble; 58 | animation-name: wobble; 59 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/ani/hinge.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | 4 | /** 5 | * @module other 6 | * @description 定义悬挂动画 7 | * @method hinge 8 | */ 9 | @-webkit-keyframes hinge { 10 | 0% { 11 | -webkit-transform-origin: top left; 12 | -webkit-animation-timing-function: ease-in-out; 13 | } 14 | 20%, 15 | 60% { 16 | -webkit-transform: rotate3d(0, 0, 1, 80deg); 17 | -webkit-transform-origin: top left; 18 | -webkit-animation-timing-function: ease-in-out; 19 | } 20 | 40%, 21 | 80% { 22 | -webkit-transform: rotate3d(0, 0, 1, 60deg); 23 | -webkit-transform-origin: top left; 24 | -webkit-animation-timing-function: ease-in-out; 25 | opacity: 1; 26 | } 27 | 100% { 28 | -webkit-transform: translate3d(0, 700px, 0); 29 | opacity: 0; 30 | } 31 | } 32 | @keyframes hinge { 33 | 0% { 34 | transform-origin: top left; 35 | animation-timing-function: ease-in-out; 36 | } 37 | 20%, 38 | 60% { 39 | transform: rotate3d(0, 0, 1, 80deg); 40 | transform-origin: top left; 41 | animation-timing-function: ease-in-out; 42 | } 43 | 40%, 44 | 80% { 45 | transform: rotate3d(0, 0, 1, 60deg); 46 | transform-origin: top left; 47 | animation-timing-function: ease-in-out; 48 | opacity: 1; 49 | } 50 | 100% { 51 | transform: translate3d(0, 700px, 0); 52 | opacity: 0; 53 | } 54 | } 55 | 56 | .ani.hinge { 57 | -webkit-animation-duration: 2s; 58 | animation-duration: 2s; 59 | -webkit-animation-name: hinge; 60 | animation-name: hinge; 61 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/ani/flip-in-x.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | 4 | /** 5 | * @module flip 6 | * @description 定义翻转动画 7 | * @method flip-in-x 8 | */ 9 | @-webkit-keyframes flip-in-x { 10 | 0% { 11 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 12 | -webkit-transition-timing-function: ease-in; 13 | opacity: 0; 14 | } 15 | 40% { 16 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 17 | -webkit-transition-timing-function: ease-in; 18 | } 19 | 60% { 20 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); 21 | opacity: 1; 22 | } 23 | 80% { 24 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); 25 | } 26 | 100% { 27 | -webkit-transform: perspective(400px); 28 | } 29 | } 30 | @keyframes flip-in-x { 31 | 0% { 32 | transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 33 | transition-timing-function: ease-in; 34 | opacity: 0; 35 | } 36 | 40% { 37 | transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 38 | transition-timing-function: ease-in; 39 | } 40 | 60% { 41 | transform: perspective(400px) rotate3d(1, 0, 0, 10deg); 42 | opacity: 1; 43 | } 44 | 80% { 45 | transform: perspective(400px) rotate3d(1, 0, 0, -5deg); 46 | } 47 | 100% { 48 | transform: perspective(400px); 49 | } 50 | } 51 | 52 | .ani.flip-in-x { 53 | -webkit-backface-visibility: visible; 54 | backface-visibility: visible; 55 | -webkit-animation-name: flip-in-x; 56 | animation-name: flip-in-x; 57 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/ani/flip-in-y.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "classes"; 3 | 4 | /** 5 | * @module flip 6 | * @description 定义翻转动画 7 | * @method flip-in-y 8 | */ 9 | @-webkit-keyframes flip-in-y { 10 | 0% { 11 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 12 | -webkit-transition-timing-function: ease-in; 13 | opacity: 0; 14 | } 15 | 40% { 16 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); 17 | -webkit-transition-timing-function: ease-in; 18 | } 19 | 60% { 20 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); 21 | opacity: 1; 22 | } 23 | 80% { 24 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); 25 | } 26 | 100% { 27 | -webkit-transform: perspective(400px); 28 | } 29 | } 30 | @keyframes flip-in-y { 31 | 0% { 32 | transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 33 | transition-timing-function: ease-in; 34 | opacity: 0; 35 | } 36 | 40% { 37 | transform: perspective(400px) rotate3d(0, 1, 0, -20deg); 38 | transition-timing-function: ease-in; 39 | } 40 | 60% { 41 | transform: perspective(400px) rotate3d(0, 1, 0, 10deg); 42 | opacity: 1; 43 | } 44 | 80% { 45 | transform: perspective(400px) rotate3d(0, 1, 0, -5deg); 46 | } 47 | 100% { 48 | transform: perspective(400px); 49 | } 50 | } 51 | 52 | .ani.flip-in-y { 53 | -webkit-backface-visibility: visible; 54 | backface-visibility: visible; 55 | -webkit-animation-name: flip-in-y; 56 | animation-name: flip-in-y; 57 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/layout/yo-align.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | 3 | // 定义常见水平垂直居中布局 4 | @mixin _align { 5 | @include align; 6 | @include fullscreen; 7 | } 8 | 9 | /** 10 | * @module layout 11 | * @method yo-align 12 | * @version 3.0.0 13 | * @description 构造弹性布局内容对齐使用方法，可以是横向和纵向 14 | * @demo http://ued.qunar.com/hy2/yo/demo/src/html/layout/yo-align.html 15 | * @param {String} $name 定义扩展名称 <3.0.0> 16 | * @param {String} $justify-content 指定主轴对齐方式 <3.0.0> 17 | * @param {String} $align-items 指定侧轴对齐方式 <3.0.0> 18 | */ 19 | 20 | @mixin yo-align( 21 | $name: default, 22 | $justify-content: default, 23 | $align-items: default) { 24 | // 区别是否新增实例还是修改本身 25 | $name: if($name == default, "", "-#{$name}"); 26 | // 如果值为default，则取config的定义 27 | @if $justify-content == default { 28 | $justify-content: map-get($align, justify-content); 29 | } 30 | @if $align-items == default { 31 | $align-items: map-get($align, align-items); 32 | } 33 | .yo-align#{$name} { 34 | // 如果$justify-content:不等于config预设，则重绘弹性盒水平对齐方式 35 | @if $justify-content != map-get($align, justify-content) { 36 | @include justify-content($justify-content); 37 | } 38 | // 如果$align-items不等于config预设，则重绘弹性盒垂直对齐方式 39 | @if $align-items != map-get($align, align-items) { 40 | @include align-items($align-items); 41 | } 42 | // 增量扩展 43 | @content; 44 | } 45 | } 46 | 47 | // 调用本文件时载入弹性布局基础构造 48 | .yo-align { 49 | @include _align; 50 | } -------------------------------------------------------------------------------- /src/scripts/router/index.js: -------------------------------------------------------------------------------- 1 | // 显示layout 2 | import indexController from '../controllers/' 3 | 4 | import positionController from '../controllers/positions' 5 | import searchController from '../controllers/search' 6 | import profileController from '../controllers/profile' 7 | import detailController from '../controllers/detail' 8 | 9 | class Router { 10 | constructor() { 11 | this.render() 12 | } 13 | 14 | render() { 15 | window.addEventListener('load', this.handlePageload.bind(this)) 16 | window.addEventListener('hashchange', this.handleHashchange.bind(this)) 17 | } 18 | 19 | setActiveClass(hash) { 20 | $(`footer li[data-to=${hash}]`).addClass('active').siblings().removeClass('active') 21 | } 22 | 23 | renderDOM(hash) { 24 | let pageControllers = { 25 | positionController, 26 | searchController, 27 | profileController, 28 | detailController 29 | } 30 | 31 | pageControllers[hash + 'Controller'].render() 32 | } 33 | 34 | handlePageload() { 35 | let hash = location.hash.substr(1) || 'position' 36 | let reg = new RegExp('^(\\w+)', 'g') 37 | let path = reg.exec(hash) 38 | 39 | indexController.render() 40 | location.hash = hash 41 | 42 | // 初始化的时候也需要渲染DOM和设置高亮 43 | this.renderDOM(path[1]) 44 | this.setActiveClass(path[1]) 45 | } 46 | 47 | handleHashchange(e) { 48 | let hash = location.hash.substr(1) 49 | let reg = new RegExp('^(\\w+)', 'g') 50 | let path = reg.exec(hash) 51 | 52 | // 渲染DOM 53 | this.renderDOM(path[1]) 54 | // 设置高亮 55 | this.setActiveClass(path[1]) 56 | } 57 | } 58 | 59 | new Router() 60 | 61 | 62 | // // 初始化第一个页面 63 | // positionController.render() -------------------------------------------------------------------------------- /src/styles/yo/lib/core/base.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | /** 3 | * Yo框架全局base定义 4 | * 本文件与variables不同地方在于，这里所定义的map可以使用在variables和任何地方 5 | * 本文件中map使用"_"开头，extra中不使用"_" 6 | * base ⇌ extra 7 | */ 8 | 9 | // base 10 | $_base: ( 11 | // root字号类型：normal | scaling 12 | // normal表示root字号使用 `font-size-root` 13 | // scaling表示root字号使用 `font-size-root-scaling` 14 | responsive-type: normal, 15 | // html root使用100px，方便rem单位的换算 16 | font-size-root: 100px, 17 | // 适配：用于做元素随屏幕大小而变化的情况 18 | font-size-root-scaling: 31.25vw, 19 | // body的默认字号（文档基准字号） 20 | // chrome37-45/opera24-33在body上使用rem时有个bug（其他版本未测），后续版本已被修复: 21 | // 只要引用了外部样式，不论里面的内容是什么，body上的rem就会失效 22 | // 这时在开发者工具里，关闭又开启一次该条属性，则生效，刷新又挂 23 | // 由于body是html的子元素，所以对于body来讲，此时rem与em的效果是相同的 24 | font-size: .14em, 25 | // font-family 26 | font-family: #{"Helvetica Neue", Helvetica, STHeiTi, sans-serif}, 27 | // lin-height 28 | line-height: 1.5, 29 | // 默认文档背景色 30 | doc-bgcolor: #eee, 31 | // 默认边框色 32 | border-color: #ccc, 33 | // 默认次级边框色 34 | sub-border-color: #ddd, 35 | // 默认背景颜色 36 | bgcolor: #fafafa, 37 | // 默认文本颜色 38 | color: #212121, 39 | // 默认次级文本颜色 40 | sub-color: #666, 41 | // 默认边框色 42 | disabled-border-color:#ccc, 43 | // 默认文档颜色 44 | disabled-bgcolor: #e0e0e0, 45 | // 默认禁用文本颜色 46 | disabled-color: #bbb, 47 | // 主色调，高亮色，点亮色，反转色 48 | light-color: #00bcd4, 49 | // 价格颜色 50 | price-color: #f60, 51 | // 默认链接色 52 | link-color: #00afc7, 53 | // 链接经过色 54 | link-hover-color: #f60 55 | ); -------------------------------------------------------------------------------- /src/styles/yo/lib/core/classes/_text.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | /** 3 | * @module 文本 4 | * @description 链接处理方法 5 | * @method link 6 | * @version 1.0.0 7 | * @param {Color} $color 定义链接颜色 <1.0.0> 8 | */ 9 | @mixin link($color: map-get($base, link-color)) { 10 | color: $color; 11 | cursor: pointer; 12 | &:active { 13 | opacity: .5; 14 | } 15 | } 16 | 17 | /** 18 | * @module 文本 19 | * @description 文本碰到边界是否换行 20 | * @method wrap 21 | * @version 1.0.0 22 | * @param {Boolean} $is-wrap 定义文本是否换行，默认值：true <2.0.0> 23 | */ 24 | @mixin wrap($is-wrap: true) { 25 | @if $is-wrap == true { 26 | word-wrap: break-word; 27 | word-break: break-all; 28 | } @else { 29 | white-space: nowrap; 30 | } 31 | } 32 | 33 | /** 34 | * @module 文本 35 | * @description 单行文本溢出时显示省略号 36 | * @method ellipsis 37 | * @version 1.0.0 38 | * @param {Length} $width 定义容器的宽度，默认值：null <2.0.0> 39 | * @param {Integer} $line-clamp 定义需要显示的行数，默认值：1（即使用单行溢出的处理方案），需要注意的是本参数只支持webkit内核 <2.1.2> 40 | */ 41 | @mixin ellipsis($width: null, $line-clamp: 1) { 42 | overflow: hidden; 43 | text-overflow: ellipsis; 44 | width: $width; 45 | @if abs($line-clamp) > 1 { 46 | // 要使得多行截取生效，display的值只能为-webkit-box 47 | display: -webkit-box !important; 48 | -webkit-line-clamp: $line-clamp; 49 | @include flex-direction(column); 50 | @include wrap; 51 | } @else { 52 | @include wrap(false); 53 | } 54 | } 55 | 56 | /** 57 | * @module 文本 58 | * @description 文字隐藏方案 59 | * @method texthide 60 | * @version 1.0.0 61 | * @param {Length} $width 定义容器的宽度，默认值：null <2.0.0> 62 | */ 63 | @mixin texthide($width: null) { 64 | overflow: hidden; 65 | white-space: nowrap; 66 | text-indent: 100%; 67 | width: $width; 68 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/fragment/yo-popup.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "yo-modal"; 3 | @import "yo-header"; 4 | 5 | // 定义popup的基础构造 6 | @mixin _popup { 7 | @include flexbox; 8 | @include flex-direction(column); 9 | width: 100%; 10 | height: map-get($popup, height); 11 | background-color: map-get($popup, bgcolor); 12 | @include yo-header( 13 | $height: .4rem, 14 | $border-width: 1px 0 0, 15 | $border-color: map-get($popup, border-color), 16 | $bgcolor: map-get($popup, hd-bgcolor), 17 | $color: map-get($base, color), 18 | $item-color: map-get($popup, btn-color), 19 | $item-ico-color: map-get($base, color), 20 | $font-size: .16rem 21 | ) { 22 | > .title { 23 | font-weight: normal; 24 | } 25 | } 26 | } 27 | 28 | /** 29 | * @module fragment 30 | * @method yo-popup 31 | * @version 3.0.2 32 | * @description 浮层的自定义使用方法 33 | * @demo http://ued.qunar.com/hy2/yo/demo/src/html/fragment/yo-popup.html 34 | * @param {String} $name 定义扩展名称 <3.0.2> 35 | * @param {Length} $height 高度 <3.0.2> 36 | * @param {Color} $bgcolor 背景色 <3.0.2> 37 | */ 38 | 39 | @mixin yo-popup( 40 | $name: default, 41 | $height: default, 42 | $bgcolor: default) { 43 | // 区别是否新增实例还是修改本身 44 | $name: if($name == default, "", "-#{$name}"); 45 | // 如果值为default，则取config的定义 46 | @if $height == default { 47 | $height: map-get($popup, height); 48 | } 49 | @if $bgcolor == default { 50 | $bgcolor: map-get($popup, bgcolor); 51 | } 52 | 53 | .yo-popup#{$name} { 54 | @if $height != map-get($popup, height) { 55 | height: $height; 56 | } 57 | @if $bgcolor != map-get($popup, bgcolor) { 58 | background-color: $bgcolor; 59 | } 60 | 61 | // 增量扩展 62 | @content; 63 | } 64 | } 65 | 66 | // 调用本文件时载入popup基础构造 67 | .yo-popup { 68 | @include _popup; 69 | } -------------------------------------------------------------------------------- /src/config/gulpfile-build.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const { src, dest, series, parallel} = require('gulp') 3 | const sass = require('gulp-sass') 4 | const webpack = require('webpack-stream') 5 | const cleanCSS = require('gulp-clean-css') 6 | 7 | const rev = require('gulp-rev') 8 | const revCollector = require('gulp-rev-collector') 9 | 10 | const buildPath = '../../build' 11 | 12 | // copyhtml 13 | function copyhtml() { 14 | return src([`${buildPath}/rev/**/*.json`, '../*.html']) 15 | .pipe(revCollector()) 16 | .pipe(dest(buildPath)) 17 | } 18 | 19 | // copylibs 20 | function copylibs() { 21 | return src('../libs/**/*') 22 | .pipe(dest(`${buildPath}/libs`)) 23 | } 24 | 25 | // copylibs 26 | function copyassets() { 27 | return src('../assets/**/*') 28 | .pipe(dest(`${buildPath}/assets`)) 29 | } 30 | 31 | // 编译sass 32 | function packSCSS() { 33 | return src('../styles/*.scss') 34 | .pipe(sass().on('error', sass.logError)) 35 | .pipe(cleanCSS({compatibility: 'ie8'})) 36 | .pipe(rev()) 37 | .pipe(dest(`${buildPath}/styles`)) 38 | .pipe(rev.manifest()) 39 | .pipe(dest(`${buildPath}/rev/styles`)) 40 | } 41 | 42 | // JS模块化 43 | function packJS() { 44 | return src('../scripts/app.js') 45 | .pipe(webpack({ 46 | mode: 'production', 47 | entry: '../scripts/app.js', 48 | output: { 49 | path: path.resolve(__dirname, buildPath), 50 | filename: 'app.js' 51 | }, 52 | module: { 53 | rules: [ 54 | { 55 | test: /\.html$/, 56 | loader: 'string-loader' 57 | }, 58 | { 59 | test: /\.art$/, 60 | loader: "art-template-loader" 61 | } 62 | ] 63 | } 64 | })) 65 | .pipe(rev()) 66 | .pipe(dest(`${buildPath}/scripts`)) 67 | .pipe(rev.manifest({})) 68 | .pipe(dest(`${buildPath}/rev/scripts`)) 69 | } 70 | 71 | exports.default = series(parallel(copyassets, copylibs, packSCSS, packJS), copyhtml) -------------------------------------------------------------------------------- /src/styles/yo/lib/core/classes/_border.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | /** 3 | * @module 背景与边框 4 | * @description 为元素添加边框（包括1px边框） 5 | * @method border 6 | * @version 2.0.0 7 | * @param {String} $border-width 指定边框厚度（单位为px），默认值：1px，取值与`border-width`属性一致，不同方向代表边框位置 <2.0.0> 8 | * @param {String} $border-color 指定边框颜色 <2.0.0> 9 | * @param {String} $border-style 指定边框样式 <2.0.0> 10 | * @param {String} $radius 指定边框圆角半径，默认值：null <2.0.0> 11 | */ 12 | @mixin border($border-width: 1px, $border-color: map-get($base, border-color), $border-style: solid, $radius: null) { 13 | // 为边框位置提供定位参考 14 | position: relative; 15 | @if $border-width == null { 16 | $border-width: 0; 17 | } 18 | border-radius: $radius; 19 | &::after { 20 | // 用以解决边框layer遮盖内容 21 | pointer-events: none; 22 | position: absolute; 23 | z-index: 999; 24 | top: 0; 25 | left: 0; 26 | // fix当元素宽度出现小数时，边框可能显示不全的问题 27 | // overflow: hidden; 28 | content: "\0020"; 29 | border-color: $border-color; 30 | border-style: $border-style; 31 | border-width: $border-width; 32 | // 适配dpr进行缩放 33 | @include responsive(retina1x) { 34 | width: 100%; 35 | height: 100%; 36 | @if $radius != null { 37 | border-radius: $radius; 38 | } 39 | } 40 | @include responsive(retina2x) { 41 | width: 200%; 42 | height: 200%; 43 | @include transform(scale(.5)); 44 | @if $radius != null { 45 | border-radius: $radius * 2; 46 | } 47 | } 48 | @include responsive(retina3x) { 49 | width: 300%; 50 | height: 300%; 51 | @include transform(scale(.33333)); 52 | @if $radius != null { 53 | border-radius: $radius * 3; 54 | } 55 | } 56 | @include transform-origin(0 0); 57 | } 58 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/layout/yo-flex.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | 3 | // 定义常见弹性布局 4 | @mixin _flex { 5 | height: 100%; 6 | &, 7 | .flex-inherit { 8 | @include flexbox; 9 | @include flex-direction(map-get($flex, direction)); 10 | overflow: hidden; 11 | } 12 | > .flex, 13 | .flex-inherit, 14 | .flex-inherit > .flex { 15 | @include flex(1, map-get($flex, direction)); 16 | position: relative; 17 | } 18 | > .flex, 19 | .flex-inherit > .flex { 20 | @include overflow; 21 | // 用于解决flex无法将动态高度继承给子元素 22 | // 这里单独处理flex的子元素为yo-flex的情况，yo-flex通过绝对定位拉伸来得到高度 23 | // 请使用 flex-inherit 的方式来进行嵌套（推荐） 24 | > .yo-flex { 25 | @include fullscreen; 26 | } 27 | } 28 | } 29 | 30 | /** 31 | * @module layout 32 | * @method yo-flex 33 | * @version 3.0.0 34 | * @description 构造弹性布局使用方法，可以是横向和纵向 35 | * @demo http://ued.qunar.com/hy2/yo/demo/src/html/layout/yo-flex.html 36 | * @param {String} $name 定义扩展名称 <3.0.0> 37 | * @param {String} $direction 指定是水平或者垂直布局 <3.0.0> 38 | */ 39 | 40 | @mixin yo-flex( 41 | $name: default, 42 | $direction: default) { 43 | // 区别是否新增实例还是修改本身 44 | $name: if($name == default, "", "-#{$name}"); 45 | // 如果值为default，则取config的定义 46 | @if $direction == default { 47 | $direction: map-get($flex, direction); 48 | } 49 | .yo-flex#{$name} { 50 | &, 51 | .flex-inherit { 52 | // 如果$direction不等于config预设，则重绘方向 53 | @if $direction != map-get($flex, direction) { 54 | @include flex-direction($direction); 55 | } 56 | } 57 | > .flex, 58 | .flex-inherit, 59 | .flex-inherit > .flex { 60 | // 如果$direction不等于config预设，则重绘方向 61 | @if $direction != map-get($flex, direction) { 62 | @include flex(1, $direction); 63 | } 64 | } 65 | // 增量扩展 66 | @content; 67 | } 68 | } 69 | 70 | // 调用本文件时载入弹性布局基础构造 71 | .yo-flex { 72 | @include _flex; 73 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/core/classes/_transform.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | /** 3 | * @module Transform 4 | * @description 定义简单变换 5 | * @method transform 6 | * @version 1.0.0 7 | * @param {String} $transform 取值范围与`transform`属性一致 <1.0.0> 8 | */ 9 | @mixin transform($transform...) { 10 | @include prefix(transform, $transform); 11 | } 12 | 13 | /** 14 | * @module Transform 15 | * @description 定义变换原点 16 | * @method transform-origin 17 | * @version 1.0.0 18 | * @param {Length | Percentage | Keywords} $transform-origin 取值范围与`transform-origin`属性一致 <1.0.0> 19 | */ 20 | @mixin transform-origin($transform-origin) { 21 | @include prefix(transform-origin, $transform-origin); 22 | } 23 | 24 | /** 25 | * @module Transform 26 | * @description 指定某元素的子元素是（看起来）位于三维空间内，还是在该元素所在的平面内被扁平化 27 | * @method transform-style 28 | * @version 2.0.0 29 | * @param {String} $transform-style 取值范围与`transform-style`属性一致 <2.0.0> 30 | */ 31 | @mixin transform-style($transform-style) { 32 | @include prefix(transform-style, $transform-style); 33 | } 34 | 35 | /** 36 | * @module Transform 37 | * @description 指定观察者与「z=0」平面的距离，使具有三维位置变换的元素产生透视效果。「z>0」的三维元素比正常大，而「z<0」时则比正常小，大小程度由该属性的值决定。 38 | * @method perspective 39 | * @version 2.0.0 40 | * @param {none | Length} $perspective 取值范围与`perspective`属性一致 <2.0.0> 41 | */ 42 | @mixin perspective($perspective) { 43 | @include prefix(perspective, $perspective); 44 | } 45 | 46 | /** 47 | * @module Transform 48 | * @description 指定透视点的位置 49 | * @method perspective-origin 50 | * @version 2.0.0 51 | * @param {Length | Percentage | Keywords} $perspective-origin 取值范围与`perspective-origin`属性一致 <2.0.0> 52 | */ 53 | @mixin perspective-origin($perspective-origin) { 54 | @include prefix(perspective-origin, $perspective-origin); 55 | } 56 | 57 | /** 58 | * @module Transform 59 | * @description 指定元素背面面向用户时是否可见 60 | * @method backface-visibility 61 | * @version 2.0.0 62 | * @param {Keywords} $backface-visibility 取值范围与`backface-visibility`属性一致 <2.0.0> 63 | */ 64 | @mixin backface-visibility($backface-visibility) { 65 | @include prefix(backface-visibility, $backface-visibility); 66 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/fragment/yo-toast.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | 3 | // 定义浮层toast的基础构造 4 | @mixin _toast { 5 | position: fixed; 6 | top: 50%; 7 | left: 50%; 8 | @include transform(translate(-50%, -50%)); 9 | min-width: 1rem; 10 | max-width: 90%; 11 | z-index: map-get($z-index, toast); 12 | padding: map-get($toast, padding); 13 | border-radius: map-get($toast, radius); 14 | background-color: map-get($toast, bgcolor); 15 | color: map-get($toast, color); 16 | text-align: center; 17 | } 18 | 19 | /** 20 | * @module fragment 21 | * @method yo-toast 22 | * @version 3.0.0 23 | * @description 构造列表的自定义使用方法 24 | * @demo http://ued.qunar.com/hy2/yo/demo/src/html/fragment/yo-toast.html 25 | * @param {String} $name 定义扩展名称 <3.0.0> 26 | * @param {Length} $padding 内补白 <3.0.0> 27 | * @param {Length} $radius 圆角半径长度 <3.0.0> 28 | * @param {Color} $bgcolor 背景色 <3.0.0> 29 | * @param {Color} $color 文本色 <3.0.0> 30 | */ 31 | 32 | @mixin yo-toast( 33 | $name: default, 34 | $padding: default, 35 | $radius: default, 36 | $bgcolor: default, 37 | $color: default) { 38 | // 区别是否新增实例还是修改本身 39 | $name: if($name == default, "", "-#{$name}"); 40 | // 如果值为default，则取config的定义 41 | @if $padding == default { 42 | $padding: map-get($toast, padding); 43 | } 44 | @if $radius == default { 45 | $radius: map-get($toast, radius); 46 | } 47 | @if $bgcolor == default { 48 | $bgcolor: map-get($toast, bgcolor); 49 | } 50 | @if $color == default { 51 | $color: map-get($toast, color); 52 | } 53 | .yo-toast#{$name} { 54 | @if $padding != map-get($toast, padding) { 55 | padding: $padding; 56 | } 57 | @if $radius != map-get($toast, radius) { 58 | border-radius: $radius; 59 | } 60 | @if $bgcolor != map-get($toast, bgcolor) { 61 | background-color: $bgcolor; 62 | } 63 | @if $color != map-get($toast, color) { 64 | color: $color; 65 | } 66 | 67 | // 增量扩展 68 | @content; 69 | } 70 | } 71 | 72 | // 调用本文件时载入toast基础构造 73 | .yo-toast { 74 | @include _toast; 75 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/ani/README.md: -------------------------------------------------------------------------------- 1 | # ani 2 | 3 | ani是Yo框架的动画解决方案 4 | 5 | ## 动画列表 6 | 7 | ### fade in 8 | 9 | * fade-in: 淡入 10 | * fade-in-up: 从下往上淡入 11 | * fade-in-right: 从右往里淡入 12 | * fade-in-down: 从上往下淡入 13 | * fade-in-left: 从左往里淡入 14 | 15 | ### fade out 16 | 17 | * fade-out: 淡出 18 | * fade-out-up: 从里往上淡出 19 | * fade-out-right: 从里往右淡出 20 | * fade-out-down: 从里往下淡出 21 | * fade-out-left: 从里往左淡出 22 | 23 | ### elastic 24 | 25 | * elastic-x: 水平弹性运动 26 | * elastic-y: 垂直弹性运动 27 | 28 | ### elastic in 29 | 30 | * elastic-in: 弹性进入 31 | * elastic-in-up: 弹性从下往上进入 32 | * elastic-in-right: 弹性从右往里进入 33 | * elastic-in-down: 弹性从上往下进入 34 | * elastic-in-left: 弹性从左往里进入 35 | 36 | ### elastic out 37 | 38 | * elastic-out: 弹性退出 39 | * elastic-out-up: 往上弹性退出 40 | * elastic-out-right: 往右弹性退出 41 | * elastic-out-down: 往下弹性退出 42 | * elastic-out-left: 往左弹性退出 43 | 44 | ### flip 45 | 46 | * flip: 翻转 47 | * flip-in-x: 水平翻转 48 | * flip-in-y: 垂直翻转 49 | * flip-out-x: 水平翻出 50 | * flip-out-y: 垂直翻出 51 | 52 | ### roll 53 | 54 | * roll-in-right: 从右侧飞入 55 | * roll-in-left: 从左侧飞入 56 | * roll-out-right: 从右侧飞出 57 | * roll-out-left: 从左侧飞出 58 | 59 | ### speed 60 | 61 | * speed-in-right: 从右侧快速进入 62 | * speed-in-left: 从左侧快速进入 63 | * speed-out-right: 从右侧快速退出 64 | * speed-out-left: 从左侧快速退出 65 | 66 | ### rotate in 67 | 68 | * rotate-in: 旋转进入 69 | * rotate-in-up-right: 旋转从右向上进入 70 | * rotate-in-up-left: 旋转从左向上进入 71 | * rotate-in-down-right: 旋转从右向下进入 72 | * rotate-in-down-left: 旋转从左向下进入 73 | 74 | ### rotate out 75 | 76 | * rotate-out: 旋转退出 77 | * rotate-out-up-right: 旋转从右向上退出 78 | * rotate-out-up-left: 旋转从左向上退出 79 | * rotate-out-down-right: 旋转从右往下退出 80 | * rotate-out-down-left: 旋转从左往下退出 81 | 82 | ### zoom in 83 | 84 | * zoom-in: 放大进入 85 | * zoom-in-up: 放大向上进入 86 | * zoom-in-right: 从右往左放大进入 87 | * zoom-in-down: 放大向下进入 88 | * zoom-in-left: 从左往右放大进入 89 | 90 | ### zoom out 91 | 92 | * zoom-out: 缩小退出 93 | * zoom-out-up: 往上缩小退出 94 | * zoom-out-right: 从右往左缩小退出 95 | * zoom-out-down: 往下缩小退出 96 | * zoom-out-left: 从左往右缩小退出 97 | 98 | ### other 99 | 100 | * flash: 闪烁 101 | * shake: 摇摆 102 | * pulse: 脉冲 103 | * extrusion: 压缩 104 | * stretch: 拉伸 105 | * swing: 悬挂摇摆 106 | * sling: 弹弓 107 | * wobble: 震动摇晃 108 | * hinge: 铰链悬挂 -------------------------------------------------------------------------------- /src/styles/yo/lib/component/carousel.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "../fragment/yo-carousel"; 3 | @import "../ani/fade-in"; 4 | @import "../ani/fade-out"; 5 | 6 | // .yo-carousel{ 7 | // >.cont{ 8 | // overflow: visible; 9 | // // @include transform(translateZ(0)); 10 | // @include transition(transform .5s ease-in); 11 | // z-index: 5; 12 | // .item{ 13 | // // z-index: 2; 14 | // // @include transform(translateZ(0)); 15 | // // >img{ 16 | // // max-height: none; 17 | // // } 18 | // } 19 | // .extra-item{ 20 | // margin-left: -100%; 21 | // } 22 | // } 23 | // .index{ 24 | // z-index: 5; 25 | // } 26 | // } 27 | // 28 | // 29 | // // .transition { 30 | // // @include transition(transform .5s); 31 | // // } 32 | // 33 | .yo-carousel-fade { 34 | > .cont { 35 | > .item { 36 | position: absolute; 37 | right: 0; 38 | &:first-child { 39 | position: relative; 40 | } 41 | img { 42 | opacity: 0; 43 | @include transition(opacity .2s ease-in); 44 | } 45 | } 46 | .top { 47 | z-index: 99; 48 | img { 49 | opacity: 1; 50 | } 51 | } 52 | } 53 | } 54 | 55 | // 56 | .yo-carousel-scale { 57 | > .cont { 58 | > .item { 59 | @include transition(transform .4s ease-in-out .2s); 60 | @include transform(scale(.7)); 61 | } 62 | > .on { 63 | @include transform(scale(1)); 64 | } 65 | } 66 | } 67 | 68 | // test for inlne 69 | .yo-carousel { 70 | > .cont { 71 | @include transition(transform .5s ease-in); 72 | width: 100%; 73 | .item { 74 | z-index: 2; 75 | > img { 76 | max-height: none; 77 | } 78 | } 79 | .top { 80 | z-index: 5; 81 | } 82 | } 83 | .extra-item { 84 | margin-left: -100%; 85 | } 86 | .transition { 87 | @include transition(transform .5s ease-in); 88 | } 89 | .index{ 90 | z-index: 5; 91 | @include transform(translate(-50%, 0) translateZ(0)); 92 | } 93 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/core/classes/_background.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | /** 3 | * @module 背景与边框 4 | * @description 定义渐变色值 5 | * @method gradient 6 | * @version 1.0.0 7 | * @param {String} $type 指定渐变的4种类型：linear, repeating-linear, radial, repeating-radial <1.0.0> 8 | * @param {String} $dir 指定渐变方向，可选值：[left | right] || [top | bottom] | angle <2.0.0> 9 | * @param {String} $gradient 指定渐变取值，与w3c最新原生语法一致 <1.0.0> 10 | */ 11 | @mixin gradient($type, $dir, $color-stop...) { 12 | // 最新草案：当方向为关键字top,right,bottom,left时需要使用关键字to 13 | $dir-new: to; 14 | $dir-x: right left; 15 | $dir-y: top bottom; 16 | 17 | @if map-get($setting, is-vendor-prefix) { 18 | @each $vendor in map-get($setting, vendor-prefix) { 19 | background-image: $vendor$type#{-gradient($dir, $color-stop)}; 20 | } 21 | } 22 | @each $direction in $dir { 23 | @if index($dir-x, $direction) != null { 24 | $dir-new: append($dir-new, remove($dir-x, $direction), space); 25 | } @else if index($dir-y, $direction) != null { 26 | $dir-new: append($dir-new, remove($dir-y, $direction), space); 27 | } @else { 28 | $dir-new: $direction; 29 | } 30 | } 31 | 32 | background-image: $type#{-gradient($dir-new, $color-stop)}; 33 | } 34 | 35 | /** 36 | * @module 背景与边框 37 | * @description 定义背景图像缩放（AndroidBrowser2.3.*还需要厂商前缀） 38 | * @method background-size 39 | * @version 1.4.0 40 | * @param {Keywords | Length} $background-size 指定背景图缩放值，取值与`background-size`属性一致 <1.4.0> 41 | */ 42 | @mixin background-size($background-size...) { 43 | @include prefix(background-size, $background-size); 44 | } 45 | 46 | /** 47 | * @module 背景与边框 48 | * @description 定义背景裁减（AndroidBrowser2.3.*还需要厂商前缀） 49 | * @method background-clip 50 | * @version 1.6.0 51 | * @param {Keywords} $background-clip 指定背景图缩放值，取值与`background-clip`属性一致 <1.6.0> 52 | */ 53 | @mixin background-clip($background-clip...) { 54 | @include prefix(background-clip, $background-clip); 55 | } 56 | 57 | /** 58 | * @module 背景与边框 59 | * @description 定义背景显示区域（AndroidBrowser2.3.*还需要厂商前缀） 60 | * @method background-origin 61 | * @version 1.6.0 62 | * @param {Keywords} $background-origin 指定背景图`background-position`属性计算相对的参考点，取值与`background-origin`属性一致 <1.6.0> 63 | */ 64 | @mixin background-origin($background-origin...) { 65 | @include prefix(background-origin, $background-origin); 66 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/fragment/yo-modal.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | 3 | // 定义modal的基础构造 4 | @mixin _modal { 5 | overflow: hidden; 6 | @include fullscreen( 7 | $z-index: map-get($z-index, modal) 8 | ); 9 | // 内容区域默认水平垂直居中对齐 10 | @include align; 11 | // 水平居中，垂直顶部对齐 12 | &-top { 13 | @include align-items(flex-start); 14 | } 15 | // 垂直居中，水平右侧对齐 16 | &-right { 17 | @include justify-content(flex-end); 18 | } 19 | // 水平居中，垂直底部对齐 20 | &-bottom { 21 | @include align-items(flex-end); 22 | } 23 | // 垂直居中，水平左侧对齐 24 | &-left { 25 | @include justify-content(flex-start); 26 | } 27 | // 内容区域水平铺满 28 | &-stretch-x { 29 | > .cont { 30 | @include flex; 31 | } 32 | } 33 | // 内容区域垂直铺满 34 | &-stretch-y { 35 | > .cont { 36 | @include align-self(stretch); 37 | } 38 | } 39 | // 内容区域整个铺满 40 | &-stretch { 41 | > .cont { 42 | @include flex; 43 | @include align-self(stretch); 44 | } 45 | } 46 | // 遮罩背景底色 47 | background-color: map-get($modal, bgcolor); 48 | > .cont { 49 | position: relative; 50 | overflow: hidden; 51 | // 内容区底色 52 | background-color: map-get($modal, cont-bgcolor); 53 | } 54 | } 55 | 56 | /** 57 | * @module fragment 58 | * @method yo-modal 59 | * @version 3.0.0 60 | * @description 构造yo-modal的自定义使用方法 61 | * @demo http://ued.qunar.com/hy2/yo/demo/src/html/fragment/yo-modal.html 62 | * @param {String} $name 定义扩展名称 <3.0.0> 63 | * @param {Color} $bgcolor 遮罩背景色 <3.0.0> 64 | * @param {Color} $cont-bgcolor 内容区背景色 <3.0.0> 65 | */ 66 | 67 | @mixin yo-modal( 68 | $name: default, 69 | $bgcolor: default, 70 | $cont-bgcolor: default) { 71 | // 区别是否新增实例还是修改本身 72 | $name: if($name == default, "", "-#{$name}"); 73 | // 如果值为default，则取config的定义 74 | @if $bgcolor == default { 75 | $bgcolor: map-get($modal, bgcolor); 76 | } 77 | @if $cont-bgcolor == default { 78 | $cont-bgcolor: map-get($modal, cont-bgcolor); 79 | } 80 | .yo-modal#{$name} { 81 | @if $bgcolor != map-get($modal, bgcolor) { 82 | background-color: $bgcolor; 83 | } 84 | > .cont { 85 | @if $cont-bgcolor != map-get($modal, cont-bgcolor) { 86 | background-color: $cont-bgcolor; 87 | } 88 | } 89 | // 增量扩展 90 | @content; 91 | } 92 | } 93 | 94 | // 调用本文件时载入modal基础构造 95 | .yo-modal { 96 | @include _modal; 97 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/element/yo-loadtip.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "../ani/rotate"; 3 | 4 | // 定义loadtip的基础构造 5 | @mixin _loadtip { 6 | @include flexbox(inline-flex); 7 | @include align-items; 8 | color: map-get($loadtip, color); 9 | font-size: map-get($loadtip, font-size); 10 | > .yo-ico { 11 | display: block; 12 | color: map-get($loadtip, ico-color); 13 | -webkit-transition: -webkit-transform .3s; 14 | transition: transform .3s; 15 | @include transform(rotatez(0deg)); 16 | &-flip { 17 | @include transform(rotatez(180deg)); 18 | } 19 | } 20 | > .yo-ico-loading { 21 | position: relative; 22 | z-index: 1000; 23 | @include animation(rotate 1s infinite linear); 24 | } 25 | > .text { 26 | margin-left: .1rem; 27 | > .time { 28 | display: block; 29 | font-size: .12rem; 30 | } 31 | } 32 | } 33 | 34 | /** 35 | * @module element 36 | * @method yo-loadtip 37 | * @version 3.0.0 38 | * @description 构造加载提示的自定义使用方法 39 | * @demo http://ued.qunar.com/hy2/yo/demo/src/html/element/yo-loadtip.html 40 | * @param {String} $name 定义扩展名称 <3.0.0> 41 | * @param {Color} $color 文本色 <3.0.0> 42 | * @param {Length} $font-size 字号大小 <3.0.0> 43 | * @param {Color} $ico-color ico颜色 <3.0.0> 44 | */ 45 | 46 | @mixin yo-loadtip( 47 | $name: default, 48 | $color: default, 49 | $font-size: default, 50 | $ico-color: default) { 51 | // 区别是否新增实例还是修改本身 52 | $name: if($name == default, "", "-#{$name}"); 53 | // 如果值为default，则取config的定义 54 | @if $color == default { 55 | $color: map-get($loadtip, color); 56 | } 57 | @if $font-size == default { 58 | $font-size: map-get($loadtip, font-size); 59 | } 60 | @if $ico-color == default { 61 | $ico-color: map-get($loadtip, ico-color); 62 | } 63 | 64 | .yo-loadtip#{$name} { 65 | // 如果$color不等于config设定，则重绘文本色 66 | @if $color != map-get($loadtip, color) { 67 | color: $color; 68 | } 69 | // 如果$font-size不等于config设定，则重绘字号 70 | @if $font-size != map-get($loadtip, font-size) { 71 | font-size: $font-size; 72 | } 73 | > .yo-ico { 74 | // 如果$ico-color不等于config设定，则重绘ico颜色 75 | @if $ico-color != map-get($loadtip, ico-color) { 76 | color: $ico-color; 77 | } 78 | } 79 | // 增量扩展 80 | @content; 81 | } 82 | } 83 | 84 | // 调用本文件时载入气泡基础构造 85 | .yo-loadtip { 86 | @include _loadtip; 87 | } -------------------------------------------------------------------------------- /position.scss: -------------------------------------------------------------------------------- 1 | .index-wrap { 2 | main { 3 | .pos-wrap { 4 | height: 100%; 5 | display: flex; 6 | flex-direction: column; 7 | nav { 8 | height: .44rem; 9 | display: flex; 10 | padding: 0 .15rem; 11 | @include border(0 0 1px 0); 12 | div:first-child { 13 | flex: 1; 14 | line-height: .44rem; 15 | color: #555; 16 | } 17 | div:last-child { 18 | width: 1.1rem; 19 | display: flex; 20 | align-items: center; 21 | justify-content: flex-end; 22 | button { 23 | height: .3rem; 24 | border: 0; 25 | width: .9rem; 26 | background: #f5f5f5; 27 | color: #00b38a; 28 | border-radius: .15rem; 29 | } 30 | } 31 | } 32 | div#pos-list{ 33 | flex: 1; 34 | overflow: hidden; 35 | ul { 36 | 37 | .head, 38 | .foot { 39 | display: flex; 40 | align-items: center; 41 | justify-content: center; 42 | height: .4rem; 43 | } 44 | .head img, 45 | .foot img { 46 | width: .16rem; 47 | height: .16rem; 48 | transition: transform 150ms; 49 | -webkit-transition: transform 150ms; 50 | } 51 | .head img { 52 | transform: rotate(180deg); 53 | } 54 | .up { 55 | transform: rotate(360deg) !important; 56 | -webkit-transform: rotate(360deg) !important; 57 | } 58 | .down { 59 | transform: rotate(180deg); 60 | } 61 | 62 | li.list-item { 63 | padding: .14rem; 64 | display: flex; 65 | @include border(0 0 1px 0); 66 | img { 67 | width: .6rem; 68 | height: .6rem; 69 | } 70 | .item-desc { 71 | padding-left: .15rem; 72 | flex: 1; 73 | h2.item-title { 74 | font-size: .16rem; 75 | } 76 | p.item-info { 77 | display: flex; 78 | justify-content: space-between; 79 | > span:last-child { 80 | font-size: .16rem; 81 | color: #00b38a; 82 | } 83 | } 84 | p.item-time { 85 | color: #888; 86 | } 87 | } 88 | } 89 | } 90 | } 91 | } 92 | } 93 | } 94 | -------------------------------------------------------------------------------- /src/styles/modules/position.scss: -------------------------------------------------------------------------------- 1 | .list-container { 2 | nav { 3 | height: .44rem; 4 | display: flex; 5 | background: #fff; 6 | align-items: center; 7 | position: relative; 8 | 9 | @include border(0 0 1px 0, #e8e8e8); 10 | 11 | >div:first-child { 12 | flex: 1; 13 | line-height: .44rem; 14 | padding-left: .15rem; 15 | } 16 | 17 | >div:last-child { 18 | margin-right: .15rem; 19 | width: 22.4vw; 20 | height: .3rem; 21 | line-height: .3rem; 22 | text-align: center; 23 | border-radius: .15rem; 24 | background: #f5f5f5; 25 | color: #00b38a; 26 | } 27 | } 28 | 29 | ul { 30 | background: #fff; 31 | 32 | li.list-item { 33 | display: flex; 34 | padding: .15rem; 35 | @include border(0 0 1px 0, #e8e8e8); 36 | 37 | img { 38 | width: .75rem; 39 | height: .6rem; 40 | padding-right: .15rem; 41 | } 42 | 43 | .item-desc { 44 | flex: 1; 45 | width: 100%; 46 | overflow: hidden; 47 | 48 | .item-title { 49 | @media screen and (max-device-width: 375px) { 50 | font-size: 16px; 51 | } 52 | @media screen and (min-device-width: 376px) { 53 | font-size: 20px; 54 | } 55 | font-weight: bold; 56 | @include ellipsis(null, 1); 57 | width: 100%; 58 | } 59 | 60 | .item-info { 61 | line-height: .3rem; 62 | display: flex; 63 | 64 | .item-pos { 65 | flex: 1; 66 | @include ellipsis(); 67 | } 68 | 69 | .item-salary { 70 | font-size: .16rem; 71 | color: #00b38a; 72 | width: .7rem; 73 | text-align: right 74 | } 75 | } 76 | 77 | .item-time { 78 | font-size: .12rem; 79 | color: #888; 80 | } 81 | } 82 | } 83 | } 84 | 85 | .head, 86 | .foot { 87 | display: flex; 88 | align-items: center; 89 | justify-content: center; 90 | height: .4rem; 91 | } 92 | 93 | .head img, 94 | .foot img { 95 | width: .16rem; 96 | height: .16rem; 97 | transition: transform 150ms; 98 | -webkit-transition: transform 150ms; 99 | } 100 | 101 | .head img { 102 | transform: rotate(180deg); 103 | } 104 | 105 | .up { 106 | transform: rotate(360deg) !important; 107 | -webkit-transform: rotate(360deg) !important; 108 | } 109 | 110 | .down { 111 | transform: rotate(180deg); 112 | } 113 | } -------------------------------------------------------------------------------- /src/config/gulpfile-dev.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const { src, dest, series, parallel, watch } = require('gulp') 3 | const connect = require('gulp-connect') 4 | const sass = require('gulp-sass') 5 | const webpack = require('webpack-stream') 6 | const proxy = require('http-proxy-middleware') 7 | 8 | const devPath = '../../dev' 9 | 10 | // copyhtml 11 | function copyhtml() { 12 | return src('../*.html') 13 | .pipe(dest(devPath)) 14 | .pipe(connect.reload()) 15 | } 16 | 17 | // copylibs 18 | function copylibs() { 19 | return src('../libs/**/*') 20 | .pipe(dest(`${devPath}/libs`)) 21 | } 22 | 23 | // copylibs 24 | function copyassets() { 25 | return src('../assets/**/*') 26 | .pipe(dest(`${devPath}/assets`)) 27 | } 28 | 29 | // 编译sass 30 | function packSCSS() { 31 | return src('../styles/*.scss') 32 | .pipe(sass().on('error', sass.logError)) 33 | .pipe(dest(`${devPath}/styles`)) 34 | .pipe(connect.reload()) 35 | } 36 | 37 | // JS模块化 38 | function packJS() { 39 | return src('../scripts/*.js') 40 | .pipe(webpack({ 41 | mode: 'development', 42 | entry: { 43 | app: '../scripts/app.js', 44 | 'app-search': '../scripts/app-search.js', 45 | 'app-profile': '../scripts/app-profile.js', 46 | }, 47 | output: { 48 | path: path.resolve(__dirname, devPath), 49 | filename: '[name].js' 50 | }, 51 | module: { 52 | rules: [ 53 | { 54 | test: /\.html$/, 55 | loader: 'string-loader' 56 | }, 57 | { 58 | test: /\.art$/, 59 | loader: "art-template-loader" 60 | }, 61 | { 62 | test: /\.scss$/, 63 | use: [ 64 | 'style-loader', 65 | 'css-loader', 66 | 'sass-loader', 67 | ], 68 | } 69 | ] 70 | } 71 | })) 72 | .pipe(dest(`${devPath}/scripts`)) 73 | .pipe(connect.reload()) 74 | } 75 | 76 | // 启动server 77 | function gulpServer() { 78 | return connect.server({ 79 | name: 'Dist App', 80 | root: devPath, 81 | port: 8080, 82 | host: '10.9.49.156', 83 | livereload: true, 84 | middleware: () => { 85 | return [ 86 | proxy('/api', { 87 | target: 'http://localhost:3000', 88 | changeOrigin: true 89 | }) 90 | ] 91 | } 92 | }) 93 | } 94 | 95 | // watch 96 | function watchFiles() { 97 | watch('../*.html', series(copyhtml)) 98 | watch('../libs/*', series(copylibs)) 99 | watch('../**/*', series(packJS)) 100 | watch('../**/*.scss', series(packSCSS)) 101 | watch('../assets/*', series(copyassets)) 102 | } 103 | 104 | exports.default = series(parallel(copyhtml, copyassets, copylibs, packSCSS, packJS), parallel(gulpServer, watchFiles)) -------------------------------------------------------------------------------- /src/styles/yo/lib/core/classes/_animation.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | /** 3 | * @module Animation 4 | * @description 定义动画 5 | * @method animation 6 | * @version 1.0.0 7 | * @param {String} $animation 取值与原生语法一致 <1.0.0> 8 | */ 9 | @mixin animation($animation...) { 10 | @include prefix(animation, $animation); 11 | } 12 | 13 | /** 14 | * @module Animation 15 | * @description 指定需要引用的动画名称 16 | * @method animation-name 17 | * @version 3.0.0 18 | * @param {String} $animation-name 取值与原生语法一致 <3.0.0> 19 | */ 20 | @mixin animation-name($animation-name...) { 21 | @include prefix(animation-name, $animation-name); 22 | } 23 | 24 | /** 25 | * @module Animation 26 | * @description 指定动画运行一次所持续的时长 27 | * @method animation-duration 28 | * @version 3.0.0 29 | * @param {String} $animation-duration 取值与原生语法一致 <3.0.0> 30 | */ 31 | @mixin animation-duration($animation-duration...) { 32 | @include prefix(animation-duration, $animation-duration); 33 | } 34 | 35 | /** 36 | * @module Animation 37 | * @description 指定动画运行方式 38 | * @method animation-timing-function 39 | * @version 3.0.0 40 | * @param {String} $animation-timing-function 取值与原生语法一致 <3.0.0> 41 | */ 42 | @mixin animation-timing-function($animation-timing-function...) { 43 | @include prefix(animation-timing-function, $animation-timing-function); 44 | } 45 | 46 | /** 47 | * @module Animation 48 | * @description 指定动画延迟多久之后再开始 49 | * @method animation-delay 50 | * @version 3.0.0 51 | * @param {String} $animation-delay 取值与原生语法一致 <3.0.0> 52 | */ 53 | @mixin animation-delay($animation-delay...) { 54 | @include prefix(animation-delay, $animation-delay); 55 | } 56 | 57 | /** 58 | * @module Animation 59 | * @description 指定动画循环几次 60 | * @method animation-iteration-count 61 | * @version 3.0.0 62 | * @param {String} $animation-iteration-count 取值与原生语法一致 <3.0.0> 63 | */ 64 | @mixin animation-iteration-count($animation-iteration-count...) { 65 | @include prefix(animation-iteration-count, $animation-iteration-count); 66 | } 67 | 68 | /** 69 | * @module Animation 70 | * @description 指定动画的运动方向 71 | * @method animation-direction 72 | * @version 3.0.0 73 | * @param {String} $animation-direction 取值与原生语法一致 <3.0.0> 74 | */ 75 | @mixin animation-direction($animation-direction...) { 76 | @include prefix(animation-direction, $animation-direction); 77 | } 78 | 79 | /** 80 | * @module Animation 81 | * @description 指定动画的运动状态 82 | * @method animation-play-state 83 | * @version 3.0.0 84 | * @param {String} $animation-play-state 取值与原生语法一致 <3.0.0> 85 | */ 86 | @mixin animation-play-state($animation-play-state...) { 87 | @include prefix(animation-play-state, $animation-play-state); 88 | } 89 | 90 | /** 91 | * @module Animation 92 | * @description 指定动画时间之外的状态 93 | * @method animation-fill-mode 94 | * @version 3.0.0 95 | * @param {String} $animation-fill-mode 取值与原生语法一致 <3.0.0> 96 | */ 97 | @mixin animation-fill-mode($animation-fill-mode...) { 98 | @include prefix(animation-fill-mode, $animation-fill-mode); 99 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/fragment/yo-rating.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | 3 | // 定义rating的基础构造 4 | @mixin _rating { 5 | @include flexbox(inline-flex); 6 | > .item { 7 | width: map-get($rating, item-width); 8 | cursor: pointer; 9 | // 子项间间隙 10 | &:not(:first-child) { 11 | margin-left: map-get($rating, item-space); 12 | } 13 | &, 14 | > span { 15 | height: map-get($rating, item-height); 16 | background-image: url(#{map-get($setting, bgimg-domain)}#{map-get($rating, url)}); 17 | background-repeat: no-repeat; 18 | background-size: auto 200%; 19 | } 20 | > span { 21 | display: block; 22 | overflow: hidden; 23 | width: 0; 24 | background-position: 0 100%; 25 | font: 0/0 arial; 26 | } 27 | } 28 | &-readonly { 29 | > .item { 30 | cursor: default; 31 | } 32 | } 33 | } 34 | 35 | /** 36 | * @module fragment 37 | * @method yo-rating 38 | * @version 3.0.0 39 | * @description 构造yo-rating的自定义使用方法 40 | * @demo http://ued.qunar.com/hy2/yo/demo/src/html/fragment/yo-rating.html 41 | * @param {String} $name 定义扩展名称 <3.0.0> 42 | * @param {Length} $item-width 单个子项的宽度 <3.0.0> 43 | * @param {Length} $item-height 单个子项的高度 <3.0.0> 44 | * @param {Length} $item-space 子项间间隙 <3.0.0> 45 | * @param {Color} $url 分数图像url（注意：只需要配置文件名即可） <3.0.0> 46 | * @example 假设你需要只读状态，可以这样： 47 | *
    ...
    48 | */ 49 | 50 | @mixin yo-rating( 51 | $name: default, 52 | $item-width: default, 53 | $item-height: default, 54 | $item-space: default, 55 | $url: default) { 56 | // 区别是否新增实例还是修改本身 57 | $name: if($name == default, "", "-#{$name}"); 58 | // 如果值为default，则取config的定义 59 | @if $item-width == default { 60 | $item-width: map-get($rating, item-width); 61 | } 62 | @if $item-height == default { 63 | $item-height: map-get($rating, item-height); 64 | } 65 | @if $item-space == default { 66 | $item-space: map-get($rating, item-space); 67 | } 68 | @if $url == default { 69 | $url: map-get($rating, url); 70 | } 71 | .yo-rating#{$name} { 72 | > .item { 73 | @if $item-width != map-get($rating, item-width) { 74 | width: $item-width; 75 | } 76 | &:not(:first-child) { 77 | @if $item-space != map-get($rating, item-space) { 78 | margin-left: $item-space; 79 | } 80 | } 81 | &, 82 | > span { 83 | @if $item-height != map-get($rating, item-height) { 84 | height: $item-height; 85 | } 86 | @if $url != map-get($rating, url) { 87 | background-image: url(#{map-get($setting, bgimg-domain)}#{$url}); 88 | } 89 | } 90 | } 91 | 92 | // 增量扩展 93 | @content; 94 | } 95 | } 96 | 97 | // 调用本文件时载入rating基础构造 98 | .yo-rating { 99 | @include _rating; 100 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/element/yo-loading.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "../fragment/yo-modal"; 3 | @import "../ani/rotate"; 4 | 5 | // 定义loading的基础构造 6 | @mixin _loading { 7 | padding: .1rem .2rem; 8 | border-radius: .05rem; 9 | background-color: map-get($loading, bgcolor); 10 | color: map-get($loading, color); 11 | font-size: map-get($loading, font-size); 12 | line-height: 1; 13 | text-align: center; 14 | // 增加 .yo-ico 这一级用以fix某些浏览器不支持伪元素动画 15 | > .yo-ico { 16 | display: block; 17 | @include animation(rotate 1s infinite linear); 18 | @include transform-origin(center); 19 | &::before { 20 | content: map-get($loading, content); 21 | color: map-get($loading, ico-color); 22 | font-size: map-get($loading, ico-size); 23 | } 24 | // 当loading界面还有文字提示的时候，增加间隙 25 | &:not(:only-child) { 26 | margin-bottom: .08rem; 27 | } 28 | } 29 | } 30 | 31 | /** 32 | * @module element 33 | * @method yo-loading 34 | * @version 3.0.0 35 | * @description 构造加载中的自定义使用方法 36 | * @demo http://ued.qunar.com/hy2/yo/demo/src/html/element/yo-loading.html 37 | * @param {String} $name 定义扩展名称 <3.0.0> 38 | * @param {Length} $ico-size loading的尺寸 <3.0.0> 39 | * @param {Color} $ico-color loading的颜色 <3.0.0> 40 | * @param {Color} $bgcolor 背景色 <3.0.0> 41 | * @param {Color} $color 文本颜色 <3.0.0> 42 | * @param {Length} $font-size 文本字号 <3.0.0> 43 | * @param {String} $content loading的iconfont编码 <3.0.0> 44 | */ 45 | 46 | @mixin yo-loading( 47 | $name: default, 48 | $ico-size: default, 49 | $ico-color: default, 50 | $bgcolor: default, 51 | $font-size: default, 52 | $color: default, 53 | $content: default) { 54 | // 区别是否新增实例还是修改本身 55 | $name: if($name == default, "", "-#{$name}"); 56 | // 如果值为default，则取config的定义 57 | @if $ico-size == default { 58 | $ico-size: map-get($loading, ico-size); 59 | } 60 | @if $ico-color == default { 61 | $ico-color: map-get($loading, ico-color); 62 | } 63 | @if $bgcolor == default { 64 | $bgcolor: map-get($loading, bgcolor); 65 | } 66 | @if $font-size == default { 67 | $font-size: map-get($loading, font-size); 68 | } 69 | @if $color == default { 70 | $color: map-get($loading, color); 71 | } 72 | @if $content == default { 73 | $content: map-get($loading, content); 74 | } 75 | .yo-loading#{$name} { 76 | @if $bgcolor != map-get($loading, bgcolor) { 77 | background-color: $bgcolor; 78 | } 79 | @if $color != map-get($loading, color) { 80 | color: $color; 81 | } 82 | @if $font-size != map-get($loading, font-size) { 83 | font-size: $font-size; 84 | } 85 | > .yo-ico { 86 | &::before { 87 | @if $content != map-get($loading, content) { 88 | content: $content; 89 | } 90 | @if $ico-color != map-get($loading, ico-color) { 91 | color: $ico-color; 92 | } 93 | @if $ico-size != map-get($loading, ico-size) { 94 | font-size: $ico-size; 95 | } 96 | } 97 | } 98 | 99 | // 增量扩展 100 | @content; 101 | } 102 | } 103 | 104 | // 调用本文件时载入loading基础构造 105 | .yo-loading { 106 | @include _loading; 107 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/fragment/yo-proportion.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | 3 | // 定义proportion的基础构造 4 | @mixin _proportion { 5 | margin: map-get($proportion, margin); 6 | background-color: map-get($proportion, bgcolor); 7 | line-height: map-get($proportion, height); 8 | color: map-get($proportion, color); 9 | font-size: map-get($proportion, font-size); 10 | > .inner { 11 | @include flexbox; 12 | min-height: map-get($proportion, min-height); 13 | padding: 0 .1rem; 14 | background-color: map-get($proportion, inner-bgcolor); 15 | > .date, 16 | > .amount { 17 | display: block; 18 | } 19 | > .date { 20 | @include flex; 21 | } 22 | &::after { 23 | display: block; 24 | content: attr(data-attr); 25 | } 26 | } 27 | } 28 | 29 | /** 30 | * @module fragment 31 | * @method yo-proportion 32 | * @version 3.0.0 33 | * @description 构造比例条的自定义使用方法 34 | * @demo http://ued.qunar.com/hy2/yo/demo/src/html/fragment/yo-proportion.html 35 | * @param {String} $name 定义扩展名称 <3.0.0> 36 | * @param {Length} $margin 外边距 <3.0.0> 37 | * @param {Color} $bgcolor 底色 <3.0.0> 38 | * @param {Length} $height 高度 <3.0.0> 39 | * @param {Length} $min-height 最小高度 <3.0.0> 40 | * @param {Color} $color 文本色 <3.0.0> 41 | * @param {Color} $font-size 文本字号 <3.0.0> 42 | * @param {Color} $inner-bgcolor 当前状态色 <3.0.0> 43 | */ 44 | 45 | @mixin yo-proportion( 46 | $name: default, 47 | $margin: default, 48 | $bgcolor: default, 49 | $height: default, 50 | $min-height: default, 51 | $color: default, 52 | $font-size: default, 53 | $inner-bgcolor: default) { 54 | // 区别是否新增实例还是修改本身 55 | $name: if($name == default, "", "-#{$name}"); 56 | // 如果值为default，则取config的定义 57 | @if $margin == default { 58 | $margin: map-get($proportion, margin); 59 | } 60 | @if $bgcolor == default { 61 | $bgcolor: map-get($proportion, bgcolor); 62 | } 63 | @if $height == default { 64 | $height: map-get($proportion, height); 65 | } 66 | @if $min-height == default { 67 | $min-height: map-get($proportion, min-height); 68 | } 69 | @if $color == default { 70 | $color: map-get($proportion, color); 71 | } 72 | @if $font-size == default { 73 | $font-size: map-get($proportion, font-size); 74 | } 75 | @if $inner-bgcolor == default { 76 | $inner-bgcolor: map-get($proportion, inner-bgcolor); 77 | } 78 | .yo-proportion#{$name} { 79 | @if $margin != map-get($proportion, margin) { 80 | margin: $margin; 81 | } 82 | @if $bgcolor != map-get($proportion, bgcolor) { 83 | background-color: $bgcolor; 84 | } 85 | @if $height != map-get($proportion, height) { 86 | line-height: $height; 87 | } 88 | @if $color != map-get($proportion, color) { 89 | color: $color; 90 | } 91 | @if $margin != map-get($proportion, font-size) { 92 | font-size: $font-size; 93 | } 94 | > .inner { 95 | @if $min-height != map-get($proportion, min-height) { 96 | min-height: $min-height; 97 | } 98 | @if $inner-bgcolor != map-get($proportion, inner-bgcolor) { 99 | background-color: $inner-bgcolor; 100 | } 101 | } 102 | // 增量扩展 103 | @content; 104 | } 105 | } 106 | 107 | // 调用本文件时载入proportion基础构造 108 | .yo-proportion { 109 | @include _proportion; 110 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/component/multilist.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "./list"; 3 | @import "../element/yo-checked"; 4 | @import "../ani/fade-in-right"; 5 | 6 | .yo-multilist { 7 | @include flexbox; 8 | width: auto; 9 | .multiList-container-tip { 10 | margin-top: 45%; 11 | color: #333; 12 | } 13 | > .item { 14 | $active-color: #0faad6; 15 | $line-color: #ccc; 16 | $default-bg-color: #fafafa; 17 | @include yo-checked( $name: radio, $on-color: $active-color ) { 18 | margin-right: 0.1rem; 19 | }; 20 | @include yo-checked( $name: checkbox, $on-color: $active-color, $border-width: 1px, $bgcolor: #fff, $border-color: $active-color, $on-border-color: $active-color ) { 21 | margin-right: 0.1rem; 22 | }; 23 | @include yo-checked( $name: dot, $content:'\f083', $on-color: $active-color ){ 24 | margin-left: -0.1rem; 25 | }; 26 | position: relative; 27 | width: 25%; 28 | min-width: 90px; 29 | @include flexbox; 30 | background-color: #fff; 31 | .yo-list > .item { 32 | label { 33 | @include flexbox; 34 | } 35 | &:after { 36 | left: 0.18rem; 37 | } 38 | } 39 | 40 | 41 | .yo-scroller { 42 | @include border(0 1px 0 0, $line-color, solid); 43 | position: absolute; 44 | } 45 | .yo-list > .item{ 46 | &.spread{ 47 | position: relative; 48 | overflow: visible; 49 | &::before{ 50 | position: absolute; 51 | top: 50%; 52 | right: -3px; 53 | content: ' '; 54 | width: 6px; 55 | height: 6px; 56 | border-top: 1px solid $line-color; 57 | border-left: 1px solid $line-color; 58 | background-color: $line-color; 59 | @include transform(rotate(-45deg) translate(50%, -50%)); 60 | } 61 | } 62 | } 63 | &:first-child { 64 | background-color: $default-bg-color; 65 | .yo-list > .item { 66 | background-color: $default-bg-color; 67 | &::after { 68 | left: 0; 69 | } 70 | &.spread { 71 | background-color: #fff; 72 | @include border(1px 1px 0 0, $line-color #fff $line-color $line-color, solid); 73 | &::before{ 74 | content: none; 75 | } 76 | &:after { 77 | content: ''; 78 | } 79 | } 80 | } 81 | } 82 | &:last-child { 83 | @include flex(1); 84 | width: auto; 85 | @include justify-content(center); 86 | .yo-scroller{ 87 | @include border(0 0 0 0, transparent, solid); 88 | position: absolute; 89 | } 90 | .yo-list > .item { 91 | .checked{ 92 | color: $active-color; 93 | } 94 | &::after { 95 | left: 0.35rem; 96 | } 97 | } 98 | } 99 | } 100 | } 101 | 102 | .select-checkbox{ 103 | @include flexbox; 104 | .yo-checked{ 105 | display: block; 106 | } 107 | .content{ 108 | @include flex(1); 109 | width: auto; 110 | } 111 | } -------------------------------------------------------------------------------- /src/scripts/controllers/positions.js: -------------------------------------------------------------------------------- 1 | const positionView = require('../views/position.art') 2 | const positionListView = require('../views/position-list.art') 3 | const postionModel = require('../models/postion') 4 | 5 | import indexController from './index' 6 | 7 | const BScroll = require('better-scroll') 8 | 9 | class Position { 10 | constructor() { 11 | // this.render() 12 | this.list = [] 13 | this.pageNo = 1 14 | this.totalCount = 0 15 | this.pageSize = 10 16 | } 17 | 18 | renderer(list) { 19 | let positionListHtml = positionListView({ 20 | list 21 | }) 22 | 23 | $('main ul').html(positionListHtml) 24 | 25 | $('main ul li').on('tap', function() { 26 | let id = $(this).attr('data-id') 27 | location.hash = `detail/${id}` 28 | }) 29 | } 30 | 31 | async render() { 32 | indexController.render() 33 | 34 | // js 35 | $('html').css({ 36 | 'font-size': '100px', 37 | 'background': '#eee', 38 | 'overflow-y': 'hidden' 39 | }) 40 | $('body').css({ 41 | 'overflow': 'hidden' 42 | }) 43 | 44 | let that = this 45 | 46 | let result = await postionModel.get({ 47 | start: (this.pageNo - 1) * this.pageSize, 48 | count: this.pageSize 49 | }) 50 | 51 | // 把PositionView 先装填到main里 52 | let positionHtml = positionView({}) 53 | let $main = $('main') 54 | $main.html(positionHtml) 55 | 56 | // 再把list装到ul里 57 | let list = this.list = result.data.list 58 | that.totalCount = result.data.total 59 | 60 | this.renderer(list) 61 | 62 | // 定义图片对象 63 | let $imgHead = $('.head img') 64 | let $imgFoot = $('.foot img') 65 | 66 | // bScroll 是BetterScroll实例，将来可以用来调用API 67 | let bScroll = new BScroll.default($('main').get(0), { 68 | probeType: 2 69 | }) 70 | 71 | // 开始要隐藏下拉刷新的div 72 | bScroll.scrollBy(0, -40) 73 | 74 | bScroll.on('scrollEnd', async function() { 75 | // 下拉刷新 76 | if (this.y >= 0) { 77 | 78 | $imgHead.attr('src', '/assets/images/ajax-loader.gif') 79 | 80 | let result = await postionModel.get({ 81 | start: 0, 82 | count: 10 83 | }) 84 | 85 | let list = result.data.list 86 | 87 | // 1. 将原来数据list和现在返回的数据做拼接， 88 | // 2.重新渲染 89 | that.renderer(list) 90 | 91 | bScroll.scrollBy(0, -40) 92 | $imgHead.attr('src', '/assets/images/arrow.png') 93 | $imgHead.removeClass('up') 94 | } 95 | 96 | // 上拉加载更多 97 | if (this.maxScrollY >= this.y && Math.ceil(that.totalCount/that.pageSize) >= that.pageNo) { 98 | that.pageNo++ 99 | 100 | $imgFoot.attr('src', '/assets/images/ajax-loader.gif') 101 | 102 | let result = await postionModel.get({ 103 | start: that.pageNo, 104 | count: that.pageSize 105 | }) 106 | 107 | let { list, total } = result.data 108 | 109 | // 更新pageCount, 因为有新的内容发布出来了 110 | that.totalCount = total 111 | 112 | // 1.将原来数据list和现在返回的数据做拼接， 113 | // 2.重新渲染 114 | that.list = [...that.list, ...list] 115 | that.renderer(that.list) 116 | 117 | bScroll.scrollBy(0, 40) 118 | $imgHead.attr('src', '/assets/images/arrow.png') 119 | $imgHead.removeClass('down') 120 | } 121 | }) 122 | 123 | bScroll.on('scroll', function() { 124 | if (this.y > 0) { 125 | $imgHead.addClass('up') 126 | } 127 | 128 | if (this.maxScrollY > this.y) { 129 | $imgFoot.addClass('down') 130 | } 131 | }) 132 | } 133 | } 134 | 135 | export default new Position() -------------------------------------------------------------------------------- /src/styles/yo/lib/fragment/yo-swipemenu.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | 3 | // 定义swipemenu的基础构造 4 | @mixin _swipemenu { 5 | &, 6 | > .item { 7 | position: relative; 8 | // 当yo-swipemenu被应用到yo-list里时，需要重置yo-list item的flex定义 9 | display: block !important; 10 | // 清除.item的内补白，交由yo-swipemenu的子项来处理 11 | padding: 0 !important; 12 | } 13 | .front { 14 | position: relative; 15 | z-index: 2; 16 | width: map-get($swipemenu, padding); 17 | background-color: #fff; 18 | } 19 | .transition { 20 | @include transition(transform .3s); 21 | } 22 | .action { 23 | @include flexbox; 24 | position: absolute; 25 | top: 0; 26 | right: 0; 27 | bottom: 0; 28 | overflow: hidden; 29 | width: map-get($swipemenu, action-width); 30 | background-color: map-get($swipemenu, action-bgcolor); 31 | color: map-get($swipemenu, action-color); 32 | &-start { 33 | right: auto; 34 | left: 0; 35 | } 36 | > .item { 37 | @include flex; 38 | @include align; 39 | &:first-child { 40 | background-color: map-get($swipemenu, action-first-bgcolor); 41 | } 42 | } 43 | } 44 | } 45 | 46 | /** 47 | * @module fragment 48 | * @method yo-swipemenu 49 | * @version 3.0.0 50 | * @description 构造yo-swipemenu的自定义使用方法 51 | * @demo http://ued.qunar.com/hy2/yo/demo/src/html/fragment/yo-swipemenu.html 52 | * @param {String} $name 定义扩展名称 <3.0.0> 53 | * @param {Length} $padding front区域内补白 <3.0.0> 54 | * @param {Length} $action-width action操作区宽度 <3.0.0> 55 | * @param {Color} $action-bgcolor action操作区背景色 <3.0.0> 56 | * @param {Color} $action-color action操作区文本色 <3.0.0> 57 | * @param {Color} $action-first-bgcolor action操作区第一个子项的背景色 <3.0.0> 58 | */ 59 | 60 | @mixin yo-swipemenu( 61 | $name: default, 62 | $padding: default, 63 | $action-width: default, 64 | $action-bgcolor: default, 65 | $action-color: default, 66 | $action-first-bgcolor: default) { 67 | // 区别是否新增实例还是修改本身 68 | $name: if($name == default, "", "-#{$name}"); 69 | // 如果值为default，则取config的定义 70 | @if $padding == default { 71 | $padding: map-get($swipemenu, padding); 72 | } 73 | @if $action-width == default { 74 | $action-width: map-get($swipemenu, action-width); 75 | } 76 | @if $action-bgcolor == default { 77 | $action-bgcolor: map-get($swipemenu, action-bgcolor); 78 | } 79 | @if $action-color == default { 80 | $action-color: map-get($swipemenu, action-color); 81 | } 82 | @if $action-first-bgcolor == default { 83 | $action-first-bgcolor: map-get($swipemenu, action-first-bgcolor); 84 | } 85 | .yo-swipemenu#{$name} { 86 | .front { 87 | @if $padding != map-get($swipemenu, padding) { 88 | padding: $padding; 89 | } 90 | } 91 | > .action { 92 | @if $action-width != map-get($swipemenu, action-width) { 93 | width: $action-width; 94 | } 95 | @if $action-bgcolor != map-get($swipemenu, action-bgcolor) { 96 | background-color: $action-bgcolor; 97 | } 98 | @if $action-color != map-get($swipemenu, action-color) { 99 | color: $action-color; 100 | } 101 | > .item { 102 | &:first-child { 103 | @if $action-first-bgcolor != map-get($swipemenu, action-first-bgcolor) { 104 | background-color: $action-first-bgcolor; 105 | } 106 | } 107 | } 108 | } 109 | // 增量扩展 110 | @content; 111 | } 112 | } 113 | 114 | // 调用本文件时载入swipemenu基础构造 115 | .yo-swipemenu { 116 | @include _swipemenu; 117 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/element/yo-switch.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | 3 | // 定义switch的基础构造 4 | @mixin _switch { 5 | display: inline-block; 6 | margin: -.05rem 0; 7 | > input { 8 | display: none; 9 | } 10 | > .track { 11 | display: inline-block; 12 | position: relative; 13 | width: .50rem; 14 | height: .3rem; 15 | padding: .01rem; 16 | border-radius: .16rem; 17 | background-color: map-get($switch, bgcolor); 18 | vertical-align: middle; 19 | > .handle { 20 | position: absolute; 21 | z-index: 1; 22 | top: .01rem; 23 | left: .01rem; 24 | @include square(.28rem); 25 | border-radius: .14rem; 26 | background-color: map-get($switch, thumb-color); 27 | box-shadow: 0 .01rem .03rem rgba(0, 0, 0, .3); 28 | @include transition(all .1s ease-out); 29 | } 30 | &::after { 31 | position: absolute; 32 | top: .01rem; 33 | right: .01rem; 34 | bottom: .01rem; 35 | left: .01rem; 36 | content: "\0020"; 37 | background-color: map-get($switch, follow-bgcolor); 38 | border-radius: .16rem; 39 | @include transition(transform .13s ease-out); 40 | } 41 | } 42 | // 拖动时，滑块变宽 43 | > .track.moving { 44 | > .handle { 45 | width: 0.34rem; 46 | } 47 | } 48 | // 拖动和选中时，隐藏跟随色块 49 | > .track.moving, 50 | > input:checked + .track { 51 | &::after { 52 | @include transform(scale3d(0, 0, 0)); 53 | } 54 | } 55 | > input:checked + .track { 56 | background-color: map-get($switch, on-bgcolor); 57 | > .handle { 58 | @include transform(translate3d(.2rem, 0, 0)); 59 | } 60 | } 61 | > input:disabled + .track { 62 | opacity: .4; 63 | } 64 | } 65 | 66 | /** 67 | * @module element 68 | * @method yo-switch 69 | * @version 3.0.0 70 | * @description 构造yo-switch的自定义使用方法 71 | * @demo http://ued.qunar.com/hy2/yo/demo/src/html/element/yo-switch.html 72 | * @param {String} $name 定义扩展名称 <3.0.0> 73 | * @param {Color} $on-bgcolor 定义switch激活背景色 <3.0.0> 74 | * @param {Color} $bgcolor 定义switch背景色 <3.0.0> 75 | * @param {Color} $follow-bgcolor 定义switch跟随背景色 <3.0.0> 76 | * @param {Color} $thumb-color 定义switch滑块色 <3.0.0> 77 | */ 78 | 79 | @mixin yo-switch( 80 | $name: default, 81 | $on-bgcolor: default, 82 | $bgcolor: default, 83 | $follow-bgcolor: default, 84 | $thumb-color: default) { 85 | // 区别是否新增实例还是修改本身 86 | $name: if($name == default, "", "-#{$name}"); 87 | // 如果值为default，则取config的定义 88 | @if $bgcolor == default { 89 | $bgcolor: map-get($switch, bgcolor); 90 | } 91 | @if $on-bgcolor == default { 92 | $on-bgcolor: map-get($switch, on-bgcolor); 93 | } 94 | @if $follow-bgcolor == default { 95 | $follow-bgcolor: map-get($switch, follow-bgcolor); 96 | } 97 | @if $thumb-color == default { 98 | $thumb-color: map-get($switch, thumb-color); 99 | } 100 | .yo-switch#{$name} { 101 | > .track { 102 | @if $bgcolor != map-get($switch, bgcolor) { 103 | background-color: $bgcolor; 104 | } 105 | > .handle { 106 | @if $thumb-color != map-get($switch, thumb-color) { 107 | background-color: $thumb-color; 108 | } 109 | } 110 | &::after { 111 | @if $follow-bgcolor != map-get($switch, follow-bgcolor) { 112 | background-color: $follow-bgcolor; 113 | } 114 | } 115 | } 116 | > input:checked + .track { 117 | @if $on-bgcolor != map-get($switch, on-bgcolor) { 118 | background-color: $on-bgcolor; 119 | } 120 | } 121 | // 增量扩展 122 | @content; 123 | } 124 | } 125 | 126 | // 调用本文件时载入switch基础构造 127 | .yo-switch { 128 | @include _switch; 129 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/fragment/yo-breadcrumb.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | 3 | // 定义breadcrumb的基础构造 4 | @mixin _breadcrumb { 5 | @include flexbox; 6 | height: map-get($breadcrumb, height); 7 | line-height: map-get($breadcrumb, height); 8 | padding: 0 .1rem; 9 | background-color: map-get($breadcrumb, bgcolor); 10 | color: map-get($breadcrumb, color); 11 | > .item { 12 | overflow: hidden; 13 | height: 100%; 14 | &:not(:last-child) { 15 | padding-right: map-get($breadcrumb, item-space); 16 | &::after { 17 | display: inline-block; 18 | overflow: hidden; 19 | padding-left: map-get($breadcrumb, item-space); 20 | font-family: map-get($ico, font-name); 21 | content: map-get($breadcrumb, arrow-content); 22 | vertical-align: top; 23 | color: map-get($breadcrumb, arrow-color); 24 | } 25 | } 26 | } 27 | } 28 | 29 | /** 30 | * @module fragment 31 | * @method yo-breadcrumb 32 | * @version 3.0.0 33 | * @description 构造面包屑的自定义使用方法 34 | * @demo http://ued.qunar.com/hy2/yo/demo/src/html/fragment/yo-breadcrumb.html 35 | * @param {String} $name 定义扩展名称 <3.0.0> 36 | * @param {Length} $height 面包屑高度 <3.0.0> 37 | * @param {Color} $bgcolor 面包屑背景色 <3.0.0> 38 | * @param {Color} $color 面包屑文本色 <3.0.0> 39 | * @param {Color} $arrow-color 面包屑间隔色 <3.0.0> 40 | * @param {Color} $arrow-content 面包屑间隔符号（可以是自定义的iconfont编码） <3.0.0> 41 | * @param {Length} $item-space 面包屑子项间隙 <3.0.0> 42 | */ 43 | 44 | @mixin yo-breadcrumb( 45 | $name: default, 46 | $height: default, 47 | $bgcolor: default, 48 | $color: default, 49 | $arrow-color: default, 50 | $arrow-content: default, 51 | $item-space: default) { 52 | // 区别是否新增实例还是修改本身 53 | $name: if($name == default, "", "-#{$name}"); 54 | // 如果值为default，则取config的定义 55 | @if $height == default { 56 | $height: map-get($breadcrumb, height); 57 | } 58 | @if $bgcolor == default { 59 | $bgcolor: map-get($breadcrumb, bgcolor); 60 | } 61 | @if $color == default { 62 | $color: map-get($breadcrumb, color); 63 | } 64 | @if $arrow-color == default { 65 | $arrow-color: map-get($breadcrumb, arrow-color); 66 | } 67 | @if $arrow-content == default { 68 | $arrow-content: map-get($breadcrumb, arrow-content); 69 | } 70 | @if $item-space == default { 71 | $item-space: map-get($breadcrumb, item-space); 72 | } 73 | .yo-breadcrumb#{$name} { 74 | // 如果$height不等于config设定，则重绘高度 75 | @if $height != map-get($breadcrumb, height) { 76 | height: $height; 77 | line-height: $height; 78 | } 79 | // 如果$bgcolor不等于config设定，则重绘背景色 80 | @if $bgcolor != map-get($breadcrumb, bgcolor) { 81 | background-color: $bgcolor; 82 | } 83 | // 如果$color不等于config设定，则重绘文本色 84 | @if $color != map-get($breadcrumb, color) { 85 | color: $color; 86 | } 87 | > .item { 88 | &:not(:last-child) { 89 | // 如果$item-space不等于config设定，则重绘间隙 90 | @if $item-space != map-get($breadcrumb, item-space) { 91 | padding-right: $item-space; 92 | } 93 | &::after { 94 | // 如果$item-space不等于config设定，则重绘间隙 95 | @if $item-space != map-get($breadcrumb, item-space) { 96 | padding-left: $item-space; 97 | } 98 | // 如果$arrow-content不等于config设定，则重绘间隔符号 99 | @if $arrow-content != map-get($breadcrumb, arrow-content) { 100 | content: $arrow-content; 101 | } 102 | // 如果$arrow-color不等于config设定，则重绘间隔色 103 | @if $arrow-color != map-get($breadcrumb, arrow-color) { 104 | color: $arrow-color; 105 | } 106 | } 107 | } 108 | } 109 | 110 | // 增量扩展 111 | @content; 112 | } 113 | } 114 | 115 | // 调用本文件时载入breadcrumb基础构造 116 | .yo-breadcrumb { 117 | @include _breadcrumb; 118 | } -------------------------------------------------------------------------------- /dev/scripts/app-search.js: -------------------------------------------------------------------------------- 1 | /******/ (function(modules) { // webpackBootstrap 2 | /******/ // The module cache 3 | /******/ var installedModules = {}; 4 | /******/ 5 | /******/ // The require function 6 | /******/ function __webpack_require__(moduleId) { 7 | /******/ 8 | /******/ // Check if module is in cache 9 | /******/ if(installedModules[moduleId]) { 10 | /******/ return installedModules[moduleId].exports; 11 | /******/ } 12 | /******/ // Create a new module (and put it into the cache) 13 | /******/ var module = installedModules[moduleId] = { 14 | /******/ i: moduleId, 15 | /******/ l: false, 16 | /******/ exports: {} 17 | /******/ }; 18 | /******/ 19 | /******/ // Execute the module function 20 | /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 21 | /******/ 22 | /******/ // Flag the module as loaded 23 | /******/ module.l = true; 24 | /******/ 25 | /******/ // Return the exports of the module 26 | /******/ return module.exports; 27 | /******/ } 28 | /******/ 29 | /******/ 30 | /******/ // expose the modules object (__webpack_modules__) 31 | /******/ __webpack_require__.m = modules; 32 | /******/ 33 | /******/ // expose the module cache 34 | /******/ __webpack_require__.c = installedModules; 35 | /******/ 36 | /******/ // define getter function for harmony exports 37 | /******/ __webpack_require__.d = function(exports, name, getter) { 38 | /******/ if(!__webpack_require__.o(exports, name)) { 39 | /******/ Object.defineProperty(exports, name, { enumerable: true, get: getter }); 40 | /******/ } 41 | /******/ }; 42 | /******/ 43 | /******/ // define __esModule on exports 44 | /******/ __webpack_require__.r = function(exports) { 45 | /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { 46 | /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); 47 | /******/ } 48 | /******/ Object.defineProperty(exports, '__esModule', { value: true }); 49 | /******/ }; 50 | /******/ 51 | /******/ // create a fake namespace object 52 | /******/ // mode & 1: value is a module id, require it 53 | /******/ // mode & 2: merge all properties of value into the ns 54 | /******/ // mode & 4: return value when already ns object 55 | /******/ // mode & 8|1: behave like require 56 | /******/ __webpack_require__.t = function(value, mode) { 57 | /******/ if(mode & 1) value = __webpack_require__(value); 58 | /******/ if(mode & 8) return value; 59 | /******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value; 60 | /******/ var ns = Object.create(null); 61 | /******/ __webpack_require__.r(ns); 62 | /******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value }); 63 | /******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key)); 64 | /******/ return ns; 65 | /******/ }; 66 | /******/ 67 | /******/ // getDefaultExport function for compatibility with non-harmony modules 68 | /******/ __webpack_require__.n = function(module) { 69 | /******/ var getter = module && module.__esModule ? 70 | /******/ function getDefault() { return module['default']; } : 71 | /******/ function getModuleExports() { return module; }; 72 | /******/ __webpack_require__.d(getter, 'a', getter); 73 | /******/ return getter; 74 | /******/ }; 75 | /******/ 76 | /******/ // Object.prototype.hasOwnProperty.call 77 | /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; 78 | /******/ 79 | /******/ // __webpack_public_path__ 80 | /******/ __webpack_require__.p = ""; 81 | /******/ 82 | /******/ 83 | /******/ // Load entry module and return exports 84 | /******/ return __webpack_require__(__webpack_require__.s = "../scripts/app-search.js"); 85 | /******/ }) 86 | /************************************************************************/ 87 | /******/ ({ 88 | 89 | /***/ "../scripts/app-search.js": 90 | /*!********************************!*\ 91 | !*** ../scripts/app-search.js ***! 92 | \********************************/ 93 | /*! no static exports found */ 94 | /***/ (function(module, exports) { 95 | 96 | eval("$('#root').html('search')\n\n//# sourceURL=webpack:///../scripts/app-search.js?"); 97 | 98 | /***/ }) 99 | 100 | /******/ }); -------------------------------------------------------------------------------- /dev/scripts/app-profile.js: -------------------------------------------------------------------------------- 1 | /******/ (function(modules) { // webpackBootstrap 2 | /******/ // The module cache 3 | /******/ var installedModules = {}; 4 | /******/ 5 | /******/ // The require function 6 | /******/ function __webpack_require__(moduleId) { 7 | /******/ 8 | /******/ // Check if module is in cache 9 | /******/ if(installedModules[moduleId]) { 10 | /******/ return installedModules[moduleId].exports; 11 | /******/ } 12 | /******/ // Create a new module (and put it into the cache) 13 | /******/ var module = installedModules[moduleId] = { 14 | /******/ i: moduleId, 15 | /******/ l: false, 16 | /******/ exports: {} 17 | /******/ }; 18 | /******/ 19 | /******/ // Execute the module function 20 | /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 21 | /******/ 22 | /******/ // Flag the module as loaded 23 | /******/ module.l = true; 24 | /******/ 25 | /******/ // Return the exports of the module 26 | /******/ return module.exports; 27 | /******/ } 28 | /******/ 29 | /******/ 30 | /******/ // expose the modules object (__webpack_modules__) 31 | /******/ __webpack_require__.m = modules; 32 | /******/ 33 | /******/ // expose the module cache 34 | /******/ __webpack_require__.c = installedModules; 35 | /******/ 36 | /******/ // define getter function for harmony exports 37 | /******/ __webpack_require__.d = function(exports, name, getter) { 38 | /******/ if(!__webpack_require__.o(exports, name)) { 39 | /******/ Object.defineProperty(exports, name, { enumerable: true, get: getter }); 40 | /******/ } 41 | /******/ }; 42 | /******/ 43 | /******/ // define __esModule on exports 44 | /******/ __webpack_require__.r = function(exports) { 45 | /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { 46 | /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); 47 | /******/ } 48 | /******/ Object.defineProperty(exports, '__esModule', { value: true }); 49 | /******/ }; 50 | /******/ 51 | /******/ // create a fake namespace object 52 | /******/ // mode & 1: value is a module id, require it 53 | /******/ // mode & 2: merge all properties of value into the ns 54 | /******/ // mode & 4: return value when already ns object 55 | /******/ // mode & 8|1: behave like require 56 | /******/ __webpack_require__.t = function(value, mode) { 57 | /******/ if(mode & 1) value = __webpack_require__(value); 58 | /******/ if(mode & 8) return value; 59 | /******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value; 60 | /******/ var ns = Object.create(null); 61 | /******/ __webpack_require__.r(ns); 62 | /******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value }); 63 | /******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key)); 64 | /******/ return ns; 65 | /******/ }; 66 | /******/ 67 | /******/ // getDefaultExport function for compatibility with non-harmony modules 68 | /******/ __webpack_require__.n = function(module) { 69 | /******/ var getter = module && module.__esModule ? 70 | /******/ function getDefault() { return module['default']; } : 71 | /******/ function getModuleExports() { return module; }; 72 | /******/ __webpack_require__.d(getter, 'a', getter); 73 | /******/ return getter; 74 | /******/ }; 75 | /******/ 76 | /******/ // Object.prototype.hasOwnProperty.call 77 | /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; 78 | /******/ 79 | /******/ // __webpack_public_path__ 80 | /******/ __webpack_require__.p = ""; 81 | /******/ 82 | /******/ 83 | /******/ // Load entry module and return exports 84 | /******/ return __webpack_require__(__webpack_require__.s = "../scripts/app-profile.js"); 85 | /******/ }) 86 | /************************************************************************/ 87 | /******/ ({ 88 | 89 | /***/ "../scripts/app-profile.js": 90 | /*!*********************************!*\ 91 | !*** ../scripts/app-profile.js ***! 92 | \*********************************/ 93 | /*! no static exports found */ 94 | /***/ (function(module, exports) { 95 | 96 | eval("$('#root').html('profile')\n\n//# sourceURL=webpack:///../scripts/app-profile.js?"); 97 | 98 | /***/ }) 99 | 100 | /******/ }); -------------------------------------------------------------------------------- /src/styles/yo/lib/element/yo-badge.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | 3 | // 定义badge的基础构造 4 | @mixin _badge { 5 | @include align(inline-flex); 6 | // 内容不为空时，约束最小宽度和高度 7 | &:not(:empty) { 8 | min-width: .16rem; 9 | min-height: .16rem; 10 | } 11 | // 内容为空时，约束最小宽度和高度 12 | &:empty { 13 | min-width: .08rem; 14 | min-height: .08rem; 15 | vertical-align: super; 16 | } 17 | padding: map-get($badge, padding); 18 | @include border( 19 | $border-width: map-get($badge, border-width), 20 | $border-color: map-get($badge, border-color), 21 | $radius: map-get($badge, radius) 22 | ); 23 | background-color: map-get($badge, bgcolor); 24 | color: map-get($badge, color); 25 | font-size: map-get($badge, font-size); 26 | line-height: 1; 27 | } 28 | 29 | /** 30 | * @module element 31 | * @method yo-badge 32 | * @version 3.0.0 33 | * @description 构造提醒气泡的自定义使用方法，可以扩展为：tag,文字ico等形态 34 | * @demo http://ued.qunar.com/hy2/yo/demo/src/html/element/yo-badge.html 35 | * @param {String} $name 定义扩展名称 <3.0.0> 36 | * @param {Length} $padding 内补白 <3.0.0> 37 | * @param {Length} $border-width 边框厚度 <3.0.0> 38 | * @param {Color} $border-color 边框色 <3.0.0> 39 | * @param {Color} $bgcolor 背景色 <3.0.0> 40 | * @param {Color} $color 文本色 <3.0.0> 41 | * @param {Length} $radius 圆角半径长度 <3.0.0> 42 | * @param {Length} $font-size 字号大小 <3.0.0> 43 | */ 44 | 45 | @mixin yo-badge( 46 | $name: default, 47 | $padding: default, 48 | $border-width: default, 49 | $border-color: default, 50 | $bgcolor: default, 51 | $color: default, 52 | $radius: default, 53 | $font-size: default) { 54 | // 区别是否新增实例还是修改本身 55 | $name: if($name == default, "", "-#{$name}"); 56 | // 如果值为default，则取config的定义 57 | @if $padding == default { 58 | $padding: map-get($badge, padding); 59 | } 60 | @if $border-width == default { 61 | $border-width: map-get($badge, border-width); 62 | } 63 | @if $border-color == default { 64 | $border-color: map-get($badge, border-color); 65 | } 66 | @if $bgcolor == default { 67 | $bgcolor: map-get($badge, bgcolor); 68 | } 69 | @if $color == default { 70 | $color: map-get($badge, color); 71 | } 72 | @if $radius == default { 73 | $radius: map-get($badge, radius); 74 | } 75 | @if $font-size == default { 76 | $font-size: map-get($badge, font-size); 77 | } 78 | .yo-badge#{$name} { 79 | // 如果$padding不等于config设定，则重绘内补白 80 | @if $padding != map-get($badge, padding) { 81 | padding: $padding; 82 | } 83 | // 如果$radius不等于config设定，则重绘容器圆角 84 | @if $radius != map-get($badge, radius) { 85 | border-radius: $radius; 86 | } 87 | &::after { 88 | // 如果$border-width不等于config设定，则重绘边框厚度 89 | @if $border-width != map-get($badge, border-width) { 90 | border-width: $border-width; 91 | } 92 | // 如果$border-color不等于config设定，则重绘边框颜色 93 | @if $border-color != map-get($badge, border-color) { 94 | border-color: $border-color; 95 | } 96 | // 如果$radius不等于config设定，则重绘边框圆角 97 | @if $radius != map-get($badge, radius) { 98 | @include responsive(retina1x) { 99 | border-radius: $radius; 100 | } 101 | @include responsive(retina2x) { 102 | border-radius: $radius * 2; 103 | } 104 | @include responsive(retina3x) { 105 | border-radius: $radius * 3; 106 | } 107 | } 108 | } 109 | // 如果$bgcolor不等于config设定，则重绘背景色 110 | @if $bgcolor != map-get($badge, bgcolor) { 111 | background-color: $bgcolor; 112 | } 113 | // 如果$color不等于config设定，则重绘文本色 114 | @if $color != map-get($badge, color) { 115 | color: $color; 116 | } 117 | // 如果$font-size不等于config设定，则重绘字号 118 | @if $font-size != map-get($badge, font-size) { 119 | font-size: $font-size; 120 | } 121 | // 增量扩展 122 | @content; 123 | } 124 | } 125 | 126 | // 调用本文件时载入气泡基础构造 127 | .yo-badge { 128 | @include _badge; 129 | } -------------------------------------------------------------------------------- /src/styles/yo/lib/fragment/yo-vcode.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "yo-modal"; 3 | 4 | // 定义vcode的基础构造 5 | @mixin _vcode { 6 | @include flexbox; 7 | height: map-get($vcode, height); 8 | line-height: map-get($vcode, height); 9 | background-color: map-get($vcode, bgcolor); 10 | text-align: center; 11 | font-size: map-get($vcode, font-size); 12 | font-weight: bold; 13 | @include border( 14 | $border-width: map-get($vcode, border-width), 15 | $border-color: map-get($vcode, border-color), 16 | $radius: map-get($vcode, radius) 17 | ); 18 | > .value { 19 | display: block; 20 | @include flex; 21 | &:not(:last-child) { 22 | @include border( 23 | $border-width: 0 map-get($vcode, border-width) 0 0, 24 | $border-color: map-get($vcode, border-color) 25 | ); 26 | } 27 | } 28 | > .input { 29 | position: absolute; 30 | left: -100%; 31 | opacity: 0; 32 | } 33 | } 34 | 35 | /** 36 | * @module fragment 37 | * @method yo-vcode 38 | * @version 3.0.0 39 | * @description 构造验证码/密码输入框的自定义使用方法 40 | * @demo http://ued.qunar.com/hy2/yo/demo/src/html/fragment/yo-vcode.html 41 | * @param {String} $name 定义扩展名称 <3.0.0> 42 | * @param {Length} $height 高度 <3.0.0> 43 | * @param {Color} $bgcolor 背景色 <3.0.0> 44 | * @param {Length} $radius 圆角半径长度 <3.0.0> 45 | * @param {Length} $font-size 字号大小 <3.0.0> 46 | * @param {Length} $border-width 边框厚度 <3.0.0> 47 | * @param {Color} $border-color 边框色 <3.0.0> 48 | */ 49 | 50 | @mixin yo-vcode( 51 | $name: default, 52 | $height: default, 53 | $bgcolor: default, 54 | $radius: default, 55 | $font-size: default, 56 | $border-width: default, 57 | $border-color: default) { 58 | // 区别是否新增实例还是修改本身 59 | $name: if($name == default, "", "-#{$name}"); 60 | // 如果值为default，则取config的定义 61 | @if $height == default { 62 | $height: map-get($vcode, height); 63 | } 64 | @if $bgcolor == default { 65 | $bgcolor: map-get($vcode, bgcolor); 66 | } 67 | @if $radius == default { 68 | $radius: map-get($vcode, radius); 69 | } 70 | @if $font-size == default { 71 | $font-size: map-get($vcode, font-size); 72 | } 73 | @if $border-width == default { 74 | $border-width: map-get($vcode, border-width); 75 | } 76 | @if $border-color == default { 77 | $border-color: map-get($vcode, border-color); 78 | } 79 | 80 | .yo-vcode#{$name} { 81 | @if $height != map-get($vcode, height) { 82 | height: $height; 83 | line-height: $height; 84 | } 85 | @if $bgcolor != map-get($vcode, bgcolor) { 86 | background-color: $bgcolor; 87 | } 88 | @if $font-size != map-get($vcode, font-size) { 89 | font-size: $font-size; 90 | } 91 | @if $radius != map-get($vcode, radius) { 92 | border-radius: $radius; 93 | } 94 | &::after { 95 | // 如果$border-width不等于config设定，则重绘边框相关 96 | @if $border-width != map-get($vcode, border-width) { 97 | border-width: $border-width; 98 | } 99 | // 如果$border-color不等于config设定，则重绘边框色 100 | @if $border-color != map-get($vcode, border-color) { 101 | border-color: $border-color; 102 | } 103 | // 如果$radius不等于config设定，则重绘边框圆角 104 | @if $radius != map-get($vcode, radius) { 105 | @include responsive(retina1x) { 106 | border-radius: $radius; 107 | } 108 | @include responsive(retina2x) { 109 | border-radius: $radius * 2; 110 | } 111 | @include responsive(retina3x) { 112 | border-radius: $radius * 3; 113 | } 114 | } 115 | } 116 | > .value:not(:last-child)::after { 117 | // 如果$border-width不等于config设定，则重绘边框相关 118 | @if $border-width != map-get($vcode, border-width) { 119 | border-right-width: $border-width; 120 | } 121 | // 如果$border-color不等于config设定，则重绘边框色 122 | @if $border-color != map-get($vcode, border-color) { 123 | border-color: $border-color; 124 | } 125 | } 126 | // 增量扩展 127 | @content; 128 | } 129 | } 130 | 131 | // 调用本文件时载入vcode基础构造 132 | .yo-vcode { 133 | @include _vcode; 134 | } --------------------------------------------------------------------------------