@arco-design/mobile-react 2.19.0

package/umd/image-preview/methods.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export interface OpenBaseProps {
+    onClose?: () => void;
+    close: (e: any) => void;
+    openIndex: number;
+    images: any[];
+}
+export declare function open<P extends OpenBaseProps>(Component: React.FunctionComponent<P>): (config: Pick<P, Exclude<keyof P, "close">>) => {
+    close: () => void;
+    update: (newConfig: Pick<P, Exclude<keyof P, "close">>) => void;
+};

package/umd/image-preview/methods.js

@@ -0,0 +1,83 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "@babel/runtime/helpers/extends", "react", "react-dom", "@arco-design/mobile-utils"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("@babel/runtime/helpers/extends"), require("react"), require("react-dom"), require("@arco-design/mobile-utils"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global._extends, global.react, global.reactDom, global.mobileUtils);
+    global.methods = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _extends2, _react, _reactDom, _mobileUtils) {
+  "use strict";
+
+  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+  _exports.__esModule = true;
+  _exports.open = open;
+  _extends2 = _interopRequireDefault(_extends2);
+  _react = _interopRequireDefault(_react);
+  _reactDom = _interopRequireDefault(_reactDom);
+
+  function open(Component) {
+    return function (config) {
+      var baseProps = (0, _extends2.default)({
+        unmountOnExit: true
+      }, config || {}, {
+        close: function close() {}
+      });
+      var dynamicProps = (0, _extends2.default)({}, baseProps); // 不同的key用不同的容器挂载
+      // @en Different keys are mounted in different containers
+
+      var id = "_ARCO_IMAGE_PREVIEW_DIV_" + (baseProps.key || '') + "_";
+
+      var _appendElementById = (0, _mobileUtils.appendElementById)(id, baseProps.getContainer),
+          div = _appendElementById.child;
+
+      var leaving = false;
+
+      function render(props) {
+        _reactDom.default.render( /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, props, {
+          getContainer: function getContainer() {
+            return div;
+          }
+        })), div);
+      }
+
+      function update(newConfig) {
+        dynamicProps = (0, _extends2.default)({}, dynamicProps, newConfig || {});
+        render(dynamicProps);
+      }
+
+      function close() {
+        leaving = true;
+        dynamicProps.openIndex = -1;
+        render(dynamicProps);
+      }
+
+      dynamicProps.close = close;
+
+      dynamicProps.onClose = function () {
+        baseProps.onClose && baseProps.onClose();
+
+        if (baseProps.unmountOnExit) {
+          (0, _mobileUtils.removeElement)(div);
+        }
+      };
+
+      dynamicProps.openIndex = -1;
+      render(dynamicProps);
+      setTimeout(function () {
+        if (leaving) return;
+        dynamicProps.openIndex = baseProps.openIndex;
+        render(dynamicProps);
+      }, 20);
+      return {
+        close: close,
+        update: update
+      };
+    };
+  }
+});

package/umd/image-preview/style/css/index.css

@@ -0,0 +1,118 @@
+.arco-image-preview,
+.image-preview-lock-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1000;
+}
+.image-preview-lock-modal {
+  -webkit-transform: translateZ(2PX);
+          transform: translateZ(2PX);
+}
+.arco-image-preview {
+  background:  rgba(0, 0, 0, 0.9) ;
+}
+.arco-image-preview.noselect {
+  -webkit-touch-callout: none;
+  /* iOS Safari */
+  -webkit-user-select: none;
+  /* Chrome/Safari/Opera */
+  /* Konqueror */
+  /* Firefox */
+  /* Internet Explorer/Edge */
+  user-select: none;
+  /* Non-prefixed version, currently*/
+}
+.arco-image-preview .preview-image-wrap {
+  width: 100%;
+  height: 100%;
+}
+.arco-image-preview .arco-carousel-wrap,
+.arco-image-preview .arco-carousel,
+.arco-image-preview .arco-carousel-inner {
+  height: 100%;
+}
+.arco-image-preview .carousel-item {
+  overflow: hidden;
+}
+.arco-image-preview .carousel-item::-webkit-scrollbar {
+  display: none;
+}
+.arco-image-preview .preview-image {
+  width: 100%;
+  height: 100%;
+  will-change: transform;
+}
+.arco-image-preview .preview-image.preview-hidden {
+  pointer-events: none;
+}
+.arco-image-preview .preview-image.preview-hidden .image-container {
+  visibility: hidden;
+}
+.arco-image-preview .preview-image .image-bottom-overlap {
+  overflow: visible;
+}
+.image-preview-indicator {
+  width: 100%;
+  left: 0;
+  bottom: 0;
+  z-index: 1003;
+  position: fixed;
+  box-sizing: border-box;
+  font-size:  0.28rem ;
+  color:  #ffffff ;
+  padding:  0.24rem 0.4rem ;
+  background:  -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.3)) ;
+  background:  linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.3)) ;
+}
+.image-preview-fake-rect {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+}
+.image-preview-fake-trans-image {
+  position: fixed;
+  left: 0;
+  top: 0;
+  object-fit: cover;
+  -webkit-transition:  all cubic-bezier(0.34, 0.69, 0.1, 1) ;
+  transition:  all cubic-bezier(0.34, 0.69, 0.1, 1) ;
+  will-change: transform;
+  pointer-events: none;
+  z-index: 1001;
+}
+.image-preview-loading-area {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1010;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+          align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+          justify-content: center;
+  pointer-events: none;
+}
+.image-preview-loading-area .loading-icon .bg-color-with-config {
+  background: #ffffff;
+}
+.image-preview-loading-area .loading-icon .stop-color-with-config {
+  stop-color: #ffffff;
+}
+.image-preview-loading-area .loading-icon .fill-color-with-config {
+  fill: #ffffff;
+}
+.image-preview-loading-area .loading-icon .stroke-color-with-config {
+  stroke: #ffffff;
+}

package/umd/image-preview/style/css/index.d.ts

@@ -0,0 +1,5 @@
+import '../../../../style/css/public.css';
+import '../../../transition/style/css';
+import '../../../carousel/style/css';
+import '../../../image/style/css';
+import './index.css';

package/umd/image-preview/style/css/index.js

@@ -0,0 +1,15 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["../../../../style/css/public.css", "../../../transition/style/css", "../../../carousel/style/css", "../../../image/style/css", "./index.css"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(require("../../../../style/css/public.css"), require("../../../transition/style/css"), require("../../../carousel/style/css"), require("../../../image/style/css"), require("./index.css"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(global._public, global.style, global.style, global.style, global.index);
+    global.index = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_public, _style, _style2, _style3, _index) {
+  "use strict";
+});

package/umd/image-preview/style/index.d.ts

@@ -0,0 +1,5 @@
+import '../../../style/public.less';
+import '../../transition/style';
+import '../../carousel/style';
+import '../../image/style';
+import './index.less';

package/umd/image-preview/style/index.js

@@ -0,0 +1,15 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["../../../style/public.less", "../../transition/style", "../../carousel/style", "../../image/style", "./index.less"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(require("../../../style/public.less"), require("../../transition/style"), require("../../carousel/style"), require("../../image/style"), require("./index.less"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(global._public, global.style, global.style, global.style, global.index);
+    global.index = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_public, _style, _style2, _style3, _index) {
+  "use strict";
+});

package/umd/image-preview/style/index.less

@@ -0,0 +1,98 @@
+@import "../../../style/mixin.less";
+
+.@{prefix}-image-preview,
+.image-preview-lock-modal {
+    .full-screen();
+    z-index: @full-screen-z-index;
+}
+
+.image-preview-lock-modal {
+    transform: translateZ(2PX);
+}
+
+.@{prefix}-image-preview {
+    .use-var(background, image-preview-mask-background);
+
+    &.noselect {
+        -webkit-touch-callout: none;
+        .noselect();
+    }
+
+    .preview-image-wrap {
+        width: 100%;
+        height: 100%;
+    }
+    .@{prefix}-carousel-wrap,
+    .@{prefix}-carousel,
+    .@{prefix}-carousel-inner {
+        height: 100%;
+    }
+
+    .carousel-item {
+        overflow: hidden;
+
+        &::-webkit-scrollbar {
+            display: none;
+        }
+    }
+
+    .preview-image {
+        width: 100%;
+        height: 100%;
+        will-change: transform;
+
+        &.preview-hidden {
+            pointer-events: none;
+
+            .image-container {
+                visibility: hidden;
+            }
+        }
+
+        .image-bottom-overlap {
+            overflow: visible;
+        }
+    }
+}
+
+.image-preview-indicator {
+    width: 100%;
+    left: 0;
+    bottom: 0;
+    z-index: @full-screen-z-index + 3;
+    position: fixed;
+    box-sizing: border-box;
+    .use-var(font-size, image-preview-indicator-font-size);
+    .use-var(color, mask-content-color);
+    .use-var(padding, image-preview-indicator-padding);
+    .use-var(background, image-preview-indicator-background);
+}
+
+.image-preview-fake-rect {
+    .full-screen();
+    opacity: 0;
+}
+
+.image-preview-fake-trans-image {
+    position: fixed;
+    left: 0;
+    top: 0;
+    object-fit: cover;
+    .use-var(transition, image-preview-thumb-transition);
+    will-change: transform;
+    pointer-events: none;
+    z-index: @full-screen-z-index + 1;
+}
+
+.image-preview-loading-area {
+    .full-screen();
+    z-index: @full-screen-z-index + 10;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+
+    .loading-icon {
+        .set-loading-color-var(mask-content-color);
+    }
+}

package/umd/index.d.ts

@@ -0,0 +1,49 @@
+export { default as ActionSheet } from './action-sheet';
+export { default as Cell } from './cell';
+export { default as Loading } from './loading';
+export { default as Badge } from './badge';
+export { default as Avatar } from './avatar';
+export { default as Button } from './button';
+export { default as Carousel } from './carousel';
+export { default as Toast } from './toast';
+export { default as Switch } from './switch';
+export { default as Checkbox } from './checkbox';
+export { default as CircleProgress } from './circle-progress';
+export { default as Collapse } from './collapse';
+export { default as Tabs } from './tabs';
+export { default as ContextProvider } from './context-provider';
+export { default as Dialog } from './dialog';
+export { default as CountDown } from './count-down';
+export { default as DatePicker } from './date-picker';
+export { default as Dropdown } from './dropdown';
+export { default as DropdownMenu } from './dropdown-menu';
+export { default as Ellipsis } from './ellipsis';
+export { default as Grid } from './grid';
+export { default as Image } from './image';
+export { default as ShowMonitor } from './show-monitor';
+export { default as ImagePreview } from './image-preview';
+export { default as Input } from './input';
+export { default as LoadMore } from './load-more';
+export { default as Masking } from './masking';
+export { default as NavBar } from './nav-bar';
+export { default as NoticeBar } from './notice-bar';
+export { default as Notify } from './notify';
+export { default as Pagination } from './pagination';
+export { default as Picker } from './picker';
+export { default as PickerView } from './picker-view';
+export { default as Popover } from './popover';
+export { default as Popup } from './popup';
+export { default as PopupSwiper } from './popup-swiper';
+export { default as Portal } from './portal';
+export { default as Progress } from './progress';
+export { default as PullRefresh } from './pull-refresh';
+export { default as Radio } from './radio';
+export { default as Rate } from './rate';
+export { default as Slider } from './slider';
+export { default as Steps } from './steps';
+export { default as Sticky } from './sticky';
+export { default as SwipeLoad } from './swipe-load';
+export { default as TabBar } from './tab-bar';
+export { default as Tag } from './tag';
+export { default as Textarea } from './textarea';
+export { default as Transition } from './transition';

package/umd/index.js

@@ -0,0 +1,118 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "./action-sheet", "./cell", "./loading", "./badge", "./avatar", "./button", "./carousel", "./toast", "./switch", "./checkbox", "./circle-progress", "./collapse", "./tabs", "./context-provider", "./dialog", "./count-down", "./date-picker", "./dropdown", "./dropdown-menu", "./ellipsis", "./grid", "./image", "./show-monitor", "./image-preview", "./input", "./load-more", "./masking", "./nav-bar", "./notice-bar", "./notify", "./pagination", "./picker", "./picker-view", "./popover", "./popup", "./popup-swiper", "./portal", "./progress", "./pull-refresh", "./radio", "./rate", "./slider", "./steps", "./sticky", "./swipe-load", "./tab-bar", "./tag", "./textarea", "./transition"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("./action-sheet"), require("./cell"), require("./loading"), require("./badge"), require("./avatar"), require("./button"), require("./carousel"), require("./toast"), require("./switch"), require("./checkbox"), require("./circle-progress"), require("./collapse"), require("./tabs"), require("./context-provider"), require("./dialog"), require("./count-down"), require("./date-picker"), require("./dropdown"), require("./dropdown-menu"), require("./ellipsis"), require("./grid"), require("./image"), require("./show-monitor"), require("./image-preview"), require("./input"), require("./load-more"), require("./masking"), require("./nav-bar"), require("./notice-bar"), require("./notify"), require("./pagination"), require("./picker"), require("./picker-view"), require("./popover"), require("./popup"), require("./popup-swiper"), require("./portal"), require("./progress"), require("./pull-refresh"), require("./radio"), require("./rate"), require("./slider"), require("./steps"), require("./sticky"), require("./swipe-load"), require("./tab-bar"), require("./tag"), require("./textarea"), require("./transition"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.actionSheet, global.cell, global.loading, global.badge, global.avatar, global.button, global.carousel, global.toast, global._switch, global.checkbox, global.circleProgress, global.collapse, global.tabs, global.contextProvider, global.dialog, global.countDown, global.datePicker, global.dropdown, global.dropdownMenu, global.ellipsis, global.grid, global.image, global.showMonitor, global.imagePreview, global.input, global.loadMore, global.masking, global.navBar, global.noticeBar, global.notify, global.pagination, global.picker, global.pickerView, global.popover, global.popup, global.popupSwiper, global.portal, global.progress, global.pullRefresh, global.radio, global.rate, global.slider, global.steps, global.sticky, global.swipeLoad, global.tabBar, global.tag, global.textarea, global.transition);
+    global.index = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _actionSheet, _cell, _loading, _badge, _avatar, _button, _carousel, _toast, _switch, _checkbox, _circleProgress, _collapse, _tabs, _contextProvider, _dialog, _countDown, _datePicker, _dropdown, _dropdownMenu, _ellipsis, _grid, _image, _showMonitor, _imagePreview, _input, _loadMore, _masking, _navBar, _noticeBar, _notify, _pagination, _picker, _pickerView, _popover, _popup, _popupSwiper, _portal, _progress, _pullRefresh, _radio, _rate, _slider, _steps, _sticky, _swipeLoad, _tabBar, _tag, _textarea, _transition) {
+  "use strict";
+
+  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+  _exports.__esModule = true;
+  _exports.Transition = _exports.Toast = _exports.Textarea = _exports.Tag = _exports.Tabs = _exports.TabBar = _exports.Switch = _exports.SwipeLoad = _exports.Sticky = _exports.Steps = _exports.Slider = _exports.ShowMonitor = _exports.Rate = _exports.Radio = _exports.PullRefresh = _exports.Progress = _exports.Portal = _exports.PopupSwiper = _exports.Popup = _exports.Popover = _exports.PickerView = _exports.Picker = _exports.Pagination = _exports.Notify = _exports.NoticeBar = _exports.NavBar = _exports.Masking = _exports.Loading = _exports.LoadMore = _exports.Input = _exports.ImagePreview = _exports.Image = _exports.Grid = _exports.Ellipsis = _exports.DropdownMenu = _exports.Dropdown = _exports.Dialog = _exports.DatePicker = _exports.CountDown = _exports.ContextProvider = _exports.Collapse = _exports.CircleProgress = _exports.Checkbox = _exports.Cell = _exports.Carousel = _exports.Button = _exports.Badge = _exports.Avatar = _exports.ActionSheet = void 0;
+  _actionSheet = _interopRequireDefault(_actionSheet);
+  _exports.ActionSheet = _actionSheet.default;
+  _cell = _interopRequireDefault(_cell);
+  _exports.Cell = _cell.default;
+  _loading = _interopRequireDefault(_loading);
+  _exports.Loading = _loading.default;
+  _badge = _interopRequireDefault(_badge);
+  _exports.Badge = _badge.default;
+  _avatar = _interopRequireDefault(_avatar);
+  _exports.Avatar = _avatar.default;
+  _button = _interopRequireDefault(_button);
+  _exports.Button = _button.default;
+  _carousel = _interopRequireDefault(_carousel);
+  _exports.Carousel = _carousel.default;
+  _toast = _interopRequireDefault(_toast);
+  _exports.Toast = _toast.default;
+  _switch = _interopRequireDefault(_switch);
+  _exports.Switch = _switch.default;
+  _checkbox = _interopRequireDefault(_checkbox);
+  _exports.Checkbox = _checkbox.default;
+  _circleProgress = _interopRequireDefault(_circleProgress);
+  _exports.CircleProgress = _circleProgress.default;
+  _collapse = _interopRequireDefault(_collapse);
+  _exports.Collapse = _collapse.default;
+  _tabs = _interopRequireDefault(_tabs);
+  _exports.Tabs = _tabs.default;
+  _contextProvider = _interopRequireDefault(_contextProvider);
+  _exports.ContextProvider = _contextProvider.default;
+  _dialog = _interopRequireDefault(_dialog);
+  _exports.Dialog = _dialog.default;
+  _countDown = _interopRequireDefault(_countDown);
+  _exports.CountDown = _countDown.default;
+  _datePicker = _interopRequireDefault(_datePicker);
+  _exports.DatePicker = _datePicker.default;
+  _dropdown = _interopRequireDefault(_dropdown);
+  _exports.Dropdown = _dropdown.default;
+  _dropdownMenu = _interopRequireDefault(_dropdownMenu);
+  _exports.DropdownMenu = _dropdownMenu.default;
+  _ellipsis = _interopRequireDefault(_ellipsis);
+  _exports.Ellipsis = _ellipsis.default;
+  _grid = _interopRequireDefault(_grid);
+  _exports.Grid = _grid.default;
+  _image = _interopRequireDefault(_image);
+  _exports.Image = _image.default;
+  _showMonitor = _interopRequireDefault(_showMonitor);
+  _exports.ShowMonitor = _showMonitor.default;
+  _imagePreview = _interopRequireDefault(_imagePreview);
+  _exports.ImagePreview = _imagePreview.default;
+  _input = _interopRequireDefault(_input);
+  _exports.Input = _input.default;
+  _loadMore = _interopRequireDefault(_loadMore);
+  _exports.LoadMore = _loadMore.default;
+  _masking = _interopRequireDefault(_masking);
+  _exports.Masking = _masking.default;
+  _navBar = _interopRequireDefault(_navBar);
+  _exports.NavBar = _navBar.default;
+  _noticeBar = _interopRequireDefault(_noticeBar);
+  _exports.NoticeBar = _noticeBar.default;
+  _notify = _interopRequireDefault(_notify);
+  _exports.Notify = _notify.default;
+  _pagination = _interopRequireDefault(_pagination);
+  _exports.Pagination = _pagination.default;
+  _picker = _interopRequireDefault(_picker);
+  _exports.Picker = _picker.default;
+  _pickerView = _interopRequireDefault(_pickerView);
+  _exports.PickerView = _pickerView.default;
+  _popover = _interopRequireDefault(_popover);
+  _exports.Popover = _popover.default;
+  _popup = _interopRequireDefault(_popup);
+  _exports.Popup = _popup.default;
+  _popupSwiper = _interopRequireDefault(_popupSwiper);
+  _exports.PopupSwiper = _popupSwiper.default;
+  _portal = _interopRequireDefault(_portal);
+  _exports.Portal = _portal.default;
+  _progress = _interopRequireDefault(_progress);
+  _exports.Progress = _progress.default;
+  _pullRefresh = _interopRequireDefault(_pullRefresh);
+  _exports.PullRefresh = _pullRefresh.default;
+  _radio = _interopRequireDefault(_radio);
+  _exports.Radio = _radio.default;
+  _rate = _interopRequireDefault(_rate);
+  _exports.Rate = _rate.default;
+  _slider = _interopRequireDefault(_slider);
+  _exports.Slider = _slider.default;
+  _steps = _interopRequireDefault(_steps);
+  _exports.Steps = _steps.default;
+  _sticky = _interopRequireDefault(_sticky);
+  _exports.Sticky = _sticky.default;
+  _swipeLoad = _interopRequireDefault(_swipeLoad);
+  _exports.SwipeLoad = _swipeLoad.default;
+  _tabBar = _interopRequireDefault(_tabBar);
+  _exports.TabBar = _tabBar.default;
+  _tag = _interopRequireDefault(_tag);
+  _exports.Tag = _tag.default;
+  _textarea = _interopRequireDefault(_textarea);
+  _exports.Textarea = _textarea.default;
+  _transition = _interopRequireDefault(_transition);
+  _exports.Transition = _transition.default;
+});

package/umd/input/demo/style/css/mobile.css

@@ -0,0 +1,67 @@
+#demo-input {
+  padding-bottom: 0.9rem;
+}
+#demo-input .arcodesign-mobile-demo-content {
+  padding: 0;
+  background: transparent;
+}
+#demo-input .arco-input-container {
+  background:  #ffffff ;
+}
+#demo-input .arco-input-container:not(:first-of-type) {
+  margin-top: 0.16rem;
+}
+#demo-input .demo-input-maxlength {
+  font-size: 0.28rem;
+  color: #86909c;
+}
+#demo-input .demo-input-maxlength.error {
+  color: #f53f3f;
+}
+#demo-input .demo-input-red-placeholder {
+  caret-color: #f53f3f;
+}
+#demo-input .demo-input-red-placeholder::-webkit-input-placeholder {
+  color: #f53f3f;
+}
+#demo-input .demo-input-red-placeholder::placeholder {
+  color: #f53f3f;
+}
+#demo-input .demo-input-error-hint {
+  font-size: 0.24rem;
+  color: #f53f3f;
+  padding: 0 0 0.32rem 2.08rem;
+  margin-top: -0.16rem;
+}
+#demo-input .demo-input-error-hint svg,
+#demo-input .demo-input-error-hint span {
+  vertical-align: middle;
+}
+#demo-input .demo-input-error-hint svg {
+  margin-right: 0.08rem;
+}
+#demo-input .demo-input-icon {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+          align-items: center;
+}
+#demo-input .demo-input-title {
+  font-size: 0.26rem;
+  line-height: 0.36rem;
+  margin-bottom: -0.16rem;
+  padding: 0.32rem 0 0 0.32rem;
+}
+#demo-input .demo-input-btn-input .arco-input-wrap {
+  height: auto;
+}
+#demo-input .demo-input-btn-wrap {
+  padding: 0.22rem 0;
+}
+#demo-input .demo-input-money {
+  font-size: 0.4rem;
+  font-weight: bold;
+  margin-right: -0.24rem;
+}

package/umd/input/demo/style/mobile.less

@@ -0,0 +1,75 @@
+@import "../../../../style/mixin.less";
+
+#demo-input {
+    .rem(padding-bottom, 45);
+
+    .arcodesign-mobile-demo-content {
+        padding: 0;
+        background: transparent;
+    }
+    .@{prefix}-input-container {
+        .use-var(background, background-color);
+
+        &:not(:first-of-type) {
+            .rem(margin-top, 8);
+        }
+    }
+
+    .demo-input-maxlength {
+        .rem(font-size, 14);
+        color: #86909c;
+
+        &.error {
+            color: #f53f3f;
+        }
+    }
+
+    .demo-input-red-placeholder {
+        caret-color: #f53f3f;
+
+        &::placeholder {
+            color: #f53f3f;
+        }
+    }
+
+    .demo-input-error-hint {
+        .rem(font-size, 12);
+        color: #f53f3f;
+        .rem(padding, 0, 0, 16, 104);
+        .rem(margin-top, -8);
+
+        svg,
+        span {
+            vertical-align: middle;
+        }
+
+        svg {
+            .rem(margin-right, 4);
+        }
+    }
+
+    .demo-input-icon {
+        display: flex;
+        align-items: center;
+    }
+
+    .demo-input-title {
+        .rem(font-size, 13);
+        .rem(line-height, 18);
+        .rem(margin-bottom, -8);
+        .rem(padding, 16, 0, 0, 16);
+    }
+    .demo-input-btn-input .@{prefix}-input-wrap {
+        height: auto;
+    }
+
+    .demo-input-btn-wrap {
+        .rem(padding, 11, 0);
+    }
+
+    .demo-input-money {
+        .rem(font-size, 20);
+        font-weight: bold;
+        .rem(margin-right, -12);
+    }
+}