UI优化，增加table样式

demo/css/demo.css

@@ -1,29 +1,27 @@
.ui-refresh {
    height: 100%;
}
.refresh-content {
    background-color: #fff;
}
.ui-carousel-wrapper>li img{
    width: 100%;
    height: 184px;
    display: block;
}
.demo-desc {
    padding: 10px;
    font-size: 16px;
    margin:.1rem;
    font-size: .17rem;
    color: #7CAE23;
}
.demo-block {
    position: relative;
    padding:.1rem;
}
.page-content{
    padding: .1rem 0;
}
.ui-flex {
    border: 1px solid #ddd;
    min-height: 80px;
    margin-bottom: 10px;
}
.demo-block {
    position: relative;
}
.main-content{
    padding-bottom: .1rem;
}
@@ -38,9 +36,6 @@
#grid .ui-row-flex-ver{
    min-height: 100px;
}
.ui-btn-wrap{
    padding: 5px;
}
.ui-list-item-media img{
    width: .8rem;
    height: .8rem;

demo/js/biz/picker.js

@@ -85,7 +85,7 @@ require(['ipu', 'jquery'], function (ipu, $) {
        var self = $(this);
        dataPicker1.show(function (data) {
            console.dir(data);
            self.val(dataPicker1.getSelected());
            self.val(dataPicker1.getSelected().text);
        });
    });
@@ -93,7 +93,7 @@ require(['ipu', 'jquery'], function (ipu, $) {
        var self = $(this);
        dataPicker2.show(function (data) {
            console.dir(data);
            self.val(dataPicker2.getSelected());
            self.val(dataPicker2.getSelected().text);
        });
    });
@@ -101,21 +101,21 @@ require(['ipu', 'jquery'], function (ipu, $) {
        var self = $(this);
        dataPicker3.show(function (data) {
            console.dir(data);
            self.val(dataPicker3.getSelected());
            self.val(dataPicker3.getSelected().text);
        });
    });
    $("#testDate4").focus(function () {
        var self = $(this);
        dataPicker4.show(function (data) {
            console.dir(data);
            self.val(dataPicker4.getSelected())
            self.val(dataPicker4.getSelected().text)
        });
    });
    $("#testDate5").focus(function () {
        var self = $(this);
        dataPicker5.show(function (data) {
            console.dir(data);
            self.val(dataPicker5.getSelected());
            self.val(dataPicker5.getSelected().text);
        });
    });
@@ -131,8 +131,8 @@ require(['ipu', 'jquery'], function (ipu, $) {
        }*/
        dataPicker6.show(function () {
            var slt = dataPicker6.getSelected();
            self.val(slt);
            dataPicker7.setBeginDate(slt.value);
            self.val(slt.text);
            dataPicker7.setBeginDate(slt.text);
        });
    });
    $("#testDate7").click(function () {
@@ -143,8 +143,8 @@ require(['ipu', 'jquery'], function (ipu, $) {
        dataPicker7.show(function (sltDate, index) {
            if(index == 1){
                var sltDate = dataPicker7.getSelected();
                self.val(sltDate);
                dataPicker6.setEndDate(sltDate.value);
                self.val(sltDate.text);
                dataPicker6.setEndDate(sltDate.text);
            }else if(index == 2){
                self.val(""); // 清除按钮
            }

demo/static/button.html

@@ -19,10 +19,10 @@
            <h1 class="ui-toolbar-title">按钮</h1>
        </header>
    </div>
    <div class="ui-col">
    <div class="ui-col page-content">
        <section id="btn">
            <div class="demo-item">
                <p class="demo-desc">普通小按钮</p>
                <p class="demo-desc">小按钮</p>
                <div class="demo-block">
                    <div class="ui-btn-wrap">
                        <button class="ui-btn ui-btn-s">
@@ -41,7 +41,7 @@
                </div>
            </div>
            <div class="demo-item">
                <p class="demo-desc">普通按钮</p>
                <p class="demo-desc">正常按钮</p>
                <div class="demo-block">
                    <div class="ui-btn-wrap">
                        <button class="ui-btn">
@@ -102,7 +102,7 @@
                </div>
            </div>
            <div class="demo-item">
                <p class="demo-desc">普通大按钮</p>
                <p class="demo-desc">大按钮</p>
                <div class="demo-block">
                    <div class="ui-btn-wrap">
                        <button class="ui-btn ui-btn-l">
@@ -143,18 +143,20 @@
            <div class="demo-item">
                <p class="demo-desc">按钮与图标</p>
                <div class="demo-block">
                    <div class="ui-btn-group">
                        <button class="ui-btn ui-btn-lg">
                            <i class="fa fa-search"></i>
                        </button>
                        <button class="ui-btn">
                            <i class="fa fa-search"></i>
                            搜索
                        </button>
                        <button class="ui-btn ui-btn-lg">
                           <i class="fa fa-edit"></i>
                            编辑
                        </button>
                    <div class="ui-btn-wrap">
                        <div class="ui-btn-group">
                            <button class="ui-btn">
                                <i class="fa fa-search"></i>
                            </button>
                            <button class="ui-btn">
                                <i class="fa fa-search"></i>
                                搜索
                            </button>
                            <button class="ui-btn">
                               <i class="fa fa-edit"></i>
                                编辑
                            </button>
                        </div>
                    </div>
                </div>
            </div>

demo/static/element/table.html

@@ -56,11 +56,8 @@
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="demo-item">
                <p class="demo-desc">默认</p>
                <div class="demo-block">
                    <table class="ui-table ui-border-tb">
                    <table class="ui-table ui-table-primary">
                        <thead>
                        <tr>
                            <th>已购买</th>
@@ -81,16 +78,51 @@
                        </tr>
                        <tr>
                            <td>2014257777</td>
                            <td class="ui-border-r">待付款</td>
                            <td>待付款</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="demo-block">
                    <table class="ui-table ui-table-bg-primary">
                        <thead>
                        <tr>
                            <th>已购买</th>
                            <th>状态</th>
                            <th>会员到期时间</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>2014257777</td>
                            <td>使用中</td>
                            <td>2016-02-06</td>
                        </tr>
                        <tr>
                            <td>2014257777</td>
                            <td>待付款</td>
                            <td><a href="#">付款</a></td>
                        </tr>
                        <tr>
                            <td>2014257777</td>
                            <td>待付款</td>
                            <td><a href="#">付款</a></td>
                        </tr>
                        <tr>
                            <td>2014257777</td>
                            <td>待付款</td>
                            <td><a href="#">付款</a></td>
                        </tr>
                        <tr>
                            <td>2014257777</td>
                            <td>待付款</td>
                            <td><a href="#">付款</a></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="demo-item">
                <p class="demo-desc">全框</p>
                <div class="demo-block">
                    <table class="ui-table ui-border">
                    <table class="ui-table ui-table-bg-primary ui-table-odd">
                        <thead>
                        <tr>
                            <th>已购买</th>
@@ -114,6 +146,92 @@
                            <td>待付款</td>
                            <td><a href="#">付款</a></td>
                        </tr>
                        <tr>
                            <td>2014257777</td>
                            <td>待付款</td>
                            <td><a href="#">付款</a></td>
                        </tr>
                        <tr>
                            <td>2014257777</td>
                            <td>待付款</td>
                            <td><a href="#">付款</a></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="demo-block">
                    <table class="ui-table ui-table-border-none">
                        <thead>
                        <tr>
                            <th>已购买</th>
                            <th>状态</th>
                            <th>会员到期时间</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>2014257777</td>
                            <td>使用中</td>
                            <td>2016-02-06</td>
                        </tr>
                        <tr>
                            <td>2014257777</td>
                            <td>待付款</td>
                            <td><a href="#">付款</a></td>
                        </tr>
                        <tr>
                            <td>2014257777</td>
                            <td>待付款</td>
                            <td><a href="#">付款</a></td>
                        </tr>
                        <tr>
                            <td>2014257777</td>
                            <td>待付款</td>
                            <td><a href="#">付款</a></td>
                        </tr>
                        <tr>
                            <td>2014257777</td>
                            <td>待付款</td>
                            <td><a href="#">付款</a></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="demo-block">
                    <table class="ui-table ui-table-border-row">
                        <thead>
                        <tr>
                            <th>已购买</th>
                            <th>状态</th>
                            <th>会员到期时间</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>2014257777</td>
                            <td>使用中</td>
                            <td>2016-02-06</td>
                        </tr>
                        <tr>
                            <td>2014257777</td>
                            <td>待付款</td>
                            <td><a href="#">付款</a></td>
                        </tr>
                        <tr>
                            <td>2014257777</td>
                            <td>待付款</td>
                            <td><a href="#">付款</a></td>
                        </tr>
                        <tr>
                            <td>2014257777</td>
                            <td>待付款</td>
                            <td><a href="#">付款</a></td>
                        </tr>
                        <tr>
                            <td>2014257777</td>
                            <td>待付款</td>
                            <td><a href="#">付款</a></td>
                        </tr>
                        </tbody>
                    </table>
                </div>

demo/static/text.html

@@ -23,40 +23,40 @@
            <h1 class="ui-toolbar-title">文本</h1>
        </header>
    </div>
    <div class="ui-col">
    <div class="ui-col page-content">
        <section id="type">
            <div class="demo-item">
                <p class="demo-desc">文本大小，默认行高1.5</p>
                <div class="demo-block">
                    <div class="ui-txt-xxl">字体大小 xxl</div>
                    <div class="ui-txt-xl">字体大小 xl</div>
                    <div class="ui-txt-l">字体大小 l</div>
                    <div class="ui-txt-xxl">字体 ui-txt-xxl</div>
                    <div class="ui-txt-xl">字体 ui-txt-xl</div>
                    <div class="ui-txt-l">字体 ui-txt-l</div>
                    <div class="ui-txt-m">
                        正常字体大小m，同body字体大小15px(375)
                        正常字体 ui-txt-m，同body字体15px(375)
                    </div>
                    <div class="ui-txt-s">字体大小 s</div>
                    <div class="ui-txt-xs">字体大小 xs</div>
                    <div class="ui-txt-s">字体 ui-txt-s</div>
                    <div class="ui-txt-xs">字体 ui-txt-xs</div>
                </div>
            </div>
            <div class="demo-item">
                <p class="demo-desc">相对文本大小</p>
                <p class="demo-desc">相对文本</p>
                <div class="demo-block">
                    <div class="ui-txt-m">
                        <p class="ui-txt-rs">我相对下面字体小-rs</p>
                        我是正常字体大小
                        <p class="ui-txt-rl">我相对上面字体大-rx</p>
                        <p class="ui-txt-rs">我相对下面字体小 ui-txt-rs</p>
                        正常字体
                        <p class="ui-txt-rl">我相对上面字体大 ui-txt-rx</p>
                    </div>
                </div>
            </div>
            <div class="demo-item">
                <p class="demo-desc">文本颜色</p>
                <div class="demo-block">
                    <p class="ui-txt-black">黑色 #000</p>
                    <p class="ui-txt-dark">深黑 #333</p>
                    <p class="ui-txt-default">默认文本色 #666，同body字体颜色</p>
                    <p class="ui-txt-gray">灰色 #999</p>
                    <p class="ui-txt-light">浅色 #ccc</p>
                    <p class="ui-txt-white" style="background-color: #000">白色 #fff</p>
                    <p class="ui-txt-black">黑色 #000 ui-txt-black</p>
                    <p class="ui-txt-dark">深黑 #333 ui-txt-dark</p>
                    <p class="ui-txt-default">默认文本色 #666，同body字体颜色 ui-txt-default</p>
                    <p class="ui-txt-gray">灰色 #999 ui-txt-gray</p>
                    <p class="ui-txt-light">浅色 #ccc ui-txt-light</p>
                    <p class="ui-txt-white" style="background-color: #000">白色 #fff ui-txt-white</p>
                </div>
             </div>
            <div class="demo-item">
@@ -69,6 +69,18 @@
                    <p><a href="javascript:;">默认链接颜色，同主题色</a></p>
                </div>
            </div>
            <div class="demo-item">
                <p class="demo-desc">其它预定义颜色</p>
                <div class="demo-block">
                    <p class="ui-txt-color-1">颜色1</p>
                    <p class="ui-txt-color-2">颜色2</p>
                    <p class="ui-txt-color-3">颜色3</p>
                    <p class="ui-txt-color-4">颜色4</p>
                    <p class="ui-txt-color-5">颜色5</p>
                    <p class="ui-txt-color-6">颜色6</p>
                    <p class="ui-txt-color-7">颜色7</p>
                    <p class="ui-txt-color-8">颜色8</p>
            </div>
        </section>
    </div>
</div>

src/js/dtPicker.js

@@ -329,7 +329,7 @@
                var val = self._fill(m);
                mArray.push({
                    text: val,
                    value: val
                    value: m
                });
            }
        }
@@ -353,7 +353,7 @@
                var val = self._fill(d);
                dArray.push({
                    text: val,
                    value: val
                    value: d
                });
            }
        }
@@ -377,7 +377,7 @@
                var val = self._fill(h);
                hArray.push({
                    text: val,
                    value: val
                    value: h
                });
            }
        }
@@ -401,7 +401,7 @@
                var val = self._fill(i);
                iArray.push({
                    text: val,
                    value: val
                    value: i
                });
            }
        }

src/js/picker.js

@@ -57,7 +57,7 @@
        this.setItems(this.options.data);
    };
    Picker.prototype.setItems = function (data) {
    Picker.prototype.setItems = function (data, textName) {
        this.wrap.empty(); // 清空历史数据
        this.data = data = data || [];
        this.empty = data.length == 0; // 数据是否为空
@@ -65,9 +65,10 @@
        this.newData = true; // 表示设置了新数据，触发change回调，但第一次设置时，不需要触发
        var self = this;
        var lis = "";
        textName = textName || 'text';
        for (var i = 0, j = data.length; i < j; i++) {
            lis = lis + "<li>" + data[i].text + "</li>";
            lis = lis + "<li>" + data[i][textName] + "</li>";
        }
        $(lis).appendTo(this.wrap);

src/sass/ipu/base/function.scss

@@ -65,28 +65,28 @@
    background: $txt-color-8;
}
.ui-text-color-1{
.ui-txt-color-1{
    color: $txt-color-1;
}
.ui-text-color-2{
.ui-txt-color-2{
    color: $txt-color-2;
}
.ui-text-color-3{
.ui-txt-color-3{
    color: $txt-color-3;
}
.ui-text-color-4{
.ui-txt-color-4{
    color: $txt-color-4;
}
.ui-text-color-5{
.ui-txt-color-5{
    color: $txt-color-5;
}
.ui-text-color-6{
.ui-txt-color-6{
    color: $txt-color-6;
}
.ui-text-color-7{
.ui-txt-color-7{
    color: $txt-color-7;
}
.ui-text-color-8{
.ui-txt-color-8{
    color: $txt-color-8;
}

src/sass/ipu/base/rem.scss

@@ -4,6 +4,8 @@
@include queryWidth(375,384);
@include queryWidth(384,400);
@include queryWidth(400,414);
@include queryWidth(414,480);
@include queryWidth(480,640);
@include queryWidth(414,450);
@include queryWidth(450,480);
@include queryWidth(480,520);
@include queryWidth(520,640);
@include queryWidth(640,-1);

src/sass/ipu/base/variable.scss

@@ -9,7 +9,7 @@ $c-primary-positive:   #fff;        // 与主色搭配，如主背景，则此
$rl:                   1.2;        // 相对放大
$rs:                   .85;        // 相对缩小
$bd-radius:           3px;        // 一般圆角大小
$bd-radius:           .03rem;        // 一般圆角大小
$ts-time:             300ms;      // 组件一般动画时间
$c-element-bd:       #dfe0e1;    //  元素边框色

src/sass/ipu/component/toolbar.scss

@@ -10,7 +10,7 @@
.#{$g-prefix}toolbar .#{$g-prefix}fn-left,
.#{$g-prefix}toolbar .#{$g-prefix}fn-right{
    position: relative;
    z-index: 20;
    z-index: 9;
}
.#{$g-prefix}toolbar-title {
    position: absolute;

src/sass/ipu/element/btn.scss

@@ -67,4 +67,10 @@
.#{$g-prefix}btn-block{
    display: block;
    width: 100%;
    box-sizing: border-box;
}
.#{$g-prefix}btn-wrap{
    padding: .1rem;
    background-color: #fff;
    overflow: auto;
}

src/sass/ipu/element/table.scss

@@ -18,3 +18,23 @@
    color: $c-txt-default;
    font-size: .14rem;
}
.ui-table-primary th{
    color: $c-primary;
}
.ui-table-bg-primary th{
    background-color: $c-primary;
    color: $c-txt-white;
}
.ui-table-odd tbody tr:nth-last-child(2n) td{
    background-color: #fafafa;
}
.ui-table-border-none{
    th, td{
        border: none;
    }
}
.ui-table-border-row{
    th, td{
        border-width: 0 0 1px  0;
    }
}