@arco-design/mobile-react 2.19.0

package/cjs/input/style/css/index.css

@@ -0,0 +1,146 @@
+.arco-input-container {
+  width: 100%;
+  color:  #1d2129 ;
+  position: relative;
+}
+.arco-input-container .arco-input-label {
+  min-width:  1.28rem ;
+}
+.arco-input-label {
+  padding-top: 1PX;
+}
+.arco-input-label.required::before {
+  content: "* ";
+  color:  #ee4d38 ;
+}
+.disabled .arco-input-label {
+  color:  #c9cdd4 ;
+}
+.arco-input-wrap {
+  position: relative;
+  height:  1.08rem ;
+  padding: 0 0.32rem ;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+          align-items: center;
+}
+.arco-input-wrap textarea,
+.arco-input-wrap input {
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+          flex: 1;
+  background: transparent;
+}
+.arco-input-wrap textarea:disabled,
+.arco-input-wrap input:disabled {
+  color:  #c9cdd4 ;
+  -webkit-text-fill-color:  #c9cdd4 ;
+  opacity: 1;
+}
+.arco-input-wrap.textarea {
+  height: auto;
+  -webkit-box-align: start;
+  -webkit-align-items: flex-start;
+          align-items: flex-start;
+  padding:  0.32rem ;
+}
+.arco-input-wrap.textarea.has-stat {
+  padding:  0.32rem 0.32rem 0.88rem ;
+}
+.arco-input-wrap.border-all {
+  box-shadow: 0 0 0 1PX #e5e6eb inset;
+}
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
+  .arco-input-wrap.border-all {
+    box-shadow: 0 0 0 0.5PX #e5e6eb inset;
+  }
+}
+.ios .arco-input-wrap.border-all,
+.arco-input-wrap.border-all.ios {
+  box-shadow: none;
+  border: 0.5PX solid #e5e6eb;
+}
+.arco-input-wrap.border-half {
+  box-shadow: 0 1PX 0 0 #e5e6eb inset;
+  box-shadow: 0 -1PX 0 0 #e5e6eb inset;
+}
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
+  .arco-input-wrap.border-half {
+    box-shadow: 0 0.5PX 0 0 #e5e6eb inset;
+  }
+}
+.ios .arco-input-wrap.border-half,
+.arco-input-wrap.border-half.ios {
+  box-shadow: none;
+  border-top: 0.5PX solid #e5e6eb;
+}
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
+  .arco-input-wrap.border-half {
+    box-shadow: 0 -0.5PX 0 0 #e5e6eb inset;
+  }
+}
+.ios .arco-input-wrap.border-half,
+.arco-input-wrap.border-half.ios {
+  box-shadow: none;
+  border-bottom: 0.5PX solid #e5e6eb;
+}
+.arco-input-wrap.border-bottom {
+  box-shadow: 0 -1PX 0 0 #e5e6eb inset;
+}
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
+  .arco-input-wrap.border-bottom {
+    box-shadow: 0 -0.5PX 0 0 #e5e6eb inset;
+  }
+}
+.ios .arco-input-wrap.border-bottom,
+.arco-input-wrap.border-bottom.ios {
+  box-shadow: none;
+  border-bottom: 0.5PX solid #e5e6eb;
+}
+.arco-input-prefix,
+.arco-input-suffix,
+.arco-input-clear {
+  font-size:  0.32rem ;
+  line-height:  0.44rem ;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+          align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+          justify-content: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+}
+.arco-input-prefix {
+  padding-right:  0.48rem ;
+}
+.arco-input-clear,
+.arco-input-suffix {
+  padding-left:  0.32rem ;
+}
+.arco-input-clear {
+  color:  #c9cdd4 ;
+}
+.arco-input {
+  display: inline-block;
+  width: 100%;
+  height: 100%;
+  font-size:  0.32rem ;
+  line-height:  0.44rem ;
+  caret-color:  #165dff ;
+  padding:  0.24rem 0;
+  color:  #1d2129 ;
+}
+.arco-input::-webkit-input-placeholder {
+  color:  #c9cdd4 ;
+}
+.arco-input::placeholder {
+  color:  #c9cdd4 ;
+}
+.arco-input::-webkit-search-cancel-button {
+  display: none;
+}

package/cjs/input/style/css/index.d.ts

@@ -0,0 +1,2 @@
+import '../../../../style/css/public.css';
+import './index.css';

package/cjs/input/style/css/index.js

@@ -0,0 +1,5 @@
+"use strict";
+
+require("../../../../style/css/public.css");
+
+require("./index.css");

package/cjs/input/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../../style/public.less';
+import './index.less';

package/cjs/input/style/index.js

@@ -0,0 +1,5 @@
+"use strict";
+
+require("../../../style/public.less");
+
+require("./index.less");

package/cjs/input/style/index.less

@@ -0,0 +1,107 @@
+@import "../../../style/mixin.less";
+
+.@{prefix}-input-container {
+    width: 100%;
+    .use-var(color, font-color);
+    position: relative;
+    .@{prefix}-input-label {
+        .use-var(min-width, input-label-min-width);
+    }
+}
+
+.@{prefix}-input-label {
+
+    &.required::before {
+        content: "* ";
+        .use-var(color, danger-color);
+    }
+    padding-top: 1PX;
+
+    .disabled & {
+        .use-var(color, input-disabled-color);
+    }
+}
+
+.@{prefix}-input-wrap {
+    position: relative;
+    .use-var(height, input-height);
+    .use-var(padding, input-horizontal-padding, 0);
+    display: flex;
+    align-items: center;
+
+    textarea,
+    input {
+        flex: 1;
+        background: transparent;
+
+        &:disabled {
+            .use-var(color, input-disabled-color);
+            // reset for ios
+            .use-var(-webkit-text-fill-color, input-disabled-color);
+            opacity: 1;
+        }
+    }
+
+    &.textarea {
+        height: auto;
+        align-items: flex-start;
+        .use-var(padding, textarea-padding);
+
+        &.has-stat {
+            .use-var(padding, textarea-has-stat-padding);
+        }
+    }
+
+    &.border {
+
+        &-all {
+            .hairline-var(line-color);
+        }
+
+        &-half {
+            .hairline-var(line-color, top);
+            .hairline-var(line-color, bottom);
+        }
+
+        &-bottom {
+            .hairline-var(line-color, bottom);
+        }
+    }
+}
+
+.@{prefix}-input-prefix, .@{prefix}-input-suffix, .@{prefix}-input-clear {
+    .use-var(font-size, input-text-font-size);
+    .use-var(line-height, input-text-line-height);
+    align-items: center;
+    justify-content: center;
+    display: flex;
+}
+.@{prefix}-input-prefix {
+    .use-var(padding-right, input-label-gutter);
+}
+.@{prefix}-input-clear,
+.@{prefix}-input-suffix {
+    .use-var(padding-left, input-horizontal-padding);
+}
+.@{prefix}-input-clear {
+    .use-var(color, input-clear-icon-color);
+}
+
+.@{prefix}-input {
+    display: inline-block;
+    width: 100%;
+    height: 100%;
+    .use-var(font-size, input-text-font-size);
+    .use-var(line-height, input-text-line-height);
+    .use-var(caret-color, input-caret-color);
+    .use-var(padding, input-vertical-padding, "", 0);
+    .use-var(color, font-color);
+
+    &::placeholder {
+        .use-var(color, input-placeholder-color);
+    }
+
+    &::-webkit-search-cancel-button {
+        display: none;
+    }
+}

package/cjs/load-more/demo/style/css/mobile.css

@@ -0,0 +1,7 @@
+#demo-load-more {
+  color:  #1d2129 ;
+  padding-bottom: 0;
+}
+#demo-load-more .arcodesign-mobile-demo-content {
+  padding: 0;
+}

package/cjs/load-more/demo/style/mobile.less

@@ -0,0 +1,9 @@
+@import '../../../../style/mixin.less';
+
+#demo-load-more {
+    .use-var(color, font-color);
+    padding-bottom: 0;
+    .arcodesign-mobile-demo-content {
+        padding: 0;
+    }
+}

package/cjs/load-more/index.d.ts

@@ -0,0 +1,137 @@
+import React, { ReactNode } from 'react';
+export declare type LoadMoreStatus = 'before-ready' | 'prepare' | 'loading' | 'nomore' | 'retry';
+export interface LoadMoreProps {
+    /**
+     * 自定义样式
+     * @en Custom stylesheet
+     */
+    style?: React.CSSProperties;
+    /**
+     * 自定义类名
+     * @en Custom classname
+     */
+    className?: string;
+    /**
+     * 组件加载但尚未启用状态下的内容
+     * @en Content when the component is loaded but not yet enabled
+     * @default null
+     */
+    beforeReadyArea?: ReactNode;
+    /**
+     * 加载中状态下的内容
+     * @en Content in loading state
+     * @default "正在努力加载中..."
+     * @default_en "Trying to load..."
+     */
+    loadingArea?: ReactNode;
+    /**
+     * 无更多数据状态下的内容
+     * @en Content with no more data
+     * @default "没有更多数据了"
+     * @default_en "No more data"
+     */
+    noMoreArea?: ReactNode;
+    /**
+     * 准备加载状态下的内容
+     * @en Content in ready-to-load state
+     * @default "上拉/点击加载更多"
+     * @default_en "Pull up to load more" or "Click to load more"
+     */
+    prepareArea?: ReactNode;
+    /**
+     * 加载重试状态下的内容
+     * @en Load content in retry state
+     * @default "加载失败，点击重试"
+     * @default_en "failed to load, click to retry"
+     */
+    retryArea?: ReactNode;
+    /**
+     * 组件加载初始状态，传入 "before-ready" 则先加载组件但不请求数据
+     * @en The component is loaded in the initial state. Inputing in "before-ready" will load the component first without requesting data
+     * @default "prepare"
+     */
+    defaultStatus?: 'before-ready' | 'prepare';
+    /**
+     * 当前状态，传入则受控
+     * @en Current state, the component is controlledc  when it is input
+     */
+    status?: LoadMoreStatus;
+    /**
+     * 待计算滚动容器
+     * @en Scrolling container to be calculated
+     * @default () => window
+     */
+    getScrollContainer?: () => HTMLElement | Window | null;
+    /**
+     * 触发loading的时机，当为click时，点击后将触发getData
+     * @en The timing of triggering loading, when it is click, getData will be triggered after clicking
+     * @default "scroll"
+     */
+    trigger?: 'scroll' | 'click';
+    /**
+     * 滚动到离列表底部多远的位置触发getData，触发状态时机为'scroll'时有效
+     * @en Scroll to how far from the bottom of the list to trigger getData, valid when the trigger state timing is 'scroll'
+     * @default 200
+     */
+    threshold?: number;
+    /**
+     * 请求数据方法，可在异步任务结束后根据任务结果调用callback修改loadmore内部状态
+     * @en The request data method, after the asynchronous task ends, the callback can be called according to the task result to modify the internal state of loadmore
+     */
+    getData?: (callback: (status: LoadMoreStatus) => void) => void;
+    /**
+     * 节流粒度
+     * @en Throttle granularity
+     * @default 0
+     */
+    throttle?: number;
+    /**
+     * 是否在loading状态下不触发getData
+     * @en Whether to not trigger getData in the loading state
+     * @default true
+     */
+    blockWhenLoading?: boolean;
+    /**
+     * 刚加载好组件时是否自动先请求一次，trigger=scroll时有效
+     * @en Whether to automatically request once when the component is just loaded, valid when trigger=scroll
+     * @default true
+     */
+    getDataAtFirst?: boolean;
+    /**
+     * 状态改变时回调
+     * @en Callback when state changes
+     */
+    onStatusChange?: (status: LoadMoreStatus, scene?: string) => void;
+    /**
+     * 组件被点击时回调
+     * @en Callback when the component is clicked
+     */
+    onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    /**
+     * 滚动到(底部 - threshold)距离时触发
+     * @en Callback when scrolling to (bottom - threshold) distance
+     */
+    onEndReached?: () => void;
+}
+export interface LoadMoreRef {
+    /**
+     * 最外层元素 DOM
+     * @en The outermost element DOM
+     */
+    dom: HTMLDivElement | null;
+    /**
+     * 手动更改组件状态
+     * @en Change component state manually
+     */
+    changeStatus: (status: LoadMoreStatus, scene?: string) => void;
+}
+/**
+ * 上拉加载组件，支持`scroll`和`click`两种触发加载方式，支持滚动监听。支持受控与不受控两种形式。<br>如果引入组件后发现仅触发了初始的`getData`，请确认是否在`getData`方法内没有调用`callback`移除 loading 状态，且未设置`blockWhenLoading`属性为 false。
+ * @en Pull-up loading component, supports `scroll` and `click` two trigger loading methods, supports scroll monitoring. Both controlled and uncontrolled forms are supported. <br>If only the initial `getData` is triggered after the component is introduced, please make sure that the `callback` is not called in the `getData` method to remove the loading state, and the `blockWhenLoading` property is not set to false.
+ * @type 反馈
+ * @type_en Feedback
+ * @name 加载更多
+ * @name_en LoadMore
+ */
+declare const LoadMore: React.ForwardRefExoticComponent<LoadMoreProps & React.RefAttributes<LoadMoreRef>>;
+export default LoadMore;

package/cjs/load-more/index.js

@@ -0,0 +1,198 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _lodash = _interopRequireDefault(require("lodash.throttle"));
+
+var _mobileUtils = require("@arco-design/mobile-utils");
+
+var _contextProvider = require("../context-provider");
+
+var _helpers = require("../_helpers");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/**
+ * 上拉加载组件，支持`scroll`和`click`两种触发加载方式，支持滚动监听。支持受控与不受控两种形式。<br>如果引入组件后发现仅触发了初始的`getData`，请确认是否在`getData`方法内没有调用`callback`移除 loading 状态，且未设置`blockWhenLoading`属性为 false。
+ * @en Pull-up loading component, supports `scroll` and `click` two trigger loading methods, supports scroll monitoring. Both controlled and uncontrolled forms are supported. <br>If only the initial `getData` is triggered after the component is introduced, please make sure that the `callback` is not called in the `getData` method to remove the loading state, and the `blockWhenLoading` property is not set to false.
+ * @type 反馈
+ * @type_en Feedback
+ * @name 加载更多
+ * @name_en LoadMore
+ */
+var LoadMore = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var _props$className = props.className,
+      className = _props$className === void 0 ? '' : _props$className,
+      style = props.style,
+      beforeReadyArea = props.beforeReadyArea,
+      loadingArea = props.loadingArea,
+      noMoreArea = props.noMoreArea,
+      prepareArea = props.prepareArea,
+      retryArea = props.retryArea,
+      _props$defaultStatus = props.defaultStatus,
+      defaultStatus = _props$defaultStatus === void 0 ? 'prepare' : _props$defaultStatus,
+      status = props.status,
+      getScrollContainer = props.getScrollContainer,
+      _props$trigger = props.trigger,
+      trigger = _props$trigger === void 0 ? 'scroll' : _props$trigger,
+      _props$threshold = props.threshold,
+      threshold = _props$threshold === void 0 ? 200 : _props$threshold,
+      _props$throttle = props.throttle,
+      throttle = _props$throttle === void 0 ? 0 : _props$throttle,
+      _props$getDataAtFirst = props.getDataAtFirst,
+      getDataAtFirst = _props$getDataAtFirst === void 0 ? true : _props$getDataAtFirst,
+      getData = props.getData,
+      _props$blockWhenLoadi = props.blockWhenLoading,
+      blockWhenLoading = _props$blockWhenLoadi === void 0 ? true : _props$blockWhenLoadi,
+      onStatusChange = props.onStatusChange,
+      onClick = props.onClick,
+      onEndReached = props.onEndReached;
+  var domRef = (0, _react.useRef)(null);
+  var requestAtFirst = trigger === 'scroll' ? getDataAtFirst : false;
+
+  var _useState = (0, _react.useState)(defaultStatus),
+      innerStatus = _useState[0],
+      setInnerStatus = _useState[1];
+
+  var lastScrollEndRef = (0, _react.useRef)(false);
+  var nowStatus = status || innerStatus;
+  var statusRef = (0, _react.useRef)(nowStatus);
+  var changeStatus = (0, _react.useCallback)(function (st, scene) {
+    setInnerStatus(st);
+    onStatusChange && onStatusChange(st, scene);
+  }, [onStatusChange]);
+  var triggerGetData = (0, _react.useCallback)(function (scene) {
+    if (blockWhenLoading && statusRef.current === 'loading') {
+      return;
+    }
+
+    changeStatus('loading', scene);
+    getData == null ? void 0 : getData(function (st) {
+      lastScrollEndRef.current = false;
+      changeStatus(st, 'manual');
+    });
+  }, [blockWhenLoading, changeStatus, getData]);
+  (0, _react.useEffect)(function () {
+    statusRef.current = nowStatus;
+  }, [nowStatus]);
+  (0, _helpers.useUpdateEffect)(function () {
+    // 当状态被设置为 prepare ，且页面总长度不足一屏时，再触发一次 getData
+    // @en When the state is set to prepare and the total page length is less than one screen, trigger getData again
+    if (trigger === 'scroll' && nowStatus === 'prepare' && checkNeedTrigger(0, threshold)) {
+      triggerGetData('pageEnd');
+    }
+  }, [nowStatus]);
+  (0, _react.useEffect)(function () {
+    if (requestAtFirst) {
+      if (statusRef.current === 'prepare') {
+        triggerGetData('requestAtFirst');
+      }
+    }
+  }, [trigger]);
+  var handleContainerScroll = (0, _react.useCallback)(function () {
+    var scrollTop = (0, _mobileUtils.getScrollContainerAttribute)('scrollTop', getScrollContainer);
+
+    if (checkNeedTrigger(scrollTop, threshold + 1)) {
+      if (!lastScrollEndRef.current) {
+        lastScrollEndRef.current = true;
+        onEndReached && onEndReached();
+
+        if (!['nomore', 'retry', 'before-ready'].includes(statusRef.current)) {
+          triggerGetData('scrollEnd');
+        }
+      }
+    } else {
+      lastScrollEndRef.current = false;
+    }
+  }, [getScrollContainer, threshold, triggerGetData, onEndReached]);
+  (0, _react.useEffect)(function () {
+    var binded = null;
+    var scrollFunc = throttle ? (0, _lodash.default)(handleContainerScroll, throttle) : handleContainerScroll;
+
+    if (trigger === 'scroll') {
+      var container = (0, _mobileUtils.getValidScrollContainer)(getScrollContainer);
+
+      if (container) {
+        container.addEventListener('scroll', scrollFunc);
+        binded = container;
+      }
+    }
+
+    return function () {
+      if (binded) {
+        binded.removeEventListener('scroll', scrollFunc);
+      }
+    };
+  }, [trigger, getScrollContainer, handleContainerScroll, throttle]);
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      dom: domRef.current,
+      changeStatus: changeStatus
+    };
+  }, [changeStatus]);
+
+  function checkNeedTrigger(top, ths) {
+    var scrollHeight = (0, _mobileUtils.getScrollContainerAttribute)('scrollHeight', getScrollContainer);
+    var clientHeight = (0, _mobileUtils.getScrollContainerAttribute)('clientHeight', getScrollContainer);
+    return scrollHeight - top - clientHeight <= ths;
+  }
+
+  function handleClick(e) {
+    if (trigger === 'click' && statusRef.current === 'prepare' || statusRef.current === 'retry') {
+      triggerGetData('click');
+    }
+
+    onClick && onClick(e);
+  }
+
+  function renderArea(locale) {
+    switch (nowStatus) {
+      case 'before-ready':
+        return beforeReadyArea;
+
+      case 'prepare':
+        return prepareArea === void 0 ? /*#__PURE__*/_react.default.createElement("div", {
+          className: "load-more-text prepare"
+        }, trigger === 'scroll' ? locale.LoadMore.prepareScrollText : locale.LoadMore.prepareClickText, locale.LoadMore.loadMoreText) : prepareArea;
+
+      case 'loading':
+        return loadingArea === void 0 ? /*#__PURE__*/_react.default.createElement("div", {
+          className: "load-more-text loading"
+        }, locale.LoadMore.loadingText) : loadingArea;
+
+      case 'nomore':
+        return noMoreArea === void 0 ? /*#__PURE__*/_react.default.createElement("div", {
+          className: "load-more-text nomore"
+        }, locale.LoadMore.noDataText) : noMoreArea;
+
+      case 'retry':
+        return retryArea === void 0 ? /*#__PURE__*/_react.default.createElement("div", {
+          className: "load-more-text retry"
+        }, locale.LoadMore.failLoadText) : retryArea;
+
+      default:
+        return null;
+    }
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_contextProvider.ContextLayout, null, function (_ref) {
+    var prefixCls = _ref.prefixCls,
+        _ref$locale = _ref.locale,
+        locale = _ref$locale === void 0 ? _mobileUtils.defaultLocale : _ref$locale;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: prefixCls + "-load-more status-" + nowStatus + " " + className,
+      ref: domRef,
+      style: style,
+      onClick: handleClick
+    }, renderArea(locale));
+  });
+});
+var _default = LoadMore;
+exports.default = _default;

package/cjs/load-more/style/css/index.css

@@ -0,0 +1,5 @@
+.arco-load-more {
+  text-align: center;
+  font-size:  0.28rem ;
+  color:  #86909c ;
+}

package/cjs/load-more/style/css/index.d.ts

@@ -0,0 +1,2 @@
+import '../../../../style/css/public.css';
+import './index.css';

package/cjs/load-more/style/css/index.js

@@ -0,0 +1,5 @@
+"use strict";
+
+require("../../../../style/css/public.css");
+
+require("./index.css");

package/cjs/load-more/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../../style/public.less';
+import './index.less';

package/cjs/load-more/style/index.js

@@ -0,0 +1,5 @@
+"use strict";
+
+require("../../../style/public.less");
+
+require("./index.less");

package/cjs/load-more/style/index.less

@@ -0,0 +1,7 @@
+@import "../../../style/mixin.less";
+
+.@{prefix}-load-more {
+    text-align: center;
+    .use-var(font-size, load-more-font-size);
+    .use-var(color, load-more-text-color);
+}

package/cjs/loading/demo/style/css/mobile.css

@@ -0,0 +1,19 @@
+#demo-loading {
+  padding-bottom: 0.54rem;
+}
+#demo-loading .arcodesign-mobile-demo-content {
+  padding: 0.4rem 0.32rem;
+}
+#demo-loading .loading-demo-basic .arco-loading {
+  margin-right: 0.4rem;
+  vertical-align: middle;
+}
+#demo-loading .loading-demo-line {
+  height: 0.48rem;
+  position: relative;
+}
+#demo-loading .loading-demo-line .arco-loading {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}