sard-uniapp 1.24.4 → 1.24.6

package/CHANGELOG.md

@@ -1,3 +1,29 @@
+## [1.24.6](https://github.com/sutras/sard-uniapp/compare/v1.24.5...v1.24.6) (2025-09-23)
+
+
+### Bug Fixes
+
+* **picker:** 将空数组视为空值, 修复级联选择初始选择问题 ([2fd8d18](https://github.com/sutras/sard-uniapp/commit/2fd8d18e411a526dc65cb1c99826162bae3ba4c6))
+* 修复getWindowInfo在支付宝端缺少safeAreaInsets的问题 ([cbd26d7](https://github.com/sutras/sard-uniapp/commit/cbd26d74074d9afe9299db92b9245de7cc46177a))
+
+
+
+## [1.24.5](https://github.com/sutras/sard-uniapp/compare/v1.24.4...v1.24.5) (2025-09-20)
+
+
+### Bug Fixes
+
+* **popout:** 修复popout类组件不显示按钮的问题 ([47bcea9](https://github.com/sutras/sard-uniapp/commit/47bcea986609b927a79d2bd917f907eda1757f82))
+* **utils:** 修复 支付宝getWindowInfo没有safeAreaInsets属性的问题 ([3d64401](https://github.com/sutras/sard-uniapp/commit/3d64401aa9f71d468e9463160493c981a3caa323))
+* 修复倒计时小时溢出的问题 ([823faa1](https://github.com/sutras/sard-uniapp/commit/823faa107517f91b1b630d70986a3e8b1206c39e))
+
+
+### Features
+
+* 新增 avatar-group 组件 ([4954219](https://github.com/sutras/sard-uniapp/commit/4954219095bc3cff12d7de74c90af188b54a99fc))
+
+
+
 ## [1.24.4](https://github.com/sutras/sard-uniapp/compare/v1.24.3...v1.24.4) (2025-09-13)
 
 

package/components/accordion-item/index.scss

@@ -3,7 +3,7 @@
 @include bem(accordion-item) {
   @include b() {
     @include universal;
-    background-color: var(--sar-accordion-bg);
+    background: var(--sar-accordion-bg);
 
     &::before {
       @include border-top(var(--sar-accordion-border-color));
@@ -64,7 +64,7 @@
   @include m-not(disabled) {
     @include e(header) {
       &:active {
-        background-color: var(--sar-accordion-active-bg);
+        background: var(--sar-accordion-active-bg);
       }
     }
   }

package/components/action-sheet/index.scss

@@ -5,7 +5,7 @@
     padding-bottom: env(safe-area-inset-bottom);
     border-top-left-radius: var(--sar-action-sheet-border-radius);
     border-top-right-radius: var(--sar-action-sheet-border-radius);
-    background-color: var(--sar-action-sheet-bg);
+    background: var(--sar-action-sheet-bg);
     touch-action: none;
   }
 
@@ -24,7 +24,7 @@
   @include e(gap) {
     @include universal;
     height: var(--sar-action-sheet-gap-height);
-    background-color: var(--sar-action-sheet-gap-bg);
+    background: var(--sar-action-sheet-gap-bg);
   }
 
   @include e(content) {
@@ -55,7 +55,7 @@
 
     @include m-not(disabled, loading) {
       &:active {
-        background-color: var(--sar-action-sheet-active-bg);
+        background: var(--sar-action-sheet-active-bg);
       }
     }
   }
@@ -88,7 +88,7 @@
     cursor: pointer;
 
     &:active {
-      background-color: var(--sar-action-sheet-active-bg);
+      background: var(--sar-action-sheet-active-bg);
     }
   }
 

package/components/avatar/README.md

@@ -13,6 +13,7 @@ group: 数据展示
 
 ```ts
 import Avatar from 'sard-uniapp/components/avatar/avatar.vue'
+import AvatarGroup from 'sard-uniapp/components/avatar-group/avatar-group.vue'
 ```
 
 ## 代码演示
@@ -59,18 +60,39 @@ import Avatar from 'sard-uniapp/components/avatar/avatar.vue'
 
 @code('${DEMO_PATH}/avatar/demo/Extra.vue')
 
+### 头像组 <sup>1.24.5+</sup>
+
+把一组 `Avatar` 组件放置在 `AvatarGroup` 组件里面，可形成层叠效果的头像组。
+
+`AvatarGroup` 组件需传递 `total` 和 `max` 属性，以便计算省略的头像数。
+
+@code('${DEMO_PATH}/avatar/demo/Group.vue')
+
+### 实际头像数不超过最大数 <sup>1.24.5+</sup>
+
+实际头像数不超过最大数时，会隐藏剩余数量显示。
+
+@code('${DEMO_PATH}/avatar/demo/GroupLess.vue')
+
+### 覆盖面 <sup>1.24.5+</sup>
+
+使用 `coverage` 属性设置头像间的覆盖面，设置0时不覆盖，设置1时完全覆盖。
+
+@code('${DEMO_PATH}/avatar/demo/GroupCoverage.vue')
+
 ## API
 
 ### AvatarProps
 
-| 属性       | 描述                   | 类型                 | 默认值   |
-| ---------- | ---------------------- | -------------------- | -------- |
-| root-class | 组件根元素类名         | string               | -        |
-| root-style | 组件根元素样式         | StyleValue           | -        |
-| shape      | 头像形状               | 'circle' \| 'square' | 'circle' |
-| size       | 头像尺寸               | string               | -        |
-| icon-size  | 图标尺寸               | string               | -        |
-| src        | 图片类型头像的图片地址 | string               | -        |
+| 属性                     | 描述                                         | 类型                 | 默认值   |
+| ------------------------ | -------------------------------------------- | -------------------- | -------- |
+| root-class               | 组件根元素类名                               | string               | -        |
+| root-style               | 组件根元素样式                               | StyleValue           | -        |
+| shape                    | 头像形状                                     | 'circle' \| 'square' | 'circle' |
+| size                     | 头像尺寸                                     | string               | -        |
+| icon-size                | 图标尺寸                                     | string               | -        |
+| src                      | 图片类型头像的图片地址                       | string               | -        |
+| index <sup>1.24.5+</sup> | 位于头像组中时必传，当前头像在头像组中的下标 | number               | -        |
 
 ### AvatarSlots
 
@@ -79,6 +101,36 @@ import Avatar from 'sard-uniapp/components/avatar/avatar.vue'
 | default | 自定义默认内容           | -    |
 | extra   | 额外内容，常用于展示徽标 | -    |
 
+### AvatarEmits
+
+| 事件                     | 描述       | 类型                 |
+| ------------------------ | ---------- | -------------------- |
+| click <sup>1.24.5+</sup> | 点击时触发 | (event: any) => void |
+
+### AvatarGroupProps <sup>1.24.5+</sup>
+
+| 属性        | 描述                     | 类型              | 默认值 |
+| ----------- | ------------------------ | ----------------- | ------ |
+| root-class  | 组件根元素类名           | string            | -      |
+| root-style  | 组件根元素样式           | StyleValue        | -      |
+| max         | 最大头像展示数量，必填   | number            | -      |
+| total       | 总的头像个数，必填       | number            | -      |
+| coverage    | 头像间的覆盖面           | number            | 0.5    |
+| show-remain | 是否显示剩余头像数量     | boolean           | true   |
+| remain-text | 自定义剩余头像数量的内容 | string \| boolean | -      |
+
+### AvatarGroupSlots <sup>1.24.5+</sup>
+
+| 插槽    | 描述           | 属性 |
+| ------- | -------------- | ---- |
+| default | 自定义默认内容 | -    |
+
+### AvatarGroupEmits <sup>1.24.5+</sup>
+
+| 事件                            | 描述               | 类型                 |
+| ------------------------------- | ------------------ | -------------------- |
+| remain-click <sup>1.24.5+</sup> | 点击剩余数量时触发 | (event: any) => void |
+
 ## 主题定制
 
 ### CSS 变量

package/components/avatar/avatar.d.ts

@@ -1,6 +1,10 @@
 import { type AvatarProps, type AvatarSlots } from './common';
 declare function __VLS_template(): Readonly<AvatarSlots> & AvatarSlots;
-declare const __VLS_component: import("vue").DefineComponent<AvatarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AvatarProps> & Readonly<{}>, {
+declare const __VLS_component: import("vue").DefineComponent<AvatarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    click: (event: any) => any;
+}, string, import("vue").PublicProps, Readonly<AvatarProps> & Readonly<{
+    onClick?: ((event: any) => any) | undefined;
+}>, {
     shape: "circle" | "square";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;

package/components/avatar/avatar.vue

@@ -1,5 +1,5 @@
 <template>
-  <view :class="avatarClass" :style="avatarStyle">
+  <view :class="avatarClass" :style="avatarStyle" @click="onClick">
     <slot>
       <image
         v-if="src"
@@ -16,17 +16,30 @@
       />
     </slot>
     <slot name="extra"></slot>
+
+    <view
+      v-if="
+        context && context.showRemain && context.total > context.max && isLast
+      "
+      :class="remainClass"
+      @click="context.onRemainClick"
+    >
+      {{ context.remainText }}
+    </view>
   </view>
 </template>
 
 <script>
 import { mergeDefaults as _mergeDefaults, defineComponent as _defineComponent } from "vue";
-import { computed } from "vue";
+import { computed, inject } from "vue";
 import { classNames, stringifyStyle, createBem } from "../../utils";
 import SarIcon from "../icon/icon.vue";
 import {
   defaultAvatarProps
 } from "./common";
+import {
+  avatarGroupContextSymbol
+} from "../avatar-group/common";
 /**
  * @property {string} rootClass 组件根元素类名，默认值：-。
  * @property {StyleValue} rootStyle 组件根元素样式，默认值：-。
@@ -34,6 +47,8 @@ import {
  * @property {string} size 头像尺寸，默认值：-。
  * @property {string} iconSize 图标尺寸，默认值：-。
  * @property {string} src 图片类型头像的图片地址，默认值：-。
+ * @property {number} index 位于头像组中时必传，当前头像在头像组中的下标，默认值：-。
+ * @event {(event: any) => void} click 点击时触发
  */
 export default  _defineComponent({
   components: {
@@ -54,14 +69,30 @@ export default  _defineComponent({
     iconSize: { type: String, required: false },
     background: { type: String, required: false },
     color: { type: String, required: false },
-    src: { type: String, required: false }
+    src: { type: String, required: false },
+    index: { type: Number, required: false }
   }, defaultAvatarProps),
-  setup(__props, { expose: __expose }) {
+  emits: ["click"],
+  setup(__props, { expose: __expose, emit: __emit }) {
     __expose();
     const props = __props;
+    const emit = __emit;
     const bem = createBem("avatar");
+    const context = inject(
+      avatarGroupContextSymbol,
+      null
+    );
+    const isLast = computed(() => context && context.max - 1 === props.index);
+    const onClick = (event) => {
+      emit("click", event);
+    };
     const avatarClass = computed(() => {
-      return classNames(bem.b(), bem.m(props.shape), props.rootClass);
+      return classNames(
+        bem.b(),
+        bem.m(props.shape),
+        bem.m("in-group", !!context),
+        props.rootClass
+      );
     });
     const avatarStyle = computed(() => {
       return stringifyStyle(
@@ -70,12 +101,16 @@ export default  _defineComponent({
           height: props.size,
           color: props.color,
           fontSize: props.iconSize,
-          background: props.background
+          background: props.background,
+          marginLeft: context && props.index !== 0 ? `calc(${props.size ? props.size : `var(--sar-avatar-width)`} * ${-context.coverage})` : void 0
         },
         props.rootStyle
       );
     });
-    const __returned__ = { props, bem, avatarClass, avatarStyle, get classNames() {
+    const remainClass = computed(() => {
+      return classNames(bem.e("remain"));
+    });
+    const __returned__ = { props, emit, bem, context, isLast, onClick, avatarClass, avatarStyle, remainClass, get classNames() {
       return classNames;
     }, SarIcon };
     return __returned__;

package/components/avatar/common.d.ts

@@ -8,6 +8,7 @@ export interface AvatarProps {
     background?: string;
     color?: string;
     src?: string;
+    index?: number;
 }
 export declare const defaultAvatarProps: {
     shape: AvatarProps["shape"];
@@ -16,3 +17,6 @@ export interface AvatarSlots {
     default?(props: Record<string, never>): any;
     extra?(props: Record<string, never>): any;
 }
+export interface AvatarEmits {
+    (e: 'click', event: any): void;
+}

package/components/avatar/index.scss

@@ -10,7 +10,8 @@
     width: var(--sar-avatar-width);
     height: var(--sar-avatar-height);
     font-size: var(--sar-avatar-font-size);
-    background-color: var(--sar-avatar-bg);
+    background: var(--sar-avatar-bg);
+    border: 1px solid transparent;
   }
 
   @include e(image) {
@@ -26,4 +27,23 @@
   @include m(square) {
     border-radius: var(--sar-avatar-square-border-radius);
   }
+
+  @include m(in-group) {
+    border-color: var(--sar-avatar-border-color);
+  }
+
+  @include e('remain') {
+    @include universal;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    font-size: var(--sar-avatar-remain-font-size);
+    color: var(--sar-avatar-remain-color);
+    background: var(--sar-avatar-remain-bg);
+    border-radius: inherit;
+  }
 }

package/components/avatar/variables.scss

@@ -5,7 +5,12 @@ page,
   --sar-avatar-height: 128rpx;
   --sar-avatar-font-size: 64rpx;
   --sar-avatar-bg: var(--sar-secondary-bg);
+  --sar-avatar-border-color: var(--sar-emphasis-bg);
 
   --sar-avatar-square-border-radius: var(--sar-rounded);
+
+  --sar-avatar-remain-bg: var(--sar-mask);
+  --sar-avatar-remain-color: var(--sar-white);
+  --sar-avatar-remain-font-size: var(--sar-text-base);
 }
 // #endvariables

package/components/avatar-group/avatar-group.d.ts

@@ -0,0 +1,17 @@
+import { type AvatarGroupProps, type AvatarGroupSlots } from './common';
+declare function __VLS_template(): Readonly<AvatarGroupSlots> & AvatarGroupSlots;
+declare const __VLS_component: import("vue").DefineComponent<AvatarGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "remain-click": (event: any) => any;
+}, string, import("vue").PublicProps, Readonly<AvatarGroupProps> & Readonly<{
+    "onRemain-click"?: ((event: any) => any) | undefined;
+}>, {
+    showRemain: boolean;
+    coverage: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/components/avatar-group/avatar-group.vue

@@ -0,0 +1,75 @@
+<template>
+  <view :class="avatarGroupClass" :style="avatarGroupStyle">
+    <slot></slot>
+  </view>
+</template>
+
+<script>
+import { mergeDefaults as _mergeDefaults, defineComponent as _defineComponent } from "vue";
+import { computed, provide, reactive, toRef } from "vue";
+import { classNames, stringifyStyle, createBem } from "../../utils";
+import {
+  defaultAvatarGroupProps,
+  avatarGroupContextSymbol
+} from "./common";
+/**
+ * @property {string} rootClass 组件根元素类名，默认值：-。
+ * @property {StyleValue} rootStyle 组件根元素样式，默认值：-。
+ * @property {number} max 最大头像展示数量，必填，默认值：-。
+ * @property {number} total 总的头像个数，必填，默认值：-。
+ * @property {number} coverage 头像间的覆盖面，默认值：0.5。
+ * @property {boolean} showRemain 是否显示剩余头像数量，默认值：true。
+ * @property {string | boolean} remainText 自定义剩余头像数量的内容，默认值：-。
+ * @event {(event: any) => void} remain-click 点击剩余数量时触发
+ */
+export default  _defineComponent({
+  ...{
+    options: {
+      virtualHost: true,
+      styleIsolation: "shared"
+    }
+  },
+  __name: "avatar-group",
+  props:  _mergeDefaults({
+    rootStyle: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
+    rootClass: { type: String, required: false },
+    max: { type: Number, required: true },
+    total: { type: Number, required: true },
+    coverage: { type: Number, required: false },
+    showRemain: { type: Boolean, required: false },
+    remainText: { type: [String, Number], required: false }
+  }, defaultAvatarGroupProps),
+  emits: ["remain-click"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const bem = createBem("avatar-group");
+    provide(
+      avatarGroupContextSymbol,
+      reactive({
+        total: toRef(() => props.total),
+        max: toRef(() => props.max),
+        showRemain: toRef(() => props.showRemain),
+        coverage: toRef(() => props.coverage),
+        remainText: toRef(() => props.remainText ?? `+${props.total - props.max}`),
+        onRemainClick: (event) => {
+          emit("remain-click", event);
+        }
+      })
+    );
+    __expose({});
+    const avatarGroupClass = computed(() => {
+      return classNames(bem.b(), props.rootClass);
+    });
+    const avatarGroupStyle = computed(() => {
+      return stringifyStyle(props.rootStyle);
+    });
+    const __returned__ = { props, emit, bem, avatarGroupClass, avatarGroupStyle };
+    return __returned__;
+  }
+});
+</script>
+
+<style lang="scss">
+@import './index.scss';
+</style>

package/components/avatar-group/common.d.ts

@@ -0,0 +1,31 @@
+import { type StyleValue } from 'vue';
+export interface AvatarGroupProps {
+    rootStyle?: StyleValue;
+    rootClass?: string;
+    max: number;
+    total: number;
+    coverage?: number;
+    showRemain?: boolean;
+    remainText?: string | number;
+}
+export declare const defaultAvatarGroupProps: {
+    coverage: number;
+    showRemain: boolean;
+};
+export interface AvatarGroupSlots {
+    default?(props: Record<string, never>): any;
+}
+export interface AvatarGroupEmits {
+    (e: 'remain-click', event: any): void;
+}
+export interface AvatarGroupExpose {
+}
+export interface AvatarGroupContext {
+    total: number;
+    max: number;
+    showRemain: boolean;
+    remainText?: string | number;
+    coverage: number;
+    onRemainClick: (event: any) => void;
+}
+export declare const avatarGroupContextSymbol: unique symbol;

package/components/avatar-group/common.js

@@ -0,0 +1,3 @@
+import { defaultConfig } from '../config';
+export const defaultAvatarGroupProps = defaultConfig.avatarGroup;
+export const avatarGroupContextSymbol = Symbol('avatar-group-context');

package/components/avatar-group/index.d.ts

@@ -0,0 +1 @@
+export type { AvatarGroupProps, AvatarGroupSlots, AvatarGroupEmits, AvatarGroupExpose, } from './common';

package/components/avatar-group/index.js

@@ -0,0 +1 @@
+export {};

package/components/avatar-group/index.scss

@@ -0,0 +1,9 @@
+@use '../style/base' as *;
+
+@include bem(avatar-group) {
+  @include b() {
+    @include universal;
+    flex-direction: row;
+    align-items: center;
+  }
+}

package/components/back-top/index.scss

@@ -15,7 +15,7 @@
     border-radius: var(--sar-back-top-border-radius);
     font-size: var(--sar-back-top-font-size);
     color: var(--sar-back-top-color);
-    background-color: var(--sar-back-top-bg);
+    background: var(--sar-back-top-bg);
     box-shadow: var(--sar-back-top-box-shadow);
     cursor: pointer;
     pointer-events: none;

package/components/badge/index.scss

@@ -17,7 +17,7 @@
     border: 1px solid var(--sar-badge-border-color);
     border-radius: var(--sar-rounded-full);
     color: var(--sar-badge-color);
-    background-color: var(--sar-badge-bg);
+    background: var(--sar-badge-bg);
 
     @include m(fixed) {
       position: absolute;

package/components/button/index.scss

@@ -43,7 +43,7 @@
     height: 100%;
     border-radius: inherit;
     opacity: 0;
-    background-color: var(--sar-button-active-bg);
+    background: var(--sar-button-active-bg);
     pointer-events: none;
   }
 
@@ -152,7 +152,7 @@
     @include m(mild-#{$theme}) {
       @include button-set-theme {
         color: $color;
-        background-color: var(--sar-button-mild-bg);
+        background: var(--sar-button-mild-bg);
       }
     }
 

package/components/calendar-month/index.scss

@@ -66,12 +66,12 @@
     @include m(selected, same) {
       border-radius: var(--sar-calendar-day-border-radius);
       color: var(--sar-calendar-day-selected-color);
-      background-color: var(--sar-calendar-day-selected-bg);
+      background: var(--sar-calendar-day-selected-bg);
     }
 
     @include m(start, end) {
       color: var(--sar-calendar-day-selected-color);
-      background-color: var(--sar-calendar-day-selected-bg);
+      background: var(--sar-calendar-day-selected-bg);
     }
 
     @include m(start) {
@@ -86,7 +86,7 @@
 
     @include m(middle) {
       color: var(--sar-calendar-day-middle-color);
-      background-color: var(--sar-calendar-day-middle-bg);
+      background: var(--sar-calendar-day-middle-bg);
     }
   }
 

package/components/card/index.scss

@@ -3,14 +3,14 @@
 @include bem(card) {
   @include b() {
     @include universal;
-    background-color: var(--sar-card-bg);
+    background: var(--sar-card-bg);
     border-radius: var(--sar-card-border-radius);
 
     @include m(hover) {
       cursor: pointer;
 
       &:active {
-        background-color: var(--sar-card-active-bg);
+        background: var(--sar-card-active-bg);
       }
     }
   }

package/components/cascader/index.scss

@@ -57,7 +57,7 @@
 
     @include m-not(disabled) {
       &:active {
-        background-color: var(--sar-cascader-option-active-bg);
+        background: var(--sar-cascader-option-active-bg);
       }
     }
   }

package/components/check-icon/index.scss

@@ -23,7 +23,7 @@
 
     @include m(disabled) {
       color: var(--sar-check-icon-disabled-color);
-      background-color: var(--sar-check-icon-disabled-bg);
+      background: var(--sar-check-icon-disabled-bg);
       border-color: var(--sar-check-icon-disabled-border-color);
     }
   }

package/components/checkbox-input/checkbox-input.vue

@@ -53,7 +53,11 @@ import {
 import {
   defaultCheckboxInputProps
 } from "./common";
-import { getMayPrimitiveOption, isEmptyBinding } from "../../utils";
+import {
+  getMayPrimitiveOption,
+  isEmptyArray,
+  isEmptyBinding
+} from "../../utils";
 import { usePopoutInput } from "../../use";
 /**
  * @property {string} rootClass 弹出式输入框根元素类名，默认值：-。
@@ -162,7 +166,7 @@ export default  _defineComponent({
       ).map((option) => getMayPrimitiveOption(option, optionKeys.label)).join(", ");
     }
     function getInputValue() {
-      if (isEmptyBinding(innerValue.value) || Array.isArray(innerValue.value) && innerValue.value.length === 0) {
+      if (isEmptyBinding(innerValue.value) || isEmptyArray(innerValue.value)) {
         return "";
       }
       return getOutletText(props.options, fieldKeys.value, innerValue.value);

package/components/config/index.d.ts

@@ -80,6 +80,10 @@ export declare const defaultConfig: {
     avatar: {
         shape: AvatarProps["shape"];
     };
+    avatarGroup: {
+        coverage: number;
+        showRemain: boolean;
+    };
     backTop: {
         visibleHeight: number;
     };

package/components/config/index.js

@@ -29,6 +29,10 @@ export const defaultConfig = {
     avatar: {
         shape: 'circle',
     },
+    avatarGroup: {
+        coverage: 0.5,
+        showRemain: true,
+    },
     backTop: {
         visibleHeight: 200,
     },

package/components/count-down/common.js

@@ -5,7 +5,7 @@ export function getCurrentTime(remainTime) {
         milliseconds: remainTime % 1000,
         seconds: ~~(remainTime / 1000) % 60,
         minutes: ~~(remainTime / 1000 / 60) % 60,
-        hours: ~~(remainTime / 1000 / 60 / 60) % 60,
+        hours: ~~(remainTime / 1000 / 60 / 60) % 24,
         days: ~~(remainTime / 1000 / 60 / 60 / 24),
         total: remainTime,
     };