'),
37 | $hander = $('');
38 | /*定义变量*/
39 | var _api = {},
40 | _value = options.defaultValue,
41 | _offset = $this.offset().left,
42 | _width = $this.width(),
43 | _length = _width / (options.max - options.min ),
44 | _position = $this.offset().left,
45 | isMouseDown = false;
46 | /*添加节点*/
47 | $this.append($track);
48 | $this.append($hander);
49 | /*共有方法*/
50 | _api.setValue = function(value){
51 | _value = value || _value;
52 | _value = Math.min(_value,options.max);
53 | _value = Math.max(_value,options.min);
54 | $track.css('width',(_value-options.min)*_length);
55 | $hander.css('left',(_value-options.min)*_length);
56 | };
57 | _api.setValue();
58 | options.startFn(_value);
59 | /*判断是否可移动*/
60 | if(!options.disable){
61 | $track.css('background','#ccc');
62 | return false;
63 | }
64 | /*添加移动端事件*/
65 | $hander.on('touchstart',function(e){
66 | isMouseDown = true;
67 | });
68 | $document.on('touchmove',function(e){
69 | if(isMouseDown){
70 | e.stopPropagation();
71 | e.preventDefault();
72 | var move = e.originalEvent.changedTouches[0].pageX - _offset;
73 | move = Math.max(0,move);
74 | move = Math.min(move,_width);
75 | $track.css('width',move);
76 | $hander.css('left',move);
77 | _value = Math.round(move/(_length*options.step))*options.step+options.min;
78 | options.moveFn(_value);
79 | }
80 | });
81 | $document.on('touchend',function(e){
82 | if(isMouseDown){
83 | isMouseDown = false;
84 | options.endFn(_value);
85 | }
86 | });
87 | });
88 | }
89 | });
90 | })(window.jQuery || $);
--------------------------------------------------------------------------------
/dist/js/scale_750.js:
--------------------------------------------------------------------------------
1 | (function(doc, win) {
2 | var docEl = doc.documentElement,
3 | isIOS = navigator.userAgent.match(/iphone|ipod|ipad|android/gi),
4 | dpr = isIOS ? Math.min(win.devicePixelRatio, 3) : 1,
5 | resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
6 |
7 | /*docEl.dataset.dpr = dpr;
8 | var meta = doc.getElementsByTagName('meta'),
9 | head = doc.getElementsByTagName('head')[0];
10 |
11 | *判断是否有vierport;
12 | *如果有则删除
13 |
14 | function removeViewport(){
15 | for(var i = 0; i < meta.length; i++){
16 | if(meta[i].getAttribute('name') === 'viewport' ){
17 | head.removeChild(meta[i]);
18 | }
19 | }
20 | };
21 | removeViewport();
22 |
23 | //创建节点
24 | function createViewport(){
25 | metaEl = doc.createElement('meta');
26 | metaEl.setAttribute('name', 'viewport');
27 | metaEl.setAttribute('content', 'initial-scale=' + 1/dpr + ', maximum-scale=' + 1/dpr + ', minimum-scale=' + 1/dpr + ', user-scalable=no');
28 | head.insertBefore(metaEl,head.children[0]);
29 | };
30 | createViewport();
31 | */
32 | var recalc = function() {
33 | var width = docEl.clientWidth;
34 | if (width / dpr > 750) {
35 | width = 750 * dpr;
36 | }
37 | docEl.style.fontSize = 100 * (width / 750) + 'px';
38 | };
39 | recalc();
40 | if (!doc.addEventListener) return;
41 | win.addEventListener(resizeEvt, recalc, false);
42 | })(document, window);
--------------------------------------------------------------------------------
/dist/js/swiper.js:
--------------------------------------------------------------------------------
1 | /*
2 | *Swiper插件
3 | *日期：2017-3-24
4 | *config参数说明
5 | *---------
6 | *container：必填项操作的DOM
7 | *wrapper：操作父dom
8 | *slide：滚动列表
9 | *initialSlide:从第几项开始
10 | *direction：滚动方向(horizontal(横向),vertical(纵向))
11 | *autoplay: 自由滚动
12 | *pagination：索引
13 | *startFn：开始函数
14 | *endFn: 滚动结束函数
15 | */
16 | ;(function($){
17 | function Swiper(container,config){
18 | if(!container && !(typeof container == 'string')){
19 | alert('参数不对！');
20 | };
21 | this.config = {
22 | wrapper: '',
23 | slide: '',
24 | initialSlide: 0,
25 | direction: 'horizontal',
26 | autoplay: 0,
27 | pagination: '',
28 | startFn: function(){},
29 | endFn: function(){}
30 | };
31 | //默认参数扩展
32 | if(config && $.isPlainObject(config)){
33 | $.extend(this.config , config);
34 | };
35 | /*创建变量*/
36 |
37 | this.container = $(container);
38 | this.wrapper = this.config.wrapper ? this.container.find(this.config.wrapper) : this.container.find('.swiper-wrapper');
39 | this.slide = this.config.slide ? this.wrapper.find(this.config.slide) : this.wrapper.find('.swiper-slide');
40 | this.pagination = this.config.pagination ? this.container.find(this.config.pagination) : '';
41 | this.direction = this.config.direction;
42 | this.initialSlide = this.config.initialSlide || 0;
43 | this.step = this.direction == 'horizontal' ? this.slide.first().width() : this.slide.first().height();
44 | this.len = this.slide.length;
45 | this.num = 0;
46 | this.translate = 0;
47 | this.translateChange = 0;
48 | this.startX = 0;
49 | this.startY = 0;
50 | this.flag = false;
51 | this.timer = null;
52 | this.autoplay = this.config.autoplay ? this.config.autoplay : 0;
53 |
54 | this.init();
55 | };
56 |
57 | Swiper.prototype = {
58 | init: function(){
59 | this.methods();
60 | this._initialSlide();
61 | this._pagination();
62 | this._current(this.num);
63 | this.value = this.number;
64 | },
65 | _initialSlide: function(number){
66 | var _this = this;
67 | if(number || number == 0){
68 | _this.num = number;
69 | _this._current(_this.num);
70 | _this.translate = -_this.num * _this.step;
71 | _this._tarnslate(_this.translate);
72 | }else if(_this.initialSlide){
73 | _this.num = _this.initialSlide;
74 | _this._current(_this.num);
75 | _this.translate = -_this.num * _this.step;
76 | _this._tarnslate(_this.translate);
77 | }
78 | },
79 | _pagination: function(){
80 | var _this = this;
81 | if(_this.pagination){
82 | var _html = '';
83 | for(var i = 0; i< _this.len; i++){
84 | _html += '';
85 | }
86 | this.pagination.html(_html);
87 | }
88 | },
89 | _tarnslate: function(number){
90 | if(this.direction == 'horizontal'){
91 | this.container.addClass('horizontal');
92 | this.wrapper.css('transform','translate3d('+ number +'px,0,0)');
93 | }else if(this.direction == 'vertical'){
94 | this.container.addClass('vertical');
95 | this.wrapper.css('transform','translate3d(0,'+ number +'px,0)');
96 | }
97 | },
98 | methods: function(){
99 | var _this = this;
100 | this.wrapper.on('touchstart', function(e){
101 | _this.touchstart(e);
102 | });
103 | this.wrapper.on('touchmove', function(e){
104 | _this.touchsmove(e);
105 | });
106 | this.wrapper.on('touchend', function(e){
107 | _this.touchend(e);
108 | });
109 | this._autoplay();
110 | },
111 | _autoplay: function(){
112 | var _this = this;
113 | if(!_this.autoplay) return false;
114 | this.timer = setInterval(function(){
115 | _this._interval(_this)
116 | },_this.autoplay);
117 | },
118 | _interval:function(_this){
119 | _this.num++;
120 | if(_this.num >= _this.len){
121 | _this.num = 0;
122 | };
123 | _this.translate = -_this.num * _this.step;
124 | _this._current(_this.num);
125 | _this._tarnslate(_this.translate);
126 | _this.wrapper.css('transition','all .6s cubic-bezier(0.12, 0.52, 0.58, 0.88) 0s');
127 | },
128 | _current: function(number){
129 | var _this = this;
130 | if(_this.pagination){
131 | _this.pagination.find('span').removeClass('swiper-pagination-bullet-active').eq(number).addClass('swiper-pagination-bullet-active');
132 | }
133 |
134 | this.slide.removeClass('swiper-slide-active').eq(number).addClass('swiper-slide-active');
135 | },
136 | touchstart: function(e){
137 | var _this = this,
138 | ev = e.originalEvent ? e.originalEvent.changedTouches[0] : e.changedTouches[0];
139 | clearInterval(_this.timer);
140 | _this.startX = ev.pageX ? ev.pageX : ev.clientX;
141 | _this.startY = ev.pageY ? ev.pageY : ev.clientY;
142 | _this.flag = true;
143 | _this.num = _this.translate / _this.step;
144 | _this._tarnslate(_this.translate);
145 | _this.translateChange = _this.translate;
146 | _this.wrapper.css('transition','none');
147 | _this.config.startFn(_this.num);
148 | },
149 | touchsmove: function(e){
150 | var _this = this,
151 | ev = e.originalEvent ? e.originalEvent.changedTouches[0] : e.changedTouches[0],
152 | endX = ev.pageX ? ev.pageX : ev.clientX,
153 | endY = ev.pageY ? ev.pageY : ev.clientY;
154 | if(_this.flag){
155 | e.preventDefault();
156 | if(this.direction == 'horizontal'){
157 | _this.translate = endX - _this.startX + _this.translateChange;
158 | }else if(this.direction == 'vertical'){
159 | _this.translate = endY - _this.startY + _this.translateChange;
160 | };
161 | _this._tarnslate(_this.translate);
162 | };
163 | },
164 | touchend: function(e){
165 | var _this = this;
166 | ev = e.originalEvent ? e.originalEvent.changedTouches[0] : e.changedTouches[0],
167 | endX = ev.pageX ? ev.pageX : ev.clientX,
168 | endY = ev.pageY ? ev.pageY : ev.clientY;
169 | _this.flag = false;
170 | if(_this.translate < 0){
171 | _this.num = Math.abs(Math.round(_this.translate / _this.step));
172 | }else{
173 | _this.num = 0;
174 | }
175 | if(_this.num < 0){
176 | _this.num = 0;
177 | _this.translate = 0;
178 | }else if(_this.num >= _this.len){
179 | _this.num = _this.len-1;
180 | _this.translate = -_this.num * _this.step;
181 | }else{
182 | _this.translate = -_this.num * _this.step;
183 | }
184 | _this.wrapper.css('transition','all .6s cubic-bezier(0.12, 0.52, 0.58, 0.88) 0s');
185 | _this._current(_this.num);
186 | _this._tarnslate(_this.translate);
187 | _this._autoplay();
188 | _this.config.endFn(_this.num);
189 | }
190 | };
191 |
192 | window.Swiper = Swiper;
193 | })(window.jQuery || $);
--------------------------------------------------------------------------------
/dist/js/tab.js:
--------------------------------------------------------------------------------
1 | /*
2 | *tab
3 | *日期：2017-3-24
4 | *config参数说明
5 | *---------
6 | *defaultIndex:默认项
7 | *event:事件
8 | *activeClass:选中class
9 | *is_slide:是否可滑动
10 | */
11 | ;(function($){
12 | $.fn.extend({
13 | tab:function(options){
14 | var config = {
15 | defaultIndex : 0,
16 | event:'click',
17 | activeClass : 'active',
18 | is_slide : false
19 | };
20 | var options = $.extend(true, config, options),
21 | window_h =$(window).outerWidth();
22 | //选项卡this指通过当前选择器获取的jQuery对象
23 | var tab = $(this).find('.ui-tab-nav-item'),
24 | tabContent = $(this).find('.ui-tab-content');
25 | /*判断是否有默认选项值*/
26 | if( config.defaultIndex ){
27 | tab.removeClass(config.activeClass).eq(config.defaultIndex).addClass(config.activeClass)
28 | tabContent.children('div').eq(config.defaultIndex).show().siblings().hide();
29 | }
30 | /*判断是否可滑动*/
31 | if( options.is_slide ){
32 | tabContent.addClass('swiper-wrapper').children('div').show();
33 | }
34 | /*操作*/
35 | tab.on(options.event,function(){
36 | var index = $(this).index();
37 | $(this).addClass( options.activeClass ).siblings().removeClass( options.activeClass );
38 | if( options.is_slide ){
39 | tabContent.css({
40 | 'transform':'translate3D(' + (-window_h * index) + 'px,0,0)',
41 | '-webkit-transform':'translate3D(' + (-window_h * index) + 'px,0,0)'
42 | });
43 | }else{
44 | tabContent.children('div').eq(index).show().siblings().hide();
45 | }
46 | });
47 | //return this 使jquery方法可链式操作
48 | return this;
49 | }
50 | });
51 | })(window.jQuery || $);
--------------------------------------------------------------------------------
/dist/js/tips.js:
--------------------------------------------------------------------------------
1 | /*
2 | *Tip
3 | *日期：2017-3-24
4 | *config参数说明
5 | *---------
6 | *text:内容
7 | *delay:延迟时间
8 | */
9 | ;(function($){
10 | function Tip(config){
11 | this.config = {
12 | text:'出错了',
13 | delay : 3000
14 | };
15 | //默认参数扩展
16 | if(config && $.isPlainObject(config)){
17 | $.extend(this.config , config);
18 | };
19 | this.wrap = $('');
20 | this.init();
21 | };
22 | Tip.prototype.init = function(){
23 | var _this = this;
24 | $('body').append(_this.wrap.html(_this.config.text));
25 | _this.show();
26 |
27 | };
28 | Tip.prototype.show = function(){
29 | var _this=this;
30 | setTimeout(function(){
31 | _this.wrap.css({
32 | '-webkit-transform':'translateY(0)',
33 | 'transform':'translateY(0)'
34 | });
35 | },100);
36 | _this.hide();
37 | };
38 | Tip.prototype.hide = function(){
39 | var _this=this;
40 | setTimeout(function(){
41 | _this.wrap.css({
42 | '-webkit-transform':'translateY(-100%)',
43 | 'transform':'translateY(-100%)'
44 | });
45 | },_this.config.delay);
46 | setTimeout(function(){
47 | _this.wrap.remove();
48 | },_this.config.delay + 250);
49 | };
50 | window.Tip=Tip;
51 | $.tip=function(config){
52 | return new Tip(config);
53 | }
54 | })(window.jQuery || $);
--------------------------------------------------------------------------------
/dist/js/toast.js:
--------------------------------------------------------------------------------
1 | /*
2 | *Toast
3 | *日期：2017-3-24
4 | *config参数说明
5 | *---------
6 | *text:内容
7 | *icon:icon样式
8 | *delay:延迟时间
9 | */
10 | ;(function($){
11 | function Toast(config){
12 | this.config = {
13 | text:'我是toast提示',
14 | icon:'',
15 | delay : 3000
16 | };
17 | //默认参数扩展
18 | if(config && $.isPlainObject(config)){
19 | $.extend(this.config , config);
20 | };
21 | this.init();
22 | };
23 | Toast.prototype.init = function(){
24 | var _this = this;
25 | _this.body = $('body');
26 | _this.toastWrap = $('');
27 | _this.toastIcon = $('');
28 | _this.toastText = $('' + _this.config.text + '');
29 |
30 | _this._creatDom();
31 | _this.show();
32 | _this.hide();
33 | };
34 | Toast.prototype._creatDom = function(){
35 | var _this = this;
36 | if(_this.config.icon){
37 | _this.toastWrap.append(_this.toastIcon.addClass(_this.config.icon));
38 | }
39 | _this.toastWrap.append(_this.toastText);
40 | _this.body.append(_this.toastWrap);
41 | };
42 | Toast.prototype.show = function(){
43 | var _this = this;
44 | setTimeout(function(){
45 | _this.toastWrap.removeClass('hide').addClass('show');
46 | },50);
47 | };
48 | Toast.prototype.hide = function(){
49 | var _this = this;
50 | setTimeout(function(){
51 | _this.toastWrap.removeClass('show').addClass('hide');
52 | },_this.config.delay);
53 | setTimeout(function(){
54 | _this.toastWrap.remove();
55 | },_this.config.delay + 250 );
56 | };
57 |
58 | window.Toast=Toast;
59 | $.toast=function(config){
60 | return new Toast(config);
61 | }
62 | })(window.jQuery || $);
--------------------------------------------------------------------------------
/dist/js/turntable.js:
--------------------------------------------------------------------------------
1 | /*
2 | *Turntable
3 | *config参数说明
4 | *---------
5 | *container：必填项操作的DOM
6 | *turntable:转动盘子
7 | *pointer:转动指针
8 | *rotateAngle:角度
9 | *num:抽奖机会值
10 | *flag：转盘转动过程中不可再次触发
11 | *resultIndex：最终要旋转到哪一块，对应this.config.data的下标
12 | *data:转盘样式，a：旋转角度，p：概率（1代表100%），t：需要显示的其它信息（文案or分享）
13 | *type:转动类型 0：指针 1:盘子
14 | *during:转动时长
15 | */
16 | ;(function(){
17 | function Turntable(container,config){
18 | if(!container && !(typeof container == 'string')){
19 | alert('参数不对！');
20 | return false;
21 | };
22 | this.container = container;
23 | this.config = {
24 | turntable: $(this.container).find('#turntable'),
25 | pointer: $(this.container).find('#pointer'),
26 | rotateAngle:0,
27 | num: 5,
28 | flag:true,
29 | resultIndex: 1,
30 | data:[{a:0,p:0.1,t:'30元话费'},{a:45,p:0.1,t:'500M省内流量'},{a:90,p:0.1,t:'100M省内流量'},{a:135,p:0.3,t:'300M省内流量'},{a:180,p:0.1,t:'30元话费'},{a:225,p:0.1,t:'500M省内流量'},{a:270,p:0.1,t:'100M省内流量'},{a:315,p:0.1,t:'300M省内流量'}],
31 | type:0,
32 | during:3,
33 | callback:function(num,msg){}
34 |
35 | };
36 | //默认参数扩展
37 | if(config && $.isPlainObject(config)){
38 | $.extend(this.config , config);
39 | };
40 | this.init();
41 | };
42 | Turntable.prototype = {
43 | init: function(){
44 | this.event();
45 | },
46 | setStyle:function(ele,rotate,during){
47 | $(ele).css({
48 | 'transform': 'rotate('+rotate+'deg)',
49 | '-ms-transform': 'rotate('+rotate+'deg)',
50 | '-webkit-transform': 'rotate('+rotate+'deg)',
51 | '-moz-transform': 'rotate('+rotate+'deg)',
52 | '-o-transform': 'rotate('+rotate+'deg)',
53 | 'transition': 'transform ease-out '+during+'s',
54 | '-moz-transition': '-moz-transform ease-out '+during+'s',
55 | '-webkit-transition': '-webkit-transform ease-out '+during+'s',
56 | '-o-transition': '-o-transform ease-out '+during+'s'
57 | });
58 | },
59 | event:function(){
60 | var _this = this;
61 | pointer = _this.config.pointer;
62 |
63 | $(pointer).on('click',function(){
64 | if(parseInt(_this.config.num)<= 0){
65 | $(_this.config.pointer).addClass('point-disable');
66 | return false;
67 | }
68 | if(_this.config.flag){
69 | _this.result();
70 | }
71 | });
72 |
73 | },
74 | result: function(){
75 | /*
76 | *randNum：用来判断的随机数，1-100
77 | *resultIndex：最终要旋转到哪一块，对应this.config.data的下标
78 | *startPos:判断的角度值起始位置
79 | *endPos:判断的角度值结束位置
80 | *randCircle：// 附加多转几圈，2-3
81 | */
82 | var _this = this,
83 | data = _this.config.data,
84 | rotateAngle = _this.config.rotateAngle,
85 | randNum = Math.ceil(Math.random() * 100),
86 | resultIndex = _this.config.resultIndex,
87 | startPos = 0,
88 | endPos = 0,
89 | randCircle = Math.ceil(Math.random() * 2) + 1,
90 | type = _this.config.type,
91 | turntable = _this.config.turntable,
92 | pointer = _this.config.pointer,
93 | during = _this.config.during;
94 |
95 | // 旋转结束前，不允许再次触发
96 | _this.config.flag = false;
97 | for(var i in data){
98 | startPos = endPos + 1; // 区块的起始值
99 | endPos = endPos + 100 * data[i].p; // 区块的结束值
100 | if(randNum >= startPos && randNum <= endPos){ // 如果随机数落在当前区块，那么获取到最终要旋转到哪一块
101 | resultIndex = i;
102 | break;
103 | }
104 | };
105 | switch (type) {
106 | case 0:
107 | _this.config.rotateAngle = rotateAngle + randCircle * 360 + data[resultIndex].a - rotateAngle % 360;
108 | this.setStyle(pointer,_this.config.rotateAngle,during);
109 | break;
110 | case 1:
111 | _this.config.rotateAngle = rotateAngle - randCircle * 360 - data[resultIndex].a - rotateAngle % 360;
112 | this.setStyle(turntable,_this.config.rotateAngle,during);
113 | break;
114 | };
115 | // 旋转结束后，允许再次触发
116 | setTimeout(function(){
117 | _this.config.flag = true;
118 | _this.config.num--;
119 | // 告诉结果
120 | if(data[resultIndex].t)
121 | {
122 | _this.config.callback(_this.config.num,data[resultIndex].t);
123 | }
124 | if(parseInt(_this.config.num)<= 0){
125 | $(_this.config.pointer).addClass('point-disable');
126 | alert('您已经没有抽奖机会了');
127 | return false;
128 | }
129 | },during*1000);
130 | }
131 | };
132 | window.Turntable = Turntable;
133 | })(window.jQuery || $);
--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
1 | const gulp = require("gulp");
2 | const browserSync = require("browser-sync").create();
3 | const sass = require("gulp-sass");
4 | const sourcemaps = require("gulp-sourcemaps");
5 | const autoprefixer = require("gulp-autoprefixer");
6 | const cleanCSS = require('gulp-clean-css');
7 | const notify = require("gulp-notify");
8 | const rename = require("gulp-rename");
9 | const del = require("del");
10 | const path = require("path");
11 | const fs = require("fs");
12 | const replaceCommon = require("gulp-replace-common");
13 |
14 | const src = "./src/";
15 | const dist = "./dist/";
16 |
17 | const config = {
18 | files: dist + "**/*.*",
19 | html: {
20 | src: dist + "**/*.html",
21 | dest: dist
22 | },
23 | css: {
24 | src: dist + "css/**/*.css",
25 | dest: dist + "css"
26 | },
27 | scss: {
28 | src: [src + "scss/**/*.scss", src + "sass/**/*.scss"],
29 | dest: dist + "css"
30 | }
31 | };
32 |
33 | var dir = __dirname.split("\\").reverse()[0].toLowerCase();
34 | if (dir != 'h5' && dir != 'pc') {
35 | dir = (path.normalize(__dirname + "\\..")).split("\\").reverse()[0].toLowerCase();
36 | }
37 | const browsers = dir == 'h5' ? ['last 10 versions'] : ['last 100 versions'];
38 |
39 | function errorHandler() {
40 | var args = Array.prototype.slice.call(arguments);
41 | notify.onError({
42 | title: "错误了",
43 | message: "<%=error.message %>"
44 | }).apply(this, args);
45 | this.emit();
46 | }
47 |
48 | function argsHandler(ext) {
49 | var file = '';
50 | var globalFile = '';
51 | var isReverse = false;
52 | process.argv.forEach(function(arg) {
53 | if (arg.indexOf("--") === 0) {
54 | globalFile = arg.substring(2);
55 | }
56 | if (arg == "-reverse") {
57 | isReverse = true;
58 | }
59 | });
60 | if (globalFile) {
61 | switch (ext) {
62 | case 'scss':
63 | file = globalFile.indexOf(".scss") > -1 ? globalFile : globalFile+".scss";
64 | file = [src + "scss/**/" + file, src + "sass/**/" + file];
65 | break;
66 | case 'css':
67 | file = globalFile.indexOf(".css") > -1 ? globalFile : globalFile +".css";
68 | file = dist + "css/**/" + file;
69 | break;
70 | case 'html':
71 | file = globalFile.indexOf(".html") > -1 ? globalFile : globalFile +".html";
72 | file = dist + "**/" + file;
73 | break;
74 | }
75 | } else {
76 | switch (ext) {
77 | case 'scss':
78 | file = config.scss.src;
79 | break;
80 | case 'css':
81 | file = config.css.src;
82 | break;
83 | case 'html':
84 | file = config.html.src;
85 | break;
86 | }
87 | }
88 | return {file: file, isReverse: isReverse};
89 | }
90 |
91 | gulp.task("default", ["watch"], function() {
92 | console.log("\
93 | _ooOoo_\n\
94 | o8888888o\n\
95 | 88\" . \"88\n\
96 | (| -_- |)\n\
97 | O\\ = /O\n\
98 | ____/`---'\\____\n\
99 | .' \\\\| |// `.\n\
100 | / \\\\||| : |||// \\\n\
101 | / _||||| -:- |||||- \\\n\
102 | | | \\\\\\ - /// | |\n\
103 | | \\_| ''\\---/'' | |\n\
104 | \\ .-\\__ `-` ___/-. /\n\
105 | ___`. .' /--.--\\ `. . __\n\
106 | .\"\" '< `.___\\_<|>_/___.' >'\"\".\n\
107 | | | : `- \\`.;`\\ _ /`;.`/ - ` : | |\n\
108 | \\ \\ `-. \\_ __\\ /__ _/ .-` / /\n\
109 | ======`-.____`-.___\\_____/___.-`____.-'======\n\
110 | `=---='\n\
111 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n\
112 | 佛祖保佑 永无BUG\n\
113 | ");
114 | });
115 |
116 | // 浏览器自动刷新 (gulp watch)
117 | gulp.task("watch", function() {
118 | var exists = fs.existsSync(dist + "index.html");
119 | browserSync.init({
120 | server: {
121 | baseDir: dist,
122 | directory: !exists
123 | },
124 | open: "external",
125 | notify: false
126 | });
127 | gulp.watch(config.scss.src, ["sass"]);
128 | gulp.watch(config.files).on("change", function() {
129 | setTimeout(browserSync.reload, 100);
130 | });
131 | });
132 |
133 | // sass编译成css (gulp sass)
134 | gulp.task("sass", function() {
135 | var filepath = argsHandler("scss").file;
136 | return gulp.src(filepath)
137 | .pipe(sourcemaps.init())
138 | .pipe(sass())
139 | .on("error", errorHandler)
140 | .pipe(autoprefixer({
141 | browsers: browsers
142 | }))
143 | .pipe(cleanCSS({ compatibility: 'ie8', keepBreaks: false }))
144 | .pipe(rename({ suffix: '.min' }))
145 | .pipe(sourcemaps.write("./maps"))
146 | .pipe(gulp.dest(config.scss.dest));
147 | });
148 |
149 | // 替换global里的公共文件
150 | gulp.task("replace", ['autoprefixer'], function() {
151 | del("dist/css/maps");
152 | var args = argsHandler("html");
153 | var filepath = args.file;
154 | var isReverse = args.isReverse;
155 | var dirpath = filepath.indexOf("**/") > -1 ? config.html.dest : path.dirname(filepath);
156 | return gulp.src(filepath)
157 | .pipe(replaceCommon({reverse: isReverse}))
158 | .pipe(gulp.dest(dirpath));
159 | });
160 |
161 | // css添加webkit,moz等前缀 (gulp autoprefixer)
162 | gulp.task("autoprefixer", function() {
163 | var filepath = argsHandler("css").file;
164 | return gulp.src(filepath)
165 | .pipe(autoprefixer({
166 | browsers: browsers
167 | }))
168 | .pipe(cleanCSS({ compatibility: 'ie8', keepBreaks: false }))
169 | .pipe(gulp.dest(config.css.dest));
170 | });
171 |
172 | // 压缩CSS (gulp cssmin)
173 | gulp.task("cssmin", function() {
174 | var filepath = argsHandler("css").file;
175 | return gulp.src(filepath)
176 | .pipe(cleanCSS({ compatibility: 'ie8', keepBreaks: false }))
177 | .pipe(gulp.dest(config.css.dest));
178 | });
179 |
180 | gulp.task('help', function() {
181 | console.log("------------------------------------------------------------");
182 | console.log(" gulp 自动刷新并编译所有sass文件");
183 | console.log(" gulp watch 自动刷新并编译所有sass文件");
184 | console.log(" gulp watch --file 自动刷新并编译指定sass文件");
185 | console.log(" gulp sass 编译sass文件");
186 | console.log(" gulp sass --file 编译指定file文件");
187 | console.log(" gulp autoprefixer 添加webkit等前缀");
188 | console.log(" gulp autoprefixer --file 添加webkit等前缀");
189 | console.log(" gulp cssmin 压缩CSS");
190 | console.log(" gulp cssmin --file 压缩指定file文件");
191 | console.log(" gulp replace 替换global下公共文件");
192 | console.log(" gulp replace -reverse 逆替换global下公共文件");
193 | console.log(" gulp replace --file 指定file文件替换global下公共文件");
194 | console.log(" gulp replace -reverse --file 指定file文件逆替换global下公共文件");
195 | console.log("------------------------------------------------------------");
196 | });
--------------------------------------------------------------------------------
/src/scss/base/border.scss:
--------------------------------------------------------------------------------
1 | @import './fn';
2 |
3 | .ui-border-t{
4 | @include bor_t($borDefault);
5 | }
6 | .ui-border-b{
7 | @include bor_b($borDefault);
8 | }
9 | .ui-border-l{
10 | @include bor_l($borDefault);
11 | }
12 | .ui-border-r{
13 | @include bor_r($borDefault);
14 | }
15 | .ui-border-tb{
16 | @include bor_tb($borDefault);
17 | }
18 | .ui-border-radius{
19 | @include bor_all($borDefault,$borDefaultRadius);
20 | }
21 | @media screen and (-webkit-min-device-pixel-ratio : 2) {
22 | .ui-border-t,
23 | .ui-border-b,
24 | .ui-border-tb,
25 | .ui-border-l,
26 | .ui-border-r,
27 | .ui-border-radius
28 | {
29 | border:none;
30 | position: relative;
31 | overflow: hidden;
32 | }
33 | .ui-border-t:after,
34 | .ui-border-b:after,
35 | .ui-border-tb:after,
36 | .ui-border-tb:before,
37 | .ui-border-l:after,
38 | .ui-border-r:after
39 | {
40 | content: '';
41 | position: absolute;
42 | box-sizing:border-box;
43 | pointer-events: none;
44 | }
45 | .ui-border-t:after,
46 | .ui-border-tb:after{
47 | left:0;
48 | top:0;
49 | width: 100%;height: 1px;
50 | transform:scaleY(0.5);
51 | transform-origin:left top;
52 | background:$borDefault;
53 | }
54 | .ui-border-b:after,
55 | .ui-border-tb:before{
56 | left:0;
57 | bottom:0;
58 | width: 100%;height: 1px;
59 | transform:scaleY(0.5);
60 | transform-origin:left bottom;
61 | background:$borDefault;
62 | }
63 | .ui-border-l:after{
64 | left:0;
65 | top:0;
66 | width: 1px;height: 100%;
67 | transform:scaleX(0.5);
68 | transform-origin:left top;
69 | background:$borDefault;
70 | }
71 | .ui-border-r:after{
72 | right:0;
73 | top:0;
74 | width: 1px;height: 100%;
75 | transform:scaleX(0.5);
76 | transform-origin:left top;
77 | background:$borDefault;
78 | }
79 | }
80 |
81 | @media screen and (-webkit-min-device-pixel-ratio : 3) {
82 | .ui-border-t,
83 | .ui-border-b,
84 | .ui-border-tb,
85 | .ui-border-l,
86 | .ui-border-r,
87 | .ui-border-radius{
88 | border:none;
89 | position: relative;
90 | }
91 | .ui-border-t:after,
92 | .ui-border-b:after,
93 | .ui-border-tb:after,
94 | .ui-border-tb:before,
95 | .ui-border-l:after,
96 | .ui-border-r:after{
97 | content: '';
98 | position: absolute;
99 | box-sizing:border-box;
100 | pointer-events: none;
101 | }
102 | .ui-border-t:after,
103 | .ui-border-tb:after{
104 | left:0;
105 | top:0;
106 | width: 100%;height: 1px;
107 | transform:scaleY(0.33);
108 | transform-origin:0 0;
109 | background:$borDefault;
110 | }
111 | .ui-border-b:after,
112 | .ui-border-tb:before{
113 | left:0;
114 | bottom:0;
115 | width: 100%;height: 1px;
116 | transform:scaleY(0.33);
117 | transform-origin:0 100%;
118 | background:$borDefault;
119 | }
120 | .ui-border-l:after{
121 | left:0;
122 | top:0;
123 | width: 1px;height: 100%;
124 | transform:scaleX(0.33);
125 | transform-origin:0 0;
126 | background:$borDefault;
127 | }
128 | .ui-border-r:after{
129 | right:0;
130 | top:0;
131 | width: 1px;height: 100%;
132 | transform:scaleX(0.33);
133 | transform-origin:0 0;
134 | background:$borDefault;
135 | }
136 | }
--------------------------------------------------------------------------------
/src/scss/base/fn.scss:
--------------------------------------------------------------------------------
1 | @import "./mixin/setArrow";
2 | @import "./mixin/setOneBorder";
3 | @import "./mixin/text";
4 | @import "./setting";
--------------------------------------------------------------------------------
/src/scss/base/mixin/setArrow.scss:
--------------------------------------------------------------------------------
1 | @mixin setArrow($arrowDir, $arrowSize, $arrowColor,$borderWidth){
2 | display: inline-block;
3 | height: $arrowSize;
4 | width: $arrowSize;
5 | border-width: $borderWidth $borderWidth 0 0;
6 | border-color: $arrowColor;
7 | border-style: solid;
8 | @if $arrowDir == top {
9 | transform:rotate(-45deg);
10 | } @else if $arrowDir == right {
11 | transform:rotate(45deg);
12 | } @else if $arrowDir == bottom {
13 | transform:rotate(135deg);
14 | }@else if $arrowDir == bottom {
15 | transform:rotate(-135deg);
16 | }
17 | }
--------------------------------------------------------------------------------
/src/scss/base/mixin/setOneBorder.scss:
--------------------------------------------------------------------------------
1 | /* 1px边框 */
2 | @mixin bor_t($borDefault){
3 | border-top:1px solid $borDefault;
4 | }
5 | @mixin bor_b($borDefault){
6 | border-bottom:1px solid $borDefault;
7 | }
8 | @mixin bor_l($borDefault){
9 | border-left:1px solid $borDefault;
10 | }
11 | @mixin bor_r($borDefault){
12 | border-right:1px solid $borDefault;
13 | }
14 | @mixin bor_tb($borDefault){
15 | border-top:1px solid $borDefault;
16 | border-bottom:1px solid $borDefault;
17 | }
18 | @mixin bor_all($borDefault,$borDefaultRadius){
19 | border:none;
20 | position: relative;
21 | &:after{
22 | content: '';
23 | position: absolute;
24 | box-sizing:border-box;
25 | pointer-events: none;
26 | left:0;
27 | top:0;
28 | width: 200%;height: 200%;
29 | transform:scale(0.5);
30 | transform-origin:left top;
31 | border:1px solid $borDefault;
32 | border-radius: $borDefaultRadius;
33 | }
34 | }
--------------------------------------------------------------------------------
/src/scss/base/mixin/text.scss:
--------------------------------------------------------------------------------
1 | //单行文本溢出
2 | @mixin ellipsis($w:auto) {
3 | width: $w;
4 | overflow: hidden;
5 | text-overflow: ellipsis;
6 | white-space: nowrap;
7 | word-wrap: normal;
8 | }
9 | //多行文本溢出
10 | @mixin ellipsisLn($line) {
11 | overflow: hidden;
12 | text-overflow: ellipsis;
13 | display: -webkit-box;
14 | -webkit-box-orient: vertical;
15 | -webkit-line-clamp: $line;
16 | }
--------------------------------------------------------------------------------
/src/scss/base/reset.scss:
--------------------------------------------------------------------------------
1 | @import './fn';
2 | @import './border';
3 | html {
4 | font-family: Helvetica Neue, Helvetica,'微软雅黑',' \5FAE\8F6F\96C5\9ED1', Arial, sans-serif;
5 | -ms-text-size-adjust: 100%;
6 | -webkit-text-size-adjust: 100%;
7 | font-size: 62.5%;
8 | line-height: 1.5;
9 | background-color:#fff;
10 | }
11 |
12 | body {
13 | padding: 0;
14 | margin: 0;
15 | font-size:$f26;
16 | -webkit-overflow-scrolling: touch;
17 | }
18 |
19 | * {
20 | -webkit-touch-callout: none;
21 | -webkit-tap-highlight-color: transparent;
22 | -webkit-box-sizing: border-box;
23 | -moz-box-sizing: border-box;
24 | box-sizing: border-box;
25 | padding: 0;
26 | margin: 0;
27 | }
28 |
29 | audio,
30 | canvas,
31 | progress,
32 | video {
33 | display: inline-block;
34 | vertical-align: baseline;
35 | }
36 |
37 | audio:not([controls]) {
38 | display: none;
39 | height: 0;
40 | }
41 |
42 | [hidden],
43 | template {
44 | display: none;
45 | }
46 |
47 | a {
48 | background: transparent;
49 | text-decoration: none;
50 | -webkit-tap-highlight-color: transparent;
51 | transition:all 0.25s ease 0s;
52 | color:$black;
53 | &:active{
54 | outline: 0;
55 | }
56 | }
57 |
58 | b,strong {
59 | font-weight: bold;
60 | }
61 |
62 | mark {
63 | background: #ff0;
64 | color: #000000;
65 | }
66 |
67 | small {
68 | font-size: 80%;
69 | }
70 |
71 | img {
72 | border: 0;
73 | vertical-align: middle;
74 | width: 100%;
75 | }
76 |
77 | hr {
78 | -moz-box-sizing: content-box;
79 | box-sizing: content-box;
80 | height: 0;
81 | }
82 |
83 | pre {
84 | overflow: auto;
85 | white-space: pre;
86 | white-space: pre-wrap;
87 | word-wrap: break-word;
88 | }
89 |
90 | button,input,optgroup,select,textarea {
91 | color: inherit;
92 | font: inherit;
93 | margin: 0;
94 | border: none;
95 | outline: none;
96 | -webkit-appearance: none;
97 | }
98 |
99 | button {
100 | overflow: visible;
101 | }
102 |
103 | button,select {
104 | text-transform: none;
105 | }
106 |
107 | button,html input {
108 | cursor: pointer;
109 | }
110 |
111 | button[disabled],html input[disabled] {
112 | cursor: default;
113 | }
114 |
115 | button::-moz-focus-inner,input::-moz-focus-inner {
116 | border: 0;
117 | padding: 0;
118 | }
119 |
120 | input {
121 | -moz-box-sizing: border-box;
122 | -webkit-box-sizing: border-box;
123 | box-sizing: border-box;
124 | line-height: normal;
125 | box-sizing: border-box;
126 | padding: 0;
127 | }
128 |
129 | input::-webkit-outer-spin-button {
130 | height: auto;
131 | -webkit-appearance: none;
132 | }
133 |
134 |
135 |
136 | fieldset {
137 | border: 0.083333rem solid #c0c0c0;
138 | }
139 |
140 | legend {
141 | border: 0;
142 | padding: 0;
143 | }
144 |
145 | textarea {
146 | overflow: auto;
147 | resize: vertical;
148 | }
149 |
150 | table {
151 | border-collapse: collapse;
152 | border-spacing: 0;
153 | }
154 |
155 | ul, li,ol {
156 | list-style: none outside none;
157 | }
158 |
159 | h1,h2,h3 {
160 | font-weight: normal;
161 | font-size: 100%;
162 | }
163 |
164 | input::-moz-placeholder,textarea::-moz-placeholder {
165 | color: #cccccc;
166 | }
167 |
168 | input:-ms-input-placeholder,textarea:-ms-input-placeholder {
169 | color: #cccccc;
170 | }
171 |
172 | input::-webkit-input-placeholder,textarea::-webkit-input-placeholder {
173 | color: #cccccc;
174 | }
175 |
176 | input[type="button"] {
177 | -webkit-appearance: none;
178 | appearance: none;
179 | }
180 | .cblue{
181 | color:$blue;
182 | }
--------------------------------------------------------------------------------
/src/scss/base/setting.scss:
--------------------------------------------------------------------------------
1 | /* 重要颜色 */
2 | $blue :#4577dc;
3 | $lightBlue :#b1d3f6;
4 | $red :#da5845;
5 | $green :#1fb57c;
6 | $golden :#c1ab79;
7 | $orange :#ff9536;
8 | $black :#333;
9 | /* 一般颜色 */
10 | $darkGray :#666;
11 | $gray :#888f9b;
12 | $lightGray :#acb2c1;
13 | /* 较弱颜色 */
14 | $darkWeak :#ededed;
15 | $lightWeak :#f3f3f3;
16 |
17 |
18 | /* 边框颜色 */
19 | $borDefault :#e5e5e5;
20 | $borDefaultRadius :0.07rem;
21 |
22 | /* 字体大小 */
23 | $f22: 0.22rem;
24 | $f24: 0.24rem;
25 | $f26: 0.26rem;
26 | $f28: 0.28rem;
27 | $f30: 0.3rem;
28 | $f32: 0.32rem;
29 | $f34: 0.34rem;
30 | $f36: 0.36rem;
--------------------------------------------------------------------------------
/src/scss/index.scss:
--------------------------------------------------------------------------------
1 | @import './base/fn';
2 | @import './base/reset';
3 | @import './widget/action/action';
4 | @import './widget/button/button';
5 | @import './widget/cell/cell';
6 | @import './widget/checkbox/checkbox';
7 | @import './widget/datetimePicker/datetimePicker';
8 | @import './widget/dialog/dialog';
9 | @import './widget/loading/loading';
10 | @import './widget/radio/radio';
11 | @import './widget/range/range';
12 | @import './widget/swiper/swiper';
13 | @import './widget/switch/switch';
14 | @import './widget/tab/tab';
15 | @import './widget/tips/tips';
16 | @import './widget/toast/toast';
--------------------------------------------------------------------------------
/src/scss/widget/action/action.scss:
--------------------------------------------------------------------------------
1 | @import '../../base/fn';
2 |
3 | $actionBg :#f8f8f8;
4 | $actionFontSize :.3rem;
5 | $activeBg :#ddd;
6 | $actionHdFontColor :#666;
7 | $actionLineHeight :.9rem;
8 | $maskBg :rgba(0,0,0,.8);
9 |
10 | .ui-action{
11 | position: fixed;
12 | left:0;
13 | top:0;
14 | right:0;
15 | bottom:0;
16 | z-index:1000;
17 | font-size:$actionFontSize;
18 | line-height:$actionLineHeight;
19 | &.show{
20 | .ui-action-mask{
21 | opacity: 1;
22 | }
23 | .ui-action-sheet{
24 | transform: translateY(0);
25 | }
26 | }
27 | &.hide{
28 | .ui-action-mask{
29 | opacity: 0;
30 | }
31 | .ui-action-sheet{
32 | transform: translateY(100%);
33 | }
34 | }
35 | a{
36 | &:active{
37 | background:$activeBg
38 | }
39 | }
40 | .ui-action-mask{
41 | width: 100%;
42 | height: 100%;
43 | background:$maskBg;
44 | opacity: 0;
45 | transition:all .25s ease 0s;
46 | }
47 | .ui-action-sheet{
48 | position: absolute;
49 | left:0;
50 | right: 0;
51 | bottom:0;
52 | background:$actionBg;
53 | transition:all .25s ease 0s;
54 | transform: translateY(100%);
55 | }
56 | .ui-action-sheet-hd{
57 | color:$actionHdFontColor;
58 | background:$actionBg;
59 | text-align:center;
60 | }
61 | .ui-action-sheet-item{
62 | display: block;
63 | background:#fff;
64 | text-align:center;
65 | }
66 | .ui-action-sheet-cancel{
67 | margin-top:.2rem;
68 | display: block;
69 | background:#fff;
70 | text-align:center;
71 | }
72 | }
--------------------------------------------------------------------------------
/src/scss/widget/button/button.scss:
--------------------------------------------------------------------------------
1 | @import '../../base/fn';
2 |
3 | /* 按钮 */
4 | $btnPrimaryBg :#4577dc;
5 | $btnPrimaryActiveBg :#375fb0;
6 | $btnPrimaryDisableBg :#acb2c1;
7 | $btnPrimaryHeight :1rem;
8 | $btnPrimaryFontColor :#fff;
9 | $btnPrimaryFontSize :.32rem;
10 | $btnPrimaryRadius :.03rem;
11 |
12 | /* 边框按钮 */
13 | $btnDefaultBg :#fff;
14 | $btnDefaultActiveBg :#ededed;
15 | $btnDefaultDisableBg :#fff;
16 | $btnDefaultFontColor :#333;
17 | $btnDefaultDisableFontColor :#acb2c1;
18 | $btnDefaultBorColor :#acb2c1;
19 |
20 | .ui-btn{
21 | display:block;
22 | text-align:center;
23 | height:$btnPrimaryHeight;
24 | line-height:$btnPrimaryHeight;
25 | color:$btnPrimaryFontColor;
26 | font-size:$btnPrimaryFontSize;
27 | border-radius:$btnPrimaryRadius;
28 | }
29 | .ui-btn-primary{
30 | background:$btnPrimaryBg;
31 | &:active{
32 | background:$btnPrimaryActiveBg;
33 | }
34 | }
35 | .ui-btn-primary-disable{
36 | background:$btnPrimaryDisableBg;
37 | }
38 |
39 | .ui-btn-default{
40 | color:$btnDefaultFontColor;
41 | background:$btnDefaultBg;
42 | &:after{
43 | border-color:$btnDefaultBorColor;
44 | }
45 | &:active{
46 | background: $btnDefaultActiveBg;
47 | }
48 | }
49 | .ui-btn-default-disable{
50 | color:$btnDefaultDisableFontColor;
51 | background:$btnDefaultActiveBg;
52 | &:after{
53 | border-color:$btnDefaultBorColor;
54 | }
55 | }
--------------------------------------------------------------------------------
/src/scss/widget/cell/cell.scss:
--------------------------------------------------------------------------------
1 | @import '../../base/fn';
2 |
3 | .ui-cells{
4 | font-size:$f34;
5 | .ui-cell{
6 | display:flex;
7 | align-items:center;
8 | min-height:1rem;
9 | padding:0 .3rem;
10 | &-bd{
11 | flex:1;
12 | }
13 | }
14 | .ui-cell-arrow{
15 | .ui-cell-ft:after{
16 | content: '';
17 | display: inline-block;
18 | @include setArrow(right , .15rem , $darkWeak, .04rem);
19 | }
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/src/scss/widget/checkbox/checkbox.scss:
--------------------------------------------------------------------------------
1 | @import '../../base/fn';
2 |
3 | .ui-checkbox{
4 | position: relative;
5 | display:inline-block;
6 | width:.4rem;
7 | height:.4rem;
8 | background:#fff;
9 | border-radius:50%;
10 | vertical-align:middle;
11 | box-sizing:border-box;
12 | @at-root .ui-checkbox-text{
13 | vertical-align: middle;
14 | }
15 | .ui-checkbox-inp{
16 | position: absolute;
17 | left:0;
18 | top:0;
19 | z-index:2;
20 | width: 100%;
21 | height: 100%;
22 | opacity: 0;
23 | &:checked + .ui-checkbox-core{
24 | &:after{
25 | background:$blue;
26 | border:1px solid $blue;
27 | }
28 | &:before{
29 | transform:scale(1) rotate(-45deg);
30 | }
31 | }
32 | }
33 | .ui-checkbox-core{
34 | position: absolute;
35 | display: inline-block;
36 | width: 100%;
37 | height: 100%;
38 | &:after,
39 | &:before{
40 | position: absolute;
41 | content: '';
42 | box-sizing:border-box;
43 | }
44 | &:after{
45 | left:-1px;
46 | top:-.04rem;
47 | width: .4rem;
48 | height: .4rem;
49 | border-radius:50%;
50 | border:1px solid #dfdfdf;
51 | transition:all 0.05s ease 0s;
52 | }
53 | &:before{
54 | z-index: 1;
55 | left:.08rem;
56 | top:.08rem;
57 | width: .2rem;
58 | height: .1rem;
59 | border-left:1px solid #fff;
60 | border-bottom:1px solid #fff;
61 | transform:scale(0) rotate(-45deg);
62 | transition:all .25s ease 0s;
63 | }
64 | }
65 | .ui-checkbox-inp[disabled] + .ui-checkbox-core{
66 | &:after{
67 | background:#eee;
68 | }
69 | }
70 | }
71 |
--------------------------------------------------------------------------------
/src/scss/widget/datetimePicker/datetimePicker.scss:
--------------------------------------------------------------------------------
1 | @import '../../base/fn';
2 |
3 | $maskBg :rgba(0,0,0,.8);
4 |
5 | .ui-picker-wrap{
6 | position: fixed;
7 | left:0;
8 | top:0;
9 | right:0;
10 | bottom:0;
11 | z-index:1000;
12 | line-height:.8rem;
13 | font-size:$f34;
14 | &.show{
15 | .mask{
16 | opacity: 1;
17 | }
18 | .ui-picker{
19 | transform:translateY(0);
20 | }
21 | }
22 | &.hide{
23 | .mask{
24 | opacity: 0;
25 | }
26 | .ui-picker{
27 | transform:translateY(100%);
28 | }
29 | }
30 | .mask{
31 | width: 100%;
32 | height: 100%;
33 | background: $maskBg;
34 | opacity: 0;
35 | transition:all .25s ease 0s;
36 | }
37 | .ui-picker{
38 | position: absolute;
39 | left:0;
40 | bottom:0;
41 | right: 0;
42 | background:#fff;
43 | transform:translateY(100%);
44 | transition:all .25s ease 0s;
45 | }
46 | .ui-picker-hd{
47 |
48 | .ui-picker-cancel,
49 | .ui-picker-confirm{
50 | width: 50%;
51 | padding:0 .3rem;
52 | display: inline-block;
53 | color:$blue;
54 | line-height:.9rem;
55 | }
56 | .ui-picker-confirm{
57 | text-align: right;
58 | }
59 | }
60 | .ui-picker-bd{
61 | height: 4rem;
62 | display: flex;
63 | text-align: center;
64 | overflow: hidden;
65 | position: relative;
66 | &:after{
67 | content: '';
68 | position: absolute;
69 | left:0;
70 | right:0;
71 | bottom:0;
72 | z-index:10;
73 | height: .8rem;
74 | }
75 |
76 | }
77 | .ui-picker-slot{
78 | position: relative;
79 | flex:1;
80 | &:nth-child(5){
81 | &:before{
82 | content: ':';
83 | position: absolute;
84 | left:0;
85 | top:50%;
86 | transform:translateY(-50%);
87 | }
88 | }
89 | }
90 | .ui-picker-list{
91 | margin-top:1.6rem;
92 | }
93 | .ui-picker-item{
94 | height: .8rem;
95 | color:#999;
96 | }
97 | .swiper-slide-active{
98 | color:$black;
99 | }
100 | .ui-picker-gradient{
101 | position: absolute;
102 | left:0;
103 | top:0;
104 | z-index:1;
105 | height: 100%;
106 | width:100%;
107 | background-image:-webkit-linear-gradient(to top,#fff,transparent,#fff);
108 | background-image:linear-gradient(to top,#fff,rgba(255,255,255,.2),#fff);
109 | }
110 | .ui-picker-ft{
111 | position: absolute;
112 | top:2.5rem;
113 | left:0;
114 | right: 0;
115 | z-index:-1;
116 | height: .8rem;
117 | }
118 | }
--------------------------------------------------------------------------------
/src/scss/widget/dialog/dialog.scss:
--------------------------------------------------------------------------------
1 | @import '../../base/fn';
2 |
3 |
4 | $btnPrimaryBg :#4577dc;
5 | $btnPrimaryActiveBg :#375fb0;
6 | $maskBg :rgba(0,0,0,.8);
7 |
8 | .ui-dialog-wrap{
9 | position: fixed;
10 | left:0;
11 | top:0;
12 | right:0;
13 | bottom:0;
14 | z-index:100;
15 | &.hide{
16 | .mask{
17 | opacity: 0;
18 | }
19 | .ui-dialog{
20 | opacity: 0;
21 | transform:scale(1,1) translateY(-50%);
22 | }
23 | }
24 | &.show{
25 | .mask{
26 | opacity: 1;
27 | }
28 | .ui-dialog{
29 | opacity: 1;
30 | transform:scale(1,1) translateY(-50%);
31 | }
32 | }
33 | .mask{
34 | width: 100%;
35 | height: 100%;
36 | background:$maskBg;
37 | transition:all .25s ease 0s;
38 | opacity:0;
39 | }
40 | .ui-dialog{
41 | position: absolute;
42 | top:50%;
43 | left:.6rem;
44 | right: .6rem;
45 | background:#fff;
46 | border-radius: .04rem;
47 | overflow:hidden;
48 | opacity:0;
49 | transform:scale(1.2,1.2) translateY(-50%);
50 | transition: all .25s ease 0s;
51 | }
52 | .ui-dialog-hd{
53 | padding-top:.53rem;
54 | font-size: $f34;
55 | text-align:center;
56 | }
57 | .ui-dialog-bd{
58 | padding:.53rem .4rem;
59 | font-size: $f32;
60 | line-height:.48rem;
61 | color:#525252;
62 | }
63 | .ui-dialog-ft{
64 | display: flex;
65 | }
66 | .btn-item{
67 | width: 100%;
68 | display: block;
69 | line-height:1.1rem;
70 | font-size: $f36;
71 | text-align: center;
72 | color:$blue;
73 | &:last-child{
74 | color:#fff;
75 | background:$btnPrimaryBg;
76 | &:active{
77 | background:$btnPrimaryActiveBg;
78 | }
79 | }
80 |
81 | }
82 | }
--------------------------------------------------------------------------------
/src/scss/widget/loading/loading.scss:
--------------------------------------------------------------------------------
1 | @import '../../base/fn';
2 | .ui-loading{
3 | /* ui-loading-one */
4 | .ui-loading-one{
5 | position: relative;
6 | margin:0 auto;
7 | width:.6rem;
8 | height:.6rem;
9 | &:before{
10 | content: '';
11 | position: absolute;
12 | left:0;
13 | top:0;
14 | width: .6rem;
15 | height: .6rem;
16 | border:.06rem solid rgba(0,0,0,.1);
17 | border-radius:50%;
18 | box-sizing:border-box;
19 | }
20 | &:after{
21 | content: '';
22 | position: absolute;
23 | left:0;
24 | top:0;
25 | width: .6rem;
26 | height: .6rem;
27 | border:.06rem solid transparent;
28 | border-left-color:#fff;;
29 | border-radius:50%;
30 | box-sizing:border-box;
31 | animation:ui-loading-rotate 1s infinite linear;
32 | }
33 | }
34 | .ui-loading-text{
35 | font-size: $f24;
36 | color:#fff;;
37 | }
38 | /* ui-loading-two */
39 | .ui-loading-two{
40 | margin:0 auto;
41 | width:.6rem;
42 | height:.6rem;
43 | border:.06rem solid #fff;;
44 | border-right-color:transparent;
45 | box-sizing:border-box;
46 | border-radius:50%;
47 | animation:ui-loading-rotate 1s infinite linear;
48 | }
49 | /* ui-loading-three */
50 | .ui-loading-three{
51 | position: relative;
52 | margin:0 auto;
53 | width:.6rem;
54 | height:.6rem;
55 | &:before,
56 | &:after{
57 | content: '';
58 | position: absolute;
59 | left:0;
60 | top:0;
61 | width: .6rem;
62 | height: .6rem;
63 | opacity: 0;
64 | background:#fff;
65 | border-radius:50%;
66 | animation:ui-loading-three 2s infinite ease-in-out;
67 | }
68 | &:before{
69 | animation-delay:1s;
70 | }
71 | }
72 | /* ui-loading-four */
73 | .ui-loading-four{
74 | width: .6rem;
75 | height: .6rem;
76 | margin:0 auto;
77 | .circle1,
78 | .circle2,
79 | .circle3{
80 | margin:.22rem 1px 0 1px;
81 | display: inline-block;
82 | width: .16rem;
83 | height: .16rem;
84 | background:#fff;
85 | border-radius:50%;
86 | opacity: 0;
87 | animation:ui-loading-four 0.9s infinite ease-in-out;
88 | }
89 | .circle2{
90 | animation-delay:.3s
91 | }
92 | .circle3{
93 | animation-delay:.6s
94 | }
95 | }
96 | /* ui-loading-five */
97 | .ui-loading-five{
98 | position: relative;
99 | width: .6rem;
100 | height: .6rem;
101 | margin:0 auto;
102 | animation:ui-loading-rotate 1s infinite linear;
103 | .circle1,
104 | .circle2,
105 | .circle3,
106 | .circle4,
107 | .circle5,
108 | .circle6,
109 | .circle7,
110 | .circle8,
111 | .circle9,
112 | .circle10,
113 | .circle11,
114 | .circle12{
115 | position: absolute;
116 | left:0;
117 | top:0;
118 | display: inline-block;
119 | width: .6rem;
120 | height: .6rem;
121 |
122 | &:after{
123 | content: '';
124 | position: absolute;
125 | left:.28rem;
126 | top:0;
127 | width: .04rem;
128 | height: .1rem;
129 | background:#fff;
130 | border-radius:.04rem;
131 | }
132 | }
133 | @for $i from 1 through 12 {
134 | .circle#{$i} {
135 | transform:rotate(30 * $i + deg);
136 | opacity:0.083 * $i;
137 | }
138 | }
139 | }
140 |
141 | }
142 |
143 | @keyframes ui-loading-rotate{
144 | 0% {
145 | transform:rotate(0deg)
146 | }
147 | 100% {
148 | transform:rotate(360deg)
149 | }
150 | }
151 |
152 | @keyframes ui-loading-three{
153 | 0% {
154 | opacity: .6;
155 | transform:scale(0);
156 | }
157 | 50% {
158 | opacity: .6;
159 | transform:scale(1);
160 | }
161 | 100% {
162 | opacity: .6;
163 | transform:scale(0);
164 | }
165 | }
166 |
167 | @keyframes ui-loading-four{
168 | 0% {
169 | opacity: 1;
170 | transform:scale(0);
171 | }
172 | 50% {
173 | opacity: 1;
174 | transform:scale(1);
175 | }
176 | 100% {
177 | opacity: 1;
178 | transform:scale(0);
179 | }
180 | }
181 |
182 | @keyframes ui-loading-five{
183 | 0% {
184 | opacity: 0.12;
185 | }
186 | 100% {
187 | opacity: 1;
188 | }
189 | }
--------------------------------------------------------------------------------
/src/scss/widget/radio/radio.scss:
--------------------------------------------------------------------------------
1 | @import '../../base/fn';
2 |
3 | .ui-radio{
4 | position: relative;
5 | display:inline-block;
6 | width:.4rem;
7 | height:.4rem;
8 | background:#fff;
9 | border-radius:50%;
10 | vertical-align:middle;
11 | box-sizing:border-box;
12 | @at-root .ui-radio-text{
13 | vertical-align: middle;
14 | }
15 | .ui-radio-inp{
16 | position: absolute;
17 | left:0;
18 | top:0;
19 | z-index:2;
20 | width: 100%;
21 | height: 100%;
22 | opacity: 0;
23 | &:checked + .ui-radio-core{
24 | &:after{
25 | background:$blue;
26 | border-color:$blue;
27 | }
28 | &:before{
29 | transform:scale(1);
30 | }
31 | }
32 | }
33 | .ui-radio-core{
34 | position: absolute;
35 | display: inline-block;
36 | width: 100%;
37 | height: 100%;
38 | &:after,
39 | &:before{
40 | position: absolute;
41 | content: '';
42 | box-sizing:border-box;
43 | }
44 | &:after{
45 | left:-1px;
46 | top:-.04rem;
47 | width: .4rem;
48 | height: .4rem;
49 | border-radius:50%;
50 |
51 | border:1px solid #dfdfdf;
52 | transition:all 0.05s ease 0s;
53 | }
54 | &:before{
55 | z-index: 1;
56 | left:.12rem;
57 | top:.11rem;
58 | width: .12rem;
59 | height: .12rem;
60 | background: #fff;
61 | border-radius:50%;
62 | transform:scale(0);
63 | transition:all 0.25s ease 0s;
64 | }
65 | }
66 | .ui-radio-inp[disabled] + .ui-radio-core{
67 | &:after{
68 | background:#eee;
69 | }
70 |
71 | }
72 | }
73 |
--------------------------------------------------------------------------------
/src/scss/widget/range/range.scss:
--------------------------------------------------------------------------------
1 | @import '../../base/fn';
2 |
3 | .ui-range{
4 | padding: .4rem;
5 | .ui-range-inner{
6 | position: relative;
7 | height: .04rem;
8 | background: #eee;
9 | }
10 | .ui-range-track{
11 | height: 100%;
12 | background: #26a2ff;
13 | }
14 | .ui-range-hander{
15 | position: absolute;
16 | left: 0;
17 | top: 50%;
18 | width: .56rem;
19 | height: .56rem;
20 | margin-left: -.28rem;
21 | margin-top: -.28rem;
22 | border-radius: 50%;
23 | background-color: #FFFFFF;
24 | box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
25 | }
26 | .ui-range-text{
27 | padding-top: .4rem;
28 | color: #999;
29 | }
30 | }
--------------------------------------------------------------------------------
/src/scss/widget/swiper/swiper.scss:
--------------------------------------------------------------------------------
1 | @import '../../base/fn';
2 |
3 | .swiper-container {
4 | margin-left: auto;
5 | margin-right: auto;
6 | overflow: hidden;
7 | position: relative;
8 | z-index: 1;
9 | overflow: hidden;
10 | }
11 | .swiper-wrapper {
12 | box-sizing: content-box;
13 | display: flex;
14 | height: 100%;
15 | position: relative;
16 | transition-property: transform;
17 | transform: translate3d(0px, 0px, 0px);
18 | width: 100%;
19 | z-index: 1;
20 | }
21 | .swiper-slide {
22 | flex-shrink: 0;
23 | height: 100%;
24 | position: relative;
25 | width: 100%;
26 | }
27 | .swiper-pagination{
28 | position: absolute;
29 | left:0;
30 | right:0;
31 | bottom:.1rem;
32 | z-index:1;
33 | font-size:0;
34 | text-align:center;
35 | }
36 | .swiper-pagination-bullet{
37 | display:inline-block;
38 | width:.1rem;
39 | height:.1rem;
40 | background:rgba(0,0,0,.5);
41 | border-radius:50%;
42 | margin:0 .05rem;
43 | }
44 | .swiper-pagination-bullet-active{
45 | background:#fff;
46 | }
47 | .vertical .swiper-wrapper{
48 | display: block;
49 | }
50 |
--------------------------------------------------------------------------------
/src/scss/widget/switch/switch.scss:
--------------------------------------------------------------------------------
1 | @import '../../base/fn';
2 |
3 | /* ui-switch */
4 | .ui-switch{
5 | position: relative;
6 | width: 1.04rem;
7 | height: .64rem;
8 | border-radius:.32rem;
9 | background:$blue;
10 | .ui-switch-inp{
11 | position: absolute;
12 | left:0;
13 | top:0;
14 | z-index:2;
15 | width: 100%;
16 | height: 100%;
17 | opacity: 0;
18 | &:checked + .ui-switch-core{
19 | &:before{
20 | transform: translateX(.41rem);
21 | }
22 | &:after{
23 | transform: scale(0);
24 | }
25 | }
26 | }
27 | .ui-switch-core{
28 | position: relative;
29 | display: inline-block;
30 | width: 100%;
31 | height: 100%;
32 | &:after,
33 | &:before{
34 | content: '';
35 | position: absolute;
36 | left:0;
37 | top:0;
38 | height: .6rem;
39 | }
40 | &:after{
41 | width: 100%;
42 | border-radius: .32rem;
43 | border:1px solid #dfdfdf;
44 | background-color: #fdfdfd;
45 | transition:.35s cubic-bezier(.45,1,.4,1);
46 | }
47 | &:before{
48 | top:1px;
49 | z-index:1;
50 | width: .6rem;
51 | background:#fff;
52 | border-radius:50%;
53 | box-shadow: 0 1px 3px rgba(0,0,0,.4);
54 | transition:.35s cubic-bezier(.4,.4,.25,1.35);
55 | }
56 | }
57 | }
--------------------------------------------------------------------------------
/src/scss/widget/tab/tab.scss:
--------------------------------------------------------------------------------
1 | @import '../../base/fn';
2 |
3 | .ui-tab{
4 | width: 100%;
5 | overflow: hidden;
6 | .ui-tab-nav{
7 | display: flex;
8 | height: .88rem;
9 | font-size:$f30;
10 | }
11 | .ui-tab-nav-item{
12 | flex: 1;
13 | padding: .3rem 0;
14 | line-height: 1;
15 | text-align: center;
16 | }
17 | .ui-tab-red{
18 | color: $blue;
19 | border-bottom: 3px solid $blue;
20 | }
21 | .ui-tab-content > div{
22 | display: none;
23 | text-align: center;
24 | line-height: 1rem;
25 | }
26 | .swiper-wrapper{
27 | width: 100%;
28 | display: flex;
29 | -webkit-transition-property: -webkit-transform;
30 | transition-property: transform;
31 | transition: all 0.25s ease 0s;
32 | }
33 | .swiper-wrapper > div{
34 | -webkit-flex-shrink: 0;
35 | -ms-flex: 0 0 auto;
36 | flex-shrink: 0;
37 | width: 100%;
38 | height: 100%;
39 | position: relative;
40 | }
41 | }
--------------------------------------------------------------------------------
/src/scss/widget/tips/tips.scss:
--------------------------------------------------------------------------------
1 | @import '../../base/fn';
2 |
3 | .ui-tips{
4 | position: fixed;
5 | left:0;
6 | top:0;
7 | width:100%;
8 | text-align:center;
9 | line-height:.84rem;
10 | font-size:$f26;
11 | background:#fff0f0;
12 | transform:translateY(-100%);
13 | transition: all 0.25s ease 0s;
14 | }
--------------------------------------------------------------------------------
/src/scss/widget/toast/toast.scss:
--------------------------------------------------------------------------------
1 | @import '../../base/fn';
2 |
3 | $toastBg :rgba(0,0,0,.8);
4 | $toastFontColor :#fff;
5 | $toastFontSize :.28rem;
6 | $toastRadius :.1rem;
7 |
8 | .ui-toast{
9 | position: fixed;
10 | left:50%;
11 | top:50%;
12 | min-width:2rem;
13 | max-width:80%;
14 | text-align:center;
15 | font-size:$toastFontSize;
16 | color:$toastFontColor;
17 | background:$toastBg;
18 | border-radius:$toastRadius;
19 | opacity:0;
20 | transition:all .25s ease 0s;
21 | transform:translate(-50%,-50%);
22 | &.show{
23 | opacity: 1;
24 | }
25 | &.hide{
26 | opacity: 0;
27 | }
28 | .icon{
29 | display: block;
30 | width: .8rem;
31 | height: .8rem;
32 | margin:.25rem auto 0 auto;
33 | background:#eee;
34 | }
35 | .ui-toast-text{
36 | display: block;
37 | padding:.2rem .3rem;
38 | }
39 | }
--------------------------------------------------------------------------------
57 |