@svton/taro-ui 1.1.4 → 1.2.1

package/dist/index.css

@@ -679,3 +679,2020 @@
 .svton-empty-state__action {
   margin-top: 16px;
 }
+
+/* src/components/Popup/index.scss */
+.svton-popup__wrapper {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: auto;
+}
+.svton-popup__overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+.svton-popup__overlay--visible {
+  opacity: 1;
+}
+.svton-popup__overlay--hidden {
+  opacity: 0;
+}
+.svton-popup {
+  position: absolute;
+  background-color: #ffffff;
+  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1), opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);
+  overflow: hidden;
+  max-height: 100%;
+  max-width: 100%;
+}
+.svton-popup--bottom {
+  bottom: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+}
+.svton-popup--bottom.svton-popup--visible {
+  transform: translateY(0);
+}
+.svton-popup--bottom.svton-popup--hidden {
+  transform: translateY(100%);
+}
+.svton-popup--bottom.svton-popup--round {
+  border-radius: 32rpx 32rpx 0 0;
+}
+.svton-popup--top {
+  top: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+}
+.svton-popup--top.svton-popup--visible {
+  transform: translateY(0);
+}
+.svton-popup--top.svton-popup--hidden {
+  transform: translateY(-100%);
+}
+.svton-popup--top.svton-popup--round {
+  border-radius: 0 0 32rpx 32rpx;
+}
+.svton-popup--left {
+  top: 0;
+  bottom: 0;
+  left: 0;
+  height: 100%;
+}
+.svton-popup--left.svton-popup--visible {
+  transform: translateX(0);
+}
+.svton-popup--left.svton-popup--hidden {
+  transform: translateX(-100%);
+}
+.svton-popup--left.svton-popup--round {
+  border-radius: 0 32rpx 32rpx 0;
+}
+.svton-popup--right {
+  top: 0;
+  bottom: 0;
+  right: 0;
+  height: 100%;
+}
+.svton-popup--right.svton-popup--visible {
+  transform: translateX(0);
+}
+.svton-popup--right.svton-popup--hidden {
+  transform: translateX(100%);
+}
+.svton-popup--right.svton-popup--round {
+  border-radius: 32rpx 0 0 32rpx;
+}
+.svton-popup--center {
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  border-radius: 32rpx;
+}
+.svton-popup--center.svton-popup--visible {
+  opacity: 1;
+  transform: translate(-50%, -50%) scale(1);
+}
+.svton-popup--center.svton-popup--hidden {
+  opacity: 0;
+  transform: translate(-50%, -50%) scale(0.9);
+}
+.svton-popup--safe-bottom {
+  padding-bottom: constant(safe-area-inset-bottom);
+  padding-bottom: env(safe-area-inset-bottom);
+}
+.svton-popup--safe-top {
+  padding-top: constant(safe-area-inset-top);
+  padding-top: env(safe-area-inset-top);
+}
+
+/* src/components/Modal/index.scss */
+.svton-modal {
+  width: 560rpx;
+  background-color: #ffffff;
+  border-radius: 32rpx;
+  overflow: hidden;
+}
+.svton-modal__header {
+  padding: 32rpx 32rpx 16rpx;
+  text-align: center;
+}
+.svton-modal__title {
+  font-size: 30rpx;
+  font-weight: 600;
+  color: #1a1a1a;
+  line-height: 1.3;
+}
+.svton-modal__content {
+  padding: 16rpx 32rpx 32rpx;
+  text-align: center;
+  font-size: 26rpx;
+  color: #666666;
+  line-height: 1.6;
+  max-height: 60vh;
+  overflow-y: auto;
+}
+.svton-modal__footer {
+  display: flex;
+  border-top: 1rpx solid #f0f0f0;
+}
+.svton-modal__footer--vertical {
+  flex-direction: column;
+}
+.svton-modal__footer--vertical .svton-modal__btn {
+  border-right: none;
+  border-bottom: 1rpx solid #f0f0f0;
+}
+.svton-modal__footer--vertical .svton-modal__btn:last-child {
+  border-bottom: none;
+}
+.svton-modal__btn {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100rpx;
+  font-size: 28rpx;
+  background-color: transparent;
+  border: none;
+  border-right: 1rpx solid #f0f0f0;
+}
+.svton-modal__btn:last-child {
+  border-right: none;
+}
+.svton-modal__btn:active {
+  background-color: #f5f5f5;
+}
+.svton-modal__btn--cancel {
+  color: #666666;
+}
+.svton-modal__btn--confirm {
+  color: #1890ff;
+  font-weight: 500;
+}
+.svton-modal__btn--danger {
+  color: #ff4d4f;
+}
+.svton-modal__btn--disabled {
+  color: #cccccc;
+  pointer-events: none;
+}
+.svton-modal--no-title .svton-modal__content {
+  padding-top: 32rpx;
+}
+.svton-modal__close {
+  position: absolute;
+  top: 16rpx;
+  right: 16rpx;
+  width: 48rpx;
+  height: 48rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #8a8a8a;
+  font-size: 36rpx;
+}
+.svton-modal__close:active {
+  opacity: 0.7;
+}
+
+/* src/components/ActionSheet/index.scss */
+.svton-action-sheet {
+  background-color: #f5f5f5;
+}
+.svton-action-sheet__header {
+  padding: 32rpx 32rpx 24rpx;
+  text-align: center;
+  background-color: #ffffff;
+  border-bottom: 1rpx solid #f0f0f0;
+}
+.svton-action-sheet__title {
+  display: block;
+  font-size: 28rpx;
+  font-weight: 500;
+  color: #1a1a1a;
+  line-height: 1.3;
+}
+.svton-action-sheet__desc {
+  display: block;
+  margin-top: 8rpx;
+  font-size: 24rpx;
+  color: #8a8a8a;
+  line-height: 1.6;
+}
+.svton-action-sheet__content {
+  background-color: #ffffff;
+}
+.svton-action-sheet__item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 112rpx;
+  padding: 24rpx 32rpx;
+  background-color: #ffffff;
+  border-bottom: 1rpx solid #f0f0f0;
+}
+.svton-action-sheet__item:last-child {
+  border-bottom: none;
+}
+.svton-action-sheet__item:active {
+  background-color: #f5f5f5;
+}
+.svton-action-sheet__item--danger .svton-action-sheet__item-text {
+  color: #ff4d4f;
+}
+.svton-action-sheet__item--disabled {
+  pointer-events: none;
+}
+.svton-action-sheet__item--disabled .svton-action-sheet__item-text {
+  color: #cccccc;
+}
+.svton-action-sheet__item--disabled .svton-action-sheet__item-desc {
+  color: #cccccc;
+}
+.svton-action-sheet__item-text {
+  font-size: 28rpx;
+  color: #1a1a1a;
+  line-height: 1.3;
+}
+.svton-action-sheet__item-desc {
+  margin-top: 8rpx;
+  font-size: 24rpx;
+  color: #8a8a8a;
+  line-height: 1.5;
+}
+.svton-action-sheet__gap {
+  height: 16rpx;
+  background-color: #f5f5f5;
+}
+.svton-action-sheet__cancel {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 112rpx;
+  background-color: #ffffff;
+  font-size: 28rpx;
+  color: #666666;
+}
+.svton-action-sheet__cancel:active {
+  background-color: #f5f5f5;
+}
+
+/* src/components/Toast/index.scss */
+.svton-toast {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+  z-index: 2000;
+}
+.svton-toast__content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-width: 200rpx;
+  max-width: 70%;
+  padding: 32rpx 48rpx;
+  background-color: rgba(0, 0, 0, 0.75);
+  border-radius: 24rpx;
+  pointer-events: auto;
+  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1), transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+.svton-toast__content--visible {
+  opacity: 1;
+  transform: scale(1);
+}
+.svton-toast__content--hidden {
+  opacity: 0;
+  transform: scale(0.9);
+}
+.svton-toast__content--top {
+  position: absolute;
+  top: 20%;
+}
+.svton-toast__content--center {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.svton-toast__content--center.svton-toast__content--visible {
+  transform: translateY(-50%) scale(1);
+}
+.svton-toast__content--center.svton-toast__content--hidden {
+  transform: translateY(-50%) scale(0.9);
+}
+.svton-toast__content--bottom {
+  position: absolute;
+  bottom: 20%;
+}
+.svton-toast__icon {
+  margin-bottom: 16rpx;
+  font-size: 80rpx;
+  line-height: 1;
+}
+.svton-toast__icon--success {
+  color: #52c41a;
+}
+.svton-toast__icon--error {
+  color: #ff4d4f;
+}
+.svton-toast__icon--warning {
+  color: #ffa940;
+}
+.svton-toast__icon--loading {
+  color: #ffffff;
+  animation: svton-toast-spin 1s linear infinite;
+}
+.svton-toast__text {
+  font-size: 26rpx;
+  color: #ffffff;
+  line-height: 1.6;
+  text-align: center;
+  word-break: break-all;
+}
+.svton-toast--text-only .svton-toast__content {
+  min-width: 0;
+  padding: 24rpx 32rpx;
+}
+@keyframes svton-toast-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* src/components/Input/index.scss */
+.svton-input {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-height: 80rpx;
+  padding: 0 24rpx;
+  background-color: #ffffff;
+  border: 1rpx solid #e8e8e8;
+  border-radius: 12rpx;
+  box-sizing: border-box;
+  transition: border-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+.svton-input:focus-within {
+  border-color: #1890ff;
+}
+.svton-input--borderless {
+  border: none;
+  background-color: transparent;
+  padding: 0;
+}
+.svton-input--filled {
+  border: none;
+  background-color: #f5f5f5;
+}
+.svton-input--disabled {
+  background-color: #f5f5f5;
+  pointer-events: none;
+}
+.svton-input--disabled .svton-input__inner {
+  color: #cccccc;
+}
+.svton-input--error {
+  border-color: #ff4d4f;
+}
+.svton-input--error:focus-within {
+  border-color: #ff4d4f;
+}
+.svton-input__prefix {
+  flex-shrink: 0;
+  margin-right: 16rpx;
+  color: #8a8a8a;
+  font-size: 26rpx;
+}
+.svton-input__inner {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  min-height: 80rpx;
+  padding: 20rpx 0;
+  font-size: 26rpx;
+  color: #1a1a1a;
+  background-color: transparent;
+  border: none;
+  outline: none;
+  box-sizing: border-box;
+}
+.svton-input__inner::-moz-placeholder {
+  color: #aaaaaa;
+}
+.svton-input__inner::placeholder {
+  color: #aaaaaa;
+}
+.svton-input__suffix {
+  flex-shrink: 0;
+  margin-left: 16rpx;
+  color: #8a8a8a;
+  font-size: 26rpx;
+}
+.svton-input__clear {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40rpx;
+  height: 40rpx;
+  margin-left: 16rpx;
+  color: #aaaaaa;
+  font-size: 28rpx;
+}
+.svton-input__clear:active {
+  opacity: 0.7;
+}
+.svton-input__count {
+  flex-shrink: 0;
+  margin-left: 16rpx;
+  font-size: 24rpx;
+  color: #8a8a8a;
+}
+.svton-textarea {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  padding: 20rpx 24rpx;
+  background-color: #ffffff;
+  border: 1rpx solid #e8e8e8;
+  border-radius: 12rpx;
+  box-sizing: border-box;
+  transition: border-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+.svton-textarea:focus-within {
+  border-color: #1890ff;
+}
+.svton-textarea--borderless {
+  border: none;
+  background-color: transparent;
+  padding: 0;
+}
+.svton-textarea--filled {
+  border: none;
+  background-color: #f5f5f5;
+}
+.svton-textarea--disabled {
+  background-color: #f5f5f5;
+  pointer-events: none;
+}
+.svton-textarea--disabled .svton-textarea__inner {
+  color: #cccccc;
+}
+.svton-textarea--error {
+  border-color: #ff4d4f;
+}
+.svton-textarea__inner {
+  width: 100%;
+  min-height: 160rpx;
+  font-size: 26rpx;
+  color: #1a1a1a;
+  background-color: transparent;
+  border: none;
+  outline: none;
+  resize: none;
+  line-height: 1.6;
+}
+.svton-textarea__inner::-moz-placeholder {
+  color: #aaaaaa;
+}
+.svton-textarea__inner::placeholder {
+  color: #aaaaaa;
+}
+.svton-textarea__footer {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 16rpx;
+}
+.svton-textarea__count {
+  font-size: 24rpx;
+  color: #8a8a8a;
+}
+
+/* src/components/Cell/index.scss */
+.svton-cell {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-height: 112rpx;
+  padding: 24rpx 32rpx;
+  background-color: #ffffff;
+  box-sizing: border-box;
+}
+.svton-cell:active {
+  background-color: #f5f5f5;
+}
+.svton-cell--disabled {
+  pointer-events: none;
+}
+.svton-cell--disabled .svton-cell__title,
+.svton-cell--disabled .svton-cell__label {
+  color: #cccccc;
+}
+.svton-cell--disabled .svton-cell__value {
+  color: #cccccc;
+}
+.svton-cell--clickable-false:active {
+  background-color: #ffffff;
+}
+.svton-cell__icon {
+  flex-shrink: 0;
+  margin-right: 24rpx;
+  font-size: 48rpx;
+  color: #666666;
+}
+.svton-cell__content {
+  flex: 1;
+  min-width: 0;
+}
+.svton-cell__title {
+  font-size: 28rpx;
+  color: #1a1a1a;
+  line-height: 1.3;
+}
+.svton-cell__label {
+  margin-top: 8rpx;
+  font-size: 24rpx;
+  color: #8a8a8a;
+  line-height: 1.5;
+}
+.svton-cell__value {
+  flex-shrink: 0;
+  margin-left: 24rpx;
+  font-size: 26rpx;
+  color: #666666;
+  text-align: right;
+  max-width: 50%;
+}
+.svton-cell__arrow {
+  flex-shrink: 0;
+  margin-left: 16rpx;
+  color: #aaaaaa;
+  font-size: 26rpx;
+}
+.svton-cell__required {
+  color: #ff4d4f;
+  margin-right: 8rpx;
+}
+.svton-cell-group {
+  background-color: #ffffff;
+  border-radius: 32rpx;
+  overflow: hidden;
+}
+.svton-cell-group__title {
+  padding: 24rpx 32rpx 16rpx;
+  font-size: 24rpx;
+  color: #8a8a8a;
+  line-height: 1.5;
+  background-color: transparent;
+}
+.svton-cell-group--border .svton-cell {
+  position: relative;
+}
+.svton-cell-group--border .svton-cell::after {
+  content: "";
+  position: absolute;
+  left: 32rpx;
+  right: 0;
+  bottom: 0;
+  height: 1rpx;
+  background-color: #f0f0f0;
+}
+.svton-cell-group--border .svton-cell:last-child::after {
+  display: none;
+}
+.svton-cell-group--inset {
+  margin: 0 32rpx;
+  border-radius: 32rpx;
+}
+
+/* src/components/SearchBar/index.scss */
+.svton-search-bar {
+  display: flex;
+  align-items: center;
+  padding: 16rpx 32rpx;
+  background-color: #ffffff;
+}
+.svton-search-bar__input-wrap {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  height: 72rpx;
+  padding: 0 24rpx;
+  background-color: #f5f5f5;
+  border-radius: 9999rpx;
+}
+.svton-search-bar__icon {
+  flex-shrink: 0;
+  margin-right: 16rpx;
+  color: #aaaaaa;
+  font-size: 28rpx;
+}
+.svton-search-bar__input {
+  flex: 1;
+  height: 100%;
+  font-size: 26rpx;
+  color: #1a1a1a;
+  background-color: transparent;
+  border: none;
+  outline: none;
+}
+.svton-search-bar__input::-moz-placeholder {
+  color: #aaaaaa;
+}
+.svton-search-bar__input::placeholder {
+  color: #aaaaaa;
+}
+.svton-search-bar__clear {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40rpx;
+  height: 40rpx;
+  margin-left: 16rpx;
+  color: #aaaaaa;
+  font-size: 28rpx;
+}
+.svton-search-bar__clear:active {
+  opacity: 0.7;
+}
+.svton-search-bar__action {
+  flex-shrink: 0;
+  margin-left: 24rpx;
+  padding: 16rpx 0;
+  font-size: 26rpx;
+  color: #1890ff;
+}
+.svton-search-bar__action:active {
+  opacity: 0.7;
+}
+.svton-search-bar__action--disabled {
+  color: #cccccc;
+  pointer-events: none;
+}
+.svton-search-bar--focus .svton-search-bar__input-wrap {
+  background-color: #f0f9ff;
+}
+.svton-search-bar--round .svton-search-bar__input-wrap {
+  border-radius: 9999rpx;
+}
+.svton-search-bar--square .svton-search-bar__input-wrap {
+  border-radius: 12rpx;
+}
+
+/* src/components/Tag/index.scss */
+.svton-tag {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 56rpx;
+  padding: 0 24rpx;
+  font-size: 24rpx;
+  line-height: 1;
+  border-radius: 12rpx;
+  box-sizing: border-box;
+  white-space: nowrap;
+}
+.svton-tag--primary {
+  background-color: #e6f4ff;
+  color: #1890ff;
+}
+.svton-tag--primary.svton-tag--fill {
+  background-color: #1890ff;
+  color: #ffffff;
+}
+.svton-tag--primary.svton-tag--outline {
+  background-color: transparent;
+  border: 1rpx solid #1890ff;
+  color: #1890ff;
+}
+.svton-tag--success {
+  background-color: rgba(82, 196, 26, 0.1);
+  color: #52c41a;
+}
+.svton-tag--success.svton-tag--fill {
+  background-color: #52c41a;
+  color: #ffffff;
+}
+.svton-tag--success.svton-tag--outline {
+  background-color: transparent;
+  border: 1rpx solid #52c41a;
+  color: #52c41a;
+}
+.svton-tag--warning {
+  background-color: rgba(255, 169, 64, 0.1);
+  color: #ffa940;
+}
+.svton-tag--warning.svton-tag--fill {
+  background-color: #ffa940;
+  color: #ffffff;
+}
+.svton-tag--warning.svton-tag--outline {
+  background-color: transparent;
+  border: 1rpx solid #ffa940;
+  color: #ffa940;
+}
+.svton-tag--danger {
+  background-color: rgba(255, 77, 79, 0.1);
+  color: #ff4d4f;
+}
+.svton-tag--danger.svton-tag--fill {
+  background-color: #ff4d4f;
+  color: #ffffff;
+}
+.svton-tag--danger.svton-tag--outline {
+  background-color: transparent;
+  border: 1rpx solid #ff4d4f;
+  color: #ff4d4f;
+}
+.svton-tag--default {
+  background-color: #f5f5f5;
+  color: #666666;
+}
+.svton-tag--default.svton-tag--fill {
+  background-color: #666666;
+  color: #ffffff;
+}
+.svton-tag--default.svton-tag--outline {
+  background-color: transparent;
+  border: 1rpx solid #e8e8e8;
+  color: #666666;
+}
+.svton-tag--small {
+  height: 40rpx;
+  padding: 0 16rpx;
+  font-size: 22rpx;
+}
+.svton-tag--large {
+  height: 64rpx;
+  padding: 0 32rpx;
+  font-size: 26rpx;
+}
+.svton-tag--round {
+  border-radius: 9999rpx;
+}
+.svton-tag__close {
+  margin-left: 8rpx;
+  font-size: 22rpx;
+  opacity: 0.7;
+}
+.svton-tag__close:active {
+  opacity: 1;
+}
+
+/* src/components/Badge/index.scss */
+.svton-badge {
+  position: relative;
+  display: inline-block;
+}
+.svton-badge__content {
+  position: absolute;
+  top: 0;
+  right: 0;
+  transform: translate(50%, -50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 32rpx;
+  height: 32rpx;
+  padding: 0 8rpx;
+  font-size: 20rpx;
+  font-weight: 500;
+  color: #ffffff;
+  background-color: #ff4d4f;
+  border-radius: 9999rpx;
+  box-sizing: border-box;
+  white-space: nowrap;
+  z-index: 1;
+}
+.svton-badge__content--standalone {
+  position: relative;
+  top: auto;
+  right: auto;
+  transform: none;
+}
+.svton-badge__dot {
+  position: absolute;
+  top: 0;
+  right: 0;
+  transform: translate(50%, -50%);
+  width: 16rpx;
+  height: 16rpx;
+  background-color: #ff4d4f;
+  border-radius: 50%;
+  z-index: 1;
+}
+.svton-badge__dot--standalone {
+  position: relative;
+  top: auto;
+  right: auto;
+  transform: none;
+}
+.svton-badge--primary .svton-badge__content,
+.svton-badge--primary .svton-badge__dot {
+  background-color: #1890ff;
+}
+.svton-badge--success .svton-badge__content,
+.svton-badge--success .svton-badge__dot {
+  background-color: #52c41a;
+}
+.svton-badge--warning .svton-badge__content,
+.svton-badge--warning .svton-badge__dot {
+  background-color: #ffa940;
+}
+
+/* src/components/Avatar/index.scss */
+.svton-avatar {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  background-color: #f5f5f5;
+  color: #666666;
+  vertical-align: middle;
+}
+.svton-avatar--small {
+  width: 64rpx;
+  height: 64rpx;
+  font-size: 24rpx;
+}
+.svton-avatar--medium {
+  width: 96rpx;
+  height: 96rpx;
+  font-size: 28rpx;
+}
+.svton-avatar--large {
+  width: 192rpx;
+  height: 192rpx;
+  font-size: 36rpx;
+}
+.svton-avatar--xlarge {
+  width: 240rpx;
+  height: 240rpx;
+  font-size: 48rpx;
+}
+.svton-avatar--circle {
+  border-radius: 50%;
+}
+.svton-avatar--square {
+  border-radius: 24rpx;
+}
+.svton-avatar__image {
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+  object-fit: cover;
+}
+.svton-avatar__text {
+  font-weight: 500;
+  white-space: nowrap;
+}
+.svton-avatar__icon {
+  font-size: inherit;
+}
+.svton-avatar__default {
+  font-size: inherit;
+  color: #8a8a8a;
+}
+.svton-avatar-group {
+  display: inline-flex;
+  align-items: center;
+}
+.svton-avatar-group .svton-avatar {
+  border: 4rpx solid #ffffff;
+  margin-left: -20rpx;
+}
+.svton-avatar-group .svton-avatar:first-child {
+  margin-left: 0;
+}
+.svton-avatar-group__rest {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #f5f5f5;
+  color: #666666;
+  font-size: 24rpx;
+  font-weight: 500;
+  border: 4rpx solid #ffffff;
+  margin-left: -20rpx;
+  border-radius: 50%;
+}
+
+/* src/components/Skeleton/index.scss */
+.svton-skeleton {
+  display: flex;
+  width: 100%;
+}
+.svton-skeleton--animate .svton-skeleton__avatar,
+.svton-skeleton--animate .svton-skeleton__title,
+.svton-skeleton--animate .svton-skeleton__row {
+  background:
+    linear-gradient(
+      90deg,
+      #f5f5f5 25%,
+      #f0f0f0 37%,
+      #f5f5f5 63%);
+  background-size: 400% 100%;
+  animation: svton-skeleton-loading 1.4s ease infinite;
+}
+.svton-skeleton__avatar {
+  flex-shrink: 0;
+  margin-right: 24rpx;
+  background-color: #f5f5f5;
+}
+.svton-skeleton__avatar--circle {
+  border-radius: 50%;
+}
+.svton-skeleton__avatar--square {
+  border-radius: 24rpx;
+}
+.svton-skeleton__avatar--small {
+  width: 64rpx;
+  height: 64rpx;
+}
+.svton-skeleton__avatar--medium {
+  width: 96rpx;
+  height: 96rpx;
+}
+.svton-skeleton__avatar--large {
+  width: 192rpx;
+  height: 192rpx;
+}
+.svton-skeleton__content {
+  flex: 1;
+  min-width: 0;
+}
+.svton-skeleton__title {
+  height: 32rpx;
+  margin-bottom: 24rpx;
+  background-color: #f5f5f5;
+  border-radius: 12rpx;
+}
+.svton-skeleton__title--round {
+  border-radius: 9999rpx;
+}
+.svton-skeleton__row {
+  height: 28rpx;
+  margin-bottom: 16rpx;
+  background-color: #f5f5f5;
+  border-radius: 12rpx;
+}
+.svton-skeleton__row:last-child {
+  margin-bottom: 0;
+}
+.svton-skeleton__row--round {
+  border-radius: 9999rpx;
+}
+@keyframes svton-skeleton-loading {
+  0% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0 50%;
+  }
+}
+.svton-skeleton-paragraph {
+  padding: 24rpx;
+}
+.svton-skeleton-image {
+  width: 100%;
+  height: 200rpx;
+  background-color: #f5f5f5;
+  border-radius: 24rpx;
+}
+.svton-skeleton-image--animate {
+  background:
+    linear-gradient(
+      90deg,
+      #f5f5f5 25%,
+      #f0f0f0 37%,
+      #f5f5f5 63%);
+  background-size: 400% 100%;
+  animation: svton-skeleton-loading 1.4s ease infinite;
+}
+
+/* src/components/Switch/index.scss */
+.svton-switch {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  vertical-align: middle;
+}
+.svton-switch__track {
+  position: relative;
+  width: 100rpx;
+  height: 56rpx;
+  background-color: #f5f5f5;
+  border-radius: 9999rpx;
+  transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+.svton-switch__thumb {
+  position: absolute;
+  top: 4rpx;
+  left: 4rpx;
+  width: 48rpx;
+  height: 48rpx;
+  background-color: #ffffff;
+  border-radius: 50%;
+  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
+  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+.svton-switch--checked .svton-switch__track {
+  background-color: #1890ff;
+}
+.svton-switch--checked .svton-switch__thumb {
+  transform: translateX(44rpx);
+}
+.svton-switch--disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+.svton-switch--loading {
+  pointer-events: none;
+}
+.svton-switch--loading .svton-switch__thumb {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.svton-switch__loading {
+  width: 32rpx;
+  height: 32rpx;
+  border: 3rpx solid #1890ff;
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: svton-switch-spin 0.8s linear infinite;
+}
+.svton-switch--small .svton-switch__track {
+  width: 80rpx;
+  height: 44rpx;
+}
+.svton-switch--small .svton-switch__thumb {
+  width: 36rpx;
+  height: 36rpx;
+}
+.svton-switch--small.svton-switch--checked .svton-switch__thumb {
+  transform: translateX(36rpx);
+}
+.svton-switch--large .svton-switch__track {
+  width: 120rpx;
+  height: 68rpx;
+}
+.svton-switch--large .svton-switch__thumb {
+  width: 60rpx;
+  height: 60rpx;
+}
+.svton-switch--large.svton-switch--checked .svton-switch__thumb {
+  transform: translateX(52rpx);
+}
+@keyframes svton-switch-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* src/components/NoticeBar/index.scss */
+.svton-notice-bar {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-height: 72rpx;
+  padding: 16rpx 32rpx;
+  background-color: #fffbe8;
+  box-sizing: border-box;
+}
+.svton-notice-bar--info {
+  background-color: #e6f4ff;
+  color: #1890ff;
+}
+.svton-notice-bar--info .svton-notice-bar__icon {
+  color: #1890ff;
+}
+.svton-notice-bar--success {
+  background-color: rgba(82, 196, 26, 0.1);
+  color: #52c41a;
+}
+.svton-notice-bar--success .svton-notice-bar__icon {
+  color: #52c41a;
+}
+.svton-notice-bar--warning {
+  background-color: #fffbe8;
+  color: #ed6a0c;
+}
+.svton-notice-bar--warning .svton-notice-bar__icon {
+  color: #ed6a0c;
+}
+.svton-notice-bar--error {
+  background-color: rgba(255, 77, 79, 0.1);
+  color: #ff4d4f;
+}
+.svton-notice-bar--error .svton-notice-bar__icon {
+  color: #ff4d4f;
+}
+.svton-notice-bar--closeable {
+  padding-right: 16rpx;
+}
+.svton-notice-bar--clickable:active {
+  opacity: 0.8;
+}
+.svton-notice-bar__icon {
+  flex-shrink: 0;
+  margin-right: 16rpx;
+  font-size: 28rpx;
+}
+.svton-notice-bar__content {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+}
+.svton-notice-bar__wrap {
+  display: flex;
+  align-items: center;
+  height: 100%;
+}
+.svton-notice-bar__text {
+  font-size: 26rpx;
+  line-height: 1.6;
+  white-space: nowrap;
+}
+.svton-notice-bar__text--scrollable {
+  animation: svton-notice-scroll linear infinite;
+}
+.svton-notice-bar__action {
+  flex-shrink: 0;
+  margin-left: 16rpx;
+  font-size: 26rpx;
+}
+.svton-notice-bar__close {
+  flex-shrink: 0;
+  margin-left: 16rpx;
+  padding: 8rpx;
+  font-size: 28rpx;
+  opacity: 0.6;
+}
+.svton-notice-bar__close:active {
+  opacity: 1;
+}
+.svton-notice-bar__arrow {
+  flex-shrink: 0;
+  margin-left: 8rpx;
+  font-size: 24rpx;
+}
+@keyframes svton-notice-scroll {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(-100%);
+  }
+}
+
+/* src/components/SwipeCell/index.scss */
+.svton-swipe-cell {
+  position: relative;
+  overflow: hidden;
+  background-color: #ffffff;
+}
+.svton-swipe-cell--disabled {
+  pointer-events: none;
+}
+.svton-swipe-cell__content {
+  position: relative;
+  z-index: 1;
+  background-color: #ffffff;
+}
+.svton-swipe-cell__actions {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  display: flex;
+  align-items: stretch;
+}
+.svton-swipe-cell__actions--left {
+  left: 0;
+  transform: translateX(-100%);
+}
+.svton-swipe-cell__actions--right {
+  right: 0;
+  transform: translateX(100%);
+}
+.svton-swipe-cell__action {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 24rpx;
+  font-size: 26rpx;
+  color: #ffffff;
+  white-space: nowrap;
+}
+.svton-swipe-cell__action:active {
+  opacity: 0.9;
+}
+.svton-swipe-cell__action--primary {
+  background-color: #1890ff;
+}
+.svton-swipe-cell__action--danger {
+  background-color: #ff4d4f;
+}
+.svton-swipe-cell__action--warning {
+  background-color: #ffa940;
+}
+.svton-swipe-cell__action--default {
+  background-color: #666666;
+}
+
+/* src/components/Divider/index.scss */
+.svton-divider {
+  display: flex;
+  align-items: center;
+  margin: 24rpx 0;
+}
+.svton-divider--horizontal {
+  width: 100%;
+}
+.svton-divider--vertical {
+  display: inline-block;
+  width: 1rpx;
+  height: 1em;
+  margin: 0 16rpx;
+  vertical-align: middle;
+  border-left: 1rpx solid #e8e8e8;
+}
+.svton-divider--vertical.svton-divider--dashed {
+  border-left-style: dashed;
+}
+.svton-divider__line {
+  flex: 1;
+  border-top: 1rpx solid #e8e8e8;
+}
+.svton-divider__line--left {
+  margin-right: 0;
+}
+.svton-divider__line--right {
+  margin-left: 0;
+}
+.svton-divider--dashed .svton-divider__line {
+  border-top-style: dashed;
+}
+.svton-divider__content {
+  padding: 0 24rpx;
+  font-size: 24rpx;
+  color: #8a8a8a;
+  white-space: nowrap;
+}
+.svton-divider--content-left .svton-divider__line--left {
+  max-width: 10%;
+}
+.svton-divider--content-right .svton-divider__line--right {
+  max-width: 10%;
+}
+.svton-divider--content-center .svton-divider__line--left,
+.svton-divider--content-center .svton-divider__line--right {
+  flex: 1;
+}
+
+/* src/components/Progress/index.scss */
+.svton-progress {
+  display: flex;
+  align-items: center;
+}
+.svton-progress--line {
+  width: 100%;
+}
+.svton-progress--line .svton-progress__line {
+  flex: 1;
+  min-width: 0;
+}
+.svton-progress--line .svton-progress__track {
+  width: 100%;
+  border-radius: 9999rpx;
+  overflow: hidden;
+}
+.svton-progress--line .svton-progress__bar {
+  border-radius: 9999rpx;
+  transition: width 300ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+.svton-progress--line .svton-progress__text {
+  flex-shrink: 0;
+  margin-left: 16rpx;
+  font-size: 24rpx;
+  color: #666666;
+  white-space: nowrap;
+}
+.svton-progress--circle {
+  display: inline-flex;
+}
+.svton-progress--circle .svton-progress__circle {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.svton-progress--circle .svton-progress__circle-svg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+.svton-progress--circle .svton-progress__circle-track {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  border-radius: 50%;
+  border-style: solid;
+  box-sizing: border-box;
+}
+.svton-progress--circle .svton-progress__circle-bar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  border-radius: 50%;
+  transform: rotate(-90deg);
+}
+.svton-progress--circle .svton-progress__circle-text {
+  position: relative;
+  z-index: 1;
+  font-size: 28rpx;
+  font-weight: 500;
+  color: #1a1a1a;
+}
+
+/* src/components/Grid/index.scss */
+.svton-grid {
+  display: flex;
+  flex-wrap: wrap;
+  background-color: #ffffff;
+}
+.svton-grid--border {
+  border-top: 1rpx solid #f0f0f0;
+  border-left: 1rpx solid #f0f0f0;
+}
+.svton-grid--border .svton-grid-item {
+  border-right: 1rpx solid #f0f0f0;
+  border-bottom: 1rpx solid #f0f0f0;
+}
+.svton-grid--square .svton-grid-item__content {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+.svton-grid--center .svton-grid-item__content {
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.svton-grid-item {
+  position: relative;
+  box-sizing: border-box;
+}
+.svton-grid-item__content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  padding: 24rpx;
+  background-color: #ffffff;
+}
+.svton-grid-item__content:active {
+  background-color: #f5f5f5;
+}
+.svton-grid-item__icon {
+  font-size: 96rpx;
+  margin-bottom: 16rpx;
+}
+.svton-grid-item__image {
+  width: 96rpx;
+  height: 96rpx;
+  margin-bottom: 16rpx;
+}
+.svton-grid-item__text {
+  font-size: 24rpx;
+  color: #1a1a1a;
+  line-height: 1.3;
+  text-align: center;
+  word-break: break-all;
+}
+.svton-grid-item__desc {
+  margin-top: 8rpx;
+  font-size: 22rpx;
+  color: #8a8a8a;
+  line-height: 1.5;
+  text-align: center;
+}
+.svton-grid-item--disabled .svton-grid-item__content {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+/* src/components/Collapse/index.scss */
+.svton-collapse {
+  background-color: #ffffff;
+}
+.svton-collapse--border .svton-collapse-item {
+  border-bottom: 1rpx solid #f0f0f0;
+}
+.svton-collapse--border .svton-collapse-item:last-child {
+  border-bottom: none;
+}
+.svton-collapse-item__header {
+  display: flex;
+  align-items: center;
+  padding: 24rpx 32rpx;
+  background-color: #ffffff;
+}
+.svton-collapse-item__header:active {
+  background-color: #f5f5f5;
+}
+.svton-collapse-item__title {
+  flex: 1;
+  font-size: 28rpx;
+  color: #1a1a1a;
+  line-height: 1.3;
+}
+.svton-collapse-item__value {
+  margin-left: 24rpx;
+  font-size: 26rpx;
+  color: #666666;
+}
+.svton-collapse-item__arrow {
+  margin-left: 16rpx;
+  color: #aaaaaa;
+  font-size: 24rpx;
+  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+.svton-collapse-item__arrow--expanded {
+  transform: rotate(90deg);
+}
+.svton-collapse-item__content {
+  overflow: hidden;
+  transition: height 300ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+.svton-collapse-item__body {
+  padding: 24rpx 32rpx;
+  font-size: 26rpx;
+  color: #666666;
+  line-height: 1.6;
+  background-color: #f5f5f5;
+}
+.svton-collapse-item--disabled .svton-collapse-item__header {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+/* src/components/Steps/index.scss */
+.svton-steps {
+  display: flex;
+  width: 100%;
+  padding: 24rpx 0;
+}
+.svton-steps--horizontal {
+  flex-direction: row;
+}
+.svton-steps--horizontal .svton-step {
+  flex: 1;
+  flex-direction: column;
+  align-items: center;
+}
+.svton-steps--horizontal .svton-step__line {
+  position: absolute;
+  top: 24rpx;
+  left: 50%;
+  width: 100%;
+  height: 2rpx;
+  background-color: #e8e8e8;
+}
+.svton-steps--horizontal .svton-step__line--active {
+  background-color: #1890ff;
+}
+.svton-steps--horizontal .svton-step:last-child .svton-step__line {
+  display: none;
+}
+.svton-steps--vertical {
+  flex-direction: column;
+  padding: 24rpx 32rpx;
+}
+.svton-steps--vertical .svton-step {
+  flex-direction: row;
+  min-height: 120rpx;
+}
+.svton-steps--vertical .svton-step__line {
+  position: absolute;
+  top: 48rpx;
+  left: 24rpx;
+  width: 2rpx;
+  height: calc(100% - 48rpx);
+  background-color: #e8e8e8;
+}
+.svton-steps--vertical .svton-step__line--active {
+  background-color: #1890ff;
+}
+.svton-steps--vertical .svton-step:last-child .svton-step__line {
+  display: none;
+}
+.svton-steps--vertical .svton-step__content {
+  flex: 1;
+  padding-left: 24rpx;
+  padding-bottom: 24rpx;
+}
+.svton-step {
+  position: relative;
+  display: flex;
+}
+.svton-step__icon {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 48rpx;
+  height: 48rpx;
+  border-radius: 50%;
+  background-color: #ffffff;
+  border: 2rpx solid #e8e8e8;
+  font-size: 24rpx;
+  color: #8a8a8a;
+}
+.svton-step__icon--active {
+  border-color: #1890ff;
+  background-color: #1890ff;
+  color: #ffffff;
+}
+.svton-step__icon--finish {
+  border-color: #1890ff;
+  color: #1890ff;
+}
+.svton-step__icon--error {
+  border-color: #ff4d4f;
+  background-color: #ff4d4f;
+  color: #ffffff;
+}
+.svton-step__content {
+  text-align: center;
+}
+.svton-step__title {
+  margin-top: 16rpx;
+  font-size: 26rpx;
+  color: #666666;
+  line-height: 1.3;
+}
+.svton-step__title--active {
+  color: #1890ff;
+  font-weight: 500;
+}
+.svton-step__title--finish {
+  color: #1a1a1a;
+}
+.svton-step__title--error {
+  color: #ff4d4f;
+}
+.svton-step__desc {
+  margin-top: 8rpx;
+  font-size: 24rpx;
+  color: #8a8a8a;
+  line-height: 1.5;
+}
+
+/* src/components/Checkbox/index.scss */
+.svton-checkbox {
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+}
+.svton-checkbox__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40rpx;
+  height: 40rpx;
+  border: 2rpx solid #e8e8e8;
+  background-color: #ffffff;
+  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
+  box-sizing: border-box;
+}
+.svton-checkbox__check {
+  color: #ffffff;
+  font-weight: 600;
+}
+.svton-checkbox__label {
+  margin-left: 16rpx;
+  font-size: 26rpx;
+  color: #1a1a1a;
+  line-height: 1.6;
+}
+.svton-checkbox--square .svton-checkbox__icon {
+  border-radius: 12rpx;
+}
+.svton-checkbox--round .svton-checkbox__icon {
+  border-radius: 50%;
+}
+.svton-checkbox--checked .svton-checkbox__icon {
+  background-color: #1890ff;
+  border-color: #1890ff;
+}
+.svton-checkbox--disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+.svton-checkbox-group {
+  display: flex;
+}
+.svton-checkbox-group--vertical {
+  flex-direction: column;
+}
+.svton-checkbox-group--vertical .svton-checkbox {
+  margin-bottom: 24rpx;
+}
+.svton-checkbox-group--vertical .svton-checkbox:last-child {
+  margin-bottom: 0;
+}
+.svton-checkbox-group--horizontal {
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+.svton-checkbox-group--horizontal .svton-checkbox {
+  margin-right: 32rpx;
+  margin-bottom: 16rpx;
+}
+
+/* src/components/Radio/index.scss */
+.svton-radio {
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+}
+.svton-radio__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40rpx;
+  height: 40rpx;
+  border: 2rpx solid #e8e8e8;
+  border-radius: 50%;
+  background-color: #ffffff;
+  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
+  box-sizing: border-box;
+}
+.svton-radio__dot {
+  width: 20rpx;
+  height: 20rpx;
+  border-radius: 50%;
+  background-color: #1890ff;
+}
+.svton-radio__label {
+  margin-left: 16rpx;
+  font-size: 26rpx;
+  color: #1a1a1a;
+  line-height: 1.6;
+}
+.svton-radio--checked .svton-radio__icon {
+  border-color: #1890ff;
+}
+.svton-radio--disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+.svton-radio-group {
+  display: flex;
+}
+.svton-radio-group--vertical {
+  flex-direction: column;
+}
+.svton-radio-group--vertical .svton-radio {
+  margin-bottom: 24rpx;
+}
+.svton-radio-group--vertical .svton-radio:last-child {
+  margin-bottom: 0;
+}
+.svton-radio-group--horizontal {
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+.svton-radio-group--horizontal .svton-radio {
+  margin-right: 32rpx;
+  margin-bottom: 16rpx;
+}
+
+/* src/components/Rate/index.scss */
+.svton-rate {
+  display: inline-flex;
+  align-items: center;
+}
+.svton-rate__item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.svton-rate__item:not(:last-child) {
+  margin-right: 8rpx;
+}
+.svton-rate__icon {
+  font-size: 48rpx;
+  color: #e8e8e8;
+  transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1), transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+.svton-rate__icon--active {
+  color: #ffc107;
+}
+.svton-rate__icon--half {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 50%;
+  overflow: hidden;
+  color: #ffc107;
+}
+.svton-rate--disabled {
+  opacity: 0.6;
+  pointer-events: none;
+}
+.svton-rate--readonly {
+  pointer-events: none;
+}
+.svton-rate--small .svton-rate__icon {
+  font-size: 36rpx;
+}
+.svton-rate--large .svton-rate__icon {
+  font-size: 64rpx;
+}
+
+/* src/components/Stepper/index.scss */
+.svton-stepper {
+  display: inline-flex;
+  align-items: center;
+}
+.svton-stepper__btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 56rpx;
+  height: 56rpx;
+  background-color: #f5f5f5;
+  border-radius: 12rpx;
+  font-size: 28rpx;
+  color: #1a1a1a;
+  transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+.svton-stepper__btn:active {
+  background-color: #e8e8e8;
+}
+.svton-stepper__btn--disabled {
+  color: #cccccc;
+  pointer-events: none;
+}
+.svton-stepper__minus {
+  border-radius: 12rpx 0 0 12rpx;
+}
+.svton-stepper__plus {
+  border-radius: 0 12rpx 12rpx 0;
+}
+.svton-stepper__input {
+  width: 64rpx;
+  height: 56rpx;
+  margin: 0 2rpx;
+  padding: 0;
+  text-align: center;
+  font-size: 26rpx;
+  color: #1a1a1a;
+  background-color: #f5f5f5;
+  border: none;
+  outline: none;
+}
+.svton-stepper--disabled {
+  opacity: 0.6;
+  pointer-events: none;
+}
+.svton-stepper--small .svton-stepper__btn {
+  width: 44rpx;
+  height: 44rpx;
+  font-size: 26rpx;
+}
+.svton-stepper--small .svton-stepper__input {
+  width: 52rpx;
+  height: 44rpx;
+  font-size: 24rpx;
+}
+.svton-stepper--large .svton-stepper__btn {
+  width: 72rpx;
+  height: 72rpx;
+  font-size: 32rpx;
+}
+.svton-stepper--large .svton-stepper__input {
+  width: 80rpx;
+  height: 72rpx;
+  font-size: 28rpx;
+}
+
+/* src/components/Countdown/index.scss */
+.svton-countdown {
+  display: inline-flex;
+  align-items: center;
+  font-size: 26rpx;
+  color: #1a1a1a;
+  font-variant-numeric: tabular-nums;
+}
+
+/* src/components/Result/index.scss */
+.svton-result {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 64rpx 32rpx;
+  text-align: center;
+}
+.svton-result__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 160rpx;
+  height: 160rpx;
+  margin-bottom: 32rpx;
+  border-radius: 50%;
+  font-size: 80rpx;
+  font-weight: 600;
+}
+.svton-result__icon--success {
+  background-color: rgba(82, 196, 26, 0.1);
+  color: #52c41a;
+}
+.svton-result__icon--error {
+  background-color: rgba(255, 77, 79, 0.1);
+  color: #ff4d4f;
+}
+.svton-result__icon--warning {
+  background-color: rgba(255, 169, 64, 0.1);
+  color: #ffa940;
+}
+.svton-result__icon--info {
+  background-color: rgba(24, 144, 255, 0.1);
+  color: #1890ff;
+}
+.svton-result__icon--waiting {
+  background-color: #f5f5f5;
+  color: #8a8a8a;
+}
+.svton-result__image {
+  margin-bottom: 32rpx;
+}
+.svton-result__title {
+  margin-bottom: 16rpx;
+  font-size: 32rpx;
+  font-weight: 600;
+  color: #1a1a1a;
+  line-height: 1.3;
+}
+.svton-result__desc {
+  margin-bottom: 32rpx;
+  font-size: 26rpx;
+  color: #666666;
+  line-height: 1.6;
+}
+.svton-result__content {
+  width: 100%;
+  margin-bottom: 32rpx;
+}
+.svton-result__extra {
+  width: 100%;
+  margin-top: 24rpx;
+}
+
+/* src/components/BackTop/index.scss */
+.svton-back-top {
+  position: fixed;
+  z-index: 200;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 96rpx;
+  height: 96rpx;
+  background-color: #ffffff;
+  border-radius: 50%;
+  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.12);
+  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1), transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+.svton-back-top:active {
+  transform: scale(0.95);
+}
+.svton-back-top__icon {
+  font-size: 40rpx;
+  color: #666666;
+}
+.svton-back-top__text {
+  margin-top: 4rpx;
+  font-size: 22rpx;
+  color: #8a8a8a;
+}
+
+/* src/components/Card/index.scss */
+.svton-card {
+  background-color: #ffffff;
+  border-radius: 32rpx;
+  overflow: hidden;
+}
+.svton-card--bordered {
+  border: 1rpx solid #f0f0f0;
+}
+.svton-card--shadow {
+  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
+}
+.svton-card--clickable:active {
+  opacity: 0.9;
+  transform: scale(0.99);
+}
+.svton-card__cover {
+  width: 100%;
+  overflow: hidden;
+}
+.svton-card__cover-image {
+  width: 100%;
+  display: block;
+}
+.svton-card__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  padding: 32rpx;
+  border-bottom: 1rpx solid #f0f0f0;
+}
+.svton-card__header-content {
+  flex: 1;
+  min-width: 0;
+}
+.svton-card__title {
+  display: block;
+  font-size: 28rpx;
+  font-weight: 600;
+  color: #1a1a1a;
+  line-height: 1.3;
+}
+.svton-card__subtitle {
+  display: block;
+  margin-top: 8rpx;
+  font-size: 24rpx;
+  color: #8a8a8a;
+  line-height: 1.5;
+}
+.svton-card__extra {
+  flex-shrink: 0;
+  margin-left: 24rpx;
+}
+.svton-card__body {
+  padding: 32rpx;
+  font-size: 26rpx;
+  color: #666666;
+  line-height: 1.6;
+}
+.svton-card__footer {
+  padding: 24rpx 32rpx;
+  border-top: 1rpx solid #f0f0f0;
+}