122

src/main/webapp/static/weixin/example/example.js

@@ -0,0 +1,297 @@
+/**
+ * Created by jf on 2015/9/11.
+ * Modified by bear on 2016/9/7.
+ */
+$(function () {
+    var pageManager = {
+        $container: $('#container'),
+        _pageStack: [],
+        _configs: [],
+        _pageAppend: function(){},
+        _defaultPage: null,
+        _pageIndex: 1,
+        setDefault: function (defaultPage) {
+            this._defaultPage = this._find('name', defaultPage);
+            return this;
+        },
+        setPageAppend: function (pageAppend) {
+            this._pageAppend = pageAppend;
+            return this;
+        },
+        init: function () {
+            var self = this;
+
+            $(window).on('hashchange', function () {
+                var state = history.state || {};
+                var url = location.hash.indexOf('#') === 0 ? location.hash : '#';
+                var page = self._find('url', url) || self._defaultPage;
+                if (state._pageIndex <= self._pageIndex || self._findInStack(url)) {
+                    self._back(page);
+                } else {
+                    self._go(page);
+                }
+            });
+
+            if (history.state && history.state._pageIndex) {
+                this._pageIndex = history.state._pageIndex;
+            }
+
+            this._pageIndex--;
+
+            var url = location.hash.indexOf('#') === 0 ? location.hash : '#';
+            var page = self._find('url', url) || self._defaultPage;
+            this._go(page);
+            return this;
+        },
+        push: function (config) {
+            this._configs.push(config);
+            return this;
+        },
+        go: function (to) {
+            var config = this._find('name', to);
+            if (!config) {
+                return;
+            }
+            location.hash = config.url;
+        },
+        _go: function (config) {
+            this._pageIndex ++;
+
+            history.replaceState && history.replaceState({_pageIndex: this._pageIndex}, '', location.href);
+
+            var html = $(config.template).html();
+            var $html = $(html).addClass('slideIn').addClass(config.name);
+            $html.on('animationend webkitAnimationEnd', function(){
+                $html.removeClass('slideIn').addClass('js_show');
+            });
+            this.$container.append($html);
+            this._pageAppend.call(this, $html);
+            this._pageStack.push({
+                config: config,
+                dom: $html
+            });
+
+            if (!config.isBind) {
+                this._bind(config);
+            }
+
+            return this;
+        },
+        back: function () {
+            history.back();
+        },
+        _back: function (config) {
+            this._pageIndex --;
+
+            var stack = this._pageStack.pop();
+            if (!stack) {
+                return;
+            }
+
+            var url = location.hash.indexOf('#') === 0 ? location.hash : '#';
+            var found = this._findInStack(url);
+            if (!found) {
+                var html = $(config.template).html();
+                var $html = $(html).addClass('js_show').addClass(config.name);
+                $html.insertBefore(stack.dom);
+
+                if (!config.isBind) {
+                    this._bind(config);
+                }
+
+                this._pageStack.push({
+                    config: config,
+                    dom: $html
+                });
+            }
+
+            stack.dom.addClass('slideOut').on('animationend webkitAnimationEnd', function () {
+                stack.dom.remove();
+            });
+
+            return this;
+        },
+        _findInStack: function (url) {
+            var found = null;
+            for(var i = 0, len = this._pageStack.length; i < len; i++){
+                var stack = this._pageStack[i];
+                if (stack.config.url === url) {
+                    found = stack;
+                    break;
+                }
+            }
+            return found;
+        },
+        _find: function (key, value) {
+            var page = null;
+            for (var i = 0, len = this._configs.length; i < len; i++) {
+                if (this._configs[i][key] === value) {
+                    page = this._configs[i];
+                    break;
+                }
+            }
+            return page;
+        },
+        _bind: function (page) {
+            var events = page.events || {};
+            for (var t in events) {
+                for (var type in events[t]) {
+                    this.$container.on(type, t, events[t][type]);
+                }
+            }
+            page.isBind = true;
+        }
+    };
+
+    function fastClick(){
+        var supportTouch = function(){
+            try {
+                document.createEvent("TouchEvent");
+                return true;
+            } catch (e) {
+                return false;
+            }
+        }();
+        var _old$On = $.fn.on;
+
+        $.fn.on = function(){
+            if(/click/.test(arguments[0]) && typeof arguments[1] == 'function' && supportTouch){ // 只扩展支持touch的当前元素的click事件
+                var touchStartY, callback = arguments[1];
+                _old$On.apply(this, ['touchstart', function(e){
+                    touchStartY = e.changedTouches[0].clientY;
+                }]);
+                _old$On.apply(this, ['touchend', function(e){
+                    if (Math.abs(e.changedTouches[0].clientY - touchStartY) > 10) return;
+
+                    e.preventDefault();
+                    callback.apply(this, [e]);
+                }]);
+            }else{
+                _old$On.apply(this, arguments);
+            }
+            return this;
+        };
+    }
+    function preload(){
+        $(window).on("load", function(){
+            var imgList = [
+                "./images/layers/content.png",
+                "./images/layers/navigation.png",
+                "./images/layers/popout.png",
+                "./images/layers/transparent.gif"
+            ];
+            for (var i = 0, len = imgList.length; i < len; ++i) {
+                new Image().src = imgList[i];
+            }
+        });
+    }
+    function androidInputBugFix(){
+        // .container 设置了 overflow 属性, 导致 Android 手机下输入框获取焦点时, 输入法挡住输入框的 bug
+        // 相关 issue: https://github.com/weui/weui/issues/15
+        // 解决方法:
+        // 0. .container 去掉 overflow 属性, 但此 demo 下会引发别的问题
+        // 1. 参考 http://stackoverflow.com/questions/23757345/android-does-not-correctly-scroll-on-input-focus-if-not-body-element
+        //    Android 手机下, input 或 textarea 元素聚焦时, 主动滚一把
+        if (/Android/gi.test(navigator.userAgent)) {
+            window.addEventListener('resize', function () {
+                if (document.activeElement.tagName == 'INPUT' || document.activeElement.tagName == 'TEXTAREA') {
+                    window.setTimeout(function () {
+                        document.activeElement.scrollIntoViewIfNeeded();
+                    }, 0);
+                }
+            })
+        }
+    }
+    function setJSAPI(){
+        var option = {
+            title: 'WeUI, 为微信 Web 服务量身设计',
+            desc: 'WeUI, 为微信 Web 服务量身设计',
+            link: "https://weui.io",
+            imgUrl: 'https://mmbiz.qpic.cn/mmemoticon/ajNVdqHZLLA16apETUPXh9Q5GLpSic7lGuiaic0jqMt4UY8P4KHSBpEWgM7uMlbxxnVR7596b3NPjUfwg7cFbfCtA/0'
+        };
+
+        $.getJSON('https://weui.io/api/sign?url=' + encodeURIComponent(location.href.split('#')[0]), function (res) {
+            wx.config({
+                beta: true,
+                debug: false,
+                appId: res.appid,
+                timestamp: res.timestamp,
+                nonceStr: res.nonceStr,
+                signature: res.signature,
+                jsApiList: [
+                    'onMenuShareTimeline',
+                    'onMenuShareAppMessage',
+                    'onMenuShareQQ',
+                    'onMenuShareWeibo',
+                    'onMenuShareQZone',
+                    // 'setNavigationBarColor',
+                    'setBounceBackground'
+                ]
+            });
+            wx.ready(function () {
+                /*
+                 wx.invoke('setNavigationBarColor', {
+                 color: '#F8F8F8'
+                 });
+                 */
+                wx.invoke('setBounceBackground', {
+                    'backgroundColor': '#F8F8F8',
+                    'footerBounceColor' : '#F8F8F8'
+                });
+                wx.onMenuShareTimeline(option);
+                wx.onMenuShareQQ(option);
+                wx.onMenuShareAppMessage({
+                    title: 'WeUI',
+                    desc: '为微信 Web 服务量身设计',
+                    link: location.href,
+                    imgUrl: 'https://mmbiz.qpic.cn/mmemoticon/ajNVdqHZLLA16apETUPXh9Q5GLpSic7lGuiaic0jqMt4UY8P4KHSBpEWgM7uMlbxxnVR7596b3NPjUfwg7cFbfCtA/0'
+                });
+            });
+        });
+    }
+    function setPageManager(){
+        var pages = {}, tpls = $('script[type="text/html"]');
+        var winH = $(window).height();
+
+        for (var i = 0, len = tpls.length; i < len; ++i) {
+            var tpl = tpls[i], name = tpl.id.replace(/tpl_/, '');
+            pages[name] = {
+                name: name,
+                url: '#' + name,
+                template: '#' + tpl.id
+            };
+        }
+        pages.home.url = '#';
+
+        for (var page in pages) {
+            pageManager.push(pages[page]);
+        }
+        pageManager
+            .setPageAppend(function($html){
+                var $foot = $html.find('.page__ft');
+                if($foot.length < 1) return;
+
+                if($foot.position().top + $foot.height() < winH){
+                    $foot.addClass('j_bottom');
+                }else{
+                    $foot.removeClass('j_bottom');
+                }
+            })
+            .setDefault('home')
+            .init();
+    }
+
+    function init(){
+        preload();
+        fastClick();
+        androidInputBugFix();
+        setJSAPI();
+        setPageManager();
+
+        window.pageManager = pageManager;
+        window.home = function(){
+            location.hash = '';
+        };
+    }
+    init();
+});

src/main/webapp/static/weixin/example/example.less

@@ -0,0 +1,460 @@
+/* reset */
+
+html, body {
+    height: 100%;
+    -webkit-tap-highlight-color: transparent;
+
+}
+
+body{
+    font-family: -apple-system-font, "Helvetica Neue", Helvetica, sans-serif;
+}
+
+ul{
+    list-style: none;
+}
+
+body, .page {
+    background-color: #F8F8F8;
+}
+
+
+/* lib */
+
+.link{
+    color: #586C94;
+}
+
+
+/* layout */
+
+.container {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    overflow: hidden;
+}
+
+.page {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+    opacity: 0;
+    z-index: 1; // fix 滑动几次后可滚动区域会卡住的问题
+    &.js_show{
+        opacity: 1;
+    }
+}
+
+.page__hd {
+    padding: 40px;
+}
+
+.page__bd {}
+
+.page__bd_spacing {
+    padding: 0 15px;
+}
+
+.page__ft{
+    padding-top: 40px;
+    padding-bottom: 10px;
+    text-align: center;
+    img{
+        height: 19px;
+    }
+    &.j_bottom{
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+    }
+}
+
+.page__title {
+    text-align: left;
+    font-size: 20px;
+    font-weight: 400;
+}
+
+.page__desc {
+    margin-top: 5px;
+    color: #888888;
+    text-align: left;
+    font-size: 14px;
+}
+
+
+/*  widget */
+
+.page.home{
+    @pageHomePadding: 20px;
+    .page__intro-icon{
+        margin-top: -.2em;
+        margin-left: 5px;
+        width: 16px;
+        height: 16px;
+        vertical-align: middle;
+    }
+    .page__title{
+        font-size: 0;
+        margin-bottom: 15px;
+    }
+    .page__bd{
+        img{
+            width: 30px;
+            height: 30px;
+        }
+        li{
+            margin: 10px 0;
+            background-color: #FFFFFF;
+            overflow: hidden;
+            border-radius: 2px;
+            cursor: pointer;
+            &.js_show{
+                .weui-flex{
+                    opacity: .4;
+                }
+                .page__category{
+                    height: auto;
+                }
+                .page__category-content{
+                    opacity: 1;
+                    transform: translateY(0);
+                }
+            }
+            &:first-child{
+                margin-top: 0;
+            }
+        }
+    }
+    .page__category{
+        height: 0;
+        overflow: hidden;
+    }
+    .page__category-content{
+        opacity: 0;
+        transform: translateY(-50%);
+        transition: .3s;
+    }
+    .weui-flex{
+        padding: @pageHomePadding;
+        align-items: center;
+        transition: .3s;
+        //&:active{
+        //    background-color: #ECECEC;
+        //}
+    }
+    .weui-cells{
+        margin-top: 0;
+        &:before, &:after{
+            display: none;
+        }
+    }
+    .weui-cell{
+        padding-left: @pageHomePadding;
+        padding-right: @pageHomePadding;
+        &:before{
+            left: @pageHomePadding;
+            right: @pageHomePadding;
+        }
+    }
+}
+
+.page.button {
+    .page__bd {
+        padding: 0 15px;
+    }
+    .button-sp-area {
+        margin: 0 auto;
+        padding: 15px 0;
+        width: 60%;
+    }
+}
+
+.page.cell {
+    .page__bd {
+        padding-bottom: 30px;
+    }
+}
+
+.page.form {
+    .page__bd {
+        padding-bottom: 30px;
+    }
+}
+
+.page.actionsheet{
+    background-color: #FFFFFF;
+}
+
+.page.dialog {
+    background-color: #FFFFFF;
+    .page__bd {
+        padding: 0 15px;
+    }
+}
+
+.page.msg,
+.page.msg_success,
+.page.msg_warn {
+    background-color: #FFFFFF;
+}
+
+.page.toast{
+    background-color: #FFFFFF;
+}
+
+.page.panel {
+    .page__bd{
+        padding-bottom:20px;
+    }
+}
+
+.page.article {
+    background-color: #FFFFFF;
+}
+
+.page.icons {
+    text-align: center;
+    .page__bd {
+        padding: 0 40px;
+        text-align: left;
+    }
+    .icon-box{
+        margin-bottom: 25px;
+        display: flex;
+        align-items: center;
+        i{
+            margin-right: 18px;
+        }
+    }
+    .icon-box__ctn{
+        flex-shrink: 100;
+    }
+    .icon-box__title{
+        font-weight: normal;
+    }
+    .icon-box__desc{
+        margin-top: 6px;
+        font-size: 12px;
+        color: #888888;
+    }
+    .icon_sp_area {
+        margin-top: 10px;
+        text-align: left;
+        i:before{
+            margin-bottom: 5px;
+        }
+    }
+}
+
+.page.flex {
+    .placeholder {
+        margin: 5px;
+        padding: 0 10px;
+        background-color: #EBEBEB;
+        height: 2.3em;
+        line-height: 2.3em;
+        text-align: center;
+        color: #CFCFCF;
+    }
+}
+
+.page.loadmore{
+    background-color: #FFFFFF;
+}
+
+.page.layers{
+    @layerBaseTransform: translateX(15px) rotateX(45deg) rotateZ(10deg) skew(-15deg);
+    @layerStartPos: 120px;
+    @layerSpacing: 80px;
+    @layerSmallStartPos: 140px;
+    @layerSmallSpacing: 60px;
+
+    overflow-x: hidden;
+    perspective: 1000px;
+    .page__hd{
+        @media only screen and (max-width: 320px) {
+            padding-left: 20px;
+            padding-right: 20px;
+        }
+    }
+    .page__bd{
+        position: relative;
+    }
+    .page__desc{
+        min-height: 1.6 * 3em;
+    }
+    .layers__layer{
+        position: absolute;
+        left: 50%;
+        width: 150px;
+        height: 266px;
+        margin-left: -75px;
+        box-sizing: border-box;
+        transition: .5s;
+        background: url(images/layers/transparent.gif) no-repeat center center;
+        background-size: contain;
+        font-size: 14px;
+        color: #FFFFFF;
+        span{
+            position: absolute;
+            bottom: 5px;
+            left: 0;
+            right: 0;
+            text-align: center;
+            transition: .5s;
+        }
+        &:last-child{
+            span{
+                color: #AAAAAA;
+            }
+        }
+        &.j_hide{
+            opacity: 0;
+        }
+        &.j_pic{
+            span{
+                color: transparent;
+            }
+        }
+        @media only screen and (min-width: 375px) and (min-height: 603px) {
+            width: 180px;
+            height: 320px;
+            margin-left: -90px;
+        }
+        @media only screen and (min-width: 414px) and (min-height: 640px) {
+            width: 200px;
+            height: 355px;
+            margin-left: -100px;
+        }
+    }
+    .layers__layer_popout{
+        border: 1px solid rgba(203, 203, 203, .5);
+        z-index: 4;
+        &.j_transform{
+            transform: @layerBaseTransform translateZ(@layerStartPos);
+            @media only screen and (max-width: 320px) {
+                transform: @layerBaseTransform translateZ(@layerSmallStartPos);
+            }
+        }
+        &.j_pic{
+            border-color: transparent;
+            background-image: url(images/layers/popout.png);
+        }
+    }
+    .layers__layer_mask {
+        background-color: rgba(0, 0, 0, 0.5);
+        z-index: 3;
+        &.j_transform{
+            transform: @layerBaseTransform translateZ(@layerStartPos - @layerSpacing);
+            @media only screen and (max-width: 320px) {
+                transform: @layerBaseTransform translateZ(@layerSmallStartPos - @layerSmallSpacing);
+            }
+        }
+    }
+    .layers__layer_navigation {
+        background-color: rgba(40, 187, 102, 0.5);
+        z-index: 2;
+        &.j_transform{
+            transform: @layerBaseTransform translateZ(@layerStartPos - 2 * @layerSpacing);
+            @media only screen and (max-width: 320px) {
+                transform: @layerBaseTransform translateZ(@layerSmallStartPos - 2 * @layerSmallSpacing);
+            }
+        }
+        &.j_pic{
+            background-color: transparent;
+            background-image: url(images/layers/navigation.png);
+        }
+    }
+    .layers__layer_content{
+        background-color: #FFFFFF;
+        z-index: 1;
+        &.j_transform{
+            transform: @layerBaseTransform translateZ(@layerStartPos - 3 * @layerSpacing);
+            @media only screen and (max-width: 320px) {
+                transform: @layerBaseTransform translateZ(@layerSmallStartPos - 3 * @layerSmallSpacing);
+            }
+        }
+        &.j_pic{
+            background-image: url(images/layers/content.png);
+        }
+    }
+}
+
+.page.searchbar{
+    .searchbar-result {
+        display: none;
+        margin-top: 0;
+        font-size: 14px;
+        .weui-cell__bd{
+            padding:2px 0 2px 20px;
+            color:#666;
+        }
+    }
+}
+
+.page.actionsheet{
+    overflow: hidden;
+}
+
+.page.picker{
+    background-color: #FFFFFF;
+    overflow: hidden;
+}
+
+.page.gallery{
+    overflow: hidden;
+}
+
+
+/* animation */
+
+@keyframes slideIn {
+    from {
+        transform: translate3d(100%, 0, 0);
+        opacity: 0;
+    }
+    to {
+        transform: translate3d(0, 0, 0);
+        opacity: 1;
+    }
+}
+
+@keyframes slideOut {
+    from {
+        transform: translate3d(0, 0, 0);
+        opacity: 1;
+    }
+    to {
+        transform: translate3d(100%, 0, 0);
+        opacity: 0;
+    }
+}
+
+.page.slideIn {
+    animation: slideIn .2s forwards;
+}
+
+.page.slideOut {
+    animation: slideOut .2s forwards;
+}
+
+// iphone x
+@iphonexSafeGap:44px;
+@media only screen
+and (device-width : 375px)
+and (device-height : 812px)
+and (-webkit-device-pixel-ratio : 3) 
+and (orientation : landscape) {
+    .page{
+        padding:0 @iphonexSafeGap;
+    }
+}

src/main/webapp/static/weixin/example/index.html

@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="zh-cmn-Hans">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
+    <title>WeUI</title>
+    <link rel="stylesheet" href="../style/weui.css"/>
+    <link rel="stylesheet" href="./example.css"/>
+    <link rel="stylesheet" href="../"/>
+</head>
+<body ontouchstart>
+    <div class="weui-toptips weui-toptips_warn js_tooltips">错误提示</div>
+
+    <div class="container" id="container"></div>
+
+    <link rel="import" href="./fragment/home.html">
+    <link rel="import" href="./fragment/button.html">
+    <link rel="import" href="./fragment/list.html">
+    <link rel="import" href="./fragment/input.html">
+    <link rel="import" href="./fragment/toast.html">
+    <link rel="import" href="./fragment/dialog.html">
+    <link rel="import" href="./fragment/progress.html">
+    <link rel="import" href="./fragment/msg.html">
+    <link rel="import" href="./fragment/msg_success.html">
+    <link rel="import" href="./fragment/msg_warn.html">
+    <link rel="import" href="./fragment/article.html">
+    <link rel="import" href="./fragment/navbar.html">
+    <link rel="import" href="./fragment/tabbar.html">
+    <link rel="import" href="./fragment/panel.html">
+    <link rel="import" href="./fragment/actionsheet.html">
+    <link rel="import" href="./fragment/icons.html">
+    <link rel="import" href="./fragment/searchbar.html">
+    <link rel="import" href="./fragment/picker.html">
+    <link rel="import" href="./fragment/footer.html">
+    <link rel="import" href="./fragment/gallery.html">
+    <link rel="import" href="./fragment/flex.html">
+    <link rel="import" href="./fragment/loadmore.html">
+    <link rel="import" href="./fragment/layers.html">
+    <link rel="import" href="./fragment/uploader.html">
+    <link rel="import" href="./fragment/preview.html">
+    <link rel="import" href="./fragment/grid.html">
+    <link rel="import" href="./fragment/badge.html">
+    <link rel="import" href="./fragment/slider.html">
+    <script src="./zepto.min.js"></script>
+    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
+    <script type="text/javascript" src="jweixin-1.0.0.js"></script>
+    <script src="https://res.wx.qq.com/open/libs/weuijs/1.0.0/weui.min.js"></script>
+    <script src="./example.js"></script>
+</body>
+</html>

src/main/webapp/static/weixin/style/base/fn.less

@@ -0,0 +1,34 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* Unless required by applicable law or agreed to in writing, software distributed under the License is
+* distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+* either express or implied. See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
+// mixin
+@import "./mixin/mobile";
+@import "./mixin/setOnepx";
+@import "./mixin/setArrow";
+@import "./mixin/text";
+
+
+// variable
+@import "./variable/global";
+@import "./variable/color";
+
+
+@import "./variable/weui-cell";
+@import "./variable/weui-button";
+@import "./variable/weui-msg";
+@import "./variable/weui-grid";
+@import "./variable/weui-progress";
+@import "./variable/weui-dialog";

src/main/webapp/static/weixin/style/base/mixin/mobile.less

@@ -0,0 +1,23 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* Unless required by applicable law or agreed to in writing, software distributed under the License is
+* distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+* either express or implied. See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
+.setTapColor(@c:rgba(0,0,0,0)) {
+    -webkit-tap-highlight-color: @c;
+}
+
+
+
+

src/main/webapp/static/weixin/style/base/mixin/setArrow.less

@@ -0,0 +1,53 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* Unless required by applicable law or agreed to in writing, software distributed under the License is
+* distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+* either express or implied. See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
+._setArrow(@arrowsize, @borderColor, @borderWidth){
+    display: inline-block;
+    height: @arrowsize;
+    width: @arrowsize;
+    border-width: @borderWidth @borderWidth 0 0;
+    border-color: @borderColor;
+    border-style: solid;
+}
+
+.setArrow(@direction, @arrowsize, @borderColor, @borderWidth) when (@direction = top) {
+    ._setArrow(@arrowsize, @borderColor, @borderWidth);
+    transform: matrix(0.71,-0.71,0.71,0.71,0,0); // rotate(-45deg)
+}
+
+.setArrow(@direction, @arrowsize, @borderColor,@borderWidth) when (@direction = right) {
+    ._setArrow(@arrowsize, @borderColor, @borderWidth);
+    transform: matrix(0.71,0.71,-0.71,0.71,0,0); // rotate(45deg);
+
+    position: relative;
+    top: -2px;
+}
+
+.setArrow(@direction, @arrowsize, @borderColor,@borderWidth) when (@direction = down) {
+    ._setArrow(@arrowsize, @borderColor, @borderWidth);
+    transform: matrix(-0.71,0.71,-0.71,-0.71,0,0); // rotate(135deg);
+
+    position: relative;
+    top: -3px;
+}
+
+.setArrow(@direction, @arrowsize, @borderColor,@borderWidth) when (@direction = left) {
+    ._setArrow(@arrowsize, @borderColor, @borderWidth);
+    transform: matrix(-0.71,-0.71,0.71,-0.71,0,0); // rotate(-135deg);
+
+    position: relative;
+    top: -2px;
+}

src/main/webapp/static/weixin/style/base/mixin/setOnepx.less

@@ -0,0 +1,67 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* Unless required by applicable law or agreed to in writing, software distributed under the License is
+* distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+* either express or implied. See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
+.setTopLine(@c: #C7C7C7) {
+    content: " ";
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    height: 1px;
+    border-top: 1px solid @c;
+    color: @c;
+    transform-origin: 0 0;
+    transform: scaleY(0.5);
+}
+
+.setBottomLine(@c: #C7C7C7) {
+    content: " ";
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    height: 1px;
+    border-bottom: 1px solid @c;
+    color: @c;
+    transform-origin: 0 100%;
+    transform: scaleY(0.5);
+}
+
+.setLeftLine(@c: #C7C7C7) {
+    content: " ";
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 1px;
+    bottom: 0;
+    border-left: 1px solid @c;
+    color: @c;
+    transform-origin: 0 0;
+    transform: scaleX(0.5);
+}
+
+.setRightLine(@c: #C7C7C7) {
+    content: " ";
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 1px;
+    bottom: 0;
+    border-right: 1px solid @c;
+    color: @c;
+    transform-origin: 100% 0;
+    transform: scaleX(0.5);
+}

src/main/webapp/static/weixin/style/base/mixin/text.less

@@ -0,0 +1,40 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* Unless required by applicable law or agreed to in writing, software distributed under the License is
+* distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+* either express or implied. See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
+.ellipsis(@w:auto) {
+    width: @w;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    word-wrap: normal;
+}
+
+.ellipsisLn(@line) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: @line;
+}
+.text_wrap() {
+    word-wrap:break-word;
+    word-break:break-all;
+}
+.hyphens() {
+    word-wrap:break-word;
+    -webkit-hyphens:auto;
+    hyphens:auto;
+}

src/main/webapp/static/weixin/style/base/reset.less

@@ -0,0 +1,41 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* Unless required by applicable law or agreed to in writing, software distributed under the License is
+* distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+* either express or implied. See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
+@import "fn";
+
+html {
+    -ms-text-size-adjust: 100%;
+    -webkit-text-size-adjust: 100%;
+}
+
+body {
+    line-height: 1.6;
+    font-family: @weuiFontDefault;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+}
+
+a img {
+    border: 0;
+}
+
+a {
+    text-decoration: none;
+    .setTapColor();
+}

src/main/webapp/static/weixin/style/base/variable/color.less

@@ -0,0 +1,40 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+*
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+*
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+*
+*       http://opensource.org/licenses/MIT
+*
+* Unless required by applicable law or agreed to in writing, software distributed under the License is
+* distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+* either express or implied. See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
+// color
+@weuiColorPrimary: #287DE1;
+@weuiColorWarn: #E64340;
+
+// link
+@weuiLinkColorDefault: #586C94;
+
+// background
+@weuiBgColorDefault: #EFEFF4;
+@weuiBgColorActive: #ECECEC;
+
+// line
+@weuiLineColorLight: #E5E5E5;
+@weuiLineColorDark: #BCBAB6;
+
+// text
+@weuiTextColorTitle: #000000;
+@weuiTextColorTips: #B2B2B2;
+@weuiTextColorWarn: @weuiColorWarn;
+@weuiTextColorGray: #999999;
+
+
+
+

src/main/webapp/static/weixin/style/base/variable/global.less

@@ -0,0 +1,21 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* Unless required by applicable law or agreed to in writing, software distributed under the License is
+* distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+* either express or implied. See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
+// font
+@weuiFontEN:-apple-system-font,"Helvetica Neue";
+@weuiFontCN:"PingFang SC","Hiragino Sans GB","Microsoft YaHei";
+@weuiFontSans:sans-serif;
+@weuiFontDefault:@weuiFontEN,@weuiFontSans;

src/main/webapp/static/weixin/style/base/variable/weui-button.less

@@ -0,0 +1,52 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+*
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+*
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+*
+*       http://opensource.org/licenses/MIT
+*
+* Unless required by applicable law or agreed to in writing, software distributed under the License is
+* distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+* either express or implied. See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
+@weuiBtnHeight:46px;
+@weuiBtnFontSize:18px;
+@weuiBtnFontColor:#FFFFFF;
+@weuiBtnActiveFontColor:rgba(255,255,255,.6);
+@weuiBtnDisabledFontColor:rgba(255,255,255,.6);
+@weuiBtnBorderRadius:5px;
+@weuiBtnDefaultGap:15px;
+
+@weuiBtnMiniFontSize:13px;
+@weuiBtnMiniHeight:2.3;
+
+@weuiBtnDefaultFontColor:#000000;
+@weuiBtnDefaultActiveFontColor:rgba(0,0,0,.6);
+@weuiBtnDefaultDisabledFontColor:rgba(0,0,0,.3);
+
+@weuiBtnDefaultBg:#F8F8F8;
+@weuiBtnDefaultActiveBg:#E5E5E5;
+@weuiBtnDefaultDisabledBg:#F7F7F7;
+
+@weuiBtnPrimaryBg:#287DE1;
+@weuiBtnPrimaryActiveBg:#3C7FC8;
+@weuiBtnPrimaryDisabledBg:#A6C5E5;
+
+@weuiBtnWarnBg:#E64340;
+@weuiBtnWarnActiveBg:#CE3C39;
+@weuiBtnwarnDisabledBg:#EC8B89;
+
+@weuiBtnPlainPrimaryColor:rgba(40,125,225,1);
+@weuiBtnPlainPrimaryBorderColor:rgba(40,125,225,1);
+@weuiBtnPlainPrimaryActiveColor:rgba(40,125,225,.6);
+@weuiBtnPlainPrimaryActiveBorderColor:rgba(40,125,225,.6);
+
+@weuiBtnPlainDefaultColor:rgba(53,53,53,1);
+@weuiBtnPlainDefaultBorderColor:rgba(53,53,53,1);
+@weuiBtnPlainDefaultActiveColor:rgba(53,53,53,.6);
+@weuiBtnPlainDefaultActiveBorderColor:rgba(53,53,53,.6);

src/main/webapp/static/weixin/style/base/variable/weui-cell.less

@@ -0,0 +1,38 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* Unless required by applicable law or agreed to in writing, software distributed under the License is
+* distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+* either express or implied. See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
+@weuiCellBg:#FFFFFF;
+@weuiCellBorderColor:#e5e5e5;
+@weuiCellGapV:10px;
+@weuiCellGapH:15px;
+@weuiCellInnerGapH:.35em;
+@weuiCellHeight: 45px;
+@weuiCellFontSize:17px;
+@weuiCellTipsFontSize:14px;
+@weuiCellLabelWidth:105px;
+
+@weuiCellLineHeight: unit((@weuiCellHeight - 2 * @weuiCellGapV) / @weuiCellFontSize); // 高度减去上下padding的行高
+@weuiCellsMarginTop:unit(20 / @weuiCellFontSize, em);
+
+// weui switch
+@weuiSwitchHeight: 32px;
+
+// weui uploader
+@weuiUploaderBorderColor:#D9D9D9;
+@weuiUploaderActiveBorderColor:#999999;
+@weuiUploaderFileSpacing: 9px;
+@weuiUploaderSize: 79px;
+@weuiUploaderBorderWidth: 1px;

src/main/webapp/static/weixin/style/base/variable/weui-dialog.less

@@ -0,0 +1,21 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* Unless required by applicable law or agreed to in writing, software distributed under the License is
+* distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+* either express or implied. See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
+@weuiDialogBackgroundColor: #FFFFFF;
+@weuiDialogLineColor: #D5D5D6;
+@weuiDialogLinkColor: #467DB9;
+@weuiDialogLinkActiveBc: #EEEEEE;
+@weuiDialogGapWidth: 1.6em;

src/main/webapp/static/weixin/style/base/variable/weui-grid.less

@@ -0,0 +1,20 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* Unless required by applicable law or agreed to in writing, software distributed under the License is
+* distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+* either express or implied. See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
+@weuiGridBorderColor:#D9D9D9;
+@weuiGridFontSize: 14px;
+@weuiGridIconSize: 28px;
+@weuiGridColumnCount: 3;

src/main/webapp/static/weixin/style/base/variable/weui-msg.less

@@ -0,0 +1,23 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* Unless required by applicable law or agreed to in writing, software distributed under the License is
+* distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+* either express or implied. See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
+@weuiMsgPaddingTop:36px;
+@weuiMsgIconGap:30px;
+@weuiMsgTitleGap:5px;
+@weuiMsgTextGap:25px;
+@weuiMsgOprGap:25px;
+@weuiMsgExtraAreaGap:15px;
+@weuiMsgExtraAreaOfMinHeight:438px;

src/main/webapp/static/weixin/style/base/variable/weui-progress.less

@@ -0,0 +1,21 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* Unless required by applicable law or agreed to in writing, software distributed under the License is
+* distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+* either express or implied. See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
+@weuiProgressBg: #EBEBEB;
+@weuiProgressColor: #0082EF;
+@weuiProgressHeight: 3px;
+@weuiProgressCloseBg: #EF4F4F;
+@weuiProgressActiveBg: #C13E3E;

src/main/webapp/static/weixin/style/icon/weui-icon_font.less

@@ -0,0 +1,105 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* Unless required by applicable law or agreed to in writing, software distributed under the License is
+* distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+* either express or implied. See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
+@import "weui-font";
+
+[class^="weui-icon_"]:before, [class*=" weui-icon_"]:before {
+    margin: 0;
+}
+.weui-icon-success {
+    font-size: 23px;
+    color: #09BB07;
+}
+.weui-icon-waiting {
+    font-size: 23px;
+    color: #10AEFF;
+}
+.weui-icon-warn {
+    font-size: 23px;
+    color: #F43530;
+}
+.weui-icon-info {
+    font-size: 23px;
+    color: #10AEFF;
+}
+
+.weui-icon-success-circle {
+    font-size: 23px;
+    color: #09BB07;
+}
+.weui-icon-success-no-circle {
+    font-size: 23px;
+    color: #09BB07;
+}
+.weui-icon-waiting-circle {
+    font-size: 23px;
+    color: #10AEFF;
+}
+.weui-icon-circle {
+    font-size: 23px;
+    color: #C9C9C9;
+}
+.weui-icon-download {
+    font-size: 23px;
+    color: #09BB07;
+}
+
+.weui-icon-info-circle {
+    font-size: 23px;
+    color: #09BB07;
+}
+
+.weui-icon-safe-success {
+    color: #09BB07;
+}
+.weui-icon-safe-warn {
+    color: #FFBE00;
+}
+
+.weui-icon-cancel {
+    color: #F43530;
+    font-size: 22px;
+}
+
+.weui-icon-search {
+    color: #B2B2B2;
+    font-size: 14px;
+}
+
+.weui-icon-clear {
+    color: #B2B2B2;
+    font-size: 14px;
+}
+
+.weui-icon-delete {
+    &.weui-icon_gallery-delete{
+        color:#FFFFFF;
+        font-size:22px;
+    }
+}
+
+.weui-icon_msg {
+    font-size: 93px;
+    &.weui-icon-warn {
+        color: #F76260;
+    }
+}
+.weui-icon_msg-primary {
+    font-size: 93px;
+    &.weui-icon-warn {
+        color: #FFBE00;
+    }
+}

src/main/webapp/static/weixin/style/weui.less

@@ -0,0 +1,89 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* Unless required by applicable law or agreed to in writing, software distributed under the License is
+* distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+* either express or implied. See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
+@import "./base/reset";
+
+// icon font
+@import "./icon/weui-icon_font";
+
+
+// button
+@import "./widget/weui-button/weui-button";
+
+// cell
+@import "./widget/weui-cell/weui-cell_global";
+@import "./widget/weui-cell/weui-cell_swiped";
+
+@import "./widget/weui-cell/weui-access";
+@import "./widget/weui-cell/weui-check";
+@import "./widget/weui-cell/weui-form";
+@import "./widget/weui-cell/weui-gallery";
+@import "./widget/weui-cell/weui-switch";
+@import "./widget/weui-cell/weui-uploader";
+
+// msg
+@import "./widget/weui-page/weui-msg";
+
+// article
+@import "./widget/weui-page/weui-article";
+
+// tab
+@import "./widget/weui-tab/weui-tab";
+
+// progress
+@import "./widget/weui-progress/weui-progress";
+
+// panel
+@import "./widget/weui-panel/weui-panel";
+
+// media box
+@import "./widget/weui-media-box/weui-media-box";
+
+// grid
+@import "./widget/weui-grid/weui-grid";
+
+// copyright
+@import "./widget/weui-footer/weui-footer";
+
+
+// flex
+@import "./widget/weui-flex/weui-flex";
+
+// tips
+@import "./widget/weui-tips/weui-dialog";
+@import "./widget/weui-tips/weui-toast";
+@import "./widget/weui-tips/weui-mask";
+@import "./widget/weui-tips/weui-actionsheet";
+@import "./widget/weui-tips/weui-loadmore";
+@import "./widget/weui-tips/weui-badge";
+
+//searchbar
+@import "./widget/weui-searchbar/weui-searchbar";
+
+// picker
+@import "./widget/weui-picker/weui-picker";
+
+// animate
+@import "./widget/weui-animate/weui-animate";
+
+// agree
+@import "./widget/weui-agree/weui-agree";
+
+// loading
+@import "./widget/weui-loading/weui-loading";
+
+// slider
+@import "./widget/weui-slider/weui-slider";

src/main/webapp/static/weixin/style/widget/weui-agree/weui-agree.less

@@ -0,0 +1,74 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* Unless required by applicable law or agreed to in writing, software distributed under the License is
+* distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+* either express or implied. See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
+@import "../../base/fn";
+
+.weui-agree{
+    display: block;
+    padding: .5em 15px;
+    font-size :13px;
+
+    a{
+        color: @weuiLinkColorDefault;
+    }
+}
+.weui-agree__text{
+    color: @weuiTextColorGray;
+}
+.weui-agree__checkbox{
+    appearance: none;
+    outline: 0;
+    font-size: 0;
+
+    border: 1px solid #D1D1D1;
+    background-color: #FFFFFF;
+    border-radius: 3px;
+    width: 13px;
+    height: 13px;
+    position: relative;
+
+    vertical-align: 0;
+    top: 2px;
+
+    &:checked{
+        &:before{
+            font-family: "weui";
+            font-style: normal;
+            font-weight: normal;
+            font-variant: normal;
+            text-transform: none;
+            text-align: center;
+            speak: none;
+            display: inline-block;
+            vertical-align: middle;
+            text-decoration: inherit;
+            content: "\EA08";
+            color: #4C84C4;
+            font-size: 13px;
+
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%,-48%) scale(.73);
+        }
+    }
+    &:disabled{
+        background-color:#E1E1E1;
+        &:before{
+            color:#ADADAD;
+        }
+    }
+}

src/main/webapp/static/weixin/style/widget/weui-animate/weui-animate.less

@@ -0,0 +1,71 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* Unless required by applicable law or agreed to in writing, software distributed under the License is
+* distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+* either express or implied. See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
+@import "../../base/fn";
+
+@keyframes slideUp {
+    from {
+        transform: translate3d(0, 100%, 0);
+    }
+
+    to {
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+.weui-animate-slide-up {
+    animation: slideUp ease .3s forwards;
+}
+
+@keyframes slideDown {
+    from {
+        transform: translate3d(0, 0, 0);
+    }
+
+    to {
+        transform: translate3d(0, 100%, 0);
+    }
+}
+
+.weui-animate-slide-down {
+    animation: slideDown ease .3s forwards;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+.weui-animate-fade-in {
+    animation: fadeIn ease .3s forwards;
+}
+
+@keyframes fadeOut {
+    from {
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+    }
+}
+
+.weui-animate-fade-out {
+    animation: fadeOut ease .3s forwards;
+}

src/main/webapp/static/weixin/style/widget/weui-button/weui-btn_default.less

@@ -0,0 +1,29 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* Unless required by applicable law or agreed to in writing, software distributed under the License is
+* distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+* either express or implied. See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
+@import "../../base/fn";
+
+.weui-btn_default {
+    color: @weuiBtnDefaultFontColor;
+    background-color: @weuiBtnDefaultBg;
+    &:not(.weui-btn_disabled):visited {
+        color: @weuiBtnDefaultFontColor;
+    }
+    &:not(.weui-btn_disabled):active {
+        color: @weuiBtnDefaultActiveFontColor;
+        background-color: @weuiBtnDefaultActiveBg;
+    }
+}

src/main/webapp/static/weixin/style/widget/weui-button/weui-btn_disabled.less

@@ -0,0 +1,31 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* Unless required by applicable law or agreed to in writing, software distributed under the License is
+* distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+* either express or implied. See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
+@import "../../base/fn";
+
+.weui-btn_disabled {
+    color: @weuiBtnDisabledFontColor;
+    &.weui-btn_default {
+        color: @weuiBtnDefaultDisabledFontColor;
+        background-color: @weuiBtnDefaultDisabledBg;
+    }
+    &.weui-btn_primary {
+        background-color: @weuiBtnPrimaryDisabledBg;
+    }
+    &.weui-btn_warn {
+        background-color: @weuiBtnwarnDisabledBg;
+    }
+}

src/main/webapp/static/weixin/style/widget/weui-button/weui-btn_global.less

@@ -0,0 +1,56 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+*
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+*
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+*
+*       http://opensource.org/licenses/MIT
+*
+* Unless required by applicable law or agreed to in writing, software distributed under the License is
+* distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+* either express or implied. See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
+@import "../../base/fn";
+
+.weui-btn {
+    position: relative;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: 14px;
+    padding-right: 14px;
+    box-sizing: border-box;
+    font-size: @weuiBtnFontSize;
+    text-align: center;
+    text-decoration: none;
+    color: @weuiBtnFontColor;
+    line-height: unit(@weuiBtnHeight/@weuiBtnFontSize);
+    border-radius: @weuiBtnBorderRadius;
+    .setTapColor();
+    overflow: hidden;
+    &:after {
+        content: " ";
+        width: 200%;
+        height: 200%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        border: 1px solid rgba(0, 0, 0, .2);
+        transform: scale(.5);
+        transform-origin: 0 0;
+        box-sizing: border-box;
+        border-radius: @weuiBtnBorderRadius*2;
+    }
+}
+.weui-btn_inline {
+    display: inline-block;
+}
+.weui-btn_primary {
+    &:after {
+        border: none;
+    }
+}

src/main/webapp/static/weixin/style/widget/weui-button/weui-btn_loading.less

@@ -0,0 +1,32 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* Unless required by applicable law or agreed to in writing, software distributed under the License is
+* distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+* either express or implied. See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
+@import "../../base/fn";
+
+.weui-btn_loading{
+	.weui-loading{
+		margin:-.2em .34em 0 0;
+	}
+    &.weui-btn_primary, &.weui-btn_warn {
+        color: @weuiBtnActiveFontColor;
+    }
+	&.weui-btn_primary{
+        background-color: @weuiBtnPrimaryActiveBg;
+	}
+	&.weui-btn_warn{
+        background-color: @weuiBtnWarnActiveBg;
+	}
+}

src/main/webapp/static/weixin/style/widget/weui-button/weui-btn_plain.less

@@ -0,0 +1,45 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+*
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+*
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+*
+*       http://opensource.org/licenses/MIT
+*
+* Unless required by applicable law or agreed to in writing, software distributed under the License is
+* distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+* either express or implied. See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
+@import "../../base/fn";
+
+.weui-btn_plain-primary {
+    color: @weuiBtnPlainPrimaryColor;
+    border: 1px solid @weuiBtnPlainPrimaryBorderColor;
+    &:not(.weui-btn_plain-disabled):active {
+        color:@weuiBtnPlainPrimaryActiveColor;
+        border-color: @weuiBtnPlainPrimaryActiveBorderColor;
+    }
+    &:after {
+        border-width: 0;
+    }
+}
+
+.weui-btn_plain-default {
+    color: @weuiBtnPlainDefaultColor;
+    border: 1px solid @weuiBtnPlainDefaultBorderColor;
+    &:not(.weui-btn_plain-disabled):active {
+        color:@weuiBtnPlainDefaultActiveColor;
+        border-color: @weuiBtnPlainDefaultActiveBorderColor;
+    }
+    &:after {
+        border-width: 0;
+    }
+}
+.weui-btn_plain-disabled{
+    color:rgba(0,0,0,.2);
+    border-color:rgba(0,0,0,.2);
+}

src/main/webapp/static/weixin/style/widget/weui-button/weui-btn_primary.less

@@ -0,0 +1,28 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* Unless required by applicable law or agreed to in writing, software distributed under the License is
+* distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+* either express or implied. See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
+@import "../../base/fn";
+
+.weui-btn_primary {
+    background-color: @weuiBtnPrimaryBg;
+    &:not(.weui-btn_disabled):visited {
+        color: @weuiBtnFontColor;
+    }
+    &:not(.weui-btn_disabled):active {
+        color: @weuiBtnActiveFontColor;
+        background-color: @weuiBtnPrimaryActiveBg;
+    }
+}

src/main/webapp/static/weixin/style/widget/weui-button/weui-btn_warn.less

@@ -0,0 +1,28 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* Unless required by applicable law or agreed to in writing, software distributed under the License is
+* distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+* either express or implied. See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
+@import "../../base/fn";
+
+.weui-btn_warn {
+    background-color: @weuiBtnWarnBg;
+    &:not(.weui-btn_disabled):visited {
+        color: @weuiBtnFontColor;
+    }
+    &:not(.weui-btn_disabled):active {
+        color: @weuiBtnActiveFontColor;
+        background-color: @weuiBtnWarnActiveBg;
+    }
+}

src/main/webapp/static/weixin/style/widget/weui-button/weui-button.less

@@ -0,0 +1,77 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* Unless required by applicable law or agreed to in writing, software distributed under the License is
+* distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+* either express or implied. See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
+@import "../../base/fn";
+@import "weui-btn_global";
+@import "weui-btn_default";
+@import "weui-btn_primary";
+@import "weui-btn_warn";
+@import "weui-btn_disabled";
+@import "weui-btn_loading";
+@import "weui-btn_plain";
+
+button, input {
+    &.weui-btn {
+        width: 100%;
+        border-width: 0;
+        outline: 0;
+        -webkit-appearance: none;
+        &:focus {
+            outline: 0;
+        }
+    }
+    &.weui-btn_inline,&.weui-btn_mini {
+        width: auto;
+    }
+    &.weui-btn_plain-primary,&.weui-btn_plain-default{
+        border-width: 1px;
+        background-color: transparent;
+    }
+}
+
+.weui-btn_mini {
+    display: inline-block;
+    padding: 0 1.32em;
+    line-height: @weuiBtnMiniHeight;
+    font-size: @weuiBtnMiniFontSize;
+}
+
+
+/*gap between btn*/
+.weui-btn + .weui-btn {
+    margin-top: @weuiBtnDefaultGap;
+}
+
+.weui-btn.weui-btn_inline + .weui-btn.weui-btn_inline {
+    margin-top: auto;
+    margin-left: @weuiBtnDefaultGap;
+}
+
+.weui-btn-area {
+    margin: @weuiCellsMarginTop @weuiBtnDefaultGap .3em; 
+}
+.weui-btn-area_inline {
+    display: flex;
+    .weui-btn {
+        margin-top: auto;
+        margin-right: @weuiBtnDefaultGap;
+        width: 100%;
+        flex: 1;
+        &:last-child {
+            margin-right: 0;
+        }
+    }
+}

src/main/webapp/static/weixin/style/widget/weui-cell/weui-access.less

@@ -0,0 +1,48 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* Unless required by applicable law or agreed to in writing, software distributed under the License is
+* distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+* either express or implied. See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
+@import "../../base/fn";
+
+.weui-cell_access {
+    .setTapColor();
+    color: inherit;
+    &:active {
+        background-color: #ECECEC;
+    }
+    .weui-cell__ft {
+        padding-right: 13px;
+        position: relative;
+        &:after {
+            content: " ";
+            .setArrow(right, 6px, #C8C8CD, 2px);
+            position: absolute;
+            top: 50%;
+            margin-top: -4px;
+            right: 2px;
+        }
+    }
+}
+.weui-cell_link{
+    color: @weuiLinkColorDefault;
+    font-size: 14px;
+
+    // 由于weui-cell:first-child的:before为隐藏，所以这里要重新显示出来
+    &:first-child{
+        &:before{
+            display: block;
+        }
+    }
+}

src/main/webapp/static/weixin/style/widget/weui-cell/weui-cell_global.less

@@ -0,0 +1,92 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* Unless required by applicable law or agreed to in writing, software distributed under the License is
+* distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+* either express or implied. See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
+@import "../../base/fn";
+
+/*
+z-index:
+0: .weui-swiped-btn
+1: .weui-cell_swiped .weui-cell__bd
+2: .weui-cells和.weui-cell的1px线
+*/
+
+.weui-cells {
+    margin-top: @weuiCellsMarginTop;
+    background-color: @weuiCellBg;
+    line-height: @weuiCellLineHeight;
+    font-size: @weuiCellFontSize; //cell中间有效高度23px，跟客户端默认图标尺寸一致
+
+    overflow: hidden; //因为每个cell的border使用before元素left搞的，ie下伪元素的containing block估计跟标准不同，在cell上用oh不生效
+
+    // onepx
+    position: relative;
+    &:before {
+        .setTopLine(@weuiCellBorderColor);
+        z-index: 2;
+    }
+    &:after {
+        .setBottomLine(@weuiCellBorderColor);
+        z-index: 2;
+    }
+}
+
+.weui-cells__title {
+    margin-top: .77em; // 15px - 行高
+    margin-bottom: .3em; // 8px - 行高
+    padding-left: @weuiCellGapH;
+    padding-right: @weuiCellGapH;
+    color: @weuiTextColorGray;
+    font-size: @weuiCellTipsFontSize;
+
+    & + .weui-cells {
+        margin-top: 0;
+    }
+}
+
+.weui-cells__tips {
+    margin-top: .3em; // 8px - 行高
+    color: @weuiTextColorGray;
+    padding-left: @weuiCellGapH;
+    padding-right: @weuiCellGapH;
+    font-size: @weuiCellTipsFontSize;
+}
+
+.weui-cell {
+    padding: @weuiCellGapV @weuiCellGapH;
+    position: relative; //这个是为了兼容cells容器onepx方案被before挡住而做的
+    display: flex;
+    align-items: center;
+    &:before {
+        .setTopLine(@weuiCellBorderColor);
+        left: @weuiCellGapH;
+        z-index: 2;
+    }
+    &:first-child {
+        &:before {
+            display: none;
+        }
+    }
+}
+.weui-cell_primary{
+    align-items: flex-start;
+}
+.weui-cell__bd{
+    flex: 1;
+}
+.weui-cell__ft {
+    text-align: right;
+    color: @weuiTextColorGray;
+}

src/main/webapp/static/weixin/style/widget/weui-cell/weui-cell_swiped.less

@@ -0,0 +1,47 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* Unless required by applicable law or agreed to in writing, software distributed under the License is
+* distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+* either express or implied. See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
+@import "../../base/fn";
+
+.weui-cell_swiped {
+    display: block;
+    padding: 0;
+    > .weui-cell__bd {
+        position: relative;
+        z-index: 1;
+        background-color: #FFFFFF;
+    }
+    > .weui-cell__ft {
+        position: absolute;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        display: flex;
+        color: #FFFFFF;
+    }
+}
+.weui-swiped-btn {
+    display: block;
+    padding: @weuiCellGapV 1em;
+    line-height: @weuiCellLineHeight;
+    color: inherit;
+}
+.weui-swiped-btn_default {
+    background-color: #C7C7CC;
+}
+.weui-swiped-btn_warn {
+    background-color: #FF3B30;
+}

src/main/webapp/static/weixin/style/widget/weui-cell/weui-check.less

@@ -0,0 +1,20 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* Unless required by applicable law or agreed to in writing, software distributed under the License is
+* distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+* either express or implied. See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
+@import "../../base/fn";
+@import "./weui-check/weui-check_common";
+@import "./weui-check/weui-radio";
+@import "./weui-check/weui-checkbox";

src/main/webapp/static/weixin/style/widget/weui-cell/weui-check/weui-check_common.less

@@ -0,0 +1,29 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* Unless required by applicable law or agreed to in writing, software distributed under the License is
+* distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+* either express or implied. See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
+@import "../../../base/fn";
+
+.weui-check__label {
+    .setTapColor();
+    &:active {
+        background-color: #ECECEC;
+    }
+}
+
+.weui-check{
+    position: absolute;
+    left: -9999em;
+}

src/main/webapp/static/weixin/style/widget/weui-cell/weui-check/weui-checkbox.less

@@ -0,0 +1,46 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* Unless required by applicable law or agreed to in writing, software distributed under the License is
+* distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+* either express or implied. See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
+@import "../../../base/fn";
+
+.weui-cells_checkbox {
+    .weui-cell__hd {
+        padding-right: @weuiCellInnerGapH;
+    }
+    .weui-icon-checked {
+        &:before {
+            content: '\EA01';
+            color: #C9C9C9;
+            font-size: 23px;
+            display: block;
+        }
+    }
+}
+
+// method2 accessbility
+.weui-check {
+    // checkbox
+    .weui-cells_checkbox & {
+        &:checked {
+            & + .weui-icon-checked {
+                &:before {
+                    content: '\EA06';
+                    color: #4C84C4;
+                }
+            }
+        }
+    }
+}

src/main/webapp/static/weixin/style/widget/weui-cell/weui-check/weui-radio.less

@@ -0,0 +1,39 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* Unless required by applicable law or agreed to in writing, software distributed under the License is
+* distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+* either express or implied. See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
+@import "../../../base/fn";
+
+// method2 accessbility
+.weui-cells_radio{
+    .weui-cell__ft {
+        padding-left: @weuiCellInnerGapH;
+    }
+}
+.weui-check {
+    // radio
+    .weui-cells_radio & {
+        &:checked {
+            & + .weui-icon-checked {
+                &:before {
+                    display: block;
+                    content: '\EA08';
+                    color: #4C84C4;
+                    font-size: 16px;
+                }
+            }
+        }
+    }
+}

src/main/webapp/static/weixin/style/widget/weui-cell/weui-form.less

@@ -0,0 +1,21 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* Unless required by applicable law or agreed to in writing, software distributed under the License is
+* distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+* either express or implied. See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
+@import "../../base/fn";
+@import "./weui-form/weui-form_common";
+@import "./weui-form/weui-form-preview";
+@import "./weui-form/weui-select";
+@import "./weui-form/weui-vcode";

src/main/webapp/static/weixin/style/widget/weui-cell/weui-form/weui-form-preview.less

@@ -0,0 +1,106 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* Unless required by applicable law or agreed to in writing, software distributed under the License is
+* distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+* either express or implied. See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
+@import "../../../base/fn";
+
+.weui-form-preview{
+    position: relative;
+    background-color: #FFFFFF;
+    &:before{
+        .setTopLine(@weuiCellBorderColor);
+    }
+    &:after{
+        .setBottomLine(@weuiCellBorderColor);
+    }
+}
+.weui-form-preview__hd{
+    position: relative;
+    padding: @weuiCellGapV @weuiCellGapH;
+    text-align: right;
+    line-height: 2.5em;
+    &:after{
+        .setBottomLine(@weuiCellBorderColor);
+        left: @weuiCellGapH;
+    }
+    .weui-form-preview__value{
+        font-style: normal;
+        font-size: 1.6em;
+    }
+}
+.weui-form-preview__bd{
+    padding: @weuiCellGapV @weuiCellGapH;
+    font-size: .9em;
+    text-align: right;
+    color: @weuiTextColorGray;
+    line-height: 2;
+}
+.weui-form-preview__ft{
+    position: relative;
+    line-height: 50px;
+    display: flex;
+    &:before {
+        .setTopLine(@weuiDialogLineColor);
+    }
+}
+.weui-form-preview__item{
+    overflow: hidden;
+}
+.weui-form-preview__label{
+    float: left;
+    margin-right: 1em;
+    min-width: 4em;
+    color: @weuiTextColorGray;
+    text-align: justify;
+    text-align-last: justify;
+}
+.weui-form-preview__value{
+    display: block;
+    overflow: hidden;
+    word-break:normal;
+    word-wrap: break-word;
+}
+.weui-form-preview__btn {
+    position: relative;
+    display: block;
+    flex: 1;
+    color: @weuiDialogLinkColor;
+    text-align: center;
+    .setTapColor();
+    button&{
+        background-color: transparent;
+        border: 0;
+        outline: 0;
+        line-height: inherit;
+        font-size: inherit;
+    }
+    &:active {
+        background-color: @weuiDialogLinkActiveBc;
+    }
+    &:after {
+        .setLeftLine(@weuiDialogLineColor);
+    }
+    &:first-child {
+        &:after {
+            display: none;
+        }
+    }
+}
+.weui-form-preview__btn_default {
+    color: @weuiTextColorGray;
+}
+.weui-form-preview__btn_primary {
+    color: @weuiColorPrimary;
+}

src/main/webapp/static/weixin/style/widget/weui-cell/weui-form/weui-form_common.less

@@ -0,0 +1,91 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* Unless required by applicable law or agreed to in writing, software distributed under the License is
+* distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+* either express or implied. See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
+@import "../../../base/fn";
+
+.weui-label{
+  display:block;
+  width:@weuiCellLabelWidth;
+  .text_wrap();
+}
+.weui-input {
+    width: 100%;
+    border: 0;
+    outline: 0;
+    -webkit-appearance: none;
+    background-color: transparent;
+    font-size: inherit;
+    color: inherit;
+    height: unit(@weuiCellLineHeight, em);
+    line-height: @weuiCellLineHeight;
+
+    // hides the spin-button
+    &::-webkit-outer-spin-button, &::-webkit-inner-spin-button{
+        -webkit-appearance: none;
+        margin: 0;
+    }
+}
+.weui-textarea {
+    display: block;
+    border: 0;
+    resize: none;
+    width: 100%;
+    color: inherit;
+    font-size: 1em;
+    line-height: inherit;
+    outline: 0;
+}
+
+.weui-textarea-counter{
+    color: @weuiTextColorTips;
+    text-align: right;
+    .weui-cell_warn &{
+        color: @weuiTextColorWarn;
+    }
+}
+
+.weui-toptips {
+    display:none;
+    position: fixed;
+    transform: translateZ(0);
+    top: 0;
+    left: 0;
+    right: 0;
+    padding:5px;
+    font-size:14px;
+    text-align: center;
+    color: #FFF;
+    z-index: 5000;
+    .text_wrap();
+}
+.weui-toptips_warn {
+    background-color: @weuiColorWarn;
+}
+.weui-cells_form {
+    .weui-cell__ft{
+        font-size:0;
+    }
+    .weui-icon-warn{
+        display:none;
+    }
+    input, textarea, label[for]{
+        .setTapColor();
+    }
+}
+.weui-cell_warn{
+    color:@weuiTextColorWarn;
+    .weui-icon-warn{display:inline-block;}
+}

src/main/webapp/static/weixin/style/widget/weui-cell/weui-form/weui-select.less

@@ -0,0 +1,85 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* Unless required by applicable law or agreed to in writing, software distributed under the License is
+* distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+* either express or implied. See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
+@import "../../../base/fn";
+
+.weui-cell_select {
+    padding: 0;
+    .weui-select {
+        padding-right: 30px;
+    }
+    .weui-cell__bd{
+        &:after{
+            content: " ";
+            .setArrow(right, 6px, #C8C8CD, 2px);
+
+            position: absolute;
+            top: 50%;
+            right: @weuiCellGapH;
+            margin-top: -4px;
+        }
+    }
+}
+
+.weui-select {
+    -webkit-appearance: none;
+    border: 0;
+    outline: 0;
+    background-color: transparent;
+    width: 100%;
+    font-size: inherit;
+    height: @weuiCellHeight;
+    line-height: @weuiCellHeight;
+    position: relative;
+    z-index: 1;
+    padding-left: @weuiCellGapH;
+}
+
+.weui-cell_select-before {
+    padding-right:@weuiCellGapH;
+    .weui-select{
+        width:@weuiCellLabelWidth;
+        box-sizing: border-box;
+    }
+    .weui-cell__hd {
+        position:relative;
+        &:after {
+            .setRightLine(@weuiCellBorderColor);
+        }
+        &:before{
+            content: " ";
+            .setArrow(right, 6px, #C8C8CD, 2px);
+
+            position: absolute;
+            top: 50%;
+            right: @weuiCellGapH;
+            margin-top: -4px;
+        }
+    }
+    .weui-cell__bd {
+        padding-left:@weuiCellGapH;
+        &:after{
+            display:none;
+        }
+    }
+}
+
+.weui-cell_select-after {
+    padding-left:@weuiCellGapH;
+    .weui-select {
+        padding-left:0;
+    }
+}

src/main/webapp/static/weixin/style/widget/weui-cell/weui-form/weui-vcode.less

@@ -0,0 +1,50 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* Unless required by applicable law or agreed to in writing, software distributed under the License is
+* distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+* either express or implied. See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
+@import "../../../base/fn";
+
+.weui-cell_vcode {
+    padding-top: 0;
+    padding-right: 0;
+    padding-bottom: 0;
+}
+.weui-vcode-img{
+    margin-left: 5px;
+    height: @weuiCellHeight;
+    vertical-align: middle;
+}
+
+.weui-vcode-btn {
+    display: inline-block;
+    height: @weuiCellHeight;
+    margin-left: 5px;
+    padding: 0 0.6em 0 0.7em;
+    border-left: 1px solid @weuiLineColorLight;
+    line-height: @weuiCellHeight;
+    vertical-align: middle;
+    font-size: @weuiCellFontSize;
+    color: @weuiDialogLinkColor;
+    button&{
+        background-color: transparent;
+        border-top: 0;
+        border-right: 0;
+        border-bottom: 0;
+        outline: 0;
+    }
+    &:active {
+        color: desaturate(@weuiDialogLinkColor, 30%);
+    }
+}

src/main/webapp/static/weixin/style/widget/weui-cell/weui-gallery.less

@@ -0,0 +1,51 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* Unless required by applicable law or agreed to in writing, software distributed under the License is
+* distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+* either express or implied. See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
+@import "../../base/fn";
+
+@weuiGalleryOprHeight: 60px;
+.weui-gallery {
+    display: none;
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: #000000;
+    z-index: 1000;
+}
+.weui-gallery__img {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: @weuiGalleryOprHeight;
+    left: 0;
+    background: center center no-repeat;
+    background-size: contain;
+}
+.weui-gallery__opr {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: #0D0D0D;
+    color: #FFFFFF;
+    line-height: @weuiGalleryOprHeight;
+    text-align: center;
+}
+.weui-gallery__del {
+    display: block;
+}

src/main/webapp/static/weixin/style/widget/weui-cell/weui-switch.less

@@ -0,0 +1,81 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* Unless required by applicable law or agreed to in writing, software distributed under the License is
+* distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+* either express or implied. See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
+@import "../../base/fn";
+
+.weui-cell_switch{
+    padding-top: (@weuiCellHeight - @weuiSwitchHeight) / 2;
+    padding-bottom: (@weuiCellHeight - @weuiSwitchHeight) / 2;
+}
+.weui-switch{
+    appearance: none;
+}
+.weui-switch,
+.weui-switch-cp__box{
+    position: relative;
+    width: 52px;
+    height: @weuiSwitchHeight;
+    border: 1px solid #DFDFDF;
+    outline: 0;
+    border-radius: 16px;
+    box-sizing: border-box;
+    background-color: #DFDFDF;
+    transition: background-color .1s, border .1s;
+
+    &:before{
+        content: " ";
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 50px;
+        height: @weuiSwitchHeight - 2;
+        border-radius: 15px;
+        background-color: #FDFDFD;
+        transition:transform .35s cubic-bezier(0.45, 1, 0.4, 1);
+    }
+    &:after{
+        content: " ";
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: @weuiSwitchHeight - 2;
+        height: @weuiSwitchHeight - 2;
+        border-radius: 15px;
+        background-color: #FFFFFF;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
+        transition:transform .35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
+    }
+}
+.weui-switch:checked,
+.weui-switch-cp__input:checked ~ .weui-switch-cp__box{
+    border-color: #4C84C4;
+    background-color: #4C84C4;
+    &:before {
+        transform: scale(0);
+    }
+    &:after {
+        transform: translateX(20px);
+    }
+}
+
+// 兼容IE Edge的版本
+.weui-switch-cp__input{
+    position: absolute;
+    left: -9999px;
+}
+.weui-switch-cp__box{
+    display: block;
+}

src/main/webapp/static/weixin/style/widget/weui-cell/weui-uploader.less

@@ -0,0 +1,115 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* Unless required by applicable law or agreed to in writing, software distributed under the License is
+* distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+* either express or implied. See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
+@import "../../base/fn";
+
+.weui-uploader{}
+.weui-uploader__hd{
+    display: flex;
+    padding-bottom: @weuiCellGapV;
+    align-items: center;
+}
+.weui-uploader__title{
+    flex: 1;
+}
+.weui-uploader__info{
+    color: @weuiTextColorTips;
+}
+
+.weui-uploader__bd{
+    margin-bottom: @weuiCellGapH - (@weuiCellGapV + @weuiUploaderFileSpacing);
+    margin-right: -@weuiUploaderFileSpacing;
+    overflow: hidden;
+}
+.weui-uploader__files{
+    list-style: none;
+}
+.weui-uploader__file{
+    float: left;
+    margin-right: @weuiUploaderFileSpacing;
+    margin-bottom: @weuiUploaderFileSpacing;
+    width: @weuiUploaderSize;
+    height: @weuiUploaderSize;
+    background: no-repeat center center;
+    background-size: cover;
+}
+.weui-uploader__file_status{
+    position: relative;
+    &:before{
+        content: " ";
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        background-color: rgba(0, 0, 0, .5);
+    }
+    .weui-uploader__file-content{
+        display: block;
+    }
+}
+.weui-uploader__file-content{
+    display: none;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: #FFFFFF;
+    .weui-icon-warn{
+        display: inline-block;
+    }
+}
+.weui-uploader__input-box{
+    float:left;
+    position: relative;
+    margin-right: @weuiUploaderFileSpacing;
+    margin-bottom: @weuiUploaderFileSpacing;
+    width: @weuiUploaderSize - @weuiUploaderBorderWidth * 2;
+    height: @weuiUploaderSize - @weuiUploaderBorderWidth * 2;
+    border: @weuiUploaderBorderWidth solid @weuiUploaderBorderColor;
+    &:before, &:after{
+        content: " ";
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        background-color: @weuiUploaderBorderColor;
+    }
+    &:before{
+        width: @weuiUploaderBorderWidth + 1;
+        height: @weuiUploaderSize / 2;
+    }
+    &:after{
+        width: @weuiUploaderSize / 2;
+        height: @weuiUploaderBorderWidth + 1;
+    }
+    &:active{
+        border-color: @weuiUploaderActiveBorderColor;
+        &:before, &:after{
+            background-color: @weuiUploaderActiveBorderColor;
+        }
+    }
+}
+.weui-uploader__input{
+    position: absolute;
+    z-index: 1;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    .setTapColor();
+}

src/main/webapp/static/weixin/style/widget/weui-flex/weui-flex.less

@@ -0,0 +1,24 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* Unless required by applicable law or agreed to in writing, software distributed under the License is
+* distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+* either express or implied. See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
+@import "../../base/fn";
+
+.weui-flex {
+    display: flex;
+}
+.weui-flex__item{
+    flex: 1;
+}

src/main/webapp/static/weixin/style/widget/weui-footer/weui-footer.less

@@ -0,0 +1,57 @@
+/*
+* Tencent is pleased to support the open source community by making WeUI available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* Unless required by applicable law or agreed to in writing, software distributed under the License is
+* distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+* either express or implied. See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
+@import "../../base/fn";
+
+.weui-footer {
+    color: @weuiTextColorGray;
+    font-size: 14px;
+    text-align: center;
+    a{
+        color: @weuiLinkColorDefault;
+    }
+}
+.weui-footer_fixed-bottom{
+    position: fixed;
+    bottom: .52em;
+    left: 0;
+    right: 0;
+}
+.weui-footer__links{
+    font-size: 0;
+}
+.weui-footer__link{
+    display: inline-block;
+    vertical-align: top;
+    margin: 0 .62em;
+    position: relative;
+    font-size: 14px;
+    &:before{
+        .setLeftLine();
+        left: -.65em;
+        top: .36em;
+        bottom: .36em;
+    }
+    &:first-child{
+        &:before{
+            display: none;
+        }
+    }
+}
+.weui-footer__text{
+    padding: 0 .34em;
+    font-size: 12px;
+}