@nutui/nutui-react 3.0.13 → 3.0.15

package/dist/cjs/packages/elevator/elevator.js

@@ -28,24 +28,29 @@ var _react1 = require("@use-gesture/react");
 var _web = require("@react-spring/web");
 var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
 var _typings = require("../../utils/typings");
+var _hooks = require("../../hooks");
 var elevatorContext = /*#__PURE__*/ (0, _react.createContext)({});
 var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
+    mode: 'horizontal',
     height: '200px',
     floorKey: 'title',
     list: [],
     sticky: false,
-    spaceHeight: 23,
-    titleHeight: 35,
-    showKeys: true
+    spaceHeight: 18,
+    showKeys: true,
+    defaultValue: undefined,
+    value: undefined
 });
 var Elevator = function Elevator(props) {
-    var _ref = (0, _object_spread._)({}, defaultProps, props), height = _ref.height, floorKey = _ref.floorKey, list = _ref.list, sticky = _ref.sticky, spaceHeight = _ref.spaceHeight, titleHeight = _ref.titleHeight, showKeys = _ref.showKeys, className = _ref.className, style = _ref.style, onItemClick = _ref.onItemClick, onIndexClick = _ref.onIndexClick, children = _ref.children, rest = (0, _object_without_properties._)(_ref, [
+    var _ref = (0, _object_spread._)({}, defaultProps, props), value = _ref.value, defaultValue = _ref.defaultValue, mode = _ref.mode, height = _ref.height, floorKey = _ref.floorKey, list = _ref.list, sticky = _ref.sticky, spaceHeight = _ref.spaceHeight, showKeys = _ref.showKeys, className = _ref.className, style = _ref.style, onItemClick = _ref.onItemClick, onIndexClick = _ref.onIndexClick, children = _ref.children, rest = (0, _object_without_properties._)(_ref, [
+        "value",
+        "defaultValue",
+        "mode",
         "height",
         "floorKey",
         "list",
         "sticky",
         "spaceHeight",
-        "titleHeight",
         "showKeys",
         "className",
         "style",
@@ -66,21 +71,24 @@ var Elevator = function Elevator(props) {
         y2: 0
     });
     var _useState = (0, _sliced_to_array._)((0, _react.useState)(0), 2), scrollY = _useState[0], setScrollY = _useState[1];
-    var _useState1 = (0, _sliced_to_array._)((0, _react.useState)({}), 2), currentData = _useState1[0], setCurrentData = _useState1[1];
-    var _useState2 = (0, _sliced_to_array._)((0, _react.useState)(''), 2), currentKey = _useState2[0], setCurrentKey = _useState2[1];
-    var _useState3 = (0, _sliced_to_array._)((0, _react.useState)(0), 2), currentIndex = _useState3[0], setCurrentIndex = _useState3[1];
-    var _useState4 = (0, _sliced_to_array._)((0, _react.useState)(0), 2), codeIndex = _useState4[0], setCodeIndex = _useState4[1];
-    var _useState5 = (0, _sliced_to_array._)((0, _react.useState)(false), 2), scrollStart = _useState5[0], setScrollStart = _useState5[1];
+    var _usePropsValue = (0, _sliced_to_array._)((0, _hooks.usePropsValue)({
+        value: value,
+        defaultValue: defaultValue || {}
+    }), 2), currentData = _usePropsValue[0], setCurrentData = _usePropsValue[1];
+    var _useState1 = (0, _sliced_to_array._)((0, _react.useState)(0), 2), currentIndex = _useState1[0], setCurrentIndex = _useState1[1];
+    var _useState2 = (0, _sliced_to_array._)((0, _react.useState)(0), 2), codeIndex = _useState2[0], setCodeIndex = _useState2[1];
+    var _useState3 = (0, _sliced_to_array._)((0, _react.useState)(false), 2), scrollStart = _useState3[0], setScrollStart = _useState3[1];
     var state = (0, _react.useRef)(initData);
     var resetScrollState = function resetScrollState() {
         setScrollStart(false);
     };
-    var clientHeight = function clientHeight() {
-        return listview.current ? listview.current.clientHeight : 0;
-    };
     var getData = function getData(el, name) {
         var prefix = 'data-';
-        return el.getAttribute(prefix + name);
+        // 检查点击的元素是否直接包含 data-index 属性
+        if (el.hasAttribute('data-index')) {
+            return el.getAttribute(prefix + name);
+        }
+        return '-1';
     };
     var calculateHeight = function calculateHeight() {
         var height = 0;
@@ -115,6 +123,10 @@ var Elevator = function Elevator(props) {
             var target = param.target, offset = param.offset;
             setScrollStart(true);
             var index = Number(getData(target, 'index'));
+            if (index < 0) {
+                setScrollStart(false);
+                return;
+            }
             touchState.current.y1 = offset[1];
             state.current.anchorIndex = +index;
             setCodeIndex(function(codeIndex) {
@@ -136,7 +148,6 @@ var Elevator = function Elevator(props) {
     var handleClickItem = function handleClickItem(key, item) {
         onItemClick && onItemClick(key, item);
         setCurrentData(item);
-        setCurrentKey(key);
     };
     var handleClickIndex = function handleClickIndex(key) {
         onIndexClick && onIndexClick(key);
@@ -181,13 +192,13 @@ var Elevator = function Elevator(props) {
     ]);
     var _obj;
     return /*#__PURE__*/ _react.default.createElement("div", (0, _object_spread._)({
-        className: "".concat(classPrefix, " ").concat(className),
+        className: "".concat(classPrefix, " ").concat(classPrefix, "-").concat(mode, " ").concat(className),
         style: style
-    }, rest), sticky && scrollY > 0 ? /*#__PURE__*/ _react.default.createElement("div", {
+    }, rest), mode === 'vertical' && sticky && scrollY > 0 ? /*#__PURE__*/ _react.default.createElement("div", {
         className: "".concat(classPrefix, "-list-fixed")
     }, /*#__PURE__*/ _react.default.createElement("span", {
         className: "".concat(classPrefix, "-list-fixed-title")
-    }, list[currentIndex][floorKey])) : null, /*#__PURE__*/ _react.default.createElement("div", {
+    }, list[currentIndex] && String(list[currentIndex][floorKey]))) : null, /*#__PURE__*/ _react.default.createElement("div", {
         className: "".concat(classPrefix, "-list"),
         style: {
             height: Number.isNaN(+height) ? height : "".concat(height, "px")
@@ -201,10 +212,12 @@ var Elevator = function Elevator(props) {
             key: idx
         }, /*#__PURE__*/ _react.default.createElement("div", {
             className: "".concat(classPrefix, "-list-item-code")
-        }, item[floorKey]), /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, item.list.map(function(subitem) {
+        }, item[floorKey]), /*#__PURE__*/ _react.default.createElement("div", {
+            className: "".concat(classPrefix, "-list-item-sublist")
+        }, item.list.map(function(subitem) {
             var _obj;
             return /*#__PURE__*/ _react.default.createElement("div", {
-                className: (0, _classnames.default)((_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-list-item-name"), true), (0, _define_property._)(_obj, "".concat(classPrefix, "-list-item-name-highcolor"), currentData.id === subitem.id && currentKey === item[floorKey]), _obj)),
+                className: (0, _classnames.default)((_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-list-item-name"), true), (0, _define_property._)(_obj, "".concat(classPrefix, "-list-item-name-highcolor"), currentData.id === subitem.id), _obj)),
                 key: subitem.id,
                 onClick: function onClick() {
                     return handleClickItem(item[floorKey], subitem);
@@ -215,7 +228,7 @@ var Elevator = function Elevator(props) {
         })));
     }))), showKeys ? /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, list.length && scrollStart ? /*#__PURE__*/ _react.default.createElement("div", {
         className: (0, _classnames.default)((_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-code-current"), true), (0, _define_property._)(_obj, "".concat(classPrefix, "-code-current-current"), true), _obj))
-    }, list[codeIndex][floorKey]) : null, /*#__PURE__*/ _react.default.createElement("div", {
+    }, list[codeIndex] && String(list[codeIndex][floorKey])) : null, /*#__PURE__*/ _react.default.createElement("div", {
         className: "".concat(classPrefix, "-bars")
     }, /*#__PURE__*/ _react.default.createElement(_web.animated.div, (0, _object_spread_props._)((0, _object_spread._)({
         className: "".concat(classPrefix, "-bars-inner")
@@ -233,7 +246,7 @@ var Elevator = function Elevator(props) {
             onClick: function onClick() {
                 return handleClickIndex(item[floorKey]);
             }
-        }, item[floorKey]);
+        }, String(item[floorKey]));
     })))) : null);
 };
 Elevator.displayName = 'NutElevator';

package/dist/cjs/packages/elevator/index.d.ts

@@ -1,3 +1,3 @@
 import { Elevator } from './elevator';
-export type { ElevatorProps } from './elevator';
+export type { WebElevatorProps as ElevatorProps } from "../../types";
 export default Elevator;

package/dist/cjs/packages/elevator/style/elevator.scss

@@ -1,68 +1,66 @@
 .nut-elevator {
-  width: 100%;
-  display: block;
   position: relative;
-  overflow: hidden;
+  display: flex;
+  width: 100%;
 
   &-list {
-    display: block;
     position: relative;
     top: 0;
+    display: flex;
+    width: 100%;
     overflow: hidden;
-    font-size: $elevator-list-font-size;
-    color: $elevator-list-color;
 
     &-inner {
-      height: 100%;
+      display: flex;
+      flex-direction: column;
+      min-height: 100%;
       width: 100%;
-      display: block;
       background-color: $elevator-list-bg-color;
       overflow: auto;
     }
 
     &-item {
-      display: block;
-
+      display: flex;
+      &-sublist {
+        display: flex;
+        flex-direction: column;
+      }
       &-code {
         display: flex;
-        position: relative;
+        align-items: center;
         height: $elevator-list-item-code-height;
-        line-height: $elevator-list-item-code-line-height;
         font-size: $elevator-list-item-code-font-size;
         color: $elevator-list-item-code-color;
-        padding: $elevator-list-item-padding;
         font-weight: $elevator-list-item-code-font-weight;
-        box-sizing: border-box;
-        border-bottom: $elevator-list-item-code-border-bottom;
-        background-color: $elevator-list-item-code-background-color;
       }
 
       &-name {
         display: flex;
         align-items: center;
-        padding: $elevator-list-item-padding;
         height: $elevator-list-item-name-height;
-        line-height: $elevator-list-item-name-line-height;
+        font-size: $elevator-list-font-size;
+        color: $elevator-list-color;
 
         &-highcolor {
           color: $color-primary;
+          font-weight: 600;
         }
       }
     }
 
     &-fixed {
-      display: flex;
-      align-items: center;
-      width: 100%;
       position: absolute;
       top: 0;
       left: 0;
       z-index: 1;
+      display: flex;
+      align-items: center;
+      width: 100%;
       padding: $elevator-list-item-padding;
       height: $elevator-list-item-code-height;
-      background-color: $elevator-list-fixed-bg-color;
       box-sizing: border-box;
       box-shadow: $elevator-list-fixed-box-shadow;
+      background-color: $elevator-list-fixed-bg-color;
       &-title {
         font-size: $elevator-list-item-code-font-size;
         color: $elevator-list-fixed-color;
@@ -76,41 +74,71 @@
     right: $elevator-list-item-code-current-right;
     top: $elevator-list-item-code-current-top;
     transform: $elevator-bars-transform;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     width: $elevator-list-item-code-current-width;
     height: $elevator-list-item-code-current-height;
-    line-height: $elevator-list-item-code-current-line-height;
     border-radius: $elevator-list-item-code-current-border-radius;
     background: $elevator-list-item-code-current-bg-color;
     box-shadow: $elevator-list-item-code-current-box-shadow;
-    text-align: $elevator-list-item-code-current-text-align;
+    color: $elevator-list-item-code-current-color;
   }
 
   &-bars {
     position: absolute;
     right: $elevator-bars-right;
     top: $elevator-bars-top;
-    color: $color-text-help;
-    font-size: $elevator-bars-font-size;
     transform: $elevator-bars-transform;
-    padding: $elevator-bars-padding;
-    background-color: $elevator-bars-background-color;
-    border-radius: $elevator-bars-border-radius;
-    text-align: center;
     z-index: $elevator-bars-z-index;
 
     &-inner {
+      display: flex;
+      flex-direction: column;
       &-item {
-        display: block;
-        padding: $elevator-bars-inner-item-padding;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        height: 16px;
+        width: 16px;
+        border-radius: 50%;
+        margin: 1px 0;
+        color: $elevator-bars-color;
+        font-size: $elevator-bars-font-size;
         cursor: pointer;
-
         &-active {
           font-weight: $font-weight-bold;
           color: $elevator-bars-active-color;
+          /* #ifndef weapp jd*/
+          background: linear-gradient(to right, #ff475d, #ff0f23);
+          /* #endif */
+          /* #ifdef weapp jd*/
+          background: #ff0f23;
+          /* #endif */
         }
       }
     }
   }
+  &-horizontal {
+    .nut-elevator-list-item {
+      &-code {
+        width: $elevator-list-item-code-width;
+        justify-content: center;
+      }
+    }
+  }
+  &-vertical {
+    .nut-elevator-list-item {
+      flex-direction: column;
+      &-code {
+        border-bottom: $elevator-list-item-code-border-bottom;
+      }
+      &-name,
+      &-code {
+        padding: $elevator-list-item-padding;
+      }
+    }
+  }
 }
 
 [dir='rtl'] .nut-elevator,

package/dist/cjs/packages/elevator/style/style.css

@@ -3,65 +3,64 @@
 /* #ifndef harmony */
 /* #endif */
 .nut-elevator {
-  width: 100%;
-  display: block;
   position: relative;
-  overflow: hidden;
+  display: flex;
+  width: 100%;
 }
 .nut-elevator-list {
-  display: block;
   position: relative;
   top: 0;
+  display: flex;
+  width: 100%;
   overflow: hidden;
-  font-size: var(--nutui-elevator-list-font-size, var(--nutui-font-size-s, 12px));
-  color: var(--nutui-elevator-list-color, var(--nutui-color-title, #1a1a1a));
 }
 .nut-elevator-list-inner {
-  height: 100%;
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
   width: 100%;
-  display: block;
   background-color: var(--nutui-elevator-list-bg-color, #ffffff);
   overflow: auto;
 }
 .nut-elevator-list-item {
-  display: block;
+  display: flex;
+}
+.nut-elevator-list-item-sublist {
+  display: flex;
+  flex-direction: column;
 }
 .nut-elevator-list-item-code {
   display: flex;
-  position: relative;
-  height: var(--nutui-elevator-list-item-code-height, 35px);
-  line-height: var(--nutui-elevator-list-item-code-line-height, 35px);
+  align-items: center;
+  height: var(--nutui-elevator-list-item-code-height, 34px);
   font-size: var(--nutui-elevator-list-item-code-font-size, var(--nutui-font-size-base, 14px));
-  color: var(--nutui-elevator-list-item-code-color, var(--nutui-color-title, #1a1a1a));
-  padding: var(--nutui-elevator-list-item-padding, 0 20px);
+  color: var(--nutui-elevator-list-item-code-color, var(--nutui-color-text-help, #888b94));
   font-weight: var(--nutui-elevator-list-item-code-font-weight, var(--nutui-font-weight-bold, 600));
-  box-sizing: border-box;
-  border-bottom: var(--nutui-elevator-list-item-code-border-bottom, 1px solid var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
-  background-color: var(--nutui-elevator-list-item-code-background-color, inherit);
 }
 .nut-elevator-list-item-name {
   display: flex;
   align-items: center;
-  padding: var(--nutui-elevator-list-item-padding, 0 20px);
-  height: var(--nutui-elevator-list-item-name-height, 30px);
-  line-height: var(--nutui-elevator-list-item-name-line-height, 30px);
+  height: var(--nutui-elevator-list-item-name-height, 34px);
+  font-size: var(--nutui-elevator-list-font-size, var(--nutui-font-size-base, 14px));
+  color: var(--nutui-elevator-list-color, var(--nutui-color-title, #1a1a1a));
 }
 .nut-elevator-list-item-name-highcolor {
   color: var(--nutui-color-primary, #ff0f23);
+  font-weight: 600;
 }
 .nut-elevator-list-fixed {
-  display: flex;
-  align-items: center;
-  width: 100%;
   position: absolute;
   top: 0;
   left: 0;
   z-index: 1;
-  padding: var(--nutui-elevator-list-item-padding, 0 20px);
-  height: var(--nutui-elevator-list-item-code-height, 35px);
-  background-color: var(--nutui-elevator-list-fixed-bg-color, #ffffff);
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: var(--nutui-elevator-list-item-padding, 0 36px 0 20px);
+  height: var(--nutui-elevator-list-item-code-height, 34px);
   box-sizing: border-box;
   box-shadow: var(--nutui-elevator-list-fixed-box-shadow, 0 0 10px #eee);
+  background-color: var(--nutui-elevator-list-fixed-bg-color, #ffffff);
 }
 .nut-elevator-list-fixed-title {
   font-size: var(--nutui-elevator-list-item-code-font-size, var(--nutui-font-size-base, 14px));
@@ -73,35 +72,61 @@
   right: var(--nutui-elevator-list-item-code-current-right, 60px);
   top: var(--nutui-elevator-list-item-code-current-top, 50%);
   transform: var(--nutui-elevator-bars-transform, translateY(-50%));
+  display: flex;
+  align-items: center;
+  justify-content: center;
   width: var(--nutui-elevator-list-item-code-current-width, 45px);
   height: var(--nutui-elevator-list-item-code-current-height, 45px);
-  line-height: var(--nutui-elevator-list-item-code-current-line-height, 45px);
   border-radius: var(--nutui-elevator-list-item-code-current-border-radius, 50%);
-  background: var(--nutui-elevator-list-item-code-current-bg-color, #fff);
+  background: var(--nutui-elevator-list-item-code-current-bg-color, var(--nutui-color-text-disabled, #c2c4cc));
   box-shadow: 0 3px 3px 1px rgb(240, 240, 240);
-  text-align: var(--nutui-elevator-list-item-code-current-text-align, center);
+  color: var(--nutui-elevator-list-item-code-current-color, #ffffff);
 }
 .nut-elevator-bars {
   position: absolute;
-  right: var(--nutui-elevator-bars-right, 10px);
+  right: var(--nutui-elevator-bars-right, 16px);
   top: var(--nutui-elevator-bars-top, 50%);
-  color: var(--nutui-color-text-help, #888b94);
-  font-size: var(--nutui-elevator-bars-font-size, var(--nutui-font-size-s, 12px));
   transform: var(--nutui-elevator-bars-transform, translateY(-50%));
-  padding: var(--nutui-elevator-bars-padding, 15px 0);
-  background-color: var(--nutui-elevator-bars-background-color, var(--nutui-color-background, #f2f3f5));
-  border-radius: var(--nutui-elevator-bars-border-radius, 6px);
-  text-align: center;
   z-index: var(--nutui-elevator-bars-z-index, 1);
 }
+.nut-elevator-bars-inner {
+  display: flex;
+  flex-direction: column;
+}
 .nut-elevator-bars-inner-item {
-  display: block;
-  padding: var(--nutui-elevator-bars-inner-item-padding, 3px);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 16px;
+  width: 16px;
+  border-radius: 50%;
+  margin: 1px 0;
+  color: var(--nutui-elevator-bars-color, var(--nutui-color-text-help, #888b94));
+  font-size: var(--nutui-elevator-bars-font-size, var(--nutui-font-size-xxs, 10px));
   cursor: pointer;
 }
 .nut-elevator-bars-inner-item-active {
   font-weight: var(--nutui-font-weight-bold, 600);
-  color: var(--nutui-elevator-bars-active-color, var(--nutui-color-primary, #ff0f23));
+  color: var(--nutui-elevator-bars-active-color, #ffffff);
+  /* #ifndef weapp jd*/
+  background: linear-gradient(to right, #ff475d, #ff0f23);
+  /* #endif */
+  /* #ifdef weapp jd*/
+  background: #ff0f23;
+  /* #endif */
+}
+.nut-elevator-horizontal .nut-elevator-list-item-code {
+  width: var(--nutui-elevator-list-item-code-width, 34px);
+  justify-content: center;
+}
+.nut-elevator-vertical .nut-elevator-list-item {
+  flex-direction: column;
+}
+.nut-elevator-vertical .nut-elevator-list-item-code {
+  border-bottom: var(--nutui-elevator-list-item-code-border-bottom, 1px solid var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
+}
+.nut-elevator-vertical .nut-elevator-list-item-name, .nut-elevator-vertical .nut-elevator-list-item-code {
+  padding: var(--nutui-elevator-list-item-padding, 0 36px 0 20px);
 }
 
 [dir=rtl] .nut-elevator-list-fixed,
@@ -117,5 +142,5 @@
 [dir=rtl] .nut-elevator-bars,
 .nut-rtl .nut-elevator-bars {
   right: auto;
-  left: var(--nutui-elevator-bars-right, 10px);
+  left: var(--nutui-elevator-bars-right, 16px);
 }

package/dist/cjs/packages/elevator/style-jmapp/elevator.scss

@@ -1,68 +1,66 @@
 .nut-elevator {
-  width: 100%;
-  display: block;
   position: relative;
-  overflow: hidden;
+  display: flex;
+  width: 100%;
 
   &-list {
-    display: block;
     position: relative;
     top: 0;
+    display: flex;
+    width: 100%;
     overflow: hidden;
-    font-size: $elevator-list-font-size;
-    color: $elevator-list-color;
 
     &-inner {
-      height: 100%;
+      display: flex;
+      flex-direction: column;
+      min-height: 100%;
       width: 100%;
-      display: block;
       background-color: $elevator-list-bg-color;
       overflow: auto;
     }
 
     &-item {
-      display: block;
-
+      display: flex;
+      &-sublist {
+        display: flex;
+        flex-direction: column;
+      }
       &-code {
         display: flex;
-        position: relative;
+        align-items: center;
         height: $elevator-list-item-code-height;
-        line-height: $elevator-list-item-code-line-height;
         font-size: $elevator-list-item-code-font-size;
         color: $elevator-list-item-code-color;
-        padding: $elevator-list-item-padding;
         font-weight: $elevator-list-item-code-font-weight;
-        box-sizing: border-box;
-        border-bottom: $elevator-list-item-code-border-bottom;
-        background-color: $elevator-list-item-code-background-color;
       }
 
       &-name {
         display: flex;
         align-items: center;
-        padding: $elevator-list-item-padding;
         height: $elevator-list-item-name-height;
-        line-height: $elevator-list-item-name-line-height;
+        font-size: $elevator-list-font-size;
+        color: $elevator-list-color;
 
         &-highcolor {
           color: $color-primary;
+          font-weight: 600;
         }
       }
     }
 
     &-fixed {
-      display: flex;
-      align-items: center;
-      width: 100%;
       position: absolute;
       top: 0;
       left: 0;
       z-index: 1;
+      display: flex;
+      align-items: center;
+      width: 100%;
       padding: $elevator-list-item-padding;
       height: $elevator-list-item-code-height;
-      background-color: $elevator-list-fixed-bg-color;
       box-sizing: border-box;
       box-shadow: $elevator-list-fixed-box-shadow;
+      background-color: $elevator-list-fixed-bg-color;
       &-title {
         font-size: $elevator-list-item-code-font-size;
         color: $elevator-list-fixed-color;
@@ -76,41 +74,71 @@
     right: $elevator-list-item-code-current-right;
     top: $elevator-list-item-code-current-top;
     transform: $elevator-bars-transform;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     width: $elevator-list-item-code-current-width;
     height: $elevator-list-item-code-current-height;
-    line-height: $elevator-list-item-code-current-line-height;
     border-radius: $elevator-list-item-code-current-border-radius;
     background: $elevator-list-item-code-current-bg-color;
     box-shadow: $elevator-list-item-code-current-box-shadow;
-    text-align: $elevator-list-item-code-current-text-align;
+    color: $elevator-list-item-code-current-color;
   }
 
   &-bars {
     position: absolute;
     right: $elevator-bars-right;
     top: $elevator-bars-top;
-    color: $color-text-help;
-    font-size: $elevator-bars-font-size;
     transform: $elevator-bars-transform;
-    padding: $elevator-bars-padding;
-    background-color: $elevator-bars-background-color;
-    border-radius: $elevator-bars-border-radius;
-    text-align: center;
     z-index: $elevator-bars-z-index;
 
     &-inner {
+      display: flex;
+      flex-direction: column;
       &-item {
-        display: block;
-        padding: $elevator-bars-inner-item-padding;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        height: 16px;
+        width: 16px;
+        border-radius: 50%;
+        margin: 1px 0;
+        color: $elevator-bars-color;
+        font-size: $elevator-bars-font-size;
         cursor: pointer;
-
         &-active {
           font-weight: $font-weight-bold;
           color: $elevator-bars-active-color;
+          /* #ifndef weapp jd*/
+          background: linear-gradient(to right, #ff475d, #ff0f23);
+          /* #endif */
+          /* #ifdef weapp jd*/
+          background: #ff0f23;
+          /* #endif */
         }
       }
     }
   }
+  &-horizontal {
+    .nut-elevator-list-item {
+      &-code {
+        width: $elevator-list-item-code-width;
+        justify-content: center;
+      }
+    }
+  }
+  &-vertical {
+    .nut-elevator-list-item {
+      flex-direction: column;
+      &-code {
+        border-bottom: $elevator-list-item-code-border-bottom;
+      }
+      &-name,
+      &-code {
+        padding: $elevator-list-item-padding;
+      }
+    }
+  }
 }
 
 [dir='rtl'] .nut-elevator,