zartui 2.0.1 → 2.0.2

package/lib/index.js

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

package/lib/index.less

@@ -56,10 +56,10 @@
 @import "./swipe-item/index.less";
 @import "./image-preview/index.less";
 @import "./uploader/index.less";
-@import "./media-picker/index.less";
-@import "./media-player/index.less";
 @import "./index-anchor/index.less";
 @import "./index-bar/index.less";
+@import "./media-picker/index.less";
+@import "./media-player/index.less";
 @import "./password-input/index.less";
 @import "./radio-group/index.less";
 @import "./row/index.less";

package/lib/media-picker/index.js

@@ -7,6 +7,20 @@ exports.default = void 0;
 
 var _utils = require("../utils");
 
+var _icon = _interopRequireDefault(require("../icon"));
+
+var _loading = _interopRequireDefault(require("../loading"));
+
+var _image = _interopRequireDefault(require("../image"));
+
+var _gridItem = _interopRequireDefault(require("../grid-item"));
+
+var _mediaPlayer = _interopRequireDefault(require("../media-player"));
+
+var _actionSheet = _interopRequireDefault(require("../action-sheet"));
+
+var _grid = _interopRequireDefault(require("../grid"));
+
 var _type = require("./type");
 
 var _media = require("@egova/media");
@@ -35,19 +49,16 @@ var _DefaultFileIcon = _interopRequireDefault(require("./image/DefaultFileIcon")
 
 var _mediaUtil = require("./media-util");
 
-var _icon = _interopRequireDefault(require("../icon"));
-
-var _loading = _interopRequireDefault(require("../loading"));
-
 // Utils
 // Types
+// import components
+// Images
 // 单个文件最大限制，单位为M（目前限制是100M）
 var FILE_SIZE_LIMIT = 100;
 
 var _createNamespace = (0, _utils.createNamespace)('media-picker'),
     createComponent = _createNamespace[0],
-    bem = _createNamespace[1]; // import components
-
+    bem = _createNamespace[1];
 
 var _default2 = createComponent({
   props: {
@@ -919,7 +930,7 @@ var _default2 = createComponent({
       var h = this.$createElement;
 
       if (media.showSrc) {
-        return h("zt-image", {
+        return h(_image.default, {
           "attrs": {
             "src": media.showSrc,
             "fit": 'fill',
@@ -956,7 +967,7 @@ var _default2 = createComponent({
             }
           }
         });
-        return h("zt-grid-item", {
+        return h(_gridItem.default, {
           "key": media.uniqueCode,
           "on": {
             "click": function click() {
@@ -980,7 +991,7 @@ var _default2 = createComponent({
     }, [this.title]);
     return h("div", {
       "class": bem()
-    }, [title, this.hiddenInput(), h("zt-media-player", {
+    }, [title, this.hiddenInput(), h(_mediaPlayer.default, {
       "attrs": {
         "mediaType": this.mediaTypeToPlay,
         "mediaUrl": this.mediaUrlToPlay
@@ -991,7 +1002,7 @@ var _default2 = createComponent({
           _this9.mediaPlayerVisible = $$v;
         }
       }
-    }), h("zt-action-sheet", {
+    }), h(_actionSheet.default, {
       "attrs": {
         "actions": this.actionOptions,
         "title": '请选择',
@@ -1009,7 +1020,7 @@ var _default2 = createComponent({
       }
     }), h("div", {
       "class": bem('line')
-    }, [this.renderButtons()]), h("zt-grid", {
+    }, [this.renderButtons()]), h(_grid.default, {
       "directives": [{
         name: "show",
         value: this.mediaList.length

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

@@ -3,10 +3,14 @@ require('../../overlay/index.css');
 require('../../info/index.css');
 require('../../icon/index.css');
 require('../../image/index.css');
+require('../../grid-item/index.css');
 require('../../popup/index.css');
 require('../../loading/index.css');
 require('../../toast/index.css');
+require('../../action-sheet/index.css');
+require('../../grid/index.css');
 require('../../swipe/index.css');
 require('../../swipe-item/index.css');
 require('../../image-preview/index.css');
+require('../../media-player/index.css');
 require('../index.css');

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

@@ -3,10 +3,14 @@ require('../../overlay/index.less');
 require('../../info/index.less');
 require('../../icon/index.less');
 require('../../image/index.less');
+require('../../grid-item/index.less');
 require('../../popup/index.less');
 require('../../loading/index.less');
 require('../../toast/index.less');
+require('../../action-sheet/index.less');
+require('../../grid/index.less');
 require('../../swipe/index.less');
 require('../../swipe-item/index.less');
 require('../../image-preview/index.less');
+require('../../media-player/index.less');
 require('../index.less');

package/lib/popup/index.css

@@ -1 +1 @@
-.zt-overflow-hidden{overflow:hidden!important}.zt-popup{position:fixed;max-height:100%;overflow-y:auto;background-color:#fff;-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s;-webkit-overflow-scrolling:touch}.zt-popup--center{top:50%;left:50%;-webkit-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0)}.zt-popup--center.zt-popup--round{border-radius:16px}.zt-popup--top{top:0;left:0;width:100%}.zt-popup--top.zt-popup--round{border-radius:0 0 16px 16px}.zt-popup--right{top:50%;right:0;-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}.zt-popup--right.zt-popup--round{border-radius:16px 0 0 16px}.zt-popup--bottom{bottom:0;left:0;width:100%}.zt-popup--bottom.zt-popup--round{border-radius:16px 16px 0 0}.zt-popup--left{top:50%;left:0;-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}.zt-popup--left.zt-popup--round{border-radius:0 16px 16px 0}.zt-popup--safe-area-inset-bottom{padding-bottom:constant(safe-area-inset-bottom);padding-bottom:env(safe-area-inset-bottom)}.zt-popup-slide-bottom-enter-active,.zt-popup-slide-left-enter-active,.zt-popup-slide-right-enter-active,.zt-popup-slide-top-enter-active{-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out}.zt-popup-slide-bottom-leave-active,.zt-popup-slide-left-leave-active,.zt-popup-slide-right-leave-active,.zt-popup-slide-top-leave-active{-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}.zt-popup-slide-top-enter,.zt-popup-slide-top-leave-active{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}.zt-popup-slide-right-enter,.zt-popup-slide-right-leave-active{-webkit-transform:translate3d(100%,-50%,0);transform:translate3d(100%,-50%,0)}.zt-popup-slide-bottom-enter,.zt-popup-slide-bottom-leave-active{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}.zt-popup-slide-left-enter,.zt-popup-slide-left-leave-active{-webkit-transform:translate3d(-100%,-50%,0);transform:translate3d(-100%,-50%,0)}.zt-popup__close-icon{position:absolute;z-index:1;color:rgba(45,75,115,.6);font-size:24px;cursor:pointer}.zt-popup__close-icon:active{color:#969799}.zt-popup__close-icon--top-left{top:12px;left:16px}.zt-popup__close-icon--top-right{top:12px;right:16px}.zt-popup__close-icon--bottom-left{bottom:16px;left:16px}.zt-popup__close-icon--bottom-right{right:16px;bottom:16px}
+.zt-overflow-hidden{overflow:hidden!important}.zt-popup{position:fixed;max-height:100%;overflow-y:auto;background-color:#fff;-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s;-webkit-overflow-scrolling:touch}.zt-popup__slider{position:fixed;width:100%;bottom:0;border-radius:16px 16px 0 0;background-color:#fff}.zt-popup__slider-title{height:40px;text-align:center}.zt-popup__slider-bar{display:inline-block;width:32px;height:4px;-webkit-transform:scaleY(-1);transform:scaleY(-1);background:rgba(45,75,115,.2);border-radius:3px}.zt-popup__slider-content{overflow-y:auto}.zt-popup--center{top:50%;left:50%;-webkit-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0)}.zt-popup--center.zt-popup--round{border-radius:16px}.zt-popup--top{top:0;left:0;width:100%}.zt-popup--top.zt-popup--round{border-radius:0 0 16px 16px}.zt-popup--right{top:50%;right:0;-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}.zt-popup--right.zt-popup--round{border-radius:16px 0 0 16px}.zt-popup--bottom{bottom:0;left:0;width:100%}.zt-popup--bottom.zt-popup--round{border-radius:16px 16px 0 0}.zt-popup--left{top:50%;left:0;-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}.zt-popup--left.zt-popup--round{border-radius:0 16px 16px 0}.zt-popup--safe-area-inset-bottom{padding-bottom:constant(safe-area-inset-bottom);padding-bottom:env(safe-area-inset-bottom)}.zt-popup-slide-bottom-enter-active,.zt-popup-slide-left-enter-active,.zt-popup-slide-right-enter-active,.zt-popup-slide-top-enter-active{-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out}.zt-popup-slide-bottom-leave-active,.zt-popup-slide-left-leave-active,.zt-popup-slide-right-leave-active,.zt-popup-slide-top-leave-active{-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}.zt-popup-slide-top-enter,.zt-popup-slide-top-leave-active{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}.zt-popup-slide-right-enter,.zt-popup-slide-right-leave-active{-webkit-transform:translate3d(100%,-50%,0);transform:translate3d(100%,-50%,0)}.zt-popup-slide-bottom-enter,.zt-popup-slide-bottom-leave-active{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}.zt-popup-slide-left-enter,.zt-popup-slide-left-leave-active{-webkit-transform:translate3d(-100%,-50%,0);transform:translate3d(-100%,-50%,0)}.zt-popup__slider-icon{z-index:1;color:rgba(45,75,115,.6);font-size:24px;cursor:pointer}.zt-popup__close-icon{position:absolute;z-index:1;color:rgba(45,75,115,.6);font-size:24px;cursor:pointer}.zt-popup__close-icon:active{color:#969799}.zt-popup__close-icon--top-left{top:12px;left:16px}.zt-popup__close-icon--top-right{top:12px;right:16px}.zt-popup__close-icon--bottom-left{bottom:16px;left:16px}.zt-popup__close-icon--bottom-right{right:16px;bottom:16px}

package/lib/popup/index.js

@@ -46,6 +46,14 @@ var _default = createComponent({
     customOnClickOverlay: {
       type: Function,
       default: null
+    },
+    sliderContentHeight: {
+      type: Number,
+      default: 60
+    },
+    sliderShow: {
+      type: Boolean,
+      default: false
     }
   },
   beforeCreate: function beforeCreate() {
@@ -61,72 +69,135 @@ var _default = createComponent({
     this.onOpened = createEmitter('opened');
     this.onClosed = createEmitter('closed');
   },
+  data: function data() {
+    return {
+      positionY: 0,
+      timerId: null,
+      contentStyle: "height:" + this.sliderContentHeight + "px;",
+      touchHeight: 0
+    };
+  },
   methods: {
     onClickCloseIcon: function onClickCloseIcon(event) {
       this.$emit('click-close-icon', event);
       this.close();
     },
     onClickOverlay: function onClickOverlay() {
+      if (this.sliderShow) {
+        this.contentStyle = 'height:60px';
+      }
+
       if (this.customOnClickOverlay) {
         this.customOnClickOverlay();
       } else if (this.closeOnClickOverlay) {
         this.close();
       }
+    },
+    move: function move(event) {
+      var _this2 = this;
+
+      if (this.timerId) {
+        event.preventDefault();
+      }
+
+      var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
+      this.positionY = event.touches[0].clientY;
+      this.timerId = setTimeout(function () {
+        if (_this2.positionY === 0 || _this2.positionY < h * 0.15) {
+          return;
+        }
+
+        _this2.touchHeight = _this2.positionY - 40 > h - 40 ? h - 40 : _this2.positionY;
+        _this2.contentStyle = "height:" + (h - _this2.touchHeight - 40) + "px;";
+      }, 10);
+    },
+    endMove: function endMove() {
+      clearInterval(this.timerId);
+      this.timerId = null;
+    },
+    startMove: function startMove() {
+      if (this.timerId) {
+        clearInterval(this.timerId);
+      }
+    },
+    allowSliderRender: function allowSliderRender() {
+      var h = this.$createElement;
+      return h("div", {
+        "class": bem('slider'),
+        "directives": [{
+          name: "show",
+          value: this.value
+        }]
+      }, [h("div", {
+        "class": bem('slider-title'),
+        "on": {
+          "touchmove": this.move,
+          "touchend": this.endMove,
+          "touchstart": this.startMove
+        }
+      }, [h("div", {
+        "class": bem('slider-bar')
+      })]), h("div", {
+        "class": bem('slider-content'),
+        "style": this.contentStyle
+      }, [this.slots()])]);
+    },
+    popupRender: function popupRender() {
+      var _bem;
+
+      var h = this.$createElement;
+      var round = this.round,
+          position = this.position,
+          duration = this.duration;
+      var isCenter = position === 'center';
+      var transitionName = this.transition || (isCenter ? 'zt-fade' : "zt-popup-slide-" + position);
+      var style = {};
+
+      if ((0, _utils.isDef)(duration)) {
+        var key = isCenter ? 'animationDuration' : 'transitionDuration';
+        style[key] = duration + "s";
+      }
+
+      return h("transition", {
+        "attrs": {
+          "appear": this.transitionAppear,
+          "name": transitionName
+        },
+        "on": {
+          "afterEnter": this.onOpened,
+          "afterLeave": this.onClosed
+        }
+      }, [h("div", {
+        "directives": [{
+          name: "show",
+          value: this.value
+        }],
+        "style": style,
+        "class": bem((_bem = {
+          round: round
+        }, _bem[position] = position, _bem['safe-area-inset-bottom'] = this.safeAreaInsetBottom, _bem)),
+        "on": {
+          "click": this.onClick
+        }
+      }, [this.slots(), this.closeable && h(_icon.default, {
+        "attrs": {
+          "role": "button",
+          "tabindex": "0",
+          "name": this.closeIcon
+        },
+        "class": bem('close-icon', this.closeIconPosition),
+        "on": {
+          "click": this.onClickCloseIcon
+        }
+      })])]);
     }
   },
   render: function render() {
-    var _bem;
-
-    var h = arguments[0];
-
     if (!this.shouldRender) {
       return;
     }
 
-    var round = this.round,
-        position = this.position,
-        duration = this.duration;
-    var isCenter = position === 'center';
-    var transitionName = this.transition || (isCenter ? 'zt-fade' : "zt-popup-slide-" + position);
-    var style = {};
-
-    if ((0, _utils.isDef)(duration)) {
-      var key = isCenter ? 'animationDuration' : 'transitionDuration';
-      style[key] = duration + "s";
-    }
-
-    return h("transition", {
-      "attrs": {
-        "appear": this.transitionAppear,
-        "name": transitionName
-      },
-      "on": {
-        "afterEnter": this.onOpened,
-        "afterLeave": this.onClosed
-      }
-    }, [h("div", {
-      "directives": [{
-        name: "show",
-        value: this.value
-      }],
-      "style": style,
-      "class": bem((_bem = {
-        round: round
-      }, _bem[position] = position, _bem['safe-area-inset-bottom'] = this.safeAreaInsetBottom, _bem)),
-      "on": {
-        "click": this.onClick
-      }
-    }, [this.slots(), this.closeable && h(_icon.default, {
-      "attrs": {
-        "role": "button",
-        "tabindex": "0",
-        "name": this.closeIcon
-      },
-      "class": bem('close-icon', this.closeIconPosition),
-      "on": {
-        "click": this.onClickCloseIcon
-      }
-    })])]);
+    return this.sliderShow ? this.allowSliderRender() : this.popupRender();
   }
 });
 

package/lib/popup/index.less

@@ -13,6 +13,29 @@
     transition: @popup-transition;
     -webkit-overflow-scrolling: touch;
 
+    &__slider {
+      position: fixed;
+      width: 100%;
+      bottom: 0;
+      border-radius: 16px 16px 0 0;
+      background-color: #fff;
+
+      &-title {
+        height: 40px;
+        text-align: center;
+      }
+      &-bar {
+        display: inline-block;
+        width: 32px;
+        height: 4px;
+        transform: scaleY(-1);
+        background: rgba(45,75,115,0.20);
+        border-radius: 3px;
+      }
+      &-content {
+        overflow-y: auto;
+      }
+    }
     &--center {
       top: 50%;
       left: 50%;
@@ -101,7 +124,13 @@
     &-slide-left-leave-active {
       transform: translate3d(-100%, -50%, 0);
     }
+    &__slider-icon{
+      z-index: @popup-close-icon-z-index;
+      color: @popup-close-icon-color;
+      font-size: @popup-close-icon-size;
+      cursor: pointer;
 
+    }
     &__close-icon {
       position: absolute;
       z-index: @popup-close-icon-z-index;

package/lib/radio/index.css

@@ -1 +1 @@
-.zt-radio{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;overflow:hidden;cursor:pointer;-webkit-user-select:none;user-select:none;padding:10px 0}.zt-radio--disabled{cursor:not-allowed}.zt-radio--label-disabled{cursor:default}.zt-radio--horizontal{margin-left:12px}.zt-radio__icon{-webkit-box-flex:0;-webkit-flex:none;flex:none;height:1em;font-size:24px;line-height:1em;cursor:pointer}.zt-radio__icon i,.zt-radio__icon img{-webkit-transform:scale(.8333);transform:scale(.8333);-webkit-transform-origin:center;transform-origin:center}.zt-radio__icon .zt-icon{display:block;box-sizing:border-box;width:1.25em;height:1.25em;color:transparent;font-size:.8em;line-height:1.15em;text-align:center;-webkit-transition-duration:.2s;transition-duration:.2s;-webkit-transition-property:color,border-color,background-color;transition-property:color,border-color,background-color}.zt-radio__icon--round .zt-icon{border-radius:100%}.zt-radio__icon--checked .zt-icon{color:#fff;background-color:#0091fa;border:1px solid rgba(255,255,255,.5);box-shadow:inset 1px 1px 2px 0 rgba(0,0,0,.2)}.zt-radio__icon--disabled{cursor:not-allowed}.zt-radio__icon--disabled .zt-icon{background-image:-webkit-linear-gradient(316deg,#e1e6eb 0,#e5edf5 100%);background-image:linear-gradient(134deg,#e1e6eb 0,#e5edf5 100%);border:1px solid rgba(45,75,115,.08);box-shadow:-1px -1px 2px 0 #fff,0 0 3px 0 rgba(45,75,115,.2)}.zt-radio__icon--disabled.zt-radio__icon--checked .zt-icon{opacity:.4;background:#0091fa;color:#fff}.zt-radio__label{margin-left:8px;color:#000;line-height:24px}.zt-radio__label--left{margin:0 8px 0 0}.zt-radio__label--disabled{color:#c8c9cc}.zt-radio__disable-icon .zt-radio__icon--round:not(.zt-radio__icon--disabled,.zt-radio__icon--checked){width:18px;height:18px;border-radius:100%;background-image:-webkit-linear-gradient(315deg,#e6ebf0 0,#fff 100%);background-image:linear-gradient(135deg,#e6ebf0 0,#fff 100%);border:1px solid rgba(45,75,115,.13);box-shadow:-1px -1px 2px 0 #fff,0 0 3px 0 rgba(45,75,115,.2)}
+.zt-radio{display:-webkit-box;display:-webkit-flex;display:flex;overflow:hidden;cursor:pointer;-webkit-user-select:none;user-select:none;padding:14px 0}.zt-radio--disabled{cursor:not-allowed}.zt-radio--label-disabled{cursor:default}.zt-radio--horizontal{margin-left:12px}.zt-radio__icon{font-size:20px;cursor:pointer}.zt-radio__icon .zt-icon{display:block;box-sizing:border-box;width:1em;height:1em;color:transparent;font-size:inherit;-webkit-transition-duration:.2s;transition-duration:.2s;-webkit-transition-property:color,border-color,background-color;transition-property:color,border-color,background-color}.zt-radio__icon--round .zt-icon{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;align-items:center;border-radius:100%}.zt-radio__icon--checked .zt-icon{color:#fff;background-color:#0091fa;border:1px solid rgba(255,255,255,.5);box-shadow:inset 1px 1px 2px 0 rgba(0,0,0,.2)}.zt-radio__icon--disabled{cursor:not-allowed}.zt-radio__icon--disabled .zt-icon{background-image:-webkit-linear-gradient(316deg,#e1e6eb 0,#e5edf5 100%);background-image:linear-gradient(134deg,#e1e6eb 0,#e5edf5 100%);border:1px solid rgba(45,75,115,.08);box-shadow:-1px -1px 2px 0 #fff,0 0 3px 0 rgba(45,75,115,.2)}.zt-radio__icon--disabled.zt-radio__icon--checked .zt-icon{opacity:.4;background:#0091fa;color:#fff}.zt-radio__label{margin-left:8px;color:#000;line-height:20px}.zt-radio__label--left{margin:0 8px 0 0}.zt-radio__label--disabled{color:#c8c9cc}.zt-radio__disable-icon .zt-radio__icon--round:not(.zt-radio__icon--disabled,.zt-radio__icon--checked){width:1em;height:1em;box-sizing:border-box;border-radius:100%;background-image:-webkit-linear-gradient(315deg,#e6ebf0 0,#fff 100%);background-image:linear-gradient(135deg,#e6ebf0 0,#fff 100%);border:1px solid rgba(45,75,115,.13);box-shadow:-1px -1px 2px 0 #fff,0 0 3px 0 rgba(45,75,115,.2)}

package/lib/radio/index.less

@@ -2,7 +2,6 @@
 
 .zt-radio {
   display: flex;
-  align-items: center;
   overflow: hidden;
   cursor: pointer;
   user-select: none;
@@ -21,31 +20,25 @@
   }
 
   &__icon {
-    flex: none;
-    height: 1em;
     font-size: @radio-size;
-    line-height: 1em;
     cursor: pointer;
-    i, img {
-      transform: scale(0.8333);
-      transform-origin: center;
-    }
 
     .zt-icon {
       display: block;
       box-sizing: border-box;
-      width: 1.25em;
-      height: 1.25em;
+      width: 1em;
+      height: 1em;
       color: transparent;
-      font-size: 0.8em;
-      line-height: 1.15em;
-      text-align: center;
+      font-size: inherit;
       transition-duration: @radio-transition-duration;
       transition-property: color, border-color, background-color;
     }
 
     &--round {
       .zt-icon {
+        display: flex;
+        justify-content: center;
+        align-items: center;
         border-radius: 100%;
       }
     }
@@ -95,8 +88,9 @@
 
 .zt-radio__disable-icon {
   .zt-radio__icon--round:not(.zt-radio__icon--disabled,.zt-radio__icon--checked){
-    width: 18px;
-    height: 18px;
+    width: 1em;
+    height: 1em;
+    box-sizing: border-box;
     border-radius: 100%;
     background-image: @gradient-white-1;
     border: 1px solid @radio-border-color;

package/lib/search/index.css

@@ -1 +1 @@
-.zt-search{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;box-sizing:border-box;padding:8px 16px;background-color:#fff}.zt-search__content{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-flex:1;-webkit-flex:1;flex:1;background-color:rgba(0,0,0,.04);border:0 solid rgba(0,0,0,.06);border-radius:2px}.zt-search__content--round{border-radius:999px}.zt-search__label{padding:4px 0 4px 8px;color:rgba(0,0,0,.6);font-family:PingFangSC-Semibold;font-weight:400;font-size:14px;line-height:20px}.zt-search .zt-field__root{background-color:transparent;padding:0}.zt-search .zt-cell{-webkit-box-flex:1;-webkit-flex:1;flex:1;padding:4px 8px;background-color:transparent;line-height:20px;font-size:14px;font-family:PingFangSC-Regular;font-weight:400}.zt-search .zt-cell__left-icon{color:#969799}.zt-search .zt-field{margin:0}.zt-search .zt-field__control{color:#000}.zt-search--show-action{padding-right:0}.zt-search input{caret-color:#0091fa}.zt-search input::-webkit-search-cancel-button,.zt-search input::-webkit-search-decoration,.zt-search input::-webkit-search-results-button,.zt-search input::-webkit-search-results-decoration{display:none}.zt-search__action{padding:0 16px;color:#0091fa;font-size:16px;font-family:PingFangSC-Semibold;height:28px;font-weight:600;cursor:pointer;-webkit-user-select:none;user-select:none;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.zt-search__action:active{background-color:rgba(0,0,0,.04)}
+.zt-search{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;box-sizing:border-box;padding:8px 16px;background-color:#f5faff}.zt-search__content{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-flex:1;-webkit-flex:1;flex:1;background-color:rgba(45,75,115,.04);border:1px solid transparent;border-radius:2px;box-shadow:inset 4px 4px 8px 0 rgba(45,75,115,.1);background-clip:padding-box;position:relative}.zt-search__content::before{content:'';position:absolute;top:0;right:0;left:0;bottom:0;z-index:-1;margin:-1px;border-radius:inherit;background:-webkit-linear-gradient(#fff,rgba(255,255,255,.4));background:linear-gradient(#fff,rgba(255,255,255,.4))}.zt-search__content--round{border-radius:999px}.zt-search__label{padding:8px 0 8px 12px;color:rgba(0,0,0,.6);font-family:PingFangSC-Semibold;font-weight:400;font-size:14px;line-height:20px}.zt-search .zt-field__root{background-color:transparent;padding:0}.zt-search .zt-field__label{margin-right:0}.zt-search .zt-cell__title.zt-field__label{-webkit-box-flex:unset;-webkit-flex:unset;flex:unset}.zt-search .zt-cell{-webkit-box-flex:1;-webkit-flex:1;flex:1;padding:8px 12px;background:0 0;line-height:20px;font-size:14px;font-family:PingFangSC-Regular;font-weight:400}.zt-search .zt-cell__left-icon{color:#969799}.zt-search .zt-field{margin:0}.zt-search .zt-field__control{color:#000}.zt-search--show-action{padding-right:0}.zt-search input{caret-color:#0091fa}.zt-search input::-webkit-search-cancel-button,.zt-search input::-webkit-search-decoration,.zt-search input::-webkit-search-results-button,.zt-search input::-webkit-search-results-decoration{display:none}.zt-search input::-webkit-input-placeholder{color:rgba(45,75,115,.2)}.zt-search input::placeholder{color:rgba(45,75,115,.2)}.zt-search__action{padding:0 16px 0 12px;color:#0091fa;font-size:16px;font-family:PingFangSC-Semibold;height:28px;font-weight:600;cursor:pointer;-webkit-user-select:none;user-select:none;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.zt-search__action:active{background-color:rgba(0,0,0,.04)}

package/lib/search/index.js

@@ -114,7 +114,7 @@ Search.props = {
   clearTrigger: String,
   shape: {
     type: String,
-    default: 'square'
+    default: 'round'
   },
   clearable: {
     type: Boolean,

package/lib/search/index.less

@@ -11,8 +11,24 @@
     display: flex;
     flex: 1;
     background-color: @search-content-background-color;
-    border: 0 solid rgba(0,0,0,0.06);
+    border: 1px solid transparent;
     border-radius: @border-radius-sm;
+    box-shadow: @search-content-box-shadow;
+    background-clip: padding-box;
+    position: relative;
+
+    &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        right: 0;
+        left: 0;
+        bottom: 0;
+        z-index: -1;
+        margin: -1px;
+        border-radius: inherit; 
+        background: @search-content-border-color;
+    }
 
     &--round {
       border-radius: @border-radius-max;
@@ -33,10 +49,18 @@
     padding: 0;
   }
 
+  .zt-field__label {
+    margin-right: 0;
+  }
+
+  .zt-cell__title.zt-field__label {
+    flex: unset;
+  }
+
   .zt-cell {
     flex: 1;
-    padding: 4px @padding-xs;
-    background-color: transparent;
+    padding: @search-cell-padding;
+    background: transparent;
     line-height: @search-input-height;
     font-size: @font-size-md;
     font-family: PingFangSC-Regular;
@@ -66,6 +90,10 @@
       display: none;
     }
 
+    &::placeholder {
+        color: @text-color-5;
+    }
+
     caret-color:@search-input-caret-color;
   }
 

package/lib/style/var.less

@@ -46,6 +46,7 @@
 @text-color-2: rgba(45, 75, 115, 0.8);
 @text-color-3: #2d4b73;
 @text-color-4: rgba(45, 75, 115, 0.4);
+@text-color-5: rgba(45, 75, 115, 0.2);
 @active-color: @gray-a04;
 @active-opacity: 0.7;
 @disabled-opacity: 0.4;
@@ -198,7 +199,7 @@
 @button-border-width: @border-width-base;
 @button-border-radius: 22px;
 @button-round-border-radius: @border-radius-max;
-@button-plain-background-color: @gray-9;
+@button-plain-background-color: transparent;
 @button-disabled-opacity: @disabled-opacity;
 @button-icon-mini-size: 16px;
 @button-icon-small-size: 20px;
@@ -270,8 +271,8 @@
 
 // Cell
 @cell-font-size: @font-size-lg;
-@cell-line-height: 24px;
-@cell-vertical-padding: 16px;
+@cell-line-height: 20px;
+@cell-vertical-padding: 12px;
 @cell-horizontal-padding: @padding-md;
 @cell-text-color: #2D4B73;
 @cell-background-color: @white;
@@ -300,7 +301,7 @@
 @cell-group-inset-title-padding: @padding-md @padding-md @padding-xs @padding-xl;
 
 // Checkbox
-@checkbox-size: 24px;
+@checkbox-size: 20px;
 @checkbox-padding: 14px 0;
 @checkbox-border-color: @border-color-3;
 @checkbox-transition-duration: @animation-duration-fast;
@@ -475,9 +476,10 @@
 @field-text-area-min-height: 60px;
 @field-word-limit-color: @gray-7;
 @field-word-limit-font-size: @font-size-sm;
-@field-word-limit-line-height: 16px;
+@field-word-limit-line-height: 20px;
 @field-disabled-text-color: @gray-5;
 @field-zt-icon-size: 20px;
+@field-zt-icon-color: rgba(45, 75, 115, .4);
 
 // GridItem
 @grid-item-content-padding: @padding-md @padding-xs;
@@ -729,8 +731,8 @@
 @pull-refresh-head-text-color: @gray-6;
 
 // Radio
-@radio-size: 24px;
-@radio-padding: 10px 0;
+@radio-size: 20px;
+@radio-padding: 14px 0;
 @radio-border-color: @border-color-3;
 @radio-transition-duration: @animation-duration-fast;
 @radio-label-margin: @padding-xs;
@@ -767,18 +769,21 @@
 
 // Search
 @search-padding: 8px @padding-md;
-@search-background-color: @white;
-@search-content-background-color: @gray-a04;
+@search-background-color: @gray-9;
+@search-content-background-color: rgba(45,75,115,0.04);
+@search-content-box-shadow: inset 4px 4px 8px 0 rgba(45,75,115,0.10);
+@search-content-border-color: linear-gradient(#fff, rgba(255, 255, 255, 0.4));
 @search-input-height: 20px;
-@search-label-padding: 4px 0 4px 8px;
+@search-label-padding: 8px 0 8px 12px;
 @search-label-color: @text-color;
 @search-label-font-size: @font-size-md;
 @search-left-icon-color: @gray-6;
-@search-action-padding: 0 @padding-md;
+@search-action-padding: 0 @padding-md 0 @padding-sm;
 @search-action-text-color: @blue;
 @search-action-font-size: @font-size-lg;
 @search-action-height: 28px;
 @search-input-caret-color: #0091FA;
+@search-cell-padding: 8px 12px;
 
 // Sidebar
 @sidebar-width: 80px;

package/lib/switch-cell/index.css

@@ -1 +1 @@
-.zt-switch-cell{padding-top:15px;padding-bottom:15px}.zt-switch-cell--large{padding-top:11px;padding-bottom:11px}.zt-switch-cell .zt-switch{float:right}
+.zt-switch-cell{padding-top:11px;padding-bottom:11px}.zt-switch-cell--large{padding-top:11px;padding-bottom:11px}.zt-switch-cell .zt-switch{float:right}