dolphin-weex-ui 2.2.16 → 2.2.17

package/dist/index.web.js

@@ -8420,7 +8420,7 @@ exports = module.exports = __webpack_require__(0)(true);
 
 
 // module
-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-Medium;\n  letter-spacing: 0;\n  /* color: #8a8a8f; */\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: #000000; */\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-Medium;\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: #ff3b30;\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: #ff3b30;\n  -webkit-box-align: center;\n  -webkit-align-items: center;\n          align-items: center;\n  -webkit-box-pack: center;\n  -webkit-justify-content: center;\n          justify-content: center;\n  padding-left: 0.10667rem;\n  padding-right: 0.10667rem;\n  /* 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/temp/dolphin-weex-ui/packages/dof-tab-page/index.vue?1a0e3b31","/Users/wuhm45/Documents/code/temp/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\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: '#267aff'}\" -->\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 : 'red' }\"></div>\n            </div>\n            <text\n              class=\"dot-num-tip-text\"\n              :style=\"{ 'background-color': v.badgeColor ? v.badgeColor : 'red' }\"\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'\n\nexport default {\n  mixins: [ColmoMixin],\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: '#000000',\n        hasRightIcon: false\n      }\n      const defaultStyle = {\n        ...base,\n        bgColor: '#ffffff',\n        titleColor: '#8a8a8f',\n        activeTitleColor: '#000000',\n        boxBgColor: '#f2f2f2',\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      return this._isColmo ? colmoStyle : 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: '#ffffff',\n              titleColor: '#000000'\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: 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: '#E5E5E8'\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: '#8A8A8F'\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: '#E5E5E8'\n        }\n      } else {\n        return {\n          borderRightWidth: '2px',\n          borderRightStyle: 'solid',\n          borderRightColor: 'rgba(255, 255, 255, 0.3)'\n        }\n      }\n    },\n    textBtnStyle() {\n      const { theme } = this\n      let hackH = weex.config.env.platform == 'iOS' ? -1 : 2\n      return function(i) {\n        if (theme == 'default') {\n          return {\n            color: '#000000',\n            backgroundColor: '#E5E5E8',\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-Medium;\n  letter-spacing: 0;\n  /* color: #8a8a8f; */\n}\n\n.third-text {\n  font-size: 24px;\n  /* color: #000000; */\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-Medium;\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: #ff3b30;\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: #ff3b30;\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":""}]);
+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-Medium;\n  letter-spacing: 0;\n  /* color: #8a8a8f; */\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: #000000; */\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-Medium;\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: #ff3b30;\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: #ff3b30;\n  -webkit-box-align: center;\n  -webkit-align-items: center;\n          align-items: center;\n  -webkit-box-pack: center;\n  -webkit-justify-content: center;\n          justify-content: center;\n  padding-left: 0.10667rem;\n  padding-right: 0.10667rem;\n  /* 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/temp/dolphin-weex-ui/packages/dof-tab-page/index.vue?8d5a6806","/Users/wuhm45/Documents/code/temp/dolphin-weex-ui/packages/dof-tab-page/<no source>"],"names":[],"mappings":";AA+ZA;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,+BAAA;EACA,kBAAA;EACA,qBAAA;ECjfA,iBAAA;EAAA,wBAAA;EAAA,sBAAA;CDkfA;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,+BAAA;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\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: '#267aff'}\" -->\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 : 'red' }\"></div>\n            </div>\n            <text\n              class=\"dot-num-tip-text\"\n              :style=\"{ 'background-color': v.badgeColor ? v.badgeColor : 'red' }\"\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'\n\nexport default {\n  mixins: [ColmoMixin],\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: '#000000',\n        hasRightIcon: false\n      }\n      const defaultStyle = {\n        ...base,\n        bgColor: '#ffffff',\n        titleColor: '#8a8a8f',\n        activeTitleColor: '#000000',\n        boxBgColor: '#f2f2f2',\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      return this._isColmo ? colmoStyle : 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: '#ffffff',\n              titleColor: '#000000'\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: 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: '#E5E5E8'\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: '#8A8A8F'\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: '#E5E5E8'\n        }\n      } else {\n        return {\n          borderRightWidth: '2px',\n          borderRightStyle: 'solid',\n          borderRightColor: 'rgba(255, 255, 255, 0.3)'\n        }\n      }\n    },\n    textBtnStyle() {\n      const { theme } = this\n      let hackH = weex.config.env.platform == 'iOS' ? -1 : 2\n      return function(i) {\n        if (theme == 'default') {\n          return {\n            color: '#000000',\n            backgroundColor: '#E5E5E8',\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-Medium;\n  letter-spacing: 0;\n  /* color: #8a8a8f; */\n}\n\n.third-text {\n  font-size: 24px;\n  /* color: #000000; */\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-Medium;\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: #ff3b30;\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: #ff3b30;\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":""}]);
 
 // exports
 
@@ -46110,7 +46110,7 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
       }
     }, [_c('div', {
       staticClass: " weex-ct weex-div",
-      class: ['tab-text-wrapper', , _vm.isSlot && 'minibar-inner'],
+      class: ['tab-text-wrapper', _vm.isSlot && 'minibar-inner'],
       attrs: {
         "weex-type": "div"
       }