@arco-design/mobile-react 2.24.2 → 2.25.0

package/dist/style.css

@@ -312,7 +312,7 @@ samp {
   color:  #c9cdd4 ;
 }
 .arco-action-sheet-item.danger {
-  color:  #ee4d38 ;
+  color:  #f53f3f ;
 }
 .arco-action-sheet-item.cancel-item {
   border-top-style: solid;
@@ -693,7 +693,7 @@ samp {
   display: inline-block;
   z-index: 2;
   color:  #FFFFFF ;
-  background-color:  #F53F3F ;
+  background-color:  #f53f3f ;
   white-space: nowrap;
   border-radius:  100PX ;
   height:  16PX ;
@@ -2963,6 +2963,293 @@ samp {
   display: none;
 }
 
+.arco-form-item {
+  display: flex;
+  align-items: flex-start;
+  border-top: 1px solid var(--form-item-border-divider-color);
+}
+.arco-form-item:first-child {
+  border: none;
+}
+.arco-form-label-item {
+  display: flex;
+  position: relative;
+  align-items: center;
+  justify-content: flex-start;
+  font-size:  0.32rem ;
+  line-height:  1.08rem ;
+  color:  #1d2129 ;
+  padding-right:  0.32rem ;
+  width:  1.92rem ;
+}
+.arco-form-label-item-required-asterisk {
+  position: absolute;
+  left: -0.6em;
+  top: 0;
+  font-size:  0.32rem ;
+  line-height:  1.08rem ;
+  color:  #f53f3f ;
+}
+.disabled .arco-form-label-item {
+  color:  #c9cdd4 ;
+}
+.arco-form-item-control {
+  padding: 16px 0;
+}
+.arco-form-item-control .arco-input-wrap,
+.arco-form-item-control .arco-input {
+  padding: 0;
+}
+.arco-form-item-control-wrapper {
+  width: 100%;
+  flex: 1;
+  position: relative;
+}
+.arco-form-item-control-wrapper .arco-input-wrap {
+  height:  0.44rem ;
+}
+.arco-form-item-message {
+  font-size: 0.24rem;
+  color:  #f53f3f ;
+  margin-top: -0.1rem;
+  margin-bottom: 16px;
+}
+.arco-form-item-message svg,
+.arco-form-item-message span {
+  vertical-align: middle;
+}
+.arco-form-item-message svg {
+  margin-right: 0.08rem;
+}
+.arco-form-item-error-message {
+  color:  #f53f3f ;
+}
+.arco-form-item-warning-message {
+  color:  #ff7d00 ;
+}
+.arco-form-item.arco-form-item-vertical {
+  display: block;
+}
+.arco-form-item.arco-form-item-vertical .arco-input-wrap {
+  padding-left: 0;
+}
+.arco-form-item.arco-form-item-vertical .arco-form-label-item {
+  width: auto;
+  margin-top: 16px;
+  height:  0.32rem ;
+  line-height:  0.32rem ;
+}
+.arco-form-item.arco-form-item-vertical .arco-form-label-item-required-asterisk {
+  height:  0.32rem ;
+  line-height:  0.32rem ;
+}
+
+.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:  #f53f3f ;
+}
+.disabled .arco-input-label {
+  color:  #c9cdd4 ;
+}
+.arco-input-wrap {
+  position: relative;
+  height:  1.08rem ;
+  padding: 0 0.32rem ;
+  display: flex;
+  align-items: center;
+}
+.arco-input-wrap textarea,
+.arco-input-wrap input {
+  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;
+  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 ;
+  align-items: center;
+  justify-content: center;
+  display: flex;
+}
+.arco-input-prefix {
+  padding-right:  0.48rem ;
+}
+.arco-input-clear,
+.arco-input-suffix {
+  padding-left:  0.32rem ;
+}
+.arco-input-clear {
+  color:  #c9cdd4 ;
+  font-size:  16PX ;
+}
+.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::-moz-placeholder {
+  color:  #c9cdd4 ;
+}
+.arco-input::placeholder {
+  color:  #c9cdd4 ;
+}
+.arco-input::-webkit-search-cancel-button {
+  display: none;
+}
+
+.arco-textarea {
+  display: inline-block;
+  width: 100%;
+  height: 100%;
+  resize: none;
+  font-size:  0.32rem ;
+  line-height:  0.44rem ;
+  caret-color:  #165dff ;
+}
+.arco-textarea::-moz-placeholder {
+  color:  #c9cdd4 ;
+}
+.arco-textarea::placeholder {
+  color:  #c9cdd4 ;
+}
+.arco-textarea.fake-textarea {
+  position: fixed;
+  bottom: 100%;
+  left: 0;
+  visibility: hidden;
+}
+.arco-input-container .statistic-text {
+  position: absolute;
+  bottom: 0.32rem;
+  right: 0.32rem;
+  font-size:  0.28rem ;
+  color:  #86909c ;
+}
+.arco-input-container .statistic-text.exceed {
+  color:  #f53f3f ;
+}
+
+.arco-radio {
+  display: inline-flex;
+  align-items: center;
+}
+.arco-radio .radio-icon {
+  display: inline-flex;
+  align-items: center;
+  font-size:  20PX ;
+  color:  #c2c6cc ;
+}
+.arco-radio .radio-icon.checked {
+  color:  #165dff ;
+}
+.arco-radio .radio-icon.disabled {
+  color:  #f7f8fa ;
+}
+.arco-radio .radio-icon.checked.disabled {
+  color:  rgba(51, 112, 255, 0.5) ;
+}
+.arco-radio .radio-text {
+  font-size:  0.32rem ;
+  color:  #1d2129 ;
+}
+.arco-radio .radio-icon + .radio-text {
+  margin-left:  0.16rem ;
+}
+.arco-radio.disabled .radio-text {
+  opacity:  0.5 ;
+}
+.arco-radio.block {
+  width: 100%;
+}
+.arco-radio.justify {
+  width: 100%;
+  justify-content: space-between;
+}
+.arco-radio-group .arco-radio:not(:last-child, .block) {
+  margin-right:  0.48rem ;
+}
+
 .arco-grid {
   width: 100%;
   display: flex;
@@ -3047,7 +3334,6 @@ samp {
   /* Chrome Safari */
 }
 
-
 .arco-image-picker {
   font-size:  0.28rem ;
 }
@@ -3163,332 +3449,485 @@ samp {
   pointer-events: none;
 }
 
-.arco-image-preview,
-.image-preview-lock-modal {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 1000;
-}
-.image-preview-lock-modal {
-  transform: translateZ(2PX);
+.arco-rate {
+  display: inline-flex;
 }
-.arco-image-preview {
-  background:  rgba(0, 0, 0, 0.9) ;
+.arco-rate.disabled {
+  cursor: not-allowed;
 }
-.arco-image-preview.noselect {
-  -webkit-touch-callout: none;
-  /* iOS Safari */
-  -webkit-user-select: none;
-  /* Chrome/Safari/Opera */
-  /* Konqueror */
-  -moz-user-select: none;
-  /* Firefox */
-  /* Internet Explorer/Edge */
-  user-select: none;
-  /* Non-prefixed version, currently*/
+.arco-rate-icon-wrap {
+  padding:  6PX ;
+  font-size:  24PX ;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
 }
-.arco-image-preview .preview-image-wrap {
-  width: 100%;
-  height: 100%;
+.arco-rate-icon-wrap.active,
+.arco-rate-icon.active,
+.arco-rate-icon-wrap.half-active,
+.arco-rate-icon.half-active {
+  color:  #FFB400 ;
 }
-.arco-image-preview .arco-carousel-wrap,
-.arco-image-preview .arco-carousel,
-.arco-image-preview .arco-carousel-inner {
-  height: 100%;
+.arco-rate-icon-wrap.active.disabled,
+.arco-rate-icon.active.disabled,
+.arco-rate-icon-wrap.half-active.disabled,
+.arco-rate-icon.half-active.disabled {
+  color:  #C9CDD4 ;
 }
-.arco-image-preview .carousel-item {
-  overflow: hidden;
+.arco-rate-icon-wrap.normal,
+.arco-rate-icon.normal {
+  color:  #E5E6EB ;
 }
-.arco-image-preview .carousel-item::-webkit-scrollbar {
-  display: none;
+.arco-rate-icon.half-active {
+  position: absolute;
+  z-index: 1;
 }
-.arco-image-preview .preview-image {
-  width: 100%;
+.arco-rate-icon-click-half {
+  width: 50%;
   height: 100%;
-  will-change: transform;
+  display: inline-block;
+  position: absolute;
+  z-index: 2;
 }
-.arco-image-preview .preview-image.preview-hidden {
-  pointer-events: none;
+.arco-rate-icon-click-half.left {
+  left: 0;
 }
-.arco-image-preview .preview-image.preview-hidden .image-container {
-  visibility: hidden;
+.arco-rate-icon-click-half.right {
+  right: 0;
 }
-.arco-image-preview .preview-image .image-bottom-overlap {
-  overflow: visible;
+
+.arco-slider {
+  position: relative;
+  display: flex;
+  padding:  0.22rem 0.32rem ;
 }
-.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:  linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.3)) ;
+.arco-slider.is-vertical {
+  flex-direction: column;
 }
-.image-preview-fake-rect {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  opacity: 0;
+.arco-slider.is-horizontal.show-marks {
+  padding-bottom:  0.7rem ;
 }
-.image-preview-fake-trans-image {
-  position: fixed;
-  left: 0;
-  top: 0;
-  -o-object-fit: cover;
-     object-fit: cover;
-  transition:  all cubic-bezier(0.34, 0.69, 0.1, 1) ;
-  will-change: transform;
-  pointer-events: none;
-  z-index: 1001;
+.arco-slider-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  flex: 1;
 }
-.image-preview-loading-area {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 1010;
+.is-vertical .arco-slider-wrapper {
+  flex-direction: column;
+}
+.arco-slider-label {
   display: flex;
   align-items: center;
-  justify-content: center;
-  pointer-events: none;
+  font-size:  0.32rem ;
+  color:  #86909c ;
 }
-.image-preview-loading-area .loading-icon .bg-color-with-config {
-  background: #ffffff;
+.is-horizontal .arco-slider-label {
+  margin-right:  0.24rem ;
 }
-.image-preview-loading-area .loading-icon .stop-color-with-config {
-  stop-color: #ffffff;
+.is-vertical .arco-slider-label {
+  flex-direction: column;
+  margin-bottom:  0.24rem ;
 }
-.image-preview-loading-area .loading-icon .fill-color-with-config {
-  fill: #ffffff;
+.is-horizontal .arco-slider-wrapper + .arco-slider-label {
+  margin-right: 0;
+  margin-left:  0.24rem ;
 }
-.image-preview-loading-area .loading-icon .stroke-color-with-config {
-  stroke: #ffffff;
+.is-vertical .arco-slider-wrapper + .arco-slider-label {
+  margin-bottom: 0;
+  margin-top:  0.24rem ;
 }
-
-.arco-input-container {
-  width: 100%;
-  color:  #1d2129 ;
+.arco-slider-line {
   position: relative;
+  display: flex;
+  flex: 1;
+  border-radius:  0.08rem ;
+  background:  #e5e6eb ;
 }
-.arco-input-container .arco-input-label {
-  min-width:  1.28rem ;
+.arco-slider-line:not(.is-activated)::before {
+  position: absolute;
+  content: "";
+  width: 100%;
+  height: 100%;
 }
-.arco-input-label {
-  padding-top: 1PX;
+.is-horizontal .arco-slider-line:not(.is-activated)::before {
+  top: -50%;
+  transform: translateY(-50%);
+  padding:  0.3rem 0;
 }
-.arco-input-label.required::before {
-  content: "* ";
-  color:  #ee4d38 ;
+.is-vertical .arco-slider-line:not(.is-activated)::before {
+  left: -50%;
+  transform: translateX(-50%);
+  padding: 0 0.3rem ;
 }
-.disabled .arco-input-label {
-  color:  #c9cdd4 ;
+.arco-slider-line.is-activated {
+  position: absolute;
+  background:  #165dff ;
 }
-.arco-input-wrap {
-  position: relative;
-  height:  1.08rem ;
-  padding: 0 0.32rem ;
+.is-disabled .arco-slider-line.is-activated {
+  background:  #94bfff ;
+}
+.arco-slider-thumb {
+  width:  0.48rem ;
+  height:  0.48rem ;
+  background:  #ffffff ;
+  box-shadow:  0 2PX 8PX rgba(0, 0, 0, 0.1) ;
+  border-radius:  50% ;
+}
+.arco-slider-thumb-wrapper {
+  position: absolute;
   display: flex;
+  width: -moz-fit-content;
+  width: fit-content;
+  height: -moz-fit-content;
+  height: fit-content;
+  margin: auto;
   align-items: center;
 }
-.arco-input-wrap textarea,
-.arco-input-wrap input {
-  flex: 1;
-  background: transparent;
-}
-.arco-input-wrap textarea:disabled,
-.arco-input-wrap input:disabled {
-  color:  #c9cdd4 ;
-  -webkit-text-fill-color:  #c9cdd4 ;
-  opacity: 1;
+.is-vertical .arco-slider-thumb-wrapper {
+  left: 1PX;
+  right: 0;
 }
-.arco-input-wrap.textarea {
-  height: auto;
-  align-items: flex-start;
-  padding:  0.32rem ;
+.is-vertical .arco-slider-thumb-wrapper.is-end {
+  top: 0;
+  transform: translate(-50%, -50%);
 }
-.arco-input-wrap.textarea.has-stat {
-  padding:  0.32rem 0.32rem 0.88rem ;
+.is-vertical .arco-slider-thumb-wrapper.is-start {
+  bottom: 0;
+  transform: translate(-50%, 50%);
 }
-.arco-input-wrap.border-all {
-  box-shadow: 0 0 0 1PX #e5e6eb inset;
+.is-horizontal .arco-slider-thumb-wrapper {
+  top: 0;
+  bottom: 0;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
-  .arco-input-wrap.border-all {
-    box-shadow: 0 0 0 0.5PX #e5e6eb inset;
-  }
+.is-horizontal .arco-slider-thumb-wrapper.is-end {
+  right: 0;
+  transform: translateX(50%);
 }
-.ios .arco-input-wrap.border-all,
-.arco-input-wrap.border-all.ios {
-  box-shadow: none;
-  border: 0.5PX solid #e5e6eb;
+.is-horizontal .arco-slider-thumb-wrapper.is-start {
+  left: 0;
+  transform: translateX(-50%);
 }
-.arco-input-wrap.border-half {
-  box-shadow: 0 1PX 0 0 #e5e6eb inset;
-  box-shadow: 0 -1PX 0 0 #e5e6eb inset;
+.arco-slider-popover-wrapper .arco-slider-thumb {
+  position: relative;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
-  .arco-input-wrap.border-half {
-    box-shadow: 0 0.5PX 0 0 #e5e6eb inset;
-  }
+.arco-slider-popover {
+  position: absolute;
+  width: -moz-max-content;
+  width: max-content;
+  color:  #fff ;
+  font-size:  0.24rem ;
+  line-height:  0.34rem ;
 }
-.ios .arco-input-wrap.border-half,
-.arco-input-wrap.border-half.ios {
-  box-shadow: none;
-  border-top: 0.5PX solid #e5e6eb;
+.is-horizontal .arco-slider-popover {
+  bottom: 100%;
+  margin-bottom:  0.28rem ;
+  left: 50%;
+  transform: translateX(-50%);
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
-  .arco-input-wrap.border-half {
-    box-shadow: 0 -0.5PX 0 0 #e5e6eb inset;
-  }
+.is-vertical .arco-slider-popover {
+  left: 100%;
+  margin-left:  0.28rem ;
+  top: 50%;
+  transform: translateY(-50%);
 }
-.ios .arco-input-wrap.border-half,
-.arco-input-wrap.border-half.ios {
-  box-shadow: none;
-  border-bottom: 0.5PX solid #e5e6eb;
+.arco-slider-popover.no-content {
+  display: none;
 }
-.arco-input-wrap.border-bottom {
-  box-shadow: 0 -1PX 0 0 #e5e6eb inset;
+.arco-slider-popover-wrapper {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
-  .arco-input-wrap.border-bottom {
-    box-shadow: 0 -0.5PX 0 0 #e5e6eb inset;
-  }
+.arco-slider-popover-content {
+  position: relative;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  border-radius:  4PX ;
+  padding:  0.16rem 0.24rem ;
+  z-index: 2;
+  background-color:  #000000 ;
 }
-.ios .arco-input-wrap.border-bottom,
-.arco-input-wrap.border-bottom.ios {
-  box-shadow: none;
-  border-bottom: 0.5PX solid #e5e6eb;
+.android .arco-slider-popover-content {
+  padding:  0.2rem 0.24rem 0.12rem ;
 }
-.arco-input-prefix,
-.arco-input-suffix,
-.arco-input-clear {
-  font-size:  0.32rem ;
-  line-height:  0.44rem ;
-  align-items: center;
-  justify-content: center;
-  display: flex;
+.arco-slider-popover-content p {
+  white-space: normal;
+  word-break: break-all;
+  text-align: left;
+  font-size:  0.28rem ;
+  line-height:  0.4rem ;
 }
-.arco-input-prefix {
-  padding-right:  0.48rem ;
+.arco-slider-popover-arrow {
+  position: absolute;
+  margin: auto;
+  width: 0;
+  height: 0;
+  border-width:  6PX ;
+  border-style: solid;
+  border-color: transparent;
 }
-.arco-input-clear,
-.arco-input-suffix {
-  padding-left:  0.32rem ;
+.is-horizontal .arco-slider-popover-arrow {
+  transform: translateY(100%);
+  bottom: 0;
+  left: 0;
+  right: 0;
+  border-top-color:  #000000 ;
 }
-.arco-input-clear {
-  color:  #c9cdd4 ;
-  font-size:  16PX ;
+.is-vertical .arco-slider-popover-arrow {
+  border-right-color:  #000000 ;
+  transform: translateX(-100%);
+  left: 0;
+  top: 0;
+  bottom: 0;
 }
-.arco-input {
-  display: inline-block;
+.arco-slider-marks {
+  position: absolute;
   width: 100%;
   height: 100%;
-  font-size:  0.32rem ;
-  line-height:  0.44rem ;
-  caret-color:  #165dff ;
-  padding:  0.24rem 0;
-  color:  #1d2129 ;
+  flex: 1;
 }
-.arco-input::-moz-placeholder {
-  color:  #c9cdd4 ;
+.arco-slider-marks-item {
+  position: absolute;
+  margin: auto;
+  width:  6PX ;
+  height:  6PX ;
+  border-radius:  50% ;
+  background:  #e5e6eb ;
+  transform: translateX(-50%);
 }
-.arco-input::placeholder {
-  color:  #c9cdd4 ;
+.arco-slider-marks-item.is-activated {
+  background:  #165dff ;
 }
-.arco-input::-webkit-search-cancel-button {
-  display: none;
+.is-vertical .arco-slider-marks-item {
+  left: 0;
+  right: 0;
 }
-
-.arco-load-more {
-  text-align: center;
+.is-horizontal .arco-slider-marks-item {
+  top: 0;
+  bottom: 0;
+}
+.arco-slider-marks-item-label {
+  position: absolute;
   font-size:  0.28rem ;
+  line-height:  0.4rem ;
   color:  #86909c ;
 }
-
-.arco-nav-bar {
-  position: relative;
-  width: 100%;
-  box-sizing: content-box;
-  color:  #1d2129 ;
-  background:  #ffffff ;
+.is-horizontal .arco-slider-marks-item-label {
+  left: 50%;
+  top:  0.38rem ;
+  transform: translateX(-50%);
 }
-.arco-nav-bar.arco-nav-bar-fixed {
-  height:  0.88rem ;
+.is-vertical .arco-slider-marks-item-label {
+  top: 50%;
+  right:  0.26rem ;
+  transform: translateY(-50%);
 }
-.arco-nav-bar.arco-nav-bar-float {
+.arco-slider .is-transferable {
+  transition: all 0.3s;
+}
+.arco-slider .arco-fade-enter-active,
+.arco-slider .arco-fade-enter-done {
+  opacity:  0.8 ;
+}
+
+
+.arco-image-preview,
+.image-preview-lock-modal {
   position: fixed;
   top: 0;
   left: 0;
+  width: 100%;
+  height: 100%;
   z-index: 1000;
 }
-.arco-nav-bar.arco-nav-bar-float:not(.arco-nav-bar-hide) .arco-nav-bar-wrapper-fixed {
-  position: absolute;
+.image-preview-lock-modal {
+  transform: translateZ(2PX);
 }
-.arco-nav-bar.arco-nav-bar-hide .arco-nav-bar-title,
-.arco-nav-bar.arco-nav-bar-hide .arco-nav-bar-right {
-  visibility: hidden;
+.arco-image-preview {
+  background:  rgba(0, 0, 0, 0.9) ;
 }
-.arco-nav-bar.arco-nav-bar-hide .arco-nav-bar-wrapper-border::after {
-  border-color: transparent;
+.arco-image-preview.noselect {
+  -webkit-touch-callout: none;
+  /* iOS Safari */
+  -webkit-user-select: none;
+  /* Chrome/Safari/Opera */
+  /* Konqueror */
+  -moz-user-select: none;
+  /* Firefox */
+  /* Internet Explorer/Edge */
+  user-select: none;
+  /* Non-prefixed version, currently*/
 }
-.arco-nav-bar-wrapper {
-  background: inherit;
-  height:  0.88rem ;
-  box-sizing: content-box;
+.arco-image-preview .preview-image-wrap-container,
+.arco-image-preview .preview-image-wrap {
   width: 100%;
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: 100% 100%;
-  transition: all 0.1s linear;
+  height: 100%;
 }
-.arco-nav-bar-wrapper.arco-nav-bar-wrapper-border {
-  position: relative;
-  border-width: 0;
+.arco-image-preview .arco-carousel-wrap,
+.arco-image-preview .arco-carousel,
+.arco-image-preview .arco-carousel-inner {
+  height: 100%;
 }
-.arco-nav-bar-wrapper.arco-nav-bar-wrapper-border::after {
-  content: '';
+.arco-image-preview .carousel-item {
+  overflow: hidden;
+}
+.arco-image-preview .carousel-item::-webkit-scrollbar {
+  display: none;
+}
+.arco-image-preview .preview-image {
   width: 100%;
-  height: 1PX;
-  position: absolute;
-  left: 0;
-  bottom: 0;
-  z-index: 1;
-  border-bottom-style: solid;
-  border-bottom-width: 1PX;
-  border-bottom-color: #e5e6eb;
-  box-sizing: border-box;
-  transform-origin: left bottom;
-  -webkit-transform-origin: left bottom;
+  height: 100%;
+  will-change: transform;
+}
+.arco-image-preview .preview-image.preview-hidden {
   pointer-events: none;
-  border-radius: 0;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
-  .arco-nav-bar-wrapper.arco-nav-bar-wrapper-border::after {
-    transform: scaleY(0.5);
-    -webkit-transform: scaleY(0.5);
-    border-radius: 0;
-  }
+.arco-image-preview .preview-image.preview-hidden .image-container {
+  visibility: hidden;
 }
-@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
-  .arco-nav-bar-wrapper.arco-nav-bar-wrapper-border::after {
-    transform: scaleY(0.33333333);
-    -webkit-transform: scaleY(0.33333333);
-    border-radius: 0;
-  }
+.arco-image-preview .preview-image .image-bottom-overlap {
+  overflow: visible;
 }
-.arco-nav-bar-wrapper.arco-nav-bar-wrapper-fixed {
-  position: fixed !important;
-  top: 0;
+.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:  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;
+  -o-object-fit: cover;
+     object-fit: cover;
+  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: flex;
+  align-items: 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;
+}
+
+.arco-load-more {
+  text-align: center;
+  font-size:  0.28rem ;
+  color:  #86909c ;
+}
+
+.arco-nav-bar {
+  position: relative;
+  width: 100%;
+  box-sizing: content-box;
+  color:  #1d2129 ;
+  background:  #ffffff ;
+}
+.arco-nav-bar.arco-nav-bar-fixed {
+  height:  0.88rem ;
+}
+.arco-nav-bar.arco-nav-bar-float {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1000;
+}
+.arco-nav-bar.arco-nav-bar-float:not(.arco-nav-bar-hide) .arco-nav-bar-wrapper-fixed {
+  position: absolute;
+}
+.arco-nav-bar.arco-nav-bar-hide .arco-nav-bar-title,
+.arco-nav-bar.arco-nav-bar-hide .arco-nav-bar-right {
+  visibility: hidden;
+}
+.arco-nav-bar.arco-nav-bar-hide .arco-nav-bar-wrapper-border::after {
+  border-color: transparent;
+}
+.arco-nav-bar-wrapper {
+  background: inherit;
+  height:  0.88rem ;
+  box-sizing: content-box;
+  width: 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  transition: all 0.1s linear;
+}
+.arco-nav-bar-wrapper.arco-nav-bar-wrapper-border {
+  position: relative;
+  border-width: 0;
+}
+.arco-nav-bar-wrapper.arco-nav-bar-wrapper-border::after {
+  content: '';
+  width: 100%;
+  height: 1PX;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  z-index: 1;
+  border-bottom-style: solid;
+  border-bottom-width: 1PX;
+  border-bottom-color: #e5e6eb;
+  box-sizing: border-box;
+  transform-origin: left bottom;
+  -webkit-transform-origin: left bottom;
+  pointer-events: none;
+  border-radius: 0;
+}
+@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
+  .arco-nav-bar-wrapper.arco-nav-bar-wrapper-border::after {
+    transform: scaleY(0.5);
+    -webkit-transform: scaleY(0.5);
+    border-radius: 0;
+  }
+}
+@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
+  .arco-nav-bar-wrapper.arco-nav-bar-wrapper-border::after {
+    transform: scaleY(0.33333333);
+    -webkit-transform: scaleY(0.33333333);
+    border-radius: 0;
+  }
+}
+.arco-nav-bar-wrapper.arco-nav-bar-wrapper-fixed {
+  position: fixed !important;
+  top: 0;
   left: 0;
   z-index: 100;
 }
@@ -3676,10 +4115,10 @@ samp {
   background:  #00B42A ;
 }
 .arco-notify-error {
-  background:  #F53F3F ;
+  background:  #f53f3f ;
 }
 .arco-notify-warn {
-  background:  #FF7D00 ;
+  background:  #ff7d00 ;
 }
 .arco-notify-content-transition-Y0 {
   transform: translateY(0);
@@ -4149,492 +4588,167 @@ samp {
   display: flex;
   align-items: center;
   background-color:  #F2F3F5 ;
-  height:  4PX ;
-}
-.arco-progress .progress-wrapper .progress-track.position-innerLeft {
-  height:  18PX ;
-}
-.arco-progress .progress-wrapper .progress-track.nav-mode {
-  background-color:  transparent ;
-  height:  2PX ;
-}
-.arco-progress .progress-wrapper .progress-bar {
-  height: 100%;
-  position: relative;
-  background-color:  #165dff ;
-}
-.arco-progress .progress-wrapper .progress-bar .wrapper {
-  position: absolute;
-  right: 0;
-  top: 50%;
-  transform: translateY(-50%);
-}
-.arco-progress .progress-wrapper .filleted {
-  border-radius: 100PX;
-}
-.arco-progress .progress-wrapper .text {
-  font-size:  0.28rem ;
-  margin-left:  0.16rem ;
-  color:  #165dff ;
-}
-.arco-progress .progress-wrapper .text-left {
-  margin-left: 0;
-  margin-right:  0.16rem ;
-}
-.arco-progress .progress-wrapper .text-innerLeft {
-  position: absolute;
-  z-index: 1;
-  color:  #FFFFFF ;
-}
-.arco-progress .progress-wrapper .text-center {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  z-index: 1;
-  transform: translate(-50%, -50%);
-  color:  #FFFFFF ;
-}
-.arco-progress .progress-wrapper .text-follow {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width:  0.72rem ;
-  height:  0.4rem ;
-  border-radius:  0.4rem ;
-  font-size:  0.26rem ;
-  color:  #FFFFFF ;
-  background-color:  #165dff ;
-}
-.arco-progress .progress-wrapper .track-color {
-  background-color:  #F2F3F5 ;
-}
-.arco-progress .progress-wrapper .color {
-  stroke:  #165dff ;
-  color:  #165dff ;
-}
-.arco-progress .progress-wrapper .bar-disabled {
-  background-color:  #c9cdd4 ;
-}
-.arco-progress .progress-wrapper .text-disabled {
-  color:  #86909C ;
-}
-.arco-progress .progress-wrapper .inner-disabled {
-  color:  #FFFFFF ;
-}
-.arco-progress .progress-wrapper .inner-disabled.inner-block-disabled {
-  background-color:  #c9cdd4 ;
-}
-
-.arco-pull-refresh {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  overflow-y: auto;
-  -webkit-overflow-scrolling: touch;
-}
-.arco-pull-refresh::-webkit-scrollbar {
-  display: none;
-}
-.arco-pull-refresh.is-disabled,
-.arco-pull-refresh-content,
-.arco-pull-refresh-content-wrapper {
-  background:  #ffffff ;
-}
-.arco-pull-refresh-content {
-  min-height: 100%;
-}
-.arco-pull-refresh.is-ios .arco-pull-refresh-content-wrapper {
-  list-style-type: none;
-  padding: 0;
-  padding-bottom: 1PX;
-  margin: 0;
-  min-height: 100%;
-  box-sizing: content-box;
-  transform: translateZ(0);
-}
-.arco-pull-refresh-label {
-  position: absolute;
-  display: flex;
-  width: 100%;
-  height: -moz-fit-content;
-  height: fit-content;
-  justify-content: center;
-  align-items: center;
-  z-index: -1;
-  font-size:  0.24rem ;
-  background:  #f7f8fa ;
-}
-.arco-pull-refresh-label-wrapper {
-  position: absolute;
-  left: 0;
-  width: 100%;
-  overflow-y: auto;
-}
-.arco-pull-refresh-place {
-  will-change: transform;
-  position: relative;
-  height: 100%;
-}
-.arco-pull-refresh-label-text {
-  display: flex;
-  font-size: 0.28rem;
-  line-height: 0.88rem;
-  color:  #787878 ;
-  align-items: center;
-}
-.arco-pull-refresh-label-text .bg-color-with-config {
-  background: #86909c;
-}
-.arco-pull-refresh-label-text .stop-color-with-config {
-  stop-color: #86909c;
-}
-.arco-pull-refresh-label-text .fill-color-with-config {
-  fill: #86909c;
-}
-.arco-pull-refresh-label-text .stroke-color-with-config {
-  stroke: #86909c;
-}
-.arco-pull-refresh-label-text .arco-loading + span {
-  margin-left: 0.2rem;
-}
-.arco-pull-refresh.is-android .arco-pull-refresh-label {
-  top: 0;
-  transform: translateY(-100%);
-}
-.arco-pull-refresh.is-ios .arco-pull-refresh-label {
-  position: absolute;
-  bottom: 0;
-  overflow-y: auto;
-  font-size: 0.28rem;
-}
-.arco-pull-refresh.is-ios .arco-pull-refresh-label-wrapper {
-  will-change: height;
-  z-index: -1;
-}
-
-.arco-radio {
-  display: inline-flex;
-  align-items: center;
-}
-.arco-radio .radio-icon {
-  display: inline-flex;
-  align-items: center;
-  font-size:  20PX ;
-  color:  #c2c6cc ;
-}
-.arco-radio .radio-icon.checked {
-  color:  #165dff ;
-}
-.arco-radio .radio-icon.disabled {
-  color:  #f7f8fa ;
-}
-.arco-radio .radio-icon.checked.disabled {
-  color:  rgba(51, 112, 255, 0.5) ;
-}
-.arco-radio .radio-text {
-  font-size:  0.32rem ;
-  color:  #1d2129 ;
-}
-.arco-radio .radio-icon + .radio-text {
-  margin-left:  0.16rem ;
-}
-.arco-radio.disabled .radio-text {
-  opacity:  0.5 ;
-}
-.arco-radio.block {
-  width: 100%;
-}
-.arco-radio.justify {
-  width: 100%;
-  justify-content: space-between;
-}
-.arco-radio-group .arco-radio:not(:last-child, .block) {
-  margin-right:  0.48rem ;
-}
-
-.arco-rate {
-  display: inline-flex;
-}
-.arco-rate.disabled {
-  cursor: not-allowed;
-}
-.arco-rate-icon-wrap {
-  padding:  6PX ;
-  font-size:  24PX ;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-}
-.arco-rate-icon-wrap.active,
-.arco-rate-icon.active,
-.arco-rate-icon-wrap.half-active,
-.arco-rate-icon.half-active {
-  color:  #FFB400 ;
-}
-.arco-rate-icon-wrap.active.disabled,
-.arco-rate-icon.active.disabled,
-.arco-rate-icon-wrap.half-active.disabled,
-.arco-rate-icon.half-active.disabled {
-  color:  #C9CDD4 ;
-}
-.arco-rate-icon-wrap.normal,
-.arco-rate-icon.normal {
-  color:  #E5E6EB ;
-}
-.arco-rate-icon.half-active {
-  position: absolute;
-  z-index: 1;
-}
-.arco-rate-icon-click-half {
-  width: 50%;
-  height: 100%;
-  display: inline-block;
-  position: absolute;
-  z-index: 2;
-}
-.arco-rate-icon-click-half.left {
-  left: 0;
-}
-.arco-rate-icon-click-half.right {
-  right: 0;
-}
-
-.arco-slider {
-  position: relative;
-  display: flex;
-  padding:  0.22rem 0.32rem ;
-}
-.arco-slider.is-vertical {
-  flex-direction: column;
-}
-.arco-slider.is-horizontal.show-marks {
-  padding-bottom:  0.7rem ;
-}
-.arco-slider-wrapper {
-  position: relative;
-  display: flex;
-  align-items: center;
-  flex: 1;
-}
-.is-vertical .arco-slider-wrapper {
-  flex-direction: column;
-}
-.arco-slider-label {
-  display: flex;
-  align-items: center;
-  font-size:  0.32rem ;
-  color:  #86909c ;
-}
-.is-horizontal .arco-slider-label {
-  margin-right:  0.24rem ;
-}
-.is-vertical .arco-slider-label {
-  flex-direction: column;
-  margin-bottom:  0.24rem ;
-}
-.is-horizontal .arco-slider-wrapper + .arco-slider-label {
-  margin-right: 0;
-  margin-left:  0.24rem ;
-}
-.is-vertical .arco-slider-wrapper + .arco-slider-label {
-  margin-bottom: 0;
-  margin-top:  0.24rem ;
-}
-.arco-slider-line {
-  position: relative;
-  display: flex;
-  flex: 1;
-  border-radius:  0.08rem ;
-  background:  #e5e6eb ;
-}
-.arco-slider-line:not(.is-activated)::before {
-  position: absolute;
-  content: "";
-  width: 100%;
-  height: 100%;
-}
-.is-horizontal .arco-slider-line:not(.is-activated)::before {
-  top: -50%;
-  transform: translateY(-50%);
-  padding:  0.3rem 0;
-}
-.is-vertical .arco-slider-line:not(.is-activated)::before {
-  left: -50%;
-  transform: translateX(-50%);
-  padding: 0 0.3rem ;
-}
-.arco-slider-line.is-activated {
-  position: absolute;
-  background:  #165dff ;
-}
-.is-disabled .arco-slider-line.is-activated {
-  background:  #94bfff ;
-}
-.arco-slider-thumb {
-  width:  0.48rem ;
-  height:  0.48rem ;
-  background:  #ffffff ;
-  box-shadow:  0 2PX 8PX rgba(0, 0, 0, 0.1) ;
-  border-radius:  50% ;
-}
-.arco-slider-thumb-wrapper {
-  position: absolute;
-  display: flex;
-  width: -moz-fit-content;
-  width: fit-content;
-  height: -moz-fit-content;
-  height: fit-content;
-  margin: auto;
-  align-items: center;
-}
-.is-vertical .arco-slider-thumb-wrapper {
-  left: 1PX;
-  right: 0;
-}
-.is-vertical .arco-slider-thumb-wrapper.is-end {
-  top: 0;
-  transform: translate(-50%, -50%);
-}
-.is-vertical .arco-slider-thumb-wrapper.is-start {
-  bottom: 0;
-  transform: translate(-50%, 50%);
-}
-.is-horizontal .arco-slider-thumb-wrapper {
-  top: 0;
-  bottom: 0;
+  height:  4PX ;
 }
-.is-horizontal .arco-slider-thumb-wrapper.is-end {
-  right: 0;
-  transform: translateX(50%);
+.arco-progress .progress-wrapper .progress-track.position-innerLeft {
+  height:  18PX ;
 }
-.is-horizontal .arco-slider-thumb-wrapper.is-start {
-  left: 0;
-  transform: translateX(-50%);
+.arco-progress .progress-wrapper .progress-track.nav-mode {
+  background-color:  transparent ;
+  height:  2PX ;
 }
-.arco-slider-popover-wrapper .arco-slider-thumb {
+.arco-progress .progress-wrapper .progress-bar {
+  height: 100%;
   position: relative;
+  background-color:  #165dff ;
 }
-.arco-slider-popover {
+.arco-progress .progress-wrapper .progress-bar .wrapper {
   position: absolute;
-  width: -moz-max-content;
-  width: max-content;
-  color:  #fff ;
-  font-size:  0.24rem ;
-  line-height:  0.34rem ;
-}
-.is-horizontal .arco-slider-popover {
-  bottom: 100%;
-  margin-bottom:  0.28rem ;
-  left: 50%;
-  transform: translateX(-50%);
-}
-.is-vertical .arco-slider-popover {
-  left: 100%;
-  margin-left:  0.28rem ;
+  right: 0;
   top: 50%;
   transform: translateY(-50%);
 }
-.arco-slider-popover.no-content {
-  display: none;
+.arco-progress .progress-wrapper .filleted {
+  border-radius: 100PX;
 }
-.arco-slider-popover-wrapper {
+.arco-progress .progress-wrapper .text {
+  font-size:  0.28rem ;
+  margin-left:  0.16rem ;
+  color:  #165dff ;
+}
+.arco-progress .progress-wrapper .text-left {
+  margin-left: 0;
+  margin-right:  0.16rem ;
+}
+.arco-progress .progress-wrapper .text-innerLeft {
+  position: absolute;
+  z-index: 1;
+  color:  #FFFFFF ;
+}
+.arco-progress .progress-wrapper .text-center {
   position: absolute;
   left: 50%;
-  transform: translateX(-50%);
+  top: 50%;
+  z-index: 1;
+  transform: translate(-50%, -50%);
+  color:  #FFFFFF ;
 }
-.arco-slider-popover-content {
+.arco-progress .progress-wrapper .text-follow {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width:  0.72rem ;
+  height:  0.4rem ;
+  border-radius:  0.4rem ;
+  font-size:  0.26rem ;
+  color:  #FFFFFF ;
+  background-color:  #165dff ;
+}
+.arco-progress .progress-wrapper .track-color {
+  background-color:  #F2F3F5 ;
+}
+.arco-progress .progress-wrapper .color {
+  stroke:  #165dff ;
+  color:  #165dff ;
+}
+.arco-progress .progress-wrapper .bar-disabled {
+  background-color:  #c9cdd4 ;
+}
+.arco-progress .progress-wrapper .text-disabled {
+  color:  #86909C ;
+}
+.arco-progress .progress-wrapper .inner-disabled {
+  color:  #FFFFFF ;
+}
+.arco-progress .progress-wrapper .inner-disabled.inner-block-disabled {
+  background-color:  #c9cdd4 ;
+}
+
+.arco-pull-refresh {
   position: relative;
-  left: 0;
-  top: 0;
   width: 100%;
   height: 100%;
-  border-radius:  4PX ;
-  padding:  0.16rem 0.24rem ;
-  z-index: 2;
-  background-color:  #000000 ;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
 }
-.android .arco-slider-popover-content {
-  padding:  0.2rem 0.24rem 0.12rem ;
+.arco-pull-refresh::-webkit-scrollbar {
+  display: none;
 }
-.arco-slider-popover-content p {
-  white-space: normal;
-  word-break: break-all;
-  text-align: left;
-  font-size:  0.28rem ;
-  line-height:  0.4rem ;
+.arco-pull-refresh.is-disabled,
+.arco-pull-refresh-content,
+.arco-pull-refresh-content-wrapper {
+  background:  #ffffff ;
 }
-.arco-slider-popover-arrow {
-  position: absolute;
-  margin: auto;
-  width: 0;
-  height: 0;
-  border-width:  6PX ;
-  border-style: solid;
-  border-color: transparent;
+.arco-pull-refresh-content {
+  min-height: 100%;
 }
-.is-horizontal .arco-slider-popover-arrow {
-  transform: translateY(100%);
-  bottom: 0;
-  left: 0;
-  right: 0;
-  border-top-color:  #000000 ;
+.arco-pull-refresh.is-ios .arco-pull-refresh-content-wrapper {
+  list-style-type: none;
+  padding: 0;
+  padding-bottom: 1PX;
+  margin: 0;
+  min-height: 100%;
+  box-sizing: content-box;
+  transform: translateZ(0);
 }
-.is-vertical .arco-slider-popover-arrow {
-  border-right-color:  #000000 ;
-  transform: translateX(-100%);
-  left: 0;
-  top: 0;
-  bottom: 0;
+.arco-pull-refresh-label {
+  position: absolute;
+  display: flex;
+  width: 100%;
+  height: -moz-fit-content;
+  height: fit-content;
+  justify-content: center;
+  align-items: center;
+  z-index: -1;
+  font-size:  0.24rem ;
+  background:  #f7f8fa ;
 }
-.arco-slider-marks {
+.arco-pull-refresh-label-wrapper {
   position: absolute;
+  left: 0;
   width: 100%;
+  overflow-y: auto;
+}
+.arco-pull-refresh-place {
+  will-change: transform;
+  position: relative;
   height: 100%;
-  flex: 1;
 }
-.arco-slider-marks-item {
-  position: absolute;
-  margin: auto;
-  width:  6PX ;
-  height:  6PX ;
-  border-radius:  50% ;
-  background:  #e5e6eb ;
-  transform: translateX(-50%);
+.arco-pull-refresh-label-text {
+  display: flex;
+  font-size: 0.28rem;
+  line-height: 0.88rem;
+  color:  #787878 ;
+  align-items: center;
 }
-.arco-slider-marks-item.is-activated {
-  background:  #165dff ;
+.arco-pull-refresh-label-text .bg-color-with-config {
+  background: #86909c;
 }
-.is-vertical .arco-slider-marks-item {
-  left: 0;
-  right: 0;
+.arco-pull-refresh-label-text .stop-color-with-config {
+  stop-color: #86909c;
 }
-.is-horizontal .arco-slider-marks-item {
-  top: 0;
-  bottom: 0;
+.arco-pull-refresh-label-text .fill-color-with-config {
+  fill: #86909c;
 }
-.arco-slider-marks-item-label {
-  position: absolute;
-  font-size:  0.28rem ;
-  line-height:  0.4rem ;
-  color:  #86909c ;
+.arco-pull-refresh-label-text .stroke-color-with-config {
+  stroke: #86909c;
 }
-.is-horizontal .arco-slider-marks-item-label {
-  left: 50%;
-  top:  0.38rem ;
-  transform: translateX(-50%);
+.arco-pull-refresh-label-text .arco-loading + span {
+  margin-left: 0.2rem;
 }
-.is-vertical .arco-slider-marks-item-label {
-  top: 50%;
-  right:  0.26rem ;
-  transform: translateY(-50%);
+.arco-pull-refresh.is-android .arco-pull-refresh-label {
+  top: 0;
+  transform: translateY(-100%);
 }
-.arco-slider .is-transferable {
-  transition: all 0.3s;
+.arco-pull-refresh.is-ios .arco-pull-refresh-label {
+  position: absolute;
+  bottom: 0;
+  overflow-y: auto;
+  font-size: 0.28rem;
 }
-.arco-slider .arco-fade-enter-active,
-.arco-slider .arco-fade-enter-done {
-  opacity:  0.8 ;
+.arco-pull-refresh.is-ios .arco-pull-refresh-label-wrapper {
+  will-change: height;
+  z-index: -1;
 }
 
 .arco-search-bar-container {
@@ -4955,7 +5069,7 @@ samp {
   background:  #F2F3F5 ;
 }
 .number.error .arco-steps-item-icon {
-  background:  #F53F3F ;
+  background:  #f53f3f ;
 }
 .arco-steps-item-icon svg {
   font-size:  10PX ;
@@ -5023,7 +5137,7 @@ samp {
   color:  #1d2129 ;
 }
 .error .arco-steps-item-title {
-  color:  #F53F3F ;
+  color:  #f53f3f ;
 }
 .process .arco-steps-item-title {
   color:  #165dff ;
@@ -5375,35 +5489,3 @@ samp {
   background:  #fafbfc ;
   color:  #939aa3 ;
 }
-
-.arco-textarea {
-  display: inline-block;
-  width: 100%;
-  height: 100%;
-  resize: none;
-  font-size:  0.32rem ;
-  line-height:  0.44rem ;
-  caret-color:  #165dff ;
-}
-.arco-textarea::-moz-placeholder {
-  color:  #c9cdd4 ;
-}
-.arco-textarea::placeholder {
-  color:  #c9cdd4 ;
-}
-.arco-textarea.fake-textarea {
-  position: fixed;
-  bottom: 100%;
-  left: 0;
-  visibility: hidden;
-}
-.arco-input-container .statistic-text {
-  position: absolute;
-  bottom: 0.32rem;
-  right: 0.32rem;
-  font-size:  0.28rem ;
-  color:  #86909c ;
-}
-.arco-input-container .statistic-text.exceed {
-  color:  #ee4d38 ;
-}