@arco-design/mobile-react 2.29.4 → 2.29.6

package/dist/style.css

@@ -485,305 +485,204 @@ samp {
 }
 
 
-.arco-load-more {
-  text-align: center;
-  font-size:  0.28rem ;
-  color:  #86909c ;
-}
 
-.arco-cell {
-  color:  #86909c ;
-  font-size:  0.32rem ;
-  margin-left:  0.32rem ;
-  padding-right:  0.32rem ;
-}
-.arco-cell:not(:first-of-type).bordered {
-  position: relative;
-  border-width: 0;
+.arco-fade-enter {
+  opacity: 0;
 }
-.arco-cell:not(:first-of-type).bordered::before {
-  content: '';
-  width: 100%;
-  height: 1PX;
-  position: absolute;
-  left: 0;
-  top: 0;
-  z-index: 1;
-  border-top-style: solid;
-  border-top-width: 1PX;
-  border-top-color: #e5e6eb;
-  box-sizing: border-box;
-  transform-origin: left top;
-  -webkit-transform-origin: left top;
-  pointer-events: none;
-  border-radius: 0;
+.arco-fade-enter-active {
+  opacity: 1;
+  transition-property: opacity;
+  transition-duration:  300ms ;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
-  .arco-cell:not(:first-of-type).bordered::before {
-    transform: scaleY(0.5);
-    -webkit-transform: scaleY(0.5);
-    border-radius: 0;
-  }
+.arco-fade-exit {
+  opacity: 1;
 }
-@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
-  .arco-cell:not(:first-of-type).bordered::before {
-    transform: scaleY(0.33333333);
-    -webkit-transform: scaleY(0.33333333);
-    border-radius: 0;
-  }
+.arco-fade-exit-active {
+  opacity: 0;
+  transition-property: opacity;
+  transition-duration:  300ms ;
 }
-.arco-cell.without-group {
-  background-color:  #ffffff ;
-  padding-left:  0.32rem ;
-  margin-left: 0;
+.arco-fade-exit-done {
+  display: none;
 }
-.arco-cell.without-group.bordered {
+
+.arco-loading {
+  display: inline-block;
+  font-size: 0;
+  line-height: 0;
   position: relative;
-  border-width: 0;
 }
-.arco-cell.without-group.bordered::before {
-  content: '';
-  width: 100%;
-  height: 1PX;
-  position: absolute;
-  left: 0;
-  top: 0;
-  z-index: 1;
-  border-top-style: solid;
-  border-top-width: 1PX;
-  border-top-color: #e5e6eb;
-  box-sizing: border-box;
-  transform-origin: left top;
-  -webkit-transform-origin: left top;
-  pointer-events: none;
-  border-radius: 0;
+.arco-loading .bg-color-with-config {
+  background: #165dff;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
-  .arco-cell.without-group.bordered::before {
-    transform: scaleY(0.5);
-    -webkit-transform: scaleY(0.5);
-    border-radius: 0;
-  }
+.arco-loading .stop-color-with-config {
+  stop-color: #165dff;
 }
-@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
-  .arco-cell.without-group.bordered::before {
-    transform: scaleY(0.33333333);
-    -webkit-transform: scaleY(0.33333333);
-    border-radius: 0;
-  }
+.arco-loading .fill-color-with-config {
+  fill: #165dff;
 }
-.arco-cell.without-group.bordered::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;
+.arco-loading .stroke-color-with-config {
+  stroke: #165dff;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
-  .arco-cell.without-group.bordered::after {
-    transform: scaleY(0.5);
-    -webkit-transform: scaleY(0.5);
-    border-radius: 0;
+@keyframes changDeg {
+  0% {
+    transform: rotate(0deg);
   }
-}
-@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
-  .arco-cell.without-group.bordered::after {
-    transform: scaleY(0.33333333);
-    -webkit-transform: scaleY(0.33333333);
-    border-radius: 0;
+  100% {
+    transform: rotate(360deg);
   }
 }
-.arco-cell-inner {
-  display: flex;
-  align-items: center;
-  height:  1.08rem ;
+.arco-loading.circle,
+.arco-loading.arc,
+.arco-loading.spin {
+  animation: changDeg 1s infinite linear;
 }
-.arco-cell-inner.has-desc {
-  height:  1.48rem ;
+.arco-loading.circle .loading-circle-middle {
+  stop-opacity: 0.5;
 }
-.arco-cell .cell-label {
-  color:  #1d2129 ;
-  margin-right:  0.48rem ;
+.arco-loading.circle .loading-circle-end {
+  stop-opacity: 0;
 }
-[dir="rtl"] .arco-cell .cell-label {
-  margin-right: initial;
-  margin-left:  0.48rem ;
+.arco-loading.dot .dot-cell {
+  display: inline-block;
+  width:  6PX ;
+  height:  6PX ;
+  margin-left:  0.12rem ;
 }
-.arco-cell .cell-desc {
-  color:  #86909c ;
-  font-size:  0.28rem ;
-  margin-top:  0.04rem ;
+.arco-loading.dot .dot-cell:first-of-type {
+  margin-left: 0;
 }
-.arco-cell .cell-content {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  height: 100%;
+.arco-loading.dot .dot-cell.filleted {
+  border-radius: 50%;
 }
-.arco-cell .cell-content.has-label {
-  justify-content: flex-end;
+.arco-loading.spin {
+  height: 0.44rem;
+  width: 0.44rem;
+  position: relative;
 }
-.arco-cell .cell-content .cell-text {
-  width: 100%;
-  text-align: right;
-  font-size:  0.28rem ;
-  display: -webkit-box;
+.arco-loading.spin .spin-cell {
+  position: absolute;
+  left: 0.2rem;
+  top: 0.02rem;
+  display: inline-block;
+  height: 0.2rem;
+  padding-bottom: 0.08rem;
   overflow: hidden;
-  text-overflow: ellipsis;
-  -webkit-line-clamp: 2;
-  /* autoprefixer: ignore next */
-  -webkit-box-orient: vertical;
-  white-space: normal;
-}
-[dir="rtl"] .arco-cell .cell-content .cell-text {
-  text-align: left;
+  transform-origin: 50% bottom;
 }
-.arco-cell .cell-label-icon {
-  margin-right:  0.24rem ;
-  font-size: 0;
+.arco-loading.spin .spin-cell-inner {
+  display: inline-block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 200%;
+  transform: scale(0.5);
+  transform-origin: top left;
+  height: 0.24rem;
 }
-[dir="rtl"] .arco-cell .cell-label-icon {
-  margin-right: initial;
-  margin-left:  0.24rem ;
+.arco-loading.arc .arc-bg {
+  stroke:  #e5e6eb ;
 }
-.arco-cell .cell-label-icon .arco-icon {
-  line-height: initial;
-  font-size:  0.4rem ;
-  color:  #4e5969 ;
+.arco-loading.line {
+  width: 100%;
 }
-.arco-cell .cell-arrow-icon {
-  margin-left:  0.16rem ;
-  font-size: 0;
+.arco-loading.line .loading-line-start,
+.arco-loading.line .loading-line-end {
+  stop-color:  #165dff ;
 }
-[dir="rtl"] .arco-cell .cell-arrow-icon {
-  transform: scale(-1);
+.arco-loading.line .loading-line-start {
+  stop-opacity: 0;
 }
-[dir="rtl"] .arco-cell .cell-arrow-icon {
-  margin-left: initial;
-  margin-right:  0.16rem ;
+
+.arco-toast-wrapper {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1001;
+  display: flex;
+  justify-content: center;
+  padding:  0 0.32rem ;
 }
-.arco-cell .cell-arrow-icon .arco-icon {
-  font-size:  0.24rem ;
-  color:  #c9cdd4 ;
+.arco-toast-wrapper.no-event {
+  pointer-events: none;
 }
-.arco-cell .cell-arrow-icon .arrow-icon-svg {
-  width: 0.16rem;
+.arco-toast-wrapper.from-center {
+  align-items: center;
 }
-.arco-cell .cell-arrow-icon .arrow-icon-svg path {
-  fill:  #c9cdd4 ;
+.arco-toast-wrapper.from-top {
+  align-items: flex-start;
+  padding-top:  30% ;
 }
-.arco-cell .arco-input-wrap {
-  padding-left: 0;
+.arco-toast-wrapper.from-bottom {
+  align-items: flex-end;
+  padding-bottom:  30% ;
 }
-[dir="rtl"] .arco-cell .arco-input-wrap {
-  padding-left:  0.32rem ;
-  padding-right: 0;
+.arco-toast-inner {
+  background:  rgba(0, 0, 0, 0.8) ;
+  color:  #ffffff ;
+  font-size:  0.32rem ;
+  line-height:  0.48rem ;
+  border-radius:  0.08rem ;
+  flex-direction: column;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: initial;
 }
-.arco-cell-group .cell-group-header,
-.arco-cell-group .cell-group-footer {
-  color:  #86909c ;
-  font-size:  0.28rem ;
-  line-height:  0.4rem ;
-  padding:  0.24rem 0.32rem ;
+.arco-toast-inner.horizontal {
+  flex-direction: row;
+  padding:  0.16rem 0.32rem ;
 }
-.arco-cell-group .cell-group-body {
-  background-color:  #ffffff ;
+.arco-toast-inner.horizontal .arco-icon {
+  flex: 0 0 auto;
+  font-size:  0.32rem ;
 }
-.arco-cell-group .cell-group-body.bordered {
-  position: relative;
-  border-width: 0;
+.arco-toast-inner.horizontal .arco-toast-loading-wrapper + .arco-toast-content,
+.arco-toast-inner.horizontal .arco-icon + .arco-toast-content {
+  margin-left:  0.16rem ;
 }
-.arco-cell-group .cell-group-body.bordered::before {
-  content: '';
-  width: 100%;
-  height: 1PX;
-  position: absolute;
-  left: 0;
-  top: 0;
-  z-index: 1;
-  border-top-style: solid;
-  border-top-width: 1PX;
-  border-top-color: #e5e6eb;
-  box-sizing: border-box;
-  transform-origin: left top;
-  -webkit-transform-origin: left top;
-  pointer-events: none;
-  border-radius: 0;
+.arco-toast-inner.vertical {
+  padding:  0.32rem ;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
-  .arco-cell-group .cell-group-body.bordered::before {
-    transform: scaleY(0.5);
-    -webkit-transform: scaleY(0.5);
-    border-radius: 0;
-  }
+.arco-toast-inner.vertical .arco-icon {
+  font-size:  0.48rem ;
 }
-@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
-  .arco-cell-group .cell-group-body.bordered::before {
-    transform: scaleY(0.33333333);
-    -webkit-transform: scaleY(0.33333333);
-    border-radius: 0;
-  }
+.arco-toast-inner.vertical .arco-toast-loading-wrapper + .arco-toast-content,
+.arco-toast-inner.vertical .arco-icon + .arco-toast-content {
+  margin-top:  0.16rem ;
 }
-.arco-cell-group .cell-group-body.bordered::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;
+.arco-toast-inner .arco-loading .bg-color-with-config {
+  background: #ffffff;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
-  .arco-cell-group .cell-group-body.bordered::after {
-    transform: scaleY(0.5);
-    -webkit-transform: scaleY(0.5);
-    border-radius: 0;
-  }
+.arco-toast-inner .arco-loading .stop-color-with-config {
+  stop-color: #ffffff;
 }
-@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
-  .arco-cell-group .cell-group-body.bordered::after {
-    transform: scaleY(0.33333333);
-    -webkit-transform: scaleY(0.33333333);
-    border-radius: 0;
-  }
+.arco-toast-inner .arco-loading .fill-color-with-config {
+  fill: #ffffff;
 }
-
-.arco-fade-enter {
-  opacity: 0;
+.arco-toast-inner .arco-loading .stroke-color-with-config {
+  stroke: #ffffff;
 }
-.arco-fade-enter-active {
-  opacity: 1;
-  transition-property: opacity;
-  transition-duration:  300ms ;
+.arco-toast-inner .arco-loading.arc .arc-bg {
+  stroke:  #666666 ;
 }
-.arco-fade-exit {
-  opacity: 1;
+.arco-toast-loading-wrapper {
+  display: flex;
+  position: relative;
 }
-.arco-fade-exit-active {
-  opacity: 0;
-  transition-property: opacity;
-  transition-duration:  300ms ;
+.arco-toast-loading-inner {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size:  0.24rem ;
 }
-.arco-fade-exit-done {
-  display: none;
+.arco-toast-content {
+  width: 100%;
+  text-align: center;
+  white-space: pre-line;
 }
 
 .arco-masking-mask.pre-mount:not([class*="-enter"]):not([class*="-exit"]),
@@ -1013,113 +912,25 @@ samp {
     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-action-sheet-item:not(:last-child)::after {
-    transform: scaleY(0.33333333);
-    -webkit-transform: scaleY(0.33333333);
-    border-radius: 0;
-  }
-}
-.arco-action-sheet-item.disabled {
-  color:  #c9cdd4 ;
-}
-.arco-action-sheet-item.danger {
-  color:  #f53f3f ;
-}
-.arco-action-sheet-item.cancel-item {
-  border-top-style: solid;
-  border-top-color:  #F2F3F5 ;
-  border-top-width:  0.16rem ;
-}
-
-.arco-loading {
-  display: inline-block;
-  font-size: 0;
-  line-height: 0;
-  position: relative;
-}
-.arco-loading .bg-color-with-config {
-  background: #165dff;
-}
-.arco-loading .stop-color-with-config {
-  stop-color: #165dff;
-}
-.arco-loading .fill-color-with-config {
-  fill: #165dff;
-}
-.arco-loading .stroke-color-with-config {
-  stroke: #165dff;
-}
-@keyframes changDeg {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-.arco-loading.circle,
-.arco-loading.arc,
-.arco-loading.spin {
-  animation: changDeg 1s infinite linear;
-}
-.arco-loading.circle .loading-circle-middle {
-  stop-opacity: 0.5;
-}
-.arco-loading.circle .loading-circle-end {
-  stop-opacity: 0;
-}
-.arco-loading.dot .dot-cell {
-  display: inline-block;
-  width:  6PX ;
-  height:  6PX ;
-  margin-left:  0.12rem ;
-}
-.arco-loading.dot .dot-cell:first-of-type {
-  margin-left: 0;
-}
-.arco-loading.dot .dot-cell.filleted {
-  border-radius: 50%;
-}
-.arco-loading.spin {
-  height: 0.44rem;
-  width: 0.44rem;
-  position: relative;
-}
-.arco-loading.spin .spin-cell {
-  position: absolute;
-  left: 0.2rem;
-  top: 0.02rem;
-  display: inline-block;
-  height: 0.2rem;
-  padding-bottom: 0.08rem;
-  overflow: hidden;
-  transform-origin: 50% bottom;
-}
-.arco-loading.spin .spin-cell-inner {
-  display: inline-block;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 200%;
-  transform: scale(0.5);
-  transform-origin: top left;
-  height: 0.24rem;
+  }
 }
-.arco-loading.arc .arc-bg {
-  stroke:  #e5e6eb ;
+@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
+  .arco-action-sheet-item:not(:last-child)::after {
+    transform: scaleY(0.33333333);
+    -webkit-transform: scaleY(0.33333333);
+    border-radius: 0;
+  }
 }
-.arco-loading.line {
-  width: 100%;
+.arco-action-sheet-item.disabled {
+  color:  #c9cdd4 ;
 }
-.arco-loading.line .loading-line-start,
-.arco-loading.line .loading-line-end {
-  stop-color:  #165dff ;
+.arco-action-sheet-item.danger {
+  color:  #f53f3f ;
 }
-.arco-loading.line .loading-line-start {
-  stop-opacity: 0;
+.arco-action-sheet-item.cancel-item {
+  border-top-style: solid;
+  border-top-color:  #F2F3F5 ;
+  border-top-width:  0.16rem ;
 }
 
 .arco-image {
@@ -1895,80 +1706,355 @@ samp {
   margin: 0;
   margin-bottom:  0.16rem ;
 }
-.arco-carousel-indicator-vertical.pos-start {
-  top:  0.32rem ;
+.arco-carousel-indicator-vertical.pos-start {
+  top:  0.32rem ;
+}
+.arco-carousel-indicator-vertical.pos-center {
+  bottom: 50%;
+  transform: translate3d(0, 50%, 0);
+}
+.arco-carousel-indicator-vertical.pos-end {
+  bottom:  0.32rem ;
+}
+.arco-carousel-indicator-vertical.ver-pos-left {
+  left: auto;
+  right: auto;
+  left:  0.24rem ;
+}
+[dir="rtl"] .arco-carousel-indicator-vertical.ver-pos-left {
+  left: initial;
+  right:  0.24rem ;
+}
+.arco-carousel-indicator-vertical.ver-pos-right {
+  left: auto;
+  right: auto;
+  right:  0.24rem ;
+}
+[dir="rtl"] .arco-carousel-indicator-vertical.ver-pos-right {
+  right: initial;
+  left:  0.24rem ;
+}
+.arco-carousel-indicator.inverse .indicator {
+  background-color:  #e5e6eb ;
+}
+.arco-carousel-indicator.inverse .indicator.active {
+  background-color:  #165dff ;
+}
+.arco-carousel-indicator.outside {
+  position: relative;
+  left: 0;
+  transform: none;
+  bottom: 0;
+  padding:  0.16rem 0 0.1rem ;
+}
+.arco-carousel-indicator .indicator {
+  transition: all 0.2s;
+  background-color:  rgba(255, 255, 255, 0.5) ;
+}
+.arco-carousel-indicator .indicator.active {
+  background-color:  #ffffff ;
+}
+.arco-carousel-indicator-horizontal .indicator {
+  display: inline-block;
+  width:  0.24rem ;
+  height:  3PX ;
+}
+.arco-carousel-indicator-horizontal .indicator:not(:last-of-type) {
+  margin-right:  0.16rem ;
+}
+[dir="rtl"] .arco-carousel-indicator-horizontal .indicator:not(:last-of-type) {
+  margin-right: initial;
+  margin-left:  0.16rem ;
+}
+.arco-carousel-indicator .circle-indicator,
+.arco-carousel-indicator .indicator.type-circle {
+  width:  6PX ;
+  height:  6PX ;
+  border-radius: 50%;
+}
+.arco-carousel-indicator .circle-indicator:not(:last-of-type),
+.arco-carousel-indicator .indicator.type-circle:not(:last-of-type) {
+  margin-right:  0.16rem ;
+}
+[dir="rtl"] .arco-carousel-indicator .circle-indicator:not(:last-of-type),
+[dir="rtl"] .arco-carousel-indicator .indicator.type-circle:not(:last-of-type) {
+  margin-right: initial;
+  margin-left:  0.16rem ;
+}
+
+.arco-cell {
+  color:  #86909c ;
+  font-size:  0.32rem ;
+  margin-left:  0.32rem ;
+  padding-right:  0.32rem ;
+}
+.arco-cell:not(:first-of-type).bordered {
+  position: relative;
+  border-width: 0;
+}
+.arco-cell:not(:first-of-type).bordered::before {
+  content: '';
+  width: 100%;
+  height: 1PX;
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 1;
+  border-top-style: solid;
+  border-top-width: 1PX;
+  border-top-color: #e5e6eb;
+  box-sizing: border-box;
+  transform-origin: left top;
+  -webkit-transform-origin: left top;
+  pointer-events: none;
+  border-radius: 0;
+}
+@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
+  .arco-cell:not(:first-of-type).bordered::before {
+    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-cell:not(:first-of-type).bordered::before {
+    transform: scaleY(0.33333333);
+    -webkit-transform: scaleY(0.33333333);
+    border-radius: 0;
+  }
+}
+.arco-cell.without-group {
+  background-color:  #ffffff ;
+  padding-left:  0.32rem ;
+  margin-left: 0;
+}
+.arco-cell.without-group.bordered {
+  position: relative;
+  border-width: 0;
+}
+.arco-cell.without-group.bordered::before {
+  content: '';
+  width: 100%;
+  height: 1PX;
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 1;
+  border-top-style: solid;
+  border-top-width: 1PX;
+  border-top-color: #e5e6eb;
+  box-sizing: border-box;
+  transform-origin: left top;
+  -webkit-transform-origin: left top;
+  pointer-events: none;
+  border-radius: 0;
+}
+@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
+  .arco-cell.without-group.bordered::before {
+    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-cell.without-group.bordered::before {
+    transform: scaleY(0.33333333);
+    -webkit-transform: scaleY(0.33333333);
+    border-radius: 0;
+  }
+}
+.arco-cell.without-group.bordered::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-cell.without-group.bordered::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-cell.without-group.bordered::after {
+    transform: scaleY(0.33333333);
+    -webkit-transform: scaleY(0.33333333);
+    border-radius: 0;
+  }
+}
+.arco-cell-inner {
+  display: flex;
+  align-items: center;
+  height:  1.08rem ;
+}
+.arco-cell-inner.has-desc {
+  height:  1.48rem ;
+}
+.arco-cell .cell-label {
+  color:  #1d2129 ;
+  margin-right:  0.48rem ;
+}
+[dir="rtl"] .arco-cell .cell-label {
+  margin-right: initial;
+  margin-left:  0.48rem ;
+}
+.arco-cell .cell-desc {
+  color:  #86909c ;
+  font-size:  0.28rem ;
+  margin-top:  0.04rem ;
+}
+.arco-cell .cell-content {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  height: 100%;
+}
+.arco-cell .cell-content.has-label {
+  justify-content: flex-end;
+}
+.arco-cell .cell-content .cell-text {
+  width: 100%;
+  text-align: right;
+  font-size:  0.28rem ;
+  display: -webkit-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: 2;
+  /* autoprefixer: ignore next */
+  -webkit-box-orient: vertical;
+  white-space: normal;
+}
+[dir="rtl"] .arco-cell .cell-content .cell-text {
+  text-align: left;
+}
+.arco-cell .cell-label-icon {
+  margin-right:  0.24rem ;
+  font-size: 0;
 }
-.arco-carousel-indicator-vertical.pos-center {
-  bottom: 50%;
-  transform: translate3d(0, 50%, 0);
+[dir="rtl"] .arco-cell .cell-label-icon {
+  margin-right: initial;
+  margin-left:  0.24rem ;
 }
-.arco-carousel-indicator-vertical.pos-end {
-  bottom:  0.32rem ;
+.arco-cell .cell-label-icon .arco-icon {
+  line-height: initial;
+  font-size:  0.4rem ;
+  color:  #4e5969 ;
 }
-.arco-carousel-indicator-vertical.ver-pos-left {
-  left: auto;
-  right: auto;
-  left:  0.24rem ;
+.arco-cell .cell-arrow-icon {
+  margin-left:  0.16rem ;
+  font-size: 0;
 }
-[dir="rtl"] .arco-carousel-indicator-vertical.ver-pos-left {
-  left: initial;
-  right:  0.24rem ;
+[dir="rtl"] .arco-cell .cell-arrow-icon {
+  transform: scale(-1);
 }
-.arco-carousel-indicator-vertical.ver-pos-right {
-  left: auto;
-  right: auto;
-  right:  0.24rem ;
+[dir="rtl"] .arco-cell .cell-arrow-icon {
+  margin-left: initial;
+  margin-right:  0.16rem ;
 }
-[dir="rtl"] .arco-carousel-indicator-vertical.ver-pos-right {
-  right: initial;
-  left:  0.24rem ;
+.arco-cell .cell-arrow-icon .arco-icon {
+  font-size:  0.24rem ;
+  color:  #c9cdd4 ;
 }
-.arco-carousel-indicator.inverse .indicator {
-  background-color:  #e5e6eb ;
+.arco-cell .cell-arrow-icon .arrow-icon-svg {
+  width: 0.16rem;
 }
-.arco-carousel-indicator.inverse .indicator.active {
-  background-color:  #165dff ;
+.arco-cell .cell-arrow-icon .arrow-icon-svg path {
+  fill:  #c9cdd4 ;
 }
-.arco-carousel-indicator.outside {
-  position: relative;
-  left: 0;
-  transform: none;
-  bottom: 0;
-  padding:  0.16rem 0 0.1rem ;
+.arco-cell .arco-input-wrap {
+  padding-left: 0;
 }
-.arco-carousel-indicator .indicator {
-  transition: all 0.2s;
-  background-color:  rgba(255, 255, 255, 0.5) ;
+[dir="rtl"] .arco-cell .arco-input-wrap {
+  padding-left:  0.32rem ;
+  padding-right: 0;
 }
-.arco-carousel-indicator .indicator.active {
+.arco-cell-group .cell-group-header,
+.arco-cell-group .cell-group-footer {
+  color:  #86909c ;
+  font-size:  0.28rem ;
+  line-height:  0.4rem ;
+  padding:  0.24rem 0.32rem ;
+}
+.arco-cell-group .cell-group-body {
   background-color:  #ffffff ;
 }
-.arco-carousel-indicator-horizontal .indicator {
-  display: inline-block;
-  width:  0.24rem ;
-  height:  3PX ;
+.arco-cell-group .cell-group-body.bordered {
+  position: relative;
+  border-width: 0;
 }
-.arco-carousel-indicator-horizontal .indicator:not(:last-of-type) {
-  margin-right:  0.16rem ;
+.arco-cell-group .cell-group-body.bordered::before {
+  content: '';
+  width: 100%;
+  height: 1PX;
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 1;
+  border-top-style: solid;
+  border-top-width: 1PX;
+  border-top-color: #e5e6eb;
+  box-sizing: border-box;
+  transform-origin: left top;
+  -webkit-transform-origin: left top;
+  pointer-events: none;
+  border-radius: 0;
 }
-[dir="rtl"] .arco-carousel-indicator-horizontal .indicator:not(:last-of-type) {
-  margin-right: initial;
-  margin-left:  0.16rem ;
+@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
+  .arco-cell-group .cell-group-body.bordered::before {
+    transform: scaleY(0.5);
+    -webkit-transform: scaleY(0.5);
+    border-radius: 0;
+  }
 }
-.arco-carousel-indicator .circle-indicator,
-.arco-carousel-indicator .indicator.type-circle {
-  width:  6PX ;
-  height:  6PX ;
-  border-radius: 50%;
+@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
+  .arco-cell-group .cell-group-body.bordered::before {
+    transform: scaleY(0.33333333);
+    -webkit-transform: scaleY(0.33333333);
+    border-radius: 0;
+  }
 }
-.arco-carousel-indicator .circle-indicator:not(:last-of-type),
-.arco-carousel-indicator .indicator.type-circle:not(:last-of-type) {
-  margin-right:  0.16rem ;
+.arco-cell-group .cell-group-body.bordered::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;
 }
-[dir="rtl"] .arco-carousel-indicator .circle-indicator:not(:last-of-type),
-[dir="rtl"] .arco-carousel-indicator .indicator.type-circle:not(:last-of-type) {
-  margin-right: initial;
-  margin-left:  0.16rem ;
+@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
+  .arco-cell-group .cell-group-body.bordered::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-cell-group .cell-group-body.bordered::after {
+    transform: scaleY(0.33333333);
+    -webkit-transform: scaleY(0.33333333);
+    border-radius: 0;
+  }
 }
 
 .arco-checkbox {
@@ -3668,6 +3754,12 @@ samp {
   display: none;
 }
 
+.arco-load-more {
+  text-align: center;
+  font-size:  0.28rem ;
+  color:  #86909c ;
+}
+
 .arco-nav-bar {
   position: relative;
   width: 100%;
@@ -4404,7 +4496,6 @@ samp {
   transition:  all 240ms cubic-bezier(0.34, 0.69, 0.1, 1) ;
 }
 
-
 .arco-progress.progress-fixed {
   position: fixed;
   width: 100%;
@@ -4544,7 +4635,6 @@ samp {
   overflow-y: auto;
 }
 .arco-pull-refresh-place {
-  will-change: transform;
   position: relative;
   height: 100%;
 }
@@ -4814,6 +4904,7 @@ samp {
   color:  #165dff ;
 }
 
+
 .arco-skeleton {
   position: relative;
   color:  rgba(255, 255, 255, 0.6) ;
@@ -4933,7 +5024,6 @@ samp {
   }
 }
 
-
 .arco-slider {
   position: relative;
   display: flex;
@@ -6011,94 +6101,3 @@ samp {
 .arco-input-container .statistic-text.exceed {
   color:  #f53f3f ;
 }
-
-.arco-toast-wrapper {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 1001;
-  display: flex;
-  justify-content: center;
-  padding:  0 0.32rem ;
-}
-.arco-toast-wrapper.no-event {
-  pointer-events: none;
-}
-.arco-toast-wrapper.from-center {
-  align-items: center;
-}
-.arco-toast-wrapper.from-top {
-  align-items: flex-start;
-  padding-top:  30% ;
-}
-.arco-toast-wrapper.from-bottom {
-  align-items: flex-end;
-  padding-bottom:  30% ;
-}
-.arco-toast-inner {
-  background:  rgba(0, 0, 0, 0.8) ;
-  color:  #ffffff ;
-  font-size:  0.32rem ;
-  line-height:  0.48rem ;
-  border-radius:  0.08rem ;
-  flex-direction: column;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  pointer-events: initial;
-}
-.arco-toast-inner.horizontal {
-  flex-direction: row;
-  padding:  0.16rem 0.32rem ;
-}
-.arco-toast-inner.horizontal .arco-icon {
-  flex: 0 0 auto;
-  font-size:  0.32rem ;
-}
-.arco-toast-inner.horizontal .arco-toast-loading-wrapper + .arco-toast-content,
-.arco-toast-inner.horizontal .arco-icon + .arco-toast-content {
-  margin-left:  0.16rem ;
-}
-.arco-toast-inner.vertical {
-  padding:  0.32rem ;
-}
-.arco-toast-inner.vertical .arco-icon {
-  font-size:  0.48rem ;
-}
-.arco-toast-inner.vertical .arco-toast-loading-wrapper + .arco-toast-content,
-.arco-toast-inner.vertical .arco-icon + .arco-toast-content {
-  margin-top:  0.16rem ;
-}
-.arco-toast-inner .arco-loading .bg-color-with-config {
-  background: #ffffff;
-}
-.arco-toast-inner .arco-loading .stop-color-with-config {
-  stop-color: #ffffff;
-}
-.arco-toast-inner .arco-loading .fill-color-with-config {
-  fill: #ffffff;
-}
-.arco-toast-inner .arco-loading .stroke-color-with-config {
-  stroke: #ffffff;
-}
-.arco-toast-inner .arco-loading.arc .arc-bg {
-  stroke:  #666666 ;
-}
-.arco-toast-loading-wrapper {
-  display: flex;
-  position: relative;
-}
-.arco-toast-loading-inner {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  font-size:  0.24rem ;
-}
-.arco-toast-content {
-  width: 100%;
-  text-align: center;
-  white-space: pre-line;
-}