@arco-design/mobile-react 2.19.1 → 2.21.0

package/dist/style.css

@@ -731,28 +731,28 @@ samp {
   min-width: 8PX;
   padding: 0 4PX ;
 }
-.arco-badge .badge-text {
+.arco-badge-text {
   display: block;
   font-weight: 500;
   font-size: 12PX;
 }
-.arco-badge.dot {
+.arco-badge-dot {
   width:  8PX ;
   height:  8PX ;
   padding: 0;
   min-width: auto;
 }
-.arco-badge.bordered {
+.arco-badge-bordered {
   border: 1PX solid #FFFFFF ;
 }
-.arco-badge.absolute {
+.arco-badge-absolute {
   position: absolute;
   top: 0;
   left: 100%;
   margin-left:  -8PX ;
   margin-top:  -8PX ;
 }
-.arco-badge.absolute.dot {
+.arco-badge-absolute.arco-badge-dot {
   margin-left:  -4PX ;
   margin-top:  -4PX ;
 }
@@ -815,7 +815,8 @@ samp {
 }
 .arco-image .image-container.static-label,
 .arco-image .image-container.loaded,
-.arco-image .image-container.error {
+.arco-image .image-container.error,
+.arco-image .image-container.has-loaded {
   opacity: 1;
 }
 .arco-image .image-container.animate {
@@ -898,73 +899,6 @@ samp {
   stroke: #e6e8eb;
 }
 
-.arco-avatar-wrapper {
-  display: inline-block;
-}
-.arco-avatar-wrapper.with-info.ultra-small {
-  height:  1.12rem ;
-}
-.arco-avatar-wrapper.ultra-small .arco-avatar-name {
-  font-size:  0.26rem ;
-  line-height:  0.36rem ;
-}
-.arco-avatar-wrapper.ultra-small .arco-avatar-desc {
-  margin-top:  0.04rem ;
-  font-size:  0.2rem ;
-  line-height:  0.28rem ;
-}
-.arco-avatar-wrapper.with-info.smaller {
-  height:  1.28rem ;
-}
-.arco-avatar-wrapper.smaller .arco-avatar-name {
-  font-size:  0.28rem ;
-  line-height:  0.4rem ;
-}
-.arco-avatar-wrapper.smaller .arco-avatar-desc {
-  margin-top:  0 ;
-  font-size:  0.24rem ;
-  line-height:  0.32rem ;
-}
-.arco-avatar-wrapper.with-info.small {
-  height:  1.6rem ;
-}
-.arco-avatar-wrapper.small .arco-avatar-name {
-  font-size:  0.32rem ;
-  line-height:  0.48rem ;
-}
-.arco-avatar-wrapper.small .arco-avatar-desc {
-  margin-top:  0 ;
-  font-size:  0.24rem ;
-  line-height:  0.32rem ;
-}
-.arco-avatar-wrapper.with-info.medium {
-  height:  1.6rem ;
-}
-.arco-avatar-wrapper.medium .arco-avatar-name {
-  font-size:  0.36rem ;
-  line-height:  0.52rem ;
-}
-.arco-avatar-wrapper.medium .arco-avatar-desc {
-  margin-top:  0.04rem ;
-  font-size:  0.28rem ;
-  line-height:  0.4rem ;
-}
-.arco-avatar-wrapper.with-info.large {
-  height:  1.76rem ;
-}
-.arco-avatar-wrapper.large .arco-avatar-name {
-  font-size:  0.36rem ;
-  line-height:  0.52rem ;
-}
-.arco-avatar-wrapper.large .arco-avatar-desc {
-  margin-top:  0.04rem ;
-  font-size:  0.28rem ;
-  line-height:  0.4rem ;
-}
-.arco-avatar-wrapper.with-info {
-  display: flex;
-  align-items: center;
-}
 .arco-avatar {
   position: relative;
   font-size: 0;
@@ -974,104 +908,134 @@ samp {
   color:  #fff ;
   background-color:  #4080FF ;
 }
-.arco-avatar.arco-image-avatar {
+.arco-avatar-mode-image {
   background-color: transparent;
 }
-.arco-avatar.default-overlap {
+.arco-avatar-default-overlap {
   background-color:  #c9cdd4 ;
 }
-.arco-avatar.circle {
+.arco-avatar-shape-circle {
   border-radius: 50%;
 }
-.arco-avatar.circle .arco-avatar-img .image-content {
+.arco-avatar-shape-circle .arco-avatar-img .image-content {
   border-radius: 50%;
 }
-.arco-avatar.square {
+.arco-avatar-shape-square {
   border-radius: 0.08rem;
 }
-.arco-avatar.square .arco-avatar-img .image-content {
+.arco-avatar-shape-square .arco-avatar-img .image-content {
   border-radius: 0.08rem;
 }
-.arco-avatar.group-ultra-small .arco-avatar-wrapper {
-  margin-left:  -0.16rem ;
-}
-.arco-avatar.group-ultra-small .arco-avatar {
-  border-width:  0.02rem ;
-}
-.arco-avatar.ultra-small {
+.arco-avatar-size-ultra-small {
   width:  0.48rem ;
   height:  0.48rem ;
 }
-.arco-avatar.ultra-small .arco-avatar-default {
+.arco-avatar-default-icon-size-ultra-small {
   font-size:  0.24rem ;
 }
-.arco-avatar.ultra-small .arco-avatar-text {
+.arco-avatar-text-size-ultra-small {
   font-size:  0.2rem ;
 }
-.arco-avatar.group-smaller .arco-avatar-wrapper {
-  margin-left:  -0.16rem ;
+.arco-avatar-wrapper-with-info-size-ultra-small {
+  height:  1.12rem ;
 }
-.arco-avatar.group-smaller .arco-avatar {
-  border-width:  0.02rem ;
+.arco-avatar-name-size-ultra-small {
+  font-size:  0.26rem ;
+  line-height:  0.36rem ;
+}
+.arco-avatar-desc-size-ultra-small {
+  margin-top:  0.04rem ;
+  font-size:  0.2rem ;
+  line-height:  0.28rem ;
 }
-.arco-avatar.smaller {
+.arco-avatar-size-smaller {
   width:  0.64rem ;
   height:  0.64rem ;
 }
-.arco-avatar.smaller .arco-avatar-default {
+.arco-avatar-default-icon-size-smaller {
   font-size:  0.32rem ;
 }
-.arco-avatar.smaller .arco-avatar-text {
+.arco-avatar-text-size-smaller {
   font-size:  0.24rem ;
 }
-.arco-avatar.group-small .arco-avatar-wrapper {
-  margin-left:  -0.24rem ;
+.arco-avatar-wrapper-with-info-size-smaller {
+  height:  1.28rem ;
 }
-.arco-avatar.group-small .arco-avatar {
-  border-width:  0.03rem ;
+.arco-avatar-name-size-smaller {
+  font-size:  0.28rem ;
+  line-height:  0.4rem ;
 }
-.arco-avatar.small {
+.arco-avatar-desc-size-smaller {
+  margin-top:  0 ;
+  font-size:  0.24rem ;
+  line-height:  0.32rem ;
+}
+.arco-avatar-size-small {
   width:  0.8rem ;
   height:  0.8rem ;
 }
-.arco-avatar.small .arco-avatar-default {
+.arco-avatar-default-icon-size-small {
   font-size:  0.4rem ;
 }
-.arco-avatar.small .arco-avatar-text {
+.arco-avatar-text-size-small {
   font-size:  0.28rem ;
 }
-.arco-avatar.group-medium .arco-avatar-wrapper {
-  margin-left:  -0.24rem ;
+.arco-avatar-wrapper-with-info-size-small {
+  height:  1.6rem ;
 }
-.arco-avatar.group-medium .arco-avatar {
-  border-width:  0.03rem ;
+.arco-avatar-name-size-small {
+  font-size:  0.32rem ;
+  line-height:  0.48rem ;
+}
+.arco-avatar-desc-size-small {
+  margin-top:  0 ;
+  font-size:  0.24rem ;
+  line-height:  0.32rem ;
 }
-.arco-avatar.medium {
+.arco-avatar-size-medium {
   width:  0.96rem ;
   height:  0.96rem ;
 }
-.arco-avatar.medium .arco-avatar-default {
+.arco-avatar-default-icon-size-medium {
   font-size:  0.48rem ;
 }
-.arco-avatar.medium .arco-avatar-text {
+.arco-avatar-text-size-medium {
   font-size:  0.32rem ;
 }
-.arco-avatar.group-large .arco-avatar-wrapper {
-  margin-left:  -0.24rem ;
+.arco-avatar-wrapper-with-info-size-medium {
+  height:  1.6rem ;
 }
-.arco-avatar.group-large .arco-avatar {
-  border-width:  0.03rem ;
+.arco-avatar-name-size-medium {
+  font-size:  0.36rem ;
+  line-height:  0.52rem ;
 }
-.arco-avatar.large {
+.arco-avatar-desc-size-medium {
+  margin-top:  0.04rem ;
+  font-size:  0.28rem ;
+  line-height:  0.4rem ;
+}
+.arco-avatar-size-large {
   width:  1.12rem ;
   height:  1.12rem ;
 }
-.arco-avatar.large .arco-avatar-default {
+.arco-avatar-default-icon-size-large {
   font-size:  0.56rem ;
 }
-.arco-avatar.large .arco-avatar-text {
+.arco-avatar-text-size-large {
   font-size:  0.32rem ;
 }
+.arco-avatar-wrapper-with-info-size-large {
+  height:  1.76rem ;
+}
+.arco-avatar-name-size-large {
+  font-size:  0.36rem ;
+  line-height:  0.52rem ;
+}
+.arco-avatar-desc-size-large {
+  margin-top:  0.04rem ;
+  font-size:  0.28rem ;
+  line-height:  0.4rem ;
+}
 .arco-avatar-img {
   width: 100%;
   height: 100%;
@@ -1083,6 +1047,13 @@ samp {
   flex: 0 0 auto;
   font-weight: bold;
 }
+.arco-avatar-wrapper {
+  display: inline-block;
+}
+.arco-avatar-wrapper-with-info {
+  display: flex;
+  align-items: center;
+}
 .arco-avatar-info {
   display: flex;
   justify-content: center;
@@ -1095,44 +1066,44 @@ samp {
 .arco-avatar-desc {
   color:  #86909c ;
 }
-.arco-avatar-group .arco-avatar-wrapper.circle {
+.arco-avatar-group .arco-avatar-wrapper-shape-circle {
   position: relative;
 }
-.arco-avatar-group .arco-avatar-wrapper.circle:first-child {
+.arco-avatar-group .arco-avatar-wrapper-shape-circle:first-child {
   margin-left: 0;
 }
 .arco-avatar-group .arco-avatar {
   border-style: solid;
   border-color:  #ffffff ;
 }
-.arco-avatar-group.group-ultra-small .arco-avatar-wrapper {
+.arco-avatar-group-size-ultra-small .arco-avatar-wrapper {
   margin-left:  -0.16rem ;
 }
-.arco-avatar-group.group-ultra-small .arco-avatar {
+.arco-avatar-group-size-ultra-small .arco-avatar {
   border-width:  0.02rem ;
 }
-.arco-avatar-group.group-smaller .arco-avatar-wrapper {
+.arco-avatar-group-size-smaller .arco-avatar-wrapper {
   margin-left:  -0.16rem ;
 }
-.arco-avatar-group.group-smaller .arco-avatar {
+.arco-avatar-group-size-smaller .arco-avatar {
   border-width:  0.02rem ;
 }
-.arco-avatar-group.group-small .arco-avatar-wrapper {
+.arco-avatar-group-size-small .arco-avatar-wrapper {
   margin-left:  -0.24rem ;
 }
-.arco-avatar-group.group-small .arco-avatar {
+.arco-avatar-group-size-small .arco-avatar {
   border-width:  0.03rem ;
 }
-.arco-avatar-group.group-medium .arco-avatar-wrapper {
+.arco-avatar-group-size-medium .arco-avatar-wrapper {
   margin-left:  -0.24rem ;
 }
-.arco-avatar-group.group-medium .arco-avatar {
+.arco-avatar-group-size-medium .arco-avatar {
   border-width:  0.03rem ;
 }
-.arco-avatar-group.group-large .arco-avatar-wrapper {
+.arco-avatar-group-size-large .arco-avatar-wrapper {
   margin-left:  -0.24rem ;
 }
-.arco-avatar-group.group-large .arco-avatar {
+.arco-avatar-group-size-large .arco-avatar {
   border-width:  0.03rem ;
 }
 
@@ -1144,8 +1115,8 @@ samp {
   display: block;
   width: 100%;
   box-sizing: border-box;
+  line-height:  1.2 ;
   border-radius:  2PX ;
-  border: 1PX solid #165dff ;
   -webkit-touch-callout: none;
   /* iOS Safari */
   -webkit-user-select: none;
@@ -1157,433 +1128,198 @@ samp {
   user-select: none;
   /* Non-prefixed version, currently*/
 }
-.arco-button.half-border:not(.has-custom-border) {
-  border-width: 0;
-  box-shadow: 0 0 0 1PX #165dff inset;
-}
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
-  .arco-button.half-border:not(.has-custom-border) {
-    box-shadow: 0 0 0 0.5PX #165dff inset;
-  }
-}
-.ios .arco-button.half-border:not(.has-custom-border),
-.arco-button.half-border:not(.has-custom-border).ios {
-  box-shadow: none;
-  border: 0.5PX solid #165dff;
-}
-.arco-button.inline {
+.arco-button-inline {
   width: auto;
   display: inline-block;
 }
-.arco-button.type-ghost {
-  border: 1PX solid transparent ;
+.arco-button-type-ghost {
   background:  transparent ;
   color:  #165dff ;
 }
-.arco-button.type-ghost.half-border:not(.has-custom-border) {
-  border-width: 0;
-  box-shadow: 0 0 0 1PX transparent inset;
-}
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
-  .arco-button.type-ghost.half-border:not(.has-custom-border) {
-    box-shadow: 0 0 0 0.5PX transparent inset;
-  }
-}
-.ios .arco-button.type-ghost.half-border:not(.has-custom-border),
-.arco-button.type-ghost.half-border:not(.has-custom-border).ios {
-  box-shadow: none;
-  border: 0.5PX solid transparent;
-}
-.arco-button.type-ghost .bg-color-with-config {
+.arco-button-type-ghost .bg-color-with-config {
   background: #165dff;
 }
-.arco-button.type-ghost .stop-color-with-config {
+.arco-button-type-ghost .stop-color-with-config {
   stop-color: #165dff;
 }
-.arco-button.type-ghost .fill-color-with-config {
+.arco-button-type-ghost .fill-color-with-config {
   fill: #165dff;
 }
-.arco-button.type-ghost .stroke-color-with-config {
+.arco-button-type-ghost .stroke-color-with-config {
   stroke: #165dff;
 }
-.arco-button.type-ghost.disabled {
+.arco-button-type-ghost-disabled {
   background:  transparent ;
   color:  #94bfff ;
 }
-.arco-button.type-ghost.disabled.ios,
-.arco-button.type-ghost.disabled.android {
-  border-width: 0;
-  box-shadow: none;
-}
-.arco-button.type-ghost.active {
+.arco-button-type-ghost-active {
   background:  #e8f3ff ;
-  border: 1PX solid #e8f3ff ;
-}
-.arco-button.type-ghost.active.half-border:not(.has-custom-border) {
-  border-width: 0;
-  box-shadow: 0 0 0 1PX #e8f3ff inset;
-}
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
-  .arco-button.type-ghost.active.half-border:not(.has-custom-border) {
-    box-shadow: 0 0 0 0.5PX #e8f3ff inset;
-  }
-}
-.ios .arco-button.type-ghost.active.half-border:not(.has-custom-border),
-.arco-button.type-ghost.active.half-border:not(.has-custom-border).ios {
-  box-shadow: none;
-  border: 0.5PX solid #e8f3ff;
-}
-.arco-button.type-ghost,
-.arco-button.type-ghost.active {
-  border: 1PX solid #165dff ;
-}
-.arco-button.type-ghost.half-border:not(.has-custom-border),
-.arco-button.type-ghost.active.half-border:not(.has-custom-border) {
-  border-width: 0;
-  box-shadow: 0 0 0 1PX #165dff inset;
-}
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
-  .arco-button.type-ghost.half-border:not(.has-custom-border),
-  .arco-button.type-ghost.active.half-border:not(.has-custom-border) {
-    box-shadow: 0 0 0 0.5PX #165dff inset;
-  }
-}
-.ios .arco-button.type-ghost.half-border:not(.has-custom-border),
-.ios .arco-button.type-ghost.active.half-border:not(.has-custom-border),
-.arco-button.type-ghost.half-border:not(.has-custom-border).ios,
-.arco-button.type-ghost.active.half-border:not(.has-custom-border).ios {
-  box-shadow: none;
-  border: 0.5PX solid #165dff;
-}
-.arco-button.type-ghost.disabled.ios,
-.arco-button.type-ghost.disabled.android {
-  border: 1PX solid #94bfff ;
-}
-.arco-button.type-ghost.disabled.ios.half-border:not(.has-custom-border),
-.arco-button.type-ghost.disabled.android.half-border:not(.has-custom-border) {
-  border-width: 0;
-  box-shadow: 0 0 0 1PX #94bfff inset;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
-  .arco-button.type-ghost.disabled.ios.half-border:not(.has-custom-border),
-  .arco-button.type-ghost.disabled.android.half-border:not(.has-custom-border) {
-    box-shadow: 0 0 0 0.5PX #94bfff inset;
-  }
-}
-.ios .arco-button.type-ghost.disabled.ios.half-border:not(.has-custom-border),
-.ios .arco-button.type-ghost.disabled.android.half-border:not(.has-custom-border),
-.arco-button.type-ghost.disabled.ios.half-border:not(.has-custom-border).ios,
-.arco-button.type-ghost.disabled.android.half-border:not(.has-custom-border).ios {
-  box-shadow: none;
-  border: 0.5PX solid #94bfff;
-}
-.arco-button.type-default {
-  border: 1PX solid #E8F3FF ;
+.arco-button-type-default {
   background:  #E8F3FF ;
   color:  #165dff ;
 }
-.arco-button.type-default.half-border:not(.has-custom-border) {
-  border-width: 0;
-  box-shadow: 0 0 0 1PX #E8F3FF inset;
-}
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
-  .arco-button.type-default.half-border:not(.has-custom-border) {
-    box-shadow: 0 0 0 0.5PX #E8F3FF inset;
-  }
-}
-.ios .arco-button.type-default.half-border:not(.has-custom-border),
-.arco-button.type-default.half-border:not(.has-custom-border).ios {
-  box-shadow: none;
-  border: 0.5PX solid #E8F3FF;
-}
-.arco-button.type-default .bg-color-with-config {
+.arco-button-type-default .bg-color-with-config {
   background: #165dff;
 }
-.arco-button.type-default .stop-color-with-config {
+.arco-button-type-default .stop-color-with-config {
   stop-color: #165dff;
 }
-.arco-button.type-default .fill-color-with-config {
+.arco-button-type-default .fill-color-with-config {
   fill: #165dff;
 }
-.arco-button.type-default .stroke-color-with-config {
+.arco-button-type-default .stroke-color-with-config {
   stroke: #165dff;
 }
-.arco-button.type-default.disabled {
+.arco-button-type-default-disabled {
   background:  #E8F3FF ;
   color:  #94bfff ;
 }
-.arco-button.type-default.disabled.ios,
-.arco-button.type-default.disabled.android {
-  border-width: 0;
-  box-shadow: none;
-}
-.arco-button.type-default.active {
+.arco-button-type-default-active {
   background:  #94bfff ;
-  border: 1PX solid #94bfff ;
-}
-.arco-button.type-default.active.half-border:not(.has-custom-border) {
-  border-width: 0;
-  box-shadow: 0 0 0 1PX #94bfff inset;
-}
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
-  .arco-button.type-default.active.half-border:not(.has-custom-border) {
-    box-shadow: 0 0 0 0.5PX #94bfff inset;
-  }
-}
-.ios .arco-button.type-default.active.half-border:not(.has-custom-border),
-.arco-button.type-default.active.half-border:not(.has-custom-border).ios {
-  box-shadow: none;
-  border: 0.5PX solid #94bfff;
-}
-.arco-button.type-ghost,
-.arco-button.type-ghost.active {
-  border: 1PX solid #165dff ;
 }
-.arco-button.type-ghost.half-border:not(.has-custom-border),
-.arco-button.type-ghost.active.half-border:not(.has-custom-border) {
-  border-width: 0;
-  box-shadow: 0 0 0 1PX #165dff inset;
-}
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
-  .arco-button.type-ghost.half-border:not(.has-custom-border),
-  .arco-button.type-ghost.active.half-border:not(.has-custom-border) {
-    box-shadow: 0 0 0 0.5PX #165dff inset;
-  }
-}
-.ios .arco-button.type-ghost.half-border:not(.has-custom-border),
-.ios .arco-button.type-ghost.active.half-border:not(.has-custom-border),
-.arco-button.type-ghost.half-border:not(.has-custom-border).ios,
-.arco-button.type-ghost.active.half-border:not(.has-custom-border).ios {
-  box-shadow: none;
-  border: 0.5PX solid #165dff;
-}
-.arco-button.type-ghost.disabled.ios,
-.arco-button.type-ghost.disabled.android {
-  border: 1PX solid #94bfff ;
-}
-.arco-button.type-ghost.disabled.ios.half-border:not(.has-custom-border),
-.arco-button.type-ghost.disabled.android.half-border:not(.has-custom-border) {
-  border-width: 0;
-  box-shadow: 0 0 0 1PX #94bfff inset;
-}
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
-  .arco-button.type-ghost.disabled.ios.half-border:not(.has-custom-border),
-  .arco-button.type-ghost.disabled.android.half-border:not(.has-custom-border) {
-    box-shadow: 0 0 0 0.5PX #94bfff inset;
-  }
-}
-.ios .arco-button.type-ghost.disabled.ios.half-border:not(.has-custom-border),
-.ios .arco-button.type-ghost.disabled.android.half-border:not(.has-custom-border),
-.arco-button.type-ghost.disabled.ios.half-border:not(.has-custom-border).ios,
-.arco-button.type-ghost.disabled.android.half-border:not(.has-custom-border).ios {
-  box-shadow: none;
-  border: 0.5PX solid #94bfff;
-}
-.arco-button.type-primary {
-  border: 1PX solid #165dff ;
+.arco-button-type-primary {
   background:  #165dff ;
   color:  #fff ;
 }
-.arco-button.type-primary.half-border:not(.has-custom-border) {
-  border-width: 0;
-  box-shadow: 0 0 0 1PX #165dff inset;
-}
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
-  .arco-button.type-primary.half-border:not(.has-custom-border) {
-    box-shadow: 0 0 0 0.5PX #165dff inset;
-  }
-}
-.ios .arco-button.type-primary.half-border:not(.has-custom-border),
-.arco-button.type-primary.half-border:not(.has-custom-border).ios {
-  box-shadow: none;
-  border: 0.5PX solid #165dff;
-}
-.arco-button.type-primary .bg-color-with-config {
+.arco-button-type-primary .bg-color-with-config {
   background: #fff;
 }
-.arco-button.type-primary .stop-color-with-config {
+.arco-button-type-primary .stop-color-with-config {
   stop-color: #fff;
 }
-.arco-button.type-primary .fill-color-with-config {
+.arco-button-type-primary .fill-color-with-config {
   fill: #fff;
 }
-.arco-button.type-primary .stroke-color-with-config {
+.arco-button-type-primary .stroke-color-with-config {
   stroke: #fff;
 }
-.arco-button.type-primary.disabled {
+.arco-button-type-primary-disabled {
   background:  #94bfff ;
   color:  #E8F3FF ;
 }
-.arco-button.type-primary.disabled.ios,
-.arco-button.type-primary.disabled.android {
-  border-width: 0;
-  box-shadow: none;
-}
-.arco-button.type-primary.active {
+.arco-button-type-primary-active {
   background:  #0E42D2 ;
-  border: 1PX solid #0E42D2 ;
-}
-.arco-button.type-primary.active.half-border:not(.has-custom-border) {
-  border-width: 0;
-  box-shadow: 0 0 0 1PX #0E42D2 inset;
-}
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
-  .arco-button.type-primary.active.half-border:not(.has-custom-border) {
-    box-shadow: 0 0 0 0.5PX #0E42D2 inset;
-  }
-}
-.ios .arco-button.type-primary.active.half-border:not(.has-custom-border),
-.arco-button.type-primary.active.half-border:not(.has-custom-border).ios {
-  box-shadow: none;
-  border: 0.5PX solid #0E42D2;
-}
-.arco-button.type-ghost,
-.arco-button.type-ghost.active {
-  border: 1PX solid #165dff ;
-}
-.arco-button.type-ghost.half-border:not(.has-custom-border),
-.arco-button.type-ghost.active.half-border:not(.has-custom-border) {
-  border-width: 0;
-  box-shadow: 0 0 0 1PX #165dff inset;
-}
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
-  .arco-button.type-ghost.half-border:not(.has-custom-border),
-  .arco-button.type-ghost.active.half-border:not(.has-custom-border) {
-    box-shadow: 0 0 0 0.5PX #165dff inset;
-  }
-}
-.ios .arco-button.type-ghost.half-border:not(.has-custom-border),
-.ios .arco-button.type-ghost.active.half-border:not(.has-custom-border),
-.arco-button.type-ghost.half-border:not(.has-custom-border).ios,
-.arco-button.type-ghost.active.half-border:not(.has-custom-border).ios {
-  box-shadow: none;
-  border: 0.5PX solid #165dff;
 }
-.arco-button.type-ghost.disabled.ios,
-.arco-button.type-ghost.disabled.android {
-  border: 1PX solid #94bfff ;
+.arco-button-type-ghost {
+  border: 1PX solid currentColor;
 }
-.arco-button.type-ghost.disabled.ios.half-border:not(.has-custom-border),
-.arco-button.type-ghost.disabled.android.half-border:not(.has-custom-border) {
+.arco-button-type-ghost.half-border {
   border-width: 0;
-  box-shadow: 0 0 0 1PX #94bfff inset;
+  box-shadow: 0 0 0 1PX currentColor inset;
 }
 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
-  .arco-button.type-ghost.disabled.ios.half-border:not(.has-custom-border),
-  .arco-button.type-ghost.disabled.android.half-border:not(.has-custom-border) {
-    box-shadow: 0 0 0 0.5PX #94bfff inset;
+  .arco-button-type-ghost.half-border {
+    box-shadow: 0 0 0 0.5PX currentColor inset;
   }
 }
-.ios .arco-button.type-ghost.disabled.ios.half-border:not(.has-custom-border),
-.ios .arco-button.type-ghost.disabled.android.half-border:not(.has-custom-border),
-.arco-button.type-ghost.disabled.ios.half-border:not(.has-custom-border).ios,
-.arco-button.type-ghost.disabled.android.half-border:not(.has-custom-border).ios {
+.ios .arco-button-type-ghost.half-border,
+.arco-button-type-ghost.half-border.ios {
   box-shadow: none;
-  border: 0.5PX solid #94bfff;
+  border: 0.5PX solid currentColor;
 }
-.arco-button.size-mini {
+.arco-button-size-mini {
   padding:  0 0.16rem ;
   height:  0.48rem ;
 }
-.arco-button.size-mini.is-round {
+.arco-button-size-mini-is-round {
   border-radius:  0.48rem ;
 }
-.arco-button.size-mini.is-square {
+.arco-button-size-mini-is-square {
   border-radius: 0;
 }
-.arco-button.size-mini .btn-icon,
-.arco-button.size-mini i,
-.arco-button.size-mini .btn-text,
-.arco-button.size-mini svg {
+.arco-button-size-mini .arco-button-icon,
+.arco-button-size-mini i,
+.arco-button-size-mini .arco-button-text,
+.arco-button-size-mini svg {
   font-size:  0.24rem ;
 }
-.arco-button.size-small {
+.arco-button-size-small {
   padding:  0 0.16rem ;
   height:  0.56rem ;
 }
-.arco-button.size-small.is-round {
+.arco-button-size-small-is-round {
   border-radius:  0.56rem ;
 }
-.arco-button.size-small.is-square {
+.arco-button-size-small-is-square {
   border-radius: 0;
 }
-.arco-button.size-small .btn-icon,
-.arco-button.size-small i,
-.arco-button.size-small .btn-text,
-.arco-button.size-small svg {
+.arco-button-size-small .arco-button-icon,
+.arco-button-size-small i,
+.arco-button-size-small .arco-button-text,
+.arco-button-size-small svg {
   font-size:  0.28rem ;
 }
-.arco-button.size-medium {
+.arco-button-size-medium {
   padding:  0 0.32rem ;
   height:  0.64rem ;
 }
-.arco-button.size-medium.is-round {
+.arco-button-size-medium-is-round {
   border-radius:  0.64rem ;
 }
-.arco-button.size-medium.is-square {
+.arco-button-size-medium-is-square {
   border-radius: 0;
 }
-.arco-button.size-medium .btn-icon,
-.arco-button.size-medium i,
-.arco-button.size-medium .btn-text,
-.arco-button.size-medium svg {
+.arco-button-size-medium .arco-button-icon,
+.arco-button-size-medium i,
+.arco-button-size-medium .arco-button-text,
+.arco-button-size-medium svg {
   font-size:  0.28rem ;
 }
-.arco-button.size-large {
+.arco-button-size-large {
   padding:  0 0.32rem ;
   height:  0.72rem ;
 }
-.arco-button.size-large.is-round {
+.arco-button-size-large-is-round {
   border-radius:  0.72rem ;
 }
-.arco-button.size-large.is-square {
+.arco-button-size-large-is-square {
   border-radius: 0;
 }
-.arco-button.size-large .btn-icon,
-.arco-button.size-large i,
-.arco-button.size-large .btn-text,
-.arco-button.size-large svg {
+.arco-button-size-large .arco-button-icon,
+.arco-button-size-large i,
+.arco-button-size-large .arco-button-text,
+.arco-button-size-large svg {
   font-size:  0.3rem ;
 }
-.arco-button.size-huge {
+.arco-button-size-huge {
   padding:  0 0.32rem ;
   height:  0.88rem ;
 }
-.arco-button.size-huge.is-round {
+.arco-button-size-huge-is-round {
   border-radius:  0.88rem ;
 }
-.arco-button.size-huge.is-square {
+.arco-button-size-huge-is-square {
   border-radius: 0;
 }
-.arco-button.size-huge .btn-icon,
-.arco-button.size-huge i,
-.arco-button.size-huge .btn-text,
-.arco-button.size-huge svg {
+.arco-button-size-huge .arco-button-icon,
+.arco-button-size-huge i,
+.arco-button-size-huge .arco-button-text,
+.arco-button-size-huge svg {
   font-size:  0.32rem ;
 }
-.arco-button.android .btn-text {
+.arco-button-text-android {
   padding-top: 0.04rem;
 }
-.arco-button .btn-icon {
+.arco-button-icon {
   vertical-align: middle;
   display: inline-flex;
   align-items: center;
   justify-content: center;
 }
-.arco-button .btn-text {
-  font-size: 0.3rem;
+.arco-button-text {
   display: inline-block;
   vertical-align: middle;
 }
-.arco-button .btn-text.has-icon {
-  margin-left: 0.08rem;
+.arco-button-text-has-icon {
+  margin-left:  0.08rem ;
 }
-.arco-button .loading-icon {
+.arco-button-loading-icon {
   display: inline-block;
   vertical-align: middle;
 }
-.arco-button .loading-icon + .btn-text {
-  margin-left: 0.16rem;
+.arco-button.has-custom-border {
+  border: 1PX solid;
 }
 
 .arco-carousel {
@@ -3154,6 +2890,8 @@ samp {
 }
 .arco-dropdown-options-item-icon {
   position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
   right:  0.32rem ;
   color: transparent;
 }
@@ -3380,6 +3118,121 @@ samp {
 }
 
 
+.arco-image-picker {
+  font-size:  0.28rem ;
+}
+.arco-image-picker-container {
+  display: flex;
+  flex-wrap: wrap;
+}
+.arco-image-picker-image {
+  position: relative;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-top: 100%;
+  border-radius:  0.04rem ;
+  overflow: hidden;
+}
+.arco-image-picker-image-container {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  left: 0;
+}
+.arco-image-picker-image .arco-image {
+  height: 100%;
+  width: 100%;
+}
+.arco-image-picker-image-mask {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 2;
+}
+.arco-image-picker-add {
+  background-color:  #f7f8fa ;
+  border-radius:  0.04rem ;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  padding-top: 100%;
+}
+.arco-image-picker-add-container {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  font-size:  0.24rem ;
+  color:  #86909c ;
+}
+.arco-image-picker-add-icon {
+  font-size:  0.6rem ;
+  color:  #d8d8d8 ;
+}
+.arco-image-picker-add-icon svg {
+  display: block;
+}
+.arco-image-picker-add-disabled {
+  pointer-events: none;
+}
+.arco-image-picker-add-disabled .arco-image-picker-add-icon {
+  opacity:  0.7 ;
+}
+.arco-image-picker-add input {
+  position: absolute;
+  opacity: 0;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  display: none;
+}
+.arco-image-picker-close {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 2;
+}
+.arco-image-picker-close-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size:  0.24rem ;
+  width:  0.36rem ;
+  height:  0.36rem ;
+  color:  #ffffff ;
+  background:  rgba(0, 0, 0, 0.3) ;
+  border-radius:  0 0.04rem ;
+}
+.arco-image-picker-error {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background:  rgba(0, 0, 0, 0.5) ;
+  color:  #ffffff ;
+  font-size:  0.28rem ;
+}
+.arco-image-picker-disabled {
+  pointer-events: none;
+}
+
 .arco-image-preview,
 .image-preview-lock-modal {
   position: fixed;
@@ -4867,6 +4720,133 @@ samp {
   opacity:  0.8 ;
 }
 
+.arco-search-bar-container {
+  display: flex;
+  align-items: center;
+  position: relative;
+  padding:  0.32rem ;
+  background-color:  #FFFFFF ;
+}
+.arco-search-bar-square .arco-search-bar-wrap {
+  border-radius:  0.04rem ;
+}
+.arco-search-bar-round .arco-search-bar-wrap {
+  border-radius:  199.98rem ;
+}
+.arco-search-bar-wrap {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  height:  0.72rem ;
+  font-size:  0.28rem ;
+  padding:  0.16rem 0.28rem ;
+  background-color:  #F2F3F5 ;
+}
+.arco-search-bar-input {
+  flex: 1;
+  background-color: transparent;
+  height:  0.4rem ;
+  caret-color:  #165dff ;
+}
+.arco-search-bar-input-left {
+  text-align: left;
+}
+.arco-search-bar-input-right {
+  text-align: right;
+}
+.arco-search-bar-input-center {
+  text-align: center;
+}
+.arco-search-bar-input::-moz-placeholder {
+  color:  #c9cdd4 ;
+}
+.arco-search-bar-input::placeholder {
+  color:  #c9cdd4 ;
+}
+.arco-search-bar-input::-webkit-search-cancel-button {
+  display: none;
+}
+.arco-search-bar-prefix,
+.arco-search-bar-suffix,
+.arco-search-bar-clear {
+  align-items: center;
+  justify-content: center;
+  display: flex;
+}
+.arco-search-bar-prefix {
+  margin-right:  0.18rem ;
+}
+.arco-search-bar-clear {
+  color:  #C9CDD4 ;
+}
+.arco-search-bar-search-icon {
+  color:  #86909C ;
+  font-size:  0.32rem ;
+}
+.arco-search-bar-cancel-btn {
+  margin-left:  0.32rem ;
+  color:  #165dff ;
+  font-size:  0.3rem ;
+}
+.arco-search-bar-association {
+  position: absolute;
+  left: 0;
+  right: 0;
+  background-color:  #FFFFFF ;
+  top: 100%;
+  display: none;
+}
+.arco-search-bar-association-visible {
+  display: block;
+}
+.arco-search-bar-association-item {
+  height:  1.04rem ;
+  display: flex;
+  align-items: center;
+  position: relative;
+  color:  #1d2129 ;
+  padding:  0.32rem ;
+  font-size:  0.3rem ;
+}
+.arco-search-bar-association-item:not(:last-child) {
+  position: relative;
+  border-width: 0;
+}
+.arco-search-bar-association-item:not(:last-child)::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-search-bar-association-item:not(:last-child)::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-search-bar-association-item:not(:last-child)::after {
+    transform: scaleY(0.33333333);
+    -webkit-transform: scaleY(0.33333333);
+    border-radius: 0;
+  }
+}
+.arco-search-bar-association-item-highlight {
+  color:  #165dff ;
+}
+
 .arco-steps {
   display: flex;
   padding:  0.32rem 0 ;
@@ -4909,7 +4889,7 @@ samp {
 .vertical .arco-steps-item-tail {
   height: 100%;
   width:  18PX ;
-  top: 0.18rem;
+  top:  0.18rem ;
   padding:  0.28rem 0 ;
 }
 .vertical .arco-steps-item-tail:after {
@@ -4923,21 +4903,17 @@ samp {
 .finish .arco-steps-item-tail:after {
   background:  #165dff ;
 }
-.arco-steps-item-custom-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width:  20PX ;
-  height:  20PX ;
-}
+.arco-steps-item-custom-icon,
 .arco-steps-item-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  border-radius: 50%;
   width:  18PX ;
   height:  18PX ;
 }
+.arco-steps-item-icon {
+  border-radius: 50%;
+}
 .number.finish .arco-steps-item-icon {
   background:  #E8F3FF ;
 }
@@ -5042,6 +5018,80 @@ samp {
 }
 
 
+.arco-swipe-action {
+  position: relative;
+  transition: transform 0s;
+  font-size:  0.32rem ;
+}
+.arco-swipe-action.action-open,
+.arco-swipe-action-menu.action-open {
+  transition-timing-function:  cubic-bezier(0.2, 0.8, 0.32, 1.28) ;
+}
+.arco-swipe-action.action-close,
+.arco-swipe-action-menu.action-close {
+  transition-timing-function:  cubic-bezier(0.34, 0.69, 0.1, 1) ;
+}
+.arco-swipe-action-content {
+  width: 100%;
+}
+.arco-swipe-action-menu {
+  display: flex;
+  position: absolute;
+  height: 100%;
+  overflow: visible;
+  flex-wrap: nowrap;
+  top: 0;
+  transition: width 0s;
+}
+.arco-swipe-action-menu-left {
+  right: 100%;
+}
+.arco-swipe-action-menu-right {
+  left: 100%;
+}
+.arco-swipe-action-menu-action-left::after {
+  right: 100%;
+  margin-right: -1PX;
+}
+.arco-swipe-action-menu-action-right::after {
+  left: 100%;
+  margin-left: -1PX;
+}
+.arco-swipe-action-menu-action-info {
+  height: 100%;
+  padding:  0.32rem ;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.arco-swipe-action-menu-action-info-container {
+  position: relative;
+}
+.arco-swipe-action-menu-action-info-container.open-style-layer {
+  position: absolute;
+  height: 100%;
+}
+.arco-swipe-action-menu-action-info-container::after {
+  content: " ";
+  position: absolute;
+  top: 0;
+  height: 100%;
+  width:  0.6rem ;
+  background: inherit;
+}
+.arco-swipe-action-menu-action-info-text {
+  white-space: nowrap;
+  font-size:  0.32rem ;
+  line-height:  0.44rem ;
+  color:  #ffffff ;
+}
+.arco-swipe-action-menu-action-info-icon {
+  margin-right:  0.08rem ;
+  height:  0.4rem ;
+  width:  0.4rem ;
+  color:  #ffffff ;
+}
+
 .arco-swipe-load {
   position: relative;
   display: inline-flex;