dolphin-weex-ui 2.2.0 → 2.2.2

package/dist/index.web.js

@@ -7841,7 +7841,7 @@ exports = module.exports = __webpack_require__(0)(true);
 
 
 // module
-exports.push([module.i, "\n.dof-popup[data-v-0beb2564] {\n  position: fixed;\n  /* width: 750px; */\n  overflow: hidden;\n}\n.title[data-v-0beb2564] {\n  padding: 0.4rem;\n  text-align: center;\n  font-size: 0.37333rem;\n  color: #8a8a8f;\n  line-height: 0.64rem;\n  background-color: #ffffff;\n}\n.midea-actionsheet-content[data-v-0beb2564] {\n  -webkit-box-orient: vertical;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: column;\n          flex-direction: column;\n  -webkit-box-flex: 1;\n  -webkit-flex: 1;\n          flex: 1;\n  /* background-color: #ffffff; */\n}\n.midea-actionsheet-list-first[data-v-0beb2564] {\n  /* border-top-left-radius: 32px;\n  border-top-right-radius: 32px; */\n  background-color: #ffffff;\n}\n.midea-actionsheet-list-first[data-v-0beb2564]:active {\n  background-color: #f5f5f5;\n}\n.midea-actionsheet-list[data-v-0beb2564] {\n  border-top-width: 0.02667rem;\n  border-top-color: #f9f9f9;\n  background-color: #ffffff;\n}\n.midea-actionsheet-list[data-v-0beb2564]:active {\n  background-color: #f5f5f5;\n}\n.midea-actionsheet-textWrapper[data-v-0beb2564] {\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: row;\n          flex-direction: row;\n  -webkit-box-pack: center;\n  -webkit-justify-content: center;\n          justify-content: center;\n  -webkit-box-align: center;\n  -webkit-align-items: center;\n          align-items: center;\n}\n.midea-actionsheet-text[data-v-0beb2564] {\n  font-family: PingFangSC-Regular;\n  text-align: center;\n  font-size: 0.42667rem;\n  line-height: 1.28rem;\n  /* color: #000000; */\n}\n.midea-actionsheet-bottom[data-v-0beb2564] {\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: row;\n          flex-direction: row;\n  margin-top: 0.21333rem;\n  -webkit-box-pack: justify;\n  -webkit-justify-content: space-between;\n          justify-content: space-between;\n}\n.midea-actionsheet-btn[data-v-0beb2564] {\n  font-size: 0.42667rem;\n  color: #232323;\n  background-color: #ffffff;\n  line-height: 1.22667rem;\n  text-align: center;\n  -webkit-box-flex: 1;\n  -webkit-flex: 1;\n          flex: 1; /* add by lau resolve bottom button */\n}\n.leftBtn[data-v-0beb2564] {\n  color: #666666;\n}\n.top[data-v-0beb2564] {\n  left: 0;\n  right: 0;\n}\n.bottom[data-v-0beb2564] {\n  left: 0;\n  right: 0;\n}\n.left[data-v-0beb2564] {\n  bottom: 0;\n  top: 0;\n}\n.right[data-v-0beb2564] {\n  bottom: 0;\n  top: 0;\n}\n", "", {"version":3,"sources":["/Users/wuhm45/Documents/code/weex组件库/dolphin-weex-ui/packages/dof-actionsheet/index.vue?7ebbf179"],"names":[],"mappings":";AA0DA;EACA,gBAAA;EACA,mBAAA;EACA,iBAAA;CACA;AAEA;EACA,gBAAA;EACA,mBAAA;EACA,sBAAA;EACA,eAAA;EACA,qBAAA;EACA,0BAAA;CACA;AAEA;EACA,6BAAA;EAAA,8BAAA;EAAA,+BAAA;UAAA,uBAAA;EACA,oBAAA;EAAA,gBAAA;UAAA,QAAA;EACA,gCAAA;CACA;AACA;EACA;mCACA;EACA,0BAAA;CACA;AACA;EACA,0BAAA;CACA;AACA;EACA,6BAAA;EACA,0BAAA;EACA,0BAAA;CACA;AACA;EACA,0BAAA;CACA;AACA;EACA,+BAAA;EAAA,8BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,yBAAA;EAAA,gCAAA;UAAA,wBAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;CACA;AACA;EACA,gCAAA;EACA,mBAAA;EACA,sBAAA;EACA,qBAAA;EACA,qBAAA;CACA;AAEA;EACA,+BAAA;EAAA,8BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,uBAAA;EACA,0BAAA;EAAA,uCAAA;UAAA,+BAAA;CACA;AACA;EACA,sBAAA;EACA,eAAA;EACA,0BAAA;EACA,wBAAA;EACA,mBAAA;EACA,oBAAA;EAAA,gBAAA;UAAA,QAAA,CAAA,sCAAA;CACA;AACA;EACA,eAAA;CACA;AAEA;EACA,QAAA;EACA,SAAA;CACA;AAEA;EACA,QAAA;EACA,SAAA;CACA;AAEA;EACA,UAAA;EACA,OAAA;CACA;AAEA;EACA,UAAA;EACA,OAAA;CACA","file":"index.vue","sourcesContent":["<template>\n  <div>\n    <div @touchend=\"handleTouchEnd\">\n      <dof-overlay\n        :show=\"haveOverlay && isOverShow\"\n        v-if=\"show\"\n        ref=\"overlay\"\n        v-bind=\"overlayCfg\"\n        @dofOverlayBodyClicked=\"dofOverlayBodyClicking\"\n      ></dof-overlay>\n    </div>\n    <div ref=\"dof-popup\" v-if=\"show\" :hack=\"isNeedShow\" @click=\"() => {}\" :class=\"['dof-popup', pos]\" :style=\"padStyle\">\n      <slot name=\"title\">\n        <text\n          v-if=\"title || $slots.title\"\n          class=\"title\"\n          :style=\"\n            Object.assign({}, titleStyle, {\n              'border-top-left-radius': borderRadius,\n              'border-top-right-radius': borderRadius\n            })\n          \"\n          >{{ title }}</text\n        >\n      </slot>\n      <div class=\"midea-actionsheet-content\">\n        <div\n          v-bind:class=\"['midea-actionsheet-list']\"\n          v-for=\"(item, index) in items\"\n          :key=\"index\"\n          @click=\"actionsheetItemClick(item, index)\"\n          :style=\"\n            Object.assign({}, itemStyle, {\n              'border-top-left-radius': index == 0 && !title ? borderRadius : '0px',\n              'border-top-right-radius': index == 0 && !title ? borderRadius : '0px'\n            })\n          \"\n        >\n          <slot :name=\"'item-' + index\">\n            <div class=\"midea-actionsheet-textWrapper\">\n              <text :class=\"['midea-actionsheet-text']\" :style=\"textStyleOps(item)\">{{\n                item.title ? item.title : item\n              }}</text>\n            </div>\n          </slot>\n        </div>\n      </div>\n      <div v-if=\"button && button.length > 0\" class=\"midea-actionsheet-bottom\" :style=\"bottomIpxStyle\">\n        <text class=\"midea-actionsheet-btn leftBtn\" @click=\"actionsheetBtnClick(button)\" :style=\"defaultBtnStyle\">{{\n          button\n        }}</text>\n      </div>\n      <div :style=\"{ height: '0px', 'background-color': '#ffffff' }\"></div>\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.dof-popup {\n  position: fixed;\n  /* width: 750px; */\n  overflow: hidden;\n}\n\n.title {\n  padding: 30px;\n  text-align: center;\n  font-size: 28px;\n  color: #8a8a8f;\n  line-height: 48px;\n  background-color: #ffffff;\n}\n\n.midea-actionsheet-content {\n  flex-direction: column;\n  flex: 1;\n  /* background-color: #ffffff; */\n}\n.midea-actionsheet-list-first {\n  /* border-top-left-radius: 32px;\n  border-top-right-radius: 32px; */\n  background-color: #ffffff;\n}\n.midea-actionsheet-list-first:active {\n  background-color: #f5f5f5;\n}\n.midea-actionsheet-list {\n  border-top-width: 2px;\n  border-top-color: #f9f9f9;\n  background-color: #ffffff;\n}\n.midea-actionsheet-list:active {\n  background-color: #f5f5f5;\n}\n.midea-actionsheet-textWrapper {\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n}\n.midea-actionsheet-text {\n  font-family: PingFangSC-Regular;\n  text-align: center;\n  font-size: 32px;\n  line-height: 96px;\n  /* color: #000000; */\n}\n\n.midea-actionsheet-bottom {\n  flex-direction: row;\n  margin-top: 16px;\n  justify-content: space-between;\n}\n.midea-actionsheet-btn {\n  font-size: 32px;\n  color: #232323;\n  background-color: #ffffff;\n  line-height: 92px;\n  text-align: center;\n  flex: 1; /* add by lau resolve bottom button */\n}\n.leftBtn {\n  color: #666666;\n}\n\n.top {\n  left: 0;\n  right: 0;\n}\n\n.bottom {\n  left: 0;\n  right: 0;\n}\n\n.left {\n  bottom: 0;\n  top: 0;\n}\n\n.right {\n  bottom: 0;\n  top: 0;\n}\n</style>\n\n<script>\nconst animation = weex.requireModule('animation')\nconst { platform } = weex.config.env\nconst isWeb = typeof window === 'object' && platform.toLowerCase() === 'web'\nimport { Bridge } from 'dolphin-native-bridge'\nimport DofOverlay from '../dof-overlay'\nexport default {\n  components: { DofOverlay },\n  props: {\n    show: {\n      type: Boolean,\n      default: false\n    },\n    pos: {\n      type: String,\n      default: 'bottom'\n    },\n    // 背景色，即按钮上方的横条颜色，暂不开放\n    popupColor: {\n      type: String,\n      default: '#F9F9F9'\n    },\n    overlayCfg: {\n      type: Object,\n      default: () => ({\n        hasAnimation: true,\n        timingFunction: ['ease-in', 'ease-out'],\n        duration: 300,\n        opacity: 0.3\n      })\n    },\n    // height: {\n    //   type: [Number, String],\n    //   default: 840\n    // },\n    standOut: {\n      type: [Number, String],\n      default: 0\n    },\n    width: {\n      type: [Number, String],\n      default: 750\n    },\n    animation: {\n      type: Object,\n      default: () => ({\n        // timingFunction: 'ease-in'\n        timingFunction: 'cubic-bezier(0.25, 0.1, 0.25, 1.0)'\n      })\n    },\n    title: {\n      type: String,\n      default: ''\n    },\n    button: {\n      type: String,\n      default: '取消'\n    },\n    items: {\n      type: Array,\n      default: () => []\n    },\n    titleStyle: {\n      type: Object,\n      default: () => {}\n    },\n    defaultBtnStyle: {\n      type: Object,\n      default: () => {}\n    },\n    itemStyle: {\n      type: Object,\n      default: () => {}\n    },\n    borderRadius: {\n      type: String,\n      default: '32px'\n    }\n  },\n  data: () => ({\n    haveOverlay: true,\n    isOverShow: true,\n    bottomArc: 0\n  }),\n  computed: {\n    isNeedShow() {\n      try {\n        setTimeout(() => {\n          this.appearPopup(this.show)\n        }, 50)\n      } catch (error) {\n        this.$nextTick(() => {\n          this.appearPopup(this.show)\n        })\n      }\n      return this.show\n    },\n    // _height() {\n    //   this.appearPopup(this.show, 150)\n    //   return this.popHeight\n    // },\n    // transformValue() {\n    //   return this.getTransform(this.pos, this.width, this.popHeight, true)\n    // },\n    padStyle() {\n      const { pos, width, popupColor } = this\n      const style = {\n        width: `${width}px`,\n        backgroundColor: popupColor\n        // backgroundColor: '#666666'\n      }\n      if (pos === 'bottom') {\n        style.bottom = '0px'\n        style.transform = 'translateY(100%)'\n        style.borderTopLeftRadius = this.borderRadius\n        style.borderTopRightRadius = this.borderRadius\n      }\n      return style\n    },\n    bottomIpxStyle() {\n      const style = {\n        backgroundColor: '#ffffff',\n        paddingBottom: `${this.isipx ? 84 : 16}px`\n      }\n      return style\n    },\n    isipx: function() {\n      if (this.bottomArc) return true\n      return (\n        weex &&\n        (weex.config.env.deviceModel === 'iPhone10,3' ||\n        weex.config.env.deviceModel === 'iPhone10,6' || // iphoneX\n        weex.config.env.deviceModel === 'iPhone11,8' || // iPhone XR\n        weex.config.env.deviceModel === 'iPhone11,2' || // iPhone XS\n        weex.config.env.deviceModel === 'iPhone11,4' ||\n        weex.config.env.deviceModel === 'iPhone11,6' || // iPhone XS Max\n        weex.config.env.deviceModel === 'iPhone12,1' || // iPhone11\n        weex.config.env.deviceModel === 'iPhone12,3' ||\n        weex.config.env.deviceModel === 'iPhone12,5' || // iPhone 11 Pro iPhone 11 Pro Max\n        weex.config.env.deviceModel === 'iPhone13,1' ||\n        weex.config.env.deviceModel === 'iPhone13,2' || // iPhone12 Mini && iPhone12\n        weex.config.env.deviceModel === 'iPhone13,3' || //iPhone12 Pro\n        weex.config.env.deviceModel === 'iPhone13,4' || // iPhone12 Pro Max\n        weex.config.env.deviceModel === 'iPhone14,4' || //iPhone 13 mini\n        weex.config.env.deviceModel === 'iPhone14,5' || //iPhone 13\n        weex.config.env.deviceModel === 'iPhone14,2' || //iPhone 13 Pro\n          weex.config.env.deviceModel === 'Iphone14,3') //iPhone 13 Pro Max\n      )\n    }\n\n    // popHeight() {\n    //   // 根据下拉菜单内容计算bottom距离\n    //   // var length = this.items.length\n    //   //add by lau 可以不传递item,并且自动获取高度\n    //   var length = (this.items && this.items.length) || 0\n    //   var height,\n    //     extraHeight = this.isipx ? 84 : 16 // 84=16+68\n\n    //   if (this.items && this.items.length > 0) {\n    //     // var len = (length + 1) * 100 + 80;\n    //     height = (length + 1) * 96 + extraHeight\n    //   } else {\n    //     height = this.popHeight + 80\n    //   }\n    //   height = this.title ? height + 108 : height\n    //   return height\n    // }\n  },\n  created() {\n    Bridge.getAllBarHeight().then(res => {\n      this.bottomArc = res.bottomArc || 0\n    })\n  },\n  methods: {\n    // '取消'按钮点击事件\n    actionsheetBtnClick(buttonText) {\n      this.appearPopup(false)\n      this.$refs.overlay.appearOverlay(false)\n      this.$emit('dofCancelClick', { buttonText })\n    },\n\n    // 菜单项点击事件\n    actionsheetItemClick(item, index) {\n      this.appearPopup(false)\n      this.$refs.overlay.appearOverlay(false)\n      this.$emit('dofItemClick', { item, index })\n    },\n\n    handleTouchEnd(e) {\n      // 在支付宝上面有点击穿透问题\n      const { platform } = weex.config.env\n      platform === 'Web' && e.preventDefault && e.preventDefault()\n    },\n    hide() {\n      this.appearPopup(false)\n      this.$refs.overlay.appearOverlay(false)\n    },\n    dofOverlayBodyClicking() {\n      this.show && this.appearPopup(false)\n    },\n    appearPopup(show, duration = 300) {\n      const popupEl = this.$refs['dof-popup']\n      if (!popupEl) {\n        return\n      }\n      animation.transition(\n        popupEl,\n        {\n          styles: {\n            transform: this.getTransform(this.pos, show)\n          },\n          duration,\n          delay: 0,\n          ...this.animation\n        },\n        () => {\n          if (!show) {\n            this.$emit('dofPopupOverlayClicked', { pos: this.pos })\n          }\n        }\n      )\n    },\n    getTransform(pos, show) {\n      let _transform\n      switch (pos) {\n        case 'top':\n        case 'left':\n          _transform = `translateY(${show ? 0 : -100}%)`\n          break\n        case 'bottom':\n        case 'right':\n          _transform = `translateY(${show ? 0 : 100}%)`\n          break\n      }\n      return _transform\n    },\n    textStyleOps(item) {\n      return item.textColor ? { color: item.textColor } : { color: '#000000' }\n    }\n  }\n}\n</script>\n"],"sourceRoot":""}]);
+exports.push([module.i, "\n.dof-popup[data-v-0beb2564] {\n  position: fixed;\n  /* width: 750px; */\n  overflow: hidden;\n}\n.title[data-v-0beb2564] {\n  padding: 0.4rem;\n  text-align: center;\n  font-size: 0.37333rem;\n  color: #8a8a8f;\n  line-height: 0.64rem;\n  background-color: #ffffff;\n}\n.midea-actionsheet-content[data-v-0beb2564] {\n  -webkit-box-orient: vertical;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: column;\n          flex-direction: column;\n  -webkit-box-flex: 1;\n  -webkit-flex: 1;\n          flex: 1;\n  /* background-color: #ffffff; */\n}\n.midea-actionsheet-list-first[data-v-0beb2564] {\n  /* border-top-left-radius: 32px;\n  border-top-right-radius: 32px; */\n  background-color: #ffffff;\n}\n.midea-actionsheet-list-first[data-v-0beb2564]:active {\n  background-color: #f5f5f5;\n}\n.midea-actionsheet-list[data-v-0beb2564] {\n  border-top-width: 0.02667rem;\n  border-top-color: #f9f9f9;\n  background-color: #ffffff;\n}\n.midea-actionsheet-list[data-v-0beb2564]:active {\n  background-color: #f5f5f5;\n}\n.midea-actionsheet-textWrapper[data-v-0beb2564] {\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: row;\n          flex-direction: row;\n  -webkit-box-pack: center;\n  -webkit-justify-content: center;\n          justify-content: center;\n  -webkit-box-align: center;\n  -webkit-align-items: center;\n          align-items: center;\n}\n.midea-actionsheet-text[data-v-0beb2564] {\n  font-family: PingFangSC-Regular;\n  text-align: center;\n  font-size: 0.42667rem;\n  line-height: 1.28rem;\n  /* color: #000000; */\n}\n.midea-actionsheet-bottom[data-v-0beb2564] {\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: row;\n          flex-direction: row;\n  margin-top: 0.21333rem;\n  -webkit-box-pack: justify;\n  -webkit-justify-content: space-between;\n          justify-content: space-between;\n}\n.midea-actionsheet-btn[data-v-0beb2564] {\n  font-size: 0.42667rem;\n  color: #232323;\n  background-color: #ffffff;\n  line-height: 1.22667rem;\n  text-align: center;\n  -webkit-box-flex: 1;\n  -webkit-flex: 1;\n          flex: 1; /* add by lau resolve bottom button */\n}\n.leftBtn[data-v-0beb2564] {\n  color: #666666;\n}\n.top[data-v-0beb2564] {\n  left: 0;\n  right: 0;\n}\n.bottom[data-v-0beb2564] {\n  left: 0;\n  right: 0;\n}\n.left[data-v-0beb2564] {\n  bottom: 0;\n  top: 0;\n}\n.right[data-v-0beb2564] {\n  bottom: 0;\n  top: 0;\n}\n", "", {"version":3,"sources":["/Users/wuhm45/Documents/code/weex组件库/dolphin-weex-ui/packages/dof-actionsheet/index.vue?a659a594"],"names":[],"mappings":";AA0DA;EACA,gBAAA;EACA,mBAAA;EACA,iBAAA;CACA;AAEA;EACA,gBAAA;EACA,mBAAA;EACA,sBAAA;EACA,eAAA;EACA,qBAAA;EACA,0BAAA;CACA;AAEA;EACA,6BAAA;EAAA,8BAAA;EAAA,+BAAA;UAAA,uBAAA;EACA,oBAAA;EAAA,gBAAA;UAAA,QAAA;EACA,gCAAA;CACA;AACA;EACA;mCACA;EACA,0BAAA;CACA;AACA;EACA,0BAAA;CACA;AACA;EACA,6BAAA;EACA,0BAAA;EACA,0BAAA;CACA;AACA;EACA,0BAAA;CACA;AACA;EACA,+BAAA;EAAA,8BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,yBAAA;EAAA,gCAAA;UAAA,wBAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;CACA;AACA;EACA,gCAAA;EACA,mBAAA;EACA,sBAAA;EACA,qBAAA;EACA,qBAAA;CACA;AAEA;EACA,+BAAA;EAAA,8BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,uBAAA;EACA,0BAAA;EAAA,uCAAA;UAAA,+BAAA;CACA;AACA;EACA,sBAAA;EACA,eAAA;EACA,0BAAA;EACA,wBAAA;EACA,mBAAA;EACA,oBAAA;EAAA,gBAAA;UAAA,QAAA,CAAA,sCAAA;CACA;AACA;EACA,eAAA;CACA;AAEA;EACA,QAAA;EACA,SAAA;CACA;AAEA;EACA,QAAA;EACA,SAAA;CACA;AAEA;EACA,UAAA;EACA,OAAA;CACA;AAEA;EACA,UAAA;EACA,OAAA;CACA","file":"index.vue","sourcesContent":["<template>\n  <div>\n    <div @touchend=\"handleTouchEnd\">\n      <dof-overlay\n        :show=\"haveOverlay && isOverShow\"\n        v-if=\"show\"\n        ref=\"overlay\"\n        v-bind=\"overlayCfg\"\n        @dofOverlayBodyClicked=\"dofOverlayBodyClicking\"\n      ></dof-overlay>\n    </div>\n    <div ref=\"dof-popup\" v-if=\"show\" :hack=\"isNeedShow\" @click=\"() => {}\" :class=\"['dof-popup', pos]\" :style=\"padStyle\">\n      <slot name=\"title\">\n        <text\n          v-if=\"title || $slots.title\"\n          class=\"title\"\n          :style=\"\n            Object.assign({}, titleStyle, {\n              'border-top-left-radius': borderRadius,\n              'border-top-right-radius': borderRadius\n            })\n          \"\n          >{{ title }}</text\n        >\n      </slot>\n      <div class=\"midea-actionsheet-content\">\n        <div\n          v-bind:class=\"['midea-actionsheet-list']\"\n          v-for=\"(item, index) in items\"\n          :key=\"index\"\n          @click=\"actionsheetItemClick(item, index)\"\n          :style=\"\n            Object.assign({}, itemStyle, {\n              'border-top-left-radius': index == 0 && !title ? borderRadius : '0px',\n              'border-top-right-radius': index == 0 && !title ? borderRadius : '0px'\n            })\n          \"\n        >\n          <slot :name=\"'item-' + index\">\n            <div class=\"midea-actionsheet-textWrapper\">\n              <text :class=\"['midea-actionsheet-text']\" :style=\"textStyleOps(item)\">{{\n                item.title ? item.title : item\n              }}</text>\n            </div>\n          </slot>\n        </div>\n      </div>\n      <div v-if=\"button && button.length > 0\" class=\"midea-actionsheet-bottom\" :style=\"bottomIpxStyle\">\n        <text class=\"midea-actionsheet-btn leftBtn\" @click=\"actionsheetBtnClick(button)\" :style=\"defaultBtnStyle\">{{\n          button\n        }}</text>\n      </div>\n      <div :style=\"{ height: '0px', 'background-color': '#ffffff' }\"></div>\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.dof-popup {\n  position: fixed;\n  /* width: 750px; */\n  overflow: hidden;\n}\n\n.title {\n  padding: 30px;\n  text-align: center;\n  font-size: 28px;\n  color: #8a8a8f;\n  line-height: 48px;\n  background-color: #ffffff;\n}\n\n.midea-actionsheet-content {\n  flex-direction: column;\n  flex: 1;\n  /* background-color: #ffffff; */\n}\n.midea-actionsheet-list-first {\n  /* border-top-left-radius: 32px;\n  border-top-right-radius: 32px; */\n  background-color: #ffffff;\n}\n.midea-actionsheet-list-first:active {\n  background-color: #f5f5f5;\n}\n.midea-actionsheet-list {\n  border-top-width: 2px;\n  border-top-color: #f9f9f9;\n  background-color: #ffffff;\n}\n.midea-actionsheet-list:active {\n  background-color: #f5f5f5;\n}\n.midea-actionsheet-textWrapper {\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n}\n.midea-actionsheet-text {\n  font-family: PingFangSC-Regular;\n  text-align: center;\n  font-size: 32px;\n  line-height: 96px;\n  /* color: #000000; */\n}\n\n.midea-actionsheet-bottom {\n  flex-direction: row;\n  margin-top: 16px;\n  justify-content: space-between;\n}\n.midea-actionsheet-btn {\n  font-size: 32px;\n  color: #232323;\n  background-color: #ffffff;\n  line-height: 92px;\n  text-align: center;\n  flex: 1; /* add by lau resolve bottom button */\n}\n.leftBtn {\n  color: #666666;\n}\n\n.top {\n  left: 0;\n  right: 0;\n}\n\n.bottom {\n  left: 0;\n  right: 0;\n}\n\n.left {\n  bottom: 0;\n  top: 0;\n}\n\n.right {\n  bottom: 0;\n  top: 0;\n}\n</style>\n\n<script>\nconst animation = weex.requireModule('animation')\nconst { platform } = weex.config.env\nconst isWeb = typeof window === 'object' && platform.toLowerCase() === 'web'\nimport { Bridge } from 'dolphin-native-bridge'\nimport DofOverlay from '../dof-overlay'\nexport default {\n  components: { DofOverlay },\n  props: {\n    show: {\n      type: Boolean,\n      default: false\n    },\n    pos: {\n      type: String,\n      default: 'bottom'\n    },\n    // 背景色，即按钮上方的横条颜色，暂不开放\n    popupColor: {\n      type: String,\n      default: '#F9F9F9'\n    },\n    overlayCfg: {\n      type: Object,\n      default: () => ({\n        hasAnimation: true,\n        timingFunction: ['ease-in', 'ease-out'],\n        duration: 300,\n        opacity: 0.3\n      })\n    },\n    // height: {\n    //   type: [Number, String],\n    //   default: 840\n    // },\n    standOut: {\n      type: [Number, String],\n      default: 0\n    },\n    width: {\n      type: [Number, String],\n      default: 750\n    },\n    animation: {\n      type: Object,\n      default: () => ({\n        // timingFunction: 'ease-in'\n        timingFunction: 'cubic-bezier(0.25, 0.1, 0.25, 1.0)'\n      })\n    },\n    title: {\n      type: String,\n      default: ''\n    },\n    button: {\n      type: String,\n      default: '取消'\n    },\n    items: {\n      type: Array,\n      default: () => []\n    },\n    titleStyle: {\n      type: Object,\n      default: () => {}\n    },\n    defaultBtnStyle: {\n      type: Object,\n      default: () => ({})\n    },\n    itemStyle: {\n      type: Object,\n      default: () => {}\n    },\n    borderRadius: {\n      type: String,\n      default: '32px'\n    }\n  },\n  data: () => ({\n    haveOverlay: true,\n    isOverShow: true,\n    bottomArc: 0\n  }),\n  computed: {\n    isNeedShow() {\n      try {\n        setTimeout(() => {\n          this.appearPopup(this.show)\n        }, 50)\n      } catch (error) {\n        this.$nextTick(() => {\n          this.appearPopup(this.show)\n        })\n      }\n      return this.show\n    },\n    // _height() {\n    //   this.appearPopup(this.show, 150)\n    //   return this.popHeight\n    // },\n    // transformValue() {\n    //   return this.getTransform(this.pos, this.width, this.popHeight, true)\n    // },\n    padStyle() {\n      const { pos, width, popupColor } = this\n      const style = {\n        width: `${width}px`,\n        backgroundColor: popupColor\n        // backgroundColor: '#666666'\n      }\n      if (pos === 'bottom') {\n        style.bottom = '0px'\n        style.transform = 'translateY(100%)'\n        style.borderTopLeftRadius = this.borderRadius\n        style.borderTopRightRadius = this.borderRadius\n      }\n      return style\n    },\n    bottomIpxStyle() {\n      const style = {\n        backgroundColor: '#ffffff',\n        paddingBottom: `${this.isipx ? 84 : 16}px`\n      }\n      return style\n    },\n    isipx: function() {\n      if (this.bottomArc) return true\n      return (\n        weex &&\n        (weex.config.env.deviceModel === 'iPhone10,3' ||\n        weex.config.env.deviceModel === 'iPhone10,6' || // iphoneX\n        weex.config.env.deviceModel === 'iPhone11,8' || // iPhone XR\n        weex.config.env.deviceModel === 'iPhone11,2' || // iPhone XS\n        weex.config.env.deviceModel === 'iPhone11,4' ||\n        weex.config.env.deviceModel === 'iPhone11,6' || // iPhone XS Max\n        weex.config.env.deviceModel === 'iPhone12,1' || // iPhone11\n        weex.config.env.deviceModel === 'iPhone12,3' ||\n        weex.config.env.deviceModel === 'iPhone12,5' || // iPhone 11 Pro iPhone 11 Pro Max\n        weex.config.env.deviceModel === 'iPhone13,1' ||\n        weex.config.env.deviceModel === 'iPhone13,2' || // iPhone12 Mini && iPhone12\n        weex.config.env.deviceModel === 'iPhone13,3' || //iPhone12 Pro\n        weex.config.env.deviceModel === 'iPhone13,4' || // iPhone12 Pro Max\n        weex.config.env.deviceModel === 'iPhone14,4' || //iPhone 13 mini\n        weex.config.env.deviceModel === 'iPhone14,5' || //iPhone 13\n        weex.config.env.deviceModel === 'iPhone14,2' || //iPhone 13 Pro\n          weex.config.env.deviceModel === 'Iphone14,3') //iPhone 13 Pro Max\n      )\n    }\n\n    // popHeight() {\n    //   // 根据下拉菜单内容计算bottom距离\n    //   // var length = this.items.length\n    //   //add by lau 可以不传递item,并且自动获取高度\n    //   var length = (this.items && this.items.length) || 0\n    //   var height,\n    //     extraHeight = this.isipx ? 84 : 16 // 84=16+68\n\n    //   if (this.items && this.items.length > 0) {\n    //     // var len = (length + 1) * 100 + 80;\n    //     height = (length + 1) * 96 + extraHeight\n    //   } else {\n    //     height = this.popHeight + 80\n    //   }\n    //   height = this.title ? height + 108 : height\n    //   return height\n    // }\n  },\n  created() {\n    Bridge.getAllBarHeight().then(res => {\n      this.bottomArc = res.bottomArc || 0\n    })\n  },\n  methods: {\n    // '取消'按钮点击事件\n    actionsheetBtnClick(buttonText) {\n      this.appearPopup(false)\n      this.$refs.overlay.appearOverlay(false)\n      this.$emit('dofCancelClick', { buttonText })\n    },\n\n    // 菜单项点击事件\n    actionsheetItemClick(item, index) {\n      this.appearPopup(false)\n      this.$refs.overlay.appearOverlay(false)\n      this.$emit('dofItemClick', { item, index })\n    },\n\n    handleTouchEnd(e) {\n      // 在支付宝上面有点击穿透问题\n      const { platform } = weex.config.env\n      platform === 'Web' && e.preventDefault && e.preventDefault()\n    },\n    hide() {\n      this.appearPopup(false)\n      this.$refs.overlay.appearOverlay(false)\n    },\n    dofOverlayBodyClicking() {\n      this.show && this.appearPopup(false)\n    },\n    appearPopup(show, duration = 300) {\n      const popupEl = this.$refs['dof-popup']\n      if (!popupEl) {\n        return\n      }\n      animation.transition(\n        popupEl,\n        {\n          styles: {\n            transform: this.getTransform(this.pos, show)\n          },\n          duration,\n          delay: 0,\n          ...this.animation\n        },\n        () => {\n          if (!show) {\n            this.$emit('dofPopupOverlayClicked', { pos: this.pos })\n          }\n        }\n      )\n    },\n    getTransform(pos, show) {\n      let _transform\n      switch (pos) {\n        case 'top':\n        case 'left':\n          _transform = `translateY(${show ? 0 : -100}%)`\n          break\n        case 'bottom':\n        case 'right':\n          _transform = `translateY(${show ? 0 : 100}%)`\n          break\n      }\n      return _transform\n    },\n    textStyleOps(item) {\n      return item.textColor ? { color: item.textColor } : { color: '#000000' }\n    }\n  }\n}\n</script>\n"],"sourceRoot":""}]);
 
 // exports
 
@@ -7869,7 +7869,7 @@ exports = module.exports = __webpack_require__(0)(true);
 
 
 // module
-exports.push([module.i, "\n.slider-bar-container[data-v-100ca2e2] {\n  /* 拿掉高度 add by hairong */\n  /* height: 56px; */   \n  -webkit-box-pack: center;   \n  -webkit-justify-content: center;   \n          justify-content: center;\n  -webkit-box-align: center;\n  -webkit-align-items: center;\n          align-items: center;\n  overflow: hidden;\n}\n.range-bar[data-v-100ca2e2]{\n  overflow: hidden;\n}\n.value-bar[data-v-100ca2e2] {\n  height: 0.05333rem;\n  overflow: hidden;\n}\n.slide-block[data-v-100ca2e2] {\n  width: 0.58667rem;\n  height: 0.58667rem;\n  background-color: #ffffff;\n  border-radius: 50%;\n  border-width: 1px;\n  border-color: rgba(0, 0, 0, 0.1);\n  position: absolute;\n  left: 0;\n  /* bottom: 0; */\n  bottom: 0.13333rem;\n  box-shadow: 0.02667rem 0.04rem 0.04rem #999;\n}\n", "", {"version":3,"sources":["/Users/wuhm45/Documents/code/weex组件库/dolphin-weex-ui/packages/dof-slider-bar/index.vue?08aba3b6"],"names":[],"mappings":";AAqjBA;EACA,yBAAA;EACA,mBAAA;EACA,yBAAA;EAAA,gCAAA;UAAA,wBAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,iBAAA;CACA;AAGA;EACA,iBAAA;CACA;AAEA;EACA,mBAAA;EACA,iBAAA;CACA;AAEA;EACA,kBAAA;EACA,mBAAA;EACA,0BAAA;EACA,mBAAA;EACA,kBAAA;EACA,iCAAA;EACA,mBAAA;EACA,QAAA;EACA,gBAAA;EACA,mBAAA;EACA,4CAAA;CACA","file":"index.vue","sourcesContent":["<template>\n  <div\n    ref=\"bar-container\"\n    class=\"slider-bar-container\"\n    :style=\"containerStyle\">\n    <div\n      class=\"range-bar\"\n      :style=\"rangeBarStyle\">\n      <div\n        ref=\"value-bar\"\n        class=\"value-bar\"\n        :style=\"valueBarStyle\">\n        <div></div>\n      </div>\n    </div>\n    <div\n      ref=\"slide-block-1\"\n      class=\"slide-block\"\n      @panstart=\"webStartHandler\"\n      @panmove=\"webMoveHandler1\"\n      @touchstart=\"weexStartHandler1\"\n      @touchend=\"weexEndHandler\"\n      @horizontalpan=\"weexHandler1\"\n      :prevent-move-event=\"preventMoveEvent\"\n      :style=\"blockStyle1\">\n      <div></div>\n    </div>\n    <div\n      v-if=\"range\"\n      ref=\"slide-block-2\"\n      class=\"slide-block\"\n      @panstart=\"webStartHandler\"\n      @panmove=\"webMoveHandler2\"\n      @touchstart=\"weexStartHandler2\"\n      @touchend=\"weexEndHandler\"\n      @horizontalpan=\"weexHandler2\"\n      :prevent-move-event=\"preventMoveEvent\"\n      :style=\"blockStyle2\">\n      <div></div>\n    </div>\n  </div>\n</template>\n\n<script>\n  import Utils from '../utils';\n  import BindEnv from '../utils/bind-env';\n  import Binding from 'weex-bindingx/lib/index.weex.js';\n\n  const animation = weex.requireModule('animation');\n  const dom = weex.requireModule('dom');\n\n  export default {\n    data: () => ({\n      env: 'weex',\n      diffX1: 0,\n      diffX2: 0,\n      barWidth: 0,\n      preventMoveEvent: true,\n      minDist: 0,\n      // selectRange: [0, 0],\n      blockRadius: 28,\n      DPR: 1,\n      timeout: 100,\n      isAndroid: Utils.env.isAndroid()\n    }),\n    props: {\n      selectRange: {\n        type: Array,\n        default: [0, 0]\n      },\n      length: {\n        type: Number,\n        default: 500\n      },\n      height: {\n        type: Number,\n        default: 4\n      },\n      // 是否双滑块模式\n      range: {\n        type: Boolean,\n        default: false\n      },\n      // 最小值\n      min: {\n        type: Number,\n        default: 0\n      },\n      // 最大值\n      max: {\n        type: Number,\n        default: 100\n      },\n      // 最小取值范围，用于范围选择范围最小差值\n      minDiff: {\n        type: Number,\n        default: 5\n      },\n      // 设置当前取值。当 range 为 false 时，使用 number，否则用 [number, number]\n      value: {\n        type: [Number, Array],\n        default: 0\n      },\n      // 设置初始取值。当 range 为 false 时，使用 number，否则用 [number, number]\n      defaultValue: {\n        type: [Number, Array],\n        default: 0\n      },\n      // 值为 true 时，滑块为禁用状态\n      disabled: {\n        type: Boolean,\n        default: false\n      },\n      invalidColor: {\n        type: String,\n        default: '#E0E0E0'\n      },\n      validColor: {\n        type: String,\n        default: '#267AFF'\n      },\n      disabledColor: {\n        type: String,\n        default: '#AAA'\n      }\n    },\n    watch: {\n      value(e) {\n        if (!this.range) {\n          this.diffX1 = this._getDiffX(e || this.defaultValue);\n        } else {\n          this.diffX1 = this._getDiffX(e[0] || this.defaultValue[0]);\n          this.diffX2 = this._getDiffX(e[1] || this.defaultValue[1]);\n          this.barWidth = this.diffX2 - this.diffX1;\n        }\n      }\n    },\n    created() {\n      if (Utils.env.isWeb()) {\n        this.env = 'web';\n        this.DPR = window.devicePixelRatio ? window.devicePixelRatio : 1;\n      } else {\n        this.DPR = weex.config.env.scale;\n      }\n    },\n    mounted() {\n      this.block1 = this.$refs['slide-block-1'];        // 左侧滑块\n      this.block2 = this.$refs['slide-block-2'];        // 右侧滑块\n      this.valueBar = this.$refs['value-bar'];          // 黄色值条\n      this.barContainer = this.$refs['bar-container'];  // 滚动条容器\n\n      if (!this.range) {\n        this.diffX1 = this._getDiffX(this.value || this.defaultValue);\n      } else {\n        this.diffX1 = this._getDiffX(this.value[0] || this.defaultValue[0]);\n        this.diffX2 = this._getDiffX(this.value[1] || this.defaultValue[1]);\n        this.barWidth = this.diffX2 - this.diffX1;\n      }\n\n      // 是否支持expresstionBinding\n      if (BindEnv.supportsEB() && Binding.prepare) {\n        this.block1 && Binding.prepare({\n          anchor: this.block1.ref,\n          eventType: 'pan'\n        });\n        this.block2 && Binding.prepare({\n          anchor: this.block2.ref,\n          eventType: 'pan'\n        });\n        this.valueBar && Binding.prepare({\n          anchor: this.valueBar.ref,\n          eventType: 'pan'\n        });\n      }\n\n      if (this.range) {\n        this.selectRange = this.value || this.defaultValue;                    // 初始化范围选择返回数据\n        this.minDist = (this.minDiff / (this.max - this.min)) * this.length;  // 滑块1、2之前最小间距\n      }\n\n      // 由于weex在mounted后渲染是异步的不能确保元素渲染完成，需要异步执行\n      setTimeout(() => {\n        dom.getComponentRect(this.barContainer, option => {\n          const { left } = option.size;\n          this.leftDiffX = left;\n        });\n      }, 100);\n    },\n\n    computed: {\n      containerStyle() {\n        return {\n          width: `${this.length + 56}px`,\n          // height: '56px'\n          height: '64px'\n        };\n      },\n      rangeBarStyle() {\n        return {\n          width: `${this.length}px`,\n          height: `${this.height}px`,\n          flexDirection: 'row',\n          backgroundColor: this.invalidColor\n        };\n      },\n      valueBarStyle() {\n        let left = 0;\n        let width = 0;\n\n        if (!this.range) {\n          left = this.diffX1 - this.length;\n          width = this.length;\n        } else {\n          left = this.diffX1;\n          width = this.diffX2 - this.diffX1;\n        }\n\n        return {\n          width: width + 'px',\n          height: this.height + 'px',\n          transform: `translateX(${left}px)`,\n          backgroundColor: this.disabled ? this.disabledColor : this.validColor\n        };\n      },\n      blockStyle1() {\n        const left = this.diffX1;\n        return {\n          transform: `translateX(${left}px)`\n        };\n      },\n      blockStyle2() {\n        return {\n          transform: `translateX(${this.diffX2}px)`\n        };\n      }\n    },\n    methods: {\n\n      // 更新单选值或最小值\n      weexHandler1(e) {\n        const self = this;\n        switch (e.state) {\n        case 'start':\n          self.bindBlock1();\n          break;\n        case 'move':\n          dom.getComponentRect(this.block1, option => {\n              const { left } = option.size;\n              const value = this._getValue(left - this.leftDiffX);\n              if (!this.range) {\n                this.$emit('updateValue', value);\n              } else {\n                this.selectRange[0] = value;\n                this.$emit('updateValue', this.selectRange);\n              }\n            });\n          break;\n        case 'end':\n          break;\n        default:\n          break;\n        }\n      },\n\n      // 更新最大值\n      weexHandler2(e) {\n        const self = this;\n\n        switch (e.state) {\n        case 'start':\n          self.bindBlock2();\n          break;\n        case 'move':\n          dom.getComponentRect(this.block2, option => {\n              const { left } = option.size;\n              this.selectRange[1] = this._getValue(left - this.leftDiffX);\n              this.$emit('updateValue', this.selectRange);\n            });\n          break;\n        case 'end':\n          break;\n        default:\n          break;\n        }\n      },\n\n      weexStartHandler1() {\n        // 由于android端不支持 horizontalpan 的move事件，使用setInterval hack方案\n        if (!this.isAndroid) {\n          return;\n        }\n        this.firstInterval = setInterval(() => {\n          dom.getComponentRect(this.block1, option => {\n            const { left } = option.size;\n            const value = this._getValue(left - this.leftDiffX);\n            if (!this.range) {\n              this.$emit('updateValue', value);\n            } else {\n              this.selectRange[0] = value;\n              this.$emit('updateValue', this.selectRange);\n            }\n          });\n        }, this.timeout);\n      },\n\n      weexStartHandler2() {\n        if (!this.isAndroid) {\n          return;\n        }\n        // 由于android端不支持 horizontalpan 的move事件，使用setInterval hack方案\n        this.secondInterval = setInterval(() => {\n          dom.getComponentRect(this.block2, option => {\n            const { left } = option.size;\n            this.selectRange[1] = this._getValue(left - this.leftDiffX);\n            this.$emit('updateValue', this.selectRange);\n          });\n        }, this.timeout);\n      },\n\n      // 清除定时器\n      weexEndHandler() {\n        if (!this.isAndroid) {\n          return;\n        }\n        this.firstInterval && clearInterval(this.firstInterval);\n        this.secondInterval && clearInterval(this.secondInterval);\n      },\n\n      webStartHandler(e) {\n        if (this.env === 'weex') {\n          return;\n        }\n        this.startX = e.touch.clientX;\n        this.startDiffX1 = this.diffX1;\n        this.startDiffX2 = this.diffX2;\n      },\n\n      webMoveHandler1(e) {\n        if (this.env === 'weex' || this.disabled) {\n          return;\n        }\n\n        const deltaX = (e.touch.clientX - this.startX) * this.DPR;\n        const diff = this.startDiffX1 + deltaX;\n\n        let max = this.length;\n        if (this.range) {\n          max = this.diffX2 - this.minDist;\n        }\n\n        if (diff > 0 && diff < max) {\n          this.diffX1 = diff;\n          animation.transition(this.block1, {\n            styles: {\n              transform: `translateX(${this.diffX1}px)`\n            }\n          }, () => {});\n          if (!this.range) {\n            this.$emit('updateValue', this._getValue(this.diffX1));\n          } else {\n            this.selectRange[0] = this._getValue(this.diffX1);\n            this.$emit('updateValue', this.selectRange);\n          }\n        }\n      },\n\n      webMoveHandler2(e) {\n        if (this.env === 'weex' || this.disabled) {\n          return;\n        }\n\n        const deltaX = (e.touch.clientX - this.startX) * this.DPR;\n        const diff = this.startDiffX2 + deltaX;\n        const min = this.diffX1 + this.minDist;\n        const max = this.length;\n\n        if (diff > min && diff < max) {\n          this.diffX2 = diff;\n          animation.transition(this.block2, {\n            styles: {\n              transform: `translateX(${this.diffX2}px)`\n            }\n          }, () => {});\n          if (!this.range) {\n            this.$emit('updateValue', this._getValue(this.diffX2));\n          } else {\n            this.selectRange[1] = this._getValue(this.diffX2);\n            this.$emit('updateValue', this.selectRange);\n          }\n        }\n      },\n\n      bindBlock1() {\n        const self = this;\n\n        // 如果禁用，不行进行表达式绑定\n        if (self.disabled) {\n          Binding.unbind({\n            token: this.gesToken1,\n            eventType: 'pan'\n          });\n          this.gesToken1 = 0;\n          return;\n        }\n\n        // 初始化按钮&条的大小范围\n        let blockMax1 = 0;\n        if (self.range) {\n          blockMax1 = self.diffX2 - self.minDist;\n        } else {\n          blockMax1 = self.length;\n        }\n\n        const barMax1 = self.diffX2;\n\n        if (!self.range) {\n          const startLeft = self.diffX1 - blockMax1 - self.minDist;\n\n          const props = [{\n            element: self.block1.ref,\n            property: 'transform.translateX',\n            expression: `min(${blockMax1}, max(x + ${self.diffX1}, 0))`\n          }, {\n            element: self.valueBar.ref,\n            property: 'transform.translateX',\n            expression: `min(0, max(x + ${startLeft}, -${blockMax1}))`\n          }];\n\n          const gesTokenObj = Binding.bind({\n            anchor: self.block1.ref,\n            eventType: 'pan',\n            props\n          }, (e) => {\n            if (e.state === 'end' || e.state === 'cancel' || e.state === 'exit') {\n              const range = self.getRange();\n              // 限制diffX1范围\n              self.diffX1 = self._restrictValue(range.rangeX1, self.diffX1 + e.deltaX);\n              self.bindBlock1();\n            }\n          });\n          this.gesToken1 = gesTokenObj.token;\n        } else {\n          // 选范围\n          const props = [{\n            element: self.block1.ref,\n            property: 'transform.translateX',\n            expression: `min(${blockMax1}, max(x + ${self.diffX1}, 0))`\n          }, {\n            element: self.valueBar.ref,\n            property: 'transform.translateX',\n            expression: `min(${blockMax1}, max(x + ${self.diffX1}, 0))`\n          }, {\n            element: self.valueBar.ref,\n            property: 'width',\n            expression: `min(${barMax1}, max(0, ${self.barWidth} - x))`\n          }];\n\n          const gesTokenObj = Binding.bind({\n            anchor: self.block1.ref,\n            eventType: 'pan',\n            props\n          }, (e) => {\n            if (e.state === 'end' || e.state === 'cancel' || e.state === 'exit') {\n              const range = self.getRange();\n              self.barWidth = self._restrictValue(range.rangeX1, self.barWidth - e.deltaX);\n              self.diffX1 = self._restrictValue(range.rangeX1, self.diffX1 + e.deltaX);\n              self.bindBlock1();\n            }\n          });\n          this.gesToken1 = gesTokenObj.token;\n        }\n      },\n\n      bindBlock2() {\n        const self = this;\n\n        // 如果禁用，不行进行表达式绑定\n        if (self.disabled) {\n          Binding.unbind({\n            token: this.gesToken2,\n            eventType: 'pan'\n          });\n          this.gesToken2 = 0;\n          return;\n        }\n\n        // 初始化按钮&条的大小范围\n        let blockMax1 = 0;\n        if (self.range) {\n          blockMax1 = self.diffX2 - self.minDist;\n        } else {\n          blockMax1 = self.length;\n        }\n\n        const blockMax2 = self.length;\n        const blockMin2 = self.diffX1 + self.minDist;\n        const barMax2 = self.length - self.diffX1;\n\n        const props = [{\n          element: self.block2.ref,\n          property: 'transform.translateX',\n          expression: `min(${blockMax2}, max(x + ${self.diffX2}, ${blockMin2}))`\n        }, {\n          element: self.valueBar.ref,\n          property: 'width',\n          expression: `min(${barMax2}, max(0, x + ${self.barWidth}))`\n        }];\n\n        const gesTokenObj = Binding.bind({\n          anchor: self.block2.ref,\n          eventType: 'pan',\n          props\n        }, (e) => {\n          if (e.state === 'end' || e.state === 'cancel' || e.state === 'exit') {\n            const range = self.getRange();\n            self.barWidth = self._restrictValue([0, self.length - self.diffX1], self.barWidth + e.deltaX);\n            self.diffX2 = self._restrictValue(range.rangeX2, self.diffX2 + e.deltaX);\n            self.bindBlock2();\n          }\n        });\n        this.gesToken2 = gesTokenObj.token;\n      },\n\n      // 获取diffx1 diffx2 取值范围\n      getRange() {\n        if (!this.range) {\n          return {\n            rangeX1: [0, this.length]\n          };\n        } else {\n          return {\n            rangeX1: [0, this.diffX2 - this.minDist],\n            rangeX2: [this.diffX1 + this.minDist, this.length]\n          };\n        }\n      },\n\n      // 限制取值范围\n      _restrictValue(range, value) {\n        if (range && range.length && range.length === 2) {\n          if (value < range[0]) {\n            return range[0];\n          } else if (value > range[1]) {\n            return range[1];\n          } else {\n            return value;\n          }\n        }\n        return;\n      },\n\n      // 根据x方向偏移量计算value\n      _getValue(diffX) {\n        return Math.round((diffX / this.length) * (this.max - this.min) + this.min);\n      },\n\n      // 根据value和length计算x方向偏移值\n      _getDiffX(value) {\n        return ((value - this.min) / (this.max - this.min)) * this.length;\n      }\n    }\n  };\n</script>\n\n<style scoped>\n  .slider-bar-container {\n    /* 拿掉高度 add by hairong */\n    /* height: 56px; */   \n    justify-content: center;\n    align-items: center;\n    overflow: hidden;\n  }\n\n\n  .range-bar{\n    overflow: hidden;\n  }\n\n  .value-bar {\n    height: 4px;\n    overflow: hidden;\n  }\n\n  .slide-block {\n    width: 44px;\n    height: 44px;\n    background-color: #ffffff;\n    border-radius: 50%;\n    border-width: 1px;\n    border-color: rgba(0, 0, 0, 0.1);\n    position: absolute;\n    left: 0;\n    /* bottom: 0; */\n    bottom: 10px;\n    box-shadow: 2px 3px 3px #999;\n  }\n</style>\n"],"sourceRoot":""}]);
+exports.push([module.i, "\n.slider-bar-container[data-v-100ca2e2] {\n  /* 拿掉高度 add by hairong */\n  /* height: 56px; */\n  -webkit-box-pack: center;\n  -webkit-justify-content: center;\n          justify-content: center;\n  -webkit-box-align: center;\n  -webkit-align-items: center;\n          align-items: center;\n  overflow: hidden;\n}\n.range-bar[data-v-100ca2e2] {\n  overflow: hidden;\n}\n.value-bar[data-v-100ca2e2] {\n  height: 0.05333rem;\n  overflow: hidden;\n}\n.slide-block[data-v-100ca2e2] {\n  width: 0.58667rem;\n  height: 0.58667rem;\n  background-color: #ffffff;\n  border-radius: 50%;\n  border-width: 1px;\n  border-color: rgba(0, 0, 0, 0.1);\n  position: absolute;\n  left: 0;\n  /* bottom: 0; */\n  bottom: 0.13333rem;\n  box-shadow: 0.02667rem 0.04rem 0.04rem #999;\n}\n", "", {"version":3,"sources":["/Users/wuhm45/Documents/code/weex组件库/dolphin-weex-ui/packages/dof-slider-bar/index.vue?f2908674"],"names":[],"mappings":";AA6kBA;EACA,yBAAA;EACA,mBAAA;EACA,yBAAA;EAAA,gCAAA;UAAA,wBAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,iBAAA;CACA;AAEA;EACA,iBAAA;CACA;AAEA;EACA,mBAAA;EACA,iBAAA;CACA;AAEA;EACA,kBAAA;EACA,mBAAA;EACA,0BAAA;EACA,mBAAA;EACA,kBAAA;EACA,iCAAA;EACA,mBAAA;EACA,QAAA;EACA,gBAAA;EACA,mBAAA;EACA,4CAAA;CACA","file":"index.vue","sourcesContent":["<template>\n  <div ref=\"bar-container\" class=\"slider-bar-container\" :style=\"containerStyle\">\n    <div class=\"range-bar\" :style=\"rangeBarStyle\">\n      <div ref=\"value-bar\" class=\"value-bar\" :style=\"valueBarStyle\">\n        <div></div>\n      </div>\n    </div>\n    <div\n      ref=\"slide-block-1\"\n      class=\"slide-block\"\n      @panstart=\"webStartHandler\"\n      @panmove=\"webMoveHandler1\"\n      @touchstart=\"weexStartHandler1\"\n      @touchend=\"weexEndHandler\"\n      @horizontalpan=\"weexHandler1\"\n      :prevent-move-event=\"preventMoveEvent\"\n      :style=\"blockStyle1\"\n    >\n      <div></div>\n    </div>\n    <div\n      v-if=\"range\"\n      ref=\"slide-block-2\"\n      class=\"slide-block\"\n      @panstart=\"webStartHandler\"\n      @panmove=\"webMoveHandler2\"\n      @touchstart=\"weexStartHandler2\"\n      @touchend=\"weexEndHandler\"\n      @horizontalpan=\"weexHandler2\"\n      :prevent-move-event=\"preventMoveEvent\"\n      :style=\"blockStyle2\"\n    >\n      <div></div>\n    </div>\n  </div>\n</template>\n\n<script>\nimport Utils from '../utils'\nimport BindEnv from '../utils/bind-env'\nimport Binding from 'weex-bindingx/lib/index.weex.js'\n\nconst animation = weex.requireModule('animation')\nconst dom = weex.requireModule('dom')\n\nexport default {\n  data: () => ({\n    env: 'weex',\n    diffX1: 0,\n    diffX2: 0,\n    barWidth: 0,\n    preventMoveEvent: true,\n    minDist: 0,\n    // selectRange: [0, 0],\n    blockRadius: 28,\n    DPR: 1,\n    timeout: 100,\n    isAndroid: Utils.env.isAndroid()\n  }),\n  props: {\n    selectRange: {\n      type: Array,\n      default: () => [0, 0]\n    },\n    length: {\n      type: Number,\n      default: 500\n    },\n    height: {\n      type: Number,\n      default: 4\n    },\n    // 是否双滑块模式\n    range: {\n      type: Boolean,\n      default: false\n    },\n    // 最小值\n    min: {\n      type: Number,\n      default: 0\n    },\n    // 最大值\n    max: {\n      type: Number,\n      default: 100\n    },\n    // 最小取值范围，用于范围选择范围最小差值\n    minDiff: {\n      type: Number,\n      default: 5\n    },\n    // 设置当前取值。当 range 为 false 时，使用 number，否则用 [number, number]\n    value: {\n      type: [Number, Array],\n      default: 0\n    },\n    // 设置初始取值。当 range 为 false 时，使用 number，否则用 [number, number]\n    defaultValue: {\n      type: [Number, Array],\n      default: 0\n    },\n    // 值为 true 时，滑块为禁用状态\n    disabled: {\n      type: Boolean,\n      default: false\n    },\n    invalidColor: {\n      type: String,\n      default: '#E0E0E0'\n    },\n    validColor: {\n      type: String,\n      default: '#267AFF'\n    },\n    disabledColor: {\n      type: String,\n      default: '#AAA'\n    }\n  },\n  watch: {\n    value(e) {\n      if (!this.range) {\n        this.diffX1 = this._getDiffX(e || this.defaultValue)\n      } else {\n        this.diffX1 = this._getDiffX(e[0] || this.defaultValue[0])\n        this.diffX2 = this._getDiffX(e[1] || this.defaultValue[1])\n        this.barWidth = this.diffX2 - this.diffX1\n      }\n    }\n  },\n  created() {\n    if (Utils.env.isWeb()) {\n      this.env = 'web'\n      // this.DPR = window.devicePixelRatio ? window.devicePixelRatio : 1;\n      this.DPR = 2\n    } else {\n      this.DPR = weex.config.env.scale\n    }\n  },\n  mounted() {\n    this.block1 = this.$refs['slide-block-1'] // 左侧滑块\n    this.block2 = this.$refs['slide-block-2'] // 右侧滑块\n    this.valueBar = this.$refs['value-bar'] // 黄色值条\n    this.barContainer = this.$refs['bar-container'] // 滚动条容器\n\n    if (!this.range) {\n      this.diffX1 = this._getDiffX(this.value || this.defaultValue)\n    } else {\n      this.diffX1 = this._getDiffX(this.value[0] || this.defaultValue[0])\n      this.diffX2 = this._getDiffX(this.value[1] || this.defaultValue[1])\n      this.barWidth = this.diffX2 - this.diffX1\n    }\n\n    // 是否支持expresstionBinding\n    if (BindEnv.supportsEB() && Binding.prepare) {\n      this.block1 &&\n        Binding.prepare({\n          anchor: this.block1.ref,\n          eventType: 'pan'\n        })\n      this.block2 &&\n        Binding.prepare({\n          anchor: this.block2.ref,\n          eventType: 'pan'\n        })\n      this.valueBar &&\n        Binding.prepare({\n          anchor: this.valueBar.ref,\n          eventType: 'pan'\n        })\n    }\n\n    if (this.range) {\n      this.selectRange = this.value || this.defaultValue // 初始化范围选择返回数据\n      this.minDist = (this.minDiff / (this.max - this.min)) * this.length // 滑块1、2之前最小间距\n    }\n\n    // 由于weex在mounted后渲染是异步的不能确保元素渲染完成，需要异步执行\n    setTimeout(() => {\n      dom.getComponentRect(this.barContainer, option => {\n        const { left } = option.size\n        this.leftDiffX = left\n      })\n    }, 100)\n  },\n\n  computed: {\n    containerStyle() {\n      return {\n        width: `${this.length + 56}px`,\n        // height: '56px'\n        height: '64px'\n      }\n    },\n    rangeBarStyle() {\n      return {\n        width: `${this.length}px`,\n        height: `${this.height}px`,\n        flexDirection: 'row',\n        backgroundColor: this.invalidColor\n      }\n    },\n    valueBarStyle() {\n      let left = 0\n      let width = 0\n\n      if (!this.range) {\n        left = this.diffX1 - this.length\n        width = this.length\n      } else {\n        left = this.diffX1\n        width = this.diffX2 - this.diffX1\n      }\n\n      return {\n        width: width + 'px',\n        height: this.height + 'px',\n        transform: `translateX(${left}px)`,\n        backgroundColor: this.disabled ? this.disabledColor : this.validColor\n      }\n    },\n    blockStyle1() {\n      const left = this.diffX1\n      return {\n        transform: `translateX(${left}px)`\n      }\n    },\n    blockStyle2() {\n      return {\n        transform: `translateX(${this.diffX2}px)`\n      }\n    }\n  },\n  methods: {\n    // 更新单选值或最小值\n    weexHandler1(e) {\n      const self = this\n      switch (e.state) {\n        case 'start':\n          self.bindBlock1()\n          break\n        case 'move':\n          dom.getComponentRect(this.block1, option => {\n            const { left } = option.size\n            const value = this._getValue(left - this.leftDiffX)\n            if (!this.range) {\n              this.$emit('updateValue', value)\n            } else {\n              this.selectRange[0] = value\n              this.$emit('updateValue', this.selectRange)\n            }\n          })\n          break\n        case 'end':\n          break\n        default:\n          break\n      }\n    },\n\n    // 更新最大值\n    weexHandler2(e) {\n      const self = this\n\n      switch (e.state) {\n        case 'start':\n          self.bindBlock2()\n          break\n        case 'move':\n          dom.getComponentRect(this.block2, option => {\n            const { left } = option.size\n            this.selectRange[1] = this._getValue(left - this.leftDiffX)\n            this.$emit('updateValue', this.selectRange)\n          })\n          break\n        case 'end':\n          break\n        default:\n          break\n      }\n    },\n\n    weexStartHandler1() {\n      // 由于android端不支持 horizontalpan 的move事件，使用setInterval hack方案\n      if (!this.isAndroid) {\n        return\n      }\n      this.firstInterval = setInterval(() => {\n        dom.getComponentRect(this.block1, option => {\n          const { left } = option.size\n          const value = this._getValue(left - this.leftDiffX)\n          if (!this.range) {\n            this.$emit('updateValue', value)\n          } else {\n            this.selectRange[0] = value\n            this.$emit('updateValue', this.selectRange)\n          }\n        })\n      }, this.timeout)\n    },\n\n    weexStartHandler2() {\n      if (!this.isAndroid) {\n        return\n      }\n      // 由于android端不支持 horizontalpan 的move事件，使用setInterval hack方案\n      this.secondInterval = setInterval(() => {\n        dom.getComponentRect(this.block2, option => {\n          const { left } = option.size\n          this.selectRange[1] = this._getValue(left - this.leftDiffX)\n          this.$emit('updateValue', this.selectRange)\n        })\n      }, this.timeout)\n    },\n\n    // 清除定时器\n    weexEndHandler() {\n      if (!this.isAndroid) {\n        return\n      }\n      this.firstInterval && clearInterval(this.firstInterval)\n      this.secondInterval && clearInterval(this.secondInterval)\n    },\n\n    webStartHandler(e) {\n      if (this.env === 'weex') {\n        return\n      }\n      this.startX = e.changedTouches[0].pageX\n      this.startDiffX1 = this.diffX1\n      this.startDiffX2 = this.diffX2\n    },\n\n    webMoveHandler1(e) {\n      if (this.env === 'weex' || this.disabled) {\n        return\n      }\n\n      const deltaX = (e.changedTouches[0].pageX - this.startX) * this.DPR\n      const diff = this.startDiffX1 + deltaX\n\n      let max = this.length\n      if (this.range) {\n        max = this.diffX2 - this.minDist\n      }\n\n      if (diff > 0 && diff < max) {\n        this.diffX1 = diff\n        animation.transition(\n          this.block1,\n          {\n            styles: {\n              transform: `translateX(${this.diffX1}px)`\n            }\n          },\n          () => {}\n        )\n        if (!this.range) {\n          this.$emit('updateValue', this._getValue(this.diffX1))\n        } else {\n          this.selectRange[0] = this._getValue(this.diffX1)\n          this.$emit('updateValue', this.selectRange)\n        }\n      }\n    },\n\n    webMoveHandler2(e) {\n      if (this.env === 'weex' || this.disabled) {\n        return\n      }\n\n      const deltaX = (e.changedTouches[0].pageX - this.startX) * this.DPR\n      const diff = this.startDiffX2 + deltaX\n      const min = this.diffX1 + this.minDist\n      const max = this.length\n\n      if (diff > min && diff < max) {\n        this.diffX2 = diff\n        animation.transition(\n          this.block2,\n          {\n            styles: {\n              transform: `translateX(${this.diffX2}px)`\n            }\n          },\n          () => {}\n        )\n        if (!this.range) {\n          this.$emit('updateValue', this._getValue(this.diffX2))\n        } else {\n          this.selectRange[1] = this._getValue(this.diffX2)\n          this.$emit('updateValue', this.selectRange)\n        }\n      }\n    },\n\n    bindBlock1() {\n      const self = this\n\n      // 如果禁用，不行进行表达式绑定\n      if (self.disabled) {\n        Binding.unbind({\n          token: this.gesToken1,\n          eventType: 'pan'\n        })\n        this.gesToken1 = 0\n        return\n      }\n\n      // 初始化按钮&条的大小范围\n      let blockMax1 = 0\n      if (self.range) {\n        blockMax1 = self.diffX2 - self.minDist\n      } else {\n        blockMax1 = self.length\n      }\n\n      const barMax1 = self.diffX2\n\n      if (!self.range) {\n        const startLeft = self.diffX1 - blockMax1 - self.minDist\n\n        const props = [\n          {\n            element: self.block1.ref,\n            property: 'transform.translateX',\n            expression: `min(${blockMax1}, max(x + ${self.diffX1}, 0))`\n          },\n          {\n            element: self.valueBar.ref,\n            property: 'transform.translateX',\n            expression: `min(0, max(x + ${startLeft}, -${blockMax1}))`\n          }\n        ]\n\n        const gesTokenObj = Binding.bind(\n          {\n            anchor: self.block1.ref,\n            eventType: 'pan',\n            props\n          },\n          e => {\n            if (e.state === 'end' || e.state === 'cancel' || e.state === 'exit') {\n              const range = self.getRange()\n              // 限制diffX1范围\n              self.diffX1 = self._restrictValue(range.rangeX1, self.diffX1 + e.deltaX)\n              self.bindBlock1()\n            }\n          }\n        )\n        this.gesToken1 = gesTokenObj.token\n      } else {\n        // 选范围\n        const props = [\n          {\n            element: self.block1.ref,\n            property: 'transform.translateX',\n            expression: `min(${blockMax1}, max(x + ${self.diffX1}, 0))`\n          },\n          {\n            element: self.valueBar.ref,\n            property: 'transform.translateX',\n            expression: `min(${blockMax1}, max(x + ${self.diffX1}, 0))`\n          },\n          {\n            element: self.valueBar.ref,\n            property: 'width',\n            expression: `min(${barMax1}, max(0, ${self.barWidth} - x))`\n          }\n        ]\n\n        const gesTokenObj = Binding.bind(\n          {\n            anchor: self.block1.ref,\n            eventType: 'pan',\n            props\n          },\n          e => {\n            if (e.state === 'end' || e.state === 'cancel' || e.state === 'exit') {\n              const range = self.getRange()\n              self.barWidth = self._restrictValue(range.rangeX1, self.barWidth - e.deltaX)\n              self.diffX1 = self._restrictValue(range.rangeX1, self.diffX1 + e.deltaX)\n              self.bindBlock1()\n            }\n          }\n        )\n        this.gesToken1 = gesTokenObj.token\n      }\n    },\n\n    bindBlock2() {\n      const self = this\n\n      // 如果禁用，不行进行表达式绑定\n      if (self.disabled) {\n        Binding.unbind({\n          token: this.gesToken2,\n          eventType: 'pan'\n        })\n        this.gesToken2 = 0\n        return\n      }\n\n      // 初始化按钮&条的大小范围\n      let blockMax1 = 0\n      if (self.range) {\n        blockMax1 = self.diffX2 - self.minDist\n      } else {\n        blockMax1 = self.length\n      }\n\n      const blockMax2 = self.length\n      const blockMin2 = self.diffX1 + self.minDist\n      const barMax2 = self.length - self.diffX1\n\n      const props = [\n        {\n          element: self.block2.ref,\n          property: 'transform.translateX',\n          expression: `min(${blockMax2}, max(x + ${self.diffX2}, ${blockMin2}))`\n        },\n        {\n          element: self.valueBar.ref,\n          property: 'width',\n          expression: `min(${barMax2}, max(0, x + ${self.barWidth}))`\n        }\n      ]\n\n      const gesTokenObj = Binding.bind(\n        {\n          anchor: self.block2.ref,\n          eventType: 'pan',\n          props\n        },\n        e => {\n          if (e.state === 'end' || e.state === 'cancel' || e.state === 'exit') {\n            const range = self.getRange()\n            self.barWidth = self._restrictValue([0, self.length - self.diffX1], self.barWidth + e.deltaX)\n            self.diffX2 = self._restrictValue(range.rangeX2, self.diffX2 + e.deltaX)\n            self.bindBlock2()\n          }\n        }\n      )\n      this.gesToken2 = gesTokenObj.token\n    },\n\n    // 获取diffx1 diffx2 取值范围\n    getRange() {\n      if (!this.range) {\n        return {\n          rangeX1: [0, this.length]\n        }\n      } else {\n        return {\n          rangeX1: [0, this.diffX2 - this.minDist],\n          rangeX2: [this.diffX1 + this.minDist, this.length]\n        }\n      }\n    },\n\n    // 限制取值范围\n    _restrictValue(range, value) {\n      if (range && range.length && range.length === 2) {\n        if (value < range[0]) {\n          return range[0]\n        } else if (value > range[1]) {\n          return range[1]\n        } else {\n          return value\n        }\n      }\n      return\n    },\n\n    // 根据x方向偏移量计算value\n    _getValue(diffX) {\n      return Math.round((diffX / this.length) * (this.max - this.min) + this.min)\n    },\n\n    // 根据value和length计算x方向偏移值\n    _getDiffX(value) {\n      return ((value - this.min) / (this.max - this.min)) * this.length\n    }\n  }\n}\n</script>\n\n<style scoped>\n.slider-bar-container {\n  /* 拿掉高度 add by hairong */\n  /* height: 56px; */\n  justify-content: center;\n  align-items: center;\n  overflow: hidden;\n}\n\n.range-bar {\n  overflow: hidden;\n}\n\n.value-bar {\n  height: 4px;\n  overflow: hidden;\n}\n\n.slide-block {\n  width: 44px;\n  height: 44px;\n  background-color: #ffffff;\n  border-radius: 50%;\n  border-width: 1px;\n  border-color: rgba(0, 0, 0, 0.1);\n  position: absolute;\n  left: 0;\n  /* bottom: 0; */\n  bottom: 10px;\n  box-shadow: 2px 3px 3px #999;\n}\n</style>\n"],"sourceRoot":""}]);
 
 // exports
 
@@ -8667,7 +8667,7 @@ exports = module.exports = __webpack_require__(0)(true);
 
 
 // module
-exports.push([module.i, "\n.loading-image[data-v-5680972d] {\n  height: 0.42667rem;\n  width: 0.42667rem;\n  margin-right: 0.13333rem;\n}\n.dof-btn[data-v-5680972d] {\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: row;\n          flex-direction: row;\n  -webkit-box-align: center;\n  -webkit-align-items: center;\n          align-items: center;\n  -webkit-box-pack: center;\n  -webkit-justify-content: center;\n          justify-content: center;\n  /* border-radius: 12px; */\n  opacity: 1;\n  position: relative;\n  overflow: hidden;\n}\n.mask[data-v-5680972d] {\n  position: absolute;\n  top: 0px;\n  right: 0px;\n  bottom: 0px;\n  left: 0px;\n}\n.mask[data-v-5680972d]:active {\n  background-color: rgba(255, 255, 255, 0.1);\n}\n.dof-btn-highlight-primary-default[data-v-5680972d]:active {\n  background-color: #226de5;\n}\n.dof-btn-highlight-primary-base[data-v-5680972d]:active {\n  background-color: #d1d8e5;\n}\n.dof-btn-highlight-primary-plain[data-v-5680972d]:active {\n  background-color: rgba(38, 122, 255, 0.1);\n}\n.dof-btn-highlight-purple-default[data-v-5680972d]:active {\n  background-color: #8a54e3;\n}\n.dof-btn-highlight-purple-base[data-v-5680972d]:active {\n  background-color: #d5cee5;\n}\n.dof-btn-highlight-purple-plain[data-v-5680972d]:active {\n  background-color: rgba(153, 94, 252, 0.1);\n}\n.dof-btn-highlight-slate-default[data-v-5680972d]:active {\n  background-color: #5b69e6;\n}\n.dof-btn-highlight-slate-base[data-v-5680972d]:active {\n  background-color: #ced0e5;\n}\n.dof-btn-highlight-slate-plain[data-v-5680972d]:active {\n  background-color: rgba(101, 117, 255, 0.1);\n}\n.dof-btn-highlight-aqua-default[data-v-5680972d]:active {\n  background-color: #24afe6;\n}\n.dof-btn-highlight-aqua-base[data-v-5680972d]:active {\n  background-color: #cedee5;\n}\n.dof-btn-highlight-aqua-plain[data-v-5680972d]:active {\n  background-color: rgba(41, 195, 255, 0.1);\n}\n.dof-btn-highlight-turquoise-default[data-v-5680972d]:active {\n  background-color: #00b7a5;\n}\n.dof-btn-highlight-turquoise-base[data-v-5680972d]:active {\n  background-color: #cee5e3;\n}\n.dof-btn-highlight-turquoise-plain[data-v-5680972d]:active {\n  background-color: rgba(0, 203, 184, 0.1);\n}\n.dof-btn-highlight-yellow-default[data-v-5680972d]:active {\n  background-color: #e5980e;\n}\n.dof-btn-highlight-yellow-base[data-v-5680972d]:active {\n  background-color: #e5dbc9;\n}\n.dof-btn-highlight-yellow-plain[data-v-5680972d]:active {\n  background-color: rgba(255, 170, 16, 0.1);\n}\n.dof-btn-highlight-orange-default[data-v-5680972d]:active {\n  background-color: #e67521;\n}\n.dof-btn-highlight-orange-base[data-v-5680972d]:active {\n  background-color: #e5d7ce;\n}\n.dof-btn-highlight-orange-plain[data-v-5680972d]:active {\n  background-color: rgba(255, 130, 37, 0.1);\n}\n.dof-btn-highlight-tomato-default[data-v-5680972d]:active {\n  background-color: #e65f44;\n}\n.dof-btn-highlight-tomato-base[data-v-5680972d]:active {\n  background-color: #e6d3cf;\n}\n.dof-btn-highlight-tomato-plain[data-v-5680972d]:active {\n  background-color: rgba(255, 106, 76, 0.1);\n}\n.dof-btn-highlight-gray-default[data-v-5680972d]:active {\n  background-color: #6f798b;\n}\n.dof-btn-highlight-gray-base[data-v-5680972d]:active {\n  background-color: #b9c1ce;\n}\n.dof-btn-highlight-gray-plain[data-v-5680972d]:active {\n  background-color: rgba(124, 135, 155, 0.1);\n}\n.dof-btn-highlight-colmo-default[data-v-5680972d]:active {\n  background-color: #743d2a;\n}\n.dof-btn-highlight-colmo-base[data-v-5680972d]:active {\n  background-color: rgba(0, 0, 0, 0.3);\n}\n.dof-btn-highlight-colmo-plain[data-v-5680972d]:active {\n  background-color: #636569;\n}\n.btn-text[data-v-5680972d] {\n  font-family: PingFangSC-Medium;\n  text-overflow: ellipsis;\n  lines: 1;\n  /* color: #ffffff; */\n  /* margin-left: 10px; */\n  overflow: hidden;\n  text-overflow: ellipsis;\n  -webkit-line-clamp: 1;\n}\n.dof-text-highlight-primary[data-v-5680972d]:active {\n  color: #5b69e6;\n}\n.dof-text-highlight-purple[data-v-5680972d]:active {\n  color: #8a54e3;\n}\n.dof-text-highlight-slate[data-v-5680972d]:active {\n  color: #5b69e6;\n}\n.dof-text-highlight-aqua[data-v-5680972d]:active {\n  color: #24afe6;\n}\n.dof-text-highlight-turquoise[data-v-5680972d]:active {\n  color: #00b7a5;\n}\n.dof-text-highlight-yellow[data-v-5680972d]:active {\n  color: #e5980e;\n}\n.dof-text-highlight-orange[data-v-5680972d]:active {\n  color: #e67521;\n}\n.dof-text-highlight-tomatot[data-v-5680972d]:active {\n  color: #e65f44;\n}\n.dof-text-highlight-gray[data-v-5680972d]:active {\n  color: #6f798b;\n}\n", "", {"version":3,"sources":["/Users/wuhm45/Documents/code/weex组件库/dolphin-weex-ui/packages/dof-button/index.vue?af83469c","/Users/wuhm45/Documents/code/weex组件库/dolphin-weex-ui/packages/dof-button/<no source>"],"names":[],"mappings":";AAwJA;EACA,mBAAA;EACA,kBAAA;EACA,yBAAA;CACA;AACA;EACA,+BAAA;EAAA,8BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,yBAAA;EAAA,gCAAA;UAAA,wBAAA;EACA,0BAAA;EACA,WAAA;EACA,mBAAA;EACA,iBAAA;CACA;AACA;EACA,mBAAA;EACA,SAAA;EACA,WAAA;EACA,YAAA;EACA,UAAA;CACA;AACA;EACA,2CAAA;CACA;AAEA;EACA,0BAAA;CACA;AAEA;EACA,0BAAA;CACA;AACA;EACA,0CAAA;CACA;AACA;EACA,0BAAA;CACA;AACA;EACA,0BAAA;CACA;AACA;EACA,0CAAA;CACA;AAEA;EACA,0BAAA;CACA;AAEA;EACA,0BAAA;CACA;AACA;EACA,2CAAA;CACA;AAEA;EACA,0BAAA;CACA;AAEA;EACA,0BAAA;CACA;AACA;EACA,0CAAA;CACA;AAEA;EACA,0BAAA;CACA;AAEA;EACA,0BAAA;CACA;AACA;EACA,yCAAA;CACA;AAEA;EACA,0BAAA;CACA;AAEA;EACA,0BAAA;CACA;AACA;EACA,0CAAA;CACA;AAEA;EACA,0BAAA;CACA;AAEA;EACA,0BAAA;CACA;AACA;EACA,0CAAA;CACA;AAEA;EACA,0BAAA;CACA;AACA;EACA,0BAAA;CACA;AACA;EACA,0CAAA;CACA;AAEA;EACA,0BAAA;CACA;AACA;EACA,0BAAA;CACA;AACA;EACA,2CAAA;CACA;AACA;EACA,0BAAA;CACA;AACA;EACA,qCAAA;CACA;AACA;EACA,0BAAA;CACA;AAEA;EACA,+BAAA;EACA,wBAAA;EACA,SAAA;EACA,qBAAA;EACA,wBAAA;EC9RA,iBAAA;EAAA,wBAAA;EAAA,sBAAA;CD+RA;AACA;EACA,eAAA;CACA;AACA;EACA,eAAA;CACA;AACA;EACA,eAAA;CACA;AACA;EACA,eAAA;CACA;AACA;EACA,eAAA;CACA;AACA;EACA,eAAA;CACA;AACA;EACA,eAAA;CACA;AACA;EACA,eAAA;CACA;AACA;EACA,eAAA;CACA","file":"index.vue","sourcesContent":["<!-- modified by liuhr7 on 19/12/28. -->\n\n<template>\n  <WeexThemeView>\n    <text\n      v-if=\"pattern === 'plain_text'\"\n      :class=\"['btn-text', isHighlight && !disabled && pattern === 'text' && !_isColmo && `dof-text-highlight-${type}`]\"\n      :style=\"mrTextStyle\"\n      @click=\"onTextClicked\"\n      :aria-label=\"text ? text + '。按钮。' : ''\"\n      >{{ loading && size == 'small' ? '' : text }}</text\n    >\n    <div\n      v-else\n      :class=\"['dof-btn', isHighlight && !disabled && !_isColmo && `dof-btn-highlight-${type}-${pattern}`]\"\n      :style=\"mrBtnStyle\"\n      @click=\"onClicked\"\n      :accessible=\"true\"\n      :aria-label=\"text ? text + '。按钮。' : ''\"\n    >\n      <dof-spinner :type=\"loadingGif\" class=\"loading-image\" v-if=\"loading\" />\n      <slot>\n        <text\n          :class=\"['btn-text', isHighlight && !disabled && pattern === 'text' && `dof-text-highlight-${type}`]\"\n          :style=\"mrTextStyle\"\n          @click=\"onTextClicked\"\n          :aria-label=\"text ? text + '。按钮。' : ''\"\n          >{{ loading && size == 'small' ? '' : text }}</text\n        >\n      </slot>\n      <div v-if=\"_isColmo && !disabled && !loading\" class=\"mask\" @click=\"onClicked\"></div>\n    </div>\n  </WeexThemeView>\n</template>\n\n<script>\nimport {\n  STYLE_MAP,\n  TEXT_STYLE_MAP,\n  BUTTON_STYLE_MAP,\n  COLMO_BUTTON_STYLE_MAP,\n  TEXT_FONTSIZE_STYLE_MAP,\n  COLMO_TEXT_FONTSIZE_STYLE_MAP\n} from './type'\nimport Utils from '../utils'\nimport ColmoMixin from '../../mixins/colmo'\nimport { WeexThemeView } from '@dolphinweex/weex-theme'\nimport DofSpinner from '../dof-spinner'\n\nexport default {\n  mixins: [ColmoMixin],\n  components: { WeexThemeView, DofSpinner },\n  props: {\n    loading: {\n      type: Boolean,\n      default: false\n    },\n    text: {\n      type: String,\n      default: '确认'\n    },\n    size: {\n      type: String,\n      default: 'full'\n    },\n    type: {\n      type: String,\n      default: 'primary'\n    },\n    pattern: {\n      type: String,\n      default: 'default'\n    },\n    disabled: {\n      type: Boolean,\n      default: false\n    },\n    isHighlight: {\n      type: Boolean,\n      default: true\n    },\n    btnStyle: Object,\n    textStyle: Object,\n    disabledStyle: Object\n  },\n  computed: {\n    mrBtnStyle() {\n      let { type, pattern, disabled, btnStyle, size, disabledStyle } = this\n      let buttonStyle = BUTTON_STYLE_MAP\n      if (this._isColmo && this.type === 'primary') {\n        type = 'colmo'\n        buttonStyle = COLMO_BUTTON_STYLE_MAP\n      }\n      const mrBtnStyle = {\n        ...STYLE_MAP[type][pattern],\n        ...buttonStyle[size],\n        ...btnStyle\n      }\n\n      let disabledInStyle = { opacity: 0.3 }\n      if (type === 'white') {\n        disabledInStyle = { backgroundColor: 'rgba(0, 0, 0, 0.1)' }\n      }\n\n      return disabled\n        ? {\n            ...mrBtnStyle,\n            ...disabledInStyle,\n            ...disabledStyle\n          }\n        : mrBtnStyle\n    },\n    mrTextStyle() {\n      let { type, pattern, disabled, textStyle, size } = this\n      if (pattern === 'plain_text') pattern = 'text'\n      let buttonTextStyle = TEXT_FONTSIZE_STYLE_MAP\n      if (this._isColmo && this.type === 'primary') {\n        type = 'colmo'\n        buttonTextStyle = COLMO_TEXT_FONTSIZE_STYLE_MAP\n      }\n      const mrTextStyle = {\n        ...TEXT_STYLE_MAP[type][pattern],\n        ...buttonTextStyle[size],\n        ...textStyle\n      }\n      return disabled ? { ...mrTextStyle } : mrTextStyle\n    },\n    loadingGif() {\n      if (this._isColmo) return 'colmo'\n      const { pattern } = this\n      if (pattern === 'default') {\n        return 'white'\n      } else {\n        return 'black'\n      }\n    }\n  },\n  methods: {\n    onClicked(e) {\n      const { type, pattern, disabled } = this\n      disabled ? null : this.$emit('dofButtonClicked', { e, type, pattern, disabled })\n    },\n    onTextClicked(e) {\n      const { type, pattern, disabled } = this\n      disabled ? null : this.$emit('dofButtonClicked', { e, type, pattern, disabled })\n    }\n  }\n}\n</script>\n\n<style src=\"./colmo.css\"></style>\n<style scoped>\n.loading-image {\n  height: 32px;\n  width: 32px;\n  margin-right: 10px;\n}\n.dof-btn {\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  /* border-radius: 12px; */\n  opacity: 1;\n  position: relative;\n  overflow: hidden;\n}\n.mask {\n  position: absolute;\n  top: 0px;\n  right: 0px;\n  bottom: 0px;\n  left: 0px;\n}\n.mask:active {\n  background-color: rgba(255, 255, 255, 0.1);\n}\n\n.dof-btn-highlight-primary-default:active {\n  background-color: #226de5;\n}\n\n.dof-btn-highlight-primary-base:active {\n  background-color: #d1d8e5;\n}\n.dof-btn-highlight-primary-plain:active {\n  background-color: rgba(38, 122, 255, 0.1);\n}\n.dof-btn-highlight-purple-default:active {\n  background-color: #8a54e3;\n}\n.dof-btn-highlight-purple-base:active {\n  background-color: #d5cee5;\n}\n.dof-btn-highlight-purple-plain:active {\n  background-color: rgba(153, 94, 252, 0.1);\n}\n\n.dof-btn-highlight-slate-default:active {\n  background-color: #5b69e6;\n}\n\n.dof-btn-highlight-slate-base:active {\n  background-color: #ced0e5;\n}\n.dof-btn-highlight-slate-plain:active {\n  background-color: rgba(101, 117, 255, 0.1);\n}\n\n.dof-btn-highlight-aqua-default:active {\n  background-color: #24afe6;\n}\n\n.dof-btn-highlight-aqua-base:active {\n  background-color: #cedee5;\n}\n.dof-btn-highlight-aqua-plain:active {\n  background-color: rgba(41, 195, 255, 0.1);\n}\n\n.dof-btn-highlight-turquoise-default:active {\n  background-color: #00b7a5;\n}\n\n.dof-btn-highlight-turquoise-base:active {\n  background-color: #cee5e3;\n}\n.dof-btn-highlight-turquoise-plain:active {\n  background-color: rgba(0, 203, 184, 0.1);\n}\n\n.dof-btn-highlight-yellow-default:active {\n  background-color: #e5980e;\n}\n\n.dof-btn-highlight-yellow-base:active {\n  background-color: #e5dbc9;\n}\n.dof-btn-highlight-yellow-plain:active {\n  background-color: rgba(255, 170, 16, 0.1);\n}\n\n.dof-btn-highlight-orange-default:active {\n  background-color: #e67521;\n}\n\n.dof-btn-highlight-orange-base:active {\n  background-color: #e5d7ce;\n}\n.dof-btn-highlight-orange-plain:active {\n  background-color: rgba(255, 130, 37, 0.1);\n}\n\n.dof-btn-highlight-tomato-default:active {\n  background-color: #e65f44;\n}\n.dof-btn-highlight-tomato-base:active {\n  background-color: #e6d3cf;\n}\n.dof-btn-highlight-tomato-plain:active {\n  background-color: rgba(255, 106, 76, 0.1);\n}\n\n.dof-btn-highlight-gray-default:active {\n  background-color: #6f798b;\n}\n.dof-btn-highlight-gray-base:active {\n  background-color: #b9c1ce;\n}\n.dof-btn-highlight-gray-plain:active {\n  background-color: rgba(124, 135, 155, 0.1);\n}\n.dof-btn-highlight-colmo-default:active {\n  background-color: #743d2a;\n}\n.dof-btn-highlight-colmo-base:active {\n  background-color: rgba(0, 0, 0, 0.3);\n}\n.dof-btn-highlight-colmo-plain:active {\n  background-color: #636569;\n}\n\n.btn-text {\n  font-family: PingFangSC-Medium;\n  text-overflow: ellipsis;\n  lines: 1;\n  /* color: #ffffff; */\n  /* margin-left: 10px; */\n}\n.dof-text-highlight-primary:active {\n  color: #5b69e6;\n}\n.dof-text-highlight-purple:active {\n  color: #8a54e3;\n}\n.dof-text-highlight-slate:active {\n  color: #5b69e6;\n}\n.dof-text-highlight-aqua:active {\n  color: #24afe6;\n}\n.dof-text-highlight-turquoise:active {\n  color: #00b7a5;\n}\n.dof-text-highlight-yellow:active {\n  color: #e5980e;\n}\n.dof-text-highlight-orange:active {\n  color: #e67521;\n}\n.dof-text-highlight-tomatot:active {\n  color: #e65f44;\n}\n.dof-text-highlight-gray:active {\n  color: #6f798b;\n}\n</style>\n",null],"sourceRoot":""}]);
+exports.push([module.i, "\n.loading-image[data-v-5680972d] {\n  height: 0.42667rem;\n  width: 0.42667rem;\n  margin-right: 0.13333rem;\n}\n.dof-btn[data-v-5680972d] {\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: row;\n          flex-direction: row;\n  -webkit-box-align: center;\n  -webkit-align-items: center;\n          align-items: center;\n  -webkit-box-pack: center;\n  -webkit-justify-content: center;\n          justify-content: center;\n  /* border-radius: 12px; */\n  opacity: 1;\n  position: relative;\n  overflow: hidden;\n}\n.mask[data-v-5680972d] {\n  position: absolute;\n  top: 0px;\n  right: 0px;\n  bottom: 0px;\n  left: 0px;\n}\n.mask[data-v-5680972d]:active {\n  background-color: rgba(255, 255, 255, 0.1);\n}\n.dof-btn-highlight-primary-default[data-v-5680972d] {\n  background-color: #267aff;\n}\n.dof-btn-highlight-primary-default[data-v-5680972d]:active {\n  background-color: #226de5;\n}\n.dof-btn-highlight-primary-base[data-v-5680972d] {\n  background-color: #e9f1ff;\n}\n.dof-btn-highlight-primary-base[data-v-5680972d]:active {\n  background-color: #d1d8e5;\n}\n.dof-btn-highlight-primary-plain[data-v-5680972d] {\n  background-color: #ffffff;\n}\n.dof-btn-highlight-primary-plain[data-v-5680972d]:active {\n  background-color: rgba(38, 122, 255, 0.1);\n}\n.dof-btn-highlight-purple-default[data-v-5680972d] {\n  background-color: #995efc;\n}\n.dof-btn-highlight-purple-default[data-v-5680972d]:active {\n  background-color: #8a54e3;\n}\n.dof-btn-highlight-purple-base[data-v-5680972d] {\n  background-color: #eee6ff;\n}\n.dof-btn-highlight-purple-base[data-v-5680972d]:active {\n  background-color: #d5cee5;\n}\n.dof-btn-highlight-purple-plain[data-v-5680972d] {\n  background-color: #ffffff;\n}\n.dof-btn-highlight-purple-plain[data-v-5680972d]:active {\n  background-color: rgba(153, 94, 252, 0.1);\n}\n.dof-btn-highlight-slate-default[data-v-5680972d] {\n  background-color: #6575ff;\n}\n.dof-btn-highlight-slate-default[data-v-5680972d]:active {\n  background-color: #5b69e6;\n}\n.dof-btn-highlight-slate-base[data-v-5680972d] {\n  background-color: #e6e8ff;\n}\n.dof-btn-highlight-slate-base[data-v-5680972d]:active {\n  background-color: #ced0e5;\n}\n.dof-btn-highlight-slate-plain[data-v-5680972d] {\n  background-color: #ffffff;\n}\n.dof-btn-highlight-slate-plain[data-v-5680972d]:active {\n  background-color: rgba(101, 117, 255, 0.1);\n}\n.dof-btn-highlight-aqua-default[data-v-5680972d] {\n  background-color: #29c3ff;\n}\n.dof-btn-highlight-aqua-default[data-v-5680972d]:active {\n  background-color: #24afe6;\n}\n.dof-btn-highlight-aqua-base[data-v-5680972d] {\n  background-color: #e6f8ff;\n}\n.dof-btn-highlight-aqua-base[data-v-5680972d]:active {\n  background-color: #cedee5;\n}\n.dof-btn-highlight-aqua-plain[data-v-5680972d] {\n  background-color: #ffffff;\n}\n.dof-btn-highlight-aqua-plain[data-v-5680972d]:active {\n  background-color: rgba(41, 195, 255, 0.1);\n}\n.dof-btn-highlight-turquoise-default[data-v-5680972d] {\n  background-color: #00cbb8;\n}\n.dof-btn-highlight-turquoise-default[data-v-5680972d]:active {\n  background-color: #00b7a5;\n}\n.dof-btn-highlight-turquoise-base[data-v-5680972d] {\n  background-color: #e6fffd;\n}\n.dof-btn-highlight-turquoise-base[data-v-5680972d]:active {\n  background-color: #cee5e3;\n}\n.dof-btn-highlight-turquoise-plain[data-v-5680972d] {\n  background-color: #ffffff;\n}\n.dof-btn-highlight-turquoise-plain[data-v-5680972d]:active {\n  background-color: rgba(0, 203, 184, 0.1);\n}\n.dof-btn-highlight-yellow-default[data-v-5680972d] {\n  background-color: #ffaa10;\n}\n.dof-btn-highlight-yellow-default[data-v-5680972d]:active {\n  background-color: #e5980e;\n}\n.dof-btn-highlight-yellow-base[data-v-5680972d] {\n  background-color: #fff4e0;\n}\n.dof-btn-highlight-yellow-base[data-v-5680972d]:active {\n  background-color: #e5dbc9;\n}\n.dof-btn-highlight-yellow-plain[data-v-5680972d] {\n  background-color: #ffffff;\n}\n.dof-btn-highlight-yellow-plain[data-v-5680972d]:active {\n  background-color: rgba(255, 170, 16, 0.1);\n}\n.dof-btn-highlight-orange-default[data-v-5680972d] {\n  background-color: #ff8225;\n}\n.dof-btn-highlight-orange-default[data-v-5680972d]:active {\n  background-color: #e67521;\n}\n.dof-btn-highlight-orange-base[data-v-5680972d] {\n  background-color: #fff0e6;\n}\n.dof-btn-highlight-orange-base[data-v-5680972d]:active {\n  background-color: #e5d7ce;\n}\n.dof-btn-highlight-orange-plain[data-v-5680972d] {\n  background-color: #ffffff;\n}\n.dof-btn-highlight-orange-plain[data-v-5680972d]:active {\n  background-color: rgba(255, 130, 37, 0.1);\n}\n.dof-btn-highlight-tomato-default[data-v-5680972d] {\n  background-color: #ff6a4c;\n}\n.dof-btn-highlight-tomato-default[data-v-5680972d]:active {\n  background-color: #e65f44;\n}\n.dof-btn-highlight-tomato-base[data-v-5680972d] {\n  background-color: #ffeae6;\n}\n.dof-btn-highlight-tomato-base[data-v-5680972d]:active {\n  background-color: #e6d3cf;\n}\n.dof-btn-highlight-tomato-plain[data-v-5680972d] {\n  background-color: #ffffff;\n}\n.dof-btn-highlight-tomato-plain[data-v-5680972d]:active {\n  background-color: rgba(255, 106, 76, 0.1);\n}\n.dof-btn-highlight-gray-default[data-v-5680972d] {\n  background-color: #7c879b;\n}\n.dof-btn-highlight-gray-default[data-v-5680972d]:active {\n  background-color: #6f798b;\n}\n.dof-btn-highlight-gray-base[data-v-5680972d] {\n  background-color: #cfd7e6;\n}\n.dof-btn-highlight-gray-base[data-v-5680972d]:active {\n  background-color: #b9c1ce;\n}\n.dof-btn-highlight-gray-plain[data-v-5680972d] {\n  background-color: #ffffff;\n}\n.dof-btn-highlight-gray-plain[data-v-5680972d]:active {\n  background-color: rgba(124, 135, 155, 0.1);\n}\n.dof-btn-highlight-colmo-default[data-v-5680972d] {\n  background-color: #b35336;\n}\n.dof-btn-highlight-colmo-default[data-v-5680972d]:active {\n  background-color: #743d2a;\n}\n.dof-btn-highlight-colmo-base[data-v-5680972d] {\n  background-color: #292c30;\n}\n.dof-btn-highlight-colmo-base[data-v-5680972d]:active {\n  background-color: rgba(0, 0, 0, 0.3);\n}\n.dof-btn-highlight-colmo-plain[data-v-5680972d] {\n  background-color: transparent;\n}\n.dof-btn-highlight-colmo-plain[data-v-5680972d]:active {\n  background-color: #636569;\n}\n.btn-text[data-v-5680972d] {\n  font-family: PingFangSC-Medium;\n  text-overflow: ellipsis;\n  lines: 1;\n  /* color: #ffffff; */\n  /* margin-left: 10px; */\n  overflow: hidden;\n  text-overflow: ellipsis;\n  -webkit-line-clamp: 1;\n}\n.dof-text-highlight-primary[data-v-5680972d]:active {\n  color: #5b69e6;\n}\n.dof-text-highlight-purple[data-v-5680972d]:active {\n  color: #8a54e3;\n}\n.dof-text-highlight-slate[data-v-5680972d]:active {\n  color: #5b69e6;\n}\n.dof-text-highlight-aqua[data-v-5680972d]:active {\n  color: #24afe6;\n}\n.dof-text-highlight-turquoise[data-v-5680972d]:active {\n  color: #00b7a5;\n}\n.dof-text-highlight-yellow[data-v-5680972d]:active {\n  color: #e5980e;\n}\n.dof-text-highlight-orange[data-v-5680972d]:active {\n  color: #e67521;\n}\n.dof-text-highlight-tomatot[data-v-5680972d]:active {\n  color: #e65f44;\n}\n.dof-text-highlight-gray[data-v-5680972d]:active {\n  color: #6f798b;\n}\n", "", {"version":3,"sources":["/Users/wuhm45/Documents/code/weex组件库/dolphin-weex-ui/packages/dof-button/index.vue?19ec8339","/Users/wuhm45/Documents/code/weex组件库/dolphin-weex-ui/packages/dof-button/<no source>"],"names":[],"mappings":";AAwJA;EACA,mBAAA;EACA,kBAAA;EACA,yBAAA;CACA;AACA;EACA,+BAAA;EAAA,8BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,yBAAA;EAAA,gCAAA;UAAA,wBAAA;EACA,0BAAA;EACA,WAAA;EACA,mBAAA;EACA,iBAAA;CACA;AACA;EACA,mBAAA;EACA,SAAA;EACA,WAAA;EACA,YAAA;EACA,UAAA;CACA;AACA;EACA,2CAAA;CACA;AAEA;EACA,0BAAA;CACA;AACA;EACA,0BAAA;CACA;AACA;EACA,0BAAA;CACA;AACA;EACA,0BAAA;CACA;AACA;EACA,0BAAA;CACA;AACA;EACA,0CAAA;CACA;AACA;EACA,0BAAA;CACA;AACA;EACA,0BAAA;CACA;AACA;EACA,0BAAA;CACA;AACA;EACA,0BAAA;CACA;AACA;EACA,0BAAA;CACA;AACA;EACA,0CAAA;CACA;AAEA;EACA,0BAAA;CACA;AACA;EACA,0BAAA;CACA;AACA;EACA,0BAAA;CACA;AACA;EACA,0BAAA;CACA;AACA;EACA,0BAAA;CACA;AACA;EACA,2CAAA;CACA;AACA;EACA,0BAAA;CACA;AACA;EACA,0BAAA;CACA;AACA;EACA,0BAAA;CACA;AACA;EACA,0BAAA;CACA;AACA;EACA,0BAAA;CACA;AACA;EACA,0CAAA;CACA;AACA;EACA,0BAAA;CACA;AACA;EACA,0BAAA;CACA;AACA;EACA,0BAAA;CACA;AACA;EACA,0BAAA;CACA;AACA;EACA,0BAAA;CACA;AACA;EACA,yCAAA;CACA;AACA;EACA,0BAAA;CACA;AACA;EACA,0BAAA;CACA;AACA;EACA,0BAAA;CACA;AACA;EACA,0BAAA;CACA;AACA;EACA,0BAAA;CACA;AACA;EACA,0CAAA;CACA;AACA;EACA,0BAAA;CACA;AACA;EACA,0BAAA;CACA;AACA;EACA,0BAAA;CACA;AACA;EACA,0BAAA;CACA;AACA;EACA,0BAAA;CACA;AACA;EACA,0CAAA;CACA;AACA;EACA,0BAAA;CACA;AACA;EACA,0BAAA;CACA;AACA;EACA,0BAAA;CACA;AACA;EACA,0BAAA;CACA;AACA;EACA,0BAAA;CACA;AACA;EACA,0CAAA;CACA;AACA;EACA,0BAAA;CACA;AACA;EACA,0BAAA;CACA;AACA;EACA,0BAAA;CACA;AACA;EACA,0BAAA;CACA;AACA;EACA,0BAAA;CACA;AACA;EACA,2CAAA;CACA;AACA;EACA,0BAAA;CACA;AACA;EACA,0BAAA;CACA;AACA;EACA,0BAAA;CACA;AACA;EACA,qCAAA;CACA;AACA;EACA,8BAAA;CACA;AACA;EACA,0BAAA;CACA;AAEA;EACA,+BAAA;EACA,wBAAA;EACA,SAAA;EACA,qBAAA;EACA,wBAAA;EC5WA,iBAAA;EAAA,wBAAA;EAAA,sBAAA;CD6WA;AACA;EACA,eAAA;CACA;AACA;EACA,eAAA;CACA;AACA;EACA,eAAA;CACA;AACA;EACA,eAAA;CACA;AACA;EACA,eAAA;CACA;AACA;EACA,eAAA;CACA;AACA;EACA,eAAA;CACA;AACA;EACA,eAAA;CACA;AACA;EACA,eAAA;CACA","file":"index.vue","sourcesContent":["<!-- modified by liuhr7 on 19/12/28. -->\n\n<template>\n  <WeexThemeView>\n    <text\n      v-if=\"pattern === 'plain_text'\"\n      :class=\"['btn-text', isHighlight && !disabled && pattern === 'text' && !_isColmo && `dof-text-highlight-${type}`]\"\n      :style=\"mrTextStyle\"\n      @click=\"onTextClicked\"\n      :aria-label=\"text ? text + '。按钮。' : ''\"\n      >{{ loading && size == 'small' ? '' : text }}</text\n    >\n    <div\n      v-else\n      :class=\"['dof-btn', isHighlight && !disabled && !_isColmo && `dof-btn-highlight-${type}-${pattern}`]\"\n      :style=\"mrBtnStyle\"\n      @click=\"onClicked\"\n      :accessible=\"true\"\n      :aria-label=\"text ? text + '。按钮。' : ''\"\n    >\n      <dof-spinner :type=\"loadingGif\" class=\"loading-image\" v-if=\"loading\" />\n      <slot>\n        <text\n          :class=\"['btn-text', isHighlight && !disabled && pattern === 'text' && `dof-text-highlight-${type}`]\"\n          :style=\"mrTextStyle\"\n          @click=\"onTextClicked\"\n          :aria-label=\"text ? text + '。按钮。' : ''\"\n          >{{ loading && size == 'small' ? '' : text }}</text\n        >\n      </slot>\n      <div v-if=\"_isColmo && !disabled && !loading\" class=\"mask\" @click=\"onClicked\"></div>\n    </div>\n  </WeexThemeView>\n</template>\n\n<script>\nimport {\n  STYLE_MAP,\n  TEXT_STYLE_MAP,\n  BUTTON_STYLE_MAP,\n  COLMO_BUTTON_STYLE_MAP,\n  TEXT_FONTSIZE_STYLE_MAP,\n  COLMO_TEXT_FONTSIZE_STYLE_MAP\n} from './type'\nimport Utils from '../utils'\nimport ColmoMixin from '../../mixins/colmo'\nimport { WeexThemeView } from '@dolphinweex/weex-theme'\nimport DofSpinner from '../dof-spinner'\n\nexport default {\n  mixins: [ColmoMixin],\n  components: { WeexThemeView, DofSpinner },\n  props: {\n    loading: {\n      type: Boolean,\n      default: false\n    },\n    text: {\n      type: String,\n      default: '确认'\n    },\n    size: {\n      type: String,\n      default: 'full'\n    },\n    type: {\n      type: String,\n      default: 'primary'\n    },\n    pattern: {\n      type: String,\n      default: 'default'\n    },\n    disabled: {\n      type: Boolean,\n      default: false\n    },\n    isHighlight: {\n      type: Boolean,\n      default: true\n    },\n    btnStyle: Object,\n    textStyle: Object,\n    disabledStyle: Object\n  },\n  computed: {\n    mrBtnStyle() {\n      let { type, pattern, disabled, btnStyle, size, disabledStyle } = this\n      let buttonStyle = BUTTON_STYLE_MAP\n      if (this._isColmo && this.type === 'primary') {\n        type = 'colmo'\n        buttonStyle = COLMO_BUTTON_STYLE_MAP\n      }\n      const mrBtnStyle = {\n        ...STYLE_MAP[type][pattern],\n        ...buttonStyle[size],\n        ...btnStyle\n      }\n\n      let disabledInStyle = { opacity: 0.3 }\n      if (type === 'white') {\n        disabledInStyle = { backgroundColor: 'rgba(0, 0, 0, 0.1)' }\n      }\n\n      return disabled\n        ? {\n            ...mrBtnStyle,\n            ...disabledInStyle,\n            ...disabledStyle\n          }\n        : mrBtnStyle\n    },\n    mrTextStyle() {\n      let { type, pattern, disabled, textStyle, size } = this\n      if (pattern === 'plain_text') pattern = 'text'\n      let buttonTextStyle = TEXT_FONTSIZE_STYLE_MAP\n      if (this._isColmo && this.type === 'primary') {\n        type = 'colmo'\n        buttonTextStyle = COLMO_TEXT_FONTSIZE_STYLE_MAP\n      }\n      const mrTextStyle = {\n        ...TEXT_STYLE_MAP[type][pattern],\n        ...buttonTextStyle[size],\n        ...textStyle\n      }\n      return disabled ? { ...mrTextStyle } : mrTextStyle\n    },\n    loadingGif() {\n      if (this._isColmo) return 'colmo'\n      const { pattern } = this\n      if (pattern === 'default') {\n        return 'white'\n      } else {\n        return 'black'\n      }\n    }\n  },\n  methods: {\n    onClicked(e) {\n      const { type, pattern, disabled } = this\n      disabled ? null : this.$emit('dofButtonClicked', { e, type, pattern, disabled })\n    },\n    onTextClicked(e) {\n      const { type, pattern, disabled } = this\n      disabled ? null : this.$emit('dofButtonClicked', { e, type, pattern, disabled })\n    }\n  }\n}\n</script>\n\n<style src=\"./colmo.css\"></style>\n<style scoped>\n.loading-image {\n  height: 32px;\n  width: 32px;\n  margin-right: 10px;\n}\n.dof-btn {\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  /* border-radius: 12px; */\n  opacity: 1;\n  position: relative;\n  overflow: hidden;\n}\n.mask {\n  position: absolute;\n  top: 0px;\n  right: 0px;\n  bottom: 0px;\n  left: 0px;\n}\n.mask:active {\n  background-color: rgba(255, 255, 255, 0.1);\n}\n\n.dof-btn-highlight-primary-default {\n  background-color: #267aff;\n}\n.dof-btn-highlight-primary-default:active {\n  background-color: #226de5;\n}\n.dof-btn-highlight-primary-base {\n  background-color: #e9f1ff;\n}\n.dof-btn-highlight-primary-base:active {\n  background-color: #d1d8e5;\n}\n.dof-btn-highlight-primary-plain {\n  background-color: #ffffff;\n}\n.dof-btn-highlight-primary-plain:active {\n  background-color: rgba(38, 122, 255, 0.1);\n}\n.dof-btn-highlight-purple-default {\n  background-color: #995efc;\n}\n.dof-btn-highlight-purple-default:active {\n  background-color: #8a54e3;\n}\n.dof-btn-highlight-purple-base {\n  background-color: #eee6ff;\n}\n.dof-btn-highlight-purple-base:active {\n  background-color: #d5cee5;\n}\n.dof-btn-highlight-purple-plain {\n  background-color: #ffffff;\n}\n.dof-btn-highlight-purple-plain:active {\n  background-color: rgba(153, 94, 252, 0.1);\n}\n\n.dof-btn-highlight-slate-default {\n  background-color: #6575ff;\n}\n.dof-btn-highlight-slate-default:active {\n  background-color: #5b69e6;\n}\n.dof-btn-highlight-slate-base {\n  background-color: #e6e8ff;\n}\n.dof-btn-highlight-slate-base:active {\n  background-color: #ced0e5;\n}\n.dof-btn-highlight-slate-plain {\n  background-color: #ffffff;\n}\n.dof-btn-highlight-slate-plain:active {\n  background-color: rgba(101, 117, 255, 0.1);\n}\n.dof-btn-highlight-aqua-default {\n  background-color: #29c3ff;\n}\n.dof-btn-highlight-aqua-default:active {\n  background-color: #24afe6;\n}\n.dof-btn-highlight-aqua-base {\n  background-color: #e6f8ff;\n}\n.dof-btn-highlight-aqua-base:active {\n  background-color: #cedee5;\n}\n.dof-btn-highlight-aqua-plain {\n  background-color: #ffffff;\n}\n.dof-btn-highlight-aqua-plain:active {\n  background-color: rgba(41, 195, 255, 0.1);\n}\n.dof-btn-highlight-turquoise-default {\n  background-color: #00cbb8;\n}\n.dof-btn-highlight-turquoise-default:active {\n  background-color: #00b7a5;\n}\n.dof-btn-highlight-turquoise-base {\n  background-color: #e6fffd;\n}\n.dof-btn-highlight-turquoise-base:active {\n  background-color: #cee5e3;\n}\n.dof-btn-highlight-turquoise-plain {\n  background-color: #ffffff;\n}\n.dof-btn-highlight-turquoise-plain:active {\n  background-color: rgba(0, 203, 184, 0.1);\n}\n.dof-btn-highlight-yellow-default {\n  background-color: #ffaa10;\n}\n.dof-btn-highlight-yellow-default:active {\n  background-color: #e5980e;\n}\n.dof-btn-highlight-yellow-base {\n  background-color: #fff4e0;\n}\n.dof-btn-highlight-yellow-base:active {\n  background-color: #e5dbc9;\n}\n.dof-btn-highlight-yellow-plain {\n  background-color: #ffffff;\n}\n.dof-btn-highlight-yellow-plain:active {\n  background-color: rgba(255, 170, 16, 0.1);\n}\n.dof-btn-highlight-orange-default {\n  background-color: #ff8225;\n}\n.dof-btn-highlight-orange-default:active {\n  background-color: #e67521;\n}\n.dof-btn-highlight-orange-base {\n  background-color: #fff0e6;\n}\n.dof-btn-highlight-orange-base:active {\n  background-color: #e5d7ce;\n}\n.dof-btn-highlight-orange-plain {\n  background-color: #ffffff;\n}\n.dof-btn-highlight-orange-plain:active {\n  background-color: rgba(255, 130, 37, 0.1);\n}\n.dof-btn-highlight-tomato-default {\n  background-color: #ff6a4c;\n}\n.dof-btn-highlight-tomato-default:active {\n  background-color: #e65f44;\n}\n.dof-btn-highlight-tomato-base {\n  background-color: #ffeae6;\n}\n.dof-btn-highlight-tomato-base:active {\n  background-color: #e6d3cf;\n}\n.dof-btn-highlight-tomato-plain {\n  background-color: #ffffff;\n}\n.dof-btn-highlight-tomato-plain:active {\n  background-color: rgba(255, 106, 76, 0.1);\n}\n.dof-btn-highlight-gray-default {\n  background-color: #7c879b;\n}\n.dof-btn-highlight-gray-default:active {\n  background-color: #6f798b;\n}\n.dof-btn-highlight-gray-base {\n  background-color: #cfd7e6;\n}\n.dof-btn-highlight-gray-base:active {\n  background-color: #b9c1ce;\n}\n.dof-btn-highlight-gray-plain {\n  background-color: #ffffff;\n}\n.dof-btn-highlight-gray-plain:active {\n  background-color: rgba(124, 135, 155, 0.1);\n}\n.dof-btn-highlight-colmo-default {\n  background-color: #b35336;\n}\n.dof-btn-highlight-colmo-default:active {\n  background-color: #743d2a;\n}\n.dof-btn-highlight-colmo-base {\n  background-color: #292c30;\n}\n.dof-btn-highlight-colmo-base:active {\n  background-color: rgba(0, 0, 0, 0.3);\n}\n.dof-btn-highlight-colmo-plain {\n  background-color: transparent;\n}\n.dof-btn-highlight-colmo-plain:active {\n  background-color: #636569;\n}\n\n.btn-text {\n  font-family: PingFangSC-Medium;\n  text-overflow: ellipsis;\n  lines: 1;\n  /* color: #ffffff; */\n  /* margin-left: 10px; */\n}\n.dof-text-highlight-primary:active {\n  color: #5b69e6;\n}\n.dof-text-highlight-purple:active {\n  color: #8a54e3;\n}\n.dof-text-highlight-slate:active {\n  color: #5b69e6;\n}\n.dof-text-highlight-aqua:active {\n  color: #24afe6;\n}\n.dof-text-highlight-turquoise:active {\n  color: #00b7a5;\n}\n.dof-text-highlight-yellow:active {\n  color: #e5980e;\n}\n.dof-text-highlight-orange:active {\n  color: #e67521;\n}\n.dof-text-highlight-tomatot:active {\n  color: #e65f44;\n}\n.dof-text-highlight-gray:active {\n  color: #6f798b;\n}\n</style>\n",null],"sourceRoot":""}]);
 
 // exports
 
@@ -8919,7 +8919,7 @@ exports = module.exports = __webpack_require__(0)(true);
 
 
 // module
-exports.push([module.i, "\n.wrapper[data-v-722c555d] {\n  /*hairong add for swipe*/\n  overflow: hidden;\n  position: relative;\n  /* end  by hairong*/\n  /* 解决安卓渲染间隔问题 */\n  /* margin-bottom: -1px; */\n  /* padding-bottom: -1px; */\n}\n.fake-border[data-v-722c555d] {\n  /* width: 750px; */\n  height: 1px;\n  position: absolute;\n  bottom: 1px;\n  left: 0;\n  /* background-color: #f2f2f2; */\n}\n.cell-margin[data-v-722c555d] {\n  margin-bottom: 0.21333rem;\n}\n.dof-cell-highlight[data-v-722c555d]:active {\n  background-color: #f5f5f5;\n}\n.dof-cell[data-v-722c555d] {\n  display: -webkit-box;\n  display: -webkit-flex;\n  display: flex;\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: row;\n          flex-direction: row;\n  -webkit-box-flex: 1;\n  -webkit-flex: 1;\n          flex: 1;\n  /* align-items: center; */\n}\n.cell-wrapper[data-v-722c555d] {\n  -webkit-box-flex: 1;\n  -webkit-flex: 1;\n          flex: 1;\n}\n.mgb-1[data-v-722c555d] {\n  margin-bottom: 1px;\n}\n.cell-disabled-opacity[data-v-722c555d] {\n  opacity: 0.3;\n}\n.cell-abled-opacity[data-v-722c555d] {\n  opacity: 1;\n}\n\n/* left部分 */\n.left[data-v-722c555d] {\n  -webkit-box-pack: center;\n  -webkit-justify-content: center;\n          justify-content: center;\n  /* border-width: 1px; */\n}\n.img-wrapper[data-v-722c555d] {\n}\n.circle-bg[data-v-722c555d] {\n  margin-left: 0.42667rem;\n  /* width: 96px;\n  height: 96px; */\n  display: -webkit-box;\n  display: -webkit-flex;\n  display: flex;\n  -webkit-box-align: center;\n  -webkit-align-items: center;\n          align-items: center;\n  -webkit-box-pack: center;\n  -webkit-justify-content: center;\n          justify-content: center;\n  overflow: hidden;\n}\n.text-dot-tip[data-v-722c555d] {\n  width: 0.21333rem;\n  height: 0.21333rem;\n  border-radius: 0.13333rem;\n  background-color: #ff3b30;\n  -webkit-box-pack: center;\n  -webkit-justify-content: center;\n          justify-content: center;\n  -webkit-box-align: center;\n  -webkit-align-items: center;\n          align-items: center;\n  text-align: center;\n  margin-left: 0.29333rem;\n}\n.dot-tip[data-v-722c555d] {\n  position: absolute;\n  top: 0.45333rem;\n  right: 0px;\n  width: 0.21333rem;\n  height: 0.21333rem;\n  border-radius: 0.13333rem;\n  background-color: #ff3b30;\n}\n.dot-num-tip[data-v-722c555d] {\n  position: absolute;\n  font-size: 0.32rem;\n  top: 0.45333rem;\n  right: 0.21333rem;\n  /* transform: translate(50%, 0); */\n  border-radius: 1.33333rem;\n  /* border-width: 1px;\n  border-color: #ffffff; */\n  background-color: #ff3b30;\n  -webkit-box-align: center;\n  -webkit-align-items: center;\n          align-items: center;\n  -webkit-box-pack: center;\n  -webkit-justify-content: center;\n          justify-content: center;\n  padding-left: 0.10667rem;\n  padding-right: 0.10667rem;\n  line-height: 1;\n}\n.dot-num-tip-text[data-v-722c555d] {\n  font-size: 0.32rem;\n  color: #ffffff;\n}\n.left-img[data-v-722c555d] {\n  /* width: 64px;\n  height: 64px; */\n}\n.main-container[data-v-722c555d] {\n  -webkit-box-flex: 1;\n  -webkit-flex: 1;\n          flex: 1;\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: row;\n          flex-direction: row;\n  -webkit-box-align: center;\n  -webkit-align-items: center;\n          align-items: center;\n  /* padding: 0 0px 0 32px; */\n  margin-left: 0.42667rem;\n  overflow: hidden;\n\n  /* border-width: 1px;\n  border-color: red; */\n}\n.Dotleft32[data-v-722c555d] {\n  margin-left: 0.42667rem;\n}\n.Dotright32[data-v-722c555d] {\n  margin-right: 0.42667rem;\n}\n.notDot[data-v-722c555d] {\n  margin-left: 0px;\n}\n.dotRight[data-v-722c555d] {\n  right: 0.42667rem;\n}\n\n/* label */\n.cell-label-text[data-v-722c555d] {\n  font-size: 0.4rem;\n  color: #666666;\n  width: 2.50667rem;\n  margin-right: 0.13333rem;\n}\n\n/* middle部分 */\n.middle[data-v-722c555d] {\n  -webkit-box-flex: 1;\n  -webkit-flex: 1;\n          flex: 1;\n  min-height: 1.38667rem;\n  overflow: hidden;\n  /* margin-right: 32px; */\n  /* border-width: 1px;\n  border-color: blue; */\n}\n.has-desc[data-v-722c555d] {\n  min-height: 2.13333rem;\n  /* padding-top: 26px; */\n  /* margin-bottom: 2px; */\n  -webkit-box-pack: center;\n  -webkit-justify-content: center;\n          justify-content: center;\n}\n.no-desc[data-v-722c555d] {\n  -webkit-box-pack: center;\n  -webkit-justify-content: center;\n          justify-content: center;\n}\n.cell-title-wrapper[data-v-722c555d] {\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: row;\n          flex-direction: row;\n  margin-right: 0.53333rem;\n  overflow: hidden;\n}\n.cell-title-content[data-v-722c555d] {\n  /* flex: 1; */\n  /* max-width: 400px; */\n  -webkit-box-flex: 1;\n  -webkit-flex: 1;\n          flex: 1;\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: row;\n          flex-direction: row;\n  -webkit-box-align: center;\n  -webkit-align-items: center;\n          align-items: center;\n  -webkit-box-pack: stretch;\n  -webkit-justify-content: stretch;\n          justify-content: stretch;\n  /* border-width: 1px;\n  border-color: orange; */\n  overflow: hidden;\n}\n.title-flex-expand[data-v-722c555d] {\n  -webkit-box-flex: 1;\n  -webkit-flex: 1;\n          flex: 1;\n}\n.cell-title[data-v-722c555d] {\n  -webkit-box-flex: 1;\n  -webkit-flex: 1;\n          flex: 1;\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: row;\n          flex-direction: row;\n  -webkit-box-align: center;\n  -webkit-align-items: center;\n          align-items: center;\n  /* justify-content: flex-start; */\n}\n.avatar-icon[data-v-722c555d] {\n  width: 0.53333rem;\n  height: 0.53333rem;\n  border-radius: 0.26667rem;\n  margin-right: 0.32rem;\n}\n.cell-title-text[data-v-722c555d] {\n  font-family: PingFangSC-Regular;\n  font-size: 0.42667rem;\n  /* line-height: 32px; */\n  color: #000000;\n  lines: 1;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  -webkit-line-clamp: 1;\n}\n\n/* tag */\n.cell-title-tag[data-v-722c555d] {\n  width: 1.17333rem;\n  height: 0.64rem;\n  -webkit-box-pack: center;\n  -webkit-justify-content: center;\n          justify-content: center;\n  -webkit-box-align: center;\n  -webkit-align-items: center;\n          align-items: center;\n  text-align: center;\n  background-color: #f2f2f2;\n  border-radius: 0.32rem;\n  margin-left: 0.24rem;\n}\n.cell-title-tag-text[data-v-722c555d] {\n  font-family: PingFangSC-Medium;\n  font-size: 0.32rem;\n  color: #666666;\n  /* line-height: 24px; */\n}\n\n/* desc */\n.cell-desc-wrapper[data-v-722c555d] {\n  /* flex: 1; */\n  margin-top: 0.21333rem;\n  /* border-width: 1px;\n  border-color: tomato; */\n  /* padding-bottom: 30px; */\n  /* min-height: 36px; */\n}\n.margin-top-24[data-v-722c555d] {\n  margin-top: 0.24rem;\n}\n.cell-desc[data-v-722c555d] {\n  /* border-width: 1px;\n  border-color: aqua; */\n}\n.cell-desc-text[data-v-722c555d] {\n  font-family: PingFangSC-Regular;\n  color: #8a8a8f;\n  font-size: 0.32rem;\n  /* line-height: 36px; */\n  /* desc和title的间距 */\n  /* margin-top: 4px; */\n  /* margin-right: 30px; */\n  /* 文字超出设置 */\n  lines: 2;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  -webkit-line-clamp: 2;\n}\n\n/* 右部 */\n.right-tip-wrapper[data-v-722c555d] {\n  padding: 0.53333rem 0.42667rem 0 0;\n  /* border-width: 1px; */\n}\n.space-gap[data-v-722c555d] {\n  margin-left: 1.22667rem;\n}\n.right-tip-text[data-v-722c555d] {\n  font-family: PingFangSC-Regular;\n  color: #8a8a8f;\n  font-size: 0.32rem;\n  /* line-height: 24px; */\n  text-align: right;\n}\n.right[data-v-722c555d] {\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: row;\n          flex-direction: row;\n  -webkit-box-align: center;\n  -webkit-align-items: center;\n          align-items: center;\n  padding-right: 0.42667rem;\n  padding-left: 0.42667rem;\n}\n.has-no-padding-left[data-v-722c555d] {\n  padding-right: 0;\n  padding-left: 0;\n}\n.right-text-wrapper[data-v-722c555d] {\n  /* 文字距离图标间隔 */\n  /* margin-left: 80px;\n  border-width: 1px;\n  border-color: greenyellow; */\n}\n.right-text[data-v-722c555d] {\n  font-family: PingFangSC-Regular;\n  color: #666666;\n  font-size: 0.37333rem;\n  /* line-height: 28px; */\n  letter-spacing: 0;\n  text-align: right;\n}\n.normal-right-text[data-v-722c555d] {\n  font-size: 0.42667rem;\n  /* line-height: 32px; */\n}\n.single-line-text[data-v-722c555d] {\n  /* color: #8a8a8f;\n  font-size: 24px;\n  line-height: 34px; */\n}\n\n/* arrow */\n.arrow-wrapper[data-v-722c555d] {\n  padding-left: 0.26667rem;\n}\n.cell-arrow-icon[data-v-722c555d] {\n  width: 0.29333rem;\n  height: 0.29333rem;\n}\n.midea-swipe-cell__right[data-v-722c555d] {\n  display: -webkit-box;\n  display: -webkit-flex;\n  display: flex;\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: row;\n          flex-direction: row;\n  -webkit-flex-wrap: nowrap;\n          flex-wrap: nowrap;\n  -webkit-box-pack: center;\n  -webkit-justify-content: center;\n          justify-content: center;\n  -webkit-box-align: center;\n  -webkit-align-items: center;\n          align-items: center;\n  background-color: #ff3b30;\n  font-size: 0.42667rem;\n  color: #ffffff;\n}\n", "", {"version":3,"sources":["/Users/wuhm45/Documents/code/weex组件库/dolphin-weex-ui/packages/dof-cell/index.vue?7e2b09da","/Users/wuhm45/Documents/code/weex组件库/dolphin-weex-ui/packages/dof-cell/<no source>"],"names":[],"mappings":";AAwIA;EACA,yBAAA;EACA,iBAAA;EACA,mBAAA;EACA,oBAAA;EACA,gBAAA;EACA,0BAAA;EACA,2BAAA;CACA;AAEA;EACA,mBAAA;EACA,YAAA;EACA,mBAAA;EACA,YAAA;EACA,QAAA;EACA,gCAAA;CACA;AAEA;EACA,0BAAA;CACA;AAEA;EACA,0BAAA;CACA;AAEA;EACA,qBAAA;EAAA,sBAAA;EAAA,cAAA;EACA,+BAAA;EAAA,8BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,oBAAA;EAAA,gBAAA;UAAA,QAAA;EACA,0BAAA;CACA;AACA;EACA,oBAAA;EAAA,gBAAA;UAAA,QAAA;CACA;AAEA;EACA,mBAAA;CACA;AAEA;EACA,aAAA;CACA;AAEA;EACA,WAAA;CACA;;AAEA,YAAA;AACA;EACA,yBAAA;EAAA,gCAAA;UAAA,wBAAA;EACA,wBAAA;CACA;AAEA;CACA;AAEA;EACA,wBAAA;EACA;kBACA;EACA,qBAAA;EAAA,sBAAA;EAAA,cAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,yBAAA;EAAA,gCAAA;UAAA,wBAAA;EACA,iBAAA;CACA;AAEA;EACA,kBAAA;EACA,mBAAA;EACA,0BAAA;EACA,0BAAA;EACA,yBAAA;EAAA,gCAAA;UAAA,wBAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,mBAAA;EACA,wBAAA;CACA;AAEA;EACA,mBAAA;EACA,gBAAA;EACA,WAAA;EACA,kBAAA;EACA,mBAAA;EACA,0BAAA;EACA,0BAAA;CACA;AAEA;EACA,mBAAA;EACA,mBAAA;EACA,gBAAA;EACA,kBAAA;EACA,mCAAA;EACA,0BAAA;EACA;2BACA;EACA,0BAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,yBAAA;EAAA,gCAAA;UAAA,wBAAA;EACA,yBAAA;EACA,0BAAA;EACA,eAAA;CACA;AAEA;EACA,mBAAA;EACA,eAAA;CACA;AAEA;EACA;kBACA;CACA;AAEA;EACA,oBAAA;EAAA,gBAAA;UAAA,QAAA;EACA,+BAAA;EAAA,8BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,4BAAA;EACA,wBAAA;EACA,iBAAA;;EAEA;uBACA;CACA;AAEA;EACA,wBAAA;CACA;AAEA;EACA,yBAAA;CACA;AAEA;EACA,iBAAA;CACA;AAEA;EACA,kBAAA;CACA;;AAEA,WAAA;AACA;EACA,kBAAA;EACA,eAAA;EACA,kBAAA;EACA,yBAAA;CACA;;AAEA,cAAA;AACA;EACA,oBAAA;EAAA,gBAAA;UAAA,QAAA;EACA,uBAAA;EACA,iBAAA;EACA,yBAAA;EACA;wBACA;CACA;AAEA;EACA,uBAAA;EACA,wBAAA;EACA,yBAAA;EACA,yBAAA;EAAA,gCAAA;UAAA,wBAAA;CACA;AAEA;EACA,yBAAA;EAAA,gCAAA;UAAA,wBAAA;CACA;AAEA;EACA,+BAAA;EAAA,8BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,yBAAA;EACA,iBAAA;CACA;AAEA;EACA,cAAA;EACA,uBAAA;EACA,oBAAA;EAAA,gBAAA;UAAA,QAAA;EACA,+BAAA;EAAA,8BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,0BAAA;EAAA,iCAAA;UAAA,yBAAA;EACA;0BACA;EACA,iBAAA;CACA;AAEA;EACA,oBAAA;EAAA,gBAAA;UAAA,QAAA;CACA;AAEA;EACA,oBAAA;EAAA,gBAAA;UAAA,QAAA;EACA,+BAAA;EAAA,8BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,kCAAA;CACA;AAEA;EACA,kBAAA;EACA,mBAAA;EACA,0BAAA;EACA,sBAAA;CACA;AAEA;EACA,gCAAA;EACA,sBAAA;EACA,wBAAA;EACA,eAAA;EACA,SAAA;EACA,wBAAA;EACA,iBAAA;EChWA,iBAAA;EAAA,wBAAA;EAAA,sBAAA;CDiWA;;AAEA,SAAA;AAEA;EACA,kBAAA;EACA,gBAAA;EACA,yBAAA;EAAA,gCAAA;UAAA,wBAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,mBAAA;EACA,0BAAA;EACA,uBAAA;EACA,qBAAA;CACA;AAEA;EACA,+BAAA;EACA,mBAAA;EACA,eAAA;EACA,wBAAA;CACA;;AAEA,UAAA;AACA;EACA,cAAA;EACA,uBAAA;EACA;0BACA;EACA,2BAAA;EACA,uBAAA;CACA;AAEA;EACA,oBAAA;CACA;AAEA;EACA;wBACA;CACA;AAEA;EACA,gCAAA;EACA,eAAA;EACA,mBAAA;EACA,wBAAA;EACA,mBAAA;EACA,sBAAA;EACA,yBAAA;EACA,YAAA;EACA,SAAA;EACA,wBAAA;EACA,iBAAA;ECrZA,iBAAA;EAAA,wBAAA;EAAA,sBAAA;CDsZA;;AAEA,QAAA;AACA;EACA,mCAAA;EACA,wBAAA;CACA;AAEA;EACA,wBAAA;CACA;AAEA;EACA,gCAAA;EACA,eAAA;EACA,mBAAA;EACA,wBAAA;EACA,kBAAA;CACA;AAEA;EACA,+BAAA;EAAA,8BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,0BAAA;EACA,yBAAA;CACA;AAEA;EACA,iBAAA;EACA,gBAAA;CACA;AAEA;EACA,cAAA;EACA;;+BAEA;CACA;AAEA;EACA,gCAAA;EACA,eAAA;EACA,sBAAA;EACA,wBAAA;EACA,kBAAA;EACA,kBAAA;CACA;AAEA;EACA,sBAAA;EACA,wBAAA;CACA;AAEA;EACA;;uBAEA;CACA;;AAEA,WAAA;AACA;EACA,yBAAA;CACA;AAEA;EACA,kBAAA;EACA,mBAAA;CACA;AAEA;EACA,qBAAA;EAAA,sBAAA;EAAA,cAAA;EACA,+BAAA;EAAA,8BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,0BAAA;UAAA,kBAAA;EACA,yBAAA;EAAA,gCAAA;UAAA,wBAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,0BAAA;EACA,sBAAA;EACA,eAAA;CACA","file":"index.vue","sourcesContent":["<template>\n  <div :class=\"['wrapper', hasMargin && 'cell-margin']\" ref=\"dof-cell\" :style=\"cellStyleComp\">\n    <div :class=\"['cell-wrapper', disabled ? 'cell-disabled-opacity' : 'cell-abled-opacity']\">\n      <div\n        :class=\"['dof-cell', hackMrgb1pxcom && 'mgb-1', !disabled && isHighlight && 'dof-cell-highlight']\"\n        :style=\"borderStyleComp\"\n        :accessible=\"autoAccessible\"\n        :aria-label=\"`${label},${title},${desc}`\"\n        @click=\"onClick\"\n      >\n        <slot>\n          <!-- left -->\n          <div class=\"left img-wrapper\" v-if=\"avatarIcon || avatarIconFont\">\n            <div\n              v-if=\"avatarIcon\"\n              class=\"img-container circle-bg\"\n              :class=\"[badgeNum && 'Dotright32']\"\n              :style=\"avatarIconBgSizeComp\"\n            >\n              <slot name=\"leftImg\">\n                <image class=\"left-img\" :src=\"avatarIcon\" :style=\"avatarIconSizeComp\"></image>\n              </slot>\n            </div>\n            <div v-if=\"avatarIconFont\" class=\"circle-bg\">\n              <slot name=\"leftIconFont\">\n                <dof-iconfont\n                  :code=\"avatarIconFont\"\n                  :size=\"avatarIconFontSize\"\n                  :color=\"_isColmo ? 'rgba(255,255,255,0.80)' : '#333333'\"\n                ></dof-iconfont>\n              </slot>\n            </div>\n\n            <div class=\"dot-tip\" v-if=\"hasDot\" :class=\"[badgeNum && 'dotRight']\" :style=\"badgeStyle\"></div>\n            <div class=\"dot-num-tip\" v-else-if=\"badgeNum\" :style=\"badgeStyle\">\n              <text class=\"dot-num-tip-text\">{{ dotNum }}</text>\n            </div>\n          </div>\n\n          <!-- middle -->\n          <div\n            :class=\"['main-container', hasVerticalIndent && 'cell-indent', badgeNum && 'notDot']\"\n            :style=\"subBorderStyleComp\"\n          >\n            <slot name=\"label\">\n              <div v-if=\"label\">\n                <text class=\"cell-label-text\" :style=\"textColorComp\">{{ label }}</text>\n              </div>\n            </slot>\n            <div :class=\"['middle', desc ? 'has-desc' : 'no-desc']\" :style=\"innerCellHeightComp\">\n              <slot name=\"middle\">\n                <div class=\"cell-title-wrapper\">\n                  <div :class=\"['cell-title-content', !tag && 'title-flex-expand']\">\n                    <div :class=\"['cell-title']\">\n                      <text :class=\"['cell-title-text', !hasTextTip && 'title-flex-expand']\" :style=\"titleStyleComp\">{{\n                        title\n                      }}</text>\n                      <div class=\"text-dot-tip\" v-if=\"hasTextTip\"></div>\n                    </div>\n                  </div>\n\n                  <slot name=\"tag\">\n                    <div\n                      class=\"cell-title-tag\"\n                      v-if=\"tag\"\n                      :style=\"{\n                        backgroundColor: iconColor ? iconColor : '#f2f2f2'\n                      }\"\n                    >\n                      <text class=\"cell-title-tag-text\">{{ tag }}</text>\n                    </div>\n                  </slot>\n                </div>\n                <div :class=\"['cell-desc-wrapper', !tag && !_isColmo && 'margin-top-24']\" v-if=\"desc\">\n                  <slot name=\"desc\">\n                    <div class=\"cell-desc\">\n                      <text class=\"cell-desc-text\" :style=\"descStyleComp\">{{ desc }}</text>\n                    </div>\n                  </slot>\n                </div>\n              </slot>\n            </div>\n            <!-- right -->\n            <div :class=\"['right', rightTip && 'has-no-padding-left']\">\n              <slot name=\"rightText\">\n                <div class=\"right-text-wrapper\" v-if=\"rightText\">\n                  <text\n                    :class=\"[\n                      'right-text',\n                      !avatarIcon && 'single-line-text',\n                      avatarIcon && iconSize === 'big' && 'normal-right-text'\n                    ]\"\n                    :style=\"rightTextStyleComp\"\n                    >{{ rightText }}</text\n                  >\n                </div>\n              </slot>\n              <text class=\"extra-content-text\" :style=\"textColorComp\" v-if=\"extraContent\">{{ extraContent }}</text>\n              <!-- 开关 -->\n              <slot name=\"switch\"></slot>\n\n              <div class=\"arrow-wrapper\" v-if=\"hasArrow\">\n                <slot name=\"arrow\">\n                  <dof-iconfont\n                    style=\"width: 34px\"\n                    v-if=\"_isColmo\"\n                    :code=\"'\\u4713'\"\n                    :size=\"48\"\n                    :color=\"'rgba(255,255,255,0.80)'\"\n                  ></dof-iconfont>\n                  <image v-else :src=\"arrowIcon\" class=\"cell-arrow-icon\" :aria-hidden=\"true\"></image>\n                </slot>\n              </div>\n            </div>\n          </div>\n          <div\n            :class=\"[\n              'right-tip-wrapper',\n              hasTopSubBorder && 'cell-top-border',\n              hasSubBottomBorder && 'cell-bottom-border',\n              special && 'space-gap'\n            ]\"\n            v-if=\"rightTip\"\n          >\n            <slot name=\"rightTip\">\n              <text class=\"right-tip-text\" @click=\"dofRightTipClicked\">{{ rightTip }}</text>\n            </slot>\n          </div>\n        </slot>\n      </div>\n    </div>\n    <div v-if=\"useFakeBorder\" class=\"fake-border\" :style=\"fakeBorderStyleRender\"></div>\n  </div>\n</template>\n\n<style scoped>\n.wrapper {\n  /*hairong add for swipe*/\n  overflow: hidden;\n  position: relative;\n  /* end  by hairong*/\n  /* 解决安卓渲染间隔问题 */\n  /* margin-bottom: -1px; */\n  /* padding-bottom: -1px; */\n}\n\n.fake-border {\n  /* width: 750px; */\n  height: 1px;\n  position: absolute;\n  bottom: 1px;\n  left: 0;\n  /* background-color: #f2f2f2; */\n}\n\n.cell-margin {\n  margin-bottom: 16px;\n}\n\n.dof-cell-highlight:active {\n  background-color: #f5f5f5;\n}\n\n.dof-cell {\n  display: flex;\n  flex-direction: row;\n  flex: 1;\n  /* align-items: center; */\n}\n.cell-wrapper {\n  flex: 1;\n}\n\n.mgb-1 {\n  margin-bottom: 1px;\n}\n\n.cell-disabled-opacity {\n  opacity: 0.3;\n}\n\n.cell-abled-opacity {\n  opacity: 1;\n}\n\n/* left部分 */\n.left {\n  justify-content: center;\n  /* border-width: 1px; */\n}\n\n.img-wrapper {\n}\n\n.circle-bg {\n  margin-left: 32px;\n  /* width: 96px;\n  height: 96px; */\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n}\n\n.text-dot-tip {\n  width: 16px;\n  height: 16px;\n  border-radius: 10px;\n  background-color: #ff3b30;\n  justify-content: center;\n  align-items: center;\n  text-align: center;\n  margin-left: 22px;\n}\n\n.dot-tip {\n  position: absolute;\n  top: 34px;\n  right: 0px;\n  width: 16px;\n  height: 16px;\n  border-radius: 10px;\n  background-color: #ff3b30;\n}\n\n.dot-num-tip {\n  position: absolute;\n  font-size: 24px;\n  top: 34px;\n  right: 16px;\n  /* transform: translate(50%, 0); */\n  border-radius: 100px;\n  /* border-width: 1px;\n  border-color: #ffffff; */\n  background-color: #ff3b30;\n  align-items: center;\n  justify-content: center;\n  padding-left: 8px;\n  padding-right: 8px;\n  line-height: 1;\n}\n\n.dot-num-tip-text {\n  font-size: 24px;\n  color: #ffffff;\n}\n\n.left-img {\n  /* width: 64px;\n  height: 64px; */\n}\n\n.main-container {\n  flex: 1;\n  flex-direction: row;\n  align-items: center;\n  /* padding: 0 0px 0 32px; */\n  margin-left: 32px;\n  overflow: hidden;\n\n  /* border-width: 1px;\n  border-color: red; */\n}\n\n.Dotleft32 {\n  margin-left: 32px;\n}\n\n.Dotright32 {\n  margin-right: 32px;\n}\n\n.notDot {\n  margin-left: 0px;\n}\n\n.dotRight {\n  right: 32px;\n}\n\n/* label */\n.cell-label-text {\n  font-size: 30px;\n  color: #666666;\n  width: 188px;\n  margin-right: 10px;\n}\n\n/* middle部分 */\n.middle {\n  flex: 1;\n  min-height: 104px;\n  overflow: hidden;\n  /* margin-right: 32px; */\n  /* border-width: 1px;\n  border-color: blue; */\n}\n\n.has-desc {\n  min-height: 160px;\n  /* padding-top: 26px; */\n  /* margin-bottom: 2px; */\n  justify-content: center;\n}\n\n.no-desc {\n  justify-content: center;\n}\n\n.cell-title-wrapper {\n  flex-direction: row;\n  margin-right: 40px;\n  overflow: hidden;\n}\n\n.cell-title-content {\n  /* flex: 1; */\n  /* max-width: 400px; */\n  flex: 1;\n  flex-direction: row;\n  align-items: center;\n  justify-content: stretch;\n  /* border-width: 1px;\n  border-color: orange; */\n  overflow: hidden;\n}\n\n.title-flex-expand {\n  flex: 1;\n}\n\n.cell-title {\n  flex: 1;\n  flex-direction: row;\n  align-items: center;\n  /* justify-content: flex-start; */\n}\n\n.avatar-icon {\n  width: 40px;\n  height: 40px;\n  border-radius: 20px;\n  margin-right: 24px;\n}\n\n.cell-title-text {\n  font-family: PingFangSC-Regular;\n  font-size: 32px;\n  /* line-height: 32px; */\n  color: #000000;\n  lines: 1;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n\n/* tag */\n\n.cell-title-tag {\n  width: 88px;\n  height: 48px;\n  justify-content: center;\n  align-items: center;\n  text-align: center;\n  background-color: #f2f2f2;\n  border-radius: 24px;\n  margin-left: 18px;\n}\n\n.cell-title-tag-text {\n  font-family: PingFangSC-Medium;\n  font-size: 24px;\n  color: #666666;\n  /* line-height: 24px; */\n}\n\n/* desc */\n.cell-desc-wrapper {\n  /* flex: 1; */\n  margin-top: 16px;\n  /* border-width: 1px;\n  border-color: tomato; */\n  /* padding-bottom: 30px; */\n  /* min-height: 36px; */\n}\n\n.margin-top-24 {\n  margin-top: 18px;\n}\n\n.cell-desc {\n  /* border-width: 1px;\n  border-color: aqua; */\n}\n\n.cell-desc-text {\n  font-family: PingFangSC-Regular;\n  color: #8a8a8f;\n  font-size: 24px;\n  /* line-height: 36px; */\n  /* desc和title的间距 */\n  /* margin-top: 4px; */\n  /* margin-right: 30px; */\n  /* 文字超出设置 */\n  lines: 2;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n\n/* 右部 */\n.right-tip-wrapper {\n  padding: 40px 32px 0 0;\n  /* border-width: 1px; */\n}\n\n.space-gap {\n  margin-left: 92px;\n}\n\n.right-tip-text {\n  font-family: PingFangSC-Regular;\n  color: #8a8a8f;\n  font-size: 24px;\n  /* line-height: 24px; */\n  text-align: right;\n}\n\n.right {\n  flex-direction: row;\n  align-items: center;\n  padding-right: 32px;\n  padding-left: 32px;\n}\n\n.has-no-padding-left {\n  padding-right: 0;\n  padding-left: 0;\n}\n\n.right-text-wrapper {\n  /* 文字距离图标间隔 */\n  /* margin-left: 80px;\n  border-width: 1px;\n  border-color: greenyellow; */\n}\n\n.right-text {\n  font-family: PingFangSC-Regular;\n  color: #666666;\n  font-size: 28px;\n  /* line-height: 28px; */\n  letter-spacing: 0;\n  text-align: right;\n}\n\n.normal-right-text {\n  font-size: 32px;\n  /* line-height: 32px; */\n}\n\n.single-line-text {\n  /* color: #8a8a8f;\n  font-size: 24px;\n  line-height: 34px; */\n}\n\n/* arrow */\n.arrow-wrapper {\n  padding-left: 20px;\n}\n\n.cell-arrow-icon {\n  width: 22px;\n  height: 22px;\n}\n\n.midea-swipe-cell__right {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  justify-content: center;\n  align-items: center;\n  background-color: #ff3b30;\n  font-size: 32px;\n  color: #ffffff;\n}\n</style>\n<style scoped src=\"./colmo.css\"></style>\n\n<script>\nconst icon = require('../setting/icon.base64.js')\nconst modal = weex.requireModule('modal')\nconst dom = weex.requireModule('dom')\nimport DofIconfont from '../dof-iconfont'\nimport ColmoMixin from '../../mixins/colmo'\nexport default {\n  mixins: [ColmoMixin],\n  components: { DofIconfont },\n  props: {\n    special: {\n      type: Boolean,\n      default: false\n    },\n    label: {\n      type: String,\n      default: ''\n    },\n    isHighlight: {\n      type: Boolean,\n      default: true\n    },\n    title: {\n      type: String,\n      default: ''\n    },\n    tag: {\n      type: String,\n      default: ''\n    },\n    extraContent: {\n      type: String,\n      default: ''\n    },\n    desc: {\n      type: String,\n      default: ''\n    },\n    hasTextTip: {\n      type: Boolean,\n      default: false\n    },\n    badgeNum: {\n      type: [Number, String],\n      default: 0\n    },\n    badgeMax: {\n      type: Number,\n      default: 0\n    },\n    badgeTheme: {\n      type: String,\n      default: 'red'\n    },\n    badgeColor: {\n      type: String,\n      default: ''\n    },\n    hasDot: {\n      type: Boolean,\n      default: false\n    },\n    avatarIcon: {\n      type: String,\n      default: ''\n    },\n    // 使用字体图标\n    avatarIconFont: {\n      type: String,\n      default: ''\n    },\n    iconSize: {\n      type: String,\n      default: 'big'\n    },\n    iconSizeCustom: {\n      // { iconSize: 96, bgSize: 96 }\n      type: Object,\n      default: () => ({})\n    },\n    cellStyle: {\n      type: Object,\n      default: () => ({})\n    },\n    rightTextStyle: {\n      type: Object,\n      default: () => ({})\n    },\n    backgroundColor: {\n      type: String,\n      default: ''\n    },\n    textColor: {\n      type: String,\n      default: ''\n    },\n    iconColor: {\n      type: String,\n      default: ''\n    },\n    hasTopBorder: {\n      type: Boolean,\n      default: false\n    },\n    hasTopSubBorder: {\n      type: Boolean,\n      default: false\n    },\n    hasBottomBorder: {\n      type: Boolean,\n      default: false\n    },\n    hasSubTopBorder: {\n      type: Boolean,\n      default: false\n    },\n    hasSubBottomBorder: {\n      type: Boolean,\n      default: false\n    },\n    hasMargin: {\n      type: Boolean,\n      default: false\n    },\n    hasVerticalIndent: {\n      type: Boolean,\n      default: true\n    },\n    hasArrow: {\n      type: Boolean,\n      default: true\n    },\n    rightText: {\n      type: String,\n      default: ''\n    },\n    rightTip: {\n      type: String,\n      default: ''\n    },\n    disabled: {\n      type: Boolean,\n      default: false\n    },\n    autoAccessible: {\n      type: Boolean,\n      default: true\n    },\n    fakeBorderStyle: {\n      type: Object,\n      default: () => ({})\n    },\n    titleTextStyle: {\n      type: Object,\n      default: () => ({})\n    },\n    descTextStyle: {\n      type: Object,\n      default: () => ({})\n    }\n  },\n  data: () => ({\n    arrowIcon: icon.arrowIconNew,\n    offset: 0,\n    dragging: false,\n    badgeThemeList: {\n      brand: '#267aff',\n      red: '#ff3b30',\n      purple: '#995efc',\n      'blue-purple': '#6575ff',\n      blue: '#29c3ff',\n      cyan: '#00cbb8',\n      yellow: '#ffaa10',\n      orange: '#ff8225',\n      'orange-red': '#ff6a4c',\n      'gray-offline': '#7c879b'\n    }\n  }),\n\n  computed: {\n    _backgroundColor() {\n      if (this.backgroundColor) return this.backgroundColor\n      return this._isColmo ? '#1d1f22' : '#ffffff'\n    },\n    _borderColor() {\n      return this._isColmo ? '#343639' : '#f2f2f2'\n    },\n    useFakeBorder() {\n      return JSON.stringify(this.fakeBorderStyle) !== '{}'\n    },\n    // cell样式\n    cellStyleComp() {\n      const { cellStyle, _backgroundColor } = this\n      return {\n        backgroundColor: _backgroundColor,\n        ...cellStyle\n      }\n    },\n    dotNum() {\n      let { badgeNum, badgeMax } = this\n      let value = ''\n      let curContent = Number(badgeNum)\n      if (badgeMax && curContent >= badgeMax) {\n        value = `${badgeMax}+`\n      } else {\n        value = badgeNum\n      }\n      return value\n    },\n    //处理特殊类型cell高度问题\n    innerCellHeightComp() {\n      const { special, desc } = this\n      if (special && desc) {\n        return {\n          minHeight: '200px',\n          paddingTop: '32px'\n        }\n      }\n      return ''\n    },\n    // 文字样式颜色\n    textColorComp() {\n      const { textColor } = this\n      if (textColor) {\n        return {\n          color: textColor\n        }\n      } else {\n        return {}\n      }\n    },\n    titleStyleComp() {\n      const { textColor, titleTextStyle } = this\n      if (textColor) {\n        return {\n          color: textColor,\n          ...titleTextStyle\n        }\n      } else {\n        return {\n          ...titleTextStyle\n        }\n      }\n    },\n    descStyleComp() {\n      const { textColor, descTextStyle } = this\n      if (textColor) {\n        return {\n          color: textColor,\n          ...descTextStyle\n        }\n      } else {\n        return {\n          ...descTextStyle\n        }\n      }\n    },\n    avatarIconBgSizeComp() {\n      let { iconSize, iconColor } = this\n      let iconSizeCustom = this.iconSizeCustom.bgSize\n      if (iconSizeCustom) {\n        return {\n          width: iconSizeCustom + 'px',\n          height: iconSizeCustom + 'px',\n          borderRadius: iconSizeCustom / 2 + 'px',\n          backgroundColor: iconColor ? iconColor : 'transparent'\n        }\n      }\n      if (iconSize === 'max') {\n        return {\n          width: '112px',\n          height: '112px',\n          borderRadius: '56px',\n          backgroundColor: iconColor ? iconColor : 'transparent'\n        }\n      } else if (iconSize === 'medium') {\n        return {\n          width: '76px',\n          height: '76px',\n          borderRadius: '38px',\n          backgroundColor: iconColor ? iconColor : 'transparent'\n        }\n      } else if (iconSize === 'min') {\n        return {\n          width: '40px',\n          height: '40px',\n          borderRadius: '20px',\n          backgroundColor: iconColor ? iconColor : 'transparent'\n        }\n      } else {\n        return {\n          width: '64px',\n          height: '64px',\n          borderRadius: '32px',\n          backgroundColor: iconColor ? iconColor : 'transparent'\n        }\n      }\n    },\n    avatarIconSizeComp() {\n      let { iconSize } = this\n      let iconSizeCustom = this.iconSizeCustom.iconSize\n      if (iconSizeCustom) {\n        return {\n          width: iconSizeCustom + 'px',\n          height: iconSizeCustom + 'px',\n          borderRadius: iconSizeCustom / 2 + 'px'\n        }\n      }\n      if (iconSize === 'max') {\n        return {\n          width: '96px',\n          height: '96px'\n        }\n      } else if (iconSize === 'medium') {\n        return {\n          width: '64px',\n          height: '64px'\n        }\n      } else if (iconSize === 'min') {\n        return {\n          width: '24px',\n          height: '24px'\n        }\n      } else {\n        return {\n          width: '48px',\n          height: '48px'\n        }\n      }\n    },\n    avatarIconFontSize() {\n      let { iconSize } = this\n      if (iconSize === 'max') {\n        return 80\n      } else if (iconSize === 'medium') {\n        return 40\n      } else if (iconSize === 'min') {\n        return 24\n      } else {\n        return 64\n      }\n    },\n    rightTextStyleComp() {\n      const { textColor, rightTextStyle, avatarIcon, iconSize } = this\n      if (textColor) {\n        return {\n          color: textColor,\n          ...rightTextStyle\n        }\n      } else {\n        return {\n          ...rightTextStyle\n        }\n      }\n    },\n    hackMrgb1pxcom() {\n      let { hasSubBottomBorder, hasBottomBorder } = this\n      return hasSubBottomBorder || hasBottomBorder ? true : false\n    },\n    borderStyleComp() {\n      let {\n        cellStyle: { borderColor = null },\n        hasTopBorder,\n        hasBottomBorder\n      } = this\n      if (borderColor) {\n        if (hasTopBorder) {\n          return {\n            borderTopWidth: '1px',\n            borderTopColor: borderColor\n          }\n        } else if (hasBottomBorder) {\n          return {\n            borderBottomWidth: '1px',\n            borderBottomColor: borderColor\n          }\n        } else {\n          return {}\n        }\n      } else {\n        if (hasTopBorder) {\n          return {\n            borderTopWidth: '1px',\n            borderTopColor: this._borderColor\n          }\n        } else if (hasBottomBorder) {\n          return {\n            borderBottomWidth: '1px',\n            borderBottomColor: this._borderColor\n          }\n        } else {\n          return {}\n        }\n      }\n    },\n    subBorderStyleComp() {\n      let {\n        cellStyle: { borderColor = null },\n        hasSubTopBorder,\n        hasSubBottomBorder\n      } = this\n      if (borderColor) {\n        if (hasSubTopBorder) {\n          return {\n            borderTopWidth: '1px',\n            borderTopColor: borderColor\n          }\n        } else if (hasSubBottomBorder) {\n          return {\n            borderBottomWidth: '1px',\n            borderBottomColor: borderColor\n          }\n        } else {\n          return {}\n        }\n      } else {\n        if (hasSubTopBorder) {\n          return {\n            borderTopWidth: '1px',\n            borderTopColor: this._borderColor\n          }\n        } else if (hasSubBottomBorder) {\n          return {\n            borderBottomWidth: '1px',\n            borderBottomColor: this._borderColor\n          }\n        } else {\n          return {}\n        }\n      }\n    },\n    badgeStyle() {\n      let { badgeTheme, badgeThemeList, badgeColor } = this\n      return {\n        backgroundColor: badgeColor ? badgeColor : badgeThemeList[badgeTheme]\n      }\n    },\n    // 底部border样式\n    fakeBorderStyleRender() {\n      return {\n        backgroundColor: this._isColmo ? '#343639' : '#F2F2F2',\n        ...this.fakeBorderStyle\n      }\n    }\n  },\n  methods: {\n    onClick() {\n      const { disabled } = this\n      !disabled && this.$emit('dofCellClicked')\n    },\n    dofRightTipClicked() {\n      const { rightTip } = this\n      rightTip && this.$emit('dofRightTipClicked')\n    }\n  }\n}\n</script>\n",null],"sourceRoot":""}]);
+exports.push([module.i, "\n.wrapper[data-v-722c555d] {\n  /*hairong add for swipe*/\n  overflow: hidden;\n  position: relative;\n  /* end  by hairong*/\n  /* 解决安卓渲染间隔问题 */\n  /* margin-bottom: -1px; */\n  /* padding-bottom: -1px; */\n}\n.fake-border[data-v-722c555d] {\n  /* width: 750px; */\n  height: 1px;\n  position: absolute;\n  bottom: 1px;\n  left: 0;\n  /* background-color: #f2f2f2; */\n}\n.cell-margin[data-v-722c555d] {\n  margin-bottom: 0.21333rem;\n}\n.dof-cell-highlight[data-v-722c555d]:active {\n  background-color: #f5f5f5;\n}\n.dof-cell[data-v-722c555d] {\n  display: -webkit-box;\n  display: -webkit-flex;\n  display: flex;\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: row;\n          flex-direction: row;\n  -webkit-box-flex: 1;\n  -webkit-flex: 1;\n          flex: 1;\n  /* align-items: center; */\n}\n.cell-wrapper[data-v-722c555d] {\n  -webkit-box-flex: 1;\n  -webkit-flex: 1;\n          flex: 1;\n}\n.mgb-1[data-v-722c555d] {\n  margin-bottom: 1px;\n}\n.cell-disabled-opacity[data-v-722c555d] {\n  opacity: 0.3;\n}\n.cell-abled-opacity[data-v-722c555d] {\n  opacity: 1;\n}\n\n/* left部分 */\n.left[data-v-722c555d] {\n  -webkit-box-pack: center;\n  -webkit-justify-content: center;\n          justify-content: center;\n  /* border-width: 1px; */\n}\n.img-wrapper[data-v-722c555d] {\n}\n.circle-bg[data-v-722c555d] {\n  margin-left: 0.42667rem;\n  /* width: 96px;\n  height: 96px; */\n  display: -webkit-box;\n  display: -webkit-flex;\n  display: flex;\n  -webkit-box-align: center;\n  -webkit-align-items: center;\n          align-items: center;\n  -webkit-box-pack: center;\n  -webkit-justify-content: center;\n          justify-content: center;\n  overflow: hidden;\n}\n.text-dot-tip[data-v-722c555d] {\n  width: 0.21333rem;\n  height: 0.21333rem;\n  border-radius: 0.13333rem;\n  background-color: #ff3b30;\n  -webkit-box-pack: center;\n  -webkit-justify-content: center;\n          justify-content: center;\n  -webkit-box-align: center;\n  -webkit-align-items: center;\n          align-items: center;\n  text-align: center;\n  margin-left: 0.29333rem;\n}\n.dot-tip[data-v-722c555d] {\n  position: absolute;\n  top: 0.45333rem;\n  right: 0px;\n  width: 0.21333rem;\n  height: 0.21333rem;\n  border-radius: 0.13333rem;\n  background-color: #ff3b30;\n}\n.dot-num-tip[data-v-722c555d] {\n  position: absolute;\n  font-size: 0.32rem;\n  top: 0.45333rem;\n  right: 0.21333rem;\n  /* transform: translate(50%, 0); */\n  border-radius: 1.33333rem;\n  /* border-width: 1px;\n  border-color: #ffffff; */\n  background-color: #ff3b30;\n  -webkit-box-align: center;\n  -webkit-align-items: center;\n          align-items: center;\n  -webkit-box-pack: center;\n  -webkit-justify-content: center;\n          justify-content: center;\n  padding-left: 0.10667rem;\n  padding-right: 0.10667rem;\n  line-height: 1;\n}\n.dot-num-tip-text[data-v-722c555d] {\n  font-size: 0.32rem;\n  color: #ffffff;\n}\n.left-img[data-v-722c555d] {\n  /* width: 64px;\n  height: 64px; */\n}\n.main-container[data-v-722c555d] {\n  -webkit-box-flex: 1;\n  -webkit-flex: 1;\n          flex: 1;\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: row;\n          flex-direction: row;\n  -webkit-box-align: center;\n  -webkit-align-items: center;\n          align-items: center;\n  /* padding: 0 0px 0 32px; */\n  margin-left: 0.42667rem;\n  overflow: hidden;\n\n  /* border-width: 1px;\n  border-color: red; */\n}\n.Dotleft32[data-v-722c555d] {\n  margin-left: 0.42667rem;\n}\n.Dotright32[data-v-722c555d] {\n  margin-right: 0.42667rem;\n}\n.notDot[data-v-722c555d] {\n  margin-left: 0px;\n}\n.dotRight[data-v-722c555d] {\n  right: 0.42667rem;\n}\n\n/* label */\n.cell-label-text[data-v-722c555d] {\n  font-size: 0.4rem;\n  color: #666666;\n  width: 2.50667rem;\n  margin-right: 0.13333rem;\n}\n\n/* middle部分 */\n.middle[data-v-722c555d] {\n  -webkit-box-flex: 1;\n  -webkit-flex: 1;\n          flex: 1;\n  min-height: 1.38667rem;\n  overflow: hidden;\n  /* margin-right: 32px; */\n  /* border-width: 1px;\n  border-color: blue; */\n}\n.has-desc[data-v-722c555d] {\n  min-height: 2.13333rem;\n  /* padding-top: 26px; */\n  /* margin-bottom: 2px; */\n  -webkit-box-pack: center;\n  -webkit-justify-content: center;\n          justify-content: center;\n}\n.no-desc[data-v-722c555d] {\n  -webkit-box-pack: center;\n  -webkit-justify-content: center;\n          justify-content: center;\n}\n.cell-title-wrapper[data-v-722c555d] {\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: row;\n          flex-direction: row;\n  margin-right: 0.53333rem;\n  overflow: hidden;\n}\n.cell-title-content[data-v-722c555d] {\n  /* flex: 1; */\n  /* max-width: 400px; */\n  -webkit-box-flex: 1;\n  -webkit-flex: 1;\n          flex: 1;\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: row;\n          flex-direction: row;\n  -webkit-box-align: center;\n  -webkit-align-items: center;\n          align-items: center;\n  -webkit-box-pack: stretch;\n  -webkit-justify-content: stretch;\n          justify-content: stretch;\n  /* border-width: 1px;\n  border-color: orange; */\n  overflow: hidden;\n}\n.title-flex-expand[data-v-722c555d] {\n  -webkit-box-flex: 1;\n  -webkit-flex: 1;\n          flex: 1;\n}\n.cell-title[data-v-722c555d] {\n  -webkit-box-flex: 1;\n  -webkit-flex: 1;\n          flex: 1;\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: row;\n          flex-direction: row;\n  -webkit-box-align: center;\n  -webkit-align-items: center;\n          align-items: center;\n  /* justify-content: flex-start; */\n}\n.avatar-icon[data-v-722c555d] {\n  width: 0.53333rem;\n  height: 0.53333rem;\n  border-radius: 0.26667rem;\n  margin-right: 0.32rem;\n}\n.cell-title-text[data-v-722c555d] {\n  font-family: PingFangSC-Regular;\n  font-size: 0.42667rem;\n  /* line-height: 32px; */\n  color: #000000;\n  lines: 1;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  -webkit-line-clamp: 1;\n}\n\n/* tag */\n.cell-title-tag[data-v-722c555d] {\n  width: 1.17333rem;\n  height: 0.64rem;\n  -webkit-box-pack: center;\n  -webkit-justify-content: center;\n          justify-content: center;\n  -webkit-box-align: center;\n  -webkit-align-items: center;\n          align-items: center;\n  text-align: center;\n  background-color: #f2f2f2;\n  border-radius: 0.32rem;\n  margin-left: 0.24rem;\n}\n.cell-title-tag-text[data-v-722c555d] {\n  font-family: PingFangSC-Medium;\n  font-size: 0.32rem;\n  color: #666666;\n  /* line-height: 24px; */\n}\n\n/* desc */\n.cell-desc-wrapper[data-v-722c555d] {\n  /* flex: 1; */\n  margin-top: 0.21333rem;\n  /* border-width: 1px;\n  border-color: tomato; */\n  /* padding-bottom: 30px; */\n  /* min-height: 36px; */\n}\n.margin-top-24[data-v-722c555d] {\n  margin-top: 0.24rem;\n}\n.cell-desc[data-v-722c555d] {\n  /* border-width: 1px;\n  border-color: aqua; */\n}\n.cell-desc-text[data-v-722c555d] {\n  font-family: PingFangSC-Regular;\n  color: #8a8a8f;\n  font-size: 0.32rem;\n  /* line-height: 36px; */\n  /* desc和title的间距 */\n  /* margin-top: 4px; */\n  /* margin-right: 30px; */\n  /* 文字超出设置 */\n  lines: 2;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  -webkit-line-clamp: 2;\n}\n\n/* 右部 */\n.right-tip-wrapper[data-v-722c555d] {\n  padding: 0.53333rem 0.42667rem 0 0;\n  /* border-width: 1px; */\n}\n.space-gap[data-v-722c555d] {\n  margin-left: 1.22667rem;\n}\n.right-tip-text[data-v-722c555d] {\n  font-family: PingFangSC-Regular;\n  color: #8a8a8f;\n  font-size: 0.32rem;\n  /* line-height: 24px; */\n  text-align: right;\n}\n.right[data-v-722c555d] {\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: row;\n          flex-direction: row;\n  -webkit-box-align: center;\n  -webkit-align-items: center;\n          align-items: center;\n  padding-right: 0.42667rem;\n  padding-left: 0.42667rem;\n}\n.has-no-padding-left[data-v-722c555d] {\n  padding-right: 0;\n  padding-left: 0;\n}\n.right-text-wrapper[data-v-722c555d] {\n  /* 文字距离图标间隔 */\n  /* margin-left: 80px;\n  border-width: 1px;\n  border-color: greenyellow; */\n}\n.right-text[data-v-722c555d] {\n  font-family: PingFangSC-Regular;\n  color: #666666;\n  font-size: 0.37333rem;\n  /* line-height: 28px; */\n  letter-spacing: 0;\n  text-align: right;\n}\n.normal-right-text[data-v-722c555d] {\n  font-size: 0.42667rem;\n  /* line-height: 32px; */\n}\n.single-line-text[data-v-722c555d] {\n  /* color: #8a8a8f;\n  font-size: 24px;\n  line-height: 34px; */\n}\n\n/* arrow */\n.arrow-wrapper[data-v-722c555d] {\n  padding-left: 0.26667rem;\n}\n.cell-arrow-icon[data-v-722c555d] {\n  width: 0.29333rem;\n  height: 0.29333rem;\n}\n.midea-swipe-cell__right[data-v-722c555d] {\n  display: -webkit-box;\n  display: -webkit-flex;\n  display: flex;\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: row;\n          flex-direction: row;\n  -webkit-flex-wrap: nowrap;\n          flex-wrap: nowrap;\n  -webkit-box-pack: center;\n  -webkit-justify-content: center;\n          justify-content: center;\n  -webkit-box-align: center;\n  -webkit-align-items: center;\n          align-items: center;\n  background-color: #ff3b30;\n  font-size: 0.42667rem;\n  color: #ffffff;\n}\n", "", {"version":3,"sources":["/Users/wuhm45/Documents/code/weex组件库/dolphin-weex-ui/packages/dof-cell/index.vue?aa421c5c","/Users/wuhm45/Documents/code/weex组件库/dolphin-weex-ui/packages/dof-cell/<no source>"],"names":[],"mappings":";AAwIA;EACA,yBAAA;EACA,iBAAA;EACA,mBAAA;EACA,oBAAA;EACA,gBAAA;EACA,0BAAA;EACA,2BAAA;CACA;AAEA;EACA,mBAAA;EACA,YAAA;EACA,mBAAA;EACA,YAAA;EACA,QAAA;EACA,gCAAA;CACA;AAEA;EACA,0BAAA;CACA;AAEA;EACA,0BAAA;CACA;AAEA;EACA,qBAAA;EAAA,sBAAA;EAAA,cAAA;EACA,+BAAA;EAAA,8BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,oBAAA;EAAA,gBAAA;UAAA,QAAA;EACA,0BAAA;CACA;AACA;EACA,oBAAA;EAAA,gBAAA;UAAA,QAAA;CACA;AAEA;EACA,mBAAA;CACA;AAEA;EACA,aAAA;CACA;AAEA;EACA,WAAA;CACA;;AAEA,YAAA;AACA;EACA,yBAAA;EAAA,gCAAA;UAAA,wBAAA;EACA,wBAAA;CACA;AAEA;CACA;AAEA;EACA,wBAAA;EACA;kBACA;EACA,qBAAA;EAAA,sBAAA;EAAA,cAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,yBAAA;EAAA,gCAAA;UAAA,wBAAA;EACA,iBAAA;CACA;AAEA;EACA,kBAAA;EACA,mBAAA;EACA,0BAAA;EACA,0BAAA;EACA,yBAAA;EAAA,gCAAA;UAAA,wBAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,mBAAA;EACA,wBAAA;CACA;AAEA;EACA,mBAAA;EACA,gBAAA;EACA,WAAA;EACA,kBAAA;EACA,mBAAA;EACA,0BAAA;EACA,0BAAA;CACA;AAEA;EACA,mBAAA;EACA,mBAAA;EACA,gBAAA;EACA,kBAAA;EACA,mCAAA;EACA,0BAAA;EACA;2BACA;EACA,0BAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,yBAAA;EAAA,gCAAA;UAAA,wBAAA;EACA,yBAAA;EACA,0BAAA;EACA,eAAA;CACA;AAEA;EACA,mBAAA;EACA,eAAA;CACA;AAEA;EACA;kBACA;CACA;AAEA;EACA,oBAAA;EAAA,gBAAA;UAAA,QAAA;EACA,+BAAA;EAAA,8BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,4BAAA;EACA,wBAAA;EACA,iBAAA;;EAEA;uBACA;CACA;AAEA;EACA,wBAAA;CACA;AAEA;EACA,yBAAA;CACA;AAEA;EACA,iBAAA;CACA;AAEA;EACA,kBAAA;CACA;;AAEA,WAAA;AACA;EACA,kBAAA;EACA,eAAA;EACA,kBAAA;EACA,yBAAA;CACA;;AAEA,cAAA;AACA;EACA,oBAAA;EAAA,gBAAA;UAAA,QAAA;EACA,uBAAA;EACA,iBAAA;EACA,yBAAA;EACA;wBACA;CACA;AAEA;EACA,uBAAA;EACA,wBAAA;EACA,yBAAA;EACA,yBAAA;EAAA,gCAAA;UAAA,wBAAA;CACA;AAEA;EACA,yBAAA;EAAA,gCAAA;UAAA,wBAAA;CACA;AAEA;EACA,+BAAA;EAAA,8BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,yBAAA;EACA,iBAAA;CACA;AAEA;EACA,cAAA;EACA,uBAAA;EACA,oBAAA;EAAA,gBAAA;UAAA,QAAA;EACA,+BAAA;EAAA,8BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,0BAAA;EAAA,iCAAA;UAAA,yBAAA;EACA;0BACA;EACA,iBAAA;CACA;AAEA;EACA,oBAAA;EAAA,gBAAA;UAAA,QAAA;CACA;AAEA;EACA,oBAAA;EAAA,gBAAA;UAAA,QAAA;EACA,+BAAA;EAAA,8BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,kCAAA;CACA;AAEA;EACA,kBAAA;EACA,mBAAA;EACA,0BAAA;EACA,sBAAA;CACA;AAEA;EACA,gCAAA;EACA,sBAAA;EACA,wBAAA;EACA,eAAA;EACA,SAAA;EACA,wBAAA;EACA,iBAAA;EChWA,iBAAA;EAAA,wBAAA;EAAA,sBAAA;CDiWA;;AAEA,SAAA;AAEA;EACA,kBAAA;EACA,gBAAA;EACA,yBAAA;EAAA,gCAAA;UAAA,wBAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,mBAAA;EACA,0BAAA;EACA,uBAAA;EACA,qBAAA;CACA;AAEA;EACA,+BAAA;EACA,mBAAA;EACA,eAAA;EACA,wBAAA;CACA;;AAEA,UAAA;AACA;EACA,cAAA;EACA,uBAAA;EACA;0BACA;EACA,2BAAA;EACA,uBAAA;CACA;AAEA;EACA,oBAAA;CACA;AAEA;EACA;wBACA;CACA;AAEA;EACA,gCAAA;EACA,eAAA;EACA,mBAAA;EACA,wBAAA;EACA,mBAAA;EACA,sBAAA;EACA,yBAAA;EACA,YAAA;EACA,SAAA;EACA,wBAAA;EACA,iBAAA;ECrZA,iBAAA;EAAA,wBAAA;EAAA,sBAAA;CDsZA;;AAEA,QAAA;AACA;EACA,mCAAA;EACA,wBAAA;CACA;AAEA;EACA,wBAAA;CACA;AAEA;EACA,gCAAA;EACA,eAAA;EACA,mBAAA;EACA,wBAAA;EACA,kBAAA;CACA;AAEA;EACA,+BAAA;EAAA,8BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,0BAAA;EACA,yBAAA;CACA;AAEA;EACA,iBAAA;EACA,gBAAA;CACA;AAEA;EACA,cAAA;EACA;;+BAEA;CACA;AAEA;EACA,gCAAA;EACA,eAAA;EACA,sBAAA;EACA,wBAAA;EACA,kBAAA;EACA,kBAAA;CACA;AAEA;EACA,sBAAA;EACA,wBAAA;CACA;AAEA;EACA;;uBAEA;CACA;;AAEA,WAAA;AACA;EACA,yBAAA;CACA;AAEA;EACA,kBAAA;EACA,mBAAA;CACA;AAEA;EACA,qBAAA;EAAA,sBAAA;EAAA,cAAA;EACA,+BAAA;EAAA,8BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,0BAAA;UAAA,kBAAA;EACA,yBAAA;EAAA,gCAAA;UAAA,wBAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,0BAAA;EACA,sBAAA;EACA,eAAA;CACA","file":"index.vue","sourcesContent":["<template>\n  <div :class=\"['wrapper', hasMargin && 'cell-margin']\" ref=\"dof-cell\" :style=\"cellStyleComp\">\n    <div :class=\"['cell-wrapper', disabled ? 'cell-disabled-opacity' : 'cell-abled-opacity']\">\n      <div\n        :class=\"['dof-cell', hackMrgb1pxcom && 'mgb-1', !disabled && isHighlight && 'dof-cell-highlight']\"\n        :style=\"borderStyleComp\"\n        :accessible=\"autoAccessible\"\n        :aria-label=\"`${label},${title},${desc}`\"\n        @click=\"onClick\"\n      >\n        <slot>\n          <!-- left -->\n          <div class=\"left img-wrapper\" v-if=\"avatarIcon || avatarIconFont\">\n            <div\n              v-if=\"avatarIcon\"\n              class=\"img-container circle-bg\"\n              :class=\"[badgeNum && 'Dotright32']\"\n              :style=\"avatarIconBgSizeComp\"\n            >\n              <slot name=\"leftImg\">\n                <image class=\"left-img\" :src=\"avatarIcon\" :style=\"avatarIconSizeComp\"></image>\n              </slot>\n            </div>\n            <div v-if=\"avatarIconFont\" class=\"circle-bg\">\n              <slot name=\"leftIconFont\">\n                <dof-iconfont\n                  :code=\"avatarIconFont\"\n                  :size=\"avatarIconFontSize\"\n                  :color=\"_isColmo ? 'rgba(255,255,255,0.80)' : '#333333'\"\n                ></dof-iconfont>\n              </slot>\n            </div>\n\n            <div class=\"dot-tip\" v-if=\"hasDot\" :class=\"[badgeNum && 'dotRight']\" :style=\"badgeStyle\"></div>\n            <div class=\"dot-num-tip\" v-else-if=\"badgeNum\" :style=\"badgeStyle\">\n              <text class=\"dot-num-tip-text\">{{ dotNum }}</text>\n            </div>\n          </div>\n\n          <!-- middle -->\n          <div\n            :class=\"['main-container', hasVerticalIndent && 'cell-indent', badgeNum && 'notDot']\"\n            :style=\"subBorderStyleComp\"\n          >\n            <slot name=\"label\">\n              <div v-if=\"label\">\n                <text class=\"cell-label-text\" :style=\"textColorComp\">{{ label }}</text>\n              </div>\n            </slot>\n            <div :class=\"['middle', desc ? 'has-desc' : 'no-desc']\" :style=\"innerCellHeightComp\">\n              <slot name=\"middle\">\n                <div class=\"cell-title-wrapper\">\n                  <div :class=\"['cell-title-content', !tag && 'title-flex-expand']\">\n                    <div :class=\"['cell-title']\">\n                      <text :class=\"['cell-title-text', !hasTextTip && 'title-flex-expand']\" :style=\"titleStyleComp\">{{\n                        title\n                      }}</text>\n                      <div class=\"text-dot-tip\" v-if=\"hasTextTip\"></div>\n                    </div>\n                  </div>\n\n                  <slot name=\"tag\">\n                    <div\n                      class=\"cell-title-tag\"\n                      v-if=\"tag\"\n                      :style=\"{\n                        backgroundColor: iconColor ? iconColor : '#f2f2f2'\n                      }\"\n                    >\n                      <text class=\"cell-title-tag-text\">{{ tag }}</text>\n                    </div>\n                  </slot>\n                </div>\n                <div :class=\"['cell-desc-wrapper', !tag && !_isColmo && 'margin-top-24']\" v-if=\"desc\">\n                  <slot name=\"desc\">\n                    <div class=\"cell-desc\">\n                      <text class=\"cell-desc-text\" :style=\"descStyleComp\">{{ desc }}</text>\n                    </div>\n                  </slot>\n                </div>\n              </slot>\n            </div>\n            <!-- right -->\n            <div :class=\"['right', rightTip && 'has-no-padding-left']\">\n              <slot name=\"rightText\">\n                <div class=\"right-text-wrapper\" v-if=\"rightText\">\n                  <text\n                    :class=\"[\n                      'right-text',\n                      !avatarIcon && 'single-line-text',\n                      avatarIcon && iconSize === 'big' && 'normal-right-text'\n                    ]\"\n                    :style=\"rightTextStyleComp\"\n                    >{{ rightText }}</text\n                  >\n                </div>\n              </slot>\n              <text class=\"extra-content-text\" :style=\"textColorComp\" v-if=\"extraContent\">{{ extraContent }}</text>\n              <!-- 开关 -->\n              <slot name=\"switch\"></slot>\n\n              <div class=\"arrow-wrapper\" v-if=\"hasArrow\">\n                <slot name=\"arrow\">\n                  <dof-iconfont\n                    style=\"width: 34px\"\n                    v-if=\"_isColmo\"\n                    :code=\"'\\u4713'\"\n                    :size=\"48\"\n                    :color=\"'rgba(255,255,255,0.80)'\"\n                  ></dof-iconfont>\n                  <image v-else :src=\"arrowIcon\" class=\"cell-arrow-icon\" :aria-hidden=\"true\"></image>\n                </slot>\n              </div>\n            </div>\n          </div>\n          <div\n            :class=\"[\n              'right-tip-wrapper',\n              hasTopSubBorder && 'cell-top-border',\n              hasSubBottomBorder && 'cell-bottom-border',\n              special && 'space-gap'\n            ]\"\n            v-if=\"rightTip\"\n          >\n            <slot name=\"rightTip\">\n              <text class=\"right-tip-text\" @click=\"dofRightTipClicked\">{{ rightTip }}</text>\n            </slot>\n          </div>\n        </slot>\n      </div>\n    </div>\n    <div v-if=\"useFakeBorder\" class=\"fake-border\" :style=\"fakeBorderStyleRender\"></div>\n  </div>\n</template>\n\n<style scoped>\n.wrapper {\n  /*hairong add for swipe*/\n  overflow: hidden;\n  position: relative;\n  /* end  by hairong*/\n  /* 解决安卓渲染间隔问题 */\n  /* margin-bottom: -1px; */\n  /* padding-bottom: -1px; */\n}\n\n.fake-border {\n  /* width: 750px; */\n  height: 1px;\n  position: absolute;\n  bottom: 1px;\n  left: 0;\n  /* background-color: #f2f2f2; */\n}\n\n.cell-margin {\n  margin-bottom: 16px;\n}\n\n.dof-cell-highlight:active {\n  background-color: #f5f5f5;\n}\n\n.dof-cell {\n  display: flex;\n  flex-direction: row;\n  flex: 1;\n  /* align-items: center; */\n}\n.cell-wrapper {\n  flex: 1;\n}\n\n.mgb-1 {\n  margin-bottom: 1px;\n}\n\n.cell-disabled-opacity {\n  opacity: 0.3;\n}\n\n.cell-abled-opacity {\n  opacity: 1;\n}\n\n/* left部分 */\n.left {\n  justify-content: center;\n  /* border-width: 1px; */\n}\n\n.img-wrapper {\n}\n\n.circle-bg {\n  margin-left: 32px;\n  /* width: 96px;\n  height: 96px; */\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n}\n\n.text-dot-tip {\n  width: 16px;\n  height: 16px;\n  border-radius: 10px;\n  background-color: #ff3b30;\n  justify-content: center;\n  align-items: center;\n  text-align: center;\n  margin-left: 22px;\n}\n\n.dot-tip {\n  position: absolute;\n  top: 34px;\n  right: 0px;\n  width: 16px;\n  height: 16px;\n  border-radius: 10px;\n  background-color: #ff3b30;\n}\n\n.dot-num-tip {\n  position: absolute;\n  font-size: 24px;\n  top: 34px;\n  right: 16px;\n  /* transform: translate(50%, 0); */\n  border-radius: 100px;\n  /* border-width: 1px;\n  border-color: #ffffff; */\n  background-color: #ff3b30;\n  align-items: center;\n  justify-content: center;\n  padding-left: 8px;\n  padding-right: 8px;\n  line-height: 1;\n}\n\n.dot-num-tip-text {\n  font-size: 24px;\n  color: #ffffff;\n}\n\n.left-img {\n  /* width: 64px;\n  height: 64px; */\n}\n\n.main-container {\n  flex: 1;\n  flex-direction: row;\n  align-items: center;\n  /* padding: 0 0px 0 32px; */\n  margin-left: 32px;\n  overflow: hidden;\n\n  /* border-width: 1px;\n  border-color: red; */\n}\n\n.Dotleft32 {\n  margin-left: 32px;\n}\n\n.Dotright32 {\n  margin-right: 32px;\n}\n\n.notDot {\n  margin-left: 0px;\n}\n\n.dotRight {\n  right: 32px;\n}\n\n/* label */\n.cell-label-text {\n  font-size: 30px;\n  color: #666666;\n  width: 188px;\n  margin-right: 10px;\n}\n\n/* middle部分 */\n.middle {\n  flex: 1;\n  min-height: 104px;\n  overflow: hidden;\n  /* margin-right: 32px; */\n  /* border-width: 1px;\n  border-color: blue; */\n}\n\n.has-desc {\n  min-height: 160px;\n  /* padding-top: 26px; */\n  /* margin-bottom: 2px; */\n  justify-content: center;\n}\n\n.no-desc {\n  justify-content: center;\n}\n\n.cell-title-wrapper {\n  flex-direction: row;\n  margin-right: 40px;\n  overflow: hidden;\n}\n\n.cell-title-content {\n  /* flex: 1; */\n  /* max-width: 400px; */\n  flex: 1;\n  flex-direction: row;\n  align-items: center;\n  justify-content: stretch;\n  /* border-width: 1px;\n  border-color: orange; */\n  overflow: hidden;\n}\n\n.title-flex-expand {\n  flex: 1;\n}\n\n.cell-title {\n  flex: 1;\n  flex-direction: row;\n  align-items: center;\n  /* justify-content: flex-start; */\n}\n\n.avatar-icon {\n  width: 40px;\n  height: 40px;\n  border-radius: 20px;\n  margin-right: 24px;\n}\n\n.cell-title-text {\n  font-family: PingFangSC-Regular;\n  font-size: 32px;\n  /* line-height: 32px; */\n  color: #000000;\n  lines: 1;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n\n/* tag */\n\n.cell-title-tag {\n  width: 88px;\n  height: 48px;\n  justify-content: center;\n  align-items: center;\n  text-align: center;\n  background-color: #f2f2f2;\n  border-radius: 24px;\n  margin-left: 18px;\n}\n\n.cell-title-tag-text {\n  font-family: PingFangSC-Medium;\n  font-size: 24px;\n  color: #666666;\n  /* line-height: 24px; */\n}\n\n/* desc */\n.cell-desc-wrapper {\n  /* flex: 1; */\n  margin-top: 16px;\n  /* border-width: 1px;\n  border-color: tomato; */\n  /* padding-bottom: 30px; */\n  /* min-height: 36px; */\n}\n\n.margin-top-24 {\n  margin-top: 18px;\n}\n\n.cell-desc {\n  /* border-width: 1px;\n  border-color: aqua; */\n}\n\n.cell-desc-text {\n  font-family: PingFangSC-Regular;\n  color: #8a8a8f;\n  font-size: 24px;\n  /* line-height: 36px; */\n  /* desc和title的间距 */\n  /* margin-top: 4px; */\n  /* margin-right: 30px; */\n  /* 文字超出设置 */\n  lines: 2;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n\n/* 右部 */\n.right-tip-wrapper {\n  padding: 40px 32px 0 0;\n  /* border-width: 1px; */\n}\n\n.space-gap {\n  margin-left: 92px;\n}\n\n.right-tip-text {\n  font-family: PingFangSC-Regular;\n  color: #8a8a8f;\n  font-size: 24px;\n  /* line-height: 24px; */\n  text-align: right;\n}\n\n.right {\n  flex-direction: row;\n  align-items: center;\n  padding-right: 32px;\n  padding-left: 32px;\n}\n\n.has-no-padding-left {\n  padding-right: 0;\n  padding-left: 0;\n}\n\n.right-text-wrapper {\n  /* 文字距离图标间隔 */\n  /* margin-left: 80px;\n  border-width: 1px;\n  border-color: greenyellow; */\n}\n\n.right-text {\n  font-family: PingFangSC-Regular;\n  color: #666666;\n  font-size: 28px;\n  /* line-height: 28px; */\n  letter-spacing: 0;\n  text-align: right;\n}\n\n.normal-right-text {\n  font-size: 32px;\n  /* line-height: 32px; */\n}\n\n.single-line-text {\n  /* color: #8a8a8f;\n  font-size: 24px;\n  line-height: 34px; */\n}\n\n/* arrow */\n.arrow-wrapper {\n  padding-left: 20px;\n}\n\n.cell-arrow-icon {\n  width: 22px;\n  height: 22px;\n}\n\n.midea-swipe-cell__right {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  justify-content: center;\n  align-items: center;\n  background-color: #ff3b30;\n  font-size: 32px;\n  color: #ffffff;\n}\n</style>\n<style scoped src=\"./colmo.css\"></style>\n\n<script>\nconst icon = require('../setting/icon.base64.js')\nconst modal = weex.requireModule('modal')\nconst dom = weex.requireModule('dom')\nimport DofIconfont from '../dof-iconfont'\nimport ColmoMixin from '../../mixins/colmo'\nexport default {\n  mixins: [ColmoMixin],\n  components: { DofIconfont },\n  props: {\n    special: {\n      type: Boolean,\n      default: false\n    },\n    label: {\n      type: String,\n      default: ''\n    },\n    isHighlight: {\n      type: Boolean,\n      default: true\n    },\n    title: {\n      type: String,\n      default: ''\n    },\n    tag: {\n      type: String,\n      default: ''\n    },\n    extraContent: {\n      type: String,\n      default: ''\n    },\n    desc: {\n      type: String,\n      default: ''\n    },\n    hasTextTip: {\n      type: Boolean,\n      default: false\n    },\n    badgeNum: {\n      type: [Number, String],\n      default: 0\n    },\n    badgeMax: {\n      type: Number,\n      default: 0\n    },\n    badgeTheme: {\n      type: String,\n      default: 'red'\n    },\n    badgeColor: {\n      type: String,\n      default: ''\n    },\n    hasDot: {\n      type: Boolean,\n      default: false\n    },\n    avatarIcon: {\n      type: String,\n      default: ''\n    },\n    // 使用字体图标\n    avatarIconFont: {\n      type: String,\n      default: ''\n    },\n    iconSize: {\n      type: String,\n      default: 'big'\n    },\n    iconSizeCustom: {\n      // { iconSize: 96, bgSize: 96 }\n      type: Object,\n      default: () => ({})\n    },\n    cellStyle: {\n      type: Object,\n      default: () => ({})\n    },\n    rightTextStyle: {\n      type: Object,\n      default: () => ({})\n    },\n    backgroundColor: {\n      type: String,\n      default: ''\n    },\n    textColor: {\n      type: String,\n      default: ''\n    },\n    iconColor: {\n      type: String,\n      default: ''\n    },\n    hasTopBorder: {\n      type: Boolean,\n      default: false\n    },\n    hasTopSubBorder: {\n      type: Boolean,\n      default: false\n    },\n    hasBottomBorder: {\n      type: Boolean,\n      default: false\n    },\n    hasSubTopBorder: {\n      type: Boolean,\n      default: false\n    },\n    hasSubBottomBorder: {\n      type: Boolean,\n      default: false\n    },\n    hasMargin: {\n      type: Boolean,\n      default: false\n    },\n    hasVerticalIndent: {\n      type: Boolean,\n      default: true\n    },\n    hasArrow: {\n      type: Boolean,\n      default: true\n    },\n    rightText: {\n      type: String,\n      default: ''\n    },\n    rightTip: {\n      type: String,\n      default: ''\n    },\n    disabled: {\n      type: Boolean,\n      default: false\n    },\n    autoAccessible: {\n      type: Boolean,\n      default: true\n    },\n    fakeBorderStyle: {\n      type: Object,\n      default: () => ({})\n    },\n    titleTextStyle: {\n      type: Object,\n      default: () => ({})\n    },\n    descTextStyle: {\n      type: Object,\n      default: () => ({})\n    }\n  },\n  data: () => ({\n    arrowIcon: icon.arrowIconNew,\n    offset: 0,\n    dragging: false,\n    badgeThemeList: {\n      brand: '#267aff',\n      red: '#ff3b30',\n      purple: '#995efc',\n      'blue-purple': '#6575ff',\n      blue: '#29c3ff',\n      cyan: '#00cbb8',\n      yellow: '#ffaa10',\n      orange: '#ff8225',\n      'orange-red': '#ff6a4c',\n      'gray-offline': '#7c879b'\n    }\n  }),\n\n  computed: {\n    _backgroundColor() {\n      if (this.backgroundColor) return this.backgroundColor\n      return this._isColmo ? '#1d1f22' : '#ffffff'\n    },\n    _borderColor() {\n      return this._isColmo ? '#343639' : '#f2f2f2'\n    },\n    useFakeBorder() {\n      return JSON.stringify(this.fakeBorderStyle) !== '{}'\n    },\n    // cell样式\n    cellStyleComp() {\n      const { cellStyle, _backgroundColor } = this\n      return {\n        backgroundColor: _backgroundColor,\n        ...cellStyle\n      }\n    },\n    dotNum() {\n      let { badgeNum, badgeMax } = this\n      let value = ''\n      let curContent = Number(badgeNum)\n      if (badgeMax && curContent >= badgeMax) {\n        value = `${badgeMax}+`\n      } else {\n        value = badgeNum\n      }\n      return value\n    },\n    //处理特殊类型cell高度问题\n    innerCellHeightComp() {\n      const { special, desc } = this\n      if (special && desc) {\n        return {\n          minHeight: '200px',\n          paddingTop: '32px'\n        }\n      }\n      return ''\n    },\n    // 文字样式颜色\n    textColorComp() {\n      const { textColor } = this\n      if (textColor) {\n        return {\n          color: textColor\n        }\n      } else {\n        return {}\n      }\n    },\n    titleStyleComp() {\n      const { textColor, titleTextStyle } = this\n      if (textColor) {\n        return {\n          color: textColor,\n          ...titleTextStyle\n        }\n      } else {\n        return {\n          ...titleTextStyle\n        }\n      }\n    },\n    descStyleComp() {\n      const { textColor, descTextStyle } = this\n      if (textColor) {\n        return {\n          color: textColor,\n          ...descTextStyle\n        }\n      } else {\n        return {\n          ...descTextStyle\n        }\n      }\n    },\n    avatarIconBgSizeComp() {\n      let { iconSize, iconColor } = this\n      let iconSizeCustom = this.iconSizeCustom.bgSize\n      if (iconSizeCustom) {\n        return {\n          width: iconSizeCustom + 'px',\n          height: iconSizeCustom + 'px',\n          borderRadius: iconSizeCustom / 2 + 'px',\n          backgroundColor: iconColor ? iconColor : 'transparent'\n        }\n      }\n      if (iconSize === 'max') {\n        return {\n          width: '112px',\n          height: '112px',\n          borderRadius: '56px',\n          marginTop: this._isColmo ? '0px' : '16px',\n          marginBottom: this._isColmo ? '0px' : '16px',\n          backgroundColor: iconColor ? iconColor : 'transparent'\n        }\n      } else if (iconSize === 'medium') {\n        return {\n          width: '76px',\n          height: '76px',\n          borderRadius: '38px',\n          marginTop: this._isColmo ? '0px' : '40px',\n          marginBottom: this._isColmo ? '0px' : '40px',\n          backgroundColor: iconColor ? iconColor : 'transparent'\n        }\n      } else if (iconSize === 'min') {\n        return {\n          width: '40px',\n          height: '40px',\n          borderRadius: '20px',\n          marginTop: this._isColmo ? '0px' : '32px',\n          marginBottom: this._isColmo ? '0px' : '32px',\n          backgroundColor: iconColor ? iconColor : 'transparent'\n        }\n      } else {\n        return {\n          width: '64px',\n          height: '64px',\n          borderRadius: '32px',\n          marginTop: this._isColmo ? '0px' : '48px',\n          marginBottom: this._isColmo ? '0px' : '48px',\n          backgroundColor: iconColor ? iconColor : 'transparent'\n        }\n      }\n    },\n    avatarIconSizeComp() {\n      let { iconSize } = this\n      let iconSizeCustom = this.iconSizeCustom.iconSize\n      if (iconSizeCustom) {\n        return {\n          width: iconSizeCustom + 'px',\n          height: iconSizeCustom + 'px',\n          borderRadius: iconSizeCustom / 2 + 'px'\n        }\n      }\n      if (iconSize === 'max') {\n        return {\n          width: '96px',\n          height: '96px'\n        }\n      } else if (iconSize === 'medium') {\n        return {\n          width: '64px',\n          height: '64px'\n        }\n      } else if (iconSize === 'min') {\n        return {\n          width: '24px',\n          height: '24px'\n        }\n      } else {\n        return {\n          width: '48px',\n          height: '48px'\n        }\n      }\n    },\n    avatarIconFontSize() {\n      let { iconSize } = this\n      if (iconSize === 'max') {\n        return 80\n      } else if (iconSize === 'medium') {\n        return 40\n      } else if (iconSize === 'min') {\n        return 24\n      } else {\n        return 64\n      }\n    },\n    rightTextStyleComp() {\n      const { textColor, rightTextStyle, avatarIcon, iconSize } = this\n      if (textColor) {\n        return {\n          color: textColor,\n          ...rightTextStyle\n        }\n      } else {\n        return {\n          ...rightTextStyle\n        }\n      }\n    },\n    hackMrgb1pxcom() {\n      let { hasSubBottomBorder, hasBottomBorder } = this\n      return hasSubBottomBorder || hasBottomBorder ? true : false\n    },\n    borderStyleComp() {\n      let {\n        cellStyle: { borderColor = null },\n        hasTopBorder,\n        hasBottomBorder\n      } = this\n      if (borderColor) {\n        if (hasTopBorder) {\n          return {\n            borderTopWidth: '1px',\n            borderTopColor: borderColor\n          }\n        } else if (hasBottomBorder) {\n          return {\n            borderBottomWidth: '1px',\n            borderBottomColor: borderColor\n          }\n        } else {\n          return {}\n        }\n      } else {\n        if (hasTopBorder) {\n          return {\n            borderTopWidth: '1px',\n            borderTopColor: this._borderColor\n          }\n        } else if (hasBottomBorder) {\n          return {\n            borderBottomWidth: '1px',\n            borderBottomColor: this._borderColor\n          }\n        } else {\n          return {}\n        }\n      }\n    },\n    subBorderStyleComp() {\n      let {\n        cellStyle: { borderColor = null },\n        hasSubTopBorder,\n        hasSubBottomBorder\n      } = this\n      if (borderColor) {\n        if (hasSubTopBorder) {\n          return {\n            borderTopWidth: '1px',\n            borderTopColor: borderColor\n          }\n        } else if (hasSubBottomBorder) {\n          return {\n            borderBottomWidth: '1px',\n            borderBottomColor: borderColor\n          }\n        } else {\n          return {}\n        }\n      } else {\n        if (hasSubTopBorder) {\n          return {\n            borderTopWidth: '1px',\n            borderTopColor: this._borderColor\n          }\n        } else if (hasSubBottomBorder) {\n          return {\n            borderBottomWidth: '1px',\n            borderBottomColor: this._borderColor\n          }\n        } else {\n          return {}\n        }\n      }\n    },\n    badgeStyle() {\n      let { badgeTheme, badgeThemeList, badgeColor } = this\n      return {\n        backgroundColor: badgeColor ? badgeColor : badgeThemeList[badgeTheme]\n      }\n    },\n    // 底部border样式\n    fakeBorderStyleRender() {\n      return {\n        backgroundColor: this._isColmo ? '#343639' : '#F2F2F2',\n        ...this.fakeBorderStyle\n      }\n    }\n  },\n  methods: {\n    onClick() {\n      const { disabled } = this\n      !disabled && this.$emit('dofCellClicked')\n    },\n    dofRightTipClicked() {\n      const { rightTip } = this\n      rightTip && this.$emit('dofRightTipClicked')\n    }\n  }\n}\n</script>\n",null],"sourceRoot":""}]);
 
 // exports
 
@@ -9059,7 +9059,7 @@ exports = module.exports = __webpack_require__(0)(true);
 
 
 // module
-exports.push([module.i, "\n.indicator[data-v-7ecb2930] {\n  position: absolute;\n  item-color: rgba(255, 195, 0, .5);\n  item-selected-color: #ffc300;\n  item-size: 0.26667rem;\n  height: 0.26667rem;\n  bottom: 0.32rem;\n}\n.indicator .weex-indicator-item[data-v-7ecb2930] {\n  width: 0.26667rem;\n  height: 0.26667rem;\n}\n.indicator .weex-indicator-item.weex-indicator-item-active[data-v-7ecb2930] {\n  background-color: #ffc300;\n}\n.indicator .weex-indicator-item[data-v-7ecb2930] {\n  background-color: rgba(255, 195, 0, .5);\n}\n", "", {"version":3,"sources":["/Users/wuhm45/Documents/code/weex组件库/dolphin-weex-ui/packages/dof-lightbox/index.vue?25abe080","/Users/wuhm45/Documents/code/weex组件库/dolphin-weex-ui/packages/dof-lightbox/<input css 15>","/Users/wuhm45/Documents/code/weex组件库/dolphin-weex-ui/packages/dof-lightbox/<input css 14>","/Users/wuhm45/Documents/code/weex组件库/dolphin-weex-ui/packages/dof-lightbox/<input css 13>"],"names":[],"mappings":";AA6BA;EACA,mBAAA;EACA,kCAAA;EACA,6BAAA;EACA,sBAAA;EACA,mBAAA;EACA,gBAAA;CACA;ACnCA;EACE,kBAAY;EACZ,mBAAa;CACd;ACHD;EACE,0BAA0B;CAC3B;ACFD;EACE,wCAAwC;CACzC","file":"index.vue","sourcesContent":["<template>\n  <dof-mask :width=\"width\"\n            :height=\"height\"\n            aria-hidden=\"true\"\n            mask-bg-color=\"transparent\"\n            overlay-opacity=\"0.8\"\n            :show=\"show\"\n            :opacity='opacity'\n            :show-close=\"false\"\n            @dofMaskSetHidden=\"maskOverlayClick\">\n    <slider auto-play=\"false\"\n            v-if=\"show\"\n            :index=\"index\"\n            :interval=\"interval\"\n            :style=\"{ height: height  + 'px'}\">\n      <div v-for=\"(v,index) in imageList\"\n           :style=\"{ height: height  + 'px'}\"\n           :key=\"index\">\n        <image resize=\"cover\"\n               :src=\"v.src\"\n               :style=\"{ height: height + 'px', width: width  + 'px'}\"></image>\n      </div>\n      <indicator class=\"indicator\"\n                 :style=\"indicatorStyle\"></indicator>\n    </slider>\n  </dof-mask>\n</template>\n\n<style scoped>\n  .indicator {\n    position: absolute;\n    item-color: rgba(255, 195, 0, .5);\n    item-selected-color: #ffc300;\n    item-size: 20px;\n    height: 20px;\n    bottom: 24px;\n  }\n</style>\n\n<script>\n  import DofMask from '../dof-mask';\n\n  export default {\n    components: {\n      DofMask\n    },\n    props: {\n      width: {\n        type: [Number, String],\n        default: 750\n      },\n      height: {\n        type: [Number, String],\n        default: 750\n      },\n      show: {\n        type: Boolean,\n        default: false\n      },\n      imageList: Array,\n      indicatorColor: {\n        type: Object,\n        default: () => ({\n          'item-color': 'rgba(255, 195, 0, .5)',\n          'item-selected-color': '#ffc300',\n          'item-size': '20px'\n        })\n      },\n      index: {\n        type: [Number, String],\n        default: 0\n      },\n      interval: {\n        type: [Number, String],\n        default: 3000\n      },\n      opacity: {\n        type: [Number, String],\n        default: 0.6\n      }\n    },\n    computed: {\n      indicatorStyle () {\n        return {\n          width: this.width + 'px',\n          ...this.indicatorColor\n        };\n      }\n    },\n    methods: {\n      maskOverlayClick () {\n        this.$emit('dofLightboxOverlayClicked', {});\n      }\n    }\n  };\n</script>\n","\n.indicator .weex-indicator-item {\n  width: 20px;\n  height: 20px;\n}","\n.indicator .weex-indicator-item.weex-indicator-item-active {\n  background-color: #ffc300;\n}","\n.indicator .weex-indicator-item {\n  background-color: rgba(255, 195, 0, .5);\n}"],"sourceRoot":""}]);
+exports.push([module.i, "\n.indicator[data-v-7ecb2930] {\n  position: absolute;\n  item-color: rgba(255, 195, 0, .5);\n  item-selected-color: #ffc300;\n  item-size: 0.26667rem;\n  height: 0.26667rem;\n  bottom: 0.32rem;\n}\n.indicator .weex-indicator-item[data-v-7ecb2930] {\n  width: 0.26667rem;\n  height: 0.26667rem;\n}\n.indicator .weex-indicator-item.weex-indicator-item-active[data-v-7ecb2930] {\n  background-color: #ffc300;\n}\n.indicator .weex-indicator-item[data-v-7ecb2930] {\n  background-color: rgba(255, 195, 0, .5);\n}\n", "", {"version":3,"sources":["/Users/wuhm45/Documents/code/weex组件库/dolphin-weex-ui/packages/dof-lightbox/index.vue?25abe080","/Users/wuhm45/Documents/code/weex组件库/dolphin-weex-ui/packages/dof-lightbox/<input css 13>","/Users/wuhm45/Documents/code/weex组件库/dolphin-weex-ui/packages/dof-lightbox/<input css 12>","/Users/wuhm45/Documents/code/weex组件库/dolphin-weex-ui/packages/dof-lightbox/<input css 11>"],"names":[],"mappings":";AA6BA;EACA,mBAAA;EACA,kCAAA;EACA,6BAAA;EACA,sBAAA;EACA,mBAAA;EACA,gBAAA;CACA;ACnCA;EACE,kBAAY;EACZ,mBAAa;CACd;ACHD;EACE,0BAA0B;CAC3B;ACFD;EACE,wCAAwC;CACzC","file":"index.vue","sourcesContent":["<template>\n  <dof-mask :width=\"width\"\n            :height=\"height\"\n            aria-hidden=\"true\"\n            mask-bg-color=\"transparent\"\n            overlay-opacity=\"0.8\"\n            :show=\"show\"\n            :opacity='opacity'\n            :show-close=\"false\"\n            @dofMaskSetHidden=\"maskOverlayClick\">\n    <slider auto-play=\"false\"\n            v-if=\"show\"\n            :index=\"index\"\n            :interval=\"interval\"\n            :style=\"{ height: height  + 'px'}\">\n      <div v-for=\"(v,index) in imageList\"\n           :style=\"{ height: height  + 'px'}\"\n           :key=\"index\">\n        <image resize=\"cover\"\n               :src=\"v.src\"\n               :style=\"{ height: height + 'px', width: width  + 'px'}\"></image>\n      </div>\n      <indicator class=\"indicator\"\n                 :style=\"indicatorStyle\"></indicator>\n    </slider>\n  </dof-mask>\n</template>\n\n<style scoped>\n  .indicator {\n    position: absolute;\n    item-color: rgba(255, 195, 0, .5);\n    item-selected-color: #ffc300;\n    item-size: 20px;\n    height: 20px;\n    bottom: 24px;\n  }\n</style>\n\n<script>\n  import DofMask from '../dof-mask';\n\n  export default {\n    components: {\n      DofMask\n    },\n    props: {\n      width: {\n        type: [Number, String],\n        default: 750\n      },\n      height: {\n        type: [Number, String],\n        default: 750\n      },\n      show: {\n        type: Boolean,\n        default: false\n      },\n      imageList: Array,\n      indicatorColor: {\n        type: Object,\n        default: () => ({\n          'item-color': 'rgba(255, 195, 0, .5)',\n          'item-selected-color': '#ffc300',\n          'item-size': '20px'\n        })\n      },\n      index: {\n        type: [Number, String],\n        default: 0\n      },\n      interval: {\n        type: [Number, String],\n        default: 3000\n      },\n      opacity: {\n        type: [Number, String],\n        default: 0.6\n      }\n    },\n    computed: {\n      indicatorStyle () {\n        return {\n          width: this.width + 'px',\n          ...this.indicatorColor\n        };\n      }\n    },\n    methods: {\n      maskOverlayClick () {\n        this.$emit('dofLightboxOverlayClicked', {});\n      }\n    }\n  };\n</script>\n","\n.indicator .weex-indicator-item {\n  width: 20px;\n  height: 20px;\n}","\n.indicator .weex-indicator-item.weex-indicator-item-active {\n  background-color: #ffc300;\n}","\n.indicator .weex-indicator-item {\n  background-color: rgba(255, 195, 0, .5);\n}"],"sourceRoot":""}]);
 
 // exports
 
@@ -9339,7 +9339,7 @@ exports = module.exports = __webpack_require__(0)(true);
 
 
 // module
-exports.push([module.i, "\n.wrapper[data-v-bace8aa8] {\n  /* width: 750px; */\n  background-color: #ffffff;\n  box-shadow: 0 -1px 0.06667rem 0 rgba(0, 0, 0, 0.05);\n}\n.top-border[data-v-bace8aa8] {\n  border-top-style: solid;\n  border-top-width: 1px;\n  border-top-color: #e5e5e8;\n}\n.tab-bar-list[data-v-bace8aa8] {\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: row;\n          flex-direction: row;\n  -webkit-justify-content: space-around;\n          justify-content: space-around;\n  /* background-color: #ffffff; */\n  padding: 0.16rem 0.13333rem 0.21333rem;\n}\n.mutil-tab-bar-container[data-v-bace8aa8] {\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: row;\n          flex-direction: row;\n  -webkit-box-align: center;\n  -webkit-align-items: center;\n          align-items: center;\n}\n.mutil-tab-bar-item[data-v-bace8aa8] {\n  -webkit-box-align: center;\n  -webkit-align-items: center;\n          align-items: center;\n  opacity: 1;\n}\n.is-launch[data-v-bace8aa8] {\n  height: 1.28rem;\n  border-radius: 0.64rem;\n  background-color: #ffffff;\n  -webkit-box-flex: 1;\n  -webkit-flex: 1;\n          flex: 1;\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: row;\n          flex-direction: row;\n  -webkit-box-pack: center;\n  -webkit-justify-content: center;\n          justify-content: center;\n  -webkit-box-align: center;\n  -webkit-align-items: center;\n          align-items: center;\n  /* width: 306px; */\n}\n.is-launch-text[data-v-bace8aa8] {\n  text-align: center;\n  font-family: PingFangSC-Medium;\n  font-size: 0.42667rem;\n  color: #ffffff;\n}\n.tab-bar-item[data-v-bace8aa8] {\n  /* flex: 1; */\n  -webkit-box-align: center;\n  -webkit-align-items: center;\n          align-items: center;\n  opacity: 1;\n}\n.tab-bar-item-disabled[data-v-bace8aa8] {\n  opacity: 0.3;\n}\n.icon-wrapper[data-v-bace8aa8] {\n  -webkit-box-flex: 1;\n  -webkit-flex: 1;\n          flex: 1;\n  /* border-width:\n1px; */\n}\n.mutil-icon-wrapper[data-v-bace8aa8] {\n  width: 1.46667rem;\n}\n.icon-container[data-v-bace8aa8] {\n  /* width: 110px; */\n  height: 1.46667rem;\n  border-radius: 0.73333rem;\n  -webkit-box-pack: center;\n  -webkit-justify-content: center;\n          justify-content: center;\n  -webkit-box-align: center;\n  -webkit-align-items: center;\n          align-items: center;\n  background-color: #ffffff;\n  position: relative;\n}\n.dot-triangle[data-v-bace8aa8] {\n  position: absolute;\n  right: 0.09333rem;\n  top: 1.10667rem;\n  width: 0.26667rem;\n  height: 0.24rem;\n  /* background-color: #267aff; */\n  /* opacity: 0.5; */\n}\n.icon-inner-container[data-v-bace8aa8] {\n  /* width: 96px; */\n  height: 1.28rem;\n  border-radius: 0.64rem;\n  display: -webkit-box;\n  display: -webkit-flex;\n  display: flex;\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: row;\n          flex-direction: row;\n  -webkit-box-pack: center;\n  -webkit-justify-content: center;\n          justify-content: center;\n  -webkit-box-align: center;\n  -webkit-align-items: center;\n          align-items: center;\n  position: relative;\n  overflow: hidden;\n}\n.mask[data-v-bace8aa8] {\n  position: absolute;\n  top: 0.09333rem;\n  left: 0.09333rem;\n  height: 1.28rem;\n  border-radius: 0.64rem;\n}\n.mask[data-v-bace8aa8]:active {\n  background-color: rgba(255, 255, 255, 0.1);\n}\n.animate-circle[data-v-bace8aa8] {\n  position: absolute;\n  /* width: 96px; */\n  /* 比icon-inner-container少两个像素，解决安卓毛边 */\n  height: 1.25333rem;\n  border-radius: 0.62667rem;\n  background-color: #e5e5e8;\n}\n.tab-bar-item-icon[data-v-bace8aa8] {\n  width: 1.28rem;\n  height: 1.28rem;\n}\n.tab-bar-item-loading[data-v-bace8aa8] {\n  width: 0.64rem;\n  height: 0.64rem;\n}\n.tab-bar-item-icon-text[data-v-bace8aa8] {\n  font-family: PingFangSC-Medium;\n  font-size: 0.37333rem; /* color: #ffffff; */\n  letter-spacing: 0;\n  text-align: center;\n  line-height: 0.37333rem;\n}\n.tab-bar-item-title[data-v-bace8aa8] {\n  padding-top: 0.12rem;\n}\n.tab-bar-item-title-text[data-v-bace8aa8] {\n  font-family: PingFangSC-Regular;\n  color: #232323;\n  letter-spacing: 0;\n  text-align: center;\n  font-size: 0.32rem;\n  /* height: 24px; */\n  /* line-height: 24px; */\n}\n.line-wrapper[data-v-bace8aa8] {\n  height: 0.90667rem;\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: row;\n          flex-direction: row;\n  -webkit-box-pack: center;\n  -webkit-justify-content: center;\n          justify-content: center;\n  background-color: #ffffff;\n}\n.line[data-v-bace8aa8] {\n  width: 3.57333rem;\n  height: 0.13333rem;\n  background-color: #000000;\n  opacity: 0.1;\n  border-radius: 0.06667rem;\n  margin-top: 0.56rem;\n}\n", "", {"version":3,"sources":["/Users/wuhm45/Documents/code/weex组件库/dolphin-weex-ui/packages/dof-bottom-bar/index.vue?24ed639c"],"names":[],"mappings":";AA0SA;EACA,mBAAA;EACA,0BAAA;EACA,oDAAA;CACA;AACA;EACA,wBAAA;EACA,sBAAA;EACA,0BAAA;CACA;AACA;EACA,+BAAA;EAAA,8BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,sCAAA;UAAA,8BAAA;EACA,gCAAA;EACA,uCAAA;CACA;AACA;EACA,+BAAA;EAAA,8BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;CACA;AACA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,WAAA;CACA;AACA;EACA,gBAAA;EACA,uBAAA;EACA,0BAAA;EACA,oBAAA;EAAA,gBAAA;UAAA,QAAA;EACA,+BAAA;EAAA,8BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,yBAAA;EAAA,gCAAA;UAAA,wBAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,mBAAA;CACA;AACA;EACA,mBAAA;EACA,+BAAA;EACA,sBAAA;EACA,eAAA;CACA;AACA;EACA,cAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,WAAA;CACA;AACA;EACA,aAAA;CACA;AACA;EACA,oBAAA;EAAA,gBAAA;UAAA,QAAA;EACA;OACA;CACA;AACA;EACA,kBAAA;CACA;AACA;EACA,mBAAA;EACA,mBAAA;EACA,0BAAA;EACA,yBAAA;EAAA,gCAAA;UAAA,wBAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,0BAAA;EACA,mBAAA;CACA;AACA;EACA,mBAAA;EACA,kBAAA;EACA,gBAAA;EACA,kBAAA;EACA,gBAAA;EACA,gCAAA;EACA,mBAAA;CACA;AACA;EACA,kBAAA;EACA,gBAAA;EACA,uBAAA;EACA,qBAAA;EAAA,sBAAA;EAAA,cAAA;EACA,+BAAA;EAAA,8BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,yBAAA;EAAA,gCAAA;UAAA,wBAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,mBAAA;EACA,iBAAA;CACA;AACA;EACA,mBAAA;EACA,gBAAA;EACA,iBAAA;EACA,gBAAA;EACA,uBAAA;CACA;AACA;EACA,2CAAA;CACA;AACA;EACA,mBAAA;EACA,kBAAA;EACA,uCAAA;EACA,mBAAA;EACA,0BAAA;EACA,0BAAA;CACA;AACA;EACA,eAAA;EACA,gBAAA;CACA;AACA;EACA,eAAA;EACA,gBAAA;CACA;AACA;EACA,+BAAA;EACA,sBAAA,CAAA,qBAAA;EACA,kBAAA;EACA,mBAAA;EACA,wBAAA;CACA;AACA;EACA,qBAAA;CACA;AACA;EACA,gCAAA;EACA,eAAA;EACA,kBAAA;EACA,mBAAA;EACA,mBAAA;EACA,mBAAA;EACA,wBAAA;CACA;AACA;EACA,mBAAA;EACA,+BAAA;EAAA,8BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,yBAAA;EAAA,gCAAA;UAAA,wBAAA;EACA,0BAAA;CACA;AACA;EACA,kBAAA;EACA,mBAAA;EACA,0BAAA;EACA,aAAA;EACA,0BAAA;EACA,oBAAA;CACA","file":"index.vue","sourcesContent":["<template>\n  <div :class=\"['wrapper', hasTopBorder && 'top-border']\" :style=\"newTabBarStyle\">\n    <div v-if=\"mutilTabGroups.length > 0\">\n      <slot>\n        <div class=\"mutil-tab-bar-container\" :style=\"mutilTabBarContainerStyle\">\n          <div\n            v-for=\"(item, index) in mutilTabGroups\"\n            :class=\"['mutil-tab-bar-item', item.disabled && 'tab-bar-item-disabled']\"\n            :key=\"index\"\n          >\n            <div class=\"mutil-icon-wrapper\" v-if=\"!item.launchText\">\n              <div v-if=\"item.hasDot === true\" class=\"dot-triangle\" :style=\"{ backgroundColor: item.iconColor }\"></div>\n              <div class=\"icon-container\">\n                <div class=\"animate-circle\" :ref=\"`animate-circle-${index}`\"></div>\n\n                <div\n                  class=\"icon-inner-container\"\n                  :ref=\"`animate-circle-bg-${index}`\"\n                  :style=\"{ backgroundColor: item.iconColor }\"\n                  @click=\"tabBarItemClicked(item, index, tabGroups)\"\n                  @touchstart=\"shrinkCircleFn(item, index, tabGroups)\"\n                  @touchend=\"expandCircleFn(item, index, tabGroups)\"\n                >\n                  <dof-spinner\n                    v-if=\"item.loading\"\n                    class=\"tab-bar-item-loading\"\n                    :type=\"resolveLoadingIcon(item.iconColor)\"\n                  />\n                  <image v-else-if=\"item.icon\" class=\"tab-bar-item-icon\" :src=\"item.icon\"></image>\n                  <dof-iconfont\n                    v-else-if=\"item.iconfont\"\n                    :code=\"item.iconfont\"\n                    :size=\"item.iconfontSize || 96\"\n                    :color=\"item.iconfontColor || 'rgba(255,255,255, 0.4)'\"\n                  ></dof-iconfont>\n                  <text\n                    v-else-if=\"item.iconText\"\n                    class=\"tab-bar-item-icon-text\"\n                    :style=\"{\n                      color: !!item.iconTextColor ? item.iconTextColor : _iconTextColor\n                    }\"\n                    >{{ item.iconText }}</text\n                  >\n                </div>\n              </div>\n            </div>\n            <div\n              class=\"is-launch\"\n              v-if=\"item.launchText\"\n              :style=\"{ backgroundColor: item.launchBg, width: item.launchWidth }\"\n            >\n              <text class=\"is-launch-text\" :style=\"{ color: item.launchColor }\">{{ item.launchText }}</text>\n            </div>\n          </div>\n        </div>\n      </slot>\n    </div>\n    <div class=\"tab-bar-container\" v-else>\n      <div class=\"tab-bar-list\">\n        <slot>\n          <div\n            v-for=\"(item, index) in tabGroups\"\n            :class=\"['tab-bar-item', item.disabled && 'tab-bar-item-disabled']\"\n            :key=\"index\"\n          >\n            <div class=\"icon-wrapper\">\n              <div\n                v-if=\"item.hasDot === true\"\n                class=\"dot-triangle\"\n                :style=\"{\n                  backgroundColor: item.borderColor ? item.borderColor : item.iconColor ? item.iconColor : _iconColor\n                }\"\n              ></div>\n              <div class=\"icon-container\" :style=\"{ width: widthCalcBig(item) }\">\n                <div class=\"animate-circle\" :ref=\"`animate-circle-${index}`\" :style=\"{ width: widthCalc(item) }\"></div>\n                <div\n                  class=\"icon-inner-container\"\n                  :ref=\"`animate-circle-bg-${index}`\"\n                  :style=\"{\n                    width: widthCalc(item),\n                    backgroundColor: handleBg(item),\n                    borderWidth: '2px',\n                    borderColor: item.borderColor ? item.borderColor : item.iconColor ? item.iconColor : _iconColor\n                  }\"\n                  @click=\"tabBarItemClicked(item, index, tabGroups)\"\n                  @touchstart=\"shrinkCircleFn(item, index, tabGroups)\"\n                  @touchend=\"expandCircleFn(item, index, tabGroups)\"\n                >\n                  <dof-spinner\n                    v-if=\"item.loading\"\n                    class=\"tab-bar-item-loading\"\n                    :type=\"resolveLoadingIcon(item.iconColor)\"\n                  />\n                  <image v-else-if=\"item.icon\" class=\"tab-bar-item-icon\" :src=\"item.icon\"></image>\n                  <dof-iconfont\n                    v-else-if=\"item.iconfont\"\n                    :code=\"item.iconfont\"\n                    :size=\"item.iconfontSize || 96\"\n                    :color=\"item.iconfontColor || 'rgb(102,102,102)'\"\n                  ></dof-iconfont>\n                  <text\n                    v-else-if=\"item.iconText\"\n                    class=\"tab-bar-item-icon-text\"\n                    :style=\"{\n                      color: handleIconTextColor(item)\n                    }\"\n                    >{{ item.iconText }}</text\n                  >\n                </div>\n                <!-- mask -->\n                <div\n                  v-if=\"_isColmo && !item.disabled && !item.loading\"\n                  class=\"mask\"\n                  :style=\"{\n                    width: widthCalc(item)\n                  }\"\n                  @click=\"tabBarItemClicked(item, index, tabGroups)\"\n                ></div>\n              </div>\n            </div>\n            <div class=\"tab-bar-item-title\">\n              <text class=\"tab-bar-item-title-text\">{{ item.text }}</text>\n            </div>\n          </div>\n        </slot>\n      </div>\n    </div>\n    <div class=\"line-wrapper\" v-if=\"isIPhoneX\">\n      <div class=\"line\"></div>\n    </div>\n  </div>\n</template>\n\n<script>\nimport Utils from '../utils/index.js'\nimport Color from 'color'\nimport ColmoMixin from '../../mixins/colmo'\nconst animation = weex.requireModule('animation')\nlet timer = null\nimport DofIconfont from '../dof-iconfont'\nimport DofSpinner from '../dof-spinner'\n\nexport default {\n  mixins: [ColmoMixin],\n  components: { DofIconfont, DofSpinner },\n  props: {\n    mutilTabGroups: { type: Array, default: () => [] },\n    mutilTabBarContainerStyle: {\n      type: Object,\n      default: () => ({\n        justifyContent: 'space-around',\n        paddingLeft: '64px',\n        paddingRight: '64px'\n      })\n    },\n    tabGroups: { type: Array, default: () => [] },\n    iconColor: { type: String, default: '' },\n    iconTextColor: { type: String, default: '' },\n    tabBarPosition: { type: Object, default: () => ({ position: 'fixed' }) },\n    hasTopBorder: { type: Boolean, default: false },\n    supportXBar: { type: Boolean, default: true },\n    bottomLine: { type: Boolean, default: true },\n    warpStyle: { type: Object, default: () => ({}) },\n    showAnimate: { type: Boolean, default: true }\n  },\n  data: () => ({}),\n  created() {\n    const { supportXBar } = this\n    this.isIPhoneX = Utils.env.isIPhoneX() && supportXBar\n  },\n  computed: {\n    _iconTextColor() {\n      return this.iconTextColor ? this.iconTextColor : this._theme === 'colmo' ? 'rgba(255,255,255,0.80)' : '#ffffff'\n    },\n    _iconColor() {\n      return this.iconColor ? this.iconColor : this._theme === 'colmo' ? '#B35336' : '#267Aff'\n    },\n    newTabBarStyle() {\n      const { tabBarPosition } = this\n      if (tabBarPosition.position === 'fixed') {\n        return { position: 'fixed', left: 0, right: 0, bottom: 0, ...this.warpStyle }\n      } else {\n        return { left: 0, right: 0, ...this.warpStyle, ...tabBarPosition }\n      }\n    }\n  },\n  methods: {\n    widthMap(item) {\n      return item.width ? Number(item.width) : item.size === 'big' ? 304 : 96\n    },\n    widthCalc(item) {\n      return this.widthMap(item) + 'px'\n    },\n    widthCalcBig(item) {\n      return this.widthMap(item) + 14 + 'px'\n    },\n    handleBg(item) {\n      let bg = item.iconColor ? item.iconColor : this._iconColor\n      if (bg === 'transparent') bg = this._isColmo ? '#151617' : '#ffffff'\n      return bg\n    },\n    handleIconTextColor(item) {\n      if (item.iconTextColor) return item.iconTextColor\n      let isDark = new Color(this.handleBg(item)).isDark()\n      let color = isDark ? '#ffffff' : '#333333'\n      return color\n    },\n    resolveLoadingIcon(backgroudColor) {\n      if (this._isColmo) return 'colmo'\n      if (backgroudColor === 'transparent') return 'black'\n\n      var color = new Color(backgroudColor)\n      return color.isDark() ? 'white' : 'black'\n    },\n    tabBarItemClicked(target, index, source) {\n      if (target && !target.disabled) {\n        this.$emit('dofTabItemClicked', { target, index })\n      }\n    },\n\n    _animationFn(el, styles, options, callback) {\n      let { timing = 'linear', duration = 500, delay = 0 } = options\n      // Core.alert(timing)\n      animation.transition(\n        el,\n        {\n          styles: styles,\n          timingFunction: timing,\n          duration: duration,\n          delay\n        },\n        () => {\n          callback && callback()\n        }\n      )\n    },\n    shrinkCircleFn(target, index, source) {\n      if (this._isColmo || !this.showAnimate) return\n      if (target && !target.disabled) {\n        let elCircle = this.$refs[`animate-circle-${index}`][0]\n        let elImg = this.$refs[`animate-circle-bg-${index}`][0]\n        let scale = target.width && target.width > 500 ? 'scale(0.98,0.98)' : 'scale(0.95,0.95)'\n        this._animationFn(\n          elCircle,\n          {\n            transform: scale,\n            transformOrigin: 'center center'\n          },\n          { duration: 100 },\n          () => {}\n        )\n        this._animationFn(elImg, { transform: scale, transformOrigin: 'center center' }, { duration: 100 }, () => {})\n      }\n    },\n    expandCircleFn(target, index, source) {\n      if (this._isColmo || !this.showAnimate) return\n      if (target && !target.disabled) {\n        let elCircle = this.$refs[`animate-circle-${index}`][0]\n        let elImg = this.$refs[`animate-circle-bg-${index}`][0]\n        timer = setTimeout(() => {\n          this._animationFn(\n            elImg,\n            { transform: 'scale(1,1)', transformOrigin: 'center center' },\n            { duration: 100 },\n            () => {}\n          )\n          this._animationFn(\n            elCircle,\n            {\n              transform: 'scale(1.2,1.2)',\n              opacity: 0,\n              transformOrigin: 'center center'\n            },\n            {},\n            () => {\n              animation.transition(elCircle, {\n                styles: {\n                  transform: 'scale(1,1)',\n                  opacity: 1,\n                  transformOrigin: 'center center'\n                },\n                duration: 0,\n                timingFunction: 'linear',\n                delay: 0\n              })\n            }\n          )\n        }, 100)\n      }\n    }\n  },\n  beforeDestroy() {\n    clearTimeout(timer)\n  }\n}\n</script>\n\n<style scoped>\n.wrapper {\n  /* width: 750px; */\n  background-color: #ffffff;\n  box-shadow: 0 -1px 5px 0 rgba(0, 0, 0, 0.05);\n}\n.top-border {\n  border-top-style: solid;\n  border-top-width: 1px;\n  border-top-color: #e5e5e8;\n}\n.tab-bar-list {\n  flex-direction: row;\n  justify-content: space-around;\n  /* background-color: #ffffff; */\n  padding: 12px 10px 16px;\n}\n.mutil-tab-bar-container {\n  flex-direction: row;\n  align-items: center;\n}\n.mutil-tab-bar-item {\n  align-items: center;\n  opacity: 1;\n}\n.is-launch {\n  height: 96px;\n  border-radius: 48px;\n  background-color: #ffffff;\n  flex: 1;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  /* width: 306px; */\n}\n.is-launch-text {\n  text-align: center;\n  font-family: PingFangSC-Medium;\n  font-size: 32px;\n  color: #ffffff;\n}\n.tab-bar-item {\n  /* flex: 1; */\n  align-items: center;\n  opacity: 1;\n}\n.tab-bar-item-disabled {\n  opacity: 0.3;\n}\n.icon-wrapper {\n  flex: 1;\n  /* border-width:\n1px; */\n}\n.mutil-icon-wrapper {\n  width: 110px;\n}\n.icon-container {\n  /* width: 110px; */\n  height: 110px;\n  border-radius: 55px;\n  justify-content: center;\n  align-items: center;\n  background-color: #ffffff;\n  position: relative;\n}\n.dot-triangle {\n  position: absolute;\n  right: 7px;\n  top: 83px;\n  width: 20px;\n  height: 18px;\n  /* background-color: #267aff; */\n  /* opacity: 0.5; */\n}\n.icon-inner-container {\n  /* width: 96px; */\n  height: 96px;\n  border-radius: 48px;\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  overflow: hidden;\n}\n.mask {\n  position: absolute;\n  top: 7px;\n  left: 7px;\n  height: 96px;\n  border-radius: 48px;\n}\n.mask:active {\n  background-color: rgba(255, 255, 255, 0.1);\n}\n.animate-circle {\n  position: absolute;\n  /* width: 96px; */\n  /* 比icon-inner-container少两个像素，解决安卓毛边 */\n  height: 94px;\n  border-radius: 47px;\n  background-color: #e5e5e8;\n}\n.tab-bar-item-icon {\n  width: 96px;\n  height: 96px;\n}\n.tab-bar-item-loading {\n  width: 48px;\n  height: 48px;\n}\n.tab-bar-item-icon-text {\n  font-family: PingFangSC-Medium;\n  font-size: 28px; /* color: #ffffff; */\n  letter-spacing: 0;\n  text-align: center;\n  line-height: 28px;\n}\n.tab-bar-item-title {\n  padding-top: 9px;\n}\n.tab-bar-item-title-text {\n  font-family: PingFangSC-Regular;\n  color: #232323;\n  letter-spacing: 0;\n  text-align: center;\n  font-size: 24px;\n  /* height: 24px; */\n  /* line-height: 24px; */\n}\n.line-wrapper {\n  height: 68px;\n  flex-direction: row;\n  justify-content: center;\n  background-color: #ffffff;\n}\n.line {\n  width: 268px;\n  height: 10px;\n  background-color: #000000;\n  opacity: 0.1;\n  border-radius: 5px;\n  margin-top: 42px;\n}\n</style>\n<style scoped src=\"./colmo.css\"></style>\n"],"sourceRoot":""}]);
+exports.push([module.i, "\n.wrapper[data-v-bace8aa8] {\n  /* width: 750px; */\n  background-color: #ffffff;\n  box-shadow: 0 -1px 0.06667rem 0 rgba(0, 0, 0, 0.05);\n}\n.top-border[data-v-bace8aa8] {\n  border-top-style: solid;\n  border-top-width: 1px;\n  border-top-color: #e5e5e8;\n}\n.tab-bar-list[data-v-bace8aa8] {\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: row;\n          flex-direction: row;\n  -webkit-justify-content: space-around;\n          justify-content: space-around;\n  /* background-color: #ffffff; */\n  padding: 0.16rem 0.13333rem 0.21333rem;\n}\n.mutil-tab-bar-container[data-v-bace8aa8] {\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: row;\n          flex-direction: row;\n  -webkit-box-align: center;\n  -webkit-align-items: center;\n          align-items: center;\n}\n.mutil-tab-bar-item[data-v-bace8aa8] {\n  -webkit-box-align: center;\n  -webkit-align-items: center;\n          align-items: center;\n  opacity: 1;\n}\n.is-launch[data-v-bace8aa8] {\n  height: 1.28rem;\n  border-radius: 0.64rem;\n  background-color: #ffffff;\n  /* flex: 1; */\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: row;\n          flex-direction: row;\n  -webkit-box-pack: center;\n  -webkit-justify-content: center;\n          justify-content: center;\n  -webkit-box-align: center;\n  -webkit-align-items: center;\n          align-items: center;\n  /* width: 306px; */\n}\n.is-launch-text[data-v-bace8aa8] {\n  text-align: center;\n  font-family: PingFangSC-Medium;\n  font-size: 0.42667rem;\n  color: #ffffff;\n}\n.tab-bar-item[data-v-bace8aa8] {\n  /* flex: 1; */\n  -webkit-box-align: center;\n  -webkit-align-items: center;\n          align-items: center;\n  opacity: 1;\n}\n.tab-bar-item-disabled[data-v-bace8aa8] {\n  opacity: 0.3;\n}\n.icon-wrapper[data-v-bace8aa8] {\n  -webkit-box-flex: 1;\n  -webkit-flex: 1;\n          flex: 1;\n  /* border-width:\n1px; */\n}\n.mutil-icon-wrapper[data-v-bace8aa8] {\n  width: 1.46667rem;\n}\n.icon-container[data-v-bace8aa8] {\n  /* width: 110px; */\n  height: 1.46667rem;\n  border-radius: 0.73333rem;\n  -webkit-box-pack: center;\n  -webkit-justify-content: center;\n          justify-content: center;\n  -webkit-box-align: center;\n  -webkit-align-items: center;\n          align-items: center;\n  background-color: #ffffff;\n  position: relative;\n}\n.dot-triangle[data-v-bace8aa8] {\n  position: absolute;\n  right: 0.09333rem;\n  top: 1.10667rem;\n  width: 0.26667rem;\n  height: 0.24rem;\n  /* background-color: #267aff; */\n  /* opacity: 0.5; */\n}\n.icon-inner-container[data-v-bace8aa8] {\n  /* width: 96px; */\n  height: 1.28rem;\n  border-radius: 0.64rem;\n  display: -webkit-box;\n  display: -webkit-flex;\n  display: flex;\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: row;\n          flex-direction: row;\n  -webkit-box-pack: center;\n  -webkit-justify-content: center;\n          justify-content: center;\n  -webkit-box-align: center;\n  -webkit-align-items: center;\n          align-items: center;\n  position: relative;\n  overflow: hidden;\n}\n.mask[data-v-bace8aa8] {\n  position: absolute;\n  top: 0.09333rem;\n  left: 0.09333rem;\n  height: 1.28rem;\n  border-radius: 0.64rem;\n}\n.mask[data-v-bace8aa8]:active {\n  background-color: rgba(255, 255, 255, 0.1);\n}\n.animate-circle[data-v-bace8aa8] {\n  position: absolute;\n  /* width: 96px; */\n  /* 比icon-inner-container少两个像素，解决安卓毛边 */\n  height: 1.25333rem;\n  border-radius: 0.62667rem;\n  background-color: #e5e5e8;\n}\n.tab-bar-item-icon[data-v-bace8aa8] {\n  width: 1.28rem;\n  height: 1.28rem;\n}\n.tab-bar-item-loading[data-v-bace8aa8] {\n  width: 0.64rem;\n  height: 0.64rem;\n}\n.tab-bar-item-icon-text[data-v-bace8aa8] {\n  font-family: PingFangSC-Medium;\n  font-size: 0.37333rem; /* color: #ffffff; */\n  letter-spacing: 0;\n  text-align: center;\n  line-height: 0.37333rem;\n}\n.tab-bar-item-title[data-v-bace8aa8] {\n  padding-top: 0.12rem;\n}\n.tab-bar-item-title-text[data-v-bace8aa8] {\n  font-family: PingFangSC-Regular;\n  color: #232323;\n  letter-spacing: 0;\n  text-align: center;\n  font-size: 0.32rem;\n  /* height: 24px; */\n  /* line-height: 24px; */\n}\n.line-wrapper[data-v-bace8aa8] {\n  height: 0.90667rem;\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: row;\n          flex-direction: row;\n  -webkit-box-pack: center;\n  -webkit-justify-content: center;\n          justify-content: center;\n  background-color: #ffffff;\n}\n.line[data-v-bace8aa8] {\n  width: 3.57333rem;\n  height: 0.13333rem;\n  background-color: #000000;\n  opacity: 0.1;\n  border-radius: 0.06667rem;\n  margin-top: 0.56rem;\n}\n", "", {"version":3,"sources":["/Users/wuhm45/Documents/code/weex组件库/dolphin-weex-ui/packages/dof-bottom-bar/index.vue?2d2b0fae"],"names":[],"mappings":";AA0SA;EACA,mBAAA;EACA,0BAAA;EACA,oDAAA;CACA;AACA;EACA,wBAAA;EACA,sBAAA;EACA,0BAAA;CACA;AACA;EACA,+BAAA;EAAA,8BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,sCAAA;UAAA,8BAAA;EACA,gCAAA;EACA,uCAAA;CACA;AACA;EACA,+BAAA;EAAA,8BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;CACA;AACA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,WAAA;CACA;AACA;EACA,gBAAA;EACA,uBAAA;EACA,0BAAA;EACA,cAAA;EACA,+BAAA;EAAA,8BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,yBAAA;EAAA,gCAAA;UAAA,wBAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,mBAAA;CACA;AACA;EACA,mBAAA;EACA,+BAAA;EACA,sBAAA;EACA,eAAA;CACA;AACA;EACA,cAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,WAAA;CACA;AACA;EACA,aAAA;CACA;AACA;EACA,oBAAA;EAAA,gBAAA;UAAA,QAAA;EACA;OACA;CACA;AACA;EACA,kBAAA;CACA;AACA;EACA,mBAAA;EACA,mBAAA;EACA,0BAAA;EACA,yBAAA;EAAA,gCAAA;UAAA,wBAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,0BAAA;EACA,mBAAA;CACA;AACA;EACA,mBAAA;EACA,kBAAA;EACA,gBAAA;EACA,kBAAA;EACA,gBAAA;EACA,gCAAA;EACA,mBAAA;CACA;AACA;EACA,kBAAA;EACA,gBAAA;EACA,uBAAA;EACA,qBAAA;EAAA,sBAAA;EAAA,cAAA;EACA,+BAAA;EAAA,8BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,yBAAA;EAAA,gCAAA;UAAA,wBAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,mBAAA;EACA,iBAAA;CACA;AACA;EACA,mBAAA;EACA,gBAAA;EACA,iBAAA;EACA,gBAAA;EACA,uBAAA;CACA;AACA;EACA,2CAAA;CACA;AACA;EACA,mBAAA;EACA,kBAAA;EACA,uCAAA;EACA,mBAAA;EACA,0BAAA;EACA,0BAAA;CACA;AACA;EACA,eAAA;EACA,gBAAA;CACA;AACA;EACA,eAAA;EACA,gBAAA;CACA;AACA;EACA,+BAAA;EACA,sBAAA,CAAA,qBAAA;EACA,kBAAA;EACA,mBAAA;EACA,wBAAA;CACA;AACA;EACA,qBAAA;CACA;AACA;EACA,gCAAA;EACA,eAAA;EACA,kBAAA;EACA,mBAAA;EACA,mBAAA;EACA,mBAAA;EACA,wBAAA;CACA;AACA;EACA,mBAAA;EACA,+BAAA;EAAA,8BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,yBAAA;EAAA,gCAAA;UAAA,wBAAA;EACA,0BAAA;CACA;AACA;EACA,kBAAA;EACA,mBAAA;EACA,0BAAA;EACA,aAAA;EACA,0BAAA;EACA,oBAAA;CACA","file":"index.vue","sourcesContent":["<template>\n  <div :class=\"['wrapper', hasTopBorder && 'top-border']\" :style=\"newTabBarStyle\">\n    <div v-if=\"mutilTabGroups.length > 0\">\n      <slot>\n        <div class=\"mutil-tab-bar-container\" :style=\"mutilTabBarContainerStyle\">\n          <div\n            v-for=\"(item, index) in mutilTabGroups\"\n            :class=\"['mutil-tab-bar-item', item.disabled && 'tab-bar-item-disabled']\"\n            :key=\"index\"\n          >\n            <div class=\"mutil-icon-wrapper\" v-if=\"!item.launchText\">\n              <div v-if=\"item.hasDot === true\" class=\"dot-triangle\" :style=\"{ backgroundColor: item.iconColor }\"></div>\n              <div class=\"icon-container\">\n                <div class=\"animate-circle\" :ref=\"`animate-circle-${index}`\"></div>\n\n                <div\n                  class=\"icon-inner-container\"\n                  :ref=\"`animate-circle-bg-${index}`\"\n                  :style=\"{ backgroundColor: item.iconColor }\"\n                  @click=\"tabBarItemClicked(item, index, tabGroups)\"\n                  @touchstart=\"shrinkCircleFn(item, index, tabGroups)\"\n                  @touchend=\"expandCircleFn(item, index, tabGroups)\"\n                >\n                  <dof-spinner\n                    v-if=\"item.loading\"\n                    class=\"tab-bar-item-loading\"\n                    :type=\"resolveLoadingIcon(item.iconColor)\"\n                  />\n                  <image v-else-if=\"item.icon\" class=\"tab-bar-item-icon\" :src=\"item.icon\"></image>\n                  <dof-iconfont\n                    v-else-if=\"item.iconfont\"\n                    :code=\"item.iconfont\"\n                    :size=\"item.iconfontSize || 96\"\n                    :color=\"item.iconfontColor || 'rgba(255,255,255, 0.4)'\"\n                  ></dof-iconfont>\n                  <text\n                    v-else-if=\"item.iconText\"\n                    class=\"tab-bar-item-icon-text\"\n                    :style=\"{\n                      color: !!item.iconTextColor ? item.iconTextColor : _iconTextColor\n                    }\"\n                    >{{ item.iconText }}</text\n                  >\n                </div>\n              </div>\n            </div>\n            <div\n              class=\"is-launch\"\n              v-if=\"item.launchText\"\n              :style=\"{ backgroundColor: item.launchBg, width: item.launchWidth }\"\n            >\n              <text class=\"is-launch-text\" :style=\"{ color: item.launchColor }\">{{ item.launchText }}</text>\n            </div>\n          </div>\n        </div>\n      </slot>\n    </div>\n    <div class=\"tab-bar-container\" v-else>\n      <div class=\"tab-bar-list\">\n        <slot>\n          <div\n            v-for=\"(item, index) in tabGroups\"\n            :class=\"['tab-bar-item', item.disabled && 'tab-bar-item-disabled']\"\n            :key=\"index\"\n          >\n            <div class=\"icon-wrapper\">\n              <div\n                v-if=\"item.hasDot === true\"\n                class=\"dot-triangle\"\n                :style=\"{\n                  backgroundColor: item.borderColor ? item.borderColor : item.iconColor ? item.iconColor : _iconColor\n                }\"\n              ></div>\n              <div class=\"icon-container\" :style=\"{ width: widthCalcBig(item) }\">\n                <div class=\"animate-circle\" :ref=\"`animate-circle-${index}`\" :style=\"{ width: widthCalc(item) }\"></div>\n                <div\n                  class=\"icon-inner-container\"\n                  :ref=\"`animate-circle-bg-${index}`\"\n                  :style=\"{\n                    width: widthCalc(item),\n                    backgroundColor: handleBg(item),\n                    borderWidth: '2px',\n                    borderColor: item.borderColor ? item.borderColor : item.iconColor ? item.iconColor : _iconColor\n                  }\"\n                  @click=\"tabBarItemClicked(item, index, tabGroups)\"\n                  @touchstart=\"shrinkCircleFn(item, index, tabGroups)\"\n                  @touchend=\"expandCircleFn(item, index, tabGroups)\"\n                >\n                  <dof-spinner\n                    v-if=\"item.loading\"\n                    class=\"tab-bar-item-loading\"\n                    :type=\"resolveLoadingIcon(item.iconColor)\"\n                  />\n                  <image v-else-if=\"item.icon\" class=\"tab-bar-item-icon\" :src=\"item.icon\"></image>\n                  <dof-iconfont\n                    v-else-if=\"item.iconfont\"\n                    :code=\"item.iconfont\"\n                    :size=\"item.iconfontSize || 96\"\n                    :color=\"item.iconfontColor || 'rgb(102,102,102)'\"\n                  ></dof-iconfont>\n                  <text\n                    v-else-if=\"item.iconText\"\n                    class=\"tab-bar-item-icon-text\"\n                    :style=\"{\n                      color: handleIconTextColor(item)\n                    }\"\n                    >{{ item.iconText }}</text\n                  >\n                </div>\n                <!-- mask -->\n                <div\n                  v-if=\"_isColmo && !item.disabled && !item.loading\"\n                  class=\"mask\"\n                  :style=\"{\n                    width: widthCalc(item)\n                  }\"\n                  @click=\"tabBarItemClicked(item, index, tabGroups)\"\n                ></div>\n              </div>\n            </div>\n            <div class=\"tab-bar-item-title\">\n              <text class=\"tab-bar-item-title-text\">{{ item.text }}</text>\n            </div>\n          </div>\n        </slot>\n      </div>\n    </div>\n    <div class=\"line-wrapper\" v-if=\"isIPhoneX\">\n      <div class=\"line\"></div>\n    </div>\n  </div>\n</template>\n\n<script>\nimport Utils from '../utils/index.js'\nimport Color from 'color'\nimport ColmoMixin from '../../mixins/colmo'\nconst animation = weex.requireModule('animation')\nlet timer = null\nimport DofIconfont from '../dof-iconfont'\nimport DofSpinner from '../dof-spinner'\n\nexport default {\n  mixins: [ColmoMixin],\n  components: { DofIconfont, DofSpinner },\n  props: {\n    mutilTabGroups: { type: Array, default: () => [] },\n    mutilTabBarContainerStyle: {\n      type: Object,\n      default: () => ({\n        justifyContent: 'space-around',\n        paddingLeft: '64px',\n        paddingRight: '64px'\n      })\n    },\n    tabGroups: { type: Array, default: () => [] },\n    iconColor: { type: String, default: '' },\n    iconTextColor: { type: String, default: '' },\n    tabBarPosition: { type: Object, default: () => ({ position: 'fixed' }) },\n    hasTopBorder: { type: Boolean, default: false },\n    supportXBar: { type: Boolean, default: true },\n    bottomLine: { type: Boolean, default: true },\n    warpStyle: { type: Object, default: () => ({}) },\n    showAnimate: { type: Boolean, default: true }\n  },\n  data: () => ({}),\n  created() {\n    const { supportXBar } = this\n    this.isIPhoneX = Utils.env.isIPhoneX() && supportXBar\n  },\n  computed: {\n    _iconTextColor() {\n      return this.iconTextColor ? this.iconTextColor : this._theme === 'colmo' ? 'rgba(255,255,255,0.80)' : '#ffffff'\n    },\n    _iconColor() {\n      return this.iconColor ? this.iconColor : this._theme === 'colmo' ? '#B35336' : '#267Aff'\n    },\n    newTabBarStyle() {\n      const { tabBarPosition } = this\n      if (tabBarPosition.position === 'fixed') {\n        return { position: 'fixed', left: 0, right: 0, bottom: 0, ...this.warpStyle }\n      } else {\n        return { left: 0, right: 0, ...this.warpStyle, ...tabBarPosition }\n      }\n    }\n  },\n  methods: {\n    widthMap(item) {\n      return item.width ? Number(item.width) : item.size === 'big' ? 304 : 96\n    },\n    widthCalc(item) {\n      return this.widthMap(item) + 'px'\n    },\n    widthCalcBig(item) {\n      return this.widthMap(item) + 14 + 'px'\n    },\n    handleBg(item) {\n      let bg = item.iconColor ? item.iconColor : this._iconColor\n      if (bg === 'transparent') bg = this._isColmo ? '#151617' : '#ffffff'\n      return bg\n    },\n    handleIconTextColor(item) {\n      if (item.iconTextColor) return item.iconTextColor\n      let isDark = new Color(this.handleBg(item)).isDark()\n      let color = isDark ? '#ffffff' : '#333333'\n      return color\n    },\n    resolveLoadingIcon(backgroudColor) {\n      if (this._isColmo) return 'colmo'\n      if (backgroudColor === 'transparent') return 'black'\n\n      var color = new Color(backgroudColor)\n      return color.isDark() ? 'white' : 'black'\n    },\n    tabBarItemClicked(target, index, source) {\n      if (target && !target.disabled) {\n        this.$emit('dofTabItemClicked', { target, index })\n      }\n    },\n\n    _animationFn(el, styles, options, callback) {\n      let { timing = 'linear', duration = 500, delay = 0 } = options\n      // Core.alert(timing)\n      animation.transition(\n        el,\n        {\n          styles: styles,\n          timingFunction: timing,\n          duration: duration,\n          delay\n        },\n        () => {\n          callback && callback()\n        }\n      )\n    },\n    shrinkCircleFn(target, index, source) {\n      if (this._isColmo || !this.showAnimate) return\n      if (target && !target.disabled) {\n        let elCircle = this.$refs[`animate-circle-${index}`][0]\n        let elImg = this.$refs[`animate-circle-bg-${index}`][0]\n        let scale = target.width && target.width > 500 ? 'scale(0.98,0.98)' : 'scale(0.95,0.95)'\n        this._animationFn(\n          elCircle,\n          {\n            transform: scale,\n            transformOrigin: 'center center'\n          },\n          { duration: 100 },\n          () => {}\n        )\n        this._animationFn(elImg, { transform: scale, transformOrigin: 'center center' }, { duration: 100 }, () => {})\n      }\n    },\n    expandCircleFn(target, index, source) {\n      if (this._isColmo || !this.showAnimate) return\n      if (target && !target.disabled) {\n        let elCircle = this.$refs[`animate-circle-${index}`][0]\n        let elImg = this.$refs[`animate-circle-bg-${index}`][0]\n        timer = setTimeout(() => {\n          this._animationFn(\n            elImg,\n            { transform: 'scale(1,1)', transformOrigin: 'center center' },\n            { duration: 100 },\n            () => {}\n          )\n          this._animationFn(\n            elCircle,\n            {\n              transform: 'scale(1.2,1.2)',\n              opacity: 0,\n              transformOrigin: 'center center'\n            },\n            {},\n            () => {\n              animation.transition(elCircle, {\n                styles: {\n                  transform: 'scale(1,1)',\n                  opacity: 1,\n                  transformOrigin: 'center center'\n                },\n                duration: 0,\n                timingFunction: 'linear',\n                delay: 0\n              })\n            }\n          )\n        }, 100)\n      }\n    }\n  },\n  beforeDestroy() {\n    clearTimeout(timer)\n  }\n}\n</script>\n\n<style scoped>\n.wrapper {\n  /* width: 750px; */\n  background-color: #ffffff;\n  box-shadow: 0 -1px 5px 0 rgba(0, 0, 0, 0.05);\n}\n.top-border {\n  border-top-style: solid;\n  border-top-width: 1px;\n  border-top-color: #e5e5e8;\n}\n.tab-bar-list {\n  flex-direction: row;\n  justify-content: space-around;\n  /* background-color: #ffffff; */\n  padding: 12px 10px 16px;\n}\n.mutil-tab-bar-container {\n  flex-direction: row;\n  align-items: center;\n}\n.mutil-tab-bar-item {\n  align-items: center;\n  opacity: 1;\n}\n.is-launch {\n  height: 96px;\n  border-radius: 48px;\n  background-color: #ffffff;\n  /* flex: 1; */\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  /* width: 306px; */\n}\n.is-launch-text {\n  text-align: center;\n  font-family: PingFangSC-Medium;\n  font-size: 32px;\n  color: #ffffff;\n}\n.tab-bar-item {\n  /* flex: 1; */\n  align-items: center;\n  opacity: 1;\n}\n.tab-bar-item-disabled {\n  opacity: 0.3;\n}\n.icon-wrapper {\n  flex: 1;\n  /* border-width:\n1px; */\n}\n.mutil-icon-wrapper {\n  width: 110px;\n}\n.icon-container {\n  /* width: 110px; */\n  height: 110px;\n  border-radius: 55px;\n  justify-content: center;\n  align-items: center;\n  background-color: #ffffff;\n  position: relative;\n}\n.dot-triangle {\n  position: absolute;\n  right: 7px;\n  top: 83px;\n  width: 20px;\n  height: 18px;\n  /* background-color: #267aff; */\n  /* opacity: 0.5; */\n}\n.icon-inner-container {\n  /* width: 96px; */\n  height: 96px;\n  border-radius: 48px;\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  overflow: hidden;\n}\n.mask {\n  position: absolute;\n  top: 7px;\n  left: 7px;\n  height: 96px;\n  border-radius: 48px;\n}\n.mask:active {\n  background-color: rgba(255, 255, 255, 0.1);\n}\n.animate-circle {\n  position: absolute;\n  /* width: 96px; */\n  /* 比icon-inner-container少两个像素，解决安卓毛边 */\n  height: 94px;\n  border-radius: 47px;\n  background-color: #e5e5e8;\n}\n.tab-bar-item-icon {\n  width: 96px;\n  height: 96px;\n}\n.tab-bar-item-loading {\n  width: 48px;\n  height: 48px;\n}\n.tab-bar-item-icon-text {\n  font-family: PingFangSC-Medium;\n  font-size: 28px; /* color: #ffffff; */\n  letter-spacing: 0;\n  text-align: center;\n  line-height: 28px;\n}\n.tab-bar-item-title {\n  padding-top: 9px;\n}\n.tab-bar-item-title-text {\n  font-family: PingFangSC-Regular;\n  color: #232323;\n  letter-spacing: 0;\n  text-align: center;\n  font-size: 24px;\n  /* height: 24px; */\n  /* line-height: 24px; */\n}\n.line-wrapper {\n  height: 68px;\n  flex-direction: row;\n  justify-content: center;\n  background-color: #ffffff;\n}\n.line {\n  width: 268px;\n  height: 10px;\n  background-color: #000000;\n  opacity: 0.1;\n  border-radius: 5px;\n  margin-top: 42px;\n}\n</style>\n<style scoped src=\"./colmo.css\"></style>\n"],"sourceRoot":""}]);
 
 // exports
 
@@ -9409,7 +9409,7 @@ exports = module.exports = __webpack_require__(0)(true);
 
 
 // module
-exports.push([module.i, "\n.step-body[data-v-c2751e36] {\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n    -webkit-flex-direction: column;\n            flex-direction: column;\n    -webkit-box-pack: center;\n    -webkit-justify-content: center;\n            justify-content: center;\n    -webkit-box-align: stretch;\n    -webkit-align-items: stretch;\n            align-items: stretch;\n    overflow: hidden;\n}\n.step-flow-wrapper[data-v-c2751e36] {\n    position: absolute;\n    left: 0;\n    right: 0;\n    top: 0;\n    height: 0.21333rem;\n    -webkit-box-orient: horizontal;\n    -webkit-box-direction: normal;\n    -webkit-flex-direction: row;\n            flex-direction: row;\n    -webkit-box-pack: start;\n    -webkit-justify-content: flex-start;\n            justify-content: flex-start;\n    -webkit-box-align: center;\n    -webkit-align-items: center;\n            align-items: center;\n    overflow: hidden;\n}\n.step-line[data-v-c2751e36] {\n    width: 0px;\n    height: 0.02667rem;\n    border-top-color: #e5e5e8;\n    border-top-width: 0.02667rem;\n    border-top-style: solid;\n    margin-left: 0.10667rem;\n    margin-right: 0.10667rem;\n}\n.hline[data-v-c2751e36]{\n    border-top-width: 0.05333rem;\n}\n.step-item-wrapper[data-v-c2751e36] {\n    -webkit-box-orient: horizontal;\n    -webkit-box-direction: normal;\n    -webkit-flex-direction: row;\n            flex-direction: row;\n    -webkit-box-pack: justify;\n    -webkit-justify-content: space-between;\n            justify-content: space-between;\n    -webkit-box-align: start;\n    -webkit-align-items: flex-start;\n            align-items: flex-start;\n}\n.step-item[data-v-c2751e36] {\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n    -webkit-flex-direction: column;\n            flex-direction: column;\n    -webkit-box-pack: start;\n    -webkit-justify-content: flex-start;\n            justify-content: flex-start;\n    -webkit-box-align: center;\n    -webkit-align-items: center;\n            align-items: center;\n    overflow: hidden;\n    word-wrap: break-word;\n    word-break: break-all;\n    padding-left: 0.10667rem;\n    padding-right: 0.10667rem;\n}\n.step-point[data-v-c2751e36] {\n    width: 0.21333rem;\n    height: 0.21333rem;\n    background-color: #c7c7cc;\n    border-radius: 0.42667rem;\n}\n.step-desc[data-v-c2751e36] {\n    padding-top: 0.26667rem;\n    font-family: PingFangSC-Regular;\n    font-size: 0.34667rem;\n    color: #8a8a8f;\n    text-align: center;\n}\n.active-step[data-v-c2751e36] {\n    color: #000000;\n}\n", "", {"version":3,"sources":["/Users/wuhm45/Documents/code/weex组件库/dolphin-weex-ui/packages/dof-step-flow-h/index.vue?35803ca3"],"names":[],"mappings":";AAmJA;IACA,6BAAA;IAAA,8BAAA;IAAA,+BAAA;YAAA,uBAAA;IACA,yBAAA;IAAA,gCAAA;YAAA,wBAAA;IACA,2BAAA;IAAA,6BAAA;YAAA,qBAAA;IACA,iBAAA;CACA;AACA;IACA,mBAAA;IACA,QAAA;IACA,SAAA;IACA,OAAA;IACA,mBAAA;IACA,+BAAA;IAAA,8BAAA;IAAA,4BAAA;YAAA,oBAAA;IACA,wBAAA;IAAA,oCAAA;YAAA,4BAAA;IACA,0BAAA;IAAA,4BAAA;YAAA,oBAAA;IACA,iBAAA;CACA;AACA;IACA,WAAA;IACA,mBAAA;IACA,0BAAA;IACA,6BAAA;IACA,wBAAA;IACA,wBAAA;IACA,yBAAA;CACA;AAEA;IACA,6BAAA;CACA;AACA;IACA,+BAAA;IAAA,8BAAA;IAAA,4BAAA;YAAA,oBAAA;IACA,0BAAA;IAAA,uCAAA;YAAA,+BAAA;IACA,yBAAA;IAAA,gCAAA;YAAA,wBAAA;CACA;AACA;IACA,6BAAA;IAAA,8BAAA;IAAA,+BAAA;YAAA,uBAAA;IACA,wBAAA;IAAA,oCAAA;YAAA,4BAAA;IACA,0BAAA;IAAA,4BAAA;YAAA,oBAAA;IACA,iBAAA;IACA,sBAAA;IACA,sBAAA;IACA,yBAAA;IACA,0BAAA;CACA;AACA;IACA,kBAAA;IACA,mBAAA;IACA,0BAAA;IACA,0BAAA;CACA;AACA;IACA,wBAAA;IACA,gCAAA;IACA,sBAAA;IACA,eAAA;IACA,mBAAA;CACA;AACA;IACA,eAAA;CACA","file":"index.vue","sourcesContent":["<template>\n    <div class=\"step-body\">\n        <div class=\"step-item-wrapper\" :style=\"[rowStyles]\" ref=\"wrapper\">\n            <div class=\"step-flow-wrapper\">\n                <template v-for=\"(item, index) in formattedList\">\n                    <div v-if=\"index < formattedList.length-1\" :class=\"['step-line', showLine&&'hline']\" :key=\"'line'+index\" :style=\"[item.lineStyles, linePos[index]]\"></div>\n                </template>\n            </div>\n            <div v-for=\"(item, index) in formattedList\" :key=\"'desc'+index\" class=\"step-item\" :ref=\"'item'+index\" :style=\"[item.columnStyles]\">\n                <div :class=\"['step-point']\" :style=\"[item.pointStyles]\" :ref=\"'point'+index\"></div>\n                <text :class=\"['step-desc']\" :style=\"[item.descStyles]\">{{item.desc}}</text>\n            </div>\n        </div>\n    </div>\n</template>\n\n<script>\nconst domModule = weex.requireModule('dom')\nexport default {\n    props: {\n        list: {\n            type: Array,\n            default: ()=>[]\n        },\n        stylesConfig: {\n            type: Object,\n            default: function () {\n                return {\n                }\n            }\n        },\n        showLine:{\n            type: Boolean,\n            default: false\n        }\n    },\n    data() {\n        return {\n            componentWidth: 750,\n            activeIndex: -1,\n            linePos: []\n        }\n    },\n    watch: {\n        list(newVal) {\n            this.$nextTick(() => {\n                setTimeout(() => {\n                    this.init()\n                }, 100);\n            })\n        }\n    },\n    computed: {\n        formattedList() {\n            return this.formatList(this.list)\n        },\n        rowStyles() {\n            const {\n                rowStyles = {}\n            } = this.stylesConfig\n\n            //处理行\n            return { ...rowStyles }\n        }\n    },\n    methods: {\n        init() {\n            this.list.forEach((item) => {\n                this.linePos.push({ width: 0 })\n            })\n            // 确定第一条线的左边距离\n            if (this.linePos.length > 0) {\n                domModule.getComponentRect(this.$refs['item0'][0], (data) => {\n                    this.linePos[0]['margin-left'] = (data.size.width / 2) + 8\n                })\n            }\n            this.list.forEach((item, index, arr) => {\n                // 确定条线的宽度\n                domModule.getComponentRect(this.$refs['point' + index][0], (data) => {\n                    if (index == 0) {\n                        this.linePos[index]['data-right'] = data.size.right\n                    } else {\n                        this.linePos[index]['data-right'] = data.size.right\n                        this.linePos[index - 1]['width'] = data.size.left - this.linePos[index - 1]['data-right']\n                    }\n                })\n            })\n        },\n        formatList(list) {\n            let tempList = JSON.parse(JSON.stringify(list))\n            const {\n                activedColor = '#00de51',\n                pointStyles = {},\n                lineStyles = {},\n                descStyles = {},\n                columnStyles = {}\n            } = this.stylesConfig\n\n            tempList.forEach((item, index) => {\n                if (item.isActived) this.activeIndex = index\n            })\n\n            let result = []\n            result = tempList.map((item, index) => {\n                //处理列\n                item['columnStyles'] = { ...item['columnStyles'], ...columnStyles }\n\n                //处理节点point\n                item['pointStyles'] = { ...item['pointStyles'], ...pointStyles }\n\n                if (index <= this.activeIndex) {\n                    item['pointStyles']['background-color'] = activedColor\n                    item['pointStyles']['opacity'] = 1\n                }\n\n                //处理节点线条\n                item['lineStyles'] = { ...item['lineStyles'], ...lineStyles }\n                if (index < this.activeIndex) {\n                    item['lineStyles']['border-top-color'] = activedColor\n                    item['lineStyles']['opacity'] = 1\n                }\n\n                //处理内容\n                item['descStyles'] = { ...item['descStyles'], ...descStyles }\n                if (item.isActived && activedColor) {\n                    item['descStyles']['color'] = activedColor\n                    item['descStyles']['opacity'] = 1\n                }\n\n                return item\n            })\n\n            console.log(JSON.stringify(result))\n            return result\n        }\n    },\n    mounted() {\n        this.$nextTick(() => {\n            setTimeout(() => {\n                this.init()\n            }, 100);\n        })\n    }\n}\n</script>\n\n<style scoped>\n.step-body {\n    flex-direction: column;\n    justify-content: center;\n    align-items: stretch;\n    overflow: hidden;\n}\n.step-flow-wrapper {\n    position: absolute;\n    left: 0;\n    right: 0;\n    top: 0;\n    height: 16px;\n    flex-direction: row;\n    justify-content: flex-start;\n    align-items: center;\n    overflow: hidden;\n}\n.step-line {\n    width: 0px;\n    height: 2px;\n    border-top-color: #e5e5e8;\n    border-top-width: 2px;\n    border-top-style: solid;\n    margin-left: 8px;\n    margin-right: 8px;\n}\n\n.hline{\n    border-top-width: 4px;\n}\n.step-item-wrapper {\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: flex-start;\n}\n.step-item {\n    flex-direction: column;\n    justify-content: flex-start;\n    align-items: center;\n    overflow: hidden;\n    word-wrap: break-word;\n    word-break: break-all;\n    padding-left: 8px;\n    padding-right: 8px;\n}\n.step-point {\n    width: 16px;\n    height: 16px;\n    background-color: #c7c7cc;\n    border-radius: 32px;\n}\n.step-desc {\n    padding-top: 20px;\n    font-family: PingFangSC-Regular;\n    font-size: 26px;\n    color: #8a8a8f;\n    text-align: center;\n}\n.active-step {\n    color: #000000;\n}\n</style>\n"],"sourceRoot":""}]);
+exports.push([module.i, "\n.step-body[data-v-c2751e36] {\n  -webkit-box-orient: vertical;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: column;\n          flex-direction: column;\n  -webkit-box-pack: center;\n  -webkit-justify-content: center;\n          justify-content: center;\n  -webkit-box-align: stretch;\n  -webkit-align-items: stretch;\n          align-items: stretch;\n  overflow: hidden;\n}\n.step-flow-wrapper[data-v-c2751e36] {\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  height: 0.21333rem;\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: row;\n          flex-direction: row;\n  -webkit-box-pack: start;\n  -webkit-justify-content: flex-start;\n          justify-content: flex-start;\n  -webkit-box-align: center;\n  -webkit-align-items: center;\n          align-items: center;\n  overflow: hidden;\n}\n.step-line[data-v-c2751e36] {\n  width: 0px;\n  height: 0.02667rem;\n  border-top-color: #e5e5e8;\n  border-top-width: 0.02667rem;\n  border-top-style: solid;\n  margin-left: 0.10667rem;\n  margin-right: 0.10667rem;\n}\n.hline[data-v-c2751e36] {\n  border-top-width: 0.05333rem;\n}\n.step-item-wrapper[data-v-c2751e36] {\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: row;\n          flex-direction: row;\n  -webkit-box-pack: justify;\n  -webkit-justify-content: space-between;\n          justify-content: space-between;\n  -webkit-box-align: start;\n  -webkit-align-items: flex-start;\n          align-items: flex-start;\n}\n.step-item[data-v-c2751e36] {\n  -webkit-box-orient: vertical;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: column;\n          flex-direction: column;\n  -webkit-box-pack: start;\n  -webkit-justify-content: flex-start;\n          justify-content: flex-start;\n  -webkit-box-align: center;\n  -webkit-align-items: center;\n          align-items: center;\n  overflow: hidden;\n  word-wrap: break-word;\n  word-break: break-all;\n  padding-left: 0.10667rem;\n  padding-right: 0.10667rem;\n}\n.step-point[data-v-c2751e36] {\n  width: 0.21333rem;\n  height: 0.21333rem;\n  background-color: #c7c7cc;\n  border-radius: 0.42667rem;\n}\n.step-desc[data-v-c2751e36] {\n  padding-top: 0.26667rem;\n  font-family: PingFangSC-Regular;\n  font-size: 0.34667rem;\n  color: #8a8a8f;\n  text-align: center;\n}\n.active-step[data-v-c2751e36] {\n  color: #000000;\n}\n", "", {"version":3,"sources":["/Users/wuhm45/Documents/code/weex组件库/dolphin-weex-ui/packages/dof-step-flow-h/index.vue?8ff10b22"],"names":[],"mappings":";AA2JA;EACA,6BAAA;EAAA,8BAAA;EAAA,+BAAA;UAAA,uBAAA;EACA,yBAAA;EAAA,gCAAA;UAAA,wBAAA;EACA,2BAAA;EAAA,6BAAA;UAAA,qBAAA;EACA,iBAAA;CACA;AACA;EACA,mBAAA;EACA,QAAA;EACA,SAAA;EACA,OAAA;EACA,mBAAA;EACA,+BAAA;EAAA,8BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,wBAAA;EAAA,oCAAA;UAAA,4BAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,iBAAA;CACA;AACA;EACA,WAAA;EACA,mBAAA;EACA,0BAAA;EACA,6BAAA;EACA,wBAAA;EACA,wBAAA;EACA,yBAAA;CACA;AAEA;EACA,6BAAA;CACA;AACA;EACA,+BAAA;EAAA,8BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,0BAAA;EAAA,uCAAA;UAAA,+BAAA;EACA,yBAAA;EAAA,gCAAA;UAAA,wBAAA;CACA;AACA;EACA,6BAAA;EAAA,8BAAA;EAAA,+BAAA;UAAA,uBAAA;EACA,wBAAA;EAAA,oCAAA;UAAA,4BAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,iBAAA;EACA,sBAAA;EACA,sBAAA;EACA,yBAAA;EACA,0BAAA;CACA;AACA;EACA,kBAAA;EACA,mBAAA;EACA,0BAAA;EACA,0BAAA;CACA;AACA;EACA,wBAAA;EACA,gCAAA;EACA,sBAAA;EACA,eAAA;EACA,mBAAA;CACA;AACA;EACA,eAAA;CACA","file":"index.vue","sourcesContent":["<template>\n  <div class=\"step-body\">\n    <div class=\"step-item-wrapper\" :style=\"[rowStyles]\" ref=\"wrapper\">\n      <div class=\"step-flow-wrapper\">\n        <template v-for=\"(item, index) in formattedList\">\n          <div\n            v-if=\"index < formattedList.length - 1\"\n            :class=\"['step-line', showLine && 'hline']\"\n            :key=\"'line' + index\"\n            :style=\"Object.assign(item.lineStyles, linePos[index])\"\n          ></div>\n        </template>\n      </div>\n      <div\n        v-for=\"(item, index) in formattedList\"\n        :key=\"'desc' + index\"\n        class=\"step-item\"\n        :ref=\"'item' + index\"\n        :style=\"[item.columnStyles]\"\n      >\n        <div :class=\"['step-point']\" :style=\"[item.pointStyles]\" :ref=\"'point' + index\"></div>\n        <text :class=\"['step-desc']\" :style=\"[item.descStyles]\">{{ item.desc }}</text>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nconst domModule = weex.requireModule('dom')\nexport default {\n  props: {\n    list: {\n      type: Array,\n      default: () => []\n    },\n    stylesConfig: {\n      type: Object,\n      default: function() {\n        return {}\n      }\n    },\n    showLine: {\n      type: Boolean,\n      default: false\n    }\n  },\n  data() {\n    return {\n      componentWidth: 750,\n      activeIndex: -1,\n      linePos: []\n    }\n  },\n  watch: {\n    list(newVal) {\n      this.$nextTick(() => {\n        setTimeout(() => {\n          this.init()\n        }, 100)\n      })\n    }\n  },\n  computed: {\n    formattedList() {\n      let formattedList = this.formatList(this.list)\n      return formattedList\n    },\n    rowStyles() {\n      const { rowStyles = {} } = this.stylesConfig\n\n      //处理行\n      return { ...rowStyles }\n    }\n  },\n  methods: {\n    init() {\n      this.list.forEach(item => {\n        this.linePos.push({ width: 0 })\n      })\n      // 确定第一条线的左边距离\n      if (this.linePos.length > 0) {\n        domModule.getComponentRect(this.$refs['item0'][0], data => {\n          this.linePos[0]['margin-left'] = data.size.width / 2 + 8 + 'px'\n        })\n      }\n      this.list.forEach((item, index, arr) => {\n        // 确定条线的宽度\n        domModule.getComponentRect(this.$refs['point' + index][0], data => {\n          if (index == 0) {\n            this.linePos[index]['data-right'] = data.size.right\n          } else {\n            this.linePos[index]['data-right'] = data.size.right\n            this.linePos[index - 1]['width'] = data.size.left - this.linePos[index - 1]['data-right'] + 'px'\n          }\n        })\n      })\n    },\n    formatList(list) {\n      let tempList = JSON.parse(JSON.stringify(list))\n      const {\n        activedColor = '#00de51',\n        pointStyles = {},\n        lineStyles = {},\n        descStyles = {},\n        columnStyles = {}\n      } = this.stylesConfig\n\n      tempList.forEach((item, index) => {\n        if (item.isActived) this.activeIndex = index\n      })\n\n      let result = []\n      result = tempList.map((item, index) => {\n        //处理列\n        item['columnStyles'] = { ...item['columnStyles'], ...columnStyles }\n\n        //处理节点point\n        item['pointStyles'] = { ...item['pointStyles'], ...pointStyles }\n\n        if (index <= this.activeIndex) {\n          item['pointStyles']['background-color'] = activedColor\n          item['pointStyles']['opacity'] = 1\n        }\n\n        //处理节点线条\n        item['lineStyles'] = { ...item['lineStyles'], ...lineStyles }\n        if (index < this.activeIndex) {\n          item['lineStyles']['border-top-color'] = activedColor\n          item['lineStyles']['opacity'] = 1\n        }\n\n        //处理内容\n        item['descStyles'] = { ...item['descStyles'], ...descStyles }\n        if (item.isActived && activedColor) {\n          item['descStyles']['color'] = activedColor\n          item['descStyles']['opacity'] = 1\n        }\n\n        return item\n      })\n\n      return result\n    }\n  },\n  mounted() {\n    this.$nextTick(() => {\n      setTimeout(() => {\n        this.init()\n      }, 100)\n    })\n  }\n}\n</script>\n\n<style scoped>\n.step-body {\n  flex-direction: column;\n  justify-content: center;\n  align-items: stretch;\n  overflow: hidden;\n}\n.step-flow-wrapper {\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  height: 16px;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  overflow: hidden;\n}\n.step-line {\n  width: 0px;\n  height: 2px;\n  border-top-color: #e5e5e8;\n  border-top-width: 2px;\n  border-top-style: solid;\n  margin-left: 8px;\n  margin-right: 8px;\n}\n\n.hline {\n  border-top-width: 4px;\n}\n.step-item-wrapper {\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: flex-start;\n}\n.step-item {\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: center;\n  overflow: hidden;\n  word-wrap: break-word;\n  word-break: break-all;\n  padding-left: 8px;\n  padding-right: 8px;\n}\n.step-point {\n  width: 16px;\n  height: 16px;\n  background-color: #c7c7cc;\n  border-radius: 32px;\n}\n.step-desc {\n  padding-top: 20px;\n  font-family: PingFangSC-Regular;\n  font-size: 26px;\n  color: #8a8a8f;\n  text-align: center;\n}\n.active-step {\n  color: #000000;\n}\n</style>\n"],"sourceRoot":""}]);
 
 // exports
 
@@ -9423,7 +9423,7 @@ exports = module.exports = __webpack_require__(0)(true);
 
 
 // module
-exports.push([module.i, "\n.indicator {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 0.66667rem;\n  item-color: rgba(255, 255, 255, 0.5);\n  item-selectedcolor: rgba(255, 255, 255, 1);\n  item-size: 0.18667rem;\n}\n.indicator .weex-indicator-item {\n  width: 0.18667rem;\n  height: 0.18667rem;\n}\n.indicator .weex-indicator-item {\n  background-color: rgba(255, 255, 255, 0.5);\n}\n.slider {\n  /* background-color: #f2f2f2; */\n  /* margin-left: 32px; */\n  border-radius: 0.21333rem;\n}\n.image {\n  border-radius: 0.21333rem;\n  background-color: #f2f2f2;\n}\n.div_out {\n  border-radius: 0.21333rem;\n  position: relative;\n}\n", "", {"version":3,"sources":["/Users/wuhm45/Documents/code/weex组件库/dolphin-weex-ui/packages/dof-swiper/index.vue?f583422e","/Users/wuhm45/Documents/code/weex组件库/dolphin-weex-ui/packages/dof-swiper/<input css 12>","/Users/wuhm45/Documents/code/weex组件库/dolphin-weex-ui/packages/dof-swiper/<input css 11>"],"names":[],"mappings":";AAiCA;EACA,mBAAA;EACA,UAAA;EACA,QAAA;EACA,SAAA;EACA,mBAAA;EACA,qCAAA;EACA,2CAAA;EACA,sBAAA;CACA;ACzCA;EACE,kBAAY;EACZ,mBAAa;CACd;ACHD;EACE,2CAA2C;CAC5C;AFwCD;EACA,gCAAA;EACA,wBAAA;EACA,0BAAA;CACA;AACA;EACA,0BAAA;EACA,0BAAA;CACA;AACA;EACA,0BAAA;EACA,mBAAA;CACA","file":"index.vue","sourcesContent":["<template>\n  <div :style=\"{ marginLeft: divLeft, width: imgWidth }\" class=\"div_out\">\n    <slider\n      class=\"slider\"\n      :style=\"sliderStyle\"\n      :interval=\"interval\"\n      @change=\"change\"\n      :auto-play=\"autoplay\"\n      :infinite=\"infinite\"\n    >\n      <div v-for=\"(item, index) in slItems\" :key=\"index\" @click=\"imgClicked(item, index)\">\n        <image\n          :resize=\"imgResize\"\n          :style=\"{ width: imgWidth, height: imgHeight }\"\n          :src=\"item.url\"\n          :placeholder=\"phImgUrl\"\n          class=\"image\"\n        >\n        </image>\n      </div>\n      <indicator class=\"indicator\" :style=\"indicatorStyle\" v-if=\"showIndicator && !_isColmo\"></indicator>\n    </slider>\n    <div class=\"indicator-box\" v-if=\"showIndicator && _isColmo\">\n      <div\n        :class=\"['indicator-item', i === slItems.length - 1 && 'isLast', i == active && 'active']\"\n        v-for=\"(item, i) in slItems\"\n        :key=\"i\"\n      ></div>\n    </div>\n  </div>\n</template>\n\n<style>\n.indicator {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 50px;\n  item-color: rgba(255, 255, 255, 0.5);\n  item-selectedcolor: rgba(255, 255, 255, 1);\n  item-size: 14px;\n}\n.slider {\n  /* background-color: #f2f2f2; */\n  /* margin-left: 32px; */\n  border-radius: 16px;\n}\n.image {\n  border-radius: 16px;\n  background-color: #f2f2f2;\n}\n.div_out {\n  border-radius: 16px;\n  position: relative;\n}\n</style>\n<style scoped src=\"./colmo.css\"></style>\n\n<script>\nconst icon = require('../setting/icon.base64')\nvar PLACEHOLDERIMAGE = icon['ic_img_null@2x']\nconst modal = weex.requireModule('modal')\nimport ColmoMixin from '../../mixins/colmo'\n\nexport default {\n  mixins: [ColmoMixin],\n  props: {\n    sliderStyle: {\n      type: Object,\n      default: () => ({\n        width: '686px',\n        height: '280px',\n        position: 'relative'\n      })\n    },\n    indicatorStyle: {\n      type: Object,\n      default: () => ({})\n    },\n    items: {\n      type: Array,\n      default: () => []\n    },\n    interval: {\n      type: Number,\n      default: 3000\n    },\n    autoplay: {\n      type: Boolean,\n      default: true\n    },\n    infinite: {\n      type: Boolean,\n      default: true\n    },\n    imgResize: {\n      type: String,\n      default: 'cover'\n    },\n    imgWidth: {\n      type: String,\n      default: '686px'\n    },\n    divLeft: {\n      type: String,\n      default: '32px'\n    },\n    imgHeight: {\n      type: String,\n      default: '280px'\n    },\n    showIndicator: {\n      type: Boolean,\n      default: true\n    },\n    phImgUrl: {\n      type: String,\n      default: PLACEHOLDERIMAGE\n    }\n  },\n  data: function() {\n    return {\n      slItems: [],\n      active: 0\n    }\n  },\n  created() {\n    if (this.items.length > 10) {\n      this.slItems.splice(0)\n      this.slItems = this.items.slice(0, 10)\n    } else if (this.items.length <= 10) {\n      this.slItems.splice(0)\n      this.slItems = this.items.slice(0)\n    }\n  },\n  methods: {\n    imgClicked(target, index) {\n      this.$emit('dofSwiperClicked', { target, index })\n    },\n    change(val) {\n      this.active = val.index\n    }\n  }\n}\n</script>\n","\n.indicator .weex-indicator-item {\n  width: 14px;\n  height: 14px;\n}","\n.indicator .weex-indicator-item {\n  background-color: rgba(255, 255, 255, 0.5);\n}"],"sourceRoot":""}]);
+exports.push([module.i, "\n.indicator {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 0.66667rem;\n  item-color: rgba(255, 255, 255, 0.5);\n  item-selectedcolor: rgba(255, 255, 255, 1);\n  item-size: 0.18667rem;\n}\n.indicator .weex-indicator-item {\n  width: 0.18667rem;\n  height: 0.18667rem;\n}\n.indicator .weex-indicator-item {\n  background-color: rgba(255, 255, 255, 0.5);\n}\n.slider {\n  /* background-color: #f2f2f2; */\n  /* margin-left: 32px; */\n  border-radius: 0.21333rem;\n}\n.image {\n  border-radius: 0.21333rem;\n  background-color: #f2f2f2;\n}\n.div_out {\n  border-radius: 0.21333rem;\n  position: relative;\n}\n", "", {"version":3,"sources":["/Users/wuhm45/Documents/code/weex组件库/dolphin-weex-ui/packages/dof-swiper/index.vue?f583422e","/Users/wuhm45/Documents/code/weex组件库/dolphin-weex-ui/packages/dof-swiper/<input css 15>","/Users/wuhm45/Documents/code/weex组件库/dolphin-weex-ui/packages/dof-swiper/<input css 14>"],"names":[],"mappings":";AAiCA;EACA,mBAAA;EACA,UAAA;EACA,QAAA;EACA,SAAA;EACA,mBAAA;EACA,qCAAA;EACA,2CAAA;EACA,sBAAA;CACA;ACzCA;EACE,kBAAY;EACZ,mBAAa;CACd;ACHD;EACE,2CAA2C;CAC5C;AFwCD;EACA,gCAAA;EACA,wBAAA;EACA,0BAAA;CACA;AACA;EACA,0BAAA;EACA,0BAAA;CACA;AACA;EACA,0BAAA;EACA,mBAAA;CACA","file":"index.vue","sourcesContent":["<template>\n  <div :style=\"{ marginLeft: divLeft, width: imgWidth }\" class=\"div_out\">\n    <slider\n      class=\"slider\"\n      :style=\"sliderStyle\"\n      :interval=\"interval\"\n      @change=\"change\"\n      :auto-play=\"autoplay\"\n      :infinite=\"infinite\"\n    >\n      <div v-for=\"(item, index) in slItems\" :key=\"index\" @click=\"imgClicked(item, index)\">\n        <image\n          :resize=\"imgResize\"\n          :style=\"{ width: imgWidth, height: imgHeight }\"\n          :src=\"item.url\"\n          :placeholder=\"phImgUrl\"\n          class=\"image\"\n        >\n        </image>\n      </div>\n      <indicator class=\"indicator\" :style=\"indicatorStyle\" v-if=\"showIndicator && !_isColmo\"></indicator>\n    </slider>\n    <div class=\"indicator-box\" v-if=\"showIndicator && _isColmo\">\n      <div\n        :class=\"['indicator-item', i === slItems.length - 1 && 'isLast', i == active && 'active']\"\n        v-for=\"(item, i) in slItems\"\n        :key=\"i\"\n      ></div>\n    </div>\n  </div>\n</template>\n\n<style>\n.indicator {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 50px;\n  item-color: rgba(255, 255, 255, 0.5);\n  item-selectedcolor: rgba(255, 255, 255, 1);\n  item-size: 14px;\n}\n.slider {\n  /* background-color: #f2f2f2; */\n  /* margin-left: 32px; */\n  border-radius: 16px;\n}\n.image {\n  border-radius: 16px;\n  background-color: #f2f2f2;\n}\n.div_out {\n  border-radius: 16px;\n  position: relative;\n}\n</style>\n<style scoped src=\"./colmo.css\"></style>\n\n<script>\nconst icon = require('../setting/icon.base64')\nvar PLACEHOLDERIMAGE = icon['ic_img_null@2x']\nconst modal = weex.requireModule('modal')\nimport ColmoMixin from '../../mixins/colmo'\n\nexport default {\n  mixins: [ColmoMixin],\n  props: {\n    sliderStyle: {\n      type: Object,\n      default: () => ({\n        width: '686px',\n        height: '280px',\n        position: 'relative'\n      })\n    },\n    indicatorStyle: {\n      type: Object,\n      default: () => ({})\n    },\n    items: {\n      type: Array,\n      default: () => []\n    },\n    interval: {\n      type: Number,\n      default: 3000\n    },\n    autoplay: {\n      type: Boolean,\n      default: true\n    },\n    infinite: {\n      type: Boolean,\n      default: true\n    },\n    imgResize: {\n      type: String,\n      default: 'cover'\n    },\n    imgWidth: {\n      type: String,\n      default: '686px'\n    },\n    divLeft: {\n      type: String,\n      default: '32px'\n    },\n    imgHeight: {\n      type: String,\n      default: '280px'\n    },\n    showIndicator: {\n      type: Boolean,\n      default: true\n    },\n    phImgUrl: {\n      type: String,\n      default: PLACEHOLDERIMAGE\n    }\n  },\n  data: function() {\n    return {\n      slItems: [],\n      active: 0\n    }\n  },\n  created() {\n    if (this.items.length > 10) {\n      this.slItems.splice(0)\n      this.slItems = this.items.slice(0, 10)\n    } else if (this.items.length <= 10) {\n      this.slItems.splice(0)\n      this.slItems = this.items.slice(0)\n    }\n  },\n  methods: {\n    imgClicked(target, index) {\n      this.$emit('dofSwiperClicked', { target, index })\n    },\n    change(val) {\n      this.active = val.index\n    }\n  }\n}\n</script>\n","\n.indicator .weex-indicator-item {\n  width: 14px;\n  height: 14px;\n}","\n.indicator .weex-indicator-item {\n  background-color: rgba(255, 255, 255, 0.5);\n}"],"sourceRoot":""}]);
 
 // exports
 
@@ -10119,7 +10119,9 @@ exports.default = {
     },
     defaultBtnStyle: {
       type: Object,
-      default: function _default() {}
+      default: function _default() {
+        return {};
+      }
     },
     itemStyle: {
       type: Object,
@@ -12429,6 +12431,8 @@ exports.default = {
           width: '112px',
           height: '112px',
           borderRadius: '56px',
+          marginTop: this._isColmo ? '0px' : '16px',
+          marginBottom: this._isColmo ? '0px' : '16px',
           backgroundColor: iconColor ? iconColor : 'transparent'
         };
       } else if (iconSize === 'medium') {
@@ -12436,6 +12440,8 @@ exports.default = {
           width: '76px',
           height: '76px',
           borderRadius: '38px',
+          marginTop: this._isColmo ? '0px' : '40px',
+          marginBottom: this._isColmo ? '0px' : '40px',
           backgroundColor: iconColor ? iconColor : 'transparent'
         };
       } else if (iconSize === 'min') {
@@ -12443,6 +12449,8 @@ exports.default = {
           width: '40px',
           height: '40px',
           borderRadius: '20px',
+          marginTop: this._isColmo ? '0px' : '32px',
+          marginBottom: this._isColmo ? '0px' : '32px',
           backgroundColor: iconColor ? iconColor : 'transparent'
         };
       } else {
@@ -12450,6 +12458,8 @@ exports.default = {
           width: '64px',
           height: '64px',
           borderRadius: '32px',
+          marginTop: this._isColmo ? '0px' : '48px',
+          marginBottom: this._isColmo ? '0px' : '48px',
           backgroundColor: iconColor ? iconColor : 'transparent'
         };
       }
@@ -28231,12 +28241,6 @@ var animation = weex.requireModule('animation'); //
 //
 //
 //
-//
-//
-//
-//
-//
-//
 
 var dom = weex.requireModule('dom');
 
@@ -28259,7 +28263,9 @@ exports.default = {
   props: {
     selectRange: {
       type: Array,
-      default: [0, 0]
+      default: function _default() {
+        return [0, 0];
+      }
     },
     length: {
       type: Number,
@@ -28331,7 +28337,8 @@ exports.default = {
   created: function created() {
     if (_utils2.default.env.isWeb()) {
       this.env = 'web';
-      this.DPR = window.devicePixelRatio ? window.devicePixelRatio : 1;
+      // this.DPR = window.devicePixelRatio ? window.devicePixelRatio : 1;
+      this.DPR = 2;
     } else {
       this.DPR = weex.config.env.scale;
     }
@@ -28432,7 +28439,6 @@ exports.default = {
     }
   },
   methods: {
-
     // 更新单选值或最小值
     weexHandler1: function weexHandler1(e) {
       var _this2 = this;
@@ -28538,7 +28544,7 @@ exports.default = {
       if (this.env === 'weex') {
         return;
       }
-      this.startX = e.touch.clientX;
+      this.startX = e.changedTouches[0].pageX;
       this.startDiffX1 = this.diffX1;
       this.startDiffX2 = this.diffX2;
     },
@@ -28547,7 +28553,7 @@ exports.default = {
         return;
       }
 
-      var deltaX = (e.touch.clientX - this.startX) * this.DPR;
+      var deltaX = (e.changedTouches[0].pageX - this.startX) * this.DPR;
       var diff = this.startDiffX1 + deltaX;
 
       var max = this.length;
@@ -28575,7 +28581,7 @@ exports.default = {
         return;
       }
 
-      var deltaX = (e.touch.clientX - this.startX) * this.DPR;
+      var deltaX = (e.changedTouches[0].pageX - this.startX) * this.DPR;
       var diff = this.startDiffX2 + deltaX;
       var min = this.diffX1 + this.minDist;
       var max = this.length;
@@ -30146,7 +30152,7 @@ exports.default = {
 
 
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
 
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
@@ -30167,148 +30173,159 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < argument
 //
 //
 //
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
 
 var domModule = weex.requireModule('dom');
 exports.default = {
-    props: {
-        list: {
-            type: Array,
-            default: function _default() {
-                return [];
-            }
-        },
-        stylesConfig: {
-            type: Object,
-            default: function _default() {
-                return {};
-            }
-        },
-        showLine: {
-            type: Boolean,
-            default: false
-        }
+  props: {
+    list: {
+      type: Array,
+      default: function _default() {
+        return [];
+      }
     },
-    data: function data() {
-        return {
-            componentWidth: 750,
-            activeIndex: -1,
-            linePos: []
-        };
+    stylesConfig: {
+      type: Object,
+      default: function _default() {
+        return {};
+      }
     },
+    showLine: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data: function data() {
+    return {
+      componentWidth: 750,
+      activeIndex: -1,
+      linePos: []
+    };
+  },
 
-    watch: {
-        list: function list(newVal) {
-            var _this = this;
+  watch: {
+    list: function list(newVal) {
+      var _this = this;
 
-            this.$nextTick(function () {
-                setTimeout(function () {
-                    _this.init();
-                }, 100);
-            });
-        }
+      this.$nextTick(function () {
+        setTimeout(function () {
+          _this.init();
+        }, 100);
+      });
+    }
+  },
+  computed: {
+    formattedList: function formattedList() {
+      var formattedList = this.formatList(this.list);
+      return formattedList;
     },
-    computed: {
-        formattedList: function formattedList() {
-            return this.formatList(this.list);
-        },
-        rowStyles: function rowStyles() {
-            var _stylesConfig$rowStyl = this.stylesConfig.rowStyles,
-                rowStyles = _stylesConfig$rowStyl === undefined ? {} : _stylesConfig$rowStyl;
-
-            //处理行
+    rowStyles: function rowStyles() {
+      var _stylesConfig$rowStyl = this.stylesConfig.rowStyles,
+          rowStyles = _stylesConfig$rowStyl === undefined ? {} : _stylesConfig$rowStyl;
 
-            return _extends({}, rowStyles);
-        }
-    },
-    methods: {
-        init: function init() {
-            var _this2 = this;
+      //处理行
 
-            this.list.forEach(function (item) {
-                _this2.linePos.push({ width: 0 });
-            });
-            // 确定第一条线的左边距离
-            if (this.linePos.length > 0) {
-                domModule.getComponentRect(this.$refs['item0'][0], function (data) {
-                    _this2.linePos[0]['margin-left'] = data.size.width / 2 + 8;
-                });
-            }
-            this.list.forEach(function (item, index, arr) {
-                // 确定条线的宽度
-                domModule.getComponentRect(_this2.$refs['point' + index][0], function (data) {
-                    if (index == 0) {
-                        _this2.linePos[index]['data-right'] = data.size.right;
-                    } else {
-                        _this2.linePos[index]['data-right'] = data.size.right;
-                        _this2.linePos[index - 1]['width'] = data.size.left - _this2.linePos[index - 1]['data-right'];
-                    }
-                });
-            });
-        },
-        formatList: function formatList(list) {
-            var _this3 = this;
-
-            var tempList = JSON.parse(JSON.stringify(list));
-            var _stylesConfig = this.stylesConfig,
-                _stylesConfig$actived = _stylesConfig.activedColor,
-                activedColor = _stylesConfig$actived === undefined ? '#00de51' : _stylesConfig$actived,
-                _stylesConfig$pointSt = _stylesConfig.pointStyles,
-                pointStyles = _stylesConfig$pointSt === undefined ? {} : _stylesConfig$pointSt,
-                _stylesConfig$lineSty = _stylesConfig.lineStyles,
-                lineStyles = _stylesConfig$lineSty === undefined ? {} : _stylesConfig$lineSty,
-                _stylesConfig$descSty = _stylesConfig.descStyles,
-                descStyles = _stylesConfig$descSty === undefined ? {} : _stylesConfig$descSty,
-                _stylesConfig$columnS = _stylesConfig.columnStyles,
-                columnStyles = _stylesConfig$columnS === undefined ? {} : _stylesConfig$columnS;
-
-
-            tempList.forEach(function (item, index) {
-                if (item.isActived) _this3.activeIndex = index;
-            });
+      return _extends({}, rowStyles);
+    }
+  },
+  methods: {
+    init: function init() {
+      var _this2 = this;
 
-            var result = [];
-            result = tempList.map(function (item, index) {
-                //处理列
-                item['columnStyles'] = _extends({}, item['columnStyles'], columnStyles);
+      this.list.forEach(function (item) {
+        _this2.linePos.push({ width: 0 });
+      });
+      // 确定第一条线的左边距离
+      if (this.linePos.length > 0) {
+        domModule.getComponentRect(this.$refs['item0'][0], function (data) {
+          _this2.linePos[0]['margin-left'] = data.size.width / 2 + 8 + 'px';
+        });
+      }
+      this.list.forEach(function (item, index, arr) {
+        // 确定条线的宽度
+        domModule.getComponentRect(_this2.$refs['point' + index][0], function (data) {
+          if (index == 0) {
+            _this2.linePos[index]['data-right'] = data.size.right;
+          } else {
+            _this2.linePos[index]['data-right'] = data.size.right;
+            _this2.linePos[index - 1]['width'] = data.size.left - _this2.linePos[index - 1]['data-right'] + 'px';
+          }
+        });
+      });
+    },
+    formatList: function formatList(list) {
+      var _this3 = this;
 
-                //处理节点point
-                item['pointStyles'] = _extends({}, item['pointStyles'], pointStyles);
+      var tempList = JSON.parse(JSON.stringify(list));
+      var _stylesConfig = this.stylesConfig,
+          _stylesConfig$actived = _stylesConfig.activedColor,
+          activedColor = _stylesConfig$actived === undefined ? '#00de51' : _stylesConfig$actived,
+          _stylesConfig$pointSt = _stylesConfig.pointStyles,
+          pointStyles = _stylesConfig$pointSt === undefined ? {} : _stylesConfig$pointSt,
+          _stylesConfig$lineSty = _stylesConfig.lineStyles,
+          lineStyles = _stylesConfig$lineSty === undefined ? {} : _stylesConfig$lineSty,
+          _stylesConfig$descSty = _stylesConfig.descStyles,
+          descStyles = _stylesConfig$descSty === undefined ? {} : _stylesConfig$descSty,
+          _stylesConfig$columnS = _stylesConfig.columnStyles,
+          columnStyles = _stylesConfig$columnS === undefined ? {} : _stylesConfig$columnS;
+
+
+      tempList.forEach(function (item, index) {
+        if (item.isActived) _this3.activeIndex = index;
+      });
 
-                if (index <= _this3.activeIndex) {
-                    item['pointStyles']['background-color'] = activedColor;
-                    item['pointStyles']['opacity'] = 1;
-                }
+      var result = [];
+      result = tempList.map(function (item, index) {
+        //处理列
+        item['columnStyles'] = _extends({}, item['columnStyles'], columnStyles);
 
-                //处理节点线条
-                item['lineStyles'] = _extends({}, item['lineStyles'], lineStyles);
-                if (index < _this3.activeIndex) {
-                    item['lineStyles']['border-top-color'] = activedColor;
-                    item['lineStyles']['opacity'] = 1;
-                }
+        //处理节点point
+        item['pointStyles'] = _extends({}, item['pointStyles'], pointStyles);
 
-                //处理内容
-                item['descStyles'] = _extends({}, item['descStyles'], descStyles);
-                if (item.isActived && activedColor) {
-                    item['descStyles']['color'] = activedColor;
-                    item['descStyles']['opacity'] = 1;
-                }
+        if (index <= _this3.activeIndex) {
+          item['pointStyles']['background-color'] = activedColor;
+          item['pointStyles']['opacity'] = 1;
+        }
 
-                return item;
-            });
+        //处理节点线条
+        item['lineStyles'] = _extends({}, item['lineStyles'], lineStyles);
+        if (index < _this3.activeIndex) {
+          item['lineStyles']['border-top-color'] = activedColor;
+          item['lineStyles']['opacity'] = 1;
+        }
 
-            console.log(JSON.stringify(result));
-            return result;
+        //处理内容
+        item['descStyles'] = _extends({}, item['descStyles'], descStyles);
+        if (item.isActived && activedColor) {
+          item['descStyles']['color'] = activedColor;
+          item['descStyles']['opacity'] = 1;
         }
-    },
-    mounted: function mounted() {
-        var _this4 = this;
 
-        this.$nextTick(function () {
-            setTimeout(function () {
-                _this4.init();
-            }, 100);
-        });
+        return item;
+      });
+
+      return result;
     }
+  },
+  mounted: function mounted() {
+    var _this4 = this;
+
+    this.$nextTick(function () {
+      setTimeout(function () {
+        _this4.init();
+      }, 100);
+    });
+  }
 };
 
 /***/ }),
@@ -33857,13 +33874,13 @@ Object.defineProperty(exports, "__esModule", {
 var STYLE_MAP = exports.STYLE_MAP = {
   primary: {
     default: {
-      backgroundColor: '#267AFF'
+      // backgroundColor: '#267AFF'
     },
     base: {
-      backgroundColor: '#E9F1FF'
+      // backgroundColor: '#E9F1FF'
     },
     plain: {
-      backgroundColor: '#FFFFFF',
+      // backgroundColor: '#FFFFFF',
       borderWidth: '2px',
       borderColor: '#267AFF'
     },
@@ -33874,13 +33891,13 @@ var STYLE_MAP = exports.STYLE_MAP = {
   },
   purple: {
     default: {
-      backgroundColor: '#995EFC'
+      // backgroundColor: '#995EFC'
     },
     base: {
-      backgroundColor: '#EEE6FF'
+      // backgroundColor: '#EEE6FF'
     },
     plain: {
-      backgroundColor: '#FFFFFF',
+      // backgroundColor: '#FFFFFF',
       borderWidth: '2px',
       borderColor: '#995EFC'
     },
@@ -33891,13 +33908,13 @@ var STYLE_MAP = exports.STYLE_MAP = {
   },
   slate: {
     default: {
-      backgroundColor: '#6575FF'
+      // backgroundColor: '#6575FF'
     },
     base: {
-      backgroundColor: '#E6E8FF'
+      // backgroundColor: '#E6E8FF'
     },
     plain: {
-      backgroundColor: '#FFFFFF',
+      // backgroundColor: '#FFFFFF',
       borderWidth: '2px',
       borderColor: '#6575FF'
     },
@@ -33908,13 +33925,13 @@ var STYLE_MAP = exports.STYLE_MAP = {
   },
   aqua: {
     default: {
-      backgroundColor: '#29C3FF'
+      // backgroundColor: '#29C3FF'
     },
     base: {
-      backgroundColor: '#E6F8FF'
+      // backgroundColor: '#E6F8FF'
     },
     plain: {
-      backgroundColor: '#FFFFFF',
+      // backgroundColor: '#FFFFFF',
       borderWidth: '2px',
       borderColor: '#29C3FF'
     },
@@ -33925,13 +33942,13 @@ var STYLE_MAP = exports.STYLE_MAP = {
   },
   turquoise: {
     default: {
-      backgroundColor: '#00CBB8'
+      // backgroundColor: '#00CBB8'
     },
     base: {
-      backgroundColor: '#E6FFFD'
+      // backgroundColor: '#E6FFFD'
     },
     plain: {
-      backgroundColor: '#FFFFFF',
+      // backgroundColor: '#FFFFFF',
       borderWidth: '2px',
       borderColor: '#00CBB8'
     },
@@ -33942,13 +33959,13 @@ var STYLE_MAP = exports.STYLE_MAP = {
   },
   yellow: {
     default: {
-      backgroundColor: '#FFAA10'
+      // backgroundColor: '#FFAA10'
     },
     base: {
-      backgroundColor: '#FFF4E0'
+      // backgroundColor: '#FFF4E0'
     },
     plain: {
-      backgroundColor: '#FFFFFF',
+      // backgroundColor: '#FFFFFF',
       borderWidth: '2px',
       borderColor: '#FFAA10'
     },
@@ -33959,13 +33976,13 @@ var STYLE_MAP = exports.STYLE_MAP = {
   },
   orange: {
     default: {
-      backgroundColor: '#FF8225'
+      // backgroundColor: '#FF8225'
     },
     base: {
-      backgroundColor: '#FFF0E6'
+      // backgroundColor: '#FFF0E6'
     },
     plain: {
-      backgroundColor: '#FFFFFF',
+      // backgroundColor: '#FFFFFF',
       borderWidth: '2px',
       borderColor: '#FF8225'
     },
@@ -33976,13 +33993,13 @@ var STYLE_MAP = exports.STYLE_MAP = {
   },
   tomato: {
     default: {
-      backgroundColor: '#FF6A4C'
+      // backgroundColor: '#FF6A4C'
     },
     base: {
-      backgroundColor: '#FFEaE6'
+      // backgroundColor: '#FFEaE6'
     },
     plain: {
-      backgroundColor: '#FFFFFF',
+      // backgroundColor: '#FFFFFF',
       borderWidth: '2px',
       borderColor: '#FF6A4C'
     },
@@ -33993,13 +34010,13 @@ var STYLE_MAP = exports.STYLE_MAP = {
   },
   gray: {
     default: {
-      backgroundColor: '#7C879B'
+      // backgroundColor: '#7C879B'
     },
     base: {
-      backgroundColor: '#CFD7E6'
+      // backgroundColor: '#CFD7E6'
     },
     plain: {
-      backgroundColor: '#FFFFFF',
+      // backgroundColor: '#FFFFFF',
       borderWidth: '2px',
       borderColor: '#7C879B'
     },
@@ -34044,13 +34061,13 @@ var STYLE_MAP = exports.STYLE_MAP = {
   },
   colmo: {
     default: {
-      backgroundColor: '#B35336'
+      // backgroundColor: '#B35336'
     },
     base: {
-      backgroundColor: '#292c30'
+      // backgroundColor: '#292c30'
     },
     plain: {
-      backgroundColor: 'transparent',
+      // backgroundColor: 'transparent',
       borderWidth: '2px',
       borderColor: '#B35336'
     },
@@ -51375,7 +51392,7 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
       key: 'line' + index,
       staticClass: " weex-ct weex-div",
       class: ['step-line', _vm.showLine && 'hline'],
-      style: ([_vm._px2rem(item.lineStyles, 75), _vm._px2rem(_vm.linePos[index], 75)]),
+      style: (_vm._px2rem(Object.assign(item.lineStyles, _vm.linePos[index]), 75)),
       attrs: {
         "weex-type": "div"
       }