@tdesign/uniapp 0.0.1-alpha.1 → 0.7.0

package/dist/avatar/props.ts

@@ -0,0 +1,54 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdAvatarProps } from './type';
+export default {
+  /** 头像替换文本，仅当图片加载失败时有效 */
+  alt: {
+    type: String,
+    default: '',
+  },
+  /** 头像右上角提示信息，继承 Badge 组件的全部特性。如：小红点，或者数字 */
+  badgeProps: {
+    type: Object,
+    default: () => ({}),
+  },
+  /** 已废弃。是否显示外边框 */
+  bordered: Boolean,
+  /** 加载失败时隐藏图片 */
+  hideOnLoadFailed: Boolean,
+  /** 图标。值为字符串表示图标名称，值为 `Object` 类型，表示透传至 `icon` */
+  icon: {
+    type: [String, Object],
+  },
+  /** 图片地址 */
+  image: {
+    type: String,
+    default: '',
+  },
+  /** 透传至 Image 组件 */
+  imageProps: {
+    type: Object,
+  },
+  /** 形状。优先级高于 AvatarGroup.shape 。Avatar 单独存在时，默认值为 circle。如果父组件 AvatarGroup 存在，默认值便由 AvatarGroup.shape 决定 */
+  shape: {
+    type: String,
+    validator(val: TdAvatarProps['shape']): boolean {
+      if (!val) return true;
+      return ['circle', 'round'].includes(val);
+    },
+  },
+  /** 尺寸，示例值：small/medium/large/24px/38px 等。优先级高于 AvatarGroup.size 。Avatar 单独存在时，默认值为 medium。如果父组件 AvatarGroup 存在，默认值便由 AvatarGroup.size 决定 */
+  size: {
+    type: String,
+    default: '',
+  },
+  /** 图片加载失败时触发 */
+  onError: {
+    type: Function,
+    default: () => ({}),
+  },
+};

package/dist/avatar/type.ts

@@ -0,0 +1,58 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdBadgeProps as BadgeProps } from '../badge/type';
+import type { TdImageProps as ImageProps } from '../image/type';
+import type { ShapeEnum } from '../common/common';
+
+export interface TdAvatarProps {
+  /**
+   * 头像替换文本，仅当图片加载失败时有效
+   * @default ''
+   */
+  alt?: string;
+  /**
+   * 头像右上角提示信息，继承 Badge 组件的全部特性。如：小红点，或者数字
+   * @default {}
+   */
+  badgeProps?: BadgeProps;
+  /**
+   * 已废弃。是否显示外边框
+   * @default false
+   */
+  bordered?: boolean;
+  /**
+   * 加载失败时隐藏图片
+   * @default false
+   */
+  hideOnLoadFailed?: boolean;
+  /**
+   * 图标。值为字符串表示图标名称，值为 `Object` 类型，表示透传至 `icon`
+   */
+  icon?: string | object;
+  /**
+   * 图片地址
+   * @default ''
+   */
+  image?: string;
+  /**
+   * 透传至 Image 组件
+   */
+  imageProps?: ImageProps;
+  /**
+   * 形状。优先级高于 AvatarGroup.shape 。Avatar 单独存在时，默认值为 circle。如果父组件 AvatarGroup 存在，默认值便由 AvatarGroup.shape 决定
+   */
+  shape?: ShapeEnum;
+  /**
+   * 尺寸，示例值：small/medium/large/24px/38px 等。优先级高于 AvatarGroup.size 。Avatar 单独存在时，默认值为 medium。如果父组件 AvatarGroup 存在，默认值便由 AvatarGroup.size 决定
+   * @default ''
+   */
+  size?: string;
+  /**
+   * 图片加载失败时触发
+   */
+  onError?: (e: Event) => void;
+}

package/dist/avatar-group/avatar-group.css

@@ -0,0 +1,187 @@
+.t-avatar-group {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+}
+.t-avatar-group-offset-left .t-avatar__wrapper,
+.t-avatar-group-offset-right .t-avatar__wrapper {
+  padding: var(--td-avatar-group-line-spacing, 4rpx) 0;
+}
+.t-avatar-group-offset-left-small,
+.t-avatar-group-offset-right-small {
+  --td-avatar-margin-left: var(--td-avatar-group-margin-left-small, -16rpx);
+}
+.t-avatar-group-offset-left-medium,
+.t-avatar-group-offset-right-medium {
+  --td-avatar-margin-left: var(--td-avatar-group-margin-left-medium, -16rpx);
+}
+.t-avatar-group-offset-left-large,
+.t-avatar-group-offset-right-large {
+  --td-avatar-margin-left: var(--td-avatar-group-margin-left-large, -16rpx);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(1) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 1);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(2) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 2);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(3) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 3);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(4) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 4);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(5) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 5);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(6) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 6);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(7) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 7);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(8) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 8);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(9) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 9);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(10) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 10);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(11) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 11);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(12) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 12);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(13) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 13);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(14) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 14);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(15) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 15);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(16) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 16);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(17) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 17);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(18) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 18);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(19) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 19);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(20) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 20);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(21) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 21);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(22) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 22);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(23) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 23);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(24) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 24);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(25) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 25);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(26) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 26);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(27) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 27);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(28) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 28);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(29) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 29);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(30) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 30);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(31) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 31);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(32) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 32);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(33) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 33);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(34) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 34);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(35) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 35);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(36) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 36);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(37) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 37);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(38) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 38);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(39) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 39);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(40) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 40);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(41) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 41);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(42) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 42);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(43) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 43);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(44) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 44);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(45) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 45);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(46) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 46);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(47) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 47);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(48) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 48);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(49) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 49);
+}
+.t-avatar-group-offset-left .t-avatar__wrapper:nth-child(50) {
+  z-index: calc(var(--td-avatar-group-init-z-index, 50) - 50);
+}
+.t-avatar-group__collapse--slot,
+.t-avatar-group__collapse--default {
+  z-index: 0;
+  font-weight: 600;
+}
+.t-avatar-group__collapse--slot {
+  float: left;
+}
+.t-avatar-group__collapse--slot:not(:empty) + .t-avatar-group__collapse--default {
+  display: none;
+  float: left;
+}
+.t-avatar-group__collapse--slot:empty + .t-avatar-group__collapse--default {
+  display: block;
+  float: left;
+}

package/dist/avatar-group/avatar-group.vue

@@ -0,0 +1,121 @@
+<template>
+  <view
+    :style="tools._style([customStyle])"
+    :class="className"
+  >
+    <slot />
+    <view :class="classPrefix + '__collapse--slot'">
+      <slot name="collapse-avatar" />
+    </view>
+    <view
+      v-if="max && max < length"
+      :class="classPrefix + '__collapse--default'"
+      @click="onCollapsedItemClick"
+    >
+      <t-avatar
+        :t-class-image="prefix + '-avatar--border ' + prefix + '-avatar--border-' + size + ' ' + tClassImage"
+        :t-class-content="tClassContent"
+        :size="size"
+        :shape="shape"
+        :icon="collapseAvatar ? '' : 'user-add'"
+        aria-role="none"
+      >
+        {{ collapseAvatar }}
+      </t-avatar>
+    </view>
+  </view>
+</template>
+<script>
+import TAvatar from '../avatar/avatar';
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import avatarGroupProps from './props';
+
+import tools from '../common/utils.wxs';
+import { ParentMixin, RELATION_MAP } from '../common/relation';
+
+
+const name = `${prefix}-avatar-group`;
+const AVATAR_GROUP_INIT_Z_INDEX = 50;
+
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  externalClasses: [
+    `${prefix}-class`,
+    `${prefix}-class-content`,
+    `${prefix}-class-image`,
+  ],
+  mixins: [ParentMixin(RELATION_MAP.Avatar)],
+  components: {
+    TAvatar,
+  },
+  props: {
+    ...avatarGroupProps,
+  },
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      hasChild: true,
+      length: 0,
+      className: '',
+      tools,
+    };
+  },
+  watch: {
+    cascading: 'setClass',
+    size: 'setClass',
+  },
+  mounted() {
+    this.setClass();
+    this.length = this.children?.length || 0;
+    if (this.length) {
+      this.handleMax();
+    }
+  },
+  methods: {
+    setClass() {
+      const { cascading, size } = this;
+      const direction = cascading.split('-')[0];
+      const classList = [
+        name,
+        this.tClass,
+        `${name}-offset-${direction}`,
+        `${name}-offset-${direction}-${size.indexOf('px') > -1 ? 'medium' : size || 'medium'}`,
+      ];
+
+      this.className = classList.join(' ');
+    },
+
+    handleMax() {
+      const { max, cascading } = this;
+      const len = this.children.length;
+      if (!max || max > len) return;
+
+      const restAvatars = this.children.splice(max, len - max);
+
+      const isLeft = cascading === 'left-up';
+      this.children.forEach((child, index) => {
+        child.setStyle({
+          zIndex: isLeft && `calc(var(--td-avatar-group-init-z-index, ${AVATAR_GROUP_INIT_Z_INDEX}) - ${index})`,
+          padding: 'var(--td-avatar-group-line-spacing, 2px) 0',
+        });
+      });
+
+      restAvatars.forEach((child) => {
+        child.hide();
+      });
+    },
+    onCollapsedItemClick(e) {
+      this.$emit('collapsed-item-click', e);
+    },
+  },
+});
+</script>
+<style scoped>
+@import './avatar-group.css';
+</style>

package/dist/avatar-group/props.ts

@@ -0,0 +1,44 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdAvatarGroupProps } from './type';
+export default {
+  /** 图片之间的层叠关系，可选值：左侧图片在上和右侧图片在上 */
+  cascading: {
+    type: String,
+    default: 'left-up' as TdAvatarGroupProps['cascading'],
+    validator(val: TdAvatarGroupProps['cascading']): boolean {
+      if (!val) return true;
+      return ['left-up', 'right-up'].includes(val);
+    },
+  },
+  /** 头像数量超出时，会出现一个头像折叠元素。该元素内容可自定义。默认为 `+N`。示例：`+5`，`...`, `更多` */
+  collapseAvatar: {
+    type: String,
+  },
+  /** 能够同时显示的最多头像数量 */
+  max: {
+    type: Number,
+  },
+  /** 形状。优先级低于 Avatar.shape */
+  shape: {
+    type: String,
+    validator(val: TdAvatarGroupProps['shape']): boolean {
+      if (!val) return true;
+      return ['circle', 'round'].includes(val);
+    },
+  },
+  /** 尺寸，示例值：small/medium/large/24px/38px 等。优先级低于 Avatar.size */
+  size: {
+    type: String,
+    default: '',
+  },
+  /** 点击头像折叠元素触发 */
+  onCollapsedItemClick: {
+    type: Function,
+    default: () => ({}),
+  },
+};

package/dist/avatar-group/type.ts

@@ -0,0 +1,38 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { ShapeEnum } from '../common/common';
+
+export interface TdAvatarGroupProps {
+  /**
+   * 图片之间的层叠关系，可选值：左侧图片在上和右侧图片在上
+   * @default 'left-up'
+   */
+  cascading?: CascadingValue;
+  /**
+   * 头像数量超出时，会出现一个头像折叠元素。该元素内容可自定义。默认为 `+N`。示例：`+5`，`...`, `更多`
+   */
+  collapseAvatar?: string;
+  /**
+   * 能够同时显示的最多头像数量
+   */
+  max?: number;
+  /**
+   * 形状。优先级低于 Avatar.shape
+   */
+  shape?: ShapeEnum;
+  /**
+   * 尺寸，示例值：small/medium/large/24px/38px 等。优先级低于 Avatar.size
+   * @default ''
+   */
+  size?: string;
+  /**
+   * 点击头像折叠元素触发
+   */
+  onCollapsedItemClick?: (e: MouseEvent) => void;
+}
+
+export type CascadingValue = 'left-up' | 'right-up';

package/dist/back-top/README.en-US.md

@@ -0,0 +1,49 @@
+:: BASE_DOC ::
+
+## API
+
+### BackTop Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+fixed | Boolean | true | \- | N
+icon | String / Boolean / Object | true | \- | N
+scroll-top | Number | 0 | \- | N
+text | String | '' | \- | N
+theme | String | round | options: round/half-round/round-dark/half-round-dark | N
+visibility-height | Number | 200 | \- | N
+
+### BackTop Events
+
+name | params | description
+-- | -- | --
+to-top | \- | \-
+
+### BackTop Slots
+
+name | Description
+-- | --
+\- | \-
+icon | \-
+
+### BackTop External Classes
+
+className | Description
+-- | --
+t-class | \-
+t-class-icon | \-
+t-class-text | \-
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-back-top-half-round-border-radius | @radius-round | -
+--td-back-top-round-bg-color | @bg-color-container | -
+--td-back-top-round-border-color | @component-border | -
+--td-back-top-round-border-radius | @radius-circle | -
+--td-back-top-round-color | @text-color-primary | -
+--td-back-top-round-dark-bg-color | @gray-color-13 | -
+--td-back-top-round-dark-color | @text-color-anti | -

package/dist/back-top/README.md

@@ -0,0 +1,67 @@
+---
+title: BackTop 返回顶部
+description: 用于当页面过长往下滑动时，帮助用户快速回到页面顶部。
+spline: navigation
+isComponent: true
+---
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TBackTop from '@tdesign/uniapp/back-top/back-top.vue';
+```
+
+### 基础返回顶部
+
+{{ base }}
+
+## API
+
+### BackTop Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+fixed | Boolean | true | 是否绝对定位固定到屏幕右下方 | N
+icon | String / Boolean / Object | true | 图标。值为 `false` 表示不显示图标。不传表示使用默认图标 `'backtop'` | N
+scroll-top | Number | 0 | 页面滚动距离 | N
+text | String | '' | 文案 | N
+theme | String | round | 预设的样式类型。可选项：round/half-round/round-dark/half-round-dark | N
+visibility-height | Number | 200 | 滚动高度达到此参数值才出现 | N
+
+### BackTop Events
+
+名称 | 参数 | 描述
+-- | -- | --
+to-top | \- | 点击触发
+
+### BackTop Slots
+
+名称 | 描述
+-- | --
+\- | 默认插槽，自定义内容区域内容
+icon |  自定义图标内容
+
+### BackTop External Classes
+
+类名 | 描述
+-- | --
+t-class | 根节点样式类
+t-class-icon | 图标样式类
+t-class-text | 文本样式类
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-back-top-half-round-border-radius | @radius-round | -
+--td-back-top-round-bg-color | @bg-color-container | -
+--td-back-top-round-border-color | @component-border | -
+--td-back-top-round-border-radius | @radius-circle | -
+--td-back-top-round-color | @text-color-primary | -
+--td-back-top-round-dark-bg-color | @gray-color-13 | -
+--td-back-top-round-dark-color | @text-color-anti | -

package/dist/back-top/back-top.css

@@ -0,0 +1,65 @@
+.t-back-top {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: transparent;
+  overflow: hidden;
+  box-sizing: border-box;
+  transition: height 0.2s;
+  height: auto;
+}
+.t-back-top--fixed {
+  position: fixed;
+  right: var(--td-spacer, 16rpx);
+  bottom: calc(var(--td-spacer-2, 32rpx) + env(safe-area-inset-bottom));
+}
+.t-back-top--round,
+.t-back-top--round-dark {
+  width: 96rpx;
+  height: 96rpx;
+  border-radius: var(--td-back-top-round-border-radius, var(--td-radius-circle, 50%));
+}
+.t-back-top--round,
+.t-back-top--half-round {
+  color: var(--td-back-top-round-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
+  border: 1rpx solid var(--td-back-top-round-border-color, var(--td-component-border, var(--td-gray-color-4, #dcdcdc)));
+  background-color: var(--td-back-top-round-bg-color, var(--td-bg-color-container, var(--td-font-white-1, #ffffff)));
+}
+.t-back-top--round-dark,
+.t-back-top--half-round-dark {
+  color: var(--td-back-top-round-dark-color, var(--td-text-color-anti, var(--td-font-white-1, #ffffff)));
+  background-color: var(--td-back-top-round-dark-bg-color, var(--td-gray-color-13, #242424));
+}
+.t-back-top--half-round,
+.t-back-top--half-round-dark {
+  width: 120rpx;
+  height: 80rpx;
+  border-radius: 0;
+  border-top-left-radius: var(--td-back-top-half-round-border-radius, var(--td-radius-round, 999px));
+  border-bottom-left-radius: var(--td-back-top-half-round-border-radius, var(--td-radius-round, 999px));
+  flex-direction: row;
+  right: 0;
+}
+.t-back-top__text--round,
+.t-back-top__text--round-dark,
+.t-back-top__text--half-round,
+.t-back-top__text--half-round-dark {
+  font-weight: 600;
+  font-size: var(--td-font-size, 20rpx);
+  line-height: 24rpx;
+}
+.t-back-top__text--half-round,
+.t-back-top__text--half-round-dark {
+  width: 48rpx;
+}
+.t-back-top__icon:not(:empty) + .t-back-top__text--half-round,
+.t-back-top__icon:not(:empty) + .t-back-top__text--half-round-dark {
+  margin-left: 8rpx;
+}
+.t-back-top__icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 44rpx;
+}