├── .gitignore ├── .package.json.swp ├── README.md ├── dist ├── coupon │ ├── coupon.html │ ├── css │ │ ├── coupon.css │ │ └── mobile.layout.css │ ├── images │ │ └── icon_back.png │ └── js │ │ └── flexible.js ├── css │ ├── button.css │ ├── cashout.css │ ├── core.css │ ├── coupon.css │ ├── form.css │ ├── iconfont.css │ ├── init.css │ ├── layout.css │ ├── mobile.layout.css │ ├── prefixer │ │ ├── button.css │ │ ├── cashout.css │ │ ├── core.css │ │ ├── coupon.css │ │ ├── form.css │ │ ├── iconfont.css │ │ ├── init.css │ │ ├── layout.css │ │ ├── mobile.layout.css │ │ ├── reset.css │ │ ├── static.css │ │ └── unit.css │ ├── reset.css │ ├── static.css │ └── unit.css ├── images │ ├── icon-logo.png │ ├── icon_back.png │ ├── img-login_bg.jpg │ ├── img-login_sign.png │ └── img__title.png ├── index.html ├── js │ ├── avalon.observer.js │ ├── avalon.plugins.js │ ├── avalon.utils.js │ ├── avalon.vanilla.js │ ├── flexible.js │ └── jquery.min.js └── public │ └── Alex.html ├── gulpfile.js ├── package-lock.json ├── package.json └── public └── src ├── iconfont ├── icon.scss ├── iconfont.eot ├── iconfont.svg ├── iconfont.ttf └── iconfont.woff ├── js ├── avalon.observer.js ├── avalon.plugins.js ├── avalon.utils.js ├── avalon.vanilla.js ├── flexible.js └── jquery.min.js └── scss ├── core.scss ├── init.scss ├── layout ├── _init.scss ├── button.scss ├── form.scss ├── iconfont.scss ├── layout.scss └── unit.scss ├── lib ├── _function.scss ├── _mixin.scss └── animate.scss ├── mobile ├── _var.scss ├── cashout.scss ├── coupon.scss └── mobile.layout.scss ├── reset.scss ├── static.scss └── var ├── _color.scss ├── _size.scss ├── _var.scss └── bgcolor.scss /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | test/node_modules/ 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Editor directories and files 9 | .idea 10 | *.suo 11 | *.ntvs* 12 | *.njsproj 13 | *.sln 14 | -------------------------------------------------------------------------------- /.package.json.swp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zlalex/ego-css/964053bd3fd0d31e0083fa6a5f4f515f1ec20db1/.package.json.swp -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Avalon CSS 2 | 3 | - 前端开发库 4 | 5 | ```java 6 | /** 7 | * author : Alex 8 | * contact : zhouliang1006@126.com 9 | * tools: gulp,sass,browser-sync 10 | */ 11 | ``` 12 | ## 使用说明 13 | 14 | 1、npm install 15 | 16 | 2、gulp server 17 | 18 | > 该样式库中，color 与 size 支持自定义。修改文件目录中 public / src / scss / var 下对应的文件。可生成不同配色风格的样式库。 19 | 20 | ## 书写规范 21 | 22 | 1、强制要求所有缩进为4个空格符，保持统一的代码书写风格，方便后续开发人员的继续维护工作。 23 | 24 | 2、CSS命名规范参考element-ui的BEM命名法。 25 | 26 | 3、CSS属性书写顺序：定位(position) ＝> 显示模式(display) => 宽高边距(width,height,margin,padding) ＝> 文本样式(font,color,lineHeight) ＝> 背景修饰(background,CSS3新特性) 27 | 28 | ## 记录 29 | 30 | ### gulp.js 的工程流程 31 | 32 | 1、首先通过 gulp.src() 方法获取到我们想要处理的文件流，然后把文件流通过 pipe 方法导入到 gulp 的插件中，最后把经过插件处理后的流再通过 pipe 方法导入到gulp.dest()中。 33 | 34 | 2、gulp.dest() 方法则把流中的内容写入到文件中，这里首先需要弄清楚的一点是，我们给gulp.dest()传入的路径参数，只能用来指定要生成的文件的目录，而不能指定生成文件的文件名。 35 | 36 | 3、它生成文件的文件名，使用的是导入到它的文件流自身的文件名，所以生成的文件名是由导入到它的文件流决定的，即使我们给它传入一个带有文件名的路径参数，然后它也会把这个文件名当做是目录名。 37 | 38 | 4、gulp.src() 与 gulp.watch() 都支持传入 字符串路径 或 **数组路径**，实现检测多文件。 39 | 40 | ```javascript 41 | var gulp = require('gulp'); 42 | 43 | gulp.src('script/jquery.js') 44 | .pipe(gulp.dest('dist/core.js')); 45 | 46 | // 最终生成的文件路径为 dist/core.js/jquery.js,而不是 dist/core.js; 47 | ``` 48 | 49 | 5、安装gulp-babel插件报错，原因未知。 －2017.12.27 50 | 51 | ### 关于 gulp 与 grunt 的区别 52 | 53 | grunt是以文件为媒介的工作流。gulp是使用node中的stream，首先获取到需要的stream，然后可以通过stream的pipe()方法把流导入到你想要的地方,它不需要像 grunt 频繁的生成临时文件, 这是 gulp 的编译速度比 grunt 快的一个原因。 54 | 55 | ``` 56 | 流(stream)是用于在 node.js 中处理流数据的抽象接口。流模块提供了一个基础API，可以很容易地构建实现流接口的对象。 57 | node.js提供了许多流对象。例如，对HTTP服务器和流程的请求。stdout都是流实例。 58 | 流可以可读、可写，或两者兼而有之。所有流都是event发射器的实例。 59 | ``` 60 | 61 | ### gulp-ruby-sass与gulp-sass 62 | 63 | gulp-ruby-sass 使用Sass gem编译Sass，将结果输出到一个gulp流，需要安装ruby，并且会生成临时目录和临时文件。 64 | gulp-sass 依赖于node-sass，编译过程不需要生成临时目录和文件，直接通过buffer内容转换。 65 | 66 | ### 关于Avalon CSS的思考 67 | 68 | 1. 使用文档 69 | 70 | 2. 关于 $(selector).on(ev,func) 实现的疑问：通过遍历DOM数组，分别绑定事件时，首次触发不会出错，但多次触发事件时，会出现**绑定事件重复**现象，需要在 on 方法中加入判断，如果当前DOM已经绑定事件，则不再绑定。－2017.12.28 71 | 72 | 3. 关于 $(selector).on(ev,func) 的实现解惑，参考jQuery.on() 与 jQuery.event.add() 的源码分析，设置两个**全局** $.EVENTS = [] 和 $.guid = 0 ，当为DOM注册事件时，判断该DOM是否存在唯一属性DOM.guid，如果不存在，就赋予该DOM.guid为全局属性 $.guid 的递增值，以此确定每个DOM都是唯一的DOM，然后设置 $.EVENTS[dom.guid] 为临时事件存储对象，后续绑定事件名称都作为存储对象的属性，属性的值是事件处理函数的数组； 73 | 74 | ```javascript 75 | $.EVENTS = [ 76 | { 77 | click: [fn1, fn2, fn3] 78 | }, 79 | { 80 | mouseover: [fn1, fn2, fn3] 81 | } 82 | // ... 83 | ] 84 | 85 | elem.addEventlistener(type,function(ev){ 86 | $.EVENTS[type].forEach(function(fn){ 87 | fn.call(elem, ev) 88 | }) 89 | },false) 90 | ``` -------------------------------------------------------------------------------- /dist/coupon/coupon.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 我的福利券 11 | 12 | 13 |
14 |
15 |
16 |
17 | 18 |
19 |

我的福利券

20 |
21 |
22 |
23 |
24 | 25 |
26 |
27 |
28 |

29 | 福利券名称 30 | 福利券价格 31 |

32 | image 33 |
34 |
35 |

福利券名称

36 |

福利券价格

37 |
38 |
39 | 40 |
41 | 42 | 已购买 43 |
44 |
45 | 46 |
47 |
48 |
49 |

50 | 福利券名称 51 | 福利券价格 52 |

53 | image 54 |
55 |
56 |

福利券名称

57 |

福利券价格

58 |
59 |
60 | 61 |
62 | 撤销 63 |
64 |
65 |
66 |
67 |
68 | 69 | -------------------------------------------------------------------------------- /dist/coupon/css/coupon.css: -------------------------------------------------------------------------------- 1 | .coupon-list-wrapper { 2 | margin: 0.26667rem 0; } 3 | .coupon-list-wrapper .coupon-item { 4 | margin-bottom: 0.26667rem; 5 | padding: 0.45333rem; 6 | background: #fff; } 7 | .coupon-list-wrapper .coupon-img-wrapper { 8 | width: 2.13333rem; 9 | height: 2.13333rem; 10 | margin-right: 0.26667rem; 11 | background-color: #f4f4f4; } 12 | .coupon-list-wrapper .coupon-img-wrapper p { 13 | top: 50%; 14 | left: 0.32rem; 15 | transform: translateY(-50%); 16 | font-size: 0.16rem; } 17 | .coupon-list-wrapper .coupon-img-wrapper p span { 18 | display: block; } 19 | .coupon-list-wrapper .coupon-info { 20 | display: flex; 21 | flex-direction: column; 22 | justify-content: space-between; 23 | line-height: 1.06667rem; 24 | font-size: 0.34667rem; } 25 | .coupon-list-wrapper .coupon-operation { 26 | position: relative; 27 | display: flex; 28 | align-items: flex-end; 29 | width: 120px; } 30 | .coupon-list-wrapper .coupon-operation .btn { 31 | position: absolute; 32 | right: 0; } 33 | .coupon-list-wrapper .coupon-operation .btn-normal { 34 | color: #ab2b2c; } 35 | -------------------------------------------------------------------------------- /dist/coupon/css/mobile.layout.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; } 5 | 6 | .text-center { 7 | text-align: center; } 8 | 9 | .flex-box { 10 | display: flex; 11 | justify-content: space-between; } 12 | 13 | html, body, .layout-page { 14 | height: 100%; } 15 | 16 | .body, 17 | .layout-page { 18 | background: #eee; } 19 | 20 | .layout-page { 21 | width: 100%; 22 | min-height: 100%; 23 | overflow: hidden; 24 | padding-top: 1.2rem; } 25 | .layout-page .top-nav { 26 | position: fixed; 27 | z-index: 1000; 28 | left: 0; 29 | top: 0; 30 | display: block; 31 | width: 100%; 32 | background-color: #fff; 33 | border-bottom: 1px solid #e1e1e1; } 34 | .layout-page .layout-content { 35 | max-width: 540px; 36 | height: 100%; 37 | margin: 0 auto; } 38 | 39 | .btn { 40 | display: inline-block; 41 | width: 1.41333rem; 42 | height: 0.69333rem; 43 | text-align: center; 44 | line-height: 0.66667rem; 45 | border-radius: 2px; } 46 | .btn.btn-outline { 47 | border: solid 1px #7f7f7f; } 48 | .btn.btn-normal { 49 | border: solid 1px transparent; } 50 | 51 | .abs { 52 | position: absolute; } 53 | 54 | .rel { 55 | position: relative; } 56 | 57 | .layout-title { 58 | height: 1.2rem; 59 | line-height: 1.2rem; 60 | font-size: 1.5em; } 61 | .layout-title .title-left { 62 | position: absolute; 63 | z-index: 1000; 64 | left: 0; 65 | top: 0; 66 | display: block; 67 | font-size: 1.11em; 68 | color: #999; 69 | background: url("../images/icon_back.png") center center no-repeat; 70 | background-size: .5rem; 71 | transform: rotateZ(180deg); } 72 | .layout-title .title-back { 73 | display: inline-block; 74 | width: 1.33333rem; 75 | padding-left: 0.4rem; 76 | padding-right: 0.4rem; } 77 | .layout-title .title-content { 78 | font-weight: bold; 79 | max-width: 50%; 80 | overflow: hidden; 81 | white-space: nowrap; 82 | text-overflow: ellipsis; 83 | margin: 0 auto; 84 | color: #333a49; } 85 | -------------------------------------------------------------------------------- /dist/coupon/images/icon_back.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zlalex/ego-css/964053bd3fd0d31e0083fa6a5f4f515f1ec20db1/dist/coupon/images/icon_back.png -------------------------------------------------------------------------------- /dist/coupon/js/flexible.js: -------------------------------------------------------------------------------- 1 | ;(function(win, lib) { 2 | var doc = win.document; 3 | var docEl = doc.documentElement; 4 | var metaEl = doc.querySelector('meta[name="viewport"]'); 5 | var flexibleEl = doc.querySelector('meta[name="flexible"]'); 6 | var dpr = 0; 7 | var scale = 0; 8 | var tid; 9 | var flexible = lib.flexible || (lib.flexible = {}); 10 | 11 | if (metaEl) { 12 | console.warn('将根据已有的meta标签来设置缩放比例'); 13 | var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/); 14 | if (match) { 15 | scale = parseFloat(match[1]); 16 | dpr = parseInt(1 / scale); 17 | } 18 | } else if (flexibleEl) { 19 | var content = flexibleEl.getAttribute('content'); 20 | if (content) { 21 | var initialDpr = content.match(/initial\-dpr=([\d\.]+)/); 22 | var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/); 23 | if (initialDpr) { 24 | dpr = parseFloat(initialDpr[1]); 25 | scale = parseFloat((1 / dpr).toFixed(2)); 26 | } 27 | if (maximumDpr) { 28 | dpr = parseFloat(maximumDpr[1]); 29 | scale = parseFloat((1 / dpr).toFixed(2)); 30 | } 31 | } 32 | } 33 | 34 | if (!dpr && !scale) { 35 | var isAndroid = win.navigator.appVersion.match(/android/gi); 36 | var isIPhone = win.navigator.appVersion.match(/iphone/gi); 37 | var isUCBrowser = isAndroid && win.navigator.appVersion.match(/UCBrowser/gi); 38 | var isMQQBrowser = isAndroid && win.navigator.appVersion.match(/MQQBrowser/gi); 39 | var devicePixelRatio = win.devicePixelRatio; 40 | if (isIPhone) { 41 | // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案 42 | if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) { 43 | dpr = 3; 44 | } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){ 45 | dpr = 2; 46 | } else { 47 | dpr = 1; 48 | } 49 | } else { 50 | // 其他设备下，仍旧使用1倍的方案 51 | dpr = 1; 52 | } 53 | scale = 1 / dpr; 54 | } 55 | 56 | docEl.setAttribute('data-dpr', dpr); 57 | if(isUCBrowser) 58 | docEl.setAttribute('class','uc'); 59 | else if(isMQQBrowser) 60 | docEl.setAttribute('class','qq'); 61 | if (!metaEl) { 62 | metaEl = doc.createElement('meta'); 63 | metaEl.setAttribute('name', 'viewport'); 64 | metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no'); 65 | if (docEl.firstElementChild) { 66 | docEl.firstElementChild.appendChild(metaEl); 67 | } else { 68 | var wrap = doc.createElement('div'); 69 | wrap.appendChild(metaEl); 70 | doc.write(wrap.innerHTML); 71 | } 72 | } 73 | 74 | function refreshRem(){ 75 | var width = docEl.getBoundingClientRect().width; 76 | if (width / dpr > 540) { 77 | width = 540 * dpr; 78 | } 79 | var rem = width / 10; 80 | docEl.style.fontSize = rem + 'px'; 81 | flexible.rem = win.rem = rem; 82 | } 83 | 84 | win.addEventListener('resize', function() { 85 | clearTimeout(tid); 86 | tid = setTimeout(refreshRem, 300); 87 | }, false); 88 | win.addEventListener('pageshow', function(e) { 89 | if (e.persisted) { 90 | clearTimeout(tid); 91 | tid = setTimeout(refreshRem, 300); 92 | } 93 | }, false); 94 | 95 | if (doc.readyState === 'complete') { 96 | doc.body.style.fontSize = 12 * dpr + 'px'; 97 | } else { 98 | doc.addEventListener('DOMContentLoaded', function(e) { 99 | doc.body.style.fontSize = 12 * dpr + 'px'; 100 | }, false); 101 | } 102 | 103 | 104 | refreshRem(); 105 | 106 | flexible.dpr = win.dpr = dpr; 107 | flexible.refreshRem = refreshRem; 108 | flexible.rem2px = function(d) { 109 | var val = parseFloat(d) * this.rem; 110 | if (typeof d === 'string' && d.match(/rem$/)) { 111 | val += 'px'; 112 | } 113 | return val; 114 | } 115 | flexible.px2rem = function(d) { 116 | var val = parseFloat(d) / this.rem; 117 | if (typeof d === 'string' && d.match(/px$/)) { 118 | val += 'rem'; 119 | } 120 | return val; 121 | } 122 | 123 | })(window, window['lib'] || (window['lib'] = {})); -------------------------------------------------------------------------------- /dist/css/button.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | .al-btn { 3 | display: inline-block; 4 | height: 30px; 5 | padding: 0 10px; 6 | margin: 0 5px 5px 0; 7 | color: #fff; 8 | font-size: 14px; 9 | font-family: arial, "Hiragino Sans GB", "Microsoft Yahei", 微软雅黑, 宋体, Tahoma, Arial, Helvetica, STHeiti, PingFang SC; 10 | line-height: 30px; 11 | text-align: center; 12 | vertical-align: bottom; 13 | white-space: nowrap; 14 | border-width: 1px; 15 | border-style: solid; 16 | border-color: transparent; 17 | border-radius: 0px; 18 | outline: none; 19 | background-color: transparent; 20 | cursor: pointer; 21 | /* button style */ 22 | /* button size */ } 23 | .al-btn.al-btn-type__icon { 24 | padding: 0 6px; } 25 | .al-btn.al-btn-type__icon .al-icon { 26 | font-weight: 700; } 27 | .al-btn.al-btn-type__icon:hover { 28 | background-color: #1f8ae9; 29 | color: #fff; } 30 | .al-btn.al-btn-type__icon:active { 31 | background-color: #0d77d5 !important; 32 | color: #fff; } 33 | .al-btn.al-btn__default { 34 | background-color: #1f8ae9; } 35 | .al-btn.al-btn__default:hover { 36 | background-color: #1881df; } 37 | .al-btn.al-btn__default:active { 38 | background-color: #0d77d5; } 39 | .al-btn.al-btn__danger { 40 | background-color: #e93535; } 41 | .al-btn.al-btn__danger:hover { 42 | background-color: #df2626; } 43 | .al-btn.al-btn__danger:active { 44 | background-color: #d41e1e; } 45 | .al-btn.al-btn__warn { 46 | background-color: #f7ba2a; } 47 | .al-btn.al-btn__warn:hover { 48 | background-color: #efb01c; } 49 | .al-btn.al-btn__warn:active { 50 | background-color: #e5a714; } 51 | .al-btn.al-btn__success { 52 | background-color: #7aad3e; } 53 | .al-btn.al-btn__success:hover { 54 | background-color: #70a433; } 55 | .al-btn.al-btn__success:active { 56 | background-color: #66972d; } 57 | .al-btn.al-btn__disabled, .al-btn.al-btn__outline { 58 | color: #aeaeae; 59 | line-height: 28px; 60 | border-color: #cdcdcd; 61 | background-color: #f1f1f1; } 62 | .al-btn.al-btn__disabled.al-btn__tiny, .al-btn.al-btn__outline.al-btn__tiny { 63 | line-height: 20px; } 64 | .al-btn.al-btn__disabled.al-btn__small, .al-btn.al-btn__outline.al-btn__small { 65 | line-height: 24px; } 66 | .al-btn.al-btn__disabled.al-btn__large, .al-btn.al-btn__outline.al-btn__large { 67 | line-height: 38px; } 68 | .al-btn.al-btn__disabled.al-btn__full, .al-btn.al-btn__outline.al-btn__full { 69 | line-height: 38px; } 70 | .al-btn.al-btn__disabled, .al-btn[disabled] { 71 | cursor: not-allowed; } 72 | .al-btn.al-btn__outline { 73 | color: #404040; 74 | background-color: transparent; } 75 | .al-btn.al-btn__outline:hover { 76 | border-color: #1f8ae9; } 77 | .al-btn.al-btn__outline:active { 78 | border-color: #0d77d5; 79 | background-color: #f9f9f9; } 80 | .al-btn.al-btn__tiny { 81 | padding: 0 5px; 82 | height: 22px; 83 | font-size: 12px; 84 | line-height: 22px; } 85 | .al-btn.al-btn__small { 86 | height: 26px; 87 | font-size: 12px; 88 | line-height: 26px; } 89 | .al-btn.al-btn__large { 90 | height: 40px; 91 | font-size: 16px; 92 | line-height: 40px; } 93 | .al-btn.al-btn__full { 94 | width: 100%; 95 | height: 40px; 96 | font-size: 16px; 97 | line-height: 40px; } 98 | .al-btn.al-btn__radius { 99 | border-radius: 5px; } 100 | .al-btn.al-btn__circle { 101 | border-radius: 40px; } 102 | -------------------------------------------------------------------------------- /dist/css/cashout.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zlalex/ego-css/964053bd3fd0d31e0083fa6a5f4f515f1ec20db1/dist/css/cashout.css -------------------------------------------------------------------------------- /dist/css/core.css: -------------------------------------------------------------------------------- 1 | .al-fl { 2 | float: left; } 3 | 4 | .al-fr { 5 | float: right; } 6 | 7 | .al-clearfix::before { 8 | content: ''; 9 | display: table; } 10 | 11 | .al-clearfix::after { 12 | content: ''; 13 | display: table; 14 | clear: both; 15 | visibility: hidden; } 16 | 17 | .al-abs { 18 | position: absolute; } 19 | 20 | .al-rel { 21 | position: relative; } 22 | 23 | .al-fixed { 24 | position: fixed; } 25 | 26 | .al-auto { 27 | margin-left: auto; 28 | margin-right: auto; } 29 | 30 | .al-center__level { 31 | left: 50%; 32 | transform: translateX(-50%); } 33 | 34 | .al-center__vertical { 35 | top: 50%; 36 | transform: translateY(-50%); } 37 | 38 | .al-center__just { 39 | top: 50%; 40 | left: 50%; 41 | transform: translate(-50%, -50%); } 42 | 43 | .al-align__center { 44 | text-align: center; } 45 | 46 | .al-align__left { 47 | text-align: left; } 48 | 49 | .al-align__right { 50 | text-align: right; } 51 | 52 | .al-indent { 53 | text-indent: 2em; } 54 | 55 | .al-ellipsis { 56 | text-overflow: ellipsis; 57 | white-space: nowrap; 58 | overflow: hidden; } 59 | 60 | .al-para { 61 | text-align: justify; 62 | line-height: 1.5; } 63 | 64 | .al-img_just { 65 | text-align: center; } 66 | .al-img_just::after { 67 | content: ''; 68 | vertical-align: middle; } 69 | .al-img_just img { 70 | width: auto; 71 | vertical-align: middle; } 72 | 73 | .al-block { 74 | display: block; } 75 | 76 | .al-inline__block { 77 | display: inline-block; } 78 | 79 | .al-show { 80 | display: block !important; } 81 | 82 | .al-hide { 83 | display: none !important; } 84 | 85 | .al-flex__wrap { 86 | display: flex; } 87 | .al-flex__wrap .al-flex__item { 88 | align-items: center; 89 | justify-content: space-between; } 90 | -------------------------------------------------------------------------------- /dist/css/coupon.css: -------------------------------------------------------------------------------- 1 | .coupon-list-wrapper { 2 | margin: 0.26667rem 0; } 3 | .coupon-list-wrapper .coupon-item { 4 | margin-bottom: 0.26667rem; 5 | padding: 0.45333rem; 6 | background: #fff; } 7 | .coupon-list-wrapper .coupon-img-wrapper { 8 | width: 2.13333rem; 9 | height: 2.13333rem; 10 | margin-right: 0.26667rem; 11 | background-color: #f4f4f4; } 12 | .coupon-list-wrapper .coupon-img-wrapper p { 13 | top: 50%; 14 | left: 0.32rem; 15 | transform: translateY(-50%); 16 | font-size: 0.16rem; } 17 | .coupon-list-wrapper .coupon-img-wrapper p span { 18 | display: block; } 19 | .coupon-list-wrapper .coupon-info { 20 | display: flex; 21 | flex-direction: column; 22 | justify-content: space-between; 23 | line-height: 1.06667rem; 24 | font-size: 0.34667rem; } 25 | .coupon-list-wrapper .coupon-operation { 26 | position: relative; 27 | display: flex; 28 | align-items: flex-end; 29 | width: 120px; } 30 | .coupon-list-wrapper .coupon-operation .btn { 31 | position: absolute; 32 | right: 0; } 33 | .coupon-list-wrapper .coupon-operation .btn-normal { 34 | color: #ab2b2c; } 35 | -------------------------------------------------------------------------------- /dist/css/form.css: -------------------------------------------------------------------------------- 1 | .al-form__section { 2 | position: relative; 3 | padding: 20px; 4 | border-width: 1px; 5 | border-style: solid; 6 | border-color: #e6e6e6; } 7 | .al-form__section .al-form__title { 8 | position: absolute; 9 | top: -1em; 10 | left: 2em; 11 | padding: 0 1em; 12 | line-height: 2; 13 | background-color: #fff; } 14 | 15 | .al-form__item { 16 | margin: 20px 0; 17 | min-width: 200px; 18 | min-height: 30px; } 19 | .al-form__item .al-form__group { 20 | margin-left: 100px; 21 | min-width: 100px; } 22 | 23 | .al-label { 24 | float: left; 25 | width: 100px; 26 | height: 30px; 27 | padding: 0 10px; 28 | font-size: 14px; 29 | line-height: 30px; 30 | text-align: right; } 31 | 32 | .al-input.al-input__large .al-input__inner { 33 | height: 40px; 34 | line-height: 38px; } 35 | 36 | .al-input .al-input__inner { 37 | width: 100%; 38 | height: 30px; 39 | padding-left: 1em; 40 | line-height: 28px; 41 | border-width: 1px; 42 | border-style: solid; 43 | border-color: #e6e6e6; 44 | outline: none; } 45 | .al-input .al-input__inner:hover { 46 | border-color: #cdcdcd; } 47 | .al-input .al-input__inner:focus:not([readonly]) { 48 | border-color: #1f8ae9; } 49 | 50 | .al-input .error-message { 51 | display: none; } 52 | 53 | .al-input.error { 54 | position: relative; } 55 | .al-input.error .al-input__inner { 56 | border-color: #e93535; } 57 | .al-input.error .error-message { 58 | position: absolute; 59 | bottom: -15px; 60 | left: 0; 61 | display: block; 62 | font-size: 12px; 63 | line-height: 1; 64 | color: #e93535; } 65 | 66 | .al-input.disabled, 67 | .al-input .al-input__inner[disabled] { 68 | color: #aeaeae; 69 | border-color: #cdcdcd; 70 | background-color: #f2f2f2; 71 | cursor: not-allowed; } 72 | 73 | .al-switch { 74 | position: relative; 75 | top: 3px; } 76 | .al-switch.disabled .al-switch__group { 77 | background-color: #f1f1f1; } 78 | .al-switch .al-switch__group { 79 | display: block; 80 | width: 54px; 81 | height: 24px; 82 | border-radius: 24px; 83 | border-width: 1px; 84 | border-style: solid; 85 | border-color: #cdcdcd; } 86 | .al-switch .al-switch__group::before { 87 | content: ""; 88 | position: absolute; 89 | top: 4px; 90 | left: 4px; 91 | width: 16px; 92 | height: 16px; 93 | background-color: #d2d2d2; 94 | border-radius: 50%; 95 | transition: all 0.25s; } 96 | .al-switch .al-switch__group::after { 97 | content: "OFF"; 98 | position: absolute; 99 | right: 6px; 100 | color: #999; 101 | font-size: 12px; 102 | line-height: 22px; } 103 | .al-switch input[type="checkbox"]:checked + .al-switch__group { 104 | border-color: #1f8ae9; 105 | background-color: #1f8ae9; } 106 | .al-switch input[type="checkbox"]:checked + .al-switch__group::before { 107 | content: ""; 108 | left: 34px; 109 | transition: all 0.25s; 110 | background-color: #fff; } 111 | .al-switch input[type="checkbox"]:checked + .al-switch__group::after { 112 | content: "ON"; 113 | color: #fff; 114 | right: 26px; } 115 | 116 | .al-checkbox .al-checkbox__group { 117 | position: relative; 118 | top: 6px; 119 | float: left; 120 | width: 18px; 121 | height: 18px; 122 | border: solid 1px #cdcdcd; } 123 | .al-checkbox .al-checkbox__group::before { 124 | content: ""; 125 | position: absolute; 126 | left: 5px; 127 | bottom: 3px; 128 | width: 8px; 129 | height: 14px; 130 | border: 0 none; 131 | transform: rotateZ(45deg); 132 | transition: all 0.25s; } 133 | .al-checkbox .al-checkbox__group:hover { 134 | border-color: #1f8ae9; } 135 | 136 | .al-checkbox.disabled .al-checkbox__group { 137 | background-color: #f1f1f1; } 138 | .al-checkbox.disabled .al-checkbox__group:hover { 139 | border-color: #cdcdcd; } 140 | 141 | .al-checkbox.disabled input[type="checkbox"]:checked + .al-checkbox__group { 142 | border-color: #d2d2d2; 143 | background-color: #d2d2d2; } 144 | 145 | .al-checkbox .al-checkbox__label { 146 | display: inline-block; 147 | margin-left: 10px; 148 | margin-right: 20px; } 149 | 150 | .al-checkbox input[type="checkbox"]:checked + .al-checkbox__group { 151 | border-color: #1f8ae9; 152 | background-color: #1f8ae9; } 153 | .al-checkbox input[type="checkbox"]:checked + .al-checkbox__group::before { 154 | content: ""; 155 | border-bottom: 2px solid #fff; 156 | border-right: 2px solid #fff; 157 | transition: all 0.25s; } 158 | 159 | .al-radio .al-radio__label { 160 | display: inline-block; 161 | margin-left: 10px; 162 | margin-right: 20px; } 163 | 164 | .al-radio.disabled .al-radio__group { 165 | background-color: #f1f1f1; } 166 | 167 | .al-radio .al-radio__group { 168 | position: relative; 169 | top: 5px; 170 | float: left; 171 | width: 20px; 172 | height: 20px; 173 | border-radius: 50%; 174 | border-width: 1px; 175 | border-style: solid; 176 | border-color: #cdcdcd; } 177 | .al-radio .al-radio__group::before { 178 | content: ""; 179 | position: absolute; 180 | top: 5px; 181 | left: 5px; 182 | width: 8px; 183 | height: 8px; 184 | border-radius: 50%; 185 | background-color: transparent; 186 | transition: all 0.25s; } 187 | 188 | .al-radio input[type="radio"]:checked + .al-radio__group { 189 | border-color: #1f8ae9; } 190 | .al-radio input[type="radio"]:checked + .al-radio__group::before { 191 | content: ""; 192 | background-color: #1f8ae9; 193 | transition: all 0.25s; } 194 | 195 | .al-select { 196 | position: relative; 197 | cursor: pointer; } 198 | .al-select .al-select__text { 199 | width: 100%; 200 | height: 30px; 201 | padding-left: 1em; 202 | line-height: 28px; 203 | border-width: 1px; 204 | border-style: solid; 205 | border-color: #e6e6e6; } 206 | .al-select .al-select__input { 207 | position: relative; } 208 | .al-select .al-select__input:after { 209 | content: ""; 210 | position: absolute; 211 | top: 11px; 212 | right: 11px; 213 | width: 12px; 214 | height: 12px; 215 | border-top: 6px solid #cdcdcd; 216 | border-left: 6px solid transparent; 217 | border-right: 6px solid transparent; 218 | transition: all .5s; } 219 | .al-select.active .al-select__main { 220 | display: block; 221 | top: 40px; 222 | transition: all .5s; } 223 | .al-select.active .al-select__input:after { 224 | content: ""; 225 | transform: rotateZ(180deg); 226 | transform-origin: 6px 3px; 227 | transition: all .5s; } 228 | .al-select.disabled { 229 | cursor: not-allowed; } 230 | .al-select.disabled .al-select__text { 231 | background-color: #f2f2f2; } 232 | .al-select.disabled .al-select__main { 233 | display: none !important; } 234 | 235 | .al-select__main { 236 | position: absolute; 237 | z-index: 2; 238 | top: 50px; 239 | display: none; 240 | width: 100%; 241 | max-height: 202px; 242 | line-height: 30px; 243 | background-color: #fff; 244 | border-width: 1px; 245 | border-style: solid; 246 | border-color: #cdcdcd; 247 | box-shadow: 0 0 4px #f2f2f2; } 248 | .al-select__main li { 249 | text-indent: 1em; } 250 | .al-select__main li:hover { 251 | background-color: #f8f8f8; } 252 | .al-select__main li.active { 253 | color: #fff; 254 | background-color: #1f8ae9; } 255 | .al-select__main li:first-child { 256 | color: #999; } 257 | 258 | .al-switch, 259 | .al-checkbox, 260 | .al-radio { 261 | float: left; 262 | line-height: 30px; 263 | cursor: pointer; } 264 | .al-switch.disabled, 265 | .al-checkbox.disabled, 266 | .al-radio.disabled { 267 | cursor: not-allowed; } 268 | -------------------------------------------------------------------------------- /dist/css/iconfont.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "iconfont"; 3 | src: url("iconfont.eot?t=1513591126108"); 4 | /* IE9*/ 5 | src: url("iconfont.eot?t=1513591126108#iefix") format("embedded-opentype"), url("data:application/x-font-woff;charset=utf-8;base64,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") format("woff"), url("iconfont.ttf?t=1513591126108") format("truetype"), url("iconfont.svg?t=1513591126108#iconfont") format("svg"); 6 | /* iOS 4.1- */ } 7 | 8 | .al-icon { 9 | font-family: "iconfont" !important; 10 | font-size: 16px; 11 | font-style: normal; 12 | font-weight: 400; 13 | -webkit-font-smoothing: antialiased; 14 | -moz-osx-font-smoothing: grayscale; } 15 | 16 | .al-icon__activity:before { 17 | content: "\e6de"; } 18 | 19 | .al-icon__add:before { 20 | content: "\e6df"; } 21 | 22 | .al-icon__brush:before { 23 | content: "\e6e5"; } 24 | 25 | .al-icon__close:before { 26 | content: "\e6e9"; } 27 | 28 | .al-icon__delete:before { 29 | content: "\e6f2"; } 30 | 31 | .al-icon__editor:before { 32 | content: "\e6f5"; } 33 | 34 | .al-icon__enter:before { 35 | content: "\e6f8"; } 36 | 37 | .al-icon__label:before { 38 | content: "\e706"; } 39 | 40 | .al-icon__lock:before { 41 | content: "\e709"; } 42 | 43 | .al-icon__prompt:before { 44 | content: "\e71b"; } 45 | 46 | .al-icon__refresh:before { 47 | content: "\e71e"; } 48 | 49 | .al-icon__return:before { 50 | content: "\e720"; } 51 | 52 | .al-icon__setup:before { 53 | content: "\e728"; } 54 | 55 | .al-icon__success:before { 56 | content: "\e72d"; } 57 | 58 | .al-icon__time:before { 59 | content: "\e735"; } 60 | 61 | .al-icon__trash:before { 62 | content: "\e738"; } 63 | 64 | .al-icon__warning:before { 65 | content: "\e73d"; } 66 | 67 | .al-icon__search:before { 68 | content: "\e741"; } 69 | 70 | .al-icon__packup:before { 71 | content: "\e749"; } 72 | 73 | .al-icon__unfold:before { 74 | content: "\e74a"; } 75 | -------------------------------------------------------------------------------- /dist/css/layout.css: -------------------------------------------------------------------------------- 1 | .al-contain::before, 2 | .al-row::before { 3 | content: ""; 4 | display: table; } 5 | 6 | .al-contain::after, 7 | .al-row::after { 8 | content: ""; 9 | display: table; 10 | clear: both; } 11 | 12 | .al-row { 13 | display: block; 14 | float: left; 15 | width: 100%; } 16 | .al-row [class*="al-col__"] { 17 | float: left; 18 | display: inline-block; 19 | vertical-align: middle; } 20 | .al-row .al-col__1 { 21 | width: 4.16667%; } 22 | .al-row .al-offset-left__1 { 23 | margin-left: 4.16667%; } 24 | .al-row .al-offset-right__1 { 25 | margin-right: 4.16667%; } 26 | .al-row .al-col__2 { 27 | width: 8.33333%; } 28 | .al-row .al-offset-left__2 { 29 | margin-left: 8.33333%; } 30 | .al-row .al-offset-right__2 { 31 | margin-right: 8.33333%; } 32 | .al-row .al-col__3 { 33 | width: 12.5%; } 34 | .al-row .al-offset-left__3 { 35 | margin-left: 12.5%; } 36 | .al-row .al-offset-right__3 { 37 | margin-right: 12.5%; } 38 | .al-row .al-col__4 { 39 | width: 16.66667%; } 40 | .al-row .al-offset-left__4 { 41 | margin-left: 16.66667%; } 42 | .al-row .al-offset-right__4 { 43 | margin-right: 16.66667%; } 44 | .al-row .al-col__6 { 45 | width: 25%; } 46 | .al-row .al-offset-left__6 { 47 | margin-left: 25%; } 48 | .al-row .al-offset-right__6 { 49 | margin-right: 25%; } 50 | .al-row .al-col__8 { 51 | width: 33.33333%; } 52 | .al-row .al-offset-left__8 { 53 | margin-left: 33.33333%; } 54 | .al-row .al-offset-right__8 { 55 | margin-right: 33.33333%; } 56 | .al-row .al-col__12 { 57 | width: 50%; } 58 | .al-row .al-offset-left__12 { 59 | margin-left: 50%; } 60 | .al-row .al-offset-right__12 { 61 | margin-right: 50%; } 62 | .al-row .al-col__24 { 63 | width: 100%; } 64 | .al-row .al-offset-left__24 { 65 | margin-left: 100%; } 66 | .al-row .al-offset-right__24 { 67 | margin-right: 100%; } 68 | 69 | [class*="al-col__"] { 70 | min-height: 30px; } 71 | 72 | .al-type__page { 73 | width: 1200px; 74 | margin-left: auto; 75 | margin-right: auto; } 76 | 77 | .al-layout__page { 78 | position: absolute; 79 | top: 0; 80 | left: 0; 81 | width: 100%; 82 | height: 100%; 83 | z-index: 10; } 84 | .al-layout__page.website { 85 | padding-top: 70px; 86 | padding-bottom: 52px; } 87 | .al-layout__page.website .al-layout__header { 88 | height: 70px; } 89 | .al-layout__page.website .al-layout__footer { 90 | height: 52px; } 91 | .al-layout__page.project { 92 | padding-top: 50px; 93 | padding-bottom: 30px; } 94 | .al-layout__page.project .al-layout__header { 95 | height: 50px; 96 | background-color: #23262f; } 97 | .al-layout__page.project .al-layout__footer { 98 | background: #f2f2f2; } 99 | 100 | .al-layout__header { 101 | position: absolute; 102 | top: 0; 103 | left: 0; 104 | width: 100%; 105 | background: #fff; } 106 | 107 | .al-layout__menu { 108 | min-width: 180px; 109 | background: #393d49; } 110 | 111 | .al-layout__content { 112 | display: flex; 113 | width: 100%; 114 | height: 100%; } 115 | .al-layout__content .al-layout__context { 116 | flex: 1; 117 | padding: 10px; } 118 | 119 | .al-layout__footer { 120 | position: absolute; 121 | left: 0; 122 | bottom: 0; 123 | width: 100%; 124 | min-height: 30px; 125 | color: #696969; 126 | font-size: 12px; 127 | background: #fff; } 128 | -------------------------------------------------------------------------------- /dist/css/mobile.layout.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; } 5 | 6 | .text-center { 7 | text-align: center; } 8 | 9 | .flex-box { 10 | display: flex; 11 | justify-content: space-between; } 12 | 13 | html, body, .layout-page { 14 | height: 100%; } 15 | 16 | .body, 17 | .layout-page { 18 | background: #eee; } 19 | 20 | .layout-page { 21 | width: 100%; 22 | min-height: 100%; 23 | overflow: hidden; 24 | padding-top: 1.2rem; } 25 | .layout-page .top-nav { 26 | position: fixed; 27 | z-index: 1000; 28 | left: 0; 29 | top: 0; 30 | display: block; 31 | width: 100%; 32 | background-color: #fff; 33 | border-bottom: 1px solid #e1e1e1; } 34 | .layout-page .layout-content { 35 | max-width: 540px; 36 | height: 100%; 37 | margin: 0 auto; } 38 | 39 | .btn { 40 | display: inline-block; 41 | width: 1.41333rem; 42 | height: 0.69333rem; 43 | text-align: center; 44 | line-height: 0.66667rem; 45 | border-radius: 2px; } 46 | .btn.btn-outline { 47 | border: solid 1px #7f7f7f; } 48 | .btn.btn-normal { 49 | border: solid 1px transparent; } 50 | 51 | .abs { 52 | position: absolute; } 53 | 54 | .rel { 55 | position: relative; } 56 | 57 | .layout-title { 58 | height: 1.2rem; 59 | line-height: 1.2rem; 60 | font-size: 1.5em; } 61 | .layout-title .title-left { 62 | position: absolute; 63 | z-index: 1000; 64 | left: 0; 65 | top: 0; 66 | display: block; 67 | font-size: 1.11em; 68 | color: #999; 69 | background: url("../images/icon_back.png") center center no-repeat; 70 | background-size: .5rem; 71 | transform: rotateZ(180deg); } 72 | .layout-title .title-back { 73 | display: inline-block; 74 | width: 1.33333rem; 75 | padding-left: 0.4rem; 76 | padding-right: 0.4rem; } 77 | .layout-title .title-content { 78 | font-weight: bold; 79 | max-width: 50%; 80 | overflow: hidden; 81 | white-space: nowrap; 82 | text-overflow: ellipsis; 83 | margin: 0 auto; 84 | color: #333a49; } 85 | -------------------------------------------------------------------------------- /dist/css/prefixer/button.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | .al-btn { 3 | display: inline-block; 4 | height: 30px; 5 | padding: 0 10px; 6 | margin: 0 5px 5px 0; 7 | color: #fff; 8 | font-size: 14px; 9 | font-family: arial, "Hiragino Sans GB", "Microsoft Yahei", 微软雅黑, 宋体, Tahoma, Arial, Helvetica, STHeiti, PingFang SC; 10 | line-height: 30px; 11 | text-align: center; 12 | vertical-align: bottom; 13 | white-space: nowrap; 14 | border-width: 1px; 15 | border-style: solid; 16 | border-color: transparent; 17 | border-radius: 0px; 18 | outline: none; 19 | background-color: transparent; 20 | cursor: pointer; 21 | /* button style */ 22 | /* button size */ } 23 | .al-btn.al-btn-type__icon { 24 | padding: 0 6px; } 25 | .al-btn.al-btn-type__icon .al-icon { 26 | font-weight: 700; } 27 | .al-btn.al-btn-type__icon:hover { 28 | background-color: #1f8ae9; 29 | color: #fff; } 30 | .al-btn.al-btn-type__icon:active { 31 | background-color: #0d77d5 !important; 32 | color: #fff; } 33 | .al-btn.al-btn__default { 34 | background-color: #1f8ae9; } 35 | .al-btn.al-btn__default:hover { 36 | background-color: #1881df; } 37 | .al-btn.al-btn__default:active { 38 | background-color: #0d77d5; } 39 | .al-btn.al-btn__danger { 40 | background-color: #e93535; } 41 | .al-btn.al-btn__danger:hover { 42 | background-color: #df2626; } 43 | .al-btn.al-btn__danger:active { 44 | background-color: #d41e1e; } 45 | .al-btn.al-btn__warn { 46 | background-color: #f7ba2a; } 47 | .al-btn.al-btn__warn:hover { 48 | background-color: #efb01c; } 49 | .al-btn.al-btn__warn:active { 50 | background-color: #e5a714; } 51 | .al-btn.al-btn__success { 52 | background-color: #7aad3e; } 53 | .al-btn.al-btn__success:hover { 54 | background-color: #70a433; } 55 | .al-btn.al-btn__success:active { 56 | background-color: #66972d; } 57 | .al-btn.al-btn__disabled, .al-btn.al-btn__outline { 58 | color: #aeaeae; 59 | line-height: 28px; 60 | border-color: #cdcdcd; 61 | background-color: #f1f1f1; } 62 | .al-btn.al-btn__disabled.al-btn__tiny, .al-btn.al-btn__outline.al-btn__tiny { 63 | line-height: 20px; } 64 | .al-btn.al-btn__disabled.al-btn__small, .al-btn.al-btn__outline.al-btn__small { 65 | line-height: 24px; } 66 | .al-btn.al-btn__disabled.al-btn__large, .al-btn.al-btn__outline.al-btn__large { 67 | line-height: 38px; } 68 | .al-btn.al-btn__disabled.al-btn__full, .al-btn.al-btn__outline.al-btn__full { 69 | line-height: 38px; } 70 | .al-btn.al-btn__disabled, .al-btn[disabled] { 71 | cursor: not-allowed; } 72 | .al-btn.al-btn__outline { 73 | color: #404040; 74 | background-color: transparent; } 75 | .al-btn.al-btn__outline:hover { 76 | border-color: #1f8ae9; } 77 | .al-btn.al-btn__outline:active { 78 | border-color: #0d77d5; 79 | background-color: #f9f9f9; } 80 | .al-btn.al-btn__tiny { 81 | padding: 0 5px; 82 | height: 22px; 83 | font-size: 12px; 84 | line-height: 22px; } 85 | .al-btn.al-btn__small { 86 | height: 26px; 87 | font-size: 12px; 88 | line-height: 26px; } 89 | .al-btn.al-btn__large { 90 | height: 40px; 91 | font-size: 16px; 92 | line-height: 40px; } 93 | .al-btn.al-btn__full { 94 | width: 100%; 95 | height: 40px; 96 | font-size: 16px; 97 | line-height: 40px; } 98 | .al-btn.al-btn__radius { 99 | border-radius: 5px; } 100 | .al-btn.al-btn__circle { 101 | border-radius: 40px; } 102 | -------------------------------------------------------------------------------- /dist/css/prefixer/cashout.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zlalex/ego-css/964053bd3fd0d31e0083fa6a5f4f515f1ec20db1/dist/css/prefixer/cashout.css -------------------------------------------------------------------------------- /dist/css/prefixer/core.css: -------------------------------------------------------------------------------- 1 | .al-fl { 2 | float: left; } 3 | 4 | .al-fr { 5 | float: right; } 6 | 7 | .al-clearfix::before { 8 | content: ''; 9 | display: table; } 10 | 11 | .al-clearfix::after { 12 | content: ''; 13 | display: table; 14 | clear: both; 15 | visibility: hidden; } 16 | 17 | .al-abs { 18 | position: absolute; } 19 | 20 | .al-rel { 21 | position: relative; } 22 | 23 | .al-fixed { 24 | position: fixed; } 25 | 26 | .al-auto { 27 | margin-left: auto; 28 | margin-right: auto; } 29 | 30 | .al-center__level { 31 | left: 50%; 32 | -webkit-transform: translateX(-50%); 33 | transform: translateX(-50%); } 34 | 35 | .al-center__vertical { 36 | top: 50%; 37 | -webkit-transform: translateY(-50%); 38 | transform: translateY(-50%); } 39 | 40 | .al-center__just { 41 | top: 50%; 42 | left: 50%; 43 | -webkit-transform: translate(-50%, -50%); 44 | transform: translate(-50%, -50%); } 45 | 46 | .al-align__center { 47 | text-align: center; } 48 | 49 | .al-align__left { 50 | text-align: left; } 51 | 52 | .al-align__right { 53 | text-align: right; } 54 | 55 | .al-indent { 56 | text-indent: 2em; } 57 | 58 | .al-ellipsis { 59 | text-overflow: ellipsis; 60 | white-space: nowrap; 61 | overflow: hidden; } 62 | 63 | .al-para { 64 | text-align: justify; 65 | line-height: 1.5; } 66 | 67 | .al-img_just { 68 | text-align: center; } 69 | .al-img_just::after { 70 | content: ''; 71 | vertical-align: middle; } 72 | .al-img_just img { 73 | width: auto; 74 | vertical-align: middle; } 75 | 76 | .al-block { 77 | display: block; } 78 | 79 | .al-inline__block { 80 | display: inline-block; } 81 | 82 | .al-show { 83 | display: block !important; } 84 | 85 | .al-hide { 86 | display: none !important; } 87 | 88 | .al-flex__wrap { 89 | display: -webkit-box; 90 | display: -ms-flexbox; 91 | display: flex; } 92 | .al-flex__wrap .al-flex__item { 93 | -webkit-box-align: center; 94 | -ms-flex-align: center; 95 | align-items: center; 96 | -webkit-box-pack: justify; 97 | -ms-flex-pack: justify; 98 | justify-content: space-between; } 99 | -------------------------------------------------------------------------------- /dist/css/prefixer/coupon.css: -------------------------------------------------------------------------------- 1 | .coupon-list-wrapper { 2 | margin: 0.26667rem 0; } 3 | .coupon-list-wrapper .coupon-item { 4 | margin-bottom: 0.26667rem; 5 | padding: 0.45333rem; 6 | background: #fff; } 7 | .coupon-list-wrapper .coupon-img-wrapper { 8 | width: 2.13333rem; 9 | height: 2.13333rem; 10 | margin-right: 0.26667rem; 11 | background-color: #f4f4f4; } 12 | .coupon-list-wrapper .coupon-img-wrapper p { 13 | top: 50%; 14 | left: 0.32rem; 15 | -webkit-transform: translateY(-50%); 16 | transform: translateY(-50%); 17 | font-size: 0.16rem; } 18 | .coupon-list-wrapper .coupon-img-wrapper p span { 19 | display: block; } 20 | .coupon-list-wrapper .coupon-info { 21 | display: -webkit-box; 22 | display: -ms-flexbox; 23 | display: flex; 24 | -webkit-box-orient: vertical; 25 | -webkit-box-direction: normal; 26 | -ms-flex-direction: column; 27 | flex-direction: column; 28 | -webkit-box-pack: justify; 29 | -ms-flex-pack: justify; 30 | justify-content: space-between; 31 | line-height: 1.06667rem; 32 | font-size: 0.34667rem; } 33 | .coupon-list-wrapper .coupon-operation { 34 | position: relative; 35 | display: -webkit-box; 36 | display: -ms-flexbox; 37 | display: flex; 38 | -webkit-box-align: end; 39 | -ms-flex-align: end; 40 | align-items: flex-end; 41 | width: 120px; } 42 | .coupon-list-wrapper .coupon-operation .btn { 43 | position: absolute; 44 | right: 0; } 45 | .coupon-list-wrapper .coupon-operation .btn-normal { 46 | color: #ab2b2c; } 47 | -------------------------------------------------------------------------------- /dist/css/prefixer/form.css: -------------------------------------------------------------------------------- 1 | .al-form__section { 2 | position: relative; 3 | padding: 20px; 4 | border-width: 1px; 5 | border-style: solid; 6 | border-color: #e6e6e6; } 7 | .al-form__section .al-form__title { 8 | position: absolute; 9 | top: -1em; 10 | left: 2em; 11 | padding: 0 1em; 12 | line-height: 2; 13 | background-color: #fff; } 14 | 15 | .al-form__item { 16 | margin: 20px 0; 17 | min-width: 200px; 18 | min-height: 30px; } 19 | .al-form__item .al-form__group { 20 | margin-left: 100px; 21 | min-width: 100px; } 22 | 23 | .al-label { 24 | float: left; 25 | width: 100px; 26 | height: 30px; 27 | padding: 0 10px; 28 | font-size: 14px; 29 | line-height: 30px; 30 | text-align: right; } 31 | 32 | .al-input.al-input__large .al-input__inner { 33 | height: 40px; 34 | line-height: 38px; } 35 | 36 | .al-input .al-input__inner { 37 | width: 100%; 38 | height: 30px; 39 | padding-left: 1em; 40 | line-height: 28px; 41 | border-width: 1px; 42 | border-style: solid; 43 | border-color: #e6e6e6; 44 | outline: none; } 45 | .al-input .al-input__inner:hover { 46 | border-color: #cdcdcd; } 47 | .al-input .al-input__inner:focus:not([readonly]) { 48 | border-color: #1f8ae9; } 49 | 50 | .al-input .error-message { 51 | display: none; } 52 | 53 | .al-input.error { 54 | position: relative; } 55 | .al-input.error .al-input__inner { 56 | border-color: #e93535; } 57 | .al-input.error .error-message { 58 | position: absolute; 59 | bottom: -15px; 60 | left: 0; 61 | display: block; 62 | font-size: 12px; 63 | line-height: 1; 64 | color: #e93535; } 65 | 66 | .al-input.disabled, 67 | .al-input .al-input__inner[disabled] { 68 | color: #aeaeae; 69 | border-color: #cdcdcd; 70 | background-color: #f2f2f2; 71 | cursor: not-allowed; } 72 | 73 | .al-switch { 74 | position: relative; 75 | top: 3px; } 76 | .al-switch.disabled .al-switch__group { 77 | background-color: #f1f1f1; } 78 | .al-switch .al-switch__group { 79 | display: block; 80 | width: 54px; 81 | height: 24px; 82 | border-radius: 24px; 83 | border-width: 1px; 84 | border-style: solid; 85 | border-color: #cdcdcd; } 86 | .al-switch .al-switch__group::before { 87 | content: ""; 88 | position: absolute; 89 | top: 4px; 90 | left: 4px; 91 | width: 16px; 92 | height: 16px; 93 | background-color: #d2d2d2; 94 | border-radius: 50%; 95 | -webkit-transition: all 0.25s; 96 | transition: all 0.25s; } 97 | .al-switch .al-switch__group::after { 98 | content: "OFF"; 99 | position: absolute; 100 | right: 6px; 101 | color: #999; 102 | font-size: 12px; 103 | line-height: 22px; } 104 | .al-switch input[type="checkbox"]:checked + .al-switch__group { 105 | border-color: #1f8ae9; 106 | background-color: #1f8ae9; } 107 | .al-switch input[type="checkbox"]:checked + .al-switch__group::before { 108 | content: ""; 109 | left: 34px; 110 | -webkit-transition: all 0.25s; 111 | transition: all 0.25s; 112 | background-color: #fff; } 113 | .al-switch input[type="checkbox"]:checked + .al-switch__group::after { 114 | content: "ON"; 115 | color: #fff; 116 | right: 26px; } 117 | 118 | .al-checkbox .al-checkbox__group { 119 | position: relative; 120 | top: 6px; 121 | float: left; 122 | width: 18px; 123 | height: 18px; 124 | border: solid 1px #cdcdcd; } 125 | .al-checkbox .al-checkbox__group::before { 126 | content: ""; 127 | position: absolute; 128 | left: 5px; 129 | bottom: 3px; 130 | width: 8px; 131 | height: 14px; 132 | border: 0 none; 133 | -webkit-transform: rotateZ(45deg); 134 | transform: rotateZ(45deg); 135 | -webkit-transition: all 0.25s; 136 | transition: all 0.25s; } 137 | .al-checkbox .al-checkbox__group:hover { 138 | border-color: #1f8ae9; } 139 | 140 | .al-checkbox.disabled .al-checkbox__group { 141 | background-color: #f1f1f1; } 142 | .al-checkbox.disabled .al-checkbox__group:hover { 143 | border-color: #cdcdcd; } 144 | 145 | .al-checkbox.disabled input[type="checkbox"]:checked + .al-checkbox__group { 146 | border-color: #d2d2d2; 147 | background-color: #d2d2d2; } 148 | 149 | .al-checkbox .al-checkbox__label { 150 | display: inline-block; 151 | margin-left: 10px; 152 | margin-right: 20px; } 153 | 154 | .al-checkbox input[type="checkbox"]:checked + .al-checkbox__group { 155 | border-color: #1f8ae9; 156 | background-color: #1f8ae9; } 157 | .al-checkbox input[type="checkbox"]:checked + .al-checkbox__group::before { 158 | content: ""; 159 | border-bottom: 2px solid #fff; 160 | border-right: 2px solid #fff; 161 | -webkit-transition: all 0.25s; 162 | transition: all 0.25s; } 163 | 164 | .al-radio .al-radio__label { 165 | display: inline-block; 166 | margin-left: 10px; 167 | margin-right: 20px; } 168 | 169 | .al-radio.disabled .al-radio__group { 170 | background-color: #f1f1f1; } 171 | 172 | .al-radio .al-radio__group { 173 | position: relative; 174 | top: 5px; 175 | float: left; 176 | width: 20px; 177 | height: 20px; 178 | border-radius: 50%; 179 | border-width: 1px; 180 | border-style: solid; 181 | border-color: #cdcdcd; } 182 | .al-radio .al-radio__group::before { 183 | content: ""; 184 | position: absolute; 185 | top: 5px; 186 | left: 5px; 187 | width: 8px; 188 | height: 8px; 189 | border-radius: 50%; 190 | background-color: transparent; 191 | -webkit-transition: all 0.25s; 192 | transition: all 0.25s; } 193 | 194 | .al-radio input[type="radio"]:checked + .al-radio__group { 195 | border-color: #1f8ae9; } 196 | .al-radio input[type="radio"]:checked + .al-radio__group::before { 197 | content: ""; 198 | background-color: #1f8ae9; 199 | -webkit-transition: all 0.25s; 200 | transition: all 0.25s; } 201 | 202 | .al-select { 203 | position: relative; 204 | cursor: pointer; } 205 | .al-select .al-select__text { 206 | width: 100%; 207 | height: 30px; 208 | padding-left: 1em; 209 | line-height: 28px; 210 | border-width: 1px; 211 | border-style: solid; 212 | border-color: #e6e6e6; } 213 | .al-select .al-select__input { 214 | position: relative; } 215 | .al-select .al-select__input:after { 216 | content: ""; 217 | position: absolute; 218 | top: 11px; 219 | right: 11px; 220 | width: 12px; 221 | height: 12px; 222 | border-top: 6px solid #cdcdcd; 223 | border-left: 6px solid transparent; 224 | border-right: 6px solid transparent; 225 | -webkit-transition: all .5s; 226 | transition: all .5s; } 227 | .al-select.active .al-select__main { 228 | display: block; 229 | top: 40px; 230 | -webkit-transition: all .5s; 231 | transition: all .5s; } 232 | .al-select.active .al-select__input:after { 233 | content: ""; 234 | -webkit-transform: rotateZ(180deg); 235 | transform: rotateZ(180deg); 236 | -webkit-transform-origin: 6px 3px; 237 | transform-origin: 6px 3px; 238 | -webkit-transition: all .5s; 239 | transition: all .5s; } 240 | .al-select.disabled { 241 | cursor: not-allowed; } 242 | .al-select.disabled .al-select__text { 243 | background-color: #f2f2f2; } 244 | .al-select.disabled .al-select__main { 245 | display: none !important; } 246 | 247 | .al-select__main { 248 | position: absolute; 249 | z-index: 2; 250 | top: 50px; 251 | display: none; 252 | width: 100%; 253 | max-height: 202px; 254 | line-height: 30px; 255 | background-color: #fff; 256 | border-width: 1px; 257 | border-style: solid; 258 | border-color: #cdcdcd; 259 | -webkit-box-shadow: 0 0 4px #f2f2f2; 260 | box-shadow: 0 0 4px #f2f2f2; } 261 | .al-select__main li { 262 | text-indent: 1em; } 263 | .al-select__main li:hover { 264 | background-color: #f8f8f8; } 265 | .al-select__main li.active { 266 | color: #fff; 267 | background-color: #1f8ae9; } 268 | .al-select__main li:first-child { 269 | color: #999; } 270 | 271 | .al-switch, 272 | .al-checkbox, 273 | .al-radio { 274 | float: left; 275 | line-height: 30px; 276 | cursor: pointer; } 277 | .al-switch.disabled, 278 | .al-checkbox.disabled, 279 | .al-radio.disabled { 280 | cursor: not-allowed; } 281 | -------------------------------------------------------------------------------- /dist/css/prefixer/iconfont.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "iconfont"; 3 | src: url("iconfont.eot?t=1513591126108"); 4 | /* IE9*/ 5 | src: url("iconfont.eot?t=1513591126108#iefix") format("embedded-opentype"), url("data:application/x-font-woff;charset=utf-8;base64,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") format("woff"), url("iconfont.ttf?t=1513591126108") format("truetype"), url("iconfont.svg?t=1513591126108#iconfont") format("svg"); 6 | /* iOS 4.1- */ } 7 | 8 | .al-icon { 9 | font-family: "iconfont" !important; 10 | font-size: 16px; 11 | font-style: normal; 12 | font-weight: 400; 13 | -webkit-font-smoothing: antialiased; 14 | -moz-osx-font-smoothing: grayscale; } 15 | 16 | .al-icon__activity:before { 17 | content: "\e6de"; } 18 | 19 | .al-icon__add:before { 20 | content: "\e6df"; } 21 | 22 | .al-icon__brush:before { 23 | content: "\e6e5"; } 24 | 25 | .al-icon__close:before { 26 | content: "\e6e9"; } 27 | 28 | .al-icon__delete:before { 29 | content: "\e6f2"; } 30 | 31 | .al-icon__editor:before { 32 | content: "\e6f5"; } 33 | 34 | .al-icon__enter:before { 35 | content: "\e6f8"; } 36 | 37 | .al-icon__label:before { 38 | content: "\e706"; } 39 | 40 | .al-icon__lock:before { 41 | content: "\e709"; } 42 | 43 | .al-icon__prompt:before { 44 | content: "\e71b"; } 45 | 46 | .al-icon__refresh:before { 47 | content: "\e71e"; } 48 | 49 | .al-icon__return:before { 50 | content: "\e720"; } 51 | 52 | .al-icon__setup:before { 53 | content: "\e728"; } 54 | 55 | .al-icon__success:before { 56 | content: "\e72d"; } 57 | 58 | .al-icon__time:before { 59 | content: "\e735"; } 60 | 61 | .al-icon__trash:before { 62 | content: "\e738"; } 63 | 64 | .al-icon__warning:before { 65 | content: "\e73d"; } 66 | 67 | .al-icon__search:before { 68 | content: "\e741"; } 69 | 70 | .al-icon__packup:before { 71 | content: "\e749"; } 72 | 73 | .al-icon__unfold:before { 74 | content: "\e74a"; } 75 | -------------------------------------------------------------------------------- /dist/css/prefixer/layout.css: -------------------------------------------------------------------------------- 1 | .al-contain::before, 2 | .al-row::before { 3 | content: ""; 4 | display: table; } 5 | 6 | .al-contain::after, 7 | .al-row::after { 8 | content: ""; 9 | display: table; 10 | clear: both; } 11 | 12 | .al-row { 13 | display: block; 14 | float: left; 15 | width: 100%; } 16 | .al-row [class*="al-col__"] { 17 | float: left; 18 | display: inline-block; 19 | vertical-align: middle; } 20 | .al-row .al-col__1 { 21 | width: 4.16667%; } 22 | .al-row .al-offset-left__1 { 23 | margin-left: 4.16667%; } 24 | .al-row .al-offset-right__1 { 25 | margin-right: 4.16667%; } 26 | .al-row .al-col__2 { 27 | width: 8.33333%; } 28 | .al-row .al-offset-left__2 { 29 | margin-left: 8.33333%; } 30 | .al-row .al-offset-right__2 { 31 | margin-right: 8.33333%; } 32 | .al-row .al-col__3 { 33 | width: 12.5%; } 34 | .al-row .al-offset-left__3 { 35 | margin-left: 12.5%; } 36 | .al-row .al-offset-right__3 { 37 | margin-right: 12.5%; } 38 | .al-row .al-col__4 { 39 | width: 16.66667%; } 40 | .al-row .al-offset-left__4 { 41 | margin-left: 16.66667%; } 42 | .al-row .al-offset-right__4 { 43 | margin-right: 16.66667%; } 44 | .al-row .al-col__6 { 45 | width: 25%; } 46 | .al-row .al-offset-left__6 { 47 | margin-left: 25%; } 48 | .al-row .al-offset-right__6 { 49 | margin-right: 25%; } 50 | .al-row .al-col__8 { 51 | width: 33.33333%; } 52 | .al-row .al-offset-left__8 { 53 | margin-left: 33.33333%; } 54 | .al-row .al-offset-right__8 { 55 | margin-right: 33.33333%; } 56 | .al-row .al-col__12 { 57 | width: 50%; } 58 | .al-row .al-offset-left__12 { 59 | margin-left: 50%; } 60 | .al-row .al-offset-right__12 { 61 | margin-right: 50%; } 62 | .al-row .al-col__24 { 63 | width: 100%; } 64 | .al-row .al-offset-left__24 { 65 | margin-left: 100%; } 66 | .al-row .al-offset-right__24 { 67 | margin-right: 100%; } 68 | 69 | [class*="al-col__"] { 70 | min-height: 30px; } 71 | 72 | .al-type__page { 73 | width: 1200px; 74 | margin-left: auto; 75 | margin-right: auto; } 76 | 77 | .al-layout__page { 78 | position: absolute; 79 | top: 0; 80 | left: 0; 81 | width: 100%; 82 | height: 100%; 83 | z-index: 10; } 84 | .al-layout__page.website { 85 | padding-top: 70px; 86 | padding-bottom: 52px; } 87 | .al-layout__page.website .al-layout__header { 88 | height: 70px; } 89 | .al-layout__page.website .al-layout__footer { 90 | height: 52px; } 91 | .al-layout__page.project { 92 | padding-top: 50px; 93 | padding-bottom: 30px; } 94 | .al-layout__page.project .al-layout__header { 95 | height: 50px; 96 | background-color: #23262f; } 97 | .al-layout__page.project .al-layout__footer { 98 | background: #f2f2f2; } 99 | 100 | .al-layout__header { 101 | position: absolute; 102 | top: 0; 103 | left: 0; 104 | width: 100%; 105 | background: #fff; } 106 | 107 | .al-layout__menu { 108 | min-width: 180px; 109 | background: #393d49; } 110 | 111 | .al-layout__content { 112 | display: -webkit-box; 113 | display: -ms-flexbox; 114 | display: flex; 115 | width: 100%; 116 | height: 100%; } 117 | .al-layout__content .al-layout__context { 118 | -webkit-box-flex: 1; 119 | -ms-flex: 1; 120 | flex: 1; 121 | padding: 10px; } 122 | 123 | .al-layout__footer { 124 | position: absolute; 125 | left: 0; 126 | bottom: 0; 127 | width: 100%; 128 | min-height: 30px; 129 | color: #696969; 130 | font-size: 12px; 131 | background: #fff; } 132 | -------------------------------------------------------------------------------- /dist/css/prefixer/mobile.layout.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | -webkit-box-sizing: border-box; 5 | box-sizing: border-box; } 6 | 7 | .text-center { 8 | text-align: center; } 9 | 10 | .flex-box { 11 | display: -webkit-box; 12 | display: -ms-flexbox; 13 | display: flex; 14 | -webkit-box-pack: justify; 15 | -ms-flex-pack: justify; 16 | justify-content: space-between; } 17 | 18 | html, body, .layout-page { 19 | height: 100%; } 20 | 21 | .body, 22 | .layout-page { 23 | background: #eee; } 24 | 25 | .layout-page { 26 | width: 100%; 27 | min-height: 100%; 28 | overflow: hidden; 29 | padding-top: 1.2rem; } 30 | .layout-page .top-nav { 31 | position: fixed; 32 | z-index: 1000; 33 | left: 0; 34 | top: 0; 35 | display: block; 36 | width: 100%; 37 | background-color: #fff; 38 | border-bottom: 1px solid #e1e1e1; } 39 | .layout-page .layout-content { 40 | max-width: 540px; 41 | height: 100%; 42 | margin: 0 auto; } 43 | 44 | .btn { 45 | display: inline-block; 46 | width: 1.41333rem; 47 | height: 0.69333rem; 48 | text-align: center; 49 | line-height: 0.66667rem; 50 | border-radius: 2px; } 51 | .btn.btn-outline { 52 | border: solid 1px #7f7f7f; } 53 | .btn.btn-normal { 54 | border: solid 1px transparent; } 55 | 56 | .abs { 57 | position: absolute; } 58 | 59 | .rel { 60 | position: relative; } 61 | 62 | .layout-title { 63 | height: 1.2rem; 64 | line-height: 1.2rem; 65 | font-size: 1.5em; } 66 | .layout-title .title-left { 67 | position: absolute; 68 | z-index: 1000; 69 | left: 0; 70 | top: 0; 71 | display: block; 72 | font-size: 1.11em; 73 | color: #999; 74 | background: url("../images/icon_back.png") center center no-repeat; 75 | background-size: .5rem; 76 | -webkit-transform: rotateZ(180deg); 77 | transform: rotateZ(180deg); } 78 | .layout-title .title-back { 79 | display: inline-block; 80 | width: 1.33333rem; 81 | padding-left: 0.4rem; 82 | padding-right: 0.4rem; } 83 | .layout-title .title-content { 84 | font-weight: bold; 85 | max-width: 50%; 86 | overflow: hidden; 87 | white-space: nowrap; 88 | text-overflow: ellipsis; 89 | margin: 0 auto; 90 | color: #333a49; } 91 | -------------------------------------------------------------------------------- /dist/css/prefixer/reset.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | /*! 3 | * ress.css • v1.2.2 4 | * MIT License 5 | * github.com/filipelinhares/ress 6 | */ 7 | html { 8 | -webkit-box-sizing: border-box; 9 | box-sizing: border-box; 10 | overflow-y: scroll; 11 | -webkit-text-size-adjust: 100%; } 12 | 13 | *, :after, :before { 14 | background-repeat: no-repeat; 15 | -webkit-box-sizing: inherit; 16 | box-sizing: inherit; } 17 | 18 | :after, :before { 19 | text-decoration: inherit; 20 | vertical-align: inherit; } 21 | 22 | * { 23 | padding: 0; 24 | margin: 0; } 25 | 26 | audio:not([controls]) { 27 | display: none; 28 | height: 0; } 29 | 30 | hr { 31 | overflow: visible; } 32 | 33 | article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary { 34 | display: block; } 35 | 36 | summary { 37 | display: list-item; } 38 | 39 | small { 40 | font-size: 80%; } 41 | 42 | [hidden], template { 43 | display: none; } 44 | 45 | abbr[title] { 46 | border-bottom: 1px dotted; 47 | text-decoration: none; } 48 | 49 | a { 50 | background-color: transparent; 51 | -webkit-text-decoration-skip: objects; } 52 | 53 | a:active, a:hover { 54 | outline-width: 0; } 55 | 56 | code, kbd, pre, samp { 57 | font-family: monospace,monospace; } 58 | 59 | b, strong { 60 | font-weight: bolder; } 61 | 62 | dfn { 63 | font-style: italic; } 64 | 65 | mark { 66 | background-color: #ff0; 67 | color: #000; } 68 | 69 | sub, sup { 70 | font-size: 75%; 71 | line-height: 0; 72 | position: relative; 73 | vertical-align: baseline; } 74 | 75 | sub { 76 | bottom: -.25em; } 77 | 78 | sup { 79 | top: -.5em; } 80 | 81 | input { 82 | border-radius: 0; } 83 | 84 | [role=button], [type=button], [type=reset], [type=submit], button { 85 | cursor: pointer; } 86 | 87 | [disabled] { 88 | cursor: default; } 89 | 90 | [type=number] { 91 | width: auto; } 92 | 93 | [type=search] { 94 | -webkit-appearance: textfield; } 95 | 96 | [type=search]::-webkit-search-cancel-button, [type=search]::-webkit-search-decoration { 97 | -webkit-appearance: none; } 98 | 99 | textarea { 100 | overflow: auto; 101 | resize: vertical; } 102 | 103 | button, input, optgroup, select, textarea { 104 | font: inherit; } 105 | 106 | optgroup { 107 | font-weight: 700; } 108 | 109 | button { 110 | overflow: visible; } 111 | 112 | [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button::-moz-focus-inner { 113 | border-style: 0; 114 | padding: 0; } 115 | 116 | [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button:-moz-focusring { 117 | outline: 1px dotted ButtonText; } 118 | 119 | [type=reset], [type=submit], button, html [type=button] { 120 | -webkit-appearance: button; } 121 | 122 | button, select { 123 | text-transform: none; } 124 | 125 | button, input, select, textarea { 126 | background-color: transparent; 127 | border-style: none; 128 | color: inherit; } 129 | 130 | select { 131 | -moz-appearance: none; 132 | -webkit-appearance: none; } 133 | 134 | select::-ms-expand { 135 | display: none; } 136 | 137 | select::-ms-value { 138 | color: currentColor; } 139 | 140 | legend { 141 | border: 0; 142 | color: inherit; 143 | display: table; 144 | max-width: 100%; 145 | white-space: normal; } 146 | 147 | ::-webkit-file-upload-button { 148 | -webkit-appearance: button; 149 | font: inherit; } 150 | 151 | [type=search] { 152 | -webkit-appearance: textfield; 153 | outline-offset: -2px; } 154 | 155 | img { 156 | border-style: none; } 157 | 158 | progress { 159 | vertical-align: baseline; } 160 | 161 | svg:not(:root) { 162 | overflow: hidden; } 163 | 164 | audio, canvas, progress, video { 165 | display: inline-block; } 166 | 167 | @media screen { 168 | [hidden~=screen] { 169 | display: inherit; } 170 | [hidden~=screen]:not(:active):not(:focus):not(:target) { 171 | position: absolute !important; 172 | clip: rect(0 0 0 0) !important; } } 173 | 174 | [aria-busy=true] { 175 | cursor: progress; } 176 | 177 | [aria-controls] { 178 | cursor: pointer; } 179 | 180 | [aria-disabled] { 181 | cursor: default; } 182 | 183 | ::-moz-selection { 184 | background-color: #b3d4fc; 185 | color: #000; 186 | text-shadow: none; } 187 | 188 | ::selection { 189 | background-color: #b3d4fc; 190 | color: #000; 191 | text-shadow: none; } 192 | -------------------------------------------------------------------------------- /dist/css/prefixer/unit.css: -------------------------------------------------------------------------------- 1 | .al-dialog, 2 | .al-message { 3 | position: fixed; 4 | z-index: 10; 5 | top: 20%; 6 | left: 50%; 7 | -webkit-transform: translate(-50%, 0); 8 | transform: translate(-50%, 0); 9 | min-width: 272px; 10 | background-color: #fff; 11 | border-width: 1px; 12 | border-style: solid; 13 | border-color: #e6e6e6; 14 | -webkit-box-shadow: 0 0 4px #f2f2f2; 15 | box-shadow: 0 0 4px #f2f2f2; } 16 | .al-dialog .al-context__header, 17 | .al-message .al-context__header { 18 | position: absolute; 19 | top: 0; 20 | left: 0; 21 | width: 100%; 22 | min-height: 35px; 23 | padding: 0 10px; 24 | line-height: 35px; 25 | background-color: #f8f8f8; } 26 | .al-dialog .al-context__header .al-icon, 27 | .al-message .al-context__header .al-icon { 28 | position: absolute; 29 | right: 10px; 30 | cursor: pointer; 31 | -webkit-transition: all .5s; 32 | transition: all .5s; } 33 | .al-dialog .al-context__header .al-icon:hover, 34 | .al-message .al-context__header .al-icon:hover { 35 | -webkit-transform: rotateZ(270deg); 36 | transform: rotateZ(270deg); 37 | -webkit-transform-origin: 50% 50%; 38 | transform-origin: 50% 50%; 39 | -webkit-transition: all .5s; 40 | transition: all .5s; } 41 | .al-dialog .al-context__content, 42 | .al-message .al-context__content { 43 | padding: 35px 10px 50px; } 44 | .al-dialog .al-context__content .al-icon, 45 | .al-message .al-context__content .al-icon { 46 | float: left; 47 | font-size: 34px; } 48 | .al-dialog .al-context__content .al-icon__warning, 49 | .al-message .al-context__content .al-icon__warning { 50 | color: #f7ba2a; } 51 | .al-dialog .al-context__content .al-icon__success, 52 | .al-message .al-context__content .al-icon__success { 53 | color: #7aad3e; } 54 | .al-dialog .al-context__content .al-icon__delete, 55 | .al-message .al-context__content .al-icon__delete { 56 | color: #e93535; } 57 | .al-dialog .al-context__content p, 58 | .al-message .al-context__content p { 59 | margin-top: 15px; 60 | height: 30px; 61 | line-height: 30px; 62 | white-space: nowrap; } 63 | .al-dialog .al-context__footer, 64 | .al-message .al-context__footer { 65 | position: absolute; 66 | left: 0; 67 | bottom: 0; 68 | width: 100%; 69 | padding: 10px 0 5px; 70 | text-align: center; } 71 | 72 | .al-dialog { 73 | min-height: 150px; } 74 | .al-dialog.al-dialog__tiny { 75 | width: 272px; } 76 | .al-dialog.al-dialog__small { 77 | width: 544px; } 78 | .al-dialog.al-dialog__large { 79 | width: 816px; } 80 | .al-dialog.al-dialog__full { 81 | top: 0; 82 | width: 100%; 83 | height: 100%; } 84 | 85 | .al-message { 86 | min-height: 130px; } 87 | 88 | .al-mask { 89 | position: fixed; 90 | top: 0; 91 | left: 0; 92 | width: 100%; 93 | height: 100%; 94 | background-color: #000; 95 | opacity: .3; } 96 | 97 | .al-tab .al-table__wrap { 98 | border-bottom: 1px solid #e6e6e6; } 99 | .al-tab .al-table__wrap::before { 100 | content: ""; 101 | display: table; } 102 | .al-tab .al-table__wrap::after { 103 | content: ""; 104 | display: table; 105 | clear: both; } 106 | 107 | .al-tab .al-tab__pane { 108 | position: relative; 109 | bottom: -1px; 110 | float: left; 111 | padding: 0 20px; 112 | line-height: 30px; 113 | cursor: pointer; 114 | border-width: 1px; 115 | border-style: solid; 116 | border-color: transparent; } 117 | .al-tab .al-tab__pane.active { 118 | color: #1f8ae9; 119 | border-color: #e6e6e6; 120 | border-bottom-color: #fff; } 121 | .al-tab .al-tab__pane.active::after { 122 | content: ""; 123 | position: absolute; 124 | width: 100%; 125 | top: -1px; 126 | left: 0; 127 | height: 2px; 128 | background-color: #1f8ae9; } 129 | 130 | .al-tab.al-tab-type__card { 131 | background-color: #f9f9f9; 132 | border-width: 1px; 133 | border-style: solid; 134 | border-color: #e6e6e6; } 135 | .al-tab.al-tab-type__card .al-table__wrap { 136 | border-bottom: 0 none; } 137 | .al-tab.al-tab-type__card .al-tab__pane { 138 | bottom: 0; 139 | border-width: 1px; 140 | border-style: solid; 141 | border-color: transparent; 142 | margin-left: -1px; } 143 | .al-tab.al-tab-type__card .al-tab__pane.active { 144 | border-left-color: #e6e6e6; 145 | border-right-color: #e6e6e6; 146 | background-color: #fff; } 147 | .al-tab.al-tab-type__card .al-tab__pane.active::after { 148 | top: inherit; 149 | bottom: -2px; 150 | height: 1px; 151 | background-color: #fff; } 152 | 153 | .al-table { 154 | overflow: auto; } 155 | .al-table table { 156 | width: 100%; 157 | border-collapse: collapse; } 158 | .al-table th { 159 | padding: 10px 15px; } 160 | .al-table td { 161 | padding: 6px 15px; } 162 | .al-table th, 163 | .al-table td { 164 | font-weight: 400; 165 | color: #404040; 166 | line-height: 1; 167 | white-space: nowrap; 168 | border-width: 1px; 169 | border-style: solid; 170 | border-color: #e6e6e6; } 171 | .al-table tr:hover td { 172 | background-color: #f8f8f8; } 173 | .al-table .al-table__header { 174 | background-color: #f8f8f8; } 175 | .al-table .al-table__body { 176 | position: relative; 177 | top: -1px; } 178 | .al-table .al-table__body .al-btn { 179 | margin-bottom: 0; } 180 | 181 | .al-menu { 182 | float: left; 183 | width: auto; 184 | min-width: 180px; 185 | color: #cdcdcd; 186 | line-height: 40px; 187 | background-color: #393d49; } 188 | .al-menu .al-menu__title { 189 | height: 40px; 190 | padding: 0 20px; 191 | cursor: pointer; } 192 | .al-menu .al-menu__title:hover { 193 | background-color: #4b4f5b; } 194 | .al-menu .al-menu__title.active { 195 | color: #fff; 196 | background-color: #1f8ae9; } 197 | .al-menu .al-menu__title + .al-menu__group { 198 | display: none; } 199 | 200 | .al-menu__group > .al-menu__item.active > .al-menu__group { 201 | display: block; 202 | background-color: #23262f; } 203 | 204 | .al-menu__group .al-menu__group .al-menu__title { 205 | padding-left: 40px; } 206 | 207 | .al-menu__group .al-menu__group .al-menu__group .al-menu__title { 208 | padding-left: 60px; } 209 | -------------------------------------------------------------------------------- /dist/css/reset.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | /*! 3 | * ress.css • v1.2.2 4 | * MIT License 5 | * github.com/filipelinhares/ress 6 | */ 7 | html { 8 | box-sizing: border-box; 9 | overflow-y: scroll; 10 | -webkit-text-size-adjust: 100%; } 11 | 12 | *, :after, :before { 13 | background-repeat: no-repeat; 14 | box-sizing: inherit; } 15 | 16 | :after, :before { 17 | text-decoration: inherit; 18 | vertical-align: inherit; } 19 | 20 | * { 21 | padding: 0; 22 | margin: 0; } 23 | 24 | audio:not([controls]) { 25 | display: none; 26 | height: 0; } 27 | 28 | hr { 29 | overflow: visible; } 30 | 31 | article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary { 32 | display: block; } 33 | 34 | summary { 35 | display: list-item; } 36 | 37 | small { 38 | font-size: 80%; } 39 | 40 | [hidden], template { 41 | display: none; } 42 | 43 | abbr[title] { 44 | border-bottom: 1px dotted; 45 | text-decoration: none; } 46 | 47 | a { 48 | background-color: transparent; 49 | -webkit-text-decoration-skip: objects; } 50 | 51 | a:active, a:hover { 52 | outline-width: 0; } 53 | 54 | code, kbd, pre, samp { 55 | font-family: monospace,monospace; } 56 | 57 | b, strong { 58 | font-weight: bolder; } 59 | 60 | dfn { 61 | font-style: italic; } 62 | 63 | mark { 64 | background-color: #ff0; 65 | color: #000; } 66 | 67 | sub, sup { 68 | font-size: 75%; 69 | line-height: 0; 70 | position: relative; 71 | vertical-align: baseline; } 72 | 73 | sub { 74 | bottom: -.25em; } 75 | 76 | sup { 77 | top: -.5em; } 78 | 79 | input { 80 | border-radius: 0; } 81 | 82 | [role=button], [type=button], [type=reset], [type=submit], button { 83 | cursor: pointer; } 84 | 85 | [disabled] { 86 | cursor: default; } 87 | 88 | [type=number] { 89 | width: auto; } 90 | 91 | [type=search] { 92 | -webkit-appearance: textfield; } 93 | 94 | [type=search]::-webkit-search-cancel-button, [type=search]::-webkit-search-decoration { 95 | -webkit-appearance: none; } 96 | 97 | textarea { 98 | overflow: auto; 99 | resize: vertical; } 100 | 101 | button, input, optgroup, select, textarea { 102 | font: inherit; } 103 | 104 | optgroup { 105 | font-weight: 700; } 106 | 107 | button { 108 | overflow: visible; } 109 | 110 | [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button::-moz-focus-inner { 111 | border-style: 0; 112 | padding: 0; } 113 | 114 | [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button:-moz-focusring { 115 | outline: 1px dotted ButtonText; } 116 | 117 | [type=reset], [type=submit], button, html [type=button] { 118 | -webkit-appearance: button; } 119 | 120 | button, select { 121 | text-transform: none; } 122 | 123 | button, input, select, textarea { 124 | background-color: transparent; 125 | border-style: none; 126 | color: inherit; } 127 | 128 | select { 129 | -moz-appearance: none; 130 | -webkit-appearance: none; } 131 | 132 | select::-ms-expand { 133 | display: none; } 134 | 135 | select::-ms-value { 136 | color: currentColor; } 137 | 138 | legend { 139 | border: 0; 140 | color: inherit; 141 | display: table; 142 | max-width: 100%; 143 | white-space: normal; } 144 | 145 | ::-webkit-file-upload-button { 146 | -webkit-appearance: button; 147 | font: inherit; } 148 | 149 | [type=search] { 150 | -webkit-appearance: textfield; 151 | outline-offset: -2px; } 152 | 153 | img { 154 | border-style: none; } 155 | 156 | progress { 157 | vertical-align: baseline; } 158 | 159 | svg:not(:root) { 160 | overflow: hidden; } 161 | 162 | audio, canvas, progress, video { 163 | display: inline-block; } 164 | 165 | @media screen { 166 | [hidden~=screen] { 167 | display: inherit; } 168 | [hidden~=screen]:not(:active):not(:focus):not(:target) { 169 | position: absolute !important; 170 | clip: rect(0 0 0 0) !important; } } 171 | 172 | [aria-busy=true] { 173 | cursor: progress; } 174 | 175 | [aria-controls] { 176 | cursor: pointer; } 177 | 178 | [aria-disabled] { 179 | cursor: default; } 180 | 181 | ::-moz-selection { 182 | background-color: #b3d4fc; 183 | color: #000; 184 | text-shadow: none; } 185 | 186 | ::selection { 187 | background-color: #b3d4fc; 188 | color: #000; 189 | text-shadow: none; } 190 | -------------------------------------------------------------------------------- /dist/css/static.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | body { 3 | font-size: 14px; 4 | line-height: 1.5; 5 | font-family: arial, "Hiragino Sans GB", "Microsoft Yahei", 微软雅黑, 宋体, Tahoma, Arial, Helvetica, STHeiti, PingFang SC; } 6 | 7 | h1 { 8 | font-size: 24px; } 9 | 10 | h2 { 11 | font-size: 18px; } 12 | 13 | h3 { 14 | font-size: 16px; } 15 | 16 | h4 { 17 | font-size: 14px; } 18 | 19 | h5 { 20 | font-size: 12px; } 21 | 22 | a, img, div, span, 23 | input, label, button, 24 | textarea { 25 | -webkit-tap-highlight-color: transparent; } 26 | 27 | ul, 28 | ol { 29 | list-style: none; } 30 | 31 | .al-btn { 32 | display: inline-block; 33 | height: 30px; 34 | padding: 0 10px; 35 | margin: 0 5px 5px 0; 36 | color: #fff; 37 | font-size: 14px; 38 | font-family: arial, "Hiragino Sans GB", "Microsoft Yahei", 微软雅黑, 宋体, Tahoma, Arial, Helvetica, STHeiti, PingFang SC; 39 | line-height: 30px; 40 | text-align: center; 41 | vertical-align: bottom; 42 | white-space: nowrap; 43 | border-width: 1px; 44 | border-style: solid; 45 | border-color: transparent; 46 | border-radius: 0px; 47 | outline: none; 48 | background-color: transparent; 49 | cursor: pointer; 50 | /* button style */ 51 | /* button size */ } 52 | .al-btn.al-btn-type__icon { 53 | padding: 0 6px; } 54 | .al-btn.al-btn-type__icon .al-icon { 55 | font-weight: 700; } 56 | .al-btn.al-btn-type__icon:hover { 57 | background-color: #1f8ae9; 58 | color: #fff; } 59 | .al-btn.al-btn-type__icon:active { 60 | background-color: #0d77d5 !important; 61 | color: #fff; } 62 | .al-btn.al-btn__default { 63 | background-color: #1f8ae9; } 64 | .al-btn.al-btn__default:hover { 65 | background-color: #1881df; } 66 | .al-btn.al-btn__default:active { 67 | background-color: #0d77d5; } 68 | .al-btn.al-btn__danger { 69 | background-color: #e93535; } 70 | .al-btn.al-btn__danger:hover { 71 | background-color: #df2626; } 72 | .al-btn.al-btn__danger:active { 73 | background-color: #d41e1e; } 74 | .al-btn.al-btn__warn { 75 | background-color: #f7ba2a; } 76 | .al-btn.al-btn__warn:hover { 77 | background-color: #efb01c; } 78 | .al-btn.al-btn__warn:active { 79 | background-color: #e5a714; } 80 | .al-btn.al-btn__success { 81 | background-color: #7aad3e; } 82 | .al-btn.al-btn__success:hover { 83 | background-color: #70a433; } 84 | .al-btn.al-btn__success:active { 85 | background-color: #66972d; } 86 | .al-btn.al-btn__disabled, .al-btn.al-btn__outline { 87 | color: #aeaeae; 88 | line-height: 28px; 89 | border-color: #cdcdcd; 90 | background-color: #f1f1f1; } 91 | .al-btn.al-btn__disabled.al-btn__tiny, .al-btn.al-btn__outline.al-btn__tiny { 92 | line-height: 20px; } 93 | .al-btn.al-btn__disabled.al-btn__small, .al-btn.al-btn__outline.al-btn__small { 94 | line-height: 24px; } 95 | .al-btn.al-btn__disabled.al-btn__large, .al-btn.al-btn__outline.al-btn__large { 96 | line-height: 38px; } 97 | .al-btn.al-btn__disabled.al-btn__full, .al-btn.al-btn__outline.al-btn__full { 98 | line-height: 38px; } 99 | .al-btn.al-btn__disabled, .al-btn[disabled] { 100 | cursor: not-allowed; } 101 | .al-btn.al-btn__outline { 102 | color: #404040; 103 | background-color: transparent; } 104 | .al-btn.al-btn__outline:hover { 105 | border-color: #1f8ae9; } 106 | .al-btn.al-btn__outline:active { 107 | border-color: #0d77d5; 108 | background-color: #f9f9f9; } 109 | .al-btn.al-btn__tiny { 110 | padding: 0 5px; 111 | height: 22px; 112 | font-size: 12px; 113 | line-height: 22px; } 114 | .al-btn.al-btn__small { 115 | height: 26px; 116 | font-size: 12px; 117 | line-height: 26px; } 118 | .al-btn.al-btn__large { 119 | height: 40px; 120 | font-size: 16px; 121 | line-height: 40px; } 122 | .al-btn.al-btn__full { 123 | width: 100%; 124 | height: 40px; 125 | font-size: 16px; 126 | line-height: 40px; } 127 | .al-btn.al-btn__radius { 128 | border-radius: 5px; } 129 | .al-btn.al-btn__circle { 130 | border-radius: 40px; } 131 | 132 | .al-form__section { 133 | position: relative; 134 | padding: 20px; 135 | border-width: 1px; 136 | border-style: solid; 137 | border-color: #e6e6e6; } 138 | .al-form__section .al-form__title { 139 | position: absolute; 140 | top: -1em; 141 | left: 2em; 142 | padding: 0 1em; 143 | line-height: 2; 144 | background-color: #fff; } 145 | 146 | .al-form__item { 147 | margin: 20px 0; 148 | min-width: 200px; 149 | min-height: 30px; } 150 | .al-form__item .al-form__group { 151 | margin-left: 100px; 152 | min-width: 100px; } 153 | 154 | .al-label { 155 | float: left; 156 | width: 100px; 157 | height: 30px; 158 | padding: 0 10px; 159 | font-size: 14px; 160 | line-height: 30px; 161 | text-align: right; } 162 | 163 | .al-input.al-input__large .al-input__inner { 164 | height: 40px; 165 | line-height: 38px; } 166 | 167 | .al-input .al-input__inner { 168 | width: 100%; 169 | height: 30px; 170 | padding-left: 1em; 171 | line-height: 28px; 172 | border-width: 1px; 173 | border-style: solid; 174 | border-color: #e6e6e6; 175 | outline: none; } 176 | .al-input .al-input__inner:hover { 177 | border-color: #cdcdcd; } 178 | .al-input .al-input__inner:focus:not([readonly]) { 179 | border-color: #1f8ae9; } 180 | 181 | .al-input .error-message { 182 | display: none; } 183 | 184 | .al-input.error { 185 | position: relative; } 186 | .al-input.error .al-input__inner { 187 | border-color: #e93535; } 188 | .al-input.error .error-message { 189 | position: absolute; 190 | bottom: -15px; 191 | left: 0; 192 | display: block; 193 | font-size: 12px; 194 | line-height: 1; 195 | color: #e93535; } 196 | 197 | .al-input.disabled, 198 | .al-input .al-input__inner[disabled] { 199 | color: #aeaeae; 200 | border-color: #cdcdcd; 201 | background-color: #f2f2f2; 202 | cursor: not-allowed; } 203 | 204 | .al-switch { 205 | position: relative; 206 | top: 3px; } 207 | .al-switch.disabled .al-switch__group { 208 | background-color: #f1f1f1; } 209 | .al-switch .al-switch__group { 210 | display: block; 211 | width: 54px; 212 | height: 24px; 213 | border-radius: 24px; 214 | border-width: 1px; 215 | border-style: solid; 216 | border-color: #cdcdcd; } 217 | .al-switch .al-switch__group::before { 218 | content: ""; 219 | position: absolute; 220 | top: 4px; 221 | left: 4px; 222 | width: 16px; 223 | height: 16px; 224 | background-color: #d2d2d2; 225 | border-radius: 50%; 226 | transition: all 0.25s; } 227 | .al-switch .al-switch__group::after { 228 | content: "OFF"; 229 | position: absolute; 230 | right: 6px; 231 | color: #999; 232 | font-size: 12px; 233 | line-height: 22px; } 234 | .al-switch input[type="checkbox"]:checked + .al-switch__group { 235 | border-color: #1f8ae9; 236 | background-color: #1f8ae9; } 237 | .al-switch input[type="checkbox"]:checked + .al-switch__group::before { 238 | content: ""; 239 | left: 34px; 240 | transition: all 0.25s; 241 | background-color: #fff; } 242 | .al-switch input[type="checkbox"]:checked + .al-switch__group::after { 243 | content: "ON"; 244 | color: #fff; 245 | right: 26px; } 246 | 247 | .al-checkbox .al-checkbox__group { 248 | position: relative; 249 | top: 6px; 250 | float: left; 251 | width: 18px; 252 | height: 18px; 253 | border: solid 1px #cdcdcd; } 254 | .al-checkbox .al-checkbox__group::before { 255 | content: ""; 256 | position: absolute; 257 | left: 5px; 258 | bottom: 3px; 259 | width: 8px; 260 | height: 14px; 261 | border: 0 none; 262 | transform: rotateZ(45deg); 263 | transition: all 0.25s; } 264 | .al-checkbox .al-checkbox__group:hover { 265 | border-color: #1f8ae9; } 266 | 267 | .al-checkbox.disabled .al-checkbox__group { 268 | background-color: #f1f1f1; } 269 | .al-checkbox.disabled .al-checkbox__group:hover { 270 | border-color: #cdcdcd; } 271 | 272 | .al-checkbox.disabled input[type="checkbox"]:checked + .al-checkbox__group { 273 | border-color: #d2d2d2; 274 | background-color: #d2d2d2; } 275 | 276 | .al-checkbox .al-checkbox__label { 277 | display: inline-block; 278 | margin-left: 10px; 279 | margin-right: 20px; } 280 | 281 | .al-checkbox input[type="checkbox"]:checked + .al-checkbox__group { 282 | border-color: #1f8ae9; 283 | background-color: #1f8ae9; } 284 | .al-checkbox input[type="checkbox"]:checked + .al-checkbox__group::before { 285 | content: ""; 286 | border-bottom: 2px solid #fff; 287 | border-right: 2px solid #fff; 288 | transition: all 0.25s; } 289 | 290 | .al-radio .al-radio__label { 291 | display: inline-block; 292 | margin-left: 10px; 293 | margin-right: 20px; } 294 | 295 | .al-radio.disabled .al-radio__group { 296 | background-color: #f1f1f1; } 297 | 298 | .al-radio .al-radio__group { 299 | position: relative; 300 | top: 5px; 301 | float: left; 302 | width: 20px; 303 | height: 20px; 304 | border-radius: 50%; 305 | border-width: 1px; 306 | border-style: solid; 307 | border-color: #cdcdcd; } 308 | .al-radio .al-radio__group::before { 309 | content: ""; 310 | position: absolute; 311 | top: 5px; 312 | left: 5px; 313 | width: 8px; 314 | height: 8px; 315 | border-radius: 50%; 316 | background-color: transparent; 317 | transition: all 0.25s; } 318 | 319 | .al-radio input[type="radio"]:checked + .al-radio__group { 320 | border-color: #1f8ae9; } 321 | .al-radio input[type="radio"]:checked + .al-radio__group::before { 322 | content: ""; 323 | background-color: #1f8ae9; 324 | transition: all 0.25s; } 325 | 326 | .al-select { 327 | position: relative; 328 | cursor: pointer; } 329 | .al-select .al-select__text { 330 | width: 100%; 331 | height: 30px; 332 | padding-left: 1em; 333 | line-height: 28px; 334 | border-width: 1px; 335 | border-style: solid; 336 | border-color: #e6e6e6; } 337 | .al-select .al-select__input { 338 | position: relative; } 339 | .al-select .al-select__input:after { 340 | content: ""; 341 | position: absolute; 342 | top: 11px; 343 | right: 11px; 344 | width: 12px; 345 | height: 12px; 346 | border-top: 6px solid #cdcdcd; 347 | border-left: 6px solid transparent; 348 | border-right: 6px solid transparent; 349 | transition: all .5s; } 350 | .al-select.active .al-select__main { 351 | display: block; 352 | top: 40px; 353 | transition: all .5s; } 354 | .al-select.active .al-select__input:after { 355 | content: ""; 356 | transform: rotateZ(180deg); 357 | transform-origin: 6px 3px; 358 | transition: all .5s; } 359 | .al-select.disabled { 360 | cursor: not-allowed; } 361 | .al-select.disabled .al-select__text { 362 | background-color: #f2f2f2; } 363 | .al-select.disabled .al-select__main { 364 | display: none !important; } 365 | 366 | .al-select__main { 367 | position: absolute; 368 | z-index: 2; 369 | top: 50px; 370 | display: none; 371 | width: 100%; 372 | max-height: 202px; 373 | line-height: 30px; 374 | background-color: #fff; 375 | border-width: 1px; 376 | border-style: solid; 377 | border-color: #cdcdcd; 378 | box-shadow: 0 0 4px #f2f2f2; } 379 | .al-select__main li { 380 | text-indent: 1em; } 381 | .al-select__main li:hover { 382 | background-color: #f8f8f8; } 383 | .al-select__main li.active { 384 | color: #fff; 385 | background-color: #1f8ae9; } 386 | .al-select__main li:first-child { 387 | color: #999; } 388 | 389 | .al-switch, 390 | .al-checkbox, 391 | .al-radio { 392 | float: left; 393 | line-height: 30px; 394 | cursor: pointer; } 395 | .al-switch.disabled, 396 | .al-checkbox.disabled, 397 | .al-radio.disabled { 398 | cursor: not-allowed; } 399 | 400 | .al-contain::before, 401 | .al-row::before { 402 | content: ""; 403 | display: table; } 404 | 405 | .al-contain::after, 406 | .al-row::after { 407 | content: ""; 408 | display: table; 409 | clear: both; } 410 | 411 | .al-row { 412 | display: block; 413 | float: left; 414 | width: 100%; } 415 | .al-row [class*="al-col__"] { 416 | float: left; 417 | display: inline-block; 418 | vertical-align: middle; } 419 | .al-row .al-col__1 { 420 | width: 4.16667%; } 421 | .al-row .al-offset-left__1 { 422 | margin-left: 4.16667%; } 423 | .al-row .al-offset-right__1 { 424 | margin-right: 4.16667%; } 425 | .al-row .al-col__2 { 426 | width: 8.33333%; } 427 | .al-row .al-offset-left__2 { 428 | margin-left: 8.33333%; } 429 | .al-row .al-offset-right__2 { 430 | margin-right: 8.33333%; } 431 | .al-row .al-col__3 { 432 | width: 12.5%; } 433 | .al-row .al-offset-left__3 { 434 | margin-left: 12.5%; } 435 | .al-row .al-offset-right__3 { 436 | margin-right: 12.5%; } 437 | .al-row .al-col__4 { 438 | width: 16.66667%; } 439 | .al-row .al-offset-left__4 { 440 | margin-left: 16.66667%; } 441 | .al-row .al-offset-right__4 { 442 | margin-right: 16.66667%; } 443 | .al-row .al-col__6 { 444 | width: 25%; } 445 | .al-row .al-offset-left__6 { 446 | margin-left: 25%; } 447 | .al-row .al-offset-right__6 { 448 | margin-right: 25%; } 449 | .al-row .al-col__8 { 450 | width: 33.33333%; } 451 | .al-row .al-offset-left__8 { 452 | margin-left: 33.33333%; } 453 | .al-row .al-offset-right__8 { 454 | margin-right: 33.33333%; } 455 | .al-row .al-col__12 { 456 | width: 50%; } 457 | .al-row .al-offset-left__12 { 458 | margin-left: 50%; } 459 | .al-row .al-offset-right__12 { 460 | margin-right: 50%; } 461 | .al-row .al-col__24 { 462 | width: 100%; } 463 | .al-row .al-offset-left__24 { 464 | margin-left: 100%; } 465 | .al-row .al-offset-right__24 { 466 | margin-right: 100%; } 467 | 468 | [class*="al-col__"] { 469 | min-height: 30px; } 470 | 471 | .al-type__page { 472 | width: 1200px; 473 | margin-left: auto; 474 | margin-right: auto; } 475 | 476 | .al-layout__page { 477 | position: absolute; 478 | top: 0; 479 | left: 0; 480 | width: 100%; 481 | height: 100%; 482 | z-index: 10; } 483 | .al-layout__page.website { 484 | padding-top: 70px; 485 | padding-bottom: 52px; } 486 | .al-layout__page.website .al-layout__header { 487 | height: 70px; } 488 | .al-layout__page.website .al-layout__footer { 489 | height: 52px; } 490 | .al-layout__page.project { 491 | padding-top: 50px; 492 | padding-bottom: 30px; } 493 | .al-layout__page.project .al-layout__header { 494 | height: 50px; 495 | background-color: #23262f; } 496 | .al-layout__page.project .al-layout__footer { 497 | background: #f2f2f2; } 498 | 499 | .al-layout__header { 500 | position: absolute; 501 | top: 0; 502 | left: 0; 503 | width: 100%; 504 | background: #fff; } 505 | 506 | .al-layout__menu { 507 | min-width: 180px; 508 | background: #393d49; } 509 | 510 | .al-layout__content { 511 | display: flex; 512 | width: 100%; 513 | height: 100%; } 514 | .al-layout__content .al-layout__context { 515 | flex: 1; 516 | padding: 10px; } 517 | 518 | .al-layout__footer { 519 | position: absolute; 520 | left: 0; 521 | bottom: 0; 522 | width: 100%; 523 | min-height: 30px; 524 | color: #696969; 525 | font-size: 12px; 526 | background: #fff; } 527 | 528 | .al-dialog, 529 | .al-message { 530 | position: fixed; 531 | z-index: 10; 532 | top: 20%; 533 | left: 50%; 534 | transform: translate(-50%, 0); 535 | min-width: 272px; 536 | background-color: #fff; 537 | border-width: 1px; 538 | border-style: solid; 539 | border-color: #e6e6e6; 540 | box-shadow: 0 0 4px #f2f2f2; } 541 | .al-dialog .al-context__header, 542 | .al-message .al-context__header { 543 | position: absolute; 544 | top: 0; 545 | left: 0; 546 | width: 100%; 547 | min-height: 35px; 548 | padding: 0 10px; 549 | line-height: 35px; 550 | background-color: #f8f8f8; } 551 | .al-dialog .al-context__header .al-icon, 552 | .al-message .al-context__header .al-icon { 553 | position: absolute; 554 | right: 10px; 555 | cursor: pointer; 556 | transition: all .5s; } 557 | .al-dialog .al-context__header .al-icon:hover, 558 | .al-message .al-context__header .al-icon:hover { 559 | transform: rotateZ(270deg); 560 | transform-origin: 50% 50%; 561 | transition: all .5s; } 562 | .al-dialog .al-context__content, 563 | .al-message .al-context__content { 564 | padding: 35px 10px 50px; } 565 | .al-dialog .al-context__content .al-icon, 566 | .al-message .al-context__content .al-icon { 567 | float: left; 568 | font-size: 34px; } 569 | .al-dialog .al-context__content .al-icon__warning, 570 | .al-message .al-context__content .al-icon__warning { 571 | color: #f7ba2a; } 572 | .al-dialog .al-context__content .al-icon__success, 573 | .al-message .al-context__content .al-icon__success { 574 | color: #7aad3e; } 575 | .al-dialog .al-context__content .al-icon__delete, 576 | .al-message .al-context__content .al-icon__delete { 577 | color: #e93535; } 578 | .al-dialog .al-context__content p, 579 | .al-message .al-context__content p { 580 | margin-top: 15px; 581 | height: 30px; 582 | line-height: 30px; 583 | white-space: nowrap; } 584 | .al-dialog .al-context__footer, 585 | .al-message .al-context__footer { 586 | position: absolute; 587 | left: 0; 588 | bottom: 0; 589 | width: 100%; 590 | padding: 10px 0 5px; 591 | text-align: center; } 592 | 593 | .al-dialog { 594 | min-height: 150px; } 595 | .al-dialog.al-dialog__tiny { 596 | width: 272px; } 597 | .al-dialog.al-dialog__small { 598 | width: 544px; } 599 | .al-dialog.al-dialog__large { 600 | width: 816px; } 601 | .al-dialog.al-dialog__full { 602 | top: 0; 603 | width: 100%; 604 | height: 100%; } 605 | 606 | .al-message { 607 | min-height: 130px; } 608 | 609 | .al-mask { 610 | position: fixed; 611 | top: 0; 612 | left: 0; 613 | width: 100%; 614 | height: 100%; 615 | background-color: #000; 616 | opacity: .3; } 617 | 618 | .al-tab .al-table__wrap { 619 | border-bottom: 1px solid #e6e6e6; } 620 | .al-tab .al-table__wrap::before { 621 | content: ""; 622 | display: table; } 623 | .al-tab .al-table__wrap::after { 624 | content: ""; 625 | display: table; 626 | clear: both; } 627 | 628 | .al-tab .al-tab__pane { 629 | position: relative; 630 | bottom: -1px; 631 | float: left; 632 | padding: 0 20px; 633 | line-height: 30px; 634 | cursor: pointer; 635 | border-width: 1px; 636 | border-style: solid; 637 | border-color: transparent; } 638 | .al-tab .al-tab__pane.active { 639 | color: #1f8ae9; 640 | border-color: #e6e6e6; 641 | border-bottom-color: #fff; } 642 | .al-tab .al-tab__pane.active::after { 643 | content: ""; 644 | position: absolute; 645 | width: 100%; 646 | top: -1px; 647 | left: 0; 648 | height: 2px; 649 | background-color: #1f8ae9; } 650 | 651 | .al-tab.al-tab-type__card { 652 | background-color: #f9f9f9; 653 | border-width: 1px; 654 | border-style: solid; 655 | border-color: #e6e6e6; } 656 | .al-tab.al-tab-type__card .al-table__wrap { 657 | border-bottom: 0 none; } 658 | .al-tab.al-tab-type__card .al-tab__pane { 659 | bottom: 0; 660 | border-width: 1px; 661 | border-style: solid; 662 | border-color: transparent; 663 | margin-left: -1px; } 664 | .al-tab.al-tab-type__card .al-tab__pane.active { 665 | border-left-color: #e6e6e6; 666 | border-right-color: #e6e6e6; 667 | background-color: #fff; } 668 | .al-tab.al-tab-type__card .al-tab__pane.active::after { 669 | top: inherit; 670 | bottom: -2px; 671 | height: 1px; 672 | background-color: #fff; } 673 | 674 | .al-table { 675 | overflow: auto; } 676 | .al-table table { 677 | width: 100%; 678 | border-collapse: collapse; } 679 | .al-table th { 680 | padding: 10px 15px; } 681 | .al-table td { 682 | padding: 6px 15px; } 683 | .al-table th, 684 | .al-table td { 685 | font-weight: 400; 686 | color: #404040; 687 | line-height: 1; 688 | white-space: nowrap; 689 | border-width: 1px; 690 | border-style: solid; 691 | border-color: #e6e6e6; } 692 | .al-table tr:hover td { 693 | background-color: #f8f8f8; } 694 | .al-table .al-table__header { 695 | background-color: #f8f8f8; } 696 | .al-table .al-table__body { 697 | position: relative; 698 | top: -1px; } 699 | .al-table .al-table__body .al-btn { 700 | margin-bottom: 0; } 701 | 702 | .al-menu { 703 | float: left; 704 | width: auto; 705 | min-width: 180px; 706 | color: #cdcdcd; 707 | line-height: 40px; 708 | background-color: #393d49; } 709 | .al-menu .al-menu__title { 710 | height: 40px; 711 | padding: 0 20px; 712 | cursor: pointer; } 713 | .al-menu .al-menu__title:hover { 714 | background-color: #4b4f5b; } 715 | .al-menu .al-menu__title.active { 716 | color: #fff; 717 | background-color: #1f8ae9; } 718 | .al-menu .al-menu__title + .al-menu__group { 719 | display: none; } 720 | 721 | .al-menu__group > .al-menu__item.active > .al-menu__group { 722 | display: block; 723 | background-color: #23262f; } 724 | 725 | .al-menu__group .al-menu__group .al-menu__title { 726 | padding-left: 40px; } 727 | 728 | .al-menu__group .al-menu__group .al-menu__group .al-menu__title { 729 | padding-left: 60px; } 730 | 731 | @font-face { 732 | font-family: "iconfont"; 733 | src: url("iconfont.eot?t=1513591126108"); 734 | /* IE9*/ 735 | src: url("iconfont.eot?t=1513591126108#iefix") format("embedded-opentype"), url("data:application/x-font-woff;charset=utf-8;base64,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") format("woff"), url("iconfont.ttf?t=1513591126108") format("truetype"), url("iconfont.svg?t=1513591126108#iconfont") format("svg"); 736 | /* iOS 4.1- */ } 737 | 738 | .al-icon { 739 | font-family: "iconfont" !important; 740 | font-size: 16px; 741 | font-style: normal; 742 | font-weight: 400; 743 | -webkit-font-smoothing: antialiased; 744 | -moz-osx-font-smoothing: grayscale; } 745 | 746 | .al-icon__activity:before { 747 | content: "\e6de"; } 748 | 749 | .al-icon__add:before { 750 | content: "\e6df"; } 751 | 752 | .al-icon__brush:before { 753 | content: "\e6e5"; } 754 | 755 | .al-icon__close:before { 756 | content: "\e6e9"; } 757 | 758 | .al-icon__delete:before { 759 | content: "\e6f2"; } 760 | 761 | .al-icon__editor:before { 762 | content: "\e6f5"; } 763 | 764 | .al-icon__enter:before { 765 | content: "\e6f8"; } 766 | 767 | .al-icon__label:before { 768 | content: "\e706"; } 769 | 770 | .al-icon__lock:before { 771 | content: "\e709"; } 772 | 773 | .al-icon__prompt:before { 774 | content: "\e71b"; } 775 | 776 | .al-icon__refresh:before { 777 | content: "\e71e"; } 778 | 779 | .al-icon__return:before { 780 | content: "\e720"; } 781 | 782 | .al-icon__setup:before { 783 | content: "\e728"; } 784 | 785 | .al-icon__success:before { 786 | content: "\e72d"; } 787 | 788 | .al-icon__time:before { 789 | content: "\e735"; } 790 | 791 | .al-icon__trash:before { 792 | content: "\e738"; } 793 | 794 | .al-icon__warning:before { 795 | content: "\e73d"; } 796 | 797 | .al-icon__search:before { 798 | content: "\e741"; } 799 | 800 | .al-icon__packup:before { 801 | content: "\e749"; } 802 | 803 | .al-icon__unfold:before { 804 | content: "\e74a"; } 805 | 806 | .al-main__blue { 807 | background-color: #1f8ae9 !important; } 808 | 809 | .al-dark__blue { 810 | background-color: #0d77d5 !important; } 811 | 812 | .al-main__black { 813 | background-color: #23262f !important; } 814 | 815 | .al-main__navy { 816 | background-color: #393d49 !important; } 817 | 818 | .al-main__gray { 819 | background-color: #eee !important; } 820 | 821 | .al-main__warn { 822 | background-color: #f7ba2a !important; } 823 | 824 | .al-main__success { 825 | background-color: #7aad3e !important; } 826 | 827 | .al-main__danger { 828 | background-color: #e93535 !important; } 829 | 830 | .al-main__drop { 831 | background-color: #f2f2f2 !important; } 832 | 833 | .al-aid__warn { 834 | background-color: #efb01c !important; } 835 | 836 | .al-aid__success { 837 | background-color: #70a433 !important; } 838 | 839 | .al-aid__danger { 840 | background-color: #df2626 !important; } 841 | 842 | .al-dark__warn { 843 | background-color: #e5a714 !important; } 844 | 845 | .al-dark__success { 846 | background-color: #66972d !important; } 847 | 848 | .al-dark__danger { 849 | background-color: #d41e1e !important; } 850 | 851 | .al-animate { 852 | transition: all 0.3s; } 853 | .al-animate:hover { 854 | transition: all 0.3s; } 855 | -------------------------------------------------------------------------------- /dist/css/unit.css: -------------------------------------------------------------------------------- 1 | .al-dialog, 2 | .al-message { 3 | position: fixed; 4 | z-index: 10; 5 | top: 20%; 6 | left: 50%; 7 | transform: translate(-50%, 0); 8 | min-width: 272px; 9 | background-color: #fff; 10 | border-width: 1px; 11 | border-style: solid; 12 | border-color: #e6e6e6; 13 | box-shadow: 0 0 4px #f2f2f2; } 14 | .al-dialog .al-context__header, 15 | .al-message .al-context__header { 16 | position: absolute; 17 | top: 0; 18 | left: 0; 19 | width: 100%; 20 | min-height: 35px; 21 | padding: 0 10px; 22 | line-height: 35px; 23 | background-color: #f8f8f8; } 24 | .al-dialog .al-context__header .al-icon, 25 | .al-message .al-context__header .al-icon { 26 | position: absolute; 27 | right: 10px; 28 | cursor: pointer; 29 | transition: all .5s; } 30 | .al-dialog .al-context__header .al-icon:hover, 31 | .al-message .al-context__header .al-icon:hover { 32 | transform: rotateZ(270deg); 33 | transform-origin: 50% 50%; 34 | transition: all .5s; } 35 | .al-dialog .al-context__content, 36 | .al-message .al-context__content { 37 | padding: 35px 10px 50px; } 38 | .al-dialog .al-context__content .al-icon, 39 | .al-message .al-context__content .al-icon { 40 | float: left; 41 | font-size: 34px; } 42 | .al-dialog .al-context__content .al-icon__warning, 43 | .al-message .al-context__content .al-icon__warning { 44 | color: #f7ba2a; } 45 | .al-dialog .al-context__content .al-icon__success, 46 | .al-message .al-context__content .al-icon__success { 47 | color: #7aad3e; } 48 | .al-dialog .al-context__content .al-icon__delete, 49 | .al-message .al-context__content .al-icon__delete { 50 | color: #e93535; } 51 | .al-dialog .al-context__content p, 52 | .al-message .al-context__content p { 53 | margin-top: 15px; 54 | height: 30px; 55 | line-height: 30px; 56 | white-space: nowrap; } 57 | .al-dialog .al-context__footer, 58 | .al-message .al-context__footer { 59 | position: absolute; 60 | left: 0; 61 | bottom: 0; 62 | width: 100%; 63 | padding: 10px 0 5px; 64 | text-align: center; } 65 | 66 | .al-dialog { 67 | min-height: 150px; } 68 | .al-dialog.al-dialog__tiny { 69 | width: 272px; } 70 | .al-dialog.al-dialog__small { 71 | width: 544px; } 72 | .al-dialog.al-dialog__large { 73 | width: 816px; } 74 | .al-dialog.al-dialog__full { 75 | top: 0; 76 | width: 100%; 77 | height: 100%; } 78 | 79 | .al-message { 80 | min-height: 130px; } 81 | 82 | .al-mask { 83 | position: fixed; 84 | top: 0; 85 | left: 0; 86 | width: 100%; 87 | height: 100%; 88 | background-color: #000; 89 | opacity: .3; } 90 | 91 | .al-tab .al-table__wrap { 92 | border-bottom: 1px solid #e6e6e6; } 93 | .al-tab .al-table__wrap::before { 94 | content: ""; 95 | display: table; } 96 | .al-tab .al-table__wrap::after { 97 | content: ""; 98 | display: table; 99 | clear: both; } 100 | 101 | .al-tab .al-tab__pane { 102 | position: relative; 103 | bottom: -1px; 104 | float: left; 105 | padding: 0 20px; 106 | line-height: 30px; 107 | cursor: pointer; 108 | border-width: 1px; 109 | border-style: solid; 110 | border-color: transparent; } 111 | .al-tab .al-tab__pane.active { 112 | color: #1f8ae9; 113 | border-color: #e6e6e6; 114 | border-bottom-color: #fff; } 115 | .al-tab .al-tab__pane.active::after { 116 | content: ""; 117 | position: absolute; 118 | width: 100%; 119 | top: -1px; 120 | left: 0; 121 | height: 2px; 122 | background-color: #1f8ae9; } 123 | 124 | .al-tab.al-tab-type__card { 125 | background-color: #f9f9f9; 126 | border-width: 1px; 127 | border-style: solid; 128 | border-color: #e6e6e6; } 129 | .al-tab.al-tab-type__card .al-table__wrap { 130 | border-bottom: 0 none; } 131 | .al-tab.al-tab-type__card .al-tab__pane { 132 | bottom: 0; 133 | border-width: 1px; 134 | border-style: solid; 135 | border-color: transparent; 136 | margin-left: -1px; } 137 | .al-tab.al-tab-type__card .al-tab__pane.active { 138 | border-left-color: #e6e6e6; 139 | border-right-color: #e6e6e6; 140 | background-color: #fff; } 141 | .al-tab.al-tab-type__card .al-tab__pane.active::after { 142 | top: inherit; 143 | bottom: -2px; 144 | height: 1px; 145 | background-color: #fff; } 146 | 147 | .al-table { 148 | overflow: auto; } 149 | .al-table table { 150 | width: 100%; 151 | border-collapse: collapse; } 152 | .al-table th { 153 | padding: 10px 15px; } 154 | .al-table td { 155 | padding: 6px 15px; } 156 | .al-table th, 157 | .al-table td { 158 | font-weight: 400; 159 | color: #404040; 160 | line-height: 1; 161 | white-space: nowrap; 162 | border-width: 1px; 163 | border-style: solid; 164 | border-color: #e6e6e6; } 165 | .al-table tr:hover td { 166 | background-color: #f8f8f8; } 167 | .al-table .al-table__header { 168 | background-color: #f8f8f8; } 169 | .al-table .al-table__body { 170 | position: relative; 171 | top: -1px; } 172 | .al-table .al-table__body .al-btn { 173 | margin-bottom: 0; } 174 | 175 | .al-menu { 176 | float: left; 177 | width: auto; 178 | min-width: 180px; 179 | color: #cdcdcd; 180 | line-height: 40px; 181 | background-color: #393d49; } 182 | .al-menu .al-menu__title { 183 | height: 40px; 184 | padding: 0 20px; 185 | cursor: pointer; } 186 | .al-menu .al-menu__title:hover { 187 | background-color: #4b4f5b; } 188 | .al-menu .al-menu__title.active { 189 | color: #fff; 190 | background-color: #1f8ae9; } 191 | .al-menu .al-menu__title + .al-menu__group { 192 | display: none; } 193 | 194 | .al-menu__group > .al-menu__item.active > .al-menu__group { 195 | display: block; 196 | background-color: #23262f; } 197 | 198 | .al-menu__group .al-menu__group .al-menu__title { 199 | padding-left: 40px; } 200 | 201 | .al-menu__group .al-menu__group .al-menu__group .al-menu__title { 202 | padding-left: 60px; } 203 | -------------------------------------------------------------------------------- /dist/images/icon-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zlalex/ego-css/964053bd3fd0d31e0083fa6a5f4f515f1ec20db1/dist/images/icon-logo.png -------------------------------------------------------------------------------- /dist/images/icon_back.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zlalex/ego-css/964053bd3fd0d31e0083fa6a5f4f515f1ec20db1/dist/images/icon_back.png -------------------------------------------------------------------------------- /dist/images/img-login_bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zlalex/ego-css/964053bd3fd0d31e0083fa6a5f4f515f1ec20db1/dist/images/img-login_bg.jpg -------------------------------------------------------------------------------- /dist/images/img-login_sign.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zlalex/ego-css/964053bd3fd0d31e0083fa6a5f4f515f1ec20db1/dist/images/img-login_sign.png -------------------------------------------------------------------------------- /dist/images/img__title.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zlalex/ego-css/964053bd3fd0d31e0083fa6a5f4f515f1ec20db1/dist/images/img__title.png -------------------------------------------------------------------------------- /dist/js/avalon.observer.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zlalex/ego-css/964053bd3fd0d31e0083fa6a5f4f515f1ec20db1/dist/js/avalon.observer.js -------------------------------------------------------------------------------- /dist/js/avalon.plugins.js: -------------------------------------------------------------------------------- 1 | !function(e,t){"use strict";Array.prototype.slice;var n=Object.prototype.toString;function a(e){return null!==e&&"object"==typeof e}function i(e){return"Object"===n.call(e).slice(8,14)}function l(e){return"Array"===n.call(e).slice(8,13)}function s(e,t){if(!a(e))return!1;var n;if((l(e)||i(e))&&e.length)for(n=e.length;n--;)t.call(e[n],e[n],n);else if(i(e))for(n in e)t.call(e[n],e[n],n)}var c=$("body"),o=$(".al-select"),r=$(".al-tab"),u=$(".al-menu"),v={zIndex:2e3,init:function(t){e.$=t,this.alSelect(),this.removeActive(),this.alTabs(),this.alMenu()},extend:function(e){var t;if(!i(e))return!1;for(t in e)this[t]=e[t]}};v.extend({isArr:l,isComplex:a,isFunc:function(e){return"function"==typeof e},isFalse:function(e){return!1===e},isObj:i,isStr:function(e){return"string"==typeof e},isTrue:function(e){return!0===e},isUndef:function(e){return void 0===e},doEach:s}),v.extend({removeActive:function(){c.on("click",function(t){t=t||e.event,!$(t.target).parents(".al-select").length&&o.hasClass("active")&&o.removeClass("active")})},toggleActive:function(e,t){s(e,function(e){var n=$(e);n.hasClass("active")&&e!==t[0]&&n.removeClass("active")}),t.toggleClass("active")},alSelect:function(){var e,t,n,a,i=this;if(!o.length)return!1;$(".al-select__input",o).on("click",function(l){var c=$(this);if((e=c.parent()).hasClass("disabled"))return!1;i.toggleActive(o,e),t=$("li",e),n=e.find(".al-select__text"),a=e.find(".al-select__val"),t.on("click",function(){var i,l,c=$(this);if(!c.index())return!1;e.hasClass("multiple")?(l=[],i=[],c.toggleClass("active"),s(t,function(e,t){var n=$(e);n.hasClass("active")&&(l.push(n.html()),i.push(n.attr("al-value")))}),l=l.reverse().join(","),i=i.join(",")):(l=c.html(),i=c.attr("al-value"),c.addClass("active").siblings().removeClass("active")),n.html(l),a.val(i)})})},alTabs:function(){if(!r.length)return!1;r.on("click",".al-tab__pane",function(){$(this).addClass("active").siblings().removeClass("active")})},alMenu:function(){if(!u.length)return!1;u.on("click",".al-menu__title",function(){var e=$(this),t=e.parents(".al-menu"),n=$(".al-menu__title",t);e.next().length?e.parent().toggleClass("active"):(n.removeClass("active"),e.addClass("active"))})},alCreateMask:function(){var e='
';c.append(e)},alRemoveMask:function(){$(".al-mask").remove()},alCreateMsgBox:function(e){if(this.alCreateMask(),!i(e))throw"arguments type error";var t="success"===e.type?"al-icon__success":"error"===e.type?"al-icon__delete":"al-icon__warning",n=e.label||"您想说点什么吗？",a=(e.callback,'
');a+='
',a+='

'+n+"

",a+='
',c.append(a),this.alCloseMsgBox()},alCloseMsgBox:function(e,t){e=e||$(".al-message"),t=t||function(){};var n=this,a=$(".al-btn",e),i=$(".al-icon__close",e);function l(){e.remove(),n.alRemoveMask(),t()}a.on("click",l),i.on("click",l)},showDialog:function(e){var t=this,n=$(e),a=$(".al-btn__close",n),i=$(".al-icon__close",n);function l(){t.alRemoveMask(),n.addClass("al-hide")}t.alCreateMask(),n.removeClass("al-hide"),e.style.zIndex=++t.zIndex,a.on("click",l),i.on("click",l)}}),v.extend({formData:function(e){if(!i(e))return!1}}),e.avalonUtils=v}(window,document); -------------------------------------------------------------------------------- /dist/js/avalon.utils.js: -------------------------------------------------------------------------------- 1 | (function(){}).call(this); -------------------------------------------------------------------------------- /dist/js/avalon.vanilla.js: -------------------------------------------------------------------------------- 1 | !function(e,t){"use strict";var n=Array.prototype.slice,i=Object.prototype.toString;function r(e){return"function"==typeof e}function o(e){return"string"==typeof e}function s(e){return void 0===e}function c(e){return null!==e&&"object"==typeof e}function u(e){return"Object"===i.call(e).slice(8,14)}function l(e){return"Array"===i.call(e).slice(8,13)}function a(e){return e instanceof f}function f(e,t){return new f.fn.init(e,t)}f.fn=f.prototype={constructor:f,name:"Avalon",author:"Alex",version:"1.0.0",contact:"zhouliang1006@126.com",getElem:function(e){var t=this.elements,n=this.length=t.length;for(e&&(this.selector=e);n--;)this[n]=t[n]}},f.extend=f.fn.extend=function(e,t){for(var n in t=t||this,e)t[n]=e[n]},f.extend({isFunc:r,isTrue:function(e){return!0===e},isFalse:function(e){return!1===e},isUndef:s,isComplex:c,isArr:l,isObj:u,guid:1,jsonClone:function(e,t){var n,i=this;if(c(e))if(l(e))n=t||[],e.forEach(function(e,t){c(e)?(n[t]=l(e)?[]:{},i.jsonClone(e,n[t])):n[t]=e});else if(u(e))for(var r in n=t||{},e){var o=e[r];c(o)?(n[r]=l(o)?[]:{},i.jsonClone(o,n[r])):n[r]=o}else n=e;else n=e;return n},deepClone:function(e){var t,n=this;if(!e)return e;if([Number,String,Boolean].forEach(function(n){e instanceof n&&(t=n(e))}),s(t))if(l(e))t=[],e.forEach(function(e,i){t[i]=n.deepClone(e)});else if(c(e))if(e.nodeType&&r(e.cloneNode))t=e.cloneNode(!0);else if(e.prototype)t=e;else if(e instanceof Date)t=new Date(e);else for(var i in t={},e)t[i]=n.deepClone(e[i]);else t=e;return t},ajax:function(e){},ready:function(e){if(!r(e))return this.fn.throwErr("argument must be a function"),!1;t.addEventListener("DOMContentLoaded",e,!1),t.removeEventListener("DOMContentLoaded",e,!0)},each:function(e,t){var n;if(r(t))if((a(e)||l(e))&&e.length)for(n=e.length;n--;)t.call(e[n],e[n],n);else{if(!u(e))return void this.fn.throwErr("argument not a Array or Object");for(n in e)t.call(e[n],e[n],n)}else this.fn.throwErr("each object handler must be a function")}}),f.fn.extend({EVENTS_TYPE:"click dblclick input blur focus change resize scroll".split(" "),EVENTS:[],guid:0,detectionStr:function(e){return!!o(e)||(this.throwErr("argument must be a string"),!1)},throwErr:function(e){console.error("[Avalon warn]: "+e+";")},addClass:function(e){if(!this.detectionStr(e))return!1;if(this.length){var t=this.elements;return f.each(t,function(t){t.classList.add(e)}),this}},removeClass:function(e){if(!this.detectionStr(e))return!1;if(this.length){var t=this.elements;return f.each(t,function(t){t.classList.remove(e)}),this}},toggleClass:function(e){if(!this.detectionStr(e))return!1;if(this.length){var t=this.elements;return f.each(t,function(t){t.classList.toggle(e)}),this}},hasClass:function(e){if(!this.detectionStr(e))return!1;if(this.length){for(var t=this.length,n=this.elements;t--;)if(!n[t].classList.contains(e))return!1;return!0}},tagName:function(){return this.elements[0].tagName.toLowerCase()},getAttr:function(e){return!!this.detectionStr(e)&&this.elements[0].getAttribute(e)},val:function(){var e,t=this.elements;return this.length>1?(e=[],f.each(t,function(t){t.value&&e.push(t.value)})):e=t[0].value,e},find:function(e){if(this.detectionStr(e)){var t=this.constructor(),i=[],r=[],o=this.elements;return f.each(o,function(t){var i=n.call(t.querySelectorAll(e));r=r.concat(i)}),f.each(r,function(e){e.findSign||(e.findSign=!0,i.push(e))}),t.selector=e,t.elements=i,t.getElem(),t}return!1},on:function(e,t,n){var i=null,s=this;if(o(e)||!(this.EVENTS_TYPE.indexOf(e)<0)){if(r(t)&&!n)i=this.elements,n=t;else{if(!this.detectionStr(t)||!r(n))return void this.throwErr("arguments error, please try again");i=this.find(t).elements}return f.each(i,function(t){if(t.guid){var i=t.guid;s.EVENTS[i][e]?s.EVENTS[i][e].push(n):(s.EVENTS[i][e]=[n],s.eventBind(t,e,i))}else t.guid=++s.guid,s.EVENTS[t.guid]={},s.EVENTS[t.guid][e]=[n],s.eventBind(t,e,t.guid)})}this.throwErr("event type error")},eventBind:function(e,t,n){var i=this;e.addEventListener(t,function(r){f.each(i.EVENTS[n][t],function(t,n){t.call(e,r)})},!1)},each:function(e){var t=this.elements;return f.each(t,function(t,n){e(t,n)}),this},parent:function(){var e=this.constructor(),t=[],n=this.elements;return f.each(n,function(e){var n=e.parentNode;n&&!n.parSign&&(n.parSign=!0,t.push(n))}),f.each(t,function(e){delete e.parSign}),e.elements=t,e.getElem(),e},siblings:function(){},index:function(){},eq:function(e){if(!isNaN(e)&&/^\d+$/.test(e)){var t=[this.elements[e]],n=this.constructor();return n.elements=t,n.getElem(),n}this.throwErr("argument must be a Number")}}),(f.fn.init=function(e,i){if(a(i=i||null)){if(i.length&&i.length>1)return i.find(e);i=i[0]||t}else i=i&&1===i.nodeType?i:t;switch(typeof e){case"object":this.elements=1===e.nodeType?[e]:e instanceof f?e.elements:(this.throwErr("selector not a Element or Avalon Object"),[]),this.getElem(e);break;default:var r=i.querySelectorAll(e);this.elements=n.call(r),this.getElem(e)}}).prototype=f.fn,e.Avalon=e.$=f}(window,document); -------------------------------------------------------------------------------- /dist/js/flexible.js: -------------------------------------------------------------------------------- 1 | ;(function(win, lib) { 2 | var doc = win.document; 3 | var docEl = doc.documentElement; 4 | var metaEl = doc.querySelector('meta[name="viewport"]'); 5 | var flexibleEl = doc.querySelector('meta[name="flexible"]'); 6 | var dpr = 0; 7 | var scale = 0; 8 | var tid; 9 | var flexible = lib.flexible || (lib.flexible = {}); 10 | 11 | if (metaEl) { 12 | console.warn('将根据已有的meta标签来设置缩放比例'); 13 | var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/); 14 | if (match) { 15 | scale = parseFloat(match[1]); 16 | dpr = parseInt(1 / scale); 17 | } 18 | } else if (flexibleEl) { 19 | var content = flexibleEl.getAttribute('content'); 20 | if (content) { 21 | var initialDpr = content.match(/initial\-dpr=([\d\.]+)/); 22 | var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/); 23 | if (initialDpr) { 24 | dpr = parseFloat(initialDpr[1]); 25 | scale = parseFloat((1 / dpr).toFixed(2)); 26 | } 27 | if (maximumDpr) { 28 | dpr = parseFloat(maximumDpr[1]); 29 | scale = parseFloat((1 / dpr).toFixed(2)); 30 | } 31 | } 32 | } 33 | 34 | if (!dpr && !scale) { 35 | var isAndroid = win.navigator.appVersion.match(/android/gi); 36 | var isIPhone = win.navigator.appVersion.match(/iphone/gi); 37 | var isUCBrowser = isAndroid && win.navigator.appVersion.match(/UCBrowser/gi); 38 | var isMQQBrowser = isAndroid && win.navigator.appVersion.match(/MQQBrowser/gi); 39 | var devicePixelRatio = win.devicePixelRatio; 40 | if (isIPhone) { 41 | // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案 42 | if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) { 43 | dpr = 3; 44 | } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){ 45 | dpr = 2; 46 | } else { 47 | dpr = 1; 48 | } 49 | } else { 50 | // 其他设备下，仍旧使用1倍的方案 51 | dpr = 1; 52 | } 53 | scale = 1 / dpr; 54 | } 55 | 56 | docEl.setAttribute('data-dpr', dpr); 57 | if(isUCBrowser) 58 | docEl.setAttribute('class','uc'); 59 | else if(isMQQBrowser) 60 | docEl.setAttribute('class','qq'); 61 | if (!metaEl) { 62 | metaEl = doc.createElement('meta'); 63 | metaEl.setAttribute('name', 'viewport'); 64 | metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no'); 65 | if (docEl.firstElementChild) { 66 | docEl.firstElementChild.appendChild(metaEl); 67 | } else { 68 | var wrap = doc.createElement('div'); 69 | wrap.appendChild(metaEl); 70 | doc.write(wrap.innerHTML); 71 | } 72 | } 73 | 74 | function refreshRem(){ 75 | var width = docEl.getBoundingClientRect().width; 76 | if (width / dpr > 540) { 77 | width = 540 * dpr; 78 | } 79 | var rem = width / 10; 80 | docEl.style.fontSize = rem + 'px'; 81 | flexible.rem = win.rem = rem; 82 | } 83 | 84 | win.addEventListener('resize', function() { 85 | clearTimeout(tid); 86 | tid = setTimeout(refreshRem, 300); 87 | }, false); 88 | win.addEventListener('pageshow', function(e) { 89 | if (e.persisted) { 90 | clearTimeout(tid); 91 | tid = setTimeout(refreshRem, 300); 92 | } 93 | }, false); 94 | 95 | if (doc.readyState === 'complete') { 96 | doc.body.style.fontSize = 12 * dpr + 'px'; 97 | } else { 98 | doc.addEventListener('DOMContentLoaded', function(e) { 99 | doc.body.style.fontSize = 12 * dpr + 'px'; 100 | }, false); 101 | } 102 | 103 | 104 | refreshRem(); 105 | 106 | flexible.dpr = win.dpr = dpr; 107 | flexible.refreshRem = refreshRem; 108 | flexible.rem2px = function(d) { 109 | var val = parseFloat(d) * this.rem; 110 | if (typeof d === 'string' && d.match(/rem$/)) { 111 | val += 'px'; 112 | } 113 | return val; 114 | } 115 | flexible.px2rem = function(d) { 116 | var val = parseFloat(d) / this.rem; 117 | if (typeof d === 'string' && d.match(/px$/)) { 118 | val += 'rem'; 119 | } 120 | return val; 121 | } 122 | 123 | })(window, window['lib'] || (window['lib'] = {})); -------------------------------------------------------------------------------- /dist/public/Alex.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'), 2 | browserSync = require('browser-sync').create(), 3 | reload = browserSync.reload, 4 | sass = require('gulp-sass'), 5 | autoprefixer = require('gulp-autoprefixer'), 6 | uglify = require('gulp-uglify'); 7 | 8 | // 编译sass 9 | gulp.task('sass', function() { 10 | gulp.src([ 11 | './public/src/scss/*.scss', 12 | './public/src/scss/mobile/*.scss', 13 | './public/src/scss/layout/*.scss']) 14 | .pipe(sass()) 15 | .pipe(gulp.dest('./dist/css')) 16 | .pipe(reload({ stream: true })); 17 | }); 18 | 19 | // 自动添加私有前缀 20 | gulp.task('auto-prefixer', function() { 21 | 22 | // 如果 gulp.dest(源文件) 为同一个文件，会抛出编译错误。 23 | gulp.src('./dist/css/*.css') 24 | .pipe(autoprefixer({ 25 | browsers: ['last 2 versions'], //http://browserl.ist/ 26 | cascade: true, 27 | remove: true 28 | })) 29 | .pipe(gulp.dest('./dist/css/prefixer')); 30 | }) 31 | 32 | // 压缩js文件 33 | gulp.task('script', function() { 34 | gulp.src('./public/src/js/*.js') 35 | .pipe(uglify()) 36 | .pipe(gulp.dest('./dist/js')) 37 | }) 38 | 39 | // 监听文件变化同步浏览器 40 | gulp.task('service', ['sass'], function() { 41 | browserSync.init({ 42 | server: './dist' 43 | }); 44 | 45 | gulp.watch(['./public/src/scss/*.scss', './public/src/scss/mobile/*.scss', './public/src/scss/layout/*.scss'], ['sass']); 46 | 47 | gulp.watch('./dist/css/*.css', ['auto-prefixer']); 48 | 49 | gulp.watch('./public/src/js/*.js', ['script']) 50 | 51 | gulp.watch(['./dist/index.html', './dist/html/*.html']).on('change', reload); 52 | }); 53 | 54 | // 默认任务 55 | gulp.task('server', ['service', 'auto-prefixer']); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "devDependencies": { 3 | "browser-sync": "^2.18.13", 4 | "gulp": "^3.9.1", 5 | "gulp-autoprefixer": "^4.0.0", 6 | "gulp-sass": "^3.1.0", 7 | "gulp-uglify": "^3.0.0", 8 | "node-sass": "^4.7.1" 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /public/src/iconfont/icon.scss: -------------------------------------------------------------------------------- 1 | 2 | @font-face { 3 | font-family: "iconfont"; 4 | src: url('iconfont.eot?t=1513591126108'); /* IE9*/ 5 | src: url('iconfont.eot?t=1513591126108#iefix') format('embedded-opentype'), /* IE6-IE8 */ 6 | url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'), 7 | url('iconfont.ttf?t=1513591126108') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ 8 | url('iconfont.svg?t=1513591126108#iconfont') format('svg'); /* iOS 4.1- */ 9 | } 10 | 11 | .al-icon { 12 | font-family: "iconfont" !important; 13 | font-size: 16px; 14 | font-style: normal; 15 | font-weight: 400; 16 | -webkit-font-smoothing: antialiased; 17 | -moz-osx-font-smoothing: grayscale; 18 | } 19 | 20 | .al-icon__activity:before { 21 | content: "\e6de"; 22 | } 23 | 24 | .al-icon__add:before { 25 | content: "\e6df"; 26 | } 27 | 28 | .al-icon__brush:before { 29 | content: "\e6e5"; 30 | } 31 | 32 | .al-icon__close:before { 33 | content: "\e6e9"; 34 | } 35 | 36 | .al-icon__delete:before { 37 | content: "\e6f2"; 38 | } 39 | 40 | .al-icon__editor:before { 41 | content: "\e6f5"; 42 | } 43 | 44 | .al-icon__enter:before { 45 | content: "\e6f8"; 46 | } 47 | 48 | .al-icon__label:before { 49 | content: "\e706"; 50 | } 51 | 52 | .al-icon__lock:before { 53 | content: "\e709"; 54 | } 55 | 56 | .al-icon__prompt:before { 57 | content: "\e71b"; 58 | } 59 | 60 | .al-icon__refresh:before { 61 | content: "\e71e"; 62 | } 63 | 64 | .al-icon__return:before { 65 | content: "\e720"; 66 | } 67 | 68 | .al-icon__setup:before { 69 | content: "\e728"; 70 | } 71 | 72 | .al-icon__success:before { 73 | content: "\e72d"; 74 | } 75 | 76 | .al-icon__time:before { 77 | content: "\e735"; 78 | } 79 | 80 | .al-icon__trash:before { 81 | content: "\e738"; 82 | } 83 | 84 | .al-icon__warning:before { 85 | content: "\e73d"; 86 | } 87 | 88 | .al-icon__search:before { 89 | content: "\e741"; 90 | } 91 | 92 | .al-icon__packup:before { 93 | content: "\e749"; 94 | } 95 | 96 | .al-icon__unfold:before { 97 | content: "\e74a"; 98 | } 99 | 100 | -------------------------------------------------------------------------------- /public/src/iconfont/iconfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zlalex/ego-css/964053bd3fd0d31e0083fa6a5f4f515f1ec20db1/public/src/iconfont/iconfont.eot -------------------------------------------------------------------------------- /public/src/iconfont/iconfont.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | 8 | Created by iconfont 9 | 10 | 11 | 12 | 13 | 21 | 22 | 23 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | -------------------------------------------------------------------------------- /public/src/iconfont/iconfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zlalex/ego-css/964053bd3fd0d31e0083fa6a5f4f515f1ec20db1/public/src/iconfont/iconfont.ttf -------------------------------------------------------------------------------- /public/src/iconfont/iconfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zlalex/ego-css/964053bd3fd0d31e0083fa6a5f4f515f1ec20db1/public/src/iconfont/iconfont.woff -------------------------------------------------------------------------------- /public/src/js/avalon.observer.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zlalex/ego-css/964053bd3fd0d31e0083fa6a5f4f515f1ec20db1/public/src/js/avalon.observer.js -------------------------------------------------------------------------------- /public/src/js/avalon.plugins.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Avalon.css Front End Developer Tools 3 | * Author : Alex(zhouliang1006@126.com) 4 | * GitHub : https://github.com/zlalex 5 | * (C) 2017 - 2018 6 | */ 7 | 8 | void function(win, doc){ 9 | 'use strict'; 10 | 11 | var _slice = Array.prototype.slice, 12 | _toString = Object.prototype.toString; 13 | 14 | function isTrue(val) { 15 | return val === true; 16 | } 17 | 18 | function isFalse(val) { 19 | return val === false; 20 | } 21 | 22 | function isFunc(fn) { 23 | return typeof fn === 'function'; 24 | } 25 | 26 | function isStr(val) { 27 | return typeof val === 'string'; 28 | } 29 | 30 | function isUndef(val) { 31 | return typeof val === 'undefined'; 32 | } 33 | 34 | function isComplex(val) { 35 | return val !== null && typeof val === 'object'; 36 | } 37 | 38 | function isObj(val) { 39 | return _toString.call(val).slice(8, 14) === 'Object'; 40 | } 41 | 42 | function isArr(val) { 43 | return _toString.call(val).slice(8, 13) === 'Array'; 44 | } 45 | 46 | function doEach(val, handler){ 47 | if(isComplex(val)){ 48 | var len; 49 | 50 | if((isArr(val) || isObj(val)) && val.length){ 51 | len = val.length; 52 | while(len--){ 53 | handler.call(val[len], val[len], len); 54 | } 55 | }else if(isObj(val)){ 56 | for(len in val){ 57 | handler.call(val[len], val[len], len); 58 | } 59 | } 60 | }else{ 61 | return false; 62 | } 63 | } 64 | 65 | var $body = $('body'), 66 | $alSelect = $('.al-select'), 67 | $alTabs = $('.al-tab'), 68 | $alMenu = $('.al-menu'); 69 | 70 | var avalonUtils = { 71 | zIndex: 2000, 72 | init: function(query){ 73 | win.$ = query; 74 | this.alSelect(); 75 | this.removeActive(); 76 | this.alTabs(); 77 | this.alMenu(); 78 | }, 79 | 80 | extend: function(arg){ 81 | var key; 82 | 83 | if(!isObj(arg)){ 84 | return false 85 | } 86 | 87 | for(key in arg){ 88 | this[key] = arg[key]; 89 | } 90 | }, 91 | } 92 | 93 | avalonUtils.extend({ 94 | 95 | // avalon tools 96 | isArr: isArr, 97 | isComplex: isComplex, 98 | isFunc: isFunc, 99 | isFalse: isFalse, 100 | isObj: isObj, 101 | isStr: isStr, 102 | isTrue: isTrue, 103 | isUndef: isUndef, 104 | doEach: doEach 105 | }) 106 | 107 | avalonUtils.extend({ 108 | 109 | // unit function 110 | removeActive: function(){ 111 | $body.on('click', function(ev){ 112 | ev = ev || win.event; 113 | var $target = $(ev.target); 114 | var $alSelectPar = $target.parents('.al-select'); 115 | 116 | if(!$alSelectPar.length && $alSelect.hasClass('active')){ 117 | $alSelect.removeClass('active'); 118 | } 119 | }) 120 | }, 121 | 122 | toggleActive: function(eachArr, cur){ 123 | doEach(eachArr, function(el){ 124 | var $el = $(el); 125 | 126 | if($el.hasClass('active') && el !== cur[0]){ 127 | $el.removeClass('active'); 128 | } 129 | }) 130 | cur.toggleClass('active'); 131 | }, 132 | 133 | alSelect: function(){ 134 | var that = this; 135 | 136 | if(!$alSelect.length){ 137 | return false; 138 | } 139 | 140 | var $alSelectInput = $('.al-select__input', $alSelect), 141 | $parent, $options, $alSelectText, $alSelectVal; 142 | 143 | $alSelectInput.on('click', function(ev){ 144 | var $this = $(this); 145 | 146 | $parent = $this.parent(); 147 | if($parent.hasClass('disabled')){ 148 | return false; 149 | } 150 | 151 | that.toggleActive($alSelect, $parent); 152 | 153 | $options = $('li', $parent); 154 | $alSelectText = $parent.find('.al-select__text'); 155 | $alSelectVal = $parent.find('.al-select__val'); 156 | 157 | $options.on('click', function(){ 158 | var $this = $(this), 159 | index = $this.index(), 160 | val, text; 161 | 162 | if(!index) { 163 | return false; 164 | } 165 | 166 | if($parent.hasClass('multiple')){ 167 | text = []; 168 | val = []; 169 | 170 | $this.toggleClass('active'); 171 | doEach($options, function(el, i){ 172 | var $el = $(el); 173 | 174 | if($el.hasClass('active')){ 175 | text.push($el.html()); 176 | val.push($el.attr('al-value')); 177 | } 178 | }) 179 | 180 | text = text.reverse().join(','); 181 | val = val.join(','); 182 | }else{ 183 | text = $this.html(); 184 | val = $this.attr('al-value'); 185 | $this.addClass('active').siblings().removeClass('active'); 186 | } 187 | 188 | $alSelectText.html(text); 189 | $alSelectVal.val(val); 190 | }) 191 | }); 192 | }, 193 | 194 | alTabs: function(){ 195 | if(!$alTabs.length){ 196 | return false; 197 | } 198 | 199 | $alTabs.on('click', '.al-tab__pane', function(){ 200 | var $this = $(this); 201 | 202 | $this.addClass('active').siblings().removeClass('active'); 203 | }) 204 | }, 205 | 206 | alMenu: function(){ 207 | if (!$alMenu.length) { 208 | return false; 209 | } 210 | 211 | $alMenu.on('click', '.al-menu__title', function(){ 212 | var $this = $(this), 213 | $parent = $this.parents('.al-menu'), 214 | $item = $('.al-menu__title', $parent); 215 | 216 | if($this.next().length){ 217 | $this.parent().toggleClass('active'); 218 | }else{ 219 | $item.removeClass('active'); 220 | $this.addClass('active'); 221 | } 222 | }) 223 | }, 224 | 225 | alCreateMask: function(){ 226 | var index = ++this.zIndex, 227 | htmlStr = '
'; 228 | 229 | $body.append(htmlStr); 230 | }, 231 | 232 | alRemoveMask: function(){ 233 | var $alMask = $('.al-mask'); 234 | 235 | $alMask.remove(); 236 | }, 237 | 238 | alCreateMsgBox: function(arg){ 239 | 240 | /** 241 | * @param arg {Object} message custom 242 | * @param arg.type {String} message type ,has warn or success or error 243 | * @param arg.label {String} message info 244 | * @param arg.callback {Function} message after close do something 245 | */ 246 | var that = this; 247 | 248 | that.alCreateMask(); 249 | if (!isObj(arg)) { 250 | throw 'arguments type error' 251 | } 252 | 253 | var icon = arg.type === 'success' ? 'al-icon__success' : 254 | arg.type === 'error' ? 'al-icon__delete' : 'al-icon__warning'; 255 | 256 | var label = arg.label || '您想说点什么吗？', 257 | fn = arg.callback || function () { }, 258 | index = ++that.zIndex; 259 | 260 | var htmlStr = '
'; 261 | htmlStr+= '
'; 262 | htmlStr+= '

' + label + '

'; 263 | htmlStr+= '
' 264 | 265 | $body.append(htmlStr); 266 | that.alCloseMsgBox(); 267 | }, 268 | 269 | alCloseMsgBox: function($context, callback){ 270 | $context = $context || $('.al-message'); 271 | callback = callback || function(){}; 272 | 273 | var that = this, 274 | $btn = $('.al-btn', $context), 275 | $icon = $('.al-icon__close', $context); 276 | 277 | function doRemove (){ 278 | $context.remove(); 279 | that.alRemoveMask(); 280 | callback(); 281 | } 282 | 283 | $btn.on('click', doRemove); 284 | $icon.on('click', doRemove); 285 | }, 286 | 287 | showDialog: function(elem){ 288 | var that= this, 289 | $elem = $(elem), 290 | $closeBtn = $('.al-btn__close', $elem), 291 | $closeIcon = $('.al-icon__close', $elem); 292 | 293 | that.alCreateMask(); 294 | $elem.removeClass('al-hide'); 295 | elem.style.zIndex = ++that.zIndex; 296 | 297 | function hideDialog(){ 298 | that.alRemoveMask(); 299 | $elem.addClass('al-hide'); 300 | } 301 | 302 | $closeBtn.on('click', hideDialog); 303 | $closeIcon.on('click', hideDialog); 304 | } 305 | }) 306 | 307 | avalonUtils.extend({ 308 | formData: function(options){ 309 | if(!isObj(options)){ 310 | return false 311 | } 312 | 313 | 314 | } 315 | }) 316 | 317 | win.avalonUtils = avalonUtils; 318 | }(window, document) -------------------------------------------------------------------------------- /public/src/js/avalon.utils.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 3 | }).call(this); -------------------------------------------------------------------------------- /public/src/js/avalon.vanilla.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Avalon.css Front End Developer Tools 3 | * Author : Alex(zhouliang1006@126.com) 4 | * GitHub : https://github.com/zlalex 5 | * (C) 2017 - 2018 6 | */ 7 | 8 | void 9 | 10 | function(window, doc) { 11 | 'use strict'; 12 | 13 | var _slice = Array.prototype.slice; 14 | var _toString = Object.prototype.toString; 15 | 16 | function isTrue(val) { 17 | return val === true; 18 | } 19 | 20 | function isFalse(val) { 21 | return val === false; 22 | } 23 | 24 | function isFunc(fn) { 25 | return typeof fn === 'function'; 26 | } 27 | 28 | function isStr(val) { 29 | return typeof val === 'string'; 30 | } 31 | 32 | function isUndef(val) { 33 | return typeof val === 'undefined'; 34 | } 35 | 36 | function isComplex(val) { 37 | return val !== null && typeof val === 'object'; 38 | } 39 | 40 | function isObj(val) { 41 | return _toString.call(val).slice(8, 14) === 'Object'; 42 | } 43 | 44 | function isArr(val) { 45 | return _toString.call(val).slice(8, 13) === 'Array'; 46 | } 47 | 48 | function isAva(val) { 49 | return val instanceof Avalon; 50 | } 51 | 52 | function Avalon(selector, context) { 53 | return new Avalon.fn.init(selector, context); 54 | } 55 | 56 | Avalon.fn = Avalon.prototype = { 57 | constructor: Avalon, 58 | name: 'Avalon', 59 | author: 'Alex', 60 | version: '1.0.0', 61 | contact: 'zhouliang1006@126.com', 62 | 63 | getElem: function(selector) { 64 | var elem = this.elements, 65 | len = this.length = elem.length; 66 | 67 | selector && (this.selector = selector); 68 | while (len--) { 69 | this[len] = elem[len]; 70 | } 71 | } 72 | } 73 | 74 | Avalon.extend = Avalon.fn.extend = function(val, from) { 75 | from = from || this; 76 | for (var key in val) { 77 | from[key] = val[key]; 78 | } 79 | } 80 | 81 | Avalon.extend({ 82 | 83 | isFunc: isFunc, 84 | 85 | isTrue: isTrue, 86 | 87 | isFalse: isFalse, 88 | 89 | isUndef: isUndef, 90 | 91 | isComplex: isComplex, 92 | 93 | isArr: isArr, 94 | 95 | isObj: isObj, 96 | 97 | guid: 1, 98 | 99 | jsonClone: function(val, other) { 100 | var that = this, 101 | result; 102 | 103 | if (isComplex(val)) { 104 | if (isArr(val)) { 105 | result = other || []; 106 | val.forEach(function(item, i) { 107 | if (isComplex(item)) { 108 | result[i] = isArr(item) ? [] : {}; 109 | that.jsonClone(item, result[i]); 110 | } else { 111 | result[i] = item; 112 | } 113 | }) 114 | } else if (isObj(val)) { 115 | result = other || {}; 116 | 117 | for (var key in val) { 118 | var item = val[key]; 119 | 120 | if (isComplex(item)) { 121 | result[key] = isArr(item) ? [] : {}; 122 | that.jsonClone(item, result[key]); 123 | } else { 124 | result[key] = item; 125 | } 126 | } 127 | } else { 128 | result = val; 129 | } 130 | } else { 131 | result = val; 132 | } 133 | return result; 134 | }, 135 | 136 | deepClone: function(val) { 137 | var that = this; 138 | 139 | if (!val) { return val } 140 | 141 | var types = [Number, String, Boolean], 142 | result; 143 | 144 | types.forEach(function(type) { 145 | if (val instanceof type) { 146 | result = type(val); 147 | } 148 | }) 149 | 150 | if (isUndef(result)) { 151 | if (isArr(val)) { 152 | result = []; 153 | val.forEach(function(item, i) { 154 | result[i] = that.deepClone(item); 155 | }) 156 | } else if (isComplex(val)) { 157 | if (val.nodeType && isFunc(val.cloneNode)) { 158 | result = val.cloneNode(true); 159 | } else if (!val.prototype) { 160 | if (val instanceof Date) { 161 | result = new Date(val); 162 | } else { 163 | result = {}; 164 | for (var key in val) { 165 | result[key] = that.deepClone(val[key]); 166 | } 167 | } 168 | } else { 169 | if (false && val.constructor) { 170 | result = new val.constructor(); 171 | } else { 172 | result = val; 173 | } 174 | } 175 | } else { 176 | result = val; 177 | } 178 | } 179 | return result; 180 | }, 181 | 182 | ajax: function(option) { 183 | 184 | }, 185 | 186 | ready: function(fn) { 187 | if (!isFunc(fn)) { 188 | this.fn.throwErr('argument must be a function'); 189 | return false; 190 | } 191 | 192 | doc.addEventListener('DOMContentLoaded', fn, false); 193 | doc.removeEventListener('DOMContentLoaded', fn, true) 194 | }, 195 | 196 | each: function(val, fn) { 197 | var len; 198 | 199 | if (!isFunc(fn)) { 200 | this.fn.throwErr('each object handler must be a function'); 201 | return 202 | } 203 | 204 | if ((isAva(val) || isArr(val)) && val.length) { 205 | len = val.length; 206 | while (len--) { 207 | fn.call(val[len], val[len], len) 208 | } 209 | } else if (isObj(val)) { 210 | for (len in val) { 211 | fn.call(val[len], val[len], len) 212 | } 213 | } else { 214 | this.fn.throwErr('argument not a Array or Object'); 215 | return 216 | } 217 | } 218 | }) 219 | 220 | Avalon.fn.extend({ 221 | 222 | EVENTS_TYPE: 'click dblclick input blur focus change resize scroll'.split(' '), 223 | 224 | EVENTS: [], 225 | 226 | guid: 0, 227 | 228 | detectionStr: function(val) { 229 | if (isStr(val)) { 230 | return true; 231 | } else { 232 | this.throwErr('argument must be a string'); 233 | return false; 234 | } 235 | }, 236 | 237 | throwErr: function(message) { 238 | console.error('[Avalon warn]: ' + message + ';'); 239 | }, 240 | 241 | addClass: function(val) { 242 | if (!this.detectionStr(val)) { 243 | return false; 244 | } else if (this.length) { 245 | var elem = this.elements; 246 | 247 | Avalon.each(elem, function(el) { 248 | el.classList.add(val); 249 | }); 250 | return this; 251 | } 252 | }, 253 | 254 | removeClass: function(val) { 255 | if (!this.detectionStr(val)) { 256 | return false; 257 | } else if (this.length) { 258 | var elem = this.elements; 259 | 260 | Avalon.each(elem, function(el) { 261 | el.classList.remove(val); 262 | }) 263 | return this; 264 | } 265 | }, 266 | 267 | toggleClass: function(val) { 268 | if (!this.detectionStr(val)) { 269 | return false; 270 | } else if (this.length) { 271 | var elem = this.elements; 272 | 273 | Avalon.each(elem, function(el) { 274 | el.classList.toggle(val); 275 | }); 276 | return this; 277 | } 278 | }, 279 | 280 | hasClass: function(val) { 281 | if (!this.detectionStr(val)) { 282 | return false; 283 | } else if (this.length) { 284 | var len = this.length, 285 | elem = this.elements; 286 | 287 | while (len--) { 288 | if (!elem[len].classList.contains(val)) { 289 | return false 290 | } 291 | } 292 | return true; 293 | } 294 | }, 295 | 296 | tagName: function() { 297 | var target = this.elements[0], 298 | tagName = target.tagName; 299 | 300 | return tagName.toLowerCase(); 301 | }, 302 | 303 | getAttr: function(attr) { 304 | if (!this.detectionStr(attr)) { 305 | return false; 306 | } else { 307 | var target = this.elements[0], 308 | getAttribute = target.getAttribute(attr); 309 | 310 | return getAttribute; 311 | } 312 | }, 313 | 314 | val: function() { 315 | var elem = this.elements, 316 | len = this.length, 317 | result; 318 | 319 | if (len > 1) { 320 | result = []; 321 | 322 | Avalon.each(elem, function(el) { 323 | el.value && result.push(el.value); 324 | }); 325 | } else { 326 | result = elem[0].value; 327 | } 328 | return result; 329 | }, 330 | 331 | find: function(selector) { 332 | if (!this.detectionStr(selector)) { 333 | return false 334 | } else { 335 | var result = this.constructor(), 336 | resultElem = [], 337 | tempElem = []; 338 | 339 | var elem = this.elements; 340 | 341 | Avalon.each(elem, function(el) { 342 | var findElem = _slice.call(el.querySelectorAll(selector)); 343 | tempElem = tempElem.concat(findElem); 344 | }) 345 | 346 | Avalon.each(tempElem, function(el) { 347 | if (!el.findSign) { 348 | el.findSign = true; 349 | resultElem.push(el); 350 | } 351 | }) 352 | 353 | result.selector = selector; 354 | result.elements = resultElem; 355 | result.getElem(); 356 | return result; 357 | } 358 | }, 359 | 360 | on: function(ev, selector, handler) { 361 | var elem = null, 362 | that = this; 363 | /** 364 | * @param { String } ev: event type, click or focus...; 365 | * @param { String } selector: need bind event element from Avalon.elments; 366 | * @param { Function } handler: event handler function; 367 | */ 368 | if (!isStr(ev) && this.EVENTS_TYPE.indexOf(ev) < 0) { 369 | this.throwErr('event type error'); 370 | return 371 | } else if (isFunc(selector) && !handler) { 372 | elem = this.elements; 373 | handler = selector; 374 | } else if (this.detectionStr(selector) && isFunc(handler)) { 375 | var resultElem = this.find(selector); 376 | 377 | elem = resultElem.elements; 378 | } else { 379 | this.throwErr('arguments error, please try again'); 380 | return 381 | } 382 | 383 | return Avalon.each(elem, function(el) { 384 | if (!el.guid) { 385 | el.guid = ++that.guid; 386 | that.EVENTS[el.guid] = {}; 387 | that.EVENTS[el.guid][ev] = [handler]; 388 | that.eventBind(el, ev, el.guid); 389 | } else { 390 | var id = el.guid; 391 | 392 | if (that.EVENTS[id][ev]) { 393 | that.EVENTS[id][ev].push(handler); 394 | } else { 395 | that.EVENTS[id][ev] = [handler]; 396 | that.eventBind(el, ev, id); 397 | } 398 | } 399 | }) 400 | }, 401 | 402 | eventBind: function(elem, eventType, guid) { 403 | var that = this; 404 | 405 | elem.addEventListener(eventType, function(ev) { 406 | Avalon.each(that.EVENTS[guid][eventType], function(fn, i) { 407 | fn.call(elem, ev); 408 | }) 409 | }, false); 410 | }, 411 | 412 | each: function(fn) { 413 | var elem = this.elements; 414 | 415 | Avalon.each(elem, function(el, i) { 416 | fn(el, i); 417 | }); 418 | return this; 419 | }, 420 | 421 | parent: function() { 422 | 423 | /** 424 | * parent maybe not only one, we can return a new Avalon Objct from reserve parents 425 | */ 426 | var result = this.constructor(), 427 | resultElem = [], 428 | currentElem = this.elements; 429 | 430 | Avalon.each(currentElem, function(el) { 431 | var tempParent = el.parentNode; 432 | 433 | if (tempParent && !tempParent.parSign) { 434 | 435 | // currentElem.parSign attribute is confirm this is unique element; 436 | // if not, resultElem has repetitive element; 437 | tempParent.parSign = true; 438 | resultElem.push(tempParent); 439 | } 440 | }); 441 | 442 | Avalon.each(resultElem, function(el) { 443 | delete el.parSign 444 | }); 445 | 446 | result.elements = resultElem; 447 | result.getElem(); 448 | return result; 449 | }, 450 | 451 | siblings: function() { 452 | 453 | }, 454 | 455 | index: function() { 456 | 457 | }, 458 | 459 | eq: function(val) { 460 | if (!isNaN(val) && /^\d+$/.test(val)) { 461 | var elem = [this.elements[val]], 462 | result = this.constructor(); 463 | 464 | result.elements = elem; 465 | result.getElem(); 466 | return result; 467 | 468 | } else { 469 | this.throwErr('argument must be a Number') 470 | } 471 | } 472 | }) 473 | 474 | var init = Avalon.fn.init = function(selector, context) { 475 | 476 | /** 477 | * @param { Object, String } selector: HTMLElement or Elements name(className, id, tagName); 478 | * @param { Object } context: HTMLElement or Avalon Object, no important argument; 479 | */ 480 | context = context || null; 481 | 482 | if (isAva(context)) { 483 | if (context.length && context.length > 1) { 484 | return context.find(selector); 485 | } else { 486 | context = context[0] || doc; 487 | } 488 | } else { 489 | context = context && context.nodeType === 1 ? context : doc; 490 | } 491 | 492 | switch (typeof selector) { 493 | case 'object': 494 | this.elements = selector.nodeType === 1 ? [selector] : 495 | selector instanceof Avalon ? selector.elements : (function(that) { 496 | that.throwErr('selector not a Element or Avalon Object'); 497 | return [] 498 | })(this); 499 | 500 | this.getElem(selector); 501 | break; 502 | default: 503 | var elements = context.querySelectorAll(selector); 504 | 505 | this.elements = _slice.call(elements); 506 | this.getElem(selector); 507 | } 508 | } 509 | 510 | init.prototype = Avalon.fn; 511 | window.Avalon = window.$ = Avalon; 512 | }(window, document) -------------------------------------------------------------------------------- /public/src/js/flexible.js: -------------------------------------------------------------------------------- 1 | ;(function(win, lib) { 2 | var doc = win.document; 3 | var docEl = doc.documentElement; 4 | var metaEl = doc.querySelector('meta[name="viewport"]'); 5 | var flexibleEl = doc.querySelector('meta[name="flexible"]'); 6 | var dpr = 0; 7 | var scale = 0; 8 | var tid; 9 | var flexible = lib.flexible || (lib.flexible = {}); 10 | 11 | if (metaEl) { 12 | console.warn('将根据已有的meta标签来设置缩放比例'); 13 | var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/); 14 | if (match) { 15 | scale = parseFloat(match[1]); 16 | dpr = parseInt(1 / scale); 17 | } 18 | } else if (flexibleEl) { 19 | var content = flexibleEl.getAttribute('content'); 20 | if (content) { 21 | var initialDpr = content.match(/initial\-dpr=([\d\.]+)/); 22 | var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/); 23 | if (initialDpr) { 24 | dpr = parseFloat(initialDpr[1]); 25 | scale = parseFloat((1 / dpr).toFixed(2)); 26 | } 27 | if (maximumDpr) { 28 | dpr = parseFloat(maximumDpr[1]); 29 | scale = parseFloat((1 / dpr).toFixed(2)); 30 | } 31 | } 32 | } 33 | 34 | if (!dpr && !scale) { 35 | var isAndroid = win.navigator.appVersion.match(/android/gi); 36 | var isIPhone = win.navigator.appVersion.match(/iphone/gi); 37 | var isUCBrowser = isAndroid && win.navigator.appVersion.match(/UCBrowser/gi); 38 | var isMQQBrowser = isAndroid && win.navigator.appVersion.match(/MQQBrowser/gi); 39 | var devicePixelRatio = win.devicePixelRatio; 40 | if (isIPhone) { 41 | // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案 42 | if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) { 43 | dpr = 3; 44 | } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){ 45 | dpr = 2; 46 | } else { 47 | dpr = 1; 48 | } 49 | } else { 50 | // 其他设备下，仍旧使用1倍的方案 51 | dpr = 1; 52 | } 53 | scale = 1 / dpr; 54 | } 55 | 56 | docEl.setAttribute('data-dpr', dpr); 57 | if(isUCBrowser) 58 | docEl.setAttribute('class','uc'); 59 | else if(isMQQBrowser) 60 | docEl.setAttribute('class','qq'); 61 | if (!metaEl) { 62 | metaEl = doc.createElement('meta'); 63 | metaEl.setAttribute('name', 'viewport'); 64 | metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no'); 65 | if (docEl.firstElementChild) { 66 | docEl.firstElementChild.appendChild(metaEl); 67 | } else { 68 | var wrap = doc.createElement('div'); 69 | wrap.appendChild(metaEl); 70 | doc.write(wrap.innerHTML); 71 | } 72 | } 73 | 74 | function refreshRem(){ 75 | var width = docEl.getBoundingClientRect().width; 76 | if (width / dpr > 540) { 77 | width = 540 * dpr; 78 | } 79 | var rem = width / 10; 80 | docEl.style.fontSize = rem + 'px'; 81 | flexible.rem = win.rem = rem; 82 | } 83 | 84 | win.addEventListener('resize', function() { 85 | clearTimeout(tid); 86 | tid = setTimeout(refreshRem, 300); 87 | }, false); 88 | win.addEventListener('pageshow', function(e) { 89 | if (e.persisted) { 90 | clearTimeout(tid); 91 | tid = setTimeout(refreshRem, 300); 92 | } 93 | }, false); 94 | 95 | if (doc.readyState === 'complete') { 96 | doc.body.style.fontSize = 12 * dpr + 'px'; 97 | } else { 98 | doc.addEventListener('DOMContentLoaded', function(e) { 99 | doc.body.style.fontSize = 12 * dpr + 'px'; 100 | }, false); 101 | } 102 | 103 | 104 | refreshRem(); 105 | 106 | flexible.dpr = win.dpr = dpr; 107 | flexible.refreshRem = refreshRem; 108 | flexible.rem2px = function(d) { 109 | var val = parseFloat(d) * this.rem; 110 | if (typeof d === 'string' && d.match(/rem$/)) { 111 | val += 'px'; 112 | } 113 | return val; 114 | } 115 | flexible.px2rem = function(d) { 116 | var val = parseFloat(d) / this.rem; 117 | if (typeof d === 'string' && d.match(/px$/)) { 118 | val += 'rem'; 119 | } 120 | return val; 121 | } 122 | 123 | })(window, window['lib'] || (window['lib'] = {})); -------------------------------------------------------------------------------- /public/src/scss/core.scss: -------------------------------------------------------------------------------- 1 | // 元素浮动 2 | .al-fl { 3 | float: left; 4 | } 5 | 6 | .al-fr { 7 | float: right; 8 | } 9 | 10 | .al-clearfix { 11 | &::before { 12 | content: ''; 13 | display: table; 14 | } 15 | &::after { 16 | content: ''; 17 | display: table; 18 | clear: both; 19 | visibility: hidden; 20 | } 21 | } 22 | 23 | // 元素定位 24 | .al-abs { 25 | position: absolute; 26 | } 27 | 28 | .al-rel { 29 | position: relative; 30 | } 31 | 32 | .al-fixed { 33 | position: fixed; 34 | } 35 | 36 | // 元素居中 37 | .al-auto { 38 | margin-left: auto; 39 | margin-right: auto; 40 | } 41 | 42 | // 定位居中 43 | .al-center__level { 44 | left: 50%; 45 | transform: translateX(-50%); 46 | } 47 | 48 | .al-center__vertical { 49 | top: 50%; 50 | transform: translateY(-50%); 51 | } 52 | 53 | .al-center__just { 54 | top: 50%; 55 | left: 50%; 56 | transform: translate(-50%, -50%); 57 | } 58 | 59 | // 文本居中 60 | .al-align__center { 61 | text-align: center; 62 | } 63 | 64 | .al-align__left { 65 | text-align: left; 66 | } 67 | 68 | .al-align__right { 69 | text-align: right; 70 | } 71 | 72 | .al-indent { 73 | text-indent: 2em; 74 | } 75 | 76 | .al-ellipsis { 77 | text-overflow: ellipsis; 78 | white-space: nowrap; 79 | overflow: hidden; 80 | } 81 | 82 | // 段落对齐 83 | .al-para { 84 | text-align: justify; 85 | line-height: 1.5; 86 | } 87 | 88 | // 图片居中 89 | .al-img_just { 90 | text-align: center; 91 | &::after { 92 | content: ''; 93 | vertical-align: middle; 94 | } 95 | img { 96 | width: auto; 97 | vertical-align: middle; 98 | } 99 | } 100 | 101 | // 显示模式 102 | .al-block { 103 | display: block; 104 | } 105 | 106 | .al-inline__block { 107 | display: inline-block; 108 | } 109 | 110 | // 显示隐藏 111 | .al-show { 112 | display: block !important; 113 | } 114 | 115 | .al-hide { 116 | display: none !important; 117 | } 118 | 119 | // 伸缩元素 120 | .al-flex__wrap { 121 | display: flex; 122 | .al-flex__item { 123 | align-items: center; 124 | justify-content: space-between; 125 | } 126 | } 127 | -------------------------------------------------------------------------------- /public/src/scss/init.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Avalon.css Front End Developer Tools 3 | * Author : Alex(zhouliang1006@126.com) 4 | * GitHub : https://github.com/zlalex 5 | * (C) 2017 - 2018 6 | */ 7 | 8 | @import "core"; 9 | @import "static"; -------------------------------------------------------------------------------- /public/src/scss/layout/_init.scss: -------------------------------------------------------------------------------- 1 | @import "button.scss"; 2 | @import "form.scss"; 3 | @import "layout.scss"; 4 | @import "unit.scss"; 5 | @import "iconfont.scss"; 6 | @import "../var/bgcolor.scss"; -------------------------------------------------------------------------------- /public/src/scss/layout/button.scss: -------------------------------------------------------------------------------- 1 | @import "../var/var.scss"; 2 | @import "../lib/mixin.scss"; 3 | 4 | .al-btn{ 5 | display: inline-block; 6 | height: $btn-default__height; 7 | padding: 0 10px; 8 | margin: 0 5px 5px 0; 9 | color: $gf; 10 | font-size: $btn-default__size; 11 | font-family: $font-family; 12 | line-height: $btn-default__height; 13 | text-align: center; 14 | vertical-align: bottom; 15 | white-space: nowrap; 16 | @include border(transparent); 17 | border-radius: 0px; 18 | outline: none; 19 | background-color: transparent; 20 | cursor: pointer; 21 | &.al-btn-type__icon{ 22 | padding: 0 6px; 23 | .al-icon{ 24 | font-weight: 700; 25 | } 26 | &:hover{ 27 | background-color: $main-blue; 28 | color: $gf; 29 | } 30 | &:active{ 31 | background-color: $dark-blue !important; 32 | color: $gf; 33 | } 34 | } 35 | /* button style */ 36 | &.al-btn__default{ 37 | background-color: $main-blue ; 38 | &:hover{ 39 | background-color: $aid-blue; 40 | } 41 | &:active{ 42 | background-color: $dark-blue; 43 | } 44 | } 45 | 46 | &.al-btn__danger{ 47 | background-color: $main-danger; 48 | &:hover{ 49 | background-color: $aid-danger; 50 | } 51 | &:active{ 52 | background-color: $dark-danger; 53 | } 54 | } 55 | 56 | &.al-btn__warn{ 57 | background-color: $main-warn; 58 | &:hover{ 59 | background-color: $aid-warn; 60 | } 61 | &:active{ 62 | background-color: $dark-warn; 63 | } 64 | } 65 | 66 | &.al-btn__success{ 67 | background-color: $main-success; 68 | &:hover{ 69 | background-color: $aid-success; 70 | } 71 | &:active{ 72 | background-color: $dark-success; 73 | } 74 | } 75 | 76 | &.al-btn__disabled, 77 | &.al-btn__outline{ 78 | color: $ae; 79 | line-height: $btn-default__height - 2px; 80 | border-color: $cd; 81 | background-color: $f1; 82 | &.al-btn__tiny{ 83 | line-height: $btn-tiny__height - 2px; 84 | } 85 | &.al-btn__small{ 86 | line-height: $btn-small__height - 2px; 87 | } 88 | &.al-btn__large{ 89 | line-height: $btn-large__height - 2px; 90 | } 91 | &.al-btn__full{ 92 | line-height: $btn-full__height - 2px; 93 | } 94 | } 95 | 96 | &.al-btn__disabled, 97 | &[disabled]{ 98 | cursor: not-allowed; 99 | } 100 | &.al-btn__outline{ 101 | color: $g40; 102 | background-color: transparent; 103 | &:hover{ 104 | border-color: $main-blue; 105 | } 106 | &:active{ 107 | border-color: $dark-blue; 108 | background-color: $f9; 109 | } 110 | } 111 | 112 | /* button size */ 113 | &.al-btn__tiny{ 114 | padding: 0 5px; 115 | height: $btn-tiny__height; 116 | font-size: $btn-tiny__size; 117 | line-height: $btn-tiny__height; 118 | } 119 | 120 | &.al-btn__small{ 121 | height: $btn-small__height; 122 | font-size: $btn-small__size; 123 | line-height: $btn-small__height; 124 | } 125 | 126 | &.al-btn__large{ 127 | height: $btn-large__height; 128 | font-size: $btn-large__size; 129 | line-height: $btn-large__height; 130 | } 131 | 132 | &.al-btn__full{ 133 | width: 100%; 134 | height: $btn-full__height; 135 | font-size: $btn-full__size; 136 | line-height: $btn-full__height; 137 | } 138 | 139 | &.al-btn__radius{ 140 | border-radius: 5px; 141 | } 142 | 143 | &.al-btn__circle{ 144 | border-radius: 40px; 145 | } 146 | } -------------------------------------------------------------------------------- /public/src/scss/layout/form.scss: -------------------------------------------------------------------------------- 1 | @import "../var/var.scss"; 2 | @import "../lib/mixin.scss"; 3 | 4 | .al-form__section{ 5 | position: relative; 6 | padding: $padding-both * 2 ; 7 | @include border($e6); 8 | .al-form__title{ 9 | position: absolute; 10 | top: -1em; 11 | left: 2em; 12 | padding: 0 1em; 13 | line-height: 2; 14 | background-color: $gf; 15 | } 16 | } 17 | 18 | .al-form__item{ 19 | margin: 20px 0; 20 | min-width: $default-min__width * 2; 21 | min-height: $default-min__height; 22 | .al-form__group{ 23 | margin-left: $default-min__width; 24 | min-width: $default-min__width; 25 | } 26 | } 27 | 28 | .al-label{ 29 | float: left; 30 | width: $default-min__width; 31 | height: $default-min__height; 32 | padding: 0 $padding-both; 33 | font-size: $font-default__size; 34 | line-height: $default-min__height; 35 | text-align: right; 36 | } 37 | 38 | .al-input{ 39 | &.al-input__large{ 40 | .al-input__inner{ 41 | height: $btn-large__height; 42 | line-height: $btn-large__height - 2px; 43 | } 44 | } 45 | .al-input__inner{ 46 | width: 100%; 47 | height: $default-min__height; 48 | padding-left: 1em; 49 | line-height: $default-min__height - 2px; 50 | @include border($e6); 51 | outline: none; 52 | &:hover{ 53 | border-color: $cd; 54 | } 55 | &:focus:not([readonly]){ 56 | border-color: $main-blue; 57 | } 58 | } 59 | .error-message{ 60 | display: none; 61 | } 62 | &.error { 63 | position: relative; 64 | .al-input__inner{ 65 | border-color: $main-danger; 66 | } 67 | .error-message{ 68 | position: absolute; 69 | bottom: -15px; 70 | left: 0; 71 | display: block; 72 | font-size: 12px; 73 | line-height: 1; 74 | color: $main-danger; 75 | } 76 | } 77 | &.disabled, 78 | .al-input__inner[disabled]{ 79 | color: $ae; 80 | border-color: $cd; 81 | background-color: $f2; 82 | cursor: not-allowed; 83 | } 84 | } 85 | 86 | .al-switch{ 87 | position: relative; 88 | top: 3px; 89 | &.disabled{ 90 | .al-switch__group{ 91 | background-color: $f1; 92 | } 93 | } 94 | .al-switch__group{ 95 | display: block; 96 | width: $switch-width; 97 | height: $switch-height; 98 | border-radius: $switch-height; 99 | @include border($cd); 100 | &::before{ 101 | content: ""; 102 | position: absolute; 103 | top: 4px; 104 | left: 4px; 105 | width: $switch-dot__size; 106 | height: $switch-dot__size; 107 | background-color: $d2; 108 | border-radius: 50%; 109 | transition: all 0.25s; 110 | } 111 | &::after{ 112 | content: "OFF"; 113 | position: absolute; 114 | right: 6px; 115 | color: $g9; 116 | font-size: 12px; 117 | line-height: $switch-height - 2px; 118 | } 119 | } 120 | input[type="checkbox"]:checked + .al-switch__group{ 121 | border-color: $main-blue; 122 | background-color: $main-blue; 123 | &::before{ 124 | content: ""; 125 | left: 34px; 126 | transition: all 0.25s; 127 | background-color: $gf; 128 | } 129 | &::after{ 130 | content: "ON"; 131 | color: $gf; 132 | right: 26px; 133 | } 134 | } 135 | } 136 | 137 | .al-checkbox{ 138 | .al-checkbox__group{ 139 | position: relative; 140 | top: 6px; 141 | float: left; 142 | width: $checkbox-size; 143 | height: $checkbox-size; 144 | border: solid 1px #cdcdcd; 145 | // @include border($cd); 146 | &::before{ 147 | content: ""; 148 | position: absolute; 149 | left: 5px; 150 | bottom: 3px; 151 | width: 8px; 152 | height: 14px; 153 | border: 0 none; 154 | transform: rotateZ(45deg); 155 | transition: all 0.25s; 156 | } 157 | &:hover{ 158 | border-color: $main-blue; 159 | } 160 | 161 | } 162 | &.disabled{ 163 | .al-checkbox__group{ 164 | background-color: $f1; 165 | &:hover{ 166 | border-color: $cd; 167 | } 168 | } 169 | input[type="checkbox"]:checked + .al-checkbox__group{ 170 | border-color: $d2; 171 | background-color: $d2; 172 | } 173 | } 174 | .al-checkbox__label{ 175 | display: inline-block; 176 | margin-left: 10px; 177 | margin-right: 20px; 178 | } 179 | input[type="checkbox"]:checked + .al-checkbox__group{ 180 | border-color: $main-blue; 181 | background-color: $main-blue; 182 | &::before{ 183 | content: ""; 184 | border-bottom: 2px solid $gf; 185 | border-right: 2px solid $gf; 186 | transition: all 0.25s; 187 | } 188 | } 189 | } 190 | 191 | .al-radio{ 192 | .al-radio__label{ 193 | display: inline-block; 194 | margin-left: 10px; 195 | margin-right: 20px; 196 | } 197 | &.disabled{ 198 | .al-radio__group{ 199 | background-color: $f1; 200 | } 201 | } 202 | .al-radio__group{ 203 | position: relative; 204 | top: 5px; 205 | float: left; 206 | width: $radio-size; 207 | height: $radio-size; 208 | border-radius: 50%; 209 | @include border($cd); 210 | &::before{ 211 | content: ""; 212 | position: absolute; 213 | top: 5px; 214 | left: 5px; 215 | width: $radio-dot__size; 216 | height: $radio-dot__size; 217 | border-radius: 50%; 218 | background-color: transparent; 219 | transition: all 0.25s; 220 | } 221 | } 222 | input[type="radio"]:checked + .al-radio__group{ 223 | border-color: $main-blue; 224 | &::before{ 225 | content: ""; 226 | background-color: $main-blue; 227 | transition: all 0.25s; 228 | } 229 | } 230 | } 231 | 232 | .al-select{ 233 | position: relative; 234 | cursor: pointer; 235 | .al-select__text{ 236 | width: 100%; 237 | height: $default-min__height; 238 | padding-left: 1em; 239 | line-height: $default-min__height - 2px; 240 | @include border($e6); 241 | } 242 | .al-select__input{ 243 | position: relative; 244 | &:after{ 245 | content: ""; 246 | position: absolute; 247 | top: 11px; 248 | right: 11px; 249 | width: 12px; 250 | height: 12px; 251 | border-top: 6px solid $cd; 252 | border-left: 6px solid transparent; 253 | border-right: 6px solid transparent; 254 | transition: all .5s; 255 | } 256 | } 257 | &.active{ 258 | .al-select__main{ 259 | display: block; 260 | top: 40px; 261 | transition: all .5s; 262 | } 263 | .al-select__input{ 264 | &:after{ 265 | content: ""; 266 | transform: rotateZ(180deg); 267 | transform-origin: 6px 3px; 268 | transition: all .5s; 269 | } 270 | } 271 | } 272 | &.disabled{ 273 | cursor: not-allowed; 274 | .al-select__text{ 275 | background-color: $f2; 276 | } 277 | .al-select__main{ 278 | display: none !important; 279 | } 280 | } 281 | } 282 | 283 | .al-select__main{ 284 | position: absolute; 285 | z-index: 2; 286 | top: 50px; 287 | display: none; 288 | width: 100%; 289 | max-height: $select-height + 2px; 290 | line-height: $default-min__height; 291 | background-color: $gf; 292 | @include border($cd); 293 | @include shadow($f2); 294 | li{ 295 | text-indent: 1em; 296 | &:hover{ 297 | background-color: $f8; 298 | } 299 | &.active{ 300 | color: $gf; 301 | background-color: $main-blue; 302 | } 303 | &:first-child{ 304 | color: $g9; 305 | } 306 | } 307 | } 308 | 309 | .al-switch, 310 | .al-checkbox, 311 | .al-radio{ 312 | float: left; 313 | line-height: $default-min__height; 314 | cursor: pointer; 315 | &.disabled{ 316 | cursor: not-allowed; 317 | } 318 | } 319 | -------------------------------------------------------------------------------- /public/src/scss/layout/iconfont.scss: -------------------------------------------------------------------------------- 1 | @import "../../iconfont/icon.scss"; -------------------------------------------------------------------------------- /public/src/scss/layout/layout.scss: -------------------------------------------------------------------------------- 1 | @import "../var/var.scss"; 2 | @import "../lib/mixin.scss"; 3 | 4 | .al-contain, 5 | .al-row{ 6 | @include clearfix(); 7 | } 8 | 9 | .al-row{ 10 | display: block; 11 | float: left; 12 | width: 100%; 13 | [class*="al-col__"]{ 14 | float: left; 15 | display: inline-block; 16 | vertical-align: middle; 17 | } 18 | 19 | @each $col in 1,2,3,4,6,8,12,24 { 20 | .al-col__#{$col}{ 21 | width: $col * 100% / 24; 22 | } 23 | .al-offset-left__#{$col}{ 24 | margin-left: $col * 100% / 24; 25 | } 26 | .al-offset-right__#{$col}{ 27 | margin-right: $col * 100% / 24; 28 | } 29 | } 30 | } 31 | 32 | [class*="al-col__"]{ 33 | min-height: $default-min__height; 34 | } 35 | 36 | .al-type__page{ 37 | width: $website-type__page; 38 | margin-left: auto; 39 | margin-right: auto; 40 | } 41 | 42 | .al-layout__page{ 43 | @include abs(); 44 | width: 100%; 45 | height: 100%; 46 | z-index: 10; 47 | &.website{ 48 | padding-top: $website-head__height; 49 | padding-bottom: $website-footer__height; 50 | .al-layout__header{ 51 | height: $website-head__height; 52 | } 53 | .al-layout__footer{ 54 | height: $website-footer__height; 55 | } 56 | } 57 | &.project{ 58 | padding-top: $project-head__height; 59 | padding-bottom: $project-footer__height; 60 | .al-layout__header{ 61 | height: $project-head__height; 62 | background-color: $main-black; 63 | } 64 | .al-layout__footer{ 65 | background: $f2; 66 | } 67 | } 68 | } 69 | 70 | .al-layout__header{ 71 | @include abs(); 72 | width: 100%; 73 | background: $gf; 74 | } 75 | 76 | .al-layout__menu{ 77 | min-width: 180px; 78 | background: $main-navy; 79 | } 80 | 81 | .al-layout__content{ 82 | display: flex; 83 | width: 100%; 84 | height: 100%; 85 | .al-layout__context{ 86 | flex: 1; 87 | padding: 10px; 88 | } 89 | } 90 | 91 | .al-layout__footer{ 92 | position: absolute; 93 | left: 0; 94 | bottom: 0; 95 | width: 100%; 96 | min-height: 30px; 97 | color: $g69; 98 | font-size: $h5-size; 99 | background: $gf; 100 | } -------------------------------------------------------------------------------- /public/src/scss/layout/unit.scss: -------------------------------------------------------------------------------- 1 | @import "../var/var.scss"; 2 | @import "../lib/mixin.scss"; 3 | 4 | .al-dialog, 5 | .al-message { 6 | position: fixed; 7 | z-index: 10; 8 | @include pos-center(20%, 50%, 0, -50%); 9 | min-width: $dialog-min__width; 10 | background-color: $gf; 11 | @include border($e6); 12 | @include shadow($f2); 13 | .al-context__header { 14 | @include abs(); 15 | width: 100%; 16 | min-height: $message-title__height; 17 | padding: 0 10px; 18 | line-height: $message-title__height; 19 | background-color: $f8; 20 | .al-icon{ 21 | position: absolute; 22 | right: 10px; 23 | cursor: pointer; 24 | transition: all .5s; 25 | &:hover{ 26 | transform: rotateZ(270deg); 27 | transform-origin: 50% 50%; 28 | transition: all .5s; 29 | } 30 | } 31 | } 32 | .al-context__content { 33 | padding: 35px 10px 50px; 34 | .al-icon{ 35 | float: left; 36 | font-size: 34px; 37 | } 38 | .al-icon__warning{ 39 | color: $main-warn; 40 | } 41 | .al-icon__success{ 42 | color: $main-success; 43 | } 44 | .al-icon__delete{ 45 | color: $main-danger; 46 | } 47 | p{ 48 | margin-top: 15px; 49 | height: $default-min__height; 50 | line-height: $default-min__height; 51 | white-space: nowrap; 52 | } 53 | } 54 | .al-context__footer { 55 | position: absolute; 56 | left: 0; 57 | bottom: 0; 58 | width: 100%; 59 | padding: 10px 0 5px; 60 | text-align: center; 61 | } 62 | } 63 | 64 | .al-dialog { 65 | min-height: $dialog-min__height; 66 | &.al-dialog__tiny{ 67 | width: $dialog-tiny__width; 68 | } 69 | &.al-dialog__small{ 70 | width: $dialog-small__width; 71 | } 72 | &.al-dialog__large{ 73 | width: $dialog-large__width; 74 | } 75 | &.al-dialog__full{ 76 | top: 0; 77 | width: $dialog-full__width; 78 | height: 100%; 79 | } 80 | } 81 | 82 | .al-message { 83 | min-height: $message-min__height; 84 | } 85 | 86 | .al-mask { 87 | position: fixed; 88 | top: 0; 89 | left: 0; 90 | width: 100%; 91 | height: 100%; 92 | background-color: $g0; 93 | opacity: .3; 94 | } 95 | 96 | .al-tab{ 97 | .al-table__wrap{ 98 | @include clearfix(); 99 | border-bottom: 1px solid $e6; 100 | } 101 | .al-tab__pane{ 102 | position: relative; 103 | bottom: -1px; 104 | float: left; 105 | padding: 0 20px; 106 | line-height: 30px; 107 | cursor: pointer; 108 | @include border(transparent); 109 | &.active{ 110 | color: $main-blue; 111 | border-color: $e6; 112 | border-bottom-color: $gf; 113 | &::after{ 114 | content: ""; 115 | position: absolute; 116 | width: 100%; 117 | top: -1px; 118 | left: 0; 119 | height: 2px; 120 | background-color: $main-blue; 121 | } 122 | } 123 | } 124 | &.al-tab-type__card{ 125 | background-color: $f9; 126 | @include border($e6); 127 | .al-table__wrap{ 128 | border-bottom: 0 none; 129 | } 130 | .al-tab__pane{ 131 | bottom: 0; 132 | @include border(transparent); 133 | margin-left: -1px; 134 | &.active{ 135 | border-left-color: $e6; 136 | border-right-color: $e6; 137 | background-color: $gf; 138 | &::after{ 139 | top: inherit; 140 | bottom: -2px; 141 | height: 1px; 142 | background-color: $gf; 143 | } 144 | } 145 | } 146 | } 147 | } 148 | 149 | .al-table{ 150 | overflow: auto; 151 | table{ 152 | width: 100%; 153 | border-collapse: collapse; 154 | } 155 | th{ 156 | padding: 10px 15px; 157 | } 158 | td{ 159 | padding: 6px 15px; 160 | } 161 | th, 162 | td{ 163 | font-weight: 400; 164 | color: $g40; 165 | line-height: 1; 166 | white-space: nowrap; 167 | @include border($e6); 168 | } 169 | tr:hover td{ 170 | background-color: $f8; 171 | } 172 | .al-table__header{ 173 | background-color: $f8; 174 | } 175 | .al-table__body{ 176 | position: relative; 177 | top: -1px; 178 | .al-btn{ 179 | margin-bottom: 0; 180 | } 181 | } 182 | } 183 | 184 | .al-menu{ 185 | float: left; 186 | width: auto; 187 | min-width: $menu-min__width ; 188 | color: $cd; 189 | line-height: 2 * $menu-title__indent; 190 | background-color: $main-navy; 191 | .al-menu__title{ 192 | height: 2 * $menu-title__indent; 193 | padding: 0 $menu-title__indent; 194 | cursor: pointer; 195 | &:hover{ 196 | background-color: $deep-black; 197 | } 198 | &.active{ 199 | color: $gf; 200 | background-color: $main-blue; 201 | } 202 | } 203 | .al-menu__title + .al-menu__group{ 204 | display: none; 205 | } 206 | } 207 | 208 | .al-menu__group{ 209 | >.al-menu__item{ 210 | &.active{ 211 | >.al-menu__group{ 212 | display: block; 213 | background-color: $main-black; 214 | } 215 | } 216 | } 217 | .al-menu__group{ 218 | .al-menu__title{ 219 | padding-left: $menu-title__indent * 2; 220 | } 221 | .al-menu__group{ 222 | .al-menu__title{ 223 | padding-left: $menu-title__indent * 3; 224 | } 225 | } 226 | } 227 | } -------------------------------------------------------------------------------- /public/src/scss/lib/_function.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zlalex/ego-css/964053bd3fd0d31e0083fa6a5f4f515f1ec20db1/public/src/scss/lib/_function.scss -------------------------------------------------------------------------------- /public/src/scss/lib/_mixin.scss: -------------------------------------------------------------------------------- 1 | @mixin border ($color, $style:solid, $width:1px){ 2 | border-width: $width; 3 | border-style: $style; 4 | border-color: $color; 5 | } 6 | 7 | @mixin shadow($color, $size:4px){ 8 | box-shadow: 0 0 $size $color; 9 | } 10 | 11 | @mixin clearfix () { 12 | &::before{ 13 | content: ""; 14 | display: table; 15 | } 16 | &::after{ 17 | content: ""; 18 | display: table; 19 | clear: both; 20 | } 21 | } 22 | 23 | @mixin abs () { 24 | position: absolute; 25 | top: 0; 26 | left: 0; 27 | } 28 | 29 | @mixin pos-center ($y1:50%, $x1:50%, $y2:-50%, $x2:-50%) { 30 | top: $y1; 31 | left: $x1; 32 | transform: translate($x2, $y2); 33 | } -------------------------------------------------------------------------------- /public/src/scss/lib/animate.scss: -------------------------------------------------------------------------------- 1 | .al-animate{ 2 | transition: all 0.3s; 3 | &:hover{ 4 | transition: all 0.3s; 5 | } 6 | } -------------------------------------------------------------------------------- /public/src/scss/mobile/_var.scss: -------------------------------------------------------------------------------- 1 | // px转rem值 2 | @function px2rem($px, $base-font-size: $design-unit) { 3 | @return ($px / $base-font-size) * 1rem; 4 | } 5 | // 设计稿宽度 用于定义rem基准 6 | $design-width: 750px !default; 7 | $design-unit: $design-width/10 !default; 8 | $device-max-width: 540px; 9 | -------------------------------------------------------------------------------- /public/src/scss/mobile/cashout.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zlalex/ego-css/964053bd3fd0d31e0083fa6a5f4f515f1ec20db1/public/src/scss/mobile/cashout.scss -------------------------------------------------------------------------------- /public/src/scss/mobile/coupon.scss: -------------------------------------------------------------------------------- 1 | @import 'var'; 2 | .coupon-list-wrapper{ 3 | margin: px2rem(20px) 0; 4 | .coupon-item{ 5 | margin-bottom: px2rem(20px); 6 | padding: px2rem(34px); 7 | background: #fff; 8 | } 9 | 10 | .coupon-img-wrapper{ 11 | width: px2rem(160px); 12 | height: px2rem(160px); 13 | margin-right: px2rem(20px); 14 | background-color: #f4f4f4; 15 | p{ 16 | top: 50%; 17 | left: px2rem(24px); 18 | transform: translateY(-50%); 19 | font-size: px2rem(12px); 20 | span{ 21 | display: block; 22 | } 23 | } 24 | } 25 | .coupon-info{ 26 | display: flex; 27 | flex-direction: column; 28 | justify-content: space-between; 29 | line-height: px2rem(80px); 30 | font-size: px2rem(26px); 31 | } 32 | .coupon-operation{ 33 | position: relative; 34 | display: flex; 35 | align-items: flex-end; 36 | width: 120px; 37 | .btn{ 38 | position: absolute; 39 | right: 0; 40 | } 41 | .btn-normal{ 42 | color: #ab2b2c; 43 | } 44 | } 45 | } -------------------------------------------------------------------------------- /public/src/scss/mobile/mobile.layout.scss: -------------------------------------------------------------------------------- 1 | @import 'var'; 2 | *{ 3 | margin: 0; 4 | padding: 0; 5 | box-sizing: border-box; 6 | } 7 | .text-center { 8 | text-align: center; 9 | } 10 | 11 | .flex-box{ 12 | display: flex; 13 | justify-content: space-between; 14 | } 15 | html,body,.layout-page{ 16 | height: 100%; 17 | } 18 | 19 | .body, 20 | .layout-page { 21 | background: #eee; 22 | } 23 | 24 | .layout-page { 25 | width: 100%; 26 | min-height: 100%; 27 | overflow: hidden; 28 | padding-top: 1.2rem; 29 | .top-nav { 30 | position: fixed; 31 | z-index: 1000; 32 | left: 0; 33 | top: 0; 34 | display: block; 35 | width: 100%; 36 | background-color: #fff; 37 | border-bottom: 1px solid #e1e1e1; 38 | } 39 | .layout-content{ 40 | max-width: 540px; 41 | height: 100%; 42 | margin: 0 auto; 43 | } 44 | } 45 | 46 | .btn{ 47 | display: inline-block; 48 | width: px2rem(106px); 49 | height: px2rem(52px); 50 | text-align: center; 51 | line-height: px2rem(50px); 52 | border-radius: 2px; 53 | &.btn-outline{ 54 | border: solid 1px #7f7f7f; 55 | } 56 | &.btn-normal{ 57 | border: solid 1px transparent; 58 | } 59 | } 60 | 61 | .abs{ 62 | position: absolute; 63 | } 64 | 65 | .rel{ 66 | position: relative; 67 | } 68 | 69 | 70 | 71 | .layout-title { 72 | height: 1.2rem; 73 | line-height: 1.2rem; 74 | font-size: 1.5em; 75 | .title-left{ 76 | position: absolute; 77 | z-index: 1000; 78 | left: 0; 79 | top: 0; 80 | display: block; 81 | font-size: 1.11em; 82 | color: #999; 83 | background: url('../images/icon_back.png') center center no-repeat; 84 | background-size: .5rem; 85 | transform: rotateZ(180deg); 86 | } 87 | .title-back{ 88 | display: inline-block; 89 | width: 1.33333rem; 90 | padding-left: 0.4rem; 91 | padding-right: 0.4rem; 92 | } 93 | .title-content{ 94 | font-weight: bold; 95 | max-width: 50%; 96 | overflow: hidden; 97 | white-space: nowrap; 98 | text-overflow: ellipsis; 99 | margin: 0 auto; 100 | color: #333a49; 101 | } 102 | } -------------------------------------------------------------------------------- /public/src/scss/reset.scss: -------------------------------------------------------------------------------- 1 | /*! 2 | * ress.css • v1.2.2 3 | * MIT License 4 | * github.com/filipelinhares/ress 5 | */ 6 | html{box-sizing:border-box;overflow-y:scroll;-webkit-text-size-adjust:100%}*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}:after,:before{text-decoration:inherit;vertical-align:inherit}*{padding:0;margin:0}audio:not([controls]){display:none;height:0}hr{overflow:visible}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}summary{display:list-item}small{font-size:80%}[hidden],template{display:none}abbr[title]{border-bottom:1px dotted;text-decoration:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}code,kbd,pre,samp{font-family:monospace,monospace}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}input{border-radius:0}[role=button],[type=button],[type=reset],[type=submit],button{cursor:pointer}[disabled]{cursor:default}[type=number]{width:auto}[type=search]{-webkit-appearance:textfield}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}textarea{overflow:auto;resize:vertical}button,input,optgroup,select,textarea{font:inherit}optgroup{font-weight:700}button{overflow:visible}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:0;padding:0}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button:-moz-focusring{outline:1px dotted ButtonText}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}button,select{text-transform:none}button,input,select,textarea{background-color:transparent;border-style:none;color:inherit}select{-moz-appearance:none;-webkit-appearance:none}select::-ms-expand{display:none}select::-ms-value{color:currentColor}legend{border:0;color:inherit;display:table;max-width:100%;white-space:normal}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}img{border-style:none}progress{vertical-align:baseline}svg:not(:root){overflow:hidden}audio,canvas,progress,video{display:inline-block}@media screen{[hidden~=screen]{display:inherit}[hidden~=screen]:not(:active):not(:focus):not(:target){position:absolute!important;clip:rect(0 0 0 0)!important}}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled]{cursor:default}::-moz-selection{background-color:#b3d4fc;color:#000;text-shadow:none}::selection{background-color:#b3d4fc;color:#000;text-shadow:none} -------------------------------------------------------------------------------- /public/src/scss/static.scss: -------------------------------------------------------------------------------- 1 | @import "var/var.scss"; 2 | 3 | body{ 4 | font-size: 14px; 5 | line-height: 1.5; 6 | font-family: $font-family; 7 | } 8 | 9 | h1{ 10 | font-size: $h1-size; 11 | } 12 | 13 | h2{ 14 | font-size: $h2-size; 15 | } 16 | 17 | h3{ 18 | font-size: $h3-size; 19 | } 20 | 21 | h4{ 22 | font-size: $h4-size; 23 | } 24 | 25 | h5{ 26 | font-size: $h5-size; 27 | } 28 | 29 | a,img,div,span, 30 | input,label,button, 31 | textarea{ 32 | -webkit-tap-highlight-color: transparent; 33 | } 34 | 35 | ul, 36 | ol{ 37 | list-style: none; 38 | } 39 | 40 | @import "layout/init.scss"; 41 | @import "lib/animate.scss"; -------------------------------------------------------------------------------- /public/src/scss/var/_color.scss: -------------------------------------------------------------------------------- 1 | $ga : #aaa; 2 | $gb : #bbb; 3 | $gc : #ccc; 4 | $gd : #ddd; 5 | $ge : #eee; 6 | $gf : #fff; 7 | 8 | $g0 : #000; 9 | $g3 : #333; 10 | $g6 : #666; 11 | $g9 : #999; 12 | 13 | $g40 : #404040; 14 | 15 | $g69 : #696969; 16 | $ae : #aeaeae; 17 | $cd : #cdcdcd; 18 | $d2 : #d2d2d2; 19 | 20 | $e2 : #e2e2e2; 21 | $e4 : #e4e4e4; 22 | $e6 : #e6e6e6; 23 | $e8 : #e8e8e8; 24 | 25 | $f1 : #f1f1f1; 26 | $f2 : #f2f2f2; 27 | $f8 : #f8f8f8; 28 | $f9 : #f9f9f9; 29 | $fe : #fefefe; 30 | 31 | $main-blue : #1f8ae9; 32 | $aid-blue : #1881df; 33 | $dark-blue : #0d77d5; 34 | 35 | $main-black : #23262f; 36 | $main-navy : #393d49; 37 | $deep-black : #4b4f5b; 38 | $main-gray : $ge; 39 | 40 | $main-warn : #f7ba2a; 41 | $aid-warn : #efb01c; 42 | $dark-warn : #e5a714; 43 | 44 | $main-success : #7aad3e; 45 | $aid-success : #70a433; 46 | $dark-success : #66972d; 47 | 48 | $main-danger : #e93535; 49 | $aid-danger : #df2626; 50 | $dark-danger : #d41e1e; 51 | 52 | $main-drop : $f2; 53 | 54 | $bd-button : $cd; 55 | $bd-form : $e6; 56 | 57 | $text-paragraph : $g40; 58 | $text-header : $cd; 59 | $text-form : $e8; 60 | $text-disabled : $ae; -------------------------------------------------------------------------------- /public/src/scss/var/_size.scss: -------------------------------------------------------------------------------- 1 | $font-family : arial, "Hiragino Sans GB", "Microsoft Yahei", 微软雅黑, 宋体, Tahoma, Arial, Helvetica, STHeiti, PingFang SC; 2 | $font-default__size : 14px; 3 | 4 | $h1-size : 24px; 5 | $h2-size : 18px; 6 | $h3-size : 16px; 7 | $h4-size : 14px; 8 | $h5-size : 12px; 9 | 10 | 11 | $btn-default__size : $font-default__size ; 12 | $btn-default__height : 30px; 13 | 14 | $btn-small__size : 12px; 15 | $btn-small__height : 26px; 16 | 17 | $btn-tiny__size : $btn-small__size; 18 | $btn-tiny__height : 22px; 19 | 20 | $btn-large__size : 16px; 21 | $btn-large__height : 40px; 22 | 23 | $btn-full__size : $btn-large__size; 24 | $btn-full__height : $btn-large__height; 25 | $btn-full__width : 100%; 26 | 27 | $switch-width : 54px; 28 | $switch-height : 24px; 29 | $switch-dot__size : 16px; 30 | 31 | $checkbox-size : 18px; 32 | $radio-size : 20px; 33 | $radio-dot__size : 8px; 34 | 35 | $select-height : 200px; 36 | 37 | $padding-both : 10px; 38 | $default-min__width : 100px; 39 | $default-min__height : 30px; 40 | 41 | $dialog-min__width : 272px; 42 | $dialog-min__height : 150px; 43 | $message-min__height : 130px; 44 | $message-title__height : 35px; 45 | 46 | $dialog-tiny__width : $dialog-min__width; 47 | $dialog-small__width : 544px; 48 | $dialog-large__width : 816px; 49 | $dialog-full__width : 100%; 50 | 51 | $menu-min__width : 180px; 52 | $menu-title__indent : 20px; 53 | 54 | $website-type__page : 1200px; 55 | $website-head__height : 70px; 56 | $website-footer__height : 52px; 57 | $project-head__height : 50px; 58 | $project-footer__height : 30px; -------------------------------------------------------------------------------- /public/src/scss/var/_var.scss: -------------------------------------------------------------------------------- 1 | @import "color.scss"; 2 | @import "size.scss"; -------------------------------------------------------------------------------- /public/src/scss/var/bgcolor.scss: -------------------------------------------------------------------------------- 1 | @import "color.scss"; 2 | 3 | .al-main__blue{ 4 | background-color: $main-blue !important; 5 | } 6 | .al-dark__blue{ 7 | background-color: $dark-blue !important; 8 | } 9 | .al-main__black{ 10 | background-color: $main-black !important; 11 | } 12 | .al-main__navy{ 13 | background-color: $main-navy !important; 14 | } 15 | .al-main__gray{ 16 | background-color: $main-gray !important; 17 | } 18 | 19 | .al-main__warn{ 20 | background-color: $main-warn !important; 21 | } 22 | .al-main__success{ 23 | background-color: $main-success !important; 24 | } 25 | .al-main__danger{ 26 | background-color: $main-danger !important; 27 | } 28 | .al-main__drop{ 29 | background-color: $main-drop !important; 30 | } 31 | 32 | .al-aid__warn{ 33 | background-color: $aid-warn !important; 34 | } 35 | .al-aid__success{ 36 | background-color: $aid-success !important; 37 | } 38 | .al-aid__danger{ 39 | background-color: $aid-danger !important; 40 | } 41 | 42 | .al-dark__warn{ 43 | background-color: $dark-warn !important; 44 | } 45 | .al-dark__success{ 46 | background-color: $dark-success !important; 47 | } 48 | .al-dark__danger{ 49 | background-color: $dark-danger !important; 50 | } 51 | --------------------------------------------------------------------------------