dolphin-weex-ui 2.4.2 → 2.4.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/dist/index.native.js +64 -18
  3. package/dist/index.native.js.map +1 -1
  4. package/dist/index.web.js +74 -26
  5. package/dist/index.web.js.map +1 -1
  6. package/package.json +1 -1
  7. package/packages/dof-actionsheet/index.vue +43 -7
  8. package/packages/dof-bottom-bar/diablo.css +3 -0
  9. package/packages/dof-card/style.js +3 -0
  10. package/packages/dof-checkbox/diablo.css +9 -2
  11. package/packages/dof-checkbox/index.vue +1 -0
  12. package/packages/dof-icon-button/index.vue +1 -1
  13. package/packages/dof-slider/index.vue +2 -2
  14. package/packages/dof-step-action/img.js +2 -2
  15. package/packages/dof-switch/index.vue +2 -2
  16. package/packages/dof-tab-page/index.vue +5 -4
package/dist/index.web.js CHANGED
@@ -7926,7 +7926,7 @@ exports = module.exports = __webpack_require__(0)(true);
7926
7926
 
7927
7927
 
7928
7928
  // module
7929
- exports.push([module.i, "\n.dof-popup[data-v-0beb2564] {\n position: fixed;\n /* width: 750px; */\n overflow: hidden;\n z-index: 1000;\n}\n.title[data-v-0beb2564] {\n padding: 0.4rem;\n text-align: center;\n font-size: 0.37333rem;\n color: #8E969B;\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: #1E2E37; */\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: #616C73;\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?3c41560a"],"names":[],"mappings":";AA0DA;EACA,gBAAA;EACA,mBAAA;EACA,iBAAA;EACA,cAAA;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 z-index: 1000;\n}\n\n.title {\n padding: 30px;\n text-align: center;\n font-size: 28px;\n color: #8E969B;\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: #1E2E37; */\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: #616C73;\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: '#616C73'\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: '#1E2E37' }\n }\n }\n}\n</script>\n"],"sourceRoot":""}]);
7929
+ exports.push([module.i, "\n.dof-popup[data-v-0beb2564] {\n position: fixed;\n /* width: 750px; */\n overflow: hidden;\n z-index: 1000;\n}\n.title[data-v-0beb2564] {\n padding: 0.4rem;\n text-align: center;\n font-size: 0.37333rem;\n color: #8E969B;\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 border-top-width: 0px;\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: #1E2E37; */\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: #616C73;\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@media screen and (weex-theme: diablo) {\n.title[data-v-0beb2564] {\n color: #797c7e;\n background-color: #1e2326;\n}\n.midea-actionsheet-list-first[data-v-0beb2564] {\n /* border-top-left-radius: 32px;\n border-top-right-radius: 32px; */\n border-top-width: 0px;\n background-color: #1e2326;\n}\n.midea-actionsheet-list-first[data-v-0beb2564]:active {\n background-color: #1e2326;\n}\n.midea-actionsheet-list[data-v-0beb2564] {\n border-top-width: 0.02667rem;\n border-top-color: #303538;\n background-color: #1e2326;\n}\n.midea-actionsheet-list[data-v-0beb2564]:active {\n background-color: #1e2326;\n}\n.midea-actionsheet-btn[data-v-0beb2564] {\n color: #cfcfd0;\n background-color: #1e2326;\n}\n.leftBtn[data-v-0beb2564] {\n color: #cfcfd0;\n}\n}\n", "", {"version":3,"sources":["/Users/wuhm45/Documents/code/weex组件库/dolphin-weex-ui/packages/dof-actionsheet/index.vue?1142fc0e"],"names":[],"mappings":";AA0DA;EACA,gBAAA;EACA,mBAAA;EACA,iBAAA;EACA,cAAA;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,sBAAA;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;AAEA;AACA;IACA,eAAA;IACA,0BAAA;CACA;AACA;IACA;qCACA;IACA,sBAAA;IACA,0BAAA;CACA;AACA;IACA,0BAAA;CACA;AACA;IACA,6BAAA;IACA,0BAAA;IACA,0BAAA;CACA;AACA;IACA,0BAAA;CACA;AACA;IACA,eAAA;IACA,0BAAA;CACA;AACA;IACA,eAAA;CACA;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', !title && index === 0 ? 'midea-actionsheet-list-first' : '']\"\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': _isDiablo ? diabloBg : '#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 z-index: 1000;\n}\n\n.title {\n padding: 30px;\n text-align: center;\n font-size: 28px;\n color: #8E969B;\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 border-top-width: 0px;\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: #1E2E37; */\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: #616C73;\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\n@media screen and (weex-theme: diablo) {\n .title {\n color: #797c7e;\n background-color: #1e2326;\n }\n .midea-actionsheet-list-first {\n /* border-top-left-radius: 32px;\n border-top-right-radius: 32px; */\n border-top-width: 0px;\n background-color: #1e2326;\n }\n .midea-actionsheet-list-first:active {\n background-color: #1e2326;\n }\n .midea-actionsheet-list {\n border-top-width: 2px;\n border-top-color: #303538;\n background-color: #1e2326;\n }\n .midea-actionsheet-list:active {\n background-color: #1e2326;\n }\n .midea-actionsheet-btn {\n color: #cfcfd0;\n background-color: #1e2326;\n }\n .leftBtn {\n color: #cfcfd0;\n }\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'\nimport DiabloMixin from '../../mixins/diablo'\n\nexport default {\n mixins: [DiabloMixin],\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: ''\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 diabloBg: '#1e2326'\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 ? popupColor : this._isDiablo ? '#101315' : '#F9F9F9'\n // backgroundColor: '#616C73'\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: this._isDiablo ? this.diabloBg : '#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: this._isDiablo ? '#cfcfd0' : '#1E2E37' }\n }\n }\n}\n</script>\n"],"sourceRoot":""}]);
7930
7930
 
7931
7931
  // exports
7932
7932
 
@@ -7968,7 +7968,7 @@ exports = module.exports = __webpack_require__(0)(true);
7968
7968
 
7969
7969
 
7970
7970
  // module
7971
- exports.push([module.i, "\n.dof-icon-button[data-v-1016c17e] {\n -webkit-box-align: center;\n -webkit-align-items: center;\n align-items: center;\n position: relative;\n}\n.content[data-v-1016c17e] {\n position: relative;\n}\n.imgBox[data-v-1016c17e] {\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-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.dof-icon-button-img[data-v-1016c17e] {\n /* width: 96px;\n height: 96px; */\n}\n.dof-icon-button-img--round[data-v-1016c17e] {\n /* border-radius: 48px; */\n}\n.dof-icon-button-text[data-v-1016c17e] {\n margin-top: 0.32rem;\n font-family: PingFangSC-Regular;\n font-size: 0.32rem;\n text-align: center;\n font-weight: 400;\n}\n.triangle[data-v-1016c17e] {\n position: absolute;\n width: 0.24rem;\n height: 0.24rem;\n overflow: hidden;\n -webkit-transform: rotateZ(270deg);\n transform: rotateZ(270deg);\n -webkit-transform-origin: center;\n transform-origin: center;\n bottom: 0;\n right: 0;\n}\n.triangle-mask[data-v-1016c17e] {\n /* Math.sqrt(18 * 18 + 18 * 18) */\n width: 0.34667rem;\n height: 0.34667rem;\n -webkit-transform: rotateZ(45deg);\n transform: rotateZ(45deg);\n -webkit-transform-origin: left top;\n transform-origin: left top;\n}\n.dof-icon-button-loading-box[data-v-1016c17e] {\n /* width: 96px;\n height: 96px;\n border-radius: 48px;\n display: flex;\n justify-content: center;\n align-items: center; */\n}\n.dof-icon-button-loading[data-v-1016c17e] {\n /* width: 32px;\n height: 32px; */\n}\n", "", {"version":3,"sources":["/Users/wuhm45/Documents/code/weex组件库/dolphin-weex-ui/packages/dof-icon-button/index.vue?ca690a5e"],"names":[],"mappings":";AA6SA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,mBAAA;CACA;AACA;EACA,mBAAA;CACA;AACA;EACA,qBAAA;EAAA,sBAAA;EAAA,cAAA;EACA,+BAAA;EAAA,8BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,yBAAA;EAAA,gCAAA;UAAA,wBAAA;EACA,iBAAA;CACA;AACA;EACA;kBACA;CACA;AAEA;EACA,0BAAA;CACA;AAEA;EACA,oBAAA;EACA,gCAAA;EACA,mBAAA;EACA,mBAAA;EACA,iBAAA;CACA;AACA;EACA,mBAAA;EACA,eAAA;EACA,gBAAA;EACA,iBAAA;EACA,mCAAA;UAAA,2BAAA;EACA,iCAAA;UAAA,yBAAA;EACA,UAAA;EACA,SAAA;CACA;AAEA;EACA,kCAAA;EACA,kBAAA;EACA,mBAAA;EACA,kCAAA;UAAA,0BAAA;EACA,mCAAA;UAAA,2BAAA;CACA;AAEA;EACA;;;;;yBAKA;CACA;AAEA;EACA;kBACA;CACA","file":"index.vue","sourcesContent":["<template>\n <div class=\"dof-icon-button\" :key=\"_isColmo + 'icon-button'\">\n <div class=\"content\">\n <div class=\"triangle\" v-if=\"isShowTriangle\">\n <div :style=\"maskStyle\" class=\"triangle-mask\"></div>\n </div>\n <div class=\"imgBox\" :style=\"style\" @click=\"onClick\">\n <image\n v-if=\"!isLoading && !_iconFont.code\"\n :class=\"['dof-icon-button-img', round && 'dof-icon-button-img--round']\"\n :src=\"src\"\n :style=\"imgStyle\"\n ></image>\n <dof-iconfont\n v-else-if=\"!isLoading && _iconFont.code\"\n :code=\"_iconFont.code\"\n :size=\"imgSize - 10\"\n :color=\"_iconFont.color\"\n @dofIconFontClicked=\"onClick\"\n ></dof-iconfont>\n <!-- <div v-else class=\"dof-icon-button-loading-box\"> -->\n <dof-spinner v-else :class=\"['dof-icon-button-loading']\" :type=\"loadingSrc\" :style=\"loadingImgStyle\" />\n <!-- </div> -->\n </div>\n </div>\n <slot>\n <text v-if=\"text\" class=\"dof-icon-button-text\" :style=\"{ color: _textColor }\">{{ text }}</text>\n </slot>\n </div>\n</template>\n\n<script>\nimport { Bridge } from 'dolphin-native-bridge'\nimport DofIconfont from '../dof-iconfont'\nimport ColmoMixin from '../../mixins/colmo'\nimport Color from 'color'\nimport DofSpinner from '../dof-spinner'\nimport DiabloMixin from '../../mixins/diablo'\n\nexport default {\n components: { DofIconfont, DofSpinner, DiabloMixin },\n mixins: [ColmoMixin, DiabloMixin],\n props: {\n // 是否激活态\n active: {\n type: Boolean,\n default: false\n },\n // 常态图片\n img: {\n type: String\n },\n // 常态背景颜色\n color: {\n type: String,\n default: ''\n },\n // 点击背景颜色\n activeColor: {\n type: String,\n default: ''\n },\n // 字体颜色\n textColor: {\n type: String,\n default: ''\n },\n // 点击未松手背景颜色\n touchColor: {\n type: String,\n default: ''\n },\n // 是否loading\n isLoading: {\n type: Boolean,\n default: false\n },\n // loading图片\n loadingImg: {\n type: String,\n default: 'black'\n },\n // 选中态图片\n activeImg: {\n type: String,\n default: ''\n },\n round: {\n type: Boolean,\n default: true\n },\n text: {\n type: String,\n default: ''\n },\n // 是否展示三角\n isShowTriangle: {\n type: Boolean,\n default: false\n },\n // 常规边框颜色\n borderColor: {\n type: String,\n default: ''\n },\n // 选中态边框颜色\n activeBorderColor: {\n type: String,\n default: ''\n },\n // 是否开启震动反馈\n isHapticFeedback: {\n type: Boolean,\n default: false\n },\n // 按钮大小\n btnSize: {\n type: Number,\n default: 96\n },\n // 图片大小\n imgSize: {\n type: Number,\n default: 96\n },\n // loading图片大小\n loadingImgSize: {\n type: Number,\n default: 0\n },\n // 是否禁用\n disabled: {\n type: Boolean,\n default: false\n },\n // 朴素按钮(暂时只支持colmo)\n isPlain: {\n type: Boolean,\n default: false\n },\n // 使用iconFont { code: '\\uXXX', color: '' }\n iconFont: {\n type: Object,\n default: () => ({})\n },\n // 点击态iconFont { ode: '\\uXXX', color: '' }\n activeIconFont: {\n type: Object,\n default: () => ({})\n }\n },\n model: {\n prop: 'active',\n event: 'change'\n },\n computed: {\n // 常态背景颜色\n _color() {\n if (this.color) return this.color\n if (this._isColmo) {\n return this.isPlain ? 'transparent' : '#2d2e2f'\n } else {\n return this._isDiablo ? '#2b2f32' : '#F6F7F9'\n }\n },\n // 点击背景颜色\n _activeColor() {\n if (this.activeColor) return this.activeColor\n if (this._isColmo) {\n return this.isPlain ? 'transparent' : '#b45336'\n } else {\n return this._isDiablo ? '#0490D3' : '#00A4F2'\n }\n },\n // 常规边框颜色\n _borderColor() {\n if (this.borderColor) return this.borderColor\n if (this._isColmo) {\n return this.isPlain ? '#6f7070' : 'transparent'\n } else {\n return 'transparent'\n }\n },\n // 选中态边框颜色\n _activeBorderColor() {\n if (this.activeBorderColor) return this.activeBorderColor\n if (this._isColmo) {\n return this.isPlain ? '#b45336' : 'transparent'\n } else {\n return 'transparent'\n }\n },\n // 字体颜色\n _textColor() {\n if (this.textColor) return this.textColor\n return this._isColmo ? 'rgb(204, 204, 204)' : this._isDiablo ? '#cfcfd0' : '#1E2E37'\n },\n // touch颜色\n _touchColor() {\n if (this.touchColor) return this.touchColor\n if (this._isColmo) {\n return this.isPlain ? '#2d2e2f' : this.active ? '#bc654a' : '#424344'\n } else {\n return ''\n }\n },\n // loading图片大小\n _loadingImgSize() {\n if (this.loadingImgSize) return this.loadingImgSize\n return this._isColmo ? 48 : 32\n },\n src() {\n const res = this.active ? this.activeImg : this.img\n return res || this.img\n },\n loadingSrc() {\n if (this._isColmo) return 'colmo'\n let bgColor = this.style.backgroundColor\n if (bgColor === 'transparent') return 'black'\n\n var color = new Color(bgColor)\n return color.isDark() ? 'white' : 'black'\n },\n _iconFont() {\n if (!this.iconFont.code) return {}\n let res = {}\n if (this.active) {\n res = this.activeIconFont.code\n ? this.activeIconFont\n : { code: this.iconFont.code, color: 'rgba(255,255,255,0.80)' }\n } else {\n res = this.iconFont\n }\n // 颜色默认值\n if (!res.color)\n res.color = this.active ? 'rgba(255,255,255,0.80)' : this._isColmo ? 'rgba(255,255,255,0.40)' : '#666'\n return res\n },\n maskStyle() {\n // 右下角三角优先使用 borderColor 与 activeBorderColor\n const res =\n this._borderColor !== 'transparent' && this._activeBorderColor !== 'transparent'\n ? {\n backgroundColor: this.active ? this._activeBorderColor : this._borderColor\n }\n : {\n backgroundColor: this.active ? this._activeColor : this._color\n }\n !this.isLoading && this._touchColor && (res['backgroundColor:active'] = this._touchColor)\n return res\n },\n style() {\n const res = {\n backgroundColor: this.active ? this._activeColor : this._color,\n 'border-width': '2px',\n 'border-style': 'solid',\n 'border-color': this.active ? this._activeBorderColor : this._borderColor,\n width: this.btnSize + 'px',\n height: this.btnSize + 'px',\n 'border-radius': this.btnSize / 2 + 'px'\n }\n !this.isLoading && this._touchColor && (res['backgroundColor:active'] = this._touchColor)\n return res\n },\n imgStyle() {\n return {\n width: this.imgSize + 'px',\n height: this.imgSize + 'px',\n 'border-radius': this.imgSize / 2 + 'px'\n }\n },\n loadingImgStyle() {\n return {\n width: this._loadingImgSize + 'px',\n height: this._loadingImgSize + 'px',\n 'border-radius': this._loadingImgSize / 2 + 'px'\n }\n },\n isIp6() {\n if (weex && weex.config.env.osName === 'iOS') {\n let deviceModel = weex.config.env.deviceModel.substr(6) // 'iPhone10,3' ==> 10.3\n return (\n deviceModel.split(',')[0] < 8 // > iphone7 以下\n )\n } else {\n return false\n }\n }\n },\n methods: {\n onClick() {\n if (this.disabled || this.isLoading) return\n // 震动反馈\n if (this.isHapticFeedback) Bridge.hapticFeedback(!this.isIp6 ? 1 : null)\n this.$emit('change', !this.active)\n }\n }\n}\n</script>\n\n<style scoped>\n.dof-icon-button {\n align-items: center;\n position: relative;\n}\n.content {\n position: relative;\n}\n.imgBox {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n}\n.dof-icon-button-img {\n /* width: 96px;\n height: 96px; */\n}\n\n.dof-icon-button-img--round {\n /* border-radius: 48px; */\n}\n\n.dof-icon-button-text {\n margin-top: 24px;\n font-family: PingFangSC-Regular;\n font-size: 24px;\n text-align: center;\n font-weight: 400;\n}\n.triangle {\n position: absolute;\n width: 18px;\n height: 18px;\n overflow: hidden;\n transform: rotateZ(270deg);\n transform-origin: center;\n bottom: 0;\n right: 0;\n}\n\n.triangle-mask {\n /* Math.sqrt(18 * 18 + 18 * 18) */\n width: 26px;\n height: 26px;\n transform: rotateZ(45deg);\n transform-origin: left top;\n}\n\n.dof-icon-button-loading-box {\n /* width: 96px;\n height: 96px;\n border-radius: 48px;\n display: flex;\n justify-content: center;\n align-items: center; */\n}\n\n.dof-icon-button-loading {\n /* width: 32px;\n height: 32px; */\n}\n</style>\n"],"sourceRoot":""}]);
7971
+ exports.push([module.i, "\n.dof-icon-button[data-v-1016c17e] {\n -webkit-box-align: center;\n -webkit-align-items: center;\n align-items: center;\n position: relative;\n}\n.content[data-v-1016c17e] {\n position: relative;\n}\n.imgBox[data-v-1016c17e] {\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-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.dof-icon-button-img[data-v-1016c17e] {\n /* width: 96px;\n height: 96px; */\n}\n.dof-icon-button-img--round[data-v-1016c17e] {\n /* border-radius: 48px; */\n}\n.dof-icon-button-text[data-v-1016c17e] {\n margin-top: 0.32rem;\n font-family: PingFangSC-Regular;\n font-size: 0.32rem;\n text-align: center;\n font-weight: 400;\n}\n.triangle[data-v-1016c17e] {\n position: absolute;\n width: 0.24rem;\n height: 0.24rem;\n overflow: hidden;\n -webkit-transform: rotateZ(270deg);\n transform: rotateZ(270deg);\n -webkit-transform-origin: center;\n transform-origin: center;\n bottom: 0;\n right: 0;\n}\n.triangle-mask[data-v-1016c17e] {\n /* Math.sqrt(18 * 18 + 18 * 18) */\n width: 0.34667rem;\n height: 0.34667rem;\n -webkit-transform: rotateZ(45deg);\n transform: rotateZ(45deg);\n -webkit-transform-origin: left top;\n transform-origin: left top;\n}\n.dof-icon-button-loading-box[data-v-1016c17e] {\n /* width: 96px;\n height: 96px;\n border-radius: 48px;\n display: flex;\n justify-content: center;\n align-items: center; */\n}\n.dof-icon-button-loading[data-v-1016c17e] {\n /* width: 32px;\n height: 32px; */\n}\n", "", {"version":3,"sources":["/Users/wuhm45/Documents/code/weex组件库/dolphin-weex-ui/packages/dof-icon-button/index.vue?c672cf3a"],"names":[],"mappings":";AA6SA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,mBAAA;CACA;AACA;EACA,mBAAA;CACA;AACA;EACA,qBAAA;EAAA,sBAAA;EAAA,cAAA;EACA,+BAAA;EAAA,8BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,yBAAA;EAAA,gCAAA;UAAA,wBAAA;EACA,iBAAA;CACA;AACA;EACA;kBACA;CACA;AAEA;EACA,0BAAA;CACA;AAEA;EACA,oBAAA;EACA,gCAAA;EACA,mBAAA;EACA,mBAAA;EACA,iBAAA;CACA;AACA;EACA,mBAAA;EACA,eAAA;EACA,gBAAA;EACA,iBAAA;EACA,mCAAA;UAAA,2BAAA;EACA,iCAAA;UAAA,yBAAA;EACA,UAAA;EACA,SAAA;CACA;AAEA;EACA,kCAAA;EACA,kBAAA;EACA,mBAAA;EACA,kCAAA;UAAA,0BAAA;EACA,mCAAA;UAAA,2BAAA;CACA;AAEA;EACA;;;;;yBAKA;CACA;AAEA;EACA;kBACA;CACA","file":"index.vue","sourcesContent":["<template>\n <div class=\"dof-icon-button\" :key=\"_isColmo + 'icon-button'\">\n <div class=\"content\">\n <div class=\"triangle\" v-if=\"isShowTriangle\">\n <div :style=\"maskStyle\" class=\"triangle-mask\"></div>\n </div>\n <div class=\"imgBox\" :style=\"style\" @click=\"onClick\">\n <image\n v-if=\"!isLoading && !_iconFont.code\"\n :class=\"['dof-icon-button-img', round && 'dof-icon-button-img--round']\"\n :src=\"src\"\n :style=\"imgStyle\"\n ></image>\n <dof-iconfont\n v-else-if=\"!isLoading && _iconFont.code\"\n :code=\"_iconFont.code\"\n :size=\"imgSize - 10\"\n :color=\"_iconFont.color\"\n @dofIconFontClicked=\"onClick\"\n ></dof-iconfont>\n <!-- <div v-else class=\"dof-icon-button-loading-box\"> -->\n <dof-spinner v-else :class=\"['dof-icon-button-loading']\" :type=\"loadingSrc\" :style=\"loadingImgStyle\" />\n <!-- </div> -->\n </div>\n </div>\n <slot>\n <text v-if=\"text\" class=\"dof-icon-button-text\" :style=\"{ color: _textColor }\">{{ text }}</text>\n </slot>\n </div>\n</template>\n\n<script>\nimport { Bridge } from 'dolphin-native-bridge'\nimport DofIconfont from '../dof-iconfont'\nimport ColmoMixin from '../../mixins/colmo'\nimport Color from 'color'\nimport DofSpinner from '../dof-spinner'\nimport DiabloMixin from '../../mixins/diablo'\n\nexport default {\n components: { DofIconfont, DofSpinner, DiabloMixin },\n mixins: [ColmoMixin, DiabloMixin],\n props: {\n // 是否激活态\n active: {\n type: Boolean,\n default: false\n },\n // 常态图片\n img: {\n type: String\n },\n // 常态背景颜色\n color: {\n type: String,\n default: ''\n },\n // 点击背景颜色\n activeColor: {\n type: String,\n default: ''\n },\n // 字体颜色\n textColor: {\n type: String,\n default: ''\n },\n // 点击未松手背景颜色\n touchColor: {\n type: String,\n default: ''\n },\n // 是否loading\n isLoading: {\n type: Boolean,\n default: false\n },\n // loading图片\n loadingImg: {\n type: String,\n default: 'black'\n },\n // 选中态图片\n activeImg: {\n type: String,\n default: ''\n },\n round: {\n type: Boolean,\n default: true\n },\n text: {\n type: String,\n default: ''\n },\n // 是否展示三角\n isShowTriangle: {\n type: Boolean,\n default: false\n },\n // 常规边框颜色\n borderColor: {\n type: String,\n default: ''\n },\n // 选中态边框颜色\n activeBorderColor: {\n type: String,\n default: ''\n },\n // 是否开启震动反馈\n isHapticFeedback: {\n type: Boolean,\n default: false\n },\n // 按钮大小\n btnSize: {\n type: Number,\n default: 96\n },\n // 图片大小\n imgSize: {\n type: Number,\n default: 96\n },\n // loading图片大小\n loadingImgSize: {\n type: Number,\n default: 0\n },\n // 是否禁用\n disabled: {\n type: Boolean,\n default: false\n },\n // 朴素按钮(暂时只支持colmo)\n isPlain: {\n type: Boolean,\n default: false\n },\n // 使用iconFont { code: '\\uXXX', color: '' }\n iconFont: {\n type: Object,\n default: () => ({})\n },\n // 点击态iconFont { ode: '\\uXXX', color: '' }\n activeIconFont: {\n type: Object,\n default: () => ({})\n }\n },\n model: {\n prop: 'active',\n event: 'change'\n },\n computed: {\n // 常态背景颜色\n _color() {\n if (this.color) return this.color\n if (this._isColmo) {\n return this.isPlain ? 'transparent' : '#2d2e2f'\n } else {\n return this._isDiablo ? '#45494C' : '#F6F7F9'\n }\n },\n // 点击背景颜色\n _activeColor() {\n if (this.activeColor) return this.activeColor\n if (this._isColmo) {\n return this.isPlain ? 'transparent' : '#b45336'\n } else {\n return this._isDiablo ? '#0490D3' : '#00A4F2'\n }\n },\n // 常规边框颜色\n _borderColor() {\n if (this.borderColor) return this.borderColor\n if (this._isColmo) {\n return this.isPlain ? '#6f7070' : 'transparent'\n } else {\n return 'transparent'\n }\n },\n // 选中态边框颜色\n _activeBorderColor() {\n if (this.activeBorderColor) return this.activeBorderColor\n if (this._isColmo) {\n return this.isPlain ? '#b45336' : 'transparent'\n } else {\n return 'transparent'\n }\n },\n // 字体颜色\n _textColor() {\n if (this.textColor) return this.textColor\n return this._isColmo ? 'rgb(204, 204, 204)' : this._isDiablo ? '#cfcfd0' : '#1E2E37'\n },\n // touch颜色\n _touchColor() {\n if (this.touchColor) return this.touchColor\n if (this._isColmo) {\n return this.isPlain ? '#2d2e2f' : this.active ? '#bc654a' : '#424344'\n } else {\n return ''\n }\n },\n // loading图片大小\n _loadingImgSize() {\n if (this.loadingImgSize) return this.loadingImgSize\n return this._isColmo ? 48 : 32\n },\n src() {\n const res = this.active ? this.activeImg : this.img\n return res || this.img\n },\n loadingSrc() {\n if (this._isColmo) return 'colmo'\n let bgColor = this.style.backgroundColor\n if (bgColor === 'transparent') return 'black'\n\n var color = new Color(bgColor)\n return color.isDark() ? 'white' : 'black'\n },\n _iconFont() {\n if (!this.iconFont.code) return {}\n let res = {}\n if (this.active) {\n res = this.activeIconFont.code\n ? this.activeIconFont\n : { code: this.iconFont.code, color: 'rgba(255,255,255,0.80)' }\n } else {\n res = this.iconFont\n }\n // 颜色默认值\n if (!res.color)\n res.color = this.active ? 'rgba(255,255,255,0.80)' : this._isColmo ? 'rgba(255,255,255,0.40)' : '#666'\n return res\n },\n maskStyle() {\n // 右下角三角优先使用 borderColor 与 activeBorderColor\n const res =\n this._borderColor !== 'transparent' && this._activeBorderColor !== 'transparent'\n ? {\n backgroundColor: this.active ? this._activeBorderColor : this._borderColor\n }\n : {\n backgroundColor: this.active ? this._activeColor : this._color\n }\n !this.isLoading && this._touchColor && (res['backgroundColor:active'] = this._touchColor)\n return res\n },\n style() {\n const res = {\n backgroundColor: this.active ? this._activeColor : this._color,\n 'border-width': '2px',\n 'border-style': 'solid',\n 'border-color': this.active ? this._activeBorderColor : this._borderColor,\n width: this.btnSize + 'px',\n height: this.btnSize + 'px',\n 'border-radius': this.btnSize / 2 + 'px'\n }\n !this.isLoading && this._touchColor && (res['backgroundColor:active'] = this._touchColor)\n return res\n },\n imgStyle() {\n return {\n width: this.imgSize + 'px',\n height: this.imgSize + 'px',\n 'border-radius': this.imgSize / 2 + 'px'\n }\n },\n loadingImgStyle() {\n return {\n width: this._loadingImgSize + 'px',\n height: this._loadingImgSize + 'px',\n 'border-radius': this._loadingImgSize / 2 + 'px'\n }\n },\n isIp6() {\n if (weex && weex.config.env.osName === 'iOS') {\n let deviceModel = weex.config.env.deviceModel.substr(6) // 'iPhone10,3' ==> 10.3\n return (\n deviceModel.split(',')[0] < 8 // > iphone7 以下\n )\n } else {\n return false\n }\n }\n },\n methods: {\n onClick() {\n if (this.disabled || this.isLoading) return\n // 震动反馈\n if (this.isHapticFeedback) Bridge.hapticFeedback(!this.isIp6 ? 1 : null)\n this.$emit('change', !this.active)\n }\n }\n}\n</script>\n\n<style scoped>\n.dof-icon-button {\n align-items: center;\n position: relative;\n}\n.content {\n position: relative;\n}\n.imgBox {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n}\n.dof-icon-button-img {\n /* width: 96px;\n height: 96px; */\n}\n\n.dof-icon-button-img--round {\n /* border-radius: 48px; */\n}\n\n.dof-icon-button-text {\n margin-top: 24px;\n font-family: PingFangSC-Regular;\n font-size: 24px;\n text-align: center;\n font-weight: 400;\n}\n.triangle {\n position: absolute;\n width: 18px;\n height: 18px;\n overflow: hidden;\n transform: rotateZ(270deg);\n transform-origin: center;\n bottom: 0;\n right: 0;\n}\n\n.triangle-mask {\n /* Math.sqrt(18 * 18 + 18 * 18) */\n width: 26px;\n height: 26px;\n transform: rotateZ(45deg);\n transform-origin: left top;\n}\n\n.dof-icon-button-loading-box {\n /* width: 96px;\n height: 96px;\n border-radius: 48px;\n display: flex;\n justify-content: center;\n align-items: center; */\n}\n\n.dof-icon-button-loading {\n /* width: 32px;\n height: 32px; */\n}\n</style>\n"],"sourceRoot":""}]);
7972
7972
 
7973
7973
  // exports
7974
7974
 
@@ -8514,7 +8514,7 @@ exports = module.exports = __webpack_require__(0)(true);
8514
8514
 
8515
8515
 
8516
8516
  // module
8517
- exports.push([module.i, "\n.widget[data-v-401fdb82] {\n /* background-color: #ffffff; */\n height: 1.17333rem;\n}\n.tab-margin[data-v-401fdb82] {\n margin-bottom: 0.21333rem;\n}\n.tab-padding-160[data-v-401fdb82] {\n padding: 0 2.13333rem;\n}\n.tab-padding-40[data-v-401fdb82] {\n padding: 0 0.53333rem;\n}\n.flex-expand-layout[data-v-401fdb82] {\n -webkit-box-flex: 1;\n -webkit-flex: 1;\n flex: 1;\n}\n.tab-title-list[data-v-401fdb82] {\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 padding: 0 0.21333rem;\n}\n.space-around-layout[data-v-401fdb82] {\n -webkit-justify-content: space-around;\n justify-content: space-around;\n}\n.padding-layout-32[data-v-401fdb82] {\n padding: 0 0.42667rem;\n}\n.padding-layout-8[data-v-401fdb82] {\n padding: 0 0.10667rem;\n}\n.title-item[data-v-401fdb82] {\n height: 1.17333rem;\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 border-bottom-style: solid;\n /* border-width: 1px; */\n}\n.title-item-primary[data-v-401fdb82] {\n -webkit-box-align: center;\n -webkit-align-items: center;\n align-items: center;\n}\n.tab-text-wrapper[data-v-401fdb82] {\n height: 1.09333rem;\n -webkit-box-pack: center;\n -webkit-justify-content: center;\n justify-content: center;\n}\n\n/* tabpage 在dof-minibar内部 */\n.minibar-inner[data-v-401fdb82] {\n height: 1.01333rem;\n}\n.thidrd-wrapper[data-v-401fdb82] {\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -webkit-flex-direction: row;\n flex-direction: row;\n height: 0.69333rem;\n padding: 0 0.4rem;\n border-radius: 0.34667rem;\n /* background-color: #232323; */\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.avatar-icon[data-v-401fdb82] {\n width: 0.48rem;\n height: 0.48rem;\n margin-right: 0.10667rem;\n}\n.tab-text[data-v-401fdb82] {\n lines: 1;\n text-overflow: ellipsis;\n font-family: PingFangSC-Regular;\n letter-spacing: 0;\n /* color: #8E969B; */\n overflow: hidden;\n text-overflow: ellipsis;\n -webkit-line-clamp: 1;\n}\n.third-text[data-v-401fdb82] {\n font-size: 0.32rem;\n /* color: #1E2E37; */\n}\n.border-bottom-line[data-v-401fdb82] {\n width: 0.53333rem;\n height: 0.08rem;\n border-radius: 0.04rem;\n margin-top: -0.13333rem;\n /* margin-left: 10px; */\n /* background-color: transparent; */\n}\n.border-bottom-line-secondary[data-v-401fdb82] {\n height: 0.05333rem;\n border-radius: 0.04rem;\n margin-top: -0.02667rem;\n /* background-color: transparent; */\n}\n.dot-bottom-border[data-v-401fdb82] {\n /* margin-right: 20px; */\n}\n\n/* 新增三类固定标签 */\n.thirdTabPanel[data-v-401fdb82] {\n height: 1.70667rem;\n}\n.dof-third-panel[data-v-401fdb82] {\n /* width: 750px; */\n height: 1.70667rem;\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-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 opacity: 1;\n}\n.btn-group-wrap[data-v-401fdb82] {\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-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: 0.85333rem;\n /* overflow: hidden; */\n}\n.btn-text[data-v-401fdb82] {\n font-family: PingFangSC-Regular;\n color: #ffffff;\n font-size: 0.37333rem;\n line-height: 0.85333rem;\n padding-left: 0.42667rem;\n padding-right: 0.42667rem;\n}\n.leftRadius[data-v-401fdb82] {\n border-top-left-radius: 0.42667rem;\n border-bottom-left-radius: 0.42667rem;\n}\n.rightRadius[data-v-401fdb82] {\n border-top-right-radius: 0.42667rem;\n border-bottom-right-radius: 0.42667rem;\n}\n.dot-tip[data-v-401fdb82] {\n /* position: absolute; */\n /* top: 34px;\n right: 0px; */\n margin-top: 0.08rem;\n width: 0.21333rem;\n height: 0.21333rem;\n border-radius: 0.13333rem;\n background-color: #f56428;\n}\n\n/* 小红点 */\n.dot-tab-text[data-v-401fdb82] {\n /* margin-top:8px; */\n padding-top: 0.13333rem;\n padding-bottom: 0.10667rem;\n}\n.flexDirection[data-v-401fdb82] {\n position: relative;\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-align: start;\n -webkit-align-items: flex-start;\n align-items: flex-start;\n}\n.flexCoulmn[data-v-401fdb82] {\n}\n.dot-num-tip-text[data-v-401fdb82] {\n /* position:absolute;\n right: 0px;\n top:0; */\n font-size: 0.32rem;\n color: #ffffff;\n border-radius: 1.33333rem;\n /* border-width: 1px;\n border-color: #ffffff; */\n background-color: #f56428;\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 /* transform: translate(100%, 0); */\n margin-left: -0.21333rem;\n /* padding-top: 8px;\n padding-bottom: 8px; */\n}\n.dot-num-tip-right[data-v-401fdb82] {\n /* padding-right: 60px; */\n}\n\n/* 数字小红点下面的选中宽度 */\n.dotNum-bottom-borderWidth[data-v-401fdb82] {\n /* margin-right: 60px; */\n}\n", "", {"version":3,"sources":["/Users/wuhm45/Documents/code/weex组件库/dolphin-weex-ui/packages/dof-tab-page/index.vue?122b0368","/Users/wuhm45/Documents/code/weex组件库/dolphin-weex-ui/packages/dof-tab-page/<no source>"],"names":[],"mappings":";AA+aA;EACA,gCAAA;EACA,mBAAA;CACA;AAEA;EACA,0BAAA;CACA;AAEA;EACA,sBAAA;CACA;AAEA;EACA,sBAAA;CACA;AAEA;EACA,oBAAA;EAAA,gBAAA;UAAA,QAAA;CACA;AAEA;EACA,+BAAA;EAAA,8BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,0BAAA;EAAA,uCAAA;UAAA,+BAAA;EACA,sBAAA;CACA;AAEA;EACA,sCAAA;UAAA,8BAAA;CACA;AAEA;EACA,sBAAA;CACA;AAEA;EACA,sBAAA;CACA;AAEA;EACA,mBAAA;EACA,yBAAA;EAAA,gCAAA;UAAA,wBAAA;EACA,2BAAA;EAAA,6BAAA;UAAA,qBAAA;EACA,2BAAA;EACA,wBAAA;CACA;AAEA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;CACA;AAEA;EACA,mBAAA;EACA,yBAAA;EAAA,gCAAA;UAAA,wBAAA;CACA;;AAEA,4BAAA;AACA;EACA,mBAAA;CACA;AAEA;EACA,+BAAA;EAAA,8BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,mBAAA;EACA,kBAAA;EACA,0BAAA;EACA,gCAAA;EACA,yBAAA;EAAA,gCAAA;UAAA,wBAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;CACA;AAEA;EACA,eAAA;EACA,gBAAA;EACA,yBAAA;CACA;AAEA;EACA,SAAA;EACA,wBAAA;EACA,gCAAA;EACA,kBAAA;EACA,qBAAA;ECjgBA,iBAAA;EAAA,wBAAA;EAAA,sBAAA;CDkgBA;AAEA;EACA,mBAAA;EACA,qBAAA;CACA;AAEA;EACA,kBAAA;EACA,gBAAA;EACA,uBAAA;EACA,wBAAA;EACA,wBAAA;EACA,oCAAA;CACA;AAEA;EACA,mBAAA;EACA,uBAAA;EACA,wBAAA;EACA,oCAAA;CACA;AAEA;EACA,yBAAA;CACA;;AAEA,cAAA;AAEA;EACA,mBAAA;CACA;AAEA;EACA,mBAAA;EACA,mBAAA;EACA,+BAAA;EAAA,8BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,0BAAA;UAAA,kBAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,yBAAA;EAAA,gCAAA;UAAA,wBAAA;EACA,WAAA;CACA;AAEA;EACA,+BAAA;EAAA,8BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,0BAAA;UAAA,kBAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,yBAAA;EAAA,gCAAA;UAAA,wBAAA;EACA,0BAAA;EACA,uBAAA;CACA;AAEA;EACA,gCAAA;EACA,eAAA;EACA,sBAAA;EACA,wBAAA;EACA,yBAAA;EACA,0BAAA;CACA;AAEA;EACA,mCAAA;EACA,sCAAA;CACA;AAEA;EACA,oCAAA;EACA,uCAAA;CACA;AAEA;EACA,yBAAA;EACA;gBACA;EACA,oBAAA;EACA,kBAAA;EACA,mBAAA;EACA,0BAAA;EACA,0BAAA;CACA;;AAEA,SAAA;AACA;EACA,qBAAA;EACA,wBAAA;EACA,2BAAA;CACA;AAEA;EACA,mBAAA;EACA,+BAAA;EAAA,8BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,yBAAA;EAAA,gCAAA;UAAA,wBAAA;CACA;AAEA;CACA;AAEA;EACA;;WAEA;EACA,mBAAA;EACA,eAAA;EACA,0BAAA;EACA;2BACA;EACA,0BAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,yBAAA;EAAA,gCAAA;UAAA,wBAAA;EACA,yBAAA;EACA,0BAAA;EACA,oCAAA;EACA,yBAAA;EACA;yBACA;CACA;AAEA;EACA,0BAAA;CACA;;AAEA,kBAAA;AACA;EACA,yBAAA;CACA","file":"index.vue","sourcesContent":["<template>\n <div\n :class=\"[\n 'widget',\n hasMargin && 'tab-margin',\n tabTitles.length === 2 && !isSlot && type != 'third-group' && 'tab-padding-160',\n tabTitles.length === 3 && !isSlot && type != 'third-group' && 'tab-padding-40',\n isSlot && 'flex-expand-layout',\n type == 'third-group' && 'thirdTabPanel'\n ]\"\n :style=\"{ backgroundColor: mergeStyleOption.bgColor }\"\n >\n <!-- 新增三类固定点击标签 third-group-->\n <div\n :class=\"['dof-third-panel']\"\n v-if=\"type === 'third-group' && !_isColmo\"\n :style=\"{ 'background-color': mergeStyleOption.bgColor }\"\n :accessible=\"true\"\n :aria-label=\"text\"\n >\n <div class=\"btn-group-wrap\" :style=\"wrapStyle\">\n <text\n v-for=\"(text, index) in tabTitles\"\n :key=\"index\"\n :class=\"[\n 'btn-text',\n index == 0 && 'leftRadius',\n index == tabTitles.length - 1 && 'rightRadius',\n !disabled && pattern === 'text' && `dof-text-highlight-${type}`\n ]\"\n :data-index=\"index\"\n :style=\"[\n index < tabTitles.length - 1 ? verticalLineStyle : '',\n textStyle,\n index == tabCheckedIndex ? textBtnStyle(index) : ''\n ]\"\n @click=\"onTextClicked(index)\"\n >{{ text }}</text\n >\n </div>\n </div>\n <dof-diamond-tab\n v-if=\"type === 'third-group' && _isColmo\"\n :tabData=\"tabTitles\"\n :bgColor=\"'#151617'\"\n :activeTextColor=\"'rgb(230, 230, 230)'\"\n :touchColor=\"'rgb(26, 26, 26)'\"\n :textFontSize=\"'28px'\"\n :active=\"tabCheckedIndex\"\n @tabActiveChange=\"tabActiveChange\"\n />\n <!-- 三级标签页 third 带了图标 以及文字有背景色和圆角-->\n <scroller\n :class=\"['tab-title-list', tabTitles.length <= 5 && 'space-around-layout']\"\n :show-scrollbar=\"false\"\n scroll-direction=\"horizontal\"\n v-if=\"type === 'third'\"\n >\n <div\n :class=\"['title-item', tabTitles.length > 5 && 'padding-layout-8']\"\n v-for=\"(v, index) in tabTitles\"\n :key=\"index\"\n :ref=\"'dof-tab-title-' + index\"\n @click=\"onClicked(index, tabTitles.length - 1)\"\n >\n <div\n class=\"tab-text-wrapper thidrd-wrapper\"\n :style=\"{\n backgroundColor:\n currentPage === index\n ? mergeStyleOption.activeBoxBgColor\n : (v.icon || v.activeIcon) && !_isDiablo\n ? 'transparent'\n : mergeStyleOption.boxBgColor,\n borderColor:\n currentPage === index && mergeStyleOption.activeBorderColor\n ? mergeStyleOption.activeBorderColor\n : mergeStyleOption.borderColor\n }\"\n >\n <image class=\"avatar-icon\" v-if=\"v.icon || v.activeIcon\" :src=\"currentPage === index ? v.activeIcon : v.icon\">\n </image>\n <text\n class=\"tab-text third-text\"\n :style=\"{\n fontWeight: currentPage === index && mergeStyleOption.isActiveTitleBold ? 'normal' : 'normal',\n color: currentPage === index ? mergeStyleOption.activeTitleColor : mergeStyleOption.titleColor\n }\"\n >{{ v.title }}</text\n >\n </div>\n </div>\n </scroller>\n <!-- 一级和二级标签 else-->\n <!-- :style=\"{backgroundColor: '#00A4F2'}\" -->\n <scroller\n :class=\"['tab-title-list', tabTitles.length <= 5 && 'space-around-layout']\"\n :show-scrollbar=\"false\"\n scroll-direction=\"horizontal\"\n v-if=\"type !== 'third' && type !== 'third-group'\"\n >\n <div\n :class=\"['title-item', tabTitles.length > 5 && 'padding-layout-32', type == 'primary' && 'title-item-primary']\"\n v-for=\"(v, index) in tabTitles\"\n :key=\"index\"\n :ref=\"'dof-tab-title-' + index\"\n @click=\"onClicked(index, tabTitles.length - 1)\"\n >\n <div :class=\"['tab-text-wrapper', isSlot && 'minibar-inner']\">\n <div class=\"flexDirection\" :class=\"[v.hasDotNum && 'dot-num-tip-right']\">\n <text\n :class=\"['tab-text', 'dot-tab-text']\"\n :style=\"{\n fontSize: type === 'primary' ? '32px' : '28px',\n fontWeight: currentPage === index && mergeStyleOption.isActiveTitleBold ? 'normal' : 'normal',\n color: currentPage === index ? mergeStyleOption.activeTitleColor : mergeStyleOption.titleColor\n }\"\n >{{ v.title }}</text\n >\n <div v-if=\"v.hasDotTip\">\n <div class=\"dot-tip\" :style=\"{ 'background-color': v.badgeColor ? v.badgeColor : '#F56428' }\"></div>\n </div>\n <text\n class=\"dot-num-tip-text\"\n :style=\"{ 'background-color': v.badgeColor ? v.badgeColor : '#F56428' }\"\n v-else-if=\"v.hasDotNum\"\n >{{ dotNum(v.hasDotNum, v.badgeMax) }}</text\n >\n </div>\n </div>\n <div\n v-if=\"type !== 'third' && type !== 'third-group'\"\n :class=\"[\n type == 'primary' ? 'border-bottom-line' : 'border-bottom-line-secondary',\n v.hasDotTip && 'dot-bottom-border',\n v.hasDotNum && 'dotNum-bottom-borderWidth'\n ]\"\n :style=\"{\n backgroundColor: currentPage === index ? mergeStyleOption.activeBottomColor : 'transparent'\n }\"\n ></div>\n </div>\n </scroller>\n </div>\n</template>\n\n<script>\nconst dom = weex.requireModule('dom')\nimport { THEME_COLOR_SET } from '../../theme/config'\nimport ColmoMixin from '../../mixins/colmo'\nimport DofDiamondTab from '../dof-diamond-tab'\nimport DiabloMixin from '../../mixins/diablo'\n\nexport default {\n mixins: [ColmoMixin, DiabloMixin],\n components: { DofDiamondTab },\n props: {\n type: {\n type: String,\n default: 'secondary'\n },\n theme: {\n type: String,\n default: 'default'\n },\n isSlot: {\n type: Boolean,\n default: false\n },\n tabTitles: {\n type: Array,\n default: () => []\n },\n tabCheckedIndex: {\n type: [Number, String],\n default: 0\n },\n tabStyles: {\n type: Object,\n default: () => ({})\n },\n hasMargin: {\n type: Boolean,\n default: false\n },\n bgColor: {\n type: String,\n default: ''\n }\n },\n data: () => ({\n currentPage: 0\n }),\n computed: {\n defaultStyleOption() {\n const base = {\n isActiveTitleBold: true,\n iconWidth: 70,\n iconHeight: 70,\n height: 88,\n fontSize: 24,\n hasActiveBottom: true,\n activeBottomColor: '#1E2E37',\n hasRightIcon: false\n }\n const defaultStyle = {\n ...base,\n bgColor: '#ffffff',\n titleColor: '#8E969B',\n activeTitleColor: '#1E2E37',\n boxBgColor: '#F6F7F9',\n activeBoxBgColor: '#232323'\n }\n const colmoStyle = {\n ...base,\n isActiveTitleBold: false,\n bgColor: '#151617',\n titleColor: 'rgba(255,255,255,0.4)',\n activeTitleColor: 'rgba(255,255,255,0.8)',\n boxBgColor: '#151617',\n activeBoxBgColor: '#151617',\n activeBottomColor: '#B35336',\n borderColor: 'rgba(51, 51, 51, 1)',\n activeBorderColor: '#B35336'\n }\n const diabloStyle = {\n ...base,\n bgColor: '#101315',\n titleColor: '#8E969B',\n activeTitleColor: '#cfcfd0',\n activeBottomColor: '#cfcfd0',\n boxBgColor: '#171c1f',\n activeBoxBgColor: '#cfcfd0'\n }\n return this._isColmo ? colmoStyle : (this._isDiablo ? diabloStyle : defaultStyle)\n },\n mergeStyleOption() {\n let { type, theme, tabStyles, defaultStyleOption } = this\n if (type === 'third') {\n if (this._isColmo) {\n let res = { ...defaultStyleOption, ...tabStyles }\n if (this.bgColor) res.bgColor = this.bgColor\n return res\n }\n if (theme === 'default') {\n return {\n ...defaultStyleOption,\n ...{\n activeTitleColor: this._isDiablo ? '#1e2e37' : '#fff',\n titleColor: this._isDiablo ? 'rgba(255,255,255,0.4)' : '#1e2e37'\n },\n ...tabStyles\n }\n } else if (theme === 'primary') {\n return {\n ...defaultStyleOption,\n ...tabStyles,\n ...{\n bgColor: THEME_COLOR_SET[theme],\n // boxBgColor: '#5088ff',\n boxBgColor: THEME_BOX_BGCOLOR_SET[theme],\n activeBoxBgColor: '#ffffff',\n titleColor: '#ffffff',\n activeTitleColor: THEME_COLOR_SET[theme]\n }\n }\n } else {\n return { ...defaultStyleOption, ...tabStyles, ...{ boxBgColor: THEME_BOX_BGCOLOR_SET[theme] } }\n }\n } else if (type === 'third-group') {\n if (this._isColmo) return { bgColor: '#151617' }\n return { bgColor: this._isDiablo ? '#101315' : THEME_COLOR_SET[theme] }\n } else {\n if (theme === 'default') {\n let res = this.bgColor ? { bgColor: this.bgColor } : {}\n return { ...defaultStyleOption, ...tabStyles, ...res }\n } else {\n return {\n ...defaultStyleOption,\n ...tabStyles,\n ...{\n bgColor: THEME_COLOR_SET[theme],\n titleColor: 'rgba(255,255,255, 0.6)',\n activeTitleColor: '#ffffff',\n activeBottomColor: '#ffffff'\n }\n }\n }\n }\n },\n\n // 新增三类固定标签\n wrapStyle() {\n const { theme } = this\n if (theme == 'default') {\n return {\n borderWidth: '2px',\n borderStyle: 'solid',\n borderColor: this._isDiablo ? '#1E2123' : '#f3f4f4'\n }\n } else {\n return {\n borderWidth: '2px',\n borderStyle: 'solid',\n borderColor: 'rgba(255, 255, 255, 0.3)'\n }\n }\n },\n\n textStyle() {\n const { theme } = this\n if (theme == 'default') {\n return {\n color: this._isDiablo ? '#797c7e' : '#8E969B'\n }\n } else {\n return {\n color: '#ffffff'\n }\n }\n },\n verticalLineStyle() {\n const { theme } = this\n if (theme == 'default') {\n return {\n borderRightWidth: '2px',\n borderRightStyle: 'solid',\n borderRightColor: this._isDiablo ? '#1E2123' : '#f3f4f4'\n }\n } else {\n return {\n borderRightWidth: '2px',\n borderRightStyle: 'solid',\n borderRightColor: 'rgba(255, 255, 255, 0.3)'\n }\n }\n },\n hackMarginTop() {\n const platform = weex.config.env.platform\n if (platform === 'iOS') return -1\n if (platform === 'harmony') return 0\n return 2\n },\n textBtnStyle() {\n const { theme } = this\n let hackH = this.hackMarginTop\n return function(i) {\n if (theme == 'default') {\n return {\n color: this._isDiablo ? '#cfcfd0' : '#1E2E37',\n backgroundColor: this._isDiablo ? '#1E2123' : '#f3f4f4',\n marginTop: `${hackH}px`\n }\n } else {\n return {\n color: THEME_COLOR_SET[theme],\n backgroundColor: '#FFFFFF',\n marginTop: `${hackH}px`\n }\n }\n }\n }\n },\n methods: {\n onClicked(index, len) {\n this.currentPage = index\n this.$emit('dofTabSelected', { index: index })\n len > 4 && this._scrollToCurrentTab(index)\n },\n tabActiveChange(index) {\n this.onClicked(index)\n },\n _scrollToCurrentTab(index) {\n const currentTabEl = this.$refs[`dof-tab-title-${index}`][0]\n const firstTabEl = this.$refs['dof-tab-title-0'][0]\n const SAFE_DISTANCE = 16.3\n\n dom.getComponentRect(currentTabEl, res => {\n let {\n size: { height, width = 110, left }\n } = res\n const appearNum = Math.floor(750 / (width + SAFE_DISTANCE))\n let offset = (-(750 - width) / 2) | 0\n\n if (index + 1 < appearNum) {\n dom.scrollToElement(firstTabEl, {\n offset: -16.3\n })\n } else {\n dom.scrollToElement(currentTabEl, {\n offset,\n animated: true\n })\n }\n })\n },\n // 三类固定\n onTextClicked(index) {\n // weex下不能完成事件委托\n this.tabCheckedIndex = index\n this.$emit('dofTabSelected', { index: index })\n },\n dotNum(content, max) {\n let value = ''\n let curContent = Number(content)\n if (max && curContent >= max) {\n value = `${max}+`\n } else {\n value = content\n }\n return value\n }\n },\n watch: {\n tabCheckedIndex: {\n handler(n, o) {\n let len = this.tabTitles.length - 1\n len >= +n ? (this.currentPage = +n) : (this.currentPage = len)\n if (len > 4) {\n this.$nextTick(() => {\n this._scrollToCurrentTab(n)\n })\n }\n },\n immediate: true\n }\n }\n}\n</script>\n\n<style scoped>\n.widget {\n /* background-color: #ffffff; */\n height: 88px;\n}\n\n.tab-margin {\n margin-bottom: 16px;\n}\n\n.tab-padding-160 {\n padding: 0 160px;\n}\n\n.tab-padding-40 {\n padding: 0 40px;\n}\n\n.flex-expand-layout {\n flex: 1;\n}\n\n.tab-title-list {\n flex-direction: row;\n justify-content: space-between;\n padding: 0 16px;\n}\n\n.space-around-layout {\n justify-content: space-around;\n}\n\n.padding-layout-32 {\n padding: 0 32px;\n}\n\n.padding-layout-8 {\n padding: 0 8px;\n}\n\n.title-item {\n height: 88px;\n justify-content: center;\n align-items: stretch;\n border-bottom-style: solid;\n /* border-width: 1px; */\n}\n\n.title-item-primary {\n align-items: center;\n}\n\n.tab-text-wrapper {\n height: 82px;\n justify-content: center;\n}\n\n/* tabpage 在dof-minibar内部 */\n.minibar-inner {\n height: 76px;\n}\n\n.thidrd-wrapper {\n flex-direction: row;\n height: 52px;\n padding: 0 30px;\n border-radius: 26px;\n /* background-color: #232323; */\n justify-content: center;\n align-items: center;\n}\n\n.avatar-icon {\n width: 36px;\n height: 36px;\n margin-right: 8px;\n}\n\n.tab-text {\n lines: 1;\n text-overflow: ellipsis;\n font-family: PingFangSC-Regular;\n letter-spacing: 0;\n /* color: #8E969B; */\n}\n\n.third-text {\n font-size: 24px;\n /* color: #1E2E37; */\n}\n\n.border-bottom-line {\n width: 40px;\n height: 6px;\n border-radius: 3px;\n margin-top: -10px;\n /* margin-left: 10px; */\n /* background-color: transparent; */\n}\n\n.border-bottom-line-secondary {\n height: 4px;\n border-radius: 3px;\n margin-top: -2px;\n /* background-color: transparent; */\n}\n\n.dot-bottom-border {\n /* margin-right: 20px; */\n}\n\n/* 新增三类固定标签 */\n\n.thirdTabPanel {\n height: 128px;\n}\n\n.dof-third-panel {\n /* width: 750px; */\n height: 128px;\n flex-direction: row;\n flex-wrap: nowrap;\n align-items: center;\n justify-content: center;\n opacity: 1;\n}\n\n.btn-group-wrap {\n flex-direction: row;\n flex-wrap: nowrap;\n align-items: center;\n justify-content: center;\n border-radius: 64px;\n /* overflow: hidden; */\n}\n\n.btn-text {\n font-family: PingFangSC-Regular;\n color: #ffffff;\n font-size: 28px;\n line-height: 64px;\n padding-left: 32px;\n padding-right: 32px;\n}\n\n.leftRadius {\n border-top-left-radius: 32px;\n border-bottom-left-radius: 32px;\n}\n\n.rightRadius {\n border-top-right-radius: 32px;\n border-bottom-right-radius: 32px;\n}\n\n.dot-tip {\n /* position: absolute; */\n /* top: 34px;\n right: 0px; */\n margin-top: 6px;\n width: 16px;\n height: 16px;\n border-radius: 10px;\n background-color: #f56428;\n}\n\n/* 小红点 */\n.dot-tab-text {\n /* margin-top:8px; */\n padding-top: 10px;\n padding-bottom: 8px;\n}\n\n.flexDirection {\n position: relative;\n flex-direction: row;\n align-items: center;\n align-items: flex-start;\n}\n\n.flexCoulmn {\n}\n\n.dot-num-tip-text {\n /* position:absolute;\n right: 0px;\n top:0; */\n font-size: 24px;\n color: #ffffff;\n border-radius: 100px;\n /* border-width: 1px;\n border-color: #ffffff; */\n background-color: #f56428;\n align-items: center;\n justify-content: center;\n padding-left: 8px;\n padding-right: 8px;\n /* transform: translate(100%, 0); */\n margin-left: -16px;\n /* padding-top: 8px;\n padding-bottom: 8px; */\n}\n\n.dot-num-tip-right {\n /* padding-right: 60px; */\n}\n\n/* 数字小红点下面的选中宽度 */\n.dotNum-bottom-borderWidth {\n /* margin-right: 60px; */\n}\n</style>\n<style scoped src=\"./colmo.css\"></style>\n",null],"sourceRoot":""}]);
8517
+ exports.push([module.i, "\n.widget[data-v-401fdb82] {\n /* background-color: #ffffff; */\n height: 1.17333rem;\n}\n.tab-margin[data-v-401fdb82] {\n margin-bottom: 0.21333rem;\n}\n.tab-padding-160[data-v-401fdb82] {\n padding: 0 2.13333rem;\n}\n.tab-padding-40[data-v-401fdb82] {\n padding: 0 0.53333rem;\n}\n.flex-expand-layout[data-v-401fdb82] {\n -webkit-box-flex: 1;\n -webkit-flex: 1;\n flex: 1;\n}\n.tab-title-list[data-v-401fdb82] {\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 padding: 0 0.21333rem;\n}\n.space-around-layout[data-v-401fdb82] {\n -webkit-justify-content: space-around;\n justify-content: space-around;\n}\n.padding-layout-32[data-v-401fdb82] {\n padding: 0 0.42667rem;\n}\n.padding-layout-8[data-v-401fdb82] {\n padding: 0 0.10667rem;\n}\n.title-item[data-v-401fdb82] {\n height: 1.17333rem;\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 border-bottom-style: solid;\n /* border-width: 1px; */\n}\n.title-item-primary[data-v-401fdb82] {\n -webkit-box-align: center;\n -webkit-align-items: center;\n align-items: center;\n}\n.tab-text-wrapper[data-v-401fdb82] {\n height: 1.09333rem;\n -webkit-box-pack: center;\n -webkit-justify-content: center;\n justify-content: center;\n}\n\n/* tabpage 在dof-minibar内部 */\n.minibar-inner[data-v-401fdb82] {\n height: 1.01333rem;\n}\n.thidrd-wrapper[data-v-401fdb82] {\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -webkit-flex-direction: row;\n flex-direction: row;\n height: 0.69333rem;\n padding: 0 0.4rem;\n border-radius: 0.34667rem;\n /* background-color: #232323; */\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.avatar-icon[data-v-401fdb82] {\n width: 0.48rem;\n height: 0.48rem;\n margin-right: 0.10667rem;\n}\n.tab-text[data-v-401fdb82] {\n lines: 1;\n text-overflow: ellipsis;\n font-family: PingFangSC-Regular;\n letter-spacing: 0;\n /* color: #8E969B; */\n overflow: hidden;\n text-overflow: ellipsis;\n -webkit-line-clamp: 1;\n}\n.third-text[data-v-401fdb82] {\n font-size: 0.32rem;\n /* color: #1E2E37; */\n}\n.border-bottom-line[data-v-401fdb82] {\n width: 0.53333rem;\n height: 0.08rem;\n border-radius: 0.04rem;\n margin-top: -0.13333rem;\n /* margin-left: 10px; */\n /* background-color: transparent; */\n}\n.border-bottom-line-secondary[data-v-401fdb82] {\n height: 0.05333rem;\n border-radius: 0.04rem;\n margin-top: -0.02667rem;\n /* background-color: transparent; */\n}\n.dot-bottom-border[data-v-401fdb82] {\n /* margin-right: 20px; */\n}\n\n/* 新增三类固定标签 */\n.thirdTabPanel[data-v-401fdb82] {\n height: 1.70667rem;\n}\n.dof-third-panel[data-v-401fdb82] {\n /* width: 750px; */\n height: 1.70667rem;\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-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 opacity: 1;\n}\n.btn-group-wrap[data-v-401fdb82] {\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-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: 0.85333rem;\n /* overflow: hidden; */\n}\n.btn-text[data-v-401fdb82] {\n font-family: PingFangSC-Regular;\n color: #ffffff;\n font-size: 0.37333rem;\n line-height: 0.85333rem;\n padding-left: 0.42667rem;\n padding-right: 0.42667rem;\n}\n.leftRadius[data-v-401fdb82] {\n border-top-left-radius: 0.42667rem;\n border-bottom-left-radius: 0.42667rem;\n}\n.rightRadius[data-v-401fdb82] {\n border-top-right-radius: 0.42667rem;\n border-bottom-right-radius: 0.42667rem;\n}\n.dot-tip[data-v-401fdb82] {\n /* position: absolute; */\n /* top: 34px;\n right: 0px; */\n margin-top: 0.08rem;\n width: 0.21333rem;\n height: 0.21333rem;\n border-radius: 0.13333rem;\n background-color: #f56428;\n}\n\n/* 小红点 */\n.dot-tab-text[data-v-401fdb82] {\n /* margin-top:8px; */\n padding-top: 0.13333rem;\n padding-bottom: 0.10667rem;\n}\n.flexDirection[data-v-401fdb82] {\n position: relative;\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-align: start;\n -webkit-align-items: flex-start;\n align-items: flex-start;\n}\n.flexCoulmn[data-v-401fdb82] {\n}\n.dot-num-tip-text[data-v-401fdb82] {\n /* position:absolute;\n right: 0px;\n top:0; */\n font-size: 0.32rem;\n color: #ffffff;\n border-radius: 1.33333rem;\n /* border-width: 1px;\n border-color: #ffffff; */\n background-color: #f56428;\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 /* transform: translate(100%, 0); */\n margin-left: -0.21333rem;\n /* padding-top: 8px;\n padding-bottom: 8px; */\n}\n.dot-num-tip-right[data-v-401fdb82] {\n /* padding-right: 60px; */\n}\n\n/* 数字小红点下面的选中宽度 */\n.dotNum-bottom-borderWidth[data-v-401fdb82] {\n /* margin-right: 60px; */\n}\n", "", {"version":3,"sources":["/Users/wuhm45/Documents/code/weex组件库/dolphin-weex-ui/packages/dof-tab-page/index.vue?37fc58c0","/Users/wuhm45/Documents/code/weex组件库/dolphin-weex-ui/packages/dof-tab-page/<no source>"],"names":[],"mappings":"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","file":"index.vue","sourcesContent":["<template>\n <div\n :class=\"[\n 'widget',\n hasMargin && 'tab-margin',\n tabTitles.length === 2 && !isSlot && type != 'third-group' && 'tab-padding-160',\n tabTitles.length === 3 && !isSlot && type != 'third-group' && 'tab-padding-40',\n isSlot && 'flex-expand-layout',\n type == 'third-group' && 'thirdTabPanel'\n ]\"\n :style=\"{ backgroundColor: mergeStyleOption.bgColor }\"\n >\n <!-- 新增三类固定点击标签 third-group-->\n <div\n :class=\"['dof-third-panel']\"\n v-if=\"type === 'third-group' && !_isColmo\"\n :style=\"{ 'background-color': mergeStyleOption.bgColor }\"\n :accessible=\"true\"\n :aria-label=\"text\"\n >\n <div class=\"btn-group-wrap\" :style=\"wrapStyle\">\n <text\n v-for=\"(text, index) in tabTitles\"\n :key=\"index\"\n :class=\"[\n 'btn-text',\n index == 0 && 'leftRadius',\n index == tabTitles.length - 1 && 'rightRadius',\n !disabled && pattern === 'text' && `dof-text-highlight-${type}`\n ]\"\n :data-index=\"index\"\n :style=\"[\n index < tabTitles.length - 1 ? verticalLineStyle : '',\n textStyle,\n index == tabCheckedIndex ? textBtnStyle(index) : ''\n ]\"\n @click=\"onTextClicked(index)\"\n >{{ text }}</text\n >\n </div>\n </div>\n <dof-diamond-tab\n v-if=\"type === 'third-group' && _isColmo\"\n :tabData=\"tabTitles\"\n :bgColor=\"'#151617'\"\n :activeTextColor=\"'rgb(230, 230, 230)'\"\n :touchColor=\"'rgb(26, 26, 26)'\"\n :textFontSize=\"'28px'\"\n :active=\"tabCheckedIndex\"\n @tabActiveChange=\"tabActiveChange\"\n />\n <!-- 三级标签页 third 带了图标 以及文字有背景色和圆角-->\n <scroller\n :class=\"['tab-title-list', tabTitles.length <= 5 && 'space-around-layout']\"\n :show-scrollbar=\"false\"\n scroll-direction=\"horizontal\"\n v-if=\"type === 'third'\"\n >\n <div\n :class=\"['title-item', tabTitles.length > 5 && 'padding-layout-8']\"\n v-for=\"(v, index) in tabTitles\"\n :key=\"index\"\n :ref=\"'dof-tab-title-' + index\"\n @click=\"onClicked(index, tabTitles.length - 1)\"\n >\n <div\n class=\"tab-text-wrapper thidrd-wrapper\"\n :style=\"{\n backgroundColor:\n currentPage === index\n ? mergeStyleOption.activeBoxBgColor\n : (v.icon || v.activeIcon) && !_isDiablo\n ? 'transparent'\n : mergeStyleOption.boxBgColor,\n borderColor:\n currentPage === index && mergeStyleOption.activeBorderColor\n ? mergeStyleOption.activeBorderColor\n : mergeStyleOption.borderColor\n }\"\n >\n <image class=\"avatar-icon\" v-if=\"v.icon || v.activeIcon\" :src=\"currentPage === index ? v.activeIcon : v.icon\">\n </image>\n <text\n class=\"tab-text third-text\"\n :style=\"{\n fontWeight: currentPage === index && mergeStyleOption.isActiveTitleBold ? 'normal' : 'normal',\n color: currentPage === index ? mergeStyleOption.activeTitleColor : mergeStyleOption.titleColor\n }\"\n >{{ v.title }}</text\n >\n </div>\n </div>\n </scroller>\n <!-- 一级和二级标签 else-->\n <!-- :style=\"{backgroundColor: '#00A4F2'}\" -->\n <scroller\n :class=\"['tab-title-list', tabTitles.length <= 5 && 'space-around-layout']\"\n :show-scrollbar=\"false\"\n scroll-direction=\"horizontal\"\n v-if=\"type !== 'third' && type !== 'third-group'\"\n >\n <div\n :class=\"['title-item', tabTitles.length > 5 && 'padding-layout-32', type == 'primary' && 'title-item-primary']\"\n v-for=\"(v, index) in tabTitles\"\n :key=\"index\"\n :ref=\"'dof-tab-title-' + index\"\n @click=\"onClicked(index, tabTitles.length - 1)\"\n >\n <div :class=\"['tab-text-wrapper', isSlot && 'minibar-inner']\">\n <div class=\"flexDirection\" :class=\"[v.hasDotNum && 'dot-num-tip-right']\">\n <text\n :class=\"['tab-text', 'dot-tab-text']\"\n :style=\"{\n fontSize: type === 'primary' ? '32px' : '28px',\n fontWeight: currentPage === index && mergeStyleOption.isActiveTitleBold ? 'normal' : 'normal',\n color: currentPage === index ? mergeStyleOption.activeTitleColor : mergeStyleOption.titleColor\n }\"\n >{{ v.title }}</text\n >\n <div v-if=\"v.hasDotTip\">\n <div class=\"dot-tip\" :style=\"{ 'background-color': v.badgeColor ? v.badgeColor : '#F56428' }\"></div>\n </div>\n <text\n class=\"dot-num-tip-text\"\n :style=\"{ 'background-color': v.badgeColor ? v.badgeColor : '#F56428' }\"\n v-else-if=\"v.hasDotNum\"\n >{{ dotNum(v.hasDotNum, v.badgeMax) }}</text\n >\n </div>\n </div>\n <div\n v-if=\"type !== 'third' && type !== 'third-group'\"\n :class=\"[\n type == 'primary' ? 'border-bottom-line' : 'border-bottom-line-secondary',\n v.hasDotTip && 'dot-bottom-border',\n v.hasDotNum && 'dotNum-bottom-borderWidth'\n ]\"\n :style=\"{\n backgroundColor: currentPage === index ? mergeStyleOption.activeBottomColor : 'transparent'\n }\"\n ></div>\n </div>\n </scroller>\n </div>\n</template>\n\n<script>\nconst dom = weex.requireModule('dom')\nimport { THEME_COLOR_SET } from '../../theme/config'\nimport ColmoMixin from '../../mixins/colmo'\nimport DofDiamondTab from '../dof-diamond-tab'\nimport DiabloMixin from '../../mixins/diablo'\n\nexport default {\n mixins: [ColmoMixin, DiabloMixin],\n components: { DofDiamondTab },\n props: {\n type: {\n type: String,\n default: 'secondary'\n },\n theme: {\n type: String,\n default: 'default'\n },\n isSlot: {\n type: Boolean,\n default: false\n },\n tabTitles: {\n type: Array,\n default: () => []\n },\n tabCheckedIndex: {\n type: [Number, String],\n default: 0\n },\n tabStyles: {\n type: Object,\n default: () => ({})\n },\n hasMargin: {\n type: Boolean,\n default: false\n },\n bgColor: {\n type: String,\n default: ''\n }\n },\n data: () => ({\n currentPage: 0\n }),\n computed: {\n defaultStyleOption() {\n const base = {\n isActiveTitleBold: true,\n iconWidth: 70,\n iconHeight: 70,\n height: 88,\n fontSize: 24,\n hasActiveBottom: true,\n activeBottomColor: '#1E2E37',\n hasRightIcon: false\n }\n const defaultStyle = {\n ...base,\n bgColor: '#ffffff',\n titleColor: '#8E969B',\n activeTitleColor: '#1E2E37',\n boxBgColor: '#F6F7F9',\n activeBoxBgColor: '#232323'\n }\n const colmoStyle = {\n ...base,\n isActiveTitleBold: false,\n bgColor: '#151617',\n titleColor: 'rgba(255,255,255,0.4)',\n activeTitleColor: 'rgba(255,255,255,0.8)',\n boxBgColor: '#151617',\n activeBoxBgColor: '#151617',\n activeBottomColor: '#B35336',\n borderColor: 'rgba(51, 51, 51, 1)',\n activeBorderColor: '#B35336'\n }\n const diabloStyle = {\n ...base,\n bgColor: '#101315',\n titleColor: '#8E969B',\n activeTitleColor: '#cfcfd0',\n activeBottomColor: '#cfcfd0',\n boxBgColor: '#171c1f',\n activeBoxBgColor: '#cfcfd0'\n }\n return this._isColmo ? colmoStyle : (this._isDiablo ? diabloStyle : defaultStyle)\n },\n mergeStyleOption() {\n let { type, theme, tabStyles, defaultStyleOption } = this\n if (type === 'third') {\n if (this._isColmo) {\n let res = { ...defaultStyleOption, ...tabStyles }\n if (this.bgColor) res.bgColor = this.bgColor\n return res\n }\n if (theme === 'default') {\n return {\n ...defaultStyleOption,\n ...{\n activeTitleColor: this._isDiablo ? '#1e2e37' : '#fff',\n titleColor: this._isDiablo ? 'rgba(255,255,255,0.4)' : '#1e2e37'\n },\n ...tabStyles\n }\n } else if (theme === 'primary') {\n return {\n ...defaultStyleOption,\n ...tabStyles,\n ...{\n bgColor: THEME_COLOR_SET[theme],\n // boxBgColor: '#5088ff',\n boxBgColor: THEME_BOX_BGCOLOR_SET[theme],\n activeBoxBgColor: '#ffffff',\n titleColor: '#ffffff',\n activeTitleColor: THEME_COLOR_SET[theme]\n }\n }\n } else {\n return { ...defaultStyleOption, ...tabStyles, ...{ boxBgColor: THEME_BOX_BGCOLOR_SET[theme] } }\n }\n } else if (type === 'third-group') {\n if (this._isColmo) return { bgColor: '#151617' }\n return { bgColor: this._isDiablo ? '#101315' : THEME_COLOR_SET[theme] }\n } else {\n if (theme === 'default') {\n let res = this.bgColor ? { bgColor: this.bgColor } : {}\n return { ...defaultStyleOption, ...tabStyles, ...res }\n } else {\n return {\n ...defaultStyleOption,\n ...tabStyles,\n ...{\n bgColor: THEME_COLOR_SET[theme],\n titleColor: 'rgba(255,255,255, 0.6)',\n activeTitleColor: '#ffffff',\n activeBottomColor: '#ffffff'\n }\n }\n }\n }\n },\n\n // 新增三类固定标签\n wrapStyle() {\n const { theme } = this\n if (theme == 'default') {\n return {\n borderWidth: '2px',\n borderStyle: 'solid',\n borderColor: this._isDiablo ? '#1E2123' : '#f3f4f4'\n }\n } else {\n return {\n borderWidth: '2px',\n borderStyle: 'solid',\n borderColor: 'rgba(255, 255, 255, 0.3)'\n }\n }\n },\n\n textStyle() {\n const { theme } = this\n if (theme == 'default') {\n return {\n color: this._isDiablo ? '#797c7e' : '#8E969B'\n }\n } else {\n return {\n color: '#ffffff'\n }\n }\n },\n verticalLineStyle() {\n const { theme } = this\n if (theme == 'default') {\n return {\n borderRightWidth: '2px',\n borderRightStyle: 'solid',\n borderRightColor: this._isDiablo ? '#1E2123' : '#f3f4f4'\n }\n } else {\n return {\n borderRightWidth: '2px',\n borderRightStyle: 'solid',\n borderRightColor: 'rgba(255, 255, 255, 0.3)'\n }\n }\n },\n hackMarginTop() {\n // const platform = weex.config.env.platform\n // if (platform === 'iOS') return -1\n // if (platform === 'harmony') return 0\n // return 2\n return 0\n },\n textBtnStyle() {\n const { theme } = this\n let hackH = this.hackMarginTop\n return function(i) {\n if (theme == 'default') {\n return {\n color: this._isDiablo ? '#cfcfd0' : '#1E2E37',\n backgroundColor: this._isDiablo ? '#1E2123' : '#f3f4f4',\n marginTop: `${hackH}px`\n }\n } else {\n return {\n color: THEME_COLOR_SET[theme],\n backgroundColor: '#FFFFFF',\n marginTop: `${hackH}px`\n }\n }\n }\n }\n },\n methods: {\n onClicked(index, len) {\n this.currentPage = index\n this.$emit('dofTabSelected', { index: index })\n len > 4 && this._scrollToCurrentTab(index)\n },\n tabActiveChange(index) {\n this.onClicked(index)\n },\n _scrollToCurrentTab(index) {\n const currentTabEl = this.$refs[`dof-tab-title-${index}`][0]\n const firstTabEl = this.$refs['dof-tab-title-0'][0]\n const SAFE_DISTANCE = 16.3\n\n dom.getComponentRect(currentTabEl, res => {\n let {\n size: { height, width = 110, left }\n } = res\n const appearNum = Math.floor(750 / (width + SAFE_DISTANCE))\n let offset = (-(750 - width) / 2) | 0\n\n if (index + 1 < appearNum) {\n dom.scrollToElement(firstTabEl, {\n offset: -16.3\n })\n } else {\n dom.scrollToElement(currentTabEl, {\n offset,\n animated: true\n })\n }\n })\n },\n // 三类固定\n onTextClicked(index) {\n // weex下不能完成事件委托\n this.tabCheckedIndex = index\n this.$emit('dofTabSelected', { index: index })\n },\n dotNum(content, max) {\n let value = ''\n let curContent = Number(content)\n if (max && curContent >= max) {\n value = `${max}+`\n } else {\n value = content\n }\n return value\n }\n },\n watch: {\n tabCheckedIndex: {\n handler(n, o) {\n let len = this.tabTitles.length - 1\n len >= +n ? (this.currentPage = +n) : (this.currentPage = len)\n if (len > 4) {\n this.$nextTick(() => {\n this._scrollToCurrentTab(n)\n })\n }\n },\n immediate: true\n }\n }\n}\n</script>\n\n<style scoped>\n.widget {\n /* background-color: #ffffff; */\n height: 88px;\n}\n\n.tab-margin {\n margin-bottom: 16px;\n}\n\n.tab-padding-160 {\n padding: 0 160px;\n}\n\n.tab-padding-40 {\n padding: 0 40px;\n}\n\n.flex-expand-layout {\n flex: 1;\n}\n\n.tab-title-list {\n flex-direction: row;\n justify-content: space-between;\n padding: 0 16px;\n}\n\n.space-around-layout {\n justify-content: space-around;\n}\n\n.padding-layout-32 {\n padding: 0 32px;\n}\n\n.padding-layout-8 {\n padding: 0 8px;\n}\n\n.title-item {\n height: 88px;\n justify-content: center;\n align-items: stretch;\n border-bottom-style: solid;\n /* border-width: 1px; */\n}\n\n.title-item-primary {\n align-items: center;\n}\n\n.tab-text-wrapper {\n height: 82px;\n justify-content: center;\n}\n\n/* tabpage 在dof-minibar内部 */\n.minibar-inner {\n height: 76px;\n}\n\n.thidrd-wrapper {\n flex-direction: row;\n height: 52px;\n padding: 0 30px;\n border-radius: 26px;\n /* background-color: #232323; */\n justify-content: center;\n align-items: center;\n}\n\n.avatar-icon {\n width: 36px;\n height: 36px;\n margin-right: 8px;\n}\n\n.tab-text {\n lines: 1;\n text-overflow: ellipsis;\n font-family: PingFangSC-Regular;\n letter-spacing: 0;\n /* color: #8E969B; */\n}\n\n.third-text {\n font-size: 24px;\n /* color: #1E2E37; */\n}\n\n.border-bottom-line {\n width: 40px;\n height: 6px;\n border-radius: 3px;\n margin-top: -10px;\n /* margin-left: 10px; */\n /* background-color: transparent; */\n}\n\n.border-bottom-line-secondary {\n height: 4px;\n border-radius: 3px;\n margin-top: -2px;\n /* background-color: transparent; */\n}\n\n.dot-bottom-border {\n /* margin-right: 20px; */\n}\n\n/* 新增三类固定标签 */\n\n.thirdTabPanel {\n height: 128px;\n}\n\n.dof-third-panel {\n /* width: 750px; */\n height: 128px;\n flex-direction: row;\n flex-wrap: nowrap;\n align-items: center;\n justify-content: center;\n opacity: 1;\n}\n\n.btn-group-wrap {\n flex-direction: row;\n flex-wrap: nowrap;\n align-items: center;\n justify-content: center;\n border-radius: 64px;\n /* overflow: hidden; */\n}\n\n.btn-text {\n font-family: PingFangSC-Regular;\n color: #ffffff;\n font-size: 28px;\n line-height: 64px;\n padding-left: 32px;\n padding-right: 32px;\n}\n\n.leftRadius {\n border-top-left-radius: 32px;\n border-bottom-left-radius: 32px;\n}\n\n.rightRadius {\n border-top-right-radius: 32px;\n border-bottom-right-radius: 32px;\n}\n\n.dot-tip {\n /* position: absolute; */\n /* top: 34px;\n right: 0px; */\n margin-top: 6px;\n width: 16px;\n height: 16px;\n border-radius: 10px;\n background-color: #f56428;\n}\n\n/* 小红点 */\n.dot-tab-text {\n /* margin-top:8px; */\n padding-top: 10px;\n padding-bottom: 8px;\n}\n\n.flexDirection {\n position: relative;\n flex-direction: row;\n align-items: center;\n align-items: flex-start;\n}\n\n.flexCoulmn {\n}\n\n.dot-num-tip-text {\n /* position:absolute;\n right: 0px;\n top:0; */\n font-size: 24px;\n color: #ffffff;\n border-radius: 100px;\n /* border-width: 1px;\n border-color: #ffffff; */\n background-color: #f56428;\n align-items: center;\n justify-content: center;\n padding-left: 8px;\n padding-right: 8px;\n /* transform: translate(100%, 0); */\n margin-left: -16px;\n /* padding-top: 8px;\n padding-bottom: 8px; */\n}\n\n.dot-num-tip-right {\n /* padding-right: 60px; */\n}\n\n/* 数字小红点下面的选中宽度 */\n.dotNum-bottom-borderWidth {\n /* margin-right: 60px; */\n}\n</style>\n<style scoped src=\"./colmo.css\"></style>\n",null],"sourceRoot":""}]);
8518
8518
 
8519
8519
  // exports
8520
8520
 
@@ -8948,7 +8948,7 @@ exports = module.exports = __webpack_require__(0)(true);
8948
8948
 
8949
8949
 
8950
8950
  // module
8951
- exports.push([module.i, "\n.checkbox[data-v-60711b04] {\n width: 0.48rem;\n height: 0.48rem;\n}\n.avatar[data-v-60711b04] {\n width: 1.28rem;\n height: 1.28rem;\n margin-left: 0.42667rem;\n /* margin-right: 24px; */\n background-color: #f8f8f8;\n border-radius: 0.64rem;\n overflow: hidden;\n}\n.item-img[data-v-60711b04] {\n width: 1.28rem;\n height: 1.28rem;\n}\n.dof-cell[data-v-60711b04] {\n /* height: 160px; */\n position: relative;\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: center;\n -webkit-align-items: center;\n align-items: center;\n padding-left: 0.42667rem;\n /* padding-right: 32px; */\n background-color: inherit;\n}\n.checkBox-top-border[data-v-60711b04] {\n border-bottom-color: #dddddd;\n border-bottom-width: 1px;\n}\n.checkBox-bottom-border[data-v-60711b04] {\n border-bottom-color: #dddddd;\n border-bottom-width: 1px;\n}\n.fakeSubBorder[data-v-60711b04] {\n height: 1px;\n position: absolute;\n right: 0;\n bottom: 0;\n background-color: #dddddd;\n left: 1.14667rem;\n}\n.active-cell[data-v-60711b04]:active {\n background-color: #f5f5f5;\n}\n.main-wrapper[data-v-60711b04] {\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-right: 0.42667rem;\n margin-left: 0.32rem;\n}\n.content-title[data-v-60711b04] {\n -webkit-box-flex: 1;\n -webkit-flex: 1;\n flex: 1;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -webkit-flex-direction: column;\n flex-direction: column;\n /* align-items: flex-start; */\n -webkit-box-pack: start;\n -webkit-justify-content: flex-start;\n justify-content: flex-start;\n}\n.cell-title[data-v-60711b04] {\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 -webkit-box-flex: 1;\n -webkit-flex: 1;\n flex: 1;\n}\n.title-text[data-v-60711b04] {\n font-family: PingFangSC-Regular;\n font-size: 0.42667rem;\n color: #1e2e37;\n lines: 1;\n text-overflow: ellipsis;\n overflow: hidden;\n /* max-width:398px; */\n /* flex:1; */\n overflow: hidden;\n text-overflow: ellipsis;\n -webkit-line-clamp: 1;\n}\n.title-flex-expand[data-v-60711b04] {\n -webkit-box-flex: 1;\n -webkit-flex: 1;\n flex: 1;\n}\n.cell-title-btn[data-v-60711b04] {\n font-family: PingFangSC-Medium;\n font-size: 0.32rem;\n height: 0.64rem;\n line-height: 0.64rem;\n padding-left: 0.26667rem;\n padding-right: 0.26667rem;\n border-radius: 0.32rem;\n margin-left: 0.26667rem;\n color: #616c73;\n background-color: #f6f7f9;\n max-width: 4.66667rem;\n overflow: hidden;\n text-overflow: clip;\n}\n.sub-title[data-v-60711b04] {\n margin-top: 0.21333rem;\n /* flex-direction: row; */\n}\n.sub-text[data-v-60711b04] {\n font-family: 'PingFangSC-Regular';\n font-size: 0.32rem;\n color: #8e969b;\n lines: 1;\n text-overflow: ellipsis;\n overflow: hidden;\n -webkit-box-flex: 1;\n -webkit-flex: 1;\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n -webkit-line-clamp: 1;\n}\n.cell-top-border[data-v-60711b04] {\n border-top-color: #dddddd;\n border-top-width: 1px;\n}\n.cell-bottom-border[data-v-60711b04] {\n border-bottom-width: 1px;\n border-bottom-style: solid;\n border-bottom-color: #dddddd;\n}\n.cell-arrow-icon[data-v-60711b04] {\n width: 0.53333rem;\n height: 0.53333rem;\n}\n.checkbox-disabled[data-v-60711b04] {\n opacity: 0.3;\n}\n", "", {"version":3,"sources":["/Users/wuhm45/Documents/code/weex组件库/dolphin-weex-ui/packages/dof-checkbox/index.vue?43a1d52e","/Users/wuhm45/Documents/code/weex组件库/dolphin-weex-ui/packages/dof-checkbox/<no source>"],"names":[],"mappings":";AA6DA;EACA,eAAA;EACA,gBAAA;CACA;AAEA;EACA,eAAA;EACA,gBAAA;EACA,wBAAA;EACA,yBAAA;EACA,0BAAA;EACA,uBAAA;EACA,iBAAA;CACA;AAEA;EACA,eAAA;EACA,gBAAA;CACA;AAEA;EACA,oBAAA;EACA,mBAAA;EACA,+BAAA;EAAA,8BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,0BAAA;EAAA,uCAAA;UAAA,+BAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,yBAAA;EACA,0BAAA;EACA,0BAAA;CACA;AAEA;EACA,6BAAA;EACA,yBAAA;CACA;AAEA;EACA,6BAAA;EACA,yBAAA;CACA;AAEA;EACA,YAAA;EACA,mBAAA;EACA,SAAA;EACA,UAAA;EACA,0BAAA;EACA,iBAAA;CACA;AAEA;EACA,0BAAA;CACA;AAEA;EACA,oBAAA;EAAA,gBAAA;UAAA,QAAA;EACA,+BAAA;EAAA,8BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,0BAAA;EACA,qBAAA;CACA;AAEA;EACA,oBAAA;EAAA,gBAAA;UAAA,QAAA;EACA,6BAAA;EAAA,8BAAA;EAAA,+BAAA;UAAA,uBAAA;EACA,8BAAA;EACA,wBAAA;EAAA,oCAAA;UAAA,4BAAA;CACA;AAEA;EACA,+BAAA;EAAA,8BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,wBAAA;EAAA,oCAAA;UAAA,4BAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,oBAAA;EAAA,gBAAA;UAAA,QAAA;CACA;AAEA;EACA,gCAAA;EACA,sBAAA;EACA,eAAA;EACA,SAAA;EACA,wBAAA;EACA,iBAAA;EACA,sBAAA;EACA,aAAA;ECjJA,iBAAA;EAAA,wBAAA;EAAA,sBAAA;CDkJA;AAEA;EACA,oBAAA;EAAA,gBAAA;UAAA,QAAA;CACA;AAEA;EACA,+BAAA;EACA,mBAAA;EACA,gBAAA;EACA,qBAAA;EACA,yBAAA;EACA,0BAAA;EACA,uBAAA;EACA,wBAAA;EACA,eAAA;EACA,0BAAA;EACA,sBAAA;EACA,iBAAA;EACA,oBAAA;CACA;AAEA;EACA,uBAAA;EACA,0BAAA;CACA;AAEA;EACA,kCAAA;EACA,mBAAA;EACA,eAAA;EACA,SAAA;EACA,wBAAA;EACA,iBAAA;EACA,oBAAA;EAAA,gBAAA;UAAA,QAAA;ECpLA,iBAAA;EAAA,wBAAA;EAAA,sBAAA;CDqLA;AAEA;EACA,0BAAA;EACA,sBAAA;CACA;AAEA;EACA,yBAAA;EACA,2BAAA;EACA,6BAAA;CACA;AAEA;EACA,kBAAA;EACA,mBAAA;CACA;AAEA;EACA,aAAA;CACA","file":"index.vue","sourcesContent":["<template>\n <div\n :key=\"_isColmo + 'checkbox'\"\n :class=\"[\n 'dof-cell',\n !disabled && 'active-cell',\n hasTopBorder && 'cell-top-border',\n hasBottomBorder && 'cell-bottom-border',\n disabled && 'checkbox-disabled'\n ]\"\n :style=\"cellDynamicHeight\"\n @click=\"dofCellClick\"\n >\n <image v-if=\"!_isColmo\" :src=\"checkIcon\" slot=\"value\" :class=\"['checkbox', disabled && 'checkbox-icon-disabled']\"></image>\n <div\n v-if=\"_isColmo\"\n slot=\"value\"\n class=\"circle\"\n :style=\"{\n backgroundColor: innerChecked ? '#b35336' : 'transparent',\n borderColor: innerChecked ? 'transparent' : '#797979'\n }\"\n >\n <dof-iconfont\n v-if=\"innerChecked\"\n style=\"width: 40px\"\n :code=\"'\\u4729'\"\n :size=\"40\"\n :color=\"'rgba(255, 255, 255, 0.8)'\"\n ></dof-iconfont>\n </div>\n <div class=\"avatar\" v-if=\"itemImg && itemImg != ''\">\n <image v-if=\"itemImg && itemImg != ''\" :src=\"itemImg\" class=\"item-img\"> </image>\n </div>\n\n <div\n :class=\"[\n 'main-wrapper',\n hasSubTopBorder && 'checkBox-top-border',\n itemImg && hasSubBottomBorder && 'checkBox-bottom-border'\n ]\"\n :style=\"dynamicSizeComp\"\n >\n <div class=\"content-title\" :style=\"titleDynamicHeight\">\n <div class=\"cell-title\">\n <text :class=\"['title-text', isOverflow && 'title-flex-expand']\" slot=\"title\" ref=\"titleBox\">{{\n title\n }}</text>\n <text v-if=\"tag\" class=\"cell-title-btn\" ref=\"tagBox\">{{ tag }}</text>\n </div>\n <div v-if=\"desc\" class=\"sub-title\">\n <text class=\"sub-text\" slot=\"sub-text\">{{ desc }}</text>\n </div>\n </div>\n <dof-image :src=\"ARROW_ICON\" class=\"cell-arrow-icon\" v-if=\"hasArrow\"></dof-image>\n </div>\n <div v-if=\"!itemImg && hasSubBottomBorder\" class=\"fakeSubBorder\"></div>\n </div>\n</template>\n\n<style scoped>\n.checkbox {\n width: 36px;\n height: 36px;\n}\n\n.avatar {\n width: 96px;\n height: 96px;\n margin-left: 32px;\n /* margin-right: 24px; */\n background-color: #f8f8f8;\n border-radius: 48px;\n overflow: hidden;\n}\n\n.item-img {\n width: 96px;\n height: 96px;\n}\n\n.dof-cell {\n /* height: 160px; */\n position: relative;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n padding-left: 32px;\n /* padding-right: 32px; */\n background-color: inherit;\n}\n\n.checkBox-top-border {\n border-bottom-color: #dddddd;\n border-bottom-width: 1px;\n}\n\n.checkBox-bottom-border {\n border-bottom-color: #dddddd;\n border-bottom-width: 1px;\n}\n\n.fakeSubBorder {\n height: 1px;\n position: absolute;\n right: 0;\n bottom: 0;\n background-color: #dddddd;\n left: 86px;\n}\n\n.active-cell:active {\n background-color: #f5f5f5;\n}\n\n.main-wrapper {\n flex: 1;\n flex-direction: row;\n align-items: center;\n padding-right: 32px;\n margin-left: 24px;\n}\n\n.content-title {\n flex: 1;\n flex-direction: column;\n /* align-items: flex-start; */\n justify-content: flex-start;\n}\n\n.cell-title {\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n flex: 1;\n}\n\n.title-text {\n font-family: PingFangSC-Regular;\n font-size: 32px;\n color: #1e2e37;\n lines: 1;\n text-overflow: ellipsis;\n overflow: hidden;\n /* max-width:398px; */\n /* flex:1; */\n}\n\n.title-flex-expand {\n flex: 1;\n}\n\n.cell-title-btn {\n font-family: PingFangSC-Medium;\n font-size: 24px;\n height: 48px;\n line-height: 48px;\n padding-left: 20px;\n padding-right: 20px;\n border-radius: 24px;\n margin-left: 20px;\n color: #616c73;\n background-color: #f6f7f9;\n max-width: 350px;\n overflow: hidden;\n text-overflow: clip;\n}\n\n.sub-title {\n margin-top: 16px;\n /* flex-direction: row; */\n}\n\n.sub-text {\n font-family: 'PingFangSC-Regular';\n font-size: 24px;\n color: #8e969b;\n lines: 1;\n text-overflow: ellipsis;\n overflow: hidden;\n flex: 1;\n}\n\n.cell-top-border {\n border-top-color: #dddddd;\n border-top-width: 1px;\n}\n\n.cell-bottom-border {\n border-bottom-width: 1px;\n border-bottom-style: solid;\n border-bottom-color: #dddddd;\n}\n\n.cell-arrow-icon {\n width: 40px;\n height: 40px;\n}\n\n.checkbox-disabled {\n opacity: 0.3;\n}\n</style>\n<style scoped src=\"./colmo.css\"></style>\n<style scoped src=\"./diablo.css\"></style>\n\n<script>\nimport ColmoMixin from '../../mixins/colmo'\nimport DiabloMixin from '../../mixins/diablo'\nimport DofIconfont from '../dof-iconfont'\nconst dom = weex.requireModule('dom')\nconst icon = require('../setting/icon.base64.js')\n// var CHECKED = icon['public_ic_done@2x'];\n// var UNCHECKED = icon['unchecked'];\n// var CHECKED_DISABLED = icon['dischecked'];\n// var UNCHECKED_DISABLED = icon['disuncheked'];\nvar UNCHECKED = icon['icon_checkbox_unselect']\nvar UNCHECKEDDIABLO = icon['icon_checkbox_unselect_diablo']\nvar CHECKED = icon['icon_checkbox_selected']\nvar CHECKEDDIABLO = icon['icon_checkbox_selected_diablo']\nvar ARROW_ICON = icon['public_ic_more@3x']\nconst WIDTH = 498 // hack\nexport default {\n mixins: [ColmoMixin, DiabloMixin],\n components: { DofIconfont },\n props: {\n hasTopBorder: {\n type: Boolean,\n default: false\n },\n hasSubTopBorder: {\n type: Boolean,\n default: false\n },\n hasBottomBorder: {\n type: Boolean,\n default: false\n },\n hasSubBottomBorder: {\n type: Boolean,\n default: false\n },\n\n title: {\n type: String,\n require: true\n },\n\n tag: {\n type: String,\n default: ''\n },\n value: {\n type: [String, Number, Object],\n require: true\n },\n disabled: {\n type: Boolean,\n default: false\n },\n checked: {\n type: Boolean,\n default: false\n },\n desc: {\n type: String,\n default: ''\n },\n itemImg: {\n type: String,\n default: ''\n },\n hasArrow: {\n type: Boolean,\n default: false\n }\n },\n data: () => ({\n innerChecked: false,\n isOverflow: false,\n titleWidth: 0,\n tagWidth: 0\n }),\n watch: {\n title: {\n handler(newValue, oldValue) {\n if (newValue) {\n this.$nextTick(() => {\n this.isOverflow = this.titleWidth + this.tagWidth > WIDTH\n })\n }\n },\n immediate: true\n }\n },\n created() {\n const { checked, disabled } = this\n this.innerChecked = checked\n },\n computed: {\n icon () {\n return [this._isDiablo ? CHECKEDDIABLO : CHECKED, this._isDiablo ? UNCHECKEDDIABLO : UNCHECKED]\n },\n checkIcon() {\n const { icon, disabled, innerChecked } = this\n return icon[innerChecked ? 0 : 1]\n },\n // item动态高度 由desc撑开\n // dynamicSizeComp() {\n // if (this.itemImg) {\n // return {\n // height: '160px'\n // }\n // } else {\n // return { }\n // }\n // },\n dynamicSizeComp() {\n if (this.desc || this.itemImg) {\n return {\n height: '160.5px' //有subtitle或者图片时的高度\n }\n } else {\n return {\n // height: '80px' ////无subtitle和无图片时的高度\n }\n }\n },\n\n cellDynamicHeight() {\n if (!this.desc && !this.itemImg) {\n return {\n // height: '82px' ////无subtitle和无图片时的高度\n }\n }\n return {}\n },\n\n titleDynamicHeight() {\n if (!this.desc && !this.itemImg) {\n return {\n height: this._isColmo ? '104px' : '80px' ////无subtitle和无图片时的高度\n }\n }\n return {}\n }\n },\n\n methods: {\n dofCellClick() {\n const { disabled, innerChecked, value } = this\n if (!disabled) {\n this.innerChecked = !innerChecked\n this.$emit('dofCheckBoxItemChecked', { value, checked: this.innerChecked })\n }\n },\n dynamicIsOverflow() {\n // ios下面 对于这个动态的设置flex=1,或者max-width都会 偶现不生效。\n this.$nextTick(() => {\n setTimeout(() => {\n const result = dom.getComponentRect(this.$refs.tagBox, option => {\n const result2 = dom.getComponentRect(this.$refs.titleBox, titleResult => {\n this.titleWidth = titleResult.size && titleResult.size.width\n this.tagWidth = option.size && option.size.width\n this.isOverflow = this.titleWidth + this.tagWidth > WIDTH\n })\n })\n }, 60)\n })\n }\n },\n mounted() {\n this.dynamicIsOverflow()\n }\n}\n</script>\n",null],"sourceRoot":""}]);
8951
+ exports.push([module.i, "\n.checkbox[data-v-60711b04] {\n width: 0.48rem;\n height: 0.48rem;\n}\n.avatar[data-v-60711b04] {\n width: 1.28rem;\n height: 1.28rem;\n margin-left: 0.42667rem;\n /* margin-right: 24px; */\n background-color: #f8f8f8;\n border-radius: 0.64rem;\n overflow: hidden;\n}\n.item-img[data-v-60711b04] {\n width: 1.28rem;\n height: 1.28rem;\n}\n.dof-cell[data-v-60711b04] {\n /* height: 160px; */\n position: relative;\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: center;\n -webkit-align-items: center;\n align-items: center;\n padding-left: 0.42667rem;\n /* padding-right: 32px; */\n background-color: inherit;\n}\n.checkBox-top-border[data-v-60711b04] {\n border-bottom-color: #dddddd;\n border-bottom-width: 1px;\n}\n.checkBox-bottom-border[data-v-60711b04] {\n border-bottom-color: #dddddd;\n border-bottom-width: 1px;\n}\n.fakeSubBorder[data-v-60711b04] {\n height: 1px;\n position: absolute;\n right: 0;\n bottom: 0;\n background-color: #dddddd;\n left: 1.14667rem;\n}\n.active-cell[data-v-60711b04]:active {\n background-color: #f5f5f5;\n}\n.main-wrapper[data-v-60711b04] {\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-right: 0.42667rem;\n margin-left: 0.32rem;\n}\n.content-title[data-v-60711b04] {\n -webkit-box-flex: 1;\n -webkit-flex: 1;\n flex: 1;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -webkit-flex-direction: column;\n flex-direction: column;\n /* align-items: flex-start; */\n -webkit-box-pack: start;\n -webkit-justify-content: flex-start;\n justify-content: flex-start;\n}\n.cell-title[data-v-60711b04] {\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 -webkit-box-flex: 1;\n -webkit-flex: 1;\n flex: 1;\n}\n.title-text[data-v-60711b04] {\n font-family: PingFangSC-Regular;\n font-size: 0.42667rem;\n color: #1e2e37;\n lines: 1;\n text-overflow: ellipsis;\n overflow: hidden;\n /* max-width:398px; */\n /* flex:1; */\n overflow: hidden;\n text-overflow: ellipsis;\n -webkit-line-clamp: 1;\n}\n.title-flex-expand[data-v-60711b04] {\n -webkit-box-flex: 1;\n -webkit-flex: 1;\n flex: 1;\n}\n.cell-title-btn[data-v-60711b04] {\n font-family: PingFangSC-Medium;\n font-size: 0.32rem;\n height: 0.64rem;\n line-height: 0.64rem;\n padding-left: 0.26667rem;\n padding-right: 0.26667rem;\n border-radius: 0.32rem;\n margin-left: 0.26667rem;\n color: #616c73;\n background-color: #f6f7f9;\n max-width: 4.66667rem;\n overflow: hidden;\n text-overflow: clip;\n}\n.sub-title[data-v-60711b04] {\n margin-top: 0.21333rem;\n /* flex-direction: row; */\n}\n.sub-text[data-v-60711b04] {\n font-family: 'PingFangSC-Regular';\n font-size: 0.32rem;\n color: #8e969b;\n lines: 1;\n text-overflow: ellipsis;\n overflow: hidden;\n -webkit-box-flex: 1;\n -webkit-flex: 1;\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n -webkit-line-clamp: 1;\n}\n.cell-top-border[data-v-60711b04] {\n border-top-color: #dddddd;\n border-top-width: 1px;\n}\n.cell-bottom-border[data-v-60711b04] {\n border-bottom-width: 1px;\n border-bottom-style: solid;\n border-bottom-color: #dddddd;\n}\n.cell-arrow-icon[data-v-60711b04] {\n width: 0.53333rem;\n height: 0.53333rem;\n}\n.checkbox-disabled[data-v-60711b04] {\n opacity: 0.3;\n}\n", "", {"version":3,"sources":["/Users/wuhm45/Documents/code/weex组件库/dolphin-weex-ui/packages/dof-checkbox/index.vue?3a4f2406","/Users/wuhm45/Documents/code/weex组件库/dolphin-weex-ui/packages/dof-checkbox/<no source>"],"names":[],"mappings":";AA8DA;EACA,eAAA;EACA,gBAAA;CACA;AAEA;EACA,eAAA;EACA,gBAAA;EACA,wBAAA;EACA,yBAAA;EACA,0BAAA;EACA,uBAAA;EACA,iBAAA;CACA;AAEA;EACA,eAAA;EACA,gBAAA;CACA;AAEA;EACA,oBAAA;EACA,mBAAA;EACA,+BAAA;EAAA,8BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,0BAAA;EAAA,uCAAA;UAAA,+BAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,yBAAA;EACA,0BAAA;EACA,0BAAA;CACA;AAEA;EACA,6BAAA;EACA,yBAAA;CACA;AAEA;EACA,6BAAA;EACA,yBAAA;CACA;AAEA;EACA,YAAA;EACA,mBAAA;EACA,SAAA;EACA,UAAA;EACA,0BAAA;EACA,iBAAA;CACA;AAEA;EACA,0BAAA;CACA;AAEA;EACA,oBAAA;EAAA,gBAAA;UAAA,QAAA;EACA,+BAAA;EAAA,8BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,0BAAA;EACA,qBAAA;CACA;AAEA;EACA,oBAAA;EAAA,gBAAA;UAAA,QAAA;EACA,6BAAA;EAAA,8BAAA;EAAA,+BAAA;UAAA,uBAAA;EACA,8BAAA;EACA,wBAAA;EAAA,oCAAA;UAAA,4BAAA;CACA;AAEA;EACA,+BAAA;EAAA,8BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,wBAAA;EAAA,oCAAA;UAAA,4BAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,oBAAA;EAAA,gBAAA;UAAA,QAAA;CACA;AAEA;EACA,gCAAA;EACA,sBAAA;EACA,eAAA;EACA,SAAA;EACA,wBAAA;EACA,iBAAA;EACA,sBAAA;EACA,aAAA;EClJA,iBAAA;EAAA,wBAAA;EAAA,sBAAA;CDmJA;AAEA;EACA,oBAAA;EAAA,gBAAA;UAAA,QAAA;CACA;AAEA;EACA,+BAAA;EACA,mBAAA;EACA,gBAAA;EACA,qBAAA;EACA,yBAAA;EACA,0BAAA;EACA,uBAAA;EACA,wBAAA;EACA,eAAA;EACA,0BAAA;EACA,sBAAA;EACA,iBAAA;EACA,oBAAA;CACA;AAEA;EACA,uBAAA;EACA,0BAAA;CACA;AAEA;EACA,kCAAA;EACA,mBAAA;EACA,eAAA;EACA,SAAA;EACA,wBAAA;EACA,iBAAA;EACA,oBAAA;EAAA,gBAAA;UAAA,QAAA;ECrLA,iBAAA;EAAA,wBAAA;EAAA,sBAAA;CDsLA;AAEA;EACA,0BAAA;EACA,sBAAA;CACA;AAEA;EACA,yBAAA;EACA,2BAAA;EACA,6BAAA;CACA;AAEA;EACA,kBAAA;EACA,mBAAA;CACA;AAEA;EACA,aAAA;CACA","file":"index.vue","sourcesContent":["<template>\n <div\n :key=\"_isColmo + 'checkbox'\"\n :class=\"[\n 'dof-cell',\n !disabled && 'active-cell',\n hasTopBorder && 'cell-top-border',\n hasBottomBorder && 'cell-bottom-border',\n disabled && 'checkbox-disabled'\n ]\"\n :style=\"cellDynamicHeight\"\n @click=\"dofCellClick\"\n >\n <image v-if=\"!_isColmo\" :src=\"checkIcon\" slot=\"value\" :class=\"['checkbox', disabled && 'checkbox-icon-disabled']\"></image>\n <div\n v-if=\"_isColmo\"\n slot=\"value\"\n class=\"circle\"\n :style=\"{\n backgroundColor: innerChecked ? '#b35336' : 'transparent',\n borderColor: innerChecked ? 'transparent' : '#797979'\n }\"\n >\n <dof-iconfont\n v-if=\"innerChecked\"\n style=\"width: 40px\"\n :code=\"'\\u4729'\"\n :size=\"40\"\n :color=\"'rgba(255, 255, 255, 0.8)'\"\n ></dof-iconfont>\n </div>\n <div class=\"avatar\" v-if=\"itemImg && itemImg != ''\">\n <image v-if=\"itemImg && itemImg != ''\" :src=\"itemImg\" class=\"item-img\"> </image>\n </div>\n\n <div\n :class=\"[\n 'main-wrapper',\n hasSubTopBorder && 'checkBox-top-border',\n itemImg && hasSubBottomBorder && 'checkBox-bottom-border'\n ]\"\n :style=\"dynamicSizeComp\"\n >\n <div class=\"content-title\" :style=\"titleDynamicHeight\">\n <div class=\"cell-title\">\n <text :class=\"['title-text', isOverflow && 'title-flex-expand']\" slot=\"title\" ref=\"titleBox\">{{\n title\n }}</text>\n <text v-if=\"tag\" class=\"cell-title-btn\" ref=\"tagBox\">{{ tag }}</text>\n </div>\n <div v-if=\"desc\" class=\"sub-title\">\n <text class=\"sub-text\" slot=\"sub-text\">{{ desc }}</text>\n </div>\n </div>\n <dof-image :src=\"ARROW_ICON\" class=\"cell-arrow-icon\" v-if=\"hasArrow\"></dof-image>\n </div>\n <div v-if=\"!itemImg && hasSubBottomBorder\" class=\"fakeSubBorder\"></div>\n <div v-if=\"_isDiablo && disabled\" class=\"disabledMask\"></div>\n </div>\n</template>\n\n<style scoped>\n.checkbox {\n width: 36px;\n height: 36px;\n}\n\n.avatar {\n width: 96px;\n height: 96px;\n margin-left: 32px;\n /* margin-right: 24px; */\n background-color: #f8f8f8;\n border-radius: 48px;\n overflow: hidden;\n}\n\n.item-img {\n width: 96px;\n height: 96px;\n}\n\n.dof-cell {\n /* height: 160px; */\n position: relative;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n padding-left: 32px;\n /* padding-right: 32px; */\n background-color: inherit;\n}\n\n.checkBox-top-border {\n border-bottom-color: #dddddd;\n border-bottom-width: 1px;\n}\n\n.checkBox-bottom-border {\n border-bottom-color: #dddddd;\n border-bottom-width: 1px;\n}\n\n.fakeSubBorder {\n height: 1px;\n position: absolute;\n right: 0;\n bottom: 0;\n background-color: #dddddd;\n left: 86px;\n}\n\n.active-cell:active {\n background-color: #f5f5f5;\n}\n\n.main-wrapper {\n flex: 1;\n flex-direction: row;\n align-items: center;\n padding-right: 32px;\n margin-left: 24px;\n}\n\n.content-title {\n flex: 1;\n flex-direction: column;\n /* align-items: flex-start; */\n justify-content: flex-start;\n}\n\n.cell-title {\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n flex: 1;\n}\n\n.title-text {\n font-family: PingFangSC-Regular;\n font-size: 32px;\n color: #1e2e37;\n lines: 1;\n text-overflow: ellipsis;\n overflow: hidden;\n /* max-width:398px; */\n /* flex:1; */\n}\n\n.title-flex-expand {\n flex: 1;\n}\n\n.cell-title-btn {\n font-family: PingFangSC-Medium;\n font-size: 24px;\n height: 48px;\n line-height: 48px;\n padding-left: 20px;\n padding-right: 20px;\n border-radius: 24px;\n margin-left: 20px;\n color: #616c73;\n background-color: #f6f7f9;\n max-width: 350px;\n overflow: hidden;\n text-overflow: clip;\n}\n\n.sub-title {\n margin-top: 16px;\n /* flex-direction: row; */\n}\n\n.sub-text {\n font-family: 'PingFangSC-Regular';\n font-size: 24px;\n color: #8e969b;\n lines: 1;\n text-overflow: ellipsis;\n overflow: hidden;\n flex: 1;\n}\n\n.cell-top-border {\n border-top-color: #dddddd;\n border-top-width: 1px;\n}\n\n.cell-bottom-border {\n border-bottom-width: 1px;\n border-bottom-style: solid;\n border-bottom-color: #dddddd;\n}\n\n.cell-arrow-icon {\n width: 40px;\n height: 40px;\n}\n\n.checkbox-disabled {\n opacity: 0.3;\n}\n</style>\n<style scoped src=\"./colmo.css\"></style>\n<style scoped src=\"./diablo.css\"></style>\n\n<script>\nimport ColmoMixin from '../../mixins/colmo'\nimport DiabloMixin from '../../mixins/diablo'\nimport DofIconfont from '../dof-iconfont'\nconst dom = weex.requireModule('dom')\nconst icon = require('../setting/icon.base64.js')\n// var CHECKED = icon['public_ic_done@2x'];\n// var UNCHECKED = icon['unchecked'];\n// var CHECKED_DISABLED = icon['dischecked'];\n// var UNCHECKED_DISABLED = icon['disuncheked'];\nvar UNCHECKED = icon['icon_checkbox_unselect']\nvar UNCHECKEDDIABLO = icon['icon_checkbox_unselect_diablo']\nvar CHECKED = icon['icon_checkbox_selected']\nvar CHECKEDDIABLO = icon['icon_checkbox_selected_diablo']\nvar ARROW_ICON = icon['public_ic_more@3x']\nconst WIDTH = 498 // hack\nexport default {\n mixins: [ColmoMixin, DiabloMixin],\n components: { DofIconfont },\n props: {\n hasTopBorder: {\n type: Boolean,\n default: false\n },\n hasSubTopBorder: {\n type: Boolean,\n default: false\n },\n hasBottomBorder: {\n type: Boolean,\n default: false\n },\n hasSubBottomBorder: {\n type: Boolean,\n default: false\n },\n\n title: {\n type: String,\n require: true\n },\n\n tag: {\n type: String,\n default: ''\n },\n value: {\n type: [String, Number, Object],\n require: true\n },\n disabled: {\n type: Boolean,\n default: false\n },\n checked: {\n type: Boolean,\n default: false\n },\n desc: {\n type: String,\n default: ''\n },\n itemImg: {\n type: String,\n default: ''\n },\n hasArrow: {\n type: Boolean,\n default: false\n }\n },\n data: () => ({\n innerChecked: false,\n isOverflow: false,\n titleWidth: 0,\n tagWidth: 0\n }),\n watch: {\n title: {\n handler(newValue, oldValue) {\n if (newValue) {\n this.$nextTick(() => {\n this.isOverflow = this.titleWidth + this.tagWidth > WIDTH\n })\n }\n },\n immediate: true\n }\n },\n created() {\n const { checked, disabled } = this\n this.innerChecked = checked\n },\n computed: {\n icon () {\n return [this._isDiablo ? CHECKEDDIABLO : CHECKED, this._isDiablo ? UNCHECKEDDIABLO : UNCHECKED]\n },\n checkIcon() {\n const { icon, disabled, innerChecked } = this\n return icon[innerChecked ? 0 : 1]\n },\n // item动态高度 由desc撑开\n // dynamicSizeComp() {\n // if (this.itemImg) {\n // return {\n // height: '160px'\n // }\n // } else {\n // return { }\n // }\n // },\n dynamicSizeComp() {\n if (this.desc || this.itemImg) {\n return {\n height: '160.5px' //有subtitle或者图片时的高度\n }\n } else {\n return {\n // height: '80px' ////无subtitle和无图片时的高度\n }\n }\n },\n\n cellDynamicHeight() {\n if (!this.desc && !this.itemImg) {\n return {\n // height: '82px' ////无subtitle和无图片时的高度\n }\n }\n return {}\n },\n\n titleDynamicHeight() {\n if (!this.desc && !this.itemImg) {\n return {\n height: this._isColmo ? '104px' : '80px' ////无subtitle和无图片时的高度\n }\n }\n return {}\n }\n },\n\n methods: {\n dofCellClick() {\n const { disabled, innerChecked, value } = this\n if (!disabled) {\n this.innerChecked = !innerChecked\n this.$emit('dofCheckBoxItemChecked', { value, checked: this.innerChecked })\n }\n },\n dynamicIsOverflow() {\n // ios下面 对于这个动态的设置flex=1,或者max-width都会 偶现不生效。\n this.$nextTick(() => {\n setTimeout(() => {\n const result = dom.getComponentRect(this.$refs.tagBox, option => {\n const result2 = dom.getComponentRect(this.$refs.titleBox, titleResult => {\n this.titleWidth = titleResult.size && titleResult.size.width\n this.tagWidth = option.size && option.size.width\n this.isOverflow = this.titleWidth + this.tagWidth > WIDTH\n })\n })\n }, 60)\n })\n }\n },\n mounted() {\n this.dynamicIsOverflow()\n }\n}\n</script>\n",null],"sourceRoot":""}]);
8952
8952
 
8953
8953
  // exports
8954
8954
 
@@ -8976,7 +8976,7 @@ exports = module.exports = __webpack_require__(0)(true);
8976
8976
 
8977
8977
 
8978
8978
  // module
8979
- exports.push([module.i, "\n@media screen and (weex-theme: diablo) {\n.dof-cell[data-v-60711b04] {\n background-color: #101315;\n}\n.checkBox-top-border[data-v-60711b04] {\n border-bottom-color: #101315;\n}\n.checkBox-bottom-border[data-v-60711b04] {\n border-bottom-color: #101315;\n}\n.title-text[data-v-60711b04] {\n color: #cfcfd0;\n}\n.cell-title-btn[data-v-60711b04] {\n color: #a2a4a5;\n background-color: #2b2f32;\n}\n.active-cell[data-v-60711b04]:active {\n background-color: #1d1f21;\n}\n.fakeSubBorder[data-v-60711b04] {\n background-color: #101315;\n left: 0.4rem;\n}\n.checkbox-disabled[data-v-60711b04] {\n opacity: 1;\n}\n.checkbox-icon-disabled[data-v-60711b04] {\n opacity: 0.3;\n}\n}", "", {"version":3,"sources":["/Users/wuhm45/Documents/code/weex组件库/dolphin-weex-ui/packages/dof-checkbox/diablo.css"],"names":[],"mappings":";AAAA;AACE;IACE,0BAA0B;CAC3B;AACD;IACE,6BAA6B;CAC9B;AACD;IACE,6BAA6B;CAC9B;AACD;IACE,eAAe;CAChB;AACD;IACE,eAAe;IACf,0BAA0B;CAC3B;AACD;IACE,0BAA0B;CAC3B;AACD;IACE,0BAA0B;IAC1B,aAAW;CACZ;AACD;IACE,WAAW;CACZ;AACD;IACE,aAAa;CACd;CACF","file":"diablo.css","sourcesContent":["@media screen and (weex-theme: diablo) {\n .dof-cell {\n background-color: #101315;\n }\n .checkBox-top-border {\n border-bottom-color: #101315;\n }\n .checkBox-bottom-border {\n border-bottom-color: #101315;\n }\n .title-text {\n color: #cfcfd0;\n }\n .cell-title-btn {\n color: #a2a4a5;\n background-color: #2b2f32;\n }\n .active-cell:active {\n background-color: #1d1f21;\n }\n .fakeSubBorder {\n background-color: #101315;\n left: 30px;\n }\n .checkbox-disabled {\n opacity: 1;\n }\n .checkbox-icon-disabled {\n opacity: 0.3;\n }\n}"],"sourceRoot":""}]);
8979
+ exports.push([module.i, "\n@media screen and (weex-theme: diablo) {\n.dof-cell[data-v-60711b04] {\n background-color: #101315;\n}\n.checkBox-top-border[data-v-60711b04] {\n border-bottom-color: #101315;\n}\n.checkBox-bottom-border[data-v-60711b04] {\n border-bottom-color: #101315;\n}\n.title-text[data-v-60711b04] {\n color: #cfcfd0;\n}\n.cell-title-btn[data-v-60711b04] {\n color: #a2a4a5;\n background-color: #2b2f32;\n}\n.active-cell[data-v-60711b04]:active {\n background-color: #1d1f21;\n}\n.fakeSubBorder[data-v-60711b04] {\n background-color: #101315;\n left: 0.4rem;\n}\n.checkbox-disabled[data-v-60711b04] {\n opacity: 1;\n}\n.disabledMask[data-v-60711b04] {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n /* background-color: rgba(0, 0, 0, 0.3); */\n background-color: #101315;\n opacity: 0.7;\n}\n}", "", {"version":3,"sources":["/Users/wuhm45/Documents/code/weex组件库/dolphin-weex-ui/packages/dof-checkbox/diablo.css"],"names":[],"mappings":";AAAA;AACE;IACE,0BAA0B;CAC3B;AACD;IACE,6BAA6B;CAC9B;AACD;IACE,6BAA6B;CAC9B;AACD;IACE,eAAe;CAChB;AACD;IACE,eAAe;IACf,0BAA0B;CAC3B;AACD;IACE,0BAA0B;CAC3B;AACD;IACE,0BAA0B;IAC1B,aAAW;CACZ;AACD;IACE,WAAW;CACZ;AACD;IACE,mBAAmB;IACnB,OAAO;IACP,QAAQ;IACR,SAAS;IACT,UAAU;IACV,2CAA2C;IAC3C,0BAA0B;IAC1B,aAAa;CACd;CACF","file":"diablo.css","sourcesContent":["@media screen and (weex-theme: diablo) {\n .dof-cell {\n background-color: #101315;\n }\n .checkBox-top-border {\n border-bottom-color: #101315;\n }\n .checkBox-bottom-border {\n border-bottom-color: #101315;\n }\n .title-text {\n color: #cfcfd0;\n }\n .cell-title-btn {\n color: #a2a4a5;\n background-color: #2b2f32;\n }\n .active-cell:active {\n background-color: #1d1f21;\n }\n .fakeSubBorder {\n background-color: #101315;\n left: 30px;\n }\n .checkbox-disabled {\n opacity: 1;\n }\n .disabledMask {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n /* background-color: rgba(0, 0, 0, 0.3); */\n background-color: #101315;\n opacity: 0.7;\n }\n}"],"sourceRoot":""}]);
8980
8980
 
8981
8981
  // exports
8982
8982
 
@@ -9186,7 +9186,7 @@ exports = module.exports = __webpack_require__(0)(true);
9186
9186
 
9187
9187
 
9188
9188
  // module
9189
- exports.push([module.i, "\n.dof-switch-wrapper[data-v-76af8caf] {\n position: relative;\n width: 1.28rem;\n height: 0.64rem;\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}\n.dof-switch-loading[data-v-76af8caf] {\n width: 0.64rem;\n height: 0.64rem;\n position: absolute;\n left: 0.42667rem;\n top: 0px;\n}\n.switch[data-v-76af8caf] {\n width: 1.28rem;\n height: 0.64rem;\n border-style: solid;\n /* border-color: #8E969B;\n background-color: #ffffff; */\n border-width: 0.05333rem;\n border-radius: 0.32rem;\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-align: center;\n -webkit-align-items: center;\n align-items: center;\n}\n.switch-colmo[data-v-76af8caf] {\n border-width: 0.02667rem;\n}\n.switch-white[data-v-76af8caf] {\n width: 1.28rem;\n height: 0.64rem;\n border-style: solid;\n border-color: #ffffff;\n background-color: #1e2e37;\n border-width: 0.05333rem;\n border-radius: 0.32rem;\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-align: center;\n -webkit-align-items: center;\n align-items: center;\n /* margin-right: 12px; */\n}\n.switch-disabled[data-v-76af8caf] {\n opacity: 0.3;\n}\n.switch-dot[data-v-76af8caf] {\n border-radius: 0.10667rem;\n width: 0.21333rem;\n height: 0.21333rem;\n position: relative;\n left: 0.16rem;\n -webkit-transform-origin: center;\n transform-origin: center;\n -webkit-transition-property: all;\n transition-property: all;\n /* transition-duration: 5s; */\n background-color: transparent;\n}\n.switch-white-dot[data-v-76af8caf] {\n border-radius: 0.10667rem;\n width: 0.21333rem;\n height: 0.21333rem;\n position: relative;\n left: 0.16rem;\n -webkit-transition-property: all;\n transition-property: all;\n /* transition-duration: 5s; */\n background-color: transparent;\n}\n", "", {"version":3,"sources":["/Users/wuhm45/Documents/code/weex组件库/dolphin-weex-ui/packages/dof-switch/index.vue?16a62200"],"names":[],"mappings":";AAwBA;EACA,mBAAA;EACA,eAAA;EACA,gBAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,yBAAA;EAAA,gCAAA;UAAA,wBAAA;CACA;AACA;EACA,eAAA;EACA,gBAAA;EACA,mBAAA;EACA,iBAAA;EACA,SAAA;CACA;AAEA;EACA,eAAA;EACA,gBAAA;EACA,oBAAA;EACA;+BACA;EACA,yBAAA;EACA,uBAAA;EACA,qBAAA;EAAA,sBAAA;EAAA,cAAA;EACA,+BAAA;EAAA,8BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;CACA;AACA;EACA,yBAAA;CACA;AACA;EACA,eAAA;EACA,gBAAA;EACA,oBAAA;EACA,sBAAA;EACA,0BAAA;EACA,yBAAA;EACA,uBAAA;EACA,qBAAA;EAAA,sBAAA;EAAA,cAAA;EACA,+BAAA;EAAA,8BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,yBAAA;CACA;AACA;EACA,aAAA;CACA;AACA;EACA,0BAAA;EACA,kBAAA;EACA,mBAAA;EACA,mBAAA;EACA,cAAA;EACA,iCAAA;UAAA,yBAAA;EACA,iCAAA;EAAA,yBAAA;EACA,8BAAA;EACA,8BAAA;CACA;AACA;EACA,0BAAA;EACA,kBAAA;EACA,mBAAA;EACA,mBAAA;EACA,cAAA;EACA,iCAAA;EAAA,yBAAA;EACA,8BAAA;EACA,8BAAA;CACA","file":"index.vue","sourcesContent":["<template>\n <div class=\"dof-switch-wrapper\">\n <dof-spinner :type=\"loadingSrc\" class=\"dof-switch-loading\" v-if=\"loading\" />\n <div\n ref=\"switch\"\n @click=\"changeHandler\"\n :class=\"[type === 'white' ? 'switch-white' : 'switch', checked && switchActiveClass, `switch-${type}`]\"\n :style=\"Object.assign({}, mrSwitchStyle, customStyle)\"\n :accessible=\"true\"\n :aria-label=\"blindHelptext\"\n >\n <div\n :accessible=\"false\"\n :aria-hidden=\"true\"\n ref=\"switchDot\"\n :style=\"dotStyle\"\n :class=\"[type === 'white' ? 'switch-white-dot' : 'switch-dot']\"\n ></div>\n </div>\n </div>\n</template>\n\n<style src=\"./colmo.css\"></style>\n<style scoped>\n.dof-switch-wrapper {\n position: relative;\n width: 96px;\n height: 48px;\n align-items: center;\n justify-content: center;\n}\n.dof-switch-loading {\n width: 48px;\n height: 48px;\n position: absolute;\n left: 32px;\n top: 0px;\n}\n\n.switch {\n width: 96px;\n height: 48px;\n border-style: solid;\n /* border-color: #8E969B;\n background-color: #ffffff; */\n border-width: 4px;\n border-radius: 24px;\n display: flex;\n flex-direction: row;\n align-items: center;\n}\n.switch-colmo {\n border-width: 2px;\n}\n.switch-white {\n width: 96px;\n height: 48px;\n border-style: solid;\n border-color: #ffffff;\n background-color: #1e2e37;\n border-width: 4px;\n border-radius: 24px;\n display: flex;\n flex-direction: row;\n align-items: center;\n /* margin-right: 12px; */\n}\n.switch-disabled {\n opacity: 0.3;\n}\n.switch-dot {\n border-radius: 8px;\n width: 16px;\n height: 16px;\n position: relative;\n left: 12px;\n transform-origin: center;\n transition-property: all;\n /* transition-duration: 5s; */\n background-color: transparent;\n}\n.switch-white-dot {\n border-radius: 8px;\n width: 16px;\n height: 16px;\n position: relative;\n left: 12px;\n transition-property: all;\n /* transition-duration: 5s; */\n background-color: transparent;\n}\n</style>\n\n<script>\n// 带switch按钮的cell\nconst animation = weex.requireModule('animation')\nimport { throttle } from '../../helper/utils'\nimport ColmoMixin from '../../mixins/colmo'\nimport DiabloMixin from '../../mixins/diablo'\nimport { STYLE_MAP, STYLE_MAP_DIABLO } from './style'\nimport DofSpinner from '../dof-spinner'\nimport Utils from '../utils'\n\nexport default {\n components: { DofSpinner },\n mixins: [ColmoMixin, DiabloMixin],\n props: {\n checked: {\n type: Boolean,\n default: true\n },\n type: {\n type: String,\n default: 'default'\n },\n disabled: {\n type: Boolean,\n default: false\n },\n loading: {\n type: Boolean,\n default: false\n },\n isLightLoading: {\n type: Boolean,\n default: false\n },\n blindHelptext: {\n type: String,\n default: ''\n },\n borderColor: {\n type: String,\n default: ''\n },\n backgroundColor: {\n type: String,\n default: ''\n },\n isScale: {\n typeof: Boolean,\n default: undefined\n },\n dotColor: {\n typeof: String,\n default: ''\n }\n },\n computed: {\n loadingSrc() {\n if (this._isColmo || this.type === 'colmo') return 'colmo'\n const src = this.isLightLoading ? 'white' : 'black'\n return src\n },\n switchActiveClass() {\n const { type } = this\n return `switch-active-${type}`\n },\n mrSwitchStyle() {\n return this.disabled ? { opacity: 0.3 } : this.loading ? { opacity: 0 } : { opacity: 1 }\n },\n dotStyle() {\n return {\n // 安卓1px渲染误差\n top: weex.config.env.platform.toLowerCase() === 'android' ? '1px' : '0px'\n }\n },\n customStyle() {\n let res = {}\n if (this.checked) {\n res = this._isDiablo ? { ...STYLE_MAP_DIABLO[this.type] } : { ...STYLE_MAP[this.type] } || {}\n } else {\n res = {\n 'border-color': 'transparent',\n 'background-color': this._isDiablo ? '#d2d5d7' : '#d3d5d7'\n }\n }\n // colmo\n if ((this._isColmo && this.type === 'default') || this.type === 'colmo') {\n res.borderColor = this.checked ? '#B35336' : '#71717A'\n res.backgroundColor = 'transparent'\n }\n\n if (this.borderColor) res.borderColor = this.borderColor\n if (this.backgroundColor) res.backgroundColor = this.backgroundColor\n return res\n },\n _dotColor() {\n let dotColor = ''\n if (this.checked) {\n dotColor = this.type === 'white' ? '#1E2E37' : '#ffffff'\n // colmo\n if ((this._isColmo && this.type === 'default') || this.type === 'colmo') dotColor = '#B35336'\n if (this.dotColor) dotColor = this.dotColor\n } else {\n dotColor = this.type === 'white' ? '#ffffff' : this._isColmo ? '#8A8A8F' : '#ffffff'\n }\n\n return dotColor\n },\n _isScale() {\n let isScale = true\n if ((this._isColmo && this.type === 'default') || this.type === 'colmo') isScale = false\n if (this.isScale !== undefined) isScale = this.isScale\n return isScale\n },\n leftDotStyle() {\n return {\n transform: !this._isScale\n ? `translateX(2px) scale(${this._isColmo || this.type === 'colmo' ? 2 : 2.25})`\n : 'translateX(2px) scale(2.25)',\n backgroundColor: this._dotColor\n }\n },\n rightDotStyle() {\n let offset = 46\n if ((this._isColmo && this.type === 'default') || this.type === 'colmo') offset = 50\n if (Utils.env.isWeb()) offset = 46\n return {\n backgroundColor: this._dotColor,\n transform: `translateX(${offset}px) scale(2.25)`\n }\n }\n },\n data: () => ({}),\n mounted() {\n this.handleInit()\n },\n methods: {\n handleInit() {\n if (this.checked) {\n animation &&\n animation.transition(this.$refs.switchDot, {\n styles: this.rightDotStyle,\n duration: 0\n })\n } else {\n animation &&\n animation.transition(this.$refs.switchDot, {\n styles: this.leftDotStyle,\n duration: 0\n })\n }\n },\n changeHandler: throttle(function() {\n const { disabled } = this\n if (!disabled) {\n this.$emit('dofChange')\n }\n }, 300)\n },\n watch: {\n _isColmo() {\n setTimeout(() => {\n this.handleInit()\n }, 0)\n },\n checked(newVal, oldVal) {\n if (newVal === true && oldVal === false) {\n animation &&\n animation.transition(this.$refs.switchDot, {\n styles: this.rightDotStyle,\n duration: 300,\n timingFunction: 'ease-out'\n })\n } else if (newVal === false && oldVal === true) {\n animation &&\n animation.transition(this.$refs.switchDot, {\n styles: this.leftDotStyle,\n duration: 300,\n timingFunction: 'ease-out'\n })\n }\n }\n }\n}\n</script>\n"],"sourceRoot":""}]);
9189
+ exports.push([module.i, "\n.dof-switch-wrapper[data-v-76af8caf] {\n position: relative;\n width: 1.28rem;\n height: 0.64rem;\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}\n.dof-switch-loading[data-v-76af8caf] {\n width: 0.64rem;\n height: 0.64rem;\n position: absolute;\n left: 0.42667rem;\n top: 0px;\n}\n.switch[data-v-76af8caf] {\n width: 1.28rem;\n height: 0.64rem;\n border-style: solid;\n /* border-color: #8E969B;\n background-color: #ffffff; */\n border-width: 0.05333rem;\n border-radius: 0.32rem;\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-align: center;\n -webkit-align-items: center;\n align-items: center;\n}\n.switch-colmo[data-v-76af8caf] {\n border-width: 0.02667rem;\n}\n.switch-white[data-v-76af8caf] {\n width: 1.28rem;\n height: 0.64rem;\n border-style: solid;\n border-color: #ffffff;\n background-color: #1e2e37;\n border-width: 0.05333rem;\n border-radius: 0.32rem;\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-align: center;\n -webkit-align-items: center;\n align-items: center;\n /* margin-right: 12px; */\n}\n.switch-disabled[data-v-76af8caf] {\n opacity: 0.3;\n}\n.switch-dot[data-v-76af8caf] {\n border-radius: 0.10667rem;\n width: 0.21333rem;\n height: 0.21333rem;\n position: relative;\n left: 0.16rem;\n -webkit-transform-origin: center;\n transform-origin: center;\n -webkit-transition-property: all;\n transition-property: all;\n /* transition-duration: 5s; */\n background-color: transparent;\n}\n.switch-white-dot[data-v-76af8caf] {\n border-radius: 0.10667rem;\n width: 0.21333rem;\n height: 0.21333rem;\n position: relative;\n left: 0.16rem;\n -webkit-transition-property: all;\n transition-property: all;\n /* transition-duration: 5s; */\n background-color: transparent;\n}\n", "", {"version":3,"sources":["/Users/wuhm45/Documents/code/weex组件库/dolphin-weex-ui/packages/dof-switch/index.vue?1b06546a"],"names":[],"mappings":";AAwBA;EACA,mBAAA;EACA,eAAA;EACA,gBAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,yBAAA;EAAA,gCAAA;UAAA,wBAAA;CACA;AACA;EACA,eAAA;EACA,gBAAA;EACA,mBAAA;EACA,iBAAA;EACA,SAAA;CACA;AAEA;EACA,eAAA;EACA,gBAAA;EACA,oBAAA;EACA;+BACA;EACA,yBAAA;EACA,uBAAA;EACA,qBAAA;EAAA,sBAAA;EAAA,cAAA;EACA,+BAAA;EAAA,8BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;CACA;AACA;EACA,yBAAA;CACA;AACA;EACA,eAAA;EACA,gBAAA;EACA,oBAAA;EACA,sBAAA;EACA,0BAAA;EACA,yBAAA;EACA,uBAAA;EACA,qBAAA;EAAA,sBAAA;EAAA,cAAA;EACA,+BAAA;EAAA,8BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,0BAAA;EAAA,4BAAA;UAAA,oBAAA;EACA,yBAAA;CACA;AACA;EACA,aAAA;CACA;AACA;EACA,0BAAA;EACA,kBAAA;EACA,mBAAA;EACA,mBAAA;EACA,cAAA;EACA,iCAAA;UAAA,yBAAA;EACA,iCAAA;EAAA,yBAAA;EACA,8BAAA;EACA,8BAAA;CACA;AACA;EACA,0BAAA;EACA,kBAAA;EACA,mBAAA;EACA,mBAAA;EACA,cAAA;EACA,iCAAA;EAAA,yBAAA;EACA,8BAAA;EACA,8BAAA;CACA","file":"index.vue","sourcesContent":["<template>\n <div class=\"dof-switch-wrapper\">\n <dof-spinner :type=\"loadingSrc\" class=\"dof-switch-loading\" v-if=\"loading\" />\n <div\n ref=\"switch\"\n @click=\"changeHandler\"\n :class=\"[type === 'white' ? 'switch-white' : 'switch', checked && switchActiveClass, `switch-${type}`]\"\n :style=\"Object.assign({}, mrSwitchStyle, customStyle)\"\n :accessible=\"true\"\n :aria-label=\"blindHelptext\"\n >\n <div\n :accessible=\"false\"\n :aria-hidden=\"true\"\n ref=\"switchDot\"\n :style=\"dotStyle\"\n :class=\"[type === 'white' ? 'switch-white-dot' : 'switch-dot']\"\n ></div>\n </div>\n </div>\n</template>\n\n<style src=\"./colmo.css\"></style>\n<style scoped>\n.dof-switch-wrapper {\n position: relative;\n width: 96px;\n height: 48px;\n align-items: center;\n justify-content: center;\n}\n.dof-switch-loading {\n width: 48px;\n height: 48px;\n position: absolute;\n left: 32px;\n top: 0px;\n}\n\n.switch {\n width: 96px;\n height: 48px;\n border-style: solid;\n /* border-color: #8E969B;\n background-color: #ffffff; */\n border-width: 4px;\n border-radius: 24px;\n display: flex;\n flex-direction: row;\n align-items: center;\n}\n.switch-colmo {\n border-width: 2px;\n}\n.switch-white {\n width: 96px;\n height: 48px;\n border-style: solid;\n border-color: #ffffff;\n background-color: #1e2e37;\n border-width: 4px;\n border-radius: 24px;\n display: flex;\n flex-direction: row;\n align-items: center;\n /* margin-right: 12px; */\n}\n.switch-disabled {\n opacity: 0.3;\n}\n.switch-dot {\n border-radius: 8px;\n width: 16px;\n height: 16px;\n position: relative;\n left: 12px;\n transform-origin: center;\n transition-property: all;\n /* transition-duration: 5s; */\n background-color: transparent;\n}\n.switch-white-dot {\n border-radius: 8px;\n width: 16px;\n height: 16px;\n position: relative;\n left: 12px;\n transition-property: all;\n /* transition-duration: 5s; */\n background-color: transparent;\n}\n</style>\n\n<script>\n// 带switch按钮的cell\nconst animation = weex.requireModule('animation')\nimport { throttle } from '../../helper/utils'\nimport ColmoMixin from '../../mixins/colmo'\nimport DiabloMixin from '../../mixins/diablo'\nimport { STYLE_MAP, STYLE_MAP_DIABLO } from './style'\nimport DofSpinner from '../dof-spinner'\nimport Utils from '../utils'\n\nexport default {\n components: { DofSpinner },\n mixins: [ColmoMixin, DiabloMixin],\n props: {\n checked: {\n type: Boolean,\n default: true\n },\n type: {\n type: String,\n default: 'default'\n },\n disabled: {\n type: Boolean,\n default: false\n },\n loading: {\n type: Boolean,\n default: false\n },\n isLightLoading: {\n type: Boolean,\n default: false\n },\n blindHelptext: {\n type: String,\n default: ''\n },\n borderColor: {\n type: String,\n default: ''\n },\n backgroundColor: {\n type: String,\n default: ''\n },\n isScale: {\n typeof: Boolean,\n default: undefined\n },\n dotColor: {\n typeof: String,\n default: ''\n }\n },\n computed: {\n loadingSrc() {\n if (this._isColmo || this.type === 'colmo') return 'colmo'\n const src = this.isLightLoading ? 'white' : 'black'\n return src\n },\n switchActiveClass() {\n const { type } = this\n return `switch-active-${type}`\n },\n mrSwitchStyle() {\n return this.disabled ? { opacity: 0.3 } : this.loading ? { opacity: 0 } : { opacity: 1 }\n },\n dotStyle() {\n return {\n // 安卓1px渲染误差\n top: weex.config.env.platform.toLowerCase() === 'android' ? '1px' : '0px'\n }\n },\n customStyle() {\n let res = {}\n if (this.checked) {\n res = this._isDiablo ? { ...STYLE_MAP_DIABLO[this.type] } : { ...STYLE_MAP[this.type] } || {}\n } else {\n res = {\n 'border-color': 'transparent',\n 'background-color': this._isDiablo ? '#45494C' : '#d3d5d7'\n }\n }\n // colmo\n if ((this._isColmo && this.type === 'default') || this.type === 'colmo') {\n res.borderColor = this.checked ? '#B35336' : '#71717A'\n res.backgroundColor = 'transparent'\n }\n\n if (this.borderColor) res.borderColor = this.borderColor\n if (this.backgroundColor) res.backgroundColor = this.backgroundColor\n return res\n },\n _dotColor() {\n let dotColor = ''\n if (this.checked) {\n dotColor = this.type === 'white' ? '#1E2E37' : '#ffffff'\n // colmo\n if ((this._isColmo && this.type === 'default') || this.type === 'colmo') dotColor = '#B35336'\n if (this.dotColor) dotColor = this.dotColor\n } else {\n dotColor = this.type === 'white' ? '#ffffff' : this._isColmo ? '#8A8A8F' : this._isDiablo ? '#DCDDDD' : '#ffffff'\n }\n\n return dotColor\n },\n _isScale() {\n let isScale = true\n if ((this._isColmo && this.type === 'default') || this.type === 'colmo') isScale = false\n if (this.isScale !== undefined) isScale = this.isScale\n return isScale\n },\n leftDotStyle() {\n return {\n transform: !this._isScale\n ? `translateX(2px) scale(${this._isColmo || this.type === 'colmo' ? 2 : 2.25})`\n : 'translateX(2px) scale(2.25)',\n backgroundColor: this._dotColor\n }\n },\n rightDotStyle() {\n let offset = 46\n if ((this._isColmo && this.type === 'default') || this.type === 'colmo') offset = 50\n if (Utils.env.isWeb()) offset = 46\n return {\n backgroundColor: this._dotColor,\n transform: `translateX(${offset}px) scale(2.25)`\n }\n }\n },\n data: () => ({}),\n mounted() {\n this.handleInit()\n },\n methods: {\n handleInit() {\n if (this.checked) {\n animation &&\n animation.transition(this.$refs.switchDot, {\n styles: this.rightDotStyle,\n duration: 0\n })\n } else {\n animation &&\n animation.transition(this.$refs.switchDot, {\n styles: this.leftDotStyle,\n duration: 0\n })\n }\n },\n changeHandler: throttle(function() {\n const { disabled } = this\n if (!disabled) {\n this.$emit('dofChange')\n }\n }, 300)\n },\n watch: {\n _isColmo() {\n setTimeout(() => {\n this.handleInit()\n }, 0)\n },\n checked(newVal, oldVal) {\n if (newVal === true && oldVal === false) {\n animation &&\n animation.transition(this.$refs.switchDot, {\n styles: this.rightDotStyle,\n duration: 300,\n timingFunction: 'ease-out'\n })\n } else if (newVal === false && oldVal === true) {\n animation &&\n animation.transition(this.$refs.switchDot, {\n styles: this.leftDotStyle,\n duration: 300,\n timingFunction: 'ease-out'\n })\n }\n }\n }\n}\n</script>\n"],"sourceRoot":""}]);
9190
9190
 
9191
9191
  // exports
9192
9192
 
@@ -9578,7 +9578,7 @@ exports = module.exports = __webpack_require__(0)(true);
9578
9578
 
9579
9579
 
9580
9580
  // module
9581
- exports.push([module.i, "\n@media screen and (weex-theme: diablo) {\n.wrapper[data-v-bace8aa8] {\n background-color: #171C1F;\n}\n.icon-container[data-v-bace8aa8] {\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: #171C1F;\n}\n.tab-bar-item-title-text[data-v-bace8aa8] {\n color: #cfcfd0;\n font-family: PingFangSC-Regular;\n letter-spacing: 0;\n text-align: center;\n font-size: 0.32rem;\n}\n.line-wrapper[data-v-bace8aa8] {\n background-color: #171C1F;\n}\n.animate-circle[data-v-bace8aa8] {\n background-color: #e5e5e8;\n}\n}", "", {"version":3,"sources":["/Users/wuhm45/Documents/code/weex组件库/dolphin-weex-ui/packages/dof-bottom-bar/diablo.css"],"names":[],"mappings":";AAAA;AACE;IACE,0BAA0B;CAC3B;AACD;IACE,mBAAc;IACd,0BAAoB;IACpB,yBAAwB;IAAxB,gCAAwB;YAAxB,wBAAwB;IACxB,0BAAoB;IAApB,4BAAoB;YAApB,oBAAoB;IACpB,0BAA0B;CAC3B;AACD;IACE,eAAe;IACf,gCAAgC;IAChC,kBAAkB;IAClB,mBAAmB;IACnB,mBAAgB;CACjB;AACD;IACE,0BAA0B;CAC3B;AACD;IACE,0BAA0B;CAC3B;CACF","file":"diablo.css","sourcesContent":["@media screen and (weex-theme: diablo) {\n .wrapper {\n background-color: #171C1F;\n }\n .icon-container {\n height: 110px;\n border-radius: 55px;\n justify-content: center;\n align-items: center;\n background-color: #171C1F;\n }\n .tab-bar-item-title-text {\n color: #cfcfd0;\n font-family: PingFangSC-Regular;\n letter-spacing: 0;\n text-align: center;\n font-size: 24px;\n }\n .line-wrapper {\n background-color: #171C1F;\n }\n .animate-circle {\n background-color: #e5e5e8;\n }\n}"],"sourceRoot":""}]);
9581
+ exports.push([module.i, "\n@media screen and (weex-theme: diablo) {\n.wrapper[data-v-bace8aa8] {\n background-color: #171C1F;\n}\n.icon-container[data-v-bace8aa8] {\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: #171C1F;\n}\n.tab-bar-item-title-text[data-v-bace8aa8] {\n color: #cfcfd0;\n font-family: PingFangSC-Regular;\n letter-spacing: 0;\n text-align: center;\n font-size: 0.32rem;\n}\n.line-wrapper[data-v-bace8aa8] {\n background-color: #171C1F;\n}\n.animate-circle[data-v-bace8aa8] {\n background-color: #e5e5e8;\n}\n.tab-bar-item-icon[data-v-bace8aa8] {\n opacity: 0.85;\n}\n}", "", {"version":3,"sources":["/Users/wuhm45/Documents/code/weex组件库/dolphin-weex-ui/packages/dof-bottom-bar/diablo.css"],"names":[],"mappings":";AAAA;AACE;IACE,0BAA0B;CAC3B;AACD;IACE,mBAAc;IACd,0BAAoB;IACpB,yBAAwB;IAAxB,gCAAwB;YAAxB,wBAAwB;IACxB,0BAAoB;IAApB,4BAAoB;YAApB,oBAAoB;IACpB,0BAA0B;CAC3B;AACD;IACE,eAAe;IACf,gCAAgC;IAChC,kBAAkB;IAClB,mBAAmB;IACnB,mBAAgB;CACjB;AACD;IACE,0BAA0B;CAC3B;AACD;IACE,0BAA0B;CAC3B;AACD;IACE,cAAc;CACf;CACF","file":"diablo.css","sourcesContent":["@media screen and (weex-theme: diablo) {\n .wrapper {\n background-color: #171C1F;\n }\n .icon-container {\n height: 110px;\n border-radius: 55px;\n justify-content: center;\n align-items: center;\n background-color: #171C1F;\n }\n .tab-bar-item-title-text {\n color: #cfcfd0;\n font-family: PingFangSC-Regular;\n letter-spacing: 0;\n text-align: center;\n font-size: 24px;\n }\n .line-wrapper {\n background-color: #171C1F;\n }\n .animate-circle {\n background-color: #e5e5e8;\n }\n .tab-bar-item-icon {\n opacity: 0.85;\n }\n}"],"sourceRoot":""}]);
9582
9582
 
9583
9583
  // exports
9584
9584
 
@@ -9690,7 +9690,7 @@ exports = module.exports = __webpack_require__(0)(true);
9690
9690
 
9691
9691
 
9692
9692
  // module
9693
- exports.push([module.i, "\n.dof-slider[data-v-db384bc8] {\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -webkit-flex-direction: column;\n flex-direction: column;\n position: relative;\n}\n.dof-slider-track[data-v-db384bc8] {\n position: relative;\n}\n.dof-slider-bar[data-v-db384bc8] {\n position: relative;\n overflow: hidden;\n /* transition-property: width;\n transition-duration: 100ms; */\n}\n.dof-slider-bar--brand[data-v-db384bc8] {\n background-color: #00a4f2;\n}\n.dof-slider-bar--purple[data-v-db384bc8] {\n background-color: #995efc;\n}\n.dof-slider-bar--blue-purple[data-v-db384bc8] {\n background-color: #6575ff;\n}\n.dof-slider-bar--blue[data-v-db384bc8] {\n background-color: #29c3ff;\n}\n.dof-slider-bar--cyan[data-v-db384bc8] {\n background-color: #00bdb2;\n}\n.dof-slider-bar--yellow[data-v-db384bc8] {\n background-color: #ffaa10;\n}\n.dof-slider-bar--orange[data-v-db384bc8] {\n background-color: #ffaa10;\n}\n.dof-slider-bar--orange-red[data-v-db384bc8] {\n background-color: #f56428;\n}\n.dof-slider-bar--gray-offline[data-v-db384bc8] {\n background-color: #7c879b;\n}\n.dof-slider-button[data-v-db384bc8] {\n position: absolute;\n}\n.button-scale[data-v-db384bc8] {\n -webkit-transition-property: -webkit-transform;\n transition-property: -webkit-transform;\n transition-property: transform;\n transition-property: transform, -webkit-transform;\n -webkit-transition-duration: 0.3s;\n transition-duration: 0.3s;\n -webkit-transition-delay: 0s;\n transition-delay: 0s;\n -webkit-transform: scale(1);\n transform: scale(1);\n}\n.button-scale[data-v-db384bc8]:active {\n -webkit-transform: scale(1.5);\n transform: scale(1.5);\n}\n.dof-slider-button-touching[data-v-db384bc8] {\n -webkit-transform: scale(1.5);\n transform: scale(1.5);\n}\n.dof-slider-scales[data-v-db384bc8] {\n position: relative;\n margin-top: 0.21333rem;\n height: 0.32rem;\n}\n.dof-slider-thin-bar[data-v-db384bc8] {\n position: absolute;\n}\n.dof-slider-thin-bar-left[data-v-db384bc8] {\n position: absolute;\n height: 0.05333rem;\n top: 0px;\n left: 0px;\n}\n.dof-slider-thin-bar-right[data-v-db384bc8] {\n position: absolute;\n height: 0.05333rem;\n top: 0px;\n right: 0px;\n}\n.dof-slider-disabled-mask[data-v-db384bc8] {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n /* background-color: rgba(0, 0, 0, 0.5); */\n}\n.hideButton[data-v-db384bc8] {\n opacity: 0;\n}\n", "", {"version":3,"sources":["/Users/wuhm45/Documents/code/weex组件库/dolphin-weex-ui/packages/dof-slider/index.vue?7173e48a"],"names":[],"mappings":";AA8aA;EACA,6BAAA;EAAA,8BAAA;EAAA,+BAAA;UAAA,uBAAA;EACA,mBAAA;CACA;AAEA;EACA,mBAAA;CACA;AAEA;EACA,mBAAA;EACA,iBAAA;EACA;gCACA;CACA;AAEA;EACA,0BAAA;CACA;AAEA;EACA,0BAAA;CACA;AACA;EACA,0BAAA;CACA;AACA;EACA,0BAAA;CACA;AACA;EACA,0BAAA;CACA;AACA;EACA,0BAAA;CACA;AACA;EACA,0BAAA;CACA;AACA;EACA,0BAAA;CACA;AACA;EACA,0BAAA;CACA;AAEA;EACA,mBAAA;CACA;AACA;EACA,+CAAA;EAAA,uCAAA;EAAA,+BAAA;EAAA,kDAAA;EACA,kCAAA;UAAA,0BAAA;EACA,6BAAA;UAAA,qBAAA;EACA,4BAAA;UAAA,oBAAA;CACA;AACA;EACA,8BAAA;UAAA,sBAAA;CACA;AACA;EACA,8BAAA;UAAA,sBAAA;CACA;AACA;EACA,mBAAA;EACA,uBAAA;EACA,gBAAA;CACA;AACA;EACA,mBAAA;CACA;AACA;EACA,mBAAA;EACA,mBAAA;EACA,SAAA;EACA,UAAA;CACA;AACA;EACA,mBAAA;EACA,mBAAA;EACA,SAAA;EACA,WAAA;CACA;AACA;EACA,mBAAA;EACA,OAAA;EACA,QAAA;EACA,SAAA;EACA,UAAA;EACA,2CAAA;CACA;AACA;EACA,WAAA;CACA","file":"index.vue","sourcesContent":["<template>\n <div\n :class=\"['dof-slider']\"\n :style=\"disabledStyle\"\n @touchstart=\"onTouchStart\"\n @horizontalpan=\"onTouchMove\"\n @touchend=\"onTouchEnd\"\n >\n <div class=\"dof-slider-track\" ref=\"track\" :style=\"trackStyle\" :key=\"_isColmo + 'slider'\">\n <div v-if=\"isGradientBar\" class=\"dof-slider-thin-bar\" :style=\"thinBarStyle\">\n <div\n class=\"dof-slider-thin-bar-left\"\n v-if=\"_gradientBarConfig.mid\"\n :style=\"{\n backgroundImage: `linear-gradient(to right, ${_gradientBarConfig.start}, ${_gradientBarConfig.mid})`,\n width: midWidth + _buttonSize / 2 + 1 + 'px'\n }\"\n ></div>\n <div\n v-if=\"_gradientBarConfig.mid\"\n class=\"dof-slider-thin-bar-right\"\n :style=\"{\n backgroundImage: `linear-gradient(to right, ${_gradientBarConfig.mid}, ${_gradientBarConfig.end})`,\n width: midWidth + _buttonSize / 2 - 1 + 'px'\n }\"\n ></div>\n <div\n class=\"dof-slider-thin-bar-left\"\n v-if=\"!_gradientBarConfig.mid\"\n :style=\"{\n backgroundImage: `linear-gradient(to right, ${_gradientBarConfig.start}, ${_gradientBarConfig.end})`,\n right: 1 + 'px'\n }\"\n ></div>\n </div>\n <div v-if=\"!isGradientBar\" :style=\"lineStyle\"></div>\n <div :class=\"['dof-slider-bar']\" ref=\"bar\" :style=\"barStyle\">\n <div\n v-if=\"!isGradientBar\"\n :style=\"smallBarStyle\"\n :class=\"[barColor || isGradientBar ? '' : `dof-slider-bar--${this.theme}`]\"\n ></div>\n <div\n :class=\"['dof-slider-button', isGradientBar ? 'button-scale' : '', _isColmo && disabled ? 'hideButton' : '']\"\n v-for=\"(itemStyle, i) in buttonStyle\"\n :key=\"i + disabled\"\n :style=\"itemStyle\"\n ></div>\n </div>\n </div>\n <div class=\"dof-slider-scales\" v-if=\"$slots.default\">\n <slot></slot>\n </div>\n <div class=\"dof-slider-disabled-mask\" v-if=\"isGradientBar && disabled\" @touchstart=\"maskTouchStart\"></div>\n </div>\n</template>\n\n<script>\n// import { getBoundingClientRect } from '../utils/dom.js'\nimport { clamp } from '../utils/math-extension.js'\nimport { Touch } from '../utils/touch.js'\nimport ColmoMixin from '../../mixins/colmo'\nimport DiabloMixin from '../../mixins/diablo'\nconst dom = weex.requireModule('dom')\n\nconst getBoundingClientRect = (element, func, delay = 50) => {\n setTimeout(() => dom && dom.getComponentRect(element, func), delay)\n}\n\nexport default {\n mixins: [ColmoMixin, DiabloMixin],\n props: {\n value: {\n type: [Number, Array], // Number为单点滑杆， Array为双侧滑杆\n required: true\n },\n min: {\n type: Number,\n default: 0\n },\n max: {\n type: Number,\n default: 100\n },\n step: {\n type: Number,\n default: 1\n },\n disabled: {\n type: Boolean,\n default: false\n },\n readonly: {\n type: Boolean,\n default: false\n },\n trackHeight: {\n type: Number,\n default: 40\n },\n trackColor: {\n type: String,\n default: ''\n },\n theme: {\n type: String,\n default: 'brand'\n },\n barColor: {\n type: String,\n default: ''\n },\n buttonColor: {\n type: String,\n default: '#ffffff'\n },\n buttonSize: {\n type: Number,\n default: 0\n },\n delay: {\n type: Number,\n default: 50\n },\n gradientBarConfig: {\n type: Object,\n default: () => ({})\n }\n },\n model: {\n prop: 'value',\n event: 'input'\n },\n data() {\n return {\n touch: Touch.Create(),\n current: 0,\n startValue: 0,\n width: 0,\n dragTargetIndex: null, // 0 1\n startRight: null,\n prevScreenX: null,\n isTouching: false,\n isShow: false,\n getWidthRectTime: 0\n }\n },\n watch: {\n barStyle() {\n this.isShow = true\n }\n },\n computed: {\n _gradientBarConfig() {\n if (this.gradientBarConfig.start && this.gradientBarConfig.end) return this.gradientBarConfig\n return this._isColmo ? { start: '#124AFE', mid: '#ffffff', end: '#E55225' } : {}\n },\n _buttonSize() {\n if (this.buttonSize) return this.buttonSize\n return this._isColmo ? 40 : 24\n },\n // 是否双侧\n isBoth() {\n return Object.prototype.toString.call(this.value) === '[object Array]'\n },\n // 是否细bar\n isGradientBar() {\n return this._gradientBarConfig.start && this._gradientBarConfig.end\n },\n scope() {\n return this.max - this.min\n },\n interactive() {\n return !this.disabled && !this.readonly\n },\n _trackHeight() {\n if (this.isGradientBar || this.trackHeight < this._buttonSize) return this._buttonSize * 1.6\n return this.trackHeight\n },\n trackStyle() {\n const res = {\n height: `${this._trackHeight}px`,\n backgroundColor: this.trackColor || (this._isDiablo ? '#2b2f32' : '#F6F7F9'),\n borderRadius: `${this._trackHeight / 2}px`\n }\n // 细bar样式\n if (this.isGradientBar || this.trackHeight < this._buttonSize) {\n res.backgroundColor = 'transparent'\n }\n return res\n },\n barStyle() {\n let percent = 0\n if (this.isBoth) {\n percent = (Math.min(this.value[1], this.max) - Math.max(this.value[0], this.min)) / this.scope\n } else {\n percent = (this.value - this.min) / this.scope\n }\n\n // const width = ((this.value - this.min) / this.scope) * this.width\n // const widthCss = clamp(width+this._trackHeight, this._trackHeight, this.width)\n\n // fix: 修复value带来的width小于this._trackHeight时，bar宽度不变\n const width = percent * this.width\n let widthCss = this._trackHeight\n if (percent < 0) {\n widthCss = this._trackHeight\n } else if (percent > 1) {\n widthCss = this.width + this._trackHeight\n } else {\n // 正常滑动\n widthCss = width + this._trackHeight\n }\n const res = {\n width: `${widthCss}px`,\n borderRadius: `${this._trackHeight / 2}px`,\n height: `${this._trackHeight}px`\n }\n\n if (this.isBoth) res.left = ((Math.max(this.value[0], this.min) - this.min) / this.scope) * this.width + 'px'\n\n // if (this.barColor) {\n // res.backgroundColor = this.barColor\n // }\n // 细bar样式\n // if (this.isGradientBar) {\n res.backgroundColor = 'transparent'\n // }\n return res\n },\n smallBarStyle() {\n const buttonPadding = this.trackHeight > this._buttonSize ? 0 : (this._trackHeight - this._buttonSize) / 2 + 1\n const res = {\n position: 'absolute',\n top: `${(this._trackHeight - this.trackHeight) / 2}px`,\n left: `${buttonPadding}px`,\n right: `${buttonPadding}px`,\n height: `${this.trackHeight}px`,\n borderRadius: `${this.trackHeight / 2}px`\n }\n if (this.barColor) {\n res.backgroundColor = this.barColor\n }\n return res\n },\n buttonStyle() {\n const buttonSize = this._buttonSize\n const res = {\n top: `${(this._trackHeight - buttonSize) / 2}px`,\n width: `${buttonSize}px`,\n height: `${buttonSize}px`,\n borderRadius: `${buttonSize / 2}px`,\n backgroundColor: this.buttonColor\n }\n const buttonPadding = (this._trackHeight - buttonSize) / 2\n return this.isBoth\n ? [\n { ...res, left: `${buttonPadding}px` },\n { ...res, right: `${buttonPadding}px` }\n ]\n : [{ ...res, right: `${buttonPadding}px` }]\n },\n lineStyle() {\n const buttonPadding = (this._trackHeight - this._buttonSize) / 2 + 1\n const res = {\n position: 'absolute',\n top: `${(this._trackHeight - this.trackHeight) / 2}px`,\n left: `${buttonPadding}px`,\n right: `${buttonPadding}px`,\n height: `${this.trackHeight}px`,\n borderRadius: `${this.trackHeight / 2}px`\n }\n // if (this.trackColor) {\n res.backgroundColor = this.trackColor || (this._isDiablo ? '#2b2f32' : '#F6F7F9')\n // }\n return res\n },\n thinBarStyle() {\n const buttonPadding = (this._trackHeight - this._buttonSize) / 2\n const res = {\n top: `${(this._trackHeight - 4) / 2}px`,\n left: `${buttonPadding}px`,\n right: `${buttonPadding}px`,\n height: '4px'\n }\n return res\n },\n midWidth() {\n return this.width / 2\n },\n disabledStyle() {\n if (!this.isShow) return { opacity: 0 }\n return this.isGradientBar && this.disabled ? { opacity: 0.3 } : { opacity: 1 }\n }\n },\n mounted() {\n this.getRect()\n },\n methods: {\n getRect() {\n getBoundingClientRect(\n this.$refs.track,\n res => {\n if (res.result && res.size.width !== 0) {\n // 实际可滑动长度（可变化范围）= bar宽度 - btn宽度\n this.width = res.size.width - this._trackHeight\n } else {\n this.getWidthRectTime < 6\n ? setTimeout(() => {\n this.getWidthRectTime++\n this.getRect()\n }, 50)\n : (this.width = res.size.width - this._trackHeight)\n }\n },\n this.delay\n )\n },\n async onTouchStart(e) {\n if (!this.interactive) {\n return\n }\n if (this.isGradientBar) this.isTouching = true\n this.touch.start(e)\n\n if (this.isBoth) {\n let { left, right } = await this.getBarRect()\n let startX = this.touch.startX\n this.startRight = right\n this.dragTargetIndex = Math.abs(left - startX) < Math.abs(right - startX) ? 0 : 1\n this.current = this.value[this.dragTargetIndex]\n } else {\n this.current = this.value\n }\n\n this.startValue = this.format(this.current)\n },\n onTouchMove(e) {\n if (!this.interactive) {\n return\n }\n\n this.touch.move(e)\n\n const delta = this.touch.deltaX\n if (this.isBoth && this.value[0] === this.value[1]) {\n this.dragTargetIndex = e.changedTouches[0].screenX > this.prevScreenX ? 1 : 0\n if (delta === 0) {\n this.dragTargetIndex = this.touch.startX >= this.startRight ? 1 : 0\n }\n }\n\n const total = this.width\n const diff = (delta / total) * this.scope\n\n this.current = this.startValue + diff\n this.prevScreenX = e.changedTouches[0].screenX\n\n if (delta === 0) return\n this.update(this.current)\n },\n async onTouchEnd(e) {\n if (!this.interactive) {\n return\n }\n this.isTouching = false\n // 点按\n if (this.startValue === this.current) {\n const total = this.width\n let { left, right } = await this.getBarRect()\n const diff = ((this.touch.startX - (this.dragTargetIndex === 0 ? left : right)) / total) * this.scope\n this.current = this.startValue + diff\n }\n this.update(this.current, true)\n this.$emit('dragend', e)\n },\n format(value) {\n const min = +this.min\n const max = +this.max\n const step = +this.step\n\n let val = clamp(value, min, max)\n if (this.isBoth) {\n this.dragTargetIndex === 1 && (val = clamp(value, this.value[0], max))\n this.dragTargetIndex === 0 && (val = clamp(value, min, this.value[1]))\n }\n\n const diff = Math.round((val - min) / step) * step\n\n return min + diff\n },\n update(value, end = false) {\n let val = null\n if (this.isBoth) {\n if (this.dragTargetIndex === 0) {\n val = [this.format(value), this.value[1]]\n }\n if (this.dragTargetIndex === 1) {\n val = [this.value[0], this.format(value)]\n }\n } else {\n val = this.format(value)\n }\n ;(!this.isBoth || this.dragTargetIndex !== null) && this.$emit('input', val)\n if (end) {\n this.$emit('change', val)\n }\n },\n getBarRect() {\n return new Promise((resolve, reject) => {\n getBoundingClientRect(\n this.$refs.bar,\n res => {\n if (res.result) {\n resolve({\n left: res.size.left,\n right: res.size.right\n })\n }\n },\n 0\n )\n })\n },\n maskTouchStart() {}\n }\n}\n</script>\n\n<style scoped>\n.dof-slider {\n flex-direction: column;\n position: relative;\n}\n\n.dof-slider-track {\n position: relative;\n}\n\n.dof-slider-bar {\n position: relative;\n overflow: hidden;\n /* transition-property: width;\n transition-duration: 100ms; */\n}\n\n.dof-slider-bar--brand {\n background-color: #00a4f2;\n}\n\n.dof-slider-bar--purple {\n background-color: #995efc;\n}\n.dof-slider-bar--blue-purple {\n background-color: #6575ff;\n}\n.dof-slider-bar--blue {\n background-color: #29c3ff;\n}\n.dof-slider-bar--cyan {\n background-color: #00bdb2;\n}\n.dof-slider-bar--yellow {\n background-color: #ffaa10;\n}\n.dof-slider-bar--orange {\n background-color: #ffaa10;\n}\n.dof-slider-bar--orange-red {\n background-color: #f56428;\n}\n.dof-slider-bar--gray-offline {\n background-color: #7c879b;\n}\n\n.dof-slider-button {\n position: absolute;\n}\n.button-scale {\n transition-property: transform;\n transition-duration: 0.3s;\n transition-delay: 0s;\n transform: scale(1);\n}\n.button-scale:active {\n transform: scale(1.5);\n}\n.dof-slider-button-touching {\n transform: scale(1.5);\n}\n.dof-slider-scales {\n position: relative;\n margin-top: 16px;\n height: 24px;\n}\n.dof-slider-thin-bar {\n position: absolute;\n}\n.dof-slider-thin-bar-left {\n position: absolute;\n height: 4px;\n top: 0px;\n left: 0px;\n}\n.dof-slider-thin-bar-right {\n position: absolute;\n height: 4px;\n top: 0px;\n right: 0px;\n}\n.dof-slider-disabled-mask {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n /* background-color: rgba(0, 0, 0, 0.5); */\n}\n.hideButton {\n opacity: 0;\n}\n</style>\n<style src=\"./diablo.css\" scoped></style>"],"sourceRoot":""}]);
9693
+ exports.push([module.i, "\n.dof-slider[data-v-db384bc8] {\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -webkit-flex-direction: column;\n flex-direction: column;\n position: relative;\n}\n.dof-slider-track[data-v-db384bc8] {\n position: relative;\n}\n.dof-slider-bar[data-v-db384bc8] {\n position: relative;\n overflow: hidden;\n /* transition-property: width;\n transition-duration: 100ms; */\n}\n.dof-slider-bar--brand[data-v-db384bc8] {\n background-color: #00a4f2;\n}\n.dof-slider-bar--purple[data-v-db384bc8] {\n background-color: #995efc;\n}\n.dof-slider-bar--blue-purple[data-v-db384bc8] {\n background-color: #6575ff;\n}\n.dof-slider-bar--blue[data-v-db384bc8] {\n background-color: #29c3ff;\n}\n.dof-slider-bar--cyan[data-v-db384bc8] {\n background-color: #00bdb2;\n}\n.dof-slider-bar--yellow[data-v-db384bc8] {\n background-color: #ffaa10;\n}\n.dof-slider-bar--orange[data-v-db384bc8] {\n background-color: #ffaa10;\n}\n.dof-slider-bar--orange-red[data-v-db384bc8] {\n background-color: #f56428;\n}\n.dof-slider-bar--gray-offline[data-v-db384bc8] {\n background-color: #7c879b;\n}\n.dof-slider-button[data-v-db384bc8] {\n position: absolute;\n}\n.button-scale[data-v-db384bc8] {\n -webkit-transition-property: -webkit-transform;\n transition-property: -webkit-transform;\n transition-property: transform;\n transition-property: transform, -webkit-transform;\n -webkit-transition-duration: 0.3s;\n transition-duration: 0.3s;\n -webkit-transition-delay: 0s;\n transition-delay: 0s;\n -webkit-transform: scale(1);\n transform: scale(1);\n}\n.button-scale[data-v-db384bc8]:active {\n -webkit-transform: scale(1.5);\n transform: scale(1.5);\n}\n.dof-slider-button-touching[data-v-db384bc8] {\n -webkit-transform: scale(1.5);\n transform: scale(1.5);\n}\n.dof-slider-scales[data-v-db384bc8] {\n position: relative;\n margin-top: 0.21333rem;\n height: 0.32rem;\n}\n.dof-slider-thin-bar[data-v-db384bc8] {\n position: absolute;\n}\n.dof-slider-thin-bar-left[data-v-db384bc8] {\n position: absolute;\n height: 0.05333rem;\n top: 0px;\n left: 0px;\n}\n.dof-slider-thin-bar-right[data-v-db384bc8] {\n position: absolute;\n height: 0.05333rem;\n top: 0px;\n right: 0px;\n}\n.dof-slider-disabled-mask[data-v-db384bc8] {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n /* background-color: rgba(0, 0, 0, 0.5); */\n}\n.hideButton[data-v-db384bc8] {\n opacity: 0;\n}\n", "", {"version":3,"sources":["/Users/wuhm45/Documents/code/weex组件库/dolphin-weex-ui/packages/dof-slider/index.vue?5e613797"],"names":[],"mappings":";AA8aA;EACA,6BAAA;EAAA,8BAAA;EAAA,+BAAA;UAAA,uBAAA;EACA,mBAAA;CACA;AAEA;EACA,mBAAA;CACA;AAEA;EACA,mBAAA;EACA,iBAAA;EACA;gCACA;CACA;AAEA;EACA,0BAAA;CACA;AAEA;EACA,0BAAA;CACA;AACA;EACA,0BAAA;CACA;AACA;EACA,0BAAA;CACA;AACA;EACA,0BAAA;CACA;AACA;EACA,0BAAA;CACA;AACA;EACA,0BAAA;CACA;AACA;EACA,0BAAA;CACA;AACA;EACA,0BAAA;CACA;AAEA;EACA,mBAAA;CACA;AACA;EACA,+CAAA;EAAA,uCAAA;EAAA,+BAAA;EAAA,kDAAA;EACA,kCAAA;UAAA,0BAAA;EACA,6BAAA;UAAA,qBAAA;EACA,4BAAA;UAAA,oBAAA;CACA;AACA;EACA,8BAAA;UAAA,sBAAA;CACA;AACA;EACA,8BAAA;UAAA,sBAAA;CACA;AACA;EACA,mBAAA;EACA,uBAAA;EACA,gBAAA;CACA;AACA;EACA,mBAAA;CACA;AACA;EACA,mBAAA;EACA,mBAAA;EACA,SAAA;EACA,UAAA;CACA;AACA;EACA,mBAAA;EACA,mBAAA;EACA,SAAA;EACA,WAAA;CACA;AACA;EACA,mBAAA;EACA,OAAA;EACA,QAAA;EACA,SAAA;EACA,UAAA;EACA,2CAAA;CACA;AACA;EACA,WAAA;CACA","file":"index.vue","sourcesContent":["<template>\n <div\n :class=\"['dof-slider']\"\n :style=\"disabledStyle\"\n @touchstart=\"onTouchStart\"\n @horizontalpan=\"onTouchMove\"\n @touchend=\"onTouchEnd\"\n >\n <div class=\"dof-slider-track\" ref=\"track\" :style=\"trackStyle\" :key=\"_isColmo + 'slider'\">\n <div v-if=\"isGradientBar\" class=\"dof-slider-thin-bar\" :style=\"thinBarStyle\">\n <div\n class=\"dof-slider-thin-bar-left\"\n v-if=\"_gradientBarConfig.mid\"\n :style=\"{\n backgroundImage: `linear-gradient(to right, ${_gradientBarConfig.start}, ${_gradientBarConfig.mid})`,\n width: midWidth + _buttonSize / 2 + 1 + 'px'\n }\"\n ></div>\n <div\n v-if=\"_gradientBarConfig.mid\"\n class=\"dof-slider-thin-bar-right\"\n :style=\"{\n backgroundImage: `linear-gradient(to right, ${_gradientBarConfig.mid}, ${_gradientBarConfig.end})`,\n width: midWidth + _buttonSize / 2 - 1 + 'px'\n }\"\n ></div>\n <div\n class=\"dof-slider-thin-bar-left\"\n v-if=\"!_gradientBarConfig.mid\"\n :style=\"{\n backgroundImage: `linear-gradient(to right, ${_gradientBarConfig.start}, ${_gradientBarConfig.end})`,\n right: 1 + 'px'\n }\"\n ></div>\n </div>\n <div v-if=\"!isGradientBar\" :style=\"lineStyle\"></div>\n <div :class=\"['dof-slider-bar']\" ref=\"bar\" :style=\"barStyle\">\n <div\n v-if=\"!isGradientBar\"\n :style=\"smallBarStyle\"\n :class=\"[barColor || isGradientBar ? '' : `dof-slider-bar--${this.theme}`]\"\n ></div>\n <div\n :class=\"['dof-slider-button', isGradientBar ? 'button-scale' : '', _isColmo && disabled ? 'hideButton' : '']\"\n v-for=\"(itemStyle, i) in buttonStyle\"\n :key=\"i + disabled\"\n :style=\"itemStyle\"\n ></div>\n </div>\n </div>\n <div class=\"dof-slider-scales\" v-if=\"$slots.default\">\n <slot></slot>\n </div>\n <div class=\"dof-slider-disabled-mask\" v-if=\"isGradientBar && disabled\" @touchstart=\"maskTouchStart\"></div>\n </div>\n</template>\n\n<script>\n// import { getBoundingClientRect } from '../utils/dom.js'\nimport { clamp } from '../utils/math-extension.js'\nimport { Touch } from '../utils/touch.js'\nimport ColmoMixin from '../../mixins/colmo'\nimport DiabloMixin from '../../mixins/diablo'\nconst dom = weex.requireModule('dom')\n\nconst getBoundingClientRect = (element, func, delay = 50) => {\n setTimeout(() => dom && dom.getComponentRect(element, func), delay)\n}\n\nexport default {\n mixins: [ColmoMixin, DiabloMixin],\n props: {\n value: {\n type: [Number, Array], // Number为单点滑杆， Array为双侧滑杆\n required: true\n },\n min: {\n type: Number,\n default: 0\n },\n max: {\n type: Number,\n default: 100\n },\n step: {\n type: Number,\n default: 1\n },\n disabled: {\n type: Boolean,\n default: false\n },\n readonly: {\n type: Boolean,\n default: false\n },\n trackHeight: {\n type: Number,\n default: 40\n },\n trackColor: {\n type: String,\n default: ''\n },\n theme: {\n type: String,\n default: 'brand'\n },\n barColor: {\n type: String,\n default: ''\n },\n buttonColor: {\n type: String,\n default: '#ffffff'\n },\n buttonSize: {\n type: Number,\n default: 0\n },\n delay: {\n type: Number,\n default: 50\n },\n gradientBarConfig: {\n type: Object,\n default: () => ({})\n }\n },\n model: {\n prop: 'value',\n event: 'input'\n },\n data() {\n return {\n touch: Touch.Create(),\n current: 0,\n startValue: 0,\n width: 0,\n dragTargetIndex: null, // 0 1\n startRight: null,\n prevScreenX: null,\n isTouching: false,\n isShow: false,\n getWidthRectTime: 0\n }\n },\n watch: {\n barStyle() {\n this.isShow = true\n }\n },\n computed: {\n _gradientBarConfig() {\n if (this.gradientBarConfig.start && this.gradientBarConfig.end) return this.gradientBarConfig\n return this._isColmo ? { start: '#124AFE', mid: '#ffffff', end: '#E55225' } : {}\n },\n _buttonSize() {\n if (this.buttonSize) return this.buttonSize\n return this._isColmo ? 40 : 24\n },\n // 是否双侧\n isBoth() {\n return Object.prototype.toString.call(this.value) === '[object Array]'\n },\n // 是否细bar\n isGradientBar() {\n return this._gradientBarConfig.start && this._gradientBarConfig.end\n },\n scope() {\n return this.max - this.min\n },\n interactive() {\n return !this.disabled && !this.readonly\n },\n _trackHeight() {\n if (this.isGradientBar || this.trackHeight < this._buttonSize) return this._buttonSize * 1.6\n return this.trackHeight\n },\n trackStyle() {\n const res = {\n height: `${this._trackHeight}px`,\n backgroundColor: this.trackColor || (this._isDiablo ? '#45494C' : '#F6F7F9'),\n borderRadius: `${this._trackHeight / 2}px`\n }\n // 细bar样式\n if (this.isGradientBar || this.trackHeight < this._buttonSize) {\n res.backgroundColor = 'transparent'\n }\n return res\n },\n barStyle() {\n let percent = 0\n if (this.isBoth) {\n percent = (Math.min(this.value[1], this.max) - Math.max(this.value[0], this.min)) / this.scope\n } else {\n percent = (this.value - this.min) / this.scope\n }\n\n // const width = ((this.value - this.min) / this.scope) * this.width\n // const widthCss = clamp(width+this._trackHeight, this._trackHeight, this.width)\n\n // fix: 修复value带来的width小于this._trackHeight时，bar宽度不变\n const width = percent * this.width\n let widthCss = this._trackHeight\n if (percent < 0) {\n widthCss = this._trackHeight\n } else if (percent > 1) {\n widthCss = this.width + this._trackHeight\n } else {\n // 正常滑动\n widthCss = width + this._trackHeight\n }\n const res = {\n width: `${widthCss}px`,\n borderRadius: `${this._trackHeight / 2}px`,\n height: `${this._trackHeight}px`\n }\n\n if (this.isBoth) res.left = ((Math.max(this.value[0], this.min) - this.min) / this.scope) * this.width + 'px'\n\n // if (this.barColor) {\n // res.backgroundColor = this.barColor\n // }\n // 细bar样式\n // if (this.isGradientBar) {\n res.backgroundColor = 'transparent'\n // }\n return res\n },\n smallBarStyle() {\n const buttonPadding = this.trackHeight > this._buttonSize ? 0 : (this._trackHeight - this._buttonSize) / 2 + 1\n const res = {\n position: 'absolute',\n top: `${(this._trackHeight - this.trackHeight) / 2}px`,\n left: `${buttonPadding}px`,\n right: `${buttonPadding}px`,\n height: `${this.trackHeight}px`,\n borderRadius: `${this.trackHeight / 2}px`\n }\n if (this.barColor) {\n res.backgroundColor = this.barColor\n }\n return res\n },\n buttonStyle() {\n const buttonSize = this._buttonSize\n const res = {\n top: `${(this._trackHeight - buttonSize) / 2}px`,\n width: `${buttonSize}px`,\n height: `${buttonSize}px`,\n borderRadius: `${buttonSize / 2}px`,\n backgroundColor: this.buttonColor\n }\n const buttonPadding = (this._trackHeight - buttonSize) / 2\n return this.isBoth\n ? [\n { ...res, left: `${buttonPadding}px` },\n { ...res, right: `${buttonPadding}px` }\n ]\n : [{ ...res, right: `${buttonPadding}px` }]\n },\n lineStyle() {\n const buttonPadding = (this._trackHeight - this._buttonSize) / 2 + 1\n const res = {\n position: 'absolute',\n top: `${(this._trackHeight - this.trackHeight) / 2}px`,\n left: `${buttonPadding}px`,\n right: `${buttonPadding}px`,\n height: `${this.trackHeight}px`,\n borderRadius: `${this.trackHeight / 2}px`\n }\n // if (this.trackColor) {\n res.backgroundColor = this.trackColor || (this._isDiablo ? '#45494C' : '#F6F7F9')\n // }\n return res\n },\n thinBarStyle() {\n const buttonPadding = (this._trackHeight - this._buttonSize) / 2\n const res = {\n top: `${(this._trackHeight - 4) / 2}px`,\n left: `${buttonPadding}px`,\n right: `${buttonPadding}px`,\n height: '4px'\n }\n return res\n },\n midWidth() {\n return this.width / 2\n },\n disabledStyle() {\n if (!this.isShow) return { opacity: 0 }\n return this.isGradientBar && this.disabled ? { opacity: 0.3 } : { opacity: 1 }\n }\n },\n mounted() {\n this.getRect()\n },\n methods: {\n getRect() {\n getBoundingClientRect(\n this.$refs.track,\n res => {\n if (res.result && res.size.width !== 0) {\n // 实际可滑动长度（可变化范围）= bar宽度 - btn宽度\n this.width = res.size.width - this._trackHeight\n } else {\n this.getWidthRectTime < 6\n ? setTimeout(() => {\n this.getWidthRectTime++\n this.getRect()\n }, 50)\n : (this.width = res.size.width - this._trackHeight)\n }\n },\n this.delay\n )\n },\n async onTouchStart(e) {\n if (!this.interactive) {\n return\n }\n if (this.isGradientBar) this.isTouching = true\n this.touch.start(e)\n\n if (this.isBoth) {\n let { left, right } = await this.getBarRect()\n let startX = this.touch.startX\n this.startRight = right\n this.dragTargetIndex = Math.abs(left - startX) < Math.abs(right - startX) ? 0 : 1\n this.current = this.value[this.dragTargetIndex]\n } else {\n this.current = this.value\n }\n\n this.startValue = this.format(this.current)\n },\n onTouchMove(e) {\n if (!this.interactive) {\n return\n }\n\n this.touch.move(e)\n\n const delta = this.touch.deltaX\n if (this.isBoth && this.value[0] === this.value[1]) {\n this.dragTargetIndex = e.changedTouches[0].screenX > this.prevScreenX ? 1 : 0\n if (delta === 0) {\n this.dragTargetIndex = this.touch.startX >= this.startRight ? 1 : 0\n }\n }\n\n const total = this.width\n const diff = (delta / total) * this.scope\n\n this.current = this.startValue + diff\n this.prevScreenX = e.changedTouches[0].screenX\n\n if (delta === 0) return\n this.update(this.current)\n },\n async onTouchEnd(e) {\n if (!this.interactive) {\n return\n }\n this.isTouching = false\n // 点按\n if (this.startValue === this.current) {\n const total = this.width\n let { left, right } = await this.getBarRect()\n const diff = ((this.touch.startX - (this.dragTargetIndex === 0 ? left : right)) / total) * this.scope\n this.current = this.startValue + diff\n }\n this.update(this.current, true)\n this.$emit('dragend', e)\n },\n format(value) {\n const min = +this.min\n const max = +this.max\n const step = +this.step\n\n let val = clamp(value, min, max)\n if (this.isBoth) {\n this.dragTargetIndex === 1 && (val = clamp(value, this.value[0], max))\n this.dragTargetIndex === 0 && (val = clamp(value, min, this.value[1]))\n }\n\n const diff = Math.round((val - min) / step) * step\n\n return min + diff\n },\n update(value, end = false) {\n let val = null\n if (this.isBoth) {\n if (this.dragTargetIndex === 0) {\n val = [this.format(value), this.value[1]]\n }\n if (this.dragTargetIndex === 1) {\n val = [this.value[0], this.format(value)]\n }\n } else {\n val = this.format(value)\n }\n ;(!this.isBoth || this.dragTargetIndex !== null) && this.$emit('input', val)\n if (end) {\n this.$emit('change', val)\n }\n },\n getBarRect() {\n return new Promise((resolve, reject) => {\n getBoundingClientRect(\n this.$refs.bar,\n res => {\n if (res.result) {\n resolve({\n left: res.size.left,\n right: res.size.right\n })\n }\n },\n 0\n )\n })\n },\n maskTouchStart() {}\n }\n}\n</script>\n\n<style scoped>\n.dof-slider {\n flex-direction: column;\n position: relative;\n}\n\n.dof-slider-track {\n position: relative;\n}\n\n.dof-slider-bar {\n position: relative;\n overflow: hidden;\n /* transition-property: width;\n transition-duration: 100ms; */\n}\n\n.dof-slider-bar--brand {\n background-color: #00a4f2;\n}\n\n.dof-slider-bar--purple {\n background-color: #995efc;\n}\n.dof-slider-bar--blue-purple {\n background-color: #6575ff;\n}\n.dof-slider-bar--blue {\n background-color: #29c3ff;\n}\n.dof-slider-bar--cyan {\n background-color: #00bdb2;\n}\n.dof-slider-bar--yellow {\n background-color: #ffaa10;\n}\n.dof-slider-bar--orange {\n background-color: #ffaa10;\n}\n.dof-slider-bar--orange-red {\n background-color: #f56428;\n}\n.dof-slider-bar--gray-offline {\n background-color: #7c879b;\n}\n\n.dof-slider-button {\n position: absolute;\n}\n.button-scale {\n transition-property: transform;\n transition-duration: 0.3s;\n transition-delay: 0s;\n transform: scale(1);\n}\n.button-scale:active {\n transform: scale(1.5);\n}\n.dof-slider-button-touching {\n transform: scale(1.5);\n}\n.dof-slider-scales {\n position: relative;\n margin-top: 16px;\n height: 24px;\n}\n.dof-slider-thin-bar {\n position: absolute;\n}\n.dof-slider-thin-bar-left {\n position: absolute;\n height: 4px;\n top: 0px;\n left: 0px;\n}\n.dof-slider-thin-bar-right {\n position: absolute;\n height: 4px;\n top: 0px;\n right: 0px;\n}\n.dof-slider-disabled-mask {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n /* background-color: rgba(0, 0, 0, 0.5); */\n}\n.hideButton {\n opacity: 0;\n}\n</style>\n<style src=\"./diablo.css\" scoped></style>"],"sourceRoot":""}]);
9694
9694
 
9695
9695
  // exports
9696
9696
 
@@ -10180,6 +10180,10 @@ var _dofOverlay = __webpack_require__(10);
10180
10180
 
10181
10181
  var _dofOverlay2 = _interopRequireDefault(_dofOverlay);
10182
10182
 
10183
+ var _diablo = __webpack_require__(4);
10184
+
10185
+ var _diablo2 = _interopRequireDefault(_diablo);
10186
+
10183
10187
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
10184
10188
 
10185
10189
  //
@@ -10328,12 +10332,45 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
10328
10332
  //
10329
10333
  //
10330
10334
  //
10335
+ //
10336
+ //
10337
+ //
10338
+ //
10339
+ //
10340
+ //
10341
+ //
10342
+ //
10343
+ //
10344
+ //
10345
+ //
10346
+ //
10347
+ //
10348
+ //
10349
+ //
10350
+ //
10351
+ //
10352
+ //
10353
+ //
10354
+ //
10355
+ //
10356
+ //
10357
+ //
10358
+ //
10359
+ //
10360
+ //
10361
+ //
10362
+ //
10363
+ //
10364
+ //
10365
+ //
10366
+ //
10331
10367
 
10332
10368
  var animation = weex.requireModule('animation');
10333
10369
  var platform = weex.config.env.platform;
10334
10370
 
10335
10371
  var isWeb = (typeof window === 'undefined' ? 'undefined' : _typeof(window)) === 'object' && platform.toLowerCase() === 'web';
10336
10372
  exports.default = {
10373
+ mixins: [_diablo2.default],
10337
10374
  components: { DofOverlay: _dofOverlay2.default },
10338
10375
  props: {
10339
10376
  show: {
@@ -10347,7 +10384,7 @@ exports.default = {
10347
10384
  // 背景色，即按钮上方的横条颜色，暂不开放
10348
10385
  popupColor: {
10349
10386
  type: String,
10350
- default: '#F9F9F9'
10387
+ default: ''
10351
10388
  },
10352
10389
  overlayCfg: {
10353
10390
  type: Object,
@@ -10418,7 +10455,8 @@ exports.default = {
10418
10455
  return {
10419
10456
  haveOverlay: true,
10420
10457
  isOverShow: true,
10421
- bottomArc: 0
10458
+ bottomArc: 0,
10459
+ diabloBg: '#1e2326'
10422
10460
  };
10423
10461
  },
10424
10462
  computed: {
@@ -10451,7 +10489,7 @@ exports.default = {
10451
10489
 
10452
10490
  var style = {
10453
10491
  width: width + 'px',
10454
- backgroundColor: popupColor
10492
+ backgroundColor: popupColor ? popupColor : this._isDiablo ? '#101315' : '#F9F9F9'
10455
10493
  // backgroundColor: '#616C73'
10456
10494
  };
10457
10495
  if (pos === 'bottom') {
@@ -10464,7 +10502,7 @@ exports.default = {
10464
10502
  },
10465
10503
  bottomIpxStyle: function bottomIpxStyle() {
10466
10504
  var style = {
10467
- backgroundColor: '#ffffff',
10505
+ backgroundColor: this._isDiablo ? this.diabloBg : '#ffffff',
10468
10506
  paddingBottom: (this.isipx ? 84 : 16) + 'px'
10469
10507
  };
10470
10508
  return style;
@@ -10578,7 +10616,7 @@ exports.default = {
10578
10616
  return _transform;
10579
10617
  },
10580
10618
  textStyleOps: function textStyleOps(item) {
10581
- return item.textColor ? { color: item.textColor } : { color: '#1E2E37' };
10619
+ return item.textColor ? { color: item.textColor } : { color: this._isDiablo ? '#cfcfd0' : '#1E2E37' };
10582
10620
  }
10583
10621
  }
10584
10622
  };
@@ -13901,6 +13939,7 @@ var dom = weex.requireModule('dom'); //
13901
13939
  //
13902
13940
  //
13903
13941
  //
13942
+ //
13904
13943
 
13905
13944
  var icon = __webpack_require__(7);
13906
13945
  // var CHECKED = icon['public_ic_done@2x'];
@@ -17677,7 +17716,7 @@ exports.default = {
17677
17716
  if (this._isColmo) {
17678
17717
  return this.isPlain ? 'transparent' : '#2d2e2f';
17679
17718
  } else {
17680
- return this._isDiablo ? '#2b2f32' : '#F6F7F9';
17719
+ return this._isDiablo ? '#45494C' : '#F6F7F9';
17681
17720
  }
17682
17721
  },
17683
17722
 
@@ -29700,7 +29739,7 @@ exports.default = {
29700
29739
  trackStyle: function trackStyle() {
29701
29740
  var res = {
29702
29741
  height: this._trackHeight + 'px',
29703
- backgroundColor: this.trackColor || (this._isDiablo ? '#2b2f32' : '#F6F7F9'),
29742
+ backgroundColor: this.trackColor || (this._isDiablo ? '#45494C' : '#F6F7F9'),
29704
29743
  borderRadius: this._trackHeight / 2 + 'px'
29705
29744
  // 细bar样式
29706
29745
  };if (this.isGradientBar || this.trackHeight < this._buttonSize) {
@@ -29784,7 +29823,7 @@ exports.default = {
29784
29823
  height: this.trackHeight + 'px',
29785
29824
  borderRadius: this.trackHeight / 2 + 'px'
29786
29825
  // if (this.trackColor) {
29787
- };res.backgroundColor = this.trackColor || (this._isDiablo ? '#2b2f32' : '#F6F7F9');
29826
+ };res.backgroundColor = this.trackColor || (this._isDiablo ? '#45494C' : '#F6F7F9');
29788
29827
  // }
29789
29828
  return res;
29790
29829
  },
@@ -32608,7 +32647,7 @@ exports.default = {
32608
32647
  } else {
32609
32648
  res = {
32610
32649
  'border-color': 'transparent',
32611
- 'background-color': this._isDiablo ? '#d2d5d7' : '#d3d5d7'
32650
+ 'background-color': this._isDiablo ? '#45494C' : '#d3d5d7'
32612
32651
  };
32613
32652
  }
32614
32653
  // colmo
@@ -32629,7 +32668,7 @@ exports.default = {
32629
32668
  if (this._isColmo && this.type === 'default' || this.type === 'colmo') dotColor = '#B35336';
32630
32669
  if (this.dotColor) dotColor = this.dotColor;
32631
32670
  } else {
32632
- dotColor = this.type === 'white' ? '#ffffff' : this._isColmo ? '#8A8A8F' : '#ffffff';
32671
+ dotColor = this.type === 'white' ? '#ffffff' : this._isColmo ? '#8A8A8F' : this._isDiablo ? '#DCDDDD' : '#ffffff';
32633
32672
  }
32634
32673
 
32635
32674
  return dotColor;
@@ -33789,10 +33828,11 @@ exports.default = {
33789
33828
  }
33790
33829
  },
33791
33830
  hackMarginTop: function hackMarginTop() {
33792
- var platform = weex.config.env.platform;
33793
- if (platform === 'iOS') return -1;
33794
- if (platform === 'harmony') return 0;
33795
- return 2;
33831
+ // const platform = weex.config.env.platform
33832
+ // if (platform === 'iOS') return -1
33833
+ // if (platform === 'harmony') return 0
33834
+ // return 2
33835
+ return 0;
33796
33836
  },
33797
33837
  textBtnStyle: function textBtnStyle() {
33798
33838
  var theme = this.theme;
@@ -35412,6 +35452,9 @@ var STYLE_MAP = exports.STYLE_MAP = {
35412
35452
  default: {
35413
35453
  borderRadius: '32px'
35414
35454
  },
35455
+ diablo: {
35456
+ borderRadius: '32px'
35457
+ },
35415
35458
  colmo: {
35416
35459
  borderRadius: '0px'
35417
35460
  }
@@ -37767,8 +37810,8 @@ Object.defineProperty(exports, "__esModule", {
37767
37810
  exports.default = {
37768
37811
  add: 'data:image/png;base64,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',
37769
37812
  sub: 'data:image/png;base64,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',
37770
- add_diablo: 'data:image/png;base64,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',
37771
- sub_diablo: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAPKADAAQAAAABAAAAPAAAAACL3+lcAAAE9UlEQVRoBeWby2sTQRzHfzPZthotxUe1Kr6gUFrb2hDBCsXHRRQEQUSNF4/+AWo96UFvPu4qgg/EqgdBEOzNB4W2YIy2mlLoVYzWBzUabJvu+PtttmWSbDbZ3bx2OxCyu/nNb36fmcns7Mx3GZQoBYNB/3QSelQBQQZqC2OsRQA0gYB6YPihJCCOx3EGEBNCjAvg45xBuE6BgXA4nChFaFhW8VJnZ+eaOa6cRJAj6HUnfmptep/BfMNYGU99avLhyMjIN5t+srIVBbi1I7Cbc3YOvR/Aj5JVirMLSczer6ri6tho5I0zV4B16CBt2x7ch/3yErroceDGStYBxviFj+/fvrKSSba1BdwaDK7jc3AdhAjJzsp2zFif6oMzY+HwF6tlWgZu6wgcZJz1YUENVgsrsv2UUEUoOhp5YcWvz4px2/bgGcbgDuZZaiVfiWyX4Mgfamxa/3fy65fBQssoqIWbm5vr6vz1N4GxU4U6LqudEPemE/HTExMT0/nKzQscCAQaZ+bYMxzeduVzVtHfBQzW+sThSCQyaRYHN/uRWtYVsASBDUKxUsxmTKbAqW5c5S0r0yG0FrN8LeM456ClD1C9GfbVf8pYFw5kf3INZIb/Yf3W8xzpTHtAFdOreMs6ZHTLygLWJhVJMYYwlb7POq3PKVVhrZmTk6wW1GZQ7oelymrQWdIqLq2F27t27BVCfZlm4fITnHvvk+feaS2MsJddzpcVfibTAnBHILAHrcv11JMVWAkv9OhsWhELwKrKzpaw0Iq6ltm0/7C2UsGUzxhVsR/eKwoqFZ70ieQGWjnRWlhblvEuLHErOqM+sUitQUkV4sFDnZHR6uK/pPiFiHYX3NxSOzNLFLaC01LqIoClRqklVk7rxm5pIqdxEiuue6stTh25JT+xctoRcEvATuMkVi5o+2ORJGLl2l7PIgEmVgXXglIbWzahG1evgu7ubqhfvsymh8Kyxf/8haGhIZj8/qOwDEZWyOpoKllTUwMnjh8Dv99v5L7o17Zs3gQ3bt2G2dlZ276pS8ft5l65amXZYClGqlgq03ZCVo5d2jbwzx8/IZEoyTauIROVRWXaTsiq4ONSDEevLXacUNd69PhJWf/DTrozsbJtnYG7VbuFYqcVzPLglgzeh/m4mY2XftMkFaSp8BKUGQuxchKQoBFpKryeZoiV62qZYa/TIt8wsaYW8VAt43lgnVEDJmkQApNaxqspqTOm1rR0HVS/V2mRq39e6yWtS4urXgUmjdc82wKwLvqiEdtraUAWtC0ApyjZRa/RkpBNZkoD/vQh/BKnmX2ygauPkUXeOSSWNGC6QAo3/JqiY5enKZ0lDSMLmHbMSeGGVmqapbtOSPIQytz9JwRDUcvkt9gEKdzwcWq/uzhT0Qpg56Ij7+4bxW4ITIakglmztmkr/qe7jDJW7TV8BETY87niy+rSsiHJ+XAJaFC+VtXHGKsWs0mQpsCkXSQ5nyugdelhPr1lzi49X0mxWCzRUL/sgVJTu7Fqu3dKXHo0Go3+no871zeOS4UnTZ0H4grmMO0ZhXt0bIn7Y6w3+iF8vVBPloDJqdsF4pZbiuR8pHCr6IyMXgHAGIykhfla2nILyw51IRtpu8old6rMSx4yNB2TDkqXBpXsNR7OxbXRSOR1ZtlWzx21cGZh7e071wplNoS3MW+/qJUJTufV+iref+rS0BbUow7hAAAAAElFTkSuQmCC'
37813
+ add_diablo: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGgAAABoCAYAAAAdHLWhAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAaKADAAQAAAABAAAAaAAAAAB/U1sRAAAMK0lEQVR4Ae1dCWxUxxmemV3MYW/tKE2L0ypV7LUd0iglCYQEkmKwje01NkSEKD1EI0FoRNIjaVqkSlVRlaRSq6aqlJJUqI1UWpLULQXbu+sbq6qIUEUgF8n6AEqqcBRRzPr27pt+s3jXe+8+79u37+EZaTVv7v//v53rn4sScxi63uG4zcItFZwoFZTTCkKJnRBaRIhig40fEb8C/Kbx81JCvZxwL6eB7wv49lCFexTCPHnU53G73dcQz/CGGpHCrVu3WoZHR1cQwtaDvvWck9Wwl2hLKz8LYI8QznuJ39Lb1dXyqbb5a5ObYQB6cOvWxQXeic2E8q9xQipBmKgRuhmU6aGcOAlT9ne5XCd1KzhFQbkGiFbXbVxLKdkGAT2qNyiJZUPfp5zv537251zXrJwAhCYs7+roxDY0L7shJPQlhjUK/jjNnLOXetpb3ssFlboCJJqx/JGxHejAfwRmv5gLhudYJnAibZQqL3a6XMfmmMeckukFEK1xNG5HjXkRVH5uTpQaJBFGkO1+5v9ej8vVrwdJWQeoxuFYTjh7Fcw8oAdDOpUxheH7L0bzF7/0dnPzeDbLzBpATU1NtnGf8gLh5GkwYMkmE7nLm5/lCnmmu8PpzBYNWQGotrbxXs7IXzA5LM0W4UbKl1O+dwFXnsPkd1JrujQHqMax8WnUml+B0IVaE2vw/E4whT3W0dEyqCWdmgFUX1//GT+x/AHDnS1aEmimvMC7lxHyZKe77S2t6Nakb6h0OJZSaukBUeu0IsyM+eDfLlqNR0vsFZOnB/v/qQUPGQNUW9tkZ4z0oVm7QwuCboQ8oBmptpdVFA0N9ndmyk9GAG1oaLgP1boXRJhp0pmpzNJN/4C9rLysqNDWev78eSXdRNHx5twHCXAUhR5BBroqNaMZMLobOr3DhbYlW5qbm/1zoRV9mnojmjWuUJcEJ7XsOKWbro6O/S51zPgxVDdxYkAQ6HNksxZfonF96b2lZRV5GDiI7kCVUQWQGEoHRmtyQKBKyDORH7bbK/6HgYMqZauqJk7MczBa+8pcqJNpCIHG4eWa+sa1amSRNkDV9Rufmc+TUDVCTRIXLRY/gJboliRxIoLSAkiM2DAgEOobaTKXwK0+YvkTsklrBJ2yDxL9jsKZ0BJ8NnPaZA4zEii1l5dPDg2k1jakrEF+Yn0BmZZI0WorAexU2lNX11SRKtekAFXXN92DJYNdqTKR4XOSQJ6fKr9NlTIZQFApcbESmrIZTFWIDE8ogaoNdQ2PJwxFQEKAMGrbgRHHqmSJZVjmEuCUvSz6+UQ5xQVI7L7BEEP0PdJkXQK82EeszycqJi5ABaPjO5HA1LtvEjFsTH/+nUS1KAYgsakQ2oIfGpORG5aqIj+1iM01MSYGoOGRsScQ6wsxMaVHViWAYfezjY2NMQcEIgDas2cP44TuziolMvNEErgF29S2RwdGAHT02PFKRCiJjiTd+kiAUpocIChDt+lDivalFBUVklX3ryR3LltGwKj2BeiRI1YKquqa7g4vyhp0iPZvwsdNuWXKXlpCdn17J1m46PpWvI89/eSVva9hKzj+ciYzjHJRSULD7lATN+njjyBAHCE0ndnc1BQCRxB/R0U5uWe5aZetvi5OGAZBCAGEbSdJVQ7BBEa0i4s/H0PW0qVLY/zM4cGLh0cmQot6AYAqKytFUxfyNAcjs1TivNGsY+bLrN2QIB8Nc1WQoQBAlkUFK8Gi3D4VlErObb4+SEIAIIx6Qh7BAGnnVAIrxPEdQcF1gAhfl1NyZOHRErCOTfq/KjyZ0B7AFvcQSGMgCTALfUiQw44ePf4l2IsNRJskBRLA8fLAYQTmt/pTrotLiekvAQzaArhgFy+TAOkv/3RKLBUTVmgWcDGRNEaUQN61a5O3Y3lhfhz0NSICqWjyWXx2hkk4rvSSxogSsHBWyKBXkBoEI6IDmnC2yEZr6jd+gu+cH2G020vJls2bSHFxMWEsVreWTIYWS0j5G4qmYJzKccuEGjMxMUnefe998teDfyeTk5pfeaCGlEBcjA+eg5JU3FYI9VwOTWFhIdm188mIJYNMybkOcixwyfLNz19CVj+4CtLg5MAbmp2kT1Zk0jBcN2ODFoHnJ42lQ2C53a4pOJmSfPddd2WahSbpcZ6oQKh5xB2fOTVXh4dzWn504cPDxrjOlHE+JQDyRhOot3tgcDDQ9utdbrzypqd95HBra7wg3f3Q8XitM7fj5nwX6b7fv06+fOcyUoyVUAb9hhrjqK8jVmtkf+PpHyAe7E1QY8YnJsipjz4mly9fVpMsa3EpZ14rOsSc1yDBodjg8cGHpwI/tRzX1lTHADR0+jTp6OpWm5Wh4uPGMC8T90obiipJzKwEFD7CcNn3+Vkf+WUkCVCmfApVD/MYiShJy6wEpvLyPJizcwnQrEyM9HWp79Chq+iDFAmQkWCZoQVjgwAubLHVKgEyIEBUmQGopaVFvBQyZEAa5zdJjATejwjMCDEHOTK/pWE87qGH6xVUzUzZacBhPDLnJ0VYbLnQ7XR+FAJomvllDTLQfwG1J4RHoAb1uVwXoGw5ZSAa5zkpLNSihWklaZtZpTI2Ph5D+vhYrF9MJGN6KGSauoKkhQCijO8PeprNPnHy3QiSxZKBULya0/Ce8EelQjr6oYGBS6Vl5ZvAVLHZGBPrSXkL8ojNZiMXL14iB958i5w794nZ2LhOL27BOj04EHpMKmJ3RnV9w/cxJ/q1OTm7Iageof6ppZ2dnaNBbkJNnPDgCyxvwPIFA6WtrwRQWw6GgyNKjwCop6XlIja0CJCkyYEEqEJ/E11sBEAikFv4z4UVHVG6sy4Bd0dH6zvRpcQAJGawoqpFR5Tu7EoAo+i417/FACTIwHPK4jFAafSTQF+n03k0XnFxAep2t5xAG3coXgLpp70E8PznTxPlGhcgEdnKrc/CMu10PBHDRvNHd3IAb7P+IxFdCQFqbz90FleTyaYukeS08b82RZUfJMsqIUAi0U0Fi34JS93uv2SlybAICeD0wk+uK6ojvCMcSQHCo0RTGHCLe7PlsDtCbJk7INB3Cm2LUt6bHdLFJSoSb96cKSkvz0dbuSZRHOmvWgIj2Kyzoe3w4ZR7jJPWoGCxvrGRHwOgt4NuaWcoAU53pvsWeFoA9fX1+RQrFdeVXcmQtHmfHH/0fV3trWmr09ICSEi1u7X1HC5d+hY+1Z0rnPeQRAjg5NT4yHcjfFI4UvZB4enxnEo/nvm6jJPhDeH+8jsdCfCzTPGt7+npuZpO7GAcVQCJRHiD7V+lZWWoeXRtMBNpp5TAf4mFrut0u/+dMmZUBNUAifRY8esrLS/DyitdEZWfdMZKYASK0Joup/OD2KDUPmn3QdFZrbl/5S7MjvZH+0v3rAQw1/HiXFojFKHHZ33VfWFQkZHBPQuN0DbwpOqKjEowb+JLTKH18dZ41LA0pyYuvABMZDvt9vIxDByq4Z8p4OFZm/ebkjNMYesAzoeZMpExQIIADByOlpSVnwE6DjjFDcLz1ggVjo8qVT3tbee0EMKc+6DowrvdbX9ElV49n09KYMvu3gXEvzqVAjRadsncmjdJ4qEiH2f78IDCY8kKvsHCruGY+o6udmez1nxpDlCQwBrHxqcwyhPLFaZ8biDIR2qbHvMT3zd63e6snLHSrImLZqTL1faalfiX4R/wt+iwG8R9BfeFPbVm1X2rswWOkFPWalA4CNV1DbXQ470CP3u4v0m/xZsqr/usdHdfa2vK5YJMedQFIEEk+qaFfm7dhY70eThvzZTwHKV3YYPHz7CH4Jhe5esGUJAhAZSPW58gjO9GH3V70N/ANg5ck4NiK5rY7aQ3nboDFGRQvLiyYFH+4xjtbYefULzmjJYgTVH2FdT2N0HVK8HjiFHhujgNIZTqxsbbqE/5JnYRbQNBFbpwHr+QKXg7hY6xyLbYGdiTET+ebr6GACic2xqHYznnlmrcgLIe/g/jl+1h+iD+GL24XbeXKtNdHR0dhlo1NhxA4WCJZlC8bQR91EPoCJbhn12BJkfUsJvD46X57Ue8M2hSPXgYwUMYPWnlviNut/s/aabPSTRDA5RIIlVVj9xsWThpVxRaxHB1sSIuX1WoDTtlCrDXbFrcs0a5UPVzL7MQL5C5cNOSJUNGaLIS8ZTI//8nuWjt+vr4cQAAAABJRU5ErkJggg==',
37814
+ sub_diablo: 'data:image/png;base64,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'
37772
37815
  };
37773
37816
 
37774
37817
  /***/ }),
@@ -44421,7 +44464,7 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
44421
44464
  return _c('div', {
44422
44465
  key: index,
44423
44466
  staticClass: " weex-ct weex-div",
44424
- class: ['midea-actionsheet-list'],
44467
+ class: ['midea-actionsheet-list', !_vm.title && index === 0 ? 'midea-actionsheet-list-first' : ''],
44425
44468
  style: (_vm._px2rem(Object.assign({}, _vm.itemStyle, {
44426
44469
  'border-top-left-radius': index == 0 && !_vm.title ? _vm.borderRadius : '0px',
44427
44470
  'border-top-right-radius': index == 0 && !_vm.title ? _vm.borderRadius : '0px'
@@ -44474,7 +44517,7 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
44474
44517
  staticClass: " weex-ct weex-div",
44475
44518
  style: ({
44476
44519
  height: _vm._px2rem('0px', 75),
44477
- 'background-color': '#ffffff'
44520
+ 'background-color': _vm._isDiablo ? _vm.diabloBg : '#ffffff'
44478
44521
  }),
44479
44522
  attrs: {
44480
44523
  "weex-type": "div"
@@ -49445,6 +49488,11 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
49445
49488
  attrs: {
49446
49489
  "weex-type": "div"
49447
49490
  }
49491
+ }) : _vm._e(), _vm._v(" "), (_vm._isDiablo && _vm.disabled) ? _c('div', {
49492
+ staticClass: "disabledMask weex-ct weex-div",
49493
+ attrs: {
49494
+ "weex-type": "div"
49495
+ }
49448
49496
  }) : _vm._e()])
49449
49497
  },staticRenderFns: []}
49450
49498
  module.exports.render._withStripped = true