zartui 0.1.113 → 2.0.1

package/lib/index.js

@@ -313,7 +313,7 @@ exports.Toast = _toast.default;
 var _uploader = _interopRequireDefault(require("./uploader"));
 
 exports.Uploader = _uploader.default;
-var version = '0.1.113';
+var version = '2.0.1';
 exports.version = version;
 
 function install(Vue) {

package/lib/index.less

@@ -26,11 +26,11 @@
 @import "./switch-cell/index.less";
 @import "./pull-refresh/index.less";
 @import "./number-keyboard/index.less";
-@import "./multiple-picker/index.less";
 @import "./toast/index.less";
 @import "./hierarchy-select/index.less";
 @import "./button/index.less";
 @import "./signature/index.less";
+@import "./multiple-picker/index.less";
 @import "./dialog/index.less";
 @import "./calendar/index.less";
 @import "./picker/index.less";

package/lib/loading/index.css

@@ -1 +1 @@
-.zt-loading{position:relative;color:#969799;font-size:0;vertical-align:middle}.zt-loading__spinner{position:relative;display:inline-block;width:36px;max-width:100%;height:36px;max-height:100%;vertical-align:middle;-webkit-animation:zt-rotate .7s linear infinite;animation:zt-rotate .7s linear infinite}.zt-loading__spinner--spinner{-webkit-animation-timing-function:steps(12);animation-timing-function:steps(12)}.zt-loading__spinner--spinner i{position:absolute;top:0;left:0;width:100%;height:100%}.zt-loading__spinner--spinner i::before{display:block;width:2px;height:25%;margin:0 auto;background-color:currentColor;border-radius:40%;content:' '}.zt-loading__spinner--circular{-webkit-animation-duration:2s;animation-duration:2s}.zt-loading__circular{display:block;width:100%;height:100%}.zt-loading__circular circle{-webkit-animation:zt-circular 1.5s ease-in-out infinite;animation:zt-circular 1.5s ease-in-out infinite;stroke:currentColor;stroke-width:3;stroke-linecap:round}.zt-loading__snake{display:block;width:100%;height:100%}.zt-loading__text{display:inline-block;margin-left:4px;color:rgba(0,0,0,.6);font-size:14px;line-height:20px;vertical-align:middle}.zt-loading--vertical{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;flex-direction:column;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.zt-loading--vertical .zt-loading__text{margin:4px 0 0}.zt-loading--horizontal-with-text .zt-loading__spinner--snake{width:20px;height:20px}@-webkit-keyframes zt-circular{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-40}100%{stroke-dasharray:90,150;stroke-dashoffset:-120}}@keyframes zt-circular{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-40}100%{stroke-dasharray:90,150;stroke-dashoffset:-120}}.zt-loading__spinner--spinner i:nth-of-type(1){-webkit-transform:rotate(30deg);transform:rotate(30deg);opacity:1}.zt-loading__spinner--spinner i:nth-of-type(2){-webkit-transform:rotate(60deg);transform:rotate(60deg);opacity:.9375}.zt-loading__spinner--spinner i:nth-of-type(3){-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:.875}.zt-loading__spinner--spinner i:nth-of-type(4){-webkit-transform:rotate(120deg);transform:rotate(120deg);opacity:.8125}.zt-loading__spinner--spinner i:nth-of-type(5){-webkit-transform:rotate(150deg);transform:rotate(150deg);opacity:.75}.zt-loading__spinner--spinner i:nth-of-type(6){-webkit-transform:rotate(180deg);transform:rotate(180deg);opacity:.6875}.zt-loading__spinner--spinner i:nth-of-type(7){-webkit-transform:rotate(210deg);transform:rotate(210deg);opacity:.625}.zt-loading__spinner--spinner i:nth-of-type(8){-webkit-transform:rotate(240deg);transform:rotate(240deg);opacity:.5625}.zt-loading__spinner--spinner i:nth-of-type(9){-webkit-transform:rotate(270deg);transform:rotate(270deg);opacity:.5}.zt-loading__spinner--spinner i:nth-of-type(10){-webkit-transform:rotate(300deg);transform:rotate(300deg);opacity:.4375}.zt-loading__spinner--spinner i:nth-of-type(11){-webkit-transform:rotate(330deg);transform:rotate(330deg);opacity:.375}.zt-loading__spinner--spinner i:nth-of-type(12){-webkit-transform:rotate(360deg);transform:rotate(360deg);opacity:.3125}
+.zt-loading{position:relative;color:rgba(45,75,115,.4);font-size:0;vertical-align:middle}.zt-loading__spinner{position:relative;display:inline-block;width:36px;max-width:100%;height:36px;max-height:100%;vertical-align:middle;-webkit-animation:zt-rotate .7s linear infinite;animation:zt-rotate .7s linear infinite}.zt-loading__spinner--spinner{-webkit-animation-timing-function:steps(12);animation-timing-function:steps(12)}.zt-loading__spinner--spinner i{position:absolute;top:0;left:0;width:100%;height:100%}.zt-loading__spinner--spinner i::before{display:block;width:2px;height:25%;margin:0 auto;background-color:currentColor;border-radius:40%;content:' '}.zt-loading__spinner--circular{-webkit-animation-duration:2s;animation-duration:2s}.zt-loading__circular{display:block;width:100%;height:100%}.zt-loading__circular circle{-webkit-animation:zt-circular 1.5s ease-in-out infinite;animation:zt-circular 1.5s ease-in-out infinite;stroke:currentColor;stroke-width:3;stroke-linecap:round}.zt-loading__snake{display:block;width:100%;height:100%}.zt-loading__text{display:inline-block;margin-left:4px;color:rgba(45,75,115,.6);font-size:14px;line-height:20px;vertical-align:middle}.zt-loading--vertical{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;flex-direction:column;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.zt-loading--vertical .zt-loading__text{margin:4px 0 0}.zt-loading--horizontal-with-text .zt-loading__spinner--snake{width:20px;height:20px}@-webkit-keyframes zt-circular{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-40}100%{stroke-dasharray:90,150;stroke-dashoffset:-120}}@keyframes zt-circular{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-40}100%{stroke-dasharray:90,150;stroke-dashoffset:-120}}.zt-loading__spinner--spinner i:nth-of-type(1){-webkit-transform:rotate(30deg);transform:rotate(30deg);opacity:1}.zt-loading__spinner--spinner i:nth-of-type(2){-webkit-transform:rotate(60deg);transform:rotate(60deg);opacity:.9375}.zt-loading__spinner--spinner i:nth-of-type(3){-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:.875}.zt-loading__spinner--spinner i:nth-of-type(4){-webkit-transform:rotate(120deg);transform:rotate(120deg);opacity:.8125}.zt-loading__spinner--spinner i:nth-of-type(5){-webkit-transform:rotate(150deg);transform:rotate(150deg);opacity:.75}.zt-loading__spinner--spinner i:nth-of-type(6){-webkit-transform:rotate(180deg);transform:rotate(180deg);opacity:.6875}.zt-loading__spinner--spinner i:nth-of-type(7){-webkit-transform:rotate(210deg);transform:rotate(210deg);opacity:.625}.zt-loading__spinner--spinner i:nth-of-type(8){-webkit-transform:rotate(240deg);transform:rotate(240deg);opacity:.5625}.zt-loading__spinner--spinner i:nth-of-type(9){-webkit-transform:rotate(270deg);transform:rotate(270deg);opacity:.5}.zt-loading__spinner--spinner i:nth-of-type(10){-webkit-transform:rotate(300deg);transform:rotate(300deg);opacity:.4375}.zt-loading__spinner--spinner i:nth-of-type(11){-webkit-transform:rotate(330deg);transform:rotate(330deg);opacity:.375}.zt-loading__spinner--spinner i:nth-of-type(12){-webkit-transform:rotate(360deg);transform:rotate(360deg);opacity:.3125}

package/lib/loading/index.js

@@ -42,7 +42,7 @@ function LoadingIcon(h, props) {
       }
     })]);
   } else {
-    //保证defs不会被重用
+    // 保证defs不会被重用
     var firstHalfId = svgElementId++;
     var secondHalfId = svgElementId++;
     return h("svg", {
@@ -55,7 +55,7 @@ function LoadingIcon(h, props) {
       }
     }, [h("defs", [h("linearGradient", {
       "attrs": {
-        "id": secondHalfId
+        "id": secondHalfId + ''
       }
     }, [h("stop", {
       "attrs": {
@@ -71,7 +71,7 @@ function LoadingIcon(h, props) {
       }
     })]), h("linearGradient", {
       "attrs": {
-        "id": firstHalfId
+        "id": firstHalfId + ''
       }
     }, [h("stop", {
       "attrs": {

package/lib/loading/index.less

@@ -66,7 +66,7 @@
   &__text {
     display: inline-block;
     margin-left: @padding-base;
-    color: @loading-text-color;
+    color: @text-color-1;
     font-size: @loading-text-font-size;
     line-height: @loading-text-line-height;
     vertical-align: middle;

package/lib/media-picker/image/PickFileIcon.js

@@ -20,17 +20,10 @@ var _default = {
       }
     }, [h("g", {
       "attrs": {
-        "fill": "#000",
+        "fill": "#2D4B73",
         "fill-rule": "evenodd"
       }
-    }, [h("rect", {
-      "attrs": {
-        "opacity": ".04317801",
-        "width": "48",
-        "height": "48",
-        "rx": "4"
-      }
-    }), h("path", {
+    }, [h("path", {
       "attrs": {
         "d": "M29,8 L29,15 C29,15.5522847 29.4477153,16 30,16 L30,16 L37,16 L37,38 C37,39.1045695 36.1045695,40 35,40 L13,40 C11.8954305,40 11,39.1045695 11,38 L11,10 C11,8.8954305 11.8954305,8 13,8 L29,8 Z M29,31 L19,31 C18.4477153,31 18,31.4477153 18,32 C18,32.5522847 18.4477153,33 19,33 L19,33 L29,33 C29.5522847,33 30,32.5522847 30,32 C30,31.4477153 29.5522847,31 29,31 L29,31 Z M24.7071068,15.7071068 C24.3165825,15.3165825 23.6834175,15.3165825 23.2928932,15.7071068 L23.2928932,15.7071068 L17.8535534,21.1464466 C17.7597852,21.2402148 17.7071068,21.3673918 17.7071068,21.5 C17.7071068,21.7761424 17.9309644,22 18.2071068,22 L18.2071068,22 L21,22 L21,28 C21,28.5522847 21.4477153,29 22,29 L22,29 L26,29 C26.5522847,29 27,28.5522847 27,28 L27,28 L27,22 L29.7928932,22 C29.9255015,22 30.0526784,21.9473216 30.1464466,21.8535534 C30.3417088,21.6582912 30.3417088,21.3417088 30.1464466,21.1464466 L30.1464466,21.1464466 Z",
         "fill-opacity": ".8"

package/lib/media-picker/image/PickPhotoIcon.js

@@ -20,17 +20,10 @@ var _default = {
       }
     }, [h("g", {
       "attrs": {
-        "fill": "#000",
+        "fill": "#2D4B73",
         "fill-rule": "evenodd"
       }
-    }, [h("rect", {
-      "attrs": {
-        "opacity": ".04317801",
-        "width": "48",
-        "height": "48",
-        "rx": "4"
-      }
-    }), h("path", {
+    }, [h("path", {
       "attrs": {
         "d": "M37.9982567,12 C39.103789,12 40,12.8970262 40,14.0049466 L40,33.9950534 C40,35.1023548 39.1107383,36 37.9982567,36 L37.764,35.999 L37.7634277,36 L10.8161621,36 L10.814,35.999 L10.0017433,36 C8.89621101,36 8,35.1029738 8,33.9950534 L8,14.0049466 C8,12.8976452 8.88926172,12 10.0017433,12 L37.9982567,12 Z M37.0034652,14 L10.9965348,14 C10.4398131,14 10,14.4440454 10,14.9918031 L10,14.9918031 L10,33.0081969 C10,33.0530776 10.0031223,33.0973902 10.0091668,33.1409155 L17.1114918,24.34032 C18.1544861,23.047797 19.8867064,22.9975446 20.9981014,24.247864 L27,31 L30.4453768,28.2436986 C31.3039715,27.5568228 32.7078383,27.5510237 33.578186,28.2285544 L37.999,31.669 L38,14.9918031 C38,14.4936268 37.6152975,14.0654579 37.1196822,14.0068326 L37.0034652,14 Z",
         "fill-opacity": ".8"

package/lib/media-picker/image/TakeAudioIcon.js

@@ -20,17 +20,10 @@ var _default = {
       }
     }, [h("g", {
       "attrs": {
-        "fill": "#000",
+        "fill": "#2D4B73",
         "fill-rule": "evenodd"
       }
-    }, [h("rect", {
-      "attrs": {
-        "opacity": ".04317801",
-        "width": "48",
-        "height": "48",
-        "rx": "4"
-      }
-    }), h("path", {
+    }, [h("path", {
       "attrs": {
         "d": "M23,35 L25,35 L25,39 L28.9975267,39 C29.5116309,39 29.9353477,39.3827202 29.9932556,39.8826674 L30,40 C30,40.5522847 29.544239,41 28.9975267,41 L19.0024733,41 C18.4488226,41 18,40.5561352 18,40 C18,39.4477153 18.455761,39 19.0024733,39 L23,39 L23,35 Z M24,7 C28.9706612,7 33,10.7806433 33,15.4055441 L33,22.5944559 C33,27.2367538 28.9605566,31 24,31 C19.0296047,31 15,27.2193567 15,22.5944559 L15,15.4055441 C15,10.7632462 19.0397093,7 24,7 Z M28.0046024,23 L19.9953976,23 C19.4556644,23 19,23.4477153 19,24 C19,24.5164112 19.3842635,24.9360179 19.8793132,24.993327 L19.9953976,25 L28.0046024,25 C28.5057832,25 28.9344762,24.6139598 28.993161,24.1166211 L29,24 L28.9933032,23.8826674 C28.935804,23.3827202 28.515078,23 28.0046024,23 Z M28.0046024,18 L19.9953976,18 C19.4556644,18 19,18.4477153 19,19 C19,19.5164112 19.3842635,19.9360179 19.8793132,19.993327 L19.9953976,20 L28.0046024,20 C28.5057832,20 28.9344762,19.6139598 28.993161,19.1166211 L29,19 L28.9933032,18.8826674 C28.935804,18.3827202 28.515078,18 28.0046024,18 Z M28.0046024,13 L19.9953976,13 C19.4556644,13 19,13.4477153 19,14 C19,14.5164112 19.3842635,14.9360179 19.8793132,14.993327 L19.9953976,15 L28.0046024,15 C28.5057832,15 28.9344762,14.6139598 28.993161,14.1166211 L29,14 L28.9933032,13.8826674 C28.935804,13.3827202 28.515078,13 28.0046024,13 Z",
         "fill-opacity": ".8"

package/lib/media-picker/image/TakePhotoIcon.js

@@ -20,17 +20,10 @@ var _default = {
       }
     }, [h("g", {
       "attrs": {
-        "fill": "#000",
+        "fill": "#2D4B73",
         "fill-rule": "evenodd"
       }
-    }, [h("rect", {
-      "attrs": {
-        "opacity": ".04317801",
-        "width": "48",
-        "height": "48",
-        "rx": "4"
-      }
-    }), h("path", {
+    }, [h("path", {
       "attrs": {
         "d": "M33.9975267,12 C34.5511774,12 35.1438351,12.4315052 35.3169059,12.9507178 L36.333,15.999 L37.9982567,16 C39.103789,16 40,16.8982124 40,17.9907951 L40,34.0092049 C40,35.1086907 39.1107383,36 37.9982567,36 L10.0017433,36 C8.89621101,36 8,35.1017876 8,34.0092049 L8,17.9907951 C8,16.8913093 8.88926172,16 10.0017433,16 L21.666,15.999 L22.6830941,12.9507178 C22.8581164,12.4256509 23.455761,12 24.0024733,12 L33.9975267,12 Z M29,19 C25.1340068,19 22,22.1340068 22,26 C22,29.8659932 25.1340068,33 29,33 C32.8659932,33 36,29.8659932 36,26 C36,22.1340068 32.8659932,19 29,19 Z M14.5,18 L14.3546371,18.0068666 C13.5897719,18.0795513 13,18.7203039 13,19.5 C13,20.3342028 13.6715729,21 14.5,21 L14.5,21 L14.6453629,20.9931334 C15.4102281,20.9204487 16,20.2796961 16,19.5 L16,19.5 L15.9931334,19.3546371 C15.9204487,18.5897719 15.2796961,18 14.5,18 L14.5,18 Z",
         "fill-opacity": ".8"

package/lib/media-picker/image/TakeVideoIcon.js

@@ -20,17 +20,10 @@ var _default = {
       }
     }, [h("g", {
       "attrs": {
-        "fill": "#000",
+        "fill": "#2D4B73",
         "fill-rule": "evenodd"
       }
-    }, [h("rect", {
-      "attrs": {
-        "opacity": ".04317801",
-        "width": "48",
-        "height": "48",
-        "rx": "4"
-      }
-    }), h("path", {
+    }, [h("path", {
       "attrs": {
         "d": "M29.9944797,11 C32.2066675,11 34,12.7924676 34,14.99923 L34,27.00077 C34,29.2094838 32.2129147,31 29.9944797,31 L12.0055203,31 C9.7933325,31 8,29.2075324 8,27.00077 L8,14.99923 C8,12.7905162 9.78708529,11 12.0055203,11 L29.9944797,11 Z M19.5047388,16.9404618 C18.6820755,16.4262972 18,16.7952661 18,17.7762766 L18,17.7762766 L18,24.2237234 C18,25.1985621 18.6736945,25.5789409 19.5047388,25.0595382 L19.5047388,25.0595382 L24.4952612,21.9404618 C25.3179245,21.4262972 25.3263055,20.5789409 24.4952612,20.0595382 L24.4952612,20.0595382 Z",
         "fill-opacity": ".8"

package/lib/media-picker/index.css

@@ -1 +1 @@
-.zt-media-picker{background-color:#fff}.zt-media-picker__hidden{display:none}.zt-media-picker__title{position:relative;height:44px;line-height:44px;font-weight:700;font-size:16px;color:#000;padding:0 16px}.zt-media-picker__title::before{position:absolute;width:4px;height:16px;background:#0091fa;left:0;top:14px;content:' '}.zt-media-picker__title::after{position:absolute;box-sizing:border-box;content:' ';pointer-events:none;right:0;bottom:0;left:0;border-bottom:1px solid rgba(0,0,0,.1);-webkit-transform:scaleY(.5);transform:scaleY(.5)}.zt-media-picker__line{width:100%;height:92px;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;overflow-x:auto}.zt-media-picker__line::-webkit-scrollbar{width:0;height:0}.zt-media-picker__line::after{content:' ';min-width:16px;height:10px}.zt-media-picker__box{width:48px;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;flex-direction:column;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.zt-media-picker__box:first-child{margin-left:16px}.zt-media-picker__box:not(:last-child){margin-right:24px}.zt-media-picker__button{width:48px;height:48px}.zt-media-picker__label{margin-top:4px;font-size:12px;opacity:.8;color:#000;letter-spacing:0;text-align:center;line-height:16px}.zt-media-picker__grid{padding:0 16px 8px 16px!important}.zt-media-picker__delete{width:20px;height:20px;position:absolute;padding:4px;top:0;right:0}.zt-media-picker .zt-image{width:100%;height:100%}.zt-media-picker .zt-grid-item__content{padding:0}.zt-media-picker__thumbnail{width:100%;height:100%}.zt-media-picker__mask{position:absolute;top:0;right:0;bottom:0;left:0;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;flex-direction:column;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;color:#fff;background-color:rgba(50,50,51,.88);border-radius:4px}.zt-media-picker__mask-icon{font-size:22px}.zt-media-picker__mask-message{margin-top:6px;padding:0 4px;font-size:12px;line-height:14px}.zt-media-picker__loading{width:22px;height:22px;color:#fff}
+.zt-media-picker__hidden{display:none}.zt-media-picker__title{position:relative;height:44px;line-height:44px;font-weight:700;font-size:16px;color:#2d4b73;padding:0 16px}.zt-media-picker__title::before{position:absolute;width:4px;height:16px;background:#0091fa;left:0;top:14px;content:' '}.zt-media-picker__title::after{position:absolute;box-sizing:border-box;content:' ';pointer-events:none;right:0;bottom:0;left:0;border-bottom:1px solid rgba(0,0,0,.1);-webkit-transform:scaleY(.5);transform:scaleY(.5)}.zt-media-picker__line{width:100%;height:92px;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;overflow-x:auto}.zt-media-picker__line::-webkit-scrollbar{width:0;height:0}.zt-media-picker__line::after{content:' ';min-width:16px;height:10px}.zt-media-picker__box{width:48px;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;flex-direction:column;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.zt-media-picker__box:first-child{margin-left:16px}.zt-media-picker__box:not(:last-child){margin-right:24px}.zt-media-picker__button{width:48px;height:48px;background-image:-webkit-linear-gradient(315deg,#e6ebf0 0,#fff 100%,#fff 100%);background-image:linear-gradient(135deg,#e6ebf0 0,#fff 100%,#fff 100%);box-shadow:-4px -4px 8px 0 #fff,4px 4px 8px 0 rgba(45,75,115,.1);border-radius:8px}.zt-media-picker__label{margin-top:8px;font-size:12px;opacity:.8;color:#2d4b73;letter-spacing:0;text-align:center;line-height:16px}.zt-media-picker__grid{padding:0 16px 8px 16px!important}.zt-media-picker__delete{width:20px;height:20px;position:absolute;padding:4px;top:0;right:0}.zt-media-picker .zt-image{width:100%;height:100%}.zt-media-picker .zt-grid-item__content{padding:0}.zt-media-picker__thumbnail{width:100%;height:100%}.zt-media-picker__mask{position:absolute;top:0;right:0;bottom:0;left:0;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;flex-direction:column;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;color:#fff;background-color:rgba(50,50,51,.88);border-radius:4px}.zt-media-picker__mask-icon{font-size:22px}.zt-media-picker__mask-message{margin-top:6px;padding:0 4px;font-size:12px;line-height:14px}.zt-media-picker__loading{width:22px;height:22px;color:#fff}

package/lib/media-picker/index.less

@@ -2,7 +2,6 @@
 @import '../style/mixins/hairline';
 
 .zt-media-picker {
-  background-color: white;
 
   &__hidden {
     display: none;
@@ -14,7 +13,7 @@
     line-height: 44px;
     font-weight: bold;
     font-size: 16px;
-    color: black;
+    color: #2D4B73;
     padding: 0 16px;
 
     &::before {
@@ -73,13 +72,16 @@
   &__button {
     width: 48px;
     height: 48px;
+    background-image: linear-gradient(135deg, #E6EBF0 0%, #FFF 100%, #FFF 100%);
+    box-shadow: -4px -4px 8px 0 #FFF, 4px 4px 8px 0 rgba(45,75,115,0.10);
+    border-radius: 8px;
   }
 
   &__label {
-    margin-top: 4px;
+    margin-top: 8px;
     font-size: 12px;
     opacity: 0.8;
-    color: #000000;
+    color: #2D4B73;
     letter-spacing: 0;
     text-align: center;
     line-height: 16px;

package/lib/mixins/checkbox.js

@@ -28,6 +28,8 @@ var CheckboxMixin = function CheckboxMixin(_ref) {
       disabled: Boolean,
       iconSize: [Number, String],
       checkedColor: String,
+      boxShadow: String,
+      border: String,
       iconColor: String,
       labelPosition: String,
       labelDisabled: Boolean,
@@ -52,12 +54,15 @@ var CheckboxMixin = function CheckboxMixin(_ref) {
       },
       iconStyle: function iconStyle() {
         var checkedColor = this.checkedColor || this.parent && this.parent.checkedColor;
+        var boxShadow = this.boxShadow || this.parent && this.parent.boxShadow;
+        var border = this.border || this.parent && this.parent.border;
         var iconColor = this.iconColor || this.parent && this.parent.iconColor;
 
-        if (checkedColor && this.checked && !this.isDisabled) {
+        if ((boxShadow || checkedColor) && this.checked && !this.isDisabled) {
           return {
             color: iconColor,
-            borderColor: checkedColor,
+            boxShadow: boxShadow,
+            border: border,
             backgroundColor: checkedColor
           };
         }
@@ -104,35 +109,11 @@ var CheckboxMixin = function CheckboxMixin(_ref) {
           }
         }, [this.slots('icon', {
           checked: checked
-        }) || (role === 'radio' && checked ? this.genRadioIcon() : h(_icon.default, {
+        }) || h(_icon.default, {
           "attrs": {
-            "name": "success"
+            "name": role === 'radio' ? "radio-round" : "checkBox-select"
           },
           "style": this.iconStyle
-        }))]);
-      },
-      genRadioIcon: function genRadioIcon() {
-        var h = this.$createElement;
-        var iconSize = this.iconSize || this.parent && this.parent.iconSize;
-        return h("svg", {
-          "attrs": {
-            "xmlns": "http://www.w3.org/2000/svg",
-            "viewBox": "0 0 24 24"
-          },
-          "class": bem("custom-svg"),
-          "style": {
-            width: iconSize,
-            height: iconSize
-          }
-        }, [h("path", {
-          "style": {
-            fill: this.checkedColor
-          },
-          "attrs": {
-            "d": "M12,2 C17.5228475,2 22,6.4771525 22,12 C22,17.5228475 17.5228475,22 12,22 C6.4771525,22 2,17.5228475 2,12 C2,6.4771525 6.4771525,2 12,2 Z M12,7 C9.23857625,7 7,9.23857625 7,12 C7,14.7614237 9.23857625,17 12,17 C14.7614237,17 17,14.7614237 17,12 C17,9.23857625 14.7614237,7 12,7 Z",
-            "fill": "#0091FA",
-            "fill-rule": "nonzero"
-          }
         })]);
       },
       genLabel: function genLabel() {
@@ -158,16 +139,17 @@ var CheckboxMixin = function CheckboxMixin(_ref) {
         Children.push(this.genLabel());
       }
 
+      var checked = this.checked;
       return h("div", {
         "attrs": {
           "role": role,
           "tabindex": this.tabindex,
           "aria-checked": String(this.checked)
         },
-        "class": bem([{
+        "class": [bem([{
           disabled: this.isDisabled,
           'label-disabled': this.labelDisabled
-        }, this.direction]),
+        }, this.direction]), checked ? '' : bem('disable-icon')],
         "on": {
           "click": this.onClick
         }

package/lib/multiple-picker/index.css

@@ -1 +1 @@
-[class*=zt-hairline]::after{position:absolute;box-sizing:border-box;content:' ';pointer-events:none;top:-50%;right:-50%;bottom:-50%;left:-50%;border:0 solid rgba(0,0,0,.1);-webkit-transform:scale(.5);transform:scale(.5)}.zt-hairline,.zt-hairline--bottom,.zt-hairline--left,.zt-hairline--right,.zt-hairline--surround,.zt-hairline--top,.zt-hairline--top-bottom{position:relative}.zt-hairline--top::after{border-top-width:1px}.zt-hairline--left::after{border-left-width:1px}.zt-hairline--right::after{border-right-width:1px}.zt-hairline--bottom::after{border-bottom-width:1px}.zt-hairline--top-bottom::after,.zt-hairline-unset--top-bottom::after{border-width:1px 0}.zt-hairline--surround::after{border-width:1px}.zt-multiple-picker{position:relative;background-color:#fff;-webkit-user-select:none;user-select:none}.zt-multiple-picker__toolbar{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;height:44px}.zt-multiple-picker__border{position:relative}.zt-multiple-picker__border::after{position:absolute;box-sizing:border-box;content:' ';pointer-events:none;right:0;bottom:0;left:0;border-bottom:1px solid rgba(0,0,0,.1);-webkit-transform:scaleY(.5);transform:scaleY(.5)}.zt-multiple-picker__cancel,.zt-multiple-picker__confirm{height:100%;padding:0 16px;font-size:16px;background-color:transparent;border:none;cursor:pointer}.zt-multiple-picker__cancel:active,.zt-multiple-picker__confirm:active{opacity:.7}.zt-multiple-picker__confirm{color:#0091fa;font-weight:700}.zt-multiple-picker__cancel{color:#000;font-weight:400}.zt-multiple-picker__title{max-width:50%;font-weight:400;font-size:14px;line-height:20px;text-align:center;color:rgba(0,0,0,.4)}.zt-multiple-picker__header{width:100%;height:40px;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;font-size:14px;font-weight:400}.zt-multiple-picker__header>li{-webkit-box-flex:1;-webkit-flex:auto;flex:auto;text-align:center}.zt-multiple-picker__options{position:relative;display:-webkit-box;display:-webkit-flex;display:flex;cursor:grab}.zt-multiple-picker__loading{position:absolute;top:0;right:0;bottom:0;left:0;z-index:3;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;color:#0091fa;background-color:rgba(255,255,255,.9)}.zt-multiple-picker-options{-webkit-box-flex:1;-webkit-flex:1;flex:1;overflow:scroll;font-size:16px}.zt-multiple-picker-options__wrapper{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;background-color:#fff;padding:12px 16px 4px 16px}.zt-multiple-picker-options__item{color:rgba(0,0,0,.6);padding:0 4px 8px 0;box-sizing:border-box;border-radius:2px;text-align:center;font-size:14px}.zt-multiple-picker-options__item .zt-ellipsis{height:28px;line-height:28px;background-color:rgba(0,0,0,.04)}.zt-multiple-picker-options__item--disabled{cursor:not-allowed;opacity:.3}.zt-multiple-picker-options__item--last{padding-right:0}.zt-multiple-picker-options__item--selected .zt-ellipsis{background:rgba(0,145,250,.1);border:1px solid #0091fa;border-radius:2px;color:#0091fa}
+[class*=zt-hairline]::after{position:absolute;box-sizing:border-box;content:' ';pointer-events:none;top:-50%;right:-50%;bottom:-50%;left:-50%;border:0 solid rgba(0,0,0,.1);-webkit-transform:scale(.5);transform:scale(.5)}.zt-hairline,.zt-hairline--bottom,.zt-hairline--left,.zt-hairline--right,.zt-hairline--surround,.zt-hairline--top,.zt-hairline--top-bottom{position:relative}.zt-hairline--top::after{border-top-width:1px}.zt-hairline--left::after{border-left-width:1px}.zt-hairline--right::after{border-right-width:1px}.zt-hairline--bottom::after{border-bottom-width:1px}.zt-hairline--top-bottom::after,.zt-hairline-unset--top-bottom::after{border-width:1px 0}.zt-hairline--surround::after{border-width:1px}.zt-multiple-picker{position:relative;background-color:#fff;-webkit-user-select:none;user-select:none}.zt-multiple-picker__toolbar{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;height:44px;padding:8px 16px;border-top:1px solid rgba(45,75,115,.1)}.zt-multiple-picker__border{position:relative}.zt-multiple-picker__border::after{position:absolute;box-sizing:border-box;content:' ';pointer-events:none;right:0;bottom:0;left:0;border-bottom:1px solid rgba(0,0,0,.1);-webkit-transform:scaleY(.5);transform:scaleY(.5)}.zt-multiple-picker__cancel,.zt-multiple-picker__confirm{height:100%;padding:0 16px;font-size:14px;background-color:transparent;border:none;cursor:pointer}.zt-multiple-picker__cancel:active,.zt-multiple-picker__confirm:active{opacity:.7}.zt-multiple-picker__confirm{color:#0091fa;font-weight:700}.zt-multiple-picker__cancel{color:#000;font-weight:400}.zt-multiple-picker__title{font-weight:400;font-size:14px;line-height:20px;text-align:center;color:#2d4b73;opacity:.4;padding:12px 0;border-bottom:1px solid rgba(45,75,115,.1)}.zt-multiple-picker__header{width:100%;height:40px;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;font-size:14px;font-weight:400}.zt-multiple-picker__header>li{-webkit-box-flex:1;-webkit-flex:auto;flex:auto;text-align:center}.zt-multiple-picker__options{position:relative;display:-webkit-box;display:-webkit-flex;display:flex;cursor:grab}.zt-multiple-picker__loading{position:absolute;top:0;right:0;bottom:0;left:0;z-index:3;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;color:#0091fa;background-color:rgba(255,255,255,.9)}.zt-multiple-picker-options{-webkit-box-flex:1;-webkit-flex:1;flex:1;overflow:scroll;font-size:14px}.zt-multiple-picker-options__wrapper{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;background-color:#fff;padding:12px 16px 4px 16px}.zt-multiple-picker-options__item{color:rgba(0,0,0,.6);padding:0 4px 8px 0;box-sizing:border-box;border-radius:2px;text-align:center;font-size:14px}.zt-multiple-picker-options__item .zt-ellipsis{height:28px;line-height:28px;border:1px solid rgba(45,75,115,.2);border-radius:18px}.zt-multiple-picker-options__item--disabled{cursor:not-allowed;opacity:.3}.zt-multiple-picker-options__item--last{padding-right:0}.zt-multiple-picker-options__item--selected .zt-ellipsis{background:rgba(0,145,250,.1);border:1px solid rgba(0,145,250,.6);border-radius:18px;color:#0091fa}

package/lib/multiple-picker/index.js

@@ -23,6 +23,8 @@ var _popup2 = require("../mixins/popup");
 
 var _deepClone = require("../utils/deep-clone");
 
+var _button = _interopRequireDefault(require("../button"));
+
 // Utils
 // Components
 var _createNamespace = (0, _utils.createNamespace)('multiple-picker'),
@@ -51,7 +53,7 @@ var _default2 = createComponent({
     },
     toolbarPosition: {
       type: String,
-      default: 'top'
+      default: 'bottom'
     },
     valueKey: {
       type: String,
@@ -140,11 +142,15 @@ var _default2 = createComponent({
     },
     genCancel: function genCancel() {
       var h = this.$createElement;
-      return h("button", {
+      return h(_button.default, {
         "attrs": {
-          "type": "button"
+          "size": "normal",
+          "block": true
+        },
+        "style": {
+          marginRigth: "4px",
+          backgroundColor: "white"
         },
-        "class": bem('cancel'),
         "on": {
           "click": this.cancel
         }
@@ -152,11 +158,15 @@ var _default2 = createComponent({
     },
     genConfirm: function genConfirm() {
       var h = this.$createElement;
-      return h("button", {
+      return h(_button.default, {
         "attrs": {
-          "type": "button"
+          "type": "primary",
+          "size": "normal",
+          "block": true
+        },
+        "style": {
+          marginLeft: "4px"
         },
-        "class": bem('confirm'),
         "on": {
           "click": this.confirm
         }
@@ -168,7 +178,7 @@ var _default2 = createComponent({
       if (this.showToolbar) {
         return h("div", {
           "class": bem('toolbar')
-        }, [this.slots() || [this.genCancel(), this.genTitle(), this.genConfirm()]]);
+        }, [this.slots() || [this.genCancel(), this.genConfirm()]]);
       }
     },
     genOptions: function genOptions() {
@@ -240,9 +250,7 @@ var _default2 = createComponent({
     }, [h("div", {
       "class": bem(),
       "ref": 'columnParent'
-    }, [this.toolbarPosition === 'top' ? this.genToolbar() : h(), this.toolbarPosition === 'top' ? h("div", {
-      "class": bem('border')
-    }) : h(), this.loading ? h(_loading.default, {
+    }, [this.genTitle(), this.loading ? h(_loading.default, {
       "class": bem('loading')
     }) : h(), this.genOptions(), this.toolbarPosition === 'bottom' ? this.genToolbar() : h()])]);
   }

package/lib/multiple-picker/index.less

@@ -11,6 +11,8 @@
     align-items: center;
     justify-content: space-between;
     height: @picker-toolbar-height;
+    padding: 8px 16px;
+    border-top: 1px solid rgba(45,75,115,0.10);
   }
 
   &__border {
@@ -46,12 +48,14 @@
   }
 
   &__title {
-    max-width: 50%;
     font-weight: @plain-font-weight;
     font-size: @picker-title-font-size;
     line-height: @picker-title-line-height;
     text-align: center;
-    color: rgba(0, 0, 0, 0.4);
+    color: #2D4B73;
+    opacity: 0.4;
+    padding: 12px 0;
+    border-bottom: 1px solid rgba(45,75,115,0.10);
   }
 
   &__header {
@@ -107,10 +111,12 @@
       border-radius: 2px;
       text-align: center;
       font-size: 14px;
+
       .zt-ellipsis {
         height: 28px;
         line-height: 28px;
-        background-color: rgba(0,0,0,.04);
+        border: 1px solid rgba(45,75,115,0.20);
+        border-radius: 18px;
       }
 
       &--disabled {
@@ -125,8 +131,8 @@
       &--selected {
         .zt-ellipsis {
           background: rgba(0,145,250,0.10);
-          border: 1px solid #0091FA;
-          border-radius: 2px;
+          border: 1px solid rgba(0,145,250,0.60);
+          border-radius: 18px;
           color: #0091FA;
         }
       }

package/lib/multiple-picker/style/index.js

@@ -4,4 +4,5 @@ require('../../info/index.css');
 require('../../icon/index.css');
 require('../../popup/index.css');
 require('../../loading/index.css');
+require('../../button/index.css');
 require('../index.css');

package/lib/multiple-picker/style/less.js

@@ -4,4 +4,5 @@ require('../../info/index.less');
 require('../../icon/index.less');
 require('../../popup/index.less');
 require('../../loading/index.less');
+require('../../button/index.less');
 require('../index.less');

package/lib/pdf-viewer/style/index.js

@@ -5,5 +5,6 @@ require('../../icon/index.css');
 require('../../popup/index.css');
 require('../../loading/index.css');
 require('../../toast/index.css');
+require('../../button/index.css');
 require('../../picker/index.css');
 require('../index.css');

package/lib/pdf-viewer/style/less.js

@@ -5,5 +5,6 @@ require('../../icon/index.less');
 require('../../popup/index.less');
 require('../../loading/index.less');
 require('../../toast/index.less');
+require('../../button/index.less');
 require('../../picker/index.less');
 require('../index.less');

package/lib/picker/index.css

@@ -1 +1 @@
-[class*=zt-hairline]::after{position:absolute;box-sizing:border-box;content:' ';pointer-events:none;top:-50%;right:-50%;bottom:-50%;left:-50%;border:0 solid rgba(0,0,0,.1);-webkit-transform:scale(.5);transform:scale(.5)}.zt-hairline,.zt-hairline--bottom,.zt-hairline--left,.zt-hairline--right,.zt-hairline--surround,.zt-hairline--top,.zt-hairline--top-bottom{position:relative}.zt-hairline--top::after{border-top-width:1px}.zt-hairline--left::after{border-left-width:1px}.zt-hairline--right::after{border-right-width:1px}.zt-hairline--bottom::after{border-bottom-width:1px}.zt-hairline--top-bottom::after,.zt-hairline-unset--top-bottom::after{border-width:1px 0}.zt-hairline--surround::after{border-width:1px}.zt-picker{position:relative;background-color:#fff;-webkit-user-select:none;user-select:none}.zt-picker__toolbar{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;height:44px}.zt-picker__border{position:relative}.zt-picker__border::after{position:absolute;box-sizing:border-box;content:' ';pointer-events:none;right:0;bottom:0;left:0;border-bottom:1px solid rgba(0,0,0,.1);-webkit-transform:scaleY(.5);transform:scaleY(.5)}.zt-picker__cancel,.zt-picker__confirm{height:100%;padding:0 16px;font-size:16px;background-color:transparent;border:none;cursor:pointer}.zt-picker__cancel:active,.zt-picker__confirm:active{opacity:.7}.zt-picker__confirm{color:#0091fa;font-weight:700}.zt-picker__cancel{color:#000;font-weight:400}.zt-picker__title{max-width:50%;font-weight:400;font-size:14px;line-height:20px;text-align:center;color:rgba(0,0,0,.4)}.zt-picker__header{width:100%;height:40px;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;font-size:14px;font-weight:400}.zt-picker__header>li{-webkit-box-flex:1;-webkit-flex:auto;flex:auto;text-align:center}.zt-picker__columns{position:relative;display:-webkit-box;display:-webkit-flex;display:flex;cursor:grab}.zt-picker__loading{position:absolute;top:0;right:0;bottom:0;left:0;z-index:3;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;color:#0091fa;background-color:rgba(255,255,255,.9)}.zt-picker__frame{position:absolute;top:50%;right:16px;left:16px;z-index:2;-webkit-transform:translateY(-50%);transform:translateY(-50%);pointer-events:none}.zt-picker__background{position:absolute;width:100%;height:100%;opacity:.04;background-color:#000}.zt-picker__mask{position:absolute;top:0;left:0;z-index:1;width:100%;height:100%;background-image:-webkit-linear-gradient(top,hsla(0,0%,100%,.9),hsla(0,0%,100%,.4)),-webkit-linear-gradient(bottom,hsla(0,0%,100%,.9),hsla(0,0%,100%,.4));background-image:linear-gradient(180deg,hsla(0,0%,100%,.9),hsla(0,0%,100%,.4)),linear-gradient(0deg,hsla(0,0%,100%,.9),hsla(0,0%,100%,.4));background-repeat:no-repeat;background-position:top,bottom;-webkit-transform:translateZ(0);transform:translateZ(0);pointer-events:none}.zt-picker-column{-webkit-box-flex:1;-webkit-flex:1;flex:1;overflow:hidden;font-size:16px}.zt-picker-column__wrapper{-webkit-transition-timing-function:cubic-bezier(.23,1,.68,1);transition-timing-function:cubic-bezier(.23,1,.68,1)}.zt-picker-column__item{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;padding:0 4px;color:#000}.zt-picker-column__item--disabled{cursor:not-allowed;opacity:.3}.zt-picker-column__item--selected{font-weight:700}
+[class*=zt-hairline]::after{position:absolute;box-sizing:border-box;content:' ';pointer-events:none;top:-50%;right:-50%;bottom:-50%;left:-50%;border:0 solid rgba(0,0,0,.1);-webkit-transform:scale(.5);transform:scale(.5)}.zt-hairline,.zt-hairline--bottom,.zt-hairline--left,.zt-hairline--right,.zt-hairline--surround,.zt-hairline--top,.zt-hairline--top-bottom{position:relative}.zt-hairline--top::after{border-top-width:1px}.zt-hairline--left::after{border-left-width:1px}.zt-hairline--right::after{border-right-width:1px}.zt-hairline--bottom::after{border-bottom-width:1px}.zt-hairline--top-bottom::after,.zt-hairline-unset--top-bottom::after{border-width:1px 0}.zt-hairline--surround::after{border-width:1px}.zt-picker{position:relative;background-color:#fff;-webkit-user-select:none;user-select:none}.zt-picker__toolbar{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;height:44px;padding:8px 16px 8px 16px;border-top:1px solid rgba(45,75,115,.1);position:relative}.zt-picker__border{position:relative}.zt-picker__border::after{position:absolute;box-sizing:border-box;content:' ';pointer-events:none;right:0;bottom:0;left:0;border-bottom:1px solid rgba(0,0,0,.1);-webkit-transform:scaleY(.5);transform:scaleY(.5)}.zt-picker__cancel,.zt-picker__confirm{height:100%;padding:0 16px;font-size:14px;background-color:transparent;border:none;cursor:pointer}.zt-picker__cancel:active,.zt-picker__confirm:active{opacity:.7}.zt-picker__confirm{color:#0091fa;font-weight:700}.zt-picker__cancel{color:#000;font-weight:400}.zt-picker__title{font-weight:400;font-size:14px;line-height:20px;text-align:center;color:#2d4b73;opacity:.4;padding:12px 0;border-bottom:1px solid rgba(45,75,115,.1)}.zt-picker__header{width:100%;height:40px;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;font-size:14px;font-weight:400}.zt-picker__header>li{-webkit-box-flex:1;-webkit-flex:auto;flex:auto;text-align:center}.zt-picker__columns{position:relative;display:-webkit-box;display:-webkit-flex;display:flex;cursor:grab}.zt-picker__loading{position:absolute;top:0;right:0;bottom:0;left:0;z-index:3;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;color:#0091fa;background-color:rgba(255,255,255,.9)}.zt-picker__frame{position:absolute;top:50%;right:16px;left:16px;z-index:2;-webkit-transform:translateY(-50%);transform:translateY(-50%);pointer-events:none}.zt-picker__background{position:absolute;width:100%;height:100%;opacity:.04;background-color:#000}.zt-picker__mask{position:absolute;top:0;left:0;z-index:1;width:100%;height:100%;background-image:-webkit-linear-gradient(top,hsla(0,0%,100%,.9),hsla(0,0%,100%,.4)),-webkit-linear-gradient(bottom,hsla(0,0%,100%,.9),hsla(0,0%,100%,.4));background-image:linear-gradient(180deg,hsla(0,0%,100%,.9),hsla(0,0%,100%,.4)),linear-gradient(0deg,hsla(0,0%,100%,.9),hsla(0,0%,100%,.4));background-repeat:no-repeat;background-position:top,bottom;-webkit-transform:translateZ(0);transform:translateZ(0);pointer-events:none}.zt-picker-column{-webkit-box-flex:1;-webkit-flex:1;flex:1;overflow:hidden;font-size:14px}.zt-picker-column__wrapper{-webkit-transition-timing-function:cubic-bezier(.23,1,.68,1);transition-timing-function:cubic-bezier(.23,1,.68,1)}.zt-picker-column__item{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;padding:0 4px;color:#000}.zt-picker-column__item--disabled{cursor:not-allowed;opacity:.3}.zt-picker-column__item--selected{font-weight:700}

package/lib/picker/index.js

@@ -21,6 +21,8 @@ var _PickerColumn = _interopRequireDefault(require("./PickerColumn"));
 
 var _popup = _interopRequireDefault(require("../popup"));
 
+var _button = _interopRequireDefault(require("../button"));
+
 var _popup2 = require("../mixins/popup");
 
 // Utils
@@ -53,7 +55,7 @@ var _default2 = createComponent({
     },
     toolbarPosition: {
       type: String,
-      default: 'top'
+      default: 'bottom'
     },
     valueKey: {
       type: String,
@@ -337,11 +339,15 @@ var _default2 = createComponent({
     },
     genCancel: function genCancel() {
       var h = this.$createElement;
-      return h("button", {
+      return h(_button.default, {
         "attrs": {
-          "type": "button"
+          "size": "normal",
+          "block": true
+        },
+        "style": {
+          marginRigth: "4px",
+          backgroundColor: "white"
         },
-        "class": bem('cancel'),
         "on": {
           "click": this.cancel
         }
@@ -349,11 +355,15 @@ var _default2 = createComponent({
     },
     genConfirm: function genConfirm() {
       var h = this.$createElement;
-      return h("button", {
+      return h(_button.default, {
         "attrs": {
-          "type": "button"
+          "type": "primary",
+          "size": "normal",
+          "block": true
+        },
+        "style": {
+          marginLeft: "4px"
         },
-        "class": bem('confirm'),
         "on": {
           "click": this.confirm
         }
@@ -365,7 +375,7 @@ var _default2 = createComponent({
       if (this.showToolbar) {
         return h("div", {
           "class": bem('toolbar')
-        }, [this.slots() || [this.genCancel(), this.genTitle(), this.genConfirm()]]);
+        }, [this.slots() || [this.genCancel(), this.genConfirm()]]);
       }
     },
     genHeaders: function genHeaders() {
@@ -454,7 +464,7 @@ var _default2 = createComponent({
     }, [h("div", {
       "class": bem(),
       "ref": 'columnParent'
-    }, [this.toolbarPosition === 'top' ? this.genToolbar() : h(), this.toolbarPosition === 'top' ? h("div", {
+    }, [this.toolbarPosition === 'top' ? this.genToolbar() : h(), this.toolbarPosition === 'top' ? h() : this.genTitle(), this.toolbarPosition === 'top' ? h("div", {
       "class": bem('border')
     }) : h(), this.loading ? h(_loading.default, {
       "class": bem('loading')

package/lib/picker/index.less

@@ -11,6 +11,20 @@
     align-items: center;
     justify-content: space-between;
     height: @picker-toolbar-height;
+    padding: 8px 16px 8px 16px;
+    border-top: 1px solid rgba(45,75,115,0.10);
+    position: relative;
+
+    // &::before {
+    //   content: '';
+    //   display: inline-block;
+    //   width: 100%;
+    //   height: 1px;
+    //   box-shadow: inset 0 0 0 0 rgba(45,75,115,0.10);
+    //   position: absolute;
+    //   top: 0;
+    //   right: 0;
+    // }
   }
 
   &__border {
@@ -46,12 +60,14 @@
   }
 
   &__title {
-    max-width: 50%;
     font-weight: @plain-font-weight;
     font-size: @picker-title-font-size;
     line-height: @picker-title-line-height;
     text-align: center;
-    color: rgba(0, 0, 0, 0.4);
+    color: #2D4B73;
+    opacity: 0.4;
+    padding: 12px 0;
+    border-bottom: 1px solid rgba(45,75,115,0.10);
   }
 
   &__header {

package/lib/picker/style/index.js

@@ -4,4 +4,5 @@ require('../../info/index.css');
 require('../../icon/index.css');
 require('../../popup/index.css');
 require('../../loading/index.css');
+require('../../button/index.css');
 require('../index.css');

package/lib/picker/style/less.js

@@ -4,4 +4,5 @@ require('../../info/index.less');
 require('../../icon/index.less');
 require('../../popup/index.less');
 require('../../loading/index.less');
+require('../../button/index.less');
 require('../index.less');