dolphin-weex-ui 2.4.29 → 2.4.31

package/dist/index.web.js

@@ -9218,7 +9218,7 @@ exports = module.exports = __webpack_require__(0)(true);
 
 
 // module
-exports.push([module.i, "\n.left-content-wrap[data-v-7826a4e4] {\n  /* flex-direction: column;\n  flex-wrap: nowrap; */\n}\n.simple-flow-item-wrapper[data-v-7826a4e4] {\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: row;\n          flex-direction: row;\n}\n.flex-row[data-v-7826a4e4] {\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: row;\n          flex-direction: row;\n}\n.full-rest[data-v-7826a4e4] {\n  -webkit-box-flex: 1;\n  -webkit-flex: 1;\n          flex: 1;\n}\n.root[data-v-7826a4e4] {\n  padding-top: 0.37333rem;\n  padding-bottom: 0.32rem;\n  background-color: transparent;\n}\n.content[data-v-7826a4e4] {\n  padding-top: 0.12rem;\n  padding-bottom: 0.56rem;\n}\n.last-one-content[data-v-7826a4e4] {\n  padding-bottom: 0;\n}\n.title[data-v-7826a4e4],\n.content[data-v-7826a4e4] {\n  padding-left: 0.93333rem;\n  padding-right: 0.93333rem;\n}\n.line[data-v-7826a4e4] {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0.50667rem;\n  width: 0.02667rem;\n  background-color: #dddddd;\n}\n.first-one-title-line[data-v-7826a4e4] {\n  top: 0.26667rem;\n}\n.last-one-title-line[data-v-7826a4e4] {\n  bottom: 0.26667rem;\n}\n.last-one-content-line[data-v-7826a4e4] {\n  width: 0;\n}\n.point[data-v-7826a4e4] {\n  position: absolute;\n  top: 0.08rem;\n  left: 0.44rem;\n  width: 0.16rem;\n  height: 0.16rem;\n  background-color: #dddddd;\n  /* border-style: solid;\n    border-width: 2px;\n    border-color: #00A4F2; */\n  border-radius: 1.33333rem;\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}\n.highlightInner[data-v-7826a4e4] {\n  width: 0.16rem;\n  height: 0.16rem;\n  border-radius: 0.16rem;\n  /* background-color: #00a4f2; */\n}\n.highlight-point[data-v-7826a4e4] {\n  top: 0.05333rem;\n  left: 0.33333rem;\n  width: 0.37333rem;\n  height: 0.37333rem;\n  /* background-color: #ccedfd; */\n  /* border-style: solid; */\n  /* border-width: 6px; */\n  /* border-color: rgba(38, 122, 255, 0.3); */\n  /* border-color: #BED7FF; */\n}\n.text-title[data-v-7826a4e4] {\n  font-size: 0.37333rem;\n  color: #8e969b;\n}\n.left-text-date[data-v-7826a4e4] {\n  font-family: PingFangSC-Regular;\n  font-size: 0.32rem;\n  color: rgba(255, 255, 255, 0.4);\n}\n.text-highlight-title[data-v-7826a4e4] {\n  color: #00a4f2;\n}\n.text-desc[data-v-7826a4e4],\n.text-date[data-v-7826a4e4] {\n  font-size: 0.32rem;\n  color: #8e969b;\n}\n.text-desc[data-v-7826a4e4] {\n  margin-bottom: 0.16rem;\n  line-height: 0.42667rem;\n  lines: 3;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  -webkit-line-clamp: 3;\n}\n", "", {"version":3,"sources":["/Users/wuhm45/Documents/code/weex组件库/dolphin-weex-ui/packages/dof-simple-flow/index.vue?109af62a","/Users/wuhm45/Documents/code/weex组件库/dolphin-weex-ui/packages/dof-simple-flow/<no source>"],"names":[],"mappings":";AA8DA;EACA;uBACA;CACA;AACA;EACA,+BAAA;EAAA,8BAAA;EAAA,4BAAA;UAAA,oBAAA;CACA;AACA;EACA,+BAAA;EAAA,8BAAA;EAAA,4BAAA;UAAA,oBAAA;CACA;AAEA;EACA,oBAAA;EAAA,gBAAA;UAAA,QAAA;CACA;AAEA;EACA,wBAAA;EACA,wBAAA;EACA,8BAAA;CACA;AAEA;EACA,qBAAA;EACA,wBAAA;CACA;AAEA;EACA,kBAAA;CACA;AAEA;;EAEA,yBAAA;EACA,0BAAA;CACA;AAEA;EACA,mBAAA;EACA,OAAA;EACA,UAAA;EACA,iBAAA;EACA,kBAAA;EACA,0BAAA;CACA;AAEA;EACA,gBAAA;CACA;AAEA;EACA,mBAAA;CACA;AAEA;EACA,SAAA;CACA;AAEA;EACA,mBAAA;EACA,aAAA;EACA,cAAA;EACA,eAAA;EACA,gBAAA;EACA,0BAAA;EACA;;6BAEA;EACA,0BAAA;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;CACA;AACA;EACA,eAAA;EACA,gBAAA;EACA,uBAAA;EACA,gCAAA;CACA;AAEA;EACA,gBAAA;EACA,iBAAA;EACA,kBAAA;EACA,mBAAA;EACA,gCAAA;EACA,0BAAA;EACA,wBAAA;EACA,4CAAA;EACA,4BAAA;CACA;AAEA;EACA,sBAAA;EACA,eAAA;CACA;AACA;EACA,gCAAA;EACA,mBAAA;EACA,gCAAA;CACA;AAEA;EACA,eAAA;CACA;AAEA;;EAEA,mBAAA;EACA,eAAA;CACA;AAEA;EACA,uBAAA;EACA,wBAAA;EACA,SAAA;EACA,wBAAA;EACA,iBAAA;ECnLA,iBAAA;EAAA,wBAAA;EAAA,sBAAA;CDoLA","file":"index.vue","sourcesContent":["<template>\n  <div class=\"root\">\n    <div\n      v-for=\"(item, index) in cItems\"\n      class=\"simple-flow-item-wrapper\"\n      :key=\"index\"\n      :accessible=\"true\"\n      :aria-label=\"\n        `${item.title},${item.desc ? item.desc : ''},${item.date ? item.date : ''},${\n          item.highlight ? '已完成' : '等待完成'\n        }`\n      \"\n      style=\"width: 750px;\"\n    >\n      <div v-if=\"leftContent\" class=\"left-content-wrap\" :style=\"leftContentStyle\">\n        <slot name=\"leftContent\" :item=\"item\"\n          ><text\n            v-if=\"item.leftContentDate\"\n            class=\"left-text-date\"\n            :class=\"item.__titleTextClass__\"\n            :style=\"item.__titleStyle__\"\n            >{{ item.leftContentDate }}</text\n          >\n        </slot>\n      </div>\n      <div ref=\"rightContent\" style=\"flex: 1;\">\n        <div class=\"title flex-row\">\n          <div class=\"line\" :class=\"item.__titleLineClass__\" :style=\"item.__lineStyle__\"></div>\n          <div class=\"point\" :class=\"item.__pointClass__\" :style=\"item.__pointStyle__\">\n            <div\n              class=\"highlightInner\"\n              v-if=\"item.highlight && !_isColmo\"\n              :style=\"{\n                backgroundColor: item.__pointStyle__.innerBackgroundColor\n                  ? item.__pointStyle__.innerBackgroundColor\n                  : (_isDiablo ? '#0490D3' : '#00a4f2')\n              }\"\n            ></div>\n          </div>\n          <text class=\"text-title full-rest\" :class=\"item.__titleTextClass__\" :style=\"item.__titleStyle__\">{{\n            item.title\n          }}</text>\n        </div>\n        <div class=\"content flex-row\" :class=\"item.__contentClass__\">\n          <div class=\"line\" :class=\"item.__contentLineClass__\" :style=\"item.__lineStyle__\"></div>\n          <div class=\"full-rest\">\n            <text\n              v-if=\"item.desc\"\n              class=\"text-desc\"\n              :style=\"{ width: rightContentWidth ? rightContentWidth + 'px' : 'auto' }\"\n              >{{ item.desc }}</text\n            >\n            <text v-if=\"item.date\" class=\"text-date\">{{ item.date }}</text>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n<style src=\"./colmo.css\" scoped></style>\n<style src=\"./diablo.css\" scoped></style>\n<style scoped>\n.left-content-wrap {\n  /* flex-direction: column;\n  flex-wrap: nowrap; */\n}\n.simple-flow-item-wrapper {\n  flex-direction: row;\n}\n.flex-row {\n  flex-direction: row;\n}\n\n.full-rest {\n  flex: 1;\n}\n\n.root {\n  padding-top: 28px;\n  padding-bottom: 24px;\n  background-color: transparent;\n}\n\n.content {\n  padding-top: 9px;\n  padding-bottom: 42px;\n}\n\n.last-one-content {\n  padding-bottom: 0;\n}\n\n.title,\n.content {\n  padding-left: 70px;\n  padding-right: 70px;\n}\n\n.line {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 38px;\n  width: 2px;\n  background-color: #dddddd;\n}\n\n.first-one-title-line {\n  top: 20px;\n}\n\n.last-one-title-line {\n  bottom: 20px;\n}\n\n.last-one-content-line {\n  width: 0;\n}\n\n.point {\n  position: absolute;\n  top: 6px;\n  left: 33px;\n  width: 12px;\n  height: 12px;\n  background-color: #dddddd;\n  /* border-style: solid;\n    border-width: 2px;\n    border-color: #00A4F2; */\n  border-radius: 100px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n}\n.highlightInner {\n  width: 12px;\n  height: 12px;\n  border-radius: 12px;\n  /* background-color: #00a4f2; */\n}\n\n.highlight-point {\n  top: 4px;\n  left: 25px;\n  width: 28px;\n  height: 28px;\n  /* background-color: #ccedfd; */\n  /* border-style: solid; */\n  /* border-width: 6px; */\n  /* border-color: rgba(38, 122, 255, 0.3); */\n  /* border-color: #BED7FF; */\n}\n\n.text-title {\n  font-size: 28px;\n  color: #8e969b;\n}\n.left-text-date {\n  font-family: PingFangSC-Regular;\n  font-size: 24px;\n  color: rgba(255, 255, 255, 0.4);\n}\n\n.text-highlight-title {\n  color: #00a4f2;\n}\n\n.text-desc,\n.text-date {\n  font-size: 24px;\n  color: #8e969b;\n}\n\n.text-desc {\n  margin-bottom: 12px;\n  line-height: 32px;\n  lines: 3;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n</style>\n\n<script>\nconst dom = weex.requireModule('dom')\nconst modal = weex.requireModule('modal')\nimport ColmoMixin from '../../mixins/colmo'\nimport DiabloMixin from '../../mixins/diablo'\n\nexport default {\n  mixins: [ColmoMixin, DiabloMixin],\n  props: {\n    list: {\n      type: Array,\n      required: true\n    },\n    flowConfig: {\n      type: Object,\n      default: () => ({})\n    },\n    leftContent: {\n      type: Boolean,\n      default: false\n    },\n    leftContentStyle: {\n      type: Object,\n      default: () => ({})\n    }\n  },\n  computed: {\n    cItems() {\n      return this.adapter(this.list)\n    }\n  },\n  data() {\n    return {\n      rightContentWidth: null\n    }\n  },\n  methods: {\n    adapter(items) {\n      const {\n        lineColor, // 时间轴线条颜色\n        pointInnerColor, // 时间节点圈点Point颜色\n        // pointBorderColor,\n        highlightTitleColor, // 高亮标题 title颜色\n        highlightPointInnerColor, // 高亮节点的 圈点颜色\n        // highlightPointBorderColor,\n        titleSize, // 标题字体大小\n        highlightPointOuterColor // 高亮节点的 圈点外框颜色\n      } = this.flowConfig\n      const len = items.length\n      const pre = Date.now()\n\n      return items.map((item, index) => {\n        item.key = `${pre}_${index}`\n        item.__titleLineClass__ = []\n        item.__contentClass__ = []\n        item.__contentLineClass__ = []\n        item.__pointClass__ = []\n        item.__titleTextClass__ = []\n        item.__pointStyle__ = {}\n        item.__lineStyle__ = {}\n        item.__titleStyle__ = {}\n\n        if (lineColor) item.__lineStyle__.backgroundColor = lineColor\n        if (pointInnerColor) item.__pointStyle__.backgroundColor = pointInnerColor\n        if (titleSize) item.__titleStyle__.fontSize = titleSize //add by lau 新增设置标题字体大小\n        if (this.rightContentWidth) {\n          item.__titleStyle__.width = this.rightContentWidth + 'px'\n        }\n        // if (pointBorderColor) item.__pointStyle__.borderColor = pointBorderColor;\n\n        if (index === 0) {\n          item.__titleLineClass__.push('first-one-title-line')\n        }\n\n        if (index === len - 1) {\n          item.__titleLineClass__.push('last-one-title-line')\n          item.__contentClass__.push('last-one-content')\n          item.__contentLineClass__.push('last-one-content-line')\n        }\n\n        if (item.highlight) {\n          item.__pointClass__.push('highlight-point')\n          item.__titleTextClass__.push('text-highlight-title')\n          if (highlightTitleColor) item.__titleStyle__.color = highlightTitleColor\n          if (highlightPointOuterColor) {\n            item.__pointStyle__.backgroundColor = highlightPointOuterColor\n          } else if (!highlightPointOuterColor && highlightPointInnerColor) {\n            item.__pointStyle__.backgroundColor = highlightPointInnerColor\n          } else if (!this._isColmo) {\n            item.__pointStyle__.backgroundColor = this._isDiablo ? '#0e2c3b' : 'rgba(2,162,242,0.2)'\n          }\n          if (highlightPointInnerColor) item.__pointStyle__.innerBackgroundColor = highlightPointInnerColor\n\n          // if (highlightPointBorderColor) item.__pointStyle__.borderColor = highlightPointBorderColor;\n        }\n        return item\n      })\n    },\n\n    // add by lau\n    colorToRGBA(color) {\n      var color1, color2, color3\n      color = '' + color\n      if (typeof color !== 'string') return\n      if (color.charAt(0) == '#') {\n        color = color.substring(1)\n      }\n      if (color.length == 3) {\n        color = color[0] + color[0] + color[1] + color[1] + color[2] + color[2]\n      }\n      if (/^[0-9a-fA-F]{6}$/.test(color)) {\n        color1 = parseInt(color.substr(0, 2), 16)\n        color2 = parseInt(color.substr(2, 2), 16)\n        color3 = parseInt(color.substr(4, 2), 16)\n        let rgbaColor = 'rgba(' + color1 + ',' + color2 + ',' + color3 + ',' + 0.1 + ')'\n        console.log('rgbaColor edn', rgbaColor)\n        return rgbaColor\n      }\n    }\n  },\n  mounted() {\n    setTimeout(() => {\n      dom.getComponentRect(this.$refs.rightContent[0], rect => {\n        if (rect && rect.size) {\n          this.rightContentWidth = rect.size.width - 140\n        }\n      })\n    }, 20)\n  }\n}\n</script>\n",null],"sourceRoot":""}]);
+exports.push([module.i, "\n.left-content-wrap[data-v-7826a4e4] {\n  /* flex-direction: column;\n  flex-wrap: nowrap; */\n}\n.simple-flow-item-wrapper[data-v-7826a4e4] {\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: row;\n          flex-direction: row;\n}\n.flex-row[data-v-7826a4e4] {\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: row;\n          flex-direction: row;\n}\n.full-rest[data-v-7826a4e4] {\n  -webkit-box-flex: 1;\n  -webkit-flex: 1;\n          flex: 1;\n}\n.root[data-v-7826a4e4] {\n  padding-top: 0.37333rem;\n  padding-bottom: 0.32rem;\n  background-color: transparent;\n}\n.content[data-v-7826a4e4] {\n  padding-top: 0.12rem;\n  padding-bottom: 0.56rem;\n}\n.last-one-content[data-v-7826a4e4] {\n  padding-bottom: 0;\n}\n.title[data-v-7826a4e4],\n.content[data-v-7826a4e4] {\n  padding-left: 0.93333rem;\n  padding-right: 0.93333rem;\n}\n.line[data-v-7826a4e4] {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0.50667rem;\n  width: 0.02667rem;\n  background-color: #dddddd;\n}\n.first-one-title-line[data-v-7826a4e4] {\n  top: 0.26667rem;\n}\n.last-one-title-line[data-v-7826a4e4] {\n  bottom: 0.26667rem;\n}\n.last-one-content-line[data-v-7826a4e4] {\n  width: 0;\n}\n.point[data-v-7826a4e4] {\n  position: absolute;\n  top: 0.08rem;\n  left: 0.44rem;\n  width: 0.16rem;\n  height: 0.16rem;\n  background-color: #dddddd;\n  /* border-style: solid;\n    border-width: 2px;\n    border-color: #00A4F2; */\n  border-radius: 1.33333rem;\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}\n.highlightInner[data-v-7826a4e4] {\n  width: 0.16rem;\n  height: 0.16rem;\n  border-radius: 0.16rem;\n  /* background-color: #00a4f2; */\n}\n.highlight-point[data-v-7826a4e4] {\n  top: 0.05333rem;\n  left: 0.33333rem;\n  width: 0.37333rem;\n  height: 0.37333rem;\n  /* background-color: #ccedfd; */\n  /* border-style: solid; */\n  /* border-width: 6px; */\n  /* border-color: rgba(38, 122, 255, 0.3); */\n  /* border-color: #BED7FF; */\n}\n.text-title[data-v-7826a4e4] {\n  font-size: 0.37333rem;\n  color: #8e969b;\n}\n.left-text-date[data-v-7826a4e4] {\n  font-family: PingFangSC-Regular;\n  font-size: 0.32rem;\n  color: rgba(255, 255, 255, 0.4);\n}\n.text-highlight-title[data-v-7826a4e4] {\n  color: #00a4f2;\n}\n.text-desc[data-v-7826a4e4],\n.text-date[data-v-7826a4e4] {\n  font-size: 0.32rem;\n  color: #8e969b;\n}\n.text-desc[data-v-7826a4e4] {\n  margin-bottom: 0.16rem;\n  line-height: 0.42667rem;\n  lines: 3;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  -webkit-line-clamp: 3;\n}\n", "", {"version":3,"sources":["/Users/wuhm45/Documents/code/weex组件库/dolphin-weex-ui/packages/dof-simple-flow/index.vue?11305834","/Users/wuhm45/Documents/code/weex组件库/dolphin-weex-ui/packages/dof-simple-flow/<no source>"],"names":[],"mappings":";AA8DA;EACA;uBACA;CACA;AACA;EACA,+BAAA;EAAA,8BAAA;EAAA,4BAAA;UAAA,oBAAA;CACA;AACA;EACA,+BAAA;EAAA,8BAAA;EAAA,4BAAA;UAAA,oBAAA;CACA;AAEA;EACA,oBAAA;EAAA,gBAAA;UAAA,QAAA;CACA;AAEA;EACA,wBAAA;EACA,wBAAA;EACA,8BAAA;CACA;AAEA;EACA,qBAAA;EACA,wBAAA;CACA;AAEA;EACA,kBAAA;CACA;AAEA;;EAEA,yBAAA;EACA,0BAAA;CACA;AAEA;EACA,mBAAA;EACA,OAAA;EACA,UAAA;EACA,iBAAA;EACA,kBAAA;EACA,0BAAA;CACA;AAEA;EACA,gBAAA;CACA;AAEA;EACA,mBAAA;CACA;AAEA;EACA,SAAA;CACA;AAEA;EACA,mBAAA;EACA,aAAA;EACA,cAAA;EACA,eAAA;EACA,gBAAA;EACA,0BAAA;EACA;;6BAEA;EACA,0BAAA;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;CACA;AACA;EACA,eAAA;EACA,gBAAA;EACA,uBAAA;EACA,gCAAA;CACA;AAEA;EACA,gBAAA;EACA,iBAAA;EACA,kBAAA;EACA,mBAAA;EACA,gCAAA;EACA,0BAAA;EACA,wBAAA;EACA,4CAAA;EACA,4BAAA;CACA;AAEA;EACA,sBAAA;EACA,eAAA;CACA;AACA;EACA,gCAAA;EACA,mBAAA;EACA,gCAAA;CACA;AAEA;EACA,eAAA;CACA;AAEA;;EAEA,mBAAA;EACA,eAAA;CACA;AAEA;EACA,uBAAA;EACA,wBAAA;EACA,SAAA;EACA,wBAAA;EACA,iBAAA;ECnLA,iBAAA;EAAA,wBAAA;EAAA,sBAAA;CDoLA","file":"index.vue","sourcesContent":["<template>\n  <div class=\"root\">\n    <div\n      v-for=\"(item, index) in cItems\"\n      class=\"simple-flow-item-wrapper\"\n      :key=\"index\"\n      :accessible=\"true\"\n      :aria-label=\"\n        `${item.title},${item.desc ? item.desc : ''},${item.date ? item.date : ''},${\n          item.highlight ? '已完成' : '等待完成'\n        }`\n      \"\n      style=\"width: 750px;\"\n    >\n      <div v-if=\"leftContent\" class=\"left-content-wrap\" :style=\"leftContentStyle\">\n        <slot name=\"leftContent\" :item=\"item\"\n          ><text\n            v-if=\"item.leftContentDate\"\n            class=\"left-text-date\"\n            :class=\"item.__titleTextClass__\"\n            :style=\"item.__titleStyle__\"\n            >{{ item.leftContentDate }}</text\n          >\n        </slot>\n      </div>\n      <div ref=\"rightContent\" style=\"flex: 1;\">\n        <div class=\"title flex-row\">\n          <div class=\"line\" :class=\"item.__titleLineClass__\" :style=\"item.__lineStyle__\"></div>\n          <div class=\"point\" :class=\"item.__pointClass__\" :style=\"item.__pointStyle__\">\n            <div\n              class=\"highlightInner\"\n              v-if=\"item.highlight && !_isColmo\"\n              :style=\"{\n                backgroundColor: item.__pointStyle__.innerBackgroundColor\n                  ? item.__pointStyle__.innerBackgroundColor\n                  : (_isDiablo ? '#0490D3' : '#00a4f2')\n              }\"\n            ></div>\n          </div>\n          <text class=\"text-title full-rest\" :class=\"item.__titleTextClass__\" :style=\"item.__titleStyle__\">{{\n            item.title\n          }}</text>\n        </div>\n        <div class=\"content flex-row\" :class=\"item.__contentClass__\">\n          <div class=\"line\" :class=\"item.__contentLineClass__\" :style=\"item.__lineStyle__\"></div>\n          <div class=\"full-rest\">\n            <text\n              v-if=\"item.desc\"\n              class=\"text-desc\"\n              :style=\"{ width: rightContentWidth ? rightContentWidth + 'px' : 'auto' }\"\n              >{{ item.desc }}</text\n            >\n            <text v-if=\"item.date\" class=\"text-date\">{{ item.date }}</text>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n<style src=\"./colmo.css\" scoped></style>\n<style src=\"./diablo.css\" scoped></style>\n<style scoped>\n.left-content-wrap {\n  /* flex-direction: column;\n  flex-wrap: nowrap; */\n}\n.simple-flow-item-wrapper {\n  flex-direction: row;\n}\n.flex-row {\n  flex-direction: row;\n}\n\n.full-rest {\n  flex: 1;\n}\n\n.root {\n  padding-top: 28px;\n  padding-bottom: 24px;\n  background-color: transparent;\n}\n\n.content {\n  padding-top: 9px;\n  padding-bottom: 42px;\n}\n\n.last-one-content {\n  padding-bottom: 0;\n}\n\n.title,\n.content {\n  padding-left: 70px;\n  padding-right: 70px;\n}\n\n.line {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 38px;\n  width: 2px;\n  background-color: #dddddd;\n}\n\n.first-one-title-line {\n  top: 20px;\n}\n\n.last-one-title-line {\n  bottom: 20px;\n}\n\n.last-one-content-line {\n  width: 0;\n}\n\n.point {\n  position: absolute;\n  top: 6px;\n  left: 33px;\n  width: 12px;\n  height: 12px;\n  background-color: #dddddd;\n  /* border-style: solid;\n    border-width: 2px;\n    border-color: #00A4F2; */\n  border-radius: 100px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n}\n.highlightInner {\n  width: 12px;\n  height: 12px;\n  border-radius: 12px;\n  /* background-color: #00a4f2; */\n}\n\n.highlight-point {\n  top: 4px;\n  left: 25px;\n  width: 28px;\n  height: 28px;\n  /* background-color: #ccedfd; */\n  /* border-style: solid; */\n  /* border-width: 6px; */\n  /* border-color: rgba(38, 122, 255, 0.3); */\n  /* border-color: #BED7FF; */\n}\n\n.text-title {\n  font-size: 28px;\n  color: #8e969b;\n}\n.left-text-date {\n  font-family: PingFangSC-Regular;\n  font-size: 24px;\n  color: rgba(255, 255, 255, 0.4);\n}\n\n.text-highlight-title {\n  color: #00a4f2;\n}\n\n.text-desc,\n.text-date {\n  font-size: 24px;\n  color: #8e969b;\n}\n\n.text-desc {\n  margin-bottom: 12px;\n  line-height: 32px;\n  lines: 3;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n</style>\n\n<script>\nconst dom = weex.requireModule('dom')\nconst modal = weex.requireModule('modal')\nimport ColmoMixin from '../../mixins/colmo'\nimport DiabloMixin from '../../mixins/diablo'\n\nexport default {\n  mixins: [ColmoMixin, DiabloMixin],\n  props: {\n    list: {\n      type: Array,\n      required: true\n    },\n    flowConfig: {\n      type: Object,\n      default: () => ({})\n    },\n    leftContent: {\n      type: Boolean,\n      default: false\n    },\n    leftContentStyle: {\n      type: Object,\n      default: () => ({})\n    }\n  },\n  computed: {\n    cItems() {\n      return this.adapter(this.list)\n    }\n  },\n  data() {\n    return {\n      rightContentWidth: null,\n      getRightContentWidthTimer: null\n    }\n  },\n  methods: {\n    adapter(items) {\n      const {\n        lineColor, // 时间轴线条颜色\n        pointInnerColor, // 时间节点圈点Point颜色\n        // pointBorderColor,\n        highlightTitleColor, // 高亮标题 title颜色\n        highlightPointInnerColor, // 高亮节点的 圈点颜色\n        // highlightPointBorderColor,\n        titleSize, // 标题字体大小\n        highlightPointOuterColor // 高亮节点的 圈点外框颜色\n      } = this.flowConfig\n      const len = items.length\n      const pre = Date.now()\n\n      return items.map((item, index) => {\n        item.key = `${pre}_${index}`\n        item.__titleLineClass__ = []\n        item.__contentClass__ = []\n        item.__contentLineClass__ = []\n        item.__pointClass__ = []\n        item.__titleTextClass__ = []\n        item.__pointStyle__ = {}\n        item.__lineStyle__ = {}\n        item.__titleStyle__ = {}\n\n        if (lineColor) item.__lineStyle__.backgroundColor = lineColor\n        if (pointInnerColor) item.__pointStyle__.backgroundColor = pointInnerColor\n        if (titleSize) item.__titleStyle__.fontSize = titleSize //add by lau 新增设置标题字体大小\n        if (this.rightContentWidth) {\n          item.__titleStyle__.width = this.rightContentWidth + 'px'\n        }\n        // if (pointBorderColor) item.__pointStyle__.borderColor = pointBorderColor;\n\n        if (index === 0) {\n          item.__titleLineClass__.push('first-one-title-line')\n        }\n\n        if (index === len - 1) {\n          item.__titleLineClass__.push('last-one-title-line')\n          item.__contentClass__.push('last-one-content')\n          item.__contentLineClass__.push('last-one-content-line')\n        }\n\n        if (item.highlight) {\n          item.__pointClass__.push('highlight-point')\n          item.__titleTextClass__.push('text-highlight-title')\n          if (highlightTitleColor) item.__titleStyle__.color = highlightTitleColor\n          if (highlightPointOuterColor) {\n            item.__pointStyle__.backgroundColor = highlightPointOuterColor\n          } else if (!highlightPointOuterColor && highlightPointInnerColor) {\n            item.__pointStyle__.backgroundColor = highlightPointInnerColor\n          } else if (!this._isColmo) {\n            item.__pointStyle__.backgroundColor = this._isDiablo ? '#0e2c3b' : 'rgba(2,162,242,0.2)'\n          }\n          if (highlightPointInnerColor) item.__pointStyle__.innerBackgroundColor = highlightPointInnerColor\n\n          // if (highlightPointBorderColor) item.__pointStyle__.borderColor = highlightPointBorderColor;\n        }\n        return item\n      })\n    },\n\n    // add by lau\n    colorToRGBA(color) {\n      var color1, color2, color3\n      color = '' + color\n      if (typeof color !== 'string') return\n      if (color.charAt(0) == '#') {\n        color = color.substring(1)\n      }\n      if (color.length == 3) {\n        color = color[0] + color[0] + color[1] + color[1] + color[2] + color[2]\n      }\n      if (/^[0-9a-fA-F]{6}$/.test(color)) {\n        color1 = parseInt(color.substr(0, 2), 16)\n        color2 = parseInt(color.substr(2, 2), 16)\n        color3 = parseInt(color.substr(4, 2), 16)\n        let rgbaColor = 'rgba(' + color1 + ',' + color2 + ',' + color3 + ',' + 0.1 + ')'\n        console.log('rgbaColor edn', rgbaColor)\n        return rgbaColor\n      }\n    }\n  },\n  mounted() {\n    this.getRightContentWidthTimer = setInterval(() => {\n      if (this.$refs.rightContent && this.$refs.rightContent[0]) {\n        dom.getComponentRect(this.$refs.rightContent[0], rect => {\n          if (rect && rect.size) {\n            this.rightContentWidth = rect.size.width - 140\n          }\n        })\n        clearInterval(this.getRightContentWidthTimer)\n        this.getRightContentWidthTimer = null\n      }\n    }, 20)\n    setTimeout(() => {\n      if (this.getRightContentWidthTimer) {\n        clearInterval(this.getRightContentWidthTimer)\n        this.getRightContentWidthTimer = null\n      }\n    }, 1000)\n  }\n}\n</script>\n",null],"sourceRoot":""}]);
 
 // exports
 
@@ -9932,7 +9932,7 @@ exports = module.exports = __webpack_require__(0)(true);
 
 
 // module
-exports.push([module.i, "\n@media screen and (weex-theme: diablo) {\n.btnGap[data-v-fa0ab532] {\n    background-color: #101315;\n}\n.midea-actionsheet-btn[data-v-fa0ab532] {\n    background-color: transparent;\n}\n}", "", {"version":3,"sources":["/Users/wuhm45/Documents/code/weex组件库/dolphin-weex-ui/packages/dof-popup/diablo.css"],"names":[],"mappings":";AAAA;AACE;IACE,0BAA0B;CAC3B;AACD;IACE,8BAA8B;CAC/B;CAEF","file":"diablo.css","sourcesContent":["@media screen and (weex-theme: diablo) {\n  .btnGap {\n    background-color: #101315;\n  }\n  .midea-actionsheet-btn {\n    background-color: transparent;\n  }\n  \n}"],"sourceRoot":""}]);
+exports.push([module.i, "\n@media screen and (weex-theme: diablo) {\n.btnGap[data-v-fa0ab532] {\n    background-color: #101315;\n}\n.midea-actionsheet-btn[data-v-fa0ab532] {\n    background-color: transparent;\n}\n.midea-actionsheet-btn[data-v-fa0ab532]:active {\n    background-color: transparent;\n}\n}", "", {"version":3,"sources":["/Users/wuhm45/Documents/code/weex组件库/dolphin-weex-ui/packages/dof-popup/diablo.css"],"names":[],"mappings":";AAAA;AACE;IACE,0BAA0B;CAC3B;AACD;IACE,8BAA8B;CAC/B;AACD;IACE,8BAA8B;CAC/B;CACF","file":"diablo.css","sourcesContent":["@media screen and (weex-theme: diablo) {\n  .btnGap {\n    background-color: #101315;\n  }\n  .midea-actionsheet-btn {\n    background-color: transparent;\n  }\n  .midea-actionsheet-btn:active {\n    background-color: transparent;\n  }\n}"],"sourceRoot":""}]);
 
 // exports
 
@@ -28357,7 +28357,8 @@ exports.default = {
   },
   data: function data() {
     return {
-      rightContentWidth: null
+      rightContentWidth: null,
+      getRightContentWidthTimer: null
     };
   },
 
@@ -28449,13 +28450,23 @@ exports.default = {
   mounted: function mounted() {
     var _this2 = this;
 
-    setTimeout(function () {
-      dom.getComponentRect(_this2.$refs.rightContent[0], function (rect) {
-        if (rect && rect.size) {
-          _this2.rightContentWidth = rect.size.width - 140;
-        }
-      });
+    this.getRightContentWidthTimer = setInterval(function () {
+      if (_this2.$refs.rightContent && _this2.$refs.rightContent[0]) {
+        dom.getComponentRect(_this2.$refs.rightContent[0], function (rect) {
+          if (rect && rect.size) {
+            _this2.rightContentWidth = rect.size.width - 140;
+          }
+        });
+        clearInterval(_this2.getRightContentWidthTimer);
+        _this2.getRightContentWidthTimer = null;
+      }
     }, 20);
+    setTimeout(function () {
+      if (_this2.getRightContentWidthTimer) {
+        clearInterval(_this2.getRightContentWidthTimer);
+        _this2.getRightContentWidthTimer = null;
+      }
+    }, 1000);
   }
 };