首先声明，此插件为我同事所写，所以此篇博客为转载类型，但因没有选择转载类型时需要的链接，才选择原创类型，如有同行需要请标明出处：（作者：lus）
预览效果：
此插件当 arrayJSON 为空时，加载的月份为当前月，月份个数由 index 控制。
HTML：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/><meta name="format-detection" content="telephone=no,email=no,date=no,address=no"><link rel="stylesheet" href="common.css"><style>/* 没有 common.css 文件，添加以下注释 css*//*html {font-size:62.5%;}body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td {margin:0; padding:0;}.fs10 {font-size:1.0rem;}*/.ZYCalender .dateZone{width: 100%;margin: auto;background: #f5f5f5;color:#666;position: -webkit-sticky;position: sticky;top: 0;z-index: 999;}.ZYCalender .tbody{background: #f3f3f3;padding-bottom: 4.5rem;}.ZYCalender .tbody td{background: #fff;text-align: center;height: 4.4rem;font-size: 1.4rem;color: #666;width: 14.2%;border: 2px solid #fff;}.ZYCalender .tbody td .con{height: 4.4rem;font-size: 1.4rem;}.ZYCalender .tbody td p{line-height: 14px;}.ZYCalender .tbody .sel{background: #cab970;border-radius: 5px;}.ZYCalender .tbody tr{vertical-align: top;}.ZYCalender .dateZone td{background: #f5f5f5;width: 14.2%;font-size: 1.4rem;text-align: center;height: 45px;}.ZYCalender .dateZone .colo{color: #ffd101;}.ZYCalender .dateTable{width: 100%;margin: auto;}.ZYCalender .tbody .itemMonth{margin-bottom: 10px;background: #fff;padding: 10px 5px;}.ZYCalender .tbody .month{width: 100%;text-align: center;padding: 8px 0;font-size: 1.6rem;}.ZYCalender .hover{font-size: 1.2rem;display: inline-block;width: 60%;background: #ffd101;color: #ba0003;text-align: center;border-radius: 5px;}.confirm{width: 100%;height: 4.0rem;background: #eb8300;position: fixed;bottom: 0;z-index: 999;text-align: center;font-size: 1.8rem;color: #fff;line-height: 4.0rem;}</style></head><body><div class="ZYCalender"></div><div class="confirm">提交</div></body><script src="calender.js"></script><script>var arrayJSON = [{id: '0',date: '-12-29',price: '￥ 123',number: '>9人'},{id: '1',date: '-12-30',price: '￥ 123',number: '>9人'},{id: '2',date: '-12-31',price: '￥ 123',number: '>9人'},{id: '3',date: '-02-01',price: '￥ 123',number: '>9人'},{id: '4',date: '-02-02',price: '￥ 123',number: '>9人'},{id: '5',date: '-02-03',price: '￥ 123',number: '>9人'},{id: '6',date: '-02-04',price: '￥ 123',number: '>9人'},{id: '7',date: '-02-05',price: '￥ 123',number: '>9人'},{id: '8',date: '-02-06',price: '￥ 123',number: '>9人'},{id: '9',date: '-02-07',price: '￥ 123',number: '>9人'},{id: '10',date: '-02-08',price: '￥ 123',number: '>9人'},{id: '11',date: '-02-09',price: '￥ 123',number: '>9人'}];new ZYCalender({element: document.querySelector('.ZYCalender'),color: '#fff',arrayJSON: arrayJSON,confirmBtn: document.querySelector('.confirm'),callback: function (e) {console.log(e)}})</script></html>
JS:
/** by lus* * */(function (window, undefined) {"use strict";var ZYCalender = function(params){this.extend(this.params, params);this.init();};ZYCalender.prototype = {params: {element: false,index : 4, // 展示的月份个数bgColor : "#f5f5f5", // 开始结束中间颜色color: '#ffd101', // 选中的文字颜色arrayJSON: '',confirmBtn: '',callback: function () { }},init: function () {var self = this,ii,tHTML,currentYear,currentMonth,setCurrentDate,firstDay,month,DaysInMonth = [],Ntd,Ntr,createTd,anyTd,p;self.element = this.params.element;self.index = this.params.index;self.confirm = this.params.confirmBtn;self.arrayJSON = this.params.arrayJSON;self.dayDate = [];self.dayDateWeek = [];if(!this.params.element || this.params.element.nodeType !== 1) return;var html = "<table class='dateZone border-b' data-fixed=''>" +"<tr>" +"<td class='colo'>日</td>" +"<td>一</td>" +"<td>二</td>" +"<td>三</td>" +"<td>四</td>" +"<td>五</td>" +"<td class='colo'>六</td>" +"</tr>" +"</table>" +"<div class='tbody'></div>";self.element.innerHTML = html;if(self.arrayJSON){var arr = [], index;self.arrayJSON.forEach(function (element, index) {arr.push(element.date.substring(0, element.date.length - 3));});index = self.removeRepeatArray(arr);for(var i = 0; i < index.length; i++){ii = i;tHTML = "<div class='itemMonth border-b'>" +"<p class='month'></p>" +"<table class='table' style='width: 100%;position: relative'>" +"<tbody class='dateTable'></tbody>" +"</table>" +"</div>";self.element.querySelector('.tbody').insertAdjacentHTML('beforeEnd', tHTML);currentYear = index[ii].substring(0, 4);currentMonth = index[ii].substring(5, 7);setCurrentDate = new Date(currentYear, currentMonth - 1, 1);firstDay = setCurrentDate.getDay();self.element.querySelectorAll('.month')[ii].innerHTML = currentYear + '年' + currentMonth + '月';if (self.isLeapYear(currentYear)) {DaysInMonth = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];} else {DaysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];}Ntd = firstDay + DaysInMonth[currentMonth - 1];Ntr = Math.ceil(Ntd / 7);for (var j = 0; j < Ntr; j++) {self.element.querySelectorAll('.dateTable')[ii].insertAdjacentHTML('beforeEnd', '<tr></tr>');}createTd = self.element.querySelectorAll('.dateTable')[ii].querySelectorAll('tr');createTd.forEach(function(element, index) {for (var m = 0; m < 7; m++) {element.insertAdjacentHTML('beforeEnd', '<td></td>')}});anyTd = self.element.querySelectorAll('.dateTable')[ii].querySelectorAll('td');for (var n = 0; n < DaysInMonth[currentMonth - 1]; n++) {p = firstDay++;anyTd[p].innerHTML = '<div class="con">'+ (n + 1) +'</div>';self.arrayJSON.forEach(function (element) {if(currentMonth === element.date.substring(5, 7) &¤tYear === element.date.substring(0, 4) &&n + 1 === parseInt(element.date.substring(8, 10))){anyTd[p].querySelector('.con').insertAdjacentHTML('beforeEnd', '<p class="fs10" data-id="'+ element.id +'" data-price="'+ element.price +'">' + '<span>' + element.price + '</span>'+ '<br>' + '<span>' + element.number+ '</span>' + '</p>');anyTd[p].querySelector('.con').classList.add('border')}});}}} else {for(var i = 0; i < self.index; i++){ii = i;tHTML = "<div class='itemMonth border-b'>" +"<p class='month'></p>" +"<table class='table' style='width: 100%;position: relative'>" +"<tbody class='dateTable'></tbody>" +"</table>" +"</div>";self.element.querySelector('.tbody').insertAdjacentHTML('beforeEnd', tHTML);var currentDate = new Date();currentDate.setMonth(currentDate.getMonth() + ii);currentYear = currentDate.getFullYear();currentMonth = currentDate.getMonth();setCurrentDate = new Date(currentYear, currentMonth, 1);firstDay = setCurrentDate.getDay();month = currentMonth + 1;if (month < 10) {self.element.querySelectorAll('.month')[ii].innerHTML = currentYear + '年' + '0' + month + '月';} else {self.element.querySelectorAll('.month')[ii].innerHTML = currentYear + '年' + month + '月';}if (self.isLeapYear(currentYear)) {DaysInMonth = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];} else {DaysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];}Ntd = firstDay + DaysInMonth[currentMonth];Ntr = Math.ceil(Ntd / 7);for (var j = 0; j < Ntr; j++) {self.element.querySelectorAll('.dateTable')[ii].insertAdjacentHTML('beforeEnd', '<tr></tr>');}createTd = self.element.querySelectorAll('.dateTable')[ii].querySelectorAll('tr');createTd.forEach(function(element, index) {for (var m = 0; m < 7; m++) {element.insertAdjacentHTML('beforeEnd', '<td></td>')}});anyTd = self.element.querySelectorAll('.dateTable')[ii].querySelectorAll('td');for (var n = 0; n < DaysInMonth[currentMonth]; n++) {anyTd[firstDay++].innerText = (n + 1);}}}self.initSelect();self.addEvent(self.confirm, 'click', function (event) {event.preventDefault();self.date = '';self.price = '';self.id = '';self.day = [];var sels = self.element.querySelectorAll('.sel');for(var u = 0; u < sels.length; u++){var id = sels[u].querySelector('p') ? sels[u].querySelector('p').getAttribute('data-id') : '';var day = sels[u].innerText.substring(0, 2) < 10 ? '0' + sels[u].innerText.substring(0, 2) : sels[u].innerText.substring(0, 2);var startDayArrays = sels[u].offsetParent.previousSibling.innerText.split('');var startDayArrayYear = [],startDayArrayMonth = [],startDayYear = "",startDayMonth = "",date = '',price = '';for (var g = 0; g < 4; g++) {startDayArrayYear.push(startDayArrays[g])}startDayYear = startDayArrayYear.join('');for (var f = 5; f < 7; f++) {startDayArrayMonth.push(startDayArrays[f])}startDayMonth = startDayArrayMonth.join('');date = startDayYear + '-' + startDayMonth + '-' + day;price = sels[u].querySelector('p') ? sels[u].querySelector('p').getAttribute('data-price') : '';if(!self.arrayJSON){self.day.push(date);} else {self.price = price;self.date = date;self.id = id;}}if(!self.arrayJSON) {if (!self.day) return;} else {if (!self.date) return;}self.callback();});},initSelect: function () {var self = this;var strDays = new Date().getDate();var arry = [];var arry1 = [];self.element.querySelector('.tbody').querySelectorAll('td').forEach(function(element, index) {if (element.innerText !== '') {arry.push(element);}});if(!self.arrayJSON){for (var i = 0; i < strDays - 1; i++) {arry[i].style.color = '#ccc';}for (var i = strDays - 1; i < arry.length; i++) {arry1.push(arry[i])}self.selectDate(arry1)} else {self.selectDate(arry)}},isLeapYear: function(year) {return (year % 4 === 0) && (year % 100 !== 0 || year % 400 === 0);},selectDate: function(arry1) {var self = this;self.bgColor = self.params.bgColor;self.color = self.params.color;self.element = self.params.element;for(var i = 0; i < arry1.length; i++){(function(j){arry1[j].onclick = function () {if(self.arrayJSON){arry1.forEach(function (element, index) {element.classList.remove('sel');element.style.color = '';});arry1[j].classList.add('sel');arry1[j].style.color = self.color;} else {if(arry1[j].classList.contains('sel')){arry1[j].style.background = '';arry1[j].style.color = '';arry1[j].classList.remove('sel');} else {arry1[j].setAttribute('data-type', 'start');arry1[j].classList.add('sel');}self.checkColor(self.color, self.bgColor);}}})(i)}},callback: function() {var self = this;if (self.params.callback && typeof (self.params.callback) === "function") {self.params.callback({date: self.date || '',price: self.price || '',id: self.id || '',day: self.day || ''});}},checkColor: function(color, bgColor) {var self = this;var sel = self.element.querySelectorAll('.sel');for (var i = 0; i < sel.length; i++) {sel[i].style.background = bgColor;sel[i].style.color = color;}},removeRepeatArray: function (arr) {return arr.filter(function (item, index, self) {return self.indexOf(item) === index;});},addEvent: function (elm, type, fn) {if (window.attachEvent) {elm.attachEvent("on" + type, fn)} else if (window.addEventListener) {elm.addEventListener(type, fn, false);} else {elm["on" + type] = fn;}},extend: function (a, b) {for (var key in b) {if (b.hasOwnProperty(key)) {a[key] = b[key];}}return a;}};window.ZYCalender = ZYCalender;})(window);
CSS
@charset "UTF-8";/*1010*//*cssreset*/html,body {height:100%; line-height:1.5; color:#333;background:#fff; -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-text-size-adjust:none; -moz-user-select:none; -webkit-font-smoothing:antialiased;}html {font-size:62.5%;}body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td {margin:0; padding:0;}body,button,input,select,textarea,li,dt,dd,div,td,p,span {font-size:1.2rem; font-family:Microsoft Yahei,arial,verdana;}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary {display:block;}audio,canvas,progress,video {display:inline-block; vertical-align:baseline;}audio:not([controls]) {display:none; height:0;}[hidden],template {display:none;}svg:not(:root) {overflow:hidden;}h1,h2,h3,h4,h5,h6 {font-size:1.4rem; font-weight:normal; font-family:Microsoft Yahei,arial,verdana;}address,cite,dfn,em,var {font-style:normal;}code,kbd,pre,samp {font-family:courier new,courier,monospace;}ul,ol {list-style:none outside none;}span {font-size:100%;}a {color:#333; text-decoration:none;}a:hover {text-decoration:none;}a:active {color:#21adc2; outline:0;}a:focus {outline:0;}legend {color:#666;}fieldset,img {border:0 none;}img {vertical-align:bottom;}button,input,select,textarea {margin:0; padding:0; outline:none; line-height:1.8rem;-webkit-appearance:none;}button {cursor:pointer;}input[type="radio"],input[type="checkbox"] {position:relative; top:2px;}table {border-collapse:collapse; border-spacing:0;}* {-moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;}/*scroll-bar*/.myScrollbarV {position:absolute; top:2px; right:1px; bottom:2px; z-index:100; width:3px;}.myScrollbarV>div {position:absolute; z-index:100; width:100%; background:#ccc;}/*color*/.c777 {color:#777;}.c666 {color:#666;}.c333 {color:#333;}.c555 {color:#555;}.c999 {color:#999;}.cccc {color:#ccc;}.cfff {color:#fff;}.cff8d00{color:#ff8d00}.c8d8d8d{color:#8d8d8d}.cea8300{color:#ea8300}.cba0003{color:#ba0003}.c75a207{color:#75a207}.cef4900{color:#ef4900}.cf39800{color:#f39800}.cfc5105{color:#fc5105}.cf46f72{color:#f46f72}.cff4040{color:#ff4040}.cca8f8f{color:#ca8f8f}.c179cff{color:#179cff}.c38bafe{color:#38bafe}/*link-color*/a.c666 {color:#666;}a.c666:hover {color:#06c;}/*font*/.fs08 {font-size:0.8rem;}.fs10 {font-size:1.0rem;}.fs11 {font-size:1.1rem;}.fs12 {font-size:1.2rem;}.fs13 {font-size:1.3rem;}.fs14 {font-size:1.4rem;}.fs15 {font-size:1.5rem;}.fs16 {font-size:1.6rem;}.fs17 {font-size:1.7rem;}.fs18 {font-size:1.8rem;}.fs19 {font-size:1.9rem;}.fs20 {font-size:2.0rem;}.fs21 {font-size:2.1rem;}.fs22 {font-size:2.2rem;}.fs23 {font-size:2.3rem;}.fs24 {font-size:2.4rem;}.fs26 {font-size:2.6rem;}.fs28 {font-size:2.8rem;}.fs30 {font-size:3.0rem;}.fs32 {font-size:3.2rem;}.fs34 {font-size:3.4rem;}.fs30 {font-size: 3.0rem}.fs35 {font-size: 3.5rem}.fs36 {font-size: 3.6rem}.fs38 {font-size: 3.8rem}.fs40 {font-size: 4.0rem}.fs45 {font-size: 4.5rem}.fs50 {font-size: 5.0rem}.ffy {font-family:tahoma,arial,sans-serif;}.fb {font-weight: bold;}.letterSpace {letter-spacing: 1px;}/*control*/.input {height:18px; line-height:18px; padding:3px 5px; border:1px solid #ddd;}.select {padding:2px; border:1px solid #ddd;}.textarea {padding:8px; color:#666; width: 100%; height: 70px;}/*ellipsis*/.ellipsis {overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; }.ellipsis2 {overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; }.ellipsis3 {overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; }/*overflow*/.ofvisible {overflow:visible;}/*cover-background*/.coverbg {position:absolute; top:0; left:0; z-index:9998; background:#000; filter:alpha(opacity=50); opacity:0.5;}/*float*/.fl {float:left;}.fr {float:right;}/*margin-padding*/.mt5 {margin-top:5px;}.mr5 {margin-right:5px;}.ml5 {margin-left:5px;}.mt8 {margin-top:8px;}.mt10 {margin-top:10px;}.mt15 {margin-top:15px;}.mt20 {margin-top:20px;}.mt23 {margin-top:23px;}.mt25 {margin-top:25px;}.mt30 {margin-top:30px;}.mt35 {margin-top:35px;}.mt40 {margin-top:40px;}.mr6 {margin-right:6px;}.mr10 {margin-right:10px;}.mr15 {margin-right:15px;}.mb10 {margin-bottom:10px;}.mb20 {margin-bottom:20px;}.ml5 {margin-left:5px;}.ml10 {margin-left:10px;}.ml15 {margin-left:15px;}.ml20 {margin-left:20px;}.mg {margin: 0 auto; }.mgl {margin: 0 10px; }.pd {padding:10px;}.pl5 {padding:5px;}.pl {padding:0 10px 0 0;}.pr {padding:10px 0 10px 10px;}.pr2 {padding:10px 20px 10px 10px;}.pdl {padding:0 10px;}.pd15 {padding:0 15px;}.pdl2 {padding:0 20px 0 10px;}.pdr {padding:10px 0;}.pdr8 {padding:8px 0;}.pt2 {padding-top:2px;}.pt5 {padding-top:5px;}.pt6 {padding-top:6px;}.pt8 {padding-top:8px;}.pt9 {padding-top:9px;}.pt10 {padding-top:10px;}.pr5 {padding-right:5px;}.pr10 {padding-right:10px;}.pr20 {padding-right:20px;}.pb5 {padding-bottom:5px;}.pb10 {padding-bottom:10px;}.pl5 {padding-left:5px;}.pl10 {padding-left:10px;}/*background-color*/.bgd4d4d4 {background-color: #d4d4d4}.bgffffff {background-color: #FFFFFF}.bgf1f1f1 {background-color: #f1f1f1}.bgf5f5f5 {background-color: #f5f5f5}.bgf8f8f8 {background-color: #f8f8f8}.bgf3f5f6 {background-color: #f3f5f6}.bg5d5d5d {background-color: #5d5d5d}.bgfff1d6 {background-color: #fff1d6}.bgffd101 {background-color: #ffd101}.bgeb8300 {background-color: #eb8300}.bg000000 {background-color: #000000}/*text-alignment*/.txtl {text-align:left;}.txtc {text-align:center;}.txtr {text-align:right;}.txtj {text-align:justify; text-justify:distribute-all-lines; text-align-last:justify; text-indent:25px;}/*top-bottom*/.t44 {top:44px;}.b50 {bottom:50px;}/*clearfix*/.clearfix:after {clear:both; content:"."; display:block; height:0; visibility:hidden;}.clearfix {zoom:1;}/*layout*/.name_layout {position:absolute; top:0; right:0; bottom:0; left:0;}.name_scroller {position:relative; width:100%;}/*button*/.name_btn {}/*header*/.name_header {}/*footer*/.name_footer {}/* 弹性盒子属性 --横向*/.rowBox{ display:-webkit-box; display:-webkit-flex; -webkit-flex:row;}.rowCon{ -webkit-box-flex: 1;-webkit-flex: 1;flex: 1; }/* 弹性盒子属性 --竖向*/.verBox{ display:-webkit-flex; -webkit-box-orient: vertical;-webkit-flex-flow: column;flex-flow: column;}.hidden{display : none;}.loading_more{display: block;height: 2.0em;width: 100%;text-align: center;}.loading_more:before {display: inline-block; vertical-align: text-bottom;content: ' ';height: 16px;width: 16px;margin-right: 6px;background: url(../image/loading_more.gif) no-repeat center;-webkit-background-size: contain;background-size: contain;}.loading_more:after {content: '加载更多';}/*边框样式*/.border-t,.border-b,.border-l,.border-r,.border-tb,.border,.border-radius {position: relative;}.border-l:before,.border-r:after {width: 1px;height: 100%;background-color: #dddddd;display: block;content: '';position: absolute;z-index: 2;top: 0;bottom: auto;-webkit-transform-origin: 50% 100%;transform-origin: 50% 100%;pointer-events: none;}.border-t:before,.border-b:after {width: 100%;height: 1px;background-color: #dddddd;display: block;content: '';position: absolute;z-index: 2;left: 0;right: auto;-webkit-transform-origin: 100% 50%;transform-origin: 100% 50%;pointer-events: none;}.border-l:before {right: auto;left: 0;}.border-r:after {right: 0;left: auto;}.border-t:before {bottom: auto;top: 0;}.border-b:after {bottom: 0;top: auto;}.border:after {display: block;content: '';position: absolute;top: 0;bottom: auto;left: 0;right: auto;-webkit-transform-origin: 0 0;-webkit-transform: scale(1);pointer-events: none;border: 1px solid #dddddd;border-radius: 5px;}.border-radius:after {display: block;content: '';position: absolute;top: 0;bottom: auto;left: 0;right: auto;-webkit-transform-origin: 0 0;-webkit-transform: scale(1);pointer-events: none;border: 1px solid #dddddd;border-radius: 50%;}@media screen and (-webkit-min-device-pixel-ratio:1.5) {.border:after,.border-radius:after {right: -100%;bottom: -100%;-webkit-transform: scale(0.5);}}@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {.border-r:after,.border-l:before {-webkit-transform: scaleX(1);transform: scaleX(1);}.border-t:before,.border-b:after {-webkit-transform: scaleY(1);transform: scaleY(1);}}@media only screen and (-webkit-min-device-pixel-ratio: 2) {.border-r:after,.border-l:before {-webkit-transform: scaleX(0.5);transform: scaleX(0.5);}.border-t:before,.border-b:after {-webkit-transform: scaleY(0.5);transform: scaleY(0.5);}}@media only screen and (-webkit-min-device-pixel-ratio: 3) {.border-r:after,.border-l:before {-webkit-transform: scaleX(0.333);transform: scaleX(0.333);}.border-t:before,.border-b:after {-webkit-transform: scaleY(0.333);transform: scaleY(0.333);}}/*单选、多选、开关*/.radio,.checkbox {width: 1.8rem;height: 1.8rem;background-color: #f1f1f1;border: solid 1px #f1f1f1;-webkit-border-radius: 0.6rem;border-radius: 0.6rem;font-size: 0.8rem;margin: 0;padding: 0;position: relative;display: inline-block;vertical-align: top;cursor: default;-webkit-appearance: none;-webkit-user-select: none;user-select: none;-webkit-transition: background-color ease 0.2s;transition: background-color ease 0.2s;}.checkbox {border-radius: 0.1rem;}.radio:checked,.radio.checked,.checkbox:checked,.checkbox.checked {background-color: #ffd101;border: solid 1px #ffd101;text-align: center;background-clip: padding-box;}.radio:checked:before,.radio.checked:before,.checkbox:checked:before,.checkbox.checked:before,.radio:checked:after,.radio.checked:after,.checkbox:checked:after,.checkbox.checked:after {content: '';width: 0.6rem;height: 0.4rem;position: absolute;top: 50%;left: 50%;margin-left: -0.33rem;margin-top: -0.33rem;background: transparent;border: 1px solid #ffffff;border-top: none;border-right: none;z-index: 2;-webkit-border-radius: 0;border-radius: 0;-webkit-transform: rotate(-45deg);transform: rotate(-45deg);}.radio:disabled,.radio.disabled,.checkbox:disabled,.checkbox.disabled {background-color: #dddddd;border: solid 1px #dddddd;}.radio:disabled:before,.radio.disabled:before,.radio:disabled:after,.radio.disabled:after,.checkbox:disabled:before,.checkbox.disabled:before,.checkbox:disabled:after,.checkbox.disabled:after {content: '';width: 0.5rem;height: 0.3rem;position: absolute;top: 50%;left: 50%;margin-left: -0.25rem;margin-top: -0.25rem;background: transparent;border: 1px solid #ffffff;border-top: none;border-right: none;z-index: 2;-webkit-border-radius: 0;border-radius: 0;-webkit-transform: rotate(-45deg);transform: rotate(-45deg);}.switch {width: 4.0rem;height: 2.4rem;position: relative;vertical-align: top;border: 1px solid #f3f3f3;background-color: #f3f3f3;border-radius: 2.3rem;background-clip: content-box;display: inline-block;outline: none;-webkit-appearance: none;appearance: none;-webkit-user-select: none;user-select: none;-webkit-box-sizing: border-box;box-sizing: border-box;-webkit-background-clip: padding-box;background-clip: padding-box;-webkit-transition: all 0.2s linear;transition: all 0.2s linear;}.switch:before {width: 2.4rem;height: 2.2rem;position: absolute;top: 0;left: 0;border-radius: 50%;background-color: #fff;content: '';-webkit-transition: left 0.2s;transition: left 0.2s;}.switch:checked {border-color: #ffd101;background-color: #ffd101;}.switch:checked:before {left: 1.4rem;}/* 添加遮罩 */.mask {position: fixed;width: 100%;height: 100%;top: 0;left: 0;background: rgba(0, 0, 0, 0.3);opacity: 0;z-index: 8;visibility: hidden;-webkit-transition-duration: 300ms;transition-duration: 300ms;}.mask.mask-in {visibility: visible;opacity: 1;}.mask.mask-out {opacity: 0;}/*栅格类*/.row {overflow: hidden;margin: 0;}.row-padded {margin-left: -0.125rem;margin-right: -0.125rem;}.row-padded [class*=aui-col-xs-] {padding: 0.125rem;}.col-xs-1,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9,.col-xs-10,.col-xs-11,.col-xs-5 {position: relative;float: left;}.col-xs-12 { width: 100%; }.col-xs-11 { width: 91.66666667%; }.col-xs-10 { width: 83.33333333%; }.col-xs-9 { width: 75%; }.col-xs-8 { width: 66.66666667%; }.col-xs-7 { width: 58.33333333%; }.col-xs-6 { width: 50%; }.col-xs-5 { width: 41.66666667%; }.col-xs-4 { width: 33.33333333%; }.col-xs-3 { width: 25%; }.col-xs-2 { width: 16.66666667%; }.col-xs-1 { width: 8.33333333%; }.col-5 { width: 20%; }
