mcrm-mobile 1.2.1 → 1.2.2-beta.1

package/es/index.css

@@ -4026,6 +4026,120 @@ textarea {
   -ms-flex-wrap: wrap;
       flex-wrap: wrap;
 }
+.mm-rank-personal {
+  position: relative;
+  margin-bottom: 20px;
+}
+.mm-rank-personal-content {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  background-color: #e5f1ff;
+  border-radius: 4px;
+}
+.mm-rank-personal-content-title {
+  padding: 0 7px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  width: 30px;
+  background-color: #7ab9ff;
+  border-radius: 4px;
+  font-size: 12px;
+  color: #fff;
+  line-height: 16px;
+}
+.mm-rank-personal-content-biz {
+  min-height: 16px;
+  padding: 16px 0;
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  margin-right: 16px;
+}
+.mm-rank-personal-content-biz div {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  margin-left: 16px;
+}
+.mm-rank-personal-content-biz div + div {
+  margin-top: 4px;
+}
+.mm-rank-personal-content-name {
+  font-size: 12px;
+  color: #666666;
+  line-height: 16px;
+}
+.mm-rank-personal-content-value {
+  font-size: 18px;
+  font-weight: bold;
+  color: #0095fd;
+  margin-left: 8px;
+}
+.mm-rank-personal-icon {
+  position: absolute;
+  bottom: -20px;
+}
+.mm-rank-track {
+  position: relative;
+  height: 4px;
+  background-color: #eeeeee;
+  border-radius: 4px;
+}
+.mm-rank-kpi {
+  position: absolute;
+  width: 1px;
+  height: 6px;
+  top: -1px;
+}
+.mm-rank-property {
+  margin-top: 12px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  text-align: center;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+}
+.mm-rank-property div {
+  margin-top: 8px;
+}
+.mm-rank-property-max::after {
+  content: "";
+  -webkit-box-flex: 1;
+      -ms-flex: auto;
+          flex: auto;
+}
+.mm-rank-property-name {
+  font-size: 12px;
+  color: #666666;
+  margin-top: 8px;
+}
+.mm-rank-property-value {
+  font-size: 22px;
+  font-weight: 500;
+}
 .mm-rate {
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;

package/es/index.js

@@ -62,6 +62,7 @@ import Progress from './progress';
 import PullRefresh from './pull-refresh';
 import Radio from './radio';
 import RadioGroup from './radio-group';
+import Rank from './rank';
 import Rate from './rate';
 import Row from './row';
 import SafeKeyboard from './safe-keyboard';
@@ -90,8 +91,8 @@ import Tag from './tag';
 import Toast from './toast';
 import TreeSelect from './tree-select';
 import Uploader from './uploader';
-var version = '1.2.1';
-var components = [ActionSheet, AddressPicker, Api, Badge, Biz, Button, Calendar, Card, Cell, CellGroup, Checkbox, CheckboxGroup, Circle, Col, Collapse, CollapseItem, CommonUtils, CountDown, DataProcess, DatePicker, DatetimePicker, Dialog, Directive, Divider, Drag, DropdownItem, DropdownMenu, Empty, Field, GoodsAction, GoodsActionButton, GoodsActionIcon, Grid, GridItem, Http, Icon, Image, ImagePreview, IndexAnchor, IndexBar, Info, List, Loading, Local, Menu, MenuIcon, MenuJump, Menus, NavBar, NoticeBar, Notify, Overlay, Pagination, Panel, PasswordInput, Picker, Popover, Popup, Progress, PullRefresh, Radio, RadioGroup, Rate, Row, SafeKeyboard, Search, Session, ShareSheet, Sidebar, SidebarItem, Slider, Step, Stepper, Steps, Sticky, Swipe, SwipeCell, SwipeItem, Switch, SwitchCell, Tab, Tabbar, TabbarItem, Table, TableColumn, Tabs, Tag, Toast, TreeSelect, Uploader];
+var version = '1.2.2-beta.1';
+var components = [ActionSheet, AddressPicker, Api, Badge, Biz, Button, Calendar, Card, Cell, CellGroup, Checkbox, CheckboxGroup, Circle, Col, Collapse, CollapseItem, CommonUtils, CountDown, DataProcess, DatePicker, DatetimePicker, Dialog, Directive, Divider, Drag, DropdownItem, DropdownMenu, Empty, Field, GoodsAction, GoodsActionButton, GoodsActionIcon, Grid, GridItem, Http, Icon, Image, ImagePreview, IndexAnchor, IndexBar, Info, List, Loading, Local, Menu, MenuIcon, MenuJump, Menus, NavBar, NoticeBar, Notify, Overlay, Pagination, Panel, PasswordInput, Picker, Popover, Popup, Progress, PullRefresh, Radio, RadioGroup, Rank, Rate, Row, SafeKeyboard, Search, Session, ShareSheet, Sidebar, SidebarItem, Slider, Step, Stepper, Steps, Sticky, Swipe, SwipeCell, SwipeItem, Switch, SwitchCell, Tab, Tabbar, TabbarItem, Table, TableColumn, Tabs, Tag, Toast, TreeSelect, Uploader];
 
 var install = function install(Vue) {
   components.forEach(function (Component) {
@@ -105,7 +106,7 @@ if (typeof window !== 'undefined' && window.Vue) {
   install(window.Vue);
 }
 
-export { install, version, ActionSheet, AddressPicker, Api, Badge, Biz, Button, Calendar, Card, Cell, CellGroup, Checkbox, CheckboxGroup, Circle, Col, Collapse, CollapseItem, CommonUtils, CountDown, DataProcess, DatePicker, DatetimePicker, Dialog, Directive, Divider, Drag, DropdownItem, DropdownMenu, Empty, Field, GoodsAction, GoodsActionButton, GoodsActionIcon, Grid, GridItem, Http, Icon, Image, ImagePreview, IndexAnchor, IndexBar, Info, LazyLoad, List, Loading, Local, Menu, MenuIcon, MenuJump, Menus, NavBar, NoticeBar, Notify, Overlay, Pagination, Panel, PasswordInput, Picker, Popover, Popup, Progress, PullRefresh, Radio, RadioGroup, Rate, Row, SafeKeyboard, Search, Session, ShareSheet, Sidebar, SidebarItem, Slider, Step, Stepper, Steps, Sticky, Swipe, SwipeCell, SwipeItem, Switch, SwitchCell, Tab, Tabbar, TabbarItem, Table, TableColumn, Tabs, Tag, Toast, TreeSelect, Uploader };
+export { install, version, ActionSheet, AddressPicker, Api, Badge, Biz, Button, Calendar, Card, Cell, CellGroup, Checkbox, CheckboxGroup, Circle, Col, Collapse, CollapseItem, CommonUtils, CountDown, DataProcess, DatePicker, DatetimePicker, Dialog, Directive, Divider, Drag, DropdownItem, DropdownMenu, Empty, Field, GoodsAction, GoodsActionButton, GoodsActionIcon, Grid, GridItem, Http, Icon, Image, ImagePreview, IndexAnchor, IndexBar, Info, LazyLoad, List, Loading, Local, Menu, MenuIcon, MenuJump, Menus, NavBar, NoticeBar, Notify, Overlay, Pagination, Panel, PasswordInput, Picker, Popover, Popup, Progress, PullRefresh, Radio, RadioGroup, Rank, Rate, Row, SafeKeyboard, Search, Session, ShareSheet, Sidebar, SidebarItem, Slider, Step, Stepper, Steps, Sticky, Swipe, SwipeCell, SwipeItem, Switch, SwitchCell, Tab, Tabbar, TabbarItem, Table, TableColumn, Tabs, Tag, Toast, TreeSelect, Uploader };
 export default {
   install: install,
   version: version

package/es/index.less

@@ -53,6 +53,7 @@
 @import 'pull-refresh/index';
 @import 'radio/index';
 @import 'radio-group/index';
+@import 'rank/index';
 @import 'rate/index';
 @import 'row/index';
 @import 'safe-keyboard/index';

package/es/menu-jump/index.js

@@ -540,7 +540,12 @@ var spliceUrl = /*#__PURE__*/function () {
             return _context2.abrupt("break", 149);
 
           case 147:
-            console.error("Did not match " + value);
+            if (isDef(sybInfo[value])) {
+              paramsObj[value] = sybInfo[value];
+            } else {
+              console.error("Did not match " + value);
+            }
+
             return _context2.abrupt("break", 149);
 
           case 149:

package/es/rank/index.css

@@ -0,0 +1,374 @@
+/**
+颜色主题
+ */
+.bg-red {
+  background-color: #ff3b30;
+  color: #fff;
+}
+.bg-orange {
+  background-color: #ff9800;
+  color: #fff;
+}
+.bg-yellow {
+  background-color: #f7931e;
+  color: #333;
+}
+.bg-olive {
+  background-color: #4caf50;
+  color: #fff;
+}
+.bg-green {
+  background-color: #32b305;
+  color: #fff;
+}
+.bg-cyan {
+  background-color: #00bcd4;
+  color: #fff;
+}
+.bg-blue {
+  background-color: #0095fd;
+  color: #fff;
+}
+.bg-purple {
+  background-color: #6739b6;
+  color: #fff;
+}
+.bg-mauve {
+  background-color: #9c26b0;
+  color: #fff;
+}
+.bg-pink {
+  background-color: #e03997;
+  color: #fff;
+}
+.bg-brown {
+  background-color: #795548;
+  color: #fff;
+}
+.bg-grey {
+  background-color: #9e9e9e;
+  color: #fff;
+}
+.bg-gray {
+  background-color: #c8c9cc;
+  color: #666666;
+}
+.bg-black {
+  background-color: #333;
+  color: #fff;
+}
+.bg-white {
+  background-color: #fff;
+  color: #666666;
+}
+.bg-red.light {
+  background-color: #fadbd9;
+  color: #ff3b30;
+}
+.bg-orange.light {
+  background-color: #fffbe8;
+  color: #ff9800;
+}
+.bg-yellow.light {
+  background-color: #fef2ce;
+  color: #f7931e;
+}
+.bg-olive.light {
+  background-color: #e8f4d9;
+  color: #4caf50;
+}
+.bg-green.light {
+  background-color: #d7f0db;
+  color: #32b305;
+}
+.bg-cyan.light {
+  background-color: #d2f1f0;
+  color: #00bcd4;
+}
+.bg-blue.light {
+  background-color: #cce6ff;
+  color: #0095fd;
+}
+.bg-purple.light {
+  background-color: #e1d7f0;
+  color: #6739b6;
+}
+.bg-mauve.light {
+  background-color: #ebd4ef;
+  color: #9c26b0;
+}
+.bg-pink.light {
+  background-color: #f9d7ea;
+  color: #e03997;
+}
+.bg-brown.light {
+  background-color: #ede1d9;
+  color: #795548;
+}
+.bg-grey.light {
+  background-color: #f5f5f9;
+  color: #9e9e9e;
+}
+.bg-gray.light {
+  background-color: #f5f5f9;
+  color: #666666;
+}
+.bg-gradual-red {
+  background-image: linear-gradient(45deg, #ff3b30, #f7931e);
+  color: #fff;
+}
+.bg-gradual-orange {
+  background-image: linear-gradient(45deg, #ff9800, #ff3b30);
+  color: #fff;
+}
+.bg-gradual-green {
+  background-image: linear-gradient(45deg, #32b305, #4caf50);
+  color: #fff;
+}
+.bg-gradual-purple {
+  background-image: linear-gradient(45deg, #6739b6, #9c26b0);
+  color: #fff;
+}
+.bg-gradual-pink {
+  background-image: linear-gradient(45deg, #e03997, #6739b6);
+  color: #fff;
+}
+.bg-gradual-blue {
+  background-image: linear-gradient(45deg, #0095fd, #00bcd4);
+  color: #fff;
+}
+.bg-img {
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+.shadow[class*="-red"] {
+  -webkit-box-shadow: 6px 6px 8px rgba(204, 69, 59, 0.2);
+          box-shadow: 6px 6px 8px rgba(204, 69, 59, 0.2);
+}
+.shadow[class*="-orange"] {
+  -webkit-box-shadow: 6px 6px 8px rgba(217, 109, 26, 0.2);
+          box-shadow: 6px 6px 8px rgba(217, 109, 26, 0.2);
+}
+.shadow[class*="-yellow"] {
+  -webkit-box-shadow: 6px 6px 8px rgba(224, 170, 7, 0.2);
+          box-shadow: 6px 6px 8px rgba(224, 170, 7, 0.2);
+}
+.shadow[class*="-olive"] {
+  -webkit-box-shadow: 6px 6px 8px rgba(124, 173, 55, 0.2);
+          box-shadow: 6px 6px 8px rgba(124, 173, 55, 0.2);
+}
+.shadow[class*="-green"] {
+  -webkit-box-shadow: 6px 6px 8px rgba(48, 156, 63, 0.2);
+          box-shadow: 6px 6px 8px rgba(48, 156, 63, 0.2);
+}
+.shadow[class*="-cyan"] {
+  -webkit-box-shadow: 6px 6px 8px rgba(28, 187, 180, 0.2);
+          box-shadow: 6px 6px 8px rgba(28, 187, 180, 0.2);
+}
+.shadow[class*="-blue"] {
+  -webkit-box-shadow: 6px 6px 8px rgba(0, 102, 204, 0.2);
+          box-shadow: 6px 6px 8px rgba(0, 102, 204, 0.2);
+}
+.shadow[class*="-purple"] {
+  -webkit-box-shadow: 6px 6px 8px rgba(88, 48, 156, 0.2);
+          box-shadow: 6px 6px 8px rgba(88, 48, 156, 0.2);
+}
+.shadow[class*="-mauve"] {
+  -webkit-box-shadow: 6px 6px 8px rgba(133, 33, 150, 0.2);
+          box-shadow: 6px 6px 8px rgba(133, 33, 150, 0.2);
+}
+.shadow[class*="-pink"] {
+  -webkit-box-shadow: 6px 6px 8px rgba(199, 50, 134, 0.2);
+          box-shadow: 6px 6px 8px rgba(199, 50, 134, 0.2);
+}
+.shadow[class*="-brown"] {
+  -webkit-box-shadow: 6px 6px 8px rgba(140, 88, 53, 0.2);
+          box-shadow: 6px 6px 8px rgba(140, 88, 53, 0.2);
+}
+.shadow[class*="-grey"] {
+  -webkit-box-shadow: 6px 6px 8px rgba(114, 130, 138, 0.2);
+          box-shadow: 6px 6px 8px rgba(114, 130, 138, 0.2);
+}
+.shadow[class*="-gray"] {
+  -webkit-box-shadow: 6px 6px 8px rgba(114, 130, 138, 0.2);
+          box-shadow: 6px 6px 8px rgba(114, 130, 138, 0.2);
+}
+.shadow[class*="-black"] {
+  -webkit-box-shadow: 6px 6px 8px rgba(26, 26, 26, 0.2);
+          box-shadow: 6px 6px 8px rgba(26, 26, 26, 0.2);
+}
+.border-red {
+  color: #ff3b30;
+  border-color: #ff3b30;
+}
+.border-orange {
+  color: #ff9800;
+  border-color: #ff9800;
+}
+.border-yellow {
+  color: #f7931e;
+  border-color: #f7931e;
+}
+.border-olive {
+  color: #4caf50;
+  border-color: #4caf50;
+}
+.border-green {
+  color: #32b305;
+  border-color: #32b305;
+}
+.border-cyan {
+  color: #00bcd4;
+  border-color: #00bcd4;
+}
+.border-blue {
+  color: #0095fd;
+  border-color: #0095fd;
+}
+.border-purple {
+  color: #6739b6;
+  border-color: #6739b6;
+}
+.border-mauve {
+  color: #9c26b0;
+  border-color: #9c26b0;
+}
+.border-pink {
+  color: #e03997;
+  border-color: #e03997;
+}
+.border-brown {
+  color: #795548;
+  border-color: #795548;
+}
+.border-grey {
+  color: #9e9e9e;
+  border-color: #9e9e9e;
+}
+.border-gray {
+  color: #666666;
+  border-color: #666666;
+}
+.border-black {
+  color: #333;
+  border-color: #333;
+}
+.border-white {
+  color: #fff;
+  border-color: #fff;
+}
+.mm-rank-personal {
+  position: relative;
+  margin-bottom: 20px;
+}
+.mm-rank-personal-content {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  background-color: #e5f1ff;
+  border-radius: 4px;
+}
+.mm-rank-personal-content-title {
+  padding: 0 7px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  width: 30px;
+  background-color: #7ab9ff;
+  border-radius: 4px;
+  font-size: 12px;
+  color: #fff;
+  line-height: 16px;
+}
+.mm-rank-personal-content-biz {
+  min-height: 16px;
+  padding: 16px 0;
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  margin-right: 16px;
+}
+.mm-rank-personal-content-biz div {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  margin-left: 16px;
+}
+.mm-rank-personal-content-biz div + div {
+  margin-top: 4px;
+}
+.mm-rank-personal-content-name {
+  font-size: 12px;
+  color: #666666;
+  line-height: 16px;
+}
+.mm-rank-personal-content-value {
+  font-size: 18px;
+  font-weight: bold;
+  color: #0095fd;
+  margin-left: 8px;
+}
+.mm-rank-personal-icon {
+  position: absolute;
+  bottom: -20px;
+}
+.mm-rank-track {
+  position: relative;
+  height: 4px;
+  background-color: #eeeeee;
+  border-radius: 4px;
+}
+.mm-rank-kpi {
+  position: absolute;
+  width: 1px;
+  height: 6px;
+  top: -1px;
+}
+.mm-rank-property {
+  margin-top: 12px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  text-align: center;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+}
+.mm-rank-property div {
+  margin-top: 8px;
+}
+.mm-rank-property-max::after {
+  content: "";
+  -webkit-box-flex: 1;
+      -ms-flex: auto;
+          flex: auto;
+}
+.mm-rank-property-name {
+  font-size: 12px;
+  color: #666666;
+  margin-top: 8px;
+}
+.mm-rank-property-value {
+  font-size: 22px;
+  font-weight: 500;
+}

package/es/rank/index.js

@@ -0,0 +1,151 @@
+import create from "../utils/create";
+import { addUnit } from "../utils/format/unit";
+import mmIcon from "../icon";
+export default create({
+  render: function render() {
+    var _vm = this;
+
+    var _h = _vm.$createElement;
+
+    var _c = _vm._self._c || _h;
+
+    return _c('div', {
+      class: _vm.b()
+    }, [_c('div', {
+      class: _vm.b('personal')
+    }, [_vm._t("personal", function () {
+      return [_c('div', {
+        class: _vm.b('personal-content')
+      }, [_c('div', {
+        class: _vm.b('personal-content-title')
+      }, [_vm._v("\n          " + _vm._s(_vm.personalTitle || "我的情况") + "\n        ")]), _c('div', {
+        class: _vm.b('personal-content-biz')
+      }, _vm._l(_vm.personalList, function (personal, index) {
+        return _c('div', {
+          key: index
+        }, [_c('span', {
+          class: _vm.b('personal-content-name')
+        }, [_vm._v("\n              " + _vm._s(personal.name) + "\n            ")]), _c('span', {
+          class: _vm.b('personal-content-value')
+        }, [_vm._v("\n              " + _vm._s(personal.value) + "\n            ")])]);
+      }), 0)])];
+    }), _c('mm-icon', {
+      class: _vm.b('personal-icon'),
+      style: _vm.iconStyle,
+      attrs: {
+        "name": "long-arrow-dotted-down",
+        "size": "20",
+        "color": _vm.iconColor
+      }
+    })], 2), _c('div', {
+      ref: "track",
+      class: _vm.b('track'),
+      style: _vm.wrapperStyle
+    }, _vm._l(_vm.optionsStyle, function (optionStyle, index) {
+      return _c('span', {
+        key: index,
+        class: _vm.b('kpi'),
+        style: optionStyle
+      });
+    }), 0), _c('div', {
+      class: _vm.b('property', {
+        max: _vm.options.length > 4
+      })
+    }, _vm._l(_vm.options, function (option, index) {
+      return _c('div', {
+        key: index
+      }, [_c('p', {
+        class: _vm.b('property-value'),
+        style: {
+          color: option.color
+        }
+      }, [_vm._v("\n        " + _vm._s(option.value) + "\n      ")]), _c('p', {
+        class: _vm.b('property-name')
+      }, [_vm._v(_vm._s(option.name))])]);
+    }), 0)]);
+  },
+  name: "rank",
+  components: {
+    mmIcon: mmIcon
+  },
+  props: {
+    color: String,
+    iconColor: {
+      type: String,
+      default: "#0095FD"
+    },
+    trackWidth: [Number, String],
+    kpiWidth: [Number, String],
+    options: Array,
+    total: [Number, String],
+    rank: {
+      type: [Number, String],
+      default: 0
+    },
+    personalTitle: String,
+    personalList: Array
+  },
+  data: function data() {
+    return {
+      trackClientWidth: 0
+    };
+  },
+  mounted: function mounted() {
+    var _this = this;
+
+    this.$nextTick(function () {
+      _this.trackClientWidth = _this.$refs.track.clientWidth;
+    });
+  },
+  methods: {},
+  computed: {
+    wrapperStyle: function wrapperStyle() {
+      return {
+        background: this.color,
+        height: addUnit(this.trackWidth),
+        borderRadius: addUnit(this.trackWidth)
+      };
+    },
+    trackSize: function trackSize() {
+      var total = this.total,
+          _this$options = this.options,
+          options = _this$options === void 0 ? [] : _this$options;
+      var newOptions = JSON.parse(JSON.stringify(options));
+      newOptions.sort(function (a, b) {
+        return a.value - b.value;
+      });
+      var length = newOptions.length;
+
+      if (total || length === 0) {
+        return total;
+      } else {
+        return newOptions.pop().value;
+      }
+    },
+    optionsStyle: function optionsStyle() {
+      var optionsStyle = [];
+      var options = this.options,
+          trackClientWidth = this.trackClientWidth,
+          trackSize = this.trackSize,
+          trackWidth = this.trackWidth,
+          kpiWidth = this.kpiWidth;
+      options.forEach(function (option) {
+        optionsStyle.push({
+          background: option.color,
+          left: trackClientWidth * option.value / trackSize + "px",
+          width: addUnit(kpiWidth),
+          height: addUnit(parseInt(trackWidth) + 2)
+        });
+      });
+      return optionsStyle;
+    },
+    iconStyle: function iconStyle() {
+      var trackClientWidth = this.trackClientWidth,
+          trackSize = this.trackSize,
+          rank = this.rank;
+      return {
+        left: trackClientWidth * rank / trackSize - 10 + "px"
+      };
+    }
+  }
+});